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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
description("Test for validationMessage DOM property.");
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
var form = document.createElement("form");
document.body.appendChild(form);
// An input element with a pattern set and a mismatched value
var patternInput = document.createElement("input");
patternInput.name = "patternInput";
patternInput.pattern = "lorem ipsum";
patternInput.value = "lorem";
form.appendChild(patternInput);
debug("input patternMismatch: " + patternInput.validationMessage);
// A required input with an empty value
var requiredInput = document.createElement("input");
requiredInput.name = "requiredInput";
requiredInput.required = true;
form.appendChild(requiredInput);
debug("input valueMissing: " + requiredInput.validationMessage);
// A required textarea with an empty value
var requiredTextArea = document.createElement("textarea");
requiredTextArea.name = "requiredTextArea";
requiredTextArea.required = true;
form.appendChild(requiredTextArea);
debug("textarea valueMissing: " + requiredTextArea.validationMessage);
// A required select with an empty value
var requiredSelect = document.createElement("select");
requiredSelect.name = "requiredSelect";
requiredSelect.required = true;
form.appendChild(requiredSelect);
debug("select valueMissing: " + requiredSelect.validationMessage);
// A type=email input for the "type mismatch" flag
var emailInput = document.createElement("input");
emailInput.name = "emailInput";
emailInput.type = "email";
form.appendChild(emailInput);
emailInput.value = "incorrectValue";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "@xn--fsq.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@example*.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user\uD83D\uDE47@example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user\uD800@example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@.example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@example.com.";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "user@xn--z8ja1psq..com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.multiple = true;
emailInput.value = "foo@example.com,,bar@example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = ",foo@example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "foo@example.com,";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
emailInput.value = "foo@example.com,bar@..example.com";
debug("input typeMismatch for " + emailInput.value + ": " + emailInput.validationMessage);
var numberInput = document.createElement("input");
numberInput.type = "number";
form.appendChild(numberInput);
numberInput.focus();
document.execCommand("InsertText", false, "+++");
debug("input badInput: " + numberInput.validationMessage);
var nonRequiredBadInputMessage = numberInput.validationMessage;
debug("badInput and valueMissing:");
numberInput.required = true;
shouldBe("numberInput.validationMessage", "nonRequiredBadInputMessage");
debug("stepMismatch:");
numberInput.min = "0";
numberInput.step = "0.1";
numberInput.value = "0.11";
debug("input stepMismatch: " + numberInput.validationMessage);
numberInput.value = "0.19";
debug("input stepMismatch: " + numberInput.validationMessage);
numberInput.max = "10.02";
numberInput.value = "10.01";
debug("input stepMismatch: " + numberInput.validationMessage);
debug("tooLong:");
var inputWithMax = document.createElement("input");
inputWithMax.maxLength = 3;
inputWithMax.value = "abcdef";
document.body.appendChild(inputWithMax);
inputWithMax.focus();
eventSender.keyDown("backspace");
debug("input tooLong: " + inputWithMax.validationMessage);
// fancyX should be treated as 3 characters.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = "x\u0305\u0332";
inputWithMax.maxLength = 2;
inputWithMax.value = fancyX + "X";
inputWithMax.focus();
inputWithMax.setSelectionRange(4, 4);
eventSender.keyDown("backspace");
debug("input tooLong: " + inputWithMax.validationMessage);
// The following test might show English text + Arabic digits. It's expected and
// it never happens in products.
inputWithMax.lang = "ar-eg";
debug("input tooLong: " + inputWithMax.validationMessage);
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.focus();
sendString("a\nbc");
textarea.maxLength = 3;
debug("textarea tooLong: " + textarea.validationMessage);
debug("tooShort:");
var inputWithMin = document.createElement("input");
inputWithMin.minLength = 3;
inputWithMin.value = "ab";
document.body.appendChild(inputWithMin);
inputWithMin.focus();
eventSender.keyDown("backspace");
debug("input tooShort: " + inputWithMin.validationMessage);
// fancyX should be treated as 3 characters.
// U+0305 COMBINING OVERLINE
// U+0332 COMBINING LOW LINE
var fancyX = "x\u0305\u0332";
inputWithMin.minLength = 4;
inputWithMin.value = fancyX + "X";
inputWithMin.focus();
inputWithMin.setSelectionRange(4, 4);
eventSender.keyDown("backspace");
debug("input tooShort: " + inputWithMin.validationMessage);
// The following test might show English text + Arabic digits. It's expected and
// it never happens in products.
inputWithMin.lang = "ar-eg";
debug("input tooShort: " + inputWithMin.validationMessage);
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
textarea.focus();
sendString("a\n");
textarea.minLength = 4;
debug("textarea tooShort: " + textarea.validationMessage);
// A button can't be valited and, thus, has a blank validationMessage
var but = document.createElement("button");
but.name = "button";
form.appendChild(but);
shouldBe("but.validationMessage", "''");
// An input control with no name, so it can't be validated (willValidate = false)
var anoninput = document.createElement("input");
form.appendChild(anoninput);
shouldBe("anoninput.validationMessage", "''")
// Fieldsets can't be validated
var happyFieldset = document.createElement("fieldset");
happyFieldset.name = "fieldset";
form.appendChild(happyFieldset);
shouldBe("happyFieldset.validationMessage", "''");
// Select controls can't be validated too
var happySelect = document.createElement("select");
happySelect.name = "select";
form.appendChild(happySelect);
shouldBe("happySelect.validationMessage", "''");
// Output elements can't be validated
var happyOutput = document.createElement("output");
happySelect.name = "output";
form.appendChild(happyOutput);
shouldBe("happyOutput.validationMessage", "''");
// Object elements can't be validated
var happyObject = document.createElement("object");
happySelect.name = "object";
form.appendChild(happyObject);
shouldBe("happyObject.validationMessage", "''");
// Keygen controls can't be validated
var happyKeygen = document.createElement("keygen");
happySelect.name = "keygen";
form.appendChild(happyKeygen);
shouldBe("happyKeygen.validationMessage", "''");
form.remove();
</script>
</body>
</html>
|
