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 { -webkit-transform: translate(100px); }
  20         to { -webkit-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 src="animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
  33    <script type="text/javascript" charset="utf-8">
  34         function checkResult(pos, isIn)
  35         {
  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>";
  42         }
  43
  44         function checkResults()
  45         {
  46             // Test before (150), in (300) and after (450)
  47             var result = "";
  48             result += checkResult(150, false);
  49             result += checkResult(300, true);
  50             result += checkResult(450, false);
  51             document.getElementById('result').innerHTML = result;
  52         }
  53
  54         function doTest()
  55         {
  56             if (window.layoutTestController) {
  57                 if (!layoutTestController.pauseAnimationAtTimeOnElementWithId("anim", 2.0, "target"))
  58                     throw("Transition is not running");
  59
  60                 checkResults();
  61                 layoutTestController.notifyDone();
  62             }
  63             else {
  64                 window.setTimeout("checkResults()", 2000);
  65             }
  66         }
  67
  68         function startTest()
  69         {
  70             if (window.layoutTestController) {
  71                 layoutTestController.dumpAsText();
  72                 layoutTestController.waitUntilDone();
  73             }
  74
  75             document.getElementById("target").style.webkitAnimationName = "anim";
  76             waitForAnimationToStart(document.getElementById('target'), doTest);
  77         }
  78    </script>
  79 </head>
  80 <body onload="startTest()">
  81     <div>
  82         This test starts an animation of the '-webkit-transform' property and then does elementFromPoint calls
  83         at the shown yellow dots to see if hit testing works
  84     </div>
  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>
  90 </body>
  91 </html>