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

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