@webref/css 6.8.3 → 6.9.1

package/css-grid.json

@@ -237,7 +237,7 @@
       "percentages": "see Track Sizing",
       "computedValue": "see Track Sizing",
       "canonicalOrder": "per grammar",
-      "animationType": "by computed value type",
+      "animationType": "if the list lengths match, by computed value type per item; discrete otherwise",
       "styleDeclaration": [
         "grid-auto-columns",
         "gridAutoColumns"
@@ -252,7 +252,7 @@
       "percentages": "see Track Sizing",
       "computedValue": "see Track Sizing",
       "canonicalOrder": "per grammar",
-      "animationType": "by computed value type",
+      "animationType": "if the list lengths match, by computed value type per item; discrete otherwise",
       "styleDeclaration": [
         "grid-auto-rows",
         "gridAutoRows"

package/css-images-4.json

@@ -111,7 +111,7 @@
     {
       "name": "<image-set-option>",
       "type": "type",
-      "value": "[ <image> | <string> ] [ <resolution> || type(<string>) ]"
+      "value": "[ <image> | <string> ] [ <resolution> || type(<string>) ]?"
     },
     {
       "name": "image()",

package/css-inline.json

@@ -377,7 +377,7 @@
     },
     {
       "name": "line-height",
-      "value": "normal | <number> | <length-percentage>",
+      "value": "normal | <number [0,∞]> | <length-percentage [0,∞]>",
       "initial": "normal",
       "appliesTo": "non-replaced inline boxes and SVG text content elements",
       "inherited": "yes",
@@ -393,22 +393,22 @@
           "value": "normal"
         },
         {
-          "name": "<length>",
+          "name": "<length [0,∞]>",
           "prose": "The specified length is used as the preferred line height. Negative values are illegal.",
           "type": "value",
-          "value": "<length>"
+          "value": "<length [0,∞]>"
         },
         {
-          "name": "<number>",
+          "name": "<number [0,∞]>",
           "prose": "The preferred line height is this number multiplied by the element’s computed font-size. Negative values are illegal. The computed value is the same as the specified value.",
           "type": "value",
-          "value": "<number>"
+          "value": "<number [0,∞]>"
         },
         {
-          "name": "<percentage>",
+          "name": "<percentage [0,∞]>",
           "prose": "The preferred line height and computed value of the property is this percentage of the element’s computed font-size. Negative values are illegal.",
           "type": "value",
-          "value": "<percentage>"
+          "value": "<percentage [0,∞]>"
         }
       ],
       "styleDeclaration": [

package/css-page-floats.json

@@ -139,7 +139,7 @@
     },
     {
       "name": "clear",
-      "value": "inline-start | inline-end | block-start | block-end | left | right | top | bottom | none",
+      "value": "inline-start | inline-end | block-start | block-end | left | right | top | bottom | both-inline | both-block | both | none",
       "initial": "none",
       "appliesTo": "block-level elements, floats, regions, pages",
       "inherited": "no",

package/css-page.json

@@ -27,7 +27,7 @@
         {
           "name": "size",
           "for": "@page",
-          "value": "<length>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
+          "value": "<length [0,∞]>{1,2} | auto | [ <page-size> || [ portrait | landscape ] ]",
           "initial": "auto",
           "computedValue": "specified value, with <length>s made absolute.",
           "values": [
@@ -50,10 +50,10 @@
               "value": "portrait"
             },
             {
-              "name": "<length>",
+              "name": "<length [0,∞]>",
               "prose": "The page box will be set to the given absolute dimension(s). If only one length value is specified, it sets both the width and height of the page box (i.e., the box is a square). If two length values are specified, the first establishes the page box width, and the second the page box height. Values in units of em and ex refer to the page context’s font. Negative lengths are illegal.",
               "type": "value",
-              "value": "<length>"
+              "value": "<length [0,∞]>"
             },
             {
               "name": "<page-size>",

package/css-position.json

@@ -336,7 +336,7 @@
     },
     {
       "name": "inset-block",
-      "value": "<top>{1,2}",
+      "value": "<'top'>{1,2}",
       "initial": "auto",
       "appliesTo": "positioned elements",
       "inherited": "no",
@@ -371,7 +371,7 @@
     },
     {
       "name": "inset-inline",
-      "value": "<top>{1,2}",
+      "value": "<'top'>{1,2}",
       "initial": "auto",
       "appliesTo": "positioned elements",
       "inherited": "no",
@@ -406,7 +406,7 @@
     },
     {
       "name": "inset",
-      "value": "<top>{1,4}",
+      "value": "<'top'>{1,4}",
       "initial": "auto",
       "appliesTo": "positioned elements",
       "inherited": "no",

package/css-shapes-2.json

@@ -53,14 +53,22 @@
     },
     {
       "name": "shape-padding",
-      "value": "<length>",
-      "initial": "none",
+      "value": "<length-percentage [0,∞]>",
+      "initial": "0",
       "appliesTo": "block-level elements",
       "inherited": "no",
-      "percentages": "n/a",
-      "computedValue": "the absolute length",
+      "percentages": "refer to the inline size of the containing block",
+      "computedValue": "computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "<length-percentage [0,∞]>",
+          "prose": "Sets the padding of the shape to the specified value.",
+          "type": "value",
+          "value": "<length-percentage [0,∞]>"
+        }
+      ],
       "styleDeclaration": [
         "shape-padding",
         "shapePadding"

package/css-shapes.json

@@ -151,7 +151,7 @@
     {
       "name": "<shape-box>",
       "type": "type",
-      "value": "<box> | margin-box",
+      "value": "<visual-box> | margin-box",
       "values": [
         {
           "name": "margin-box",

package/css-speech.json

@@ -647,7 +647,7 @@
     },
     {
       "name": "voice-pitch",
-      "value": "<frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+      "value": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
       "initial": "medium",
       "appliesTo": "all elements",
       "inherited": "yes",
@@ -721,7 +721,7 @@
     },
     {
       "name": "voice-range",
-      "value": "<frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
+      "value": "<frequency [0Hz,∞]> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]]",
       "initial": "medium",
       "appliesTo": "all elements",
       "inherited": "yes",

package/css-text-4.json

@@ -100,7 +100,7 @@
     },
     {
       "name": "white-space",
-      "value": "normal | pre | nowrap | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>",
+      "value": "normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>",
       "initial": "normal",
       "appliesTo": "text",
       "inherited": "yes",
@@ -225,7 +225,7 @@
     },
     {
       "name": "tab-size",
-      "value": "<number> | <length>",
+      "value": "<number [0,∞]> | <length [0,∞]>",
       "initial": "8",
       "appliesTo": "text",
       "inherited": "yes",
@@ -849,7 +849,7 @@
     },
     {
       "name": "text-align-all",
-      "value": "start | end | left | right | center | justify | match-parent",
+      "value": "start | end | left | right | center | <string> | justify | match-parent",
       "initial": "start",
       "appliesTo": "block containers",
       "inherited": "yes",
@@ -1160,7 +1160,7 @@
         },
         {
           "name": "space-first",
-          "prose": "Set fullwidth opening punctuation with full-width glyphs (spaced) on the first line the block container. Otherwise as trim-auto (unless allow-end is also specified).",
+          "prose": "Set fullwidth opening punctuation with full-width glyphs (spaced) on the first line the block container and each line after a forced line break. Otherwise as trim-auto (unless allow-end is also specified).",
           "type": "value",
           "value": "space-first"
         },
@@ -1190,7 +1190,7 @@
     },
     {
       "name": "text-spacing",
-      "value": "normal | none | auto | <autospace> || <spacing-trim>",
+      "value": "normal | none | auto | <spacing-trim> || <autospace>",
       "initial": "see individual properties",
       "appliesTo": "text",
       "inherited": "yes",

package/css-text-decor-4.json

@@ -103,7 +103,7 @@
     },
     {
       "name": "text-decoration-thickness",
-      "value": "auto | from-font | <length> | <percentage>",
+      "value": "auto | from-font | <length-percentage>",
       "initial": "auto",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -206,7 +206,7 @@
     },
     {
       "name": "text-underline-offset",
-      "value": "auto | <length> | <percentage>",
+      "value": "auto | <length-percentage>",
       "initial": "auto",
       "appliesTo": "all elements",
       "inherited": "yes",

package/css-text.json

@@ -112,7 +112,7 @@
     },
     {
       "name": "tab-size",
-      "value": "<number> | <length>",
+      "value": "<number [0,∞]> | <length [0,∞]>",
       "initial": "8",
       "appliesTo": "text",
       "inherited": "yes",

package/css-ui.json

@@ -622,6 +622,35 @@
         "appearance"
       ]
     },
+    {
+      "name": "field-sizing",
+      "value": "fixed | content",
+      "initial": "fixed",
+      "appliesTo": "elements with default preferred size",
+      "inherited": "no",
+      "percentages": "N/A",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "discrete",
+      "values": [
+        {
+          "name": "fixed",
+          "prose": "For element with default preferred size, the UA must apply set the intrinsic size to the default preferred size defined by the host language for that element. Otherwise UA must behave the same as content.",
+          "type": "value",
+          "value": "fixed"
+        },
+        {
+          "name": "content",
+          "prose": "The UA must determine the element’s intrinsic size based on its content, and must ignore any default preferred size defined by the host language for that element. If the element is an element with default preferred size and is listed in compressible replaced elements, the UA must stop treating the element as a replaced element for min-content contribution.",
+          "type": "value",
+          "value": "content"
+        }
+      ],
+      "styleDeclaration": [
+        "field-sizing",
+        "fieldSizing"
+      ]
+    },
     {
       "name": "input-security",
       "value": "auto | none",

package/css-values-5.json

@@ -105,21 +105,123 @@
         }
       ]
     },
+    {
+      "name": "progress()",
+      "prose": "The progress() functional notation returns a <number> value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). The argument calculations can resolve to any <number>, <dimension>, or <percentage>, but must have the same type, or else the function is invalid.",
+      "type": "function"
+    },
+    {
+      "name": "<progress()>",
+      "type": "type",
+      "value": "progress(<calc-sum> from <calc-sum> to <calc-sum>)"
+    },
+    {
+      "name": "media-progress()",
+      "prose": "Similar to the progress() notation, the media-progress() functional notation returns a <number> value representing current value of the specified media query [MEDIAQUERIES-4] as a progress value between two explicit values of the media query (as the progress start value and progress end value).",
+      "type": "function"
+    },
+    {
+      "name": "<media-progress()>",
+      "type": "type",
+      "value": "media-progress(<media-feature> from <calc-sum> to <calc-sum>)"
+    },
+    {
+      "name": "container-progress()",
+      "prose": "The container-progress() functional notation is identical to the media-progress() functional notation, except that it accepts container features [CSS-CONTAIN-3] in place of media features.",
+      "type": "function"
+    },
+    {
+      "name": "<container-progress()>",
+      "type": "type",
+      "value": "container-progress(<size-feature> [ of <container-name> ]? from <calc-sum> to <calc-sum>)"
+    },
+    {
+      "name": "<progress>",
+      "prose": "The <progress> value type represents the mix progress value in a mix notation, and ultimately resolves to a percentage. It can, however, draw that percentage value from sources such as media queries and animation timelines, and can also convert it through an easing function before using it for interpolation.",
+      "type": "type",
+      "value": "[ <percentage> | <number> | <'animation-timeline'> ]? && by <easing-function>",
+      "values": [
+        {
+          "name": "<percentage>",
+          "prose": "Represents the mix progress value as a <percentage>.",
+          "type": "value",
+          "value": "<percentage>"
+        },
+        {
+          "name": "<number>",
+          "prose": "Computes to the equivalent <percentage>. Note: This allows the use of the progress(), media-progress(), and container-progress() notations.",
+          "type": "value",
+          "value": "<number>"
+        },
+        {
+          "name": "<'animation-timeline'>",
+          "prose": "Represents the mix progress value as the progress of the specified animation timeline. The values none and auto, however, are invalid. [CSS-ANIMATIONS-2] [WEB-ANIMATIONS-2]",
+          "type": "value",
+          "value": "<'animation-timeline'>"
+        },
+        {
+          "name": "<easing-function>",
+          "prose": "Converts the specified input mix progress value into an output mix progress value using the specified easing function. [CSS-EASING-1]",
+          "type": "value",
+          "value": "<easing-function>"
+        }
+      ]
+    },
+    {
+      "name": "calc-mix()",
+      "prose": "The calc-mix() mix notation represents an interpolated numeric or dimensional value. Like calc(), it is a math function, with the following syntactic form:",
+      "type": "function"
+    },
+    {
+      "name": "<calc-mix()>",
+      "type": "type",
+      "value": "calc-mix( <progress>, <calc-sum>, <calc-sum> )"
+    },
+    {
+      "name": "transform-mix()",
+      "prose": "The transform-mix() mix notation represents an interpolated <transform-list>, with the following syntactic form:",
+      "type": "function"
+    },
+    {
+      "name": "<transform-mix()>",
+      "type": "type",
+      "value": "transform-mix( <progress>, <transform-list>, <transform-list> )"
+    },
+    {
+      "name": "mix()",
+      "prose": "Interpolation of any two property values can be represented by the mix() mix notation, which supports two alternative syntax patterns:",
+      "type": "function"
+    },
+    {
+      "name": "<mix()>",
+      "type": "type",
+      "value": "mix( <progress> ';' <whole-value> ';' <whole-value> ) | mix( <progress> && of <'animation-name'> )"
+    },
+    {
+      "name": "first-valid()",
+      "prose": "The first-valid() functional notation inlines the fallback behavior intrinsic to parsing declarations. Unlike most notations, it can accept any valid or invalid syntax in its arguments, and represents the first value among its arguments that is supported (parsed as valid) by the UA as the whole value of the property it’s used in.",
+      "type": "function"
+    },
+    {
+      "name": "<first-valid()>",
+      "type": "type",
+      "value": "first-valid( <declaration-value> [ ';' <declaration-value> ]* )"
+    },
     {
       "name": "toggle()",
       "prose": "The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.",
       "type": "function"
     },
     {
-      "name": "<toggle-value>",
-      "prose": "where <toggle-value> is any CSS value that is valid where the expression is placed. If any of the values inside are not valid, then the entire toggle() expression is invalid. The toggle() expression may be used as the value of any property, but must be the only component in that property’s value.",
-      "type": "type"
+      "name": "<toggle()>",
+      "type": "type",
+      "value": "toggle( <whole-value> [ ';' <whole-value> ]+ )"
     },
     {
       "name": "attr()",
       "prose": "The attr() function substitutes the value of an attribute on an element into a property, similar to how the var() function substitutes a custom property value into a function.",
       "type": "function",
-      "value": "attr( <q-name> <attr-type>? , <declaration-value>?)",
+      "value": "attr( <attr-name> <attr-type>? , <declaration-value>?)",
       "values": [
         {
           "name": "string",
@@ -195,6 +297,11 @@
         }
       ]
     },
+    {
+      "name": "<attr-name>",
+      "type": "type",
+      "value": "[ <ident-token> '|' ]? <ident-token>"
+    },
     {
       "name": "<attr-type>",
       "type": "type",
@@ -209,7 +316,7 @@
       "name": "random()",
       "prose": "The random() function is a math function that represents a random value between a minimum and maximum value, drawn from a uniform distribution, optionally limiting the possible values to a step between those limits:",
       "type": "function",
-      "value": "random( <random-caching-options>? , <calc-sum>, <calc-sum>, [by <calc-sum>]? );"
+      "value": "random( <random-caching-options>? , <calc-sum>, <calc-sum>, [by <calc-sum>]? )"
     },
     {
       "name": "<random-caching-options>",
@@ -220,7 +327,39 @@
       "name": "random-item()",
       "prose": "The random-item() function resolves to a random item from among its list of items.",
       "type": "function",
-      "value": "random-item( <random-caching-options> ';' <any-value> [ ';' <any-value> ]* )"
+      "value": "random-item( <random-caching-options> ';' <declaration-value>? [ ';' <declaration-value>? ]* )"
+    },
+    {
+      "name": "sibling-count()",
+      "prose": "The sibling-count() functional notation represents, as an <integer>, the total number of child elements in the parent of the element on which the notation is used.",
+      "type": "function"
+    },
+    {
+      "name": "sibling-index()",
+      "prose": "The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among the children of its parent. Like :nth-child(), sibling-index() is 1-indexed.",
+      "type": "function"
+    }
+  ],
+  "warnings": [
+    {
+      "msg": "Missing definition",
+      "name": "progress-function()",
+      "value": "progress-function( progress value from start value to end value )"
+    },
+    {
+      "msg": "Missing definition",
+      "name": "mix-function()",
+      "value": "mix-function( <progress>,"
+    },
+    {
+      "msg": "Missing definition",
+      "name": "<color-mix()>",
+      "value": "color-mix( <progress> && <color-interpolation-method>?, <color>, <color> ) | color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )"
+    },
+    {
+      "msg": "Missing definition",
+      "name": "<cross-fade()>",
+      "value": "cross-fade( <progress>, [ <image> | <color> ], [ <image> | <color> ] ) | cross-fade( <cf-image># )"
     }
   ]
 }

package/css-values.json

@@ -7,26 +7,6 @@
   "atrules": [],
   "selectors": [],
   "values": [
-    {
-      "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 progress between the two values.",
-          "type": "value",
-          "value": "<percentage>"
-        },
-        {
-          "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. Either value can be omitted, to refer to an empty value (this is valid in custom properties, such as --foo:;). The separating ; cannot be omitted; for example, a mix() with an empty starting value would be written like mix(50%;;bar).",
-          "type": "value",
-          "value": "<declaration-value>"
-        }
-      ]
-    },
     {
       "name": "<ident>",
       "prose": "CSS identifiers, generically denoted by <ident>, consist of a sequence of characters conforming to the <ident-token> grammar. [CSS-SYNTAX-3] Identifiers cannot be quoted; otherwise they would be interpreted as strings. CSS properties accept two classes of identifiers: pre-defined keywords and author-defined identifiers.",
@@ -492,31 +472,31 @@
       "values": [
         {
           "name": "e",
-          "prose": "e is the base of the natural logarithm, approximately equal to 2.7182818284590452354.",
+          "prose": "the base of the natural logarithm, approximately equal to 2.7182818284590452354.",
           "type": "value",
           "value": "e"
         },
         {
           "name": "pi",
-          "prose": "pi is the ratio of a circle’s circumference to its diameter, approximately equal to 3.1415926535897932.",
+          "prose": "the ratio of a circle’s circumference to its diameter, approximately equal to 3.1415926535897932.",
           "type": "value",
           "value": "pi"
         },
         {
           "name": "infinity",
-          "prose": "When a calculation or a subtree of a calculation becomes infinite or NaN, representing it with a numeric value is no longer possible. To aid in serialization of these degenerate values, the additional math constants infinity (with the value +∞), -infinity (with the value −∞), and NaN (with the value NaN) are defined.",
+          "prose": "the value positive infinity (+∞)",
           "type": "value",
           "value": "infinity"
         },
         {
           "name": "-infinity",
-          "prose": "When a calculation or a subtree of a calculation becomes infinite or NaN, representing it with a numeric value is no longer possible. To aid in serialization of these degenerate values, the additional math constants infinity (with the value +∞), -infinity (with the value −∞), and NaN (with the value NaN) are defined.",
+          "prose": "the value negative infinity (−∞)",
           "type": "value",
           "value": "-infinity"
         },
         {
           "name": "NaN",
-          "prose": "When a calculation or a subtree of a calculation becomes infinite or NaN, representing it with a numeric value is no longer possible. To aid in serialization of these degenerate values, the additional math constants infinity (with the value +∞), -infinity (with the value −∞), and NaN (with the value NaN) are defined.",
+          "prose": "the value NaN",
           "type": "value",
           "value": "NaN"
         }
@@ -670,10 +650,10 @@
     {
       "name": "<calc-value>",
       "type": "type",
-      "value": "<number> | <dimension> | <percentage> | <calc-constant> | ( <calc-sum> )"
+      "value": "<number> | <dimension> | <percentage> | <calc-keyword> | ( <calc-sum> )"
     },
     {
-      "name": "<calc-constant>",
+      "name": "<calc-keyword>",
       "type": "type",
       "value": "e | pi | infinity | -infinity | NaN"
     },

package/css-view-transitions-2.json

@@ -9,9 +9,9 @@
       "name": "@view-transition",
       "descriptors": [
         {
-          "name": "trigger",
+          "name": "navigation",
           "for": "@view-transition",
-          "value": "navigation | none",
+          "value": "auto | none",
           "initial": "none",
           "values": [
             {
@@ -21,15 +21,21 @@
               "value": "none"
             },
             {
-              "name": "navigation",
-              "prose": "The transition will be enabled if the navigation is same-origin, without cross-origin redirects.",
+              "name": "auto",
+              "prose": "The transition will be enabled if the navigation is same-origin, without cross-origin redirects, and is not a reload.",
               "type": "value",
-              "value": "navigation"
+              "value": "auto"
             }
           ]
+        },
+        {
+          "name": "type",
+          "for": "@view-transition",
+          "value": "none | <custom-ident>*",
+          "initial": "none"
         }
       ],
-      "value": "@view-transition same-origin { <declaration-rule-list> }"
+      "value": "@view-transition { <declaration-rule-list> }"
     }
   ],
   "selectors": [

package/package.json

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