buninu-browser 0.2.2 → 0.2.4

package/lib/renderer/bindings.js

@@ -10,12 +10,21 @@
  *
  * Coverage is the commonly used subset of DOM, not the full WebIDL surface.
  */
+import { renderedText, setRenderedText } from "./rendered-text.js";
+import { assignedSlot, slotAssignedNodes, assignSlotNodes } from "./slot-assignment.js";
+import { scrollIntoViewOptions, scrollAlignmentDelta } from "./scroll-into-view.js";
+import { documentBaseURL } from "../happy-dom/document-base.js";
+import { resetCanvas } from "./canvas-2d.js";
 
 const CONSTRUCT = Symbol("binding construction key");
+const isCanvasSizeAttribute = (node, name, namespace = null) => !namespace
+  && node.namespaceURI === "http://www.w3.org/1999/xhtml" && node.tagName === "CANVAS"
+  && (name === "width" || name === "height");
 const REFLECTED_PROPERTIES = [
   "value", "checked", "disabled", "type", "name", "href", "src", "alt", "title",
   "placeholder", "selected", "readOnly", "required", "min", "max", "step", "rel", "target",
   "htmlFor", "lang", "dir", "tabIndex", "hidden", "defaultValue", "action", "method",
+  "controls", "autoplay", "loop", "playsInline", "preload", "poster",
 ];
 
 /** Per-document state shared by that document's wrappers. */
@@ -41,6 +50,9 @@ export class BindingRealm {
   textPrototype = null;
   characterDataPrototype = null;
   nodePrototype = null;
+  datasetPrototype = null;
+  wrapValidity = null;
+  documentPrototype = null;
 
   /**
    * @param {object} window the Happy DOM window of the document
@@ -87,6 +99,7 @@ export class BindingRealm {
       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);
+      if (Binding === DocumentBinding && this.documentPrototype) Object.setPrototypeOf(wrapper, this.documentPrototype);
       this.#wrappers.set(node, wrapper);
     }
     return wrapper;
@@ -209,7 +222,7 @@ export class BindingRealm {
     if (!wrapper) {
       wrapper = new EventBinding(CONSTRUCT, event, this, detail);
       if (this.eventPrototype) {
-        const prototype = this.eventPrototypes?.get(event.constructor?.name) ?? this.eventPrototype;
+        const prototype = this.eventPrototypes?.get(this.#messages.has(event) ? "MessageEvent" : 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");
@@ -347,15 +360,7 @@ class NodeBinding {
 
   /** 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;
-    }
+    return documentBaseURL(this.#node);
   }
 
   get nodeValue() {
@@ -553,7 +558,9 @@ class CharacterDataBinding extends NodeBinding {
   }
 }
 
-class TextBinding extends CharacterDataBinding {}
+class TextBinding extends CharacterDataBinding {
+  get assignedSlot() { return realmOf(this).wrap(assignedSlot(nodeOf(this))); }
+}
 
 /** Methods shared by elements, documents and fragments (ParentNode). */
 class ParentBinding extends NodeBinding {
@@ -634,6 +641,9 @@ class ShadowRootBinding extends FragmentBinding {
     return nodeOf(this).mode;
   }
 
+  get delegatesFocus() { return nodeOf(this).delegatesFocus; }
+  get slotAssignment() { return nodeOf(this).slotAssignment; }
+
   get innerHTML() {
     return nodeOf(this).innerHTML;
   }
@@ -649,20 +659,49 @@ class ElementBinding extends ParentBinding {
   #classList = null;
   #dataset = null;
   #attributes = null;
+  #validity = null;
+  #clickInProgress = false;
 
   get tagName() {
     return nodeOf(this).tagName;
   }
 
   attachShadow(init) {
-    const mode = init?.mode === "closed" ? "closed" : "open";
-    return realmOf(this).wrap(nodeOf(this).attachShadow({ mode }));
+    const mode = String(init?.mode);
+    if (mode !== "open" && mode !== "closed") throw new TypeError("Shadow root mode must be open or closed");
+    const slotAssignment = String(init?.slotAssignment ?? "named");
+    if (slotAssignment !== "named" && slotAssignment !== "manual") throw new TypeError("Invalid slot assignment mode");
+    // Happy DOM spells this internal option delegateFocus (without the s).
+    return realmOf(this).wrap(nodeOf(this).attachShadow({ mode, slotAssignment, delegateFocus: Boolean(init?.delegatesFocus) }));
   }
 
   get shadowRoot() {
     return realmOf(this).wrap(nodeOf(this).shadowRoot);
   }
 
+  get assignedSlot() { return realmOf(this).wrap(assignedSlot(nodeOf(this))); }
+
+  get slot() { return nodeOf(this).getAttribute("slot") ?? ""; }
+  set slot(value) { this.setAttribute("slot", String(value)); }
+
+  assignedNodes(options = {}) {
+    const realm = realmOf(this);
+    return slotAssignedNodes(nodeOf(this), Boolean(options?.flatten)).map(node => realm.wrap(node));
+  }
+
+  assignedElements(options = {}) {
+    const realm = realmOf(this);
+    return slotAssignedNodes(nodeOf(this), Boolean(options?.flatten)).filter(node => node.nodeType === 1).map(node => realm.wrap(node));
+  }
+
+  assign(...nodes) {
+    const realm = realmOf(this);
+    assignSlotNodes(nodeOf(this), nodes.map(node => nodeOf(node)), slot => {
+      queueMicrotask(() => slot.dispatchEvent(new realm.window.Event("slotchange", { bubbles: true })));
+    });
+    touch(this);
+  }
+
   // HTMLIFrameElement: its document's window and, when same-origin, its
   // document (see messaging.js).
   get contentWindow() {
@@ -746,6 +785,9 @@ class ElementBinding extends ParentBinding {
     return nodeOf(this).localName;
   }
 
+  get namespaceURI() { return nodeOf(this).namespaceURI; }
+  get prefix() { return nodeOf(this).prefix; }
+
   get id() {
     return nodeOf(this).id;
   }
@@ -782,6 +824,11 @@ class ElementBinding extends ParentBinding {
     return this.#style;
   }
 
+  // ElementCSSInlineStyle is [PutForwards=cssText], not assignment-readonly.
+  set style(value) {
+    this.style.cssText = value;
+  }
+
   get dataset() {
     this.#dataset ??= datasetBinding(nodeOf(this), realmOf(this));
     return this.#dataset;
@@ -833,18 +880,23 @@ class ElementBinding extends ParentBinding {
     const attribute = element.getAttributeNode(String(name));
     if (!attribute) return null;
     const ownerElement = this;
+    const setValue = value => {
+      attribute.value = String(value);
+      if (attribute.ownerElement === element && isCanvasSizeAttribute(element, attribute.localName, attribute.namespaceURI)) resetCanvas(element);
+      touch(ownerElement);
+    };
     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); },
+      set value(value) { setValue(value); },
       get nodeName() { return attribute.name; },
       get nodeValue() { return attribute.value; },
-      set nodeValue(value) { attribute.value = String(value ?? ""); touch(ownerElement); },
+      set nodeValue(value) { setValue(value ?? ""); },
       get textContent() { return attribute.value; },
-      set textContent(value) { attribute.value = String(value ?? ""); touch(ownerElement); },
+      set textContent(value) { setValue(value ?? ""); },
       ownerElement,
       specified: true,
       nodeType: 2,
@@ -855,8 +907,10 @@ class ElementBinding extends ParentBinding {
     const node = nodeOf(this);
     const attribute = String(name);
     const next = String(value);
-    if (node.getAttribute(attribute) !== next) {
+    const resetsCanvas = isCanvasSizeAttribute(node, attribute.toLowerCase());
+    if (node.getAttribute(attribute) !== next || resetsCanvas) {
       node.setAttribute(attribute, next);
+      if (resetsCanvas) resetCanvas(node);
       touch(this);
     }
   }
@@ -866,6 +920,7 @@ class ElementBinding extends ParentBinding {
     const attribute = String(name);
     if (node.hasAttribute(attribute)) {
       node.removeAttribute(attribute);
+      if (isCanvasSizeAttribute(node, attribute.toLowerCase())) resetCanvas(node);
       touch(this);
     }
   }
@@ -888,17 +943,25 @@ class ElementBinding extends ParentBinding {
   }
 
   setAttributeNS(namespace, qualifiedName, value) {
-    nodeOf(this).setAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(qualifiedName), String(value));
+    const node = nodeOf(this), ns = namespace === undefined ? null : namespace && String(namespace), name = String(qualifiedName);
+    node.setAttributeNS(ns, name, String(value));
+    if (isCanvasSizeAttribute(node, name, ns)) resetCanvas(node);
     touch(this);
   }
 
   removeAttributeNS(namespace, localName) {
-    nodeOf(this).removeAttributeNS(namespace === undefined ? null : namespace && String(namespace), String(localName));
+    const node = nodeOf(this), ns = namespace === undefined ? null : namespace && String(namespace), name = String(localName);
+    const existed = node.hasAttributeNS(ns, name);
+    node.removeAttributeNS(ns, name);
+    if (existed && isCanvasSizeAttribute(node, name, ns)) resetCanvas(node);
     touch(this);
   }
 
   toggleAttribute(name, force = undefined) {
-    const result = nodeOf(this).toggleAttribute(String(name), force === undefined ? undefined : Boolean(force));
+    const node = nodeOf(this), attribute = String(name);
+    const existed = node.hasAttribute(attribute);
+    const result = node.toggleAttribute(attribute, force === undefined ? undefined : Boolean(force));
+    if (existed !== result && isCanvasSizeAttribute(node, attribute.toLowerCase())) resetCanvas(node);
     touch(this);
     return result;
   }
@@ -922,11 +985,13 @@ class ElementBinding extends ParentBinding {
   }
 
   get innerText() {
-    return nodeOf(this).textContent;
+    const node = nodeOf(this);
+    const realm = realmOf(this);
+    return node.ownerDocument !== realm.window.document ? node.textContent : renderedText(node, realm.hooks.computedStyle);
   }
 
   set innerText(value) {
-    nodeOf(this).textContent = String(value);
+    setRenderedText(nodeOf(this), value);
     touch(this);
   }
 
@@ -992,11 +1057,18 @@ class ElementBinding extends ParentBinding {
   click() {
     const realm = realmOf(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);
+    if (this.#clickInProgress || element.matches(":disabled")) return;
+    const anchor = element.closest?.("a[href]");
+    const Event = realm.window.PointerEvent ?? realm.window.MouseEvent;
+    const event = new Event("click", { bubbles: true, cancelable: true, composed: true });
+    const activationState = realm.hooks.activationState?.(element);
+    this.#clickInProgress = true;
+    try {
+      element.dispatchEvent(event);
+      if (!event.defaultPrevented && anchor?.hasAttribute("href")) realm.hooks.activateLink?.(anchor);
+    } finally {
+      this.#clickInProgress = false;
+      realm.hooks.activationChanged?.(activationState);
     }
   }
 
@@ -1010,21 +1082,42 @@ class ElementBinding extends ParentBinding {
     const form = nodeOf(this);
     if (form.tagName !== "FORM") return;
     const realSubmitter = submitter == null ? null : nodeOf(submitter);
+    if (realSubmitter && !((realSubmitter.tagName === "BUTTON" && realSubmitter.type === "submit")
+      || (realSubmitter.tagName === "INPUT" && ["submit", "image"].includes(realSubmitter.type)))) {
+      throw new TypeError("The submitter must be a submit button");
+    }
     if (realSubmitter && realSubmitter.form !== form) throw new DOMException("Submitter is not owned by this form", "NotFoundError");
-    if (!form.checkValidity()) return;
+    if (!form.noValidate && !realSubmitter?.formNoValidate && !form.checkValidity()) return;
     const event = new realm.window.SubmitEvent("submit", {
-      bubbles: true, cancelable: true, submitter: realSubmitter ?? form,
+      bubbles: true, cancelable: true, submitter: realSubmitter,
     });
     form.dispatchEvent(event);
     if (!event.defaultPrevented) realm.hooks.submitForm?.(form, realSubmitter);
   }
 
+  get validity() { return this.#validity ??= realmOf(this).wrapValidity(nodeOf(this).validity); }
+
+  setCustomValidity(message) {
+    if (!arguments.length) throw new TypeError("setCustomValidity requires a message");
+    nodeOf(this).setCustomValidity(String(message));
+    touch(this, [":state"]);
+  }
+
+  checkValidity() { return nodeOf(this).checkValidity(); }
+  reportValidity() { return nodeOf(this).reportValidity(); }
+
   focus() {
-    nodeOf(this).focus();
+    const node = nodeOf(this);
+    const previous = node.ownerDocument.activeElement;
+    node.focus();
+    if (node.ownerDocument.activeElement !== previous) touch(this, [":focus", ":focus-visible"]);
   }
 
   blur() {
-    nodeOf(this).blur();
+    const node = nodeOf(this);
+    const previous = node.ownerDocument.activeElement;
+    node.blur();
+    if (node.ownerDocument.activeElement !== previous) touch(this, [":focus", ":focus-visible"]);
   }
 
   getBoundingClientRect() {
@@ -1033,7 +1126,10 @@ class ElementBinding extends ParentBinding {
   }
 
   getClientRects() {
-    return [this.getBoundingClientRect()];
+    const realm = realmOf(this), node = nodeOf(this);
+    if (!node.isConnected || realm.hooks.computedStyle?.(node)?.display === "contents") return [];
+    const rect = realm.hooks.boundsOf(node);
+    return rect ? [domRect(rect)] : [];
   }
 
   get offsetWidth() {
@@ -1211,15 +1307,17 @@ class ElementBinding extends ParentBinding {
     return Math.max(this.offsetHeight, root ? realmOf(this).hooks.viewport().height : 0);
   }
 
-  scrollIntoView() {
+  scrollIntoView(options = undefined) {
     const realm = realmOf(this);
+    const normalized = scrollIntoViewOptions(options);
     if (realm.hooks.scrollIntoView) {
-      realm.hooks.scrollIntoView(nodeOf(this));
+      realm.hooks.scrollIntoView(nodeOf(this), normalized);
       return;
     }
     const rect = this.getBoundingClientRect();
-    const { scrollX, scrollY } = realm.hooks.viewport();
-    realm.hooks.scrollTo(scrollX, scrollY + rect.top);
+    const { scrollX, scrollY, width, height } = realm.hooks.viewport();
+    realm.hooks.scrollTo(scrollX + scrollAlignmentDelta(rect.left, rect.width, width, normalized.inline),
+      scrollY + scrollAlignmentDelta(rect.top, rect.height, height, normalized.block));
   }
 }
 
@@ -1266,7 +1364,7 @@ export const EVENT_HANDLER_NAMES = Object.freeze([
   "click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
   "keydown", "keyup", "keypress", "beforeinput", "input", "change", "submit", "reset", "focus", "blur", "load", "error",
   "abort", "scroll", "resize", "wheel", "contextmenu", "touchstart", "touchend", "touchmove",
-  "pointerdown", "pointerup", "pointermove", "animationend", "transitionend", "readystatechange",
+  "pointerdown", "pointerup", "pointermove", "animationend", "transitionend", "readystatechange", "slotchange", "toggle", "invalid",
 ]);
 
 /**
@@ -1310,7 +1408,16 @@ for (const property of REFLECTED_PROPERTIES) {
     configurable: true,
     enumerable: true,
     get() {
-      const value = nodeOf(this)[property];
+      const node = nodeOf(this);
+      const value = node[property];
+      if (typeof value === "string" && ["src", "href", "action", "poster"].includes(property)) {
+        const attribute = node.getAttribute(property);
+        if (property === "action" && !attribute) return node.ownerDocument.URL;
+        if (attribute !== null) {
+          try { return new URL(attribute, node.tagName === "BASE" ? node.ownerDocument.URL : documentBaseURL(node)).href; }
+          catch { return attribute; }
+        }
+      }
       return value === null || typeof value !== "object" ? value : String(value);
     },
     set(value) {
@@ -1358,12 +1465,32 @@ class DocumentBinding extends ParentBinding {
     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)),
+      createHTMLDocument: (title = undefined) => {
+        const created = node.implementation.createHTMLDocument();
+        const html = created.createElement("html");
+        const head = created.createElement("head");
+        const body = created.createElement("body");
+        created.replaceChildren(created.implementation.createDocumentType("html", "", ""), html);
+        html.append(head, body);
+        if (title !== undefined) {
+          const titleElement = created.createElement("title");
+          titleElement.textContent = String(title);
+          head.appendChild(titleElement);
+        }
+        return realm.wrap(created);
+      },
+      createDocument: (namespace, qualifiedName, doctype = null) => {
+        const created = new realm.window.XMLDocument();
+        const uri = namespace === null || namespace === undefined ? null : String(namespace);
+        const name = qualifiedName === null || qualifiedName === undefined ? "" : String(qualifiedName);
+        if (doctype !== null) created.appendChild(requireNode(doctype));
+        if (name) created.appendChild(created.createElementNS(uri, name));
+        Object.defineProperty(created, "contentType", {
+          value: uri === "http://www.w3.org/1999/xhtml" ? "application/xhtml+xml"
+            : uri === "http://www.w3.org/2000/svg" ? "image/svg+xml" : "application/xml", configurable: true,
+        });
+        return realm.wrap(created);
+      },
       createDocumentType: (qualifiedName, publicId, systemId) => realm.wrap(node.implementation.createDocumentType(
         String(qualifiedName), String(publicId), String(systemId))),
       hasFeature: () => true,
@@ -1375,13 +1502,16 @@ class DocumentBinding extends ParentBinding {
     return realmOf(this).wrap(nodeOf(this).documentElement);
   }
 
+  get doctype() { return realmOf(this).wrap(nodeOf(this).doctype); }
+
   get head() {
     return realmOf(this).wrap(nodeOf(this).head);
   }
 
   get body() {
     const realm = realmOf(this);
-    return realm.wrap(realm.hooks.body ? realm.hooks.body() : nodeOf(this).body);
+    const node = nodeOf(this);
+    return realm.wrap(node === realm.window.document && realm.hooks.body ? realm.hooks.body() : node.body);
   }
 
   get title() {
@@ -1393,7 +1523,8 @@ class DocumentBinding extends ParentBinding {
   }
 
   get readyState() {
-    return realmOf(this).hooks.readyState?.() ?? "complete";
+    const realm = realmOf(this);
+    return nodeOf(this) === realm.window.document ? realm.hooks.readyState?.() ?? "complete" : "complete";
   }
 
   // Page Visibility: the renderer only runs the page its client is showing.
@@ -1413,8 +1544,11 @@ class DocumentBinding extends ParentBinding {
     return nodeOf(this).URL;
   }
 
+  get referrer() { return nodeOf(this).referrer ?? ""; }
+
   get location() {
-    return realmOf(this).hooks.pageGlobal?.()?.location ?? null;
+    const realm = realmOf(this);
+    return nodeOf(this) === realm.window.document ? realm.hooks.pageGlobal?.()?.location ?? null : null;
   }
 
   get domain() {
@@ -1425,17 +1559,21 @@ class DocumentBinding extends ParentBinding {
     return "UTF-8";
   }
 
+  get contentType() { return nodeOf(this).contentType; }
+
   get compatMode() {
     return "CSS1Compat";
   }
 
   /** Non-HttpOnly cookies from the controller's jar; writes go back to the jar. */
   get cookie() {
-    return realmOf(this).hooks.documentCookie?.() ?? "";
+    const realm = realmOf(this);
+    return nodeOf(this) === realm.window.document ? realm.hooks.documentCookie?.() ?? "" : "";
   }
 
   set cookie(value) {
-    realmOf(this).hooks.setDocumentCookie?.(String(value));
+    const realm = realmOf(this);
+    if (nodeOf(this) === realm.window.document) realm.hooks.setDocumentCookie?.(String(value));
   }
 
   get activeElement() {
@@ -1463,7 +1601,7 @@ class DocumentBinding extends ParentBinding {
     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 {}
+      if (href !== null) try { resolved = new URL(href, element.baseURI || nodeOf(this).URL).href; } catch {}
       return Object.freeze({
         type: "text/css",
         href: resolved,
@@ -1486,11 +1624,13 @@ class DocumentBinding extends ParentBinding {
   }
 
   get currentScript() {
-    return realmOf(this).wrap(realmOf(this).hooks.currentScript?.() ?? null);
+    const realm = realmOf(this);
+    return nodeOf(this) === realm.window.document ? realm.wrap(realm.hooks.currentScript?.() ?? null) : null;
   }
 
   get defaultView() {
-    return realmOf(this).hooks.pageGlobal?.() ?? null;
+    const realm = realmOf(this);
+    return nodeOf(this) === realm.window.document ? realm.hooks.pageGlobal?.() ?? null : null;
   }
 
   get scripts() {
@@ -1709,6 +1849,8 @@ class EventBinding {
     return this.#realm.wrap(this.#event.relatedTarget ?? null) ?? null;
   }
 
+  get submitter() { return this.#realm.wrap(this.#event.submitter ?? null); }
+
   getModifierState(key) {
     const name = String(key);
     return name === "Alt" ? this.altKey : name === "Control" ? this.ctrlKey : name === "Shift" ? this.shiftKey
@@ -1725,12 +1867,6 @@ class EventBinding {
     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;
@@ -1767,6 +1903,9 @@ class EventBinding {
     return this.#event.code;
   }
 
+  get keyCode() { return this.#event.keyCode ?? 0; }
+  get charCode() { return this.#event.charCode ?? 0; }
+
   get clientX() {
     return this.#event.clientX;
   }
@@ -2278,34 +2417,45 @@ function attributesBinding(owner) {
 /** element.dataset: data-* attributes as camelCase string properties. */
 function datasetBinding(node, realm) {
   const attribute = (property) => `data-${property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}`;
-  return new Proxy(Object.create(null), {
-    get(_target, property) {
-      if (typeof property !== "string") return undefined;
-      return node.getAttribute(attribute(property)) ?? undefined;
-    },
-    set(_target, property, value) {
-      if (typeof property !== "string") return false;
-      node.setAttribute(attribute(property), String(value));
+  const supported = (property) => typeof property === "string" && !/-[a-z]/.test(property)
+    && node.hasAttribute(attribute(property));
+  const set = (target, property, value) => {
+    if (typeof property !== "string") return Reflect.set(target, property, value);
+    if (/-[a-z]/.test(property)) throw new DOMException("The property name must not contain a hyphen followed by a lowercase letter.", "SyntaxError");
+    const name = attribute(property);
+    const next = String(value);
+    if (node.getAttribute(name) !== next) {
+      node.setAttribute(name, next);
       realm.hooks.touch(node);
-      return true;
+    }
+    return true;
+  };
+  return new Proxy(Object.create(realm.datasetPrototype), {
+    get(target, property, receiver) {
+      return supported(property) ? node.getAttribute(attribute(property)) : Reflect.get(target, property, receiver);
     },
-    has: (_target, property) => typeof property === "string" && node.hasAttribute(attribute(property)),
-    deleteProperty(_target, property) {
-      if (typeof property !== "string") return false;
+    set,
+    has: (target, property) => supported(property) || Reflect.has(target, property),
+    deleteProperty(target, property) {
+      if (!supported(property)) return Reflect.deleteProperty(target, property);
       node.removeAttribute(attribute(property));
       realm.hooks.touch(node);
       return true;
     },
-    ownKeys: () => node.getAttributeNames()
+    ownKeys: (target) => [...node.getAttributeNames()
       .filter((name) => name.startsWith("data-"))
-      .map((name) => name.slice(5).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())),
-    getOwnPropertyDescriptor(_target, property) {
-      const value = typeof property === "string" ? node.getAttribute(attribute(property)) : null;
-      return value === null ? undefined : { value, writable: true, enumerable: true, configurable: true };
+      .map((name) => name.slice(5).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())), ...Reflect.ownKeys(target)],
+    getOwnPropertyDescriptor(target, property) {
+      return supported(property)
+        ? { value: node.getAttribute(attribute(property)), writable: true, enumerable: true, configurable: true }
+        : Reflect.getOwnPropertyDescriptor(target, property);
     },
-    defineProperty: () => false,
-    getPrototypeOf: () => null,
-    setPrototypeOf: () => false,
+    defineProperty(target, property, descriptor) {
+      if (typeof property !== "string") return Reflect.defineProperty(target, property, descriptor);
+      if (!("value" in descriptor) || descriptor.configurable === false) return false;
+      return set(target, property, descriptor.value);
+    },
+    preventExtensions: () => false,
   });
 }
 
@@ -2515,12 +2665,13 @@ const EVENT_INTERFACES = {
   MouseEvent: ["UIEvent", MOUSE_MEMBERS],
   PointerEvent: ["MouseEvent", ["pointerType"]],
   WheelEvent: ["MouseEvent", ["deltaX", "deltaY", "deltaMode"]],
-  KeyboardEvent: ["UIEvent", ["key", "code", "repeat", ...MODIFIERS]],
+  KeyboardEvent: ["UIEvent", ["key", "code", "keyCode", "charCode", "repeat", ...MODIFIERS]],
   FocusEvent: ["UIEvent", ["relatedTarget"]],
   InputEvent: ["UIEvent", ["data", "inputType"]],
   MessageEvent: ["Event", ["data", "origin", "lastEventId", "source", "ports"]],
   PopStateEvent: ["Event", ["state"]],
   HashChangeEvent: ["Event", ["oldURL", "newURL"]],
+  SubmitEvent: ["Event", ["submitter"]],
 };
 /** document.createEvent() interface names (DOM §4.5): legacy aliases included. */
 const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["htmlevents", "Event"],
@@ -2531,7 +2682,7 @@ const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["h
 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",
-    "pointerId", "width", "height", "pressure", "location"].map((key) => [key, Number]),
+    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode"].map((key) => [key, Number]),
   ...["key", "code", "data", "inputType", "pointerType"].map((key) => [key, String]),
   ...["ctrlKey", "altKey", "shiftKey", "metaKey", "repeat", "isComposing", "isPrimary"].map((key) => [key, Boolean]),
 ];
@@ -2553,7 +2704,10 @@ export function eventConstructors(realm) {
     // detail stays in the binding: page values never enter Happy DOM.
     return realm.wrapEvent(new window.CustomEvent(String(type), init(options)), options?.detail);
   }
-  realm.eventPrototype = mutableBindingPrototype(EventBinding.prototype);
+  // Members moved to UI event subclasses must not remain inherited through
+  // the frozen engine binding. Plain Events allow expandos such as React's
+  // afterblur.relatedTarget, and Event.prototype directly inherits Object.
+  realm.eventPrototype = mutableBindingPrototype(EventBinding.prototype, Object.prototype);
   Object.defineProperty(realm.eventPrototype, "constructor", { value: Event, writable: true, configurable: true });
   Event.prototype = realm.eventPrototype;
   for (const [name, value] of Object.entries(EVENT_PHASES)) {
@@ -2611,6 +2765,14 @@ export function eventConstructors(realm) {
   }
   MessageEvent.prototype = realm.eventPrototypes.get("MessageEvent");
   Object.defineProperty(MessageEvent.prototype, "constructor", { value: MessageEvent, writable: true, configurable: true });
+  function SubmitEvent(type, options = undefined) {
+    if (!new.target) throw new TypeError("Constructor SubmitEvent requires 'new'");
+    const submitter = options?.submitter == null ? null : nodeOf(options.submitter);
+    if (submitter && submitter.nodeType !== 1) throw new TypeError("The submitter must be an element");
+    return realm.wrapEvent(new window.SubmitEvent(String(type), { ...init(options), submitter }));
+  }
+  SubmitEvent.prototype = realm.eventPrototypes.get("SubmitEvent");
+  Object.defineProperty(SubmitEvent.prototype, "constructor", { value: SubmitEvent, 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) {
@@ -2634,7 +2796,7 @@ export function eventConstructors(realm) {
       enumerable: true, configurable: true },
     [Symbol.toStringTag]: { value: "PromiseRejectionEvent", configurable: true },
   });
-  return { Event, CustomEvent, MessageEvent, PromiseRejectionEvent, ...uiEvents };
+  return { Event, CustomEvent, MessageEvent, SubmitEvent, PromiseRejectionEvent, ...uiEvents };
 }
 
 function domRect({ left, top, width, height }) {