LibWeb: Add missing CSS Transforms Module Level 2 functions

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp

@@ -79,6 +79,7 @@ namespace Web::CSS {
 enum class TransformFunctionParameterType {
     Angle,
     Length,
+    LengthNone,
     LengthPercentage,
     Number,
     NumberPercentage
@@ -180,6 +181,8 @@ TransformFunctionMetadata transform_function_metadata(TransformFunction transfor
                 parameter_type = "Angle"sv;
             else if (parameter_type_name == "length"sv)
                 parameter_type = "Length"sv;
+            else if (parameter_type_name == "length-none"sv)
+                parameter_type = "LengthNone"sv;
             else if (parameter_type_name == "length-percentage"sv)
                 parameter_type = "LengthPercentage"sv;
             else if (parameter_type_name == "number"sv)

Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt

@@ -1,6 +1,9 @@
 none => none
 matrix(1, 2, 3, 4, 5, 6) => matrix(1, 2, 3, 4, 5, 6)
 matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16) => matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)
+perspective(none) => matrix(1, 0, 0, 1, 0, 0)
+perspective(0) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1, 0, 0, 0, 1)
+perspective(4cm) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.006614303216338158, 0, 0, 0, 1)
 translate(1%, 2px) => matrix(1, 0, 0, 1, 7.828125, 2)
 translate3d(1%, 2px, 3em) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 7.828125, 2, 48, 1)
 translateX(1px) => matrix(1, 0, 0, 1, 1, 0)
@@ -11,10 +14,15 @@ scaleX(2) => matrix(2, 0, 0, 1, 0, 0)
 scaleX(200%) => matrix(2, 0, 0, 1, 0, 0)
 scaleY(2.5) => matrix(1, 0, 0, 2.5, 0, 0)
 scaleY(250%) => matrix(1, 0, 0, 2.5, 0, 0)
+scaleZ(1.5) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1)
+scaleZ(150%) => matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1)
+scale3d(1, 2, 1.5) => matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1)
+scale3d(100%, 200%, 150%) => matrix3d(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 1)
 rotate(1deg) => matrix(0.9998477101325989, 0.017452405765652657, -0.017452405765652657, 0.9998477101325989, 0, 0)
 rotateX(1rad) => matrix3d(1, 0, 0, 0, 0, 0.5403022766113281, 0.8414709568023682, 0, 0, -0.8414709568023682, 0.5403022766113281, 0, 0, 0, 0, 1)
 rotateY(1grad) => matrix3d(0.9998766183853149, 0, -0.015707317739725113, 0, 0, 1, 0, 0, 0.015707317739725113, 0, 0.9998766183853149, 0, 0, 0, 0, 1)
 rotateZ(1turn) => matrix(1, 1.7484555314695172e-7, -1.7484555314695172e-7, 1, 0, 0)
+rotate3d(0, 1, 0, 45rad) => matrix3d(0.5253219604492188, 0, -0.8509035110473633, 0, 0, 1, 0, 0, 0.8509035110473633, 0, 0.5253219604492188, 0, 0, 0, 0, 1)
 skew(1deg, 1rad) => matrix(1, 1.5574077367782593, 0.01745506562292576, 1, 0, 0)
 skewX(1deg) => matrix(1, 0, 0.01745506562292576, 1, 0, 0)
 skewY(1rad) => matrix(1, 1.5574077367782593, 0, 1, 0, 0)

Tests/LibWeb/Text/input/css/getComputedStyle-transform.html

@@ -13,6 +13,9 @@
             "none",
             "matrix(1, 2, 3, 4, 5, 6)",
             "matrix3d(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16)",
+            "perspective(none)",
+            "perspective(0)",
+            "perspective(4cm)",
             "translate(1%, 2px)",
             "translate3d(1%, 2px, 3em)",
             "translateX(1px)",
@@ -23,10 +26,15 @@
             "scaleX(200%)",
             "scaleY(2.5)",
             "scaleY(250%)",
+            "scaleZ(1.5)",
+            "scaleZ(150%)",
+            "scale3d(1, 2, 1.5)",
+            "scale3d(100%, 200%, 150%)",
             "rotate(1deg)",
             "rotateX(1rad)",
             "rotateY(1grad)",
             "rotateZ(1turn)",
+            "rotate3d(0, 1, 0, 45rad)",
             "skew(1deg, 1rad)",
             "skewX(1deg)",
             "skewY(1rad)",

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -5130,10 +5130,20 @@ RefPtr<StyleValue> Parser::parse_transform_value(TokenStream<ComponentValue>& to
                 }
                 break;
             }
-            case TransformFunctionParameterType::Length: {
+            case TransformFunctionParameterType::Length:
+            case TransformFunctionParameterType::LengthNone: {
                 if (maybe_calc_value && maybe_calc_value->resolves_to_length()) {
                     values.append(maybe_calc_value.release_nonnull());
                 } else {
+                    if (function_metadata.parameters[argument_index].type == TransformFunctionParameterType::LengthNone) {
+                        auto identifier_value = parse_identifier_value(value);
+                        if (identifier_value && identifier_value->to_identifier() == ValueID::None) {
+                            values.append(identifier_value.release_nonnull());
+                            argument_index++;
+                            continue;
+                        }
+                    }
+
                     auto dimension_value = parse_dimension_value(value);
                     if (!dimension_value)
                         return nullptr;

Userland/Libraries/LibWeb/CSS/TransformFunctions.json

@@ -95,6 +95,14 @@
       }
     ]
   },
+  "perspective": {
+    "parameters": [
+      {
+        "type": "<length-none>",
+        "required": true
+      }
+    ]
+  },
   "translate": {
     "parameters": [
       {
@@ -159,6 +167,22 @@
       }
     ]
   },
+  "scale3d": {
+    "parameters": [
+      {
+        "type": "<number-percentage>",
+        "required": true
+      },
+      {
+        "type": "<number-percentage>",
+        "required": true
+      },
+      {
+        "type": "<number-percentage>",
+        "required": true
+      }
+    ]
+  },
   "scaleX": {
     "parameters": [
       {
@@ -175,6 +199,14 @@
       }
     ]
   },
+  "scaleZ": {
+    "parameters": [
+      {
+        "type": "<number-percentage>",
+        "required": true
+      }
+    ]
+  },
   "rotate": {
     "parameters": [
       {
@@ -183,6 +215,26 @@
       }
     ]
   },
+  "rotate3d": {
+    "parameters": [
+      {
+        "type": "<number>",
+        "required": true
+      },
+      {
+        "type": "<number>",
+        "required": true
+      },
+      {
+        "type": "<number>",
+        "required": true
+      },
+      {
+        "type": "<angle>",
+        "required": true
+      }
+    ]
+  },
   "rotateX": {
     "parameters": [
       {

Userland/Libraries/LibWeb/CSS/Transformation.cpp

@@ -51,6 +51,23 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
     }
 
     switch (m_function) {
+    case CSS::TransformFunction::Perspective:
+        // https://drafts.csswg.org/css-transforms-2/#perspective
+        // Count is zero when null parameter
+        if (count == 1) {
+            // FIXME: Add support for the 'perspective-origin' CSS property.
+            auto distance = TRY(value(0));
+            return Gfx::FloatMatrix4x4(1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, -1 / (distance <= 0 ? 1 : distance), 1);
+        } else {
+            return Gfx::FloatMatrix4x4(1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, 1, 0,
+                0, 0, 0, 1);
+        }
+        break;
     case CSS::TransformFunction::Matrix:
         if (count == 6)
             return Gfx::FloatMatrix4x4(TRY(value(0)), TRY(value(2)), 0, TRY(value(4)),
@@ -116,6 +133,13 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         break;
+    case CSS::TransformFunction::Scale3d:
+        if (count == 3)
+            return Gfx::FloatMatrix4x4(TRY(value(0)), 0, 0, 0,
+                0, TRY(value(1)), 0, 0,
+                0, 0, TRY(value(2)), 0,
+                0, 0, 0, 1);
+        break;
     case CSS::TransformFunction::ScaleX:
         if (count == 1)
             return Gfx::FloatMatrix4x4(TRY(value(0)), 0, 0, 0,
@@ -130,6 +154,17 @@ ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::Painta
                 0, 0, 1, 0,
                 0, 0, 0, 1);
         break;
+    case CSS::TransformFunction::ScaleZ:
+        if (count == 1)
+            return Gfx::FloatMatrix4x4(1, 0, 0, 0,
+                0, 1, 0, 0,
+                0, 0, TRY(value(0)), 0,
+                0, 0, 0, 1);
+        break;
+    case CSS::TransformFunction::Rotate3d:
+        if (count == 4)
+            return Gfx::rotation_matrix({ TRY(value(0)), TRY(value(1)), TRY(value(2)) }, TRY(value(3)));
+        break;
     case CSS::TransformFunction::RotateX:
         if (count == 1)
             return Gfx::rotation_matrix({ 1.0f, 0.0f, 0.0f }, TRY(value(0)));