Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / ManualTests / transition-events.html
blob36cf940b106b32b7b68251ef812d280206f1d05b
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
4 <html lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Transition Events</title>
8 <style type="text/css" media="screen">
9 #box1 {
10 position: relative;
11 width: 100px;
12 height: 100px;
13 margin: 10px;
14 background-color: blue;
15 z-index: 0;
16 -webkit-transition-property: left;
17 -webkit-transition-duration: 2s;
18 left: 0px;
21 #box2 {
22 position: relative;
23 width: 100px;
24 height: 100px;
25 margin: 10px;
26 background-color: red;
27 z-index: 0;
28 -webkit-transition-property: left;
29 -webkit-transition-duration: 2s;
30 left: 0px;
33 #log {
34 position: absolute;
35 width: 90%;
36 height: 200px;
37 overflow: scroll;
38 border: 1px solid black;
40 </style>
41 <script type="text/javascript" charset="utf-8">
43 var switch1 = true;
44 var switch2 = false;
46 document.addEventListener('webkitTransitionEnd', function(e) {
47 var id = "1";
48 if (switch1) {
49 id = "2";
51 var offset = 200;
52 if (switch2) {
53 offset = 0;
55 var box = document.getElementById("box" + id);
56 box.style.left = "" + offset + "px";
57 switch1 = !switch1;
58 if (!switch1) switch2 = !switch2;
59 logTransition(event);
60 }, false);
62 function doClick(obj)
64 var box1 = document.getElementById("box1");
65 box1.style.left = "200px";
68 function logTransition(event)
70 var log = document.getElementById('log');
71 log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime;
73 </script>
74 </head>
75 <body>
76 <h2>Transition Events</h2>
77 <p>Click to start transitions. Once started, transition end events should keep
78 things moving forever.</p>
79 <div id="container" onclick="doClick(this)">
80 <div id="box1">
81 </div>
82 <div id="box2">
83 </div>
84 </div>
86 <div id="log">
88 </div>
89 </body>
90 </html>