| <!DOCTYPE html> |
| <head> |
| <title>Test that below-viewport invisible images that are not marked |
| loading=lazy still load, and block the window load event</title> |
| <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> |
| <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="common.js"></script> |
| </head> |
| |
| <body> |
| <div style="height:1000vh;"></div> |
| <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1'> |
| <img id="visibility_hidden_explicit_eager" style="visibility:hidden;" src='resources/image.png?2' |
| loading="eager"> |
| |
| <img id="display_none" style="display:none;" src='resources/image.png?3'> |
| <img id="display_none_explicit_eager" style="display:none;" src='resources/image.png?4' |
| loading="eager"> |
| |
| <img id="attribute_hidden" hidden src='resources/image.png?5'> |
| <img id="attribute_hidden_explicit_eager" hidden src='resources/image.png?6' |
| loading="eager"> |
| |
| <img id="js_display_none" src='resources/image.png?7'> |
| <img id="js_display_none_explicit_eager" src='resources/image.png?8' |
| loading="eager"> |
| <script> |
| document.getElementById("js_display_none").style = 'display:none;'; |
| |
| const visibility_hidden_element = document.getElementById("visibility_hidden"); |
| const visibility_hidden_element_explicit_eager = |
| document.getElementById("visibility_hidden_explicit_eager"); |
| |
| const display_none_element = document.getElementById("display_none"); |
| const display_none_element_explicit_eager = |
| document.getElementById("display_none_explicit_eager"); |
| |
| const attribute_hidden_element = document.getElementById("attribute_hidden"); |
| const attribute_hidden_element_explicit_eager = |
| document.getElementById("attribute_hidden_explicit_eager"); |
| |
| const js_display_none_element = document.getElementById("js_display_none"); |
| const js_display_none_element_explicit_eager = |
| document.getElementById("js_display_none_explicit_eager"); |
| |
| let have_images_loaded = false; |
| |
| async_test(t => { |
| let image_fully_loaded_promise = (element) => { |
| return new Promise(resolve => { |
| element.addEventListener("load", t.step_func(resolve)); |
| }); |
| } |
| |
| Promise.all([ |
| image_fully_loaded_promise(visibility_hidden_element), |
| image_fully_loaded_promise(visibility_hidden_element_explicit_eager), |
| image_fully_loaded_promise(display_none_element), |
| image_fully_loaded_promise(display_none_element_explicit_eager), |
| image_fully_loaded_promise(attribute_hidden_element), |
| image_fully_loaded_promise(attribute_hidden_element_explicit_eager), |
| image_fully_loaded_promise(js_display_none_element), |
| image_fully_loaded_promise(js_display_none_element_explicit_eager) |
| ]).then(t.step_func(() => { |
| have_images_loaded = true; |
| })).catch(t.unreached_func("All images should load correctly")); |
| |
| window.addEventListener("load", t.step_func_done(() => { |
| assert_true(have_images_loaded, |
| "The images should block the window load event."); |
| })); |
| |
| }, "Test that below-viewport invisible images that are not marked " + |
| "loading=lazy still load, and block the window load event"); |
| </script> |
| |
