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 <body> | 5 <body> |
6 <div id='e'></div> | 6 <div id='e'></div> |
7 </body> | 7 </body> |
8 | 8 |
9 <script> | 9 <script> |
10 var element = document.getElementById('e'); | 10 var element = document.getElementById('e'); |
11 | 11 |
12 test(function() { | 12 test(function() { |
13 var partialKeyframes1 = [ | 13 var partialKeyframes1 = [ |
14 {opacity: '1', color: 'red'}, | 14 {opacity: '1', color: 'red'}, |
15 {opacity: '0'} | 15 {opacity: '0'} |
16 ]; | 16 ]; |
17 var partialKeyframes2 = [ | 17 var partialKeyframes2 = [ |
18 {opacity: '1'}, | 18 {opacity: '1'}, |
19 {opacity: '0', color: 'red'} | 19 {opacity: '0', color: 'red'} |
20 ]; | 20 ]; |
21 var partialKeyframes3 = [ | 21 var partialKeyframes3 = [ |
22 {opacity: '1', color: 'red'}, | 22 {opacity: '1', color: 'red'}, |
23 {opacity: '0', color: 'foo'} | 23 {opacity: '0', color: 'foo'} |
24 ]; | 24 ]; |
25 var partialKeyframes4 = [ | 25 var partialKeyframes4 = [ |
26 {opacity: '1', color: 'foo'}, | 26 {opacity: '1', color: 'foo'}, |
27 {opacity: '0', color: 'red'} | 27 {opacity: '0', color: 'red'} |
28 ]; | 28 ]; |
29 | 29 |
30 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes1); }); | 30 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes1); }); |
31 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes2); }); | 31 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes2); }); |
32 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes3); }); | 32 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes3); }); |
33 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes4); }); | 33 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes4); }); |
34 }, 'Calling new Animation() with a mismatched keyframe property should throw a N
otSupportedError.'); | 34 }, 'Calling new KeyframeEffect() with a mismatched keyframe property should thro
w a NotSupportedError.'); |
35 | 35 |
36 test(function() { | 36 test(function() { |
37 var validKeyframes1 = [ | 37 var validKeyframes1 = [ |
38 {opacity: '1'}, | 38 {opacity: '1'}, |
39 {opacity: '0.3', offset: 0.5}, | 39 {opacity: '0.3', offset: 0.5}, |
40 {opacity: '0', offset: 1} | 40 {opacity: '0', offset: 1} |
41 ]; | 41 ]; |
42 var validKeyframes2 = [ | 42 var validKeyframes2 = [ |
43 {width: '0px'}, | 43 {width: '0px'}, |
44 {height: '0px', offset: 0}, | 44 {height: '0px', offset: 0}, |
45 {width: '10px', height: '10px', offset: 1} | 45 {width: '10px', height: '10px', offset: 1} |
46 ]; | 46 ]; |
47 | 47 |
48 assert_not_equals(new Animation(element, validKeyframes1), undefined); | 48 assert_not_equals(new KeyframeEffect(element, validKeyframes1), undefined); |
49 assert_not_equals(new Animation(element, validKeyframes2), undefined); | 49 assert_not_equals(new KeyframeEffect(element, validKeyframes2), undefined); |
50 }, 'Calling new Animation() with no offset specified for the first keyframe shou
ld create and animation.'); | 50 }, 'Calling new KeyframeEffect() with no offset specified for the first keyframe
should create and animation.'); |
51 | 51 |
52 test(function() { | 52 test(function() { |
53 var partialKeyframes1 = [ | 53 var partialKeyframes1 = [ |
54 {opacity: '1', offset: 0.1}, | 54 {opacity: '1', offset: 0.1}, |
55 {opacity: '0', offset: 1} | 55 {opacity: '0', offset: 1} |
56 ]; | 56 ]; |
57 var partialKeyframes2 = [ | 57 var partialKeyframes2 = [ |
58 {opacity: '1', offset: 0.1}, | 58 {opacity: '1', offset: 0.1}, |
59 {opacity: '0'} | 59 {opacity: '0'} |
60 ]; | 60 ]; |
61 | 61 |
62 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes1); }); | 62 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes1); }); |
63 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes2); }); | 63 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes2); }); |
64 }, 'Calling new Animation() with the offset of the first keyframe specified but
not equal to 0 should throw a NotSupportedError.'); | 64 }, 'Calling new KeyframeEffect() with the offset of the first keyframe specified
but not equal to 0 should throw a NotSupportedError.'); |
65 | 65 |
66 test(function() { | 66 test(function() { |
67 var validKeyframes1 = [ | 67 var validKeyframes1 = [ |
68 {opacity: '1', offset: 0}, | 68 {opacity: '1', offset: 0}, |
69 {opacity: '0.3', offset: 0.5}, | 69 {opacity: '0.3', offset: 0.5}, |
70 {opacity: '0'} | 70 {opacity: '0'} |
71 ]; | 71 ]; |
72 var validKeyframes2 = [ | 72 var validKeyframes2 = [ |
73 {width: '0px', height: '0px', offset: 0}, | 73 {width: '0px', height: '0px', offset: 0}, |
74 {height: '10px', offset: 1}, | 74 {height: '10px', offset: 1}, |
75 {width: '10px'} | 75 {width: '10px'} |
76 ]; | 76 ]; |
77 | 77 |
78 assert_not_equals(new Animation(element, validKeyframes1), undefined); | 78 assert_not_equals(new KeyframeEffect(element, validKeyframes1), undefined); |
79 assert_not_equals(new Animation(element, validKeyframes2), undefined); | 79 assert_not_equals(new KeyframeEffect(element, validKeyframes2), undefined); |
80 }, 'Calling new Animation() with no offset specified for the last keyframe shoul
d create an animation.'); | 80 }, 'Calling new KeyframeEffect() with no offset specified for the last keyframe
should create an animation.'); |
81 | 81 |
82 test(function() { | 82 test(function() { |
83 var partialKeyframes1 = [ | 83 var partialKeyframes1 = [ |
84 {opacity: '1', offset: 0}, | 84 {opacity: '1', offset: 0}, |
85 {opacity: '0', offset: 0.1} | 85 {opacity: '0', offset: 0.1} |
86 ]; | 86 ]; |
87 var partialKeyframes2 = [ | 87 var partialKeyframes2 = [ |
88 {opacity: '1'}, | 88 {opacity: '1'}, |
89 {opacity: '0', offset: 0.1} | 89 {opacity: '0', offset: 0.1} |
90 ]; | 90 ]; |
91 | 91 |
92 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes1); }); | 92 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes1); }); |
93 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes2); }); | 93 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes2); }); |
94 }, 'Calling new Animation() with the offset of the last keyframe specified but n
ot equal to 1 should throw a NotSupportedError.'); | 94 }, 'Calling new KeyframeEffect() with the offset of the last keyframe specified
but not equal to 1 should throw a NotSupportedError.'); |
95 | 95 |
96 test(function() { | 96 test(function() { |
97 var partialKeyframes1 = [ | 97 var partialKeyframes1 = [ |
98 {width: '0px', height: '0px', offset: 0}, | 98 {width: '0px', height: '0px', offset: 0}, |
99 {height: '10px'}, | 99 {height: '10px'}, |
100 {width: '10px', offset: 1} | 100 {width: '10px', offset: 1} |
101 ]; | 101 ]; |
102 var partialKeyframes2 = [ | 102 var partialKeyframes2 = [ |
103 {width: '0px', height: '0px', offset: 0}, | 103 {width: '0px', height: '0px', offset: 0}, |
104 {height: '10px'}, | 104 {height: '10px'}, |
105 {width: '10px'} | 105 {width: '10px'} |
106 ]; | 106 ]; |
107 | 107 |
108 // Height is missing keyframe at offset: 1 | 108 // Height is missing keyframe at offset: 1 |
109 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes1); }); | 109 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes1); }); |
110 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes2); }); | 110 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes2); }); |
111 }, 'Calling new Animation() with a keyframe that has no offset specified, is fol
lowed by other keyframes, ' + | 111 }, 'Calling new KeyframeEffect() with a keyframe that has no offset specified, i
s followed by other keyframes, ' + |
112 'and is the last keyframe for a property, should throw a NotSupportedError.'
); | 112 'and is the last keyframe for a property, should throw a NotSupportedError.'
); |
113 | 113 |
114 test(function() { | 114 test(function() { |
115 var partialKeyframes1 = [ | 115 var partialKeyframes1 = [ |
116 {width: '0px', offset: 0}, | 116 {width: '0px', offset: 0}, |
117 {height: '0px'}, | 117 {height: '0px'}, |
118 {width: '10px', height: '10px', offset: 1} | 118 {width: '10px', height: '10px', offset: 1} |
119 ]; | 119 ]; |
120 var partialKeyframes2 = [ | 120 var partialKeyframes2 = [ |
121 {width: '0px'}, | 121 {width: '0px'}, |
122 {height: '0px'}, | 122 {height: '0px'}, |
123 {width: '10px', height: '10px', offset: 1} | 123 {width: '10px', height: '10px', offset: 1} |
124 ]; | 124 ]; |
125 | 125 |
126 // Height is missing keyframe at offset: 0 | 126 // Height is missing keyframe at offset: 0 |
127 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes1); }); | 127 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes1); }); |
128 assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, parti
alKeyframes2); }); | 128 assert_throws('NOT_SUPPORTED_ERR', function() { new KeyframeEffect(element,
partialKeyframes2); }); |
129 }, 'Calling new Animation() with a keyframe that has no offset specified, is pre
ceded by other keyframes, ' + | 129 }, 'Calling new KeyframeEffect() with a keyframe that has no offset specified, i
s preceded by other keyframes, ' + |
130 'and is the first keyframe for a property, should throw a NotSupportedError.
'); | 130 'and is the first keyframe for a property, should throw a NotSupportedError.
'); |
131 </script> | 131 </script> |
OLD | NEW |