Add the two-location variant to the <color-stop> syntax.

Author: tabatkins

css4-images/Overview.html

@@ -2268,10 +2268,10 @@ <h3 id=color-stop-syntax><span class=secno>5.5. </span> Gradient
    Color-Stops</h3>
 
   <pre class=prod><dfn
-   id=color-stop-type>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</pre>
+   id=color-stop-type>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]{0,2}</pre>
 
   <pre class=prod><dfn
-   id=angular-color-stop-type>&lt;angular-color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;angle> ]?</pre>
+   id=angular-color-stop-type>&lt;angular-color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;angle> ]{0,2}</pre>
 
   <p> Color-stops are points placed along the <a
    href="#gradient-line"><i>gradient line</i></a> defined by the gradient
@@ -2285,6 +2285,14 @@ <h3 id=color-stop-syntax><span class=secno>5.5. </span> Gradient
    gradient line extends infinitely in both directions, and a color-stop can
    be placed at any position on the line.
 
+  <p> A color-stop with two locations is exactly equivalent to specifying two
+   color-stops with the same color, one at each location, including how it
+   reacts to the clean-up steps below. <span class=note>Specifying two
+   locations makes it easier to create solid-color "stripes" in a gradient,
+   without having to repeat the color twice.</span>
+
+  <p class=issue> Make sure this is handled well in the serialization rules.
+
   <p> At each color-stop, the line is the color of the color-stop. Between
    two color-stops, the line's color is linearly interpolated between the
    colors of the two color-stops, with the interpolation taking place in

css4-images/Overview.src.html

@@ -1826,8 +1826,8 @@ <h3 id='repeating-gradients'>
 <h3 id='color-stop-syntax'>
 Gradient Color-Stops</h3>
 
-	<pre class=prod><dfn id='color-stop-type'>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</pre>
-	<pre class=prod><dfn id='angular-color-stop-type'>&lt;angular-color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;angle> ]?</pre>
+	<pre class=prod><dfn id='color-stop-type'>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]{0,2}</pre>
+	<pre class=prod><dfn id='angular-color-stop-type'>&lt;angular-color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;angle> ]{0,2}</pre>
 
 	<p>
 		Color-stops are points placed along the <i>gradient line</i>
@@ -1844,6 +1844,17 @@ <h3 id='color-stop-syntax'>
 		the gradient line extends infinitely in both directions, 
 		and a color-stop can be placed at any position on the line.
 
+	<p>
+		A color-stop with two locations is exactly equivalent 
+		to specifying two color-stops with the same color,
+		one at each location,
+		including how it reacts to the clean-up steps below.
+		<span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient,
+			without having to repeat the color twice.</span>
+
+	<p class='issue'>
+		Make sure this is handled well in the serialization rules.
+
 	<p>
 		At each color-stop, 
 		the line is the color of the color-stop.