1 files changed, 64 insertions, 0 deletions
diff --git a/toolkit/components/satchel/test/test_datalist_with_caching.html b/toolkit/components/satchel/test/test_datalist_with_caching.html
new file mode 100644
index 0000000000..9366d69ff6
--- /dev/null
+++ b/toolkit/components/satchel/test/test_datalist_with_caching.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Test for Form History Autocomplete</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.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 History test: form field autocomplete
+<p id="display"></p>
+
+<!-- we presumably can't hide the content for this test. -->
+<div id="content">
+
+  <!-- normal, basic form -->
+  <form id="form1" onsubmit="return false;">
+    <input list="suggest" type="text" name="field1">
+    <button type="submit">Submit</button>
+  </form>
+
+  <datalist id="suggest">
+    <option value="First"></option>
+    <option value="Second"></option>
+    <option value="Secomundo"></option>
+  </datalist>
+</div>
+
+<script>
+add_setup(async () => {
+  await updateFormHistory([
+    { op: "remove" },
+    { op: "add", fieldname: "field1", value: "Sec" },
+  ]);
+});
+
+add_task(async function datalist_with_caching() {
+  const { input } = await openPopupOn("#form1 > input");
+  assertAutocompleteItems("Sec", "First", "Second", "Secomundo");
+  assertValueAfterKeys(
+    input,
+    ["KEY_ArrowDown", "KEY_Enter"],
+    "Sec");
+});
+
+add_task(async function filtering_datalist_with_caching() {
+  const { input } = await openPopupOn("#form1 > input");
+  sendString("Sec");
+  await notifyMenuChanged(3);
+  assertAutocompleteItems("Sec", "Second", "Secomundo");
+
+  sendString("o");
+  await notifyMenuChanged(2);
+  assertAutocompleteItems("Second", "Secomundo");
+  assertValueAfterKeys(
+    input,
+    ["KEY_ArrowDown", "KEY_Enter"],
+    "Second");
+});
+
+</script>
+</body>
+</html>