Add more detail to element() about elements that aren't rendered. (And some edits from the *next* commit, since I accidentally let this commit hang.)

Author: tabatkins

css3-images/Overview.html

@@ -16,15 +16,15 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 February
     2012</h2>
 
    <dl>
     <dt>This Version:
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
-     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120217/">http://www.w3.org/TR/2012/WD-css3-images-20120217/</a>-->
+     <!-- <dd><a href="http://www.w3.org/TR/2012/ED-css3-images-20120222/">http://www.w3.org/TR/2012/WD-css3-images-20120222/</a>-->
 
 
     <dt>Latest Version:
@@ -691,15 +691,19 @@ <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
    <dd>The function represents a solid-color transparent-black image with no
     intrinsic dimensions.
 
-   <dt>The function references an element that is not rendered, but which <a
-    href="#paint-source"><i title=paint-source>provides a paint
+   <dt>The function references an <a href="#element-not-rendered"><i
+    title=element-not-rendered>element that is not rendered</i></a>, but
+    which <a href="#paint-source"><i title=paint-source>provides a paint
     source</i></a>
 
    <dd>
     <p>The function represents an image with the dimensions and appearance of
      the <a href="#paint-source"><i title=paint-source>paint source</i></a>.
      The host language defines the dimensions and appearance of paint
-     sources.
+     sources.</p>
+
+    <p>If any properties on the element would inherit their value from the
+     element's parent, they must instead be set to their initial value.</p>
 
     <div class=example>
      <p>For example, the &lsquo;<code class=css>element()</code>&rsquo;
@@ -741,7 +745,8 @@ <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
 &lt;/ul></pre>
     </div>
 
-   <dt>The function references an element that is not rendered
+   <dt>The function references an <a href="#element-not-rendered"><i
+    title=element-not-rendered>element that is not rendered</i></a>
 
    <dt>The function references an element that is a descendant of a replaced
     element
@@ -825,6 +830,15 @@ <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
    regeneration process. That is, the image must look identical to the
    referenced element, modulo rasterization quality.
 
+  <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 &lsquo;<code class=css>display:none</code>&rsquo;, or if the
+   element is not in a rendered document. In SVG, the descendants of a
+   <code>&lt;defs></code> element are also considered to not be rendered.
+   Other host languages may define additional ways in which an element can be
+   considered not rendered.
+
   <h4 class=no-num id=paint-sources> Paint Sources</h4>
 
   <p>Host languages may define that some elements provide a <dfn
@@ -2745,6 +2759,9 @@ <h2 class=no-num id=index>Index</h2>
    <li>&lsquo;<code class=css>dppx</code>&rsquo;, <a href="#dppx"
     title="''dppx''"><strong>2.</strong></a>
 
+   <li>element-not-rendered, <a href="#element-not-rendered"
+    title=element-not-rendered><strong>3.3.</strong></a>
+
    <li>&lt;element-reference>, <a href="#element-reference-type"
     title="&lt;element-reference>"><strong>3.3.</strong></a>
 

css3-images/Overview.src.html

@@ -220,7 +220,9 @@ <h3 id="image-notation">
 	<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]]
+	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>The ''image()'' notation is defined as:
 
@@ -261,6 +263,14 @@ <h3 id="image-notation">
 		<p>In the above, the background is the image "bg-image.png", overlaid with partially-transparent blue.
 	</div>
 
+	<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>For example, if a future specification defined a way to refer to a specific frame of an animated GIF, 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('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>
 
 	<div class='example'>
@@ -335,9 +345,11 @@ <h3 id='element-reference'>
 		<dt>The function doesn't reference an element</dt>
 		<dd>The function represents a solid-color transparent-black image with no intrinsic dimensions.</dd>
 
-		<dt>The function references an element that is not rendered, but which <i title=paint-source>provides a paint source</i></dt>
+		<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>
-			<p>The function represents an image with the dimensions and appearance of the <i title=paint-source>paint source</i>.  The host language defines the dimensions and appearance of paint sources.
+			<p>The function represents an image with the dimensions and appearance of the <i title=paint-source>paint source</i>.  The host language defines the dimensions and appearance of paint sources.</p>
+
+			<p>If any properties on the element would inherit their value from the element's parent, they must instead be set to their initial value.</p>
 
 			<div class='example'>
 				<p>For example, the ''element()'' function can reference an SVG &lt;pattern> element in an HTML document:</p>
@@ -376,7 +388,7 @@ <h3 id='element-reference'>
 			</div>
 		</dd>
 
-		<dt>The function references an element that is not rendered</dt>
+		<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>
@@ -442,6 +454,8 @@ <h3 id='element-reference'>
 	the image must look identical to the referenced element, modulo rasterization 
 	quality.</p>
 
+	<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.  In SVG, the descendants of a <code>&lt;defs></code> element are also considered to not be rendered.  Other host languages may define additional ways in which an element can be considered not rendered.</p>
+
 <h4 id='paint-sources' class='no-num'>
 Paint Sources</h4>