src/third_party/WebKit/LayoutTests/transitions/3d/interrupted-transition.html

   1 <html>
   2 <head>
   3 <style>
   4 #box {
   5     position: relative;
   6     width: 10px;
   7     height: 10px;
   8     background-color: green;
   9     transform: translate3d(0, 0, 0);
  10     -webkit-transition: transform 200ms linear;
  11 }
  12 </style>
  13 <script>
  14
  15 if (window.testRunner) {
  16     window.testRunner.dumpAsText();
  17     window.testRunner.waitUntilDone();
  18 }
  19
  20 var NUMBER_OF_INTERRUPTIONS = 30;
  21 var interruptionCount = 0;
  22 var box;
  23
  24 function interruptTransition() {
  25     if (interruptionCount <= NUMBER_OF_INTERRUPTIONS) {
  26         interruptionCount++;
  27         box.style.webkitTransform = 'translate3d(' + (interruptionCount * 5) + "px, 0, 0)";
  28         // call the function again, before the transition can complete
  29         setTimeout(interruptTransition, 0);
  30     }
  31 }
  32
  33 function finishTest() {
  34     var results = document.getElementById("results");
  35     results.innerText = "The transition completed successfully.";
  36
  37     if (window.testRunner)
  38         window.testRunner.notifyDone();
  39 }
  40
  41 window.addEventListener("load", function () {
  42     box = document.getElementById("box");
  43     box.addEventListener("webkitTransitionEnd", finishTest, false);
  44     // start the rush of interruptions
  45     setTimeout(interruptTransition, 10);
  46 }, false);
  47
  48 </script>
  49 </head>
  50 <body>
  51  <div id="box"></div>
  52  <p>This test should not crash</p>
  53  <p id="results"></p>
  54 </body>
  55 </html>