| <!DOCTYPE html> |
| <html> |
| <style> |
| .box { |
| height: 50px; |
| display: inline-block; |
| zoom: 2; |
| image-rendering: crisp-edges; |
| } |
| .green-box { |
| width: 100px; |
| background-position: -50px -16500px; |
| } |
| .repeat-box { |
| width: 400px; |
| background-position: 0px -16500px; |
| background-repeat: repeat-x; |
| } |
| .image-background { |
| } |
| </style> |
| <body> |
| <div class="box green-box image-background"></div> |
| <br> |
| <div class="box repeat-box image-background"></div> |
| <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); |
| |
| // Change the background of the elements. |
| var elements = document.getElementsByClassName("image-background"); |
| if (window.internals && window.testRunner) { |
| var promises = []; |
| for (var index = 0; index < elements.length; ++index) |
| promises.push(setElementImageBackground(elements[index], image)); |
| |
| Promise.all(promises).then(() => { |
| // Ensure internals.destroyDecodedDataForAllImages() will not destroy |
| // the images' decoded data because it is inside the viewport. |
| internals.destroyDecodedDataForAllImages(); |
| testRunner.notifyDone(); |
| }); |
| } else { |
| for (var index = 0; index < elements.length; ++index) |
| elements[index].style.backgroundImage = 'url(' + image.src + ')'; |
| } |
| } |
| image.src = "resources/sprite-sheet-red-green-blue.png"; |
| })(); |
| </script> |
| </body> |
| </html> |
