image-loading-lazy-move-document.html (1294B)
1 <!DOCTYPE html> 2 <head> 3 <title>Moving loading='lazy' image into another top level document</title> 4 <link rel="help" href="https://github.com/scott-little/lazyload"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 </head> 8 9 <div style="height:1000vh;"></div> 10 <img loading="lazy" 11 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC"> 12 <script> 13 promise_test(async t => { 14 let image_loaded = false; 15 const img = document.querySelector("img"); 16 img.addEventListener("load", () => { image_loaded = true; }); 17 18 await new Promise(resolve => window.addEventListener("load", resolve)); 19 20 assert_false(image_loaded, 21 "lazy-load image shouldn't be loaded yet"); 22 23 const anotherWin = window.open("resources/newwindow.html"); 24 25 await new Promise(resolve => anotherWin.addEventListener("load", resolve)); 26 27 anotherWin.document.body.appendChild(img); 28 29 assert_false(image_loaded, 30 "lazy-load image shouldn't be loaded yet"); 31 32 img.scrollIntoView(); 33 34 await new Promise(resolve => img.addEventListener("load", resolve)); 35 assert_true(img.complete, 36 "Now the lazy-load image should be loaded"); 37 }); 38 </script>