Bug 28266

Summary: CSS Animation does not animate multiple background positions
Product: WebKit Reporter: Joshua Dickens <josh>
Component: CSSAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Work in progress
none
Patch
andersca: review+
Patch for multiple shadow animation
none
Patch for multiple shadow animation andersca: review+

Description Joshua Dickens 2009-08-13 10:20:43 PDT 
When multiple background images are defined on an element, it is currently only possible to animate the first background image via CSS Animation keyframes.  

Steps to reproduce:

1) Create an element with the 'animated' class assigned
2) define the class to use multiple background images
3) add an animation keyframes set that animates the second background image's x-position

Results
Background position does not animate

Expected
Background position should animate

Sample CSS:
.animated {
		background-repeat: repeat-x;
          	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(rgba(255,255,255,0)), to(rgba(255,255,255, 1))), url('someimage.png');
  		 -webkit-animation-name: 'my-animation';
          	 -webkit-animation-duration: .3s;
          	  -webkit-animation-iteration-count: infinite;
          	  }

 @-webkit-keyframes my-animation {
          	    from {
          	      -webkit-animation-timing-function: linear;
          	      background-position-x: 0px, 0px;
			// alternatively: background-position: 0px 0px, 0px 0px;
                }
                to {
                  -webkit-animation-timing-function: linear;
                  background-position-x: 0px, 20px;
		// alternatively: background-position: 0px 0px, 20px 0px;
                }
 }
Comment 1 Simon Fraser (smfr) 2009-08-13 11:29:02 PDT 
There are several other properties for which we only animate the first one (e.g. shadows). We should fix them all.
Comment 2 Simon Fraser (smfr) 2009-08-14 09:11:56 PDT 
Created attachment 34844 [details]
Work in progress
Comment 3 Simon Fraser (smfr) 2009-08-15 11:18:35 PDT 
Created attachment 34900 [details]
Patch
Comment 4 Simon Fraser (smfr) 2009-08-15 12:24:59 PDT 
Created attachment 34903 [details]
Patch for multiple shadow animation
Comment 5 Simon Fraser (smfr) 2009-08-15 16:36:51 PDT 
Comment on attachment 34903 [details]
Patch for multiple shadow animation

This patch is reversing the shadows.
Comment 6 Simon Fraser (smfr) 2009-08-15 16:39:38 PDT 
Created attachment 34907 [details]
Patch for multiple shadow animation
Comment 7 Anders Carlsson 2009-08-15 17:57:35 PDT 
Comment on attachment 34907 [details]
Patch for multiple shadow animation

r=me
Comment 8 Anders Carlsson 2009-08-15 18:02:19 PDT 
Comment on attachment 34900 [details]
Patch

r=me