AnimationEffect-updateTiming.tentative.html (5061B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>AnimationEffect.updateTiming() for CSS animations</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes anim-empty { } 11 </style> 12 <body> 13 <div id="log"></div> 14 <script> 15 "use strict"; 16 17 test(t => { 18 const div = addDiv(t); 19 div.style.animation = 'anim-empty 100s'; 20 21 const animation = div.getAnimations()[0]; 22 animation.effect.updateTiming({ duration: 2 * MS_PER_SEC }); 23 24 div.style.animationDuration = '4s'; 25 div.style.animationDelay = '6s'; 26 27 assert_equals( 28 animation.effect.getTiming().duration, 29 2 * MS_PER_SEC, 30 'Duration should be the value set by the API' 31 ); 32 assert_equals( 33 animation.effect.getTiming().delay, 34 6 * MS_PER_SEC, 35 'Delay should be the value set by style' 36 ); 37 }, 'AnimationEffect.updateTiming({ duration }) causes changes to the' 38 + ' animation-duration to be ignored'); 39 40 // The above test covers duration (with delay as a control). The remaining 41 // properties are: 42 // 43 // iterations - animation-iteration-count 44 // direction - animation-direction 45 // delay - animation-delay 46 // fill - animation-fill-mode 47 // 48 // Which we test in two batches, overriding two properties each time and using 49 // the remaining two properties as control values to check they are NOT 50 // overridden. 51 52 test(t => { 53 const div = addDiv(t); 54 div.style.animation = 'anim-empty 100s'; 55 56 const animation = div.getAnimations()[0]; 57 animation.effect.updateTiming({ iterations: 2, direction: 'reverse' }); 58 59 div.style.animationIterationCount = '4'; 60 div.style.animationDirection = 'alternate'; 61 div.style.animationDelay = '6s'; 62 div.style.animationFillMode = 'both'; 63 64 assert_equals( 65 animation.effect.getTiming().iterations, 66 2, 67 'Iterations should be the value set by the API' 68 ); 69 assert_equals( 70 animation.effect.getTiming().direction, 71 'reverse', 72 'Direction should be the value set by the API' 73 ); 74 assert_equals( 75 animation.effect.getTiming().delay, 76 6 * MS_PER_SEC, 77 'Delay should be the value set by style' 78 ); 79 assert_equals( 80 animation.effect.getTiming().fill, 81 'both', 82 'Fill should be the value set by style' 83 ); 84 }, 'AnimationEffect.updateTiming({ iterations, direction }) causes changes to' 85 + ' the animation-iteration-count and animation-direction to be ignored'); 86 87 test(t => { 88 const div = addDiv(t); 89 div.style.animation = 'anim-empty 100s'; 90 91 const animation = div.getAnimations()[0]; 92 animation.effect.updateTiming({ delay: 2 * MS_PER_SEC, fill: 'both' }); 93 94 div.style.animationDelay = '4s'; 95 div.style.animationFillMode = 'forwards'; 96 div.style.animationIterationCount = '6'; 97 div.style.animationDirection = 'reverse'; 98 99 assert_equals( 100 animation.effect.getTiming().delay, 101 2 * MS_PER_SEC, 102 'Delay should be the value set by the API' 103 ); 104 assert_equals( 105 animation.effect.getTiming().fill, 106 'both', 107 'Fill should be the value set by the API' 108 ); 109 assert_equals( 110 animation.effect.getTiming().iterations, 111 6, 112 'Iterations should be the value set by style' 113 ); 114 assert_equals( 115 animation.effect.getTiming().direction, 116 'reverse', 117 'Direction should be the value set by style' 118 ); 119 }, 'AnimationEffect.updateTiming({ delay, fill }) causes changes to' 120 + ' the animation-delay and animation-fill-mode to be ignored'); 121 122 test(t => { 123 const div = addDiv(t); 124 div.style.animation = 'anim-empty 100s'; 125 126 const animation = div.getAnimations()[0]; 127 assert_throws_js(TypeError, () => { 128 animation.effect.updateTiming({ duration: 2 * MS_PER_SEC, iterations: -1 }); 129 }, 'Negative iteration count should cause an error to be thrown'); 130 131 div.style.animationDuration = '4s'; 132 133 assert_equals( 134 animation.effect.getTiming().duration, 135 4 * MS_PER_SEC, 136 'Duration should be the value set by style' 137 ); 138 }, 'AnimationEffect.updateTiming() does override to changes from animation-*' 139 + ' properties if there is an error'); 140 141 test(t => { 142 const div = addDiv(t); 143 div.style.animation = 'anim-empty 100s'; 144 145 const animation = div.getAnimations()[0]; 146 animation.effect.updateTiming({ 147 easing: 'steps(4)', 148 endDelay: 2 * MS_PER_SEC, 149 iterationStart: 4, 150 }); 151 152 div.style.animationDuration = '6s'; 153 div.style.animationTimingFunction = 'ease-in'; 154 155 assert_equals( 156 animation.effect.getTiming().easing, 157 'steps(4)', 158 'endDelay should be the value set by the API' 159 ); 160 assert_equals( 161 animation.effect.getTiming().endDelay, 162 2 * MS_PER_SEC, 163 'endDelay should be the value set by the API' 164 ); 165 assert_equals( 166 animation.effect.getTiming().iterationStart, 167 4, 168 'iterationStart should be the value set by style' 169 ); 170 }, 'AnimationEffect properties that do not map to animation-* properties' 171 + ' should not be changed when animation-* style is updated'); 172 173 </script> 174 </body>