Skip to content

Commit 8351e60

Browse files
SebastianZtabatkins
SebastianZ
authored and
tabatkins
committed
[css-backgrounds-4] Bikeshed improvements related to property values (w3c#232)
(fixes w3c#138)
1 parent 153331d commit 8351e60

File tree

1 file changed

+37
-104
lines changed

1 file changed

+37
-104
lines changed

‎css-backgrounds-4/Overview.bs

+37-104
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,9 @@ Backgrounds</h2>
3131
<h3 id="the-background-position">
3232
Background Positioning: the 'background-position' shorthand property</h3>
3333

34-
<pre class='propdef'>
34+
<pre class="propdef shorthand">
3535
Name: background-position
3636
Value: <<position>>#
37-
Initial: top left
38-
Applies to: all
39-
Inherited: no
40-
Percentages: refer to size of background positioning area <em>minus</em> size of background image
41-
Media: visual
42-
Computed value: A list, each item consisting of: a pair of offsets and an origin, each offset given as a combination of an absolute length and a percentage
4337
</pre>
4438

4539
See [[CSS3BG]] for definition.
@@ -86,56 +80,48 @@ Background Positioning Longhands: the 'background-position-x', 'background-posit
8680

8781
Issue: This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
8882

89-
<pre class='propdef'>
83+
<pre class="propdef">
9084
Name: background-position-x
91-
Value: [ center | [ left | right | x-start | x-end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
85+
Value: [ center | [ left | right | x-start | x-end ]? <<length-percentage>>? ]#
9286
Initial: left
93-
Applies to: all
9487
Inherited: no
9588
Percentages: refer to width of background positioning area <em>minus</em> width of background image
96-
Media: visual
9789
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
9890
</pre>
9991

10092
This property specifies the background position's horizontal component.
10193
An omitted origin keyword is assumed to be ''left''.
10294

103-
<pre class='propdef'>
95+
<pre class="propdef">
10496
Name: background-position-y
105-
Value: [ center | [ top | bottom | y-start | y-end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
97+
Value: [ center | [ top | bottom | y-start | y-end ]? <<length-percentage>>? ]#
10698
Initial: left
107-
Applies to: all
10899
Inherited: no
109100
Percentages: refer to height of background positioning area <em>minus</em> height of background image
110-
Media: visual
111101
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
112102
</pre>
113103

114104
This property specifies the background position's vertical component.
115105
An omitted origin keyword is assumed to be ''top''.
116106

117-
<pre class='propdef'>
107+
<pre class="propdef">
118108
Name: background-position-inline
119-
Value: [ center | [ start | end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
109+
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
120110
Initial: not applicable (initial value comes from physical property)
121-
Applies to: all
122111
Inherited: no
123112
Percentages: refer to inline-size of background positioning area <em>minus</em> inline-size of background image
124-
Media: visual
125113
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
126114
</pre>
127115

128116
This property specifies the background position's inline-axis component.
129117
An omitted origin keyword is assumed to be ''background-position-inline/start''.
130118

131-
<pre class='propdef'>
119+
<pre class="propdef">
132120
Name: background-position-block
133-
Value: [ center | [ start | end ]? [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]#
121+
Value: [ center | [ start | end ]? <<length-percentage>>? ]#
134122
Initial: not applicable (initial value comes from physical property)
135-
Applies to: all
136123
Inherited: no
137124
Percentages: refer to size of background positioning area <em>minus</em> size of background image
138-
Media: visual
139125
Computed value: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
140126
</pre>
141127

@@ -148,35 +134,25 @@ Corners</h2>
148134
<h3 id=corner-sizing>
149135
Corner Sizing: the 'border-radius property</h3>
150136

151-
<pre class='propdef'>
152-
Name: border-radius
153-
Value: [ <<length>> | <<percentage>> ]{1,4} [ / [ <<length>> | <<percentage>> ]{1,4} ]?
154-
Initial: 0
155-
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
156-
Inherited: no
157-
Percentages: n/a
158-
Media: visual
159-
Computed value: specified value
160-
Animatable: no
161-
Canonical order: n/a
137+
<pre class="propdef">
138+
Name: border-radius
139+
Value: <<length-percentage>>{1,4} [ / <<length-percentage>>{1,4} ]?
140+
Initial: 0
141+
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
142+
Inherited: no
162143
</pre>
163144

164145
See [[CSS3BG]].
165146

166147
<h3 id=corner-shaping>
167148
Corner Shaping: the 'corner-shape' property</h3>
168149

169-
<pre class='propdef'>
150+
<pre class="propdef">
170151
Name: corner-shape
171-
Value: [round | bevel | scoop | notch]{1,4}
152+
Value: [ round | bevel | scoop | notch ]{1,4}
172153
Initial: round
173154
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
174155
Inherited: no
175-
Percentages: n/a
176-
Media: visual
177-
Computed value: specified value
178-
Animatable: no
179-
Canonical order: n/a
180156
</pre>
181157

182158
By default, non-zero border-radii define
@@ -219,15 +195,9 @@ Corner Shaping: the 'corner-shape' property</h3>
219195
<h3 id="corners-shorthand">
220196
Corner Shape and Size: the 'corners' shorthand</h3>
221197

222-
<pre class='propdef'>
198+
<pre class="propdef shorthand">
223199
Name: corners
224200
Value: <<'corner-shape'>> || <<'border-radius'>>
225-
Initial: see individual properties
226-
Applies to: see individual properties
227-
Inherited: see individual properties
228-
Percentages: see individual properties
229-
Media: visual
230-
Computed value: see individual properties
231201
</pre>
232202

233203
The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration.
@@ -266,34 +236,15 @@ Partial borders</h2>
266236
<h3 id="border-limit">
267237
Partial Borders: the 'border-limit' property</h3>
268238

269-
<table class=propdef>
270-
<tr>
271-
<th>Name:
272-
<td><dfn>border-limit</dfn>
273-
<tr>
274-
<th>Value:
275-
<td>all | [ sides | corners ] [ &lt;length&gt; | &lt;percentage&gt; ]?
276-
| [ top | right | bottom | left ] [ &lt;length&gt; | &lt;percentage&gt; ]
277-
<tr>
278-
<th>Initial:
279-
<td>round
280-
<tr>
281-
<th>Applies to:
282-
<td>all elements, except table element when 'border-collapse' is
283-
''collapse''
284-
<tr>
285-
<th>Inherited:
286-
<td>no
287-
<tr>
288-
<th>Percentages:
289-
<td>relative to border-box
290-
<tr>
291-
<th>Media:
292-
<td>visual
293-
<tr>
294-
<th>Computed value:
295-
<td>as specified
296-
</table>
239+
<pre class="propdef">
240+
Name: border-limit
241+
Value: all | [ sides | corners ] <<length-percentage>>?
242+
| [ top | right | bottom | left ] <<length-percentage>>
243+
Initial: round
244+
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
245+
Inherited: no
246+
Percentages: relative to border-box
247+
</pre>
297248

298249
<p>By default, the entire border is drawn. However, border rendering can be
299250
limited to only part of a border. The keyword specifies which part, and
@@ -341,34 +292,16 @@ Partial Borders: the 'border-limit' property</h3>
341292
<h3 id="border-clip">
342293
The 'border-clip' properties</h3>
343294

344-
<table class=propdef>
345-
<tr>
346-
<th>Name:
347-
<td><dfn>border-clip</dfn>, <dfn>border-clip-top</dfn>, <dfn>border-clip-right</dfn>, <dfn>border-clip-bottom</dfn>, <dfn>border-clip-left</dfn>
348-
<tr>
349-
<th>Value:
350-
<td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; ]+
351-
<tr>
352-
<th>Initial:
353-
<td>normal
354-
<tr>
355-
<th>Applies to:
356-
<td>all elements
357-
<tr>
358-
<th>Inherited:
359-
<td>no
360-
<tr>
361-
<th>Percentages:
362-
<td>refer to length of border-edge side
363-
<tr>
364-
<th>Media:
365-
<td>visual
366-
<tr>
367-
<th>Computed&nbsp;value:
368-
<td>''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
369-
</table>
370-
371-
<p class=issue>Should these properties be simplified to only accept <code>normal | [ &lt;length&gt; | &lt;percentage&gt; ] +</code>?
295+
<pre class="propdef">
296+
Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
297+
Value: normal | [ <<length-percentage>> | <<fraction>> ]+
298+
Initial: normal
299+
Inherited: no
300+
Percentages: refer to length of border-edge side
301+
Computed value: ''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified
302+
</pre>
303+
304+
<p class=issue>Should these properties be simplified to only accept <code>normal | <<length-percentage>>+</code>?
372305

373306
<p>These properties split their respective borders into parts along
374307
the border edge. The first part is visible, the second is invisible,

0 commit comments

Comments
 (0)