@webref/css 5.4.4 → 6.0.0

package/css-shapes-2.json

@@ -3,8 +3,8 @@
     "title": "CSS Shapes Module Level 2",
     "url": "https://drafts.csswg.org/css-shapes-2/"
   },
-  "properties": {
-    "shape-inside": {
+  "properties": [
+    {
       "name": "shape-inside",
       "value": "auto | outside-shape | [ <basic-shape> || shape-box ] | <image> | display",
       "initial": "auto",
@@ -14,12 +14,44 @@
       "computedValue": "computed lengths for <basic-shape>, the absolute URL for <url>, otherwise as specified",
       "canonicalOrder": "per grammar",
       "animationType": "as defined for <basic-shape>, otherwise discrete",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "The shape is computed based on the content box of the element.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "outside-shape",
+          "prose": "The shape is computed based on the shape defined by the shape-outside and shape-margin properties.",
+          "type": "value",
+          "value": "outside-shape"
+        },
+        {
+          "name": "<basic-shape>",
+          "prose": "The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon().",
+          "type": "value",
+          "value": "<basic-shape>"
+        },
+        {
+          "name": "<url>",
+          "prose": "If the <uri> references an SVG shape element, that element defines the shape. Otherwise, if the <uri> references an image, the shape is extracted and computed based on the alpha channel of the specified image. If the <uri> does not reference an SVG shape element or an image, the effect is as if the value auto had been specified.",
+          "type": "value",
+          "value": "<url>"
+        },
+        {
+          "name": "display",
+          "prose": "The shape is computed based on the shape of the display as described in css-round-display.",
+          "type": "value",
+          "value": "display"
+        }
+      ],
       "styleDeclaration": [
         "shape-inside",
         "shapeInside"
       ]
     },
-    "shape-padding": {
+    {
       "name": "shape-padding",
       "value": "<length>",
       "initial": "none",
@@ -34,47 +66,162 @@
         "shapePadding"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<shape-command>": {
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "shape()",
+      "type": "function",
+      "value": "shape( <'fill-rule'>? from <coordinate-pair>, <shape-command>#)",
+      "values": [
+        {
+          "name": "<coordinate-pair>",
+          "value": "<length-percentage>{2}",
+          "type": "type"
+        },
+        {
+          "name": "<by-to>",
+          "value": "by | to",
+          "type": "type",
+          "values": [
+            {
+              "name": "by",
+              "prose": "<by-to> = by | to",
+              "type": "value",
+              "value": "by"
+            },
+            {
+              "name": "to",
+              "prose": "<by-to> = by | to",
+              "type": "value",
+              "value": "to"
+            }
+          ]
+        },
+        {
+          "name": "<move-command>",
+          "value": "move <by-to> <coordinate-pair>",
+          "type": "type"
+        },
+        {
+          "name": "move",
+          "prose": "<move-command> = move <by-to> <coordinate-pair>",
+          "type": "value",
+          "value": "move"
+        },
+        {
+          "name": "<line-command>",
+          "value": "line <by-to> <coordinate-pair>",
+          "type": "type"
+        },
+        {
+          "name": "line",
+          "prose": "<line-command> = line <by-to> <coordinate-pair>",
+          "type": "value",
+          "value": "line"
+        },
+        {
+          "name": "<hv-line-command>",
+          "value": "[hline | vline] <by-to> <length-percentage>",
+          "type": "type"
+        },
+        {
+          "name": "hline",
+          "prose": "<hv-line-command> = [hline | vline] <by-to> <length-percentage>",
+          "type": "value",
+          "value": "hline"
+        },
+        {
+          "name": "vline",
+          "prose": "<hv-line-command> = [hline | vline] <by-to> <length-percentage>",
+          "type": "value",
+          "value": "vline"
+        },
+        {
+          "name": "<curve-command>",
+          "value": "curve <by-to> <coordinate-pair> via <coordinate-pair>{1,2}",
+          "type": "type"
+        },
+        {
+          "name": "curve",
+          "prose": "<curve-command> = curve <by-to> <coordinate-pair> via <coordinate-pair>{1,2}",
+          "type": "value",
+          "value": "curve"
+        },
+        {
+          "name": "<smooth-command>",
+          "value": "smooth <by-to> <coordinate-pair> [via <coordinate-pair>]?",
+          "type": "type"
+        },
+        {
+          "name": "smooth",
+          "prose": "<smooth-command> = smooth <by-to> <coordinate-pair> [via <coordinate-pair>]?",
+          "type": "value",
+          "value": "smooth"
+        },
+        {
+          "name": "<arc-command>",
+          "value": "arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ]?",
+          "type": "type"
+        },
+        {
+          "name": "arc",
+          "prose": "<arc-command> = arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ]",
+          "type": "value",
+          "value": "arc",
+          "values": [
+            {
+              "name": "cw",
+              "prose": "<arc-sweep> can be cw or ccw, indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively, must be chosen. If omitted, this defaults to ccw.",
+              "type": "value",
+              "value": "cw"
+            },
+            {
+              "name": "ccw",
+              "prose": "<arc-sweep> can be cw or ccw, indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively, must be chosen. If omitted, this defaults to ccw.",
+              "type": "value",
+              "value": "ccw"
+            },
+            {
+              "name": "large",
+              "prose": "<arc-size> can be large or small, indicating that the larger or smaller, respectively, of the two possible arcs must be chosen. If omitted, this defaults to small.",
+              "type": "value",
+              "value": "large"
+            },
+            {
+              "name": "small",
+              "prose": "<arc-size> can be large or small, indicating that the larger or smaller, respectively, of the two possible arcs must be chosen. If omitted, this defaults to small.",
+              "type": "value",
+              "value": "small"
+            }
+          ]
+        },
+        {
+          "name": "<arc-sweep>",
+          "prose": "<arc-sweep> can be cw or ccw, indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively, must be chosen. If omitted, this defaults to ccw.",
+          "type": "type",
+          "value": "cw | ccw"
+        },
+        {
+          "name": "<arc-size>",
+          "prose": "<arc-size> can be large or small, indicating that the larger or smaller, respectively, of the two possible arcs must be chosen. If omitted, this defaults to small.",
+          "type": "type",
+          "value": "large | small"
+        },
+        {
+          "name": "close",
+          "prose": "Adds a closepath command to the list of path data commands.",
+          "type": "value",
+          "value": "close"
+        }
+      ]
+    },
+    {
+      "name": "<shape-command>",
       "prose": "The sequence of <shape-command>s represent further path data commands. Each command’s starting point is the previous command’s ending point.",
+      "type": "type",
       "value": "<move-command> | <line-command> | <hv-line-command> | <curve-command> | <smooth-command> | <arc-command> | close"
-    },
-    "<coordinate-pair>": {
-      "value": "<length-percentage>{2}"
-    },
-    "<by-to>": {
-      "value": "by | to"
-    },
-    "<move-command>": {
-      "value": "move <by-to> <coordinate-pair>"
-    },
-    "<line-command>": {
-      "value": "line <by-to> <coordinate-pair>"
-    },
-    "<hv-line-command>": {
-      "value": "[hline | vline] <by-to> <length-percentage>"
-    },
-    "<curve-command>": {
-      "value": "curve <by-to> <coordinate-pair> via <coordinate-pair>{1,2}"
-    },
-    "<smooth-command>": {
-      "value": "smooth <by-to> <coordinate-pair> [via <coordinate-pair>]?"
-    },
-    "<arc-command>": {
-      "value": "arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ] | arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ]?"
-    },
-    "<arc-sweep>": {
-      "prose": "<arc-sweep> can be cw or ccw, indicating that the arc that is traced around the ellipse clockwise or counter-clockwise from the center, respectively, must be chosen. If omitted, this defaults to ccw.",
-      "value": "cw | ccw"
-    },
-    "<arc-size>": {
-      "prose": "<arc-size> can be large or small, indicating that the larger or smaller, respectively, of the two possible arcs must be chosen. If omitted, this defaults to small.",
-      "value": "large | small"
-    },
-    "<shape()>": {
-      "value": "shape( <'fill-rule'>? from <coordinate-pair>, <shape-command>#)"
     }
-  }
+  ]
 }

package/css-shapes.json

@@ -3,8 +3,8 @@
     "title": "CSS Shapes Module Level 1",
     "url": "https://drafts.csswg.org/css-shapes-1/"
   },
-  "properties": {
-    "shape-outside": {
+  "properties": [
+    {
       "name": "shape-outside",
       "value": "none | [ <basic-shape> || <shape-box> ] | <image>",
       "initial": "none",
@@ -14,12 +14,32 @@
       "computedValue": "as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified",
       "canonicalOrder": "per grammar",
       "animationType": "as defined for <basic-shape>, otherwise discrete",
+      "values": [
+        {
+          "name": "none",
+          "prose": "The float area is unaffected.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<basic-shape>",
+          "prose": "The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon(). If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to margin-box.",
+          "type": "value",
+          "value": "<basic-shape>"
+        },
+        {
+          "name": "<image>",
+          "prose": "The shape is extracted and computed based on the alpha channel of the specified <image> as defined by shape-image-threshold. User agents must use the CORS protocol defined by the [FETCH] specification for all URLs in a shape-outside value. When fetching, user agents must use \"Anonymous\" mode, set the referrer source to the stylesheet’s URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.",
+          "type": "value",
+          "value": "<image>"
+        }
+      ],
       "styleDeclaration": [
         "shape-outside",
         "shapeOutside"
       ]
     },
-    "shape-image-threshold": {
+    {
       "name": "shape-image-threshold",
       "value": "<alpha-value>",
       "initial": "0",
@@ -29,12 +49,20 @@
       "computedValue": "specified number, clamped to the range [0,1]",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "<number>",
+          "prose": "Sets the threshold used for extracting a shape from an image. The shape is defined by the pixels whose alpha value is greater than the threshold. A threshold value outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range.",
+          "type": "value",
+          "value": "<number>"
+        }
+      ],
       "styleDeclaration": [
         "shape-image-threshold",
         "shapeImageThreshold"
       ]
     },
-    "shape-margin": {
+    {
       "name": "shape-margin",
       "value": "<length-percentage>",
       "initial": "0",
@@ -44,46 +72,112 @@
       "computedValue": "computed <length-percentage> value",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "<length-percentage>",
+          "prose": "Sets the margin of the shape to the specified value.",
+          "type": "value",
+          "value": "<length-percentage>"
+        }
+      ],
       "styleDeclaration": [
         "shape-margin",
         "shapeMargin"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<basic-shape>": {
-      "prose": "The <basic-shape> type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box."
-    },
-    "<inset()>": {
-      "value": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
-    },
-    "<xywh()>": {
-      "value": "xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )"
-    },
-    "<rect()>": {
-      "value": "rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )"
-    },
-    "<circle()>": {
-      "value": "circle( <shape-radius>? [ at <position> ]? )"
-    },
-    "<ellipse()>": {
-      "value": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )"
-    },
-    "<polygon()>": {
-      "value": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )"
-    },
-    "<path()>": {
-      "value": "path( [<'fill-rule'>,]? <string> )"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<basic-shape>",
+      "prose": "The <basic-shape> type can be specified using basic shape functions. When using this syntax to define shapes, the reference box is defined by each property that uses <basic-shape> values. The coordinate system for the shape has its origin on the top-left corner of the reference box with the x-axis running to the right and the y-axis running downwards. All the lengths expressed in percentages are resolved from the used dimensions of the reference box.",
+      "type": "type",
+      "values": [
+        {
+          "name": "inset()",
+          "value": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )",
+          "type": "function"
+        },
+        {
+          "name": "xywh()",
+          "value": "xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? )",
+          "type": "function"
+        },
+        {
+          "name": "rect()",
+          "value": "rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? )",
+          "type": "function"
+        },
+        {
+          "name": "circle()",
+          "value": "circle( <shape-radius>? [ at <position> ]? )",
+          "type": "function"
+        },
+        {
+          "name": "ellipse()",
+          "value": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )",
+          "type": "function"
+        },
+        {
+          "name": "polygon()",
+          "value": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )",
+          "type": "function"
+        },
+        {
+          "name": "path()",
+          "value": "path( [<'fill-rule'>,]? <string> )",
+          "type": "function",
+          "values": [
+            {
+              "name": "<string>",
+              "type": "value",
+              "value": "<string>"
+            }
+          ]
+        }
+      ]
     },
-    "<shape-radius>": {
-      "value": "<length-percentage [0,∞]> | closest-side | farthest-side"
+    {
+      "name": "<shape-radius>",
+      "value": "<length-percentage [0,∞]> | closest-side | farthest-side",
+      "type": "type"
     },
-    "<basic-shape-rect>": {
+    {
+      "name": "<basic-shape-rect>",
+      "type": "type",
       "value": "<inset()> | <rect()> | <xywh()>"
     },
-    "<shape-box>": {
-      "value": "<box> | margin-box"
+    {
+      "name": "<shape-box>",
+      "type": "type",
+      "value": "<box> | margin-box",
+      "values": [
+        {
+          "name": "margin-box",
+          "prose": "The margin-box value defines the shape enclosed by the outside margin edge. The corner radii of this shape are determined by the corresponding border-radius and margin values. If the ratio of border-radius/margin is 1 or more, or margin is negative or zero, then the margin box corner radius is max(border-radius + margin, 0). If the ratio of border-radius/margin is less than 1, and margin is positive, then the margin box corner radius is border-radius + margin * (1 + (ratio-1)^3).",
+          "type": "value",
+          "value": "margin-box"
+        },
+        {
+          "name": "border-box",
+          "prose": "The border-box value defines the shape enclosed by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border.",
+          "type": "value",
+          "value": "border-box"
+        },
+        {
+          "name": "padding-box",
+          "prose": "The padding-box value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border.",
+          "type": "value",
+          "value": "padding-box"
+        },
+        {
+          "name": "content-box",
+          "prose": "The content-box value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius - border-width - padding.",
+          "type": "value",
+          "value": "content-box"
+        }
+      ]
     }
-  }
+  ]
 }

package/css-size-adjust.json

@@ -3,8 +3,8 @@
     "title": "CSS Mobile Text Size Adjustment Module Level 1",
     "url": "https://drafts.csswg.org/css-size-adjust-1/"
   },
-  "properties": {
-    "text-size-adjust": {
+  "properties": [
+    {
       "name": "text-size-adjust",
       "value": "auto | none | <percentage [0,∞]>",
       "initial": "auto",
@@ -14,12 +14,33 @@
       "computedValue": "specified keyword or percentage",
       "canonicalOrder": "N/A",
       "animationType": "by computed value",
+      "values": [
+        {
+          "name": "auto",
+          "prose": "Renderers must use the default size adjustment when displaying on a small device.",
+          "type": "value",
+          "value": "auto"
+        },
+        {
+          "name": "none",
+          "prose": "Renderers must not do size adjustment when displaying on a small device.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<percentage [0,∞]>",
+          "prose": "When displaying on a small device, renderers must not do size adjustment but instead the computed value of font-size must be multiplied by this percentage. Negative values are invalid.",
+          "type": "value",
+          "value": "<percentage [0,∞]>"
+        }
+      ],
       "styleDeclaration": [
         "text-size-adjust",
         "textSizeAdjust"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }