Stop calling parse a CSS <color> with OffscreenCanvas

Also modernize the way we handle shadowColor.

Closes #10398.

source

@@ -65118,8 +65118,9 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
    <span data-x="concept-CanvasFillStrokeStyles-fill-style">fill style</span>, <span
    data-x="concept-CanvasFillStrokeStyles-stroke-style">stroke style</span>, <span
    data-x="concept-canvas-current-filter">filter</span>, <span
-   data-x="concept-canvas-global-alpha">global alpha</span>, and <span data-x="current compositing
-   and blending operator">compositing and blending operator</span>.</p></li>
+   data-x="concept-canvas-global-alpha">global alpha</span>, <span data-x="current compositing and
+   blending operator">compositing and blending operator</span>, and <span
+   data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span>.</p></li>
 
    <li><p>The current values of the following attributes: <code
    data-x="dom-context-2d-lineWidth">lineWidth</code>, <code
@@ -65130,7 +65131,6 @@ context.fillRect(100,0,50,50); // only this square remains</code></pre>
    data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code>, <code
    data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code>, <code
    data-x="dom-context-2d-shadowBlur">shadowBlur</code>, <code
-   data-x="dom-context-2d-shadowColor">shadowColor</code>, <code
    data-x="dom-context-2d-font">font</code>, <code
    data-x="dom-context-2d-textAlign">textAlign</code>, <code
    data-x="dom-context-2d-textBaseline">textBaseline</code>, <code
@@ -67737,9 +67737,12 @@ try {
     <p>If the given value is a string, then:</p>
 
     <ol>
+     <li><p>Let <var>context</var> be <span>this</span>'s <code
+     data-x="dom-context-2d-canvas">canvas</code> attribute's value, if that is an element;
+     otherwise null.</p></li>
+
      <li><p>Let <var>parsedValue</var> be the result of <span data-x="parse a CSS &lt;color>
-     value">parsing</span> the given value with <span>this</span>'s <code
-     data-x="dom-context-2d-canvas">canvas</code> attribute's value.</p></li>
+     value">parsing</span> the given value with <var>context</var> if non-null.</p></li>
 
      <li><p>If <var>parsedValue</var> is failure, then return.</p></li>
 
@@ -67778,9 +67781,12 @@ try {
     <p>If the given value is a string, then:</p>
 
     <ol>
+     <li><p>Let <var>context</var> be <span>this</span>'s <code
+     data-x="dom-context-2d-canvas">canvas</code> attribute's value, if that is an element;
+     otherwise null.</p></li>
+
      <li><p>Let <var>parsedValue</var> be the result of <span data-x="parse a CSS &lt;color>
-     value">parsing</span> the given value with <span>this</span>'s <code
-     data-x="dom-context-2d-canvas">canvas</code> attribute's value.</p></li>
+     value">parsing</span> the given value with <var>context</var> if non-null.</p></li>
 
      <li><p>If <var>parsedValue</var> is failure, then return.</p></li>
 
@@ -69684,20 +69690,30 @@ console.log(pixels.data[2]);
 
   <div w-nodev>
 
+  <p>Objects which implement the <code>CanvasShadowStyles</code> interface have an associated <dfn
+  data-x="concept-CanvasShadowStyles-shadow-color">shadow color</dfn>, which is a CSS color.
+  Initially, it must be <span>transparent black</span>.</p>
+
   <p>The <dfn attribute for="CanvasShadowStyles"><code
-  data-x="dom-context-2d-shadowColor">shadowColor</code></dfn> attribute sets the color of the
-  shadow.</p>
+  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>
+
+  <p>The <code data-x="dom-context-2d-shadowColor">shadowColor</code> setter steps are:</p>
+
+  <ol>
+   <li><p>Let <var>context</var> be <span>this</span>'s <code
+   data-x="dom-context-2d-canvas">canvas</code> attribute's value, if that is an element; otherwise
+   null.</p></li>
 
-  <p>When the context is created, the <code data-x="dom-context-2d-shadowColor">shadowColor</code>
-  attribute initially must be <span>transparent black</span>.</p>
+   <li><p>Let <var>parsedValue</var> be the result of <span data-x="parse a CSS &lt;color>
+   value">parsing</span> the given value with <var>context</var> if non-null.</p></li>
 
-  <p>On getting, the <span data-x="serialization of a color">serialization of the color</span>
-  must be returned.</p>
+   <li><p>If <var>parsedValue</var> is failure, then return.</p></li>
 
-  <p>On setting, the new value must be <span data-x="parse a CSS &lt;color> value">parsed</span>
-  with this <code>canvas</code> element and the color assigned. If parsing the value results in
-  failure then it must be ignored, and the attribute must retain its previous value.
-  <ref>CSSCOLOR</ref></p>
+   <li><p>Set <span>this</span>'s <span data-x="concept-CanvasShadowStyles-shadow-color">shadow
+   color</span> to <var>parsedValue</var>.</p></li>
+  </ol>
 
   <p>The <dfn attribute for="CanvasShadowStyles"><code
   data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code></dfn> and <dfn attribute
@@ -69726,10 +69742,10 @@ console.log(pixels.data[2]);
   must be ignored.</p>
 
   <p><dfn data-x="when shadows are drawn">Shadows are only drawn if</dfn> the opacity component of
-  the alpha component of the color of <code data-x="dom-context-2d-shadowColor">shadowColor</code> is
-  nonzero and either the <code data-x="dom-context-2d-shadowBlur">shadowBlur</code> is nonzero, or
-  the <code data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code> is nonzero, or the <code
-  data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code> is nonzero.</p>
+  the alpha component of the <span data-x="concept-CanvasShadowStyles-shadow-color">shadow
+  color</span> is nonzero and either the <code data-x="dom-context-2d-shadowBlur">shadowBlur</code>
+  is nonzero, or the <code data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code> is nonzero, or
+  the <code data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code> is nonzero.</p>
 
   <p><span>When shadows are drawn</span>, they must be rendered as follows:</p>
 
@@ -69761,11 +69777,12 @@ console.log(pixels.data[2]);
    </li>
 
    <li><p>Set the red, green, and blue components of every pixel in <var>B</var> to the
-   red, green, and blue components (respectively) of the color of <code
-   data-x="dom-context-2d-shadowColor">shadowColor</code>.</p></li>
+   red, green, and blue components (respectively) of the <span
+   data-x="concept-CanvasShadowStyles-shadow-color">shadow color</span>.</p></li>
 
    <li><p>Multiply the alpha component of every pixel in <var>B</var> by the alpha
-   component of the color of <code data-x="dom-context-2d-shadowColor">shadowColor</code>.</p></li>
+   component of the <span data-x="concept-CanvasShadowStyles-shadow-color">shadow
+   color</span>.</p></li>
 
    <li><p>The shadow is in the bitmap <var>B</var>, and is rendered as part of the
    <span>drawing model</span> described below.</p></li>