[Web Animations] Turn Web Animations with CSS integration on for test runners
[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 src="resources/transition-test-helpers.js"></script>
26    <script>
27         function checkResult(pos, isIn)
28         {
29             var elt = document.elementFromPoint(pos, 150);
30             var good = isIn ? "inside" : "outside";
31             var bad = isIn ? "outside" : "inside";
32             return (isIn == (elt.id == "target")) ?
33                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
34                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
35         }
36         
37         function checkResults()
38         {
39             // Test before (150), in (300) and after (450)
40             var result = "";
41             result += checkResult(150, false);
42             result += checkResult(300, true);
43             result += checkResult(450, false);
44             document.getElementById('result').innerHTML = result;
45         }
46      
47         function doTest()
48         {
49             if (window.testRunner) {
50                 var target = document.getElementById('target');
51                 if (!pauseTransitionAtTimeOnElement("left", 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.left = "300px";
70             window.setTimeout(doTest, 0);
71         }
72    </script>
73 </head>
74 <body onload="startTest()">
75     <div>
76         This test starts a transition of the 'left' 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>