Hit testing on element with 180deg flip inside preserve-3d not findin…

…g correct element. https://bugs.webkit.org/show_bug.cgi?id=258565 <rdar://111393557> Reviewed by Simon Fraser. Floating point precision (using double) meant that sin(180deg) wasn't returning exactly 0. When combining multiple transforms together using preserve-3d, this meant that layers that are intended to be coplanar ended up at slightly different depths. This adds rounding for tiny values to make them exactly zero, so that the layers end up coplanar again, and we hit test in DOM order for those. * LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3-expected.txt: Added. * LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3.html: Added. * Source/WebCore/platform/graphics/transforms/TransformationMatrix.cpp: (WebCore::roundEpsilonToZero): (WebCore::TransformationMatrix::rotate3d): (WebCore::TransformationMatrix::rotate): Canonical link: https://commits.webkit.org/266237@main
WebKit · Jul 24, 2023 · 1aa517d · 1aa517d
1 parent 2c13e49
commit 1aa517d
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 23 deletions.
diff --git a/LayoutTests/compositing/backing/backface-visibility-flip-expected.txt b/LayoutTests/compositing/backing/backface-visibility-flip-expected.txt
@@ -28,7 +28,7 @@ Front Back
                   (contentsOpaque 1)
                   (drawsContent 1)
                   (backfaceVisibility hidden)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                 )
               )
             )

diff --git a/LayoutTests/compositing/layer-creation/overlap-transformed-preserved-3d-expected.txt b/LayoutTests/compositing/layer-creation/overlap-transformed-preserved-3d-expected.txt
@@ -33,12 +33,12 @@ Before:
                 (GraphicsLayer
                   (bounds 100.00 100.00)
                   (drawsContent 1)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 -50.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 -50.00 1.00])
                 )
                 (GraphicsLayer
                   (bounds 100.00 100.00)
                   (drawsContent 1)
-                  (transform [-0.00 0.00 1.00 0.00] [0.00 1.00 0.00 0.00] [-1.00 0.00 -0.00 0.00] [-50.00 0.00 -0.00 1.00])
+                  (transform [0.00 0.00 1.00 0.00] [0.00 1.00 0.00 0.00] [-1.00 0.00 0.00 0.00] [-50.00 0.00 0.00 1.00])
                 )
                 (GraphicsLayer
                   (bounds 100.00 100.00)
@@ -93,12 +93,12 @@ After:
                 (GraphicsLayer
                   (bounds 100.00 100.00)
                   (drawsContent 1)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 -50.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 -50.00 1.00])
                 )
                 (GraphicsLayer
                   (bounds 100.00 100.00)
                   (drawsContent 1)
-                  (transform [-0.00 0.00 1.00 0.00] [0.00 1.00 0.00 0.00] [-1.00 0.00 -0.00 0.00] [-50.00 0.00 -0.00 1.00])
+                  (transform [0.00 0.00 1.00 0.00] [0.00 1.00 0.00 0.00] [-1.00 0.00 0.00 0.00] [-50.00 0.00 0.00 1.00])
                 )
                 (GraphicsLayer
                   (bounds 100.00 100.00)

diff --git a/LayoutTests/fast/text/combining-character-sequence-vertical.html b/LayoutTests/fast/text/combining-character-sequence-vertical.html
@@ -1,5 +1,3 @@
-<!-- webkit-test-runner [ useThreadedScrolling=false ] -->
-<!-- This test depends on subpixel quantization being disabled, which is the case when threaded scrolling is disabled. -->
 <div style="width: 100px; font-family: 'geeza pro'; font-size: 48px; -webkit-writing-mode: vertical-rl;">
     &#x0628;&#x062d;&#x0653;
 </div>
diff --git a/LayoutTests/fast/text/vertical-quotation-marks.html b/LayoutTests/fast/text/vertical-quotation-marks.html
@@ -1,5 +1,3 @@
-<!-- webkit-test-runner [ useThreadedScrolling=false ] -->
-<!-- This test depends on subpixel quantization being disabled, which is the case when threaded scrolling is disabled. -->
 <!DOCTYPE html>
 <html>
 <head>

diff --git a/LayoutTests/platform/ios-wk2/compositing/tiling/backface-preserve-3d-tiled-expected.txt b/LayoutTests/platform/ios-wk2/compositing/tiling/backface-preserve-3d-tiled-expected.txt
@@ -22,7 +22,7 @@
                   (preserves3D 1)
                   (drawsContent 1)
                   (backfaceVisibility hidden)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                 )
               )
             )
@@ -45,7 +45,7 @@
                   (preserves3D 1)
                   (drawsContent 1)
                   (backfaceVisibility hidden)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                 )
               )
             )

diff --git a/LayoutTests/platform/ios-wk2/compositing/visible-rect/flipped-preserve-3d-expected.txt b/LayoutTests/platform/ios-wk2/compositing/visible-rect/flipped-preserve-3d-expected.txt
@@ -34,7 +34,7 @@ Some text here.
               (anchor 0.57 0.50)
               (bounds 440.00 440.00)
               (preserves3D 1)
-              (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+              (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
               (visible rect 0.00, 0.00 440.00 x 440.00)
               (coverage rect -199.00, -114.00 800.00 x 600.00)
               (intersects coverage rect 1)
@@ -43,7 +43,7 @@ Some text here.
                 (GraphicsLayer
                   (bounds 420.00 420.00)
                   (contentsOpaque 1)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                   (visible rect 0.00, 0.00 420.00 x 420.00)
                   (coverage rect -181.00, -114.00 800.00 x 600.00)
                   (intersects coverage rect 1)

diff --git a/LayoutTests/platform/mac/compositing/tiling/backface-preserve-3d-tiled-expected.txt b/LayoutTests/platform/mac/compositing/tiling/backface-preserve-3d-tiled-expected.txt
@@ -22,7 +22,7 @@
                   (preserves3D 1)
                   (drawsContent 1)
                   (backfaceVisibility hidden)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                 )
               )
             )
@@ -45,7 +45,7 @@
                   (preserves3D 1)
                   (drawsContent 1)
                   (backfaceVisibility hidden)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                 )
               )
             )

diff --git a/LayoutTests/platform/mac/compositing/visible-rect/flipped-preserve-3d-expected.txt b/LayoutTests/platform/mac/compositing/visible-rect/flipped-preserve-3d-expected.txt
@@ -34,7 +34,7 @@ Some text here.
               (anchor 0.57 0.50)
               (bounds 440.00 440.00)
               (preserves3D 1)
-              (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+              (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
               (visible rect 0.00, 0.00 440.00 x 440.00)
               (coverage rect -184.00, -114.00 785.00 x 600.00)
               (intersects coverage rect 1)
@@ -43,7 +43,7 @@ Some text here.
                 (GraphicsLayer
                   (bounds 420.00 420.00)
                   (contentsOpaque 1)
-                  (transform [-1.00 0.00 -0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
+                  (transform [-1.00 0.00 0.00 0.00] [0.00 1.00 0.00 0.00] [0.00 0.00 -1.00 0.00] [0.00 0.00 0.00 1.00])
                   (visible rect 0.00, 0.00 420.00 x 420.00)
                   (coverage rect -181.00, -114.00 785.00 x 600.00)
                   (intersects coverage rect 1)

diff --git a/LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3-expected.txt b/LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3-expected.txt
@@ -0,0 +1 @@
+Hit correct target: PASSED
diff --git a/LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3.html b/LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-3.html
@@ -0,0 +1,50 @@
+<html>
+<head>
+  <title>Hit testing on preserves-3d element with 180deg flip</title>
+  <style>
+    .rotateX {
+      transform: rotateX(180deg);
+      transform-style: preserve-3d;
+      width: 300px;
+      height: 200px;
+      background: cyan;
+    }
+
+    .rotateY {
+      width: 200px;
+      height: 100px;
+      transform: rotateY(180deg);
+      background: blue;
+    }
+
+    #button {
+      width: 100px;
+      height: 50px;
+      background-color: red;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    if (window.testRunner)
+      testRunner.dumpAsText();
+    function runTest()
+    {
+      var hit = document.elementFromPoint(120, 180);
+      var results = document.getElementById('results');
+      if (hit == document.getElementById('button'))
+        results.innerHTML = 'Hit correct target: PASSED';
+      else
+        results.innerHTML = 'Failed to find target: FAIL';
+    }
+  </script>
+</head>
+<body onload="runTest()">
+  <div class="rotateX">
+    <div class="rotateY">
+      <div id="button">
+      </div>
+    </div>
+  </div>
+
+  <div id="results"></div>
+</body>
+</html>
diff --git a/Source/WebCore/platform/graphics/transforms/TransformationMatrix.cpp b/Source/WebCore/platform/graphics/transforms/TransformationMatrix.cpp
@@ -33,6 +33,7 @@
 #include "IntRect.h"
 #include "LayoutRect.h"
 #include <cmath>
+#include <float.h>
 #include <wtf/Assertions.h>
 #include <wtf/MathExtras.h>
 #include <wtf/text/TextStream.h>
@@ -907,6 +908,13 @@ TransformationMatrix& TransformationMatrix::scale3d(double sx, double sy, double
     return *this;
 }
 
+static double roundEpsilonToZero(double val)
+{
+    if (-DBL_EPSILON < val && val < DBL_EPSILON)
+        return 0.0f;
+    return val;
+}
+
 TransformationMatrix& TransformationMatrix::rotate3d(double x, double y, double z, double angle)
 {
     // Normalize the axis of rotation
@@ -923,8 +931,8 @@ TransformationMatrix& TransformationMatrix::rotate3d(double x, double y, double
     // Angles are in degrees. Switch to radians.
     angle = deg2rad(angle);
 
-    double sinTheta = sin(angle);
-    double cosTheta = cos(angle);
+    double sinTheta = roundEpsilonToZero(sin(angle));
+    double cosTheta = roundEpsilonToZero(cos(angle));
 
     TransformationMatrix mat;
 
@@ -1000,8 +1008,8 @@ TransformationMatrix& TransformationMatrix::rotate(double angle)
         return *this;
 
     angle = deg2rad(angle);
-    double sinZ = sin(angle);
-    double cosZ = cos(angle);
+    double sinZ = roundEpsilonToZero(sin(angle));
+    double cosZ = roundEpsilonToZero(cos(angle));
     multiply({ cosZ, sinZ, -sinZ, cosZ, 0, 0 });
     return *this;
 }
@@ -1015,8 +1023,8 @@ TransformationMatrix& TransformationMatrix::rotate3d(double rx, double ry, doubl
 
     TransformationMatrix mat;
 
-    double sinTheta = sin(rz);
-    double cosTheta = cos(rz);
+    double sinTheta = roundEpsilonToZero(sin(rz));
+    double cosTheta = roundEpsilonToZero(cos(rz));
 
     mat.m_matrix[0][0] = cosTheta;
     mat.m_matrix[0][1] = sinTheta;