- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 23 May 2011 19:12:30 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv17531
Modified Files:
Overview.html Overview.src.html
Log Message:
Tweaked definition of element()
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.96
retrieving revision 1.97
diff -u -d -r1.96 -r1.97
--- Overview.html 21 May 2011 00:40:09 -0000 1.96
+++ Overview.html 23 May 2011 19:12:28 -0000 1.97
@@ -20,7 +20,7 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 May 2011</h2>
<dl>
<dt>Latest Version:
@@ -186,58 +186,54 @@
class=property>object-position</code>’ property</a>
</ul>
- <li><a href="#image-processing"><span class=secno>7. </span> Image
- Processing</a>
- <ul class=toc>
- <li><a href="#image-resolution"><span class=secno>7.1. </span>
- Overriding Image Resolutions: the ‘<code
- class=property>image-resolution</code>’ property</a>
+ <li><a href="#image-resolution"><span class=secno>7. </span> Overriding
+ Image Resolutions: the ‘<code
+ class=property>image-resolution</code>’ property</a>
- <li><a href="#image-orientation"><span class=secno>7.2. </span>
- Orienting an Image on the Page: the ‘<code
- class=property>image-orientation</code>’ property</a>
+ <li><a href="#image-orientation"><span class=secno>8. </span> Orienting an
+ Image on the Page: the ‘<code
+ class=property>image-orientation</code>’ property</a>
- <li><a href="#image-rendering"><span class=secno>7.3. </span>
- Determining How to Scale an Image: the ‘<code
- class=property>image-rendering</code>’ property</a>
- </ul>
+ <li><a href="#image-rendering"><span class=secno>9. </span> Determining
+ How to Scale an Image: the ‘<code
+ class=property>image-rendering</code>’ property</a>
- <li><a href="#serialization"><span class=secno>8. </span>
+ <li><a href="#serialization"><span class=secno>10. </span>
Serialization</a>
<ul class=toc>
- <li><a href="#serializing-resolution"><span class=secno>8.1. </span>
+ <li><a href="#serializing-resolution"><span class=secno>10.1. </span>
Serializing a <resolution></a>
- <li><a href="#serializing-url-notation"><span class=secno>8.2. </span>
+ <li><a href="#serializing-url-notation"><span class=secno>10.2. </span>
Serializing the ‘<code class=css>url()</code>’ notation</a>
- <li><a href="#serializing-image-notation"><span class=secno>8.3. </span>
- Serializing the ‘<code class=css>image()</code>’ /
+ <li><a href="#serializing-image-notation"><span class=secno>10.3.
+ </span> Serializing the ‘<code class=css>image()</code>’ /
<i><image-list></i> notation</a>
- <li><a href="#serializing-element-notation"><span class=secno>8.4.
+ <li><a href="#serializing-element-notation"><span class=secno>10.4.
</span> Serializing the ‘<code class=css>element()</code>’
/ <i><element-reference></i> notation</a>
- <li><a href="#serializing-cross-fade"><span class=secno>8.5. </span>
+ <li><a href="#serializing-cross-fade"><span class=secno>10.5. </span>
Serializing the ‘<code class=css>cross-fade()</code>’ /
<i><image-combination></i> notation</a>
- <li><a href="#serializing-gradients"><span class=secno>8.6. </span>
+ <li><a href="#serializing-gradients"><span class=secno>10.6. </span>
Serializing Gradients</a>
- <li><a href="#serializing-properties"><span class=secno>8.7. </span>
+ <li><a href="#serializing-properties"><span class=secno>10.7. </span>
Serializing new properties</a>
</ul>
- <li><a href="#interpolation"><span class=secno>9. </span>
+ <li><a href="#interpolation"><span class=secno>11. </span>
Interpolation</a>
<ul class=toc>
- <li><a href="#interpolating-images"><span class=secno>9.1. </span>
+ <li><a href="#interpolating-images"><span class=secno>11.1. </span>
Interpolating <i><image></i></a>
- <li><a href="#interpolating-gradients"><span class=secno>9.2. </span>
+ <li><a href="#interpolating-gradients"><span class=secno>11.2. </span>
Interpolating <i><gradient></i></a>
</ul>
@@ -463,18 +459,17 @@
<p>If a directional keyword (‘<code class=css>ltr</code>’ or
‘<code class=css>rtl</code>’) is given, the image itself gains
that directionality. If the image is used in a property on an element with
- opposite directionality, is must be mirrored in the inline dimension when
+ opposite directionality, it must be mirrored in the inline dimension when
rendered.
<p>Multiple arguments can be given separated by commas, in which case the
function represents the first <image-decl> 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>.
+ the browser can successfully load and display. The final argument may be a
+ <color> which serves as an ultimate fallback if none of the preceding
+ <image-decl>s can be used, to ensure that any text or images placed on
+ top of the image are still easily readable. 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>.
<div class=example>
<p>The rule below would tell the UA to load ‘<code
@@ -483,16 +478,16 @@
failing that to display ‘<code class=css>wavy.gif</code>’;
and finally, if none of the images can be loaded and displayed, to use
the color ‘<code class=css>rgba(0,0,255,0.5)</code>’ to
- create a dimensionless background image. For example, the browser might
- not understand how to render SVG images, the PNG may be malformed, and
- the GIF might not exist on the server and return 404 error instead of an
- image.</p>
+ create a dimensionless background image. For example, the browser may not
+ understand how to render SVG images, the PNG may be malformed, and the
+ GIF may not exist on the server, so requesting it returns an HTML 404
+ page instead of an image.</p>
<pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", rgba(0,0,255,0.5));</pre>
- <p>The ‘<code class=property>background-size</code>’ property
- specifies that dimensionless images by default stretch to cover the
- entire background positioning area <a href="#CSS3BG"
+ <p>The ‘<code class=property>background-image</code>’ property
+ specifies that dimensionless images must stretch to cover the entire
+ background positioning area <a href="#CSS3BG"
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
specified images can be displayed the background will be painted
semi-transparent blue. As with any image, this fallback will be painted
@@ -514,8 +509,8 @@
slide in a slideshow. The syntax for ‘<code
class=css>element()</code>’ is defined as:
- <pre
- class=prod><dfn id=ltelement-reference><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
+ <pre class=prod><dfn id=ltelement-reference><element-reference></dfn> =
+ element( [<id-selector> | <identifier> ] )</pre>
<p>where <id-selector> is an ID selector <a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{!SELECT}}--></a>, and <identifier> is an
@@ -540,14 +535,14 @@
<p>If the ‘<code class=css>element()</code>’ function refers to
an element, then it represents an image with width and height equal to the
- width and height of the margin box of the referenced element. The image
- must be constructed by rendering the referenced element and its
- descendants at the same size that the element would be in its document,
- over an infinite transparent black background, positioned so that the
- edges of the margin box of the element is flush with the edges of the
- image. <span class=note>If the element has decorations or descendants that
- extend outside the margin box, these will be clipped to the margin box in
- the generated image by default. ‘<code
+ width and height of the bounding box of the border boxes of the referenced
+ element. The image must be constructed by rendering the referenced element
+ and its descendants at the same size that the element would be in its
+ document, over an infinite transparent black background, positioned so
+ that the edges of the margin box of the element is flush with the edges of
+ the image. <span class=note>If the element has decorations or descendants
+ that extend outside the margin box, these will be clipped to the margin
+ box in the generated image by default. ‘<code
class=css>background-repeat:extend</code>’ may allow the author to
override this behavior so that decorations and descendants outside the
margin box are still painted.</span> If the referenced element or an
@@ -566,7 +561,22 @@
regeneration process. That is, the image must look identical to the
referenced element, modulo rasterization quality.
+ <p class=note>While the decision is up to the host language, it is intended
+ that element() can validly refer to some types of elements that are
+ associated with the document but not descendants of the root element. For
+ example, in HTML the <img>, <video>, and <canvas> elements all
+ have a reasonable notion of what it means to "be rendered" without being
+ part of a document, and so they can be created with Javascript, associated
+ with a <a href="#css-element-reference-identifier"><i>CSS Element
+ Reference Identifier</i></a>, and used in element() without being appended
+ to the document.
+
<div class=example> TODO: copy an example from the MozHacks article</div>
+
+ <p class=issue>Moz's implementation allows directly referencing SVG paint
+ servers. This doesn't come for free - do we want to spec it out? I want to
+ be able to use SVG paint servers *somehow*, and this is as reasonable a
+ place as any, I guess.</p>
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
@@ -1638,11 +1648,9 @@
class=property>image-position</code>’ in their stylesheets.</p>
<!-- ====================================================================== -->
- <h2 id=image-processing><span class=secno>7. </span> Image Processing</h2>
-
- <h3 id=image-resolution><span class=secno>7.1. </span> Overriding Image
+ <h2 id=image-resolution><span class=secno>7. </span> Overriding Image
Resolutions: the ‘<a href="#image-resolution0"><code
- class=property>image-resolution</code></a>’ property</h3>
+ class=property>image-resolution</code></a>’ property</h2>
<p>The <i>image resolution</i> is defined as the number of image pixels per
unit length, e.g., pixels per inch. Some image formats can record
@@ -1742,9 +1750,9 @@
</div>
<!-- ====================================================================== -->
- <h3 id=image-orientation><span class=secno>7.2. </span> Orienting an Image
- on the Page: the ‘<a href="#image-orientation0"><code
- class=property>image-orientation</code></a>’ property</h3>
+ <h2 id=image-orientation><span class=secno>8. </span> Orienting an Image on
+ the Page: the ‘<a href="#image-orientation0"><code
+ class=property>image-orientation</code></a>’ property</h2>
<p>Images from camera phones, digital cameras or scanners may be encoded
sideways. For example, the first row of image data may represent the
@@ -1836,9 +1844,9 @@
</div>
<!-- ====================================================================== -->
- <h3 id=image-rendering><span class=secno>7.3. </span> Determining How to
+ <h2 id=image-rendering><span class=secno>9. </span> Determining How to
Scale an Image: the ‘<a href="#image-rendering0"><code
- class=property>image-rendering</code></a>’ property</h3>
+ class=property>image-rendering</code></a>’ property</h2>
<table class=propdef>
<tbody>
@@ -1860,7 +1868,7 @@
<tr>
<th>Applies to:
- <td>images
+ <td>All elements
<tr>
<th>Inherited:
@@ -1924,7 +1932,7 @@
the ‘<code class=css>auto</code>’ value.</p>
<!-- ====================================================================== -->
- <h2 id=serialization><span class=secno>8. </span> Serialization</h2>
+ <h2 id=serialization><span class=secno>10. </span> Serialization</h2>
<p>This section describes the serialization of all new properties and value
types introduced in this specification, for the purpose of interfacing
@@ -1935,7 +1943,7 @@
initially be the empty string, run the steps described, and then return s.</p>
<!-- ====================================================================== -->
- <h3 id=serializing-resolution><span class=secno>8.1. </span> Serializing a
+ <h3 id=serializing-resolution><span class=secno>10.1. </span> Serializing a
<resolution></h3>
<p>The serialization of the <a
@@ -1947,13 +1955,13 @@
serialization in terms of.</p>
<!-- ====================================================================== -->
- <h3 id=serializing-url-notation><span class=secno>8.2. </span> Serializing
+ <h3 id=serializing-url-notation><span class=secno>10.2. </span> Serializing
the ‘<code class=css>url()</code>’ notation</h3>
<p>The serialization of the url() function is defined in the CSSOM spec.</p>
<!-- ====================================================================== -->
- <h3 id=serializing-image-notation><span class=secno>8.3. </span>
+ <h3 id=serializing-image-notation><span class=secno>10.3. </span>
Serializing the ‘<code class=css>image()</code>’ / <a
href="#ltimage-list"><i><image-list></i></a> notation</h3>
@@ -1984,7 +1992,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-element-notation><span class=secno>8.4. </span>
+ <h3 id=serializing-element-notation><span class=secno>10.4. </span>
Serializing the ‘<code class=css>element()</code>’ / <a
href="#ltelement-reference"><i><element-reference></i></a> notation</h3>
@@ -2001,7 +2009,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-cross-fade><span class=secno>8.5. </span> Serializing
+ <h3 id=serializing-cross-fade><span class=secno>10.5. </span> Serializing
the ‘<code class=css>cross-fade()</code>’ / <a
href="#ltimage-combination"><i><image-combination></i></a> notation</h3>
@@ -2028,7 +2036,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-gradients><span class=secno>8.6. </span> Serializing
+ <h3 id=serializing-gradients><span class=secno>10.6. </span> Serializing
Gradients</h3>
<p>To serialize a <a
@@ -2148,7 +2156,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-properties><span class=secno>8.7. </span> Serializing
+ <h3 id=serializing-properties><span class=secno>10.7. </span> Serializing
new properties</h3>
<p>To serialize the ‘<a href="#image-resolution0"><code
@@ -2193,7 +2201,7 @@
</ol>
<!-- ====================================================================== -->
- <h2 id=interpolation><span class=secno>9. </span> Interpolation</h2>
+ <h2 id=interpolation><span class=secno>11. </span> Interpolation</h2>
<p>This section describes how to interpolate between new value types
defined in this specification, for use with modules such as CSS
@@ -2210,8 +2218,8 @@
duration, after .3s t is equal to .3.</p>
<!-- ====================================================================== -->
- <h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a
- href="#ltimage"><i><image></i></a></h3>
+ <h3 id=interpolating-images><span class=secno>11.1. </span> Interpolating
+ <a href="#ltimage"><i><image></i></a></h3>
<p>All images can be interpolated, though some special types of images
(like some gradients) have their own special interpolation rules. In
@@ -2223,8 +2231,8 @@
to <code>cross-fade(<start image>, <end image>, t)</code>.</p>
<!-- ====================================================================== -->
- <h3 id=interpolating-gradients><span class=secno>9.2. </span> Interpolating
- <a href="#ltgradient"><i><gradient></i></a></h3>
+ <h3 id=interpolating-gradients><span class=secno>11.2. </span>
+ Interpolating <a href="#ltgradient"><i><gradient></i></a></h3>
<p>Gradient images can be interpolated directly in CSS transitions and
animations, smoothly animating from one gradient to another. There are
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.100
retrieving revision 1.101
diff -u -d -r1.100 -r1.101
--- Overview.src.html 21 May 2011 00:40:09 -0000 1.100
+++ Overview.src.html 23 May 2011 19:12:28 -0000 1.101
@@ -255,11 +255,11 @@
<p>If a directional keyword (''ltr'' or ''rtl'') is given, the image itself
gains that directionality. If the image is used in a property on an element
- with opposite directionality, is must be mirrored in the inline dimension
+ with opposite directionality, it must be mirrored in the inline dimension
when rendered.</p>
<p>Multiple arguments can be given separated by commas, in which case the
- function represents the first <image-decl> representing an image that
+ function represents the first <image-decl> 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
@@ -298,7 +298,8 @@
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><element-reference></dfn> = element( [<id-selector> | <identifier> ] )</pre>
+ <pre class=prod><dfn><element-reference></dfn> =
+ element( [<id-selector> | <identifier> ] )</pre>
<p>where <id-selector> is an ID selector [[!SELECT]], and <identifier>
is an identifer [[!CSS3VAL]].</p>
@@ -316,8 +317,8 @@
image represented by the function must change accordingly.</p>
<p>If the ''element()'' function refers to an element, then it represents
- an image with width and height equal to the width and height of the margin
- box of the referenced element. The image must be constructed by rendering
+ an image with width and height equal to the width and height of the bounding box
+ of the border boxes of the referenced element. The image must be constructed by rendering
the referenced element and its descendants at the same size that the element
would be in its document, over an infinite transparent black background,
positioned so that the edges of the margin box of the element is flush with
@@ -341,10 +342,22 @@
the image must look identical to the referenced element, modulo rasterization
quality.</p>
+ <p class=note>While the decision is up to the host language, it is intended that
+ element() can validly refer to some types of elements that are associated with the
+ document but not descendants of the root element. For example, in HTML the
+ <img>, <video>, and <canvas> elements all have a reasonable notion of
+ what it means to "be rendered" without being part of a document, and so they can
+ be created with Javascript, associated with a <i>CSS Element Reference Identifier</i>,
+ and used in element() without being appended to the document.</p>
+
<div class=example>
TODO: copy an example from the MozHacks article
</div>
+ <p class=issue>Moz's implementation allows directly referencing SVG paint servers.
+ This doesn't come for free - do we want to spec it out? I want to be able to
+ use SVG paint servers *somehow*. I'm not sure if this is quite the place to do it, though.</p>
+
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id='element-cycles'>
Received on Monday, 23 May 2011 19:12:33 UTC