animation-hit-test-transform.html | Explore in Territory

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <title>Test hit testing of transform property while animating</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
    #target {
      position: absolute;
      left: 0px;
      height: 200px;
      width: 200px;
      background-color: red;
      animation-duration: 4s;
      animation-timing-function: linear;
    }
    @keyframes anim {
        from { transform: translate(100px); }
        to { transform: translate(300px); }
    }

    .dot {
        width: 10px;
        height: 10px;
        top: 100px;
        background-color: yellow;
        position:absolute;
    }
   </style>

   <script src="../../resources/testharness.js"></script>
   <script src="../../resources/testharnessreport.js"></script>
   <script type="text/javascript" charset="utf-8">
        var test = async_test("This test starts an animation of the 'transform' property and then does elementFromPoint calls at the shown yellow dots to see if hit testing works");

        function checkResult(pos, isIn)
        {
            var elt = document.elementFromPoint(pos, 150);
            var good = isIn ? "inside" : "outside";
            var bad = isIn ? "outside" : "inside";
            var result = (elt.id == "target");
            assert_equals(isIn, result, pos + "px should be " + good + ", not " + bad);
        }

        function checkResults()
        {
            // Test before (150), in (300) and after (450)
            checkResult(150, false);
            checkResult(300, true);
            checkResult(450, false);
        }

        function doTest()
        {
            if (window.testRunner) {
                internals.pauseAnimations(2);

                checkResults();
                test.done();
            }
            else {
                test.step_timeout(test.step_func_done(checkResults), 2000);
            }
        }

        function startTest()
        {
            document.getElementById("target").style.animationName = "anim";
            document.addEventListener('animationstart', test.step_func(doTest));
        }
   </script>
</head>
<body onload="startTest()">
    <div id="target"></div>
    <div class="dot" style="left:150px"></div>
    <div class="dot" style="left:300px"></div>
    <div class="dot" style="left:450px"></div>
</body>
</html>
chromium/third_party/blink/web_tests/animations/hit-testing/animation-hit-test-transform.html
