W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-background Overview.html,1.249,1.250 Overview.src.html,1.261,1.262

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Nov 2011 16:53:23 +0000
To: public-css-commits@w3.org
Message-Id: <E1ROuLz-0004UQ-TW@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-background
In directory hutz:/tmp/cvs-serv17176

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Fixed a few lingering instances of <bg-position> to just <position>

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-background/Overview.html,v
retrieving revision 1.249
retrieving revision 1.250
diff -u -d -r1.249 -r1.250
--- Overview.html	28 Sep 2011 23:07:13 -0000	1.249
+++ Overview.html	11 Nov 2011 16:53:21 -0000	1.250
@@ -22,13 +22,13 @@
 
    <h1>CSS Backgrounds and Borders Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 September
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 November
     2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!-- <a href="http://www.w3.org/TR/2011/CR-css3-background-20110928">http://www.w3.org/TR/2011/ED-css3-background-20110928/</a> -->
+    <dd><!-- <a href="http://www.w3.org/TR/2011/CR-css3-background-20111111">http://www.w3.org/TR/2011/ED-css3-background-20111111/</a> -->
      <a
      href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
      
@@ -60,13 +60,13 @@
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> &copy; 2011 <a
-    href="http://www.w3.org/"><acronym title="World Wide Web
-    Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
-    href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
-    of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
-    title="European Research Consortium for Informatics and
-    Mathematics">ERCIM</acronym></a>, <a
-    href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
+    href="http://www.w3.org/"><acronym
+    title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
+    href="http://www.csail.mit.edu/"><acronym
+    title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
+    href="http://www.ercim.eu/"><acronym
+    title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+    <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -326,8 +326,9 @@
    background and border.)
 
   <div class=figure>
-   <p><img alt="Diagram of a typical box, showing the content, padding,
-    border and margin areas" src=box>
+   <p><img
+    alt="Diagram of a typical box, showing the   content, padding, border and margin areas"
+    src=box>
 
    <p class=caption>The various areas and edges of a typical box. (This
     diagram is explained in the CSS2.1 Box Model chapter <a href="#CSS21"
@@ -562,15 +563,15 @@
    drawn with the first specified one on top (closest to the user) and each
    subsequent image behind the previous one. Where
 
-  <pre
-   class=prod><dfn id=ltbg-imagegt><var>&lt;bg-image&gt;</var></dfn> = <a href="#ltimagegt"><var>&lt;image&gt;</var></a> | none</pre>
+  <pre class=prod><dfn id=ltbg-imagegt><var>&lt;bg-image&gt;</var></dfn> = <a
+   href="#ltimagegt"><var>&lt;image&gt;</var></a> | none</pre>
 
-  <p>A value of <dfn id=none title="''none''!!'background-image'
-   value">&lsquo;<code class=css>none</code>&rsquo;</dfn> counts as an image
-   layer but draws nothing. An image that is empty (zero width or zero
-   height), that fails to download, or that cannot be displayed (e.g.,
-   because it is not in a supported image format) likewise counts as a layer
-   but draws nothing.
+  <p>A value of <dfn id=none
+   title="''none''!!'background-image' value">&lsquo;<code
+   class=css>none</code>&rsquo;</dfn> counts as an image layer but draws
+   nothing. An image that is empty (zero width or zero height), that fails to
+   download, or that cannot be displayed (e.g., because it is not in a
+   supported image format) likewise counts as a layer but draws nothing.
 
   <p>See the section <a href="#layering">“Layering multiple background
    images”</a> for how &lsquo;<a href="#background-image"><code
@@ -670,8 +671,8 @@
    href="#the-background-size">sized</a> and <a
    href="#the-background-position">positioned</a>. Where
 
-  <pre
-   class=prod><dfn id=ltrepeat-stylegt><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
+  <pre class=prod><dfn
+   id=ltrepeat-stylegt><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
 
   <p>Single values for <a
    href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> have the
@@ -709,15 +710,17 @@
    second for the vertical one, as follows:
 
   <dl>
-   <dt><dfn id=repeat title="''repeat''!!'background-repeat'
-    value">&lsquo;<code class=css>repeat</code>&rsquo;</dfn>
+   <dt><dfn id=repeat
+    title="''repeat''!!'background-repeat' value">&lsquo;<code
+    class=css>repeat</code>&rsquo;</dfn>
 
    <dd> The image is repeated in this direction as often as needed to cover
     the <a class=index href="#background-painting-area"
     id=background-painting-area0>background painting area</a>.
 
-   <dt><dfn id=space title="''space''!!'background-repeat'
-    value">&lsquo;<code class=css>space</code>&rsquo;</dfn>
+   <dt><dfn id=space
+    title="''space''!!'background-repeat' value">&lsquo;<code
+    class=css>space</code>&rsquo;</dfn>
 
    <dd> The image is repeated as often as will fit within the <a class=index
     href="#background-positioning-area"
@@ -735,8 +738,9 @@
     class=property>background-position</code></a>&rsquo; determines its
     position in this direction.
 
-   <dt><dfn id=round title="''round''!!'background-repeat'
-    value">&lsquo;<code class=css>round</code>&rsquo;</dfn>
+   <dt><dfn id=round
+    title="''round''!!'background-repeat' value">&lsquo;<code
+    class=css>round</code>&rsquo;</dfn>
 
    <dd> The image is repeated as often as will fit within the <a class=index
     href="#background-positioning-area"
@@ -748,8 +752,9 @@
     painting area</a> is larger than the background positioning area, then
     the pattern repeats to fill the background painting area.
 
-   <dt><dfn id=no-repeat title="''no-repeat''!!'background-repeat'
-    value">&lsquo;<code class=css>no-repeat</code>&rsquo;</dfn>
+   <dt><dfn id=no-repeat
+    title="''no-repeat''!!'background-repeat' value">&lsquo;<code
+    class=css>no-repeat</code>&rsquo;</dfn>
 
    <dd> The image is placed once and not repeated in this direction.
   </dl>
@@ -770,8 +775,8 @@
 </pre>
 
    <div class=figure>
-    <p><img alt="A centered background image, with copies repeated up and
-     down the border, padding and content areas."
+    <p><img
+     alt="A centered background image, with   copies repeated up and down the border, padding and content   areas."
      src=bg-repeat><!--<SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A
   name="img-bg-repeat" href="images/longdesc/bg-repeat-desc.html"
   title="Long description for background pattern">[D]</A></SPAN>-->
@@ -866,8 +871,8 @@
    value is given as a comma-separated list of &lt;attachment&gt; keywords
    where
 
-  <pre
-   class=prod><dfn id=ltattachmentgt><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
+  <pre class=prod><dfn
+   id=ltattachmentgt><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
 
   <dl>
    <dt><dfn id=fixed0>fixed</dfn>
@@ -1104,29 +1109,33 @@
     position if one or two values are given, otherwise specifies the top edge
     as the origin for the next offset.
 
-   <dt><dfn id=right title="''right''!!'background-position'
-    value">&lsquo;<code class=css>right</code>&rsquo;</dfn>
+   <dt><dfn id=right
+    title="''right''!!'background-position' value">&lsquo;<code
+    class=css>right</code>&rsquo;</dfn>
 
    <dd>Equivalent to &lsquo;<code class=css>100%</code>&rsquo; for the
     horizontal position if one or two values are given, otherwise specifies
     the right edge as the origin for the next offset.
 
-   <dt><dfn id=bottom title="''bottom''!!'background-position'
-    value">&lsquo;<code class=css>bottom</code>&rsquo;</dfn>
+   <dt><dfn id=bottom
+    title="''bottom''!!'background-position' value">&lsquo;<code
+    class=css>bottom</code>&rsquo;</dfn>
 
    <dd>Equivalent to &lsquo;<code class=css>100%</code>&rsquo; for the
     vertical position if one or two values are given, otherwise specifies the
     bottom edge as the origin for the next offset.
 
-   <dt><dfn id=left title="''left''!!'background-position'
-    value">&lsquo;<code class=css>left</code>&rsquo;</dfn>
+   <dt><dfn id=left
+    title="''left''!!'background-position' value">&lsquo;<code
+    class=css>left</code>&rsquo;</dfn>
 
    <dd>Equivalent to &lsquo;<code class=css>0%</code>&rsquo; for the
     horizontal position if one or two values are given, otherwise specifies
     the left edge as the origin for the next offset.
 
-   <dt><dfn id=center title="''center''!!'background-position'
-    value">&lsquo;<code class=css>center</code>&rsquo;</dfn>
+   <dt><dfn id=center
+    title="''center''!!'background-position' value">&lsquo;<code
+    class=css>center</code>&rsquo;</dfn>
 
    <dd>Equivalent to &lsquo;<code class=css>50%</code>&rsquo; (&lsquo;<code
     class=css>left 50%</code>&rsquo;) for the horizontal position if the
@@ -1229,8 +1238,8 @@
   <p>Determines the <dfn id=background-painting-area>background painting
    area</dfn>. The syntax of the property is given with
 
-  <pre
-   class=prod><dfn id=ltboxgt><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
+  <pre class=prod><dfn
+   id=ltboxgt><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
 
   <p>Values have the following meanings:
 
@@ -1328,8 +1337,9 @@
    determine the background positioning area(s).
 
   <dl>
-   <dt><dfn id=padding-box0 title="''padding-box''!!'background-origin'
-    value"> &lsquo;<code class=css>padding-box</code>&rsquo;</dfn>
+   <dt><dfn id=padding-box0
+    title="''padding-box''!!'background-origin' value"> &lsquo;<code
+    class=css>padding-box</code>&rsquo;</dfn>
 
    <dd>The position is relative to the padding box. (For single boxes
     &lsquo;<code class=css>0 0</code>&rsquo; is the upper left corner of the
@@ -1424,8 +1434,8 @@
 
   <p>Specifies the size of the background images. Where
 
-  <pre
-   class=prod><dfn id=ltbg-sizegt><var>&lt;bg-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
+  <pre class=prod><dfn
+   id=ltbg-sizegt><var>&lt;bg-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
 
   <p>Values have the following meanings:
 
@@ -1664,11 +1674,22 @@
 
   <p>Where
 
-  <pre
-   class=prod><dfn id=ltbg-layergt><var>&lt;bg-layer&gt;</var></dfn> = <a href="#ltbg-imagegt"><var>&lt;bg-image&gt;</var></a> || <var>&lt;bg-position&gt;</var> [ / <a href="#ltbg-sizegt"><var>&lt;bg-size&gt;</var></a> ]? || <a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a href="#ltattachmentgt"><var>&lt;attachment&gt;</var></a> || <a href="#ltboxgt"><var>&lt;box&gt;</var></a>{1,2} </pre>
+  <pre class=prod><dfn id=ltbg-layergt><var>&lt;bg-layer&gt;</var></dfn> = <a
+   href="#ltbg-imagegt"><var>&lt;bg-image&gt;</var></a> || <a
+   href="#ltpositiongt"><var>&lt;position&gt;</var></a> [ / <a
+   href="#ltbg-sizegt"><var>&lt;bg-size&gt;</var></a> ]? || <a
+   href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a
+   href="#ltattachmentgt"><var>&lt;attachment&gt;</var></a> || <a
+   href="#ltboxgt"><var>&lt;box&gt;</var></a>{1,2} </pre>
 
-  <pre
-   class=prod><dfn id=ltfinal-bg-layergt><var>&lt;final-bg-layer&gt;</var></dfn> = <a href="#ltbg-imagegt"><var>&lt;bg-image&gt;</var></a> || <var>&lt;bg-position&gt;</var> [ / <a href="#ltbg-sizegt"><var>&lt;bg-size&gt;</var></a> ]? || <a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a href="#ltattachmentgt"><var>&lt;attachment&gt;</var></a> || <a href="#ltboxgt"><var>&lt;box&gt;</var></a>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
+  <pre class=prod><dfn
+   id=ltfinal-bg-layergt><var>&lt;final-bg-layer&gt;</var></dfn> = <a
+   href="#ltbg-imagegt"><var>&lt;bg-image&gt;</var></a> || <a
+   href="#ltpositiongt"><var>&lt;position&gt;</var></a> [ / <a
+   href="#ltbg-sizegt"><var>&lt;bg-size&gt;</var></a> ]? || <a
+   href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a
+   href="#ltattachmentgt"><var>&lt;attachment&gt;</var></a> || <a
+   href="#ltboxgt"><var>&lt;box&gt;</var></a>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
 
   <p class=note>Note that a color is permitted in <a
    href="#ltfinal-bg-layergt"><var>&lt;final-bg-layer&gt;</var></a>, but not
@@ -2088,8 +2109,8 @@
 
   <p>Where
 
-  <pre
-   class=prod><dfn id=ltborder-stylegt><var>&lt;border-style&gt;</var></dfn> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
+  <pre class=prod><dfn
+   id=ltborder-stylegt><var>&lt;border-style&gt;</var></dfn> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
 
   <p>Values have the following meanings:
 
@@ -2270,8 +2291,8 @@
 
   <p>These properties set the thickness of the border. Where
 
-  <pre
-   class=prod><dfn id=ltborder-widthgt><var>&lt;border-width&gt;</var></dfn> = <var>&lt;length&gt;</var> | thin | medium | thick</pre>
+  <pre class=prod><dfn
+   id=ltborder-widthgt><var>&lt;border-width&gt;</var></dfn> = <var>&lt;length&gt;</var> | thin | medium | thick</pre>
 
   <p>The <var>&lt;length&gt;</var> may not be negative. The lengths
    corresponding to &lsquo;<code class=css>thin</code>&rsquo;, &lsquo;<code
@@ -2773,8 +2794,9 @@
     2em). See borders B and C in the figure.
 
    <div class=figure id=reduced-radius>
-    <p><img alt="[image: rectangle with two tiny rounded corners and two very
-     large ones, on opposite corners]" src=corner-large-mix>
+    <p><img
+     alt="[image: rectangle with two tiny   rounded corners and two very large ones, on opposite corners]"
+     src=corner-large-mix>
 
     <p class=caption>These rounded corner might be the result of &lsquo;<code
      class=css>width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em
@@ -2867,11 +2889,8 @@
     corner effect:</p>
 
    <div class=figure>
-    <p><img alt="Diagram: The border image shows a wavy green border with
-     more exaggerated waves towards the corners, which are capped by a
-     disconnected green circle. Four cuts at 124px offsets from each side
-     divide the image into 124px-wide square corners, 124px-wide but thin
-     side slices, and a small center square."
+    <p><img
+     alt="Diagram: The       border image shows a wavy green border with more exaggerated       waves towards the corners, which are capped by a disconnected       green circle. Four cuts at 124px offsets from each side divide       the image into 124px-wide square corners, 124px-wide but thin       side slices, and a small center square."
      src=groovy-border-image-slice.png>
 
     <p class=caption>The &lsquo;<a href="#border-image-source"><code
@@ -2885,14 +2904,9 @@
     follows:</p>
 
    <div class=figure>
-    <p><img alt="Diagram: The image-less (fallback) rendering has a green
-     double border. The rendering with border-image shows the wavy green
-     border, with the waves getting longer as they reach the corners. The
-     corner tiles render as 124px-wide squares and the side tiles repeat a
-     whole number of times to fill the space in between. Because of the
-     gradual corner effects, the tiles extend deep into the padding area. The
-     whole border image effect is outset 31px, so that the troughs of the
-     waves align just outside the padding edge." src=border-image.png>
+    <p><img
+     alt="Diagram: The image-less (fallback)     rendering has a green double border. The rendering with border-image     shows the wavy green border, with the waves getting longer as they     reach the corners. The corner tiles render as 124px-wide squares and     the side tiles repeat a whole number of times to fill the space in     between. Because of the gradual corner effects, the tiles extend deep     into the padding area. The whole border image effect is outset 31px, so     that the troughs of the waves align just outside the padding edge."
+     src=border-image.png>
 
     <p class=caption>Diagram of all border-image properties and how they
      interact, and showing the rendering with and without the border-image in
@@ -3084,8 +3098,9 @@
    top and bottom values.
 
   <div class=figure>
-   <p><img alt="Diagram: two horizontal cuts and two vertical cuts through an
-    image" src=slice>
+   <p><img
+    alt="Diagram: two horizontal cuts and two   vertical cuts through an image"
+    src=slice>
 
    <p class=caption>Diagram illustrating the cuts corresponding to the value
     &lsquo;<code class=css>25% 30% 12% 20%</code>&rsquo;
@@ -3169,8 +3184,9 @@
    <dd>Numbers represent multiples of the corresponding computed <a
     href="#the-border-width">border-width</a>.
 
-   <dt><dfn id=auto0 title="''auto''!!'border-image-width'
-    value">&lsquo;<code class=css>auto</code>&rsquo;</dfn>
+   <dt><dfn id=auto0
+    title="''auto''!!'border-image-width' value">&lsquo;<code
+    class=css>auto</code>&rsquo;</dfn>
 
    <dd>If &lsquo;<code class=css>auto</code>&rsquo; is specified then the
     border image width is the intrinsic width or height (whichever is
@@ -3331,20 +3347,23 @@
 
    <dd>The image is stretched to fill the area.
 
-   <dt><dfn id=repeat0 title="''repeat''!!'border-image-repeat'
-    value">&lsquo;<code class=css>repeat</code>&rsquo;</dfn>
+   <dt><dfn id=repeat0
+    title="''repeat''!!'border-image-repeat' value">&lsquo;<code
+    class=css>repeat</code>&rsquo;</dfn>
 
    <dd>The image is tiled (repeated) to fill the area.
 
-   <dt><dfn id=round0 title="''round''!!'border-image-repeat'
-    value">&lsquo;<code class=css>round</code>&rsquo;</dfn>
+   <dt><dfn id=round0
+    title="''round''!!'border-image-repeat' value">&lsquo;<code
+    class=css>round</code>&rsquo;</dfn>
 
    <dd>The image is tiled (repeated) to fill the area. If it does not fill
     the area with a whole number of tiles, the image is rescaled so that it
     does.
 
-   <dt><dfn id=space0 title="''space''!!'border-image-repeat'
-    value">&lsquo;<code class=css>space</code>&rsquo;</dfn>
+   <dt><dfn id=space0
+    title="''space''!!'border-image-repeat' value">&lsquo;<code
+    class=css>space</code>&rsquo;</dfn>
 
    <dd>The image is tiled (repeated) to fill the area. If it does not fill
     the area with a whole number of tiles, the extra space is distributed
@@ -3643,10 +3662,9 @@
   </dl>
 
   <div class=figure>
-   <p><img alt="Illustration: (1) a single box cut in two in between two
-    lines of text by a page break and (2) two boxes, one before and one after
-    the page break, both with a border all around and their own background
-    image" src=box-break.png>
+   <p><img
+    alt="Illustration: (1) a single box cut in two in between   two lines of text by a page break and (2) two boxes, one before and   one after the page break, both with a border all around and their   own background image"
+    src=box-break.png>
 
    <p class=caption>Two possibilities for &lsquo;<a
     href="#box-decoration-break"><code
@@ -3720,7 +3738,9 @@
   <p>Where
 
   <pre class=prod>
-<dfn id=ltshadowgt><var>&lt;shadow&gt;</var></dfn> = inset? &amp;&amp; [ <var>&lt;length&gt;</var>{2,4} &amp;&amp; <a href="#ltcolorgt"><var>&lt;color&gt;</var></a>? ]</pre>
+<dfn
+   id=ltshadowgt><var>&lt;shadow&gt;</var></dfn> = inset? &amp;&amp; [ <var>&lt;length&gt;</var>{2,4} &amp;&amp; <a
+   href="#ltcolorgt"><var>&lt;color&gt;</var></a>? ]</pre>
 
   <p>The components of each <a
    href="#ltshadowgt"><var>&lt;shadow&gt;</var></a> are interpreted as
@@ -3805,8 +3825,9 @@
    <p>The example below demonstrates the effects of spread and blur on the
     shadow:</p>
 
-   <p class=figure> <img alt="An example of spread and blur on a box with two
-    round corners and two square ones" src=spread-blur.png></p>
+   <p class=figure> <img
+    alt="An example of spread and blur on a box with two round corners and two square ones"
+    src=spread-blur.png></p>
   </div>
 
   <p>The shadow effects are applied front-to-back: the first shadow is on top
@@ -3854,15 +3875,13 @@
 <!-- -->  10px 10px;<!--
    --></code></pre>
 
-      <td> <img alt="A round-cornered box with a light gray shadow the same
-       shape as the border box offset 10px to the right and 10px down from
-       directly underneath the box." height=175 src=shadow-outer-round.png
-       width=175>
+      <td> <img
+       alt="A round-cornered box with a light gray shadow the same shape                 as the border box offset 10px to the right and 10px down                 from directly underneath the box."
+       height=175 src=shadow-outer-round.png width=175>
 
-      <td> <img alt="A square-cornered box with a light gray shadow the same
-       shape as the border box offset 10px to the right and 10px down from
-       directly underneath the box." height=175 src=shadow-outer-square.png
-       width=175>
+      <td> <img
+       alt="A square-cornered box with a light gray shadow the same shape                 as the border box offset 10px to the right and 10px down                 from directly underneath the box."
+       height=175 src=shadow-outer-square.png width=175>
 
      <tr>
       <th>
@@ -3873,15 +3892,13 @@
 <!-- -->  inset<!--
    --></code></pre>
 
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the padding box filling 10px in from the top and left
-       edges (just inside the border)." height=175 src=shadow-inner-round.png
-       width=175>
+      <td> <img
+       alt="A round-cornered box with a light gray shadow the inverse shape                 of the padding box filling 10px in from the top and left edges                 (just inside the border)."
+       height=175 src=shadow-inner-round.png width=175>
 
-      <td> <img alt="A square-cornered box with a light gray shadow the
-       inverse shape of the padding box filling 10px in from the top and left
-       edges (just inside the border)." height=175
-       src=shadow-inner-square.png width=175>
+      <td> <img
+       alt="A square-cornered box with a light gray shadow the inverse shape                 of the padding box filling 10px in from the top and left edges                 (just inside the border)."
+       height=175 src=shadow-inner-square.png width=175>
 
      <tr>
       <th>
@@ -3892,17 +3909,13 @@
 <!-- -->  10px /* spread */<!--
    --></code></pre>
 
-      <td> <img alt="A round-cornered box with a light gray shadow the same
-       shape as the box but 20px taller and wider and offset so that the top
-       and left edges of the shadow are directly underneath the top and left
-       edges of the box." height=175 src=shadow-outer-spread-round.png
-       width=175>
+      <td> <img
+       alt="A round-cornered box with a light gray shadow the same shape                 as the box but 20px taller and wider and offset so that the                 top and left edges of the shadow are directly underneath the                 top and left edges of the box."
+       height=175 src=shadow-outer-spread-round.png width=175>
 
-      <td> <img alt="A square-cornered box with a light gray shadow the same
-       shape as the box but 20px taller and wider and offset so that the top
-       and left edges of the shadow are directly underneath the top and left
-       edges of the box." height=175 src=shadow-outer-spread-square.png
-       width=175>
+      <td> <img
+       alt="A square-cornered box with a light gray shadow the same shape                 as the box but 20px taller and wider and offset so that the                 top and left edges of the shadow are directly underneath the                 top and left edges of the box."
+       height=175 src=shadow-outer-spread-square.png width=175>
 
      <tr>
       <th>
@@ -3914,15 +3927,13 @@
 <!-- -->  inset<!--
    --></code></pre>
 
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the box but 20px narrower and shorter filling 20px in
-       from the top and left edges (just inside the border)." height=175
-       src=shadow-inner-spread-round.png width=175>
+      <td> <img
+       alt="A round-cornered box with a light gray shadow the inverse shape                 of the box but 20px narrower and shorter filling 20px in from                 the top and left edges (just inside the border)."
+       height=175 src=shadow-inner-spread-round.png width=175>
 
-      <td> <img alt="A round-cornered box with a light gray shadow the
-       inverse shape of the box but 20px narrower and shorter filling 20px in
-       from the top and left edges (just inside the border)." height=175
-       src=shadow-inner-spread-square.png width=175>
+      <td> <img
+       alt="A round-cornered box with a light gray shadow the inverse shape                 of the box but 20px narrower and shorter filling 20px in from                 the top and left edges (just inside the border)."
+       height=175 src=shadow-inner-spread-square.png width=175>
    </table>
   </div>
 
@@ -4845,8 +4856,8 @@
     href="#ltattachmentgt"
     title="&lt;attachment&gt;"><strong>3.5.</strong></a>
 
-   <li>authoring tool, <a href="#authoring-tool" title="authoring
-    tool"><strong>8.2.</strong></a>
+   <li>authoring tool, <a href="#authoring-tool"
+    title="authoring tool"><strong>8.2.</strong></a>
 
    <li>&lsquo;<code class=css>auto</code>&rsquo;
     <ul>
@@ -4856,8 +4867,8 @@
 
      <li>&lsquo;<a href="#border-image-width"><code
       class=property>border-image-width</code></a>&rsquo; value, <a
-      href="#auto0" title="''auto'', 'border-image-width'
-      value"><strong>6.3.</strong></a>
+      href="#auto0"
+      title="''auto'', 'border-image-width' value"><strong>6.3.</strong></a>
     </ul>
 
    <li>background, <a href="#background"
@@ -4880,25 +4891,31 @@
 
    <li>background painting area, <a href="#background-painting-area"
     title="background painting area"><strong>3.7.</strong></a>, <a
-    href="#background-painting-area0" title="background painting
-    area">3.4.</a>, <a href="#background-painting-area1" title="background
-    painting area">3.4.</a>, <a href="#background-painting-area2"
+    href="#background-painting-area0"
     title="background painting area">3.4.</a>, <a
-    href="#background-painting-area3" title="background painting
-    area">3.5.</a>, <a href="#background-painting-area4" title="background
-    painting area">3.11.</a>
+    href="#background-painting-area1"
+    title="background painting area">3.4.</a>, <a
+    href="#background-painting-area2"
+    title="background painting area">3.4.</a>, <a
+    href="#background-painting-area3"
+    title="background painting area">3.5.</a>, <a
+    href="#background-painting-area4"
+    title="background painting area">3.11.</a>
 
    <li>background-position, <a href="#background-position"
     title=background-position><strong>3.6.</strong></a>
 
    <li>background positioning area, <a href="#background-positioning-area"
     title="background positioning area"><strong>3.8.</strong></a>, <a
-    href="#background-positioning-area." title="background positioning
-    area.">3.4.</a>, <a href="#background-positioning-area.0"
+    href="#background-positioning-area."
+    title="background positioning area.">3.4.</a>, <a
+    href="#background-positioning-area.0"
     title="background positioning area.">3.9.</a>, <a
-    href="#background-positioning-area0" title="background positioning
-    area">3.4.</a>, <a href="#background-positioning-area1" title="background
-    positioning area">3.6.</a>, <a href="#background-positioning-area2"
+    href="#background-positioning-area0"
+    title="background positioning area">3.4.</a>, <a
+    href="#background-positioning-area1"
+    title="background positioning area">3.6.</a>, <a
+    href="#background-positioning-area2"
     title="background positioning area">7.1.</a>
 
    <li>background-repeat, <a href="#background-repeat"
@@ -4940,13 +4957,15 @@
     <ul>
      <li>&lsquo;<a href="#background-clip"><code
       class=property>background-clip</code></a>&rsquo; value, <a
-      href="#border-box" title="''border-box'', 'background-clip'
-      value"><strong>3.7.</strong></a>
+      href="#border-box"
+      title="''border-box'', 'background-clip' value"><strong>3.7.</strong></a>
+      
 
      <li>&lsquo;<a href="#background-origin"><code
       class=property>background-origin</code></a>&rsquo; value, <a
-      href="#border-box0" title="''border-box'', 'background-origin'
-      value"><strong>3.8.</strong></a>
+      href="#border-box0"
+      title="''border-box'', 'background-origin' value"><strong>3.8.</strong></a>
+      
     </ul>
 
    <li>border-color, <a href="#border-color"
@@ -4955,8 +4974,8 @@
    <li>border-image, <a href="#border-image"
     title=border-image><strong>6.7.</strong></a>
 
-   <li>border image area, <a href="#border-image-area" title="border image
-    area"><strong>6.4.</strong></a>
+   <li>border image area, <a href="#border-image-area"
+    title="border image area"><strong>6.4.</strong></a>
 
    <li>border-image-outset, <a href="#border-image-outset"
     title=border-image-outset><strong>6.4.</strong></a>
@@ -5036,8 +5055,9 @@
     <ul>
      <li>&lsquo;<a href="#background-position"><code
       class=property>background-position</code></a>&rsquo; value, <a
-      href="#bottom" title="''bottom'', 'background-position'
-      value"><strong>3.6.</strong></a>
+      href="#bottom"
+      title="''bottom'', 'background-position' value"><strong>3.6.</strong></a>
+      
     </ul>
 
    <li><a href="#ltboxgt"><var>&lt;box&gt;</var></a>, <a href="#ltboxgt"
@@ -5053,8 +5073,9 @@
     <ul>
      <li>&lsquo;<a href="#background-position"><code
       class=property>background-position</code></a>&rsquo; value, <a
-      href="#center" title="''center'', 'background-position'
-      value"><strong>3.6.</strong></a>
+      href="#center"
+      title="''center'', 'background-position' value"><strong>3.6.</strong></a>
+      
     </ul>
 
    <li>&lsquo;<code class=css>clone</code>&rsquo;, <a href="#clone"
@@ -5062,8 +5083,8 @@
 
    <li>color
     <ul>
-     <li>background, <a href="#background-color0" title="color,
-      background">3.2.</a>
+     <li>background, <a href="#background-color0"
+      title="color, background">3.2.</a>
     </ul>
 
    <li><a href="#ltcolorgt"><var>&lt;color&gt;</var></a>, <a
@@ -5077,8 +5098,9 @@
     <ul>
      <li>&lsquo;<a href="#background-clip"><code
       class=property>background-clip</code></a>&rsquo; value, <a
-      href="#content-box" title="''content-box'', 'background-clip'
-      value"><strong>3.7.</strong></a>
+      href="#content-box"
+      title="''content-box'', 'background-clip' value"><strong>3.7.</strong></a>
+      
     </ul>
 
    <li>&lsquo;<code class=css>cover</code>&rsquo;, <a href="#cover"
@@ -5130,8 +5152,9 @@
     <ul>
      <li>&lsquo;<a href="#background-position"><code
       class=property>background-position</code></a>&rsquo; value, <a
-      href="#left" title="''left'', 'background-position'
-      value"><strong>3.6.</strong></a>
+      href="#left"
+      title="''left'', 'background-position' value"><strong>3.6.</strong></a>
+      
     </ul>
 
    <li>local, <a href="#local0" title=local><strong>3.5.</strong></a>
@@ -5143,13 +5166,14 @@
     <ul>
      <li>&lsquo;<a href="#background-image"><code
       class=property>background-image</code></a>&rsquo; value, <a
-      href="#none" title="''none'', 'background-image'
-      value"><strong>3.3.</strong></a>
+      href="#none"
+      title="''none'', 'background-image' value"><strong>3.3.</strong></a>
 
      <li>&lsquo;<a href="#border-image-source"><code
       class=property>border-image-source</code></a>&rsquo; value, <a
-      href="#none1" title="''none'', 'border-image-source'
-      value"><strong>6.1.</strong></a>
+      href="#none1"
+      title="''none'', 'border-image-source' value"><strong>6.1.</strong></a>
+      
 
      <li>&lsquo;<a href="#border-style"><code
       class=property>border-style</code></a>&rsquo; value, <a href="#none0"
@@ -5160,8 +5184,9 @@
     <ul>
      <li>&lsquo;<a href="#background-repeat"><code
       class=property>background-repeat</code></a>&rsquo; value, <a
-      href="#no-repeat" title="''no-repeat'', 'background-repeat'
-      value"><strong>3.4.</strong></a>
+      href="#no-repeat"
+      title="''no-repeat'', 'background-repeat' value"><strong>3.4.</strong></a>
+      
     </ul>
 
    <li>&lsquo;<code class=css>outset</code>&rsquo;, <a href="#outset"
@@ -5171,13 +5196,15 @@
     <ul>
      <li>&lsquo;<a href="#background-clip"><code
       class=property>background-clip</code></a>&rsquo; value, <a
-      href="#padding-box" title="''padding-box'', 'background-clip'
-      value"><strong>3.7.</strong></a>
+      href="#padding-box"
+      title="''padding-box'', 'background-clip' value"><strong>3.7.</strong></a>
+      
 
      <li>&lsquo;<a href="#background-origin"><code
       class=property>background-origin</code></a>&rsquo; value, <a
-      href="#padding-box0" title="''padding-box'', 'background-origin'
-      value"><strong>3.8.</strong></a>
+      href="#padding-box0"
+      title="''padding-box'', 'background-origin' value"><strong>3.8.</strong></a>
+      
     </ul>
 
    <li><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>, <a
@@ -5190,13 +5217,15 @@
     <ul>
      <li>&lsquo;<a href="#background-repeat"><code
       class=property>background-repeat</code></a>&rsquo; value, <a
-      href="#repeat" title="''repeat'', 'background-repeat'
-      value"><strong>3.4.</strong></a>
+      href="#repeat"
+      title="''repeat'', 'background-repeat' value"><strong>3.4.</strong></a>
+      
 
      <li>&lsquo;<a href="#border-image-repeat"><code
       class=property>border-image-repeat</code></a>&rsquo; value, <a
-      href="#repeat0" title="''repeat'', 'border-image-repeat'
-      value"><strong>6.5.</strong></a>
+      href="#repeat0"
+      title="''repeat'', 'border-image-repeat' value"><strong>6.5.</strong></a>
+      
     </ul>
 
    <li><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>, <a
@@ -5216,21 +5245,23 @@
     <ul>
      <li>&lsquo;<a href="#background-position"><code
       class=property>background-position</code></a>&rsquo; value, <a
-      href="#right" title="''right'', 'background-position'
-      value"><strong>3.6.</strong></a>
+      href="#right"
+      title="''right'', 'background-position' value"><strong>3.6.</strong></a>
+      
     </ul>
 
    <li>&lsquo;<code class=css>round</code>&rsquo;
     <ul>
      <li>&lsquo;<a href="#background-repeat"><code
       class=property>background-repeat</code></a>&rsquo; value, <a
-      href="#round" title="''round'', 'background-repeat'
-      value"><strong>3.4.</strong></a>
+      href="#round"
+      title="''round'', 'background-repeat' value"><strong>3.4.</strong></a>
 
      <li>&lsquo;<a href="#border-image-repeat"><code
       class=property>border-image-repeat</code></a>&rsquo; value, <a
-      href="#round0" title="''round'', 'border-image-repeat'
-      value"><strong>6.5.</strong></a>
+      href="#round0"
+      title="''round'', 'border-image-repeat' value"><strong>6.5.</strong></a>
+      
     </ul>
 
    <li>scroll, <a href="#scroll0" title=scroll><strong>3.5.</strong></a>
@@ -5251,37 +5282,38 @@
     <ul>
      <li>&lsquo;<a href="#background-repeat"><code
       class=property>background-repeat</code></a>&rsquo; value, <a
-      href="#space" title="''space'', 'background-repeat'
-      value"><strong>3.4.</strong></a>
+      href="#space"
+      title="''space'', 'background-repeat' value"><strong>3.4.</strong></a>
 
      <li>&lsquo;<a href="#border-image-repeat"><code
       class=property>border-image-repeat</code></a>&rsquo; value, <a
-      href="#space0" title="''space'', 'border-image-repeat'
-      value"><strong>6.5.</strong></a>
+      href="#space0"
+      title="''space'', 'border-image-repeat' value"><strong>6.5.</strong></a>
+      
     </ul>
 
    <li>&lsquo;<code class=css>stretch</code>&rsquo;, <a href="#stretch"
     title="''stretch''"><strong>6.5.</strong></a>
 
-   <li>style sheet, <a href="#style-sheet" title="style
-    sheet"><strong>8.1.</strong></a>
+   <li>style sheet, <a href="#style-sheet"
+    title="style sheet"><strong>8.1.</strong></a>
     <ul>
-     <li>as conformance class, <a href="#style-sheet0" title="style sheet, as
-      conformance class"><strong>8.2.</strong></a>
+     <li>as conformance class, <a href="#style-sheet0"
+      title="style sheet, as conformance class"><strong>8.2.</strong></a>
     </ul>
 
    <li>&lsquo;<code class=css>top</code>&rsquo;
     <ul>
      <li>&lsquo;<a href="#background-position"><code
       class=property>background-position</code></a>&rsquo; value, <a
-      href="#top" title="''top'', 'background-position'
-      value"><strong>3.6.</strong></a>
+      href="#top"
+      title="''top'', 'background-position' value"><strong>3.6.</strong></a>
     </ul>
 
    <li>UA, <a href="#ua" title=UA><strong>8.1.</strong></a>
 
-   <li>User Agent, <a href="#user-agent" title="User
-    Agent"><strong>8.1.</strong></a>
+   <li>User Agent, <a href="#user-agent"
+    title="User Agent"><strong>8.1.</strong></a>
 
    <li>viewport, <a href="#viewport" title=viewport>3.5.</a>
   </ul>

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-background/Overview.src.html,v
retrieving revision 1.261
retrieving revision 1.262
diff -u -d -r1.261 -r1.262
--- Overview.src.html	28 Sep 2011 23:07:13 -0000	1.261
+++ Overview.src.html	11 Nov 2011 16:53:21 -0000	1.262
@@ -1152,9 +1152,9 @@
 
 <p>Where
 
-<pre class=prod><dfn><var>&lt;bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} </pre>
+<pre class=prod><dfn><var>&lt;bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} </pre>
 
-<pre class=prod><dfn><var>&lt;final-bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;bg-position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
+<pre class=prod><dfn><var>&lt;final-bg-layer&gt;</var></dfn> = <var>&lt;bg-image&gt;</var> || <var>&lt;position&gt;</var> [ / <var>&lt;bg-size&gt;</var> ]? || <var>&lt;repeat-style&gt;</var> || <var>&lt;attachment&gt;</var> || <var>&lt;box&gt;</var>{1,2} || <var>&lt;'background-color'&gt;</var></pre>
 
 <p class=note>Note that a color is permitted in
 <var>&lt;final-bg-layer&gt;</var>, but not in <var>&lt;bg-layer&gt;</var>.
Received on Friday, 11 November 2011 16:53:28 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 11 November 2011 16:53:29 GMT