LibWeb: Parse the animation-timeline CSS property

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

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -539,6 +539,7 @@ Parser::ParseErrorOr<NonnullRefPtr<StyleValue const>> Parser::parse_css_value(Pr
     case PropertyID::AnimationIterationCount:
     case PropertyID::AnimationName:
     case PropertyID::AnimationPlayState:
+    case PropertyID::AnimationTimeline:
     case PropertyID::AnimationTimingFunction:
         return parse_all_as(tokens, [this, property_id](auto& tokens) { return parse_simple_comma_separated_value_list(property_id, tokens); });
     case PropertyID::BackdropFilter:
@@ -1202,7 +1203,9 @@ RefPtr<StyleValue const> Parser::parse_aspect_ratio_value(TokenStream<ComponentV
 RefPtr<StyleValue const> Parser::parse_animation_value(TokenStream<ComponentValue>& tokens)
 {
     // [<'animation-duration'> || <easing-function> || <'animation-delay'> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>]#
-    // FIXME: Support <single-animation-timeline>
+    // NB: While it isn't in the spec the CSSWG resolved to include `animation-timeline` as a reset-only sub-property
+    //     of the `animation` shorthand so we shouldn't actually allow <single-animation-timeline>.
+    //     https://github.com/w3c/csswg-drafts/issues/6946#issuecomment-1233190360
 
     Vector<PropertyID> longhand_ids {
         PropertyID::AnimationDuration,
@@ -1216,7 +1219,7 @@ RefPtr<StyleValue const> Parser::parse_animation_value(TokenStream<ComponentValu
     };
 
     // FIXME: The animation-trigger properties are reset-only sub-properties of the animation shorthand.
-    return parse_coordinating_value_list_shorthand(tokens, PropertyID::Animation, longhand_ids);
+    return parse_coordinating_value_list_shorthand(tokens, PropertyID::Animation, longhand_ids, { PropertyID::AnimationTimeline });
 }
 
 RefPtr<StyleValue const> Parser::parse_background_value(TokenStream<ComponentValue>& tokens)

Libraries/LibWeb/CSS/Properties.json

@@ -232,7 +232,8 @@
       "animation-direction",
       "animation-fill-mode",
       "animation-play-state",
-      "animation-name"
+      "animation-name",
+      "animation-timeline"
     ]
   },
   "animation-composition": {
@@ -338,6 +339,21 @@
       "paused"
     ]
   },
+  "animation-timeline": {
+    "affects-layout": false,
+    "animation-type": "none",
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "dashed-ident"
+    ],
+    "valid-identifiers": [
+      "auto",
+      "none"
+    ],
+    "__comment": "FIXME: animation properties should be coordinating-lists, FIXME: support scroll() and view() functions",
+    "multiplicity": "single"
+  },
   "animation-timing-function": {
     "affects-layout": false,
     "animation-type": "none",

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -229,7 +229,7 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
         return ""_string;
     }
     case PropertyID::Animation:
-        return coordinating_value_list_shorthand_to_string("none"sv);
+        return coordinating_value_list_shorthand_to_string("none"sv, {}, { PropertyID::AnimationTimeline });
     case PropertyID::Background: {
         auto color = longhand(PropertyID::BackgroundColor);
         auto image = longhand(PropertyID::BackgroundImage);