[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / animation-followed-by-transition.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <style>
5         #test {
6             position: absolute;
7             top: 100px;
8             left: 100px;
9             height: 100px;
10             width: 100px;
11             background: green;
12             transition: transform 40ms;
13             transform: translate3d(0,0,0);
14             animation: slideInUp 50ms;
15         }
16
17         #test.trans {
18             transform: translateX(200%);
19         }
20
21         @keyframes slideInUp {
22             0% { 
23                 transform: translate3d(-100%, 0, 0);
24             }
25             100% {
26                 transform: translate3d(0, 0, 0);
27             }
28         }
29     </style>
30 </head>
31 <body>
32     <div id="test"></div>
33 <p>Should see animationend followed by transitionend.</p>
34 <pre id="logging"></pre>
35     <script>
36         if (window.testRunner) {
37             testRunner.dumpAsText();
38             testRunner.waitUntilDone();
39         }
40
41         function doLog(s)
42         {
43             document.getElementById('logging').textContent += s + '\n';
44         }
45         
46         var testDiv = document.getElementById('test');
47         testDiv.addEventListener("transitionend", function() {
48             doLog("transitionend");
49             if (window.testRunner)
50                 testRunner.notifyDone();
51         });
52
53         testDiv.addEventListener("animationend", function() {
54             doLog("animationend");
55             window.setTimeout(function() {
56                 testDiv.classList.add('trans');
57             }, 0)
58
59             // Watchdog timer.
60             window.setTimeout(function() {
61                 if (window.testRunner)
62                     testRunner.notifyDone();
63             }, 500)
64         });
65     </script>
66 </body>
67 </html>