OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <style type="text/css" media="screen"> | 3 <style type="text/css" media="screen"> |
4 #test1 { | 4 #test1 { |
5 width: 20px; | 5 width: 20px; |
6 height: 20px; | 6 height: 20px; |
7 background-color: blue; | 7 background-color: blue; |
8 position: relative; | 8 position: relative; |
9 -webkit-animation-name: anim1; | 9 animation-name: anim1; |
10 -webkit-animation-duration: 10s; | 10 animation-duration: 10s; |
11 -webkit-animation-fill-mode: backwards; | 11 animation-fill-mode: backwards; |
12 -webkit-animation-iteration-count: 10; | 12 animation-iteration-count: 10; |
13 -webkit-animation-timing-function: linear; | 13 animation-timing-function: linear; |
14 -webkit-animation-direction: normal; | 14 animation-direction: normal; |
15 } | 15 } |
16 #test2 { | 16 #test2 { |
17 width: 20px; | 17 width: 20px; |
18 height: 20px; | 18 height: 20px; |
19 background-color: blue; | 19 background-color: blue; |
20 position: relative; | 20 position: relative; |
21 -webkit-animation-name: anim2, anim3; | 21 animation-name: anim2, anim3; |
22 -webkit-animation-duration: 5s, 2500ms; | 22 animation-duration: 5s, 2500ms; |
23 -webkit-animation-fill-mode: forwards, both; | 23 animation-fill-mode: forwards, both; |
24 -webkit-animation-iteration-count: 10, infinite; | 24 animation-iteration-count: 10, infinite; |
25 -webkit-animation-timing-function: linear, ease-in-out; | 25 animation-timing-function: linear, ease-in-out; |
26 -webkit-animation-direction: normal, alternate; | 26 animation-direction: normal, alternate; |
27 } | 27 } |
28 #test3 { | 28 #test3 { |
29 width: 20px; | 29 width: 20px; |
30 height: 20px; | 30 height: 20px; |
31 background-color: blue; | 31 background-color: blue; |
32 position: relative; | 32 position: relative; |
33 -webkit-animation-name: anim1, anim2, anim3; | 33 animation-name: anim1, anim2, anim3; |
34 -webkit-animation-duration: 5s; | 34 animation-duration: 5s; |
35 -webkit-animation-timing-function: step-start, step-end, steps(5, end); | 35 animation-timing-function: step-start, step-end, steps(5, end); |
36 } | 36 } |
37 @-webkit-keyframes anim1 { | 37 @keyframes anim1 { |
38 from { left: 10px; } | 38 from { left: 10px; } |
39 to { left: 20px; } | 39 to { left: 20px; } |
40 } | 40 } |
41 @-webkit-keyframes anim2 { | 41 @keyframes anim2 { |
42 from { width: 20px; } | 42 from { width: 20px; } |
43 to { width: 25px; } | 43 to { width: 25px; } |
44 } | 44 } |
45 @-webkit-keyframes anim3 { | 45 @keyframes anim3 { |
46 from { left: 10px; } | 46 from { left: 10px; } |
47 to { left: 20px; } | 47 to { left: 20px; } |
48 } | 48 } |
49 </style> | 49 </style> |
50 <script src="../resources/js-test.js"></script> | 50 <script src="../resources/js-test.js"></script> |
51 </head> | 51 </head> |
52 <body> | 52 <body> |
53 <p id="test1"></p> | 53 <p id="test1"></p> |
54 <p id="test2"></p> | 54 <p id="test2"></p> |
55 <p id="test3"></p> | 55 <p id="test3"></p> |
56 <p id="description"></p> | 56 <p id="description"></p> |
57 <div id="console"></div> | 57 <div id="console"></div> |
58 <script> | 58 <script> |
59 | 59 |
60 description("This tests computed style values from animation properties."); | 60 description("This tests computed style values from animation properties."); |
61 | 61 |
62 var test1 = document.getElementById("test1"); | 62 var test1 = document.getElementById("test1"); |
63 var test2 = document.getElementById("test2"); | 63 var test2 = document.getElementById("test2"); |
64 | 64 |
65 var test1Style = window.getComputedStyle(test1); | 65 var test1Style = window.getComputedStyle(test1); |
66 var test2Style = window.getComputedStyle(test2); | 66 var test2Style = window.getComputedStyle(test2); |
67 var test3Style = window.getComputedStyle(test3); | 67 var test3Style = window.getComputedStyle(test3); |
68 | 68 |
69 shouldBe("test1Style.webkitAnimationName", "'anim1'"); | 69 shouldBe("test1Style.animationName", "'anim1'"); |
70 shouldBe("test2Style.webkitAnimationName", "'anim2, anim3'"); | 70 shouldBe("test2Style.animationName", "'anim2, anim3'"); |
71 shouldBe("test3Style.webkitAnimationName", "'anim1, anim2, anim3'"); | 71 shouldBe("test3Style.animationName", "'anim1, anim2, anim3'"); |
72 | 72 |
73 shouldBe("test1Style.webkitAnimationDuration", "'10s'"); | 73 shouldBe("test1Style.animationDuration", "'10s'"); |
74 shouldBe("test2Style.webkitAnimationDuration", "'5s, 2.5s'"); | 74 shouldBe("test2Style.animationDuration", "'5s, 2.5s'"); |
75 | 75 |
76 shouldBe("test1Style.webkitAnimationFillMode", "'backwards'"); | 76 shouldBe("test1Style.animationFillMode", "'backwards'"); |
77 shouldBe("test2Style.webkitAnimationFillMode", "'forwards, both'"); | 77 shouldBe("test2Style.animationFillMode", "'forwards, both'"); |
78 | 78 |
79 shouldBe("test1Style.webkitAnimationIterationCount", "'10'"); | 79 shouldBe("test1Style.animationIterationCount", "'10'"); |
80 shouldBe("test2Style.webkitAnimationIterationCount", "'10, infinite'"); | 80 shouldBe("test2Style.animationIterationCount", "'10, infinite'"); |
81 | 81 |
82 shouldBe("test1Style.webkitAnimationTimingFunction", "'linear'"); | 82 shouldBe("test1Style.animationTimingFunction", "'linear'"); |
83 shouldBe("test2Style.webkitAnimationTimingFunction", "'linear, ease-in-out'"); | 83 shouldBe("test2Style.animationTimingFunction", "'linear, ease-in-out'"); |
84 shouldBe("test3Style.webkitAnimationTimingFunction", "'step-start, step-end, ste
ps(5, end)'"); | 84 shouldBe("test3Style.animationTimingFunction", "'step-start, step-end, steps(5,
end)'"); |
85 | 85 |
86 shouldBe("test1Style.webkitAnimationDirection", "'normal'"); | 86 shouldBe("test1Style.animationDirection", "'normal'"); |
87 shouldBe("test2Style.webkitAnimationDirection", "'normal, alternate'"); | 87 shouldBe("test2Style.animationDirection", "'normal, alternate'"); |
88 | 88 |
89 debug(""); | 89 debug(""); |
90 | 90 |
91 </script> | 91 </script> |
92 </body> | 92 </body> |
93 </html> | 93 </html> |
OLD | NEW |