Skip to content

Commit fd183d3

Browse files
jav099Javier Contreras Tenorio (from Dev Box)
andauthored
[css-gaps-1] Change rule-paint-order to rule-overlap. Issue #12431 (#12585)
Co-authored-by: Javier Contreras Tenorio (from Dev Box) <[email protected]>
1 parent 743e653 commit fd183d3

File tree

1 file changed

+10
-9
lines changed

1 file changed

+10
-9
lines changed

css-gaps-1/Overview.bs

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -643,48 +643,48 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
643643
parsing/rule-outset-valid.html
644644
</wpt>
645645

646-
<h3 id="paint-order">
647-
Gap decoration paint order: The 'rule-paint-order' property</h3>
646+
<h3 id="overlap">
647+
Gap decoration overlap: The 'rule-overlap' property</h3>
648648

649649
<pre class='propdef'>
650-
Name: rule-paint-order
650+
Name: rule-overlap
651651
Value: row-over-column | column-over-row
652652
Initial: row-over-column
653653
Applies to: <a>grid containers</a>, <a>flex containers</a>, and <a>masonry containers</a>
654654
Inherited: no
655655
Animation type: discrete
656656
</pre>
657657

658-
Sets the paint order for <a>gap decorations</a> in two-dimensional containers.
658+
Sets the overlap for <a>gap decorations</a> in two-dimensional containers.
659659

660-
The following examples illustrate adjustment of gap decoration paint order using the 'rule-paint-order' property.
660+
The following examples illustrate adjustment of gap decoration overlap using the 'rule-overlap' property.
661661

662662
<div class="example">
663663
<pre>
664664
.row-over-coulumn {
665-
rule-paint-order: row-over-column;
665+
rule-overlap: row-over-column;
666666
row-rule: 6px solid red;
667667
column-rule: 6px solid blue;
668668
}
669669
</pre>
670670
<figure>
671671
<img alt="" src="images/example-row-over-column.png">
672672
<figcaption>
673-
Row-over-column gap decoration paint order.
673+
Row-over-column gap decoration overlap.
674674
</figcaption>
675675
</figure>
676676
</div>
677677

678678
<div class="example">
679679
<pre>
680-
rule-paint-order: column-over-row;
680+
rule-overlap: column-over-row;
681681
row-rule: 6px solid red;
682682
column-rule: 6px solid blue;
683683
</pre>
684684
<figure>
685685
<img alt="" src="images/example-column-over-row.png">
686686
<figcaption>
687-
Column-over-row gap decoration paint order.
687+
Column-over-row gap decoration overlap.
688688
</figcaption>
689689
</figure>
690690
</div>
@@ -1066,4 +1066,5 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
10661066
<li>Specified the behavior when gaps are coincident due to track collapsing.
10671067
(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a>)
10681068
<li>Added links to WPT suite.
1069+
<li>Updated 'rule-paint-order' to 'rule-overlap'. (<a href="https://github.com/w3c/csswg-drafts/issues/12540">Issue 12540</a>)
10691070
</ul>

0 commit comments

Comments
 (0)