<div dir="ltr"><div>This does appear to be a bug. Tested in Firefox, when I call CSSStyleDeclaration.cssText with the following CSS:<br><br>background: url(<a href="http://example.com/image.png">http://example.com/image.png</a>), linear-gradient(rgb(255,0,0), blue) center top repeat-y scroll, 10px 10px no-repeat scroll;<br>
<br></div>I get back:<br><div><br>background: url("<a href="http://example.com/image.png">http://example.com/image.png</a>") repeat scroll 0% 0%, linear-gradient(rgb(255, 0, 0), blue) repeat-y scroll center top, none no-repeat scroll 10px 10px transparent;<br>
<br></div><div>Notice there are placeholders for all values, including position and repeat. I will file a bug report.<br><br></div><div>Thanks,<br>Dan<br></div></div><div class="gmail_extra"><br><br><div class="gmail_quote">
On Fri, Jun 27, 2014 at 11:31 AM, Simon Fraser <span dir="ltr"><<a href="mailto:simon.fraser@apple.com" target="_blank">simon.fraser@apple.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div class="HOEnZb"><div class="h5">On Jun 27, 2014, at 11:26 AM, Daniel Weber <<a href="mailto:dan.j.weber@gmail.com">dan.j.weber@gmail.com</a>> wrote:<br>
<br>
> 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:<br>
><br>
>> background: url(<a href="http://example.com/image.png" target="_blank">http://example.com/image.png</a>), linear-gradient(rgb(255,0,0), blue) center top repeat-y scroll, 10px 10px no-repeat scroll;<br>
><br>
><br>
> I then call CSSStyleDeclaration.cssText and I get:<br>
><br>
>> background-image: url(<a href="http://example.com/image.png" target="_blank">http://example.com/image.png</a>), 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;<br>
><br>
><br>
> 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?<br>
<br>
</div></div>Assuming other browsers get this right, please file a bug.<br>
<span class="HOEnZb"><font color="#888888"><br>
Simon<br>
<br>
</font></span></blockquote></div><br></div>