buninu-browser 0.2.0 → 0.2.2

package/lib/renderer/bindings.js

@@ -23,13 +23,21 @@ export class BindingRealm {
   #wrappers = new WeakMap();
   #listeners = new WeakMap();
   #events = new WeakMap();
+  #trustedEvents = new WeakSet();
+  // MessageEvent fields (data, origin, lastEventId, source, ports) by engine
+  // event: page values stay on this side, as CustomEvent detail does.
+  #messages = new WeakMap();
   #liveViews = new WeakMap();
+  #ranges = new WeakMap();
   #hooks;
   #window;
   eventPrototype = null;
   elementPrototype = null;
+  /** @type {((node: object) => object) | null} the prototype for an element's wrapper */
+  elementPrototypeOf = null;
   fragmentPrototype = null;
   shadowRootPrototype = null;
+  rangePrototype = null;
   textPrototype = null;
   characterDataPrototype = null;
   nodePrototype = null;
@@ -71,7 +79,9 @@ export class BindingRealm {
               : node.nodeType === 8 ? CharacterDataBinding
                 : NodeBinding;
       wrapper = new Binding(CONSTRUCT, node, this);
-      if (Binding === ElementBinding && this.elementPrototype) Object.setPrototypeOf(wrapper, this.elementPrototype);
+      if (Binding === ElementBinding && this.elementPrototype) {
+        Object.setPrototypeOf(wrapper, this.elementPrototypeOf?.(node) ?? 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);
@@ -107,10 +117,15 @@ export class BindingRealm {
         return null;
       },
     };
+    // Indices and length read through; other properties a page sets are
+    // expandos kept on the target (they shadow item/namedItem, as an own
+    // property on a browser's collection does).
+    const expando = (target, property) => property !== "length" && !isIndex(property) && Object.hasOwn(target, property);
     view = new Proxy([], {
       get(target, property, receiver) {
         if (property === "length") return collection.length;
         if (isIndex(property)) return at(Number(property));
+        if (expando(target, property)) return target[property];
         if (Object.hasOwn(methods, property)) return methods[property];
         return Reflect.get(target, property, receiver);
       },
@@ -121,12 +136,23 @@ export class BindingRealm {
         if (isIndex(property) && Number(property) < collection.length) {
           return { value: at(Number(property)), writable: false, enumerable: true, configurable: true };
         }
-        return undefined;
+        return expando(target, property) ? Reflect.getOwnPropertyDescriptor(target, property) : undefined;
+      },
+      ownKeys: (target) => [...Array.from({ length: collection.length }, (_, index) => String(index)), "length",
+        ...Reflect.ownKeys(target).filter((key) => expando(target, key))],
+      set(target, property, value) {
+        if (property === "length" || isIndex(property)) return false;
+        if (expando(target, property)) {
+          const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+          if (!("value" in descriptor)) return descriptor.set ? (descriptor.set.call(view, value), true) : false;
+          if (!descriptor.writable) return false;
+        }
+        return Reflect.defineProperty(target, property, expando(target, property)
+          ? { value } : { value, writable: true, enumerable: true, configurable: true });
       },
-      ownKeys: () => [...Array.from({ length: collection.length }, (_, index) => String(index)), "length"],
-      set: () => false,
-      defineProperty: () => false,
-      deleteProperty: () => false,
+      defineProperty: (target, property, descriptor) =>
+        property !== "length" && !isIndex(property) && Reflect.defineProperty(target, property, descriptor),
+      deleteProperty: (target, property) => !isIndex(property) && property !== "length" && Reflect.deleteProperty(target, property),
     });
     this.#liveViews.set(collection, view);
     return view;
@@ -136,13 +162,59 @@ export class BindingRealm {
     return Array.from(nodes ?? [], (node) => this.wrap(node));
   }
 
+  /** A MessageEvent for the page: an engine event carrying page-side fields. */
+  messageEvent(type, { data = null, origin = "", lastEventId = "", source = null, ports = [] } = {}, init = {}) {
+    const event = new this.#window.Event(String(type), init);
+    this.#messages.set(event, Object.freeze({ data, origin: String(origin), lastEventId: String(lastEventId), source,
+      ports: Object.freeze([...ports]) }));
+    return this.wrapEvent(event);
+  }
+
+  /** The engine event behind a page event, or null. */
+  unwrapEvent(value) {
+    return EventBinding.unwrap(value);
+  }
+
+  /** Marks an event created by the browser's input path as trusted. */
+  markTrusted(value) {
+    const event = EventBinding.unwrap(value) ?? (value && typeof value === "object" ? value : null);
+    if (event) this.#trustedEvents.add(event);
+  }
+
+  isTrusted(event) {
+    return this.#trustedEvents.has(event);
+  }
+
+  /** The MessageEvent fields of an engine event, if it is one. */
+  messageOf(event) {
+    return this.#messages.get(event) ?? null;
+  }
+
+  /** The page's Range for an engine Range (one wrapper each). */
+  wrapRange(range) {
+    if (!range) return null;
+    let wrapper = this.#ranges.get(range);
+    if (!wrapper) {
+      wrapper = new RangeBinding(CONSTRUCT, range, this);
+      if (this.rangePrototype) Object.setPrototypeOf(wrapper, this.rangePrototype);
+      this.#ranges.set(range, wrapper);
+    }
+    return wrapper;
+  }
+
   /** 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);
+      if (this.eventPrototype) {
+        const prototype = this.eventPrototypes?.get(event.constructor?.name) ?? this.eventPrototype;
+        Object.setPrototypeOf(wrapper, prototype);
+        // isTrusted is [LegacyUnforgeable]: an own accessor of every event.
+        const isTrusted = Object.getOwnPropertyDescriptor(EventBinding.prototype, "isTrusted");
+        Object.defineProperty(wrapper, "isTrusted", { get: isTrusted.get, enumerable: true, configurable: false });
+      }
       this.#events.set(event, wrapper);
     }
     return wrapper;
@@ -172,8 +244,15 @@ export function mutableBindingPrototype(base, parent = base) {
     const descriptor = Object.getOwnPropertyDescriptor(base, key);
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
+    // Web IDL attributes and operations are enumerable (class members are not).
+    if (typeof key === "string") descriptor.enumerable = true;
     Object.defineProperty(prototype, key, descriptor);
   }
+  // An own, writable constructor (callers set the page's): an inherited one
+  // from a hardened class would be read-only, and then a page subclass's
+  // `Sub.prototype = Object.create(Base.prototype); Sub.prototype.constructor = Sub`
+  // fails (the override mistake).
+  Object.defineProperty(prototype, "constructor", { value: base.constructor, writable: true, configurable: true });
   return prototype;
 }
 
@@ -189,8 +268,8 @@ function toNode(wrapper, value) {
 }
 
 /** The page changed `wrapper`'s node (state the style engine may read: attributes, checked, value). */
-function touch(wrapper) {
-  realmOf(wrapper).hooks.touch(NodeBinding.unwrap(wrapper));
+function touch(wrapper, stateFeatures = []) {
+  realmOf(wrapper).hooks.touch(NodeBinding.unwrap(wrapper), stateFeatures);
 }
 
 /**
@@ -204,6 +283,23 @@ function inserted(wrapper, nodes) {
 }
 
 /** A fragment empties itself on insertion, so list its children beforehand. */
+const XML_NAMESPACE = "http://www.w3.org/XML/1998/namespace";
+const XMLNS_NAMESPACE = "http://www.w3.org/2000/xmlns/";
+
+function locateNamespace(node, prefix) {
+  if (prefix === "xml") return XML_NAMESPACE;
+  if (prefix === "xmlns") return XMLNS_NAMESPACE;
+  if (node.nodeType === 9) node = node.documentElement;
+  else if (node.nodeType !== 1) node = node.parentElement ?? node.ownerElement ?? null;
+  for (let element = node; element; element = element.parentElement) {
+    if (element.namespaceURI !== null && (element.prefix ?? null) === prefix) return element.namespaceURI;
+    const attribute = prefix === null ? element.getAttributeNS?.(XMLNS_NAMESPACE, "xmlns") ?? element.getAttribute("xmlns")
+      : element.getAttributeNS?.(XMLNS_NAMESPACE, prefix);
+    if (attribute !== null && attribute !== undefined) return attribute || null;
+  }
+  return null;
+}
+
 function insertionList(nodes) {
   return nodes.flatMap((node) => node.nodeType === 11 ? [...node.childNodes] : [node]);
 }
@@ -249,6 +345,19 @@ class NodeBinding {
     return this.#node.nodeName;
   }
 
+  /** The document base URL (HTML §2.4.1): the first <base href>, else the document's URL. */
+  get baseURI() {
+    const document = this.#node.nodeType === 9 ? this.#node : this.#node.ownerDocument;
+    const url = document?.URL ?? "about:blank";
+    const href = document?.querySelector?.("base[href]")?.getAttribute("href");
+    if (href == null) return url;
+    try {
+      return new URL(href, url).href;
+    } catch {
+      return url;
+    }
+  }
+
   get nodeValue() {
     return this.#node.nodeValue ?? null;
   }
@@ -314,6 +423,53 @@ class NodeBinding {
     return node ? this.#node.contains(node) : false;
   }
 
+  /** Where `other` is relative to this node, as DOCUMENT_POSITION_* bits (DOM §4.4). */
+  compareDocumentPosition(other) {
+    const node = nodeOf(other);
+    if (!node) throw new TypeError("Failed to execute 'compareDocumentPosition' on 'Node': parameter 1 is not of type 'Node'.");
+    return this.#node.compareDocumentPosition(node);
+  }
+
+  getRootNode(options = undefined) {
+    return this.#realm.wrap(this.#node.getRootNode({ composed: Boolean(options?.composed) }));
+  }
+
+  isSameNode(other) {
+    return other === this || (nodeOf(other) !== null && nodeOf(other) === this.#node);
+  }
+
+  isEqualNode(other) {
+    const node = nodeOf(other);
+    return node ? this.#node.isEqualNode(node) : false;
+  }
+
+  normalize() {
+    this.#node.normalize();
+    this.#realm.hooks.touch(this.#node);
+  }
+
+  // DOM §4.4 "locate a namespace" and "locate a namespace prefix".
+  lookupNamespaceURI(prefix) {
+    return locateNamespace(this.#node, prefix === null || prefix === undefined || prefix === "" ? null : String(prefix));
+  }
+
+  lookupPrefix(namespace) {
+    if (namespace === null || namespace === undefined || namespace === "") return null;
+    let element = this.#node.nodeType === 1 ? this.#node
+      : this.#node.nodeType === 9 ? this.#node.documentElement : this.#node.parentElement ?? this.#node.ownerElement ?? null;
+    for (; element; element = element.parentElement) {
+      if (element.namespaceURI === String(namespace) && element.prefix) return element.prefix;
+      for (const attribute of element.attributes ?? []) {
+        if (attribute.prefix === "xmlns" && attribute.value === String(namespace)) return attribute.localName;
+      }
+    }
+    return null;
+  }
+
+  isDefaultNamespace(namespace) {
+    return locateNamespace(this.#node, null) === (namespace === undefined || namespace === "" ? null : namespace);
+  }
+
   appendChild(child) {
     const node = requireNode(child);
     const list = insertionList([node]);
@@ -348,11 +504,11 @@ class NodeBinding {
     return this.#realm.wrap(this.#node.cloneNode(Boolean(deep)));
   }
 
-  addEventListener(type, listener, options) {
+  addEventListener(type, listener, options = undefined) {
     addListener(this, this.#node, type, listener, options);
   }
 
-  removeEventListener(type, listener, options) {
+  removeEventListener(type, listener, options = undefined) {
     removeListener(this, this.#node, type, listener, options);
   }
 
@@ -370,6 +526,18 @@ function requireNode(value) {
 }
 
 /** Text and comments; frameworks read comment data (React's hydration markers). */
+// Node constants (DOM §4.4) on instances too, and the one the class lacks.
+for (const [name, value] of Object.entries({
+  ELEMENT_NODE: 1, ATTRIBUTE_NODE: 2, TEXT_NODE: 3, CDATA_SECTION_NODE: 4, PROCESSING_INSTRUCTION_NODE: 7,
+  ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, COMMENT_NODE: 8, DOCUMENT_NODE: 9, DOCUMENT_TYPE_NODE: 10,
+  DOCUMENT_FRAGMENT_NODE: 11, NOTATION_NODE: 12,
+  DOCUMENT_POSITION_DISCONNECTED: 1, DOCUMENT_POSITION_PRECEDING: 2, DOCUMENT_POSITION_FOLLOWING: 4,
+  DOCUMENT_POSITION_CONTAINS: 8, DOCUMENT_POSITION_CONTAINED_BY: 16, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,
+})) {
+  if (!Object.hasOwn(NodeBinding, name)) Object.defineProperty(NodeBinding, name, { value, enumerable: true });
+  if (!Object.hasOwn(NodeBinding.prototype, name)) Object.defineProperty(NodeBinding.prototype, name, { value, enumerable: true });
+}
+
 class CharacterDataBinding extends NodeBinding {
   get data() {
     return nodeOf(this).data;
@@ -417,6 +585,10 @@ class ParentBinding extends NodeBinding {
     return realmOf(this).live(nodeOf(this).getElementsByTagName(String(name)));
   }
 
+  getElementsByTagNameNS(namespace, localName) {
+    return realmOf(this).live(nodeOf(this).getElementsByTagNameNS(namespace === undefined ? null : namespace, String(localName)));
+  }
+
   getElementsByClassName(names) {
     return realmOf(this).live(nodeOf(this).getElementsByClassName(String(names)));
   }
@@ -476,6 +648,7 @@ class ElementBinding extends ParentBinding {
   #style = null;
   #classList = null;
   #dataset = null;
+  #attributes = null;
 
   get tagName() {
     return nodeOf(this).tagName;
@@ -490,11 +663,39 @@ class ElementBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).shadowRoot);
   }
 
+  // HTMLIFrameElement: its document's window and, when same-origin, its
+  // document (see messaging.js).
+  get contentWindow() {
+    const node = nodeOf(this);
+    return node.tagName === "IFRAME" ? realmOf(this).hooks.contentWindow?.(node) ?? null : undefined;
+  }
+
+  get contentDocument() {
+    const node = nodeOf(this);
+    return node.tagName === "IFRAME" ? realmOf(this).hooks.contentDocument?.(node) ?? null : undefined;
+  }
+
+  // One property for two interfaces: HTMLTemplateElement.content (read-only,
+  // the template's fragment) and HTMLMetaElement.content (the reflected
+  // attribute, which scripts set). Other elements have none: an assignment
+  // stays on the wrapper as a plain property.
   get content() {
-    const content = nodeOf(this).content;
+    const node = nodeOf(this);
+    if (node.tagName === "META") return node.getAttribute("content") ?? "";
+    const content = node.content;
     return content === undefined ? undefined : realmOf(this).wrap(content);
   }
 
+  set content(value) {
+    const node = nodeOf(this);
+    if (node.tagName === "META") {
+      node.setAttribute("content", String(value));
+      touch(this);
+    } else if (node.tagName !== "TEMPLATE") {
+      Object.defineProperty(this, "content", { value, writable: true, enumerable: true, configurable: true });
+    }
+  }
+
   // HTMLMediaElement (video and audio): the subset the renderer plays.
   get paused() {
     return isMedia(this) ? realmOf(this).hooks.mediaState?.(nodeOf(this)).paused ?? true : undefined;
@@ -528,6 +729,19 @@ class ElementBinding extends ParentBinding {
     if (isMedia(this)) realmOf(this).hooks.pauseMedia?.(nodeOf(this));
   }
 
+  /** Restarts loading (HTML §4.8.11.5): playback stops and starts again from the beginning when played. */
+  load() {
+    if (!isMedia(this)) return;
+    realmOf(this).hooks.pauseMedia?.(nodeOf(this));
+    void realmOf(this).hooks.seekMedia?.(nodeOf(this), 0);
+  }
+
+  canPlayType(type) {
+    if (!isMedia(this)) return undefined;
+    // The decoder (FFmpeg) handles the common containers and codecs.
+    return /^(video|audio)\/(mp4|webm|ogg|mpeg|wav|x-wav|aac|mp3|flac)\b/i.test(String(type)) ? "maybe" : "";
+  }
+
   get localName() {
     return nodeOf(this).localName;
   }
@@ -573,10 +787,47 @@ class ElementBinding extends ParentBinding {
     return this.#dataset;
   }
 
+  get attributes() {
+    this.#attributes ??= attributesBinding(this);
+    return this.#attributes;
+  }
+
   getAttribute(name) {
     return nodeOf(this).getAttribute(String(name));
   }
 
+  getAttributeNodeNS(_namespace, localName) {
+    return this.getAttributeNode(String(localName));
+  }
+
+  // CSSOM View §6.1: false when the element or an ancestor has no box or is
+  // visibility: hidden (with the visibilityProperty option).
+  checkVisibility(options = undefined) {
+    const realm = realmOf(this);
+    const node = nodeOf(this);
+    if (!node.isConnected) return false;
+    for (let element = node; element; element = element.parentElement) {
+      if (realm.hooks.computedStyle?.(element)?.display === "none") return false;
+    }
+    if ((options?.visibilityProperty || options?.checkVisibilityCSS)
+      && realm.hooks.computedStyle?.(node)?.visibility === "hidden") return false;
+    return true;
+  }
+
+  // Web Animations: no animations run outside CSS transitions/animations.
+  getAnimations() {
+    return [];
+  }
+
+  // Pointer capture (Pointer Events §10): a pointer this element has captured.
+  hasPointerCapture(_pointerId) {
+    return false;
+  }
+
+  setPointerCapture(_pointerId) {}
+
+  releasePointerCapture(_pointerId) {}
+
   getAttributeNode(name) {
     const element = nodeOf(this);
     const attribute = element.getAttributeNode(String(name));
@@ -623,7 +874,30 @@ class ElementBinding extends ParentBinding {
     return nodeOf(this).hasAttribute(String(name));
   }
 
-  toggleAttribute(name, force) {
+  hasAttributes() {
+    return nodeOf(this).getAttributeNames().length > 0;
+  }
+
+  // Namespaced attributes (DOM §4.9): xlink:href and friends in SVG.
+  getAttributeNS(namespace, localName) {
+    return nodeOf(this).getAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(localName));
+  }
+
+  hasAttributeNS(namespace, localName) {
+    return nodeOf(this).hasAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(localName));
+  }
+
+  setAttributeNS(namespace, qualifiedName, value) {
+    nodeOf(this).setAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(qualifiedName), String(value));
+    touch(this);
+  }
+
+  removeAttributeNS(namespace, localName) {
+    nodeOf(this).removeAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(localName));
+    touch(this);
+  }
+
+  toggleAttribute(name, force = undefined) {
     const result = nodeOf(this).toggleAttribute(String(name), force === undefined ? undefined : Boolean(force));
     touch(this);
     return result;
@@ -770,28 +1044,104 @@ class ElementBinding extends ParentBinding {
     return Math.round(this.getBoundingClientRect().height);
   }
 
+  /**
+   * CSSOM View §7: the nearest ancestor that is positioned (or that
+   * contains absolutely positioned boxes, as a transformed one does), or a
+   * td, th or table for an element that is not positioned itself, else the
+   * body. Null for the root, the body, fixed boxes and elements without a box.
+   */
+  get offsetParent() {
+    const realm = realmOf(this);
+    const node = nodeOf(this);
+    const document = node.ownerDocument;
+    if (!node.isConnected || node === document?.documentElement || node === document?.body) return null;
+    const style = realm.hooks.computedStyle?.(node);
+    if (!style || style.display === "none" || style.position === "fixed") return null;
+    const positioned = style.position !== "static";
+    for (let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      if (ancestor === document.body) return realm.wrap(ancestor);
+      const ancestorStyle = realm.hooks.computedStyle?.(ancestor);
+      if (ancestorStyle?.display === "none") return null;
+      if (ancestorStyle && (ancestorStyle.position !== "static" || ancestorStyle.transform)) return realm.wrap(ancestor);
+      if (!positioned && (ancestor.tagName === "TD" || ancestor.tagName === "TH" || ancestor.tagName === "TABLE")) {
+        return realm.wrap(ancestor);
+      }
+    }
+    return null;
+  }
+
+  // The border edge's distance from the offsetParent's padding edge, or
+  // from the document's origin when that is the body or there is none.
   get offsetLeft() {
-    const { viewport } = realmOf(this).hooks;
-    return Math.round(this.getBoundingClientRect().left + viewport().scrollX);
+    return offsetCoordinate(this, "left");
   }
 
   get offsetTop() {
-    const { viewport } = realmOf(this).hooks;
-    return Math.round(this.getBoundingClientRect().top + viewport().scrollY);
+    return offsetCoordinate(this, "top");
   }
 
-  // The root element's client size is the viewport (CSSOM View §6).
+  // The root element's client size is the viewport (CSSOM View §6); a
+  // scroll container's is its padding box.
   get clientWidth() {
     const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
-    return root ? realmOf(this).hooks.viewport().width : this.offsetWidth;
+    if (root) return realmOf(this).hooks.viewport().width;
+    const scroller = elementScroll(this);
+    return scroller ? Math.round(scroller.clientWidth) : this.offsetWidth;
   }
 
   get clientHeight() {
     const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
-    return root ? realmOf(this).hooks.viewport().height : this.offsetHeight;
+    if (root) return realmOf(this).hooks.viewport().height;
+    const scroller = elementScroll(this);
+    return scroller ? Math.round(scroller.clientHeight) : this.offsetHeight;
+  }
+
+  // Scroll positions (CSSOM View §6): a scroll container's own; the root
+  // element and body stand for the viewport's.
+  get scrollTop() {
+    if (scrollsViewport(this)) return realmOf(this).hooks.viewport().scrollY;
+    return elementScroll(this)?.y ?? 0;
+  }
+
+  set scrollTop(value) {
+    this.scrollTo(this.scrollLeft, Number(value));
+  }
+
+  get scrollLeft() {
+    if (scrollsViewport(this)) return realmOf(this).hooks.viewport().scrollX;
+    return elementScroll(this)?.x ?? 0;
+  }
+
+  set scrollLeft(value) {
+    this.scrollTo(Number(value), this.scrollTop);
+  }
+
+  scrollTo(x = undefined, y = undefined) {
+    const options = typeof x === "object" && x !== null ? x : null;
+    const left = options ? options.left ?? this.scrollLeft : Number(x);
+    const top = options ? options.top ?? this.scrollTop : Number(y);
+    const realm = realmOf(this);
+    if (scrollsViewport(this)) realm.hooks.scrollTo(Number.isFinite(left) ? left : 0, Number.isFinite(top) ? top : 0);
+    else realm.hooks.setElementScroll?.(nodeOf(this), Number.isFinite(left) ? left : 0, Number.isFinite(top) ? top : 0);
+  }
+
+  scroll(x = undefined, y = undefined) {
+    this.scrollTo(x, y);
+  }
+
+  scrollBy(x = undefined, y = undefined) {
+    const options = typeof x === "object" && x !== null ? x : null;
+    const dx = Number(options ? options.left ?? 0 : x) || 0;
+    const dy = Number(options ? options.top ?? 0 : y) || 0;
+    this.scrollTo(this.scrollLeft + dx, this.scrollTop + dy);
+  }
+
+  // Forms, tables and selects (undefined on other elements, as in browsers).
+  get elements() {
+    const node = nodeOf(this);
+    return node.tagName === "FORM" ? realmOf(this).live(node.elements) : undefined;
   }
 
-  // Tables and selects (undefined on other elements, as in browsers).
   get rows() {
     const rows = nodeOf(this).rows;
     return rows === undefined ? undefined : realmOf(this).wrapAll(rows);
@@ -842,29 +1192,71 @@ 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
-  // box size; the root element spans at least the viewport.
+  // A scroll container's scroll size is how far its content reaches; other
+  // boxes' is their own size; the root element spans at least the viewport.
   get scrollWidth() {
+    const scroller = elementScroll(this);
+    if (scroller) return Math.round(scroller.scrollWidth);
     const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
     return Math.max(this.offsetWidth, root ? realmOf(this).hooks.viewport().width : 0);
   }
 
   get scrollHeight() {
+    const scroller = elementScroll(this);
+    if (scroller) return Math.round(scroller.scrollHeight);
     const root = nodeOf(this) === nodeOf(this).ownerDocument?.documentElement;
     return Math.max(this.offsetHeight, root ? realmOf(this).hooks.viewport().height : 0);
   }
 
   scrollIntoView() {
     const realm = realmOf(this);
+    if (realm.hooks.scrollIntoView) {
+      realm.hooks.scrollIntoView(nodeOf(this));
+      return;
+    }
     const rect = this.getBoundingClientRect();
     const { scrollX, scrollY } = realm.hooks.viewport();
     realm.hooks.scrollTo(scrollX, scrollY + rect.top);
   }
 }
 
+/** A scroll container's scroll state, or null (see the renderer's scrollerGeometry). */
+function offsetCoordinate(wrapper, side) {
+  const realm = realmOf(wrapper);
+  const node = nodeOf(wrapper);
+  // CSSOM View §7: the body's offsets are zero.
+  if (node === node.ownerDocument?.body) return 0;
+  const rect = realm.hooks.boundsOf(node);
+  if (!rect) return 0;
+  const { scrollX, scrollY } = realm.hooks.viewport();
+  const own = side === "left" ? rect.left + scrollX : rect.top + scrollY;
+  const parent = wrapper.offsetParent;
+  if (!parent || nodeOf(parent) === node.ownerDocument?.body) return Math.round(own);
+  const parentNode = nodeOf(parent);
+  const parentRect = realm.hooks.boundsOf(parentNode);
+  if (!parentRect) return Math.round(own);
+  const border = realm.hooks.computedStyle?.(parentNode)?.borderWidths?.[side === "left" ? 3 : 0] ?? 0;
+  // A box scrolled inside its offsetParent keeps its layout offset.
+  const scrolled = elementScroll(parent);
+  const scroll = side === "left" ? scrolled?.x ?? 0 : scrolled?.y ?? 0;
+  const origin = (side === "left" ? parentRect.left + scrollX : parentRect.top + scrollY) + border;
+  return Math.round(own - origin + scroll);
+}
+
+function elementScroll(wrapper) {
+  return realmOf(wrapper).hooks.elementScroll?.(nodeOf(wrapper)) ?? null;
+}
+
+/** The root element and body scroll the viewport (CSSOM View §6, the scrolling element). */
+function scrollsViewport(wrapper) {
+  const node = nodeOf(wrapper);
+  const document = node.ownerDocument;
+  return node === document?.documentElement || node === document?.body;
+}
+
 function isMedia(wrapper) {
   return wrapper.tagName === "VIDEO" || wrapper.tagName === "AUDIO";
 }
@@ -926,7 +1318,10 @@ for (const property of REFLECTED_PROPERTIES) {
       node[property] = typeof node[property] === "boolean" ? Boolean(value)
         : typeof node[property] === "number" ? Number(value)
           : String(value);
-      touch(this);
+      touch(this, [":state"]);
+      // A media src may be a MediaSource blob URL. Attachment runs now so
+      // sourceopen is queued after this setter returns.
+      if (property === "src" && isMedia(this)) realmOf(this).hooks.attachMediaSrc?.(node, node.src);
     },
   });
 }
@@ -952,6 +1347,30 @@ for (const property of ["origin", "protocol", "username", "password", "host", "h
 }
 
 class DocumentBinding extends ParentBinding {
+  #implementation = null;
+
+  /**
+   * document.implementation (DOM §4.5.1): documents scripts build off-screen
+   * (template parsing, sanitizers, polyfills). They share this window and are
+   * never rendered.
+   */
+  get implementation() {
+    const realm = realmOf(this);
+    const node = nodeOf(this);
+    this.#implementation ??= Object.freeze({
+      createHTMLDocument: (title = undefined) => realm.wrap(node.implementation.createHTMLDocument(
+        title === undefined ? undefined : String(title))),
+      createDocument: (namespace, qualifiedName, doctype = null) => realm.wrap(node.implementation.createDocument(
+        namespace === null || namespace === undefined ? null : String(namespace),
+        qualifiedName === null || qualifiedName === undefined ? "" : String(qualifiedName),
+        doctype ? nodeOf(doctype) : null)),
+      createDocumentType: (qualifiedName, publicId, systemId) => realm.wrap(node.implementation.createDocumentType(
+        String(qualifiedName), String(publicId), String(systemId))),
+      hasFeature: () => true,
+    });
+    return this.#implementation;
+  }
+
   get documentElement() {
     return realmOf(this).wrap(nodeOf(this).documentElement);
   }
@@ -1023,6 +1442,49 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).activeElement);
   }
 
+  /**
+   * document.all is an HTMLAllCollection that is falsy and loosely equal to
+   * undefined (HTML §7.2.6 [[IsHTMLDDA]]), which script cannot create. null
+   * keeps what pages test, `!document.all`, `document.all == null` and
+   * `value !== document.all` for undefined values (polymer_resin's check
+   * before sanitizing); only typeof differs.
+   */
+  get all() {
+    return null;
+  }
+
+  /**
+   * document.styleSheets (CSSOM §6.2): one entry per <style> and loaded-or-not
+   * <link rel=stylesheet>, in document order. Their rules are not exposed
+   * (cssRules is empty), as for a sheet scripts may not read.
+   */
+  get styleSheets() {
+    const realm = realmOf(this);
+    const sheets = [...nodeOf(this).querySelectorAll("style, link[rel~='stylesheet']")].map((element) => {
+      const href = element.tagName === "LINK" ? element.getAttribute("href") : null;
+      let resolved = null;
+      if (href !== null) try { resolved = new URL(href, nodeOf(this).URL).href; } catch {}
+      return Object.freeze({
+        type: "text/css",
+        href: resolved,
+        title: element.getAttribute("title"),
+        disabled: false,
+        ownerNode: realm.wrap(element),
+        media: Object.freeze({ mediaText: element.getAttribute("media") ?? "", length: element.hasAttribute("media") ? 1 : 0 }),
+        cssRules: Object.freeze([]),
+        rules: Object.freeze([]),
+      });
+    });
+    const list = [...sheets];
+    list.item = (index) => sheets[Number(index) >>> 0] ?? null;
+    return Object.freeze(list);
+  }
+
+  /** The topmost element painted at a viewport point (CSSOM View §5.1), or null. */
+  elementFromPoint(x, y) {
+    return realmOf(this).wrap(realmOf(this).hooks.elementAt?.(Number(x), Number(y)) ?? null);
+  }
+
   get currentScript() {
     return realmOf(this).wrap(realmOf(this).hooks.currentScript?.() ?? null);
   }
@@ -1083,8 +1545,27 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).createDocumentFragment());
   }
 
-  createEvent(_type) {
-    return realmOf(this).wrapEvent(new (realmOf(this).window.Event)(""));
+  createRange() {
+    return realmOf(this).wrapRange(nodeOf(this).createRange());
+  }
+
+  /** A copy of a node (from any document, a template's content say) owned by this one (DOM §4.5). */
+  importNode(node, deep = false) {
+    const options = typeof deep === "object" && deep !== null ? Boolean(deep.deep) : Boolean(deep);
+    return realmOf(this).wrap(nodeOf(this).importNode(requireNode(node), options));
+  }
+
+  /** Moves a node into this document, out of wherever it was. */
+  adoptNode(node) {
+    return realmOf(this).wrap(nodeOf(this).adoptNode(requireNode(node)));
+  }
+
+  createEvent(type) {
+    const name = CREATE_EVENT_TYPES.get(String(type).toLowerCase());
+    if (!name) throw new DOMException(`The provided event type ("${type}") is invalid.`, "NotSupportedError");
+    const window = realmOf(this).window;
+    const RealEvent = window[name] ?? window.Event;
+    return realmOf(this).wrapEvent(new RealEvent(""));
   }
 
   hasFocus() {
@@ -1145,15 +1626,121 @@ class EventBinding {
   }
 
   get isTrusted() {
-    return Boolean(this.#event.isTrusted);
+    return this.#realm.isTrusted(this.#event);
   }
 
+  // Happy DOM stamps events with the engine's clock; pages see their document's timeline.
   get timeStamp() {
-    return this.#event.timeStamp;
+    return this.#event.timeStamp - (this.#realm.hooks.timeOriginOffset?.() ?? 0);
   }
 
   get detail() {
-    return this.#detail ?? null;
+    return this.#detail ?? (typeof this.#event.detail === "number" ? this.#event.detail : null);
+  }
+
+  get composed() {
+    return Boolean(this.#event.composed);
+  }
+
+  // Legacy aliases of defaultPrevented and stopPropagation (DOM §2.2).
+  get returnValue() {
+    return !this.#event.defaultPrevented;
+  }
+
+  set returnValue(value) {
+    if (!value) this.preventDefault();
+  }
+
+  get cancelBubble() {
+    return Boolean(this.#event[Symbol.for("buninu.propagationStopped")]);
+  }
+
+  set cancelBubble(value) {
+    if (value) {
+      this.#event[Symbol.for("buninu.propagationStopped")] = true;
+      this.stopPropagation();
+    }
+  }
+
+  // UIEvent: the window for events the browser dispatches, null for constructed ones.
+  get view() {
+    return this.#realm.isTrusted(this.#event) ? this.#realm.hooks.targetOf?.(this.#realm.window) ?? null : null;
+  }
+
+  get which() {
+    if (typeof this.#event.keyCode === "number" && this.#event.keyCode) return this.#event.keyCode;
+    return typeof this.#event.button === "number" ? this.#event.button + 1 : 0;
+  }
+
+  // MouseEvent coordinates (CSSOM View §12): page = client + scroll; x/y alias client.
+  get pageX() {
+    return this.clientX + (this.#realm.hooks.viewport?.().scrollX ?? 0);
+  }
+
+  get pageY() {
+    return this.clientY + (this.#realm.hooks.viewport?.().scrollY ?? 0);
+  }
+
+  get x() {
+    return this.clientX;
+  }
+
+  get y() {
+    return this.clientY;
+  }
+
+  get offsetX() {
+    return this.#event.offsetX ?? 0;
+  }
+
+  get offsetY() {
+    return this.#event.offsetY ?? 0;
+  }
+
+  get movementX() {
+    return this.#event.movementX ?? 0;
+  }
+
+  get movementY() {
+    return this.#event.movementY ?? 0;
+  }
+
+  get relatedTarget() {
+    return this.#realm.wrap(this.#event.relatedTarget ?? null) ?? null;
+  }
+
+  getModifierState(key) {
+    const name = String(key);
+    return name === "Alt" ? this.altKey : name === "Control" ? this.ctrlKey : name === "Shift" ? this.shiftKey
+      : name === "Meta" ? this.metaKey : false;
+  }
+
+  // Legacy initialisers (UI Events §B): only before dispatch, like initEvent.
+  initUIEvent(type, bubbles = false, cancelable = false, _view = null, detail = 0) {
+    this.initEvent(type, bubbles, cancelable);
+    if (this.#detail === undefined) this.#detail = Number(detail) || 0;
+  }
+
+  initMouseEvent(type, bubbles = false, cancelable = false, view = null, detail = 0) {
+    this.initUIEvent(type, bubbles, cancelable, view, detail);
+  }
+
+  // A plain Event has no detail of its own: assigning one (Polymer's fire()
+  // does) makes an own property, as in browsers, instead of failing on the getter.
+  set detail(value) {
+    Object.defineProperty(this, "detail", { value, writable: true, configurable: true, enumerable: true });
+  }
+
+  /** Legacy initialisation of an event from document.createEvent() (DOM §2.5); not once dispatched. */
+  initEvent(type, bubbles = false, cancelable = false) {
+    if (this.#event.eventPhase !== 0) return;
+    this.#event.initEvent(String(type), Boolean(bubbles), Boolean(cancelable));
+  }
+
+  initCustomEvent(type, bubbles = false, cancelable = false, detail = null) {
+    if (this.#event.eventPhase !== 0) return;
+    this.#event.initEvent(String(type), Boolean(bubbles), Boolean(cancelable));
+    this.#detail = detail;
   }
 
   // PopStateEvent and HashChangeEvent fields; the engine only fires popstate
@@ -1237,7 +1824,26 @@ class EventBinding {
   }
 
   get data() {
-    return this.#event.data ?? null;
+    const message = this.#realm.messageOf(this.#event);
+    return message ? message.data : this.#event.data ?? null;
+  }
+
+  // MessageEvent fields; undefined on other events, as in browsers.
+  get origin() {
+    return this.#realm.messageOf(this.#event)?.origin;
+  }
+
+  get lastEventId() {
+    return this.#realm.messageOf(this.#event)?.lastEventId;
+  }
+
+  get source() {
+    const message = this.#realm.messageOf(this.#event);
+    return message ? message.source : undefined;
+  }
+
+  get ports() {
+    return this.#realm.messageOf(this.#event)?.ports;
   }
 
   get inputType() {
@@ -1516,50 +2122,152 @@ const UNRENDERED_STYLE_PROPERTIES = new Set([
   "viewTimelineAxis", "viewTimelineInset", "viewTimelineName",
 ]);
 
+/** Each element.style proxy → its element, declaration block and realm. */
+const styleStates = new WeakMap();
+
+function styleState(self) {
+  const state = styleStates.get(self);
+  if (!state) throw new TypeError("Illegal invocation");
+  return state;
+}
+
 /**
- * element.style: a proxy that reads and writes the real declaration block
- * with string values only. Mutations go to the style attribute, which the
- * style engine reads.
+ * CSSStyleDeclaration (CSSOM §6.6) for one realm: the operations and the
+ * cssText/length accessors live on its prototype, as in browsers, so
+ * element.style.setProperty is the interface's (native-looking) method.
  */
-function styleBinding(node, realm) {
-  const style = node.style;
-  const toKebab = (property) => property.startsWith("--") ? property
-    : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-  const methods = {
-    getPropertyValue: (property) => style.getPropertyValue(String(property)),
-    setProperty: (property, value, priority = "") => {
+export function cssStyleDeclarationInterface(realm) {
+  if (realm.cssStyleDeclaration) return realm.cssStyleDeclaration;
+  const CSSStyleDeclaration = { CSSStyleDeclaration: function () { throw new TypeError("Illegal constructor"); } }.CSSStyleDeclaration;
+  const members = {
+    get cssText() { return styleState(this).style.cssText; },
+    set cssText(value) {
+      const { style, node, realm: owner } = styleState(this);
+      const before = style.cssText;
+      style.cssText = String(value);
+      if (style.cssText !== before) owner.hooks.touch(node);
+    },
+    get length() { return styleState(this).style.length; },
+    get parentRule() { return null; },
+    get cssFloat() { return styleState(this).style.getPropertyValue("float"); },
+    set cssFloat(value) { this.setProperty("float", value); },
+    item(index) { return styleState(this).style.item?.(Number(index) >>> 0) ?? ""; },
+    getPropertyValue(property) { return styleState(this).style.getPropertyValue(String(property)); },
+    getPropertyPriority(property) { return styleState(this).style.getPropertyPriority?.(String(property)) ?? ""; },
+    setProperty(property, value, priority = "") {
+      const { style, node, realm: owner } = styleState(this);
       const before = style.cssText;
       style.setProperty(String(property), value === null ? "" : String(value), String(priority));
-      if (style.cssText !== before) realm.hooks.touch(node);
+      if (style.cssText !== before) owner.hooks.touch(node);
     },
-    removeProperty: (property) => {
+    removeProperty(property) {
+      const { style, node, realm: owner } = styleState(this);
       const previous = style.removeProperty(String(property));
-      realm.hooks.touch(node);
+      owner.hooks.touch(node);
       return previous;
     },
   };
-  return new Proxy(Object.create(null), {
-    get(_target, property) {
-      if (typeof property !== "string") return undefined;
-      if (Object.hasOwn(methods, property)) return methods[property];
-      if (property === "cssText") return style.cssText;
-      if (property === "length") return style.length;
+  const prototype = {};
+  for (const key of Reflect.ownKeys(members)) {
+    Object.defineProperty(prototype, key, { ...Object.getOwnPropertyDescriptor(members, key), enumerable: true, configurable: true });
+  }
+  Object.defineProperty(prototype, "constructor", { value: CSSStyleDeclaration, writable: true, configurable: true });
+  Object.defineProperty(prototype, Symbol.toStringTag, { value: "CSSStyleDeclaration", configurable: true });
+  Object.defineProperty(CSSStyleDeclaration, "prototype", { value: prototype });
+  realm.cssStyleDeclaration = CSSStyleDeclaration;
+  return CSSStyleDeclaration;
+}
+
+/**
+ * element.style: a proxy over a CSSStyleDeclaration that reads and writes
+ * the real declaration block, by property name, with string values only.
+ * Mutations go to the style attribute, which the style engine reads.
+ */
+function styleBinding(node, realm) {
+  const style = node.style;
+  const prototype = cssStyleDeclarationInterface(realm).prototype;
+  const toKebab = (property) => property.startsWith("--") ? property
+    : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  const proxy = new Proxy(Object.create(prototype), {
+    get(target, property, receiver) {
+      if (typeof property !== "string" || property in prototype) return Reflect.get(target, property, receiver);
+      if (/^(0|[1-9]\d*)$/.test(property)) return style.item?.(Number(property)) ?? undefined;
       return style.getPropertyValue(toKebab(property));
     },
-    set(_target, property, value) {
-      if (typeof property !== "string") return false;
+    set(target, property, value, receiver) {
+      if (typeof property !== "string" || property in prototype) return Reflect.set(target, property, value, receiver);
       const before = style.cssText;
-      if (property === "cssText") style.cssText = String(value);
-      else style.setProperty(toKebab(property), value === null ? "" : String(value));
+      style.setProperty(toKebab(property), value === null ? "" : String(value));
       if (style.cssText !== before) realm.hooks.touch(node);
       return true;
     },
     has: (_target, property) => {
-      if (typeof property !== "string") return false;
+      if (typeof property !== "string") return property in prototype;
       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));
+      return property in prototype || (property in style && !UNRENDERED_STYLE_PROPERTIES.has(camel));
+    },
+    defineProperty: () => false,
+    deleteProperty: () => false,
+    setPrototypeOf: () => false,
+  });
+  styleStates.set(proxy, { node, style, realm });
+  return proxy;
+}
+
+/**
+ * element.attributes (DOM §4.9.1 NamedNodeMap): live, by index and by name;
+ * its entries are the element's Attr views (see getAttributeNode).
+ */
+function attributesBinding(owner) {
+  const names = () => nodeOf(owner).getAttributeNames();
+  const nameAt = (index) => names()[index] ?? null;
+  const methods = {
+    item: (index) => {
+      const name = nameAt(Number(index) >>> 0);
+      return name === null ? null : owner.getAttributeNode(name);
+    },
+    getNamedItem: (name) => owner.getAttributeNode(String(name)),
+    getNamedItemNS: (_namespace, localName) => owner.getAttributeNode(String(localName)),
+    removeNamedItem(name) {
+      const attribute = owner.getAttributeNode(String(name));
+      if (!attribute) throw new DOMException(`No attribute named '${name}'`, "NotFoundError");
+      const removed = { name: attribute.name, value: attribute.value, nodeType: 2, specified: true, ownerElement: null };
+      owner.removeAttribute(attribute.name);
+      return removed;
+    },
+    setNamedItem(attribute) {
+      const previous = owner.getAttributeNode(String(attribute?.name));
+      owner.setAttribute(String(attribute?.name), String(attribute?.value ?? ""));
+      return previous;
+    },
+    *[Symbol.iterator]() {
+      for (const name of names()) yield owner.getAttributeNode(name);
+    },
+  };
+  const index = (property) => typeof property === "string" && /^(0|[1-9]\d*)$/.test(property) ? Number(property) : null;
+  return new Proxy(Object.create(null), {
+    get(_target, property) {
+      if (property === "length") return names().length;
+      if (Object.hasOwn(methods, property)) return methods[property];
+      if (property === Symbol.toStringTag) return "NamedNodeMap";
+      if (typeof property !== "string") return undefined;
+      const at = index(property);
+      if (at !== null) return methods.item(at);
+      return nodeOf(owner).hasAttribute(property) ? owner.getAttributeNode(property) : undefined;
+    },
+    has(_target, property) {
+      if (property === "length" || Object.hasOwn(methods, property)) return true;
+      const at = index(property);
+      return at !== null ? at < names().length : typeof property === "string" && nodeOf(owner).hasAttribute(property);
+    },
+    ownKeys: () => [...names().map((_name, at) => String(at)), ...names()],
+    getOwnPropertyDescriptor(_target, property) {
+      const at = index(property);
+      const value = at !== null ? methods.item(at)
+        : typeof property === "string" && nodeOf(owner).hasAttribute(property) ? owner.getAttributeNode(property) : null;
+      return value ? { value, writable: false, enumerable: at !== null, configurable: true } : undefined;
     },
+    set: () => false,
     defineProperty: () => false,
     deleteProperty: () => false,
     getPrototypeOf: () => null,
@@ -1601,16 +2309,38 @@ function datasetBinding(node, realm) {
   });
 }
 
+/**
+ * Flattens addEventListener's options (DOM §2.7 "flatten more"): the
+ * dictionary's members are read once each, in IDL order (capture, then
+ * once, passive and signal), before anything else happens, as pages detect
+ * support for an option by watching its getter run.
+ */
+function listenerOptions(options) {
+  if (typeof options !== "object" || options === null) {
+    return { capture: Boolean(options), once: false, passive: null, signal: null };
+  }
+  const capture = Boolean(options.capture);
+  const once = Boolean(options.once);
+  const passiveValue = options.passive;
+  const signal = options.signal;
+  if (signal !== undefined && !(signal instanceof AbortSignal)) {
+    throw new TypeError("Failed to read the 'signal' property from 'AddEventListenerOptions': Failed to convert value to 'AbortSignal'.");
+  }
+  return { capture, once, passive: passiveValue === undefined ? null : Boolean(passiveValue), signal: signal ?? null };
+}
+
 function addListener(wrapper, target, type, listener, options) {
+  const { capture, once, signal } = listenerOptions(options);
   if (typeof listener !== "function" && (listener === null || typeof listener !== "object")) return;
+  if (signal?.aborted) return;
   const realm = realmOf(wrapper) ?? wrapper;
-  const capture = typeof options === "boolean" ? options : Boolean(options?.capture);
-  const once = typeof options === "object" && options !== null && Boolean(options.once);
   const listeners = realm.listenerFor(target, String(type), listener, capture);
   if (listeners.has(listener)) return;
+  // An aborted signal removes the listener (DOM §2.7 "add an event listener", step 6).
+  signal?.addEventListener("abort", () => removeListener(wrapper, target, type, listener, capture), { once: true });
   const host = (event) => {
     if (realm.hooks.acceptEvent && !realm.hooks.acceptEvent(event)) return;
-    if (once) removeListener(wrapper, target, type, listener, options);
+    if (once) removeListener(wrapper, target, type, listener, capture);
     const binding = realm.wrapEvent(event);
     const thisArg = realm.wrap(event.currentTarget) ?? wrapper;
     if (typeof listener === "function") realm.hooks.call(listener, thisArg, [binding]);
@@ -1622,7 +2352,7 @@ function addListener(wrapper, target, type, listener, options) {
 
 function removeListener(wrapper, target, type, listener, options) {
   const realm = realmOf(wrapper) ?? wrapper;
-  const capture = typeof options === "boolean" ? options : Boolean(options?.capture);
+  const capture = typeof options === "object" && options !== null ? Boolean(options.capture) : Boolean(options);
   const listeners = realm.listenerFor(target, String(type), listener, capture);
   const host = listeners.get(listener);
   if (!host) return;
@@ -1645,16 +2375,102 @@ export function windowEventMethods(realm, pageGlobal) {
   };
 }
 
+/**
+ * Range (DOM §5.5) over an engine Range: boundary points and the content
+ * operations; nodes go in and out wrapped. Its client rects are those of the
+ * smallest element containing it.
+ */
+class RangeBinding {
+  static START_TO_START = 0;
+  static START_TO_END = 1;
+  static END_TO_END = 2;
+  static END_TO_START = 3;
+
+  #range;
+  #realm;
+
+  constructor(key, range, realm) {
+    if (key !== CONSTRUCT) throw new TypeError("Illegal constructor");
+    this.#range = range;
+    this.#realm = realm;
+  }
+
+  static rangeOf(value) {
+    if (value === null || typeof value !== "object" || !(#range in value)) throw new TypeError("parameter is not of type 'Range'");
+    return value.#range;
+  }
+
+  get startContainer() { return this.#realm.wrap(this.#range.startContainer); }
+  get startOffset() { return this.#range.startOffset; }
+  get endContainer() { return this.#realm.wrap(this.#range.endContainer); }
+  get endOffset() { return this.#range.endOffset; }
+  get collapsed() { return this.#range.collapsed; }
+  get commonAncestorContainer() { return this.#realm.wrap(this.#range.commonAncestorContainer); }
+
+  setStart(node, offset) { this.#range.setStart(requireNode(node), Number(offset) >>> 0); }
+  setEnd(node, offset) { this.#range.setEnd(requireNode(node), Number(offset) >>> 0); }
+  setStartBefore(node) { this.#range.setStartBefore(requireNode(node)); }
+  setStartAfter(node) { this.#range.setStartAfter(requireNode(node)); }
+  setEndBefore(node) { this.#range.setEndBefore(requireNode(node)); }
+  setEndAfter(node) { this.#range.setEndAfter(requireNode(node)); }
+  selectNode(node) { this.#range.selectNode(requireNode(node)); }
+  selectNodeContents(node) { this.#range.selectNodeContents(requireNode(node)); }
+  collapse(toStart = false) { this.#range.collapse(Boolean(toStart)); }
+  detach() {}
+
+  cloneRange() { return this.#realm.wrapRange(this.#range.cloneRange()); }
+  compareBoundaryPoints(how, other) { return this.#range.compareBoundaryPoints(Number(how), RangeBinding.rangeOf(other)); }
+  comparePoint(node, offset) { return this.#range.comparePoint(requireNode(node), Number(offset) >>> 0); }
+  isPointInRange(node, offset) { return this.#range.isPointInRange(requireNode(node), Number(offset) >>> 0); }
+  intersectsNode(node) { return this.#range.intersectsNode(requireNode(node)); }
+
+  cloneContents() { return this.#realm.wrap(this.#range.cloneContents()); }
+  extractContents() { return this.#realm.wrap(this.#range.extractContents()); }
+  deleteContents() { this.#range.deleteContents(); }
+  insertNode(node) { this.#range.insertNode(requireNode(node)); }
+  surroundContents(node) { this.#range.surroundContents(requireNode(node)); }
+  createContextualFragment(html) { return this.#realm.wrap(this.#range.createContextualFragment(String(html))); }
+
+  getBoundingClientRect() {
+    let node = this.#range.commonAncestorContainer;
+    if (node && node.nodeType !== 1) node = node.parentElement;
+    const rect = node ? this.#realm.hooks.boundsOf(node) : null;
+    return domRect(rect ?? { left: 0, top: 0, width: 0, height: 0 });
+  }
+
+  getClientRects() { return [this.getBoundingClientRect()]; }
+  toString() { return this.#range.toString(); }
+}
+
+/** Page-constructible Range (`new Range()`), its prototype shared by document.createRange()'s. */
+export function rangeConstructor(realm) {
+  function Range() {
+    if (!new.target) throw new TypeError("Constructor Range requires 'new'");
+    return realm.wrapRange(new realm.window.Range());
+  }
+  realm.rangePrototype = mutableBindingPrototype(RangeBinding.prototype);
+  Object.defineProperty(realm.rangePrototype, "constructor", { value: Range, writable: true, configurable: true });
+  Range.prototype = realm.rangePrototype;
+  for (const name of ["START_TO_START", "START_TO_END", "END_TO_END", "END_TO_START"]) {
+    Object.defineProperty(Range, name, { value: RangeBinding[name], enumerable: true });
+    Object.defineProperty(realm.rangePrototype, name, { value: RangeBinding[name], enumerable: true });
+  }
+  return Range;
+}
+
 /**
  * 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`.
+ * EventTarget.prototype's methods work on every event target, as in browsers
+ * (Node.prototype and Window.prototype inherit them): `targetOfPage` gives the
+ * engine target behind a node or the window.
  */
-export function eventTargetConstructor(realm, isTarget) {
+export function eventTargetConstructor(realm, isTarget, targetOfPage = () => null) {
   const backing = new WeakMap();
   const owners = new WeakMap();
   const realOf = (self) => {
-    const real = backing.get(self);
+    const real = backing.get(self) ?? targetOfPage(self);
     if (!real) throw new TypeError("Illegal invocation");
     return real;
   };
@@ -1668,10 +2484,10 @@ export function eventTargetConstructor(realm, isTarget) {
   }
   EventTarget.prototype = {
     constructor: EventTarget,
-    addEventListener(type, listener, options) {
+    addEventListener(type, listener, options = undefined) {
       addListener(realm, realOf(this), type, listener, options);
     },
-    removeEventListener(type, listener, options) {
+    removeEventListener(type, listener, options = undefined) {
       removeListener(realm, realOf(this), type, listener, options);
     },
     dispatchEvent(event) {
@@ -1688,6 +2504,30 @@ export function eventTargetConstructor(realm, isTarget) {
   return { EventTarget, targetOf: (real) => owners.get(real) ?? null };
 }
 
+const EVENT_PHASES = Object.freeze({ NONE: 0, CAPTURING_PHASE: 1, AT_TARGET: 2, BUBBLING_PHASE: 3 });
+const MODIFIERS = ["altKey", "ctrlKey", "shiftKey", "metaKey", "getModifierState"];
+const MOUSE_MEMBERS = ["screenX", "screenY", "clientX", "clientY", "pageX", "pageY", "x", "y", "offsetX", "offsetY",
+  "movementX", "movementY", "button", "buttons", "relatedTarget", "initMouseEvent", ...MODIFIERS];
+/** Event interface → [parent interface, members it owns], parents first. */
+const EVENT_INTERFACES = {
+  CustomEvent: ["Event", ["detail", "initCustomEvent"]],
+  UIEvent: ["Event", ["detail", "view", "which", "initUIEvent"]],
+  MouseEvent: ["UIEvent", MOUSE_MEMBERS],
+  PointerEvent: ["MouseEvent", ["pointerType"]],
+  WheelEvent: ["MouseEvent", ["deltaX", "deltaY", "deltaMode"]],
+  KeyboardEvent: ["UIEvent", ["key", "code", "repeat", ...MODIFIERS]],
+  FocusEvent: ["UIEvent", ["relatedTarget"]],
+  InputEvent: ["UIEvent", ["data", "inputType"]],
+  MessageEvent: ["Event", ["data", "origin", "lastEventId", "source", "ports"]],
+  PopStateEvent: ["Event", ["state"]],
+  HashChangeEvent: ["Event", ["oldURL", "newURL"]],
+};
+/** document.createEvent() interface names (DOM §4.5): legacy aliases included. */
+const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["htmlevents", "Event"],
+  ["customevent", "CustomEvent"], ["uievent", "UIEvent"], ["uievents", "UIEvent"], ["mouseevent", "MouseEvent"],
+  ["mouseevents", "MouseEvent"], ["keyboardevent", "KeyboardEvent"], ["focusevent", "FocusEvent"],
+  ["messageevent", "MessageEvent"], ["hashchangeevent", "HashChangeEvent"], ["popstateevent", "PopStateEvent"]]);
+
 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",
@@ -1714,8 +2554,32 @@ export function eventConstructors(realm) {
     return realm.wrapEvent(new window.CustomEvent(String(type), init(options)), options?.detail);
   }
   realm.eventPrototype = mutableBindingPrototype(EventBinding.prototype);
+  Object.defineProperty(realm.eventPrototype, "constructor", { value: Event, writable: true, configurable: true });
   Event.prototype = realm.eventPrototype;
-  CustomEvent.prototype = realm.eventPrototype;
+  for (const [name, value] of Object.entries(EVENT_PHASES)) {
+    Object.defineProperty(Event, name, { value, enumerable: true });
+    Object.defineProperty(realm.eventPrototype, name, { value, enumerable: true });
+  }
+  // The event interfaces (UI Events, HTML): each its own prototype, with its
+  // members moved off the shared binding prototype onto it.
+  realm.eventPrototypes = new Map([["Event", realm.eventPrototype]]);
+  const moved = new Set();
+  for (const [name, [parentName, members]] of Object.entries(EVENT_INTERFACES)) {
+    const prototype = Object.create(realm.eventPrototypes.get(parentName));
+    for (const member of members) {
+      const descriptor = Object.getOwnPropertyDescriptor(realm.eventPrototype, member);
+      if (!descriptor) continue;
+      Object.defineProperty(prototype, member, descriptor);
+      moved.add(member);
+    }
+    Object.defineProperty(prototype, Symbol.toStringTag, { value: name, configurable: true });
+    realm.eventPrototypes.set(name, prototype);
+  }
+  for (const member of moved) delete realm.eventPrototype[member];
+  // An own property of each event instead (see RealmBindings.wrapEvent).
+  delete realm.eventPrototype.isTrusted;
+  CustomEvent.prototype = realm.eventPrototypes.get("CustomEvent");
+  Object.defineProperty(CustomEvent.prototype, "constructor", { value: CustomEvent, writable: true, configurable: true });
   // UI event subclasses: their init dictionaries are copied as primitives only
   // (view and relatedTarget are dropped).
   const uiEvents = {};
@@ -1731,10 +2595,46 @@ export function eventConstructors(realm) {
       return realm.wrapEvent(new RealEvent(String(type), fields));
     };
     Object.defineProperty(Constructor, "name", { value: name });
-    Constructor.prototype = realm.eventPrototype;
+    Constructor.prototype = realm.eventPrototypes.get(name) ?? realm.eventPrototype;
+    Object.defineProperty(Constructor.prototype, "constructor", { value: Constructor, writable: true, configurable: true });
     uiEvents[name] = Constructor;
   }
-  return { Event, CustomEvent, ...uiEvents };
+  function MessageEvent(type, options = undefined) {
+    if (!new.target) throw new TypeError("Constructor MessageEvent requires 'new'");
+    return realm.messageEvent(type, {
+      data: options?.data ?? null,
+      origin: options?.origin ?? "",
+      lastEventId: options?.lastEventId ?? "",
+      source: options?.source ?? null,
+      ports: Array.isArray(options?.ports) ? options.ports : [],
+    }, init(options));
+  }
+  MessageEvent.prototype = realm.eventPrototypes.get("MessageEvent");
+  Object.defineProperty(MessageEvent.prototype, "constructor", { value: MessageEvent, writable: true, configurable: true });
+  // PromiseRejectionEvent (HTML §8.1.5.7): promise and reason stay page values in the binding.
+  const rejections = new WeakMap();
+  function PromiseRejectionEvent(type, options) {
+    if (!new.target) throw new TypeError("Failed to construct 'PromiseRejectionEvent': Please use the 'new' operator, this DOM object constructor cannot be called as a function.");
+    if (arguments.length < 2) {
+      throw new TypeError(`Failed to construct 'PromiseRejectionEvent': 2 arguments required, but only ${arguments.length} present.`);
+    }
+    if (options?.promise === undefined) {
+      throw new TypeError("Failed to construct 'PromiseRejectionEvent': Failed to read the 'promise' property from 'PromiseRejectionEventInit': Required member is undefined.");
+    }
+    const wrapper = realm.wrapEvent(new window.Event(String(type), init(options)));
+    Object.setPrototypeOf(wrapper, PromiseRejectionEvent.prototype);
+    rejections.set(wrapper, { promise: options.promise, reason: options.reason });
+    return wrapper;
+  }
+  PromiseRejectionEvent.prototype = Object.create(realm.eventPrototype, {
+    constructor: { value: PromiseRejectionEvent, writable: true, configurable: true },
+    promise: { get: Object.getOwnPropertyDescriptor({ get promise() { return rejections.get(this)?.promise; } }, "promise").get,
+      enumerable: true, configurable: true },
+    reason: { get: Object.getOwnPropertyDescriptor({ get reason() { return rejections.get(this)?.reason; } }, "reason").get,
+      enumerable: true, configurable: true },
+    [Symbol.toStringTag]: { value: "PromiseRejectionEvent", configurable: true },
+  });
+  return { Event, CustomEvent, MessageEvent, PromiseRejectionEvent, ...uiEvents };
 }
 
 function domRect({ left, top, width, height }) {
@@ -1755,12 +2655,29 @@ function cssEscape(value) {
  * Freezes the binding classes so no page can change the shared prototypes.
  * Must run after SES lockdown() (which provides `harden`).
  */
+const BINDINGS = [NodeBinding, CharacterDataBinding, TextBinding, ParentBinding, FragmentBinding, ShadowRootBinding, ElementBinding,
+  DocumentBinding, EventBinding, ClassListBinding, TreeWalkerBinding, RangeBinding];
+
+// Members defined with Object.defineProperty({ get() {...} }) are named
+// "get"; Web IDL names an attribute's accessors "get x" / "set x" and an
+// operation after itself. Named here, while the functions are still mutable.
+for (const Binding of BINDINGS) {
+  for (const key of Reflect.ownKeys(Binding.prototype)) {
+    if (key === "constructor") continue;
+    const name = typeof key === "symbol" ? `[${key.description ?? ""}]` : key;
+    const descriptor = Object.getOwnPropertyDescriptor(Binding.prototype, key);
+    for (const [fn, expected] of [[descriptor.get, `get ${name}`], [descriptor.set, `set ${name}`], [descriptor.value, name]]) {
+      if (typeof fn !== "function" || fn.name === expected) continue;
+      if (Object.getOwnPropertyDescriptor(fn, "name")?.configurable !== false) {
+        Object.defineProperty(fn, "name", { value: expected, configurable: true });
+      }
+    }
+  }
+}
+
 export function hardenBindings() {
   if (typeof harden !== "function") return;
-  for (const Binding of [NodeBinding, CharacterDataBinding, TextBinding, ParentBinding, FragmentBinding, ShadowRootBinding, ElementBinding,
-    DocumentBinding, EventBinding, ClassListBinding, TreeWalkerBinding]) {
-    harden(Binding);
-  }
+  for (const Binding of BINDINGS) harden(Binding);
 }
 
 /** Interface objects for `instanceof` checks; all throw "Illegal constructor" when called. */