Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-14 01:45:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision be5419e845d39089ba6dc338c1bd0fa279108317

Browse source
This commit is contained in:
Josh Matthews 2018-01-04 13:44:24 -05:00
parent aa199307c8
commit 2b6f573eb5
3440 changed files with 109438 additions and 41750 deletions
Download patch file Download diff file Expand all files Collapse all files

123
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/active-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Active time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-active-time">
<title>Active time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-active-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,110 +10,109 @@
<script>
'use strict';
test(function(t) {
var tests = [ { fill: 'none', progress: null },
{ fill: 'backwards', progress: 0 },
{ fill: 'forwards', progress: null },
{ fill: 'both', progress: 0 } ];
tests.forEach(function(test) {
var anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
test(t => {
const tests = [ { fill: 'none', progress: null },
{ fill: 'backwards', progress: 0 },
{ fill: 'forwards', progress: null },
{ fill: 'both', progress: 0 } ];
for (const test of tests) {
const anim = createDiv(t).animate(null, { delay: 1, fill: test.fill });
assert_equals(anim.effect.getComputedTiming().progress, test.progress,
'Progress in before phase when using \'' + test.fill
+ '\' fill');
});
`Progress in before phase when using '${test.fill}' fill`);
}
}, 'Active time in before phase');
test(function(t) {
var anim = createDiv(t).animate(null, 1000);
test(t => {
const anim = createDiv(t).animate(null, 1000);
anim.currentTime = 500;
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and no start delay is the local time');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000, delay: 500 });
anim.currentTime = 1000;
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and positive start delay is the local time'
+ ' minus the start delay');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000, delay: -500 });
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in active phase and negative start delay is the local time'
+ ' minus the start delay');
test(function(t) {
var anim = createDiv(t).animate(null);
test(t => {
const anim = createDiv(t).animate(null);
assert_equals(anim.effect.getComputedTiming().progress, null);
}, 'Active time in after phase with no fill is unresolved');
test(function(t) {
var anim = createDiv(t).animate(null, { fill: 'backwards' });
test(t => {
const anim = createDiv(t).animate(null, { fill: 'backwards' });
assert_equals(anim.effect.getComputedTiming().progress, null);
}, 'Active time in after phase with backwards-only fill is unresolved');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500, // Should have no effect
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500, // Should have no effect
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with forwards fill is the active duration');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 0,
iterations: Infinity,
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 0,
iterations: Infinity,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, Infinity);
assert_equals(anim.effect.getComputedTiming().progress, 1);
}, 'Active time in after phase with forwards fill, zero-duration, and '
+ ' infinite iteration count is the active duration');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: 4000,
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: 4000,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with forwards fill and positive end delay'
+ ' is the active duration');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -800,
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -800,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 1);
assert_times_equal(anim.effect.getComputedTiming().progress, 0.5);
}, 'Active time in after phase with forwards fill and negative end delay'
+ ' is the active duration + end delay');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -2500,
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -2500,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
assert_equals(anim.effect.getComputedTiming().progress, 0);
}, 'Active time in after phase with forwards fill and negative end delay'
+ ' greater in magnitude than the active duration is zero');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -4000,
fill: 'forwards' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
endDelay: -4000,
fill: 'forwards' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
assert_equals(anim.effect.getComputedTiming().progress, 0);
@ -121,20 +120,20 @@ test(function(t) {
+ ' greater in magnitude than the sum of the active duration and start delay'
+ ' is zero');
test(function(t) {
var anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
fill: 'both' });
test(t => {
const anim = createDiv(t).animate(null, { duration: 1000,
iterations: 2.3,
delay: 500,
fill: 'both' });
anim.finish();
assert_equals(anim.effect.getComputedTiming().currentIteration, 2);
assert_times_equal(anim.effect.getComputedTiming().progress, 0.3);
}, 'Active time in after phase with \'both\' fill is the active duration');
test(function(t) {
test(t => {
// Create an effect with a non-zero duration so we ensure we're not just
// testing the after-phase behavior.
var effect = new KeyframeEffect(null, null, 1);
const effect = new KeyframeEffect(null, null, 1);
assert_equals(effect.getComputedTiming().progress, null);
}, 'Active time when the local time is unresolved, is unresolved');

12
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/current-iteration.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Current iteration tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#current-iteration">
<title>Current iteration</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#current-iteration">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -38,11 +38,11 @@ function runTests(tests, description) {
}
}
async_test(function(t) {
var div = createDiv(t);
var anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
async_test(t => {
const div = createDiv(t);
const anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 });
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
anim.finished.then(t.step_func(function() {
anim.finished.then(t.step_func(() => {
assert_equals(anim.effect.getComputedTiming().currentIteration, null);
t.done();
}));

19
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/local-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>AnimationEffect local time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#local-time">
<title>Local time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#local-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,16 +9,19 @@
<script>
'use strict';
test(function(t) {
var anim = createDiv(t).animate(null, 10 * MS_PER_SEC);
for (var seconds of [-1, 0, 5, 10, 20]) {
test(t => {
const anim = createDiv(t).animate(null, 10 * MS_PER_SEC);
for (const seconds of [-1, 0, 5, 10, 20]) {
anim.currentTime = seconds * MS_PER_SEC;
assert_equals(anim.effect.getComputedTiming().localTime, seconds * MS_PER_SEC);
assert_equals(
anim.effect.getComputedTiming().localTime,
seconds * MS_PER_SEC
);
}
}, 'Local time is current time for animation effects associated with an animation');
test(function(t) {
var effect = new KeyframeEffect(createDiv(t), null, 10 * MS_PER_SEC);
test(t => {
const effect = new KeyframeEffect(createDiv(t), null, 10 * MS_PER_SEC);
assert_equals(effect.getComputedTiming().localTime, null);
}, 'Local time is unresolved for animation effects not associated with an animation');

177
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/phases-and-states.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Tests for phases and states</title>
<link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-phases-and-states">
<title>Phases and states</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -25,7 +25,7 @@ function assert_phase_at_time(animation, phase, currentTime) {
animation.effect.timing.fill = 'none';
assert_not_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in active phase when current time'
+ ' is ' + currentTime + 'ms');
+ ` is ${currentTime}ms`);
} else {
// The easiest way to distinguish between the 'before' phase and the 'after'
// phase is to toggle the fill mode. For example, if the progress is null
@ -33,157 +33,146 @@ function assert_phase_at_time(animation, phase, currentTime) {
// 'backwards' then we are in the before phase.
animation.effect.timing.fill = 'none';
assert_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in ' + phase + ' phase when current time'
+ ' is ' + currentTime + 'ms'
`Animation effect is in ${phase} phase when current time`
+ ` is ${currentTime}ms`
+ ' (progress is null with \'none\' fill mode)');
animation.effect.timing.fill = phase === 'before'
? 'backwards'
: 'forwards';
assert_not_equals(animation.effect.getComputedTiming().progress, null,
'Animation effect is in ' + phase + ' phase when current'
+ ' time is ' + currentTime + 'ms'
`Animation effect is in ${phase} phase when current time`
+ ` is ${currentTime}ms`
+ ' (progress is non-null with appropriate fill mode)');
}
}
test(function(t) {
var animation = createDiv(t).animate(null, 1);
test(t => {
const animation = createDiv(t).animate(null, 1);
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for a simple animation effect');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, delay: 1 });
[ { currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive start delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 1, phase: 'after' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive end delay');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 0.9, phase: 'active' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'active' },
{ currentTime: 0.9, phase: 'active' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay lesser'
+ ' in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 });
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' },
{ currentTime: 1, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' },
{ currentTime: 1, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay equal'
+ ' in magnitude to the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative end delay'
+ ' greater in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 2,
delay: 1,
endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 2,
delay: 1,
endDelay: -1 });
[ { currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a positive start delay'
+ ' and a negative end delay lesser in magnitude than the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -1 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -1 });
[ { currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay'
+ ' and a negative end delay equal in magnitude to the active duration');
test(function(t) {
var animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -2 });
test(t => {
const animation = createDiv(t).animate(null, { duration: 1,
delay: -1,
endDelay: -2 });
[ { currentTime: -3, phase: 'before' },
{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -3, phase: 'before' },
{ currentTime: -2, phase: 'before' },
{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for an animation effect with a negative start delay'
+ ' and a negative end delay equal greater in magnitude than the active'
+ ' duration');
test(function(t) {
var animation = createDiv(t).animate(null, 1);
test(t => {
const animation = createDiv(t).animate(null, 1);
animation.playbackRate = -1;
[ { currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' } ]
.forEach(function(test) {
for (const test of [{ currentTime: -1, phase: 'before' },
{ currentTime: 0, phase: 'before' },
{ currentTime: 1, phase: 'active' },
{ currentTime: 2, phase: 'after' }]) {
assert_phase_at_time(animation, test.phase, test.currentTime);
});
}
}, 'Phase calculation for a simple animation effect with negative playback'
+ ' rate');

4
tests/wpt/web-platform-tests/web-animations/timing-model/animation-effects/simple-iteration-progress.html
View file

@ -1,8 +1,8 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Simple iteration progress tests</title>
<title>Simple iteration progress</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#simple-iteration-progress">
href="https://drafts.csswg.org/web-animations/#simple-iteration-progress">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>

54
tests/wpt/web-platform-tests/web-animations/timing-model/animations/canceling-an-animation.html
View file

@ -2,16 +2,16 @@
<meta charset=utf-8>
<title>Canceling an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#canceling-an-animation-section">
href="https://drafts.csswg.org/web-animations/#canceling-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
@ -26,12 +26,12 @@ promise_test(function(t) {
}, 'A play-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
return animation.ready.then(() => {
animation.pause();
// Set up listeners on pause-pending ready promise
var retPromise = animation.ready.then(function() {
const retPromise = animation.ready.then(() => {
assert_unreached('ready promise was fulfilled');
}).catch(err => {
assert_equals(err.name, 'AbortError',
@ -43,20 +43,58 @@ promise_test(function(t) {
}, 'A pause-pending ready promise should be rejected when the animation is'
+ ' canceled');
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null);
animation.cancel();
return animation.ready.then(function(p) {
return animation.ready.then(p => {
assert_equals(p, animation);
});
}, 'When an animation is canceled, it should create a resolved Promise');
test(function(t) {
test(t => {
const animation = createDiv(t).animate(null);
const promise = animation.ready;
animation.cancel();
assert_not_equals(animation.ready, promise);
}, 'The ready promise should be replaced when the animation is canceled');
promise_test(t => {
const animation = new Animation(
new KeyframeEffect(null, null, { duration: 1000 }),
null
);
assert_equals(animation.playState, 'idle',
'The animation should be initially idle');
animation.finished.then(t.step_func(() => {
assert_unreached('Finished promise should not resolve');
}), t.step_func(() => {
assert_unreached('Finished promise should not reject');
}));
animation.cancel();
return waitForAnimationFrames(3);
}, 'The finished promise should NOT be rejected if the animation is already'
+ ' idle');
promise_test(t => {
const animation = new Animation(
new KeyframeEffect(null, null, { duration: 1000 }),
null
);
assert_equals(animation.playState, 'idle',
'The animation should be initially idle');
animation.oncancel = t.step_func(() => {
assert_unreached('Cancel event should not be fired');
});
animation.cancel();
return waitForAnimationFrames(3);
}, 'The cancel event should NOT be fired if the animation is already'
+ ' idle');
</script>
</body>

37
tests/wpt/web-platform-tests/web-animations/timing-model/animations/current-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for current time</title>
<link rel="help" href="https://w3c.github.io/web-animations/#current-time">
<title>Current time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#current-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,8 +10,8 @@
<script>
'use strict';
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -21,12 +21,12 @@ test(function(t) {
'state');
}, 'The current time returns the hold time when set');
promise_test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
return animation.ready.then(function() {
return animation.ready.then(() => {
assert_equals(animation.currentTime, null);
});
}, 'The current time is unresolved when there is no associated timeline ' +
@ -35,8 +35,8 @@ promise_test(function(t) {
// FIXME: Test that the current time is unresolved when we have an inactive
// timeline if we find a way of creating an inactive timeline!
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -45,30 +45,29 @@ test(function(t) {
}, 'The current time is unresolved when the start time is unresolved ' +
'(and no hold time is set)');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.playbackRate = 2;
animation.startTime = document.timeline.currentTime - 25 * MS_PER_SEC;
var timelineTime = document.timeline.currentTime;
var startTime = animation.startTime;
var playbackRate = animation.playbackRate;
const timelineTime = document.timeline.currentTime;
const startTime = animation.startTime;
const playbackRate = animation.playbackRate;
assert_times_equal(animation.currentTime,
(timelineTime - startTime) * playbackRate,
'Animation has a unresolved start time');
}, 'The current time is calculated from the timeline time, start time and ' +
'playback rate');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = 0;
return animation.ready.then(function() {
return waitForAnimationFrames(1);
}).then(function() {
return animation.ready.then(() => waitForAnimationFrames(1))
.then(() => {
assert_times_equal(animation.currentTime, 0);
});
}, 'The current time does not progress if playback rate is 0');

4
tests/wpt/web-platform-tests/web-animations/timing-model/animations/finishing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Finishing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#finishing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,7 +11,7 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
let readyResolved = false;

6
tests/wpt/web-platform-tests/web-animations/timing-model/animations/pausing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Pausing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#finishing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#pausing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,14 +11,14 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
animation.pause();
return promise.then(p => {
assert_equals(p, animation);
assert_equals(animation.ready, promise);
assert_equals(animation.playState, 'paused');
assert_false(animation.pending, 'No longer pause-pending');
});
}, 'A pending ready promise should be resolved and not replaced when the'
+ ' animation is paused');

157
tests/wpt/web-platform-tests/web-animations/timing-model/animations/play-states.html Normal file
View file

@ -0,0 +1,157 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Play states</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#play-state">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
assert_equals(animation.currentTime, null,
'Current time should be initially unresolved');
assert_equals(animation.playState, 'idle');
}, 'reports \'idle\' for an animation with an unresolved current time'
+ ' and no pending tasks')
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.pause();
assert_equals(animation.playState, 'paused');
}, 'reports \'paused\' for an animation with a pending pause task');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.currentTime = 0;
assert_equals(animation.startTime, null,
'Start time should still be unresolved after setting current'
+ ' time');
assert_equals(animation.playState, 'paused');
}, 'reports \'paused\' for an animation with a resolved current time and'
+ ' unresolved start time')
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
assert_not_equals(animation.currentTime, null,
'Current time should be resolved after setting start time');
assert_equals(animation.playState, 'running');
}, 'reports \'running\' for an animation with a resolved start time and'
+ ' current time');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate > 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = 0;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate = 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = -1;
animation.currentTime = 100 * MS_PER_SEC;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate < 0 and'
+ ' current time = target effect end');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.currentTime = 0;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate > 0 and'
+ ' current time = 0');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = 0;
animation.currentTime = 0;
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate = 0 and'
+ ' current time = 0');
test(t => {
const animation = new Animation(
new KeyframeEffect(null, {}, 100 * MS_PER_SEC)
);
animation.startTime = document.timeline.currentTime;
animation.playbackRate = -1;
animation.currentTime = 0;
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate < 0 and'
+ ' current time = 0');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 0);
assert_equals(animation.startTime, null,
'Sanity check: start time should be unresolved');
assert_equals(animation.playState, 'finished');
}, 'reports \'finished\' when playback rate > 0 and'
+ ' current time = target effect end and there is a pending play task');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
assert_equals(animation.startTime, null,
'Sanity check: start time should be unresolved');
assert_equals(animation.playState, 'running');
}, 'reports \'running\' when playback rate > 0 and'
+ ' current time < target effect end and there is a pending play task');
</script>
</body>

18
tests/wpt/web-platform-tests/web-animations/timing-model/animations/playing-an-animation.html
View file

@ -2,7 +2,7 @@
<meta charset=utf-8>
<title>Playing an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#playing-an-animation-section">
href="https://drafts.csswg.org/web-animations/#playing-an-animation-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -11,24 +11,24 @@
<script>
'use strict';
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.currentTime = 1 * MS_PER_SEC;
assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
animation.play();
assert_times_equal(animation.currentTime, 1 * MS_PER_SEC);
}, 'Playing a running animation leaves the current time unchanged');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.finish();
assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
animation.play();
assert_times_equal(animation.currentTime, 0);
}, 'Playing a finished animation seeks back to the start');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 0;
assert_times_equal(animation.currentTime, 0);
@ -36,7 +36,7 @@ test(function(t) {
assert_times_equal(animation.currentTime, 100 * MS_PER_SEC);
}, 'Playing a finished and reversed animation seeks to end');
test(function(t) {
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
animation.cancel();
const promise = animation.ready;
@ -45,7 +45,7 @@ test(function(t) {
}, 'The ready promise should be replaced if the animation is not already'
+ ' pending');
promise_test(function(t) {
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
const promise = animation.ready;
return promise.then(p => {

132
tests/wpt/web-platform-tests/web-animations/timing-model/animations/reversing-an-animation.html
View file

@ -1,53 +1,53 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Reversing an animation</title>
<title>Reverse an animation</title>
<link rel="help"
href="https://w3c.github.io/web-animations/#reverse-an-animation">
href="https://drafts.csswg.org/web-animations/#reverse-an-animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
"use strict";
'use strict';
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
// Wait a frame because if currentTime is still 0 when we call
// reverse(), it will throw (per spec).
return animation.ready.then(waitForAnimationFrames(1)).then(function() {
return animation.ready.then(waitForAnimationFrames(1)).then(() => {
assert_greater_than_equal(animation.currentTime, 0,
'currentTime expected to be greater than 0, one frame after starting');
animation.currentTime = 50 * MS_PER_SEC;
var previousPlaybackRate = animation.playbackRate;
const previousPlaybackRate = animation.playbackRate;
animation.reverse();
assert_equals(animation.playbackRate, -previousPlaybackRate,
'playbackRate should be inverted');
});
}, 'Reversing an animation inverts the playback rate');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = 50 * MS_PER_SEC;
animation.pause();
return animation.ready.then(function() {
return animation.ready.then(() => {
animation.reverse();
return animation.ready;
}).then(function() {
}).then(() => {
assert_equals(animation.playState, 'running',
'Animation.playState should be "running" after reverse()');
});
}, 'Reversing an animation plays a pausing animation');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 50 * MS_PER_SEC;
animation.reverse();
@ -56,24 +56,24 @@ test(function(t) {
'the animation duration');
}, 'Reversing an animation maintains the same current time');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
assert_equals(animation.playState, 'pending',
'The playState is pending before we call reverse');
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
assert_true(animation.pending,
'The animation is pending before we call reverse');
animation.reverse();
assert_equals(animation.playState, 'pending',
'The playState is still pending after calling reverse');
assert_true(animation.pending,
'The animation is still pending after calling reverse');
}, 'Reversing an animation does not cause it to leave the pending state');
promise_test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
var readyResolved = false;
promise_test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 200 * MS_PER_SEC,
delay: -100 * MS_PER_SEC });
let readyResolved = false;
animation.ready.then(() => { readyResolved = true; });
animation.reverse();
@ -84,9 +84,9 @@ promise_test(function(t) {
});
}, 'Reversing an animation does not cause it to resolve the ready promise');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = 200 * MS_PER_SEC;
animation.reverse();
@ -96,9 +96,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate > 0 and currentTime > ' +
'effect end should make it play from the end');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.currentTime = -200 * MS_PER_SEC;
animation.reverse();
@ -109,9 +109,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate > 0 and currentTime < 0 ' +
'should make it play from the end');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = -200 * MS_PER_SEC;
animation.reverse();
@ -122,9 +122,9 @@ test(function(t) {
}, 'Reversing an animation when playbackRate < 0 and currentTime < 0 ' +
'should make it play from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = -1;
animation.currentTime = 200 * MS_PER_SEC;
animation.reverse();
@ -135,23 +135,23 @@ test(function(t) {
}, 'Reversing an animation when playbackRate < 0 and currentTime > effect ' +
'end should make it play from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
assert_throws('InvalidStateError',
function () { animation.reverse(); },
() => { animation.reverse(); },
'reverse() should throw InvalidStateError ' +
'if the playbackRate > 0 and the currentTime < 0 ' +
'and the target effect is positive infinity');
}, 'Reversing an animation when playbackRate > 0 and currentTime < 0 ' +
'and the target effect end is positive infinity should throw an exception');
test(function(t) {
var animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
test(t => {
const animation = createDiv(t).animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
try { animation.reverse(); } catch(e) { }
@ -159,10 +159,10 @@ test(function(t) {
assert_equals(animation.playbackRate, 1, 'playbackRate remains unchanged');
}, 'When reversing throws an exception, the playback rate remains unchanged');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.currentTime = -200 * MS_PER_SEC;
animation.playbackRate = 0;
@ -175,10 +175,10 @@ test(function(t) {
'and the target effect end is positive infinity should NOT throw an ' +
'exception');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, {duration: 100 * MS_PER_SEC,
iterations: Infinity});
test(t => {
const div = createDiv(t);
const animation = div.animate({}, { duration: 100 * MS_PER_SEC,
iterations: Infinity });
animation.playbackRate = -1;
animation.currentTime = -200 * MS_PER_SEC;
animation.reverse();
@ -191,9 +191,9 @@ test(function(t) {
'and the target effect end is positive infinity should make it play ' +
'from the start');
test(function(t) {
var div = createDiv(t);
var animation = div.animate({}, 100 * MS_PER_SEC);
test(t => {
const div = createDiv(t);
const animation = div.animate({}, 100 * MS_PER_SEC);
animation.playbackRate = 0;
animation.currentTime = 50 * MS_PER_SEC;
animation.reverse();
@ -206,12 +206,12 @@ test(function(t) {
}, 'Reversing when when playbackRate == 0 should preserve the current ' +
'time and playback rate');
test(function(t) {
var div = createDiv(t);
var animation =
test(t => {
const div = createDiv(t);
const animation =
new Animation(new KeyframeEffect(div, null, 100 * MS_PER_SEC), null);
assert_throws('InvalidStateError', function() { animation.reverse(); });
assert_throws('InvalidStateError', () => { animation.reverse(); });
}, 'Reversing an animation without an active timeline throws an ' +
'InvalidStateError');

63
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-animation-start-time.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the start time tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#set-the-animation-start-time">
<title>Set the animation start time</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#set-the-animation-start-time">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -10,12 +10,11 @@
<script>
'use strict';
test(function(t)
{
test(t => {
// It should only be possible to set *either* the start time or the current
// time for an animation that does not have an active timeline.
var animation =
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
@ -41,12 +40,11 @@ test(function(t)
}, 'Setting the start time of an animation without an active timeline');
test(function(t)
{
test(t => {
// Setting an unresolved start time on an animation without an active
// timeline should not clear the current time.
var animation =
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
@ -66,9 +64,8 @@ test(function(t)
}, 'Setting an unresolved start time an animation without an active timeline'
+ ' does not clear the current time');
test(function(t)
{
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -93,9 +90,8 @@ test(function(t)
+ ' start time');
}, 'Setting the start time clears the hold time');
test(function(t)
{
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -115,21 +111,20 @@ test(function(t)
+ ' start time');
}, 'Setting an unresolved start time sets the hold time');
promise_test(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var readyPromiseCallbackCalled = false;
animation.ready.then(function() { readyPromiseCallbackCalled = true; } );
let readyPromiseCallbackCalled = false;
animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
// Put the animation in the play-pending state
animation.play();
// Sanity check
assert_equals(animation.playState, 'pending',
'Animation is in play-pending state');
assert_true(animation.pending && animation.playState === 'running',
'Animation is in play-pending state');
// Setting the start time should resolve the 'ready' promise, i.e.
// it should schedule a microtask to run the promise callbacks.
@ -139,28 +134,27 @@ promise_test(function(t)
// If we schedule another microtask then it should run immediately after
// the ready promise resolution microtask.
return Promise.resolve().then(function() {
return Promise.resolve().then(() => {
assert_true(readyPromiseCallbackCalled,
'Ready promise callback called after setting startTime');
});
}, 'Setting the start time resolves a pending ready promise');
promise_test(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var readyPromiseCallbackCalled = false;
animation.ready.then(function() { readyPromiseCallbackCalled = true; } );
let readyPromiseCallbackCalled = false;
animation.ready.then(() => { readyPromiseCallbackCalled = true; } );
// Put the animation in the pause-pending state
animation.startTime = document.timeline.currentTime;
animation.pause();
// Sanity check
assert_equals(animation.playState, 'pending',
'Animation is in pause-pending state');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is in pause-pending state');
// Setting the start time should resolve the 'ready' promise although
// the resolution callbacks when be run in a separate microtask.
@ -168,15 +162,14 @@ promise_test(function(t)
assert_false(readyPromiseCallbackCalled,
'Ready promise callback is not called synchronously');
return Promise.resolve().then(function() {
return Promise.resolve().then(() => {
assert_true(readyPromiseCallbackCalled,
'Ready promise callback called after setting startTime');
});
}, 'Setting the start time resolves a pending pause task');
promise_test(function(t)
{
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
@ -195,8 +188,8 @@ promise_test(function(t)
// Furthermore, that time should persist if we have correctly updated
// the hold time
var finishedCurrentTime = animation.currentTime;
return waitForAnimationFrames(1).then(function() {
const finishedCurrentTime = animation.currentTime;
return waitForAnimationFrames(1).then(() => {
assert_equals(animation.currentTime, finishedCurrentTime,
'Current time does not change after seeking past the effect'
+ ' end time by setting the current time');

60
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-target-effect-of-an-animation.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the target effect tests</title>
<link rel='help' href='https://w3c.github.io/web-animations/#setting-the-target-effect'>
<title>Setting the target effect</title>
<link rel='help' href='https://drafts.csswg.org/web-animations/#setting-the-target-effect'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../../testcommon.js'></script>
@ -10,63 +10,67 @@
<script>
'use strict';
promise_test(function(t) {
var anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
promise_test(t => {
const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_true(anim.pending);
var retPromise = anim.ready.then(function() {
const retPromise = anim.ready.then(() => {
assert_unreached('ready promise is fulfilled');
}).catch(function(err) {
}).catch(err => {
assert_equals(err.name, 'AbortError',
'ready promise is rejected with AbortError');
});
anim.effect = null;
// This is a bit odd, see: https://github.com/w3c/web-animations/issues/207
assert_equals(anim.playState, 'paused');
assert_false(anim.pending);
return retPromise;
}, 'If new effect is null and old effect is not null, we reset the pending ' +
'tasks and ready promise is rejected');
promise_test(function(t) {
var anim = new Animation();
promise_test(t => {
const anim = new Animation();
anim.pause();
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
return anim.ready.then(function() {
return anim.ready.then(() => {
assert_false(anim.pending);
assert_equals(anim.playState, 'paused');
});
}, 'If animation has a pending pause task, reschedule that task to run ' +
'as soon as animation is ready.');
promise_test(function(t) {
var anim = new Animation();
promise_test(t => {
const anim = new Animation();
anim.play();
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
{ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
assert_equals(anim.playState, 'pending');
assert_true(anim.pending);
return anim.ready.then(function() {
return anim.ready.then(() => {
assert_false(anim.pending);
assert_equals(anim.playState, 'running');
});
}, 'If animation has a pending play task, reschedule that task to run ' +
'as soon as animation is ready to play new effect.');
promise_test(function(t) {
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = new Animation();
promise_test(t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
return animA.ready.then(function() {
return animA.ready.then(() => {
animB.effect = animA.effect;
assert_equals(animA.effect, null);
assert_equals(animA.playState, 'finished');
@ -74,11 +78,11 @@ promise_test(function(t) {
}, 'When setting the effect of an animation to the effect of an existing ' +
'animation, the existing animation\'s target effect should be set to null.');
test(function(t) {
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
var animB = new Animation();
var effect = animA.effect;
test(t => {
const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
100 * MS_PER_SEC);
const animB = new Animation();
const effect = animA.effect;
animA.currentTime = 50 * MS_PER_SEC;
animB.currentTime = 20 * MS_PER_SEC;
assert_equals(effect.getComputedTiming().progress, 0.5,

150
tests/wpt/web-platform-tests/web-animations/timing-model/animations/set-the-timeline-of-an-animation.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the timeline tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#setting-the-timeline">
<title>Setting the timeline</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-timeline">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -16,8 +16,8 @@
//
// ---------------------------------------------------------------------
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.currentTime = 50 * MS_PER_SEC;
@ -29,8 +29,8 @@ test(function(t) {
assert_times_equal(animation.currentTime, 50 * MS_PER_SEC);
}, 'After setting timeline on paused animation it is still paused');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.currentTime = 200 * MS_PER_SEC;
@ -43,8 +43,8 @@ test(function(t) {
}, 'After setting timeline on animation paused outside active interval'
+ ' it is still paused');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
assert_equals(animation.playState, 'idle');
@ -55,8 +55,8 @@ test(function(t) {
}, 'After setting timeline on an idle animation without a start time'
+ ' it is still idle');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime;
@ -68,8 +68,8 @@ test(function(t) {
}, 'After setting timeline on an idle animation with a start time'
+ ' it is running');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC;
@ -81,60 +81,44 @@ test(function(t) {
}, 'After setting timeline on an idle animation with a sufficiently ancient'
+ ' start time it is finished');
test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.play();
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'running',
'Animation is initially play-pending');
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
}, 'After setting timeline on a play-pending animation it is still pending');
assert_true(animation.pending && animation.playState === 'running',
'Animation is still play-pending after setting timeline');
promise_test(function(t) {
var animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.play();
assert_equals(animation.playState, 'pending');
animation.timeline = document.timeline;
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'running',
'Animation plays after it finishes pending');
});
}, 'After setting timeline on a play-pending animation it begins playing'
+ ' after pending');
test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime;
animation.pause();
animation.timeline = null;
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is initially pause-pending');
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
}, 'After setting timeline on a pause-pending animation it is still pending');
assert_true(animation.pending && animation.playState === 'paused',
'Animation is still pause-pending after setting timeline');
promise_test(function(t) {
var animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
null);
animation.startTime = document.timeline.currentTime;
animation.pause();
animation.timeline = null;
assert_equals(animation.playState, 'pending');
animation.timeline = document.timeline;
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'paused',
'Animation pauses after it finishes pending');
});
}, 'After setting timeline on a pause-pending animation it becomes paused'
+ ' after pending');
@ -145,24 +129,26 @@ promise_test(function(t) {
//
// ---------------------------------------------------------------------
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.currentTime = 50 * MS_PER_SEC;
assert_false(animation.pending);
assert_equals(animation.playState, 'paused');
animation.timeline = null;
assert_false(animation.pending);
assert_equals(animation.playState, 'paused');
assert_times_equal(animation.currentTime, 50 * MS_PER_SEC);
}, 'After clearing timeline on paused animation it is still paused');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC;
const initialStartTime = document.timeline.currentTime - 200 * MS_PER_SEC;
animation.startTime = initialStartTime;
assert_equals(animation.playState, 'finished');
@ -172,11 +158,11 @@ test(function(t) {
assert_times_equal(animation.startTime, initialStartTime);
}, 'After clearing timeline on finished animation it is idle');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = initialStartTime;
assert_equals(animation.playState, 'running');
@ -186,8 +172,8 @@ test(function(t) {
assert_times_equal(animation.startTime, initialStartTime);
}, 'After clearing timeline on running animation it is idle');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
assert_equals(animation.playState, 'idle');
@ -198,75 +184,73 @@ test(function(t) {
assert_equals(animation.startTime, null);
}, 'After clearing timeline on idle animation it is still idle');
test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'running');
}, 'After clearing timeline on play-pending animation it is still pending');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_equals(animation.playState, 'pending');
promise_test(t => {
const animation = createDiv(t).animate(null, 100 * MS_PER_SEC);
assert_true(animation.pending && animation.playState === 'running');
animation.timeline = null;
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
assert_true(animation.pending && animation.playState === 'running');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'running');
});
}, 'After clearing and re-setting timeline on play-pending animation it'
+ ' begins to play');
test(function(t) {
var animation =
test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.startTime = document.timeline.currentTime;
animation.pause();
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'paused');
}, 'After clearing timeline on a pause-pending animation it is still pending');
promise_test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
animation.startTime = document.timeline.currentTime;
animation.pause();
assert_equals(animation.playState, 'pending');
assert_true(animation.pending && animation.playState === 'paused');
animation.timeline = null;
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'paused');
assert_true(animation.pending && animation.playState === 'paused');
return animation.ready.then(() => {
assert_true(!animation.pending && animation.playState === 'paused');
});
}, 'After clearing and re-setting timeline on a pause-pending animation it'
+ ' becomes paused');
+ ' completes pausing');
promise_test(function(t) {
var animation =
promise_test(t => {
const animation =
new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
document.timeline);
var initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
const initialStartTime = document.timeline.currentTime - 50 * MS_PER_SEC;
animation.startTime = initialStartTime;
animation.pause();
animation.play();
animation.timeline = null;
animation.timeline = document.timeline;
assert_equals(animation.playState, 'pending');
return animation.ready.then(function() {
assert_equals(animation.playState, 'running');
return animation.ready.then(() => {
assert_times_equal(animation.startTime, initialStartTime);
});
}, 'After clearing and re-setting timeline on an animation in the middle of'

200
tests/wpt/web-platform-tests/web-animations/timing-model/animations/updating-the-finished-state.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for updating the finished state of an animation</title>
<link rel="help" href="https://w3c.github.io/web-animations/#updating-the-finished-state">
<title>Updating the finished state</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#updating-the-finished-state">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -20,29 +20,29 @@
// (Also the start time is resolved and there is pending task)
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
// Here and in the following tests we wait until ready resolves as
// otherwise we don't have a resolved start time. We test the case
// where the start time is unresolved in a subsequent test.
return anim.ready.then(function() {
return anim.ready.then(() => {
// Seek to 1ms before the target end and then wait 1ms
anim.currentTime = 100 * MS_PER_SEC - 1;
return waitForAnimationFramesWithDelay(1);
}).then(function() {
}).then(() => {
assert_equals(anim.currentTime, 100 * MS_PER_SEC,
'Hold time is set to target end clamping current time');
});
}, 'Updating the finished state when playing past end');
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(() => {
anim.currentTime = 200 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 200 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -59,12 +59,12 @@ promise_test(function(t) {
// (on the subsequent tick the hold time will be set to the same value anyway).
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(function() {
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
return anim.ready.then(() => {
anim.currentTime = 100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 100 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -75,29 +75,29 @@ promise_test(function(t) {
// (Also the start time is resolved and there is pending task)
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play(); // Make sure animation is not initially finished
return anim.ready.then(function() {
return anim.ready.then(() => {
// Seek to 1ms before 0 and then wait 1ms
anim.currentTime = 1;
return waitForAnimationFramesWithDelay(1);
}).then(function() {
}).then(() => {
assert_equals(anim.currentTime, 0 * MS_PER_SEC,
'Hold time is set to zero clamping current time');
});
}, 'Updating the finished state when playing in reverse past zero');
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = -100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, -100 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -107,14 +107,14 @@ promise_test(function(t) {
// it doesn't really matter.
// Did seek = true
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
anim.play();
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 0;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 0 * MS_PER_SEC,
'Hold time is set so current time should NOT change');
});
@ -126,38 +126,38 @@ promise_test(function(t) {
// (Also the start time is resolved and there is pending task)
// Did seek = false; playback rate > 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
// We want to test that the hold time is cleared so first we need to
// put the animation in a state where the hold time is set.
anim.finish();
return anim.ready.then(function() {
return anim.ready.then(() => {
assert_equals(anim.currentTime, 100 * MS_PER_SEC,
'Hold time is initially set');
// Then extend the duration so that the hold time is cleared and on
// the next tick the current time will increase.
anim.effect.timing.duration *= 2;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_greater_than(anim.currentTime, 100 * MS_PER_SEC,
'Hold time is not set so current time should increase');
});
}, 'Updating the finished state when playing before end');
// Did seek = true; playback rate > 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.finish();
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 50 * MS_PER_SEC;
// When did seek = true, updating the finished state: (i) updates
// the animation's start time and (ii) clears the hold time.
// We can test both by checking that the currentTime is initially
// updated and then increases.
assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_greater_than(anim.currentTime, 50 * MS_PER_SEC,
'Hold time is not set so current time should increase');
});
@ -177,14 +177,14 @@ promise_test(function(t) {
// will set did seek = true).
// Did seek = true; playback rate < 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = -1;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 50 * MS_PER_SEC;
assert_equals(anim.currentTime, 50 * MS_PER_SEC, 'Start time is updated');
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_less_than(anim.currentTime, 50 * MS_PER_SEC,
'Hold time is not set so current time should decrease');
});
@ -193,13 +193,13 @@ promise_test(function(t) {
// CASE 4: playback rate == 0
// current time < 0
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = -100 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, -100 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -208,13 +208,13 @@ promise_test(function(t) {
+ ' current time is less than zero');
// current time < target end
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 50 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 50 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -223,13 +223,13 @@ promise_test(function(t) {
+ ' current time is less than end');
// current time > target end
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.playbackRate = 0;
return anim.ready.then(function() {
return anim.ready.then(() => {
anim.currentTime = 200 * MS_PER_SEC;
return waitForAnimationFrames(1);
}).then(function() {
return waitForNextFrame();
}).then(() => {
assert_equals(anim.currentTime, 200 * MS_PER_SEC,
'Hold time should not be cleared so current time should'
+ ' NOT change');
@ -239,8 +239,8 @@ promise_test(function(t) {
// CASE 5: current time unresolved
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
// Trigger a change that will cause the "update the finished state"
// procedure to run.
@ -251,7 +251,7 @@ promise_test(function(t) {
// change to timing, but just in case an implementation defers that, let's
// wait a frame and check that the hold time / start time has still not been
// updated.
return waitForAnimationFrames(1).then(function() {
return waitForAnimationFrames(1).then(() => {
assert_equals(anim.currentTime, null,
'The animation hold time / start time should not be updated');
});
@ -259,8 +259,8 @@ promise_test(function(t) {
// CASE 6: has a pending task
test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 75 * MS_PER_SEC;
anim.play();
@ -278,8 +278,8 @@ test(function(t) {
// CASE 7: start time unresolved
// Did seek = false
promise_test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
promise_test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
// Make it so that only the start time is unresolved (to avoid overlapping
// with the test case where current time is unresolved)
@ -287,7 +287,7 @@ promise_test(function(t) {
// Trigger a change that will cause the "update the finished state"
// procedure to run (did seek = false).
anim.effect.timing.duration = 200 * MS_PER_SEC;
return waitForAnimationFrames(1).then(function() {
return waitForAnimationFrames(1).then(() => {
assert_equals(anim.currentTime, 150 * MS_PER_SEC,
'The animation hold time should not be updated');
assert_equals(anim.startTime, null,
@ -297,8 +297,8 @@ promise_test(function(t) {
+ ' did seek = false');
// Did seek = true
test(function(t) {
var anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
test(t => {
const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
anim.cancel();
anim.currentTime = 150 * MS_PER_SEC;
// Trigger a change that will cause the "update the finished state"
@ -318,14 +318,14 @@ test(function(t) {
// --------------------------------------------------------------------
function waitForFinishEventAndPromise(animation) {
var eventPromise = new Promise(function(resolve) {
animation.onfinish = function() { resolve(); }
const eventPromise = new Promise(resolve => {
animation.onfinish = resolve;
});
return Promise.all([eventPromise, animation.finished]);
}
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish =
t.unreached_func('Seeking to finish should not fire finish event');
animation.finished.then(
@ -337,27 +337,27 @@ promise_test(function(t) {
}, 'Finish notification steps don\'t run when the animation seeks to finish'
+ ' and then seeks back again');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
return animation.ready.then(() => {
return waitForFinishEventAndPromise(animation);
});
}, 'Finish notification steps run when the animation completes normally');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
return animation.ready.then(() => {
animation.currentTime = 10;
return waitForFinishEventAndPromise(animation);
});
}, 'Finish notification steps run when the animation seeks past finish');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
return animation.ready.then(function() {
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
return animation.ready.then(() => {
// Register for notifications now since once we seek away from being
// finished the 'finished' promise will be replaced.
var finishNotificationSteps = waitForFinishEventAndPromise(animation);
const finishNotificationSteps = waitForFinishEventAndPromise(animation);
animation.finish();
animation.currentTime = 0;
animation.pause();
@ -366,41 +366,41 @@ promise_test(function(t) {
}, 'Finish notification steps run when the animation completes with .finish(),'
+ ' even if we then seek away');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
var initialFinishedPromise = animation.finished;
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
return animation.finished.then(function(target) {
return animation.finished.then(target => {
animation.currentTime = 0;
assert_not_equals(initialFinishedPromise, animation.finished);
});
}, 'Animation finished promise is replaced after seeking back to start');
promise_test(function(t) {
var animation = createDiv(t).animate(null, 1);
var initialFinishedPromise = animation.finished;
promise_test(t => {
const animation = createDiv(t).animate(null, 1);
const initialFinishedPromise = animation.finished;
return animation.finished.then(function(target) {
return animation.finished.then(target => {
animation.play();
assert_not_equals(initialFinishedPromise, animation.finished);
});
}, 'Animation finished promise is replaced after replaying from start');
async_test(function(t) {
var animation = createDiv(t).animate(null, 1);
animation.onfinish = function(event) {
async_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish = event => {
animation.currentTime = 0;
animation.onfinish = function(event) {
animation.onfinish = event => {
t.done();
};
};
}, 'Animation finish event is fired again after seeking back to start');
async_test(function(t) {
var animation = createDiv(t).animate(null, 1);
animation.onfinish = function(event) {
async_test(t => {
const animation = createDiv(t).animate(null, 1);
animation.onfinish = event => {
animation.play();
animation.onfinish = function(event) {
animation.onfinish = event => {
t.done();
};
};

36
tests/wpt/web-platform-tests/web-animations/timing-model/time-transformations/transformed-progress.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for the transformed progress</title>
<link rel="help" href="https://w3c.github.io/web-animations/#calculating-the-transformed-progress">
<title>Transformed progress</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -12,14 +12,14 @@
<script>
'use strict';
gEasingTests.forEach(params => {
test(function(t) {
for (const params of gEasingTests) {
test(t => {
const target = createDiv(t);
const anim = target.animate(null, { duration: 1000,
fill: 'forwards',
easing: params.easing });
[ 0, 250, 500, 750, 1000 ].forEach(sampleTime => {
for (const sampleTime of [0, 250, 500, 750, 1000]) {
anim.currentTime = sampleTime;
const portion = sampleTime / anim.effect.getComputedTiming().duration;
const expectedProgress = params.easingFunction(portion);
@ -27,15 +27,15 @@ gEasingTests.forEach(params => {
expectedProgress,
0.01,
'The progress should be approximately ' +
expectedProgress + ` at ${sampleTime}ms`);
});
}, 'Transformed progress for ' + params.desc);
});
`${expectedProgress} at ${sampleTime}ms`);
}
}, `Transformed progress for ${params.desc}`);
}
// Additional tests for various boundary conditions of step timing functions and
// frames timing functions.
var gStepAndFramesTimingFunctionTests = [
const gStepAndFramesTimingFunctionTests = [
{
description: 'Test bounds point of step-start easing',
effect: {
@ -291,18 +291,18 @@ var gStepAndFramesTimingFunctionTests = [
}
];
gStepAndFramesTimingFunctionTests.forEach(function(options) {
test(function(t) {
var target = createDiv(t);
var animation = target.animate(null, options.effect);
options.conditions.forEach(function(condition) {
for (const options of gStepAndFramesTimingFunctionTests) {
test(t => {
const target = createDiv(t);
const animation = target.animate(null, options.effect);
for (const condition of options.conditions) {
animation.currentTime = condition.currentTime;
assert_equals(animation.effect.getComputedTiming().progress,
condition.progress,
'Progress at ' + animation.currentTime + 'ms');
});
`Progress at ${animation.currentTime}ms`);
}
}, options.description);
});
}
</script>
</body>

8
tests/wpt/web-platform-tests/web-animations/timing-model/timelines/document-timelines.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Document timelines</title>
<link rel="help" href="https://w3c.github.io/web-animations/#document-timelines">
<link rel="help" href="https://drafts.csswg.org/web-animations/#document-timelines">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,7 +9,7 @@
<script>
'use strict';
async_test(function(t) {
async_test(t => {
assert_true(document.timeline.currentTime > 0,
'The current time is initially is positive');
// document.timeline.currentTime should be set even before document
@ -25,8 +25,8 @@ async_test(function(t) {
// We can't just compare document.timeline.currentTime to
// window.performance.now() because currentTime is only updated on a sample
// so we use requestAnimationFrame instead.
window.requestAnimationFrame(function(rafTime) {
t.step(function() {
window.requestAnimationFrame(rafTime => {
t.step(() => {
assert_equals(document.timeline.currentTime, rafTime,
'The current time matches requestAnimationFrame time');
});

31
tests/wpt/web-platform-tests/web-animations/timing-model/timelines/timelines.html
View file

@ -1,7 +1,7 @@
<!doctype html>
<meta charset=utf-8>
<title>Timelines</title>
<link rel="help" href="https://w3c.github.io/web-animations/#timelines">
<link rel="help" href="https://drafts.csswg.org/web-animations/#timelines">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
@ -9,7 +9,7 @@
<script>
'use strict';
promise_test(function(t) {
promise_test(t => {
const valueAtStart = document.timeline.currentTime;
const timeAtStart = window.performance.now();
while (window.performance.now() - timeAtStart < 50) {
@ -17,13 +17,13 @@ promise_test(function(t) {
}
assert_equals(document.timeline.currentTime, valueAtStart,
'Timeline time does not change within an animation frame');
return waitForAnimationFrames(1).then(function() {
return waitForAnimationFrames(1).then(() => {
assert_greater_than(document.timeline.currentTime, valueAtStart,
'Timeline time increases between animation frames');
});
}, 'Timeline time increases once per animation frame');
async_test(function(t) {
async_test(t => {
const iframe = document.createElement('iframe');
iframe.width = 10;
iframe.height = 10;
@ -49,20 +49,20 @@ async_test(function(t) {
document.body.appendChild(iframe);
}, 'Timeline time increases once per animation frame in an iframe');
async_test(function(t) {
async_test(t => {
const startTime = document.timeline.currentTime;
let firstRafTime;
requestAnimationFrame(function() {
t.step(function() {
requestAnimationFrame(() => {
t.step(() => {
assert_greater_than_equal(document.timeline.currentTime, startTime,
'Timeline time should have progressed');
firstRafTime = document.timeline.currentTime;
});
});
requestAnimationFrame(function() {
t.step(function() {
requestAnimationFrame(() => {
t.step(() => {
assert_equals(document.timeline.currentTime, firstRafTime,
'Timeline time should be the same');
});
@ -71,4 +71,17 @@ async_test(function(t) {
}, 'Timeline time should be the same for all RAF callbacks in an animation'
+ ' frame');
async_test(t => {
const div = createDiv(t);
const animation = div.animate(null, 100 * MS_PER_SEC);
animation.ready.then(t.step_func(() => {
const readyTimelineTime = document.timeline.currentTime;
requestAnimationFrame(t.step_func_done(() => {
assert_equals(readyTimelineTime, document.timeline.currentTime,
'There should be a microtask checkpoint');
}));
}));
}, 'Performs a microtask checkpoint after updating timelins');
</script>