Re: [csswg-drafts] [cssom] Define serialization for background shorthand

More observations of browser behavior:

'background' syntax is [specified](https://drafts.csswg.org/css-backgrounds/#background) as
```
background = <bg-layer># , <final-bg-layer>
<bg-layer> =                                <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> =  <‘background-color’> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
```

However, browsers do not respect the above serialization order - [test page](https://jsfiddle.net/ericwilligers/mhh9Lt8r/)


Edge serializes inline style using
```
<bg-layer> =                                <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box>
<final-bg-layer> =                          <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box> || <‘background-color’>
```

Firefox serializes inline style using
```
<bg-layer> =                                <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box>
<final-bg-layer> =  <‘background-color’> || <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box>
```

Blink and WebKit serialize inline style using
```
<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’>
```

Edge and Firefox serialize computed style as empty string.

Blink serializes computed style using
```
<bg-layer> =                                <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box>
<final-bg-layer> =  <‘background-color’> || <bg-image> || <repeat-style> || <attachment> || <bg-position> [ / <bg-size> ]? || <box> || <box>
```

WebKit serializes computed style by interleaving information from the different layers.


-- 
GitHub Notification of comment by ewilligers
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/418#issuecomment-380951618 using your GitHub account

Received on Thursday, 12 April 2018 21:35:21 UTC