| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset=utf-8> |
| 3 <title>Tests for phases and states</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#animation-effect-ph
ases-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 function assert_phase_at_time(animation, phase, currentTime) { |
| 20 animation.currentTime = currentTime; |
| 21 |
| 22 if (phase === 'active') { |
| 23 // If the fill mode is 'none', then progress will only be non-null if we |
| 24 // are in the active phase. |
| 25 animation.effect.timing.fill = 'none'; |
| 26 assert_not_equals(animation.effect.getComputedTiming().progress, null, |
| 27 'Animation effect is in active phase when current time' |
| 28 + ' is ' + currentTime + 'ms'); |
| 29 } else { |
| 30 // The easiest way to distinguish between the 'before' phase and the 'after' |
| 31 // phase is to toggle the fill mode. For example, if the progress is null |
| 32 // will the fill node is 'none' but non-null when the fill mode is |
| 33 // 'backwards' then we are in the before phase. |
| 34 animation.effect.timing.fill = 'none'; |
| 35 assert_equals(animation.effect.getComputedTiming().progress, null, |
| 36 'Animation effect is in ' + phase + ' phase when current time' |
| 37 + ' is ' + currentTime + 'ms' |
| 38 + ' (progress is null with \'none\' fill mode)'); |
| 39 |
| 40 animation.effect.timing.fill = phase === 'before' |
| 41 ? 'backwards' |
| 42 : 'forwards'; |
| 43 assert_not_equals(animation.effect.getComputedTiming().progress, null, |
| 44 'Animation effect is in ' + phase + ' phase when current' |
| 45 + ' time is ' + currentTime + 'ms' |
| 46 + ' (progress is non-null with appropriate fill mode)'); |
| 47 } |
| 48 } |
| 49 |
| 50 test(function(t) { |
| 51 var animation = createDiv(t).animate(null, 1); |
| 52 |
| 53 [ { currentTime: -1, phase: 'before' }, |
| 54 { currentTime: 0, phase: 'active' }, |
| 55 { currentTime: 1, phase: 'after' } ] |
| 56 .forEach(function(test) { |
| 57 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 58 }); |
| 59 }, 'Phase calculation for a simple animation effect'); |
| 60 |
| 61 test(function(t) { |
| 62 var animation = createDiv(t).animate(null, { duration: 1, delay: 1 }); |
| 63 |
| 64 [ { currentTime: 0, phase: 'before' }, |
| 65 { currentTime: 1, phase: 'active' }, |
| 66 { currentTime: 2, phase: 'after' } ] |
| 67 .forEach(function(test) { |
| 68 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 69 }); |
| 70 }, 'Phase calculation for an animation effect with a positive start delay'); |
| 71 |
| 72 test(function(t) { |
| 73 var animation = createDiv(t).animate(null, { duration: 1, delay: -1 }); |
| 74 |
| 75 [ { currentTime: -2, phase: 'before' }, |
| 76 { currentTime: -1, phase: 'active' }, |
| 77 { currentTime: 0, phase: 'after' } ] |
| 78 .forEach(function(test) { |
| 79 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 80 }); |
| 81 }, 'Phase calculation for an animation effect with a negative start delay'); |
| 82 |
| 83 test(function(t) { |
| 84 var animation = createDiv(t).animate(null, { duration: 1, endDelay: 1 }); |
| 85 |
| 86 [ { currentTime: -1, phase: 'before' }, |
| 87 { currentTime: 0, phase: 'active' }, |
| 88 { currentTime: 1, phase: 'after' }, |
| 89 { currentTime: 2, phase: 'after' } ] |
| 90 .forEach(function(test) { |
| 91 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 92 }); |
| 93 }, 'Phase calculation for an animation effect with a positive end delay'); |
| 94 |
| 95 test(function(t) { |
| 96 var animation = createDiv(t).animate(null, { duration: 2, endDelay: -1 }); |
| 97 |
| 98 [ { currentTime: -1, phase: 'before' }, |
| 99 { currentTime: 0, phase: 'active' }, |
| 100 { currentTime: 0.9, phase: 'active' }, |
| 101 { currentTime: 1, phase: 'after' } ] |
| 102 .forEach(function(test) { |
| 103 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 104 }); |
| 105 }, 'Phase calculation for an animation effect with a negative end delay lesser' |
| 106 + ' in magnitude than the active duration'); |
| 107 |
| 108 test(function(t) { |
| 109 var animation = createDiv(t).animate(null, { duration: 1, endDelay: -1 }); |
| 110 |
| 111 [ { currentTime: -1, phase: 'before' }, |
| 112 { currentTime: 0, phase: 'after' }, |
| 113 { currentTime: 1, phase: 'after' } ] |
| 114 .forEach(function(test) { |
| 115 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 116 }); |
| 117 }, 'Phase calculation for an animation effect with a negative end delay equal' |
| 118 + ' in magnitude to the active duration'); |
| 119 |
| 120 test(function(t) { |
| 121 var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 }); |
| 122 |
| 123 [ { currentTime: -2, phase: 'before' }, |
| 124 { currentTime: -1, phase: 'after' } ] |
| 125 .forEach(function(test) { |
| 126 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 127 }); |
| 128 }, 'Phase calculation for an animation effect with a negative end delay' |
| 129 + ' greater in magnitude than the active duration'); |
| 130 |
| 131 test(function(t) { |
| 132 var animation = createDiv(t).animate(null, { duration: 2, |
| 133 delay: 1, |
| 134 endDelay: -1 }); |
| 135 |
| 136 [ { currentTime: 0, phase: 'before' }, |
| 137 { currentTime: 1, phase: 'active' }, |
| 138 { currentTime: 2, phase: 'after' } ] |
| 139 .forEach(function(test) { |
| 140 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 141 }); |
| 142 }, 'Phase calculation for an animation effect with a positive start delay' |
| 143 + ' and a negative end delay lesser in magnitude than the active duration'); |
| 144 |
| 145 test(function(t) { |
| 146 var animation = createDiv(t).animate(null, { duration: 1, |
| 147 delay: -1, |
| 148 endDelay: -1 }); |
| 149 |
| 150 [ { currentTime: -2, phase: 'before' }, |
| 151 { currentTime: -1, phase: 'after' } ] |
| 152 .forEach(function(test) { |
| 153 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 154 }); |
| 155 }, 'Phase calculation for an animation effect with a negative start delay' |
| 156 + ' and a negative end delay equal in magnitude to the active duration'); |
| 157 |
| 158 test(function(t) { |
| 159 var animation = createDiv(t).animate(null, { duration: 1, |
| 160 delay: -1, |
| 161 endDelay: -2 }); |
| 162 |
| 163 [ { currentTime: -3, phase: 'before' }, |
| 164 { currentTime: -2, phase: 'after' } ] |
| 165 .forEach(function(test) { |
| 166 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 167 }); |
| 168 }, 'Phase calculation for an animation effect with a negative start delay' |
| 169 + ' and a negative end delay equal greater in magnitude than the active' |
| 170 + ' duration'); |
| 171 |
| 172 test(function(t) { |
| 173 var animation = createDiv(t).animate(null, 1); |
| 174 animation.playbackRate = -1; |
| 175 |
| 176 [ { currentTime: -1, phase: 'before' }, |
| 177 { currentTime: 0, phase: 'before' }, |
| 178 { currentTime: 1, phase: 'active' }, |
| 179 { currentTime: 2, phase: 'after' } ] |
| 180 .forEach(function(test) { |
| 181 assert_phase_at_time(animation, test.phase, test.currentTime); |
| 182 }); |
| 183 }, 'Phase calculation for a simple animation effect with negative playback' |
| 184 + ' rate'); |
| 185 |
| 186 </script> |
| 187 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2303013002:
Add UMA metric to track usage of sending a mousedown to select elements. (Closed)
