Punt element() to next level, per WG decision.

Wed, 21 Mar 2012 16:48:21 -0700

author
Tab Atkins Jr. <jackalmage@gmail.com>
date
Wed, 21 Mar 2012 16:48:21 -0700
changeset 5178
f057bc3959f9
parent 5177
93a260f41998
child 5179
2dcc86cabd02

Punt element() to next level, per WG decision.

css3-images/Overview.html file | annotate | diff | comparison | revisions
css3-images/Overview.src.html file | annotate | diff | comparison | revisions
     1.1 --- a/css3-images/Overview.html	Wed Mar 21 16:47:17 2012 -0700
     1.2 +++ b/css3-images/Overview.html	Wed Mar 21 16:48:21 2012 -0700
     1.3 @@ -219,17 +219,6 @@
     1.4         <li><a href="#solid-color-images"><span class=secno>3.2.3. </span>
     1.5          Solid-color Images</a>
     1.6        </ul>
     1.7 -
     1.8 -     <li><a href="#element-reference"><span class=secno>3.3. </span> Using
     1.9 -      Elements as Images: the &lsquo;<code class=css>element()</code>&rsquo;
    1.10 -      notation</a>
    1.11 -      <ul class=toc>
    1.12 -       <li><a href="#paint-sources"><span class=secno>3.3.1. </span> Paint
    1.13 -        Sources</a>
    1.14 -
    1.15 -       <li><a href="#element-cycles"><span class=secno>3.3.2. </span> Cycle
    1.16 -        Detection</a>
    1.17 -      </ul>
    1.18      </ul>
    1.19  
    1.20     <li><a href="#gradients"><span class=secno>4. </span> Gradients</a>
    1.21 @@ -437,8 +426,7 @@
    1.22     href="#gradients">gradient notation</a>. Its syntax is:
    1.23  
    1.24    <pre class=prod><dfn id=image-type>&lt;image></dfn> = <i>&lt;url></i> | <a
    1.25 -   href="#image-list-type"><i>&lt;image-list></i></a> | <a
    1.26 -   href="#element-reference-type"><i>&lt;element-reference></i></a>  | <a
    1.27 +   href="#image-list-type"><i>&lt;image-list></i></a> | <i>&lt;element-reference></i>  | <a
    1.28     href="#gradient-type"><i>&lt;gradient></i></a></pre>
    1.29  
    1.30    <p>An &lsquo;<a href="#image-type"><code
    1.31 @@ -678,124 +666,68 @@
    1.32  	</div>
    1.33  -->
    1.34    <!-- ====================================================================== -->
    1.35 -
    1.36 -  <h3 id=element-reference><span class=secno>3.3. </span> Using Elements as
    1.37 -   Images: the &lsquo;<code class=css>element()</code>&rsquo; notation</h3>
    1.38 -
    1.39 -  <p>The &lsquo;<code class=css>element()</code>&rsquo; function allows an
    1.40 -   author to use an element in the document as an image. As the referenced
    1.41 -   element changes appearance, the image changes as well. This can be used,
    1.42 -   for example, to create live previews of the next/previous slide in a
    1.43 -   slideshow, or to reference a canvas element for a fancy generated gradient
    1.44 -   or even an animated background.
    1.45 -
    1.46 -  <p class=note>Note that the &lsquo;<code class=css>element()</code>&rsquo;
    1.47 -   function only reproduces the <em>appearance</em> of the referenced
    1.48 -   element, not the actual content and its structure. Authors should only use
    1.49 -   this for decorative purposes, and must not use &lsquo;<code
    1.50 -   class=css>element()</code>&rsquo; to reproduce an element with significant
    1.51 -   content across the page. Instead, just insert multiple copies of the
    1.52 -   element into the document.
    1.53 -
    1.54 -  <p>The syntax for &lsquo;<code class=css>element()</code>&rsquo; is:
    1.55 -
    1.56 -  <pre class=prod><dfn
    1.57 -   id=element-reference-type>&lt;element-reference></dfn> = element( &lt;id-selector> )</pre>
    1.58 -
    1.59 -  <p>where &lsquo;<code class=css>&lt;id-selector></code>&rsquo; is an ID
    1.60 -   selector <a href="#SELECT" rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>.
    1.61 -
    1.62 -  <p>The &lsquo;<code class=css>element()</code>&rsquo; function references
    1.63 -   the element matched by its argument. If multiple elements are matched, the
    1.64 -   function references the first such element.
    1.65 -
    1.66 -  <p>The image represented by the &lsquo;<code
    1.67 -   class=css>element()</code>&rsquo; function can vary based on whether the
    1.68 -   element is visible in the document:
    1.69 -
    1.70 -  <dl>
    1.71 -   <dt>an <a href="#element-not-rendered"><i
    1.72 -    title=element-not-rendered>element that is rendered</i></a> and is not a
    1.73 -    descendant of a replaced element
    1.74 -
    1.75 -   <dd>
    1.76 -    <p>The function represents an image with its intrinsic size equal to the
    1.77 -     <dfn id=decorated-bounding-box>decorated bounding box</dfn> of the
    1.78 -     referenced element:
    1.79 -
    1.80 -    <ul>
    1.81 -     <li>for an element rendered using a CSS rendering model, the <a
    1.82 -      href="#decorated-bounding-box"><i>decorated bounding box</i></a> is the
    1.83 -      smallest axis-aligned rectangle that contains the <a
    1.84 -      href="http://www.w3.org/TR/2011/CR-css3-background-20110215/#border-image-area">border
    1.85 -      image areas</a> of all the fragments of the principal box
    1.86 -
    1.87 -     <li>for an element rendered using the SVG rendering model, <a
    1.88 -      href="http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox">the
    1.89 -      decorated bounding box is defined by SVG</a>
    1.90 -    </ul>
    1.91 -
    1.92 -    <p class=note>Note: Because images clip anything outside their bounds by
    1.93 -     default, this means that decorations that extend outside the <a
    1.94 -     href="#decorated-bounding-box"><i>decorated bounding box</i></a>, like
    1.95 -     box shadows, may be clipped.</p>
    1.96 -
    1.97 -    <p>The image is constructed by rendering the referenced element and its
    1.98 -     descendants (at the same size that they would be in the document) over
    1.99 -     an infinite &lsquo;<code class=css>transparent</code>&rsquo; canvas,
   1.100 -     positioned so that the edges of the <a
   1.101 -     href="#decorated-bounding-box"><i>decorated bounding box</i></a> are
   1.102 -     flush with the edges of the image.</p>
   1.103 -
   1.104 -    <p>If the referenced element has a transform applied to it or an
   1.105 -     ancestor, the transform must be ignored when rendering the element as an
   1.106 -     image. [[!CSS-TRANSFORMS]]</p>
   1.107 -
   1.108 -    <p>If the referenced element is broken across pages, the element is
   1.109 -     displayed as if the page content areas were joined flush in the
   1.110 -     pagination direction, with pages' edges corresponding to the initial
   1.111 -     containing block's start edge aligned. <span class=note>Elements broken
   1.112 -     across lines or columns are just rendered with their <a
   1.113 -     href="#decorated-bounding-box"><i>decorated bounding box</i></a>.</span></p>
   1.114 -
   1.115 -    <p>Implementations may either re-use existing bitmap data generated for
   1.116 -     the referenced element or regenerate the display of the element to
   1.117 -     maximize quality at the image's size (for example, if the implementation
   1.118 -     detects that the referenced element is an SVG fragment); in the latter
   1.119 -     case, the layout of the referenced element in the image must not be
   1.120 -     changed by the regeneration process. That is, the image must look
   1.121 -     identical to the referenced element, modulo rasterization quality.</p>
   1.122 -
   1.123 -    <div class=example>
   1.124 -     <p>As a somewhat silly example, a <code>&lt;p></code> element can be
   1.125 -      reused as a background elsewhere in the document:</p>
   1.126 -
   1.127 -     <pre>
   1.128 +  <!-- removed per WG decision
   1.129 +<h3 id='element-reference'>
   1.130 +Using Elements as Images: the ''element()'' notation</h3>
   1.131 +
   1.132 +	<p>The ''element()'' function allows an author to use an element in the document as an image.  As the referenced element changes appearance, the image changes as well.  This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.</p>
   1.133 +
   1.134 +	<p class='note'>Note that the ''element()'' function only reproduces the <em>appearance</em> of the referenced element, not the actual content and its structure.  Authors should only use this for decorative purposes, and must not use ''element()'' to reproduce an element with significant content across the page.  Instead, just insert multiple copies of the element into the document.</p>
   1.135 +
   1.136 +	<p>The syntax for ''element()'' is:</p>
   1.137 +
   1.138 +	<pre class=prod><dfn id='element-reference-type'>&lt;element-reference></dfn> = element( &lt;id-selector> )</pre>
   1.139 +
   1.140 +	<p>where ''&lt;id-selector>'' is an ID selector [[!SELECT]].</p>
   1.141 +
   1.142 +	<p>The ''element()'' function references the element matched by its argument.  If multiple elements are matched, the function references the first such element.</p>
   1.143 +
   1.144 +	<p>The image represented by the ''element()'' function can vary based on whether the element is visible in the document:</p>
   1.145 +
   1.146 +	<dl>
   1.147 +		<dt>an <i title="element-not-rendered">element that is rendered</i> and is not a descendant of a replaced element</dt>
   1.148 +		<dd>
   1.149 +			<p>The function represents an image with its intrinsic size equal to the <dfn>decorated bounding box</dfn> of the referenced element:
   1.150 +
   1.151 +			<ul>
   1.152 +				<li>for an element rendered using a CSS rendering model, the <i>decorated bounding box</i> is the smallest axis-aligned 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</li>
   1.153 +
   1.154 +				<li>for an element rendered using the SVG rendering model, <a href="http://www.w3.org/TR/SVGTiny12/intro.html#TermDecoratedBoundingBox">the decorated bounding box is defined by SVG</a></li>
   1.155 +			</ul>
   1.156 +
   1.157 +			<p class=note>Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the <i>decorated bounding box</i>, like box shadows, may be clipped.</p>
   1.158 +
   1.159 +			<p>The image is constructed by rendering the referenced element and its descendants (at the same size that they would be in the document) over an infinite ''transparent'' canvas, positioned so that the edges of the <i>decorated bounding box</i> are flush with the edges of the image.</p>
   1.160 +
   1.161 +			<p>If the referenced element has a transform applied to it or an ancestor, the transform must be ignored when rendering the element as an image.  [[!CSS-TRANSFORMS]]</p>
   1.162 +
   1.163 +			<p>If the referenced element is broken across pages, the element is displayed as if the page content areas were joined flush in the pagination direction, with pages' edges corresponding to the initial containing block's start edge aligned.  <span class='note'>Elements broken across lines or columns are just rendered with their <i>decorated bounding box</i>.</span></p>
   1.164 +
   1.165 +			<p>Implementations may either re-use existing bitmap data generated for the referenced element or regenerate the display of the element to maximize quality at the image's size (for example, if the implementation detects that the referenced element is an SVG fragment); in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process.  That is, the image must look identical to the referenced element, modulo rasterization quality.</p>
   1.166 +
   1.167 +			<div class='example'>
   1.168 +				<p>As a somewhat silly example, a <code>&lt;p></code> element can be reused as a background elsewhere in the document:</p>
   1.169 +
   1.170 +				<pre>
   1.171  &lt;style>
   1.172  #src { color: white; background: lime; width: 300px; height: 40px; }
   1.173  #dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
   1.174  &lt;/style>
   1.175  &lt;p id='src'>I'm an ordinary element!&lt;/p>
   1.176 -&lt;p id='dst'>I'm using the previous element as my background!&lt;/p></pre>
   1.177 -     <img alt="" src=element-function.png></div>
   1.178 -
   1.179 -   <dt>an <a href="#element-not-rendered"><i
   1.180 -    title=element-not-rendered>element that is not rendered</i></a>, but
   1.181 -    which <a href="#paint-source"><i title=paint-source>provides a paint
   1.182 -    source</i></a>
   1.183 -
   1.184 -   <dd>
   1.185 -    <p>The function represents an image with the intrinsic size and
   1.186 -     appearance of the <a href="#paint-source"><i title=paint-source>paint
   1.187 -     source</i></a>. The host language defines the size and appearance of
   1.188 -     paint sources.</p>
   1.189 -
   1.190 -    <div class=example>
   1.191 -     <p>For example, the &lsquo;<code class=css>element()</code>&rsquo;
   1.192 -      function can reference an SVG <code>&lt;pattern></code> element in an
   1.193 -      HTML document:</p>
   1.194 -
   1.195 -     <pre>
   1.196 +&lt;p id='dst'>I'm using the previous element as my background!&lt;/p></pre>
   1.197 +
   1.198 +				<img src="element-function.png" alt="">
   1.199 +			</div>
   1.200 +		</dd>
   1.201 +
   1.202 +		<dt>an <i title='element-not-rendered'>element that is not rendered</i>, but which <i title='paint-source'>provides a paint source</i></dt>
   1.203 +		<dd>
   1.204 +			<p>The function represents an image with the intrinsic size and appearance of the <i title=paint-source>paint source</i>.  The host language defines the size and appearance of paint sources.</p>
   1.205 +
   1.206 +			<div class='example'>
   1.207 +				<p>For example, the ''element()'' function can reference an SVG <code>&lt;pattern></code> element in an HTML document:</p>
   1.208 +
   1.209 +				<pre>
   1.210  &lt;!DOCTYPE html>
   1.211  &lt;svg>
   1.212  	&lt;defs>
   1.213 @@ -808,15 +740,11 @@
   1.214  	I'm using the pattern as a background!
   1.215  	If the pattern is changed or animated, 
   1.216  	my background will be updated too!
   1.217 -&lt;/p></pre>
   1.218 -
   1.219 -     <p>HTML also defines that a handful of elements, such as
   1.220 -      <code>&lt;canvas></code>, <code>&lt;img></code>, and
   1.221 -      <code>&lt;video></code>, provide a paint source. This means that CSS
   1.222 -      can, for example, reference a canvas that's being drawn into, but not
   1.223 -      displayed in the page:</p>
   1.224 -
   1.225 -     <pre>
   1.226 +&lt;/p></pre>
   1.227 +
   1.228 +				<p>HTML also defines that a handful of elements, such as <code>&lt;canvas></code>, <code>&lt;img></code>, and <code>&lt;video></code>, provide a paint source.  This means that CSS can, for example, reference a canvas that's being drawn into, but not displayed in the page:</p>
   1.229 +
   1.230 +				<pre>
   1.231  &lt;!DOCTYPE html>
   1.232  &lt;script>
   1.233  	var canvas = document.querySelector('#animated-bullet');
   1.234 @@ -829,21 +757,18 @@
   1.235  	&lt;li>So am I!&lt;/li>
   1.236  	&lt;li>As the canvas is changed over time with Javascript,
   1.237  	    we'll all update our bullet image with it!&lt;/li>
   1.238 -&lt;/ul></pre>
   1.239 -    </div>
   1.240 -
   1.241 -   <dt>anything else
   1.242 -
   1.243 -   <dd>
   1.244 -    <p>The function represents an <a href="#invalid-image"><i>invalid
   1.245 -     image</i></a>.</p>
   1.246 -
   1.247 -    <div class=example>
   1.248 -     <p>For example, all of the following &lsquo;<code
   1.249 -      class=css>element()</code>&rsquo; uses will result in a transparent
   1.250 -      background:</p>
   1.251 -
   1.252 -     <pre>
   1.253 +&lt;/ul></pre>
   1.254 +			</div>
   1.255 +		</dd>
   1.256 +
   1.257 +		<dt>anything else</dt>
   1.258 +		<dd>
   1.259 +			<p>The function represents an <i>invalid image</i>.</p>
   1.260 +
   1.261 +			<div class='example'>
   1.262 +				<p>For example, all of the following ''element()'' uses will result in a transparent background:</p>
   1.263 +
   1.264 +				<pre>
   1.265  &lt;!DOCTYPE html>
   1.266  &lt;p id='one' style="display:none;">one&lt;/p>
   1.267  &lt;iframe src="http://example.com">
   1.268 @@ -862,24 +787,17 @@
   1.269  	  There's no element with an id of "three", so this also
   1.270  	  gets rendered as a transparent image.
   1.271  	&lt;/li>
   1.272 -&lt;/ul></pre>
   1.273 -    </div>
   1.274 -  </dl>
   1.275 -
   1.276 -  <p>An element is <dfn id=element-not-rendered
   1.277 -   title=element-not-rendered>not rendered</dfn> if it does not have an
   1.278 -   associated box. This can happen, for example, if the element or an
   1.279 -   ancestor is &lsquo;<code class=css>display:none</code>&rsquo;. Host
   1.280 -   languages may define additional ways in which an element can be considered
   1.281 -   not rendered; for example, in SVG, any descendant of a
   1.282 -   <code>&lt;defs></code> element is considered to be not rendered.
   1.283 -
   1.284 -  <div class=example>
   1.285 -   <p>The &lsquo;<code class=css>element()</code>&rsquo; function can be put
   1.286 -    to many uses. For example, it can be used to show a preview of the
   1.287 -    previous or next slide in a slideshow:</p>
   1.288 -
   1.289 -   <pre>
   1.290 +&lt;/ul></pre>
   1.291 +			</div>
   1.292 +		</dd>
   1.293 +	</dl>
   1.294 +
   1.295 +	<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''.  Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <code>&lt;defs></code> element is considered to be not rendered.</p>
   1.296 +
   1.297 +	<div class='example'>
   1.298 +		<p>The ''element()'' function can be put to many uses.  For example, it can be used to show a preview of the previous or next slide in a slideshow:</p>
   1.299 +
   1.300 +		<pre>
   1.301  &lt;!DOCTYPE html>
   1.302  &lt;script>
   1.303  function navigateSlides() {
   1.304 @@ -902,91 +820,50 @@
   1.305  &lt;a id='next-preview'>Next Slide&lt;/a>
   1.306  &lt;section class='slide'>...&lt;/section>
   1.307  &lt;section class='slide current-slide'>...&lt;/section>
   1.308 -...</pre>
   1.309 -
   1.310 -   <p>In this example, the <code>navigateSlides</code> function updates the
   1.311 -    ids of the next and previous slides, which are then displayed in small
   1.312 -    floating boxes alongside the slides. Since you can't interact with the
   1.313 -    slides through the &lsquo;<code class=css>element()</code>&rsquo;
   1.314 -    function (it's just an image), you could even use <code>click</code>
   1.315 -    handlers on the preview boxes to help navigate through the page.
   1.316 -  </div>
   1.317 -
   1.318 -  <h4 id=paint-sources><span class=secno>3.3.1. </span> Paint Sources</h4>
   1.319 -
   1.320 -  <p>Host languages may define that some elements provide a <dfn
   1.321 -   id=paint-source title=paint-source>paint source</dfn>. Paint sources have
   1.322 -   an intrinsic width, height, and appearance, separate from the process of
   1.323 -   rendering, and so may be used as images even when they're <a
   1.324 -   href="#element-not-rendered"><i title=element-not-rendered>not
   1.325 -   rendered</i></a>.
   1.326 -
   1.327 -  <p>In HTML, the <code>&lt;img></code>, <code>&lt;video></code>, and
   1.328 -   <code>&lt;canvas></code> elements provide paint sources (defined in each
   1.329 -   element's section in <a
   1.330 -   href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5</a>).
   1.331 -
   1.332 -  <p>In SVG, any element that provides a <a
   1.333 -   href="http://www.w3.org/TR/SVG/pservers.html">paint server</a> provides a
   1.334 -   paint source. <span class=note>Note: In SVG1.1, the
   1.335 -   <code>&lt;linearGradient></code>, <code>&lt;radialGradient></code>, and
   1.336 -   <code>&lt;pattern></code> elements provide paint sources.</span> They are
   1.337 -   drawn as described in the spec, with the coordinate systems defined as
   1.338 -   follows:
   1.339 -
   1.340 -  <dl>
   1.341 -   <dt>objectBoundingBox
   1.342 -
   1.343 -   <dd>The coordinate system has its origin at the top left corner of the
   1.344 -    rectangle defined by the <a href="#concrete-object-size"><i>concrete
   1.345 -    object size</i></a> that it's being drawn into, and the same width and
   1.346 -    height as the <a href="#concrete-object-size"><i>concrete object
   1.347 -    size</i></a>. A single <a
   1.348 -    href="http://www.w3.org/TR/SVG/coords.html#Units">user coordinate</a> is
   1.349 -    the width and height of the <a href="#concrete-object-size"><i>concrete
   1.350 -    object size</i></a>.
   1.351 -
   1.352 -   <dt>userSpaceOnUse
   1.353 -
   1.354 -   <dd>The coordinate system has its origin at the top left corner of the
   1.355 -    rectangle defined by the <a href="#concrete-object-size"><i>concrete
   1.356 -    object size</i></a> that it's being drawn into, and the same width and
   1.357 -    height as the <a href="#concrete-object-size"><i>concrete object
   1.358 -    size</i></a>. <a href="http://www.w3.org/TR/SVG/coords.html#Units">User
   1.359 -    coordinates</a> are sized equivalently to the CSS &lsquo;<code
   1.360 -    class=css>px</code>&rsquo; unit.
   1.361 -  </dl>
   1.362 -
   1.363 -  <p class=note>It is expected that a future version of this module will
   1.364 -   define ways to refer to paint sources in external documents, or ones that
   1.365 -   are created solely by script and never inserted into a document at all.
   1.366 -
   1.367 -  <h4 id=element-cycles><span class=secno>3.3.2. </span> Cycle Detection</h4>
   1.368 -
   1.369 -  <p>The &lsquo;<code class=css>element()</code>&rsquo; function can produce
   1.370 -   nonsensical circular relationships, such as an element using itself as its
   1.371 -   own background. These relationships can be easily and reliably detected
   1.372 -   and resolved, however, by keeping track of a dependency graph and using
   1.373 -   common cycle-detection algorithms.
   1.374 -
   1.375 -  <p>The dependency graph consists of edges such that:
   1.376 -
   1.377 -  <ul>
   1.378 -   <li>every element depends on its children
   1.379 -
   1.380 -   <li>for any element A with a property using the &lsquo;<code
   1.381 -    class=css>element()</code>&rsquo; function pointing to an element B, A
   1.382 -    depends on B
   1.383 -
   1.384 -   <li>if a host language defines a way for elements to refer to the
   1.385 -    rendering of other elements, the referencing element depends on the
   1.386 -    referenced element. For example, in SVG, a &lt;use> element depends on
   1.387 -    the element it referenced.
   1.388 -  </ul>
   1.389 -
   1.390 -  <p>If the graph contains a cycle, any &lsquo;<code
   1.391 -   class=css>element()</code>&rsquo; functions participating in the cycle
   1.392 -   must represent a fully transparent image with no intrinsic dimensions.
   1.393 +...</pre>
   1.394 +
   1.395 +		<p>In this example, the <code>navigateSlides</code> function updates the ids of the next and previous slides, which are then displayed in small floating boxes alongside the slides.  Since you can't interact with the slides through the ''element()'' function (it's just an image), you could even use <code>click</code> handlers on the preview boxes to help navigate through the page.
   1.396 +	</div>
   1.397 +
   1.398 +<h4 id='paint-sources'>
   1.399 +Paint Sources</h4>
   1.400 +
   1.401 +	<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 <i title='element-not-rendered'>not rendered</i>.</p>
   1.402 +	
   1.403 +	<p>In HTML, the <code>&lt;img></code>, <code>&lt;video></code>, and <code>&lt;canvas></code> elements provide paint sources (defined in each element's section in <a href='http://www.whatwg.org/specs/web-apps/current-work/multipage/'>HTML5</a>).</p>
   1.404 +
   1.405 +	<p>In SVG, any element that provides a <a href='http://www.w3.org/TR/SVG/pservers.html'>paint server</a> provides a paint source.  <span class='note'>Note: In SVG1.1, the <code>&lt;linearGradient></code>, <code>&lt;radialGradient></code>, and <code>&lt;pattern></code> elements provide paint sources.</span>  They are drawn as described in the spec, with the coordinate systems defined as follows:</p>
   1.406 +
   1.407 +	<dl>
   1.408 +		<dt>objectBoundingBox</dt>
   1.409 +		<dd>The coordinate system has its origin at the top left corner of the rectangle defined by the <i>concrete object size</i> that it's being drawn into, and the same width and height as the <i>concrete object size</i>.  A single <a href="http://www.w3.org/TR/SVG/coords.html#Units">user coordinate</a> is the width and height of the <i>concrete object size</i>.</dd>
   1.410 +
   1.411 +		<dt>userSpaceOnUse</dt>
   1.412 +		<dd>The coordinate system has its origin at the top left corner of the rectangle defined by the <i>concrete object size</i> that it's being drawn into, and the same width and height as the <i>concrete object size</i>.  <a href="http://www.w3.org/TR/SVG/coords.html#Units">User coordinates</a> are sized equivalently to the CSS ''px'' unit.</dd>
   1.413 +	</dl>
   1.414 +
   1.415 +	<p class='note'>It is expected that a future version of this module will define ways to refer to paint sources in external documents, or ones that are created solely by script and never inserted into a document at all.</p>
   1.416 +
   1.417 +<h4 id='element-cycles'>
   1.418 +Cycle Detection</h4>
   1.419 +
   1.420 +	<p>The ''element()'' function can produce nonsensical circular relationships, 
   1.421 +	such as an element using itself as its own background.  These relationships 
   1.422 +	can be easily and reliably detected and resolved, however, by keeping 
   1.423 +	track of a dependency graph and using common cycle-detection algorithms.</p>
   1.424 +
   1.425 +	<p>The dependency graph consists of edges such that:</p>
   1.426 +
   1.427 +	<ul>
   1.428 +		<li>every element depends on its children</li>
   1.429 +
   1.430 +		<li>for any element A with a property using the ''element()'' function pointing to an element B, A depends on B</li>
   1.431 +
   1.432 +		<li>if a host language defines a way for elements to refer to the rendering of other elements, the referencing element depends on the referenced element.  For example, in SVG, a &lt;use> element depends on the element it referenced.</li>
   1.433 +	</ul>
   1.434 +
   1.435 +	<p>If the graph contains a cycle, any ''element()'' functions participating in the cycle must represent a fully transparent image with no intrinsic dimensions.</p>
   1.436 +-->
   1.437  
   1.438    <h2 id=gradients><span class=secno>4. </span> Gradients</h2>
   1.439  
   1.440 @@ -2848,15 +2725,6 @@
   1.441      href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
   1.442      </dd>
   1.443     <!---->
   1.444 -
   1.445 -   <dt id=SELECT>[SELECT]
   1.446 -
   1.447 -   <dd>Tantek &#199;elik; et al. <a
   1.448 -    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/"><cite>Selectors
   1.449 -    Level 3.</cite></a> 29 September 2011. W3C Recommendation. URL: <a
   1.450 -    href="http://www.w3.org/TR/2011/REC-css3-selectors-20110929/">http://www.w3.org/TR/2011/REC-css3-selectors-20110929/</a>
   1.451 -    </dd>
   1.452 -   <!---->
   1.453    </dl>
   1.454    <!--end-normative-->
   1.455  
   1.456 @@ -2960,9 +2828,6 @@
   1.457     <li>concrete object size, <a href="#concrete-object-size"
   1.458      title="concrete object size"><strong>5.1.</strong></a>
   1.459  
   1.460 -   <li>decorated bounding box, <a href="#decorated-bounding-box"
   1.461 -    title="decorated bounding box"><strong>3.3.</strong></a>
   1.462 -
   1.463     <li>default object size, <a href="#default-object-size"
   1.464      title="default object size"><strong>5.1.</strong></a>
   1.465  
   1.466 @@ -2978,12 +2843,6 @@
   1.467     <li>&lsquo;<code class=css>dppx</code>&rsquo;, <a href="#dppx"
   1.468      title="''dppx''"><strong>2.</strong></a>
   1.469  
   1.470 -   <li>element-not-rendered, <a href="#element-not-rendered"
   1.471 -    title=element-not-rendered><strong>3.3.</strong></a>
   1.472 -
   1.473 -   <li>&lt;element-reference>, <a href="#element-reference-type"
   1.474 -    title="&lt;element-reference>"><strong>3.3.</strong></a>
   1.475 -
   1.476     <li>ending shape, <a href="#ending-shape"
   1.477      title="ending shape"><strong>4.2.</strong></a>
   1.478  
   1.479 @@ -3061,9 +2920,6 @@
   1.480  
   1.481     <li>objects, <a href="#objects" title=objects><strong>5.</strong></a>
   1.482  
   1.483 -   <li>paint-source, <a href="#paint-source"
   1.484 -    title=paint-source><strong>3.3.1.</strong></a>
   1.485 -
   1.486     <li>&lt;position>, <a href="#position"
   1.487      title="&lt;position>"><strong>4.2.1.</strong></a>
   1.488  
     2.1 --- a/css3-images/Overview.src.html	Wed Mar 21 16:47:17 2012 -0700
     2.2 +++ b/css3-images/Overview.src.html	Wed Mar 21 16:48:21 2012 -0700
     2.3 @@ -317,7 +317,7 @@
     2.4  -->
     2.5  
     2.6  <!-- ====================================================================== -->
     2.7 -
     2.8 +<!-- removed per WG decision
     2.9  <h3 id='element-reference'>
    2.10  Using Elements as Images: the ''element()'' notation</h3>
    2.11  
    2.12 @@ -514,6 +514,8 @@
    2.13  	</ul>
    2.14  
    2.15  	<p>If the graph contains a cycle, any ''element()'' functions participating in the cycle must represent a fully transparent image with no intrinsic dimensions.</p>
    2.16 +-->
    2.17 +
    2.18  
    2.19  <h2 id="gradients">
    2.20  Gradients</h2>

mercurial