RE: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

One more thing...

Case 2 has an equivalent shorthand representation.  Case 1 does not.

Yet another reason the Note is troubling.

-Brian

-----Original Message-----
From: Brian Manthos 
Sent: Friday, January 21, 2011 11:40 AM
To: Brian Manthos; Boris Zbarsky; tao.yu@nokia.com
Cc: www-style@w3.org; Art.Barstow@nokia.com
Subject: RE: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

The "Note" about the "will have the same effect" at the end of section 3.10 is actually incorrect.  They might RENDER the same but the OM impact is different.  I recommend we (a) remove it or (b) clarify and explain.


The OM impact can easily be illustrated by comparing these two cases:

case 1:
background: url(foo) white; background-repeat: no-repeat, repeat;

case 2:
background: url(foo), white; background-repeat: no-repeat, repeat;

Case 1 will tile the foo image.  Case 2 will not.  Further, querying the OM for any background property other than background-repeat will result in one layer for case 1 and two for case 2.


/\/\/\/\/\


More (hopefully instructive) examples... 

case 3:
background: url(bar) content-box padding-box blue;

case 3 equivalent:
background: url(bar) content-box padding-box blue;

Fill the PADDING box with blue and then tile the image in the PADDING box using CONTENT box as the background positioning area.


case 4:
background: url(bar), content-box padding-box blue;

case 4 equivalent:
background: url(bar) padding-box border-box, none content-box padding-box blue;

Fill the PADDING box with blue and then tile the image in the BORDER box using PADDING box as the background positioning area.


case 5:
background: url(bar) content-box, padding-box blue;

case 5 equivalent:
background: url(bar) content-box content-box, none padding-box padding-box blue;

Fill the PADDING box with blue and then tile the image in the CONTENT box using the CONTENT box as the background positioning area.


case 6:
background: url(bar) content-box padding-box, blue;

case 6 equivalent:
background: url(bar) content-box padding-box, none padding-box border-box blue;

Fill the BORDER box with blue and then tile the image in the PADDING box using the CONTENT box as the background positioning area.


Note that none of cases 3-6 are identical in OM or rendering behavior.  The rendering differences are CAPITALIZED.


-Brian

-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Brian Manthos
Sent: Friday, January 21, 2011 11:11 AM
To: Boris Zbarsky; tao.yu@nokia.com
Cc: www-style@w3.org; Art.Barstow@nokia.com
Subject: RE: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

This attempt at shorthand is invalid:
   background: white, url(foo);

The color component of a background shorthand value can only be present in the final layer.

-Brian


-----Original Message-----
From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Boris Zbarsky
Sent: Friday, January 21, 2011 7:50 AM
To: tao.yu@nokia.com
Cc: www-style@w3.org; Art.Barstow@nokia.com
Subject: Re: [css3-background] 'background: url(foo) white' and 'background: url(foo), white'

On 1/21/11 10:39 AM, tao.yu@nokia.com wrote:
> I am not clear about the last statement in section 3.10 "The 'background' shorthand property", which says:
>
> Note that 'background: url(foo) white' and 'background: url(foo), white' have the same effect.

That's more or less an accident, actually.

The former shorthand specifies one background layer, with a white color 
and url(foo).  The image is painted above the color within a layer.

The latter shorthand specifies two layers, white color on the bottom 
layer and url(foo) on the top one.  This just happens to give the same 
result as having them both in the same layer.

But note that these two shorthands:

   background: white url(foo);
   background: white, url(foo);

do NOT paint the same.  The latter is just white, while the former 
paints the image on top of the white fill.

> Does that mean comma can be used between any of the individual properties and have the same effect as without it?

No.

-Boris

Received on Friday, 21 January 2011 19:59:30 UTC