[css-om][css-backgrounds] Serialization of background: none

@emilio

Should background: none serialize to background: transparent or background: none ?

Latest STP serializes as transparent, whereas FF serializes as none.

@darinadler

I guess this fits into the umbrella of #8155.
STP serializes as transparent because in WebKit/WebKit#9849 @darinadler interpreted that <'background-color'> appears 1st in grammar order. It's not completely clear, but it seems to me that the 1st one is actually <bg-image>.

The reason you and I came to different conclusions, I suppose, is that background-color is the first item in the final item in the comma separated list of values, and bg-image is the first item in the non-final items. If there is only a single value and no comma, how does the grammar work, and make it valid without a comma, but bg-image counts as first? That’s where we didn’t understand it the same way.

Mm, looking at it again, I'm less sure about it :)
If none is expected I would change the grammar to

<bg-layer>       = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

If transparent is expected, I would add a note or something.

see also #418 more generally about background serialisation

REGRESSION (STP 164): new failure in css/css-backgrounds/parsing/back…

The CSS Working Group just discussed [css-om][css-backgrounds] Serialization of `background: none` , and agreed to the following:

RESOLVED: Move color at the end of the final-bg-layer grammar, to make it serialize as `none`

The full IRC log of that discussion

<emilio> TabAtkins: question is how does `background: none` serialize. Using shortest serialization and grammar is unclear
<emilio> ... because if you only specify one layer it matches final-background-layer and image-layer
<emilio> ... and since color is the first in the final-background-layer safari they serialize transparent
<emilio> ... other browsers serialize none
<emilio> ... proposal is to move color to the end of final-bg-layer
<emilio> ... which makes it serialize as none
<emilio> fantasai: I think it's great because it moves color to the end
<emilio> ... which makes sense because it's at the bottom
<emilio> ... but that would be a change to how a color + image serializes, and I'm not sure that's Web-compatible <emilio> RESOLVED: Move color at the end of the final-bg-layer grammar, to make it serialize as `none`

Not captured in the minutes - we're hoping this is web-compatible, since currently if you specify a color and an image, the color will serialize first.

Not captured in the minutes - we're hoping this is web-compatible, since currently if you specify a color and an image, the color will serialize first.

Not sure that’s quite right: The specification says that, but do any web browsers currently do that?

@fantasai

About @fantasai's comment:

var {style} = document.body;
style.background = 'url("") blue';
style.background;

Gecko: blue url("")
Blink: url("") blue
WebKit: url("") blue (or blue url("") between WebKit/WebKit@5d2cf87 and WebKit/WebKit@bec59bd)

Okay, Blink (and WK before this recent change) serializing color after makes me very confident it's web-compatible.

[css-backgrounds-3] Move <bg-color> to the end of the <final-bg-layer…

k, edit in. Color is now last in the final layer, so a none serializes consistently in all layers as none.

@fantasai

Just to provide a little background why the color was put first in the final layer:

So this was initially pushed by me back then. Though I agree it makes sense to have the color at the end for the same reason @fantasai and @LeaVerou gave now and in the past.

Sebastian

@tabatkins

@tabatkins Don't just edit and close issues on specs that aren't yours. This needs to go into the Changes list, for example, which you didn't remember to do.

[css-backgrounds-3] Update Changes #8496

Navigation Menu

Repository navigation

[css-om][css-backgrounds] Serialization of `background: none` #8496

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-om][css-backgrounds] Serialization of background: none #8496

Description

Activity

Loirooriol commented on Feb 24, 2023

darinadler commented on Feb 24, 2023

Loirooriol commented on Feb 24, 2023

gsnedders commented on Feb 27, 2023

css-meeting-bot commented on Mar 8, 2023

tabatkins commented on Mar 8, 2023

darinadler commented on Mar 8, 2023

Loirooriol commented on Mar 8, 2023

tabatkins commented on Mar 8, 2023

tabatkins commented on Mar 9, 2023

SebastianZ commented on Mar 9, 2023

fantasai commented on Mar 14, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[css-om][css-backgrounds] Serialization of `background: none` #8496