test_datalist_with_caching.html

Enable keyboard shortcuts

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