@webref/css 5.4.1 → 5.4.3

package/css-backgrounds-4.json

@@ -96,12 +96,12 @@
     },
     "border-top-color": {
       "name": "border-top-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -111,12 +111,12 @@
     },
     "border-right-color": {
       "name": "border-right-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -126,12 +126,12 @@
     },
     "border-bottom-color": {
       "name": "border-bottom-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -141,12 +141,12 @@
     },
     "border-left-color": {
       "name": "border-left-color",
-      "value": "<color>#",
+      "value": "<color> | <1d-image>",
       "initial": "currentcolor",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the computed color",
+      "computedValue": "the computed color and/or a one-dimensional image function",
       "canonicalOrder": "per grammar",
       "animationType": "see prose",
       "styleDeclaration": [
@@ -156,7 +156,7 @@
     },
     "border-color": {
       "name": "border-color",
-      "value": "<color>#{1,4}",
+      "value": "[ <color> | <1d-image> ]{1,4}",
       "initial": "see individual properties",
       "appliesTo": "see individual properties",
       "inherited": "see individual properties",
@@ -306,9 +306,6 @@
   },
   "atrules": {},
   "valuespaces": {
-    "<position>": {
-      "value": "[ [ left | center | right | top | bottom | start | end | <length-percentage> ] | [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] | [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ] ]"
-    },
     "<bg-clip>": {
       "value": "<box> | border | text"
     }

package/css-fonts.json

@@ -516,9 +516,6 @@
     "<palette-identifier>": {
       "prose": "This value identifies an CSS-defined palette to use. Users can define a palette by using the @font-palette-values rule. If no applicable @font-palette-values rule is present, this value behaves as normal. <palette-identifier> is parsed as a <dashed-ident>."
     },
-    "<integer>": {
-      "prose": "Identifies a (zero-based) numerical palette index within the font."
-    },
     "<font-weight-absolute>": {
       "value": "[normal | bold | <number [1,1000]>]"
     },

package/css-images-4.json

@@ -136,6 +136,15 @@
     },
     "<color-stop>": {
       "value": "<color-stop-length> | <color-stop-angle>"
+    },
+    "<1d-image>": {
+      "value": "<stripes()>"
+    },
+    "<stripes()>": {
+      "value": "stripes( <color-stripe># )"
+    },
+    "<color-stripe>": {
+      "value": "<color> && [ <length-percentage> | <flex> ]?"
     }
   }
 }

package/css-inline.json

@@ -71,8 +71,9 @@
       "appliesTo": "inline-level boxes and SVG text content elements",
       "inherited": "no",
       "percentages": "refer to the used value of line-height",
-      "computedValue": "the specified keyword and/or a computed <length-percentage> value",
+      "computedValue": "the specified keyword or a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
+      "animationType": "by computed value type",
       "styleDeclaration": [
         "baseline-shift",
         "baselineShift"
@@ -87,6 +88,7 @@
       "percentages": "computed relative to 1em",
       "computedValue": "the specified keyword, a number, or a computed <length> value",
       "canonicalOrder": "per grammar",
+      "animationType": "by computed value type",
       "styleDeclaration": [
         "line-height",
         "lineHeight"
@@ -101,6 +103,7 @@
       "percentages": "N/A",
       "computedValue": "the specified keyword",
       "canonicalOrder": "per grammar",
+      "animationType": "discrete",
       "styleDeclaration": [
         "text-edge",
         "textEdge"
@@ -115,6 +118,7 @@
       "percentages": "N/A",
       "computedValue": "the specified keyword",
       "canonicalOrder": "per grammar",
+      "animationType": "discrete",
       "styleDeclaration": [
         "leading-trim",
         "leadingTrim"
@@ -125,7 +129,7 @@
       "value": "normal | stretch",
       "initial": "normal",
       "appliesTo": "inline boxes, but not ruby container boxes nor internal ruby boxes",
-      "inherited": "no",
+      "inherited": "yes",
       "percentages": "n/a",
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",

package/css-ui.json

@@ -50,12 +50,12 @@
     },
     "outline-color": {
       "name": "outline-color",
-      "value": "<color> | invert",
+      "value": "[ <color> | <1d-image> ] | invert",
       "initial": "invert",
       "appliesTo": "all elements",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "The computed value for invert is invert. For <color> values, see [[!CSS-COLOR-4#resolving-color-values]] in [CSS-COLOR-4].",
+      "computedValue": "The computed value for invert is invert. For <color> values, see CSS Color 4 § 14 Resolving <color> Values in [CSS-COLOR-4]. For <1d-image> values, see CSS Images 4 § 4 1D Image Values: the stripes() notation in [CSS-IMAGES-4].",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "styleDeclaration": [

package/css-values.json

@@ -24,6 +24,9 @@
     "<dashed-ident>": {
       "prose": "The <dashed-ident> production is a <custom-ident>, with all the case-sensitivity that implies, with the additional restriction that it must start with two dashes (U+002D HYPHEN-MINUS)."
     },
+    "<string>": {
+      "prose": "Strings are denoted by <string>. When written literally, they consist of a sequence of characters delimited by double quotes or single quotes, corresponding to the <string-token> production in the CSS Syntax Module [CSS-SYNTAX-3]."
+    },
     "<url()>": {
       "prose": "The <url> type, written with the url() and src() functions, represents a URL, which is a pointer to a resource."
     },
@@ -33,12 +36,21 @@
     "<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."
     },
+    "<integer>": {
+      "prose": "Integer values are denoted by <integer>."
+    },
+    "<number>": {
+      "prose": "Number values are denoted by <number>, and represent real numbers, possibly with a fractional component."
+    },
     "<zero>": {
       "prose": "The value <zero> represents a literal number with the value 0. Expressions that merely evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>; only literal <number-token>s do."
     },
     "<dimension>": {
       "prose": "The general term dimension refers to a number with a unit attached to it; and is denoted by <dimension>."
     },
+    "<percentage>": {
+      "prose": "Percentage values are denoted by <percentage>, and indicates a value that is some fraction of another reference value."
+    },
     "<length-percentage>": {
       "value": "[ <length> | <percentage> ]"
     },
@@ -55,6 +67,9 @@
       "prose": "Ratio values are denoted by <ratio>, and represent the ratio of two numeric values. It most often represents an aspect ratio, relating a width (first) to a height (second).",
       "value": "<number [0,∞]> [ / <number [0,∞]> ]?"
     },
+    "<length>": {
+      "prose": "Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension."
+    },
     "<angle>": {
       "prose": "Angle values are <dimension>s denoted by <angle>. The angle unit identifiers are:"
     },
@@ -67,6 +82,10 @@
     "<resolution>": {
       "prose": "Resolution units are dimensions denoted by <resolution>. The resolution unit identifiers are:"
     },
+    "<position>": {
+      "prose": "The <position> value specifies the position of a object area (e.g. background image) inside a positioning area (e.g. background positioning area). It is interpreted as specified for background-position. [CSS3-BACKGROUND]",
+      "value": "[ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
+    },
     "<calc()>": {
       "prose": "The calc() function is a math function that allows basic arithmetic to be performed on numerical values, using addition (+), subtraction (-), multiplication (*), division (/), and parentheses.",
       "value": "calc( <calc-sum> )"
@@ -141,6 +160,9 @@
     "<quirky-length>": {
       "prose": "When CSS is being parsed in quirks mode, <quirky-length> is a type of <length> that is only valid in certain properties:"
     },
+    "<url>": {
+      "value": "url( <string> <url-modifier>* ) | src( <string> <url-modifier>* )"
+    },
     "<calc-sum>": {
       "value": "<calc-product> [ [ '+' | '-' ] <calc-product> ]*"
     },

package/css-view-transitions.json

@@ -4,8 +4,8 @@
     "url": "https://drafts.csswg.org/css-view-transitions-1/"
   },
   "properties": {
-    "page-transition-tag": {
-      "name": "page-transition-tag",
+    "view-transition-name": {
+      "name": "view-transition-name",
       "value": "none | <custom-ident>",
       "initial": "none",
       "appliesTo": "all elements",
@@ -15,14 +15,14 @@
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "styleDeclaration": [
-        "page-transition-tag",
-        "pageTransitionTag"
+        "view-transition-name",
+        "viewTransitionName"
       ]
     }
   },
   "atrules": {},
   "valuespaces": {
-    "<pt-tag-selector>": {
+    "<pt-name-selector>": {
       "value": "'*' | <custom-ident>"
     }
   }

package/filter-effects.json

@@ -86,9 +86,6 @@
   },
   "atrules": {},
   "valuespaces": {
-    "<url>": {
-      "prose": "A filter reference to a filter element. For example url(commonfilters.svg#filter). If the filter references a non-existent object or the referenced object is not a filter element, then the whole filter chain is ignored. No filter is applied to the object."
-    },
     "<number-optional-number>": {
       "value": "<number> <number>?"
     },

package/package.json

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

package/scroll-animations.json

@@ -141,7 +141,7 @@
     },
     "animation-delay-start": {
       "name": "animation-delay-start",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]",
+      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -172,12 +172,13 @@
   },
   "atrules": {},
   "valuespaces": {
+    "<scroll()>": {
+      "prose": "The scroll() functional notation can be used as a value of animation-timeline and specifies a scroll progress timeline. Its syntax is",
+      "value": "scroll( [ <scroller> || <axis> ]? )"
+    },
     "<timeline-range-name>": {
       "prose": "A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be attached to a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges."
     },
-    "<scroll()>": {
-      "value": "scroll( <axis>? <scroller>? )"
-    },
     "<axis>": {
       "value": "block | inline | vertical | horizontal"
     },