Skip to content

Commit 4526f8c

Browse files
committed
[css-backgrounds-4] Ref <flex> properly.
1 parent 63fcb8d commit 4526f8c

File tree

1 file changed

+10
-11
lines changed

1 file changed

+10
-11
lines changed

css-backgrounds-4/Overview.bs

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ The 'border-clip' properties</h3>
294294

295295
<pre class="propdef">
296296
Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left
297-
Value: normal | [ <<length-percentage>> | <<fraction>> ]+
297+
Value: normal | [ <<length-percentage>> | <<flex>> ]+
298298
Initial: normal
299299
Inherited: no
300300
Percentages: refer to length of border-edge side
@@ -306,29 +306,28 @@ The 'border-clip' properties</h3>
306306
<p>These properties split their respective borders into parts along
307307
the border edge. The first part is visible, the second is invisible,
308308
the third part is visible, etc. Parts can be specified with lengths,
309-
percentages, or fractions (expressed by the ''fr'' unit, as per
310-
[[CSS3GRID]] or its <a href="https://drafts.csswg.org/css3-grid/">editor's
311-
edition</a>).
309+
percentages, or flexible lengths (expressed by the ''fr'' unit, as per
310+
[[CSS3GRID]]).
312311
The ''border-clip/normal'' value means
313312
that the border is not split, but shown normally.
314313

315314
<p>'border-clip' is a shorthand property for the four individual properties.
316315

317316
<p>If the listed parts are shorter than the border, any remaining
318-
border is split proportionally between the specified fractions. If
319-
there are no fractions, the behavior is as if ''1fr'' had been
317+
border is split proportionally between the specified flexible lengths. If
318+
there are no flexible lengths, the behavior is as if ''1fr'' had been
320319
specified at the end of the list.
321320

322321
<p>If the listed parts are longer than the border, the specified parts
323322
will be shown in full until the end of the border. In this case, all
324-
fractions will be zero.
323+
flexible lengths will be zero.
325324

326325
<p>For horizontal borders, parts are listed from left to right. For
327326
vertical borders, parts are listed from top to bottom.
328327

329328
<p>The exact border parts are determined by laying out the specified border
330-
parts with all fractions initially set to zero. Any remaining border is
331-
split proportionally between the fractions specified.
329+
parts with all flexible lengths initially set to zero. Any remaining border is
330+
split proportionally between the flexible lengths specified.
332331

333332
<div class="example">
334333

@@ -466,7 +465,7 @@ The 'border-clip' properties</h3>
466465
border: 2px solid black;
467466
border-top-parts: repeat(10px 10px);
468467
</pre>
469-
<p>In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a fraction, as if this code had been specified:
468+
<p>In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a flexible length, as if this code had been specified:
470469
<pre>
471470
border: 2px solid black;
472471
border-top-parts: repeat(10px 10px) 1fr;
@@ -523,7 +522,7 @@ The 'border-clip' properties</h3>
523522
border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
524523
</pre>
525524

526-
<p>All but one of the visible border parts are represented as fractions in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
525+
<p>All but one of the visible border parts are represented as flexible lengths in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
527526
<div style="position: relative; width: 190px; background: white; padding: 40px">
528527
<div style="border: 4px solid black; border-top: none; height: 40px"></div>
529528
<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 40px"></div>

0 commit comments

Comments
 (0)