src/third_party/WebKit/LayoutTests/transitions/interrupt-transform-transition.html

   1 <html>
   2 <head>
   3   <style>
   4     .box {
   5       position: relative;
   6       top: 0;
   7       left: 0;
   8       width: 100px;
   9       height: 100px;
  10       background-color: blue;
  11       -webkit-transition-property: transform;
  12       -webkit-transition-duration: 2s;
  13       transform: translate(0, 0);
  14     }
  15   </style>
  16   <script>
  17     if (window.testRunner) {
  18       testRunner.dumpAsText();
  19       testRunner.waitUntilDone();
  20     }
  21
  22     function test()
  23     {
  24       var t = window.getComputedStyle(document.getElementById('box')).transform;
  25       // grab the x value from the matrix()
  26       var lastValueRE = /([\.\d]+),[^,]+\)$/;
  27       var xTranslate = lastValueRE.exec(t)[1];
  28       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be re-targeted from 200px in x, so x > 0';
  29       document.getElementById('result').innerHTML = result;
  30
  31       if (window.testRunner)
  32           testRunner.notifyDone();
  33     }
  34
  35     function startTest()
  36     {
  37       var box = document.getElementById('box');
  38       box.style.transform = 'translate(200px, 0)';
  39
  40       window.setTimeout(function() {
  41         box.style.transform = 'translate(0, 200px)';
  42         window.setTimeout(test, 0);
  43       }, 300);
  44
  45     }
  46   </script>
  47 </head>
  48 <body onload="startTest()">
  49   <p>Interrupted transition should not jump back to pre-transition transform</p>
  50   <div id="box" class="box">
  51   </div>
  52   <div id="result">
  53   </div>
  54 </body>
  55 </html>