LibWeb: Fix incomplete plumbing for individual rotate CSS property

Author: https://github.com/awesomekling
Commit: 6836d4edb1
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2506
Reviewed-by: https://github.com/shannonbooth

Libraries/LibWeb/CSS/ComputedValues.h

@@ -796,7 +796,7 @@ public:
     void set_justify_items(CSS::JustifyItems value) { m_noninherited.justify_items = value; }
     void set_justify_self(CSS::JustifySelf value) { m_noninherited.justify_self = value; }
     void set_box_shadow(Vector<ShadowData>&& value) { m_noninherited.box_shadow = move(value); }
-    void set_rotate(CSS::Transformation value) { m_noninherited.rotate = value; }
+    void set_rotate(CSS::Transformation value) { m_noninherited.rotate = move(value); }
     void set_transformations(Vector<CSS::Transformation> value) { m_noninherited.transformations = move(value); }
     void set_transform_box(CSS::TransformBox value) { m_noninherited.transform_box = value; }
     void set_transform_origin(CSS::TransformOrigin value) { m_noninherited.transform_origin = value; }

Libraries/LibWeb/Layout/Node.cpp

@@ -82,6 +82,8 @@ bool Node::can_contain_boxes_with_position_absolute() const
     // Any computed value other than none for the transform affects containing block and stacking context
     if (!computed_values().transformations().is_empty())
         return true;
+    if (computed_values().rotate().has_value())
+        return true;
 
     return false;
 }
@@ -175,6 +177,9 @@ bool Node::establishes_stacking_context() const
     if (!computed_values().transformations().is_empty())
         return true;
 
+    if (computed_values().rotate().has_value())
+        return true;
+
     // Element that is a child of a flex container, with z-index value other than auto.
     if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
         return true;
@@ -710,7 +715,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     computed_values.set_box_shadow(computed_style.box_shadow(*this));
 
     if (auto rotate_value = computed_style.rotate(*this); rotate_value.has_value())
-        computed_values.set_rotate(rotate_value.value());
+        computed_values.set_rotate(rotate_value.release_value());
 
     computed_values.set_transformations(computed_style.transformations());
     if (auto transform_box = computed_style.transform_box(); transform_box.has_value())

Libraries/LibWeb/Layout/Node.h

@@ -178,7 +178,14 @@ public:
     // https://www.w3.org/TR/CSS22/visuren.html#positioning-scheme
     bool is_in_flow() const { return !is_out_of_flow(); }
 
-    bool has_css_transform() const { return computed_values().transformations().size() > 0; }
+    [[nodiscard]] bool has_css_transform() const
+    {
+        if (!computed_values().transformations().is_empty())
+            return true;
+        if (computed_values().rotate().has_value())
+            return true;
+        return false;
+    }
 
 protected:
     Node(DOM::Document&, DOM::Node*);

Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -1128,8 +1128,11 @@ void PaintableBox::resolve_paint_properties()
     set_box_shadow_data(move(resolved_box_shadow_data));
 
     auto const& transformations = computed_values.transformations();
-    if (!transformations.is_empty()) {
+    auto const& rotate = computed_values.rotate();
+    if (!transformations.is_empty() || rotate.has_value()) {
         auto matrix = Gfx::FloatMatrix4x4::identity();
+        if (rotate.has_value())
+            matrix = matrix * rotate->to_matrix(*this).release_value();
         for (auto const& transform : transformations)
             matrix = matrix * transform.to_matrix(*this).release_value();
         set_transform(matrix);

Libraries/LibWeb/Painting/PaintableBox.h

@@ -129,7 +129,14 @@ public:
         return m_overflow_data->has_scrollable_overflow;
     }
 
-    bool has_css_transform() const { return computed_values().transformations().size() > 0; }
+    [[nodiscard]] bool has_css_transform() const
+    {
+        if (!computed_values().transformations().is_empty())
+            return true;
+        if (computed_values().rotate().has_value())
+            return true;
+        return false;
+    }
 
     [[nodiscard]] Optional<CSSPixelRect> scrollable_overflow_rect() const
     {