pointerevent_touch-action-inherit_parent-none_touch.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /pointerevents/pointerevent_touch-action-inherit_parent-none_touch.html - WPT Dashboard Interop Dashboard

<!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>