1 files changed, 121 insertions, 0 deletions
diff --git a/browser/extensions/formautofill/test/mochitest/test_formautofill_preview_highlight.html b/browser/extensions/formautofill/test/mochitest/test_formautofill_preview_highlight.html
new file mode 100644
index 0000000000..b32b036c9c
--- /dev/null
+++ b/browser/extensions/formautofill/test/mochitest/test_formautofill_preview_highlight.html
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Test form autofill - preview and highlight</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script type="text/javascript" src="formautofill_common.js"></script>
+  <script type="text/javascript" src="satchel_common.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+Form autofill test: preview and highlight
+
+<script>
+/* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */
+
+"use strict";
+
+const MOCK_STORAGE = [
+  {
+    organization: "Sesame Street",
+    "street-address": "123 Sesame Street.",
+    tel: "+13453453456",
+  },
+  {
+    organization: "Mozilla",
+    "street-address": "331 E. Evelyn Avenue",
+  },
+  {
+    organization: "Tel org",
+    tel: "+12223334444",
+  },
+  {
+    organization: "Random Org",
+    "address-level1": "First Admin Level",
+    tel: "+13453453456",
+  },
+  {
+    organization: "readonly Org",
+    "address-level1": "First Admin Level",
+    tel: "+13453453456",
+    name: "John Doe",
+  },
+  {
+    organization: "test org",
+    "address-level2": "Not a Town",
+    tel: "+13453453456",
+    name: "John Doe",
+  }
+];
+
+
+initPopupListener();
+
+add_task(async function setup_storage() {
+  for (const storage of MOCK_STORAGE) {
+    await addAddress(storage);
+  }
+});
+
+add_task(async function check_preview() {
+  const focusedInput = await setInput("#organization", "");
+
+  synthesizeKey("KEY_ArrowDown");
+  await expectPopup();
+  await checkFormFieldsStyle(null);
+
+  for (let i = 0; i < MOCK_STORAGE.length; i++) {
+    info(`Checking organization: ${MOCK_STORAGE[i].organization} preview`);
+    synthesizeKey("KEY_ArrowDown");
+    await notifySelectedIndex(i);
+    await checkFormFieldsStyle(MOCK_STORAGE[i]);
+  }
+
+  // Navigate to the footer
+  synthesizeKey("KEY_ArrowDown");
+  await notifySelectedIndex(MOCK_STORAGE.length);
+  await checkFormFieldsStyle(null);
+
+  synthesizeKey("KEY_ArrowDown");
+  await notifySelectedIndex(-1);
+  await checkFormFieldsStyle(null);
+
+  focusedInput.blur();
+});
+
+add_task(async function check_filled_highlight() {
+  await triggerPopupAndHoverItem("#organization", 0);
+  // filled 1st address
+  await triggerAutofillAndCheckProfile(MOCK_STORAGE[0]);
+  await checkFormFieldsStyle(MOCK_STORAGE[0], false);
+});
+
+</script>
+
+<p id="display"></p>
+
+<div id="content">
+
+  <form id="form1">
+    <p>This is a basic form.</p>
+    <p><label>organization: <input id="organization" autocomplete="organization"></label></p>
+    <p><label>streetAddress: <input id="street-address" autocomplete="street-address"></label></p>
+    <p><label>tel: <input id="tel" autocomplete="tel"></label></p>
+    <p><label>country: <input id="country" autocomplete="country"></label></p>
+    <p><label>address-level1:
+      <select id="address-level1" autocomplete="address-level1">
+        <option>First Admin Level</option>
+        <option>Second Admin Level</option>
+      </select>
+    </label></p>
+    <p><label>full name: <input id="name" autocomplete="name" readonly value="UNCHANGED"></label></p>
+    <p><label>address-level2: <input id="address-level2" autocomplete="address-level2" disabled value="Town"></label></p>
+  </form>
+
+</div>
+
+<pre id="test"></pre>
+</body>
+</html>