1 files changed, 50 insertions, 0 deletions
diff --git a/toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight_username_only_form.html b/toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight_username_only_form.html
new file mode 100644
index 0000000000..67892a9ea4
--- /dev/null
+++ b/toolkit/components/passwordmgr/test/mochitest/test_autofill_highlight_username_only_form.html
@@ -0,0 +1,50 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test that filling a username into a username-only form does highlight the username element</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.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">
+<pre id="test">
+<script>
+add_setup(async () => {
+  await setStoredLoginsAsync(
+    [window.location.origin, "https://autofill", null, "user1", "pass1", "", ""]
+  );
+});
+
+add_task(async function test_field_highlight_on_autofill() {
+  let win = window.open("about:blank");
+  SimpleTest.registerCleanupFunction(() => win.close());
+  await loadFormIntoWindow(window.location.origin, `
+    <form id="form1" action="https://autofill" onsubmit="return false;">
+      <input  type="text" id="uname" autocomplete="username">
+      <button type="submit">Submit</button>
+    </form>`, win);
+
+  await SpecialPowers.spawn(win, [], async function() {
+    let EventUtils = ContentTaskUtils.getEventUtils(this.content);
+    let doc = this.content.document;
+    let username = doc.getElementById("uname");
+    ok(username.matches(":autofill"),
+          "Highlight was successfully applied to the username field on page load autofill");
+
+    // Test that initiating a change on the input value will remove the highlight. We check by pressing
+    // the tab key after backspace(by shifting focus to the next element) because the tab key is known to
+    // cause a bug where the highlight is applied once again.
+    username.focus();
+    await EventUtils.synthesizeKey("KEY_Backspace", {}, this.content);
+    await EventUtils.synthesizeKey("KEY_Tab", {}, this.content);
+
+    ok(!username.matches(":autofill"), "Highlight was successfully removed on change in value of username input element");
+  });
+});
+</script>
+</body>
+</html>