test_submit_on_keydown_enter.html

Enable keyboard shortcuts

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