From c7136841757da3501eac26dd59c8a1e28700ff6b Mon Sep 17 00:00:00 2001 From: Javier Contreras Tenorio Date: Mon, 27 Oct 2025 11:58:04 -0700 Subject: [PATCH 1/4] initial commit --- css-gaps-1/Overview.bs | 119 +++++++++++++++++- .../example-column-interior-outset-5px.png | Bin 0 -> 2415 bytes ...column-start-end-edge-interior-outsets.png | Bin 0 -> 2345 bytes 3 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 css-gaps-1/images/example-column-interior-outset-5px.png create mode 100644 css-gaps-1/images/example-column-start-end-edge-interior-outsets.png diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 56b4f99f58cd..6991c3b2c91d 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -483,10 +483,20 @@ Pairing gap intersection points into segments

-Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset', and 'rule-outset' properties

+Adjusting gap decoration endpoints: The 'rule-outset' properties 
-		Name: column-rule-outset, row-rule-outset
+		Name: column-rule-edge-start-outset, column-rule-edge-end-outset, row-rule-edge-start-outset, row-rule-edge-end-outset
+		Value: <>
+		Initial: ''0''
+		Applies to: grid containers, flex containers, multicol containers, and masonry containers
+		Inherited: no
+		Percentages: refer to the crossing gap width
+		Animation type: by computed value type
+
+ + 
+		Name: column-rule-interior-start-outset, column-rule-interior-end-outset, row-rule-interior-start-outset, row-rule-interior-end-outset
 		Value: <>
 		Initial: ''50%''
 		Applies to: grid containers, flex containers, multicol containers, and masonry containers
@@ -497,12 +507,70 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
 
 	These properties can be used to offset the endpoints of gap decorations relative to the
 	gap intersection points which would normally determine their endpoints.
+
+	
    
+		
  • Let |edge-intersection| refer to any [=gap intersection points=] at the content edges of a container.
    • 
+		
  • Let |interior-intersection| refer to all other [=gap intersection points=].
    • 
+		
  • Let |decoration-segment| refer to any segment that connects a pair of adjacent [=gap intersection points=].
    • 
+		
  • Let |start-endpoint| and |end-endpoint| refer to the two endpoints of a given |decoration-segment|.
+		A given |start-endpoint| and |end-endpoint| can be either a |edge-intersection| or a |interior-intersection|.
    • 
+	

+
+	The 'column-rule-edge-start-outset' and 'row-rule-edge-start-outset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|,
+	while the 'column-rule-edge-end-outset' and 'row-rule-edge-end-outset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|.
+	Positive values extend outwards, beyond the container's content bounds,
+	while negative values recede inwards from the content edge.
+
+	The 'column-rule-interior-start-outset' and 'row-rule-interior-start-outset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|,
+	while the 'column-rule-interior-end-outset' and 'row-rule-interior-end-outset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|.
+	Positive values extend towards the center of the intersection,
+	while negative values recede away from the intersection.
+
 	The initial value of ''50%'' places the gap decoration endpoint in the center of the intersection.
 	With a value of ''0'', the gap decoration 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.
+
+	
+		Name: column-rule-edge-outset, row-rule-edge-outset
+		Value: <> [ <> ]?
+		Initial: ''0''
+		Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
+	

+
+	Sets the column-rule-edge-start-outset and column-rule-edge-end-outset properties to the specified values.
+	Similarly, sets the row-rule-edge-start-outset and row-rule-edge-end-outset properties to the specified values.
+
+	
+		Name: column-rule-interior-outset, row-rule-interior-outset
+		Value: <> [ <> ]?
+		Initial: ''50%''
+		Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
+	

+
+	Sets the column-rule-interior-start-outset and column-rule-interior-end-outset properties to the specified values.
+	Similarly, sets the row-rule-interior-start-outset and row-rule-interior-end-outset properties to the specified values.
+
+	
+		Name: rule-edge-outset
+		Value: <<'column-rule-edge-outset'>>
+		Applies to: Same as 'column-rule-edge-outset' and 'row-rule-edge-outset'
+	

+
+	Sets the 'column-rule-edge-outset' and 'row-rule-edge-outset' properties to the same value.
+
+	
+		Name: rule-interior-outset
+		Value: <<'column-rule-interior-outset'>>
+		Applies to: Same as 'column-rule-interior-outset' and 'row-rule-interior-outset'
+	

+
+	Sets the 'column-rule-interior-outset' and 'row-rule-interior-outset' properties to the same value.
+
+	
+		Name: column-rule-outset, row-rule-outset
+		Value: <> [ <> ]?
+		Initial: ''0''
+		Applies to: Same as 'column-rule-edge-outset', 'column-rule-interior-outset', 'row-rule-edge-outset', and 'row-rule-interior-outset'
+	

 
 	
 		Name: rule-outset
@@ -543,6 +611,45 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
 		
 	
 
+	

+		
+			.outset-0px {
+				column-rule-start-edge-outset: 0px;
+				column-rule-end-edge-outset: 8px;
+				column-rule-start-interior-outset: 0px;
+				column-rule-end-interior-outset: 8px;
+				column-rule-break: intersection;
+			}
+		

+		

+			
+			

+				A start edge outset of ''0px'' and an end edge outset of ''8px'' align the endpoints of edge gap decorations
+				with the content edge at the start of the gap, and extend the endpoints slightly beyond the content edge at the end of the gap.
+				An interior outset of ''0px'' at the start intersection and ''8px'' at the end intersection align the start endpoints of interior gap decorations
+				with the edges of adjacent items at the start of the gap, and extend the end endpoints slightly beyond the edges of adjacent items at the end of the gap.
+			

+		

+	

+
+	

+		
+			.outset-edge-0px-interior-5px {
+				column-rule-edge-outset: 0px;
+				column-rule-interior-outset: 5px;
+				column-rule-break: intersection;
+			}
+		

+		

+			
+			

+				An interior outset of ''5px'' extends the endpoints of interior gap decorations
+				slightly beyond the edges of adjacent items. An edge outset of ''0px'' aligns the endpoints of edge gap decorations
+				with the content edges.
+			

+		

+	

+
 	

 		
 			.outset-50percent {
diff --git a/css-gaps-1/images/example-column-interior-outset-5px.png b/css-gaps-1/images/example-column-interior-outset-5px.png
new file mode 100644
index 0000000000000000000000000000000000000000..60b7e26ea213951cdfb6240374a040d75928656b
GIT binary patch
literal 2415
zcmeAS@N?(olHy`uVBq!ia0y~yU}6GdMh-Thi1o$mNkEFRILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmFKt5-IM`SSrgP1A^GkON8d;p5Ec)B=-RK&f#W7zlDK!D-k
z!-2B&ki2&5y7mvRkKLHxt2zISO>r_X-QiAFKl_1+?OO&uJnBS>%q@9-?x8YDn9r6VzK^?ywrJ>
z?4Qq=&n&)$Y|m)E7%d;rQzd2j0+ynHCH5}4L+hoJ>&=$c7=1p|i;?<~?RjPo%spw!
zXeIS+JFyxYx!=(Y53*&CCjwrL9UAIz>ry{_V5F!{sq=10wr
UhP~F`fsG^vPgg&ebxsLQ09XUt0RR91

literal 0
HcmV?d00001

diff --git a/css-gaps-1/images/example-column-start-end-edge-interior-outsets.png b/css-gaps-1/images/example-column-start-end-edge-interior-outsets.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e1b64af346691b5ae1b055f6c51fb0b61ca992d
GIT binary patch
literal 2345
zcmeAS@N?(olHy`uVBq!ia0y~yU}6ViehxOE$n#INVL*zpILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmFKt5-IM`SSrgP1A^GkON8d|+VU*yriu7*Y}U_O9cq+Xf;I7gxRhDA)V_
z#orZ^uN9d7XlxOfGtYRkNo{j?&V?Dp=i(U{>i@=>Gc^34ZNb2h^yl}Qf_cxY*z|92
z%e`Bb)3a{=k58%dD%n4uG5?u4@2(63gCZY8g8(~&LkBa1!VyLWfk!|q3mF(%fV!PV
zrALDWe{x7ZXL;TC#|pz;W{d93tbEpXhxjB@5zWZZq0QI#IO04*gZ|d{zju{>jAVo-
zzC-+-3=TUiNlJw={Q7gB@0@q=^tRmS?Q+tKU#s6^Gd{nkx$@cUKPKn%MpOD|4yUAK
z>o9yi=e1hR6^U5sz;|bCik(SFQG3=hFdPwOKVG;do#DXrTi)wxz91@AEe&iwl=!I_u^OK{N|bI_YT^8_N|+hZa!M3kJe=*m7ZuVfFr=x
zM5(Y{R?oU#jq
Date: Mon, 3 Nov 2025 08:26:08 -0800
Subject: [PATCH 2/4] insets and auto

---
 ...-outset-0px.png => example-column-inset-0px.png} | Bin
 ...rcent.png => example-column-inset-50percent.png} | Bin
 ...-outset-5px.png => example-column-inset-5px.png} | Bin
 ...utset-join.png => example-column-inset-join.png} | Bin
 ...s-5px.png => example-column-inset-minus-5px.png} | Bin
 ...px.png => example-column-interior-inset-5px.png} | Bin
 ...ample-column-start-end-edge-interior-insets.png} | Bin
 7 files changed, 0 insertions(+), 0 deletions(-)
 rename css-gaps-1/images/{example-column-outset-0px.png => example-column-inset-0px.png} (100%)
 rename css-gaps-1/images/{example-column-outset-50percent.png => example-column-inset-50percent.png} (100%)
 rename css-gaps-1/images/{example-column-outset-5px.png => example-column-inset-5px.png} (100%)
 rename css-gaps-1/images/{example-column-outset-join.png => example-column-inset-join.png} (100%)
 rename css-gaps-1/images/{example-column-outset-minus-5px.png => example-column-inset-minus-5px.png} (100%)
 rename css-gaps-1/images/{example-column-interior-outset-5px.png => example-column-interior-inset-5px.png} (100%)
 rename css-gaps-1/images/{example-column-start-end-edge-interior-outsets.png => example-column-start-end-edge-interior-insets.png} (100%)

diff --git a/css-gaps-1/images/example-column-outset-0px.png b/css-gaps-1/images/example-column-inset-0px.png
similarity index 100%
rename from css-gaps-1/images/example-column-outset-0px.png
rename to css-gaps-1/images/example-column-inset-0px.png
diff --git a/css-gaps-1/images/example-column-outset-50percent.png b/css-gaps-1/images/example-column-inset-50percent.png
similarity index 100%
rename from css-gaps-1/images/example-column-outset-50percent.png
rename to css-gaps-1/images/example-column-inset-50percent.png
diff --git a/css-gaps-1/images/example-column-outset-5px.png b/css-gaps-1/images/example-column-inset-5px.png
similarity index 100%
rename from css-gaps-1/images/example-column-outset-5px.png
rename to css-gaps-1/images/example-column-inset-5px.png
diff --git a/css-gaps-1/images/example-column-outset-join.png b/css-gaps-1/images/example-column-inset-join.png
similarity index 100%
rename from css-gaps-1/images/example-column-outset-join.png
rename to css-gaps-1/images/example-column-inset-join.png
diff --git a/css-gaps-1/images/example-column-outset-minus-5px.png b/css-gaps-1/images/example-column-inset-minus-5px.png
similarity index 100%
rename from css-gaps-1/images/example-column-outset-minus-5px.png
rename to css-gaps-1/images/example-column-inset-minus-5px.png
diff --git a/css-gaps-1/images/example-column-interior-outset-5px.png b/css-gaps-1/images/example-column-interior-inset-5px.png
similarity index 100%
rename from css-gaps-1/images/example-column-interior-outset-5px.png
rename to css-gaps-1/images/example-column-interior-inset-5px.png
diff --git a/css-gaps-1/images/example-column-start-end-edge-interior-outsets.png b/css-gaps-1/images/example-column-start-end-edge-interior-insets.png
similarity index 100%
rename from css-gaps-1/images/example-column-start-end-edge-interior-outsets.png
rename to css-gaps-1/images/example-column-start-end-edge-interior-insets.png

From 03dfb5c80893165cab39abcffc9fede0844e1879 Mon Sep 17 00:00:00 2001
From: Javier Contreras Tenorio 
Date: Mon, 3 Nov 2025 08:26:30 -0800
Subject: [PATCH 3/4] insets and auto

---
 css-gaps-1/Overview.bs | 171 ++++++++++++++++++++++-------------------
 1 file changed, 91 insertions(+), 80 deletions(-)

diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 6991c3b2c91d..9c650e1d3631 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -368,7 +368,7 @@ Pairing gap intersection points into segments
 	A gap decoration is painted between each pair of endpoints identified using the steps above.
 
 	The following examples illustrate various settings for the *-rule-break properties.
-	To make the differences more apparent, the *-rule-outset properties are set to ''0''.
+	To make the differences more apparent, the *-rule-*-inset properties are set to ''0''.
 
 	

 		
@@ -379,7 +379,7 @@ Pairing gap intersection points into segments
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: none;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		

 		

@@ -400,7 +400,7 @@ Pairing gap intersection points into segments
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: spanning-item;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		

 		

@@ -421,7 +421,7 @@ Pairing gap intersection points into segments
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: intersection;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
 		

 		

@@ -442,7 +442,7 @@ Pairing gap intersection points into segments
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
 				rule-break: none;
-				rule-outset: 0px;
+				rule-inset: 0px;
 			}
@@ -471,7 +471,7 @@ Pairing gap intersection points into segments row-rule: 6px solid red; column-rule: 6px solid blue; rule-break: intersection; - rule-outset: 0px; + rule-inset: 0px; }
@@ -482,12 +482,12 @@ Pairing gap intersection points into segments
-

-Adjusting gap decoration endpoints: The 'rule-outset' properties

+

+Adjusting gap decoration endpoints: The 'rule-inset' properties

-		Name: column-rule-edge-start-outset, column-rule-edge-end-outset, row-rule-edge-start-outset, row-rule-edge-end-outset
-		Value: <>
+		Name: column-rule-edge-start-inset, column-rule-edge-end-inset, row-rule-edge-start-inset, row-rule-edge-end-inset
+		Value: auto | <>
 		Initial: ''0''
 		Applies to: grid containers, flex containers, multicol containers, and masonry containers
 		Inherited: no
@@ -496,8 +496,8 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties
 	
-		Name: column-rule-interior-start-outset, column-rule-interior-end-outset, row-rule-interior-start-outset, row-rule-interior-end-outset
-		Value: <>
+		Name: column-rule-interior-start-inset, column-rule-interior-end-inset, row-rule-interior-start-inset, row-rule-interior-end-inset
+		Value: auto | <>
 		Initial: ''50%''
 		Applies to: grid containers, flex containers, multicol containers, and masonry containers
 		Inherited: no
@@ -505,6 +505,22 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties
 		Animation type: by computed value type
+ For `edge` properties `auto` has the following meaning: +
+
auto +
+ The endpoint is not offset from the content edge of the container. + This is equivalent to a value of ''0''. +
+ + For `interior` properties `auto` has the following meaning: +
+
auto +
+ The endpoint is placed halfway into the intersection. + This is equivalent to a value of ''50%''. +
+ These properties can be used to offset the endpoints of gap decorations relative to the gap intersection points which would normally determine their endpoints. @@ -516,96 +532,91 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties A given |start-endpoint| and |end-endpoint| can be either a |edge-intersection| or a |interior-intersection|. - The 'column-rule-edge-start-outset' and 'row-rule-edge-start-outset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|, - while the 'column-rule-edge-end-outset' and 'row-rule-edge-end-outset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|. - Positive values extend outwards, beyond the container's content bounds, - while negative values recede inwards from the content edge. + The 'column-rule-edge-start-inset' and 'row-rule-edge-start-inset' properties control the behavior for any |start-endpoint| that is an |edge-intersection|, + while the 'column-rule-edge-end-inset' and 'row-rule-edge-end-inset' properties control the behavior for any |end-endpoint| that is an |edge-intersection|. + Positive values recede inwards from the content edge, while negative values extend outwards, beyond the container's content bounds. - The 'column-rule-interior-start-outset' and 'row-rule-interior-start-outset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|, - while the 'column-rule-interior-end-outset' and 'row-rule-interior-end-outset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|. - Positive values extend towards the center of the intersection, - while negative values recede away from the intersection. + The 'column-rule-interior-start-inset' and 'row-rule-interior-start-inset' properties control the behavior for any |start-endpoint| that is an |interior-intersection|, + while the 'column-rule-interior-end-inset' and 'row-rule-interior-end-inset' properties control the behavior for any |end-endpoint| that is an |interior-intersection|. + Negative values extend towards the center of the intersection, while positive values recede away from the intersection. The initial value of ''50%'' places the gap decoration endpoint in the center of the intersection. With a value of ''0'', the gap decoration endpoint will coincide with the edge of the intersection. 
-		Name: column-rule-edge-outset, row-rule-edge-outset
+		Name: column-rule-edge-inset, row-rule-edge-inset
 		Value: <> [ <> ]?
-		Initial: ''0''
-		Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
+		Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
- Sets the column-rule-edge-start-outset and column-rule-edge-end-outset properties to the specified values. - Similarly, sets the row-rule-edge-start-outset and row-rule-edge-end-outset properties to the specified values. + Sets the column-rule-edge-start-inset and column-rule-edge-end-inset properties to the specified values. + Similarly, sets the row-rule-edge-start-inset and row-rule-edge-end-inset properties to the specified values. 
-		Name: column-rule-interior-outset, row-rule-interior-outset
+		Name: column-rule-interior-inset, row-rule-interior-inset
 		Value: <> [ <> ]?
-		Initial: ''50%''
-		Applies to: Same as 'column-rule-edge-start-outset', 'column-rule-interior-start-outset', 'row-rule-edge-end-outset', and 'row-rule-interior-end-outset'
+		Applies to: Same as 'column-rule-edge-start-inset', 'column-rule-interior-start-inset', 'row-rule-edge-end-inset', and 'row-rule-interior-end-inset'
- Sets the column-rule-interior-start-outset and column-rule-interior-end-outset properties to the specified values. - Similarly, sets the row-rule-interior-start-outset and row-rule-interior-end-outset properties to the specified values. + Sets the column-rule-interior-start-inset and column-rule-interior-end-inset properties to the specified values. + Similarly, sets the row-rule-interior-start-inset and row-rule-interior-end-inset properties to the specified values. 
-		Name: rule-edge-outset
-		Value: <<'column-rule-edge-outset'>>
-		Applies to: Same as 'column-rule-edge-outset' and 'row-rule-edge-outset'
+		Name: rule-edge-inset
+		Value: <<'column-rule-edge-inset'>>
+		Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
- Sets the 'column-rule-edge-outset' and 'row-rule-edge-outset' properties to the same value. + Sets the 'column-rule-edge-inset' and 'row-rule-edge-inset' properties to the same value. 
-		Name: rule-interior-outset
-		Value: <<'column-rule-interior-outset'>>
-		Applies to: Same as 'column-rule-interior-outset' and 'row-rule-interior-outset'
+		Name: rule-interior-inset
+		Value: <<'column-rule-interior-inset'>>
+		Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'
- Sets the 'column-rule-interior-outset' and 'row-rule-interior-outset' properties to the same value. + Sets the 'column-rule-interior-inset' and 'row-rule-interior-inset' properties to the same value. 
-		Name: column-rule-outset, row-rule-outset
+		Name: column-rule-inset, row-rule-inset
 		Value: <> [ <> ]?
-		Initial: ''0''
-		Applies to: Same as 'column-rule-edge-outset', 'column-rule-interior-outset', 'row-rule-edge-outset', and 'row-rule-interior-outset'
+		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
 	
-		Name: rule-outset
-		Value: <<'column-rule-outset'>>
-		Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
+		Name: rule-inset
+		Value: <<'column-rule-inset'>>
+		Applies to: Same as 'column-rule-inset' and 'row-rule-inset'
- Sets the 'column-rule-outset' and 'row-rule-outset' properties to the same value. + Sets the 'column-rule-inset' and 'row-rule-inset' properties to the same value. 
-			.outset-0px {
-				column-rule-outset: 0px;
+			.inset-0px {
+				column-rule-inset: 0px;
 				column-rule-break: intersection;
 			}
- +
- An outset of ''0px'' aligns the ends of gap decorations with adjacent items. + An inset of ''0px'' aligns the ends of gap decorations with adjacent items. 
-			.outset-5px {
-				column-rule-outset: 5px;
+			.inset-5px {
+				column-rule-inset: -5px;
 				column-rule-break: intersection;
 			}
- +
- An outset of ''5px'' extends the ends of gap decorations + An inset of ''-5px'' extends the ends of gap decorations slightly beyond the edges of adjacent items.
@@ -613,20 +624,20 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties 
-			.outset-0px {
-				column-rule-start-edge-outset: 0px;
-				column-rule-end-edge-outset: 8px;
-				column-rule-start-interior-outset: 0px;
-				column-rule-end-interior-outset: 8px;
+			.inset-0px {
+				column-rule-start-edge-inset: 0px;
+				column-rule-end-edge-inset: -8px;
+				column-rule-start-interior-inset: 0px;
+				column-rule-end-interior-inset: -8px;
 				column-rule-break: intersection;
 			}
- +
- A start edge outset of ''0px'' and an end edge outset of ''8px'' align the endpoints of edge gap decorations + A start edge inset of ''0px'' and an end edge inset of ''-8px'' align the endpoints of edge gap decorations with the content edge at the start of the gap, and extend the endpoints slightly beyond the content edge at the end of the gap. - An interior outset of ''0px'' at the start intersection and ''8px'' at the end intersection align the start endpoints of interior gap decorations + An interior inset of ''0px'' at the start intersection and ''-8px'' at the end intersection align the start endpoints of interior gap decorations with the edges of adjacent items at the start of the gap, and extend the end endpoints slightly beyond the edges of adjacent items at the end of the gap.
@@ -634,17 +645,17 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties 
-			.outset-edge-0px-interior-5px {
-				column-rule-edge-outset: 0px;
-				column-rule-interior-outset: 5px;
+			.inset-edge-0px-interior-5px {
+				column-rule-edge-inset: 0px;
+				column-rule-interior-inset: -5px;
 				column-rule-break: intersection;
 			}
- +
- An interior outset of ''5px'' extends the endpoints of interior gap decorations - slightly beyond the edges of adjacent items. An edge outset of ''0px'' aligns the endpoints of edge gap decorations + 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.
@@ -652,36 +663,36 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties 
-			.outset-50percent {
-				column-rule-outset: 50%;
+			.inset-50percent {
+				column-rule-inset: 50%;
 				column-rule-break: intersection;
 			}
- +
- An outset of ''50%'' - the initial value - extends each end of a gap decoration + An inset of ''50%'' - the initial value - extends each end of a gap decoration halfway into its intersection. Neighboring gap decorations "meet in the middle" to create a continuous line. Note that at the edges of the container, the crossing gap width 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 gap decoration 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.) 
-			.outset-negative-5px {
-				column-rule-outset: -5px;
+			.inset-positive-5px {
+				column-rule-inset: 5px;
 				column-rule-break: intersection;
 			}
- +
- An outset of ''-5px'' shortens the ends of gap decorations + An inset of ''5px'' shortens the ends of gap decorations relative to the edges of adjacent items.
@@ -711,14 +722,14 @@ Adjusting gap decoration endpoints: The 'rule-outset' properties
  • - 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|.
  • Let |result| be |width| multiplied by 50%. - Subtract |outset| from |result|. + Subtract |inset| from |result|.
  • From f34abcaa82b38dc336205d5d502305d4ac7a32fa Mon Sep 17 00:00:00 2001 From: Javier Contreras Tenorio Date: Mon, 3 Nov 2025 08:28:37 -0800 Subject: [PATCH 4/4] formatting --- css-gaps-1/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 9c650e1d3631..27d3d0ad2ebe 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -505,7 +505,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties Animation type: by computed value type - For `edge` properties `auto` has the following meaning: + For 'edge' properties 'auto' has the following meaning:
    auto
    @@ -513,7 +513,7 @@ Adjusting gap decoration endpoints: The 'rule-inset' properties This is equivalent to a value of ''0''.
    - For `interior` properties `auto` has the following meaning: + For 'interior' properties 'auto' has the following meaning:
    auto