LayoutTests/transitions/transition-end-event-set-none.html

   1 <html>
   2 <head>
   3   <title>Transition End Events</title>
   4   <style type="text/css" media="screen">
   5     .box {
   6       position: relative;
   7       left: 0;
   8       height: 100px;
   9       width: 100px;
  10       margin: 10px;
  11       background-color: blue;
  12       -webkit-transition-property: width, left, background-color, height, top;
  13       -webkit-transition-duration: 0.2s;
  14     }
  15
  16     .box1 {
  17       left: 50px;
  18     }
  19
  20     .box2 {
  21       background-color: red;
  22       left: 100px;
  23     }
  24   </style>
  25   <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
  26   <script type="text/javascript" charset="utf-8">
  27
  28     var expectedEndEvents = [
  29       // [property-name, element-id, elapsed-time, listen]
  30       ["left", "box1", 0.2, false],
  31     ];
  32
  33     function startTransition()
  34     {
  35       var box = document.getElementById("box1");
  36       box.className = "box box2";
  37     }
  38
  39     function handleEndEvent(event)
  40     {
  41       recordTransitionEndEvent(event);
  42
  43       event.target.style.webkitTransitionProperty = "none";
  44       window.setTimeout(startTransition, 100);
  45     }
  46
  47     function setupTest()
  48     {
  49       var box = document.getElementById("box1");
  50       box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
  51       box.className = "box box1";
  52     }
  53
  54     runTransitionTest(expectedEndEvents, 0.5, setupTest);
  55
  56   </script>
  57 </head>
  58 <body>
  59
  60 <p>Initiating transitions on various properties of all boxes.</p>
  61
  62 <div id="container">
  63   <div id="box1" class="box"></div>
  64 </div>
  65
  66 <div id="result"></div>
  67
  68 </body>
  69 </html>