diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 1d6d64f5603e..8796eee04673 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -983,7 +983,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 		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: <>
+		Value: <>
 		Initial: ''0''
 		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
 		Inherited: no
@@ -991,6 +991,10 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 		Animation type: by computed value type
 	
+
+		<inset-value> = <> | overlap-join
+	
+ These properties can be used to offset the start and end points of gap decorations relative to the segment endpoints which would normally determine where decorations start and end. @@ -1097,6 +1101,58 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties For these properties, positive values offset in the [=start=] direction, and negative values offset in the [=end=] direction, along the axis of the gap.

+

+ The overlap-join keyword + produces neat joins between [=gap decorations=] that meet at the same [=gap junction=]: +

+ + + +
+
+			.inset-overlap-join {
+				rule-inset: overlap-join;
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		
+
+ +
+ With ''/overlap-join'', [=gap decorations=] at [=junction segment endpoints=] + extend into the [=gap junction=], joining adjacent segments. + At [=cap segment endpoints=], ''/overlap-join'' is treated as ''0''. +
+
+
+ +
+
+			.inset-overlap-join {
+				rule-inset: overlap-join;
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		
+
+ +
+ In a "donut" grid layout, where items surround an empty space in the middle of the container, + ''/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, ''/overlap-join'' is treated as ''0''. +
+
+
+
 			.inset-end {
@@ -1159,6 +1215,13 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 		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
 	
 
 	

@@ -1184,7 +1247,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties

 		Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
-		Value: <>
+		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'
 	
@@ -1240,7 +1303,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 		Name: column-rule-inset-cap, column-rule-inset-junction, row-rule-inset-cap, row-rule-inset-junction
-		Value: <> [ <> ]?
+		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'
 	
@@ -2575,6 +2638,8 @@ Changes since the 2 (Issue 13697)
  • Clarified that gaps suppressed due to fragmentation still consume gap decoration values. (Issue 13754) +
  • Added the ''/overlap-join'' value to the [[#inset|rule-inset]] properties. + (Issue 13137)
  • Clarified that decoration patterns do not restart at the beginning of each flex line. (Issue 13663) diff --git a/css-gaps-1/images/example-1-overlap-join.png b/css-gaps-1/images/example-1-overlap-join.png new file mode 100644 index 000000000000..2b0f5bc343d3 Binary files /dev/null and b/css-gaps-1/images/example-1-overlap-join.png differ diff --git a/css-gaps-1/images/example-2-overlap-join.png b/css-gaps-1/images/example-2-overlap-join.png new file mode 100644 index 000000000000..94a4efe499e2 Binary files /dev/null and b/css-gaps-1/images/example-2-overlap-join.png differ