--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/animate-none.html Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,207 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <title>Testing animation-name: none</title>
+
+ <style type="text/css" media="screen">
+ div {
+ width: 300px;
+ height: 100px;
+ margin: 10px;
+ -webkit-animation-name: 'fail';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'fail' {
+ from {
+ -webkit-transform: rotate(-90deg);
+ }
+ to {
+ -webkit-transform: rotate(90deg);
+ }
+ }
+
+ #box1 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'sway1';
+ -webkit-animation-duration: 2.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway1' {
+ from {
+ -webkit-transform: translate(0, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box2 {
+ position: relative;
+ background-color: red;
+ -webkit-animation-name: 'sway2';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway2' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box3 {
+ position: relative;
+ background-color: green;
+ -webkit-animation-name: 'sway3';
+ -webkit-animation-duration: 3.5s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ @-webkit-keyframes 'sway3' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ #box4 {
+ position: relative;
+ background-color: orange;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box5 {
+ position: relative;
+ background-color: purple;
+ -webkit-animation-name: 'none';
+ -webkit-animation-duration: 3s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: alternate;
+ -webkit-animation-timing-function: linear;
+ }
+
+ #box6 {
+ position: relative;
+ background-color: blue;
+ -webkit-animation-name: 'fade', 'sway6';
+ -webkit-animation-duration: 3s, 4s;
+ -webkit-animation-iteration-count: infinite, infinite;
+ -webkit-animation-direction: alternate, alternate;
+ -webkit-animation-timing-function: linear, linear;
+ }
+
+ @-webkit-keyframes 'sway6' {
+ from {
+ -webkit-transform: translate(0px, 0);
+ }
+ to {
+ -webkit-transform: translate(200px, 0);
+ }
+ }
+
+ @-webkit-keyframes 'fade' {
+ from {
+ opacity: 1.0;
+ }
+ to {
+ opacity: 0.1;
+ }
+ }
+
+ /* set up animation that should never be run */
+ @-webkit-keyframes none {
+ from {
+ -webkit-transform: translate(200px, 0) rotate(-90deg);
+ }
+ to {
+ -webkit-transform: translate(0px, 0) rotate(90deg);
+ }
+ }
+
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ function killanims() {
+ console.log("click");
+ var box1 = document.getElementById("box1");
+ box1.style.webkitAnimationName = '';
+ var box2 = document.getElementById("box2");
+ box2.style.webkitAnimationName = 'none';
+ var box3 = document.getElementById("box3");
+ box3.style.webkitAnimationName = "'none'";
+ var box6 = document.getElementById("box6");
+ box6.style.webkitAnimationName = "none, 'sway6'";
+ }
+
+ setTimeout(killanims, 2000);
+ </script>
+ </head>
+ <body>
+
+ <h2>Testing animation: none</h2>
+
+ <p>
+ After 2 seconds only the blue rectangles should be
+ animating.
+ Any resulting animation
+ that involves rotation or fading means that this test has FAILED.</p>
+
+ <div id="box1">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to '' (the empty string).
+ The CSS rule should cause the animation to continue.
+ </div>
+
+ <div id="box2">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as an identifier).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box3">
+ This rectangle starts with an animation. After 2 seconds a timer
+ will set the animation-name on the element to 'none' (as a string).
+ This should cause the animation to stop.
+ </div>
+
+ <div id="box4">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as an identifier). No animation should run.
+ </div>
+
+ <div id="box5">
+ This rectangle starts with an animation, but animation-name is
+ set to 'none' (as a string). No animation should run.
+ </div>
+
+ <div id="box6">
+ This rectangle starts with two animations. After 2 seconds a timer
+ will set the animation-name on the fade to 'none'. The other
+ animation (horizontal) should continue.
+ </div>
+
+ </body>
+</html>
\ No newline at end of file