LibWeb: Parse the view-timeline shorthand CSS property

The remaining failing tests in view-timeline-shorthand.html are due to
either:
 a) incorrect tests, see web-platform-tests/wpt#56181 or;
 b) a wider issue where we collapse coordinating value list longhand
properties to a single value when we shouldn't.

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -532,6 +532,7 @@ private:
     RefPtr<StyleValue const> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_grid_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_touch_action_value(TokenStream<ComponentValue>&);
+    RefPtr<StyleValue const> parse_view_timeline_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_white_space_shorthand(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_white_space_trim_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_will_change_value(TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -752,6 +752,8 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
     case PropertyID::ScrollTimelineAxis:
     case PropertyID::ScrollTimelineName:
         return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
+    case PropertyID::ViewTimeline:
+        return parse_all_as(tokens, [this](auto& tokens) { return parse_view_timeline_value(tokens); });
     case PropertyID::ViewTimelineAxis:
     case PropertyID::ViewTimelineInset:
     case PropertyID::ViewTimelineName:
@@ -6347,6 +6349,115 @@ RefPtr<StyleValue const> Parser::parse_white_space_shorthand(TokenStream<Compone
     return make_whitespace_shorthand(white_space_collapse, text_wrap_mode, white_space_trim);
 }
 
+// https://drafts.csswg.org/scroll-animations-1/#view-timeline-shorthand
+RefPtr<StyleValue const> Parser::parse_view_timeline_value(TokenStream<ComponentValue>& tokens)
+{
+    // [ <'view-timeline-name'> [ <'view-timeline-axis'> || <'view-timeline-inset'> ]? ]#
+    StyleValueVector names;
+    StyleValueVector axes;
+    StyleValueVector insets;
+
+    auto transaction = tokens.begin_transaction();
+
+    do {
+        RefPtr<StyleValue const> name;
+        RefPtr<StyleValue const> axis;
+        RefPtr<StyleValue const> inset;
+
+        auto const append_entry = [&]() {
+            VERIFY(name);
+            names.append(name.release_nonnull());
+
+            // FIXME: Use the first entry in property_initial_value() to get the initial values for these longhands once
+            //        we always parse them as lists.
+            if (axis)
+                axes.append(axis.release_nonnull());
+            else
+                axes.append(KeywordStyleValue::create(Keyword::Block));
+
+            if (inset)
+                insets.append(inset.release_nonnull());
+            else
+                insets.append(StyleValueList::create({ KeywordStyleValue::create(Keyword::Auto), KeywordStyleValue::create(Keyword::Auto) }, StyleValueList::Separator::Space));
+        };
+
+        tokens.discard_whitespace();
+
+        auto maybe_name = parse_css_value_for_property(PropertyID::ViewTimelineName, tokens);
+
+        if (!maybe_name)
+            return nullptr;
+
+        name = maybe_name;
+
+        tokens.discard_whitespace();
+
+        if (tokens.next_token().is(Token::Type::Comma)) {
+            tokens.discard_a_token();
+
+            // Disallow trailing commas
+            if (!tokens.has_next_token())
+                return nullptr;
+
+            append_entry();
+            continue;
+        }
+
+        auto remaining_longhands = Vector { PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset };
+
+        while (tokens.has_next_token() && !tokens.next_token().is(Token::Type::Comma)) {
+            tokens.discard_whitespace();
+
+            auto property_and_value = parse_css_value_for_properties(remaining_longhands, tokens);
+
+            if (!property_and_value.has_value())
+                return nullptr;
+
+            remove_property(remaining_longhands, property_and_value->property);
+
+            switch (property_and_value->property) {
+            case PropertyID::ViewTimelineAxis:
+                if (axis)
+                    return nullptr;
+
+                axis = property_and_value->style_value;
+                break;
+            case PropertyID::ViewTimelineInset:
+                if (inset)
+                    return nullptr;
+
+                inset = property_and_value->style_value;
+                break;
+            default:
+                VERIFY_NOT_REACHED();
+            }
+        }
+
+        append_entry();
+
+        if (tokens.next_token().is(Token::Type::Comma)) {
+            tokens.discard_a_token();
+
+            // Disallow trailing commas
+            if (!tokens.has_next_token())
+                return nullptr;
+
+            continue;
+        }
+
+        if (tokens.has_next_token())
+            return nullptr;
+    } while (tokens.has_next_token());
+
+    transaction.commit();
+
+    return ShorthandStyleValue::create(PropertyID::ViewTimeline,
+        { PropertyID::ViewTimelineName, PropertyID::ViewTimelineAxis, PropertyID::ViewTimelineInset },
+        { StyleValueList::create(move(names), StyleValueList::Separator::Comma),
+            StyleValueList::create(move(axes), StyleValueList::Separator::Comma),
+            StyleValueList::create(move(insets), StyleValueList::Separator::Comma) });
+}
+
 // https://drafts.csswg.org/css-will-change/#will-change
 RefPtr<StyleValue const> Parser::parse_will_change_value(TokenStream<ComponentValue>& tokens)
 {

Libraries/LibWeb/CSS/Properties.json

@@ -4013,6 +4013,17 @@
       "unitless-length"
     ]
   },
+  "view-timeline": {
+    "affects-layout": false,
+    "inherited": false,
+    "initial": "none",
+    "multiplicity": "coordinating-list",
+    "longhands": [
+      "view-timeline-name",
+      "view-timeline-axis",
+      "view-timeline-inset"
+    ]
+  },
   "view-timeline-axis": {
     "affects-layout": false,
     "animation-type": "none",

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -849,6 +849,36 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
     }
     case PropertyID::Transition:
         return coordinating_value_list_shorthand_to_string("all"sv);
+    case PropertyID::ViewTimeline: {
+        // FIXME: We can use coordinating_value_list_shorthand_to_string function once parse_comma_separated_value_list
+        //        always returns a list, currently it doesn't properly handle the fact that the entries for
+        //        view-timeline-inset are themselves StyleValueLists
+        StringBuilder builder;
+
+        auto const& name_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineName));
+        auto const& axis_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineAxis));
+        auto const& inset_values = style_value_as_value_list(longhand(PropertyID::ViewTimelineInset));
+
+        if (name_values.size() != axis_values.size())
+            return ""_string;
+
+        for (size_t i = 0; i < name_values.size(); i++) {
+            if (!builder.is_empty())
+                builder.append(", "sv);
+
+            builder.append(name_values[i]->to_string(mode));
+
+            if (axis_values[i]->to_keyword() != Keyword::Block)
+                builder.appendff(" {}", axis_values[i]->to_string(mode));
+
+            auto stringified_inset = inset_values[i]->to_string(mode);
+
+            if (stringified_inset != "auto"sv)
+                builder.appendff(" {}", stringified_inset);
+        }
+
+        return builder.to_string_without_validation();
+    }
     case PropertyID::WhiteSpace: {
         auto white_space_collapse_property = longhand(PropertyID::WhiteSpaceCollapse);
         auto text_wrap_mode_property = longhand(PropertyID::TextWrapMode);