Skip to content

Commit 6827f30

Browse files
oSamDavisSam Davis Omekara (from Dev Box)kbabbitt
authored
[css-gaps-1] Add section for rule visibility items. #12602 (#13374)
* init viz rules * Update css-gaps-1/Overview.bs Co-authored-by: Kevin Babbitt <kbabbitt@microsoft.com> * Update css-gaps-1/Overview.bs Co-authored-by: Kevin Babbitt <kbabbitt@microsoft.com> * feedbck * Apply suggestion from @kbabbitt Co-authored-by: Kevin Babbitt <kbabbitt@microsoft.com> --------- Co-authored-by: Sam Davis Omekara (from Dev Box) <samomekarajr@microsoft.com> Co-authored-by: Kevin Babbitt <kbabbitt@microsoft.com>
1 parent 2f353b1 commit 6827f30

File tree

4 files changed

+120
-1
lines changed

4 files changed

+120
-1
lines changed

‎css-gaps-1/Overview.bs‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ Layout and painting</h3>
330330
grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018.html
331331
</wpt>
332332

333-
Gap decorations are [=assigned gap decoration values|assigned=] after [=gutter collapsing|collapsed gutter=] has been applied.
333+
Gap decorations are [=assigned gap decoration values|assigned=] after [=collapsed gutter|gutter collapsing=] has been applied.
334334
A given set of [=collapsed gutters=] consume exactly one [=gap decoration=]; the next [=gap decoration=]
335335
is applied to the next gutter (or set of [=collapsed gutters=]). Therefore, [=collapsed gutters=] are treated as a
336336
single gutter for decoration purposes.
@@ -961,6 +961,123 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
961961
parsing/rule-interior-start-end-inset-invalid.html
962962
</wpt>
963963

964+
<!-- Big Text: Rule-Visibility-Items
965+
966+
████▌ █▌ █▌ █▌ █████▌ █▌ █▌ ████ ███▌ ████ ████▌ ████ █▌ ████ █████▌ █ ▐▌ ████ █████▌ █████▌ █ █ ███▌
967+
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ ▐▌ █▌ ▐▌ █ ▐▌ █▌ █▌ ██ ██ █▌ █▌
968+
█▌ █▌ █▌ █▌ █▌ █▌ █▌ █▌ ▐▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ ▐▌ █▌ █ ▐▌ ▐▌ █▌ █▌ █▌█ █▐█ █▌
969+
████▌ █▌ █▌ █▌ ████ ████▌ ▐▌ █ ▐▌ ███▌ ▐▌ █████ ▐▌ █▌ ▐▌ █▌ ▐▌█ ████▌ ▐▌ █▌ ████ █▌ █ ▐█ ███▌
970+
█▌▐█ █▌ █▌ █▌ █▌ █ ▐▌ ▐▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ █▌ █▌ ▐█ █▌
971+
█▌ ▐█ █▌ █▌ █▌ █▌ ▐▌ █ ▐▌ █▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ ▐▌ █▌ █▌ ▐▌ █▌ █▌ █▌ ▐█ █▌ █▌
972+
█▌ █▌ ███▌ █████ █████▌ ▐█ ████ ███▌ ████ ████▌ ████ █████ ████ █▌ █▌ ████ █▌ █████▌ █▌ ▐█ ███▌
973+
-->
974+
<h3 id="visibility-rules">
975+
Controlling Gap Decoration Visibility: The '*-rule-visibility-items' properties</h3>
976+
<pre class='propdef'>
977+
Name: column-rule-visibility-items, row-rule-visibility-items
978+
Value: all | around | between
979+
Initial: all
980+
Applies to: <a>grid containers</a>, and <a>multicol containers</a>
981+
Inherited: no
982+
Computed value: as specified
983+
Animation type: discrete
984+
</pre>
985+
986+
These properties control whether a gap decoration segment is painted
987+
in portions of gutters adjacent to empty cells.
988+
989+
<dl dfn-type="value" dfn-for="column-rule-visibility-items, row-rule-visibility-items">
990+
<dt><dfn>all</dfn>
991+
<dd>Paint decorations in all gap segments, regardless of whether adjacent items are present.
992+
<dt><dfn>around</dfn>
993+
<dd>Paint decorations in a gap segment if at least one of the two adjacent areas is occupied by an item.
994+
<dt><dfn>between</dfn>
995+
<dd>Paint decorations in a gap segment if both adjacent areas are occupied by items.
996+
</dl>
997+
998+
999+
<pre class='propdef shorthand'>
1000+
Name: rule-visibility-items
1001+
Value: <<'column-rule-visibility-items'>>
1002+
Applies to: Same as 'column-rule-visibility-items' and 'row-rule-visibility-items'
1003+
</pre>
1004+
1005+
Sets the 'column-rule-visibility-items' and 'row-rule-visibility-items' properties to the same value.
1006+
1007+
<wpt>
1008+
grid/grid-gap-decorations-054.html
1009+
grid/grid-gap-decorations-055.html
1010+
grid/grid-gap-decorations-056.html
1011+
grid/grid-gap-decorations-057.html
1012+
grid/fragmentation/grid-gap-decorations-fragmentation-025.html
1013+
grid/fragmentation/grid-gap-decorations-fragmentation-026.html
1014+
grid/fragmentation/grid-gap-decorations-fragmentation-027.html
1015+
parsing/rule-visibility-items-computed.html
1016+
parsing/rule-visibility-items-invalid.html
1017+
parsing/rule-visibility-items-valid.html
1018+
</wpt>
1019+
1020+
<div class="example">
1021+
<pre>
1022+
.break-spanning-item-with-around-grid {
1023+
display: grid;
1024+
grid-template: repeat(3, 100px) / repeat(3, 100px);
1025+
gap: 20px;
1026+
row-rule: 6px solid red;
1027+
column-rule: 6px solid blue;
1028+
rule-visibility-items: around;
1029+
}
1030+
</pre>
1031+
<figure>
1032+
<img alt="" src="images/example-vis-rules-around-spn.png">
1033+
<figcaption>
1034+
Gap decorations with 'rule-break' ''column-rule-break/spanning-item'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
1035+
</figcaption>
1036+
</figure>
1037+
</div>
1038+
1039+
<div class="example">
1040+
<pre>
1041+
.break-intersection-with-around-grid {
1042+
display: grid;
1043+
grid-template: repeat(3, 100px) / repeat(3, 100px);
1044+
gap: 20px;
1045+
row-rule: 6px solid red;
1046+
column-rule: 6px solid blue;
1047+
rule-inset: 0px;
1048+
rule-visibility-items: around;
1049+
rule-break: intersection;
1050+
}
1051+
</pre>
1052+
<figure>
1053+
<img alt="" src="images/example-vis-rules-around-int.png">
1054+
<figcaption>
1055+
Gap decorations with and 'rule-break' ''column-rule-break/intersection'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
1056+
</figcaption>
1057+
</figure>
1058+
</div>
1059+
1060+
<div class="example">
1061+
<pre>
1062+
.break-intersection-with-between-grid {
1063+
display: grid;
1064+
grid-template: repeat(3, 100px) / repeat(3, 100px);
1065+
gap: 20px;
1066+
row-rule: 6px solid red;
1067+
column-rule: 6px solid blue;
1068+
rule-inset: 0px;
1069+
rule-visibility-items: between;
1070+
rule-break: intersection;
1071+
}
1072+
</pre>
1073+
<figure>
1074+
<img alt="" src="images/example-vis-rules-btwn-int.png">
1075+
<figcaption>
1076+
Gap decorations with 'rule-break' ''column-rule-break/intersection'' and 'rule-visibility-items' ''column-rule-visibility-items/between''.
1077+
</figcaption>
1078+
</figure>
1079+
</div>
1080+
9641081
<!-- Big Text: rule-overlap
9651082

9661083
████▌ █▌ █▌ █▌ █████▌ ███▌ █▌ █▌ █████▌ ████▌ █▌ ███▌ ████▌
@@ -1855,5 +1972,7 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
18551972
(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
18561973
<li> Updated the color, width, and style longhand properties to use comma-separated lists instead of space-separated lists.
18571974
(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
1975+
<li> Added section for gap decorations next to empty grid areas.
1976+
(<a href="https://github.com/w3c/csswg-drafts/issues/12602">Issue 12602</a>)
18581977

18591978
</ul>

‎css-gaps-1/images/example-vis-rules-around-int.png‎

1.52 KB
Loading

‎css-gaps-1/images/example-vis-rules-around-spn.png‎

1.6 KB
Loading

‎css-gaps-1/images/example-vis-rules-btwn-int.png‎

1.47 KB
Loading

0 commit comments

Comments
 (0)