[css3-transitions] Transitions and multiple backgrounds

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).

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 ?

[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 18:46:48 UTC