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''.
-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.
+
+
+
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-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.
-
+
- 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.
-
+
- 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',
+
+
+
+ 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.
+
+
+
+
+
+
+ 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.
+
+
+
-
+
- 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.)
-
+
- 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