scrolling-below-viewport-image-lazy-loading-in-iframe.html (1358B)
1 <!DOCTYPE html> 2 <title>Scrolling a lazy loaded image into view in an iframe</title> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <iframe onload="async_test(this.contentWindow.run)" srcdoc=" 6 <!DOCTYPE html> 7 <script src='/resources/testharness.js'></script> 8 <script src='/resources/testharnessreport.js'></script> 9 <script src='../resources/common.js'></script> 10 11 <h1>Scroll down...</h1> 12 <p>Scroll down...</p> 13 <p>Scroll down...</p> 14 <img id='below_iframe_viewport_img' src='resources/image.png' loading='lazy' 15 onload='below_iframe_viewport_img.resolve();' onerror='below_iframe_viewport_img.reject();'> 16 17 <script> 18 const scroll_trigger_img = new ElementLoadPromise('visible'); 19 const below_iframe_viewport_img = new ElementLoadPromise('below_iframe_viewport_img'); 20 21 function run(t) { 22 below_iframe_viewport_img.element().scrollIntoView(); 23 below_iframe_viewport_img.promise 24 .then(t.step_func(() => { 25 assert_not_equals(below_iframe_viewport_img.element().width, 0, 'width should be greater than zero after scrolling'); 26 assert_not_equals(below_iframe_viewport_img.element().height, 0, 'height should be greater than zero after scrolling'); 27 t.done(); 28 })) 29 .catch(t.unreached_func('The below_iframe_viewport image should load')); 30 }; 31 </script> 32 "></iframe>