Use testRunner instead of layoutTestController in animations tests
[WebKit-https.git] / LayoutTests / animations / transition-and-animation-3.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5     <style type="text/css" media="screen">
6         .box {
7             position: absolute;
8             height: 100px;
9             width: 100px;
10             left: 0px;
11             background-color: blue;
12         }
13
14         .box.animating {
15             -webkit-animation: move 0.1s linear;
16             left: 100px;
17             -webkit-transition: left 10s linear;
18         }
19         
20         /* When the animation is done, the box should be running a transition from 100px to 200px */
21         .box.animating.moved {
22             left: 200px;
23         }
24         
25         @-webkit-keyframes move {
26             from {
27                 left: 500px;
28             }
29             to   {
30                 left: 501px;
31             }
32         }
33         
34         #result {
35             margin-top: 130px;
36         }
37     </style>
38     <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
39     <script type="text/javascript" charset="utf-8">
40
41     if (window.testRunner)
42         testRunner.waitUntilDone();
43
44       const expectedValues = [
45         // [animation-name, time, element-id, property, expected-value, tolerance]
46         [null, 0.2, "test", "left", 100, 10],
47       ];
48
49       function animationStarted()
50       {
51           document.getElementById('test').className = 'animating moved box';
52       }
53
54       function setupTest()
55       {
56         document.getElementById('test').className = 'animating box';
57         runAnimationTest(expectedValues, animationStarted);
58       }
59       
60       window.addEventListener('load', function() {
61           window.setTimeout(setupTest, 0);
62       }, false);
63
64     </script>
65 </head>
66 <body>
67     <p>Once animation has finished, box should be running left transition from 100px to 200px.</p>
68     <div id="test" class="box"></div>
69     <div id="result"></div>
70 </body>
71 </html>