@webref/css 6.3.3 → 6.3.4

package/css-anchor.json

@@ -6,7 +6,7 @@
   "properties": [
     {
       "name": "anchor-scroll",
-      "value": "none | <dashed-ident>",
+      "value": "none | default | <anchor-element>",
       "initial": "none",
       "appliesTo": "absolutely-positioned elements",
       "inherited": "no",
@@ -22,16 +22,16 @@
           "value": "none"
         },
         {
-          "name": "<dashed-ident>",
-          "prose": "The scroll offsets of the target anchor element with the name given by the <dashed-ident> will be compensated for in positioning and fallback.",
+          "name": "default",
+          "prose": "Behaves as the value of anchor-default on the element.",
           "type": "value",
-          "value": "<dashed-ident>"
+          "value": "default"
         },
         {
-          "name": "implicit",
-          "prose": "The scroll offsets of the implicit anchor element will be compensated for in positioning and fallback.",
+          "name": "<anchor-element>",
+          "prose": "Selects a target anchor element the same as anchor(), which will be compensated for in positioning and fallback.",
           "type": "value",
-          "value": "implicit"
+          "value": "<anchor-element>"
         }
       ],
       "styleDeclaration": [
@@ -154,10 +154,16 @@
         },
         {
           "name": "auto",
-          "prose": "The auto keyword indicates automatic anchor positioning. See for details.",
+          "prose": "The auto and auto-same keywords indicate automatic anchor positioning. See § 2.1.1 Automatic Anchor Positioning for details.",
           "type": "value",
           "value": "auto"
         },
+        {
+          "name": "auto-same",
+          "prose": "The auto and auto-same keywords indicate automatic anchor positioning. See § 2.1.1 Automatic Anchor Positioning for details.",
+          "type": "value",
+          "value": "auto-same"
+        },
         {
           "name": "left",
           "prose": "The physical <anchor-side> keywords (left, right, top, and bottom) are only useful in inset properties corresponding to their corresponding axis: for example, using top and bottom in left or right (or in inset-inline-start if the inline axis is horizontal, etc) results in an invalid anchor query.",
@@ -222,7 +228,7 @@
     {
       "name": "<anchor-side>",
       "type": "type",
-      "value": "auto | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
+      "value": "auto | auto-same | top | left | right | bottom | start | end | self-start | self-end | <percentage> | center"
     },
     {
       "name": "anchor-size()",

package/css-animations.json

@@ -170,6 +170,29 @@
         "animationPlayState"
       ]
     },
+    {
+      "name": "animation-delay",
+      "value": "<time>#",
+      "initial": "0s",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item a duration",
+      "canonicalOrder": "per grammar",
+      "animationType": "not animatable",
+      "values": [
+        {
+          "name": "<time>",
+          "prose": "The <time> defines how long of a delay there is between the start of the animation (when the animation is applied to the element via these properties) and when it begins executing. A delay of 0s (the initial value) means that the animation will execute as soon as it is applied. A negative delay is valid. Similar to a delay of 0s, it means that the animation executes immediately, but is automatically progressed by the absolute value of the delay, as if the animation had started the specified time in the past, and so it appears to start partway through its active duration. If an animation’s keyframes have an implied starting value, the values are taken from the time the animation starts, not some time in the past.",
+          "type": "value",
+          "value": "<time>"
+        }
+      ],
+      "styleDeclaration": [
+        "animation-delay",
+        "animationDelay"
+      ]
+    },
     {
       "name": "animation-fill-mode",
       "value": "<single-animation-fill-mode>#",

package/css-color.json

@@ -1140,7 +1140,7 @@
     {
       "name": "<rectangular-color-space>",
       "type": "type",
-      "value": "srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65"
+      "value": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | lab | oklab | xyz | xyz-d50 | xyz-d65"
     },
     {
       "name": "<polar-color-space>",

package/motion.json

@@ -16,63 +16,6 @@
       "animationType": "by computed value",
       "media": "visual",
       "values": [
-        {
-          "name": "ray()",
-          "value": "ray( [ <angle> && <size> && contain? ] )",
-          "type": "function",
-          "values": [
-            {
-              "name": "<angle>",
-              "prose": "The offset path is a line segment that starts from the position of the box and proceeds in the direction defined by the specified <angle>. As with CSS gradients, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.",
-              "type": "value",
-              "value": "<angle>"
-            },
-            {
-              "name": "<size>",
-              "prose": "Decides the path length used when offset-distance is expressed as a percentage, using the distance to the containing box. For <size> values other than sides, the path length is independent of <angle>. It is defined as: <size> = [ closest-side | closest-corner | farthest-side | farthest-corner | sides ]",
-              "type": "value",
-              "value": "<size>",
-              "values": [
-                {
-                  "name": "closest-side",
-                  "prose": "The perpendicular distance is measured between the initial position and the closest side of the box from it.",
-                  "type": "value",
-                  "value": "closest-side"
-                },
-                {
-                  "name": "closest-corner",
-                  "prose": "The distance is measured between the initial position and the closest corner of the box from it.",
-                  "type": "value",
-                  "value": "closest-corner"
-                },
-                {
-                  "name": "farthest-side",
-                  "prose": "The perpendicular distance is measured between the initial position and the farthest side of the box from it.",
-                  "type": "value",
-                  "value": "farthest-side"
-                },
-                {
-                  "name": "farthest-corner",
-                  "prose": "The distance is measured between the initial position and the farthest corner of the box from it.",
-                  "type": "value",
-                  "value": "farthest-corner"
-                },
-                {
-                  "name": "sides",
-                  "prose": "The distance is measured between the initial position and the intersection of the ray with the box. If the initial position is not within the box, the distance is 0.",
-                  "type": "value",
-                  "value": "sides"
-                }
-              ]
-            },
-            {
-              "name": "contain",
-              "prose": "The used value of offset-distance is clamped so that the box is entirely contained within the path. If no offset-distance would lead to the box being enclosed by the path, the path size is minimally increased so that such an offset-distance exists.",
-              "type": "value",
-              "value": "contain"
-            }
-          ]
-        },
         {
           "name": "none",
           "prose": "No offset path gets created. When offset-path is none, offset-distance and offset-rotate have no effect.",
@@ -112,6 +55,20 @@
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "media": "visual",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "Indicates the initial position is the position of the box specified with position property.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<position>",
+          "prose": "Specifies the initial position, with the the containing block as the positioning area and a dimensionless point (zero-sized box) as the object area.",
+          "type": "value",
+          "value": "<position>"
+        }
+      ],
       "styleDeclaration": [
         "offset-position",
         "offsetPosition"
@@ -180,7 +137,70 @@
   ],
   "atrules": [],
   "selectors": [],
-  "values": [],
+  "values": [
+    {
+      "name": "ray()",
+      "type": "function",
+      "value": "ray( <angle> && <ray-size> && contain? )",
+      "values": [
+        {
+          "name": "<angle>",
+          "prose": "The offset path is a line segment that starts from the initial position and proceeds in the direction defined by the specified <angle>. As with gradient functions, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation. This is also the initial direction.",
+          "type": "value",
+          "value": "<angle>"
+        },
+        {
+          "name": "<ray-size>",
+          "prose": "Specifies the length of the offset path (the distance between the offset-distance: 0% and offset-distance: 100% points) relative to the containing box. Individual keywords are:",
+          "type": "value",
+          "value": "<ray-size>"
+        },
+        {
+          "name": "contain",
+          "prose": "The used value of offset-distance is clamped so that the box is entirely contained within the path. If no offset-distance would lead to the box being enclosed by the path, the path size is minimally increased so that such an offset-distance exists. Not clear what this actually means. See Issue 363.",
+          "type": "value",
+          "value": "contain"
+        }
+      ]
+    },
+    {
+      "name": "<ray-size>",
+      "type": "type",
+      "value": "closest-side | closest-corner | farthest-side | farthest-corner | sides",
+      "values": [
+        {
+          "name": "closest-side",
+          "prose": "The distance from the initial position to whichever side of the containing block is closest.",
+          "type": "value",
+          "value": "closest-side"
+        },
+        {
+          "name": "closest-corner",
+          "prose": "The distance from the initial position to whichever corner of the containing block is closest.",
+          "type": "value",
+          "value": "closest-corner"
+        },
+        {
+          "name": "farthest-side",
+          "prose": "The distance from the initial position to whichever side of the containing block is farthest.",
+          "type": "value",
+          "value": "farthest-side"
+        },
+        {
+          "name": "farthest-corner",
+          "prose": "The distance from the initial position to whichever corner of the containing block is farthest.",
+          "type": "value",
+          "value": "farthest-corner"
+        },
+        {
+          "name": "sides",
+          "prose": "The distance from the initial position to the point where the offset path intersects the containing block’s boundary. If the initial position is on the containing block’s boundary, or outside its bounds entirely, the distance is zero.",
+          "type": "value",
+          "value": "sides"
+        }
+      ]
+    }
+  ],
   "warnings": [
     {
       "msg": "Dangling value",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "6.3.3",
+  "version": "6.3.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"

package/scroll-animations.json

@@ -199,24 +199,9 @@
         "viewTimeline"
       ]
     },
-    {
-      "name": "animation-delay",
-      "value": "[ <'animation-delay-start'> <'animation-delay-end'>? | <timeline-range-name> ]#",
-      "initial": "see individual properties",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "see individual properties",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "styleDeclaration": [
-        "animation-delay",
-        "animationDelay"
-      ]
-    },
     {
       "name": "animation-range",
-      "value": "[ <'animation-delay-start'> <'animation-delay-end'>? | <timeline-range-name> ]#",
+      "value": "[ <'animation-range-start'> <'animation-range-end'>? | <timeline-range-name> ]#",
       "initial": "see individual properties",
       "appliesTo": "see individual properties",
       "inherited": "see individual properties",
@@ -230,61 +215,61 @@
       ]
     },
     {
-      "name": "animation-delay-start",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
-      "initial": "0s",
+      "name": "animation-range-start",
+      "value": "[ normal | <timeline-range-name> <percentage> ]#",
+      "initial": "normal",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "relative to the specified named timeline range",
-      "computedValue": "list, each item either a duration or a timeline range and progress percentage",
+      "computedValue": "list, each item either the keyword normal or a timeline range and progress percentage",
       "canonicalOrder": "per grammar",
       "animatable": "no",
       "values": [
         {
-          "name": "<time>",
-          "prose": "Defines the delay as a duration. See [CSS-ANIMATIONS-1].",
+          "name": "normal",
+          "prose": "The start of the active phase is determined as normal.",
           "type": "value",
-          "value": "<time>"
+          "value": "normal"
         },
         {
           "name": "<timeline-range-name> <percentage>",
-          "prose": "Calculates the delay as the difference between the start of the animation and the specified point on the timeline.",
+          "prose": "The active phase starts at the specified point on the timeline, plus any applicable start delay.",
           "type": "value",
           "value": "<timeline-range-name> <percentage>"
         }
       ],
       "styleDeclaration": [
-        "animation-delay-start",
-        "animationDelayStart"
+        "animation-range-start",
+        "animationRangeStart"
       ]
     },
     {
-      "name": "animation-delay-end",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
-      "initial": "0s",
+      "name": "animation-range-end",
+      "value": "[ normal | <timeline-range-name> <percentage> ]#",
+      "initial": "normal",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "relative to the specified named timeline range",
-      "computedValue": "list, each item either a duration or a timeline range and progress percentage",
+      "computedValue": "list, each item either the keyword normal or a timeline range and progress percentage",
       "canonicalOrder": "per grammar",
       "animatable": "no",
       "values": [
         {
-          "name": "<time>",
-          "prose": "Defines the delay as a duration. See [CSS-ANIMATIONS-1].",
+          "name": "normal",
+          "prose": "The end time of the animation is determined as normal.",
           "type": "value",
-          "value": "<time>"
+          "value": "normal"
         },
         {
           "name": "<timeline-range-name> <percentage>",
-          "prose": "Calculates the delay as the difference between the start of the animation and the specified point on the timeline.",
+          "prose": "The end time of the animation is at the specified point on the timeline minus any applicable end delay, or at the end of the animation duration, whichever comes first.",
           "type": "value",
           "value": "<timeline-range-name> <percentage>"
         }
       ],
       "styleDeclaration": [
-        "animation-delay-end",
-        "animationDelayEnd"
+        "animation-range-end",
+        "animationRangeEnd"
       ]
     }
   ],