[css-gaps-1] Change rule-break: spanning-item to rule-break: normal w3c#13127 (w3c#13475)

Co-authored-by: Javier Contreras <javiercon@microsoft.com>

Author: jav099

css-gaps-1/Overview.bs

@@ -351,8 +351,8 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
 
 	<pre class='propdef'>
 		Name: column-rule-break, row-rule-break
-		Value: ''none'' | ''spanning-item'' | ''intersection''
-		Initial: ''spanning-item''
+		Value: ''none'' | ''normal'' | ''intersection''
+		Initial: ''normal''
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
 		Inherited: no
 		Animation type: discrete
@@ -368,18 +368,36 @@ Breaking gap decorations into segments: The 'column-rule-break', 'row-rule-break
 			Gap decorations do not start or end at visible "T" or "cross" intersections.
 			Instead, a single continuous decoration is painted from one end of the gap to the other.
 		</dd>
-		<dt><dfn>spanning-item</dfn>
+		<dt><dfn>normal</dfn>
 		<dd>
-			Gap decorations start and end at visible "T" intersections but continue through visible "cross" intersections.
+			Behavior depends on the type of container.
+
+			<dl>
+				<dt><a>Grid containers</a>
+				<dd>
+					Gap decorations start and end at visible "T" intersections
+					but continue through visible "cross" intersections.
+				</dd>
+				<dt><a>Flex containers</a>
+				<dd>
+					Because flex items do not span across flex lines,
+					there are no visible "T" intersections caused by spanning items,
+					so in practice this is identical to ''column-rule-break/none''.
+				</dd>
+				<dt><a>Multicol containers</a>
+				<dd>
+					In order to preserve the traditional readability of text in columns,
+					'column-rule-break' behaves as ''column-rule-break/intersection'', and
+					'row-rule-break' behaves as ''row-rule-break/none''.
+				</dd>
+			</dl>
 		</dd>
 		<dt><dfn>intersection</dfn>
 		<dd>
 			Gap decorations start and end at visible "T" and "cross" intersections.
 		</dd>
 	</dl>
 
-	Issue: Bikeshed these values.
-
 	<pre class='propdef shorthand'>
 		Name: rule-break
 		Value: <<'column-rule-break'>>
@@ -489,7 +507,7 @@ Pairing gap intersection points into segments</h4>
 						|break| is ''column-rule-break/none''.
 					</li>
 					<li>
-						|break| is ''column-rule-break/spanning-item'',
+						|break| is ''column-rule-break/normal'',
 						and |start| is not <a>discontiguous</a> with the first item in |endpoints|.
 					</li>
 					<li>
@@ -549,17 +567,17 @@ Pairing gap intersection points into segments</h4>
 
 	<div class="example">
 		<pre>
-			.break-spanning-item-grid {
+			.break-normal-grid {
 				display: grid;
 				grid-template: repeat(4, 100px) / repeat(4, 100px);
 				gap: 20px;
 				row-rule: 6px solid red;
 				column-rule: 6px solid blue;
-				rule-break: spanning-item;
+				rule-break: normal;
 			}
 		</pre>
 		<figure>
-			<img alt="" src="images/example-break-spanning-item-grid.png">
+			<img alt="" src="images/example-break-normal-grid.png">
 			<figcaption>
 				Grid <a>gap decorations</a> broken at <a>gap intersection points</a>
 				that are not adjacent to spanning items.
@@ -587,6 +605,25 @@ Pairing gap intersection points into segments</h4>
 		</figure>
 	</div>
 
+	<div class="example">
+		<pre>
+			.break-normal-multicol {
+				gap: 10px;
+				row-rule: 4px solid red;
+				column-rule: 4px solid blue;
+				rule-break: normal;
+			}
+		</pre>
+		<figure>
+			<img alt="" src="images/example-break-normal-multicol.png">
+			<figcaption>
+				Multicol <a>gap decorations</a> with rule-break set to ''normal''.
+				Note that in the column direction it behaves as if rule-break were set to ''intersection'',
+				while in the row direction it behaves as if rule-break were set to ''none''.
+			</figcaption>
+		</figure>
+	</div>
+
 	<div class="example">
 		<pre>
 			.break-none-flex {
@@ -610,7 +647,7 @@ Pairing gap intersection points into segments</h4>
 	</div>
 
 	Note: Because flexbox has no concept of spanning items,
-	''column-rule-break/spanning-item'' on a flexbox has the same effect as
+	''column-rule-break/normal'' on a flexbox has the same effect as
 	''column-rule-break/none''.
 
 	<div class="example">
@@ -1027,7 +1064,7 @@ Controlling Gap Decoration Visibility: The '*-rule-visibility-items' properties<
 
 	<div class="example">
 		<pre>
-			.break-spanning-item-with-around-grid {
+			.break-normal-with-around-grid {
 				display: grid;
 				grid-template: repeat(3, 100px) / repeat(3, 100px);
 				gap: 20px;
@@ -1039,7 +1076,7 @@ Controlling Gap Decoration Visibility: The '*-rule-visibility-items' properties<
 		<figure>
 			<img alt="" src="images/example-vis-rules-around-spn.png">
 			<figcaption>
-				Gap decorations with 'rule-break' ''column-rule-break/spanning-item'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
+				Gap decorations with 'rule-break' ''column-rule-break/normal'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
 			</figcaption>
 		</figure>
 	</div>