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 |