1 files changed, 93 insertions, 0 deletions
diff --git a/toolkit/components/passwordmgr/test/mochitest/test_autocomplete_hasBeenTypePassword.html b/toolkit/components/passwordmgr/test/mochitest/test_autocomplete_hasBeenTypePassword.html
new file mode 100644
index 0000000000..0eb2beadc7
--- /dev/null
+++ b/toolkit/components/passwordmgr/test/mochitest/test_autocomplete_hasBeenTypePassword.html
@@ -0,0 +1,93 @@
+<!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>
+<p id="display"></p>
+<div id="content"></div>
+<pre id="test">
+Login Manager test: Test that passwords are autocompleted into fields that were
+previously type=password
+
+Usually the autocomplete login form only operates on password fields which are
+of type `password`. But when a password fields type has been changed to `text`
+via JavaScript, the password manager should still fill this form, because this
+is often used in real world forms to handle masking/unmasking of password
+fields.
+
+<template id="form1-template">
+  <form id="form1" action="https://www.example.com/formtest.js">
+    <input type="text" name="uname">
+    <input type="password" name="pword">
+  </form>
+</template>
+
+<script class="testbody" type="text/javascript">
+  const formTemplate = document.getElementById("form1-template");
+
+  add_setup(async () => {
+    const origin = window.location.origin;
+    await setStoredLoginsDuringTest(
+      [origin, origin, null, "user1", "pass1"],
+      [origin, origin, null, "user2", "pass2"]
+    );
+    listenForUnexpectedPopupShown();
+  });
+
+  add_named_task("autofill operates on a password field made text", async () => {
+    const form = setContentForTask(formTemplate);
+
+    // initial consume autofill event
+    await formAutofillResult(form.id);
+
+    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
+    form.uname.focus();
+    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
+    // value shouldn't update just by selecting
+    is(form.uname.value, "", "username is empty");
+    is(form.pword.value, "", "password is empty");
+
+    synthesizeKey("KEY_Enter");
+
+    const autofillResult1 = await formAutofillResult(form.id);
+    is(autofillResult1, "filled", "form has been filled");
+
+    is(form.uname.value, "user1", "username should match the login");
+    is(form.pword.value, "pass1", "password should match the login");
+
+    form.reset();
+
+    form.pword.focus();
+    await popupByArrowDown();
+    synthesizeKey("KEY_ArrowDown"); // first item
+    // value shouldn't update just by selecting
+    is(form.uname.value, "", "username is empty");
+    is(form.pword.value, "", "password is empty");
+
+    synthesizeKey("KEY_Enter");
+    is(form.uname.value, "", "username should stay empty");
+    is(form.pword.value, "pass1", "Password should match the login that was selected");
+  });
+</script>
+</pre>
+</body>
+</html>