Refactoring: Pull all fullscreen code out of Document and into its own helper class
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-multiple-04.html
1 <html>
2 <head>
3   <style>
4     .box {
5       position: relative;
6       left: 0;
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       background-color: blue;
11       transform: translate(0);
12       transition-property: transform;
13       transition-duration: 0.5s;
14     }
15     
16     .box1 {
17       transform: translate(50px);
18     }
19     
20     .box2 {
21       transform: translate(50px) scale(1.05);
22       transition-duration: 0.55s;
23     }
24     
25     .box3 {
26       transform: translate(0); /* same as default */
27       transition-duration: 0.3s;
28     }
29
30     .box4 {
31       transform: translate(100px);
32       transition-duration: 0.4s;
33     }
34
35     .box5 {
36       /* nothing */
37     }
38
39   </style>
40   <script src="transition-end-event-helpers.js"></script>
41   <script type="text/javascript">
42     
43     var expectedEndEvents = [
44       // [property-name, element-id, elapsed-time, listen]
45       ["transform", "box1", 0.5, false],
46       ["transform", "box2", 0.55, false],
47       ["transform", "box4", 0.4, false]
48     ];
49   
50     function transitionElement(index)
51     {
52       var boxes = document.body.getElementsByClassName('box');
53       boxes[index-1].className = "box box" + index;
54     }
55
56     function setupTest()
57     {
58       var boxes = document.body.getElementsByClassName('box');
59       for (var i = 0; i < boxes.length; ++i) {
60         boxes[i].addEventListener("webkitTransitionEnd", recordTransitionEndEvent, false);
61       }
62
63       window.setTimeout(function() { transitionElement(1); }, 100);
64       window.setTimeout(function() { transitionElement(2); }, 150);
65       window.setTimeout(function() { transitionElement(3); }, 200);
66       window.setTimeout(function() { transitionElement(4); }, 50);
67       window.setTimeout(function() { transitionElement(5); }, 150);
68     }
69     
70     runTransitionTest(expectedEndEvents, setupTest);
71   </script>
72 </head>
73 <body>
74
75 <p>Initiating transitions on transform properties of all boxes, starting at different times and with different durations and values.</p>
76
77 <div id="container">
78   <div id="box1" class="box"></div>
79   <div id="box2" class="box"></div>
80   <div id="box3" class="box"></div>
81   <div id="box4" class="box"></div>
82   <div id="box5" class="box"></div>
83 </div>
84
85 <div id="result"></div>
86
87 </body>
88 </html>