| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 | 4 |
| 5 <style> | 5 <style> |
| 6 .anim { | 6 .anim { |
| 7 position: absolute; | 7 position: absolute; |
| 8 left: 10px; | 8 left: 10px; |
| 9 height: 90px; | 9 height: 90px; |
| 10 width: 100px; | 10 width: 100px; |
| 11 background-color: black; | 11 background-color: black; |
| 12 } | 12 } |
| 13 </style> | 13 </style> |
| 14 | 14 |
| 15 <body> | 15 <body> |
| 16 <div id='e1' class='anim'></div> | 16 <div id='e1' class='anim'></div> |
| 17 <div id='e2' class='anim'></div> | 17 <div id='e2' class='anim'></div> |
| 18 <div id='e3' class='anim'></div> | 18 <div id='e3' class='anim'></div> |
| 19 <div id='e4' class='anim'></div> |
| 19 </body> | 20 </body> |
| 20 | 21 |
| 21 <script> | 22 <script> |
| 22 var e1 = document.getElementById('e1'); | 23 var e1 = document.getElementById('e1'); |
| 23 var e2 = document.getElementById('e2'); | 24 var e2 = document.getElementById('e2'); |
| 24 var e3 = document.getElementById('e3'); | 25 var e3 = document.getElementById('e3'); |
| 26 var e4 = document.getElementById('e4'); |
| 25 | 27 |
| 26 var e1Style = getComputedStyle(e1); | 28 var e1Style = getComputedStyle(e1); |
| 27 var e2Style = getComputedStyle(e2); | 29 var e2Style = getComputedStyle(e2); |
| 28 var e3Style = getComputedStyle(e3); | 30 var e3Style = getComputedStyle(e3); |
| 29 | 31 |
| 30 var durationValue = 1; | 32 var durationValue = 1; |
| 31 | 33 |
| 32 test(function() { | 34 test(function() { |
| 33 var player = e1.animate([ | 35 var player = e1.animate([ |
| 34 {left: '10px', opacity: '1', offset: 0}, | 36 {left: '10px', opacity: '1', offset: 0}, |
| (...skipping 22 matching lines...) Expand all Loading... |
| 57 ]; | 59 ]; |
| 58 | 60 |
| 59 test(function() { | 61 test(function() { |
| 60 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill
: 'forwards'}).player; | 62 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill
: 'forwards'}).player; |
| 61 player.pause(); | 63 player.pause(); |
| 62 player.currentTime = durationValue; | 64 player.currentTime = durationValue; |
| 63 assert_equals(e3Style.width, '1000px'); | 65 assert_equals(e3Style.width, '1000px'); |
| 64 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); | 66 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); |
| 65 assert_equals(e3Style.foo, undefined); | 67 assert_equals(e3Style.foo, undefined); |
| 66 }, 'Calling animate() with a pre-constructed keyframes list should start an anim
ation. Invalid style declarations should be ignored.'); | 68 }, 'Calling animate() with a pre-constructed keyframes list should start an anim
ation. Invalid style declarations should be ignored.'); |
| 69 |
| 70 test(function() { |
| 71 var partialKeyframes1 = [ |
| 72 {opacity: '1', color: 'red', offset: 0}, |
| 73 {opacity: '0', offset: 1}]; |
| 74 |
| 75 var partialKeyframes2 = [ |
| 76 {opacity: '1', color: 'red', offset: 0}, |
| 77 {opacity: '0', color: 'foo', offset: 1}]; |
| 78 |
| 79 assert_throws('NOT_SUPPORTED_ERR', function() { e4.animate(partialKeyframes1
, durationValue); }); |
| 80 assert_throws('NOT_SUPPORTED_ERR', function() { e4.animate(partialKeyframes2
, durationValue); }); |
| 81 }, 'Calling animate() with a partial keyframe should throw a NotSupportedError.'
); |
| 67 </script> | 82 </script> |
| OLD | NEW |