LayoutTests/animations/animation-api-1.html

   1 <html>
   2 <head>
   3 <style type="text/css" media="screen">
   4   @-webkit-keyframes test1 {
   5     from { left: 10px; }
   6     to { left: 20px; }
   7   }
   8   @-webkit-keyframes test2 {
   9     0% { left: 10px; }
  10     50% { left: 30px; }
  11     100% { left: 20px; }
  12   }
  13   #a {
  14     -webkit-animation-name: test1;
  15     -webkit-animation-duration: 1s;
  16   }
  17   #b {
  18     -webkit-animation-name: test1;
  19     -webkit-animation-duration: 2s;
  20     -webkit-animation-delay: 3s;
  21     -webkit-animation-iteration-count: 4;
  22     -webkit-animation-direction: normal;
  23     -webkit-animation-fill-mode: none;
  24   }
  25   #c {
  26     -webkit-animation-name: test2;
  27     -webkit-animation-duration: 5s;
  28     -webkit-animation-delay: -1s;
  29     -webkit-animation-iteration-count: infinite;
  30     -webkit-animation-direction: alternate;
  31     -webkit-animation-fill-mode: forwards;
  32   }
  33   #d {
  34     -webkit-animation-name: test1, test2;
  35     -webkit-animation-duration: 1s, 2s;
  36     -webkit-animation-delay: 0s, 1s;
  37     -webkit-animation-iteration-count: 10, infinite;
  38     -webkit-animation-direction: normal, alternate;
  39     -webkit-animation-fill-mode: backwards, both;
  40   }
  41 </style>
  42 <script src="../fast/js/resources/js-test-pre.js"></script>
  43 </head>
  44 <body>
  45 <div id="a"></div>
  46 <div id="b"></div>
  47 <div id="c"></div>
  48 <div id="d"></div>
  49 <p id="description"></p>
  50 <div id="console"></div>
  51 <script>
  52
  53 description("This tests the WebKitAnimation interface.");
  54
  55 shouldBeDefined("window.WebKitAnimation");
  56 shouldBeDefined("window.WebKitAnimationList");
  57
  58 /* *********************************************** */
  59
  60 debug("");
  61 debug("Test an almost-default animation");
  62
  63 var a = document.getElementById("a");
  64 var a_animations = a.webkitGetAnimations();
  65
  66 shouldBe("a_animations.length", "1");
  67
  68 var a_animation_0 = a_animations[0];
  69
  70 shouldBeDefined("a_animation_0");
  71 debug("");
  72
  73 shouldBe("a_animation_0.name", "'test1'");
  74 shouldBe("a_animation_0.duration", "1");
  75 shouldBe("a_animation_0.delay", "0");
  76 shouldBe("a_animation_0.iterationCount", "1");
  77 shouldBe("a_animation_0.paused", "false");
  78 shouldBe("a_animation_0.ended", "false");
  79 shouldBe("a_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
  80 shouldBe("a_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE");
  81
  82 /* *********************************************** */
  83
  84 debug("");
  85 debug("Test a specified animation");
  86
  87 var b = document.getElementById("b");
  88 var b_animations = b.webkitGetAnimations();
  89
  90 shouldBe("b_animations.length", "1");
  91
  92 var b_animation_0 = b_animations[0];
  93
  94 shouldBeDefined("b_animation_0");
  95 debug("");
  96
  97 shouldBe("b_animation_0.name", "'test1'");
  98 shouldBe("b_animation_0.duration", "2");
  99 shouldBe("b_animation_0.delay", "3");
 100 shouldBe("b_animation_0.iterationCount", "4");
 101 shouldBe("b_animation_0.paused", "false");
 102 shouldBe("b_animation_0.ended", "false");
 103 shouldBe("b_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
 104 shouldBe("b_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE");
 105
 106 /* *********************************************** */
 107
 108 debug("");
 109 debug("Test negative delay, fill mode, direction and infinite iterations");
 110
 111 var c = document.getElementById("c");
 112 var c_animations = c.webkitGetAnimations();
 113
 114 shouldBe("c_animations.length", "1");
 115
 116 var c_animation_0 = c_animations[0];
 117
 118 shouldBeDefined("c_animation_0");
 119 debug("");
 120
 121 shouldBe("c_animation_0.name", "'test2'");
 122 shouldBe("c_animation_0.duration", "5");
 123 shouldBe("c_animation_0.delay", "-1");
 124 shouldBe("c_animation_0.iterationCount", "Number.POSITIVE_INFINITY");
 125 shouldBe("c_animation_0.paused", "false");
 126 shouldBe("c_animation_0.ended", "false");
 127 shouldBe("c_animation_0.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE");
 128 shouldBe("c_animation_0.fillMode", "window.WebKitAnimation.FILL_FORWARDS");
 129
 130 /* *********************************************** */
 131
 132 debug("");
 133 debug("Test multiple animations");
 134
 135 var d = document.getElementById("d");
 136 var d_animations = d.webkitGetAnimations();
 137
 138 shouldBe("d_animations.length", "2");
 139
 140 var d_animation_0 = d_animations[0];
 141
 142 shouldBeDefined("d_animation_0");
 143 debug("");
 144
 145 shouldBe("d_animation_0.name", "'test1'");
 146 shouldBe("d_animation_0.duration", "1");
 147 shouldBe("d_animation_0.delay", "0");
 148 shouldBe("d_animation_0.iterationCount", "10");
 149 shouldBe("d_animation_0.paused", "false");
 150 shouldBe("d_animation_0.ended", "false");
 151 shouldBe("d_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
 152 shouldBe("d_animation_0.fillMode", "window.WebKitAnimation.FILL_BACKWARDS");
 153
 154 var d_animation_1 = d_animations[1];
 155
 156 shouldBeDefined("d_animation_1");
 157 debug("");
 158
 159 shouldBe("d_animation_1.name", "'test2'");
 160 shouldBe("d_animation_1.duration", "2");
 161 shouldBe("d_animation_1.delay", "1");
 162 shouldBe("d_animation_1.iterationCount", "Number.POSITIVE_INFINITY");
 163 shouldBe("d_animation_1.paused", "false");
 164 shouldBe("d_animation_1.ended", "false");
 165 shouldBe("d_animation_1.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE");
 166 shouldBe("d_animation_1.fillMode", "window.WebKitAnimation.FILL_BOTH");
 167
 168 /* *********************************************** */
 169
 170 debug("");
 171 debug("Test element with no animations");
 172
 173 var e = document.getElementById("description");
 174 var e_animations = e.webkitGetAnimations();
 175
 176 shouldBeNull("e_animations");
 177
 178 debug("");
 179
 180 </script>
 181 <script src="../fast/js/resources/js-test-post.js"></script>
 182 </body>
 183 </html>