summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_autocompleteinfo.html
blob: 5f8673d9ba6c9377e976138e72602bb251e31533 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!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", {}, ""],

  // 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"],

  // 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"],

  // 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"],

  // Five tokens (invalid)
  ["billing billing billing mobile tel", {}, ""],
  ["section-blue section-blue billing mobile tel", {}, ""],
];

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