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>