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
|
<!DOCTYPE html>
<html lang="en">
<title>HTMLSelectMenuElement Test: ask-for-reset</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<form name="fm1" id="form1">
<selectmenu id="selectmenu1">
<option>one</option>
<option>two</option>
</selectmenu>
<selectmenu id="selectmenu2">
<option>one</option>
<option selected>two</option>
</selectmenu>
<selectmenu id="selectmenu3">
<option>one</option>
<option selected>two</option>
<option selected>three</option>
</selectmenu>
</form>
<script>
function createSelectMenu(numberOfOptions) {
let selectMenu = document.createElement("selectmenu");
for (let i = 0; i < numberOfOptions; i++) {
let option = document.createElement("option");
option.value = i;
selectMenu.appendChild(option);
}
return selectMenu;
}
function checkSelection(selectMenu, selectedOptionIndex, msg) {
for (let i = 0; i < selectMenu.children.length; i++) {
if (i != selectedOptionIndex) {
assert_false(selectMenu.children[i].selected);
}
}
assert_true(selectMenu.children[selectedOptionIndex].selected, msg);
assert_equals(selectMenu.value, selectMenu.children[selectedOptionIndex].value);
}
test(() => {
let selectMenu = createSelectMenu(5);
selectMenu.children[4].selected = true;
checkSelection(selectMenu, 4);
selectMenu.children[4].remove();
checkSelection(selectMenu, 0, "After removing the selected option, selection should default to first option.");
selectMenu.children[3].selected = true;
checkSelection(selectMenu, 3);
selectMenu.children[0].remove();
checkSelection(selectMenu, 2, "Removing non-selected option should have no effect.");
}, "ask-for-reset when removing option");
test(() => {
let selectMenu = createSelectMenu(3);
selectMenu.children[1].selected = true;
let newOption = document.createElement("option");
newOption.selected = true;
selectMenu.appendChild(newOption);
checkSelection(selectMenu, 3, "Inserting a selected option should update selection.");
let newOption2 = document.createElement("option");
newOption2.selected = true;
selectMenu.prepend(newOption2);
checkSelection(selectMenu, 0, "Inserting a selected option should update selection, even though it's not last in tree order.");
let newOption3 = document.createElement("option");
selectMenu.appendChild(newOption3);
checkSelection(selectMenu, 0, "Inserting a non-selected option should have no effect.");
}, "ask-for-reset when inserting option");
test(() => {
let selectMenu = createSelectMenu(3);
let options = selectMenu.children;
// select options from first to last
for (let i = 0; i < options.length; i++) {
options[i].selected = true;
checkSelection(selectMenu, i);
}
// select options from last to first
for (let i = options.length - 1; i >= 0; i--) {
options[i].selected = true;
checkSelection(selectMenu, i);
}
options[2].selected = true;
checkSelection(selectMenu, 2);
options[2].selected = false;
checkSelection(selectMenu, 0, "First non-disabled option should be selected.");
options[0].disabled = true;
options[2].selected = true;
checkSelection(selectMenu, 2);
options[2].selected = false;
checkSelection(selectMenu, 1, "First non-disabled option should be selected.");
}, "ask-for-reset when changing selectedness of option");
test(() => {
let selectMenu1 = document.getElementById("selectmenu1");
let selectMenu2 = document.getElementById("selectmenu2");
let selectMenu3 = document.getElementById("selectmenu3");
document.getElementById("form1").reset();
assert_equals(selectMenu1.value, "one", "First non-disabled option should be selected.");
assert_equals(selectMenu2.value, "two", "The selected option should be selected.");
assert_equals(selectMenu3.value, "three", "Last selected option should be selected.")
}, "ask-for-reset for form");
</script>
|
