diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp index c5afa882103..373ddbfc246 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.cpp +++ b/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 ComputedProperties::accent_color(Layout::NodeWithStyle const& node) const { auto const& value = property(PropertyID::AccentColor); diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h index 4d035676b89..7003b6cf067 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.h +++ b/Libraries/LibWeb/CSS/ComputedProperties.h @@ -207,6 +207,7 @@ public: Vector transformations() const; TransformBox transform_box() const; TransformOrigin transform_origin() const; + TransformStyle transform_style() const; Optional rotate() const; Optional translate() const; Optional scale() const; diff --git a/Libraries/LibWeb/CSS/ComputedValues.h b/Libraries/LibWeb/CSS/ComputedValues.h index d8e9d62e2b3..e2a5327dcd0 100644 --- a/Libraries/LibWeb/CSS/ComputedValues.h +++ b/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 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 const& rotate() const { return m_noninherited.rotate; } Optional const& translate() const { return m_noninherited.translate; } Optional const& scale() const { return m_noninherited.scale; } @@ -797,6 +799,7 @@ protected: Vector 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 vertical_align { InitialValues::vertical_align() }; @@ -996,6 +999,7 @@ public: void set_transformations(Vector 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 value) { m_noninherited.vertical_align = move(value); } diff --git a/Libraries/LibWeb/CSS/Enums.json b/Libraries/LibWeb/CSS/Enums.json index 32909689b85..d4542c97cb1 100644 --- a/Libraries/LibWeb/CSS/Enums.json +++ b/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", diff --git a/Libraries/LibWeb/CSS/Keywords.json b/Libraries/LibWeb/CSS/Keywords.json index 1c1d5f693e7..e764db9bd34 100644 --- a/Libraries/LibWeb/CSS/Keywords.json +++ b/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", diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index 68e18294b45..78efa10222c 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/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, diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index b092dbbf764..740a8221bef 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/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()) { diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform-lime-square-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform-lime-square-ref.html new file mode 100644 index 00000000000..b3b7e3575d6 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-transforms/transform-lime-square-ref.html @@ -0,0 +1,17 @@ + + + + CSS Reftest Reference + + + + +
+ + diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform-style-stacking-context.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform-style-stacking-context.html new file mode 100644 index 00000000000..a530a2daf05 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-transforms/transform-style-stacking-context.html @@ -0,0 +1,30 @@ + +'transform-style: preserve-3d' establishes a stacking context. + + + + +
+
+
+
diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt index 9701f2d1c84..e24d7e0a88a 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt +++ b/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", diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt index 4bd96d4f85d..5751ba83aa5 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt +++ b/Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt @@ -773,6 +773,8 @@ All supported properties and their default values exposed from CSSStylePropertie 'transform-box': 'view-box' 'transformOrigin': '50% 50% 0px' 'transform-origin': '50% 50% 0px' +'transformStyle': 'flat' +'transform-style': 'flat' 'transition': 'all' 'transitionBehavior': 'normal' 'transition-behavior': 'normal' diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index 4a48f8cf407..505b72670ec 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -274,6 +274,7 @@ touch-action: auto transform: none transform-box: view-box transform-origin: 50% 50% 0px +transform-style: flat transition-behavior: normal transition-delay: 0s transition-duration: 0s diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt index 1ba2c100b91..010e3bbf88f 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt @@ -1,8 +1,8 @@ Harness status: OK -Found 270 tests +Found 271 tests -264 Pass +265 Pass 6 Fail Pass accent-color Pass border-collapse @@ -258,6 +258,7 @@ Pass touch-action Fail transform Pass transform-box Pass transform-origin +Pass transform-style Pass transition-behavior Pass transition-delay Pass transition-duration