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

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