155 lines
6.0 KiB
HTML
155 lines
6.0 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<script src="../testcommon.js"></script>
|
|
<style>
|
|
@keyframes anim1 {
|
|
to { left: 100px }
|
|
}
|
|
@keyframes anim2 { }
|
|
</style>
|
|
<body>
|
|
<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 waitForFrame();
|
|
}).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_true(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(waitForFrame).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_true(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_true(animations[1].startTime > animations[0].startTime,
|
|
'Interleaved animation starts later than existing animations');
|
|
assert_true(animations[0].startTime > animations[2].startTime,
|
|
'Original animations retain their start time');
|
|
});
|
|
}, 'Animation state is preserved when interleaving animations in list');
|
|
|
|
done();
|
|
</script>
|
|
</body>
|