Implement animation-timeline property and add to animation shorthand

#572

node/ast.d.ts

@@ -504,6 +504,10 @@ export type TokenOrValue =
   | {
       type: "dashed-ident";
       value: String;
+    }
+  | {
+      type: "animation-name";
+      value: AnimationName;
     };
 /**
  * A raw CSS token.
@@ -1114,6 +1118,21 @@ export type Time =
       type: "milliseconds";
       value: number;
     };
+/**
+ * A value for the [animation-name](https://drafts.csswg.org/css-animations/#animation-name) property.
+ */
+export type AnimationName =
+  | {
+      type: "none";
+    }
+  | {
+      type: "ident";
+      value: String;
+    }
+  | {
+      type: "string";
+      value: String;
+    };
 /**
  * A CSS environment variable name.
  */
@@ -1935,6 +1954,12 @@ export type PropertyId =
       property: "animation-fill-mode";
       vendorPrefix: VendorPrefix;
     }
+  | {
+      property: "animation-composition";
+    }
+  | {
+      property: "animation-timeline";
+    }
   | {
       property: "animation";
       vendorPrefix: VendorPrefix;
@@ -3283,6 +3308,14 @@ export type Declaration =
       value: AnimationFillMode[];
       vendorPrefix: VendorPrefix;
     }
+  | {
+      property: "animation-composition";
+      value: AnimationComposition[];
+    }
+  | {
+      property: "animation-timeline";
+      value: AnimationTimeline[];
+    }
   | {
       property: "animation";
       value: Animation[];
@@ -5442,21 +5475,6 @@ export type StepPosition =
   | {
       type: "jump-both";
     };
-/**
- * A value for the [animation-name](https://drafts.csswg.org/css-animations/#animation-name) property.
- */
-export type AnimationName =
-  | {
-      type: "none";
-    }
-  | {
-      type: "ident";
-      value: String;
-    }
-  | {
-      type: "string";
-      value: String;
-    };
 /**
  * A value for the [animation-iteration-count](https://drafts.csswg.org/css-animations/#animation-iteration-count) property.
  */
@@ -5480,6 +5498,49 @@ export type AnimationPlayState = "running" | "paused";
  * A value for the [animation-fill-mode](https://drafts.csswg.org/css-animations/#animation-fill-mode) property.
  */
 export type AnimationFillMode = "none" | "forwards" | "backwards" | "both";
+/**
+ * A value for the [animation-composition](https://drafts.csswg.org/css-animations-2/#animation-composition) property.
+ */
+export type AnimationComposition = "replace" | "add" | "accumulate";
+/**
+ * A value for the [animation-timeline](https://drafts.csswg.org/css-animations-2/#animation-timeline) property.
+ */
+export type AnimationTimeline =
+  | {
+      type: "auto";
+    }
+  | {
+      type: "none";
+    }
+  | {
+      type: "dashed-ident";
+      value: String;
+    }
+  | {
+      type: "scroll";
+      value: ScrollTimeline;
+    }
+  | {
+      type: "view";
+      value: ViewTimeline;
+    };
+/**
+ * A scroll axis, used in the `scroll()` function.
+ */
+export type ScrollAxis = "block" | "inline" | "x" | "y";
+/**
+ * A scroller, used in the `scroll()` function.
+ */
+export type Scroller = "root" | "nearest" | "self";
+/**
+ * A generic value that represents a value with two components, e.g. a border radius.
+ *
+ * When serialized, only a single component will be written if both are equal.
+ *
+ * @minItems 2
+ * @maxItems 2
+ */
+export type Size2DFor_LengthPercentageOrAuto = [LengthPercentageOrAuto, LengthPercentageOrAuto];
 /**
  * An individual [transform function](https://www.w3.org/TR/2019/CR-css-transforms-1-20190214/#two-d-transform-functions).
  */
@@ -8488,6 +8549,32 @@ export interface Transition {
    */
   timingFunction: EasingFunction;
 }
+/**
+ * The [scroll()](https://drafts.csswg.org/scroll-animations-1/#scroll-notation) function.
+ */
+export interface ScrollTimeline {
+  /**
+   * Specifies which axis of the scroll container to use as the progress for the timeline.
+   */
+  axis: ScrollAxis;
+  /**
+   * Specifies which element to use as the scroll container.
+   */
+  scroller: Scroller;
+}
+/**
+ * The [view()](https://drafts.csswg.org/scroll-animations-1/#view-notation) function.
+ */
+export interface ViewTimeline {
+  /**
+   * Specifies which axis of the scroll container to use as the progress for the timeline.
+   */
+  axis: ScrollAxis;
+  /**
+   * Provides an adjustment of the view progress visibility range.
+   */
+  inset: Size2DFor_LengthPercentageOrAuto;
+}
 /**
  * A value for the [animation](https://drafts.csswg.org/css-animations/#animation) shorthand property.
  */
@@ -8520,6 +8607,10 @@ export interface Animation {
    * The current play state of the animation.
    */
   playState: AnimationPlayState;
+  /**
+   * The animation timeline.
+   */
+  timeline: AnimationTimeline;
   /**
    * The easing function for the animation.
    */

scripts/build-prefixes.js

@@ -329,6 +329,7 @@ let mdnFeatures = {
   fontStretchPercentage: mdn.css.properties['font-stretch'].percentage.__compat.support,
   lightDark: mdn.css.types.color['light-dark'].__compat.support,
   accentSystemColor: mdn.css.types.color['system-color'].accentcolor_accentcolortext.__compat.support,
+  animationTimelineShorthand: mdn.css.properties.animation['animation-timeline_included'].__compat.support,
 };
 
 for (let key in mdn.css.types.length) {

src/compat.rs

@@ -11,6 +11,7 @@ pub enum Feature {
   AmharicAbegedeListStyleType,
   AmharicListStyleType,
   AnchorSizeSize,
+  AnimationTimelineShorthand,
   AnyLink,
   AnyPseudo,
   ArabicIndicListStyleType,
@@ -3414,6 +3415,40 @@ impl Feature {
           return false;
         }
       }
+      Feature::AnimationTimelineShorthand => {
+        if let Some(version) = browsers.chrome {
+          if version < 7536640 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.edge {
+          if version < 7536640 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.opera {
+          if version < 5046272 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.samsung {
+          if version < 1507328 {
+            return false;
+          }
+        }
+        if let Some(version) = browsers.android {
+          if version < 7536640 {
+            return false;
+          }
+        }
+        if browsers.firefox.is_some()
+          || browsers.ie.is_some()
+          || browsers.ios_saf.is_some()
+          || browsers.safari.is_some()
+        {
+          return false;
+        }
+      }
       Feature::QUnit => {
         if let Some(version) = browsers.chrome {
           if version < 4128768 {