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