- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 01:17:18 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv21934
Modified Files:
Overview.html Overview.src.html
Log Message:
Change element() to produce an 'invalid image' in some cases, make image() explicitly use the concept of 'invalid image' for its fallback mechanism. While I'm here, actually define what happens when all the images in image() are invalid.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.299
retrieving revision 1.300
diff -u -d -r1.299 -r1.300
--- Overview.html 28 Feb 2012 00:13:59 -0000 1.299
+++ Overview.html 28 Feb 2012 01:17:16 -0000 1.300
@@ -498,8 +498,8 @@
<p>If a URL in the list uses a fragment identifier syntax that the
implementation does not understand, or which the implementation does not
- consider valid for that type of image, the image must be treated as
- invalid.
+ consider valid for that type of image, the URL must be treated as
+ representing an <a href="#invalid-image"><i>invalid image</i></a>.
<p>The ‘<code class=css>image()</code>’ notation is defined as:
@@ -507,23 +507,34 @@
<pre class=prod><dfn
id=image-list-type><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
<dfn
- id=image-decl-type><image-decl></dfn> = <string> [ ltr | rtl ]?</pre>
+ id=image-decl-type><image-decl></dfn> = [ <image> | <string> ] [ ltr | rtl ]?</pre>
<p>Each <code><string></code> represents a <a
href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>. As usual for
URLs in CSS, each is resolved to an absolute URL (as described in Values
& Units) when ‘<code class=css>image()</code>’ appears in
- the computed value of a property.
+ the computed value of a property. If the UA cannot download, parse, or
+ otherwise successfully display the contents at the URL as an image, it
+ must be treated as an <a href="#invalid-image"><i>invalid image</i></a>.
<p>Multiple arguments can be given separated by commas, in which case the
- function represents the first <string> representing an image that the
- browser can successfully load and display. The final argument can specify
- a <color> to serve as an ultimate fallback; this can be used, e.g. for
- ‘<code class=property>background-image</code>’, to ensure
- adequate contrast 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>.
+ function represents the first ‘<a href="#image-type"><code
+ class=css><image></code></a>’ that's not an <a
+ href="#invalid-image"><i>invalid image</i></a>. The final argument can
+ specify a ‘<code class=css><color></code>’ to serve as an
+ ultimate fallback; this can be used, e.g. for ‘<code
+ class=property>background-image</code>’, to ensure adequate contrast
+ if none of the preceding ‘<a href="#image-decl-type"><code
+ class=css><image-decl>s</code></a>’ can be used. If the final
+ argument is a ‘<code class=css><color></code>’, it
+ represents a solid-color image of the given color with no <a
+ href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. If all of
+ the provided ‘<a href="#image-decl-type"><code
+ class=css><image-decl>s</code></a>’ are <a
+ href="#invalid-image"><i>invalid images</i></a> and a fallback color was
+ not provided as the last argument, the entire ‘<code
+ class=css>image()</code>’ function must be treated as an <a
+ href="#invalid-image"><i>invalid image</i></a>.
<div class=example>
<p>The rule below would tell the UA to load ‘<code
@@ -591,10 +602,12 @@
<pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
</div>
- <p>Along with each URL, the author may specify a directionality, similar to
- adding a <code>dir</code> attribute to an element in HTML. The image
- represented by the function takes on the directionality of the used URL.
- If a directional image is used on or in an element with opposite <a
+ <p>Along with each ‘<a href="#image-decl-type"><code
+ class=css><image-decl></code></a>’, the author may specify a
+ directionality, similar to adding a <code>dir</code> attribute to an
+ element in HTML. The image represented by the function takes on the
+ directionality of the used URL. If a directional image is used on or in an
+ element with opposite <a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>,
the image must be flipped in the inline direction (as if it was
transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is
@@ -708,8 +721,8 @@
<dl>
<dt>The function doesn't reference an element
- <dd>The function represents a solid-color transparent-black image with no
- intrinsic dimensions.
+ <dd>The function represents an <a href="#invalid-image"><i>invalid
+ image</i></a>.
<dt>The function references an <a href="#element-not-rendered"><i
title=element-not-rendered>element that is not rendered</i></a>, but
@@ -769,8 +782,8 @@
element
<dd>
- <p>The function represents a solid-color transparent-black image with no
- intrinsic dimensions.</p>
+ <p>The function represents an <a href="#invalid-image"><i>invalid
+ image</i></a>.</p>
<div class=example>
<p>For example, all of the following ‘<code
@@ -856,6 +869,13 @@
example, in SVG, any descendant of a <code><defs></code> element is
considered to be not rendered.
+ <p>An <dfn id=invalid-image title="invalid image|invalid images">invalid
+ image</dfn> is rendered as a solid-color ‘<code
+ class=css>rgba(0,0,0,0)</code>’ image with no intrinsic dimensions.
+ However, <a href="#invalid-image"><i>invalid images</i></a> have special
+ behavior in some contexts, such as the ‘<code
+ class=css>image()</code>’ notation.
+
<h4 class=no-num id=paint-sources> Paint Sources</h4>
<p>Host languages may define that some elements provide a <dfn
@@ -2870,6 +2890,12 @@
<li>intrinsic width, <a href="#intrinsic-width"
title="intrinsic width"><strong>5.1.</strong></a>
+ <li>invalid image, <a href="#invalid-image"
+ title="invalid image"><strong>3.3.</strong></a>
+
+ <li>invalid images, <a href="#invalid-image"
+ title="invalid images"><strong>3.3.</strong></a>
+
<li><length>, <a href="#radial-size-circle"
title="<length>"><strong>4.2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.309
retrieving revision 1.310
diff -u -d -r1.309 -r1.310
--- Overview.src.html 28 Feb 2012 00:13:59 -0000 1.309
+++ Overview.src.html 28 Feb 2012 01:17:16 -0000 1.310
@@ -222,16 +222,16 @@
the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
form of media fragment identifiers for images. [[!MEDIA-FRAGS]]</p>
- <p>If a URL in the list uses a fragment identifier syntax that the implementation does not understand, or which the implementation does not consider valid for that type of image, the image must be treated as invalid.</p>
+ <p>If a URL in the list uses a fragment identifier syntax that the implementation does not understand, or which the implementation does not consider valid for that type of image, the URL must be treated as representing an <i>invalid image</i>.</p>
<p>The ''image()'' notation is defined as:
<pre class='prod'><dfn id='image-list-type'><image-list></dfn> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
-<dfn id='image-decl-type'><image-decl></dfn> = <string> [ ltr | rtl ]?</pre>
+<dfn id='image-decl-type'><image-decl></dfn> = [ <image> | <string> ] [ ltr | rtl ]?</pre>
- <p>Each <code><string></code> represents a <a href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>. As usual for URLs in CSS, each is resolved to an absolute URL (as described in Values & Units) when ''image()'' appears in the computed value of a property.</p>
+ <p>Each <code><string></code> represents a <a href="http://dev.w3.org/csswg/css3-values/#urls">URL</a>. As usual for URLs in CSS, each is resolved to an absolute URL (as described in Values & Units) when ''image()'' appears in the computed value of a property. If the UA cannot download, parse, or otherwise successfully display the contents at the URL as an image, it must be treated as an <i>invalid image</i>.</p>
- <p>Multiple arguments can be given separated by commas, in which case the function represents the first <string> representing an image that the browser can successfully load and display. The final argument can specify a <color> to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast 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>.
+ <p>Multiple arguments can be given separated by commas, in which case the function represents the first ''<image>'' that's not an <i>invalid image</i>. The final argument can specify a ''<color>'' to serve as an ultimate fallback; this can be used, e.g. for 'background-image', to ensure adequate contrast 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>. If all of the provided ''<image-decl>s'' are <i>invalid images</i> and a fallback color was not provided as the last argument, the entire ''image()'' function must be treated as an <i>invalid image</i>.
<div class="example">
<p>The rule below would tell the UA to load ''wavy.svg'' if it can; failing that to load ''wavy.png''; failing that to display ''wavy.gif''. For example, the browser might not understand how to render SVG images, and the PNG may be temporarily 404 (returning an HTML 404 page, which the browser can't decode as an image) due to a server move, so the GIF is used until one of the previous problems corrects itself.</p>
@@ -271,7 +271,7 @@
<pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
</div>
- <p>Along with each URL, the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
+ <p>Along with each ''<image-decl>'', the author may specify a directionality, similar to adding a <code>dir</code> attribute to an element in HTML. The image represented by the function takes on the directionality of the used URL. If a directional image is used on or in an element with opposite <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction">direction</a>, the image must be flipped in the inline direction (as if it was transformed by, e.g., <code>scaleX(-1)</code>, if the inline direction is the X axis).</p>
<div class='example'>
<p>A list may use an arrow for a bullet that points into the content. If the list can contain both LTR and RTL text, though, the bullet may be on the left or the right, and an image designed to point into the text on one side will point out of the text on the other side. This can be fixed with code like:</p>
@@ -343,7 +343,7 @@
<dl>
<dt>The function doesn't reference an element</dt>
- <dd>The function represents a solid-color transparent-black image with no intrinsic dimensions.</dd>
+ <dd>The function represents an <i>invalid image</i>.</dd>
<dt>The function references an <i title='element-not-rendered'>element that is not rendered</i>, but which <i title='paint-source'>provides a paint source</i></dt>
<dd>
@@ -389,7 +389,7 @@
<dt>The function references an <i title='element-not-rendered'>element that is not rendered</i></dt>
<dt>The function references an element that is a descendant of a replaced element</dt>
<dd>
- <p>The function represents a solid-color transparent-black image with no intrinsic dimensions.</p>
+ <p>The function represents an <i>invalid image</i>.</p>
<div class='example'>
<p>For example, all of the following ''element()'' uses will result in a transparent background:</p>
@@ -454,6 +454,8 @@
<p>An element is <dfn id='element-not-rendered' title='element-not-rendered'>not rendered</dfn> if it does not have an associated box. This can happen, for example, if the element or an ancestor is ''display:none'', or if the element is not in a rendered document. Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <code><defs></code> element is considered to be not rendered.</p>
+ <p>An <dfn title="invalid image|invalid images">invalid image</dfn> is rendered as a solid-color ''rgba(0,0,0,0)'' image with no intrinsic dimensions. However, <i>invalid images</i> have special behavior in some contexts, such as the ''image()'' notation.</p>
+
<h4 id='paint-sources' class='no-num'>
Paint Sources</h4>
Received on Tuesday, 28 February 2012 01:17:21 UTC