LayoutTests/transitions/transition-drt-api-delay.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     div {
   9       position: relative;
  10       left: 100px;
  11       height: 50px;
  12       width: 50px;
  13       background-color: green;
  14       -webkit-transition-property: left;
  15       -webkit-transition-duration: 4s;
  16       -webkit-transition-timing-function: linear;
  17       -webkit-transition-delay: 1s;
  18     }
  19
  20     .moved {
  21       left: 200px;
  22     }
  23    </style>
  24    <script src="transition-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  25    <script type="text/javascript" charset="utf-8">
  26     function endTest() {
  27       if (window.layoutTestController) {
  28         layoutTestController.pauseTransitionAtTimeOnElementWithId("left", 2.0, "target");
  29         var left = window.getComputedStyle(document.getElementById('target')).left;
  30         var result = "PASS";
  31         if (left != "125px") {
  32           result = "FAIL - expected 125px got " + left;
  33         }
  34         document.getElementById('result').innerHTML = "<p>" + result + "</p>";
  35         layoutTestController.notifyDone();
  36       }
  37     }
  38
  39     function startTest() {
  40       if (window.layoutTestController) {
  41         layoutTestController.dumpAsText();
  42         layoutTestController.waitUntilDone();
  43       }
  44
  45       document.getElementById("target").className = "moved";
  46       waitForAnimationStart(endTest, 1);
  47     }
  48    </script>
  49 </head>
  50 <body onload="startTest()">
  51   <h1>Test for transition delay on layoutTestController API</h1>
  52
  53   <p>This test works only in DumpRenderTree. It uses an API exposed
  54     only there to jump to a particular time in a running transition.
  55     Tests bug <a href="https://bugs.webkit.org/show_bug.cgi?id=22368">22368</a>
  56   </p>
  57
  58   <div id="target">
  59   </div>
  60
  61   <div id="result">
  62   </div>
  63
  64 </body>
  65 </html>