Allow directional keyword and resolution in either order, apply flipping in inline dimension (not just horizontal), clean up fallback description, use rgba in example to show layering.

Author: fantasai

css3-images/Overview.html

@@ -134,8 +134,8 @@ <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
-      Annotations: the &lsquo;<code class=css>image()</code>&rsquo;
-      notation</a>
+      Annotations and Fallbacks: the &lsquo;<code
+      class=css>image()</code>&rsquo; notation</a>
 
      <li><a href="#element-reference"><span class=secno>4.3. </span> Using
       Elements as Images: the &lsquo;<code class=css>element()</code>&rsquo;
@@ -386,8 +386,8 @@ <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 Annotations: the
-   &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
+  <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
+   Fallbacks: the &lsquo;<code class=css>image()</code>&rsquo; notation</h3>
 
   <p>The &lsquo;<code class=css>image()</code>&rsquo; notation allows an
    author to tag an image with a few types of useful processing instructions
@@ -404,7 +404,7 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: the
   <p>where &lt;image-decl> is given by:
 
   <pre class=prod><dfn id=ltimage-decl>&lt;image-decl></dfn> = 
-	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? [ ltr | rtl ]?
+	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?
 
 	</pre>
 
@@ -429,16 +429,18 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: the
   <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>.
+   opposite directionality, is must be mirrored in the inline dimension when
+   rendered.
+
+  <p>Multiple arguments can be given separated by commas, 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>, <a href="#gradients">&lt;gradient></a>, or <a
+   href="#element-reference">&lt;element-reference></a>, which serves as the
+   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>The rule below would tell the UA to load &lsquo;<code
@@ -452,15 +454,16 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: 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(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
+   <pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", rgba(255,0,0,0.5));</pre>
 
    <p>The &lsquo;<code class=property>background-image</code>&rsquo; property
     specifies that dimensionless images must stretch to cover the entire
     background positioning area <a href="#CSS3BG"
     rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
-    specified images can be displayed the background will be painted blue. As
-    with any image, this fallback will be painted over the &lsquo;<code
-    class=property>background-color</code>&rsquo; (if any).</p>
+    specified images can be displayed the background will be painted
+    semi-transparent blue. As with any image, this fallback will be painted
+    over the &lsquo;<code class=property>background-color</code>&rsquo; (if
+    any).</p>
   </div>
   <!-- ====================================================================== -->
 

css3-images/Overview.src.html

@@ -194,7 +194,7 @@ <h3 id="url">
 <!-- ====================================================================== -->
 
 <h3 id="image-notation">
-Image Annotations: the ''image()'' notation</h3>
+Image Annotations and Fallbacks: the ''image()'' notation</h3>
 
 	<p>The ''image()'' notation allows an author to tag an image with a few types
 	of useful processing instructions which can affect the rendering of the image
@@ -210,7 +210,7 @@ <h3 id="image-notation">
 	<p>where &lt;image-decl> is given by:</p>
 
 	<pre class='prod'><dfn>&lt;image-decl></dfn> = 
-	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? [ ltr | rtl ]?
+	[ &lt;string> | &lt;url> ] [ snap? && &lt;resolution> ]? && [ ltr | rtl ]?
 
 	<p>Each <i>&lt;image-decl></i> represents an external image.  If a &lt;string>
 	is provided, it represents the same image that it would if the the string
@@ -229,13 +229,16 @@ <h3 id="image-notation">
 
 	<p>If a directional keyword (''ltr'' or ''rtl'') 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>
-
-	<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
+	with opposite directionality, is must be mirrored in the inline dimension
+	when rendered.</p>
+
+	<p>Multiple arguments can be given separated by commas, 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>,
+	<a href="#gradients">&lt;gradient></a>, or
+	<a href="#element-reference">&lt;element-reference></a>,
+	which serves as the 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 <i>intrinsic dimensions</i>.
 
@@ -249,13 +252,13 @@ <h3 id="image-notation">
 		exist on the server, so requesting it returns an HTML 404 page instead of 
 		an image.</p>
 
-		<pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", blue);</pre>
+		<pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", rgba(255,0,0,0.5));</pre>
 
 		<p>The 'background-image' property specifies that dimensionless images
 		must stretch to cover the entire background positioning area
 		[[CSS3BG]], so if none of the specified images can be displayed
-		the background will be painted blue. As with any image, this fallback
-		will be painted over the 'background-color' (if any).</p>
+		the background will be painted semi-transparent blue. As with any image,
+		this fallback will be painted over the 'background-color' (if any).</p>
 	</div>
 
 <!-- ====================================================================== -->