commit 836a63e0a566ff9cd537fe717d6fda1a4bae3009 parent 15a69ebc62ce7ff6345711e2eba96265cdbae700 Author: Joey Arhar <jarhar@chromium.org> Date: Thu, 6 Nov 2025 21:33:09 +0000 Bug 1997488 [wpt PR 55783] - Don't allow datalist in between select and options, a=testonly Automatic update from web-platform-tests Don't allow datalist in between select and options This patch prevents options from being select associated when there is a datalist element in between the select and the option. This patch also updates some WPTs related to this behavior in support of spec changes. Spec issues: https://github.com/whatwg/html/issues/11787 https://github.com/whatwg/html/issues/11788 Change-Id: I2e189e961e278191c8c3e6da0ae26282a6fe888f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7042903 Reviewed-by: Mason Freed <masonf@chromium.org> Auto-Submit: Joey Arhar <jarhar@chromium.org> Commit-Queue: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1538369} -- wpt-commits: 62650b1154213dec55b14f468aed518b6755f1d6 wpt-pr: 55783 Diffstat:
4 files changed, 73 insertions(+), 2 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/nested-options.tenative.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/nested-options.tenative.html @@ -33,6 +33,7 @@ test(() => { // Manually nest the <options> anyway for the following tests. o1.appendChild(o2); +select.appendChild(o1); test(() => { assert_equals(select.options.length, 1, 'select.options.length'); diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-disabled-invalid-nesting.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-disabled-invalid-nesting.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/whatwg/html/pull/11790#issuecomment-3404807465"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<select> + <optgroup disabled> + <option></option> + <datalist></datalist> + </optgroup> +</select> + +<script> +test(() => { + const optionContainer = document.querySelector('option'); + assert_true(optionContainer.matches(':disabled'), + 'Valid option without nesting should be disabled.'); + + const nestedInOption = document.createElement('option'); + optionContainer.appendChild(nestedInOption); + assert_false(nestedInOption.matches(':disabled'), + 'Option nested in option should not inherit disabledness.'); + + const parentOptgroup = document.querySelector('optgroup'); + const childOptgroup = document.createElement('optgroup'); + parentOptgroup.appendChild(childOptgroup); + const nestedInOptgroup = document.createElement('option'); + childOptgroup.appendChild(nestedInOptgroup); + assert_false(nestedInOptgroup.matches(':disabled'), + 'Option nested in doubly nested optgroups should not inherit disabledness.'); + + const hr = document.createElement('hr'); + parentOptgroup.appendChild(hr); + const nestedInHr = document.createElement('option'); + hr.appendChild(nestedInHr); + assert_false(nestedInHr.matches(':disabled'), + 'Option nested in hr should not inherit disabledness.'); + + const datalist = document.querySelector('datalist'); + const nestedInDatalist = document.createElement('option'); + datalist.appendChild(nestedInDatalist); + assert_false(nestedInDatalist.matches(':disabled'), + 'Option nested in datalist should not inherit disabledness.'); +}, 'options should not inherit disabledness when nested in invalid elements.'); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-form-ancestor-select.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-form-ancestor-select.html @@ -6,10 +6,14 @@ <script src="/resources/testharnessreport.js"></script> <form id=form> - <select id=select1></select> + <select id=select1> + <optgroup></optgroup> + </select> </form> -<select id=select2 form=form></select> +<select id=select2 form=form> + <optgroup></optgroup> +</select> <script> const form = document.getElementById('form'); @@ -30,4 +34,18 @@ test(() => { assert_equals(option1.form, form, 'option1'); assert_equals(option2.form, form, 'option2'); }, 'option.form should look up the ancestor chain for a select element to get its form from.'); + +test(() => { + ['datalist', 'optgroup', 'datalist', 'hr'].forEach(tagName => { + ['select1', 'select2'].forEach(selectId => { + const select = document.getElementById(selectId); + const container = select.querySelector('optgroup'); + const blockingElement = document.createElement(tagName); + container.appendChild(blockingElement); + const option = document.createElement('option'); + blockingElement.appendChild(option); + assert_equals(option.form, null, `${selectId} ${tagName}: option.form should be null.`); + }); + }); +}, 'option.form should be null when options are nested in invalid elements.'); </script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-list.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-list.html @@ -14,6 +14,8 @@ // <option id=divOption> // <hr> // <option id=hrOption> +// <datalist> +// <option id=datalistOption> // <optgroup> // <option id=optgroupOption> // <optgroup id=nestedOptgroup> @@ -33,6 +35,10 @@ const hr = document.createElement('hr'); childSelect.appendChild(hr); const hrOption = document.createElement('option'); hr.appendChild(hrOption); +const datalist = document.createElement('datalist'); +childSelect.appendChild(datalist); +const datalistOption = document.createElement('option'); +datalist.appendChild(datalistOption); const optgroup = document.createElement('optgroup'); childSelect.appendChild(optgroup); const optgroupOption = document.createElement('option');