From 82497a78a808579e3dc1de2184f0a2353d6e84d3 Mon Sep 17 00:00:00 2001
From: Navid EMAD <navid.emad@yespark.fr>
Date: Wed, 29 Apr 2026 03:36:41 +0200
Subject: [PATCH 1/2] selector: walk fieldset/optgroup ancestors when matching
 :disabled
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `:disabled` and `:enabled` pseudo-class matchers in
`webapi/selector/List.zig` only checked the element's own `disabled`
content attribute. Per HTML "selector-disabled" + "concept-fe-disabled"
+ "concept-option-disabled", a form control inside <fieldset disabled>
matches :disabled (with the first-<legend> exception), and an <option>
inside <optgroup disabled> matches :disabled.

Route both pseudo-classes through `Element.isDisabled` (which already
walks the fieldset chain) and extend `isDisabled` to cover the
<option> + <optgroup disabled> case. <option> intentionally does NOT
inherit from <fieldset disabled> or <select disabled> — confirmed
against Chrome.

Closes #2314
---
 .../tests/element/disabled_inheritance.html   | 111 ++++++++++++++++++
 src/browser/webapi/Element.zig                |  17 +++
 src/browser/webapi/selector/List.zig          |   4 +-
 3 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 src/browser/tests/element/disabled_inheritance.html
diff --git a/src/browser/tests/element/disabled_inheritance.html b/src/browser/tests/element/disabled_inheritance.html
new file mode 100644
index 00000000..1fe41e73
--- /dev/null
+++ b/src/browser/tests/element/disabled_inheritance.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<form>
+  <fieldset id="fs" disabled>
+    <legend><input id="legend_input" type="text"></legend>
+    <input id="fs_input" type="text">
+    <button id="fs_button" type="button">btn</button>
+    <select id="fs_select"></select>
+    <textarea id="fs_textarea"></textarea>
+  </fieldset>
+
+  <fieldset id="fs_enabled">
+    <legend><input id="enabled_legend_input"></legend>
+    <input id="fs_enabled_input">
+  </fieldset>
+
+  <select id="sel_disabled" disabled>
+    <option id="opt_in_disabled_select">a</option>
+  </select>
+
+  <select id="sel_enabled">
+    <optgroup id="og_disabled" disabled label="g">
+      <option id="opt_in_disabled_optgroup">b</option>
+    </optgroup>
+    <optgroup id="og_enabled" label="h">
+      <option id="opt_in_enabled_optgroup">c</option>
+    </optgroup>
+    <option id="opt_loose">d</option>
+  </select>
+
+  <input id="own_disabled" type="text" disabled>
+  <input id="own_enabled" type="text">
+</form>
+
+<script id="fieldset_inheritance">
+{
+  // Form controls inside <fieldset disabled> match :disabled.
+  testing.expectTrue($('#fs_input').matches(':disabled'));
+  testing.expectTrue($('#fs_button').matches(':disabled'));
+  testing.expectTrue($('#fs_select').matches(':disabled'));
+  testing.expectTrue($('#fs_textarea').matches(':disabled'));
+
+  // The fieldset's first <legend> exempts its descendants.
+  testing.expectFalse($('#legend_input').matches(':disabled'));
+
+  // Enabled fieldset doesn't propagate.
+  testing.expectFalse($('#fs_enabled_input').matches(':disabled'));
+  testing.expectFalse($('#enabled_legend_input').matches(':disabled'));
+}
+</script>
+
+<script id="optgroup_inheritance">
+{
+  // <option> inside <optgroup disabled> matches :disabled.
+  testing.expectTrue($('#opt_in_disabled_optgroup').matches(':disabled'));
+
+  // <option> outside any disabled ancestor does not.
+  testing.expectFalse($('#opt_in_enabled_optgroup').matches(':disabled'));
+  testing.expectFalse($('#opt_loose').matches(':disabled'));
+
+  // <option> inside <select disabled> (no optgroup) does NOT match :disabled
+  // per HTML "concept-option-disabled" — only own attr or <optgroup disabled>
+  // parent contributes. <select disabled> itself matches, but does not
+  // propagate to its <option> children for selector purposes.
+  testing.expectFalse($('#opt_in_disabled_select').matches(':disabled'));
+}
+</script>
+
+<script id="own_attribute">
+{
+  testing.expectTrue($('#own_disabled').matches(':disabled'));
+  testing.expectFalse($('#own_enabled').matches(':disabled'));
+
+  // The disabled <fieldset>/<select>/<optgroup> elements themselves match.
+  testing.expectTrue($('#fs').matches(':disabled'));
+  testing.expectTrue($('#sel_disabled').matches(':disabled'));
+  testing.expectTrue($('#og_disabled').matches(':disabled'));
+}
+</script>
+
+<script id="enabled_complement">
+{
+  // :enabled is the negation of :disabled for elements that have a
+  // disabled concept. An <input> inside <fieldset disabled> is :disabled,
+  // so it must NOT also be :enabled.
+  testing.expectFalse($('#fs_input').matches(':enabled'));
+  testing.expectFalse($('#opt_in_disabled_optgroup').matches(':enabled'));
+  testing.expectTrue($('#fs_enabled_input').matches(':enabled'));
+  testing.expectTrue($('#opt_loose').matches(':enabled'));
+  // Legend descendants are enabled despite the disabled fieldset.
+  testing.expectTrue($('#legend_input').matches(':enabled'));
+}
+</script>
+
+<script id="querySelectorAll">
+{
+  // querySelectorAll(':disabled') should find every disabled element.
+  const ids = Array.from(document.querySelectorAll(':disabled')).map(e => e.id).sort();
+  // Expected (sorted):
+  //   fs, fs_button, fs_input, fs_select, fs_textarea,
+  //   og_disabled, opt_in_disabled_optgroup,
+  //   own_disabled, sel_disabled
+  const expected = [
+    'fs', 'fs_button', 'fs_input', 'fs_select', 'fs_textarea',
+    'og_disabled', 'opt_in_disabled_optgroup',
+    'own_disabled', 'sel_disabled',
+  ].sort();
+  testing.expectEqual(JSON.stringify(expected), JSON.stringify(ids));
+}
+</script>
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 4729711f..707f8a7f 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -605,6 +605,23 @@ pub fn isDisabled(self: *Element) bool {
         return true;
     }
 
+    // <option> takes a different inheritance path: per HTML
+    // "concept-option-disabled" an option is disabled when its parent is an
+    // <optgroup disabled>. It does NOT inherit from <select disabled> or
+    // an ancestor <fieldset disabled>.
+    if (self.getTag() == .option) {
+        if (self.asNode()._parent) |parent_node| {
+            if (parent_node.is(Element)) |parent_el| {
+                if (parent_el.getTag() == .optgroup and
+                    parent_el.getAttributeSafe(comptime .wrap("disabled")) != null)
+                {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     const element_node = self.asNode();
     var current: ?*Node = element_node._parent;
     while (current) |node| {
diff --git a/src/browser/webapi/selector/List.zig b/src/browser/webapi/selector/List.zig
index fd3a4204..3b1d3ffa 100644
--- a/src/browser/webapi/selector/List.zig
+++ b/src/browser/webapi/selector/List.zig
@@ -535,10 +535,10 @@ fn matchesPseudoClass(el: *Node.Element, pseudo: Selector.PseudoClass, scope: *N
             return input.getChecked();
         },
         .disabled => {
-            return el.getAttributeSafe(comptime .wrap("disabled")) != null;
+            return el.isDisabled();
         },
         .enabled => {
-            return el.getAttributeSafe(comptime .wrap("disabled")) == null;
+            return !el.isDisabled();
         },
         .indeterminate => {
             const input = el.is(Node.Element.Html.Input) orelse return false;

From aca651885021829de4ddbbcdfdd8f65b7b5b95ae Mon Sep 17 00:00:00 2001
From: Navid EMAD <navid.emad@yespark.fr>
Date: Wed, 29 Apr 2026 05:50:54 +0200
Subject: [PATCH 2/2] selector: gate :disabled / :enabled on the HTML "disabled
 concept"

Per HTML "concept-fe-disabled", only listed elements (button, input,
select, textarea, optgroup, option, fieldset) participate in the
disabled concept. Anything else (e.g. <div disabled>) has no disabled
state and never matches :disabled / :enabled.

Add Element.hasDisabledConcept() and gate isDisabled() on it. Update
the :enabled selector arm so non-form-controls no longer match.
---
 .../tests/element/disabled_inheritance.html    | 18 ++++++++++++++++++
 src/browser/webapi/Element.zig                 | 14 ++++++++++++++
 src/browser/webapi/selector/List.zig           |  2 +-
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/browser/tests/element/disabled_inheritance.html b/src/browser/tests/element/disabled_inheritance.html
index 1fe41e73..e7857dfa 100644
--- a/src/browser/tests/element/disabled_inheritance.html
+++ b/src/browser/tests/element/disabled_inheritance.html
@@ -33,6 +33,10 @@
   <input id="own_enabled" type="text">
 </form>
 
+<div id="div_plain">x</div>
+<div id="div_with_disabled_attr" disabled>y</div>
+<span id="span_plain">z</span>
+
 <script id="fieldset_inheritance">
 {
   // Form controls inside <fieldset disabled> match :disabled.
@@ -93,6 +97,20 @@
 }
 </script>
 
+<script id="concept_gate">
+{
+  // Per HTML "concept-fe-disabled", only listed elements (button, input,
+  // select, textarea, optgroup, option, fieldset) participate in the
+  // disabled concept. Anything else never matches :disabled / :enabled,
+  // even with an own [disabled] attribute.
+  testing.expectFalse($('#div_plain').matches(':disabled'));
+  testing.expectFalse($('#div_plain').matches(':enabled'));
+  testing.expectFalse($('#span_plain').matches(':enabled'));
+  testing.expectFalse($('#div_with_disabled_attr').matches(':disabled'));
+  testing.expectFalse($('#div_with_disabled_attr').matches(':enabled'));
+}
+</script>
+
 <script id="querySelectorAll">
 {
   // querySelectorAll(':disabled') should find every disabled element.
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 707f8a7f..b6983727 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -600,7 +600,21 @@ pub fn hasAttributeSafe(self: *const Element, name: String) bool {
     return attributes.hasSafe(name);
 }
 
+// Per HTML "concept-fe-disabled", only listed elements participate in the
+// disabled concept. Anything else (e.g. <div disabled>) has no disabled
+// state and never matches :disabled / :enabled.
+pub fn hasDisabledConcept(self: *const Element) bool {
+    return switch (self.getTag()) {
+        .button, .input, .select, .textarea, .optgroup, .option, .fieldset => true,
+        else => false,
+    };
+}
+
 pub fn isDisabled(self: *Element) bool {
+    if (!self.hasDisabledConcept()) {
+        return false;
+    }
+
     if (self.getAttributeSafe(comptime .wrap("disabled")) != null) {
         return true;
     }
diff --git a/src/browser/webapi/selector/List.zig b/src/browser/webapi/selector/List.zig
index 3b1d3ffa..c8274e42 100644
--- a/src/browser/webapi/selector/List.zig
+++ b/src/browser/webapi/selector/List.zig
@@ -538,7 +538,7 @@ fn matchesPseudoClass(el: *Node.Element, pseudo: Selector.PseudoClass, scope: *N
             return el.isDisabled();
         },
         .enabled => {
-            return !el.isDisabled();
+            return el.hasDisabledConcept() and !el.isDisabled();
         },
         .indeterminate => {
             const input = el.is(Node.Element.Html.Input) orelse return false;
