1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
6 <title>Test hit testing of left property while animating</title>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
14 background-color: red;
15 -webkit-animation-duration: 4s;
16 -webkit-animation-timing-function: linear;
18 @-webkit-keyframes "anim" {
27 background-color: yellow;
32 <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
33 <script type="text/javascript" charset="utf-8">
34 function checkResult(pos, isIn)
36 var elt = document.elementFromPoint(pos, 150);
37 var good = isIn ? "inside" : "outside";
38 var bad = isIn ? "outside" : "inside";
39 return (isIn == (elt.id == "target")) ?
40 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
41 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
44 function checkResults()
46 // Test before (150), in (300) and after (450)
48 result += checkResult(150, false);
49 result += checkResult(300, true);
50 result += checkResult(450, false);
51 document.getElementById('result').innerHTML = result;
56 if (window.layoutTestController) {
57 if (!layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 2.0, "target"))
58 throw("Transition is not running");
61 layoutTestController.notifyDone();
64 window.setTimeout("checkResults()", 2000);
70 if (window.layoutTestController) {
71 layoutTestController.dumpAsText();
72 layoutTestController.waitUntilDone();
75 document.getElementById("target").style.webkitAnimationName = "anim";
76 waitForAnimationToStart(document.getElementById('target'), doTest);
80 <body onload="startTest()">
82 This test starts an animation of the 'left' property and then does elementFromPoint calls
83 at the shown yellow dots to see if hit testing works
85 <div id="target"></div>
86 <div class="dot" style="left:150px"></div>
87 <div class="dot" style="left:300px"></div>
88 <div class="dot" style="left:450px"></div>
89 <div id="result" style="position:absolute; top:250px"></div>