[blink-dev] Question about CSS <color> values

Xida Chen

unread,

Dec 5, 2016, 2:00:25 PM12/5/16

to blink-dev

Sorry for the duplication. I just realized that I didn't finish my subject in my previous email.

I am looking at some tests under w3c/web-platform-tests/2dcontext/fill-and-stroke-styles, and I noticed that the behavior is in-consistent between Chrome and Firefox. In particular, these tests have a line looks like this:

ctx.fillStyle = 'hsl(120, 100.0% 50.0%)';

In the above line, ctx is a 2d context for a <canvas> element.

The spec for fillStyle is here https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-fillstyle, and it has this statement:

On setting, strings must be parsed as CSS <color> values and the color assigned

I am not familiar with the CSS <color> values, and I would appreciate any help with the following two question:

1. Is 'hsl(120, 100.0%, 50.0%)' a valid string that can be parsed as CSS <color> values?

2. Is ' red' a valid string for CSS <color> values? Note that there is a space before red.

Thank you.

Anton Vayvod

unread,

Dec 5, 2016, 2:21:35 PM12/5/16

to Xida Chen, blink-dev

Note: I'm not an expert on CSS in any way but...

If you followed the link about CSS <color> that you copied from the fillStyle spec (and then another one there), you would land at the CSS spec that should have answers to your questions: https://drafts.csswg.org/css-color.

On Mon, Dec 5, 2016 at 2:00 PM, Xida Chen <xida...@chromium.org> wrote:

Sorry for the duplication. I just realized that I didn't finish my subject in my previous email.

I am looking at some tests under w3c/web-platform-tests/2dcontext/fill-and-stroke-styles, and I noticed that the behavior is in-consistent between Chrome and Firefox. In particular, these tests have a line looks like this:

ctx.fillStyle = 'hsl(120, 100.0% 50.0%)';

In the above line, ctx is a 2d context for a <canvas> element.

The spec for fillStyle is here https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-fillstyle, and it has this statement:
On setting, strings must be parsed as CSS <color> values and the color assigned

I am not familiar with the CSS <color> values, and I would appreciate any help with the following two question:
1. Is 'hsl(120, 100.0%, 50.0%)' a valid string that can be parsed as CSS <color> values?

Seems to be, although the comma separated way is obsolete: https://drafts.csswg.org/css-color/#funcdef-hsl

2. Is ' red' a valid string for CSS <color> values? Note that there is a space before red.

https://drafts.csswg.org/css-color/#named-colors doesn't seem to say anything about trimming the string before matching it, so I would assume no.

Thank you.

Fredrik Söderquist

unread,

Dec 5, 2016, 4:33:11 PM12/5/16

to ava...@chromium.org, Xida Chen, blink-dev

I think the relevant spec reference is:

https://drafts.csswg.org/css-syntax/#parse-grammar

(Found via:

https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-fillstyle ("parsed as CSS <color> value") ->

https://html.spec.whatwg.org/multipage/infrastructure.html#parsed-as-a-css-color-value ("parsed according to a particular CSS grammar", one paragraph up) ->

https://drafts.csswg.org/css-syntax/#parse-something-according-to-a-css-grammar

this last fragment is not the right one/up-to-date, but you can find the term in the TOC as 5.3.1.)