mirror of
https://github.com/servo/servo.git
synced 2025-08-17 03:15:34 +01:00
Update web-platform-tests to revision 1268bd5901289acc95b1a576f108bdf382d82e44
This commit is contained in:
WPT Sync Bot
parent
f183d66217
commit
292a12e545
261 changed files with 5513 additions and 966 deletions
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Below-viewport loading=lazy images do not block the window load event
|
||||
when scrolled into viewport</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- When this image loads, we will scroll the below-viewport loading=lazy
|
||||
images into the viewport. This happens before the window load event is
|
||||
fired -->
|
||||
<img id="scroll_trigger"
|
||||
src="resources/image.png?scroll-trigger&pipe=trickle(d1)"
|
||||
onload="scroll_trigger_img.resolve();" onerror="scroll_trigger_img.reject();">
|
||||
<!-- This image blocks the window load event for 2 seconds -->
|
||||
<img src="resources/image.png?window-load-blocking&pipe=trickle(d2)">
|
||||
|
||||
<div style="height:1000vh"></div>
|
||||
<!-- These images must load because they intersect the viewport, but they must
|
||||
not block the window load event, because they are loading=lazy -->
|
||||
<img id="visible"
|
||||
src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visible_img.resolve();" onerror="visible_img.reject();">
|
||||
<img id="visibility_hidden" style="visibility:hidden;"
|
||||
src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
|
||||
</body>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const scroll_trigger_img = new ElementLoadPromise("visible");
|
||||
const visible_img = new ElementLoadPromise("visible");
|
||||
const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
|
||||
|
||||
async_test(t => {
|
||||
let has_window_loaded = false;
|
||||
|
||||
scroll_trigger_img.promise
|
||||
.then(t.step_func(() => {
|
||||
assert_false(has_window_loaded,
|
||||
"The scroll_trigger image should load before the window " +
|
||||
"load event fires");
|
||||
visibility_hidden_img.element().scrollIntoView();
|
||||
}))
|
||||
.catch(t.unreached_func("The scroll_trigger image should load"));
|
||||
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
Promise.all([visible_img.promise, visibility_hidden_img.promise])
|
||||
.then(t.step_func_done(() => {
|
||||
assert_true(has_window_loaded,
|
||||
"The window load event should fire before the " +
|
||||
"below-viewport loading=lazy images load");
|
||||
assert_true(visible_img.element().complete,
|
||||
"The below-viewport loading=lazy visible image is complete");
|
||||
assert_true(visibility_hidden_img.element().complete,
|
||||
"The below-viewport loading=lazy visibility:hidden image is complete");
|
||||
}))
|
||||
.catch(t.unreached_func("The images should load successfully"));
|
||||
|
||||
}, "Below-viewport loading=lazy images do not block the window load event when " +
|
||||
"scrolled into viewport");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>In-viewport loading=lazy images do not block the window load event</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- This image blocks the window load event for 1 second -->
|
||||
<img src="resources/image.png?window-load-blocking&pipe=trickle(d1)">
|
||||
|
||||
<!-- These images must load because they intersect the viewport, but they must
|
||||
not block the window load event, because they are loading=lazy -->
|
||||
<img id="visible"
|
||||
src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visible_img.resolve();" onerror="visible_img.reject();">
|
||||
<img id="visibility_hidden" style="visibility:hidden;"
|
||||
src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
|
||||
</body>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const visible_img = new ElementLoadPromise("visible");
|
||||
const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
|
||||
|
||||
async_test(t => {
|
||||
|
||||
let has_window_loaded = false;
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
Promise.all([visible_img.promise, visibility_hidden_img.promise])
|
||||
.then(t.step_func_done(() => {
|
||||
assert_true(has_window_loaded,
|
||||
"The window load event should fire before the " +
|
||||
"in-viewport loading=lazy images load");
|
||||
assert_true(visible_img.element().complete,
|
||||
"The in-viewport loading=lazy visible image is complete");
|
||||
assert_true(visibility_hidden_img.element().complete,
|
||||
"The in-viewport loading=lazy visibility:hidden image is " +
|
||||
"complete");
|
||||
}))
|
||||
.catch(t.unreached_func("The images should load successfully"));
|
||||
|
||||
}, "In-viewport loading=lazy images do not block the window load event");
|
||||
</script>
|
||||
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' load when in the viewport</title>
|
||||
<title>Images with loading='lazy' load only when in the viewport</title>
|
||||
<link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<!--
|
||||
|
|
@ -13,43 +13,40 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
|||
-->
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that images with loading='lazy' load once they enter the viewport.");
|
||||
const t = async_test("Images with loading='lazy' load only when in the viewport");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
let has_window_loaded = false;
|
||||
let has_window_load_fired = false;
|
||||
|
||||
const in_viewport_img_onload = t.step_func(function() {
|
||||
assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
|
||||
const in_viewport_img_onload = t.step_func(() => {
|
||||
assert_false(has_in_viewport_loaded,
|
||||
"The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
assert_true(document.getElementById("in_viewport").complete);
|
||||
document.getElementById("below_viewport").scrollIntoView();
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
|
||||
assert_true(document.getElementById("in_viewport").complete);
|
||||
assert_false(has_window_loaded, "The window.load() event should only fire once.");
|
||||
has_window_loaded = true;
|
||||
document.getElementById("below_viewport").scrollIntoView();
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_load_fired = true;
|
||||
}));
|
||||
|
||||
const below_viewport_img_onload = t.step_func_done(function() {
|
||||
assert_true(is_image_fully_loaded(
|
||||
document.getElementById("below_viewport"),
|
||||
document.getElementById("in_viewport")));
|
||||
assert_true(has_window_loaded, "The window.load() event should have fired before below_viewport loaded.");
|
||||
const below_viewport_img_onload = t.step_func_done(() => {
|
||||
assert_true(has_in_viewport_loaded,
|
||||
"The below-viewport image should not load until it has been " +
|
||||
"scrolled into viewport, after the in-viewport image loads");
|
||||
assert_true(has_window_load_fired,
|
||||
"Below-viewport loading=lazy images should not block the " +
|
||||
"window load event from firing");
|
||||
});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<img id="in_viewport" src="resources/image.png?first" loading="lazy" onload="in_viewport_img_onload();">
|
||||
<div style="height:10000px;"></div>
|
||||
<img id="below_viewport" src="resources/image.png?second" loading="lazy" onload="below_viewport_img_onload();">
|
||||
|
||||
<!--
|
||||
This async script loads very slowly in order to ensure that, if the
|
||||
below_viewport element has started loading, it has a chance to finish
|
||||
loading before window.load() happens, so that the test will dependably fail
|
||||
in that case instead of potentially passing depending on how long different
|
||||
resource fetches take.
|
||||
-->
|
||||
<script async src="/common/slow.py"></script>
|
||||
<!-- |in_viewport| takes 2 seconds to load, so that in browsers that don't
|
||||
support lazy loading, |below_viewport| finishes before |in_viewport|, and
|
||||
the test will dependably fail without relying on a timeout. -->
|
||||
<img id="in_viewport" loading="lazy" src="resources/image.png?first&pipe=trickle(d2)"
|
||||
onload="in_viewport_img_onload();">
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?second"
|
||||
onload="below_viewport_img_onload();">
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Test behavior of in viewport invisible lazy images</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- These two images should load, the latter not blocking the window load event -->
|
||||
<img id="expected" src='resources/image.png?expected&pipe=trickle(d1)'>
|
||||
<img id="visibility_hidden" style="visibility:hidden;"
|
||||
src='resources/image.png?visibility_hidden&pipe=trickle(d2)' loading='lazy'
|
||||
onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
|
||||
|
||||
<!-- These images should not load at all -->
|
||||
<img id="display_none" style="display:none;" src='resources/image.png?display_none'
|
||||
loading='lazy'
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src='resources/image.png?attribute_hidden' loading='lazy'
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src='resources/image.png?js_display_none' loading='lazy'
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const expected = document.getElementById("expected");
|
||||
const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
|
||||
const display_none_img = new ElementLoadPromise("display_none");
|
||||
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
|
||||
const js_display_none_img = new ElementLoadPromise("js_display_none");
|
||||
|
||||
let has_window_loaded = false;
|
||||
|
||||
async_test(t => {
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
const unreached_not_rendered_img_func =
|
||||
t.unreached_func("The not-rendered in-viewport loading=lazy images " +
|
||||
"should not have attempted to load.");
|
||||
|
||||
display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
attribute_hidden_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
js_display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
visibility_hidden_img.promise.then(
|
||||
t.step_func_done(() => {
|
||||
assert_true(is_image_fully_loaded(visibility_hidden_img.element(), expected),
|
||||
"The loading=lazy visibility:hidden image is equivalent " +
|
||||
"to the expected image.");
|
||||
assert_true(has_window_loaded,
|
||||
"The loading=lazy visibility:hidden image does not block " +
|
||||
"the window load event, and finishes loading after the " +
|
||||
"window load event fires.");
|
||||
})
|
||||
).catch(t.unreached_func("The loading=lazy visibility:hidden image " +
|
||||
"should load successfully."));
|
||||
}, "Test behavior of in viewport invisible lazy images");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Below-viewport loading=lazy not-rendered images should never load,
|
||||
even when scrolled into view</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- These images must not attempt to load when scrolled into the
|
||||
viewport -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
|
||||
<!-- Later in the test we'll scroll to this div, instead of the above images,
|
||||
since due to them not being rendered, they cannot be scrolled to -->
|
||||
<div id="rendered_div"></div>
|
||||
</body>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const display_none_img = new ElementLoadPromise("display_none");
|
||||
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
|
||||
const js_display_none_img = new ElementLoadPromise("js_display_none");
|
||||
const rendered_div_element = document.querySelector('#rendered_div');
|
||||
|
||||
async_test(t => {
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
rendered_div.scrollIntoView();
|
||||
}));
|
||||
|
||||
const unreached_not_rendered_img_func =
|
||||
t.unreached_func("The not-rendered below-viewport loading=lazy images " +
|
||||
"should not attempt to load.");
|
||||
|
||||
display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
attribute_hidden_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
js_display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
// If none of the above images load after being scrolled to within the below
|
||||
// timeout, the test passes.
|
||||
t.step_timeout(t.done, 2000);
|
||||
}, "Below-viewport loading=lazy not-rendered images should never load, " +
|
||||
"even when scrolled into view");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>In-viewport loading=lazy not-rendered images should never load</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- These images must not attempt to load -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<!--
|
||||
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
|
||||
-->
|
||||
|
||||
<script>
|
||||
const display_none_img = new ElementLoadPromise("display_none");
|
||||
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
|
||||
const js_display_none_img = new ElementLoadPromise("js_display_none");
|
||||
|
||||
async_test(t => {
|
||||
const unreached_not_rendered_img_func =
|
||||
t.unreached_func("The not-rendered in-viewport loading=lazy images " +
|
||||
"should not attempt to load.");
|
||||
|
||||
display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
attribute_hidden_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
js_display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
t.step_timeout(t.done, 2000);
|
||||
}, "In-viewport loading=lazy not-rendered images should never load");
|
||||
</script>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue