[css-color-5] Make color-mix() accept 1+ arguments, to match *-mix() in general. w3c#11530

Author: tabatkins

css-color-5/Overview.bs

@@ -216,7 +216,7 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
 
 
 <pre class='prod'>
-	<dfn>color-mix()</dfn> = color-mix( <<color-interpolation-method>> , [ <<color>> && <<percentage [0,100]>>? ]#{2})
+	<dfn>color-mix()</dfn> = color-mix( <<color-interpolation-method>> , [ <<color>> && <<percentage [0,100]>>? ]#)
 </pre>
 
 <wpt>
@@ -229,24 +229,9 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
 	Percentage Normalization
 </h3>
 
-	Percentages are required to be in the range 0% to 100%. Negative percentages are specifically disallowed. The percentages are normalized as follows:
-
-	1. Let <var>p1</var> be the first percentage and <var>p2</var> the second one.
-	2. If both percentages are omitted, they each default to 50%
-		(an equal mix of the two colors).
-	3. Otherwise, if <var>p2</var> is omitted, it becomes 100% - <var>p1</var>
-	4. Otherwise, if <var>p1</var> is omitted, it becomes 100% - <var>p2</var>
-	5. Otherwise, if both are provided and add up to greater than 100%,
-		they are scaled accordingly so that they add up to 100%.
-	6. Otherwise, if both are provided and add up to less than 100%,
-		the sum is saved as an alpha multiplier.
-		If the sum is greater than zero,
-		they are then scaled accordingly so that they add up to 100%.
-
-	This means that
-	<var>p1</var> becomes <var>p1</var> / (<var>p1</var> + <var>p2</var>)
-	and
-	<var>p2</var> becomes <var>p2</var> / (<var>p1</var> + <var>p2</var>).
+	Percentages are required to be in the range 0% to 100%.
+	Negative percentages are specifically disallowed.
+	Percentages are normalized by [=normalizing mix percentages=].
 
 <wpt>
 	color-mix-percents-01.html
@@ -282,23 +267,53 @@ Mixing Colors: the ''color-mix()'' Function {#color-mix}
 	Calculating the Result of color-mix
 </h3>
 
-After normalizing both percentages, the result is produced via the following algorithm:
-
-1. If the alpha multiplier is zero, the result is ''transparent'', converted to the specified interpolation <<color-space>>
-2. Otherwise, as described in [[css-color-4#interpolation]],
-	both colors are converted to the specified interpolation <<color-space>>,
-	taking into account any [=analogous components=].
-3. Colors are then interpolated in the 	specified color space,
-	as described in [[css-color-4#interpolation]].
-	If the specified color space is a ''cylindrical-polar-color'' space,
-	then the <<hue-interpolation-method>> controls the
-	interpolation of hue, as described in
-	[[css-color-4#hue-interpolation]].
-	If no <<hue-interpolation-method>> is specified, it is as if
-	''shorter'' had been specified.
-4. If an alpha multiplier was produced during percentage normalization,
-	the alpha component of the interpolated result is multiplied
-	by the alpha multiplier.
+<div algorithm>
+	To <dfn export>calculate a color-mix()</dfn>:
+
+	1. [=Normalize mix percentages=] from the list of [=mix items=] passed to the function,
+		letting |items| and |leftover| be the result.
+	2. Let |alpha mult| be <code>1 - |leftover|</code>,
+		interpreting |leftover| as a number between 0 and 1.
+	3. If |alpha mult| is 0,
+		return [=transparent black=],
+		converted to the specified interpolation <<color-space>>.
+	4. If |items| is length 1,
+		set |color| to the color of that sole item.
+
+		Otherwise:
+
+		1. Let |item stack| be a [=/stack=] made by reversing |items|.
+			(Thus, with the first item at the top of the stack.)
+		2. While |item stack| has length 2 or greater:
+			1. [=stack/Pop=] from |item stack| twice,
+				letting |a| and |b| be the two results in order.
+				Let |combined percentage| be the sum of |a| and |b|’s percentages.
+			2. Interpolate |a| and |b|’s colors
+				as described in [[css-color-4#interpolation]],
+				with a progress percentage equal to <code>(|b|’s percentage) / |combined percentage|)</code>.
+				If the specified color space is a [=cylindrical polar color=] space,
+				then the <<hue-interpolation-method>> controls the
+				interpolation of hue, as described in
+				[[css-color-4#hue-interpolation]].
+				If no <<hue-interpolation-method>> is specified,
+				assume ''shorter''.
+			3. Create a new [=mix item=] with the resulting color
+				and a percentage of |combined percentage|,
+				and [=stack/push=] it onto |item stack|.
+		3. Set |color| to the color of the sole remaining item in |item stack|.
+	5. Multiply the alpha component of |color| by |alpha mult|.
+	6. Return |color|.
+
+	Note: In [=cylindrical polar color=] spaces,
+	mixing is order-dependent,
+	as which direction is “shorter” or “longer” around the hue circle
+	can change depending on what other mixes have already been performed.
+	This algorithm mixes each color in the specified order,
+	mixing the result with the next in the list.
+	For [=rectangular orthogonal color=] spaces,
+	the order doesn't matter,
+	and the process can be simplified.
+</div>
 
 <wpt>
 	color-mix-basic-001.html