image-loading-lazy-in-cross-origin-iframe-001.sub.html (1707B)
1 <!DOCTYPE html> 2 <head> 3 <title>A below-viewport loading=lazy image in a cross origin iframe loads only 4 when scrolled into viewport</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 <iframe id="iframe" width="500px" height="500px"></iframe> 14 15 <script> 16 promise_test(t => { 17 iframe.src = 18 get_host_info().HTTP_NOTSAMESITE_ORIGIN + 19 new URL("resources/", self.location).pathname + 20 "image-loading-lazy-below-viewport.html"; 21 22 // Wait for the frame to report that its window load event fired. 23 return new Promise(resolve => { 24 window.addEventListener("message", 25 event => resolve(event.data), {once: true}); 26 }).then(iframe_message => { 27 assert_equals(iframe_message, "window_loaded", 28 "The loading=lazy image should not block the iframe's load " + 29 "event"); 30 31 // Tell the iframe to scroll the image element into view. 32 frames[0].postMessage("scroll", "*"); 33 34 return new Promise(resolve => { 35 window.addEventListener("message", event => resolve(event.data)); 36 }); 37 }).then(iframe_message => { 38 assert_equals(iframe_message, "image_loaded", 39 "The below-viewport loading=lazy image should load only " + 40 "once scrolled into the viewport"); 41 42 }); // new Promise(); 43 }); // promise_test. 44 </script>