Skip to content

Commit 9058345

Browse files
SebastianZSebastianZ
authored
[css-borders-4][editorial] Moved logical border properties from CSS Logical 1 to CSS Borders 4 (#9592)
1 parent 7fad913 commit 9058345

File tree

1 file changed

+207
-24
lines changed

1 file changed

+207
-24
lines changed

‎css-borders-4/Overview.bs‎

Lines changed: 207 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,31 +29,31 @@ Introduction</h2>
2929
This module is currently maintained as a diff against
3030
the parts related to borders and box decorations of
3131
CSS Backgrounds and Borders Module Level 3 [[CSS3BG]].
32-
We will fold in the text once it's all formatted up and in CR again,
32+
We will fold in the text once it’s all formatted up and in CR again,
3333
as this will reduce the effort of keeping them in sync
3434
(source diffs will be accurate in reflecting the differences).
3535

3636
<h2 id="borders">
3737
Borders</h2>
3838

39-
<p class="issue">
40-
Should logical border properties be moved from
41-
<a href="https://www.w3.org/TR/css-logical-1/#border-properties">CSS Logical</a>
42-
to here?
39+
<p>The border can either be a predefined style (solid line, double
40+
line, dotted line, pseudo-3D border, etc.) or it can be an image. In
41+
the former case, various properties define the style ('border-style'),
42+
color ('border-color'), and thickness ('border-width') of the border.
4343

44-
<h3 id="the-border-color">
44+
<h3 id="border-color" oldids="the-border-color">
4545
Line Colors: the 'border-color' properties</h3>
4646

47-
<pre class=propdef>
48-
Name: border-top-color, border-right-color, border-bottom-color, border-left-color
49-
Value: <<color>> | <<image-1D>>
50-
Initial: currentcolor
51-
Applies to: all elements
52-
Inherited: no
53-
Logical property group: border-color
54-
Percentages: n/a
55-
Computed Value: the computed color and/or a one-dimensional image function
56-
Animation type: see prose
47+
<pre class="propdef">
48+
Name: border-top-color, border-right-color, border-bottom-color, border-left-color, border-block-start-color, border-block-end-color, border-inline-start-color, border-inline-end-color
49+
Value: <<color>> | <<image-1D>>
50+
Initial: currentcolor
51+
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
52+
Inherited: no
53+
Logical property group: border-color
54+
Percentages: N/A
55+
Computed Value: the computed color and/or a one-dimensional image function
56+
Animation type: see prose
5757
</pre>
5858

5959
<pre class="propdef shorthand">
@@ -70,13 +70,6 @@ Line Colors: the 'border-color' properties</h3>
7070
The border width at each point
7171
defines the |total width| of the stripes at that point.
7272

73-
'border-color' is a shorthand for the four 'border-*-color' properties.
74-
The four values set the top, right, bottom and left border, respectively.
75-
A missing left is the same as right,
76-
a missing bottom is the same as top,
77-
and a missing right is also the same as top.
78-
This is resolved individually for each list item.
79-
8073
<div class="example">
8174
Using multiple colors for each side:
8275

@@ -96,11 +89,200 @@ Line Colors: the 'border-color' properties</h3>
9689
<img src="images/multicolor-border-dotted.png" alt="">
9790
</div>
9891

92+
'border-color' is a shorthand for the four 'border-*-color' properties.
93+
The four values set the top, right, bottom and left border, respectively.
94+
A missing left is the same as right,
95+
a missing bottom is the same as top,
96+
and a missing right is also the same as top.
97+
This is resolved individually for each list item.
98+
99+
The [=flow-relative=] properties
100+
'border-block-start-color',
101+
'border-block-end-color',
102+
'border-inline-start-color',
103+
and 'border-inline-end-color'
104+
correspond to the [=physical=] properties
105+
'border-top-color',
106+
'border-bottom-color',
107+
'border-left-color',
108+
and 'border-right-color'.
109+
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
110+
111+
<pre class="propdef shorthand">
112+
Name: border-block-color, border-inline-color
113+
Value: <<'border-top-color'>>{1,2}
114+
</pre>
115+
116+
These two <a>shorthand properties</a> set the
117+
'border-block-start-color' &amp; 'border-block-end-color'
118+
and
119+
'border-inline-start-color' &amp; 'border-inline-end-color',
120+
respectively.
121+
The first value represents the <a>start</a> side color,
122+
and the second value represents the <a>end</a> side color.
123+
If only one value is given,
124+
it applies to both the <a>start</a> and <a>end</a> sides.
125+
126+
<h3 id="border-style" oldids="the-border-style">
127+
Line Patterns: the 'border-style' properties</h3>
128+
129+
<pre class="propdef">
130+
Name: border-top-style, border-right-style, border-bottom-style, border-left-style, border-block-start-style, border-block-end-style, border-inline-start-style, border-inline-end-style
131+
Value: <<line-style>>
132+
Initial: none
133+
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
134+
Inherited: no
135+
Logical property group: border-style
136+
Percentages: N/A
137+
Computed value: specified keyword
138+
Animation type: discrete
139+
</pre>
140+
141+
The [=flow-relative=] properties
142+
'border-block-start-style',
143+
'border-block-end-style',
144+
'border-inline-start-style',
145+
and 'border-inline-end-style'
146+
correspond to the [=physical=] properties
147+
'border-top-style',
148+
'border-bottom-style',
149+
'border-left-style',
150+
and 'border-right-style'.
151+
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
152+
153+
<pre class="propdef shorthand">
154+
Name: border-block-style, border-inline-style
155+
Value: <<'border-top-style'>>{1,2}
156+
</pre>
157+
158+
These two <a>shorthand properties</a> set the
159+
'border-block-start-style' &amp; 'border-block-end-style'
160+
and
161+
'border-inline-start-style' &amp; 'border-inline-end-style',
162+
respectively.
163+
The first value represents the <a>start</a> side style,
164+
and the second value represents the <a>end</a> side style.
165+
If only one value is given,
166+
it applies to both the <a>start</a> and <a>end</a> sides.
167+
168+
<h3 id="border-width" oldids="the-border-width">
169+
Line Thickness: the 'border-width' properties</h3>
170+
171+
<pre class="propdef">
172+
Name: border-top-width, border-right-width, border-bottom-width, border-left-width, border-block-start-width, border-block-end-width, border-inline-start-width, border-inline-end-width
173+
Value: <<line-width>>
174+
Initial: medium
175+
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
176+
Inherited: no
177+
Logical property group: border-width
178+
Percentages: N/A
179+
Computed value: absolute length, [=snapped as a border width=]; zero if the border style is ''border-style/none'' or ''border-style/hidden''
180+
Animation Type: by computed value
181+
</pre>
182+
183+
The [=flow-relative=] properties
184+
'border-block-start-width',
185+
'border-block-end-width',
186+
'border-inline-start-width',
187+
and 'border-inline-end-width'
188+
correspond to the [=physical=] properties
189+
'border-top-width',
190+
'border-bottom-width',
191+
'border-left-width',
192+
and 'border-right-width'.
193+
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
194+
195+
<pre class="propdef shorthand">
196+
Name: border-block-width, border-inline-width
197+
Value: <<'border-top-width'>>{1,2}
198+
</pre>
199+
200+
These two <a>shorthand properties</a> set the
201+
'border-block-start-width' &amp; 'border-block-end-width'
202+
and
203+
'border-inline-start-width' &amp; 'border-inline-end-width',
204+
respectively.
205+
The first value represents the <a>start</a> side width,
206+
and the second value represents the <a>end</a> side width.
207+
If only one value is given,
208+
it applies to both the <a>start</a> and <a>end</a> sides.
209+
210+
<h3 id="border-shorthands" oldids="the-border-shorthands">
211+
Border Shorthand Properties</h3>
212+
213+
<pre class="propdef shorthand">
214+
Name: border-top, border-right, border-bottom, border-left, border-block-start, border-block-end, border-inline-start, border-inline-end
215+
Value: <<line-width>> || <<line-style>> || <<color>>
216+
Initial: See individual properties
217+
Applies to: all elements except [=ruby base containers=] and [=ruby annotation containers=]
218+
Inherited: no
219+
Percentages: N/A
220+
Computed value: see individual properties
221+
Animation Type: see individual properties
222+
</pre>
223+
224+
The [=flow-relative=] properties
225+
'border-block-start',
226+
'border-block-end',
227+
'border-inline-start',
228+
and 'border-inline-end'
229+
correspond to the [=physical=] properties
230+
'border-top',
231+
'border-bottom',
232+
'border-left',
233+
and 'border-right'.
234+
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation'.
235+
236+
<pre class="propdef shorthand">
237+
Name: border-block, border-inline
238+
Value: <<'border-block-start'>>
239+
</pre>
240+
241+
These two <a>shorthand properties</a> set the
242+
'border-block-start' &amp; 'border-block-end'
243+
or
244+
'border-inline-start' &amp; 'border-inline-end',
245+
respectively,
246+
both to the same style.
247+
248+
<!-- intentionally cannot set two sides independently;
249+
see discussion in https://github.com/w3c/csswg-drafts/issues/3519 -->
250+
99251
<h2 id="corners">
100252
Corners</h2>
101253

254+
<h3 id="border-radius" oldids="the-border-radius">
255+
Corner Sizing: the 'border-*-*-radius' properties</h3>
256+
257+
<pre class=propdef>
258+
Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
259+
Value: <<length-percentage [0,&infin;]>>{1,2}
260+
Initial: 0
261+
Applies to: all elements (but see prose)
262+
Inherited: no
263+
Logical property group: border-radius
264+
Percentages: Refer to corresponding dimension of the <a>border box</a>.
265+
Computed value: pair of computed <<length-percentage>> values
266+
Animation Type: by computed value
267+
</pre>
268+
269+
The [=flow-relative=] properties
270+
'border-start-start-radius',
271+
'border-start-end-radius',
272+
'border-end-start-radius',
273+
and 'border-end-end-radius'
274+
correspond to the [=physical=] properties
275+
'border-top-left-radius',
276+
'border-bottom-left-radius',
277+
'border-top-right-radius',
278+
and 'border-bottom-right-radius'.
279+
The mapping depends on the element’s 'writing-mode', 'direction', and 'text-orientation',
280+
with the first start/end giving the block axis side,
281+
and the second the inline-axis side
282+
(i.e. patterned as 'border-<var>block</var>-<var>inline</var>-radius').
283+
102284
<h3 id="corner-sizing">
103-
Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
285+
Corner Sizing Shorthands: the 'border-radius' and 'border-*-radius' shorthand properties</h3>
104286

105287
<h4 id="corner-sizing-side-shorthands">
106288
Sizing The Corners Of One Side:
@@ -803,6 +985,7 @@ Additions since [[CSS3BG]]</h3>
803985
* added 'corner-shape' and related 'corners' shorthand
804986
* added <a href="#partial-borders">partial borders</a> via 'border-limit' and 'border-*-clip' properties
805987
* turned 'box-shadow' into a shorthand and added longhands
988+
* moved logical border properties from [[CSS-LOGICAL-1]] to this spec.
806989

807990
<h2 id="acknowledgments">
808991
Acknowledgments</h2>

0 commit comments

Comments
 (0)