Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 01:35:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1466031 - Use arrow functions in dom/animation/test/css-animations/; r=hiro

Browse Source 
--HG--
extra : rebase_source : 2446c48d66750142e5c3a544f115beb859043ac8
This commit is contained in:
Brian Birtles 2018-06-04 10:20:54 +09:00
parent d7adf198ee
commit e190516708
21 changed files with 324 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
dom/animation/test/css-animations/test_animation-cancel.html
View File

@ -20,11 +20,11 @@
<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();
@ -33,12 +33,12 @@ promise_test(function(t) {
});
}, '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();
@ -47,7 +47,7 @@ promise_test(function(t) {
});
}, '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();
@ -61,12 +61,12 @@ test(function(t) {
+ ' 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');
@ -74,13 +74,13 @@ promise_test(function(t) {
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];
@ -99,7 +99,7 @@ test(function(t) {
}, '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];
@ -133,40 +133,40 @@ test(function(t) {
}, '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);
@ -176,12 +176,12 @@ promise_test(function(t) {
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');
});

109
dom/animation/test/css-animations/test_animation-computed-timing.html
View File

@ -18,21 +18,22 @@
// --------------------
// 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,
@ -43,7 +44,8 @@ test(function(t) {
// --------------------
// 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,
@ -54,8 +56,9 @@ test(function(t) {
// --------------------
// 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;
};
@ -78,7 +81,8 @@ test(function(t) {
// --------------------
// 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,
@ -89,21 +93,22 @@ test(function(t) {
// --------------------
// 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,
@ -114,7 +119,8 @@ test(function(t) {
// --------------------
// 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,
@ -125,8 +131,9 @@ test(function(t) {
// --------------------
// 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;
};
@ -149,7 +156,8 @@ test(function(t) {
// --------------------
// 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',
@ -161,14 +169,15 @@ test(function(t) {
// 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;
@ -176,21 +185,21 @@ test(function(t) {
'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'});
@ -204,7 +213,8 @@ test(function(t) {
// 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;
@ -212,14 +222,14 @@ test(function(t) {
'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,
@ -228,7 +238,7 @@ test(function(t) {
'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,
@ -241,14 +251,15 @@ test(function(t) {
// --------------------
// 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;
@ -256,23 +267,23 @@ test(function(t) {
'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"]});
@ -285,13 +296,14 @@ test(function(t) {
// 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];
@ -303,7 +315,7 @@ test(function(t) {
});
}, '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];
@ -323,7 +335,7 @@ test(function(t) {
'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
@ -342,7 +354,7 @@ test(function(t) {
'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];
@ -356,7 +368,7 @@ test(function(t) {
'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];
@ -370,7 +382,7 @@ test(function(t) {
'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];
@ -384,7 +396,7 @@ test(function(t) {
}, '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];
@ -405,7 +417,7 @@ test(function(t) {
}, '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];
@ -426,7 +438,7 @@ test(function(t) {
}, '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];
@ -444,7 +456,7 @@ test(function(t) {
}, '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];
@ -466,7 +478,8 @@ test(function(t) {
// --------------------
// 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,
@ -474,14 +487,14 @@ test(function(t) {
}, '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.
@ -499,7 +512,7 @@ test(function(t) {
'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];
@ -513,7 +526,7 @@ test(function(t) {
'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];
@ -530,7 +543,7 @@ test(function(t) {
'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];
@ -542,7 +555,7 @@ test(function(t) {
'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,
@ -553,7 +566,7 @@ test(function(t) {
'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"]});

73
dom/animation/test/css-animations/test_animation-currenttime.html
View File

@ -45,8 +45,7 @@
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];
@ -65,13 +64,13 @@ test(function(t)
}, '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,
@ -81,13 +80,13 @@ promise_test(function(t) {
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";
@ -95,8 +94,7 @@ promise_test(function(t) {
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 ' +
@ -105,7 +103,7 @@ promise_test(function(t) {
animation.currentTime = 150 * MS_PER_SEC;
return eventWatcher.wait_for('animationstart');
}).then(function() {
}).then(() => {
animation.currentTime = 0;
return eventWatcher.wait_for('animationend');
});
@ -120,7 +118,7 @@ promise_test(function(t) {
// 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";
@ -132,7 +130,7 @@ promise_test(function(t) {
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";
@ -144,13 +142,13 @@ promise_test(function(t) {
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;
@ -162,13 +160,13 @@ promise_test(function(t) {
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;
@ -180,14 +178,14 @@ promise_test(function(t) {
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;
@ -199,14 +197,14 @@ promise_test(function(t) {
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;
@ -218,7 +216,7 @@ promise_test(function(t) {
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"
@ -227,20 +225,19 @@ promise_test(function(t) {
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;
@ -253,49 +250,49 @@ promise_test(function(t) {
});
}, '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;
@ -303,14 +300,14 @@ promise_test(function(t) {
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];
@ -320,12 +317,12 @@ test(function(t) {
'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
@ -334,7 +331,7 @@ promise_test(function(t) {
// 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');

10
dom/animation/test/css-animations/test_animation-finish.html
View File

@ -18,7 +18,7 @@
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';
@ -38,12 +38,12 @@ test(function(t) {
'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 ' +
@ -56,7 +56,7 @@ async_test(function(t) {
}));
}, '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];
@ -77,7 +77,7 @@ test(function(t) {
'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];

18
dom/animation/test/css-animations/test_animation-finished.html
View File

@ -17,16 +17,16 @@
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,
@ -42,7 +42,7 @@ promise_test(function(t) {
}, '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
@ -54,9 +54,9 @@ promise_test(function(t) {
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,
@ -72,16 +72,16 @@ promise_test(function(t) {
}, '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');

2
dom/animation/test/css-animations/test_animation-id.html
View File

@ -11,7 +11,7 @@
<script>
'use strict';
test(function(t) {
test(t => {
var div = addDiv(t);
div.style.animation = 'abc 100s';
var animation = div.getAnimations()[0];

34
dom/animation/test/css-animations/test_animation-pausing.html
View File

@ -14,11 +14,9 @@
<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';
@ -27,13 +25,13 @@ promise_test(function(t) {
'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';
@ -44,7 +42,7 @@ promise_test(function(t) {
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,
@ -52,7 +50,7 @@ promise_test(function(t) {
});
}, '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';
@ -62,28 +60,28 @@ promise_test(function(t) {
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';
@ -98,7 +96,7 @@ promise_test(function(t) {
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,
@ -106,7 +104,7 @@ promise_test(function(t) {
});
}, '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';
@ -128,7 +126,7 @@ promise_test(function(t) {
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,
@ -137,12 +135,12 @@ promise_test(function(t) {
}, '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');

10
dom/animation/test/css-animations/test_animation-playstate.html
View File

@ -11,7 +11,7 @@
<script>
'use strict';
test(function(t) {
test(t => {
var div = addDiv(t);
var cs = getComputedStyle(div);
div.style.animation = 'anim 1000s';
@ -19,7 +19,7 @@ test(function(t) {
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';
@ -27,7 +27,7 @@ test(function(t) {
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';
@ -36,7 +36,7 @@ test(function(t) {
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';
@ -49,7 +49,7 @@ test(function(t) {
+ ' 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];

36
dom/animation/test/css-animations/test_animation-ready.html
View File

@ -13,13 +13,13 @@
<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'
@ -27,7 +27,7 @@ promise_test(function(t) {
});
}, '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
@ -36,9 +36,9 @@ promise_test(function(t) {
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');
});
@ -51,7 +51,7 @@ promise_test(function(t) {
}, '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
@ -64,9 +64,9 @@ promise_test(function(t) {
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');
});
@ -79,12 +79,12 @@ promise_test(function(t) {
}, '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'
@ -92,11 +92,11 @@ promise_test(function(t) {
});
}, '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();
@ -105,11 +105,11 @@ promise_test(function(t) {
});
}, '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
@ -124,20 +124,20 @@ promise_test(function(t) {
+ ' 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'

2
dom/animation/test/css-animations/test_animation-reverse.html
View File

@ -13,7 +13,7 @@
<script>
'use strict';
test(function(t) {
test(t => {
var div = addDiv(t, { style: 'animation: anim 100s' });
var animation = div.getAnimations()[0];
div.style.animation = "";

86
dom/animation/test/css-animations/test_animation-starttime.html
View File

@ -45,49 +45,44 @@
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;
@ -102,13 +97,13 @@ promise_test(function(t)
});
}, '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();
@ -116,7 +111,7 @@ promise_test(function(t) {
});
}, '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();
@ -126,14 +121,14 @@ test(function(t) {
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');
@ -148,15 +143,14 @@ promise_test(function(t) {
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];
@ -168,26 +162,26 @@ test(function(t)
}, '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';
@ -196,7 +190,7 @@ promise_test(function(t) {
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 ' +
@ -209,14 +203,14 @@ promise_test(function(t) {
// 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');
@ -232,7 +226,7 @@ promise_test(function(t) {
// 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";
@ -244,7 +238,7 @@ promise_test(function(t) {
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";
@ -256,13 +250,13 @@ promise_test(function(t) {
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;
@ -274,13 +268,13 @@ promise_test(function(t) {
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;
@ -292,14 +286,14 @@ promise_test(function(t) {
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;
@ -311,14 +305,14 @@ promise_test(function(t) {
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;
@ -331,28 +325,28 @@ promise_test(function(t) {
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,
@ -360,7 +354,7 @@ promise_test(function(t) {
animation.pause();
return animation.ready;
}).then(function() {
}).then(() => {
assert_equals(animation.startTime, null,
'Animation.startTime is null after paused');
assert_equals(animation.playState, 'paused',
@ -368,12 +362,12 @@ promise_test(function(t) {
});
}, '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');

26
dom/animation/test/css-animations/test_animations-dynamic-changes.html
View File

@ -14,7 +14,7 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var originalAnimation = div.getAnimations()[0];
@ -23,14 +23,14 @@ promise_test(function(t) {
// 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,
@ -46,7 +46,7 @@ promise_test(function(t) {
});
}, 'Animations preserve their startTime when changed');
test(function(t) {
test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
@ -64,7 +64,7 @@ test(function(t) {
'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';
@ -76,7 +76,7 @@ promise_test(function(t) {
// 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';
@ -91,19 +91,19 @@ promise_test(function(t) {
'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();
@ -119,7 +119,7 @@ promise_test(function(t) {
}, '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],
@ -127,13 +127,13 @@ promise_test(function(t) {
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,
@ -145,7 +145,7 @@ promise_test(function(t) {
'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');

6
dom/animation/test/css-animations/test_cssanimation-animationname.html
View File

@ -13,21 +13,21 @@
<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',

32
dom/animation/test/css-animations/test_document-get-animations.html
View File

@ -28,13 +28,13 @@
<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
@ -53,7 +53,7 @@ test(function(t) {
'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';
@ -71,7 +71,7 @@ test(function(t) {
'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' });
@ -112,7 +112,7 @@ test(function(t) {
}, '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' });
@ -122,7 +122,7 @@ test(function(t) {
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],
@ -141,7 +141,7 @@ test(function(t) {
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],
@ -149,7 +149,7 @@ test(function(t) {
});
}, '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',
@ -167,7 +167,7 @@ test(function(t) {
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];
@ -193,7 +193,7 @@ test(function(t) {
' 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';
@ -212,34 +212,34 @@ test(function(t) {
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();
@ -249,7 +249,7 @@ test(function(t) {
'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:

6
dom/animation/test/css-animations/test_effect-target.html
View File

@ -17,7 +17,7 @@
<script>
'use strict';
test(function(t) {
test(t => {
var div = addDiv(t);
div.style.animation = 'anim 100s';
var animation = div.getAnimations()[0];
@ -25,7 +25,7 @@ test(function(t) {
'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();
@ -35,7 +35,7 @@ test(function(t) {
'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;

64
dom/animation/test/css-animations/test_element-get-animations.html
View File

@ -26,14 +26,14 @@
<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.
@ -43,7 +43,7 @@ promise_test(function(t) {
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');
@ -53,7 +53,7 @@ promise_test(function(t) {
// 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,
@ -63,20 +63,20 @@ promise_test(function(t) {
// (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
@ -86,7 +86,7 @@ test(function(t) {
+ ' that targets multiple properties');
}, 'getAnimations for multi-property animations');
promise_test(function(t) {
promise_test(t => {
var div = addDiv(t);
// Add an animation
@ -96,7 +96,7 @@ promise_test(function(t) {
// 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';
@ -111,11 +111,11 @@ promise_test(function(t) {
});
}, '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');
@ -126,11 +126,11 @@ async_test(function(t) {
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');
@ -142,7 +142,7 @@ async_test(function(t) {
}, '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';
@ -158,7 +158,7 @@ test(function(t) {
+ ' 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();
@ -173,7 +173,7 @@ test(function(t) {
+ ' 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();
@ -181,7 +181,7 @@ promise_test(function(t) {
'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();
@ -189,7 +189,7 @@ promise_test(function(t) {
'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);
@ -197,7 +197,7 @@ promise_test(function(t) {
}, '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,
@ -205,7 +205,7 @@ test(function(t) {
+ ' 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,
@ -213,21 +213,21 @@ test(function(t) {
+ ' 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,
@ -236,7 +236,7 @@ test(function(t) {
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];
@ -260,7 +260,7 @@ test(function(t) {
+ ' duration changes');
}, 'getAnimations returns objects with the same identity');
test(function(t) {
test(t => {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
@ -279,11 +279,11 @@ test(function(t) {
}, '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.
@ -308,7 +308,7 @@ promise_test(function(t) {
});
}, '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' });
@ -321,7 +321,7 @@ test(function(t) {
'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' });
@ -342,7 +342,7 @@ test(function(t) {
'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;',
@ -360,7 +360,7 @@ test(function(t) {
'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;',
@ -404,7 +404,7 @@ test(function(t) {
'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' });

4
dom/animation/test/css-animations/test_event-dispatch.html
View File

@ -44,7 +44,7 @@ AnimationEventHandler.prototype.clear = () => {
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
@ -57,7 +57,7 @@ function setupAnimation(t, animationStyle) {
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.

8
dom/animation/test/css-animations/test_event-order.html
View File

@ -23,7 +23,7 @@
* 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 \
@ -37,9 +37,9 @@ events (${expectedEvents.map(event => event.type).join(', ')})`);
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 => {
@ -57,7 +57,7 @@ function setupAnimation(t, animationStyle, receiveEvents) {
const animation = div.getAnimations()[0];
return [animation, watcher, div];
}
};
promise_test(t => {
let events = [];

56
dom/animation/test/css-animations/test_keyframeeffect-getkeyframes.html
View File

@ -159,11 +159,9 @@
<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);
@ -175,7 +173,7 @@ function assert_frames_equal(a, b, name) {
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
@ -195,7 +193,7 @@ const kTimingFunctionValues = [
"cubic-bezier(0, 0.25, 0.75, 1)"
];
test(function(t) {
test(t => {
var div = addDiv(t);
div.style.animation = 'anim-empty 100s';
@ -218,7 +216,7 @@ test(function(t) {
}, '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';
@ -239,7 +237,7 @@ test(function(t) {
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
+ ' animation');
test(function(t) {
test(t => {
kTimingFunctionValues.forEach(function(easing) {
var div = addDiv(t);
@ -257,7 +255,7 @@ test(function(t) {
+ ' 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';
@ -273,7 +271,7 @@ test(function(t) {
}, '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';
@ -289,7 +287,7 @@ test(function(t) {
}, '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';
@ -312,7 +310,7 @@ test(function(t) {
}, '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';
@ -334,7 +332,7 @@ test(function(t) {
}, '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';
@ -356,7 +354,7 @@ test(function(t) {
}, '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';
@ -380,7 +378,7 @@ test(function(t) {
}, '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';
@ -403,7 +401,7 @@ test(function(t) {
'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';
@ -429,7 +427,7 @@ test(function(t) {
'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';
@ -455,7 +453,7 @@ test(function(t) {
'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';
@ -477,7 +475,7 @@ test(function(t) {
'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';
@ -502,7 +500,7 @@ test(function(t) {
'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';
@ -526,7 +524,7 @@ test(function(t) {
'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';
@ -558,7 +556,7 @@ test(function(t) {
// 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';
@ -579,7 +577,7 @@ test(function(t) {
}, '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';
@ -604,7 +602,7 @@ test(function(t) {
// 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), ' +
@ -634,7 +632,7 @@ test(function(t) {
// 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';
@ -666,7 +664,7 @@ test(function(t) {
}, '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';
@ -686,7 +684,7 @@ test(function(t) {
}, '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';
@ -712,7 +710,7 @@ test(function(t) {
}, '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';
@ -732,7 +730,7 @@ test(function(t) {
}, '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';

4
dom/animation/test/css-animations/test_pseudoElement-get-animations.html
View File

@ -28,7 +28,7 @@
<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,
@ -37,7 +37,7 @@ test(function(t) {
'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);

24
dom/animation/test/css-animations/test_setting-effect.html
View File

@ -18,14 +18,14 @@
<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');
@ -34,12 +34,12 @@ promise_test(function(t) {
});
}, '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'] },
@ -51,12 +51,12 @@ promise_test(function(t) {
}, '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'] },
@ -66,7 +66,7 @@ promise_test(function(t) {
}, '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';
@ -78,13 +78,13 @@ promise_test(function(t) {
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);
@ -99,7 +99,7 @@ promise_test(function(t) {
{ 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.
@ -108,7 +108,7 @@ promise_test(function(t) {
}, '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',
@ -118,7 +118,7 @@ promise_test(function(t) {
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' ] },