[CSSGapDecorations] Refresh explainer with new outset properties (#1180)

Author: jav099

CSSGapDecorations/explainer.md

@@ -218,29 +218,56 @@ default; changing this behavior is covered in a later section of this document.
 
 Authors may adjust the positions of endpoints relative to gap intersections,
 either as a fixed distance or as a percentage of the width of the intersection.
-The "zero point" is the edge of the intersection, with positive values extending
-into the intersection and negative values receding from it.
+The "zero point" is the edge of the intersection, with negative values extending
+into the intersection and positive values receding from it.
 
 ```css
-.outset-0px {
-  column-rule-outset: 0px;
+.inset-0px {
+  column-rule-inset: 0px;
 }
 ```
-<image src="images/example-column-outset-0px.png">
+<image src="images/example-column-inset-0px.png">
 
 ```css
-.outset-5px {
-  column-rule-outset: 5px;
+.inset-5px {
+  column-rule-inset: -5px;
 }
 ```
-<image src="images/example-column-outset-5px.png">
+<image src="images/example-column-inset-5px.png">
 
 ```css
-.outset-negative-5px {
-  column-rule-outset: -5px;
+.inset-negative-5px {
+  column-rule-inset: 5px;
 }
 ```
-<image src="images/example-column-outset-minus-5px.png">
+<image src="images/example-column-inset-minus-5px.png">
+
+Authors may also adjust endpoints more granularly, making a distinction between "edge"
+endpoints (which fall on the edge of the container),
+and "interior" endpoints (any endpoint that is not an "edge").
+
+```css
+.edge-interior-insets {
+  column-rule-edge-inset: 0px;
+  column-rule-interior-inset: 5px;
+}
+```
+
+<image src="images/example-column-interior-inset-5px.png">
+
+Similarly, authors can have even more granular control to adjust the positions of endpoints,
+making a distinction between "start" and "end" endpoints, in addition to the "edge" and "interior" distinction.
+
+```css
+.start-end-edge-interior-insets {
+  column-rule-start-edge-inset: 0px;
+  column-rule-end-edge-inset: 8px;
+  column-rule-start-interior-inset: 0px;
+  column-rule-end-interior-inset: 8px;
+}
+```
+
+<image src="images/example-column-start-end-edge-interior-insets.png">
 
 ### Interaction with spanning items
 
@@ -251,15 +278,15 @@ In the latter case, gap decorations paint "behind" items in the container.
 ```css
 .t-intersections {
   gap-rule-break: spanning-item;
-  gap-rule-outset: 0px;
+  gap-rule-inset: 0px;
 }
 ```
 <image src="images/example-break-spanning-item.png">
 
 ```css
 .all-intersections {
   gap-rule-break: intersection;
-  gap-rule-outset: 0px;
+  gap-rule-inset: 0px;
 }
 ```
 <image src="images/example-break-intersection.png">
@@ -446,7 +473,7 @@ example
 ```css
 .container {
   rule: 1px solid black;
-  column-rule-outset: 0px;
+  column-rule-inset: 0px;
 }
 ```