@@ -11,6 +11,8 @@ URL: https://drafts.csswg.org/css-gaps-1/
11
11
TR : https://www.w3.org/TR/css-gaps-1/
12
12
Editor : Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
13
13
Abstract : This module introduces several properties to add row and column gap decorations to container layout types such as grid and flex.
14
+ WPT Path Prefix : css/css-gaps/
15
+ WPT Display : open
14
16
</pre>
15
17
<pre class='anchors'>
16
18
urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; text: masonry container
@@ -86,6 +88,10 @@ Gap decorations</h2>
86
88
</figure>
87
89
</div>
88
90
91
+ <wpt>
92
+ serialization/gap-decorations-properties.html
93
+ </wpt>
94
+
89
95
<h3 id="layout-painting">
90
96
Layout and painting</h3>
91
97
@@ -177,6 +183,25 @@ Layout and painting</h3>
177
183
<a>Gap decorations</a> are painted relative to pairs of <a>gap intersection points</a> ,
178
184
in the center of the corresponding gap and parallel to its edges.
179
185
186
+ <wpt>
187
+ flex/flex-gap-decorations-001.html
188
+ flex/flex-gap-decorations-006.html
189
+ flex/flex-gap-decorations-007.html
190
+ flex/flex-gap-decorations-008.html
191
+ flex/flex-gap-decorations-015.html
192
+ flex/flex-gap-decorations-016.html
193
+ grid/grid-gap-decorations-001.html
194
+ multicol/multicol-gap-decorations-001.html
195
+ multicol/multicol-gap-decorations-002.html
196
+ multicol/multicol-gap-decorations-003.html
197
+ multicol/multicol-gap-decorations-005.html
198
+ multicol/multicol-gap-decorations-006.html
199
+ multicol/multicol-gap-decorations-007.html
200
+ multicol/multicol-gap-decorations-013.html
201
+ multicol/multicol-gap-decorations-015.html
202
+ multicol/multicol-gap-decorations-016.html
203
+ </wpt>
204
+
180
205
If the positions of one or more gaps coincide exactly due to being [=collapsed gutter|collapsed=] ,
181
206
at most one decoration will be drawn for that set of gaps.
182
207
The decoration that is drawn is selected according to the
@@ -224,6 +249,19 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
224
249
225
250
Sets the 'column-rule-break' and 'row-rule-break' properties to the same value.
226
251
252
+ <wpt>
253
+ flex/flex-gap-decorations-009.html
254
+ flex/flex-gap-decorations-010.html
255
+ grid/grid-gap-decorations-006.html
256
+ grid/grid-gap-decorations-007.html
257
+ grid/grid-gap-decorations-008.html
258
+ grid/grid-gap-decorations-009.html
259
+ multicol/multicol-gap-decorations-014.html
260
+ parsing/rule-break-computed.html
261
+ parsing/rule-break-invalid.html
262
+ parsing/rule-break-valid.html
263
+ </wpt>
264
+
227
265
<h4 id="pairing">
228
266
Pairing gap intersection points into segments</h4>
229
267
@@ -585,6 +623,26 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
585
623
For details on how the offset is applied,
586
624
see the steps to <a>determine pairs of gap decoration endpoints</a> .
587
625
626
+ <wpt>
627
+ flex/flex-gap-decorations-011.html
628
+ flex/flex-gap-decorations-013.html
629
+ flex/flex-gap-decorations-014.html
630
+ grid/grid-gap-decorations-010.html
631
+ grid/grid-gap-decorations-011.html
632
+ grid/grid-gap-decorations-012.html
633
+ grid/grid-gap-decorations-013.html
634
+ grid/grid-gap-decorations-014.html
635
+ grid/grid-gap-decorations-015.html
636
+ multicol/multicol-gap-decorations-008.html
637
+ multicol/multicol-gap-decorations-009.html
638
+ multicol/multicol-gap-decorations-010.html
639
+ multicol/multicol-gap-decorations-011.html
640
+ multicol/multicol-gap-decorations-012.html
641
+ parsing/rule-outset-computed.html
642
+ parsing/rule-outset-invalid.html
643
+ parsing/rule-outset-valid.html
644
+ </wpt>
645
+
588
646
<h3 id="paint-order">
589
647
Gap decoration paint order: The 'rule-paint-order' property</h3>
590
648
@@ -631,6 +689,14 @@ Gap decoration paint order: The 'rule-paint-order' property</h3>
631
689
</figure>
632
690
</div>
633
691
692
+ <wpt>
693
+ flex/flex-gap-decorations-012.html
694
+ grid/grid-gap-decorations-023.html
695
+ parsing/rule-paint-order-computed.html
696
+ parsing/rule-paint-order-invalid.html
697
+ parsing/rule-paint-order-valid.html
698
+ </wpt>
699
+
634
700
<h2 id="color-style-width">
635
701
Color, style, and width</h2>
636
702
@@ -670,6 +736,18 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties</h
670
736
</dd>
671
737
</dl>
672
738
739
+ <wpt>
740
+ grid/grid-gap-decorations-022.html
741
+ grid/grid-gap-decorations-024.html
742
+ grid/grid-gap-decorations-025.html
743
+ grid/grid-gap-decorations-026.html
744
+ grid/grid-gap-decorations-027.html
745
+ grid/grid-gap-decorations-028.html
746
+ parsing/gap-decorations-color-computed.html
747
+ parsing/gap-decorations-color-invalid.html
748
+ parsing/gap-decorations-color-valid.html
749
+ </wpt>
750
+
673
751
<h3 id="column-row-rule-style">
674
752
Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties</h3>
675
753
@@ -699,6 +777,26 @@ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties</h
699
777
These properties set the styles of <a>gap decorations</a> .
700
778
The <<line-style>> values are interpreted as in the <a href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders">collapsing border model</a> .
701
779
780
+ <wpt>
781
+ flex/flex-gap-decorations-002.html
782
+ flex/flex-gap-decorations-003.html
783
+ flex/flex-gap-decorations-004.html
784
+ flex/flex-gap-decorations-005.html
785
+ flex/flex-gap-decorations-017.html
786
+ flex/flex-gap-decorations-018.html
787
+ grid/grid-gap-decorations-002.html
788
+ grid/grid-gap-decorations-003.html
789
+ grid/grid-gap-decorations-004.html
790
+ grid/grid-gap-decorations-005.html
791
+ grid/grid-gap-decorations-016.html
792
+ grid/grid-gap-decorations-017.html
793
+ grid/grid-gap-decorations-020.html
794
+ grid/grid-gap-decorations-021.html
795
+ parsing/gap-decorations-style-computed.html
796
+ parsing/gap-decorations-style-invalid.html
797
+ parsing/gap-decorations-style-valid.html
798
+ </wpt>
799
+
702
800
<h3 id="column-row-rule-width">
703
801
Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties</h3>
704
802
@@ -735,6 +833,15 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties</h
735
833
Issue: Should the "force to 0" behavior apply when lists of values are involved?
736
834
If so, how should this be handled with unaligned lists?
737
835
836
+ <wpt>
837
+ grid/grid-gap-decorations-018.html
838
+ grid/grid-gap-decorations-019.html
839
+ multicol/multicol-gap-decorations-004.html
840
+ parsing/gap-decorations-width-computed.html
841
+ parsing/gap-decorations-width-invalid.html
842
+ parsing/gap-decorations-width-valid.html
843
+ </wpt>
844
+
738
845
<h3 id="lists-repeat">
739
846
Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
740
847
@@ -934,6 +1041,11 @@ Bi-directional gap decoration shorthands: The 'rule-color', 'rule-style', 'rule-
934
1041
935
1042
These shorthands set the corresponding column and row properties to the same values.
936
1043
1044
+ <wpt>
1045
+ flex/flex-gap-decorations-019.html
1046
+ parsing/gap-decorations-bidirectional-shorthands.html
1047
+ </wpt>
1048
+
937
1049
<h2 id="privacy">
938
1050
Privacy Considerations</h2>
939
1051
@@ -953,4 +1065,5 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
953
1065
<ul class="non-normative">
954
1066
<li> Specified the behavior when gaps are coincident due to track collapsing.
955
1067
(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a> )
1068
+ <li> Added links to WPT suite.
956
1069
</ul>
0 commit comments