image-loading-lazy-in-cross-origin-iframe-002.sub.html (1763B)
1 <!DOCTYPE html> 2 <head> 3 <title>A loading=lazy image in a below-viewport cross-origin iframe loads only 4 when the cross-origin iframe is scrolled into view</title> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes"> 6 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 7 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/common/get-host-info.sub.js"></script> 11 </head> 12 13 <div style="height:1000vh;"></div> 14 <iframe id="iframe" width="500px" height="500px"></iframe> 15 16 <script> 17 promise_test(t => { 18 iframe.src = 19 get_host_info().HTTP_NOTSAMESITE_ORIGIN + 20 new URL("resources/", self.location).pathname + 21 "image-loading-lazy-in-viewport.html"; 22 23 // Wait for the frame to report that its window load event fired. 24 return new Promise(resolve => { 25 window.addEventListener("message", 26 event => resolve(event.data), {once: true}); 27 }).then(iframe_message => { 28 assert_equals(iframe_message, "window_loaded", 29 "The loading=lazy image should not block the iframe's load " + 30 "event"); 31 32 // Scroll the iframe into view, which also puts the image into view. 33 iframe.scrollIntoView(); 34 35 return new Promise(resolve => { 36 window.addEventListener("message", event => resolve(event.data)); 37 }); 38 }).then(iframe_message => { 39 assert_equals(iframe_message, "image_loaded", 40 "The below-viewport loading=lazy image should load only " + 41 "once scrolled into the viewport"); 42 43 }); // new Promise(). 44 45 }); // promise_test(). 46 </script>