Add iframe loading=lazy data: and Blob URL WPTs
R=sclittle@chromium.org
Bug: 1047909
Change-Id: Ic5e1ef207e8483ae1a56a4ee090d7ad6317a3a3f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2303859
Commit-Queue: Dominic Farolino <dom@chromium.org>
Reviewed-by: Scott Little <sclittle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789314}
diff --git a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html
index 51b4426..336703e 100644
--- a/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html
+++ b/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html
@@ -11,12 +11,22 @@
<script>
const t_in_viewport =
async_test('In-viewport iframes load eagerly');
- const t_in_viewport_srcdoc=
- async_test('In-viewport srcdoc iframes load eagerly');
const t_below_viewport =
async_test('Below-viewport iframes load lazily');
const t_below_viewport_srcdoc =
async_test('Below-viewport srcdoc iframes load lazily');
+ const t_below_viewport_data_url =
+ async_test('Below-viewport data: url iframes load lazily');
+ const t_below_viewport_blob_url =
+ async_test('Below-viewport blob url iframes load lazily');
+
+
+ document.addEventListener('DOMContentLoaded', e => {
+ const blob_url_iframe = document.querySelector('#below_viewport_blob_url');
+ const blob = new Blob(['<p>Blob subframe</p>'], {type: 'text/html'});
+ const url = URL.createObjectURL(blob);
+ blob_url_iframe.src = url;
+ });
let has_window_loaded = false;
@@ -25,11 +35,6 @@
"The in_viewport iframe should not block the load event");
});
- const in_viewport_srcdoc_iframe_onload = t_in_viewport_srcdoc.step_func_done(() => {
- assert_false(has_window_loaded,
- "The in_viewport srcdoc iframe should not block the load event");
- });
-
window.addEventListener("load", () => {
has_window_loaded = true;
document.getElementById("below_viewport_srcdoc").scrollIntoView();
@@ -41,6 +46,7 @@
"the below-viewport iframe loads");
});
+ // Onload handlers for below-viewport srcdoc iframe.
// Must make this accessible to the srcdoc iframe's body.
window.below_viewport_srcdoc_iframe_subresource_onload = t_below_viewport_srcdoc.step_func(() => {
assert_true(has_window_loaded,
@@ -53,16 +59,27 @@
"The window load event should have fired before " +
"the below-viewport srcdoc iframe loads");
});
+
+ // Onload handler for below-viewport data url iframe.
+ const below_viewport_data_url_iframe_onload = t_below_viewport_data_url.step_func_done(() => {
+ assert_true(has_window_loaded,
+ "The window load event should have fired before " +
+ "the below-viewport data url iframe loads");
+ });
+
+ // Onload handler for below-viewport blob url iframe.
+ const below_viewport_blob_url_iframe_onload = t_below_viewport_blob_url.step_func_done(() => {
+ assert_true(has_window_loaded,
+ "The window load event should have fired before " +
+ "the below-viewport blob url iframe loads");
+ });
+
</script>
<body>
<iframe id="in_viewport" src="resources/subframe.html?in-viewport"
loading="lazy" width="200px" height="100px"
onload="in_viewport_iframe_onload();"></iframe>
- <iframe id="in_viewport_srcdoc"
- srcdoc="<body><img src='/common/square.png?in-viewport'></body>"
- loading="lazy" width="200px" height="100px"
- onload="in_viewport_srcdoc_iframe_onload();"></iframe>
<div style="height:2000vh;"></div>
<iframe id="below_viewport" src="resources/subframe.html?below-viewport"
@@ -73,6 +90,15 @@
onload='parent.below_viewport_srcdoc_iframe_subresource_onload();'></body>"
loading="lazy" width="200px" height="100px"
onload="below_viewport_srcdoc_iframe_onload();"></iframe>
+ <iframe id="below_viewport_data_url"
+ src="data:text/html,<p>Subframe</p>"
+ loading="lazy" width="200px" height="100px"
+ onload="below_viewport_data_url_iframe_onload();"></iframe>
+ <!-- This iframe has its `src` set to a blob URL dynamically above -->
+ <iframe id="below_viewport_blob_url"
+ loading="lazy" width="200px" height="100px"
+ onload="below_viewport_blob_url_iframe_onload();"></iframe>
+
<!-- This async script loads very slowly in order to ensure that, if the
