LayoutTests/transitions/transition-end-event-nested.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.2s;
  14     }
  15
  16     .box1 {
  17       left: 50px;
  18     }
  19
  20     .box2 {
  21       background-color: red;
  22     }
  23
  24     .box3 {
  25       width: 150px;
  26       -webkit-transition-duration: 0.3s;
  27     }
  28
  29   </style>
  30   <script src="transition-end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
  31   <script type="text/javascript" charset="utf-8">
  32
  33     var expectedEndEvents = [
  34       // [property-name, element-id, elapsed-time, listen]
  35       ["background-color", "box2", 0.2, false],
  36       ["left", "box1", 0.2, false],
  37       ["width", "box3", 0.3, false],
  38     ];
  39
  40     function handleEndEvent2(event)
  41     {
  42       recordTransitionEndEvent(event);
  43     }
  44
  45     function startTransition2()
  46     {
  47       var box = document.getElementById("box3");
  48       box.addEventListener("webkitTransitionEnd", handleEndEvent2, false);
  49       box.className = "box box3";
  50     }
  51
  52     function handleEndEvent1(event)
  53     {
  54       recordTransitionEndEvent(event);
  55
  56       setTimeout(startTransition2, 100);
  57     }
  58
  59     function startTransition1()
  60     {
  61       var box = document.getElementById("box2");
  62       box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
  63       box.className = "box box2";
  64     }
  65
  66     function handleEndEvent(event)
  67     {
  68       recordTransitionEndEvent(event);
  69
  70       setTimeout(startTransition1, 100);
  71     }
  72
  73     function setupTest()
  74     {
  75       var box = document.getElementById("box1");
  76       box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
  77       box.className = "box box1";
  78     }
  79
  80     runTransitionTest(expectedEndEvents, 2.0, setupTest);
  81
  82   </script>
  83 </head>
  84 <body>
  85
  86 <p>Initiating transitions on various properties of all boxes.</p>
  87
  88 <div id="container">
  89   <div id="box1" class="box"></div>
  90   <div id="box2" class="box"></div>
  91   <div id="box3" class="box"></div>
  92 </div>
  93
  94 <div id="result"></div>
  95
  96 </body>
  97 </html>