Skip to content

Commit 142bcce

Browse files
josepharharchromium-wpt-export-bot
josepharhar
authored and
chromium-wpt-export-bot
committed
Update selectedcontent element after moving steps
Before this patch, the selectedcontent element would not get its contents updated when using Node.moveBefore() to move options or selectedcontent elements in between select elements. Since we should not modify the DOM during a move operation, microtasks are used to defer the modifications. Bug: 458113204 Change-Id: I0d9484382ae9046ec1bd1db8a6f94d057a22f4ed Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7843509 Reviewed-by: Mason Freed <masonf@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1637299}
1 parent c37c7f1 commit 142bcce

2 files changed

Lines changed: 110 additions & 0 deletions

File tree

‎dom/nodes/moveBefore/select-option-optgroup.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,53 @@
4141
assert_false(optionC.selected, "C no longer selected after third move");
4242
}, "Option selectedness is updated on option and optgroup DOM moves");
4343
</script>
44+
45+
<select id=one>
46+
<div class=one>
47+
<option class=one>one</option>
48+
</div>
49+
<div class=two>
50+
<option class=two>two</option>
51+
</div>
52+
</select>
53+
<select id=two>
54+
</select>
55+
<div id=div></div>
56+
57+
<script>
58+
test(() => {
59+
const selectOne = document.getElementById('one');
60+
const selectTwo = document.getElementById('two');
61+
const div = document.getElementById('div');
62+
const optionOne = selectOne.querySelector('option.one');
63+
const optionTwo = selectOne.querySelector('option.two');
64+
const oneWrapper = selectOne.querySelector('div.one');
65+
const twoWrapper = selectOne.querySelector('div.two');
66+
67+
assert_true(optionOne.selected,
68+
'option one should be selected at the start of the test.');
69+
assert_false(optionTwo.selected,
70+
'option two should not be selected at the start of the test.');
71+
72+
selectTwo.moveBefore(twoWrapper, null);
73+
assert_true(optionTwo.selected,
74+
'option two should become selected after moving into an empty select.');
75+
assert_equals(selectTwo.value, 'two',
76+
'select.value should update after moving option into it.');
77+
78+
selectTwo.moveBefore(oneWrapper, null);
79+
assert_false(optionTwo.selected,
80+
'option two should become deselected after moving another selected option in.');
81+
assert_true(optionOne.selected,
82+
'option one should become stay selected after moving.');
83+
assert_equals(selectOne.value, '',
84+
'select.value should update after moving all options out.');
85+
assert_equals(selectTwo.value, 'one',
86+
'select.value should not change after moving another option in.');
87+
88+
div.moveBefore(oneWrapper, null);
89+
div.moveBefore(twoWrapper, null);
90+
assert_equals(selectTwo.value, '',
91+
'select.value should update again after moving options out.');
92+
}, 'Moving options between select elements.');
93+
</script>

‎html/semantics/forms/the-select-element/customizable-select/selectedcontent-movebefore.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<link rel=author href="mailto:jarhar@chromium.org">
3+
<link rel=help href="https://github.com/whatwg/html/pull/12263">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
7+
<select id=s1>
8+
<button id=b1>
9+
<selectedcontent></selectedcontent>
10+
</button>
11+
<option id=o1>one</option>
12+
</select>
13+
14+
<select id=s2>
15+
<button id=b2></button>
16+
<option id=o2>two</option>
17+
<option id=o3>three</option>
18+
</select>
19+
20+
<script>
21+
promise_test(async () => {
22+
const s1 = document.getElementById('s1');
23+
const s2 = document.getElementById('s2');
24+
const b1 = document.getElementById('b1');
25+
const b2 = document.getElementById('b2');
26+
const o1 = document.getElementById('o1');
27+
const o2 = document.getElementById('o2');
28+
const o3 = document.getElementById('o3');
29+
const selectedcontent = document.querySelector('selectedcontent');
30+
31+
assert_equals(selectedcontent.innerHTML, 'one',
32+
'selectedcontent.innerHTML should match selected option at the start of the test.');
33+
assert_true(o1.selected,
34+
'o1 should be selected at the start of the test.');
35+
assert_true(o2.selected,
36+
'o2 should be selected at the start of the test.');
37+
38+
s1.moveBefore(o2, null);
39+
assert_false(o1.selected,
40+
'o1 should be deselected after moving another selected option in.');
41+
assert_true(o2.selected,
42+
'o2 should stay selected after moving.');
43+
assert_equals(s1.value, 'two',
44+
'select.value should update when moving selected option in.');
45+
assert_equals(s2.value, 'three',
46+
'select.value should update when moving selected option out.');
47+
assert_equals(selectedcontent.innerHTML, 'one',
48+
'selectedcontent should not update when moving selected option in before microtask.');
49+
await new Promise(queueMicrotask);
50+
assert_equals(selectedcontent.innerHTML, 'two',
51+
'selectedcontent should update when moving selected option in after microtask.');
52+
53+
b2.moveBefore(selectedcontent, null);
54+
assert_equals(selectedcontent.innerHTML, 'two',
55+
'selectedcontent should not update when moving into different select before microtask.');
56+
await new Promise(queueMicrotask);
57+
assert_equals(selectedcontent.innerHTML, 'three',
58+
'selectedcontent should update when moving into different select after microtask.');
59+
}, 'Selectedcontent behavior with moving steps.');
60+
</script>

0 commit comments

Comments
 (0)