Skip to content

Don't update selectedcontent in option insertion/removal steps #59528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromium-wpt-export-bot merged 1 commit into from
Apr 29, 2026
Merged

Don't update selectedcontent in option insertion/removal steps #59528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion ...select-element/customizable-select-multiple-popup/selectedcontent-multiple.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
.send();
}

test(() => {
promise_test(async () => {
const select = document.getElementById('s1');
const optionOne = select.querySelector('option.one');
const optionTwo = select.querySelector('option.two');
Expand All @@ -86,6 +86,7 @@
'The selectedcontent should update after appending a selected option.');

optionOne.remove();
await new Promise(queueMicrotask);
assert_equals(selectedcontent.innerHTML, expectedHtml([optionThree, optionFour]),
'The selectedcontent should update after removing a selected option.');
}, '<selectedcontent> should support <select multiple>.');
Expand Down
127 changes: 127 additions & 0 deletions ...ntics/forms/the-select-element/customizable-select/selectedcontent-insertion-removal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<link rel=author href="mailto:jarhar@chromium.org">
<link rel=help href="https://github.com/whatwg/html/issues/12096">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<select id=select1>
<button>
<selectedcontent class=sc1></selectedcontent>
<selectedcontent class=sc2></selectedcontent>
</button>
<option>one</option>
<option>two</option>
</select>

<script>
promise_test(async () => {
const select = document.getElementById('select1');
const sc1 = select.querySelector('.sc1');
const sc2 = select.querySelector('.sc2');
const sc1before = sc1.innerHTML;
const sc2before = sc2.innerHTML;
sc1.remove();
assert_equals(sc1before, sc1.innerHTML,
'The selectedcontent element should not be updated when it is removed.');
assert_equals(sc2before, sc2.innerHTML,
'The selectedcontent element should not be updated when another selectedcontent is removed.');
}, 'Selectedcontent element removal steps.');
</script>

<select id=select2>
<option>one</option>
<option>two</option>
</select>

<script>
promise_test(async () => {
const select = document.getElementById('select2');
const button = document.createElement('button');
window.scinsertion = {};

const scriptbefore = document.createElement('script');
scriptbefore.textContent =
`window.scinsertion.selectedcontentbefore
= document.getElementById('select2').querySelector('selectedcontent').innerHTML;`;
button.appendChild(scriptbefore);

button.appendChild(document.createElement('selectedcontent'));

const scriptafter = document.createElement('script');
scriptafter.textContent =
`window.scinsertion.selectedcontentafter
= document.getElementById('select2').querySelector('selectedcontent').innerHTML;`;
button.appendChild(scriptafter);

// We should be able to detect whether the selectedcontent element is updated
// in the insertion steps vs the post-connection steps by using the
// post-connection steps of script which should be run before and after the
// post-connection steps of the selectedcontent element.
select.insertBefore(button, select.querySelector('option'));
assert_equals(window.scinsertion.selectedcontentbefore, '',
'The selectedcontent should be empty before post-connection steps.');
assert_equals(window.scinsertion.selectedcontentafter, 'one',
'The selectedcontent should be updated after post-connection steps.');
}, 'Selectedcontent element insertion steps.');
</script>

<select id=select3>
<button>
<selectedcontent></selectedcontent>
</button>
<option>one</option>
</select>

<script>
promise_test(async () => {
const select = document.getElementById('select3');
const container = document.createElement('div');
window.optioninsertion = {};

const scriptbefore = document.createElement('script');
scriptbefore.textContent =
`window.optioninsertion.selectedcontentbefore =
document.getElementById('select3').querySelector('selectedcontent').innerHTML`;
container.appendChild(scriptbefore);

const newOption = document.createElement('option');
newOption.selected = true;
newOption.textContent = 'two';
container.appendChild(newOption);

const scriptafter = document.createElement('script');
scriptafter.textContent =
`window.optioninsertion.selectedcontentafter =
document.getElementById('select3').querySelector('selectedcontent').innerHTML`;
container.appendChild(scriptafter);

// See comment in "Selectedcontent element insertion steps" test.
select.appendChild(container);
assert_equals(window.optioninsertion.selectedcontentbefore, 'one',
'The selectedcontent should not be updated yet before option post-connection steps.');
assert_equals(window.optioninsertion.selectedcontentafter, 'two',
'The selectedcontent should be updated after option post-connection steps.');
}, 'Option element insertion steps.');
</script>

<select id=select4>
<button>
<selectedcontent></selectedcontent>
</button>
<option class=one>one</option>
<option>two</option>
</select>

<script>
promise_test(async () => {
const select = document.getElementById('select4');
const selectedcontent = select.querySelector('selectedcontent');

select.querySelector('.one').remove();
assert_equals(selectedcontent.innerHTML, 'one',
'The selectedcontent element should not be updated synchronously after removal of the selected option.');
await new Promise(queueMicrotask);
assert_equals(selectedcontent.innerHTML, 'two',
'The selectedcontent element should be updated after a microtask.');
}, 'Option element removal steps.');
</script>
5 changes: 3 additions & 2 deletions html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,10 +459,10 @@
"Type: childList | Target: select | Added: [div] | After: #text: \"\"",
"Type: childList | Target: select | Added: [#text: \"\"] | After: div",
"Type: childList | Target: div#test7 | Added: [#text: \"\"] | After: select",
"Type: childList | Target: selectedcontent | Added: [#text: \"two\"] | Removed: [#text: \"one\"]",
"Type: childList | Target: select | Added: [option] | After: #text: \"\"",
"Type: childList | Target: selectedcontent | Added: [#text: \"three\"] | Removed: [#text: \"two\"]",
"Type: childList | Target: selectedcontent | Added: [#text: \"two\"] | Removed: [#text: \"one\"]",
"Type: childList | Target: select | Added: [option] | After: option",
"Type: childList | Target: selectedcontent | Added: [#text: \"three\"] | Removed: [#text: \"two\"]",
"Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"three\"]"
]
},
Expand Down Expand Up @@ -496,6 +496,7 @@
"Type: childList | Target: div#test8 | Added: [#text: \"\"] | After: select",
"Type: childList | Target: div#test8 | Removed: [select] | After: #text: \"\" | Before: #text: \"\"",
"Type: childList | Target: div.container | Added: [select]",
"Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"one\"]",
"Type: childList | Target: selectedcontent | Added: [#text: \"one\"] | Removed: [#text: \"one\"]"
]
}
Expand Down
2 changes: 2 additions & 0 deletions html/semantics/forms/the-select-element/customizable-select/selectedcontent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,11 @@
'Re-inserting the <selectedcontent> should make it update its contents.');

optionTwo.remove();
await new Promise(queueMicrotask);
assert_equals(selectedcontent.innerHTML, optionOne.innerHTML,
'The innerHTML of <selectedcontent> should be updated in response to selected <option> removal.');
optionOne.remove();
await new Promise(queueMicrotask);
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>.');
Expand Down
Loading