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
|
<!DOCTYPE html>
<link rel="help" href="https://html.spec.whatwg.org/C/#the-select-element:nodes-are-inserted">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<select id="by-parser">
<option selected>First</option>
<option selected>Second</option>
</select>
<select id="by-parser-optgroup">
<optgroup>
<option selected>First</option>
<option selected>Second</option>
</optgroup>
</select>
<select id="by-dom"></select>
<select id="by-innerHTML"></select>
<script>
test(() => {
const target = document.querySelector("#by-parser");
assert_equals(target.selectedOptions[0].textContent, 'Second');
const target2 = document.querySelector("#by-parser-optgroup");
assert_equals(target2.selectedOptions[0].textContent, 'Second');
}, 'The last selected OPTION should win; Inserted by parser');
test(() => {
const target = document.querySelector("#by-dom");
const option1 = document.createElement('option');
option1.defaultSelected = true;
option1.textContent = 'First';
const option2 = document.createElement('option');
option2.defaultSelected = true;
option2.textContent = 'Second';
target.appendChild(option1);
target.appendChild(option2);
assert_equals(target.selectedOptions[0].textContent, 'Second');
target.innerHTML = '';
const optgroup = document.createElement('optgroup');
const option3 = document.createElement('option');
option3.defaultSelected = true;
option3.textContent = 'First';
const option4 = document.createElement('option');
option4.defaultSelected = true;
option4.textContent = 'Second';
optgroup.appendChild(option3);
optgroup.appendChild(option4);
target.appendChild(optgroup);
assert_equals(target.selectedOptions[0].textContent, 'Second');
}, 'The last selected OPTION should win; Inserted by DOM API');
test(() => {
const target = document.querySelector("#by-dom");
target.innerHTML = '';
const inner = `<option value="one" selected>First</option>
<option value="two" selected>Second</option>`;
// Emulate what jQuery 1.x/2.x does in append(inner).
const fragment = document.createDocumentFragment();
const div = document.createElement('div');
div.innerHTML = '<select multiple>' + inner + '</select>';
while (div.firstChild.firstChild)
fragment.appendChild(div.firstChild.firstChild);
target.appendChild(fragment);
assert_equals(target.selectedOptions[0].textContent, 'Second');
}, 'The last selected OPTION should win; Inserted by jQuery append()');
test(() => {
const target = document.querySelector("#by-innerHTML");
target.innerHTML = '<option selected>First</option>' +
'<option selected>Second</option>';
assert_equals(target.selectedOptions[0].textContent, 'Second');
target.innerHTML = '<option selected>First</option>' +
'<optgroup><option selected>Second</option>' +
'<option selected>Third</option></optgroup>' +
'<option selected>Fourth</option>';
assert_equals(target.selectedOptions[0].textContent, 'Fourth');
}, 'The last selected OPTION should win; Inserted by innerHTML');
test (() => {
for (let insert_location = 0; insert_location < 3; ++insert_location) {
const target = document.querySelector('#by-innerHTML');
target.innerHTML = '<option>A</option>' +
'<option selected>C</option>' +
'<option>D</option>';
const refNode = target.querySelectorAll('option')[insert_location];
const opt = document.createElement('option');
opt.selected = true;
opt.textContent = 'B';
target.insertBefore(opt, refNode);
assert_equals(target.selectedOptions[0].textContent, 'B');
}
}, 'If an OPTION says it is selected, it should be selected after it is inserted.');
</script>
</body>
|
