[css-color-5] Update color-mix() serialization rules (#13320)

Omit color space when it is the default (`oklab`),
serialize hue interpolation method when non-default,
generalize percentage rules for N colors
(omit all when equal to 100%/N, otherwise serialize all),
and clarify that identical colors are not collapsed.

Co-Authored-By: Chris Lilley <chris@w3.org>

Author: LeaVerou

css-color-5/Overview.bs

@@ -3139,65 +3139,103 @@ an implicit value of 1 (fully opaque) is the default.
 	Serializing color-mix()
 </h3>
 
-The serialization of the declared value of a ''color-mix()'' function
-is the string "color-mix(in ",
-followed by the specified <<color-space>> in all-lowercase,
-followed by ", ",
-followed by the first specified color,
-followed by a space,
-followed by the serialization of the first percentage (see below)
-followed by ", ",
-followed by the second specified color,
-followed by the serialization of the second percentage (see below),
+The serialization of the declared value of a ''color-mix()'' function is
+the string "color-mix(",
+followed by, unless the <<color-space>> is ''oklab''
+(whether explicitly specified or defaulted):
+	the string "in ",
+	followed by the <<color-space>> in all-lowercase,
+	followed by, if a <<hue-interpolation-method>> was specified
+	and is not ''shorter hue'',
+		" " and the <<hue-interpolation-method>> in all-lowercase,
+	followed by ", ",
+followed by the serialization of each color argument (see below),
+separated by ", ",
 followed by ")".
 
-The serialization of the <strong>first</strong> percentage of a declared value of a ''color-mix()'' function is defined as:
-
-	- If BOTH the first percentage |p1| and second percentage |p2| are specified:
-		- if both |p1| equals 50% and |p2| equals 50%, nothing is serialized. <!-- (a) -->
-		- else, |p1| is serialized as is. <!-- (b) -->
-	- else if ONLY the first percentage |p1| is specified:
-		- if |p1| is equal to 50%, nothing is serialized. <!-- (c) -->
-		- else, |p1| is serialized as is. <!-- (d) -->
-	- else if ONLY the second percentage |p2| is specified:
-		- if |p2| equals 50%, nothing is serialized. <!--  (e) -->
-		- if |p2| is not ''calc()'', the value of 100% - |p2| is serialized. <!-- (f)-->
-		- else, nothing is serialized. <!-- (g) -->
-	- else if NEITHER is specified:
-		- nothing is serialized. <!-- (h) -->
-
-The serialization of the <strong>second</strong> percentage of a declared value of a ''color-mix()'' function is defined as:
-
-	- If BOTH the first percentage p1 and second percentages p2 are specified:
-		- if neither p1 nor p2 is calc(), and p1 + p2 equals 100%, nothing is serialized. <!-- (i) -->
-		- else, p2 is serialized as is. <!-- (j) -->
-	- else if ONLY the first percentage p1 is specified:
-		- nothing is serialized. <!-- (k) -->
-	- else if ONLY the second percentage p2 is specified:
-		- if p2 equals 50%, nothing is serialized. <!-- (l) -->
-		- if p2 is not calc(), nothing is serialized. <!-- (m) -->
-		- else, p2 is serialized as is. <!-- (n) -->
-	- else if NEITHER is specified:
-		- nothing is serialized. <!-- (o) -->
-
-Note: ''calc()'' values are consider to be unknown, 
-so are <strong>never</strong> equal 50%,
-and never sum with something else to equal 100%.
+Each color argument is serialized as
+the serialized <<color>>,
+followed by, if a percentage is serialized for this argument (see below),
+	" " and the serialized percentage.
+
+Each color argument is serialized individually;
+in particular,
+identical colors are not collapsed into a single argument.
+
+The serialized percentages
+of the declared value of a ''color-mix()'' function
+are determined as follows.
+Let |N| be the number of color arguments.
+
+For each argument,
+let its <dfn>effective percentage</dfn> be:
+	- its specified <<percentage>>,
+		if one was explicitly provided
+		and is not a ''calc()'' expression;
+	- if its <<percentage>> was omitted,
+		and none of the other specified <<percentage>>s
+		are ''calc()'' expressions:
+		<code>(100% &minus; |specified sum|) / |omitted count|</code>,
+		where |specified sum| is the sum of the explicitly specified <<percentage>>s
+		and |omitted count| is the number of arguments
+		with omitted <<percentage>>s;
+	- otherwise, unknown.
+
+If all [=effective percentage=]s are known
+and equal to <code>100% / |N|</code>,
+no percentages are serialized.
+Otherwise, each argument's percentage is serialized as follows:
+	- If a <<percentage>> was explicitly specified,
+		it is serialized as-is.
+	- If a <<percentage>> was omitted
+		and none of the other specified <<percentage>>s
+		are ''calc()'' expressions:
+		the value
+		<code>(100% &minus; |specified sum|) / |omitted count|</code>
+		is serialized,
+		where |specified sum| and |omitted count| are as defined above.
+	- Otherwise (a <<percentage>> was omitted
+		but another argument has a ''calc()'' <<percentage>>):
+		nothing is serialized.
+
+Note: ''calc()'' values are considered unknown,
+so are <strong>never</strong> equal to <code>100% / |N|</code>,
+and prevent computation of omitted <<percentage>>s.
 
 <div class="example" id="ex-serial-specified-mix">
 	For example, the serialized declared value of
 	<pre>color-mix(in oklab, teal, peru 40%)</pre>
-	would be the string "color-mix(in oklab, teal 60%, peru)".
+	would be the string "color-mix(teal 60%, peru 40%)":
+	the color space is omitted because it is the default (''oklab''),
+	and all percentages are serialized
+	because they are not all equal to 100%/2 = 50%.
 
 	The serialized declared value of
 	<pre>color-mix(in oklab, teal 50%, peru 50%)</pre>
-	would be the string "color-mix(in oklab, teal, peru)".
+	would be the string "color-mix(teal, peru)":
+	both percentages equal 100%/2 = 50%, so they are all omitted.
 
 	The serialized declared value of
 	<pre>color-mix(in oklab, teal 70%, peru 70%)</pre>
-	would be the string "color-mix(in oklab, teal 70%, peru 70%)"
-	because the fact that these normalize to 50% each
-	is only discovered after percentage normalization.
+	would be the string "color-mix(teal 70%, peru 70%)":
+	the specified percentages are 70%, not 50%,
+	so they are not omitted,
+	even though they normalize to 50% each during computation.
+
+	The serialized declared value of
+	<pre>color-mix(in oklch longer hue, red, green, blue)</pre>
+	would be the string "color-mix(in oklch longer hue, red, green, blue)":
+	the color space (''oklch'') is not the default,
+	the hue interpolation method (''longer'') is not the default (''shorter''),
+	and all percentages equal 100%/3, so they are all omitted.
+
+	The serialized declared value of
+	<pre>color-mix(red 50%, green, blue)</pre>
+	would be the string "color-mix(red 50%, green 25%, blue 25%)":
+	the percentages are not all equal to 100%/3,
+	so all are serialized,
+	including the omitted ones
+	which each get (100% &minus; 50%) / 2 = 25%.
 </div>
 
 The serialization of the result of a ''color-mix()'' function
@@ -3829,6 +3867,14 @@ This specification adds a way to ensure adequate contrast for text whose backgro
 		(<a href="https://github.com/w3c/csswg-drafts/issues/12513">Issue 12513</a>)
 	</li>
 	<li>Added a color-mix() example with three colors, now that it is no longer restricted to just two.</li>
+	<li>Updated color-mix() serialization:
+		omit color space when it is the default (oklab),
+		serialize hue interpolation method when non-default,
+		generalize percentage rules for N colors
+		(omit all when equal to 100%/N, otherwise serialize all),
+		and clarify that identical colors are not collapsed
+		(<a href="https://github.com/w3c/csswg-drafts/issues/13320">Issue 13320</a>)
+	</li>
 </ul>
 
 <h3 id="changes-20250318">