[css-images-4] Switch color-stop grammar to repeat at end for readability. Add intro text and note talking about color stop lists.

Author: tabatkins

css-images-4/Overview.bs

@@ -1333,35 +1333,47 @@ Repeating Gradients: the ''repeating-linear-gradient()'', ''repeating-radial-gra
 <h3 id='color-stop-syntax'>
 Gradient Color-Stops</h3>
 
+	All gradients are specified by a list of color stops,
+	giving the color and position of each stop on the [=gradient line=],
+	according to the following grammar:
+
 	<pre class=prod>
 		<dfn>&lt;color-stop-list></dfn> =
-			[ <<linear-color-stop>> [, <<linear-color-hint>>]? ]# , <<linear-color-stop>>
+			<<linear-color-stop>> , [ [ <<linear-color-hint>> , ]? <<linear-color-stop>> ]#
 		<dfn>&lt;linear-color-stop></dfn> = <<color>> && <<color-stop-length>>?
 		<dfn>&lt;linear-color-hint></dfn> = <<length-percentage>>
 		<dfn>&lt;color-stop-length></dfn> = <<length-percentage>>{1,2}
 
 		<dfn>&lt;angular-color-stop-list></dfn> =
-			[ <<angular-color-stop>> [, <<angular-color-hint>>]? ]# , <<angular-color-stop>>
+			<<angular-color-stop>> , [ [ <<angular-color-hint>> , ]? <<angular-color-stop>> ]#
 		<dfn>&lt;angular-color-stop></dfn> = <<color>> && <<color-stop-angle>>?
 		<dfn>&lt;angular-color-hint></dfn> = <<angle-percentage>>
 		<dfn>&lt;color-stop-angle></dfn> = <<angle-percentage>>{1,2}
 
 		<dfn>&lt;color-stop></dfn> = <<color-stop-length>> | <<color-stop-angle>>
 	</pre>
 
-	<pre class='railroad'>
-		Plus:
-			Sequence:
-				N: <color-stop>
-				Choice: 1
-					Sequence:
-						T: ,
-						N: <color-hint>
-					Skip:
+	<div class=note>
+		Note that <<color-stop-list>> and <<angular-color-stop-list>> are exactly identical in structure,
+		they just differ on whether they accept <<length>>s or <<angle>>s
+		for specifying the position of the stops and hints.
+
+		Visualized with a railroad diagram,
+		both of them follow this pattern:
+
+		<pre class='railroad'>
+			N: <color-stop>
 			T: ,
-		T: ,
-		N: <color-stop>
-	</pre>
+			Plus:
+				Sequence:
+					Optional: skip
+						Sequence:
+							N: <color-hint>
+							T: ,
+					N: <color-stop>
+				T: ,
+		</pre>
+	</div>
 
 	<p class='issue'>
 		Are lengths useful in <<angular-color-stop>>, for a given gradient circle?