third_party/WebKit/LayoutTests/animations/animation-hit-test-transform.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 -webkit-transform property while animating</title>
   7   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   8   <style>
   9     #target {
  10       position: absolute;
  11       left: 0px;
  12       height: 200px;
  13       width: 200px;
  14       background-color: red;
  15       -webkit-animation-duration: 4s;
  16       -webkit-animation-timing-function: linear;
  17     }
  18     @-webkit-keyframes anim {
  19         from { transform: translate(100px); }
  20         to { transform: translate(300px); }
  21     }
  22
  23     .dot {
  24         width: 10px;
  25         height: 10px;
  26         top: 100px;
  27         background-color: yellow;
  28         position:absolute;
  29     }
  30    </style>
  31
  32    <script type="text/javascript" charset="utf-8">
  33         function checkResult(pos, isIn)
  34         {
  35             var elt = document.elementFromPoint(pos, 150);
  36             var good = isIn ? "inside" : "outside";
  37             var bad = isIn ? "outside" : "inside";
  38             return (isIn == (elt.id == "target")) ?
  39                 "<span style='color:green'>PASS</span> - " + pos + "px was " + good + " as it should be" + "<br>" :
  40                 "<span style='color:red'>FAIL</span> - " + pos + "px was " + bad + " and should have been " + good + "<br>";
  41         }
  42
  43         function checkResults()
  44         {
  45             // Test before (150), in (300) and after (450)
  46             var result = "";
  47             result += checkResult(150, false);
  48             result += checkResult(300, true);
  49             result += checkResult(450, false);
  50             document.getElementById('result').innerHTML = result;
  51         }
  52
  53         function doTest()
  54         {
  55             if (window.testRunner) {
  56                 internals.pauseAnimations(2);
  57
  58                 checkResults();
  59                 testRunner.notifyDone();
  60             }
  61             else {
  62                 window.setTimeout("checkResults()", 2000);
  63             }
  64         }
  65
  66         function startTest()
  67         {
  68             if (window.testRunner) {
  69                 testRunner.dumpAsText();
  70                 testRunner.waitUntilDone();
  71             }
  72
  73             document.getElementById("target").style.webkitAnimationName = "anim";
  74             document.addEventListener('webkitAnimationStart', doTest);
  75         }
  76    </script>
  77 </head>
  78 <body onload="startTest()">
  79     <div>
  80         This test starts an animation of the '-webkit-transform' property and then does elementFromPoint calls
  81         at the shown yellow dots to see if hit testing works
  82     </div>
  83     <div id="target"></div>
  84     <div class="dot" style="left:150px"></div>
  85     <div class="dot" style="left:300px"></div>
  86     <div class="dot" style="left:450px"></div>
  87     <div id="result" style="position:absolute; top:250px"></div>
  88 </body>
  89 </html>