@webref/css 6.3.2 → 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": [
@@ -68,6 +68,21 @@
         "anchorName"
       ]
     },
+    {
+      "name": "anchor-default",
+      "value": "<anchor-element>",
+      "initial": "implicit",
+      "appliesTo": "absolutely positioned elements",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "styleDeclaration": [
+        "anchor-default",
+        "anchorDefault"
+      ]
+    },
     {
       "name": "position-fallback",
       "value": "none | <dashed-ident>",
@@ -117,8 +132,38 @@
       "name": "anchor()",
       "prose": "An absolutely-positioned element can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor elements. The anchor() function resolves to a <length>.",
       "type": "function",
-      "value": "anchor( <dashed-ident>? <anchor-side>, <length-percentage>? )",
+      "value": "anchor( <anchor-element>? <anchor-side>, <length-percentage>? )",
       "values": [
+        {
+          "name": "<dashed-ident>",
+          "prose": "Specifies the anchor name it will look for. This name is a tree-scoped reference.",
+          "type": "value",
+          "value": "<dashed-ident>"
+        },
+        {
+          "name": "implicit",
+          "prose": "Selects one of the implicit anchor elements defined for the element, if possible.",
+          "type": "value",
+          "value": "implicit"
+        },
+        {
+          "name": "popover",
+          "prose": "If the element has an implicit anchor element defined by the Popover API, uses that if possible.",
+          "type": "value",
+          "value": "popover"
+        },
+        {
+          "name": "auto",
+          "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.",
@@ -175,16 +220,21 @@
         }
       ]
     },
+    {
+      "name": "<anchor-element>",
+      "type": "type",
+      "value": "<dashed-ident> | implicit | popover"
+    },
     {
       "name": "<anchor-side>",
       "type": "type",
-      "value": "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()",
       "prose": "An absolutely-positioned element can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor elements. The anchor-size() function resolves to a <length>.",
       "type": "function",
-      "value": "anchor( <dashed-ident>? <anchor-size>, <length-percentage>? )",
+      "value": "anchor( <anchor-element>? <anchor-size>, <length-percentage>? )",
       "values": [
         {
           "name": "width",

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-5.json

@@ -368,6 +368,36 @@
       "name": "<cmyk-component>",
       "type": "type",
       "value": "<number> | <percentage>"
+    },
+    {
+      "name": "<color-space>",
+      "type": "type",
+      "value": "<rectangular-color-space> | <polar-color-space> | <custom-color-space>"
+    },
+    {
+      "name": "<rectangular-color-space>",
+      "type": "type",
+      "value": "srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65"
+    },
+    {
+      "name": "<polar-color-space>",
+      "type": "type",
+      "value": "hsl | hwb | lch | oklch"
+    },
+    {
+      "name": "<custom-color-space>",
+      "type": "type",
+      "value": "<dashed-ident>"
+    },
+    {
+      "name": "<hue-interpolation-method>",
+      "type": "type",
+      "value": "[ shorter | longer | increasing | decreasing ] hue"
+    },
+    {
+      "name": "<color-interpolation-method>",
+      "type": "type",
+      "value": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]"
     }
   ]
 }

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/css-images-4.json

@@ -151,7 +151,7 @@
     {
       "name": "linear-gradient()",
       "type": "function",
-      "value": "linear-gradient( [ <angle> | to <side-or-corner> ]? || <color-interpolation-method>, <color-stop-list> )"
+      "value": "linear-gradient( [ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? , <color-stop-list> )"
     },
     {
       "name": "<side-or-corner>",
@@ -161,12 +161,12 @@
     {
       "name": "radial-gradient()",
       "type": "function",
-      "value": "radial-gradient( [[ <ending-shape> || <size> ]? [ at <position> ]? ] || <color-interpolation-method>, <color-stop-list> )"
+      "value": "radial-gradient( [ [ [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? , <color-stop-list> )"
     },
     {
       "name": "conic-gradient()",
       "type": "function",
-      "value": "conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method>, <angular-color-stop-list> )",
+      "value": "conic-gradient( [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list> )",
       "values": [
         {
           "name": "<angle>",

package/css-overflow-4.json

@@ -223,35 +223,121 @@
         "textOverflow"
       ]
     },
+    {
+      "name": "block-ellipsis",
+      "value": "none | auto | <string>",
+      "initial": "none",
+      "appliesTo": "block containers",
+      "inherited": "yes",
+      "percentages": "N/A",
+      "computedValue": "specified value",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The rendering is unaffected.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "auto",
+          "prose": "Render an ellipsis character (U+2026)—or a more typographically-appropriate equivalent—as the block overflow ellipsis at the end of the affected line box. UAs should use the conventions of the content language, writing system, and writing mode to determine the most appropriate ellipsis string.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<string>",
+          "prose": "Render the specified string as the block overflow ellipsis at the end of the affected line box. The UA may truncate this string if it is absurdly long.",
+          "type": "value",
+          "value": "<string>"
+        }
+      ],
+      "styleDeclaration": [
+        "block-ellipsis",
+        "blockEllipsis"
+      ]
+    },
+    {
+      "name": "line-clamp",
+      "value": "none | <integer> <'block-ellipsis'>?",
+      "initial": "none",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "N/A",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "values": [
+        {
+          "name": "none",
+          "prose": "Sets max-lines to none, continue to auto, and block-ellipsis to none.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<integer>",
+          "prose": "Sets max-lines to the specified <integer>, continue to discard, and the block-ellipsis property to second component of the value or to auto if omitted.",
+          "type": "value",
+          "value": "<integer>"
+        }
+      ],
+      "styleDeclaration": [
+        "line-clamp",
+        "lineClamp"
+      ]
+    },
+    {
+      "name": "-webkit-line-clamp",
+      "value": "none | <integer>",
+      "initial": "none",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "N/A",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "-webkit-line-clamp",
+        "WebkitLineClamp",
+        "webkitLineClamp"
+      ]
+    },
     {
       "name": "continue",
-      "value": "auto | overflow | paginate | fragments | discard",
+      "value": "auto | discard | -webkit-discard | overflow | paginate | fragments",
       "initial": "auto",
-      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
+      "appliesTo": "block containers and multicol containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "see below",
+      "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "values": [
         {
-          "name": "auto",
-          "prose": "auto may only occur as a computed value if the element is a CSS Region other than the last one in a region chain. Content that doesn’t fit is pushed to the next region of the chain. In all other cases, auto computes to one of the other values.",
+          "name": "-webkit-discard",
+          "prose": "The -webkit-discard value behaves identically to discard, except that it only takes effect if the computed value of the display property on the parent is -webkit-box or -webkit-inline-box and the computed value of the -webkit-box-orient property on the parent is vertical.",
           "type": "value",
-          "value": "auto"
+          "value": "-webkit-discard"
         },
         {
-          "name": "overflow",
-          "prose": "Content that doesn’t fit overflows, according to the overflow property",
+          "name": "auto",
+          "prose": "If the box has more content than can fit, the excess content is handled according to the usual rules.",
           "type": "value",
-          "value": "overflow"
+          "value": "auto"
         },
         {
           "name": "discard",
-          "prose": "Content that doesn’t fit is discarded at a fragmentation break When the element isn’t a fragmentation container already, should this work by turning it directly into one, or by creating a fragment box inside it like fragments does?",
+          "prose": "The box becomes a fragmentation container that captures region breaks, if it is not already. [CSS-BREAK-3] Content after the first region break is not rendered (see below). (If the box is a multi-column container, any overflow columns are also not rendered.)",
           "type": "value",
           "value": "discard"
         },
+        {
+          "name": "overflow",
+          "prose": "Content that doesn’t fit overflows, according to the overflow property",
+          "type": "value",
+          "value": "overflow"
+        },
         {
           "name": "paginate",
           "prose": "Content that doesn’t fit paginates. This creates a paginated view inside the element similar to the way that 'overflow: scroll' creates a scrollable view. See paginated overflow",
@@ -271,9 +357,9 @@
     },
     {
       "name": "max-lines",
-      "value": "none | <integer>",
+      "value": "none | <integer [1,∞]>",
       "initial": "none",
-      "appliesTo": "fragment boxes",
+      "appliesTo": "block containers which are also fragmentation containers that capture region breaks",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "the keyword none or an integer",
@@ -282,15 +368,9 @@
       "values": [
         {
           "name": "none",
-          "prose": "Breaks occur only as specified elsewhere.",
+          "prose": "Otherwise, if the value of max-lines is not none, a region break is forced after its Nth descendant in-flow line box, where N is the specified value of max-lines. Only lines boxes in the same Block Formatting Context are counted: the contents of descendants that establish independent formatting contexts are skipped over while counting line boxes.",
           "type": "value",
           "value": "none"
-        },
-        {
-          "name": "<integer>",
-          "prose": "In addition to any breaks specified elsewhere, a break is forced before any line that would exceed the given number of lines being placed inside the element (excluding lines that are in a different block formatting context from the block formatting context to which an unstyled child of the element would belong). If there are multiple boundaries between this line and the previous, where exactly (in terms of element boundaries) is the break forced? Only positive integers are accepted. Zero or negative integers are a parse error.",
-          "type": "value",
-          "value": "<integer>"
         }
       ],
       "styleDeclaration": [

package/css-overflow.json

@@ -295,143 +295,6 @@
         "text-overflow",
         "textOverflow"
       ]
-    },
-    {
-      "name": "block-ellipsis",
-      "value": "none | auto | <string>",
-      "initial": "none",
-      "appliesTo": "block containers",
-      "inherited": "yes",
-      "percentages": "N/A",
-      "computedValue": "specified value",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "values": [
-        {
-          "name": "none",
-          "prose": "The rendering is unaffected.",
-          "type": "value",
-          "value": "none"
-        },
-        {
-          "name": "auto",
-          "prose": "Render an ellipsis character (U+2026)—or a more typographically-appropriate equivalent—as the block overflow ellipsis at the end of the affected line box. UAs should use the conventions of the content language, writing system, and writing mode to determine the most appropriate ellipsis string.",
-          "type": "value",
-          "value": "auto"
-        },
-        {
-          "name": "<string>",
-          "prose": "Render the specified string as the block overflow ellipsis at the end of the affected line box. The UA may truncate this string if it is absurdly long.",
-          "type": "value",
-          "value": "<string>"
-        }
-      ],
-      "styleDeclaration": [
-        "block-ellipsis",
-        "blockEllipsis"
-      ]
-    },
-    {
-      "name": "line-clamp",
-      "value": "none | <integer> <'block-ellipsis'>?",
-      "initial": "none",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "N/A",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "values": [
-        {
-          "name": "none",
-          "prose": "Sets max-lines to none, continue to auto, and block-ellipsis to none.",
-          "type": "value",
-          "value": "none"
-        },
-        {
-          "name": "<integer>",
-          "prose": "Sets max-lines to the specified <integer>, continue to discard, and the block-ellipsis property to second component of the value or to auto if omitted.",
-          "type": "value",
-          "value": "<integer>"
-        }
-      ],
-      "styleDeclaration": [
-        "line-clamp",
-        "lineClamp"
-      ]
-    },
-    {
-      "name": "-webkit-line-clamp",
-      "value": "none | <integer>",
-      "initial": "none",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "N/A",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
-      "canonicalOrder": "per grammar",
-      "styleDeclaration": [
-        "-webkit-line-clamp",
-        "WebkitLineClamp",
-        "webkitLineClamp"
-      ]
-    },
-    {
-      "name": "continue",
-      "value": "auto | discard | -webkit-discard",
-      "initial": "auto",
-      "appliesTo": "block containers and multicol containers",
-      "inherited": "no",
-      "percentages": "N/A",
-      "computedValue": "specified keyword",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "values": [
-        {
-          "name": "-webkit-discard",
-          "prose": "The -webkit-discard value behaves identically to discard, except that it only takes effect if the computed value of the display property on the parent is -webkit-box or -webkit-inline-box and the computed value of the -webkit-box-orient property on the parent is vertical.",
-          "type": "value",
-          "value": "-webkit-discard"
-        },
-        {
-          "name": "auto",
-          "prose": "If the box has more content than can fit, the excess content is handled according to the usual rules.",
-          "type": "value",
-          "value": "auto"
-        },
-        {
-          "name": "discard",
-          "prose": "The box becomes a fragmentation container that captures region breaks, if it is not already. [CSS-BREAK-3] Content after the first region break is not rendered (see below). (If the box is a multi-column container, any overflow columns are also not rendered.)",
-          "type": "value",
-          "value": "discard"
-        }
-      ],
-      "styleDeclaration": [
-        "continue"
-      ]
-    },
-    {
-      "name": "max-lines",
-      "value": "none | <integer [1,∞]>",
-      "initial": "none",
-      "appliesTo": "block containers which are also fragmentation containers that capture region breaks",
-      "inherited": "no",
-      "percentages": "N/A",
-      "computedValue": "the keyword none or an integer",
-      "canonicalOrder": "per grammar",
-      "animationType": "by computed value type",
-      "values": [
-        {
-          "name": "none",
-          "prose": "Otherwise, if the value of max-lines is not none, a region break is forced after its Nth descendant in-flow line box, where N is the specified value of max-lines. Only lines boxes in the same Block Formatting Context are counted: the contents of descendants that establish independent formatting contexts are skipped over while counting line boxes.",
-          "type": "value",
-          "value": "none"
-        }
-      ],
-      "styleDeclaration": [
-        "max-lines",
-        "maxLines"
-      ]
     }
   ],
   "atrules": [],

package/css-text-4.json

@@ -422,7 +422,7 @@
         },
         {
           "name": "<string>",
-          "prose": "Specifies the string that appears at the end of the line before a hyphenation break. The UA may truncate the used value to a limited number of typographic character units. (It must not truncate only part of a typographic character unit.)",
+          "prose": "Specifies the string that appears at the hyphenation break when hyphenating. (The position of this string is not affected: the UA must insert the string according to the typographic conventions of the content language, defaulting to immediately before the hyphenation break.) The UA may truncate the used value to a limited number of typographic character units; it must not truncate only part of a typographic character unit.",
           "type": "value",
           "value": "<string>"
         }

package/css-ui.json

@@ -90,7 +90,7 @@
       "name": "resize",
       "value": "none | both | horizontal | vertical | block | inline",
       "initial": "none",
-      "appliesTo": "elements with overflow other than visible, and optionally replaced elements such as images, videos, and iframes",
+      "appliesTo": "elements that are scroll containers and optionally replaced elements such as images, videos, and iframes",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "specified keyword",

package/css-values.json

@@ -11,22 +11,19 @@
       "name": "mix()",
       "prose": "Interpolation of two values can be represented by the mix() functional notation, whose syntax is defined as follows:",
       "type": "function",
+      "value": "mix( <percentage> ';' <declaration-value> ';' <declaration-value> )",
       "values": [
         {
           "name": "<percentage>",
-          "prose": "Represents the interpolation point as progress from <start-value> to <end-value>.",
+          "prose": "Represents the interpolation progress between the two values.",
           "type": "value",
           "value": "<percentage>"
         },
         {
-          "name": "<start-value>",
-          "prose": "The value at the “start” (0%) of the interpolation range.",
-          "type": "type"
-        },
-        {
-          "name": "<end-value>",
-          "prose": "The value at the “end” (100%) of the interpolation range.",
-          "type": "type"
+          "name": "<declaration-value>",
+          "prose": "The first <declaration-value> represents the value at the “start” (0%) of the interpolation range, interpreted as a value for the property this function is used in. The second <declaration-value> represents the value at the “end” (100%) of the interpolation range, interpreted the same.",
+          "type": "value",
+          "value": "<declaration-value>"
         }
       ]
     },

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.2",
+  "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"
       ]
     }
   ],