Adding CSS data for Scroll-driven animations spec (#669)

* Adding CSS data for Scroll-driven animations spec * attempt to fix linting error * attempt to fix linting error * attempt to fix linting error * Update for recent change to animation-timeline syntax * Adding timeline-scope, removing *-timeline-attachment, adding dashed-ident * update horizontal and vertical to x and y * Update l10n/css.json Co-authored-by: Brian Thomas Smith <[email protected]> * Update l10n/css.json Co-authored-by: Brian Thomas Smith <[email protected]> * Making fixes according to bsmth comments --------- Co-authored-by: Brian Thomas Smith <[email protected]>
mdn · Jun 20, 2023 · fba5d21 · fba5d21
1 parent 4f74b57
commit fba5d21
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 12 deletions.
diff --git a/css/functions.json b/css/functions.json
@@ -456,6 +456,14 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleZ"
   },
+  "scroll()": {
+    "syntax": "scroll([<axis> || <scroller>]?)",
+    "groups": [
+      "CSS Animations"
+    ],
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timeline/scroll"
+  },
   "skew()": {
     "syntax": "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )",
     "groups": [
@@ -557,5 +565,13 @@
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/var"
+  },
+  "view()": {
+    "syntax": "view([<axis> || <'view-timeline-inset'>]?)",
+    "groups": [
+      "CSS Animations"
+    ],
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timeline/view"
   }
 }
diff --git a/css/properties.json b/css/properties.json
@@ -1803,7 +1803,7 @@
       "animation-play-state",
       "animation-timeline"
     ],
-    "appliesto": "allElementsAndPseudos",
+    "appliesto": "allElements",
     "computed": [
       "animation-name",
       "animation-duration",
@@ -1815,7 +1815,7 @@
       "animation-play-state",
       "animation-timeline"
     ],
-    "order": "orderOfAppearance",
+    "order": "perGrammar",
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation"
   },
@@ -1947,6 +1947,63 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-play-state"
   },
+  "animation-range": {
+    "syntax": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "appliesto": "allElements",
+    "computed": [
+      "animation-range-start",
+      "animation-range-end"
+    ],
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range"
+  },
+  "animation-range-end": {
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "normal",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range-end"
+  },
+  "animation-range-start": {
+    "syntax": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "normal",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-range-start"
+  },
   "animation-timing-function": {
     "syntax": "<easing-function>#",
     "media": "visual",
@@ -1975,7 +2032,7 @@
     "initial": "auto",
     "appliesto": "allElements",
     "computed": "listEachItemIdentifierOrNoneAuto",
-    "order": "uniqueOrder",
+    "order": "perGrammar",
     "status": "experimental",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/animation-timeline"
   },
@@ -8762,7 +8819,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type-y"
   },
   "scroll-timeline": {
-    "syntax": "[<'scroll-timeline-name'> <'scroll-timeline-axis'>?]#",
+    "syntax": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
     "media": "visual",
     "inherited": false,
     "animationType": [
@@ -8787,7 +8844,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline"
   },
   "scroll-timeline-axis": {
-    "syntax": "[ block | inline | vertical | horizontal ]#",
+    "syntax": "[ block | inline | x | y ]#",
     "media": "interactive",
     "inherited": false,
     "animationType": "notAnimatable",
@@ -8803,7 +8860,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-axis"
   },
   "scroll-timeline-name": {
-    "syntax": "none | <custom-ident>#",
+    "syntax": "none | <dashed-ident>#",
     "media": "interactive",
     "inherited": false,
     "animationType": "notAnimatable",
@@ -8813,7 +8870,7 @@
     ],
     "initial": "none",
     "appliesto": "scrollContainers",
-    "computed": "asSpecified",
+    "computed": "noneOrOrderedListOfIdentifiers",
     "order": "perGrammar",
     "status": "experimental",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-name"
@@ -9351,6 +9408,22 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/text-underline-position"
   },
+  "timeline-scope": {
+    "syntax": "none | <dashed-ident>#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElements",
+    "computed": "noneOrOrderedListOfIdentifiers",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/timeline-scope"
+  },
   "top": {
     "syntax": "<length> | <percentage> | auto",
     "media": "visual",
@@ -9609,6 +9682,79 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/vertical-align"
   },
+  "view-timeline": {
+    "syntax": "[ <'view-timeline-name'> <'view-timeline-axis'>? ]#",
+    "media": "visual",
+    "inherited": false,
+    "animationType": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "appliesto": "allElements",
+    "computed": [
+      "view-timeline-name",
+      "view-timeline-axis"
+    ],
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline"
+  },
+  "view-timeline-axis": {
+    "syntax": "[ block | inline | x | y ]#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "block",
+    "appliesto": "allElements",
+    "computed": "asSpecified",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-axis"
+  },
+  "view-timeline-inset": {
+    "syntax": "[ [ auto | <length-percentage> ]{1,2} ]#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "byComputedValueType",
+    "percentages": "relativeToCorrespondingDimensionOfRelevantScrollport",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "auto",
+    "appliesto": "allElements",
+    "computed": "listEachItemConsistingOfPairsOfAutoOrLengthPercentage",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-inset"
+  },
+  "view-timeline-name": {
+    "syntax": "none | <dashed-ident>#",
+    "media": "interactive",
+    "inherited": false,
+    "animationType": "notAnimatable",
+    "percentages": "no",
+    "groups": [
+      "CSS Animations"
+    ],
+    "initial": "none",
+    "appliesto": "allElements",
+    "computed": "noneOrOrderedListOfIdentifiers",
+    "order": "perGrammar",
+    "status": "experimental",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/view-timeline-name"
+  },
   "view-transition-name": {
     "syntax": "none | <custom-ident>",
     "media": "visual",

diff --git a/css/properties.schema.json b/css/properties.schema.json
@@ -83,9 +83,11 @@
         "regardingHeightOfGeneratedBoxContainingBlockPercentagesNone",
         "regardingHeightOfGeneratedBoxContainingBlockPercentagesRelativeToContainingBlock",
         "relativeToBackgroundPositioningArea",
+        "relativeToCorrespondingDimensionOfRelevantScrollport",
         "relativeToMaskBorderImageArea",
         "relativeToScrollContainerPaddingBoxAxis",
         "relativeToTheScrollContainersScrollport",
+        "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline",
         "relativeToWidthAndHeight"
       ]
     },
@@ -134,6 +136,8 @@
         "keywordPlusIntegerIfDigits",
         "lengthAbsolutePercentageAsSpecifiedOtherwiseAuto",
         "listEachItemConsistingOfAbsoluteLengthPercentageAndOrigin",
+        "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage",
+        "listEachItemConsistingOfPairsOfAutoOrLengthPercentage",
         "listEachItemHasTwoKeywordsOnePerDimension",
         "listEachItemIdentifierOrNoneAuto",
         "listEachItemTwoKeywordsOriginOffsets",

diff --git a/css/syntaxes.json b/css/syntaxes.json
@@ -402,7 +402,7 @@
     "syntax": "<keyframe-block>+"
   },
   "keyframe-selector": {
-    "syntax": "from | to | <percentage>"
+    "syntax": "from | to | <percentage> | <timeline-range-name> <percentage>"
   },
   "lab()": {
     "syntax": "lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
@@ -692,6 +692,9 @@
   "scaleZ()": {
     "syntax": "scaleZ( [ <number> | <percentage> ] )"
   },
+  "scroll()": {
+    "syntax": "scroll([<axis> || <scroller>]?)"
+  },
   "scroller": {
     "syntax": "root | nearest"
   },
@@ -735,7 +738,7 @@
     "syntax": "sin( <calc-sum> )"
   },
   "single-animation": {
-    "syntax": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]"
+    "syntax": "<'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>"
   },
   "single-animation-direction": {
     "syntax": "normal | reverse | alternate | alternate-reverse"
@@ -750,7 +753,7 @@
     "syntax": "running | paused"
   },
   "single-animation-timeline": {
-    "syntax": "auto | none | <timeline-name> | scroll(<axis>? <scroller>?)"
+    "syntax": "auto | none | <dashed-ident> | <scroll()> | <view()>"
   },
   "single-transition": {
     "syntax": "[ none | <single-transition-property> ] || <time> || <easing-function> || <time>"
@@ -809,8 +812,8 @@
   "time-percentage": {
     "syntax": "<time> | <percentage>"
   },
-  "timeline-name": {
-    "syntax": "<custom-ident> | <string>"
+  "timeline-range-name": {
+    "syntax": "cover | contain | entry | exit | entry-crossing | exit-crossing"
   },
   "easing-function": {
     "syntax": "linear | <cubic-bezier-timing-function> | <step-timing-function>"
@@ -857,6 +860,9 @@
   "var()": {
     "syntax": "var( <custom-property-name> , <declaration-value>? )"
   },
+  "view()": {
+    "syntax": "view([<axis> || <'view-timeline-inset'>]?)"
+  },
   "viewport-length": {
     "syntax": "auto | <length-percentage>"
   },

diff --git a/css/types.json b/css/types.json
@@ -54,6 +54,14 @@
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/custom-ident"
   },
+  "dashed-ident": {
+    "groups": [
+      "CSS Animations",
+      "CSS Types"
+    ],
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/dashed-ident"
+  },
   "dimension": {
     "groups": [
       "CSS Types"

diff --git a/l10n/css.json b/l10n/css.json
@@ -919,6 +919,12 @@
     "ja": "絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。",
     "ru": "Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово"
   },
+  "listEachItemConsistingOfNormalLengthPercentageOrNameLengthPercentage": {
+    "en-US": "A list where each item may be 'normal', a length percentage, or a timeline range name and a length percentage"
+  },
+  "listEachItemConsistingOfPairsOfAutoOrLengthPercentage": {
+    "en-US": "A list where each item may be either 'auto' or a length percentage"
+  },
   "listEachItemHasTwoKeywordsOnePerDimension": {
     "de": "eine Liste, wobei jedes Element aus zwei Schlüsselwörtern besteht, eins pro Dimension",
     "en-US": "a list, each item consisting of two keywords, one per dimension",
@@ -1430,6 +1436,9 @@
     "ja": "背景配置領域に対する相対値",
     "ru": "относительно области позиционирования фона"
   },
+  "relativeToCorrespondingDimensionOfRelevantScrollport": {
+    "en-US": "Relative to the corresponding dimension of the relevant scrollport"
+  },
   "relativeToMaskBorderImageArea": {
     "en-US": "relative to width/height of the mask border image area",
     "ja": "境界マスク画像領域の幅/高さに対する相対値"
@@ -1445,6 +1454,9 @@
     "en-US": "relative to the scroll container's scrollport",
     "ja": "スクロールコンテナーのスクロールポートに対する相対値"
   },
+  "relativeToTimelineRangeIfSpecifiedOtherwiseEntireTimeline": {
+    "en-US": "Relative to the specified named timeline range if specified, otherwise relative to the entire timeline"
+  },
   "relativeToWidthAndHeight": {
     "en-US": "relative to the width and the height of the element's reference box"
   },