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