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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>Constraint validation</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#constraint-validation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form id="fm1" style="display:none">
<fieldset id="test0">
<input type="text" required value="" id="test1">
</fieldset>
<input type="email" value="abc" id="test2">
<button id="test3">TEST</button>
<select id="test4"></select>
<textarea id="test5"></textarea>
<output id="test6"></output>
</form>
<form id="fm2" style="display:none">
<fieldset>
<input type="text" required value="abc">
</fieldset>
<input type="email" value="test@example.com">
<button>TEST</button>
<select></select>
<textarea></textarea>
<output></output>
</form>
<form id="fm3" style="display:none">
<fieldset id="fs">
<legend><input type="text" id="inp1"></legend>
<input type="text" required value="" id="inp2">
</fieldset>
</form>
<script>
var cancelable = true,
times1 = 0,
times2 = 0,
invalidList1 = [],
invalidList2 = [],
test1,
test2,
fm1,
fm2,
fm3;
setup(function () {
fm1 = document.getElementById("fm1");
fm2 = document.getElementById("fm2");
fm3 = document.getElementById("fm3");
test1 = document.getElementById("test1");
test2 = document.getElementById("test2");
for (var index = 0; index < fm1.elements.length; index++) {
var ele = fm1.elements.item(index);
ele.addEventListener("invalid", function (e) {
times1++;
invalidList1.push(e.target);
if (!e.cancelable)
cancelable = e.cancelable;
}, false);
}
for (var index = 0; index < fm2.elements.length; index++) {
var ele = fm2.elements.item(index);
ele.addEventListener("invalid", function (e) {
times2++;
invalidList2.push(ele);
}, false);
}
});
test(function(){
assert_false(fm1.checkValidity(), "The checkValidity method should be false.");
}, "If there is any invalid submittable element whose form owner is the form, the form.checkValidity must be false");
test(function(){
assert_true("reportValidity" in fm1, "The reportValidity method is not supported");
assert_false(fm1.reportValidity(), "The reportValidity method should be false.");
}, "If there is any invalid submittable element whose form owner is the form, the form.reportValidity must be false");
test(function(){
assert_true(fm2.checkValidity(), "The checkValidity method should be true.");
}, "If all of the submittable elements whose form owner is the form are valid, the form.checkValidity must be true");
test(function(){
assert_true("reportValidity" in fm2, "The reportValidity method is not supported.");
assert_true(fm2.reportValidity(), "The reportValidity method should be true.");
}, "If all of the submittable elements whose form owner is the form are valid, the form.reportValidity must be true");
test(function(){
assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
document.getElementById("fs").disabled = true;
assert_true(fm3.checkValidity(), "The checkValidity method should be true.");
document.getElementById("inp1").value = "aaa";
document.getElementById("inp1").type = "url";
assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
}, "Check the checkValidity method of the form element when it has a fieldset child");
test(function(){
// Restore the condition to default which was modified during the previous test.
document.getElementById("fs").disabled = false;
document.getElementById("inp1").value = "";
document.getElementById("inp1").type = "text";
assert_true("reportValidity" in fm3, "The reportValidity method is not supported.");
assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
document.getElementById("fs").disabled = true;
assert_true(fm3.reportValidity(), "The reportValidity method should be true.");
document.getElementById("inp1").value = "aaa";
document.getElementById("inp1").type = "url";
assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
}, "Check the reportValidity method of the form element when it has a fieldset child");
test(function () {
assert_equals(times1, 4, "The invalid event will be fired if the checkValidity or reportValidity method are called.");
assert_array_equals(invalidList1, [test1, test2, test1, test2], "The invalid event must be fired at the invalid control");
assert_true(cancelable, "The invalid event is cancelable.");
}, "The invalid event must be fired at the invalid controls");
test(function () {
assert_equals(times2, 0, "The invalid event should not be fired, times should be 0.");
assert_array_equals(invalidList2, [], "The invalid event should not be fired, invalid list should be empty");
}, "The invalid event must not be fired at the invalid controls");
</script>
|
