| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| @keyframes a {} |
| @keyframes b {} |
| </style> |
| <div id="target"></div> |
| <script> |
| function setAnimationProperty(value) { |
| target.style.animation = value; |
| target.offsetTop; |
| } |
| |
| function getAnimations() { |
| return document.timeline.getAnimations(); |
| } |
| |
| function clearAnimations() { |
| setAnimationProperty('none'); |
| assert_equals(getAnimations().length, 0); |
| } |
| |
| test(() => { |
| clearAnimations(); |
| setAnimationProperty('a 1000ms 1500ms forwards, a 2000ms 2500ms backwards, a 3000ms 3500ms both'); |
| var animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| assert_equals(animations[0].effect.timing.duration, 1000); |
| assert_equals(animations[0].effect.timing.delay, 1500); |
| assert_equals(animations[0].effect.timing.fill, 'forwards'); |
| |
| assert_equals(animations[1].effect.timing.duration, 2000); |
| assert_equals(animations[1].effect.timing.delay, 2500); |
| assert_equals(animations[1].effect.timing.fill, 'backwards'); |
| |
| assert_equals(animations[2].effect.timing.duration, 3000); |
| assert_equals(animations[2].effect.timing.delay, 3500); |
| assert_equals(animations[2].effect.timing.fill, 'both'); |
| }, 'Multiple same animation names should start multiple animations.'); |
| |
| test(() => { |
| clearAnimations(); |
| |
| setAnimationProperty('a 1500ms paused, a 2500ms paused, a 3500ms paused'); |
| var animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| animations[0].currentTime = 1000; |
| animations[1].currentTime = 2000; |
| animations[2].currentTime = 3000; |
| |
| setAnimationProperty('a 1750ms paused, a 2750ms paused, a 3750ms paused'); |
| animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| |
| assert_equals(animations[0].currentTime, 1000); |
| assert_equals(animations[0].effect.timing.duration, 1750); |
| |
| assert_equals(animations[1].currentTime, 2000); |
| assert_equals(animations[1].effect.timing.duration, 2750); |
| |
| assert_equals(animations[2].currentTime, 3000); |
| assert_equals(animations[2].effect.timing.duration, 3750); |
| }, 'Multiple same animation names should persist with animation timing updates.'); |
| |
| test(() => { |
| clearAnimations(); |
| |
| setAnimationProperty('a 1500ms paused, a 2500ms paused, b 3500ms paused, b 4500ms paused'); |
| var animations = getAnimations(); |
| assert_equals(animations.length, 4); |
| animations[0].currentTime = 1000; |
| animations[1].currentTime = 2000; |
| animations[2].currentTime = 3000; |
| animations[3].currentTime = 4000; |
| |
| setAnimationProperty('a 1500ms paused, b 3500ms paused, a 2500ms paused, b 4500ms paused'); |
| animations = getAnimations(); |
| assert_equals(animations.length, 4); |
| |
| assert_equals(animations[0].currentTime, 1000); |
| assert_equals(animations[0].effect.timing.duration, 1500); |
| |
| assert_equals(animations[1].currentTime, 2000); |
| assert_equals(animations[1].effect.timing.duration, 2500); |
| |
| assert_equals(animations[2].currentTime, 3000); |
| assert_equals(animations[2].effect.timing.duration, 3500); |
| |
| assert_equals(animations[3].currentTime, 4000); |
| assert_equals(animations[3].effect.timing.duration, 4500); |
| }, 'Mixed multiple same animation names should persist based on their same name relative position'); |
| |
| test(() => { |
| clearAnimations(); |
| |
| setAnimationProperty('a 1500ms paused, a 2500ms paused, a 3500ms paused'); |
| var animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| animations[0].currentTime = 1000; |
| animations[1].currentTime = 2000; |
| animations[2].currentTime = 3000; |
| |
| setAnimationProperty('a 1500ms paused, b 2500ms paused, a 3500ms paused'); |
| animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| |
| assert_equals(animations[0].currentTime, 1000); |
| assert_equals(animations[0].effect.timing.duration, 1500); |
| |
| assert_equals(animations[1].currentTime, 2000); |
| assert_equals(animations[1].effect.timing.duration, 3500); |
| |
| assert_equals(animations[2].currentTime, null); |
| assert_equals(animations[2].effect.timing.duration, 2500); |
| }, 'Removing same animation names should cancel animations from the end of the name list.'); |
| |
| test(() => { |
| clearAnimations(); |
| |
| setAnimationProperty('a 1500ms paused, a 2500ms paused'); |
| var animations = getAnimations(); |
| assert_equals(animations.length, 2); |
| animations[0].currentTime = 1000; |
| animations[1].currentTime = 2000; |
| |
| setAnimationProperty('a 3500ms paused, a 2500ms paused, a 1500ms paused'); |
| animations = getAnimations(); |
| assert_equals(animations.length, 3); |
| |
| assert_equals(animations[0].currentTime, 1000); |
| assert_equals(animations[0].effect.timing.duration, 3500); |
| |
| assert_equals(animations[1].currentTime, 2000); |
| assert_equals(animations[1].effect.timing.duration, 2500); |
| |
| assert_equals(animations[2].currentTime, null); |
| assert_equals(animations[2].effect.timing.duration, 1500); |
| }, 'Adding same animation names should start additional animations from the end of the name list.'); |
| </script> |