Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 50 additions & 13 deletions css-gaps-1/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -351,8 +351,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break

<pre class='propdef'>
Name: column-rule-break, row-rule-break
Value: ''none'' | ''spanning-item'' | ''intersection''
Initial: ''spanning-item''
Value: ''none'' | ''normal'' | ''intersection''
Initial: ''normal''
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
Inherited: no
Animation type: discrete
Expand All @@ -368,18 +368,36 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
Gap decorations do not start or end at visible "T" or "cross" intersections.
Instead, a single continuous decoration is painted from one end of the gap to the other.
</dd>
<dt><dfn>spanning-item</dfn>
<dt><dfn>normal</dfn>
<dd>
Gap decorations start and end at visible "T" intersections but continue through visible "cross" intersections.
Behavior depends on the type of container.

<dl>
<dt><a>Grid containers</a>
<dd>
Gap decorations start and end at visible "T" intersections
but continue through visible "cross" intersections.
</dd>
<dt><a>Flex containers</a>
<dd>
Because flex items do not span across flex lines,
there are no visible "T" intersections caused by spanning items,
so in practice this is identical to ''column-rule-break/none''.
</dd>
<dt><a>Multicol containers</a>
<dd>
In order to preserve the traditional readability of text in columns,
'column-rule-break' behaves as ''column-rule-break/intersection'', and
'row-rule-break' behaves as ''row-rule-break/none''.
</dd>
</dl>
</dd>
<dt><dfn>intersection</dfn>
<dd>
Gap decorations start and end at visible "T" and "cross" intersections.
</dd>
</dl>

Issue: Bikeshed these values.

<pre class='propdef shorthand'>
Name: rule-break
Value: <<'column-rule-break'>>
Expand Down Expand Up @@ -489,7 +507,7 @@ Pairing gap intersection points into segments</h4>
|break| is ''column-rule-break/none''.
</li>
<li>
|break| is ''column-rule-break/spanning-item'',
|break| is ''column-rule-break/normal'',
and |start| is not <a>discontiguous</a> with the first item in |endpoints|.
</li>
<li>
Expand Down Expand Up @@ -549,17 +567,17 @@ Pairing gap intersection points into segments</h4>

<div class="example">
<pre>
.break-spanning-item-grid {
.break-normal-grid {
display: grid;
grid-template: repeat(4, 100px) / repeat(4, 100px);
gap: 20px;
row-rule: 6px solid red;
column-rule: 6px solid blue;
rule-break: spanning-item;
rule-break: normal;
}
</pre>
<figure>
<img alt="" src="images/example-break-spanning-item-grid.png">
<img alt="" src="images/example-break-normal-grid.png">
<figcaption>
Grid <a>gap decorations</a> broken at <a>gap intersection points</a>
that are not adjacent to spanning items.
Expand Down Expand Up @@ -587,6 +605,25 @@ Pairing gap intersection points into segments</h4>
</figure>
</div>

<div class="example">
<pre>
.break-normal-multicol {
gap: 10px;
row-rule: 4px solid red;
column-rule: 4px solid blue;
rule-break: normal;
}
</pre>
<figure>
<img alt="" src="images/example-break-normal-multicol.png">
<figcaption>
Multicol <a>gap decorations</a> with rule-break set to ''normal''.
Note that in the column direction it behaves as if rule-break were set to ''intersection'',
while in the row direction it behaves as if rule-break were set to ''none''.
</figcaption>
</figure>
</div>

<div class="example">
<pre>
.break-none-flex {
Expand All @@ -610,7 +647,7 @@ Pairing gap intersection points into segments</h4>
</div>

Note: Because flexbox has no concept of spanning items,
''column-rule-break/spanning-item'' on a flexbox has the same effect as
''column-rule-break/normal'' on a flexbox has the same effect as
''column-rule-break/none''.

<div class="example">
Expand Down Expand Up @@ -1027,7 +1064,7 @@ Controlling Gap Decoration Visibility: The '*-rule-visibility-items' properties<

<div class="example">
<pre>
.break-spanning-item-with-around-grid {
.break-normal-with-around-grid {
display: grid;
grid-template: repeat(3, 100px) / repeat(3, 100px);
gap: 20px;
Expand All @@ -1039,7 +1076,7 @@ Controlling Gap Decoration Visibility: The '*-rule-visibility-items' properties<
<figure>
<img alt="" src="images/example-vis-rules-around-spn.png">
<figcaption>
Gap decorations with 'rule-break' ''column-rule-break/spanning-item'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
Gap decorations with 'rule-break' ''column-rule-break/normal'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
</figcaption>
</figure>
</div>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.