Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/canvas/element/manual/draw-element-image/animated-gif.tentative.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<title>Canvas.drawElementImage: animated gif advances and repaints the canvas</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#child {
width: 100px;
height: 100px;
}
#canvas {
background: grey;
}
img {
width: 100px;
height: 100px;
}
</style>
<canvas id=canvas width="100px" height="100px" layoutsubtree>
<div id=child>
<img id=image src="resources/rgb100.gif"/>
</div>
</canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d", {willReadFrequently:true});
let child = document.getElementById("child");
promise_test(() => new Promise((resolve, reject) => {
let sawRed = false, sawGreen = false, sawBlue = false;
let colorEquals = (a, b) => {
return a[0] == b[0] && a[1] == b[1] && a[2] == b[2] && a[3] == b[3];
};
let paintCount = 0;
canvas.onpaint = (evt) => {
if (evt.changedElements.length != 1 || evt.changedElements[0] != child) {
reject("Canvas paint event 'changedElements' should contain just " +
"the child element.");
}
if (++paintCount > 10) {
reject(`Did not see red, green, and blue after ${paintCount} paints.`);
}
ctx.clearRect(0, 0, 100, 100);
ctx.drawElementImage(child, 0, 0);
const imageData = ctx.getImageData(25, 25, 1, 1);
if (colorEquals(imageData.data, [255, 0, 0, 255])) {
sawRed = true;
} else if (colorEquals(imageData.data, [0, 153, 0, 255])) {
sawGreen = true;
} else if (colorEquals(imageData.data, [0, 0, 255, 255])) {
sawBlue = true;
}
if (sawRed && sawGreen && sawBlue) {
resolve("Saw red, green, and blue animated image frames.");
}
};
}));
</script>
</html>