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