Skip to content

GitLab

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

Add lazyload lazy => eager tests 

This CL adds both image and iframe (tentative) WPTs that assert going
from loading=lazy => {loading=eager, unset loading} eagerly loads the
resource.

R=sclittle@chromium.org

Bug: 1098062
Change-Id: I782bd4b85a6ac098a49b16bfe203735bcc5b4d23
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2258639Reviewed-by: default avatarScott Little <sclittle@chromium.org>
Commit-Queue: Dominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781966}
parent 9b455dee
Hide whitespace changes
Inline Side-by-side
Showing with 114 additions and 0 deletions
third_party/blink/web_tests/TestExpectations
View file @ edd37595
...@@ -6840,6 +6840,10 @@ crbug.com/1098743 virtual/scalefactor200/css3/filters/backdrop-filter-edge-pixel ...@@ -6840,6 +6840,10 @@ crbug.com/1098743 virtual/scalefactor200/css3/filters/backdrop-filter-edge-pixel
# Sheriff 2020-06-16 # Sheriff 2020-06-16
crbug.com/1044825 http/tests/devtools/network/resource-priority.js [ Pass Timeout ] crbug.com/1044825 http/tests/devtools/network/resource-priority.js [ Pass Timeout ]
# Lazyload
crbug.com/1098062 external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-to-eager.html [ Timeout ]
crbug.com/1098062 external/wpt/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-to-eager.tentative.html [ Timeout ]
# Temporarily disable test to allow devtools-frontend changes # Temporarily disable test to allow devtools-frontend changes
crbug.com/1095733 http/tests/devtools/tabbed-pane-closeable-persistence.js [ Skip ] crbug.com/1095733 http/tests/devtools/tabbed-pane-closeable-persistence.js [ Skip ]
......
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-to-eager.tentative.html 0 → 100644
View file @ edd37595
<!DOCTYPE html>
<head>
<title>Below-viewport iframes with loading='lazy' load when set to
loading='eager' or the `loading` attribute is removed</title>
<link rel="author" title="Dom Farolino" href="mailto:domfarolino@gmail.com">
<link rel="help" href="https://github.com/whatwg/html/pull/5579">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<script>
const t = async_test("Below-viewport iframes with loading='lazy' load when " +
"set to loading='eager' or the `loading` attribute is " +
"removed");
const iframe_1_onload = t.unreached_func("#iframe_1 should not load before " +
"the window load event");
const iframe_2_onload = t.unreached_func("#iframe_2 should not load before " +
"the window load event");
window.addEventListener("load", t.step_func(() => {
const iframe_1 = document.querySelector('#iframe_1');
const iframe_2 = document.querySelector('#iframe_2');
const iframe_1_promise = new Promise((resolve, reject) => {
iframe_1.onerror = reject;
iframe_1.onload = resolve;
});
const iframe_2_promise = new Promise((resolve, reject) => {
iframe_2.onerror = reject;
iframe_2.onload = resolve;
});
Promise.all([iframe_1_promise, iframe_2_promise])
.then(t.step_func_done())
.catch(t.unreached_func("The iframes should load successfully"));
// Kick off the requests.
iframe_1.loading = 'eager';
iframe_2.removeAttribute('loading'); // unset the attribute, putting it in
// the default (eager) state.
}));
</script>
<body>
<div style="height:1000vh;"></div>
<iframe id="iframe_1"
src="resources/subframe.html?1"
loading="lazy" onload="iframe_1_onload();"></iframe>
<iframe id="iframe_2"
src="resources/subframe.html?2"
loading="lazy" onload="iframe_2_onload();"></iframe>
</body>
third_party/blink/web_tests/external/wpt/html/semantics/embedded-content/the-img-element/image-loading-lazy-to-eager.html 0 → 100644
View file @ edd37595
<!DOCTYPE html>
<head>
<title>Below-viewport images with loading='lazy' load when set to
loading='eager' or the `loading` attribute is removed</title>
<link rel="author" title="Dom Farolino" href="mailto:domfarolino@gmail.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<script>
const t = async_test("Below-viewport images with loading='lazy' load when " +
"set to loading='eager' or the `loading` attribute is " +
"removed");
const img_1_onload = t.unreached_func("#img_1 should not load before the " +
"window load event");
const img_2_onload = t.unreached_func("#img_2 should not load before the " +
"window load event");
window.addEventListener("load", t.step_func(() => {
const img_1 = document.querySelector('#img_1');
const img_2 = document.querySelector('#img_2');
const img_1_promise = new Promise((resolve, reject) => {
img_1.onerror = reject;
img_1.onload = resolve;
});
const img_2_promise = new Promise((resolve, reject) => {
img_2.onerror = reject;
img_2.onload = resolve;
});
Promise.all([img_1_promise, img_2_promise])
.then(t.step_func_done())
.catch(t.unreached_func("The images should load successfully"));
// Kick off the requests.
img_1.loading = 'eager';
img_2.removeAttribute('loading'); // unset the attribute, putting it in
// the default (eager) state.
}));
</script>
<body>
<div style="height:1000vh;"></div>
<img id="img_1"
src="resources/image.png?1"
loading="lazy" onload="img_1_onload();">
<img id="img_2"
src="resources/image.png?2"
loading="lazy" onload="img_2_onload();">
</body>
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