buninu-browser 0.1.0 → 0.2.1

package/lib/renderer/bindings.js

@@ -22,8 +22,17 @@ const REFLECTED_PROPERTIES = [
 export class BindingRealm {
   #wrappers = new WeakMap();
   #listeners = new WeakMap();
+  #events = new WeakMap();
+  #liveViews = new WeakMap();
   #hooks;
   #window;
+  eventPrototype = null;
+  elementPrototype = null;
+  fragmentPrototype = null;
+  shadowRootPrototype = null;
+  textPrototype = null;
+  characterDataPrototype = null;
+  nodePrototype = null;
 
   /**
    * @param {object} window the Happy DOM window of the document
@@ -57,21 +66,86 @@ export class BindingRealm {
     if (!wrapper) {
       const Binding = node.nodeType === 1 ? ElementBinding
         : node.nodeType === 9 ? DocumentBinding
-          : node.nodeType === 11 ? FragmentBinding
+          : node.nodeType === 11 ? (node instanceof this.#window.ShadowRoot ? ShadowRootBinding : FragmentBinding)
             : node.nodeType === 3 ? TextBinding
-              : NodeBinding;
+              : node.nodeType === 8 ? CharacterDataBinding
+                : NodeBinding;
       wrapper = new Binding(CONSTRUCT, node, this);
+      if (Binding === ElementBinding && this.elementPrototype) Object.setPrototypeOf(wrapper, this.elementPrototype);
+      if (Binding === FragmentBinding && this.fragmentPrototype) Object.setPrototypeOf(wrapper, this.fragmentPrototype);
+      if (Binding === ShadowRootBinding && this.shadowRootPrototype) Object.setPrototypeOf(wrapper, this.shadowRootPrototype);
+      if (Binding === TextBinding && this.textPrototype) Object.setPrototypeOf(wrapper, this.textPrototype);
+      if (Binding === CharacterDataBinding && this.characterDataPrototype) Object.setPrototypeOf(wrapper, this.characterDataPrototype);
+      if (Binding === NodeBinding && this.nodePrototype) Object.setPrototypeOf(wrapper, this.nodePrototype);
       this.#wrappers.set(node, wrapper);
     }
     return wrapper;
   }
 
+  /**
+   * A live NodeList/HTMLCollection over a Happy DOM collection (DOM §4.2.10):
+   * length and indices read through on every access, so a loop that moves
+   * nodes out (`while (list.length) fragment.appendChild(list[0])`) ends as
+   * it does in browsers. It is an Array proxy so array-style use keeps
+   * working; one view per collection keeps `el.childNodes === el.childNodes`.
+   */
+  live(collection) {
+    if (!collection) return null;
+    let view = this.#liveViews.get(collection);
+    if (view) return view;
+    const realm = this;
+    const at = (index) => index < collection.length ? realm.wrap(collection[index] ?? collection.item?.(index)) : undefined;
+    const isIndex = (property) => typeof property === "string" && /^(?:0|[1-9]\d*)$/.test(property);
+    const methods = {
+      item: (index) => at(Number(index) >>> 0) ?? null,
+      namedItem: (name) => {
+        const key = String(name);
+        for (let index = 0; index < collection.length; index++) {
+          const node = collection[index];
+          if (node?.getAttribute?.("id") === key || node?.getAttribute?.("name") === key) return realm.wrap(node);
+        }
+        return null;
+      },
+    };
+    view = new Proxy([], {
+      get(target, property, receiver) {
+        if (property === "length") return collection.length;
+        if (isIndex(property)) return at(Number(property));
+        if (Object.hasOwn(methods, property)) return methods[property];
+        return Reflect.get(target, property, receiver);
+      },
+      has: (target, property) => property === "length" || Object.hasOwn(methods, property)
+        || (isIndex(property) ? Number(property) < collection.length : Reflect.has(target, property)),
+      getOwnPropertyDescriptor(target, property) {
+        if (property === "length") return { value: collection.length, writable: true, enumerable: false, configurable: false };
+        if (isIndex(property) && Number(property) < collection.length) {
+          return { value: at(Number(property)), writable: false, enumerable: true, configurable: true };
+        }
+        return undefined;
+      },
+      ownKeys: () => [...Array.from({ length: collection.length }, (_, index) => String(index)), "length"],
+      set: () => false,
+      defineProperty: () => false,
+      deleteProperty: () => false,
+    });
+    this.#liveViews.set(collection, view);
+    return view;
+  }
+
   wrapAll(nodes) {
     return Array.from(nodes ?? [], (node) => this.wrap(node));
   }
 
-  wrapEvent(event) {
-    return event ? new EventBinding(CONSTRUCT, event, this) : null;
+  /** One wrapper per event, so listeners see the dispatched object (and its detail). */
+  wrapEvent(event, detail = undefined) {
+    if (!event) return null;
+    let wrapper = this.#events.get(event);
+    if (!wrapper) {
+      wrapper = new EventBinding(CONSTRUCT, event, this, detail);
+      if (this.eventPrototype) Object.setPrototypeOf(wrapper, this.eventPrototype);
+      this.#events.set(event, wrapper);
+    }
+    return wrapper;
   }
 
   /** Host listener registered on the real target for a page listener. */
@@ -90,6 +164,19 @@ export function nodeOf(value) {
   return NodeBinding.unwrap(value);
 }
 
+/** Writable page-local facade over a frozen engine binding prototype. */
+export function mutableBindingPrototype(base, parent = base) {
+  const prototype = Object.create(parent);
+  for (const key of Reflect.ownKeys(base)) {
+    if (key === "constructor") continue;
+    const descriptor = Object.getOwnPropertyDescriptor(base, key);
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(prototype, key, descriptor);
+  }
+  return prototype;
+}
+
 function realmOf(wrapper) {
   return NodeBinding.realmOf(wrapper);
 }
@@ -101,8 +188,9 @@ function toNode(wrapper, value) {
   return realmOf(wrapper).window.document.createTextNode(String(value));
 }
 
-function touch(wrapper) {
-  realmOf(wrapper).hooks.touch();
+/** The page changed `wrapper`'s node (state the style engine may read: attributes, checked, value). */
+function touch(wrapper, stateFeatures = []) {
+  realmOf(wrapper).hooks.touch(NodeBinding.unwrap(wrapper), stateFeatures);
 }
 
 /**
@@ -111,7 +199,7 @@ function touch(wrapper) {
  */
 function inserted(wrapper, nodes) {
   const realm = realmOf(wrapper);
-  realm.hooks.touch();
+  realm.hooks.touch(NodeBinding.unwrap(wrapper));
   realm.hooks.inserted?.(nodes);
 }
 
@@ -190,7 +278,7 @@ class NodeBinding {
   }
 
   get childNodes() {
-    return this.#realm.wrapAll(this.#node.childNodes);
+    return this.#realm.live(this.#node.childNodes);
   }
 
   get firstChild() {
@@ -271,9 +359,7 @@ class NodeBinding {
   dispatchEvent(event) {
     const real = EventBinding.unwrap(event);
     if (!real) throw new TypeError("dispatchEvent requires an Event");
-    const result = this.#node.dispatchEvent(real);
-    touch(this);
-    return result;
+    return this.#node.dispatchEvent(real);
   }
 }
 
@@ -283,7 +369,8 @@ function requireNode(value) {
   return node;
 }
 
-class TextBinding extends NodeBinding {
+/** Text and comments; frameworks read comment data (React's hydration markers). */
+class CharacterDataBinding extends NodeBinding {
   get data() {
     return nodeOf(this).data;
   }
@@ -298,10 +385,12 @@ class TextBinding extends NodeBinding {
   }
 }
 
+class TextBinding extends CharacterDataBinding {}
+
 /** Methods shared by elements, documents and fragments (ParentNode). */
 class ParentBinding extends NodeBinding {
   get children() {
-    return realmOf(this).wrapAll(nodeOf(this).children);
+    return realmOf(this).live(nodeOf(this).children);
   }
 
   get firstElementChild() {
@@ -325,11 +414,11 @@ class ParentBinding extends NodeBinding {
   }
 
   getElementsByTagName(name) {
-    return realmOf(this).wrapAll(nodeOf(this).getElementsByTagName(String(name)));
+    return realmOf(this).live(nodeOf(this).getElementsByTagName(String(name)));
   }
 
   getElementsByClassName(names) {
-    return realmOf(this).wrapAll(nodeOf(this).getElementsByClassName(String(names)));
+    return realmOf(this).live(nodeOf(this).getElementsByClassName(String(names)));
   }
 
   append(...values) {
@@ -360,6 +449,29 @@ class FragmentBinding extends ParentBinding {
   }
 }
 
+/**
+ * Shadow roots work for scripts (custom elements build into them), but the
+ * renderer does not draw shadow trees yet: the host's light DOM is shown.
+ */
+class ShadowRootBinding extends FragmentBinding {
+  get host() {
+    return realmOf(this).wrap(nodeOf(this).host);
+  }
+
+  get mode() {
+    return nodeOf(this).mode;
+  }
+
+  get innerHTML() {
+    return nodeOf(this).innerHTML;
+  }
+
+  set innerHTML(value) {
+    nodeOf(this).innerHTML = String(value);
+    touch(this);
+  }
+}
+
 class ElementBinding extends ParentBinding {
   #style = null;
   #classList = null;
@@ -369,29 +481,51 @@ class ElementBinding extends ParentBinding {
     return nodeOf(this).tagName;
   }
 
+  attachShadow(init) {
+    const mode = init?.mode === "closed" ? "closed" : "open";
+    return realmOf(this).wrap(nodeOf(this).attachShadow({ mode }));
+  }
+
+  get shadowRoot() {
+    return realmOf(this).wrap(nodeOf(this).shadowRoot);
+  }
+
   get content() {
     const content = nodeOf(this).content;
     return content === undefined ? undefined : realmOf(this).wrap(content);
   }
 
+  // HTMLMediaElement (video and audio): the subset the renderer plays.
   get paused() {
-    return this.tagName === "VIDEO" ? realmOf(this).hooks.videoState?.(nodeOf(this)).paused : undefined;
+    return isMedia(this) ? realmOf(this).hooks.mediaState?.(nodeOf(this)).paused ?? true : undefined;
+  }
+
+  get ended() {
+    return isMedia(this) ? realmOf(this).hooks.mediaState?.(nodeOf(this)).ended ?? false : undefined;
   }
 
   get currentTime() {
-    return this.tagName === "VIDEO" ? realmOf(this).hooks.videoState?.(nodeOf(this)).currentTime : undefined;
+    return isMedia(this) ? realmOf(this).hooks.mediaState?.(nodeOf(this)).currentTime ?? 0 : undefined;
+  }
+
+  set currentTime(value) {
+    if (!isMedia(this)) return;
+    const seconds = Number(value);
+    if (!Number.isFinite(seconds)) throw new TypeError("The provided double value is non-finite.");
+    void realmOf(this).hooks.seekMedia?.(nodeOf(this), seconds);
   }
 
   get duration() {
-    return this.tagName === "VIDEO" ? realmOf(this).hooks.videoState?.(nodeOf(this)).duration : undefined;
+    return isMedia(this) ? realmOf(this).hooks.mediaState?.(nodeOf(this)).duration ?? NaN : undefined;
   }
 
   play() {
-    if (this.tagName === "VIDEO") return realmOf(this).hooks.playVideo?.(nodeOf(this));
+    if (!isMedia(this)) return undefined;
+    return Promise.resolve(realmOf(this).hooks.playMedia?.(nodeOf(this))).then(() => undefined);
   }
 
   pause() {
-    if (this.tagName === "VIDEO") realmOf(this).hooks.pauseVideo?.(nodeOf(this));
+    if (isMedia(this)) realmOf(this).hooks.pauseMedia?.(nodeOf(this));
   }
 
   get localName() {
@@ -403,8 +537,12 @@ class ElementBinding extends ParentBinding {
   }
 
   set id(value) {
-    nodeOf(this).id = String(value);
-    touch(this);
+    const node = nodeOf(this);
+    const next = String(value);
+    if (node.id !== next) {
+      node.id = next;
+      touch(this);
+    }
   }
 
   get className() {
@@ -412,8 +550,12 @@ class ElementBinding extends ParentBinding {
   }
 
   set className(value) {
-    nodeOf(this).className = String(value);
-    touch(this);
+    const node = nodeOf(this);
+    const next = String(value);
+    if (node.className !== next) {
+      node.className = next;
+      touch(this);
+    }
   }
 
   get classList() {
@@ -435,14 +577,46 @@ class ElementBinding extends ParentBinding {
     return nodeOf(this).getAttribute(String(name));
   }
 
+  getAttributeNode(name) {
+    const element = nodeOf(this);
+    const attribute = element.getAttributeNode(String(name));
+    if (!attribute) return null;
+    const ownerElement = this;
+    return {
+      get name() { return attribute.name; },
+      get localName() { return attribute.localName; },
+      get namespaceURI() { return attribute.namespaceURI; },
+      get prefix() { return attribute.prefix; },
+      get value() { return attribute.value; },
+      set value(value) { attribute.value = String(value); touch(ownerElement); },
+      get nodeName() { return attribute.name; },
+      get nodeValue() { return attribute.value; },
+      set nodeValue(value) { attribute.value = String(value ?? ""); touch(ownerElement); },
+      get textContent() { return attribute.value; },
+      set textContent(value) { attribute.value = String(value ?? ""); touch(ownerElement); },
+      ownerElement,
+      specified: true,
+      nodeType: 2,
+    };
+  }
+
   setAttribute(name, value) {
-    nodeOf(this).setAttribute(String(name), String(value));
-    touch(this);
+    const node = nodeOf(this);
+    const attribute = String(name);
+    const next = String(value);
+    if (node.getAttribute(attribute) !== next) {
+      node.setAttribute(attribute, next);
+      touch(this);
+    }
   }
 
   removeAttribute(name) {
-    nodeOf(this).removeAttribute(String(name));
-    touch(this);
+    const node = nodeOf(this);
+    const attribute = String(name);
+    if (node.hasAttribute(attribute)) {
+      node.removeAttribute(attribute);
+      touch(this);
+    }
   }
 
   hasAttribute(name) {
@@ -543,8 +717,32 @@ class ElementBinding extends ParentBinding {
 
   click() {
     const realm = realmOf(this);
-    nodeOf(this).dispatchEvent(new realm.window.MouseEvent("click", { bubbles: true, cancelable: true }));
-    touch(this);
+    const element = nodeOf(this);
+    const event = new realm.window.MouseEvent("click", { bubbles: true, cancelable: true });
+    element.dispatchEvent(event);
+    if (!event.defaultPrevented) {
+      const anchor = element.closest?.("a[href]");
+      if (anchor) realm.hooks.activateLink?.(anchor);
+    }
+  }
+
+  submit() {
+    const form = nodeOf(this);
+    if (form.tagName === "FORM") realmOf(this).hooks.submitForm?.(form);
+  }
+
+  requestSubmit(submitter) {
+    const realm = realmOf(this);
+    const form = nodeOf(this);
+    if (form.tagName !== "FORM") return;
+    const realSubmitter = submitter == null ? null : nodeOf(submitter);
+    if (realSubmitter && realSubmitter.form !== form) throw new DOMException("Submitter is not owned by this form", "NotFoundError");
+    if (!form.checkValidity()) return;
+    const event = new realm.window.SubmitEvent("submit", {
+      bubbles: true, cancelable: true, submitter: realSubmitter ?? form,
+    });
+    form.dispatchEvent(event);
+    if (!event.defaultPrevented) realm.hooks.submitForm?.(form, realSubmitter);
   }
 
   focus() {
@@ -582,12 +780,15 @@ class ElementBinding extends ParentBinding {
     return Math.round(this.getBoundingClientRect().top + viewport().scrollY);
   }
 
+  // The root element's client size is the viewport (CSSOM View §6).
   get clientWidth() {
-    return this.offsetWidth;
+    const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
+    return root ? realmOf(this).hooks.viewport().width : this.offsetWidth;
   }
 
   get clientHeight() {
-    return this.offsetHeight;
+    const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
+    return root ? realmOf(this).hooks.viewport().height : this.offsetHeight;
   }
 
   // Tables and selects (undefined on other elements, as in browsers).
@@ -641,7 +842,7 @@ class ElementBinding extends ParentBinding {
   set selectedIndex(value) {
     if (nodeOf(this).tagName !== "SELECT") return;
     nodeOf(this).selectedIndex = Number(value);
-    touch(this);
+    touch(this, [":state"]);
   }
 
   // Overflow inside elements is not scrollable here, so the scroll size is the
@@ -664,6 +865,10 @@ class ElementBinding extends ParentBinding {
   }
 }
 
+function isMedia(wrapper) {
+  return wrapper.tagName === "VIDEO" || wrapper.tagName === "AUDIO";
+}
+
 /** on* event handler properties (element.onclick = fn, script.onload = fn). */
 export const EVENT_HANDLER_NAMES = Object.freeze([
   "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
@@ -721,6 +926,26 @@ for (const property of REFLECTED_PROPERTIES) {
       node[property] = typeof node[property] === "boolean" ? Boolean(value)
         : typeof node[property] === "number" ? Number(value)
           : String(value);
+      touch(this, [":state"]);
+    },
+  });
+}
+
+// HTMLHyperlinkElementUtils: anchors and areas expose their parsed URL, not
+// only the reflected href string. Happy DOM owns resolution against baseURI;
+// bindings forward the primitive components without exposing the host node.
+for (const property of ["origin", "protocol", "username", "password", "host", "hostname", "port", "pathname", "search", "hash"]) {
+  Object.defineProperty(ElementBinding.prototype, property, {
+    configurable: true,
+    enumerable: true,
+    get() {
+      const node = nodeOf(this);
+      return node.tagName === "A" || node.tagName === "AREA" ? String(node[property] ?? "") : undefined;
+    },
+    set(value) {
+      const node = nodeOf(this);
+      if (node.tagName !== "A" && node.tagName !== "AREA") return;
+      node[property] = String(value);
       touch(this);
     },
   });
@@ -736,7 +961,8 @@ class DocumentBinding extends ParentBinding {
   }
 
   get body() {
-    return realmOf(this).wrap(nodeOf(this).body);
+    const realm = realmOf(this);
+    return realm.wrap(realm.hooks.body ? realm.hooks.body() : nodeOf(this).body);
   }
 
   get title() {
@@ -751,6 +977,15 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).hooks.readyState?.() ?? "complete";
   }
 
+  // Page Visibility: the renderer only runs the page its client is showing.
+  get visibilityState() {
+    return "visible";
+  }
+
+  get hidden() {
+    return false;
+  }
+
   get URL() {
     return nodeOf(this).URL;
   }
@@ -759,6 +994,14 @@ class DocumentBinding extends ParentBinding {
     return nodeOf(this).URL;
   }
 
+  get location() {
+    return realmOf(this).hooks.pageGlobal?.()?.location ?? null;
+  }
+
+  get domain() {
+    return new URL(nodeOf(this).URL).hostname;
+  }
+
   get characterSet() {
     return "UTF-8";
   }
@@ -832,6 +1075,10 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).createComment(String(text)));
   }
 
+  createTreeWalker(root, whatToShow = NodeFilter.SHOW_ALL, filter = null) {
+    return new TreeWalkerBinding(CONSTRUCT, realmOf(this), requireNode(root), whatToShow, filter);
+  }
+
   createDocumentFragment() {
     return realmOf(this).wrap(nodeOf(this).createDocumentFragment());
   }
@@ -909,6 +1156,22 @@ class EventBinding {
     return this.#detail ?? null;
   }
 
+  // PopStateEvent and HashChangeEvent fields; the engine only fires popstate
+  // with a null state, so no engine object reaches the page.
+  get state() {
+    if (!("state" in this.#event)) return undefined;
+    const state = this.#event.state;
+    return state !== null && typeof state === "object" ? null : state ?? null;
+  }
+
+  get oldURL() {
+    return typeof this.#event.oldURL === "string" ? this.#event.oldURL : undefined;
+  }
+
+  get newURL() {
+    return typeof this.#event.newURL === "string" ? this.#event.newURL : undefined;
+  }
+
   get key() {
     return this.#event.key;
   }
@@ -1002,6 +1265,159 @@ class EventBinding {
   }
 }
 
+export const NodeFilter = Object.freeze({
+  FILTER_ACCEPT: 1, FILTER_REJECT: 2, FILTER_SKIP: 3,
+  SHOW_ALL: 0xffffffff, SHOW_ELEMENT: 0x1, SHOW_ATTRIBUTE: 0x2, SHOW_TEXT: 0x4, SHOW_CDATA_SECTION: 0x8,
+  SHOW_PROCESSING_INSTRUCTION: 0x40, SHOW_COMMENT: 0x80, SHOW_DOCUMENT: 0x100, SHOW_DOCUMENT_TYPE: 0x200,
+  SHOW_DOCUMENT_FRAGMENT: 0x400,
+});
+const { FILTER_ACCEPT, FILTER_REJECT, FILTER_SKIP } = NodeFilter;
+
+/**
+ * DOM §6.2 TreeWalker over the real nodes. The page's filter (a function or
+ * an object with acceptNode) sees node wrappers, and its exceptions reach the
+ * caller as the spec says.
+ */
+class TreeWalkerBinding {
+  #realm;
+  #root;
+  #current;
+  #whatToShow;
+  #filter;
+
+  constructor(key, realm, root, whatToShow, filter) {
+    if (key !== CONSTRUCT) throw new TypeError("Illegal constructor");
+    this.#realm = realm;
+    this.#root = root;
+    this.#current = root;
+    this.#whatToShow = Number(whatToShow) >>> 0;
+    this.#filter = filter ?? null;
+  }
+
+  get root() { return this.#realm.wrap(this.#root); }
+  get whatToShow() { return this.#whatToShow; }
+  get filter() { return this.#filter; }
+  get currentNode() { return this.#realm.wrap(this.#current); }
+  set currentNode(value) { this.#current = requireNode(value); }
+
+  #accept(node) {
+    if (!(this.#whatToShow & (1 << (node.nodeType - 1)))) return FILTER_SKIP;
+    const filter = this.#filter;
+    if (filter === null) return FILTER_ACCEPT;
+    const wrapper = this.#realm.wrap(node);
+    const result = typeof filter === "function"
+      ? Reflect.apply(filter, undefined, [wrapper])
+      : Reflect.apply(filter.acceptNode, filter, [wrapper]);
+    return Number(result);
+  }
+
+  #move(node) {
+    this.#current = node;
+    return this.#realm.wrap(node);
+  }
+
+  parentNode() {
+    let node = this.#current;
+    while (node && node !== this.#root) {
+      node = node.parentNode;
+      if (node && this.#accept(node) === FILTER_ACCEPT) return this.#move(node);
+    }
+    return null;
+  }
+
+  firstChild() { return this.#children(true); }
+  lastChild() { return this.#children(false); }
+  nextSibling() { return this.#siblings(true); }
+  previousSibling() { return this.#siblings(false); }
+
+  #children(first) {
+    let node = first ? this.#current.firstChild : this.#current.lastChild;
+    while (node) {
+      const result = this.#accept(node);
+      if (result === FILTER_ACCEPT) return this.#move(node);
+      if (result === FILTER_SKIP) {
+        const child = first ? node.firstChild : node.lastChild;
+        if (child) {
+          node = child;
+          continue;
+        }
+      }
+      while (node) {
+        const sibling = first ? node.nextSibling : node.previousSibling;
+        if (sibling) {
+          node = sibling;
+          break;
+        }
+        const parent = node.parentNode;
+        if (!parent || parent === this.#root || parent === this.#current) return null;
+        node = parent;
+      }
+    }
+    return null;
+  }
+
+  #siblings(next) {
+    let node = this.#current;
+    if (node === this.#root) return null;
+    for (;;) {
+      let sibling = next ? node.nextSibling : node.previousSibling;
+      while (sibling) {
+        node = sibling;
+        const result = this.#accept(node);
+        if (result === FILTER_ACCEPT) return this.#move(node);
+        sibling = next ? node.firstChild : node.lastChild;
+        if (result === FILTER_REJECT || !sibling) sibling = next ? node.nextSibling : node.previousSibling;
+      }
+      node = node.parentNode;
+      if (!node || node === this.#root) return null;
+      if (this.#accept(node) === FILTER_ACCEPT) return null;
+    }
+  }
+
+  previousNode() {
+    let node = this.#current;
+    while (node !== this.#root) {
+      let sibling = node.previousSibling;
+      while (sibling) {
+        node = sibling;
+        let result = this.#accept(node);
+        while (result !== FILTER_REJECT && node.lastChild) {
+          node = node.lastChild;
+          result = this.#accept(node);
+        }
+        if (result === FILTER_ACCEPT) return this.#move(node);
+        sibling = node.previousSibling;
+      }
+      if (node === this.#root || !node.parentNode) return null;
+      node = node.parentNode;
+      if (this.#accept(node) === FILTER_ACCEPT) return this.#move(node);
+    }
+    return null;
+  }
+
+  nextNode() {
+    let node = this.#current;
+    let result = FILTER_ACCEPT;
+    for (;;) {
+      while (result !== FILTER_REJECT && node.firstChild) {
+        node = node.firstChild;
+        result = this.#accept(node);
+        if (result === FILTER_ACCEPT) return this.#move(node);
+      }
+      let sibling = null;
+      for (let temporary = node; temporary; temporary = temporary.parentNode) {
+        if (temporary === this.#root) return null;
+        sibling = temporary.nextSibling;
+        if (sibling) break;
+      }
+      if (!sibling) return null;
+      node = sibling;
+      result = this.#accept(node);
+      if (result === FILTER_ACCEPT) return this.#move(node);
+    }
+  }
+}
+
 class ClassListBinding {
   #node;
   #realm;
@@ -1029,30 +1445,35 @@ class ClassListBinding {
   }
 
   add(...tokens) {
+    const before = this.#node.className;
     this.#node.classList.add(...tokens.map(String));
-    this.#realm.hooks.touch();
+    if (this.#node.className !== before) this.#realm.hooks.touch(this.#node);
   }
 
   remove(...tokens) {
+    const before = this.#node.className;
     this.#node.classList.remove(...tokens.map(String));
-    this.#realm.hooks.touch();
+    if (this.#node.className !== before) this.#realm.hooks.touch(this.#node);
   }
 
   toggle(token, force) {
     const result = this.#node.classList.toggle(String(token), force === undefined ? undefined : Boolean(force));
-    this.#realm.hooks.touch();
+    this.#realm.hooks.touch(this.#node);
     return result;
   }
 
   replace(oldToken, newToken) {
     const result = this.#node.classList.replace(String(oldToken), String(newToken));
-    this.#realm.hooks.touch();
+    this.#realm.hooks.touch(this.#node);
     return result;
   }
 
   set value(value) {
-    this.#node.className = String(value);
-    this.#realm.hooks.touch();
+    const next = String(value);
+    if (this.#node.className !== next) {
+      this.#node.className = next;
+      this.#realm.hooks.touch(this.#node);
+    }
   }
 
   forEach(callback, thisArg) {
@@ -1081,6 +1502,20 @@ class ClassListBinding {
   }
 }
 
+/**
+ * Properties Happy DOM stores but the renderer does not implement. `in` says
+ * no for them, so feature detection (`"anchorName" in el.style`) takes the
+ * page's fallback path instead of relying on layout that never happens.
+ */
+const UNRENDERED_STYLE_PROPERTIES = new Set([
+  // CSS Anchor Positioning
+  "anchorName", "anchorScope", "positionAnchor", "positionArea", "insetArea", "positionTry",
+  "positionTryFallbacks", "positionTryOrder", "positionVisibility",
+  // Scroll-driven animations
+  "animationTimeline", "scrollTimeline", "scrollTimelineAxis", "scrollTimelineName", "viewTimeline",
+  "viewTimelineAxis", "viewTimelineInset", "viewTimelineName",
+]);
+
 /**
  * element.style: a proxy that reads and writes the real declaration block
  * with string values only. Mutations go to the style attribute, which the
@@ -1093,12 +1528,13 @@ function styleBinding(node, realm) {
   const methods = {
     getPropertyValue: (property) => style.getPropertyValue(String(property)),
     setProperty: (property, value, priority = "") => {
+      const before = style.cssText;
       style.setProperty(String(property), value === null ? "" : String(value), String(priority));
-      realm.hooks.touch();
+      if (style.cssText !== before) realm.hooks.touch(node);
     },
     removeProperty: (property) => {
       const previous = style.removeProperty(String(property));
-      realm.hooks.touch();
+      realm.hooks.touch(node);
       return previous;
     },
   };
@@ -1112,12 +1548,18 @@ function styleBinding(node, realm) {
     },
     set(_target, property, value) {
       if (typeof property !== "string") return false;
+      const before = style.cssText;
       if (property === "cssText") style.cssText = String(value);
       else style.setProperty(toKebab(property), value === null ? "" : String(value));
-      realm.hooks.touch();
+      if (style.cssText !== before) realm.hooks.touch(node);
       return true;
     },
-    has: (_target, property) => typeof property === "string",
+    has: (_target, property) => {
+      if (typeof property !== "string") return false;
+      const camel = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      return Object.hasOwn(methods, property) || property === "cssText" || property === "length"
+        || (property in style && !UNRENDERED_STYLE_PROPERTIES.has(camel));
+    },
     defineProperty: () => false,
     deleteProperty: () => false,
     getPrototypeOf: () => null,
@@ -1136,14 +1578,14 @@ function datasetBinding(node, realm) {
     set(_target, property, value) {
       if (typeof property !== "string") return false;
       node.setAttribute(attribute(property), String(value));
-      realm.hooks.touch();
+      realm.hooks.touch(node);
       return true;
     },
     has: (_target, property) => typeof property === "string" && node.hasAttribute(attribute(property)),
     deleteProperty(_target, property) {
       if (typeof property !== "string") return false;
       node.removeAttribute(attribute(property));
-      realm.hooks.touch();
+      realm.hooks.touch(node);
       return true;
     },
     ownKeys: () => node.getAttributeNames()
@@ -1203,6 +1645,49 @@ export function windowEventMethods(realm, pageGlobal) {
   };
 }
 
+/**
+ * Page-constructible EventTarget (`new EventTarget()` and subclasses). Each
+ * instance is backed by its own Happy DOM EventTarget; `targetOf` maps that
+ * back to the page object for event.target and the listener's `this`.
+ */
+export function eventTargetConstructor(realm, isTarget) {
+  const backing = new WeakMap();
+  const owners = new WeakMap();
+  const realOf = (self) => {
+    const real = backing.get(self);
+    if (!real) throw new TypeError("Illegal invocation");
+    return real;
+  };
+  function EventTarget() {
+    if (!new.target) throw new TypeError("Constructor EventTarget requires 'new'");
+    const self = Object.create(new.target.prototype);
+    const real = new realm.window.EventTarget();
+    backing.set(self, real);
+    owners.set(real, self);
+    return self;
+  }
+  EventTarget.prototype = {
+    constructor: EventTarget,
+    addEventListener(type, listener, options) {
+      addListener(realm, realOf(this), type, listener, options);
+    },
+    removeEventListener(type, listener, options) {
+      removeListener(realm, realOf(this), type, listener, options);
+    },
+    dispatchEvent(event) {
+      const real = EventBinding.unwrap(event);
+      if (!real) throw new TypeError("dispatchEvent requires an Event");
+      return realOf(this).dispatchEvent(real);
+    },
+  };
+  // Nodes and the window are event targets too, though not built from this constructor.
+  Object.defineProperty(EventTarget, Symbol.hasInstance, {
+    value: (value) => backing.has(value) || isTarget(value)
+      || Function.prototype[Symbol.hasInstance].call(EventTarget, value),
+  });
+  return { EventTarget, targetOf: (real) => owners.get(real) ?? null };
+}
+
 const UI_EVENT_TYPES = ["UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
 const UI_EVENT_FIELDS = [
   ...["detail", "clientX", "clientY", "screenX", "screenY", "button", "buttons", "deltaX", "deltaY", "deltaZ", "deltaMode",
@@ -1221,15 +1706,16 @@ export function eventConstructors(realm) {
   });
   function Event(type, options = undefined) {
     if (!new.target) throw new TypeError("Constructor Event requires 'new'");
-    return new EventBinding(CONSTRUCT, new window.Event(String(type), init(options)), realm);
+    return realm.wrapEvent(new window.Event(String(type), init(options)));
   }
   function CustomEvent(type, options = undefined) {
     if (!new.target) throw new TypeError("Constructor CustomEvent requires 'new'");
     // detail stays in the binding: page values never enter Happy DOM.
-    return new EventBinding(CONSTRUCT, new window.CustomEvent(String(type), init(options)), realm, options?.detail);
+    return realm.wrapEvent(new window.CustomEvent(String(type), init(options)), options?.detail);
   }
-  Event.prototype = EventBinding.prototype;
-  CustomEvent.prototype = EventBinding.prototype;
+  realm.eventPrototype = mutableBindingPrototype(EventBinding.prototype);
+  Event.prototype = realm.eventPrototype;
+  CustomEvent.prototype = realm.eventPrototype;
   // UI event subclasses: their init dictionaries are copied as primitives only
   // (view and relatedTarget are dropped).
   const uiEvents = {};
@@ -1242,10 +1728,10 @@ export function eventConstructors(realm) {
       for (const [key, coerce] of UI_EVENT_FIELDS) {
         if (options?.[key] !== undefined) fields[key] = coerce(options[key]);
       }
-      return new EventBinding(CONSTRUCT, new RealEvent(String(type), fields), realm);
+      return realm.wrapEvent(new RealEvent(String(type), fields));
     };
     Object.defineProperty(Constructor, "name", { value: name });
-    Constructor.prototype = EventBinding.prototype;
+    Constructor.prototype = realm.eventPrototype;
     uiEvents[name] = Constructor;
   }
   return { Event, CustomEvent, ...uiEvents };
@@ -1271,8 +1757,8 @@ function cssEscape(value) {
  */
 export function hardenBindings() {
   if (typeof harden !== "function") return;
-  for (const Binding of [NodeBinding, TextBinding, ParentBinding, FragmentBinding, ElementBinding,
-    DocumentBinding, EventBinding, ClassListBinding]) {
+  for (const Binding of [NodeBinding, CharacterDataBinding, TextBinding, ParentBinding, FragmentBinding, ShadowRootBinding, ElementBinding,
+    DocumentBinding, EventBinding, ClassListBinding, TreeWalkerBinding]) {
     harden(Binding);
   }
 }
@@ -1280,12 +1766,14 @@ export function hardenBindings() {
 /** Interface objects for `instanceof` checks; all throw "Illegal constructor" when called. */
 export const INTERFACES = Object.freeze({
   Node: NodeBinding,
-  CharacterData: TextBinding,
+  CharacterData: CharacterDataBinding,
   Text: TextBinding,
   Element: ElementBinding,
   HTMLElement: ElementBinding,
   Document: DocumentBinding,
   HTMLDocument: DocumentBinding,
   DocumentFragment: FragmentBinding,
+  ShadowRoot: ShadowRootBinding,
+  TreeWalker: TreeWalkerBinding,
   DOMTokenList: ClassListBinding,
 });