LibWeb: Parse the animation-timeline CSS property

Author: Calme1709

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);

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

@@ -87,6 +87,7 @@ All properties associated with getComputedStyle(document.body):
     "animation-iteration-count",
     "animation-name",
     "animation-play-state",
+    "animation-timeline",
     "animation-timing-function",
     "appearance",
     "aspect-ratio",

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

@@ -177,6 +177,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'animation-name': 'none'
 'animationPlayState': 'running'
 'animation-play-state': 'running'
+'animationTimeline': 'auto'
+'animation-timeline': 'auto'
 'animationTimingFunction': 'ease'
 'animation-timing-function': 'ease'
 'appearance': 'none'

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

@@ -85,6 +85,7 @@ animation-fill-mode: none
 animation-iteration-count: 1
 animation-name: none
 animation-play-state: running
+animation-timeline: auto
 animation-timing-function: ease
 appearance: none
 aspect-ratio: auto
@@ -99,7 +100,7 @@ background-position-x: 0%
 background-position-y: 0%
 background-repeat: repeat
 background-size: auto
-block-size: 1515px
+block-size: 1530px
 border-block-end-color: rgb(0, 0, 0)
 border-block-end-style: none
 border-block-end-width: 0px
@@ -185,7 +186,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: none
 grid-template-rows: none
-height: 2805px
+height: 2820px
 inline-size: 784px
 inset-block-end: auto
 inset-block-start: auto

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/parsing/animation-shorthand.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 36 tests
 
-25 Pass
-11 Fail
+28 Pass
+8 Fail
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-delay
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-direction
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-duration
@@ -13,7 +13,7 @@ Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-play-state
 Fail	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-range-end
 Fail	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-range-start
-Fail	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timeline
+Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timeline
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timing-function
 Pass	e.style['animation'] = "anim paused both reverse 4 1s -3s cubic-bezier(0, -2, 1, 3)" should not set unrelated longhands
 Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-delay
@@ -25,7 +25,7 @@ Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0,
 Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-play-state
 Fail	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-range-end
 Fail	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-range-start
-Fail	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timeline
+Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timeline
 Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should set animation-timing-function
 Pass	e.style['animation'] = "anim paused both reverse, 4 1s -3s cubic-bezier(0, -2, 1, 3)" should not set unrelated longhands
 Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-delay
@@ -37,6 +37,6 @@ Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused bot
 Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-play-state
 Fail	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-range-end
 Fail	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-range-start
-Fail	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-timeline
+Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-timeline
 Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should set animation-timing-function
 Pass	e.style['animation'] = "4 1s -3s cubic-bezier(0, -2, 1, 3), anim paused both reverse" should not set unrelated longhands

Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 277 tests
+Found 278 tests
 
-271 Pass
+272 Pass
 6 Fail
 Pass	accent-color
 Pass	border-collapse
@@ -86,6 +86,7 @@ Pass	animation-fill-mode
 Pass	animation-iteration-count
 Pass	animation-name
 Pass	animation-play-state
+Pass	animation-timeline
 Pass	animation-timing-function
 Pass	appearance
 Pass	aspect-ratio

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/animation-shorthand.txt

@@ -0,0 +1,33 @@
+Harness status: OK
+
+Found 27 tests
+
+14 Pass
+13 Fail
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim" should set the property value
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim initial" should not set the property value
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim 2000" should not set the property value
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim scroll()" should not set the property value
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim view()" should not set the property value
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim --timeline" should not set the property value
+Pass	Property animation value '1s linear 1s 2 reverse forwards paused anim'
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-delay
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-direction
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-duration
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-fill-mode
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-iteration-count
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-name
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-play-state
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-range-end
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-range-start
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-timeline
+Fail	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should set animation-timing-function
+Pass	e.style['animation'] = "1s linear 1s 2 reverse forwards paused anim1,\n   1s linear 1s 2 reverse forwards paused anim2,\n   1s linear 1s 2 reverse forwards paused anim3" should not set unrelated longhands
+Pass	Animation shorthand can not represent non-initial timelines (specified)
+Pass	Animation shorthand can not represent non-initial timelines (computed)
+Fail	Animation shorthand can not represent non-initial animation-range-start (specified)
+Fail	Animation shorthand can not represent non-initial animation-range-start (computed)
+Fail	Animation shorthand can not represent non-initial animation-range-end (specified)
+Fail	Animation shorthand can not represent non-initial animation-range-end (computed)
+Pass	Animation shorthand can not be represented with same list length (specified)
+Pass	Animation shorthand can be represented with same list length (computed)

Tests/LibWeb/Text/expected/wpt-import/scroll-animations/css/animation-timeline-computed.txt

@@ -0,0 +1,50 @@
+Harness status: OK
+
+Found 44 tests
+
+13 Pass
+31 Fail
+Pass	Property animation-timeline value 'initial'
+Pass	Property animation-timeline value 'inherit'
+Pass	Property animation-timeline value 'unset'
+Pass	Property animation-timeline value 'revert'
+Pass	Property animation-timeline value 'auto'
+Pass	Property animation-timeline value 'none'
+Fail	Property animation-timeline value 'auto, auto'
+Fail	Property animation-timeline value 'none, none'
+Pass	Property animation-timeline value 'auto, none'
+Pass	Property animation-timeline value 'none, auto'
+Pass	Property animation-timeline value '--test'
+Pass	Property animation-timeline value '--test1, --test2'
+Pass	Property animation-timeline value '--test1, --test2, none, --test3, auto'
+Pass	The animation-timeline property shows up in CSSStyleDeclaration enumeration
+Pass	The animation-timeline property shows up in CSSStyleDeclaration.cssText
+Fail	Property animation-timeline value 'scroll()'
+Fail	Property animation-timeline value 'scroll(block)'
+Fail	Property animation-timeline value 'scroll(inline)'
+Fail	Property animation-timeline value 'scroll(x)'
+Fail	Property animation-timeline value 'scroll(y)'
+Fail	Property animation-timeline value 'scroll(root)'
+Fail	Property animation-timeline value 'scroll(nearest)'
+Fail	Property animation-timeline value 'scroll(self)'
+Fail	Property animation-timeline value 'scroll(self), scroll(nearest)'
+Fail	Property animation-timeline value 'scroll(inline nearest)'
+Fail	Property animation-timeline value 'scroll(nearest inline)'
+Fail	Property animation-timeline value 'scroll(block self)'
+Fail	Property animation-timeline value 'scroll(self block)'
+Fail	Property animation-timeline value 'scroll(y root)'
+Fail	Property animation-timeline value 'view()'
+Fail	Property animation-timeline value 'view(block)'
+Fail	Property animation-timeline value 'view(inline)'
+Fail	Property animation-timeline value 'view(x)'
+Fail	Property animation-timeline value 'view(y)'
+Fail	Property animation-timeline value 'view(y 1px)'
+Fail	Property animation-timeline value 'view(1px auto)'
+Fail	Property animation-timeline value 'view(auto 1px)'
+Fail	Property animation-timeline value 'view(y 1px auto)'
+Fail	Property animation-timeline value 'view(1px y)'
+Fail	Property animation-timeline value 'view(y auto)'
+Fail	Property animation-timeline value 'view(y auto auto)'
+Fail	Property animation-timeline value 'view(10% 10px)'
+Fail	Property animation-timeline value 'view(auto calc(1% + 1px))'
+Fail	Property animation-timeline value 'view(2em calc(1% + 1em))'