Use testRunner instead of layoutTestController in animations tests
[WebKit-https.git] / LayoutTests / animations / animation-hit-test.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   <title>Test hit testing of left property while animating</title>
7   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
8   <style>
9     #target {
10       position: absolute;
11       left: 100px;
12       height: 200px;
13       width: 200px;
14       background-color: red;
15       -webkit-animation-duration: 4s;
16       -webkit-animation-timing-function: linear;
17     }
18     @-webkit-keyframes "anim" {
19         from { left: 100px; }
20         to { left: 300px; }
21     }
22     
23     .dot {
24         width: 10px;
25         height: 10px;
26         top: 100px;
27         background-color: yellow;
28         position:absolute;
29     }
30     </style>
31
32    <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
33    <script type="text/javascript" charset="utf-8">
34         function checkResult(pos, isIn)
35         {
36             var elt = document.elementFromPoint(pos, 150);
37             var good = isIn ? "inside" : "outside";
38             var bad = isIn ? "outside" : "inside";
39             return (isIn == (elt.id == "target")) ?
40                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
41                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
42         }
43         
44         function checkResults()
45         {
46             // Test before (150), in (300) and after (450)
47             var result = "";
48             result += checkResult(150, false);
49             result += checkResult(300, true);
50             result += checkResult(450, false);
51             document.getElementById('result').innerHTML = result;
52         }
53      
54         function doTest()
55         {
56             if (window.testRunner) {
57                 if (!testRunner.pauseAnimationAtTimeOnElementWithId("anim", 2.0, "target"))
58                     throw("Transition is not running");
59         
60                 checkResults();
61                 testRunner.notifyDone();
62             }
63             else {
64                 window.setTimeout("checkResults()", 2000);
65             }
66         }
67     
68         function startTest()
69         {
70             if (window.testRunner) {
71                 testRunner.dumpAsText();
72                 testRunner.waitUntilDone();
73             }
74       
75             document.getElementById("target").style.webkitAnimationName = "anim";
76             waitForAnimationToStart(document.getElementById('target'), doTest);
77         }
78    </script>
79 </head>
80 <body onload="startTest()">
81     <div>
82         This test starts an animation of the 'left' property and then does elementFromPoint calls
83         at the shown yellow dots to see if hit testing works
84     </div>
85     <div id="target"></div>
86     <div class="dot" style="left:150px"></div>
87     <div class="dot" style="left:300px"></div>
88     <div class="dot" style="left:450px"></div>
89     <div id="result" style="position:absolute; top:250px"></div>
90 </body>
91 </html>