Consider visual overflow when hit testing border-shape

progers · chromium-wpt-export-bot · commit 6f5749e444fc · 2026-05-28T00:22:47.000-07:00
This patch ensures we do not early-out before hit testing visual overflow when hit testing for occlusion in the presence of border-shape. Fixed: 517155893 Change-Id: Idfdc39607ddf7f9d6c893e0d7cb08652893d9362 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7880691 Reviewed-by: Stefan Zager <szager@chromium.org> Commit-Queue: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1637424}
diff --git a/intersection-observer/v2/border-shape-occlusion.html b/intersection-observer/v2/border-shape-occlusion.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    background: blue;
+  }
+  #occluder {
+    position: absolute;
+    left: 300px;
+    top: 100px;
+    width: 10px;
+    height: 10px;
+    border-shape: circle(5px at 50% 50%);
+    box-shadow: -150px 0 0 100px black;
+    background: red;
+  }
+</style>
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+  setup({ single_test: true });
+  const target = document.getElementById("target");
+  new IntersectionObserver(entries => {
+    assert_false(entries[0].isVisible);
+    done();
+  }, {trackVisibility: true, delay: 100}).observe(target);
+</script>
diff --git a/intersection-observer/v2/border-shape-overflow-occlusion.html b/intersection-observer/v2/border-shape-overflow-occlusion.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #target {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    background: blue;
+  }
+  #occluder {
+    position: absolute;
+    left: 300px;
+    top: 100px;
+    width: 10px;
+    height: 10px;
+    border-shape: circle(5px at 50% 50%);
+    box-shadow: -150px 0 0 100px black;
+    background: red;
+    overflow: hidden;
+  }
+</style>
+<div id="target"></div>
+<div id="occluder"></div>
+
+<script>
+  setup({ single_test: true });
+  const target = document.getElementById("target");
+  new IntersectionObserver(entries => {
+    assert_false(entries[0].isVisible);
+    done();
+  }, {trackVisibility: true, delay: 100}).observe(target);
+</script>
