Tests: Add IntersectionObserver test for scroll margin

Add a test that creates two observers watching the same target inside an overflow:hidden container: one without scroll margin and one with scrollMargin "50px". The target is partially visible (10px out of 50px). Without scroll margin, the ratio is ~0.19 (10px visible / 50px target). With scroll margin, the expanded scrollport should make the full target visible (ratio=1), but currently both report the same ratio because scroll margin is not yet applied in compute_intersection.
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/c871c56178b Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8574
2026-04-27 02:05:07 +02:00 · 2026-03-22 08:56:49 -05:00 · 2026-03-22 19:11:03 +00:00
parent 229eba9a06
commit c871c56178
2 changed files with 65 additions and 0 deletions
--- a/Tests/LibWeb/Text/input/IntersectionObserver/scroll-margin-expands-scrollport.html
+++ b/Tests/LibWeb/Text/input/IntersectionObserver/scroll-margin-expands-scrollport.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<style>
+body { margin: 0; }
+#scroller {
+    width: 200px;
+    height: 200px;
+    overflow: hidden;
+}
+#spacer {
+    height: 190px;
+}
+#target {
+    width: 50px;
+    height: 50px;
+    background: red;
+}
+</style>
+<script src="../include.js"></script>
+<div id="scroller">
+    <div id="spacer"></div>
+    <div id="target"></div>
+</div>
+<script>
+    asyncTest(done => {
+        // The target starts at y=190 inside a 200px tall container.
+        // Without scroll margin, 10px of the target is visible (ratio = 10*50 / 50*50 = 0.2).
+        // With scrollMargin "50px", the scrollport is expanded by 50px on each side,
+        // making the effective clip rect taller. The target at y=190 to y=240
+        // fits entirely within the expanded scrollport (0-50 to 200+50 = -50 to 250),
+        // so the ratio should be 1.
+        //
+        // We create two observers: one without scroll margin and one with.
+        let results = [];
+        let remaining = 2;
+
+        function checkDone() {
+            remaining--;
+            if (remaining === 0) {
+                results.sort();
+                results.forEach(r => println(r));
+                done();
+            }
+        }
+
+        let observerNoMargin = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                results.push(`no-margin: ratio=${entry.intersectionRatio}`);
+            });
+            checkDone();
+        });
+
+        let observerWithMargin = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                results.push(`with-margin: ratio=${entry.intersectionRatio}`);
+            });
+            checkDone();
+        }, { scrollMargin: "50px" });
+
+        let target = document.getElementById("target");
+        observerNoMargin.observe(target);
+        observerWithMargin.observe(target);
+    });
+</script>