@webref/css 5.4.4 → 6.1.0

package/fill-stroke.json

@@ -3,8 +3,8 @@
     "title": "CSS Fill and Stroke Module Level 3",
     "url": "https://drafts.fxtf.org/fill-stroke-3/"
   },
-  "properties": {
-    "fill-rule": {
+  "properties": [
+    {
       "name": "fill-rule",
       "value": "nonzero | evenodd",
       "initial": "nonzero",
@@ -15,12 +15,26 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "nonzero",
+          "prose": "This rule determines the “insideness” of a point on the canvas by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside. The effect of a nonzero fill rule on paths with self-intersections and enclosed subpaths.",
+          "type": "value",
+          "value": "nonzero"
+        },
+        {
+          "name": "evenodd",
+          "prose": "This rule determines the “insideness” of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside. The effect of an evenodd fill rule on paths with self-intersections and enclosed subpaths.",
+          "type": "value",
+          "value": "evenodd"
+        }
+      ],
       "styleDeclaration": [
         "fill-rule",
         "fillRule"
       ]
     },
-    "fill-break": {
+    {
       "name": "fill-break",
       "value": "bounding-box | slice | clone",
       "initial": "bounding-box",
@@ -36,7 +50,7 @@
         "fillBreak"
       ]
     },
-    "fill-color": {
+    {
       "name": "fill-color",
       "value": "<color>",
       "initial": "currentcolor",
@@ -52,7 +66,7 @@
         "fillColor"
       ]
     },
-    "fill-image": {
+    {
       "name": "fill-image",
       "value": "<paint>#",
       "initial": "none",
@@ -68,7 +82,7 @@
         "fillImage"
       ]
     },
-    "fill-origin": {
+    {
       "name": "fill-origin",
       "value": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
       "initial": "match-parent",
@@ -79,12 +93,50 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "match-parent",
+          "prose": "Use the same fill positioning area as the parent. If it has no parent, use the initial containing block.",
+          "type": "value",
+          "value": "match-parent"
+        },
+        {
+          "name": "content-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the fill positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "content-box"
+        },
+        {
+          "name": "padding-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the fill positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "padding-box"
+        },
+        {
+          "name": "border-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the fill positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "border-box"
+        },
+        {
+          "name": "fill-box",
+          "prose": "For SVG shapes or SVG text, use the object bounding box of the element. For CSS boxes, use the bounding box of the text glyph outlines of the element and all in-flow or floated descendants.",
+          "type": "value",
+          "value": "fill-box"
+        },
+        {
+          "name": "stroke-box",
+          "prose": "For SVG shapes or SVG text, use the stroke bounding box of the element. For CSS boxes, use the bounding box of the text glyph stroke outlines of the element and all in-flow or floated descendants.",
+          "type": "value",
+          "value": "stroke-box"
+        }
+      ],
       "styleDeclaration": [
         "fill-origin",
         "fillOrigin"
       ]
     },
-    "fill-position": {
+    {
       "name": "fill-position",
       "value": "<position>#",
       "initial": "0% 0%",
@@ -100,7 +152,7 @@
         "fillPosition"
       ]
     },
-    "fill-size": {
+    {
       "name": "fill-size",
       "value": "<bg-size>#",
       "initial": "auto",
@@ -116,7 +168,7 @@
         "fillSize"
       ]
     },
-    "fill-repeat": {
+    {
       "name": "fill-repeat",
       "value": "<repeat-style>#",
       "initial": "repeat",
@@ -132,7 +184,7 @@
         "fillRepeat"
       ]
     },
-    "fill-opacity": {
+    {
       "name": "fill-opacity",
       "value": "<'opacity'>",
       "initial": "1",
@@ -148,7 +200,7 @@
         "fillOpacity"
       ]
     },
-    "stroke-width": {
+    {
       "name": "stroke-width",
       "value": "[<length-percentage> | <number>]#",
       "initial": "1px",
@@ -164,7 +216,7 @@
         "strokeWidth"
       ]
     },
-    "stroke-align": {
+    {
       "name": "stroke-align",
       "value": "center | inset | outset",
       "initial": "center",
@@ -175,12 +227,32 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "center",
+          "prose": "The stroke for each subpath is centered on the outline.",
+          "type": "value",
+          "value": "center"
+        },
+        {
+          "name": "inset",
+          "prose": "The stroke for each subpath lies on the “inside” of the outline (into the fill area). The stroke-linejoin property must be ignored. Why is stroke-linejoin ignored? It’s still needed for interior corners.",
+          "type": "value",
+          "value": "inset"
+        },
+        {
+          "name": "outset",
+          "prose": "The stroke for each subpath lies on the “outside” of the outline (outside the fill area).",
+          "type": "value",
+          "value": "outset"
+        }
+      ],
       "styleDeclaration": [
         "stroke-align",
         "strokeAlign"
       ]
     },
-    "stroke-linecap": {
+    {
       "name": "stroke-linecap",
       "value": "butt | round | square",
       "initial": "butt",
@@ -191,12 +263,32 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "butt",
+          "prose": "The stroke for each subpath does not extend beyond its two endpoints. (A zero length subpath will therefore not have any stroke.)",
+          "type": "value",
+          "value": "butt"
+        },
+        {
+          "name": "round",
+          "prose": "At each end of each subpath, the stroke is extended by a half circle with a radius equal to half the stroke width. (The stroke for a zero-length subpath is a full circle centered at the subpath’s point.)",
+          "type": "value",
+          "value": "round"
+        },
+        {
+          "name": "square",
+          "prose": "At the end of each subpath, the stroke is extended by a rectangle with the same width as the stroke width and whose length is half of the stroke width. (The stroke for a zero-length subpath is a square with side length equal to the stroke width, centered at the subpath’s point, and oriented such that two of its sides are parallel to the effective tangent at that subpath’s point. See § 4.6 Computing the Shape of the Stroke for details on how to determine the tangent at a zero-length subpath.) Adding a rectangle to the end of dashes on a curved outline looks bad. It should just extend the dash by stroke-width/2, following the outline.",
+          "type": "value",
+          "value": "square"
+        }
+      ],
       "styleDeclaration": [
         "stroke-linecap",
         "strokeLinecap"
       ]
     },
-    "stroke-linejoin": {
+    {
       "name": "stroke-linejoin",
       "value": "[ crop | arcs | miter ] || [ bevel | round | fallback ]",
       "initial": "miter",
@@ -207,12 +299,50 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "crop",
+          "prose": "The stroke extends the minimal amount past the corner necessary to form a convex corner. This acts identically to miter, but forces stroke-miterlimit to behave as if it had its minimum value of 1.",
+          "type": "value",
+          "value": "crop"
+        },
+        {
+          "name": "miter",
+          "prose": "A sharp corner is used to join path segments. The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.",
+          "type": "value",
+          "value": "miter"
+        },
+        {
+          "name": "arcs",
+          "prose": "An arcs corner is used to join path segments. The arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.",
+          "type": "value",
+          "value": "arcs"
+        },
+        {
+          "name": "bevel",
+          "prose": "The corner is cropped at the stroke-miterlimit by the perpendicular to its diagonal.",
+          "type": "value",
+          "value": "bevel"
+        },
+        {
+          "name": "round",
+          "prose": "The corner is cropped as for bevel, and a filled arc tangent to the truncated stroke edges is appended to round the corner.",
+          "type": "value",
+          "value": "round"
+        },
+        {
+          "name": "fallback",
+          "prose": "When the stroke-miterlimit is exceeded, this behaves as if crop bevel were specified. Can we just remove fallback? It’s a stupid value, useful only because we didn’t have the clip-at-miterlimit behavior in SVG1. Question is if people are mostly just *accidentally* getting the bevel behavior right now, and would be okay with their joins extending up to the miterlimit and only getting the excess corners clipped, or if they actually wanted the discontinuous behavior currently specified. The breakpoint is between 29 and 30 degrees.",
+          "type": "value",
+          "value": "fallback"
+        }
+      ],
       "styleDeclaration": [
         "stroke-linejoin",
         "strokeLinejoin"
       ]
     },
-    "stroke-miterlimit": {
+    {
       "name": "stroke-miterlimit",
       "value": "<number>",
       "initial": "4",
@@ -223,12 +353,19 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "<number>",
+          "value": "<number>",
+          "type": "value"
+        }
+      ],
       "styleDeclaration": [
         "stroke-miterlimit",
         "strokeMiterlimit"
       ]
     },
-    "stroke-break": {
+    {
       "name": "stroke-break",
       "value": "bounding-box | slice | clone",
       "initial": "bounding-box",
@@ -244,7 +381,7 @@
         "strokeBreak"
       ]
     },
-    "stroke-dasharray": {
+    {
       "name": "stroke-dasharray",
       "value": "none | [<length-percentage> | <number>]+#",
       "initial": "none",
@@ -255,12 +392,26 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "as repeated list of length, percentage or calc",
+      "values": [
+        {
+          "name": "none",
+          "prose": "No dashing: the stroke is drawn continuously.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "<length-percentage>+#",
+          "prose": "Specifies a dashing pattern to use. Each <length-percentage> value represents the length of the next dash or gap (beginning with the first dash and alternating from there) of the stroke. The pattern repeats over the length of the stroke. (If the number of values is odd, the pattern behaves as if it was duplicated to yield an even number of values.) The dashing pattern is reset and begins anew at the start of each subpath. Negative values are invalid. If all values are zero, it is treated as none.",
+          "type": "value",
+          "value": "<length-percentage>+#"
+        }
+      ],
       "styleDeclaration": [
         "stroke-dasharray",
         "strokeDasharray"
       ]
     },
-    "stroke-dashoffset": {
+    {
       "name": "stroke-dashoffset",
       "value": "<length-percentage> | <number>",
       "initial": "0",
@@ -276,7 +427,7 @@
         "strokeDashoffset"
       ]
     },
-    "stroke-dash-corner": {
+    {
       "name": "stroke-dash-corner",
       "value": "none | <length>",
       "initial": "none",
@@ -287,12 +438,20 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "yes, if <length>",
+      "values": [
+        {
+          "name": "none",
+          "prose": "This property has no special effect on dashing: the dashes are positioned/sized continuously along the path.",
+          "type": "value",
+          "value": "none"
+        }
+      ],
       "styleDeclaration": [
         "stroke-dash-corner",
         "strokeDashCorner"
       ]
     },
-    "stroke-dash-justify": {
+    {
       "name": "stroke-dash-justify",
       "value": "none | [ stretch | compress ] || [ dashes || gaps ]",
       "initial": "none",
@@ -303,12 +462,44 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "none",
+          "prose": "No adjustment of the dash pattern is made: it’s clipped at the end of the subpath with however much progress it made to that point.",
+          "type": "value",
+          "value": "none"
+        },
+        {
+          "name": "stretch",
+          "prose": "Indicates that when the dash pattern does not fit into a subpath a whole number times, the dashes or gaps (or both) will be lengthened so that it does.",
+          "type": "value",
+          "value": "stretch"
+        },
+        {
+          "name": "compress",
+          "prose": "Indicates that when the dash pattern does not fit into a subpath a whole number times, the dashes or gaps (or both) will be shortened so that it does.",
+          "type": "value",
+          "value": "compress"
+        },
+        {
+          "name": "dashes",
+          "prose": "Indicates that when a dash pattern is to be stretched or compressed, the length of the dashes will be adjusted.",
+          "type": "value",
+          "value": "dashes"
+        },
+        {
+          "name": "gaps",
+          "prose": "Indicates that when a dash pattern is to be stretched or compressed, the length of the gaps will be adjusted.",
+          "type": "value",
+          "value": "gaps"
+        }
+      ],
       "styleDeclaration": [
         "stroke-dash-justify",
         "strokeDashJustify"
       ]
     },
-    "stroke-color": {
+    {
       "name": "stroke-color",
       "value": "<color>#",
       "initial": "transparent",
@@ -324,7 +515,7 @@
         "strokeColor"
       ]
     },
-    "stroke-image": {
+    {
       "name": "stroke-image",
       "value": "<paint>#",
       "initial": "none",
@@ -340,7 +531,7 @@
         "strokeImage"
       ]
     },
-    "stroke-origin": {
+    {
       "name": "stroke-origin",
       "value": "match-parent | fill-box | stroke-box | content-box | padding-box | border-box",
       "initial": "match-parent",
@@ -351,12 +542,50 @@
       "canonicalOrder": "per grammar",
       "media": "visual",
       "animatable": "no",
+      "values": [
+        {
+          "name": "match-parent",
+          "prose": "Use the same stroke positioning area as the parent. If it has no parent, use the initial containing block.",
+          "type": "value",
+          "value": "match-parent"
+        },
+        {
+          "name": "content-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the stroke positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "content-box"
+        },
+        {
+          "name": "padding-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the stroke positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "padding-box"
+        },
+        {
+          "name": "border-box",
+          "prose": "Use the box’s own content-box/padding-box/border-box as the stroke positioning area. For SVG shapes, content-box and padding-box are treated as fill-box, while border-box is treated as stroke-box.",
+          "type": "value",
+          "value": "border-box"
+        },
+        {
+          "name": "fill-box",
+          "prose": "For SVG shapes or SVG text, use the object bounding box of the element. For CSS boxes, use the bounding box of the text glyph outlines of the element and all in-flow or floated descendants.",
+          "type": "value",
+          "value": "fill-box"
+        },
+        {
+          "name": "stroke-box",
+          "prose": "For SVG shapes or SVG text, use the stroke bounding box of the element. For CSS boxes, use the bounding box of the text glyph stroke outlines of the element and all in-flow or floated descendants.",
+          "type": "value",
+          "value": "stroke-box"
+        }
+      ],
       "styleDeclaration": [
         "stroke-origin",
         "strokeOrigin"
       ]
     },
-    "stroke-position": {
+    {
       "name": "stroke-position",
       "value": "<position>#",
       "initial": "0% 0%",
@@ -372,7 +601,7 @@
         "strokePosition"
       ]
     },
-    "stroke-size": {
+    {
       "name": "stroke-size",
       "value": "<bg-size>#",
       "initial": "auto",
@@ -388,7 +617,7 @@
         "strokeSize"
       ]
     },
-    "stroke-repeat": {
+    {
       "name": "stroke-repeat",
       "value": "<repeat-style>#",
       "initial": "repeat",
@@ -404,7 +633,7 @@
         "strokeRepeat"
       ]
     },
-    "stroke-opacity": {
+    {
       "name": "stroke-opacity",
       "value": "<'opacity'>",
       "initial": "1",
@@ -420,14 +649,40 @@
         "strokeOpacity"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {
-    "<paint>": {
-      "value": "none | <image> | <svg-paint>"
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": [
+    {
+      "name": "<paint>",
+      "type": "type",
+      "value": "none | <image> | <svg-paint>",
+      "values": [
+        {
+          "name": "none",
+          "prose": "Indicates no paint is applied.",
+          "type": "value",
+          "value": "none"
+        }
+      ]
     },
-    "<svg-paint>": {
-      "value": "child | child( <integer> )"
+    {
+      "name": "<svg-paint>",
+      "type": "type",
+      "value": "child | child( <integer> )",
+      "values": [
+        {
+          "name": "child",
+          "prose": "Refers to the last child paint server element of the element being painted. If there is no such child, behaves as none.",
+          "type": "value",
+          "value": "child"
+        },
+        {
+          "name": "child()",
+          "value": "child()",
+          "type": "value"
+        }
+      ]
     }
-  }
+  ]
 }

package/filter-effects-2.json

@@ -3,8 +3,8 @@
     "title": "Filter Effects Module Level 2",
     "url": "https://drafts.fxtf.org/filter-effects-2/"
   },
-  "properties": {
-    "backdrop-filter": {
+  "properties": [
+    {
       "name": "backdrop-filter",
       "value": "none | <filter-value-list>",
       "initial": "none",
@@ -20,7 +20,8 @@
         "backdropFilter"
       ]
     }
-  },
-  "atrules": {},
-  "valuespaces": {}
+  ],
+  "atrules": [],
+  "selectors": [],
+  "values": []
 }