[webkit-dev] CSS values and multiple backgrounds

[Simon Fraser]

On Jun 27, 2014, at 11:26 AM, Daniel Weber <dan.j.weber at gmail.com> wrote:

> I’m running into some trouble developing an app that needs to parse multiple CSS background values. The problem is that WebKit isn’t returning the same number of values for “background-image”, “background-position”, “background-size”, “background-repeat”, and “background-attachment”. If there are 3 background images, I would expect that all of the background properties contain 3 values, separated by commas. But that doesn’t seem to be the case. For example, I parse the following CSS text:
> 
>> background: url(http://example.com/image.png), linear-gradient(rgb(255,0,0), blue) center top repeat-y scroll, 10px 10px no-repeat scroll;
> 
> 
> I then call CSSStyleDeclaration.cssText and I get:
> 
>> background-image: url(http://example.com/image.png), linear-gradient(rgb(255, 0, 0), blue), initial; background-attachment: initial, scroll, scroll; background-origin: initial, initial, initial; background-clip: initial, initial, initial; background-size: initial, initial, initial; background-position: 50% 0%, 10px 10px; background-repeat: repeat-y, no-repeat;
> 
> 
> Notice that there are 3 values for background-image (a url, a gradient, and “initial” for the last one because it doesn’t specify an image). There are 3 values for background-attachment, background-origin, background-clip, and background-size. But the problem is with background-position and background-repeat. They only have 2 values because only 2 of the backgrounds specify these properties. But then how do I know that the first background does not specify a background-position or background-repeat? It seems to me there should be an “initial” placeholder for these properties. Am I missing something?

Assuming other browsers get this right, please file a bug.

Simon