From 8c4867ddaf9c93d131e2251f52d8637a002ccd15 Mon Sep 17 00:00:00 2001
From: Chris Lilley <chris@w3.org>
Date: Wed, 10 May 2023 11:45:21 -0400
Subject: [PATCH] [css-color-5] Add example, #8499

---
 css-color-5/Overview.bs | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs
index e34de094835..4a2a9880180 100644
--- 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