<!DOCTYPE html>
<html>
<style>
    canvas {
        width: 100px;
        height: 100px;
    }
</style>    
<body>
    <canvas id="canvas"></canvas>
    <script>
        function drawFrame(image) {
            return new Promise((resolve) => {
                let canvas = document.getElementById("canvas");
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, canvas.width, canvas.height);
                setTimeout(() => {
                    resolve();
                }, 20);
            });
        }

        function drawImage(image, frameCount) {
            let promise = drawFrame(image);
            for (let frame = 1; frame < frameCount; ++frame) {
                promise = promise.then(() => {
                    // This forces destroyDecodedData() to be called.
                    internals.pruneMemoryCacheToSize(0);
                    return drawFrame(image);
                });
            }
            return promise;
        }

        function loadImage(src, frameCount) {
            return new Promise((resolve) => {
                let image = new Image;
                image.onload = (() => {
                    if (!window.internals)
                        return;
                    // This forces aysnc image decoding.
                    internals.setImageFrameDecodingDuration(image, 0.030);
                    drawImage(image, frameCount).then(resolve);
                });
                image.src = src;
            });
        }

        (function() {
            if (window.testRunner) {
                testRunner.dumpAsText();
                testRunner.waitUntilDone();
            }

            loadImage("resources/animated-red-green-blue.gif", 10).then(() => {
                if (window.testRunner) {
                    document.write("PASS. WebKit didn't crash.");
                    testRunner.notifyDone();
                }
            });
        })();
    </script>
</body>
</html>