| <!DOCTYPE html> |
| <html> |
| <style> |
| .box { |
| width: 300px; |
| height: 300px; |
| } |
| .image-background { |
| background-position: -300px 0px; |
| } |
| @media (-webkit-min-device-pixel-ratio: 2) { |
| .box { |
| width: 150px; |
| height: 150px; |
| } |
| .image-background { |
| background-position: -150px 0px; |
| background-size: 450px, 150px; |
| } |
| } |
| </style> |
| <body> |
| <div class="box image-background"></div> |
| <script> |
| (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 element. |
| var element = document.getElementsByClassName("image-background")[0]; |
| element.style.backgroundImage = 'url(' + image.src + ')'; |
| |
| if (window.internals && window.testRunner) { |
| // Force layout and display so the image frame starts decoding. |
| document.body.offsetHeight; |
| testRunner.display(); |
| |
| // Wait for the image frame to finish decoding before finishing the test. |
| element.addEventListener("webkitImageFrameReady", function() { |
| // Ensure internals.destroyDecodedDataForAllImages() will not destroy |
| // the image's decoded data because it is inside the viewport. |
| internals.destroyDecodedDataForAllImages(); |
| testRunner.notifyDone(); |
| }, false); |
| } |
| } |
| image.src = "resources/red-green-blue-900-300.png"; |
| })(); |
| </script> |
| </body> |
| </html> |
