57 lines
2.0 KiB
HTML
57 lines
2.0 KiB
HTML
<style>
|
|
div {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
canvas {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: black;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<p>This tests calling decode() for a animated image which is also an element in the DOM tree.</p>
|
|
<canvas></canvas>
|
|
<div></div>
|
|
<script>
|
|
if (window.internals && window.testRunner) {
|
|
internals.clearMemoryCache();
|
|
internals.settings.setAnimatedImageDebugCanvasDrawingEnabled(true);
|
|
internals.settings.setWebkitImageReadyEventEnabled(true);
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
var image = new Image;
|
|
var parent = document.querySelector("div");
|
|
parent.appendChild(image);
|
|
|
|
image.onload = (() => {
|
|
if (window.internals && window.testRunner) {
|
|
// Force layout and display so the image gets drawn. The image will draw its red frame.
|
|
document.body.offsetHeight;
|
|
testRunner.display();
|
|
|
|
// Wait till decoding the next (green) frame finishes and the animation advances to it.
|
|
image.addEventListener("webkitImageFrameReady", function() {
|
|
setTimeout(function() {
|
|
// Request decoding the next (blue) frame. Wait till decoding finishes and the
|
|
// animation advances to it.
|
|
image.decode().then(() => {
|
|
var canvas = document.querySelector("canvas");
|
|
var context = canvas.getContext("2d");
|
|
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
|
parent.remove();
|
|
testRunner.notifyDone();
|
|
});
|
|
}, 0);
|
|
});
|
|
}
|
|
});
|
|
image.src = "resources/animated-red-green-blue-repeat-2.gif";
|
|
</script>
|
|
</body>
|