@webref/css 6.4.2 → 6.4.3

package/css-animations-2.json

@@ -4,6 +4,35 @@
     "url": "https://drafts.csswg.org/css-animations-2/"
   },
   "properties": [
+    {
+      "name": "animation-duration",
+      "value": "[ auto | <time [0s,∞]> ]#",
+      "initial": "auto",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item either a time or the keyword auto",
+      "canonicalOrder": "per grammar",
+      "animationType": "not animatable",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "For time-driven animations, equivalent to 0s. For scroll-driven animations, equivalent to the duration necessary to fill the timeline in consideration of animation-range, animation-delay, and animation-iteration-count. See Scroll-linked Animations § 4.1 Finite Timeline Calculations.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "<time [0s,∞]>",
+          "prose": "For time-driven animations, specifies the length of time that an animation takes to complete one cycle. A negative <time> is invalid. If the <time> is 0s, like the initial value, the keyframes of the animation have no effect, but the animation itself still occurs instantaneously. Specifically, start and end events are fired; if animation-fill-mode is set to backwards or both, the first frame of the animation, as defined by animation-direction, will be displayed during the animation-delay. After the animation-delay the last frame of the animation, as defined by animation-direction, will be displayed if animation-fill-mode is set to forwards or both. If animation-fill-mode is set to none the animation will have no visible effect. For scroll-driven animations, treated as auto.",
+          "type": "value",
+          "value": "<time [0s,∞]>"
+        }
+      ],
+      "styleDeclaration": [
+        "animation-duration",
+        "animationDuration"
+      ]
+    },
     {
       "name": "animation-composition",
       "value": "<single-animation-composition>#",
@@ -82,7 +111,7 @@
     },
     {
       "name": "<single-animation>",
-      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",
+      "value": "<time [0s,∞]> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",
       "type": "type"
     }
   ]

package/css-animations.json

@@ -296,7 +296,7 @@
     },
     {
       "name": "<single-animation>",
-      "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]",
+      "value": "<time [0s,∞]> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]",
       "type": "type"
     }
   ]

package/css-backgrounds-4.json

@@ -482,6 +482,120 @@
         "border-clip-left",
         "borderClipLeft"
       ]
+    },
+    {
+      "name": "box-shadow-color",
+      "value": "<color>#",
+      "initial": "currentcolor",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item a computed color",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value",
+      "styleDeclaration": [
+        "box-shadow-color",
+        "boxShadowColor"
+      ]
+    },
+    {
+      "name": "box-shadow-offset",
+      "value": "[ none | <length>{2} ]#",
+      "initial": "none",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "either none or a list, each item a pair of offsets (horizontal and vertical) from the element‘s box",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value",
+      "styleDeclaration": [
+        "box-shadow-offset",
+        "boxShadowOffset"
+      ]
+    },
+    {
+      "name": "box-shadow-blur",
+      "value": "<length [0,∞]>#",
+      "initial": "0",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item a <length>",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value",
+      "styleDeclaration": [
+        "box-shadow-blur",
+        "boxShadowBlur"
+      ]
+    },
+    {
+      "name": "box-shadow-spread",
+      "value": "<length>#",
+      "initial": "0",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item a <length>",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value",
+      "styleDeclaration": [
+        "box-shadow-spread",
+        "boxShadowSpread"
+      ]
+    },
+    {
+      "name": "box-shadow-position",
+      "value": "[ outset | inset ]#",
+      "initial": "outset",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "list, each item one of the keywords",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value",
+      "values": [
+        {
+          "name": "outset",
+          "prose": "Causes the drop shadow to be an outer box-shadow. That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.",
+          "type": "value",
+          "value": "outset"
+        },
+        {
+          "name": "outer box-shadow",
+          "type": "value",
+          "value": "outer box-shadow"
+        },
+        {
+          "name": "inset",
+          "prose": "Causes the drop shadow to be an inner box-shadow. That means, one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it.",
+          "type": "value",
+          "value": "inset"
+        },
+        {
+          "name": "inner box-shadow",
+          "type": "value",
+          "value": "inner box-shadow"
+        }
+      ],
+      "styleDeclaration": [
+        "box-shadow-position",
+        "boxShadowPosition"
+      ]
+    },
+    {
+      "name": "box-shadow",
+      "value": "<spread-shadow>#",
+      "initial": "none",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "either the keyword none or a list, each item consisting of four absolute lengths plus a computed color and optionally also a inset keyword",
+      "canonicalOrder": "per grammar",
+      "animatable": "by computed value, treating none as a zero-item list and appending blank shadows (transparent 0 0 0 0) with a corresponding inset keyword as needed to match the longer list if the shorter list is otherwise compatible with the longer one",
+      "styleDeclaration": [
+        "box-shadow",
+        "boxShadow"
+      ]
     }
   ],
   "atrules": [],
@@ -511,6 +625,11 @@
           "value": "border"
         }
       ]
+    },
+    {
+      "name": "<spread-shadow>",
+      "type": "type",
+      "value": "<'box-shadow-color'>? && [ <'box-shadow-offset'> [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?"
     }
   ]
 }

package/css-backgrounds.json

@@ -937,7 +937,7 @@
     {
       "name": "<final-bg-layer>",
       "type": "type",
-      "value": "<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>"
+      "value": "<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>"
     },
     {
       "name": "<line-style>",

package/css-display.json

@@ -304,13 +304,13 @@
       "values": [
         {
           "name": "contents",
-          "prose": "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal). This value computes to display: none on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.",
+          "prose": "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text sequences as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element’s children as normal). This value computes to display: none on replaced elements and other elements whose rendering is not entirely controlled by CSS; see Appendix B: Effects of display: contents on Unusual Elements for details.",
           "type": "value",
           "value": "contents"
         },
         {
           "name": "none",
-          "prose": "The element and its descendants generate no boxes or text runs. Similarly, if a text node is defined to behave as display: none, it generates no text runs.",
+          "prose": "The element and its descendants generate no boxes or text sequences. Similarly, if a text node is defined to behave as display: none, it generates no text sequences.",
           "type": "value",
           "value": "none"
         }

package/css-text-4.json

@@ -115,13 +115,13 @@
         },
         {
           "name": "space",
-          "prose": "Instances of U+200B ZERO WIDTH SPACE within the text run children of this element are replaced by U+0020 SPACE.",
+          "prose": "Instances of U+200B ZERO WIDTH SPACE within the child text of this element are replaced by U+0020 SPACE.",
           "type": "value",
           "value": "space"
         },
         {
           "name": "ideographic-space",
-          "prose": "Instances of U+200B ZERO WIDTH SPACE within the text run children of this element are replaced by U+3000 IDEOGRAPHIC SPACE.",
+          "prose": "Instances of U+200B ZERO WIDTH SPACE within the child text of this element are replaced by U+3000 IDEOGRAPHIC SPACE.",
           "type": "value",
           "value": "ideographic-space"
         }
@@ -133,7 +133,7 @@
     },
     {
       "name": "white-space",
-      "value": "normal | pre | nowrap | pre-wrap | pre-line | <white-space-collapse> || <text-wrap> || <text-space-trim>",
+      "value": "normal | pre | nowrap | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap'> || <'text-space-trim'>",
       "initial": "normal",
       "appliesTo": "text",
       "inherited": "yes",

package/css-values.json

@@ -50,23 +50,123 @@
     {
       "name": "url()",
       "prose": "The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource.",
-      "type": "function"
+      "type": "function",
+      "value": "url( <string> <url-modifier>* ) | <url-token>"
     },
     {
       "name": "src()",
       "prose": "The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource.",
-      "type": "function"
+      "type": "function",
+      "value": "src( <string> <url-modifier>* )"
     },
     {
       "name": "<url>",
       "type": "type",
-      "value": "url( <string> <url-modifier>* ) | src( <string> <url-modifier>* )"
+      "value": "<url()> | <src()>"
     },
     {
       "name": "<url-modifier>",
       "prose": "<url>s support specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a functional notation.",
       "type": "type"
     },
+    {
+      "name": "<request-url-modifier>",
+      "prose": "The <request-url-modifier>s represent <url-modifier>s that affect the resource’s request. Each <request-url-modifier> has a request modifier steps which accepts a request.",
+      "type": "type",
+      "value": "<crossorigin-modifier> | <integrity-modifier> | <referrerpolicy-modifier>",
+      "values": [
+        {
+          "name": "<crossorigin-modifier>",
+          "value": "crossorigin(anonymous | use-credentials)",
+          "type": "type"
+        },
+        {
+          "name": "crossorigin()",
+          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
+          "type": "function"
+        },
+        {
+          "name": "anonymous",
+          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
+          "type": "value",
+          "value": "anonymous"
+        },
+        {
+          "name": "use-credentials",
+          "prose": "<crossorigin-modifier> = crossorigin(anonymous | use-credentials)",
+          "type": "value",
+          "value": "use-credentials"
+        },
+        {
+          "name": "<integrity-modifier>",
+          "value": "integrity(<string>)",
+          "type": "type"
+        },
+        {
+          "name": "integrity()",
+          "prose": "<integrity-modifier> = integrity(<string>)",
+          "type": "function"
+        },
+        {
+          "name": "<referrerpolicy-modifier>",
+          "value": "referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "type"
+        },
+        {
+          "name": "referrerpolicy()",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "function"
+        },
+        {
+          "name": "no-referrer",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "no-referrer"
+        },
+        {
+          "name": "no-referrer-when-downgrade",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "no-referrer-when-downgrade"
+        },
+        {
+          "name": "same-origin",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "same-origin"
+        },
+        {
+          "name": "origin",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "origin"
+        },
+        {
+          "name": "strict-origin",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "strict-origin"
+        },
+        {
+          "name": "origin-when-cross-origin",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "origin-when-cross-origin"
+        },
+        {
+          "name": "strict-origin-when-cross-origin",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "strict-origin-when-cross-origin"
+        },
+        {
+          "name": "unsafe-url",
+          "prose": "<referrerpolicy-modifier> = referrerpolicy(no-referrer | no-referrer-when-downgrade | same-origin | origin | strict-origin | origin-when-cross-origin | strict-origin-when-cross-origin | unsafe-url)",
+          "type": "value",
+          "value": "unsafe-url"
+        }
+      ]
+    },
     {
       "name": "<integer>",
       "prose": "Integer values are denoted by <integer>.",

package/css-view-transitions.json

@@ -37,8 +37,7 @@
   "atrules": [],
   "selectors": [
     {
-      "name": "::view-transition",
-      "prose": "A tree-abiding pseudo-element that is also a pseudo-element root. Its originating element is the document’s document element. Its containing block is the snapshot root. The following is added to the HTML user agent style sheet: html::view-transition { position: fixed; inset: 0; }"
+      "name": "::view-transition"
     },
     {
       "name": "::view-transition-group()",

package/html.json

@@ -10,7 +10,7 @@
     {
       "name": "<source-size-list>",
       "type": "type",
-      "value": "[ <source-size># , ]? <source-size-value>"
+      "value": "<source-size>#? , <source-size-value>"
     },
     {
       "name": "<source-size>",

package/motion.json

@@ -6,7 +6,7 @@
   "properties": [
     {
       "name": "offset-path",
-      "value": "none | <ray()> | <url> | [ <basic-shape> && <coord-box>? ] | <coord-box>",
+      "value": "none | <offset-path> || <coord-box>",
       "initial": "none",
       "appliesTo": "transformable elements",
       "inherited": "no",
@@ -18,9 +18,39 @@
       "values": [
         {
           "name": "none",
-          "prose": "No offset path gets created. When offset-path is none, offset-distance and offset-rotate have no effect.",
+          "prose": "The element does not have an offset transform.",
           "type": "value",
           "value": "none"
+        },
+        {
+          "name": "<offset-path> || <coord-box>",
+          "prose": "The element has an offset transform, defined by some offset path. See § 2.7 Calculating The Offset Transform for details on how to calculate the offset transform. All the usual effects of having a transform apply (such as creating a stacking context, etc.) See CSS Transforms 1 § 2 The Transform Rendering Model for details. If <offset-path> is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element. If <coord-box> is omitted, it defaults to border-box. See the specific values (below) for the interpretation of each component.",
+          "type": "value",
+          "value": "<offset-path> || <coord-box>"
+        },
+        {
+          "name": "<ray()>",
+          "prose": "The offset path is a line extending from the offset starting position at some angle. See § 2.1.1 The ray() Function for details. The <coord-box> provides the reference box for the ray.",
+          "type": "value",
+          "value": "<ray()>"
+        },
+        {
+          "name": "<url>",
+          "prose": "A URL reference to an SVG shape element. The offset path is the referenced element’s equivalent path. [SVG2] If the URL does not reference a shape element (because it references a different element, or resolves to a non-SVG document, or doesn’t resolve at all, etc) this behaves as path(\"m 0 0\") (a <basic-shape>) instead. The <coord-box> defines the viewport and user coordinate system for the shape element, with the origin (the 0,0 point) at the top left corner, and units being 1px in size.",
+          "type": "value",
+          "value": "<url>"
+        },
+        {
+          "name": "<basic-shape>",
+          "prose": "The offset path is the equivalent path of the <basic-shape> function. If circle() or ellipse() is used, and an explicit center position is not given, they default to using the offset starting position, rather than their standard default. The <coord-box> provides the [=/reference box=] for the <basic-shape>.",
+          "type": "value",
+          "value": "<basic-shape>"
+        },
+        {
+          "name": "<coord-box>",
+          "prose": "Defines the box that the <offset-path> sizes into. In CSS contexts, the boxes being referenced are from the element that establishes the containing block for this element. In SVG contexts, all values behave as view-box.",
+          "type": "value",
+          "value": "<coord-box>"
         }
       ],
       "styleDeclaration": [
@@ -34,7 +64,7 @@
       "initial": "0",
       "appliesTo": "transformable elements",
       "inherited": "no",
-      "percentages": "refer to the total path length",
+      "percentages": "relative to the offset path length",
       "computedValue": "a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
@@ -58,13 +88,13 @@
       "values": [
         {
           "name": "auto",
-          "prose": "The initial position is the top-left corner of the box.",
+          "prose": "The offset starting position is the top-left corner of the box.",
           "type": "value",
           "value": "auto"
         },
         {
           "name": "<position>",
-          "prose": "The initial position is the result of using the <position> to position a 0x0 object area within the box’s containing block.",
+          "prose": "The offset starting position is the result of using the <position> to position a 0x0 object area within the box’s containing block.",
           "type": "value",
           "value": "<position>"
         }
@@ -118,19 +148,19 @@
       "values": [
         {
           "name": "auto",
-          "prose": "Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of auto.",
+          "prose": "The offset transform will have a rotation component equal to the difference between the offset path’s direction at the offset position and the direction of the positive X axis (that is, a line going toward the right). See SVG’s direction of a path for details on how to calculate this. If specified with an <angle>, the angle is added to the rotation component.",
           "type": "value",
           "value": "auto"
         },
         {
           "name": "reverse",
-          "prose": "Indicates that the object is rotated (over time if offset-distance is animated) by the angle of the direction (i.e., directional tangent vector) of the offset path, relative to the positive x-axis, plus 180 degrees. If specified in combination with <angle>, the computed value of <angle> is added to the computed value of reverse.",
+          "prose": "Identical to auto, but adds an additional 180deg to the rotation.",
           "type": "value",
           "value": "reverse"
         },
         {
           "name": "<angle>",
-          "prose": "Indicates that the box has a constant clockwise rotation transformation applied to it by the specified rotation angle. See definitions of auto or reverse if specified in combination with either one of the keywords.",
+          "prose": "When specified on its own, adds a rotation component to the offset transform of the specified angle. (That is, offset-rotate: 45deg; is similar to transform: rotate(45deg); it’s just ordered to be part of the offset transform.)",
           "type": "value",
           "value": "<angle>"
         }
@@ -158,6 +188,11 @@
   "atrules": [],
   "selectors": [],
   "values": [
+    {
+      "name": "<offset-path>",
+      "type": "type",
+      "value": "<ray()> | <url> | <basic-shape>"
+    },
     {
       "name": "ray()",
       "type": "function",
@@ -165,7 +200,7 @@
       "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.",
+          "prose": "The offset path is a single line segment that starts from the offset starting position and proceeds in the direction defined by the specified <angle>. (Its length is determined by the other arguments.) As with gradient functions, <angle> values are interpreted as bearing angles, with 0deg pointing up and positive angles representing clockwise rotation.",
           "type": "value",
           "value": "<angle>"
         },
@@ -177,7 +212,7 @@
         },
         {
           "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.",
+          "prose": "The length of the offset path is reduced so that the element stays within the containing block even at offset-distance: 100%. Specifically, the path’s length is reduced by half the width or half the height of the element’s border box, whichever is larger, and floored at zero.",
           "type": "value",
           "value": "contain"
         }
@@ -190,31 +225,31 @@
       "values": [
         {
           "name": "closest-side",
-          "prose": "The distance from the initial position to whichever side of the containing block is closest.",
+          "prose": "The distance from the ray’s starting point 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.",
+          "prose": "The distance from the ray’s starting point 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.",
+          "prose": "The distance from the ray’s starting point 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.",
+          "prose": "The distance from the ray’s starting point 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.",
+          "prose": "The distance from the ray’s starting point to the point where the offset path intersects the containing block’s boundary. If the ray’s starting point is on the containing block’s boundary, or outside its bounds entirely, the distance is zero.",
           "type": "value",
           "value": "sides"
         }

package/package.json

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

package/scroll-animations.json

@@ -65,6 +65,12 @@
           "prose": "Specifies to use the document viewport as the scroll container.",
           "type": "value",
           "value": "root"
+        },
+        {
+          "name": "self",
+          "prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
+          "type": "value",
+          "value": "self"
         }
       ],
       "styleDeclaration": [
@@ -148,6 +154,12 @@
           "prose": "Specifies to use the document viewport as the scroll container.",
           "type": "value",
           "value": "root"
+        },
+        {
+          "name": "self",
+          "prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
+          "type": "value",
+          "value": "self"
         }
       ],
       "styleDeclaration": [
@@ -201,7 +213,7 @@
     },
     {
       "name": "animation-range",
-      "value": "[ <'animation-range-start'> <'animation-range-end'>? | <timeline-range-name> ]#",
+      "value": "[ <'animation-range-start'> <'animation-range-end'>? ]#",
       "initial": "see individual properties",
       "appliesTo": "see individual properties",
       "inherited": "see individual properties",
@@ -216,26 +228,32 @@
     },
     {
       "name": "animation-range-start",
-      "value": "[ normal | <timeline-range-name> <percentage> ]#",
+      "value": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
       "initial": "normal",
       "appliesTo": "all elements",
       "inherited": "no",
-      "percentages": "relative to the specified named timeline range",
+      "percentages": "relative to the specified named timeline range if one was specified, else to the entire timeline",
       "computedValue": "list, each item either the keyword normal or a timeline range and progress percentage",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "values": [
         {
           "name": "normal",
-          "prose": "The start of the active phase is determined as normal.",
+          "prose": "The start of the animation’s active interval is determined as normal.",
           "type": "value",
           "value": "normal"
         },
         {
-          "name": "<timeline-range-name> <percentage>",
-          "prose": "The active phase starts at the specified point on the timeline, plus any applicable start delay.",
+          "name": "<length-percentage>",
+          "prose": "The active interval starts at the specified point on the timeline measuring from the start of the timeline, plus any applicable start delay.",
           "type": "value",
-          "value": "<timeline-range-name> <percentage>"
+          "value": "<length-percentage>"
+        },
+        {
+          "name": "<timeline-range-name> <length-percentage>?",
+          "prose": "The active interval starts at the specified point on the timeline measuring from the start of the specified named timeline range, plus any applicable start delay.",
+          "type": "value",
+          "value": "<timeline-range-name> <length-percentage>?"
         }
       ],
       "styleDeclaration": [
@@ -245,26 +263,32 @@
     },
     {
       "name": "animation-range-end",
-      "value": "[ normal | <timeline-range-name> <percentage> ]#",
+      "value": "[ normal | <length-percentage> | <timeline-range-name> <length-percentage>? ]#",
       "initial": "normal",
       "appliesTo": "all elements",
       "inherited": "no",
-      "percentages": "relative to the specified named timeline range",
+      "percentages": "relative to the specified named timeline range if one was specified, else to the entire timeline",
       "computedValue": "list, each item either the keyword normal or a timeline range and progress percentage",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "values": [
         {
           "name": "normal",
-          "prose": "The end time of the animation is determined as normal.",
+          "prose": "The end of the animation’s active interval is determined as normal.",
           "type": "value",
           "value": "normal"
         },
         {
-          "name": "<timeline-range-name> <percentage>",
-          "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.",
+          "name": "<length-percentage>",
+          "prose": "The active interval ends at the specified point on the timeline measuring from the start of the timeline, minus any applicable end delay.",
           "type": "value",
-          "value": "<timeline-range-name> <percentage>"
+          "value": "<length-percentage>"
+        },
+        {
+          "name": "<timeline-range-name> <length-percentage>?",
+          "prose": "The active interval ends at the specified point on the timeline measuring from the start of the specified named timeline range, minus any applicable end delay.",
+          "type": "value",
+          "value": "<timeline-range-name> <length-percentage>?"
         }
       ],
       "styleDeclaration": [
@@ -317,6 +341,12 @@
           "prose": "Specifies to use the document viewport as the scroll container.",
           "type": "value",
           "value": "root"
+        },
+        {
+          "name": "self",
+          "prose": "Specifies to use the element’s own principal box as the scroll container. If the principal box is not a scroll container, then the scroll progress timeline is inactive.",
+          "type": "value",
+          "value": "self"
         }
       ]
     },
@@ -328,7 +358,7 @@
     {
       "name": "<scroller>",
       "type": "type",
-      "value": "root | nearest"
+      "value": "root | nearest | self"
     },
     {
       "name": "view()",
@@ -346,7 +376,7 @@
     {
       "msg": "Missing definition",
       "name": "<keyframe-selector>",
-      "value": "from | to | <percentage> | <timeline-range-name> <percentage>"
+      "value": "from | to | <percentage [0,100]> | <timeline-range-name> <percentage>"
     },
     {
       "msg": "Dangling value",