Rename ENABLE_SUBTLE_CRYPTO to ENABLE_WEB_CRYPTO
[WebKit-https.git] / ManualTests / transition-events.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
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;
19     }
20
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;
31     }
32
33     #log {
34       position: absolute;
35       width: 90%;
36       height: 200px;
37       overflow: scroll;
38       border: 1px solid black;
39     }
40   </style>
41   <script type="text/javascript" charset="utf-8">
42
43     var switch1 = true;
44     var switch2 = false;
45     
46     document.addEventListener('webkitTransitionEnd', function(e) {
47       var id = "1";
48       if (switch1) {
49         id = "2";
50       }
51       var offset = 200;
52       if (switch2) {
53         offset = 0;
54       }
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);
61
62     function doClick(obj)
63     {
64       var box1 = document.getElementById("box1");
65       box1.style.left = "200px";
66     }
67
68     function logTransition(event)
69     {
70       var log = document.getElementById('log');
71       log.innerHTML = log.innerHTML + '<br>Property: ' + event.propertyName + ' Time: ' + event.elapsedTime;
72     }
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>
85
86   <div id="log">
87     
88   </div>
89 </body>
90 </html>