Use testRunner instead of layoutTestController in animations tests
[WebKit-https.git] / LayoutTests / animations / state-at-end-event.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #container {
7       position: relative;
8       width: 400px;
9       height: 100px;
10       border: 1px solid  black;
11     }
12     
13     .box {
14       position: absolute;
15       width: 100px;
16       height: 100px;
17       background-color: green;
18     }
19     
20     .indicator {
21       left: 0;
22       top: 0;
23       background-color: red;
24     }
25
26     #container.moved .hardware {
27       -webkit-animation: move 300ms linear;
28     }
29
30     @-webkit-keyframes move {
31       from { left: 0; }
32       to   { left: 300px; }
33     }
34    </style>
35
36    <script type="text/javascript">
37     function testEnded()
38     {
39       if (window.testRunner)
40         testRunner.notifyDone();
41     }
42     
43     function startTest()
44     {
45       if (window.testRunner)
46         testRunner.waitUntilDone();
47
48       document.getElementById('tester').addEventListener('webkitAnimationEnd', testEnded, false);
49       document.getElementById('container').className = 'moved';
50     }
51     
52     window.addEventListener('load', startTest, false);
53    </script>
54 </head>
55 <body>
56
57   <p>At the end of the test the green box should obscure the red box.</p>
58   <div id="container">
59     <div class="indicator box"></div>
60     <div id="tester" class="hardware box"></div>
61   </div>
62
63   <div id="result"></div>
64
65 </body>
66 </html>