<!DOCTYPE html>
<html>
<head>
<style>
    iframe {
        width: 200px;
        height: 100px;
    }
</style>
</head>
<body>
    <iframe frameBorder="0" srcdoc="<body style='image-rendering: crisp-edges; background-position: -100px -33000px; background-size: 400px 66200px;'></body>"></iframe>
    <script>
        function setElementImageBackground(element, image) {
            return new Promise((resolve) => {
                element.style.backgroundImage = 'url(' + image.src + ')';

                // Force layout and display so the image frame starts decoding
                document.body.offsetHeight;
                testRunner.display();
 
                element.addEventListener("webkitImageFrameReady", function() {
                    resolve();
                }, false);
            });
        }

        (function() {
            if (window.internals && window.testRunner) {
                internals.clearMemoryCache();
                internals.settings.setWebkitImageReadyEventEnabled(true);
                internals.settings.setLargeImageAsyncDecodingEnabled(true);
                testRunner.waitUntilDone();
            }

            var image = new Image();
            image.onload = function() {
                // Force async image decoding for this image.
                if (window.internals)
                    internals.setLargeImageAsyncDecodingEnabledForTesting(image, true);

                var iframeDocument = document.querySelector('iframe').contentWindow.document;

                if (window.internals && window.testRunner) {
                    setElementImageBackground(iframeDocument.querySelector("body"), image).then(() => {
                        testRunner.notifyDone();
                    });
                } else
                    iframeDocument.querySelector("body").style.backgroundImage = 'url(' + image.src + ')';
            }
            image.src = "resources/sprite-sheet-red-green-blue.png";
        })();
    </script>
</body>
</html>