Update web-platform-tests to revision 9d583db6a1a16763322dce912bf057490cd7b0c7

This commit is contained in:
WPT Sync Bot 2020-04-19 08:19:10 +00:00
parent 306e8ac5f9
commit e116a19f0b
243 changed files with 6909 additions and 2244 deletions

View file

@ -1,45 +1,44 @@
<!DOCTYPE html>
<head>
<title>An image with loading='lazy' in cross origin iframe loads when it gets
visible by scrolling the iframe's scroll port</title>
<link rel="help" href="https://github.com/scott-little/lazyload">
<title>A below-viewport loading=lazy image in a cross origin iframe loads only
when scrolled into viewport</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
<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/get-host-info.sub.js"></script>
</head>
<iframe id="iframe" width="500px" height="500px"></iframe>
<script>
promise_test(async t => {
promise_test(t => {
iframe.src =
get_host_info().HTTP_NOTSAMESITE_ORIGIN +
new URL("resources/", self.location).pathname +
"image-loading-lazy-below-viewport-iframe.html";
get_host_info().HTTP_NOTSAMESITE_ORIGIN +
new URL("resources/", self.location).pathname +
"image-loading-lazy-below-viewport.html";
let image_loaded = false;
// Wait for the frame to report that its window load event fired.
return new Promise(resolve => {
window.addEventListener("message",
event => resolve(event.data), {once: true});
}).then(iframe_message => {
assert_equals(iframe_message, "window_loaded",
"The loading=lazy image should not block the iframe's load " +
"event");
await new Promise(resolve => {
window.addEventListener("message", event => {
if (event.data == "window_loaded") {
resolve();
} else if (event.data == "image_loaded") {
image_loaded = true;
}
}, { once: true });
});
// Tell the iframe to scroll the image element into view.
frames[0].postMessage("scroll", "*");
assert_false(image_loaded,
"lazy-load image shouldn't block window load event");
// Scroll to make the image element gets visible in view.
frames[0].postMessage("scroll", "*");
await new Promise(resolve => {
window.addEventListener("message", event => {
assert_equals(event.data, "image_loaded",
"lazy-load image should be loaded once after it gets visible");
resolve();
return new Promise(resolve => {
window.addEventListener("message", event => resolve(event.data));
});
});
});
}).then(iframe_message => {
assert_equals(iframe_message, "image_loaded",
"The below-viewport loading=lazy image should load only " +
"once scrolled into the viewport");
}); // new Promise();
}); // promise_test.
</script>

View file

@ -1,8 +1,10 @@
<!DOCTYPE html>
<head>
<title>An image with loading='lazy' in cross origin iframe loads when it gets
visible by scrolling the parent scroll container of the iframe</title>
<link rel="help" href="https://github.com/scott-little/lazyload">
<title>A loading=lazy image in a below-viewport cross-origin iframe loads only
when the cross-origin iframe is scrolled into view</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
<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/get-host-info.sub.js"></script>
@ -10,36 +12,35 @@
<div style="height:1000vh;"></div>
<iframe id="iframe" width="500px" height="500px"></iframe>
<script>
promise_test(async t => {
promise_test(t => {
iframe.src =
get_host_info().HTTP_NOTSAMESITE_ORIGIN +
new URL("resources/", self.location).pathname +
"image-loading-lazy-in-viewport-iframe.html";
"image-loading-lazy-in-viewport.html";
let image_loaded = false;
// Wait for the frame to report that its window load event fired.
return new Promise(resolve => {
window.addEventListener("message",
event => resolve(event.data), {once: true});
}).then(iframe_message => {
assert_equals(iframe_message, "window_loaded",
"The loading=lazy image should not block the iframe's load " +
"event");
await new Promise(resolve => {
window.addEventListener("message", event => {
if (event.data == "window_loaded") {
resolve();
} else if (event.data == "image_loaded") {
image_loaded = true;
}
}, { once: true });
});
// Scroll the iframe into view, which also puts the image into view.
iframe.scrollIntoView();
assert_false(image_loaded,
"lazy-load image shouldn't block window load event");
iframe.scrollIntoView();
await new Promise(resolve => {
window.addEventListener("message", event => {
assert_equals(event.data, "image_loaded",
"lazy-load image should be loaded once after it gets visible");
resolve();
return new Promise(resolve => {
window.addEventListener("message", event => resolve(event.data));
});
});
});
}).then(iframe_message => {
assert_equals(iframe_message, "image_loaded",
"The below-viewport loading=lazy image should load only " +
"once scrolled into the viewport");
}); // new Promise().
}); // promise_test().
</script>

View file

@ -9,7 +9,7 @@
<div style="height:1000vh;"></div>
<iframe id="iframe" sandbox="allow-same-origin"
src="resources/image-loading-lazy-in-viewport-iframe.html">
src="resources/image-loading-lazy-in-viewport.html">
</iframe>
<script>
promise_test(async t => {

View file

@ -8,7 +8,7 @@
</head>
<div style="height:1000vh;"></div>
<iframe id="iframe" src="resources/image-loading-lazy-in-viewport-iframe.html">
<iframe id="iframe" src="resources/image-loading-lazy-in-viewport.html">
</iframe>
<iframe id="sandboxediframe" sandbox="allow-same-origin"
src="resources/subframe.html">

View file

@ -0,0 +1,55 @@
<head>
<title>Images with loading='lazy' can be lazy loaded multiple times</title>
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<!-- This is used to represent the top of the viewport, so we can scroll the
below-viewport image out-of-view later in the test -->
<div id="top_div"></div>
<div style="height:1000vh;"></div>
<img id="below_viewport" loading="lazy" src="resources/image.png?first">
<script>
const t = async_test("Images with loading='lazy' can be lazy loaded multiple times");
const image = document.querySelector('#below_viewport');
const top_div = document.querySelector('#top_div');
let has_window_load_fired = false;
// This should be triggered first.
window.addEventListener('load', t.step_func(() => {
has_window_load_fired = true;
// Scroll the loading=lazy below-viewport image into view, so that it loads.
image.scrollIntoView();
}));
image.onload = t.step_func(() => {
assert_true(has_window_load_fired,
"The loading=lazy below-viewport image should not block the " +
"window load event");
changeImageSourceAndScrollToTop();
});
function changeImageSourceAndScrollToTop() {
top_div.scrollIntoView();
// Lazily load a "different" image.
image.src = 'resources/image.png?second';
image.onload =
t.unreached_func("The loading=lazy below-viewport image should lazily " +
"load its second image, and not load it eagerly when " +
"the `src` attribute is changed");
// In 1s, scroll the image *back* into view, and record that it loads
// successfully.
t.step_timeout(() => {
image.onload = t.step_func_done();
image.scrollIntoView();
}, 1000);
}
</script>
</body>

View file

@ -1,7 +1,11 @@
<!DOCTYPE html>
<div style="height:1000vh;"></div>
<img id="img" loading="lazy" src="image.png">
<script>
const img = document.querySelector('#img');
img.addEventListener("load", () => {
parent.postMessage("image_loaded", "*");
});

View file

@ -1,6 +1,12 @@
<!DOCTYPE html>
<!-- This frame is used by image-loading-lazy-in-cross-origin-iframe-002.sub.html -->
<img id="img" loading="lazy" src="image.png">
<script>
const img = document.querySelector('#img');
img.addEventListener("load", () => {
parent.postMessage("image_loaded", "*");
});