[css-gaps-1]: Introduce spec changes for *-inset-cap-* and *-inset-junction-* #13697 (#13842)

Author: oSamDavis

css-gaps-1/Overview.bs

@@ -982,7 +982,7 @@ Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and
 Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 
 	<pre class='propdef'>
-		Name: column-rule-edge-inset-start, column-rule-edge-inset-end, column-rule-interior-inset-start, column-rule-interior-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
+		Name: column-rule-inset-cap-start, column-rule-inset-cap-end, column-rule-inset-junction-start, column-rule-inset-junction-end, row-rule-inset-cap-start, row-rule-inset-cap-end, row-rule-inset-junction-start, row-rule-inset-junction-end
 		Value: <<length-percentage>>
 		Initial: ''0''
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
@@ -994,18 +994,72 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 	These properties can be used to offset the start and end points of <a>gap decorations</a> relative to the
 	<a>segment endpoints</a> which would normally determine where decorations start and end.
 
-	<p>An <dfn>edge segment endpoint</dfn> is any [=segment endpoint=] created at the content edges of the container.</p>
-	<p>An <dfn>interior segment endpoint</dfn> is any [=segment endpoint=] created at a [=gap junction=].</p>
+	<p>
+		A <dfn>junction segment endpoint</dfn> is a [=segment endpoint=] at a [=gap junction=]
+		where one or more other [=gap decoration segments=] are also present.
+	</p>
+
+	<p>
+		A <dfn>cap segment endpoint</dfn> is any [=segment endpoint=] that is not a [=junction segment endpoint=].
+		This includes endpoints at the container's content edges,
+		as well as endpoints at a [=gap junction=] where no other [=gap decoration segment=] is present.
+	</p>
+
+
+	<div class="example">
+		<pre>
+			.simple-grid {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-cap-junct-simple-grid.png">
+			<figcaption>
+				In a fully populated grid, every interior [=gap junction=] produces [=junction segment endpoints=] (marked <b>J</b>),
+				while the container's content edges produce [=cap segment endpoints=] (marked <b>C</b>).
+			</figcaption>
+		</figure>
+	</div>
+
+	<div class="example">
+		<pre>
+			.simple-grid-with-empty-cells {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-cap-junct-less-simple-grid.png">
+			<figcaption>
+				When a [=gap decoration segment=] terminates at an interior [=gap junction=]
+				where no other [=gap decoration segment=] is present,
+				its endpoint is a [=cap segment endpoint=].
+			</figcaption>
+		</figure>
+	</div>
+
+	<div class="example" id="example-cap-junction-donut">
+		<pre>
+			.donut-grid-layout {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-cap-junct-donut-grid.png">
+			<figcaption>
+				In a "donut" grid layout, where items surround an empty space in the middle of the container,
+				endpoints bordering the empty interior region are [=cap segment endpoints=].
+			</figcaption>
+		</figure>
+	</div>
 
 	Percentages are resolved against the <dfn>crossing gap width</dfn>, defined as follows:
 	<dl>
 		<dt>
-			Edge segment endpoints
-		<dd>
-			The [=crossing gap width=] is ''0''.
+			Segment endpoints at a [=gap junction=]
 
-		<dt>
-			Interior segment endpoints
 		<dd>
 			The [=crossing gap width=] is the size of the [=gap junction=]
 			in the same dimension as the [=gap=] in which the [=segment endpoint=] lies
@@ -1017,16 +1071,29 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 			However, in cases where [=gaps=] intersect or abut one another at overlapping intervals,
 			the [=crossing gap width=] will be determined by the union of such intervals.
 			See <a href="#example-unpaired-endpoints-1">this example</a> for one such case.
+		<dt>
+			Other segment endpoints 
+		<dd>
+			The [=crossing gap width=] is ''0''.
 	</dl>
 
+	<p class="note">
+		Note: This classification by position is distinct from the
+		[=cap segment endpoint=] / [=junction segment endpoint=] classification.
+		A [=cap segment endpoint=] may sit at a container edge or at a [=gap junction=]
+		(see <a href="#example-cap-junction-donut">this example</a>). Hence,
+		''column-rule-inset-cap-start: 50%'' resolves to half the [=gap junction=]
+		size at an interior cap and ''0'' at other caps such as container edges.
+	</p>
+
 	<p>
-		The 'column-rule-edge-inset-start' and 'row-rule-edge-inset-start' properties apply to [=start segment endpoints=] that are [=edge segment endpoints=].
-		The 'column-rule-interior-inset-start' and 'row-rule-interior-inset-start' properties apply to [=start segment endpoints=] that are [=interior segment endpoints=].
+		The 'column-rule-inset-cap-start' and 'row-rule-inset-cap-start' properties apply to [=start segment endpoints=] that are [=cap segment endpoints=].
+		The 'column-rule-inset-junction-start' and 'row-rule-inset-junction-start' properties apply to [=start segment endpoints=] that are [=junction segment endpoints=].
 		For these properties, positive values offset in the [=end=] direction, and negative values offset in the [=start=] direction, along the axis of the gap.
 	</p>
 	<p>
-		The 'column-rule-edge-inset-end' and 'row-rule-edge-inset-end' properties apply to [=end segment endpoints=] that are [=edge segment endpoints=].
-		The 'column-rule-interior-inset-end' and 'row-rule-interior-inset-end' properties apply to [=end segment endpoints=] that are [=interior segment endpoints=].
+		The 'column-rule-inset-cap-end' and 'row-rule-inset-cap-end' properties apply to [=end segment endpoints=] that are [=cap segment endpoints=].
+		The 'column-rule-inset-junction-end' and 'row-rule-inset-junction-end' properties apply to [=end segment endpoints=] that are [=junction segment endpoints=].
 		For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.
 	</p>
 
@@ -1048,10 +1115,10 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 	</div>
 
 	<wpt>
-		parsing/rule-edge-start-end-inset-computed.html
-		parsing/rule-edge-start-end-inset-invalid.html
-		parsing/rule-interior-start-end-inset-computed.html
-		parsing/rule-interior-start-end-inset-invalid.html
+		parsing/rule-inset-cap-start-end-computed.html
+		parsing/rule-inset-cap-start-end-invalid.html
+		parsing/rule-inset-junction-start-end-computed.html
+		parsing/rule-inset-junction-start-end-invalid.html
 		flex/flex-gap-decorations-011.html
 		flex/flex-gap-decorations-013.html
 		flex/flex-gap-decorations-014.html
@@ -1107,7 +1174,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
+			<img alt="" src="images/example-column-inset-start-end.png">
 			<figcaption>
 				A start inset of ''8px'' recedes the starts of [=gap decorations=],
 				while an end inset of ''0px'' aligns the ends of [=gap decorations=] with content edges.
@@ -1118,11 +1185,11 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 	<pre class='propdef shorthand'>
 		Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
 		Value: <<length-percentage>>
-		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'
+		Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-junction-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-junction-start', 'row-rule-inset-cap-end', and 'row-rule-inset-junction-end'
 	</pre>
 
-	These [=shorthand properties=] set the corresponding ''-edge-'' and ''-interior-'' properties to the same value.
-	For example, 'column-rule-inset-start' sets both 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' to the same value.
+	These [=shorthand properties=] set the corresponding ''-cap-'' and ''-junction-'' properties to the same value.
+	For example, 'column-rule-inset-start' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-junction-start' to the same value.
 
 	<pre class='propdef shorthand'>
 		Name: rule-inset-start
@@ -1148,63 +1215,63 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 		parsing/rule-inset-start-end-valid.html
 	</wpt>
 
-	<h4 id="insets-edge-interior">
-	''-edge-'' and ''-interior-'' shorthands</h4>
+	<h4 id="insets-cap-junction">
+	''-cap-'' and ''-junction-'' shorthands</h4>
 
-	These shorthands allow authors to achieve different treatments at edge versus interior intersections.
+	These shorthands allow authors to achieve different treatments at [=cap segment endpoints=] versus [=junction segment endpoints=].
 
 	<div class="example">
 		<pre>
-			.inset-edge-0px-interior-negative-5px {
-				column-rule-edge-inset: 0px;
-				column-rule-interior-inset: -5px;
+			.inset-cap-0px-inset-junction-negative-5px {
+				column-rule-inset-cap: 0px;
+				column-rule-inset-junction: -5px;
 				column-rule-break: intersection;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-column-interior-inset-5px.png">
+			<img alt="" src="images/example-column-inset-junction-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.
+				A junction inset of ''-5px'' extends the endpoints of <a>gap decorations</a> at [=junction segment endpoints=]
+				slightly beyond the edges of adjacent items. A cap inset of ''0px'' aligns the endpoints of <a>gap decorations</a>
+				at [=cap segment endpoints=] with the content edges.
 			</figcaption>
 		</figure>
 	</div>
 
 	<pre class='propdef shorthand'>
-		Name: column-rule-edge-inset, column-rule-interior-inset, row-rule-edge-inset, row-rule-interior-inset
+		Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
 		Value: <<length-percentage>> [ <<length-percentage>> ]?
-		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-start', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-edge-inset-end', 'row-rule-interior-inset-start', and 'row-rule-interior-inset-end'
+		Applies to: Same as 'column-rule-inset-cap-start', 'column-rule-inset-cap-end', 'column-rule-inset-junction-start', 'column-rule-inset-junction-end', 'row-rule-inset-cap-start', 'row-rule-inset-cap-end', 'row-rule-inset-junction-start', and 'row-rule-inset-junction-end'
 	</pre>
 
 	These shorthands set the corresponding ''-start'' and ''-end'' properties.
-	For example, 'column-rule-edge-inset' sets both 'column-rule-edge-inset-start' and 'column-rule-edge-inset-end'.
+	For example, 'column-rule-inset-cap' sets both 'column-rule-inset-cap-start' and 'column-rule-inset-cap-end'.
 	If one value is specified, both properties are set to that value.
 	If two values are specified, ''-start'' is set to the first and ''-end'' is set to the second.
 
 	<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'
+		Name: rule-inset-cap
+		Value: <<'column-rule-inset-cap'>>
+		Applies to: Same as 'column-rule-inset-cap' and 'row-rule-inset-cap'
 	</pre>
 
-	This [=shorthand property=] sets 'column-rule-edge-inset' and 'row-rule-edge-inset' to the same value.
+	This [=shorthand property=] sets 'column-rule-inset-cap' and 'row-rule-inset-cap' 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'
+		Name: rule-inset-junction
+		Value: <<'column-rule-inset-junction'>>
+		Applies to: Same as 'column-rule-inset-junction' and 'row-rule-inset-junction'
 	</pre>
 
-	This [=shorthand property=] sets 'column-rule-interior-inset' and 'row-rule-interior-inset' to the same value.
+	This [=shorthand property=] sets 'column-rule-inset-junction' and 'row-rule-inset-junction' to the same value.
 
 	<wpt>
-		parsing/rule-edge-inset-bidirectional-shorthand.html
-		parsing/rule-edge-interior-inset-computed.html
-		parsing/rule-edge-interior-inset-invalid.html
-		parsing/rule-edge-interior-inset-shorthand.html
-		parsing/rule-edge-interior-inset-valid.html
-		parsing/rule-interior-inset-bidirectional-shorthand.html
+		parsing/rule-inset-cap-bidirectional-shorthand.html
+		parsing/rule-inset-cap-junction-computed.html
+		parsing/rule-inset-cap-junction-invalid.html
+		parsing/rule-inset-cap-junction-shorthand.html
+		parsing/rule-inset-cap-junction-valid.html
+		parsing/rule-inset-junction-bidirectional-shorthand.html
 	</wpt>
 
 	<h4 id="insets-universal">
@@ -1282,19 +1349,19 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 
 	<pre class='propdef shorthand'>
 		Name: column-rule-inset, row-rule-inset
-		Value: <<'column-rule-edge-inset'>> [ / <<'column-rule-interior-inset'>> ]?
-		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
+		Value: <<'column-rule-inset-cap'>> [ / <<'column-rule-inset-junction'>> ]?
+		Applies to: Same as 'column-rule-inset-cap', 'column-rule-inset-junction', 'row-rule-inset-cap', and 'row-rule-inset-junction'
 	</pre>
 
-	These shorthands set the corresponding edge and interior start and end values.
+	These shorthands set the corresponding cap and junction start and end values.
 	The order of values is:
 	<pre class='prod'>
-		edge-start edge-end? [/ interior-start interior-end?]?
+		cap-start cap-end? [/ junction-start junction-end?]?
 	</pre>
 
 	Omitted values are filled in as follows:
 	<ol>
-		<li>If the interior values are omitted, they are copied from the edge values.
+		<li>If the junction values are omitted, they are copied from the cap values.
 		<li>Any omitted end value is copied from the corresponding start value.
 	</ol>
 
@@ -2501,6 +2568,8 @@ Changes since the <a href="https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/">2
 		<li>Moved the [[#gaps|gap]] properties from [[!CSS-ALIGN-3]] to this specification.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/13089">Issue 13089</a>)
 		<li>Updated with links to additional WPTs.
+		<li>Updated edge and interior insets to be cap and junction insets.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/13697">Issue 13697</a>)
 		<li>Clarified that gaps suppressed due to fragmentation still consume gap decoration values.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/13754">Issue 13754</a>)
 	</ul>