@webref/css 4.2.2 → 4.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CSS.json +15 -0
  2. package/compat.json +8 -17
  3. package/css-align.json +2 -2
  4. package/css-animations-2.json +3 -3
  5. package/css-animations.json +6 -3
  6. package/css-box.json +4 -4
  7. package/css-break.json +2 -2
  8. package/css-cascade-6.json +6 -0
  9. package/css-color-5.json +20 -2
  10. package/css-color.json +23 -1
  11. package/css-conditional-5.json +2 -2
  12. package/css-contain-3.json +6 -0
  13. package/css-content.json +10 -9
  14. package/css-counter-styles.json +3 -0
  15. package/css-easing.json +6 -6
  16. package/css-extensions.json +3 -0
  17. package/css-fonts.json +19 -37
  18. package/css-gcpm-4.json +1 -0
  19. package/css-gcpm.json +2 -0
  20. package/css-grid.json +7 -4
  21. package/css-highlight-api.json +13 -0
  22. package/css-images-4.json +16 -16
  23. package/css-images.json +12 -8
  24. package/css-inline.json +1 -1
  25. package/css-lists.json +3 -0
  26. package/css-masking.json +15 -6
  27. package/css-overflow.json +5 -5
  28. package/css-page.json +3 -3
  29. package/css-position.json +1 -8
  30. package/css-rhythm.json +2 -2
  31. package/css-scroll-snap-2.json +5 -5
  32. package/css-scroll-snap.json +11 -11
  33. package/css-shapes-2.json +14 -19
  34. package/css-shapes.json +9 -7
  35. package/css-size-adjust.json +2 -6
  36. package/css-sizing.json +7 -11
  37. package/css-syntax.json +95 -4
  38. package/css-text-4.json +2 -11
  39. package/css-text.json +1 -8
  40. package/css-transforms-2.json +3 -0
  41. package/css-transforms.json +5 -2
  42. package/css-transitions.json +1 -1
  43. package/css-ui.json +10 -4
  44. package/css-values-5.json +10 -0
  45. package/css-values.json +67 -25
  46. package/css-variables.json +3 -0
  47. package/css-writing-modes.json +1 -1
  48. package/fill-stroke.json +0 -3
  49. package/filter-effects.json +6 -6
  50. package/mediaqueries-5.json +6 -0
  51. package/mediaqueries.json +7 -0
  52. package/motion.json +0 -3
  53. package/package.json +1 -1
  54. package/scroll-animations.json +0 -3
  55. package/selectors.json +6 -0
  56. package/css-layout-api.json +0 -13
  57. package/svg-animations.json +0 -13
package/css-images-4.json CHANGED
@@ -34,21 +34,6 @@
34
34
  "objectFit"
35
35
  ]
36
36
  },
37
- "object-overflow": {
38
- "name": "object-overflow",
39
- "value": "clip | visible",
40
- "initial": "clip",
41
- "appliesTo": "replaced elements",
42
- "inherited": "no",
43
- "percentages": "n/a",
44
- "computedValue": "as specified",
45
- "canonicalOrder": "per grammar",
46
- "animationType": "discrete",
47
- "styleDeclaration": [
48
- "object-overflow",
49
- "objectOverflow"
50
- ]
51
- },
52
37
  "image-resolution": {
53
38
  "name": "image-resolution",
54
39
  "value": "[ from-image || <resolution> ] && snap?",
@@ -67,6 +52,21 @@
67
52
  },
68
53
  "descriptors": {},
69
54
  "valuespaces": {
55
+ "<type()>": {
56
+ "value": "type( <string> )"
57
+ },
58
+ "<repeating-linear-gradient()>": {
59
+ "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
60
+ },
61
+ "<repeating-radial-gradient()>": {
62
+ "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
63
+ },
64
+ "<repeating-conic-gradient()>": {
65
+ "prose": "In addition to linear-gradient(), radial-gradient(), and conic-gradient(), this specification defines repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
66
+ },
67
+ "<-webkit-image-set()>": {
68
+ "prose": "Implementations must accept -webkit-image-set() as a parse-time alias of image-set(). (It’s a valid value, with identical arguments to image-set(), and is turned into image-set() during parsing.)"
69
+ },
70
70
  "<image>": {
71
71
  "value": "<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>"
72
72
  },
@@ -89,7 +89,7 @@
89
89
  "value": "cross-fade( <cf-image># )"
90
90
  },
91
91
  "<cf-image>": {
92
- "value": "<percentage>? && [ <image> | <color> ]"
92
+ "value": "<percentage [0,100]>? && [ <image> | <color> ]"
93
93
  },
94
94
  "<element()>": {
95
95
  "value": "element( <id-selector> )"
package/css-images.json CHANGED
@@ -67,8 +67,15 @@
67
67
  },
68
68
  "descriptors": {},
69
69
  "valuespaces": {
70
- "<image>": {
71
- "value": "<url> | <gradient>"
70
+ "<size>": {
71
+ "prose": "Both circle and ellipse gradients accept the following keywords as their <size>:",
72
+ "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
73
+ },
74
+ "<repeating-linear-gradient()>": {
75
+ "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
76
+ },
77
+ "<repeating-radial-gradient()>": {
78
+ "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously."
72
79
  },
73
80
  "<gradient>": {
74
81
  "value": "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>"
@@ -82,6 +89,9 @@
82
89
  "<radial-gradient()>": {
83
90
  "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )"
84
91
  },
92
+ "<extent-keyword>": {
93
+ "value": "closest-corner | closest-side | farthest-corner | farthest-side"
94
+ },
85
95
  "<color-stop-list>": {
86
96
  "value": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#"
87
97
  },
@@ -90,12 +100,6 @@
90
100
  },
91
101
  "<linear-color-hint>": {
92
102
  "value": "<length-percentage>"
93
- },
94
- "<ending-shape>": {
95
- "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise."
96
- },
97
- "<length>": {
98
- "prose": "Gives the radius of the circle explicitly. Negative values are invalid."
99
103
  }
100
104
  }
101
105
  }
package/css-inline.json CHANGED
@@ -137,7 +137,7 @@
137
137
  },
138
138
  "initial-letter": {
139
139
  "name": "initial-letter",
140
- "value": "normal | <number> <integer> | <number> && [ drop | raise ]?",
140
+ "value": "normal | <number [1,∞]> <integer [1,∞]> | <number [1,∞]> && [ drop | raise ]?",
141
141
  "initial": "normal",
142
142
  "appliesTo": "certain inline-level boxes and ::first-letter and inside ::marker boxes (see prose)",
143
143
  "inherited": "no",
package/css-lists.json CHANGED
@@ -127,6 +127,9 @@
127
127
  },
128
128
  "descriptors": {},
129
129
  "valuespaces": {
130
+ "<counter-name>": {
131
+ "prose": "Counters are referred to in CSS syntax using the <counter-name> type, which represents their name as a <custom-ident>. A <counter-name> name cannot match the keyword none; such an identifier is invalid as a <counter-name>."
132
+ },
130
133
  "<reversed-counter-name>": {
131
134
  "value": "reversed( <counter-name> )"
132
135
  },
package/css-masking.json CHANGED
@@ -325,6 +325,21 @@
325
325
  },
326
326
  "descriptors": {},
327
327
  "valuespaces": {
328
+ "<rect()>": {
329
+ "value": "rect( <top>, <right>, <bottom>, <left> )"
330
+ },
331
+ "<top>": {
332
+ "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
333
+ },
334
+ "<right>": {
335
+ "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
336
+ },
337
+ "<bottom>": {
338
+ "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
339
+ },
340
+ "<left>": {
341
+ "prose": "<top>, <right>, <bottom>, and <left> may either have a <length> value or auto. Negative lengths are permitted. The value auto means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., auto means the same as 0 for <top> and <left>, the same as the used value of the height plus the sum of vertical padding and border widths for <bottom>, and the same as the used value of the width plus the sum of the horizontal padding and border widths for <right>, such that four auto values result in the clipping region being the same as the element’s border box)."
342
+ },
328
343
  "<clip-source>": {
329
344
  "value": "<url>"
330
345
  },
@@ -345,12 +360,6 @@
345
360
  },
346
361
  "<mask-layer>": {
347
362
  "value": "<mask-reference> || <position> [ / <bg-size> ]? ||<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>"
348
- },
349
- "<rect()>": {
350
- "value": "rect( <top>, <right>, <bottom>, <left> )"
351
- },
352
- "<url>": {
353
- "prose": "A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image."
354
363
  }
355
364
  }
356
365
  }
package/css-overflow.json CHANGED
@@ -8,10 +8,10 @@
8
8
  "name": "overflow-x",
9
9
  "value": "visible | hidden | clip | scroll | auto",
10
10
  "initial": "visible",
11
- "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
11
+ "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT], and replaced elements",
12
12
  "inherited": "no",
13
13
  "percentages": "N/A",
14
- "computedValue": "as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip",
14
+ "computedValue": "usually specified value, but see text",
15
15
  "canonicalOrder": "per grammar",
16
16
  "animationType": "discrete",
17
17
  "styleDeclaration": [
@@ -23,10 +23,10 @@
23
23
  "name": "overflow-y",
24
24
  "value": "visible | hidden | clip | scroll | auto",
25
25
  "initial": "visible",
26
- "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], and grid containers [CSS3-GRID-LAYOUT]",
26
+ "appliesTo": "block containers [CSS2], flex containers [CSS3-FLEXBOX], grid containers [CSS3-GRID-LAYOUT], and replaced elements",
27
27
  "inherited": "no",
28
28
  "percentages": "N/A",
29
- "computedValue": "as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip",
29
+ "computedValue": "usually specified value, but see text",
30
30
  "canonicalOrder": "per grammar",
31
31
  "animationType": "discrete",
32
32
  "styleDeclaration": [
@@ -200,7 +200,7 @@
200
200
  },
201
201
  "max-lines": {
202
202
  "name": "max-lines",
203
- "value": "none | <integer>",
203
+ "value": "none | <integer [1,∞]>",
204
204
  "initial": "none",
205
205
  "appliesTo": "block containers which are also fragmentation containers that capture region breaks",
206
206
  "inherited": "no",
package/css-page.json CHANGED
@@ -58,6 +58,9 @@
58
58
  ]
59
59
  },
60
60
  "valuespaces": {
61
+ "<page-size>": {
62
+ "prose": "A page size can be specified using one of the following media names. This is the equivalent of specifying size using length values. The definition of the media names comes from Media Standardized Names [PWGMSN]."
63
+ },
61
64
  "<page-selector-list>": {
62
65
  "value": "<page-selector>#"
63
66
  },
@@ -66,9 +69,6 @@
66
69
  },
67
70
  "<pseudo-page>": {
68
71
  "value": "':' [ left | right | first | blank ]"
69
- },
70
- "<page-size>": {
71
- "prose": "A page size can be specified using one of the following media names. This is the equivalent of specifying size using length values. The definition of the media names comes from Media Standardized Names [PWGMSN]."
72
72
  }
73
73
  }
74
74
  }
package/css-position.json CHANGED
@@ -181,12 +181,5 @@
181
181
  }
182
182
  },
183
183
  "descriptors": {},
184
- "valuespaces": {
185
- "<length>": {
186
- "prose": "The inset is a fixed distance from the reference edge. Negative values are allowed."
187
- },
188
- "<percentage>": {
189
- "prose": "The inset is a percentage relative to the containing block’s size in the corresponding axis (e.g. width for left or right, height for top and bottom). For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed."
190
- }
191
- }
184
+ "valuespaces": {}
192
185
  }
package/css-rhythm.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "properties": {
7
7
  "block-step-size": {
8
8
  "name": "block-step-size",
9
- "value": "none | <length>",
9
+ "value": "none | <length [0,∞]>",
10
10
  "initial": "none",
11
11
  "appliesTo": "block-level boxes",
12
12
  "inherited": "no",
@@ -85,7 +85,7 @@
85
85
  },
86
86
  "line-height-step": {
87
87
  "name": "line-height-step",
88
- "value": "<length>",
88
+ "value": "<length [0,∞]>",
89
89
  "initial": "0px",
90
90
  "appliesTo": "block containers",
91
91
  "inherited": "yes",
@@ -6,7 +6,7 @@
6
6
  "properties": {
7
7
  "scroll-start": {
8
8
  "name": "scroll-start",
9
- "value": "[ auto | start | end | center | left | right | top | bottom | <length-percentage> ]{1,2}",
9
+ "value": "[ auto | start | end | center | left | right | top | bottom | <length-percentage [0,∞]> ]{1,2}",
10
10
  "initial": "see individual properties",
11
11
  "appliesTo": "see individual properties",
12
12
  "inherited": "see individual properties",
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "scroll-start-x": {
38
38
  "name": "scroll-start-x",
39
- "value": "auto | start | end | center | <length-percentage>",
39
+ "value": "auto | start | end | center | <length-percentage [0,∞]>",
40
40
  "initial": "auto",
41
41
  "appliesTo": "scroll containers",
42
42
  "inherited": "no",
@@ -51,7 +51,7 @@
51
51
  },
52
52
  "scroll-start-y": {
53
53
  "name": "scroll-start-y",
54
- "value": "auto | start | end | center | <length-percentage>",
54
+ "value": "auto | start | end | center | <length-percentage [0,∞]>",
55
55
  "initial": "auto",
56
56
  "appliesTo": "scroll containers",
57
57
  "inherited": "no",
@@ -66,7 +66,7 @@
66
66
  },
67
67
  "scroll-start-inline": {
68
68
  "name": "scroll-start-inline",
69
- "value": "auto | start | end | center | <length-percentage>",
69
+ "value": "auto | start | end | center | <length-percentage [0,∞]>",
70
70
  "initial": "auto",
71
71
  "appliesTo": "scroll containers",
72
72
  "inherited": "no",
@@ -81,7 +81,7 @@
81
81
  },
82
82
  "scroll-start-block": {
83
83
  "name": "scroll-start-block",
84
- "value": "auto | start | end | center | <length-percentage>",
84
+ "value": "auto | start | end | center | <length-percentage [0,∞]>",
85
85
  "initial": "auto",
86
86
  "appliesTo": "scroll containers",
87
87
  "inherited": "no",
@@ -21,7 +21,7 @@
21
21
  },
22
22
  "scroll-padding": {
23
23
  "name": "scroll-padding",
24
- "value": "[ auto | <length-percentage> ]{1,4}",
24
+ "value": "[ auto | <length-percentage [0,∞]> ]{1,4}",
25
25
  "initial": "auto",
26
26
  "appliesTo": "scroll containers",
27
27
  "inherited": "no",
@@ -81,7 +81,7 @@
81
81
  },
82
82
  "scroll-padding-top": {
83
83
  "name": "scroll-padding-top",
84
- "value": "auto | <length-percentage>",
84
+ "value": "auto | <length-percentage [0,∞]>",
85
85
  "initial": "auto",
86
86
  "appliesTo": "scroll containers",
87
87
  "inherited": "no",
@@ -96,7 +96,7 @@
96
96
  },
97
97
  "scroll-padding-right": {
98
98
  "name": "scroll-padding-right",
99
- "value": "auto | <length-percentage>",
99
+ "value": "auto | <length-percentage [0,∞]>",
100
100
  "initial": "auto",
101
101
  "appliesTo": "scroll containers",
102
102
  "inherited": "no",
@@ -111,7 +111,7 @@
111
111
  },
112
112
  "scroll-padding-bottom": {
113
113
  "name": "scroll-padding-bottom",
114
- "value": "auto | <length-percentage>",
114
+ "value": "auto | <length-percentage [0,∞]>",
115
115
  "initial": "auto",
116
116
  "appliesTo": "scroll containers",
117
117
  "inherited": "no",
@@ -126,7 +126,7 @@
126
126
  },
127
127
  "scroll-padding-left": {
128
128
  "name": "scroll-padding-left",
129
- "value": "auto | <length-percentage>",
129
+ "value": "auto | <length-percentage [0,∞]>",
130
130
  "initial": "auto",
131
131
  "appliesTo": "scroll containers",
132
132
  "inherited": "no",
@@ -141,7 +141,7 @@
141
141
  },
142
142
  "scroll-padding-inline-start": {
143
143
  "name": "scroll-padding-inline-start",
144
- "value": "auto | <length-percentage>",
144
+ "value": "auto | <length-percentage [0,∞]>",
145
145
  "initial": "auto",
146
146
  "appliesTo": "scroll containers",
147
147
  "inherited": "no",
@@ -156,7 +156,7 @@
156
156
  },
157
157
  "scroll-padding-block-start": {
158
158
  "name": "scroll-padding-block-start",
159
- "value": "auto | <length-percentage>",
159
+ "value": "auto | <length-percentage [0,∞]>",
160
160
  "initial": "auto",
161
161
  "appliesTo": "scroll containers",
162
162
  "inherited": "no",
@@ -171,7 +171,7 @@
171
171
  },
172
172
  "scroll-padding-inline-end": {
173
173
  "name": "scroll-padding-inline-end",
174
- "value": "auto | <length-percentage>",
174
+ "value": "auto | <length-percentage [0,∞]>",
175
175
  "initial": "auto",
176
176
  "appliesTo": "scroll containers",
177
177
  "inherited": "no",
@@ -186,7 +186,7 @@
186
186
  },
187
187
  "scroll-padding-block-end": {
188
188
  "name": "scroll-padding-block-end",
189
- "value": "auto | <length-percentage>",
189
+ "value": "auto | <length-percentage [0,∞]>",
190
190
  "initial": "auto",
191
191
  "appliesTo": "scroll containers",
192
192
  "inherited": "no",
@@ -201,7 +201,7 @@
201
201
  },
202
202
  "scroll-padding-block": {
203
203
  "name": "scroll-padding-block",
204
- "value": "[ auto | <length-percentage> ]{1,2}",
204
+ "value": "[ auto | <length-percentage [0,∞]> ]{1,2}",
205
205
  "initial": "auto",
206
206
  "appliesTo": "scroll containers",
207
207
  "inherited": "no",
@@ -216,7 +216,7 @@
216
216
  },
217
217
  "scroll-padding-inline": {
218
218
  "name": "scroll-padding-inline",
219
- "value": "[ auto | <length-percentage> ]{1,2}",
219
+ "value": "[ auto | <length-percentage [0,∞]> ]{1,2}",
220
220
  "initial": "auto",
221
221
  "appliesTo": "scroll containers",
222
222
  "inherited": "no",
package/css-shapes-2.json CHANGED
@@ -37,49 +37,44 @@
37
37
  },
38
38
  "descriptors": {},
39
39
  "valuespaces": {
40
- "<shape()>": {
41
- "value": "shape( <'fill-rule'>? from <coordinate-pair>, <shape-command>#)"
42
- },
43
40
  "<shape-command>": {
41
+ "prose": "The sequence of <shape-command>s represent further path data commands. Each command’s starting point is the previous command’s ending point.",
44
42
  "value": "<move-command> | <line-command> | <hv-line-command> | <curve-command> | <smooth-command> | <arc-command> | close"
45
43
  },
46
44
  "<coordinate-pair>": {
47
- "value": "<length-percentage>{2}",
48
- "prose": "Defines a pair of coordinates, representing a rightward and downward offset, respectively, from a specified reference point. Percentages are resolved against the width or height, respectively, of the reference box."
45
+ "value": "<length-percentage>{2}"
49
46
  },
50
47
  "<by-to>": {
51
- "value": "by | to",
52
- "prose": "Every command can be specified in \"absolute\" or \"relative\" coordinates, determined by their <by-to> component. to indicates that any <coordinate-pair>s in the command are relative to the top-left corner of the reference box, while by indicates that the <coordinate-pair>s are relative to the command’s starting point."
48
+ "value": "by | to"
53
49
  },
54
50
  "<move-command>": {
55
- "value": "move <by-to> <coordinate-pair>",
56
- "prose": "Adds a moveto command to the list of path data commands, with an ending point specified by the <coordinate-pair>. This draws nothing, and merely \"moves the pen\" for the next command."
51
+ "value": "move <by-to> <coordinate-pair>"
57
52
  },
58
53
  "<line-command>": {
59
- "value": "line <by-to> <coordinate-pair>",
60
- "prose": "Adds a lineto command to the list of path data commands, with an ending point specified by the <coordinate-pair>. This draws a straight line from the command’s starting point to its ending point."
54
+ "value": "line <by-to> <coordinate-pair>"
61
55
  },
62
56
  "<hv-line-command>": {
63
- "value": "[hline | vline] <by-to> <length-percentage>",
64
- "prose": "Adds a horizontal (for hline) or vertical (for vline) lineto command to the list of path data commands. This is equivalent to a line command with the <length-percentage> given as the horizontal or vertical component, respectively, of the <coordinate-pair>, and the other component specified appropriately to make the line horizontal or vertical."
57
+ "value": "[hline | vline] <by-to> <length-percentage>"
65
58
  },
66
59
  "<curve-command>": {
67
- "value": "curve <by-to> <coordinate-pair> via <coordinate-pair>{1,2}",
68
- "prose": "Adds a Bézier curve command to the list of path data commands, ending at the point specified by the first <coordinate-pair>. The via component specifies control points for the curve: if a single <coordinate-pair> is provided, the command specifies a quadratic curve; if two <coordinate-pair>s are provided, it specifies a cubic curve."
60
+ "value": "curve <by-to> <coordinate-pair> via <coordinate-pair>{1,2}"
69
61
  },
70
62
  "<smooth-command>": {
71
- "value": "smooth <by-to> <coordinate-pair> [via <coordinate-pair>]?",
72
- "prose": "Adds a smooth Bézier curve command to the list of path data commands, ending at the point specified by the first <coordinate-pair>. The via component specifies control points for the curve: if it’s omitted, the command specifies a smooth quadratic curve; if it’s provided, if specifies a smooth cubic curve."
63
+ "value": "smooth <by-to> <coordinate-pair> [via <coordinate-pair>]?"
73
64
  },
74
65
  "<arc-command>": {
75
- "value": "arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ]?",
76
- "prose": "Add an elliptical arc command to the list of path data commands, ending at the point specified by the <coordinate-pair>. The of component specifies the size of the ellipse that the arc is taken from. The first <length-percentage> provides the horizontal radius of the ellipse and the second provides the vertical radius. Like for <coordinate-pair>s, <percentage> values are resolved against the width or height of the reference box, as appropriate. If only one <length-percentage> is provided, both radiuses use the provided value. In that case, <percentage> values are resolved against the direction-agnostic size of the reference box (similar to the circle() function). The ellipse described by the specified radiuses defaults to being axis-aligned, but can be rotated by specifying an <angle>. Similar to the rotate() transform function, positive angles specify a clockwise rotation, and negative angles specify a counterclockwise rotation. If omitted, this defaults to 0deg. The ending point, radiuses, and angle, taken together, usually define two possible ellipses that intersect the starting point and ending point, and each ellipse can be traced in either direction, for a total of four possible arcs. The <arc-sweep> and <arc-size> components specify which of these arcs is desired: <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. Note: In the SVG arc command, cw corresponds to the value 1 for the sweep flag, and ccw to the value 0. <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. Note: In the SVG arc command, large corresponds to the value 1 for the large flag, and small to the 0. Note: If the starting and ending points are on exactly opposite sides of the ellipse, both possible arcs are the same size, but also there is only one possible ellipse. In this case, the <arc-sweep> distinguishes which of the two possible arcs will be chosen, and <arc-size> has no effect. A depiction of the two possible ellipses, and four possible arcs, that can be chosen between."
66
+ "value": "arc <by-to> <coordinate-pair> of <length-percentage>{1,2} [ <arc-sweep> || <arc-size> || rotate <angle> ]"
77
67
  },
78
68
  "<arc-sweep>": {
69
+ "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.",
79
70
  "value": "cw | ccw"
80
71
  },
81
72
  "<arc-size>": {
73
+ "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.",
82
74
  "value": "large | small"
75
+ },
76
+ "<shape()>": {
77
+ "value": "shape( <'fill-rule'>? from <coordinate-pair>, <shape-command>#)"
83
78
  }
84
79
  }
85
80
  }
package/css-shapes.json CHANGED
@@ -52,11 +52,8 @@
52
52
  },
53
53
  "descriptors": {},
54
54
  "valuespaces": {
55
- "<basic-shape-rect>": {
56
- "value": "<inset()> | <rect()> | <xywh()>"
57
- },
58
- "<shape-box>": {
59
- "value": "<box> | margin-box"
55
+ "<basic-shape>": {
56
+ "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."
60
57
  },
61
58
  "<inset()>": {
62
59
  "value": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )"
@@ -80,8 +77,13 @@
80
77
  "value": "path( [<'fill-rule'>,]? <string> )"
81
78
  },
82
79
  "<shape-radius>": {
83
- "value": "<length-percentage> | closest-side | farthest-side",
84
- "prose": "Defines a radius for a circle or ellipse. If omitted it defaults to closest-side. closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension. farthest-side uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension."
80
+ "value": "<length-percentage [0,∞]> | closest-side | farthest-side"
81
+ },
82
+ "<basic-shape-rect>": {
83
+ "value": "<inset()> | <rect()> | <xywh()>"
84
+ },
85
+ "<shape-box>": {
86
+ "value": "<box> | margin-box"
85
87
  }
86
88
  }
87
89
  }
@@ -6,7 +6,7 @@
6
6
  "properties": {
7
7
  "text-size-adjust": {
8
8
  "name": "text-size-adjust",
9
- "value": "auto | none | <percentage>",
9
+ "value": "auto | none | <percentage [0,∞]>",
10
10
  "initial": "auto",
11
11
  "appliesTo": "all elements",
12
12
  "inherited": "yes",
@@ -21,9 +21,5 @@
21
21
  }
22
22
  },
23
23
  "descriptors": {},
24
- "valuespaces": {
25
- "<percentage>": {
26
- "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."
27
- }
28
- }
24
+ "valuespaces": {}
29
25
  }
package/css-sizing.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "properties": {
7
7
  "width": {
8
8
  "name": "width",
9
- "value": "auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
9
+ "value": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
10
10
  "initial": "auto",
11
11
  "appliesTo": "all elements except non-replaced inlines",
12
12
  "inherited": "no",
@@ -20,7 +20,7 @@
20
20
  },
21
21
  "height": {
22
22
  "name": "height",
23
- "value": "auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
23
+ "value": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
24
24
  "initial": "auto",
25
25
  "appliesTo": "all elements except non-replaced inlines",
26
26
  "inherited": "no",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  "min-width": {
36
36
  "name": "min-width",
37
- "value": "auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
37
+ "value": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
38
38
  "initial": "auto",
39
39
  "appliesTo": "all elements that accept width or height",
40
40
  "inherited": "no",
@@ -49,7 +49,7 @@
49
49
  },
50
50
  "min-height": {
51
51
  "name": "min-height",
52
- "value": "auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
52
+ "value": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
53
53
  "initial": "auto",
54
54
  "appliesTo": "all elements that accept width or height",
55
55
  "inherited": "no",
@@ -64,7 +64,7 @@
64
64
  },
65
65
  "max-width": {
66
66
  "name": "max-width",
67
- "value": "none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
67
+ "value": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
68
68
  "initial": "none",
69
69
  "appliesTo": "all elements that accept width or height",
70
70
  "inherited": "no",
@@ -79,7 +79,7 @@
79
79
  },
80
80
  "max-height": {
81
81
  "name": "max-height",
82
- "value": "none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)",
82
+ "value": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content(<length-percentage [0,∞]>)",
83
83
  "initial": "none",
84
84
  "appliesTo": "all elements that accept width or height",
85
85
  "inherited": "no",
@@ -119,9 +119,5 @@
119
119
  }
120
120
  },
121
121
  "descriptors": {},
122
- "valuespaces": {
123
- "<fit-content()>": {
124
- "value": "fit-content(<length-percentage>)"
125
- }
126
- }
122
+ "valuespaces": {}
127
123
  }