Skip to content

Commit 2f5c267

Browse files
oSamDavisSam Davis Omekara (from Dev Box)
andauthored
[css-gaps-1] Make initial value of interior insets '0' and remove 'auto' keyword. #13137
Co-authored-by: Sam Davis Omekara (from Dev Box) <samomekarajr@microsoft.com>
1 parent cf2c4af commit 2f5c267

File tree

1 file changed

+8
-20
lines changed

1 file changed

+8
-20
lines changed

css-gaps-1/Overview.bs

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -526,7 +526,6 @@ Pairing gap intersection points into segments</h4>
526526
A <a>gap decoration</a> is painted between each pair of endpoints identified using the steps above.
527527

528528
The following examples illustrate various settings for the <a href="#break">*-rule-break</a> properties.
529-
To make the differences more apparent, the <a href="#inset">*-rule-*-inset</a> properties are set to ''0''.
530529

531530
<div class="example">
532531
<pre>
@@ -537,7 +536,6 @@ Pairing gap intersection points into segments</h4>
537536
row-rule: 6px solid red;
538537
column-rule: 6px solid blue;
539538
rule-break: none;
540-
rule-inset: 0px;
541539
}
542540
</pre>
543541
<figure>
@@ -558,7 +556,6 @@ Pairing gap intersection points into segments</h4>
558556
row-rule: 6px solid red;
559557
column-rule: 6px solid blue;
560558
rule-break: spanning-item;
561-
rule-inset: 0px;
562559
}
563560
</pre>
564561
<figure>
@@ -579,7 +576,6 @@ Pairing gap intersection points into segments</h4>
579576
row-rule: 6px solid red;
580577
column-rule: 6px solid blue;
581578
rule-break: intersection;
582-
rule-inset: 0px;
583579
}
584580
</pre>
585581
<figure>
@@ -600,7 +596,6 @@ Pairing gap intersection points into segments</h4>
600596
row-rule: 6px solid red;
601597
column-rule: 6px solid blue;
602598
rule-break: none;
603-
rule-inset: 0px;
604599
}
605600
</pre>
606601
<figure>
@@ -629,7 +624,6 @@ Pairing gap intersection points into segments</h4>
629624
row-rule: 6px solid red;
630625
column-rule: 6px solid blue;
631626
rule-break: intersection;
632-
rule-inset: 0px;
633627
}
634628
</pre>
635629
<figure>
@@ -656,8 +650,8 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
656650

657651
<pre class='propdef'>
658652
Name: column-rule-edge-inset-start, column-rule-edge-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end
659-
Value: ''auto'' | <<length-percentage>>
660-
Initial: ''auto''
653+
Value: <<length-percentage>>
654+
Initial: ''0''
661655
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
662656
Inherited: no
663657
Percentages: refer to the <a>crossing gap width</a>
@@ -666,8 +660,8 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
666660

667661
<pre class='propdef'>
668662
Name: column-rule-interior-inset-start, column-rule-interior-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
669-
Value: ''auto'' | <<length-percentage>>
670-
Initial: ''auto''
663+
Value: <<length-percentage>>
664+
Initial: ''0''
671665
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
672666
Inherited: no
673667
Percentages: refer to the <a>crossing gap width</a>
@@ -677,18 +671,12 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
677671
These properties can be used to offset the endpoints of <a>gap decorations</a> relative to the
678672
<a>gap intersection points</a> which would normally determine their endpoints.
679673

674+
<p>An <dfn>edge gap intersection point</dfn> is any [=gap intersection point=] at the content edges of the container.</p>
675+
<p>An <dfn>interior gap intersection point</dfn> is any [=gap intersection point=] that is not an [=edge gap intersection point=].</p>
680676
For the interior properties,
681677
a value of ''-50%'' places the <a>gap decoration</a> endpoint in the center of the intersection,
682678
and a value of ''0'' places the <a>gap decoration</a> endpoint at the edge of the intersection.
683679

684-
<dl dfn-for=rule-inset dfn-type=value>
685-
<dt><dfn>auto</dfn>
686-
<dd>
687-
The used value of ''auto'' is ''0'' for edge properties and ''-50%'' for interior properties.
688-
</dl>
689-
690-
<p>An <dfn>edge gap intersection point</dfn> is any [=gap intersection point=] at the content edges of the container.</p>
691-
<p>An <dfn>interior gap intersection point</dfn> is any [=gap intersection point=] that is not an [=edge gap intersection point=].</p>
692680
<p>A <dfn>decoration segment</dfn> refers to any segment that connects a pair of adjacent [=gap intersection points=].</p>
693681
<p>A <dfn>start endpoint</dfn> and <dfn>end endpoint</dfn> refer to the two endpoints of a given [=decoration segment=].
694682
A given [=start endpoint=] and [=end endpoint=] can be either an [=edge gap intersection point=] or an [=interior gap intersection point=].</p>
@@ -755,7 +743,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
755743

756744
<pre class='propdef shorthand'>
757745
Name: column-rule-inset-start, row-rule-inset-start
758-
Value: auto | <<length-percentage>>
746+
Value: <<length-percentage>>
759747
Applies to: 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' for 'column-rule-inset-start',
760748
'row-rule-edge-inset-start' and 'row-rule-interior-inset-start' for 'row-rule-inset-start'
761749
</pre>
@@ -765,7 +753,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
765753

766754
<pre class='propdef shorthand'>
767755
Name: column-rule-inset-end, row-rule-inset-end
768-
Value: auto | <<length-percentage>>
756+
Value: <<length-percentage>>
769757
Applies to: 'column-rule-edge-inset-end' and 'column-rule-interior-inset-end' for 'column-rule-inset-end',
770758
'row-rule-edge-inset-end' and 'row-rule-interior-inset-end' for 'row-rule-inset-end'
771759
</pre>

0 commit comments

Comments
 (0)