Moved the <color-stop> serialization out into a separate section.

Made the color-stop production a proper definition, so references to it elsewhere will properly link to it.

Author: tabatkins

css3-images/Overview.html

@@ -802,11 +802,11 @@ <h3>Repeating Gradients</h3>
     <h3 id=color-stop-syntax><span class=secno>5.3.
      </span><code>color-stop</code> Syntax</h3>
 
-    <p>The <dfn id=ltcolor-stopgt><code>&lt;color-stop&gt;</code></dfn>
-     stands for:</p>
+    <p>The <dfn id=ltcolor-stopgt><code>&lt;color-stop&gt;</code></dfn> is
+     defined as:</p>
 
     <pre
-     class=prod><code>&lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code></pre>
+     class=prod><code><dfn id=ltcolor-stop>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
 
     <p>Color-stops are points placed along the line defined by the
      gradient-line at the beginning of the rule. Color-stops must be
@@ -1475,12 +1475,16 @@ <h2 id=serialization><span class=secno>7. </span>Serialization</h2>
     <p>This section describes the serialization of all new properties and
      value types introduced in this specification.</p>
 
+    <p>All of these algorithms refer to a variable "s". For each, let s
+     initially be the empty string, run the steps described, and then return
+     s.</p>
+
     <div>
      <h3 id=serializing-gradients><span class=secno>7.1. </span>Serializing
       Gradients</h3>
 
-     <p>To serialize a linear gradient, let s initially be the empty string,
-      run these steps, and then return s:</p>
+     <p>To serialize a &lsquo;<a href="#ltlinear-gradient"><code
+      class=css>&lt;linear-gradient></code></a>&rsquo;:</p>
 
      <ol>
       <li>Append "linear-gradient(" to s.
@@ -1503,23 +1507,15 @@ <h3 id=serializing-gradients><span class=secno>7.1. </span>Serializing
       <li>If the first argument to the gradient function was not a
        color-stop, append a comma and a space ", " to s.
 
-      <li>For each color-stop in the gradient, do the following:
-       <ol>
-        <li>Serialize the &lt;color>, and append it to s.
-
-        <li>If a &lt;length> or &lt;percentage> was specified, append a space
-         " " to s, then serialize the &lt;length> or &lt;percentage> and
-         append it to s.
-
-        <li>If this is not the final color-stop, append a comma and a space
-         ", " to s.
-       </ol>
+      <li>For each color-stop in the gradient, serialize the color-stop, and
+       append it to s. Then, if it is not the final color-stop, append a
+       comma and a space ", " to s.
 
       <li>Append a close parenthesis ")" to s.
      </ol>
 
-     <p>To serialize a radial gradient, let s initially be the empty string,
-      run these steps, and then return s:</p>
+     <p>To serialize a &lsquo;<a href="#ltradial-gradient"><code
+      class=css>&lt;radial-gradient></code></a>&rsquo;:</p>
 
      <ol>
       <li>Append "radial-gradient(" to s.
@@ -1561,19 +1557,22 @@ <h3 id=serializing-gradients><span class=secno>7.1. </span>Serializing
 
       <li>Append a comma and a space ", " to s.
 
-      <li>For each color-stop in the gradient, do the following:
-       <ol>
-        <li>Serialize the &lt;color>, and append it to s.
+      <li>For each color-stop in the gradient, serialize the color-stop, and
+       append it to s. Then, if it is not the final color-stop, append a
+       comma and a space ", " to s.
+
+      <li>Append a close parenthesis ")" to s.
+     </ol>
 
-        <li>If a &lt;length> or &lt;percentage> was specified, append a space
-         " " to s, then serialize the &lt;length> or &lt;percentage> and
-         append it to s.
+     <p>To serialize a &lsquo;<a href="#ltcolor-stop"><code
+      class=css>&lt;color-stop></code></a>&rsquo;:</p>
 
-        <li>If this is not the final color-stop, append a comma and a space
-         ", " to s.
-       </ol>
+     <ol>
+      <li>Serialize the &lt;color>, and append it to s.
 
-      <li>Append a close parenthesis ")" to s.
+      <li>If a &lt;length> or &lt;percentage> was specified, append a space "
+       " to s, then serialize the &lt;length> or &lt;percentage> and append
+       it to s.
      </ol>
     </div>
    </div>

css3-images/Overview.src.html

@@ -406,8 +406,8 @@ <h3>Repeating Gradients</h3>
 
 	<div>
 		<h3 id=color-stop-syntax><code>color-stop</code> Syntax</h3>
-		<p>The <dfn><code>&lt;color-stop&gt;</code></dfn> stands for:</p>
-		<pre class=prod><code>&lt;color&gt; [ &lt;percentage&gt; | &lt;length&gt; ]?</code></pre>
+		<p>The <dfn><code>&lt;color-stop&gt;</code></dfn> is defined as:</p>
+		<pre class=prod><code><dfn>&lt;color-stop></dfn> = &lt;color> [ &lt;percentage> | &lt;length> ]?</code></pre>
 		<p>Color-stops are points placed along the line defined by the gradient-line at the beginning of the rule.  Color-stops must be specified in order.  Percentages refer to the length of the gradient-line, with 0% being at the starting point and 100% being at the ending point.  Lengths are measured from the starting-point in the direction of the ending-point.  Color-stops are usually placed between the starting-point and ending-point, but that's not required; the gradient-line extends infinitely in both directions, and a color-stop can be placed at any position on the line.</p>
 		<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 premultiplied RGBA space.  Before the first color-stop, the line is the color of the first color-stop.  After the last color-stop, the line is the color of the last color-stop.</p>
 		<p>The following steps must be applied <em>in order</em> to process the list of color-stops.  After applying these rules, all color-stops will have a definite position and they will be in ascending order:</p>
@@ -779,10 +779,10 @@ <h3 id="object-position">The 'object-position' Property</h3>
 <div>
 	<h2>Serialization</h2>
 	<p>This section describes the serialization of all new properties and value types introduced in this specification.</p>
-
+	<p>All of these algorithms refer to a variable "s".  For each, let s initially be the empty string, run the steps described, and then return s.</p>
 	<div>
 		<h3 id="serializing-gradients">Serializing Gradients</h3>
-		<p>To serialize a linear gradient, let s initially be the empty string, run these steps, and then return s:</p>
+		<p>To serialize a ''&lt;linear-gradient>'':</p>
 		<ol>
 			<li>Append "linear-gradient(" to s.</li>
 			<li>
@@ -794,16 +794,10 @@ <h3 id="serializing-gradients">Serializing Gradients</h3>
 				</ul>
 			</li>
 			<li>If the first argument to the gradient function was not a color-stop, append a comma and a space ", " to s.</li>
-			<li>For each color-stop in the gradient, do the following:
-				<ol>
-					<li>Serialize the &lt;color>, and append it to s.</li>
-					<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
-					<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
-				</ol>
-			</li>
+			<li>For each color-stop in the gradient, serialize the color-stop, and append it to s.  Then, if it is not the final color-stop, append a comma and a space ", " to s.</li>
 			<li>Append a close parenthesis ")" to s.</li>
 		</ol>
-		<p>To serialize a radial gradient, let s initially be the empty string, run these steps, and then return s:</p>
+		<p>To serialize a ''&lt;radial-gradient>'':</p>
 		<ol>
 			<li>Append "radial-gradient(" to s.</li>
 			<li>If a &lt;bg-position> was specified in the first argument to the gradient function, serialize it and append it to s.  Otherwise, append "center" to s.</li>
@@ -828,15 +822,14 @@ <h3 id="serializing-gradients">Serializing Gradients</h3>
 				</ul>
 			</li>
 			<li>Append a comma and a space ", " to s.</li>
-			<li>For each color-stop in the gradient, do the following:
-				<ol>
-					<li>Serialize the &lt;color>, and append it to s.</li>
-					<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
-					<li>If this is not the final color-stop, append a comma and a space ", " to s.</li>
-				</ol>
-			</li>
+			<li>For each color-stop in the gradient, serialize the color-stop, and append it to s.  Then, if it is not the final color-stop, append a comma and a space ", " to s.</li>
 			<li>Append a close parenthesis ")" to s.</li>
 		</ol>
+		<p>To serialize a ''&lt;color-stop>'':</p>
+		<ol>
+			<li>Serialize the &lt;color>, and append it to s.</li>
+			<li>If a &lt;length> or &lt;percentage> was specified, append a space " " to s, then serialize the &lt;length> or &lt;percentage> and append it to s.</li>
+		</ol>
 	</div>
 </div>