<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=633602
-->
<head>
  <title>Bug 633602 - file_retargetMouseEvents.html</title>
  <script src="/tests/SimpleTest/SimpleTest.js">
  </script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="application/javascript" src="pointerlock_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=633602">
    Mozilla Bug 633602
  </a>

  <div id="parent">
    <div id="child" style="width: 100%; height: 100%;">
    </div>
  </div>

  <pre id="test">
    <script type="application/javascript">
      /*
       * Test for Bug 633602
       * Retarget mouse events to the locked element
       */

      SimpleTest.waitForExplicitFinish();

      function MouseEventStats() {
        this.mouseMove = false;
        this.mouseDown = false;
        this.mouseUp = false;
        this.mouseClick = false;
        this.mouseScroll = false;
        this.wheel = false;
      }

      var parent = document.getElementById("parent")
        , child = document.getElementById("child")
        , parentStats = new MouseEventStats()
        , childStats = new MouseEventStats()
        , mouseMoveIntervalID;

      function runTests () {
        is(childStats.mouseMove, false, "Child shound not receive mousemove event.");
        is(childStats.mouseDown, false, "Child should not receive mousedown event.");
        is(childStats.mouseUp, false, "Child should not receive mouseup event.");
        is(childStats.mouseClick, false, "Child should not receive click event.");
        is(childStats.mouseScroll, false, "Child should not receive DOMMouseScroll event.");
        is(childStats.wheel, false, "Child should not receive wheel event.");

        ok(parentStats.mouseMove, "Parent should receive mousemove event.");
        ok(parentStats.mouseDown, "Parent should receive mousedown event.");
        ok(parentStats.mouseUp, "Parent should receive mouseup event.");
        ok(parentStats.mouseClick, "Parent should receive click event.");
        ok(parentStats.mouseScroll, "Parent should receive DOMMouseScroll event.");
        ok(parentStats.wheel, "Parent should receive wheel event.");
      }


      /**
       * The event listeners for the child element shouldn't be fired
       * Mouse events will only happen when the pointer is locked
       * and if the pointer is locked all the mouse events should be
       * retargetted to the locked element
       **/
      var childMoveTest = function() {
        clearInterval(mouseMoveIntervalID);
        childStats.mouseMove = true;
      }

      var childDownTest = function() {
        childStats.mouseDown = true;
      };

      var childUpTest = function() {
        childStats.mouseUp = true;
      };

      var childClickTest = function() {
        childStats.mouseClick = true;
      };

      var childScrollTest = function() {
        childStats.mouseScroll = true;
      };

      var childWheelTest = function() {
        childStats.wheel = true;
      };

      //  Event listeners for the parent element
      var startMouseTests = function() {
        info("Got parent mousemove");
        clearInterval(mouseMoveIntervalID);
        parent.removeEventListener("mousemove", startMouseTests);
        parent.addEventListener("DOMMouseScroll", parentScrollTest);
        child.addEventListener("DOMMouseScroll", childScrollTest);
        SimpleTest.executeSoon(function () {
          synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10,
                                        'deltaMode': WheelEvent.DOM_DELTA_LINE});
        });
      };

      var parentScrollTest = function (e) {
        info("Got parent DOMMouseScroll");
        parentStats.mouseScroll = true;
        parent.removeEventListener("DOMMouseScroll", parentScrollTest);
        child.removeEventListener("DOMMouseScroll", childScrollTest);
        parent.addEventListener("wheel", parentWheelTest);
        child.addEventListener("wheel", childWheelTest);
        SimpleTest.executeSoon(function () {
          synthesizeWheel(child, 5, 5, {'deltaY': 10, 'lineOrPageDeltaY': 10,
                                        'deltaMode': WheelEvent.DOM_DELTA_LINE});
        });
      };

      var parentWheelTest = function (e) {
        info("Got parent wheel");
        parentStats.wheel = true;
        parent.removeEventListener("wheel", parentWheelTest);
        child.removeEventListener("wheel", childWheelTest);
        parent.addEventListener("mousedown", parentDownTest);
        child.addEventListener("mousedown", childDownTest);
        SimpleTest.executeSoon(function () {
          synthesizeMouseAtCenter(child, {type: "mousedown"}, window);
        });
      };

      var parentDownTest = function (e) {
        info("Got parent mousedown");
        parentStats.mouseDown = true;
        parent.removeEventListener("mousedown", parentDownTest);
        child.removeEventListener("mousedown", childDownTest);
        parent.addEventListener("mouseup", parentUpTest);
        child.addEventListener("mouseup", childUpTest);
        SimpleTest.executeSoon(function () {
          synthesizeMouseAtCenter(child, {type: "mouseup"}, window);
        });
      };

      var parentUpTest = function (e) {
        info("Got parent mouseup");
        parentStats.mouseUp = true;
        parent.removeEventListener("mouseup", parentUpTest);
        child.removeEventListener("mouseup", childUpTest);
        parent.addEventListener("click", parentClickTest);
        child.addEventListener("click", childClickTest);
        SimpleTest.executeSoon(function () {
          synthesizeMouseAtCenter(child, {}, window);
        });
      };

      var parentClickTest = function (e) {
        info("Got parent click");
        parentStats.mouseClick = true;
        parent.removeEventListener("click", parentClickTest);
        child.removeEventListener("click", childClickTest);
        parent.addEventListener("mousemove", parentMoveTest);
        child.addEventListener("mousemove", childMoveTest);
        SimpleTest.executeSoon(function () {
          synthesizeMouseAtCenter(child, {type: "mousemove"}, window);
        });
      };

      var parentMoveTest = function (e) {
        info("Got parent mousemove");
        parentStats.mouseMove = true;
        parent.removeEventListener("mousemove", parentMoveTest);
        child.removeEventListener("mousemove", childMoveTest);
        SimpleTest.executeSoon(function () {
          info("Exit fullscreen");
          addFullscreenChangeContinuation("exit", function() {
            info("Got fullscreenchange for exiting");
            runTests();
            SimpleTest.finish();
          });
          document.exitFullscreen();
        });
      }

      document.addEventListener("pointerlockchange", function (e) {
        if (document.pointerLockElement === parent) {
          info("Got pointerlockchange for entering");
          parent.addEventListener("mousemove", startMouseTests);
          child.addEventListener("mousemove", childMoveTest);
          // Bug 1357082
          // Retrigger synthesizeMouseAtCenter until it actually happens.
          mouseMoveIntervalID = setInterval(() => {
            synthesizeMouseAtCenter(parent, {type: "mousemove"}, window);
          }, 100);
        } else {
          info("Got pointerlockchange for exiting");
        }
      });

      function start() {
        info("Requesting fullscreen on parent");
        addFullscreenChangeContinuation("enter", function() {
          info("Got fullscreenchange for entering");
          parent.requestPointerLock();
        });
        parent.requestFullscreen();
      }
    </script>
  </pre>
</body>
</html>
