<!doctype html>
<html>
    <head>
        <title>Pointer Events properties tests</title>
        <meta name="timeout" content="long">
        <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>
        <!-- Additional helper script for common checks across event types -->
        <script type="text/javascript" src="../pointerevent_support.js"></script>
        <style>
          #testContainer {
            touch-action: none;
            -webkit-user-select: none;
            position: relative;
          }
          #box1 {
            top: 30px;
            left: 50px;
            background: black;
          }
          #box2 {
            top: 70px;
            left: 250px;
            background: red;
          }
          #innerFrame {
            top: 10px;
            left: 100px;
          }
          #square2 {
            visibility: block;
          }
        </style>
        <script>
            var expectedPointerId = NaN;
            var lastScreenX = null;
            var lastScreenY = null;
            var actionsPromiseMouse;
            var actionsPromiseTouch;
            var actionsPromisePen;

            function resetTestState() {
                lastScreenX = null;
                lastScreenY = null;
            }

            var nonPointermoveEventList = [
                  "pointerover",
                  "pointerenter",
                  "pointerdown",
                  "pointerup",
                  "pointerout",
                  "pointerleave",
                  "gotpointercapture",
                  "lostpointercapture"];

            function injectInput(pointerType) {
                var pointerId = pointerType + "Pointer1";
                return new test_driver.Actions()
                                     .addPointer(pointerId, pointerType)
                                     .pointerMove(0, 0, {origin: box1})
                                     .pointerDown()
                                     .pointerMove(20, 30, {origin: box1})
                                     .pointerMove(50, 40, {origin: box1})
                                     .pointerMove(80, 30, {origin: box1})
                                     .pointerMove(110, 20, {origin: box1})
                                     .pointerMove(0, 0, {origin: box2})
                                     .pointerUp()
                                     .send();
            }

            function run() {
                var test_pointerEvent = setup_pointerevent_test("pointerevent attributes", ALL_POINTERS);

                [document, document.getElementById('innerFrame').contentDocument].forEach(function(element) {
                  nonPointermoveEventList.forEach(function(eventName) {
                    on_event(element, eventName, function (event) {
                      if (lastScreenX && lastScreenY) {
                        test_pointerEvent.step(function() {
                          assert_equals(event.movementX, 0, "movementX should be 0 for event other than pointermove.");
                          assert_equals(event.movementY, 0, "movementY should be 0 for event other than pointermove.");
                        });
                        // Reset when entering the new frame.
                        if (event.type == "pointerenter") {
                          lastScreenX = null;
                          lastScreenY = null;
                        }
                      }
                    });
                  });

                  on_event(element, 'pointermove', function (event) {
                    test_pointerEvent.step(function() {
                      if (lastScreenX && lastScreenY) {
                        assert_equals(event.movementX, event.screenX - lastScreenX, "movementX should be the delta between current event's and last event's screenX");
                        assert_equals(event.movementY, event.screenY - lastScreenY, "movementY should be the delta between current event's and last event's screenY");
                      }
                    });
                    lastScreenX = event.screenX;
                    lastScreenY = event.screenY;
                  });
                });
                on_event(document.querySelector('#box1'), 'pointerdown', function(event) {
                  event.target.releasePointerCapture(event.pointerId);
                  test_pointerEvent.step(function() {
                      assert_equals(event.pointerType, expectedPointerType, "Use the instructed pointer type.");
                  });
                  lastScreenX = event.screenX;
                  lastScreenY = event.screenY;
                });
                on_event(document.querySelector('#box2'), 'pointerup', function(event) {
                  // Make sure the test finishes after all the input actions are completed.
                  if (expectedPointerType == "mouse") {
                    actionsPromiseTouch = actionsPromiseMouse.then(function(){
                      test_pointerEvent.done();
                      return injectInput("touch");
                    });
                  } else if (expectedPointerType == "touch") {
                    actionsPromisePen = actionsPromiseTouch.then(function(){
                      test_pointerEvent.done();
                      return injectInput("pen");
                    });
                  } else {
                    actionsPromisePen.then( () => {
                      test_pointerEvent.done();
                    });
                  }
                });

                // Inject mouse input
                actionsPromiseMouse = injectInput("mouse");
            }

        </script>
    </head>
    <body onload="run()">
        <h1>Pointer Events movementX/Y attribute test</h1>
        <h2 id="pointerTypeDescription"></h2>
        <h4>
            Test Description: This test checks the movementX/Y properties of pointer events.
            <ol>
                 <li>Press down on the black square.</li>
                 <li>Move your pointer  slowly along a straight line to the red square.</li>
                 <li>Release the pointer when you are over the red square.</li>
            </ol>

            Test passes if the proper behavior of the events is observed.
        </h4>
        <div id="testContainer">
            <div id="box1" class="square"></div>
            <div id="box2" class="square"></div>
            <iframe id="innerFrame" src="resources/pointerevent_movementxy-iframe.html"></iframe>
        </div>
        <div class="spacer"></div>
    </body>
</html>