- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Feb 2011 10:29:59 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv2188
Modified Files:
Overview.html Overview.src.html
Log Message:
Switch <b> to <i> to match HTML5 element definitions. No other changes, substantive or editorial.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.64
retrieving revision 1.65
diff -u -d -r1.64 -r1.65
--- Overview.html 8 Feb 2011 22:41:22 -0000 1.64
+++ Overview.html 9 Feb 2011 10:29:57 -0000 1.65
@@ -22,12 +22,12 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 February
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 February
2011</h2>
<dl>
<dt>Latest Version:</dt>
- <!-- <dd><a href="http://www.w3.org/TR/2011/CR-css3-images-20110208/">http://www.w3.org/TR/2011/CR-css3-images-20110208/</a></dd> -->
+ <!-- <dd><a href="http://www.w3.org/TR/2011/CR-css3-images-20110209/">http://www.w3.org/TR/2011/CR-css3-images-20110209/</a></dd> -->
<dd><a
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -73,8 +73,8 @@
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<p>This CSS Image Values and Replaced Content module has two parts: First,
- it defines the syntax for <a href="#ltimage"><b><image></b></a> values
- in CSS. <a href="#ltimage"><b><image</b></a> values can be a single URI
+ it defines the syntax for <a href="#ltimage"><i><image></i></a> values
+ in CSS. <a href="#ltimage"><i><image</i></a> values can be a single URI
to an image, a list of URIs denoting a series of fallbacks, a reference to
an element in the document, or gradients. Second, it defines properties
used to control the interaction of replaced content and the CSS layout
@@ -200,15 +200,15 @@
<li><a href="#serializing-image-notation"><span class=secno>7.3.
</span>Serializing the ‘<code class=css>image()</code>’ /
- <b><image-list></b> notation</a>
+ <i><image-list></i> notation</a>
<li><a href="#serializing-element-notation"><span class=secno>7.4.
</span>Serializing the ‘<code class=css>element()</code>’ /
- <b><element-reference></b> notation</a>
+ <i><element-reference></i> notation</a>
<li><a href="#serializing-cross-fade"><span class=secno>7.5.
</span>Serializing the ‘<code
- class=css>cross-fade()</code>’ / <b><image-combination></b>
+ class=css>cross-fade()</code>’ / <i><image-combination></i>
notation</a>
<li><a href="#serializing-gradients"><span class=secno>7.6.
@@ -222,10 +222,10 @@
<ul class=toc>
<li><a href="#interpolating-ltimage"><span class=secno>8.1.
- </span>Interpolating <b><image></b></a>
+ </span>Interpolating <i><image></i></a>
<li><a href="#interpolating-gradients"><span class=secno>8.2.
- </span>Interpolating <b><gradient></b></a>
+ </span>Interpolating <i><gradient></i></a>
</ul>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
@@ -276,13 +276,13 @@
<dt><dfn id=transition-capable>transition-capable</dfn>
<dd>A device that implements CSS Transitions or CSS Animations must
- conform to the <a href="#minimal"><b>minimal</b></a> class, and
+ conform to the <a href="#minimal"><i>minimal</i></a> class, and
additionally must implement the chapter on Interpolation.
<dt><dfn id=cssom-capable>CSSOM-capable</dfn>
<dd>A device that implements CSSOM must conform to the <a
- href="#minimal"><b>minimal</b></a> class, and additionally must
+ href="#minimal"><i>minimal</i></a> class, and additionally must
implement the chapter on Serialization.
</dl>
@@ -425,10 +425,10 @@
<p>The final argument may be a color or generated image, to serve as an
ultimate fallback if none of the preceeding <a
- href="#ltimage-decl"><b><image-decl></b></a>s can be used. If it is a
- color, the <a href="#ltimage-list"><b><image-list></b></a> must
+ href="#ltimage-decl"><i><image-decl></i></a>s can be used. If it is a
+ color, the <a href="#ltimage-list"><i><image-list></i></a> must
represent a single-color image of that color with no <a
- href="#intrinsic-dimensions"><b>intrinsic dimensions</b></a>.</p>
+ href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.</p>
<div class=example>
<p>For example, the rule below would tell the UA to load ‘<code
@@ -479,11 +479,11 @@
element who's <dfn id=css-element-reference-identifier>CSS element
reference identifier</dfn> is the given identifier. (CSS does not define
how an element acquires a <a
- href="#css-element-reference-identifier"><b>CSS element reference
- identifier</b></a>; that is determined by the host language.) If no
+ href="#css-element-reference-identifier"><i>CSS element reference
+ identifier</i></a>; that is determined by the host language.) If no
element in the document matches the selector, or no element has the
- identifier as its <a href="#css-element-reference-identifier"><b>CSS
- element reference identifier</b></a>, the function represents a fully
+ identifier as its <a href="#css-element-reference-identifier"><i>CSS
+ element reference identifier</i></a>, the function represents a fully
transparent image with no intrinsic dimensions, equivalent to
<code>image(transparent)</code>. If the document changes so that which
element is matched, or whether an element is matched at all, changes,
@@ -588,22 +588,22 @@
type of image, and can be used anywhere an image can, such as in the
‘<code class=property>background-image</code>’ or
‘<code class=property>list-style-image</code>’ properties.
- Gradients have no <a href="#intrinsic-dimensions"><b>intrinsic
- dimensions</b></a>. The syntax of a <a
- href="#ltgradient"><b><gradient></b></a> is:</p>
+ Gradients have no <a href="#intrinsic-dimensions"><i>intrinsic
+ dimensions</i></a>. The syntax of a <a
+ href="#ltgradient"><i><gradient></i></a> is:</p>
<pre
class=prod><dfn id=ltgradient><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
- <p>where <a href="#ltlinear-gradient"><b><linear-gradient></b></a>, <a
- href="#ltradial-gradient"><b><radial-gradient></b></a>, <a
- href="#ltrepeating-linear-gradient"><b><repeating-linear-gradient></b></a>,
+ <p>where <a href="#ltlinear-gradient"><i><linear-gradient></i></a>, <a
+ href="#ltradial-gradient"><i><radial-gradient></i></a>, <a
+ href="#ltrepeating-linear-gradient"><i><repeating-linear-gradient></i></a>,
and <a
- href="#ltrepeating-radial-gradient"><b><repeating-radial-gradient></b></a>
+ href="#ltrepeating-radial-gradient"><i><repeating-radial-gradient></i></a>
are defined in their applicable sections below.</p>
<div class=example>
- <p>As with the other <a href="#ltimage"><b><image></b></a> types
+ <p>As with the other <a href="#ltimage"><i><image></i></a> types
defined in this specification, gradients can be used in any property
that accepts images. For example:</p>
@@ -664,18 +664,18 @@
direction and determines how color-stops are positioned. It may be
omitted; if so, it defaults to ‘<code class=css>top</code>’.</p>
- <p>The <a href="#gradient-line"><b>gradient-line</b></a> may be specified
+ <p>The <a href="#gradient-line"><i>gradient-line</i></a> may be specified
in two different ways. The first is by specifying the angle the <a
- href="#gradient-line"><b>gradient-line</b></a> should assume; this uses
+ href="#gradient-line"><i>gradient-line</i></a> should assume; this uses
the standard algebraic notation for angles where 0deg points to the
right, 90deg points up, and positive angles go counterclockwise. The
starting-point and ending-point of the <a
- href="#gradient-line"><b>gradient-line</b></a> are determined by
+ href="#gradient-line"><i>gradient-line</i></a> are determined by
extending a line in both direction from the center of the box at the
angle specified. In the direction of the angle, the ending-point is the
- point on the <a href="#gradient-line"><b>gradient-line</b></a> where a
+ point on the <a href="#gradient-line"><i>gradient-line</i></a> where a
line drawn perpendicular to the <a
- href="#gradient-line"><b>gradient-line</b></a> would intersect the
+ href="#gradient-line"><i>gradient-line</i></a> would intersect the
corner of the box in that direction. The starting-point is determined
identically, except in the opposite direction of the angle.</p>
@@ -703,9 +703,9 @@
box.]" src=gradient-diagram.png style="float: right; margin-left:
1em;">
<p>This example illustrates visually how to calculate the <a
- href="#gradient-line"><b>gradient-line</b></a> from the rules above.
+ href="#gradient-line"><i>gradient-line</i></a> from the rules above.
This shows the starting and ending-point of the <a
- href="#gradient-line"><b>gradient-line</b></a>, along with the actual
+ href="#gradient-line"><i>gradient-line</i></a>, along with the actual
gradient, produced by an element with ‘<code
class=css>background: linear-gradient(45deg, white,
black);</code>’.</p>
@@ -720,8 +720,8 @@
<p>The gradient's color stops are typically placed between the
starting-point and ending-point on the <a
- href="#gradient-line"><b>gradient-line</b></a>, but this isn't required
- - the <a href="#gradient-line"><b>gradient-line</b></a> extends
+ href="#gradient-line"><i>gradient-line</i></a>, but this isn't required
+ - the <a href="#gradient-line"><i>gradient-line</i></a> extends
infinitely in both directions. The starting-point and ending-point are
merely arbitrary distance markers - the starting-point defines where 0%,
0px, etc are located when specifying color-stops, and the ending-point
@@ -808,7 +808,7 @@
)</code></pre>
<p>The first argument to the function specifies the center of the
- ellipse. <b><bg-position></b> is taken from the Backgrounds and
+ ellipse. <i><bg-position></i> is taken from the Backgrounds and
Borders Module, and has the same definition. It specifies the center of
the gradient. If omitted, it defaults to ‘<code
class=css>center</code>’. Color-stop positions are measured along
@@ -825,7 +825,7 @@
<dd>
<p>The size and shape of the ending-ellipse can be defined
<em>implicitly</em> with a size and shape keyword. The <a
- href="#ltshape"><b><shape></b></a> is defined as</p>
+ href="#ltshape"><i><shape></i></a> is defined as</p>
<pre><code><dfn id=ltshape><shape></dfn> = [ circle | ellipse ]</code></pre>
@@ -835,13 +835,13 @@
be an axis-aligned ellipse (that is, its major and minor radiuses will
be horizontal and vertical, not necessarily in that order).</p>
- <p>The <a href="#ltsize"><b><size></b></a> keyword is defined as</p>
+ <p>The <a href="#ltsize"><i><size></i></a> keyword is defined as</p>
<pre><code><dfn id=ltsize><size></dfn> = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ]</code></pre>
- <p>If <a href="#ltshape"><b><shape></b></a> is ‘<code
+ <p>If <a href="#ltshape"><i><shape></i></a> is ‘<code
class=css>circle</code>’ and <a
- href="#ltsize"><b><size></b></a> is ‘<code
+ href="#ltsize"><i><size></i></a> is ‘<code
class=css>closest-side</code>’, the ending-shape is a circle
sized so that it exactly meets the side of the box closest to its
center. For example, if the box was 100px wide and 200px tall, and the
@@ -850,9 +850,9 @@
(it is 10px from the starting-point, while the top is 20px from it,
and the right and bottom sides are much further). The gradient-shape
would thus be a circle with a radius of 10px. If <a
- href="#ltshape"><b><shape></b></a> is ‘<code
+ href="#ltshape"><i><shape></i></a> is ‘<code
class=css>ellipse</code>’ and <a
- href="#ltsize"><b><size></b></a> is ‘<code
+ href="#ltsize"><i><size></i></a> is ‘<code
class=css>closest-side</code>’, the gradient-shape is an ellipse
sized so that it exactly meets the vertical and horizontal sides of
the box closest to its center. Using the same box and starting-point
@@ -869,7 +869,7 @@
class=css>closest-corner</code>’ and ‘<code
class=css>farthest-corner</code>’ size the gradient-shape so
that it exactly meets the closest or farthest corner of the box from
- its center, respectively. If <a href="#ltshape"><b><shape></b></a>
+ its center, respectively. If <a href="#ltshape"><i><shape></i></a>
is ‘<code class=css>ellipse</code>’, the gradient-shape
has the same ratio of width to height that it would if ‘<code
class=css>closest-side</code>’ or ‘<code
@@ -927,8 +927,8 @@
corresponding distance from the center. Negative distances are allowed
in a radial gradient and work the same as in linear gradients with
respect to setting the color of the <a
- href="#gradient-line"><b>gradient-line</b></a>, but colors before the
- starting-point of the <a href="#gradient-line"><b>gradient-line</b></a>
+ href="#gradient-line"><i>gradient-line</i></a>, but colors before the
+ starting-point of the <a href="#gradient-line"><i>gradient-line</i></a>
are not displayed. For example, ‘<code
class=css>radial-gradient(red -50px, yellow 100px)</code>’ would
produce an elliptical gradient which starts with a reddish-orange color
@@ -1059,7 +1059,7 @@
class=prod><code><dfn id=ltcolor-stop><color-stop></dfn> = <color> [ <percentage> | <length> ]?</code></pre>
<p>Color-stops are points placed along the line defined by the <a
- href="#gradient-line"><b>gradient-line</b></a> at the beginning of the
+ href="#gradient-line"><i>gradient-line</i></a> at the beginning of the
rule. Color-stops must be specified in order. Percentages refer to the
length of the gradient-line, with 0% being at the starting point and
100% being at the ending point. Lengths are measured from the
@@ -1143,8 +1143,8 @@
generically the size negotiation model between the object and the CSS
layout algorithms.</p>
- <p>In order to define this handling, we must define a few terms, to make
- it easier to refer to various concepts:</p>
+ <p>In order to define this handling, we define a few terms, to make it
+ easier to refer to various concepts:</p>
<dl>
<dt><dfn id=intrinsic-dimensions>intrinsic dimensions</dfn>
@@ -1166,7 +1166,7 @@
<p>If an object (such as an icon) has multiple sizes, then the largest
size is used. If it has multiple aspect ratios of that size (or of no
size), then the aspect ratio closest to the aspect ratio of the <a
- href="#default-image-sizing-area"><b>default image sizing area</b></a>
+ href="#default-image-sizing-area"><i>default image sizing area</i></a>
is used. <span class=issue>This is pretty arbitrary.</span></p>
<dt><dfn id=specified-size>specified size</dfn>
@@ -1181,48 +1181,48 @@
<dt><dfn id=css-view-box>CSS View Box</dfn>
<dd>The CSS View Box is the result of transforming the <a
- href="#intrinsic-dimensions"><b>intrinsic dimensions</b></a> into a
+ href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> into a
concrete size, based on the specified size and the <a
- href="#default-image-sizing-area"><b>default image sizing area</b></a>.
+ href="#default-image-sizing-area"><i>default image sizing area</i></a>.
A CSS View Box always has a definite height and width.
<dt><dfn id=default-image-sizing-area>default image sizing area</dfn>
<dd>The default image sizing area is a rectangle with a definite height
and width used to determine the size of the CSS View Box when both the
- <a href="#intrinsic-dimensions"><b>intrinsic dimensions</b></a> and <a
- href="#specified-size"><b>specified size</b></a> are missing dimensions.
+ <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a> and <a
+ href="#specified-size"><i>specified size</i></a> are missing dimensions.
It varies based on the property that the image is being used as a value
in:
<dl>
<dt>‘<code class=property>background-image</code>’
- <dd>The <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a> is the size of the background positioning area of the
+ <dd>The <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a> is the size of the background positioning area of the
element.
<dt>‘<code class=property>list-style-image</code>’
- <dd>The <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a> is a 1em square.
+ <dd>The <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a> is a 1em square.
<dt>‘<code class=property>border-image</code>’
- <dd>The <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a> is the size of the element's <a
- href="http://dev.w3.org/csswg/css3-background/#border-image-area"><b>border
- image area</b></a>.
+ <dd>The <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a> is the size of the element's <a
+ href="http://dev.w3.org/csswg/css3-background/#border-image-area"><i>border
+ image area</i></a>.
<dt>‘<code class=property>cursor</code>’
- <dd>The <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a> is a UA-defined size that should be based on the size of
+ <dd>The <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a> is a UA-defined size that should be based on the size of
a typical cursor on the UA's operating system.
<dt>Anything else
- <dd>The <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a> is a rectangle 300px wide and 150px tall.
+ <dd>The <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a> is a rectangle 300px wide and 150px tall.
</dl>
</dl>
@@ -1233,80 +1233,80 @@
url() value in a ‘<code
class=property>background-image</code>’ property or a @src
attribute on an <img> element, CSS queries the object for its <a
- href="#intrinsic-dimensions"><b>intrinsic dimensions</b></a>.
+ href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
- <li>Using the <a href="#intrinsic-dimensions"><b>intrinsic
- dimensions</b></a> and the <a href="#specified-size"><b>specified
- size</b></a>, CSS then computes a <a href="#css-view-box"><b>CSS View
- Box</b></a> that defines the size of the region the object will render
+ <li>Using the <a href="#intrinsic-dimensions"><i>intrinsic
+ dimensions</i></a> and the <a href="#specified-size"><i>specified
+ size</i></a>, CSS then computes a <a href="#css-view-box"><i>CSS View
+ Box</i></a> that defines the size of the region the object will render
in, as follows:
<ol>
- <li>If the <a href="#specified-size"><b>specified size</b></a> is just
- a definite width and height, the <a href="#css-view-box"><b>CSS View
- Box</b></a> must be that width and height.
+ <li>If the <a href="#specified-size"><i>specified size</i></a> is just
+ a definite width and height, the <a href="#css-view-box"><i>CSS View
+ Box</i></a> must be that width and height.
- <li>If the <a href="#specified-size"><b>specified size</b></a> is just
+ <li>If the <a href="#specified-size"><i>specified size</i></a> is just
a definite width or just a definite height, then the <a
- href="#css-view-box"><b>CSS View Box</b></a> must have the same width
+ href="#css-view-box"><i>CSS View Box</i></a> must have the same width
or height, as appropriate. The other dimension is calculated as
follows:
<ol>
<li>If the object has an <a
- href="#intrinsic-aspect-ratio"><b>intrinsic aspect ratio</b></a>,
- the <a href="#css-view-box"><b>CSS View Box</b></a> must have the
+ href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
+ the <a href="#css-view-box"><i>CSS View Box</i></a> must have the
same aspect ratio.
<li>Otherwise, if the object has an an <a
- href="#intrinsic-height"><b>intrinsic height</b></a> or <a
- href="#intrinsic-width"><b>intrinsic width</b></a> (whichever is
- missing from the <a href="#specified-size"><b>specified
- size</b></a>), then the <a href="#css-view-box"><b>CSS View
- Box</b></a> must have that height or width.
+ href="#intrinsic-height"><i>intrinsic height</i></a> or <a
+ href="#intrinsic-width"><i>intrinsic width</i></a> (whichever is
+ missing from the <a href="#specified-size"><i>specified
+ size</i></a>), then the <a href="#css-view-box"><i>CSS View
+ Box</i></a> must have that height or width.
- <li>Otherwise, the <a href="#css-view-box"><b>CSS View Box</b></a>
+ <li>Otherwise, the <a href="#css-view-box"><i>CSS View Box</i></a>
must have the same width or height (whichever is missing from the
specified size) as the <a
- href="#default-image-sizing-area"><b>default image sizing
- area</b></a>.
+ href="#default-image-sizing-area"><i>default image sizing
+ area</i></a>.
</ol>
- <li>If the <a href="#specified-size"><b>specified size</b></a> is
+ <li>If the <a href="#specified-size"><i>specified size</i></a> is
neither a definite width nor height, and has no additional contraints,
- the dimensions of the <a href="#css-view-box"><b>CSS View Box</b></a>
+ the dimensions of the <a href="#css-view-box"><i>CSS View Box</i></a>
must be computed as follows:
<ol>
- <li>If the object has an <a href="#intrinsic-width"><b>intrinsic
- width</b></a> and an <a href="#intrinsic-height"><b>intrinsic
- height</b></a>, the <a href="#css-view-box"><b>CSS View Box</b></a>
+ <li>If the object has an <a href="#intrinsic-width"><i>intrinsic
+ width</i></a> and an <a href="#intrinsic-height"><i>intrinsic
+ height</i></a>, the <a href="#css-view-box"><i>CSS View Box</i></a>
must have that same height and width.
- <li>If the object has only an <a href="#intrinsic-width"><b>intrinsic
- width</b></a> or <a href="#intrinsic-height"><b>intrinsic
- height</b></a>, and no <a
- href="#intrinsic-aspect-ratio"><b>intrinsic aspect ratio</b></a>,
- the <a href="#css-view-box"><b>CSS View Box</b></a> must have that
+ <li>If the object has only an <a href="#intrinsic-width"><i>intrinsic
+ width</i></a> or <a href="#intrinsic-height"><i>intrinsic
+ height</i></a>, and no <a
+ href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
+ the <a href="#css-view-box"><i>CSS View Box</i></a> must have that
width or height, and the height or width (whichever is missing from
- the <a href="#intrinsic-dimensions"><b>intrinsic dimensions</b></a>)
- of the <a href="#default-image-sizing-area"><b>default image sizing
- area</b></a>.
+ the <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>)
+ of the <a href="#default-image-sizing-area"><i>default image sizing
+ area</i></a>.
<li>If the object has only an <a
- href="#intrinsic-aspect-ratio"><b>intrinsic aspect ratio</b></a>,
- the <a href="#css-view-box"><b>CSS View Box</b></a> must have that
+ href="#intrinsic-aspect-ratio"><i>intrinsic aspect ratio</i></a>,
+ the <a href="#css-view-box"><i>CSS View Box</i></a> must have that
aspect ratio, and additionally be as large as possible without
either its height or width exceeding the height or width of the <a
- href="#default-image-sizing-area"><b>default image sizing
- area</b></a>.
+ href="#default-image-sizing-area"><i>default image sizing
+ area</i></a>.
- <li>Otherwise, the <a href="#css-view-box"><b>CSS View Box</b></a>
+ <li>Otherwise, the <a href="#css-view-box"><i>CSS View Box</i></a>
must be the size of the <a
- href="#default-image-sizing-area"><b>default image sizing
- area</b></a>.
+ href="#default-image-sizing-area"><i>default image sizing
+ area</i></a>.
</ol>
- <li>If the <a href="#specified-size"><b>specified size</b></a> has
- additional constraints, the <a href="#css-view-box"><b>CSS View
- Box</b></a> must be sized to satisfy those constraints. (For example,
+ <li>If the <a href="#specified-size"><i>specified size</i></a> has
+ additional constraints, the <a href="#css-view-box"><i>CSS View
+ Box</i></a> must be sized to satisfy those constraints. (For example,
‘<code class=css>object-fit: contain</code>’ specifies
slightly more complex handling for sizing replaced elements, and
‘<code class=css>background-repeat: round</code>’ can
@@ -1740,7 +1740,7 @@
scale it. Otherwise, this value must be treated as ‘<code class=css>fill</code>’.</p>
</dd>
- <dt>scale-down <b class=issue>better name?</b></dt>
+ <dt>scale-down <b class=issue>better name?</i></dt>
<dd>
<p>This value must act identically to ‘<code class=css>none</code>’ or ‘<code class=css>contain</code>’, whichever
would make the contents smaller.</p>
@@ -1869,7 +1869,7 @@
<h3 id=serializing-resolution><span class=secno>7.1. </span>Serializing a
<resolution></h3>
- <p>The serialization of the <b><resolution></b> value type is defined
+ <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
@@ -1887,9 +1887,9 @@
<div>
<h3 id=serializing-image-notation><span class=secno>7.3.
</span>Serializing the ‘<code class=css>image()</code>’ / <a
- href="#ltimage-list"><b><image-list></b></a> notation</h3>
+ href="#ltimage-list"><i><image-list></i></a> notation</h3>
- <p>To serialize an <a href="#ltimage-list"><b><image-list></b></a>:</p>
+ <p>To serialize an <a href="#ltimage-list"><i><image-list></i></a>:</p>
<ol>
<li>Append "image(" to s.
@@ -1902,7 +1902,7 @@
<li>Append a close parenthesis ")" to s.
</ol>
- <p>To serialize an <a href="#ltimage-decl"><b><image-decl></b></a>:</p>
+ <p>To serialize an <a href="#ltimage-decl"><i><image-decl></i></a>:</p>
<ol>
<li>Serialize the first part of the value (the <string> or
@@ -1919,11 +1919,11 @@
<div>
<h3 id=serializing-element-notation><span class=secno>7.4.
</span>Serializing the ‘<code class=css>element()</code>’ /
- <a href="#ltelement-reference"><b><element-reference></b></a>
+ <a href="#ltelement-reference"><i><element-reference></i></a>
notation</h3>
<p>To serialize an <a
- href="#ltelement-reference"><b><element-reference></b></a>:</p>
+ href="#ltelement-reference"><i><element-reference></i></a>:</p>
<ol>
<li>Append "element(" to s.
@@ -1938,21 +1938,21 @@
<div>
<h3 id=serializing-cross-fade><span class=secno>7.5. </span>Serializing
the ‘<code class=css>cross-fade()</code>’ / <a
- href="#ltimage-combination"><b><image-combination></b></a> notation</h3>
+ href="#ltimage-combination"><i><image-combination></i></a> notation</h3>
<p>To serialize an <a
- href="#ltimage-combination"><b><image-combination></b></a>:</p>
+ href="#ltimage-combination"><i><image-combination></i></a>:</p>
<ol>
<li>Append "cross-fade(" to s.
<li>Serialize the first argument to the function as an <a
- href="#ltimage"><b><image></b></a>, and append it to s.
+ href="#ltimage"><i><image></i></a>, and append it to s.
<li>Append a comma and a space ", " to s.
<li>Serialize the second argument to the function as an <a
- href="#ltimage"><b><image></b></a>, and append it to s.
+ href="#ltimage"><i><image></i></a>, and append it to s.
<li>Append a comma and a space ", " to s.
@@ -1968,7 +1968,7 @@
Gradients</h3>
<p>To serialize a <a
- href="#ltlinear-gradient"><b><linear-gradient></b></a>:</p>
+ href="#ltlinear-gradient"><i><linear-gradient></i></a>:</p>
<ol>
<li>Append "linear-gradient(" to s.
@@ -2002,7 +2002,7 @@
</ol>
<p>To serialize a <a
- href="#ltradial-gradient"><b><radial-gradient></b></a>:</p>
+ href="#ltradial-gradient"><i><radial-gradient></i></a>:</p>
<ol>
<li>Append "radial-gradient(" to s.
@@ -2052,28 +2052,28 @@
</ol>
<p>To serialize a <a
- href="#ltrepeating-linear-gradient"><b><repeating-linear-gradient></b></a>:</p>
+ href="#ltrepeating-linear-gradient"><i><repeating-linear-gradient></i></a>:</p>
<ol>
<li>Append "repeating-linear-gradient(" to s.
<li>Follow the steps for serializing a <a
- href="#ltlinear-gradient"><b><linear-gradient></b></a>, except skip
+ href="#ltlinear-gradient"><i><linear-gradient></i></a>, except skip
step 1.
</ol>
<p>To serialize a <a
- href="#ltrepeating-radial-gradient"><b><repeating-radial-gradient></b></a>:</p>
+ href="#ltrepeating-radial-gradient"><i><repeating-radial-gradient></i></a>:</p>
<ol>
<li>Append "repeating-radial-gradient(" to s.
<li>Follow the steps for serializing a <a
- href="#ltradial-gradient"><b><radial-gradient></b></a>, except skip
+ href="#ltradial-gradient"><i><radial-gradient></i></a>, except skip
step 1.
</ol>
- <p>To serialize a <a href="#ltcolor-stop"><b><color-stop></b></a>:</p>
+ <p>To serialize a <a href="#ltcolor-stop"><i><color-stop></i></a>:</p>
<ol>
<li>Serialize the <color>, and append it to s.
@@ -2150,7 +2150,7 @@
<div>
<h3 id=interpolating-ltimage><span class=secno>8.1. </span>Interpolating
- <a href="#ltimage"><b><image></b></a></h3>
+ <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
@@ -2164,7 +2164,7 @@
<div>
<h3 id=interpolating-gradients><span class=secno>8.2.
- </span>Interpolating <a href="#ltgradient"><b><gradient></b></a></h3>
+ </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.65
retrieving revision 1.66
diff -u -d -r1.65 -r1.66
--- Overview.src.html 8 Feb 2011 22:41:22 -0000 1.65
+++ Overview.src.html 9 Feb 2011 10:29:57 -0000 1.66
@@ -46,8 +46,8 @@
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
<p>This CSS Image Values and Replaced Content module has two parts:
- First, it defines the syntax for <b><image></b> values in CSS.
- <b><image</b> values can be a single URI to an image, a list of
+ First, it defines the syntax for <i><image></i> values in CSS.
+ <i><image</i> values can be a single URI to an image, a list of
URIs denoting a series of fallbacks, a reference to an element in the document, or
gradients. Second, it defines properties used to control the
interaction of replaced content and the CSS layout algorithms.
@@ -90,11 +90,11 @@
<dt><dfn>transition-capable</dfn></dt>
<dd>A device that implements CSS Transitions or CSS Animations must conform
- to the <b>minimal</b> class, and additionally must implement the chapter
+ to the <i>minimal</i> class, and additionally must implement the chapter
on Interpolation.</dd>
<dt><dfn>CSSOM-capable</dfn></dt>
- <dd>A device that implements CSSOM must conform to the <b>minimal</b> class,
+ <dd>A device that implements CSSOM must conform to the <i>minimal</i> class,
and additionally must implement the chapter on Serialization.</dd>
</dl>
@@ -210,9 +210,9 @@
avoid blurry images.</span></p>
<p>The final argument may be a color or generated image, to serve as an
- ultimate fallback if none of the preceeding <b><image-decl></b>s can be used.
- If it is a color, the <b><image-list></b> must represent a single-color
- image of that color with no <b>intrinsic dimensions</b>.</p>
+ ultimate fallback if none of the preceeding <i><image-decl></i>s can be used.
+ If it is a color, the <i><image-list></i> must represent a single-color
+ image of that color with no <i>intrinsic dimensions</i>.</p>
<div class="example">
<p>For example, the rule below would tell the UA to load ''wavy.svg'' if
@@ -249,9 +249,9 @@
function references the element matched by the selector. If it's an identifier,
the function references the element who's <dfn>CSS element reference identifier</dfn>
is the given identifier. (CSS does not define how an element acquires a
- <b>CSS element reference identifier</b>; that is determined by the host language.)
+ <i>CSS element reference identifier</i>; that is determined by the host language.)
If no element in the document matches the selector, or no element has the
- identifier as its <b>CSS element reference identifier</b>, the function
+ identifier as its <i>CSS element reference identifier</i>, the function
represents a fully transparent image with no intrinsic dimensions, equivalent
to <code>image(transparent)</code>. If the document changes so that which
element is matched, or whether an element is matched at all, changes, the
@@ -343,17 +343,17 @@
specify such an image in a terse syntax, so that the UA can generate the image
automatically when rendering the page. Gradients are a type of image, and can
be used anywhere an image can, such as in the 'background-image' or
- 'list-style-image' properties. Gradients have no <b>intrinsic dimensions</b>.
- The syntax of a <b><gradient></b> is:</p>
+ 'list-style-image' properties. Gradients have no <i>intrinsic dimensions</i>.
+ The syntax of a <i><gradient></i> is:</p>
<pre class=prod><dfn><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
- <p>where <b><linear-gradient></b>, <b><radial-gradient></b>,
- <b><repeating-linear-gradient></b>, and <b><repeating-radial-gradient></b> are
+ <p>where <i><linear-gradient></i>, <i><radial-gradient></i>,
+ <i><repeating-linear-gradient></i>, and <i><repeating-radial-gradient></i> are
defined in their applicable sections below.</p>
<div class=example>
- <p>As with the other <b><image></b> types defined in this specification,
+ <p>As with the other <i><image></i> types defined in this specification,
gradients can be used in any property that accepts images. For example:</p>
<ul>
<li><code>background: linear-gradient(white, gray);</code></li>
@@ -404,15 +404,15 @@
which gives the gradient a direction and determines how color-stops are
positioned. It may be omitted; if so, it defaults to ''top''.</p>
- <p>The <b>gradient-line</b> may be specified in two different ways. The
- first is by specifying the angle the <b>gradient-line</b> should assume;
+ <p>The <i>gradient-line</i> may be specified in two different ways. The
+ first is by specifying the angle the <i>gradient-line</i> should assume;
this uses the standard algebraic notation for angles where 0deg points
to the right, 90deg points up, and positive angles go counterclockwise.
- The starting-point and ending-point of the <b>gradient-line</b> are
+ The starting-point and ending-point of the <i>gradient-line</i> are
determined by extending a line in both direction from the center of the
box at the angle specified. In the direction of the angle, the ending-point
- is the point on the <b>gradient-line</b> where a line drawn perpendicular
- to the <b>gradient-line</b> would intersect the corner of the box in that
+ is the point on the <i>gradient-line</i> where a line drawn perpendicular
+ to the <i>gradient-line</i> would intersect the corner of the box in that
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
@@ -430,8 +430,8 @@
<div style="overflow: hidden">
<img style="float: right; margin-left: 1em;" src='gradient-diagram.png' alt="[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner. There is a line, illustrating the gradient-line, angled at 45 degrees and passing through the center of the box. The starting-point and ending-point of the gradient-line are indicated by the intersection of the gradient-line with two additional lines that pass through the bottom-left and top-right corners of the box.]">
<p>This example illustrates visually how to calculate the
- <b>gradient-line</b> from the rules above. This shows the starting
- and ending-point of the <b>gradient-line</b>, along with the actual
+ <i>gradient-line</i> from the rules above. This shows the starting
+ and ending-point of the <i>gradient-line</i>, along with the actual
gradient, produced by an element with
''background: linear-gradient(45deg, white, black);''.</p>
<p>Notice how, though the starting-point and ending-point are outside
@@ -443,8 +443,8 @@
</div>
<p>The gradient's color stops are typically placed between the starting-point
- and ending-point on the <b>gradient-line</b>, but this isn't required - the
- <b>gradient-line</b> extends infinitely in both directions. The starting-point
+ and ending-point on the <i>gradient-line</i>, but this isn't required - the
+ <i>gradient-line</i> extends infinitely in both directions. The starting-point
and ending-point are merely arbitrary distance markers - the starting-point
defines where 0%, 0px, etc are located when specifying color-stops, and
the ending-point defines where 100% is located. Color-stops are allowed
@@ -518,7 +518,7 @@
)</code></pre>
<p>The first argument to the function specifies the center of the ellipse.
- <b><bg-position></b> is taken from the Backgrounds and Borders Module, and
+ <i><bg-position></i> is taken from the Backgrounds and Borders Module, and
has the same definition. It specifies the center of the gradient. If omitted,
it defaults to ''center''. Color-stop positions are measured along an
imaginary line extending from the center of the gradient to the right.</p>
@@ -530,7 +530,7 @@
<dt>Implicitly</dt>
<dd>
<p>The size and shape of the ending-ellipse can be defined
- <em>implicitly</em> with a size and shape keyword. The <b><shape></b>
+ <em>implicitly</em> with a size and shape keyword. The <i><shape></i>
is defined as </p>
<pre><code><dfn><shape></dfn> = [ circle | ellipse ]</code></pre>
@@ -540,19 +540,19 @@
will be an axis-aligned ellipse (that is, its major and minor radiuses
will be horizontal and vertical, not necessarily in that order).</p>
- <p>The <b><size></b> keyword is defined as </p>
+ <p>The <i><size></i> keyword is defined as </p>
<pre><code><dfn><size></dfn> = [ closest-side | closest-corner | farthest-side | farthest-corner | contain | cover ]</code></pre>
- <p>If <b><shape></b> is ''circle'' and <b><size></b> is ''closest-side'',
+ <p>If <i><shape></i> is ''circle'' and <i><size></i> is ''closest-side'',
the ending-shape is a circle sized so that it exactly meets the side
of the box closest to its center. For example, if the box was 100px
wide and 200px tall, and the center of the gradient was ''10% 10%'',
then the closest side is the left side of the box (it is 10px from
the starting-point, while the top is 20px from it, and the right and
bottom sides are much further). The gradient-shape would thus be a
- circle with a radius of 10px. If <b><shape></b> is ''ellipse'' and
- <b><size></b> is ''closest-side'', the gradient-shape is an ellipse
+ circle with a radius of 10px. If <i><shape></i> is ''ellipse'' and
+ <i><size></i> is ''closest-side'', the gradient-shape is an ellipse
sized so that it exactly meets the vertical and horizontal sides of
the box closest to its center. Using the same box and starting-point
as the previous example, the gradient-shape would be an ellipse with
@@ -565,7 +565,7 @@
from its center (or the farthest vertical and horizontal sides, if
the shape is ''ellipse''). ''closest-corner'' and ''farthest-corner''
size the gradient-shape so that it exactly meets the closest or farthest
- corner of the box from its center, respectively. If <b><shape></b>
+ corner of the box from its center, respectively. If <i><shape></i>
is ''ellipse'', the gradient-shape has the same ratio of width to height
that it would if ''closest-side'' or ''farthest-side'' were specified,
as appropriate. ''contain'' is a synonym for ''closest-side'', and
@@ -615,7 +615,7 @@
indicate a color-stop placed on the line a corresponding distance from the
center. Negative distances are allowed in a radial gradient and work the
same as in linear gradients with respect to setting the color of the
- <b>gradient-line</b>, but colors before the starting-point of the <b>gradient-line</b>
+ <i>gradient-line</i>, but colors before the starting-point of the <i>gradient-line</i>
are not displayed. For example, ''radial-gradient(red -50px, yellow 100px)''
would produce an elliptical gradient which starts with a reddish-orange color
in the center (the color 1/3 between red and yellow) and transitions to
@@ -721,7 +721,7 @@
<pre class=prod><code><dfn><color-stop></dfn> = <color> [ <percentage> | <length> ]?</code></pre>
- <p>Color-stops are points placed along the line defined by the <b>gradient-line</b>
+ <p>Color-stops are points placed along the line defined by the <i>gradient-line</i>
at the beginning of the rule. Color-stops must be specified in order.
Percentages refer to the length of the gradient-line, with 0% being at the
starting point and 100% being at the ending point. Lengths are measured
@@ -800,7 +800,7 @@
at all. This section defines generically the size negotiation model between
the object and the CSS layout algorithms.</p>
- <p>In order to define this handling, we must define a few terms, to make it
+ <p>In order to define this handling, we define a few terms, to make it
easier to refer to various concepts:</p>
<dl>
@@ -820,7 +820,7 @@
<p>If an object (such as an icon) has multiple sizes, then the largest
size is used. If it has multiple aspect ratios of that size (or of no
size), then the aspect ratio closest to the aspect ratio of the
- <b>default image sizing area</b> is used. <span class="issue">This is pretty
+ <i>default image sizing area</i> is used. <span class="issue">This is pretty
arbitrary.</span></p>
</dd>
@@ -830,35 +830,35 @@
definite width and height, a set of constraints, or a combination thereof.</dd>
<dt><dfn>CSS View Box</dfn></dt>
- <dd>The CSS View Box is the result of transforming the <b>intrinsic dimensions</b>
+ <dd>The CSS View Box is the result of transforming the <i>intrinsic dimensions</i>
into a concrete size, based on the specified size and the
- <b>default image sizing area</b>. A CSS View Box always has a definite height
+ <i>default image sizing area</i>. A CSS View Box always has a definite height
and width.</dd>
<dt><dfn>default image sizing area</dfn></dt>
<dd>The default image sizing area is a rectangle with a definite height and
width used to determine the size of the CSS View Box when both the
- <b>intrinsic dimensions</b> and <b>specified size</b> are missing dimensions.
+ <i>intrinsic dimensions</i> and <i>specified size</i> are missing dimensions.
It varies based on the property that the image is being used as a value in:
<dl>
<dt>'background-image'</dt>
- <dd>The <b>default image sizing area</b> is the size of the background
+ <dd>The <i>default image sizing area</i> is the size of the background
positioning area of the element.</dd>
<dt>'list-style-image'</dt>
- <dd>The <b>default image sizing area</b> is a 1em square.</dd>
+ <dd>The <i>default image sizing area</i> is a 1em square.</dd>
<dt>'border-image'</dt>
- <dd>The <b>default image sizing area</b> is the size of the element's
- <a href="http://dev.w3.org/csswg/css3-background/#border-image-area"><b>border image area</b></a>.</dd>
+ <dd>The <i>default image sizing area</i> is the size of the element's
+ <a href="http://dev.w3.org/csswg/css3-background/#border-image-area"><i>border image area</i></a>.</dd>
<dt>'cursor'</dt>
- <dd>The <b>default image sizing area</b> is a UA-defined size that should
+ <dd>The <i>default image sizing area</i> is a UA-defined size that should
be based on the size of a typical cursor on the UA's operating system.</dd>
<dt>Anything else</dt>
- <dd>The <b>default image sizing area</b> is a rectangle 300px wide and 150px
+ <dd>The <i>default image sizing area</i> is a rectangle 300px wide and 150px
tall.</dd>
</dl>
</dd>
@@ -869,58 +869,58 @@
<ol>
<li>When an image or object is specified in a document, such as through url()
value in a 'background-image' property or a @src attribute on an <img> element,
- CSS queries the object for its <b>intrinsic dimensions</b>.</li>
+ CSS queries the object for its <i>intrinsic dimensions</i>.</li>
- <li>Using the <b>intrinsic dimensions</b> and the <b>specified size</b>,
- CSS then computes a <b>CSS View Box</b> that defines the size of the region the
+ <li>Using the <i>intrinsic dimensions</i> and the <i>specified size</i>,
+ CSS then computes a <i>CSS View Box</i> that defines the size of the region the
object will render in, as follows:
<ol>
- <li>If the <b>specified size</b> is just a definite width and height, the
- <b>CSS View Box</b> must be that width and height.</li>
- <li>If the <b>specified size</b> is just a definite width or just a definite
- height, then the <b>CSS View Box</b> must have the same width or height, as
+ <li>If the <i>specified size</i> is just a definite width and height, the
+ <i>CSS View Box</i> must be that width and height.</li>
+ <li>If the <i>specified size</i> is just a definite width or just a definite
+ height, then the <i>CSS View Box</i> must have the same width or height, as
appropriate. The other dimension is calculated as follows:
<ol>
- <li>If the object has an <b>intrinsic aspect ratio</b>, the <b>CSS View Box</b>
+ <li>If the object has an <i>intrinsic aspect ratio</i>, the <i>CSS View Box</i>
must have the same aspect ratio.</li>
- <li>Otherwise, if the object has an an <b>intrinsic height</b> or
- <b>intrinsic width</b> (whichever is missing from the <b>specified size</b>),
- then the <b>CSS View Box</b> must have that height or width.</li>
+ <li>Otherwise, if the object has an an <i>intrinsic height</i> or
+ <i>intrinsic width</i> (whichever is missing from the <i>specified size</i>),
+ then the <i>CSS View Box</i> must have that height or width.</li>
- <li>Otherwise, the <b>CSS View Box</b> must have the same width or
+ <li>Otherwise, the <i>CSS View Box</i> must have the same width or
height (whichever is missing from the specified size) as the
- <b>default image sizing area</b>.</li>
+ <i>default image sizing area</i>.</li>
</ol>
</li>
- <li>If the <b>specified size</b> is neither a definite width nor height, and
- has no additional contraints, the dimensions of the <b>CSS View Box</b> must
+ <li>If the <i>specified size</i> is neither a definite width nor height, and
+ has no additional contraints, the dimensions of the <i>CSS View Box</i> must
be computed as follows:
<ol>
- <li>If the object has an <b>intrinsic width</b> and an <b>intrinsic height</b>,
- the <b>CSS View Box</b> must have that same height and width.</li>
+ <li>If the object has an <i>intrinsic width</i> and an <i>intrinsic height</i>,
+ the <i>CSS View Box</i> must have that same height and width.</li>
- <li>If the object has only an <b>intrinsic width</b> or <b>intrinsic height</b>,
- and no <b>intrinsic aspect ratio</b>, the <b>CSS View Box</b> must have that
+ <li>If the object has only an <i>intrinsic width</i> or <i>intrinsic height</i>,
+ and no <i>intrinsic aspect ratio</i>, the <i>CSS View Box</i> must have that
width or height, and the height or width (whichever is missing
- from the <b>intrinsic dimensions</b>) of the <b>default image sizing area</b>.</li>
+ from the <i>intrinsic dimensions</i>) of the <i>default image sizing area</i>.</li>
- <li>If the object has only an <b>intrinsic aspect ratio</b>, the
- <b>CSS View Box</b> must have that aspect ratio, and additionally be as
+ <li>If the object has only an <i>intrinsic aspect ratio</i>, the
+ <i>CSS View Box</i> must have that aspect ratio, and additionally be as
large as possible without either its height or width exceeding
- the height or width of the <b>default image sizing area</b>.</li>
+ the height or width of the <i>default image sizing area</i>.</li>
- <li>Otherwise, the <b>CSS View Box</b> must be the size of the
- <b>default image sizing area</b>.</li>
+ <li>Otherwise, the <i>CSS View Box</i> must be the size of the
+ <i>default image sizing area</i>.</li>
</ol>
</li>
- <li>If the <b>specified size</b> has additional constraints, the
- <b>CSS View Box</b> must be sized to satisfy those constraints. (For example,
+ <li>If the <i>specified size</i> has additional constraints, the
+ <i>CSS View Box</i> must be sized to satisfy those constraints. (For example,
''object-fit: contain'' specifies slightly more complex handling for
sizing replaced elements, and ''background-repeat: round'' can adjust
the size specified in 'background-size' so that the image fits an even
@@ -1242,7 +1242,7 @@
scale it. Otherwise, this value must be treated as ''fill''.</p>
</dd>
- <dt>scale-down <b class=issue>better name?</b></dt>
+ <dt>scale-down <b class=issue>better name?</i></dt>
<dd>
<p>This value must act identically to ''none'' or ''contain'', whichever
would make the contents smaller.</p>
@@ -1332,7 +1332,7 @@
<div>
<h3 id=serializing-resolution>Serializing a <resolution></h3>
- <p>The serialization of the <b><resolution></b> value type is defined in
+ <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
@@ -1347,9 +1347,9 @@
</div>
<div>
- <h3 id=serializing-image-notation>Serializing the ''image()'' / <b><image-list></b> notation</h3>
+ <h3 id=serializing-image-notation>Serializing the ''image()'' / <i><image-list></i> notation</h3>
- <p>To serialize an <b><image-list></b>:</p>
+ <p>To serialize an <i><image-list></i>:</p>
<ol>
<li>Append "image(" to s.</li>
@@ -1362,7 +1362,7 @@
<li>Append a close parenthesis ")" to s.</li>
</ol>
- <p>To serialize an <b><image-decl></b>:</p>
+ <p>To serialize an <i><image-decl></i>:</p>
<ol>
<li>Serialize the first part of the value (the <string> or <url-token>)
@@ -1375,9 +1375,9 @@
</div>
<div>
- <h3 id=serializing-element-notation>Serializing the ''element()'' / <b><element-reference></b> notation</h3>
+ <h3 id=serializing-element-notation>Serializing the ''element()'' / <i><element-reference></i> notation</h3>
- <p>To serialize an <b><element-reference></b>:</p>
+ <p>To serialize an <i><element-reference></i>:</p>
<ol>
<li>Append "element(" to s.</li>
@@ -1390,19 +1390,19 @@
</div>
<div>
- <h3 id=serializing-cross-fade>Serializing the ''cross-fade()'' / <b><image-combination></b> notation</h3>
+ <h3 id=serializing-cross-fade>Serializing the ''cross-fade()'' / <i><image-combination></i> notation</h3>
- <p>To serialize an <b><image-combination></b>:</p>
+ <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 <b><image></b>,
+ <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 <b><image></b>,
+ <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>
@@ -1417,7 +1417,7 @@
<div>
<h3 id="serializing-gradients">Serializing Gradients</h3>
- <p>To serialize a <b><linear-gradient></b>:</p>
+ <p>To serialize a <i><linear-gradient></i>:</p>
<ol>
<li>Append "linear-gradient(" to s.</li>
@@ -1448,7 +1448,7 @@
<li>Append a close parenthesis ")" to s.</li>
</ol>
- <p>To serialize a <b><radial-gradient></b>:</p>
+ <p>To serialize a <i><radial-gradient></i>:</p>
<ol>
<li>Append "radial-gradient(" to s.</li>
@@ -1502,25 +1502,25 @@
<li>Append a close parenthesis ")" to s.</li>
</ol>
- <p>To serialize a <b><repeating-linear-gradient></b>:</p>
+ <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 <b><linear-gradient></b>, except
+ <li>Follow the steps for serializing a <i><linear-gradient></i>, except
skip step 1.</li>
</ol>
- <p>To serialize a <b><repeating-radial-gradient></b>:</p>
+ <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 <b><radial-gradient></b>, except
+ <li>Follow the steps for serializing a <i><radial-gradient></i>, except
skip step 1.</li>
</ol>
- <p>To serialize a <b><color-stop></b>:</p>
+ <p>To serialize a <i><color-stop></i>:</p>
<ol>
<li>Serialize the <color>, and append it to s.</li>
@@ -1589,7 +1589,7 @@
timing function and a 1s duration, after .3s t is equal to .3.</p>
<div>
- <h3>Interpolating <b><image></b></h3>
+ <h3>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,
@@ -1601,7 +1601,7 @@
</div>
<div>
- <h3 id=interpolating-gradients>Interpolating <b><gradient></b></h3>
+ <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
Received on Wednesday, 9 February 2011 10:30:02 UTC