Fix errors in examples as reported in <http://lists.w3.org/Archives/Public/www-style/2011Jan/0276.html> and <http://lists.w3.org/Archives/Public/www-style/2011Jan/0408.html>

Author: fantasai

css3-background/Overview.html

@@ -22,12 +22,13 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 January 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 January
+    2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-background-20110108">http://www.w3.org/TR/2011/ED-css3-background-20110108</a>-->
+    <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-background-20110120">http://www.w3.org/TR/2011/ED-css3-background-20110120</a>-->
      <a
      href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
 
@@ -1261,8 +1262,10 @@ <h3 id=the-background-clip><span class=secno>3.7. </span>The &lsquo;<a
   </dl>
 
   <p class=note>Note that the root element has a different background
-   painting area. See <a href="#special-backgrounds"> “The backgrounds of
-   special elements.”</a>
+   painting area, and thus the &lsquo;<a href="#background-clip"><code
+   class=property>background-clip</code></a>&rsquo; property has no effect
+   when specified on it. See <a href="#special-backgrounds"> “The
+   backgrounds of special elements.”</a>
 
   <p class=note>Note that the background is always drawn <em>behind</em> the
    border, if any. See “Elaborate description of Stacking Contexts” in <a
@@ -1511,10 +1514,11 @@ <h3 id=the-background-size><span class=secno>3.9. </span>The &lsquo;<a
     background-image: url(flower.png) }
 </pre>
 
-   <p>The following example rounds the height of the image to 25%, down from
-    the specified value of 30%. At 30%, three images would fit entirely and a
-    fourth only partially. After rounding, four images fit. The width of the
-    image is 20% of the background area width and is not rounded.
+   <p>The following example rounds the height of the image to 33.̅​​3%,
+    up from the specified value of 30%. At 30%, three images would fit
+    entirely and a fourth only partially. After rounding, three images fit.
+    The width of the image is 20% of the background area width and is not
+    rounded.
 
    <pre>
 p {
@@ -1569,9 +1573,9 @@ <h3 id=the-background-size><span class=secno>3.9. </span>The &lsquo;<a
   background-size: 3em }             /* = '3em auto' */
 </pre>
 
-   <p>In the following example, the background is shown with a width of 3em
-    or slightly smaller, so that it fits a whole number of times in the width
-    of the background. The height is scaled proportionally to keep the
+   <p>In the following example, the background is shown with a width of
+    approximately 3em: scaled so that it fits a whole number of times in the
+    width of the background. The height is scaled proportionally to keep the
     original aspect ratio:
 
    <pre>
@@ -1593,9 +1597,11 @@ <h3 id=the-background-size><span class=secno>3.9. </span>The &lsquo;<a
 </pre>
 
    <p>In the following example, the background image is shown with a height
-    of 4em or slightly less, so that it fits a whole number of times in the
-    background height. The width is the width that correspond to a 4em height
-    at the original aspect ratio or slightly less:
+    of approximately 4em: scaled slightly so that it fits a whole number of
+    times in the background height. The width is the approximately the width
+    that correspond to a 4em height at the original aspect ratio: scaled
+    slightly so that it fits a whole number of times in the background width.
+    
 
    <pre>
 div {
@@ -1720,7 +1726,7 @@ <h3 id=the-background><span class=secno>3.10. </span>The &lsquo;<a
 
    <pre>
 body { background: red }
-p { background: 40% url("chess.png") / 10em gray
+p { background: url("chess.png") 40% / 10em gray
        round fixed border-box; }
 </pre>
 
@@ -1760,7 +1766,7 @@ <h3 id=the-background><span class=secno>3.10. </span>The &lsquo;<a
     full width of the element:
 
    <pre>
-E { background: #CCC top left url("metal.jpg") / 100% auto no-repeat}
+E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
 </pre>
   </div>
 

css3-background/Overview.src.html

@@ -1025,9 +1025,9 @@ <h3 id="the-background-size">The 'background-size' property</h3>
     background-image: url(flower.png) }
 </pre>
 
-<p>The following example rounds the height of the image to 25%, down
+<p>The following example rounds the height of the image to 33.̅​​3%, up
 from the specified value of 30%. At 30%, three images would fit
-entirely and a fourth only partially. After rounding, four images
+entirely and a fourth only partially. After rounding, three images
 fit. The width of the image is 20% of the background area width and is
 not rounded.
 
@@ -1081,7 +1081,7 @@ <h3 id="the-background-size">The 'background-size' property</h3>
 </pre>
 
 <p>In the following example, the background is shown with a width of
-3em or slightly smaller, so that it fits a whole number of times in
+approximately 3em: scaled so that it fits a whole number of times in
 the width of the background. The height is scaled proportionally to
 keep the original aspect ratio:
 
@@ -1102,10 +1102,13 @@ <h3 id="the-background-size">The 'background-size' property</h3>
   background-repeat: repeat round;
   background-size: 3em auto }
 </pre>
+
 <p>In the following example, the background image is shown with a
-height of 4em or slightly less, so that it fits a whole number of
-times in the background height. The width is the width that correspond
-to a 4em height at the original aspect ratio or slightly less:
+height of approximately 4em: scaled slightly so that it fits a whole
+number of times in the background height. The width is the approximately
+the width that correspond to a 4em height at the original aspect ratio:
+scaled slightly so that it fits a whole number of times in the background
+width.
 
 <pre>
 div {
@@ -1192,7 +1195,7 @@ <h3 id="the-background">The 'background' shorthand property</h3>
 
 <pre>
 body { background: red }
-p { background: 40% url("chess.png") / 10em gray
+p { background: url("chess.png") 40% / 10em gray
        round fixed border-box; }
 </pre>
 
@@ -1232,7 +1235,7 @@ <h3 id="the-background">The 'background' shorthand property</h3>
 the full width of the element:
 
 <pre>
-E { background: #CCC top left url("metal.jpg") / 100% auto no-repeat}
+E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
 </pre>
 </div>