<!DOCTYPE HTML>
<html>
<head>
  <title>TouchEvent Retargeting Tests</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>
<body>
  <h1>Touch retargeting manual test</h1>
  <div>This test requires touch input.</div>
  <div id="host"></div>
</body>
<script>
  var host = document.getElementById("host");
  var root = host.attachShadow({ mode: "open" });
  var target = document.createElement("h2");
  target.textContent = "Tap on THIS line of text";
  root.appendChild(target);

  var test_touch_retargeting = async_test("touch_retargeting");

  on_event(host, "touchstart", e => {
      test_touch_retargeting.step(() => {
          assert_equals(e.touches.length, 1, "touches.length is correct");
          assert_equals(e.touches[0].target, host, "touches[0] is retargeted to host");

          assert_equals(e.targetTouches.length, 1, "targetTouches.length is correct");
          assert_equals(e.targetTouches[0].target, host, "targetTouches[0] is retargeted to host");

          assert_equals(e.changedTouches.length, 1, "changedTouches.length is correct");
          assert_equals(e.changedTouches[0].target, host, "changedTouches[0] is retargeted to host");
      });
  });
  on_event(host, "touchend", e => test_touch_retargeting.done());
</script>
</html>
