<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Test that passwords are autocompleted into fields that were previously type=password</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="../../../satchel/test/satchel_common.js"></script>
  <script type="text/javascript" src="pwmgr_common.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
Login Manager test: Test that passwords are autocompleted into fields that were previously type=password
<p id="display"></p>

<!-- we presumably can't hide the content for this test. -->
<div id="content"></div>
<pre id="test">
<script class="testbody" type="text/javascript">

// Restore the form to the default state.
function restoreForm(form) {
  form.uname.value = "";
  form.pword.value = "";
  form.uname.focus();
}

function spinEventLoop() {
  return Promise.resolve();
}

add_setup(async () => {
  const origin = window.location.origin;
  await setStoredLoginsAsync(
    [origin, origin, null, "user1", "pass1"],
    [origin, origin, null, "user2", "pass2"]
  );
  listenForUnexpectedPopupShown();
});

add_task(async function test_form1_initial_empty() {
  const form = createLoginForm({
    action: "https://www.example.com/formtest.js"
  });

  await SimpleTest.promiseFocus(window);

  // Make sure initial form is empty.
  checkLoginForm(form.uname, "", form.pword, "");
  const popupState = await getPopupState();
  is(popupState.open, false, "Check popup is initially closed");
});

add_task(async function test_form1_password_to_type_text() {
  const form = createLoginForm({
    action: "https://www.example.com/formtest.js"
  });

  await SimpleTest.promiseFocus(window);
  info("Setting the password field type to text");
  // This is similar to a site implementing their own password visibility/unmasking toggle
  form.pword.type = "text";

  // Trigger autocomplete popup
  restoreForm(form);
  const autocompleteItems =  await popupByArrowDown();

  const popupState = await getPopupState();
  is(popupState.selectedIndex, -1, "Check no entries are selected upon opening");

  checkAutoCompleteResults(autocompleteItems, ["user1", "user2"], window.location.host,
    "Check all menuitems are displayed correctly.");

  synthesizeKey("KEY_ArrowDown"); // first item
  checkLoginForm(form.uname, "", form.pword, ""); // value shouldn't update just by selecting

  synthesizeKey("KEY_Enter");

  await promiseFormsProcessedInSameProcess();
  is(form.uname.value, "user1", "username should match the login, not the password");
  is(form.pword.value, "pass1", "password should match the login, not the username");
  checkLoginForm(form.uname, "user1", form.pword, "pass1");

  restoreForm(form);
  info("Focusing the password field");
  form.pword.focus();

  await popupByArrowDown();

  synthesizeKey("KEY_ArrowDown"); // first item
  checkLoginForm(form.uname, "", form.pword, ""); // value shouldn't update just by selecting

  synthesizeKey("KEY_Enter");
  await spinEventLoop();
  is(form.pword.value, "pass1", "Password should match the login that was selected");
  checkLoginForm(form.uname, "", form.pword, "pass1");
});
</script>
</pre>
</body>
</html>
