From 07d761dd10a918b2bf95c920b2aa07dfe2156aa8 Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Fri, 24 Apr 2026 23:44:03 -0700 Subject: [PATCH 1/7] init cap/junct --- css-gaps-1/Overview.bs | 162 ++++++++++++------ .../images/example-cap-junct-donut-grid.png | Bin 0 -> 6968 bytes .../example-cap-junct-less-simple-grid.png | Bin 0 -> 4969 bytes .../images/example-cap-junct-simple-grid.png | Bin 0 -> 7503 bytes ... => example-column-inset-junction-5px.png} | Bin ...e-column-start-end-inset-cap-junction.png} | Bin 6 files changed, 113 insertions(+), 49 deletions(-) create mode 100644 css-gaps-1/images/example-cap-junct-donut-grid.png create mode 100644 css-gaps-1/images/example-cap-junct-less-simple-grid.png create mode 100644 css-gaps-1/images/example-cap-junct-simple-grid.png rename css-gaps-1/images/{example-column-interior-inset-5px.png => example-column-inset-junction-5px.png} (100%) rename css-gaps-1/images/{example-column-start-end-edge-interior-insets.png => example-column-start-end-inset-cap-junction.png} (100%) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index e03b56a3b80f..2aab9c737306 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -835,7 +835,7 @@ Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and Adjusting gap decoration endpoints: The 'rule-inset' properties
-		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: <>
 		Initial: ''0''
 		Applies to: grid containers, flex containers, multicol containers, and grid lanes containers
@@ -847,18 +847,82 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 	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.
 
-	

An edge segment endpoint is any [=segment endpoint=] created at the content edges of the container.

-

An interior segment endpoint is any [=segment endpoint=] created at a [=gap junction=].

+ [=Gap decorations=] are divided into [=gap decoration segments=] at [=gap junctions=]. + Once [=gap decoration segments=] have been determined, each [=segment endpoint=] can be classified + according to whether its segment joins with another [=gap decoration segment=] at that + location. The inset properties below are defined based on this classification: + +

+ A cap segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] + cannot join with any other [=gap decoration segment=] at that location. + This includes endpoints at the container's content edges, + as well as endpoints left dangling at a [=gap junction=] because no corresponding [=gap decoration segment=] + exists to join with due to 'rule-break' or 'rule-visibility-items' properties. +

+ +

+ A junction segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] can join + with one or more other [=gap decoration segments=] at the same [=gap junction=]. +

+ + +
+
+			.simple-grid {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		
+
+ A 3x3 grid. Red C markers label segment endpoints at the container's content edges. Blue J markers label segment endpoints at each interior gap junction, where column and row rules meet. +
+ In a fully populated grid, every interior [=gap junction=] produces [=junction segment endpoints=] (marked J), + while the container's content edges produce [=cap segment endpoints=] (marked C). +
+
+
+ +
+
+			.simple-grid-with-empty-cells {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		
+
+ A 3x3 grid with only the top-left five cells occupied. Where a column rule between filled cells terminates at a gap junction with no row rule reaching it, a red C marker is shown instead of a blue J. +
+ When a [=gap decoration segment=] terminates at an interior [=gap junction=] + with no other [=gap decoration segment=] there to join with, + its endpoint is a [=cap segment endpoint=]. +
+
+
+ +
+
+			.donut-grid-layout {
+				rule-break: intersection;
+				rule-visibility-items: between;
+			}
+		
+
+ A 4x4 donut-shaped grid with an empty middle row and middle-right cells. Red C markers label the dangling ends of column and row rules bordering the empty region, while blue J markers label the few endpoints where rules genuinely meet. +
+ In a "donut" grid layout, endpoints bordering the empty interior region are [=cap segment endpoints=]. +
+
+
Percentages are resolved against the crossing gap width, defined as follows:
- Edge segment endpoints + Segment endpoints that coincide with the edge of the container
The [=crossing gap width=] is ''0''.
- Interior segment endpoints + Segment endpoints that are within the container
The [=crossing gap width=] is the size of the [=gap junction=] in the same dimension as the [=gap=] in which the [=segment endpoint=] lies @@ -873,13 +937,13 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties

- 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.

- 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.

@@ -901,10 +965,10 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties - 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 @@ -960,7 +1024,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties }
- +
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. @@ -971,11 +1035,11 @@ 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: <>
-		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'
 	
- 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.
 		Name: rule-inset-start
@@ -1001,63 +1065,63 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
 		parsing/rule-inset-start-end-valid.html
 	
 
-	

- ''-edge-'' and ''-interior-'' shorthands

+

+ ''-cap-'' and ''-junction-'' shorthands

- 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=].
-			.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;
 			}
 		
- +
- An interior inset of ''-5px'' extends the endpoints of interior gap decorations - slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge gap decorations - with the content edges. + A junction inset of ''-5px'' extends the endpoints of gap decorations at [=junction segment endpoints=] + slightly beyond the edges of adjacent items. A cap inset of ''0px'' aligns the endpoints of gap decorations + at [=cap segment endpoints=] with the content edges.
-		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: <> [ <> ]?
-		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'
 	
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.
-		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'
 	
- 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.
-		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'
 	
- 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. - 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

@@ -1135,19 +1199,19 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties

 		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'
 	
- 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:
-		edge-start edge-end? [/ interior-start interior-end?]?
+		cap-start cap-end? [/ junction-start junction-end?]?
 	
Omitted values are filled in as follows:
    -
  1. If the interior values are omitted, they are copied from the edge values. +
  2. If the junction values are omitted, they are copied from the cap values.
  3. Any omitted end value is copied from the corresponding start value.
diff --git a/css-gaps-1/images/example-cap-junct-donut-grid.png b/css-gaps-1/images/example-cap-junct-donut-grid.png new file mode 100644 index 0000000000000000000000000000000000000000..1a3aa258a138acb6a3aac940f0586cbb8d03437d GIT binary patch literal 6968 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 K*x`>~x%&@}PK53N literal 0 HcmV?d00001 diff --git a/css-gaps-1/images/example-cap-junct-less-simple-grid.png b/css-gaps-1/images/example-cap-junct-less-simple-grid.png new file mode 100644 index 0000000000000000000000000000000000000000..2e67d2cecf94bbc02464c7a0f34c7ca07c384e35 GIT binary patch literal 4969 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 P2AE#HVN`a>@yXu-j2!Ph literal 0 HcmV?d00001 diff --git a/css-gaps-1/images/example-cap-junct-simple-grid.png b/css-gaps-1/images/example-cap-junct-simple-grid.png new file mode 100644 index 0000000000000000000000000000000000000000..3d4daa7704b44b490ccec417a9e68c836bfe88a8 GIT binary patch literal 7503 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 Date: Mon, 27 Apr 2026 09:46:01 -0700 Subject: [PATCH 2/7] add changes --- css-gaps-1/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 2aab9c737306..6e31baa3d1be 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -2452,4 +2452,6 @@ Changes since the 1
  • Refreshed examples to reflect changes to the specification.
  • Added links to WPT suite.
  • Added Acknowledgements section. +
  • Updated edge and interior insets to be cap and junction insets. + (Issue 13697) From 7959ae672ce70dc9b9a67730168fe714bd038664 Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Mon, 27 Apr 2026 19:26:46 -0700 Subject: [PATCH 3/7] nitty nit --- css-gaps-1/Overview.bs | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 6e31baa3d1be..79bd93589599 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -847,22 +847,16 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties 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. - [=Gap decorations=] are divided into [=gap decoration segments=] at [=gap junctions=]. - Once [=gap decoration segments=] have been determined, each [=segment endpoint=] can be classified - according to whether its segment joins with another [=gap decoration segment=] at that - location. The inset properties below are defined based on this classification: -

    - A cap segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] - cannot join with any other [=gap decoration segment=] at that location. - This includes endpoints at the container's content edges, - as well as endpoints left dangling at a [=gap junction=] because no corresponding [=gap decoration segment=] - exists to join with due to 'rule-break' or 'rule-visibility-items' properties. + A junction segment endpoint is a [=segment endpoint=] at a [=gap junction=] + where one or more other [=gap decoration segments=] are also present.

    - A junction segment endpoint is any [=segment endpoint=] whose [=gap decoration segment=] can join - with one or more other [=gap decoration segments=] at the same [=gap junction=]. + A cap segment endpoint 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 + due to 'rule-break' or 'rule-visibility-items' properties.

    @@ -893,7 +887,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties A 3x3 grid with only the top-left five cells occupied. Where a column rule between filled cells terminates at a gap junction with no row rule reaching it, a red C marker is shown instead of a blue J.
    When a [=gap decoration segment=] terminates at an interior [=gap junction=] - with no other [=gap decoration segment=] there to join with, + where no other [=gap decoration segment=] is present, its endpoint is a [=cap segment endpoint=].
  • @@ -2411,6 +2405,8 @@ Changes since the 2 (Issue 13648, Issue 13649)
  • Updated with links to additional WPTs. +
  • Updated edge and interior insets to be cap and junction insets. + (Issue 13697)

    @@ -2452,6 +2448,4 @@ Changes since the 1
  • Refreshed examples to reflect changes to the specification.
  • Added links to WPT suite.
  • Added Acknowledgements section. -
  • Updated edge and interior insets to be cap and junction insets. - (Issue 13697) From 33c0f88c18773a126b84e8bba08a7d541242f5e7 Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Mon, 27 Apr 2026 19:42:05 -0700 Subject: [PATCH 4/7] nit --- css-gaps-1/Overview.bs | 5 +++-- ...ction.png => example-column-inset-start-end.png} | Bin 2 files changed, 3 insertions(+), 2 deletions(-) rename css-gaps-1/images/{example-column-start-end-inset-cap-junction.png => example-column-inset-start-end.png} (100%) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 79bd93589599..d173c8dff66b 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -903,7 +903,8 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
  • A 4x4 donut-shaped grid with an empty middle row and middle-right cells. Red C markers label the dangling ends of column and row rules bordering the empty region, while blue J markers label the few endpoints where rules genuinely meet.
    - In a "donut" grid layout, endpoints bordering the empty interior region are [=cap segment endpoints=]. + 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=].
    @@ -1018,7 +1019,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties }
    - +
    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. diff --git a/css-gaps-1/images/example-column-start-end-inset-cap-junction.png b/css-gaps-1/images/example-column-inset-start-end.png similarity index 100% rename from css-gaps-1/images/example-column-start-end-inset-cap-junction.png rename to css-gaps-1/images/example-column-inset-start-end.png From 18817db54e8a6fe9d8b8408cbd3a1c66559224de Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Mon, 27 Apr 2026 19:44:44 -0700 Subject: [PATCH 5/7] nit --- css-gaps-1/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index d173c8dff66b..6ec7a365e6af 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -868,7 +868,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties }
    - A 3x3 grid. Red C markers label segment endpoints at the container's content edges. Blue J markers label segment endpoints at each interior gap junction, where column and row rules meet. +
    In a fully populated grid, every interior [=gap junction=] produces [=junction segment endpoints=] (marked J), while the container's content edges produce [=cap segment endpoints=] (marked C). @@ -884,7 +884,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties }
    - A 3x3 grid with only the top-left five cells occupied. Where a column rule between filled cells terminates at a gap junction with no row rule reaching it, a red C marker is shown instead of a blue J. +
    When a [=gap decoration segment=] terminates at an interior [=gap junction=] where no other [=gap decoration segment=] is present, @@ -901,7 +901,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties }
    - A 4x4 donut-shaped grid with an empty middle row and middle-right cells. Red C markers label the dangling ends of column and row rules bordering the empty region, while blue J markers label the few endpoints where rules genuinely meet. +
    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=]. From e3841d9cb4d0d257bdf7b05dbc99865b7236a863 Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Tue, 28 Apr 2026 15:39:14 -0700 Subject: [PATCH 6/7] nit --- css-gaps-1/Overview.bs | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 6ec7a365e6af..1b232fd9f936 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -855,8 +855,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties

    A cap segment endpoint 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 - due to 'rule-break' or 'rule-visibility-items' properties. + as well as endpoints at a [=gap junction=] where no other [=gap decoration segment=] is present.

    @@ -893,7 +892,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
    -
    +
     			.donut-grid-layout {
     				rule-break: intersection;
    @@ -917,7 +916,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties
     			The [=crossing gap width=] is ''0''.
     
     		
    - Segment endpoints that are within the container + Segment endpoints that do NOT coincide with the edge of the container
    The [=crossing gap width=] is the size of the [=gap junction=] in the same dimension as the [=gap=] in which the [=segment endpoint=] lies @@ -931,6 +930,14 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties See this example for one such case. +

    + 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 this example). Hence, ''column-rule-inset-cap-start: 50%'' + resolves to ''0'' at a container edge, but to half the [=gap junction=] size at an interior cap. +

    +

    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=]. From 76877f6ef9e410b978dd0e21c9bc197f00c928f8 Mon Sep 17 00:00:00 2001 From: "Sam Davis Omekara (from Dev Box)" Date: Wed, 29 Apr 2026 15:01:16 -0700 Subject: [PATCH 7/7] feedbck --- css-gaps-1/Overview.bs | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 1b232fd9f936..6bfa051ed6a1 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -911,12 +911,8 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties Percentages are resolved against the crossing gap width, defined as follows:

    - Segment endpoints that coincide with the edge of the container -
    - The [=crossing gap width=] is ''0''. + Segment endpoints at a [=gap junction=] -
    - Segment endpoints that do NOT coincide with the edge of the container
    The [=crossing gap width=] is the size of the [=gap junction=] in the same dimension as the [=gap=] in which the [=segment endpoint=] lies @@ -928,14 +924,19 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties 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 this example for one such case. +
    + Other segment endpoints +
    + The [=crossing gap width=] is ''0''.

    - 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 this example). Hence, ''column-rule-inset-cap-start: 50%'' - resolves to ''0'' at a container edge, but to half the [=gap junction=] size at an interior cap. + 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 this example). 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.