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
|
<!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>
<form>
<select style="appearance:base-select">
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option class=one value=one>
<span class=one>span</span> one
</option>
<option class=two value=two>
<span class=two>span</span> two
</option>
</datalist>
</select>
</form>
<script>
promise_test(async () => {
const optionOne = document.querySelector('option.one');
const optionTwo = document.querySelector('option.two');
const selectedOption = document.querySelector('selectedoption');
const select = document.querySelector('select');
const spanTwo = document.querySelector('span.two');
const form = document.querySelector('form');
const button = document.querySelector('button');
assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedoption> should initially match the innerHTML of the selected <option>.');
select.value = 'two';
assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
'The innerHTML of <selectedoption> should change after the selected option is changed.');
spanTwo.textContent = 'new span';
assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
'<selectedoption> should respond to text content changes.');
spanTwo.appendChild(document.createElement('div'));
assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
'<selectedoption> should respond to new elements being added to descendants.');
spanTwo.setAttribute('data-foo', 'bar');
assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
'<selectedoption> should respond to attributes being added to descendants.');
form.reset();
assert_equals(select.value, 'one',
'form.reset() should change the selects value to one.');
assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedoption> 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(selectedOption.innerHTML, optionTwo.innerHTML,
'Clicking on an option element should update the <selectedoption>.');
selectedOption.remove();
assert_equals(selectedOption.innerHTML, '',
'Removing the <selectedoption> from the <select> should make it clear its contents.');
button.appendChild(selectedOption);
assert_equals(selectedOption.innerHTML, optionTwo.innerHTML,
'Re-inserting the <selectedoption> should make it update its contents.');
optionTwo.remove();
assert_equals(selectedOption.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedoption> should be updated in response to selected <option> removal.');
optionOne.remove();
assert_equals(selectedOption.innerHTML, '',
'The content of <selectedoption> should be cleared if there is no selected <option>.');
}, 'The <selectedoption> element should reflect the HTML contents of the selected <option>.');
</script>
|
