LayoutTests/transitions/transition-hit-test.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <title>Test hit testing of left property while transitioning</title>
   7   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   8   <style>
   9     #target {
  10       position: absolute;
  11       left: 100px;
  12       height: 200px;
  13       width: 200px;
  14       background-color: red;
  15       -webkit-transition-property: left;
  16       -webkit-transition-duration: 4s;
  17       -webkit-transition-timing-function: linear;
  18     }
  19
  20     .dot {
  21         width: 10px;
  22         height: 10px;
  23         top: 100px;
  24         background-color: yellow;
  25         position:absolute;
  26     }
  27      </style>
  28    <script type="text/javascript" charset="utf-8">
  29         function checkResult(pos, isIn)
  30         {
  31             var elt = document.elementFromPoint(pos, 150);
  32             var good = isIn ? "inside" : "outside";
  33             var bad = isIn ? "outside" : "inside";
  34             return (isIn == (elt.id == "target")) ?
  35                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
  36                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
  37         }
  38
  39         function checkResults()
  40         {
  41             // Test before (150), in (300) and after (450)
  42             var result = "";
  43             result += checkResult(150, false);
  44             result += checkResult(300, true);
  45             result += checkResult(450, false);
  46             document.getElementById('result').innerHTML = result;
  47         }
  48
  49         function doTest()
  50         {
  51             if (window.layoutTestController) {
  52                 if (!layoutTestController.pauseTransitionAtTimeOnElementWithId("left", 2.0, "target"))
  53                     throw("Transition is not running");
  54
  55                 checkResults();
  56                 layoutTestController.notifyDone();
  57             }
  58             else {
  59                 window.setTimeout("checkResults()", 2000);
  60             }
  61         }
  62
  63         function startTest()
  64         {
  65             if (window.layoutTestController) {
  66                 layoutTestController.dumpAsText();
  67                 layoutTestController.waitUntilDone();
  68             }
  69
  70             document.getElementById("target").style.left = "300px";
  71             window.setTimeout(doTest, 0);
  72         }
  73    </script>
  74 </head>
  75 <body onload="startTest()">
  76     <div>
  77         This test starts a transition of the 'left' 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>