mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 17:55:50 +00:00
Bug 1633114 [wpt PR 23250] - LazyLoad: Fix feature-policy tests, a=testonly
Automatic update from web-platform-tests LazyLoad: Fix feature-policy tests This updates the lazyload attribute as 'loading' with values of auto, eager and lazy for the feature policy tests. TBR=hiroshige@chromium.org Fixed: 1074608 Change-Id: If8ba1d09bce518ac36b70bd2a7b01687ffec87c1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2166638 Commit-Queue: rajendrant <rajendrant@chromium.org> Reviewed-by: Scott Little <sclittle@chromium.org> Cr-Commit-Position: refs/heads/master@{#763010} -- wpt-commits: ddad50b245ec811f4cbce8c84639122e9a7732a9 wpt-pr: 23250
This commit is contained in:
rajendrant
moz-wptsync-bot
parent
fc7c3ca6b5
commit
ba4374745c
@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Verify behavior of 'lazyload' attribute state 'OFF' when the feature policy 'lazyload' is
|
||||
<title>Verify behavior of 'loading' attribute state 'eager' when the feature policy 'lazyload' is
|
||||
disabled.
|
||||
</title>
|
||||
<link rel="stylesheet" href="/feature-policy/experimental-features/resources/lazyload-image.css">
|
||||
@ -27,34 +27,30 @@ img {
|
||||
<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="eager" loading="eager" 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_eager = document.getElementById("eager");
|
||||
var img_auto = document.getElementById("auto");
|
||||
[window, img_off, img_auto].forEach((target) => {
|
||||
[window, img_eager, 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;
|
||||
return img_eager.did_load === img_auto.did_load;
|
||||
}
|
||||
|
||||
// Verifies that "off" and "auto" behave the same for out-of-view images.
|
||||
// Verifies that "eager" 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.");
|
||||
}, "When the 'lazyload' feature is disabled, lazyload=EAGER and lazyload=AUTO behave the same.");
|
||||
|
||||
// Verifies that images with attributes "off" and "auto" load after the images get into view.
|
||||
// Verifies that images with attributes "eager" 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_eager.load_complete;
|
||||
await img_auto.load_complete;
|
||||
}, "Sanity-check: Verify that all images load after they are scrolled into view.");
|
||||
</script>
|
||||
|
||||
@ -30,54 +30,54 @@ iframe {
|
||||
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
// Sanity-check: Make sure lazyload='on' works as intended.
|
||||
// Sanity-check: Make sure loading='lazy' 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`
|
||||
// Add a frame with loading="lazy".
|
||||
let frame_lazy = createIframe(document.body, {
|
||||
id: "LAZY",
|
||||
loading: "lazy",
|
||||
src: `${cross_origin_url}?id=LAZY`
|
||||
});
|
||||
// Sanity-check: The frame is not visible.
|
||||
assert_greater_than(
|
||||
frame_on.getBoundingClientRect().top,
|
||||
frame_lazy.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,
|
||||
"Unexpected position for <iframe> with ID 'LAZY'.");
|
||||
let msg_or_timeout_attr_lazy =
|
||||
await waitForMessageOrTimeout(t, "LAZY", load_timeout);
|
||||
assert_equals(msg_or_timeout_attr_lazy,
|
||||
expected_timeout_msg,
|
||||
"With lazyload='on', the frame should not load.");
|
||||
"With loading='lazy', 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.");
|
||||
"when the loading attribute is 'lazy' and frame is in viewport.");
|
||||
|
||||
|
||||
// Verify that when 'lazyload' policy is disabled, lazyload='off' and
|
||||
// lazyload='auto' behave the same.
|
||||
// Verify that when 'lazyload' policy is disabled, loading='eager' and
|
||||
// loading='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`
|
||||
// Add a frame with loading="eager".
|
||||
let frame_lazy = createIframe(document.body, {
|
||||
id: "EAGER",
|
||||
loading: "eager",
|
||||
src: `${cross_origin_url}?id=EAGER`
|
||||
});
|
||||
// Sanity-check: The frame is not visible.
|
||||
assert_greater_than(
|
||||
frame_on.getBoundingClientRect().top,
|
||||
frame_lazy.getBoundingClientRect().top,
|
||||
window.innerHeight * 2,
|
||||
"Unexpected position for <iframe> with ID 'OFF'.");
|
||||
let msg_or_timeout_attr_off =
|
||||
await waitForMessageOrTimeout(t, "OFF", load_timeout);
|
||||
"Unexpected position for <iframe> with ID 'EAGER'.");
|
||||
let msg_or_timeout_attr_eager =
|
||||
await waitForMessageOrTimeout(t, "EAGER", load_timeout);
|
||||
|
||||
// Now do the same for lazyload='auto'.
|
||||
// Now do the same for loading='auto'.
|
||||
let frame_auto = createIframe(document.body, {
|
||||
id: "AUTO",
|
||||
lazyload: "auto",
|
||||
loading: "auto",
|
||||
src: `${cross_origin_url}?id=AUTO`
|
||||
});
|
||||
// Sanity-check: The frame is not visible.
|
||||
assert_greater_than(
|
||||
frame_on.getBoundingClientRect().top,
|
||||
frame_lazy.getBoundingClientRect().top,
|
||||
window.innerHeight * 2,
|
||||
"Unexpected position for <iframe> with ID 'AUTO'.");
|
||||
let msg_or_timeout_attr_auto =
|
||||
@ -85,9 +85,9 @@ iframe {
|
||||
|
||||
// The result should be the same.
|
||||
assert_equals(
|
||||
msg_or_timeout_attr_off,
|
||||
msg_or_timeout_attr_eager,
|
||||
msg_or_timeout_attr_auto,
|
||||
"lazyload='off' not treated as 'auto'.");
|
||||
"loading='eager' not treated as 'auto'.");
|
||||
}, "When 'lazyload' feature is disabled, a frame cannot avoid lazyloading " +
|
||||
"by setting 'lazyload' attribute to 'off'");
|
||||
"by setting 'loading' attribute to 'eager'");
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Verify behavior of 'lazyload' attribute state 'OFF' when the feature policy 'lazyload' is
|
||||
<title>Verify behavior of 'lazyload' attribute state 'eager' when the feature policy 'lazyload' is
|
||||
enabled.
|
||||
</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
@ -26,7 +26,7 @@ img {
|
||||
<body>
|
||||
<p>Image inserted further below.</p>
|
||||
<div id="image-container">
|
||||
<img id="off" loading="eager" src="http://{{hosts[alt][www1]}}:{{ports[http][0]}}/feature-policy/experimental-features/resources/lazyload.png"></img>
|
||||
<img loading="eager" src="http://{{hosts[alt][www1]}}:{{ports[http][0]}}/feature-policy/experimental-features/resources/lazyload.png"></img>
|
||||
</div>
|
||||
<script>
|
||||
var img = document.querySelector("img");
|
||||
|
||||
@ -53,7 +53,7 @@ iframe {
|
||||
"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'.
|
||||
// attribute to 'eager'.
|
||||
promise_test(async(t) => {
|
||||
// Add a frame with loading="eager".
|
||||
let frame_off = createIframe(document.body, {
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Verify behavior of 'lazyload' attribute state 'ON' (sanity-check for lazyload policy tests).
|
||||
</title>
|
||||
<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 lazyload="on" src="http://{{hosts[alt][www1]}}:{{ports[http][0]}}/feature-policy/experimental-features/resources/lazyload.png"/>
|
||||
</div>
|
||||
<script>
|
||||
var img = document.querySelector("img");
|
||||
|
||||
[img, window].forEach((target) => {
|
||||
target.did_load = false;
|
||||
target.load_complete = wait_for_load(target).then(() => target.did_load = true );
|
||||
});
|
||||
|
||||
// Sanity-check: Verify that when feature-policy 'lazyload' is enabled, the lazyload attribute
|
||||
// value 'OFF' works as expected (images load immediately).
|
||||
promise_test( async(t) => {
|
||||
await window.load_complete;
|
||||
assert_false(img.did_load, "Out-of-viewport image should not have loaded.");
|
||||
img.scrollIntoView();
|
||||
await img.load_complete;
|
||||
}, "Verify 'lazyload' attribute state 'on' works as expected: image loads only when in " +
|
||||
"viewport.");
|
||||
</script>
|
||||
</body>
|
||||
@ -33,7 +33,6 @@ iframe {
|
||||
// Verify that when 'loading-frame-default-eager' policy is disabled, the
|
||||
// loading attribute "auto" leads to lazy loading.
|
||||
promise_test(async(t) => {
|
||||
// Add a frame with load="off".
|
||||
let frame_loading_auto = createIframe(document.body, {
|
||||
id: "auto",
|
||||
// Sets the "loading" attribute to "auto".
|
||||
|
||||
Loading…
Reference in New Issue
Block a user