dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

LibWeb: Apply the z component of transform-origin

Browse source 
compute_transform() resolved transform-origin to a 2D point, so 3D
rotations pivoted around the element's own plane. Build the conjugation
T(0, 0, z) * M * T(0, 0, -z) into the matrix instead; this composes
with the 2D origin at paint time into the full 3D conjugation.
This commit is contained in:
Jelle Raaijmakers 2026-06-11 21:18:19 +02:00 committed by Jelle Raaijmakers
parent 4050c32dab
commit 7390818b5a
6 changed files with 92 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
Libraries/LibWeb/Painting/AccumulatedVisualContext.cpp
View file

@ -94,7 +94,13 @@ static Optional<TransformData> compute_transform(PaintableBox const& paintable_b
if (!paintable_box.has_css_transform())
return {};
auto matrix = Gfx::FloatMatrix4x4::identity();
auto reference_box = paintable_box.transform_reference_box();
auto const& css_transform_origin = computed_values.transform_origin();
auto origin_x = css_transform_origin.x.to_px(paintable_box.layout_node(), reference_box.width());
auto origin_y = css_transform_origin.y.to_px(paintable_box.layout_node(), reference_box.height());
auto origin_z = css_transform_origin.z.to_px(paintable_box.layout_node(), 0).to_float();
auto matrix = Gfx::translation_matrix(Vector3 { 0.f, 0.f, origin_z });
if (auto const& translate = computed_values.translate())
matrix = matrix * translate->to_matrix(paintable_box);
if (auto const& rotate = computed_values.rotate())
@ -103,12 +109,9 @@ static Optional<TransformData> compute_transform(PaintableBox const& paintable_b
matrix = matrix * scale->to_matrix(paintable_box);
for (auto const& transform : computed_values.transformations())
matrix = matrix * transform->to_matrix(paintable_box);
auto const& css_transform_origin = computed_values.transform_origin();
auto reference_box = paintable_box.transform_reference_box();
CSSPixelPoint origin {
reference_box.left() + css_transform_origin.x.to_px(paintable_box.layout_node(), reference_box.width()),
reference_box.top() + css_transform_origin.y.to_px(paintable_box.layout_node(), reference_box.height()),
};
matrix = matrix * Gfx::translation_matrix(Vector3 { 0.f, 0.f, -origin_z });
auto origin = reference_box.location() + CSSPixelPoint { origin_x, origin_y };
auto scale = static_cast<float>(pixel_ratio);
auto device_origin = origin.to_type<float>() * scale;
return TransformData { scale_matrix_for_device_pixels(matrix, scale), device_origin };

13
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform3d-translate3d-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
</head>
<body>
<div style="perspective: 1000px">
<div style="transform: rotatex(45deg); transform-origin: 10px 30px -10px;
width: 100px; height: 100px; background: lime"></div>
</div>
</body>
</html>

13
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform3d-translatez-notref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
</head>
<body>
<div style="transform: translatez(-20px) rotatex(45deg) translatez(20px); transform-origin: 0 0 0; width: 100px; height: 100px;">
Test Text
</div>
</body>
</html>

13
Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform3d-translatez-ref.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
</head>
<body>
<div style="transform: rotatex(45deg); transform-origin: 0 0 -10px; width: 100px; height: 100px;">
Test Text
</div>
</body>
</html>

22
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform3d-translate3d-001.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test (Transforms): translate3d() vs. 'transform-origin'</title>
<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-translate3d">
<meta name="assert" content="This tests that translate3d() before and after
rotatex() is the same as an equivalent 'transform-origin'.">
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/transform3d-translate3d-ref.html">
<link rel="mismatch" href="../../../../expected/wpt-import/css/css-transforms/transform-lime-square-ref.html">
</head>
<body>
<div style="perspective: 1000px">
<div style="transform: translate3d(10px, 30px, -10px) rotatex(45deg)
translate3d(-10px, -30px, 10px); transform-origin: 0 0 0; width: 100px;
height: 100px; background: lime"></div>
</div>
</body>
</html>

21
Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform3d-translatez-001.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test (Transforms): translatez() vs. 'transform-origin'</title>
<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
<link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
<link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#three-d-transform-functions">
<link rel="help" href="http://www.w3.org/TR/css-transforms-2/#funcdef-translatez">
<meta name="assert" content="This tests that translatez(+-10px) before and
after rotatex() is the same as an equivalent 'transform-origin', and
different from translatez(+-20px).">
<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/transform3d-translatez-ref.html">
<link rel="mismatch" href="../../../../expected/wpt-import/css/css-transforms/transform3d-translatez-notref.html">
</head>
<body>
<div style="transform: translatez(-10px) rotatex(45deg) translatez(10px); transform-origin: 0 0 0; width: 100px; height: 100px;">
Test Text
</div>
</body>
</html>