LayoutTests/transitions/interrupt-zero-duration.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>Interrupt Transition and Change Its Duration to Zero</title>
   8     <style type="text/css" media="screen">
   9     #box {
  10         position: relative;
  11         height: 100px;
  12         width: 100px;
  13         background-color: blue;
  14         -webkit-transition-property: left;
  15         -webkit-transition-duration: 2s;
  16         -webkit-transition-timing-function: linear;
  17     }
  18     </style>
  19     <script type="text/javascript" charset="utf-8">
  20     if (window.layoutTestController) {
  21         layoutTestController.dumpAsText();
  22         layoutTestController.waitUntilDone();
  23     }
  24
  25     result = "PASS";
  26
  27     function isEqual(actual, desired, tolerance)
  28     {
  29         var diff = Math.abs(actual - desired);
  30         return diff <= tolerance;
  31     }
  32
  33     function snapshot(expected, tolerance)
  34     {
  35         if (result != "PASS")
  36             return;
  37
  38         var left = parseInt(window.getComputedStyle(document.getElementById('box')).left);
  39         if (!isEqual(left, expected, tolerance))
  40             result = "FAIL(was:"+left+", expected:"+expected+")";
  41     }
  42
  43     function reset()
  44     {
  45         document.getElementById('box').style.webkitTransitionDuration = "0s";
  46         document.getElementById('box').style.left = "0px";
  47     }
  48
  49     function startTransition()
  50     {
  51         document.getElementById('box').style.left = "400px";
  52     }
  53
  54     function start()
  55     {
  56         setTimeout("startTransition()", 0);
  57         setTimeout("snapshot(100, 80)", 500);
  58         setTimeout("reset()", 600);
  59         setTimeout("snapshot(0, 0)", 700);
  60
  61         window.setTimeout(function() {
  62             document.getElementById('result').innerHTML = result;
  63             if (window.layoutTestController)
  64                 layoutTestController.notifyDone();
  65         }, 800);
  66     }
  67
  68     window.addEventListener('load', start, false)
  69   </script>
  70 </head>
  71 <body>
  72
  73 <p>
  74 This tests changing a transitioning property while running and resetting its duration to 0.
  75 The box should start moving left and after 500ms snap back to 0</p>
  76 <div id="box">
  77 </div>
  78 <div id="result">
  79 </div>
  80 </body>
  81 </html>