3 <title>Transition End Events</title>
4 <style type="text/css" media="screen">
11 background-color: blue;
12 -webkit-transition-duration: 0.5s;
20 background-color: red;
26 background-color: green;
29 -webkit-transition-duration: 0.7s;
33 <script src="end-event-helpers.js" type="text/javascript" charset="utf-8"></script>
34 <script type="text/javascript" charset="utf-8">
35 if (window.layoutTestController) {
36 layoutTestController.dumpAsText();
37 layoutTestController.waitUntilDone();
41 ["", "box1", "webkitTransitionEnd", 0.5],
42 ["", "box2", "webkitTransitionEnd", 0.5],
43 ["", "box2", "webkitTransitionEnd", 0.5],
44 ["", "box3", "webkitTransitionEnd", 0.7],
45 ["", "box3", "webkitTransitionEnd", 0.7],
46 ["", "box3", "webkitTransitionEnd", 0.7],
47 ["", "box3", "webkitTransitionEnd", 0.7]
50 function startTransition()
52 var boxes = document.body.getElementsByClassName('box');
53 for (var i = 0; i < boxes.length; ++i) {
54 boxes[i].addEventListener("webkitTransitionEnd", recordEvent, false);
55 boxes[i].className = "box box" + (i+1);
58 window.setTimeout(cleanup, 1000);
61 window.addEventListener('load', startTransition, false);
66 <p>Initiating transitions on various properties of all boxes.</p>
69 <div id="box1" class="box"></div>
70 <div id="box2" class="box"></div>
71 <div id="box3" class="box"></div>
74 <div id="result"></div>