Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / transitions / transition-hit-test-transform.html
blobdba55498d9b11715601f3435d3945b9d7fb10afb
1 <!DOCTYPE html>
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 transform: translateX(100px);
13 -webkit-transition-property: transform;
14 -webkit-transition-duration: 4s;
15 -webkit-transition-timing-function: linear;
18 .dot {
19 width: 10px;
20 height: 10px;
21 top: 100px;
22 background-color: yellow;
23 position:absolute;
25 </style>
26 <script src="../animations/resources/animation-test-helpers.js"></script>
27 <script type="text/javascript">
28 function checkResult(pos, isIn)
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>";
38 function checkResults()
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;
48 function doTest()
50 if (window.testRunner) {
51 var target = document.getElementById('target');
52 internals.pauseAnimations(2);
54 checkResults();
55 testRunner.notifyDone();
57 else {
58 window.setTimeout("checkResults()", 2000);
62 function startTest()
64 if (window.testRunner) {
65 testRunner.dumpAsText();
66 testRunner.waitUntilDone();
69 document.getElementById("target").style.webkitTransform = "translateX(300px)";
70 requestAnimationFrame(doTest);
72 </script>
73 </head>
74 <body onload="startTest()">
75 <div>
76 This test starts a transition of the '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>