mirror of
https://github.com/servo/servo.git
synced 2025-06-28 19:13:41 +01:00
163 lines
6.2 KiB
HTML
163 lines
6.2 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>
|
|
Element.getAnimations() - Dynamic changes to the list of CSS animations
|
|
</title>
|
|
<!-- TODO: Add a more specific link for this once it is specified. -->
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/testcommon.js"></script>
|
|
<style>
|
|
@keyframes anim1 {
|
|
to { left: 100px }
|
|
}
|
|
@keyframes anim2 { }
|
|
</style>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
|
|
promise_test(async t => {
|
|
const div = addDiv(t);
|
|
div.style.animation = 'anim1 100s';
|
|
const originalAnimation = div.getAnimations()[0];
|
|
|
|
// Wait a moment so we can confirm the startTime doesn't change (and doesn't
|
|
// simply reflect the current time).
|
|
await originalAnimation.ready;
|
|
|
|
const originalStartTime = originalAnimation.startTime;
|
|
const originalCurrentTime = originalAnimation.currentTime;
|
|
|
|
// Wait a moment so we can confirm the startTime doesn't change (and
|
|
// doesn't simply reflect the current time).
|
|
await waitForNextFrame();
|
|
|
|
div.style.animationDuration = '200s';
|
|
const 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(t => {
|
|
const div = addDiv(t);
|
|
div.style.animation = 'anim1 100s, anim1 100s';
|
|
|
|
// Store original state
|
|
let animations = div.getAnimations();
|
|
const animation1 = animations[0];
|
|
const 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(async t => {
|
|
const div = addDiv(t);
|
|
div.style.animation = 'anim1 200s, anim1 100s';
|
|
|
|
// Store original state
|
|
let animations = div.getAnimations();
|
|
const animation1 = animations[0];
|
|
const 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).
|
|
await waitForAllAnimations(animations);
|
|
await waitForFrame();
|
|
|
|
// 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');
|
|
assert_equals(animations[0].startTime, null,
|
|
'New animation has a null start time');
|
|
|
|
await animations[0].ready;
|
|
|
|
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(async t => {
|
|
const div = addDiv(t);
|
|
div.style.animation = 'anim1 100s, anim1 100s';
|
|
const secondAnimation = div.getAnimations()[1];
|
|
|
|
// Wait before continuing so we can compare start times
|
|
await secondAnimation.ready;
|
|
await waitForNextFrame();
|
|
|
|
// Trim list of animations
|
|
div.style.animationName = 'anim1';
|
|
const 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(async t => {
|
|
const div = addDiv(t);
|
|
div.style.animation = 'anim1 100s';
|
|
const firstAddedAnimation = div.getAnimations()[0];
|
|
|
|
// Wait and add second Animation
|
|
await firstAddedAnimation.ready;
|
|
await waitForFrame();
|
|
|
|
div.style.animation = 'anim1 100s, anim1 100s';
|
|
const secondAddedAnimation = div.getAnimations()[0];
|
|
|
|
// Wait again and add another Animation
|
|
await secondAddedAnimation.ready;
|
|
await waitForFrame();
|
|
|
|
div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
|
|
const 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');
|
|
await animations[1].ready;
|
|
|
|
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>
|