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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: Button - events</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-button-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form name="fm1" style="display:none">
<button id="btn">BUTTON</button>
<button id="menu_btn" type="menu" menu="menu">MENU BUTTON</button>
</form>
<script>
var btn = document.getElementById("btn"),
menu_btn = document.getElementById("menu_btn"),
t1 = async_test("The submit event must be fired when click a button in submit status"),
t2 = async_test("The reset event must be fired when click a button in reset status");
t3 = async_test("type=button shouldn't trigger submit or reset events");
t4 = async_test("Switching from type=button to type=submit should submit the form");
t5 = async_test("Switching from type=button to type=reset should reset the form");
t6 = async_test("Innermost button should submit its form");
t7 = async_test("Innermost button should reset its form");
t8 = async_test("Anchor inside a button should be prevent button activation");
t9 = async_test("input type=submit inside a button should be prevent button activation");
document.forms.fm1.onsubmit = t1.step_func(function (evt) {
evt.preventDefault();
assert_true(evt.isTrusted, "The isTrusted attribute of the submit event should be true.");
assert_true(evt.bubbles, "The bubbles attribute of the submit event should be true.");
assert_true(evt.cancelable, "The cancelable attribute of the submit event should be true.");
assert_true(evt instanceof Event, "The submit event is an instance of Event interface.");
t1.done();
});
document.forms.fm1.onreset = t2.step_func(function (evt) {
assert_true(evt.isTrusted, "The isTrusted attribute of the reset event should be true.");
assert_true(evt.bubbles, "The bubbles attribute of the reset event should be true.");
assert_true(evt.cancelable, "The cancelable attribute of the reset event should be true.");
assert_true(evt instanceof Event, "The reset event is an instance of Event interface.");
t2.done();
});
t1.step(function () {
btn.type = "submit";
assert_equals(btn.type, "submit", "The button type should be 'submit'.");
btn.click();
});
t2.step(function () {
btn.type = "reset";
assert_equals(btn.type, "reset", "The button type should be 'reset'.");
btn.click();
});
t3.step(function () {
btn.type = "button";
assert_equals(btn.type, "button", "The button type should be 'button'.");
document.forms.fm1.onsubmit = t3.step_func(function (evt) {
assert_unreached("type=button shouldn't trigger submission.");
});
document.forms.fm1.onreset = t3.step_func(function (evt) {
assert_unreached("type=button shouldn't reset the form.");
});
btn.click();
t3.done();
});
t4.step(function () {
btn.type = "button";
btn.onclick = function() { btn.type = "submit"; }
document.forms.fm1.onsubmit = t4.step_func(function (evt) {
evt.preventDefault();
assert_equals(btn.type, "submit", "The button type should be 'submit'.");
t4.done();
});
btn.click();
});
t5.step(function () {
btn.type = "button";
btn.onclick = function() { btn.type = "reset"; }
document.forms.fm1.onreset = t5.step_func(function (evt) {
evt.preventDefault();
assert_equals(btn.type, "reset", "The button type should be 'reset'.");
t5.done();
});
btn.click();
});
t6.step(function () {
btn.type = "submit";
btn.innerHTML = "";
var fm2 = document.createElement("form");
var btn2 = document.createElement("button");
btn2.type = "submit";
fm2.appendChild(btn2);
btn.appendChild(fm2);
assert_true(document.forms.fm1.contains(fm2), "Should have nested forms");
function submitListener(evt) {
evt.preventDefault();
assert_equals(evt.target, fm2, "Innermost form should have got the submit event");
};
window.addEventListener("submit", submitListener, true);
btn2.click();
window.removeEventListener("submit", submitListener, true);
t6.done();
});
t7.step(function () {
btn.type = "reset";
btn.innerHTML = "";
var fm2 = document.createElement("form");
var btn2 = document.createElement("button");
btn2.type = "reset";
fm2.appendChild(btn2);
btn.appendChild(fm2);
assert_true(document.forms.fm1.contains(fm2), "Should have nested forms");
function resetListener(evt) {
evt.currentTarget.removeEventListener(evt.type, resetListener, true);
evt.preventDefault();
assert_equals(evt.target, fm2, "Innermost form should have got the reset event");
t7.done();
};
window.addEventListener("reset", resetListener, true);
btn2.click();
});
t8.step(function () {
btn.type = "submit";
btn.innerHTML = "";
var a = document.createElement("a");
a.href = "#";
btn.appendChild(a);
document.forms.fm1.onsubmit = t8.step_func(function (evt) {
assert_unreached("type=button shouldn't trigger submission.");
});
a.click();
t8.done();
});
t9.step(function () {
btn.type = "submit";
btn.innerHTML = "";
var fm2 = document.createElement("form");
var btn2 = document.createElement("input");
btn2.type = "submit";
fm2.appendChild(btn2);
btn.appendChild(fm2);
assert_true(document.forms.fm1.contains(fm2), "Should have nested forms");
function submitListener(evt) {
evt.preventDefault();
assert_equals(evt.target, fm2, "Innermost form should have got the submit event");
};
window.addEventListener("submit", submitListener, true);
btn2.click();
window.removeEventListener("submit", submitListener, true);
t9.done();
});
</script>
|
