mirror of
https://github.com/servo/servo.git
synced 2025-08-15 10:25:32 +01:00
Update web-platform-tests to revision 74d709131e3c91d09f1708378648a01957c47b38
This commit is contained in:
parent
e4657c1496
commit
81f079c722
77 changed files with 2043 additions and 524 deletions
|
@ -0,0 +1,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: 400%;
|
||||
}
|
||||
</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>
|
|
@ -0,0 +1,2 @@
|
|||
Feature-Policy: lazyload 'none'
|
||||
Cache-Control: no-cache, no-store, max-age=0
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Verify behavior of 'lazyload' attribute state 'OFF' when the feature policy 'lazyload' is
|
||||
enabled.
|
||||
</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: 400%;
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
<script>
|
||||
var img = document.querySelector("img");
|
||||
|
||||
[img, window].forEach((target) => {
|
||||
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_true(img.did_load, "Image should have loaded.");
|
||||
}, "When feature is enabled, lazyload=OFF works as expected.");
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,48 @@
|
|||
<!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: 400%;
|
||||
}
|
||||
</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>
|
Loading…
Add table
Add a link
Reference in a new issue