Skip to content

GitLab

T
tangled
Commit b0ae2767 authored by Dominic Farolino's avatar Dominic Farolino Committed by Commit Bot
Browse files
Options

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/+/2154820Reviewed-by: default avatarScott Little <sclittle@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/master@{#760205}
parent f13f9711
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 58 deletions
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-cross-origin-iframe-001.sub.html
View file @ b0ae2767
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<title>An image with loading='lazy' in cross origin iframe loads when it gets <title>A below-viewport loading=lazy image in a cross origin iframe loads only
visible by scrolling the iframe's scroll port</title> when scrolled into viewport</title>
<link rel="help" href="https://github.com/scott-little/lazyload"> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/common/get-host-info.sub.js"></script> <script src="/common/get-host-info.sub.js"></script>
</head> </head>
<iframe id="iframe" width="500px" height="500px"></iframe> <iframe id="iframe" width="500px" height="500px"></iframe>
<script> <script>
promise_test(async t => { promise_test(t => {
iframe.src = iframe.src =
get_host_info().HTTP_NOTSAMESITE_ORIGIN + get_host_info().HTTP_NOTSAMESITE_ORIGIN +
new URL("resources/", self.location).pathname + new URL("resources/", self.location).pathname +
"image-loading-lazy-below-viewport-iframe.html"; "image-loading-lazy-below-viewport.html";
let image_loaded = false;
await new Promise(resolve => { // Wait for the frame to report that its window load event fired.
window.addEventListener("message", event => { return new Promise(resolve => {
if (event.data == "window_loaded") { window.addEventListener("message",
resolve(); event => resolve(event.data), {once: true});
} else if (event.data == "image_loaded") { }).then(iframe_message => {
image_loaded = true; assert_equals(iframe_message, "window_loaded",
} "The loading=lazy image should not block the iframe's load " +
}, { once: true }); "event");
});
assert_false(image_loaded, // Tell the iframe to scroll the image element into view.
"lazy-load image shouldn't block window load event"); frames[0].postMessage("scroll", "*");
// Scroll to make the image element gets visible in view. return new Promise(resolve => {
frames[0].postMessage("scroll", "*"); window.addEventListener("message", event => resolve(event.data));
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();
}); });
}); }).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> </script>
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-cross-origin-iframe-002.sub.html
View file @ b0ae2767
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<title>An image with loading='lazy' in cross origin iframe loads when it gets <title>A loading=lazy image in a below-viewport cross-origin iframe loads only
visible by scrolling the parent scroll container of the iframe</title> when the cross-origin iframe is scrolled into view</title>
<link rel="help" href="https://github.com/scott-little/lazyload"> <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/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/common/get-host-info.sub.js"></script> <script src="/common/get-host-info.sub.js"></script>
...@@ -10,36 +12,35 @@ ...@@ -10,36 +12,35 @@
<div style="height:1000vh;"></div> <div style="height:1000vh;"></div>
<iframe id="iframe" width="500px" height="500px"></iframe> <iframe id="iframe" width="500px" height="500px"></iframe>
<script> <script>
promise_test(async t => { promise_test(t => {
iframe.src = iframe.src =
get_host_info().HTTP_NOTSAMESITE_ORIGIN + get_host_info().HTTP_NOTSAMESITE_ORIGIN +
new URL("resources/", self.location).pathname + 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 => { // Scroll the iframe into view, which also puts the image into view.
window.addEventListener("message", event => { iframe.scrollIntoView();
if (event.data == "window_loaded") {
resolve();
} else if (event.data == "image_loaded") {
image_loaded = true;
}
}, { once: true });
});
assert_false(image_loaded, return new Promise(resolve => {
"lazy-load image shouldn't block window load event"); 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");
iframe.scrollIntoView(); }); // new Promise().
await new Promise(resolve => { }); // promise_test().
window.addEventListener("message", event => {
assert_equals(event.data, "image_loaded",
"lazy-load image should be loaded once after it gets visible");
resolve();
});
});
});
</script> </script>
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-in-script-disabled-iframe.html
View file @ b0ae2767
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div style="height:1000vh;"></div> <div style="height:1000vh;"></div>
<iframe id="iframe" sandbox="allow-same-origin" <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> </iframe>
<script> <script>
promise_test(async t => { promise_test(async t => {
......
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-move-into-script-disabled-iframe.html
View file @ b0ae2767
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</head> </head>
<div style="height:1000vh;"></div> <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>
<iframe id="sandboxediframe" sandbox="allow-same-origin" <iframe id="sandboxediframe" sandbox="allow-same-origin"
src="resources/subframe.html"> src="resources/subframe.html">
......
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-below-viewport-iframe.html → third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-below-viewport.html
View file @ b0ae2767
<!DOCTYPE html> <!DOCTYPE html>
<div style="height:1000vh;"></div> <div style="height:1000vh;"></div>
<img id="img" loading="lazy" src="image.png"> <img id="img" loading="lazy" src="image.png">
<script> <script>
const img = document.querySelector('#img');
img.addEventListener("load", () => { img.addEventListener("load", () => {
parent.postMessage("image_loaded", "*"); parent.postMessage("image_loaded", "*");
}); });
......
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-in-viewport-iframe.html → third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/resources/image-loading-lazy-in-viewport.html
View file @ b0ae2767
<!DOCTYPE html> <!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"> <img id="img" loading="lazy" src="image.png">
<script> <script>
const img = document.querySelector('#img');
img.addEventListener("load", () => { img.addEventListener("load", () => {
parent.postMessage("image_loaded", "*"); parent.postMessage("image_loaded", "*");
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment