diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html b/testing/web-platform/tests/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html new file mode 100644 index 0000000000..336703ebc4 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy.html @@ -0,0 +1,110 @@ +<!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="author" title="Dom Farolino" href="mailto:dom@chromium.org"> + <link rel="help" href="https://github.com/whatwg/html/pull/5579"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> + +<script> + const t_in_viewport = + async_test('In-viewport 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; + + const in_viewport_iframe_onload = t_in_viewport.step_func_done(() => { + assert_false(has_window_loaded, + "The in_viewport iframe should not block the load event"); + }); + + window.addEventListener("load", () => { + has_window_loaded = true; + document.getElementById("below_viewport_srcdoc").scrollIntoView(); + }); + + const below_viewport_iframe_onload = t_below_viewport.step_func_done(() => { + assert_true(has_window_loaded, + "The window load event should have fired before " + + "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, + "The window load event should have fired before " + + "the below-viewport srcdoc iframe's subresource loads"); + }); + + const below_viewport_srcdoc_iframe_onload = t_below_viewport_srcdoc.step_func_done(() => { + assert_true(has_window_loaded, + "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> + + <div style="height:2000vh;"></div> + <iframe id="below_viewport" src="resources/subframe.html?below-viewport" + loading="lazy" width="200px" height="100px" + onload="below_viewport_iframe_onload();"></iframe> + <iframe id="below_viewport_srcdoc" + srcdoc="<body><img src='/common/square.png?below-viewport' + 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 + below_viewport* elements have started loading, it has a chance to finish + loading before window load event fires, 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> |