RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 02:47:35 +00:00
Code Issues Activity Actions

LibWeb: Implement matrix3d transform function from css-transforms-2

Browse source
This commit is contained in:
Luke Wilde 2022-10-01 01:57:54 +01:00 • committed by Andreas Kling
parent 0fdd924db2
commit dbe12662b8
3 changed files with 13 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -458,6 +458,9 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
VERIFY(layout_node.paintable()); VERIFY(layout_node.paintable());
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(layout_node.paintable()); auto const& paintable_box = verify_cast<Painting::PaintableBox const>(layout_node.paintable());
VERIFY(paintable_box->stacking_context()); VERIFY(paintable_box->stacking_context());
// FIXME: This needs to serialize to matrix3d if the transformation matrix is a 3D matrix.
// https://w3c.github.io/csswg-drafts/css-transforms-2/#serialization-of-the-computed-value
auto affine_matrix = paintable_box->stacking_context()->affine_transform_matrix(); auto affine_matrix = paintable_box->stacking_context()->affine_transform_matrix();
NonnullRefPtrVector<StyleValue> parameters; NonnullRefPtrVector<StyleValue> parameters;

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

@ -2,6 +2,9 @@
"matrix": { "matrix": {
"parameters": "<number>{6}" "parameters": "<number>{6}"
}, },
"matrix3d": {
"parameters": "<number>{16}"
},
"translate": { "translate": {
"parameters": "<length-percentage>{1,2}" "parameters": "<length-percentage>{1,2}"
}, },

7
Userland/Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -199,6 +199,13 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 0, 1); 0, 0, 0, 1);
break; break;
case CSS::TransformFunction::Matrix3d:
if (count == 16)
return Gfx::FloatMatrix4x4(value(0), value(4), value(8), value(12),
value(1), value(5), value(9), value(13),
value(2), value(6), value(10), value(14),
value(3), value(7), value(11), value(15));
break;
case CSS::TransformFunction::Translate: case CSS::TransformFunction::Translate:
if (count == 1) if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width), return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),