- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 09 Aug 2011 01:23:40 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv23036
Modified Files:
Overview.html Overview.src.html
Log Message:
Switched linear gradients to the "to <side-or-corner>" syntax that Brian and Brad like.
Re-added corner gradients, with the magical behavior.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.132
retrieving revision 1.133
diff -u -d -r1.132 -r1.133
--- Overview.html 8 Aug 2011 22:35:47 -0000 1.132
+++ Overview.html 9 Aug 2011 01:23:38 -0000 1.133
@@ -20,10 +20,10 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 August 2011</h2>
<dl><!--<dt>This version:</dt>
- <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110808/">http://www.w3.org/TR/2011/ED-css3-images-20110808/</a>-->
+ <dd><a href="http://www.w3.org/TR/2011/ED-css3-images-20110809/">http://www.w3.org/TR/2011/ED-css3-images-20110809/</a>-->
<dt>Latest version:
@@ -599,14 +599,16 @@
<pre
class=prod><code><dfn id=ltlinear-gradient><linear-gradient></dfn> = linear-gradient(
- [[ <angle> | upward | rightward | leftward | downward ],]?
+ [ [ <angle> | [ to <side-or-corner> ] ] ,]?
<color-stop>[, <color-stop>]+
- );</code></pre>
+)
+
+<side-or-corner> = [left | right] || [top | bottom]</code></pre>
<p>The first argument to the function specifies the <dfn
id=gradient-line>gradient-line</dfn>, which gives the gradient a direction
and determines how color-stops are positioned. It may be omitted; if so,
- it defaults to "downward".
+ it defaults to "to bottom".
<p>The <a href="#gradient-line"><i>gradient-line</i></a> may be specified
in two different ways. The first is by specifying the angle the <a
@@ -623,14 +625,15 @@
starting-point is determined identically, except in the opposite direction
of the angle.
- <p>Alternately, a keyword may be used to indicate the <a
- href="#gradient-line"><i title=gradient-line>gradient-line's</i></a>
- direction. The "upward" keyword places the starting-point of the
- gradient-line in the center of the bottom edge of the box and the
- ending-point of the <a href="#gradient-line"><i>gradient-line</i></a> in
- the center of the top edge of the box, similar to how a value of "0deg"
- works. The "rightward", "downward", and "leftward" keywords are defined
- the same, <i>mutatis mutandis</i>.
+ <p>Alternately, the direction may be specified with a keyword. 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.
<div class=example>
<div style="overflow: hidden"> <img alt="[An image showing a box with a
@@ -678,10 +681,10 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(downward, yellow, blue);
+linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(upward, blue, yellow);
-linear-gradient(downward, yellow 0%, blue 100%);</code></pre>
+linear-gradient(to top, blue, yellow);
+linear-gradient(to bottom, yellow 0%, blue 100%);</code></pre>
<p><img alt="" src=linear1.png></p>
</div>
@@ -707,6 +710,26 @@
<p><img alt="" src=linear4.png></p>
</div>
+
+ <div class=example>
+ <p>This demonstrates* a corner-to-corner gradient specified with keywords.
+ Note how the gradient is red and blue exactly in the bottom-left and
+ top-right corners, respectively, exactly like the second example.
+ Additionally, the angle of the gradient is automatically computed so that
+ the color at 50% (in this case, white) stretches across the top-left and
+ bottom-right corners.</p>
+
+ <pre><code>linear-gradient(to top right, red, white, blue)</code></pre>
+
+ <p><svg height=100 width=200> <defs> <lineargradient
+ gradientunits=objectBoundingBox id=corner-gradient x1=0 x2=1 y1=1 y2=0>
+ <stop offset="0%" stop-color=red></stop> <stop offset="50%"
+ stop-color=white></stop> <stop offset="100%" stop-color=blue></stop>
+ </lineargradient> </defs> <rect fill="url(#corner-gradient)"
+ height="100%" width="100%" x=0 y=0> </rect></svg></p>
+
+ <p><small>* SVG-in-HTML support required to view the image.</small></p>
+ </div>
<!-- ====================================================================== -->
<h3 id=radial-gradients><span class=secno>5.2. </span> Radial Gradients</h3>
@@ -925,9 +948,12 @@
<pre
class=prod><code><dfn id=ltrepeating-linear-gradient><repeating-linear-gradient></dfn> = repeating-linear-gradient(
- [[ <angle> | upward | rightward | downward | leftward ],]?
- <color-stop>[, <color-stop>]+
+ [ [ <angle> | [ to <side-or-corner> ] ] ,]?
+ <color-stop>[, <color-stop>]+
)
+
+<side-or-corner> = [left | right] || [top | bottom]
+
<dfn id=ltrepeating-radial-gradient><repeating-radial-gradient></dfn> = repeating-radial-gradient(
[<bg-position>,]?
[[
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.139
retrieving revision 1.140
diff -u -d -r1.139 -r1.140
--- Overview.src.html 8 Aug 2011 22:35:47 -0000 1.139
+++ Overview.src.html 9 Aug 2011 01:23:38 -0000 1.140
@@ -369,13 +369,15 @@
linear-gradient() syntax</h4>
<pre class=prod><code><dfn><linear-gradient></dfn> = linear-gradient(
- [[ <angle> | upward | rightward | leftward | downward ],]?
+ [ [ <angle> | [ to <side-or-corner> ] ] ,]?
<color-stop>[, <color-stop>]+
- );</code></pre>
+)
+
+<side-or-corner> = [left | right] || [top | bottom]</code></pre>
<p>The first argument to the function specifies the <dfn>gradient-line</dfn>,
which gives the gradient a direction and determines how color-stops are
- positioned. It may be omitted; if so, it defaults to "downward".</p>
+ positioned. It may be omitted; if so, it defaults to "to bottom".</p>
<p>The <i>gradient-line</i> may be specified in two different ways. The
first is by specifying the angle the <i>gradient-line</i> should assume;
@@ -389,7 +391,7 @@
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
- <p>Alternately, a keyword may be used to indicate the <i title="gradient-line">gradient-line's</i> direction. The "upward" keyword places the starting-point of the gradient-line in the center of the bottom edge of the box and the ending-point of the <i>gradient-line</i> in the center of the top edge of the box, similar to how a value of "0deg" works. The "rightward", "downward", and "leftward" keywords are defined the same, <i>mutatis mutandis</i>.</p>
+ <p>Alternately, the direction may be specified with a keyword. 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>
<div class=example>
<div style="overflow: hidden">
@@ -427,10 +429,10 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(downward, yellow, blue);
+linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(upward, blue, yellow);
-linear-gradient(downward, yellow 0%, blue 100%);</code></pre>
+linear-gradient(to top, blue, yellow);
+linear-gradient(to bottom, yellow 0%, blue 100%);</code></pre>
<p><img src="linear1.png" alt="" ></p>
</div>
@@ -452,6 +454,25 @@
<p><img src="linear4.png" alt="" ></p>
</div>
+ <div class=example>
+ <p>This demonstrates* a corner-to-corner gradient specified with keywords. Note how the gradient is red and blue exactly in the bottom-left and top-right corners, respectively, exactly like the second example. Additionally, the angle of the gradient is automatically computed so that the color at 50% (in this case, white) stretches across the top-left and bottom-right corners.</p>
+
+ <pre><code>linear-gradient(to top right, red, white, blue)</code></pre>
+
+ <p><svg width='200' height='100'>
+ <defs>
+ <linearGradient x1='0' y1='1' x2='1' y2='0' gradientUnits='objectBoundingBox' id='corner-gradient'>
+ <stop offset='0%' stop-color='red'></stop>
+ <stop offset='50%' stop-color='white'></stop>
+ <stop offset='100%' stop-color='blue'></stop>
+ </linearGradient>
+ </defs>
+ <rect x='0' y='0' width='100%' height='100%' fill='url(#corner-gradient)' />
+ </svg></p>
+
+ <p><small>* SVG-in-HTML support required to view the image.</small></p>
+ </div>
+
<!-- ====================================================================== -->
<h3 id='radial-gradients'>
@@ -640,9 +661,12 @@
siblings defined previously:</p>
<pre class=prod><code><dfn><repeating-linear-gradient></dfn> = repeating-linear-gradient(
- [[ <angle> | upward | rightward | downward | leftward ],]?
- <color-stop>[, <color-stop>]+
+ [ [ <angle> | [ to <side-or-corner> ] ] ,]?
+ <color-stop>[, <color-stop>]+
)
+
+<side-or-corner> = [left | right] || [top | bottom]
+
<dfn><repeating-radial-gradient></dfn> = repeating-radial-gradient(
[<bg-position>,]?
[[
Received on Tuesday, 9 August 2011 01:23:41 UTC