Define the term 'gradient box' and use it where appropriate to indicate the rectangle the gradient is drawn into.

Author: tabatkins

css3-images/Overview.html

@@ -828,8 +828,8 @@ <h2 id=gradients><span class=secno>4. </span> Gradients</h2>
   </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 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
    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 @@ <h4 class=no-toc id=linear-gradient-syntax><span class=secno>4.1.1. </span>
    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 @@ <h4 class=no-toc id=linear-gradient-examples><span class=secno>4.1.2.
   <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 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
     positioning syntax of &lsquo;<code class=css><a
     href="http://www.w3.org/TR/css3-background/#the-background-position">background-position</a></code>&rsquo;
     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 &lsquo;<code class=css>center</code>&rsquo;.
@@ -1054,8 +1056,9 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
      href="#ending-shape"><i>ending shape</i></a>. If omitted it defaults to
      &lsquo;<code class=css>farthest-corner</code>&rsquo;. 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 &lsquo;<code class=css>circle</code>&rsquo; and &lsquo;<code
      class=css>ellipse</code>&rsquo; gradients accept the following keywords
@@ -1066,7 +1069,8 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
       class=css>closest-side</code>&rsquo;</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 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
       class=css>closest-corner</code>&rsquo;</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 &lsquo;<code
@@ -1118,8 +1123,9 @@ <h4 class=no-toc id=radial-gradient-syntax><span class=secno>4.2.1. </span>
 
      <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 @@ <h4 class=no-toc id=degenerate-radials><span class=secno>4.2.3. </span>
 
   <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 &lsquo;<code class=css>closest-side</code>&rsquo; or
-   &lsquo;<code class=css>closest-corner</code>&rsquo; 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 &lsquo;<code
+   class=css>closest-side</code>&rsquo; or &lsquo;<code
+   class=css>closest-corner</code>&rsquo; 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 @@ <h2 class=no-num id=index>Index</h2>
     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>
 

css3-images/Overview.src.html

@@ -468,8 +468,7 @@ <h2 id="gradients">
 	</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 @@ <h4 class='no-toc' id='linear-gradient-syntax'>
 	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 @@ <h3 id='radial-gradients'>
 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,15 +642,15 @@ <h4 class='no-toc' id='radial-gradient-syntax'>
 		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&amp;B doesn't yet have a definition of &lt;position> - it's defined in the ED, and an update to B&amp;B is expected.</span>
 
 		<dt id='radial-size'><dfn>&lt;size></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
+			<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 @@ <h4 class='no-toc' id='radial-gradient-syntax'>
 			<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 @@ <h4 class='no-toc' id='radial-gradient-syntax'>
 
 				<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 @@ <h4 class='no-toc' id='radial-gradient-syntax'>
 				<dt><dfn id='radial-size-ellipse'>[&lt;length> | &lt;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 @@ <h4 class="no-toc" id="degenerate-radials">
 
 	<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>