-
Notifications
You must be signed in to change notification settings - Fork 54
/
lazyload-disabled-image-tentative.sub.html
61 lines (55 loc) · 2.13 KB
/
lazyload-disabled-image-tentative.sub.html
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
<!doctype html>
<meta charset=utf-8>
<title>Verify behavior of 'lazyload' attribute state 'OFF' when the feature policy 'lazyload' is
disabled.
</title>
<link rel="stylesheet" href="/feature-policy/experimental-features/resources/lazyload-image.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/common.js"></script>
<style>
body {
width: 100%;
height: 100%;
}
img {
width: 200px;
height: 200px;
border: solid 1px black;
}
#image-container {
position: absolute;
top: 10000px;
}
</style>
<body>
<p>Image inserted further below.</p>
<div id="image-container">
<img id="off" lazyload="off" src="http://{{hosts[alt][www1]}}:{{ports[http][0]}}/feature-policy/experimental-features/resources/lazyload.png"></img>
<img id="auto" lazyload="auto" src="http://{{hosts[alt][www2]}}:{{ports[http][0]}}/feature-policy/experimental-features/resources/lazyload.png"></img>
</div>
<script>
var img_off = document.getElementById("off");
var img_auto = document.getElementById("auto");
[window, img_off, img_auto].forEach((target) => {
target.load_complete = wait_for_load(target).then(() => target.did_load = true );
});
function images_loaded() {
return img_off.did_load && img_auto.did_load;
}
function same_load_state() {
return img_off.did_load === img_auto.did_load;
}
// Verifies that "off" and "auto" behave the same for out-of-view images.
promise_test(async(t) => {
await window.load_complete;
assert_true(same_load_state(), "Expected same loading state for both images.");
}, "When the 'lazyload' feature is disabled, lazyload=OFF and lazyload=AUTO behave the same.");
// Verifies that images with attributes "off" and "auto" load after the images get into view.
promise_test(async(t) => {
document.getElementById("image-container").scrollIntoView();
await img_off.load_complete;
await img_auto.load_complete;
}, "Sanity-check: Verify that all images load after they are scrolled into view.");
</script>
</body>