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