[css-gaps-1] Update outset properties #12603

css-gaps-1/Overview.bs

@@ -368,7 +368,7 @@ Pairing gap intersection points into segments</h4>
 	A <a>gap decoration</a> is painted between each pair of endpoints identified using the steps above.
 
 	The following examples illustrate various settings for the <a href="#break">*-rule-break</a> properties.
-	To make the differences more apparent, the <a href="#outset">*-rule-outset</a> properties are set to ''0''.
+	To make the differences more apparent, the <a href="#inset">*-rule-*-inset</a> properties are set to ''0''.
 
 	<div class="example">
 		<pre>
@@ -379,7 +379,7 @@ Pairing gap intersection points into segments</h4>
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: none;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		</pre>
 		<figure>
@@ -400,7 +400,7 @@ Pairing gap intersection points into segments</h4>
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: spanning-item;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		</pre>
 		<figure>
@@ -421,7 +421,7 @@ Pairing gap intersection points into segments</h4>
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: intersection;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		</pre>
 		<figure>
@@ -442,7 +442,7 @@ Pairing gap intersection points into segments</h4>
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: none;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		</pre>
 		<figure>
@@ -471,7 +471,7 @@ Pairing gap intersection points into segments</h4>
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: intersection;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		</pre>
 		<figure>
@@ -482,99 +482,217 @@ Pairing gap intersection points into segments</h4>
 		</figure>
 	</div>
 
-<h3 id="outset">
-Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties</h3>
+<h3 id="inset">
+Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 
 	<pre class='propdef'>
-		Name: column-rule-outset, row-rule-outset
-		Value: <<length-percentage>>
+		Name: column-rule-edge-start-inset, column-rule-edge-end-inset, row-rule-edge-start-inset, row-rule-edge-end-inset
+		Value: auto | <<length-percentage>>
+		Initial: ''0''
+		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
+		Inherited: no
+		Percentages: refer to the <a>crossing gap width</a>
+		Animation type: by computed value type
+	</pre>
+
+	<pre class='propdef'>
+		Name: column-rule-interior-start-inset, column-rule-interior-end-inset, row-rule-interior-start-inset, row-rule-interior-end-inset
+		Value: auto | <<length-percentage>>
 		Initial: ''50%''
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
 		Inherited: no
 		Percentages: refer to the <a>crossing gap width</a>
 		Animation type: by computed value type
 	</pre>
 
+	For 'edge' properties 'auto' has the following meaning:
+	<dl dfn-for=column-rule-edge-start-inset dfn-type=value>
+		<dt><dfn>auto</dfn>
+		<dd>
+			The endpoint is not offset from the content edge of the container.
+			This is equivalent to a value of ''0''.
+	</dl>
+
+	For 'interior' properties 'auto' has the following meaning:
+	<dl dfn-for=column-rule-interior-start-inset dfn-type=value>
+		<dt><dfn>auto</dfn>
+		<dd>
+			The endpoint is placed halfway into the intersection.
+			This is equivalent to a value of ''50%''.
+	</dl>
+
 	These properties can be used to offset the endpoints of <a>gap decorations</a> relative to the
 	<a>gap intersection points</a> which would normally determine their endpoints.
+
+	<ul>
+		<li>Let |edge-intersection| refer to any [=gap intersection points=] at the content edges of a container.</li>
+		<li>Let |interior-intersection| refer to all other [=gap intersection points=].</li>
+		<li>Let |decoration-segment| refer to any segment that connects a pair of adjacent [=gap intersection points=].</li>
+		<li>Let |start-endpoint| and |end-endpoint| refer to the two endpoints of a given |decoration-segment|.
+		A given |start-endpoint| and |end-endpoint| can be either a |edge-intersection| or a |interior-intersection|.</li>
+	</ul>
+
+	The 'column-rule-edge-start-inset' and 'row-rule-edge-start-inset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|,
+	while the 'column-rule-edge-end-inset' and 'row-rule-edge-end-inset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|.
+	Positive values recede inwards from the content edge, while negative values extend outwards, beyond the container's content bounds.
+
+	The 'column-rule-interior-start-inset' and 'row-rule-interior-start-inset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|,
+	while the 'column-rule-interior-end-inset' and 'row-rule-interior-end-inset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|.
+	Negative values extend towards the center of the intersection, while positive values recede away from the intersection.
+
 	The initial value of ''50%'' places the <a>gap decoration</a> endpoint in the center of the intersection.
 	With a value of ''0'', the <a>gap decoration</a> endpoint will coincide with the edge of the intersection.
-	Positive values extend towards the center of the intersection;
-	negative values recede from it.
-	These offsets also apply at the edges of the container,
-	where positive values may extend beyond the content bounds of the container.
 
 	<pre class='propdef shorthand'>
-		Name: rule-outset
-		Value: <<'column-rule-outset'>>
-		Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
+		Name: column-rule-edge-inset, row-rule-edge-inset
+		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
+	</pre>
+
+	Sets the column-rule-edge-start-inset and column-rule-edge-end-inset properties to the specified values.
+	Similarly, sets the row-rule-edge-start-inset and row-rule-edge-end-inset properties to the specified values.
+
+	<pre class='propdef shorthand'>
+		Name: column-rule-interior-inset, row-rule-interior-inset
+		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
+	</pre>
+
+	Sets the column-rule-interior-start-inset and column-rule-interior-end-inset properties to the specified values.
+	Similarly, sets the row-rule-interior-start-inset and row-rule-interior-end-inset properties to the specified values.
+
+	<pre class='propdef shorthand'>
+		Name: rule-edge-inset
+		Value: <<'column-rule-edge-inset'>>
+		Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
+	</pre>
+
+	Sets the 'column-rule-edge-inset' and 'row-rule-edge-inset' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: rule-interior-inset
+		Value: <<'column-rule-interior-inset'>>
+		Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'
+	</pre>
+
+	Sets the 'column-rule-interior-inset' and 'row-rule-interior-inset' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: column-rule-inset, row-rule-inset
+		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
+	</pre>
+
+	<pre class='propdef shorthand'>
+		Name: rule-inset
+		Value: <<'column-rule-inset'>>
+		Applies to: Same as 'column-rule-inset' and 'row-rule-inset'
 	</pre>
 
-	Sets the 'column-rule-outset' and 'row-rule-outset' properties to the same value.
+	Sets the 'column-rule-inset' and 'row-rule-inset' properties to the same value.
 
 	<div class="example">
 		<pre>
-			.outset-0px {
-				column-rule-outset: 0px;
+			.inset-0px {
+				column-rule-inset: 0px;
 				column-rule-break: intersection;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-outset-0px.png">
+			<img alt="" src="images/example-column-inset-0px.png">
 			<figcaption>
-				An outset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
+				An inset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
 			</figcaption>
 		</figure>
 	</div>
 
 	<div class="example">
 		<pre>
-			.outset-5px {
-				column-rule-outset: 5px;
+			.inset-5px {
+				column-rule-inset: -5px;
 				column-rule-break: intersection;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-outset-5px.png">
+			<img alt="" src="images/example-column-inset-5px.png">
 			<figcaption>
-				An outset of ''5px'' extends the ends of <a>gap decorations</a>
+				An inset of ''-5px'' extends the ends of <a>gap decorations</a>
 				slightly beyond the edges of adjacent items.
 			</figcaption>
 		</figure>
 	</div>
 
 	<div class="example">
 		<pre>
-			.outset-50percent {
-				column-rule-outset: 50%;
+			.inset-0px {
+				column-rule-start-edge-inset: 0px;
+				column-rule-end-edge-inset: -8px;
+				column-rule-start-interior-inset: 0px;
+				column-rule-end-interior-inset: -8px;
+				column-rule-break: intersection;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
+			<figcaption>
+				A start edge inset of ''0px'' and an end edge inset of ''-8px'' align the endpoints of edge <a>gap decorations</a>
+				with the content edge at the start of the gap, and extend the endpoints slightly beyond the content edge at the end of the gap.
+				An interior inset of ''0px'' at the start intersection and ''-8px'' at the end intersection align the start endpoints of interior <a>gap decorations</a>
+				with the edges of adjacent items at the start of the gap, and extend the end endpoints slightly beyond the edges of adjacent items at the end of the gap.
+			</figcaption>
+		</figure>
+	</div>
+
+	<div class="example">
+		<pre>
+			.inset-edge-0px-interior-5px {
+				column-rule-edge-inset: 0px;
+				column-rule-interior-inset: -5px;
+				column-rule-break: intersection;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-column-interior-inset-5px.png">
+			<figcaption>
+				An interior inset of ''-5px'' extends the endpoints of interior <a>gap decorations</a>
+				slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge <a>gap decorations</a>
+				with the content edges.
+			</figcaption>
+		</figure>
+	</div>
+
+	<div class="example">
+		<pre>
+			.inset-50percent {
+				column-rule-inset: 50%;
 				column-rule-break: intersection;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-outset-50percent.png">
+			<img alt="" src="images/example-column-inset-50percent.png">
 		<figcaption>
-			An outset of ''50%'' - the initial value - extends each end of a <a>gap decoration</a>
+			An inset of ''50%'' - the initial value - extends each end of a <a>gap decoration</a>
 			halfway into its intersection.
 			Neighboring <a>gap decorations</a> "meet in the middle" to create a continuous line.
 			Note that at the edges of the container, the <a>crossing gap width</a> is defined to be ''0'',
-			so the outset value of ''50%'' resolves to ''0''
+			so the inset value of ''50%'' resolves to ''0''
 			and thus the <a>gap decoration</a> does not extend beyond the bounds of the container.
-			(Contrast with the previous example, which specified an outset in ''px'' units.)
+			(Contrast with the previous example, which specified an inset in ''px'' units.)
 		</figcaption>
 		</figure>
 	</div>
 
 	<div class="example">
 		<pre>
-			.outset-negative-5px {
-				column-rule-outset: -5px;
+			.inset-positive-5px {
+				column-rule-inset: 5px;
 				column-rule-break: intersection;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-outset-minus-5px.png">
+			<img alt="" src="images/example-column-inset-minus-5px.png">
 			<figcaption>
-				An outset of ''-5px'' shortens the ends of <a>gap decorations</a>
+				An inset of ''5px'' shortens the ends of <a>gap decorations</a>
 				relative to the edges of adjacent items.
 			</figcaption>
 		</figure>
@@ -604,14 +722,14 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
 			</li>
 
 			<li>
-				Let |outset| be the computed value of either 'column-rule-outset' or 'row-rule-outset',
+				Let |inset| be the computed value of either 'column-rule-inset' or 'row-rule-inset',
 				whichever applies to |gap|.
-				Resolve any percentages in |outset| against |width|.
+				Resolve any percentages in |inset| against |width|.
 			</li>
 
 			<li>
 				Let |result| be |width| multiplied by 50%.
-				Subtract |outset| from |result|.
+				Subtract |inset| from |result|.
 			</li>
 
 			<li>