@@ -154,8 +154,8 @@ Layout and painting {#layout-painting}
154
154
<a>Gap decorations</a> are painted relative to pairs of <a>gap intersection points</a> ,
155
155
in the center of the corresponding gap and parallel to its edges.
156
156
157
- Breaking gap decorations into segments: The 'column-rule-break' , 'row-rule-break' , and 'gap- rule-break' properties {#break}
158
- ---------------------------------------------------------------------------------------------------------------------------
157
+ Breaking gap decorations into segments: The 'column-rule-break' , 'row-rule-break' , and 'rule-break' properties {#break}
158
+ -----------------------------------------------------------------------------------------------------------------------
159
159
160
160
<pre class='propdef'>
161
161
Name : column-rule-break, row-rule-break
@@ -189,7 +189,7 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
189
189
Issue: Bikeshed these values.
190
190
191
191
<pre class='propdef shorthand'>
192
- Name : gap- rule-break
192
+ Name : rule-break
193
193
Value : <<'column-rule-break'>>
194
194
Applies to : Same as 'column-rule-break' and 'row-rule-break'
195
195
</pre>
@@ -306,8 +306,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
306
306
<div class="example">
307
307
<pre>
308
308
.break-intersection {
309
- gap- rule-break: intersection;
310
- gap- rule-outset: 0px;
309
+ rule-break: intersection;
310
+ rule-outset: 0px;
311
311
}
312
312
</pre>
313
313
<img src="images/example-break-intersection.png">
@@ -319,8 +319,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
319
319
<div class="example">
320
320
<pre>
321
321
.break-spanning-item {
322
- gap- rule-break: spanning-item;
323
- gap- rule-outset: 0px;
322
+ rule-break: spanning-item;
323
+ rule-outset: 0px;
324
324
}
325
325
</pre>
326
326
<img src="images/example-break-spanning-item.png">
@@ -333,8 +333,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
333
333
<div class="example">
334
334
<pre>
335
335
.break-none {
336
- gap- rule-break: none;
337
- gap- rule-outset: 0px;
336
+ rule-break: none;
337
+ rule-outset: 0px;
338
338
}
339
339
</pre>
340
340
<img src="images/example-break-none.png">
@@ -344,8 +344,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
344
344
</figcaption>
345
345
</div>
346
346
347
- Adjusting gap decoration endpoints: The 'column-rule-outset' , 'row-rule-outset' , and 'gap- rule-outset' properties {#outset}
348
- ---------------------------------------------------------------------------------------------------------------------------
347
+ Adjusting gap decoration endpoints: The 'column-rule-outset' , 'row-rule-outset' , and 'rule-outset' properties {#outset}
348
+ -----------------------------------------------------------------------------------------------------------------------
349
349
350
350
<pre class='propdef'>
351
351
Name : column-rule-outset, row-rule-outset
@@ -367,7 +367,7 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
367
367
where positive values may extend beyond the content bounds of the container.
368
368
369
369
<pre class='propdef shorthand'>
370
- Name : gap- rule-outset
370
+ Name : rule-outset
371
371
Value : <<'column-rule-outset'>>
372
372
Applies to : Same as 'column-rule-outset' and 'row-rule-outset'
373
373
</pre>
@@ -477,10 +477,10 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
477
477
For details on how the offset is applied,
478
478
see the steps to <a>determine pairs of gap decoration endpoints</a> .
479
479
480
- Gap decoration paint order: The 'gap- rule-paint-order' property {#paint-order}
481
- ------------------------------------------------------------------------------
480
+ Gap decoration paint order: The 'rule-paint-order' property {#paint-order}
481
+ --------------------------------------------------------------------------
482
482
<pre class='propdef'>
483
- Name : gap- rule-paint-order
483
+ Name : rule-paint-order
484
484
Value : row-over-column | column-over-row
485
485
Initial : row-over-column
486
486
Applies to : <a>grid containers</a>, <a>flex containers</a>, and <a>masonry containers</a>
@@ -490,12 +490,12 @@ Gap decoration paint order: The 'gap-rule-paint-order' property {#paint-order}
490
490
491
491
Sets the paint order for <a>gap decorations</a> in two-dimensional containers.
492
492
493
- The following examples illustrate adjustment of gap decoration paint order using the 'gap- rule-paint-order' property.
493
+ The following examples illustrate adjustment of gap decoration paint order using the 'rule-paint-order' property.
494
494
495
495
<div class="example">
496
496
<pre>
497
497
.row-over-coulumn {
498
- gap- rule-paint-order: row-over-column;
498
+ rule-paint-order: row-over-column;
499
499
row-rule: 6px solid red;
500
500
column-rule: 6px solid blue;
501
501
}
@@ -508,7 +508,7 @@ Gap decoration paint order: The 'gap-rule-paint-order' property {#paint-order}
508
508
509
509
<div class="example">
510
510
<pre>
511
- gap- rule-paint-order: column-over-row;
511
+ rule-paint-order: column-over-row;
512
512
row-rule: 6px solid red;
513
513
column-rule: 6px solid blue;
514
514
</pre>
@@ -766,23 +766,23 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {#gap-dec
766
766
767
767
<pre class='propdef shorthand'>
768
768
Name : column-rule, row-rule
769
- Value : <<gap- rule-list>> | <<auto-gap -rule-list>>
769
+ Value : <<rule-list>> | <<auto-rule-list>>
770
770
</pre>
771
771
772
772
<pre class='prod'>
773
- <dfn><gap- rule-list></dfn> = <<gap- rule-or-repeat>> [ / <<gap- rule-or-repeat>> ]*
773
+ <dfn><rule-list></dfn> = <<rule-or-repeat>> [ / <<rule-or-repeat>> ]*
774
774
775
- <dfn><auto-gap- rule-list></dfn> = [ [ <<gap- rule-or-repeat>> ] / ]*
776
- <<auto-repeat-gap- rule>>
777
- [ / [ <<gap- rule-or-repeat>> ] ]*
775
+ <dfn><auto-rule-list></dfn> = [ [ <<rule-or-repeat>> ] / ]*
776
+ <<auto-repeat-rule>>
777
+ [ / [ <<rule-or-repeat>> ] ]*
778
778
779
- <dfn><gap- rule-or-repeat></dfn> = [ <<gap- rule>> | <<repeat-gap -rule>> ]
779
+ <dfn><rule-or-repeat></dfn> = [ <<rule>> | <<repeat-rule>> ]
780
780
781
- <dfn><repeat-gap- rule></dfn> = repeat( [ <<integer [1,∞]>> ] , [ <<gap- rule>> ]# )
781
+ <dfn><repeat-rule></dfn> = repeat( [ <<integer [1,∞]>> ] , [ <<rule>> ]# )
782
782
783
- <dfn><auto-repeat-gap- rule></dfn> = repeat( auto , [ <<gap- rule>> ]# )
783
+ <dfn><auto-repeat-rule></dfn> = repeat( auto , [ <<rule>> ]# )
784
784
785
- <dfn><gap- rule></dfn> = [ <<line-width>> || <<line-style>> || <<color>> ]
785
+ <dfn><rule></dfn> = [ <<line-width>> || <<line-style>> || <<color>> ]
786
786
</pre>
787
787
788
788
These shorthands set the corresponding width, style, and color properties as a set.
@@ -792,32 +792,32 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties {#gap-dec
792
792
Note that commas are reserved for future extension of the grammar to support
793
793
<a href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md#placement-of-gap-decorations">gap decoration areas</a> .
794
794
795
- Bi-directional gap decoration shorthands: The 'gap- rule-color' , 'gap- rule-style' , 'gap- rule-width' , and 'gap- rule' properties {#gap- rule-bi-directional}
796
- --------------------------------------------------------------------------------------------------------------------------------------------------------
795
+ Bi-directional gap decoration shorthands: The 'rule-color' , 'rule-style' , 'rule-width' , and 'rule' properties {#rule-bi-directional}
796
+ ------------------------------------------------------------------------------------------------------------------------------------
797
797
798
798
<pre class='propdef shorthand'>
799
- Name : gap- rule-color
799
+ Name : rule-color
800
800
Value : <<'column-rule-color'>>
801
801
Inherited : no
802
802
Applies to : Same as 'column-rule-color' and 'row-rule-color'
803
803
</pre>
804
804
805
805
<pre class='propdef shorthand'>
806
- Name : gap- rule-style
806
+ Name : rule-style
807
807
Value : <<'column-rule-style'>>
808
808
Inherited : no
809
809
Applies to : Same as 'column-rule-style' and 'row-rule-style'
810
810
</pre>
811
811
812
812
<pre class='propdef shorthand'>
813
- Name : gap- rule-width
813
+ Name : rule-width
814
814
Value : <<'column-rule-width'>>
815
815
Inherited : no
816
816
Applies to : Same as 'column-rule-width' and 'row-rule-width'
817
817
</pre>
818
818
819
819
<pre class='propdef shorthand'>
820
- Name : gap- rule
820
+ Name : rule
821
821
Value : <<'column-rule'>>
822
822
Inherited : no
823
823
Applies to : Same as 'column-rule' and 'row-rule'
0 commit comments