- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 12 Aug 2011 19:25:39 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv16302
Modified Files:
Overview.html Overview.src.html
Log Message:
Editorial rewrite of the radial gradient size/shape keywords section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.142
retrieving revision 1.143
diff -u -d -r1.142 -r1.143
--- Overview.html 11 Aug 2011 22:57:48 -0000 1.142
+++ Overview.html 12 Aug 2011 19:25:36 -0000 1.143
@@ -20,10 +20,10 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 August 2011</h2>
<dl><!--<dt>This version:</dt>
- <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110811/">http://www.w3.org/TR/2011/ED-css3-images-20110811/</a>-->
+ <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110812/">http://www.w3.org/TR/2011/ED-css3-images-20110812/</a>-->
<dt>Latest version:
@@ -786,7 +786,7 @@
<em>implicitly</em> with a size and shape keyword. The <a
href="#ltshape"><i><shape></i></a> is defined as</p>
- <pre><code><dfn id=ltshape><shape></dfn> = [ circle | ellipse ]</code></pre>
+ <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
@@ -794,48 +794,70 @@
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"><i><size></i></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>
+ <pre><code><dfn id=ltsize><size></dfn> = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</code></pre>
- <p>If <a href="#ltshape"><i><shape></i></a> is ‘<code
- class=css>circle</code>’ and <a
- 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 center of the
- gradient was ‘<code class=css>10% 10%</code>’, 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 <a href="#ltshape"><i><shape></i></a> is
- ‘<code class=css>ellipse</code>’ and <a
- 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 as the
- previous example, the gradient-shape would be an ellipse with a 20px
- vertical radius and a 10px horizontal radius. (If necessary, such as if
- the starting-point is outside of the box, extend the sides of the box so
- that there is a line the ellipse can meet.)</p>
+ <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.</p>
- <p>‘<code class=css>farthest-side</code>’ is identical to
- ‘<code class=css>closest-side</code>’, except that the
- gradient-shape is sized to meet the side of the box that is farthest
- from its center (or the farthest vertical and horizontal sides, if the
- shape is ‘<code class=css>ellipse</code>’). ‘<code
- 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"><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
- class=css>farthest-side</code>’ were specified, as appropriate.
- ‘<code class=css>contain</code>’ is a synonym for
- ‘<code class=css>closest-side</code>’, and ‘<code
- class=css>cover</code>’ is a synonym for ‘<code
- class=css>farthest-corner</code>’.</p>
+ <dl>
+ <dt><dfn id=radial-closest-side>closest-side</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 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>
+
+ <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).
+
+ <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>
+
+ <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
+ 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>
+
+ <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>farthest-side</code></a>’ were specified.
+
+ <dt><dfn id=radial-contain>contain</dfn>
+
+ <dd>This value is an alias for ‘<a
+ href="#radial-closest-side"><code
+ class=css>closest-side</code></a>’, and has the same meaning.
+
+ <dt><dfn id=radial-cover>cover</dfn>
+
+ <dd>This value is an alias for ‘<a
+ href="#radial-farthest-corner"><code
+ class=css>farthest-corner</code></a>’, and has the same meaning.
+ </dl>
<dt>Explicitly
@@ -850,12 +872,22 @@
box, while percentages used in the second value are relative to the
height of the box.</p>
- <p>Both of the values must be non-negative. Specifying either as
- ‘<code class=css>0</code>’ is allowed, but produces a
- degenerate shape. The handling of degenerate ending-shapes is specified
- later in this specification.</p>
+ <p>Negative lengths or percentages are a syntax error.</p>
</dl>
+ <p>Some combinations of position, size, and shape will produce a <dfn
+ id=degenerate-shape>degenerate shape</dfn> - a circle or ellipse with a
+ radius of 0. This will occur if the position is on a box edge and the
+ second argument is ‘<code class=css>circle
+ closest-side</code>’, ‘<code class=css>ellipse
+ closest-side</code>’, or ‘<code class=css>ellipse
+ closest-corner</code>’, or if the position is on a box corner and
+ the shape is ‘<a href="#radial-closest-corner"><code
+ class=css>closest-corner</code></a>’, or if the size and shape are
+ given explicitly and either of the radiuses are ‘<code
+ class=css>0</code>’. In these instances, the the gradient represents
+ a solid-color image equal to the color of the last color-stop.
+
<p>If this argument is omitted, it defaults to ‘<code
class=css>ellipse cover</code>’.
@@ -864,16 +896,6 @@
‘<code class=css>radial-gradient(10% 10%, red, blue)</code>’),
it must be interpreted as a position.
- <p>In certain circumstances the given parameters may define a degenerate
- shape - a circle or ellipse with a radius of 0. In these instances the
- gradient image is just a solid color equal to the color of the last
- color-stop in the rule. The following combinations of values will trigger
- this: ‘<code class=css>closest-side</code>’ if the
- starting-point is on a box edge, ‘<code
- class=css>closest-corner</code>’ if the starting-point is on a box
- corner, and ‘<code class=css>ellipse closest-corner</code>’ if
- the starting-point is on a box edge.
-
<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
@@ -930,8 +952,8 @@
</div>
<div class=example>
- <p>Here we illustrate a ‘<code class=property>contain</code>’
- gradient.</p>
+ <p>Here we illustrate a ‘<a href="#radial-contain"><code
+ class=property>contain</code></a>’ gradient.</p>
<pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
radial-gradient(20px 30px, 20px 30px, red, yellow, green);</code></pre>
@@ -1560,13 +1582,15 @@
<dd>
<p>Size the content as if ‘<code class=property>none</code>’
- or ‘<code class=property>contain</code>’ were specified,
- whichever would result in a smaller size.</p>
+ or ‘<a href="#radial-contain"><code
+ class=property>contain</code></a>’ were specified, whichever would
+ result in a smaller size.</p>
<p class=note>Note that both ‘<code
- class=property>none</code>’ and ‘<code
- class=property>contain</code>’ respect the content's intrinsic
- aspect ratio, so the concept of "smaller" is well-defined.</p>
+ class=property>none</code>’ and ‘<a
+ href="#radial-contain"><code class=property>contain</code></a>’
+ respect the content's intrinsic aspect ratio, so the concept of
+ "smaller" is well-defined.</p>
</dl>
<p>If the content does not completely fill the replaced element, the
@@ -1588,7 +1612,8 @@
for ‘<a href="#object-position0"><code
class=property>object-position</code></a>’. The fifth value,
‘<code class=css><span class=css>scale-down</span>, in this case
- looks identical to </code>’<span class=css>contain</span>.</p>
+ looks identical to </code>’<a class=css
+ href="#radial-contain">contain</a>.</p>
</div>
<p class=note>Note: the ‘<a href="#object-fit0"><code
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.149
retrieving revision 1.150
diff -u -d -r1.149 -r1.150
--- Overview.src.html 11 Aug 2011 22:57:48 -0000 1.149
+++ Overview.src.html 12 Aug 2011 19:25:37 -0000 1.150
@@ -525,43 +525,46 @@
<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>
+ <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).</p>
- <p>The <i><size></i> 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>
+ <pre><code><dfn><size></dfn> = closest-side | closest-corner | farthest-side | farthest-corner | contain | cover</code></pre>
- <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 <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
- a 20px vertical radius and a 10px horizontal radius. (If necessary,
- such as if the starting-point is outside of the box, extend the sides
- of the box so that there is a line the ellipse can meet.)</p>
+ <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.</p>
- <p>''farthest-side'' is identical to ''closest-side'', except that
- the gradient-shape is sized to meet the side of the box that is farthest
- 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 <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
- ''cover'' is a synonym for ''farthest-corner''.</p>
+ <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 ''ellipse'', the ending-shape 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>
+
+ <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 ''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>
+ </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>
+
+ <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>
@@ -577,26 +580,18 @@
the box, while percentages used in the second value are relative to
the height of the box.</p>
- <p>Both of the values must be non-negative. Specifying either as
- ''0'' is allowed, but produces a degenerate shape. The handling of
- degenerate ending-shapes is specified later in this specification.</p>
+ <p>Negative lengths or percentages are a syntax error.</p>
</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 position is on a box edge and the second argument is ''circle closest-side'', ''ellipse closest-side'', or ''ellipse closest-corner'', or if the position 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 the gradient represents a solid-color image equal to the color of the last color-stop.</p>
+
<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>In certain circumstances the given parameters may define a degenerate
- shape - a circle or ellipse with a radius of 0. In these instances the
- gradient image is just a solid color equal to the color of the last color-stop
- in the rule. The following combinations of values will trigger this:
- ''closest-side'' if the starting-point is on a box edge, ''closest-corner''
- if the starting-point is on a box corner, and ''ellipse closest-corner''
- if the starting-point is on a box edge.</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.
@@ -705,7 +700,7 @@
<pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
<p><img src="repeating3.png" alt=""></p>
- </div>
+ </div>
<p>If the distance between the first and last color-stops is non-zero, but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, the implementation must <i title="gradient-average-color">find the average color of the gradient</i> and render the gradient as a solid-color image equal to the average color.</p>
Received on Friday, 12 August 2011 19:25:46 UTC