CSS Color 4 color spaces for canvasGradient

source

@@ -65594,10 +65594,39 @@ interface mixin <dfn interface>CanvasPath</dfn> {
   undefined <span data-x="dom-context-2d-ellipse">ellipse</span>(unrestricted double x, unrestricted double y, unrestricted double radiusX, unrestricted double radiusY, unrestricted double rotation, unrestricted double startAngle, unrestricted double endAngle, optional boolean counterclockwise = false); <!-- see ARC-ORDER note below -->
 };
 
+// <dfn data-x-href="https://www.w3.org/TR/css-color-4/#predefined">CSS Predefined Color Spaces</dfn>
+enum <dfn enum>ColorInterpolationMethod</dfn> {
+  "srgb",
+  "hsl",
+  "hwb",
+  "srgb-linear",
+  "display-p3",
+  "a98-rgb",
+  "prophoto-rgb",
+  "rec2020",
+  "lab",
+  "oklab",
+  "lch",
+  "oklch",
+  "xyz",
+  "xyz-d50",
+  "xyz-d65"
+ };
+
+ // <dfn data-x-href="https://www.w3.org/TR/css-color-4/#hue-interpolation">CSS Hue Interpolation Method</dfn>
+enum <dfn enum>HueInterpolationMethod</dfn> {
+  "shorter",
+  "longer",
+  "increasing",
+  "decreasing"
+}
+
 [Exposed=(Window,Worker)]
 interface <dfn interface>CanvasGradient</dfn> {
-  // opaque object
   undefined <span data-x="dom-canvasgradient-addColorStop">addColorStop</span>(double offset, DOMString color);
+  attribute ColorInterpolationMethod colorInterpolationMethod; // (default "srgb")
+  attribute HueInterpolationMethod hueInterpolationMethod; // (default "shorter", only applicable to "hsl", "hwb", "lch" and "oklch")
+  attribute boolean <dfn data-x="canvas-gradient-premultipliedAlpha">premultipliedAlpha</dfn> = false;
 };
 
 [Exposed=(Window,Worker)]
@@ -68721,15 +68750,19 @@ try {
   <hr>
 
   <p>There are three types of gradients, linear gradients, radial gradients, and conic gradients,
-  represented by objects implementing the opaque <code>CanvasGradient</code> interface.</p>
+  represented by objects implementing the <code>CanvasGradient</code> interface.</p>
 
   <p id="interpolation">Once a gradient has been created (see below), stops are placed along it to
-  define how the colors are distributed along the gradient. <span w-nodev>The color of the
-  gradient at each stop is the color specified for that stop. Between each such stop, the colors and
-  the alpha component must be linearly interpolated over the RGBA space without premultiplying the
-  alpha value to find the color to use at that offset. Before the first stop, the color must be the
-  color of the first stop. After the last stop, the color must be the color of the last stop. When
-  there are no stops, the gradient is <span>transparent black</span>.</span></p>
+  define how the colors are distributed along the gradient. <span w-nodev>The color of the gradient
+  at each stop is the color specified for that stop. Between each such stop, the colors and the alpha
+  component must be linearly interpolated over the <span
+  data-x="ColorInterpolationMethod">ColorInterpolationMethod</span> color space to find the color to
+  use at that offset. Color values are premultiplied by alpha if the <span
+  data-x="canvas-gradient-premultipliedAlpha">premultipliedAlpha</span> value is true. For polar
+  color spaces, hue is interpolated according to the <span
+  data-x="HueInterpolationMethod">HueInterpolationMethod</span>. Before the first stop, the color
+  must be the color of the first stop. After the last stop, the color must be the color of the last
+  stop. When there are no stops, the gradient is <span>transparent black</span>.</span></p>
 
   <dl class="domintro">
    <dt><code data-x=""><var>gradient</var>.<span subdfn data-x="dom-canvasgradient-addColorStop">addColorStop</span>(<var>offset</var>, <var>color</var>)</code></dt>
@@ -68760,11 +68793,38 @@ try {
     <code>DOMException</code> exception.</p>
    </dd>
 
-   <dt><code data-x=""><var>gradient</var> = <var>context</var>.<span subdfn data-x="dom-context-2d-createConicGradient">createConicGradient</span>(<var>startAngle</var>, <var>x</var>, <var>y</var>)</code></dt>
+    <dt><code data-x=""><var>gradient</var>.<span data-x="ColorInterpolationMethod">colorInterpolationMethod</span> [ = <var>value</var> ]</code></dt>
 
-   <dd><p>Returns a <code>CanvasGradient</code> object that represents a conic gradient that paints
-   clockwise along the rotation around the center represented by the arguments.</p></dd>
-  </dl>
+    <dd>
+     <p>Returns the current color space used for interpolation.</p>
+
+     <p>Can be set, to change the space used for color interpolation. Possible values are enumerated
+     in the <span data-x="ColorInterpolationMethod">ColorInterpolationMethod</span> enum. Other
+     values are ignored.</p>
+    </dd>
+
+    <dt><code data-x=""><var>gradient</var>.<span data-x="HueInterpolationMethod">hueInterpolationMethod</span> [ = <var>value</var> ]</code></dt>
+
+    <dd>
+     <p>Returns the current hue interpolation method.</p>
+
+     <p>Can be set, to change the <span
+     data-x="HueInterpolationMethod">hueInterpolationMethod</span>.</p>
+
+     <p>Possible hue interpolation method values are "shorter", "longer", "increasing", or
+     "decreasing". Other values are ignored.</p>
+    </dd>
+
+    <dt><code data-x=""><var>gradient</var>.<span data-x="canvas-gradient-premultipliedAlpha">premultipliedAlpha</span> [ = <var>value</var> ]</code></dt>
+
+    <dd>
+     <p>Returns true if the gradient will interpolate using <span
+     data-x="concept-premultiplied-alpha">premultiplied alpha</span>. Otherwise returns false.</p>
+
+     <p>Can be set, to change the <span
+     data-x="canvas-gradient-premultipliedAlpha">premultipliedAlpha</span> value.</p>
+    </dd>
+   </dl>
 
   <div w-nodev>