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
Show 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 => {
window.addEventListener("message", event => {
if (event.data == "window_loaded") {
resolve();
} else if (event.data == "image_loaded") {
image_loaded = true;
}
}, { once: true });
});
assert_false(image_loaded, // Wait for the frame to report that its window load event fired.
"lazy-load image shouldn't block window load event"); 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");
// Scroll to make the image element gets visible in view. // Tell the iframe to scroll the image element into view.
frames[0].postMessage("scroll", "*"); frames[0].postMessage("scroll", "*");
await new Promise(resolve => { return new Promise(resolve => {
window.addEventListener("message", event => { window.addEventListener("message", event => resolve(event.data));
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;
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 });
});
assert_false(image_loaded, // Wait for the frame to report that its window load event fired.
"lazy-load image shouldn't block window load event"); 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");
// Scroll the iframe into view, which also puts the image into view.
iframe.scrollIntoView(); iframe.scrollIntoView();
await new Promise(resolve => { return new Promise(resolve => {
window.addEventListener("message", event => { window.addEventListener("message", event => resolve(event.data));
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-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