- 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