| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <meta charset=utf-8> | |
| 3 <title>Animation.finish()</title> | |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-finis
h"> | |
| 5 <script src="../../../../resources/testharness.js"></script> | |
| 6 <script src="../../../../resources/testharnessreport.js"></script> | |
| 7 <script src="../testcommon.js"></script> | |
| 8 <link rel="stylesheet" href="../../../../resources/testharness.css"> | |
| 9 <body> | |
| 10 <div id="log"></div> | |
| 11 <script> | |
| 12 'use strict'; | |
| 13 | |
| 14 var gKeyFrames = { 'marginLeft': ['100px', '200px'] }; | |
| 15 | |
| 16 test(function(t) { | |
| 17 var div = createDiv(t); | |
| 18 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 19 animation.playbackRate = 0; | |
| 20 | |
| 21 assert_throws({name: 'InvalidStateError'}, function() { | |
| 22 animation.finish(); | |
| 23 }); | |
| 24 }, 'Test exceptions when finishing non-running animation'); | |
| 25 | |
| 26 test(function(t) { | |
| 27 var div = createDiv(t); | |
| 28 var animation = div.animate(gKeyFrames, | |
| 29 {duration : 100 * MS_PER_SEC, | |
| 30 iterations : Infinity}); | |
| 31 | |
| 32 assert_throws({name: 'InvalidStateError'}, function() { | |
| 33 animation.finish(); | |
| 34 }); | |
| 35 }, 'Test exceptions when finishing infinite animation'); | |
| 36 | |
| 37 test(function(t) { | |
| 38 var div = createDiv(t); | |
| 39 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 40 animation.finish(); | |
| 41 | |
| 42 assert_equals(animation.currentTime, 100 * MS_PER_SEC, | |
| 43 'After finishing, the currentTime should be set to the end ' + | |
| 44 'of the active duration'); | |
| 45 }, 'Test finishing of animation'); | |
| 46 | |
| 47 test(function(t) { | |
| 48 var div = createDiv(t); | |
| 49 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 50 // 1s past effect end | |
| 51 animation.currentTime = | |
| 52 animation.effect.getComputedTiming().endTime + 1 * MS_PER_SEC; | |
| 53 animation.finish(); | |
| 54 | |
| 55 assert_equals(animation.currentTime, 100 * MS_PER_SEC, | |
| 56 'After finishing, the currentTime should be set back to the ' + | |
| 57 'end of the active duration'); | |
| 58 }, 'Test finishing of animation with a current time past the effect end'); | |
| 59 | |
| 60 promise_test(function(t) { | |
| 61 var div = createDiv(t); | |
| 62 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 63 animation.currentTime = 100 * MS_PER_SEC; | |
| 64 return animation.finished.then(function() { | |
| 65 animation.playbackRate = -1; | |
| 66 animation.finish(); | |
| 67 | |
| 68 assert_equals(animation.currentTime, 0, | |
| 69 'After finishing a reversed animation the currentTime ' + | |
| 70 'should be set to zero'); | |
| 71 }); | |
| 72 }, 'Test finishing of reversed animation'); | |
| 73 | |
| 74 promise_test(function(t) { | |
| 75 var div = createDiv(t); | |
| 76 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 77 animation.currentTime = 100 * MS_PER_SEC; | |
| 78 return animation.finished.then(function() { | |
| 79 animation.playbackRate = -1; | |
| 80 animation.currentTime = -1000; | |
| 81 animation.finish(); | |
| 82 | |
| 83 assert_equals(animation.currentTime, 0, | |
| 84 'After finishing a reversed animation the currentTime ' + | |
| 85 'should be set back to zero'); | |
| 86 }); | |
| 87 }, 'Test finishing of reversed animation with a current time less than zero'); | |
| 88 | |
| 89 promise_test(function(t) { | |
| 90 var div = createDiv(t); | |
| 91 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 92 animation.pause(); | |
| 93 return animation.ready.then(function() { | |
| 94 animation.finish(); | |
| 95 | |
| 96 assert_equals(animation.playState, 'finished', | |
| 97 'The play state of a paused animation should become ' + | |
| 98 '"finished" after finish() is called'); | |
| 99 assert_approx_equals(animation.startTime, | |
| 100 animation.timeline.currentTime - 100 * MS_PER_SEC, | |
| 101 0.0001, | |
| 102 'The start time of a paused animation should be set ' + | |
| 103 'after calling finish()'); | |
| 104 }); | |
| 105 }, 'Test finish() while paused'); | |
| 106 | |
| 107 test(function(t) { | |
| 108 var div = createDiv(t); | |
| 109 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 110 animation.pause(); | |
| 111 // Update playbackRate so we can test that the calculated startTime | |
| 112 // respects it | |
| 113 animation.playbackRate = 2; | |
| 114 // While animation is still pause-pending call finish() | |
| 115 animation.finish(); | |
| 116 | |
| 117 assert_equals(animation.playState, 'finished', | |
| 118 'The play state of a pause-pending animation should become ' + | |
| 119 '"finished" after finish() is called'); | |
| 120 assert_approx_equals(animation.startTime, | |
| 121 animation.timeline.currentTime - 100 * MS_PER_SEC / 2, | |
| 122 0.0001, | |
| 123 'The start time of a pause-pending animation should ' + | |
| 124 'be set after calling finish()'); | |
| 125 }, 'Test finish() while pause-pending with positive playbackRate'); | |
| 126 | |
| 127 test(function(t) { | |
| 128 var div = createDiv(t); | |
| 129 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 130 animation.pause(); | |
| 131 animation.playbackRate = -2; | |
| 132 animation.finish(); | |
| 133 | |
| 134 assert_equals(animation.playState, 'finished', | |
| 135 'The play state of a pause-pending animation should become ' + | |
| 136 '"finished" after finish() is called'); | |
| 137 assert_equals(animation.startTime, animation.timeline.currentTime, | |
| 138 'The start time of a pause-pending animation should be ' + | |
| 139 'set after calling finish()'); | |
| 140 }, 'Test finish() while pause-pending with negative playbackRate'); | |
| 141 | |
| 142 test(function(t) { | |
| 143 var div = createDiv(t); | |
| 144 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 145 animation.playbackRate = 0.5; | |
| 146 animation.finish(); | |
| 147 | |
| 148 assert_equals(animation.playState, 'finished', | |
| 149 'The play state of a play-pending animation should become ' + | |
| 150 '"finished" after finish() is called'); | |
| 151 assert_approx_equals(animation.startTime, | |
| 152 animation.timeline.currentTime - 100 * MS_PER_SEC / 0.5, | |
| 153 0.0001, | |
| 154 'The start time of a play-pending animation should ' + | |
| 155 'be set after calling finish()'); | |
| 156 }, 'Test finish() while play-pending'); | |
| 157 | |
| 158 // FIXME: Add a test for when we are play-pending without an active timeline. | |
| 159 // - In that case even after calling finish() we should still be pending but | |
| 160 // the current time should be updated | |
| 161 | |
| 162 promise_test(function(t) { | |
| 163 var div = createDiv(t); | |
| 164 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 165 return animation.ready.then(function() { | |
| 166 animation.pause(); | |
| 167 animation.play(); | |
| 168 // We are now in the unusual situation of being play-pending whilst having | |
| 169 // a resolved start time. Check that finish() still triggers a transition | |
| 170 // to the finished state immediately. | |
| 171 animation.finish(); | |
| 172 | |
| 173 assert_equals(animation.playState, 'finished', | |
| 174 'After aborting a pause then calling finish() the play ' + | |
| 175 'state of an animation should become "finished" immediately'); | |
| 176 }); | |
| 177 }, 'Test finish() during aborted pause'); | |
| 178 | |
| 179 promise_test(function(t) { | |
| 180 var div = createDiv(t); | |
| 181 div.style.marginLeft = '10px'; | |
| 182 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 183 return animation.ready.then(function() { | |
| 184 animation.finish(); | |
| 185 var marginLeft = parseFloat(getComputedStyle(div).marginLeft); | |
| 186 | |
| 187 assert_equals(marginLeft, 10, | |
| 188 'The computed style should be reset when finish() is ' + | |
| 189 'called'); | |
| 190 }); | |
| 191 }, 'Test resetting of computed style'); | |
| 192 | |
| 193 promise_test(function(t) { | |
| 194 var div = createDiv(t); | |
| 195 var animation = div.animate(gKeyFrames, 100 * MS_PER_SEC); | |
| 196 var resolvedFinished = false; | |
| 197 animation.finished.then(function() { | |
| 198 resolvedFinished = true; | |
| 199 }); | |
| 200 | |
| 201 return animation.ready.then(function() { | |
| 202 animation.finish(); | |
| 203 }).then(function() { | |
| 204 assert_true(resolvedFinished, | |
| 205 'Animation.finished should be resolved soon after ' + | |
| 206 'Animation.finish()'); | |
| 207 }); | |
| 208 }, 'Test finish() resolves finished promise synchronously'); | |
| 209 </script> | |
| 210 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1985313003:
Move the web-animations directory from web-platform-tests/ to wpt/. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master