Add overlap-join keyword to the css-gaps spec #13137 (#13885)

Author: oSamDavis

css-gaps-1/Overview.bs

@@ -983,14 +983,18 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 
 	<pre class='propdef'>
 		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>>
+		Value: <<inset-value>>
 		Initial: ''0''
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
 		Inherited: no
 		Percentages: refer to the <a>crossing gap width</a>
 		Animation type: by computed value type
 	</pre>
 
+	<pre class='prod'>
+		<dfn>&lt;inset-value&gt;</dfn> = <<length-percentage>> | <a value for="<inset-value>">overlap-join</a>
+	</pre>
+
 	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.
 
@@ -1097,6 +1101,58 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 		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>
 
+	<p>
+		The <dfn value for="<inset-value>">overlap-join</dfn> keyword
+		produces neat joins between [=gap decorations=] that meet at the same [=gap junction=]:
+	</p>
+
+	<ul>
+		<li>
+			At a [=junction segment endpoint=], the [=gap decoration=] extends into the [=gap junction=]
+			by half the [=crossing gap width=], plus half the [=used value=] of the crossing gap's
+			'column-rule-width' or 'row-rule-width' (whichever applies).
+		<li>
+			At a [=cap segment endpoint=], ''<inset-value>/overlap-join'' is treated as ''0''.
+	</ul>
+
+	<div class="example">
+		<pre>
+			.inset-overlap-join {
+				rule-inset: overlap-join;
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-1-overlap-join.png">
+		<figcaption>
+			With ''<inset-value>/overlap-join'', [=gap decorations=] at [=junction segment endpoints=]
+			extend into the [=gap junction=], joining adjacent segments.
+			At [=cap segment endpoints=], ''<inset-value>/overlap-join'' is treated as ''0''.
+		</figcaption>
+		</figure>
+	</div>
+
+	<div class="example">
+		<pre>
+			.inset-overlap-join {
+				rule-inset: overlap-join;
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-2-overlap-join.png">
+		<figcaption>
+			In a "donut" grid layout, where items surround an empty space in the middle of the container,
+			''<inset-value>/overlap-join'' joins adjacent segments
+			at the [=junction segment endpoints=],
+			extending each [=gap decoration=] into the [=gap junction=]. At the [=cap segment endpoints=]
+			bordering the edge of the container and the empty interior region, ''<inset-value>/overlap-join'' is treated as ''0''.
+		</figcaption>
+		</figure>
+	</div>
+
 	<div class="example">
 		<pre>
 			.inset-end {
@@ -1159,6 +1215,13 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 		multicol/multicol-gap-decorations-022.html
 		multicol/multicol-gap-decorations-023.html
 		multicol/multicol-gap-decorations-033.html
+		parsing/rule-inset-cap-start-end-overlap-join-computed.html
+		parsing/rule-inset-cap-start-end-overlap-join-invalid.html
+		parsing/rule-inset-junction-start-end-overlap-join-computed.html
+		parsing/rule-inset-junction-start-end-overlap-join-invalid.html
+		grid/grid-gap-decorations-overlap-join-001.html
+		grid/grid-gap-decorations-overlap-join-002.html
+		grid/grid-gap-decorations-overlap-join-dangling-001.html
 	</wpt>
 
 	<h4 id="insets-start-end">
@@ -1184,7 +1247,7 @@ 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>>
+		Value: <<inset-value>>
 		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>
 
@@ -1240,7 +1303,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>
 
 	<pre class='propdef shorthand'>
 		Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
-		Value: <<length-percentage>> [ <<length-percentage>> ]?
+		Value: <<inset-value>> <<inset-value>>?
 		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>
 
@@ -2575,6 +2638,8 @@ Changes since the <a href="https://www.w3.org/TR/2026/WD-css-gaps-1-20260227/">2
 			(<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>)
+		<li>Added the ''<inset-value>/overlap-join'' value to the [[#inset|rule-inset]] properties.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/13137">Issue 13137</a>)
 		<li>Clarified that decoration patterns do not restart at the beginning of each flex line.
 			(<a href="https://github.com/w3c/csswg-drafts/issues/13663">Issue 13663</a>)
 	</ul>