720945 - when serializing the 'background' shorthand, put 'background-color' at the beginning

Status: RESOLVED DUPLICATE of bug 570326

(Core :: CSS Parsing and Computation, defect, P4)

Description

[Sebastian Zartner [:sebo]]

As of bug 713613 the 'background' shorthand property is not correctly serialized in the case, when there is a 'background-size' property defined.

Bug 570326 is related to this.

Also some Firebug users were already complaining about the order of the properties. They want the 'background-color' property at the first position again as it was in FF 3.0. What's the reason for the change?

Sebastian

Comment 1

[Sebastian Zartner [:sebo]]

Attachment: Test case

> Also some Firebug users were already complaining about the order of the properties.
See http://code.google.com/p/fbug/issues/detail?id=4180.

Sebastian

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Sebastian Zartner from comment #0)
> As of bug 713613 the 'background' shorthand property is not correctly
> serialized in the case, when there is a 'background-size' property defined.
> 
> Bug 570326 is related to this.

This part of the bug is a duplicate of bug 570326.

> Also some Firebug users were already complaining about the order of the
> properties. They want the 'background-color' property at the first position
> again as it was in FF 3.0. What's the reason for the change?

What changed?

In the future, please only report one issue per bug.

Comment 3

[Sebastian Zartner [:sebo]]

> This part of the bug is a duplicate of bug 570326.
No, what I am discribing is a bug. 570326 is an enhancement. The 'background' property could and should be serialized independ of 'background-size' being taken into account.
But it's up to you to do both at the same time or fix this bug first.

> What changed?
Formerly the 'color' value was the first part of the 'background' property, now it's the last part. See the Firebug issue mentioned in comment 1 for a more detailed description.

> In the future, please only report one issue per bug.
Since both issues are part of the 'background' serialization, I assumed they belong together.

Sebastian

Comment 4

[Steve Roussey (:sroussey)]

The W3C spec for CSS2.1 [1] always showed the value as:

[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>]

So the tutorials over the years always show things in that order. Firefox used to return them in that order previously. Now it puts color at the end, which feels unnatural to many.

Was: #E8E8E8 none repeat scroll 0 0
Now: none repeat scroll 0 0 #E8E8E8

(Due to the layers aspect in CSS3 [2] and that color is only allowed on the last one, someone somewhere probably thought "hey, if color is at the end, then no one will get confused", but instead people are confused now with simpler and far more common backgrounds, and it just makes Firebug and Firefox look buggy.)


[1] http://www.w3.org/TR/CSS21/colors.html#background-properties
[2] http://www.w3.org/TR/css3-background/#the-background

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Sebastian Zartner from comment #3)
> > This part of the bug is a duplicate of bug 570326.
> No, what I am discribing is a bug. 570326 is an enhancement. The
> 'background' property could and should be serialized independ of
> 'background-size' being taken into account.

No, it can't, since the background shorthand sets background-size to its default value.  Therefore if background-size has other than its default value, serializing a background-shorthand would lead to incorrect results for many uses of serialization since it would override the correct background-size.  (We didn't implement the parsing of background-size in the shorthand at first because the syntax of how it would be part of the shorthand was under debate.)

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Steve Roussey (:sroussey) from comment #4)
> (Due to the layers aspect in CSS3 [2] and that color is only allowed on the
> last one, someone somewhere probably thought "hey, if color is at the end,
> then no one will get confused", but instead people are confused now with
> simpler and far more common backgrounds, and it just makes Firebug and
> Firefox look buggy.)

I think it was actually that continuing to put color at the start of the last item would make the code more complicated.  To understand why, have a look at the code:
http://hg.mozilla.org/mozilla-central/file/edf8075b0333/layout/style/Declaration.cpp#l397
It's actually a bit of extra code to tell whether an iteration of the loop is going to be the last time through.

Comment 7

[Steve Roussey (:sroussey)]

Yeah, I looked at the code and it is directly appending to the final value rather than building a layer and adding each layer to the final value. So there is not a quick fix. But each time through the loop, at the start it could add the current layer if there is one, then blank it out, and after the loop add the color and the layer to the final value.

Comment 8

[Sebastian Zartner [:sebo]]

> No, it can't, since the background shorthand sets background-size to its default 
> value.
And why does it do that when you can't specify the value for the background size for it yet? Why is it not just letting the 'background-size' value untouched?

Anyway, did you check out my test case? It took me quite a while to create it and the issue shown there (at least the result of step 3) looks definitely like a bug.

Sebastian

Comment 9

[Sebastian Zartner [:sebo]]

I want to emphasize again, that this issue is not about putting 'background-color' to the beginning of 'background'. It is about correctly serializing 'background' when there is a 'background-size' property.

Steven, it would be nice, if you could file a separate issue for the 'background-color' issue.

Sebastian

Comment 10

[Sebastian Zartner [:sebo]]

Attachment: Test case 2

Here's another test case describing exactly what's the expected result.
Note, that this problem is not limited to the background-size property, but is happening for every background-* property, which is not part of the background shorthand property, e.g. background-clip.

Sebastian

Comment 11

[Sebastian Zartner [:sebo]]

I created bug 743392 to cover the background-color issue.
So please change the summary of this bug back to the original.

Sebastian