Skip to content

GitLab

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

LazyLoad: move invisible-image.html test to WPT 

In addition to the tested loading=auto case also add a separate test
for invisible images with loading=lazy.

Bug: 956559
Change-Id: I04711529dffb8f3610b9d383b5b76e526100df13
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1951114Reviewed-by: default avatarScott Little <sclittle@chromium.org>
Commit-Queue: Rob Buis <rbuis@igalia.com>
Cr-Commit-Position: refs/heads/master@{#722751}
parent 5eb683cf
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 8 deletions
third_party/blink/web_tests/external/wpt/loading/lazyload/common.js
View file @ eb00b4d6
...@@ -12,3 +12,34 @@ class ElementLoadPromise { ...@@ -12,3 +12,34 @@ class ElementLoadPromise {
return document.getElementById(this.element_id); return document.getElementById(this.element_id);
} }
} }
// Returns if the image is complete and the lazily loaded image matches the expected image.
function is_image_fully_loaded(image, expected_image) {
if (!image.complete || !expected_image.complete) {
return false;
}
if (image.width != expected_image.width ||
image.height != expected_image.height) {
return false;
}
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let canvasContext = canvas.getContext("2d");
canvasContext.save();
canvasContext.drawImage(image, 0, 0);
let data = canvasContext.getImageData(0, 0, canvas.width, canvas.height).data;
canvasContext.restore();
canvasContext.drawImage(expected_image, 0, 0);
let expected_data = canvasContext.getImageData(0, 0, canvas.width, canvas.height).data;
for (var i = 0; i < data.length; i++) {
if (data[i] != expected_data[i]) {
return false;
}
}
return true;
}
third_party/blink/web_tests/http/tests/lazyload/invisible-image.html → third_party/blink/web_tests/external/wpt/loading/lazyload/invisible-image.tentative.html
View file @ eb00b4d6
<!DOCTYPE html> <!DOCTYPE html>
<script src="/resources/testharness.js"></script> <head>
<script src="/resources/testharnessreport.js"></script> <title>Test that invisible images are loaded</title>
<script src="placeholder.js"></script> <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.js"></script>
</head>
<body> <body>
<img id="expected" src='resources/image.png?1'>
<div style="height:10000px;"></div> <div style="height:10000px;"></div>
<img id="visibility_hidden" style="visibility:hidden;" src='../loading/resources/base-image1.png'> <img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?2'>
<img id="display_none" style="display:none;" src='../loading/resources/base-image2.png'> <img id="display_none" style="display:none;" src='resources/image.png?3'>
<img id="attribute_hidden" hidden src='../loading/resources/base-image3.png'> <img id="attribute_hidden" hidden src='resources/image.png?4'>
<img id="js_hidden" src='../loading/resources/dup-image1.png'> <img id="js_hidden" src='resources/image.png?5'>.
<script> <script>
document.getElementById("js_hidden").style = 'display:none;'; document.getElementById("js_hidden").style = 'display:none;';
</script> </script>
</body> </body>
<!--
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
-->
<script> <script>
var expected = document.getElementById("expected");
var visibility_hidden_element = document.getElementById("visibility_hidden"); var visibility_hidden_element = document.getElementById("visibility_hidden");
var display_none_element = document.getElementById("display_none"); var display_none_element = document.getElementById("display_none");
var attribute_hidden_element = document.getElementById("attribute_hidden"); var attribute_hidden_element = document.getElementById("attribute_hidden");
var js_hidden_element = document.getElementById("js_hidden"); var js_hidden_element = document.getElementById("js_hidden");
async_test(function(t) { async_test(function(t) {
window.addEventListener("load", t.step_func_done()); window.addEventListener("load", t.step_func_done());
}, "Test that document load event is fired"); }, "Test that document load event is fired");
async_test(function(t) { async_test(function(t) {
let image_fully_loaded_promise = (element) => { let image_fully_loaded_promise = (element) => {
return new Promise(resolve => { return new Promise(resolve => {
element.addEventListener("load", element.addEventListener("load",
t.step_func(() => { t.step_func(() => {
assert_true(is_image_fully_loaded(element)); assert_true(is_image_fully_loaded(element, expected));
resolve(); resolve();
})); }));
}); });
......
third_party/blink/web_tests/external/wpt/loading/lazyload/invisible-lazy-image.tentative.html 0 → 100644
View file @ eb00b4d6
<!DOCTYPE html>
<head>
<title>Test that lazily loaded invisible images are not loaded</title>
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div style="height:10000px;"></div>
<img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1' loading="lazy">
<img id="display_none" style="display:none;" src='resources/image.png?2' loading="lazy">
<img id="attribute_hidden" hidden src='resources/image.png?3' loading="lazy">
<img id="js_hidden" src='resources/image.png?4' loading="lazy">
<script>
document.getElementById("js_hidden").style = 'display:none;';
</script>
</body>
<!--
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
-->
<script>
var visibility_hidden_element = document.getElementById("visibility_hidden");
var display_none_element = document.getElementById("display_none");
var attribute_hidden_element = document.getElementById("attribute_hidden");
var js_hidden_element = document.getElementById("js_hidden");
async_test(function(t) {
window.addEventListener("load", t.step_func_done());
}, "Test that document load event is fired");
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() {
visibility_hidden_element.scrollIntoView();
display_none_element.scrollIntoView();
attribute_hidden_element.scrollIntoView();
js_hidden_element.scrollIntoView();
}));
t.step_timeout(function() { t.done(); }, 2000);
}, "Test that lazy invisible images are not loaded");
</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