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

csswg/css3-images Overview.html,1.201,1.202 Overview.src.html,1.209,1.210

From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 11 Nov 2011 00:10:19 +0000
To: public-css-commits@w3.org
Message-Id: <E1ROehH-0000bv-7w@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv2333

Modified Files:
	Overview.html Overview.src.html 
Log Message:
Whoops, accidentally accidentally went over a more updated version with that last commit.  Replacing the gradient section with the older version.

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.201
retrieving revision 1.202
diff -u -d -r1.201 -r1.202
--- Overview.html	10 Nov 2011 23:46:55 -0000	1.201
+++ Overview.html	11 Nov 2011 00:10:17 -0000	1.202
@@ -35,12 +35,12 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 November
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 November
     2011</h2>
 
    <dl>
     <dt>This Version:</dt>
-    <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111110/">http://www.w3.org/TR/2011/WD-css3-images-20111110/</a>-->
+    <!--<dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20111111/">http://www.w3.org/TR/2011/WD-css3-images-20111111/</a>-->
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -670,11 +670,10 @@
    id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
 
   <p>where <a href="#ltlinear-gradient"><i>&lt;linear-gradient></i></a>, <a
-   href="#ltradial-gradient"><i>&lt;radial-gradient></i></a>, <a
-   href="#ltrepeating-linear-gradient"><i>&lt;repeating-linear-gradient></i></a>,
-   and <a
-   href="#ltrepeating-radial-gradient"><i>&lt;repeating-radial-gradient></i></a>
-   are defined in their applicable sections below.
+   href="#ltradial-gradient"><i>&lt;radial-gradient></i></a>,
+   <i>&lt;repeating-linear-gradient></i>, and
+   <i>&lt;repeating-radial-gradient></i> are defined in their applicable
+   sections below.
 
   <p>Gradients are a type of image, and can be used anywhere an image can,
    such as in the &lsquo;<code class=property>background-image</code>&rsquo;
@@ -880,14 +879,14 @@
   <pre class=prod>
 <dfn
    id=ltradial-gradient>&lt;radial-gradient></dfn> = radial-gradient(
-	[ [ <a
-   href="#ltshapegt"><var>&lt;shape&gt;</var></a> , ] |
-		[ <a
+  [ <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> ] , ]
-	]?
-	<var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
+   href="#ltextentgt"><var>&lt;extent&gt;</var></a> ] ,
+  ]?
+  <var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
 )</pre>
 
   <p>The arguments are defined as follows:
@@ -898,7 +897,11 @@
    <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
-    an ellipse, respectively.
+    an ellipse, respectively. If <a
+    href="#ltshapegt"><i>&lt;shape&gt;</i></a> is omitted, the <a
+    href="#ending-shape"><i>ending shape</i></a> defaults to a circle if the
+    <a href="#ltextentgt"><i>&lt;extent&gt;</i></a> is a single
+    &lt;length&gt;, and to an ellipse otherwise.
 
    <dt id=radial-position><dfn id=ltpositiongt>&lt;position&gt;</dfn>
 
@@ -932,8 +935,8 @@
 
      <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
-      center. If the shape is an ellipse or is omitted, it exactly meets the
-      closest side in each dimension.
+      center. If the shape is an ellipse, it exactly meets the closest side
+      in each dimension.
 
      <dt><dfn id=radial-farthest-side>&lsquo;<code
       class=css>farthest-side</code>&rsquo;</dfn>
@@ -947,7 +950,7 @@
 
      <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 or is omitted, the <a
+      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.
@@ -957,9 +960,9 @@
 
      <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
-      on the farthest corner. If the shape is an ellipse or is omitted, the
-      <a href="#ending-shape"><i>ending shape</i></a> is given the same
-      aspect ratio it would have if &lsquo;<code
+      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
+      ratio it would have if &lsquo;<code
       class=css>farthest-side</code>&rsquo; were specified.
     </dl>
 
@@ -991,18 +994,25 @@
     </dl>
   </dl>
 
-  <p>The expanded grammar for &lsquo;<code
-   class=css>radial-gradient()</code>&rsquo; is thus:
+  <div class=note>
+   <p>The grammar listed above is kept deliberately simple for readability
+    purposes, with some details instead expressed in the prose. All of the
+    details can be expressed directly in the grammar, however, and such a
+    grammar is presented here for use by implementors and others writing
+    parsers. It is officially non-normative, but should match the same set of
+    strings that the normative grammar does when augmented with the prose.
 
-  <pre>&lt;radial-gradient> = radial-gradient(
-	[ [ [ circle | ellipse ]  , ] |
-		[ [ circle | ellipse ]? [ at &lt;position> || to &lt;extent-keyword> ] , ] |
-		[ circle? &lt;length>, ] |
-		[ ellipse? [&lt;length> | &lt;percentage>]{2} ]
-	]?
-	&lt;color-stop> [ , &lt;color-stop> ]+
+   <pre>
+&lt;radial-gradient> = radial-gradient(
+  [ [ circle | ellipse ]  , |
+    [ circle | ellipse ]? [ at &lt;position> || to &lt;extent-keyword> ] , |
+    circle?               [ at &lt;position> || to &lt;length> ] , |
+    ellipse?              [ at &lt;position> || to [&lt;length> | &lt;percentage>]{2} ] , 
+  ]?
+  &lt;color-stop> [ , &lt;color-stop> ]+
 )
 &lt;extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre>
+  </div>
 
   <h4 class=no-toc id=radial-color-stops><span class=secno>4.2.2. </span>
    Placing Color Stops</h4>
@@ -1122,25 +1132,7 @@
    defines &lsquo;<code class=css>repeating-linear-gradient()</code>&rsquo;
    and &lsquo;<code class=css>repeating-radial-gradient()</code>&rsquo;
    functions. These two functions take the same values and are interpreted
-   the same as their respective non-repeating siblings defined previously:
-
-  <pre class=prod><code><dfn
-   id=ltrepeating-linear-gradient>&lt;repeating-linear-gradient></dfn> = repeating-linear-gradient(
-	[ [ &lt;angle> | [ to <a
-   href="#side-or-corner"><code>&lt;side-or-corner></code></a> ] ] ,]? 
-	&lt;color-stop>[, &lt;color-stop>]+
-)
-
-<dfn
-   id=ltrepeating-radial-gradient>&lt;repeating-radial-gradient></dfn> = repeating-radial-gradient(
-	[&lt;'background-position'&gt;,]? 
-	[[
-		[&lt;shape&gt; || &lt;size&gt;]
-		|
-		[&lt;length> | &lt;percentage>]{2}
-	],]? 
-	&lt;color-stop&gt;[, &lt;color-stop&gt;]+
-)</code></pre>
+   the same as their respective non-repeating siblings defined previously.
 
   <p>When rendered, however, the color-stops are repeated infinitely in both
    directions, with their positions shifted by multiples of the difference
@@ -2479,12 +2471,6 @@
    <li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
     
 
-   <li>&lt;repeating-linear-gradient>, <a href="#ltrepeating-linear-gradient"
-    title="&lt;repeating-linear-gradient>"><strong>4.3.</strong></a>
-
-   <li>&lt;repeating-radial-gradient>, <a href="#ltrepeating-radial-gradient"
-    title="&lt;repeating-radial-gradient>"><strong>4.3.</strong></a>
-
    <li>&lt;resolution>, <a href="#ltresolution"
     title="&lt;resolution>"><strong>2.</strong></a>
 

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.209
retrieving revision 1.210
diff -u -d -r1.209 -r1.210
--- Overview.src.html	10 Nov 2011 23:46:55 -0000	1.209
+++ Overview.src.html	11 Nov 2011 00:10:17 -0000	1.210
@@ -441,7 +441,7 @@
 	<p>All of the following ''linear-gradient()'' examples are presumed to be 
 	backgrounds applied to a box that is 200px wide and 100px tall.</p>
 
-	<div class=example> 
+	<div class=example>	
 		<p>Below are various ways of specifying a basic vertical gradient:</p>
 
 		<pre><code>linear-gradient(yellow, blue);
@@ -453,7 +453,7 @@
 		<p><img src="linear1.png" alt="" ></p>
 	</div>
 
-	<div class=example> 
+	<div class=example>	
 		<p>This demonstrates the use of an angle in the gradient.  Note that, though the angle is not exactly the same as the angle between the corners, the <i>gradient-line</i> is still sized so as to make the gradient yellow exactly at the upper-left corner, and blue exactly at the lower-right corner.</p>
 
 		<pre><code>linear-gradient(135deg, yellow, blue);
@@ -462,7 +462,7 @@
 		<p><img src="linear3.png" alt="" ></p>
 	</div>
 
-	<div class=example> 
+	<div class=example>	
 		<p>This demonstrates a 3-color gradient, and how to specify the location of a stop explicitly:</p>
 
 		<pre><code>linear-gradient(yellow, blue 20%, #0f0);</code></pre>
@@ -507,10 +507,10 @@
 
 	<pre class=prod>
 <dfn>&lt;radial-gradient></dfn> = radial-gradient(
-	[ [ <var>&lt;shape&gt;</var> , ] |
-		[ <var>&lt;shape&gt;</var>? [ at <var>&lt;position&gt;</var> || to <var>&lt;extent&gt;</var> ] , ]
-	]?
-	<var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
+  [ <var>&lt;shape&gt;</var> , |
+    <var>&lt;shape&gt;</var>? [ at <var>&lt;position&gt;</var> || to <var>&lt;extent&gt;</var> ] ,
+  ]?
+  <var>&lt;color-stop&gt;</var> [ , <var>&lt;color-stop&gt;</var> ]+
 )</pre>
 
 	<p>The arguments are defined as follows:
@@ -519,6 +519,9 @@
 		<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.
+		If <i>&lt;shape&gt;</i> is omitted, the <i>ending shape</i> defaults
+		to a circle if the <i>&lt;extent&gt;</i> is a single &lt;length&gt;,
+		and to an ellipse otherwise.
 
 		<dt id='radial-position'><dfn>&lt;position&gt;</dfn></dt>
 		<dd>Determines the center of the gradient. The <i>&lt;position&gt;</i> notation
@@ -543,7 +546,7 @@
 				<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
-				ellipse or is omitted, it exactly meets the closest side in each dimension.</dd>
+				ellipse, it exactly meets the closest side in each dimension.</dd>
 
 				<dt><dfn id='radial-farthest-side'>''farthest-side''</dfn></dt>
 				<dd>Same as ''closest-side'', except the <i>ending shape</i> is sized
@@ -552,12 +555,12 @@
 				<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 or is omitted, 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.
 
 				<dt><dfn id='radial-farthest-corner'>''farthest-corner''</dfn></dt>
 				<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 or is omitted,
+				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
 				have if ''farthest-side'' were specified.
 			</dl>
@@ -584,16 +587,20 @@
 		</dd>
 	</dl>
 
-	<p>The expanded grammar for ''radial-gradient()'' is thus:
-<pre>&lt;radial-gradient> = radial-gradient(
-	[ [ [ circle | ellipse ]  , ] |
-		[ [ circle | ellipse ]? [ at &lt;position> || to &lt;extent-keyword> ] , ] |
-		[ circle? &lt;length>, ] |
-		[ ellipse? [&lt;length> | &lt;percentage>]{2} ]
-	]?
-	&lt;color-stop> [ , &lt;color-stop> ]+
+	<div class='note'>
+		<p>The grammar listed above is kept deliberately simple for readability purposes, with some details instead expressed in the prose.  All of the details can be expressed directly in the grammar, however, and such a grammar is presented here for use by implementors and others writing parsers.  It is officially non-normative, but should match the same set of strings that the normative grammar does when augmented with the prose.
+
+		<pre>
+&lt;radial-gradient> = radial-gradient(
+  [ [ circle | ellipse ]  , |
+    [ circle | ellipse ]? [ at &lt;position> || to &lt;extent-keyword> ] , |
+    circle?               [ at &lt;position> || to &lt;length> ] , |
+    ellipse?              [ at &lt;position> || to [&lt;length> | &lt;percentage>]{2} ] , 
+  ]?
+  &lt;color-stop> [ , &lt;color-stop> ]+
 )
 &lt;extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side</pre>
+	</div>
 
 <h4 class="no-toc" id="radial-color-stops">
 Placing Color Stops</h4>
@@ -628,7 +635,7 @@
 	<p>All of the following examples are applied to a box that is 200px wide 
 	and 100px tall.</p>
 
-	<div class=example> 
+	<div class=example>	
 		<p>These examples demonstrate the basic syntax for radial gradients:</p>
 
 		<pre><code>radial-gradient(yellow, green);
@@ -643,14 +650,14 @@
 		<p><img src="radial3.png" alt="" ></p>
 	</div>
 
-	<div class=example> 
+	<div class=example>	
 		<p>This image shows a gradient originating from somewhere other than the center of the box:</p>
 
 		<pre><code>radial-gradient(bottom left, farthest-side, red, yellow 50px, green);</code></pre>
 		<p><img src="radial4.png" alt="" ></p>
 	</div>
 
-	<div class=example> 
+	<div class=example>	
 		<p>Here we illustrate a 'contain' gradient.</p>
 
 		<pre><code>radial-gradient(20px 30px, contain, red, yellow, green);
@@ -671,22 +678,7 @@
 	this specification defines ''repeating-linear-gradient()'' and 
 	''repeating-radial-gradient()'' functions.  These two functions take the 
 	same values and are interpreted the same as their respective non-repeating 
-	siblings defined previously:</p>
-
-	<pre class=prod><code><dfn>&lt;repeating-linear-gradient></dfn> = repeating-linear-gradient(
-	[ [ &lt;angle> | [ to <code>&lt;side-or-corner></code> ] ] ,]? 
-	&lt;color-stop>[, &lt;color-stop>]+
-)
-
-<dfn>&lt;repeating-radial-gradient></dfn> = repeating-radial-gradient(
-	[&lt;'background-position'&gt;,]? 
-	[[
-		[&lt;shape&gt; || &lt;size&gt;]
-		|
-		[&lt;length> | &lt;percentage>]{2}
-	],]? 
-	&lt;color-stop&gt;[, &lt;color-stop&gt;]+
-)</code></pre>
+	siblings defined previously.</p>
 
 	<p>When rendered, however, the color-stops are repeated infinitely in both 
 	directions, with their positions shifted by multiples of the difference 
Received on Friday, 11 November 2011 00:10:34 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 11 November 2011 00:10:35 GMT