1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!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>
|
