зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1631110 [wpt PR 23076] - Clean up lazy load tests, a=testonly
Automatic update from web-platform-tests Clean up lazy load tests This CL cleans up the image lazy loading cross-origin iframe tests. The tests assert that lazy loading works even for images in cross-origin iframes. Before this CL, the main test files didn't make use of promise_test correctly, so the tests would just timeout for implementations that didn't support lazy load. This happened because none of the promises the test awaits actually perform assertions, so in the error case, they never resolve or reject. This CL fixes that by refactoring the tests to use a chain of promises that correctly employ assertions, and return a final fulfilled promise. R=sclittle@chromium.org Bug: N/A Change-Id: I4462cf7fd3d2a67fc1ccfb18ec8196bfdb50891f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2154820 Reviewed-by: Scott Little <sclittle@chromium.org> Commit-Queue: Dominic Farolino <dom@chromium.org> Cr-Commit-Position: refs/heads/master@{#760205} -- wpt-commits: 248e44b485b2a69c1c25f7c6f64b681b3aca4424 wpt-pr: 23076
This commit is contained in:
Dominic Farolino
moz-wptsync-bot
Родитель
9b68ca3969
Коммит
7a648dc65a
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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", "*");
|
||||
});
|
||||
|
|
@ -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", "*");
|
||||
});
|
||||
Загрузка…
Ссылка в новой задаче