[css-images-4] is serialization from named colors to rgb values is mandatory in general

[karlcow]

Hello,

https://drafts.csswg.org/css-images-4/#serialization

says:

This section describes the serialization of all new properties and value types introduced in this specification, for the purpose of interfacing with the CSS Object Model [CSSOM].

In https://drafts.csswg.org/css-color-4/#serializing-color-values

It says:

This section updates and replaces that part of CSS Object Model, section Serializing CSS Values, which relates to serializing values.

And then later on

The serialized form of the following sRGB values:
hex colors
rgb() and rgba() values
hsl() and hsla() values
hwb() values
named colors
system colors
deprecated-colors
is derived from the computed value and thus, uses either the rgb() or rgba() form (depending on whether the alpha is exactly 1, or not), with lowercase letters for the function name.

but the example given in gradient shows:

Linear-Gradient( to bottom, red 0%,yellow,black 100px)

is serialized as

linear-gradient(red, yellow, black 100px)

Is it just a typo, where the named colors should have been converted to RGB values. Or am I just reading too much?

This is partially raised because some tests are being changed to follow this.
web-platform-tests/wpt#35864

[svgeesus]

I think this is another example of the spec not being clear on serializing specified values vs serializing computed values. Currently the CSS Color 4 spec only talks about the latter.

[karlcow]

ok after discussing with @emilio, I confirmed that getComputeStyle should always return the rgb value.

[karlcow]

Never mind I had already filed a bug for this in WebKit. https://bugs.webkit.org/show_bug.cgi?id=244659

[karlcow]

@svgeesus Yes probably the spec could be clearer. Let me reopen if there's an opportunity to make it crystal clear in the spec that would be great.

[karlcow]

Thanks @svgeesus

[svgeesus]

@karlcow more to improve in the spec, or is this done now?

Btw in your Safari bug, be aware currentColor has to serialize as itself because it does not have a single value, if the element it is on has children (including first-line and first-letter)

[karlcow]

Probably the prose in https://drafts.csswg.org/css-color-4/#serializing-color-values could be improved.

Not sure what it should be exactly, but it would be better if there was a clear way of distinguishing in between the two:

Simple example:

> document.body.style.color = "red"
> document.body.style.color
< "red"
> window.getComputedStyle(document.body).color
< "rgb(255, 0, 0)"

And more complex example for cases like :

> document.body.style.background = "linear-gradient(-45deg,red,currentcolor)"
< "linear-gradient(-45deg,red,currentcolor)"
> document.body.style.background
< "linear-gradient(-45deg, red, currentcolor)"
> window.getComputedStyle(document.body).background

hmm… huh.

• WebKit: rgba(0, 0, 0, 0) linear-gradient(-45deg, red, currentcolor) repeat scroll 0% 0% / auto padding-box border-box
• Gecko: linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 0))
• Blink: rgba(0, 0, 0, 0) linear-gradient(-45deg, rgb(255, 0, 0), rgb(0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box

3 different answers.

[svgeesus]

So I just discussed this with @emilio and we concluded, looking at the <color> section in Serializing CSS Values, that almost all of this has been moved over to CSS Color 4 which makes it super easy to miss the small parts that are left. So its better to move over the rest too, so it is all in one place.

Currently, CSSOM says

If is a component of a specified value, then return the color as follows:

1. If the color was explicitly specified by the author, then return the original, author specified color value.
2. Otherwise, return the value that would be returned if the color were a component of a computed value.

And the trouble is that point 1. is not correct and not what browsers do. Instead it should be:

1. If the color was explicitly specified by the author as a named color, then return the original, author specified named color value.

So the specified value of papayaWhip is papayawhip and the computed value is rgb(255, 239, 213 )