LayoutTests/animations/animation-drt-api.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #target {
   6       position: relative;
   7       left: 100px;
   8       height: 100px;
   9       width: 100px;
  10       background-color: blue;
  11       -webkit-animation-duration: 1s;
  12       -webkit-animation-timing-function: linear;
  13     }
  14
  15     @-webkit-keyframes bounce {
  16       from {
  17         left: 100px;
  18       }
  19       to {
  20         left: 200px;
  21       }
  22     }
  23
  24   </style>
  25
  26   <script src="resources/animation-test-helpers.js"></script>
  27   <script>
  28     if (window.layoutTestController) {
  29       layoutTestController.waitUntilDone();
  30       layoutTestController.dumpAsText();
  31     }
  32
  33     function animationStarted()
  34     {
  35       if (window.layoutTestController) {
  36         var paused = layoutTestController.pauseAnimationAtTimeOnElementWithId("bounce", 1.0, "target");
  37         var result = "";
  38         if (paused)
  39           result = "PASS: correctly paused animation";
  40         else
  41           result = "FAIL: failed to pause animation";
  42
  43         document.getElementById('results').innerText = result;
  44         layoutTestController.notifyDone();
  45       } else
  46         document.getElementById('results').innerText = "This test requires DRT";
  47     }
  48
  49     function startTest()
  50     {
  51       var target = document.getElementById('target');
  52       target.style.webkitAnimationName = "bounce";
  53       waitForAnimationToStart(target, animationStarted);
  54     }
  55    </script>
  56 </head>
  57 <body onload="startTest()">
  58   <!-- Test for DRT pauseAnimationAtTimeOnElementWithId() API -->
  59   <div id="target"></div>
  60   <div id="results"></div>
  61 </body>
  62 </html>