W3C home > Mailing lists > Public > public-css-commits@w3.org > November 2011

csswg/css3-images Overview.html,1.183,1.184 Overview.src.html,1.190,1.191

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 07 Nov 2011 23:53:40 +0000
To: public-css-commits@w3.org
Message-Id: <E1RNZ0W-0007lR-30@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv29831

Modified Files:
	Overview.html Overview.src.html 
Log Message:
More cross-linking. Switch ending-shape to ending shape, since it's a term, not a CSS identifier.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.183
retrieving revision 1.184
diff -u -d -r1.183 -r1.184
--- Overview.html	7 Nov 2011 23:43:21 -0000	1.183
+++ Overview.html	7 Nov 2011 23:53:37 -0000	1.184
@@ -845,11 +845,11 @@
 
   <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 id=ending-shape>ending-shape</dfn> (the 100% ellipse).
+   shape of the <dfn id=ending-shape>ending shape</dfn> (the 100% ellipse).
    Color stops are given as a list, just as for &lsquo;<code
    class=css>linear-gradient()</code>&rsquo;. Starting from the <i>center</i>
    and progressing towards (and potentially beyond) the <a
-   href="#ending-shape"><i>ending-shape</i></a> concentric ellipses are drawn
+   href="#ending-shape"><i>ending shape</i></a> concentric ellipses are drawn
    and colored according to the specified color stops.</p>
   <!-- ====================================================================== -->
 
@@ -861,27 +861,31 @@
   <pre class=prod>
 <dfn
    id=ltradial-gradient>&lt;radial-gradient></dfn> = radial-gradient(
-  [ [ &lt;shape&gt; , ] |
-    [ &lt;shape&gt;? [ at &lt;position&gt; || to &lt;extent&gt; ] , ]
+  [ [ <a
+   href="#ltshapegt"><var>&lt;shape&gt;</var></a> , ] |
+    [ <a
+   href="#ltshapegt"><var>&lt;shape&gt;</var></a>? [ at <a
+   href="#ltpositiongt"><var>&lt;position&gt;</var></a> || to <a
+   href="#ltextentgt"><var>&lt;extent&gt;</var></a> ] , ]
   ]?
-  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+  <var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
 )</pre>
 
   <p>The arguments are defined as follows:
 
   <dl>
-   <dt>&lt;shape&gt;
+   <dt id=radial-shape><dfn id=ltshapegt>&lt;shape&gt;</dfn>
 
    <dd>Can be either &lsquo;<code class=css>circle</code>&rsquo; or
     &lsquo;<code class=css>ellipse</code>&rsquo;; determines whether the
-    gradient's <a href="#ending-shape"><i>ending-shape</i></a> is a circle or
+    gradient's <a href="#ending-shape"><i>ending shape</i></a> is a circle or
     an ellipse, respectively. If the &lt;shape&gt; is omitted it defaults to
     &lsquo;<code class=css>ellipse</code>&rsquo;.
 
-   <dt>&lt;position&gt;
+   <dt id=radial-position><dfn id=ltpositiongt>&lt;position&gt;</dfn>
 
-   <dd>Determines the center of the gradient. The &lt;position&gt; is defined
-    as the positioning syntax of &lsquo;<code class=css><a
+   <dd>Determines the center of the gradient. The &lt;position&gt; notation
+    is defined as the 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"
@@ -889,19 +893,21 @@
     rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> If this argument is
     omitted, it defaults to &lsquo;<code class=css>center</code>&rsquo;.
 
-   <dt>&lt;extent&gt;
+   <dt id=radial-extent><dfn id=ltextentgt>&lt;extent&gt;</dfn>
 
    <dd>
     <p>Determines the size of the gradient's <a
-     href="#ending-shape"><i>ending-shape</i></a>. If omitted it defaults to
-     &lsquo;<code class=css>cover</code>&rsquo;. It can be given explicitly
-     or by keyword. Possible keywords are:
+     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. Possible values are:
 
     <dl>
      <dt><dfn id=radial-closest-side>&lsquo;<code
       class=css>closest-side</code>&rsquo;</dfn>
 
-     <dd>The <a href="#ending-shape"><i>ending-shape</i></a> is sized so that
+     <dd>The <a href="#ending-shape"><i>ending shape</i></a> is sized so that
       that it is tangent to the side of the box closest to the gradient's
       center. If the shape is an ellipse, it is tangent to the closest side
       in both dimensions.
@@ -910,25 +916,26 @@
       class=css>farthest-side</code>&rsquo;</dfn>
 
      <dd>Same as &lsquo;<code class=css>closest-side</code>&rsquo;, except
-      the <a href="#ending-shape"><i>ending-shape</i></a> is sized based on
+      the <a href="#ending-shape"><i>ending shape</i></a> is sized based on
       the farthest side(s).
 
      <dt><dfn id=radial-closest-corner>&lsquo;<code
       class=css>closest-corner</code>&rsquo;</dfn>
 
-     <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
-      ellipse, the <a href="#ending-shape"><i>ending-shape</i></a> is given
-      the same aspect-ratio it would have if &lsquo;<code
+     <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
+      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
       class=css>closest-side</code>&rsquo; were specified.
 
      <dt><dfn id=radial-farthest-corner>&lsquo;<code
       class=css>farthest-corner</code>&rsquo;</dfn>
 
      <dd>Same as &lsquo;<code class=css>closest-corner</code>&rsquo;, except
-      the <a href="#ending-shape"><i>ending-shape</i></a> is be sized based
+      the <a href="#ending-shape"><i>ending shape</i></a> is be sized based
       on the farthest corner. If the shape is an ellipse, the <a
-      href="#ending-shape"><i>ending-shape</i></a> is given the same aspect
+      href="#ending-shape"><i>ending shape</i></a> is given the same aspect
       ratio it would have if &lsquo;<code
       class=css>farthest-side</code>&rsquo; were specified.
 
@@ -952,7 +959,7 @@
      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
+     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
@@ -980,10 +987,10 @@
      degenerate cases, the gradient must be be rendered as follows:</p>
 
     <dl>
-     <dt>If the <a href="#ending-shape"><i>ending-shape</i></a> has zero
+     <dt>If the <a href="#ending-shape"><i>ending shape</i></a> has zero
       width (regardless of the height):
 
-     <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+     <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
@@ -991,10 +998,10 @@
       also means that all color-stop positions specified with a percentage
       resolve to &lsquo;<code class=css>0px</code>&rsquo;.</span>
 
-     <dt>Otherwise, if the <a href="#ending-shape"><i>ending-shape</i></a>
+     <dt>Otherwise, if the <a href="#ending-shape"><i>ending shape</i></a>
       has zero height:
 
-     <dd>Render as if the <a href="#ending-shape"><i>ending-shape</i></a> was
+     <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
@@ -2231,8 +2238,11 @@
      <li>&lt;element-reference>, <a href="#ltelement-reference"
       title="&lt;element-reference>"><strong>4.3.</strong></a>
 
-     <li>ending-shape, <a href="#ending-shape"
-      title=ending-shape><strong>5.2.</strong></a>
+     <li>ending shape, <a href="#ending-shape"
+      title="ending shape"><strong>5.2.</strong></a>
+
+     <li>&lt;extent&gt;, <a href="#ltextentgt"
+      title="&lt;extent&gt;"><strong>5.2.1.</strong></a>
 
      <li>&lsquo;<code class=css>farthest-corner</code>&rsquo;, <a
       href="#radial-farthest-corner"
@@ -2300,7 +2310,9 @@
       title=paint-source><strong>4.3.</strong></a>
 
      <li><a href="#ltposition"><code>&lt;position></code></a>, <a
-      href="#ltposition" title="&lt;position>"><strong>6.5.</strong></a>
+      href="#ltposition" title="&lt;position>"><strong>6.5.</strong></a>, <a
+      href="#ltpositiongt"
+      title="&lt;position&gt;"><strong>5.2.1.</strong></a>
 
      <li>&lt;radial-gradient>, <a href="#ltradial-gradient"
       title="&lt;radial-gradient>"><strong>5.2.1.</strong></a>
@@ -2316,6 +2328,9 @@
      <li>&lt;resolution>, <a href="#ltresolution"
       title="&lt;resolution>"><strong>3.</strong></a>
 
+     <li>&lt;shape&gt;, <a href="#ltshapegt"
+      title="&lt;shape&gt;"><strong>5.2.1.</strong></a>
+
      <li>&lt;side-or-corner>, <a href="#side-or-corner"
       title="&lt;side-or-corner>"><strong>5.1.1.</strong></a>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.190
retrieving revision 1.191
diff -u -d -r1.190 -r1.191
--- Overview.src.html	7 Nov 2011 23:43:21 -0000	1.190
+++ Overview.src.html	7 Nov 2011 23:53:38 -0000	1.191
@@ -534,10 +534,10 @@
 
 	<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
+	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
+	beyond) the <i>ending shape</i> concentric ellipses are drawn and colored
 	according to the specified color stops.</p>
 
 <!-- ====================================================================== -->
@@ -549,49 +549,51 @@
 
 	<pre class=prod>
 <dfn>&lt;radial-gradient></dfn> = radial-gradient(
-  [ [ &lt;shape&gt; , ] |
-    [ &lt;shape&gt;? [ at &lt;position&gt; || to &lt;extent&gt; ] , ]
+  [ [ <var>&lt;shape&gt;</var> , ] |
+    [ <var>&lt;shape&gt;</var>? [ at <var>&lt;position&gt;</var> || to <var>&lt;extent&gt;</var> ] , ]
   ]?
-  &lt;color-stop&gt; [ , &lt;color-stop&gt; ]+
+  <var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
 )</pre>
 
 	<p>The arguments are defined as follows:
 	<dl>
-		<dt>&lt;shape&gt;</dt>
+		<dt id=radial-shape><dfn>&lt;shape&gt;</dfn></dt>
 		<dd>Can be either ''circle'' or ''ellipse''; determines whether the
-			gradient's <i>ending-shape</i> is a circle or an ellipse, respectively.
+			gradient's <i>ending shape</i> is a circle or an ellipse, respectively.
 			If the &lt;shape&gt; is omitted it defaults to ''ellipse''.
 
-		<dt>&lt;position&gt;</dt>
-		<dd>Determines the center of the gradient. The &lt;position&gt; is defined
-			as the positioning syntax of
+		<dt id=radial-position><dfn>&lt;position&gt;</dfn></dt>
+		<dd>Determines the center of the gradient. The &lt;position&gt; notation
+			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>&lt;extent&gt;
-		<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:
+		<dt id=radial-extent><dfn>&lt;extent&gt;</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
+			being finite line segments. Possible values are:
 			<dl>
 				<dt><dfn id='radial-closest-side'>''closest-side''</dfn></dt>
-				<dd>The <i>ending-shape</i> is sized so that that it is tangent to the
+				<dd>The <i>ending shape</i> is sized so that that it is tangent to the
 					side of the box closest to the gradient's center. If the shape is an
 					ellipse, it is tangent to 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
+				<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
 					corner 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
+					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> is be
+				<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
+					the <i>ending shape</i> is given the same aspect ratio it would
 					have if ''farthest-side'' were specified.
 				<dt><dfn id='radial-size'>[&lt;length&gt; | &lt;percentage&gt;]{1,2}</dfn></dt>
 				<dd>Gives the size of the shape explicitly. The first value represents
@@ -606,7 +608,7 @@
 <h4 class="no-toc" id="radial-color-stops">
 Placing Color Stops</h4>
 
-	<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>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>
 
@@ -621,11 +623,11 @@
 	be rendered as follows:</p>
 
 	<dl>
-		<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>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 <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>
+		<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>
 
 <!-- ====================================================================== -->
Received on Monday, 7 November 2011 23:53:41 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 7 November 2011 23:53:41 GMT