[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / transition-hit-test-transform.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
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                 var target = document.getElementById('target');
52                 if (!pauseTransitionAtTimeOnElement("-webkit-transform", 2.0, target))
53                     throw("Transition is not running");
54         
55                 checkResults();
56                 testRunner.notifyDone();
57             }
58             else {
59                 window.setTimeout("checkResults()", 2000);
60             }
61         }
62     
63         function startTest()
64         {
65             if (window.testRunner) {
66                 testRunner.dumpAsText();
67                 testRunner.waitUntilDone();
68             }
69       
70             document.getElementById("target").style.webkitTransform = "translateX(300px)";
71             waitForAnimationStart(doTest);
72         }
73    </script>
74 </head>
75 <body onload="startTest()">
76     <div>
77         This test starts a transition of the '-webkit-transform' property and then does elementFromPoint calls
78         at the shown yellow dots to see if hit testing works
79     </div>
80     <div id="target"></div>
81     <div class="dot" style="left:150px"></div>
82     <div class="dot" style="left:300px"></div>
83     <div class="dot" style="left:450px"></div>
84     <div id="result"></div>
85 </body>
86 </html>