[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / animations / animation-hit-test-transform.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2
3 <html lang="en">
4 <head>
5   <title>Test hit testing of -webkit-transform property while animating</title>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <style>
8     #target {
9       position: absolute;
10       left: 0px;
11       height: 200px;
12       width: 200px;
13       background-color: red;
14       -webkit-animation-duration: 4s;
15       -webkit-animation-timing-function: linear;
16     }
17     @-webkit-keyframes "anim" {
18         from { -webkit-transform: translate(100px); }
19         to { -webkit-transform: translate(300px); }
20     }
21     
22     .dot {
23         width: 10px;
24         height: 10px;
25         top: 100px;
26         background-color: yellow;
27         position:absolute;
28     }
29    </style>
30
31    <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
32    <script type="text/javascript" charset="utf-8">
33         function checkResult(pos, isIn)
34         {
35             var elt = document.elementFromPoint(pos, 150);
36             if (!elt)
37                 return "Failed to find element at " + pos + ", 150";
38
39             var good = isIn ? "inside" : "outside";
40             var bad = isIn ? "outside" : "inside";
41             return (isIn == (elt.id == "target")) ?
42                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
43                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
44         }
45         
46         function checkResults()
47         {
48             // Test before (150), in (300) and after (450)
49             var result = "";
50             result += checkResult(150, false);
51             result += checkResult(300, true);
52             result += checkResult(450, false);
53             document.getElementById('result').innerHTML = result;
54         }
55      
56         function doTest()
57         {
58             var target = document.getElementById("target");
59             if (!pauseAnimationAtTimeOnElement("anim", 2.0, target)) {
60                 document.getElementById('result').innerHTML = "FAIL: Failed to pause animation"
61                 testRunner.notifyDone();
62                 return;
63             }
64     
65             checkResults();
66             testRunner.notifyDone();
67         }
68     
69         function startTest()
70         {
71             if (window.testRunner)
72                 testRunner.dumpAsText();
73       
74             document.getElementById("target").style.webkitAnimationName = "anim";
75             waitForAnimationToStart(document.getElementById('target'), doTest);
76         }
77    </script>
78 </head>
79 <body onload="startTest()">
80     <div>
81         This test starts an animation of the '-webkit-transform' property and then does elementFromPoint calls
82         at the shown yellow dots to see if hit testing works
83     </div>
84     <div id="target"></div>
85     <div class="dot" style="left:150px"></div>
86     <div class="dot" style="left:300px"></div>
87     <div class="dot" style="left:450px"></div>
88     <div id="result" style="position:absolute; top:250px"></div>
89 </body>
90 </html>