LayoutTests/transitions/retargetted-transition.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   <title>Retargetted transition</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-transition-duration: 2s;
  14       -webkit-transform: translate(0, 0);
  15     }
  16
  17   </style>
  18   <script type="text/javascript" charset="utf-8">
  19     if (window.layoutTestController) {
  20       layoutTestController.dumpAsText();
  21       layoutTestController.waitUntilDone();
  22     }
  23
  24     function test()
  25     {
  26       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  27       // grab the last value from the matrix()
  28       var lastValueRE = /(\d+)\)$/;
  29       var yTranslate = parseInt(lastValueRE.exec(t));
  30
  31       var result = (yTranslate < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
  32       document.getElementById('result').innerHTML = result;
  33
  34       if (window.layoutTestController)
  35           layoutTestController.notifyDone();
  36     }
  37
  38     function startTest()
  39     {
  40       var box = document.getElementById('box');
  41       box.style.webkitTransform = 'translate(100px, 0)';
  42
  43       window.setTimeout(function() {
  44         box.style.webkitTransform = 'translate(0, 200px)';
  45         window.setTimeout(function() {
  46           test();
  47         }, 200);
  48       }, 300);
  49     }
  50     window.addEventListener('load', startTest, false)
  51   </script>
  52 </head>
  53 <body>
  54 <p>Box should start moving right, then move down</p>
  55 <div id="box">
  56 </div>
  57
  58 <div id="result">
  59 </div>
  60 </body>
  61 </html>