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

Author: Psychpsyo

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 @@ class WEB_API ComputedProperties final : public JS::Cell {
     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 @@ class InitialValues {
     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 @@ class ComputedValues {
     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 @@ class ComputedValues {
         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 @@ class MutableComputedValues final : public ComputedValues {
     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()) {

Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform-lime-square-ref.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        background: lime;
+      }
+    </style>
+  </head>
+  <body>
+    <div></div>
+  </body>
+</html>

Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform-style-stacking-context.html

@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<title>'transform-style: preserve-3d' establishes a stacking context.</title>
+<link rel="author" title="Psychpsyo" href="mailto:psychpsyo@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property">
+<link rel="match" href="../../../../expected/wpt-import/css/css-transforms/transform-lime-square-ref.html">
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+  }
+  #front {
+    background-color: lime;
+    /* makes a stacking context and puts this on top */
+    position: absolute;
+    z-index: 10;
+  }
+  #back {
+    transform-style: preserve-3d;
+  }
+  #notOnTop {
+    background-color: red;
+    /* z-index is higher than on #front, but this should still be covered up because it is inside #back, which has 'transform-style: preserve-3d' */
+    position: absolute;
+    z-index: 1000;
+  }
+</style>
+<div id="front"></div>
+<div id="back">
+  <div id="notOnTop"></div>
+</div>

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -276,6 +276,7 @@ All properties associated with getComputedStyle(document.body):
     "transform",
     "transform-box",
     "transform-origin",
+    "transform-style",
     "transition-behavior",
     "transition-delay",
     "transition-duration",