LayoutTests/transitions/transition-hit-test-transform.html

   1 <!DOCTYPE html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
   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       -webkit-transform: translateX(100px);
  13       -webkit-transition-property: -webkit-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="resources/transition-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                 if (!pauseTransitionAtTimeOnElement("-webkit-transform", 2.0, target))
  53                     throw("Transition is not running");
  54
  55                 checkResults();
  56                 testRunner.notifyDone();
  57             }
  58             else {
  59                 window.setTimeout("checkResults()", 2000);
  60             }
  61         }
  62
  63         function startTest()
  64         {
  65             if (window.testRunner) {
  66                 testRunner.dumpAsText();
  67                 testRunner.waitUntilDone();
  68             }
  69
  70             document.getElementById("target").style.webkitTransform = "translateX(300px)";
  71             waitForAnimationStart(doTest);
  72         }
  73    </script>
  74 </head>
  75 <body onload="startTest()">
  76     <div>
  77         This test starts a transition of the '-webkit-transform' 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>