image-loading-lazy-negative-margin.html (2345B)
1 <!DOCTYPE html> 2 <head> 3 <title>Images with loading='lazy' defers images in a hidden area as a result 4 of negative margins</title> 5 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 11 <body> 12 <script> 13 window.negative_margin_test = 14 async_test("A loading=lazy image that is pulled into an `overflow: hidden` " + 15 "area by a negative margin will not load because " + 16 "IntersectionObserver sees it as non-intersecting"); 17 18 // If the `negative_margin` image in the DOM loads, the test should fail 19 // immediately. 20 window.negative_margin_onload = 21 negative_margin_test.step_func_done( 22 negative_margin_test.unreached_func("The image with a negative margin " + 23 "should never load")); 24 </script> 25 26 <div style="width: 200px; height: 200px; overflow: hidden;"> 27 <img id="negative_margin" width="5px"; style="margin-left: -10000vw;" 28 loading="lazy" src="resources/image.png?loading-lazy-negative-margin" 29 onload="window.negative_margin_onload()"> 30 </div> 31 32 <script> 33 const intersection_observer_promise = new Promise(resolve => { 34 function io_callback(entries) { 35 assert_equals(entries.length, 1); 36 resolve(entries[0].isIntersecting); 37 } 38 39 const options = { 40 root: document, 41 rootMargin: '0px', 42 threshold: 1.0, 43 } 44 45 const observer = new IntersectionObserver(io_callback, options); 46 observer.observe(document.querySelector('#negative_margin')); 47 }); 48 49 const timeout_promise = new Promise(resolve => { 50 window.negative_margin_test.step_timeout(resolve, 500); 51 }); 52 53 Promise.all([intersection_observer_promise, timeout_promise]).then( 54 window.negative_margin_test.step_func_done(values => { 55 assert_equals(values.length, 2); 56 assert_equals(values[0], false, "The IntersectionObserver sees that " + 57 "the image does not intersect the " + 58 "viewport"); 59 })); 60 </script> 61 </body>