@webref/css 6.9.0 → 6.9.2

package/css-anchor-position.json

@@ -48,6 +48,41 @@
         "anchorDefault"
       ]
     },
+    {
+      "name": "inset-area",
+      "value": "none | <inset-area-span> [ / <inset-area-span> ]?",
+      "initial": "none",
+      "appliesTo": "positioned elements with a default anchor element",
+      "inherited": "no",
+      "percentages": "n/a",
+      "computedValue": "as specified",
+      "canonicalOrder": "per grammar",
+      "animationType": "TBD",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The property has no effect.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<inset-area-span>",
+          "prose": "Behaves as <inset-area-span> / all, filling the entire row/column of the grid indicated by the specified value.",
+          "type": "value",
+          "value": "<inset-area-span>"
+        },
+        {
+          "name": "<inset-area-span> [ / <inset-area-span> ]?",
+          "prose": "If the element does not have a default anchor element, or is not an absolutely-positioned element, this value has no effect. Otherwise, the two spans define a rectangular region of the inset-area grid, and have the following effects: Any auto inset properties compute to the appropriate value to match the rectangular region. The normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned element. See § 3.1.1 Resolving <inset-area-span>s for details on both of these effects. If the two <inset-area-span>s do not define a valid region, this property is invalid.",
+          "type": "value",
+          "value": "<inset-area-span> [ / <inset-area-span> ]?"
+        }
+      ],
+      "styleDeclaration": [
+        "inset-area",
+        "insetArea"
+      ]
+    },
     {
       "name": "justify-self",
       "newValues": "anchor-center",
@@ -180,9 +215,124 @@
   ],
   "selectors": [],
   "values": [
+    {
+      "name": "<inset-area-span>",
+      "type": "type",
+      "value": "[ start || end || center ] | [ self-start || self-end || center ] | [ top || bottom || center ] | [ left || right || center ] | [ x-start || x-end || center ] | [ y-start || y-end || center ] | [ x-self-start || x-self-end || center ] | [ y-self-start || y-self-end || center ] | all",
+      "values": [
+        {
+          "name": "all",
+          "prose": "All three regions of that axis, spanning the entire breadth of the containing block.",
+          "type": "value",
+          "value": "all"
+        },
+        {
+          "name": "start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "end"
+        },
+        {
+          "name": "self-start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "self-start"
+        },
+        {
+          "name": "self-end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "self-end"
+        },
+        {
+          "name": "top",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "top"
+        },
+        {
+          "name": "bottom",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "bottom"
+        },
+        {
+          "name": "left",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "right",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "y-start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "y-start"
+        },
+        {
+          "name": "y-end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "y-end"
+        },
+        {
+          "name": "y-self-start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "y-self-start"
+        },
+        {
+          "name": "y-self-end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "y-self-end"
+        },
+        {
+          "name": "x-start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "x-start"
+        },
+        {
+          "name": "x-end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "x-end"
+        },
+        {
+          "name": "x-self-start",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "x-self-start"
+        },
+        {
+          "name": "x-self-end",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "x-self-end"
+        },
+        {
+          "name": "center",
+          "prose": "Any single keyword refers just to that region in the axis. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the element’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The \"self\" logical keyword (self-start, x-self-end, etc) are identical, but refer to the element’s own writing mode.",
+          "type": "value",
+          "value": "center"
+        }
+      ]
+    },
     {
       "name": "anchor()",
-      "prose": "An absolutely-positioned element can use the anchor() function in its inset properties to refer to the position of one or more anchor elements. The anchor() function resolves to a <length>, exactly what is needed to position the given inset edge to the specified position on the anchor element.",
+      "prose": "An absolutely-positioned element can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor elements. The anchor() function resolves to a <length>.",
       "type": "function",
       "value": "anchor( <anchor-element>? <anchor-side>, <length-percentage>? )",
       "values": [
@@ -200,13 +350,13 @@
         },
         {
           "name": "auto",
-          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.1.1 Automatic Anchor Positioning for more details.",
+          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.2.1 Automatic Anchor Positioning for more details.",
           "type": "value",
           "value": "auto"
         },
         {
           "name": "auto-same",
-          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.1.1 Automatic Anchor Positioning for more details.",
+          "prose": "Resolves to one of the anchor element’s sides, depending on which inset property it’s used in. Also triggers automatic fallback behavior. See § 3.2.1 Automatic Anchor Positioning for more details.",
           "type": "value",
           "value": "auto-same"
         },

package/css-backgrounds-4.json

@@ -97,6 +97,21 @@
         "background-clip",
         "backgroundClip"
       ]
+    },
+    {
+      "name": "background-tbd",
+      "value": "<bg-layer>#",
+      "initial": "see individual properties",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "animationType": "see individual properties",
+      "styleDeclaration": [
+        "background-tbd",
+        "backgroundTbd"
+      ]
     }
   ],
   "atrules": [],
@@ -110,13 +125,13 @@
     {
       "name": "<bg-clip>",
       "type": "type",
-      "value": "<box> | border | text",
+      "value": "<visual-box> | border | text",
       "values": [
         {
-          "name": "<box>",
+          "name": "<visual-box>",
           "prose": "The background is painted within (clipped to) the specified box of the element.",
           "type": "value",
-          "value": "<box>"
+          "value": "<visual-box>"
         },
         {
           "name": "text",

package/css-backgrounds.json

@@ -788,7 +788,7 @@
     {
       "name": "<bg-position>",
       "type": "type",
-      "value": "[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]"
+      "value": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]"
     },
     {
       "name": "<bg-size>",

package/css-borders.json

@@ -420,6 +420,36 @@
       "computedValue": "list, each item either none or a pair of offsets (horizontal and vertical) from the element‘s box",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value, treating none as 0 0 when interpolated with non-none values.",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The shadow will not be rendered. The values of other box shadow properties corresponding to this shadow have no effect.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "1st <length>",
+          "prose": "Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.",
+          "type": "value",
+          "value": "1st <length>"
+        },
+        {
+          "name": "horizontal offset",
+          "type": "value",
+          "value": "horizontal offset"
+        },
+        {
+          "name": "2nd <length>",
+          "prose": "Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.",
+          "type": "value",
+          "value": "2nd <length>"
+        },
+        {
+          "name": "vertical offset",
+          "type": "value",
+          "value": "vertical offset"
+        }
+      ],
       "styleDeclaration": [
         "box-shadow-offset",
         "boxShadowOffset"

package/css-box.json

@@ -223,36 +223,127 @@
   "atrules": [],
   "selectors": [],
   "values": [
+    {
+      "name": "<box>",
+      "prose": "The following <box> CSS keywords are defined for use in properties (such as transform-box and background-clip) that need to refer to various box edges:",
+      "type": "type",
+      "values": [
+        {
+          "name": "content-box",
+          "prose": "Refers to the content box or content edge. (In an SVG context, treated as fill-box.)",
+          "type": "value",
+          "value": "content-box"
+        },
+        {
+          "name": "padding-box",
+          "prose": "Refers to the padding box or padding edge. (In an SVG context, treated as fill-box.)",
+          "type": "value",
+          "value": "padding-box"
+        },
+        {
+          "name": "border-box",
+          "prose": "Refers to the border box or border edge. (In an SVG context, treated as stroke-box.)",
+          "type": "value",
+          "value": "border-box"
+        },
+        {
+          "name": "margin-box",
+          "prose": "Refers to the margin box or margin edge. (In an SVG context, treated as stroke-box.)",
+          "type": "value",
+          "value": "margin-box"
+        },
+        {
+          "name": "fill-box",
+          "prose": "Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)",
+          "type": "value",
+          "value": "fill-box"
+        },
+        {
+          "name": "stroke-box",
+          "prose": "Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)",
+          "type": "value",
+          "value": "stroke-box"
+        },
+        {
+          "name": "view-box",
+          "prose": "Refers to the nearest SVG viewport’s origin box, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)",
+          "type": "value",
+          "value": "view-box"
+        }
+      ]
+    },
     {
       "name": "<visual-box>",
       "type": "type",
-      "value": "content-box | padding-box | border-box"
+      "value": "content-box | padding-box | border-box",
+      "values": [
+        {
+          "name": "content-box",
+          "prose": "Refers to the content box or content edge. (In an SVG context, treated as fill-box.)",
+          "type": "value",
+          "value": "content-box"
+        },
+        {
+          "name": "padding-box",
+          "prose": "Refers to the padding box or padding edge. (In an SVG context, treated as fill-box.)",
+          "type": "value",
+          "value": "padding-box"
+        },
+        {
+          "name": "border-box",
+          "prose": "Refers to the border box or border edge. (In an SVG context, treated as stroke-box.)",
+          "type": "value",
+          "value": "border-box"
+        }
+      ]
     },
     {
       "name": "<layout-box>",
       "type": "type",
-      "value": "content-box | padding-box | border-box | margin-box"
+      "value": "<visual-box> | margin-box",
+      "values": [
+        {
+          "name": "margin-box",
+          "prose": "Refers to the margin box or margin edge. (In an SVG context, treated as stroke-box.)",
+          "type": "value",
+          "value": "margin-box"
+        }
+      ]
     },
     {
       "name": "<paint-box>",
       "type": "type",
-      "value": "content-box | padding-box | border-box | fill-box | stroke-box"
+      "value": "<visual-box> | fill-box | stroke-box",
+      "values": [
+        {
+          "name": "fill-box",
+          "prose": "Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)",
+          "type": "value",
+          "value": "fill-box"
+        },
+        {
+          "name": "stroke-box",
+          "prose": "Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)",
+          "type": "value",
+          "value": "stroke-box"
+        }
+      ]
     },
     {
       "name": "<coord-box>",
       "type": "type",
-      "value": "content-box | padding-box | border-box | fill-box | stroke-box | view-box"
+      "value": "<paint-box> | view-box",
+      "values": [
+        {
+          "name": "view-box",
+          "prose": "Refers to the nearest SVG viewport’s origin box, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)",
+          "type": "value",
+          "value": "view-box"
+        }
+      ]
     }
   ],
   "warnings": [
-    {
-      "msg": "Dangling value",
-      "name": "content-box",
-      "prose": "Refers to the content box or content edge. (In an SVG context, treated as fill-box.)",
-      "type": "value",
-      "value": "content-box",
-      "for": "<box>"
-    },
     {
       "msg": "Dangling value",
       "name": "content-box",
@@ -269,14 +360,6 @@
       "value": "content-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "padding-box",
-      "prose": "Refers to the padding box or padding edge. (In an SVG context, treated as fill-box.)",
-      "type": "value",
-      "value": "padding-box",
-      "for": "<box>"
-    },
     {
       "msg": "Dangling value",
       "name": "padding-box",
@@ -293,14 +376,6 @@
       "value": "padding-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "border-box",
-      "prose": "Refers to the border box or border edge. (In an SVG context, treated as stroke-box.)",
-      "type": "value",
-      "value": "border-box",
-      "for": "<box>"
-    },
     {
       "msg": "Dangling value",
       "name": "border-box",
@@ -317,14 +392,6 @@
       "value": "border-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "margin-box",
-      "prose": "Refers to the margin box or margin edge. (In an SVG context, treated as stroke-box.)",
-      "type": "value",
-      "value": "margin-box",
-      "for": "<box>"
-    },
     {
       "msg": "Dangling value",
       "name": "margin-box",
@@ -341,22 +408,6 @@
       "value": "margin-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "fill-box",
-      "prose": "Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)",
-      "type": "value",
-      "value": "fill-box",
-      "for": "<box>"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "fill-box",
-      "prose": "Refers to the object bounding box or its edges. (In a CSS box context, treated as content-box.)",
-      "type": "value",
-      "value": "fill-box",
-      "for": "<shape-box>"
-    },
     {
       "msg": "Dangling value",
       "name": "fill-box",
@@ -365,22 +416,6 @@
       "value": "fill-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "stroke-box",
-      "prose": "Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)",
-      "type": "value",
-      "value": "stroke-box",
-      "for": "<box>"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "stroke-box",
-      "prose": "Refers to the stroke bounding box or its edges. (In a CSS box context, treated as border-box.)",
-      "type": "value",
-      "value": "stroke-box",
-      "for": "<shape-box>"
-    },
     {
       "msg": "Dangling value",
       "name": "stroke-box",
@@ -389,22 +424,6 @@
       "value": "stroke-box",
       "for": "<geometry-box>"
     },
-    {
-      "msg": "Dangling value",
-      "name": "view-box",
-      "prose": "Refers to the nearest SVG viewport’s origin box, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)",
-      "type": "value",
-      "value": "view-box",
-      "for": "<box>"
-    },
-    {
-      "msg": "Dangling value",
-      "name": "view-box",
-      "prose": "Refers to the nearest SVG viewport’s origin box, which is a rectangle with the width and height of the SVG viewport, positioned such that its top left corner is anchored at the coordinate system origin. (In a CSS box context, treated as border-box.)",
-      "type": "value",
-      "value": "view-box",
-      "for": "<shape-box>"
-    },
     {
       "msg": "Dangling value",
       "name": "view-box",