[webkit-dev] CSS values and multiple backgrounds

Daniel Weber dan.j.weber at gmail.com
Fri Jun 27 11:26:52 PDT 2014

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?

More information about the webkit-dev mailing list