diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html new file mode 100644 index 0000000000..875160b4ea --- /dev/null +++ b/testing/web-platform/tests/html/semantics/embedded-content/the-img-element/image-loading-lazy-negative-margin.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<head> + <title>Images with loading='lazy' defers images in a hidden area as a result + of negative margins</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> + <script> + window.negative_margin_test = + async_test("A loading=lazy image that is pulled into an `overflow: hidden` " + + "area by a negative margin will not load because " + + "IntersectionObserver sees it as non-intersecting"); + + // If the `negative_margin` image in the DOM loads, the test should fail + // immediately. + window.negative_margin_onload = + negative_margin_test.step_func_done( + negative_margin_test.unreached_func("The image with a negative margin " + + "should never load")); + </script> + + <div style="width: 200px; height: 200px; overflow: hidden;"> + <img id="negative_margin" width="5px"; style="margin-left: -10000vw;" + loading="lazy" src="resources/image.png?loading-lazy-negative-margin" + onload="window.negative_margin_onload()"> + </div> + + <script> + const intersection_observer_promise = new Promise(resolve => { + function io_callback(entries) { + assert_equals(entries.length, 1); + resolve(entries[0].isIntersecting); + } + + const options = { + root: document, + rootMargin: '0px', + threshold: 1.0, + } + + const observer = new IntersectionObserver(io_callback, options); + observer.observe(document.querySelector('#negative_margin')); + }); + + const timeout_promise = new Promise(resolve => { + window.negative_margin_test.step_timeout(resolve, 500); + }); + + Promise.all([intersection_observer_promise, timeout_promise]).then( + window.negative_margin_test.step_func_done(values => { + assert_equals(values.length, 2); + assert_equals(values[0], false, "The IntersectionObserver sees that " + + "the image does not intersect the " + + "viewport"); + })); + </script> +</body> |