test_autocomplete.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<!--

Test @autocomplete on <input>/<select>/<textarea>

-->

<head>

  <title>Test for @autocomplete</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>

<script>

"use strict";

var values = [

  // @autocomplete content attribute, expected IDL attribute value

  // Missing or empty attribute

  [undefined, ""],

  ["", ""],

  // One token

  ["on", "on"],

  ["On", "on"],

  ["off", "off"],

  ["OFF", "off"],

  ["name", "name"],

  [" name ", "name"],

  ["username", "username"],

  [" username ", "username"],

  ["cc-csc", ""],

  ["one-time-code", ""],

  ["language", ""],

  [" language ", ""],

  ["tel-extension", ""],

  ["foobar", ""],

  ["section-blue", ""],

  [" WEBAUTHN ", "webauthn"],

  // One token + WebAuthn credential type

  ["on webauthn", ""],

  ["off webauthn", ""],

  ["webauthn webauthn", ""],

  ["username WebAuthn", "username webauthn"],

  ["current-PASSWORD webauthn", "current-password webauthn"],

  // Two tokens

  ["on off", ""],

  ["off on", ""],

  ["username tel", ""],

  ["tel username ", ""],

  [" username tel ", ""],

  ["tel mobile", ""],

  ["tel shipping", ""],

  ["shipping tel", "shipping tel"],

  ["shipPING tel", "shipping tel"],

  ["mobile tel", "mobile tel"],

  ["  MoBiLe  TeL  ", "mobile tel"],

  ["pager impp", ""],

  ["fax tel-extension", ""],

  ["XXX tel", ""],

  ["XXX username", ""],

  ["name section-blue", ""],

  ["scetion-blue cc-name", ""],

  ["pager language", ""],

  ["fax url", ""],

  ["section-blue name", "section-blue name"],

  ["section-blue tel", "section-blue tel"],

  ["webauthn username", ""],

  // Two tokens + WebAuthn credential type

  ["fax url webauthn", ""],

  ["shipping tel webauthn", "shipping tel webauthn"],

  // Three tokens

  ["billing invalid tel", ""],

  ["___ mobile tel", ""],

  ["mobile foo tel", ""],

  ["mobile tel foo", ""],

  ["tel mobile billing", ""],

  ["billing mobile tel", "billing mobile tel"],

  ["  BILLing   MoBiLE   tEl  ", "billing mobile tel"],

  ["billing home tel", "billing home tel"],

  ["home section-blue tel", ""],

  ["setion-blue work email", ""],

  ["section-blue home address-level2", ""],

  ["section-blue shipping name", "section-blue shipping name"],

  ["section-blue mobile tel", "section-blue mobile tel"],

  ["shipping webauthn tel", ""],

  // Three tokens + WebAuthn credential type

  ["invalid mobile tel webauthn", ""],

  ["section-blue shipping name webauthn", "section-blue shipping name webauthn"],

  // Four tokens

  ["billing billing mobile tel", ""],

  ["name section-blue shipping home", ""],

  ["secti shipping work address-line1", ""],

  ["section-blue shipping home name", ""],

  ["section-blue shipping mobile tel", "section-blue shipping mobile tel"],

  ["section-blue webauthn mobile tel", ""],

  // Four tokens + WebAuthn credential type

  ["section-blue shipping home name webauthn", ""],

  ["section-blue shipping mobile tel webauthn", "section-blue shipping mobile tel webauthn"],

  // Five tokens (invalid)

  ["billing billing billing mobile tel", ""],

  ["section-blue section-blue billing mobile tel", ""],

  ["section-blue section-blue billing webauthn tel", ""],

  // Five tokens + WebAuthn credential type (invalid)

  ["billing billing billing mobile tel webauthn", ""],

];

var types = [undefined, "hidden", "text", "search"]; // Valid types for all non-multiline hints.

function checkAutocompleteValues(field, type) {

  for (var test of values) {

    if (typeof(test[0]) === "undefined")

      field.removeAttribute("autocomplete");

    else

      field.setAttribute("autocomplete", test[0]);

    is(field.autocomplete, test[1], "Checking @autocomplete for @type=" + type + " of: " + test[0]);

    is(field.autocomplete, test[1], "Checking cached @autocomplete for @type=" + type + " of: " + test[0]);

function start() {

  var inputField = document.getElementById("input-field");

  for (var type of types) {

    // Switch the input type

    if (typeof(type) === "undefined")

      inputField.removeAttribute("type");

    else

      inputField.type = type;

    checkAutocompleteValues(inputField, type || "");

  var selectField = document.getElementById("select-field");

  checkAutocompleteValues(selectField, "select");

  var textarea = document.getElementById("textarea");

  checkAutocompleteValues(textarea, "textarea");

  SimpleTest.finish();

SimpleTest.waitForExplicitFinish();

SpecialPowers.pushPrefEnv({"set": [["dom.forms.autocomplete.formautofill", true]]}, start);

</script>

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none">

  <form>

    <input id="input-field" />

    <select id="select-field" />

    <textarea id="textarea"></textarea>

  </form>

</div>

<pre id="test">

</pre>

</body>

</html>