Bug 1423078 - Use waitForNextFrame() instead of waitForFrame() to make sure the second restyle happen after the initial paint. r=birtles

We clamp animation start time on the second restyling when the initial paint
for the animation took over vsync refresh rate (16.6ms normally as of today).
The clamping leads the animation progress to the same value as the initial one.
Once this clamping happens, the animation value does not change even after
waiting for Animation.ready and a reqeustAnimationFrame.  To make the animation
value change happen we should wait for one more requestAnimationFrame.

MozReview-Commit-ID: 8OTC0xkKBrr

--HG--
extra : rebase_source : 4c0313f3a96ffc85306f5687630abc13d88aed61

dom/animation/test/css-animations/file_animation-pausing.html

@@ -24,7 +24,7 @@ promise_test(function(t) {
                 'Initial value of margin-left is zero');
   animation.play();
 
-  return animation.ready.then(waitForFrame).then(function() {
+  return animation.ready.then(waitForNextFrame).then(function() {
     assert_greater_than(getMarginLeft(cs), 0,
                         'Playing value of margin-left is greater than zero');
   });
@@ -41,7 +41,7 @@ promise_test(function(t) {
   animation.pause();
   div.style.animationPlayState = 'running';
 
-  return animation.ready.then(waitForFrame).then(function() {
+  return animation.ready.then(waitForNextFrame).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     assert_equals(getMarginLeft(cs), 0,
@@ -62,7 +62,7 @@ promise_test(function(t) {
   return animation.ready.then(function() {
     div.style.animationPlayState = 'running';
     cs.animationPlayState; // Trigger style resolution
-    return waitForFrame();
+    return waitForNextFrame();
   }).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
@@ -95,7 +95,7 @@ promise_test(function(t) {
   animation.play();
   var previousAnimVal = getMarginLeft(cs);
 
-  return animation.ready.then(waitForFrame).then(function() {
+  return animation.ready.then(waitForNextFrame).then(function() {
     assert_equals(cs.animationPlayState, 'paused',
                   'animation-play-state is paused');
     assert_greater_than(getMarginLeft(cs), previousAnimVal,
@@ -125,7 +125,7 @@ promise_test(function(t) {
   animation.pause();
   var previousAnimVal = getMarginLeft(cs);
 
-  return animation.ready.then(waitForFrame).then(function() {
+  return animation.ready.then(waitForNextFrame).then(function() {
     assert_equals(cs.animationPlayState, 'running',
                   'animation-play-state is running');
     assert_equals(getMarginLeft(cs), previousAnimVal,

dom/animation/test/css-transitions/file_animation-pausing.html

@@ -24,7 +24,7 @@ async_test(function(t) {
                 'Initial value of margin-left is zero');
   var previousAnimVal = getMarginLeft(cs);
 
-  animation.ready.then(waitForFrame).then(t.step_func(function() {
+  animation.ready.then(waitForNextFrame).then(t.step_func(function() {
     assert_greater_than(getMarginLeft(cs), previousAnimVal,
                         'margin-left is initially increasing');
     animation.pause();