test_autocomplete_hasBeenTypePassword.html

Enable keyboard shortcuts

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