From b99f4872d1e3a0119f433716472dd9bd079eb717 Mon Sep 17 00:00:00 2001
From: Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
Date: Thu, 1 May 2025 12:53:54 +0200
Subject: [PATCH] LibWeb: Allow transform calculated length properties

---
 Libraries/LibWeb/CSS/Transformation.cpp       | 23 +++++++++++--------
 .../wpt-import/css/geometry/DOMMatrix-001.txt |  8 +++----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/Libraries/LibWeb/CSS/Transformation.cpp b/Libraries/LibWeb/CSS/Transformation.cpp
index e3e72293069..06410238f98 100644
--- a/Libraries/LibWeb/CSS/Transformation.cpp
+++ b/Libraries/LibWeb/CSS/Transformation.cpp
@@ -1,6 +1,7 @@
 /*
  * Copyright (c) 2020-2022, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2024-2025, Bastiaan van der Plaat <bastiaan.v.d.plaat@gmail.com>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -25,6 +26,13 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
             context.length_resolution_context = Length::ResolutionContext::for_layout_node(paintable_box->layout_node());
 
         return m_values[index].visit(
+            [&](CSS::AngleOrCalculated const& value) -> ErrorOr<float> {
+                if (!value.is_calculated())
+                    return value.value().to_radians();
+                if (auto resolved = value.resolved(context); resolved.has_value())
+                    return resolved->to_radians();
+                return Error::from_string_literal("Transform contains non absolute units");
+            },
             [&](CSS::LengthPercentage const& value) -> ErrorOr<float> {
                 context.percentage_basis = Length::make_px(reference_length);
 
@@ -34,20 +42,17 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
                     if (auto const& length = value.length(); length.is_absolute())
                         return length.absolute_length_to_px().to_float();
                 }
-                return Error::from_string_literal("Transform contains non absolute units");
-            },
-            [&](CSS::AngleOrCalculated const& value) -> ErrorOr<float> {
-                if (auto resolved = value.resolved(context); resolved.has_value())
-                    return resolved->to_radians();
-                if (!value.is_calculated())
-                    return value.value().to_radians();
+                if (value.is_calculated() && value.calculated()->resolves_to_length()) {
+                    if (auto const& resolved = value.calculated()->resolve_length(context); resolved->is_absolute())
+                        return resolved->absolute_length_to_px().to_float();
+                }
                 return Error::from_string_literal("Transform contains non absolute units");
             },
             [&](CSS::NumberPercentage const& value) -> ErrorOr<float> {
-                if (value.is_percentage())
-                    return value.percentage().as_fraction();
                 if (value.is_number())
                     return value.number().value();
+                if (value.is_percentage())
+                    return value.percentage().as_fraction();
                 if (value.is_calculated()) {
                     if (value.calculated()->resolves_to_number())
                         return value.calculated()->resolve_number(context).value();
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/geometry/DOMMatrix-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/geometry/DOMMatrix-001.txt
index 3adc93db209..3d283fc30c9 100644
--- a/Tests/LibWeb/Text/expected/wpt-import/css/geometry/DOMMatrix-001.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/geometry/DOMMatrix-001.txt
@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 126 tests
 
-122 Pass
-4 Fail
+124 Pass
+2 Fail
 Pass	new DOMMatrix()
 Pass	new DOMMatrix(undefined)
 Pass	new DOMMatrix(new DOMMatrix())
@@ -23,7 +23,7 @@ Pass	new DOMMatrix(sequence) 6 elements
 Pass	new DOMMatrix("scale(2) translateX(5px) translateY(5px)")
 Pass	new DOMMatrix("scale(2, 2) translateX(5px) translateY(5px)")
 Pass	new DOMMatrix("scale(2)translateX(5px)translateY(5px)")
-Fail	new DOMMatrix("scale(2) translateX(calc(2 * 2.5px)) translateY(5px)")
+Pass	new DOMMatrix("scale(2) translateX(calc(2 * 2.5px)) translateY(5px)")
 Pass	new DOMMatrix("scale(2) translateX(5px) translateY(5px) rotate(5deg) rotate(-5deg)")
 Pass	new DOMMatrix("translateX    (5px)")
 Pass	new DOMMatrix("scale(2 2) translateX(5) translateY(5)")
@@ -86,7 +86,7 @@ Pass	new DOMMatrixReadOnly(sequence) 6 elements
 Pass	new DOMMatrixReadOnly("scale(2) translateX(5px) translateY(5px)")
 Pass	new DOMMatrixReadOnly("scale(2, 2) translateX(5px) translateY(5px)")
 Pass	new DOMMatrixReadOnly("scale(2)translateX(5px)translateY(5px)")
-Fail	new DOMMatrixReadOnly("scale(2) translateX(calc(2 * 2.5px)) translateY(5px)")
+Pass	new DOMMatrixReadOnly("scale(2) translateX(calc(2 * 2.5px)) translateY(5px)")
 Pass	new DOMMatrixReadOnly("scale(2) translateX(5px) translateY(5px) rotate(5deg) rotate(-5deg)")
 Pass	new DOMMatrixReadOnly("translateX    (5px)")
 Pass	new DOMMatrixReadOnly("scale(2 2) translateX(5) translateY(5)")