[css-images-4] Described how to interpolate between fr units and lengths or percentages (w3c#9767)

Author: SebastianZ

css-images-4/Overview.bs

@@ -2919,25 +2919,14 @@ Interpolating ''stripes()'' {#interpolating-stripes}
 	Similar to gradients,
 	two ''stripes()'' can be interpolated,
 	allowing for smooth animations from one image to another.
-	There are only a few restrictions on what ''stripes()'' are allowed to be interpolated:
-
-	1. Both the starting and ending image must have the same number of <<color-stripe>>s.
-
-	2. Each pair of interpolated thicknesses must be of the same type,
-		i.e. both must either be of type <<length-percentage>>, or <<flex>>.
-
-	If the two images satisfy both constraints,
+	There is only one restriction on what ''stripes()'' are allowed to be interpolated.
+	Both the starting and ending image must have the same number of <<color-stripe>>s.
+	If the two images satisfy this constraint,
 	they must be interpolated as described below.
-	If they fail the second one only,
-	they must be abruptly transitioned at 50%
-	(unless otherwise specified by a future specification).
-	If they fail the first constraint,
+	If they fail the constraint,
 	they must be interpolated using ''cross-fade()''
 	as for generic images.
 
-	Note: The abrupt transition at 50% is so that content will not rely on cross-fading,
-	and smarter interpolation rules can be added for this case in the future.
-
 	1. Interpolate each component and stripe of the images independently.
 
 	2. To interpolate a stripe,
@@ -2946,6 +2935,13 @@ Interpolating ''stripes()'' {#interpolating-stripes}
 		Then, for each pair of stripes,
 		interpolate the thickness
 		and color independently.
+		<<flex>> values are interpolated as <<length-percentage>>s using the following formula:
+
+		<pre>max(0, 100% - sum-of-percents - sum-of-fixed) * flex value / max(1, sum-of-flexes)</pre>
+
+		where ''sum-of-percents'' is the sum of all <<percentage>>s in the ''stripes()'' function,
+		''sum-of-fixed'' is the sum of all fixed <<length>>s in the function,
+		and ''sum-of-flexes'' is the sum of all <<flex>> values.
 
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██