@webref/css 6.25.17 → 6.25.19

package/SVG.json

@@ -143,7 +143,7 @@
     {
       "name": "path-length",
       "href": "https://w3c.github.io/svgwg/svg2-draft/paths.html#PathLengthCSSProperty",
-      "value": "none | <length> [0,∞]",
+      "value": "none | <length [0,∞]>",
       "initial": "none",
       "appliesTo": "‘path’, ‘circle’, ‘ellipse’, ‘line’, ‘polygon’, ‘polyline’, ‘rect’",
       "inherited": "no",

package/animation-triggers.json

@@ -206,10 +206,30 @@
         "timelineTriggerActiveRangeEnd"
       ]
     },
+    {
+      "name": "timeline-trigger-range",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#propdef-timeline-trigger-range",
+      "value": "[ <'timeline-trigger-activation-range'> [ / <'timeline-trigger-active-range'> ]? ]#",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "timeline-trigger-range",
+        "timelineTriggerRange"
+      ],
+      "longhands": [
+        "timeline-trigger-activation-range",
+        "timeline-trigger-active-range"
+      ]
+    },
     {
       "name": "timeline-trigger",
       "href": "https://drafts.csswg.org/animation-triggers-1/#propdef-timeline-trigger",
-      "value": "none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> <'timeline-trigger-activation-range'> [ / <'timeline-trigger-active-range'> ]? ]#",
+      "value": "none | [ <'timeline-trigger-name'> <'timeline-trigger-source'> [ <'timeline-trigger-range'> ]? ]#",
       "initial": "see individual properties",
       "appliesTo": "see individual properties",
       "inherited": "see individual properties",
@@ -233,8 +253,7 @@
       "longhands": [
         "timeline-trigger-name",
         "timeline-trigger-source",
-        "timeline-trigger-activation-range",
-        "timeline-trigger-active-range"
+        "timeline-trigger-range"
       ]
     },
     {
@@ -256,7 +275,7 @@
     {
       "name": "event-trigger-source",
       "href": "https://drafts.csswg.org/animation-triggers-1/#propdef-event-trigger-source",
-      "value": "[ none | <event-trigger-event>+ [ / <event-trigger-event>+ ]? ]#",
+      "value": "[ none | <event-function>+ [ / <event-function>+ ]? ]#",
       "initial": "none",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -273,11 +292,11 @@
           "value": "none"
         },
         {
-          "name": "<event-trigger-event>+ [ / <event-trigger-event>+ ]?",
+          "name": "<event-function>+ [ / <event-function>+ ]?",
           "prose": "Defines what event(s) the event trigger responds to. If a / is used in the value, the event trigger is stateful; the set of events before the / are the event trigger’s enter events, while those after the / are the exit events. (The same events can occur in both sets.) Otherwise, the event trigger is stateless, and the provided events are its enter events.",
-          "href": "https://drafts.csswg.org/animation-triggers-1/#valdef-event-trigger-source-event-trigger-event--event-trigger-event",
+          "href": "https://drafts.csswg.org/animation-triggers-1/#valdef-event-trigger-source-event-function--event-function",
           "type": "value",
-          "value": "<event-trigger-event>+ [ / <event-trigger-event>+ ]?"
+          "value": "<event-function>+ [ / <event-function>+ ]?"
         }
       ],
       "styleDeclaration": [
@@ -347,10 +366,78 @@
   "selectors": [],
   "values": [
     {
-      "name": "<event-trigger-event>",
-      "href": "https://drafts.csswg.org/animation-triggers-1/#typedef-event-trigger-event",
+      "name": "<event-function>",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#typedef-event-function",
       "type": "type",
-      "value": "activate | interest | click | touch | dblclick | keypress(<string>) | ..."
+      "value": "<click()> | <dblclick()> | <pointerenter()> | <pointerleave()> | <pointerup()> | <pointerdown()> | <keypress()> | <focusin()> | <focusout()> | <input()> | <change()>",
+      "values": [
+        {
+          "name": "keypress()",
+          "value": "keypress( <string>? )",
+          "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-event-function-keypress",
+          "type": "function"
+        }
+      ]
+    },
+    {
+      "name": "click()",
+      "value": "click()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-click",
+      "type": "function"
+    },
+    {
+      "name": "dblclick()",
+      "value": "dblclick()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-dblclick",
+      "type": "function"
+    },
+    {
+      "name": "pointerenter()",
+      "value": "pointerenter()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-pointerenter",
+      "type": "function"
+    },
+    {
+      "name": "pointerleave()",
+      "value": "pointerleave()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-pointerleave",
+      "type": "function"
+    },
+    {
+      "name": "pointerup()",
+      "value": "pointerup()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-pointerup",
+      "type": "function"
+    },
+    {
+      "name": "pointerdown()",
+      "value": "pointerdown()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-pointerdown",
+      "type": "function"
+    },
+    {
+      "name": "focusin()",
+      "value": "focusin()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-focusin",
+      "type": "function"
+    },
+    {
+      "name": "focusout()",
+      "value": "focusout()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-focusout",
+      "type": "function"
+    },
+    {
+      "name": "input()",
+      "value": "input()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-input",
+      "type": "function"
+    },
+    {
+      "name": "change()",
+      "value": "change()",
+      "href": "https://drafts.csswg.org/animation-triggers-1/#funcdef-change",
+      "type": "function"
     },
     {
       "name": "<animation-action>",

package/css-align.json

@@ -130,7 +130,7 @@
         },
         {
           "name": "stretch",
-          "prose": "When the box’s computed width/height (as appropriate to the axis) is auto and neither of its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Unless otherwise specified, this value falls back to flex-start generally, and to self-start or self-end if the box has also specified first baseline or last baseline baseline content-alignment (respectively) in the same axis.",
+          "prose": "When the box’s computed width/height (as appropriate to the axis) is auto and neither of its margins (in the appropriate axis) are auto, sets the box’s used size to the length necessary to make its outer size as close to filling the alignment container as possible while still respecting the constraints imposed by min-height/min-width/max-height/max-width. Unless otherwise specified, this value falls back to flow-start generally, and to self-start or self-end if the box has also specified first baseline or last baseline baseline content-alignment (respectively) in the same axis.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch",
           "type": "value",
           "value": "stretch"
@@ -283,7 +283,7 @@
       "name": "<self-position>",
       "href": "https://drafts.csswg.org/css-align-3/#typedef-self-position",
       "type": "type",
-      "value": "center | start | end | self-start | self-end | flex-start | flex-end",
+      "value": "center | start | end | self-start | self-end | flow-start | flow-end | flex-start | flex-end",
       "values": [
         {
           "name": "center",
@@ -320,16 +320,30 @@
           "type": "value",
           "value": "self-end"
         },
+        {
+          "name": "flow-start",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the start of placement. In a flex formatting context, this corresponds to the flex container’s main-start or cross-start side, as appropriate. [CSS-FLEXBOX-1] In grid lanes layout, this corresponds to the side of the grid lanes container from which item placement proceeds in the axis being aligned. See [CSS-GRID-3] for more details. When used outside of a flex formatting context or grid lanes layout, this value behaves as start, unless otherwise specified by the layout model.",
+          "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flow-start",
+          "type": "value",
+          "value": "flow-start"
+        },
+        {
+          "name": "flow-end",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the end of placement. In a flex formatting context, this corresponds to the flex container’s main-end or cross-end side, as appropriate. [CSS-FLEXBOX-1] In grid lanes layout, this corresponds to the side of the grid lanes container opposite the side from which item placement proceeds in the axis being aligned. See [CSS-GRID-3] for more details. When used outside of a flex formatting context or grid lanes layout, this value behaves as end, unless otherwise specified by the layout model.",
+          "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flow-end",
+          "type": "value",
+          "value": "flow-end"
+        },
         {
           "name": "flex-start",
-          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "prose": "A legacy value alias for flow-start.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start",
           "type": "value",
           "value": "flex-start"
         },
         {
           "name": "flex-end",
-          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "prose": "A legacy value alias for flow-end.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end",
           "type": "value",
           "value": "flex-end"
@@ -340,7 +354,7 @@
       "name": "<content-position>",
       "href": "https://drafts.csswg.org/css-align-3/#typedef-content-position",
       "type": "type",
-      "value": "center | start | end | flex-start | flex-end",
+      "value": "center | start | end | flow-start | flow-end | flex-start | flex-end",
       "values": [
         {
           "name": "center",
@@ -363,16 +377,30 @@
           "type": "value",
           "value": "end"
         },
+        {
+          "name": "flow-start",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the start of placement. In a flex formatting context, this corresponds to the flex container’s main-start or cross-start side, as appropriate. [CSS-FLEXBOX-1] In grid lanes layout, this corresponds to the side of the grid lanes container from which item placement proceeds in the axis being aligned. See [CSS-GRID-3] for more details. When used outside of a flex formatting context or grid lanes layout, this value behaves as start, unless otherwise specified by the layout model.",
+          "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flow-start",
+          "type": "value",
+          "value": "flow-start"
+        },
+        {
+          "name": "flow-end",
+          "prose": "Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the end of placement. In a flex formatting context, this corresponds to the flex container’s main-end or cross-end side, as appropriate. [CSS-FLEXBOX-1] In grid lanes layout, this corresponds to the side of the grid lanes container opposite the side from which item placement proceeds in the axis being aligned. See [CSS-GRID-3] for more details. When used outside of a flex formatting context or grid lanes layout, this value behaves as end, unless otherwise specified by the layout model.",
+          "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flow-end",
+          "type": "value",
+          "value": "flow-end"
+        },
         {
           "name": "flex-start",
-          "prose": "Only used in flex layout. [CSS-FLEXBOX-1] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used outside of a flex formatting context, this value behaves as start. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as start when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as start when used in the content-distribution properties.",
+          "prose": "A legacy value alias for flow-start.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start",
           "type": "value",
           "value": "flex-start"
         },
         {
           "name": "flex-end",
-          "prose": "Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used outside of a flex formatting context, this value behaves as end. That is, on boxes that are not flex items (or pretending to be flex items, such as when determining the static position of an absolutely-positioned box that is a child of a flex container), this value behaves as end when used in the self-alignment properties, and on boxes that are not flex containers, this value behaves as end when used in the content-distribution properties.",
+          "prose": "A legacy value alias for flow-end.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end",
           "type": "value",
           "value": "flex-end"
@@ -430,7 +458,7 @@
       "values": [
         {
           "name": "space-between",
-          "prose": "The alignment subjects are evenly distributed in the alignment container. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same. The default fallback alignment for this value is safe flex-start. (For layout modes other than flex layout, flex-start is identical to start.)",
+          "prose": "The alignment subjects are evenly distributed in the alignment container. The first alignment subject is placed flush with the start edge of the alignment container, the last alignment subject is placed flush with the end edge of the alignment container, and the remaining alignment subjects are distributed so that the spacing between any two adjacent alignment subjects is the same. The default fallback alignment for this value is safe flow-start.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between",
           "type": "value",
           "value": "space-between"
@@ -451,7 +479,7 @@
         },
         {
           "name": "stretch",
-          "prose": "If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. The default fallback alignment for this value is flex-start. (For layout modes other than flex layout, flex-start is identical to start.)",
+          "prose": "If the combined size of the alignment subjects is less than the size of the alignment container, any auto-sized alignment subjects have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container. The default fallback alignment for this value is flow-start.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch",
           "type": "value",
           "value": "stretch"
@@ -466,7 +494,7 @@
       "values": [
         {
           "name": "safe",
-          "prose": "If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were flex-start. However for absolutely positioned boxes, see § 4.4.1.2 Self-Alignment for Absolutely Positioned Boxes.",
+          "prose": "If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were flow-start. However for absolutely positioned boxes, see § 4.4.1.2 Self-Alignment for Absolutely Positioned Boxes.",
           "href": "https://drafts.csswg.org/css-align-3/#valdef-overflow-position-safe",
           "type": "value",
           "value": "safe"

package/css-borders.json

@@ -1620,7 +1620,7 @@
     {
       "name": "corner-top-left",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-top-left",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1640,7 +1640,7 @@
     {
       "name": "corner-top-right",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-top-right",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1660,7 +1660,7 @@
     {
       "name": "corner-bottom-left",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-bottom-left",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1680,7 +1680,7 @@
     {
       "name": "corner-bottom-right",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-bottom-right",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1700,7 +1700,7 @@
     {
       "name": "corner-start-start",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-start-start",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1720,7 +1720,7 @@
     {
       "name": "corner-start-end",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-start-end",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1740,7 +1740,7 @@
     {
       "name": "corner-end-start",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-end-start",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1760,7 +1760,7 @@
     {
       "name": "corner-end-end",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-end-end",
-      "value": "<'border-top-left-radius'> || <'corner-top-left-shape'>",
+      "value": "<'corner-top-left-shape'> || <'border-top-left-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1780,7 +1780,7 @@
     {
       "name": "corner-top",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-top",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1800,7 +1800,7 @@
     {
       "name": "corner-right",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-right",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1820,7 +1820,7 @@
     {
       "name": "corner-bottom",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-bottom",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1840,7 +1840,7 @@
     {
       "name": "corner-left",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-left",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1860,7 +1860,7 @@
     {
       "name": "corner-block-start",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-block-start",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1880,7 +1880,7 @@
     {
       "name": "corner-block-end",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-block-end",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1900,7 +1900,7 @@
     {
       "name": "corner-inline-start",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-inline-start",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1920,7 +1920,7 @@
     {
       "name": "corner-inline-end",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-inline-end",
-      "value": "<'border-top-radius'> || <'corner-top-shape'>",
+      "value": "<'corner-top-shape'> || <'border-top-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1940,7 +1940,7 @@
     {
       "name": "corner",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner",
-      "value": "<'border-radius'> || <'corner-shape'>",
+      "value": "<'corner-shape'> || <'border-radius'>",
       "initial": "0",
       "appliesTo": "all elements (but see prose)",
       "inherited": "no",
@@ -1952,8 +1952,8 @@
         "corner"
       ],
       "longhands": [
-        "border-radius",
-        "corner-shape"
+        "corner-shape",
+        "border-radius"
       ]
     },
     {

package/css-color-5.json

@@ -292,7 +292,7 @@
     },
     {
       "name": "alpha()",
-      "value": "alpha([from <color>] [ / [<alpha-value> | none] ]? )",
+      "value": "alpha(from <color> / [<alpha-value> | none])",
       "href": "https://drafts.csswg.org/css-color-5/#funcdef-alpha",
       "type": "function",
       "values": [