Commit ddef9df4 authored by rajendrant's avatar rajendrant Committed by Commit Bot

LazyLoad: Add test for deferred images using attributes at parse time

This CL adds tests for base URL, referrer-policy and crossorigin state
at parse time are retained when the deferred frame is loaded-in.

Bug: 984983
Change-Id: Ifab76a15a4addf750251cbfd0e6849c535b95531
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1719445
Commit-Queue: rajendrant <rajendrant@chromium.org>
Reviewed-by: default avatarTarun Bansal <tbansal@chromium.org>
Reviewed-by: default avatarDominic Farolino <dom@chromium.org>
Cr-Commit-Position: refs/heads/master@{#682123}
parent 8285e1ec
......@@ -3,8 +3,9 @@
class ElementLoadPromise {
constructor(element_id) {
this.element_id = element_id;
this.promise = new Promise(resolve => {
this.promise = new Promise((resolve, reject) => {
this.resolve = resolve
this.reject = reject
});
}
element() {
......
main frame - DidStartNavigation
main frame - ReadyToCommitNavigation
main frame - didCommitLoadForFrame
main frame - didReceiveTitle: Deferred iframes and images with loading='lazy' use the original base URL specified at the parse time
main frame - didCommitLoadForFrame
frame "<!--framePath //<!--frame0-->-->" - didReceiveTitle:
main frame - didFinishDocumentLoadForFrame
main frame - didCommitLoadForFrame
main frame - didHandleOnloadEventsForFrame
main frame - didFinishLoadForFrame
frame "<!--framePath //<!--frame0-->-->" - BeginNavigation request to 'http://web-platform.test:8001/loading/lazyload/resources/subframe.html', http method GET
frame "<!--framePath //<!--frame0-->-->" - DidStartNavigation
frame "<!--framePath //<!--frame0-->-->" - ReadyToCommitNavigation
frame "<!--framePath //<!--frame0-->-->" - didCommitLoadForFrame
frame "<!--framePath //<!--frame0-->-->" - didReceiveTitle:
frame "<!--framePath //<!--frame0-->-->" - didFinishDocumentLoadForFrame
frame "<!--framePath //<!--frame0-->-->" - didHandleOnloadEventsForFrame
frame "<!--framePath //<!--frame0-->-->" - didFinishLoadForFrame
This is a testharness.js-based test.
PASS Test that when deferred iframe is loaded, it uses the base URL computed at parse time.
FAIL Test that when deferred img is loaded, it uses the base URL computed at parse time. assert_unreached: The image load should not fail, trying to load with invalid base URL. Reached unreachable code
Harness: the test ran to completion.
......@@ -13,6 +13,7 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
<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", () => {
......@@ -26,6 +27,15 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
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>
......@@ -37,4 +47,6 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
</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>
main frame - DidStartNavigation
main frame - ReadyToCommitNavigation
main frame - didCommitLoadForFrame
main frame - didReceiveTitle: Deferred images with loading='lazy' use the original crossorigin attribute specified at the parse time
main frame - didFinishDocumentLoadForFrame
main frame - didHandleOnloadEventsForFrame
main frame - didFinishLoadForFrame
This is a testharness.js-based test.
FAIL Test that when deferred image is loaded, it uses the crossorigin attribute specified at parse time. assert_unreached: The image load should not fail, trying to load with CORS headers set. Reached unreachable code
Harness: the test ran to completion.
<!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>
<!--
Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
-->
<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('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>
......@@ -14,10 +14,12 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
<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();
});
......@@ -28,9 +30,19 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
// 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://{{host}}:{{ports[http][0]}}/loading/lazyload/"));
.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>
......@@ -38,4 +50,6 @@ Marked as tentative until https://github.com/whatwg/html/pull/3752 is landed.
<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>
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")
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