[css-color-5] Added examples of serialization of nested color functions. #10328

Author: svgeesus

css-color-5/Overview.bs

@@ -3142,14 +3142,60 @@ The serialization of the declared value of a relative color is:
 
 
 <div class="example" id="ex-serial-rcs-specified-simple">
-	For example, the result of serializing the declared value
+	For example, the serialization of the declared value of
 
 	<pre class="lang-css">OkLcH(from peru  l    c  h)</pre>
 
 	is the string "oklch(from peru l c h)"
 </div>
 
-<!-- need a more complex example, and one with calc too -->
+<div class="example" id="ex-serial-rcs-calc">
+For example, the serialization of the declared value of
+
+<pre class="lang-css">rgb(from red calc(r / 2) g calc(30%));</pre>
+
+is the string "rgb(from red calc(0.5 * r) g calc(30%))",
+while the serialization of the computed value
+is the string "color(srgb 0.5 0 0.3)".
+</div>
+
+<div class="example" id="ex-serial-rcs-nested-none">
+For example, the serialization of the declared value of
+
+<pre class="lang-css">hsl(from hsl(none 10% 50%) h s l);</pre>
+
+is the string "hsl(from hsl(none 10% 50%) h s l)",
+while the serialization of the computed value
+is the string "color(srgb 0.55 0.45 0.45)".
+</div>
+
+<div class="example" id="ex-serial-rcs-hsl-unclamped">
+For example, the serialization of the declared value of
+
+<pre class="lang-css">hsl(from hsl(127.9 302% 25.33%) h s l);</pre>
+
+is the string "hsl(from hsl(127.9 302% 25.33%) h s l)",
+while the serialization of the computed value
+is the string "color(srgb -0.511666 1.018266 -0.310225)".
+</div>
+
+<div class="example" id="ex-serial-rcs-currentcolor">
+Given the following HTML (note the color property set on this element):
+
+<pre class="lang-html">
+&lt;div id="example" 
+	style="background-color: rgb(from currentcolor r g calc(b / 2)); 
+	color: blue;">
+&lt;/div>
+</pre>
+
+The serialization of the declared value of ''background-color'' 
+is the string "rgb(from currentcolor r g calc(b / 2))"
+while the serialization of the computed value
+is the string "color(srgb 0 0 0.5)"
+
+</div>
+
 
 The serialization of the result of a relative color function
 depends on whether the keyword ''currentColor'' is the [=origin color=].