| 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 |