-
Notifications
You must be signed in to change notification settings - Fork 54
/
lazyload-enabled-tentative.sub.html
77 lines (70 loc) · 2.46 KB
/
lazyload-enabled-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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/common.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
}
iframe {
width: 400px;
height: 400px;
margin: 10px;
}
.spacer {
width: 100%;
height: 10000px;
}
</style>
<div class="spacer"></div>
<script>
let cross_origin_url =
"http://{{hosts[alt][www]}}:{{ports[http][0]}}/" +
"feature-policy/experimental-features/resources/lazyload-contents.html";
let load_timeout = 600; // ms
let expected_timeout_msg = false;
let expected_load_msg = "This page is lazyloaded.";
window.scrollTo(0, 0);
// Sanity-check: Make sure loading='lazy' works as intended.
promise_test(async(t) => {
// Add a frame with loading="lazy".
let frame_on = createIframe(document.body, {
id: "ON",
loading: "lazy",
src: `${cross_origin_url}?id=ON`
});
// Sanity-check: The frame is not visible.
assert_greater_than(
frame_on.getBoundingClientRect().top,
window.innerHeight * 2,
"Unexpected position for <iframe> with ID 'ON'.");
let msg_or_timeout_attr_on =
await waitForMessageOrTimeout(t, "ON", load_timeout);
assert_equals(msg_or_timeout_attr_on,
expected_timeout_msg,
"With loading='lazy', the frame should not load.");
}, "Sanity-check: Contents do not load immediately (no eager-loading) " +
"when the loading attribute is 'lazy' and frame is in viewport.");
// When feature is enabled, a frame can turn off lazy loading by setting the
// attribute to 'off'.
promise_test(async(t) => {
// Add a frame with loading="eager".
let frame_off = createIframe(document.body, {
id: "OFF",
loading: "eager",
src: `${cross_origin_url}?id=OFF`
});
// Sanity-check: The frame is not visible.
assert_greater_than(
frame_off.getBoundingClientRect().top,
window.innerHeight * 2,
"Unexpected position for <iframe> with ID 'OFF'.");
let msg_or_timeout_attr_off =
await waitForMessageOrTimeout(t, "OFF", load_timeout);
assert_equals(msg_or_timeout_attr_off,
expected_load_msg,
"With loading='eager', the frame should load.");
}, "When 'lazyload' feature is enabled, a frame can avoid lazyloading by " +
"setting 'loading' attribute to 'eager'");
</script>