RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 17:17:45 +00:00
Code Issues Activity Actions

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
6 changed files with 117 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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