phases-and-states.html (6138B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Phases and states</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <body> 9 <div id="log"></div> 10 <script> 11 'use strict'; 12 13 // -------------------------------------------------------------------- 14 // 15 // Phases 16 // 17 // -------------------------------------------------------------------- 18 19 test(t => { 20 const animation = createDiv(t).animate(null, 1); 21 22 for (const test of [{ currentTime: -1, phase: 'before' }, 23 { currentTime: 0, phase: 'active' }, 24 { currentTime: 1, phase: 'after' }]) { 25 assert_phase_at_time(animation, test.phase, test.currentTime); 26 } 27 }, 'Phase calculation for a simple animation effect'); 28 29 test(t => { 30 const animation = createDiv(t).animate(null, { duration: 1, delay: 1 }); 31 32 for (const test of [{ currentTime: 0, phase: 'before' }, 33 { currentTime: 1, phase: 'active' }, 34 { currentTime: 2, phase: 'after' }]) { 35 assert_phase_at_time(animation, test.phase, test.currentTime); 36 } 37 }, 'Phase calculation for an animation effect with a positive start delay'); 38 39 test(t => { 40 const animation = createDiv(t).animate(null, { duration: 1, delay: -1 }); 41 42 for (const test of [{ currentTime: -2, phase: 'before' }, 43 { currentTime: -1, phase: 'before' }, 44 { currentTime: 0, phase: 'after' }]) { 45 assert_phase_at_time(animation, test.phase, test.currentTime); 46 } 47 }, 'Phase calculation for an animation effect with a negative start delay'); 48 49 test(t => { 50 const animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 }); 51 52 for (const test of [{ currentTime: -1, phase: 'before' }, 53 { currentTime: 0, phase: 'active' }, 54 { currentTime: 1, phase: 'after' }, 55 { currentTime: 2, phase: 'after' }]) { 56 assert_phase_at_time(animation, test.phase, test.currentTime); 57 } 58 }, 'Phase calculation for an animation effect with a positive end delay'); 59 60 test(t => { 61 const animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 }); 62 63 for (const test of [{ currentTime: -1, phase: 'before' }, 64 { currentTime: 0, phase: 'active' }, 65 { currentTime: 0.9, phase: 'active' }, 66 { currentTime: 1, phase: 'after' }]) { 67 assert_phase_at_time(animation, test.phase, test.currentTime); 68 } 69 }, 'Phase calculation for an animation effect with a negative end delay lesser' 70 + ' in magnitude than the active duration'); 71 72 test(t => { 73 const animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 }); 74 75 for (const test of [{ currentTime: -1, phase: 'before' }, 76 { currentTime: 0, phase: 'after' }, 77 { currentTime: 1, phase: 'after' }]) { 78 assert_phase_at_time(animation, test.phase, test.currentTime); 79 } 80 }, 'Phase calculation for an animation effect with a negative end delay equal' 81 + ' in magnitude to the active duration'); 82 83 test(t => { 84 const animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 }); 85 86 for (const test of [{ currentTime: -2, phase: 'before' }, 87 { currentTime: -1, phase: 'before' }, 88 { currentTime: 0, phase: 'after' }]) { 89 assert_phase_at_time(animation, test.phase, test.currentTime); 90 } 91 }, 'Phase calculation for an animation effect with a negative end delay' 92 + ' greater in magnitude than the active duration'); 93 94 test(t => { 95 const animation = createDiv(t).animate(null, { duration: 2, 96 delay: 1, 97 endDelay: -1 }); 98 99 for (const test of [{ currentTime: 0, phase: 'before' }, 100 { currentTime: 1, phase: 'active' }, 101 { currentTime: 2, phase: 'after' }]) { 102 assert_phase_at_time(animation, test.phase, test.currentTime); 103 } 104 }, 'Phase calculation for an animation effect with a positive start delay' 105 + ' and a negative end delay lesser in magnitude than the active duration'); 106 107 test(t => { 108 const animation = createDiv(t).animate(null, { duration: 1, 109 delay: -1, 110 endDelay: -1 }); 111 112 for (const test of [{ currentTime: -2, phase: 'before' }, 113 { currentTime: -1, phase: 'before' }, 114 { currentTime: 0, phase: 'after' }]) { 115 assert_phase_at_time(animation, test.phase, test.currentTime); 116 } 117 }, 'Phase calculation for an animation effect with a negative start delay' 118 + ' and a negative end delay equal in magnitude to the active duration'); 119 120 test(t => { 121 const animation = createDiv(t).animate(null, { duration: 1, 122 delay: -1, 123 endDelay: -2 }); 124 125 for (const test of [{ currentTime: -3, phase: 'before' }, 126 { currentTime: -2, phase: 'before' }, 127 { currentTime: -1, phase: 'before' }, 128 { currentTime: 0, phase: 'after' }]) { 129 assert_phase_at_time(animation, test.phase, test.currentTime); 130 } 131 }, 'Phase calculation for an animation effect with a negative start delay' 132 + ' and a negative end delay equal greater in magnitude than the active' 133 + ' duration'); 134 135 test(t => { 136 const animation = createDiv(t).animate(null, 1); 137 animation.playbackRate = -1; 138 139 for (const test of [{ currentTime: -1, phase: 'before' }, 140 { currentTime: 0, phase: 'before' }, 141 { currentTime: 1, phase: 'active' }, 142 { currentTime: 2, phase: 'after' }]) { 143 assert_phase_at_time(animation, test.phase, test.currentTime); 144 } 145 }, 'Phase calculation for a simple animation effect with negative playback' 146 + ' rate'); 147 148 </script> 149 </body>