Update 2D canvas color serialization

Although fillStyle, strokeStyle, and shadowColor setters accepted all kinds of CSS color values, those could not be serialized. Update that by relying on CSS Color for serialization instead, which now has an HTML-compatible serialization method to preserve compatibility with 2D canvas and <input type=color> for certain colors.

While here, also link the algorithm to be used for color space conversion and correct the reference for 'relative-colorimetric'.

Tests: web-platform-tests/wpt#47148.

Fixes whatwg#8917.

Author: annevk

source

@@ -3697,8 +3697,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#transparent-black">transparent black</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-srgb">'srgb'</dfn> color space</li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-display-p3">'display-p3'</dfn> color space</li>
-     <li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-color-5/#valdef-color-profile-rendering-intent-relative-colorimetric">'relative-colorimetric'</dfn> rendering intent</li>
      <li><dfn id="parsed-as-a-css-color-value" data-x-href="https://drafts.csswg.org/css-color/#parse-a-css-color-value">parse a CSS &lt;color> value</dfn></li>
+     <li><!--en-GB--><dfn id="serialisation-of-a-color" data-x-href="https://drafts.csswg.org/css-color/#serializing-color-values">serialize a CSS &lt;color> value</dfn> including <dfn data-x-href="https://drafts.csswg.org/css-color/#color-serialization-html-compatible-serialization-is-requested">HTML-compatible serialization is requested</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-color/#color-conversion">Converting Colors</dfn></li>
     </ul>
 
     <p>The following terms are defined in <cite>CSS Images</cite>: <ref>CSSIMAGES</ref></p>
@@ -65181,9 +65183,8 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
   data-x="dom-PredefinedColorSpace-display-p3">display-p3</code></dfn>" value indicates the
   <span>'display-p3'</span> color space.</p>
 
-  <p class="note">Algorithms for converting between color spaces are found in the <a
-  href="https://drafts.csswg.org/css-color/#predefined">Predefined color spaces</a> section of
-  <cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>
+  <p class="note">The algorithm for converting between color spaces can be found in the
+  <span>Converting Colors</span> section of <cite>CSS Color</cite>. <ref>CSSCOLOR</ref></p>
 
   <hr>
 
@@ -67879,8 +67880,9 @@ try {
 
   <ol>
    <li><p>If <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill
-   style</span> is a CSS color, then return the <span data-x="serialization of a
-   color">serialization</span> of that color.</p></li>
+   style</span> is a CSS color, then return the <span data-x="serialize a CSS &lt;color>
+   value">serialization</span> of that color with <span data-x="HTML-compatible serialization is
+   requested">HTML-compatible serialization requested</span>.</p></li>
 
    <li><p>Return <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill
    style</span>.</p></li>
@@ -67923,8 +67925,9 @@ try {
 
   <ol>
    <li><p>If <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke
-   style</span> is a CSS color, then return the <span data-x="serialization of a
-   color">serialization</span> of that color.</p></li>
+   style</span> is a CSS color, then return the <span data-x="serialize a CSS &lt;color>
+   value">serialization</span> of that color with <span data-x="HTML-compatible serialization is
+   requested">HTML-compatible serialization requested</span>.</p></li>
 
    <li><p>Return <span>this</span>'s <span data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke
    style</span>.</p></li>
@@ -67963,26 +67966,6 @@ try {
    style</span> to the given value.</p></li>
   </ol>
 
-  <p>The <!--en-GB--><dfn id="serialisation-of-a-color">serialization of a color</dfn> for a color
-  value is a string, computed as follows: if it has alpha equal to 1.0, then the string is a
-  lowercase six-digit hex value, prefixed with a "#" character (U+0023 NUMBER SIGN), with the first
-  two digits representing the red component, the next two digits representing the green component,
-  and the last two digits representing the blue component, the digits being <span data-x="ASCII
-  lower hex digit">ASCII lower hex digits</span>. Otherwise, the color value has alpha less than
-  1.0, and the string is the color value in the CSS <code data-x="">rgba()</code>
-  functional-notation format: "<code data-x="">rgba</code>" (U+0072 U+0067 U+0062
-  U+0061) followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range 0-255 representing
-  the red component (using <span>ASCII digits</span> in the shortest form possible), a literal
-  U+002C COMMA and U+0020 SPACE, an integer for the green component, a comma and a space, an integer
-  for the blue component, another comma and space, a U+0030 DIGIT ZERO, if the alpha value is
-  greater than zero then a U+002E FULL STOP (representing the decimal point), if the alpha value is
-  greater than zero then one or more <span>ASCII digits</span> representing the fractional part of
-  the alpha<!-- value with no trailing zeros (implied by next sentence)-->, and finally a U+0029
-  RIGHT PARENTHESIS. User agents must express the fractional part of the alpha value, if any, with
-  the level of precision necessary for the alpha value, when reparsed, to be interpreted as the same
-  alpha value.</p>
-  <!-- if people complain this is unreadable, expand it into a <dl> with two nested <ol>s -->
-
   </div>
 
   <hr>
@@ -69836,8 +69819,10 @@ console.log(pixels.data[2]);
 
   <p>The <dfn attribute for="CanvasShadowStyles"><code
   data-x="dom-context-2d-shadowColor">shadowColor</code></dfn> getter steps are to return the <span
-  data-x="serialization of a color">serialization</span> of <span>this</span>'s <span
-  data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span>.</p>
+  data-x="serialize a CSS &lt;color> value">serialization</span> of <span>this</span>'s <span
+  data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span> with <span
+  data-x="HTML-compatible serialization is requested">HTML-compatible serialization
+  requested</span>.</p>
 
   <p>The <code data-x="dom-context-2d-shadowColor">shadowColor</code> setter steps are:</p>
 
@@ -71073,17 +71058,18 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
   backing store. The default backing store color space for all canvas APIs is
   <span>'srgb'</span>.</p>
 
-  <p>Color space conversion must be applied to the canvas's backing store when rendering the canvas
-  to the output device. This color space conversion must be identical to the color space conversion
-  that would be applied to an <code>img</code> element with a color profile that specifies the same
-  <span data-x="concept-canvas-color-space">color space</span> as the canvas's backing store.</p>
+  <p><span data-x="Converting Colors">Color space conversion</span> must be applied to the canvas's
+  backing store when rendering the canvas to the output device. This color space conversion must be
+  identical to the color space conversion that would be applied to an <code>img</code> element with
+  a color profile that specifies the same <span data-x="concept-canvas-color-space">color
+  space</span> as the canvas's backing store.</p>
 
-  <p>When drawing content to a 2D context, all inputs must be converted to the <span
-  data-x="concept-canvas-color-space">context's color space</span> before drawing. Interpolation of
-  gradient color stops must be performed on color values after conversion to the <span
-  data-x="concept-canvas-color-space">context's color space</span>. Alpha blending must be performed
-  on values after conversion to the <span data-x="concept-canvas-color-space">context's color
-  space</span>.</p>
+  <p>When drawing content to a 2D context, all inputs must be <span data-x="Converting
+  Colors">converted</span> to the <span data-x="concept-canvas-color-space">context's color
+  space</span> before drawing. Interpolation of gradient color stops must be performed on color
+  values after conversion to the <span data-x="concept-canvas-color-space">context's color
+  space</span>. Alpha blending must be performed on values after conversion to the <span
+  data-x="concept-canvas-color-space">context's color space</span>.</p>
 
   <p class="note">There do not exist any inputs to a 2D context for which the color space is
   undefined. The color space for CSS colors is defined in <cite>CSS Color</cite>. The color space
@@ -71132,8 +71118,8 @@ interface <dfn interface>OffscreenCanvasRenderingContext2D</dfn> {
 
   <p>For image types that support color profiles, the serialized image must include a color profile
   indicating the color space of the underlying bitmap. For image types that do not support color
-  profiles, the serialized image must be converted to the <span>'srgb'</span> color space using
-  <span>'relative-colorimetric'</span> rendering intent.</p>
+  profiles, the serialized image must be <span data-x="Converting Colors">converted</span> to the
+  <span>'srgb'</span> color space using <span>'relative-colorimetric'</span> rendering intent.</p>
 
   <p class="note">Thus, in the 2D context, calling the <code
   data-x="dom-context-2d-drawImage">drawImage()</code> method to render the output of the <code