OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
3 <title>getComputedStyle tests</title> | 3 <title>getComputedStyle tests</title> |
4 <link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttimin
g"> | 4 <link rel="help" href="http://w3c.github.io/web-animations/#animationeffecttimin
g"> |
5 <link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org"
> | 5 <link rel="author" title="Ryo Motozawa" href="mailto:motozawa@mozilla-japan.org"
> |
6 <script src="/resources/testharness.js"></script> | 6 <script src="/resources/testharness.js"></script> |
7 <script src="/resources/testharnessreport.js"></script> | 7 <script src="/resources/testharnessreport.js"></script> |
8 <script src="../../testcommon.js"></script> | 8 <script src="../../testcommon.js"></script> |
9 <body> | 9 <body> |
10 <div id="log"></div> | 10 <div id="log"></div> |
(...skipping 86 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
97 var anim = div.animate({ opacity: [ 1, 0 ] }, | 97 var anim = div.animate({ opacity: [ 1, 0 ] }, |
98 { duration: 10000, | 98 { duration: 10000, |
99 endDelay: -5000, | 99 endDelay: -5000, |
100 fill: 'forwards' }); | 100 fill: 'forwards' }); |
101 | 101 |
102 anim.currentTime = 1000; | 102 anim.currentTime = 1000; |
103 assert_equals(getComputedStyle(div).opacity, '0.9', | 103 assert_equals(getComputedStyle(div).opacity, '0.9', |
104 'set currentTime before endTime'); | 104 'set currentTime before endTime'); |
105 | 105 |
106 anim.currentTime = 5000; | 106 anim.currentTime = 5000; |
107 assert_equals(getComputedStyle(div).opacity, '0', | 107 assert_equals(getComputedStyle(div).opacity, '0.5', |
108 'set currentTime same as endTime'); | 108 'set currentTime same as endTime'); |
109 | 109 |
110 anim.currentTime = 9999; | 110 anim.currentTime = 9999; |
111 assert_equals(getComputedStyle(div).opacity, '0', | 111 assert_equals(getComputedStyle(div).opacity, '0.5', |
112 'set currentTime during duration'); | 112 'set currentTime during duration'); |
113 | 113 |
114 anim.currentTime = 10000; | 114 anim.currentTime = 10000; |
115 assert_equals(getComputedStyle(div).opacity, '0', | 115 assert_equals(getComputedStyle(div).opacity, '0.5', |
116 'set currentTime after endTime'); | 116 'set currentTime after endTime'); |
117 }, 'change currentTime when fill forwards and endDelay is negative'); | 117 }, 'change currentTime when fill forwards and endDelay is negative'); |
118 | 118 |
119 test(function(t) { | 119 test(function(t) { |
120 var div = createDiv(t); | 120 var div = createDiv(t); |
121 var anim = div.animate({ opacity: [ 0, 1 ] }, | 121 var anim = div.animate({ opacity: [ 0, 1 ] }, |
122 { duration: 10000, | 122 { duration: 10000, |
123 direction: 'normal' }); | 123 direction: 'normal' }); |
124 | 124 |
125 anim.currentTime = 7000; | 125 anim.currentTime = 7000; |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
167 // test for a flip of value at the currentTime = 0 | 167 // test for a flip of value at the currentTime = 0 |
168 anim.effect.timing.direction = 'reverse'; | 168 anim.effect.timing.direction = 'reverse'; |
169 | 169 |
170 assert_equals(getComputedStyle(div).opacity, '1', | 170 assert_equals(getComputedStyle(div).opacity, '1', |
171 'change direction from "normal" to "reverse" ' + | 171 'change direction from "normal" to "reverse" ' + |
172 'at the starting point'); | 172 'at the starting point'); |
173 }, 'change direction from "normal" to "reverse"'); | 173 }, 'change direction from "normal" to "reverse"'); |
174 | 174 |
175 </script> | 175 </script> |
176 </body> | 176 </body> |
OLD | NEW |