<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test for events while the form history popup is open</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="satchel_common.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Form History test: Test for keydown handler submitting the form
<p id="display"></p>

<div id="content">
  <form id="form1">
    <input  type="text" name="field1">
    <button type="submit">Submit</button>
  </form>
</div>

<script>

add_setup(async () => {
   await updateFormHistory([
      { op: "remove" },
      { op: "add", fieldname: "field1", value: "value1" },
   ]);
});

add_task(async function submitOnKeydownEnter() {
   const form = document.querySelector("#form1");
   const input = form.querySelector("input");
   const expectedValue = "value1";
   let beforeInputFired = false;
   const submitTested = new Promise(resolve => {

      function handleBeforeInput(aEvent) {
         info("BeforeInput");
         beforeInputFired = true;
         is(input.value, "value", "The value should've not been modified yet");
         ok(aEvent instanceof InputEvent,
            '"beforeinput" event should be dispatched with InputEvent interface');
         is(aEvent.cancelable, SpecialPowers.getBoolPref("dom.input_event.allow_to_cancel_set_user_input"),
            `"beforeinput" event should be cancelable unless it's supporessed by the pref`);
         is(aEvent.bubbles, true,
            '"beforeinput" event should always bubble');
         is(aEvent.inputType, "insertReplacementText",
            'inputType of "beforeinput" event should be "insertReplacementText"');
         is(aEvent.data, expectedValue,
            `data of "beforeinput" event should be "${expectedValue}"`);
         is(aEvent.dataTransfer, null,
            'dataTransfer of "beforeinput" event should be null');
         is(aEvent.getTargetRanges().length, 0,
            'getTargetRanges() of "beforeinput" event should return empty array');
      }

      function handleInput(e) {
         info("Input");
         ok(beforeInputFired, '"beforeinput" event should have been fired');
         is(input.value, expectedValue, "Check input value");
         ok(e instanceof InputEvent,
            '"input" event should be dispatched with InputEvent interface');
         is(e.cancelable, false, '"input" event should be never cancelable');
         is(e.bubbles, true, '"input" event should always bubble');
         is(e.inputType, "insertReplacementText", 'inputType of "input" event');
         is(e.data, expectedValue, "data of input event");
         is(e.dataTransfer, null, 'dataTransfer of "input" event');
         is(e.getTargetRanges().length, 0,
            'getTargetRanges() of "input" event should return empty array');
         removeEventListeners();
         resolve();
      }

      function removeEventListeners() {
         input.removeEventListener("beforeinput", handleBeforeInput, true);
         input.removeEventListener("input", handleInput, true);
      }

      input.addEventListener("beforeinput", handleBeforeInput, true);
      input.addEventListener("input", handleInput, true);
      input.addEventListener("keydown", function handleEnterDown(e) {
         if (e.keyCode != KeyEvent.DOM_VK_RETURN) {
            return;
         }
         info("Enter KeyDown");
         input.removeEventListener("keydown", handleEnterDown, true);
         form.submit();
      }, true);
      form.addEventListener("submit", () => {
         info("Submit");
         ok(false, "The form should not be submitted");
         removeEventListeners();
         resolve();
      }, { once: true });
   });

   await openPopupOn(input, { inputValue: "value" });

   synthesizeKey("KEY_ArrowDown");
   synthesizeKey("KEY_Enter"); // select the first entry in the popup

   await submitTested;
});

</script>
</body>
</html>
