test_autocompleteinfo.html

<!DOCTYPE html>

<html>

<!--

Test getAutocompleteInfo() on <input> and <select>

-->

<head>

  <title>Test for getAutocompleteInfo()</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>

</head>

<body>

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

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

  <form>

    <input id="input"/>

    <select id="select" />

  </form>

</div>

<pre id="test">

<script>

"use strict";

var values = [

  // Missing or empty attribute

  [undefined, {}, ""],

  ["", {}, ""],

  // One token

  ["on", {fieldName: "on" }, "on"],

  ["On", {fieldName: "on" }, "on"],

  ["off", {fieldName: "off", canAutomaticallyPersist: false}, "off" ],

  ["name", {fieldName: "name" }, "name"],

  [" name ", {fieldName: "name" }, "name"],

  ["username", {fieldName: "username"}, "username"],

  [" username ", {fieldName: "username"}, "username"],

  ["current-password", {fieldName: "current-password", canAutomaticallyPersist: false}, "current-password"],

  ["new-password", {fieldName: "new-password", canAutomaticallyPersist: false}, "new-password"],

  ["cc-number", {fieldName: "cc-number", canAutomaticallyPersist: false}, "cc-number"],

  ["cc-csc", {fieldName: "cc-csc", canAutomaticallyPersist: false}, ""],

  ["one-time-code", {fieldName: "one-time-code", canAutomaticallyPersist: false}, ""],

  ["language", {fieldName: "language"}, ""],

  [" language ", {fieldName: "language"}, ""],

  ["tel-extension", {fieldName: "tel-extension"}, ""],

  ["foobar", {}, ""],

  ["section-blue", {}, ""],

  [" WEBAUTHN ", {fieldName: "webauthn", credentialType: "webauthn"}, "webauthn"],

  // One token + WebAuthn credential type

  ["on webauthn", {}, ""],

  ["off webauthn", {}, ""],

  ["webauthn webauthn", {}, ""],

  ["username WebAuthn", {fieldName: "username", credentialType: "webauthn"}, "username webauthn"],

  ["current-PASSWORD webauthn", {fieldName: "current-password", credentialType: "webauthn", canAutomaticallyPersist: false}, "current-password webauthn"],

  // Two tokens

  ["on off", {}, ""],

  ["off on", {}, ""],

  ["username tel", {}, ""],

  ["tel username ", {}, ""],

  [" username tel ", {}, ""],

  ["tel mobile", {}, ""],

  ["tel shipping", {}, ""],

  ["shipping tel", {addressType: "shipping", fieldName: "tel"}, "shipping tel"],

  ["shipPING tel", {addressType: "shipping", fieldName: "tel"}, "shipping tel"],

  ["mobile tel", {contactType: "mobile", fieldName: "tel"}, "mobile tel"],

  ["  MoBiLe  TeL  ", {contactType: "mobile", fieldName: "tel"}, "mobile tel"],

  ["pager impp", {contactType: "pager", fieldName: "impp"}, ""],

  ["fax tel-extension", {contactType: "fax", fieldName: "tel-extension"}, ""],

  ["XXX tel", {}, ""],

  ["XXX username", {}, ""],

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

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

  ["pager language", {}, ""],

  ["fax url", {}, ""],

  ["section-blue name", {section: "section-blue", fieldName: "name"}, "section-blue name"],

  ["section-blue tel", {section: "section-blue", fieldName: "tel"}, "section-blue tel"],

  ["webauthn username", {}, ""],

  // Two tokens + WebAuthn credential type

  ["fax url webauthn", {}, ""],

  ["shipping tel webauthn", {addressType: "shipping", fieldName: "tel", credentialType: "webauthn"}, "shipping tel webauthn"],

  // Three tokens

  ["billing invalid tel", {}, ""],

  ["___ mobile tel", {}, ""],

  ["mobile foo tel", {}, ""],

  ["mobile tel foo", {}, ""],

  ["tel mobile billing", {}, ""],

  ["billing mobile tel", {addressType: "billing", contactType: "mobile", fieldName: "tel"}, "billing mobile tel"],

  ["  BILLing   MoBiLE   tEl  ", {addressType: "billing", contactType: "mobile", fieldName: "tel"}, "billing mobile tel"],

  ["billing home tel", {addressType: "billing", contactType: "home", fieldName: "tel"}, "billing home tel"],

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

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

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

  ["section-blue shipping name", {section: "section-blue", addressType: "shipping", fieldName: "name"}, "section-blue shipping name"],

  ["section-blue mobile tel", {section: "section-blue", contactType: "mobile", fieldName: "tel"}, "section-blue mobile tel"],

  ["shipping webauthn tel", {}, ""],

  // Three tokens + WebAuthn credential type

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

  ["section-blue shipping name webauthn", {section: "section-blue", addressType: "shipping", fieldName: "name", credentialType: "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: "section-blue", addressType: "shipping", contactType: "mobile", fieldName: "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: "section-blue", addressType: "shipping", contactType: "mobile", fieldName: "tel", credentialType: "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 autocompleteInfoFieldIds = ["input", "select"];

var autocompleteEnabledTypes = ["hidden", "text", "search", "url", "tel",

                                "email", "password", "date", "time", "number",

                                "range", "color"];

var autocompleteDisabledTypes = ["reset", "submit", "image", "button", "radio",

                                 "checkbox", "file"];

function testInputTypes() {

  let field = document.getElementById("input");

  for (var type of autocompleteEnabledTypes) {

    testAutocomplete(field, type, true);

  for (var type of autocompleteDisabledTypes) {

    testAutocomplete(field, type, false);

  // Clear input type attribute.

  field.removeAttribute("type");

function testAutocompleteInfoValue(aEnabled) {

  for (var fieldId of autocompleteInfoFieldIds) {

    let field = document.getElementById(fieldId);

    for (var test of values) {

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

        field.removeAttribute("autocomplete");

      else

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

      var info = field.getAutocompleteInfo();

      if (aEnabled) {

        // We need to consider if getAutocompleteInfo() is valid,

        // but @autocomplete is invalid case, because @autocomplete

        // has smaller set of values.

        is(field.autocomplete, test[2], "Checking @autocomplete of: " + test[0]);

      is(info.section, "section" in test[1] ? test[1].section : "",

        "Checking autocompleteInfo.section for " + field + ": " + test[0]);

      is(info.addressType, "addressType" in test[1] ? test[1].addressType : "",

        "Checking autocompleteInfo.addressType for " + field + ": " + test[0]);

      is(info.contactType, "contactType" in test[1] ? test[1].contactType : "",

        "Checking autocompleteInfo.contactType for " + field + ": " + test[0]);

      is(info.fieldName, "fieldName" in test[1] ? test[1].fieldName : "",

        "Checking autocompleteInfo.fieldName for " + field + ": " + test[0]);

      is(info.credentialType, "credentialType" in test[1] ? test[1].credentialType: "",

        "Checking autocompleteInfo.credentialType for " + field + ": " + test[0]);

      is(info.canAutomaticallyPersist, "canAutomaticallyPersist" in test[1] ? test[1].canAutomaticallyPersist : true,

        "Checking autocompleteInfo.canAutomaticallyPersist for " + field + ": " + test[0]);

function testAutocomplete(aField, aType, aEnabled) {

  aField.type = aType;

  if (aEnabled) {

    ok(aField.getAutocompleteInfo() !== null, "getAutocompleteInfo shouldn't return null");

  } else {

    is(aField.getAutocompleteInfo(), null, "getAutocompleteInfo should return null");

// getAutocompleteInfo() should be able to parse all tokens as defined

// in the spec regardless of whether dom.forms.autocomplete.formautofill pref

// is on or off.

add_task(async function testAutocompletePreferenceEnabled() {

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

  testAutocompleteInfoValue(true);

});

add_task(async function testAutocompletePreferenceDisabled() {

  await SpecialPowers.pushPrefEnv({"set": [["dom.forms.autocomplete.formautofill", false]]}, testInputTypes);

  testAutocompleteInfoValue(false);

});

</script>

</pre>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: