feat: interactive pseudo-classes for form controls

bridge/core/binding_call_methods.json5

@@ -148,6 +148,7 @@
     "required",
     "readonly",
     "placeholder",
+    "tabIndex",
     "inputMode",
     "cols",
     "rows",

bridge/core/dom/element.cc

@@ -300,6 +300,42 @@ bool Element::IsDisabledFormControl() const {
   return false;
 }
 
+bool Element::IsCheckedState() const {
+  // When Blink CSS is enabled, checked_state_ only tracks attribute mutations.
+  // For widget-backed inputs, checkedness can change from Dart-side interaction
+  // without attribute changes. Pull the current property from Dart to keep
+  // :checked matching aligned with the actual checkedness.
+  if (GetExecutingContext()->isBlinkEnabled() && IsWidgetElement()) {
+    ExceptionState exception_state;
+    NativeValue result =
+        GetBindingProperty(CheckedAttrName(), FlushUICommandReason::kDependentsOnElement, exception_state);
+    if (!exception_state.HasException()) {
+      bool checked = NativeValueConverter<NativeTypeBool>::FromNativeValue(result);
+      const_cast<Element*>(this)->checked_state_ = checked;
+      return checked;
+    }
+  }
+  return checked_state_;
+}
+
+void Element::SetCheckedStateFromDart(bool checked) {
+  if (checked_state_ == checked) {
+    return;
+  }
+  checked_state_ = checked;
+  if (!GetExecutingContext()->isBlinkEnabled()) {
+    return;
+  }
+
+  // Trigger style invalidation for :checked dependent selectors in Blink mode.
+  GetDocument().EnsureStyleEngine().SetNeedsHasPseudoStateRecalc();
+  if (Element* root = GetDocument().documentElement()) {
+    root->SetNeedsStyleRecalc(kSubtreeStyleChange,
+                              StyleChangeReasonForTracing::FromAttribute(QualifiedName(CheckedAttrName())));
+  }
+  GetDocument().UpdateStyleForThisDocument();
+}
+
 bool Element::MatchesValidityPseudoClasses() const {
   const AtomicString tag_name = localName();
   if (tag_name.IsNull()) {

bridge/core/dom/element.h

@@ -353,9 +353,9 @@ class Element : public ContainerNode {
   bool MatchesReadWritePseudoClass() const { return false; }
   bool IsOptionalFormControl() const;
   bool IsRequiredFormControl() const;
-  bool MatchesValidityPseudoClasses() const;
-  bool IsValidElement() const;
-  bool IsCheckedState() const { return checked_state_; }
+ bool MatchesValidityPseudoClasses() const;
+ bool IsValidElement() const;
+ bool IsCheckedState() const;
 
   // Additional methods for selector matching
   bool ContainsPersistentVideo() const { return false; }
@@ -375,10 +375,12 @@ class Element : public ContainerNode {
 
   // add for invalidation end
  protected:
-  void SetAttributeInternal(const AtomicString&,
-                            const AtomicString& value,
-                            AttributeModificationReason reason,
-                            ExceptionState& exception_state);
+ void SetAttributeInternal(const AtomicString&,
+                           const AtomicString& value,
+                           AttributeModificationReason reason,
+                           ExceptionState& exception_state);
+
+  void SetCheckedStateFromDart(bool checked);
 
   void DetachAllAttrNodesFromElement();
 

bridge/core/html/forms/html_input_element.cc

@@ -7,11 +7,35 @@
  * Copyright (C) 2022-present The WebF authors. All rights reserved.
  */
 #include "html_input_element.h"
+#include "bindings/qjs/cppgc/mutation_scope.h"
+#include "foundation/native_value_converter.h"
 #include "html_names.h"
 #include "qjs_html_input_element.h"
 
 namespace webf {
 
 HTMLInputElement::HTMLInputElement(Document& document) : WidgetElement(html_names::kInput, &document) {}
 
+NativeValue HTMLInputElement::HandleCallFromDartSide(const AtomicString& method,
+                                                     int32_t argc,
+                                                     const NativeValue* argv,
+                                                     Dart_Handle dart_object) {
+  if (!isContextValid(contextId())) {
+    return Native_NewNull();
+  }
+  MemberMutationScope mutation_scope{GetExecutingContext()};
+
+  static const AtomicString kSyncChecked = AtomicString::CreateFromUTF8("__syncCheckedState");
+  if (method == kSyncChecked) {
+    if (argc < 1) {
+      return Native_NewNull();
+    }
+    const bool checked = NativeValueConverter<NativeTypeBool>::FromNativeValue(argv[0]);
+    SetCheckedStateFromDart(checked);
+    return Native_NewNull();
+  }
+
+  return WidgetElement::HandleCallFromDartSide(method, argc, argv, dart_object);
+}
+
 }  // namespace webf

bridge/core/html/forms/html_input_element.h

@@ -14,10 +14,14 @@
 namespace webf {
 
 class HTMLInputElement : public WidgetElement {
-  DEFINE_WRAPPERTYPEINFO();
+ DEFINE_WRAPPERTYPEINFO();
 
  public:
   explicit HTMLInputElement(Document&);
+  NativeValue HandleCallFromDartSide(const AtomicString& method,
+                                     int32_t argc,
+                                     const NativeValue* argv,
+                                     Dart_Handle dart_object) override;
 };
 
 }  // namespace webf

bridge/core/html/html_element.d.ts

@@ -13,6 +13,11 @@ export interface HTMLElement extends Element, GlobalEventHandlers {
   readonly offsetWidth: SupportAsync<DartImpl<DependentsOnLayout<double>>>;
   readonly offsetHeight: SupportAsync<DartImpl<DependentsOnLayout<double>>>;
 
+  tabIndex: DartImpl<number>;
+
+  focus(): DartImpl<void>;
+  blur(): DartImpl<void>;
+
   click(): DartImpl<DependentsOnLayout<void>>;
 
   new(): void;

bridge/foundation/native_value_converter.h

@@ -109,7 +109,9 @@ struct NativeValueConverter<NativeTypeDouble> : public NativeValueConverterBase<
     if (value.tag == NativeTag::TAG_NULL) {
       return 0.0;
     }
-
+    if (value.tag == NativeTag::TAG_INT) {
+      return static_cast<double>(value.u.int64);
+    }
     assert(value.tag == NativeTag::TAG_FLOAT64);
     double result;
     memcpy(&result, reinterpret_cast<void*>(&value.u.int64), sizeof(double));

bridge/polyfill/src/index.ts

@@ -73,12 +73,16 @@ document.hasFocus = function () {
   return true;
 }
 
-globalThis.HTMLElement.prototype.focus = function () {
-  // No-op for now.
+if (typeof globalThis.HTMLElement.prototype.focus !== 'function') {
+  globalThis.HTMLElement.prototype.focus = function () {
+    // No-op for now.
+  }
 }
 
-globalThis.HTMLElement.prototype.blur = function () {
-  // No-op for now.
+if (typeof globalThis.HTMLElement.prototype.blur !== 'function') {
+  globalThis.HTMLElement.prototype.blur = function () {
+    // No-op for now.
+  }
 }
 
 class ShadowRoot {