LayoutTests/transitions/transition-end-event-all-properties.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-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" type="text/javascript" charset="utf-8"></script>
  34   <script type="text/javascript" charset="utf-8">
  35
  36     var expectedEndEvents = [
  37       // [property-name, element-id, elapsed-time, listen]
  38       ["background-color", "box2", 0.5, true],
  39       ["background-color", "box3", 0.7, true],
  40       ["height", "box3",  0.7, true],
  41       ["left", "box1", 0.5, true],
  42       ["left", "box2", 0.5, true],
  43       ["left", "box3", 0.7, true],
  44       ["width", "box3", 0.7, true]
  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].className = "box box" + (i+1);
  52       }
  53     }
  54
  55     runTransitionTest(expectedEndEvents, 1.0, setupTest);
  56
  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>