LayoutTests/transitions/transition-end-event-multiple-03.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.5s;
  14     }
  15
  16     .box1 {
  17       left: 50px;
  18     }
  19
  20     .box2 {
  21       background-color: red;
  22       left: 50px;
  23     }
  24
  25     .box3 {
  26       width: 150px;
  27       background-color: green;
  28       left: 50px;
  29       height: 120px;
  30       -webkit-transition-duration: 0.6s;
  31     }
  32
  33     .box4 {
  34       left: 100px;
  35       height: 140px;
  36       -webkit-transition-duration: 0.3s;
  37     }
  38
  39     .box5 {
  40       /* nothing */
  41     }
  42
  43   </style>
  44   <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
  45   <script type="text/javascript" charset="utf-8">
  46     if (window.layoutTestController) {
  47         layoutTestController.dumpAsText();
  48         layoutTestController.waitUntilDone();
  49     }
  50
  51     var expected = [
  52       ["background-color", "box2", "webkitTransitionEnd", 0.5],
  53       ["background-color", "box3", "webkitTransitionEnd", 0.6],
  54       ["height", "box3", "webkitTransitionEnd", 0.6],
  55       ["height", "box4", "webkitTransitionEnd", 0.3],
  56       ["left", "box1", "webkitTransitionEnd", 0.5],
  57       ["left", "box2", "webkitTransitionEnd", 0.5],
  58       ["left", "box3", "webkitTransitionEnd", 0.6],
  59       ["left", "box4", "webkitTransitionEnd", 0.3],
  60       ["width", "box3", "webkitTransitionEnd", 0.6]
  61     ];
  62
  63     function transitionElement(index) {
  64       var boxes = document.body.getElementsByClassName('box');
  65       boxes[index-1].className = "box box" + index;
  66     }
  67
  68     function startTransitions()
  69     {
  70       var boxes = document.body.getElementsByClassName('box');
  71       for (var i = 0; i < boxes.length; ++i) {
  72         boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
  73       }
  74
  75       window.setTimeout(function() { transitionElement(1); }, 100);
  76       window.setTimeout(function() { transitionElement(2); }, 150);
  77       window.setTimeout(function() { transitionElement(3); }, 200);
  78       window.setTimeout(function() { transitionElement(4); }, 50);
  79       window.setTimeout(function() { transitionElement(5); }, 150);
  80
  81       window.setTimeout(cleanup, 1000);
  82     }
  83
  84     window.addEventListener('load', startTransitions, false);
  85   </script>
  86 </head>
  87 <body>
  88
  89 <p>Initiating transitions on various properties of all boxes, with different start times on the transitions.</p>
  90
  91 <div id="container">
  92   <div id="box1" class="box"></div>
  93   <div id="box2" class="box"></div>
  94   <div id="box3" class="box"></div>
  95   <div id="box4" class="box"></div>
  96   <div id="box5" class="box"></div>
  97 </div>
  98
  99 <div id="result"></div>
 100
 101 </body>
 102 </html>