Prevent fieldsets from being disabled form controls

Fieldset elements themselves aren't actually supposed to be disabled form controls, they are just supposed to make their descendant field control elements disabled: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled This was causing a bug where SendMouseEventsDisabledFormControls prevents click/mouseup/mousedown events from being propagated at or above disabled fieldset elements. Fixed: 1422096, 1422547 Bug: 588760 Change-Id: Ifb76ac92f7f36b097666b4384f6de4bd561547cd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4321065 Reviewed-by: Mason Freed <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1122658}
web-platform-tests · Mar 27, 2023 · de685a7 · de685a7
1 parent 02ed58b
commit de685a7
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 9 deletions.
diff --git a/dom/events/Event-dispatch-on-disabled-elements.html b/dom/events/Event-dispatch-on-disabled-elements.html
@@ -19,7 +19,7 @@
 <body>
 <script>
 // HTML elements that can be disabled
-const formElements = ["button", "fieldset", "input", "select", "textarea"];
+const formElements = ["button", "input", "select", "textarea"];
 
 test(() => {
   for (const localName of formElements) {

diff --git a/html/semantics/disabled-elements/fieldset-event-propagation.tentative.html b/html/semantics/disabled-elements/fieldset-event-propagation.tentative.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled">
+<link rel=help href="https://github.com/whatwg/html/issues/5886#issuecomment-1460425364">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<div id=target1parent>
+  <fieldset disabled id=target1fieldset>
+    <div id=target1child>hello world</div>
+  </fieldset>
+</div>
+
+<div id=target2parent>
+  <fieldset disabled id=target2fieldset>hello world</div>
+</div>
+
+<script>
+promise_test(async () => {
+  let target1parentClicked = false;
+  let target1childClicked = false;
+  let target1fieldsetClicked = false;
+  target1parent.onclick = () => target1parentClicked = true;
+  target1child.onclick = () => target1childClicked = true;
+  target1fieldset.onclick = () => target1fieldsetClicked = true;
+
+  await test_driver.click(target1child);
+
+  assert_true(target1parentClicked, 'The parent of the fieldset should receive a click event.');
+  assert_true(target1childClicked, 'The child of the fieldset should receive a click event.');
+  assert_true(target1fieldsetClicked, 'The fieldset element should receive a click event.');
+}, 'Disabled fieldset elements should not prevent click event propagation.');
+
+promise_test(async () => {
+  let target2parentClicked = false;
+  let target2fieldsetClicked = false;
+  target2parent.onclick = () => target2parentClicked = true;
+  target2fieldset.onclick = () => target2fieldsetClicked = true;
+
+  await test_driver.click(target2fieldset);
+
+  assert_true(target2parentClicked, 'The parent of the fieldset should receive a click event.');
+  assert_true(target2fieldsetClicked, 'The fieldset element should receive a click event.');
+}, 'Disabled fieldset elements should not block click events.');
+</script>
diff --git a/html/semantics/selectors/pseudo-classes/disabled.html b/html/semantics/selectors/pseudo-classes/disabled.html
@@ -26,7 +26,6 @@
 </select>
 <textarea id=textarea1>textarea1</textarea>
 <textarea disabled id=textarea2>textarea2</textarea>
-<fieldset id=fieldset1></fieldset>
 <fieldset disabled id=fieldset2>
   <legend><input type=checkbox id=club></legend>
   <p><label>Name on card: <input id=clubname required></label></p>
@@ -40,21 +39,21 @@
 <progress disabled></progress>
 
 <script>
-  testSelectorIdsMatch(":disabled", ["button2", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should match only disabled elements");
+  testSelectorIdsMatch(":disabled", ["button2", "input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should match only disabled elements");
 
   document.getElementById("button2").removeAttribute("disabled");
-  testSelectorIdsMatch(":disabled", ["input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements whose disabled attribute has been removed");
+  testSelectorIdsMatch(":disabled", ["input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should not match elements whose disabled attribute has been removed");
 
   document.getElementById("button1").setAttribute("disabled", "disabled");
-  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set");
+  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set");
 
   document.getElementById("button1").setAttribute("disabled", "disabled");
-  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set twice");
+  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set twice");
 
   document.getElementById("input2").setAttribute("type", "submit"); // change input type to submit
-  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match disabled elements whose type has changed");
+  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should also match disabled elements whose type has changed");
 
   var input = document.createElement("input");
   input.setAttribute("disabled", "disabled");
-  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements not in the document");
+  testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "clubname", "clubnum"], "':disabled' should not match elements not in the document");
 </script>
diff --git a/html/semantics/selectors/pseudo-classes/enabled.html b/html/semantics/selectors/pseudo-classes/enabled.html
@@ -36,7 +36,6 @@
  </menu>
 </form>
 <fieldset id=fieldset1></fieldset>
-<fieldset disabled id=fieldset2></fieldset>
 
 <script>
   testSelectorIdsMatch(":enabled", ["button1", "input1", "select1", "optgroup1", "option1", "textarea1", "submitbutton", "fieldset1"], "':enabled' elements that are not disabled");