@webref/css 5.4.4 → 6.0.0

package/css-highlight-api.json

@@ -3,11 +3,19 @@
     "title": "CSS Custom Highlight API Module Level 1",
     "url": "https://drafts.csswg.org/css-highlight-api-1/"
   },
-  "properties": {},
-  "atrules": {},
-  "valuespaces": {
-    "<custom-highlight-name>": {
+  "properties": [],
+  "atrules": [],
+  "selectors": [
+    {
+      "name": "::highlight(<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>."
     }
-  }
+  ],
+  "values": [
+    {
+      "name": "<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>.",
+      "type": "type"
+    }
+  ]
 }

package/css-images-4.json

@@ -3,23 +3,8 @@
     "title": "CSS Images Module Level 4",
     "url": "https://drafts.csswg.org/css-images-4/"
   },
-  "properties": {
-    "object-view-box": {
-      "name": "object-view-box",
-      "value": "none | <basic-shape-rect>",
-      "initial": "none",
-      "appliesTo": "replaced elements",
-      "inherited": "no",
-      "percentages": "n/a",
-      "computedValue": "specified keyword, or computed function",
-      "canonicalOrder": "per grammar",
-      "animationType": "as if possible, otherwise discrete",
-      "styleDeclaration": [
-        "object-view-box",
-        "objectViewBox"
-      ]
-    },
-    "object-fit": {
+  "properties": [
+    {
       "name": "object-fit",
       "value": "fill | none | [contain | cover] || scale-down",
       "initial": "fill",
@@ -29,12 +14,44 @@
       "computedValue": "specified keyword(s)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "fill",
+          "prose": "The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.",
+          "type": "value",
+          "value": "fill"
+        },
+        {
+          "name": "none",
+          "prose": "The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "contain",
+          "prose": "The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height. If the scale-down flag is used, size the content as if none or contain were specified, whichever would result in a smaller concrete object size.",
+          "type": "value",
+          "value": "contain"
+        },
+        {
+          "name": "cover",
+          "prose": "The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height. If the scale-down flag is used, size the content as if none or cover were specified, whichever would result in a smaller concrete object size.",
+          "type": "value",
+          "value": "cover"
+        },
+        {
+          "name": "scale-down",
+          "prose": "Equivalent to contain scale-down.",
+          "type": "value",
+          "value": "scale-down"
+        }
+      ],
       "styleDeclaration": [
         "object-fit",
         "objectFit"
       ]
     },
-    "image-resolution": {
+    {
       "name": "image-resolution",
       "value": "[ from-image || <resolution> ] && snap?",
       "initial": "1dppx",
@@ -44,107 +61,215 @@
       "computedValue": "specified keyword(s) and/or <resolution> (possibly adjusted for snap, see below)",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "<resolution>",
+          "prose": "Specifies the preferred resolution explicitly. A \"dot\" in this case corresponds to a single image pixel.",
+          "type": "value",
+          "value": "<resolution>"
+        },
+        {
+          "name": "from-image",
+          "prose": "The image’s preferred resolution is taken as that specified by the image format (the natural resolution). If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to 1dppx.",
+          "type": "value",
+          "value": "from-image"
+        },
+        {
+          "name": "snap",
+          "prose": "If the \"snap\" keyword is provided, the computed <resolution> (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used natural resolution is the image’s native resolution similarly adjusted.",
+          "type": "value",
+          "value": "snap"
+        }
+      ],
       "styleDeclaration": [
         "image-resolution",
         "imageResolution"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<image-set()>": {
-      "prose": "Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.",
-      "value": "image-set( <image-set-option># )"
-    },
-    "<type()>": {
-      "value": "type( <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>": {
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<image>",
+      "type": "type",
       "value": "<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>"
     },
-    "<image-set-option>": {
+    {
+      "name": "image-set()",
+      "prose": "Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.",
+      "type": "function",
+      "value": "image-set( <image-set-option># )",
+      "values": [
+        {
+          "name": "type()",
+          "value": "type( <string> )",
+          "type": "function"
+        }
+      ]
+    },
+    {
+      "name": "<image-set-option>",
+      "type": "type",
       "value": "[ <image> | <string> ] [ <resolution> || type(<string>) ]"
     },
-    "<image()>": {
+    {
+      "name": "image()",
+      "type": "function",
       "value": "image( <image-tags>? [ <image-src>? , <color>? ]! )"
     },
-    "<image-tags>": {
+    {
+      "name": "<image-tags>",
+      "type": "type",
       "value": "[ ltr | rtl ]"
     },
-    "<image-src>": {
+    {
+      "name": "<image-src>",
+      "type": "type",
       "value": "[ <url> | <string> ]"
     },
-    "<cross-fade()>": {
+    {
+      "name": "cross-fade()",
+      "type": "function",
       "value": "cross-fade( <cf-image># )"
     },
-    "<cf-image>": {
+    {
+      "name": "<cf-image>",
+      "type": "type",
       "value": "<percentage [0,100]>? && [ <image> | <color> ]"
     },
-    "<element()>": {
+    {
+      "name": "element()",
+      "type": "function",
       "value": "element( <id-selector> )"
     },
-    "<gradient>": {
+    {
+      "name": "<gradient>",
+      "type": "type",
       "value": "[ <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()> ]"
     },
-    "<linear-gradient()>": {
+    {
+      "name": "linear-gradient()",
+      "type": "function",
       "value": "linear-gradient( [ <angle> | to <side-or-corner> ]? || <color-interpolation-method>, <color-stop-list> )"
     },
-    "<side-or-corner>": {
+    {
+      "name": "<side-or-corner>",
+      "type": "type",
       "value": "[left | right] || [top | bottom]"
     },
-    "<radial-gradient()>": {
+    {
+      "name": "radial-gradient()",
+      "type": "function",
       "value": "radial-gradient( [[ <ending-shape> || <size> ]? [ at <position> ]? ] || <color-interpolation-method>, <color-stop-list> )"
     },
-    "<conic-gradient()>": {
+    {
+      "name": "conic-gradient()",
+      "type": "function",
       "value": "conic-gradient( [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method>, <angular-color-stop-list> )"
     },
-    "<color-stop-list>": {
+    {
+      "name": "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.",
+      "type": "function"
+    },
+    {
+      "name": "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.",
+      "type": "function"
+    },
+    {
+      "name": "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.",
+      "type": "function"
+    },
+    {
+      "name": "<color-stop-list>",
+      "type": "type",
       "value": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#"
     },
-    "<linear-color-stop>": {
+    {
+      "name": "<linear-color-stop>",
+      "type": "type",
       "value": "<color> && <color-stop-length>?"
     },
-    "<linear-color-hint>": {
+    {
+      "name": "<linear-color-hint>",
+      "type": "type",
       "value": "<length-percentage>"
     },
-    "<color-stop-length>": {
+    {
+      "name": "<color-stop-length>",
+      "type": "type",
       "value": "<length-percentage>{1,2}"
     },
-    "<angular-color-stop-list>": {
+    {
+      "name": "<angular-color-stop-list>",
+      "type": "type",
       "value": "<angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#"
     },
-    "<angular-color-stop>": {
+    {
+      "name": "<angular-color-stop>",
+      "type": "type",
       "value": "<color> && <color-stop-angle>?"
     },
-    "<angular-color-hint>": {
+    {
+      "name": "<angular-color-hint>",
+      "type": "type",
       "value": "<angle-percentage>"
     },
-    "<color-stop-angle>": {
+    {
+      "name": "<color-stop-angle>",
+      "type": "type",
       "value": "<angle-percentage>{1,2}"
     },
-    "<color-stop>": {
+    {
+      "name": "<color-stop>",
+      "type": "type",
       "value": "<color-stop-length> | <color-stop-angle>"
     },
-    "<1d-image>": {
+    {
+      "name": "<image-1D>",
+      "prose": "While <image> values represent a 2-dimensional (2D) image, and <color> can be thought of as a 0-dimensional (0D) image (unvarying in either axis), some contexts require a 1-dimensional (1D) image, which specifies colors along an abstract, directionless, single-axis paint line. The <image-1D> type represents such 1D images, including the stripes() functional notation:",
+      "type": "type",
       "value": "<stripes()>"
     },
-    "<stripes()>": {
-      "value": "stripes( <color-stripe># )"
+    {
+      "name": "stripes()",
+      "prose": "The stripes() function defines a 1D image as a comma-separated list of colored stripes, each placed end-to-end on the paint line in the order given.",
+      "type": "function",
+      "value": "stripes( <color-stripe># )",
+      "values": [
+        {
+          "name": "<percentage [0,100]>",
+          "prose": "Percentage thicknesses are relative to the total width. Only values between 0% and 100% (inclusive) are valid.",
+          "type": "value",
+          "value": "<percentage [0,100]>"
+        },
+        {
+          "name": "<length [0,∞]>",
+          "prose": "Negative length values are invalid.",
+          "type": "value",
+          "value": "<length [0,∞]>"
+        },
+        {
+          "name": "<flex>",
+          "prose": "A <flex> is evaluated as a fraction of the total width relative to the total sum of <flex> entries in the function, after subtracting the thickness of any non-<flex> entries (flooring the subtraction result at zero). If the sum of <flex> values is less than 1fr, the result of the subtraction is multiplied by the sum’s value before being distributed.",
+          "type": "value",
+          "value": "<flex>"
+        }
+      ]
     },
-    "<color-stripe>": {
+    {
+      "name": "<color-stripe>",
+      "prose": "Each <color-stripe> entry defines a solid-color stripe with the specified <color> and thickness. If the thickness is omitted, it defaults to 1fr. Thickness values are intepreted as follows:",
+      "type": "type",
       "value": "<color> && [ <length-percentage> | <flex> ]?"
+    },
+    {
+      "name": "-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.)",
+      "type": "function"
     }
-  }
+  ]
 }

package/css-images.json

@@ -3,8 +3,8 @@
     "title": "CSS Images Module Level 3",
     "url": "https://drafts.csswg.org/css-images-3/"
   },
-  "properties": {
-    "object-fit": {
+  "properties": [
+    {
       "name": "object-fit",
       "value": "fill | contain | cover | none | scale-down",
       "initial": "fill",
@@ -14,12 +14,44 @@
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "fill",
+          "prose": "The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.",
+          "type": "value",
+          "value": "fill"
+        },
+        {
+          "name": "contain",
+          "prose": "The replaced content is sized to maintain its natural aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.",
+          "type": "value",
+          "value": "contain"
+        },
+        {
+          "name": "cover",
+          "prose": "The replaced content is sized to maintain its natural aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.",
+          "type": "value",
+          "value": "cover"
+        },
+        {
+          "name": "none",
+          "prose": "The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "scale-down",
+          "prose": "Size the content as if none or contain were specified, whichever would result in a smaller concrete object size.",
+          "type": "value",
+          "value": "scale-down"
+        }
+      ],
       "styleDeclaration": [
         "object-fit",
         "objectFit"
       ]
     },
-    "object-position": {
+    {
       "name": "object-position",
       "value": "<position>",
       "initial": "50% 50%",
@@ -34,7 +66,7 @@
         "objectPosition"
       ]
     },
-    "image-orientation": {
+    {
       "name": "image-orientation",
       "value": "from-image | none | [ <angle> || flip ]",
       "initial": "from-image",
@@ -44,12 +76,32 @@
       "computedValue": "the specified keyword, or an <angle>, rounded and normalized (see text), plus optionally a flip keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "No additional rotation is applied: the image is oriented as encoded.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "from-image",
+          "prose": "If the image has an orientation specified in its metadata, such as EXIF, this value computes to the angle that the metadata specifies is necessary to correctly orient the image. If necessary, this angle is then rounded and normalized as described above for an <angle> value. If there is no orientation specified in its metadata, this value computes to none.",
+          "type": "value",
+          "value": "from-image"
+        },
+        {
+          "name": "<angle>",
+          "prose": "Positive <angle> values cause the image to be rotated to the right (in a clockwise direction), while negative values cause a rotation to the left. If the <angle> is omitted, it defaults to 0deg. If flip is specified, after rotation the image is flipped horizontally. This value only applies to content images; decorative images continue to behave as from-image. This value is deprecated and is optional for implementations except those conforming to [CSS-PRINT]. The computed value of the property is calculated by rounding the <angle> to the nearest quarter turn, rounding towards positive infinity when that’s ambiguous, then moduloing the value by 1turn (so that it lies in the half-open range [0turn, 1turn)).",
+          "type": "value",
+          "value": "<angle>"
+        }
+      ],
       "styleDeclaration": [
         "image-orientation",
         "imageOrientation"
       ]
     },
-    "image-rendering": {
+    {
       "name": "image-rendering",
       "value": "auto | smooth | high-quality | pixelated | crisp-edges",
       "initial": "auto",
@@ -59,51 +111,118 @@
       "computedValue": "specified keyword",
       "canonicalOrder": "per grammar",
       "animationType": "discrete",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "The scaling algorithm is UA dependent.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "smooth",
+          "prose": "The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that \"smooth\" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.",
+          "type": "value",
+          "value": "smooth"
+        },
+        {
+          "name": "high-quality",
+          "prose": "Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.",
+          "type": "value",
+          "value": "high-quality"
+        },
+        {
+          "name": "pixelated",
+          "prose": "The image is scaled in a way that preserves the pixelated nature of the original as much as possible, but allows minor smoothing instead of awkward distortion when necessary. For each axis, independently determine the integer multiple of its natural size that puts it closest to the target size and is greater than zero. Scale it to this integer-multiple-size using nearest neighbor, then scale it the rest of the way to the target size as for smooth.",
+          "type": "value",
+          "value": "pixelated"
+        },
+        {
+          "name": "crisp-edges",
+          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
+          "type": "value",
+          "value": "crisp-edges"
+        },
+        {
+          "name": "nearest neighbor",
+          "prose": "The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
+          "type": "value",
+          "value": "nearest neighbor"
+        }
+      ],
       "styleDeclaration": [
         "image-rendering",
         "imageRendering"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<linear-gradient()>": {
-      "prose": "The linear-gradient() notation specifies a linear gradient in CSS. Its syntax is as follows:",
-      "value": "linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )"
-    },
-    "<radial-gradient()>": {
-      "prose": "The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.",
-      "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )"
-    },
-    "<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."
-    },
-    "<image>": {
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<image>",
+      "type": "type",
       "value": "<url> | <gradient>"
     },
-    "<gradient>": {
+    {
+      "name": "<gradient>",
+      "type": "type",
       "value": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>"
     },
-    "<side-or-corner>": {
+    {
+      "name": "linear-gradient()",
+      "prose": "The linear-gradient() notation specifies a linear gradient in CSS. Its syntax is as follows:",
+      "type": "function",
+      "value": "linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )"
+    },
+    {
+      "name": "<side-or-corner>",
+      "type": "type",
       "value": "[left | right] || [top | bottom]"
     },
-    "<size>": {
-      "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
+    {
+      "name": "radial-gradient()",
+      "prose": "The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.",
+      "type": "function",
+      "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )",
+      "values": [
+        {
+          "name": "<length [0,∞]>",
+          "prose": "Gives the radius of the circle explicitly. Negative values are invalid.",
+          "type": "value",
+          "value": "<length [0,∞]>"
+        },
+        {
+          "name": "<length-percentage [0,∞]>{2}",
+          "prose": "Gives the size of the ellipse explicitly. The first value represents the horizontal radius, the second the vertical radius. Percentages values are relative to the corresponding dimension of the gradient box. Negative values are invalid.",
+          "type": "value",
+          "value": "<length-percentage [0,∞]>{2}"
+        }
+      ]
+    },
+    {
+      "name": "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.",
+      "type": "function"
     },
-    "<extent-keyword>": {
-      "value": "closest-corner | closest-side | farthest-corner | farthest-side"
+    {
+      "name": "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.",
+      "type": "function"
     },
-    "<color-stop-list>": {
+    {
+      "name": "<color-stop-list>",
+      "type": "type",
       "value": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#"
     },
-    "<linear-color-stop>": {
+    {
+      "name": "<linear-color-stop>",
+      "type": "type",
       "value": "<color> && <length-percentage>?"
     },
-    "<linear-color-hint>": {
+    {
+      "name": "<linear-color-hint>",
+      "type": "type",
       "value": "<length-percentage>"
     }
-  }
+  ]
 }