<!doctype html>
<html>
  <head>
    <title>touch-action: inherit from parent: none</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="/resources/testdriver.js"></script>
    <script src="/resources/testdriver-actions.js"></script>
    <script src="/resources/testdriver-vendor.js"></script>
    <script src="pointerevent_support.js"></script>
    <style>
      .scroller {
        touch-action: none;
      }
      #scrollTarget {
        margin: 10px;
        width: 125vh;
        height: 125vh;
      }
    </style>
  </head>
  <body>
    <h1>Pointer Events: effective touch-action is "none" when parent has "none"
        and target has "auto"</h1>
    <h4 id="desc">
        Try to scroll DOWN then RIGHT from inside blue rectangle.
        Tap Complete button under the rectangle when done.
        Expectation: no panning
    </h4>
    <p>Note: this test is for touch-devices only</p>
    <div class="scroller" id="target0">
        <div id="scrollTarget">
            Try to scroll DOWN then RIGHT from here.
        </div>
    </div>
    <input type="button" id="btnComplete" value="Complete test">
    <h1>behavior: none</h1>
    <div id="complete-notice">
      <p>The following pointer types were detected:
         <span id="pointertype-log"></span>.</p>
    </div>
    <div id="log"></div>
  </body>
  <script type='text/javascript'>
    window.onload = async () => {
      const target0 = document.getElementById("target0");
      const btnComplete = document.getElementById("btnComplete");

      assert_equals(getComputedStyle(target0).touchAction,'none',
                    'Expect touch-action:none');

      let pointerup_received = false;
      let pointercancel_received = false;
      let scroll_received = false;

      target0.addEventListener("pointerup",
                               () => pointerup_received = true);
      target0.addEventListener("pointercancel",
                               () => pointercancel_received = true);
      target0.addEventListener("scroll",
                               () => scroll_received = true);

      let detected_pointertypes = {};
      add_completion_callback(showPointerTypes);

      promise_test(async () => {
        const button_complete_click = getEvent("click", btnComplete);

        await touchScrollInTarget(scrollTarget, 'down');
        await touchScrollInTarget(scrollTarget, 'right');
        await clickInTarget("touch", btnComplete);
        await button_complete_click;

        assert_true(
            pointerup_received,
            "expected pointerup event with scroll gestures on " +
            "touch-action:none");
        assert_false(
            pointercancel_received,
            "unexpected pointercancel event with scroll gestures on " +
            "touch-action:none");
        assert_false(
            scroll_received,
            "unexpected scroll event with scroll gestures on " +
            "touch-action:none");
        assert_equals(target0.scrollLeft, 0,
                      "expected scrollLeft 0 in the end of the test");
        assert_equals(target0.scrollTop, 0,
                      "expected scrollTop 0 in the end of the test");

        updateDescriptionComplete();
      }, "touch-action attribute test");
    };
  </script>
</html>
