buninu-browser 0.2.0 → 0.2.2

package/lib/renderer/page-realm.js

@@ -12,11 +12,45 @@
  * the renderer schedule style, layout and paint.
  */
 import {
-  BindingRealm, defineEventHandlerProperty, eventConstructors, eventTargetConstructor, hardenBindings, INTERFACES, mutableBindingPrototype, NodeFilter, nodeOf, windowEventMethods,
+  BindingRealm, cssStyleDeclarationInterface, defineEventHandlerProperty, eventConstructors, eventTargetConstructor, hardenBindings, INTERFACES, mutableBindingPrototype, NodeFilter, nodeOf, rangeConstructor, windowEventMethods,
 } from "./bindings.js";
 import { resolveModuleSpecifier, transformModule } from "./module-transform.js";
-import { CONSTRUCTOR_HELPER, rewriteClassicScript, rewriteConstructorReads } from "./script-rewrite.js";
-import { mediaQueryMatches } from "../style/computed-style.js";
+import {
+  CONSTRUCTOR_HELPER, DIRECT_EVAL_HELPER, DIRECT_EVAL_STRICT, escapeSesHtmlComments, prepareDirectEvalSource,
+  DIRECT_EVAL_SCOPE_HELPER, REFERENCE_HELPER, referenceHelper, restoreSourceText, THIS_HELPER,
+  rewriteClassicScriptSource, rewriteConstructorReads, rewriteModuleSource,
+} from "./script-rewrite.js";
+import { mediaQueryMatches, resolveVariables } from "../style/computed-style.js";
+import { asIncumbent, createMessaging } from "./messaging.js";
+import { canvasContext, resetCanvas } from "./canvas-2d.js";
+import { createWorkers } from "./workers.js";
+import { createMediaSourceScope } from "./media-source.js";
+import { markNative, markNativeApi, setFunctionSourceTextTransform } from "./native-functions.js";
+import { applyGlobalShape, platformObject, storageInterface } from "./interfaces.js";
+import { trustedTypesApi } from "./trusted-types.js";
+import { onPromiseRejection } from "./rejections.js";
+import { AsyncLocalStorage } from "node:async_hooks";
+
+// URL is one shared intrinsic, hardened before any page sees it. Blob URL
+// creation is installed once and dispatched to the document whose task is
+// running (AsyncLocalStorage, with the latest document as a fallback).
+const blobUrlContext = new AsyncLocalStorage();
+let blobUrlFallback = null;
+
+function installBlobUrls() {
+  const createObjectURL = function createObjectURL(object) {
+    const scope = blobUrlContext.getStore() ?? blobUrlFallback;
+    if (!scope) throw new TypeError("URL.createObjectURL is not available");
+    return scope.create(object);
+  };
+  const revokeObjectURL = function revokeObjectURL(url) {
+    const scope = blobUrlContext.getStore() ?? blobUrlFallback;
+    scope?.revoke(url);
+  };
+  Object.defineProperty(URL, "createObjectURL", { value: createObjectURL, writable: true, configurable: true });
+  Object.defineProperty(URL, "revokeObjectURL", { value: revokeObjectURL, writable: true, configurable: true });
+}
+installBlobUrls();
 
 // Captured at load, before host mode can install page globals over them.
 const hostSetTimeout = globalThis.setTimeout;
@@ -28,7 +62,7 @@ const hostStructuredClone = globalThis.structuredClone;
 const hostAtob = globalThis.atob;
 const hostBtoa = globalThis.btoa;
 
-const CLASSIC_SCRIPT_TYPES = new Set([
+export const CLASSIC_SCRIPT_TYPES = new Set([
   "", "text/javascript", "application/javascript", "text/ecmascript", "application/ecmascript",
   "application/x-javascript", "text/jscript", "text/livescript",
 ]);
@@ -37,6 +71,44 @@ const INLINE_HANDLER_EVENTS = [
   "keypress", "beforeinput", "focus", "blur", "load",
 ];
 const MAX_CONSOLE_ENTRIES = 500;
+/**
+ * Reflected content attributes (HTML §2.6.1) the engine does not implement
+ * itself, per interface: name → [content attribute, "string" | "unsigned"].
+ */
+/** HTMLElement's own members (HTML §3.2.8), besides its on* event handlers. */
+const HTML_ELEMENT_MEMBERS = new Set(["title", "lang", "translate", "dir", "hidden", "inert", "accessKey", "draggable",
+  "spellcheck", "autocapitalize", "contentEditable", "enterKeyHint", "isContentEditable", "inputMode", "popover",
+  "offsetParent", "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight", "innerText", "outerText", "click",
+  "attachInternals", "showPopover", "hidePopover", "togglePopover", "dataset", "nonce", "autofocus", "tabIndex",
+  "style", "focus", "blur"]);
+
+const REFLECTED_ATTRIBUTES = {
+  HTMLImageElement: { name: ["name", "string"], lowsrc: ["lowsrc", "string"], align: ["align", "string"],
+    longDesc: ["longdesc", "string"], border: ["border", "string"], hspace: ["hspace", "unsigned"],
+    vspace: ["vspace", "unsigned"], fetchPriority: ["fetchpriority", "string"] },
+};
+/** Reflected attributes whose IDL type is a nullable string (HTML §2.6.1). */
+const NULLABLE_STRING_ATTRIBUTES = new Set(["crossOrigin"]);
+// Page functions print the source the page wrote, not the engine's rewrite of it.
+setFunctionSourceTextTransform(restoreSourceText);
+/**
+ * Language globals every browser has that SES leaves out of compartments
+ * (float arrays for the NaN side channel, WeakRef and FinalizationRegistry
+ * for non-determinism, Atomics without SharedArrayBuffer, WebAssembly).
+ * SharedArrayBuffer stays out: Chromium only exposes it to cross-origin
+ * isolated documents.
+ */
+const HOST_LANGUAGE_GLOBALS = Object.fromEntries(["Float16Array", "Float32Array", "Float64Array", "WeakRef",
+  "FinalizationRegistry", "Atomics", "WebAssembly"].filter((name) => globalThis[name] !== undefined)
+  .map((name) => [name, globalThis[name]]));
+/** Streams (WHATWG Streams, Compression Streams, Encoding streams), Bun's own implementations. */
+const HOST_STREAM_GLOBALS = Object.fromEntries(["ReadableStream", "ReadableStreamDefaultReader",
+  "ReadableStreamBYOBReader", "ReadableStreamDefaultController", "ReadableByteStreamController",
+  "ReadableStreamBYOBRequest", "WritableStream", "WritableStreamDefaultWriter",
+  "WritableStreamDefaultController", "TransformStream", "TransformStreamDefaultController",
+  "ByteLengthQueuingStrategy", "CountQueuingStrategy", "TextEncoderStream", "TextDecoderStream",
+  "CompressionStream", "DecompressionStream"].filter((name) => typeof globalThis[name] === "function")
+  .map((name) => [name, globalThis[name]]));
 // Element interfaces recognised by instanceof, by tag name.
 const ELEMENT_INTERFACES = Object.freeze({
   HTMLAnchorElement: ["A"], HTMLAreaElement: ["AREA"], HTMLAudioElement: ["AUDIO"], HTMLBRElement: ["BR"],
@@ -48,20 +120,83 @@ const ELEMENT_INTERFACES = Object.freeze({
   HTMLLabelElement: ["LABEL"], HTMLLegendElement: ["LEGEND"], HTMLLinkElement: ["LINK"], HTMLMapElement: ["MAP"],
   HTMLMediaElement: ["AUDIO", "VIDEO"], HTMLMetaElement: ["META"], HTMLMeterElement: ["METER"],
   HTMLOListElement: ["OL"], HTMLObjectElement: ["OBJECT"], HTMLOptGroupElement: ["OPTGROUP"], HTMLOptionElement: ["OPTION"],
-  HTMLOutputElement: ["OUTPUT"], HTMLParagraphElement: ["P"], HTMLPictureElement: ["PICTURE"], HTMLPreElement: ["PRE"],
+  HTMLOutputElement: ["OUTPUT"], HTMLParagraphElement: ["P"], HTMLPictureElement: ["PICTURE"], HTMLPreElement: ["PRE", "LISTING", "XMP"],
   HTMLProgressElement: ["PROGRESS"], HTMLQuoteElement: ["BLOCKQUOTE", "Q"], HTMLScriptElement: ["SCRIPT"],
   HTMLSelectElement: ["SELECT"], HTMLSlotElement: ["SLOT"], HTMLSourceElement: ["SOURCE"], HTMLSpanElement: ["SPAN"],
   HTMLStyleElement: ["STYLE"], HTMLTableCellElement: ["TD", "TH"], HTMLTableElement: ["TABLE"], HTMLTableRowElement: ["TR"],
   HTMLTableSectionElement: ["THEAD", "TBODY", "TFOOT"], HTMLTemplateElement: ["TEMPLATE"], HTMLTextAreaElement: ["TEXTAREA"],
   HTMLTimeElement: ["TIME"], HTMLTitleElement: ["TITLE"], HTMLTrackElement: ["TRACK"], HTMLUListElement: ["UL"],
-  HTMLVideoElement: ["VIDEO"],
+  HTMLVideoElement: ["VIDEO"], HTMLDataElement: ["DATA"], HTMLModElement: ["INS", "DEL"], HTMLParamElement: ["PARAM"],
+  HTMLTableCaptionElement: ["CAPTION"], HTMLTableColElement: ["COL", "COLGROUP"], HTMLDataListElement: ["DATALIST"],
+  HTMLMenuElement: ["MENU"], HTMLFontElement: ["FONT"], HTMLDirectoryElement: ["DIR"], HTMLFrameElement: ["FRAME"],
+  HTMLFrameSetElement: ["FRAMESET"], HTMLMarqueeElement: ["MARQUEE"],
 });
+/**
+ * HTML elements whose interface is HTMLElement itself (HTML §4 element index,
+ * and §16's obsolete elements). Any other name in the HTML namespace that is
+ * not a valid custom element name is an HTMLUnknownElement (DOM "element
+ * interface"), as <lh> or <blink> are.
+ */
+const PLAIN_HTML_ELEMENTS = new Set(["ABBR", "ADDRESS", "ARTICLE", "ASIDE", "B", "BDI", "BDO", "CITE", "CODE", "DD", "DFN",
+  "DT", "EM", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "HGROUP", "I", "KBD", "MAIN", "MARK", "NAV", "NOSCRIPT", "RP",
+  "RT", "RUBY", "S", "SAMP", "SEARCH", "SECTION", "SMALL", "STRONG", "SUB", "SUMMARY", "SUP", "U", "VAR", "WBR",
+  "ACRONYM", "BASEFONT", "BIG", "CENTER", "NOBR", "NOEMBED", "NOFRAMES", "PLAINTEXT", "RB", "RTC", "STRIKE", "TT",
+  "FENCEDFRAME", "SELECTEDCONTENT", "GEOLOCATION", "PERMISSION"]);
+/**
+ * Members the bindings define on every element that HTML gives only to
+ * some interfaces (HTML §4): each moves from Element.prototype to the
+ * prototypes of the interfaces listed, so `"play" in div` is false as in
+ * browsers. Interface names shared by several members are grouped.
+ */
+const FORM_CONTROLS = ["HTMLInputElement", "HTMLSelectElement", "HTMLTextAreaElement", "HTMLButtonElement"];
+const URL_ELEMENTS = ["HTMLAnchorElement", "HTMLAreaElement"];
+const INTERFACE_MEMBERS = {
+  contentWindow: ["HTMLIFrameElement", "HTMLObjectElement", "HTMLFrameElement"],
+  contentDocument: ["HTMLIFrameElement", "HTMLObjectElement", "HTMLFrameElement"],
+  content: ["HTMLTemplateElement"],
+  paused: ["HTMLMediaElement"], ended: ["HTMLMediaElement"], currentTime: ["HTMLMediaElement"], duration: ["HTMLMediaElement"],
+  play: ["HTMLMediaElement"], pause: ["HTMLMediaElement"], load: ["HTMLMediaElement"], canPlayType: ["HTMLMediaElement"],
+  submit: ["HTMLFormElement"], requestSubmit: ["HTMLFormElement"], action: ["HTMLFormElement"], method: ["HTMLFormElement"],
+  elements: ["HTMLFormElement", "HTMLFieldSetElement"],
+  rows: ["HTMLTableElement", "HTMLTableSectionElement", "HTMLTextAreaElement"],
+  cells: ["HTMLTableRowElement"], rowIndex: ["HTMLTableRowElement"], cellIndex: ["HTMLTableCellElement"],
+  tBodies: ["HTMLTableElement"], tHead: ["HTMLTableElement"], tFoot: ["HTMLTableElement"],
+  options: ["HTMLSelectElement", "HTMLDataListElement"], selectedOptions: ["HTMLSelectElement"], selectedIndex: ["HTMLSelectElement"],
+  value: [...FORM_CONTROLS, "HTMLOptionElement", "HTMLOutputElement", "HTMLDataElement", "HTMLLIElement", "HTMLMeterElement",
+    "HTMLProgressElement", "HTMLParamElement"],
+  checked: ["HTMLInputElement"], selected: ["HTMLOptionElement"],
+  disabled: [...FORM_CONTROLS, "HTMLOptionElement", "HTMLOptGroupElement", "HTMLFieldSetElement", "HTMLLinkElement", "HTMLStyleElement"],
+  type: [...FORM_CONTROLS, "HTMLScriptElement", "HTMLLinkElement", "HTMLOListElement", "HTMLUListElement", "HTMLLIElement",
+    "HTMLEmbedElement", "HTMLObjectElement", "HTMLSourceElement", "HTMLOutputElement", "HTMLFieldSetElement", "HTMLParamElement",
+    ...URL_ELEMENTS],
+  name: [...FORM_CONTROLS, "HTMLFormElement", "HTMLIFrameElement", "HTMLObjectElement", "HTMLMapElement", "HTMLMetaElement",
+    "HTMLSlotElement", "HTMLOutputElement", "HTMLFieldSetElement", "HTMLParamElement", "HTMLAnchorElement", "HTMLImageElement",
+    "HTMLEmbedElement", "HTMLFrameElement", "HTMLDetailsElement"],
+  href: [...URL_ELEMENTS, "HTMLLinkElement", "HTMLBaseElement"],
+  src: ["HTMLImageElement", "HTMLScriptElement", "HTMLIFrameElement", "HTMLMediaElement", "HTMLSourceElement", "HTMLTrackElement",
+    "HTMLEmbedElement", "HTMLInputElement", "HTMLFrameElement"],
+  alt: ["HTMLImageElement", "HTMLAreaElement", "HTMLInputElement"],
+  placeholder: ["HTMLInputElement", "HTMLTextAreaElement"],
+  readOnly: ["HTMLInputElement", "HTMLTextAreaElement"],
+  required: ["HTMLInputElement", "HTMLTextAreaElement", "HTMLSelectElement"],
+  min: ["HTMLInputElement", "HTMLMeterElement"], max: ["HTMLInputElement", "HTMLMeterElement", "HTMLProgressElement"],
+  step: ["HTMLInputElement"],
+  rel: [...URL_ELEMENTS, "HTMLLinkElement"], target: [...URL_ELEMENTS, "HTMLFormElement", "HTMLBaseElement"],
+  htmlFor: ["HTMLLabelElement", "HTMLOutputElement"],
+  defaultValue: ["HTMLInputElement", "HTMLTextAreaElement", "HTMLOutputElement"],
+  origin: URL_ELEMENTS, protocol: URL_ELEMENTS, username: URL_ELEMENTS, password: URL_ELEMENTS, host: URL_ELEMENTS,
+  hostname: URL_ELEMENTS, port: URL_ELEMENTS, pathname: URL_ELEMENTS, search: URL_ELEMENTS, hash: URL_ELEMENTS,
+};
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
 const LIFECYCLE_EVENT_TYPES = new Set(["load", "DOMContentLoaded", "readystatechange"]);
+// Classic scripts at least this long are prepared on the rewrite thread
+// (see prepareOffThread); smaller ones cost less than the round trip.
+const OFF_THREAD_SCRIPT_SIZE = 16 * 1024;
 // window.on* handler properties (window.onerror has a different signature and is not modelled).
 const WINDOW_HANDLER_EVENTS = [
   "load", "resize", "scroll", "keydown", "keyup", "keypress", "click", "message", "hashchange",
-  "popstate", "beforeunload", "unload", "focus", "blur", "online", "offline",
+  "popstate", "beforeunload", "unload", "focus", "blur", "online", "offline", "unhandledrejection", "rejectionhandled",
 ];
 const hostStorage = new Map();
 
@@ -93,14 +228,16 @@ function cssEscape(value) {
  * @param {{
  *   window: object, document: object, mode: "ses" | "host",
  *   hooks: {
- *     touch(): void, afterTask(): void,
+ *     touch(node?: object, stateFeatures?: string[]): void, afterTask(): void,
  *     boundsOf(element: object): { left: number, top: number, width: number, height: number } | null,
  *     viewport(): { width: number, height: number, scrollX: number, scrollY: number, devicePixelRatio: number },
  *     scrollTo(x: number, y: number): void,
  *     computedStyle(element: object): object | null,
+ *     customProperties?(element: object): Map<string, string> | null,
  *     navigate(url: string): void,
  *     activateLink?(anchor: object): void,
  *     fetchScript(url: string): Promise<string>,
+ *     rewriteScript?: ((source: string) => Promise<{ code: string, parsed: boolean, strict: boolean }>) | null,
  *     reportError(message: string): void,
  *     consoleMessage?: ((level: string, text: string) => void) | null,
  *     lifecycle?: (name: "DOMContentLoaded" | "load") => void,
@@ -126,19 +263,27 @@ export function createPageRealm({ window, document, mode, hooks }) {
   let nextTimerId = 1;
   let disposed = false;
   let readyState = "loading";
-  // Navigation Timing 1 (performance.timing): epoch milliseconds on the same
-  // timeline as performance.now(). Phases this document has not reached yet
-  // read 0, as in browsers; the fetch phases all collapse onto the start.
-  const timingStart = Math.round(hostPerformance.timeOrigin);
-  const timingMarks = { domLoading: Math.round(hostPerformance.timeOrigin + hostPerformance.now()) };
+  // A document gets a fresh high-resolution time origin. Bun's
+  // performance.now() is relative to the renderer process, which is commonly
+  // pre-warmed several seconds before navigation. Page timestamps must use
+  // the document's timeline rather than include that pre-warm interval.
+  const documentStarted = hostPerformance.now();
+  const documentTimeOrigin = hostPerformance.timeOrigin + documentStarted;
+  const pageNow = () => hostPerformance.now() - documentStarted;
+  // Navigation Timing 1 (performance.timing): epoch milliseconds. Phases this
+  // document has not reached yet read 0; fetch phases collapse onto the start.
+  const timingStart = Math.round(documentTimeOrigin);
+  const timingMarks = { domLoading: Math.round(documentTimeOrigin) };
   const markTiming = (...names) => {
-    const now = Math.round(hostPerformance.timeOrigin + hostPerformance.now());
+    const now = Math.round(documentTimeOrigin + pageNow());
     for (const name of names) timingMarks[name] = now;
   };
   let parsingHead = false;
   let currentScript = null;
   let pageGlobal = null;
   let evaluate;
+  // Runs a classic script already prepared off the main thread (SES mode only).
+  let evaluatePrepared = null;
   let evaluateModuleCode;
   let importMap = null;
   const modules = new Map();
@@ -154,11 +299,16 @@ export function createPageRealm({ window, document, mode, hooks }) {
     hooks.reportError(message);
   };
 
+  // The document's MediaSource registry. Assigned before any script runs;
+  // runTask publishes it so URL.createObjectURL reaches this document.
+  let mediaScope = null;
+
   /** Runs page code as a task: errors are reported, then the renderer may update. */
   const runTask = (task) => {
     if (disposed) return undefined;
+    if (mediaScope) blobUrlFallback = mediaScope;
     try {
-      return task();
+      return blobUrlContext.run(mediaScope, () => asIncumbent(hooks.frames?.self, task));
     } catch (error) {
       reportError(error);
       return undefined;
@@ -181,12 +331,24 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const realm = new BindingRealm(window, {
     touch: hooks.touch,
     boundsOf: hooks.boundsOf,
+    computedStyle: hooks.computedStyle,
+    // The engine clock's reading when this document's timeline started (see pageNow).
+    timeOriginOffset: () => documentStarted,
     viewport: hooks.viewport,
     scrollTo: hooks.scrollTo,
+    elementScroll: hooks.elementScroll,
+    elementAt: hooks.elementAt,
+    setElementScroll: hooks.setElementScroll,
+    scrollIntoView: hooks.scrollIntoView,
     mediaState: hooks.mediaState,
     playMedia: hooks.playMedia,
     pauseMedia: hooks.pauseMedia,
     seekMedia: hooks.seekMedia,
+    attachMediaSrc: (element, value) => hooks.attachMediaSrc?.(element, value),
+    mediaReadyState: (element) => hooks.mediaReadyState?.(element) ?? 0,
+    mediaNetworkState: (element) => hooks.mediaNetworkState?.(element) ?? 0,
+    mediaError: (element) => hooks.mediaError?.(element) ?? null,
+    mediaBuffered: (element) => hooks.mediaBuffered?.(element) ?? { length: 0, start: 0, end: 0 },
     call: callPage,
     readyState: () => readyState,
     body: () => parsingHead ? null : document.body,
@@ -201,28 +363,257 @@ export function createPageRealm({ window, document, mode, hooks }) {
     inserted: (nodes) => startInsertedScripts(nodes),
     activateLink: (anchor) => hooks.activateLink?.(anchor),
     submitForm: (form, submitter) => hooks.submitForm?.(form, submitter),
+    contentWindow: (node) => messaging.contentWindow(node),
+    contentDocument: (node) => messaging.contentDocument(node),
     acceptEvent: (event) => !LIFECYCLE_EVENT_TYPES.has(event.type)
       || (event.target !== window && event.target !== document)
       || lifecycleEvents.has(event),
   });
   const eventTargets = eventTargetConstructor(realm,
-    (value) => value === pageGlobal || Boolean(nodeOf(value)));
+    (value) => value === pageGlobal || Boolean(nodeOf(value)),
+    (value) => value === pageGlobal ? window : nodeOf(value));
   const documentBinding = realm.wrap(document);
   const NodeInterface = function Node() { throw new TypeError("Illegal constructor"); };
-  NodeInterface.prototype = mutableBindingPrototype(INTERFACES.Node.prototype);
+  // Node.prototype inherits EventTarget.prototype (DOM §4.4), as Window.prototype does.
+  NodeInterface.prototype = mutableBindingPrototype(INTERFACES.Node.prototype, eventTargets.EventTarget.prototype);
+  const WindowInterface = function Window() { throw new TypeError("Illegal constructor"); };
+  WindowInterface.prototype = Object.create(eventTargets.EventTarget.prototype);
+  Object.defineProperty(WindowInterface.prototype, "constructor", { value: WindowInterface, writable: true, configurable: true });
+  Object.defineProperty(WindowInterface, Symbol.hasInstance, { value: (value) => value === pageGlobal });
   Object.defineProperty(NodeInterface.prototype, "constructor", { value: NodeInterface, writable: true, configurable: true });
+  // Node.ELEMENT_NODE, Node.DOCUMENT_POSITION_FOLLOWING, ...
+  for (const name of Object.keys(INTERFACES.Node)) {
+    if (/^[A-Z_]+$/.test(name)) Object.defineProperty(NodeInterface, name, { value: INTERFACES.Node[name], enumerable: true });
+  }
   realm.nodePrototype = NodeInterface.prototype;
   const parentPrototype = mutableBindingPrototype(Object.getPrototypeOf(INTERFACES.Element.prototype), NodeInterface.prototype);
+  // The ParentNode mixin's members (children, querySelector, append, ...) are
+  // own properties of Element.prototype, Document.prototype and
+  // DocumentFragment.prototype, as WebIDL places them: ShadyDOM saves the
+  // native accessors with Object.getOwnPropertyDescriptor on each of them.
+  const withParentNodeMembers = (prototype) => {
+    for (const key of Reflect.ownKeys(parentPrototype)) {
+      if (key !== "constructor" && !Object.hasOwn(prototype, key)) {
+        Object.defineProperty(prototype, key, Object.getOwnPropertyDescriptor(parentPrototype, key));
+      }
+    }
+    return prototype;
+  };
   const ElementInterface = function Element() { throw new TypeError("Illegal constructor"); };
-  ElementInterface.prototype = mutableBindingPrototype(INTERFACES.Element.prototype, parentPrototype);
+  ElementInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.Element.prototype, parentPrototype));
   Object.defineProperty(ElementInterface.prototype, "constructor", { value: ElementInterface, writable: true, configurable: true });
   const HTMLElementInterface = function HTMLElement() {
     if (!new.target || !constructingElement) throw new TypeError("Illegal constructor");
     return realm.wrap(constructingElement);
   };
-  HTMLElementInterface.prototype = mutableBindingPrototype(ElementInterface.prototype);
+  // HTMLElement.prototype inherits Element's members rather than copying
+  // them, so what a page patches on Element.prototype (custom element
+  // polyfills wrap setAttribute, appendChild...) reaches HTML elements; the
+  // members HTMLElement itself defines move there.
+  HTMLElementInterface.prototype = Object.create(ElementInterface.prototype);
+  for (const key of Reflect.ownKeys(ElementInterface.prototype)) {
+    if (typeof key !== "string" || !(HTML_ELEMENT_MEMBERS.has(key) || key.startsWith("on"))) continue;
+    Object.defineProperty(HTMLElementInterface.prototype, key, Object.getOwnPropertyDescriptor(ElementInterface.prototype, key));
+    delete ElementInterface.prototype[key];
+  }
   Object.defineProperty(HTMLElementInterface.prototype, "constructor", { value: HTMLElementInterface, writable: true, configurable: true });
   realm.elementPrototype = HTMLElementInterface.prototype;
+  // HTMLDivElement.prototype, HTMLSlotElement.prototype, ...: each HTML
+  // element's wrapper inherits its interface's prototype, so what a page adds
+  // there (ShadyDOM patches HTMLSlotElement.prototype) reaches its elements.
+  const elementInterfacePrototypes = new Map();
+  const tagPrototypes = new Map();
+  const mediaPrototype = Object.create(HTMLElementInterface.prototype);
+  elementInterfacePrototypes.set("HTMLMediaElement", mediaPrototype);
+  for (const [name, tags] of Object.entries(ELEMENT_INTERFACES)) {
+    if (name === "HTMLMediaElement") continue;
+    const prototype = Object.create(tags.every((tag) => ELEMENT_INTERFACES.HTMLMediaElement.includes(tag))
+      ? mediaPrototype : HTMLElementInterface.prototype);
+    elementInterfacePrototypes.set(name, prototype);
+    for (const tag of tags) tagPrototypes.set(tag, prototype);
+  }
+  for (const [key, names] of Object.entries(INTERFACE_MEMBERS)) {
+    const descriptor = Object.getOwnPropertyDescriptor(ElementInterface.prototype, key);
+    if (!descriptor) continue;
+    for (const name of names) {
+      const prototype = elementInterfacePrototypes.get(name);
+      // HTMLMediaElement's members reach audio and video through it.
+      if (prototype && !Object.hasOwn(prototype, key)) Object.defineProperty(prototype, key, descriptor);
+    }
+    delete ElementInterface.prototype[key];
+  }
+  const unknownPrototype = Object.create(HTMLElementInterface.prototype);
+  elementInterfacePrototypes.set("HTMLUnknownElement", unknownPrototype);
+  const isUnknownElement = (node) => node.namespaceURI === HTML_NAMESPACE && !tagPrototypes.has(node.tagName)
+    && !PLAIN_HTML_ELEMENTS.has(node.tagName) && !node.localName.includes("-");
+  realm.elementPrototypeOf = (node) => {
+    if (node.namespaceURI !== HTML_NAMESPACE) return HTMLElementInterface.prototype;
+    return tagPrototypes.get(node.tagName) ?? (isUnknownElement(node) ? unknownPrototype : HTMLElementInterface.prototype);
+  };
+  for (const [name, attributes] of Object.entries(REFLECTED_ATTRIBUTES)) {
+    const prototype = elementInterfacePrototypes.get(name);
+    for (const [key, [attribute, type]] of Object.entries(attributes)) {
+      const read = (element) => {
+        const value = nodeOf(element).getAttribute(attribute);
+        if (type === "string") return attribute === "fetchpriority" ? (["high", "low"].includes(value) ? value : "auto") : value ?? "";
+        const number = /^\s*\d+/.exec(value ?? "") ? Number.parseInt(value, 10) : 0;
+        return number >= 0 && number <= 2147483647 ? number : 0;
+      };
+      Object.defineProperty(prototype, key, {
+        configurable: true,
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor({ get [key]() { return read(this); } }, key).get,
+        set: Object.getOwnPropertyDescriptor({ set [key](value) {
+          nodeOf(this).setAttribute(attribute, String(type === "unsigned" ? Number(value) >>> 0 : value));
+          realm.hooks.touch(nodeOf(this));
+        } }, key).set,
+      });
+    }
+  }
+  // Interface-specific attributes Happy DOM implements (HTMLImageElement's
+  // complete, naturalWidth, useMap, decoding...): each interface prototype
+  // gets an accessor reading and writing the node. Only attributes whose
+  // values are primitives are exposed this way; an engine object never
+  // reaches the page through them.
+  const interfaceOrder = Object.entries(ELEMENT_INTERFACES).sort(([a], [b]) => (b === "HTMLMediaElement") - (a === "HTMLMediaElement"));
+  for (const [name, tags] of interfaceOrder) {
+    const prototype = elementInterfacePrototypes.get(name);
+    const EngineInterface = window[name];
+    if (!prototype || typeof EngineInterface !== "function" || !tags.length) continue;
+    let sample;
+    let sampleWrapper;
+    try {
+      sample = document.createElement(tags[0].toLowerCase());
+      sampleWrapper = Object.setPrototypeOf(realm.wrap(sample), prototype);
+    } catch {
+      continue;
+    }
+    const stop = window.HTMLElement?.prototype;
+    for (let engine = EngineInterface.prototype; engine && engine !== stop; engine = Object.getPrototypeOf(engine)) {
+      for (const key of Object.getOwnPropertyNames(engine)) {
+        if (key === "constructor" || /^on/.test(key) || Object.hasOwn(prototype, key)) continue;
+        const descriptor = Object.getOwnPropertyDescriptor(engine, key);
+        if (!descriptor?.get) continue;
+        let value;
+        try {
+          value = descriptor.get.call(sample);
+        } catch {
+          continue;
+        }
+        // null is only a value of nullable string attributes; elsewhere it stands for an object.
+        if (value === null ? !NULLABLE_STRING_ATTRIBUTES.has(key) : !["string", "number", "boolean"].includes(typeof value)) continue;
+        // The bindings' own members (contentWindow, value, ...) stay, unless
+        // they are another element's and read undefined here (img.name).
+        if (key in prototype) {
+          let own;
+          try {
+            own = Reflect.get(prototype, key, sampleWrapper);
+          } catch {
+            continue;
+          }
+          if (own !== undefined) continue;
+        }
+        const { get, set } = descriptor;
+        Object.defineProperty(prototype, key, {
+          configurable: true,
+          enumerable: true,
+          get: Object.getOwnPropertyDescriptor({ get [key]() {
+            const result = get.call(nodeOf(this));
+            return result === null || ["string", "number", "boolean"].includes(typeof result) ? result : null;
+          } }, key).get,
+          set: set ? Object.getOwnPropertyDescriptor({ set [key](next) {
+            const node = nodeOf(this);
+            set.call(node, next === null || typeof next !== "object" ? next : String(next));
+            realm.hooks.touch(node);
+          } }, key).set : undefined,
+        });
+      }
+    }
+  }
+  // HTMLCanvasElement width/height are the bitmap size (default 300×150), and
+  // getContext("2d") is how pages sample colours and draw. Other elements do
+  // not inherit these.
+  const canvasPrototype = elementInterfacePrototypes.get("HTMLCanvasElement");
+  for (const name of ["width", "height"]) {
+    Object.defineProperty(canvasPrototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return nodeOf(this)[name];
+      },
+      set(value) {
+        const node = nodeOf(this);
+        node[name] = value >>> 0;
+        resetCanvas(node);
+        realm.hooks.touch(node);
+      },
+    });
+  }
+  Object.defineProperty(canvasPrototype, "getContext", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value(type) {
+      return canvasContext(nodeOf(this), String(type));
+    },
+  });
+  // HTMLMediaElement. HAVE_* / NETWORK_* / MEDIA_ERR_* live on the prototype
+  // and on the interface object (feature checks read either place).
+  const MEDIA_CONSTANTS = {
+    HAVE_NOTHING: 0, HAVE_METADATA: 1, HAVE_CURRENT_DATA: 2, HAVE_FUTURE_DATA: 3, HAVE_ENOUGH_DATA: 4,
+    NETWORK_EMPTY: 0, NETWORK_IDLE: 1, NETWORK_LOADING: 2, NETWORK_NO_SOURCE: 3,
+    MEDIA_ERR_ABORTED: 1, MEDIA_ERR_NETWORK: 2, MEDIA_ERR_DECODE: 3, MEDIA_ERR_SRC_NOT_SUPPORTED: 4,
+  };
+  for (const [name, value] of Object.entries(MEDIA_CONSTANTS)) {
+    Object.defineProperty(mediaPrototype, name, { value, enumerable: true });
+  }
+  const mediaSrcObjects = new WeakMap();
+  const mediaTimeRanges = (range) => ({
+    length: range.length,
+    start(index) {
+      if (index !== 0 || !range.length) throw new DOMException("The index provided is out of range.", "IndexSizeError");
+      return range.start;
+    },
+    end(index) {
+      if (index !== 0 || !range.length) throw new DOMException("The index provided is out of range.", "IndexSizeError");
+      return range.end;
+    },
+  });
+  for (const [name, get] of Object.entries({
+    readyState: (node) => realm.hooks.mediaReadyState?.(node) ?? 0,
+    networkState: (node) => realm.hooks.mediaNetworkState?.(node) ?? 0,
+    error: (node) => realm.hooks.mediaError?.(node) ?? null,
+    buffered: (node) => mediaTimeRanges(realm.hooks.mediaBuffered?.(node) ?? { length: 0, start: 0, end: 0 }),
+  })) {
+    Object.defineProperty(mediaPrototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return get(nodeOf(this));
+      },
+    });
+  }
+  const videoPrototype = elementInterfacePrototypes.get("HTMLVideoElement");
+  for (const name of ["videoWidth", "videoHeight"]) {
+    Object.defineProperty(videoPrototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return realm.hooks.mediaState?.(nodeOf(this))?.[name] ?? 0;
+      },
+    });
+  }
+  Object.defineProperty(mediaPrototype, "srcObject", {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return mediaSrcObjects.get(this) ?? null;
+    },
+    set(value) {
+      mediaSrcObjects.set(this, value);
+      realm.hooks.attachMediaSrc?.(nodeOf(this), value);
+    },
+  });
   const TextInterface = function Text() { throw new TypeError("Illegal constructor"); };
   const CharacterDataInterface = function CharacterData() { throw new TypeError("Illegal constructor"); };
   CharacterDataInterface.prototype = mutableBindingPrototype(INTERFACES.CharacterData.prototype, NodeInterface.prototype);
@@ -232,15 +623,36 @@ export function createPageRealm({ window, document, mode, hooks }) {
   Object.defineProperty(TextInterface.prototype, "constructor", { value: TextInterface, writable: true, configurable: true });
   realm.textPrototype = TextInterface.prototype;
   const DocumentFragmentInterface = function DocumentFragment() { throw new TypeError("Illegal constructor"); };
-  DocumentFragmentInterface.prototype = mutableBindingPrototype(INTERFACES.DocumentFragment.prototype, parentPrototype);
+  DocumentFragmentInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.DocumentFragment.prototype, parentPrototype));
   Object.defineProperty(DocumentFragmentInterface.prototype, "constructor", { value: DocumentFragmentInterface, writable: true, configurable: true });
   realm.fragmentPrototype = DocumentFragmentInterface.prototype;
   realm.shadowRootPrototype = mutableBindingPrototype(INTERFACES.ShadowRoot.prototype, DocumentFragmentInterface.prototype);
   const DocumentInterface = function Document() { throw new TypeError("Illegal constructor"); };
-  DocumentInterface.prototype = mutableBindingPrototype(INTERFACES.Document.prototype, parentPrototype);
+  DocumentInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.Document.prototype, parentPrototype));
   Object.defineProperty(DocumentInterface.prototype, "constructor", { value: DocumentInterface, writable: true, configurable: true });
   Object.setPrototypeOf(documentBinding, DocumentInterface.prototype);
 
+  /** In an iframe's document, parent and top are the embedding frames' windows. */
+  const defineFrameWindows = (global) => {
+    const parent = messaging.parent;
+    const top = messaging.top;
+    if (parent) Object.defineProperty(global, "parent", { value: parent, writable: true, configurable: true });
+    if (top) Object.defineProperty(global, "top", { value: top, writable: true, configurable: true });
+    Object.defineProperty(global, "frames", { value: messaging.framesOf(global), writable: true, configurable: true });
+    // window.name is the frame's (browsing context's) name.
+    const self = hooks.frames?.self;
+    let ownName = "";
+    Object.defineProperty(global, "name", {
+      get: () => self ? self.name() : ownName,
+      set: (value) => {
+        if (self) self.setName(value);
+        else ownName = String(value);
+      },
+      enumerable: true,
+      configurable: true,
+    });
+  };
+
   const fireLifecycle = (target, event) => {
     lifecycleEvents.add(event);
     target.dispatchEvent(event);
@@ -275,13 +687,33 @@ export function createPageRealm({ window, document, mode, hooks }) {
       hooks.consoleMessage?.(level, text);
     },
   ]));
-  pageConsole.table = pageConsole.log;
-  pageConsole.dir = pageConsole.log;
-  pageConsole.group = pageConsole.log;
-  pageConsole.groupEnd = () => {};
-  pageConsole.assert = (condition, ...args) => {
+  // Each console method is its own function, as in browsers (and each prints
+  // its own name). Grouping, timing and counting log a line or nothing.
+  for (const name of ["table", "dir", "dirxml", "group", "groupCollapsed"]) {
+    pageConsole[name] = (...args) => pageConsole.log(...args);
+  }
+  for (const name of ["groupEnd", "clear", "profile", "profileEnd", "timeStamp"]) pageConsole[name] = () => {};
+  const consoleCounts = new Map();
+  const consoleTimers = new Map();
+  pageConsole.count = (label = "default") => {
+    const count = (consoleCounts.get(String(label)) ?? 0) + 1;
+    consoleCounts.set(String(label), count);
+    pageConsole.info(`${label}: ${count}`);
+  };
+  pageConsole.countReset = (label = "default") => { consoleCounts.delete(String(label)); };
+  pageConsole.time = (label = "default") => { consoleTimers.set(String(label), hostPerformance.now()); };
+  pageConsole.timeLog = (label = "default", ...args) => {
+    const start = consoleTimers.get(String(label));
+    if (start !== undefined) pageConsole.info(`${label}: ${hostPerformance.now() - start} ms`, ...args);
+  };
+  pageConsole.timeEnd = (label = "default") => {
+    pageConsole.timeLog(label);
+    consoleTimers.delete(String(label));
+  };
+  pageConsole.assert = (condition = undefined, ...args) => {
     if (!condition) pageConsole.error("Assertion failed:", ...args);
   };
+  Object.defineProperty(pageConsole, Symbol.toStringTag, { value: "console", configurable: true });
 
   /**
    * MutationObserver wraps Happy DOM's implementation (records carry node
@@ -357,7 +789,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       const visible = rect.top < height && rect.top + rect.height > 0 && rect.left < width && rect.left + rect.width > 0;
       return {
         target,
-        time: hostPerformance.now(),
+        time: pageNow(),
         isIntersecting: visible,
         intersectionRatio: visible ? 1 : 0,
         boundingClientRect: rectangle(rect),
@@ -374,17 +806,166 @@ export function createPageRealm({ window, document, mode, hooks }) {
    * URLs are read locally. Bodies are normalised with Bun's Response, which
    * also yields the right Content-Type (multipart boundaries included).
    */
+  /**
+   * performance (High Resolution Time, User Timing 3): marks and measures the
+   * page records, and PerformanceObserver for them. Other entry types
+   * (resource, paint, long tasks) are not recorded; observers of them stay quiet.
+   */
+  function userTimingApi() {
+    const entries = [];
+    const observers = new Set();
+    const SUPPORTED = Object.freeze(["mark", "measure"]);
+    const entry = (entryType, name, startTime, duration, detail) => Object.freeze({
+      entryType, name, startTime, duration, detail: detail ?? null,
+      toJSON() { return { entryType, name, startTime, duration, detail: detail ?? null }; },
+    });
+    // Observers get their entries in a task of their own, batched.
+    const schedule = (observer) => {
+      if (observer.scheduled) return;
+      observer.scheduled = true;
+      hostSetTimeout(() => runTask(() => {
+        observer.scheduled = false;
+        const list = observer.buffer.splice(0);
+        if (!list.length || !observers.has(observer)) return;
+        callPage(observer.callback, observer.wrapper, [entryList(list), observer.wrapper]);
+      }), 0);
+    };
+    const notify = (recorded) => {
+      for (const observer of observers) {
+        if (!observer.types.has(recorded.entryType)) continue;
+        observer.buffer.push(recorded);
+        schedule(observer);
+      }
+    };
+    const record = (recorded) => {
+      entries.push(recorded);
+      if (entries.length > 10_000) entries.shift();
+      notify(recorded);
+      return recorded;
+    };
+    const markTime = (value, fallback) => {
+      if (value === undefined || value === null) return fallback;
+      if (typeof value === "number") return value;
+      const found = entries.findLast((candidate) => candidate.entryType === "mark" && candidate.name === String(value));
+      if (!found) throw new DOMException(`The mark '${value}' does not exist.`, "SyntaxError");
+      return found.startTime;
+    };
+    const entryList = (list) => Object.freeze({
+      getEntries: () => [...list],
+      getEntriesByType: (type) => list.filter((candidate) => candidate.entryType === String(type)),
+      getEntriesByName: (name, type = undefined) => list.filter((candidate) => candidate.name === String(name)
+        && (type === undefined || candidate.entryType === String(type))),
+    });
+    const performance = {
+      now: pageNow,
+      timeOrigin: documentTimeOrigin,
+      timing: navigationTiming(timingStart, timingMarks),
+      navigation: Object.freeze({ type: 0, redirectCount: 0, TYPE_NAVIGATE: 0, TYPE_RELOAD: 1, TYPE_BACK_FORWARD: 2, TYPE_RESERVED: 255 }),
+      mark(name, options = undefined) {
+        return record(entry("mark", String(name), options?.startTime ?? pageNow(), 0, options?.detail));
+      },
+      measure(name, start = undefined, end = undefined) {
+        const options = typeof start === "object" && start !== null ? start : null;
+        const now = pageNow();
+        const startTime = markTime(options ? options.start : start, 0);
+        const endTime = options?.duration !== undefined && options.end === undefined
+          ? startTime + Number(options.duration)
+          : markTime(options ? options.end : end, now);
+        return record(entry("measure", String(name), startTime, endTime - startTime, options?.detail));
+      },
+      clearMarks(name = undefined) {
+        for (let index = entries.length - 1; index >= 0; index--) {
+          if (entries[index].entryType === "mark" && (name === undefined || entries[index].name === String(name))) entries.splice(index, 1);
+        }
+      },
+      clearMeasures(name = undefined) {
+        for (let index = entries.length - 1; index >= 0; index--) {
+          if (entries[index].entryType === "measure" && (name === undefined || entries[index].name === String(name))) entries.splice(index, 1);
+        }
+      },
+      clearResourceTimings() {},
+      setResourceTimingBufferSize(maxSize) {},
+      getEntries: () => [...entries],
+      getEntriesByType: (type) => entries.filter((candidate) => candidate.entryType === String(type)),
+      getEntriesByName: (name, type = undefined) => entries.filter((candidate) => candidate.name === String(name)
+        && (type === undefined || candidate.entryType === String(type))),
+      toJSON: () => ({ timeOrigin: documentTimeOrigin }),
+    };
+    function PerformanceObserver(callback) {
+      if (!new.target) throw new TypeError("Constructor PerformanceObserver requires 'new'");
+      if (typeof callback !== "function") throw new TypeError("PerformanceObserver: callback is not a function");
+      const wrapper = this;
+      const state = { callback, wrapper, types: new Set(), buffer: [], scheduled: false };
+      Object.defineProperties(this, {
+        observe: {
+          value(options = {}) {
+            const types = options.type !== undefined ? [String(options.type)] : [...(options.entryTypes ?? [])].map(String);
+            for (const type of types) state.types.add(type);
+            observers.add(state);
+            if (options.buffered && options.type !== undefined) {
+              for (const existing of entries) if (state.types.has(existing.entryType)) state.buffer.push(existing);
+              if (state.buffer.length) schedule(state);
+            }
+          },
+        },
+        disconnect: { value() { observers.delete(state); state.buffer.length = 0; } },
+        takeRecords: { value: () => state.buffer.splice(0) },
+      });
+    }
+    Object.defineProperty(PerformanceObserver, "supportedEntryTypes", { value: SUPPORTED });
+    return { performance, PerformanceObserver };
+  }
+
   function networkApi() {
     const abortError = () => new DOMException("The operation was aborted.", "AbortError");
+    const baseUrl = () => document.baseURI || document.URL;
+
+    // new Request("/api") resolves against the document's base URL (Fetch
+    // §5.4), which the host's Request has no document to do.
+    const PageRequest = class Request extends globalThis.Request {
+      constructor(input, init = undefined) {
+        super(input instanceof globalThis.Request ? input : new URL(String(input), baseUrl()).href, init);
+        // Fetch §5.4 step 36: a string body gives the request its Content-Type
+        // (Bun's Request only does this for the other body kinds).
+        if (typeof init?.body === "string" && !this.headers.has("content-type")) {
+          this.headers.set("content-type", "text/plain;charset=UTF-8");
+        }
+      }
+    };
+
+    // fetch(request) reads the Request's internal state, as Chromium's
+    // Request::CreateRequestWithRequestOrString does with GetRequest(). Page
+    // script may shadow url, method or bodyUsed on the instance; that changes
+    // what script reads, not what is fetched.
+    const requestSlot = (name) => {
+      const get = Object.getOwnPropertyDescriptor(globalThis.Request.prototype, name).get;
+      return (request) => get.call(request);
+    };
+    const slots = Object.fromEntries(["url", "method", "headers", "mode", "credentials", "redirect", "signal", "bodyUsed"]
+      .map((name) => [name, requestSlot(name)]));
+    const cloneRequest = globalThis.Request.prototype.clone;
+    /** The input when it is a platform Request (a brand check, not instanceof). */
+    const platformRequest = (input) => {
+      if (input === null || typeof input !== "object") return null;
+      try {
+        slots.url(input);
+        return input;
+      } catch {
+        return null;
+      }
+    };
 
     async function describeRequest(input, init = {}) {
-      const source = input instanceof Request ? input : null;
-      const url = new URL(source ? source.url : String(input), document.URL);
-      const method = String(init.method ?? source?.method ?? "GET").toUpperCase();
-      const headers = new Headers(init.headers ?? source?.headers ?? undefined);
+      const source = platformRequest(input);
+      if (source && init.body === undefined && slots.bodyUsed(source)) {
+        throw new TypeError("Cannot construct a Request with a Request object that has already been used.");
+      }
+      const url = new URL(source ? slots.url(source) : String(input), baseUrl());
+      const method = String(init.method ?? (source ? slots.method(source) : "GET")).toUpperCase();
+      const headers = new Headers(init.headers ?? (source ? slots.headers(source) : undefined));
       let body = null;
       const bodyInit = init.body !== undefined ? init.body : source && !["GET", "HEAD"].includes(method)
-        ? await source.clone().arrayBuffer() : null;
+        ? await cloneRequest.call(source).arrayBuffer() : null;
       if (bodyInit !== null && bodyInit !== undefined) {
         if (["GET", "HEAD"].includes(method)) throw new TypeError("Request with GET/HEAD method cannot have body.");
         const normalized = new Response(bodyInit);
@@ -400,22 +981,18 @@ export function createPageRealm({ window, document, mode, hooks }) {
         method,
         headers: [...headers],
         body,
-        mode: init.mode ?? source?.mode ?? "cors",
-        credentials: init.credentials ?? source?.credentials ?? "same-origin",
-        redirect: init.redirect ?? source?.redirect ?? "follow",
-        signal: init.signal ?? source?.signal ?? null,
+        mode: init.mode ?? (source ? slots.mode(source) : "cors"),
+        credentials: init.credentials ?? (source ? slots.credentials(source) : "same-origin"),
+        redirect: init.redirect ?? (source ? slots.redirect(source) : "follow"),
+        signal: init.signal ?? (source ? slots.signal(source) : null),
       };
     }
 
     function makeResponse(data) {
-      const bytes = data.body instanceof Uint8Array ? data.body : new Uint8Array(0);
       const headers = new Headers(data.headers ?? []);
-      let used = false;
-      const read = () => {
-        if (used) return Promise.reject(new TypeError("Body has already been used"));
-        used = true;
-        return Promise.resolve(new Response(bytes, { headers: { "content-type": headers.get("content-type") ?? "" } }));
-      };
+      const body = data.body instanceof ReadableStream ? data.body
+        : data.body instanceof Uint8Array ? data.body : new Uint8Array(0);
+      const native = new Response(body, { headers: { "content-type": headers.get("content-type") ?? "" } });
       const response = {
         type: data.type ?? "basic",
         url: data.url ?? "",
@@ -425,20 +1002,20 @@ export function createPageRealm({ window, document, mode, hooks }) {
         statusText: data.statusText ?? "",
         headers,
         get bodyUsed() {
-          return used;
+          return native.bodyUsed;
         },
         get body() {
-          return used ? null : new Response(bytes).body;
+          return native.body;
         },
-        text: () => read().then((body) => body.text()),
-        json: () => read().then((body) => body.json()),
-        arrayBuffer: () => read().then((body) => body.arrayBuffer()),
-        blob: () => read().then((body) => body.blob()),
-        formData: () => read().then((body) => body.formData()),
-        bytes: () => read().then((body) => body.bytes()),
+        text: () => native.text(),
+        json: () => native.json(),
+        arrayBuffer: () => native.arrayBuffer(),
+        blob: () => native.blob(),
+        formData: () => native.formData(),
+        bytes: () => native.bytes(),
         clone: () => {
-          if (used) throw new TypeError("Body has already been used");
-          return makeResponse(data);
+          const copy = native.clone();
+          return makeResponse({ ...data, body: copy.body });
         },
       };
       return response;
@@ -450,16 +1027,29 @@ export function createPageRealm({ window, document, mode, hooks }) {
       if (signal?.aborted) throw abortError();
       const scheme = new URL(request.url).protocol;
       let pending;
+      let networkPending = null;
       if (scheme === "data:" || scheme === "blob:") {
-        pending = fetch(request.url).then(async (local) => ({
-          type: "basic", url: request.url, status: local.status, statusText: local.statusText,
-          headers: [...local.headers], body: new Uint8Array(await local.arrayBuffer()),
-        }));
+        const stored = scheme === "blob:" ? mediaScope?.lookup(request.url) : null;
+        if (stored?.kind === "media-source") {
+          pending = Promise.reject(new TypeError("Failed to fetch"));
+        } else if (stored?.kind === "blob") {
+          pending = stored.blob.arrayBuffer().then((buffer) => ({
+            type: "basic", url: request.url, status: 200, statusText: "OK",
+            headers: [["content-type", stored.blob.type || ""]],
+            body: new Uint8Array(buffer),
+          }));
+        } else {
+          pending = fetch(request.url).then(async (local) => ({
+            type: "basic", url: request.url, status: local.status, statusText: local.statusText,
+            headers: [...local.headers], body: new Uint8Array(await local.arrayBuffer()),
+          }));
+        }
       } else {
         const { signal: _signal, ...plain } = request;
+        networkPending = hooks.pageFetch(plain);
         // Network and CORS failures reach the page as a bare TypeError, as in
         // browsers; the reason is only logged to the console.
-        pending = hooks.pageFetch(plain).catch((error) => {
+        pending = networkPending.catch((error) => {
           const text = `fetch ${plain.url}: ${error?.message ?? error}`;
           consoleEntries.push({ level: "error", text });
           hooks.consoleMessage?.("error", text);
@@ -467,7 +1057,10 @@ export function createPageRealm({ window, document, mode, hooks }) {
         });
       }
       const aborted = signal
-        ? new Promise((_, reject) => signal.addEventListener("abort", () => reject(abortError()), { once: true }))
+        ? new Promise((_, reject) => signal.addEventListener("abort", () => {
+          networkPending?.abort?.();
+          reject(abortError());
+        }, { once: true }))
         : null;
       const data = await (aborted ? Promise.race([pending, aborted]) : pending);
       hooks.afterTask();
@@ -501,7 +1094,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
             throw new DOMException("Synchronous XMLHttpRequest is not supported", "InvalidAccessError");
           }
           method = String(requestMethod).toUpperCase();
-          url = new URL(String(requestUrl), document.URL).href;
+          url = new URL(String(requestUrl), baseUrl()).href;
           setState(1);
         },
         setRequestHeader(name, value) {
@@ -591,7 +1184,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       if (!new.target) throw new TypeError("Constructor WebSocket requires 'new'");
       let target;
       try {
-        target = new URL(String(url), document.URL);
+        target = new URL(String(url), baseUrl());
       } catch {
         throw new DOMException(`Failed to construct 'WebSocket': The URL '${url}' is invalid.`, "SyntaxError");
       }
@@ -659,7 +1252,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       });
       function fire(type, fields = {}) {
         const event = { type, target: socket, currentTarget: socket, isTrusted: true, bubbles: false, cancelable: false,
-          defaultPrevented: false, timeStamp: performance.now(), preventDefault() {}, stopPropagation() {},
+          defaultPrevented: false, timeStamp: pageNow(), preventDefault() {}, stopPropagation() {},
           stopImmediatePropagation() {}, ...fields };
         runTask(() => {
           if (typeof socket[`on${type}`] === "function") callPage(socket[`on${type}`], socket, [event]);
@@ -711,11 +1304,12 @@ export function createPageRealm({ window, document, mode, hooks }) {
     XMLHttpRequest.DONE = 4;
 
     return {
-      fetch: pageFetch,
+      // A plain function: Web IDL operations are not async functions.
+      fetch: function fetch(input, init = undefined) { return pageFetch(input, init); },
       XMLHttpRequest,
       WebSocket,
       Headers,
-      Request,
+      Request: PageRequest,
       Response,
       AbortController,
       AbortSignal,
@@ -746,98 +1340,188 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return Interface;
     };
     const interfaces = {
-      Window: make("Window", () => false),
+      Window: WindowInterface,
       EventTarget: eventTargets.EventTarget,
       Comment: make("Comment", (node) => node.nodeType === 8),
+      CDATASection: make("CDATASection", (node) => node.nodeType === 4),
+      ProcessingInstruction: make("ProcessingInstruction", (node) => node.nodeType === 7),
       DocumentType: make("DocumentType", (node) => node.nodeType === 10),
       ShadowRoot: make("ShadowRoot", (node) => node instanceof window.ShadowRoot),
       SVGElement: make("SVGElement", (node) => node.namespaceURI === SVG_NAMESPACE),
       SVGSVGElement: make("SVGSVGElement", (node) => node.namespaceURI === SVG_NAMESPACE && node.localName === "svg"),
-      HTMLUnknownElement: make("HTMLUnknownElement", () => false),
+      HTMLUnknownElement: make("HTMLUnknownElement", isUnknownElement),
     };
+    interfaces.HTMLUnknownElement.prototype = unknownPrototype;
+    Object.defineProperty(unknownPrototype, "constructor", { value: interfaces.HTMLUnknownElement, writable: true, configurable: true });
     for (const [name, tags] of Object.entries(ELEMENT_INTERFACES)) {
-      interfaces[name] = make(name, (node) => node.nodeType === 1 && tags.includes(node.tagName));
+      const Interface = make(name, (node) => node.nodeType === 1 && tags.includes(node.tagName));
+      Interface.prototype = elementInterfacePrototypes.get(name);
+      Object.defineProperty(Interface.prototype, "constructor", { value: Interface, writable: true, configurable: true });
+      if (name === "HTMLMediaElement") {
+        for (const [constant, value] of Object.entries(MEDIA_CONSTANTS)) {
+          Object.defineProperty(Interface, constant, { value, enumerable: true });
+        }
+      }
+      interfaces[name] = Interface;
     }
     return interfaces;
   }
 
+  class CSSRule {
+    constructor(cssText = "") {
+      this.cssText = String(cssText);
+    }
+  }
+  class CSSStyleRule extends CSSRule {}
+  class CSSGroupingRule extends CSSRule {}
+  class CSSStyleSheet {
+    constructor() {
+      this.cssRules = [];
+      this.disabled = false;
+      this.href = null;
+      this.media = { length: 0, mediaText: "", matches: () => false };
+      this.ownerNode = null;
+    }
+    replaceSync(text) {
+      const cssText = String(text);
+      this.cssRules = cssText.trim() ? [new CSSStyleRule(cssText)] : [];
+    }
+    async replace(text) {
+      this.replaceSync(text);
+      return this;
+    }
+    insertRule(rule, index = this.cssRules.length) {
+      const position = Number(index) >>> 0;
+      if (position > this.cssRules.length) throw new DOMException("Index out of range", "IndexSizeError");
+      this.cssRules.splice(position, 0, new CSSStyleRule(rule));
+      return position;
+    }
+    deleteRule(index) {
+      const position = Number(index) >>> 0;
+      if (position >= this.cssRules.length) throw new DOMException("Index out of range", "IndexSizeError");
+      this.cssRules.splice(position, 1);
+    }
+  }
+
+  // adoptedStyleSheets of the document and its shadow roots (CSSOM §6.6,
+  // the DocumentOrShadowRoot mixin): one array per node, so pushing to it
+  // works as on a browser's ObservableArray, and assignment replaces it.
+  // The sheets are kept for pages to read back; the style engine does not
+  // apply them yet.
+  const adoptedSheets = new WeakMap();
+  for (const [prototype, owner] of [[DocumentInterface.prototype, "Document"], [realm.shadowRootPrototype, "ShadowRoot"]]) {
+    const accessors = {
+      get adoptedStyleSheets() {
+        const node = nodeOf(this);
+        if (!node) throw new TypeError("Illegal invocation");
+        let sheets = adoptedSheets.get(node);
+        if (!sheets) adoptedSheets.set(node, sheets = []);
+        return sheets;
+      },
+      set adoptedStyleSheets(value) {
+        const node = nodeOf(this);
+        if (!node) throw new TypeError("Illegal invocation");
+        if (value === null || typeof value !== "object" || typeof value[Symbol.iterator] !== "function") {
+          throw new TypeError(`Failed to set the 'adoptedStyleSheets' property on '${owner}': The provided value cannot be converted to a sequence.`);
+        }
+        const sheets = [...value];
+        if (sheets.some((sheet) => !(sheet instanceof CSSStyleSheet))) {
+          throw new TypeError(`Failed to set the 'adoptedStyleSheets' property on '${owner}': Failed to convert value to 'CSSStyleSheet'.`);
+        }
+        adoptedSheets.set(node, sheets);
+      },
+    };
+    Object.defineProperty(prototype, "adoptedStyleSheets", {
+      ...Object.getOwnPropertyDescriptor(accessors, "adoptedStyleSheets"), enumerable: true, configurable: true,
+    });
+  }
+
   const origin = safeOrigin(document.URL);
   if (!hostStorage.has(origin)) hostStorage.set(origin, new Map());
+  mediaScope = createMediaSourceScope({
+    origin,
+    DOMException,
+    // Zero delay, as a page task, so listeners registered in the same turn
+    // (right after appendBuffer or setting src) still run.
+    schedule: (fn) => hostSetTimeout(() => runTask(fn), 0),
+    onAppend: (source) => hooks.mediaAppended?.(source),
+    onDuration: (source, duration) => hooks.mediaDuration?.(source, duration),
+  });
+  blobUrlFallback = mediaScope;
 
   const viewportValue = (key) => () => hooks.viewport()[key];
+  const userAgent = hooks.userAgent();
+  const chromeVersion = /(?:Chrome|Chromium)\/(\d+(?:\.\d+){0,3})/.exec(userAgent)?.[1] ?? "";
+  const chromeMajor = chromeVersion.split(".")[0];
+  const mobileUserAgent = /\bMobile\b/.test(userAgent);
+  const uaBrands = Object.freeze([
+    Object.freeze({ brand: "Not:A-Brand", version: "99" }),
+    Object.freeze({ brand: "Chromium", version: chromeMajor }),
+    Object.freeze({ brand: "Google Chrome", version: chromeMajor }),
+  ]);
+  const userAgentDataMembers = {
+    brands: uaBrands,
+    mobile: mobileUserAgent,
+    platform: /Android/.test(userAgent) ? "Android" : /Windows/.test(userAgent) ? "Windows" : /Macintosh/.test(userAgent) ? "macOS" : "Linux",
+    toJSON() { return { brands: uaBrands, mobile: mobileUserAgent, platform: this.platform }; },
+    getHighEntropyValues(hints = []) {
+      const values = this.toJSON();
+      const available = {
+        architecture: /(?:aarch64|arm64)/i.test(userAgent) ? "arm" : "x86",
+        bitness: "64", model: "", platformVersion: "", uaFullVersion: chromeVersion,
+        fullVersionList: uaBrands.map(({ brand, version }) => ({ brand, version: brand === "Not:A-Brand" ? version : chromeVersion })),
+        wow64: false,
+      };
+      for (const hint of hints) if (Object.hasOwn(available, hint)) values[hint] = available[hint];
+      return Promise.resolve(values);
+    },
+  };
   const { location, setHref } = locationBinding(document.URL, hooks.navigate);
   const { History, history, pushEntry } = historyBinding(location, setHref);
   const { Event, CustomEvent, ...uiEvents } = eventConstructors(realm);
   const observers = observerConstructors();
   const network = networkApi();
+  const userTiming = userTimingApi();
   const windowEvents = windowEventMethods(realm, null);
+  // postMessage, other frames' windows, MessageChannel (see messaging.js).
+  const messaging = createMessaging({
+    realm, window, pageGlobal: () => pageGlobal, runTask, callPage, DOMException, frames: hooks.frames ?? null,
+  });
+
+  const platform = platformObjects({
+    eventTargets, userAgent, userAgentDataMembers: chromeVersion ? userAgentDataMembers : null, mobile: mobileUserAgent, viewport: hooks.viewport,
+    performance: userTiming.performance, storages: { local: hostStorage.get(origin), session: new Map() },
+    sendBeacon: (url, data) => {
+      network.fetch(url, { method: "POST", body: data, mode: "no-cors", credentials: "include", keepalive: true })
+        .catch(() => {});
+      return true;
+    },
+  });
+
+  const trustedTypes = trustedTypesApi();
 
   /** Web APIs placed on the page's global object (bindings plus hardened host utilities). */
   const api = {
     document: documentBinding,
     location,
-    navigator: {
-      userAgent: hooks.userAgent(),
-      language: "en-US",
-      languages: ["en-US"],
-      platform: "Linux",
-      onLine: true,
-      cookieEnabled: false,
-      webdriver: false,
-      hardwareConcurrency: 1,
-      maxTouchPoints: 0,
-      sendBeacon: (url, data) => {
-        network.fetch(url, { method: "POST", body: data, mode: "no-cors", credentials: "include", keepalive: true })
-          .catch(() => {});
-        return true;
-      },
-    },
+    navigator: platform.navigator,
     History,
     history,
-    screen: {
-      get width() {
-        return hooks.viewport().width;
-      },
-      get height() {
-        return hooks.viewport().height;
-      },
-      colorDepth: 24,
-      pixelDepth: 24,
-    },
-    // No pinch zoom; `scale` is the --mobile scale-up (client CSS pixels per page CSS pixel).
-    visualViewport: {
-      offsetLeft: 0,
-      offsetTop: 0,
-      get pageLeft() {
-        return hooks.viewport().scrollX;
-      },
-      get pageTop() {
-        return hooks.viewport().scrollY;
-      },
-      get width() {
-        return hooks.viewport().width;
-      },
-      get height() {
-        return hooks.viewport().height;
-      },
-      get scale() {
-        return hooks.viewport().pageScale ?? 1;
-      },
-      addEventListener: () => {},
-      removeEventListener: () => {},
-    },
-    localStorage: storageBinding(hostStorage.get(origin)),
-    sessionStorage: storageBinding(new Map()),
+    screen: platform.screen,
+    visualViewport: platform.visualViewport,
+    localStorage: platform.localStorage,
+    sessionStorage: platform.sessionStorage,
     console: pageConsole,
     setTimeout: (handler, delay = 0, ...args) => schedule(handler, delay, args, false),
     setInterval: (handler, delay = 0, ...args) => schedule(handler, delay, args, true),
-    clearTimeout: cancel,
-    clearInterval: cancel,
-    requestAnimationFrame: (callback) => schedule(() => callPage(callback, pageGlobal, [hostPerformance.now()]), 16, [], false),
-    cancelAnimationFrame: cancel,
+    // Each is its own function with its Web IDL length (handles are optional for the clears).
+    clearTimeout: (id = undefined) => cancel(id),
+    clearInterval: (id = undefined) => cancel(id),
+    requestAnimationFrame: (callback) => schedule(() => callPage(callback, pageGlobal, [pageNow()]), 16, [], false),
+    cancelAnimationFrame: (handle) => cancel(handle),
     requestIdleCallback: (callback) => schedule(
       () => callPage(callback, pageGlobal, [{ didTimeout: false, timeRemaining: () => 10 }]), 1, [], false),
-    cancelIdleCallback: cancel,
+    cancelIdleCallback: (handle) => cancel(handle),
     queueMicrotask: (callback) => hostQueueMicrotask(() => runTask(() => callPage(callback, pageGlobal, []))),
     structuredClone: (value) => hostStructuredClone(value),
     atob: (value) => hostAtob(String(value)),
@@ -850,23 +1534,27 @@ export function createPageRealm({ window, document, mode, hooks }) {
     // hook. Resolve it through the same module loader and network boundary as
     // parser-inserted modules.
     __import__: (specifier) => importModule(String(specifier), currentScript?.src || document.URL),
-    performance: {
-      now: () => hostPerformance.now(),
-      timeOrigin: hostPerformance.timeOrigin,
-      timing: navigationTiming(timingStart, timingMarks),
-      navigation: Object.freeze({ type: 0, redirectCount: 0, TYPE_NAVIGATE: 0, TYPE_RELOAD: 1, TYPE_BACK_FORWARD: 2, TYPE_RESERVED: 255 }),
-      mark: () => {},
-      measure: () => {},
-      getEntriesByType: () => [],
-      getEntriesByName: () => [],
-    },
-    crypto: {
-      getRandomValues: (array) => hostCrypto.getRandomValues(array),
-      randomUUID: () => hostCrypto.randomUUID(),
-    },
+    performance: platform.performance,
+    PerformanceObserver: userTiming.PerformanceObserver,
+    crypto: platform.crypto,
+    ...platform.interfaces,
+    CSSStyleDeclaration: cssStyleDeclarationInterface(realm),
+    ...trustedTypes.interfaces,
+    trustedTypes: trustedTypes.trustedTypes,
     Event,
     CustomEvent,
     ...uiEvents,
+    Range: rangeConstructor(realm),
+    // new Audio(src): an <audio> element, not in the document (HTML §4.8.11).
+    Audio: function Audio(src = undefined) {
+      if (!new.target) throw new TypeError("Constructor Audio requires 'new'");
+      const audio = documentBinding.createElement("audio");
+      audio.setAttribute("preload", "auto");
+      if (src !== undefined) audio.setAttribute("src", String(src));
+      return audio;
+    },
+    MediaSource: mediaScope.MediaSource,
+    SourceBuffer: mediaScope.SourceBuffer,
     ...observers,
     ...network,
     CSS: {
@@ -881,6 +1569,10 @@ export function createPageRealm({ window, document, mode, hooks }) {
         return Boolean(style && (name in style || camel in style));
       },
     },
+    CSSRule,
+    CSSStyleRule,
+    CSSGroupingRule,
+    CSSStyleSheet,
     NodeFilter,
     // Collections are represented by snapshot arrays internally. Expose the
     // standard collection prototypes used by compatibility shims; their
@@ -946,7 +1638,15 @@ export function createPageRealm({ window, document, mode, hooks }) {
     addEventListener: windowEvents.addEventListener,
     removeEventListener: windowEvents.removeEventListener,
     dispatchEvent: windowEvents.dispatchEvent,
-    getComputedStyle: (element) => computedStyleBinding(hooks.computedStyle(nodeOf(element))),
+    getComputedStyle: (element) => {
+      const node = nodeOf(element);
+      const style = hooks.computedStyle(node);
+      return computedStyleBinding(style, {
+        custom: hooks.customProperties?.(node) ?? null,
+        bounds: style && style.display !== "none" && node?.isConnected ? hooks.boundsOf(node) : null,
+        element: node,
+      });
+    },
     getSelection: () => ({
       anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0,
       isCollapsed: true, rangeCount: 0, type: "None",
@@ -968,9 +1668,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
         removeEventListener: () => {},
       };
     },
-    scrollTo: (x, y) => scrollArguments(hooks, x, y, false),
-    scroll: (x, y) => scrollArguments(hooks, x, y, false),
-    scrollBy: (x, y) => scrollArguments(hooks, x, y, true),
+    scrollTo: (x = undefined, y = undefined) => scrollArguments(hooks, x, y, false),
+    scroll: (x = undefined, y = undefined) => scrollArguments(hooks, x, y, false),
+    scrollBy: (x = undefined, y = undefined) => scrollArguments(hooks, x, y, true),
     alert: () => {},
     confirm: () => false,
     prompt: () => null,
@@ -979,7 +1679,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
     blur: () => {},
     close: () => {},
     open: () => null,
-    postMessage: () => {},
+    postMessage: messaging.postMessage,
+    MessageChannel: messaging.MessageChannel,
+    MessagePort: messaging.MessagePort,
   };
   const accessors = {
     innerWidth: viewportValue("width"),
@@ -991,38 +1693,127 @@ export function createPageRealm({ window, document, mode, hooks }) {
     scrollY: viewportValue("scrollY"),
     pageXOffset: viewportValue("scrollX"),
     pageYOffset: viewportValue("scrollY"),
+    // The number of child frames (window[i] is not provided).
+    length: () => hooks.frames?.self.children().length ?? 0,
   };
 
+  let workers = null;
   if (mode === "ses") {
     hardenBindings();
+    // Dedicated workers get a compartment each, with these of the page's utilities.
+    workers = createWorkers({
+      realm, documentUrl: () => document.URL, fetchScript: hooks.fetchScript, runTask, callPage, reportError, DOMException,
+      constructorHelper,
+      pagePorts: messaging.ports,
+      globals: Object.fromEntries(["console", "atob", "btoa", "TextEncoder", "TextDecoder", "URL", "URLSearchParams",
+        "structuredClone", "performance", "crypto", "navigator", "fetch", "Headers", "Request", "Response", "Blob",
+        "File", "FormData", "AbortController", "AbortSignal", "DOMException"]
+        .filter((name) => api[name] !== undefined).map((name) => [name, api[name]])
+        .concat([["Math", Math], ["Date", Date], ["Intl", Intl], ...Object.entries(HOST_LANGUAGE_GLOBALS)])),
+    });
+    api.Worker = workers.Worker;
     // Host utilities are hardened before a page can see them: the engine
     // itself uses URL, TextEncoder and Intl, so pages must not change them.
-    for (const value of [TextEncoder, TextDecoder, URL, URLSearchParams, Intl, Float64Array, Headers, Request, Response,
-      AbortController, AbortSignal, FormData, Blob, File, DOMException, ReadableStream]) {
+    for (const value of [TextEncoder, TextDecoder, URL, URLSearchParams, Intl, Headers, Request, Response,
+      AbortController, AbortSignal, FormData, Blob, File, DOMException,
+      ...Object.values(HOST_LANGUAGE_GLOBALS), ...Object.values(HOST_STREAM_GLOBALS)]) {
       harden(value);
     }
     // Everything in `api` is created per document; only shared host classes
     // (above) and the binding classes need hardening.
     const compartment = new Compartment({
-      globals: { ...api, Math, Date, Intl, Float64Array },
+      globals: { ...api, Math, Date, Intl, ...HOST_LANGUAGE_GLOBALS, ...HOST_STREAM_GLOBALS },
       __options__: true,
     });
     pageGlobal = compartment.globalThis;
-    Object.defineProperty(pageGlobal, CONSTRUCTOR_HELPER, { value: constructorHelper(compartment) });
+    // SES's own globals are not Web APIs; a browser has none of them.
+    // (__import__ stays, hidden: SES rewrites import() in classic scripts to it.)
+    for (const name of ["Compartment", "harden", "lockdown", "assert"]) {
+      if (Object.getOwnPropertyDescriptor(pageGlobal, name)?.configurable) delete pageGlobal[name];
+    }
+    Object.defineProperty(pageGlobal, "__import__", { enumerable: false });
+    // window → Window.prototype → EventTarget.prototype, as in browsers.
+    Object.setPrototypeOf(pageGlobal, WindowInterface.prototype);
+    // Libraries wrap promise callbacks to propagate asynchronous context.
+    // Give each page its own methods while keeping SES's shared intrinsic frozen.
+    const PagePromise = compartment.evaluate("(class Promise extends globalThis.Promise {})");
+    const IntrinsicPromise = pageGlobal.Promise;
+    for (const name of ["then", "catch", "finally"]) {
+      Object.defineProperty(PagePromise.prototype, name, {
+        value: pageGlobal.Promise.prototype[name], writable: true, configurable: true,
+      });
+    }
+    // Promise's own statics and tag, as the intrinsic has them (inherited
+    // ones would work, but pages list own properties).
+    for (const key of Reflect.ownKeys(IntrinsicPromise)) {
+      if (["length", "name", "prototype"].includes(key)) continue;
+      Object.defineProperty(PagePromise, key, { ...Object.getOwnPropertyDescriptor(IntrinsicPromise, key), configurable: true });
+    }
+    Object.defineProperty(PagePromise.prototype, Symbol.toStringTag, { value: "Promise", configurable: true });
+    // async functions and host Web APIs still create intrinsic promises.
+    Object.defineProperty(PagePromise, Symbol.hasInstance, {
+      value(value) {
+        return Function.prototype[Symbol.hasInstance].call(this === PagePromise ? IntrinsicPromise : this, value);
+      }, configurable: true,
+    });
+    Object.defineProperty(PagePromise, "length", { value: 1, configurable: true });
+    pageGlobal.Promise = PagePromise;
+    // Namespace objects that libraries extend (reflect-metadata adds to
+    // Reflect, polyfills to JSON and Math): each page gets its own mutable
+    // copy with the same functions; the shared frozen intrinsics stay as they are.
+    for (const name of ["Reflect", "JSON", "Math"]) {
+      const shared = pageGlobal[name];
+      const descriptors = Object.getOwnPropertyDescriptors(shared);
+      for (const descriptor of Object.values(descriptors)) {
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+      }
+      Object.defineProperty(pageGlobal, name, {
+        value: Object.create(Object.getPrototypeOf(shared), descriptors), writable: true, configurable: true,
+      });
+    }
+    const helper = constructorHelper(compartment);
+    Object.defineProperty(pageGlobal, CONSTRUCTOR_HELPER, { value: helper });
+    // Indirect eval runs code as a classic script does: in the global scope,
+    // its var and function declarations becoming globals, and its own direct
+    // evals rewritten. A method has no prototype, like the built-in.
+    const pageEval = { eval(source) {
+      const code = typeof source === "string" ? source : trustedTypes.scriptText(source);
+      return code === undefined ? source : evaluate(code);
+    } }.eval;
+    Object.defineProperty(pageGlobal, "eval", { value: markNative(pageEval, "eval"), writable: true, configurable: true });
+    Object.defineProperty(pageGlobal, DIRECT_EVAL_HELPER, { value: directEvalHelper(compartment, pageGlobal, trustedTypes.scriptText) });
+    // A sloppy-mode function called without a receiver must see the page
+    // global, never the engine's: the rewrite routes every such `this` here.
+    const hostGlobal = globalThis;
+    Object.defineProperty(pageGlobal, THIS_HELPER, {
+      value: (value) => value === undefined || value === null || value === hostGlobal ? pageGlobal : value,
+    });
+    Object.defineProperty(pageGlobal, REFERENCE_HELPER, { value: referenceHelper(pageGlobal) });
+    Object.defineProperty(pageGlobal, "Function", { value: helper.Function, writable: true, configurable: true });
     installGlobalAccessors(pageGlobal, accessors);
     for (const alias of ["window", "self", "top", "parent", "frames"]) {
       Object.defineProperty(pageGlobal, alias, { value: pageGlobal, writable: true, configurable: true });
     }
-    evaluate = (source) => compartment.evaluate(rewriteClassicScript(rewriteConstructorReads(source).code).code, {
-      sloppyGlobalsMode: true,
+    defineFrameWindows(pageGlobal);
+    installWindowAttributes(pageGlobal);
+    evaluatePrepared = (prepared) => compartment.evaluate(prepared.code, {
+        sloppyGlobalsMode: true,
+        // Classic scripts are sloppy-mode code, as in browsers, once the
+        // rewrite has given every sloppy function's `this` the page global.
+        __sloppyCode__: prepared.parsed && !prepared.strict,
       __evadeImportExpressionTest__: true,
       __evadeHtmlCommentTest__: true,
-      // `eval(...)` in page code still goes through the compartment's safe
-      // evaluator; rejecting every source that mentions it breaks real sites.
-      __rejectSomeDirectEvalExpressions__: false,
-    });
+        // `eval(...)` in page code still goes through the compartment's safe
+        // evaluator; rejecting every source that mentions it breaks real sites.
+        __rejectSomeDirectEvalExpressions__: false,
+      });
+    evaluate = (source) => {
+      const classic = rewriteClassicScriptSource(source);
+      return evaluatePrepared({ code: escapeSesHtmlComments(classic.code), parsed: classic.parsed, strict: classic.strict });
+    };
     // Module code is already strict with its own scope; no global lifting.
-    evaluateModuleCode = (code) => compartment.evaluate(code, {
+    evaluateModuleCode = (code) => compartment.evaluate(escapeSesHtmlComments(code, "module"), {
       __evadeImportExpressionTest__: true,
       __rejectSomeDirectEvalExpressions__: false,
     });
@@ -1036,6 +1827,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
     for (const alias of ["window", "self", "top", "parent", "frames"]) {
       Object.defineProperty(globalThis, alias, { value: globalThis, writable: true, configurable: true });
     }
+    defineFrameWindows(globalThis);
+    installWindowAttributes(globalThis);
+    Object.defineProperty(globalThis, REFERENCE_HELPER, { value: referenceHelper(globalThis), configurable: true });
     // No SES: constructors are the real ones.
     Object.defineProperty(globalThis, CONSTRUCTOR_HELPER, {
       value: (value, call = false) => call ? (...args) => Reflect.apply(value.constructor, value, args) : value.constructor,
@@ -1049,6 +1843,34 @@ export function createPageRealm({ window, document, mode, hooks }) {
   for (const type of WINDOW_HANDLER_EVENTS) {
     defineEventHandlerProperty(pageGlobal, type, () => window, () => realm);
   }
+  // Unhandled rejections become events on the window (HTML §8.1.5.7): a page
+  // that cancels unhandledrejection handles the rejection itself.
+  const { PromiseRejectionEvent } = uiEvents;
+  const reportedRejections = new WeakMap();
+  const stopRejectionEvents = onPromiseRejection({
+    unhandled: (reason, promise) => {
+      if (disposed) return false;
+      if (promise && typeof promise === "object") reportedRejections.set(promise, reason);
+      return runTask(() => {
+        const event = new PromiseRejectionEvent("unhandledrejection", { cancelable: true, promise, reason });
+        pageGlobal.dispatchEvent(event);
+        return event.defaultPrevented;
+      }) === true;
+    },
+    handled: (promise) => {
+      if (disposed || !reportedRejections.has(promise)) return;
+      const reason = reportedRejections.get(promise);
+      reportedRejections.delete(promise);
+      hostSetTimeout(() => runTask(() => {
+        pageGlobal.dispatchEvent(new PromiseRejectionEvent("rejectionhandled", { promise, reason }));
+      }), 0);
+    },
+  });
+  // Before any page script: the Web APIs print and name themselves as built-ins,
+  // and the global has a browser's tags and enumerability.
+  markNativeApi(pageGlobal);
+  applyGlobalShape(pageGlobal, [Object.prototype, Function.prototype, Array.prototype, Error.prototype,
+    Promise.prototype, pageGlobal.Promise?.prototype, RegExp.prototype, Date.prototype, Map.prototype, Set.prototype]);
 
   function startInsertedScripts(nodes) {
     for (const node of nodes) {
@@ -1082,8 +1904,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return;
     }
     const pending = hooks.fetchScript(new URL(src, document.URL).href).then(
-      (source) => {
-        runClassic(script, source);
+      async (source) => {
+        runClassic(script, source, await preparedFor(prepareOffThread(source), source));
         runTask(() => script.dispatchEvent(new window.Event("load")));
       },
       (error) => {
@@ -1119,7 +1941,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
         return record;
       }
       if (type !== null) throw new TypeError(`Unsupported module type "${type}" for ${url}`);
-      const { code, requests } = transformModule(mode === "ses" ? rewriteConstructorReads(source, "module").code : source);
+      const { code, requests } = transformModule(mode === "ses"
+        ? rewriteModuleSource(source) : source);
       record.fn = evaluateModuleCode(code);
       record.requests = requests.map((entry) => ({
         url: resolveModuleSpecifier(entry.specifier, url, importMap),
@@ -1208,7 +2031,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     };
     try {
       // A plain call: module top-level `this` is undefined.
-      return Promise.resolve(Reflect.apply(record.fn, undefined, [context]));
+      return Promise.resolve(asIncumbent(hooks.frames?.self, () => Reflect.apply(record.fn, undefined, [context])));
     } catch (error) {
       return Promise.reject(error);
     }
@@ -1234,11 +2057,27 @@ export function createPageRealm({ window, document, mode, hooks }) {
     }
   }
 
-  function runClassic(script, source) {
+  /**
+   * Starts preparing a large classic script on the rewrite thread; resolves
+   * to { source, result } (result null when it could not), or is null when
+   * the script is prepared on the main thread as it runs.
+   */
+  function prepareOffThread(source) {
+    if (!evaluatePrepared || !hooks.rewriteScript || typeof source !== "string" || source.length < OFF_THREAD_SCRIPT_SIZE) return null;
+    return hooks.rewriteScript(source).then((result) => ({ source, result }), () => ({ source, result: null }));
+  }
+
+  /** The prepared form of `source` from a prepareOffThread promise, or null. */
+  async function preparedFor(pending, source) {
+    const prepared = await pending;
+    return prepared && prepared.source === source ? prepared.result : null;
+  }
+
+  function runClassic(script, source, prepared = null) {
     const previous = currentScript;
     currentScript = script;
     try {
-      runTask(() => evaluate(source));
+      runTask(() => (prepared ? evaluatePrepared(prepared) : evaluate(source)));
     } finally {
       currentScript = previous;
     }
@@ -1275,6 +2114,11 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return pageGlobal;
     },
 
+    /** The page's document object (what a same-origin frame's contentDocument is). */
+    get documentBinding() {
+      return documentBinding;
+    },
+
     get console() {
       return consoleEntries.slice();
     },
@@ -1285,6 +2129,14 @@ export function createPageRealm({ window, document, mode, hooks }) {
      * makes their `nomodule` fallbacks run instead.
      */
     async runDocumentScripts() {
+      for (const source of hooks.initScripts?.() ?? []) {
+        if (disposed) return;
+        try {
+          evaluate(source);
+        } catch (error) {
+          reportError(error);
+        }
+      }
       compileInlineHandlers();
       const all = [...document.querySelectorAll("script")];
       const mapScript = all.find((script) => (script.getAttribute("type") ?? "").trim().toLowerCase() === "importmap");
@@ -1314,9 +2166,17 @@ export function createPageRealm({ window, document, mode, hooks }) {
       // Like a preload scanner: fetch every external script (and module graph)
       // up front, in parallel; execution order is unchanged.
       const preloaded = new Map();
+      // Classic scripts being prepared on the rewrite thread meanwhile.
+      const prepared = new Map();
       for (const script of [...immediate, ...deferred, ...asynchronous]) {
         const src = script.getAttribute("src");
-        if (!src) continue;
+        if (!src) {
+          if ((script.getAttribute("type") ?? "").trim().toLowerCase() !== "module") {
+            const pending = prepareOffThread(script.textContent ?? "");
+            if (pending) prepared.set(script, pending);
+          }
+          continue;
+        }
         try {
           const url = new URL(src, document.URL).href;
           if ((script.getAttribute("type") ?? "").trim().toLowerCase() === "module") {
@@ -1325,6 +2185,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
             const source = hooks.fetchScript(url);
             source.catch(() => {});
             preloaded.set(script, source);
+            const pending = source.then(prepareOffThread, () => null);
+            prepared.set(script, pending);
           }
         } catch {
           // An unresolvable src is reported when the script runs.
@@ -1353,8 +2215,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
           parsingHead = false;
           return;
         }
+        const ready = prepared.has(script) ? await preparedFor(prepared.get(script), source) : null;
         try {
-          runClassic(script, source);
+          runClassic(script, source, ready);
         } finally {
           parsingHead = false;
         }
@@ -1384,6 +2247,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     dispatch(target, event) {
       let prevented = false;
       runTask(() => {
+        realm.markTrusted(event);
         target.dispatchEvent(event);
         prevented = event.defaultPrevented;
       });
@@ -1415,8 +2279,28 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return runTask(() => evaluate(source));
     },
 
+    /** A message posted to this document's window by a frame of the page (see messaging.js). */
+    receiveMessage(message) {
+      messaging.receive(message);
+    },
+
+    /** A MediaSource object, or the one registered at a blob URL. */
+    isMediaSource(value) {
+      return mediaScope.isMediaSource(value);
+    },
+    mediaSourceAt(url) {
+      return mediaScope.mediaSourceAt(url);
+    },
+    blobEntry(url) {
+      return mediaScope.lookup(url);
+    },
+
     dispose() {
       disposed = true;
+      stopRejectionEvents();
+      if (blobUrlFallback === mediaScope) blobUrlFallback = null;
+      messaging.dispose();
+      workers?.dispose();
       // Leaving the document closes its WebSockets (1001 "going away").
       for (const close of openSockets) close();
       openSockets.clear();
@@ -1452,7 +2336,43 @@ function navigationTiming(start, marks) {
 
 function installGlobalAccessors(target, accessors) {
   for (const [name, get] of Object.entries(accessors)) {
-    Object.defineProperty(target, name, { get, configurable: true, enumerable: true });
+    // [Replaceable] (innerWidth, scrollX, length...): assigning shadows the
+    // attribute with a plain data property.
+    Object.defineProperty(target, name, { get, set: replaceableSetter(target, name), configurable: true, enumerable: true });
+  }
+}
+
+function replaceableSetter(target, name) {
+  return Object.getOwnPropertyDescriptor({ set [name](value) {
+    Object.defineProperty(target, name, { value, writable: true, enumerable: true, configurable: true });
+  } }, name).set;
+}
+
+/**
+ * The window's object-valued attributes as Web IDL defines them: accessors
+ * on the global (window.document is a getter, not a data property), the
+ * [LegacyUnforgeable] ones non-configurable, the [Replaceable] ones with a
+ * setter that shadows them, and location's setter navigating.
+ */
+const WINDOW_ATTRIBUTES = {
+  window: "unforgeable", document: "unforgeable", top: "unforgeable", location: "unforgeable",
+  self: "replaceable", frames: "replaceable", parent: "replaceable", screen: "replaceable",
+  visualViewport: "replaceable", performance: "replaceable",
+  customElements: "readonly", history: "readonly", navigator: "readonly", trustedTypes: "readonly",
+  crypto: "readonly", localStorage: "readonly", sessionStorage: "readonly",
+};
+
+function installWindowAttributes(global) {
+  for (const [name, kind] of Object.entries(WINDOW_ATTRIBUTES)) {
+    const descriptor = Object.getOwnPropertyDescriptor(global, name);
+    if (!descriptor || !("value" in descriptor) || !descriptor.configurable) continue;
+    const { value } = descriptor;
+    const get = Object.getOwnPropertyDescriptor({ get [name]() { return value; } }, name).get;
+    let set;
+    if (kind === "replaceable") set = replaceableSetter(global, name);
+    // [PutForwards=href]
+    if (name === "location") set = Object.getOwnPropertyDescriptor({ set location(href) { value.href = href; } }, name).set;
+    Object.defineProperty(global, name, { get, set, enumerable: true, configurable: kind !== "unforgeable" });
   }
 }
 
@@ -1486,22 +2406,76 @@ function constructorHelper(compartment) {
   const replacements = new Map();
   for (const [sample, keyword] of kinds) {
     const inert = Object.getPrototypeOf(sample).constructor;
+    // Functions made from source are sloppy-mode code like classic scripts
+    // (see rewriteClassicScript): Function("return this")() is the global.
     const Constructor = function (...args) {
       const body = args.length ? String(args[args.length - 1]) : "";
       const parameters = args.slice(0, -1).map(String).join(",");
-      return compartment.evaluate(`(${keyword} anonymous(${parameters}\n) {\n${body}\n})`);
+      const source = `(${keyword} anonymous(${parameters}\n) {\n${body}\n})`;
+      const classic = rewriteClassicScriptSource(source);
+      return compartment.evaluate(escapeSesHtmlComments(classic.code), {
+        sloppyGlobalsMode: true,
+        __sloppyCode__: classic.parsed && !classic.strict,
+        __evadeImportExpressionTest__: true,
+        __evadeHtmlCommentTest__: true,
+        __rejectSomeDirectEvalExpressions__: false,
+      });
     };
     Object.defineProperty(Constructor, "prototype", { value: Object.getPrototypeOf(sample) });
     Object.defineProperty(Constructor, "name", { value: inert.name });
-    replacements.set(inert, keyword === "function" ? compartment.globalThis.Function : Constructor);
+    Object.defineProperty(Constructor, "length", { value: 1 });
+    replacements.set(inert, Constructor);
   }
   // call: `value.constructor(...)`, where an ordinary constructor keeps `value` as `this`.
-  return (value, call = false) => {
+  const helper = (value, call = false) => {
     const constructor = value.constructor;
     const replacement = replacements.get(constructor);
     if (replacement) return replacement;
     return call && typeof constructor === "function" ? (...args) => Reflect.apply(constructor, value, args) : constructor;
   };
+  /** The global Function constructor for the compartment. */
+  helper.Function = replacements.get(Object.getPrototypeOf(function () {}).constructor);
+  return helper;
+}
+
+/**
+ * What a direct `eval(...)` in page code calls (see rewriteDirectEval):
+ * the caller's names arrive as accessors and become lexical bindings of the
+ * evaluated code. As in browsers, a page that replaced `eval` gets an
+ * ordinary call of its replacement, and an argument that is neither a
+ * string nor a TrustedScript is returned.
+ */
+function directEvalHelper(compartment, pageGlobal, scriptText) {
+  const intrinsicEval = pageGlobal.eval;
+  // The scope of the direct eval being evaluated: its program reads it once,
+  // first (DIRECT_EVAL_SCOPE_HELPER), so nested evals only need it restored.
+  let currentScope = null;
+  Object.defineProperty(pageGlobal, DIRECT_EVAL_SCOPE_HELPER, { value: () => currentScope });
+  return function (scope, ...args) {
+    const target = pageGlobal.eval;
+    if (target !== intrinsicEval) return Reflect.apply(target, undefined, args);
+    const source = typeof args[0] === "string" ? args[0] : scriptText(args[0]);
+    // Anything but a string or a TrustedScript is returned unchanged.
+    if (source === undefined) return args[0];
+    const names = Object.keys(scope);
+    const prepared = prepareDirectEvalSource(source, names, scope[DIRECT_EVAL_STRICT] === true);
+    const code = escapeSesHtmlComments(rewriteConstructorReads(prepared.code).code);
+    // The prepared code reaches the caller's variables only through the scope
+    // object, so every direct eval shares the compartment's sloppy evaluator.
+    const previous = currentScope;
+    currentScope = scope;
+    try {
+      return compartment.evaluate(code, {
+        sloppyGlobalsMode: true,
+        __sloppyCode__: prepared.parsed && !prepared.strict,
+        __evadeImportExpressionTest__: true,
+        __evadeHtmlCommentTest__: true,
+        __rejectSomeDirectEvalExpressions__: false,
+      });
+    } finally {
+      currentScope = previous;
+    }
+  };
 }
 
 /**
@@ -1601,51 +2575,284 @@ function locationBinding(href, navigate) {
   return { location, setHref: (value) => { href = value; } };
 }
 
-function storageBinding(map) {
-  return {
-    get length() {
-      return map.size;
-    },
-    key: (index) => [...map.keys()][Number(index)] ?? null,
-    getItem: (key) => map.has(String(key)) ? map.get(String(key)) : null,
-    setItem: (key, value) => {
-      map.set(String(key), String(value));
-    },
-    removeItem: (key) => {
-      map.delete(String(key));
+/** navigator.platform as Chromium reports it for the user agent's OS. */
+function navigatorPlatform(userAgent) {
+  if (/Android/.test(userAgent)) return "Linux armv81";
+  if (/Windows/.test(userAgent)) return "Win32";
+  if (/Macintosh/.test(userAgent)) return "MacIntel";
+  if (/CrOS/.test(userAgent)) return "Linux x86_64";
+  return `Linux ${/Linux (x86_64|aarch64|armv\w+|i686)/.exec(userAgent)?.[1] ?? "x86_64"}`;
+}
+
+/**
+ * navigator, screen, visualViewport, the storages, performance and crypto as
+ * platform objects (see interfaces.js), with the interface objects the page
+ * global exposes for them. Desktop Chromium lists five PDF viewer plugins
+ * and their two MIME types whatever is installed (HTML §8.9.1.6).
+ */
+function platformObjects({ eventTargets, userAgent, userAgentDataMembers, mobile, viewport, performance, storages, sendBeacon }) {
+  const EventTargetPrototype = eventTargets.EventTarget.prototype;
+  // An instance an event target's listeners can be added to.
+  const eventTarget = (prototype) => {
+    const Target = function () {};
+    Target.prototype = prototype;
+    return Reflect.construct(eventTargets.EventTarget, [], Target);
+  };
+  const targetOptions = { parent: EventTargetPrototype, base: eventTarget };
+  const interfaces = {};
+  const define = (name, members, options) => {
+    const made = platformObject(name, members, options);
+    interfaces[name] = made.Interface;
+    return made;
+  };
+  // Indexed members are own, enumerable properties; named ones are own and not enumerable.
+  const listObject = (made, slots, items, nameOf) => {
+    const list = made.create(slots);
+    items.forEach((item, index) => Object.defineProperty(list, index, { value: item, enumerable: true, configurable: true }));
+    for (const item of items) {
+      const name = nameOf(item);
+      if (!Object.hasOwn(list, name)) Object.defineProperty(list, name, { value: item, configurable: true });
+    }
+    return list;
+  };
+  // Templates are merged by descriptor: spreading would read their getters.
+  const members = (...parts) => Object.defineProperties({}, Object.assign({},
+    ...parts.map((part) => Object.getOwnPropertyDescriptors(part))));
+  const listMembers = {
+    get length() { return this.items?.length ?? 0; },
+    item(index) { return this.items?.[Number(index) >>> 0] ?? null; },
+    namedItem(name) { return this.items?.find((item) => this.nameOf(item) === String(name)) ?? null; },
+  };
+
+  const pdfNames = mobile ? [] : ["PDF Viewer", "Chrome PDF Viewer", "Chromium PDF Viewer", "Microsoft Edge PDF Viewer", "WebKit built-in PDF"];
+  const MimeType = define("MimeType", {
+    get type() { return this.type; },
+    get suffixes() { return "pdf"; },
+    get description() { return "Portable Document Format"; },
+    get enabledPlugin() { return this.plugin(); },
+  });
+  const Plugin = define("Plugin", members({
+    get name() { return this.name; },
+    get filename() { return "internal-pdf-viewer"; },
+    get description() { return "Portable Document Format"; },
+  }, listMembers));
+  const PluginArray = define("PluginArray", members(listMembers, { refresh() {} }));
+  const MimeTypeArray = define("MimeTypeArray", listMembers);
+  for (const made of [Plugin, PluginArray, MimeTypeArray]) {
+    Object.defineProperty(made.prototype, Symbol.iterator, { value: Array.prototype.values, writable: true, configurable: true });
+  }
+  let firstPlugin = null;
+  const mimeTypeList = pdfNames.length ? ["application/pdf", "text/pdf"].map((type) => MimeType.create({ type, plugin: () => firstPlugin })) : [];
+  const mimeTypeOf = (item) => Object.getOwnPropertyDescriptor(MimeType.prototype, "type").get.call(item);
+  const pluginList = pdfNames.map((name) => listObject(Plugin, { name, items: mimeTypeList, nameOf: mimeTypeOf }, mimeTypeList, mimeTypeOf));
+  firstPlugin = pluginList[0] ?? null;
+  const pluginName = (item) => Object.getOwnPropertyDescriptor(Plugin.prototype, "name").get.call(item);
+  const plugins = listObject(PluginArray, { items: pluginList, nameOf: pluginName }, pluginList, pluginName);
+  const mimeTypes = listObject(MimeTypeArray, { items: mimeTypeList, nameOf: mimeTypeOf }, mimeTypeList, mimeTypeOf);
+
+  const PermissionStatus = define("PermissionStatus", {
+    get name() { return this.name; },
+    get state() { return this.state; },
+    onchange: null,
+  }, targetOptions);
+  const Permissions = define("Permissions", {
+    query(descriptor) {
+      if (!descriptor || typeof descriptor !== "object" || descriptor.name === undefined) {
+        return Promise.reject(new TypeError("Failed to execute 'query' on 'Permissions': required member name is undefined."));
+      }
+      return Promise.resolve(PermissionStatus.create({ name: String(descriptor.name), state: "prompt" }));
     },
-    clear: () => map.clear(),
+  });
+  const NetworkInformation = define("NetworkInformation", {
+    effectiveType: "4g", rtt: 50, downlink: 10, saveData: false, onchange: null,
+  }, targetOptions);
+  const NavigatorUAData = userAgentDataMembers ? define("NavigatorUAData", userAgentDataMembers) : null;
+  const languages = Object.freeze(["en-US"]);
+  const Navigator = define("Navigator", {
+    userAgent,
+    appCodeName: "Mozilla",
+    appName: "Netscape",
+    appVersion: userAgent.replace(/^Mozilla\//, ""),
+    platform: navigatorPlatform(userAgent),
+    product: "Gecko",
+    productSub: "20030107",
+    vendor: userAgentDataMembers ? "Google Inc." : /AppleWebKit\//.test(userAgent) ? "Apple Computer, Inc." : "",
+    vendorSub: "",
+    language: languages[0],
+    languages,
+    onLine: true,
+    cookieEnabled: true,
+    webdriver: false,
+    doNotTrack: null,
+    hardwareConcurrency: globalThis.navigator?.hardwareConcurrency || 4,
+    deviceMemory: 8,
+    maxTouchPoints: mobile ? 5 : 0,
+    pdfViewerEnabled: pdfNames.length > 0,
+    plugins,
+    mimeTypes,
+    ...(NavigatorUAData ? { userAgentData: NavigatorUAData.instance } : {}),
+    connection: NetworkInformation.instance,
+    permissions: Permissions.instance,
+    sendBeacon(url, data = null) { return sendBeacon(url, data); },
+    javaEnabled() { return false; },
+    getGamepads() { return [null, null, null, null]; },
+  });
+
+  const ScreenOrientation = define("ScreenOrientation", {
+    get type() { return viewport().width >= viewport().height ? "landscape-primary" : "portrait-primary"; },
+    get angle() { return 0; },
+    onchange: null,
+  }, targetOptions);
+  const Screen = define("Screen", {
+    get width() { return viewport().width; },
+    get height() { return viewport().height; },
+    get availWidth() { return viewport().width; },
+    get availHeight() { return viewport().height; },
+    availLeft: 0,
+    availTop: 0,
+    colorDepth: 24,
+    pixelDepth: 24,
+    orientation: ScreenOrientation.instance,
+    isExtended: false,
+    onchange: null,
+  }, targetOptions);
+  // No pinch zoom; `scale` is the --mobile scale-up (client CSS pixels per page CSS pixel).
+  const VisualViewport = define("VisualViewport", {
+    offsetLeft: 0,
+    offsetTop: 0,
+    get pageLeft() { return viewport().scrollX; },
+    get pageTop() { return viewport().scrollY; },
+    get width() { return viewport().width; },
+    get height() { return viewport().height; },
+    get scale() { return viewport().pageScale ?? 1; },
+    onresize: null,
+    onscroll: null,
+    onscrollend: null,
+  }, targetOptions);
+  const Performance = define("Performance", performance, targetOptions);
+  const Crypto = define("Crypto", {
+    getRandomValues(array) { return hostCrypto.getRandomValues(array); },
+    randomUUID() { return hostCrypto.randomUUID(); },
+  });
+  const storage = storageInterface();
+  interfaces.Storage = storage.Storage;
+  return {
+    interfaces,
+    navigator: Navigator.instance,
+    screen: Screen.instance,
+    visualViewport: VisualViewport.instance,
+    performance: Performance.instance,
+    crypto: Crypto.instance,
+    localStorage: storage.create(storages.local),
+    sessionStorage: storage.create(storages.session),
   };
 }
 
 /** A read-only snapshot of the few computed values the engine models. */
-function computedStyleBinding(style) {
-  const values = style ? {
-    display: style.display,
-    position: style.position,
-    color: style.color,
-    backgroundColor: style.backgroundColor,
-    fontSize: `${style.fontSize}px`,
-    fontWeight: String(style.fontWeight),
-    fontFamily: (style.fontFamily ?? []).join(", "),
-    lineHeight: style.lineHeight == null ? "normal" : `${style.lineHeight}px`,
-    textAlign: style.textAlign,
-    whiteSpace: style.whiteSpace,
-    boxSizing: style.boxSizing,
-    zIndex: String(style.zIndex),
-    visibility: style.visibility ?? "visible",
-    opacity: String(style.opacity ?? 1),
-    pointerEvents: style.pointerEvents ?? "auto",
-    // Boxes never scroll here; a clipping box reads as hidden.
-    overflow: style.overflowX === "clip" || style.overflowY === "clip" ? "hidden" : "visible",
-    overflowX: style.overflowX === "clip" ? "hidden" : "visible",
-    overflowY: style.overflowY === "clip" ? "hidden" : "visible",
-  } : {};
+/**
+ * The page's CSSStyleDeclaration for getComputedStyle (CSSOM §9): resolved
+ * values for the longhands the engine computes, by camelCase name and by
+ * getPropertyValue, plus the element's custom properties. Width and height
+ * are used values (layout's box) when the element is rendered; percentages
+ * that depend on layout read as specified otherwise.
+ */
+function computedStyleBinding(style, { custom = null, bounds = null, element = null } = {}) {
+  const px = (value) => `${Math.round(value * 1000) / 1000}px`;
+  const length = (value) => typeof value === "number" ? px(value)
+    : value?.unit === "%" ? `${value.value}%`
+      : value?.unit === "math" && value.kind === "calc" ? `calc(${value.percent}% + ${value.px}px)`
+        : value == null ? "auto" : String(value);
+  const values = {};
+  if (style) {
+    const sides = ["Top", "Right", "Bottom", "Left"];
+    const borderColor = (index) => style.borderColors?.[index] ?? style.color;
+    const borderBox = style.boxSizing === "border-box";
+    // Inline boxes (other than replaced elements) have no used width/height to report.
+    if (style.display === "inline" && !["IMG", "VIDEO", "CANVAS", "IFRAME", "INPUT", "SELECT", "TEXTAREA", "BUTTON"]
+      .includes(element?.tagName)) bounds = null;
+    const horizontal = (style.padding[1] ?? 0) + (style.padding[3] ?? 0) + (style.borderWidths[1] ?? 0) + (style.borderWidths[3] ?? 0);
+    const vertical = (style.padding[0] ?? 0) + (style.padding[2] ?? 0) + (style.borderWidths[0] ?? 0) + (style.borderWidths[2] ?? 0);
+    const transform = style.transform;
+    const translate = (value, size) => typeof value === "number" ? value : value?.unit === "%" ? value.value / 100 * size : 0;
+    Object.assign(values, {
+      display: style.display,
+      position: style.position,
+      float: style.float,
+      color: style.color,
+      backgroundColor: style.backgroundColor,
+      backgroundImage: style.backgroundImage == null ? "none" : String(style.backgroundImage),
+      fontSize: px(style.fontSize),
+      fontWeight: String(style.fontWeight),
+      fontFamily: (style.fontFamily ?? []).join(", "),
+      lineHeight: style.lineHeight == null ? "normal" : px(style.lineHeight),
+      textAlign: style.textAlign,
+      whiteSpace: style.whiteSpace,
+      verticalAlign: typeof style.verticalAlign === "number" ? px(style.verticalAlign) : String(style.verticalAlign),
+      textOverflow: style.textOverflow,
+      boxSizing: style.boxSizing,
+      // A rendered box reads its used size; one that is not reads as computed.
+      width: bounds ? px(Math.max(0, bounds.width - (borderBox ? 0 : horizontal))) : length(style.width),
+      height: bounds ? px(Math.max(0, bounds.height - (borderBox ? 0 : vertical))) : length(style.height),
+      minWidth: length(style.minWidth),
+      maxWidth: style.maxWidth === "none" ? "none" : length(style.maxWidth),
+      minHeight: length(style.minHeight),
+      maxHeight: style.maxHeight === "none" ? "none" : length(style.maxHeight),
+      top: length(style.inset[0]),
+      right: length(style.inset[1]),
+      bottom: length(style.inset[2]),
+      left: length(style.inset[3]),
+      zIndex: String(style.zIndex),
+      flexDirection: style.flexDirection,
+      flexWrap: style.flexWrap,
+      flexGrow: String(style.flexGrow),
+      flexShrink: String(style.flexShrink),
+      flexBasis: length(style.flexBasis),
+      justifyContent: style.justifyContent,
+      alignContent: style.alignContent,
+      alignItems: style.alignItems,
+      alignSelf: style.alignSelf,
+      rowGap: style.rowGap ? length(style.rowGap) : "normal",
+      columnGap: style.columnGap ? length(style.columnGap) : "normal",
+      borderRadius: length(style.borderRadius),
+      transform: !transform ? "none"
+        : `matrix(${transform.scaleX ?? 1}, 0, 0, ${transform.scaleY ?? 1}, ${translate(transform.x, bounds?.width ?? 0)}, ${translate(transform.y, bounds?.height ?? 0)})`,
+      visibility: style.visibility ?? "visible",
+      opacity: String(style.opacity ?? 1),
+      pointerEvents: style.pointerEvents ?? "auto",
+      // overflow: hidden and clip both clip; scroll containers report how they scroll.
+      overflowX: style.overflowScrollX ?? (style.overflowX === "clip" ? "clip" : "visible"),
+      overflowY: style.overflowScrollY ?? (style.overflowY === "clip" ? "clip" : "visible"),
+    });
+    values.overflow = values.overflowX === values.overflowY ? values.overflowX : `${values.overflowX} ${values.overflowY}`;
+    sides.forEach((side, index) => {
+      values[`margin${side}`] = length(style.margin[index]);
+      values[`padding${side}`] = length(style.padding[index]);
+      values[`border${side}Width`] = px(style.borderWidths[index] ?? 0);
+      values[`border${side}Style`] = style.borderStyles[index] ?? "none";
+      values[`border${side}Color`] = borderColor(index);
+    });
+    values.margin = sides.map((side) => values[`margin${side}`]).join(" ");
+    values.padding = sides.map((side) => values[`padding${side}`]).join(" ");
+  }
   const kebab = (name) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
   const byKebab = Object.fromEntries(Object.entries(values).map(([name, value]) => [kebab(name), value]));
+  const names = Object.keys(byKebab);
+  const customValue = (name) => {
+    const value = custom?.get(name);
+    return value == null ? "" : resolveVariables(value, custom);
+  };
   return {
     ...values,
-    getPropertyValue: (name) => byKebab[String(name)] ?? "",
+    length: names.length,
+    item: (index) => names[Number(index)] ?? "",
+    getPropertyValue: (name) => {
+      const key = String(name);
+      return key.startsWith("--") ? customValue(key) : byKebab[key.toLowerCase()] ?? "";
+    },
+    getPropertyPriority: () => "",
+    get cssText() {
+      return "";
+    },
   };
 }