- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 02 Aug 2011 20:11:37 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv451
Modified Files:
Overview.html Overview.src.html
Log Message:
Changed too-small repeating gradients to average the color of the color-stops.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.115
retrieving revision 1.116
diff -u -d -r1.115 -r1.116
--- Overview.html 23 Jul 2011 02:03:35 -0000 1.115
+++ Overview.html 2 Aug 2011 20:11:35 -0000 1.116
@@ -9,10 +9,6 @@
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
- <style type="text/css">
- p { text-indent: 0 !important; margin: .5em 0; }
- </style>
-
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
@@ -20,21 +16,27 @@
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 July 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 2 August 2011</h2>
<dl>
- <dt>Latest Version:
+ <dt>This version:
<dd><a
- href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
+ href="http://www.w3.org/TR/2011/ED-css3-images-20110802/">http://www.w3.org/TR/2011/ED-css3-images-20110802/</a>
- <dt>Latest Published Version:
+ <dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a>
- <dt>Previous Version:
+ <dt>Editor's draft:
+
+ <dd><a
+ href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
+
+
+ <dt>Previous version:
<dd><a
href="http://www.w3.org/TR/2011/WD-css3-images-20110217/">http://www.w3.org/TR/2011/WD-css3-images-20110217/</a>
@@ -42,7 +44,7 @@
<dd><a
href="http://www.w3.org/TR/2009/WD-css3-images-20090723/">http://www.w3.org/TR/2009/WD-css3-images-20090723/</a>
- <dt>Editor:
+ <dt>Editors:
<dd><a href="http://fantasai.inkedblade.net/contact">Elika J. Etemad</a>
(Invited Expert)
@@ -436,7 +438,7 @@
the SVG directly.</small></p>
</div>
- <p class=note>Unfortunately, a UA that doesn't understand the media
+ <p class=note>Note that a legacy 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
@@ -690,12 +692,8 @@
These are commonly used for subtle shading in background images, buttons,
and many other things. The two functions described in this section allow
an author to specify such an image in a terse syntax, so that the UA can
- generate the image automatically when rendering the page. Gradients are a
- type of image, and can be used anywhere an image can, such as in the
- ‘<code class=property>background-image</code>’ or ‘<code
- class=property>list-style-image</code>’ properties. Gradients have
- no <a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>. The
- syntax of a <a href="#ltgradient"><i><gradient></i></a> is:
+ generate the image automatically when rendering the page. The syntax of a
+ <a href="#ltgradient"><i><gradient></i></a> is:
<pre
class=prod><dfn id=ltgradient><gradient></dfn> = [ <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient> ]</pre>
@@ -707,6 +705,10 @@
href="#ltrepeating-radial-gradient"><i><repeating-radial-gradient></i></a>
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>’
+ or ‘<code class=property>list-style-image</code>’ properties.
+
<div class=example>
<p>As with the other <a href="#ltimage"><i><image></i></a> types
defined in this specification, gradients can be used in any property that
@@ -720,18 +722,19 @@
</ul>
</div>
- <p class=note>In many places this section references a box, such as "the
- box's top-left corner" or "the box's right side". In all of these
- circumstances, the "box" refers to a rectangle with the dimensions of the
- <a href="#concrete-object-size"><i>concrete object size</i></a>. A
- gradient has no intrinsic dimensions. This means that, for example, if you
- use a gradient in the ‘<code
- class=property>background-image</code>’ property (with ‘<code
- class=property>background-size</code>’ at the default value and
- ‘<code class=property>background-repeat</code>’ not equal to
- ‘<code class=property>round</code>’), the "box" will simply be
- the size of the background sizing area. If you use a gradient in a
- list-style-image, the "box" will be a 1em square.
+ <p>A gradient is drawn into a box with the dimensions of the <a
+ href="#concrete-object-size"><i>concrete object size</i></a>. Elsewhere in
+ this section this rectangle is simply called the "box".
+
+ <p>A gradient has no <a href="#intrinsic-dimensions"><i>intrinsic
+ dimensions</i></a>. This means that, for example, if you use a gradient in
+ the ‘<code class=property>background-image</code>’ property
+ (with ‘<code class=property>background-size</code>’ at the
+ default value and ‘<code
+ class=property>background-repeat</code>’ not equal to ‘<code
+ class=property>round</code>’), the box will simply be the size of
+ the background sizing area. Similarly, for a gradient used as a
+ list-style-image, the box would be a 1em square.
<p class=issue>It has been suggested that several of the controls offered
by gradients are unnecessary. Repeating gradients could potentially be
@@ -1152,12 +1155,41 @@
<p><img alt="" src=repeating3.png></p>
</div>
- <p>If the difference in the positions of the first and last color-stops is
- less than 1px, the <i>actual value</i> of the position of the last
- color-stop must be the position of the first color-stop, plus 1px. <span
- class=note>This behavior is different from a previous version of the spec
- and does not match implementations; the change was made to avoid
- non-continuous behavior in this case.</span></p>
+ <p>If the distance between the first and last color-stops is zero, the
+ gradient must be rendered as a solid-color image equal to the "average"
+ color of the gradient, determined by linearly blending the colors of all
+ the color-stops in premultipied sRGBA space.
+
+ <p>If the distance between the first and last color-stops is non-zero, but
+ is small enough that the implementation knows that the physical resolution
+ of the output device is insufficient to faithfully render the gradient,
+ the gradient must be rendered as a solid-color image equal to the weighted
+ average color of the gradient, as determined by the following algorithm:
+
+ <ol>
+ <li>Define <var>list</var> as an initially-empty list of premultiplied
+ RGBA colors, and <var>total-length</var> as the distance between first
+ and last color stops.
+
+ <li>For each adjacent pair of color-stops, define <var>weight</var> as
+ half the distance between the two color-stops, divided by
+ <var>total-length</var>. Add two entries to <var>list</var>, the first
+ obtained by representing the color of the first color-stop in
+ premultiplied sRGBA and scaling all of the components by
+ <var>weight</var>, and the second obtained in the same way with the
+ second color-stop.
+
+ <li>Sum the entries of <var>list</var> component-wise to produce the
+ average color.
+ </ol>
+
+ <p class=note>As usual, implementations may use whatever algorithm they
+ wish, so long as it produces the same result as the above.
+
+ <div class=example>
+ <p class=issue>TODO fill in examples here of the 0-length or
+ too-small-length cases.</p>
+ </div>
<!-- ====================================================================== -->
<h3 id=color-stop-syntax><span class=secno>5.4. </span> Gradient
@@ -1585,7 +1617,7 @@
href="#default-object-size"><i>default object size</i></a> equal to the
replaced element's used width and height.</p>
- <dt>scale-down <b class=issue>better name?</b>
+ <dt>scale-down <i class=issue>better name?</i>
<dd>
<p>Size the content as if ‘<code class=property>none</code>’
@@ -2387,61 +2419,59 @@
<ol>
<li>Convert both the start and end gradients to their explicit forms:
- </ol>
-
- <dl>
- <dt>For linear gradients:
+ <dl>
+ <dt>For linear gradients:
- <dd>
- <ul>
- <li>If the direction is specified as an <angle>, it is already in its
- explicit form.
+ <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>bottom</code>’ to ‘<code
- class=css>0deg</code>’, ‘<code
- class=property>left</code>’ to ‘<code
- class=css>90deg</code>’, ‘<code
- class=property>top</code>’ to ‘<code
- class=css>180deg</code>’, or ‘<code
- class=property>right</code>’ to ‘<code
- class=css>270deg</code>’.
+ <li>Otherwise, if the direction is specified as a single keyword,
+ change ‘<code class=property>bottom</code>’ to
+ ‘<code class=css>0deg</code>’, ‘<code
+ class=property>left</code>’ to ‘<code
+ class=css>90deg</code>’, ‘<code
+ class=property>top</code>’ to ‘<code
+ class=css>180deg</code>’, or ‘<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>bottom
- left</code>’ or ‘<code class=css>left bottom</code>’,
- the angle must be between 0deg and 90deg; for ‘<code
- 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>
+ <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>bottom
+ left</code>’ or ‘<code class=css>left
+ bottom</code>’, the angle must be between 0deg and 90deg; for
+ ‘<code 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.
- <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, "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>
+ <li>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, "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>
+ </ul>
- <dt>For radial gradients:
+ <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.
+ <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>
+ <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
@@ -2453,9 +2483,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.</li>
- <!-- ====================================================================== -->
- </ul>
+ independently.
+ </ol>
+ <!-- ====================================================================== -->
<h2 class=no-num id=changes>Changes Since the 17 February 2011 Working
Draft</h2>
@@ -2678,8 +2708,11 @@
<dt id=CSSOM>[CSSOM]
- <dd>Anne van Kesteren. <cite>CSSOM.</cite> (forthcoming). W3C Working
- Draft. (Work in progress.)</dd>
+ <dd>Anne van Kesteren. <a
+ href="http://www.w3.org/TR/2011/WD-cssom-20110712/"><cite>CSSOM.</cite></a>
+ 12 July 2011. W3C Working Draft. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2011/WD-cssom-20110712/">http://www.w3.org/TR/2011/WD-cssom-20110712/</a>
+ </dd>
<!---->
<dt id=SMIL10>[SMIL10]
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.121
retrieving revision 1.122
diff -u -d -r1.121 -r1.122
--- Overview.src.html 23 Jul 2011 02:03:35 -0000 1.121
+++ Overview.src.html 2 Aug 2011 20:11:35 -0000 1.122
@@ -17,7 +17,7 @@
<h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
<dl>
<dt>This version:</dt>
- <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/WD-css3-images-[CDATE]/</a>
+ <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/ED-css3-images-[CDATE]/</a>
<dt>Latest version:</dt>
<dd><a href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a></dd>
@@ -836,12 +836,23 @@
<p><img src="repeating3.png" alt=""></p>
</div>
- <p>If the difference in the positions of the first and last color-stops is
- less than 1px, the <i>actual value</i> of the position of the last color-stop
- must be the position of the first color-stop, plus 1px.
- <span class='note'>This behavior is different from a previous version of the
- spec and does not match implementations; the change was made to avoid
- non-continuous behavior in this case.</span></p>
+ <p>If the distance between the first and last color-stops is zero, the gradient must be rendered as a solid-color image equal to the "average" color of the gradient, determined by linearly blending the colors of all the color-stops in premultipied sRGBA space.</p>
+
+ <p>If the distance between the first and last color-stops is non-zero, but is small enough that the implementation knows that the physical resolution of the output device is insufficient to faithfully render the gradient, the gradient must be rendered as a solid-color image equal to the weighted average color of the gradient, as determined by the following algorithm:</p>
+
+ <ol>
+ <li>Define <var>list</var> as an initially-empty list of premultiplied RGBA colors, and <var>total-length</var> as the distance between first and last color stops.</li>
+
+ <li>For each adjacent pair of color-stops, define <var>weight</var> as half the distance between the two color-stops, divided by <var>total-length</var>. Add two entries to <var>list</var>, the first obtained by representing the color of the first color-stop in premultiplied sRGBA and scaling all of the components by <var>weight</var>, and the second obtained in the same way with the second color-stop.</li>
+
+ <li>Sum the entries of <var>list</var> component-wise to produce the average color.</li>
+ </ol>
+
+ <p class='note'>As usual, implementations may use whatever algorithm they wish, so long as it produces the same result as the above.</p>
+
+ <div class='example'>
+ <p class='issue'>TODO fill in examples here of the 0-length or too-small-length cases.</p>
+ </div>
<!-- ====================================================================== -->
Received on Tuesday, 2 August 2011 20:11:39 UTC