Element-getAnimations-dynamic-changes.tentative.html (6301B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title> 4 Element.getAnimations() - Dynamic changes to the list of CSS animations 5 </title> 6 <!-- TODO: Add a more specific link for this once it is specified. --> 7 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="support/testcommon.js"></script> 11 <style> 12 @keyframes anim1 { 13 to { left: 100px } 14 } 15 @keyframes anim2 { } 16 </style> 17 <div id="log"></div> 18 <script> 19 'use strict'; 20 21 promise_test(async t => { 22 const div = addDiv(t); 23 div.style.animation = 'anim1 100s'; 24 const originalAnimation = div.getAnimations()[0]; 25 26 // Wait a moment so we can confirm the startTime doesn't change (and doesn't 27 // simply reflect the current time). 28 await originalAnimation.ready; 29 30 const originalStartTime = originalAnimation.startTime; 31 const originalCurrentTime = originalAnimation.currentTime; 32 33 // Wait a moment so we can confirm the startTime doesn't change (and 34 // doesn't simply reflect the current time). 35 await waitForNextFrame(); 36 37 div.style.animationDuration = '200s'; 38 const animation = div.getAnimations()[0]; 39 assert_equals(animation, originalAnimation, 40 'The same Animation is returned after updating' 41 + ' animation duration'); 42 assert_equals(animation.startTime, originalStartTime, 43 'Animations returned by getAnimations preserve' 44 + ' their startTime even when they are updated'); 45 // Sanity check 46 assert_not_equals(animation.currentTime, originalCurrentTime, 47 'Animation.currentTime has updated in next' 48 + ' requestAnimationFrame callback'); 49 }, 'Animations preserve their startTime when changed'); 50 51 test(t => { 52 const div = addDiv(t); 53 div.style.animation = 'anim1 100s, anim1 100s'; 54 55 // Store original state 56 let animations = div.getAnimations(); 57 const animation1 = animations[0]; 58 const animation2 = animations[1]; 59 60 // Update first in list 61 div.style.animationDuration = '200s, 100s'; 62 animations = div.getAnimations(); 63 assert_equals(animations[0], animation1, 64 'First Animation is in same position after update'); 65 assert_equals(animations[1], animation2, 66 'Second Animation is in same position after update'); 67 }, 'Updated Animations maintain their order in the list'); 68 69 promise_test(async t => { 70 const div = addDiv(t); 71 div.style.animation = 'anim1 200s, anim1 100s'; 72 73 // Store original state 74 let animations = div.getAnimations(); 75 const animation1 = animations[0]; 76 const animation2 = animations[1]; 77 78 // Wait before continuing so we can compare start times (otherwise the 79 // new Animation objects and existing Animation objects will all have the same 80 // start time). 81 await waitForAllAnimations(animations); 82 await waitForFrame(); 83 84 // Swap duration of first and second in list and prepend animation at the 85 // same time 86 div.style.animation = 'anim1 100s, anim1 100s, anim1 200s'; 87 animations = div.getAnimations(); 88 assert_true(animations[0] !== animation1 && animations[0] !== animation2, 89 'New Animation is prepended to start of list'); 90 assert_equals(animations[1], animation1, 91 'First animation is in second position after update'); 92 assert_equals(animations[2], animation2, 93 'Second animation is in third position after update'); 94 assert_equals(animations[1].startTime, animations[2].startTime, 95 'Old animations have the same start time'); 96 assert_equals(animations[0].startTime, null, 97 'New animation has a null start time'); 98 99 await animations[0].ready; 100 101 assert_greater_than(animations[0].startTime, animations[1].startTime, 102 'New animation has later start time'); 103 }, 'Only the startTimes of existing animations are preserved'); 104 105 promise_test(async t => { 106 const div = addDiv(t); 107 div.style.animation = 'anim1 100s, anim1 100s'; 108 const secondAnimation = div.getAnimations()[1]; 109 110 // Wait before continuing so we can compare start times 111 await secondAnimation.ready; 112 await waitForNextFrame(); 113 114 // Trim list of animations 115 div.style.animationName = 'anim1'; 116 const animations = div.getAnimations(); 117 assert_equals(animations.length, 1, 'List of Animations was trimmed'); 118 assert_equals(animations[0], secondAnimation, 119 'Remaining Animation is the second one in the list'); 120 assert_equals(typeof(animations[0].startTime), 'number', 121 'Remaining Animation has resolved startTime'); 122 assert_less_than(animations[0].startTime, 123 animations[0].timeline.currentTime, 124 'Remaining Animation preserves startTime'); 125 }, 'Animations are removed from the start of the list while preserving' 126 + ' the state of existing Animations'); 127 128 promise_test(async t => { 129 const div = addDiv(t); 130 div.style.animation = 'anim1 100s'; 131 const firstAddedAnimation = div.getAnimations()[0]; 132 133 // Wait and add second Animation 134 await firstAddedAnimation.ready; 135 await waitForFrame(); 136 137 div.style.animation = 'anim1 100s, anim1 100s'; 138 const secondAddedAnimation = div.getAnimations()[0]; 139 140 // Wait again and add another Animation 141 await secondAddedAnimation.ready; 142 await waitForFrame(); 143 144 div.style.animation = 'anim1 100s, anim2 100s, anim1 100s'; 145 const animations = div.getAnimations(); 146 assert_not_equals(firstAddedAnimation, secondAddedAnimation, 147 'New Animations are added to start of the list'); 148 assert_equals(animations[0], secondAddedAnimation, 149 'Second Animation remains in same position after' 150 + ' interleaving'); 151 assert_equals(animations[2], firstAddedAnimation, 152 'First Animation remains in same position after' 153 + ' interleaving'); 154 await animations[1].ready; 155 156 assert_greater_than(animations[1].startTime, animations[0].startTime, 157 'Interleaved animation starts later than existing ' + 158 'animations'); 159 assert_greater_than(animations[0].startTime, animations[2].startTime, 160 'Original animations retain their start time'); 161 }, 'Animation state is preserved when interleaving animations in list'); 162 163 </script>