2008-09-01 Dean Jackson <dino@apple.com>
[WebKit-https.git] / 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>