LibWeb: Add CSS view-transition-name

Author: https://github.com/Psychpsyo
Commit: c0eb072645
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3605
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -17,6 +17,7 @@
 #include <LibWeb/CSS/StyleValues/ContentStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CounterDefinitionsStyleValue.h>
 #include <LibWeb/CSS/StyleValues/CounterStyleValue.h>
+#include <LibWeb/CSS/StyleValues/CustomIdentStyleValue.h>
 #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridAutoFlowStyleValue.h>
 #include <LibWeb/CSS/StyleValues/GridTemplateAreaStyleValue.h>
@@ -1598,6 +1599,18 @@ MixBlendMode ComputedProperties::mix_blend_mode() const
     return keyword_to_mix_blend_mode(value.to_keyword()).release_value();
 }
 
+Optional<FlyString> ComputedProperties::view_transition_name() const
+{
+    auto const& value = property(PropertyID::ViewTransitionName);
+    if (value.is_custom_ident()) {
+        auto ident = value.as_custom_ident().custom_ident();
+        if (ident == "none"_fly_string)
+            return {};
+        return ident;
+    }
+    return {};
+}
+
 MaskType ComputedProperties::mask_type() const
 {
     auto const& value = property(PropertyID::MaskType);

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -164,6 +164,7 @@ public:
     Isolation isolation() const;
     Containment contain() const;
     MixBlendMode mix_blend_mode() const;
+    Optional<FlyString> view_transition_name() const;
 
     static Vector<Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<Transformation> transformations() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -447,6 +447,7 @@ public:
     CSS::Isolation isolation() const { return m_noninherited.isolation; }
     CSS::Containment const& contain() const { return m_noninherited.contain; }
     CSS::MixBlendMode mix_blend_mode() const { return m_noninherited.mix_blend_mode; }
+    Optional<FlyString> view_transition_name() const { return m_noninherited.view_transition_name; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -702,6 +703,7 @@ protected:
         CSS::Isolation isolation { InitialValues::isolation() };
         CSS::Containment contain { InitialValues::contain() };
         CSS::MixBlendMode mix_blend_mode { InitialValues::mix_blend_mode() };
+        Optional<FlyString> view_transition_name;
 
         Optional<CSS::Transformation> rotate;
         Optional<CSS::Transformation> translate;
@@ -878,6 +880,7 @@ public:
     void set_isolation(CSS::Isolation value) { m_noninherited.isolation = value; }
     void set_contain(CSS::Containment value) { m_noninherited.contain = move(value); }
     void set_mix_blend_mode(CSS::MixBlendMode value) { m_noninherited.mix_blend_mode = value; }
+    void set_view_transition_name(Optional<FlyString> value) { m_noninherited.view_transition_name = value; }
 
     void set_fill(SVGPaint value) { m_inherited.fill = move(value); }
     void set_stroke(SVGPaint value) { m_inherited.stroke = move(value); }

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -404,6 +404,7 @@ private:
     RefPtr<CSSStyleValue> parse_transition_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_translate_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_scale_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue> parse_view_transition_name_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_grid_track_size_list(TokenStream<ComponentValue>&, bool allow_separate_line_name_blocks = false);
     RefPtr<CSSStyleValue> parse_grid_auto_track_sizes(TokenStream<ComponentValue>&);
     RefPtr<GridAutoFlowStyleValue> parse_grid_auto_flow_value(TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -55,6 +55,7 @@
 #include <LibWeb/CSS/StyleValues/TransitionStyleValue.h>
 #include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
 #include <LibWeb/Dump.h>
+#include <LibWeb/Infra/Strings.h>
 
 namespace Web::CSS::Parser {
 
@@ -713,6 +714,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue>> Parser::parse_css_value(Prope
         if (auto parsed_value = parse_scale_value(tokens); parsed_value && !tokens.has_next_token())
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::ViewTransitionName:
+        if (auto parsed_value = parse_view_transition_name_value(tokens); parsed_value && !tokens.has_next_token())
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     default:
         break;
     }
@@ -4438,4 +4443,29 @@ RefPtr<CSSStyleValue> Parser::parse_filter_value_list_value(TokenStream<Componen
     return FilterValueListStyleValue::create(move(filter_value_list));
 }
 
+RefPtr<CSSStyleValue> Parser::parse_view_transition_name_value(TokenStream<ComponentValue>& tokens)
+{
+    // none | <custom-ident>
+    tokens.discard_whitespace();
+    {
+        auto transaction = tokens.begin_transaction();
+
+        // The values 'none' and 'auto' are excluded from <custom-ident> here.
+        // Note: Only auto is excluded here since none isn't parsed differently.
+        auto ident = parse_custom_ident_value(tokens, { "auto"sv });
+        if (!ident)
+            return {};
+
+        tokens.discard_whitespace();
+        transaction.commit();
+
+        if (Infra::is_ascii_case_insensitive_match(ident->custom_ident().to_string(), "none"sv)) {
+            return CustomIdentStyleValue::create("none"_fly_string);
+        } else {
+            return ident;
+        }
+    }
+    return {};
+}
+
 }

Libraries/LibWeb/CSS/Properties.json

@@ -2895,6 +2895,19 @@
       "unitless-length"
     ]
   },
+  "view-transition-name": {
+    "affects-layout": false,
+    "affects-stacking-context": true,
+    "animation-type": "discrete",
+    "inherited": false,
+    "initial": "none",
+    "valid-types": [
+      "custom-ident"
+    ],
+    "valid-identifiers": [
+      "none"
+    ]
+  },
   "visibility": {
     "animation-type": "custom",
     "inherited": true,

Libraries/LibWeb/Layout/Node.cpp

@@ -246,6 +246,13 @@ bool Node::establishes_stacking_context() const
     if (computed_values().mix_blend_mode() != CSS::MixBlendMode::Normal)
         return true;
 
+    // https://drafts.csswg.org/css-view-transitions-1/#named-and-transitioning
+    // Elements captured in a view transition during a view transition or whose view-transition-name computed value is
+    // not 'none' (at any time):
+    // - Form a stacking context.
+    if (computed_values().view_transition_name().has_value())
+        return true;
+
     return computed_values().opacity() < 1.0f;
 }
 
@@ -932,6 +939,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style)
     computed_values.set_user_select(computed_style.user_select());
     computed_values.set_isolation(computed_style.isolation());
     computed_values.set_mix_blend_mode(computed_style.mix_blend_mode());
+    computed_values.set_view_transition_name(computed_style.view_transition_name());
 
     propagate_style_to_anonymous_wrappers();
 

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt

@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '219'
+'length': '220'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -589,6 +589,8 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'user-select': 'auto'
 'verticalAlign': 'baseline'
 'vertical-align': 'baseline'
+'viewTransitionName': 'none'
+'view-transition-name': 'none'
 'visibility': 'visible'
 'whiteSpace': 'normal'
 'white-space': 'normal'

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

@@ -215,10 +215,11 @@ All properties associated with getComputedStyle(document.body):
     "212": "unicode-bidi",
     "213": "user-select",
     "214": "vertical-align",
-    "215": "width",
+    "215": "view-transition-name",
-    "216": "x",
+    "216": "width",
-    "217": "y",
+    "217": "x",
-    "218": "z-index"
+    "218": "y",
+    "219": "z-index"
 }
 All properties associated with document.body.style by default:
 {}

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -213,6 +213,7 @@ translate: none
 unicode-bidi: normal
 user-select: auto
 vertical-align: baseline
+view-transition-name: none
 width: 784px
 x: 0px
 y: 0px