Support iframe scroll margin

This change adds support to observe out of viewport targets inside scrollable same origin iframes using intersection observers with scrollMargin, by crossing the iframe boundary when collecting intermediate scrollers. R=szager Bug: 1503290 Change-Id: Iaf5482a67e8eb37000d54fb9529df5c16f86e644 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5240906 Reviewed-by: Stefan Zager <[email protected]> Commit-Queue: Traian Captan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1256994}
Tobias710219 · Feb 6, 2024 · c0b9c86 · c0b9c86
1 parent 1120ba9
commit c0b9c86
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/intersection-observer/scroll-margin-iframe.html b/intersection-observer/scroll-margin-iframe.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/intersection-observer-test-utils.js"></script>
+
+<iframe
+  id="target-iframe"
+  src="resources/iframe-no-root-subframe.html"
+  width="300"
+  height="200"
+></iframe>
+
+<script>
+var iframe = document.getElementById("target-iframe");
+var target;
+var entries = [];
+
+iframe.onload = function() {
+  runTestCycle(function() {
+    assert_true(!!iframe, "iframe exists");
+
+    target = iframe.contentDocument.getElementById("target");
+    assert_true(!!target, "Target element exists.");
+
+    var observer = new IntersectionObserver(function(changes) {
+      entries = entries.concat(changes)
+    }, {
+      scrollMargin: "18px"
+    });
+    observer.observe(target);
+
+    entries = entries.concat(observer.takeRecords());
+    assert_equals(entries.length, 0, "No initial notifications.");
+
+    runTestCycle(testIntersection, "Test scroll margin intersection");
+  }, "Observer with the implicit root; target in a same-origin iframe.");
+};
+
+function testIntersection() {
+  assert_equals(entries.length, 1, "IntersectionObserverEntryCount");
+  assert_true(entries[0].isIntersecting, "isIntersecting");
+  assert_approx_equals(entries[0].intersectionRatio, 0.1, 0.001, "intersectionRatio");
+}
+</script>