- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 21 May 2011 00:40:11 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv31365
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial tweaks to fallback color. Add heading for image processing section
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.95
retrieving revision 1.96
diff -u -d -r1.95 -r1.96
--- Overview.html 20 May 2011 22:42:22 -0000 1.95
+++ Overview.html 21 May 2011 00:40:09 -0000 1.96
@@ -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 20 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 May 2011</h2>
<dl>
<dt>Latest Version:
@@ -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
@@ -1633,9 +1638,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
@@ -1735,9 +1742,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
@@ -1829,9 +1836,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>
@@ -1853,7 +1860,7 @@
<tr>
<th>Applies to:
- <td>All elements
+ <td>images
<tr>
<th>Inherited:
@@ -1917,7 +1924,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
@@ -1928,7 +1935,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
@@ -1940,13 +1947,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>
@@ -1977,7 +1984,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>
@@ -1994,7 +2001,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>
@@ -2021,7 +2028,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
@@ -2141,7 +2148,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
@@ -2186,7 +2193,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
@@ -2203,8 +2210,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
@@ -2216,8 +2223,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.99
retrieving revision 1.100
diff -u -d -r1.99 -r1.100
--- Overview.src.html 20 May 2011 22:42:22 -0000 1.99
+++ Overview.src.html 21 May 2011 00:40:09 -0000 1.100
@@ -259,27 +259,27 @@
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
- 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 <i>intrinsic dimensions</i>.
+ 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
+ <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 <i>intrinsic
+ dimensions</i>.
<div class="example">
<p>The rule below would tell the UA to load ''wavy.svg'' if
it can; failing that to load ''wavy.png'' and display it at 150dpi;
failing that to display ''wavy.gif''; and finally, if none of the images
can be loaded and displayed, to use the color ''rgba(0,0,255,0.5)'' 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>
+ 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 'background-image' property specifies that dimensionless images
- must stretch to cover the entire background positioning area
+ <p>The 'background-size' property specifies that dimensionless images
+ by default stretch to cover the entire background positioning area
[[CSS3BG]], 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 over the 'background-color' (if any).</p>
@@ -1231,8 +1231,11 @@
<!-- ====================================================================== -->
-<h2 id="image-resolution">
-Overriding Image Resolutions: the 'image-resolution' property</h2>
+<h2 id="image-processing">
+Image Processing</h2>
+
+<h3 id="image-resolution">
+Overriding Image Resolutions: the 'image-resolution' 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
@@ -1315,8 +1318,8 @@
<!-- ====================================================================== -->
-<h2 id="image-orientation">
-Orienting an Image on the Page: the 'image-orientation' property</h2>
+<h3 id="image-orientation">
+Orienting an Image on the Page: the 'image-orientation' 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 leftmost or
@@ -1391,8 +1394,8 @@
<!-- ====================================================================== -->
-<h2 id='image-rendering'>
-Determining How to Scale an Image: the 'image-rendering' property</h2>
+<h3 id='image-rendering'>
+Determining How to Scale an Image: the 'image-rendering' property</h3>
<table class=propdef>
<tr>
@@ -1406,7 +1409,7 @@
<td>auto
<tr>
<th>Applies to:
- <td>All elements
+ <td>images
<tr>
<th>Inherited:
<td>yes
Received on Saturday, 21 May 2011 00:40:13 UTC