2008-09-01 Dean Jackson <dino@apple.com>
[WebKit-https.git] / 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="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
31   <script type="text/javascript" charset="utf-8">
32     if (window.layoutTestController) {
33         layoutTestController.dumpAsText();
34         layoutTestController.waitUntilDone();
35     }
36
37     var expected = [
38       ["background-color", "box2", "webkitTransitionEnd", 0.2],
39       ["left", "box1", "webkitTransitionEnd", 0.2],
40       ["width", "box3", "webkitTransitionEnd", 0.3],
41     ];
42     
43     function startTransition1()
44     {
45       var box = document.getElementById("box1");
46       box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
47       box.className = "box box1";
48     }
49
50     function handleEndEvent1(event) {
51       recordEvent(event);
52       setTimeout(startTransition2, 100);
53     }
54
55     function startTransition2()
56     {
57       var box = document.getElementById("box2");
58       box.addEventListener("webkitTransitionEnd", handleEndEvent2, false);
59       box.className = "box box2";
60     }
61
62     function handleEndEvent2(event) {
63       recordEvent(event);
64       setTimeout(startTransition3, 100);
65     }
66
67     function startTransition3()
68     {
69       var box = document.getElementById("box3");
70       box.addEventListener("webkitTransitionEnd", handleEndEvent3, false);
71       box.className = "box box3";
72     }
73
74     function handleEndEvent3(event) {
75       recordEvent(event);
76       window.setTimeout(cleanup, 100);
77     }
78
79     window.addEventListener('load', startTransition1, false);
80   </script>
81 </head>
82 <body>
83
84 <p>Initiating transitions on various properties of all boxes.</p>
85
86 <div id="container">
87   <div id="box1" class="box"></div>
88   <div id="box2" class="box"></div>
89   <div id="box3" class="box"></div>
90 </div>
91
92 <div id="result"></div>
93
94 </body>
95 </html>