- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 01 Jul 2011 23:00:13 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv22401
Modified Files:
Overview.html Overview.src.html
Log Message:
Swapped keywords back to their earlier meaning and added an issue over them, for WD publication.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.108
retrieving revision 1.109
diff -u -d -r1.108 -r1.109
--- Overview.html 9 Jun 2011 23:17:10 -0000 1.108
+++ Overview.html 1 Jul 2011 23:00:11 -0000 1.109
@@ -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 9 June 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 July 2011</h2>
<dl>
<dt>Latest Version:
@@ -433,10 +433,11 @@
the SVG directly.</small></p>
</div>
- <p class=note>Note however that a UA that doesn't understand the media
- fragments notation will display the entirety an image specified with
- ‘<code class=css>url</code>’. However, since URLs with media
- fragment identifiers can also be used in the ‘<code
+ <p class=note>Unfortunately, a UA that doesn't understand the media
+ fragments notation will ignore the fragment and simply display the
+ entirety of an image specified with ‘<code
+ class=css>url</code>’. However, since URLs with media fragment
+ identifiers can also be used in the ‘<code
class=css>image()</code>’ notation defined below, authors can take
advantage of CSS's forward-compatible parsing rules to provide a fallback
when using an image fragment URL:
@@ -780,28 +781,22 @@
<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).
+ the starting-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 starting-point of the <a
+ href="#gradient-line"><i>gradient-line</i></a> in the specified corner of
+ the box. The ending-point of the gradient-line is then where the line
+ intersects the opposite side or corner of the box.
- <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.
+ <p class=issue>This usage of keywords appears to be subtly confusing. When
+ you ask solely about how keywords should work, most people prefer the
+ above model (keyword denotes starting point). Similarly, most people
+ prefer the way angles currently work. When you ask about whether "bottom"
+ and "0deg" should be the same direction or opposite, though, most people
+ prefer them to be opposite, despite that being contradictory with one of
+ their previous answers. I am exploring alternate solutions that resolve
+ this problem of expectations.
<div class=example>
<div style="overflow: hidden"> <img alt="[An image showing a box with a
@@ -849,10 +844,10 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(bottom, yellow, blue);
+linear-gradient(top, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(top, blue, yellow);
-linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
+linear-gradient(bottom, blue, yellow);
+linear-gradient(top, yellow 0%, blue 100%);</code></pre>
<p><img alt="" src=linear1.png></p>
</div>
@@ -860,7 +855,7 @@
<div class=example>
<p>This gradient goes from the top-left to the bottom-right corner.</p>
- <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
<p><img alt="" src=linear2.png></p>
</div>
@@ -2355,26 +2350,26 @@
explicit form.
<li>Otherwise, if the direction is specified as a single keyword, change
- ‘<code class=property>top</code>’ to ‘<code
+ ‘<code class=property>bottom</code>’ to ‘<code
class=css>0deg</code>’, ‘<code
- class=property>right</code>’ to ‘<code
+ class=property>left</code>’ to ‘<code
class=css>90deg</code>’, ‘<code
- class=property>bottom</code>’ to ‘<code
+ class=property>top</code>’ to ‘<code
class=css>180deg</code>’, or ‘<code
- class=property>left</code>’ to ‘<code
+ class=property>right</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>’,
+ an equivalent gradient: for ‘<code class=css>bottom
+ left</code>’ or ‘<code class=css>left bottom</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
+ class=css>top left</code>’ or ‘<code class=css>left
+ top</code>’, the angle must be between 90deg and 180deg; for
+ ‘<code class=css>top right</code>’ or ‘<code
+ class=css>right top</code>’, the angle must be between 180deg and
+ 270deg; for ‘<code class=css>bottom right</code>’ or
+ ‘<code class=css>right bottom</code>’, the angle must be
between 270deg and 360deg.
</ul>
@@ -2382,7 +2377,7 @@
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)
+ that a transition from, for example, "right" (270deg) to "bottom" (0deg)
rotates the gradient a quarter-turn clockwise, as expected, rather than
rotating three-quarters of a turn counter-clockwise.</span></p>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.114
retrieving revision 1.115
diff -u -d -r1.114 -r1.115
--- Overview.src.html 1 Jul 2011 22:16:46 -0000 1.114
+++ Overview.src.html 1 Jul 2011 23:00:11 -0000 1.115
@@ -519,25 +519,14 @@
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>
+ assumes the necessary angle to place the starting-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
+ the line assumes the necessary angle to place the starting-point of the
+ <i>gradient-line</i> in the specified corner of the box. The ending-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>
+ <p class='issue'>This usage of keywords appears to be subtly confusing. When you ask solely about how keywords should work, most people prefer the above model (keyword denotes starting point). Similarly, most people prefer the way angles currently work. When you ask about whether "bottom" and "0deg" should be the same direction or opposite, though, most people prefer them to be opposite, despite that being contradictory with one of their previous answers. I am exploring alternate solutions that resolve this problem of expectations.</p>
<div class=example>
<div style="overflow: hidden">
@@ -575,10 +564,10 @@
<p>Below are various ways of specifying a basic vertical gradient:</p>
<pre><code>linear-gradient(yellow, blue);
-linear-gradient(bottom, yellow, blue);
+linear-gradient(top, yellow, blue);
linear-gradient(180deg, yellow, blue);
-linear-gradient(top, blue, yellow);
-linear-gradient(bottom, yellow 0%, blue 100%);</code></pre>
+linear-gradient(bottom, blue, yellow);
+linear-gradient(top, yellow 0%, blue 100%);</code></pre>
<p><img src="linear1.png" alt="" ></p>
</div>
@@ -586,7 +575,7 @@
<div class=example>
<p>This gradient goes from the top-left to the bottom-right corner.</p>
- <pre><code>linear-gradient(bottom right, yellow, blue);</code></pre>
+ <pre><code>linear-gradient(top left, yellow, blue);</code></pre>
<p><img src="linear2.png" alt="" ></p>
</div>
@@ -1865,26 +1854,26 @@
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>
+ keyword, change 'bottom' to '0deg', 'left' to '90deg',
+ 'top' to '180deg', or 'right' 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>
+ gradient: for 'bottom left' or 'left bottom', the angle must
+ be between 0deg and 90deg; for 'top left' or
+ 'left top', the angle must be between 90deg and
+ 180deg; for 'top right' or 'right top', the angle
+ must be between 180deg and 270deg; for 'bottom right' or
+ 'right bottom', 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
+ that a transition from, for example, "right" (270deg) to
+ "bottom" (0deg) rotates the gradient a quarter-turn
clockwise, as expected, rather than rotating
three-quarters of a turn counter-clockwise.</span></p>
</ul>
Received on Friday, 1 July 2011 23:00:14 UTC