blob: 71eb2209cb18b321765c3d59d5c73dfa73425733 [file] [log] [blame]
dino@apple.com59ca9f52008-09-01 23:34:13 +00001<html>
2<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003 <style>
dino@apple.com59ca9f52008-09-01 23:34:13 +00004 .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>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000032 <script src="transition-end-event-helpers.js"></script>
33 <script type="text/javascript">
pol@apple.com8ceda8d2008-12-19 00:39:21 +000034
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]
dino@apple.com59ca9f52008-09-01 23:34:13 +000044 ];
45
pol@apple.com8ceda8d2008-12-19 00:39:21 +000046 function setupTest()
dino@apple.com59ca9f52008-09-01 23:34:13 +000047 {
48 var boxes = document.body.getElementsByClassName('box');
49 for (var i = 0; i < boxes.length; ++i) {
dino@apple.com59ca9f52008-09-01 23:34:13 +000050 boxes[i].className = "box box" + (i+1);
51 }
dino@apple.com59ca9f52008-09-01 23:34:13 +000052 }
53
ojan@chromium.orgfeb9deb2010-01-11 21:54:24 +000054 runTransitionTest(expectedEndEvents, setupTest);
dino@apple.com59ca9f52008-09-01 23:34:13 +000055 </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>