mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-09-09 04:54:33 +00:00
174 lines
5.5 KiB
HTML
174 lines
5.5 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<style>
|
|
@keyframes anim {
|
|
to { transform: translate(100px) }
|
|
}
|
|
</style>
|
|
<body>
|
|
<script>
|
|
'use strict';
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s infinite' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
// Wait a frame because if currentTime is still 0 when we call
|
|
// reverse(), it will throw (per spec).
|
|
animation.ready.then(waitForFrame).then(t.step_func_done(function() {
|
|
assert_greater_than(animation.currentTime, 0,
|
|
'currentTime expected to be greater than 0, one frame after starting');
|
|
var previousPlaybackRate = animation.playbackRate;
|
|
animation.reverse();
|
|
assert_equals(animation.playbackRate, -previousPlaybackRate,
|
|
'playbackRate should be invetrted');
|
|
}));
|
|
}, 'reverse() inverts playbackRate');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s infinite' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.currentTime = 50000;
|
|
animation.pause();
|
|
animation.ready.then(t.step_func(function() {
|
|
animation.reverse();
|
|
return animation.ready;
|
|
})).then(t.step_func_done(function() {
|
|
assert_equals(animation.playState, 'running',
|
|
'Animation.playState should be "running" after reverse()');
|
|
}));
|
|
}, 'reverse() starts to play when pausing animation');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
div.style.animation = "";
|
|
flushComputedStyle(div);
|
|
|
|
assert_equals(animation.currentTime, null);
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 100000,
|
|
'animation.currentTime should be its effect end');
|
|
t.done();
|
|
}, 'reverse() from idle state starts playing the animation');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.currentTime = 50000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 50000,
|
|
'reverse() should not change the currentTime ' +
|
|
'if the currentTime is in the middle of animation duration');
|
|
t.done();
|
|
}, 'reverse() maintains the same currentTime');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.currentTime = 200000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 100000,
|
|
'reverse() should start playing from the animation effect end ' +
|
|
'if the playbackRate > 0 and the currentTime > effect end');
|
|
t.done();
|
|
}, 'reverse() when playbackRate > 0 and currentTime > effect end');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.currentTime = -200000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 100000,
|
|
'reverse() should start playing from the animation effect end ' +
|
|
'if the playbackRate > 0 and the currentTime < 0');
|
|
t.done();
|
|
}, 'reverse() when playbackRate > 0 and currentTime < 0');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.playbackRate = -1;
|
|
animation.currentTime = -200000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 0,
|
|
'reverse() should start playing from the start of animation time ' +
|
|
'if the playbackRate < 0 and the currentTime < 0');
|
|
t.done();
|
|
}, 'reverse() when playbackRate < 0 and currentTime < 0');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.playbackRate = -1;
|
|
animation.currentTime = 200000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 0,
|
|
'reverse() should start playing from the start of animation time ' +
|
|
'if the playbackRate < 0 and the currentTime > effect end');
|
|
t.done();
|
|
}, 'reverse() when playbackRate < 0 and currentTime > effect end');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s infinite' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.currentTime = -200000;
|
|
|
|
assert_throws('InvalidStateError',
|
|
function () { animation.reverse(); },
|
|
'reverse() should throw InvalidStateError ' +
|
|
'if the playbackRate > 0 and the currentTime < 0 ' +
|
|
'and the target effect is positive infinity');
|
|
t.done();
|
|
}, 'reverse() when playbackRate > 0 and currentTime < 0 ' +
|
|
'and the target effect is positive infinity');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s infinite' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.playbackRate = -1;
|
|
animation.currentTime = -200000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.currentTime, 0,
|
|
'reverse() should start playing from the start of animation time ' +
|
|
'if the playbackRate < 0 and the currentTime < 0 ' +
|
|
'and the target effect is positive infinity');
|
|
t.done();
|
|
}, 'reverse() when playbackRate < 0 and currentTime < 0 ' +
|
|
'and the target effect is positive infinity');
|
|
|
|
async_test(function(t) {
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
var animation = div.getAnimations()[0];
|
|
|
|
animation.playbackRate = 0;
|
|
animation.currentTime = 50000;
|
|
animation.reverse();
|
|
|
|
assert_equals(animation.playbackRate, 0,
|
|
'reverse() should preserve playbackRate if the playbackRate == 0');
|
|
assert_equals(animation.currentTime, 50000,
|
|
'reverse() should not affect the currentTime if the playbackRate == 0');
|
|
t.done();
|
|
}, 'reverse() when playbackRate == 0');
|
|
|
|
done();
|
|
</script>
|
|
</body>
|