82 lines
3.0 KiB
HTML
82 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<div>
|
|
<canvas width="100" height="100" class="small-canvas" id="canvas-1"></canvas>
|
|
<canvas width="100" height="100" class="small-canvas" id="canvas-2"></canvas>
|
|
<canvas width="100" height="100" class="small-canvas" id="canvas-3"></canvas>
|
|
</div>
|
|
<div>
|
|
<canvas width="200" height="200" class="large-canvas" id="canvas-a"></canvas>
|
|
<canvas width="200" height="200" class="large-canvas" id="canvas-b"></canvas>
|
|
<canvas width="200" height="200" class="large-canvas" id="canvas-c"></canvas>
|
|
</div>
|
|
<script>
|
|
function drawFrame(image, canvasIds) {
|
|
return new Promise((resolve) => {
|
|
var newCanvasIds = [];
|
|
for (canvasId of canvasIds) {
|
|
let canvas = document.getElementById("canvas-" + canvasId);
|
|
let context = canvas.getContext("2d");
|
|
context.drawImage(image, 0, 0, 100, 100, 0, 0, canvas.width, canvas.height);
|
|
newCanvasIds.push(String.fromCharCode(canvasId.charCodeAt() + 1))
|
|
}
|
|
|
|
if (window.internals) {
|
|
image.addEventListener("webkitImageFrameReady", function() {
|
|
resolve(newCanvasIds);
|
|
}, false);
|
|
} else {
|
|
setTimeout(() => {
|
|
resolve(newCanvasIds);
|
|
}, 40);
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawImage(image, canvasIds, frameCount) {
|
|
let promise = drawFrame(image, canvasIds);
|
|
for (let frame = 1; frame < frameCount; ++frame) {
|
|
promise = promise.then((canvasIds) => {
|
|
return drawFrame(image, canvasIds);
|
|
});
|
|
}
|
|
return promise;
|
|
}
|
|
|
|
function loadImage(image, src, canvasIds, frameCount) {
|
|
return new Promise((resolve) => {
|
|
image.onload = (() => {
|
|
if (window.internals) {
|
|
internals.setImageFrameDecodingDuration(image, 0.030);
|
|
internals.settings.setAnimatedImageDebugCanvasDrawingEnabled(true);
|
|
internals.settings.setWebkitImageReadyEventEnabled(true);
|
|
}
|
|
drawImage(image, canvasIds, frameCount).then(resolve);
|
|
});
|
|
image.src = src;
|
|
});
|
|
}
|
|
|
|
(function() {
|
|
if (window.internals)
|
|
internals.clearMemoryCache();
|
|
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
var image = new Image;
|
|
document.body.appendChild(image);
|
|
|
|
var promise = loadImage(image, "resources/animated-red-green-blue.gif", ['1', 'a'], 3);
|
|
|
|
promise.then(() => {
|
|
image.remove();
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|