- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 07 Nov 2011 23:53:40 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv29831
Modified Files:
Overview.html Overview.src.html
Log Message:
More cross-linking. Switch ending-shape to ending shape, since it's a term, not a CSS identifier.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.183
retrieving revision 1.184
diff -u -d -r1.183 -r1.184
--- Overview.html 7 Nov 2011 23:43:21 -0000 1.183
+++ Overview.html 7 Nov 2011 23:53:37 -0000 1.184
@@ -845,11 +845,11 @@
<p>A radial gradient is specified by first pinpointing the <i>center</i> of
the gradient (where the 0% ellipse will be) then specifying the size and
- shape of the <dfn id=ending-shape>ending-shape</dfn> (the 100% ellipse).
+ shape of the <dfn id=ending-shape>ending shape</dfn> (the 100% ellipse).
Color stops are given as a list, just as for ‘<code
class=css>linear-gradient()</code>’. Starting from the <i>center</i>
and progressing towards (and potentially beyond) the <a
- href="#ending-shape"><i>ending-shape</i></a> concentric ellipses are drawn
+ href="#ending-shape"><i>ending shape</i></a> concentric ellipses are drawn
and colored according to the specified color stops.</p>
<!-- ====================================================================== -->
@@ -861,27 +861,31 @@
<pre class=prod>
<dfn
id=ltradial-gradient><radial-gradient></dfn> = radial-gradient(
- [ [ <shape> , ] |
- [ <shape>? [ at <position> || to <extent> ] , ]
+ [ [ <a
+ href="#ltshapegt"><var><shape></var></a> , ] |
+ [ <a
+ href="#ltshapegt"><var><shape></var></a>? [ at <a
+ href="#ltpositiongt"><var><position></var></a> || to <a
+ href="#ltextentgt"><var><extent></var></a> ] , ]
]?
- <color-stop> [ , <color-stop> ]+
+ <var><color-stop></var> [ , <var><color-stop></var> ]+
)</pre>
<p>The arguments are defined as follows:
<dl>
- <dt><shape>
+ <dt id=radial-shape><dfn id=ltshapegt><shape></dfn>
<dd>Can be either ‘<code class=css>circle</code>’ or
‘<code class=css>ellipse</code>’; determines whether the
- gradient's <a href="#ending-shape"><i>ending-shape</i></a> is a circle or
+ gradient's <a href="#ending-shape"><i>ending shape</i></a> is a circle or
an ellipse, respectively. If the <shape> is omitted it defaults to
‘<code class=css>ellipse</code>’.
- <dt><position>
+ <dt id=radial-position><dfn id=ltpositiongt><position></dfn>
- <dd>Determines the center of the gradient. The <position> is defined
- as the positioning syntax of ‘<code class=css><a
+ <dd>Determines the center of the gradient. The <position> notation
+ is defined as the positioning syntax of ‘<code class=css><a
href="http://www.w3.org/TR/css3-background/#the-background-position">background-position</a></code>’
and is resolved in the same way, using the center-point as the subject
and the content box as the positioning area. <a href="#CSS21"
@@ -889,19 +893,21 @@
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> If this argument is
omitted, it defaults to ‘<code class=css>center</code>’.
- <dt><extent>
+ <dt id=radial-extent><dfn id=ltextentgt><extent></dfn>
<dd>
<p>Determines the size of the gradient's <a
- href="#ending-shape"><i>ending-shape</i></a>. If omitted it defaults to
- ‘<code class=css>cover</code>’. It can be given explicitly
- or by keyword. Possible keywords are:
+ href="#ending-shape"><i>ending shape</i></a>. If omitted it defaults to
+ ‘<code class=css>farthest-corner</code>’. It can be given
+ explicitly or by keyword. For the purpose of the keyword definitions,
+ consider the box edges as extending infinitely in both directions,
+ rather than being finite line segments. Possible values are:
<dl>
<dt><dfn id=radial-closest-side>‘<code
class=css>closest-side</code>’</dfn>
- <dd>The <a href="#ending-shape"><i>ending-shape</i></a> is sized so that
+ <dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
that it is tangent to the side of the box closest to the gradient's
center. If the shape is an ellipse, it is tangent to the closest side
in both dimensions.
@@ -910,25 +916,26 @@
class=css>farthest-side</code>’</dfn>
<dd>Same as ‘<code class=css>closest-side</code>’, except
- the <a href="#ending-shape"><i>ending-shape</i></a> is sized based on
+ the <a href="#ending-shape"><i>ending shape</i></a> is sized based on
the farthest side(s).
<dt><dfn id=radial-closest-corner>‘<code
class=css>closest-corner</code>’</dfn>
- <dd>The <i>ending shape</i> is sized so that that it passes through the
- corner of the box closest to the gradient's center. If the shape is an
- ellipse, the <a href="#ending-shape"><i>ending-shape</i></a> is given
- the same aspect-ratio it would have if ‘<code
+ <dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
+ that it passes through the corner of the box closest to the gradient's
+ center. If the shape is an ellipse, the <a
+ href="#ending-shape"><i>ending shape</i></a> is given the same
+ aspect-ratio it would have if ‘<code
class=css>closest-side</code>’ were specified.
<dt><dfn id=radial-farthest-corner>‘<code
class=css>farthest-corner</code>’</dfn>
<dd>Same as ‘<code class=css>closest-corner</code>’, except
- the <a href="#ending-shape"><i>ending-shape</i></a> is be sized based
+ the <a href="#ending-shape"><i>ending shape</i></a> is be sized based
on the farthest corner. If the shape is an ellipse, the <a
- href="#ending-shape"><i>ending-shape</i></a> is given the same aspect
+ href="#ending-shape"><i>ending shape</i></a> is given the same aspect
ratio it would have if ‘<code
class=css>farthest-side</code>’ were specified.
@@ -952,7 +959,7 @@
0% location is at the start of the <a
href="#gradient-ray"><i>gradient-ray</i></a>, and the 100% location is
on the point where the <a href="#gradient-ray"><i>gradient-ray</i></a>
- intersects the <a href="#ending-shape"><i>ending-shape</i></a>. Negative
+ intersects the <a href="#ending-shape"><i>ending shape</i></a>. Negative
locations can be specified; though negative locations are never directly
consulted for rendering, they can affect the color of non-negative
locations on the <a href="#gradient-ray"><i>gradient-ray</i></a> through
@@ -980,10 +987,10 @@
degenerate cases, the gradient must be be rendered as follows:</p>
<dl>
- <dt>If the <a href="#ending-shape"><i>ending-shape</i></a> has zero
+ <dt>If the <a href="#ending-shape"><i>ending shape</i></a> has zero
width (regardless of the height):
- <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+ <dd>Render as if the <a href="#ending-shape"><i>ending shape</i></a> was
an ellipse whose height was an arbitrary very large number and whose
width was an arbitrary very small number greater than zero. <span
class=note>This will make the gradient look similar to a horizontal
@@ -991,10 +998,10 @@
also means that all color-stop positions specified with a percentage
resolve to ‘<code class=css>0px</code>’.</span>
- <dt>Otherwise, if the <a href="#ending-shape"><i>ending-shape</i></a>
+ <dt>Otherwise, if the <a href="#ending-shape"><i>ending shape</i></a>
has zero height:
- <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+ <dd>Render as if the <a href="#ending-shape"><i>ending shape</i></a> was
an ellipse whose width was an arbitrary very large number and whose
height was an arbitrary very small number greater than zero. <span
class=note>This will make the gradient look like a solid-color image
@@ -2231,8 +2238,11 @@
<li><element-reference>, <a href="#ltelement-reference"
title="<element-reference>"><strong>4.3.</strong></a>
- <li>ending-shape, <a href="#ending-shape"
- title=ending-shape><strong>5.2.</strong></a>
+ <li>ending shape, <a href="#ending-shape"
+ title="ending shape"><strong>5.2.</strong></a>
+
+ <li><extent>, <a href="#ltextentgt"
+ title="<extent>"><strong>5.2.1.</strong></a>
<li>‘<code class=css>farthest-corner</code>’, <a
href="#radial-farthest-corner"
@@ -2300,7 +2310,9 @@
title=paint-source><strong>4.3.</strong></a>
<li><a href="#ltposition"><code><position></code></a>, <a
- href="#ltposition" title="<position>"><strong>6.5.</strong></a>
+ href="#ltposition" title="<position>"><strong>6.5.</strong></a>, <a
+ href="#ltpositiongt"
+ title="<position>"><strong>5.2.1.</strong></a>
<li><radial-gradient>, <a href="#ltradial-gradient"
title="<radial-gradient>"><strong>5.2.1.</strong></a>
@@ -2316,6 +2328,9 @@
<li><resolution>, <a href="#ltresolution"
title="<resolution>"><strong>3.</strong></a>
+ <li><shape>, <a href="#ltshapegt"
+ title="<shape>"><strong>5.2.1.</strong></a>
+
<li><side-or-corner>, <a href="#side-or-corner"
title="<side-or-corner>"><strong>5.1.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.190
retrieving revision 1.191
diff -u -d -r1.190 -r1.191
--- Overview.src.html 7 Nov 2011 23:43:21 -0000 1.190
+++ Overview.src.html 7 Nov 2011 23:53:38 -0000 1.191
@@ -534,10 +534,10 @@
<p>A radial gradient is specified by first pinpointing the <i>center</i>
of the gradient (where the 0% ellipse will be) then specifying the size
- and shape of the <dfn>ending-shape</dfn> (the 100% ellipse). Color stops
+ and shape of the <dfn>ending shape</dfn> (the 100% ellipse). Color stops
are given as a list, just as for ''linear-gradient()''.
Starting from the <i>center</i> and progressing towards (and potentially
- beyond) the <i>ending-shape</i> concentric ellipses are drawn and colored
+ beyond) the <i>ending shape</i> concentric ellipses are drawn and colored
according to the specified color stops.</p>
<!-- ====================================================================== -->
@@ -549,49 +549,51 @@
<pre class=prod>
<dfn><radial-gradient></dfn> = radial-gradient(
- [ [ <shape> , ] |
- [ <shape>? [ at <position> || to <extent> ] , ]
+ [ [ <var><shape></var> , ] |
+ [ <var><shape></var>? [ at <var><position></var> || to <var><extent></var> ] , ]
]?
- <color-stop> [ , <color-stop> ]+
+ <var><color-stop></var> [ , <var><color-stop></var> ]+
)</pre>
<p>The arguments are defined as follows:
<dl>
- <dt><shape></dt>
+ <dt id=radial-shape><dfn><shape></dfn></dt>
<dd>Can be either ''circle'' or ''ellipse''; determines whether the
- gradient's <i>ending-shape</i> is a circle or an ellipse, respectively.
+ gradient's <i>ending shape</i> is a circle or an ellipse, respectively.
If the <shape> is omitted it defaults to ''ellipse''.
- <dt><position></dt>
- <dd>Determines the center of the gradient. The <position> is defined
- as the positioning syntax of
+ <dt id=radial-position><dfn><position></dfn></dt>
+ <dd>Determines the center of the gradient. The <position> notation
+ is defined as the positioning syntax of
'<a href="http://www.w3.org/TR/css3-background/#the-background-position">background-position</a>'
and is resolved in the same way, using the center-point as the subject and
the content box as the positioning area. [[!CSS21]] [[!CSS3BG]]
If this argument is omitted, it defaults to ''center''.
- <dt><extent>
- <dd><p>Determines the size of the gradient's <i>ending-shape</i>. If
- omitted it defaults to ''cover''. It can be given explicitly or
- by keyword. Possible keywords are:
+ <dt id=radial-extent><dfn><extent></dfn>
+ <dd><p>Determines the size of the gradient's <i>ending shape</i>. If
+ omitted it defaults to ''farthest-corner''. It can be given explicitly or
+ by keyword. For the purpose of the keyword definitions, consider the
+ box edges as extending infinitely in both directions, rather than
+ being finite line segments. Possible values are:
<dl>
<dt><dfn id='radial-closest-side'>''closest-side''</dfn></dt>
- <dd>The <i>ending-shape</i> is sized so that that it is tangent to the
+ <dd>The <i>ending shape</i> is sized so that that it is tangent to the
side of the box closest to the gradient's center. If the shape is an
ellipse, it is tangent to the closest side in both dimensions.</p>
<dt><dfn id='radial-farthest-side'>''farthest-side''</dfn></dt>
- <dd>Same as ''closest-side'', except the <i>ending-shape</i> is sized
+ <dd>Same as ''closest-side'', except the <i>ending shape</i> is sized
based on the farthest side(s).</dd>
<dt><dfn id='radial-closest-corner'>''closest-corner''</dfn></dt>
<dd>The <i>ending shape</i> is sized so that that it passes through the
corner of the box closest to the gradient's center. If the shape is an
- ellipse, the <i>ending-shape</i> is given the same aspect-ratio
+ ellipse, the <i>ending shape</i> is given the same aspect-ratio
it would have if ''closest-side'' were specified.
</dd>
<dt><dfn id='radial-farthest-corner'>''farthest-corner''</dfn></dt>
- <dd>Same as ''closest-corner'', except the <i>ending-shape</i> is be
+ <dd>Same as ''closest-corner'', except the <i>ending shape</i> is be
sized based on the farthest corner. If the shape is an ellipse,
- the <i>ending-shape</i> is given the same aspect ratio it would
+ the <i>ending shape</i> is given the same aspect ratio it would
have if ''farthest-side'' were specified.
<dt><dfn id='radial-size'>[<length> | <percentage>]{1,2}</dfn></dt>
<dd>Gives the size of the shape explicitly. The first value represents
@@ -606,7 +608,7 @@
<h4 class="no-toc" id="radial-color-stops">
Placing Color Stops</h4>
- <p>Color-stops are placed on a <dfn>gradient-ray</dfn>, similar to the <i>gradient-line</i> of linear gradients. The <i>gradient-ray</i> is anchored at the center of the gradient and extends toward the right. The 0% location is at the start of the <i>gradient-ray</i>, and the 100% location is on the point where the <i>gradient-ray</i> intersects the <i>ending-shape</i>. Negative locations can be specified; though negative locations are never directly consulted for rendering, they can affect the color of non-negative locations on the <i>gradient-ray</i> through interpolation. For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient that starts with a reddish-orange color in the center (specifically, #f50) and transitions to yellow. Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient.</p>
+ <p>Color-stops are placed on a <dfn>gradient-ray</dfn>, similar to the <i>gradient-line</i> of linear gradients. The <i>gradient-ray</i> is anchored at the center of the gradient and extends toward the right. The 0% location is at the start of the <i>gradient-ray</i>, and the 100% location is on the point where the <i>gradient-ray</i> intersects the <i>ending shape</i>. Negative locations can be specified; though negative locations are never directly consulted for rendering, they can affect the color of non-negative locations on the <i>gradient-ray</i> through interpolation. For example, ''radial-gradient(red -50px, yellow 100px)'' produces an elliptical gradient that starts with a reddish-orange color in the center (specifically, #f50) and transitions to yellow. Locations greater than 100% simply specify a location a correspondingly greater distance from the center of the gradient.</p>
<p>When drawing the concentric ellipses of the gradient, the color of each ellipse is the color of the <i>gradient-ray</i> at the point where the ellipse intersects the ray.</p>
@@ -621,11 +623,11 @@
be rendered as follows:</p>
<dl>
- <dt>If the <i>ending-shape</i> has zero width (regardless of the height):</dt>
- <dd>Render as if the <i>ending-shape</i> was an ellipse whose height was an arbitrary very large number and whose width was an arbitrary very small number greater than zero. <span class='note'>This will make the gradient look similar to a horizontal linear gradient that is mirrored across the center of the ellipse. It also means that all color-stop positions specified with a percentage resolve to ''0px''.</span></dd>
+ <dt>If the <i>ending shape</i> has zero width (regardless of the height):</dt>
+ <dd>Render as if the <i>ending shape</i> was an ellipse whose height was an arbitrary very large number and whose width was an arbitrary very small number greater than zero. <span class='note'>This will make the gradient look similar to a horizontal linear gradient that is mirrored across the center of the ellipse. It also means that all color-stop positions specified with a percentage resolve to ''0px''.</span></dd>
- <dt>Otherwise, if the <i>ending-shape</i> has zero height:</dt>
- <dd>Render as if the <i>ending-shape</i> was an ellipse whose width was an arbitrary very large number and whose height was an arbitrary very small number greater than zero. <span class='note'>This will make the gradient look like a solid-color image equal to the color of the last color-stop, or equal to the average color of the gradient if it's repeating.</span></dd>
+ <dt>Otherwise, if the <i>ending shape</i> has zero height:</dt>
+ <dd>Render as if the <i>ending shape</i> was an ellipse whose width was an arbitrary very large number and whose height was an arbitrary very small number greater than zero. <span class='note'>This will make the gradient look like a solid-color image equal to the color of the last color-stop, or equal to the average color of the gradient if it's repeating.</span></dd>
</dl>
<!-- ====================================================================== -->
Received on Monday, 7 November 2011 23:53:41 UTC