diff --git a/bridge/bindings/qjs/binding_initializer.cc b/bridge/bindings/qjs/binding_initializer.cc
index 0a58fab2de..57e18bc57d 100644
--- a/bridge/bindings/qjs/binding_initializer.cc
+++ b/bridge/bindings/qjs/binding_initializer.cc
@@ -77,6 +77,7 @@
 #include "qjs_html_iframe_element.h"
 #include "qjs_html_image_element.h"
 #include "qjs_html_input_element.h"
+#include "qjs_html_optgroup_element.h"
 #include "qjs_html_option_element.h"
 #include "qjs_html_select_element.h"
 #include "qjs_html_italic_element.h"
@@ -221,6 +222,7 @@ void InstallBindings(ExecutingContext* context) {
   QJSHTMLImageElement::Install(context);
   QJSHTMLInputElement::Install(context);
   QJSHTMLSelectElement::Install(context);
+  QJSHTMLOptgroupElement::Install(context);
   QJSHTMLOptionElement::Install(context);
   QJSHTMLParagraphElement::Install(context);
   QJSHTMLStyleElement::Install(context);
diff --git a/bridge/bindings/qjs/wrapper_type_info.h b/bridge/bindings/qjs/wrapper_type_info.h
index f0d980a848..7a69e3fb92 100644
--- a/bridge/bindings/qjs/wrapper_type_info.h
+++ b/bridge/bindings/qjs/wrapper_type_info.h
@@ -145,6 +145,7 @@ enum {
   JS_CLASS_HTML_DEL_ELEMENT,
   JS_CLASS_HTML_INS_ELEMENT,
   JS_CLASS_HTML_SELECT_ELEMENT,
+  JS_CLASS_HTML_OPTGROUP_ELEMENT,
   JS_CLASS_HTML_OPTION_ELEMENT,
   JS_CLASS_HTML_TITLE_ELEMENT,
   JS_CLASS_HTML_META_ELEMENT,
diff --git a/bridge/bridge_sources.json5 b/bridge/bridge_sources.json5
index 13bdda443b..29c81fb7f7 100644
--- a/bridge/bridge_sources.json5
+++ b/bridge/bridge_sources.json5
@@ -544,6 +544,7 @@
     "core/html/forms/html_button_element.cc",
     "core/html/forms/html_input_element.cc",
     "core/html/forms/html_select_element.cc",
+    "core/html/forms/html_optgroup_element.cc",
     "core/html/forms/html_option_element.cc",
     "core/html/forms/html_form_element.cc",
     "core/html/forms/html_textarea_element.cc",
@@ -775,6 +776,7 @@
     "code_gen/qjs_html_button_element.cc",
     "code_gen/qjs_html_input_element.cc",
     "code_gen/qjs_html_select_element.cc",
+    "code_gen/qjs_html_optgroup_element.cc",
     "code_gen/qjs_html_option_element.cc",
     "code_gen/qjs_html_form_element.cc",
     "code_gen/qjs_html_textarea_element.cc",
diff --git a/bridge/core/binding_object.cc b/bridge/core/binding_object.cc
index 86b702ab58..c5d109ddaa 100644
--- a/bridge/core/binding_object.cc
+++ b/bridge/core/binding_object.cc
@@ -8,11 +8,16 @@
  */
 
 #include "binding_object.h"
+#include "core/css/style_change_reason.h"
+#include "core/css/style_engine.h"
+#include "core/css/style_recalc_change.h"
+#include "core/dom/qualified_name.h"
 #include "binding_call_methods.h"
 #include "bindings/qjs/exception_state.h"
 #include "bindings/qjs/script_promise_resolver.h"
 #include "core/dom/container_node.h"
 #include "core/dom/document.h"
+#include "core/dom/element.h"
 #include "core/dom/events/event_target.h"
 #include "core/dom/mutation_observer_interest_group.h"
 #include "core/executing_context.h"
@@ -46,6 +51,31 @@ static void UpdateStyleForThisDocumentIfBlinkEnabled(ExecutingContext* context)
   doc->UpdateStyleForThisDocument();
 }
 
+static bool NativeValueToBoolean(NativeValue value, JSContext* ctx) {
+  switch (value.tag) {
+    case NativeTag::TAG_BOOL:
+      return value.u.int64 != 0;
+    case NativeTag::TAG_INT:
+      return value.u.int64 != 0;
+    case NativeTag::TAG_NULL:
+    case NativeTag::TAG_UNDEFINED:
+      return false;
+    case NativeTag::TAG_STRING: {
+      AtomicString str = NativeValueConverter<NativeTypeString>::FromNativeValueShared(ctx, value);
+      if (str.IsNull() || str.empty()) {
+        return false;
+      }
+      auto lowered = str.LowerASCII();
+      if (lowered == "false"_s || lowered == "0"_s) {
+        return false;
+      }
+      return true;
+    }
+    default:
+      return true;
+  }
+}
+
 static void ReturnEventResultToDart(Dart_Handle persistent_handle,
                                     NativeValue* result,
                                     DartInvokeResultCallback result_callback) {
@@ -302,6 +332,47 @@ void BindingObject::SetBindingPropertyAsync(const webf::AtomicString& prop,
     canvas_context->requestPaint();
   }
 
+  if (auto element = const_cast<WidgetElement*>(DynamicTo<WidgetElement>(this))) {
+    AtomicString old_value = element->attributes()->getAttribute(prop, exception_state);
+    AtomicString new_value = AtomicString::Null();
+
+    static const AtomicString kChecked = AtomicString::CreateFromUTF8("checked");
+    static const AtomicString kSelected = AtomicString::CreateFromUTF8("selected");
+    static const AtomicString kDisabled = AtomicString::CreateFromUTF8("disabled");
+    static const AtomicString kRequired = AtomicString::CreateFromUTF8("required");
+
+    const bool is_boolean_attribute =
+        prop == kChecked || prop == kSelected || prop == kDisabled || prop == kRequired;
+    const bool bool_value = is_boolean_attribute ? NativeValueToBoolean(value, ctx()) : false;
+
+    if (is_boolean_attribute && !bool_value) {
+      element->attributes()->removeAttribute(prop, exception_state, true);
+      new_value = AtomicString::Null();
+    } else {
+      if (value.tag == NativeTag::TAG_STRING) {
+        new_value = NativeValueConverter<NativeTypeString>::FromNativeValueShared(ctx(), value);
+      } else if (is_boolean_attribute) {
+        new_value = prop;
+      } else {
+        ScriptValue script_value = ScriptValue(ctx(), value);
+        new_value = script_value.ToAtomicString(ctx());
+      }
+      element->attributes()->setAttribute(prop, new_value, exception_state, true);
+    }
+
+    element->AttributeChanged(Element::AttributeModificationParams(
+        prop, old_value, new_value, Element::AttributeModificationReason::kDirectly));
+
+    if (is_boolean_attribute && GetExecutingContext()->isBlinkEnabled()) {
+      element->GetDocument().EnsureStyleEngine().SetNeedsHasPseudoStateRecalc();
+      if (Element* root = element->GetDocument().documentElement()) {
+        root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                  StyleChangeReasonForTracing::FromAttribute(QualifiedName(prop)));
+      }
+      element->GetDocument().UpdateStyleForThisDocument();
+    }
+  }
+
   std::unique_ptr<SharedNativeString> args_01 = prop.ToNativeString();
 
   auto* args_02 = (NativeValue*)dart_malloc(sizeof(NativeValue));
@@ -402,13 +473,44 @@ NativeValue BindingObject::SetBindingProperty(const AtomicString& prop,
           MutationRecord::CreateAttributes(element, prop, AtomicString::Null(), old_value));
     }
 
-    // Sync property to attributes
-    if (value.tag == NativeTag::TAG_STRING) {
-      element->attributes()->setAttribute(
-          prop, NativeValueConverter<NativeTypeString>::FromNativeValueShared(ctx(), value), exception_state, true);
+    AtomicString old_value = element->attributes()->getAttribute(prop, exception_state);
+    AtomicString new_value = AtomicString::Null();
+
+    static const AtomicString kChecked = AtomicString::CreateFromUTF8("checked");
+    static const AtomicString kSelected = AtomicString::CreateFromUTF8("selected");
+    static const AtomicString kDisabled = AtomicString::CreateFromUTF8("disabled");
+    static const AtomicString kRequired = AtomicString::CreateFromUTF8("required");
+
+    const bool is_boolean_attribute =
+        prop == kChecked || prop == kSelected || prop == kDisabled || prop == kRequired;
+    const bool bool_value = is_boolean_attribute ? NativeValueToBoolean(value, ctx()) : false;
+
+    // Sync property to attributes for selector matching without emitting UI commands.
+    if (is_boolean_attribute && !bool_value) {
+      element->attributes()->removeAttribute(prop, exception_state, true);
+      new_value = AtomicString::Null();
     } else {
-      ScriptValue script_value = ScriptValue(ctx(), value);
-      element->attributes()->setAttribute(prop, script_value.ToAtomicString(ctx()), exception_state, true);
+      if (value.tag == NativeTag::TAG_STRING) {
+        new_value = NativeValueConverter<NativeTypeString>::FromNativeValueShared(ctx(), value);
+      } else if (is_boolean_attribute) {
+        new_value = prop;
+      } else {
+        ScriptValue script_value = ScriptValue(ctx(), value);
+        new_value = script_value.ToAtomicString(ctx());
+      }
+      element->attributes()->setAttribute(prop, new_value, exception_state, true);
+    }
+
+    element->AttributeChanged(Element::AttributeModificationParams(
+        prop, old_value, new_value, Element::AttributeModificationReason::kDirectly));
+
+    if (is_boolean_attribute && GetExecutingContext()->isBlinkEnabled()) {
+      element->GetDocument().EnsureStyleEngine().SetNeedsHasPseudoStateRecalc();
+      if (Element* root = element->GetDocument().documentElement()) {
+        root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                  StyleChangeReasonForTracing::FromAttribute(QualifiedName(prop)));
+      }
+      element->GetDocument().UpdateStyleForThisDocument();
     }
   }
 
diff --git a/bridge/core/css/check_pseudo_has_argument_context.h b/bridge/core/css/check_pseudo_has_argument_context.h
index 242e0f2ac7..f519a7b7d2 100644
--- a/bridge/core/css/check_pseudo_has_argument_context.h
+++ b/bridge/core/css/check_pseudo_has_argument_context.h
@@ -6,6 +6,8 @@
 #define WEBF_CORE_CSS_CHECK_PSEUDO_HAS_ARGUMENT_CONTEXT_H_
 
 #include "core/css/css_selector.h"
+#include "core/css/css_selector_list.h"
+#include "core/dom/has_invalidation_flags.h"
 #include "foundation/macros.h"
 #include <vector>
 
@@ -19,28 +21,233 @@ using Vector = std::vector<T>;
 class CheckPseudoHasArgumentContext {
   WEBF_STACK_ALLOCATED();
  public:
-  explicit CheckPseudoHasArgumentContext(const CSSSelector* selector) 
-      : selector_(selector) {}
-  
-  CSSSelector::RelationType LeftmostRelation() const {
-    // Return a default relation type
-    return CSSSelector::kRelativeDescendant;
+  explicit CheckPseudoHasArgumentContext(const CSSSelector* selector)
+      : selector_(selector) {
+    BuildContext();
   }
   
-  int AdjacentDistanceLimit() const { return 0; }
-  bool AdjacentDistanceFixed() const { return false; }
-  int DepthLimit() const { return 0; }
-  bool DepthFixed() const { return false; }
-  bool AllowSiblingsAffectedByHas() const { return false; }
-  unsigned GetSiblingsAffectedByHasFlags() const { return 0; }
-  bool SiblingCombinatorAtRightmost() const { return false; }
-  bool SiblingCombinatorBetweenChildOrDescendantCombinator() const { return false; }
-  Vector<unsigned> GetPseudoHasArgumentHashes() const { return Vector<unsigned>(); }
+  CSSSelector::RelationType LeftmostRelation() const { return leftmost_relation_; }
+  
+  int AdjacentDistanceLimit() const { return adjacent_distance_limit_; }
+  bool AdjacentDistanceFixed() const { return adjacent_distance_fixed_; }
+  int DepthLimit() const { return depth_limit_; }
+  bool DepthFixed() const { return depth_fixed_; }
+  bool AllowSiblingsAffectedByHas() const { return allow_siblings_affected_by_has_; }
+  unsigned GetSiblingsAffectedByHasFlags() const { return siblings_affected_by_has_flags_; }
+  bool SiblingCombinatorAtRightmost() const { return sibling_combinator_at_rightmost_; }
+  bool SiblingCombinatorBetweenChildOrDescendantCombinator() const {
+    return sibling_combinator_between_child_or_descendant_;
+  }
+  Vector<unsigned> GetPseudoHasArgumentHashes() const { return pseudo_has_argument_hashes_; }
   
  private:
+  static inline bool IsRelativeRelation(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kRelativeDescendant || relation == CSSSelector::kRelativeChild ||
+           relation == CSSSelector::kRelativeDirectAdjacent || relation == CSSSelector::kRelativeIndirectAdjacent;
+  }
+
+  static inline bool IsAdjacentRelation(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kDirectAdjacent || relation == CSSSelector::kIndirectAdjacent ||
+           relation == CSSSelector::kRelativeDirectAdjacent || relation == CSSSelector::kRelativeIndirectAdjacent;
+  }
+
+  static inline bool IsIndirectAdjacent(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kIndirectAdjacent || relation == CSSSelector::kRelativeIndirectAdjacent;
+  }
+
+  static inline bool IsRelativeAdjacent(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kRelativeDirectAdjacent || relation == CSSSelector::kRelativeIndirectAdjacent;
+  }
+
+  static inline bool IsDescendantRelation(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kDescendant || relation == CSSSelector::kRelativeDescendant;
+  }
+
+  static inline bool IsChildRelation(CSSSelector::RelationType relation) {
+    return relation == CSSSelector::kChild || relation == CSSSelector::kRelativeChild;
+  }
+
+  static inline bool IsChildOrDescendantRelation(CSSSelector::RelationType relation) {
+    return IsDescendantRelation(relation) || IsChildRelation(relation);
+  }
+
+  void BuildContext() {
+    leftmost_relation_ = CSSSelector::kRelativeDescendant;
+    adjacent_distance_limit_ = 0;
+    adjacent_distance_fixed_ = true;
+    depth_limit_ = 0;
+    depth_fixed_ = true;
+    allow_siblings_affected_by_has_ = false;
+    siblings_affected_by_has_flags_ = kNoSiblingsAffectedByHasFlags;
+    sibling_combinator_at_rightmost_ = false;
+    sibling_combinator_between_child_or_descendant_ = false;
+    pseudo_has_argument_hashes_.clear();
+
+    if (!selector_) {
+      return;
+    }
+
+    // Collect relations from rightmost to leftmost (towards the relative anchor).
+    Vector<CSSSelector::RelationType> relations;
+    bool found_relative_relation = false;
+    for (const CSSSelector* current = selector_; current; current = current->NextSimpleSelector()) {
+      AddHashesForSimpleSelector(*current);
+
+      CSSSelector::RelationType relation = current->Relation();
+      if (relation == CSSSelector::kSubSelector || relation == CSSSelector::kScopeActivation) {
+        continue;
+      }
+      relations.push_back(relation);
+      if (IsRelativeRelation(relation)) {
+        found_relative_relation = true;
+        break;
+      }
+    }
+
+    if (relations.empty()) {
+      // No explicit combinator in :has() argument (e.g. :has(.child)).
+      // Treat it as descendant matching so we traverse the full subtree.
+      depth_limit_ = 1;
+      depth_fixed_ = false;
+      return;
+    }
+
+    leftmost_relation_ = relations.back();
+    if (!found_relative_relation) {
+      // Be defensive: if the parser didn't convert the leftmost combinator
+      // to a relative relation, map it here so :has() matching can proceed.
+      leftmost_relation_ = ConvertRelationToRelative(leftmost_relation_);
+    }
+    sibling_combinator_at_rightmost_ = IsAdjacentRelation(relations.front());
+
+    // Determine if an adjacent combinator appears between child/descendant combinators.
+    bool seen_child_or_descendant_to_right = false;
+    for (const auto& relation : relations) {
+      if (IsChildOrDescendantRelation(relation)) {
+        seen_child_or_descendant_to_right = true;
+        continue;
+      }
+      if (IsAdjacentRelation(relation) && seen_child_or_descendant_to_right) {
+        sibling_combinator_between_child_or_descendant_ = true;
+      }
+    }
+
+    // Compute adjacency and depth constraints from leftmost (anchor side) to rightmost.
+    bool in_sibling_phase = IsRelativeAdjacent(leftmost_relation_);
+    for (auto it = relations.rbegin(); it != relations.rend(); ++it) {
+      CSSSelector::RelationType relation = *it;
+      if (IsChildOrDescendantRelation(relation)) {
+        depth_limit_++;
+        if (IsDescendantRelation(relation)) {
+          depth_fixed_ = false;
+        }
+        in_sibling_phase = false;
+        continue;
+      }
+
+      if (IsAdjacentRelation(relation) && in_sibling_phase) {
+        if (IsIndirectAdjacent(relation)) {
+          // Indirect adjacency is unbounded.
+          adjacent_distance_fixed_ = false;
+          adjacent_distance_limit_ = 0;
+        } else if (adjacent_distance_fixed_) {
+          adjacent_distance_limit_++;
+        }
+      }
+    }
+
+    allow_siblings_affected_by_has_ = IsRelativeAdjacent(leftmost_relation_);
+    if (allow_siblings_affected_by_has_) {
+      siblings_affected_by_has_flags_ =
+          depth_limit_ > 0 ? kFlagForSiblingDescendantRelationship : kFlagForSiblingRelationship;
+    }
+  }
+
+  void AddHash(unsigned hash) {
+    if (hash) {
+      pseudo_has_argument_hashes_.push_back(hash);
+    }
+  }
+
+  void AddHashesForSelectorList(const CSSSelector* selector_list_first) {
+    if (!selector_list_first) {
+      return;
+    }
+    for (const CSSSelector* complex = selector_list_first; complex; complex = CSSSelectorList::Next(*complex)) {
+      for (const CSSSelector* simple = complex; simple; simple = simple->NextSimpleSelector()) {
+        AddHashesForSimpleSelector(*simple);
+      }
+    }
+  }
+
+  void AddHashesForSimpleSelector(const CSSSelector& selector) {
+    switch (selector.Match()) {
+      case CSSSelector::kTag:
+        if (selector.TagQName().LocalName() != CSSSelector::UniversalSelectorAtom()) {
+          AddHash(selector.TagQName().LocalName().Hash() * kTagSalt);
+        }
+        break;
+      case CSSSelector::kId:
+        AddHash(selector.Value().Hash() * kIdSalt);
+        break;
+      case CSSSelector::kClass:
+        AddHash(selector.Value().Hash() * kClassSalt);
+        break;
+      case CSSSelector::kAttributeExact:
+      case CSSSelector::kAttributeSet:
+      case CSSSelector::kAttributeList:
+      case CSSSelector::kAttributeHyphen:
+      case CSSSelector::kAttributeContain:
+      case CSSSelector::kAttributeBegin:
+      case CSSSelector::kAttributeEnd:
+        AddHash(selector.Attribute().LocalName().Hash() * kAttributeSalt);
+        break;
+      case CSSSelector::kPseudoClass: {
+        CSSSelector::PseudoType pseudo_type = selector.GetPseudoType();
+        switch (pseudo_type) {
+          case CSSSelector::kPseudoNot:
+          case CSSSelector::kPseudoIs:
+          case CSSSelector::kPseudoWhere:
+          case CSSSelector::kPseudoParent:
+            AddHashesForSelectorList(selector.SelectorListOrParent());
+            break;
+          case CSSSelector::kPseudoVisited:
+          case CSSSelector::kPseudoRelativeAnchor:
+            break;
+          default:
+            AddHash(static_cast<unsigned>(pseudo_type) * kPseudoSalt);
+            if (const CSSSelectorList* list = selector.SelectorList()) {
+              AddHashesForSelectorList(list->First());
+            }
+            break;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  static constexpr unsigned kClassSalt = 13;
+  static constexpr unsigned kIdSalt = 29;
+  static constexpr unsigned kTagSalt = 7;
+  static constexpr unsigned kAttributeSalt = 19;
+  static constexpr unsigned kPseudoSalt = 23;
+
   const CSSSelector* selector_;
+
+  CSSSelector::RelationType leftmost_relation_;
+  int adjacent_distance_limit_;
+  bool adjacent_distance_fixed_;
+  int depth_limit_;
+  bool depth_fixed_;
+  bool allow_siblings_affected_by_has_;
+  unsigned siblings_affected_by_has_flags_;
+  bool sibling_combinator_at_rightmost_;
+  bool sibling_combinator_between_child_or_descendant_;
+  Vector<unsigned> pseudo_has_argument_hashes_;
 };
 
 }  // namespace webf
 
-#endif  // WEBF_CORE_CSS_CHECK_PSEUDO_HAS_ARGUMENT_CONTEXT_H_
\ No newline at end of file
+#endif  // WEBF_CORE_CSS_CHECK_PSEUDO_HAS_ARGUMENT_CONTEXT_H_
diff --git a/bridge/core/css/check_pseudo_has_traversal_iterator.h b/bridge/core/css/check_pseudo_has_traversal_iterator.h
index efe0e40fc1..9fe5d544f8 100644
--- a/bridge/core/css/check_pseudo_has_traversal_iterator.h
+++ b/bridge/core/css/check_pseudo_has_traversal_iterator.h
@@ -6,8 +6,10 @@
 #define WEBF_CORE_CSS_CHECK_PSEUDO_HAS_TRAVERSAL_ITERATOR_H_
 
 #include "core/dom/element.h"
+#include "core/dom/element_traversal.h"
 #include "core/css/check_pseudo_has_argument_context.h"
 #include "foundation/macros.h"
+#include <algorithm>
 #include <vector>
 
 namespace webf {
@@ -22,16 +24,90 @@ class CheckPseudoHasArgumentTraversalIterator {
  public:
   CheckPseudoHasArgumentTraversalIterator(Element& element, 
                                           const CheckPseudoHasArgumentContext& context)
-      : current_(&element), depth_(0) {}
+      : context_(context) {
+    Initialize(element);
+  }
   
   bool AtEnd() const { return current_ == nullptr; }
-  void operator++() { current_ = nullptr; }  // Stub - stop after first element
+  void operator++() { Advance(); }
   Element* CurrentElement() const { return current_; }
   int CurrentDepth() const { return depth_; }
   
  private:
-  Element* current_;
-  int depth_;
+  struct TraversalEntry {
+    Element* element;
+    int depth;
+  };
+
+  void Initialize(Element& anchor) {
+    stack_.clear();
+
+    const CSSSelector::RelationType leftmost_relation = context_.LeftmostRelation();
+    if (leftmost_relation == CSSSelector::kRelativeDirectAdjacent ||
+        leftmost_relation == CSSSelector::kRelativeIndirectAdjacent) {
+      int distance = 0;
+      for (Element* sibling = ElementTraversal::NextSibling(anchor); sibling;
+           sibling = ElementTraversal::NextSibling(*sibling)) {
+        distance++;
+        if (context_.AdjacentDistanceFixed() && context_.AdjacentDistanceLimit() > 0 &&
+            distance > context_.AdjacentDistanceLimit()) {
+          break;
+        }
+        stack_.push_back({sibling, 0});
+        if (context_.AdjacentDistanceFixed() && context_.AdjacentDistanceLimit() > 0 &&
+            distance == context_.AdjacentDistanceLimit()) {
+          break;
+        }
+      }
+    } else {
+      for (Element* child = ElementTraversal::FirstChild(anchor); child;
+           child = ElementTraversal::NextSibling(*child)) {
+        stack_.push_back({child, 1});
+      }
+    }
+
+    std::reverse(stack_.begin(), stack_.end());
+    Advance();
+  }
+
+  bool ShouldDescendFrom(int depth) const {
+    if (context_.DepthLimit() == 0) {
+      return false;
+    }
+    if (context_.DepthFixed() && depth >= context_.DepthLimit()) {
+      return false;
+    }
+    return true;
+  }
+
+  void PushChildren(Element& element, int depth) {
+    if (!ShouldDescendFrom(depth)) {
+      return;
+    }
+    for (Element* child = ElementTraversal::LastChild(element); child;
+         child = ElementTraversal::PreviousSibling(*child)) {
+      stack_.push_back({child, depth + 1});
+    }
+  }
+
+  void Advance() {
+    if (stack_.empty()) {
+      current_ = nullptr;
+      return;
+    }
+    TraversalEntry entry = stack_.back();
+    stack_.pop_back();
+    current_ = entry.element;
+    depth_ = entry.depth;
+    if (current_) {
+      PushChildren(*current_, depth_);
+    }
+  }
+
+  const CheckPseudoHasArgumentContext& context_;
+  Vector<TraversalEntry> stack_;
+  Element* current_{nullptr};
+  int depth_{0};
 };
 
 // Stub implementation of CheckPseudoHasFastRejectFilter
@@ -50,4 +126,4 @@ class CheckPseudoHasFastRejectFilter {
 
 }  // namespace webf
 
-#endif  // WEBF_CORE_CSS_CHECK_PSEUDO_HAS_TRAVERSAL_ITERATOR_H_
\ No newline at end of file
+#endif  // WEBF_CORE_CSS_CHECK_PSEUDO_HAS_TRAVERSAL_ITERATOR_H_
diff --git a/bridge/core/css/resolver/style_cascade.cc b/bridge/core/css/resolver/style_cascade.cc
index 085d1d2a27..5c70ac05b1 100644
--- a/bridge/core/css/resolver/style_cascade.cc
+++ b/bridge/core/css/resolver/style_cascade.cc
@@ -401,7 +401,7 @@ std::shared_ptr<MutableCSSPropertyValueSet> StyleCascade::BuildWinningPropertySe
     CSSPropertyName name;
     std::shared_ptr<const CSSValue> value;
     bool important;
-    uint32_t position;
+    CascadePriority priority;
   };
 
   std::vector<ExportedProperty> exported_properties;
@@ -461,17 +461,16 @@ std::shared_ptr<MutableCSSPropertyValueSet> StyleCascade::BuildWinningPropertySe
     // so the UICommand receives the original logical names unchanged.
     CSSPropertyName declared_name = prop_ref.Name();
     exported_properties.push_back(
-        ExportedProperty{id, declared_name, to_set, important, pos});
+        ExportedProperty{id, declared_name, to_set, important, *prio});
   }
 
-  // Sort by encoded position so that later declarations (including shorthands)
-  // are emitted after earlier ones, matching cascade/source order. This is
-  // important for consumers like the Dart style engine that replay SetStyle
-  // commands sequentially.
+  // Sort by cascade priority so higher-priority declarations are emitted last.
+  // This keeps shorthand/longhand interactions correct when Dart replays
+  // SetStyle commands sequentially without full cascade context.
   std::sort(exported_properties.begin(), exported_properties.end(),
             [](const ExportedProperty& a, const ExportedProperty& b) {
-              if (a.position != b.position) {
-                return a.position < b.position;
+              if (a.priority != b.priority) {
+                return a.priority < b.priority;
               }
               // Tie-breaker: keep deterministic order by property id.
               return static_cast<unsigned>(a.id) < static_cast<unsigned>(b.id);
diff --git a/bridge/core/css/selector_checker.cc b/bridge/core/css/selector_checker.cc
index 7a204fee96..29cfce0201 100644
--- a/bridge/core/css/selector_checker.cc
+++ b/bridge/core/css/selector_checker.cc
@@ -58,7 +58,9 @@
 #include "foundation/string/atomic_string.h"
 #include "foundation/casting.h"
 #include "foundation/logging.h"
+#include "foundation/native_value_converter.h"
 #include "bindings/qjs/exception_state.h"
+#include "core/dart_methods.h"
 
 namespace webf {
 
@@ -104,6 +106,82 @@ static bool IsFrameFocused(const Element& element) {
   return true;
 }
 
+static const AtomicString& SelectTagName() {
+  static const AtomicString kSelect = AtomicString::CreateFromUTF8("select");
+  return kSelect;
+}
+
+static const AtomicString& OptionTagName() {
+  static const AtomicString kOption = AtomicString::CreateFromUTF8("option");
+  return kOption;
+}
+
+static const AtomicString& SelectedAttrName() {
+  static const AtomicString kSelected = AtomicString::CreateFromUTF8("selected");
+  return kSelected;
+}
+
+static bool ReadWidgetBooleanProperty(Element& element, const AtomicString& property) {
+  if (!element.IsWidgetElement()) {
+    return false;
+  }
+  ExceptionState exception_state;
+  NativeValue result =
+      element.GetBindingProperty(property, FlushUICommandReason::kDependentsOnElement, exception_state);
+  if (exception_state.HasException()) {
+    return false;
+  }
+  switch (result.tag) {
+    case NativeTag::TAG_BOOL:
+      return NativeValueConverter<NativeTypeBool>::FromNativeValue(result);
+    case NativeTag::TAG_INT:
+      return result.u.int64 != 0;
+    case NativeTag::TAG_STRING: {
+      AtomicString value = NativeValueConverter<NativeTypeString>::FromNativeValueShared(element.ctx(), result);
+      if (value.IsNull() || value.empty()) {
+        return false;
+      }
+      auto lowered = value.LowerASCII();
+      if (lowered == "false"_s || lowered == "0"_s) {
+        return false;
+      }
+      return true;
+    }
+    default:
+      return false;
+  }
+}
+
+static Element* FindSelectAncestor(Element& element) {
+  for (Element* current = element.parentElement(); current; current = current->parentElement()) {
+    if (current->HasTagName(SelectTagName())) {
+      return current;
+    }
+  }
+  return nullptr;
+}
+
+static bool HasAnySelectedOption(Element& select) {
+  for (Element& descendant : ElementTraversal::DescendantsOf(select)) {
+    if (!descendant.HasTagName(OptionTagName())) {
+      continue;
+    }
+    if (descendant.HasAttributeIgnoringNamespace(SelectedAttrName())) {
+      return true;
+    }
+  }
+  return false;
+}
+
+static Element* FirstOptionElement(Element& select) {
+  for (Element& descendant : ElementTraversal::DescendantsOf(select)) {
+    if (descendant.HasTagName(OptionTagName())) {
+      return &descendant;
+    }
+  }
+  return nullptr;
+}
+
 // Type alias for vector compatibility
 template<typename T>
 using Vector = std::vector<T>;
@@ -1805,16 +1883,25 @@ bool SelectorChecker::CheckPseudoClass(const SelectorCheckingContext& context, M
    case CSSSelector::kPseudoInvalid:
      return element.MatchesValidityPseudoClasses() && !element.IsValidElement();
    case CSSSelector::kPseudoChecked: {
-     // TODO: Implement form control checked state
-     // if (auto* input_element = DynamicTo<HTMLInputElement>(element)) {
-     //   if (input_element->ShouldAppearChecked() && !input_element->ShouldAppearIndeterminate()) {
-     //     return true;
-     //   }
-     // } else if (auto* option_element = DynamicTo<HTMLOptionElement>(element)) {
-     //   if (option_element->Selected()) {
-     //     return true;
-     //   }
-     // }
+     // Minimal :checked support for WebF's DOM model.
+     // Match checkable inputs with [checked] and <option> with [selected].
+     // This keeps selector matching consistent with attribute-based state.
+     const AtomicString tag_name = element.localName();
+     if (tag_name == "input") {
+       return element.IsCheckedState();
+     } else if (tag_name == "option") {
+       if (element.HasAttributeIgnoringNamespace(SelectedAttrName())) {
+         return true;
+       }
+       if (Element* select = FindSelectAncestor(element)) {
+         if (!HasAnySelectedOption(*select)) {
+           Element* first = FirstOptionElement(*select);
+           if (first == &element) {
+             return true;
+           }
+         }
+       }
+     }
      break;
    }
    case CSSSelector::kPseudoIndeterminate:
diff --git a/bridge/core/css/style_engine.cc b/bridge/core/css/style_engine.cc
index b097002644..b37016981f 100644
--- a/bridge/core/css/style_engine.cc
+++ b/bridge/core/css/style_engine.cc
@@ -1153,6 +1153,21 @@ void StyleEngine::IdChangedForElement(const AtomicString& old_id,
   if (!invalidation_lists.descendants.empty() || !invalidation_lists.siblings.empty()) {
     pending_invalidations_.ScheduleInvalidationSetsForNode(invalidation_lists, element);
   }
+
+  bool needs_has_invalidation = false;
+  if (!old_id.IsNull() && !old_id.empty() && features.NeedsHasInvalidationForId(old_id)) {
+    needs_has_invalidation = true;
+  }
+  if (!new_id.IsNull() && !new_id.empty() && features.NeedsHasInvalidationForId(new_id)) {
+    needs_has_invalidation = true;
+  }
+  if (needs_has_invalidation) {
+    SetNeedsHasPseudoStateRecalc();
+    if (Element* root = document.documentElement()) {
+      root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                StyleChangeReasonForTracing::Create(style_change_reason::kAffectedByHas));
+    }
+  }
 }
 
 void StyleEngine::ClassAttributeChangedForElement(const AtomicString& old_class_value,
@@ -1198,6 +1213,38 @@ void StyleEngine::ClassAttributeChangedForElement(const AtomicString& old_class_
   if (!invalidation_lists.descendants.empty() || !invalidation_lists.siblings.empty()) {
     pending_invalidations_.ScheduleInvalidationSetsForNode(invalidation_lists, element);
   }
+
+  bool needs_has_invalidation = false;
+  if (features.NeedsHasInvalidationForClassChange()) {
+    auto check_for_has = [&](const AtomicString& value) {
+      if (needs_has_invalidation || value.IsNull() || value.empty()) {
+        return;
+      }
+      SpaceSplitString tokens(value);
+      uint32_t size = tokens.size();
+      for (uint32_t i = 0; i < size; ++i) {
+        const AtomicString& class_name = tokens[i];
+        if (class_name.empty()) {
+          continue;
+        }
+        if (features.NeedsHasInvalidationForClass(class_name)) {
+          needs_has_invalidation = true;
+          return;
+        }
+      }
+    };
+
+    check_for_has(old_class_value);
+    check_for_has(new_class_value);
+  }
+
+  if (needs_has_invalidation) {
+    SetNeedsHasPseudoStateRecalc();
+    if (Element* root = document.documentElement()) {
+      root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                StyleChangeReasonForTracing::Create(style_change_reason::kAffectedByHas));
+    }
+  }
 }
 
 void StyleEngine::AttributeChangedForElement(const AtomicString& attribute_local_name,
@@ -1230,6 +1277,14 @@ void StyleEngine::AttributeChangedForElement(const AtomicString& attribute_local
   if (!invalidation_lists.descendants.empty() || !invalidation_lists.siblings.empty()) {
     pending_invalidations_.ScheduleInvalidationSetsForNode(invalidation_lists, element);
   }
+
+  if (features.NeedsHasInvalidationForAttributeChange()) {
+    SetNeedsHasPseudoStateRecalc();
+    if (Element* root = document.documentElement()) {
+      root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                StyleChangeReasonForTracing::Create(style_change_reason::kAffectedByHas));
+    }
+  }
 }
 
 void StyleEngine::RecalcStyleForSubtree(Element& root_element) {
@@ -2218,6 +2273,18 @@ void StyleEngine::RecalcStyle(StyleRecalcChange change, const StyleRecalcContext
     return;
   }
 
+  if (needs_has_pseudo_state_recalc_) {
+    // :has() can affect ancestors/siblings outside the current recalc root.
+    // Force a full-document recalc so relational selectors stay correct.
+    Element* doc_root = document.documentElement();
+    if (doc_root && root != doc_root) {
+      style_recalc_root_.Clear();
+      root = doc_root;
+    }
+    change = change.ForceRecalcDescendants();
+    needs_has_pseudo_state_recalc_ = false;
+  }
+
   PendingInvalidationMap& map = pending_invalidations_.GetPendingInvalidationMap();
 
   // In addition to selector-based invalidation (tracked via
diff --git a/bridge/core/css/style_engine.h b/bridge/core/css/style_engine.h
index 48ddba59cb..ded87fb7de 100644
--- a/bridge/core/css/style_engine.h
+++ b/bridge/core/css/style_engine.h
@@ -306,6 +306,10 @@ class StyleEngine final {
   // Set to true if we are allowed to skip recalc for a size container subtree.
   bool allow_skip_style_recalc_{false};
 
+  // Forces a full subtree recalc on the next style update to keep :has()
+  // selectors in sync with pseudo-state changes.
+  bool needs_has_pseudo_state_recalc_{false};
+
   PendingInvalidations pending_invalidations_;
   // Root for selector-based style invalidation. Updated when nodes are marked
   // with NeedsStyleInvalidation / ChildNeedsStyleInvalidation and consulted by
@@ -352,6 +356,9 @@ class StyleEngine final {
  public:
   int media_query_recalc_count_for_test() const { return media_query_recalc_count_for_test_; }
 
+  void SetNeedsHasPseudoStateRecalc() { needs_has_pseudo_state_recalc_ = true; }
+  bool NeedsHasPseudoStateRecalc() const { return needs_has_pseudo_state_recalc_; }
+
   // Returns the author stylesheets (inline <style> and <link rel=stylesheet>)
   // in DOM order, suitable for cascade ordering.
   const std::vector<Member<CSSStyleSheet>>& AuthorStyleSheetsInDocumentOrder();
diff --git a/bridge/core/dom/container_node.cc b/bridge/core/dom/container_node.cc
index 1b9ed55331..9d3cf5efc6 100644
--- a/bridge/core/dom/container_node.cc
+++ b/bridge/core/dom/container_node.cc
@@ -33,6 +33,7 @@
 #include "core/css/parser/css_parser_context.h"
 #include "core/css/selector_checker.h"
 #include "core/css/style_engine.h"
+#include "core/css/style_change_reason.h"
 #include "core/css/style_sheet_contents.h"
 #include "foundation/logging.h"
 #include "bindings/qjs/cppgc/gc_visitor.h"
@@ -52,9 +53,9 @@ namespace webf {
 
 namespace {
 
-std::shared_ptr<CSSSelectorList> ParseSelectorListOrThrow(const AtomicString& selectors,
-                                                          ExceptionState& exception_state,
-                                                          JSContext* ctx) {
+std::shared_ptr<CSSSelectorList> ParseSelectorListOrThrow(const AtomicString &selectors,
+                                                          ExceptionState &exception_state,
+                                                          JSContext *ctx) {
   auto parser_context = std::make_shared<CSSParserContext>(kHTMLStandardMode);
   auto sheet = std::make_shared<StyleSheetContents>(parser_context);
 
@@ -72,12 +73,12 @@ std::shared_ptr<CSSSelectorList> ParseSelectorListOrThrow(const AtomicString& se
   return selector_list;
 }
 
-bool MatchesAnySelectorInList(Element& element, const CSSSelectorList& selector_list, const ContainerNode& scope) {
+bool MatchesAnySelectorInList(Element &element, const CSSSelectorList &selector_list, const ContainerNode &scope) {
   SelectorChecker checker(SelectorChecker::kQueryingRules);
   SelectorChecker::SelectorCheckingContext context(&element);
   context.scope = &scope;
 
-  for (const CSSSelector* selector = selector_list.First(); selector; selector = CSSSelectorList::Next(*selector)) {
+  for (const CSSSelector *selector = selector_list.First(); selector; selector = CSSSelectorList::Next(*selector)) {
     context.selector = selector;
     SelectorChecker::MatchResult result;
     if (checker.Match(context, result)) {
@@ -90,24 +91,24 @@ bool MatchesAnySelectorInList(Element& element, const CSSSelectorList& selector_
 }  // namespace
 
 // Legacy impls due to limited time, should remove this func in the future.
-HTMLCollection* ContainerNode::Children() {
+HTMLCollection *ContainerNode::Children() {
   return EnsureCachedCollection<HTMLCollection>(CollectionType::kNodeChildren);
 }
 
 unsigned ContainerNode::CountChildren() const {
   unsigned count = 0;
-  for (Node* node = firstChild(); node; node = node->nextSibling())
+  for (Node *node = firstChild(); node; node = node->nextSibling())
     count++;
   return count;
 }
 
-Element* ContainerNode::QuerySelector(const AtomicString& selectors, ExceptionState& exception_state) {
+Element *ContainerNode::QuerySelector(const AtomicString &selectors, ExceptionState &exception_state) {
   auto selector_list = ParseSelectorListOrThrow(selectors, exception_state, ctx());
   if (!selector_list) {
     return nullptr;
   }
 
-  for (Element& element : ElementTraversal::DescendantsOf(*this)) {
+  for (Element &element : ElementTraversal::DescendantsOf(*this)) {
     if (MatchesAnySelectorInList(element, *selector_list, *this)) {
       return &element;
     }
@@ -115,18 +116,18 @@ Element* ContainerNode::QuerySelector(const AtomicString& selectors, ExceptionSt
   return nullptr;
 }
 
-Element* ContainerNode::QuerySelector(const AtomicString& selectors) {
+Element *ContainerNode::QuerySelector(const AtomicString &selectors) {
   return QuerySelector(selectors, ASSERT_NO_EXCEPTION());
 }
 
-std::vector<Element*> ContainerNode::QuerySelectorAll(const AtomicString& selectors, ExceptionState& exception_state) {
+std::vector<Element *> ContainerNode::QuerySelectorAll(const AtomicString &selectors, ExceptionState &exception_state) {
   auto selector_list = ParseSelectorListOrThrow(selectors, exception_state, ctx());
   if (!selector_list) {
     return {};
   }
 
-  std::vector<Element*> result;
-  for (Element& element : ElementTraversal::DescendantsOf(*this)) {
+  std::vector<Element *> result;
+  for (Element &element : ElementTraversal::DescendantsOf(*this)) {
     if (MatchesAnySelectorInList(element, *selector_list, *this)) {
       result.emplace_back(&element);
     }
@@ -134,19 +135,19 @@ std::vector<Element*> ContainerNode::QuerySelectorAll(const AtomicString& select
   return result;
 }
 
-std::vector<Element*> ContainerNode::QuerySelectorAll(const AtomicString& selectors) {
+std::vector<Element *> ContainerNode::QuerySelectorAll(const AtomicString &selectors) {
   return QuerySelectorAll(selectors, ASSERT_NO_EXCEPTION());
 }
 
-inline void GetChildNodes(ContainerNode& node, NodeVector& nodes) {
+inline void GetChildNodes(ContainerNode &node, NodeVector &nodes) {
   assert(!nodes.size());
-  for (Node* child = node.firstChild(); child; child = child->nextSibling())
+  for (Node *child = node.firstChild(); child; child = child->nextSibling())
     nodes.push_back(child);
 }
 
 class ContainerNode::AdoptAndInsertBefore {
  public:
-  inline void operator()(ContainerNode& container, Node& child, Node* next) const {
+  inline void operator()(ContainerNode &container, Node &child, Node *next) const {
     assert(next);
     assert(next->parentNode() == &container);
     container.InsertBeforeCommon(*next, child);
@@ -155,15 +156,15 @@ class ContainerNode::AdoptAndInsertBefore {
 
 class ContainerNode::AdoptAndAppendChild {
  public:
-  inline void operator()(ContainerNode& container, Node& child, Node*) const { container.AppendChildCommon(child); }
+  inline void operator()(ContainerNode &container, Node &child, Node *) const { container.AppendChildCommon(child); }
 };
 
-bool ContainerNode::IsChildTypeAllowed(const Node& child) const {
-  auto* child_fragment = DynamicTo<DocumentFragment>(child);
+bool ContainerNode::IsChildTypeAllowed(const Node &child) const {
+  auto *child_fragment = DynamicTo<DocumentFragment>(child);
   if (!child_fragment)
     return ChildTypeAllowed(child.nodeType());
 
-  for (Node* node = child_fragment->firstChild(); node; node = node->nextSibling()) {
+  for (Node *node = child_fragment->firstChild(); node; node = node->nextSibling()) {
     if (!ChildTypeAllowed(node->nodeType()))
       return false;
   }
@@ -173,15 +174,15 @@ bool ContainerNode::IsChildTypeAllowed(const Node& child) const {
 // Returns true if |new_child| contains this node. In that case,
 // |exception_state| has an exception.
 // https://dom.spec.whatwg.org/#concept-tree-host-including-inclusive-ancestor
-bool ContainerNode::IsHostIncludingInclusiveAncestorOfThis(const Node& new_child,
-                                                           ExceptionState& exception_state) const {
+bool ContainerNode::IsHostIncludingInclusiveAncestorOfThis(const Node &new_child,
+                                                           ExceptionState &exception_state) const {
   // Non-ContainerNode can contain nothing.
   if (!new_child.IsContainerNode())
     return false;
 
   bool child_contains_parent = false;
-  const Node& root = TreeRoot();
-  auto* fragment = DynamicTo<DocumentFragment>(root);
+  const Node &root = TreeRoot();
+  auto *fragment = DynamicTo<DocumentFragment>(root);
   if (fragment && fragment->IsTemplateContent()) {
     child_contains_parent = new_child.ContainsIncludingHostElements(*this);
   } else {
@@ -193,10 +194,10 @@ bool ContainerNode::IsHostIncludingInclusiveAncestorOfThis(const Node& new_child
   return child_contains_parent;
 }
 
-inline bool CheckReferenceChildParent(const Node& parent,
-                                      const Node* next,
-                                      const Node* old_child,
-                                      ExceptionState& exception_state) {
+inline bool CheckReferenceChildParent(const Node &parent,
+                                      const Node *next,
+                                      const Node *old_child,
+                                      ExceptionState &exception_state) {
   if (next && next->parentNode() != &parent) {
     exception_state.ThrowException(next->ctx(), ErrorType::TypeError,
                                    "The node before which the new node is "
@@ -215,21 +216,21 @@ inline bool CheckReferenceChildParent(const Node& parent,
 // This dispatches various events; DOM mutation events, blur events, IFRAME
 // unload events, etc.
 // Returns true if DOM mutation should be proceeded.
-static inline bool CollectChildrenAndRemoveFromOldParent(Node& node,
-                                                         NodeVector& nodes,
-                                                         ExceptionState& exception_state) {
-  if (auto* fragment = DynamicTo<DocumentFragment>(node)) {
+static inline bool CollectChildrenAndRemoveFromOldParent(Node &node,
+                                                         NodeVector &nodes,
+                                                         ExceptionState &exception_state) {
+  if (auto *fragment = DynamicTo<DocumentFragment>(node)) {
     GetChildNodes(*fragment, nodes);
     fragment->RemoveChildren();
     return !nodes.empty();
   }
   nodes.push_back(&node);
-  if (ContainerNode* old_parent = node.parentNode())
+  if (ContainerNode *old_parent = node.parentNode())
     old_parent->RemoveChild(&node, exception_state);
   return !exception_state.HasException() && !nodes.empty();
 }
 
-Node* ContainerNode::InsertBefore(Node* new_child, Node* ref_child, ExceptionState& exception_state) {
+Node *ContainerNode::InsertBefore(Node *new_child, Node *ref_child, ExceptionState &exception_state) {
   assert(new_child);
   // https://dom.spec.whatwg.org/#concept-node-pre-insert
 
@@ -265,7 +266,7 @@ Node* ContainerNode::InsertBefore(Node* new_child, Node* ref_child, ExceptionSta
   return new_child;
 }
 
-Node* ContainerNode::ReplaceChild(Node* new_child, Node* old_child, ExceptionState& exception_state) {
+Node *ContainerNode::ReplaceChild(Node *new_child, Node *old_child, ExceptionState &exception_state) {
   assert(new_child);
   // https://dom.spec.whatwg.org/#concept-node-replace
 
@@ -279,7 +280,7 @@ Node* ContainerNode::ReplaceChild(Node* new_child, Node* old_child, ExceptionSta
     return old_child;
 
   // 7. Let reference child be child’s next sibling.
-  Node* next = old_child->nextSibling();
+  Node *next = old_child->nextSibling();
   // 8. If reference child is node, set it to node’s next sibling.
   if (next == new_child)
     next = new_child->nextSibling();
@@ -288,7 +289,7 @@ Node* ContainerNode::ReplaceChild(Node* new_child, Node* old_child, ExceptionSta
   // Though the following CollectChildrenAndRemoveFromOldParent() also calls
   // RemoveChild(), we'd like to call RemoveChild() here to make a separated
   // MutationRecord.
-  if (ContainerNode* new_child_parent = new_child->parentNode()) {
+  if (ContainerNode *new_child_parent = new_child->parentNode()) {
     new_child_parent->RemoveChild(new_child, exception_state);
     if (exception_state.HasException())
       return nullptr;
@@ -309,7 +310,7 @@ Node* ContainerNode::ReplaceChild(Node* new_child, Node* old_child, ExceptionSta
     // 12. If child’s parent is not null, run these substeps:
     //    1. Set removedNodes to a list solely containing child.
     //    2. Remove child from its parent with the suppress observers flag set.
-    if (ContainerNode* old_child_parent = old_child->parentNode()) {
+    if (ContainerNode *old_child_parent = old_child->parentNode()) {
       old_child_parent->RemoveChild(old_child, exception_state);
       if (exception_state.HasException())
         return nullptr;
@@ -334,14 +335,14 @@ Node* ContainerNode::ReplaceChild(Node* new_child, Node* old_child, ExceptionSta
   return old_child;
 }
 
-Node* ContainerNode::RemoveChild(Node* old_child, ExceptionState& exception_state) {
+Node *ContainerNode::RemoveChild(Node *old_child, ExceptionState &exception_state) {
   // NotFoundError: Raised if oldChild is not a child of this node.
   if (!old_child || old_child->parentNode() != this) {
     exception_state.ThrowException(ctx(), ErrorType::TypeError, "The node to be removed is not a child of this node.");
     return nullptr;
   }
 
-  Node* child = old_child;
+  Node *child = old_child;
 
   // Events fired when blurring currently focused node might have moved this
   // child into a different parent.
@@ -356,10 +357,10 @@ Node* ContainerNode::RemoveChild(Node* old_child, ExceptionState& exception_stat
   WillRemoveChild(*child);
 
   {
-    Node* prev = child->previousSibling();
-    Node* next = child->nextSibling();
+    Node *prev = child->previousSibling();
+    Node *next = child->nextSibling();
     if (GetDocument().GetExecutingContext()->isBlinkEnabled()) {
-      StyleEngine& engine = GetDocument().EnsureStyleEngine();
+      StyleEngine &engine = GetDocument().EnsureStyleEngine();
       StyleEngine::DOMRemovalScope style_scope(engine);
       RemoveBetween(prev, next, *child);
       NotifyNodeRemoved(*child);
@@ -372,7 +373,7 @@ Node* ContainerNode::RemoveChild(Node* old_child, ExceptionState& exception_stat
   return child;
 }
 
-Node* ContainerNode::AppendChild(Node* new_child, ExceptionState& exception_state) {
+Node *ContainerNode::AppendChild(Node *new_child, ExceptionState &exception_state) {
   assert(new_child);
   // Make sure adding the new child is ok
   if (!EnsurePreInsertionValidity(*new_child, nullptr, nullptr, exception_state))
@@ -393,11 +394,11 @@ Node* ContainerNode::AppendChild(Node* new_child, ExceptionState& exception_stat
   return new_child;
 }
 
-Node* ContainerNode::AppendChild(Node* new_child) {
+Node *ContainerNode::AppendChild(Node *new_child) {
   return AppendChild(new_child, ASSERT_NO_EXCEPTION());
 }
 
-void ContainerNode::WillRemoveChild(Node& child) {
+void ContainerNode::WillRemoveChild(Node &child) {
   assert(child.parentNode() == this);
   ChildListMutationScope(*this).WillRemoveChild(child);
   child.NotifyMutationObserversNodeWillDetach();
@@ -412,18 +413,18 @@ void ContainerNode::WillRemoveChildren() {
   GetChildNodes(*this, children);
 
   ChildListMutationScope mutation(*this);
-  for (const auto& node : children) {
+  for (const auto &node : children) {
     assert(node);
-    Node& child = *node;
+    Node &child = *node;
     mutation.WillRemoveChild(child);
     child.NotifyMutationObserversNodeWillDetach();
   }
 }
 
-bool ContainerNode::EnsurePreInsertionValidity(const Node& new_child,
-                                               const Node* next,
-                                               const Node* old_child,
-                                               ExceptionState& exception_state) const {
+bool ContainerNode::EnsurePreInsertionValidity(const Node &new_child,
+                                               const Node *next,
+                                               const Node *old_child,
+                                               ExceptionState &exception_state) const {
   assert(!(next && old_child));
 
   // Use common case fast path if possible.
@@ -489,10 +490,10 @@ void ContainerNode::RemoveChildren() {
   bool has_element_child = false;
 
   if (GetDocument().GetExecutingContext()->isBlinkEnabled()) {
-    StyleEngine& engine = GetDocument().EnsureStyleEngine();
+    StyleEngine &engine = GetDocument().EnsureStyleEngine();
     StyleEngine::DOMRemovalScope style_scope(engine);
 
-    while (Node* child = first_child_) {
+    while (Node *child = first_child_) {
       if (child->IsElementNode()) {
         has_element_child = true;
       }
@@ -500,7 +501,7 @@ void ContainerNode::RemoveChildren() {
       NotifyNodeRemoved(*child);
     }
   } else {
-    while (Node* child = first_child_) {
+    while (Node *child = first_child_) {
       if (child->IsElementNode()) {
         has_element_child = true;
       }
@@ -516,14 +517,14 @@ void ContainerNode::RemoveChildren() {
   ChildrenChanged(change);
 }
 
-void ContainerNode::CloneChildNodesFrom(const ContainerNode& node, CloneChildrenFlag flag) {
+void ContainerNode::CloneChildNodesFrom(const ContainerNode &node, CloneChildrenFlag flag) {
   assert(flag != CloneChildrenFlag::kSkip);
-  for (const Node& child : NodeTraversal::ChildrenOf(node)) {
+  for (const Node &child : NodeTraversal::ChildrenOf(node)) {
     AppendChild(child.Clone(GetDocument(), flag));
   }
 }
 
-void ContainerNode::ParserAppendChild(Node* new_child) {
+void ContainerNode::ParserAppendChild(Node *new_child) {
   assert(new_child);
   assert(!new_child->IsDocumentFragment());
   assert(!IsA<HTMLTemplateElement>(this));
@@ -531,7 +532,7 @@ void ContainerNode::ParserAppendChild(Node* new_child) {
   // FIXME: parserRemoveChild can run script which could then insert the
   // newChild back into the page. Loop until the child is actually removed.
   // See: fast/parser/execute-script-during-adoption-agency-removal.html
-  while (ContainerNode* parent = new_child->parentNode())
+  while (ContainerNode *parent = new_child->parentNode())
     parent->ParserRemoveChild(*new_child);
 
   {
@@ -545,7 +546,7 @@ void ContainerNode::ParserAppendChild(Node* new_child) {
   NotifyNodeInserted(*new_child, ChildrenChangeSource::kParser);
 }
 
-void ContainerNode::ParserAppendChildInDocumentFragment(Node* new_child) {
+void ContainerNode::ParserAppendChildInDocumentFragment(Node *new_child) {
   assert(new_child);
   assert(!new_child->IsDocumentFragment());
   assert(!IsA<HTMLTemplateElement>(this));
@@ -563,7 +564,7 @@ void ContainerNode::ParserFinishedBuildingDocumentFragment() {
   ScriptForbiddenScope forbid_script;
   const ChildrenChange change = ChildrenChange::ForFinishingBuildingDocumentFragmentTree();
 
-  for (Node& node : NodeTraversal::DescendantsOf(*this)) {
+  for (Node &node : NodeTraversal::DescendantsOf(*this)) {
     NotifyNodeAtEndOfBuildingFragmentTree(node, change, false);
   }
 
@@ -572,7 +573,7 @@ void ContainerNode::ParserFinishedBuildingDocumentFragment() {
   //  }
 }
 
-void ContainerNode::ParserRemoveChild(Node& old_child) {
+void ContainerNode::ParserRemoveChild(Node &old_child) {
   assert(old_child.parentNode() == this);
   assert(!old_child.IsDocumentFragment());
 
@@ -587,10 +588,10 @@ void ContainerNode::ParserRemoveChild(Node& old_child) {
   //  StyleEngine& engine = GetDocument().GetStyleEngine();
   //  StyleEngine::DetachLayoutTreeScope detach_scope(engine);
 
-  Node* prev = old_child.previousSibling();
-  Node* next = old_child.nextSibling();
+  Node *prev = old_child.previousSibling();
+  Node *next = old_child.nextSibling();
   if (GetDocument().GetExecutingContext()->isBlinkEnabled()) {
-    StyleEngine& engine = GetDocument().EnsureStyleEngine();
+    StyleEngine &engine = GetDocument().EnsureStyleEngine();
     StyleEngine::DOMRemovalScope style_scope(engine);
     RemoveBetween(prev, next, old_child);
     NotifyNodeRemoved(old_child);
@@ -601,10 +602,10 @@ void ContainerNode::ParserRemoveChild(Node& old_child) {
   ChildrenChanged(ChildrenChange::ForRemoval(old_child, prev, next, ChildrenChangeSource::kParser));
 }
 
-void ContainerNode::ParserInsertBefore(Node* new_child, Node& next_child) {
+void ContainerNode::ParserInsertBefore(Node *new_child, Node &next_child) {
   assert(new_child);
   assert(next_child.parentNode() == this ||
-         (DynamicTo<DocumentFragment>(this) && DynamicTo<DocumentFragment>(this)->IsTemplateContent()));
+      (DynamicTo<DocumentFragment>(this) && DynamicTo<DocumentFragment>(this)->IsTemplateContent()));
   assert(!new_child->IsDocumentFragment());
   assert(!IsA<HTMLTemplateElement>(this));
 
@@ -614,7 +615,7 @@ void ContainerNode::ParserInsertBefore(Node* new_child, Node& next_child) {
   // FIXME: parserRemoveChild can run script which could then insert the
   // newChild back into the page. Loop until the child is actually removed.
   // See: fast/parser/execute-script-during-adoption-agency-removal.html
-  while (ContainerNode* parent = new_child->parentNode())
+  while (ContainerNode *parent = new_child->parentNode())
     parent->ParserRemoveChild(*new_child);
 
   // This can happen if foster parenting moves nodes into a template
@@ -634,8 +635,8 @@ void ContainerNode::ParserInsertBefore(Node* new_child, Node& next_child) {
   NotifyNodeInserted(*new_child, ChildrenChangeSource::kParser);
 }
 
-void ContainerNode::ParserTakeAllChildrenFrom(webf::ContainerNode& old_parent) {
-  while (Node* child = old_parent.firstChild()) {
+void ContainerNode::ParserTakeAllChildrenFrom(webf::ContainerNode &old_parent) {
+  while (Node *child = old_parent.firstChild()) {
     // Explicitly remove since appending can fail, but this loop shouldn't be
     // infinite.
     old_parent.ParserRemoveChild(*child);
@@ -647,26 +648,26 @@ AtomicString ContainerNode::nodeValue() const {
   return AtomicString::Null();
 }
 
-Element* ContainerNode::querySelector(const webf::AtomicString& selectors, webf::ExceptionState& exception_state) {
+Element *ContainerNode::querySelector(const webf::AtomicString &selectors, webf::ExceptionState &exception_state) {
   return QuerySelector(selectors, exception_state);
 }
 
-Element* ContainerNode::OwnerShadowHost() const {
+Element *ContainerNode::OwnerShadowHost() const {
   return nullptr;
 }
 
-inline ContainerNode* Node::ParentElementOrShadowRoot() const {
-  ContainerNode* parent = parentNode();
+inline ContainerNode *Node::ParentElementOrShadowRoot() const {
+  ContainerNode *parent = parentNode();
   return parent && (parent->IsElementNode() || parent->IsShadowRoot()) ? parent : nullptr;
 }
 
-ContainerNode::ContainerNode(TreeScope* tree_scope, ConstructionType type)
+ContainerNode::ContainerNode(TreeScope *tree_scope, ConstructionType type)
     : ContainerNode(tree_scope->GetDocument().GetExecutingContext(), &tree_scope->GetDocument(), type) {}
-ContainerNode::ContainerNode(ExecutingContext* context, Document* document, ConstructionType type)
+ContainerNode::ContainerNode(ExecutingContext *context, Document *document, ConstructionType type)
     : Node(context, document, type), first_child_(nullptr), last_child_(nullptr) {}
 
-void ContainerNode::NotifyNodeAtEndOfBuildingFragmentTree(webf::Node& node,
-                                                          const webf::ContainerNode::ChildrenChange& change,
+void ContainerNode::NotifyNodeAtEndOfBuildingFragmentTree(webf::Node &node,
+                                                          const webf::ContainerNode::ChildrenChange &change,
                                                           bool may_contain_shadow_roots) {
   // Fast path parser only creates disconnected nodes.
   assert(!node.isConnected());
@@ -687,7 +688,7 @@ void ContainerNode::NotifyNodeAtEndOfBuildingFragmentTree(webf::Node& node,
   }
 }
 
-void ContainerNode::RemoveBetween(Node* previous_child, Node* next_child, Node& old_child) {
+void ContainerNode::RemoveBetween(Node *previous_child, Node *next_child, Node &old_child) {
   assert(old_child.parentNode() == this);
 
   if (next_child)
@@ -707,21 +708,21 @@ void ContainerNode::RemoveBetween(Node* previous_child, Node* next_child, Node&
                                                        nullptr);
 }
 
-NodeListsNodeData& ContainerNode::EnsureNodeLists() {
+NodeListsNodeData &ContainerNode::EnsureNodeLists() {
   return EnsureRareData().EnsureNodeLists();
 }
 
-template <typename Functor>
-void ContainerNode::InsertNodeVector(const NodeVector& targets,
-                                     Node* next,
-                                     const Functor& mutator,
-                                     NodeVector* post_insertion_notification_targets) {
+template<typename Functor>
+void ContainerNode::InsertNodeVector(const NodeVector &targets,
+                                     Node *next,
+                                     const Functor &mutator,
+                                     NodeVector *post_insertion_notification_targets) {
   assert(post_insertion_notification_targets);
   {
-    for (const auto& target_node : targets) {
+    for (const auto &target_node : targets) {
       assert(target_node);
       assert(!target_node->parentNode());
-      Node& child = *target_node;
+      Node &child = *target_node;
       mutator(*this, child, next);
       ChildListMutationScope(*this).ChildAdded(child);
       NotifyNodeInsertedInternal(child, *post_insertion_notification_targets);
@@ -729,27 +730,27 @@ void ContainerNode::InsertNodeVector(const NodeVector& targets,
   }
 }
 
-void ContainerNode::DidInsertNodeVector(const webf::NodeVector& targets,
-                                        webf::Node* next,
-                                        const webf::NodeVector& post_insertion_notification_targets) {
-  Node* unchanged_previous = targets.size() > 0 ? targets[0]->previousSibling() : nullptr;
-  for (const auto& target_node : targets) {
+void ContainerNode::DidInsertNodeVector(const webf::NodeVector &targets,
+                                        webf::Node *next,
+                                        const webf::NodeVector &post_insertion_notification_targets) {
+  Node *unchanged_previous = targets.size() > 0 ? targets[0]->previousSibling() : nullptr;
+  for (const auto &target_node : targets) {
     ChildrenChanged(ChildrenChange::ForInsertion(*target_node, unchanged_previous, next, ChildrenChangeSource::kAPI));
   }
 }
 
-void ContainerNode::InsertBeforeCommon(Node& next_child, Node& new_child) {
+void ContainerNode::InsertBeforeCommon(Node &next_child, Node &new_child) {
   // Use insertBefore if you need to handle reparenting (and want DOM mutation
   // events).
   assert(!new_child.parentNode());
   assert(!new_child.nextSibling());
   assert(!new_child.previousSibling());
 
-  if (auto* context = GetExecutingContext()) {
+  if (auto *context = GetExecutingContext()) {
     context->MaybeBeginFirstPaintStyleSync(*this, new_child, !hasChildren());
   }
 
-  Node* prev = next_child.previousSibling();
+  Node *prev = next_child.previousSibling();
   assert(last_child_ != prev);
   next_child.SetPreviousSibling(&new_child);
   if (prev) {
@@ -769,9 +770,9 @@ void ContainerNode::InsertBeforeCommon(Node& next_child, Node& new_child) {
                                                        next_child.bindingObject(), new_child.bindingObject());
 }
 
-void ContainerNode::AppendChildCommon(Node& child) {
+void ContainerNode::AppendChildCommon(Node &child) {
   const bool was_empty = !hasChildren();
-  if (auto* context = GetExecutingContext()) {
+  if (auto *context = GetExecutingContext()) {
     context->MaybeBeginFirstPaintStyleSync(*this, child, was_empty);
   }
 
@@ -789,7 +790,7 @@ void ContainerNode::AppendChildCommon(Node& child) {
                                                        bindingObject(), child.bindingObject());
 }
 
-void ContainerNode::NotifyNodeInserted(Node& root, webf::ContainerNode::ChildrenChangeSource source) {
+void ContainerNode::NotifyNodeInserted(Node &root, webf::ContainerNode::ChildrenChangeSource source) {
   assert(!EventDispatchForbiddenScope::IsEventDispatchForbidden());
 
   NodeVector post_insertion_notification_targets;
@@ -798,11 +799,11 @@ void ContainerNode::NotifyNodeInserted(Node& root, webf::ContainerNode::Children
   ChildrenChanged(ChildrenChange::ForInsertion(root, root.previousSibling(), root.nextSibling(), source));
 }
 
-void ContainerNode::NotifyNodeInsertedInternal(Node& root, NodeVector& post_insertion_notification_targets) {
+void ContainerNode::NotifyNodeInsertedInternal(Node &root, NodeVector &post_insertion_notification_targets) {
   EventDispatchForbiddenScope assert_no_event_dispatch;
   ScriptForbiddenScope forbid_script;
 
-  for (Node& node : NodeTraversal::InclusiveDescendantsOf(root)) {
+  for (Node &node : NodeTraversal::InclusiveDescendantsOf(root)) {
     // As an optimization we don't notify leaf nodes when inserting
     // into detached subtrees that are not in a shadow tree.
     if (!isConnected() && !node.IsContainerNode())
@@ -819,8 +820,8 @@ void ContainerNode::NotifyNodeInsertedInternal(Node& root, NodeVector& post_inse
   }
 }
 
-void ContainerNode::NotifyNodeRemoved(Node& root) {
-  for (Node& node : NodeTraversal::InclusiveDescendantsOf(root)) {
+void ContainerNode::NotifyNodeRemoved(Node &root) {
+  for (Node &node : NodeTraversal::InclusiveDescendantsOf(root)) {
     // As an optimization we skip notifying Text nodes and other leaf nodes
     // of removal when they're not in the Document tree and not in a shadow root
     // since the virtual call to removedFrom is not needed.
@@ -830,8 +831,8 @@ void ContainerNode::NotifyNodeRemoved(Node& root) {
   }
 }
 
-void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange& change) {
-  ExecutingContext* context = GetDocument().GetExecutingContext();
+void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange &change) {
+  ExecutingContext *context = GetDocument().GetExecutingContext();
   if (context && context->isBlinkEnabled() &&
       change.type == ChildrenChangeType::kFinishedBuildingDocumentFragmentTree) {
     // The rest of this is not necessary when building a DocumentFragment.
@@ -845,7 +846,25 @@ void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange& c
   }
 
   if (change.IsChildRemoval() || change.type == ChildrenChangeType::kAllChildrenRemoved) {
-    GetDocument().EnsureStyleEngine().ChildrenRemoved(*this);
+    StyleEngine& style_engine = GetDocument().EnsureStyleEngine();
+    if (change.IsChildElementChange() && !change.ByParser() && InActiveDocument()) {
+      style_engine.UpdateActiveStyle();
+      bool needs_has_invalidation = style_engine.GetRuleFeatureSet().NeedsHasInvalidationForInsertionOrRemoval();
+      if (!needs_has_invalidation) {
+        if (Element* removed_element = DynamicTo<Element>(change.sibling_changed)) {
+          needs_has_invalidation =
+              style_engine.GetRuleFeatureSet().NeedsHasInvalidationForInsertedOrRemovedElement(*removed_element);
+        }
+      }
+      if (needs_has_invalidation) {
+        style_engine.SetNeedsHasPseudoStateRecalc();
+        if (Element* root = GetDocument().documentElement()) {
+          root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                    StyleChangeReasonForTracing::Create(style_change_reason::kAffectedByHas));
+        }
+      }
+    }
+    style_engine.ChildrenRemoved(*this);
     return;
   }
 
@@ -853,7 +872,18 @@ void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange& c
     return;
   }
 
-  Node* inserted_node = change.sibling_changed;
+  StyleEngine& style_engine = GetDocument().GetStyleEngine();
+  // :has() depends on structural relationships. Without full invalidation
+  // flags, conservatively force a full style recalc when any :has() rules
+  // are present and an element is inserted/removed.
+  if (!change.ByParser() && change.IsChildElementChange() && InActiveDocument()) {
+    style_engine.UpdateActiveStyle();
+    if (style_engine.GetRuleFeatureSet().NeedsHasInvalidationForInsertionOrRemoval()) {
+      style_engine.SetNeedsHasPseudoStateRecalc();
+    }
+  }
+
+  Node *inserted_node = change.sibling_changed;
   if (!inserted_node) {
     return;
   }
@@ -868,7 +898,7 @@ void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange& c
     return;
   }
 
-  if (Element* element = DynamicTo<Element>(this)) {
+  if (Element *element = DynamicTo<Element>(this)) {
     // Blink gates insertion dirtiness on the presence of a ComputedStyle on the
     // parent element (to avoid work for display:none subtrees). WebF does not
     // store ComputedStyle on DOM nodes; approximate the behavior using the
@@ -881,18 +911,18 @@ void ContainerNode::ChildrenChanged(const webf::ContainerNode::ChildrenChange& c
   inserted_node->SetStyleChangeOnInsertion();
 }
 
-void ContainerNode::InvalidateNodeListCachesInAncestors(const QualifiedName* attr_name,
-                                                        Element* attribute_owner_element,
-                                                        const ChildrenChange* change) {
+void ContainerNode::InvalidateNodeListCachesInAncestors(const QualifiedName *attr_name,
+                                                        Element *attribute_owner_element,
+                                                        const ChildrenChange *change) {
   // This is a performance optimization, NodeList cache invalidation is
   // not necessary for a text change.
   if (change && change->type == ChildrenChangeType::kTextChanged)
     return;
 
   if (!attr_name || IsAttributeNode()) {
-    if (const NodeRareData* data = RareData()) {
-      if (NodeListsNodeData* lists = data->NodeLists()) {
-        if (ChildNodeList* child_node_list = lists->GetChildNodeList(*this)) {
+    if (const NodeRareData *data = RareData()) {
+      if (NodeListsNodeData *lists = data->NodeLists()) {
+        if (ChildNodeList *child_node_list = lists->GetChildNodeList(*this)) {
           if (change) {
             child_node_list->ChildrenChanged(*change);
           } else {
@@ -918,8 +948,8 @@ void ContainerNode::InvalidateNodeListCachesInAncestors(const QualifiedName* att
 
   GetDocument().InvalidateNodeListCaches(attr_name);
 
-  for (ContainerNode* node = this; node; node = node->parentNode()) {
-    if (NodeListsNodeData* lists = node->NodeLists())
+  for (ContainerNode *node = this; node; node = node->parentNode()) {
+    if (NodeListsNodeData *lists = node->NodeLists())
       lists->InvalidateCaches(attr_name);
   }
 }
@@ -956,14 +986,14 @@ void ContainerNode::InvalidateNodeListCachesInAncestors(const webf::ContainerNod
   }
 }*/
 
-void ContainerNode::Trace(GCVisitor* visitor) const {
+void ContainerNode::Trace(GCVisitor *visitor) const {
   visitor->TraceMember(first_child_);
   visitor->TraceMember(last_child_);
 
   Node::Trace(visitor);
 }
 
-const ContainerNodePublicMethods* ContainerNode::containerNodePublicMethods() {
+const ContainerNodePublicMethods *ContainerNode::containerNodePublicMethods() {
   static ContainerNodePublicMethods container_node_public_methods;
   return &container_node_public_methods;
 }
diff --git a/bridge/core/dom/element.cc b/bridge/core/dom/element.cc
index e5843f263d..9c994a2462 100644
--- a/bridge/core/dom/element.cc
+++ b/bridge/core/dom/element.cc
@@ -10,6 +10,7 @@
 
 #include <chrono>
 #include <functional>
+#include <string>
 #include <utility>
 #include "binding_call_methods.h"
 #include "bindings/qjs/exception_state.h"
@@ -18,6 +19,7 @@
 #include "child_list_mutation_scope.h"
 #include "comment.h"
 #include "core/css/css_identifier_value.h"
+#include "core/css/css_selector_list.h"
 #include "core/css/css_property_value_set.h"
 #include "core/css/css_selector_list.h"
 #include "core/css/css_style_sheet.h"
@@ -27,12 +29,14 @@
 #include "core/css/parser/css_parser.h"
 #include "core/css/parser/css_parser_context.h"
 #include "core/css/selector_checker.h"
+#include "core/css/parser/css_parser_context.h"
 #include "core/css/style_recalc_change.h"
 #include "core/css/style_recalc_context.h"
 #include "core/css/style_scope_frame.h"
 #include "core/css/style_scope_data.h"
 #include "core/css/style_engine.h"
 #include "core/css/style_sheet_contents.h"
+#include "core/css/selector_checker.h"
 #include "core/css/white_space.h"
 #include "core/dom/document_fragment.h"
 #include "core/dom/element_rare_data_vector.h"
@@ -60,26 +64,6 @@ namespace {
 thread_local InlineStylePerfStats g_inline_style_perf_stats;
 thread_local bool g_inline_style_perf_stats_enabled = false;
 
-std::shared_ptr<CSSSelectorList> ParseSelectorListOrThrow(const AtomicString& selectors,
-                                                         ExceptionState& exception_state,
-                                                         JSContext* ctx) {
-  auto parser_context = std::make_shared<CSSParserContext>(kHTMLStandardMode);
-  auto sheet = std::make_shared<StyleSheetContents>(parser_context);
-
-  std::vector<CSSSelector> arena;
-  tcb::span<CSSSelector> vector =
-      CSSParser::ParseSelector(parser_context, CSSNestingType::kNone, /*parent_rule_for_nesting=*/nullptr, sheet,
-                               selectors.GetString(), arena);
-
-  auto selector_list = CSSSelectorList::AdoptSelectorVector(vector);
-  if (!selector_list->IsValid()) {
-    exception_state.ThrowException(ctx, ErrorType::SyntaxError,
-                                   "'" + selectors.ToUTF8String() + "' is not a valid selector.");
-    return nullptr;
-  }
-  return selector_list;
-}
-
 bool MatchesAnySelectorInList(Element& element, const CSSSelectorList& selector_list, const ContainerNode& scope) {
   SelectorChecker checker(SelectorChecker::kQueryingRules);
   SelectorChecker::SelectorCheckingContext context(&element);
@@ -155,7 +139,111 @@ bool IsPotentiallyDisableableFormControl(const Element& element) {
     return false;
   }
   return tag_name == "button" || tag_name == "input" || tag_name == "select" || tag_name == "textarea" ||
-         tag_name == "option";
+         tag_name == "option" || tag_name == "optgroup";
+}
+
+const AtomicString& InputTagName() {
+  static const AtomicString kInput = AtomicString::CreateFromUTF8("input");
+  return kInput;
+}
+const AtomicString& SelectTagName() {
+  static const AtomicString kSelect = AtomicString::CreateFromUTF8("select");
+  return kSelect;
+}
+const AtomicString& TextareaTagName() {
+  static const AtomicString kTextarea = AtomicString::CreateFromUTF8("textarea");
+  return kTextarea;
+}
+const AtomicString& OptionTagName() {
+  static const AtomicString kOption = AtomicString::CreateFromUTF8("option");
+  return kOption;
+}
+const AtomicString& TypeAttrName() {
+  static const AtomicString kType = AtomicString::CreateFromUTF8("type");
+  return kType;
+}
+const AtomicString& ValueAttrName() {
+  static const AtomicString kValue = AtomicString::CreateFromUTF8("value");
+  return kValue;
+}
+const AtomicString& RequiredAttrName() {
+  static const AtomicString kRequired = AtomicString::CreateFromUTF8("required");
+  return kRequired;
+}
+const AtomicString& CheckedAttrName() {
+  static const AtomicString kChecked = AtomicString::CreateFromUTF8("checked");
+  return kChecked;
+}
+const AtomicString& SelectedAttrName() {
+  static const AtomicString kSelected = AtomicString::CreateFromUTF8("selected");
+  return kSelected;
+}
+const AtomicString& DisabledAttrName() {
+  static const AtomicString kDisabled = AtomicString::CreateFromUTF8("disabled");
+  return kDisabled;
+}
+
+bool IsFormControlTag(const AtomicString& tag_name) {
+  return tag_name == InputTagName() || tag_name == SelectTagName() || tag_name == TextareaTagName() ||
+         tag_name == OptionTagName();
+}
+
+bool IsPseudoStateAttribute(const AtomicString& name) {
+  return name == CheckedAttrName() || name == SelectedAttrName() || name == DisabledAttrName() ||
+         name == RequiredAttrName() || name == ValueAttrName() || name == TypeAttrName();
+}
+
+bool IsValidEmailAddress(const AtomicString& value) {
+  if (value.IsNull() || value.empty()) {
+    return true;
+  }
+  const auto utf8 = value.ToUTF8String();
+  const auto at = utf8.find('@');
+  if (at == std::string::npos || at == 0 || at + 1 >= utf8.size()) {
+    return false;
+  }
+  const auto dot = utf8.find('.', at + 1);
+  if (dot == std::string::npos || dot == at + 1 || dot + 1 >= utf8.size()) {
+    return false;
+  }
+  return true;
+}
+
+std::shared_ptr<CSSSelectorList> ParseSelectorListOrThrow(const AtomicString& selectors,
+                                                          ExceptionState& exception_state,
+                                                          JSContext* ctx) {
+  auto parser_context = std::make_shared<CSSParserContext>(kHTMLStandardMode);
+  auto sheet = std::make_shared<StyleSheetContents>(parser_context);
+
+  std::vector<CSSSelector> arena;
+  tcb::span<CSSSelector> vector =
+      CSSParser::ParseSelector(parser_context, CSSNestingType::kNone, /*parent_rule_for_nesting=*/nullptr, sheet,
+                               selectors.GetString(), arena);
+
+  auto selector_list = CSSSelectorList::AdoptSelectorVector(vector);
+  if (!selector_list->IsValid()) {
+    exception_state.ThrowException(ctx, ErrorType::SyntaxError,
+                                   "'" + selectors.ToUTF8String() + "' is not a valid selector.");
+    return nullptr;
+  }
+  return selector_list;
+}
+
+bool MatchesAnySelectorInList(Element& element,
+                              const CSSSelectorList& selector_list,
+                              const ContainerNode* scope) {
+  SelectorChecker checker(SelectorChecker::kQueryingRules);
+  SelectorChecker::SelectorCheckingContext context(&element);
+  context.scope = scope;
+
+  for (const CSSSelector* selector = selector_list.First(); selector; selector = CSSSelectorList::Next(*selector)) {
+    context.selector = selector;
+    SelectorChecker::MatchResult result;
+    if (checker.Match(context, result)) {
+      return true;
+    }
+  }
+  return false;
 }
 
 }  // namespace
@@ -176,7 +264,7 @@ ContainerNode* Element::ParentElementOrDocumentFragment() const {
   return nullptr;
 }
 
-bool Element::hasAttribute(const AtomicString& name, ExceptionState& exception_state) {
+bool Element::hasAttribute(const AtomicString& name, ExceptionState& exception_state) const {
   return EnsureElementAttributes().hasAttribute(name, exception_state);
 }
 
@@ -191,17 +279,92 @@ bool Element::IsDisabledFormControl() const {
   if (!IsPotentiallyDisableableFormControl(*this)) {
     return false;
   }
+  // When Blink CSS is enabled, rely on the tracked disabled state (kept
+  // in sync with attribute mutations) to reflect current disabledness.
+  if (GetExecutingContext()->isBlinkEnabled()) {
+    return disabled_state_;
+  }
 
-  auto& attrs = EnsureElementAttributes();
-  for (auto it = attrs.begin(); it != attrs.end(); ++it) {
-    const AtomicString& name = it->first;
-    if (!name.IsNull() && name == "disabled") {
-      return true;
+  if (HasAttributeIgnoringNamespace(DisabledAttrName())) {
+    return true;
+  }
+
+  if (IsWidgetElement()) {
+    ExceptionState exception_state;
+    NativeValue result =
+        GetBindingProperty(DisabledAttrName(), FlushUICommandReason::kDependentsOnElement, exception_state);
+    if (!exception_state.HasException()) {
+      return NativeValueConverter<NativeTypeBool>::FromNativeValue(result);
     }
   }
   return false;
 }
 
+bool Element::MatchesValidityPseudoClasses() const {
+  const AtomicString tag_name = localName();
+  if (tag_name.IsNull()) {
+    return false;
+  }
+  return IsFormControlTag(tag_name);
+}
+
+bool Element::IsRequiredFormControl() const {
+  if (!MatchesValidityPseudoClasses()) {
+    return false;
+  }
+  return HasAttributeIgnoringNamespace(RequiredAttrName());
+}
+
+bool Element::IsOptionalFormControl() const {
+  if (!MatchesValidityPseudoClasses()) {
+    return false;
+  }
+  return !IsRequiredFormControl();
+}
+
+bool Element::IsValidElement() const {
+  if (!MatchesValidityPseudoClasses()) {
+    return false;
+  }
+
+  const AtomicString tag_name = localName();
+  if (tag_name != InputTagName()) {
+    // Minimal validity for other form controls.
+    return true;
+  }
+
+  ExceptionState exception_state;
+  AtomicString type = getAttribute(TypeAttrName(), exception_state);
+  if (exception_state.HasException()) {
+    return true;
+  }
+  if (type.IsNull() || type.empty()) {
+    type = AtomicString::CreateFromUTF8("text");
+  } else {
+    type = type.LowerASCII();
+  }
+
+  AtomicString value = getAttribute(ValueAttrName(), exception_state);
+  if (exception_state.HasException()) {
+    return true;
+  }
+
+  const bool required = HasAttributeIgnoringNamespace(RequiredAttrName());
+  const bool value_empty = value.IsNull() || value.empty();
+  if (required && value_empty) {
+    return false;
+  }
+
+  if (type == "email") {
+    if (value_empty && !required) {
+      return true;
+    }
+    return IsValidEmailAddress(value);
+  }
+
+  return true;
+}
+
 AtomicString Element::getAttribute(const AtomicString& name, ExceptionState& exception_state) const {
   // Keep lazily-synchronized attributes (notably "style") up to date before reading them.
   const_cast<Element*>(this)->SynchronizeAttribute(name);
@@ -570,7 +733,7 @@ bool Element::matches(const AtomicString& selectors, ExceptionState& exception_s
     if (!selector_list) {
       return false;
     }
-    return MatchesAnySelectorInList(*this, *selector_list, *this);
+    return MatchesAnySelectorInList(*this, *selector_list, this);
   }
 
   NativeValue arguments[] = {NativeValueConverter<NativeTypeString>::ToNativeValue(ctx(), selectors)};
@@ -588,9 +751,9 @@ Element* Element::closest(const AtomicString& selectors, ExceptionState& excepti
     if (!selector_list) {
       return nullptr;
     }
-
+    ContainerNode* scope = this;
     for (Element* current = this; current; current = current->parentElement()) {
-      if (MatchesAnySelectorInList(*current, *selector_list, *this)) {
+      if (MatchesAnySelectorInList(*current, *selector_list, scope)) {
         return current;
       }
     }
@@ -1200,6 +1363,11 @@ void Element::AttributeChanged(const AttributeModificationParams& params) {
   }
 
   const AtomicString& name = params.name;
+  if (name == CheckedAttrName()) {
+    checked_state_ = !params.new_value.IsNull() && !params.new_value.empty();
+  } else if (name == DisabledAttrName()) {
+    disabled_state_ = !params.new_value.IsNull() && !params.new_value.empty();
+  }
 
   if (IsStyledElement()) {
     if (name == html_names::kStyleAttr) {
@@ -1224,6 +1392,15 @@ void Element::AttributeChanged(const AttributeModificationParams& params) {
     } else if (name != html_names::kStyleAttr) {
       engine.AttributeChangedForElement(name, *this);
     }
+
+    if (IsPseudoStateAttribute(name)) {
+      engine.SetNeedsHasPseudoStateRecalc();
+      if (Element* root = GetDocument().documentElement()) {
+        root->SetNeedsStyleRecalc(
+            kSubtreeStyleChange,
+            StyleChangeReasonForTracing::FromAttribute(QualifiedName(name)));
+      }
+    }
   }
 }
 
diff --git a/bridge/core/dom/element.h b/bridge/core/dom/element.h
index da19c0a3fa..7a9691dca4 100644
--- a/bridge/core/dom/element.h
+++ b/bridge/core/dom/element.h
@@ -96,7 +96,7 @@ class Element : public ContainerNode {
   AttributeCollection Attributes() const;
 
   bool hasAttributes() const;
-  bool hasAttribute(const AtomicString&, ExceptionState& exception_state);
+  bool hasAttribute(const AtomicString&, ExceptionState& exception_state) const;
   AtomicString getAttribute(const AtomicString&, ExceptionState& exception_state) const;
 
   // Passing null as the second parameter removes the attribute when
@@ -351,10 +351,11 @@ class Element : public ContainerNode {
   bool IsDisabledFormControl() const;
   bool MatchesReadOnlyPseudoClass() const { return false; }
   bool MatchesReadWritePseudoClass() const { return false; }
-  bool IsOptionalFormControl() const { return false; }
-  bool IsRequiredFormControl() const { return false; }
-  bool MatchesValidityPseudoClasses() const { return false; }
-  bool IsValidElement() const { return false; }
+  bool IsOptionalFormControl() const;
+  bool IsRequiredFormControl() const;
+  bool MatchesValidityPseudoClasses() const;
+  bool IsValidElement() const;
+  bool IsCheckedState() const { return checked_state_; }
 
   // Additional methods for selector matching
   bool ContainsPersistentVideo() const { return false; }
@@ -410,6 +411,8 @@ class Element : public ContainerNode {
   bool is_display_none_for_style_invalidation_ = false;
   uint32_t sent_pseudo_style_mask_ = 0;
   bool has_emitted_style_ = false;
+  bool checked_state_ = false;
+  bool disabled_state_ = false;
 
   QualifiedName tag_name_;
 };
diff --git a/bridge/core/dom/legacy/element_attributes.cc b/bridge/core/dom/legacy/element_attributes.cc
index 2ba77104b4..43cb21d835 100644
--- a/bridge/core/dom/legacy/element_attributes.cc
+++ b/bridge/core/dom/legacy/element_attributes.cc
@@ -107,18 +107,24 @@ AtomicString ElementAttributes::GetAttributeForStyle(const AtomicString& name) c
   return it->second;
 }
 
-void ElementAttributes::removeAttribute(const AtomicString& name, ExceptionState& exception_state) {
+void ElementAttributes::removeAttribute(const AtomicString& name, ExceptionState& exception_state, bool ignore_ui_command) {
   if (!hasAttribute(name, exception_state))
     return;
 
   AtomicString old_value = getAttribute(name, exception_state);
-  element_->WillModifyAttribute(name, old_value, AtomicString::Null());
+  if (!ignore_ui_command) {
+    element_->WillModifyAttribute(name, old_value, AtomicString::Null());
+  }
 
   attributes_.erase(name);
 
-  std::unique_ptr<SharedNativeString> args_01 = name.ToNativeString();
-  GetExecutingContext()->uiCommandBuffer()->AddCommand(UICommand::kRemoveAttribute, std::move(args_01),
-                                                       element_->bindingObject(), nullptr);
+  if (!ignore_ui_command) {
+    std::unique_ptr<SharedNativeString> args_01 = name.ToNativeString();
+    GetExecutingContext()->uiCommandBuffer()->AddCommand(UICommand::kRemoveAttribute, std::move(args_01),
+                                                         element_->bindingObject(), nullptr);
+    element_->DidModifyAttribute(name, old_value, AtomicString::Null(),
+                                 Element::AttributeModificationReason::kDirectly);
+  }
 }
 
 void ElementAttributes::CopyWith(ElementAttributes* attributes) {
diff --git a/bridge/core/dom/legacy/element_attributes.h b/bridge/core/dom/legacy/element_attributes.h
index 97e2e63175..2d26587903 100644
--- a/bridge/core/dom/legacy/element_attributes.h
+++ b/bridge/core/dom/legacy/element_attributes.h
@@ -33,7 +33,7 @@ class ElementAttributes : public ScriptWrappable {
                     ExceptionState& exception_state,
                     bool ignore_ui_command = false);
   bool hasAttribute(const AtomicString& name, ExceptionState& exception_state);
-  void removeAttribute(const AtomicString& name, ExceptionState& exception_state);
+  void removeAttribute(const AtomicString& name, ExceptionState& exception_state, bool ignore_ui_command = false);
   void CopyWith(ElementAttributes* attributes);
   String ToString();
 
diff --git a/bridge/core/html/custom/widget_element.cc b/bridge/core/html/custom/widget_element.cc
index 6dd5a218c2..173647aa83 100644
--- a/bridge/core/html/custom/widget_element.cc
+++ b/bridge/core/html/custom/widget_element.cc
@@ -10,13 +10,35 @@
 #include "widget_element.h"
 #include "binding_call_methods.h"
 #include "bindings/qjs/script_promise_resolver.h"
+#include "core/css/style_change_reason.h"
+#include "core/css/style_engine.h"
+#include "core/css/style_recalc_change.h"
 #include "core/dom/document.h"
+#include "core/dom/qualified_name.h"
 #include "foundation/native_value_converter.h"
 #include "foundation/string/character_visitor.h"
 #include "widget_element_shape.h"
 
 namespace webf {
 
+namespace {
+
+bool IsPseudoStateProperty(const AtomicString& name) {
+  if (name.IsNull()) {
+    return false;
+  }
+  static const AtomicString kChecked = AtomicString::CreateFromUTF8("checked");
+  static const AtomicString kSelected = AtomicString::CreateFromUTF8("selected");
+  static const AtomicString kDisabled = AtomicString::CreateFromUTF8("disabled");
+  static const AtomicString kRequired = AtomicString::CreateFromUTF8("required");
+  static const AtomicString kValue = AtomicString::CreateFromUTF8("value");
+  static const AtomicString kType = AtomicString::CreateFromUTF8("type");
+  return name == kChecked || name == kSelected || name == kDisabled || name == kRequired || name == kValue ||
+         name == kType;
+}
+
+}  // namespace
+
 WidgetElement::WidgetElement(const AtomicString& tag_name, Document* document)
     : HTMLElement(tag_name, document, ConstructionType::kCreateWidgetElement) {}
 
@@ -176,6 +198,15 @@ bool WidgetElement::SetItem(const AtomicString& key, const ScriptValue& value, E
     // Cache value for synchronous access.
     cached_properties_[sync_key] = value;
 
+    if (GetExecutingContext()->isBlinkEnabled() && IsPseudoStateProperty(sync_key)) {
+      StyleEngine& engine = GetDocument().EnsureStyleEngine();
+      engine.SetNeedsHasPseudoStateRecalc();
+      if (Element* root = GetDocument().documentElement()) {
+        root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                                  StyleChangeReasonForTracing::FromAttribute(QualifiedName(sync_key)));
+      }
+    }
+
     // Use async setter to avoid blocking.
     SetBindingPropertyAsync(sync_key, value.ToNative(ctx(), exception_state), exception_state);
     return true;
diff --git a/bridge/core/html/forms/html_optgroup_element.cc b/bridge/core/html/forms/html_optgroup_element.cc
new file mode 100644
index 0000000000..c0b9462ee5
--- /dev/null
+++ b/bridge/core/html/forms/html_optgroup_element.cc
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2024-present The OpenWebF Company. All rights reserved.
+ * Licensed under GNU GPL with Enterprise exception.
+ */
+/*
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#include "html_optgroup_element.h"
+
+namespace webf {
+
+namespace {
+
+static const AtomicString& OptGroupTagName() {
+  static const AtomicString kOptGroup = AtomicString::CreateFromUTF8("optgroup");
+  return kOptGroup;
+}
+
+static const AtomicString& DisabledAttrName() {
+  static const AtomicString kDisabled = AtomicString::CreateFromUTF8("disabled");
+  return kDisabled;
+}
+
+}  // namespace
+
+HTMLOptgroupElement::HTMLOptgroupElement(Document& document) : HTMLElement(OptGroupTagName(), &document) {}
+
+bool HTMLOptgroupElement::disabled() const {
+  ExceptionState exception_state;
+  return hasAttribute(DisabledAttrName(), exception_state);
+}
+
+void HTMLOptgroupElement::setDisabled(bool disabled, ExceptionState& exception_state) {
+  if (disabled) {
+    setAttribute(DisabledAttrName(), DisabledAttrName(), exception_state);
+    return;
+  }
+  removeAttribute(DisabledAttrName(), exception_state);
+}
+
+}  // namespace webf
diff --git a/bridge/core/html/forms/html_optgroup_element.d.ts b/bridge/core/html/forms/html_optgroup_element.d.ts
new file mode 100644
index 0000000000..cb528a4eea
--- /dev/null
+++ b/bridge/core/html/forms/html_optgroup_element.d.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright (C) 2024-present The OpenWebF Company. All rights reserved.
+ * Licensed under GNU GPL with Enterprise exception.
+ */
+import {HTMLElement} from "../html_element";
+
+interface HTMLOptgroupElement extends HTMLElement {
+  disabled: boolean;
+  new(): void;
+}
diff --git a/bridge/core/html/forms/html_optgroup_element.h b/bridge/core/html/forms/html_optgroup_element.h
new file mode 100644
index 0000000000..10b68bf546
--- /dev/null
+++ b/bridge/core/html/forms/html_optgroup_element.h
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2024-present The OpenWebF Company. All rights reserved.
+ * Licensed under GNU GPL with Enterprise exception.
+ */
+/*
+ * Copyright (C) 2022-present The WebF authors. All rights reserved.
+ */
+
+#ifndef BRIDGE_CORE_HTML_FORMS_HTML_OPTGROUP_ELEMENT_H_
+#define BRIDGE_CORE_HTML_FORMS_HTML_OPTGROUP_ELEMENT_H_
+
+#include "core/html/html_element.h"
+
+namespace webf {
+
+class HTMLOptgroupElement : public HTMLElement {
+  DEFINE_WRAPPERTYPEINFO();
+
+ public:
+  using ImplType = HTMLOptgroupElement*;
+  explicit HTMLOptgroupElement(Document&);
+
+  bool disabled() const;
+  void setDisabled(bool disabled, ExceptionState& exception_state);
+};
+
+}  // namespace webf
+
+#endif  // BRIDGE_CORE_HTML_FORMS_HTML_OPTGROUP_ELEMENT_H_
diff --git a/bridge/core/html/html_tag_names.json5 b/bridge/core/html/html_tag_names.json5
index 4d7ddc12c6..7d7edf2ad2 100644
--- a/bridge/core/html/html_tag_names.json5
+++ b/bridge/core/html/html_tag_names.json5
@@ -66,6 +66,11 @@
       "interfaceName": "HTMLSelectElement",
       "interfaceHeaderDir": "core/html/forms"
     },
+    {
+      "name": "optgroup",
+      "interfaceName": "HTMLOptgroupElement",
+      "interfaceHeaderDir": "core/html/forms"
+    },
     {
       "name": "option",
       "interfaceName": "HTMLOptionElement",
diff --git a/docs/CSS_SELECTORS_L4_HAS_PLAN.md b/docs/CSS_SELECTORS_L4_HAS_PLAN.md
new file mode 100644
index 0000000000..2b1a9d943b
--- /dev/null
+++ b/docs/CSS_SELECTORS_L4_HAS_PLAN.md
@@ -0,0 +1,117 @@
+# CSS Selectors Level 4 — :has() Support Plan (C++ Blink/bridge)
+
+Goal: implement correct `:has(<relative-selector-list>)` matching + invalidation in the Blink/bridge C++ selector engine.
+
+Status (Jan 28, 2026):
+- Parsing + selector wiring exists (`CSSSelector::kPseudoHas`, `SelectorChecker::CheckPseudoHas`).
+- Traversal, argument context, cache, and fast‑reject are **stubbed**:
+  - `bridge/core/css/check_pseudo_has_argument_context.h`
+  - `bridge/core/css/check_pseudo_has_traversal_iterator.h`
+  - `bridge/core/css/check_pseudo_has_cache_scope.h`
+- Element invalidation flags are declared but **no-op** in `bridge/core/dom/element.h`.
+- Style invalidation hooks for `:has()` are **not implemented** in `StyleEngine`.
+
+---
+
+## Phase 1 — Argument context (correctness baseline)
+Implement `CheckPseudoHasArgumentContext` to compute:
+- Leftmost relation (`kRelativeDescendant`, `kRelativeChild`, `kRelativeDirectAdjacent`, `kRelativeIndirectAdjacent`).
+- Fixed vs unbounded depth and adjacency limits.
+- Whether siblings may be affected and which flags apply:
+  - `AllowSiblingsAffectedByHas()`
+  - `GetSiblingsAffectedByHasFlags()`
+- Hashes for fast‑reject: class/id/tag/attr/pseudo in the argument list.
+
+Files:
+- `bridge/core/css/check_pseudo_has_argument_context.h` (and a new .cc if needed)
+- `bridge/core/css/css_selector.h/.cc` (if new helper APIs are required)
+
+---
+
+## Phase 2 — Argument traversal iterator
+Replace stub traversal with real iteration:
+- Descendant/child traversal with depth tracking.
+- Sibling / adjacent traversal (`+`, `~`) with optional subtree descent.
+- Ensure traversal respects “relative selector” semantics (leftmost combinator).
+- Avoid duplicated traversal when multiple anchors exist (use the “reversed DOM order” guidance in `has_invalidation_flags.h`).
+
+Files:
+- `bridge/core/css/check_pseudo_has_traversal_iterator.h` (consider splitting into .cc)
+- `bridge/core/dom/element_traversal.h` or existing traversal helpers if needed
+
+---
+
+## Phase 3 — Cache + fast reject (perf‑safe)
+Implement `CheckPseudoHasCacheScope` to avoid repeated checks:
+- Per‑document cache keyed by (anchor element, selector hash).
+- Track checked/matched to short‑circuit repeated argument checks.
+Implement `CheckPseudoHasFastRejectFilter`:
+- Conservative bloom filter (or “always false” for FastReject as a correctness fallback).
+
+Files:
+- `bridge/core/css/check_pseudo_has_cache_scope.h`
+- `bridge/core/css/check_pseudo_has_traversal_iterator.h`
+
+---
+
+## Phase 4 — Element invalidation flags
+Wire `HasInvalidationFlags` storage into `Element`:
+- Add a struct field in `ElementRareDataVector` or `NodeRareData`.
+- Implement non‑no‑op setters/getters in `bridge/core/dom/element.h/.cc`:
+  - `SetAffectedBySubjectHas()`
+  - `SetAffectedByNonSubjectHas()`
+  - `SetAffectedByPseudoInHas()`
+  - `SetAffectedByLogicalCombinationsInHas()`
+  - `SetAncestorsOrAncestorSiblingsAffectedByHas()`
+  - `SetSiblingsAffectedByHasFlags()`
+  - `AffectedByMultipleHas()` / `SetAffectedByMultipleHas()`
+
+Files:
+- `bridge/core/dom/element.h/.cc`
+- `bridge/core/dom/element_rare_data_vector.h` or `bridge/core/dom/node_rare_data.h`
+
+---
+
+## Phase 5 — Style invalidation wiring
+Add `:has()` invalidation entry points to `StyleEngine` and DOM mutation paths.
+
+New `StyleEngine` APIs:
+- `InvalidateElementAffectedByHas(Element& changed)`
+- `InvalidateAncestorsOrSiblingsAffectedByHas(Element& changed)`
+
+Call sites:
+- `StyleEngine::IdChangedForElement`
+- `StyleEngine::ClassAttributeChangedForElement`
+- `StyleEngine::AttributeChangedForElement`
+- Insert/remove paths in `bridge/core/dom/container_node.cc`
+
+Rules:
+- Use `RuleFeatureSet::NeedsHasInvalidationFor*` to short‑circuit.
+- For subject `:has()`: mark anchor element `SetNeedsStyleRecalc(kLocalStyleChange, kAffectedByHas)`.
+- For non‑subject `:has()`: schedule descendant/sibling invalidation sets on the anchor element.
+
+Files:
+- `bridge/core/css/style_engine.h/.cc`
+- `bridge/core/dom/container_node.cc`
+
+---
+
+## Phase 6 — Tests
+Unit tests:
+- Selector parsing & matching in `bridge/core/css/css_selector_test.cc`:
+  - Descendant/child/sibling forms (`:has(.b)`, `:has(> .b)`, `:has(+ .b)`, `:has(~ .b)`).
+  - Nested logical combos: `:has(:is(.a .b))`, `:has(:where(.a .b))`.
+
+Integration tests:
+- Mutation invalidation scenarios:
+  - class add/remove on descendants/siblings
+  - sibling insertion/removal
+  - multiple anchors with overlapping scopes
+
+---
+
+## Build/Test checklist (C++)
+- Build: `npm run build:bridge:macos:arm64`
+- Unit: `node scripts/run_bridge_unit_test.js`
+- Integration: `cd integration_tests && npm run integration -- specs/css/css-selectors/has-*.ts`
+
diff --git a/docs/TAILWINDCSS_SUPPORT_PLAN.md b/docs/TAILWINDCSS_SUPPORT_PLAN.md
index e7d72b0096..c4586a934a 100644
--- a/docs/TAILWINDCSS_SUPPORT_PLAN.md
+++ b/docs/TAILWINDCSS_SUPPORT_PLAN.md
@@ -26,7 +26,7 @@ Target: **Tailwind CSS v3.4.x** (core preflight + core utilities + core variants
 | `@supports` | `supports-*` variants | ❌ | `webf/lib/src/css/parser/parser.dart` returns `null` for `DIRECTIVE_SUPPORTS` | Implement `@supports` parsing + evaluation (at least allow/deny blocks, and “declare support” checks used by Tailwind). |
 | Media queries (MQ) | Responsive (`sm/md/...`), `dark`, `motion-*`, `orientation-*`, `print`, `forced-colors`, `prefers-contrast` | ⚠️ | `webf/lib/src/css/css_rule.dart` only evaluates `min/max-width`, `min/max-aspect-ratio`, `prefers-color-scheme`; rejects `print` type | Expand media query parsing/evaluation for Tailwind variants: `prefers-reduced-motion`, `orientation`, `forced-colors`, `prefers-contrast`, `hover`, `pointer`, `print`. |
 | Selector pseudo `:where(<selector-list>)` | Preflight selectors (`abbr:where([title])`, `[hidden]:where(:not(...))`), direction variants (`rtl:`/`ltr:`) | ⚠️ | Blink/bridge (C++) supports `:where()` parsing/matching and 0-specificity (`bridge/core/css/css_selector.cc` handles `CSSSelector::kPseudoWhere`), but the legacy Dart selector engine still lacks selector-list parsing/matching (`webf/lib/src/css/parser/parser.dart`, `webf/lib/src/css/query_selector.dart`). | Implement Selectors L4 `:where()`/`:is()` selector-list parsing + matching + specificity in the Dart engine; keep coverage via `integration_tests/specs/css/css-selectors/is-where-*.ts`. |
-| Selector pseudo `:has(<relative-selector-list>)` | `has-*`, `group-has-*`, `peer-has-*` variants | ❌ | No `:has()` parsing/matching in Dart selector engine | Implement `:has()` parsing/matching + invalidation strategy (at least a correct baseline, then optimize). |
+| Selector pseudo `:has(<relative-selector-list>)` | `has-*`, `group-has-*`, `peer-has-*` variants | ⚠️ | Blink/bridge parses `:has()` and has selector-checking/invalidation hooks, but traversal/caching are stubbed (`bridge/core/css/check_pseudo_has_*`); Dart selector engine still lacks `:has()`. | Implement full :has traversal/caching/invalidation in C++; add Dart parsing/matching; cover with integration tests. |
 | Pseudo-classes (state) | `hover:`, `focus:`, `focus-visible:`, `focus-within:`, `active:`, `enabled:`, `disabled:` | ❌ | `webf/lib/src/css/query_selector.dart` only implements a small set (e.g., `:root`, `:empty`, `:first-child`, `:nth-*`); does not implement hover/focus/active/etc | Add element state model + selector matching for Tailwind pseudo-class variants; hook to Flutter pointer/focus events. |
 | Pseudo-classes (forms) | `checked:`, `indeterminate:`, `placeholder-shown:`, `required:`, `valid:`/`invalid:`… | ❌ | Not implemented in selector evaluator | Implement form state pseudos based on element type/attributes/value validity model (as supported by WebF’s form elements). |
 | Pseudo-elements used by Tailwind variants | `::before/::after`, `::placeholder`, `::selection`, `::marker`, `::file-selector-button`, `::backdrop`, `::first-letter/line` | ⚠️ | WebF has real `::before/::after` elements and first-line/first-letter plumbing, but selector matcher treats only a “legacy” subset as matchable; others return false | Extend pseudo-element matching + rendering support where meaningful; at minimum `::placeholder` for preflight + utilities. |
@@ -49,7 +49,7 @@ Tailwind v3.4.18 core variants are exposed by `variantPlugins` (15 groups).
 | `orientationVariants` | `@media (orientation: portrait/landscape)` | ❌ | Media feature not evaluated today. |
 | `printVariant` | `@media print` | ❌ | WebF currently rejects non-`screen` media types. |
 | `supportsVariants` | `@supports (...)` | ❌ | `@supports` not parsed/evaluated today. |
-| `hasVariants` | `:has(...)` | ❌ | Not parsed/evaluated today. |
+| `hasVariants` | `:has(...)` | ⚠️ | Blink/bridge has parser + checker wiring, but :has traversal/caching are stubbed; Dart selector engine lacks `:has()`. |
 | `ariaVariants` | Attribute selectors like `&[aria-checked=\"true\"]` | ✅ | Attribute selectors are supported; needs Tailwind fixture tests. |
 | `dataVariants` | Attribute selectors like `&[data-state=\"open\"]` | ✅ | Attribute selectors are supported; needs Tailwind fixture tests. |
 | `childVariant` | `& > *` | ✅ | Combinators supported. |
@@ -66,7 +66,7 @@ Tailwind v3.4.18 core utilities are exposed by `corePlugins` (179 keys). Below i
 
 **P0 blockers (must fix first)**
 - Selector parsing/matching: `:where(<selector-list>)` (Tailwind preflight + direction variants).
-- `:has()` correctness + performance + invalidation strategy.
+- `:has()` correctness + performance + invalidation strategy (C++ has stubbed traversal; Dart missing).
 - Selector matching: interactive pseudo-classes (hover/focus/active/disabled/checked/…).
 - https://github.com/openwebf/webf/issues/659
 - Media query evaluation: `orientation`, `prefers-contrast`.
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.0939efdd1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.0939efdd1.png
new file mode 100644
index 0000000000..9d2b2359f1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.0939efdd1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.18ff8aed1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.18ff8aed1.png
new file mode 100644
index 0000000000..bb8d2d1f1f
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.18ff8aed1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.2f79ef791.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.2f79ef791.png
new file mode 100644
index 0000000000..67de1fc16e
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.2f79ef791.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.30aca6431.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.30aca6431.png
new file mode 100644
index 0000000000..b0b1dd361d
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.30aca6431.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.3eb0b88a1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.3eb0b88a1.png
new file mode 100644
index 0000000000..264d262b4e
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.3eb0b88a1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.408ddde91.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.408ddde91.png
new file mode 100644
index 0000000000..57ba8380a0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.408ddde91.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.5b0607b81.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.5b0607b81.png
new file mode 100644
index 0000000000..3b031a364f
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.5b0607b81.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.5ce78b901.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.5ce78b901.png
new file mode 100644
index 0000000000..3917faa14c
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.5ce78b901.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.6ed3146e1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.6ed3146e1.png
new file mode 100644
index 0000000000..e2c23561b5
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.6ed3146e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.79d56e171.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.79d56e171.png
new file mode 100644
index 0000000000..3bd7eae89b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.79d56e171.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.85a326141.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.85a326141.png
new file mode 100644
index 0000000000..bb8d2d1f1f
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.85a326141.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.91127d8c1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.91127d8c1.png
new file mode 100644
index 0000000000..3f5766e686
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.91127d8c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.95c226b01.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.95c226b01.png
new file mode 100644
index 0000000000..9d2b2359f1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.95c226b01.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.c713df221.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.c713df221.png
new file mode 100644
index 0000000000..17e5858c42
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.c713df221.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.d395e40c1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.d395e40c1.png
new file mode 100644
index 0000000000..9d99792abc
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.d395e40c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.e06d14041.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.e06d14041.png
new file mode 100644
index 0000000000..4e53570319
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.e06d14041.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.f2c499201.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f2c499201.png
new file mode 100644
index 0000000000..05b2a151b5
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f2c499201.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.f70261ee1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f70261ee1.png
new file mode 100644
index 0000000000..8ba9db8bb2
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f70261ee1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.f89e13111.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f89e13111.png
new file mode 100644
index 0000000000..93395959c9
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f89e13111.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.f93e75831.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f93e75831.png
new file mode 100644
index 0000000000..a556592320
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.f93e75831.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-basic.ts.fe50857e1.png b/integration_tests/snapshots/css/css-selectors/has-basic.ts.fe50857e1.png
new file mode 100644
index 0000000000..2b23744683
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-basic.ts.fe50857e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.26e0d6bf1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.26e0d6bf1.png
new file mode 100644
index 0000000000..0e11fe225b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.26e0d6bf1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.39c766551.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.39c766551.png
new file mode 100644
index 0000000000..795a5b2890
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.39c766551.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3a0015331.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3a0015331.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3a0015331.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3e5f0e791.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3e5f0e791.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.3e5f0e791.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.4fb59b441.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.4fb59b441.png
new file mode 100644
index 0000000000..96efbb3c95
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.4fb59b441.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6431f06b1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6431f06b1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6431f06b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6df7b2151.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6df7b2151.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.6df7b2151.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.7e7bbbd51.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.7e7bbbd51.png
new file mode 100644
index 0000000000..ff1a24fd7a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.7e7bbbd51.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.8bc34a7c1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.8bc34a7c1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.8bc34a7c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9159c50f1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9159c50f1.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9159c50f1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9b240abc1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9b240abc1.png
new file mode 100644
index 0000000000..ccad6d8970
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.9b240abc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b2c37fa31.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b2c37fa31.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b2c37fa31.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b5a595be1.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b5a595be1.png
new file mode 100644
index 0000000000..c425fc4e68
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.b5a595be1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.dd02fb221.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.dd02fb221.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.dd02fb221.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-display-states.ts.f3665c911.png b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.f3665c911.png
new file mode 100644
index 0000000000..0324abfcf2
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-display-states.ts.f3665c911.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.0cff9fbc1.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.0cff9fbc1.png
new file mode 100644
index 0000000000..72d9b3d6a1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.0cff9fbc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.1e0a6f171.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.1e0a6f171.png
new file mode 100644
index 0000000000..8df4144533
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.1e0a6f171.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.2c34f2b61.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.2c34f2b61.png
new file mode 100644
index 0000000000..1d3e369e71
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.2c34f2b61.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3aa304481.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3aa304481.png
new file mode 100644
index 0000000000..1322270f5a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3aa304481.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3df1bf921.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3df1bf921.png
new file mode 100644
index 0000000000..617f045d8e
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.3df1bf921.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.58a83ac41.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.58a83ac41.png
new file mode 100644
index 0000000000..e25fbb4858
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.58a83ac41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.5e0e99a41.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.5e0e99a41.png
new file mode 100644
index 0000000000..a760a7e602
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.5e0e99a41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6010cc291.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6010cc291.png
new file mode 100644
index 0000000000..76b4f682d7
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6010cc291.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.654714231.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.654714231.png
new file mode 100644
index 0000000000..09ab4fe6e2
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.654714231.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6d0e8fa21.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6d0e8fa21.png
new file mode 100644
index 0000000000..72d9b3d6a1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.6d0e8fa21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.905a34d71.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.905a34d71.png
new file mode 100644
index 0000000000..6b091062de
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.905a34d71.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.a647a7861.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.a647a7861.png
new file mode 100644
index 0000000000..ddf2f4cbf7
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.a647a7861.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.b55bfbd71.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.b55bfbd71.png
new file mode 100644
index 0000000000..a1df21a318
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.b55bfbd71.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.be76afe31.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.be76afe31.png
new file mode 100644
index 0000000000..e3fa8c4e92
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.be76afe31.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dc1c21c41.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dc1c21c41.png
new file mode 100644
index 0000000000..1a9520f168
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dc1c21c41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dcebb3601.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dcebb3601.png
new file mode 100644
index 0000000000..ee0f622f86
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.dcebb3601.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.ed3345631.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.ed3345631.png
new file mode 100644
index 0000000000..97a76e3acd
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.ed3345631.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.f281b9f81.png b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.f281b9f81.png
new file mode 100644
index 0000000000..ff42a5b33a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-edge-cases.ts.f281b9f81.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.1e7a225b1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.1e7a225b1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.1e7a225b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.5fd77cbe1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.5fd77cbe1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.5fd77cbe1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.6367e4de1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.6367e4de1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.6367e4de1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.817cdd441.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.817cdd441.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.817cdd441.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.823662111.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.823662111.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.823662111.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.a3c802bb1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.a3c802bb1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.a3c802bb1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.ac4c489b1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.ac4c489b1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.ac4c489b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b162c56f1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b162c56f1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b162c56f1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b1b08db21.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b1b08db21.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.b1b08db21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.bcab0bae1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.bcab0bae1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.bcab0bae1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.de91094c1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.de91094c1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.de91094c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.f8a3358d1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.f8a3358d1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.f8a3358d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.faceb37e1.png b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.faceb37e1.png
new file mode 100644
index 0000000000..deaa789156
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-explicit-scope.ts.faceb37e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.1ca4f70f1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.1ca4f70f1.png
new file mode 100644
index 0000000000..097ea1f1d0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.1ca4f70f1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.3d56ed291.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.3d56ed291.png
new file mode 100644
index 0000000000..4ecafc21ef
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.3d56ed291.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.408808071.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.408808071.png
new file mode 100644
index 0000000000..f678103ca5
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.408808071.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.4c55a0321.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.4c55a0321.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.4c55a0321.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.5b0c585b1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.5b0c585b1.png
new file mode 100644
index 0000000000..9e355555e0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.5b0c585b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.604e2f651.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.604e2f651.png
new file mode 100644
index 0000000000..2df1fa3131
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.604e2f651.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.708fc1151.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.708fc1151.png
new file mode 100644
index 0000000000..1734729abb
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.708fc1151.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.7c6b410d1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.7c6b410d1.png
new file mode 100644
index 0000000000..8cae0ae312
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.7c6b410d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.8606649c1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.8606649c1.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.8606649c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.92fd19dc1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.92fd19dc1.png
new file mode 100644
index 0000000000..f678103ca5
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.92fd19dc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.967ab9b21.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.967ab9b21.png
new file mode 100644
index 0000000000..1734729abb
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.967ab9b21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.985e386c1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.985e386c1.png
new file mode 100644
index 0000000000..097cc27276
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.985e386c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.cf5b5ae01.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.cf5b5ae01.png
new file mode 100644
index 0000000000..8487386cb1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.cf5b5ae01.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.d0d7b56b1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.d0d7b56b1.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.d0d7b56b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e12b7b3b1.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e12b7b3b1.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e12b7b3b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e820ada51.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e820ada51.png
new file mode 100644
index 0000000000..9e355555e0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.e820ada51.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.fa392d941.png b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.fa392d941.png
new file mode 100644
index 0000000000..624bc6bb14
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-invalidation.ts.fa392d941.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.0fba2b1f1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.0fba2b1f1.png
new file mode 100644
index 0000000000..c88c9d0eeb
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.0fba2b1f1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.162690801.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.162690801.png
new file mode 100644
index 0000000000..328dfa4abd
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.162690801.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.16d0aa021.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.16d0aa021.png
new file mode 100644
index 0000000000..c8bc7e97f6
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.16d0aa021.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.1c6db6781.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.1c6db6781.png
new file mode 100644
index 0000000000..d0f539f968
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.1c6db6781.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.32bf641d1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.32bf641d1.png
new file mode 100644
index 0000000000..5cafa09570
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.32bf641d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.338cb0651.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.338cb0651.png
new file mode 100644
index 0000000000..6841d2ff88
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.338cb0651.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4692e7641.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4692e7641.png
new file mode 100644
index 0000000000..797e2a187a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4692e7641.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4e20adc51.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4e20adc51.png
new file mode 100644
index 0000000000..c05c2b3ffc
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.4e20adc51.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.5705f07d1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.5705f07d1.png
new file mode 100644
index 0000000000..07349a09d8
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.5705f07d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6370d1911.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6370d1911.png
new file mode 100644
index 0000000000..72d4240466
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6370d1911.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.68a887521.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.68a887521.png
new file mode 100644
index 0000000000..40970d4ab9
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.68a887521.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6ecb1e0a1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6ecb1e0a1.png
new file mode 100644
index 0000000000..71b25cd2c7
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.6ecb1e0a1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.730f6b041.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.730f6b041.png
new file mode 100644
index 0000000000..272d831bf9
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.730f6b041.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.7af821131.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.7af821131.png
new file mode 100644
index 0000000000..f1f6f25a3f
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.7af821131.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.89871b821.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.89871b821.png
new file mode 100644
index 0000000000..b2db9ca13d
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.89871b821.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8998866e1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8998866e1.png
new file mode 100644
index 0000000000..b2db9ca13d
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8998866e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8b675fea1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8b675fea1.png
new file mode 100644
index 0000000000..049cf1c21b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.8b675fea1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.959a0dfc1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.959a0dfc1.png
new file mode 100644
index 0000000000..c88c9d0eeb
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.959a0dfc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.96d9aab41.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.96d9aab41.png
new file mode 100644
index 0000000000..d203da72fd
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.96d9aab41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.9ee57c921.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.9ee57c921.png
new file mode 100644
index 0000000000..272d831bf9
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.9ee57c921.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.a37372181.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.a37372181.png
new file mode 100644
index 0000000000..99502dcfd0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.a37372181.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ad0a670d1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ad0a670d1.png
new file mode 100644
index 0000000000..4b4781ed83
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ad0a670d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.bc1750b31.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.bc1750b31.png
new file mode 100644
index 0000000000..d7bd5fd85a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.bc1750b31.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ccaeb3a21.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ccaeb3a21.png
new file mode 100644
index 0000000000..99502dcfd0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.ccaeb3a21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.da69d1bc1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.da69d1bc1.png
new file mode 100644
index 0000000000..8f8bb362d1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.da69d1bc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.e82c3cde1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.e82c3cde1.png
new file mode 100644
index 0000000000..7a8b001162
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.e82c3cde1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f308aac01.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f308aac01.png
new file mode 100644
index 0000000000..0eed3d81e8
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f308aac01.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f598325a1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f598325a1.png
new file mode 100644
index 0000000000..3df572f4c2
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f598325a1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f6f315711.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f6f315711.png
new file mode 100644
index 0000000000..328dfa4abd
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f6f315711.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f86a4b731.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f86a4b731.png
new file mode 100644
index 0000000000..3ec495c674
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.f86a4b731.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.fa9cf25c1.png b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.fa9cf25c1.png
new file mode 100644
index 0000000000..d7bd5fd85a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-relative-argument.ts.fa9cf25c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.08664f2e1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.08664f2e1.png
new file mode 100644
index 0000000000..6438379fa7
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.08664f2e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.0f44a1611.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.0f44a1611.png
new file mode 100644
index 0000000000..64a0aad075
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.0f44a1611.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.1cd508271.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.1cd508271.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.1cd508271.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.2a31f0e21.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.2a31f0e21.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.2a31f0e21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.349ee1d41.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.349ee1d41.png
new file mode 100644
index 0000000000..a1443781a0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.349ee1d41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4a91931a1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4a91931a1.png
new file mode 100644
index 0000000000..36070e4b8d
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4a91931a1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4c1451771.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4c1451771.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4c1451771.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4eb2a4ac1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4eb2a4ac1.png
new file mode 100644
index 0000000000..6438379fa7
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.4eb2a4ac1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.52bee3611.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.52bee3611.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.52bee3611.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.71df37f01.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.71df37f01.png
new file mode 100644
index 0000000000..7a0f180de1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.71df37f01.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.7b83fd0e1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.7b83fd0e1.png
new file mode 100644
index 0000000000..64a0aad075
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.7b83fd0e1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.9fe4eb3c1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.9fe4eb3c1.png
new file mode 100644
index 0000000000..7a0f180de1
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.9fe4eb3c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.a610a60b1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.a610a60b1.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.a610a60b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d4a25c9a1.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d4a25c9a1.png
new file mode 100644
index 0000000000..a1443781a0
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d4a25c9a1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d52b56311.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d52b56311.png
new file mode 100644
index 0000000000..5807397895
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.d52b56311.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.e60faaa81.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.e60faaa81.png
new file mode 100644
index 0000000000..3233d95378
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.e60faaa81.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-specificity.ts.f2b936581.png b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.f2b936581.png
new file mode 100644
index 0000000000..ff51c81872
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-specificity.ts.f2b936581.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.00fd09691.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.00fd09691.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.00fd09691.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.027464ea1.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.027464ea1.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.027464ea1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.207bccc11.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.207bccc11.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.207bccc11.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.370004ed1.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.370004ed1.png
new file mode 100644
index 0000000000..62b3ef63c4
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.370004ed1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.5b490dd91.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.5b490dd91.png
new file mode 100644
index 0000000000..e58848433b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.5b490dd91.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.65fdb9891.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.65fdb9891.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.65fdb9891.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.661f97641.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.661f97641.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.661f97641.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.835e37311.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.835e37311.png
new file mode 100644
index 0000000000..5e18a20d72
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.835e37311.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8944dc9c1.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8944dc9c1.png
new file mode 100644
index 0000000000..6109e4ef3a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8944dc9c1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8fcc8c151.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8fcc8c151.png
new file mode 100644
index 0000000000..263cb7f4f3
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.8fcc8c151.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.925417c21.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.925417c21.png
new file mode 100644
index 0000000000..f036cde1d8
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.925417c21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.c2ce1bb11.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.c2ce1bb11.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.c2ce1bb11.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.d08294281.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.d08294281.png
new file mode 100644
index 0000000000..5afb9cb809
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.d08294281.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.e359ba821.png b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.e359ba821.png
new file mode 100644
index 0000000000..3e27a65e3b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-style-sharing.ts.e359ba821.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.038a2ff21.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.038a2ff21.png
new file mode 100644
index 0000000000..8df4144533
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.038a2ff21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.13b1f9951.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.13b1f9951.png
new file mode 100644
index 0000000000..028ec8519a
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.13b1f9951.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.16d516f41.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.16d516f41.png
new file mode 100644
index 0000000000..5959c6efe2
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.16d516f41.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.255491e21.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.255491e21.png
new file mode 100644
index 0000000000..b536e5b027
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.255491e21.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.3d57c24b1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.3d57c24b1.png
new file mode 100644
index 0000000000..b6e884b8ca
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.3d57c24b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.405155561.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.405155561.png
new file mode 100644
index 0000000000..c9798a51fa
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.405155561.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.4b071f3d1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.4b071f3d1.png
new file mode 100644
index 0000000000..8e4e8fbe6b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.4b071f3d1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.57ae31111.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.57ae31111.png
new file mode 100644
index 0000000000..e5be984218
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.57ae31111.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.685a66571.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.685a66571.png
new file mode 100644
index 0000000000..c34e418393
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.685a66571.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.6c1b8bf51.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.6c1b8bf51.png
new file mode 100644
index 0000000000..b16be1b0bd
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.6c1b8bf51.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7980e8dc1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7980e8dc1.png
new file mode 100644
index 0000000000..8dd894b2be
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7980e8dc1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7b0a89981.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7b0a89981.png
new file mode 100644
index 0000000000..24fa642ac5
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7b0a89981.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7d88c1dd1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7d88c1dd1.png
new file mode 100644
index 0000000000..d967a0d17b
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.7d88c1dd1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.b082184b1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.b082184b1.png
new file mode 100644
index 0000000000..37b001b195
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.b082184b1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.bc346ec51.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.bc346ec51.png
new file mode 100644
index 0000000000..7285d2d668
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.bc346ec51.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.c89929d91.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.c89929d91.png
new file mode 100644
index 0000000000..7285d2d668
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.c89929d91.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d081f9d11.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d081f9d11.png
new file mode 100644
index 0000000000..86ab945aad
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d081f9d11.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d22741ab1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d22741ab1.png
new file mode 100644
index 0000000000..f5a2201f85
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.d22741ab1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.dd116fee1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.dd116fee1.png
new file mode 100644
index 0000000000..234ee4dd6f
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.dd116fee1.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f55a0da01.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f55a0da01.png
new file mode 100644
index 0000000000..eb4c031233
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f55a0da01.png differ
diff --git a/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f64d66ab1.png b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f64d66ab1.png
new file mode 100644
index 0000000000..37b001b195
Binary files /dev/null and b/integration_tests/snapshots/css/css-selectors/has-with-pseudo-classes.ts.f64d66ab1.png differ
diff --git a/integration_tests/snapshots/dom/elements/accessibility/webf-listview-accessibility.ts.650a25881.png b/integration_tests/snapshots/dom/elements/accessibility/webf-listview-accessibility.ts.650a25881.png
index 29f49e6314..313ea3d780 100644
Binary files a/integration_tests/snapshots/dom/elements/accessibility/webf-listview-accessibility.ts.650a25881.png and b/integration_tests/snapshots/dom/elements/accessibility/webf-listview-accessibility.ts.650a25881.png differ
diff --git a/integration_tests/specs/blink/css1/color_and_background/background.ts b/integration_tests/specs/blink/css1/color_and_background/background.ts
index ece133510f..b76c0a5333 100644
--- a/integration_tests/specs/blink/css1/color_and_background/background.ts
+++ b/integration_tests/specs/blink/css1/color_and_background/background.ts
@@ -28,6 +28,6 @@ BODY {background: green url(assets/resources/oransqr.gif) repeat-x center top fi
       <p class="three">This paragraph should have a lime background and an orange strip which starts at the top left and runs to the top right. Therefore, extra text would be in order, so that we can intelligently evaluate the performance of your browser in handling these declarations. Hey, I didn't say the page would be pretty, did I?</p>
     `;
 
-    await snapshot();
+    await snapshot(0.3);
   });
 });
diff --git a/integration_tests/specs/css/css-selectors/has-basic.ts b/integration_tests/specs/css/css-selectors/has-basic.ts
new file mode 100644
index 0000000000..9a11009b69
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-basic.ts
@@ -0,0 +1,463 @@
+/**
+ * CSS Selectors: Basic :has() matching behavior
+ * Based on WPT: css/selectors/has-basic.html
+ *
+ * Key behaviors:
+ * - :has() matches elements that have descendants/siblings matching the argument
+ * - Works with descendant, child, and sibling combinators
+ * - Works with querySelectorAll, querySelector, closest, matches APIs
+ */
+describe('CSS Selectors: :has() basic matching', () => {
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div id="a" class="ancestor">
+        <div id="b" class="parent ancestor">
+          <div id="c" class="sibling descendant">
+            <div id="d" class="descendant"></div>
+          </div>
+          <div id="e" class="target descendant"></div>
+        </div>
+        <div id="f" class="parent ancestor">
+          <div id="g" class="target descendant"></div>
+        </div>
+        <div id="h" class="parent ancestor">
+          <div id="i" class="target descendant"></div>
+          <div id="j" class="sibling descendant">
+            <div id="k" class="descendant"></div>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  // ========== Basic :has() with descendant selector ==========
+
+  it('A1 :has(#a) matches nothing (no element has #a as descendant)', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: green; width: 50px; height: 20px; margin: 2px; }
+      :has(#a) { background-color: red; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(#a)'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A2 :has(.ancestor) matches element a', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(.ancestor) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(.ancestor)'));
+    expect(formatElements(actual)).toBe('a');
+    expect(getComputedStyle(main.querySelector('#a')!).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A3 :has(.target) matches ancestors of .target elements', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(.target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(.target)'));
+    expect(formatElements(actual)).toBe('a,b,f,h');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A4 :has(.descendant) matches all ancestors of .descendant', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(.descendant) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(.descendant)'));
+    expect(formatElements(actual)).toBe('a,b,c,f,h,j');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with class filter ==========
+
+  it('A5 .parent:has(.target) filters by class', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .parent:has(.target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.parent:has(.target)'));
+    expect(formatElements(actual)).toBe('b,f,h');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with sibling combinator ==========
+
+  it('A6 :has(.sibling ~ .target) matches elements with sibling-then-target pattern', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(.sibling ~ .target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(.sibling ~ .target)'));
+    expect(formatElements(actual)).toBe('a,b');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A7 .parent:has(.sibling ~ .target) with class filter', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .parent:has(.sibling ~ .target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.parent:has(.sibling ~ .target)'));
+    expect(formatElements(actual)).toBe('b');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with :is() nested ==========
+
+  it('A8 :has(:is(.target ~ .sibling .descendant)) complex nesting', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(:is(.target ~ .sibling .descendant)) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(:is(.target ~ .sibling .descendant))'));
+    expect(formatElements(actual)).toBe('a,h,j');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A9 .parent:has(:is(.target ~ .sibling .descendant)) with class filter', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .parent:has(:is(.target ~ .sibling .descendant)) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.parent:has(:is(.target ~ .sibling .descendant))'));
+    expect(formatElements(actual)).toBe('h');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() in sibling selector context ==========
+
+  it('A10 .sibling:has(.descendant) ~ .target matches target after sibling with descendant', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .sibling:has(.descendant) ~ .target { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.sibling:has(.descendant) ~ .target'));
+    expect(formatElements(actual)).toBe('e');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with child combinator ==========
+
+  it('B1 :has(> .parent) matches only direct parent of .parent', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(> .parent) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(> .parent)'));
+    expect(formatElements(actual)).toBe('a');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B2 :has(> .target) matches direct parents of .target', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(> .target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(> .target)'));
+    expect(formatElements(actual)).toBe('b,f,h');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B3 :has(> .parent, > .target) matches with OR logic', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(> .parent, > .target) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(> .parent, > .target)'));
+    expect(formatElements(actual)).toBe('a,b,f,h');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with adjacent sibling ==========
+
+  it('B4 :has(+ #h) matches element immediately before #h', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(+ #h) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll(':has(+ #h)'));
+    expect(formatElements(actual)).toBe('f');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== :has() with general sibling ==========
+
+  it('B5 .parent:has(~ #h) matches .parent elements before #h', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .parent:has(~ #h) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.parent:has(~ #h)'));
+    expect(formatElements(actual)).toBe('b,f');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== querySelector API ==========
+
+  it('C1 querySelector returns first matching element', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .sibling:has(.descendant) { background-color: green; }
+    `);
+
+    const result = main.querySelector('.sibling:has(.descendant)');
+    expect(result).toBe(main.querySelector('#c'));
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== closest API ==========
+
+  it('C2 closest finds nearest ancestor matching :has()', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      .ancestor:has(.descendant) { background-color: green; }
+    `);
+
+    const k = main.querySelector('#k')!;
+    const result = k.closest('.ancestor:has(.descendant)');
+    expect(result).toBe(main.querySelector('#h'));
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  // ========== matches API ==========
+
+  it('C3 matches returns true for matching :has()', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 20px; margin: 2px; }
+      :has(.target ~ .sibling .descendant) { background-color: green; }
+    `);
+
+    const h = main.querySelector('#h')!;
+    expect(h.matches(':has(.target ~ .sibling .descendant)')).toBe(true);
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('C4 matches returns false for non-matching :has()', async () => {
+    const main = createTestDOM();
+
+    const b = main.querySelector('#b')!;
+    // b has .target but not .target ~ .sibling .descendant pattern
+    expect(b.matches(':has(.target ~ .sibling .descendant)')).toBe(false);
+
+    main.remove();
+  });
+});
+
+/**
+ * CSS Selectors: :has() visual styling tests
+ * Tests that :has() correctly applies styles visually
+ */
+describe('CSS Selectors: :has() visual styling', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('D1 Parent styled green when child exists', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent" style="width: 100px; height: 50px; background: red;">
+        <span class="child">Child</span>
+      </div>
+      <div class="parent" style="width: 100px; height: 50px; background: red;">
+        No child span
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent:has(.child) { background-color: green !important; }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second parent has no .child, should remain red
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe('rgb(255, 0, 0)');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D2 Multiple levels of :has() nesting', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="grandparent" style="padding: 10px; background: red; width: 120px;">
+        <div class="parent" style="padding: 5px; background: blue;">
+          <span class="child">Nested</span>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .grandparent:has(.child) { background-color: green !important; }
+    `);
+
+    const grandparent = container.querySelector('.grandparent')!;
+    expect(getComputedStyle(grandparent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D3 :has() with attribute selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="item" style="width: 100px; height: 30px; background: red;">
+        <input type="checkbox" checked>
+      </div>
+      <div class="item" style="width: 100px; height: 30px; background: red;">
+        <input type="checkbox">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .item:has(input[checked]) { background-color: green !important; }
+    `);
+
+    const items = container.querySelectorAll('.item');
+    expect(getComputedStyle(items[0]).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-display-states.ts b/integration_tests/specs/css/css-selectors/has-display-states.ts
new file mode 100644
index 0000000000..d695832a14
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-display-states.ts
@@ -0,0 +1,480 @@
+/**
+ * CSS Selectors: :has() with display states and special pseudo-classes
+ * Based on WPT: css/selectors/has-display-none-checked.html, has-matches-to-uninserted-elements.html
+ *
+ * Key behaviors:
+ * - :has() works with elements inside display:none subtrees
+ * - :has() matches work on uninserted (not in DOM) elements
+ * - :has() with :valid/:invalid form validation states
+ */
+describe('CSS Selectors: :has() with display:none subtrees', () => {
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('A1 :has(:checked) works inside display:none subtree', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div style="display: none">
+        <input type="checkbox" id="hidden-checkbox">
+      </div>
+      <div id="fail">FAIL</div>
+      <div id="pass" style="display: none">PASS</div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      body:has(#hidden-checkbox:checked) #fail { display: none; }
+      body:has(#hidden-checkbox:checked) #pass { display: block !important; }
+    `);
+
+    const checkbox = container.querySelector('#hidden-checkbox') as HTMLInputElement;
+    const fail = container.querySelector('#fail')!;
+    const pass = container.querySelector('#pass')!;
+
+    await waitForFrame();
+    console.log('A1 debug connected:', document.documentElement?.isConnected, document.body?.isConnected);
+
+    // Initially unchecked
+    expect(getComputedStyle(fail).display).not.toBe('none');
+    expect(getComputedStyle(pass).display).toBe('none');
+
+    // Check the hidden checkbox
+    checkbox.checked = true;
+    await waitForFrame();
+
+    console.log('A1 debug checked:', checkbox.checked, 'attr:', checkbox.hasAttribute('checked'));
+    console.log('A1 debug body:has:', document.body.matches('body:has(#hidden-checkbox:checked)'));
+    console.log(
+      'A1 debug query:',
+      document.querySelectorAll('body:has(#hidden-checkbox:checked) #fail').length
+    );
+
+    // Now :has(:checked) should match
+    expect(getComputedStyle(fail).display).toBe('none');
+    expect(getComputedStyle(pass).display).toBe('block');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A2 :not(:has(:checked)) inverse logic', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div style="display: none">
+        <input type="checkbox" id="cb">
+      </div>
+      <div id="indicator" class="unchecked"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      body:not(:has(#cb:checked)) #indicator { background: red; }
+      body:has(#cb:checked) #indicator { background: green; }
+    `);
+
+    const checkbox = container.querySelector('#cb') as HTMLInputElement;
+    const indicator = container.querySelector('#indicator')!;
+    const grey = 'rgb(128, 128, 128)';
+
+    await waitForFrame();
+
+    // Initially unchecked -> :not(:has(:checked)) matches
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    checkbox.checked = true;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    checkbox.checked = false;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A3 Multiple hidden checkboxes', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div style="display: none">
+        <input type="checkbox" id="cb1">
+        <input type="checkbox" id="cb2">
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      body:has(#cb1:checked) #indicator { background: red; }
+      body:has(#cb2:checked) #indicator { background: green; }
+      body:has(#cb1:checked):has(#cb2:checked) #indicator { background: blue; }
+    `);
+
+    const cb1 = container.querySelector('#cb1') as HTMLInputElement;
+    const cb2 = container.querySelector('#cb2') as HTMLInputElement;
+    const indicator = container.querySelector('#indicator')!;
+    const grey = 'rgb(128, 128, 128)';
+    const red = 'rgb(255, 0, 0)';
+    const green = 'rgb(0, 128, 0)';
+    const blue = 'rgb(0, 0, 255)';
+
+    await waitForFrame();
+
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    cb1.checked = true;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    cb2.checked = true;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(blue);
+
+    cb1.checked = false;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() matches on uninserted elements', () => {
+  it('B1 :has(child) matches uninserted element with child', async () => {
+    const subject = document.createElement('div');
+    subject.innerHTML = '<span class="child"></span>';
+
+    expect(subject.matches(':has(.child)')).toBe(true);
+    expect(subject.matches(':has(> .child)')).toBe(true);
+
+    await snapshot();
+  });
+
+  it('B2 :has(descendant) matches with nested structure', async () => {
+    const subject = document.createElement('div');
+    subject.innerHTML = '<div class="wrapper"><span class="descendant"></span></div>';
+
+    expect(subject.matches(':has(.descendant)')).toBe(true);
+    expect(subject.matches(':has(> .descendant)')).toBe(false); // Not direct child
+
+    await snapshot();
+  });
+
+  it('B3 :has(~ sibling) on uninserted element children', async () => {
+    const subject = document.createElement('div');
+    subject.innerHTML = '<span class="first"></span><span class="direct"></span><span class="indirect"></span>';
+
+    const firstChild = subject.firstElementChild!;
+
+    expect(firstChild.matches(':has(~ .direct)')).toBe(true);
+    expect(firstChild.matches(':has(+ .direct)')).toBe(true);
+    expect(firstChild.matches(':has(~ .indirect)')).toBe(true);
+    expect(firstChild.matches(':has(+ .indirect)')).toBe(false); // Not adjacent
+
+    await snapshot();
+  });
+
+  it('B4 :has(*) universal selector on uninserted', async () => {
+    const subject = document.createElement('div');
+    subject.innerHTML = '<span></span><div></div><p></p>';
+
+    expect(subject.matches(':has(*)')).toBe(true);
+    expect(subject.matches(':has(> *)')).toBe(true);
+    expect(subject.matches(':has(~ *)')).toBe(false); // No siblings
+    expect(subject.matches(':has(+ *)')).toBe(false); // No siblings
+
+    await snapshot();
+  });
+
+  it('B5 Empty element does not match :has(*)', async () => {
+    const subject = document.createElement('div');
+
+    expect(subject.matches(':has(*)')).toBe(false);
+    expect(subject.matches(':has(> *)')).toBe(false);
+
+    await snapshot();
+  });
+
+  it('B6 :has() with complex selectors on uninserted', async () => {
+    const subject = document.createElement('div');
+    subject.innerHTML = `
+      <div class="a">
+        <span class="b"></span>
+      </div>
+    `;
+
+    expect(subject.matches(':has(.a .b)')).toBe(true);
+    expect(subject.matches(':has(.a > .b)')).toBe(true);
+    expect(subject.matches(':has(> .a > .b)')).toBe(true);
+    expect(subject.matches(':has(.b > .a)')).toBe(false); // Wrong order
+
+    await snapshot();
+  });
+});
+
+describe('CSS Selectors: :has() with form validation pseudo-classes', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+  const yellow = 'rgb(255, 255, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('C1 :has(:valid) with required input', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="form-wrapper">
+        <input type="text" id="input" required>
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #form-wrapper:has(:valid) ~ #indicator { background: green; }
+      #form-wrapper:has(:invalid) ~ #indicator { background: red; }
+    `);
+
+    const input = container.querySelector('#input') as HTMLInputElement;
+    const indicator = container.querySelector('#indicator')!;
+
+    // Initially empty and required -> invalid
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    // Add value -> valid
+    input.value = 'test';
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    // Clear value -> invalid again
+    input.value = '';
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 :not(:has(:invalid)) form validation', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="form-wrapper">
+        <input type="email" id="email" value="invalid">
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #form-wrapper:not(:has(:invalid)) ~ #indicator { background: green; }
+    `);
+
+    const email = container.querySelector('#email') as HTMLInputElement;
+    const indicator = container.querySelector('#indicator')!;
+
+    // "invalid" is not a valid email -> :invalid matches
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    // Valid email
+    email.value = 'test@example.com';
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C3 :has(:checked) with radio buttons', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="radio-group">
+        <input type="radio" name="choice" id="r1" value="1">
+        <input type="radio" name="choice" id="r2" value="2">
+        <input type="radio" name="choice" id="r3" value="3">
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #radio-group:has(#r1:checked) ~ #indicator { background: red; }
+      #radio-group:has(#r2:checked) ~ #indicator { background: green; }
+      #radio-group:has(#r3:checked) ~ #indicator { background: blue; }
+    `);
+
+    const r1 = container.querySelector('#r1') as HTMLInputElement;
+    const r2 = container.querySelector('#r2') as HTMLInputElement;
+    const r3 = container.querySelector('#r3') as HTMLInputElement;
+    const indicator = container.querySelector('#indicator')!;
+    const grey = 'rgb(128, 128, 128)';
+    const red = 'rgb(255, 0, 0)';
+    const green = 'rgb(0, 128, 0)';
+    const blue = 'rgb(0, 0, 255)';
+
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    r1.checked = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    r2.checked = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    r3.checked = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C4 :has(:disabled) with optgroup', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="select-wrapper">
+        <select id="select">
+          <optgroup id="optgroup" label="Group">
+            <option>Option 1</option>
+            <option>Option 2</option>
+          </optgroup>
+        </select>
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #select-wrapper:has(#optgroup:disabled) ~ #indicator { background: red; }
+    `);
+
+    const optgroup = container.querySelector('#optgroup') as HTMLOptGroupElement;
+    const indicator = container.querySelector('#indicator')!;
+    const grey = 'rgb(128, 128, 128)';
+    const red = 'rgb(255, 0, 0)';
+
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    optgroup.disabled = true;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    await snapshot();
+
+    optgroup.disabled = false;
+    await waitForFrame();
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with select/option elements', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('D1 :has(option:checked) with select', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="wrapper">
+        <select id="select">
+          <option id="opt1" value="1">Option 1</option>
+          <option id="opt2" value="2">Option 2</option>
+        </select>
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #wrapper:has(#opt1:checked) ~ #indicator { background: red; }
+      #wrapper:has(#opt2:checked) ~ #indicator { background: green; }
+    `);
+
+    const select = container.querySelector('#select') as HTMLSelectElement;
+    const opt1 = container.querySelector('#opt1') as HTMLOptionElement;
+    const opt2 = container.querySelector('#opt2') as HTMLOptionElement;
+    const indicator = container.querySelector('#indicator')!;
+
+    // First option is selected by default
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    opt2.selected = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    opt1.selected = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D2 :has(option:disabled)', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="wrapper">
+        <select>
+          <option id="opt">Option</option>
+        </select>
+      </div>
+      <div id="indicator"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #indicator { width: 80px; height: 30px; background: grey; }
+      #wrapper:has(#opt:disabled) ~ #indicator { background: red; }
+    `);
+
+    const opt = container.querySelector('#opt') as HTMLOptionElement;
+    const indicator = container.querySelector('#indicator')!;
+    const grey = 'rgb(128, 128, 128)';
+    const red = 'rgb(255, 0, 0)';
+
+    expect(getComputedStyle(indicator).backgroundColor).toBe(grey);
+
+    opt.disabled = true;
+    expect(getComputedStyle(indicator).backgroundColor).toBe(red);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-edge-cases.ts b/integration_tests/specs/css/css-selectors/has-edge-cases.ts
new file mode 100644
index 0000000000..6a8a5f0c85
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-edge-cases.ts
@@ -0,0 +1,624 @@
+/**
+ * CSS Selectors: :has() edge cases and special scenarios
+ * Based on WPT: css/selectors/invalidation/has-*.html (edge case tests)
+ *
+ * Key behaviors:
+ * - :has() handles complex nesting without crashes
+ * - :has() with :nth-child and other complex pseudo-classes
+ * - Empty :has() and edge conditions
+ * - Performance considerations with complex selectors
+ */
+describe('CSS Selectors: :has() with :nth-child', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('A1 :has(:nth-child(2)) matches parents with second child', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>Only child</span>
+      </div>
+      <div id="p2" class="parent">
+        <span>First</span>
+        <span>Second</span>
+      </div>
+      <div id="p3" class="parent">
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(:nth-child(2)) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    const p2 = container.querySelector('#p2')!;
+    const p3 = container.querySelector('#p3')!;
+
+    expect(getComputedStyle(p1).backgroundColor).toBe(grey);
+    expect(getComputedStyle(p2).backgroundColor).toBe(green);
+    expect(getComputedStyle(p3).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A2 :has(:nth-child(odd)) matches parents with odd-positioned children', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>1</span>
+        <span>2</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(:nth-child(odd)) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    // Has children at positions 1 (odd) and 2 (even), so :nth-child(odd) matches
+    expect(getComputedStyle(p1).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A3 :has(:nth-child) invalidation on sibling removal', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <span id="s1">1</span>
+        <span id="s2">2</span>
+        <span id="s3">3</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(:nth-child(3)) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    const s2 = container.querySelector('#s2')!;
+
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    // Remove middle child
+    s2.remove();
+    // Now only 2 children, no :nth-child(3)
+    expect(getComputedStyle(parent).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A4 :has(:nth-last-child)', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>1</span>
+        <span>2</span>
+        <span class="target">3</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(.target:nth-last-child(1)) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    // .target is the last child (nth-last-child(1))
+    expect(getComputedStyle(p1).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() empty and edge conditions', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('B1 :has(:empty) matches parents with empty children', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span></span>
+      </div>
+      <div id="p2" class="parent">
+        <span>Content</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(:empty) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    const p2 = container.querySelector('#p2')!;
+
+    expect(getComputedStyle(p1).backgroundColor).toBe(green);
+    expect(getComputedStyle(p2).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B2 :has() with no matching descendants', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <span class="other">Other</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(.nonexistent) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    expect(getComputedStyle(parent).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B3 :has(*) with text-only content', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">Just text</div>
+      <div id="p2" class="parent"><span>Element</span></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(*) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    const p2 = container.querySelector('#p2')!;
+
+    // Text nodes don't match *, only elements
+    expect(getComputedStyle(p1).backgroundColor).toBe(grey);
+    expect(getComputedStyle(p2).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with complex nesting', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('C1 Deeply nested :has() selectors', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="level1" class="level">
+        <div id="level2" class="level">
+          <div id="level3" class="level">
+            <div id="level4" class="level">
+              <span class="deep-target"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .level { padding: 5px; margin: 2px; background: grey; }
+      .level:has(.deep-target) { background: green; }
+    `);
+
+    const level1 = container.querySelector('#level1')!;
+    const level2 = container.querySelector('#level2')!;
+    const level3 = container.querySelector('#level3')!;
+    const level4 = container.querySelector('#level4')!;
+
+    // All ancestors of .deep-target should match
+    expect(getComputedStyle(level1).backgroundColor).toBe(green);
+    expect(getComputedStyle(level2).backgroundColor).toBe(green);
+    expect(getComputedStyle(level3).backgroundColor).toBe(green);
+    expect(getComputedStyle(level4).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 :has() with multiple levels of :is()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <div class="a">
+          <div class="b">
+            <span class="c"></span>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 40px; background: grey; }
+      .parent:has(:is(.a :is(.b .c))) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C3 :has() chain with multiple combinators', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <div class="a">
+          <span class="b"></span>
+        </div>
+        <div class="c">
+          <span class="d"></span>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 40px; background: grey; }
+      .parent:has(.a > .b):has(.c > .d) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C4 Nested :has() within :not()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="good"></span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="bad"></span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="good"></span>
+        <span class="bad"></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: grey; }
+      .parent:has(.good):not(:has(.bad)) { background: green; }
+    `);
+
+    const p1 = container.querySelector('#p1')!;
+    const p2 = container.querySelector('#p2')!;
+    const p3 = container.querySelector('#p3')!;
+
+    // p1: has .good, no .bad -> green
+    expect(getComputedStyle(p1).backgroundColor).toBe(green);
+    // p2: no .good -> grey
+    expect(getComputedStyle(p2).backgroundColor).toBe(grey);
+    // p3: has .good but also .bad -> grey
+    expect(getComputedStyle(p3).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with pseudo-elements (edge case)', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('D1 :has() cannot match pseudo-elements directly', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <span class="child">Content</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .child::before { content: 'Before'; }
+      /* :has(::before) is invalid, this should not match */
+      .parent:has(.child) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    // Should match .child, not ::before
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() sibling edge cases', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('E1 :has() with self-referencing sibling selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div class="item" id="i1"></div>
+        <div class="item" id="i2"></div>
+        <div class="item" id="i3"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .item { width: 50px; height: 20px; margin: 2px; background: grey; }
+      .item:has(~ .item) { background: green; }
+    `);
+
+    const i1 = container.querySelector('#i1')!;
+    const i2 = container.querySelector('#i2')!;
+    const i3 = container.querySelector('#i3')!;
+
+    // i1 has siblings after -> green
+    expect(getComputedStyle(i1).backgroundColor).toBe(green);
+    // i2 has sibling after -> green
+    expect(getComputedStyle(i2).backgroundColor).toBe(green);
+    // i3 has no sibling after -> grey
+    expect(getComputedStyle(i3).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E2 First node insertion affects :has()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="existing" class="item"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent { width: 100px; background: grey; padding: 5px; }
+      .item { width: 50px; height: 20px; margin: 2px; background: grey; }
+      #parent:has(.first) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    const existing = container.querySelector('#existing')!;
+
+    expect(getComputedStyle(parent).backgroundColor).toBe(grey);
+
+    // Insert as first child
+    const first = document.createElement('div');
+    first.classList.add('first');
+    parent.insertBefore(first, existing);
+
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E3 Removing non-first element affects :has()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="first"></div>
+        <div id="middle" class="target"></div>
+        <div id="last"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent { width: 100px; background: grey; padding: 5px; }
+      #parent:has(.target) { background: green; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    const middle = container.querySelector('#middle')!;
+
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    middle.remove();
+
+    expect(getComputedStyle(parent).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() performance considerations', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('F1 Complex selector chain does not cause issues', async () => {
+    const container = document.createElement('div');
+    let html = '<div id="root" class="root">';
+    for (let i = 0; i < 10; i++) {
+      html += `<div class="level-${i}">`;
+    }
+    html += '<span class="deep"></span>';
+    for (let i = 0; i < 10; i++) {
+      html += '</div>';
+    }
+    html += '</div>';
+    container.innerHTML = html;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .root { width: 100px; background: grey; padding: 10px; }
+      .root:has(.deep) { background: green; }
+    `);
+
+    const root = container.querySelector('#root')!;
+    expect(getComputedStyle(root).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('F2 Multiple :has() rules evaluate correctly', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent" class="parent">
+        <span class="a"></span>
+        <span class="b"></span>
+        <span class="c"></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(.a) { border: 1px solid red; }
+      .parent:has(.b) { border: 2px solid green; }
+      .parent:has(.c) { border: 3px solid blue; }
+    `);
+
+    const parent = container.querySelector('#parent')!;
+    // Last matching rule wins for border
+    expect(getComputedStyle(parent).borderWidth).toBe('3px');
+    expect(getComputedStyle(parent).borderColor).toBe('rgb(0, 0, 255)');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('F3 Many siblings with :has(~ .target)', async () => {
+    const container = document.createElement('div');
+    let html = '<div id="parent">';
+    for (let i = 0; i < 20; i++) {
+      html += `<div class="item" id="item-${i}"></div>`;
+    }
+    html += '<div class="target"></div>';
+    html += '</div>';
+    container.innerHTML = html;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .item { width: 30px; height: 15px; margin: 1px; background: grey; display: inline-block; }
+      .item:has(~ .target) { background: green; }
+    `);
+
+    // All items before .target should be green
+    for (let i = 0; i < 20; i++) {
+      const item = container.querySelector(`#item-${i}`)!;
+      expect(getComputedStyle(item).backgroundColor).toBe(green);
+    }
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-explicit-scope.ts b/integration_tests/specs/css/css-selectors/has-explicit-scope.ts
new file mode 100644
index 0000000000..20de1ba5ea
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-explicit-scope.ts
@@ -0,0 +1,242 @@
+/**
+ * CSS Selectors: :has() with explicit :scope
+ * Based on WPT: css/selectors/has-argument-with-explicit-scope.html
+ *
+ * Key behaviors:
+ * - :scope within :has() refers to the element being queried from
+ * - Descendants of scope cannot have scope as descendant
+ * - :has(:scope) patterns have equivalent simpler forms
+ */
+describe('CSS Selectors: :has() with explicit :scope', () => {
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  function createTestDOM() {
+    const main = document.createElement('main');
+    main.innerHTML = `
+      <div id="d01" class="a">
+        <div id="scope1" class="b">
+          <div id="d02" class="c">
+            <div id="d03" class="c">
+              <div id="d04" class="d"></div>
+            </div>
+          </div>
+          <div id="d05" class="e"></div>
+        </div>
+      </div>
+      <div id="d06">
+        <div id="scope2" class="b">
+          <div id="d07" class="c">
+            <div id="d08" class="c">
+              <div id="d09"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  // ========== :has(:scope) cannot match descendants ==========
+
+  it('A1 :has(:scope) matches nothing - descendants cannot have scope as descendant', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const actual = Array.from(scope1.querySelectorAll(':has(:scope)'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('A2 :has(:scope .c) matches nothing - scope cannot be descendant of descendants', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const actual = Array.from(scope1.querySelectorAll(':has(:scope .c)'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('A3 :has(.a :scope) matches nothing - .a is ancestor of scope', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const actual = Array.from(scope1.querySelectorAll(':has(.a :scope)'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  // ========== :has(:scope) with external context ==========
+
+  it('B1 .a:has(:scope) .c matches descendants of .a when scoped inside', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+    const d02 = main.querySelector('#d02')!;
+    const d03 = main.querySelector('#d03')!;
+
+    const actual = Array.from(scope1.querySelectorAll('.a:has(:scope) .c'));
+    expect(formatElements(actual)).toBe('d02,d03');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('B2 .a:has(:scope) .c equivalent to :is(.a :scope .c)', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const result1 = Array.from(scope1.querySelectorAll('.a:has(:scope) .c'));
+    const result2 = Array.from(scope1.querySelectorAll(':is(.a :scope .c)'));
+    expect(formatElements(result1)).toBe(formatElements(result2));
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('B3 .a:has(:scope) .c returns empty when scope not inside .a', async () => {
+    const main = createTestDOM();
+    const scope2 = main.querySelector('#scope2')!;
+
+    const actual = Array.from(scope2.querySelectorAll('.a:has(:scope) .c'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  // ========== :has(:is(:scope ...)) patterns ==========
+
+  it('C1 .c:has(:is(:scope .d)) matches .c elements containing .d', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+    const d02 = main.querySelector('#d02')!;
+    const d03 = main.querySelector('#d03')!;
+
+    const actual = Array.from(scope1.querySelectorAll('.c:has(:is(:scope .d))'));
+    expect(formatElements(actual)).toBe('d02,d03');
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('C2 .c:has(:is(:scope .d)) equivalent to :scope .c:has(.d)', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const result1 = Array.from(scope1.querySelectorAll('.c:has(:is(:scope .d))'));
+    const result2 = Array.from(scope1.querySelectorAll(':scope .c:has(.d)'));
+    expect(formatElements(result1)).toBe(formatElements(result2));
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('C3 .c:has(:is(:scope .d)) equivalent to .c:has(.d)', async () => {
+    const main = createTestDOM();
+    const scope1 = main.querySelector('#scope1')!;
+
+    const result1 = Array.from(scope1.querySelectorAll('.c:has(:is(:scope .d))'));
+    const result2 = Array.from(scope1.querySelectorAll('.c:has(.d)'));
+    expect(formatElements(result1)).toBe(formatElements(result2));
+
+    await snapshot();
+
+    main.remove();
+  });
+
+  it('C4 .c:has(:is(:scope .d)) returns empty when no .d exists', async () => {
+    const main = createTestDOM();
+    const scope2 = main.querySelector('#scope2')!;
+
+    const actual = Array.from(scope2.querySelectorAll('.c:has(:is(:scope .d))'));
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with :scope in complex selectors', () => {
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('D1 :scope combined with :has() in compound selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="outer">
+        <div id="scope" class="target">
+          <div id="inner" class="child"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const scope = container.querySelector('#scope')!;
+    // :scope:has(.child) should match the scope element itself if it has .child
+    const matches = scope.matches(':scope:has(.child)');
+    expect(matches).toBe(true);
+
+    await snapshot();
+
+    container.remove();
+  });
+
+  it('D2 :scope in :has() with sibling combinators', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="scope" class="item"></div>
+        <div id="sibling" class="item"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const scope = container.querySelector('#scope')!;
+    // Elements that have a sibling after :scope
+    const actual = Array.from(scope.querySelectorAll(':has(~ .item)'));
+    // Should be empty because we're querying descendants of scope
+    expect(formatElements(actual)).toBe('');
+
+    await snapshot();
+
+    container.remove();
+  });
+
+  it('D3 :has(:scope) with matches API', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="outer">
+        <div id="inner"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const outer = container.querySelector('#outer')!;
+    const inner = container.querySelector('#inner')!;
+
+    // inner cannot have outer (its ancestor) as descendant
+    expect(inner.matches(':has(:scope)')).toBe(false);
+
+    await snapshot();
+
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-invalidation.ts b/integration_tests/specs/css/css-selectors/has-invalidation.ts
new file mode 100644
index 0000000000..6abdea32b2
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-invalidation.ts
@@ -0,0 +1,654 @@
+/**
+ * CSS Selectors: :has() invalidation tests
+ * Based on WPT: css/selectors/invalidation/has-*.html
+ *
+ * Key behaviors:
+ * - Style invalidation triggers correctly when DOM changes
+ * - Class/attribute changes update :has() matching
+ * - Element insertion/removal triggers re-evaluation
+ * - Works with various combinator positions
+ */
+describe('CSS Selectors: :has() invalidation - class changes', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('A1 Adding class triggers :has() match', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div id="child"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { color: grey; width: 80px; height: 30px; background: grey; }
+      .parent:has(.target) { color: green; background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const child = container.querySelector('#child')!;
+
+    // Initial: no .target class
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Add .target class
+    child.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    // Remove .target class
+    child.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A2 Class change on nested element triggers invalidation', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div class="middle">
+          <div id="deep"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { color: grey; width: 80px; height: 30px; background: grey; }
+      .parent:has(.target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const deep = container.querySelector('#deep')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    deep.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    deep.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A3 Multiple class toggles maintain correct state', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div id="child1"></div>
+        <div id="child2"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(.target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const child1 = container.querySelector('#child1')!;
+    const child2 = container.querySelector('#child2')!;
+    const grey = 'rgb(128, 128, 128)';
+    const green = 'rgb(0, 128, 0)';
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    child1.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    child2.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    child1.classList.remove('target');
+    // Still has child2 with .target
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    child2.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() invalidation - element insertion', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('B1 Inserting element triggers :has() match', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(.target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Insert element with .target
+    const newElement = document.createElement('div');
+    newElement.classList.add('target');
+    subject.appendChild(newElement);
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B2 Removing element triggers :has() unmatch', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div id="target" class="target"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(.target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const target = container.querySelector('#target')!;
+    const green = 'rgb(0, 128, 0)';
+    const grey = 'rgb(128, 128, 128)';
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    // Remove target element
+    target.remove();
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B3 Insert before triggers :has(+ sibling) match', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="subject"></div>
+        <div id="sibling2"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent div { width: 50px; height: 20px; background: grey; margin: 2px; }
+      #subject:has(+ #sibling1 + #sibling2) { background: red; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const sibling2 = container.querySelector('#sibling2')!;
+    const grey = 'rgb(128, 128, 128)';
+    const red = 'rgb(255, 0, 0)';
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Insert sibling1 before sibling2
+    const sibling1 = document.createElement('div');
+    sibling1.id = 'sibling1';
+    sibling2.before(sibling1);
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(red);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B4 Remove sibling triggers :has(+) unmatch', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="subject"></div>
+        <div id="sibling1"></div>
+        <div id="sibling2" class="target"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent div { width: 50px; height: 20px; background: grey; margin: 2px; }
+      #subject:has(+ .target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const sibling1 = container.querySelector('#sibling1')!;
+    const grey = 'rgb(128, 128, 128)';
+    const green = 'rgb(0, 128, 0)';
+
+    // Initially sibling1 is between subject and .target
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Remove sibling1, now .target is adjacent
+    sibling1.remove();
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() invalidation - attribute changes', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('C1 Adding attribute triggers :has([attr]) match', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div id="child"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has([data-active]) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const child = container.querySelector('#child')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    child.setAttribute('data-active', 'true');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    child.removeAttribute('data-active');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 Changing attribute value triggers invalidation', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <div id="child" data-status="inactive"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has([data-status="active"]) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const child = container.querySelector('#child')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    child.setAttribute('data-status', 'active');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    child.setAttribute('data-status', 'inactive');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() invalidation - form pseudo-classes', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('D1 :has(:checked) updates when checkbox toggled', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <input type="checkbox" id="checkbox">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(:checked) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const checkbox = container.querySelector('#checkbox') as HTMLInputElement;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    checkbox.checked = true;
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    checkbox.checked = false;
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D2 :has(:disabled) updates when disabled toggled', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <input type="text" id="input">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:has(:disabled) { background: red; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const input = container.querySelector('#input') as HTMLInputElement;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    input.disabled = true;
+    expect(getComputedStyle(subject).backgroundColor).toBe(red);
+
+    await snapshot();
+
+    input.disabled = false;
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D3 :not(:has(:enabled)) double negation', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="subject" class="parent">
+        <input type="text" id="input">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; background: grey; }
+      .parent:not(:has(:enabled)) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const input = container.querySelector('#input') as HTMLInputElement;
+
+    // Input is enabled, so :has(:enabled) matches, :not(:has(:enabled)) does not
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    input.disabled = true;
+    // Now input is disabled, :has(:enabled) does not match, :not(:has(:enabled)) matches
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() invalidation - sibling positions', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+  const yellow = 'rgb(255, 255, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('E1 :has(~ .sibling) invalidation on sibling class change', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="subject"></div>
+        <div id="s1"></div>
+        <div id="s2"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent div { width: 50px; height: 20px; background: grey; margin: 2px; }
+      #subject:has(~ .target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const s2 = container.querySelector('#s2')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    s2.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    s2.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E2 :has(+ .adjacent) only matches immediate sibling', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="subject"></div>
+        <div id="s1"></div>
+        <div id="s2"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent div { width: 50px; height: 20px; background: grey; margin: 2px; }
+      #subject:has(+ .target) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const s1 = container.querySelector('#s1')!;
+    const s2 = container.querySelector('#s2')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Adding .target to non-adjacent sibling should not match
+    s2.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Adding .target to adjacent sibling should match
+    s1.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E3 Complex sibling chain invalidation', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="parent">
+        <div id="subject"></div>
+        <div id="s1"></div>
+        <div id="s2"></div>
+        <div id="s3"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #parent div { width: 50px; height: 20px; background: grey; margin: 2px; }
+      #subject:has(~ #s1 ~ #s2 ~ #s3) { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const s2 = container.querySelector('#s2')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    // Remove s2 to break the chain
+    s2.remove();
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() invalidation - ancestor position', () => {
+  const grey = 'rgb(128, 128, 128)';
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('F1 :has() in ancestor affects descendant styling', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="ancestor">
+        <div id="parent">
+          <div id="subject"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #subject { width: 50px; height: 20px; background: grey; }
+      div:has(.target) #subject { background: red; }
+      div:has(> .target) #subject { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const parent = container.querySelector('#parent')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    // Add .target to parent (direct child of ancestor)
+    parent.classList.add('target');
+    // ancestor:has(> .target) matches, so green
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    parent.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+
+  it('F2 Deep descendant change affects ancestor :has()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div id="ancestor">
+        <div id="parent">
+          <div id="child">
+            <div id="deep"></div>
+          </div>
+        </div>
+        <div id="subject"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      #subject { width: 50px; height: 20px; background: grey; }
+      #ancestor:has(.target) #subject { background: green; }
+    `);
+
+    const subject = container.querySelector('#subject')!;
+    const deep = container.querySelector('#deep')!;
+
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    deep.classList.add('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    deep.classList.remove('target');
+    expect(getComputedStyle(subject).backgroundColor).toBe(grey);
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-relative-argument.ts b/integration_tests/specs/css/css-selectors/has-relative-argument.ts
new file mode 100644
index 0000000000..187396c1df
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-relative-argument.ts
@@ -0,0 +1,823 @@
+/**
+ * CSS Selectors: :has() with relative selectors
+ * Based on WPT: css/selectors/has-relative-argument.html
+ *
+ * Key behaviors:
+ * - :has() can use child combinator (>)
+ * - :has() can use adjacent sibling combinator (+)
+ * - :has() can use general sibling combinator (~)
+ * - These can be combined with descendant selectors
+ */
+describe('CSS Selectors: :has() with descendant combinators', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div id="d01">
+        <div id="d02" class="x">
+          <div id="d03" class="a"></div>
+          <div id="d04"></div>
+          <div id="d05" class="b"></div>
+        </div>
+        <div id="d06" class="x">
+          <div id="d07" class="x">
+            <div id="d08" class="a"></div>
+          </div>
+        </div>
+        <div id="d09" class="x">
+          <div id="d10" class="a">
+            <div id="d11" class="b"></div>
+          </div>
+        </div>
+        <div id="d12" class="x">
+          <div id="d13" class="a">
+            <div id="d14">
+              <div id="d15" class="b"></div>
+            </div>
+          </div>
+          <div id="d16" class="b"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  // ========== Basic descendant with :has() ==========
+
+  it('A1 .x:has(.a) matches .x elements containing .a anywhere', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(.a) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.a)'));
+    expect(formatElements(actual)).toBe('d02,d06,d07,d09,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A2 .x:has(.a > .b) matches .x with .a > .b pattern', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(.a > .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.a > .b)'));
+    expect(formatElements(actual)).toBe('d09');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A3 .x:has(.a .b) matches .x with .a descendant .b', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(.a .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.a .b)'));
+    expect(formatElements(actual)).toBe('d09,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A4 .x:has(.a + .b) matches .x with adjacent .a + .b', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(.a + .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.a + .b)'));
+    expect(formatElements(actual)).toBe('d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('A5 .x:has(.a ~ .b) matches .x with general sibling .a ~ .b', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(.a ~ .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.a ~ .b)'));
+    expect(formatElements(actual)).toBe('d02,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with child combinator (>)', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div id="d01">
+        <div id="d02" class="x">
+          <div id="d03" class="a"></div>
+          <div id="d04"></div>
+          <div id="d05" class="b"></div>
+        </div>
+        <div id="d06" class="x">
+          <div id="d07" class="x">
+            <div id="d08" class="a"></div>
+          </div>
+        </div>
+        <div id="d09" class="x">
+          <div id="d10" class="a">
+            <div id="d11" class="b"></div>
+          </div>
+        </div>
+        <div id="d12" class="x">
+          <div id="d13" class="a">
+            <div id="d14">
+              <div id="d15" class="b"></div>
+            </div>
+          </div>
+          <div id="d16" class="b"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('B1 .x:has(> .a) matches .x with direct child .a', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(> .a) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .a)'));
+    expect(formatElements(actual)).toBe('d02,d07,d09,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B2 .x:has(> .a > .b) matches .x with direct > .a > .b', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(> .a > .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .a > .b)'));
+    expect(formatElements(actual)).toBe('d09');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B3 .x:has(> .a .b) matches .x with > .a then descendant .b', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(> .a .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .a .b)'));
+    expect(formatElements(actual)).toBe('d09,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B4 .x:has(> .a + .b) matches .x with direct child then adjacent', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(> .a + .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .a + .b)'));
+    expect(formatElements(actual)).toBe('d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('B5 .x:has(> .a ~ .b) matches .x with direct > then general sibling', async () => {
+    const main = createTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 50px; height: 15px; margin: 2px; }
+      .x:has(> .a ~ .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .a ~ .b)'));
+    expect(formatElements(actual)).toBe('d02,d12');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with adjacent sibling combinator (+)', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createSiblingTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div id="d17">
+        <div id="d18" class="x"></div>
+        <div id="d19" class="x"></div>
+        <div id="d20" class="a"></div>
+        <div id="d21" class="x"></div>
+        <div id="d22" class="a">
+          <div id="d23" class="b"></div>
+        </div>
+        <div id="d24" class="x"></div>
+        <div id="d25" class="a">
+          <div id="d26">
+            <div id="d27" class="b"></div>
+          </div>
+        </div>
+        <div id="d28" class="x"></div>
+        <div id="d29" class="a"></div>
+        <div id="d30" class="b">
+          <div id="d31" class="c"></div>
+        </div>
+        <div id="d32" class="x"></div>
+        <div id="d33" class="a"></div>
+        <div id="d34" class="b">
+          <div id="d35">
+            <div id="d36" class="c"></div>
+          </div>
+        </div>
+        <div id="d37" class="x"></div>
+        <div id="d38" class="a"></div>
+        <div id="d39" class="b"></div>
+        <div id="d40" class="x"></div>
+        <div id="d41" class="a"></div>
+        <div id="d42"></div>
+        <div id="d43" class="b">
+          <div id="d44" class="x">
+            <div id="d45" class="c"></div>
+          </div>
+        </div>
+        <div id="d46" class="x"></div>
+        <div id="d47" class="a"></div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('C1 .x:has(+ .a) matches .x immediately before .a', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .a) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .a)'));
+    expect(formatElements(actual)).toBe('d19,d21,d24,d28,d32,d37,d40,d46');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('C2 .x:has(+ .a > .b) matches .x before .a with direct child .b', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .a > .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .a > .b)'));
+    expect(formatElements(actual)).toBe('d21');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('C3 .x:has(+ .a .b) matches .x before .a with descendant .b', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .a .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .a .b)'));
+    expect(formatElements(actual)).toBe('d21,d24');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('C4 .x:has(+ .a + .b) matches .x before .a + .b sequence', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .a + .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .a + .b)'));
+    expect(formatElements(actual)).toBe('d28,d32,d37');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('C5 .x:has(+ .a ~ .b) matches .x before .a with later sibling .b', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .a ~ .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .a ~ .b)'));
+    expect(formatElements(actual)).toBe('d19,d21,d24,d28,d32,d37,d40');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with general sibling combinator (~)', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createSiblingTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div id="d17">
+        <div id="d18" class="x"></div>
+        <div id="d19" class="x"></div>
+        <div id="d20" class="a"></div>
+        <div id="d21" class="x"></div>
+        <div id="d22" class="a">
+          <div id="d23" class="b"></div>
+        </div>
+        <div id="d24" class="x"></div>
+        <div id="d25" class="a">
+          <div id="d26">
+            <div id="d27" class="b"></div>
+          </div>
+        </div>
+        <div id="d28" class="x"></div>
+        <div id="d29" class="a"></div>
+        <div id="d30" class="b">
+          <div id="d31" class="c"></div>
+        </div>
+        <div id="d32" class="x"></div>
+        <div id="d33" class="a"></div>
+        <div id="d34" class="b">
+          <div id="d35">
+            <div id="d36" class="c"></div>
+          </div>
+        </div>
+        <div id="d37" class="x"></div>
+        <div id="d38" class="a"></div>
+        <div id="d39" class="b"></div>
+        <div id="d40" class="x"></div>
+        <div id="d41" class="a"></div>
+        <div id="d42"></div>
+        <div id="d43" class="b">
+          <div id="d44" class="x">
+            <div id="d45" class="c"></div>
+          </div>
+        </div>
+        <div id="d46" class="x"></div>
+        <div id="d47" class="a"></div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('D1 .x:has(~ .a) matches .x with any later sibling .a', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21,d24,d28,d32,d37,d40,d46');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('D2 .x:has(~ .a > .b) matches .x with later sibling .a > .b', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a > .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a > .b)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('D3 .x:has(~ .a .b) matches .x with later sibling .a containing .b', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a .b)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21,d24');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('D4 .x:has(~ .a + .b) matches .x with later .a + .b sequence', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a + .b) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a + .b)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21,d24,d28,d32,d37');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('D5 .x:has(~ .a + .b > .c) matches complex chain', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a + .b > .c) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a + .b > .c)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21,d24,d28');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('D6 .x:has(~ .a + .b .c) matches with descendant .c', async () => {
+    const main = createSiblingTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .a + .b .c) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .a + .b .c)'));
+    expect(formatElements(actual)).toBe('d18,d19,d21,d24,d28,d32');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() complex nested patterns', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createNestedTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div>
+        <div id="d48" class="x">
+          <div id="d49" class="x">
+            <div id="d50" class="x d">
+              <div id="d51" class="x d">
+                <div id="d52" class="x">
+                  <div id="d53" class="x e">
+                    <div id="d54" class="f"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="d55" class="x"></div>
+        <div id="d56" class="x d"></div>
+        <div id="d57" class="x d"></div>
+        <div id="d58" class="x"></div>
+        <div id="d59" class="x e"></div>
+        <div id="d60" class="f"></div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('E1 .x:has(.d .e) matches .x with .d descendant containing .e', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(.d .e) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.d .e)'));
+    expect(formatElements(actual)).toBe('d48,d49,d50');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E2 .x:has(.d .e) .f selects .f inside matching elements', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(.d .e) .f { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(.d .e) .f'));
+    expect(formatElements(actual)).toBe('d54');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E3 .x:has(> .d) matches .x with direct child .d', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(> .d) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .d)'));
+    expect(formatElements(actual)).toBe('d49,d50');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E4 .x:has(> .d) .f selects .f inside :has(> .d) matches', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(> .d) .f { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(> .d) .f'));
+    expect(formatElements(actual)).toBe('d54');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E5 .x:has(~ .d ~ .e) matches .x with .d then .e siblings', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .d ~ .e) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .d ~ .e)'));
+    expect(formatElements(actual)).toBe('d48,d55,d56');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E6 .x:has(~ .d ~ .e) ~ .f selects .f after :has() matches', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(~ .d ~ .e) ~ .f { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(~ .d ~ .e) ~ .f'));
+    expect(formatElements(actual)).toBe('d60');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E7 .x:has(+ .d ~ .e) matches .x immediately before .d with later .e', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .d ~ .e) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .d ~ .e)'));
+    expect(formatElements(actual)).toBe('d55,d56');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('E8 .x:has(+ .d ~ .e) ~ .f selects sibling .f', async () => {
+    const main = createNestedTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .x:has(+ .d ~ .e) ~ .f { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.x:has(+ .d ~ .e) ~ .f'));
+    expect(formatElements(actual)).toBe('d60');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
+
+describe('CSS Selectors: :has() in compound selectors', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createCompoundTestDOM() {
+    const main = document.createElement('main');
+    main.id = 'main';
+    main.innerHTML = `
+      <div>
+        <div id="d48" class="x">
+          <div id="d49" class="x">
+            <div id="d50" class="x d">
+              <div id="d51" class="x d">
+                <div id="d52" class="x">
+                  <div id="d53" class="x e">
+                    <div id="d54" class="f"></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div id="d55" class="x"></div>
+        <div id="d56" class="x d"></div>
+        <div id="d57" class="x d"></div>
+        <div id="d58" class="x"></div>
+        <div id="d59" class="x e"></div>
+        <div id="d60" class="f"></div>
+      </div>
+    `;
+    document.body.appendChild(main);
+    return main;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('F1 .d .x:has(.e) matches .x inside .d that has .e', async () => {
+    const main = createCompoundTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .d .x:has(.e) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.d .x:has(.e)'));
+    expect(formatElements(actual)).toBe('d51,d52');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+
+  it('F2 .d ~ .x:has(~ .e) matches .x sibling of .d with later .e sibling', async () => {
+    const main = createCompoundTestDOM();
+    const style = appendStyle(`
+      main div { background-color: red; width: 30px; height: 10px; margin: 1px; }
+      .d ~ .x:has(~ .e) { background-color: green; }
+    `);
+
+    const actual = Array.from(main.querySelectorAll('.d ~ .x:has(~ .e)'));
+    expect(formatElements(actual)).toBe('d57,d58');
+
+    await snapshot();
+
+    style.remove();
+    main.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-specificity.ts b/integration_tests/specs/css/css-selectors/has-specificity.ts
new file mode 100644
index 0000000000..6193a522bf
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-specificity.ts
@@ -0,0 +1,454 @@
+/**
+ * CSS Selectors: :has() specificity
+ * Based on WPT: css/selectors/has-specificity.html
+ *
+ * Key behaviors:
+ * - :has() specificity is calculated from its most specific argument
+ * - :has(#id) has higher specificity than :has(.class)
+ * - Comma-separated arguments take the highest specificity
+ * - :has() with element types adds to specificity
+ */
+describe('CSS Selectors: :has() specificity calculations', () => {
+  const green = 'rgb(0, 128, 0)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function createTestDOM() {
+    const div = document.createElement('div');
+    div.id = 'div';
+    div.className = 'baz';
+    div.innerHTML = `<p><span id="foo" class="foo"></span><span class="bar"></span><li></li></p>`;
+    document.body.appendChild(div);
+    return div;
+  }
+
+  // ========== ID vs Class specificity ==========
+
+  it('A1 :has(#foo) wins over :has(.foo) - ID higher than class', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(#foo) { background-color: green; }
+      :has(.foo) { background-color: red; }
+    `);
+
+    // :has(#foo) = 1,0,0 in the argument
+    // :has(.foo) = 0,1,0 in the argument
+    // :has(#foo) wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  it('A2 :has(span#foo) wins over :has(#foo) - element + ID higher', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(span#foo) { background-color: green; }
+      :has(#foo) { background-color: red; }
+    `);
+
+    // :has(span#foo) = 1,0,1 in the argument
+    // :has(#foo) = 1,0,0 in the argument
+    // :has(span#foo) wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  // ========== Comma-separated arguments ==========
+
+  it('A3 :has(.bar, #foo) has same specificity as :has(#foo, .bar) - order does not matter', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(.bar, #foo) { background-color: red; }
+      :has(#foo, .bar) { background-color: green; }
+    `);
+
+    // Both have same specificity (1,0,0 from #foo), latter wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  it('A4 :has(.bar, #foo) wins over :has(.foo, .bar) - ID in list wins', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(.bar, #foo) { background-color: green; }
+      :has(.foo, .bar) { background-color: red; }
+    `);
+
+    // :has(.bar, #foo) takes specificity of #foo = 1,0,0
+    // :has(.foo, .bar) = 0,1,0
+    // :has(.bar, #foo) wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  // ========== Combinator specificity ==========
+
+  it('A5 :has(span + span) wins over :has(span) - more elements', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(span + span) { background-color: green; }
+      :has(span) { background-color: red; }
+    `);
+
+    // :has(span + span) = 0,0,2 in the argument
+    // :has(span) = 0,0,1 in the argument
+    // :has(span + span) wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  // ========== Mixed selector types ==========
+
+  it('A6 :has(span, li, #foo) wins over :has(span, li, p) - ID in list', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      :has(span, li, #foo) { background-color: green; }
+      :has(span, li, p) { background-color: red; }
+    `);
+
+    // :has(span, li, #foo) takes #foo specificity = 1,0,0
+    // :has(span, li, p) = 0,0,1
+    // :has(span, li, #foo) wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  // ========== :has() vs class on element ==========
+
+  it('A7 div.baz wins over div:has(.foo) when latter comes first', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      div:has(.foo) { background-color: red; }
+      div.baz { background-color: green; }
+    `);
+
+    // div:has(.foo) = 0,1,1 (div=0,0,1 + .foo=0,1,0)
+    // div.baz = 0,1,1 (div=0,0,1 + .baz=0,1,0)
+    // Same specificity, latter wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+
+  it('A8 div:has(.foo) wins over div.baz when latter comes first', async () => {
+    const div = createTestDOM();
+    const style = appendStyle(`
+      #div { width: 100px; height: 50px; }
+      div.baz { background-color: red; }
+      div:has(.foo) { background-color: green; }
+    `);
+
+    // Same specificity (0,1,1), latter wins
+    expect(getComputedStyle(div).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    div.remove();
+  });
+});
+
+describe('CSS Selectors: :has() specificity with multiple selectors', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('B1 :has() with nested ID wins over :has() with class chain', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent" id="p1">
+        <div class="child" id="child1">
+          <span id="deep">Deep</span>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(.child .deep) { background-color: red; }
+      .parent:has(#deep) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has(.child .deep) = 0,2,0
+    // :has(#deep) = 1,0,0
+    // ID wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B2 Multiple classes in :has() vs single ID', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <div class="a b c" id="target">Target</div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(.a.b.c) { background-color: red; }
+      .parent:has(#target) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has(.a.b.c) = 0,3,0
+    // :has(#target) = 1,0,0
+    // ID (1,0,0) > classes (0,3,0)
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B3 :has() specificity combines with outer selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="outer" id="outer">
+        <div class="inner">
+          <span class="target">Target</span>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .outer { width: 100px; height: 50px; }
+      div:has(.target) { background-color: red; }
+      .outer:has(.target) { background-color: green; }
+    `);
+
+    const outer = container.querySelector('.outer')!;
+    // div:has(.target) = 0,1,1
+    // .outer:has(.target) = 0,2,0
+    // .outer wins (0,2,0 > 0,1,1)
+    expect(getComputedStyle(outer).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B4 :has() with attribute selector specificity', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <input type="text" class="input" data-valid="true">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(.input) { background-color: red; }
+      .parent:has([data-valid]) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // Both have same specificity (0,1,0 from attribute or class)
+    // Latter wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B5 Attribute selector in :has() has class-level specificity', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <input type="text" id="input1" data-valid="true">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has([data-valid]) { background-color: red; }
+      .parent:has(#input1) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has([data-valid]) = 0,1,0
+    // :has(#input1) = 1,0,0
+    // ID wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() specificity edge cases', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('C1 :has(*) has zero specificity from universal selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span>Child</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(*) { background-color: red; }
+      .parent:has(span) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has(*) = 0,0,0 (universal adds nothing)
+    // :has(span) = 0,0,1
+    // span wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 Empty :has() list with valid selector', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="child">Child</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(.child) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C3 :has() with pseudo-class adds to specificity', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <input type="checkbox" checked>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(input) { background-color: red; }
+      .parent:has(input:checked) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has(input) = 0,0,1
+    // :has(input:checked) = 0,1,1 (:checked is pseudo-class = 0,1,0)
+    // input:checked wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C4 Deeply nested :has() with :is()', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <div class="a">
+          <span id="target">Target</span>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 100px; height: 50px; }
+      .parent:has(:is(.a span)) { background-color: red; }
+      .parent:has(:is(.a #target)) { background-color: green; }
+    `);
+
+    const parent = container.querySelector('.parent')!;
+    // :has(:is(.a span)) = 0,1,1
+    // :has(:is(.a #target)) = 1,1,0
+    // #target in :is() wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-style-sharing.ts b/integration_tests/specs/css/css-selectors/has-style-sharing.ts
new file mode 100644
index 0000000000..d56aa14971
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-style-sharing.ts
@@ -0,0 +1,628 @@
+/**
+ * CSS Selectors: :has() style sharing optimization tests
+ * Based on WPT: css/selectors/has-style-sharing-*.html
+ *
+ * Key behaviors:
+ * - Style sharing optimizations should not interfere with :has() matching
+ * - Elements that appear identical should still match correctly when :has() conditions differ
+ * - Works with child combinator (>), pseudo-classes, and various selectors
+ */
+describe('CSS Selectors: :has() style sharing - basic', () => {
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('A1 Style sharing with :has(> span) - first div has span, second does not', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent"><span></span></div>
+      <div class="parent"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(> span) {
+        background: green;
+      }
+      span {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: pink;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First has span child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second has no span -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A2 Style sharing with :has(span) descendant - nested structure', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <div class="inner"><span></span></div>
+      </div>
+      <div class="parent">
+        <div class="inner"></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+      }
+      .parent:has(span) {
+        background: green;
+      }
+      span {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background-color: pink;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First has span descendant -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second has no span -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A3 Style sharing with multiple identical elements', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="box"><span class="marker"></span></div>
+      <div class="box"></div>
+      <div class="box"><span class="marker"></span></div>
+      <div class="box"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .box {
+        background: blue;
+        padding: 5px;
+        margin: 3px;
+        width: 60px;
+        height: 20px;
+      }
+      .box:has(.marker) {
+        background: green;
+      }
+      .marker {
+        display: inline-block;
+        width: 8px;
+        height: 8px;
+        background: pink;
+      }
+    `);
+
+    const boxes = container.querySelectorAll('.box');
+    expect(getComputedStyle(boxes[0]).backgroundColor).toBe(green);
+    expect(getComputedStyle(boxes[1]).backgroundColor).toBe(blue);
+    expect(getComputedStyle(boxes[2]).backgroundColor).toBe(green);
+    expect(getComputedStyle(boxes[3]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() style sharing - with child combinator', () => {
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('B1 :has(> .direct) only matches direct children', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="direct"></span>
+      </div>
+      <div class="parent">
+        <div><span class="direct"></span></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(> .direct) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First has direct .direct child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second has .direct as grandchild -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B2 :has(> div > span) matches specific nesting', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <div><span></span></div>
+      </div>
+      <div class="parent">
+        <span></span>
+      </div>
+      <div class="parent">
+        <div><div><span></span></div></div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(> div > span) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: div > span pattern -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: direct span, no div -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+    // Third: div > div > span, extra nesting -> blue
+    expect(getComputedStyle(parents[2]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() style sharing - with pseudo-classes', () => {
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('C1 :has() with :first-child pseudo', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="target"></span>
+        <span></span>
+      </div>
+      <div class="parent">
+        <span></span>
+        <span class="target"></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.target:first-child) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .target is first-child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .target is not first-child -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 :has() with :last-child pseudo', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span></span>
+        <span class="target"></span>
+      </div>
+      <div class="parent">
+        <span class="target"></span>
+        <span></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.target:last-child) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .target is last-child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .target is not last-child -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C3 :has() with :nth-child pseudo', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span></span>
+        <span class="target"></span>
+        <span></span>
+      </div>
+      <div class="parent">
+        <span class="target"></span>
+        <span></span>
+        <span></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.target:nth-child(2)) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .target is 2nd child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .target is 1st child -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C4 :has() with :only-child pseudo', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="target"></span>
+      </div>
+      <div class="parent">
+        <span class="target"></span>
+        <span></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.target:only-child) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .target is only-child -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .target has sibling -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() style sharing - with sibling combinators', () => {
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('D1 :has(+ .sibling) adjacent sibling', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="item"></span>
+        <span class="sibling"></span>
+      </div>
+      <div class="parent">
+        <span class="item"></span>
+        <span></span>
+        <span class="sibling"></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.item + .sibling) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .item + .sibling exists -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .sibling is not adjacent to .item -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D2 :has(~ .sibling) general sibling', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <span class="item"></span>
+        <span></span>
+        <span class="sibling"></span>
+      </div>
+      <div class="parent">
+        <span class="sibling"></span>
+        <span class="item"></span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has(.item ~ .sibling) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First: .sibling follows .item -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second: .sibling precedes .item -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() style sharing - complex scenarios', () => {
+  const green = 'rgb(0, 128, 0)';
+  const blue = 'rgb(0, 0, 255)';
+  const red = 'rgb(255, 0, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  it('E1 Multiple :has() rules with different conditions', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="box"><span class="a"></span></div>
+      <div class="box"><span class="b"></span></div>
+      <div class="box"><span class="a"></span><span class="b"></span></div>
+      <div class="box"></div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .box {
+        background: blue;
+        padding: 5px;
+        margin: 3px;
+        width: 60px;
+        height: 20px;
+      }
+      .box:has(.a) {
+        background: green;
+      }
+      .box:has(.b) {
+        background: red;
+      }
+    `);
+
+    const boxes = container.querySelectorAll('.box');
+    // Has only .a -> green (first rule)
+    expect(getComputedStyle(boxes[0]).backgroundColor).toBe(green);
+    // Has only .b -> red (second rule overrides)
+    expect(getComputedStyle(boxes[1]).backgroundColor).toBe(red);
+    // Has both -> red (second rule wins due to cascade)
+    expect(getComputedStyle(boxes[2]).backgroundColor).toBe(red);
+    // Has neither -> blue
+    expect(getComputedStyle(boxes[3]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E2 Deeply nested :has() matching', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="outer">
+        <div class="middle">
+          <div class="inner">
+            <span class="deep"></span>
+          </div>
+        </div>
+      </div>
+      <div class="outer">
+        <div class="middle">
+          <div class="inner"></div>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .outer {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 100px;
+      }
+      .outer:has(.deep) {
+        background: green;
+      }
+    `);
+
+    const outers = container.querySelectorAll('.outer');
+    // First has deeply nested .deep -> green
+    expect(getComputedStyle(outers[0]).backgroundColor).toBe(green);
+    // Second has no .deep -> blue
+    expect(getComputedStyle(outers[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E3 :has() with attribute selectors', async () => {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="parent">
+        <input type="text" data-valid="true">
+      </div>
+      <div class="parent">
+        <input type="text">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent {
+        background: blue;
+        padding: 10px;
+        margin: 5px;
+        width: 80px;
+        height: 30px;
+      }
+      .parent:has([data-valid]) {
+        background: green;
+      }
+    `);
+
+    const parents = container.querySelectorAll('.parent');
+    // First has input with data-valid -> green
+    expect(getComputedStyle(parents[0]).backgroundColor).toBe(green);
+    // Second has input without data-valid -> blue
+    expect(getComputedStyle(parents[1]).backgroundColor).toBe(blue);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/integration_tests/specs/css/css-selectors/has-with-pseudo-classes.ts b/integration_tests/specs/css/css-selectors/has-with-pseudo-classes.ts
new file mode 100644
index 0000000000..1d943b8a6d
--- /dev/null
+++ b/integration_tests/specs/css/css-selectors/has-with-pseudo-classes.ts
@@ -0,0 +1,711 @@
+/**
+ * CSS Selectors: :has() with pseudo-classes
+ * Based on WPT: css/selectors/has-* pseudo-class tests
+ *
+ * Key behaviors:
+ * - :has() can contain other pseudo-classes like :not(), :is(), :where()
+ * - :has() works with structural pseudo-classes like :first-child, :nth-child()
+ * - :has() works with state pseudo-classes like :checked, :disabled
+ */
+describe('CSS Selectors: :has() with :not()', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('A1 :has(:not(.excluded)) matches elements with non-excluded children', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="included">Included</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="excluded">Excluded</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="included">Included</span>
+        <span class="excluded">Excluded</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:not(.excluded)) { background-color: green; }
+    `);
+
+    // p1 has non-.excluded child -> matches
+    // p2 only has .excluded child -> does NOT match (all children are .excluded)
+    // p3 has both -> matches (has at least one non-.excluded)
+    const actual = Array.from(container.querySelectorAll('.parent:has(:not(.excluded))'));
+    expect(formatElements(actual)).toBe('p1,p3');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A2 :has(:not(.a):not(.b)) matches with multiple negations', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="a">A</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="b">B</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="c">C</span>
+      </div>
+      <div id="p4" class="parent">
+        <span class="a b">AB</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:not(.a):not(.b)) { background-color: green; }
+    `);
+
+    // Matches parents that have a child that is neither .a nor .b
+    // p1: only .a -> no match
+    // p2: only .b -> no match
+    // p3: .c (neither .a nor .b) -> matches
+    // p4: .a.b -> no match
+    const actual = Array.from(container.querySelectorAll('.parent:has(:not(.a):not(.b))'));
+    expect(formatElements(actual)).toBe('p3');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('A3 :not(:has(.target)) matches elements without .target descendants', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="target">Target</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="other">Other</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:not(:has(.target)) { background-color: green; }
+    `);
+
+    // p1 has .target -> does NOT match :not(:has(.target))
+    // p2 no .target -> matches
+    const actual = Array.from(container.querySelectorAll('.parent:not(:has(.target))'));
+    expect(formatElements(actual)).toBe('p2');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with :is() and :where()', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('B1 :has(:is(.a, .b)) matches elements with either .a or .b', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="a">A</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="b">B</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="c">C</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:is(.a, .b)) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:is(.a, .b))'));
+    expect(formatElements(actual)).toBe('p1,p2');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B2 :has(:where(.a, .b)) has zero specificity contribution', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent special">
+        <span class="a">A</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; }
+      .parent:has(:where(.a, .b)) { background-color: red; }
+      .special { background-color: green; }
+    `);
+
+    const parent = container.querySelector('#p1')!;
+    // :has(:where(.a, .b)) = 0,1,0 (only .parent counts, :where adds 0)
+    // .special = 0,1,0
+    // Same specificity, latter wins
+    expect(getComputedStyle(parent).backgroundColor).toBe(green);
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('B3 :has() with nested :is() combinators', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <div class="wrapper">
+          <span class="target">Target</span>
+        </div>
+      </div>
+      <div id="p2" class="parent">
+        <span class="target">Direct Target</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:is(.wrapper > .target)) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:is(.wrapper > .target))'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with structural pseudo-classes', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('C1 :has(:first-child) matches elements with first-child', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="first">First</span>
+        <span>Second</span>
+      </div>
+      <div id="p2" class="parent">
+        <span>Only</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:first-child) { background-color: green; }
+    `);
+
+    // Both have first-child elements
+    const actual = Array.from(container.querySelectorAll('.parent:has(:first-child)'));
+    expect(formatElements(actual)).toBe('p1,p2');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C2 :has(:last-child) matches elements with last-child', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>First</span>
+        <span class="last">Last</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:last-child) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:last-child)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C3 :has(:only-child) matches elements with only-child', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>Only</span>
+      </div>
+      <div id="p2" class="parent">
+        <span>First</span>
+        <span>Second</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:only-child) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:only-child)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C4 :has(:nth-child(2)) matches elements with second child', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>Only</span>
+      </div>
+      <div id="p2" class="parent">
+        <span>First</span>
+        <span>Second</span>
+      </div>
+      <div id="p3" class="parent">
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:nth-child(2)) { background-color: green; }
+    `);
+
+    // p1: only 1 child -> no match
+    // p2: has 2nd child -> matches
+    // p3: has 2nd child -> matches
+    const actual = Array.from(container.querySelectorAll('.parent:has(:nth-child(2))'));
+    expect(formatElements(actual)).toBe('p2,p3');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C5 :has(:nth-child(odd)) matches elements with odd-positioned children', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span>1</span>
+        <span>2</span>
+        <span>3</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:nth-child(odd)) { background-color: green; }
+    `);
+
+    // Has children at positions 1, 3 (odd)
+    const actual = Array.from(container.querySelectorAll('.parent:has(:nth-child(odd))'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('C6 :has(:empty) matches elements with empty child', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span></span>
+      </div>
+      <div id="p2" class="parent">
+        <span>Content</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:empty) { background-color: green; }
+    `);
+
+    // p1 has empty span -> matches
+    // p2 has non-empty span -> no match
+    const actual = Array.from(container.querySelectorAll('.parent:has(:empty)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with form pseudo-classes', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('D1 :has(:checked) matches elements with checked input', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <input type="checkbox" checked>
+      </div>
+      <div id="p2" class="parent">
+        <input type="checkbox">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:checked) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:checked)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D2 :has(:disabled) matches elements with disabled input', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <input type="text" disabled>
+      </div>
+      <div id="p2" class="parent">
+        <input type="text">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:disabled) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:disabled)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D3 :has(:enabled) matches elements with enabled input', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <input type="text">
+      </div>
+      <div id="p2" class="parent">
+        <input type="text" disabled>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(:enabled) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(:enabled)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('D4 :has(input[type="radio"]:checked) complex form selector', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <input type="radio" name="group1" checked>
+        <input type="radio" name="group1">
+      </div>
+      <div id="p2" class="parent">
+        <input type="radio" name="group2">
+        <input type="radio" name="group2">
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(input[type="radio"]:checked) { background-color: green; }
+    `);
+
+    const actual = Array.from(container.querySelectorAll('.parent:has(input[type="radio"]:checked)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
+
+describe('CSS Selectors: :has() with complex combinations', () => {
+  const green = 'rgb(0, 128, 0)';
+
+  function appendStyle(cssText: string) {
+    const style = document.createElement('style');
+    style.textContent = cssText;
+    document.head.appendChild(style);
+    return style;
+  }
+
+  function formatElements(elements: Element[]) {
+    return elements.map(e => e.id).sort().join(',');
+  }
+
+  it('E1 Multiple :has() on same element', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="a">A</span>
+        <span class="b">B</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="a">A only</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="b">B only</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(.a):has(.b) { background-color: green; }
+    `);
+
+    // Must have both .a AND .b
+    const actual = Array.from(container.querySelectorAll('.parent:has(.a):has(.b)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E2 :has() combined with class and attribute', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent active" data-type="special">
+        <span class="target">Target</span>
+      </div>
+      <div id="p2" class="parent" data-type="special">
+        <span class="target">Target</span>
+      </div>
+      <div id="p3" class="parent active">
+        <span class="target">Target</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent.active[data-type="special"]:has(.target) { background-color: green; }
+    `);
+
+    // Must be .active AND have data-type="special" AND have .target child
+    const actual = Array.from(container.querySelectorAll('.parent.active[data-type="special"]:has(.target)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E3 :has() in descendant selector context', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div class="outer" id="o1">
+        <div id="p1" class="parent">
+          <span class="target">Target</span>
+        </div>
+      </div>
+      <div id="p2" class="parent">
+        <span class="target">Target</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .outer .parent:has(.target) { background-color: green; }
+    `);
+
+    // Only .parent inside .outer
+    const actual = Array.from(container.querySelectorAll('.outer .parent:has(.target)'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E4 :has() with multiple selectors in argument', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="a">A</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="b">B</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="c">C</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(.a, .b) { background-color: green; }
+    `);
+
+    // Has either .a OR .b
+    const actual = Array.from(container.querySelectorAll('.parent:has(.a, .b)'));
+    expect(formatElements(actual)).toBe('p1,p2');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+
+  it('E5 Chained :has() and :not(:has())', async () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    container.innerHTML = `
+      <div id="p1" class="parent">
+        <span class="good">Good</span>
+      </div>
+      <div id="p2" class="parent">
+        <span class="good">Good</span>
+        <span class="bad">Bad</span>
+      </div>
+      <div id="p3" class="parent">
+        <span class="bad">Bad only</span>
+      </div>
+    `;
+    document.body.appendChild(container);
+
+    const style = appendStyle(`
+      .parent { width: 80px; height: 30px; margin: 2px; background: red; }
+      .parent:has(.good):not(:has(.bad)) { background-color: green; }
+    `);
+
+    // Has .good but NOT .bad
+    const actual = Array.from(container.querySelectorAll('.parent:has(.good):not(:has(.bad))'));
+    expect(formatElements(actual)).toBe('p1');
+
+    await snapshot();
+
+    style.remove();
+    container.remove();
+  });
+});
diff --git a/webf/lib/html.dart b/webf/lib/html.dart
index dd855be390..6e22a220fd 100644
--- a/webf/lib/html.dart
+++ b/webf/lib/html.dart
@@ -19,6 +19,7 @@ export 'src/html/html.dart';
 export 'src/html/img.dart';
 export 'src/html/br.dart';
 export 'src/html/form/input.dart';
+export 'src/html/form/select.dart';
 export 'src/html/listview.dart';
 export 'src/html/script.dart';
 export 'src/html/portal.dart';
diff --git a/webf/lib/src/bridge/native_value.dart b/webf/lib/src/bridge/native_value.dart
index 8f144795e8..a1ab876f0b 100644
--- a/webf/lib/src/bridge/native_value.dart
+++ b/webf/lib/src/bridge/native_value.dart
@@ -278,6 +278,15 @@ dynamic fromNativeValue(WebFViewController view, Pointer<NativeValue> nativeValu
   }
 }
 
+String _encodeEnumForBridge(Enum value) {
+  // Prefer custom `toString()` (often overridden in generated enums to return
+  // a JS-facing string like 'horizontal'), otherwise fall back to `name`.
+  final String asString = value.toString();
+  final String defaultToString = '${value.runtimeType}.${value.name}';
+  if (asString != defaultToString) return asString;
+  return value.name;
+}
+
 void toNativeValue(Pointer<NativeValue> target, value, [BindingObject? ownerBindingObject]) {
   if (value == null) {
     target.ref.tag = JSValueType.tagNull.index;
@@ -294,6 +303,11 @@ void toNativeValue(Pointer<NativeValue> target, value, [BindingObject? ownerBind
     Pointer<NativeString> nativeString = stringToNativeString(value);
     target.ref.tag = JSValueType.tagString.index;
     target.ref.u = nativeString.address;
+  } else if (value is Enum) {
+    final String encoded = _encodeEnumForBridge(value);
+    Pointer<NativeString> nativeString = stringToNativeString(encoded);
+    target.ref.tag = JSValueType.tagString.index;
+    target.ref.u = nativeString.address;
   } else if (value is Pointer) {
     target.ref.tag = JSValueType.tagPointer.index;
     target.ref.uint32 = JSPointerType.others.index;
@@ -319,7 +333,16 @@ void toNativeValue(Pointer<NativeValue> target, value, [BindingObject? ownerBind
       toNativeValue(lists + i, value[i], ownerBindingObject);
     }
   } else if (value is Object) {
-    String str = jsonEncode(value);
+    // Use a custom encoder so that Dart enums can cross the bridge without
+    // crashing (e.g. a generated binding getter returning an enum).
+    final encoder = JsonEncoder((nonEncodable) {
+      if (nonEncodable is Enum) return _encodeEnumForBridge(nonEncodable);
+      throw JsonUnsupportedObjectError(
+        nonEncodable,
+        cause: 'Converting object to an encodable object failed.',
+      );
+    });
+    String str = encoder.convert(value);
     target.ref.tag = JSValueType.tagJson.index;
     target.ref.u = str.toNativeUtf8().address;
   }
diff --git a/webf/lib/src/css/parser/parser.dart b/webf/lib/src/css/parser/parser.dart
index cfac0ba2d2..5396be3c9c 100644
--- a/webf/lib/src/css/parser/parser.dart
+++ b/webf/lib/src/css/parser/parser.dart
@@ -1139,6 +1139,22 @@ class CSSParser {
 
         _eat(TokenKind.RPAREN);
 
+        // If all arguments are invalid (or empty), treat the selector as invalid
+        // so the whole selector list can be discarded (WebF behavior: match nothing).
+        if (group == null) {
+          return InvalidSelector(pseudoName);
+        }
+        return PseudoClassFunctionSelector(pseudoName, group);
+      } else if (!pseudoElement && name == 'has') {
+        _eat(TokenKind.LPAREN);
+
+        // https://drafts.csswg.org/selectors-4/#relational
+        // :has() takes a <relative-selector-list> which is forgiving.
+        final SelectorGroup? group =
+            processForgivingSelectorGroup(terminatorKind: TokenKind.RPAREN);
+
+        _eat(TokenKind.RPAREN);
+
         // If all arguments are invalid (or empty), treat the selector as invalid
         // so the whole selector list can be discarded (WebF behavior: match nothing).
         if (group == null) {
diff --git a/webf/lib/src/css/parser/selector.dart b/webf/lib/src/css/parser/selector.dart
index 9b76ba6e74..36d46fa063 100644
--- a/webf/lib/src/css/parser/selector.dart
+++ b/webf/lib/src/css/parser/selector.dart
@@ -106,7 +106,7 @@ class Selector extends TreeNode {
         if (name == 'where') {
           return 0;
         }
-        if (name == 'is') {
+        if (name == 'is' || name == 'has') {
           final arg = node.argument;
           if (arg is SelectorGroup) {
             int maxSpecificity = 0;
diff --git a/webf/lib/src/css/query_selector.dart b/webf/lib/src/css/query_selector.dart
index 203940162d..b84f56b6d7 100644
--- a/webf/lib/src/css/query_selector.dart
+++ b/webf/lib/src/css/query_selector.dart
@@ -37,25 +37,31 @@ import 'package:webf/dom.dart';
 import 'package:webf/css.dart';
 import 'package:webf/foundation.dart';
 import 'package:webf/html.dart';
+import 'package:webf/src/html/form/checked.dart';
+import 'package:webf/src/html/form/base_input.dart';
 import 'package:webf/src/html/form/form_element_base.dart';
 
 typedef IndexCounter = int Function(Element element);
 
 Element? querySelector(Node node, String selector) =>
-    SelectorEvaluator().querySelector(node, _parseSelectorGroup(selector));
+    SelectorEvaluator(scopeElement: _resolveScope(node))
+        .querySelector(node, _parseSelectorGroup(selector));
 
 List<Element> querySelectorAll(Node node, String selector) {
   final group = _parseSelectorGroup(selector);
   final results = <Element>[];
-  SelectorEvaluator().querySelectorAll(node, group, results);
+  SelectorEvaluator(scopeElement: _resolveScope(node))
+      .querySelectorAll(node, group, results);
   return results;
 }
 
 bool matches(Element element, String selector) =>
-    SelectorEvaluator().matchSelector(_parseSelectorGroup(selector), element);
+    SelectorEvaluator(scopeElement: element)
+        .matchSelector(_parseSelectorGroup(selector), element);
 
 Element? closest(Node node, String selector) =>
-    SelectorEvaluator().closest(node, _parseSelectorGroup(selector));
+    SelectorEvaluator(scopeElement: node is Element ? node : null)
+        .closest(node, _parseSelectorGroup(selector));
 
 
 // http://dev.w3.org/csswg/selectors-4/#grouping
@@ -64,9 +70,18 @@ SelectorGroup? _parseSelectorGroup(String selector) {
   return parser.processSelectorGroup();
 }
 
+Element? _resolveScope(Node node) {
+  if (node is Element) return node;
+  if (node is Document) return node.documentElement;
+  return null;
+}
+
 class SelectorEvaluator extends SelectorVisitor {
   Element? _element;
   SelectorGroup? _selectorGroup;
+  final Element? _scopeElement;
+
+  SelectorEvaluator({Element? scopeElement}) : _scopeElement = scopeElement;
 
   bool matchSelector(SelectorGroup? selectorGroup, Element? element) {
     if (selectorGroup == null || element == null) {
@@ -285,6 +300,10 @@ class SelectorEvaluator extends SelectorVisitor {
       case 'root':
         return _element!.nodeName == HTML && (_element!.parentElement == null || _element!.parentElement is Document);
 
+      case 'scope':
+        if (_scopeElement == null) return false;
+        return identical(_element, _scopeElement);
+
       // http://dev.w3.org/csswg/selectors-4/#the-empty-pseudo
       case 'empty':
         return _element!.childNodes.every((n) => !(n is Element || n is TextNode && n.data.isNotEmpty));
@@ -356,6 +375,29 @@ class SelectorEvaluator extends SelectorVisitor {
         final bool isDisabled = _isFormControlDisabled(element);
         return name == 'disabled' ? isDisabled : !isDisabled;
       }
+      // https://drafts.csswg.org/selectors-4/#validity-pseudos
+      case 'valid':
+      case 'invalid': {
+        final Element element = _element!;
+        if (!_isFormControlElement(element)) return false;
+        final bool isValid = _isFormControlValid(element);
+        return name == 'valid' ? isValid : !isValid;
+      }
+      // https://drafts.csswg.org/selectors-4/#checked
+      case 'checked': {
+        final Element element = _element!;
+        if (element is BaseCheckedElement) {
+          return element.getChecked();
+        }
+        if (element.tagName.toUpperCase() == OPTION) {
+          return _isOptionSelected(element);
+        }
+        if (element.attributes.containsKey('checked')) return true;
+        if (element.attributes.containsKey('selected')) return true;
+        final String? ariaChecked = element.attributes['aria-checked'];
+        if (ariaChecked != null && ariaChecked.toLowerCase() == 'true') return true;
+        return false;
+      }
 
       // http://dev.w3.org/csswg/selectors-4/#link
       case 'link':
@@ -395,11 +437,106 @@ class SelectorEvaluator extends SelectorVisitor {
       return element.disabled;
     }
     if (element.attributes.containsKey('disabled')) return true;
+    if (element.tagName.toUpperCase() == OPTION) {
+      final Element? optgroup = _findAncestorByTag(element, OPTGROUP);
+      if (optgroup != null && optgroup.attributes.containsKey('disabled')) {
+        return true;
+      }
+      final Element? select = _findAncestorByTag(element, SELECT);
+      if (select != null && select.attributes.containsKey('disabled')) {
+        return true;
+      }
+    }
+    if (element.tagName.toUpperCase() == OPTGROUP) {
+      final Element? select = _findAncestorByTag(element, SELECT);
+      if (select != null && select.attributes.containsKey('disabled')) {
+        return true;
+      }
+    }
     final String? ariaDisabled = element.attributes['aria-disabled'];
     if (ariaDisabled != null && ariaDisabled.toLowerCase() == 'true') return true;
     return false;
   }
 
+  bool _isFormControlValid(Element element) {
+    if (_isFormControlDisabled(element)) {
+      return true;
+    }
+    String type = 'text';
+    String value = '';
+    if (element is BaseInputElement) {
+      type = element.type.toLowerCase();
+      value = element.value ?? '';
+    } else {
+      final String? attrType = element.attributes['type'];
+      if (attrType != null && attrType.isNotEmpty) {
+        type = attrType.toLowerCase();
+      }
+      value = element.attributes['value'] ?? '';
+    }
+    final bool required = element.attributes.containsKey('required');
+
+    if (element is BaseCheckedElement && (type == 'checkbox' || type == 'radio')) {
+      return !required || element.getChecked();
+    }
+
+    switch (type) {
+      case 'email':
+        if (value.isEmpty) return !required;
+        return RegExp(r'^[^\s@]+@[^\s@]+\.[^\s@]+$').hasMatch(value);
+      default:
+        if (!required) return true;
+        return value.isNotEmpty;
+    }
+  }
+
+  Element? _findAncestorByTag(Element element, String tag) {
+    Element? current = element.parentElement;
+    while (current != null) {
+      if (current.tagName.toUpperCase() == tag) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  bool _isOptionSelected(Element element) {
+    if (element.attributes.containsKey('selected')) {
+      return true;
+    }
+    final Element? select = _findAncestorByTag(element, SELECT);
+    if (select == null) {
+      return false;
+    }
+    if (select.attributes.containsKey('multiple')) {
+      return false;
+    }
+    final List<Element> options = _collectOptions(select);
+    if (options.isEmpty) {
+      return false;
+    }
+    final bool anyExplicit = options.any((option) => option.attributes.containsKey('selected'));
+    if (anyExplicit) {
+      return false;
+    }
+    return identical(options.first, element);
+  }
+
+  List<Element> _collectOptions(Element root) {
+    final List<Element> options = <Element>[];
+    void visit(Element element) {
+      if (element.tagName.toUpperCase() == OPTION) {
+        options.add(element);
+      }
+      for (final Element child in element.children) {
+        visit(child);
+      }
+    }
+    visit(root);
+    return options;
+  }
+
   @override
   bool visitPseudoElementSelector(PseudoElementSelector node) {
     if (_isLegacyPsuedoClass(node.name)) return true;
@@ -443,6 +580,17 @@ class SelectorEvaluator extends SelectorVisitor {
         }
         return false;
       }
+      case 'has': {
+        final arg = node.argument;
+        if (arg is! SelectorGroup) return false;
+        final Element scope = _element!;
+        for (final Selector selector in arg.selectors) {
+          if (_matchesRelativeSelector(scope, selector)) {
+            return true;
+          }
+        }
+        return false;
+      }
       case 'where': {
         final arg = node.argument;
         if (arg is! SelectorGroup) return false;
@@ -483,6 +631,217 @@ class SelectorEvaluator extends SelectorVisitor {
     return false;
   }
 
+  bool _matchesRelativeSelector(Element scope, Selector selector) {
+    if (selector.simpleSelectorSequences.isEmpty) return false;
+
+    final int leadingCombinator = selector.simpleSelectorSequences.first.combinator;
+    Iterable<Element> candidates;
+
+    switch (leadingCombinator) {
+      case TokenKind.COMBINATOR_PLUS:
+      case TokenKind.COMBINATOR_TILDE: {
+        final List<Element> roots = <Element>[];
+        Element? sibling = scope.nextElementSibling;
+        while (sibling != null) {
+          roots.add(sibling);
+          sibling = sibling.nextElementSibling;
+        }
+        if (roots.isEmpty) return false;
+        candidates = _traverseMultiple(roots);
+        break;
+      }
+      case TokenKind.COMBINATOR_GREATER:
+      case TokenKind.COMBINATOR_DESCENDANT:
+      case TokenKind.COMBINATOR_NONE:
+      default: {
+        candidates = _traverseElements(scope, includeRoot: false);
+        break;
+      }
+    }
+
+    for (final Element element in candidates) {
+      final List<Element> leftmostMatches = _collectLeftmostMatches(element, selector);
+      if (leftmostMatches.isEmpty) continue;
+      for (final Element leftmost in leftmostMatches) {
+        if (_leftmostMatchesScope(scope, leftmost, leadingCombinator)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  bool _leftmostMatchesScope(Element scope, Element leftmost, int leadingCombinator) {
+    switch (leadingCombinator) {
+      case TokenKind.COMBINATOR_GREATER:
+        return leftmost.parentElement == scope;
+      case TokenKind.COMBINATOR_PLUS:
+        return leftmost.previousElementSibling == scope;
+      case TokenKind.COMBINATOR_TILDE: {
+        Element? prev = leftmost.previousElementSibling;
+        while (prev != null) {
+          if (prev == scope) return true;
+          prev = prev.previousElementSibling;
+        }
+        return false;
+      }
+      case TokenKind.COMBINATOR_DESCENDANT:
+      case TokenKind.COMBINATOR_NONE:
+      default:
+        return _isDescendantOf(leftmost, scope);
+    }
+  }
+
+  bool _isDescendantOf(Element element, Element ancestor) {
+    Element? current = element.parentElement;
+    while (current != null) {
+      if (current == ancestor) return true;
+      current = current.parentElement;
+    }
+    return false;
+  }
+
+  Iterable<Element> _traverseMultiple(List<Element> roots) sync* {
+    for (final Element root in roots) {
+      yield* _traverseElements(root, includeRoot: true);
+    }
+  }
+
+  Iterable<Element> _traverseElements(Element root, {required bool includeRoot}) sync* {
+    if (includeRoot) yield root;
+    for (final Element child in root.children) {
+      yield child;
+      yield* _traverseElements(child, includeRoot: false);
+    }
+  }
+
+  List<Element> _collectLeftmostMatches(Element element, Selector node) {
+    final old = _element;
+    final Set<Element> results = <Element>{};
+
+    // Build right-to-left groups of compound selectors (simple selectors joined
+    // with COMBINATOR_NONE), and the combinator that connects each group to the
+    // next group on the left.
+    final List<List<SimpleSelector>> groups = <List<SimpleSelector>>[];
+    final List<int> groupCombinators = <int>[]; // combinator from this group to the next (left) group
+
+    {
+      List<SimpleSelector> current = <SimpleSelector>[];
+      for (final seq in node.simpleSelectorSequences.reversed) {
+        current.add(seq.simpleSelector);
+        if (seq.combinator != TokenKind.COMBINATOR_NONE) {
+          groups.add(current);
+          groupCombinators.add(seq.combinator);
+          current = <SimpleSelector>[];
+        }
+      }
+      if (current.isNotEmpty) {
+        groups.add(current);
+        // No combinator to the left of the leftmost group
+        groupCombinators.add(TokenKind.COMBINATOR_NONE);
+      }
+    }
+
+    bool matchesCompound(Element? element, List<SimpleSelector> compound) {
+      if (element == null) return false;
+      // Save and restore _element so nested selector checks work correctly.
+      final saved = _element;
+      _element = element;
+
+      // Optional timing/logging for diagnostics.
+      final bool wantDetail = DebugFlags.enableCssMatchDetail || (DebugFlags.cssMatchCompoundLogThresholdMs > 0);
+      final Stopwatch? sw = wantDetail ? (Stopwatch()..start()) : null;
+      bool ok = true;
+      int failIndex = -1;
+      String failType = '';
+      for (int i = 0; i < compound.length; i++) {
+        final sel = compound[i];
+        final bool matched = sel.visit(this) as bool;
+        if (!matched) {
+          ok = false;
+          failIndex = i;
+          failType = _simpleSelectorType(sel);
+          break;
+        }
+      }
+      final int elapsed = sw?.elapsedMilliseconds ?? 0;
+      if (wantDetail) {
+        final int threshold = DebugFlags.cssMatchCompoundLogThresholdMs;
+        final bool overThreshold = threshold > 0 && elapsed >= threshold;
+        if (DebugFlags.enableCssMatchDetail || overThreshold) {
+          final String elemDesc = _describeElement(element);
+          final String sels = compound.map(_simpleSelectorType).join(',');
+          cssLogger.info('[match][compound] elem=$elemDesc parts=${compound.length} ok=$ok ms=$elapsed'
+              '${ok ? '' : ' failAt=$failIndex failType=$failType'} selTypes=[$sels]');
+        }
+      }
+      _element = saved;
+      return ok;
+    }
+
+    void collect(Element current, int groupIndex) {
+      if (!matchesCompound(current, groups[groupIndex])) return;
+      if (groupIndex == groups.length - 1) {
+        results.add(current);
+        return;
+      }
+
+      final int combinator = groupCombinators[groupIndex];
+      final List<SimpleSelector> nextGroup = groups[groupIndex + 1];
+
+      switch (combinator) {
+        case TokenKind.COMBINATOR_DESCENDANT: {
+          Element? ancestor = current.parentElement;
+          while (ancestor != null) {
+            if (matchesCompound(ancestor, nextGroup)) {
+              collect(ancestor, groupIndex + 1);
+            }
+            ancestor = ancestor.parentElement;
+          }
+          break;
+        }
+        case TokenKind.COMBINATOR_GREATER: {
+          final Element? parent = current.parentElement;
+          if (parent == null || !matchesCompound(parent, nextGroup)) {
+            break;
+          }
+          collect(parent, groupIndex + 1);
+          break;
+        }
+        case TokenKind.COMBINATOR_PLUS: {
+          final Element? prev = current.previousElementSibling;
+          if (prev == null || !matchesCompound(prev, nextGroup)) {
+            break;
+          }
+          collect(prev, groupIndex + 1);
+          break;
+        }
+        case TokenKind.COMBINATOR_TILDE: {
+          Element? prev = current.previousElementSibling;
+          while (prev != null) {
+            if (matchesCompound(prev, nextGroup)) {
+              collect(prev, groupIndex + 1);
+            }
+            prev = prev.previousElementSibling;
+          }
+          break;
+        }
+        case TokenKind.COMBINATOR_NONE:
+          if (matchesCompound(current, nextGroup)) {
+            collect(current, groupIndex + 1);
+          }
+          break;
+        default:
+          if (kDebugMode) throw _unsupported(node);
+      }
+    }
+
+    collect(element, 0);
+
+    _element = old;
+    return results.toList(growable: false);
+  }
+
   bool _matchesSelectorWithoutSpecificity(Selector selector, Element element) {
     final Element? savedElement = _element;
     final SelectorGroup? savedGroup = _selectorGroup;
diff --git a/webf/lib/src/css/rule_set.dart b/webf/lib/src/css/rule_set.dart
index ab665c0d9f..7807dfe3e7 100644
--- a/webf/lib/src/css/rule_set.dart
+++ b/webf/lib/src/css/rule_set.dart
@@ -36,6 +36,7 @@ class RuleSet {
   final List<CSSRule> pseudoRules = [];
 
   final Map<String, CSSKeyframesRule> keyframesRules = {};
+  bool hasHasPseudo = false;
 
   int _lastPosition = 0;
 
@@ -66,6 +67,14 @@ class RuleSet {
       } else {
         rule.layerOrderKey = null;
       }
+      if (!hasHasPseudo) {
+        for (final selector in rule.selectorGroup.selectors) {
+          if (_selectorContainsHas(selector)) {
+            hasHasPseudo = true;
+            break;
+          }
+        }
+      }
       for (final selector in rule.selectorGroup.selectors) {
         findBestRuleSetAndAdd(selector, rule);
       }
@@ -92,6 +101,7 @@ class RuleSet {
     universalRules.clear();
     pseudoRules.clear();
     keyframesRules.clear();
+    hasHasPseudo = false;
     layerTree.reset();
     _lastPosition = 0;
   }
@@ -184,6 +194,45 @@ class RuleSet {
     universalRules.add(rule);
   }
 
+  bool _selectorContainsHas(Selector selector) {
+    for (final seq in selector.simpleSelectorSequences) {
+      if (_simpleSelectorContainsHas(seq.simpleSelector)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  bool _simpleSelectorContainsHas(SimpleSelector selector) {
+    if (selector is PseudoClassFunctionSelector) {
+      final String name = selector.name.toLowerCase();
+      if (name == 'has') {
+        return true;
+      }
+      final dynamic arg = selector.argument;
+      if (arg is SelectorGroup) {
+        for (final sel in arg.selectors) {
+          if (_selectorContainsHas(sel)) {
+            return true;
+          }
+        }
+      } else if (arg is Selector) {
+        if (_selectorContainsHas(arg)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    if (selector is NegationSelector) {
+      final SimpleSelector? neg = selector.negationArg;
+      if (neg == null) return false;
+      return _simpleSelectorContainsHas(neg);
+    }
+
+    return false;
+  }
+
   static bool _isLegacyPsuedoClass(String name) {
     // TODO: :first-letter/line match elements.
     switch (name) {
diff --git a/webf/lib/src/dom/container_node.dart b/webf/lib/src/dom/container_node.dart
index c893a4c4e7..cc9c18d112 100644
--- a/webf/lib/src/dom/container_node.dart
+++ b/webf/lib/src/dom/container_node.dart
@@ -313,9 +313,7 @@ abstract class ContainerNode extends Node {
           (nodeData!.nodeList as ChildNodeList).invalidateCache();
         }
       }
-      if (parentNode != null) {
-        ownerDocument.nthIndexCache.invalidateWithParentNode(parentNode!);
-      }
+      ownerDocument.nthIndexCache.invalidateWithParentNode(this);
     }
 
     // This is a performance optimization, NodeList cache invalidation is
@@ -333,9 +331,7 @@ abstract class ContainerNode extends Node {
       }
       node = node.parentNode;
     }
-    if (parentNode != null) {
-      ownerDocument.nthIndexCache.invalidateWithParentNode(parentNode!);
-    }
+    ownerDocument.nthIndexCache.invalidateWithParentNode(this);
   }
 
   Node? _firstChild;
diff --git a/webf/lib/src/dom/element.dart b/webf/lib/src/dom/element.dart
index 0fed498105..b093af4881 100644
--- a/webf/lib/src/dom/element.dart
+++ b/webf/lib/src/dom/element.dart
@@ -104,6 +104,7 @@ abstract class Element extends ContainerNode
   String? get id => _id;
 
   set id(String? id) {
+    final String? oldId = _id;
     final isNeedRecalculate = _checkRecalculateStyle([id, _id]);
     _updateIDMap(id, oldID: _id);
     _id = id;
@@ -112,10 +113,15 @@ abstract class Element extends ContainerNode
     _updateAttrPresenceIndex(_idAttr, present: id != null);
     if (DebugFlags.enableCssBatchRecalc) {
       ownerDocument.markElementStyleDirty(this, reason: 'batch:id');
-
+      if (oldId != id) {
+        _markHasSelectorsDirty();
+      }
       return;
     }
     recalculateStyle(rebuildNested: isNeedRecalculate);
+    if (oldId != id) {
+      _markHasSelectorsDirty();
+    }
   }
 
   // Is element an replaced element.
@@ -186,6 +192,7 @@ abstract class Element extends ContainerNode
     final Iterable<String> checkKeys = (oldClasses + classList)
         .where((key) => !oldClasses.contains(key) || !classList.contains(key));
     final bool isNeedRecalculate = _checkRecalculateStyle(List.from(checkKeys));
+    final bool classChanged = checkKeys.isNotEmpty;
 
     // Update internal class list
     _classList
@@ -198,10 +205,15 @@ abstract class Element extends ContainerNode
     _updateAttrPresenceIndex(_classNameAttr, present: true);
     if (DebugFlags.enableCssBatchRecalc) {
       ownerDocument.markElementStyleDirty(this, reason: 'batch:class');
-
+      if (classChanged) {
+        _markHasSelectorsDirty();
+      }
       return;
     }
     recalculateStyle(rebuildNested: isNeedRecalculate);
+    if (classChanged) {
+      _markHasSelectorsDirty();
+    }
   }
 
   String get className => _classList.join(_oneSpace);
@@ -1491,6 +1503,9 @@ abstract class Element extends ContainerNode
 
     // Mark semantics dirty for accessibility-relevant attributes.
     if (changed) _markSemanticsDirtyIfNeeded(qualifiedName);
+    if (changed && qualifiedName != _classNameAttr) {
+      _markHasSelectorsDirty();
+    }
   }
 
   @mustCallSuper
@@ -1528,6 +1543,9 @@ abstract class Element extends ContainerNode
 
       // Mark semantics dirty for accessibility-relevant attributes.
       _markSemanticsDirtyIfNeeded(qualifiedName);
+      if (qualifiedName != _classNameAttr) {
+        _markHasSelectorsDirty();
+      }
     }
   }
 
@@ -1560,6 +1578,14 @@ abstract class Element extends ContainerNode
     }
   }
 
+  void _markHasSelectorsDirty() {
+    if (ownerDocument.ownerView.enableBlink) return;
+    if (!ownerDocument.ruleSet.hasHasPseudo) return;
+    final Element? root = ownerDocument.documentElement;
+    if (root == null) return;
+    ownerDocument.markElementStyleDirty(root, reason: 'childList-has');
+  }
+
   @mustCallSuper
   bool hasAttribute(String qualifiedName) {
     return attributes.containsKey(qualifiedName);
diff --git a/webf/lib/src/dom/element_registry.dart b/webf/lib/src/dom/element_registry.dart
index 8159d80d36..26f34040de 100644
--- a/webf/lib/src/dom/element_registry.dart
+++ b/webf/lib/src/dom/element_registry.dart
@@ -200,6 +200,9 @@ void defineBuiltInElements() {
   defineElement(BUTTON, (context) => ButtonElement(context));
   defineElement(INPUT, (context) => FlutterInputElement(context));
   defineElement(TEXTAREA, (context) => FlutterTextAreaElement(context));
+  defineElement(SELECT, (context) => HTMLSelectElement(context));
+  defineElement(OPTION, (context) => HTMLOptionElement(context));
+  defineElement(OPTGROUP, (context) => HTMLOptGroupElement(context));
   // Edits
   defineElement(DEL, (context) => DelElement(context));
   defineElement(INS, (context) => InsElement(context));
diff --git a/webf/lib/src/html/form/base_input.dart b/webf/lib/src/html/form/base_input.dart
index 8f516ec8d1..0b0b9b62d6 100644
--- a/webf/lib/src/html/form/base_input.dart
+++ b/webf/lib/src/html/form/base_input.dart
@@ -80,6 +80,7 @@ mixin BaseInputElement on WidgetElement implements FormElementBase {
 
   // Internal setter used by FlutterInputElement to avoid naming conflicts.
   void setElementValue(String newValue, {bool markDirty = true}) {
+    final bool changed = newValue != _value;
     _value = newValue;
     if (markDirty) _dirtyValue = true;
     // Keep controller in sync when state exists, preserving selection.
@@ -94,6 +95,18 @@ mixin BaseInputElement on WidgetElement implements FormElementBase {
         selection: TextSelection(baseOffset: selectionStart, extentOffset: selectionEnd),
       );
     }
+    if (markDirty && changed) {
+      _markPseudoStateDirty();
+    }
+  }
+
+  void _markPseudoStateDirty() {
+    final dom.Element? root = ownerDocument.documentElement;
+    if (root != null) {
+      ownerDocument.markElementStyleDirty(root, reason: 'childList-pseudo');
+    } else {
+      ownerDocument.markElementStyleDirty(this, reason: 'childList-pseudo');
+    }
   }
 
   bool get isValueDirty => _dirtyValue;
@@ -241,11 +254,18 @@ mixin BaseInputElement on WidgetElement implements FormElementBase {
   bool get disabled => _disabled;
 
   set disabled(value) {
+    final bool previous = _disabled;
     if (value is String) {
       _disabled = true;
+      if (!previous && _disabled) {
+        _markPseudoStateDirty();
+      }
       return;
     }
     _disabled = value == true;
+    if (previous != _disabled) {
+      _markPseudoStateDirty();
+    }
   }
 
   bool get autofocus => getAttribute('autofocus') != null;
diff --git a/webf/lib/src/html/form/checked.dart b/webf/lib/src/html/form/checked.dart
index 7e39c5b644..65afe539e3 100644
--- a/webf/lib/src/html/form/checked.dart
+++ b/webf/lib/src/html/form/checked.dart
@@ -36,7 +36,8 @@ mixin BaseCheckedElement on BaseInputElement {
   setChecked(bool value) {
     if (this is FlutterInputElement) {
       FlutterInputElement input = this as FlutterInputElement;
-      
+      final bool previous = getChecked();
+
       if (state == null) {
         if (input.type == 'radio') {
           _setRadioChecked(value);
@@ -44,22 +45,26 @@ mixin BaseCheckedElement on BaseInputElement {
           // Persist on the element immediately and also cache for restoration when state mounts.
           _checked = value;
           CheckboxElementState.setEarlyCheckboxState(_earlyCheckedKey, value);
+        } else {
+          _checked = value;
+        }
+      } else {
+        switch (input.type) {
+          case 'radio':
+            _setRadioChecked(value);
+            // _setRadioChecked updates group selection immediately; request a rebuild for the widget.
+            state?.requestUpdateState();
+            break;
+          case 'checkbox':
+          default:
+            // Keep checkedness synchronous for JS reads, then rebuild the widget.
+            _checked = value;
+            state?.requestUpdateState();
+            break;
         }
-        return;
       }
-
-      switch (input.type) {
-        case 'radio':
-          _setRadioChecked(value);
-          // _setRadioChecked updates group selection immediately; request a rebuild for the widget.
-          state?.requestUpdateState();
-          break;
-        case 'checkbox':
-        default:
-          // Keep checkedness synchronous for JS reads, then rebuild the widget.
-          _checked = value;
-          state?.requestUpdateState();
-          break;
+      if (previous != getChecked()) {
+        _markPseudoStateDirty();
       }
     }
   }
@@ -146,6 +151,15 @@ mixin BaseCheckedElement on BaseInputElement {
     }
     return 1.0;
   }
+
+  void _markPseudoStateDirty() {
+    final dom.Element? root = ownerDocument.documentElement;
+    if (root != null) {
+      ownerDocument.markElementStyleDirty(root, reason: 'childList-pseudo');
+    } else {
+      ownerDocument.markElementStyleDirty(this, reason: 'childList-pseudo');
+    }
+  }
 }
 
 mixin CheckboxElementState on WebFWidgetElementState {
diff --git a/webf/lib/src/html/form/select.dart b/webf/lib/src/html/form/select.dart
new file mode 100644
index 0000000000..fa9e051653
--- /dev/null
+++ b/webf/lib/src/html/form/select.dart
@@ -0,0 +1,245 @@
+/*
+ * Copyright (C) 2024-present The OpenWebF Company. All rights reserved.
+ * Licensed under GNU GPL with Enterprise exception.
+ */
+/*
+ * Copyright (C) 2022-2024 The WebF authors. All rights reserved.
+ */
+
+import 'package:webf/bridge.dart';
+import 'package:webf/dom.dart' as dom;
+import 'package:webf/dom.dart';
+
+// ignore: constant_identifier_names
+const SELECT = 'SELECT';
+// ignore: constant_identifier_names
+const OPTION = 'OPTION';
+// ignore: constant_identifier_names
+const OPTGROUP = 'OPTGROUP';
+
+class HTMLSelectElement extends Element {
+  HTMLSelectElement([super.context]);
+
+  bool get disabled => getAttribute('disabled') != null;
+
+  set disabled(dynamic value) {
+    _setBooleanAttribute('disabled', value == true);
+  }
+
+  bool get multiple => getAttribute('multiple') != null;
+
+  set multiple(dynamic value) {
+    _setBooleanAttribute('multiple', value == true);
+  }
+
+  void _setBooleanAttribute(String name, bool enabled) {
+    if (enabled) {
+      internalSetAttribute(name, '');
+    } else if (attributes.containsKey(name)) {
+      removeAttribute(name);
+    }
+    _markPseudoStateDirty();
+  }
+
+  void _markPseudoStateDirty() {
+    final Element? root = ownerDocument.documentElement;
+    if (root != null) {
+      ownerDocument.markElementStyleDirty(root, reason: 'childList-pseudo');
+    } else {
+      ownerDocument.markElementStyleDirty(this, reason: 'childList-pseudo');
+    }
+  }
+
+  @override
+  void initializeDynamicProperties(Map<String, BindingObjectProperty> properties) {
+    super.initializeDynamicProperties(properties);
+    properties['disabled'] = BindingObjectProperty(getter: () => disabled, setter: (value) => disabled = value);
+    properties['multiple'] = BindingObjectProperty(getter: () => multiple, setter: (value) => multiple = value);
+  }
+
+  @override
+  void initializeAttributes(Map<String, dom.ElementAttributeProperty> attributes) {
+    super.initializeAttributes(attributes);
+    attributes['disabled'] = dom.ElementAttributeProperty(
+        getter: () => disabled.toString(),
+        setter: (value) => disabled = dom.attributeToProperty<bool>(value),
+        deleter: _markPseudoStateDirty);
+    attributes['multiple'] = dom.ElementAttributeProperty(
+        getter: () => multiple.toString(),
+        setter: (value) => multiple = dom.attributeToProperty<bool>(value),
+        deleter: _markPseudoStateDirty);
+  }
+}
+
+class HTMLOptionElement extends Element {
+  HTMLOptionElement([super.context]);
+
+  bool get selected => _isSelected();
+
+  set selected(dynamic value) {
+    _setSelected(value == true);
+  }
+
+  bool get disabled => getAttribute('disabled') != null;
+
+  set disabled(dynamic value) {
+    _setBooleanAttribute('disabled', value == true);
+  }
+
+  void _setBooleanAttribute(String name, bool enabled) {
+    if (enabled) {
+      internalSetAttribute(name, '');
+    } else if (attributes.containsKey(name)) {
+      removeAttribute(name);
+    }
+    _markPseudoStateDirty();
+  }
+
+  void _setSelected(bool value) {
+    final bool previous = _isSelected();
+    if (value) {
+      internalSetAttribute('selected', '');
+      _clearOtherSelectedIfNeeded();
+    } else if (attributes.containsKey('selected')) {
+      removeAttribute('selected');
+    }
+    if (previous != _isSelected()) {
+      _markPseudoStateDirty();
+    }
+  }
+
+  bool _isSelected() {
+    if (attributes.containsKey('selected')) {
+      return true;
+    }
+    final Element? select = _findSelectAncestor();
+    if (select == null) {
+      return false;
+    }
+    if (_selectAllowsMultiple(select)) {
+      return false;
+    }
+    final List<Element> options = _collectOptions(select);
+    if (options.isEmpty) {
+      return false;
+    }
+    final bool anyExplicit = options.any((option) => option.attributes.containsKey('selected'));
+    if (anyExplicit) {
+      return false;
+    }
+    return identical(options.first, this);
+  }
+
+  Element? _findSelectAncestor() {
+    Element? current = parentElement;
+    while (current != null) {
+      if (current.tagName.toUpperCase() == SELECT) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  bool _selectAllowsMultiple(Element select) {
+    return select.attributes.containsKey('multiple');
+  }
+
+  List<Element> _collectOptions(Element root) {
+    final List<Element> options = <Element>[];
+    void visit(Element element) {
+      if (element.tagName.toUpperCase() == OPTION) {
+        options.add(element);
+      }
+      for (final Element child in element.children) {
+        visit(child);
+      }
+    }
+    visit(root);
+    return options;
+  }
+
+  void _clearOtherSelectedIfNeeded() {
+    final Element? select = _findSelectAncestor();
+    if (select == null || _selectAllowsMultiple(select)) {
+      return;
+    }
+    final List<Element> options = _collectOptions(select);
+    for (final Element option in options) {
+      if (identical(option, this)) {
+        continue;
+      }
+      if (option.attributes.containsKey('selected')) {
+        option.removeAttribute('selected');
+      }
+    }
+  }
+
+  void _markPseudoStateDirty() {
+    final Element? root = ownerDocument.documentElement;
+    if (root != null) {
+      ownerDocument.markElementStyleDirty(root, reason: 'childList-pseudo');
+    } else {
+      ownerDocument.markElementStyleDirty(this, reason: 'childList-pseudo');
+    }
+  }
+
+  @override
+  void initializeDynamicProperties(Map<String, BindingObjectProperty> properties) {
+    super.initializeDynamicProperties(properties);
+    properties['selected'] = BindingObjectProperty(getter: () => selected, setter: (value) => selected = value);
+    properties['disabled'] = BindingObjectProperty(getter: () => disabled, setter: (value) => disabled = value);
+  }
+
+  @override
+  void initializeAttributes(Map<String, dom.ElementAttributeProperty> attributes) {
+    super.initializeAttributes(attributes);
+    attributes['selected'] = dom.ElementAttributeProperty(
+        getter: () => selected.toString(),
+        setter: (value) => selected = dom.attributeToProperty<bool>(value),
+        deleter: _markPseudoStateDirty);
+    attributes['disabled'] = dom.ElementAttributeProperty(
+        getter: () => disabled.toString(),
+        setter: (value) => disabled = dom.attributeToProperty<bool>(value),
+        deleter: _markPseudoStateDirty);
+  }
+}
+
+class HTMLOptGroupElement extends Element {
+  HTMLOptGroupElement([super.context]);
+
+  bool get disabled => getAttribute('disabled') != null;
+
+  set disabled(dynamic value) {
+    if (value == true) {
+      internalSetAttribute('disabled', '');
+    } else if (attributes.containsKey('disabled')) {
+      removeAttribute('disabled');
+    }
+    _markPseudoStateDirty();
+  }
+
+  void _markPseudoStateDirty() {
+    final Element? root = ownerDocument.documentElement;
+    if (root != null) {
+      ownerDocument.markElementStyleDirty(root, reason: 'childList-pseudo');
+    } else {
+      ownerDocument.markElementStyleDirty(this, reason: 'childList-pseudo');
+    }
+  }
+
+  @override
+  void initializeDynamicProperties(Map<String, BindingObjectProperty> properties) {
+    super.initializeDynamicProperties(properties);
+    properties['disabled'] = BindingObjectProperty(getter: () => disabled, setter: (value) => disabled = value);
+  }
+
+  @override
+  void initializeAttributes(Map<String, dom.ElementAttributeProperty> attributes) {
+    super.initializeAttributes(attributes);
+    attributes['disabled'] = dom.ElementAttributeProperty(
+        getter: () => disabled.toString(),
+        setter: (value) => disabled = dom.attributeToProperty<bool>(value),
+        deleter: _markPseudoStateDirty);
+  }
+}
diff --git a/webf/lib/src/rendering/overflow.dart b/webf/lib/src/rendering/overflow.dart
index 0dc0ac5915..c09c5d7392 100644
--- a/webf/lib/src/rendering/overflow.dart
+++ b/webf/lib/src/rendering/overflow.dart
@@ -25,10 +25,17 @@ mixin RenderOverflowMixin on RenderBoxModelBase {
   void Function(PointerEvent)? scrollablePointerListener;
 
   void disposeScrollable() {
+    // Detach scroll offset listeners first. Otherwise ScrollPosition may continue
+    // to dispatch notifications (e.g. in-flight animations) and invoke stale
+    // callbacks after this render object has been disposed.
+    _scrollOffsetX?.removeListener(scrollXListener);
+    _scrollOffsetY?.removeListener(scrollYListener);
     scrollListener = null;
     scrollablePointerListener = null;
     _scrollOffsetX = null;
     _scrollOffsetY = null;
+    _scrollableSize = null;
+    _viewportSize = null;
     // Dispose clip layer.
     _clipRRectLayer.layer = null;
     _clipRectLayer.layer = null;
@@ -107,57 +114,62 @@ mixin RenderOverflowMixin on RenderBoxModelBase {
   }
 
   void scrollXListener() {
-    assert(scrollListener != null);
-    // If scroll is happening, that element has been unmounted, prevent null usage.
-    if (scrollOffsetX != null) {
-      if (DebugFlags.debugLogScrollableEnabled) {
-        final double maxX = math.max(
-            0.0, (_scrollableSize?.width ?? 0) - (_viewportSize?.width ?? 0));
-        renderingLogger.finer(
-            '[Overflow-Scroll] <${renderStyle.target.tagName.toLowerCase()}> X pixels='
-            '${scrollOffsetX!.pixels.toStringAsFixed(2)} max=${maxX.toStringAsFixed(2)}');
-      }
-      final AxisDirection dir = (renderStyle.direction == TextDirection.rtl)
-          ? AxisDirection.left
-          : AxisDirection.right;
-      scrollListener!(scrollOffsetX!.pixels, dir);
-      if (DebugFlags.debugLogSemanticsEnabled ||
-          DebugFlags.debugLogScrollableEnabled) {
-        debugPrint('[webf][a11y][scroll] ${renderStyle.target} '
-            'scrollX=${scrollOffsetX!.pixels.toStringAsFixed(2)} '
-            'viewport=${_viewportSize?.width.toStringAsFixed(1) ?? '?'} '
-            'content=${_scrollableSize?.width.toStringAsFixed(1) ?? '?'} '
-            '→ markNeedsSemanticsUpdate');
-      }
-      // Keep semantics tree in sync with new scroll offset so accessibility
-      // focus/geometry follows the visible content after programmatic scrolls.
-      markNeedsSemanticsUpdate();
-      markNeedsPaint();
+    final ScrollListener? listener = scrollListener;
+    final ViewportOffset? offset = scrollOffsetX;
+    // If scroll is happening while the render object is being torn down, ignore
+    // late notifications from the ScrollPosition/ViewportOffset.
+    if (listener == null || offset == null) {
+      return;
+    }
+    if (DebugFlags.debugLogScrollableEnabled) {
+      final double maxX = math.max(
+          0.0, (_scrollableSize?.width ?? 0) - (_viewportSize?.width ?? 0));
+      renderingLogger.finer(
+          '[Overflow-Scroll] <${renderStyle.target.tagName.toLowerCase()}> X pixels='
+          '${offset.pixels.toStringAsFixed(2)} max=${maxX.toStringAsFixed(2)}');
     }
+    final AxisDirection dir = (renderStyle.direction == TextDirection.rtl)
+        ? AxisDirection.left
+        : AxisDirection.right;
+    listener(offset.pixels, dir);
+    if (DebugFlags.debugLogSemanticsEnabled ||
+        DebugFlags.debugLogScrollableEnabled) {
+      debugPrint('[webf][a11y][scroll] ${renderStyle.target} '
+          'scrollX=${offset.pixels.toStringAsFixed(2)} '
+          'viewport=${_viewportSize?.width.toStringAsFixed(1) ?? '?'} '
+          'content=${_scrollableSize?.width.toStringAsFixed(1) ?? '?'} '
+          '→ markNeedsSemanticsUpdate');
+    }
+    // Keep semantics tree in sync with new scroll offset so accessibility
+    // focus/geometry follows the visible content after programmatic scrolls.
+    markNeedsSemanticsUpdate();
+    markNeedsPaint();
   }
 
   void scrollYListener() {
-    assert(scrollListener != null);
-    if (scrollOffsetY != null) {
-      if (DebugFlags.debugLogScrollableEnabled) {
-        final double maxY = math.max(
-            0.0, (_scrollableSize?.height ?? 0) - (_viewportSize?.height ?? 0));
-        renderingLogger.finer(
-            '[Overflow-Scroll] <${renderStyle.target.tagName.toLowerCase()}> Y pixels='
-            '${scrollOffsetY!.pixels.toStringAsFixed(2)} max=${maxY.toStringAsFixed(2)}');
-      }
-      scrollListener!(scrollOffsetY!.pixels, AxisDirection.down);
-      if (DebugFlags.debugLogSemanticsEnabled ||
-          DebugFlags.debugLogScrollableEnabled) {
-        debugPrint('[webf][a11y][scroll] ${renderStyle.target} '
-            'scrollY=${scrollOffsetY!.pixels.toStringAsFixed(2)} '
-            'viewport=${_viewportSize?.height.toStringAsFixed(1) ?? '?'} '
-            'content=${_scrollableSize?.height.toStringAsFixed(1) ?? '?'} '
-            '→ markNeedsSemanticsUpdate');
-      }
-      markNeedsSemanticsUpdate();
-      markNeedsPaint();
+    final ScrollListener? listener = scrollListener;
+    final ViewportOffset? offset = scrollOffsetY;
+    if (listener == null || offset == null) {
+      return;
+    }
+    if (DebugFlags.debugLogScrollableEnabled) {
+      final double maxY = math.max(
+          0.0, (_scrollableSize?.height ?? 0) - (_viewportSize?.height ?? 0));
+      renderingLogger.finer(
+          '[Overflow-Scroll] <${renderStyle.target.tagName.toLowerCase()}> Y pixels='
+          '${offset.pixels.toStringAsFixed(2)} max=${maxY.toStringAsFixed(2)}');
+    }
+    listener(offset.pixels, AxisDirection.down);
+    if (DebugFlags.debugLogSemanticsEnabled ||
+        DebugFlags.debugLogScrollableEnabled) {
+      debugPrint('[webf][a11y][scroll] ${renderStyle.target} '
+          'scrollY=${offset.pixels.toStringAsFixed(2)} '
+          'viewport=${_viewportSize?.height.toStringAsFixed(1) ?? '?'} '
+          'content=${_scrollableSize?.height.toStringAsFixed(1) ?? '?'} '
+          '→ markNeedsSemanticsUpdate');
     }
+    markNeedsSemanticsUpdate();
+    markNeedsPaint();
   }
 
   void _setUpScrollX() {
diff --git a/webf/test/src/bridge/native_value_enum_test.dart b/webf/test/src/bridge/native_value_enum_test.dart
new file mode 100644
index 0000000000..a945b0be62
--- /dev/null
+++ b/webf/test/src/bridge/native_value_enum_test.dart
@@ -0,0 +1,70 @@
+import 'dart:convert';
+import 'dart:ffi';
+
+import 'package:ffi/ffi.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:webf/bridge.dart';
+
+import '../../setup.dart';
+
+enum _BridgeEnum {
+  horizontal('horizontal'),
+  vertical('vertical');
+
+  final String value;
+  const _BridgeEnum(this.value);
+
+  @override
+  String toString() => value;
+}
+
+enum _PlainEnum { foo, bar }
+
+void main() {
+  setUpAll(() {
+    setupTest();
+  });
+
+  test('toNativeValue encodes Enum as JS string', () {
+    final Pointer<NativeValue> out = malloc.allocate(sizeOf<NativeValue>());
+    try {
+      toNativeValue(out, _BridgeEnum.horizontal);
+      expect(JSValueType.values[out.ref.tag], JSValueType.tagString);
+
+      final nativeString = Pointer<NativeString>.fromAddress(out.ref.u);
+      expect(nativeStringToString(nativeString), 'horizontal');
+      freeNativeString(nativeString);
+    } finally {
+      malloc.free(out);
+    }
+  });
+
+  test('toNativeValue encodes default Enum as JS string name', () {
+    final Pointer<NativeValue> out = malloc.allocate(sizeOf<NativeValue>());
+    try {
+      toNativeValue(out, _PlainEnum.foo);
+      expect(JSValueType.values[out.ref.tag], JSValueType.tagString);
+
+      final nativeString = Pointer<NativeString>.fromAddress(out.ref.u);
+      expect(nativeStringToString(nativeString), 'foo');
+      freeNativeString(nativeString);
+    } finally {
+      malloc.free(out);
+    }
+  });
+
+  test('toNativeValue encodes nested Enum values inside JSON', () {
+    final Pointer<NativeValue> out = malloc.allocate(sizeOf<NativeValue>());
+    try {
+      toNativeValue(out, {'dir': _BridgeEnum.vertical, 'plain': _PlainEnum.bar});
+      expect(JSValueType.values[out.ref.tag], JSValueType.tagJson);
+
+      final Pointer<Utf8> jsonPtr = Pointer<Utf8>.fromAddress(out.ref.u);
+      final String jsonStr = jsonPtr.toDartString();
+      expect(jsonDecode(jsonStr), {'dir': 'vertical', 'plain': 'bar'});
+      malloc.free(jsonPtr);
+    } finally {
+      malloc.free(out);
+    }
+  });
+}
diff --git a/webf/test/src/rendering/css_overflow_test.dart b/webf/test/src/rendering/css_overflow_test.dart
index 22534bdbe0..a5acd7b661 100644
--- a/webf/test/src/rendering/css_overflow_test.dart
+++ b/webf/test/src/rendering/css_overflow_test.dart
@@ -236,6 +236,47 @@ void main() {
       expect(scrollable.scrollHeight, greaterThanOrEqualTo(200.0));
     });
 
+    testWidgets('disposing during animated scroll does not assert', (WidgetTester tester) async {
+      final prepared = await WebFWidgetTestUtils.prepareWidgetTest(
+        tester: tester,
+        controllerName: 'overflow-scroll-dispose-animation-${DateTime.now().millisecondsSinceEpoch}',
+        html: '''
+          <html>
+            <body style="margin: 0; padding: 0;">
+              <div id="scrollable" style="
+                overflow: scroll;
+                width: 200px;
+                height: 200px;
+                background-color: #eee;
+              ">
+                <div style="
+                  width: 200px;
+                  height: 2000px;
+                  background-color: green;
+                ">Scrollable content</div>
+              </div>
+            </body>
+          </html>
+        ''',
+      );
+
+      await tester.runAsync(() async {
+        await prepared.controller.view.evaluateJavaScripts(r'''
+          const s = document.getElementById('scrollable');
+          // Start an animated scroll, then remove the element while the
+          // ScrollPosition is still dispatching notifications.
+          s.scrollTo(0, 1500, true);
+          s.parentNode.removeChild(s);
+        ''');
+      });
+
+      // Let the (now orphaned) scroll position tick for a bit.
+      await tester.pump();
+      await tester.pump(const Duration(milliseconds: 350));
+
+      expect(tester.takeException(), isNull);
+    });
+
     testWidgets('with overflow-x and overflow-y', (WidgetTester tester) async {
       final prepared = await WebFWidgetTestUtils.prepareWidgetTest(
         tester: tester,