LibWeb: Allow transform calculated length properties

Author: https://github.com/bplaat
Commit: b99f4872d1
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4543
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/gmta

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");
+                if (value.is_calculated() && value.calculated()->resolves_to_length()) {
-            },
+                    if (auto const& resolved = value.calculated()->resolve_length(context); resolved->is_absolute())
-            [&](CSS::AngleOrCalculated const& value) -> ErrorOr<float> {
+                        return resolved->absolute_length_to_px().to_float();
-                if (auto resolved = value.resolved(context); resolved.has_value())
+                }
-                    return resolved->to_radians();
-                if (!value.is_calculated())
-                    return value.value().to_radians();
                 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();

Tests/LibWeb/Text/expected/wpt-import/css/geometry/DOMMatrix-001.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 126 tests
 
-122 Pass
+124 Pass
-4 Fail
+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)")