mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision ac16628eb7eb601957382053011363d2bcf8ce44
This commit is contained in:
WPT Sync Bot
parent
ea7e753cea
commit
7e7c8873e4
4408 changed files with 664787 additions and 857286 deletions
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Below-viewport loading=lazy images do not block the window load event
|
||||
when scrolled into viewport</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- When this image loads, we will scroll the below-viewport loading=lazy
|
||||
images into the viewport. This happens before the window load event is
|
||||
fired -->
|
||||
<img id="scroll_trigger"
|
||||
src="resources/image.png?scroll-trigger&pipe=trickle(d1)"
|
||||
onload="scroll_trigger_img.resolve();" onerror="scroll_trigger_img.reject();">
|
||||
<!-- This image blocks the window load event for 2 seconds -->
|
||||
<img src="resources/image.png?window-load-blocking&pipe=trickle(d2)">
|
||||
|
||||
<div style="height:1000vh"></div>
|
||||
<!-- These images must load because they intersect the viewport, but they must
|
||||
not block the window load event, because they are loading=lazy -->
|
||||
<img id="visible"
|
||||
src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visible_img.resolve();" onerror="visible_img.reject();">
|
||||
<img id="visibility_hidden" style="visibility:hidden;"
|
||||
src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const scroll_trigger_img = new ElementLoadPromise("visible");
|
||||
const visible_img = new ElementLoadPromise("visible");
|
||||
const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
|
||||
|
||||
async_test(t => {
|
||||
let has_window_loaded = false;
|
||||
|
||||
scroll_trigger_img.promise
|
||||
.then(t.step_func(() => {
|
||||
assert_false(has_window_loaded,
|
||||
"The scroll_trigger image should load before the window " +
|
||||
"load event fires");
|
||||
visibility_hidden_img.element().scrollIntoView();
|
||||
}))
|
||||
.catch(t.unreached_func("The scroll_trigger image should load"));
|
||||
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
Promise.all([visible_img.promise, visibility_hidden_img.promise])
|
||||
.then(t.step_func_done(() => {
|
||||
assert_true(has_window_loaded,
|
||||
"The window load event should fire before the " +
|
||||
"below-viewport loading=lazy images load");
|
||||
assert_true(visible_img.element().complete,
|
||||
"The below-viewport loading=lazy visible image is complete");
|
||||
assert_true(visibility_hidden_img.element().complete,
|
||||
"The below-viewport loading=lazy visibility:hidden image is complete");
|
||||
}))
|
||||
.catch(t.unreached_func("The images should load successfully"));
|
||||
|
||||
}, "Below-viewport loading=lazy images do not block the window load event when " +
|
||||
"scrolled into viewport");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// Helper to access the element, its associated loading promise, and also to
|
||||
// resolve the promise.
|
||||
class ElementLoadPromise {
|
||||
constructor(element_id) {
|
||||
this.element_id = element_id;
|
||||
this.promise = new Promise((resolve, reject) => {
|
||||
this.resolve = resolve
|
||||
this.reject = reject
|
||||
});
|
||||
}
|
||||
element() {
|
||||
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;
|
||||
}
|
||||
|
|
@ -37,7 +37,7 @@ promise_test(function(t) {
|
|||
img.src = "/images/green.png";
|
||||
frame.parentNode.removeChild(frame);
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Decode from removed iframe fails (img not loaded)");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -47,7 +47,7 @@ promise_test(function(t) {
|
|||
// First request a promise, then remove the iframe.
|
||||
var promise = img.decode();
|
||||
frame.parentNode.removeChild(frame);
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Decode from iframe, later removed, fails (img not loaded)");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ promise_test(function(t) {
|
|||
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "/images/green.png");
|
||||
var promise = img.decode();
|
||||
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "/images/green.svg");
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " xlink:href changes fail decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -24,7 +24,7 @@ promise_test(function(t) {
|
|||
img.setAttribute('href', "/images/green.png");
|
||||
var promise = img.decode();
|
||||
img.setAttribute('href', "/images/green.svg");
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " href changes fail decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -35,7 +35,7 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
second_promise
|
||||
]);
|
||||
}, document.title + " xlink:href changes fail decode; following good decode succeeds.");
|
||||
|
|
@ -48,7 +48,7 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
second_promise
|
||||
]);
|
||||
}, document.title + " href changes fail decode; following good decode succeeds.");
|
||||
|
|
@ -61,8 +61,8 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects(t, "EncodingError", second_promise)
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", second_promise)
|
||||
]);
|
||||
}, document.title + " xlink:href changes fail decode; following bad decode fails.");
|
||||
|
||||
|
|
@ -74,8 +74,8 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects(t, "EncodingError", second_promise)
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", second_promise)
|
||||
]);
|
||||
}, document.title + " href changes fail decode; following bad decode fails.");
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ promise_test(function(t) {
|
|||
img.src = "/images/green.png";
|
||||
var promise = img.decode();
|
||||
img.src = "/images/green.svg";
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " src changes fail decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -28,7 +28,7 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
second_promise
|
||||
]);
|
||||
}, document.title + " src changes fail decode; following good png decode succeeds.");
|
||||
|
|
@ -41,7 +41,7 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
second_promise
|
||||
]);
|
||||
}, document.title + " src changes fail decode; following good svg decode succeeds.");
|
||||
|
|
@ -54,8 +54,8 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects(t, "EncodingError", second_promise)
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", second_promise)
|
||||
]);
|
||||
}, document.title + " src changes fail decode; following bad decode fails.");
|
||||
|
||||
|
|
@ -89,7 +89,7 @@ promise_test(function(t) {
|
|||
img.srcset = "/images/green.png 100w";
|
||||
var promise = img.decode();
|
||||
img.srcset = "/images/green.svg 100w";
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " srcset changes fail decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -100,7 +100,7 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
second_promise
|
||||
]);
|
||||
}, document.title + " srcset changes fail decode; following good decode succeeds.");
|
||||
|
|
@ -113,8 +113,8 @@ promise_test(function(t) {
|
|||
var second_promise = img.decode();
|
||||
assert_not_equals(first_promise, second_promise);
|
||||
return Promise.all([
|
||||
promise_rejects(t, "EncodingError", first_promise),
|
||||
promise_rejects(t, "EncodingError", second_promise)
|
||||
promise_rejects_dom(t, "EncodingError", first_promise),
|
||||
promise_rejects_dom(t, "EncodingError", second_promise)
|
||||
]);
|
||||
}, document.title + " srcset changes fail decode; following bad decode fails.");
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ promise_test(function(t) {
|
|||
source.srcset = "/non/existent/path.png";
|
||||
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Non-existent source fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -96,7 +96,7 @@ promise_test(function(t) {
|
|||
source.srcset = "data:image/png;base64,iVBO00PDR0BADBEEF00KGg";
|
||||
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Corrupt image in src fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -108,7 +108,7 @@ promise_test(function(t) {
|
|||
picture.appendChild(img);
|
||||
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Image without srcset fails decode.");
|
||||
|
||||
promise_test(function() {
|
||||
|
|
|
|||
|
|
@ -71,34 +71,34 @@ promise_test(function(t) {
|
|||
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
||||
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "/non/existent/path.png");
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Non-existent xlink:href fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
||||
img.setAttribute('href', "/non/existent/path.png");
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Non-existent href fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
||||
img.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "data:image/png;base64,iVBO00PDR0BADBEEF00KGg");
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Corrupt image in xlink:href fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
||||
img.setAttribute('href', "data:image/png;base64,iVBO00PDR0BADBEEF00KGg");
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Corrupt image in href fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Image without xlink:href or href fails decode.");
|
||||
|
||||
promise_test(function() {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ promise_test(function(t) {
|
|||
var img = new Image();
|
||||
img.src = "/non/existent/path.png";
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Non-existent src fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -51,7 +51,7 @@ promise_test(function(t) {
|
|||
var img = inactive_doc.createElement("img");
|
||||
img.src = "/images/green.png";
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Inactive document fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
|
|
@ -60,7 +60,7 @@ promise_test(function(t) {
|
|||
img.src = "/images/green.png";
|
||||
var promise = img.decode();
|
||||
inactive_doc.body.appendChild(img);
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Adopted active image into inactive document fails decode.");
|
||||
|
||||
promise_test(function() {
|
||||
|
|
@ -77,13 +77,13 @@ promise_test(function(t) {
|
|||
var img = new Image();
|
||||
img.src = "data:image/png;base64,iVBO00PDR0BADBEEF00KGg";
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Corrupt image in src fails decode.");
|
||||
|
||||
promise_test(function(t) {
|
||||
var img = new Image();
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Image without src/srcset fails decode.");
|
||||
|
||||
promise_test(function() {
|
||||
|
|
@ -120,7 +120,7 @@ promise_test(function(t) {
|
|||
var img = new Image();
|
||||
img.srcset = "/non/existent/path.png 100w";
|
||||
var promise = img.decode();
|
||||
return promise_rejects(t, "EncodingError", promise);
|
||||
return promise_rejects_dom(t, "EncodingError", promise);
|
||||
}, document.title + " Non-existent srcset fails decode.");
|
||||
|
||||
promise_test(function() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<body>
|
||||
<script>
|
||||
async_test(t => {
|
||||
x = new Image();
|
||||
x.loading = "auto";
|
||||
x.src = "resources/image.png?auto";
|
||||
x.onload = t.step_func_done();
|
||||
t.step_timeout(t.unreached_func("Disconnected loading=auto image loads " +
|
||||
"successfully, and doesn't timeout"), 2000);
|
||||
}, "loading=auto for disconnected image");
|
||||
|
||||
async_test(t => {
|
||||
x = new Image();
|
||||
x.loading = "eager";
|
||||
x.src = "resources/image.png?eager";
|
||||
x.onload = t.step_func_done();
|
||||
t.step_timeout(t.unreached_func("Disconnected loading=eager image loads " +
|
||||
"successfully, and doesn't timeout"), 2000);
|
||||
}, "loading=eager for disconnected image");
|
||||
|
||||
async_test(t => {
|
||||
x = new Image();
|
||||
x.loading = "lazy";
|
||||
x.src = "resources/image.png?lazy";
|
||||
x.onload = t.unreached_func("Disconnected loading=lazy image loads lazily.");
|
||||
t.step_timeout(t.step_func_done(), 2000);
|
||||
}, "loading=lazy for disconnected image");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Iframes with loading='eager' load immediately regardless of their position with respect to the viewport.</title>
|
||||
<link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that iframes with loading='eager' load immediately regardless of their position with respect to the viewport.");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
const in_viewport_iframe_onload = t.step_func(function() {
|
||||
assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
});
|
||||
|
||||
let has_below_viewport_loaded = false;
|
||||
const below_viewport_iframe_onload = t.step_func(function() {
|
||||
assert_false(has_below_viewport_loaded, "The below_viewport element should load only once.");
|
||||
has_below_viewport_loaded = true;
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func_done(function() {
|
||||
assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
|
||||
assert_true(has_below_viewport_loaded, "The below_viewport element should have loaded before window.load().");
|
||||
}));
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<iframe id="in_viewport" src="resources/subframe.html?first" loading="eager" width="200px" height="100px" onload="in_viewport_iframe_onload();">
|
||||
</iframe>
|
||||
<div style="height:10000px;"></div>
|
||||
|
||||
<!--
|
||||
The below_viewport element loads very slowly in order to ensure that the
|
||||
window load event is blocked on it.
|
||||
-->
|
||||
<iframe id="below_viewport" src="resources/subframe.html?pipe=trickle(d1)" loading="eager" width="200px" height="100px" onload="below_viewport_iframe_onload();">
|
||||
</iframe>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Iframes with loading='lazy' load when in the viewport</title>
|
||||
<link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that iframes with loading='lazy' load once they enter the viewport.");
|
||||
|
||||
let has_window_loaded = false;
|
||||
let has_in_viewport_loaded = false;
|
||||
|
||||
const in_viewport_iframe_onload = t.step_func(function() {
|
||||
assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
|
||||
assert_false(has_window_loaded, "The window.load() event should only fire once.");
|
||||
has_window_loaded = true;
|
||||
document.getElementById("below_viewport").scrollIntoView();
|
||||
}));
|
||||
|
||||
const below_viewport_iframe_onload = t.step_func_done(function() {
|
||||
assert_true(has_window_loaded, "The window.load() event should have fired before below_viewport loaded.");
|
||||
});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<iframe id="in_viewport" src="resources/subframe.html?first" loading="lazy" width="200px" height="100px" onload="in_viewport_iframe_onload();">
|
||||
</iframe>
|
||||
<div style="height:10000px;"></div>
|
||||
<iframe id="below_viewport" src="resources/subframe.html?second" loading="lazy" width="200px" height="100px" onload="below_viewport_iframe_onload();">
|
||||
</iframe>
|
||||
|
||||
<!--
|
||||
This async script loads very slowly in order to ensure that, if the
|
||||
below_viewport element has started loading, it has a chance to finish
|
||||
loading before window.load() happens, so that the test will dependably fail
|
||||
in that case instead of potentially passing depending on how long different
|
||||
resource fetches take.
|
||||
-->
|
||||
<script async src="/common/slow.py"></script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='eager' load immediately regardless of their position with respect to the viewport</title>
|
||||
<link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that images with loading='eager' load immediately regardless of their position with respect to the viewport.");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
const in_viewport_img_onload = t.step_func(function() {
|
||||
assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
});
|
||||
|
||||
let has_below_viewport_loaded = false;
|
||||
const below_viewport_img_onload = t.step_func(function() {
|
||||
assert_false(has_below_viewport_loaded, "The below_viewport element should load only once.");
|
||||
has_below_viewport_loaded = true;
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func_done(function() {
|
||||
assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
|
||||
assert_true(has_below_viewport_loaded, "The below_viewport element should have loaded before window.load().");
|
||||
}));
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<img id="in_viewport" src="resources/image.png?first" loading="eager" onload="in_viewport_img_onload();">
|
||||
<div style="height:10000px;"></div>
|
||||
<!--
|
||||
The below_viewport element loads very slowly in order to ensure that the
|
||||
window load event is blocked on it.
|
||||
-->
|
||||
<img id="below_viewport" src="resources/image.png?pipe=trickle(d2)" loading="eager" onload="below_viewport_img_onload();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Below viewport images with loading='lazy' and changed to
|
||||
loading='eager' load and do not block the window load event</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that below viewport images with loading='lazy' " +
|
||||
"and changed to loading='eager' load and do not block " +
|
||||
"the window load event.");
|
||||
|
||||
let has_below_viewport_loaded = false;
|
||||
let has_window_loaded = false;
|
||||
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
assert_false(has_window_loaded,
|
||||
"The window.load() event should only fire once.");
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
const below_viewport_img_onload = t.step_func_done(function() {
|
||||
assert_false(has_below_viewport_loaded,
|
||||
"The in_viewport element should load only once.");
|
||||
assert_true(has_window_loaded,
|
||||
"The window.load() event should have fired before " +
|
||||
"below_viewport loaded.");
|
||||
has_below_viewport_loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:10000px;"></div>
|
||||
<img id="below_viewport" src="resources/image.png?pipe=trickle(d2)"
|
||||
loading="lazy" onload="below_viewport_img_onload();">
|
||||
<script>
|
||||
assert_false(has_window_loaded,
|
||||
"The window.load() event should not fire before " +
|
||||
"changing below_viewport to loading='eager'.");
|
||||
document.getElementById("below_viewport").loading = 'eager';
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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">
|
||||
<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 => {
|
||||
iframe.src =
|
||||
get_host_info().HTTP_NOTSAMESITE_ORIGIN +
|
||||
"/loading/lazyload/resources/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 });
|
||||
});
|
||||
|
||||
assert_false(image_loaded,
|
||||
"lazy-load image shouldn't block window load event");
|
||||
|
||||
// Scroll to make the image element gets visible in 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();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!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">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/common/get-host-info.sub.js"></script>
|
||||
</head>
|
||||
|
||||
<div style="height:1000vh;"></div>
|
||||
<iframe id="iframe" width="500px" height="500px"></iframe>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
iframe.src =
|
||||
get_host_info().HTTP_NOTSAMESITE_ORIGIN +
|
||||
"/loading/lazyload/resources/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 });
|
||||
});
|
||||
|
||||
assert_false(image_loaded,
|
||||
"lazy-load image shouldn't block window load event");
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' in script disabled iframe are not handled
|
||||
as 'lazy'</title>
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<div style="height:1000vh;"></div>
|
||||
<iframe id="iframe" sandbox="allow-same-origin"
|
||||
src="resources/image-loading-lazy-in-viewport-iframe.html">
|
||||
</iframe>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
await new Promise(resolve => iframe.addEventListener("load", resolve));
|
||||
|
||||
const image = iframe.contentDocument.querySelector("img");
|
||||
|
||||
assert_true(image.complete,
|
||||
"lazy-load image shouldn't be honored in script disabled iframe");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>In viewport images with loading='lazy' and changed to loading='eager'
|
||||
do not block the window load event</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that in viewport images with loading='lazy' and " +
|
||||
"changed to loading='eager' do not block the window " +
|
||||
"load event.");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
let has_window_loaded = false;
|
||||
|
||||
const in_viewport_img_onload = t.step_func_done(function() {
|
||||
assert_false(has_in_viewport_loaded,
|
||||
"The in_viewport element should load only once.");
|
||||
assert_true(has_window_loaded,
|
||||
"The window.load() event should fire before in_viewport image loads.");
|
||||
has_in_viewport_loaded = true;
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
assert_false(has_window_loaded,
|
||||
"The window.load() event should only fire once.");
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<img id="in_viewport" src="resources/image.png?pipe=trickle(d2)"
|
||||
loading="lazy" onload="in_viewport_img_onload();">
|
||||
<script>
|
||||
document.getElementById("in_viewport").loading = 'eager';
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>In-viewport loading=lazy images do not block the window load event</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- This image blocks the window load event for 1 second -->
|
||||
<img src="resources/image.png?window-load-blocking&pipe=trickle(d1)">
|
||||
|
||||
<!-- These images must load because they intersect the viewport, but they must
|
||||
not block the window load event, because they are loading=lazy -->
|
||||
<img id="visible"
|
||||
src="resources/image.png?visible&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visible_img.resolve();" onerror="visible_img.reject();">
|
||||
<img id="visibility_hidden" style="visibility:hidden;"
|
||||
src="resources/image.png?visibility_hidden&pipe=trickle(d3)" loading="lazy"
|
||||
onload="visibility_hidden_img.resolve();" onerror="visibility_hidden_img.reject();">
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const visible_img = new ElementLoadPromise("visible");
|
||||
const visibility_hidden_img = new ElementLoadPromise("visibility_hidden");
|
||||
|
||||
async_test(t => {
|
||||
|
||||
let has_window_loaded = false;
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
Promise.all([visible_img.promise, visibility_hidden_img.promise])
|
||||
.then(t.step_func_done(() => {
|
||||
assert_true(has_window_loaded,
|
||||
"The window load event should fire before the " +
|
||||
"in-viewport loading=lazy images load");
|
||||
assert_true(visible_img.element().complete,
|
||||
"The in-viewport loading=lazy visible image is complete");
|
||||
assert_true(visibility_hidden_img.element().complete,
|
||||
"The in-viewport loading=lazy visibility:hidden image is " +
|
||||
"complete");
|
||||
}))
|
||||
.catch(t.unreached_func("The images should load successfully"));
|
||||
|
||||
}, "In-viewport loading=lazy images do not block the window load event");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Moving loading='lazy' image into another top level document</title>
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<div style="height:1000vh;"></div>
|
||||
<img loading="lazy"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC">
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
let image_loaded = false;
|
||||
const img = document.querySelector("img");
|
||||
img.addEventListener("load", () => { image_loaded = true; });
|
||||
|
||||
await new Promise(resolve => window.addEventListener("load", resolve));
|
||||
|
||||
assert_false(image_loaded,
|
||||
"lazy-load image shouldn't be loaded yet");
|
||||
|
||||
const anotherWin = window.open("resources/newwindow.html");
|
||||
|
||||
await new Promise(resolve => anotherWin.addEventListener("load", resolve));
|
||||
|
||||
anotherWin.document.body.appendChild(img);
|
||||
|
||||
assert_false(image_loaded,
|
||||
"lazy-load image shouldn't be loaded yet");
|
||||
|
||||
img.scrollIntoView();
|
||||
|
||||
await new Promise(resolve => img.addEventListener("load", resolve));
|
||||
assert_true(img.complete,
|
||||
"Now the lazy-load image should be loaded");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>A loading='lazy' image starts loading when the element is moved into
|
||||
an iframe where script is disabled</title>
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<div style="height:1000vh;"></div>
|
||||
<iframe id="iframe" src="resources/image-loading-lazy-in-viewport-iframe.html">
|
||||
</iframe>
|
||||
<iframe id="sandboxediframe" sandbox="allow-same-origin"
|
||||
src="resources/subframe.html">
|
||||
</iframe>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
const p1 = new Promise(resolve => iframe.addEventListener("load", resolve));
|
||||
const p2 = new Promise(resolve => sandboxediframe.addEventListener("load", resolve));
|
||||
|
||||
await Promise.all([p1, p2]);
|
||||
|
||||
const image = iframe.contentDocument.querySelector("img");
|
||||
|
||||
assert_false(image.complete, "lazy-load image shouldn't be loaded");
|
||||
|
||||
sandboxediframe.contentDocument.body.appendChild(image);
|
||||
await new Promise(resolve => image.addEventListener("load", resolve));
|
||||
|
||||
assert_true(image.complete,
|
||||
"lazy-load image shouldn't be honored in script disabled iframe");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' load when in the viewport</title>
|
||||
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Test that images with loading='lazy' under multicol load once they enter the viewport.");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
let has_window_loaded = false;
|
||||
|
||||
const in_viewport_img_onload = t.step_func(function() {
|
||||
assert_false(has_in_viewport_loaded, "The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func_done(function() {
|
||||
assert_true(has_in_viewport_loaded, "The in_viewport element should have loaded before window.load().");
|
||||
assert_false(has_window_loaded, "The window.load() event should only fire once.");
|
||||
has_window_loaded = true;
|
||||
}));
|
||||
|
||||
</script>
|
||||
|
||||
<div class=texty style="column-count: 2; height: 300px">
|
||||
<div style="border: 1px solid black">
|
||||
<h2 style="column-span: all"></h2>
|
||||
<img loading="lazy" src="resources/image.png?first" width="160" height="120"
|
||||
onload="in_viewport_img_onload()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
This async script loads very slowly in order to ensure that, if the
|
||||
below_viewport element has started loading, it has a chance to finish
|
||||
loading before window.load() happens, so that the test will dependably fail
|
||||
in that case instead of potentially passing depending on how long different
|
||||
resource fetches take.
|
||||
-->
|
||||
<script async src="/common/slow.py"></script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' load only when in the viewport</title>
|
||||
<link rel="author" title="Scott Little" href="mailto:sclittle@chromium.org">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const t = async_test("Images with loading='lazy' load only when in the viewport");
|
||||
|
||||
let has_in_viewport_loaded = false;
|
||||
let has_window_load_fired = false;
|
||||
|
||||
const in_viewport_img_onload = t.step_func(() => {
|
||||
assert_false(has_in_viewport_loaded,
|
||||
"The in_viewport element should load only once.");
|
||||
has_in_viewport_loaded = true;
|
||||
assert_true(document.getElementById("in_viewport").complete);
|
||||
document.getElementById("below_viewport").scrollIntoView();
|
||||
});
|
||||
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
has_window_load_fired = true;
|
||||
}));
|
||||
|
||||
const below_viewport_img_onload = t.step_func_done(() => {
|
||||
assert_true(has_in_viewport_loaded,
|
||||
"The below-viewport image should not load until it has been " +
|
||||
"scrolled into viewport, after the in-viewport image loads");
|
||||
assert_true(has_window_load_fired,
|
||||
"Below-viewport loading=lazy images should not block the " +
|
||||
"window load event from firing");
|
||||
});
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<!-- |in_viewport| takes 2 seconds to load, so that in browsers that don't
|
||||
support lazy loading, |below_viewport| finishes before |in_viewport|, and
|
||||
the test will dependably fail without relying on a timeout. -->
|
||||
<img id="in_viewport" loading="lazy" src="resources/image.png?first&pipe=trickle(d2)"
|
||||
onload="in_viewport_img_onload();">
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?second"
|
||||
onload="below_viewport_img_onload();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Test that below-viewport invisible images that are not marked
|
||||
loading=lazy still load, and block the window load event</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="visibility_hidden" style="visibility:hidden;" src='resources/image.png?1'>
|
||||
<img id="visibility_hidden_explicit_eager" style="visibility:hidden;" src='resources/image.png?2'
|
||||
loading="eager">
|
||||
|
||||
<img id="display_none" style="display:none;" src='resources/image.png?3'>
|
||||
<img id="display_none_explicit_eager" style="display:none;" src='resources/image.png?4'
|
||||
loading="eager">
|
||||
|
||||
<img id="attribute_hidden" hidden src='resources/image.png?5'>
|
||||
<img id="attribute_hidden_explicit_eager" hidden src='resources/image.png?6'
|
||||
loading="eager">
|
||||
|
||||
<img id="js_display_none" src='resources/image.png?7'>
|
||||
<img id="js_display_none_explicit_eager" src='resources/image.png?8'
|
||||
loading="eager">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const visibility_hidden_element = document.getElementById("visibility_hidden");
|
||||
const visibility_hidden_element_explicit_eager =
|
||||
document.getElementById("visibility_hidden_explicit_eager");
|
||||
|
||||
const display_none_element = document.getElementById("display_none");
|
||||
const display_none_element_explicit_eager =
|
||||
document.getElementById("display_none_explicit_eager");
|
||||
|
||||
const attribute_hidden_element = document.getElementById("attribute_hidden");
|
||||
const attribute_hidden_element_explicit_eager =
|
||||
document.getElementById("attribute_hidden_explicit_eager");
|
||||
|
||||
const js_display_none_element = document.getElementById("js_display_none");
|
||||
const js_display_none_element_explicit_eager =
|
||||
document.getElementById("js_display_none_explicit_eager");
|
||||
|
||||
let have_images_loaded = false;
|
||||
|
||||
async_test(t => {
|
||||
let image_fully_loaded_promise = (element) => {
|
||||
return new Promise(resolve => {
|
||||
element.addEventListener("load", t.step_func(resolve));
|
||||
});
|
||||
}
|
||||
|
||||
Promise.all([
|
||||
image_fully_loaded_promise(visibility_hidden_element),
|
||||
image_fully_loaded_promise(visibility_hidden_element_explicit_eager),
|
||||
image_fully_loaded_promise(display_none_element),
|
||||
image_fully_loaded_promise(display_none_element_explicit_eager),
|
||||
image_fully_loaded_promise(attribute_hidden_element),
|
||||
image_fully_loaded_promise(attribute_hidden_element_explicit_eager),
|
||||
image_fully_loaded_promise(js_display_none_element),
|
||||
image_fully_loaded_promise(js_display_none_element_explicit_eager)
|
||||
]).then(t.step_func(() => {
|
||||
have_images_loaded = true;
|
||||
})).catch(t.unreached_func("All images should load correctly"));
|
||||
|
||||
window.addEventListener("load", t.step_func_done(() => {
|
||||
assert_true(have_images_loaded,
|
||||
"The images should block the window load event.");
|
||||
}));
|
||||
|
||||
}, "Test that below-viewport invisible images that are not marked " +
|
||||
"loading=lazy still load, and block the window load event");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' load being moved to another document
|
||||
and then scrolled to</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="tall_div" style="height:1000vh"></div>
|
||||
<div id="below_viewport_div"></div>
|
||||
<img id="below_viewport" src='resources/image.png?below_viewport' loading="lazy">
|
||||
|
||||
<script>
|
||||
const tall_div = document.getElementById("tall_div");
|
||||
const below_viewport_element = document.getElementById("below_viewport");
|
||||
const below_viewport_div = document.getElementById("below_viewport_div");
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_element.onload =
|
||||
t.unreached_func("The below viewport image should not load");
|
||||
t.step_timeout(t.step_func_done(), 1000);
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.setAttribute("style", "display:none");
|
||||
iframe.srcdoc = "<body></body>";
|
||||
iframe.onload = () => {
|
||||
const adopted_img = iframe.contentDocument.adoptNode(below_viewport_element);
|
||||
iframe.contentDocument.body.appendChild(adopted_img);
|
||||
below_viewport_div.scrollIntoView();
|
||||
};
|
||||
document.body.insertBefore(iframe, tall_div);
|
||||
}, "Test that <img> below viewport is not loaded when moved to another " +
|
||||
"document and then scrolled to");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Below-viewport loading=lazy not-rendered images should never load,
|
||||
even when scrolled into view</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- These images must not attempt to load when scrolled into the
|
||||
viewport -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
|
||||
<!-- Later in the test we'll scroll to this div, instead of the above images,
|
||||
since due to them not being rendered, they cannot be scrolled to -->
|
||||
<div id="rendered_div"></div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const display_none_img = new ElementLoadPromise("display_none");
|
||||
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
|
||||
const js_display_none_img = new ElementLoadPromise("js_display_none");
|
||||
const rendered_div_element = document.querySelector('#rendered_div');
|
||||
|
||||
async_test(t => {
|
||||
window.addEventListener("load", t.step_func(() => {
|
||||
rendered_div.scrollIntoView();
|
||||
}));
|
||||
|
||||
const unreached_not_rendered_img_func =
|
||||
t.unreached_func("The not-rendered below-viewport loading=lazy images " +
|
||||
"should not attempt to load.");
|
||||
|
||||
display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
attribute_hidden_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
js_display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
// If none of the above images load after being scrolled to within the below
|
||||
// timeout, the test passes.
|
||||
t.step_timeout(t.done, 2000);
|
||||
}, "Below-viewport loading=lazy not-rendered images should never load, " +
|
||||
"even when scrolled into view");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>In-viewport loading=lazy not-rendered images should never load</title>
|
||||
<link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com">
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- These images must not attempt to load -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const display_none_img = new ElementLoadPromise("display_none");
|
||||
const attribute_hidden_img = new ElementLoadPromise("attribute_hidden");
|
||||
const js_display_none_img = new ElementLoadPromise("js_display_none");
|
||||
|
||||
async_test(t => {
|
||||
const unreached_not_rendered_img_func =
|
||||
t.unreached_func("The not-rendered in-viewport loading=lazy images " +
|
||||
"should not attempt to load.");
|
||||
|
||||
display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
attribute_hidden_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
js_display_none_img.promise
|
||||
.then(unreached_not_rendered_img_func)
|
||||
.catch(unreached_not_rendered_img_func);
|
||||
|
||||
t.step_timeout(t.done, 2000);
|
||||
}, "In-viewport loading=lazy not-rendered images should never load");
|
||||
</script>
|
||||
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred images with loading='lazy' use the original
|
||||
base URL specified at the parse time</title>
|
||||
<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>
|
||||
<base href='/loading/lazyload/resources/'>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const below_viewport_img_promise = new ElementLoadPromise("below_viewport_img");
|
||||
|
||||
let has_window_loaded = false;
|
||||
|
||||
async_test(function(t) {
|
||||
|
||||
// Change the base URL and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
const base = document.getElementsByTagName('base')[0];
|
||||
base.href = '/invalid-url-where-no-subresources-exist/';
|
||||
has_window_loaded = true;
|
||||
below_viewport_img_promise.element().scrollIntoView();
|
||||
}));
|
||||
|
||||
below_viewport_img_promise.promise.then(
|
||||
t.step_func_done(function() {
|
||||
assert_true(has_window_loaded,
|
||||
"Below-viewport loading=lazy images do not block the " +
|
||||
"window load event");
|
||||
assert_true(below_viewport_img_promise.element().complete,
|
||||
"The loading=lazy image should be considered complete " +
|
||||
"upon load.");
|
||||
assert_greater_than(below_viewport_img_promise.element().naturalWidth,
|
||||
0,
|
||||
"The loading=lazy should have non-zero width " +
|
||||
"upon loading");
|
||||
})
|
||||
).catch(t.unreached_func("The image request should not load relative to " +
|
||||
"the current (incorrect) base URL."));
|
||||
}, "Deferred images with loading='lazy' use the original base URL " +
|
||||
"specified at the parse time");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:1000vh"></div>
|
||||
<img id="below_viewport_img" src="image.png" loading="lazy"
|
||||
onload="below_viewport_img_promise.resolve();"
|
||||
onerror="below_viewport_img_promise.reject();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred iframes with loading='lazy' use the original
|
||||
base URL specified at the parse time</title>
|
||||
<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>
|
||||
<base href='/loading/lazyload/resources/'>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const below_viewport_iframe_promise = new ElementLoadPromise("below_viewport_iframe");
|
||||
|
||||
let has_window_loaded = false;
|
||||
|
||||
async_test(function(t) {
|
||||
|
||||
// Change the base URL and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", t.step_func(function() {
|
||||
const base = document.getElementsByTagName('base')[0];
|
||||
base.href = '/invalid-url-where-no-subresources-exist/';
|
||||
has_window_loaded = true;
|
||||
below_viewport_iframe_promise.element().scrollIntoView();
|
||||
}));
|
||||
|
||||
below_viewport_iframe_promise.promise.then(
|
||||
t.step_func_done(function() {
|
||||
assert_true(has_window_loaded,
|
||||
"Below-viewport loading=lazy iframes do not block the " +
|
||||
"window load event");
|
||||
assert_true(below_viewport_iframe_promise.element().contentDocument.body.
|
||||
innerHTML.includes("<p>Subframe</p>"),
|
||||
"The loading=lazy iframe's content is accessible upon loading");
|
||||
})
|
||||
).catch(t.unreached_func("The iframe request should not load relative to " +
|
||||
"the current (incorrect) base URL."));
|
||||
}, "Deferred iframes with loading='lazy' use the original base URL " +
|
||||
"specified at the parse time");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:1000vh"></div>
|
||||
<iframe id="below_viewport_iframe" src="subframe.html" loading="lazy"
|
||||
width="200px" height="100px" onload="below_viewport_iframe_promise.resolve();"
|
||||
onerror="below_viewport_iframe_promise.reject();">
|
||||
</iframe>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred iframes and images with loading='lazy' use the original base URL specified at the parse time</title>
|
||||
<link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const below_viewport_iframe = new ElementLoadPromise("below_viewport_iframe");
|
||||
const below_viewport_img = new ElementLoadPromise("below_viewport_img");
|
||||
|
||||
// Change the base URL and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", () => {
|
||||
window.history.pushState(1, document.title, '/invalid-url-where-no-subresources-exist/')
|
||||
below_viewport_iframe.element().scrollIntoView();
|
||||
});
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_iframe.promise.then(
|
||||
t.step_func_done(function() {
|
||||
assert_true(below_viewport_iframe.element().contentDocument.body.innerHTML.includes("<p>Subframe</p>"));
|
||||
}));
|
||||
}, "Test that when deferred iframe is loaded, it uses the base URL computed at parse time.");
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_img.promise.then(
|
||||
t.step_func_done(function() {
|
||||
assert_true(below_viewport_img.element().complete);
|
||||
assert_greater_than(below_viewport_img.element().naturalWidth, 0);
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, trying to load with invalid base URL."));
|
||||
}, "Test that when deferred img is loaded, it uses the base URL computed at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:10000px;"></div>
|
||||
<script>
|
||||
// Change the base URL so that the iframe makes use of that in its relative
|
||||
// URL to absolute URL computation at parse time.
|
||||
window.history.pushState(1, document.title, 'resources/')
|
||||
</script>
|
||||
<iframe id="below_viewport_iframe" src="subframe.html" loading="lazy" width="200px" height="100px" onload="below_viewport_iframe.resolve();">
|
||||
</iframe>
|
||||
<img id="below_viewport_img" src="image.png" loading="lazy" onload="below_viewport_img.resolve();"
|
||||
onerror="below_viewport_img.reject();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred images with loading='lazy' use the original crossorigin attribute specified at the parse time</title>
|
||||
<link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const crossorigin_img = new ElementLoadPromise("crossorigin_img");
|
||||
|
||||
// Set the crossorigin and scroll down to load the deferred image.
|
||||
window.addEventListener("load", () => {
|
||||
crossorigin_img.element().crossOrigin = 'anonymous';
|
||||
crossorigin_img.element().scrollIntoView();
|
||||
});
|
||||
|
||||
async_test(function(t) {
|
||||
crossorigin_img.promise.then(t.step_func_done(() => {
|
||||
// The image originally did not had crossOrigin property set, so CORS will
|
||||
// not be involved in fetching that. So drawing the image in a canvas will
|
||||
// make it tainted. Verify that the image did not load with CORS headers
|
||||
// due to the updated crossOrigin property.
|
||||
const img_element = crossorigin_img.element();
|
||||
const canvas = document.createElement('canvas');
|
||||
const context = canvas.getContext('2d');
|
||||
canvas.width = img_element.width;
|
||||
canvas.height = img_element.height;
|
||||
context.drawImage(img_element, 0, 0);
|
||||
assert_throws_dom('SecurityError', () => canvas.toDataURL());
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, trying to load with CORS headers set."));
|
||||
}, "Test that when deferred image is loaded, it uses the crossorigin attribute specified at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<div style="height:10000px;"></div>
|
||||
<img id="crossorigin_img" loading="lazy"
|
||||
src='http://{{hosts[alt][www]}}:{{ports[http][0]}}/loading/lazyload/resources/image.png'
|
||||
onload="crossorigin_img.resolve();" onerror="crossorigin_img.reject();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Deferred iframes and images with loading='lazy' use the original referrer-policy specified at the parse time</title>
|
||||
<link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const below_viewport_iframe = new ElementLoadPromise("below_viewport_iframe");
|
||||
const below_viewport_img = new ElementLoadPromise("below_viewport_img");
|
||||
|
||||
// Change the referrer-policy and scroll down to load the deferred elements.
|
||||
window.addEventListener("load", () => {
|
||||
below_viewport_iframe.element().referrerPolicy = "no-referrer";
|
||||
below_viewport_img.element().referrerPolicy = "no-referrer";
|
||||
document.getElementById("below_viewport_iframe").scrollIntoView();
|
||||
});
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_iframe.promise.then(
|
||||
t.step_func_done(function() {
|
||||
// The referer header should be the full URL (as specified in the iframe
|
||||
// at parse time), and not the origin (as specified in meta referrer
|
||||
// tag) or null (as overridden by iframe referrerpolicy=no-referrer).
|
||||
assert_true(below_viewport_iframe.element().contentDocument.body.innerHTML
|
||||
.includes("Referer: http://{{location[host]}}{{location[path]}}"));
|
||||
}));
|
||||
}, "Test that when deferred iframe is loaded, it uses the referrer-policy specified at parse time.");
|
||||
|
||||
async_test(function(t) {
|
||||
below_viewport_img.promise.then(
|
||||
t.step_func_done(function() {
|
||||
// The image will load successfully if the full URL is sent as referrer.
|
||||
assert_true(below_viewport_img.element().complete);
|
||||
assert_greater_than(below_viewport_img.element().naturalWidth, 0);
|
||||
})
|
||||
).catch(t.unreached_func("The image load should not fail, by sending the wrong referer header."));
|
||||
}, "Test that when deferred img is loaded, it uses the referrer-policy specified at parse time.");
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<meta name="referrer" content="origin">
|
||||
<div style="height:10000px;"></div>
|
||||
<iframe id="below_viewport_iframe" src="/xhr/resources/echo-headers.py" loading="lazy" width="200px" height="100px" referrerpolicy="unsafe-url" onload="below_viewport_iframe.resolve();">
|
||||
</iframe>
|
||||
<img id="below_viewport_img" src="resources/referrer-checker-img.py?expected_referrer=http://{{location[host]}}{{location[path]}}"
|
||||
loading="lazy" referrerpolicy="unsafe-url" onload="below_viewport_img.resolve();" onerror="below_viewport_img.reject();">
|
||||
</body>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' in picture elements load when near the viewport</title>
|
||||
<link rel="author" title="Raj T" href="mailto:rajendrant@chromium.org">
|
||||
<link rel="help" href="https://github.com/scott-little/lazyload">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<script>
|
||||
const in_viewport_img = new ElementLoadPromise("in_viewport_img");
|
||||
const lazy_attribute_img = new ElementLoadPromise("lazy_attribute_img");
|
||||
const eager_attribute_img = new ElementLoadPromise("eager_attribute_img");
|
||||
|
||||
const document_load_promise = new Promise(resolve => {
|
||||
window.addEventListener("load", resolve);
|
||||
});
|
||||
|
||||
async_test(function(t) {
|
||||
document_load_promise.then(t.step_func_done(function() {
|
||||
assert_false(lazy_attribute_img.element().complete);
|
||||
lazy_attribute_img.element().scrollIntoView();
|
||||
}));
|
||||
}, "Test that the loading=lazy <picture> element below viewport was deferred, on document load.");
|
||||
|
||||
async_test(function(t) {
|
||||
in_viewport_img.promise.then(t.step_func_done());
|
||||
}, "Test that in viewport <picture> element was loaded");
|
||||
|
||||
async_test(function(t) {
|
||||
eager_attribute_img.promise.then(t.step_func_done());
|
||||
}, "Test that eager <picture> element was loaded");
|
||||
|
||||
async_test(function(t) {
|
||||
lazy_attribute_img.promise.then(t.step_func_done());
|
||||
}, "Test that deferred <picture> element was loaded-in as well, after scrolled down");
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<picture>
|
||||
<source sizes='50vw' srcset='resources/image.png?in_viewport_img'>
|
||||
<img id='in_viewport_img' src='img-not-loaded.png' loading="lazy" onload="in_viewport_img.resolve();">
|
||||
</picture>
|
||||
<div style="height:10000px;"></div>
|
||||
<picture>
|
||||
<source sizes='50vw' srcset='resources/image.png?lazy_attribute_img'>
|
||||
<img id='lazy_attribute_img' src='img-not-loaded.png' loading="lazy" onload="lazy_attribute_img.resolve();">
|
||||
</picture>
|
||||
<picture>
|
||||
<source sizes='50vw' srcset='resources/image.png?eager_attribute_img'>
|
||||
<img id='eager_attribute_img' src='img-not-loaded.png' loading="eager" onload="eager_attribute_img.resolve();">
|
||||
</picture>
|
||||
|
||||
<!--
|
||||
This async script loads very slowly in order to ensure that, if the
|
||||
below_viewport image has started loading, it has a chance to finish
|
||||
loading before window.load() happens, so that the test will dependably fail
|
||||
in that case instead of potentially passing depending on how long different
|
||||
resource fetches take.
|
||||
-->
|
||||
<script async src="/common/slow.py"></script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' load being removed and then scrolled to</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="common.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="in_viewport" src='resources/image.png?in_viewport&pipe=trickle(d1)'>
|
||||
<div style="height:1000vh"></div>
|
||||
<div id="below_viewport_div"></div>
|
||||
<img id="below_viewport" src='resources/image.png?below_viewport' loading="lazy">
|
||||
|
||||
<script>
|
||||
const in_viewport_element = document.getElementById("in_viewport");
|
||||
const below_viewport_element = document.getElementById("below_viewport");
|
||||
const below_viewport_div = document.getElementById("below_viewport_div");
|
||||
|
||||
async_test(t => {
|
||||
below_viewport_element.onload = t.unreached_func("Removed loading=lazy image " +
|
||||
"should not load when its old position is scrolled to.");
|
||||
below_viewport_element.remove();
|
||||
|
||||
in_viewport_element.onload = () => {
|
||||
below_viewport_div.scrollIntoView();
|
||||
t.step_timeout(t.step_func_done(), 2000);
|
||||
};
|
||||
}, "Test that <img> below viewport is not loaded when removed from the " +
|
||||
"document and then scrolled to");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="img" loading="lazy" src="image.png">
|
||||
<script>
|
||||
img.addEventListener("load", () => {
|
||||
parent.postMessage("image_loaded", "*");
|
||||
});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
parent.postMessage("window_loaded", "*");
|
||||
});
|
||||
|
||||
window.addEventListener("message", event => {
|
||||
if (event.data == "scroll") {
|
||||
img.scrollIntoView();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<img id="img" loading="lazy" src="image.png">
|
||||
<script>
|
||||
img.addEventListener("load", () => {
|
||||
parent.postMessage("image_loaded", "*");
|
||||
});
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
parent.postMessage("window_loaded", "*");
|
||||
});
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<div style="height:1000vh;"></div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import os
|
||||
|
||||
# Returns a valid image response when request's |referrer| matches
|
||||
# |expected_referrer|.
|
||||
def main(request, response):
|
||||
referrer = request.headers.get("referer", "")
|
||||
expected_referrer = request.GET.first("expected_referrer", "")
|
||||
response_headers = [("Content-Type", "image/png")]
|
||||
if referrer == expected_referrer:
|
||||
image_path = os.path.join(os.path.dirname(__file__), "image.png")
|
||||
return (200, response_headers, open(image_path, mode='rb').read())
|
||||
return (404, response_headers, "Not found")
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<body>
|
||||
<p>Subframe</p>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
|
||||
<style xmlns="http://www.w3.org/1999/xhtml">:root { background-color: green }</style>
|
||||
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="red-bg.css" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 260 B |
|
|
@ -0,0 +1,2 @@
|
|||
:root { background: red }
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!doctype html>
|
||||
<title>Test reference</title>
|
||||
<p>You should see a green square below.</p>
|
||||
<div style="background:green;width:100px;height:100px"></div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!doctype html>
|
||||
<title>An img element with an svg src should not load external resources from the svg file.</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">
|
||||
<link rel="match" href="svg-img-with-external-stylesheet-ref.html">
|
||||
<p>You should see a green square below.</p>
|
||||
<img width="100" height="100" src="support/external-sheet.svg">
|
||||
Loading…
Add table
Add a link
Reference in a new issue