From 244f281577f2266d1ce01593618ce5325bce6265 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 8 Apr 2026 17:56:07 -0700
Subject: [PATCH] Check disabled when building selectedcontent list

This changes the behavior when selecting a new option in the case that
there are nested selectedcontent elements inside the select. Before, the
disabled selectedcontent would get cloned, but now it won't.

Context: https://github.com/whatwg/html/pull/12263#discussion_r2989223569

Bug: 458113204
Change-Id: I9afd550f21787b7daefb48c5a76712b5899e5b42
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7737623
Reviewed-by: David Grogan <dgrogan@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1611875}
---
 .../selectedcontent-mutations.html            |  2 --
 .../selectedcontent-nested.html               | 22 ++++++++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
index e4e3e994d91658..ff1b6a1b2b2f33 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-mutations.html
@@ -326,9 +326,7 @@
       "Type: childList | Target: select | Added: [#text: \"\"] | After: button",
       "Type: childList | Target: select | Added: [option] | After: #text: \"\"",
       "Type: childList | Target: selectedcontent | Removed: [#text: \"outer1\", selectedcontent, #text: \"\"]",
-      "Type: childList | Target: selectedcontent | Removed: [#text: \"inner1\"]",
       "Type: childList | Target: selectedcontent | Removed: [#text: \"outer2\", selectedcontent, #text: \"\"]",
-      "Type: childList | Target: selectedcontent | Removed: [#text: \"inner2\"]",
       "Type: childList | Target: option | Added: [#text: \"option\"]",
       "Type: childList | Target: selectedcontent | Added: [#text: \"option\"]",
       "Type: childList | Target: selectedcontent | Added: [#text: \"option\"]",
diff --git a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-nested.html b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-nested.html
index fd2df7a96d8dfb..31a364ae278136 100644
--- a/html/semantics/forms/the-select-element/customizable-select/selectedcontent-nested.html
+++ b/html/semantics/forms/the-select-element/customizable-select/selectedcontent-nested.html
@@ -5,9 +5,7 @@
 <script src="/resources/testharnessreport.js"></script>
 
 <select>
-  <button>
-    <selectedcontent id=main></selectedcontent>
-  </button>
+  <button></button>
   <option>one</option>
   <option>two</option>
 </select>
@@ -15,7 +13,6 @@
 <script>
 test(() => {
   const select = document.querySelector('select');
-  const mainSelectedcontent = document.querySelector('selectedcontent');
   const button = document.querySelector('button');
 
   const parentSelectedcontent = document.createElement('selectedcontent');
@@ -25,7 +22,13 @@
   childSelectedcontent.id = 'child';
   childSelectedcontent.textContent = 'child';
 
+  // Appending the disconnected childSelectedcontent to the disconnected
+  // parentSelectedcontent does not trigger any DOM changes.
   parentSelectedcontent.appendChild(childSelectedcontent);
+  // Appending the pair of nested selectedcontent elements triggers cloning
+  // for each of them. The child one is not updated because its post-insertion
+  // steps look for an ancestor select element, but the post-insertion steps of
+  // the parent one already removed it from the select element.
   button.appendChild(parentSelectedcontent);
 
   assert_equals(parentSelectedcontent.innerHTML, 'one',
@@ -35,12 +38,19 @@
   assert_equals(childSelectedcontent.parentNode, null,
     'child selectedcontent should get disconnected after inserting.');
 
+  // Appending childSelectedcontent to the connected parentSelectedcontent does
+  // not trigger any DOM changes because childSelectedcontent is marked as
+  // disabled for having an ancestor selectedcontent element.
   parentSelectedcontent.appendChild(childSelectedcontent);
+  // Assigning to select.value triggers an update for descendant selectedcontent
+  // elements. The child one is not updated because we check whether selectedcontent
+  // elements are disabled when building the list of selectedcontent elements to update.
   select.value = 'two';
+
   assert_equals(parentSelectedcontent.innerHTML, 'two',
     'parent selectedcontent should get updated when selected option is changed.');
-  assert_equals(childSelectedcontent.innerHTML, 'two',
-    'child selectedcontent should get updated when selected option is changed.');
+  assert_equals(childSelectedcontent.innerHTML, 'child',
+    'child selectedcontent should not get updated when selected option is changed.');
   assert_equals(childSelectedcontent.parentNode, null,
     'child selectedcontent should get disconnected when selected option is changed.');
 }, 'Modification behavior when nesting selectedcontent elements.');