commit 8b59d4bcb6a77a368f3dea48f7d262113c1ad2ed
parent 0b51d479a214ea86d501162b12a239c132f5dbaf
Author: Joey Arhar <jarhar@chromium.org>
Date: Tue, 14 Oct 2025 22:22:54 +0000
Bug 1993027 [wpt PR 55279] - Make options look for ancestor optgroups for disabledness, a=testonly
Automatic update from web-platform-tests
Make options look for ancestor optgroups for disabledness
Options were only looking at their parent node for an optgroup, but with
the new parser changes and content model from customizable select, we
need to be looking for an ancestor instead.
This covers the spec change here:
https://github.com/whatwg/html/issues/11707
Change-Id: Id3bd76d5f8926ed572c7995ac74bdcfa2925e8e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6995778
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1526201}
--
wpt-commits: 093662a3e509e807d3455711e68ebdcbffd58075
wpt-pr: 55279
Diffstat:
1 file changed, 78 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-disabled-optgroup.html b/testing/web-platform/tests/html/semantics/forms/the-select-element/customizable-select/option-disabled-optgroup.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/form-elements.html#concept-option-disabled">
+<link rel=help href="https://github.com/whatwg/html/issues/11707">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+ optgroup { color: black }
+ option { color: black }
+ option:disabled { color: gray }
+</style>
+
+<select>
+ <optgroup>
+ <div>
+ <option>What color is this?</option>
+ </div>
+ <optgroup>
+</select>
+
+<script>
+test(() => {
+ const optgroup = document.querySelector('optgroup');
+ const option = document.querySelector('option');
+ const optionComputedStyle = getComputedStyle(option);
+
+ assert_equals(optionComputedStyle.color, 'rgb(0, 0, 0)',
+ 'color before optgroup disabled');
+
+ optgroup.disabled = true;
+ assert_equals(optionComputedStyle.color, 'rgb(128, 128, 128)',
+ 'color after optgroup disabled');
+}, 'options should check ancestor optgroup for disabled state.');
+
+test(() => {
+ const parentOptgroup = document.createElement('optgroup');
+ const childOptgroup = document.createElement('optgroup');
+ parentOptgroup.appendChild(childOptgroup);
+ const option = document.createElement('option');
+ childOptgroup.appendChild(option);
+
+ parentOptgroup.disabled = true;
+ assert_false(option.matches(':disabled'));
+}, 'nested optgroup');
+
+test(() => {
+ const select = document.createElement('select');
+ const option = document.createElement('option');
+ select.appendChild(option);
+ select.disabled = true;
+
+ assert_false(option.matches(':disabled'));
+}, 'disabled select');
+
+test(() => {
+ const optgroup = document.createElement('optgroup');
+ const select = document.createElement('select');
+ optgroup.appendChild(select);
+ const option = document.createElement('option');
+ select.appendChild(option);
+
+ optgroup.disabled = true;
+ assert_false(option.matches(':disabled'));
+}, 'select in optgroup');
+
+test(() => {
+ const optgroup = document.createElement('optgroup');
+ const parentOption = document.createElement('option');
+ optgroup.appendChild(parentOption);
+ const childOption = document.createElement('option');
+ parentOption.appendChild(childOption);
+
+ optgroup.disabled = true;
+ assert_true(parentOption.matches(':disabled'), 'parent option');
+ assert_false(childOption.matches(':disabled'), 'child option');
+}, 'nested options');
+</script>
