@@ -643,48 +643,48 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
643
643
parsing/rule-outset-valid.html
644
644
</wpt>
645
645
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>
648
648
649
649
<pre class='propdef'>
650
- Name : rule-paint-order
650
+ Name : rule-overlap
651
651
Value : row-over-column | column-over-row
652
652
Initial : row-over-column
653
653
Applies to : <a>grid containers</a>, <a>flex containers</a>, and <a>masonry containers</a>
654
654
Inherited : no
655
655
Animation type : discrete
656
656
</pre>
657
657
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.
659
659
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.
661
661
662
662
<div class="example">
663
663
<pre>
664
664
.row-over-coulumn {
665
- rule-paint-order : row-over-column;
665
+ rule-overlap : row-over-column;
666
666
row-rule: 6px solid red;
667
667
column-rule: 6px solid blue;
668
668
}
669
669
</pre>
670
670
<figure>
671
671
<img alt="" src="images/example-row-over-column.png">
672
672
<figcaption>
673
- Row-over-column gap decoration paint order .
673
+ Row-over-column gap decoration overlap .
674
674
</figcaption>
675
675
</figure>
676
676
</div>
677
677
678
678
<div class="example">
679
679
<pre>
680
- rule-paint-order : column-over-row;
680
+ rule-overlap : column-over-row;
681
681
row-rule: 6px solid red;
682
682
column-rule: 6px solid blue;
683
683
</pre>
684
684
<figure>
685
685
<img alt="" src="images/example-column-over-row.png">
686
686
<figcaption>
687
- Column-over-row gap decoration paint order .
687
+ Column-over-row gap decoration overlap .
688
688
</figcaption>
689
689
</figure>
690
690
</div>
@@ -1066,4 +1066,5 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
1066
1066
<li> Specified the behavior when gaps are coincident due to track collapsing.
1067
1067
(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a> )
1068
1068
<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> )
1069
1070
</ul>
0 commit comments