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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=605125
-->
<head>
<title>Test for Bug 605125</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=605125">Mozilla Bug 605125</a>
<p id="display"></p>
<div id="content">
<input>
<textarea></textarea>
<select>
<option value="">foo</option>
<option>bar</option>
</select>
<select multiple>
<option value="">foo</option>
<option>bar</option>
</select>
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 605125 **/
function checkPseudoClass(aElement, aExpected)
{
is(aElement.matches(":user-valid"), aExpected,
"matches(':user-valid') should return " + aExpected + " for " + aElement.outerHTML);
}
function checkElement(aElement)
{
checkPseudoClass(aElement, false);
// Focusing while :user-valid doesn't apply,
// the pseudo-class should not apply while typing.
aElement.focus();
checkPseudoClass(aElement, false);
// with keys
sendString("f");
checkPseudoClass(aElement, false);
synthesizeKey("KEY_Backspace");
checkPseudoClass(aElement, false);
// with .value
aElement.value = 'f';
checkPseudoClass(aElement, false);
aElement.value = '';
checkPseudoClass(aElement, false);
aElement.blur();
checkPseudoClass(aElement, true);
// Focusing while :user-valid applies,
// the pseudo-class should apply while typing if appropriate.
aElement.focus();
checkPseudoClass(aElement, true);
// with keys
sendString("f");
checkPseudoClass(aElement, true);
synthesizeKey("KEY_Backspace");
checkPseudoClass(aElement, true);
// with .value
aElement.value = 'f';
checkPseudoClass(aElement, true);
aElement.value = '';
checkPseudoClass(aElement, true);
aElement.blur();
aElement.required = true;
checkPseudoClass(aElement, false);
// Focusing while :user-invalid applies,
// the pseudo-class should apply while typing if appropriate.
aElement.focus();
checkPseudoClass(aElement, false);
// with keys
sendString("f");
checkPseudoClass(aElement, true);
synthesizeKey("KEY_Backspace");
checkPseudoClass(aElement, false);
// with .value
aElement.value = 'f';
checkPseudoClass(aElement, true);
aElement.value = '';
checkPseudoClass(aElement, false);
}
function checkSelectElement(aElement)
{
checkPseudoClass(aElement, false);
if (!aElement.multiple && navigator.platform.startsWith("Mac")) {
// Arrow key on macOS opens the popup.
return;
}
// Focusing while :user-valid doesn't apply,
// the pseudo-class should not apply while changing selection.
aElement.focus();
checkPseudoClass(aElement, false);
synthesizeKey("KEY_ArrowDown");
checkPseudoClass(aElement, true);
// Focusing while :user-valid applies,
// the pseudo-class should apply while changing selection if appropriate.
aElement.focus();
checkPseudoClass(aElement, true);
aElement.selectedIndex = 1;
checkPseudoClass(aElement, true);
aElement.selectedIndex = 0;
checkPseudoClass(aElement, true);
aElement.blur();
aElement.required = true;
// select set with multiple is only invalid if no option is selected
if (aElement.multiple) {
aElement.selectedIndex = -1;
}
checkPseudoClass(aElement, false);
// Focusing while :user-invalid applies,
// the pseudo-class should apply while changing selection if appropriate.
aElement.focus();
checkPseudoClass(aElement, false);
synthesizeKey("KEY_ArrowDown");
checkPseudoClass(aElement, true);
aElement.selectedIndex = 0;
checkPseudoClass(aElement, aElement.multiple);
}
checkElement(document.getElementsByTagName('input')[0]);
checkElement(document.getElementsByTagName('textarea')[0]);
checkSelectElement(document.getElementsByTagName('select')[0]);
checkSelectElement(document.getElementsByTagName('select')[1]);
</script>
</pre>
</body>
</html>
|
