[css-values-4] Add generic interpolation function. #581 #2854

css-values-4/Overview.bs

@@ -449,6 +449,44 @@ Combining Values: Interpolation, Addition, and Accumulation</h2>
 	If a value type does not define a specific procedure for <a>accumulation</a>,
 	its <a>accumulation</a> operation is identical to <a>addition</a>.
 
+<h3 id="mix">
+Representing Interpolated Values: the ''mix()'' notation</h3>
+
+	[=Interpolation=] of two values can be represented
+	by the <dfn>mix()</dfn> [=functional notation=],
+	whose syntax is defined as follows:
+
+	<pre class="prod">
+		mix( <<percentage>> ; <<start-value>> ; <<end-value )
+	</pre>
+
+	<dl dfn-for="mix()">
+		<dt><dfn value><<percentage>></dfn>
+		<dd>
+			Represents the interpolation point
+			as progress from <<start-value>> to <<end-value>>.
+
+		<dt><dfn type noexport><<start-value>></dfn>
+		<dd>
+			The value at the “start” (0%) of the interpolation range.
+
+		<dt><dfn type noexport><<end-value>></dfn>
+		<dd>
+			The value at the “end” (100%) of the interpolation range.
+	</dl>
+
+	Note: This [=functional notation=] uses semicolons to separate arguments
+	rather than the more typical comma
+	because the values themselves can contain commas.
+
+	A ''mix()'' notation is invalid if either its <<start-value>> or <<end-value>>
+	is invalid if substituted in its place,
+	or if the property using it is [=not animatable=].
+
+	ISSUE: Define more precisely where mix() is allowed.
+	Is it a top-level functional notation only?
+	Or can it be nested more deeply in the grammar somehow?
+
 <h3 id="combining-range">
 Range Checking</h3>