src/third_party/WebKit/LayoutTests/transitions/transition-hit-test-transform.html

   1 <!DOCTYPE html>
   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       transform: translateX(100px);
  13       -webkit-transition-property: 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="../animations/resources/animation-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                 internals.pauseAnimations(2);
  53
  54                 checkResults();
  55                 testRunner.notifyDone();
  56             }
  57             else {
  58                 window.setTimeout("checkResults()", 2000);
  59             }
  60         }
  61
  62         function startTest()
  63         {
  64             if (window.testRunner) {
  65                 testRunner.dumpAsText();
  66                 testRunner.waitUntilDone();
  67             }
  68
  69             document.getElementById("target").style.webkitTransform = "translateX(300px)";
  70             requestAnimationFrame(doTest);
  71         }
  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>