mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 17:17:45 +00:00
LibWeb: Add missing CSS Transforms Module Level 2 functions
This commit is contained in:
parent
c443f80137
commit
675b242e84
6 changed files with 117 additions and 1 deletions
|
@ -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;
|
||||
|
|
|
@ -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": [
|
||||
{
|
||||
|
|
|
@ -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)));
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue