Fix the r-g examples to use the new syntax.

Author: tabatkins

css3-images/Overview.html

@@ -1224,11 +1224,12 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>4.2.4.
    and 100px tall.
 
   <div class=example>
-   <p>These examples demonstrate the basic syntax for radial gradients:</p>
+   <p>These examples demonstrate different ways to write the basic syntax for
+    radial gradients:</p>
 
    <pre><code>radial-gradient(yellow, green);
-radial-gradient(center, ellipse cover, yellow 0%, green 100%);
-radial-gradient(50% 50%, farthest-corner, yellow, green);</code></pre>
+radial-gradient(ellipse at center, yellow 0%, green 100%);
+radial-gradient(farthest-corner at 50% 50%, yellow, green);</code></pre>
 
    <p><img alt="" src=radial1.png></p>
 
@@ -1245,22 +1246,22 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>4.2.4.
    <p>This image shows a gradient originating from somewhere other than the
     center of the box:</p>
 
-   <pre><code>radial-gradient(bottom left, farthest-side, red, yellow 50px, green);</code></pre>
+   <pre><code>radial-gradient(farthest-side at bottom left, red, yellow 50px, green);</code></pre>
 
    <p><img alt="" src=radial4.png></p>
   </div>
 
   <div class=example>
-   <p>Here we illustrate a &lsquo;<code class=property>contain</code>&rsquo;
-    gradient.</p>
+   <p>Here we illustrate a &lsquo;<code
+    class=property>closest-side</code>&rsquo; gradient.</p>
 
-   <pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 30px, red, yellow, green);</code></pre>
+   <pre><code>radial-gradient(closest-side at 20px 30px, red, yellow, green);
+radial-gradient(20px 30px at 20px 30px, red, yellow, green);</code></pre>
 
    <p><img alt="" src=radial6.png></p>
 
-   <pre><code>radial-gradient(20px 30px, circle contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 20px, red, yellow, green);</code></pre>
+   <pre><code>radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
+radial-gradient(20px 20px at 20px 30px, red, yellow, green);</code></pre>
 
    <p><img alt="" src=radial7.png></p>
   </div>
@@ -1300,7 +1301,7 @@ <h3 id=repeating-gradients><span class=secno>4.3. </span> Repeating
 
    <p><img alt="" src=repeating2.png></p>
 
-   <pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
+   <pre><code>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
 
    <p><img alt="" src=repeating3.png></p>
   </div>

css3-images/Overview.src.html

@@ -751,11 +751,11 @@ <h4 class='no-toc' id='radial-gradient-examples'>
 	and 100px tall.</p>
 
 	<div class=example>	
-		<p>These examples demonstrate the basic syntax for radial gradients:</p>
+		<p>These examples demonstrate different ways to write the basic syntax for radial gradients:</p>
 
 		<pre><code>radial-gradient(yellow, green);
-radial-gradient(center, ellipse cover, yellow 0%, green 100%);
-radial-gradient(50% 50%, farthest-corner, yellow, green);</code></pre>
+radial-gradient(ellipse at center, yellow 0%, green 100%);
+radial-gradient(farthest-corner at 50% 50%, yellow, green);</code></pre>
 		<p><img src="radial1.png" alt="" ></p>
 
 		<pre><code>radial-gradient(circle, yellow, green);</code></pre>
@@ -768,19 +768,19 @@ <h4 class='no-toc' id='radial-gradient-examples'>
 	<div class=example>	
 		<p>This image shows a gradient originating from somewhere other than the center of the box:</p>
 
-		<pre><code>radial-gradient(bottom left, farthest-side, red, yellow 50px, green);</code></pre>
+		<pre><code>radial-gradient(farthest-side at bottom left, red, yellow 50px, green);</code></pre>
 		<p><img src="radial4.png" alt="" ></p>
 	</div>
 
 	<div class=example>	
-		<p>Here we illustrate a 'contain' gradient.</p>
+		<p>Here we illustrate a 'closest-side' gradient.</p>
 
-		<pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 30px, red, yellow, green);</code></pre>
+		<pre><code>radial-gradient(closest-side at 20px 30px, red, yellow, green);
+radial-gradient(20px 30px at 20px 30px, red, yellow, green);</code></pre>
 		<p><img src="radial6.png" alt="" ></p>
 
-		<pre><code>radial-gradient(20px 30px, circle contain, red, yellow, green);
-radial-gradient(20px 30px, 20px 20px, red, yellow, green);</code></pre>
+		<pre><code>radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
+radial-gradient(20px 20px at 20px 30px, red, yellow, green);</code></pre>
 		<p><img src="radial7.png" alt="" ></p>
 	</div>
 
@@ -813,7 +813,7 @@ <h3 id='repeating-gradients'>
 		<pre><code>repeating-radial-gradient(red, blue 20px, red 40px)</code></pre>
 		<p><img src="repeating2.png" alt=""></p>
 
-		<pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
+		<pre><code>repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
 		<p><img src="repeating3.png" alt=""></p>
 		</div>