Added repeating gradients, now that I picked up some decent use-cases for it.

Added note explaining premultiplied colors, since people keep asking me about it.

Author: tabatkins

css3-images/Overview.html

@@ -19,12 +19,12 @@
 
    <h1>CSS Image Values and Replaced Content Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 December
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 December
     2010</h2>
 
    <dl>
     <dt>This version:</dt>
-    <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20101208/">http://www.w3.org/TR/2010/CR-css3-images-20101208/</a></dd> -->
+    <!-- <dd><a href="http://www.w3.org/TR/2010/CR-css3-images-20101214/">http://www.w3.org/TR/2010/CR-css3-images-20101214/</a></dd> -->
 
     <dd><a
      href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
@@ -147,7 +147,10 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
      <li><a href="#radial-gradients"><span class=secno>5.2. </span>Radial
       Gradients</a>
 
-     <li><a href="#color-stop-syntax"><span class=secno>5.3.
+     <li><a href="#repeating-gradients"><span class=secno>5.3.
+      </span>Repeating Gradients</a>
+
+     <li><a href="#color-stop-syntax"><span class=secno>5.4.
       </span><code>color-stop</code> Syntax</a>
     </ul>
 
@@ -560,7 +563,7 @@ <h2 id=gradients><span class=secno>5. </span>Gradients</h2>
     href="#ltgradient"><code>&lt;gradient></code></a> is:</p>
 
    <pre
-    class=prod><dfn id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> ]</pre>
+    class=prod><dfn id=ltgradient>&lt;gradient></dfn> = [ &lt;linear-gradient> | &lt;radial-gradient> | &lt;repeating-linear-gradient> | &lt;repeating-radial-gradient> ]</pre>
 
    <p>where <a
     href="#ltlinear-gradient"><code>&lt;linear-gradient></code></a> and <a
@@ -921,31 +924,75 @@ <h4 class=no-toc id=radial-gradient-examples><span class=secno>5.2.2.
      <p><img alt="" src=radial7.png></p>
     </div>
    </div>
-   <!-- Removed for lack of a use-case; we'll just leave it as a vendor-prefix for now.
-		<div>
-		<h3>Repeating Gradients</h3>
-	
-		<p>In addition to the <code>linear-gradient()</code> and <code>radial-gradient()</code> functions, this specification defines <code>repeating-linear-gradient()</code> and <code>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.  However, the color-stops are repeated infinitely in both directions, with their positions shifted by multiples of the difference between the last color-stop's position and the first color-stop's position.  For example, <code>repeating-linear-gradient(red 10px, blue 50px)</code> is equivalent to <code>linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)</code>.  Note that the last color-stop and first color-stop will always coincide at the boundaries of each group, which may produce sharp transitions if the gradient does not start and end with the same color.</p>
-
-		<div class=example>
-			<p>Repeating gradient syntax is basically identical to that of non-repeating gradients:</p>
-
-			<pre><code>repeating-linear-gradient(red, blue 20px, red 40px)</code></pre>
-			<p><img src="repeating1.png" alt=""></p>
-
-			<pre><code>repeating-radial-gradient(red, blue 20px, red 40px)</code></pre>
-			<p><img src="repeating2.png" alt=""></p>
-
-			<pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
-			<p><img src="repeating3.png" alt=""></p>
-		</div>
-
-		<p>If the difference in the first and last color-stops is 0 (for example, in the rule <code>linear-gradient(red 10px, blue 10px)</code>), the gradient defines a solid-color image with the color of the last color-stop in the rule (in this case, then, it would simply define a blue image).</p>
-	</div>
--->
-   
+
    <div>
-    <h3 id=color-stop-syntax><span class=secno>5.3.
+    <h3 id=repeating-gradients><span class=secno>5.3. </span>Repeating
+     Gradients</h3>
+
+    <p>In addition to the &lsquo;<code
+     class=css>linear-gradient()</code>&rsquo; and &lsquo;<code
+     class=css>radial-gradient()</code>&rsquo; functions, this specification
+     defines &lsquo;<code class=css>repeating-linear-gradient()</code>&rsquo;
+     and &lsquo;<code class=css>repeating-radial-gradient()</code>&rsquo;
+     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 id=ltrepeating-linear-gradient>&lt;repeating-linear-gradient></dfn> = repeating-linear-gradient(
+	[ 
+		[ [top | bottom] || [left | right] ] 
+		|| 
+		&lt;angle>
+	,]? 
+	&lt;color-stop&gt;[, &lt;color-stop&gt;]+
+)
+<dfn id=ltrepeating-radial-gradient>&lt;repeating-radial-gradient></dfn> = repeating-radial-gradient(
+	[&lt;bg-position&gt;,]? 
+	[
+		[&lt;shape&gt; || &lt;size&gt;]
+		|
+		[&lt;length> | &lt;percentage>]{2}
+	,]? 
+	&lt;color-stop&gt;[, &lt;color-stop&gt;]+
+)</code></pre>
+
+    <p>When rendered, however, the color-stops are repeated infinitely in
+     both directions, with their positions shifted by multiples of the
+     difference between the last specified color-stop's position and the
+     first specified color-stop's position. For example, &lsquo;<code
+     class=css>repeating-linear-gradient(red 10px, blue 50px)</code>&rsquo;
+     is equivalent to &lsquo;<code class=css>linear-gradient(..., red -30px,
+     blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)</code>&rsquo;.
+     Note that the last color-stop and first color-stop will always coincide
+     at the boundaries of each group, which may produce sharp transitions if
+     the gradient does not start and end with the same color.</p>
+
+    <div class=example>
+     <p>Repeating gradient syntax is basically identical to that of
+      non-repeating gradients:</p>
+
+     <pre><code>repeating-linear-gradient(red, blue 20px, red 40px)</code></pre>
+
+     <p><img alt="" src=repeating1.png></p>
+
+     <pre><code>repeating-radial-gradient(red, blue 20px, red 40px)</code></pre>
+
+     <p><img alt="" src=repeating2.png></p>
+
+     <pre><code>repeating-radial-gradient(20px 30px, circle contain, red, yellow, green 100%, yellow 150%, red 200%)</code></pre>
+
+     <p><img alt="" src=repeating3.png></p>
+    </div>
+
+    <p>If the difference in the first and last color-stops is 0 (for example,
+     in the value &lsquo;<code class=css>linear-gradient(red 10px, blue
+     10px)</code>&rsquo;), the gradient defines a solid-color image with the
+     color of the last color-stop in the rule (in this case, then, it would
+     simply define a blue image).</p>
+   </div>
+
+   <div>
+    <h3 id=color-stop-syntax><span class=secno>5.4.
      </span><code>color-stop</code> Syntax</h3>
 
     <p>The <dfn id=ltcolor-stopgt><code>&lt;color-stop&gt;</code></dfn> is
@@ -1004,6 +1051,24 @@ <h3 id=color-stop-syntax><span class=secno>5.3.
      area is at least 200px tall. If it was 150px tall, however, the blue
      color-stop's position would be equivalent to "75px", which precedes the
      yellow color-stop, and would be corrected to a position of 100px.</p>
+
+    <p class=note>The definition and implications of "premultiplied" color
+     spaces are given elsewhere in the technical literature, but a quick
+     primer is given here to illuminate the process. Given a color expressed
+     as an rgba() 4-tuple, one can convert this to a premultiplied
+     representation by multiplying the red, green, and blue components by the
+     alpha component. For example, a partially-transparent blue may be given
+     as rgba(0,0,255,.5), which would then be expressed as (0,0,127.5,.5) in
+     its premultiplied representation. Note that fully opaque colors have the
+     same representation in rgba and premultiplied-rgba (you multiply the
+     components by 1), and all fully transparent colors are expressed the
+     same way in the premultiplied representation (you multiply each
+     component by 0, so no matter what the source color was in rgba, the
+     premultiplied representation is (0,0,0,0)). Interpolating colors using
+     the premultiplied representations rather than the plain rgba
+     representations tends to produce more attractive transitions,
+     particularly when transitioning from a fully opaque color to fully
+     transparent.</p>
    </div>
   </div>
 
@@ -1041,8 +1106,8 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
      <p>If an object (such as an icon) has multiple sizes, then the largest
       size is used. If it has multiple aspect ratios of that size (or of no
       size), then the aspect ratio closest to the aspect ratio of the default
-      image sizing area is use <span class=issue>This is pretty
-      arbitrary</span>.
+      image sizing area is used. <span class=issue>This is pretty
+      arbitrary.</span>
 
     <dt><dfn id=specified-size>specified size</dfn>
 
@@ -1064,12 +1129,17 @@ <h2 id=sizing><span class=secno>6. </span>Sizing Images and Objects in CSS</h2>
      and width used to determine the size of the CSS View Box when both the
      intrinsic dimensions and specified size are missing dimensions. It
      varies based on the property that the image is being used as a value in.
-     For <code>background-image</code>, the default image sizing area is the
-     size of the background positioning area of the element. For
-     <code>list-style-image</code>, the default image sizing area is a 1em
-     square. For <code>list-style-image</code>, the default image sizing area
-     is the size of the border box of the element. In any other context, the
-     default image sizing area is a rectangle 300px wide and 150px tall.
+     For &lsquo;<code class=property>background-image</code>&rsquo;, the
+     default image sizing area is the size of the background positioning area
+     of the element. For &lsquo;<code
+     class=property>list-style-image</code>&rsquo;, the default image sizing
+     area is a 1em square. For &lsquo;<code
+     class=property>list-style-image</code>&rsquo;, the default image sizing
+     area is the size of the border box of the element. For &lsquo;<code
+     class=property>cursor</code>&rsquo;, the default image sizing area is a
+     UA-defined rectangle that should be based on the size of a typical
+     cursor on the UA's operating system. In any other context, the default
+     image sizing area is a rectangle 300px wide and 150px tall.
    </dl>
 
    <p>Images and objects in CSS are sized as follows:</p>
@@ -1867,6 +1937,28 @@ <h3 id=serializing-gradients><span class=secno>7.6. </span>Serializing
       <li>Append a close parenthesis ")" to s.
      </ol>
 
+     <p>To serialize a &lsquo;<a href="#ltrepeating-linear-gradient"><code
+      class=css>&lt;repeating-linear-gradient></code></a>&rsquo;:</p>
+
+     <ol>
+      <li>Append "repeating-linear-gradient(" to s.
+
+      <li>Follow the steps for serializing a &lsquo;<a
+       href="#ltlinear-gradient"><code
+       class=css>&lt;linear-gradient></code></a>&rsquo;, except skip step 1.
+     </ol>
+
+     <p>To serialize a &lsquo;<a href="#ltrepeating-radial-gradient"><code
+      class=css>&lt;repeating-radial-gradient></code></a>&rsquo;:</p>
+
+     <ol>
+      <li>Append "repeating-radial-gradient(" to s.
+
+      <li>Follow the steps for serializing a &lsquo;<a
+       href="#ltradial-gradient"><code
+       class=css>&lt;radial-gradient></code></a>&rsquo;, except skip step 1.
+     </ol>
+
      <p>To serialize a &lsquo;<a href="#ltcolor-stop"><code
       class=css>&lt;color-stop></code></a>&rsquo;:</p>
 
@@ -1970,13 +2062,18 @@ <h3 id=interpolating-gradients><span class=secno>8.2.
       interpolated:</p>
 
      <ol>
-      <li>Both the starting and ending gradient must be of the same type;
-       either both linear gradients or both radial gradients.
+      <li>Both the starting and ending gradient must be expressed with the
+       same function. (For example, you can transition from a
+       linear-gradient() to a linear-gradient(), but not from a
+       linear-gradient() to a radial-gradient() or a
+       repeating-linear-gradient().)
 
       <li>Both the starting and ending gradient must have the same number of
-       color-stops. (Remember, you can always pad a gradient with additional
-       color-stops placed atop each other if you need to play with the number
-       of color-stops.)
+       color-stops. For this purpose, a repeating gradient is considered to
+       have infinite color-stops, and thus all repeating gradients have the
+       same number of color-stops. (Note that one may pad a gradient with
+       additional color-stops placed atop each other, if necessary to make
+       two gradients have the same number of color-stops.)
      </ol>
 
      <p>If the two gradients satisfy both of those constraints, they must be
@@ -1993,8 +2090,11 @@ <h3 id=interpolating-gradients><span class=secno>8.2.
 
       <li>To interpolate a color-stop, first match each color-stop in the
        start gradient to the corresponding color-stop at the same index in
-       the end gradient. Then, for each pair of color-stops, interpolate the
-       position and color independently.
+       the end gradient. For repeating gradients, the first specified
+       color-stop in the 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>
     </div>
    </div>