2008-09-01 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-multiple-02.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.7s;
31     }
32     
33   </style>
34   <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
35   <script type="text/javascript" charset="utf-8">
36     if (window.layoutTestController) {
37         layoutTestController.dumpAsText();
38         layoutTestController.waitUntilDone();
39     }
40     var expected = [
41       ["background-color", "box2", "webkitTransitionEnd", 0.5],
42       ["background-color", "box3", "webkitTransitionEnd", 0.7],
43       ["height", "box3", "webkitTransitionEnd", 0.7],
44       ["left", "box1", "webkitTransitionEnd", 0.5],
45       ["left", "box2", "webkitTransitionEnd", 0.5],
46       ["left", "box3", "webkitTransitionEnd", 0.7],
47       ["width", "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>