beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 15:40:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Add missing CSS Transforms Module Level 2 functions

Browse source
This commit is contained in:
Bastiaan van der Plaat 2024-01-08 18:51:48 +01:00 committed by Andreas Kling
parent c443f80137
commit 675b242e84
Notes: sideshowbarker 2024-07-17 08:45:34 +09:00 
Author: https://github.com/bplaat
Commit: https://github.com/SerenityOS/serenity/commit/675b242e84
Pull-request: https://github.com/SerenityOS/serenity/pull/22601
Reviewed-by: https://github.com/nico
6 changed files with 117 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp
View file

@ -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)

8
Tests/LibWeb/Text/expected/css/getComputedStyle-transform.txt
View file

@ -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)

8
Tests/LibWeb/Text/input/css/getComputedStyle-transform.html
View file

@ -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)",

12
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

@ -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;

52
Userland/Libraries/LibWeb/CSS/TransformFunctions.json
View file

@ -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": [
{

35
Userland/Libraries/LibWeb/CSS/Transformation.cpp
View file

@ -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)));