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

LibWeb: Add DOMMatrix string constructor and set matrix value

Browse source
This commit is contained in:
Bastiaan van der Plaat 2024-01-06 18:05:21 +01:00 • committed by Andreas Kling
parent 903d3c92c8
commit be7538961b
15 changed files with 336 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -357,7 +357,7 @@ RefPtr<StyleValue const> ResolvedCSSStyleDeclaration::style_value_for_property(L
VERIFY(layout_node.paintable());
auto const& paintable_box = verify_cast<Painting::PaintableBox const>(*layout_node.paintable());
for (auto transformation : transformations) {
transform = transform * transformation.to_matrix(paintable_box);
transform = transform * transformation.to_matrix(paintable_box).release_value();
}
// https://drafts.csswg.org/css-transforms-1/#2d-matrix

15
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -405,17 +405,15 @@ Optional<CSS::JustifySelf> StyleProperties::justify_self() const
return value_id_to_justify_self(value->to_identifier());
}
Vector<CSS::Transformation> StyleProperties::transformations() const
Vector<CSS::Transformation> StyleProperties::transformations_for_style_value(StyleValue const& value)
{
auto value = property(CSS::PropertyID::Transform);
if (value->is_identifier() && value->to_identifier() == CSS::ValueID::None)
if (value.is_identifier() && value.to_identifier() == CSS::ValueID::None)
return {};
if (!value->is_value_list())
if (!value.is_value_list())
return {};
auto& list = value->as_value_list();
auto& list = value.as_value_list();
Vector<CSS::Transformation> transformations;
@ -456,6 +454,11 @@ Vector<CSS::Transformation> StyleProperties::transformations() const
return transformations;
}
Vector<CSS::Transformation> StyleProperties::transformations() const
{
return transformations_for_style_value(property(CSS::PropertyID::Transform));
}
static Optional<LengthPercentage> length_percentage_for_style_value(StyleValue const& value)
{
if (value.is_length())

1
Userland/Libraries/LibWeb/CSS/StyleProperties.h
View file

@ -117,6 +117,7 @@ public:
CSS::PositionStyleValue const& object_position() const;
Optional<CSS::TableLayout> table_layout() const;
static Vector<CSS::Transformation> transformations_for_style_value(StyleValue const& value);
Vector<CSS::Transformation> transformations() const;
CSS::TransformOrigin transform_origin() const;

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

@ -6,7 +6,6 @@
*/
#include "Transformation.h"
#include <LibWeb/Layout/Node.h>
#include <LibWeb/Painting/PaintableBox.h>
namespace Web::CSS {
@ -17,62 +16,74 @@ Transformation::Transformation(TransformFunction function, Vector<TransformValue
{
}
Gfx::FloatMatrix4x4 Transformation::to_matrix(Painting::PaintableBox const& paintable_box) const
ErrorOr<Gfx::FloatMatrix4x4> Transformation::to_matrix(Optional<Painting::PaintableBox const&> paintable_box) const
{
auto count = m_values.size();
auto value = [&](size_t index, CSSPixels const& reference_length = 0) -> float {
auto value = [&](size_t index, CSSPixels const& reference_length = 0) -> ErrorOr<float> {
return m_values[index].visit(
[&](CSS::LengthPercentage const& value) -> double {
return value.resolved(paintable_box.layout_node(), reference_length).to_px(paintable_box.layout_node()).to_float();
[&](CSS::LengthPercentage const& value) -> ErrorOr<float> {
if (paintable_box.has_value())
return value.resolved(paintable_box->layout_node(), reference_length).to_px(paintable_box->layout_node()).to_float();
if (value.is_length())
return value.length().absolute_length_to_px().to_float();
return Error::from_string_literal("Transform contains non absolute units");
},
[&](CSS::AngleOrCalculated const& value) {
return AK::to_radians(value.resolved(paintable_box.layout_node()).to_degrees());
[&](CSS::AngleOrCalculated const& value) -> ErrorOr<float> {
if (paintable_box.has_value())
return value.resolved(paintable_box->layout_node()).to_radians();
if (!value.is_calculated())
return value.value().to_radians();
return Error::from_string_literal("Transform contains non absolute units");
},
[](double value) {
[](double value) -> ErrorOr<float> {
return value;
});
};
auto reference_box = paintable_box.absolute_rect();
auto width = reference_box.width();
auto height = reference_box.height();
CSSPixels width = 1;
CSSPixels height = 1;
if (paintable_box.has_value()) {
auto reference_box = paintable_box->absolute_rect();
width = reference_box.width();
height = reference_box.height();
}
switch (m_function) {
case CSS::TransformFunction::Matrix:
if (count == 6)
return Gfx::FloatMatrix4x4(value(0), value(2), 0, value(4),
value(1), value(3), 0, value(5),
return Gfx::FloatMatrix4x4(TRY(value(0)), TRY(value(2)), 0, TRY(value(4)),
TRY(value(1)), TRY(value(3)), 0, TRY(value(5)),
0, 0, 1, 0,
0, 0, 0, 1);
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));
return Gfx::FloatMatrix4x4(TRY(value(0)), TRY(value(4)), TRY(value(8)), TRY(value(12)),
TRY(value(1)), TRY(value(5)), TRY(value(9)), TRY(value(13)),
TRY(value(2)), TRY(value(6)), TRY(value(10)), TRY(value(14)),
TRY(value(3)), TRY(value(7)), TRY(value(11)), TRY(value(15)));
break;
case CSS::TransformFunction::Translate:
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
return Gfx::FloatMatrix4x4(1, 0, 0, TRY(value(0, width)),
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
if (count == 2)
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
0, 1, 0, value(1, height),
return Gfx::FloatMatrix4x4(1, 0, 0, TRY(value(0, width)),
0, 1, 0, TRY(value(1, height)),
0, 0, 1, 0,
0, 0, 0, 1);
break;
case CSS::TransformFunction::Translate3d:
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
0, 1, 0, value(1, height),
0, 0, 1, value(2),
return Gfx::FloatMatrix4x4(1, 0, 0, TRY(value(0, width)),
0, 1, 0, TRY(value(1, height)),
0, 0, 1, TRY(value(2)),
0, 0, 0, 1);
break;
case CSS::TransformFunction::TranslateX:
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
return Gfx::FloatMatrix4x4(1, 0, 0, TRY(value(0, width)),
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
@ -80,7 +91,7 @@ Gfx::FloatMatrix4x4 Transformation::to_matrix(Painting::PaintableBox const& pain
case CSS::TransformFunction::TranslateY:
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
0, 1, 0, value(0, height),
0, 1, 0, TRY(value(0, height)),
0, 0, 1, 0,
0, 0, 0, 1);
break;
@ -88,24 +99,24 @@ Gfx::FloatMatrix4x4 Transformation::to_matrix(Painting::PaintableBox const& pain
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, value(0),
0, 0, 1, TRY(value(0)),
0, 0, 0, 1);
break;
case CSS::TransformFunction::Scale:
if (count == 1)
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
0, value(0), 0, 0,
return Gfx::FloatMatrix4x4(TRY(value(0)), 0, 0, 0,
0, TRY(value(0)), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
if (count == 2)
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
0, value(1), 0, 0,
return Gfx::FloatMatrix4x4(TRY(value(0)), 0, 0, 0,
0, TRY(value(1)), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
break;
case CSS::TransformFunction::ScaleX:
if (count == 1)
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
return Gfx::FloatMatrix4x4(TRY(value(0)), 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
@ -113,38 +124,38 @@ Gfx::FloatMatrix4x4 Transformation::to_matrix(Painting::PaintableBox const& pain
case CSS::TransformFunction::ScaleY:
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
0, value(0), 0, 0,
0, TRY(value(0)), 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
break;
case CSS::TransformFunction::RotateX:
if (count == 1)
return Gfx::rotation_matrix({ 1.0f, 0.0f, 0.0f }, value(0));
return Gfx::rotation_matrix({ 1.0f, 0.0f, 0.0f }, TRY(value(0)));
break;
case CSS::TransformFunction::RotateY:
if (count == 1)
return Gfx::rotation_matrix({ 0.0f, 1.0f, 0.0f }, value(0));
return Gfx::rotation_matrix({ 0.0f, 1.0f, 0.0f }, TRY(value(0)));
break;
case CSS::TransformFunction::Rotate:
case CSS::TransformFunction::RotateZ:
if (count == 1)
return Gfx::rotation_matrix({ 0.0f, 0.0f, 1.0f }, value(0));
return Gfx::rotation_matrix({ 0.0f, 0.0f, 1.0f }, TRY(value(0)));
break;
case CSS::TransformFunction::Skew:
if (count == 1)
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
return Gfx::FloatMatrix4x4(1, tanf(TRY(value(0))), 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
if (count == 2)
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
tanf(value(1)), 1, 0, 0,
return Gfx::FloatMatrix4x4(1, tanf(TRY(value(0))), 0, 0,
tanf(TRY(value(1))), 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
break;
case CSS::TransformFunction::SkewX:
if (count == 1)
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
return Gfx::FloatMatrix4x4(1, tanf(TRY(value(0))), 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
@ -152,7 +163,7 @@ Gfx::FloatMatrix4x4 Transformation::to_matrix(Painting::PaintableBox const& pain
case CSS::TransformFunction::SkewY:
if (count == 1)
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
tanf(value(0)), 1, 0, 0,
tanf(TRY(value(0))), 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
break;

5
Userland/Libraries/LibWeb/CSS/Transformation.h
View file

@ -20,7 +20,10 @@ using TransformValue = Variant<AngleOrCalculated, LengthPercentage, double>;
class Transformation {
public:
Transformation(TransformFunction function, Vector<TransformValue>&& values);
Gfx::FloatMatrix4x4 to_matrix(Painting::PaintableBox const&) const;
TransformFunction function() const { return m_function; }
ErrorOr<Gfx::FloatMatrix4x4> to_matrix(Optional<Painting::PaintableBox const&>) const;
private:
TransformFunction m_function;