Fix 3d transform check in HasDistortingVisualEffects

progers · chromium-wpt-export-bot · commit 5670df766432 · 2026-05-28T00:22:28.000-07:00
https://crrev.com/1629048 relies on `HasDistortingVisualEffects` catching all cases where the target has a 3d transform. Unfortunately, this was not the case because `GeometryMapper::SourceToDestinationProjection` will flatten 3d transforms, so the following check is insufficient: ``` gfx::Transform projection = SourceToDestinationProjection( paint_properties.Transform(), root_properties.Transform()); if (!projection.Is2dProportionalUpscaleAndOr2dTranslation()) return true; ``` This patch fixes this issue by ensuring that the target and the root are coplanar before relying on the projection. Fixed: 517176673 Change-Id: Ia03596324a88252c054f0963f7aa08b60d1a5497 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7877217 Reviewed-by: Stefan Zager <szager@chromium.org> Auto-Submit: Philip Rogers <pdr@chromium.org> Commit-Queue: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1637326}
diff --git a/intersection-observer/v2/3d-transform-z-order-occlusion.html b/intersection-observer/v2/3d-transform-z-order-occlusion.html
@@ -0,0 +1,45 @@
+<!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>
+  #container {
+    position: relative;
+    transform: translateZ(-10px);
+    transform-style: preserve-3d;
+    width: 200px;
+    height: 200px;
+    background: blue;
+  }
+  #target {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100px;
+    height: 100px;
+    background: red;
+  }
+  #occluder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100px;
+    height: 100px;
+    transform: translateZ(5px);
+    background: green;
+    pointer-events: none;
+  }
+</style>
+<div id="container">
+  <div id="target"></div>
+  <div id="occluder"></div>
+</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>
