iframe-loading-lazy-in-scroller-horizontal.html (940B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/#lazy-load-root-margin"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 #scroller { 8 width: 100px; 9 height: 100px; 10 overflow: scroll; 11 background-color: gray; 12 display: flex; 13 } 14 15 #spacer { 16 width: 130px; 17 height: 130px; 18 flex-shrink: 0; 19 } 20 21 #target { 22 width: 100px; 23 height: 100px; 24 flex-shrink: 0; 25 } 26 </style> 27 28 <div id="scroller"> 29 <div id="spacer"></div> 30 <iframe 31 id="target" 32 src="resources/green.png" 33 loading="lazy" 34 onload="iframe_onload();" 35 ></iframe> 36 </div> 37 38 <script> 39 const t = async_test( 40 "Test that lazy-loaded iframes load when near viewport." 41 ); 42 43 function iframe_onload() { 44 t.done(); 45 } 46 47 t.step_timeout(() => { 48 t.unreached_func( 49 "Timed out while waiting for iframe to load." 50 )(); 51 }, 2000); 52 </script>