Added serialization section for element-reference.

Fixed some references/definition links.

Author: tabatkins

css3-images/Overview.html

@@ -66,11 +66,11 @@ <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   <p>This CSS Image Values and Replaced Content module has two parts: First,
    it defines the syntax for &lt;image&gt; values in CSS. &lt;image&gt;
    values can be a single URI to an image, a list of URIs denoting a series
-   of fallbacks, or gradients. Second, it defines properties used to control
-   the interaction of replaced content and the CSS layout algorithms. These
-   properties can affect the used image resolution for bitmaps, the replaced
-   object's orientation, and whether and how to preserve the object's aspect
-   ratio.
+   of fallbacks, a reference to an element in the document, or gradients.
+   Second, it defines properties used to control the interaction of replaced
+   content and the CSS layout algorithms. These properties can affect the
+   used image resolution for bitmaps, the replaced object's orientation, and
+   whether and how to preserve the object's aspect ratio.
 
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   <!--begin-status-->
@@ -179,13 +179,18 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
       notation</a>
 
      <li><a href="#serializing-image-notation"><span class=secno>7.3.
-      </span>Serializing the &lsquo;<code class=css>image()</code>&rsquo;
+      </span>Serializing the &lsquo;<code class=css>image()</code>&rsquo; /
+      &lsquo;<code class=css>&lt;image-list></code>&rsquo; notation</a>
+
+     <li><a href="#serializing-element-notation"><span class=secno>7.4.
+      </span>Serializing the &lsquo;<code class=css>element()</code>&rsquo; /
+      &lsquo;<code class=css>&lt;element-reference></code>&rsquo;
       notation</a>
 
-     <li><a href="#serializing-gradients"><span class=secno>7.4.
+     <li><a href="#serializing-gradients"><span class=secno>7.5.
       </span>Serializing Gradients</a>
 
-     <li><a href="#serializing-properties"><span class=secno>7.5.
+     <li><a href="#serializing-properties"><span class=secno>7.6.
       </span>Serializing new properties</a>
     </ul>
 
@@ -211,8 +216,8 @@ <h2 id=intro><span class=secno>1. </span>Introduction</h2>
     &lsquo;<code class=property>background-image</code>&rsquo; property,
     could only be given by a single URI value. This module introduces
     additional notations that allow a 2D image to be given as a list of URIs
-    denoting fallbacks, as a slice of a larger image (sprite), and as a
-    gradient.</p>
+    denoting fallbacks, as a reference to an element in the document, and as
+    a gradient.</p>
   </div>
 
   <div>
@@ -351,12 +356,12 @@ <h3 id=image-notation><span class=secno>4.2. </span>Image Fallbacks: the
      The UA must use only the first image that it can load and display. The
      syntax for &lsquo;<code class=css>image()</code>&rsquo; is defined as
 
-    <pre class=prod><dfn id=ltimage-listgt>&lt;image-list&gt;</dfn> = <!--
+    <pre class=prod><dfn id=ltimage-list>&lt;image-list></dfn> = <!--
      -->image( [ &lt;image-decl&gt; , ]* [ &lt;image-decl&gt; | &lt;color> | &lt;gradient> | &lt;element-reference> ] )</pre>
 
     <p>where &lt;image-decl&gt; is given by
 
-    <pre class=prod><dfn id=ltimage-declgt>&lt;image-decl&gt;</dfn> = <!--
+    <pre class=prod><dfn id=ltimage-decl>&lt;image-decl></dfn> = <!--
     -->[ &lt;string&gt; | &lt;url-token&gt; ] [ snap? &amp;&amp; &lt;resolution&gt; ]?</pre>
 
     <p>&lt;url-token&gt; is given as
@@ -433,8 +438,10 @@ <h3 id=element-reference><span class=secno>4.3. </span>Using Elements as
     <pre
      class=prod><dfn id=ltelement-reference>&lt;element-reference></dfn> = element( [&lt;id-selector> | &lt;identifier> ] )</pre>
 
-    <p>where &lt;id-selector> is an ID selector [[SELECTORS3]], and
-     &lt;identifier> is an identifer [[CSS3VALUES]].</p>
+    <p>where &lt;id-selector> is an ID selector <a href="#SELECT"
+     rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and &lt;identifier> is
+     an identifer <a href="#CSS3VAL"
+     rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.</p>
 
     <p>If the argument to the &lsquo;<code class=css>element()</code>&rsquo;
      function is an ID selector, the function references the element matched
@@ -1585,24 +1592,26 @@ <h3 id=serializing-url-notation><span class=secno>7.2.
 
       <div>
        <h3 id=serializing-image-notation><span class=secno>7.3.
-        </span>Serializing the &lsquo;<code class=css>image()</code>&rsquo;
-        notation</h3>
+        </span>Serializing the &lsquo;<code class=css>image()</code>&rsquo; /
+        &lsquo;<a href="#ltimage-list"><code
+        class=css>&lt;image-list></code></a>&rsquo; notation</h3>
 
-       <p>To serialize an image() function:</p>
+       <p>To serialize an &lsquo;<a href="#ltimage-list"><code
+        class=css>&lt;image-list></code></a>&rsquo;:</p>
 
        <ol>
         <li>Append "image(" to s.
 
         <li>For each argument, serialize the argument as an &lt;image-decl>,
-         &lt;color>, or &lt;gradient> as appropriate, and append it to s.
-         Then, if it is not the final argument, append a comma and a space ",
-         " to s.
+         &lt;color>, &lt;element-reference>, or &lt;gradient> as appropriate,
+         and append it to s. Then, if it is not the final argument, append a
+         comma and a space ", " to s.
 
         <li>Append a close parenthesis ")" to s.
        </ol>
 
-       <p>To serialize an &lsquo;<code
-        class=css>&lt;image-decl></code>&rsquo;:</p>
+       <p>To serialize an &lsquo;<a href="#ltimage-decl"><code
+        class=css>&lt;image-decl></code></a>&rsquo;:</p>
 
        <ol>
         <li>Serialize the first part of the value (the &lt;string> or
@@ -1617,7 +1626,26 @@ <h3 id=serializing-image-notation><span class=secno>7.3.
       </div>
 
       <div>
-       <h3 id=serializing-gradients><span class=secno>7.4. </span>Serializing
+       <h3 id=serializing-element-notation><span class=secno>7.4.
+        </span>Serializing the &lsquo;<code class=css>element()</code>&rsquo;
+        / &lsquo;<a href="#ltelement-reference"><code
+        class=css>&lt;element-reference></code></a>&rsquo; notation</h3>
+
+       <p>To serialize an &lsquo;<a href="#ltelement-reference"><code
+        class=css>&lt;element-reference></code></a>&rsquo;:</p>
+
+       <ol>
+        <li>Append "element(" to s.
+
+        <li>Serialize the argument as a selector or identifier, as
+         appropriate, and append it to s.
+
+        <li>Append a close parenthesis ")" to s.
+       </ol>
+      </div>
+
+      <div>
+       <h3 id=serializing-gradients><span class=secno>7.5. </span>Serializing
         Gradients</h3>
 
        <p>To serialize a &lsquo;<a href="#ltlinear-gradient"><code
@@ -1714,7 +1742,7 @@ <h3 id=serializing-gradients><span class=secno>7.4. </span>Serializing
       </div>
 
       <div>
-       <h3 id=serializing-properties><span class=secno>7.5.
+       <h3 id=serializing-properties><span class=secno>7.6.
         </span>Serializing new properties</h3>
 
        <p>To serialize the &lsquo;<a href="#image-resolution1"><code
@@ -1777,6 +1805,16 @@ <h3 class=no-num id=normative-references>Normative references</h3>
        </dd>
       <!---->
 
+      <dt id=CSS3VAL>[CSS3VAL]
+
+      <dd>Chris Lilley; H&#229;kon Wium Lie. <a
+       href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
+       Values and Units.</cite></a> 19 September 2006. W3C Working Draft.
+       (Work in progress.) URL: <a
+       href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
+       </dd>
+      <!---->
+
       <dt id=RFC2119>[RFC2119]
 
       <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
@@ -1785,6 +1823,16 @@ <h3 class=no-num id=normative-references>Normative references</h3>
        href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
        </dd>
       <!---->
+
+      <dt id=SELECT>[SELECT]
+
+      <dd>Tantek &#199;elik; et al. <a
+       href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215"><cite>Selectors
+       Level 3.</cite></a> 15 December 2009. W3C Proposed Recommendation.
+       (Work in progress.) URL: <a
+       href="http://www.w3.org/TR/2009/PR-css3-selectors-20091215">http://www.w3.org/TR/2009/PR-css3-selectors-20091215</a>
+       </dd>
+      <!---->
      </dl>
      <!--end-normative-->
      <h3 class=no-num id=informative-references>Informative references</h3>

css3-images/Overview.src.html

@@ -42,7 +42,7 @@ <h2 class="no-num no-toc" id="abstract">Abstract</h2>
   <p>This CSS Image Values and Replaced Content module has two parts:
     First, it defines the syntax for &lt;image&gt; values in CSS.
     &lt;image&gt; values can be a single URI to an image, a list of
-    URIs denoting a series of fallbacks, or
+    URIs denoting a series of fallbacks, a reference to an element in the document, or
     gradients. Second, it defines properties used to control the
     interaction of replaced content and the CSS layout algorithms.
     These properties can affect the used image resolution for bitmaps,
@@ -64,7 +64,7 @@ <h2 id="intro">Introduction</h2>
     'background-image' property, could only be given by a single URI
     value. This module introduces additional notations that allow a
     2D image to be given as a list of URIs denoting fallbacks, as a
-    slice of a larger image (sprite), and as a gradient.</p>
+    reference to an element in the document, and as a gradient.</p>
 </div>
 
 <div>
@@ -175,12 +175,12 @@ <h3 id="image-notation">Image Fallbacks: the ''image()'' notation</h3>
   each one a fallback for the previous. The UA must use only the first image
   that it can load and display. The syntax for ''image()'' is defined as
 
-  <pre class="prod"><dfn>&lt;image-list&gt;</dfn> = <!--
+  <pre class="prod"><dfn>&lt;image-list></dfn> = <!--
      -->image( [ &lt;image-decl&gt; , ]* [ &lt;image-decl&gt; | &lt;color> | &lt;gradient> | &lt;element-reference> ] )</pre>
 
   <p>where &lt;image-decl&gt; is given by
 
-  <pre class="prod"><dfn>&lt;image-decl&gt;</dfn> = <!--
+  <pre class="prod"><dfn>&lt;image-decl></dfn> = <!--
     -->[ &lt;string&gt; | &lt;url-token&gt; ] [ snap? &amp;&amp; &lt;resolution&gt; ]?</pre>
 
   <p>&lt;url-token&gt; is given as <code>[!#$%&amp;*-~]|{nonascii}|{escape}</code>
@@ -232,7 +232,7 @@ <h3 id="image-notation">Image Fallbacks: the ''image()'' notation</h3>
 		<h3 id=element-reference>Using Elements as Images: The ''element()'' notation</h3>
 		<p>The ''element()'' function allows an author to reference an element in the document that should be used as an image.  As the referenced element changes, for example, by the user typing into a &lt;textarea> element or a script drawing into a &lt;canvas> element in HTML, the image produced by the ''element()'' function stays in sync, allowing dynamic effects such as script-animated background images or previews of the next slide in a slideshow.  The syntax for ''element()'' is defined as:</p>
 		<pre class=prod><dfn>&lt;element-reference></dfn> = element( [&lt;id-selector> | &lt;identifier> ] )</pre>
-		<p>where &lt;id-selector> is an ID selector [[SELECTORS3]], and &lt;identifier> is an identifer [[CSS3VALUES]].</p>
+		<p>where &lt;id-selector> is an ID selector [[!SELECT]], and &lt;identifier> is an identifer [[!CSS3VAL]].</p>
 		<p>If the argument to the ''element()'' function is an ID selector, the function references the element matched by the selector.  If it's an identifier, the function references the element who's <dfn>CSS element reference identifier</dfn> is the identifier.  (CSS does not define how an element acquires a ''CSS element reference identifier''; that is determined by the host language.)  If no element in the document matches the selector, or no element has the identifier as its ''CSS element reference identifier'', the function represents a fully transparent image with no intrinsic dimensions, equivalent to <code>image(transparent)</code>.  Otherwise, the function represents an image with width and height equal to the width and height of the referenced element, with an appearance exactly equivalent to that of the referenced element.  Whether or not the referenced element is currently being rendered on-screen, for media types where this is relevant, must not affect the appearance of the image represented by the function; the image must always be equivalent to how the element would appear when rendered on-screen.  If the document changes so that which element is matched, or whether an element is matched at all, changes, the image represented by the function must change accordingly.</p>
 		<p>If the argument passed to ''element()'' isn't an ID selector or an ident, it is a syntax error.</p>
 		<div class=example>
@@ -803,11 +803,11 @@ <h3 id=serializing-url-notation>Serializing the ''url()'' notation</h3>
 	</div>
 
 	<div>
-		<h3 id=serializing-image-notation>Serializing the ''image()'' notation</h3>
-		<p>To serialize an image() function:</p>
+		<h3 id=serializing-image-notation>Serializing the ''image()'' / ''&lt;image-list>'' notation</h3>
+		<p>To serialize an ''&lt;image-list>'':</p>
 		<ol>
 			<li>Append "image(" to s.</li>
-			<li>For each argument, serialize the argument as an &lt;image-decl>, &lt;color>, or &lt;gradient> as appropriate, and append it to s.  Then, if it is not the final argument, append a comma and a space ", " to s.</li>
+			<li>For each argument, serialize the argument as an &lt;image-decl>, &lt;color>, &lt;element-reference>, or &lt;gradient> as appropriate, and append it to s.  Then, if it is not the final argument, append a comma and a space ", " to s.</li>
 			<li>Append a close parenthesis ")" to s.</li>
 		</ol>
 		<p>To serialize an ''&lt;image-decl>'':</p>
@@ -818,6 +818,16 @@ <h3 id=serializing-image-notation>Serializing the ''image()'' notation</h3>
 		</ol>
 	</div>
 
+	<div>
+		<h3 id=serializing-element-notation>Serializing the ''element()'' / ''&lt;element-reference>'' notation</h3>
+		<p>To serialize an ''&lt;element-reference>'':</p>
+		<ol>
+			<li>Append "element(" to s.</li>
+			<li>Serialize the argument as a selector or identifier, as appropriate, and append it to s.</li>
+			<li>Append a close parenthesis ")" to s.</li>
+		</ol>
+	</div>
+
 	<div>
 		<h3 id="serializing-gradients">Serializing Gradients</h3>
 		<p>To serialize a ''&lt;linear-gradient>'':</p>