<!DOCTYPE html>
<html>
<style>
    div {
        width: 400px;
        height: 400px;
    }
 </style>
 <body>
    <div></div>
    <script>
        function loadImageAndSetBackground(element, image, src, forceAsyncImageDrawing) {
            return new Promise((resolve) => {
                image.onload = (() => {
                    if (window.internals && window.testRunner && forceAsyncImageDrawing) {
                        // Force async image decoding for this image.
                        internals.setLargeImageAsyncDecodingEnabledForTesting(image, true);

                        // Change the background of the element.
                        element.style.backgroundImage = 'url(' + image.src + ')';

                        // Force layout and display so the image gets drawn.
                        document.body.offsetHeight;
                        if (window.testRunner)
                            testRunner.display();

                        image.addEventListener("webkitImageFrameReady", function() {
                            internals.setLargeImageAsyncDecodingEnabledForTesting(image, false);
                            setTimeout(function() {
                                // Force redraw to get the red image drawn.
                                testRunner.display();
                                resolve();
                            }, 0);
                        }, false);
                    } else {
                        // Change the background of the element.
                        element.style.backgroundImage = 'url(' + image.src + ')';
                        resolve();
                    }
                });
                image.src = src;
            });
        }
 
        (function() {
            if (window.internals && window.testRunner) {
                internals.clearMemoryCache();
                internals.settings.setWebkitImageReadyEventEnabled(true);
                internals.settings.setLargeImageAsyncDecodingEnabled(true);
                testRunner.waitUntilDone();
            }
 
            var image = new Image;
            document.body.appendChild(image);
            var element = document.querySelector("div");

            // Load a large (400x400) red image to force sync image decoding and drawing.
            loadImageAndSetBackground(element, image, "resources/red-400x400.png", true).then(() => {
                // Replace the large red image with a large (400x400) green image.
                // Sync image decoding and drawing have to be forced in this case.
                return loadImageAndSetBackground(element, image, "resources/green-400x400.png", false);
            }).then(() => {
                image.remove();
                // A single paint is needed to draw the large (400x400) green image.
                if (window.testRunner)
                    testRunner.notifyDone();
            });
        })();
    </script>
 </body>
 </html>