mirror of
https://github.com/servo/servo.git
synced 2025-07-16 03:43:38 +01:00
93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
<!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;
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
// Sanity-check: Make sure lazyload='on' works as intended.
|
|
promise_test(async(t) => {
|
|
// Add a frame with lazyload="on".
|
|
let frame_on = createIframe(document.body, {
|
|
id: "ON",
|
|
lazyload: "on",
|
|
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 lazyload='on', the frame should not load.");
|
|
}, "Sanity-check: Contents do not load immediately (no eager-loading) " +
|
|
"when the lazyload attribute is 'on' and frame is in viewport.");
|
|
|
|
|
|
// Verify that when 'lazyload' policy is disabled, lazyload='off' and
|
|
// lazyload='auto' behave the same.
|
|
promise_test(async(t) => {
|
|
// Add a frame with lazyload="off".
|
|
let frame_on = createIframe(document.body, {
|
|
id: "OFF",
|
|
lazyload: "off",
|
|
src: `${cross_origin_url}?id=OFF`
|
|
});
|
|
// Sanity-check: The frame is not visible.
|
|
assert_greater_than(
|
|
frame_on.getBoundingClientRect().top,
|
|
window.innerHeight * 2,
|
|
"Unexpected position for <iframe> with ID 'OFF'.");
|
|
let msg_or_timeout_attr_off =
|
|
await waitForMessageOrTimeout(t, "OFF", load_timeout);
|
|
|
|
// Now do the same for lazyload='auto'.
|
|
let frame_auto = createIframe(document.body, {
|
|
id: "AUTO",
|
|
lazyload: "auto",
|
|
src: `${cross_origin_url}?id=AUTO`
|
|
});
|
|
// Sanity-check: The frame is not visible.
|
|
assert_greater_than(
|
|
frame_on.getBoundingClientRect().top,
|
|
window.innerHeight * 2,
|
|
"Unexpected position for <iframe> with ID 'AUTO'.");
|
|
let msg_or_timeout_attr_auto =
|
|
await waitForMessageOrTimeout(t, "AUTO", load_timeout);
|
|
|
|
// The result should be the same.
|
|
assert_equals(
|
|
msg_or_timeout_attr_off,
|
|
msg_or_timeout_attr_auto,
|
|
"lazyload='off' not treated as 'auto'.");
|
|
}, "When 'lazyload' feature is disabled, a frame cannot avoid lazyloading " +
|
|
"by setting 'lazyload' attribute to 'off'");
|
|
</script>
|