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>
<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";
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 });
});
"image-loading-lazy-below-viewport.html";
assert_false(image_loaded,
"lazy-load image shouldn't block window load event");
// 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");
// Scroll to make the image element gets visible in view.
// Tell the iframe to scroll the image element into 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>
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>
<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";
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 });
});
"image-loading-lazy-in-viewport.html";
assert_false(image_loaded,
"lazy-load image shouldn't block window load event");
// 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");
// Scroll the iframe into view, which also puts the image into view.
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>
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 @@
<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 => {
......
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 @@
</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">
......
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>
<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", "*");
});
......
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>
<!-- 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", "*");
});
......
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