Skip to content

Commit 10caa0f

Browse files
SebastianZSebastianZ
authored
[css-borders-4] Fixed examples for border-limit and border-*-clip properties (w3c#9656)
The examples for `border-*-clip` using a `repeat()` function will be added back once it's described how repetitions are meant to work.
1 parent 3c3ca3c commit 10caa0f

File tree

1 file changed

+52
-66
lines changed

1 file changed

+52
-66
lines changed

‎css-borders-4/Overview.bs‎

Lines changed: 52 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -300,19 +300,62 @@ Partial Borders: the 'border-limit' property</h3>
300300

301301
<div class="example">
302302
<p>The following example draws only the middle 50% of the sides.</p>
303-
<pre>box { border: solid; border-parts: sides 50% }</pre>
303+
<pre class="lang-css">
304+
div {
305+
border: solid;
306+
border-limit: sides 50%;
307+
}
308+
</pre>
309+
</div>
310+
<div class="example">
304311
<p>The following example draws only the curved parts of the corners.</p>
305-
<pre>box { border: solid; border-radius: 1em 2em; border-parts: corners; }</pre>
312+
<pre class="lang-css">
313+
div {
314+
border: solid;
315+
border-radius: 1em 2em;
316+
border-limit: corners;
317+
}
318+
</pre>
319+
</div>
320+
<div class="example">
306321
<p>The following example draws only the left 4em of the top border.</p>
307-
<pre>box { border-top: solid; border-parts: left 4em; }</pre>
322+
<pre class="lang-css">
323+
div {
324+
border-top: solid;
325+
border-limit: left 4em;
326+
}
327+
</pre>
328+
</div>
329+
<div class="example">
308330
<p>The following example draws only the first 10px of each corner:</p>
309-
<pre>box { border: solid; border-parts: corners 10px; }</pre>
331+
<pre class="lang-css">
332+
div {
333+
border: solid;
334+
border-limit: corners 10px;
335+
}
336+
</pre>
337+
</div>
338+
<div class="example">
310339
<p>The following example draws the curved part of the corner plus 5px
311340
along the sides:</p>
312-
<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }</pre>
341+
<pre class="lang-css">
342+
div {
343+
border: solid;
344+
border-radius: 5px;
345+
border-limit: corners 5px;
346+
}
347+
</pre>
348+
</div>
349+
<div class="example">
313350
<p>The following example draws the curved part of the corner and all of
314351
the side except the middle 40%.</p>
315-
<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }</pre>
352+
<pre class="lang-css">
353+
div {
354+
border: solid;
355+
border-radius: 5px;
356+
border-limit: corners 30%;
357+
}
358+
</pre>
316359
</div>
317360

318361
<h3 id="border-clip">
@@ -328,8 +371,6 @@ The 'border-clip' properties</h3>
328371
Animation type: by computed value
329372
</pre>
330373

331-
<p class=issue>Should these properties be simplified to only accept <code>normal | <<length-percentage>>+</code>?
332-
333374
<p>These properties split their respective borders into parts along
334375
the border edge. The first part is visible, the second is invisible,
335376
the third part is visible, etc. Parts can be specified with lengths,
@@ -450,8 +491,8 @@ The 'border-clip' properties</h3>
450491

451492
<div class="example">
452493
<p>This rendering:
453-
<div style="background: white; padding: 0.2em 0.5em">
454-
<pre style="margin-left: 0">
494+
<div style="background: white; color: black; padding: 0.2em 0.5em">
495+
<pre style="margin-left: 0;">
455496
A sentence consists of words&#xB9;.
456497
</pre>
457498
<div style="width: 3em; height: 2px; background: black"></div>
@@ -468,65 +509,10 @@ The 'border-clip' properties</h3>
468509
</pre>
469510
</div>
470511

471-
<div class="example">
472-
<pre>
473-
border: 2px solid black;
474-
border-top-parts: repeat(10px 10px);
475-
</pre>
476-
<p>In this example, the repeat pattern is shown five times and there is, by coincidence, no remaining border.
477-
<div style="position: relative; width: 100px; background: white; padding: 20px">
478-
<div style="border: 2px solid black; height: 40px"></div>
479-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
480-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
481-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
482-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
483-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
484-
</div>
485-
</div>
486-
487-
<div class="example">
488-
<pre>
489-
border: 2px solid black;
490-
border-top-parts: repeat(10px 10px);
491-
</pre>
492-
<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:
493-
<pre>
494-
border: 2px solid black;
495-
border-top-parts: repeat(10px 10px) 1fr;
496-
</pre>
497-
<div style="position: relative; width: 105px; background: white; padding: 20px">
498-
<div style="border: 2px solid black; height: 40px"></div>
499-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
500-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
501-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
502-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
503-
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
504-
<div style="position: absolute; background: red; width: 5px; height: 2px; top: 20px; left: 120px"></div>
505-
</div>
506-
<p>The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
507-
</div>
508-
509-
<div class="example">
510-
<pre>
511-
border: 4px solid black;
512-
border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
513-
</pre>
514-
<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
515-
<div style="position: relative; width: 192px; background: white; padding: 40px">
516-
<div style="border: 4px solid black; height: 40px"></div>
517-
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
518-
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
519-
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
520-
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
521-
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
522-
</div>
523-
<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
524-
</div>
525-
526512
<div class="example">
527513
<pre>
528514
border: 4px solid black;
529-
border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
515+
border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
530516
</pre>
531517
<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
532518
<div style="position: relative; width: 192px; background: white; padding: 40px">

0 commit comments

Comments
 (0)