OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 /* |
| 3 * Copyright 2013 Google Inc. All Rights Reserved. |
| 4 * |
| 5 * Licensed under the Apache License, Version 2.0 (the "License"); |
| 6 * you may not use this file except in compliance with the License. |
| 7 * You may obtain a copy of the License at |
| 8 * |
| 9 * http://www.apache.org/licenses/LICENSE-2.0 |
| 10 * |
| 11 * Unless required by applicable law or agreed to in writing, software |
| 12 * distributed under the License is distributed on an "AS IS" BASIS, |
| 13 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 14 * See the License for the specific language governing permissions and |
| 15 * limitations under the License. |
| 16 */ |
| 17 --> |
| 18 |
| 19 <!DOCTYPE html><meta charset="UTF-8"> |
| 20 <style> |
| 21 .ball { |
| 22 position: absolute; |
| 23 color: white; |
| 24 width: 3em; |
| 25 height: 3em; |
| 26 background-color: black; |
| 27 border-radius: 100%; |
| 28 text-align: center; |
| 29 } |
| 30 |
| 31 #a { top: 0px; } |
| 32 #b { top: 50px; } |
| 33 </style> |
| 34 |
| 35 <div id="a" class="ball">A</div> |
| 36 <div id="b" class="ball">B</div> |
| 37 |
| 38 <script src="../bootstrap.js"></script> |
| 39 <script> |
| 40 "use strict"; |
| 41 |
| 42 var a = document.querySelector("#a"); |
| 43 var b = document.querySelector("#b"); |
| 44 |
| 45 var animationA = new Animation(a, {"left": "100%"}, {duration: 10}); |
| 46 var animationB = new Animation(b, {"left": "100%"}, {duration: 10}); |
| 47 var animationAClone = animationA.clone(); |
| 48 var animationBClone = animationB.clone(); |
| 49 |
| 50 var playerA; |
| 51 at(1.0, function() { |
| 52 playerA = document.timeline.play(animationA); |
| 53 }); |
| 54 var playerB; |
| 55 at(2.0, function() { |
| 56 playerB = document.timeline.play(animationB); |
| 57 }); |
| 58 var playerAB; |
| 59 at(3.0, function() { |
| 60 playerAB = document.timeline.play(new ParGroup([animationAClone, animationBC
lone])); |
| 61 }); |
| 62 |
| 63 // These test_at calls are not in a *-checks.js file so they |
| 64 // can be declared after the calls to play() are scheduled. |
| 65 |
| 66 timing_test(function () { |
| 67 at(0.0, function() { |
| 68 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 69 var aPlayers = a.getCurrentPlayers(); |
| 70 var bPlayers = b.getCurrentPlayers(); |
| 71 assert_equals(timelinePlayers.length, 0, "timelinePlayers count"); |
| 72 assert_equals(aPlayers.length, 0, "Players on A length"); |
| 73 assert_equals(bPlayers.length, 0, "Players on B length"); |
| 74 }); |
| 75 }, "Check current players at t=0"); |
| 76 timing_test(function () { |
| 77 at(1.0, function() { |
| 78 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 79 var aPlayers = a.getCurrentPlayers(); |
| 80 var bPlayers = b.getCurrentPlayers(); |
| 81 assert_equals(timelinePlayers.length, 1, "timelinePlayers count"); |
| 82 assert_in_array(playerA, timelinePlayers, "timelinePlayers contains player
A"); |
| 83 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 84 assert_in_array(playerA, aPlayers, "Players on A contains playerA"); |
| 85 assert_equals(bPlayers.length, 0, "Players on B length"); |
| 86 }); |
| 87 }, "Check current players at t=1"); |
| 88 timing_test(function () { |
| 89 at(2.0, function() { |
| 90 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 91 var aPlayers = a.getCurrentPlayers(); |
| 92 var bPlayers = b.getCurrentPlayers(); |
| 93 assert_equals(timelinePlayers.length, 2, "timelinePlayers count"); |
| 94 assert_in_array(playerA, timelinePlayers, "timelinePlayers contains player
A"); |
| 95 assert_in_array(playerB, timelinePlayers, "timelinePlayers contains player
B"); |
| 96 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 97 assert_in_array(playerA, aPlayers, "Players on A contains playerA"); |
| 98 assert_equals(bPlayers.length, 1, "Players on B length"); |
| 99 assert_in_array(playerB, bPlayers, "Players on B contains playerB"); |
| 100 }); |
| 101 }, "Check current players at t=2"); |
| 102 timing_test(function () { |
| 103 at(3.0, function() { |
| 104 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 105 var aPlayers = a.getCurrentPlayers(); |
| 106 var bPlayers = b.getCurrentPlayers(); |
| 107 assert_equals(timelinePlayers.length, 3, "timelinePlayers count"); |
| 108 assert_in_array(playerA, timelinePlayers, "timelinePlayers contains player
A"); |
| 109 assert_in_array(playerB, timelinePlayers, "timelinePlayers contains player
B"); |
| 110 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 111 assert_equals(aPlayers.length, 2, "Players on A length"); |
| 112 assert_in_array(playerA, aPlayers, "Players on A contains playerA"); |
| 113 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 114 assert_equals(bPlayers.length, 2, "Players on B length"); |
| 115 assert_in_array(playerB, bPlayers, "Players on B contains playerB"); |
| 116 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 117 }); |
| 118 }, "Check current players at t=3"); |
| 119 timing_test(function () { |
| 120 at(5.0, function() { |
| 121 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 122 var aPlayers = a.getCurrentPlayers(); |
| 123 var bPlayers = b.getCurrentPlayers(); |
| 124 assert_equals(timelinePlayers.length, 3, "timelinePlayers count"); |
| 125 assert_in_array(playerA, timelinePlayers, "timelinePlayers contains player
A"); |
| 126 assert_in_array(playerB, timelinePlayers, "timelinePlayers contains player
B"); |
| 127 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 128 assert_equals(aPlayers.length, 2, "Players on A length"); |
| 129 assert_in_array(playerA, aPlayers, "Players on A contains playerA"); |
| 130 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 131 assert_equals(bPlayers.length, 2, "Players on B length"); |
| 132 assert_in_array(playerB, bPlayers, "Players on B contains playerB"); |
| 133 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 134 }); |
| 135 }, "Check current players at t=5"); |
| 136 timing_test(function () { |
| 137 at(11.0, function() { |
| 138 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 139 var aPlayers = a.getCurrentPlayers(); |
| 140 var bPlayers = b.getCurrentPlayers(); |
| 141 assert_equals(timelinePlayers.length, 2, "timelinePlayers count"); |
| 142 assert_in_array(playerB, timelinePlayers, "timelinePlayers contains player
B"); |
| 143 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 144 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 145 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 146 assert_equals(bPlayers.length, 2, "Players on B length"); |
| 147 assert_in_array(playerB, bPlayers, "Players on B contains playerB"); |
| 148 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 149 }); |
| 150 }, "Check current players at t=11"); |
| 151 timing_test(function () { |
| 152 at(11.5, function() { |
| 153 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 154 var aPlayers = a.getCurrentPlayers(); |
| 155 var bPlayers = b.getCurrentPlayers(); |
| 156 assert_equals(timelinePlayers.length, 2, "timelinePlayers count"); |
| 157 assert_in_array(playerB, timelinePlayers, "timelinePlayers contains player
B"); |
| 158 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 159 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 160 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 161 assert_equals(bPlayers.length, 2, "Players on B length"); |
| 162 assert_in_array(playerB, bPlayers, "Players on B contains playerB"); |
| 163 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 164 }); |
| 165 }, "Check current players at t=11.5"); |
| 166 timing_test(function () { |
| 167 at(12.0, function() { |
| 168 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 169 var aPlayers = a.getCurrentPlayers(); |
| 170 var bPlayers = b.getCurrentPlayers(); |
| 171 assert_equals(timelinePlayers.length, 1, "timelinePlayers count"); |
| 172 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 173 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 174 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 175 assert_equals(bPlayers.length, 1, "Players on B length"); |
| 176 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 177 }); |
| 178 }, "Check current players at t=12"); |
| 179 timing_test(function () { |
| 180 at(12.5, function() { |
| 181 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 182 var aPlayers = a.getCurrentPlayers(); |
| 183 var bPlayers = b.getCurrentPlayers(); |
| 184 assert_equals(timelinePlayers.length, 1, "timelinePlayers count"); |
| 185 assert_in_array(playerAB, timelinePlayers, "timelinePlayers contains playe
rAB"); |
| 186 assert_equals(aPlayers.length, 1, "Players on A length"); |
| 187 assert_in_array(playerAB, aPlayers, "Players on A contains playerAB"); |
| 188 assert_equals(bPlayers.length, 1, "Players on B length"); |
| 189 assert_in_array(playerAB, bPlayers, "Players on B contains playerAB"); |
| 190 }); |
| 191 }, "Check current players at t=12.5"); |
| 192 timing_test(function () { |
| 193 at(13.0, function() { |
| 194 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 195 var aPlayers = a.getCurrentPlayers(); |
| 196 var bPlayers = b.getCurrentPlayers(); |
| 197 assert_equals(timelinePlayers.length, 0, "timelinePlayers count"); |
| 198 assert_equals(aPlayers.length, 0, "Players on A length"); |
| 199 assert_equals(bPlayers.length, 0, "Players on B length"); |
| 200 }); |
| 201 }, "Check current players at t=13"); |
| 202 timing_test(function () { |
| 203 at(13.5, function() { |
| 204 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 205 var timelinePlayers = document.timeline.getCurrentPlayers(); |
| 206 var aPlayers = a.getCurrentPlayers(); |
| 207 var bPlayers = b.getCurrentPlayers(); |
| 208 assert_equals(timelinePlayers.length, 0, "timelinePlayers count"); |
| 209 assert_equals(aPlayers.length, 0, "Players on A length"); |
| 210 assert_equals(bPlayers.length, 0, "Players on B length"); |
| 211 }); |
| 212 }, "Check current players at t=13.5"); |
| 213 |
| 214 timing_test(function () { |
| 215 at(0.0, function() { |
| 216 var aAnimations = a.getCurrentAnimations(); |
| 217 var bAnimations = b.getCurrentAnimations(); |
| 218 assert_equals(aAnimations.length, 0, "Animations on A count"); |
| 219 assert_equals(bAnimations.length, 0, "Animations on B count"); |
| 220 }); |
| 221 }, "Check current animations at t=0"); |
| 222 timing_test(function () { |
| 223 at(1.0, function() { |
| 224 var aAnimations = a.getCurrentAnimations(); |
| 225 var bAnimations = b.getCurrentAnimations(); |
| 226 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 227 assert_in_array(animationA, aAnimations, "Animations on A contains animati
onA"); |
| 228 assert_equals(bAnimations.length, 0, "Animations on B count"); |
| 229 }); |
| 230 }, "Check current animations at t=1"); |
| 231 timing_test(function () { |
| 232 at(2.0, function() { |
| 233 var aAnimations = a.getCurrentAnimations(); |
| 234 var bAnimations = b.getCurrentAnimations(); |
| 235 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 236 assert_in_array(animationA, aAnimations, "Animations on A contains animati
onA"); |
| 237 assert_equals(bAnimations.length, 1, "Animations on B count"); |
| 238 assert_in_array(animationB, bAnimations, "Animations on B contains animati
onB"); |
| 239 }); |
| 240 }, "Check current animations at t=2"); |
| 241 timing_test(function () { |
| 242 at(3.0, function() { |
| 243 var aAnimations = a.getCurrentAnimations(); |
| 244 var bAnimations = b.getCurrentAnimations(); |
| 245 assert_equals(aAnimations.length, 2, "Animations on A count"); |
| 246 assert_in_array(animationA, aAnimations, "Animations on A contains animati
onA"); |
| 247 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 248 assert_equals(bAnimations.length, 2, "Animations on B count"); |
| 249 assert_in_array(animationB, bAnimations, "Animations on B contains animati
onB"); |
| 250 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 251 }); |
| 252 }, "Check current animations at t=3"); |
| 253 timing_test(function () { |
| 254 at(5.0, function() { |
| 255 var aAnimations = a.getCurrentAnimations(); |
| 256 var bAnimations = b.getCurrentAnimations(); |
| 257 assert_equals(aAnimations.length, 2, "Animations on A count"); |
| 258 assert_in_array(animationA, aAnimations, "Animations on A contains animati
onA"); |
| 259 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 260 assert_equals(bAnimations.length, 2, "Animations on B count"); |
| 261 assert_in_array(animationB, bAnimations, "Animations on B contains animati
onB"); |
| 262 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 263 }); |
| 264 }, "Check current animations at t=5"); |
| 265 timing_test(function () { |
| 266 at(11.0, function() { |
| 267 var aAnimations = a.getCurrentAnimations(); |
| 268 var bAnimations = b.getCurrentAnimations(); |
| 269 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 270 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 271 assert_equals(bAnimations.length, 2, "Animations on B count"); |
| 272 assert_in_array(animationB, bAnimations, "Animations on B contains animati
onB"); |
| 273 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 274 }); |
| 275 }, "Check current animations at t=11"); |
| 276 timing_test(function () { |
| 277 at(11.5, function() { |
| 278 var aAnimations = a.getCurrentAnimations(); |
| 279 var bAnimations = b.getCurrentAnimations(); |
| 280 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 281 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 282 assert_equals(bAnimations.length, 2, "Animations on B count"); |
| 283 assert_in_array(animationB, bAnimations, "Animations on B contains animati
onB"); |
| 284 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 285 }); |
| 286 }, "Check current animations at t=11.5"); |
| 287 timing_test(function () { |
| 288 at(12.0, function() { |
| 289 var aAnimations = a.getCurrentAnimations(); |
| 290 var bAnimations = b.getCurrentAnimations(); |
| 291 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 292 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 293 assert_equals(bAnimations.length, 1, "Animations on B count"); |
| 294 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 295 }); |
| 296 }, "Check current animations at t=12"); |
| 297 timing_test(function () { |
| 298 at(12.5, function() { |
| 299 var aAnimations = a.getCurrentAnimations(); |
| 300 var bAnimations = b.getCurrentAnimations(); |
| 301 assert_equals(aAnimations.length, 1, "Animations on A count"); |
| 302 assert_in_array(animationAClone, aAnimations, "Animations on A contains an
imationAClone"); |
| 303 assert_equals(bAnimations.length, 1, "Animations on B count"); |
| 304 assert_in_array(animationBClone, bAnimations, "Animations on B contains an
imationBClone"); |
| 305 }); |
| 306 }, "Check current animations at t=12.5"); |
| 307 timing_test(function () { |
| 308 at(13.0, function() { |
| 309 var aAnimations = a.getCurrentAnimations(); |
| 310 var bAnimations = b.getCurrentAnimations(); |
| 311 assert_equals(aAnimations.length, 0, "Animations on A count"); |
| 312 assert_equals(bAnimations.length, 0, "Animations on B count"); |
| 313 }); |
| 314 }, "Check current animations at t=13"); |
| 315 timing_test(function () { |
| 316 at(13.5, function() { |
| 317 var aAnimations = a.getCurrentAnimations(); |
| 318 var bAnimations = b.getCurrentAnimations(); |
| 319 assert_equals(aAnimations.length, 0, "Animations on A count"); |
| 320 assert_equals(bAnimations.length, 0, "Animations on B count"); |
| 321 }); |
| 322 }, "Check current animations at t=13.5"); |
| 323 |
| 324 </script> |
OLD | NEW |