[css-images-4] Add <color-interpolation-method> to all gradient functions, closes #6667 #6094

Also moved premultiplied section to css-color-4.

Author: LeaVerou

css-color-4/Overview.bs

@@ -5057,6 +5057,58 @@ Interpolating with alpha</h3>
 	each component which had been premultiplied
 	is divided by the interpolated alpha value.
 
+	<details class=note id=premultiplied>
+		<summary>Why is premultiplied alpha useful?</summary>
+
+		<!-- A “pre-multiplied” color
+		is written in a form
+		where the alpha channel
+		is multiplied into the color channels,
+		rather than being processed independently.
+		For example, a partially-transparent blue may be given as <code class=lang-css><nobr>rgba(0, 0, 255, .5)</nobr></code>,
+		which would then be expressed as <code><nobr>[0, 0, 127.5, .5]</nobr></code> in its premultiplied representation. -->
+
+		Interpolating colors using the premultiplied representations
+		tends to produce more attractive transitions than the non-premultiplied representations,
+		particularly when transitioning from a fully opaque color to fully transparent.
+
+		Note that transitions where either the transparency or the color are held constant
+		(for example, transitioning between <code class=lang-css><nobr>rgba(255, 0, 0, 100%)</nobr></code> (opaque red)
+		and <code class=lang-css><nobr>rgba(0,0,255,100%)</nobr></code> (opaque blue),
+		or <code class=lang-css><nobr>rgba(255,0,0,100%)</nobr></code> (opaque red)
+		and <code class=lang-css><nobr>rgba(255,0,0,0%)</nobr></code> (transparent red))
+		have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space.
+		Differences only arise when <em>both</em> the color and transparency differ between the two endpoints.
+
+		<div class=example>
+			The following example illustrates the difference between
+			a gradient transitioning via pre-multiplied values
+			(in this case sRGB, since all colors involved are legacy colors)
+			and one transitioning (incorrectly) via non-premultiplied values.
+			In both of these examples,
+			the gradient is drawn over a white background.
+			Both gradients could be written with the following value:
+
+			<pre>linear-gradient(90deg, red, transparent, blue)</pre>
+
+			With premultiplied colors,
+			transitions to or from "transparent" always look nice:
+
+			<object data="images/gradient2.svg" width="200" height="100">(Image requires SVG)</object>
+
+			On the other hand,
+			if a gradient were to incorrectly transition in non-premultiplied space,
+			the center of the gradient would be a noticeably grayish color,
+			because "transparent" is actually a shorthand for ''rgba(0,0,0,0)'', or transparent black,
+			meaning that the red transitions to a black
+			as it loses opacity,
+			and similarly with the blue's transition:
+
+			<object data="images/gradient3.svg" width="200" height="100">(Image requires SVG)</object>
+		</div>
+
+	</details>
+
 	<div class="example" id="ex-premultiplied-srgb">
 		For example, to interpolate, in the sRGB color space, the two sRGB colors
 		<span class="swatch" style="--color: rgb(24%, 12%, 98%, 0.4)"></span> rgb(24% 12% 98% / 0.4)

css-images-4/images/gradient2.svg css-color-4/images/gradient2.svgcss-images-4/images/gradient2.svg renamed to css-color-4/images/gradient2.svg

@@ -23,6 +23,7 @@ Default Highlight: css
 </pre>
 
 <pre class=link-defaults>
+spec: css-color-4; type: type; text: <color-interpolation-method>
 spec: css-images-3;
 	type: function;
 		text: image-set();
@@ -1181,7 +1182,16 @@ Gradients</h2>
 Linear Gradients: the ''linear-gradient()'' notation {#linear-gradients}
 ------------------------------------------------------------------------
 
-Note: No change from [[css3-images]].
+Compared to [[css3-images]], this level adds a <<color-interpolation-method>> token
+to customize color interpolation in gradients as described in [[css-color-4#interpolation]].
+
+<pre class=prod>
+		<dfn>linear-gradient()</dfn> = linear-gradient(
+			[ <<angle>> | to <<side-or-corner>> ]? || <<color-interpolation-method>>,
+			<<color-stop-list>>
+		)
+		<dfn>&lt;side-or-corner></dfn> = [left | right] || [top | bottom]
+	</pre>
 
 <!--
 ████████     ███    ████████  ████    ███    ██
@@ -1197,7 +1207,15 @@ Note: No change from [[css3-images]].
 Radial Gradients: the ''radial-gradient()'' notation {#radial-gradients}
 ------------------------------------------------------------------------
 
-Note: No change from [[css3-images]].
+Compared to [[css3-images]], this level adds a <<color-interpolation-method>> token
+to customize color interpolation in gradients as described in [[css-color-4#interpolation]].
+
+<pre class=prod>
+		<dfn>radial-gradient()</dfn> = radial-gradient(
+		  [[ <<ending-shape>> || <<size>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>,
+		  <<color-stop-list>>
+		)
+	</pre>
 
 <!--
  ██████   ███████  ██    ██ ████  ██████
@@ -1250,7 +1268,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 
 	<pre class='prod'>
 		<dfn>conic-gradient()</dfn> = conic-gradient(
-			[ from <<angle>> ]? [ at <<position>> ]?,
+			[ [ from <<angle>> ]? [ at <<position>> ]? ] || <<color-interpolation-method>>,
 			<<angular-color-stop-list>>
 		)
 	</pre>
@@ -1570,7 +1588,11 @@ Coloring the Gradient Line</h4>
 	the [=gradient line=] is the color of the last <a>color stop</a>.
 	Between two <a>color stops</a>,
 	the [=gradient line’s=] color is interpolated between the colors of the two <a>color stops</a>,
-	with the interpolation taking place in <a href="#premultiplied">premultiplied RGBA space</a>.
+	with the interpolation taking place in the specified color space,
+	using premultiplied alpha, as defined in [[css-color-4#interpolation-alpha]].
+	If no <<color-interpolation-method>> is specified in the gradient function,
+	the color space used for gradient interpolation
+	is the default interpolation color space as defined in [[css-color-4]].
 
 	By default,
 	this interpolation is linear--
@@ -1624,60 +1646,6 @@ Coloring the Gradient Line</h4>
 	to the one specified last.
 	In effect, the color suddenly changes at that position rather than smoothly transitioning.
 
-	<details class=note id=premultiplied>
-		<summary>What does “pre-multiplied” mean?</summary>
-
-		A “pre-multiplied” color
-		is written in a form
-		where the alpha channel
-		is multiplied into the color channels,
-		rather than being processed independently.
-		For example, a partially-transparent blue may be given as <code class=lang-css><nobr>rgba(0, 0, 255, .5)</nobr></code>,
-		which would then be expressed as <code><nobr>[0, 0, 127.5, .5]</nobr></code> in its premultiplied representation.
-
-		Interpolating colors using the premultiplied representations
-		rather than the plain rgba representations
-		tends to produce more attractive transitions,
-		particularly when transitioning from a fully opaque color to fully transparent.
-
-		Note that transitions where either the transparency or the color are held constant
-		(for example, transitioning between <code class=lang-css><nobr>rgba(255, 0, 0, 100%)</nobr></code> (opaque red)
-		and <code class=lang-css><nobr>rgba(0,0,255,100%)</nobr></code> (opaque blue),
-		or <code class=lang-css><nobr>rgba(255,0,0,100%)</nobr></code> (opaque red)
-		and <code class=lang-css><nobr>rgba(255,0,0,0%)</nobr></code> (transparent red))
-		have identical results whether the color interpolation is done in premultiplied or non-premultiplied color-space.
-		Differences only arise when <em>both</em> the color and transparency differ between the two endpoints.
-
-		<div class=example>
-			The following example illustrates the difference between
-			a gradient transitioning in pre-multiplied sRGBA
-			and one transitioning (incorrectly) in non-premultiplied.
-			In both of these example,
-			the gradient is drawn over a white background.
-			Both gradients could be written with the following value:
-
-			<pre>linear-gradient(90deg, red, transparent, blue)</pre>
-
-			With premultiplied colors,
-			transitions to or from "transparent" always look nice:
-
-			<object data="images/gradient2.svg" width="200"height="100">(Image requires SVG)</object>
-
-			On the other hand,
-			if a gradient were to incorrectly transition in non-premultiplied space,
-			the center of the gradient would be a noticeably grayish color,
-			because "transparent" is actually a shorthand for ''rgba(0,0,0,0)'', or transparent black,
-			meaning that the red transitions to a black
-			as it loses opacity,
-			and similarly with the blue's transition:
-
-			<object data="images/gradient3.svg" width="200"height="100">(Image requires SVG)</object>
-		</div>
-
-	</details>
-
-
-
 <h4 id=color-stop-fixup>
 Color Stop “Fixup”</h4>