Used 'ending-shape' consistently throughout radial gradients. Slight editorial cleanup of some radial gradient paragraphs.

Author: tabatkins

css3-images/Overview.html

@@ -850,9 +850,10 @@ <h3 id=radial-gradients><span class=secno>5.2. </span> Radial Gradients</h3>
   <p>A radial gradient is specified by first pinpointing the center of the
    gradient, where the 0% ellipse will be, then specifying the size and shape
    of the 100% ellipse, ending with a list of color-stops just like a
-   linear-gradient. Between the center and the ending-ellipse, and past the
-   ending-ellipse, concentric ellipses are drawn and colored according to the
-   specified color-stops.</p>
+   linear-gradient. Between the center and the <a
+   href="#ending-shape"><i>ending-shape</i></a>, and past the <a
+   href="#ending-shape"><i>ending-shape</i></a>, concentric ellipses are
+   drawn and colored according to the specified color-stops.</p>
   <!-- ====================================================================== -->
 
   <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
@@ -870,7 +871,7 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
 )
 	</pre>
 
-  <p>The first argument to the function specifies the center of the ellipse.
+  <p>The first argument to the function specifies the center of the gradient.
    The <a href="#ltposition"><code>&lt;position></code></a> value type is
    defined as the positioning syntax of &lsquo;<code class=css><a
    href="http://www.w3.org/TR/css3-background/#the-background-position">background-position</a></code>&rsquo;
@@ -883,24 +884,29 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
    class=css>center</code>&rsquo;.
 
   <p>The second argument to the function specifies the size and shape of the
-   ending-ellipse. This can be specified in two ways, with different
+   <dfn id=ending-shape
+   title="ending-shape|ending-shape's">ending-shape</dfn>, which defines the
+   shape of the gradient and the locations of percentage-location
+   color-stops. This can be specified in two ways, with different
    characteristics:
 
   <dl>
    <dt>Implicitly
 
    <dd>
-    <p>The size and shape of the ending-ellipse can be defined
+    <p>The size and shape of the <a
+     href="#ending-shape"><i>ending-shape</i></a> can be defined
      <em>implicitly</em> with a size and shape keyword. The <a
      href="#ltshape"><i>&lt;shape></i></a> keyword is defined as:</p>
 
     <pre><code><dfn id=ltshape>&lt;shape></dfn> = circle | ellipse</code></pre>
 
-    <p>&lsquo;<code class=css>circle</code>&rsquo; indicates that the
-     ending-ellipse will be a circle with a constant radius. &lsquo;<code
-     class=css>ellipse</code>&rsquo; indicates that the gradient-shape will
-     be an axis-aligned ellipse (that is, its major and minor radiuses will
-     be horizontal and vertical, not necessarily in that order). If the <a
+    <p>&lsquo;<code class=css>circle</code>&rsquo; indicates that the <a
+     href="#ending-shape"><i>ending-shape</i></a> will be a circle with a
+     constant radius. &lsquo;<code class=css>ellipse</code>&rsquo; indicates
+     that the gradient-shape will be an axis-aligned ellipse (that is, its
+     major and minor radiuses will be horizontal and vertical, not
+     necessarily in that order). If the <a
      href="#ltshape"><i>&lt;shape></i></a> is omitted, it defaults to
      &lsquo;<code class=css>ellipse</code>&rsquo;.</p>
 
@@ -919,43 +925,48 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
 
      <dd>
       <p>If the <a href="#ltshape"><i>&lt;shape></i></a> is &lsquo;<code
-       class=css>circle</code>&rsquo;, the ending-shape must be a circle
-       sized so that it exactly meets the closest side of the box.</p>
+       class=css>circle</code>&rsquo;, the <a
+       href="#ending-shape"><i>ending-shape</i></a> must be a circle sized so
+       that it exactly meets the closest side of the box.</p>
 
       <p>If the <a href="#ltshape"><i>&lt;shape></i></a> is &lsquo;<code
-       class=css>ellipse</code>&rsquo;, the ending-shape must be an ellipse
-       sized so that it exactly meets the closest horizontal and vertical
-       sides of the box.</p>
+       class=css>ellipse</code>&rsquo;, the <a
+       href="#ending-shape"><i>ending-shape</i></a> must be an ellipse sized
+       so that it exactly meets the closest horizontal and vertical sides of
+       the box.</p>
 
      <dt><dfn id=radial-farthest-side>farthest-side</dfn>
 
      <dd>Same as &lsquo;<a href="#radial-closest-side"><code
-      class=css>closest-side</code></a>&rsquo;, except the ending-shape must
-      be sized based on the farthest side(s).
+      class=css>closest-side</code></a>&rsquo;, except the <a
+      href="#ending-shape"><i>ending-shape</i></a> must be sized based on the
+      farthest side(s).
 
      <dt><dfn id=radial-closest-corner>closest-corner</dfn>
 
      <dd>
       <p>If the <a href="#ltshape"><i>&lt;shape></i></a> is &lsquo;<code
-       class=css>circle</code>&rsquo;, the ending-shape must be a circle
-       sized so that it exactly meets the closest corner of the box.</p>
+       class=css>circle</code>&rsquo;, the <a
+       href="#ending-shape"><i>ending-shape</i></a> must be a circle sized so
+       that it exactly meets the closest corner of the box.</p>
 
       <p>If the <a href="#ltshape"><i>&lt;shape></i></a> is &lsquo;<code
-       class=css>ellipse</code>&rsquo;, the ending-shape must be an ellipse
-       with the same aspect-ratio it would have if &lsquo;<a
+       class=css>ellipse</code>&rsquo;, the <a
+       href="#ending-shape"><i>ending-shape</i></a> must be an ellipse with
+       the same aspect-ratio it would have if &lsquo;<a
        href="#radial-closest-side"><code
        class=css>closest-side</code></a>&rsquo; were specified, but sized so
        that it exactly meets the closest corner of the box.</p>
 
      <dt><dfn id=radial-farthest-corner>farthest-corner</dfn>
 
      <dd>Same as &lsquo;<a href="#radial-closest-corner"><code
-      class=css>closest-corner</code></a>&rsquo;, except the ending-shape
-      must be sized based on the farthest corner. If <a
-      href="#ltshape"><i>&lt;shape></i></a> is &lsquo;<code
-      class=css>ellipse</code>&rsquo;, the ending-shape must have the same
-      aspect ratio it would have if &lsquo;<a
-      href="#radial-farthest-side"><code
+      class=css>closest-corner</code></a>&rsquo;, except the <a
+      href="#ending-shape"><i>ending-shape</i></a> must be sized based on the
+      farthest corner. If <a href="#ltshape"><i>&lt;shape></i></a> is
+      &lsquo;<code class=css>ellipse</code>&rsquo;, the <a
+      href="#ending-shape"><i>ending-shape</i></a> must have the same aspect
+      ratio it would have if &lsquo;<a href="#radial-farthest-side"><code
       class=css>farthest-side</code></a>&rsquo; were specified.
 
      <dt><dfn id=radial-contain>contain</dfn>
@@ -974,12 +985,12 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
    <dt>Explicitly
 
    <dd>
-    <p>Alternately, the ending-shape's size and shape can be defined
-     explicitly, by providing two lengths or percentages. These measure the
-     length of the horizontal and vertical axises of the ellipse,
-     respectively. (The axis length is the length from the center of the
-     ellipse to the edge, similar to the radius of a circle, not the
-     diameter.)</p>
+    <p>Alternately, the <a href="#ending-shape"><i>ending-shape's</i></a>
+     size and shape can be defined explicitly, by providing two lengths or
+     percentages. These measure the length of the horizontal and vertical
+     axises of the ellipse, respectively. (The axis length is the length from
+     the center of the ellipse to the edge, similar to the radius of a
+     circle, not the diameter.)</p>
 
     <p>Percentages used in the first value are relative to the width of the
      box, while percentages used in the second value are relative to the
@@ -1001,23 +1012,26 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
    rendered as follows:
 
   <dl>
-   <dt>If the ending-shape has zero width (regardless of the height):
-
-   <dd>Render as if the ending-shape was an ellipse whose height was an
-    arbitrary very large number and whose width was an arbitrary very small
-    number greater than zero. <span class=note>This will make the gradient
-    look similar to a horizontal linear gradient that is mirrored across the
-    center of the ellipse. It also means that all color-stop positions
-    specified with a percentage resolve to &lsquo;<code
-    class=css>0px</code>&rsquo;.</span>
-
-   <dt>Otherwise, if the ending-shape has zero height:
-
-   <dd>Render as if the ending-shape was an ellipse whose width was an
-    arbitrary very large number and whose height was an arbitrary very small
-    number greater than zero. <span class=note>This will make the gradient
-    look like a solid-color image equal to the color of the last color-stop,
-    or equal to the average color of the gradient if it's repeating.</span>
+   <dt>If the <a href="#ending-shape"><i>ending-shape</i></a> has zero width
+    (regardless of the height):
+
+   <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+    an ellipse whose height was an arbitrary very large number and whose
+    width was an arbitrary very small number greater than zero. <span
+    class=note>This will make the gradient look similar to a horizontal
+    linear gradient that is mirrored across the center of the ellipse. It
+    also means that all color-stop positions specified with a percentage
+    resolve to &lsquo;<code class=css>0px</code>&rsquo;.</span>
+
+   <dt>Otherwise, if the <a href="#ending-shape"><i>ending-shape</i></a> has
+    zero height:
+
+   <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+    an ellipse whose width was an arbitrary very large number and whose
+    height was an arbitrary very small number greater than zero. <span
+    class=note>This will make the gradient look like a solid-color image
+    equal to the color of the last color-stop, or equal to the average color
+    of the gradient if it's repeating.</span>
   </dl>
 
   <p>If this argument is omitted, it defaults to &lsquo;<code
@@ -1028,21 +1042,28 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
    &lsquo;<code class=css>radial-gradient(10% 10%, red, blue)</code>&rsquo;),
    it must be interpreted as a position.
 
-  <p>Color-stops are placed on an imaginary line extending from the center of
-   the gradient toward the right, with the 0% point at the center of the
-   gradient, and 100% at the point where the line intersects the
-   ending-ellipse. The color of each ellipse is equal to the color of the
-   line where the ellipse intersects it. Locations past 100% can be
-   specified, and simply indicate a color-stop placed on the line a
-   corresponding distance from the center. Negative locations are allowed in
-   a radial gradient and work the same as in linear gradients with respect to
-   setting the color of the <a
-   href="#gradient-line"><i>gradient-line</i></a>, but colors before the
-   starting-point of the <a href="#gradient-line"><i>gradient-line</i></a>
-   are not displayed. For example, &lsquo;<code class=css>radial-gradient(red
-   -50px, yellow 100px)</code>&rsquo; would produce an elliptical gradient
-   which starts with a reddish-orange color in the center (the color 1/3
-   between red and yellow) and transitions to yellow at 100px wide.
+  <p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
+   similar to the <a href="#gradient-line"><i>gradient-line</i></a> of linear
+   gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is anchored
+   at the center of the gradient and extends toward the right. The 0%
+   location is at the start of the <a
+   href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is on
+   the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
+   intersects the <a href="#ending-shape"><i>ending-shape</i></a>. Negative
+   locations can be specified; though negative locations are never directly
+   consulted for rendering, they can affect the color of non-negative
+   locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
+   interpolation. For example, &lsquo;<code class=css>radial-gradient(red
+   -50px, yellow 100px)</code>&rsquo; produces an elliptical gradient that
+   starts with a reddish-orange color in the center (specifically, #f50) and
+   transitions to yellow. Locations greater than 100% simply specify a
+   location a correspondingly greater distance from the center of the
+   gradient.
+
+  <p>When drawing the concentric ellipses of the gradient, the color of each
+   ellipse is the color of the <a
+   href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
+   ellipse intersects the ray.
 
   <p class=issue>Brad suggests that we could drop the position/sizing
    arguments and just use background-position and background-size. This would
@@ -2283,6 +2304,12 @@ <h2 class=no-num id=index>Index</h2>
    <li>&lt;element-reference>, <a href="#ltelement-reference"
     title="&lt;element-reference>"><strong>4.3.</strong></a>
 
+   <li>ending-shape, <a href="#ending-shape"
+    title=ending-shape><strong>5.2.1.</strong></a>
+
+   <li>ending-shape's, <a href="#ending-shape"
+    title="ending-shape's"><strong>5.2.1.</strong></a>
+
    <li>farthest-corner, <a href="#radial-farthest-corner"
     title=farthest-corner><strong>5.2.1.</strong></a>
 
@@ -2299,6 +2326,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>gradient-line, <a href="#gradient-line"
     title=gradient-line><strong>5.1.1.</strong></a>
 
+   <li>gradient-ray, <a href="#gradient-ray"
+    title=gradient-ray><strong>5.2.1.</strong></a>
+
    <li>&lt;image>, <a href="#ltimage"
     title="&lt;image>"><strong>4.</strong></a>