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