Bug 1424948 - Check iteration progress value instead of animating computed style value. r?birtles
It is possible that animating computed style becomes the same value as the
value in the previous tick if Animation.mPendingReadyTime is pretty close
to the timeline current time.
MozReview-Commit-ID: COuur4Wlufx
--- a/dom/animation/test/css-transitions/file_animation-pausing.html
+++ b/dom/animation/test/css-transitions/file_animation-pausing.html
@@ -1,50 +1,48 @@
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<body>
<script>
'use strict';
-function getMarginLeft(cs) {
- return parseFloat(cs.marginLeft);
-}
-
async_test(function(t) {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.marginLeft = '0px';
cs.marginLeft; // Flush style to set up transition start point
div.style.transition = 'margin-left 100s';
div.style.marginLeft = '10000px';
cs.marginLeft;
var animation = div.getAnimations()[0];
- assert_equals(getMarginLeft(cs), 0,
- 'Initial value of margin-left is zero');
- var previousAnimVal = getMarginLeft(cs);
+ var previousProgress = animation.effect.getComputedTiming().progress;
+ assert_equals(previousProgress, 0, 'Initial value of progress is zero');
animation.ready.then(waitForNextFrame).then(t.step_func(function() {
- assert_greater_than(getMarginLeft(cs), previousAnimVal,
- 'margin-left is initially increasing');
+ assert_greater_than(animation.effect.getComputedTiming().progress,
+ previousProgress,
+ 'Iteration progress is initially increasing');
animation.pause();
return animation.ready;
})).then(t.step_func(function() {
- previousAnimVal = getMarginLeft(cs);
+ previousProgress = animation.effect.getComputedTiming().progress;
return waitForNextFrame();
})).then(t.step_func(function() {
- assert_equals(getMarginLeft(cs), previousAnimVal,
- 'margin-left does not increase after calling pause()');
- previousAnimVal = getMarginLeft(cs);
+ assert_equals(animation.effect.getComputedTiming().progress,
+ previousProgress,
+ 'Iteration progress does not increase after calling pause()');
+ previousProgress = animation.effect.getComputedTiming().progress;
animation.play();
return animation.ready.then(waitForNextFrame);
})).then(t.step_func(function() {
- assert_greater_than(getMarginLeft(cs), previousAnimVal,
- 'margin-left increases after calling play()');
+ assert_greater_than(animation.effect.getComputedTiming().progress,
+ previousProgress,
+ 'Iteration progress increases after calling play()');
t.done();
}));
}, 'pause() and play() a transition');
done();
</script>
</body>