LibWeb: Parse the view-timeline-inset CSS property

Author: https://github.com/Calme1709
Commit: e093c76eea
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6912
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -443,6 +443,8 @@ private:
     RefPtr<StyleValue const> parse_time_value(TokenStream<ComponentValue>&);
     RefPtr<StyleValue const> parse_time_percentage_value(TokenStream<ComponentValue>&);
 
+    RefPtr<StyleValue const> parse_view_timeline_inset_value(TokenStream<ComponentValue>&);
+
     using ParseFunction = AK::Function<RefPtr<StyleValue const>(TokenStream<ComponentValue>&)>;
     RefPtr<StyleValue const> parse_comma_separated_value_list(TokenStream<ComponentValue>&, ParseFunction);
     RefPtr<StyleValue const> parse_simple_comma_separated_value_list(PropertyID, TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -254,6 +254,8 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
         return parsed.release_value();
     if (auto parsed = parse_for_type(ValueType::Url); parsed.has_value())
         return parsed.release_value();
+    if (auto parsed = parse_for_type(ValueType::ViewTimelineInset); parsed.has_value())
+        return parsed.release_value();
 
     // <integer>/<number> come before <length>, so that 0 is not interpreted as a <length> in case both are allowed.
     if (auto property = any_property_accepts_type(property_ids, ValueType::Integer); property.has_value()) {
@@ -751,6 +753,7 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
     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::ViewTimelineAxis:
+    case PropertyID::ViewTimelineInset:
     case PropertyID::ViewTimelineName:
         return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
     case PropertyID::WhiteSpace:

Libraries/LibWeb/CSS/Parser/ValueParsing.cpp

@@ -1377,6 +1377,43 @@ RefPtr<StyleValue const> Parser::parse_time_percentage_value(TokenStream<Compone
     return nullptr;
 }
 
+// https://drafts.csswg.org/scroll-animations-1/#view-timeline-inset
+RefPtr<StyleValue const> Parser::parse_view_timeline_inset_value(TokenStream<ComponentValue>& tokens)
+{
+    // [ [ auto | <length-percentage> ]{1,2} ]
+    auto transaction = tokens.begin_transaction();
+
+    StyleValueVector inset_values;
+
+    while (tokens.has_next_token() && inset_values.size() < 2) {
+        tokens.discard_whitespace();
+
+        if (tokens.next_token().is_ident("auto"sv)) {
+            tokens.discard_a_token(); // auto
+            inset_values.append(KeywordStyleValue::create(Keyword::Auto));
+            continue;
+        }
+
+        if (auto length_percentage = parse_length_percentage_value(tokens)) {
+            inset_values.append(length_percentage.release_nonnull());
+            continue;
+        }
+
+        break;
+    }
+
+    if (inset_values.is_empty())
+        return nullptr;
+
+    transaction.commit();
+
+    // If the second value is omitted, it is set to the first.
+    if (inset_values.size() == 1)
+        return StyleValueList::create({ inset_values[0], inset_values[0] }, StyleValueList::Separator::Space);
+
+    return StyleValueList::create(move(inset_values), StyleValueList::Separator::Space);
+}
+
 RefPtr<StyleValue const> Parser::parse_keyword_value(TokenStream<ComponentValue>& tokens)
 {
     tokens.discard_whitespace();
@@ -5049,6 +5086,8 @@ RefPtr<StyleValue const> Parser::parse_value(ValueType value_type, TokenStream<C
         return parse_transform_list_value(tokens);
     case ValueType::Url:
         return parse_url_value(tokens);
+    case ValueType::ViewTimelineInset:
+        return parse_view_timeline_inset_value(tokens);
     }
     VERIFY_NOT_REACHED();
 }

Libraries/LibWeb/CSS/Properties.json

@@ -4023,6 +4023,17 @@
     ],
     "multiplicity": "coordinating-list"
   },
+  "view-timeline-inset": {
+    "affects-layout": false,
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "view-timeline-inset"
+    ],
+    "percentages-resolve-to": "length",
+    "multiplicity": "coordinating-list"
+  },
   "view-timeline-name": {
     "affects-layout": false,
     "animation-type": "none",

Libraries/LibWeb/CSS/ValueType.cpp

@@ -79,6 +79,8 @@ Optional<ValueType> value_type_from_string(StringView string)
         return ValueType::TransformList;
     if (string.equals_ignoring_ascii_case("url"sv))
         return ValueType::Url;
+    if (string.equals_ignoring_ascii_case("view-timeline-inset"sv))
+        return ValueType::ViewTimelineInset;
     return {};
 }
 
@@ -157,6 +159,8 @@ StringView value_type_to_string(ValueType value_type)
         return "TransformList"sv;
     case Web::CSS::ValueType::Url:
         return "Url"sv;
+    case Web::CSS::ValueType::ViewTimelineInset:
+        return "ViewTimelineInset"sv;
     }
 
     VERIFY_NOT_REACHED();

Libraries/LibWeb/CSS/ValueType.h

@@ -49,6 +49,7 @@ enum class ValueType : u8 {
     TransformFunction,
     TransformList,
     Url,
+    ViewTimelineInset
 };
 
 StringView value_type_to_string(ValueType);