[css-images-4] Make cross-fade() accept 1+ arguments. w3c#11530

Author: tabatkins

css-images-4/Overview.bs

@@ -564,14 +564,15 @@ Image Fallbacks and Annotations: the ''image()'' notation {#image-notation}
 	</div>
 
 
-<!--
- ██████  ████████   ███████   ██████   ██████          ████████    ███    ████████  ████████   ███ ███
-██    ██ ██     ██ ██     ██ ██    ██ ██    ██         ██         ██ ██   ██     ██ ██        ██     ██
-██       ██     ██ ██     ██ ██       ██               ██        ██   ██  ██     ██ ██       ██       ██
-██       ████████  ██     ██  ██████   ██████  ███████ ██████   ██     ██ ██     ██ ██████   ██       ██
-██       ██   ██   ██     ██       ██       ██         ██       █████████ ██     ██ ██       ██       ██
-██    ██ ██    ██  ██     ██ ██    ██ ██    ██         ██       ██     ██ ██     ██ ██        ██     ██
- ██████  ██     ██  ███████   ██████   ██████          ██       ██     ██ ████████  ████████   ███ ███
+<!-- Big Text: cross-fade
+
+ ███▌  ████▌   ███▌   ███▌   ███▌        █████▌  ███▌  ████▌  █████▌
+█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌       █▌     ▐█ ▐█  █▌  █▌ █▌
+█▌     █▌  █▌ █▌  █▌ █▌     █▌           █▌     █▌  █▌ █▌  █▌ █▌
+█▌     ████▌  █▌  █▌  ███▌   ███▌  ████▌ ████   █▌  █▌ █▌  █▌ ████
+█▌     █▌▐█   █▌  █▌     █▌     █▌       █▌     █████▌ █▌  █▌ █▌
+█▌  █▌ █▌ ▐█  █▌  █▌ █▌  █▌ █▌  █▌       █▌     █▌  █▌ █▌  █▌ █▌
+ ███▌  █▌  █▌  ███▌   ███▌   ███▌        █▌     █▌  █▌ ████▌  █████▌
 -->
 
 Combining images: the ''cross-fade()'' notation {#cross-fade-function}
@@ -647,37 +648,35 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 	<div algorithm>
 		To determine the <dfn export>[=natural dimensions=] of a cross-fade()</dfn>:
 
-		1. Let |images| be an empty list.
+		1. [=Normalize mix percentages=] from the function's arguments,
+			and let |args| and |leftover| be the result.
+
+		2. If |leftover| is 100%,
+			return no [=natural dimensions=].
 
-		2. For each |argument| of the ''cross-fade()'' function with an <<image>> value:
-			1. Let |item| be a [=tuple=] consisting of a width, a height, and a percentage.
-			2. Run the [=object size negotiation=] algorithm for the <<image>>,
+		3. Let |images| be an empty list.
+
+		4. For each <<cf-image>> |argument| of the function's arguments:
+			1. If |argument| is not an <<image>>,
+				or is an <<image>> with no natural dimensions,
+				[=iteration/continue=].
+			2. Let |item| be a [=tuple=] consisting of a width, a height, and a percentage.
+			3. Run the [=object size negotiation=] algorithm for the <<image>>,
 				as appropriate for the context in which the ''cross-fade()'' appears,
 				and set |item|’s width and height
 				to the width and height of the resulting [=concrete object size=].
-			3. Set |item|’s percentage to the |argument|’s percentage.
+			4. Set |item|’s percentage to the |argument|’s percentage.
 
-		3. If |images| is empty,
+		5. If |images| is empty,
 			return no [=natural dimensions=].
 
-		4. Let |percentage sum| be the sum of all the percentages of the [=list/items=] in |images|.
-
-		5. [=list/For each=] |item| in |images|,
-			divide |item|’s percentage by |percentage sum|,
-			and set |item|’s percentage to the result.
+		6. Return a [=natural width=] and [=natural height=]
+			that are weighted averages of the width and height
+			of each item in |images|,
+			according to their corresponding percentages.
 
-			Assert: The percentages in |images| now sum to ''100%''.
-
-		6. Let |final width| and |final height| be ''0px''.
-
-		7. [=list/For each=] |item| in |images|,
-			multiply |item|’s width by |item|’s percentage
-			and add the result to |final width|,
-			and multiply |item|’s height by |item|’s percentage
-			and add the result to |final height|.
-
-		8. Return a [=natural width=] of |final width|
-			and a [=natural height=] of |final height|.
+			Note: The percentages might sum to a value less than 100%,
+			so a naive weighted-averaging process might need to normalize them first.
 	</div>
 
 ### ''cross-fade()'' Painting ### {#cross-fade-painting}
@@ -686,10 +685,12 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 	is a weighted average of the input arguments to the function,
 	calculated as follows:
 
-
 	<div algorithm>
 		To determine the <dfn export>appearance of a cross-fade()</dfn>:
 
+		1. [=Normalize mix percentages=] from the function's arguments,
+			and let |args| and |leftover| be the result.
+
 		1. Let |images| be an empty list.
 
 		2. Let |size| be a [=tuple=] of width and height,
@@ -707,19 +708,11 @@ Combining images: the ''cross-fade()'' notation {#cross-fade-function}
 				with |size|’s dimensions.
 			3. Set |item|’s percentage to the |argument|’s percentage.
 
-		4. Let |percentage sum| be the sum of all the percentages of the [=list/items=] in |images|.
-
-		5. If |percentage sum| is less than ''100%'',
+		5. If |leftover| is greater than ''0%'',
 			append a [=tuple=] to |images|
 			consisting of a solid-color transparent-black image
 			with |size|’s dimensions,
-			and a percentage equal to ''100%'' minus |percentage sum|.
-
-			Otherwise,
-			if |percentage sum| is greater than ''100%'',
-			then [=list/for each=] |item| in |images|,
-			divide |item|’s percentage by |percentage sum|,
-			and set |item|’s percentage to the result.
+			and a percentage equal to |leftover|.
 
 		6. Let |final image| be an image
 			with |size|’s dimensions,