Skip to content

Commit

Permalink
[css-borders-4] Fixed examples for border-limit and border-*-clip…
Browse files Browse the repository at this point in the history 
… properties (#9656)

The examples for `border-*-clip` using a `repeat()` function will be added back once it's described how repetitions are meant to work.
  • Loading branch information
@SebastianZ
SebastianZ authored Nov 29, 2023
1 parent 3c3ca3c commit 10caa0f
Showing 1 changed file with 52 additions and 66 deletions.
118 changes: 52 additions & 66 deletions css-borders-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,19 +300,62 @@ Partial Borders: the 'border-limit' property</h3>

<div class="example">
<p>The following example draws only the middle 50% of the sides.</p>
<pre>box { border: solid; border-parts: sides 50% }</pre>
<pre class="lang-css">
div {
border: solid;
border-limit: sides 50%;
}
</pre>
</div>
<div class="example">
<p>The following example draws only the curved parts of the corners.</p>
<pre>box { border: solid; border-radius: 1em 2em; border-parts: corners; }</pre>
<pre class="lang-css">
div {
border: solid;
border-radius: 1em 2em;
border-limit: corners;
}
</pre>
</div>
<div class="example">
<p>The following example draws only the left 4em of the top border.</p>
<pre>box { border-top: solid; border-parts: left 4em; }</pre>
<pre class="lang-css">
div {
border-top: solid;
border-limit: left 4em;
}
</pre>
</div>
<div class="example">
<p>The following example draws only the first 10px of each corner:</p>
<pre>box { border: solid; border-parts: corners 10px; }</pre>
<pre class="lang-css">
div {
border: solid;
border-limit: corners 10px;
}
</pre>
</div>
<div class="example">
<p>The following example draws the curved part of the corner plus 5px
along the sides:</p>
<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }</pre>
<pre class="lang-css">
div {
border: solid;
border-radius: 5px;
border-limit: corners 5px;
}
</pre>
</div>
<div class="example">
<p>The following example draws the curved part of the corner and all of
the side except the middle 40%.</p>
<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }</pre>
<pre class="lang-css">
div {
border: solid;
border-radius: 5px;
border-limit: corners 30%;
}
</pre>
</div>

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

<p class=issue>Should these properties be simplified to only accept <code>normal | <<length-percentage>>+</code>?

<p>These properties split their respective borders into parts along
the border edge. The first part is visible, the second is invisible,
the third part is visible, etc. Parts can be specified with lengths,
Expand Down Expand Up @@ -450,8 +491,8 @@ The 'border-clip' properties</h3>

<div class="example">
<p>This rendering:
<div style="background: white; padding: 0.2em 0.5em">
<pre style="margin-left: 0">
<div style="background: white; color: black; padding: 0.2em 0.5em">
<pre style="margin-left: 0;">
A sentence consists of words&#xB9;.
</pre>
<div style="width: 3em; height: 2px; background: black"></div>
Expand All @@ -468,65 +509,10 @@ The 'border-clip' properties</h3>
</pre>
</div>

<div class="example">
<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>
<p>In this example, the repeat pattern is shown five times and there is, by coincidence, no remaining border.
<div style="position: relative; width: 100px; background: white; padding: 20px">
<div style="border: 2px solid black; height: 40px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
</div>
</div>

<div class="example">
<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>
<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:
<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px) 1fr;
</pre>
<div style="position: relative; width: 105px; background: white; padding: 20px">
<div style="border: 2px solid black; height: 40px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>
<div style="position: absolute; background: red; width: 5px; height: 2px; top: 20px; left: 120px"></div>
</div>
<p>The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
</div>

<div class="example">
<pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
</pre>
<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.
<div style="position: relative; width: 192px; background: white; padding: 40px">
<div style="border: 4px solid black; height: 40px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>
</div>
<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
</div>

<div class="example">
<pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
</pre>
<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.
<div style="position: relative; width: 192px; background: white; padding: 40px">
Expand Down

0 comments on commit 10caa0f

Please sign in to comment.