summaryrefslogtreecommitdiffstats
path: root/dom/html/test/forms/test_autocomplete.html
blob: de92254386d10aac531dc4e573bcce48f4a3a6af (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
<!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", ""],

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

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

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

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

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>