- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 09 Aug 2011 01:49:01 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv25741
Modified Files:
Overview.html Overview.src.html
Log Message:
Added several examples to the color-stop chapter to illustrate the fixup algorithm, and the consequences of pre vs post multiplication.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.133
retrieving revision 1.134
diff -u -d -r1.133 -r1.134
--- Overview.html 9 Aug 2011 01:23:38 -0000 1.133
+++ Overview.html 9 Aug 2011 01:48:59 -0000 1.134
@@ -1097,6 +1097,64 @@
one specified last. In effect, the color suddenly changes at that position
rather than smoothly transitioning.
+ <div class=example>
+ <p>Below are several pairs of gradients. The latter of each pair is a
+ manually "fixed-up" version of the former, obtained by applying the above
+ rules. For each pair, both gradients will render identically.</p>
+
+ <pre><code>1. linear-gradient(red, white 20%, blue)
+ ==
+ linear-gradient(red 0%, white 20%, blue 100)
+
+2. linear-gradient(red 40%, white, black, blue)
+ ==
+ linear-gradient(red 40%, white 60%, black 80%, blue 100%)
+
+3. linear-gradient(red 20px, white 0px, blue 40px)
+ ==
+ linear-gradient(red 20px, white 20px, blue 40px)
+
+4. linear-gradient(red, white -50%, black 150%, blue)
+ ==
+ linear-gradient(red 0%, white 0%, black 150%, blue 150%)</code></pre>
+ </div>
+
+ <div class=example>
+ <p>The following example illustrates* the difference between a gradient
+ transitioning in pre-multiplied sRGBA and one transitioning (incorrectly)
+ in non-premultiplied. In both of these example, the gradient is drawn
+ over a white background. Both gradients could be written with the
+ following value:</p>
+
+ <pre><code>linear-gradient(90deg, red, transparent, blue)</code></pre>
+
+ <p>In premultiplied space, transitions to or from "transparent" always
+ look nice:</p>
+
+ <p><svg height=100 style="background:white" width=200> <defs>
+ <lineargradient id=premult-gradient> <stop offset="0%"
+ stop-color=red></stop> <stop offset="50%" stop-color=red
+ stop-opacity=0></stop> <stop offset="50%" stop-color=blue
+ stop-opacity=0></stop> <stop offset="100%" stop-color=blue></stop>
+ </lineargradient> </defs> <rect fill="url(#premult-gradient)"
+ height="100%" width="100%"></rect> </svg></p>
+
+ <p>On the other hand, if a gradient were to incorrectly transition in
+ non-premultiplied space, the colors near "transparent" would noticeably
+ darken to a grayish color, because "transparent" is actually a shorthand
+ for ‘<code class=css>rgba(0,0,0,0)</code>’, or transparent
+ black:</p>
+
+ <p><svg height=100 style="background:white" width=200> <defs>
+ <lineargradient id=nonpremult-gradient> <stop offset="0%"
+ stop-color=red></stop> <stop offset="50%" stop-color=black
+ stop-opacity=0></stop> <stop offset="100%" stop-color=blue></stop>
+ </lineargradient> </defs> <rect fill="url(#nonpremult-gradient)"
+ height="100%" width="100%"></rect> </svg></p>
+
+ <p><small>* SVG-in-HTML support required to view the images.</small></p>
+ </div>
+
<p class=note>It is recommended that authors not mix different types of
units, such as px, em, or %, in a single rule, as this can cause a
color-stop to unintentionally try to move before an earlier one. For
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.140
retrieving revision 1.141
diff -u -d -r1.140 -r1.141
--- Overview.src.html 9 Aug 2011 01:23:38 -0000 1.140
+++ Overview.src.html 9 Aug 2011 01:48:59 -0000 1.141
@@ -772,6 +772,61 @@
last. In effect, the color suddenly changes at that position rather than
smoothly transitioning.</p>
+ <div class=example>
+ <p>Below are several pairs of gradients. The latter of each pair is a manually "fixed-up" version of the former, obtained by applying the above rules. For each pair, both gradients will render identically.</p>
+
+ <pre><code>1. linear-gradient(red, white 20%, blue)
+ ==
+ linear-gradient(red 0%, white 20%, blue 100)
+
+2. linear-gradient(red 40%, white, black, blue)
+ ==
+ linear-gradient(red 40%, white 60%, black 80%, blue 100%)
+
+3. linear-gradient(red 20px, white 0px, blue 40px)
+ ==
+ linear-gradient(red 20px, white 20px, blue 40px)
+
+4. linear-gradient(red, white -50%, black 150%, blue)
+ ==
+ linear-gradient(red 0%, white 0%, black 150%, blue 150%)</code></pre>
+ </div>
+
+ <div class=example>
+ <p>The following example illustrates* the difference between a gradient transitioning in pre-multiplied sRGBA and one transitioning (incorrectly) in non-premultiplied. In both of these example, the gradient is drawn over a white background. Both gradients could be written with the following value:</p>
+
+ <pre><code>linear-gradient(90deg, red, transparent, blue)</code></pre>
+
+ <p>In premultiplied space, transitions to or from "transparent" always look nice:</p>
+
+ <p><svg width='200' height='100' style="background:white">
+ <defs>
+ <linearGradient id='premult-gradient'>
+ <stop offset='0%' stop-color='red'></stop>
+ <stop offset='50%' stop-color='red' stop-opacity='0'></stop>
+ <stop offset='50%' stop-color='blue' stop-opacity='0'></stop>
+ <stop offset='100%' stop-color='blue'></stop>
+ </linearGradient>
+ </defs>
+ <rect width='100%' height='100%' fill='url(#premult-gradient)'></rect>
+ </svg></p>
+
+ <p>On the other hand, if a gradient were to incorrectly transition in non-premultiplied space, the colors near "transparent" would noticeably darken to a grayish color, because "transparent" is actually a shorthand for ''rgba(0,0,0,0)'', or transparent black:</p>
+
+ <p><svg width='200' height='100' style="background:white">
+ <defs>
+ <linearGradient id='nonpremult-gradient'>
+ <stop offset='0%' stop-color='red'></stop>
+ <stop offset='50%' stop-color='black' stop-opacity='0'></stop>
+ <stop offset='100%' stop-color='blue'></stop>
+ </linearGradient>
+ </defs>
+ <rect width='100%' height='100%' fill='url(#nonpremult-gradient)'></rect>
+ </svg></p>
+
+ <p><small>* SVG-in-HTML support required to view the images.</small></p>
+ </div>
+
<p class=note>It is recommended that authors not mix different types of units,
such as px, em, or %, in a single rule, as this can cause a color-stop to
unintentionally try to move before an earlier one. For example, the rule
Received on Tuesday, 9 August 2011 01:49:02 UTC