3 <title>In-viewport loading=lazy images do not block the window load event
</title>
4 <link rel=
"author" title=
"Rob Buis" href=
"mailto:rbuis@igalia.com">
5 <link rel=
"author" title=
"Dom Farolino" href=
"mailto:dom@chromium.org">
6 <script src=
"/resources/testharness.js"></script>
7 <script src=
"/resources/testharnessreport.js"></script>
8 <script src=
"common.js"></script>
12 <!-- This image blocks the window load event for 1 second -->
13 <img src=
"resources/image.png?window-load-blocking&pipe=trickle(d1)">
15 <!-- These images must load because they intersect the viewport, but they must
16 not block the window load event, because they are loading=lazy -->
18 src=
"resources/image.png?visible&pipe=trickle(d3)" loading=
"lazy"
19 onload=
"visible_img.resolve();" onerror=
"visible_img.reject();">
20 <img id=
"visibility_hidden" style=
"visibility:hidden;"
21 src=
"resources/image.png?visibility_hidden&pipe=trickle(d3)" loading=
"lazy"
22 onload=
"visibility_hidden_img.resolve();" onerror=
"visibility_hidden_img.reject();">
26 const visible_img
= new ElementLoadPromise("visible");
27 const visibility_hidden_img
= new ElementLoadPromise("visibility_hidden");
31 let has_window_loaded
= false;
32 window
.addEventListener("load", t
.step_func(() => {
33 has_window_loaded
= true;
36 Promise
.all([visible_img
.promise
, visibility_hidden_img
.promise
])
37 .then(t
.step_func_done(() => {
38 assert_true(has_window_loaded
,
39 "The window load event should fire before the " +
40 "in-viewport loading=lazy images load");
41 assert_true(visible_img
.element().complete
,
42 "The in-viewport loading=lazy visible image is complete");
43 assert_true(visibility_hidden_img
.element().complete
,
44 "The in-viewport loading=lazy visibility:hidden image is " +
47 .catch(t
.unreached_func("The images should load successfully"));
49 }, "In-viewport loading=lazy images do not block the window load event");