<!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>