<!doctype html>
<html>
  <head>
    <title>Pointer Event: touch-action in rotated divs</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link rel="author" title="Google" href="http://www.google.com "/>
    <link rel="help" href="https://w3c.github.io/pointerevents/#declaring-candidate-regions-for-default-touch-behaviors" />
    <meta name="assert" content="Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space"/>
    <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script type="text/javascript" src="pointerevent_support.js"></script>
    <script type="text/javascript">
      var event_log = [];

      function resetTestState() {
        event_log = [];
      }

      function run() {
        var current_test = 0;
        var test_params = [
          {
            test_obj: setup_pointerevent_test("'touch-action: pan-x' in a rotated div", ["touch"]),
            touch_action: "pan-x",
            expected_events: "pointercancel, pointercancel, pointerup, pointerup"
          },
          {
            test_obj: setup_pointerevent_test("'touch-action: pan-y' in a rotated div", ["touch"]),
            touch_action: "pan-y",
            expected_events: "pointerup, pointerup, pointercancel, pointercancel"
          },
        ];

        function setCurrentTouchAction() {
          document.getElementById("target").style.touchAction = test_params[current_test].touch_action;
        }

        setCurrentTouchAction();

        on_event(document.getElementById("btnDone"), "click", function() {
          test_params[current_test].test_obj.step(function () {
            assert_equals(event_log.join(", "), test_params[current_test].expected_events);
          });

          event_log = [];

          test_params[current_test++].test_obj.done();
          if (current_test < 2)
            setCurrentTouchAction();
        });

        ["pointerup", "pointercancel"].forEach(function(eventName) {
          on_event(document.getElementById("target"), eventName, function (event) {
            event_log.push(event.type);
          });
        });
      }
    </script>
    <style>
      #target {
        width: 200px;
        height: 200px;
        margin: 10px;
        float: left;
        touch-action: none;
        background-color: green;
        transform: rotate(-90deg);
      }

      #btnDone {
        padding: 20px;
      }
    </style>
  </head>
  <body onload="run()">
    <h1>Pointer Event: touch-action in rotated divs</h1>
    <h2 id="pointerTypeDescription"></h2>
    <h4>
      Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space
    </h4>
    <ol>
      <li>Make 4 separate touch drags on Green, in this order: drag UP, then drag DOWN, then drag LEFT, then drag RIGHT.</li>
      <li>Tap on Done.</li>
      <li>Repeat the touch drags once again, in the same order.</li>
      <li>Tap on Done.</li>
    </ol>
    <div id="target"></div>
    <input type="button" id="btnDone" value="Done" />
    <div id="log" />
  </body>
</html>