test_animation-setting-effect.html (5302B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Tests for setting effects by using Animation.effect</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src='../testcommon.js'></script> 9 </head> 10 <body> 11 <div id="log"></div> 12 <script type='text/javascript'> 13 14 'use strict'; 15 16 test(function(t) { 17 var target = addDiv(t); 18 var anim = new Animation(); 19 anim.effect = new KeyframeEffect(target, 20 { marginLeft: [ '0px', '100px' ] }, 21 100 * MS_PER_SEC); 22 anim.currentTime = 50 * MS_PER_SEC; 23 assert_equals(getComputedStyle(target).marginLeft, '50px'); 24 }, 'After setting target effect on an animation with null effect, the ' + 25 'animation still works'); 26 27 test(function(t) { 28 var target = addDiv(t); 29 target.style.marginLeft = '10px'; 30 var anim = target.animate({ marginLeft: [ '0px', '100px' ] }, 31 100 * MS_PER_SEC); 32 anim.currentTime = 50 * MS_PER_SEC; 33 assert_equals(getComputedStyle(target).marginLeft, '50px'); 34 35 anim.effect = null; 36 assert_equals(getComputedStyle(target).marginLeft, '10px'); 37 }, 'After setting null target effect, the computed style of the target ' + 38 'element becomes the initial value'); 39 40 test(function(t) { 41 var target = addDiv(t); 42 var animA = target.animate({ marginLeft: [ '0px', '100px' ] }, 43 100 * MS_PER_SEC); 44 var animB = new Animation(); 45 animA.currentTime = 50 * MS_PER_SEC; 46 animB.currentTime = 20 * MS_PER_SEC; 47 assert_equals(getComputedStyle(target).marginLeft, '50px', 48 'original computed style of the target element'); 49 50 animB.effect = animA.effect; 51 assert_equals(getComputedStyle(target).marginLeft, '20px', 52 'new computed style of the target element'); 53 }, 'After setting the target effect from an existing animation, the computed ' + 54 'style of the target effect should reflect the time of the updated ' + 55 'animation.'); 56 57 test(function(t) { 58 var target = addDiv(t); 59 target.style.marginTop = '-10px'; 60 var animA = target.animate({ marginLeft: [ '0px', '100px' ] }, 61 100 * MS_PER_SEC); 62 var animB = target.animate({ marginTop: [ '0px', '100px' ] }, 63 50 * MS_PER_SEC); 64 animA.currentTime = 50 * MS_PER_SEC; 65 animB.currentTime = 10 * MS_PER_SEC; 66 assert_equals(getComputedStyle(target).marginLeft, '50px', 67 'original margin-left of the target element'); 68 assert_equals(getComputedStyle(target).marginTop, '20px', 69 'original margin-top of the target element'); 70 71 animB.effect = animA.effect; 72 assert_equals(getComputedStyle(target).marginLeft, '10px', 73 'new margin-left of the target element'); 74 assert_equals(getComputedStyle(target).marginTop, '-10px', 75 'new margin-top of the target element'); 76 }, 'After setting target effect with an animation to another animation which ' + 77 'also has an target effect and both animation effects target to the same ' + 78 'element, the computed style of this element should reflect the time and ' + 79 'effect of the animation that was set'); 80 81 test(function(t) { 82 var targetA = addDiv(t); 83 var targetB = addDiv(t); 84 targetB.style.marginLeft = '-10px'; 85 var animA = targetA.animate({ marginLeft: [ '0px', '100px' ] }, 86 100 * MS_PER_SEC); 87 var animB = targetB.animate({ marginLeft: [ '0px', '100px' ] }, 88 50 * MS_PER_SEC); 89 animA.currentTime = 50 * MS_PER_SEC; 90 animB.currentTime = 10 * MS_PER_SEC; 91 assert_equals(getComputedStyle(targetA).marginLeft, '50px', 92 'original margin-left of the first element'); 93 assert_equals(getComputedStyle(targetB).marginLeft, '20px', 94 'original margin-left of the second element'); 95 96 animB.effect = animA.effect; 97 assert_equals(getComputedStyle(targetA).marginLeft, '10px', 98 'new margin-left of the first element'); 99 assert_equals(getComputedStyle(targetB).marginLeft, '-10px', 100 'new margin-left of the second element'); 101 }, 'After setting target effect with an animation to another animation which ' + 102 'also has an target effect and these animation effects target to ' + 103 'different elements, the computed styles of the two elements should ' + 104 'reflect the time and effect of the animation that was set'); 105 106 test(function(t) { 107 var target = addDiv(t); 108 var animA = target.animate({ marginLeft: [ '0px', '100px' ] }, 109 50 * MS_PER_SEC); 110 var animB = target.animate({ marginTop: [ '0px', '50px' ] }, 111 100 * MS_PER_SEC); 112 animA.currentTime = 20 * MS_PER_SEC; 113 animB.currentTime = 30 * MS_PER_SEC; 114 assert_equals(getComputedStyle(target).marginLeft, '40px'); 115 assert_equals(getComputedStyle(target).marginTop, '15px'); 116 117 var effectA = animA.effect; 118 animA.effect = animB.effect; 119 animB.effect = effectA; 120 assert_equals(getComputedStyle(target).marginLeft, '60px'); 121 assert_equals(getComputedStyle(target).marginTop, '10px'); 122 }, 'After swapping effects of two playing animations, both animations are ' + 123 'still running with the same current time'); 124 125 </script> 126 </body> 127 </html>