- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 02 Aug 2011 22:20:47 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv14380/css3-images
Modified Files:
Overview.src.html
Log Message:
Moved image(), cross-fade(), the image-* properties, and the serialization and interpolation sections to Images 4, per WG resolution.
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.124
retrieving revision 1.125
diff -u -d -r1.124 -r1.125
--- Overview.src.html 2 Aug 2011 20:27:00 -0000 1.124
+++ Overview.src.html 2 Aug 2011 22:20:45 -0000 1.125
@@ -251,83 +251,6 @@
<!-- ====================================================================== -->
-<h3 id="image-notation">
-Image Annotations and Fallbacks: the ''image()'' notation</h3>
-
- <p>The ''image()'' notation allows an author to tag an image with a few types
- of useful processing instructions which can affect the rendering of the image
- and to declare fallback images to be used if the original image can't be
- decoded or is a type that the browser doesn't recognize.
- The author can specify the desired resolution the image should be rendered at,
- declare the directionality of an image so that it can be automatically be
- reversed if used in text with a different directionality.</p>
-
- <p>So that authors can take advantage of CSS's forwards-compatible parsing
- rules to provide a fallback for image slices, implementations that support
- the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
- form of media fragment identifiers for images. [[!MEDIA-FRAGS]]
-
- <p>The ''image()'' notation is defined as:
-
- <pre class='prod'><dfn><image-list></dfn> =
- image( [ <image-decl> , ]* [ <image-decl> | <color> ] )</pre>
-
- <p>where <image-decl> is given by:</p>
-
- <pre class='prod'><dfn><image-decl></dfn> =
- <string> [ [ snap? && <resolution> ] || [ ltr | rtl ] ]</pre>
-
- <p>Each <i><image-decl></i> represents the external image referenced
- by the URI given as the <string> argument.</p>
-
- <p>If the image is a raster image and a <resolution> is given, the image
- must be rendered at that resolution. This must override the default resolution
- given by the 'image-resolution' property.
- <span class='note'>Recall that the default resolution of raster images is ''1dppx'',
- so that one image pixel corresponds to one CSS ''px'' unit.</span> If the
- ''snap'' keyword is also specified, and the specified resolution would make
- one image pixel larger than one device pixel, the image must be rendered at
- the specified resolution, rounded to the nearest value that would map one image
- pixel to an integer number of device pixels; if the specified resolution would
- make one image pixel smaller than one device pixel, the image must be rendered
- at the specified resolution, rounded to the nearest value that would map an
- integer number of image pixels to one device pixel. If the image is a vector
- image, specifying a resolution has no effect.</p>
-
- <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
- 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 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 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-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>
- </div>
-
-<!-- ====================================================================== -->
-
<h3 id='element-reference'>
Using Elements as Images: the ''element()'' notation</h3>
@@ -406,48 +329,6 @@
<p class=issue>Someone else needs to review this and make sure that I'm
not missing any cycles.</p>
-<!-- ====================================================================== -->
-
-<h3 id='cross-fade-function'>
-Combining images: the ''cross-fade()'' notation</h3>
-
- <p>When transitioning between images, CSS requires a way to explicitly refer
- to the intermediate image that is a combination of the start and end images.
- This is accomplished with the ''cross-fade()'' function, which indicates
- the two images to be combined and how far along in the transition the
- combination is.
-
- <p class="note">Authors can also use the ''cross-fade()'' function for many
- simple image manipulations, such as tinting an image with a solid color or
- highlighting a particular area of the page by combining an image with a
- radial gradient.
-
- <p>The syntax for ''cross-fade()'' is defined as:</p>
-
- <pre class=prod><dfn><image-combination></dfn> = cross-fade( <image>, <image>, <percentage> )</pre>
-
- <p>The function represents an image generated by combining the first and
- second image (referred to in this section as the "start" and "end" images,
- respectively). The percentage represents how far along the transformation
- is, with 0% representing the start image, 100% representing the end image,
- and percentages between that representing corresponding combinations of the
- two images. The <code><percentage></code> must be between 0% and 100% inclusive;
- any other value is invalid.</p>
-
- <p>More precisely, given ''cross-fade(A,B,p)'', where <var>A</var> and <var>B</var>
- are images and <var>p</var> is a percentage between 0% and 100%, the function represents
- an image with width equal to
- <code>width<sub>A</sub> × (1-<var>p</var>) + width<sub>B</sub> × p</code>
- and height equal to
- <code>height<sub>A</sub> × (1-<var>p</var>) + height<sub>B</sub> × p</code>.
- The contents of the image must be constructed by first scaling <var>A</var> and <var>B</var> to the size of the
- generated image, then applying
- <code>dissolve(<var>A</var>,1-<var>p</var>) plus dissolve(<var>B</var>,<var>p</var>)</code>.
- <span class='note'>The "dissolve()" function and "plus" compositing operator are defined
- in the literature by Porter-Duff.</span></p>
-
-<!-- ====================================================================== -->
-
<h2 id="gradients">
Gradients</h2>
@@ -1302,722 +1183,6 @@
<!-- ====================================================================== -->
-<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
- record information about the resolution of images. This information
- can be helpful when determining the actual size of the image in the
- formatting process. However, the information can also be wrong, in
- which case it should be ignored. By default, CSS assumes a resolution
- of one image pixel per CSS ''px'' unit; however, the 'image-resolution'
- property allows using some other resolution.
-
- <table class="propdef">
- <tr>
- <th>Name:
- <td><dfn>image-resolution</dfn>
- <tr>
- <th>Value:
- <td>from-image || <resolution>
- <tr>
- <th>Initial:
- <td>1dppx
- <tr>
- <th>Applies to:
- <td>all elements
- <tr>
- <th>Inherited:
- <td>yes
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value
- </table>
-
- <p>The 'image-resolution' property specifies the resolution of all images used
- in or on the element: images in content (e.g. replaced elements and generated
- content), background images, list markers, etc. Values have the following
- meanings:</p>
-
- <dl>
- <dt><resolution></dt>
- <dd>The value sets the resolution of the image. In combination with
- ''from-image'', the specified resolution is only used if the image
- does not have a resolution.</dd>
-
- <dt>from-image</dt>
- <dd>The UA must look for the resolution in the image itself. If the
- image does not have a resolution, the specified <resolution>
- value is used, or ''1dppx'' if none is given.</dd>
- </dl>
-
- <p>This property must have no effect on vector images, as vector images
- do not have a concept of "resolution".</p>
-
- <p class='note'>Note that for all images other than the contents of replaced
- elements, the ''image()'' function may be used to override the resolution set
- here.</p>
-
- <div class="example">
- <p>This rule specifies that the UA should use the image resolution
- found in the image itself, falling back to 1 image pixel per CSS
- ''px'' unit.</p>
-
- <pre class=css>img { image-resolution: from-image }</pre>
- </div>
-
- <div class="example">
- <p>Using this rule, the image resolution is set to 300dpi and the
- resolution in the image, if any, is ignored.</p>
-
- <pre>img { image-resolution: 300dpi }</pre>
- </div>
-
-
- <div class="example">
- <p>These rules both specify that the UA should use the image resolution
- found in the image itself. If the image has no resolution, the
- resolution is set to 300dpi.</p>
-
- <pre>
-img { image-resolution: from-image 300dpi }
-img { image-resolution: 300dpi from-image }
- </pre>
- </div>
-
-<!-- ====================================================================== -->
-
-<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
- rightmost column of image pixels. Furthermore, often such devices have limited
- resources, and do not have the capability to rotate the image into an upright
- orientation. However, this type of device may have internal knowledge or can
- accept input from its user as to the rotational correction to perform.</p>
-
- <p>The image-orientation property provides a way to specify an "out-of-band"
- rotation to be applied to image source data. This facility is not intended to
- specify layout transformations such as arbitrary rotation or flipping the image
- in the horizontal or vertical direction. It is not needed to correctly orient
- an image when printing in landscape versus portrait orientation, as that
- rotation is done as part of layout. It should only be used to correct
- incorrectly-oriented images.</p>
-
- <table class="propdef">
- <tr>
- <th>Name:
- <td><dfn>image-orientation</dfn>
- <tr>
- <th>Value:
- <td><angle>
- <tr>
- <th>Initial:
- <td>0deg
- <tr>
- <th>Applies to:
- <td>images
- <tr>
- <th>Inherited:
- <td>no
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed value:
- <td>specified value, rounded and normalized (see text)
- </table>
-
- <p>'image-orientation' specifies an orthogonal rotation to be applied to an image
- before it is laid out. CSS layout processing applies to the image <em>after</em>
- rotation. This implies, for example:</p>
-
- <ul>
- <li>The intrinsic height and width are derived from the rotated rather than the
- original image dimensions;</li>
-
- <li>The height (width) property applies to the vertical (horizontal) dimension
- of the image, <em>after</em> rotation.</li>
- </ul>
-
- <p>Positive values cause the image to be rotated to the right (in a clockwise
- direction), while negative values cause a rotation to the left. The computed
- value of the property is calculated by rounding the specified angle to the
- nearest quarter-turn (90deg, 100grad, .25turn, etc.), rounding away from 0
- (that is, 45deg is rounded to 90deg, while -45deg is rounded to -90deg), then
- moduloing the value by 1 turn (360deg, 400grad, etc.).</p>
-
- <div class="example">
- <p>The following example rotates the image 90 degrees clockwise:</p>
-
- <pre>
-img.ninety { image-orientation: 90deg }
-...
-<img class="ninety" src=... />
- </pre>
-
- <p>The same effect could be achieved with, for example, an angle of -270deg
- or 450deg.</p>
- </div>
-
-<!-- ====================================================================== -->
-
-<h3 id='image-rendering'>
-Determining How to Scale an Image: the 'image-rendering' property</h3>
-
- <table class=propdef>
- <tr>
- <th>Name:
- <td><dfn>image-rendering</dfn>
- <tr>
- <th>Value:
- <td>auto | crisp-edges<!-- | pixelated -->
- <tr>
- <th>Initial:
- <td>auto
- <tr>
- <th>Applies to:
- <td>all elements
- <tr>
- <th>Inherited:
- <td>yes
- <tr>
- <th>Media:
- <td>visual
- <tr>
- <th>Computed Value:
- <td>specified value
- </table>
-
- <p>The 'image-rendering' property provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm. When specified on an element, it applies to all images given in properties for the element, such as background images, list-style images, or the content of replaced elements when they represent an image that must be scaled. The values of the 'image-rendering' property are interpreted as follows:</p>
-
- <dl>
- <dt><dfn title="image-rendering-auto">auto</dfn></dt>
- <dd>
- <p>The image should be scaled with an algorithm that maximizes the appearance of the image, possibly smoothing colors or introducing minor blur. This value is intended for use with photos and similar "real-life" images.</p>
-
- <p>For example, algorithms such as bilinear interpolation or lancosz interpolation are acceptable. Lesser or greater algorithms may be used as well; in high-load situations, user agents may choose to use a very cheap algorithm such as nearest-neighbor, while in low-load situations they may choose to use a very expensive and high-quality scaling algorithm.</p>
- </dd>
-
- <dt><dfn>crisp-edges</dfn></dt>
- <dd>
- <p>The image should be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art, or diagrams with sharp, straight lines. When downscaling an image, some color-smoothing is acceptable, but should not introduce blurriness.</p>
-
- <p>For example, when upscaling an image, algorithms such as nearest-neighbor are acceptable, as are specialized pixel-art scaling algorithms like EPX or <a href="http://research.microsoft.com/en-us/um/people/kopf/pixelart/">the algorithm described in this SIGGRAPH paper</a>. When downscaling an image, algorithms such as nearest-neighbor or bilinear interpolation are acceptable.</p>
- </dd>
-
- <!--<dt><dfn>pixelated</dfn></dt>
- <dd>
- <p>The image should be scaled with an algorithm that preserves a "pixelated" look. This is intended for images such as pixel art.</p>
-
- <p>If the image is upscaled an integer multiple of its original size, it must be scaled with the nearest-neighbor algorithm. When upscaled by any other factor, nearest-neighbor is acceptable, as are other algorithms that preserve a pixelated look. When downscaling an image, any algorithm that preserves a pixelated look are acceptable, such as nearest-neighbor or bilinear interpolation.</p>
- </dd>-->
- </dl>
-
- <p>This property does <em>not</em> dictate any particular scaling algorithm to be used. For example, with ''image-rendering:auto'', a user agent might scale images with bilinear interpolation by default, switch to nearest-neighbor interpolation in high-load situations, and switch to a high-quality scaling algorithm like Lanczos interpolation for static images that aren't moving or changing. Similarly, with ''image-rendering:crisp-edges'', a user agent might scale images with nearest-neighbor interpolation by default, and switch to EPX interpolation in low-load situations.</p>
-
- <p>This property must only have an effect on raster images. Vector images can be upscaled or downscaled infinitely without losing detail, and thus do not require any hints as to what details are important to preserve.</p>
-
- <p>This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''. These are now deprecated; a user agent may accept them as valid values, but must treat them as aliases for the ''auto'' value.</p>
-
- <p class=issue>dbaron suggests that optimizeSpeed should instead alias to crisp-edges.</p>
-
-<!-- ====================================================================== -->
-
-<h2 id='serialization'>
-Serialization</h2>
-
- <p>This section describes the serialization of all new properties and value
- types introduced in this specification, for the purpose of interfacing with
- the CSS Object Model [[CSSOM]].</p>
-
- <p>All of these algorithms refer to a variable "s". For each, let s initially
- be the empty string, run the steps described, and then return s.</p>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-resolution'>
-Serializing a <resolution></h3>
-
- <p>The serialization of the <i><resolution></i> value type is defined in
- the CSSOM spec.</p>
-
- <p class=note>This spec defines several new units for resolutions. These
- can all be converted to the canonical "dpcm" unit that CSSOM defines the
- serialization in terms of.</p>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-url-notation'>
-Serializing the ''url()'' notation</h3>
-
- <p>The serialization of the url() function is defined in the CSSOM spec.</p>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-image-notation'>
-Serializing the ''image()'' / <i><image-list></i> notation</h3>
-
- <p>To serialize an <i><image-list></i>:</p>
-
- <ol>
- <li>Append "image(" to s.</li>
-
- <li>For each argument, serialize the argument as an <image-decl> or
- <color> as appropriate, and append it to s. Then, if it is not the final
- argument, append a comma and a space ", " to s.</li>
-
- <li>Append a close parenthesis ")" to s.</li>
- </ol>
-
- <p>To serialize an <i><image-decl></i>:</p>
-
- <ol>
- <li>Serialize the first part of the value (the <string>) as a string.</li>
-
- <li>If a <resolution> was provided, append a space " " to s. Then
- serialize the <resolution> and append it to s.</li>
-
- <li>If the 'snap' keyword was provided, append a space " " and the literal
- string "snap" to s.</li>
-
- <li>If a directional keyword was provided, append a space " " to s, then
- append the keyword to s.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-element-notation'>
-Serializing the ''element()'' / <i><element-reference></i> notation</h3>
-
- <p>To serialize an <i><element-reference></i>:</p>
-
- <ol>
- <li>Append "element(" to s.</li>
-
- <li>Serialize the argument as a selector or identifier, as appropriate,
- and append it to s.</li>
-
- <li>Append a close parenthesis ")" to s.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-cross-fade'>
-Serializing the ''cross-fade()'' / <i><image-combination></i> notation</h3>
-
- <p>To serialize an <i><image-combination></i>:</p>
-
- <ol>
- <li>Append "cross-fade(" to s.</li>
-
- <li>Serialize the first argument to the function as an <i><image></i>,
- and append it to s.</li>
-
- <li>Append a comma and a space ", " to s.</li>
-
- <li>Serialize the second argument to the function as an <i><image></i>,
- and append it to s.</li>
-
- <li>Append a comma and a space ", " to s.</li>
-
- <li>Serialize the third argument to the function as a <percentage>,
- and append it to s.</li>
-
- <li>Append a close parenthesis ")" to s.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h3 id="serializing-gradients">
-Serializing Gradients</h3>
-
- <p>To serialize a <i><linear-gradient></i>:</p>
-
- <ol>
- <li>Append "linear-gradient(" to s.</li>
-
- <li>
- <ul>
- <li>If the first argument to the gradient function was a single
- keyword, serialize the keyword and append it to s.</li>
-
- <li>Otherwise, if the first argument to the gradient function was
- two keywords, serialize the vertical keyword (''top'' or ''bottom'')
- and append it to s, then append a space " " to s, then serialize
- the horizontal keyword (''left'' or ''right'') and append it to s.</li>
-
- <li>Otherwise, if the first argument to the gradient function was
- an <angle>, serialize the <angle> and append it to s.</li>
-
- <li>Otherwise, append "top" to s.</li>
- </ul>
- </li>
-
- <li>Append a comma and a space ", " to s.</li>
-
- <li>For each color-stop in the gradient, serialize the color-stop, and
- append it to s. Then, if it is not the final color-stop, append a comma
- and a space ", " to s.</li>
-
- <li>Append a close parenthesis ")" to s.</li>
- </ol>
-
- <p>To serialize a <i><radial-gradient></i>:</p>
-
- <ol>
- <li>Append "radial-gradient(" to s.</li>
-
- <li>If a <bg-position> was specified in the first argument to the
- gradient function, serialize it and append it to s. Otherwise, append
- "center" to s.</li>
-
- <li>Append a comma and a space ", " to s.</li>
-
- <li>
- <ul>
- <li>If a <shape> and/or <size> was specified in the second
- argument to the gradient function:
-
- <ol>
- <li>If a <shape> was specified, serialize it as a keyword
- and append it to s. Otherwise, append "ellipse" to s.</li>
-
- <li>Append a space " " to s.</li>
-
- <li>If a <size> was specified, serialize it as a keyword
- and append it to s. Otherwise, append "cover" to s.</li>
- </ol>
- </li>
-
- <li>Otherwise, if two <length>s or <percentage>s were specified
- in the second argument to the gradient function:
-
- <ol>
- <li>Serialize the first <length> or <percentage> and
- append it to s.</li>
-
- <li>Append a space " " to s.</li>
-
- <li>Serialize the second <length> or <percentage> and
- append it to s.</li>
- </ol>
- </li>
-
- <li>Otherwise, append "ellipse cover" to s.</li>
- </ul>
- </li>
-
- <li>Append a comma and a space ", " to s.</li>
-
- <li>For each color-stop in the gradient, serialize the color-stop, and
- append it to s. Then, if it is not the final color-stop, append a comma
- and a space ", " to s.</li>
-
- <li>Append a close parenthesis ")" to s.</li>
- </ol>
-
- <p>To serialize a <i><repeating-linear-gradient></i>:</p>
-
- <ol>
- <li>Append "repeating-linear-gradient(" to s.</li>
-
- <li>Follow the steps for serializing a <i><linear-gradient></i>, except
- skip step 1.</li>
- </ol>
-
- <p>To serialize a <i><repeating-radial-gradient></i>:</p>
-
- <ol>
- <li>Append "repeating-radial-gradient(" to s.</li>
-
- <li>Follow the steps for serializing a <i><radial-gradient></i>, except
- skip step 1.</li>
- </ol>
-
- <p>To serialize a <i><color-stop></i>:</p>
-
- <ol>
- <li>Serialize the <color>, and append it to s.</li>
-
- <li>If a <length> or <percentage> was specified, append a space
- " " to s, then serialize the <length> or <percentage> and append
- it to s.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h3 id='serializing-properties'>
-Serializing new properties</h3>
-
- <p>To serialize the 'image-resolution' property:
-
- <ol>
- <li>If the ''from-image'' keyword is specified in the property value,
- append "from-image" to s.</li>
-
- <li>If both the ''from-image'' keyword and a <resolution> are specified,
- append a space " " to s.</li>
-
- <li>If a <resolution> is specified, serialize it and append it to s.</li>
- </ol>
-
- <p>To serialize the 'image-orientation' property:</p>
-
- <ol>
- <li>Serialize the <angle> and append it to s.</li>
- </ol>
-
- <p>To serialize the 'image-rendering' property:</p>
-
- <ol>
- <li>Serialize the keyword and append it to s.</li>
- </ol>
-
- <p>To serialize the 'object-fit' property:</p>
-
- <ol>
- <li>Serialize the keyword and append it to s.</li>
- </ol>
-
- <p>To serialize the 'object-position' property:</p>
-
- <ol>
- <li>Serialize the value as a <bg-position> and append it to s.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h2 id='interpolation'>
-Interpolation</h2>
-
- <p>This section describes how to interpolate between new value types defined
- in this specification, for use with modules such as CSS Transitions and CSS
- Animations.</p>
-
- <p>If an algorithm below simply states that two values should be "interpolated"
- or "transitioned" without further details, then the value should be interpolated
- as described by the Transitions spec. Otherwise, the algorithm may reference
- a variable "t" in its detailed description of the interpolation. This is a
- number which starts at 0% and goes to 100%, and is set to a value that represents
- the progress through the transition, based on the duration of the transition,
- the elapsed time, and the timing function in use. For example, with a linear
- timing function and a 1s duration, after .3s t is equal to 30%.</p>
-
-<!-- ====================================================================== -->
-
-<h3 id='interpolating-images'>
-Interpolating <i><image></i></h3>
-
- <p>All images can be interpolated, though some special types of images (like
- some gradients) have their own special interpolation rules. In general terms,
- images are interpolated by scaling them to the size of the start image and
- cross-fading the two while they transition to the size of the end image.</p>
-
- <p>In specific terms, at each point in the interpolation the image is equal
- to <code>cross-fade(<start image>, <end image>, t)</code>.</p>
-
-<!-- ======================================================================= -->
-
-<h3 id='interpolating-image-combinations'>
-Interpolating <i><image-combination></i></h3>
-
- <p>Combinations of the same images at different progress points can be
- smoothly animated by simply animating the progress. Theoretically, this
- produces the same visual effect as the generic <image> interpolation
- would; in practice, implementations may have slight differences due to
- how they scale or rasterize images. Additionally, the generic <image>
- interpolation produces nested cross-fade() functions, which is undesirable
- if it can be avoided.</p>
-
- <p>If both the starting and ending images are <image-combination>s with the
- same image arguments, they must be interpolated by interpolating their third
- argument, the percentage. Otherwise, they must be interpolated as generic
- <image>s.</p>
-
-<!-- ======================================================================= -->
-
-<h3 id='interpolating-gradients'>
-Interpolating <i><gradient></i></h3>
-
- <p>Gradient images can be interpolated directly in CSS transitions and
- animations, smoothly animating from one gradient to another. There are only
- a few restrictions on what gradients are allowed to be interpolated:</p>
-
- <ol>
- <li>Both the starting and ending gradient must be expressed with the same
- function. (For example, you can transition from a linear-gradient() to
- a linear-gradient(), but not from a linear-gradient() to a radial-gradient()
- or a repeating-linear-gradient().)</li>
-
- <li>Both the starting and ending gradient must have the same number of
- color-stops. For this purpose, a repeating gradient is considered to
- have infinite color-stops, and thus all repeating gradients have the same
- number of color-stops. (Note that one may pad a gradient with additional
- color-stops placed atop each other, if necessary to make two gradients
- have the same number of color-stops.)</li>
- </ol>
-
- <p>If the two gradients satisfy both of those constraints, they must be
- interpolated as described below. If not, they must be interpolated as a
- generic image.</p>
-
- <ol>
- <li>Convert both the start and end gradients to their explicit forms:
- <dl>
- <dt>For linear gradients:</dt>
- <dd>
- <ul>
- <li>If the direction is specified as an <angle>, it
- is already in its explicit form.</li>
-
- <li>Otherwise, if the direction is specified as a single
- keyword, change 'bottom' to '0deg', 'left' to '90deg',
- 'top' to '180deg', or 'right' to '270deg'.</li>
-
- <li>Otherwise, if the direction is specified as two
- keywords, change the direction to an <angle> in the
- following ranges that would produce an equivalent
- gradient: for 'bottom left' or 'left bottom', the angle must
- be between 0deg and 90deg; for 'top left' or
- 'left top', the angle must be between 90deg and
- 180deg; for 'top right' or 'right top', the angle
- must be between 180deg and 270deg; for 'bottom right' or
- 'right bottom', the angle must be between 270deg and 360deg.</li>
-
- <li>If both the start and end gradients had their direction
- specified with keywords, and the absolute difference
- between the angles their directions mapped to is greater
- than 180deg, add 360deg to the direction of the gradient
- with the smaller angle. <span class='note'>This ensures
- that a transition from, for example, "right" (270deg) to
- "bottom" (0deg) rotates the gradient a quarter-turn
- clockwise, as expected, rather than rotating
- three-quarters of a turn counter-clockwise.</span></li>
- </ul>
- </dd>
-
- <dt>For radial gradients:</dt>
- <dd>
- <ul>
- <li>If the size is specified as two <length>s or
- <percentage>s, it is already in its explicit form.</li>
-
- <li>Otherwise, the size must be changed to a pair of
- <length>s that would produce an equivalent
- ending-shape.</li>
- </ul>
- </dd>
- </dl>
- </li>
-
- <li>Interpolate each component and color-stop of the gradients independently.
- For linear gradients, the only component is the angle. For radial gradients,
- the components are the horizontal and vertical position of the center
- and the horizontal and vertical axis lengths.</li>
-
- <li>To interpolate a color-stop, first match each color-stop in the start
- gradient to the corresponding color-stop at the same index in the end
- gradient. For repeating gradients, the first specified color-stop in
- the start and end gradients are considered to be at the same index, and
- all other color-stops following and preceding are indexed appropriately.
- Then, for each pair of color-stops, interpolate the position and color
- independently.</li>
- </ol>
-
-<!-- ====================================================================== -->
-
-<h2 class="no-num" id="changes">Changes Since the 17 February 2011 Working Draft</h2>
-
- <p>The following changes were made to this specification since the <a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">17 February 2011 Working Draft</a>:</p>
-
- <dl>
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#resolution-units">3. Resolution Units</a></dt>
- <dd>
- <ul>
- <li>Defined the resolution unit more precisely. In particular, clarified what it means for a vector image.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#image-notation">4.2. Image Fallbacks: the 'image()' notation</a></dt>
- <dd>
- <ul>
- <li>Simplified the ultimate fallback back to just <color>, as that was the ultimate point - when you absolutely can't display an image, you may still need to display a color for constrast purposes.</li>
- <li>Dropped the <url-token> production for the non-ultimate arguments. This was fundamentally ambiguous with the keywords, and is unnecessary complexity.</li>
- <li>Added the ability to declare the directionality of an image, so it's automatically inline-direction flipped when placed in an opposite-directional context.</li>
- <li>Added a requirement that impls must support the #xywh form of Media Queries as part of image() support.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#cross-fade-function">4.4. Combining Images: The 'cross-fade()' notation</a></dt>
- <dd>
- <ul>
- <li>Defined the algorithm formally in PD terms.</li>
- <li>Changed the compositing operation from "over" to "plus".</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#linear-gradients">5.1. Linear Gradients</a></dt>
- <dd>
- <ul>
- <li>Changed the meaning of angles in the first argument to being bearing angles.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#repeating-gradients">5.3. Repeating Gradients</a></dt>
- <dd>
- <ul>
- <li>Changed the results of a degenerate repeating gradient (where the first and last stop have the same position). Previously, it generated a solid-color image matching the last color-stop. Now, it moves the last color-stop to be 1px away from the first. This was done so that repeating gradients had continuous behavior.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#object-fit">6.4. Sizing Objects: The 'object-fit' property</a></dt>
- <dd>
- <ul>
- <li>Added 'none' and 'scale-down' values.</li>
- <li>Specified that contents are always clipped, and 'overflow' on the element has no effect.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#image-resolution">7. Overriding Image Resolutions: the 'image-resolution' property</a></dt>
- <dd>
- <ul>
- <li>Specified that image-resolution works on *all* the images for the element it's specified on, both the content of replaced elements and the various <image>-using properties.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#image-rendering">9. Determining How to Scale an Image: The 'image-rendering' Property</a></dt>
- <dd>
- <ul>
- <li>Changed the 'optimize-contrast' value to 'crisp-edges', and rewrote the description slightly to reduce confusion in what it does.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#interpolation">11. Interpolation</a></dt>
- <dd>
- <ul>
- <li>Added special rules for interpolating cross-fade(), to avoid nested cross-fade()s when possible.</li>
- </ul>
- </dd>
-
- <dt><a href="http://www.w3.org/TR/2011/WD-css3-images-20110217/#interpolating-gradients">11.2. Interpolating <gradient></a></dt>
- <dd>
- <ul>
- <li>Fixed a bug in interpolation so transitioning between linear gradients specified with keywords takes the shortest path.</li>
- </ul>
- </dd>
- </dl>
-
-<!-- ====================================================================== -->
-
<h2 class="no-num" id="acknowledgments">Acknowledgments</h2>
<h2 class="no-num" id="references">References</h2>
Received on Tuesday, 2 August 2011 22:20:54 UTC