LayoutTests/animations/animation-drt-api-multiple-keyframes.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <style>
   8     body {
   9       margin: 0;
  10     }
  11
  12     div {
  13       position: relative;
  14       left: 100px;
  15       height: 200px;
  16       width: 200px;
  17       background-color: red;
  18       -webkit-animation-name: anim;
  19       -webkit-animation-duration: 5s;
  20       -webkit-animation-timing-function: linear;
  21     }
  22
  23     @-webkit-keyframes anim {
  24       from { left: 10px; }
  25       40% { left: 30px; }
  26       60% { left: 15px; }
  27       to { left: 20px; }
  28     }
  29
  30      </style>
  31    <script type="text/javascript" charset="utf-8">
  32     function startTest() {
  33       if (window.layoutTestController) {
  34         if (!layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 3, "box"))
  35           throw("Animation is not running");
  36       }
  37     }
  38    </script>
  39 </head>
  40 <body onload="startTest()">
  41   <h1>Test for DRT pauseAnimationAtTimeOnElementWithId() API on animations with multiple keyframes</h1>
  42
  43   <div id="box">
  44   </div>
  45
  46 </body>
  47 </html>