- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 19 Sep 2011 22:25:28 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv11213
Modified Files:
Overview.html Overview.src.html
Log Message:
Used 'ending-shape' consistently throughout radial gradients. Slight editorial cleanup of some radial gradient paragraphs.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.173
retrieving revision 1.174
diff -u -d -r1.173 -r1.174
--- Overview.html 19 Sep 2011 21:38:47 -0000 1.173
+++ Overview.html 19 Sep 2011 22:25:26 -0000 1.174
@@ -850,9 +850,10 @@
<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 ending-ellipse, and past the
- ending-ellipse, concentric ellipses are drawn and colored according to the
- specified color-stops.</p>
+ linear-gradient. Between the center and the <a
+ href="#ending-shape"><i>ending-shape</i></a>, and past the <a
+ href="#ending-shape"><i>ending-shape</i></a>, concentric ellipses are
+ drawn and colored according to the specified color-stops.</p>
<!-- ====================================================================== -->
<h4 class=no-toc id=radial-gradient-syntax><span class=secno>5.2.1. </span>
@@ -870,7 +871,7 @@
)
</pre>
- <p>The first argument to the function specifies the center of the ellipse.
+ <p>The first argument to the function specifies the center of the gradient.
The <a href="#ltposition"><code><position></code></a> value type 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>’
@@ -883,24 +884,29 @@
class=css>center</code>’.
<p>The second argument to the function specifies the size and shape of the
- ending-ellipse. This can be specified in two ways, with different
+ <dfn id=ending-shape
+ 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:
<dl>
<dt>Implicitly
<dd>
- <p>The size and shape of the ending-ellipse can be defined
+ <p>The size and shape of the <a
+ href="#ending-shape"><i>ending-shape</i></a> can be defined
<em>implicitly</em> with a size and shape keyword. The <a
href="#ltshape"><i><shape></i></a> keyword is defined as:</p>
<pre><code><dfn id=ltshape><shape></dfn> = circle | ellipse</code></pre>
- <p>‘<code class=css>circle</code>’ indicates that the
- ending-ellipse will be a circle with a constant radius. ‘<code
- class=css>ellipse</code>’ 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 <a
+ <p>‘<code class=css>circle</code>’ indicates that the <a
+ href="#ending-shape"><i>ending-shape</i></a> will be a circle with a
+ constant radius. ‘<code class=css>ellipse</code>’ 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 <a
href="#ltshape"><i><shape></i></a> is omitted, it defaults to
‘<code class=css>ellipse</code>’.</p>
@@ -919,30 +925,35 @@
<dd>
<p>If the <a href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>circle</code>’, the ending-shape must be a circle
- sized so that it exactly meets the closest side of the box.</p>
+ class=css>circle</code>’, the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be a circle sized so
+ that it exactly meets the closest side of the box.</p>
<p>If the <a href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>ellipse</code>’, the ending-shape must be an ellipse
- sized so that it exactly meets the closest horizontal and vertical
- sides of the box.</p>
+ class=css>ellipse</code>’, the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be an ellipse sized
+ so that it exactly meets the closest horizontal and vertical sides of
+ the box.</p>
<dt><dfn id=radial-farthest-side>farthest-side</dfn>
<dd>Same as ‘<a href="#radial-closest-side"><code
- class=css>closest-side</code></a>’, except the ending-shape must
- be sized based on the farthest side(s).
+ class=css>closest-side</code></a>’, except the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be sized based on the
+ farthest side(s).
<dt><dfn id=radial-closest-corner>closest-corner</dfn>
<dd>
<p>If the <a href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>circle</code>’, the ending-shape must be a circle
- sized so that it exactly meets the closest corner of the box.</p>
+ class=css>circle</code>’, the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be a circle sized so
+ that it exactly meets the closest corner of the box.</p>
<p>If the <a href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>ellipse</code>’, the ending-shape must be an ellipse
- with the same aspect-ratio it would have if ‘<a
+ class=css>ellipse</code>’, the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be an ellipse with
+ the same aspect-ratio it would have if ‘<a
href="#radial-closest-side"><code
class=css>closest-side</code></a>’ were specified, but sized so
that it exactly meets the closest corner of the box.</p>
@@ -950,12 +961,12 @@
<dt><dfn id=radial-farthest-corner>farthest-corner</dfn>
<dd>Same as ‘<a href="#radial-closest-corner"><code
- class=css>closest-corner</code></a>’, except the ending-shape
- must be sized based on the farthest corner. If <a
- href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>ellipse</code>’, the ending-shape must have the same
- aspect ratio it would have if ‘<a
- href="#radial-farthest-side"><code
+ class=css>closest-corner</code></a>’, except the <a
+ href="#ending-shape"><i>ending-shape</i></a> must be sized based on the
+ farthest corner. If <a href="#ltshape"><i><shape></i></a> is
+ ‘<code class=css>ellipse</code>’, the <a
+ href="#ending-shape"><i>ending-shape</i></a> must have the same aspect
+ ratio it would have if ‘<a href="#radial-farthest-side"><code
class=css>farthest-side</code></a>’ were specified.
<dt><dfn id=radial-contain>contain</dfn>
@@ -974,12 +985,12 @@
<dt>Explicitly
<dd>
- <p>Alternately, the ending-shape's 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>Alternately, the <a href="#ending-shape"><i>ending-shape's</i></a>
+ 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
@@ -1001,23 +1012,26 @@
rendered as follows:
<dl>
- <dt>If the ending-shape has zero width (regardless of the height):
+ <dt>If the <a href="#ending-shape"><i>ending-shape</i></a> has zero width
+ (regardless of the height):
- <dd>Render as if the ending-shape 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 ‘<code
- class=css>0px</code>’.</span>
+ <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
+ 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 ‘<code class=css>0px</code>’.</span>
- <dt>Otherwise, if the ending-shape has zero height:
+ <dt>Otherwise, if the <a href="#ending-shape"><i>ending-shape</i></a> has
+ zero height:
- <dd>Render as if the ending-shape 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>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
+ equal to the color of the last color-stop, or equal to the average color
+ of the gradient if it's repeating.</span>
</dl>
<p>If this argument is omitted, it defaults to ‘<code
@@ -1028,21 +1042,28 @@
‘<code class=css>radial-gradient(10% 10%, red, blue)</code>’),
it must be interpreted as a position.
- <p>Color-stops are placed on an imaginary line extending from the center of
- the gradient toward the right, with the 0% point at the center of the
- gradient, and 100% at the point where the line intersects the
- ending-ellipse. The color of each ellipse is equal to the color of the
- line where the ellipse intersects it. Locations past 100% can be
- specified, and simply indicate a color-stop placed on the line a
- corresponding distance from the center. Negative locations 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"><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 in the center (the color 1/3
- between red and yellow) and transitions to yellow at 100px wide.
+ <p>Color-stops are placed on a <dfn id=gradient-ray>gradient-ray</dfn>,
+ similar to the <a href="#gradient-line"><i>gradient-line</i></a> of linear
+ gradients. The <a href="#gradient-ray"><i>gradient-ray</i></a> is anchored
+ at the center of the gradient and extends toward the right. The 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
+ 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
+ interpolation. For example, ‘<code class=css>radial-gradient(red
+ -50px, yellow 100px)</code>’ 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>When drawing the concentric ellipses of the gradient, the color of each
+ ellipse is the color of the <a
+ href="#gradient-ray"><i>gradient-ray</i></a> at the point where the
+ ellipse intersects the ray.
<p class=issue>Brad suggests that we could drop the position/sizing
arguments and just use background-position and background-size. This would
@@ -2283,6 +2304,12 @@
<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.1.</strong></a>
+
+ <li>ending-shape's, <a href="#ending-shape"
+ title="ending-shape's"><strong>5.2.1.</strong></a>
+
<li>farthest-corner, <a href="#radial-farthest-corner"
title=farthest-corner><strong>5.2.1.</strong></a>
@@ -2299,6 +2326,9 @@
<li>gradient-line, <a href="#gradient-line"
title=gradient-line><strong>5.1.1.</strong></a>
+ <li>gradient-ray, <a href="#gradient-ray"
+ title=gradient-ray><strong>5.2.1.</strong></a>
+
<li><image>, <a href="#ltimage"
title="<image>"><strong>4.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.180
retrieving revision 1.181
diff -u -d -r1.180 -r1.181
--- Overview.src.html 19 Sep 2011 21:38:47 -0000 1.180
+++ Overview.src.html 19 Sep 2011 22:25:26 -0000 1.181
@@ -535,7 +535,7 @@
<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 ending-ellipse, and past the ending-ellipse,
+ 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>
<!-- ====================================================================== -->
@@ -555,23 +555,23 @@
)
</pre>
- <p>The first argument to the function specifies the center of the ellipse. 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>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
- ending-ellipse. This can be specified in two ways, with different characteristics:</p>
+ <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>
<dl>
<dt>Implicitly</dt>
<dd>
- <p>The size and shape of the ending-ellipse can be defined
+ <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 ending-ellipse 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>''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>
@@ -582,23 +582,23 @@
<dl>
<dt><dfn id='radial-closest-side'>closest-side</dfn></dt>
<dd>
- <p>If the <i><shape></i> is ''circle'', the ending-shape must be a circle sized so that it exactly meets the closest side of the box.</p>
+ <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 ending-shape must be an ellipse sized so that it exactly meets the closest horizontal and vertical sides 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 ending-shape must be sized based on the farthest side(s).</dd>
+ <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 ending-shape must be a circle sized so that it exactly meets the closest corner of the box.</p>
+ <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 ending-shape 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>
+ <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>
</dd>
<dt><dfn id='radial-farthest-corner'>farthest-corner</dfn></dt>
- <dd>Same as ''closest-corner'', except the ending-shape must be sized based on the farthest corner. If <i><shape></i> is ''ellipse'', the ending-shape must have the same aspect ratio it would have if ''farthest-side'' were specified.</dd>
+ <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>
@@ -610,7 +610,7 @@
<dt>Explicitly</dt>
<dd>
- <p>Alternately, the ending-shape's size and shape can be defined
+ <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
@@ -628,11 +628,11 @@
<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>
<dl>
- <dt>If the ending-shape has zero width (regardless of the height):</dt>
- <dd>Render as if the ending-shape 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 ending-shape has zero height:</dt>
- <dd>Render as if the ending-shape 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>
<p>If this argument is omitted, it defaults to ''ellipse cover''.</p>
@@ -641,19 +641,9 @@
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 an imaginary line extending from the center
- of the gradient toward the right, with the 0% point at the center of the
- gradient, and 100% at the point where the line intersects the ending-ellipse.
- The color of each ellipse is equal to the color of the line where the
- ellipse intersects it. Locations past 100% can be specified, and simply
- indicate a color-stop placed on the line a corresponding distance from the
- center. Negative locations are allowed in a radial gradient and work the
- same as in linear gradients with respect to setting the color of the
- <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
- yellow at 100px wide.</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>
<p class=issue>Brad suggests that we could drop the position/sizing arguments and just use background-position and background-size. This would force all non-background uses of radial gradient to be centered and box-filling. Is this acceptable or not?</p>
Received on Monday, 19 September 2011 22:25:33 UTC