LayoutTests/animations/animation-hit-test-transform.html

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