- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 28 Feb 2012 22:58:23 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv28495
Modified Files:
Overview.html Overview.src.html
Log Message:
Large editorial reorg of 'Image Values' chapter. No normative changes.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.314
retrieving revision 1.315
diff -u -d -r1.314 -r1.315
--- Overview.html 28 Feb 2012 21:58:47 -0000 1.314
+++ Overview.html 28 Feb 2012 22:58:21 -0000 1.315
@@ -201,14 +201,29 @@
<li><a href="#image-notation"><span class=secno>3.2. </span> Image
Fallbacks and Annotations: the ‘<code
class=css>image()</code>’ notation</a>
+ <ul class=toc>
+ <li><a href="#image-fragments"><span class=secno>3.2.1. </span> Image
+ Fragments</a>
+
+ <li><a href="#image-fallbacks"><span class=secno>3.2.2. </span> Image
+ Fallbacks</a>
+
+ <li><a href="#solid-color-images"><span class=secno>3.2.3. </span>
+ Solid-color Images</a>
+
+ <li><a href="#bidi-images"><span class=secno>3.2.4. </span>
+ Bidi-sensitive Images</a>
+ </ul>
<li><a href="#element-reference"><span class=secno>3.3. </span> Using
Elements as Images: the ‘<code class=css>element()</code>’
notation</a>
<ul class=toc>
- <li class=no-num><a href="#paint-sources"> Paint Sources</a>
+ <li><a href="#paint-sources"><span class=secno>3.3.1. </span> Paint
+ Sources</a>
- <li class=no-num><a href="#element-cycles"> Cycle Detection</a>
+ <li><a href="#element-cycles"><span class=secno>3.3.2. </span> Cycle
+ Detection</a>
</ul>
</ul>
@@ -406,30 +421,34 @@
<h2 id=image><span class=secno>3. </span> Image Values: the <image> type</h2>
- <p>The <image> value type denotes a 2D image. It represents either a <a
- href="#url">url reference</a>, <a href="#image-notation">image
+ <p>The ‘<a href="#image-type"><code
+ class=css><image></code></a>’ value type denotes a 2D image. It
+ can be a <a href="#url">url reference</a>, <a href="#image-notation">image
notation</a>, <a href="#element-reference">element reference</a>, or <a
- href="#gradients">gradient notation</a>. Syntactically it is defined as
+ href="#gradients">gradient notation</a>. Its syntax is:
<pre class=prod><dfn id=image-type><image></dfn> = <i><url></i> | <a
href="#image-list-type"><i><image-list></i></a> | <a
href="#element-reference-type"><i><element-reference></i></a> | <a
href="#gradient-type"><i><gradient></i></a></pre>
- <p>Image values can be used in many CSS properties, including the
- ‘<code class=property>background-image</code>’, ‘<code
- class=property>list-style-image</code>’, ‘<code
+ <p>An ‘<a href="#image-type"><code
+ class=css><image></code></a>’ can be used in many CSS properties,
+ including the ‘<code class=property>background-image</code>’,
+ ‘<code class=property>list-style-image</code>’, ‘<code
class=property>cursor</code>’ properties <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+ rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> (where it replaces the
+ ‘<code class=css><url></code>’ component in the property's
+ value).
- <p>In some cases, an image is invalid. For example, a ‘<code
+ <p>In some cases, an image is invalid, such as a ‘<code
class=css><url></code>’ pointing to a resource that is not a
- valid image format would produce an <a href="#invalid-image"><i>invalid
- image</i></a>. An <dfn id=invalid-image>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.</p>
+ valid image format. An <dfn id=invalid-image>invalid image</dfn> is
+ rendered as a solid-color ‘<code class=css>transparent</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.</p>
<!-- ====================================================================== -->
<h3 id=url><span class=secno>3.1. </span> Image References and Image
@@ -437,12 +456,10 @@
‘<code class=css>url()</code>’ notation</h3>
<p>The simplest way to indicate an image is to reference an image file by
- URL. This is done with the <a
+ URL. This can be done with the <a
href="http://www.w3.org/TR/CSS21/syndata.html#uri">‘<code
class=css>url()</code>’ notation</a>, defined in <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, or sometimes with a
- ‘<code class=css><string></code>’ which is defined to
- represent a URL.
+ rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<div class=example>
<p>In the example below, a background image is specified with ‘<code
@@ -451,17 +468,65 @@
<pre>background-image: url(wavy.png);</pre>
</div>
+ <p>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>
+ <!-- ====================================================================== -->
+
+ <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
+ Annotations: the ‘<code class=css>image()</code>’ notation</h3>
+
+ <p>The ‘<code class=css>image()</code>’ function allows an
+ author to:
+
+ <ul>
+ <li>use <a href="http://www.w3.org/TR/media-frags/">media fragments</a> to
+ clip out a portion of an image
+
+ <li>specify fallback images in case the preferred image can't be decoded
+ or is a type that the browser doesn't recognize
+
+ <li>use a solid color as an image
+
+ <li>annotate an image with a directionality
+ </ul>
+
+ <p>The ‘<code class=css>image()</code>’ 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> = [ <url> | <string> | <element-reference> ] [ ltr | rtl ]?</pre>
+
+ <p>Each <code><string></code> or <code><url></code> inside
+ ‘<code class=css>image()</code>’ represents an image, just as
+ if the <a href="#url">‘<code class=css>url()</code>’
+ notation</a> had been used. As usual for URLs in CSS, relative URLs are
+ resolved to an absolute URL (as described in Values & Units <a
+ href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>) when a
+ specified ‘<code class=css>image()</code>’ value is computed.
+
+ <h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4>
+
<p>A portion of an image may be referenced (clipped out and used as a
standalone image) by use of <a
href="http://www.w3.org/TR/media-frags/#naming-space">media fragment
identifiers</a>. <a href="#MEDIA-FRAGS"
rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
+ <p>So that authors can take advantage of CSS's forwards-compatible parsing
+ rules to provide a fallback for image slices, implementations that support
+ the ‘<code class=css>image()</code>’ notation <em>must</em>
+ support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
+ for images. <a href="#MEDIA-FRAGS"
+ rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
+
<div class=example>
<p>For example, given the following image* and CSS:</p>
<a href=sprites.svg> <img alt="[9 circles, with 0 to 8 eighths filled in]"
height=20 src=sprites.svg width=180> </a>
- <pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
+ <pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
<p>...the background of the element will be the portion of the image that
starts at (40px,0px) and is 20px wide and tall, which is just the circle
@@ -471,67 +536,23 @@
the SVG directly.</small></p>
</div>
- <p class=note>Note that a legacy UA that doesn't understand the media
- fragments notation will ignore the fragment and simply display the
- entirety of an image specified with ‘<code
- class=css>url</code>’. However, since URLs with media fragment
- identifiers can also be used in the ‘<code
- class=css>image()</code>’ notation defined below, authors can take
- advantage of CSS's forward-compatible parsing rules to provide a fallback
- when using an image fragment URL:
-
<div class=example>
- <p>In the example below, the ‘<code class=css>image()</code>’
- notation is used together with the media fragment syntax, so that UAs
- that don't support media fragments fail to parse the second declaration
- and use the first.</p>
+ <p>Note that image fragments can also be used with the ‘<code
+ class=css>url()</code>’ notation. However, a legacy UA that doesn't
+ understand the media fragments notation will ignore the fragment and
+ simply display the entirety of the image.</p>
+
+ <p>Since the ‘<code class=css>image()</code>’ notation
+ requires UAs to support media fragments, authors can take advantage of
+ CSS's forward-compatible parsing rules to provide a fallback when using
+ an image fragment URL:</p>
<pre>
<!-- -->background-image: url('swirl.png'); /* old UAs */
<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
</div>
- <p>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>
- <!-- ====================================================================== -->
-
- <h3 id=image-notation><span class=secno>3.2. </span> Image Fallbacks and
- Annotations: the ‘<code class=css>image()</code>’ notation</h3>
-
- <p>The ‘<code class=css>image()</code>’ function allows an
- author to specify an image with fallback images to be used if the original
- image can't be decoded or is a type that the browser doesn't recognize.
- Additionally, the author can specify a color as an ultimate fallback to be
- used when none of the images can be.
-
- <p>So that authors can take advantage of CSS's forwards-compatible parsing
- rules to provide a fallback for image slices, implementations that support
- the ‘<code class=css>image()</code>’ notation <em>must</em>
- support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
- for images. <a href="#MEDIA-FRAGS"
- rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
-
- <p>The ‘<code class=css>image()</code>’ 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> = [ <url> | <string> | <element-reference> ] [ 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.
-
- <p>If a URL 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 <a
- href="#invalid-image"><i>invalid image</i></a>. <span class=note>This
- error-handling is limited to image(), and not placed in url(), for legacy
- compat reasons.</span>
+ <h4 id=image-fallbacks><span class=secno>3.2.2. </span> Image Fallbacks</h4>
<p>Multiple ‘<a href="#image-decl-type"><code
class=css><image-decl>s</code></a>’ can be given separated by
@@ -589,27 +610,14 @@
from being set against a white background.</p>
</div>
- <div class=example>
- <p>At times, one may need a solid-color image for a property or function
- that does not accept the <color> type directly. The ‘<code
- class=css>image()</code>’ function can be used for this: by
- specifying <em>only</em> a color without any URLs, the function
- immediately falls back to representing a solid-color image of the chosen
- color.
-
- <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
-
- <p>In the above, the background is the image "bg-image.png", overlaid with
- partially-transparent blue.
- </div>
+ <p>If a URL 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 <a
+ href="#invalid-image"><i>invalid image</i></a>. <span class=note>This
+ error-handling is limited to image(), and not in the definition of URL,
+ for legacy compat reasons.</span>
<div class=example>
- <p>Implementations are required to ignore images that use fragment
- identifers they don't recognize, which allows authors to use new fragment
- formats and still get safe fallback, which doesn't exist in normal CSS
- (as an unknown fragment identifier in ‘<code
- class=css>url()</code>’ doesn't make the property invalid).</p>
-
<p>For example, if a future specification defined a way to refer to a
specific frame of an animated GIF with a fragment identifier, an author
could write the following to get newer browsers to use the GIF's frame,
@@ -618,6 +626,25 @@
<pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
</div>
+ <h4 id=solid-color-images><span class=secno>3.2.3. </span> Solid-color
+ Images</h4>
+
+ <div class=example>
+ <p>At times, one may need a solid-color image for a property or function
+ that does not accept the ‘<code class=css><color></code>’
+ type directly. The ‘<code class=css>image()</code>’ function
+ can be used for this: by specifying <em>only</em> a color without any
+ URLs, the function immediately falls back to representing a solid-color
+ image of the chosen color.
+
+ <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
+
+ <p>In the above, the background is the image "bg-image.png", overlaid with
+ partially-transparent blue.
+ </div>
+
+ <h4 id=bidi-images><span class=secno>3.2.4. </span> Bidi-sensitive Images</h4>
+
<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
@@ -887,7 +914,7 @@
SVG</a>. <span class=note>The SVG 1.1 definition of "bounding box" does
not account for stroke width. This is expected to change in SVG 2.</span>
- <h4 class=no-num id=paint-sources> Paint Sources</h4>
+ <h4 id=paint-sources><span class=secno>3.3.1. </span> Paint Sources</h4>
<p>Host languages may define that some elements provide a <dfn
id=paint-source title=paint-source>paint source</dfn>. Paint sources have
@@ -950,9 +977,8 @@
or layout effects on the document, but the style inheritance is
well-defined.</p>
</div>
- <!-- ====================================================================== -->
- <h4 class=no-num id=element-cycles> Cycle Detection</h4>
+ <h4 id=element-cycles><span class=secno>3.3.2. </span> Cycle Detection</h4>
<p>The ‘<code class=css>element()</code>’ function can produce
nonsensical circular relationships, such as an element using itself as its
@@ -2927,7 +2953,7 @@
<li>objects, <a href="#objects" title=objects><strong>5.</strong></a>
<li>paint-source, <a href="#paint-source"
- title=paint-source><strong>#</strong></a>
+ title=paint-source><strong>3.3.1.</strong></a>
<li><position>, <a href="#position"
title="<position>"><strong>4.2.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.324
retrieving revision 1.325
diff -u -d -r1.324 -r1.325
--- Overview.src.html 28 Feb 2012 21:58:48 -0000 1.324
+++ Overview.src.html 28 Feb 2012 22:58:21 -0000 1.325
@@ -152,24 +152,24 @@
<h2 id="image">
Image Values: the <image> type</h2>
- <p>The <image> value type denotes a 2D image. It represents either a
+ <p>The ''<image>'' value type denotes a 2D image. It can be a
<a href="#url">url reference</a>, <a href="#image-notation">image notation</a>,
<a href="#element-reference">element reference</a>, or <a href="#gradients">gradient notation</a>.
- Syntactically it is defined as
+ Its syntax is:</p>
<pre class="prod"><dfn id='image-type'><image></dfn> = <i><url></i> | <i><image-list></i> | <i><element-reference></i> | <i><gradient></i></pre>
- <p>Image values can be used in many CSS properties, including the
- 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]].
+ <p>An ''<image>'' can be used in many CSS properties, including the
+ 'background-image', 'list-style-image', 'cursor' properties [[!CSS21]] (where it replaces the ''<url>'' component in the property's value).</p>
- <p>In some cases, an image is invalid. For example, a ''<url>'' pointing to a resource that is not a valid image format would produce an <i>invalid image</i>. An <dfn>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>
+ <p>In some cases, an image is invalid, such as a ''<url>'' pointing to a resource that is not a valid image format. An <dfn>invalid image</dfn> is rendered as a solid-color ''transparent'' image with no intrinsic dimensions. However, <i>invalid images</i> have special behavior in some contexts, such as the ''image()'' notation.</p>
<!-- ====================================================================== -->
<h3 id="url">
Image References and Image Slices: the ''<url>'' type and ''url()'' notation</h3>
- <p>The simplest way to indicate an image is to reference an image file by URL. This is done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]], or sometimes with a ''<string>'' which is defined to represent a URL.
+ <p>The simplest way to indicate an image is to reference an image file by URL. This can be done with the <a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>, defined in [[!CSS21]].
<div class="example">
<p>In the example below, a background image is specified with ''url()''
@@ -178,8 +178,42 @@
<pre>background-image: url(wavy.png);</pre>
</div>
+ <p>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>
+
+<!-- ====================================================================== -->
+
+<h3 id="image-notation">
+Image Fallbacks and Annotations: the ''image()'' notation</h3>
+
+ <p>The ''image()'' function allows an author to:</p>
+
+ <ul>
+ <li>use <a href="http://www.w3.org/TR/media-frags/">media fragments</a> to clip out a portion of an image</li>
+
+ <li>specify fallback images in case the preferred image can't be decoded or is a type that the browser doesn't recognize</li>
+
+ <li>use a solid color as an image</li>
+
+ <li>annotate an image with a directionality</li>
+ </ul>
+
+ <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> = [ <url> | <string> | <element-reference> ] [ ltr | rtl ]?</pre>
+
+ <p>Each <code><string></code> or <code><url></code> inside ''image()'' represents an image, just as if the <a href="#url">''url()'' notation</a> had been used. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [[!CSS3VAL]]) when a specified ''image()'' value is computed.</p>
+
+<h4>
+Image Fragments</h4>
+
<p>A portion of an image may be referenced (clipped out and used as a standalone image) by use of <a href="http://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>. [[!MEDIA-FRAGS]]
+ <p>So that authors can take advantage of CSS's forwards-compatible parsing
+ rules to provide a fallback for image slices, implementations that support
+ the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
+ form of media fragment identifiers for images. [[!MEDIA-FRAGS]]</p>
+
<div class="example">
<p>For example, given the following image* and CSS:</p>
@@ -187,53 +221,26 @@
<img src="sprites.svg" height="20" width="180" alt="[9 circles, with 0 to 8 eighths filled in]">
</a>
- <pre>background-image: url('sprites.svg#xywh=40,0,20,20')</pre>
+ <pre>background-image: image('sprites.svg#xywh=40,0,20,20')</pre>
<p>...the background of the element will be the portion of the image that starts at (40px,0px)
and is 20px wide and tall, which is just the circle with a quarter filled in.</p>
<p><small>* SVG-in-<img> support required. Click the picture to view the SVG directly.</small></p>
</div>
-
- <p class="note">Note that a legacy UA that doesn't understand the media
- fragments notation will ignore the fragment and simply display the
- entirety of an image specified with ''url''. However, since URLs with
- media fragment identifiers can also be used in the ''image()'' notation
- defined below, authors can take advantage of CSS's forward-compatible
- parsing rules to provide a fallback when using an image fragment URL:</p>
- <div class="example">
- <p>In the example below, the ''image()'' notation is used together with
- the media fragment syntax, so that UAs that don't support media fragments
- fail to parse the second declaration and use the first.</p>
+ <div class='example'>
+ <p>Note that image fragments can also be used with the ''url()'' notation. However, a legacy UA that doesn't understand the media fragments notation will ignore the fragment and simply display the entirety of the image.</p>
+
+ <p>Since the ''image()'' notation requires UAs to support media fragments, authors can take advantage of CSS's forward-compatible parsing rules to provide a fallback when using an image fragment URL:</p>
<pre>
<!-- -->background-image: url('swirl.png'); /* old UAs */
<!-- -->background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */</pre>
</div>
- <p>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>
-
-<!-- ====================================================================== -->
-
-<h3 id="image-notation">
-Image Fallbacks and Annotations: the ''image()'' notation</h3>
-
- <p>The ''image()'' function allows an author to specify an image with fallback images to be used if the original image can't be decoded or is a type that the browser doesn't recognize. Additionally, the author can specify a color as an ultimate fallback to be used when none of the images can be.</p>
-
- <p>So that authors can take advantage of CSS's forwards-compatible parsing
- rules to provide a fallback for image slices, implementations that support
- the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
- form of media fragment identifiers for images. [[!MEDIA-FRAGS]]</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> = [ <url> | <string> | <element-reference> ] [ 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>If a URL 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>. <span class='note'>This error-handling is limited to image(), and not placed in url(), for legacy compat reasons.</span></p>
+<h4>
+Image Fallbacks</h4>
<p>Multiple ''<image-decl>s'' 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>.
@@ -259,22 +266,28 @@
<p>Now, the black won't show at all if the image loads, but if for whatever reason the image fails, it'll pop in and prevent the white text from being set against a white background.</p>
</div>
- <div class='example'>
- <p>At times, one may need a solid-color image for a property or function that does not accept the <color> type directly. The ''image()'' function can be used for this: by specifying <em>only</em> a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.
+ <p>If a URL 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>. <span class='note'>This error-handling is limited to image(), and not in the definition of URL, for legacy compat reasons.</span></p>
- <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
+ <div class='example'>
+ <p>For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier, an author could write the following to get newer browsers to use the GIF's frame, and older browsers to instead download the fallback image:</p>
- <p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
+ <pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
</div>
+<h4>
+Solid-color Images</h4>
<div class='example'>
- <p>Implementations are required to ignore images that use fragment identifers they don't recognize, which allows authors to use new fragment formats and still get safe fallback, which doesn't exist in normal CSS (as an unknown fragment identifier in ''url()'' doesn't make the property invalid).</p>
+ <p>At times, one may need a solid-color image for a property or function that does not accept the ''<color>'' type directly. The ''image()'' function can be used for this: by specifying <em>only</em> a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.
- <p>For example, if a future specification defined a way to refer to a specific frame of an animated GIF with a fragment identifier, an author could write the following to get newer browsers to use the GIF's frame, and older browsers to instead download the fallback image:</p>
+ <pre>background-image: image(rgba(0,0,255,.5)), url("bg-image.png");</pre>
- <pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
+ <p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
</div>
+
+<h4 id='bidi-images'>
+Bidi-sensitive Images</h4>
+
<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()'' function takes on the directionality of the used ''<image-decl>'', if any. 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'>
@@ -458,7 +471,7 @@
<p>The <dfn>bounding box</dfn> of an element rendered using a CSS rendering model is the smallest rectangle that contains the <a href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border image areas</a> of all the fragments of the principal box. For an element rendered using the SVG rendering model, <a href="http://www.w3.org/TR/SVG/coords.html">the bounding box is defined by SVG</a>. <span class='note'>The SVG 1.1 definition of "bounding box" does not account for stroke width. This is expected to change in SVG 2.</span></p>
-<h4 id='paint-sources' class='no-num'>
+<h4 id='paint-sources'>
Paint Sources</h4>
<p>Host languages may define that some elements provide a <dfn title="paint-source">paint source</dfn>. Paint sources have an intrinsic width, height, and appearance, separate from the process of rendering, and so may be used as images even when they're not being rendered.</p>
@@ -481,9 +494,7 @@
<p>For now, it is recommended that such fragments be inserted into a document before being referenced. For example, a <code><pattern></code> element may be placed into a ''display:none'' <code><svg></code> element's <code><defs></code> element within a document; this has no rendering or layout effects on the document, but the style inheritance is well-defined.</p>
</div>
-<!-- ====================================================================== -->
-
-<h4 class="no-num" id='element-cycles'>
+<h4 id='element-cycles'>
Cycle Detection</h4>
<p>The ''element()'' function can produce nonsensical circular relationships,
Received on Tuesday, 28 February 2012 22:58:26 UTC