From bd827703400c306193f3a9e5ca30abc3f694147c Mon Sep 17 00:00:00 2001
From: Stefan Zager <[email protected]>
Date: Mon, 11 May 2026 21:33:55 -0700
Subject: [PATCH] [IntersectionObserver] Fix occlusion detection with 3D transform

For regular (i.e. event-targeting) hit testing, z-axis ordering is
based on the z-axis position of the center of a PaintLayer. That's
not good enough for occlusion testing.

With this CL, when a hit test for occlusion encounters a 3d transform,
it computes the z-axis position of the four corners of the PaintLayer,
and if any of them are above any point in the occlusion target (i.e.
the HitTestRequest::stop_node_) then the PaintLayer is considered
occluding. This is not 100% accurate, but it will never result in a
false positive (i.e., reporting the target as unoccluded when it
actually is), which is a hard requirement of IntersectionObserver.

The corner-checking code makes a simplifying assumption that the
stop_node_ has no 3D projection, which is enforced by a call to
LayoutObject::HasDistortingVisualEffects from IntersectionObserver.

Bug: 479203484
Change-Id: Ida70f919efc73149d32112900b019987f27a5a7e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7835432
Reviewed-by: Philip Rogers <[email protected]>
Commit-Queue: Stefan Zager <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1629048}
---

diff --git a/third_party/blink/renderer/core/layout/hit_testing_test.cc b/third_party/blink/renderer/core/layout/hit_testing_test.cc
index 06d8d4a..6749e72 100644
--- a/third_party/blink/renderer/core/layout/hit_testing_test.cc
+++ b/third_party/blink/renderer/core/layout/hit_testing_test.cc
@@ -446,4 +446,42 @@
             PhysicalRect(-10, -10, 120, 120));
 }
 
+TEST_F(HitTestingTest, OcclusionHitTestWith3DTransform) {
+  SetBodyInnerHTML(R"HTML(
+    <style>
+    body {
+      transform-style: preserve-3d;
+    }
+    div {
+      position: absolute;
+      width: 100px;
+      height: 100px;
+    }
+    #target {
+      background: green;
+    }
+    #occluder {
+      background: red;
+      transform: translateZ(-10px) rotateY(30deg);
+      transform-origin: center;
+    }
+    </style>
+    <div id=occluder></div>
+    <div id=target></div>
+  )HTML");
+
+  Element* target = GetElementById("target");
+  Element* occluder = GetElementById("occluder");
+
+  HitTestResult result = HitTestForOcclusion(*target);
+  EXPECT_EQ(result.InnerNode(), occluder);
+
+  // Place the occluder entirely behind the target.
+  occluder->SetInlineStyleProperty(CSSPropertyID::kTransform,
+                                   "translateZ(-10px) rotateY(10deg)");
+  UpdateAllLifecyclePhasesForTest();
+  result = HitTestForOcclusion(*target);
+  EXPECT_EQ(result.InnerNode(), target);
+}
+
 }  // namespace blink
diff --git a/third_party/blink/renderer/core/paint/paint_layer.cc b/third_party/blink/renderer/core/paint/paint_layer.cc
index 76d1741..cd95602 100644
--- a/third_party/blink/renderer/core/paint/paint_layer.cc
+++ b/third_party/blink/renderer/core/paint/paint_layer.cc
@@ -1182,7 +1182,8 @@
     const PaintLayer* hit_layer,
     bool can_depth_sort,
     double* z_offset,
-    const HitTestingTransformState* transform_state) {
+    const HitTestingTransformState* transform_state,
+    bool occlusion_hit_test) {
   if (!hit_layer)
     return false;
 
@@ -1199,9 +1200,37 @@
   DCHECK(!z_offset || transform_state ||
          hit_layer->GetLayoutObject().IsSVGForeignObject());
   if (z_offset && transform_state) {
-    // This is actually computing our z, but that's OK because the hitLayer is
-    // coplanar with us.
-    double child_z_offset = ComputeZOffset(*transform_state);
+    double child_z_offset;
+    // When performing a hit test for occlusion, we consider a layer to be
+    // occluding if any part of it has a z-axis position greater than or equal
+    // to the z-axis position of the occlusion target. The occlusion target is
+    // assumed not to have a 3D projection, so its z-axis position is uniformly
+    // zero (see the call to target->HasDistortingVisualEffects() in
+    // intersection_geometry.cc). For the layer under test, we compute the
+    // z-axis position at all four corners to find the max.
+    if (occlusion_hit_test && hit_layer->Has3DTransform()) {
+      child_z_offset = -std::numeric_limits<double>::infinity();
+      PhysicalRect rect = hit_layer->GetLayoutObject().VisualOverflowRect();
+      gfx::QuadF local_quad{gfx::RectF(rect)};
+      gfx::PointF pts[4] = {local_quad.p1(), local_quad.p2(), local_quad.p3(),
+                            local_quad.p4()};
+      for (const auto& pt : pts) {
+        gfx::Point3F pt3(pt.x(), pt.y(), 0);
+        pt3 = transform_state->AccumulatedTransform().MapPoint(pt3);
+        if (pt3.z() > child_z_offset) {
+          child_z_offset = pt3.z();
+        }
+      }
+      if (child_z_offset >= 0) {
+        *z_offset = child_z_offset;
+        return true;
+      }
+      return false;
+    } else {
+      // This is actually computing our z, but that's OK because the hitLayer is
+      // coplanar with us.
+      child_z_offset = ComputeZOffset(*transform_state);
+    }
     if (child_z_offset > *z_offset) {
       *z_offset = child_z_offset;
       return true;
@@ -1534,12 +1563,14 @@
               RuntimeEnabledFeatures::
                       HitTestContainerTransformStateForPreserve3dEnabled()
                   ? container_transform_state
-                  : local_transform_state) &&
+                  : local_transform_state,
+              temp_result.GetHitTestRequest().IsHitTestVisualOverflow()) &&
           IsHitCandidateForStopNode(GetLayoutObject(), stop_node)) {
-        if (result.GetHitTestRequest().ListBased())
+        if (result.GetHitTestRequest().ListBased()) {
           result.Append(temp_result);
-        else
+        } else {
           result = temp_result;
+        }
         if (!depth_sort_descendants)
           return this;
         // Foreground can depth-sort with descendant layers, so keep this as a
@@ -1578,12 +1609,14 @@
             RuntimeEnabledFeatures::
                     HitTestContainerTransformStateForPreserve3dEnabled()
                 ? container_transform_state
-                : local_transform_state) &&
+                : local_transform_state,
+            temp_result.GetHitTestRequest().IsHitTestVisualOverflow()) &&
         IsHitCandidateForStopNode(GetLayoutObject(), stop_node)) {
-      if (result.GetHitTestRequest().ListBased())
+      if (result.GetHitTestRequest().ListBased()) {
         result.Append(temp_result);
-      else
+      } else {
         result = temp_result;
+      }
       return this;
     }
     if (inside_fragment_background_rect &&
@@ -1904,8 +1937,9 @@
       result.Append(temp_result);
     }
 
-    if (IsHitCandidateForDepthOrder(hit_layer, depth_sort_descendants, z_offset,
-                                    local_transform_state)) {
+    if (IsHitCandidateForDepthOrder(
+            hit_layer, depth_sort_descendants, z_offset, local_transform_state,
+            result.GetHitTestRequest().IsHitTestVisualOverflow())) {
       result_layer = hit_layer;
       if (!result.GetHitTestRequest().ListBased())
         result = temp_result;
diff --git a/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html b/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html
new file mode 100644
index 0000000..e7161521
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html
@@ -0,0 +1,61 @@
+<!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>
+ body {
+   transform-style: preserve-3d;
+ }
+ div {
+   position: absolute;
+   width: 100px;
+   height: 100px;
+ }
+ #target1, #target2 {

diff --git a/third_party/blink/renderer/core/layout/hit_testing_test.cc b/third_party/blink/renderer/core/layout/hit_testing_test.cc
index 06d8d4a..6749e72 100644
--- a/third_party/blink/renderer/core/layout/hit_testing_test.cc
+++ b/third_party/blink/renderer/core/layout/hit_testing_test.cc
@@ -446,4 +446,42 @@
             PhysicalRect(-10, -10, 120, 120));
 }
 
+TEST_F(HitTestingTest, OcclusionHitTestWith3DTransform) {
+  SetBodyInnerHTML(R"HTML(
+    <style>
+    body {
+      transform-style: preserve-3d;
+    }
+    div {
+      position: absolute;
+      width: 100px;
+      height: 100px;
+    }
+    #target {
+      background: green;
+    }
+    #occluder {
+      background: red;
+      transform: translateZ(-10px) rotateY(30deg);
+      transform-origin: center;
+    }
+    </style>
+    <div id=occluder></div>
+    <div id=target></div>
+  )HTML");
+
+  Element* target = GetElementById("target");
+  Element* occluder = GetElementById("occluder");
+
+  HitTestResult result = HitTestForOcclusion(*target);
+  EXPECT_EQ(result.InnerNode(), occluder);
+
+  // Place the occluder entirely behind the target.
+  occluder->SetInlineStyleProperty(CSSPropertyID::kTransform,
+                                   "translateZ(-10px) rotateY(10deg)");
+  UpdateAllLifecyclePhasesForTest();
+  result = HitTestForOcclusion(*target);
+  EXPECT_EQ(result.InnerNode(), target);
+}
+
 }  // namespace blink
diff --git a/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html b/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html
new file mode 100644
index 0000000..e7161521
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/intersection-observer/v2/3d-transform-occlusion.html
@@ -0,0 +1,61 @@
+<!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>
+ body {
+   transform-style: preserve-3d;
+ }
+ div {
+   position: absolute;
+   width: 100px;
+   height: 100px;
+ }
+ #target1, #target2 {
+   background: green;
+ }
+ #target2 {
+   left: 150px;
+ }
+ #occluder {
+   background: red;
+   transform: translateZ(-10px) rotateY(30deg);
+   transform-origin: center;
+ }
+ #behind {
+   left: 150px;
+   background: red;
+   transform: translateZ(-10px) rotateY(10deg);
+   transform-origin: center;
+ }
+</style>
+
+<div id=occluder></div>
+<div id=target1></div>
+
+<div id=behind></div>
+<div id=target2></div>
+
+<script>
+  promise_test(() => {
+    return Promise.all([
+      new Promise((resolve, reject) => {
+        const target = document.getElementById("target1");
+        new IntersectionObserver(entries => {
+          // part of #occluder is visible above #target1
+          assert_false(entries[0].isVisible);
+          resolve();
+        }, {trackVisibility:true, delay:100}).observe(target);
+      }),
+      new Promise((resolve, reject) => {
+        const target = document.getElementById("target2");
+        new IntersectionObserver(entries => {
+          // #behind is entirely behind #target2
+          assert_true(entries[0].isVisible);
+          resolve();
+        }, {trackVisibility:true, delay:100}).observe(target);
+      })
+    ]);
+  }, "Intersection observer V2 test with occlusion by an element with a 3D transform.");
+</script>