--- a/dom/animation/test/css-animations/test_animation-cancel.html
+++ b/dom/animation/test/css-animations/test_animation-cancel.html
@@ -15,77 +15,77 @@
to { margin-left: 200px }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: translateAnim 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is animated before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'transform style is no longer animated after cancelling');
});
}, 'Animated style is cleared after cancelling a running CSS animation');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
var animation = div.getAnimations()[0];
animation.finish();
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_not_equals(getComputedStyle(div).transform, 'none',
'transform style is filling before cancelling');
animation.cancel();
assert_equals(getComputedStyle(div).transform, 'none',
'fill style is cleared after cancelling');
});
}, 'Animated style is cleared after cancelling a filling CSS animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
var animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.currentTime = 50 * 1000;
assert_equals(getComputedStyle(div).marginLeft, '50px',
'margin-left style is updated when cancelled animation is'
+ ' seeked');
}, 'After canceling an animation, it can still be seeked');
-promise_test(function(t) {
+promise_test(t => {
var div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
animation.play();
assert_equals(getComputedStyle(div).marginLeft, '100px',
'margin-left style is animated after re-starting animation');
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_equals(animation.playState, 'running',
'Animation succeeds in running after being re-started');
});
}, 'After cancelling an animation, it can still be re-used');
-test(function(t) {
+test(t => {
var div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
var animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
// Trigger a change to some animation properties and check that this
@@ -94,17 +94,17 @@ test(function(t) {
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is still not animated after updating'
+ ' animation-duration');
assert_equals(animation.playState, 'idle',
'Animation is still idle after updating animation-duration');
}, 'After cancelling an animation, updating animation properties doesn\'t make'
+ ' it live again');
-test(function(t) {
+test(t => {
var div =
addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
var animation = div.getAnimations()[0];
animation.cancel();
assert_equals(getComputedStyle(div).marginLeft, '0px',
'margin-left style is not animated after cancelling');
// Make some changes to animation-play-state and check that the
@@ -128,65 +128,65 @@ test(function(t) {
div.style.animationPlayState = 'running';
assert_equals(animation.playState, 'idle',
'Animation is still idle after re-setting'
+ ' animation-play-state: running');
}, 'After cancelling an animation, updating animation-play-state doesn\'t'
+ ' make it live again');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
div.style.marginLeft = '0px';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
div.style.animationName = 'none';
flushComputedStyle(div);
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(animation.playState, 'idle');
assert_equals(getComputedStyle(div).marginLeft, '0px');
});
}, 'Setting animation-name to \'none\' cancels the animation');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: translateAnim 10s both' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
div.style.display = 'none';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(animation.playState, 'idle');
assert_equals(getComputedStyle(div).marginLeft, '0px');
});
}, 'Setting display:none on an element cancel its animations');
-promise_test(function(t) {
+promise_test(t => {
var parentDiv = addDiv(t);
var childDiv = document.createElement('div');
parentDiv.appendChild(childDiv);
childDiv.setAttribute('style', 'animation: translateAnim 10s both');
flushComputedStyle(childDiv);
var animation = childDiv.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_equals(animation.playState, 'running');
parentDiv.style.display = 'none';
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(animation.playState, 'idle');
assert_equals(getComputedStyle(childDiv).marginLeft, '0px');
});
}, 'Setting display:none on an ancestor element cancels animations on ' +
'descendants');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animation-computed-timing.html
+++ b/dom/animation/test/css-animations/test_animation-computed-timing.html
@@ -13,54 +13,57 @@
<div id="log"></div>
<script>
'use strict';
// --------------------
// delay
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 0,
'Initial value of delay');
}, 'delay of a new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, -10 * MS_PER_SEC,
'Initial value of delay');
}, 'Negative delay of a new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 10s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().delay, 10 * MS_PER_SEC,
'Initial value of delay');
}, 'Positive delay of a new animation');
// --------------------
// endDelay
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endDelay, 0,
'Initial value of endDelay');
}, 'endDelay of a new animation');
// --------------------
// fill
// --------------------
-test(function(t) {
- var getEffectWithFill = function(fill) {
+
+test(t => {
+ var getEffectWithFill = fill => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + fill});
return div.getAnimations()[0].effect;
};
var effect = getEffectWithFill('');
assert_equals(effect.getComputedTiming().fill, 'none',
'Initial value of fill');
effect = getEffectWithFill('forwards');
@@ -73,65 +76,69 @@ test(function(t) {
assert_equals(effect.getComputedTiming().fill, 'both',
'Fill forwards and backwards');
}, 'fill of a new animation');
// --------------------
// iterationStart
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterationStart, 0,
'Initial value of iterationStart');
}, 'iterationStart of a new animation');
// --------------------
// iterations
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, 1,
'Initial value of iterations');
}, 'iterations of a new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2016.5'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, 2016.5,
'Initial value of iterations');
}, 'iterations of a finitely repeating animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().iterations, Infinity,
'Initial value of iterations');
}, 'iterations of an infinitely repeating animation');
// --------------------
// duration
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s -10s infinite'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().duration, 100 * MS_PER_SEC,
'Initial value of duration');
}, 'duration of a new animation');
// --------------------
// direction
// --------------------
-test(function(t) {
- var getEffectWithDir = function(dir) {
+
+test(t => {
+ var getEffectWithDir = dir => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s ' + dir});
return div.getAnimations()[0].effect;
};
var effect = getEffectWithDir('');
assert_equals(effect.getComputedTiming().direction, 'normal',
'Initial value of normal direction');
effect = getEffectWithDir('reverse');
@@ -144,171 +151,176 @@ test(function(t) {
assert_equals(effect.getComputedTiming().direction, 'alternate-reverse',
'Initial value of alternate-reverse direction');
}, 'direction of a new animation');
// --------------------
// easing
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().easing, 'linear',
'Initial value of easing');
}, 'easing of a new animation');
// ------------------------------
// endTime
// = max(start delay + active duration + end delay, 0)
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
'Initial value of endTime');
}, 'endTime of an new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s -5s'});
var effect = div.getAnimations()[0].effect;
var answer = (100 - 5) * MS_PER_SEC;
assert_equals(effect.getComputedTiming().endTime, answer,
'Initial value of endTime');
}, 'endTime of an animation with a negative delay');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s infinite'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, Infinity,
'Initial value of endTime');
}, 'endTime of an infinitely repeating animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 100s infinite'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 100 * MS_PER_SEC,
'Initial value of endTime');
}, 'endTime of an infinitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
// Fill forwards so div.getAnimations()[0] won't return an
// undefined value.
var div = addDiv(t, {style: 'animation: moveAnimation 10s -100s forwards'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().endTime, 0,
'Initial value of endTime');
}, 'endTime of an animation that finishes before its startTime');
// --------------------
// activeDuration
// = iteration duration * iteration count
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 5'});
var effect = div.getAnimations()[0].effect;
var answer = 100 * MS_PER_SEC * 5;
assert_equals(effect.getComputedTiming().activeDuration, answer,
'Initial value of activeDuration');
}, 'activeDuration of a new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s infinite'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().activeDuration, Infinity,
'Initial value of activeDuration');
}, 'activeDuration of an infinitely repeating animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 1s infinite'});
var effect = div.getAnimations()[0].effect;
// If either the iteration duration or iteration count are zero,
// the active duration is zero.
assert_equals(effect.getComputedTiming().activeDuration, 0,
'Initial value of activeDuration');
}, 'activeDuration of an infinitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 1s 0'});
var effect = div.getAnimations()[0].effect;
// If either the iteration duration or iteration count are zero,
// the active duration is zero.
assert_equals(effect.getComputedTiming().activeDuration, 0,
'Initial value of activeDuration');
}, 'activeDuration of an animation with zero iterations');
// --------------------
// localTime
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().localTime, 0,
'Initial value of localTime');
}, 'localTime of a new animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var anim = div.getAnimations()[0];
anim.currentTime = 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'current localTime after setting currentTime');
}, 'localTime of an animation is always equal to currentTime');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var anim = div.getAnimations()[0];
anim.playbackRate = 2; // 2 times faster
- return anim.ready.then(function() {
+ return anim.ready.then(() => {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(anim.effect.getComputedTiming().localTime, anim.currentTime,
'localTime is equal to currentTime');
});
}, 'localTime reflects playbackRate immediately');
-test(function(t) {
+test(t => {
var div = addDiv(t);
var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
assert_equals(effect.getComputedTiming().localTime, null,
'localTime for orphaned effect');
}, 'localTime of an AnimationEffect without an Animation');
// --------------------
// progress
// Note: Default timing function is linear.
// --------------------
-test(function(t) {
+
+test(t => {
[{fill: '', progress: [ null, null ]},
{fill: 'none', progress: [ null, null ]},
{fill: 'forwards', progress: [ null, 1.0 ]},
{fill: 'backwards', progress: [ 0.0, null ]},
{fill: 'both', progress: [ 0.0, 1.0 ]}]
- .forEach(function(test) {
+ .forEach(test => {
var div =
addDiv(t, {style: 'animation: moveAnimation 100s 10s ' + test.fill});
var anim = div.getAnimations()[0];
assert_true(anim.effect.getComputedTiming().progress === test.progress[0],
'initial progress with "' + test.fill + '" fill');
anim.finish();
assert_true(anim.effect.getComputedTiming().progress === test.progress[1],
'finished progress with "' + test.fill + '" fill');
});
}, 'progress of an animation with different fill modes');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10 both'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
@@ -318,17 +330,17 @@ test(function(t) {
anim.currentTime += 5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Value of progress');
}, 'progress of an integral repeating animation with normal direction');
-test(function(t) {
+test(t => {
var div = addDiv(t);
// Note: FillMode here is "both" because
// 1. Since this a zero-duration animation, it will already have finished
// so it won't be returned by getAnimations() unless it fills forwards.
// 2. Fill backwards, so the progress before phase wouldn't be
// unresolved (null value).
var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
var anim = div.getAnimations()[0];
@@ -337,59 +349,59 @@ test(function(t) {
'Initial value of progress in after phase');
// Seek backwards
anim.currentTime -= 1 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress before phase');
}, 'progress of an infinitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
// Default iterations = 1
var div = addDiv(t, {style: 'animation: moveAnimation 0s both'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress in after phase');
// Seek backwards
anim.currentTime -= 1 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress before phase');
}, 'progress of a finitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress (before phase)');
// Using iteration duration of 1 now.
// currentIteration now is floor(10.25) = 10, so progress should be 25%.
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress in after phase');
}, 'progress of a non-integral repeating zero-duration animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 5s 10.25 both reverse'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress (before phase)');
// Seek forwards
anim.finish();
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress in after phase');
}, 'Progress of a non-integral repeating zero-duration animation ' +
'with reversing direction');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
@@ -400,17 +412,17 @@ test(function(t) {
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
}, 'progress of a non-integral repeating animation ' +
'with alternate direction');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 10s 10.25 both alternate-reverse'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 1.0,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
@@ -421,17 +433,17 @@ test(function(t) {
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
}, 'progress of a non-integral repeating animation ' +
'with alternate-reversing direction');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
@@ -439,17 +451,17 @@ test(function(t) {
assert_equals(anim.effect.getComputedTiming().progress, 0.0,
'Value of progress');
anim.finish()
assert_equals(anim.effect.getComputedTiming().progress, 0.25,
'Value of progress');
}, 'progress of a non-integral repeating zero-duration animation ' +
'with alternate direction');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.25 both alternate-reverse'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Initial value of progress');
anim.currentTime += 2.5 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().progress, 0.75,
'Value of progress');
@@ -461,32 +473,33 @@ test(function(t) {
'Value of progress');
}, 'progress of a non-integral repeating zero-duration animation ' +
'with alternate-reverse direction');
// --------------------
// currentIteration
// --------------------
-test(function(t) {
+
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2s'});
var effect = div.getAnimations()[0].effect;
assert_equals(effect.getComputedTiming().currentIteration, null,
'Initial value of currentIteration before phase');
}, 'currentIteration of a new animation with no backwards fill is unresolved ' +
'in before phase');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
}, 'currentIteration of a new animation is zero');
-test(function(t) {
+test(t => {
// Note: FillMode here is "both" because
// 1. Since this a zero-duration animation, it will already have finished
// so it won't be returned by getAnimations() unless it fills forwards.
// 2. Fill backwards, so the currentIteration (before phase) wouldn't be
// unresolved (null value).
var div = addDiv(t, {style: 'animation: moveAnimation 0s infinite both'});
var anim = div.getAnimations()[0];
@@ -494,71 +507,71 @@ test(function(t) {
'Initial value of currentIteration in after phase');
// Seek backwards
anim.currentTime -= 2 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration count during before phase');
}, 'currentIteration of an infinitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 0s 10.5 both'});
var anim = div.getAnimations()[0];
// Note: currentIteration = ceil(iteration start + iteration count) - 1
assert_equals(anim.effect.getComputedTiming().currentIteration, 10,
'Initial value of currentIteration');
// Seek backwards
anim.currentTime -= 2 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration count during before phase');
}, 'currentIteration of a finitely repeating zero-duration animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 5.5 forwards'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// The 3rd iteration
// Note: currentIteration = floor(scaled active time / iteration duration)
anim.currentTime = 250 * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().currentIteration, 2,
'Value of currentIteration during the 3rd iteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 5,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with a non-integral iteration count');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s 2 forwards'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 1,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with an integral iteration count');
-test(function(t) {
+test(t => {
var div = addDiv(t, {style: 'animation: moveAnimation 100s forwards'});
var anim = div.getAnimations()[0];
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Initial value of currentIteration');
// Finish
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0,
'Value of currentIteration in after phase');
}, 'currentIteration of an animation with a default iteration count');
-test(function(t) {
+test(t => {
var div = addDiv(t);
var effect = new KeyframeEffect(div, {left: ["0px", "100px"]});
assert_equals(effect.getComputedTiming().currentIteration, null,
'currentIteration for orphaned effect');
}, 'currentIteration of an AnimationEffect without an Animation');
// TODO: If iteration duration is Infinity, currentIteration is 0.
--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/dom/animation/test/css-animations/test_animation-currenttime.html
@@ -40,18 +40,17 @@
// TODO: Once the computedTiming property is implemented, add checks to the
// checker helpers to ensure that computedTiming's properties are updated as
// expected.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
const CSS_ANIM_EVENTS =
['animationstart', 'animationiteration', 'animationend'];
-test(function(t)
-{
+test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
var animation = div.getAnimations()[0];
// Animations shouldn't start until the next paint tick, so:
assert_equals(animation.currentTime, 0,
'Animation.currentTime should be zero when an animation ' +
'is initially created');
@@ -60,286 +59,284 @@ test(function(t)
animation.startTime = animation.timeline.currentTime;
animation.currentTime = 50 * MS_PER_SEC;
assert_time_equals_literal(animation.currentTime, 50 * MS_PER_SEC,
'Check setting of currentTime actually works');
}, 'Sanity test to check round-tripping assigning to new animation\'s ' +
'currentTime');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
// the 0.0001 here is for rounding error
assert_less_than_equal(animation.currentTime,
animation.timeline.currentTime - animation.startTime + 0.0001,
'Animation.currentTime should be less than the local time ' +
'equivalent of the timeline\'s currentTime on the first paint tick ' +
'after animation creation');
animation.currentTime = 100 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
- }).then(function() {
+ }).then(() => {
animation.currentTime = 200 * MS_PER_SEC;
return eventWatcher.wait_for('animationend');
});
}, 'Skipping forward through animation');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
animation.currentTime = 200 * MS_PER_SEC;
var previousTimelineTime = animation.timeline.currentTime;
- return eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
assert_true(document.timeline.currentTime - previousTimelineTime <
100 * MS_PER_SEC,
'Sanity check that seeking worked rather than the events ' +
'firing after normal playback through the very long ' +
'animation duration');
animation.currentTime = 150 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
- }).then(function() {
+ }).then(() => {
animation.currentTime = 0;
return eventWatcher.wait_for('animationend');
});
}, 'Skipping backwards through animation');
// Next we have multiple tests to check that redundant currentTime changes do
// NOT dispatch events. It's impossible to distinguish between events not being
// dispatched and events just taking an incredibly long time to dispatch
// without waiting an infinitely long time. Obviously we don't want to do that
// (block this test from finishing forever), so instead we just listen for
// events until two animation frames (i.e. requestAnimationFrame callbacks)
// have happened, then assume that no events will ever be dispatched for the
// redundant changes if no events were detected in that time.
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
animation.currentTime = 150 * MS_PER_SEC;
animation.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
animation.currentTime = 250 * MS_PER_SEC;
animation.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+ var retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.currentTime = 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> before, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+ var retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.currentTime = 250 * MS_PER_SEC;
animation.currentTime = 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> after, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ 'animationend']).then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.currentTime = 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> before, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ 'animationend']).then(() => {
animation.currentTime = 150 * MS_PER_SEC;
animation.currentTime = 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.currentTime = 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> active, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s"
var animation = div.getAnimations()[0];
animation.pause();
animation.currentTime = 150 * MS_PER_SEC;
- return eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ return eventWatcher.wait_for(['animationstart', 'animationend']).then(() => {
animation.currentTime = 50 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
});
}, 'Seeking finished -> paused dispatches animationstart');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
var exception;
try {
animation.currentTime = null;
} catch (e) {
exception = e;
}
assert_equals(exception.name, 'TypeError',
'Expect TypeError exception on trying to set ' +
'Animation.currentTime to null');
});
}, 'Setting currentTime to null');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
var pauseTime;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_not_equals(animation.currentTime, null,
'Animation.currentTime not null on ready Promise resolve');
animation.pause();
return animation.ready;
- }).then(function() {
+ }).then(() => {
pauseTime = animation.currentTime;
return waitForFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(animation.currentTime, pauseTime,
'Animation.currentTime is unchanged after pausing');
});
}, 'Animation.currentTime after pausing');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
// just before animation ends:
animation.currentTime = 100 * MS_PER_SEC - 1;
return waitForAnimationFrames(2);
- }).then(function() {
+ }).then(() => {
assert_equals(animation.currentTime, 100 * MS_PER_SEC,
'Animation.currentTime should not continue to increase after the ' +
'animation has finished');
});
}, 'Animation.currentTime clamping');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = "anim 100s";
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
// play backwards:
animation.playbackRate = -1;
// just before animation ends (at the "start"):
animation.currentTime = 1;
return waitForAnimationFrames(2);
- }).then(function() {
+ }).then(() => {
assert_equals(animation.currentTime, 0,
'Animation.currentTime should not continue to decrease after an ' +
'animation running in reverse has finished and currentTime is zero');
});
}, 'Animation.currentTime clamping for reversed animation');
-test(function(t) {
+test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
animation.cancel();
assert_equals(animation.currentTime, null,
'The currentTime of a cancelled animation should be null');
}, 'Animation.currentTime after cancelling');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.finish();
// Initiate a pause then abort it
animation.pause();
animation.play();
// Wait to return to running state
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_true(animation.currentTime < 100 * 1000,
'After aborting a pause when finished, the currentTime should'
+ ' jump back towards the start of the animation');
});
}, 'After aborting a pause when finished, the call to play() should rewind'
+ ' the current time');
</script>
--- a/dom/animation/test/css-animations/test_animation-finish.html
+++ b/dom/animation/test/css-animations/test_animation-finish.html
@@ -13,17 +13,17 @@
<div id="log"></div>
<script>
'use strict';
const ANIM_PROP_VAL = 'anim 100s';
const ANIM_DURATION = 100000; // ms
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
div.style.animationIterationCount = 'infinite';
var animation = div.getAnimations()[0];
var threw = false;
try {
animation.finish();
@@ -33,35 +33,35 @@ test(function(t) {
'Exception should be an InvalidStateError exception when ' +
'trying to finish an infinite animation');
}
assert_true(threw,
'Expect InvalidStateError exception trying to finish an ' +
'infinite animation');
}, 'Test exceptions when finishing infinite animation');
-async_test(function(t) {
+async_test(t => {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
- animation.ready.then(t.step_func(function() {
+ animation.ready.then(t.step_func(() => {
animation.finish();
assert_equals(animation.playState, 'finished',
'The play state of a paused animation should become ' +
'"finished" after finish() is called');
assert_times_equal(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION,
'The start time of a paused animation should be set ' +
'after calling finish()');
t.done();
}));
}, 'Test finish() while paused');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
// Update playbackRate so we can test that the calculated startTime
// respects it
animation.playbackRate = 2;
@@ -72,17 +72,17 @@ test(function(t) {
'The play state of a pause-pending animation should become ' +
'"finished" after finish() is called');
assert_times_equal(animation.startTime,
animation.timeline.currentTime - ANIM_DURATION / 2,
'The start time of a pause-pending animation should ' +
'be set after calling finish()');
}, 'Test finish() while pause-pending with positive playbackRate');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL + ' paused';
var animation = div.getAnimations()[0];
animation.playbackRate = -2;
animation.finish();
assert_equals(animation.playState, 'finished',
--- a/dom/animation/test/css-animations/test_animation-finished.html
+++ b/dom/animation/test/css-animations/test_animation-finished.html
@@ -12,81 +12,81 @@
<body>
<div id="log"></div>
<script>
'use strict';
const ANIM_PROP_VAL = 'abc 100s';
const ANIM_DURATION = 100 * MS_PER_SEC;
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
var previousFinishedPromise = animation.finished;
// Set up listeners on finished promise
- var retPromise = animation.finished.then(function() {
+ var retPromise = animation.finished.then(() => {
assert_unreached('finished promise is fulfilled');
- }).catch(function(err) {
+ }).catch(err => {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' +
'rejected');
});
// Now cancel the animation and flush styles
div.style.animation = '';
getComputedStyle(div).animation;
return retPromise;
}, 'finished promise is rejected when an animation is cancelled by resetting ' +
'the animation property');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
var previousFinishedPromise = animation.finished;
// Set up listeners on finished promise
- var retPromise = animation.finished.then(function() {
+ var retPromise = animation.finished.then(() => {
assert_unreached('finished promise was fulfilled');
- }).catch(function(err) {
+ }).catch(err => {
assert_equals(err.name, 'AbortError',
'finished promise is rejected with AbortError');
assert_not_equals(animation.finished, previousFinishedPromise,
'Finished promise should change after the original is ' +
'rejected');
});
// Now update the animation and flush styles
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
return retPromise;
}, 'finished promise is rejected when an animation is cancelled by changing ' +
'the animation property');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = ANIM_PROP_VAL;
var animation = div.getAnimations()[0];
var previousFinishedPromise = animation.finished;
animation.currentTime = ANIM_DURATION;
- return animation.finished.then(function() {
+ return animation.finished.then(() => {
div.style.animationPlayState = 'running';
return waitForAnimationFrames(2);
- }).then(function() {
+ }).then(() => {
assert_equals(animation.finished, previousFinishedPromise,
'Should not replay when animation-play-state changes to ' +
'"running" on finished animation');
assert_equals(animation.currentTime, ANIM_DURATION,
'currentTime should not change when animation-play-state ' +
'changes to "running" on finished animation');
});
}, 'Test finished promise changes when animationPlayState set to running');
--- a/dom/animation/test/css-animations/test_animation-id.html
+++ b/dom/animation/test/css-animations/test_animation-id.html
@@ -6,17 +6,17 @@
<style>
@keyframes abc { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];
assert_equals(animation.id, '', 'id for CSS Animation is initially empty');
animation.id = 'anim'
assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
}, 'Animation.id for CSS Animations');
--- a/dom/animation/test/css-animations/test_animation-pausing.html
+++ b/dom/animation/test/css-animations/test_animation-pausing.html
@@ -9,109 +9,107 @@
100% { margin-left: 10000px }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-function getMarginLeft(cs) {
- return parseFloat(cs.marginLeft);
-}
+const getMarginLeft = cs => parseFloat(cs.marginLeft);
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
- return animation.ready.then(waitForNextFrame).then(function() {
+ return animation.ready.then(waitForNextFrame).then(() => {
assert_greater_than(getMarginLeft(cs), 0,
'Playing value of margin-left is greater than zero');
});
}, 'play() overrides animation-play-state');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.pause();
div.style.animationPlayState = 'running';
- return animation.ready.then(waitForNextFrame).then(function() {
+ return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
assert_equals(getMarginLeft(cs), 0,
'Paused value of margin-left is zero');
});
}, 'pause() overrides animation-play-state');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
animation.play();
var previousAnimVal;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'running';
cs.animationPlayState; // Trigger style resolution
return waitForNextFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
div.style.animationPlayState = 'paused';
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_equals(cs.animationPlayState, 'paused',
'animation-play-state is paused');
previousAnimVal = getMarginLeft(cs);
return waitForNextFrame();
- }).then(function() {
+ }).then(() => {
assert_equals(getMarginLeft(cs), previousAnimVal,
'Animated value of margin-left does not change when'
+ ' paused by style');
});
}, 'play() is overridden by later setting "animation-play-state: paused"');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Set the specified style first. If implementations fail to
// apply the style changes first, they will ignore the redundant
// call to play() and fail to correctly override the pause style.
div.style.animationPlayState = 'paused';
animation.play();
var previousAnimVal = getMarginLeft(cs);
- return animation.ready.then(waitForNextFrame).then(function() {
+ return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'paused',
'animation-play-state is paused');
assert_greater_than(getMarginLeft(cs), previousAnimVal,
'Playing value of margin-left is increasing');
});
}, 'play() flushes pending changes to animation-play-state first');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
assert_equals(getMarginLeft(cs), 0,
'Initial value of margin-left is zero');
// Unlike the previous test for play(), since calling pause() is sticky,
@@ -123,31 +121,31 @@ promise_test(function(t) {
// (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
//
// For now this just serves as a sanity check that we do the same thing
// even if we set style before calling the API.
div.style.animationPlayState = 'running';
animation.pause();
var previousAnimVal = getMarginLeft(cs);
- return animation.ready.then(waitForNextFrame).then(function() {
+ return animation.ready.then(waitForNextFrame).then(() => {
assert_equals(cs.animationPlayState, 'running',
'animation-play-state is running');
assert_equals(getMarginLeft(cs), previousAnimVal,
'Paused value of margin-left does not change');
});
}, 'pause() applies pending changes to animation-play-state first');
// (Note that we can't actually test for this; see comment above, in test-body.)
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: anim 1000s' });
var animation = div.getAnimations()[0];
var readyPromiseRun = false;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
assert_true(animation.pending && animation.playState === 'paused',
'Animation is pause-pending');
// Set current time
animation.currentTime = 5 * MS_PER_SEC;
assert_equals(animation.playState, 'paused',
'Animation is paused immediately after setting currentTime');
--- a/dom/animation/test/css-animations/test_animation-playstate.html
+++ b/dom/animation/test/css-animations/test_animation-playstate.html
@@ -6,55 +6,55 @@
<style>
@keyframes anim { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
var animation = div.getAnimations()[0];
assert_equals(animation.playState, 'running');
}, 'Animation returns correct playState when running');
-test(function(t) {
+test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
assert_equals(animation.playState, 'paused');
}, 'Animation returns correct playState when paused');
-test(function(t) {
+test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
var animation = div.getAnimations()[0];
animation.pause();
assert_equals(animation.playState, 'paused');
}, 'Animation.playState updates when paused by script');
-test(function(t) {
+test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s paused';
var animation = div.getAnimations()[0];
div.style.animationPlayState = 'running';
// This test also checks that calling playState flushes style
assert_equals(animation.playState, 'running',
'Animation.playState reports running after updating'
+ ' animation-play-state (got: ' + animation.playState + ')');
}, 'Animation.playState updates when resumed by setting style');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim 1000s';
var animation = div.getAnimations()[0];
animation.cancel();
assert_equals(animation.playState, 'idle');
}, 'Animation returns correct playState when cancelled');
</script>
--- a/dom/animation/test/css-animations/test_animation-ready.html
+++ b/dom/animation/test/css-animations/test_animation-ready.html
@@ -8,141 +8,141 @@
to { transform: translate(10px) }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'abc 100s paused';
var animation = div.getAnimations()[0];
var originalReadyPromise = animation.ready;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'running';
assert_not_equals(animation.ready, originalReadyPromise,
'After updating animation-play-state a new ready promise'
+ ' object is created');
});
}, 'A new ready promise is created when setting animation-play-state: running');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// Set up pending animation
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
// Set up listeners on ready promise
- var retPromise = animation.ready.then(function() {
+ var retPromise = animation.ready.then(() => {
assert_unreached('ready promise is fulfilled');
- }).catch(function(err) {
+ }).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now cancel the animation and flush styles
div.style.animation = '';
getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is canceled by resetting'
+ ' the animation property');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// As before, but this time instead of removing all animations, simply update
// the list of animations. At least for Firefox, updating is a different
// code path.
// Set up pending animation
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];
assert_true(animation.pending, 'Animation is initially pending');
// Set up listeners on ready promise
- var retPromise = animation.ready.then(function() {
+ var retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
- }).catch(function(err) {
+ }).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
// Now update the animation and flush styles
div.style.animation = 'def 100s';
getComputedStyle(div).animation;
return retPromise;
}, 'ready promise is rejected when an animation is cancelled by updating'
+ ' the animation property');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
var originalReadyPromise = animation.ready;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
assert_not_equals(animation.ready, originalReadyPromise,
'A new Promise object is generated when setting'
+ ' animation-play-state: paused');
});
}, 'A new ready promise is created when setting animation-play-state: paused');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
var firstReadyPromise = animation.ready;
animation.pause();
assert_equals(animation.ready, firstReadyPromise,
'Ready promise objects are identical after redundant pause');
});
}, 'Pausing twice re-uses the same Promise');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
// Flush style and verify we're pending at the same time
assert_true(animation.pending, 'Animation is pending');
var pauseReadyPromise = animation.ready;
// Now play again immediately
div.style.animationPlayState = 'running';
assert_true(animation.pending, 'Animation is still pending');
assert_equals(animation.ready, pauseReadyPromise,
'The pause Promise is re-used when playing while waiting'
+ ' to pause');
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_true(!animation.pending && animation.playState === 'running',
'Animation is running after aborting a pause');
});
}, 'If a pause operation is interrupted, the ready promise is reused');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: abc 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
return animation.ready;
- }).then(function(resolvedAnimation) {
+ }).then(resolvedAnimation => {
assert_equals(resolvedAnimation, animation,
'Promise received when ready Promise for a pause operation'
+ ' is completed is the animation on which the pause was'
+ ' performed');
});
}, 'When a pause is complete the Promise callback gets the correct animation');
</script>
--- a/dom/animation/test/css-animations/test_animation-reverse.html
+++ b/dom/animation/test/css-animations/test_animation-reverse.html
@@ -8,17 +8,17 @@
to { transform: translate(100px) }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: anim 100s' });
var animation = div.getAnimations()[0];
div.style.animation = "";
flushComputedStyle(div);
assert_equals(animation.currentTime, null);
animation.reverse();
--- a/dom/animation/test/css-animations/test_animation-starttime.html
+++ b/dom/animation/test/css-animations/test_animation-starttime.html
@@ -40,345 +40,339 @@
// TODO: Once the computedTiming property is implemented, add checks to the
// checker helpers to ensure that computedTiming's properties are updated as
// expected.
// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055
const CSS_ANIM_EVENTS =
['animationstart', 'animationiteration', 'animationend'];
-test(function(t)
-{
+test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s' });
var animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (play-pending) animation is unresolved');
-test(function(t)
-{
+test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
var animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime of a newly created (pause-pending) animation is unresolved');
-promise_test(function(t)
-{
+promise_test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_true(animation.startTime > 0,
'startTime is resolved when running');
});
}, 'startTime is resolved when running');
-promise_test(function(t)
-{
+promise_test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_equals(animation.startTime, null,
'startTime is unresolved when paused');
});
}, 'startTime is unresolved when paused');
-promise_test(function(t)
-{
+promise_test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s' });
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
div.style.animationPlayState = 'paused';
getComputedStyle(div).animationPlayState;
assert_not_equals(animation.startTime, null,
'startTime is resolved when pause-pending');
div.style.animationPlayState = 'running';
getComputedStyle(div).animationPlayState;
assert_not_equals(animation.startTime, null,
'startTime is preserved when a pause is aborted');
});
}, 'startTime while pause-pending and play-pending');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s' });
var animation = div.getAnimations()[0];
// Seek to end to put us in the finished state
animation.currentTime = 100 * MS_PER_SEC;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
// Call play() which puts us back in the running state
animation.play();
assert_equals(animation.startTime, null, 'startTime is unresolved');
});
}, 'startTime while play-pending from finished state');
-test(function(t) {
+test(t => {
var div = addDiv(t, { 'style': 'animation: anim 100s' });
var animation = div.getAnimations()[0];
animation.finish();
// Call play() which puts us back in the running state
animation.play();
assert_equals(animation.startTime, null, 'startTime is unresolved');
}, 'startTime while play-pending from finished state using finish()');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, { style: 'animation: anim 100s' });
var animation = div.getAnimations()[0];
assert_equals(animation.startTime, null, 'The initial startTime is null');
var initialTimelineTime = document.timeline.currentTime;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_true(animation.startTime > initialTimelineTime,
'After the animation has started, startTime is greater than ' +
'the time when it was started');
var startTimeBeforePausing = animation.startTime;
div.style.animationPlayState = 'paused';
// Flush styles just in case querying animation.startTime doesn't flush
// styles (which would be a bug in of itself and could mask a further bug
// by causing startTime to appear to not change).
getComputedStyle(div).animationPlayState;
assert_equals(animation.startTime, startTimeBeforePausing,
'The startTime does not change when pausing-pending');
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_equals(animation.startTime, null,
'After actually pausing, the startTime of an animation ' +
'is null');
});
}, 'Pausing should make the startTime become null');
-test(function(t)
-{
+test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
var animation = div.getAnimations()[0];
var currentTime = animation.timeline.currentTime;
animation.startTime = currentTime;
assert_times_equal(animation.startTime, currentTime,
'Check setting of startTime actually works');
}, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
'startTime');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = 'anim 100s 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
'Animation.startTime should be less than the timeline\'s ' +
'currentTime on the first paint tick after animation creation');
animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
- }).then(function() {
+ }).then(() => {
animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
return eventWatcher.wait_for('animationend');
});
}, 'Skipping forward through animation');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = 'anim 100s 100s';
var animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
var previousTimelineTime = animation.timeline.currentTime;
return eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ 'animationend']).then(() => {
assert_true(document.timeline.currentTime - previousTimelineTime <
100 * MS_PER_SEC,
'Sanity check that seeking worked rather than the events ' +
'firing after normal playback through the very long ' +
'animation duration');
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
// Despite going backwards from after the end of the animation (to being
// in the active interval), we now expect an 'animationstart' event
// because the animation should go from being inactive to active.
return eventWatcher.wait_for('animationstart');
- }).then(function() {
+ }).then(() => {
animation.startTime = animation.timeline.currentTime;
// Despite going backwards from just after the active interval starts to
// the animation start time, we now expect an animationend event
// because we went from inside to outside the active interval.
return eventWatcher.wait_for('animationend');
- }).then(function() {
+ }).then(() => {
assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
'Animation.startTime should be less than the timeline\'s ' +
'currentTime on the first paint tick after animation creation');
});
}, 'Skipping backwards through animation');
// Next we have multiple tests to check that redundant startTime changes do NOT
// dispatch events. It's impossible to distinguish between events not being
// dispatched and events just taking an incredibly long time to dispatch
// without waiting an infinitely long time. Obviously we don't want to do that
// (block this test from finishing forever), so instead we just listen for
// events until two animation frames (i.e. requestAnimationFrame callbacks)
// have happened, then assume that no events will ever be dispatched for the
// redundant changes if no events were detected in that time.
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> active, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
return waitForAnimationFrames(2);
}, 'Redundant change, before -> after, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+ var retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> before, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
- var retPromise = eventWatcher.wait_for('animationstart').then(function() {
+ var retPromise = eventWatcher.wait_for('animationstart').then(() => {
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, active -> after, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ 'animationend']).then(() => {
animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> before, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
div.style.animation = "anim 100s 100s";
var animation = div.getAnimations()[0];
var retPromise = eventWatcher.wait_for(['animationstart',
- 'animationend']).then(function() {
+ 'animationend']).then(() => {
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return waitForAnimationFrames(2);
});
// get us into the initial state:
animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
return retPromise;
}, 'Redundant change, after -> active, then back');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s 100s';
var animation = div.getAnimations()[0];
var storedCurrentTime;
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
storedCurrentTime = animation.currentTime;
animation.startTime = null;
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_equals(animation.currentTime, storedCurrentTime,
'Test that hold time is correct');
});
}, 'Setting startTime to null');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
var savedStartTime = animation.startTime;
assert_not_equals(animation.startTime, null,
'Animation.startTime not null on ready Promise resolve');
animation.pause();
return animation.ready;
- }).then(function() {
+ }).then(() => {
assert_equals(animation.startTime, null,
'Animation.startTime is null after paused');
assert_equals(animation.playState, 'paused',
'Animation.playState is "paused" after pause() call');
});
}, 'Animation.startTime after pausing');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t, {'class': 'animated-div'});
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.cancel();
assert_equals(animation.startTime, null,
'The startTime of a cancelled animation should be null');
});
}, 'Animation.startTime after cancelling');
</script>
</body>
--- a/dom/animation/test/css-animations/test_animations-dynamic-changes.html
+++ b/dom/animation/test/css-animations/test_animations-dynamic-changes.html
@@ -9,49 +9,49 @@
}
@keyframes anim2 { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var originalAnimation = div.getAnimations()[0];
var originalStartTime;
var originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time).
- return originalAnimation.ready.then(function() {
+ return originalAnimation.ready.then(() => {
originalStartTime = originalAnimation.startTime;
originalCurrentTime = originalAnimation.currentTime;
// Wait a moment so we can confirm the startTime doesn't change (and
// doesn't simply reflect the current time).
return waitForNextFrame();
- }).then(function() {
+ }).then(() => {
div.style.animationDuration = '200s';
var animation = div.getAnimations()[0];
assert_equals(animation, originalAnimation,
'The same Animation is returned after updating'
+ ' animation duration');
assert_equals(animation.startTime, originalStartTime,
'Animations returned by getAnimations preserve'
+ ' their startTime even when they are updated');
// Sanity check
assert_not_equals(animation.currentTime, originalCurrentTime,
'Animation.currentTime has updated in next'
+ ' requestAnimationFrame callback');
});
}, 'Animations preserve their startTime when changed');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
@@ -59,98 +59,98 @@ test(function(t) {
div.style.animationDuration = '200s, 100s';
animations = div.getAnimations();
assert_equals(animations[0], animation1,
'First Animation is in same position after update');
assert_equals(animations[1], animation2,
'Second Animation is in same position after update');
}, 'Updated Animations maintain their order in the list');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the
// new Animation objects and existing Animation objects will all have the same
// start time).
- return waitForAllAnimations(animations).then(waitForFrame).then(function() {
+ return waitForAllAnimations(animations).then(waitForFrame).then(() => {
// Swap duration of first and second in list and prepend animation at the
// same time
div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
animations = div.getAnimations();
assert_true(animations[0] !== animation1 && animations[0] !== animation2,
'New Animation is prepended to start of list');
assert_equals(animations[1], animation1,
'First Animation is in second position after update');
assert_equals(animations[2], animation2,
'Second Animation is in third position after update');
assert_equals(animations[1].startTime, animations[2].startTime,
'Old Animations have the same start time');
// TODO: Check that animations[0].startTime === null
return animations[0].ready;
- }).then(function() {
+ }).then(() => {
assert_greater_than(animations[0].startTime, animations[1].startTime,
'New Animation has later start time');
});
}, 'Only the startTimes of existing animations are preserved');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
var secondAnimation = div.getAnimations()[1];
// Wait before continuing so we can compare start times
- return secondAnimation.ready.then(waitForNextFrame).then(function() {
+ return secondAnimation.ready.then(waitForNextFrame).then(() => {
// Trim list of animations
div.style.animationName = 'anim1';
var animations = div.getAnimations();
assert_equals(animations.length, 1, 'List of Animations was trimmed');
assert_equals(animations[0], secondAnimation,
'Remaining Animation is the second one in the list');
assert_equals(typeof(animations[0].startTime), 'number',
'Remaining Animation has resolved startTime');
assert_less_than(animations[0].startTime,
animations[0].timeline.currentTime,
'Remaining Animation preserves startTime');
});
}, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing Animations');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var firstAddedAnimation = div.getAnimations()[0],
secondAddedAnimation,
animations;
// Wait and add second Animation
- return firstAddedAnimation.ready.then(waitForFrame).then(function() {
+ return firstAddedAnimation.ready.then(waitForFrame).then(() => {
div.style.animation = 'anim1 100s, anim1 100s';
secondAddedAnimation = div.getAnimations()[0];
// Wait again and add another Animation
return secondAddedAnimation.ready.then(waitForFrame);
- }).then(function() {
+ }).then(() => {
div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
animations = div.getAnimations();
assert_not_equals(firstAddedAnimation, secondAddedAnimation,
'New Animations are added to start of the list');
assert_equals(animations[0], secondAddedAnimation,
'Second Animation remains in same position after'
+ ' interleaving');
assert_equals(animations[2], firstAddedAnimation,
'First Animation remains in same position after'
+ ' interleaving');
return animations[1].ready;
- }).then(function() {
+ }).then(() => {
assert_greater_than(animations[1].startTime, animations[0].startTime,
'Interleaved animation starts later than existing ' +
'animations');
assert_greater_than(animations[0].startTime, animations[2].startTime,
'Original animations retain their start time');
});
}, 'Animation state is preserved when interleaving animations in list');
--- a/dom/animation/test/css-animations/test_cssanimation-animationname.html
+++ b/dom/animation/test/css-animations/test_cssanimation-animationname.html
@@ -8,31 +8,31 @@
to { left: 100px }
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'xyz 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Animation name matches keyframes rule name');
}, 'Animation name makes keyframe rule');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'x\\yz 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Escaped animation name matches keyframes rule name');
}, 'Escaped animation name');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'x\\79 z 100s';
assert_equals(div.getAnimations()[0].animationName, 'xyz',
'Hex-escaped animation name matches keyframes rule'
+ ' name');
}, 'Animation name with hex-escape');
</script>
--- a/dom/animation/test/css-animations/test_document-get-animations.html
+++ b/dom/animation/test/css-animations/test_document-get-animations.html
@@ -23,23 +23,23 @@
content: ''
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
assert_equals(document.getAnimations().length, 0,
'getAnimations returns an empty sequence for a document'
+ ' with no animations');
}, 'getAnimations for non-animated content');
-test(function(t) {
+test(t => {
var div = addDiv(t);
// Add an animation
div.style.animation = 'animLeft 100s';
assert_equals(document.getAnimations().length, 1,
'getAnimations returns a running CSS Animation');
// Add another animation
@@ -48,17 +48,17 @@ test(function(t) {
'getAnimations returns two running CSS Animations');
// Remove both
div.style.animation = '';
assert_equals(document.getAnimations().length, 0,
'getAnimations returns no running CSS Animations');
}, 'getAnimations for CSS Animations');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'animLeft 100s, animTop 100s, animRight 100s, ' +
'animBottom 100s';
var animations = document.getAnimations();
assert_equals(animations.length, 4,
'getAnimations returns all running CSS Animations');
assert_equals(animations[0].animationName, 'animLeft',
@@ -66,17 +66,17 @@ test(function(t) {
assert_equals(animations[1].animationName, 'animTop',
'Order of second animation returned');
assert_equals(animations[2].animationName, 'animRight',
'Order of third animation returned');
assert_equals(animations[3].animationName, 'animBottom',
'Order of fourth animation returned');
}, 'Order of CSS Animations - within an element');
-test(function(t) {
+test(t => {
var div1 = addDiv(t, { style: 'animation: animLeft 100s' });
var div2 = addDiv(t, { style: 'animation: animLeft 100s' });
var div3 = addDiv(t, { style: 'animation: animLeft 100s' });
var div4 = addDiv(t, { style: 'animation: animLeft 100s' });
var animations = document.getAnimations();
assert_equals(animations.length, 4,
'getAnimations returns all running CSS Animations');
@@ -107,27 +107,27 @@ test(function(t) {
'Order of second animation returned after tree surgery');
assert_equals(animations[2].effect.target, div4,
'Order of third animation returned after tree surgery');
assert_equals(animations[3].effect.target, div3,
'Order of fourth animation returned after tree surgery');
}, 'Order of CSS Animations - across elements');
-test(function(t) {
+test(t => {
var div1 = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
var div2 = addDiv(t, { style: 'animation: animBottom 100s' });
var expectedResults = [ [ div1, 'animLeft' ],
[ div1, 'animTop' ],
[ div2, 'animBottom' ] ];
var animations = document.getAnimations();
assert_equals(animations.length, expectedResults.length,
'getAnimations returns all running CSS Animations');
- animations.forEach(function(anim, i) {
+ animations.forEach((anim, i) => {
assert_equals(anim.effect.target, expectedResults[i][0],
'Target of animation in position ' + i);
assert_equals(anim.animationName, expectedResults[i][1],
'Name of animation in position ' + i);
});
// Modify tree structure and animation list
div2.appendChild(div1);
@@ -136,25 +136,25 @@ test(function(t) {
expectedResults = [ [ div2, 'animBottom' ],
[ div1, 'animLeft' ],
[ div1, 'animRight' ],
[ div1, 'animTop' ] ];
animations = document.getAnimations();
assert_equals(animations.length, expectedResults.length,
'getAnimations returns all running CSS Animations after ' +
'making changes');
- animations.forEach(function(anim, i) {
+ animations.forEach((anim, i) => {
assert_equals(anim.effect.target, expectedResults[i][0],
'Target of animation in position ' + i + ' after changes');
assert_equals(anim.animationName, expectedResults[i][1],
'Name of animation in position ' + i + ' after changes');
});
}, 'Order of CSS Animations - across and within elements');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
var animLeft = document.getAnimations()[0];
assert_equals(animLeft.animationName, 'animLeft',
'Originally, animLeft animation comes first');
// Disassociate animLeft from markup and restart
div.style.animation = 'animTop 100s';
animLeft.play();
@@ -162,17 +162,17 @@ test(function(t) {
var animations = document.getAnimations();
assert_equals(animations.length, 2,
'getAnimations returns markup-bound and free animations');
assert_equals(animations[0].animationName, 'animTop',
'Markup-bound animations come first');
assert_equals(animations[1], animLeft, 'Free animations come last');
}, 'Order of CSS Animations - markup-bound vs free animations');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s, animTop 100s' });
var animLeft = document.getAnimations()[0];
var animTop = document.getAnimations()[1];
// Disassociate both animations from markup and restart in opposite order
div.style.animation = '';
animTop.play();
animLeft.play();
@@ -188,17 +188,17 @@ test(function(t) {
// Restarting an animation should have no effect
animTop.cancel();
animTop.play();
assert_equals(document.getAnimations()[0], animTop,
'After restarting, the ordering of free animations' +
' does not change');
}, 'Order of CSS Animations - free animations');
-test(function(t) {
+test(t => {
// Add an animation first
var div = addDiv(t, { style: 'animation: animLeft 100s' });
div.style.top = '0px';
div.style.transition = 'all 100s';
flushComputedStyle(div);
// *Then* add a transition
div.style.top = '100px';
@@ -207,54 +207,54 @@ test(function(t) {
// Although the transition was added later, it should come first in the list
var animations = document.getAnimations();
assert_equals(animations.length, 2,
'Both CSS animations and transitions are returned');
assert_class_string(animations[0], 'CSSTransition', 'Transition comes first');
assert_class_string(animations[1], 'CSSAnimation', 'Animation comes second');
}, 'Order of CSS Animations and CSS Transitions');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s forwards' });
div.getAnimations()[0].finish();
assert_equals(document.getAnimations().length, 1,
'Forwards-filling CSS animations are returned');
}, 'Finished but filling CSS Animations are returned');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s' });
div.getAnimations()[0].finish();
assert_equals(document.getAnimations().length, 0,
'Non-filling finished CSS animations are not returned');
}, 'Finished but not filling CSS Animations are not returned');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s 100s' });
assert_equals(document.getAnimations().length, 1,
'Yet-to-start CSS animations are returned');
}, 'Yet-to-start CSS Animations are returned');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s' });
div.getAnimations()[0].cancel();
assert_equals(document.getAnimations().length, 0,
'CSS animations cancelled by the API are not returned');
}, 'CSS Animations cancelled via the API are not returned');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: animLeft 100s' });
var anim = div.getAnimations()[0];
anim.cancel();
anim.play();
assert_equals(document.getAnimations().length, 1,
'CSS animations cancelled and restarted by the API are ' +
'returned');
}, 'CSS Animations cancelled and restarted via the API are returned');
-test(function(t) {
+test(t => {
addStyle(t, { '#parent::after': 'animation: animLeft 10s;',
'#parent::before': 'animation: animRight 10s;' });
// create two divs with these arrangement:
// parent
// ::before,
// ::after
// |
// child
--- a/dom/animation/test/css-animations/test_effect-target.html
+++ b/dom/animation/test/css-animations/test_effect-target.html
@@ -12,35 +12,35 @@
content: ''
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
assert_equals(animation.effect.target, div,
'Animation.target is the animatable div');
}, 'Returned CSS animations have the correct effect target');
-test(function(t) {
+test(t => {
addStyle(t, { '.after::after': 'animation: anim 10s, anim 100s;' });
var div = addDiv(t, { class: 'after' });
var anims = document.getAnimations();
assert_equals(anims.length, 2,
'Got animations running on ::after pseudo element');
assert_equals(anims[0].effect.target, anims[1].effect.target,
'Both animations return the same target object');
}, 'effect.target should return the same CSSPseudoElement object each time');
-test(function(t) {
+test(t => {
addStyle(t, { '.after::after': 'animation: anim 10s;' });
var div = addDiv(t, { class: 'after' });
var pseudoTarget = document.getAnimations()[0].effect.target;
var effect = new KeyframeEffect(pseudoTarget,
{ background: ["blue", "red"] },
3 * MS_PER_SEC);
var newAnim = new Animation(effect, document.timeline);
newAnim.play();
--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/dom/animation/test/css-animations/test_element-get-animations.html
@@ -21,227 +21,227 @@
}
@keyframes empty { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t);
assert_equals(div.getAnimations().length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with no animations');
}, 'getAnimations for non-animated content');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// FIXME: This test does too many things. It should be split up.
// Add an animation
div.style.animation = 'anim1 100s';
var animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns an Animation running CSS Animations');
- return animations[0].ready.then(function() {
+ return animations[0].ready.then(() => {
var startTime = animations[0].startTime;
assert_true(startTime > 0 && startTime <= document.timeline.currentTime,
'CSS animation has a sensible start time');
// Wait a moment then add a second animation.
//
// We wait for the next frame so that we can test that the start times of
// the animations differ.
return waitForFrame();
- }).then(function() {
+ }).then(() => {
div.style.animation = 'anim1 100s, anim2 100s';
animations = div.getAnimations();
assert_equals(animations.length, 2,
'getAnimations returns one Animation for each value of'
+ ' animation-name');
// Wait until both Animations are ready
// (We don't make any assumptions about the order of the Animations since
// that is the purpose of the following test.)
return waitForAllAnimations(animations);
- }).then(function() {
+ }).then(() => {
assert_true(animations[0].startTime < animations[1].startTime,
'Additional Animations for CSS animations start after the original'
+ ' animation and appear later in the list');
});
}, 'getAnimations for CSS Animations');
-test(function(t) {
+test(t => {
var div = addDiv(t, { style: 'animation: anim1 100s' });
assert_class_string(div.getAnimations()[0], 'CSSAnimation',
'Interface of returned animation is CSSAnimation');
}, 'getAnimations returns CSSAnimation objects for CSS Animations');
-test(function(t) {
+test(t => {
var div = addDiv(t);
// Add an animation that targets multiple properties
div.style.animation = 'multiPropAnim 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns only one Animation for a CSS Animation'
+ ' that targets multiple properties');
}, 'getAnimations for multi-property animations');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
// Add an animation
div.style.backgroundColor = 'red';
div.style.animation = 'anim1 100s';
getComputedStyle(div).backgroundColor;
// Wait until a frame after the animation starts, then add a transition
var animations = div.getAnimations();
- return animations[0].ready.then(waitForFrame).then(function() {
+ return animations[0].ready.then(waitForFrame).then(() => {
div.style.transition = 'all 100s';
div.style.backgroundColor = 'green';
animations = div.getAnimations();
assert_equals(animations.length, 2,
'getAnimations returns Animations for both animations and'
+ ' transitions that run simultaneously');
assert_class_string(animations[0], 'CSSTransition',
'First-returned animation is the CSS Transition');
assert_class_string(animations[1], 'CSSAnimation',
'Second-returned animation is the CSS Animation');
});
}, 'getAnimations for both CSS Animations and CSS Transitions at once');
-async_test(function(t) {
+async_test(t => {
var div = addDiv(t);
// Set up event listener
- div.addEventListener('animationend', t.step_func(function() {
+ div.addEventListener('animationend', t.step_func(() => {
assert_equals(div.getAnimations().length, 0,
'getAnimations does not return Animations for finished '
+ ' (and non-forwards-filling) CSS Animations');
t.done();
}));
// Add a very short animation
div.style.animation = 'anim1 0.01s';
}, 'getAnimations for CSS Animations that have finished');
-async_test(function(t) {
+async_test(t => {
var div = addDiv(t);
// Set up event listener
- div.addEventListener('animationend', t.step_func(function() {
+ div.addEventListener('animationend', t.step_func(() => {
assert_equals(div.getAnimations().length, 1,
'getAnimations returns Animations for CSS Animations that have'
+ ' finished but are filling forwards');
t.done();
}));
// Add a very short animation
div.style.animation = 'anim1 0.01s forwards';
}, 'getAnimations for CSS Animations that have finished but are'
+ ' forwards filling');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'none 100s';
var animations = div.getAnimations();
assert_equals(animations.length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with animation-name: none');
div.style.animation = 'none 100s, anim1 100s';
animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is not none');
}, 'getAnimations for CSS Animations with animation-name: none');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'missing 100s';
var animations = div.getAnimations();
assert_equals(animations.length, 0,
'getAnimations returns an empty sequence for an element'
+ ' with animation-name: missing');
div.style.animation = 'anim1 100s, missing 100s';
animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns Animations only for those CSS Animations whose'
+ ' animation-name is found');
}, 'getAnimations for CSS Animations with animation-name: missing');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s, notyet 100s';
var animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations initally only returns Animations for CSS Animations whose'
+ ' animation-name is found');
- return animations[0].ready.then(waitForFrame).then(function() {
+ return animations[0].ready.then(waitForFrame).then(() => {
var keyframes = '@keyframes notyet { to { left: 100px; } }';
document.styleSheets[0].insertRule(keyframes, 0);
animations = div.getAnimations();
assert_equals(animations.length, 2,
'getAnimations includes Animation when @keyframes rule is added'
+ ' later');
return waitForAllAnimations(animations);
- }).then(function() {
+ }).then(() => {
assert_true(animations[0].startTime < animations[1].startTime,
'Newly added animation has a later start time');
document.styleSheets[0].deleteRule(0);
});
}, 'getAnimations for CSS Animations where the @keyframes rule is added'
+ ' later');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
assert_equals(div.getAnimations().length, 2,
'getAnimations returns one Animation for each CSS animation-name'
+ ' even if the names are duplicated');
}, 'getAnimations for CSS Animations with duplicated animation-name');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'empty 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns Animations for CSS animations with an'
+ ' empty keyframes rule');
}, 'getAnimations for CSS Animations with empty keyframes rule');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s 100s';
var animations = div.getAnimations();
assert_equals(animations.length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' delay makes them start later');
- return animations[0].ready.then(waitForFrame).then(function() {
+ return animations[0].ready.then(waitForFrame).then(() => {
assert_true(animations[0].startTime <= document.timeline.currentTime,
'For CSS Animations in delay phase, the start time of the Animation is'
+ ' not in the future');
});
}, 'getAnimations for CSS animations in delay phase');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 0s 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns animations for CSS animations whose'
+ ' duration is zero');
div.remove();
}, 'getAnimations for zero-duration CSS Animations');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var originalAnimation = div.getAnimations()[0];
// Update pause state (an Animation change)
div.style.animationPlayState = 'paused';
var pendingAnimation = div.getAnimations()[0];
assert_equals(pendingAnimation.playState, 'paused',
@@ -255,17 +255,17 @@ test(function(t) {
var extendedAnimation = div.getAnimations()[0];
// FIXME: Check extendedAnimation.effect.timing.duration has changed once the
// API is available
assert_equals(originalAnimation, extendedAnimation,
'getAnimations returns the same objects even when their'
+ ' duration changes');
}, 'getAnimations returns objects with the same identity');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
assert_equals(div.getAnimations().length, 1,
'getAnimations returns an animation before cancelling');
var animation = div.getAnimations()[0];
@@ -274,21 +274,21 @@ test(function(t) {
'getAnimations does not return cancelled animations');
animation.play();
assert_equals(div.getAnimations().length, 1,
'getAnimations returns cancelled animations that have been re-started');
}, 'getAnimations for CSS Animations that are cancelled');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim2 100s';
- return div.getAnimations()[0].ready.then(function() {
+ return div.getAnimations()[0].ready.then(() => {
// Prepend to the list and test that even though anim1 was triggered
// *after* anim2, it should come first because it appears first
// in the animation-name property.
div.style.animation = 'anim1 100s, anim2 100s';
var anims = div.getAnimations();
assert_equals(anims[0].animationName, 'anim1',
'animation order after prepending to list');
assert_equals(anims[1].animationName, 'anim2',
@@ -303,30 +303,30 @@ promise_test(function(t) {
anims = div.getAnimations();
assert_equals(anims[0].animationName, 'anim1',
'animation order after cancelling and restarting');
assert_equals(anims[1].animationName, 'anim2',
'animation order after cancelling and restarting');
});
}, 'getAnimations for CSS Animations follows animation-name order');
-test(function(t) {
+test(t => {
addStyle(t, { '#target::after': 'animation: anim1 10s;',
'#target::before': 'animation: anim1 10s;' });
var target = addDiv(t, { 'id': 'target' });
target.style.animation = 'anim1 100s';
var animations = target.getAnimations({ subtree: false });
assert_equals(animations.length, 1,
'Should find only the element');
assert_equals(animations[0].effect.target, target,
'Effect target should be the element');
}, 'Test AnimationFilter{ subtree: false } with single element');
-test(function(t) {
+test(t => {
addStyle(t, { '#target::after': 'animation: anim1 10s;',
'#target::before': 'animation: anim1 10s;' });
var target = addDiv(t, { 'id': 'target' });
target.style.animation = 'anim1 100s';
var animations = target.getAnimations({ subtree: true });
assert_equals(animations.length, 3,
'getAnimations({ subtree: true }) ' +
@@ -337,17 +337,17 @@ test(function(t) {
assert_equals(animations[1].effect.target.type, '::before',
'The animation targeting the ::before pseudo-element ' +
'should be returned second');
assert_equals(animations[2].effect.target.type, '::after',
'The animation targeting the ::after pesudo-element ' +
'should be returned last');
}, 'Test AnimationFilter{ subtree: true } with single element');
-test(function(t) {
+test(t => {
addStyle(t, { '#parent::after': 'animation: anim1 10s;',
'#parent::before': 'animation: anim1 10s;',
'#child::after': 'animation: anim1 10s;',
'#child::before': 'animation: anim1 10s;' });
var parent = addDiv(t, { 'id': 'parent' });
parent.style.animation = 'anim1 100s';
var child = addDiv(t, { 'id': 'child' });
child.style.animation = 'anim1 100s';
@@ -355,17 +355,17 @@ test(function(t) {
var animations = parent.getAnimations({ subtree: false });
assert_equals(animations.length, 1,
'Should find only the element even if it has a child');
assert_equals(animations[0].effect.target, parent,
'Effect target shuld be the element');
}, 'Test AnimationFilter{ subtree: false } with element that has a child');
-test(function(t) {
+test(t => {
addStyle(t, { '#parent::after': 'animation: anim1 10s;',
'#parent::before': 'animation: anim1 10s;',
'#child::after': 'animation: anim1 10s;',
'#child::before': 'animation: anim1 10s;' });
var parent = addDiv(t, { 'id': 'parent' });
var child = addDiv(t, { 'id': 'child' });
parent.style.animation = 'anim1 100s';
child.style.animation = 'anim1 100s';
@@ -399,17 +399,17 @@ test(function(t) {
'This ::before element should be child of child element');
assert_equals(animations[5].effect.target.type, '::after',
'The animation targeting the ::after pesudo-element ' +
'should be returned last');
assert_equals(animations[5].effect.target.parentElement, child,
'This ::after element should be child of child element');
}, 'Test AnimationFilter{ subtree: true } with element that has a child');
-test(function(t) {
+test(t => {
var parent = addDiv(t, { 'id': 'parent' });
var child1 = addDiv(t, { 'id': 'child1' });
var grandchild1 = addDiv(t, { 'id': 'grandchild1' });
var grandchild2 = addDiv(t, { 'id': 'grandchild2' });
var child2 = addDiv(t, { 'id': 'child2' });
parent.style.animation = 'anim1 100s';
child1.style.animation = 'anim1 100s';
--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -39,30 +39,30 @@ function AnimationEventHandler(target) {
}
AnimationEventHandler.prototype.clear = () => {
this.animationstart = undefined;
this.animationiteration = undefined;
this.animationend = undefined;
this.animationcancel = undefined;
}
-function setupAnimation(t, animationStyle) {
+const setupAnimation = (t, animationStyle) => {
const div = addDiv(t, { style: 'animation: ' + animationStyle });
// Note that this AnimationEventHandler should be created before EventWatcher
// to capture all events in the handler prior to the EventWatcher since
// testharness.js proceeds when the EventWatcher received watching events.
const handler = new AnimationEventHandler(div);
const watcher = new EventWatcher(t, div, [ 'animationstart',
'animationiteration',
'animationend',
'animationcancel' ]);
const animation = div.getAnimations()[0];
return { animation, watcher, div, handler };
-}
+};
promise_test(t => {
// Add 1ms delay to ensure that the delay is not included in the elapsedTime.
const { animation, watcher } = setupAnimation(t, 'anim 100s 1ms');
return watcher.wait_for('animationstart').then(evt => {
assert_equals(evt.elapsedTime, 0.0);
});
--- a/dom/animation/test/css-animations/test_event-order.html
+++ b/dom/animation/test/css-animations/test_event-order.html
@@ -18,33 +18,33 @@
/**
* Asserts that the set of actual and received events match.
* @param actualEvents An array of the received AnimationEvent objects.
* @param expectedEvents A series of array objects representing the expected
* events, each having the form:
* [ event type, target element, elapsed time ]
*/
-function checkEvents(actualEvents, ...expectedEvents) {
+const checkEvents = (actualEvents, ...expectedEvents) => {
assert_equals(actualEvents.length, expectedEvents.length,
`Number of actual events (${actualEvents.length}: \
${actualEvents.map(event => event.type).join(', ')}) should match expected \
events (${expectedEvents.map(event => event.type).join(', ')})`);
actualEvents.forEach((actualEvent, i) => {
assert_equals(expectedEvents[i][0], actualEvent.type,
'Event type should match');
assert_equals(expectedEvents[i][1], actualEvent.target,
'Event target should match');
assert_equals(expectedEvents[i][2], actualEvent.elapsedTime,
'Event\'s elapsed time should match');
});
-}
+};
-function setupAnimation(t, animationStyle, receiveEvents) {
+const setupAnimation = (t, animationStyle, receiveEvents) => {
const div = addDiv(t, { style: "animation: " + animationStyle });
['start', 'iteration', 'end'].forEach(name => {
div['onanimation' + name] = evt => {
receiveEvents.push({ type: evt.type,
target: evt.target,
elapsedTime: evt.elapsedTime });
};
@@ -52,17 +52,17 @@ function setupAnimation(t, animationStyl
const watcher = new EventWatcher(t, div, [ 'animationstart',
'animationiteration',
'animationend' ]);
const animation = div.getAnimations()[0];
return [animation, watcher, div];
-}
+};
promise_test(t => {
let events = [];
const [animation1, watcher1, div1] =
setupAnimation(t, 'anim 100s 2 paused', events);
const [animation2, watcher2, div2] =
setupAnimation(t, 'anim 100s 2 paused', events);
--- a/dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
+++ b/dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
@@ -154,33 +154,31 @@
to { --not-used: 200px }
}
</style>
<body>
<div id="log"></div>
<script>
"use strict";
-function getKeyframes(e) {
- return e.getAnimations()[0].effect.getKeyframes();
-}
+const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes();
-function assert_frames_equal(a, b, name) {
+const assert_frames_equal = (a, b, name) => {
assert_equals(Object.keys(a).sort().toString(),
Object.keys(b).sort().toString(),
"properties on " + name);
for (var p in a) {
if (p === 'offset' || p === 'computedOffset') {
assert_approx_equals(a[p], b[p], 0.00001,
"value for '" + p + "' on " + name);
} else {
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
}
}
-}
+};
// animation-timing-function values to test with, where the value
// is exactly the same as its serialization, sorted by the order
// getKeyframes() will group frames with the same easing function
// together (by nsTimingFunction::Compare).
const kTimingFunctionValues = [
"ease",
"linear",
@@ -190,17 +188,17 @@ const kTimingFunctionValues = [
"steps(1, start)",
"steps(2, start)",
"steps(1)",
"steps(2)",
"cubic-bezier(0, 0, 1, 1)",
"cubic-bezier(0, 0.25, 0.75, 1)"
];
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-empty 100s';
assert_equals(getKeyframes(div).length, 0,
"number of frames with empty @keyframes");
div.style.animation = 'anim-empty-frames 100s';
assert_equals(getKeyframes(div).length, 0,
@@ -213,17 +211,17 @@ test(function(t) {
div.style.animation = 'anim-only-non-animatable 100s';
assert_equals(getKeyframes(div).length, 0,
"number of frames when @keyframes only has frames with " +
"non-animatable properties");
}, 'KeyframeEffect.getKeyframes() returns no frames for various kinds'
+ ' of empty enimations');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-simple 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -234,17 +232,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+ ' animation');
-test(function(t) {
+test(t => {
kTimingFunctionValues.forEach(function(easing) {
var div = addDiv(t);
div.style.animation = 'anim-simple-three 100s ' + easing;
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
@@ -252,49 +250,49 @@ test(function(t) {
assert_equals(frames[i].easing, easing,
"value for 'easing' on ComputedKeyframe #" + i);
}
});
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing comes from animation-timing-function on the'
+ ' element');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-simple-timing 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].easing, "linear",
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "ease-in-out",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "steps(1)",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing is specified on each keyframe');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-simple-timing-some 100s step-start';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
assert_equals(frames[0].easing, "linear",
"value of 'easing' on ComputedKeyframe #0");
assert_equals(frames[1].easing, "steps(1, start)",
"value of 'easing' on ComputedKeyframe #1");
assert_equals(frames[2].easing, "steps(1, start)",
"value of 'easing' on ComputedKeyframe #2");
}, 'KeyframeEffect.getKeyframes() returns frames with expected easing'
+ ' values, when the easing is specified on some keyframes');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-simple-shorthand 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -307,17 +305,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+ ' animation that specifies a single shorthand property');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-omit-to 100s';
div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
@@ -329,17 +327,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a 0% keyframe and no 100% keyframe');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-omit-from 100s';
div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
@@ -351,17 +349,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a 100% keyframe and no 0% keyframe');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-omit-from-to 100s';
div.style.color = 'rgb(255, 255, 255)';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
@@ -375,17 +373,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with no 0% or 100% keyframe but with a 50% keyframe');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-partially-omit-to 100s';
div.style.marginTop = '250px';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
@@ -398,17 +396,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with a partially complete 100% keyframe (because the ' +
'!important rule is ignored)');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-different-props 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 4, "number of frames");
var expected = [
@@ -424,17 +422,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with different properties on different keyframes, all ' +
'with the same easing function');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-different-props-and-easing 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 4, "number of frames");
var expected = [
@@ -450,17 +448,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with different properties on different keyframes, with ' +
'a different easing function on each');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-merge-offset 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -472,17 +470,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time, and all with ' +
'the same easing function');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-merge-offset-and-easing 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
var expected = [
@@ -497,17 +495,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different easing functions');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-no-merge-equiv-easing 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 3, "number of frames");
var expected = [
@@ -521,17 +519,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
'animation with multiple keyframes for the same time and with ' +
'different but equivalent easing functions');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-overriding 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 6, "number of frames");
var expected = [
@@ -553,17 +551,17 @@ test(function(t) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected frames for ' +
'overlapping keyframes');
// Gecko-specific test case: We are specifically concerned here that the
// computed value for filter, "none", is correctly represented.
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-filter 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -574,17 +572,17 @@ test(function(t) {
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with filter properties and missing keyframes');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-filter-drop-shadow 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -599,17 +597,17 @@ test(function(t) {
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animation with drop-shadow of filter property');
// Gecko-specific test case: We are specifically concerned here that the
// computed value for text-shadow and a "none" specified on a keyframe
// are correctly represented.
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
'0 0 16px rgb(0, 0, 255), ' +
'0 0 3.2px rgb(0, 0, 255)';
div.style.animation = 'anim-text-shadow 100s';
var frames = getKeyframes(div);
@@ -629,17 +627,17 @@ test(function(t) {
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with text-shadow properties and missing keyframes');
// Gecko-specific test case: We are specifically concerned here that the
// initial value for background-size and the specified list are correctly
// represented.
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-background-size 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -661,17 +659,17 @@ test(function(t) {
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i
+ " after updating current style");
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with background-size properties and missing keyframes');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-variables 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -681,17 +679,17 @@ test(function(t) {
transform: "translate(100px, 0px)" },
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with CSS variables as keyframe values');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-variables-shorthand 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -707,17 +705,17 @@ test(function(t) {
marginTop: "100px" },
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with CSS variables as keyframe values in a shorthand property');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-custom-property-in-keyframe 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
@@ -727,17 +725,17 @@ test(function(t) {
color: "rgb(0, 255, 0)" },
];
for (var i = 0; i < frames.length; i++) {
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
}
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
'animations with a CSS variable which is overriden by the value in keyframe');
-test(function(t) {
+test(t => {
var div = addDiv(t);
div.style.animation = 'anim-only-custom-property-in-keyframe 100s';
var frames = getKeyframes(div);
assert_equals(frames.length, 2, "number of frames");
var expected = [
--- a/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
+++ b/dom/animation/test/css-animations/test_pseudoElement-get-animations.html
@@ -23,26 +23,26 @@
content: '';
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-test(function(t) {
+test(t => {
var div = addDiv(t, { class: 'before' });
var pseudoTarget = document.getAnimations()[0].effect.target;
assert_equals(pseudoTarget.getAnimations().length, 1,
'Expected number of animations are returned');
assert_equals(pseudoTarget.getAnimations()[0].animationName, 'anim1',
'CSS animation name matches');
}, 'getAnimations returns CSSAnimation objects');
-test(function(t) {
+test(t => {
var div = addDiv(t, { class: 'after-with-mix-anims-trans' });
// Trigger transitions
flushComputedStyle(div);
div.classList.add('after-change');
// Create additional animation on the pseudo-element from script
var pseudoTarget = document.getAnimations()[0].effect.target;
var effect = new KeyframeEffect(pseudoTarget,
--- a/dom/animation/test/css-animations/test_setting-effect.html
+++ b/dom/animation/test/css-animations/test_setting-effect.html
@@ -13,117 +13,117 @@
}
}
</style>
<body>
<div id="log"></div>
<script>
'use strict';
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var watcher = new EventWatcher(t, div, [ 'animationend',
'animationcancel' ]);
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = null;
assert_equals(animation.playState, 'finished');
assert_equals(getComputedStyle(div).marginLeft, '0px');
return watcher.wait_for('animationend');
});
}, 'Setting a null effect on a running animation fires an animationend event');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_equals(animation.playState, 'running');
assert_equals(getComputedStyle(div).marginLeft, '0px');
assert_equals(getComputedStyle(div).left, '50px');
});
}, 'Replacing an animation\'s effect with an effect that targets a different ' +
'property should update both properties');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
animation.currentTime = 50 * MS_PER_SEC;
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
20 * MS_PER_SEC);
assert_equals(animation.playState, 'finished');
});
}, 'Replacing an animation\'s effect with a shorter one that should have ' +
'already finished, the animation finishes immediately');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
assert_true(animation.pending);
animation.effect = new KeyframeEffect(div,
{ left: [ '0px' , '100px'] },
100 * MS_PER_SEC);
assert_true(animation.pending);
- return animation.ready.then(function() {
+ return animation.ready.then(() => {
assert_false(animation.pending);
});
}, 'A play-pending animation\'s effect whose effect is replaced still exits ' +
'the pending state');
-promise_test(function(t) {
+promise_test(t => {
var div1 = addDiv(t);
var div2 = addDiv(t);
var watcher1 = new EventWatcher(t, div1, 'animationstart');
// Watch |div2| as well to ensure it does *not* get events.
var watcher2 = new EventWatcher(t, div2, 'animationstart');
div1.style.animation = 'anim 100s';
var animation = div1.getAnimations()[0];
animation.effect = new KeyframeEffect(div2,
{ left: [ '0px', '100px' ] },
100 * MS_PER_SEC);
- return watcher1.wait_for('animationstart').then(function() {
+ return watcher1.wait_for('animationstart').then(() => {
assert_equals(animation.effect.target, div2);
// Then wait a couple of frames and check that no event was dispatched.
return waitForAnimationFrames(2);
});
}, 'The event is dispatched at the original element even after setting an ' +
'effect with a different target element');
-promise_test(function(t) {
+promise_test(t => {
var div = addDiv(t);
var watcher = new EventWatcher(t, div, [ 'animationstart',
'animationend',
'animationcancel' ]);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
animation.finish();
return watcher.wait_for([ 'animationstart',
- 'animationend' ]).then(function(evt) {
+ 'animationend' ]).then(evt => {
// Set a longer effect
animation.effect = new KeyframeEffect(div,
{ left: [ '0px', '100px' ] },
200 * MS_PER_SEC);
return watcher.wait_for('animationstart');
});
}, 'After replacing a finished animation\'s effect with a longer one ' +
'it fires an animationstart event');