Skip to content

GitLab

T
tangled
Commit 13d672ea authored by Rob Buis's avatar Rob Buis Committed by Commit Bot
Browse files
Options

LazyLoad: add WPT test for invisible in-viewport lazy images 

Add WPT test for invisible in-viewport lazy images and clean up
invisible-image.tentative.html as well.

Bug: 956559
Change-Id: I26ba797fc8fcd3bd82f861c3b1578ab28fb93490
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1962261
Commit-Queue: Rob Buis <rbuis@igalia.com>
Reviewed-by: default avatarDominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/master@{#724821}
parent 8369c683
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 43 deletions
third_party/blink/web_tests/external/wpt/loading/lazyload/invisible-image.tentative.html
View file @ 13d672ea
...@@ -14,9 +14,9 @@ ...@@ -14,9 +14,9 @@
<img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?2'> <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?2'>
<img id="display_none" style="display:none;" src='resources/image.png?3'> <img id="display_none" style="display:none;" src='resources/image.png?3'>
<img id="attribute_hidden" hidden src='resources/image.png?4'> <img id="attribute_hidden" hidden src='resources/image.png?4'>
<img id="js_hidden" src='resources/image.png?5'>. <img id="js_display_none" src='resources/image.png?5'>.
<script> <script>
document.getElementById("js_hidden").style = 'display:none;'; document.getElementById("js_display_none").style = 'display:none;';
</script> </script>
</body> </body>
...@@ -29,7 +29,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed. ...@@ -29,7 +29,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
const visibility_hidden_element = document.getElementById("visibility_hidden"); const visibility_hidden_element = document.getElementById("visibility_hidden");
const display_none_element = document.getElementById("display_none"); const display_none_element = document.getElementById("display_none");
const attribute_hidden_element = document.getElementById("attribute_hidden"); const attribute_hidden_element = document.getElementById("attribute_hidden");
const js_hidden_element = document.getElementById("js_hidden"); const js_display_none_element = document.getElementById("js_display_none");
let has_window_loaded = false; let has_window_loaded = false;
...@@ -51,7 +51,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed. ...@@ -51,7 +51,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
Promise.all([image_fully_loaded_promise(visibility_hidden_element), Promise.all([image_fully_loaded_promise(visibility_hidden_element),
image_fully_loaded_promise(display_none_element), image_fully_loaded_promise(display_none_element),
image_fully_loaded_promise(attribute_hidden_element), image_fully_loaded_promise(attribute_hidden_element),
image_fully_loaded_promise(js_hidden_element)]).then(() => { image_fully_loaded_promise(js_display_none_element)]).then(() => {
t.done(); t.done();
}); });
}, "Test that below-viewport invisible images that are not marked " + }, "Test that below-viewport invisible images that are not marked " +
......
third_party/blink/web_tests/external/wpt/loading/lazyload/invisible-lazy-image.tentative.html
View file @ 13d672ea
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<title>Test that lazily loaded below the viewport invisible <title>Test behavior of in viewport invisible lazy images</title>
images are not loaded</title>
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> <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.js"></script>
</head> </head>
<body> <body>
<div style="height:10000px;"></div> <img id="expected" src='resources/image.png?1'>
<img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1' loading="lazy"> <img id="visibility_hidden" style="visibility:hidden;"
<img id="display_none" style="display:none;" src='resources/image.png?2' loading="lazy"> src='resources/image.png?2&pipe=trickle(d1)' loading='lazy'
<img id="attribute_hidden" hidden src='resources/image.png?3' loading="lazy"> onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
<img id="js_hidden" src='resources/image.png?4' loading="lazy"> <img id="display_none" style="display:none;" src='resources/image.png?3&pipe=trickle(d1)'
loading='lazy'
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
<img id="attribute_hidden" hidden src='resources/image.png?4&pipe=trickle(d1)' loading='lazy'
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
<img id="js_display_none" src='resources/image.png?5&pipe=trickle(d1)' loading='lazy'
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
<script> <script>
document.getElementById("js_hidden").style = 'display:none;'; document.getElementById("js_display_none").style = 'display:none;';
</script> </script>
</body> </body>
...@@ -23,41 +29,39 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed. ...@@ -23,41 +29,39 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
--> -->
<script> <script>
const visibility_hidden_element = document.getElementById("visibility_hidden"); const expected = document.getElementById("expected");
const display_none_element = document.getElementById("display_none"); const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
const attribute_hidden_element = document.getElementById("attribute_hidden"); const display_none_img = new ElementLoadPromise("display_none");
const js_hidden_element = document.getElementById("js_hidden"); const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
const js_display_none_img = new ElementLoadPromise("js_display_none");
let has_window_loaded = false;
async_test(function(t) { async_test(function(t) {
visibility_hidden_element.onload = e => {
t.step(function() {
t.unreached_func("Invisible image with loading=lazy should be loaded lazily.");
});
};
display_none_element.onload = e => {
t.step(function() {
t.unreached_func("Invisible image with loading=lazy should be loaded lazily.");
});
};
attribute_hidden_element.onload = e => {
t.step(function() {
t.unreached_func("Invisible image with loading=lazy should be loaded lazily.");
});
};
js_hidden_element.onload = e => {
t.step(function() {
t.unreached_func("Invisible image with loading=lazy should be loaded lazily.");
});
};
window.addEventListener("load", t.step_func(function() { window.addEventListener("load", t.step_func(function() {
visibility_hidden_element.scrollIntoView(); has_window_loaded = true;
display_none_element.scrollIntoView();
attribute_hidden_element.scrollIntoView();
js_hidden_element.scrollIntoView();
})); }));
t.step_timeout(function() { t.done(); }, 2000); display_none_img.promise.then(
}, "Test that lazily loaded below the viewport invisible images " + t.unreached_func("The lazy image with display:none should not load since it is hidden.")
"are not loaded"); ).catch(t.unreached_func("The error event should not fire for lazy images with display none."));
attribute_hidden_img.promise.then(
t.unreached_func("The lazy image with attribute hidden should not load since it is hidden.")
).catch(t.unreached_func("The error event should not fire for lazy image with attribute hidden."));
js_display_none_img.promise.then(
t.unreached_func("The lazy image with display:none set by JS should not load since it is hidden.")
).catch(t.unreached_func("The error event should not fire for lazy image with display none set by JS."));
visibility_hidden_img.promise.then(
t.step_func(function() {
assert_true(is_image_fully_loaded(visibility_hidden_img.element(),
expected));
assert_true(has_window_loaded);
t.step_timeout(function() { t.done(); }, 2000);
})
).catch(t.unreached_func("The error event should not fire for lazy image with visibility hidden."));
}, "Test behavior of in viewport invisible lazy images");
</script> </script>
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