diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp index 590bbda82b1..f4e787a84e8 100644 --- a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp +++ b/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) diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt index 265d8c7ff5b..3b005942ddd 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt +++ b/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) diff --git a/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html b/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html index b0327c8dcf4..a64da1cffb5 100644 --- a/Tests/LibWeb/Text/input/css/getComputedStyle-transform.html +++ b/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)", diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp index f867328e7d6..38f22237d11 100644 --- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -5130,10 +5130,20 @@ RefPtr Parser::parse_transform_value(TokenStream& 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; diff --git a/Userland/Libraries/LibWeb/CSS/TransformFunctions.json b/Userland/Libraries/LibWeb/CSS/TransformFunctions.json index 6b71a3cc9a2..48595d62223 100644 --- a/Userland/Libraries/LibWeb/CSS/TransformFunctions.json +++ b/Userland/Libraries/LibWeb/CSS/TransformFunctions.json @@ -95,6 +95,14 @@ } ] }, + "perspective": { + "parameters": [ + { + "type": "", + "required": true + } + ] + }, "translate": { "parameters": [ { @@ -159,6 +167,22 @@ } ] }, + "scale3d": { + "parameters": [ + { + "type": "", + "required": true + }, + { + "type": "", + "required": true + }, + { + "type": "", + "required": true + } + ] + }, "scaleX": { "parameters": [ { @@ -175,6 +199,14 @@ } ] }, + "scaleZ": { + "parameters": [ + { + "type": "", + "required": true + } + ] + }, "rotate": { "parameters": [ { @@ -183,6 +215,26 @@ } ] }, + "rotate3d": { + "parameters": [ + { + "type": "", + "required": true + }, + { + "type": "", + "required": true + }, + { + "type": "", + "required": true + }, + { + "type": "", + "required": true + } + ] + }, "rotateX": { "parameters": [ { diff --git a/Userland/Libraries/LibWeb/CSS/Transformation.cpp b/Userland/Libraries/LibWeb/CSS/Transformation.cpp index 88b65e3646d..f5363dad2a8 100644 --- a/Userland/Libraries/LibWeb/CSS/Transformation.cpp +++ b/Userland/Libraries/LibWeb/CSS/Transformation.cpp @@ -51,6 +51,23 @@ ErrorOr Transformation::to_matrix(Optional Transformation::to_matrix(Optional Transformation::to_matrix(Optional