[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / unprefixed-events-mixed-with-prefixed.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4   <title>Test mixing prefixed and unprefixed events</title>
5   <style>
6     #box {
7         position: absolute;
8         left: 0;
9         top: 200px;
10         height: 100px;
11         width: 100px;
12         background-color: blue;
13         animation-duration: 100ms;
14         animation-iteration-count: 2;
15     }
16     @keyframes move {
17         from { left: 0px; }
18         to   { left: 100px; }
19     }
20     </style>
21     <script>
22
23 if (window.testRunner) {
24     testRunner.dumpAsText();
25     testRunner.waitUntilDone();
26 }
27
28 var results;
29
30 function dump(msg) {
31     results.innerHTML += msg + "<br/>";
32 }
33
34 function handleEvent(event) {
35     dump(event.type + ": " + event.animationName);
36     if (event.type == "animationend" && window.testRunner)
37         testRunner.notifyDone();
38 }
39
40 function handlePrefixedEvent(event) {
41     dump("FAIL -- " + event.type + ": " + event.animationName);
42 }
43
44 function init() {
45     results = document.getElementById("results");
46     var box = document.getElementById("box");
47     box.addEventListener("animationstart", handleEvent, false);
48     box.addEventListener("animationiteration", handleEvent, false);
49     box.addEventListener("animationend", handleEvent, false);
50     box.addEventListener("webkitAnimationStart", handlePrefixedEvent, false);
51     box.addEventListener("webkitAnimationIteration", handlePrefixedEvent, false);
52     box.addEventListener("webkitAnimationEnd", handlePrefixedEvent, false);
53     box.style.animationName = "move";
54 }
55
56 window.addEventListener("load", init, false);
57
58   </script>
59 </head>
60 <body>
61 This test performs two iterations of an animation. The animation should fire all three events (start, iteration, end).
62 <div id="box">
63 </div>
64 <div id="results">
65 </div>
66 </body>
67 </html>