- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 05 May 2011 23:43:04 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv14162
Modified Files:
Overview.html Overview.src.html
Log Message:
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.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.82
retrieving revision 1.83
diff -u -d -r1.82 -r1.83
--- Overview.html 5 May 2011 23:30:34 -0000 1.82
+++ Overview.html 5 May 2011 23:43:02 -0000 1.83
@@ -134,8 +134,8 @@
notation</a>
<li><a href="#image-notation"><span class=secno>4.2. </span> Image
- Annotations: the ‘<code class=css>image()</code>’
- notation</a>
+ Annotations and Fallbacks: the ‘<code
+ class=css>image()</code>’ notation</a>
<li><a href="#element-reference"><span class=secno>4.3. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
@@ -386,8 +386,8 @@
</div>
<!-- ====================================================================== -->
- <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations: the
- ‘<code class=css>image()</code>’ notation</h3>
+ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
+ Fallbacks: the ‘<code class=css>image()</code>’ notation</h3>
<p>The ‘<code class=css>image()</code>’ notation allows an
author to tag an image with a few types of useful processing instructions
@@ -404,7 +404,7 @@
<p>where <image-decl> is given by:
<pre class=prod><dfn id=ltimage-decl><image-decl></dfn> =
- [ <string> | <url> ] [ snap? && <resolution> ]? [ ltr | rtl ]?
+ [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?
</pre>
@@ -429,16 +429,18 @@
<p>If a directional keyword (‘<code class=css>ltr</code>’ or
‘<code class=css>rtl</code>’) 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).
+ opposite directionality, is must be mirrored in the inline dimension when
+ rendered.
- <p>Multiple arguments can be given, in which case the function represents
- the first <image-decl> representing an image that the browser can
- successfully load and display. The final argument can be a <color> or
- other type of <image to serve as ultimate fallback if none of the
- preceding <image-decl>s can be used. If the final argument is a
- <color>, it represents a solid-color image of the given color with no
- <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
+ <p>Multiple arguments can be given separated by commas, in which case the
+ function represents the first <image-decl> representing an image that
+ the browser can successfully load and display. The final argument can be a
+ <color>, <a href="#gradients"><gradient></a>, or <a
+ href="#element-reference"><element-reference></a>, which serves as the
+ ultimate fallback if none of the preceding <image-decl>s can be used.
+ If the final argument is a <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 ‘<code
@@ -452,15 +454,16 @@
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 ‘<code class=property>background-image</code>’ 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 ‘<code
- class=property>background-color</code>’ (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 ‘<code class=property>background-color</code>’ (if
+ any).</p>
</div>
<!-- ====================================================================== -->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.85
retrieving revision 1.86
diff -u -d -r1.85 -r1.86
--- Overview.src.html 5 May 2011 23:30:34 -0000 1.85
+++ Overview.src.html 5 May 2011 23:43:02 -0000 1.86
@@ -194,7 +194,7 @@
<!-- ====================================================================== -->
<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 @@
<p>where <image-decl> is given by:</p>
<pre class='prod'><dfn><image-decl></dfn> =
- [ <string> | <url> ] [ snap? && <resolution> ]? [ ltr | rtl ]?
+ [ <string> | <url> ] [ snap? && <resolution> ]? && [ ltr | rtl ]?
<p>Each <i><image-decl></i> represents an external image. If a <string>
is provided, it represents the same image that it would if the the string
@@ -229,13 +229,16 @@
<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>
+ with opposite directionality, is must be mirrored in the inline dimension
+ when rendered.</p>
- <p>Multiple arguments can be given, in which case the function represents
- the first <image-decl> representing an image that the browser can successfully
- load and display. The final argument can be a <color> or other type of
- <image to serve as ultimate fallback if none of the preceding <image-decl>s
+ <p>Multiple arguments can be given separated by commas, in which case the
+ function represents the first <image-decl> representing an image that
+ the browser can successfully load and display.
+ The final argument can be a <color>,
+ <a href="#gradients"><gradient></a>, or
+ <a href="#element-reference"><element-reference></a>,
+ which serves as the ultimate fallback if none of the preceding <image-decl>s
can be used. If the final argument is a <color>, it represents a solid-color
image of the given color with no <i>intrinsic dimensions</i>.
@@ -249,13 +252,13 @@
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>
<!-- ====================================================================== -->
Received on Thursday, 5 May 2011 23:43:06 UTC