layerX/layerY return incorrect values with CSS transforms

Ahmad-S792 · Ahmad Saleem · commit 63d6cf248df1 · 2026-01-27T13:09:55.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=306314 rdar://168968832 Reviewed by Lily Spiniolas and Abrar Rahman Protyasha. This patch aligns WebKit with Gecko / Firefox and Blink / Chromium. The layerX and layerY properties were computed by walking up the layer tree and subtracting each layer's location(). This approach fails with CSS transforms because layer locations are in local coordinate space and don't account for transforms applied to parent layers. It doesn't make sense not to include transforms when subtracting the layer offset, because before this subtraction the mouse position value already includes transforms (via absoluteLocation which applies the documentToAbsoluteScaleFactor). Fix by computing the layer's position in absolute coordinates using localToAbsolute() with UseTransforms, matching Chromium's approach. This ensures both the mouse position and layer position are in the same coordinate system before computing their relative offset. See: https://github.com/w3c/uievents/issues/398 * Source/WebCore/dom/MouseRelatedEvent.cpp: (WebCore::MouseRelatedEvent::computeRelativePosition): * LayoutTests/imported/w3c/web-platform-tests/uievents/mouse/layer-coords-transform-expected.txt: Progression * LayoutTests/fast/events/mouse-relative-position-expected.txt: * LayoutTests/fast/events/mouse-relative-position.html: Canonical link: https://commits.webkit.org/306300@main
diff --git a/LayoutTests/fast/events/mouse-relative-position-expected.txt b/LayoutTests/fast/events/mouse-relative-position-expected.txt
@@ -1,6 +1,9 @@
 span
 
 PASS simulateElementClick(testElement, [100, 100, 200, 200]); is '100, 100, 200, 200'
-PASS simulateElementClick(spanElement, [16, 10, 16, 10]); is '16, 10, 16, 10'
-PASS simulateElementClick(inputElement, [40, 10, 40, 10]); is '40, 10, 40, 10'
+PASS simulateElementClick(spanElement, [16, 10, 112, 110]); is '16, 10, 112, 110'
+PASS simulateElementClick(inputElement, [39, 9, 95, 10]); is '39, 9, 95, 10'
+PASS successfullyParsed is true
+
+TEST COMPLETE
 
diff --git a/LayoutTests/fast/events/mouse-relative-position.html b/LayoutTests/fast/events/mouse-relative-position.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-<script src="../../resources/js-test-pre.js"></script>
+<script src="../../resources/js-test.js"></script>
 <style>
     html, body {
         margin: 0;
@@ -97,7 +97,7 @@
     var inputElement = testElement2.getElementsByTagName('input')[0];
 
     shouldBe("simulateElementClick(testElement, [100, 100, 200, 200]);", "'100, 100, 200, 200'");
-    shouldBe("simulateElementClick(spanElement, [16, 10, 16, 10]);", "'16, 10, 16, 10'");
-    shouldBe("simulateElementClick(inputElement, [40, 10, 40, 10]);", "'40, 10, 40, 10'");
+    shouldBe("simulateElementClick(spanElement, [16, 10, 112, 110]);", "'16, 10, 112, 110'");
+    shouldBe("simulateElementClick(inputElement, [39, 9, 95, 10]);", "'39, 9, 95, 10'");
 </script>
 </html>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/uievents/mouse/layer-coords-transform-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/uievents/mouse/layer-coords-transform-expected.txt
@@ -1,4 +1,4 @@
 
-FAIL layer-coords-transform assert_equals: layerX expected 200 but got 210
+PASS layer-coords-transform
 PASS layer-coords-transform 1
 
diff --git a/Source/WebCore/dom/MouseRelatedEvent.cpp b/Source/WebCore/dom/MouseRelatedEvent.cpp
@@ -252,16 +252,31 @@ void MouseRelatedEvent::computeRelativePosition()
     while (node && !node->renderer())
         node = node->parentNode();
 
-    CheckedPtr<RenderLayer> layer;
-    if (node && (layer = node->renderer()->enclosingLayer())) {
-        for (; layer; layer = layer->parent()) {
-            m_layerLocation -= toLayoutSize(layer->location());
+    if (node) {
+        CheckedPtr layer = node->renderer()->enclosingLayer();
+        while (layer && !layer->isSelfPaintingLayer())
+            layer = layer->parent();
+
+        if (layer) {
+            // Start with absoluteLocation which is already in absolute coordinates
+            // (has zoom factor applied via documentToAbsoluteScaleFactor).
+            auto layerLocationInAbsoluteCoords = absoluteLocation();
+
+            // Convert layer position to absolute coordinates accounting for transforms.
+            auto layerAbsolutePosition = layer->renderer().localToAbsolute(FloatPoint(), UseTransforms);
+
+            // Subtract the layer's absolute position from the mouse absolute position.
+            layerLocationInAbsoluteCoords.moveBy(-layerAbsolutePosition);
+
+            // Scale back to page coordinates (remove zoom factor).
+            auto inverseScaleFactor = 1 / documentToAbsoluteScaleFactor();
+            m_layerLocation = LayoutPoint(layerLocationInAbsoluteCoords.scaled(inverseScaleFactor));
         }
     }
 
     m_hasCachedRelativePosition = true;
 }
-    
+
 DoublePoint MouseRelatedEvent::locationInRootViewCoordinates() const
 {
     if (RefPtr frameView = frameViewFromWindowProxy(view()))

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`
`2`		`-FAIL layer-coords-transform assert_equals: layerX expected 200 but got 210`
	`2`	`+PASS layer-coords-transform`
`3`	`3`	`PASS layer-coords-transform 1`
`4`	`4`