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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMLSelectElement.selectedOptions</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#dom-select-selectedoptions">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<select id="select-none-selected">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select-one-selected">
<option>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select multiple id="multiple-select-none-selected">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select multiple id="multiple-select-two-selected">
<option>One</option>
<option selected>Two</option>
<option selected>Three</option>
</select>
<select id="select-named-selected">
<option>One</option>
<option>Two</option>
<option id="named-option" selected>Three</option>
</select>
<select id="invalid-select">
<option selected>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select id="select-same-object">
<option>One</option>
<option selected>Two</option>
<option>Three</option>
</select>
<select multiple id="select-same-object-change">
<option selected>One</option>
<option selected>Two</option>
<option selected>Three</option>
</select>
<script>
"use strict";
test(() => {
const select = document.getElementById("select-none-selected");
assert_array_equals(select.selectedOptions, [select.children[0]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions with no selected option");
test(() => {
const select = document.getElementById("select-one-selected");
assert_array_equals(select.selectedOptions, [select.children[1]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions with one selected option");
test(() => {
const select = document.getElementById("multiple-select-none-selected");
assert_equals(select.selectedOptions.item(0), null);
assert_equals(select.selectedOptions.length, 0);
}, ".selectedOptions using the 'multiple' attribute with no selected options");
test(() => {
const select = document.getElementById("multiple-select-two-selected");
assert_equals(select.selectedOptions.item(0), select.children[1]);
assert_equals(select.selectedOptions.item(1), select.children[2]);
assert_equals(select.selectedOptions.length, 2);
}, ".selectedOptions using the 'multiple' attribute with two selected options");
// "A select element whose multiple attribute is not specified must not have
// more than one descendant option element with its selected attribute set."
// - https://html.spec.whatwg.org/multipage/forms.html#the-option-element:the-select-element-6
// "If two or more option elements in the select element's list of options
// have their selectedness set to true, set the selectedness of all but
// the last option element with its selectedness set to true in the list of
// options in tree order to false."
// - https://html.spec.whatwg.org/multipage/forms.html#the-select-element:the-option-element-21
test(() => {
const select = document.getElementById("invalid-select");
assert_array_equals(select.selectedOptions, [select.children[1]]);
assert_equals(select.selectedOptions.length, 1);
}, ".selectedOptions without the 'multiple' attribute but " +
"more than one selected option should return the last one");
test(() => {
const select = document.getElementById("select-named-selected");
assert_equals(select.selectedOptions.constructor, HTMLCollection);
assert_equals(select.selectedOptions.namedItem("named-option"), select.children[2]);
}, ".selectedOptions should return `HTMLCollection` instance");
test(() => {
const select = document.getElementById("select-same-object");
const selectAgain = document.getElementById("select-same-object");
assert_equals(select.selectedOptions, selectAgain.selectedOptions);
}, ".selectedOptions should always return the same value - [SameObject]");
test(() => {
const select = document.getElementById("select-same-object-change");
const before = select.selectedOptions;
assert_equals(before.length, 3);
select.selectedOptions[1].selected = false;
const after = select.selectedOptions;
assert_equals(before, after);
assert_equals(before.length, 2);
assert_equals(after.length, 2);
}, ".selectedOptions should return the same object after selection changes - [SameObject]");
</script>
</body>
</html>
|
