- 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
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><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
<p>where <a href="#ltlinear-gradient"><i><linear-gradient></i></a>, <a
- href="#ltradial-gradient"><i><radial-gradient></i></a>, <a
- href="#ltrepeating-linear-gradient"><i><repeating-linear-gradient></i></a>,
- and <a
- href="#ltrepeating-radial-gradient"><i><repeating-radial-gradient></i></a>
- are defined in their applicable sections below.
+ href="#ltradial-gradient"><i><radial-gradient></i></a>,
+ <i><repeating-linear-gradient></i>, and
+ <i><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 ‘<code class=property>background-image</code>’
@@ -880,14 +879,14 @@
<pre class=prod>
<dfn
id=ltradial-gradient><radial-gradient></dfn> = radial-gradient(
- [ [ <a
- href="#ltshapegt"><var><shape></var></a> , ] |
- [ <a
+ [ <a
+ href="#ltshapegt"><var><shape></var></a> , |
+ <a
href="#ltshapegt"><var><shape></var></a>? [ at <a
href="#ltpositiongt"><var><position></var></a> || to <a
- href="#ltextentgt"><var><extent></var></a> ] , ]
- ]?
- <var><color-stop></var> [ , <var><color-stop></var> ]+
+ href="#ltextentgt"><var><extent></var></a> ] ,
+ ]?
+ <var><color-stop></var> [ , <var><color-stop></var> ]+
)</pre>
<p>The arguments are defined as follows:
@@ -898,7 +897,11 @@
<dd>Can be either ‘<code class=css>circle</code>’ or
‘<code class=css>ellipse</code>’; 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><shape></i></a> is omitted, the <a
+ href="#ending-shape"><i>ending shape</i></a> defaults to a circle if the
+ <a href="#ltextentgt"><i><extent></i></a> is a single
+ <length>, and to an ellipse otherwise.
<dt id=radial-position><dfn id=ltpositiongt><position></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>‘<code
class=css>farthest-side</code>’</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 ‘<code
class=css>closest-side</code>’ were specified.
@@ -957,9 +960,9 @@
<dd>Same as ‘<code class=css>closest-corner</code>’, 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 ‘<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 ‘<code
class=css>farthest-side</code>’ were specified.
</dl>
@@ -991,18 +994,25 @@
</dl>
</dl>
- <p>The expanded grammar for ‘<code
- class=css>radial-gradient()</code>’ 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><radial-gradient> = radial-gradient(
- [ [ [ circle | ellipse ] , ] |
- [ [ circle | ellipse ]? [ at <position> || to <extent-keyword> ] , ] |
- [ circle? <length>, ] |
- [ ellipse? [<length> | <percentage>]{2} ]
- ]?
- <color-stop> [ , <color-stop> ]+
+ <pre>
+<radial-gradient> = radial-gradient(
+ [ [ circle | ellipse ] , |
+ [ circle | ellipse ]? [ at <position> || to <extent-keyword> ] , |
+ circle? [ at <position> || to <length> ] , |
+ ellipse? [ at <position> || to [<length> | <percentage>]{2} ] ,
+ ]?
+ <color-stop> [ , <color-stop> ]+
)
<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 ‘<code class=css>repeating-linear-gradient()</code>’
and ‘<code class=css>repeating-radial-gradient()</code>’
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><repeating-linear-gradient></dfn> = repeating-linear-gradient(
- [ [ <angle> | [ to <a
- href="#side-or-corner"><code><side-or-corner></code></a> ] ] ,]?
- <color-stop>[, <color-stop>]+
-)
-
-<dfn
- id=ltrepeating-radial-gradient><repeating-radial-gradient></dfn> = repeating-radial-gradient(
- [<'background-position'>,]?
- [[
- [<shape> || <size>]
- |
- [<length> | <percentage>]{2}
- ],]?
- <color-stop>[, <color-stop>]+
-)</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><repeating-linear-gradient>, <a href="#ltrepeating-linear-gradient"
- title="<repeating-linear-gradient>"><strong>4.3.</strong></a>
-
- <li><repeating-radial-gradient>, <a href="#ltrepeating-radial-gradient"
- title="<repeating-radial-gradient>"><strong>4.3.</strong></a>
-
<li><resolution>, <a href="#ltresolution"
title="<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><radial-gradient></dfn> = radial-gradient(
- [ [ <var><shape></var> , ] |
- [ <var><shape></var>? [ at <var><position></var> || to <var><extent></var> ] , ]
- ]?
- <var><color-stop></var> [ , <var><color-stop></var> ]+
+ [ <var><shape></var> , |
+ <var><shape></var>? [ at <var><position></var> || to <var><extent></var> ] ,
+ ]?
+ <var><color-stop></var> [ , <var><color-stop></var> ]+
)</pre>
<p>The arguments are defined as follows:
@@ -519,6 +519,9 @@
<dt id='radial-shape'><dfn><shape></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><shape></i> is omitted, the <i>ending shape</i> defaults
+ to a circle if the <i><extent></i> is a single <length>,
+ and to an ellipse otherwise.
<dt id='radial-position'><dfn><position></dfn></dt>
<dd>Determines the center of the gradient. The <i><position></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><radial-gradient> = radial-gradient(
- [ [ [ circle | ellipse ] , ] |
- [ [ circle | ellipse ]? [ at <position> || to <extent-keyword> ] , ] |
- [ circle? <length>, ] |
- [ ellipse? [<length> | <percentage>]{2} ]
- ]?
- <color-stop> [ , <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>
+<radial-gradient> = radial-gradient(
+ [ [ circle | ellipse ] , |
+ [ circle | ellipse ]? [ at <position> || to <extent-keyword> ] , |
+ circle? [ at <position> || to <length> ] , |
+ ellipse? [ at <position> || to [<length> | <percentage>]{2} ] ,
+ ]?
+ <color-stop> [ , <color-stop> ]+
)
<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><repeating-linear-gradient></dfn> = repeating-linear-gradient(
- [ [ <angle> | [ to <code><side-or-corner></code> ] ] ,]?
- <color-stop>[, <color-stop>]+
-)
-
-<dfn><repeating-radial-gradient></dfn> = repeating-radial-gradient(
- [<'background-position'>,]?
- [[
- [<shape> || <size>]
- |
- [<length> | <percentage>]{2}
- ],]?
- <color-stop>[, <color-stop>]+
-)</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 UTC