Kill suspendAnimation(), resumeAnimation() and numberOfActiveAnimations() from DRT...
[WebKit-https.git] / LayoutTests / transitions / transition-hit-test.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     #target {
7       position: absolute;
8       left: 100px;
9       height: 200px;
10       width: 200px;
11       background-color: red;
12       -webkit-transition-property: left;
13       -webkit-transition-duration: 4s;
14       -webkit-transition-timing-function: linear;
15     }
16     
17     .dot {
18         width: 10px;
19         height: 10px;
20         top: 100px;
21         background-color: yellow;
22         position:absolute;
23     }
24      </style>
25    <script>
26         function checkResult(pos, isIn)
27         {
28             var elt = document.elementFromPoint(pos, 150);
29             var good = isIn ? "inside" : "outside";
30             var bad = isIn ? "outside" : "inside";
31             return (isIn == (elt.id == "target")) ?
32                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
33                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
34         }
35         
36         function checkResults()
37         {
38             // Test before (150), in (300) and after (450)
39             var result = "";
40             result += checkResult(150, false);
41             result += checkResult(300, true);
42             result += checkResult(450, false);
43             document.getElementById('result').innerHTML = result;
44         }
45      
46         function doTest()
47         {
48             if (window.testRunner) {
49                 if (!testRunner.pauseTransitionAtTimeOnElementWithId("left", 2.0, "target"))
50                     throw("Transition is not running");
51         
52                 checkResults();
53                 testRunner.notifyDone();
54             }
55             else {
56                 window.setTimeout("checkResults()", 2000);
57             }
58         }
59     
60         function startTest()
61         {
62             if (window.testRunner) {
63                 testRunner.dumpAsText();
64                 testRunner.waitUntilDone();
65             }
66       
67             document.getElementById("target").style.left = "300px";
68             window.setTimeout(doTest, 0);
69         }
70    </script>
71 </head>
72 <body onload="startTest()">
73     <div>
74         This test starts a transition of the 'left' property and then does elementFromPoint calls
75         at the shown yellow dots to see if hit testing works
76     </div>
77     <div id="target"></div>
78     <div class="dot" style="left:150px"></div>
79     <div class="dot" style="left:300px"></div>
80     <div class="dot" style="left:450px"></div>
81     <div id="result"></div>
82 </body>
83 </html>