diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-multiple-times.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-multiple-times.html | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-multiple-times.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-multiple-times.html new file mode 100644 index 0000000000..2d67150560 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-multiple-times.html @@ -0,0 +1,60 @@ +<head> + <title>Images with loading='lazy' can be lazy loaded multiple times</title> + <link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> + +<body> + <!-- This is used to represent the top of the viewport, so we can scroll the + below-viewport image out-of-view later in the test --> + <div id="top_div"></div> + <div style="height:1000vh;"></div> + <img id="below_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-multiple-times-first"> + +<script> + const t = async_test("Images with loading='lazy' can be lazy loaded multiple times"); + const image = document.querySelector('#below_viewport'); + const top_div = document.querySelector('#top_div'); + + let has_window_load_fired = false; + + // This should be triggered first. + window.addEventListener('load', t.step_func(() => { + has_window_load_fired = true; + // Scroll the loading=lazy below-viewport image into view, so that it loads. + image.scrollIntoView(); + })); + + image.onload = t.step_func(() => { + assert_true(has_window_load_fired, + "The loading=lazy below-viewport image should not block the " + + "window load event"); + changeImageSourceAndScrollToTop(); + }); + + function changeImageSourceAndScrollToTop() { + top_div.scrollIntoView(); + + // Allow some time for scroll back to top, since we don't + // want the image to still be in the viewport and trigger a + // load due to the scroll being slow. + t.step_timeout(() => { + // Lazily load a "different" image. + image.src = 'resources/image.png?image-loading-lazy-multiple-times-second'; + image.onload = + t.unreached_func("The loading=lazy below-viewport image should lazily " + + "load its second image, and not load it eagerly when " + + "the `src` attribute is changed"); + + // In 1s, scroll the image *back* into view, and record that it loads + // successfully. + t.step_timeout(() => { + image.onload = t.step_func_done(); + image.scrollIntoView(); + }, 1000); + }, 500); + } +</script> +</body> |