1suite('animation-constructor', function() { 2 setup(function() { 3 document.timeline.getAnimationPlayers().forEach(function(player) { 4 player.cancel(); 5 }); 6 }); 7 8 test('Playing an Animation makes a Player', function() { 9 var animation = new Animation(document.body, [], 1000); 10 assert.equal(document.body.getAnimationPlayers().length, 0); 11 12 var player = document.timeline.play(animation); 13 tick(200); 14 assert.equal(document.body.getAnimationPlayers().length, 1); 15 16 tick(1600); 17 assert.equal(document.body.getAnimationPlayers().length, 0); 18 }); 19 20 test('Setting the timing function on an Animation works', function() { 21 function leftAsNumber(target) { 22 left = getComputedStyle(target).left; 23 return Number(left.substring(0, left.length - 2)); 24 } 25 26 var target1 = document.createElement('div'); 27 var target2 = document.createElement('div'); 28 target1.style.position = 'absolute'; 29 target2.style.position = 'absolute'; 30 document.body.appendChild(target1); 31 document.body.appendChild(target2); 32 33 var animation1 = new Animation(target1, [{left: '0px'}, {left: '50px'}], 1000); 34 var animation2 = new Animation(target2, [{left: '0px'}, {left: '50px'}], {duration: 1000, easing: 'ease-in'}); 35 36 var player1 = document.timeline.play(animation1); 37 var player2 = document.timeline.play(animation2); 38 39 tick(0); 40 assert.equal(leftAsNumber(target1), 0); 41 assert.equal(leftAsNumber(target2), 0); 42 43 tick(250); 44 assert.closeTo(leftAsNumber(target1), 12.5, 1); 45 assert.closeTo(leftAsNumber(target2), 4.65, 1); 46 47 tick(500); 48 assert.closeTo(leftAsNumber(target1), 25, 1); 49 assert.closeTo(leftAsNumber(target2), 15.25, 1); 50 }); 51 52 test('Timing is always converted to AnimationTimingInput', function() { 53 var target = document.createElement('div'); 54 document.body.appendChild(target); 55 56 var keyframes = [{background: 'blue'}, {background: 'red'}]; 57 58 var animation = new Animation(target, keyframes, 200); 59 assert.equal(animation.timing.duration, 200); 60 61 animation = new Animation(target, keyframes); 62 assert.isDefined(animation.timing); 63 64 animation = new Animation(target, keyframes, {duration: 200}); 65 var group = new AnimationGroup([animation]); 66 assert.equal(group.timing.duration, 'auto'); 67 }); 68 69 test('Handle null target on Animation', function() { 70 var animation = new Animation(null, function(tf) { 71 // noop 72 }, 200); 73 74 var player = document.timeline.play(animation); 75 assert.isNotNull(player); 76 tick(50); 77 tick(150); 78 assert.equal(player.currentTime, 100); 79 }); 80}); 81