Editorial tweak to magic corner linear-gradient() definition.

--HG--
extra : rebase_source : 5ecd5155ae257bcc36e4aeb70e8eccd41d5c9200

Author: tabatkins

css3-images/Overview.html

@@ -16,14 +16,14 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 March 2012</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 24 April 2012</h2>
 
    <dl>
     <dt>This Version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
-     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120329/">http://www.w3.org/TR/2012/WD-css3-images-20120329/</a>-->
+     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120424/">http://www.w3.org/TR/2012/WD-css3-images-20120424/</a>-->
 
 
     <dt>Latest Version:
@@ -967,13 +967,14 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
      class=css>180deg</code>&rsquo;, or &lsquo;<code
      class=css>270deg</code>&rsquo;, respectively.</p>
 
-    <p>If the argument instead specifies a corner of the box such as
-     &lsquo;<code class=css>to top left</code>&rsquo;, the gradient line must
-     be angled such that it points into the same quadrant as the specified
-     corner, and a line drawn perpendicular to the <a
-     href="#gradient-line"><i>gradient line</i></a> through the center of the
-     <a href="#gradient-box"><i>gradient box</i></a> intersects the two
-     neighboring corners.</p>
+    <p> If the argument instead specifies a corner of the box such as
+     &lsquo;<code class=css>to top left</code>&rsquo;, the <a
+     href="#gradient-line"><i>gradient line</i></a> must be angled such that
+     it points into the same quadrant as the specified corner, and is
+     perpendicular to a line intersecting the two neighboring corners of the
+     <a href="#gradient-box"><i>gradient box</i></a>. <span class=note>This
+     causes a color-stop at 50% to intersect the two neighboring corners (see
+     <a href="#corner-gradient-example">example</a>).</span>
   </dl>
 
   <p>Starting from the center of the <a href="#gradient-box"><i>gradient
@@ -1066,7 +1067,7 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
    <p><img alt="" src=linear4.png></p>
   </div>
 
-  <div class=example>
+  <div class=example id=corner-gradient-example>
    <p>This demonstrates* a corner-to-corner gradient specified with keywords.
     Note how the gradient is red and blue exactly in the bottom-left and
     top-right corners, respectively, exactly like the second example.

css3-images/Overview.src.html

@@ -591,7 +591,11 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
 		<dd>
 			<p>If the argument is ''to top'', ''to right'', ''to bottom'', or ''to left'', the angle of the <i>gradient line</i> is ''0deg'', ''90deg'', ''180deg'', or ''270deg'', respectively.</p>
 
-			<p>If the argument instead specifies a corner of the box such as ''to top left'', the gradient line must be angled such that it points into the same quadrant as the specified corner, and a line drawn perpendicular to the <i>gradient line</i> through the center of the <i>gradient box</i> intersects the two neighboring corners.</p>
+			<p>
+				If the argument instead specifies a corner of the box such as ''to top left'', 
+				the <i>gradient line</i> must be angled such that it points into the same quadrant as the specified corner, 
+				and is perpendicular to a line intersecting the two neighboring corners of the <i>gradient box</i>.
+				<span class='note'>This causes a color-stop at 50% to intersect the two neighboring corners (see <a href='#corner-gradient-example'>example</a>).</span>
 		</dd>
 	</dl>
 
@@ -662,7 +666,7 @@ <h4 class='no-toc' id='linear-gradient-examples'>
 		<p><img src="linear4.png" alt="" ></p>
 	</div>
 
-	<div class=example>
+	<div class=example id='corner-gradient-example'>
 		<p>This demonstrates* a corner-to-corner gradient specified with keywords.  Note how the gradient is red and blue exactly in the bottom-left and top-right corners, respectively, exactly like the second example.  Additionally, the angle of the gradient is automatically computed so that the color at 50% (in this case, white) stretches across the top-left and bottom-right corners.</p>
 
 		<pre><code>linear-gradient(to top right, red, white, blue)</code></pre>