invisible-image.html (3393B)
1 <!DOCTYPE html> 2 <head> 3 <title>Test that below-viewport invisible images that are not marked 4 loading=lazy still load, and block the window load event</title> 5 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 6 <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="common.js"></script> 10 </head> 11 12 <body> 13 <div style="height:1000vh;"></div> 14 <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1'> 15 <img id="visibility_hidden_explicit_eager" style="visibility:hidden;" src='resources/image.png?2' 16 loading="eager"> 17 18 <img id="display_none" style="display:none;" src='resources/image.png?3'> 19 <img id="display_none_explicit_eager" style="display:none;" src='resources/image.png?4' 20 loading="eager"> 21 22 <img id="attribute_hidden" hidden src='resources/image.png?5'> 23 <img id="attribute_hidden_explicit_eager" hidden src='resources/image.png?6' 24 loading="eager"> 25 26 <img id="js_display_none" src='resources/image.png?7'> 27 <img id="js_display_none_explicit_eager" src='resources/image.png?8' 28 loading="eager"> 29 <script> 30 document.getElementById("js_display_none").style = 'display:none;'; 31 32 const visibility_hidden_element = document.getElementById("visibility_hidden"); 33 const visibility_hidden_element_explicit_eager = 34 document.getElementById("visibility_hidden_explicit_eager"); 35 36 const display_none_element = document.getElementById("display_none"); 37 const display_none_element_explicit_eager = 38 document.getElementById("display_none_explicit_eager"); 39 40 const attribute_hidden_element = document.getElementById("attribute_hidden"); 41 const attribute_hidden_element_explicit_eager = 42 document.getElementById("attribute_hidden_explicit_eager"); 43 44 const js_display_none_element = document.getElementById("js_display_none"); 45 const js_display_none_element_explicit_eager = 46 document.getElementById("js_display_none_explicit_eager"); 47 48 let have_images_loaded = false; 49 50 async_test(t => { 51 let image_fully_loaded_promise = (element) => { 52 return new Promise(resolve => { 53 element.addEventListener("load", t.step_func(resolve)); 54 }); 55 } 56 57 Promise.all([ 58 image_fully_loaded_promise(visibility_hidden_element), 59 image_fully_loaded_promise(visibility_hidden_element_explicit_eager), 60 image_fully_loaded_promise(display_none_element), 61 image_fully_loaded_promise(display_none_element_explicit_eager), 62 image_fully_loaded_promise(attribute_hidden_element), 63 image_fully_loaded_promise(attribute_hidden_element_explicit_eager), 64 image_fully_loaded_promise(js_display_none_element), 65 image_fully_loaded_promise(js_display_none_element_explicit_eager) 66 ]).then(t.step_func(() => { 67 have_images_loaded = true; 68 })).catch(t.unreached_func("All images should load correctly")); 69 70 window.addEventListener("load", t.step_func_done(() => { 71 assert_true(have_images_loaded, 72 "The images should block the window load event."); 73 })); 74 75 }, "Test that below-viewport invisible images that are not marked " + 76 "loading=lazy still load, and block the window load event"); 77 </script>