[css-color-5] Add example, #8499

w3c · May 10, 2023 · 8c4867d · 8c4867d
1 parent b4c7ee4
commit 8c4867d
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
@@ -974,6 +974,39 @@ so it has meaningful values for the channels.</p>
  which determines how "colorful" the color is.)
 </div>
 
+<div class="example" id="ex-no-percentage-magic">
+ <p>Beware when using components outside their normal position;
+ when percentages are resolved,
+ there is no "magic scaling"
+ to account for the changed position.
+ For example,</p>
+
+ <pre>
+ color: color(from color(srgb 0 0 0 / 60%) srgb alpha 0.6 0.6 / 0.9);
+ </pre>
+
+ <p>The alpha component is resolved as a <<number>>,
+ giving 0.6; thus the resulting color is
+ <span class="swatch" style="--color: rgb(60% 60% 60% / 0.9)"></span> ''color(srgb 0.6 0.6 0.6 / 0.9)''.
+ </p>
+
+ <p>However, in this second example, again the alpha resolves to 0.6,
+ giving a very different color due to the color component range in
+ legacy rgb() syntax:
+ </p>
+
+ <pre>
+ color: rgb(from rgb(0 0 0 / 60%) alpha 153 153 / 0.9);
+ </pre>
+
+ <p>which results in 
+ <span class="swatch" style="--color: rgb(0.235% 60% 60% / 0.9)"></span> ''rgb(0.6 153 153 / 0.9)''
+ and not
+ <span class="swatch" style="--color: rgb(153 153 153 / 0.9)"></span> ''rgb(153 153 153 / 0.9)''.
+ </p>
+
+</div>
+
 Missing components are handled the same way as with 
 [[css-color-4#interpolation-missing]]:
 the origin colorspace and the relative function colorspace