- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 04 Nov 2011 08:29:13 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv29198
Modified Files:
Overview.html Overview.src.html
Log Message:
Switch radial-gradient() syntax to dbaron's proposal. Clean up prose to be more compact and readable. <http://lists.w3.org/Archives/Public/www-style/2011Nov/0049.html>
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.177
retrieving revision 1.178
diff -u -d -r1.177 -r1.178
--- Overview.html 3 Oct 2011 22:32:01 -0000 1.177
+++ Overview.html 4 Nov 2011 08:29:10 -0000 1.178
@@ -17,11 +17,12 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 October 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 November
+ 2011</h2>
<dl>
<dt>This Version:</dt>
- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111003/">http://www.w3.org/TR/2011/WD-css3-images-20111003/</a>-->
+ <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111104/">http://www.w3.org/TR/2011/WD-css3-images-20111104/</a>-->
[...2626 lines suppressed...]
+ <li><side-or-corner>, <a href="#side-or-corner"
+ title="<side-or-corner>"><strong>5.1.1.</strong></a>
- <li>specified size, <a href="#specified-size"
- title="specified size"><strong>6.1.</strong></a>
+ <li>specified size, <a href="#specified-size"
+ title="specified size"><strong>6.1.</strong></a>
- <li>transition-capable, <a href="#transition-capable"
- title=transition-capable><strong>2.</strong></a>
- </ul>
- <!--end-index-->
+ <li>transition-capable, <a href="#transition-capable"
+ title=transition-capable><strong>2.</strong></a>
+ </ul>
+ <!--end-index-->
+ </dl>
</html>
<!-- Keep this comment at the end of the file
Local variables:
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.184
retrieving revision 1.185
diff -u -d -r1.184 -r1.185
--- Overview.src.html 3 Oct 2011 22:32:01 -0000 1.184
+++ Overview.src.html 4 Nov 2011 08:29:10 -0000 1.185
@@ -532,100 +532,89 @@
of the box to the other as with linear gradients, they instead emerge from
a single point and smoothly spread outward in a circular or elliptical shape.</p>
- <p>A radial gradient is specified by first pinpointing the center of the
- gradient, where the 0% ellipse will be, then specifying the size and shape
- of the 100% ellipse, ending with a list of color-stops just like a linear-gradient.
- Between the center and the <i>ending-shape</i>, and past the <i>ending-shape</i>,
- concentric ellipses are drawn and colored according to the specified color-stops.</p>
+ <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
+ 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
+ according to the specified color stops.</p>
<!-- ====================================================================== -->
<h4 class='no-toc' id='radial-gradient-syntax'>
radial-gradient() Syntax</h4>
+ <p>The radial gradient syntax is defined as follows:
+
<pre class=prod>
<dfn><radial-gradient></dfn> = radial-gradient(
- [<position>,]?
- [[
- [<shape> || <size>]
- |
- [<length> | <percentage>]{2}
- ],]?
- <color-stop>[, <color-stop>]+
-)
- </pre>
-
- <p>The first argument to the function specifies the center of the gradient. The <code><position></code> value type 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]]</p>
-
- <p>If this argument is omitted, it defaults to ''center''.</p>
-
- <p>The second argument to the function specifies the size and shape of the
- <dfn title="ending-shape|ending-shape's">ending-shape</dfn>, which defines the shape of the gradient and the locations of percentage-location color-stops. This can be specified in two ways, with different characteristics:</p>
+ [ [ <shape> , ] |
+ [ <shape>? [ at <position> || to <extent> ] , ]
+ ]?
+ <color-stop> [ , <color-stop> ]+
+)</pre>
+ <p>The arguments are defined as follows:
<dl>
- <dt>Implicitly</dt>
- <dd>
- <p>The size and shape of the <i>ending-shape</i> can be defined
- <em>implicitly</em> with a size and shape keyword. The <i><shape></i>
- keyword is defined as:</p>
-
- <pre><code><dfn><shape></dfn> = circle | ellipse</code></pre>
-
- <p>''circle'' indicates that the <i>ending-shape</i> will be a circle with a constant radius. ''ellipse'' indicates that the gradient-shape will be an axis-aligned ellipse (that is, its major and minor radiuses will be horizontal and vertical, not necessarily in that order). If the <i><shape></i> is omitted, it defaults to ''ellipse''.</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>
+ <dt><shape></dt>
+ <dd>Can be either ''circle'' or ''ellipse''; determines whether the
+ gradient's <i>ending-shape</i> is a circle or an ellipse, respectively.
+ If the <shape> is omitted it defaults to ''ellipse''.
- <p>Its values are defined in the list below. For the purpose of these definitions, consider the box edges as extending infinitely in both directions, rather than being finite line segments. If the <i><size></i> is omitted, it defaults to ''cover''.</p>
+ <dt><position></dt>
+ <dd>Determines the center of the gradient. The <position> 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:
<dl>
- <dt><dfn id='radial-closest-side'>closest-side</dfn></dt>
- <dd>
- <p>If the <i><shape></i> is ''circle'', the <i>ending-shape</i> must be a circle sized so that it exactly meets the closest side of the box.</p>
-
- <p>If the <i><shape></i> is ''ellipse'', the <i>ending-shape</i> must be an ellipse sized so that it exactly meets the closest horizontal and vertical sides of the box.</p>
- </dd>
-
- <dt><dfn id='radial-farthest-side'>farthest-side</dfn></dt>
- <dd>Same as ''closest-side'', except the <i>ending-shape</i> must be sized based on the farthest side(s).</dd>
-
- <dt><dfn id='radial-closest-corner'>closest-corner</dfn></dt>
- <dd>
- <p>If the <i><shape></i> is ''circle'', the <i>ending-shape</i> must be a circle sized so that it exactly meets the closest corner of the box.</p>
-
- <p>If the <i><shape></i> is ''ellipse'', the <i>ending-shape</i> must be an ellipse with the same aspect-ratio it would have if ''closest-side'' were specified, but sized so that it exactly meets the closest corner of the box.</p>
+ <dt><dfn id='radial-closest-side'>''closest-side''</dfn></dt>
+ <dd>The <i>ending shape</i> is sized so that that it exactly meets the
+ side of the box closest to the gradient's center. If the shape is an
+ ellipse, it exactly meets 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
+ 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
+ side 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
+ 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> must be sized based on the farthest corner. If <i><shape></i> is ''ellipse'', the <i>ending-shape</i> must have the same aspect ratio it would have if ''farthest-side'' were specified.</dd>
-
- <dt><dfn id='radial-contain'>contain</dfn></dt>
- <dd>This value is an alias for ''closest-side'', and has the same meaning.</dd>
-
- <dt><dfn id='radial-cover'>cover</dfn></dt>
- <dd>This value is an alias for ''farthest-corner'', and has the same meaning.</dd>
- </dl>
- </dd>
-
- <dt>Explicitly</dt>
- <dd>
- <p>Alternately, the <i>ending-shape's</i> size and shape can be defined
- explicitly, by providing two lengths or percentages. These measure
- the length of the horizontal and vertical axises of the ellipse,
- respectively. (The axis length is the length from the center of the
- ellipse to the edge, similar to the radius of a circle, not the
- diameter.)</p>
-
- <p>Percentages used in the first value are relative to the width of
- the box, while percentages used in the second value are relative to
- the height of the box.</p>
-
- <p>Negative lengths or percentages are a syntax error.</p>
+ <dt><dfn id='radial-farthest-corner'>''farthest-corner''</dfn></dt>
+ <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
+ have if ''farthest-side'' were specified.
+ <dt><dfn id='radial-contain'>''contain''</dfn></dt>
+ <dd>This value is an alias for ''closest-side'', and has the same
+ meaning.</dd>
+ <dt><dfn id='radial-cover'>''cover''</dfn></dt>
+ <dd>This value is an alias for ''farthest-corner'', and has the same
+ meaning.</dd>
+ <dt><dfn id='radial-size'>[<length> or <percentage>]{1,2}</dfn></dt>
+ <dd>Gives the size of the shape explicitly. The first value represents
+ the horizontal radius, the second the vertical radius. Percentages
+ values are relative to the corresponding dimension of the box.
+ If only one value is specified, both are the same. If the shape is
+ specified to be a circle, a ''radial-gradient()'' with two values is
+ invalid. Negative values are also invalid.
</dd>
</dl>
- <p>Some combinations of position, size, and shape will produce a <dfn>degenerate shape</dfn> - a circle or ellipse with a radius of 0. This will occur if the center is on a box edge and the second argument is ''circle closest-side'', ''ellipse closest-side'', or ''ellipse closest-corner'', or if the center is on a box corner and the shape is ''closest-corner'', or if the size and shape are given explicitly and either of the radiuses are ''0''. In these instances, the gradient must be be rendered as follows:</p>
+ <p>Some combinations of position, size, and shape will produce a circle
+ or ellipse with a radius of 0. This will occur, for example, if the
+ center is on a box edge and ''closest-side'' or ''closest-corner'' is
+ specified or if the size and shape are given explicitly and either of
+ the radiuses is zero. In these instances, the gradient must be be
+ rendered as follows:</p>
<dl>
<dt>If the <i>ending-shape</i> has zero width (regardless of the height):</dt>
@@ -635,12 +624,6 @@
<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>
- <p>If this argument is omitted, it defaults to ''ellipse cover''.</p>
-
- <p>If only one argument is provided before the color-stops, and it could
- be interpreted as either a position or an explicit size (for example, in
- ''radial-gradient(10% 10%, red, blue)''), it must be interpreted as a position.</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>
Received on Friday, 4 November 2011 08:29:15 UTC