<!DOCTYPE HTML>
<html>
<head>
  <title>Test for form history on type=password</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>
  Test for form history on type=password
  (based on test_bug_511615.html)
<p id="display"></p>

<!-- we presumably can't hide the content for this test. -->
<div id="content">
  <datalist id="datalist1">
    <option>value10</option>
    <option>value11</option>
    <option>value12</option>
  </datalist>
  <form id="form1" onsubmit="return false;">
    <!-- Don't set the type to password until rememberSignons is false since we
         want to test when rememberSignons is false. -->
    <input  type="to-be-password" name="field1" list="datalist1">
    <button type="submit">Submit</button>
  </form>
  <!-- Same as form1 but with an insecure HTTP action -->
  <form id="form2" onsubmit="return false;" action="http://mochi.test/">
    <input  type="to-be-password" name="field1" list="datalist1">
    <button type="submit">Submit</button>
  </form>
</div>

<script>

add_setup(async () => {
  await SpecialPowers.pushPrefEnv({set: [["signon.rememberSignons", false]]});

  is(window.location.protocol, "https:", "This test must run on HTTPS");

  // Now that rememberSignons is false, create the password fields.
  document.querySelector("#form1 > input").type = "password";
  document.querySelector("#form2 > input").type = "password";

  await updateFormHistory([
    { op: "remove" },
    { op: "add", fieldname: "field1", value: "value1" },
    { op: "add", fieldname: "field1", value: "value2" },
    { op: "add", fieldname: "field1", value: "value3" },
    { op: "add", fieldname: "field1", value: "value4" },
    { op: "add", fieldname: "field1", value: "value5" },
    { op: "add", fieldname: "field1", value: "value6" },
    { op: "add", fieldname: "field1", value: "value7" },
    { op: "add", fieldname: "field1", value: "value8" },
    { op: "add", fieldname: "field1", value: "value9" },
  ]);
});

add_task(async function test_secure_noFormHistoryOrWarning() {
  const input = document.querySelector("#form1 input");

  // The autocomplete popup should not open under any circumstances on
  // type=password with password manager disabled.
  for (let triggerFn of [
    () => input.focus(),
    () => input.click(),
    () => synthesizeKey("KEY_ArrowDown"),
    () => synthesizeKey("KEY_PageDown"),
    () => synthesizeKey("KEY_Enter"),
    () => sendString("v "),
    () => synthesizeKey("KEY_Backspace"),
  ]) {
    info("Testing: " + triggerFn.toString());
    // We must wait for the entire timeout for each individual test, because the
    // next event in the list might prevent the popup from opening.
    await noPopupBy(triggerFn);
  }
});

add_task(async function test_insecure_focusWarning() {
  // Form 2 has an insecure action so should show the warning even if password manager is disabled.
  await openPopupOn("#form2 > input");
  ok(getMenuEntries()[0].includes("Logins entered here could be compromised"),
     "Check warning is first");
});
</script>
</body>
</html>
