iframe-loading-lazy-in-scroller-horizontal-far.html (965B)
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: 10000vw; 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/subframe.html" 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 do not load when far from viewport." 41 ); 42 43 function img_onload() { 44 t.unreached_func( 45 "Lazy-loading iframe far from viewport should not load." 46 )(); 47 } 48 49 t.step_timeout(() => { 50 t.done(); 51 }, 2000); 52 </script>