Re: [css3-transitions] Transitions and multiple backgrounds

On 08/04/2011, at 4:46 AM, Sylvain Galineau wrote:

> Say we layer three backgrounds:
> 
>   E {
> 	   background-image: url('top.png'), url('middle.png'), url('bottom.png');
>   	   background-position: 0px 0px, 10px 10px, 40px 40px;
> 	   transition: background-position;
>   }
> 
> ..then transition background-position like so:
> 
>   E:hover {
> 	   background-position:10px 10px, 0px 0px;
>   }	
> 
> In '3.1. Layering multiple background images' [1], css3-background tells us:
> 
> # The background of a box can have multiple layers in CSS3. The number of layers is determined 
> # by the number of comma-separated values in the 'background-image' property. Note that a value 
> # of 'none' still creates a layer. 
> # Each of the images is sized, positioned, and tiled according to the corresponding value in the 
> # other background properties. The lists are matched up from the first value: excess values at 
> # the end are not used. If a property doesn't have enough comma-separated values to match the 
> # number of layers, the UA must calculate its used value by repeating the list of values until 
> # there are enough.
> 
> In '6. Animation of property types' [2], css3-transitions says:
> 
> # length: interpolated as real numbers. 
> # percentage: interpolated as real numbers.
> # [snip]
> # space-separated list of above: If the lists have the same number of items, each item in 
> # the list is interpolated using the rules above. Otherwise, no interpolation (unless stated 
> # otherwise above).

I think I wrote that piece of text, and I probably wasn't thinking of the case given above.

> So while css3-background defines the handling of a shorter/longerbackground-* lists, css3-transitions
> appears to require lists of matching lengths. It appears that WebKit will transition mistmatched lists
> but Gecko will not. At this point I lean towards the WebKit behavior as being the more author-friendly
> one e.g. normalize the list values then transition on the result i.e. treat the normalized lists as
> the computed value for the background-* properties. 
> 
> I suspect Gecko's implementation and the spec may be addressing potential issues here however. What are
> they ?

I suspect that Gecko simply followed the spec, while WebKit had implemented this before the spec was published.

Now, the question is what do we want it to do? Do we think we should invoke the "unless stated otherwise" clause for background properties?

Dean

> 
> [1] http://www.w3.org/TR/css3-background/#layering
> [2] http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types-
> 
>

Received on Thursday, 7 April 2011 19:43:17 UTC