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="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
  34   <script type="text/javascript" charset="utf-8">
  35     if (window.layoutTestController) {
  36         layoutTestController.dumpAsText();
  37         layoutTestController.waitUntilDone();
  38     }
  39
  40     var expected = [
  41       ["", "box1", "webkitTransitionEnd", 0.5],
  42       ["", "box2", "webkitTransitionEnd", 0.5],
  43       ["", "box2", "webkitTransitionEnd", 0.5],
  44       ["", "box3", "webkitTransitionEnd", 0.7],
  45       ["", "box3", "webkitTransitionEnd", 0.7],
  46       ["", "box3", "webkitTransitionEnd", 0.7],
  47       ["", "box3", "webkitTransitionEnd", 0.7]
  48     ];
  49
  50     function startTransition()
  51     {
  52       var boxes = document.body.getElementsByClassName('box');
  53       for (var i = 0; i < boxes.length; ++i) {
  54         boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
  55         boxes[i].className = "box box" + (i+1);
  56       }
  57
  58       window.setTimeout(cleanup, 1000);
  59     }
  60
  61     window.addEventListener('load', startTransition, false);
  62   </script>
  63 </head>
  64 <body>
  65
  66 <p>Initiating transitions on various properties of all boxes.</p>
  67
  68 <div id="container">
  69   <div id="box1" class="box"></div>
  70   <div id="box2" class="box"></div>
  71   <div id="box3" class="box"></div>
  72 </div>
  73
  74 <div id="result"></div>
  75
  76 </body>
  77 </html>