- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 09 Jun 2011 23:17:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv10493
Modified Files:
Overview.html Overview.src.html
Log Message:
Switched the direction that gradient keywords refer to.
Moved the "used value conversion" of gradients into the interpolation section, as that's the only place they matter.
Fixed the bug that interpolating from "left" to "top" would go the long way around, as it tried to go from 270deg to 0deg (it now goes to 360deg instead).
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.107
retrieving revision 1.108
diff -u -d -r1.107 -r1.108
--- Overview.html 26 May 2011 21:33:57 -0000 1.107
+++ Overview.html 9 Jun 2011 23:17:10 -0000 1.108
@@ -20,7 +20,7 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 June 2011</h2>
<dl>
<dt>Latest Version:
@@ -746,7 +746,7 @@
<pre
class=prod><code><dfn id=ltlinear-gradient><linear-gradient></dfn> = linear-gradient(
[[
- [ [top | bottom] || [left | right] ]
+ [ [ top | bottom ] || [ left | right ] ]
|
<angle>
],]?
@@ -756,15 +756,15 @@
<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 ‘<code class=css>top</code>’.
+ it defaults to ‘<code class=css>bottom</code>’.
<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
href="#gradient-line"><i>gradient-line</i></a> should assume; for the
- purposes of this property, 0deg points upwards, 90deg points toward the
+ purposes of this argument, 0deg points upwards, 90deg points toward the
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 direction from the center of the
+ 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
href="#gradient-line"><i>gradient-line</i></a> where a line drawn
@@ -773,18 +773,35 @@
starting-point is determined identically, except in the opposite direction
of the angle.
- <p>The second way is to simply provide a side or corner of the box that the
- gradient should start at; the gradient will then automatically angle
- itself to extend from the specified side or corner to the opposite side or
- corner in a straight line. To be precise, the gradient is converted to the
- angle form described in the previous paragraph at used-value time. If a
- ‘<code class=css>top</code>’, ‘<code
- class=css>right</code>’, ‘<code
- class=css>bottom</code>’, or ‘<code
- class=css>left</code>’ is given, the used value of the gradient is
- 180deg, 270deg, 0deg, or 90deg, respectively. If a corner is given, the
- used value of the gradient is the angle necessary to place the
- starting-point of the gradient in that corner of the box.
+ <p>The second way is to simply provide one or two keywords representing the
+ side or corner of the box that the <a
+ href="#gradient-line"><i>gradient-line</i></a> should point towards.
+ Similar to the previous case, 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. If a
+ single keyword is specified, the line assumes the necessary angle to place
+ the ending-point of the <a href="#gradient-line"><i>gradient-line</i></a>
+ in the center of the side specified by the keyword; if two keywords are
+ specified, the line assumes the necessary angle to place the ending-point
+ of the <a href="#gradient-line"><i>gradient-line</i></a> in the specified
+ corner of the box. The starting-point of the gradient-line is then where
+ the line intersects the opposite side or corner of the box.
+
+ <p class=note>This means that the keyword ‘<code
+ class=property>bottom</code>’ (the default) makes the gradient point
+ towards the bottom, equivalent to specifying ‘<code
+ class=css>180deg</code>’. The keywords ‘<code class=css>top
+ left</code>’ make the gradient point towards the top-left corner of
+ the box, which is equivalent to an angle somewhere between 0deg and 90deg
+ (exclusive).
+
+ <p class=note>The behavior of keywords is now exactly opposite what it has
+ been for a long time. Previously, specifying ‘<code
+ class=property>top</code>’ made it start at the top and point down,
+ but feedback suggests that this was confusingly different from how
+ <angle>s worked: giving an <angle> makes the gradient point towards
+ the specified direction, while giving keywords made the gradient point
+ <em>away</em> from the specified side/corner.
<div class=example>
<div style="overflow: hidden"> <img alt="[An image showing a box with a
@@ -832,18 +849,18 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(top, yellow, blue);
+linear-gradient(bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(bottom, blue, yellow);
-linear-gradient(top, yellow 0%, blue 100%);</code></pre>
+linear-gradient(top, blue, yellow);
+linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
<p><img alt="" src=linear1.png></p>
</div>
<div class=example>
- <p>This gradient goes from the upper-left to the lower-right corner.</p>
+ <p>This gradient goes from the top-left to the bottom-right corner.</p>
- <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
<p><img alt="" src=linear2.png></p>
</div>
@@ -970,9 +987,6 @@
class=css>cover</code>’ is a synonym for ‘<code
class=css>farthest-corner</code>’.</p>
- <p>If this implicit form is used, then it is converted to an equivalent
- explicit form (described below) at used-value time.</p>
-
<dt>Explicitly
<dd>
@@ -986,8 +1000,10 @@
box, while percentages used in the second value are relative to the
height of the box.</p>
- <p>Both of the values must be positive - specifying either as zero or
- negative is a syntax error.</p>
+ <p>Both of the values must be non-negative. Specifying either as
+ ‘<code class=css>0</code>’ is allowed, but produces a
+ degenerate shape. The handling of degenerate ending-shapes is specified
+ later in this specification.</p>
</dl>
<p>If this argument is omitted, it defaults to ‘<code
@@ -1528,6 +1544,13 @@
<dt>contain
<dd>
+ <p>Determine the used ‘height’ and ‘width’ of the element as
+ usual, except if both ‘height’ and ‘width’ are ‘auto’, and
+ the used value of at least one of ‘max-width’ and ‘max-height’
+ is not ‘none’, then compute the element's used width and used height
+ as though the intrinsic dimensions of the contents were infinitely large
+ numbers whose ratio is the actual intrinsic ratio of the contents.</p>
+
<p>Set the content's size to the largest width and height that has the
same aspect ratio as the content's intrinsic aspect ratio, and
additionally has neither width nor height larger than the replaced
@@ -1536,6 +1559,13 @@
<dt>cover
<dd>
+ <p>Determine the used ‘height’ and ‘width’ of the element as
+ usual, except if both ‘height’ and ‘width’ are ‘auto’, and
+ the used value of at least one of ‘min-width’ and ‘min-height’
+ is not ‘none’, then compute the element's used width and used height
+ as though the intrinsic dimensions of the contents were infinitely small
+ numbers whose ratio is the actual intrinsic ratio of the contents.</p>
+
<p>Set the content's size to the smallest width and height that has the
same aspect ratio as the content's intrinsic aspect ratio, and
additionally has neither width nor height smaller than the replaced
@@ -2313,8 +2343,62 @@
generic image.
<ol>
- <li>Convert both the start and end gradients to their used value.
+ <li>Convert both the start and end gradients to their explicit forms:
+ </ol>
+ <dl>
+ <dt>For linear gradients:
+
+ <dd>
+ <ul>
+ <li>If the direction is specified as an <angle>, it is already in its
+ explicit form.
+
+ <li>Otherwise, if the direction is specified as a single keyword, change
+ ‘<code class=property>top</code>’ to ‘<code
+ class=css>0deg</code>’, ‘<code
+ class=property>right</code>’ to ‘<code
+ class=css>90deg</code>’, ‘<code
+ class=property>bottom</code>’ to ‘<code
+ class=css>180deg</code>’, or ‘<code
+ class=property>left</code>’ to ‘<code
+ class=css>270deg</code>’.
+
+ <li>Otherwise, if the direction is specified as two keywords, change the
+ direction to an <angle> in the following ranges that would produce
+ an equivalent gradient: for ‘<code class=css>top
+ right</code>’ or ‘<code class=css>right top</code>’,
+ the angle must be between 0deg and 90deg; for ‘<code
+ class=css>bottom right</code>’ or ‘<code class=css>right
+ bottom</code>’, the angle must be between 90deg and 180deg; for
+ ‘<code class=css>bottom left</code>’ or ‘<code
+ class=css>left bottom</code>’, the angle must be between 180deg
+ and 270deg; for ‘<code class=css>top left</code>’ or
+ ‘<code class=css>left top</code>’, the angle must be
+ between 270deg and 360deg.
+ </ul>
+
+ <p>If both the start and end gradients had their direction specified with
+ keywords, and the absolute difference between the angles their
+ directions mapped to is greater than 180deg, add 360deg to the direction
+ of the gradient with the smaller angle. <span class=note>This ensures
+ that a transition from, for example, "left" (270deg) to "top" (0deg)
+ rotates the gradient a quarter-turn clockwise, as expected, rather than
+ rotating three-quarters of a turn counter-clockwise.</span></p>
+
+ <dt>For radial gradients:
+
+ <dd>
+ <ul>
+ <li>If the size is specified as two <length>s or <percentage>s, it
+ is already in its explicit form.
+
+ <li>Otherwise, the size must be changed to a pair of <length>s that
+ would produce an equivalent ending-shape.
+ </ul>
+ </dl>
+
+ <ul>
<li>Interpolate each component and color-stop of the gradients
independently. For linear gradients, the only component is the angle. For
radial gradients, the components are the horizontal and vertical position
@@ -2326,9 +2410,9 @@
start and end gradients are considered to be at the same index, and all
other color-stops following and preceding are indexed appropriately.
Then, for each pair of color-stops, interpolate the position and color
- independently.
- </ol>
- <!-- ====================================================================== -->
+ independently.</li>
+ <!-- ====================================================================== -->
+ </ul>
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
@@ -2345,10 +2429,10 @@
<dt id=CSS21>[CSS21]
<dd>Bert Bos; et al. <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423"><cite>Cascading Style
- Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
- April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2009/CR-CSS2-20090423">http://www.w3.org/TR/2009/CR-CSS2-20090423</a>
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
+ Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
+ 2011. W3C Recommendation. URL: <a
+ href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
</dd>
<!---->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.112
retrieving revision 1.113
diff -u -d -r1.112 -r1.113
--- Overview.src.html 28 May 2011 00:24:20 -0000 1.112
+++ Overview.src.html 9 Jun 2011 23:17:10 -0000 1.113
@@ -496,7 +496,7 @@
<pre class=prod><code><dfn><linear-gradient></dfn> = linear-gradient(
[[
- [ [top | bottom] || [left | right] ]
+ [ [ top | bottom ] || [ left | right ] ]
|
<angle>
],]?
@@ -505,29 +505,44 @@
<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 ''top''.</p>
+ positioned. It may be omitted; if so, it defaults 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;
- for the purposes of this property, 0deg points upwards, 90deg points toward
+ for the purposes of this argument, 0deg points upwards, 90deg points toward
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 direction from the center of the
+ 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 <i>gradient-line</i> where a line drawn perpendicular
to the <i>gradient-line</i> would intersect the corner of the box in that
direction. The starting-point is determined identically, except in the
opposite direction of the angle.</p>
- <p>The second way is to simply provide a side or corner of the box that
- the gradient should start at; the gradient will then automatically angle
- itself to extend from the specified side or corner to the opposite side
- or corner in a straight line. To be precise, the gradient is converted
- to the angle form described in the previous paragraph at used-value time.
- If a ''top'', ''right'', ''bottom'', or ''left'' is given, the used value
- of the gradient is 180deg, 270deg, 0deg, or 90deg, respectively. If
- a corner is given, the used value of the gradient is the angle necessary
- to place the starting-point of the gradient in that corner of the box.</p>
+ <p>The second way is to simply provide one or two keywords representing the
+ side or corner of the box that the <i>gradient-line</i> should point towards.
+ Similar to the previous case, 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. If a single keyword is specified, the line
+ assumes the necessary angle to place the ending-point of the <i>gradient-line</i>
+ in the center of the side specified by the keyword; if two keywords are specified,
+ the line assumes the necessary angle to place the ending-point of the
+ <i>gradient-line</i> in the specified corner of the box. The starting-point
+ of the gradient-line is then where the line intersects the opposite side or
+ corner of the box.</p>
+
+ <p class='note'>This means that the keyword 'bottom' (the default) makes the
+ gradient point towards the bottom, equivalent to specifying '180deg'. The
+ keywords 'top left' make the gradient point towards the top-left corner of
+ the box, which is equivalent to an angle somewhere between 0deg and 90deg
+ (exclusive).</p>
+
+ <p class='note'>The behavior of keywords is now exactly opposite what it has
+ been for a long time. Previously, specifying 'top' made it start at the top
+ and point down, but feedback suggests that this was confusingly different
+ from how <angle>s worked: giving an <angle> makes the gradient point
+ towards the specified direction, while giving keywords made the gradient
+ point <em>away</em> from the specified side/corner.</p>
<div class=example>
<div style="overflow: hidden">
@@ -565,18 +580,18 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(top, yellow, blue);
+linear-gradient(bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(bottom, blue, yellow);
-linear-gradient(top, yellow 0%, blue 100%);</code></pre>
+linear-gradient(top, blue, yellow);
+linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
<p><img src="linear1.png" alt="" ></p>
</div>
<div class=example>
- <p>This gradient goes from the upper-left to the lower-right corner.</p>
+ <p>This gradient goes from the top-left to the bottom-right corner.</p>
- <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
<p><img src="linear2.png" alt="" ></p>
</div>
@@ -686,9 +701,6 @@
that it would if ''closest-side'' or ''farthest-side'' were specified,
as appropriate. ''contain'' is a synonym for ''closest-side'', and
''cover'' is a synonym for ''farthest-corner''.</p>
-
- <p>If this implicit form is used, then it is converted to an equivalent
- explicit form (described below) at used-value time.</p>
</dd>
<dt>Explicitly</dt>
@@ -704,8 +716,9 @@
the box, while percentages used in the second value are relative to
the height of the box.</p>
- <p>Both of the values must be positive - specifying either as zero
- or negative is a syntax error.</p>
+ <p>Both of the values must be non-negative. Specifying either as
+ ''0'' is allowed, but produces a degenerate shape. The handling of
+ degenerate ending-shapes is specified later in this specification.</p>
</dd>
</dt>
@@ -1848,7 +1861,53 @@
generic image.</p>
<ol>
- <li>Convert both the start and end gradients to their used value.</li>
+ <li>Convert both the start and end gradients to their explicit forms:</li>
+ <dl>
+ <dt>For linear gradients:</dt>
+ <dd>
+ <ul>
+ <li>If the direction is specified as an <angle>, it
+ is already in its explicit form.</li>
+
+ <li>Otherwise, if the direction is specified as a single
+ keyword, change 'top' to '0deg', 'right' to '90deg',
+ 'bottom' to '180deg', or 'left' to '270deg'.</li>
+
+ <li>Otherwise, if the direction is specified as two
+ keywords, change the direction to an <angle> in the
+ following ranges that would produce an equivalent
+ gradient: for 'top right' or 'right top', the angle must
+ be between 0deg and 90deg; for 'bottom right' or
+ 'right bottom', the angle must be between 90deg and
+ 180deg; for 'bottom left' or 'left bottom', the angle
+ must be between 180deg and 270deg; for 'top left' or
+ 'left top', the angle must be between 270deg and 360deg.</li>
+
+ <p>If both the start and end gradients had their direction
+ specified with keywords, and the absolute difference
+ between the angles their directions mapped to is greater
+ than 180deg, add 360deg to the direction of the gradient
+ with the smaller angle. <span class='note'>This ensures
+ that a transition from, for example, "left" (270deg) to
+ "top" (0deg) rotates the gradient a quarter-turn
+ clockwise, as expected, rather than rotating
+ three-quarters of a turn counter-clockwise.</span></p>
+ </ul>
+ </dd>
+
+ <dt>For radial gradients:</dt>
+ <dd>
+ <ul>
+ <li>If the size is specified as two <length>s or
+ <percentage>s, it is already in its explicit form.</li>
+
+ <li>Otherwise, the size must be changed to a pair of
+ <length>s that would produce an equivalent
+ ending-shape.</li>
+ </ul>
+ </dd>
+ </dl>
+ </li>
<li>Interpolate each component and color-stop of the gradients independently.
For linear gradients, the only component is the angle. For radial gradients,
Received on Thursday, 9 June 2011 23:17:14 UTC