third_party/WebKit/LayoutTests/transitions/transition-end-event-multiple-02.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.5s;
  13     }
  14
  15     .box1 {
  16       left: 50px;
  17     }
  18
  19     .box2 {
  20       background-color: red;
  21       left: 50px;
  22     }
  23
  24     .box3 {
  25       width: 150px;
  26       background-color: green;
  27       left: 50px;
  28       height: 120px;
  29       -webkit-transition-duration: 0.7s;
  30     }
  31
  32   </style>
  33   <script src="transition-end-event-helpers.js"></script>
  34   <script type="text/javascript">
  35
  36     var expectedEndEvents = [
  37       // [property-name, element-id, elapsed-time, listen]
  38       ["background-color", "box2", 0.5, false],
  39       ["background-color", "box3", 0.7, false],
  40       ["height", "box3", 0.7, false],
  41       ["left", "box1", 0.5, false],
  42       ["left", "box2", 0.5, false],
  43       ["left", "box3", 0.7, false],
  44       ["width", "box3", 0.7, false],
  45     ];
  46
  47     function setupTest()
  48     {
  49       var boxes = document.body.getElementsByClassName('box');
  50       for (var i = 0; i < boxes.length; ++i) {
  51         boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
  52         boxes[i].className = "box box" + (i+1);
  53       }
  54     }
  55
  56     runTransitionTest(expectedEndEvents, setupTest);
  57   </script>
  58 </head>
  59 <body>
  60
  61 <p>Initiating transitions on various properties of all boxes.</p>
  62
  63 <div id="container">
  64   <div id="box1" class="box"></div>
  65   <div id="box2" class="box"></div>
  66   <div id="box3" class="box"></div>
  67 </div>
  68
  69 <div id="result"></div>
  70
  71 </body>
  72 </html>