LayoutTests/transitions/transition-drt-api.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-transition-property: left;
  13       -webkit-transition-duration: 4s;
  14       -webkit-transition-timing-function: linear;
  15     }
  16
  17     #target.moved {
  18       left: 200px;
  19     }
  20    </style>
  21    <script>
  22     if (window.layoutTestController)
  23       layoutTestController.dumpAsText();
  24
  25     function endTest() {
  26       if (window.layoutTestController) {
  27         var paused = layoutTestController.pauseTransitionAtTimeOnElementWithId("left", 1.0, "target");
  28         var result = "";
  29         if (paused)
  30           result = "PASS: correctly paused transition";
  31         else
  32           result = "FAIL: failed to pause transition";
  33
  34         document.getElementById('results').innerText = result;
  35         layoutTestController.notifyDone();
  36       } else
  37         document.getElementById('results').innerText = "This test requires DRT";
  38     }
  39
  40     function startTest() {
  41       if (window.layoutTestController)
  42         layoutTestController.waitUntilDone();
  43
  44       document.getElementById("target").className = "moved";
  45       window.setTimeout(endTest, 0);
  46     }
  47    </script>
  48 </head>
  49 <body onload="startTest()">
  50   <!-- Test for DRT pauseTransitionAtTimeOnElementWithId() API -->
  51   <div id="target"></div>
  52   <div id="results"></div>
  53
  54 </body>
  55 </html>