| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| @-webkit-keyframes test1 { |
| from { left: 10px; } |
| to { left: 20px; } |
| } |
| @-webkit-keyframes test2 { |
| 0% { left: 10px; } |
| 50% { left: 30px; } |
| 100% { left: 20px; } |
| } |
| #a { |
| -webkit-animation-name: test1; |
| -webkit-animation-duration: 1s; |
| } |
| #b { |
| -webkit-animation-name: test1; |
| -webkit-animation-duration: 2s; |
| -webkit-animation-delay: 3s; |
| -webkit-animation-iteration-count: 4; |
| -webkit-animation-direction: normal; |
| -webkit-animation-fill-mode: none; |
| } |
| #c { |
| -webkit-animation-name: test2; |
| -webkit-animation-duration: 5s; |
| -webkit-animation-delay: -1s; |
| -webkit-animation-iteration-count: infinite; |
| -webkit-animation-direction: alternate; |
| -webkit-animation-fill-mode: forwards; |
| } |
| #d { |
| -webkit-animation-name: test1, test2; |
| -webkit-animation-duration: 1s, 2s; |
| -webkit-animation-delay: 0s, 1s; |
| -webkit-animation-iteration-count: 10, infinite; |
| -webkit-animation-direction: normal, alternate; |
| -webkit-animation-fill-mode: backwards, both; |
| } |
| </style> |
| <script src="../fast/js/resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="a"></div> |
| <div id="b"></div> |
| <div id="c"></div> |
| <div id="d"></div> |
| <p id="description"></p> |
| <div id="console"></div> |
| <script> |
| |
| description("This tests the WebKitAnimation interface."); |
| |
| shouldBeDefined("window.WebKitAnimation"); |
| shouldBeDefined("window.WebKitAnimationList"); |
| |
| /* *********************************************** */ |
| |
| debug(""); |
| debug("Test an almost-default animation"); |
| |
| var a = document.getElementById("a"); |
| var a_animations = a.webkitGetAnimations(); |
| |
| shouldBe("a_animations.length", "1"); |
| |
| var a_animation_0 = a_animations[0]; |
| |
| shouldBeDefined("a_animation_0"); |
| debug(""); |
| |
| shouldBe("a_animation_0.name", "'test1'"); |
| shouldBe("a_animation_0.duration", "1"); |
| shouldBe("a_animation_0.delay", "0"); |
| shouldBe("a_animation_0.iterationCount", "1"); |
| shouldBe("a_animation_0.paused", "false"); |
| shouldBe("a_animation_0.ended", "false"); |
| shouldBe("a_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL"); |
| shouldBe("a_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE"); |
| |
| /* *********************************************** */ |
| |
| debug(""); |
| debug("Test a specified animation"); |
| |
| var b = document.getElementById("b"); |
| var b_animations = b.webkitGetAnimations(); |
| |
| shouldBe("b_animations.length", "1"); |
| |
| var b_animation_0 = b_animations[0]; |
| |
| shouldBeDefined("b_animation_0"); |
| debug(""); |
| |
| shouldBe("b_animation_0.name", "'test1'"); |
| shouldBe("b_animation_0.duration", "2"); |
| shouldBe("b_animation_0.delay", "3"); |
| shouldBe("b_animation_0.iterationCount", "4"); |
| shouldBe("b_animation_0.paused", "false"); |
| shouldBe("b_animation_0.ended", "false"); |
| shouldBe("b_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL"); |
| shouldBe("b_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE"); |
| |
| /* *********************************************** */ |
| |
| debug(""); |
| debug("Test negative delay, fill mode, direction and infinite iterations"); |
| |
| var c = document.getElementById("c"); |
| var c_animations = c.webkitGetAnimations(); |
| |
| shouldBe("c_animations.length", "1"); |
| |
| var c_animation_0 = c_animations[0]; |
| |
| shouldBeDefined("c_animation_0"); |
| debug(""); |
| |
| shouldBe("c_animation_0.name", "'test2'"); |
| shouldBe("c_animation_0.duration", "5"); |
| shouldBe("c_animation_0.delay", "-1"); |
| shouldBe("c_animation_0.iterationCount", "Number.POSITIVE_INFINITY"); |
| shouldBe("c_animation_0.paused", "false"); |
| shouldBe("c_animation_0.ended", "false"); |
| shouldBe("c_animation_0.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE"); |
| shouldBe("c_animation_0.fillMode", "window.WebKitAnimation.FILL_FORWARDS"); |
| |
| /* *********************************************** */ |
| |
| debug(""); |
| debug("Test multiple animations"); |
| |
| var d = document.getElementById("d"); |
| var d_animations = d.webkitGetAnimations(); |
| |
| shouldBe("d_animations.length", "2"); |
| |
| var d_animation_0 = d_animations[0]; |
| |
| shouldBeDefined("d_animation_0"); |
| debug(""); |
| |
| shouldBe("d_animation_0.name", "'test1'"); |
| shouldBe("d_animation_0.duration", "1"); |
| shouldBe("d_animation_0.delay", "0"); |
| shouldBe("d_animation_0.iterationCount", "10"); |
| shouldBe("d_animation_0.paused", "false"); |
| shouldBe("d_animation_0.ended", "false"); |
| shouldBe("d_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL"); |
| shouldBe("d_animation_0.fillMode", "window.WebKitAnimation.FILL_BACKWARDS"); |
| |
| var d_animation_1 = d_animations[1]; |
| |
| shouldBeDefined("d_animation_1"); |
| debug(""); |
| |
| shouldBe("d_animation_1.name", "'test2'"); |
| shouldBe("d_animation_1.duration", "2"); |
| shouldBe("d_animation_1.delay", "1"); |
| shouldBe("d_animation_1.iterationCount", "Number.POSITIVE_INFINITY"); |
| shouldBe("d_animation_1.paused", "false"); |
| shouldBe("d_animation_1.ended", "false"); |
| shouldBe("d_animation_1.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE"); |
| shouldBe("d_animation_1.fillMode", "window.WebKitAnimation.FILL_BOTH"); |
| |
| /* *********************************************** */ |
| |
| debug(""); |
| debug("Test element with no animations"); |
| |
| var e = document.getElementById("description"); |
| var e_animations = e.webkitGetAnimations(); |
| |
| shouldBeNull("e_animations"); |
| |
| debug(""); |
| |
| </script> |
| <script src="../fast/js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
