Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update 2D canvas color serialization #10481

Merged
merged 3 commits into from
Sep 19, 2024
Merged

Update 2D canvas color serialization #10481

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4884bab
Update 2D canvas color serialization
annevk Jul 15, 2024
ebab7ec
feedback
annevk Sep 19, 2024
a0e610b
Update source
annevk Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 28 additions & 42 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -65172,9 +65174,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>

Expand Down Expand Up @@ -67870,8 +67871,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>
Expand Down Expand Up @@ -67914,8 +67916,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>
Expand Down Expand Up @@ -67954,26 +67957,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>
Expand Down Expand Up @@ -69827,8 +69810,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>

Expand Down Expand Up @@ -71064,17 +71049,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
Expand Down Expand Up @@ -71123,8 +71109,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
Expand Down