[csswg-drafts] [css-backgrounds] Define serialization for background shorthand

Manishearth has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-backgrounds] Define serialization for background shorthand ==
```js
div = document.createElement('div');
div.style.background = "url(a), url(b)";
div.style.backgroundRepeat="no-repeat, no-repeat, no-repeat";
console.log(div.style.background);
```

This returns `""` on Firefox and `"url("a") no-repeat, url("b") 
no-repeat, no-repeat"` on Chrome.

```js
div = document.createElement('div');
div.style.background = "url(a), url(b), url(c)";
div.style.backgroundRepeat="no-repeat, repeat,";
console.log(div.style.background);
```

This returns `""` on Firefox and `"url("a") no-repeat, url("b") 
repeat, url("c")"` on Chrome.

In case the number of values set is the same, Firefox does return a 
value:

```js
div = document.createElement('div');
div.style.background = "url(a), url(b), url(c)";
div.style.backgroundRepeat="no-repeat, repeat, no-repeat";
console.log(div.style.background);
```

(`"url("a") no-repeat scroll 0% 0%, url("b") repeat scroll 0% 0%, 
transparent url("c") no-repeat scroll 0% 0%"` on Firefox, `"url("a") 
no-repeat, url("b") repeat, url("c") no-repeat"` on Chrome)

Firefox seems to only serialize when all set longhands are of the same
 length (and when it does, it serializes to all default values). 
Chrome always serializes, and just prints out whatever was set.

This should probably be specced. Important questions to answer:

 - Should we truncate everything to the length of the 
`background-image` longhand?
 - For underspecified longhands, should we cycle through them to make 
them the same length as `background-image`?
 - Should we be explicit (like FIrefox) or implicit (like Chrome)?
 - Is serialization (of a shorthand) allowed to fail if parsing 
hasn't?


Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/418 using your GitHub 
account

Received on Monday, 22 August 2016 16:56:55 UTC