Permalink
Browse files

Clarify the definition of addColorStop()

Also use a single <color> parse algorithm.
  • Loading branch information...
Ms2ger authored and annevk committed Jan 10, 2018
1 parent 99e2cdf commit cc508ebd8427dd561ed2dc3d5d9a45a967fccf71
Showing with 73 additions and 60 deletions.
  1. +73 −60 source
View
133 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

0 comments on commit cc508eb

Please sign in to comment.