blob: 7d19530b79c6c3092b078d0d7e6dc36c6f587e65 [file] [log] [blame]
dino@apple.com19853b32008-09-11 21:59:08 +00001<html>
2<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003 <style>
dino@apple.com19853b32008-09-11 21:59:08 +00004 .box {
5 position: relative;
6 left: 0;
7 height: 100px;
8 width: 100px;
9 margin: 10px;
10 background-color: blue;
11 -webkit-transition-property: width, left, background-color, height, top;
12 -webkit-transition-duration: 0.2s;
13 }
14
15 .box1 {
16 left: 50px;
17 }
18
19 .box2 {
20 background-color: red;
21 left: 100px;
22 }
23 </style>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000024 <script src="transition-end-event-helpers.js"></script>
25 <script type="text/javascript">
pol@apple.com8ceda8d2008-12-19 00:39:21 +000026
27 var expectedEndEvents = [
28 // [property-name, element-id, elapsed-time, listen]
29 ["left", "box1", 0.2, false],
dino@apple.com19853b32008-09-11 21:59:08 +000030 ];
31
pol@apple.com8ceda8d2008-12-19 00:39:21 +000032 function startTransition()
dino@apple.com19853b32008-09-11 21:59:08 +000033 {
34 var box = document.getElementById("box1");
35 box.className = "box box2";
36 }
pol@apple.com8ceda8d2008-12-19 00:39:21 +000037
abarth@webkit.org0b918c22010-04-08 06:51:00 +000038 var firstTimeInHandleEndEvent = true;
pol@apple.com8ceda8d2008-12-19 00:39:21 +000039 function handleEndEvent(event)
40 {
41 recordTransitionEndEvent(event);
42
43 event.target.style.webkitTransitionProperty = "none";
abarth@webkit.org0b918c22010-04-08 06:51:00 +000044 if (firstTimeInHandleEndEvent) {
45 firstTimeInHandleEndEvent = false;
46 window.setTimeout(startTransition, 100);
47 }
pol@apple.com8ceda8d2008-12-19 00:39:21 +000048 }
dino@apple.com19853b32008-09-11 21:59:08 +000049
pol@apple.com8ceda8d2008-12-19 00:39:21 +000050 function setupTest()
51 {
52 var box = document.getElementById("box1");
53 box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
54 box.className = "box box1";
55 }
56
eric@webkit.orgbaa81d22010-04-06 23:27:01 +000057 // We need to pass an explicit maxTime because we use two sequential
58 // transitions that each take 0.2s.
59 runTransitionTest(expectedEndEvents, setupTest, 0.5);
dino@apple.com19853b32008-09-11 21:59:08 +000060 </script>
61</head>
62<body>
63
64<p>Initiating transitions on various properties of all boxes.</p>
65
66<div id="container">
67 <div id="box1" class="box"></div>
68</div>
69
70<div id="result"></div>
71
72</body>
73</html>