Clarify the definition of addColorStop()

Also use a single <color> parse algorithm.

Author: Ms2ger

source

@@ -3421,12 +3421,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     a CSS grammar"
     data-x-href="https://drafts.csswg.org/css-syntax/#parse-grammar">parsed
     according to a particular CSS grammar</dfn>, the relevant algorithm in the CSS Syntax
-    specification must be followed. <ref spec=CSSSYNTAX></p>
-
-    <p>In particular, some features require that a string be <dfn>parsed as a CSS &lt;color&gt;
-    value</dfn>. When parsing a CSS value, user agents are required by the CSS specifications to
-    apply some error handling rules. These apply to this specification also. <ref spec=CSSCOLOR>
-    <ref spec=CSS></p>
+    specification must be followed, including error handling rules. <ref spec=CSSSYNTAX></p>
 
     <p class="example">For example, user agents are required to close all open constructs upon
     finding the end of a style sheet unexpectedly. Thus, when parsing the string "<code
@@ -3436,6 +3431,31 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     parenthesis and a missing "blue" value) cannot be parsed, as closing the open construct does not
     result in a viable value.</p>
 
+    <p>To <dfn id="parsed-as-a-css-color-value">parse a CSS &lt;color> value</dfn>, given a string
+    <var>input</var> with an optional element <var>element</var>, run these steps:</p>
+
+    <ol>
+     <li><p>Let <var>color</var> be the result of <span data-x="parse something according to a CSS
+     grammar">parsing</span> <var>input</var> as a CSS <span>&lt;color></span>. <ref
+     spec=CSSCOLOR></p></li>
+
+     <li><p>If <var>color</var> is failure, then return failure.</p></li>
+
+     <li>
+      <p>If <var>color</var> is <code>currentColor</code>, then:</p>
+
+      <ol>
+       <li><p>If <var>element</var> is not given, then set <var>color</var> to fully opaque
+       black.</p></li>
+
+       <li><p>Otherwise, set <var>color</var> to the computed value of the <span>'color'</span>
+       property of <var>element</var>.</p></li>
+      </ol>
+     </li>
+
+     <li><p>Return <var>color</var>.</p></li>
+    </ol>
+
     <p>The following terms and features are defined in the CSS specification: <ref spec=CSS></p>
 
     <ul class="brief">
@@ -3537,6 +3557,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#named-color">named color</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-color/#typedef-color">&lt;color></dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-color/#valdef-color-currentcolor">currentColor</dfn></li>
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-color/#the-color-property">'color'</dfn> property</li>
     </ul>
 
@@ -14050,12 +14071,14 @@ interface <dfn>HTMLMetaElement</dfn> : <span>HTMLElement</span> {
         whitespace">stripping leading and trailing ASCII whitespace</span> from the value of
         <var>element</var>'s <code data-x="attr-meta-content">content</code> attribute.</p></li>
 
-        <li><p>If <var>value</var> can be <span>parsed as a CSS &lt;color&gt; value</span>, return
-        the parsed color.</p></li>
+        <li><p>Let <var>color</var> be the result of <span data-x="parse a CSS &lt;color>
+        value">parsing</span> <var>value</var>.</p></li>
+
+        <li><p>If <var>color</var> is not failure, then return <var>color</var>.</p></li>
        </ol>
       </li>
 
-      <li><p>If this step is reached, the page has no theme color.</p></li>
+      <li><p>Return nothing (the page has no theme color).</p></li>
      </ol>
 
      <p>If any <code>meta</code> elements are <span data-x="node is inserted into a
@@ -60088,33 +60111,6 @@ context.fillRect(100,0,50,50); // only this square remains</pre>
   <p>The <dfn><code data-x="dom-context-2d-canvas">canvas</code></dfn> attribute must return the
   value it was initialized to when the object was created.</p>
 
-  <hr>
-
-  <p id="canvasrenderingcontext2d-currentcolor">Whenever the CSS value <code
-  data-x="">currentColor</code> is used as a color in the <code>CanvasRenderingContext2D</code>
-  API, the <span>computed value</span> of the <code data-x="">currentColor</code> keyword is
-  the <span>computed value</span> of the <span>'color'</span> property on the <code>canvas</code>
-  element at the time that the color is specified (e.g. when the appropriate attribute is set, or
-  when the method is called; not when the color is rendered or otherwise used). If the computed
-  value of the <span>'color'</span> property is undefined for a particular case (e.g. because the element is
-  not in a document), then the <span>computed value</span> of the <span>'color'</span> property
-  for the purposes of determining the computed value of the <code data-x="">currentColor</code>
-  keyword is fully opaque black. <ref spec=CSSCOLOR></p>
-
-  <p>In the case of <code data-x="dom-canvasgradient-addColorStop">addColorStop()</code> on
-  <code>CanvasGradient</code>, the "<span>computed value</span> of the <span>'color'</span>
-  property" for the purposes of determining the <span>computed value</span> of the <code
-  data-x="">currentColor</code> keyword is always fully opaque black (there is no associated
-  element). <ref spec=CSSCOLOR></p>
-
-  <p class="note">This is because <code>CanvasGradient</code> objects are
-  <code>canvas</code>-neutral &mdash; a <code>CanvasGradient</code> object created by one
-  <code>canvas</code> can be used by another, and there is therefore no way to know which is the
-  "element in question" at the time that the color is specified.</p>
-
-  <p class="note">Similar concerns exist with font-related properties; the rules for those are
-  described in detail in the relevant section below.</p>
-
   </div>
 
   <hr>
@@ -62370,18 +62366,14 @@ try {
   or style to use for the lines around the shapes.</p>
 
   <p>Both attributes can be either strings, <code>CanvasGradient</code>s, or
-  <code>CanvasPattern</code>s. On setting, strings must be <span data-x="parsed as a CSS
-  &lt;color&gt; value">parsed as CSS &lt;color&gt; values</span> and the color assigned, and
-  <code>CanvasGradient</code> and <code>CanvasPattern</code> objects must be assigned themselves. <ref spec=CSSCOLOR> If the value is a string but cannot be <span>parsed as a CSS
-  &lt;color&gt; value</span>, then it must be ignored, and the attribute must retain its previous
-  value.
-<!--ADD-TOPIC:Security-->
-  If the new value is a <code>CanvasPattern</code> object that is marked as <span
+  <code>CanvasPattern</code>s. On setting, strings must be <span data-x="parse a CSS &lt;color>
+  value">parsed</span> with this <code>canvas</code> element and the color assigned, and
+  <code>CanvasGradient</code> and <code>CanvasPattern</code> objects must be assigned themselves. If
+  parsing the value results in failure, then it must be ignored, and the attribute must retain its
+  previous value. If the new value is a <code>CanvasPattern</code> object that is marked as <span
   data-x="concept-canvas-pattern-not-origin-clean">not origin-clean</span>, then the
   <code>CanvasRenderingContext2D</code>'s <span
-  data-x="concept-canvas-origin-clean">origin-clean</span> flag must be set to false.
-<!--REMOVE-TOPIC:Security-->
-  </p>
+  data-x="concept-canvas-origin-clean">origin-clean</span> flag must be set to false.</p>
 
   <p>When set to a <code>CanvasPattern</code> or <code>CanvasGradient</code> object, the assignment
   is <span>live</span>, meaning that changes made to the object after the assignment do affect
@@ -62480,17 +62472,37 @@ try {
   <div w-nodev>
 
   <p>The <dfn><code data-x="dom-canvasgradient-addColorStop">addColorStop(<var>offset</var>,
-  <var>color</var>)</code></dfn> method on the <code>CanvasGradient</code> interface adds a new stop
-  to a gradient. If the <var>offset</var> is less than 0 or greater than 1 then an
-  <span>"<code>IndexSizeError</code>"</span> <code>DOMException</code> must be thrown. If the
-  <var>color</var> cannot be <span>parsed as a CSS &lt;color&gt; value</span>, then a
-  <span>"<code>SyntaxError</code>"</span> <code>DOMException</code> must be thrown. Otherwise, the
-  gradient must have a new stop placed, at offset <var>offset</var> relative to the whole gradient,
-  and with the color obtained by <span data-x="parsed as a CSS &lt;color&gt; value">parsing
-  <var>color</var> as a CSS &lt;color&gt; value</span>. If multiple stops are added at the same
-  offset on a gradient, then they must be placed in the order added, with the first one closest to
-  the start of the gradient, and each subsequent one infinitesimally further along towards the end
-  point (in effect causing all but the first and last stop added at each point to be ignored).</p>
+  <var>color</var>)</code></dfn> method on the <code>CanvasGradient</code>, when invoked, must run
+  these steps:</p>
+
+  <ol>
+   <li><p>If the <var>offset</var> is less than 0 or greater than 1, then throw an
+   <span>"<code>IndexSizeError</code>"</span> <code>DOMException</code>.</p></li>
+
+   <li>
+    <p>Let <var>parsed color</var> be the result of <span data-x="parse a CSS &lt;color>
+    value">parsing</span> <var>color</var>.</p>
+
+    <p class="note">No element is passed to the parser because <code>CanvasGradient</code> objects
+    are <code>canvas</code>-neutral &mdash; a <code>CanvasGradient</code> object created by one
+    <code>canvas</code> can be used by another, and there is therefore no way to know which is the
+    "element in question" at the time that the color is specified.</p>
+   </li>
+
+   <li><p>If <var>parsed color</var> is failure, throw a <span>"<code>SyntaxError</code>"</span>
+   <code>DOMException</code>.</p></li>
+
+   <li>
+    <p>Place a new stop on the gradient, at offset <var>offset</var> relative to the whole gradient,
+    and with the color <var>parsed color</var>.</p>
+
+    <p>If multiple stops are added at the same offset on a gradient, then they must be placed in the
+    order added, with the first one closest to the start of the gradient, and each subsequent one
+    infinitesimally further along towards the end point (in effect causing all but the first and
+    last stop added at each point to be ignored).</p>
+   </li>
+  </ol>
+
 
   <p>The <dfn><code data-x="dom-context-2d-createLinearGradient">createLinearGradient(<var>x0</var>,
   <var>y0</var>, <var>x1</var>, <var>y1</var>)</code></dfn> method takes four arguments that
@@ -64348,9 +64360,10 @@ function AddCloud(data, x, y) { ... }</pre>
   <p>On getting, the <span data-x="serialization of a color">serialization of the color</span>
   must be returned.</p>
 
-  <p>On setting, the new value must be <span>parsed as a CSS &lt;color&gt; value</span> and the
-  color assigned. If the value cannot be <span>parsed as a CSS &lt;color&gt; value</span> then it
-  must be ignored, and the attribute must retain its previous value. <ref spec=CSSCOLOR></p>
+  <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
+  spec=CSSCOLOR></p>
 
   <p>The <dfn><code data-x="dom-context-2d-shadowOffsetX">shadowOffsetX</code></dfn> and <dfn><code
   data-x="dom-context-2d-shadowOffsetY">shadowOffsetY</code></dfn> attributes specify the distance