[css-images] Define the color-hint functionality that Rik presented.

--HG--
extra : rebase_source : a34f16f9cb06b70a0cddb329628042f451a675b6

Author: tabatkins

css-images/Overview.bs

@@ -1677,20 +1677,33 @@ Gradient Color-Stops</h3>
 
 	<pre class=prod>
 		<dfn>&lt;color-stop-list></dfn> =
-			<<cap-linear-color-stop>> , [ <<linear-color-stop>># , ]? <<cap-linear-color-stop>>
-		<dfn>&lt;cap-linear-color-stop></dfn> = <<color>> &amp;&amp; <<color-stop-length>>?
-		<dfn>&lt;linear-color-stop></dfn> = <<color>> || <<color-stop-length>>
+			[ <<linear-color-stop>> , <<linear-color-hint>>? ]# , <<linear-color-stop>>
+		<dfn>&lt;linear-color-stop></dfn> = <<color>> && <<color-stop-length>>
+		<dfn>&lt;linear-color-hint></dfn> = <<length>> | <<percentage>>
 		<dfn>&lt;color-stop-length></dfn> = [ <<length>> | <<percentage>> ]{1,2}
 
 		<dfn>&lt;angular-color-stop-list></dfn> =
-			<<cap-angular-color-stop>> , [ <<angular-color-stop>># , ]? <<cap-angular-color-stop>>H
-		<dfn>&lt;cap-angular-color-stop></dfn> = <<color>> &amp;&amp; <<color-stop-angle>>?
-		<dfn>&lt;angular-color-stop></dfn> = <<color>> || <<color-stop-angle>>
+			[ <<angular-color-stop>> , <<angular-color-hint>>? ]# , <<angular-color-stop>>
+		<dfn>&lt;angular-color-stop></dfn> = <<color>> && <<color-stop-angle>>?
+		<dfn>&lt;angular-color-hint></dfn> = <<angle>> | <<percentage>>
 		<dfn>&lt;color-stop-angle></dfn> = [ <<angle>> | <<percentage>> ]{1,2}
 
 		<dfn>&lt;color-stop></dfn> = <<color-stop-length>> | <<color-stop-angle>>
 	</pre>
 
+	<pre class='railroad'>
+		Plus:
+			Sequence:
+				N: <color-stop>
+				T: ,
+				Choice: 1
+					N: <color-hint>
+					Skip:
+			T: ,
+		N: <color-stop>
+	</pre>
+
+
 	<p class='issue'>
 		This is past the complexity point where it can be easily understood with just prose.
 		Add a diagram illustrating the possibilities,
@@ -1700,9 +1713,18 @@ Gradient Color-Stops</h3>
 	The colors in gradients are specified using <a>color stops</a>.
 	A <dfn export>color stop</dfn> is a combination of a color and one or two positions.
 	(Depending on the type of gradient, that position can be a length, angle, or percentage.)
-	While every color stop conceptually has both of these,
-	either of them can be omitted when writing a stylesheet.
-	(The missing parts are automatically filled in by the user agent.)
+	While every color stop conceptually has at least one position,
+	the position can be omitted in the syntax.
+	(It gets automatically filled in by the user agent; see below for details.)
+
+	Some <a>color stops</a> don't have a color,
+	only a position.
+	A <a>color stop</a> like this is a <dfn>color interpolation hint</dfn>,
+	which specifies how the colors of the two <a>color stops</a> on either side
+	should be interpolated in the space between them
+	(by default, they interpolate linearly).
+	There can only be at most one <a>color interpolation hint</a> between any two given normal <a>color stops</a>;
+	using more than that makes the function invalid.
 
 	Color stops are organized into a <dfn export>color stop list</dfn>,
 	which is a list of one or more <a>color stops</a>.
@@ -1732,7 +1754,7 @@ Gradient Color-Stops</h3>
 	to specifying two <a>color stops</a> with the same color,
 	one for each position.
 	However, if the color is omitted,
-	it's treated slightly differently by step 4 in the clean-up algorithm below.
+	it's treated as a single <a>color stop</a> by step 4 in the clean-up algorithm below.
 	<span class='note'>Specifying two locations makes it easier to create solid-color "stripes" in a gradient,
 		without having to repeat the color twice.</span>
 
@@ -1793,8 +1815,48 @@ Gradient Color-Stops</h3>
 	At each <a>color stop</a> position,
 	the line is the color of the <a>color stop</a>.
 	Between two <a>color stops</a>,
-	the line's color is linearly interpolated between the colors of the two <a>color stops</a>,
+	the line's color is interpolated between the colors of the two <a>color stops</a>,
 	with the interpolation taking place in premultiplied RGBA space.
+
+	By default,
+	this interpolation is linear--
+	at 25%, 50%, or 75% of the distance between two <a>color stops</a>,
+	the color is a 25%, 50%, or 75% blend of the colors of the two stops.
+
+	However, if a <a>color interpolation hint</a> was provided between two <a>color stops</a>,
+	the interpolation is non-linear,
+	and controlled by the hint:
+
+	<ol>
+		<li>
+			Determine the location of the hint as a percentage of the distance between the two <a>color stops</a>,
+			denoted as a number between 0 and 1,
+			where 0 indicates the hint is placed right on the first <a>color stop</a>,
+			and 1 indicates the hint is placed right on the second <a>color stop</a>.
+			Let this percentage be <var>H</var>.
+
+		<li>
+			For any given point between the two color stops,
+			determine the point's location as a percetnage of the distance between the two <a>color stops</a>,
+			in the same way as the previous step.
+			Let this percentage be <var>P</var>.
+
+		<li>
+			Let <var>C</var>, the color weighting at that point,
+			be equal to <code>P<sup>log<sub>.5</sub>(H)</sup></code>.
+
+		<li>
+			The color at that point is then a linear blend between the colors of the two <a>color stops</a>,
+			blending <code>(1 - C)</code> of the first stop and <var>C</var> of the second stop.
+	</ol>
+
+	Note: If the hint is placed halfway between the two stops,
+	this is thus the ordinary linear interpolation.
+	If the hint is placed anywhere else,
+	it dictates the position of the "halfway point",
+	where the color is an equal blend between the two <a>color stops</a>,
+	and produces smooth, even blends between the <a>color stops</a> and the "halfway point".
+
 	Before the first <a>color stop</a>,
 	the line is the color of the first <a>color stop</a>.
 	After the last <a>color stop</a>, the line is the color of the last <a>color stop</a>.