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    </style>
  30
  31    <script src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  32    <script type="text/javascript" charset="utf-8">
  33     if (window.layoutTestController)
  34       layoutTestController.waitUntilDone();
  35
  36     function animationStarted()
  37     {
  38       if (window.layoutTestController) {
  39         if (!layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 3, "box"))
  40           throw("Animation is not running");
  41
  42         layoutTestController.notifyDone();
  43       }
  44     }
  45
  46     function startTest()
  47     {
  48       waitForAnimationToStart(document.getElementById('box'), animationStarted);
  49     }
  50    </script>
  51 </head>
  52 <body onload="startTest()">
  53   <h1>Test for DRT pauseAnimationAtTimeOnElementWithId() API on animations with multiple keyframes</h1>
  54
  55   <div id="box">
  56   </div>
  57
  58 </body>
  59 </html>