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>
<title>HTMLSelectMenuElement Test: value</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<selectmenu id="selectMenu0"></selectmenu>
<selectmenu id="selectMenu1">
<option>one</option>
<option>two</option>
<div>I'm a div with no part attr</div>
<option>three</option>
<option>four</option>
</selectmenu>
<selectmenu id="selectMenu2">
<div part="option">one</div>
<div part="option">two</div>
<div>I'm a div with no part attr</div>
<div part="option">three</div>
<div part="option">four</div>
</selectmenu>
<selectmenu id="selectMenu3">
<div>I'm a div with no part attr</div>
<option id="selectMenu3-child1">one</option>
<div part="option" id="selectMenu3-child2">two</div>
<option id="selectMenu3-child3">three</option>
</selectmenu>
<selectmenu id="selectMenu4">
<div part="option" id="selectMenu4-child1">one</div>
<div part="option" id="selectMenu4-child2">two</div>
</selectmenu>
<selectmenu id="selectMenu5">
<div slot="button" part="button">
<div part="selected-value" id="selectMenu5-custom-selected-value">Default custom selected-value text</div>
</div>
<option>one</option>
<option>two</option>
</selectmenu>
<selectmenu id="selectMenu6">
<div slot="button" part="button">
<div part="selected-value" id="selectMenu6-custom-selected-value">Default custom selected-value text</div>
</div>
<popup slot="listbox" part="listbox">
<option>one</option>
<div part="option">two</div>
</popup>
</selectmenu>
<script>
test(() => {
const selectMenu0 = document.getElementById("selectMenu0");
assert_equals(selectMenu0.value, "");
selectMenu0.value = "something";
assert_equals(selectMenu0.value, "", "Setting value should have no effect if there is no matching option");
}, "Test that HTMLSelectMenu with no options has empty string for value");
test(() => {
const selectMenu1 = document.getElementById("selectMenu1");
assert_equals(selectMenu1.value, "one", "value should start with the text of the first option part");
selectMenu1.value = "three";
assert_equals(selectMenu1.value, "three", "value can be set to the text of an option part");
selectMenu1.value = "I'm a div with no part attr";
assert_equals(selectMenu1.value, "three", "Setting value should have no effect if there is no matching option");
}, "Test value with HTMLOptionElement element option parts");
test(() => {
const selectMenu2 = document.getElementById("selectMenu2");
assert_equals(selectMenu2.value, "one", "value should start with the text of the first option part");
selectMenu2.value = "three";
assert_equals(selectMenu2.value, "three", "value can be set to the text of an option part");
selectMenu2.value = "I'm a div with no part attr";
assert_equals(selectMenu2.value, "three", "Setting value should have no effect if there is no matching option");
}, "Test value with non-HTMLOptionElement element option parts");
test(() => {
const selectMenu3 = document.getElementById("selectMenu3");
assert_equals(selectMenu3.value, "one", "value should start with the text of the first option part");
document.getElementById("selectMenu3-child3").remove();
assert_equals(selectMenu3.value, "one", "Removing a non-selected option should not change the value");
document.getElementById("selectMenu3-child1").remove();
assert_equals(selectMenu3.value, "two", "When the selected option is removed, the new first option should become selected");
document.getElementById("selectMenu3-child2").remove();
assert_equals(selectMenu3.value, "", "When all options are removed, value should be the empty string");
}, "Test that value is updated when options are removed");
test(() => {
const selectMenu4 = document.getElementById("selectMenu4");
assert_equals(selectMenu4.value, "one", "value should start with the text of the first option part");
document.getElementById("selectMenu4-child1").setAttribute("part", "notOption");
assert_equals(selectMenu4.value, "two", "Changing the part attribute of the selected option should remove its status as the selected option");
}, "Test that value is updated when the part attribute is removed");
test(() => {
const selectMenu5 = document.getElementById("selectMenu5");
let customSelectedValuePart = document.getElementById("selectMenu5-custom-selected-value");
assert_equals(selectMenu5.value, "one", "value should start with the text of the first option part");
assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");
selectMenu5.value = "two";
assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
}, "Test that slotted-in selected-value part is updated to value of selectmenu");
test(() => {
const selectMenu6 = document.getElementById("selectMenu6");
let customSelectedValuePart = document.getElementById("selectMenu6-custom-selected-value");
assert_equals(selectMenu6.value, "one", "value should start with the text of the first option part");
assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu");
selectMenu6.value = "two";
assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes");
}, "Test that option parts in a slotted-in listbox are reflected in the value property");
</script>
|
