Dang it, let's submit the actual generated copy.

Author: tabatkins

css3-images/Overview.html

@@ -134,7 +134,7 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
       notation</a>
 
      <li><a href="#image-notation"><span class=secno>4.2. </span> Image
-      Fallbacks: the &lsquo;<code class=css>image()</code>&rsquo;
+      Annotations: the &lsquo;<code class=css>image()</code>&rsquo;
       notation</a>
 
      <li><a href="#element-reference"><span class=secno>4.3. </span> Using
@@ -390,56 +390,73 @@ <h3 id=url><span class=secno>4.1. </span> Image References and Image
   </div>
   <!-- ====================================================================== -->
 
-  <h3 id=image-notation><span class=secno>4.2. </span> Image Fallbacks: the
+  <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: the
    &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
 
   <p>The &lsquo;<code class=css>image()</code>&rsquo; notation allows an
-   author to specify multiple images, each one a fallback for the previous.
-   The UA must use only the first image that it can load and display. The
-   syntax for &lsquo;<code class=css>image()</code>&rsquo; is defined as
+   author to tag an image with a few types of useful processing instructions
+   which can affect the rendering of the image. The author can specify the
+   desired resolution the image should be rendered at, declare the
+   directionality of an image so that it can be automatically be reversed if
+   used in text with a different directionality, or declare fallback images
+   to be used if the original image can't be decoded or is a type that the
+   browser doesn't recognize.
 
   <pre class=prod><dfn id=ltimage-list>&lt;image-list></dfn> = 
-image( [ &lt;image-decl&gt; , ]* [ &lt;image-decl&gt; | &lt;color> | &lt;element-reference> | &lt;image-combination> | &lt;gradient> ] )</pre>
+	image( [ &lt;image-decl> , ]* [ &lt;image-decl> | &lt;color> | &lt;image> ] )</pre>
 
-  <p>where &lt;image-decl&gt; is given by
+  <p>where &lt;image-decl> is given by:
 
   <pre class=prod><dfn id=ltimage-decl>&lt;image-decl></dfn> = 
-[ &lt;string&gt; | &lt;url-token&gt; ] [ snap? &amp;&amp; &lt;resolution&gt; ]?</pre>
-
-  <p>&lt;url-token&gt; is given as
-   <code>[!#$%&amp;*-~]|{nonascii}|{escape}</code> (i.e. the contents of
-   &lsquo;<code class=css>url()</code>&rsquo;) using the productions in the
-   <a href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">CSS2.1
-   tokenization</a>. <strong>The &lt;url-token&gt; must not contain unescaped
-   brackets, commas, white space characters, single quotes (') or double
-   quotes (&quot;); if it does the &lsquo;<code
-   class=css>image()</code>&rsquo; containing it is invalid.</strong>
-
-  <p>Each string or url-token represents the URI of an image. If a resolution
-   is given, then the image must be rendered at the specified resolution. If
-   the &lsquo;<code class=css>snap</code>&rsquo; keyword is also specified,
-   and the image is a raster image, then the image must be rendered at the
-   resolution closest to the specified resolution that would result in no
-   pixel rounding. <span class=issue>I don't think "no pixel rounding" is the
-   right terminology here... basically we want to avoid blurry images.</span>
-
-  <p>The final argument may be a color or generated image, to serve as an
-   ultimate fallback if none of the preceeding <a
-   href="#ltimage-decl"><i>&lt;image-decl></i></a>s can be used. If it is a
-   color, the <a href="#ltimage-list"><i>&lt;image-list></i></a> must
-   represent a single-color image of that color with no <a
-   href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
+	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? [ ltr | rtl ]?
+
+	</pre>
+
+  <p>Each <a href="#ltimage-decl"><i>&lt;image-decl></i></a> represents an
+   external image. If a &lt;string> is provided, it represents the same image
+   that it would if the the string were given to the &lsquo;<code
+   class=css>url()</code>&rsquo; function.
+
+  <p>If a &lt;resolution> is given, the image must be rendered at that
+   resolution. <span class=note>Recall that the default resolution of images
+   is &lsquo;<code class=css>1dppx</code>&rsquo;, so that one image pixel
+   corresponds to one CSS &lsquo;<code class=css>px</code>&rsquo;
+   unit.</span> If the &lsquo;<code class=css>snap</code>&rsquo; keyword is
+   also specified, and the specified resolution would make one image pixel
+   larger than one device pixel, the image must be rendered at the specified
+   resolution, rounded to the nearest value that would map one image pixel to
+   an integer number of device pixels; if the specified resolution would make
+   one image pixel smaller than one device pixel, the image must be rendered
+   at the specified resolution, rounded to the nearest value that would map
+   an integer number of image pixels to one device pixel.
+
+  <p>If a directional keyword (&lsquo;<code class=css>ltr</code>&rsquo; or
+   &lsquo;<code class=css>rtl</code>&rsquo;) is given, the image itself gains
+   that directionality. If the image is used in a property on an element with
+   opposite directionality, is must be rendered horizontally flipped (in the
+   image's own coordinate space).
+
+  <p>Multiple arguments can be given, in which case the function represents
+   the first &lt;image-decl> representing an image that the browser can
+   successfully load and display. The final argument can be a &lt;color> or
+   other type of &lt;image to serve as ultimate fallback if none of the
+   preceding &lt;image-decl>s can be used. If the final argument is a
+   &lt;color>, it represents a solid-color image of the given color with no
+   <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
 
   <div class=example>
-   <p>For example, the rule below would tell the UA to load &lsquo;<code
+   <p>The rule below would tell the UA to load &lsquo;<code
     class=css>wavy.svg</code>&rsquo; if it can; failing that to load
     &lsquo;<code class=css>wavy.png</code>&rsquo; and display it at 150dpi;
     failing that to display &lsquo;<code class=css>wavy.gif</code>&rsquo;;
     and finally, if none of the images can be loaded and displayed, to use
     the color &lsquo;<code class=css>blue</code>&rsquo; to create a
-    dimensionless background image.</p>
+    dimensionless background image. For example, the browser may not
+    understand how to render SVG images, the PNG may be malformed, and the
+    GIF may not exist on the server, so requesting it returns an HTML 404
+    page instead of an image.</p>
 
-   <pre>background-image: image(wavy.svg, 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
+   <pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
 
    <p>The &lsquo;<code class=property>background-image</code>&rsquo; property
     specifies that dimensionless images must stretch to cover the entire