@webref/css 4.2.1 → 4.3.0

package/CSS.json

@@ -67,6 +67,33 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<uri>": {
+      "prose": "URI values (Uniform Resource Identifiers, see [RFC3986], which includes URLs, URNs, etc) in this specification are denoted by <uri>. The functional notation used to designate URIs in property values is \"url()\", as in:"
+    },
+    "<Counters>": {
+      "prose": "Counters are denoted by case-sensitive identifiers (see the counter-increment and counter-reset properties). To refer to the value of a counter, the notation counter(<identifier>) or 'counter(<identifier>, <'list-style-type>), with optional white space separating the tokens, is used. The default style is decimal."
+    },
+    "<counter(<identifier>)>": {
+      "prose": "Counters are denoted by case-sensitive identifiers (see the counter-increment and counter-reset properties). To refer to the value of a counter, the notation counter(<identifier>) or 'counter(<identifier>, <'list-style-type>), with optional white space separating the tokens, is used. The default style is decimal."
+    },
+    "<counters(<identifier>, <string>)>": {
+      "prose": "To refer to a sequence of nested counters of the same name, the notation is counters(<identifier>, <string>) or 'counters(<identifier>, <string>, <'list-style-type>) with optional white space separating the tokens."
+    },
+    "<Strings>": {
+      "prose": "Strings can either be written with double quotes or with single quotes. Double quotes cannot occur inside double quotes, unless escaped (e.g., as \\\" or as \\22). Analogously for single quotes (e.g., \"\\'\" or \"\\27\")."
+    },
+    "<margin-width>": {
+      "prose": "The properties defined in this section refer to the <margin-width> value type, which may take one of the following values:"
+    },
+    "<padding-width>": {
+      "prose": "The properties defined in this section refer to the <padding-width> value type, which may take one of the following values:"
+    },
+    "<border-width>": {
+      "prose": "The border width properties specify the width of the border area. The properties defined in this section refer to the <border-width> value type, which may take one of the following values:"
+    },
+    "<border-style>": {
+      "prose": "The border style properties specify the line style of a box’s border (solid, double, dashed, etc.). The properties defined in this section refer to the <border-style> value type, which may take one of the following values:"
+    },
     "<shape>": {
       "prose": "In CSS 2, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect. <top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box). When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when <left> and <right> have the same value (or <top> and <bottom> have the same value), and conversely that no pixels within the element’s border box remain hidden when these values are auto."
     }

package/compat.json

@@ -4,23 +4,6 @@
     "url": "https://compat.spec.whatwg.org/"
   },
   "properties": {
-    "-webkit-background-clip": {
-      "name": "-webkit-background-clip",
-      "value": "border-box | padding-box | content-box | text",
-      "initial": "none",
-      "appliesTo": "all elements",
-      "inherited": "no",
-      "percentages": "N/A",
-      "computedValue": "\"text\"",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "media": "visual",
-      "styleDeclaration": [
-        "-webkit-background-clip",
-        "WebkitBackgroundClip",
-        "webkitBackgroundClip"
-      ]
-    },
     "-webkit-text-fill-color": {
       "name": "-webkit-text-fill-color",
       "value": "<color>",
@@ -209,6 +192,14 @@
         "webkitBackfaceVisibility"
       ]
     },
+    "-webkit-background-clip": {
+      "name": "-webkit-background-clip",
+      "styleDeclaration": [
+        "-webkit-background-clip",
+        "WebkitBackgroundClip",
+        "webkitBackgroundClip"
+      ]
+    },
     "-webkit-background-origin": {
       "name": "-webkit-background-origin",
       "styleDeclaration": [

package/css-animations-2.json

@@ -40,14 +40,14 @@
     "<single-animation-composition>": {
       "value": "replace | add | accumulate"
     },
-    "<single-animation-timeline>": {
-      "value": "auto | none | <timeline-name>"
-    },
     "<timeline-name>": {
       "value": "<custom-ident> | <string>"
     },
     "<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>"
+    },
+    "<single-animation-timeline>": {
+      "value": "auto | none | <timeline-name>"
     }
   }
 }

package/css-animations.json

@@ -156,6 +156,9 @@
     "<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> ]"
     },
+    "<AnimationEvent(type, animationEventInitDict)>": {
+      "prose": "AnimationEvent(type, animationEventInitDict) is an event constructor."
+    },
     "<keyframes-name>": {
       "value": "<custom-ident> | <string>"
     },

package/css-cascade-6.json

@@ -6,6 +6,12 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
+    "<scope-start>": {
+      "prose": "The <scope-start> is a <forgiving-selector-list>. Each element matched by <scope-start> is a scoping element, creating a scope with itself as the scoping root."
+    },
+    "<scope-end>": {
+      "prose": "The <scope-end> is a <forgiving-selector-list> that is scoped by the <scope-start> selector, with the scoping roots as :scope elements. Each element matched by <scope-end> is a scoping limit. The scoping limit elements define the lower bounds of a scope, so that scoped selectors are not able to match any elements nested within them."
+    },
     "<selector-scope>": {
       "value": "( <scope-start> [/ <scope-end>]? )"
     }

package/css-color-5.json

@@ -34,17 +34,14 @@
     "<color-mix()>": {
       "value": "color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})"
     },
-    "<color-contrast()>": {
-      "value": "color-contrast( <color> vs <color>#{2,} [ to [<number> | AA | AA-large | AAA | AAA-large]]? )"
-    },
     "<rgb()>": {
-      "value": "rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? ) | rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? rgb( [ from <color> ]? [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
+      "value": "rgb( [<percentage> | none]{3} [ / [<alpha-value> | none] ]? ) | rgb( [<number> | none]{3} [ / [<alpha-value> | none] ]? ) | rgb( [ from <color> ]? [ <number> | <percentage> | none]{3} [ / [<alpha-value> | none] ]? )"
     },
     "<alpha-value>": {
       "value": "<number> | <percentage>"
     },
     "<hsl()>": {
-      "value": "hsl(([from <color>]? [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
+      "value": "hsl([from <color>]? [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
     },
     "<hwb()>": {
       "value": "hwb([from <color>]? [<hue> | none] [<percentage> | <number> | none] [<percentage> | <number> | none] [ / [<alpha-value> | none] ]? )"
@@ -62,7 +59,25 @@
       "value": "oklch([from <color>]? [<percentage> | <number> | none] [<percentage> | <number> | none] [<hue> | none] [ / [<alpha-value> | none] ]? )"
     },
     "<color()>": {
-      "value": "color( [from <color>]? <colorspace-params> [ / <alpha-value> ]? )"
+      "value": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
+    },
+    "<colorspace-params>": {
+      "value": "[<custom-params> | <predefined-rgb-params> | <xyz-params>]"
+    },
+    "<custom-params>": {
+      "value": "<dashed-ident> [ <number> | <percentage> | none ]#"
+    },
+    "<predefined-rgb-params>": {
+      "value": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
+    },
+    "<predefined-rgb>": {
+      "value": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020"
+    },
+    "<xyz-params>": {
+      "value": "<xyz> [ <number> | <percentage> | none ]{3}"
+    },
+    "<xyz>": {
+      "value": "xyz | xyz-d50 | xyz-d65"
     },
     "<device-cmyk()>": {
       "value": "device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )"

package/css-color.json

@@ -36,8 +36,30 @@
   "descriptors": {},
   "valuespaces": {
     "<color>": {
+      "prose": "Colors in CSS are represented by the <color> type:",
       "value": "<absolute-color-base> | currentcolor | <system-color> | <device-cmyk()>"
     },
+    "<rgba()>": {
+      "prose": "Also, an rgba() legacy color syntax also exists, with an identical grammar and behavior to rgb()."
+    },
+    "<hex-color>": {
+      "prose": "The syntax of a <hex-color> is a <hash-token> token whose value consists of 3, 4, 6, or 8 hexadecimal digits. In other words, a hex color is written as a hash character, \"#\", followed by some number of digits 0-9 or letters a-f (the case of the letters doesn’t matter - #00ff00 is identical to #00FF00)."
+    },
+    "<named-color>": {
+      "prose": "CSS defines a large set of named colors, so that common colors can be written and read more easily. A <named-color> is written as an <ident>, accepted anywhere a <color> is. As usual for CSS-defined <ident>s, all of these keywords are ASCII case-insensitive."
+    },
+    "<system-color>": {
+      "prose": "However, in forced colors mode, most colors on the page are forced into a restricted, user-chosen palette. The <system-color> keywords expose these user-chosen colors so that the rest of the page can integrate with this restricted palette."
+    },
+    "<hsla()>": {
+      "prose": "Also, an hsla() legacy color syntax also exists, with an identical grammar and behavior to hsl()."
+    },
+    "<deprecated-color>": {
+      "prose": "The deprecated system colors are represented as the <deprecated-color> sub-type, and are defined as:"
+    },
+    "<quirky-color>": {
+      "prose": "When CSS is being parsed in quirks mode, <quirky-color> is a type of <color> that is only valid in certain properties:"
+    },
     "<absolute-color-base>": {
       "value": "<hex-color> | <named-color> | transparent | <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
     },
@@ -71,7 +93,7 @@
       "value": "oklch( [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )"
     },
     "<color()>": {
-      "value": "color( <colorspace-params> [ / <alpha-value> ]? )"
+      "value": "color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
     },
     "<colorspace-params>": {
       "value": "[ <predefined-rgb-params> | <xyz-params>]"

package/css-conditional-5.json

@@ -10,13 +10,13 @@
       "value": "<supports-selector-fn> | <supports-font-tech-fn> | <supports-font-format-fn> | <supports-decl>"
     },
     "<supports-font-tech-fn>": {
-      "value": "font-tech ( <font-tech> )"
+      "value": "font-tech( <font-tech> )"
     },
     "<font-tech>": {
       "value": "[ features-opentype | features-aat | features-graphite | color-colrv0 | color-colrv1 | color-svg | color-sbix | color-cbdt | variations | palettes | incremental ]"
     },
     "<supports-font-format-fn>": {
-      "value": "font-format ( <font-format> )"
+      "value": "font-format( <font-format> )"
     },
     "<media()>": {
       "value": "media( [ <mf-plain> | <mf-boolean> | <mf-range> ] )"

package/css-contain-3.json

@@ -107,6 +107,15 @@
     ]
   },
   "valuespaces": {
+    "<size-feature>": {
+      "prose": "A container size query allows querying the size of the query container’s principal box. It is a boolean combination of individual size features (<size-feature>) that each query a single, specific dimensional feature of the query container. The syntax of a <size-feature> is the same as for a media feature: a feature name, a comparator, and a value. [mediaqueries-5] The boolean syntax and logic combining size features into a size query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])"
+    },
+    "<style-feature>": {
+      "prose": "A container style query allows querying the computed values of the query container. It is a boolean combination of individual style features (<style-feature>) that each query a single, specific property of the query container. The syntax of a <style-feature> is the same as for a declaration [CSS-SYNTAX-3], and its query is true if the computed value of the given property on the query container matches the given value (which is also computed with respect to the query container), unknown if the property or its value is invalid or unsupported, and false otherwise. The boolean syntax and logic combining style features into a style query is the same as for CSS feature queries. (See @supports. [CSS-CONDITIONAL-3])"
+    },
+    "<container-name>": {
+      "value": "<custom-ident>"
+    },
     "<container-condition>": {
       "value": "not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]"
     },

package/css-content.json

@@ -95,12 +95,19 @@
   },
   "descriptors": {},
   "valuespaces": {
-    "<quote>": {
-      "value": "open-quote | close-quote | no-open-quote | no-close-quote"
+    "<content-replacement>": {
+      "value": "<image>"
+    },
+    "<content-list>": {
+      "value": "[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+"
     },
     "<leader()>": {
       "value": "leader( <leader-type> )"
     },
+    "<image>": {},
+    "<quote>": {
+      "value": "open-quote | close-quote | no-open-quote | no-close-quote"
+    },
     "<leader-type>": {
       "value": "dotted | solid | space | <string>"
     },
@@ -121,12 +128,6 @@
     },
     "<content()>": {
       "value": "content( [ text | before | after | first-letter | marker ]? )"
-    },
-    "<content-replacement>": {
-      "value": "<image>"
-    },
-    "<content-list>": {
-      "value": "[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+"
     }
   }
 }

package/css-counter-styles.json

@@ -87,6 +87,9 @@
     ]
   },
   "valuespaces": {
+    "<counter-style-name>": {
+      "prose": "<counter-style-name> is a <custom-ident> that is not an ASCII case-insensitive match for none. The <counter-style-name> is a tree-scoped name."
+    },
     "<symbol>": {
       "value": "<string> | <image> | <custom-ident>"
     },

package/css-easing.json

@@ -6,23 +6,35 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
-    "<cubic-bezier()>": {
-      "value": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
-    },
-    "<steps()>": {
-      "value": "steps(<integer>[, <step-position> ]?)"
-    },
     "<easing-function>": {
       "value": "linear | <cubic-bezier-easing-function> | <step-easing-function>"
     },
+    "<linear-spline()>": {
+      "value": "linear-spline(<linear-spline-stop-list>)"
+    },
     "<cubic-bezier-easing-function>": {
       "value": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
     },
+    "<cubic-bezier()>": {
+      "value": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
+    },
     "<step-easing-function>": {
-      "value": "step-start | step-end | steps(<integer>[, <step-position>]?)"
+      "value": "step-start | step-end | steps(<integer>[, <step-position>]?) <step-position>"
     },
     "<step-position>": {
       "value": "jump-start | jump-end | jump-none | jump-both | start | end"
+    },
+    "<steps()>": {
+      "value": "steps(<integer>[, <step-position> ]?)"
+    },
+    "<linear-spline-stop-list>": {
+      "value": "[ <linear-spline-stop> ]#"
+    },
+    "<linear-spline-stop>": {
+      "value": "<number> && <linear-spline-stop-length>?"
+    },
+    "<linear-spline-stop-length>": {
+      "value": "<percentage>{1,2}"
     }
   }
 }

package/css-extensions.json

@@ -6,6 +6,9 @@
   "properties": {},
   "descriptors": {},
   "valuespaces": {
+    "<extension-name>": {
+      "prose": "All extensions defined in this specification use a common syntax for defining their ”names”: the <extension-name> production. An <extension-name> is any identifier that starts with two dashes (U+002D HYPHEN-MINUS), like --foo, or even exotic names like -- or ------. The CSS language will never use identifiers of this form for any language-defined purpose, so it’s safe to use them for author-defined purposes without ever having to worry about colliding with CSS-defined names."
+    },
     "<custom-selector>": {
       "value": "<custom-arg>? : <extension-name> [ ( <custom-arg>+#? ) ]? ;"
     },

package/css-fonts.json

@@ -524,6 +524,18 @@
     ]
   },
   "valuespaces": {
+    "<family-name>": {
+      "prose": "The name of a font family, such as Helvetica or Verdana in the previous example."
+    },
+    "<generic-family>": {
+      "prose": "Each <generic-family> keyword represents a generic font choice, and behaves as an alias for one or more locally-installed fonts belonging to the specified generic font category. A <generic-family> can thus be used as a reliable fallback for when an author’s more specific font choices are not available. Authors are encouraged to append a generic font family as a last alternative for improved robustness. Note that <generic-family> keywords cannot be quoted (otherwise they are interpreted as a <family-name>). The set of generic family keywords is defined in § 2.1.3 Generic font families."
+    },
+    "<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]>]"
     },
@@ -583,36 +595,6 @@
     },
     "<feature-tag-value>": {
       "value": "<string> [ <integer> | on | off ]?"
-    },
-    "<stylistic()>": {
-      "value": "stylistic(<feature-value-name>)"
-    },
-    "<styleset()>": {
-      "value": "styleset(<feature-value-name>#)"
-    },
-    "<character-variant()>": {
-      "value": "character-variant(<feature-value-name>#)"
-    },
-    "<swash()>": {
-      "value": "swash(<feature-value-name>)"
-    },
-    "<ornaments()>": {
-      "value": "ornaments(<feature-value-name>)"
-    },
-    "<annotation()>": {
-      "value": "annotation(<feature-value-name>)"
-    },
-    "<family-name>": {
-      "prose": "The name of a font family, such as Helvetica or Verdana in the previous example."
-    },
-    "<generic-family>": {
-      "prose": "Each <generic-family> keyword represents a generic font choice, and behaves as an alias for one or more locally-installed fonts belonging to the specified generic font category. A <generic-family> can thus be used as a reliable fallback for when an author’s more specific font choices are not available. Authors are encouraged to append a generic font family as a last alternative for improved robustness. Note that <generic-family> keywords cannot be quoted (otherwise they are interpreted as a <family-name>). The set of generic family keywords is defined in § 2.1.3 Generic font families."
-    },
-    "<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."
     }
   }
 }

package/css-grid.json

@@ -231,6 +231,12 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<repeat()>": {
+      "prose": "The repeat() notation represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form."
+    },
+    "<flex>": {
+      "prose": "A flexible length or <flex> is a dimension with the fr unit, which represents a fraction of the leftover space in the grid container. Tracks sized with fr units are called flexible tracks as they flex in response to leftover space similar to how flex items with a zero base size fill space in a flex container."
+    },
     "<track-list>": {
       "value": "[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?"
     },
@@ -275,9 +281,6 @@
     },
     "<grid-line>": {
       "value": "auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]"
-    },
-    "<fit-content()>": {
-      "value": "fit-content( <length-percentage> )"
     }
   }
 }

package/css-highlight-api.json

@@ -0,0 +1,13 @@
+{
+  "spec": {
+    "title": "CSS Custom Highlight API Module Level 1",
+    "url": "https://drafts.csswg.org/css-highlight-api-1/"
+  },
+  "properties": {},
+  "descriptors": {},
+  "valuespaces": {
+    "<custom-highlight-name>": {
+      "prose": "The ::highlight(<custom-highlight-name>) pseudo-element (also known as the custom highlight pseudo-element) represents the portion of a document that is being contained or partially contained in all the ranges of the registered custom highlight with the custom highlight name <custom-highlight-name>, if any. <custom-highlight-name> must be a valid CSS <ident-token>."
+    }
+  }
+}

package/css-images-4.json

@@ -34,21 +34,6 @@
         "objectFit"
       ]
     },
-    "object-overflow": {
-      "name": "object-overflow",
-      "value": "clip | visible",
-      "initial": "clip",
-      "appliesTo": "replaced elements",
-      "inherited": "no",
-      "percentages": "n/a",
-      "computedValue": "as specified",
-      "canonicalOrder": "per grammar",
-      "animationType": "discrete",
-      "styleDeclaration": [
-        "object-overflow",
-        "objectOverflow"
-      ]
-    },
     "image-resolution": {
       "name": "image-resolution",
       "value": "[ from-image || <resolution> ] && snap?",
@@ -67,6 +52,21 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<type( <string> )>": {
+      "prose": "A type( <string> ) function (optional), specifying the image’s MIME type in the <string>."
+    },
+    "<repeating-linear-gradient()>": {
+      "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
+    },
+    "<repeating-radial-gradient()>": {
+      "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
+    },
+    "<repeating-conic-gradient()>": {
+      "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
+    },
+    "<-webkit-image-set()>": {
+      "prose": "Implementations must accept -webkit-image-set() as a parse-time alias of image-set(). (It’s a valid value, with identical arguments to image-set(), and is turned into image-set() during parsing.)"
+    },
     "<image>": {
       "value": "<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>"
     },

package/css-images.json

@@ -67,8 +67,14 @@
   },
   "descriptors": {},
   "valuespaces": {
-    "<image>": {
-      "value": "<url> | <gradient>"
+    "<size>": {
+      "prose": "Both circle and ellipse gradients accept the following keywords as their <size>:"
+    },
+    "<repeating-linear-gradient()>": {
+      "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
+    },
+    "<repeating-radial-gradient()>": {
+      "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
     },
     "<gradient>": {
       "value": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>"
@@ -90,12 +96,6 @@
     },
     "<linear-color-hint>": {
       "value": "<length-percentage>"
-    },
-    "<ending-shape>": {
-      "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise."
-    },
-    "<length>": {
-      "prose": "Gives the radius of the circle explicitly. Negative values are invalid."
     }
   }
 }

package/css-lists.json

@@ -127,6 +127,9 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<counter-name>": {
+      "prose": "Counters are referred to in CSS syntax using the <counter-name> type, which represents their name as a <custom-ident>. A <counter-name> name cannot match the keyword none; such an identifier is invalid as a <counter-name>."
+    },
     "<reversed-counter-name>": {
       "value": "reversed( <counter-name> )"
     },

package/css-masking.json

@@ -325,6 +325,21 @@
   },
   "descriptors": {},
   "valuespaces": {
+    "<rect()>": {
+      "value": "rect( <top>, <right>, <bottom>, <left> )"
+    },
+    "<top>": {
+      "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
+    },
+    "<right>": {
+      "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
+    },
+    "<bottom>": {
+      "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
+    },
+    "<left>": {
+      "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
+    },
     "<clip-source>": {
       "value": "<url>"
     },
@@ -345,12 +360,6 @@
     },
     "<mask-layer>": {
       "value": "<mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>"
-    },
-    "<rect()>": {
-      "value": "rect( <top>, <right>, <bottom>, <left> )"
-    },
-    "<url>": {
-      "prose": "A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image."
     }
   }
 }

package/css-overflow.json

@@ -8,10 +8,10 @@
       "name": "overflow-x",
       "value": "visible | hidden | clip | scroll | auto",
       "initial": "visible",
-      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
+      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT], and replaced elements",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip",
+      "computedValue": "usually specified value, but see text",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "styleDeclaration": [
@@ -23,10 +23,10 @@
       "name": "overflow-y",
       "value": "visible | hidden | clip | scroll | auto",
       "initial": "visible",
-      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
+      "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT], and replaced elements",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip",
+      "computedValue": "usually specified value, but see text",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
       "styleDeclaration": [

package/css-page-floats.json

@@ -81,10 +81,10 @@
   "descriptors": {},
   "valuespaces": {
     "<snap-block()>": {
-      "value": "snap-block( <length> , [ start | end | near ]? )"
+      "value": "snap-block()"
     },
     "<snap-inline()>": {
-      "value": "snap-inline( <length> , [ left | right | near ]? )"
+      "value": "snap-inline()"
     }
   }
 }

package/css-page.json

@@ -58,6 +58,9 @@
     ]
   },
   "valuespaces": {
+    "<page-size>": {
+      "prose": "A page size can be specified using one of the following media names. This is the equivalent of specifying size using length values. The definition of the media names comes from Media Standardized Names [PWGMSN]."
+    },
     "<page-selector-list>": {
       "value": "<page-selector>#"
     },
@@ -66,9 +69,6 @@
     },
     "<pseudo-page>": {
       "value": "':' [ left | right | first | blank ]"
-    },
-    "<page-size>": {
-      "prose": "A page size can be specified using one of the following media names. This is the equivalent of specifying size using length values. The definition of the media names comes from Media Standardized Names [PWGMSN]."
     }
   }
 }