LibWeb: Add transform-style and have it make a stacking context

Author: https://github.com/Psychpsyo
Commit: e064fa19d2
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6793
Reviewed-by: https://github.com/gmta ✅

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -756,6 +756,12 @@ TransformOrigin ComputedProperties::transform_origin() const
     return { x_value, y_value, z_value };
 }
 
+TransformStyle ComputedProperties::transform_style() const
+{
+    auto const& value = property(PropertyID::TransformStyle);
+    return keyword_to_transform_style(value.to_keyword()).release_value();
+}
+
 Optional<Color> ComputedProperties::accent_color(Layout::NodeWithStyle const& node) const
 {
     auto const& value = property(PropertyID::AccentColor);

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -207,6 +207,7 @@ public:
     Vector<Transformation> transformations() const;
     TransformBox transform_box() const;
     TransformOrigin transform_origin() const;
+    TransformStyle transform_style() const;
     Optional<Transformation> rotate() const;
     Optional<Transformation> translate() const;
     Optional<Transformation> scale() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -240,6 +240,7 @@ public:
     static TableLayout table_layout() { return TableLayout::Auto; }
     static QuotesData quotes() { return QuotesData { .type = QuotesData::Type::Auto }; }
     static TransformBox transform_box() { return TransformBox::ViewBox; }
+    static TransformStyle transform_style() { return TransformStyle::Flat; }
     static Direction direction() { return Direction::Ltr; }
     static UnicodeBidi unicode_bidi() { return UnicodeBidi::Normal; }
     static WritingMode writing_mode() { return WritingMode::HorizontalTb; }
@@ -634,6 +635,7 @@ public:
     Vector<Transformation> const& transformations() const { return m_noninherited.transformations; }
     TransformBox const& transform_box() const { return m_noninherited.transform_box; }
     TransformOrigin const& transform_origin() const { return m_noninherited.transform_origin; }
+    TransformStyle const& transform_style() const { return m_noninherited.transform_style; }
     Optional<Transformation> const& rotate() const { return m_noninherited.rotate; }
     Optional<Transformation> const& translate() const { return m_noninherited.translate; }
     Optional<Transformation> const& scale() const { return m_noninherited.scale; }
@@ -797,6 +799,7 @@ protected:
         Vector<Transformation> transformations {};
         TransformBox transform_box { InitialValues::transform_box() };
         TransformOrigin transform_origin {};
+        TransformStyle transform_style { InitialValues::transform_style() };
         BoxSizing box_sizing { InitialValues::box_sizing() };
         ContentData content;
         Variant<VerticalAlign, LengthPercentage> vertical_align { InitialValues::vertical_align() };
@@ -996,6 +999,7 @@ public:
     void set_transformations(Vector<Transformation> value) { m_noninherited.transformations = move(value); }
     void set_transform_box(TransformBox value) { m_noninherited.transform_box = value; }
     void set_transform_origin(TransformOrigin value) { m_noninherited.transform_origin = move(value); }
+    void set_transform_style(TransformStyle value) { m_noninherited.transform_style = value; }
     void set_translate(Transformation value) { m_noninherited.translate = move(value); }
     void set_box_sizing(BoxSizing value) { m_noninherited.box_sizing = value; }
     void set_vertical_align(Variant<VerticalAlign, LengthPercentage> value) { m_noninherited.vertical_align = move(value); }

Libraries/LibWeb/CSS/Enums.json

@@ -844,7 +844,11 @@
     "border-box",
     "fill-box",
     "stroke-box",
-    "view-box "
+    "view-box"
+  ],
+  "transform-style": [
+    "flat",
+    "preserve-3d"
   ],
   "transition-behavior": [
     "normal",

Libraries/LibWeb/CSS/Keywords.json

@@ -216,6 +216,7 @@
   "fill-box",
   "fine",
   "fixed",
+  "flat",
   "flex",
   "flex-end",
   "flex-start",
@@ -424,6 +425,7 @@
   "pre-line",
   "pre-wrap",
   "preserve",
+  "preserve-3d",
   "preserve-breaks",
   "preserve-spaces",
   "pretty",

Libraries/LibWeb/CSS/Properties.json

@@ -3847,6 +3847,15 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "transform-style": {
+    "animation-type": "discrete",
+    "inherited": false,
+    "initial": "flat",
+    "valid-identifiers": [
+      "flat",
+      "preserve-3d"
+    ]
+  },
   "transition": {
     "affects-layout": false,
     "inherited": false,

Libraries/LibWeb/Layout/Node.cpp

@@ -295,6 +295,13 @@ bool Node::establishes_stacking_context() const
     if (computed_values.perspective().has_value() || will_change_property(CSS::PropertyID::Perspective))
         return true;
 
+    // https://drafts.csswg.org/css-transforms-2/#transform-style-property
+    // A computed value of 'preserve-3d' for 'transform-style' on a transformable element establishes both a
+    // stacking context and a containing block for all descendants.
+    // FIXME: Check that the element is a transformable element.
+    if (computed_values.transform_style() == CSS::TransformStyle::Preserve3d || will_change_property(CSS::PropertyID::TransformStyle))
+        return true;
+
     return computed_values.opacity() < 1.0f || will_change_property(CSS::PropertyID::Opacity);
 }
 
@@ -694,6 +701,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
     computed_values.set_transform_box(computed_style.transform_box());
     computed_values.set_transform_origin(computed_style.transform_origin());
     computed_values.set_perspective(computed_style.perspective());
+    computed_values.set_transform_style(computed_style.transform_style());
 
     auto const& transition_delay_property = computed_style.property(CSS::PropertyID::TransitionDelay);
     if (transition_delay_property.is_time()) {