- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 01 Dec 2011 20:44:55 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv16770
Modified Files:
Overview.html Overview.src.html
Log Message:
Define the term 'gradient box' and use it where appropriate to indicate the rectangle the gradient is drawn into.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.228
retrieving revision 1.229
diff -u -d -r1.228 -r1.229
--- Overview.html 1 Dec 2011 18:44:56 -0000 1.228
+++ Overview.html 1 Dec 2011 20:44:53 -0000 1.229
@@ -828,8 +828,8 @@
</div>
<p>A gradient is drawn into a box with the dimensions of the <a
- href="#concrete-object-size"><i>concrete object size</i></a>. Elsewhere in
- this section this rectangle is simply called the "box".
+ href="#concrete-object-size"><i>concrete object size</i></a>, referred to
+ as the <dfn id=gradient-box>gradient box</dfn>.
<p>A gradient has no <a href="#intrinsic-dimensions"><i>intrinsic
dimensions</i></a>. This means that, for example, if you use a gradient in
@@ -878,13 +878,13 @@
right, and positive angles go clockwise. The starting-point and
ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> are
determined by extending a line in both directions 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
+ <a href="#gradient-box"><i>gradient box</i></a> at the angle specified. In
+ the direction of the angle, the ending-point is the point on the <a
href="#gradient-line"><i>gradient-line</i></a> where a line drawn
perpendicular to the <a 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.
+ would intersect the corner of the <a href="#gradient-box"><i>gradient
+ box</i></a> in that direction. The starting-point is determined
+ identically, except in the opposite direction of the angle.
<p>Alternately, the direction may be specified with keywords that denote
the direction. If the argument is "to top", "to right", "to bottom", or
@@ -893,7 +893,8 @@
angle towards, the gradient must be rendered identically to an angle-based
gradient with an angle chosen such that the endpoint of the gradient is in
the same quadrant as the indicated corner, and a line drawn perpendicular
- to the gradient-line through the center of the box intersects the two
+ to the gradient-line through the center of the <a
+ href="#gradient-box"><i>gradient box</i></a> intersects the two
neighboring corners.
<p class=note>It is expected that the next level of this module will
@@ -993,9 +994,9 @@
<h3 id=radial-gradients><span class=secno>4.2. </span> Radial Gradients</h3>
<p>In a radial gradient, rather than colors smoothly fading from one side
- 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.
+ of the <a href="#gradient-box"><i>gradient box</i></a> 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>A radial gradient is specified by indicating the center of the gradient
(where the 0% ellipse will be) and the size and shape of the <dfn
@@ -1039,7 +1040,8 @@
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"
+ and the <a href="#gradient-box"><i>gradient box</i></a> as the
+ positioning area. <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> <a href="#CSS3BG"
rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> If this argument is
omitted, it defaults to ‘<code class=css>center</code>’.
@@ -1054,8 +1056,9 @@
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.
+ consider the <a href="#gradient-box"><i>gradient box</i></a> edges as
+ extending infinitely in both directions, rather than being finite line
+ segments.
<p>Both ‘<code class=css>circle</code>’ and ‘<code
class=css>ellipse</code>’ gradients accept the following keywords
@@ -1066,7 +1069,8 @@
class=css>closest-side</code>’</dfn>
<dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
- that it exactly meets the side of the box closest to the gradient's
+ that it exactly meets the side of the <a
+ href="#gradient-box"><i>gradient box</i></a> closest to the gradient's
center. If the shape is an ellipse, it exactly meets the closest side
in each dimension.
@@ -1081,7 +1085,8 @@
class=css>closest-corner</code>’</dfn>
<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
+ that it passes through the corner of the <a
+ href="#gradient-box"><i>gradient box</i></a> 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
@@ -1118,8 +1123,9 @@
<dd>Gives the size of the ellipse explicitly. The first value represents
the horizontal radius, the second the vertical radius. Percentages
- values are relative to the corresponding dimension of the box. Negative
- values are invalid.
+ values are relative to the corresponding dimension of the <a
+ href="#gradient-box"><i>gradient box</i></a>. Negative values are
+ invalid.
</dl>
</dl>
@@ -1173,10 +1179,11 @@
<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 ‘<code class=css>closest-side</code>’ or
- ‘<code class=css>closest-corner</code>’ is specified or if the
- size and shape are given explicitly and either of the radiuses is zero. In
- these degenerate cases, the gradient must be be rendered as follows:
+ on a <a href="#gradient-box"><i>gradient box</i></a> edge and ‘<code
+ class=css>closest-side</code>’ or ‘<code
+ class=css>closest-corner</code>’ is specified or if the size and
+ shape are given explicitly and either of the radiuses is zero. In these
+ degenerate cases, the gradient must be be rendered as follows:
<dl>
<dt>If the <a href="#ending-shape"><i>ending shape</i></a> has zero width
@@ -2624,6 +2631,9 @@
href="#find-the-average-color-of-a-gradient"
title=gradient-average-color><strong>4.3.</strong></a>
+ <li>gradient box, <a href="#gradient-box"
+ title="gradient box"><strong>4.</strong></a>
+
<li>gradient-line, <a href="#gradient-line"
title=gradient-line><strong>4.1.1.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.236
retrieving revision 1.237
diff -u -d -r1.236 -r1.237
--- Overview.src.html 1 Dec 2011 18:44:56 -0000 1.236
+++ Overview.src.html 1 Dec 2011 20:44:53 -0000 1.237
@@ -468,8 +468,7 @@
</div>
<p>A gradient is drawn into a box with the dimensions of the <i>concrete
- object size</i>. Elsewhere in this section this rectangle is simply
- called the "box".
+ object size</i>, referred to as the <dfn>gradient box</dfn>.</p>
<p>A gradient has no <i>intrinsic dimensions</i>. This means that, for
example, if you use a gradient in the 'background-image' property (with
@@ -513,13 +512,13 @@
the right, and positive angles go clockwise.
The starting-point and ending-point of the <i>gradient-line</i> are
determined by extending a line in both directions from the center of the
- box at the angle specified. In the direction of the angle, the ending-point
+ <i>gradient box</i> at the angle specified. In the direction of the angle, the ending-point
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
+ to the <i>gradient-line</i> would intersect the corner of the <i>gradient box</i> in that
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
- <p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient-line through the center of the box intersects the two neighboring corners.</p>
+ <p>Alternately, the direction may be specified with keywords that denote the direction. If the argument is "to top", "to right", "to bottom", or "to left", the gradient must be rendered identically to "0deg", "90deg", "180deg", or "270deg", respectively. If the argument specifies a corner to angle towards, the gradient must be rendered identically to an angle-based gradient with an angle chosen such that the endpoint of the gradient is in the same quadrant as the indicated corner, and a line drawn perpendicular to the gradient-line through the center of the <i>gradient box</i> intersects the two neighboring corners.</p>
<p class='note'>It is expected that the next level of this module will provide the ability to define the gradient's direction relative to the current text direction and writing-mode.</p>
@@ -603,7 +602,7 @@
Radial Gradients</h3>
<p>In a radial gradient, rather than colors smoothly fading from one side
- of the box to the other as with linear gradients, they instead emerge from
+ of the <i>gradient box</i> 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 indicating the center
@@ -643,7 +642,7 @@
is defined by 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]]
+ the <i>gradient box</i> as the positioning area. [[!CSS21]] [[!CSS3BG]]
If this argument is omitted, it defaults to ''center''. <span class='note'>Note that the CR of CSS3 B&B doesn't yet have a definition of <position> - it's defined in the ED, and an update to B&B is expected.</span>
<dt id='radial-size'><dfn><size></dfn>
@@ -651,7 +650,7 @@
<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
+ <i>gradient box</i> edges as extending infinitely in both directions, rather than
being finite line segments.
<p>Both ''circle'' and ''ellipse'' gradients accept the following keywords
@@ -660,7 +659,7 @@
<dl>
<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
+ side of the <i>gradient box</i> closest to the gradient's center. If the shape is an
ellipse, it exactly meets the closest side in each dimension.</dd>
<dt><dfn id='radial-farthest-side'>''farthest-side''</dfn></dt>
@@ -669,7 +668,7 @@
<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
+ corner of the <i>gradient box</i> 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.
@@ -696,7 +695,7 @@
<dt><dfn id='radial-size-ellipse'>[<length> | <percentage>]{2}</dfn></dt>
<dd>Gives the size of the ellipse explicitly. The first value represents
the horizontal radius, the second the vertical radius. Percentages
- values are relative to the corresponding dimension of the box.
+ values are relative to the corresponding dimension of the <i>gradient box</i>.
Negative values are invalid.
</dl>
</dd>
@@ -728,7 +727,7 @@
<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
+ center is on a <i>gradient box</i> 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 degenerate cases, the gradient must be
be rendered as follows:</p>
Received on Thursday, 1 December 2011 20:44:58 UTC