diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index 56b4f99f58cd..27d3d0ad2ebe 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,22 @@ 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-inset' properties

-		Name: column-rule-outset, row-rule-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
+		Percentages: refer to the crossing gap width
+		Animation type: by computed value type
+	
+ +
+		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
@@ -495,49 +505,118 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
 		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. + + + + 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-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. - 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: rule-outset
-		Value: <<'column-rule-outset'>>
-		Applies to: Same as 'column-rule-outset' and 'row-rule-outset'
+		Name: column-rule-edge-inset, row-rule-edge-inset
+		Value: <> [ <> ]?
+		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-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-inset, row-rule-interior-inset
+		Value: <> [ <> ]?
+		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-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-inset
+		Value: <<'column-rule-edge-inset'>>
+		Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
+	
+ + Sets the 'column-rule-edge-inset' and 'row-rule-edge-inset' properties 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'
+	
+ + Sets the 'column-rule-interior-inset' and 'row-rule-interior-inset' properties to the same value. + +
+		Name: column-rule-inset, row-rule-inset
+		Value: <> [ <> ]?
+		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
+	
+ +
+		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.
@@ -545,36 +624,75 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
-			.outset-50percent {
-				column-rule-outset: 50%;
+			.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 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 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. +
+
+
+ +
+
+			.inset-edge-0px-interior-5px {
+				column-rule-edge-inset: 0px;
+				column-rule-interior-inset: -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. +
+
+
+ +
+
+			.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.
@@ -604,14 +722,14 @@ Adjusting gap decoration endpoints: The 'column-rule-outset', 'row-rule-outset',
  • - 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|.
  • 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-inset-5px.png b/css-gaps-1/images/example-column-interior-inset-5px.png new file mode 100644 index 000000000000..60b7e26ea213 Binary files /dev/null and b/css-gaps-1/images/example-column-interior-inset-5px.png differ diff --git a/css-gaps-1/images/example-column-start-end-edge-interior-insets.png b/css-gaps-1/images/example-column-start-end-edge-interior-insets.png new file mode 100644 index 000000000000..9e1b64af3466 Binary files /dev/null and b/css-gaps-1/images/example-column-start-end-edge-interior-insets.png differ