2008-09-01 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-multiple-04.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-transform: translate(0);
13       -webkit-transition-property: -webkit-transform;
14       -webkit-transition-duration: 0.5s;
15     }
16     
17     .box1 {
18       -webkit-transform: translate(50px);
19     }
20     
21     .box2 {
22       -webkit-transform: translate(50px) scale(1.05);
23       -webkit-transition-duration: 0.55s;
24     }
25     
26     .box3 {
27       -webkit-transform: translate(0); /* same as default */
28       -webkit-transition-duration: 0.3s;
29     }
30
31     .box4 {
32       -webkit-transform: translate(100px);
33       -webkit-transition-duration: 0.4s;
34     }
35
36     .box5 {
37       /* nothing */
38     }
39
40   </style>
41   <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
42   <script type="text/javascript" charset="utf-8">
43     if (window.layoutTestController) {
44         layoutTestController.dumpAsText();
45         layoutTestController.waitUntilDone();
46     }
47   
48     var expected = [
49       ["-webkit-transform", "box1", "webkitTransitionEnd", 0.5],
50       ["-webkit-transform", "box2", "webkitTransitionEnd", 0.55],
51       ["-webkit-transform", "box4", "webkitTransitionEnd", 0.4]
52     ];
53   
54     function transitionElement(index) {
55       var boxes = document.body.getElementsByClassName('box');
56       boxes[index-1].className = "box box" + index;
57     }
58
59     function startTransitions()
60     {
61       var boxes = document.body.getElementsByClassName('box');
62       for (var i = 0; i < boxes.length; ++i) {
63         boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
64       }
65
66       window.setTimeout(function() { transitionElement(1); }, 100);
67       window.setTimeout(function() { transitionElement(2); }, 150);
68       window.setTimeout(function() { transitionElement(3); }, 200);
69       window.setTimeout(function() { transitionElement(4); }, 50);
70       window.setTimeout(function() { transitionElement(5); }, 150);
71       
72       window.setTimeout(cleanup, 1000);
73     }
74     
75     window.addEventListener('load', startTransitions, false);
76   </script>
77 </head>
78 <body>
79
80 <p>Initiating transitions on transform properties of all boxes, starting at different times and with different durations and values.</p>
81
82 <div id="container">
83   <div id="box1" class="box"></div>
84   <div id="box2" class="box"></div>
85   <div id="box3" class="box"></div>
86   <div id="box4" class="box"></div>
87   <div id="box5" class="box"></div>
88 </div>
89
90 <div id="result"></div>
91
92 </body>
93 </html>