[css-gaps-1] Update outset properties #12603, #12848, #8402 (#13024)

* initial commit

* insets and auto

* insets and auto

* formatting

* wording to add rather than subtract

* feedback

* Reorder a few things and make minor fixes

* changes section

* grid lanes

* changes section

* back to masonry

---------

Co-authored-by: Javier Contreras Tenorio <[email protected]>
Co-authored-by: Kevin Babbitt <[email protected]>

Author: 3 people

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,13 +482,23 @@ 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>>
-		Initial: ''50%''
+		Name: column-rule-edge-inset-start, column-rule-edge-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end
+		Value: ''auto'' | <<length-percentage>>
+		Initial: ''auto''
+		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-inset-start, column-rule-interior-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
+		Value: ''auto'' | <<length-percentage>>
+		Initial: ''auto''
 		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>
@@ -497,84 +507,215 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
 
 	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.
-	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.
+
+	For the interior properties, 
+	a value of ''-50%'' places the <a>gap decoration</a> endpoint in the center of the intersection,
+	and a value of ''0'' places the <a>gap decoration</a> endpoint at the edge of the intersection.
+
+	<dl dfn-for=rule-inset dfn-type=value>
+		<dt><dfn>auto</dfn>
+		<dd>
+			The used value of ''auto'' is ''0'' for edge properties and ''-50%'' for interior properties.
+	</dl>
+
+	<p>An <dfn>edge gap intersection point</dfn> is any [=gap intersection point=] at the content edges of the container.</p>
+	<p>An <dfn>interior gap intersection point</dfn> is any [=gap intersection point=] that is not an [=edge gap intersection point=].</p>
+	<p>A <dfn>decoration segment</dfn> refers to any segment that connects a pair of adjacent [=gap intersection points=].</p>
+	<p>A <dfn>start endpoint</dfn> and <dfn>end endpoint</dfn> refer to the two endpoints of a given [=decoration segment=].
+	A given [=start endpoint=] and [=end endpoint=] can be either an [=edge gap intersection point=] or an [=interior gap intersection point=].</p>
+
+	The ''column-rule-edge-inset-start'' and ''row-rule-edge-inset-start'' properties control the behavior for any [=start endpoint=] that is an [=edge gap intersection point=],
+	while the ''column-rule-edge-inset-end'' and ''row-rule-edge-inset-end'' properties control the behavior for any [=end endpoint=] that is an [=edge gap intersection point=].
+	Positive values recede inwards from the content edge, while negative values extend outwards, beyond the container's content bounds.
+
+	The ''column-rule-interior-inset-start'' and ''row-rule-interior-inset-start'' properties control the behavior for any [=start endpoint=] that is an [=interior gap intersection point=],
+	while the ''column-rule-interior-inset-end'' and ''row-rule-interior-inset-end'' properties control the behavior for any [=end endpoint=] that is an [=interior gap intersection point=].
+	Positive values recede away from the intersection, while negative values extend towards the center of the intersection.
+
+	<pre class='propdef shorthand'>
+		Name: column-rule-edge-inset, row-rule-edge-inset
+		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'
+	</pre>
+
+	Sets the ''column-rule-edge-inset-start'' and ''column-rule-edge-inset-end'' properties to the specified values.
+	Similarly, sets the ''row-rule-edge-inset-start'' and ''row-rule-edge-inset-end'' properties to the specified values.
 
 	<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-interior-inset, row-rule-interior-inset
+		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'
 	</pre>
 
-	Sets the 'column-rule-outset' and 'row-rule-outset' properties to the same value.
+	Sets the ''column-rule-interior-inset-start'' and ''column-rule-interior-inset-end'' properties to the specified values.
+	Similarly, sets the ''row-rule-interior-inset-start'' and ''row-rule-interior-inset-end'' 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-inset' and 'row-rule-inset' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: column-rule-inset-start, row-rule-inset-start
+		Value: auto | <<length-percentage>>
+		Applies to: 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' for 'column-rule-inset-start',
+			'row-rule-edge-inset-start' and 'row-rule-interior-inset-start' for 'row-rule-inset-start'
+	</pre>
+
+	Sets the 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' properties to the same value.
+	Similarly, sets the 'row-rule-edge-inset-start' and 'row-rule-interior-inset-start' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: column-rule-inset-end, row-rule-inset-end
+		Value: auto | <<length-percentage>>
+		Applies to: 'column-rule-edge-inset-end' and 'column-rule-interior-inset-end' for 'column-rule-inset-end',
+			'row-rule-edge-inset-end' and 'row-rule-interior-inset-end' for 'row-rule-inset-end'
+	</pre>
+
+	Sets the 'column-rule-edge-inset-end' and 'column-rule-interior-inset-end' properties to the same value.
+	Similarly, sets the 'row-rule-edge-inset-end' and 'row-rule-interior-inset-end' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: rule-inset-start
+		Value: <<'column-rule-inset-start'>>
+		Applies to: Same as 'column-rule-inset-start' and 'row-rule-inset-start'
+	</pre>
+
+	Sets the 'column-rule-inset-start' and 'row-rule-inset-start' properties to the same value.
+
+	<pre class='propdef shorthand'>
+		Name: rule-inset-end
+		Value: <<'column-rule-inset-end'>>
+		Applies to: Same as 'column-rule-inset-end' and 'row-rule-inset-end'
+	</pre>
+
+	Sets the 'column-rule-inset-end' and 'row-rule-inset-end' 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-negative-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-start-8px-end-0px {
+				column-rule-inset-start: 8px;
+				column-rule-inset-end: 0px;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
+			<figcaption>
+				A start edge inset of ''8px'' and an end edge inset of ''0px'' recede the [=start endpoints=] of edge <a>gap decorations</a>
+				away from the start of the gap, and align the [=end endpoints=] with the content edge at the end of the gap.
+				A start interior inset of ''8px'' and an end interior inset of ''0px'' recede the [=start endpoints=] of interior <a>gap decorations</a>
+				away from the edges of adjacent items at the start of the gap, and align the [=end endpoints=] with the edges of adjacent items at the end of the gap.
+			</figcaption>
+		</figure>
+	</div>
+
+	<div class="example">
+		<pre>
+			.inset-edge-0px-interior-negative-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 +745,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|.
+				Add |inset| to |result|.
 			</li>
 
 			<li>
@@ -1238,4 +1379,8 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
 			(<a href="https://github.com/w3c/csswg-drafts/issues/12431">Issue 12431</a>)
 		<li>Removed the special case of 'column-rule-width' having a computed value of ''0'' when 'column-rule-style' is ''border-style/none'' or ''border-style/hidden''.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/11494">Issue 11494</a>)
+		<li> Updated `*-outset` to `*-inset` and introduced related properties.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/12603">Issue 12603</a>,
+			<a href="https://github.com/w3c/csswg-drafts/issues/12848">Issue 12848</a>,
+			<a href="https://github.com/w3c/csswg-drafts/issues/8402">Issue 8402</a>)
 	</ul>