10 background-color: blue;
11 -webkit-transition-property: width, left, background-color, height, top;
12 -webkit-transition-duration: 0.2s;
20 background-color: red;
25 -webkit-transition-duration: 0.3s;
29 <script src="transition-end-event-helpers.js"></script>
30 <script type="text/javascript">
32 var expectedEndEvents = [
33 // [property-name, element-id, elapsed-time, listen]
34 ["background-color", "box2", 0.2, false],
35 ["left", "box1", 0.2, false],
36 ["width", "box3", 0.3, false],
39 function handleEndEvent2(event)
41 recordTransitionEndEvent(event);
44 function startTransition2()
46 var box = document.getElementById("box3");
47 box.addEventListener("webkitTransitionEnd", handleEndEvent2, false);
48 box.className = "box box3";
51 function handleEndEvent1(event)
53 recordTransitionEndEvent(event);
55 setTimeout(startTransition2, 100);
58 function startTransition1()
60 var box = document.getElementById("box2");
61 box.addEventListener("webkitTransitionEnd", handleEndEvent1, false);
62 box.className = "box box2";
65 function handleEndEvent(event)
67 recordTransitionEndEvent(event);
69 setTimeout(startTransition1, 100);
74 var box = document.getElementById("box1");
75 box.addEventListener("webkitTransitionEnd", handleEndEvent, false);
76 box.className = "box box1";
79 runTransitionTest(expectedEndEvents, setupTest);
84 <p>Initiating transitions on various properties of all boxes.</p>
87 <div id="box1" class="box"></div>
88 <div id="box2" class="box"></div>
89 <div id="box3" class="box"></div>
92 <div id="result"></div>