- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 23 May 2011 19:20:15 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv18219
Modified Files:
Overview.html Overview.src.html
Log Message:
Whoops, accidentally overwrote rev1.100. Merging the changes back in.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.97
retrieving revision 1.98
diff -u -d -r1.97 -r1.98
--- Overview.html 23 May 2011 19:12:28 -0000 1.97
+++ Overview.html 23 May 2011 19:20:13 -0000 1.98
@@ -186,54 +186,58 @@
class=property>object-position</code>’ property</a>
</ul>
- <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-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-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-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-rendering"><span class=secno>9. </span> Determining
- How to Scale an Image: the ‘<code
- class=property>image-rendering</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="#serialization"><span class=secno>10. </span>
+ <li><a href="#serialization"><span class=secno>8. </span>
Serialization</a>
<ul class=toc>
- <li><a href="#serializing-resolution"><span class=secno>10.1. </span>
+ <li><a href="#serializing-resolution"><span class=secno>8.1. </span>
Serializing a <resolution></a>
- <li><a href="#serializing-url-notation"><span class=secno>10.2. </span>
+ <li><a href="#serializing-url-notation"><span class=secno>8.2. </span>
Serializing the ‘<code class=css>url()</code>’ notation</a>
- <li><a href="#serializing-image-notation"><span class=secno>10.3.
- </span> Serializing the ‘<code class=css>image()</code>’ /
+ <li><a href="#serializing-image-notation"><span class=secno>8.3. </span>
+ Serializing the ‘<code class=css>image()</code>’ /
<i><image-list></i> notation</a>
- <li><a href="#serializing-element-notation"><span class=secno>10.4.
+ <li><a href="#serializing-element-notation"><span class=secno>8.4.
</span> Serializing the ‘<code class=css>element()</code>’
/ <i><element-reference></i> notation</a>
- <li><a href="#serializing-cross-fade"><span class=secno>10.5. </span>
+ <li><a href="#serializing-cross-fade"><span class=secno>8.5. </span>
Serializing the ‘<code class=css>cross-fade()</code>’ /
<i><image-combination></i> notation</a>
- <li><a href="#serializing-gradients"><span class=secno>10.6. </span>
+ <li><a href="#serializing-gradients"><span class=secno>8.6. </span>
Serializing Gradients</a>
- <li><a href="#serializing-properties"><span class=secno>10.7. </span>
+ <li><a href="#serializing-properties"><span class=secno>8.7. </span>
Serializing new properties</a>
</ul>
- <li><a href="#interpolation"><span class=secno>11. </span>
+ <li><a href="#interpolation"><span class=secno>9. </span>
Interpolation</a>
<ul class=toc>
- <li><a href="#interpolating-images"><span class=secno>11.1. </span>
+ <li><a href="#interpolating-images"><span class=secno>9.1. </span>
Interpolating <i><image></i></a>
- <li><a href="#interpolating-gradients"><span class=secno>11.2. </span>
+ <li><a href="#interpolating-gradients"><span class=secno>9.2. </span>
Interpolating <i><gradient></i></a>
</ul>
@@ -464,12 +468,13 @@
<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 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>.
+ 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>.
<div class=example>
<p>The rule below would tell the UA to load ‘<code
@@ -478,16 +483,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 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>
+ 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>
<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-image</code>’ property
- specifies that dimensionless images must stretch to cover the entire
- background positioning area <a href="#CSS3BG"
+ <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"
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
@@ -575,8 +580,8 @@
<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>
+ 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> Detecting and Resolving
@@ -1648,9 +1653,11 @@
class=property>image-position</code>’ in their stylesheets.</p>
<!-- ====================================================================== -->
- <h2 id=image-resolution><span class=secno>7. </span> Overriding Image
+ <h2 id=image-processing><span class=secno>7. </span> Image Processing</h2>
+
+ <h3 id=image-resolution><span class=secno>7.1. </span> Overriding Image
Resolutions: the ‘<a href="#image-resolution0"><code
- class=property>image-resolution</code></a>’ property</h2>
+ class=property>image-resolution</code></a>’ property</h3>
<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
@@ -1750,9 +1757,9 @@
</div>
<!-- ====================================================================== -->
- <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>
+ <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>
<p>Images from camera phones, digital cameras or scanners may be encoded
sideways. For example, the first row of image data may represent the
@@ -1844,9 +1851,9 @@
</div>
<!-- ====================================================================== -->
- <h2 id=image-rendering><span class=secno>9. </span> Determining How to
+ <h3 id=image-rendering><span class=secno>7.3. </span> Determining How to
Scale an Image: the ‘<a href="#image-rendering0"><code
- class=property>image-rendering</code></a>’ property</h2>
+ class=property>image-rendering</code></a>’ property</h3>
<table class=propdef>
<tbody>
@@ -1868,7 +1875,7 @@
<tr>
<th>Applies to:
- <td>All elements
+ <td>images
<tr>
<th>Inherited:
@@ -1932,7 +1939,7 @@
the ‘<code class=css>auto</code>’ value.</p>
<!-- ====================================================================== -->
- <h2 id=serialization><span class=secno>10. </span> Serialization</h2>
+ <h2 id=serialization><span class=secno>8. </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
@@ -1943,7 +1950,7 @@
initially be the empty string, run the steps described, and then return s.</p>
<!-- ====================================================================== -->
- <h3 id=serializing-resolution><span class=secno>10.1. </span> Serializing a
+ <h3 id=serializing-resolution><span class=secno>8.1. </span> Serializing a
<resolution></h3>
<p>The serialization of the <a
@@ -1955,13 +1962,13 @@
serialization in terms of.</p>
<!-- ====================================================================== -->
- <h3 id=serializing-url-notation><span class=secno>10.2. </span> Serializing
+ <h3 id=serializing-url-notation><span class=secno>8.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>10.3. </span>
+ <h3 id=serializing-image-notation><span class=secno>8.3. </span>
Serializing the ‘<code class=css>image()</code>’ / <a
href="#ltimage-list"><i><image-list></i></a> notation</h3>
@@ -1992,7 +1999,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-element-notation><span class=secno>10.4. </span>
+ <h3 id=serializing-element-notation><span class=secno>8.4. </span>
Serializing the ‘<code class=css>element()</code>’ / <a
href="#ltelement-reference"><i><element-reference></i></a> notation</h3>
@@ -2009,7 +2016,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-cross-fade><span class=secno>10.5. </span> Serializing
+ <h3 id=serializing-cross-fade><span class=secno>8.5. </span> Serializing
the ‘<code class=css>cross-fade()</code>’ / <a
href="#ltimage-combination"><i><image-combination></i></a> notation</h3>
@@ -2036,7 +2043,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-gradients><span class=secno>10.6. </span> Serializing
+ <h3 id=serializing-gradients><span class=secno>8.6. </span> Serializing
Gradients</h3>
<p>To serialize a <a
@@ -2156,7 +2163,7 @@
</ol>
<!-- ====================================================================== -->
- <h3 id=serializing-properties><span class=secno>10.7. </span> Serializing
+ <h3 id=serializing-properties><span class=secno>8.7. </span> Serializing
new properties</h3>
<p>To serialize the ‘<a href="#image-resolution0"><code
@@ -2201,7 +2208,7 @@
</ol>
<!-- ====================================================================== -->
- <h2 id=interpolation><span class=secno>11. </span> Interpolation</h2>
+ <h2 id=interpolation><span class=secno>9. </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
@@ -2218,8 +2225,8 @@
duration, after .3s t is equal to .3.</p>
<!-- ====================================================================== -->
- <h3 id=interpolating-images><span class=secno>11.1. </span> Interpolating
- <a href="#ltimage"><i><image></i></a></h3>
+ <h3 id=interpolating-images><span class=secno>9.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
@@ -2231,8 +2238,8 @@
to <code>cross-fade(<start image>, <end image>, t)</code>.</p>
<!-- ====================================================================== -->
- <h3 id=interpolating-gradients><span class=secno>11.2. </span>
- Interpolating <a href="#ltgradient"><i><gradient></i></a></h3>
+ <h3 id=interpolating-gradients><span class=secno>9.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.101
retrieving revision 1.102
diff -u -d -r1.101 -r1.102
--- Overview.src.html 23 May 2011 19:12:28 -0000 1.101
+++ Overview.src.html 23 May 2011 19:20:13 -0000 1.102
@@ -255,7 +255,7 @@
<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, it must be mirrored in the inline dimension
+ with opposite directionality, is must be mirrored in the inline dimension
when rendered.</p>
<p>Multiple arguments can be given separated by commas, in which case the
@@ -298,8 +298,7 @@
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>
@@ -317,8 +316,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 bounding box
- of the border boxes 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 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
@@ -342,22 +341,10 @@
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:20:17 UTC