[Web Animations] Turn Web Animations with CSS integration on
[WebKit-https.git] / LayoutTests / transitions / transition-end-event-all-properties.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       -webkit-transition-duration: 0.5s;
12     }
13     
14     .box1 {
15       left: 50px;
16     }
17     
18     .box2 {
19       background-color: red;
20       left: 50px;
21     }
22     
23     .box3 {
24       width: 150px;
25       background-color: green;
26       left: 50px;
27       height: 120px;
28       -webkit-transition-duration: 0.7s;
29     }
30     
31   </style>
32   <script src="transition-end-event-helpers.js"></script>
33   <script type="text/javascript">
34     
35     var expectedEndEvents = [
36       // [property-name, element-id, elapsed-time, listen]
37       ["background-color", "box2", 0.5, true],
38       ["background-color", "box3", 0.7, true],
39       ["height", "box3",  0.7, true],
40       ["left", "box1", 0.5, true],
41       ["left", "box2", 0.5, true],
42       ["left", "box3", 0.7, true],
43       ["width", "box3", 0.7, true]
44     ];
45     
46     function setupTest()
47     {
48       var boxes = document.body.getElementsByClassName('box');
49       for (var i = 0; i < boxes.length; ++i) {
50         boxes[i].className = "box box" + (i+1);
51       }
52     }
53     
54     runTransitionTest(expectedEndEvents, setupTest);
55   </script>
56 </head>
57 <body>
58
59 <p>Initiating transitions on various properties of all boxes.</p>
60
61 <div id="container">
62   <div id="box1" class="box"></div>
63   <div id="box2" class="box"></div>
64   <div id="box3" class="box"></div>
65 </div>
66
67 <div id="result"></div>
68
69 </body>
70 </html>