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
167
168
169
170
171
|
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/9799">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
select, ::picker(select) {
appearance: base-select;
}
</style>
<form>
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option class=one value=one>
<span class=one>span</span> one
</option>
<option class=two value=two>
<span class=two>span</span> two
</option>
</select>
</form>
<script>
promise_test(async () => {
const optionOne = document.querySelector('option.one');
const optionTwo = document.querySelector('option.two');
const selectedcontent = document.querySelector('selectedcontent');
const select = document.querySelector('select');
const spanTwo = document.querySelector('span.two');
const form = document.querySelector('form');
const button = document.querySelector('button');
assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedcontent> should initially match the innerHTML of the selected <option>.');
select.value = 'two';
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'The innerHTML of <selectedcontent> should change after the selected option is changed.');
let oldInnerHTML = optionTwo.innerHTML;
spanTwo.textContent = 'new span';
assert_equals(selectedcontent.innerHTML, oldInnerHTML,
'<selectedcontent> should not respond to <option> text content changes.');
spanTwo.appendChild(document.createElement('div'));
assert_equals(selectedcontent.innerHTML, oldInnerHTML,
'<selectedcontent> should not respond to new elements being added to descendants of <option>.');
spanTwo.setAttribute('data-foo', 'bar');
assert_equals(selectedcontent.innerHTML, oldInnerHTML,
'<selectedcontent> should not respond to attributes being added to descendants of <option>.');
select.value = select.value;
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'<selectedcontent> should be updated in response to re-assigning select.value.');
spanTwo.firstElementChild.remove();
select.selectedIndex = select.selectedIndex;
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'<selectedcontent> should be updated in response to re-assigning select.selectedIndex.');
form.reset();
assert_equals(select.value, 'one',
'form.reset() should change the selects value to one.');
assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedcontent> should be updated in response to a form reset.');
await test_driver.bless();
select.showPicker();
await test_driver.click(optionTwo);
assert_equals(select.value, 'two',
'Clicking on another option should change select.value.');
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'Clicking on an option element should update the <selectedcontent>.');
selectedcontent.remove();
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'Removing the <selectedcontent> from the <select> should not make it clear its contents.');
button.appendChild(selectedcontent);
assert_equals(selectedcontent.innerHTML, optionTwo.innerHTML,
'Re-inserting the <selectedcontent> should make it update its contents.');
optionTwo.remove();
assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedcontent> should be updated in response to selected <option> removal.');
optionOne.remove();
assert_equals(selectedcontent.innerHTML, '',
'The content of <selectedcontent> should be cleared if there is no selected <option>.');
}, 'The <selectedcontent> element should reflect the HTML contents of the selected <option>.');
</script>
<select id=select2>
<button>
<selectedcontent></selectedcontent>
</button>
<option class=one>one</option>
<option class=two>two</option>
<option class=three>three</option>
</select>
<script>
promise_test(async () => {
const select = document.getElementById('select2');
const button = select.querySelector('button');
const selectedcontent = select.querySelector('selectedcontent');
assert_equals(selectedcontent.textContent, 'one',
'selectedcontent should initially be one.');
const selectedcontent2 = document.createElement('selectedcontent');
button.appendChild(selectedcontent2);
select.value = 'two';
assert_equals(selectedcontent.textContent, 'two',
'First selectedcontent should be kept up to date.');
assert_equals(selectedcontent2.textContent, '',
'Second selectedcontent should not be kept up to date.');
button.insertBefore(selectedcontent2, selectedcontent);
select.value = 'one';
assert_equals(selectedcontent.textContent, '',
'Second selectedcontent in tree order should be cleared after another is inserted.');
assert_equals(selectedcontent2.textContent, 'one',
'First selectedcontent in tree order should be kept up to date.');
selectedcontent.textContent = 'two';
selectedcontent.remove();
assert_equals(selectedcontent.textContent, 'two',
'selectedcontent should not have its children modified after removal.');
select.value = 'three';
assert_equals(selectedcontent2.textContent, 'three',
'Remaining selectedcontent should be kept up to date.');
assert_equals(selectedcontent.textContent, 'two',
'Removed selectedcontent should not be kept up to date.');
button.insertBefore(selectedcontent, selectedcontent2);
assert_equals(selectedcontent.textContent, 'three',
'Inserted selectedcontent should be updated if it is the first in tree order.');
assert_equals(selectedcontent2.textContent, '',
'Second selectedcontent in tree order should be cleared when another is inserted.');
selectedcontent.remove();
assert_equals(selectedcontent2.textContent, 'three',
'Remaining selectedcontent should be updated when first in tree order is removed.');
}, 'When there are multiple <selectedcontent> elements, only the one in tree order should be kept up to date.');
promise_test(async () => {
const select = document.createElement('select');
select.innerHTML = '<option>one</option><option>two</option>';
const button = document.createElement('button');
select.appendChild(button);
const selectedcontent = document.createElement('selectedcontent');
button.appendChild(selectedcontent);
assert_equals(selectedcontent.textContent, '',
'<selectedcontent> should not be updated when appending to a disconnected select.');
select.value = 'two';
assert_equals(selectedcontent.textContent, '',
'<selectedcontent> should not be updated when changing value of a disconnected select.');
document.body.appendChild(select);
assert_equals(selectedcontent.textContent, 'two',
'<selectedcontent> should be updated when <select> is connected to the document.');
}, '<seletedcontent> behavior in disconnected <select>.');
</script>
|
