From b5ab961e20acb5b53f8b6078cbc39d81d9061980 Mon Sep 17 00:00:00 2001
From: Sam Atkins <atkinssj@serenityos.org>
Date: Thu, 14 Jul 2022 17:45:23 +0100
Subject: [PATCH] LibWeb: Add proper support for Angle parameters in transform
 functions

Also, made the `reference_length` parameter optional for the lambda that
extracts transform-function parameters, since it is only needed to
resolve `LengthPercentage` parameters.
---
 .../Libraries/LibWeb/CSS/ComputedValues.h     |  4 ++-
 .../Libraries/LibWeb/CSS/StyleProperties.cpp  |  4 +--
 .../LibWeb/Painting/StackingContext.cpp       | 26 +++++++++++--------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
index 561c13dd18..5debf16965 100644
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -82,9 +82,11 @@ public:
     float width { 0 };
 };
 
+using TransformValue = Variant<CSS::Angle, CSS::LengthPercentage, float>;
+
 struct Transformation {
     CSS::TransformFunction function;
-    Vector<Variant<CSS::LengthPercentage, float>> values;
+    Vector<TransformValue> values;
 };
 
 struct TransformOrigin {
diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
index c0a412d3cd..1aa636544b 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -261,7 +261,7 @@ Vector<CSS::Transformation> StyleProperties::transformations() const
         auto& transformation_style_value = it.as_transformation();
         CSS::Transformation transformation;
         transformation.function = transformation_style_value.transform_function();
-        Vector<Variant<CSS::LengthPercentage, float>> values;
+        Vector<TransformValue> values;
         for (auto& transformation_value : transformation_style_value.values()) {
             if (transformation_value.is_length()) {
                 values.append({ transformation_value.to_length() });
@@ -270,7 +270,7 @@ Vector<CSS::Transformation> StyleProperties::transformations() const
             } else if (transformation_value.is_numeric()) {
                 values.append({ transformation_value.to_number() });
             } else if (transformation_value.is_angle()) {
-                values.append({ transformation_value.as_angle().angle().to_degrees() });
+                values.append({ transformation_value.as_angle().angle() });
             } else {
                 dbgln("FIXME: Unsupported value in transform!");
             }
diff --git a/Userland/Libraries/LibWeb/Painting/StackingContext.cpp b/Userland/Libraries/LibWeb/Painting/StackingContext.cpp
index dbdb091b4b..9fd827a260 100644
--- a/Userland/Libraries/LibWeb/Painting/StackingContext.cpp
+++ b/Userland/Libraries/LibWeb/Painting/StackingContext.cpp
@@ -5,6 +5,7 @@
  */
 
 #include <AK/Debug.h>
+#include <AK/ExtraMathConstants.h>
 #include <AK/QuickSort.h>
 #include <AK/StringBuilder.h>
 #include <LibGfx/AffineTransform.h>
@@ -169,10 +170,13 @@ void StackingContext::paint_internal(PaintContext& context) const
 Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformation const& transformation) const
 {
     auto count = transformation.values.size();
-    auto value = [this, transformation](size_t index, CSS::Length& reference) -> float {
+    auto value = [this, transformation](size_t index, Optional<CSS::Length const&> reference_length = {}) -> float {
         return transformation.values[index].visit(
-            [this, reference](CSS::LengthPercentage const& value) {
-                return value.resolved(m_box, reference).to_px(m_box);
+            [this, reference_length](CSS::LengthPercentage const& value) {
+                return value.resolved(m_box, reference_length.value()).to_px(m_box);
+            },
+            [](CSS::Angle const& value) {
+                return value.to_degrees() * static_cast<float>(M_DEG2RAD);
             },
             [](float value) {
                 return value;
@@ -186,8 +190,8 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
     switch (transformation.function) {
     case CSS::TransformFunction::Matrix:
         if (count == 6)
-            return Gfx::FloatMatrix4x4(value(0, width), value(2, width), 0, value(4, width),
-                value(1, height), value(3, height), 0, value(5, height),
+            return Gfx::FloatMatrix4x4(value(0), value(2), 0, value(4),
+                value(1), value(3), 0, value(5),
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         break;
@@ -219,19 +223,19 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
         break;
     case CSS::TransformFunction::Scale:
         if (count == 1)
-            return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0,
-                0, value(0, height), 0, 0,
+            return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
+                0, value(0), 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         if (count == 2)
-            return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0,
-                0, value(0, height), 0, 0,
+            return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
+                0, value(0), 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         break;
     case CSS::TransformFunction::ScaleX:
         if (count == 1)
-            return Gfx::FloatMatrix4x4(value(0, width), 0, 0, 0,
+            return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
                 0, 1, 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1);
@@ -239,7 +243,7 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
     case CSS::TransformFunction::ScaleY:
         if (count == 1)
             return Gfx::FloatMatrix4x4(1, 0, 0, 0,
-                0, value(0, height), 0, 0,
+                0, value(0), 0, 0,
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         break;