LayoutTests/transitions/interrupted-all-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>Interrupted All Transition</title>
   8   <style type="text/css" media="screen">
   9     #container {
  10       position: relative;
  11       width: 400px;
  12       height: 100px;
  13       border: 1px solid black;
  14     }
  15     #box {
  16       position: absolute;
  17       height: 100px;
  18       width: 100px;
  19       background-color: blue;
  20       -webkit-transition-duration: 1s;
  21       -webkit-transition-timing-function: linear;
  22     }
  23   </style>
  24   <script type="text/javascript" charset="utf-8">
  25     if (window.layoutTestController) {
  26       layoutTestController.dumpAsText();
  27       layoutTestController.waitUntilDone();
  28     }
  29
  30     function startTransition()
  31     {
  32       var box = document.getElementById('box');
  33       box.style.left = '300px';
  34       box.style.opacity = 0.5;
  35       window.setTimeout(function() {
  36         box.style.left = '0px';
  37
  38         window.setTimeout(function() {
  39           var boxPos = parseInt(window.getComputedStyle(box).left);
  40           document.getElementById('result').innerHTML = (boxPos < 200) ? "PASS" : "FAIL";
  41           if (window.layoutTestController)
  42               layoutTestController.notifyDone();
  43         }, 250);
  44       }, 500);
  45     }
  46     window.addEventListener('load', startTransition, false)
  47   </script>
  48 </head>
  49 <body>
  50
  51 <p>Box should start moving left after left style is reset after 500ms</p>
  52 <div id="container">
  53   <div id="box">
  54   </div>
  55 </div>
  56 <div id="result">
  57 </div>
  58 </body>
  59 </html>