blob: d213b09dae2db8654c9d22095d955a5a71b3b4f0 [file] [log] [blame]
<!doctype html>
<meta charset=utf-8>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../resources/testcommon.js"></script>
<style>
@keyframes anim1 {
to { left: 100px }
}
@keyframes anim2 { }
</style>
<body>
<div id="log"></div>
<script>
'use strict';
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var originalAnimation = div.getAnimations()[0];
var originalStartTime;
var originalCurrentTime;
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
// simply reflect the current time).
return originalAnimation.ready.then(function() {
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() {
div.style.animationDuration = '200s';
var animation = div.getAnimations()[0];
assert_equals(animation, originalAnimation,
'The same Animation is returned after updating'
+ ' animation duration');
assert_equals(animation.startTime, originalStartTime,
'Animations returned by getAnimations preserve'
+ ' their startTime even when they are updated');
// Sanity check
assert_not_equals(animation.currentTime, originalCurrentTime,
'Animation.currentTime has updated in next'
+ ' requestAnimationFrame callback');
});
}, 'Animations preserve their startTime when changed');
test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
// Update first in list
div.style.animationDuration = '200s, 100s';
animations = div.getAnimations();
assert_equals(animations[0], animation1,
'First Animation is in same position after update');
assert_equals(animations[1], animation2,
'Second Animation is in same position after update');
}, 'Updated Animations maintain their order in the list');
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 200s, anim1 100s';
// Store original state
var animations = div.getAnimations();
var animation1 = animations[0];
var animation2 = animations[1];
// Wait before continuing so we can compare start times (otherwise the
// new Animation objects and existing Animation objects will all have the same
// start time).
return waitForAllAnimations(animations).then(waitForFrame).then(function() {
// Swap duration of first and second in list and prepend animation at the
// same time
div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
animations = div.getAnimations();
assert_true(animations[0] !== animation1 && animations[0] !== animation2,
'New Animation is prepended to start of list');
assert_equals(animations[1], animation1,
'First Animation is in second position after update');
assert_equals(animations[2], animation2,
'Second Animation is in third position after update');
assert_equals(animations[1].startTime, animations[2].startTime,
'Old Animations have the same start time');
// TODO: Check that animations[0].startTime === null
return animations[0].ready;
}).then(function() {
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) {
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() {
// Trim list of animations
div.style.animationName = 'anim1';
var animations = div.getAnimations();
assert_equals(animations.length, 1, 'List of Animations was trimmed');
assert_equals(animations[0], secondAnimation,
'Remaining Animation is the second one in the list');
assert_equals(typeof(animations[0].startTime), 'number',
'Remaining Animation has resolved startTime');
assert_less_than(animations[0].startTime,
animations[0].timeline.currentTime,
'Remaining Animation preserves startTime');
});
}, 'Animations are removed from the start of the list while preserving'
+ ' the state of existing Animations');
promise_test(function(t) {
var div = addDiv(t);
div.style.animation = 'anim1 100s';
var firstAddedAnimation = div.getAnimations()[0],
secondAddedAnimation,
animations;
// Wait and add second Animation
return firstAddedAnimation.ready.then(waitForFrame).then(function() {
div.style.animation = 'anim1 100s, anim1 100s';
secondAddedAnimation = div.getAnimations()[0];
// Wait again and add another Animation
return secondAddedAnimation.ready.then(waitForFrame);
}).then(function() {
div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
animations = div.getAnimations();
assert_not_equals(firstAddedAnimation, secondAddedAnimation,
'New Animations are added to start of the list');
assert_equals(animations[0], secondAddedAnimation,
'Second Animation remains in same position after'
+ ' interleaving');
assert_equals(animations[2], firstAddedAnimation,
'First Animation remains in same position after'
+ ' interleaving');
return animations[1].ready;
}).then(function() {
assert_greater_than(animations[1].startTime, animations[0].startTime,
'Interleaved animation starts later than existing ' +
'animations');
assert_greater_than(animations[0].startTime, animations[2].startTime,
'Original animations retain their start time');
});
}, 'Animation state is preserved when interleaving animations in list');
</script>
</body>