buninu-browser 0.7.0 → 0.9.0

package/lib/renderer/page-realm.js

@@ -1,3 +1,9 @@
+import {installPagePrimitiveBuiltins} from './page-builtins.js';
+import {resolveAffine} from '../style/transform.js';
+import { drainMicrotasks } from "bun:jsc";
+import {fileReaderInterface} from './file-input.js';
+import { evalEnvironment, declareEvalBinding } from "./eval-environment.js";
+import { windowNamedProperties } from "./window-named-properties.js";
 import {selectionBinding} from './document-selection.js';
 /**
  * The JavaScript environment of one document.
@@ -17,14 +23,14 @@ import {
 } from "./bindings.js";
 import { resolveModuleSpecifier, transformModule } from "./module-transform.js";
 import {
-  CONSTRUCTOR_HELPER, DIRECT_EVAL_HELPER, DIRECT_EVAL_STRICT, escapeSesHtmlComments, prepareDirectEvalSource,
+  MEMBER_HELPER, CONSTRUCTOR_HELPER, DIRECT_EVAL_HELPER, DIRECT_EVAL_ENV, MAKE_EVAL_ENV, evalDeclarations, DIRECT_EVAL_STRICT, escapeSesHtmlComments, prepareDirectEvalSource,
   DIRECT_EVAL_SCOPE_HELPER, REFERENCE_HELPER, referenceHelper, restoreSourceText, THIS_HELPER,
-  rewriteClassicScriptSource, rewriteConstructorReads, rewriteModuleSource,
+  rewriteClassicScriptSource, rewriteConstructorReads, rewriteMemberReads, rewriteModuleSource,
 } from "./script-rewrite.js";
 import { prepareClassicScript } from "./prepared-script-cache.js";
 import { computeElementStyle, mediaQueryMatches, resolveVariables } from "../style/computed-style.js";
 import { asIncumbent, createMessaging } from "./messaging.js";
-import { canvasContext, resetCanvas, disposeDocumentCanvases, encodeCanvas } from "./canvas-2d.js";
+import { canvasRenderingContextInterface, canvasContext, resetCanvas, disposeDocumentCanvases, encodeCanvas } from "./canvas-2d.js";
 import { createWorkers } from "./workers.js";
 import { createTimers } from "./timers.js";
 import { createAnimationFrames, supportsFrameCheckpoint } from "./animation-frames.js";
@@ -37,6 +43,7 @@ import { installAttributeReactions } from "./custom-element-reactions.js";
 import { createLayoutObservers } from "./layout-observers.js";
 import { createIdleCallbacks } from "./idle-callbacks.js";
 import { createBroadcastChannels } from "./broadcast-channel.js";
+import { createWebAudioScope } from "../audio/web-audio.js";
 import { createInertWindow } from "../happy-dom/parser.js";
 import { historyBinding } from "./history.js";
 import { installImageLoadingAttributes } from "./image-loading.js";
@@ -182,6 +189,7 @@ const INTERFACE_MEMBERS = {
   options: ["HTMLSelectElement", "HTMLDataListElement"], selectedOptions: ["HTMLSelectElement"], selectedIndex: ["HTMLSelectElement"],
   value: [...FORM_CONTROLS, "HTMLOptionElement", "HTMLOutputElement", "HTMLDataElement", "HTMLLIElement", "HTMLMeterElement",
     "HTMLProgressElement", "HTMLParamElement"],
+  files: ["HTMLInputElement"], showPicker: ["HTMLInputElement"],
   checked: ["HTMLInputElement"], selected: ["HTMLOptionElement"],
   disabled: [...FORM_CONTROLS, "HTMLOptionElement", "HTMLOptGroupElement", "HTMLFieldSetElement", "HTMLLinkElement", "HTMLStyleElement"],
   type: [...FORM_CONTROLS, "HTMLScriptElement", "HTMLLinkElement", "HTMLOListElement", "HTMLUListElement", "HTMLLIElement",
@@ -308,6 +316,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   };
   let parsingHead = false;
   let currentScript = null;
+  let taskDepth = 0, checkingMicrotasks = false;
   let pageGlobal = null;
   let evaluate;
   // Runs a classic script already prepared off the main thread (SES mode only).
@@ -333,6 +342,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   /** Runs page code as a task: errors are reported, then the renderer may update. */
   const runTask = (task) => {
     if (disposed) return undefined;
+    taskDepth++;
     if (mediaScope) blobUrlFallback = mediaScope;
     try {
       return blobUrlContext.run(mediaScope, () => asIncumbent(hooks.frames?.self, task));
@@ -340,6 +350,14 @@ export function createPageRealm({ window, document, mode, hooks }) {
       reportError(error);
       return undefined;
     } finally {
+      // HTML's clean-up-after-running-script checkpoint happens before
+      // restoring currentScript. Nested script calls must not drain early.
+      taskDepth--;
+      if (!taskDepth && !checkingMicrotasks && supportsFrameCheckpoint()) {
+        checkingMicrotasks = true;
+        try { drainMicrotasks(); }
+        finally { checkingMicrotasks = false; }
+      }
       hooks.afterTask();
     }
   };
@@ -355,12 +373,14 @@ export function createPageRealm({ window, document, mode, hooks }) {
     }
   };
 
+  const inlineHandlerSources = new WeakMap();
   let documentSelection;
   const realm = new BindingRealm(window, {
     touch: (node, features) => {
       if (!node || node === document || node.ownerDocument === document) hooks.touch(node, features);
     },
     boundsOf: hooks.boundsOf,
+    mouseOffset: hooks.mouseOffset,
     computedStyle: hooks.computedStyle,
     // The engine clock's reading when this document's timeline started (see pageNow).
     timeOriginOffset: () => documentStarted,
@@ -381,6 +401,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
     mediaError: (element) => hooks.mediaError?.(element) ?? null,
     mediaBuffered: (element) => hooks.mediaBuffered?.(element) ?? { length: 0, start: 0, end: 0 },
     call: callPage,
+    prepareEvent: prepareInlineEvent,
+    prepareHandler: prepareInlineHandler,
     readyState: () => readyState,
     body: () => parsingHead ? null : document.body,
     documentCookie: () => hooks.documentCookie?.() ?? "",
@@ -392,6 +414,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
       if (element.tagName === "SCRIPT") createdScripts.add(element);
     },
     inserted: (nodes) => startInsertedScripts(nodes),
+    execCommand: hooks.execCommand,
+    copyEnabled: hooks.copyEnabled,
+    pickFile: (element)=>hooks.pickFile?.(element),
     activateLink: (anchor) => hooks.activateLink?.(anchor),
     submitForm: (form, submitter) => hooks.submitForm?.(form, submitter),
     contentWindow: (node) => messaging.contentWindow(node),
@@ -406,6 +431,10 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const documentBinding = realm.wrap(document);
   const DOMStringMap = function DOMStringMap() { throw new TypeError("Illegal constructor"); };
   realm.datasetPrototype = DOMStringMap.prototype;
+  const DOMTokenList = function DOMTokenList() { throw new TypeError('Illegal constructor'); };
+  DOMTokenList.prototype=mutableBindingPrototype(INTERFACES.DOMTokenList.prototype,Object.prototype);
+  Object.defineProperty(DOMTokenList.prototype,'constructor',{value:DOMTokenList,writable:true,configurable:true});
+  realm.tokenListPrototype=DOMTokenList.prototype;
   const validityMembers = {};
   for (const key of ["badInput", "customError", "patternMismatch", "rangeOverflow", "rangeUnderflow", "stepMismatch", "tooLong", "tooShort", "typeMismatch", "valid", "valueMissing"]) {
     Object.defineProperty(validityMembers, key, { get() { return Boolean(this[key]); }, enumerable: true });
@@ -416,7 +445,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   // 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);
+  WindowInterface.prototype = Object.create(windowNamedProperties(document, realm, 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 });
@@ -426,6 +455,11 @@ export function createPageRealm({ window, document, mode, hooks }) {
   }
   realm.nodePrototype = NodeInterface.prototype;
   const parentPrototype = mutableBindingPrototype(Object.getPrototypeOf(INTERFACES.Element.prototype), NodeInterface.prototype);
+  const elementDocumentCollections={};
+  for(const name of ['getElementsByTagName','getElementsByTagNameNS','getElementsByClassName']) {
+    elementDocumentCollections[name]=Object.getOwnPropertyDescriptor(parentPrototype,name);
+    delete parentPrototype[name];
+  }
   // 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
@@ -440,6 +474,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   };
   const ElementInterface = function Element() { throw new TypeError("Illegal constructor"); };
   ElementInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.Element.prototype, parentPrototype));
+  Object.defineProperties(ElementInterface.prototype,elementDocumentCollections);
   Object.defineProperty(ElementInterface.prototype, "constructor", { value: ElementInterface, writable: true, configurable: true });
   const HTMLElementInterface = function HTMLElement() {
     if (!new.target || !constructingElement) throw new TypeError("Illegal constructor");
@@ -573,6 +608,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   // getContext("2d") is how pages sample colours and draw. Other elements do
   // not inherit these.
   realm.selection=()=>documentSelection ??= selectionBinding(window,realm,nodeOf,()=>hooks.selectionChanged?.());
+  const CanvasRenderingContext2D=canvasRenderingContextInterface();
   const canvasPrototype = elementInterfacePrototypes.get("HTMLCanvasElement");
   for (const name of ["width", "height"]) {
     Object.defineProperty(canvasPrototype, name, {
@@ -595,6 +631,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     writable: true,
     value(type) {
       return canvasContext(nodeOf(this), String(type), {
+        prototype:CanvasRenderingContext2D.prototype,
         canvas: this, resolveImage: source => hooks.canvasImage?.(nodeOf(source)),
         parseFont: value => hooks.canvasFont?.(nodeOf(this), value),
         text: request => hooks.canvasText?.(nodeOf(this), request),
@@ -689,6 +726,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   realm.shadowRootPrototype = mutableBindingPrototype(INTERFACES.ShadowRoot.prototype, DocumentFragmentInterface.prototype);
   const DocumentInterface = function Document() { throw new TypeError("Illegal constructor"); };
   DocumentInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.Document.prototype, parentPrototype));
+  Object.defineProperties(DocumentInterface.prototype,elementDocumentCollections);
   Object.defineProperty(DocumentInterface.prototype, "constructor", { value: DocumentInterface, writable: true, configurable: true });
   Object.setPrototypeOf(documentBinding, DocumentInterface.prototype);
   realm.documentPrototype = DocumentInterface.prototype;
@@ -757,6 +795,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const animationFrames = supportsFrameCheckpoint() ? createAnimationFrames({
     invoke: (callback, timestamp) => runTask(() => callPage(callback, pageGlobal, [timestamp])),
     now: pageNow,
+    afterFrame: () => hooks.afterAnimationFrame?.(),
   }) : null;
   const idleCallbacks = createIdleCallbacks({
     now: () => hostPerformance.now(), setTimer: hostSetTimeout, clearTimer: hostClearTimeout,
@@ -1420,6 +1459,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       // A plain function: Web IDL operations are not async functions.
       fetch: function fetch(input, init = undefined) { return pageFetch(input, init); },
       XMLHttpRequest,
+      FileReader:fileReaderInterface({EventTarget:eventTargets.EventTarget,realm,window,runTask}),
       WebSocket,
       Headers: PageHeaders,
       Request: PageRequest,
@@ -1589,7 +1629,11 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return Promise.resolve(values);
     },
   };
-  installImageLoadingAttributes(elementInterfacePrototypes.get("HTMLImageElement"), nodeOf);
+  installImageLoadingAttributes(elementInterfacePrototypes.get("HTMLImageElement"), nodeOf, node=>hooks.touch(node), node=>{
+    // Inline replaced images can live in text fragments rather than boxes.
+    const rect=hooks.layoutBounds?.(node)??hooks.boundsOf(node);if(!rect)return null;
+    const style=hooks.computedStyle?.(node);return style?.display==='none'?null:rect;
+  });
   const { location, setHref } = locationBinding(document.URL, hooks.navigate);
   const { History, history, pushEntry } = historyBinding(location, setHref);
   const { Event, CustomEvent, ...uiEvents } = eventConstructors(realm);
@@ -1606,6 +1650,11 @@ export function createPageRealm({ window, document, mode, hooks }) {
     EventTarget: eventTargets.EventTarget, realm, runTask, DOMException,
   });
 
+  const webAudio = createWebAudioScope({
+    audio: hooks.audio, decodeAudio: hooks.decodeAudio, EventTarget: eventTargets.EventTarget, Event, DOMException,
+    schedule: fn => hostSetTimeout(() => runTask(fn), 0), reportError,
+  });
+
   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() },
@@ -1636,6 +1685,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
 
   /** Web APIs placed on the page's global object (bindings plus hardened host utilities). */
   const api = {
+    ...webAudio.api,
     document: documentBinding,
     location,
     navigator: platform.navigator,
@@ -1666,6 +1716,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return idleCallbacks.request(nextTimerId++, callback, timeout);
     },
     cancelIdleCallback: (handle) => idleCallbacks.cancel(Number(handle)),
+    CanvasRenderingContext2D,
     queueMicrotask: (callback) => hostQueueMicrotask(() => runTask(() => callPage(callback, pageGlobal, []))),
     structuredClone: (value) => hostStructuredClone(value),
     atob: (value) => hostAtob(String(value)),
@@ -1783,6 +1834,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       },
     },
     ...INTERFACES,
+    DOMTokenList,
     DOMStringMap,
     Node: NodeInterface,
     Text: TextInterface,
@@ -1808,7 +1860,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
         const style = hooks.computedStyle(node, needsLayout);
         return {
           style, custom: hooks.customProperties?.(node, false) ?? null,
-          bounds: needsLayout && style && style.display !== "none" && node?.isConnected ? hooks.boundsOf(node) : null,
+          bounds: needsLayout && style && style.display !== "none" && node?.isConnected ? (hooks.layoutBounds?.(node) ?? hooks.boundsOf(node)) : null,
           element: node,
         };
       });
@@ -1829,9 +1881,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
     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,
+    alert: (message = "") => { hooks.dialog?.("alert", String(message), ""); },
+    confirm: (message = "") => Boolean(hooks.dialog?.("confirm", String(message), "")),
+    prompt: (message = "", value = "") => hooks.dialog?.("prompt", String(message), String(value)) ?? null,
     print: () => {},
     focus: () => {},
     blur: () => {},
@@ -1918,7 +1970,58 @@ export function createPageRealm({ window, document, mode, hooks }) {
     });
     Object.defineProperty(PagePromise, "length", { value: 1, configurable: true });
     pageGlobal.Promise = PagePromise;
-    pageGlobal.Error = errorInterface(pageGlobal.Error, hostErrorIsError);
+    // Collection polyfills may cache inherited methods on individual instances.
+    // Mutable page-local prototypes avoid SES's frozen-inheritance assignment
+    // trap without changing shared intrinsics or their internal slot checks.
+    for (const name of ['Map', 'Set', 'WeakMap', 'WeakSet']) {
+      const Base = pageGlobal[name];
+      const Local = compartment.evaluate(`(class ${name} extends globalThis.${name} {})`);
+      for (const key of Reflect.ownKeys(Base.prototype)) {
+        if (key === 'constructor') continue;
+        const descriptor = {...Object.getOwnPropertyDescriptor(Base.prototype, key), configurable:true};
+        if ('value' in descriptor) descriptor.writable = true;
+        Object.defineProperty(Local.prototype, key, descriptor);
+      }
+      Object.defineProperty(Local,'length',{value:0,configurable:true});
+      pageGlobal[name] = Local;
+    }
+
+    // Polyfills extend Array's unscopables table even when methods already exist.
+    // Keep this mutable metadata local to the page, not SES's shared prototype.
+    const BaseArray = pageGlobal.Array;
+    const PageArray = compartment.evaluate('((Base) => function Array(...args) { return Reflect.construct(Base, args, new.target || Array); })(Array)');
+    const arrayPrototype=[];
+    for(const key of Reflect.ownKeys(BaseArray.prototype)) {
+      if(key==='constructor'||key==='length')continue;
+      const original=Object.getOwnPropertyDescriptor(BaseArray.prototype,key);
+      const value=key===Symbol.unscopables?{...BaseArray.prototype[key]}:Reflect.get(BaseArray.prototype,key);
+      Object.defineProperty(arrayPrototype,key,{value,writable:true,configurable:true,enumerable:original.enumerable});
+    }
+    Object.defineProperty(arrayPrototype,'constructor',{value:PageArray,writable:true,configurable:true});
+    Object.defineProperty(PageArray,'prototype',{value:arrayPrototype});
+    for(const key of Reflect.ownKeys(BaseArray))if(!['name','length','prototype'].includes(key))
+      Object.defineProperty(PageArray,key,{...Object.getOwnPropertyDescriptor(BaseArray,key),configurable:true});
+    Object.defineProperty(PageArray,Symbol.hasInstance,{value:value=>Array.isArray(value),configurable:true});
+    pageGlobal.Array=PageArray;
+    const BaseRegExp = pageGlobal.RegExp;
+    const PageRegExp = function RegExp(pattern, flags) {
+      const object=pattern!==null&&(typeof pattern==='object'||typeof pattern==='function');
+      const matches=object?pattern[Symbol.match]:undefined;
+      const isRegExp=matches!==undefined?Boolean(matches):object&&Object.prototype.toString.call(pattern)==='[object RegExp]';
+      if(!new.target&&flags===undefined&&isRegExp&&(pattern.constructor===BaseRegExp||pattern.constructor===PageRegExp))return pattern;
+      return Reflect.construct(BaseRegExp,[pattern,flags],new.target||BaseRegExp);
+    };
+    Object.defineProperty(PageRegExp,'prototype',{value:BaseRegExp.prototype});
+    for(const key of Reflect.ownKeys(BaseRegExp))if(!['name','length','prototype'].includes(key))
+      Object.defineProperty(PageRegExp,key,Object.getOwnPropertyDescriptor(BaseRegExp,key));
+    pageGlobal.RegExp=PageRegExp;
+    const BaseSymbol=pageGlobal.Symbol;
+    const PageSymbol={Symbol(description){return arguments.length?BaseSymbol(description):BaseSymbol();}}.Symbol;
+    for(const key of Reflect.ownKeys(BaseSymbol))if(!['name','length'].includes(key))
+      Object.defineProperty(PageSymbol,key,{...Object.getOwnPropertyDescriptor(BaseSymbol,key),configurable:key!=='prototype'});
+    pageGlobal.Symbol=PageSymbol;
+    for(const name of ['Error','EvalError','RangeError','ReferenceError','SyntaxError','TypeError','URIError'])
+      pageGlobal[name] = errorInterface(pageGlobal[name], hostErrorIsError);
     // 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.
@@ -1933,7 +2036,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
         value: Object.create(Object.getPrototypeOf(shared), descriptors), writable: true, configurable: true,
       });
     }
-    const helper = constructorHelper(compartment);
+    const member = installPagePrimitiveBuiltins(compartment, pageGlobal);
+    Object.defineProperty(pageGlobal, MEMBER_HELPER, {value: member});
+    const helper = constructorHelper(compartment, member);
     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
@@ -1943,6 +2048,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return code === undefined ? source : evaluate(code);
     } }.eval;
     Object.defineProperty(pageGlobal, "eval", { value: markNative(pageEval, "eval"), writable: true, configurable: true });
+    Object.defineProperty(pageGlobal, MAKE_EVAL_ENV, { value: parent => evalEnvironment(pageGlobal,parent) });
     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.
@@ -1973,7 +2079,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return evaluatePrepared(prepareClassicScript(source));
     };
     // Module code is already strict with its own scope; no global lifting.
-    evaluateModuleCode = (code) => compartment.evaluate(escapeSesHtmlComments(code, "module"), {
+    evaluateModuleCode = (code) => compartment.evaluate(escapeSesHtmlComments(code, "script"), {
+      __evadeHtmlCommentTest__: true,
       __evadeImportExpressionTest__: true,
       __rejectSomeDirectEvalExpressions__: false,
     });
@@ -2029,6 +2136,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
   // 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);
+  // The legacy Web Audio alias keeps the standard constructor's name.
+  markNative(webAudio.api.AudioContext, "AudioContext");
   applyGlobalShape(pageGlobal, [Object.prototype, Function.prototype, Array.prototype, Error.prototype,
     Promise.prototype, pageGlobal.Promise?.prototype, RegExp.prototype, Date.prototype, Map.prototype, Set.prototype]);
 
@@ -2246,30 +2355,31 @@ export function createPageRealm({ window, document, mode, hooks }) {
     }
   }
 
-  /** Compiles on* attributes (e.g. onclick="...") present when the document loads. */
-  function compileInlineHandlers() {
-    for (const element of document.querySelectorAll("*")) {
-      for (const type of INLINE_HANDLER_EVENTS) {
-        const code = element.getAttribute(`on${type}`);
-        if (code === null) continue;
-        let handler;
-        try {
-          handler = evaluate(`(function (event) {\n${code}\n})`);
-        } catch (error) {
-          reportError(error);
-          continue;
-        }
-        const binding = type === "load" && element === document.body ? pageGlobal : realm.wrap(element);
-        if (binding !== pageGlobal) {
-          binding[`on${type}`] = handler;
-          continue;
-        }
-        window.addEventListener(type, (event) => {
-          const result = callPage(handler, binding, [realm.wrapEvent(event)]);
-          if (result === false) event.preventDefault();
-        });
-      }
+  // Compile lazily so innerHTML, cloned nodes and changed attributes work too.
+  // Remember source rather than overwriting a later element.onclick assignment.
+  function prepareInlineHandler(element, type) {
+    if (!element?.getAttribute || !INLINE_HANDLER_EVENTS.includes(type)) return;
+    const code = element.getAttribute(`on${type}`);
+    let sources = inlineHandlerSources.get(element);
+    if (sources?.has(type) && sources.get(type) === code) return;
+    if (!sources) inlineHandlerSources.set(element, sources = new Map());
+    sources.set(type, code);
+    if (code === null && !sources.has(`installed:${type}`)) return;
+    sources.set(`installed:${type}`, true);
+    let handler = null;
+    if (code !== null) {
+      try { handler = evaluate(`(function (event) {\n${code}\n})`); }
+      catch (error) { reportError(error); }
     }
+    const binding = type === 'load' && element === document.body ? pageGlobal : realm.wrap(element);
+    binding[`on${type}`] = handler;
+  }
+  function prepareInlineEvent(target, type) {
+    for (let node = target; node; node = node.parentNode) prepareInlineHandler(node, type);
+  }
+  function compileInlineHandlers() {
+    for (const element of document.querySelectorAll('*'))
+      for (const type of INLINE_HANDLER_EVENTS) prepareInlineHandler(element, type);
   }
 
   return {
@@ -2410,6 +2520,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     dispatch(target, event) {
       let prevented = false;
       runTask(() => {
+        prepareInlineEvent(target, event.type);
         realm.markTrusted(event);
         target.dispatchEvent(event);
         prevented = event.defaultPrevented;
@@ -2475,6 +2586,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       if (blobUrlFallback === mediaScope) blobUrlFallback = null;
       messaging.dispose();
       broadcasts.dispose();
+      webAudio.dispose();
       workers?.dispose();
       // Leaving the document closes its WebSockets (1001 "going away").
       for (const close of openSockets) close();
@@ -2572,7 +2684,7 @@ function scrollArguments(hooks, x, y, relative) {
  * these stand-ins compile the same function text in the page's compartment
  * and share the real prototypes, so instanceof and prototype checks hold.
  */
-function constructorHelper(compartment) {
+function constructorHelper(compartment, member) {
   const kinds = [
     [function () {}, "function"],
     [async function () {}, "async function"],
@@ -2597,14 +2709,27 @@ function constructorHelper(compartment) {
         __rejectSomeDirectEvalExpressions__: false,
       });
     };
-    Object.defineProperty(Constructor, "prototype", { value: Object.getPrototypeOf(sample) });
+    const sharedPrototype = Object.getPrototypeOf(sample);
+    const prototype = keyword === 'function' ? function () {} : sharedPrototype;
+    if (prototype !== sharedPrototype) {
+      for (const key of Reflect.ownKeys(sharedPrototype)) {
+        if (key === 'constructor' || key === 'arguments' || key === 'caller') continue;
+        const original=Object.getOwnPropertyDescriptor(sharedPrototype,key);
+        const descriptor={value:Reflect.get(sharedPrototype,key),enumerable:original.enumerable,writable:true,configurable:true};
+        Object.defineProperty(prototype,key,descriptor);
+      }
+      Object.defineProperty(prototype,'constructor',{value:Constructor,writable:true,configurable:true});
+      Object.defineProperty(Constructor,Symbol.hasInstance,{value(value){return typeof value==='function';}});
+    }
+    Object.defineProperty(Constructor, "prototype", { value: prototype });
     Object.defineProperty(Constructor, "name", { value: inert.name });
     Object.defineProperty(Constructor, "length", { value: 1 });
     replacements.set(inert, Constructor);
   }
   // call: `value.constructor(...)`, where an ordinary constructor keeps `value` as `this`.
   const helper = (value, call = false) => {
-    const constructor = value.constructor;
+    const primitiveName={number:"Number",string:"String",boolean:"Boolean"}[typeof value];
+    const constructor = primitiveName ? member(value,"constructor") : value.constructor;
     const replacement = replacements.get(constructor);
     if (replacement) return replacement;
     return call && typeof constructor === "function" ? (...args) => Reflect.apply(constructor, value, args) : constructor;
@@ -2633,9 +2758,19 @@ function directEvalHelper(compartment, pageGlobal, scriptText) {
     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 environment = scope[DIRECT_EVAL_ENV];
+    const lowered = environment ? evalDeclarations(source, scope[DIRECT_EVAL_STRICT] === true) : {source,names:[]};
+    if (environment) {
+      for (const name of lowered.names) if (!Object.hasOwn(scope,name)) declareEvalBinding(environment,name);
+      for (const name of new Set([...Object.keys(environment),...lowered.names])) {
+        if (!Object.hasOwn(scope,name)) Object.defineProperty(scope,name,{
+          get:()=>environment[name],set:value=>{environment[name]=value;},enumerable:true,configurable:true,
+        });
+      }
+    }
     const names = Object.keys(scope);
-    const prepared = prepareDirectEvalSource(source, names, scope[DIRECT_EVAL_STRICT] === true);
-    const code = escapeSesHtmlComments(rewriteConstructorReads(prepared.code).code);
+    const prepared = prepareDirectEvalSource(lowered.source, names, scope[DIRECT_EVAL_STRICT] === true);
+    const code = escapeSesHtmlComments(rewriteMemberReads(rewriteConstructorReads(prepared.code).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;
@@ -3015,6 +3150,7 @@ function computedStyleSnapshot(style, { custom = null, bounds = null, element =
       verticalAlign: typeof style.verticalAlign === "number" ? px(style.verticalAlign) : String(style.verticalAlign),
       textOverflow: style.textOverflow,
       boxSizing: style.boxSizing,
+      aspectRatio: style.aspectRatio ? `${style.aspectRatio.auto ? "auto " : ""}${style.aspectRatio.numerator} / ${style.aspectRatio.denominator}` : "auto",
       // 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),
@@ -3039,6 +3175,7 @@ function computedStyleSnapshot(style, { custom = null, bounds = null, element =
       rowGap: style.rowGapNormal ? "normal" : length(style.rowGap),
       columnGap: style.columnGapNormal ? "normal" : length(style.columnGap),
       transform: !transform ? "none"
+        : transform.affine ? `matrix(${Object.values(resolveAffine(transform.affine,bounds?.width??0,bounds?.height??0)).join(", ")})`
         : `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),