@webref/css 6.24.1 → 6.25.0

package/compat.json

@@ -238,6 +238,10 @@
         "animation-fill-mode",
         "animation-play-state",
         "animation-timeline"
+      ],
+      "resetLonghands": [
+        "animation-range",
+        "animation-trigger"
       ]
     },
     {
@@ -501,6 +505,9 @@
         "mask-clip",
         "mask-composite",
         "mask-mode"
+      ],
+      "resetLonghands": [
+        "mask-border"
       ]
     },
     {

package/css-animations.json

@@ -282,6 +282,10 @@
         "animation-fill-mode",
         "animation-play-state",
         "animation-timeline"
+      ],
+      "resetLonghands": [
+        "animation-range",
+        "animation-trigger"
       ]
     }
   ],

package/css-backgrounds-4.json

@@ -597,6 +597,9 @@
         "background-origin",
         "background-clip",
         "background-color"
+      ],
+      "resetLonghands": [
+        "background-blend-mode"
       ]
     }
   ],

package/css-backgrounds.json

@@ -362,6 +362,9 @@
         "background-origin",
         "background-clip",
         "background-color"
+      ],
+      "resetLonghands": [
+        "background-blend-mode"
       ]
     }
   ],

package/css-borders.json

@@ -926,6 +926,9 @@
         "border-width",
         "border-style",
         "border-color"
+      ],
+      "resetLonghands": [
+        "border-image"
       ]
     },
     {

package/css-color-5.json

@@ -412,7 +412,7 @@
     },
     {
       "name": "light-dark()",
-      "value": "light-dark( <color>, <color> )",
+      "value": "light-dark( [<color>, <color>] | [<image>, <image>])",
       "href": "https://drafts.csswg.org/css-color-5/#funcdef-light-dark",
       "type": "function"
     },

package/css-env.json

@@ -104,6 +104,12 @@
           "value": "preferred-text-scale"
         }
       ]
+    },
+    {
+      "name": "<env-args>",
+      "href": "https://drafts.csswg.org/css-env-1/#typedef-env-args",
+      "type": "type",
+      "value": "env( <declaration-value>, <declaration-value>? )"
     }
   ]
 }

package/css-fonts.json

@@ -335,6 +335,14 @@
         "font-size",
         "line-height",
         "font-family"
+      ],
+      "resetLonghands": [
+        "font-feature-settings",
+        "font-kerning",
+        "font-language-override",
+        "font-optical-sizing",
+        "font-size-adjust",
+        "font-variation-settings"
       ]
     },
     {

package/css-image-animation.json

@@ -7,7 +7,7 @@
     {
       "name": "image-animation",
       "href": "https://drafts.csswg.org/css-image-animation-1/#propdef-image-animation",
-      "value": "normal | paused | running",
+      "value": "normal | paused | stopped | running",
       "initial": "normal",
       "appliesTo": "content images and elements with decorative images",
       "inherited": "yes",
@@ -23,16 +23,23 @@
           "type": "value",
           "value": "normal"
         },
+        {
+          "name": "stopped",
+          "prose": "Animated images are rendered as if they were static images: the user agent must not run any animation it contains. If the image contains a cover frame, that is what the user agent must use; otherwise, it must display the image as it would be in the initial state of the animation.",
+          "href": "https://drafts.csswg.org/css-image-animation-1/#valdef-image-animation-stopped",
+          "type": "value",
+          "value": "stopped"
+        },
         {
           "name": "paused",
-          "prose": "Animated images are rendered as if they were static images: the user agent must not run any animation it contains.",
+          "prose": "The user agent must not run the animation contained in the Animated images, and must continue to display the image as it was when this value started to apply, effectively pausing the animation. If the animation had not been playing prior to this value being applied, the behavior is the same as stopped.",
           "href": "https://drafts.csswg.org/css-image-animation-1/#valdef-image-animation-paused",
           "type": "value",
           "value": "paused"
         },
         {
           "name": "running",
-          "prose": "Like normal, the animation of animated images is run normally, as determined by the image format and the host language, However, animation timelines are scoped per element: among the content image and decorative images of a single element, any animated images with the same absolute URL, the same image data, and with an image-animation computed value of running must be rendered synchronized to the same timeline as a group, distinct from the timeline of images in other elements, with the timeline starting at the time of the least recent addition to the group.",
+          "prose": "Like normal, the animation of animated images is run normally, as determined by the image format and the host language. However, animation timelines are scoped per element: among the content image and decorative images of a single element, any animated images with the same absolute URL, the same image data, and with an image-animation computed value of running must be rendered synchronized to the same timeline as a group, distinct from the timeline of images in other elements. If images are added to the element while the computed value is running, the timeline starts at the time of the least recent addition to the group. If the element is created or made visible after having previously been set to display: none, with images already added and with image-animation already set to running, the timeline starts when the element is included in the layout. If this property is switched to running from another value, the beginnig of this timeline is set so that the animation continues from the state that was displayed at the timem of the switch.",
           "href": "https://drafts.csswg.org/css-image-animation-1/#valdef-image-animation-running",
           "type": "value",
           "value": "running"

package/css-masking.json

@@ -394,6 +394,9 @@
         "mask-clip",
         "mask-composite",
         "mask-mode"
+      ],
+      "resetLonghands": [
+        "mask-border"
       ]
     },
     {

package/css-mixins.json

@@ -31,7 +31,7 @@
       "name": "@mixin",
       "href": "https://drafts.csswg.org/css-mixins-1/#at-ruledef-mixin",
       "descriptors": [],
-      "value": "@mixin <function-token> <function-parameter>#? ) { <declaration-rule-list> } | @mixin <dashed-ident> { <declaration-rule-list> }"
+      "value": "@mixin <function-token> <function-parameter>#? ) { <declaration-rule-list> }"
     },
     {
       "name": "@result",
@@ -48,7 +48,8 @@
     {
       "name": "@macro",
       "href": "https://drafts.csswg.org/css-mixins-1/#macro-rule",
-      "descriptors": []
+      "descriptors": [],
+      "value": "@macro <dashed-ident> { <declaration-rule-list> }"
     },
     {
       "name": "@apply",

package/css-overflow-5.json

@@ -39,12 +39,12 @@
     {
       "name": "scroll-marker-group",
       "href": "https://drafts.csswg.org/css-overflow-5/#propdef-scroll-marker-group",
-      "value": "none | before | after",
+      "value": "none | [ [ before | after ] || [ links | tabs ] ]",
       "initial": "none",
       "appliesTo": "scroll containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "specified value",
+      "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "values": [
@@ -68,6 +68,20 @@
           "href": "https://drafts.csswg.org/css-overflow-5/#valdef-scroll-marker-group-after",
           "type": "value",
           "value": "after"
+        },
+        {
+          "name": "links",
+          "prose": "The generated ::scroll-marker-group operates in \"links\" mode, functioning like a navigation list. This is the default mode if omitted.",
+          "href": "https://drafts.csswg.org/css-overflow-5/#valdef-scroll-marker-group-links",
+          "type": "value",
+          "value": "links"
+        },
+        {
+          "name": "tabs",
+          "prose": "The generated ::scroll-marker-group operates in \"tabs\" mode, functioning like a tablist.",
+          "href": "https://drafts.csswg.org/css-overflow-5/#valdef-scroll-marker-group-tabs",
+          "type": "value",
+          "value": "tabs"
         }
       ],
       "styleDeclaration": [

package/css-ui.json

@@ -126,7 +126,7 @@
       "values": [
         {
           "name": "<cursor-image>",
-          "value": "[ <url> | <url-set> ] [<number>{2}]?",
+          "value": "[ <url> | <url-set> ] <number>{2}?",
           "href": "https://drafts.csswg.org/css-ui-4/#valdef-cursor-cursor-image",
           "type": "value"
         },
@@ -134,7 +134,7 @@
           "name": "<cursor-image>",
           "href": "https://drafts.csswg.org/css-ui-4/#typedef-cursor-cursor-image",
           "type": "type",
-          "value": "[ <url> | <url-set> ] [<number>{2}]?"
+          "value": "[ <url> | <url-set> ] <number>{2}?"
         },
         {
           "name": "<url-set>",

package/css-values-5.json

@@ -682,50 +682,77 @@
       "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:",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-random",
       "type": "function",
-      "value": "random( <random-value-sharing>? , <calc-sum>, <calc-sum>, <calc-sum>? )"
+      "value": "random( <random-cache-key>? , <calc-sum>, <calc-sum>, <calc-sum>? )"
     },
     {
-      "name": "<random-value-sharing>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-random-value-sharing",
+      "name": "<random-cache-key>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-random-cache-key",
       "type": "type",
-      "value": "[ [ auto | <dashed-ident> ] || element-shared ] | fixed <number [0,1]>",
+      "value": "auto | <random-name> | fixed <number [0,1]>",
       "values": [
         {
           "name": "auto",
-          "prose": "Each random function in an element’s styles will use a distinct random base value. (But see the note below for a small wrinkle about this.) If neither auto nor <dashed-ident> are specified, it behaves as auto.",
+          "prose": "The random function is roughly \"as random as possible\": every usage in a property, between different properties, and between different elements will get a different random cache key. (See below for exact details.) If the <random-cache-key> is omitted, it behaves as auto.",
           "href": "https://drafts.csswg.org/css-values-5/#valdef-random-auto",
           "type": "value",
           "value": "auto"
         },
         {
-          "name": "<dashed-ident>",
-          "prose": "Each random function in an element’s styles with the same <dashed-ident> will share the same random base value; ones with different <dashed-ident>s will use distinct random base values.",
-          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-dashed-ident",
+          "name": "<random-name>",
+          "prose": "The <random-name> specifies the random cache key directly. It always contains a <dashed-ident>, specifying the name, and can optionally contain additional dynamic information: element adds an element identifier to the random cache key, so different elements will get different random values property adds the property name the random function is being used on to the random cache key, so different properties will get different random values property index adds the property name and the index of the random function among all the random functions used in the same property value to the random cache key, so multiple uses of a random function in the same property will get different random values.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-random-name",
           "type": "value",
-          "value": "<dashed-ident>"
+          "value": "<random-name>"
         },
         {
-          "name": "element-shared",
-          "prose": "If element-shared is omitted, random functions on different elements will use distinct random base values. If specified, random functions on different elements will share the same random base value if they have the same <dashed-ident> (if specified) or if they’re used in the same style in the same way (if not). (Again, see the note below for a small wrinkle about this.)",
-          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-element-shared",
+          "name": "element",
+          "prose": "element adds an element identifier to the random cache key, so different elements will get different random values",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-element",
           "type": "value",
-          "value": "element-shared"
+          "value": "element"
+        },
+        {
+          "name": "property",
+          "prose": "property adds the property name the random function is being used on to the random cache key, so different properties will get different random values",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-property",
+          "type": "value",
+          "value": "property"
+        },
+        {
+          "name": "index",
+          "prose": "property index adds the property name and the index of the random function among all the random functions used in the same property value to the random cache key, so multiple uses of a random function in the same property will get different random values.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-index",
+          "type": "value",
+          "value": "index"
+        },
+        {
+          "name": "property index",
+          "prose": "property index adds the property name and the index of the random function among all the random functions used in the same property value to the random cache key, so multiple uses of a random function in the same property will get different random values.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-random-index",
+          "type": "value",
+          "value": "property index"
         },
         {
           "name": "<number>",
-          "prose": "If fixed <number> is specified, the <number> is used as the random function’s random base value, rather than allowing the UA to generate a random base value and controlling how it’s shared. While 1 is technically allowed as a valid value (because CSS grammars can only express closed ranges), the random base value is clamped to the highest representable value less than 1, so random base values remain in the half-open range `[0, 1)`.",
+          "prose": "If fixed <number> is specified, the random function bypasses the random cache key entirely, and just uses the <number> as its random base value directly. While 1 is technically allowed as a valid value (because CSS grammars can only express closed ranges), the random base value is clamped to the highest representable value less than 1, so random base values remain in the half-open range `[0, 1)`.",
           "href": "https://drafts.csswg.org/css-values-5/#valdef-random-fixed",
           "type": "value",
           "value": "<number>"
         }
       ]
     },
+    {
+      "name": "<random-name>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-random-name",
+      "type": "type",
+      "value": "<dashed-ident> [ element | property index? ]?"
+    },
     {
       "name": "random-item()",
       "prose": "The random-item() function resolves to a random item from among its list of items.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-random-item",
       "type": "function",
-      "value": "random-item( <random-value-sharing> , [ <declaration-value>? ]# )"
+      "value": "random-item( <random-cache-key> , [ <declaration-value>? ]# )"
     },
     {
       "name": "<random-item-args>",

package/css-values.json

@@ -713,7 +713,7 @@
       "prose": "If A is exactly equal to an integer multiple of B, round() resolves to A exactly (preserving whether A is 0⁻ or 0⁺, if relevant). Otherwise, there are two integer multiples of B that are potentially \"closest\" to A, lower B which is closer to −∞ and upper B which is closer to +∞. The following <rounding-strategy>s dictate how to choose between them:",
       "href": "https://drafts.csswg.org/css-values-4/#typedef-rounding-strategy",
       "type": "type",
-      "value": "nearest | up | down | to-zero",
+      "value": "nearest | up | down | to-zero | line-width",
       "values": [
         {
           "name": "nearest",

package/css-view-transitions.json

@@ -39,7 +39,7 @@
     {
       "name": "view-transition-scope",
       "href": "https://drafts.csswg.org/css-view-transitions-2/#propdef-view-transition-scope",
-      "value": "none | auto",
+      "value": "none | all",
       "initial": "none",
       "appliesTo": "all elements",
       "inherited": "no",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "6.24.1",
+  "version": "6.25.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"
@@ -12,6 +12,6 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "css-tree": "^3.1.0"
+    "css-tree": "^3.2.1"
   }
 }

package/scroll-animations.json

@@ -348,7 +348,7 @@
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the keyword none or a list of CSS identifiers",
+      "computedValue": "the keyword none, the keyword all, or a list of CSS identifiers",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "values": [
@@ -361,14 +361,14 @@
         },
         {
           "name": "all",
-          "prose": "Declares the names of all timelines defined by descendants—​whose scope is not already explicitly declared by a descendant using timeline-scope—​to be in scope for this element and its descendants.",
+          "prose": "Specifies that all timeline names defined by this element or its flat tree descendants—​whose scope is not already limited by a descendant using timeline-scope—​to be in scope only for this element’s flat tree descendants; and limits descendants to only match timeline names to elements within this subtree.",
           "href": "https://drafts.csswg.org/scroll-animations-1/#valdef-timeline-scope-all",
           "type": "value",
           "value": "all"
         },
         {
           "name": "<dashed-ident>",
-          "prose": "Declares the name of a matching named timeline defined by a descendant—​whose scope is not already explicitly declared by a descendant using timeline-scope—​to be in scope for this element and its descendants. If no such timeline exists, or if more than one such timeline exists, instead declares an inactive timeline with the specified name.",
+          "prose": "Specifies that a matching timeline name defined by this element or its flat tree descendants—​whose scope is not already limited by a descendant using timeline-scope—​to be in scope only for this element’s flat tree descendants; and limits descendants to only match timeline names to elements within this subtree.",
           "href": "https://drafts.csswg.org/scroll-animations-1/#valdef-timeline-scope-dashed-ident",
           "type": "value",
           "value": "<dashed-ident>"