blob: fe33b1aa3e31ee67e4f4c7d30dd68248fbf3d4d5 [file] [log] [blame]
<!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>