src/third_party/WebKit/LayoutTests/transitions/interrupted-immediately.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #container {
   7       position: relative;
   8       width: 400px;
   9       height: 100px;
  10       border: 1px solid black;
  11     }
  12     #box {
  13       position: absolute;
  14       left: 0px;
  15       height: 100px;
  16       width: 100px;
  17       background-color: blue;
  18       -webkit-transition-duration: 1s;
  19       -webkit-transition-timing-function: linear;
  20     }
  21   </style>
  22   <script>
  23     if (window.testRunner) {
  24       testRunner.dumpAsText();
  25       testRunner.waitUntilDone();
  26     }
  27
  28     var id;
  29
  30     function startTransition()
  31     {
  32       var box = document.getElementById('box');
  33
  34       box.style.left = '300px';
  35       box.offsetTop; // force transition start
  36
  37       box.style.left = '0px'
  38       box.offsetTop; // force transition interruption
  39
  40       // Force at least one timing update and recalc after the interruption.
  41       id = requestAnimationFrame(function() {
  42         cancelAnimationFrame(id);
  43         var current = document.timeline.getAnimationPlayers().length;
  44         document.getElementById('result').innerHTML = (current == 0) ? "PASS" : "FAIL";
  45         if (window.testRunner)
  46             testRunner.notifyDone();
  47       });
  48     }
  49     window.addEventListener('load', startTransition, false)
  50   </script>
  51 </head>
  52 <body>
  53
  54 <p>Box should stay left as style is reset immediately</p>
  55 <div id="container">
  56   <div id="box">
  57   </div>
  58 </div>
  59 <div id="result">
  60 </div>
  61 </body>
  62 </html>