buninu-browser 0.2.2 → 0.2.4

package/lib/renderer/page-realm.js

@@ -20,15 +20,22 @@ import {
   DIRECT_EVAL_SCOPE_HELPER, REFERENCE_HELPER, referenceHelper, restoreSourceText, THIS_HELPER,
   rewriteClassicScriptSource, rewriteConstructorReads, rewriteModuleSource,
 } from "./script-rewrite.js";
+import { prepareClassicScript } from "./prepared-script-cache.js";
 import { mediaQueryMatches, resolveVariables } from "../style/computed-style.js";
 import { asIncumbent, createMessaging } from "./messaging.js";
-import { canvasContext, resetCanvas } from "./canvas-2d.js";
+import { canvasContext, resetCanvas, disposeDocumentCanvases, encodeCanvas } 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 { applyGlobalShape, errorInterface, platformObject, storageInterface } from "./interfaces.js";
 import { trustedTypesApi } from "./trusted-types.js";
 import { onPromiseRejection } from "./rejections.js";
+import { installAttributeReactions } from "./custom-element-reactions.js";
+import { createLayoutObservers } from "./layout-observers.js";
+import { createBroadcastChannels } from "./broadcast-channel.js";
+import { createInertWindow } from "../happy-dom/parser.js";
+import { historyBinding } from "./history.js";
+import { installImageLoadingAttributes } from "./image-loading.js";
 import { AsyncLocalStorage } from "node:async_hooks";
 
 // URL is one shared intrinsic, hardened before any page sees it. Blob URL
@@ -61,6 +68,9 @@ const hostCrypto = globalThis.crypto;
 const hostStructuredClone = globalThis.structuredClone;
 const hostAtob = globalThis.atob;
 const hostBtoa = globalThis.btoa;
+const HostHeaders = globalThis.Headers;
+const HostRequest = globalThis.Request;
+const HostResponse = globalThis.Response;
 
 export const CLASSIC_SCRIPT_TYPES = new Set([
   "", "text/javascript", "application/javascript", "text/ecmascript", "application/ecmascript",
@@ -150,7 +160,11 @@ const PLAIN_HTML_ELEMENTS = new Set(["ABBR", "ADDRESS", "ARTICLE", "ASIDE", "B",
  */
 const FORM_CONTROLS = ["HTMLInputElement", "HTMLSelectElement", "HTMLTextAreaElement", "HTMLButtonElement"];
 const URL_ELEMENTS = ["HTMLAnchorElement", "HTMLAreaElement"];
+const VALIDATED_ELEMENTS = [...FORM_CONTROLS, "HTMLFieldSetElement", "HTMLObjectElement", "HTMLOutputElement"];
 const INTERFACE_MEMBERS = {
+  assignedNodes: ["HTMLSlotElement"], assignedElements: ["HTMLSlotElement"], assign: ["HTMLSlotElement"],
+  validity: VALIDATED_ELEMENTS, setCustomValidity: VALIDATED_ELEMENTS,
+  checkValidity: [...VALIDATED_ELEMENTS, "HTMLFormElement"], reportValidity: [...VALIDATED_ELEMENTS, "HTMLFormElement"],
   contentWindow: ["HTMLIFrameElement", "HTMLObjectElement", "HTMLFrameElement"],
   contentDocument: ["HTMLIFrameElement", "HTMLObjectElement", "HTMLFrameElement"],
   content: ["HTMLTemplateElement"],
@@ -199,6 +213,9 @@ const WINDOW_HANDLER_EVENTS = [
   "popstate", "beforeunload", "unload", "focus", "blur", "online", "offline", "unhandledrejection", "rejectionhandled",
 ];
 const hostStorage = new Map();
+// SES's older intrinsic allow-list removes this standard method during
+// lockdown; retain Bun's native brand check without replacing tamed errors.
+const hostErrorIsError = Error.isError;
 
 function cssEscape(value) {
   const input = String(value);
@@ -262,6 +279,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const consoleEntries = [];
   let nextTimerId = 1;
   let disposed = false;
+  const pendingPageFetches = new Set();
   let readyState = "loading";
   // A document gets a fresh high-resolution time origin. Bun's
   // performance.now() is relative to the renderer process, which is commonly
@@ -292,8 +310,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
   let inlineModuleCount = 0;
 
   const reportError = (error, source = currentScript?.src) => {
-    // SES "safe" error taming blanks .stack, so fall back to name and message.
-    const detail = error?.stack || (error?.name ? `${error.name}: ${error.message}` : String(error?.message ?? error));
+    const detail = diagnosticError(error);
     const message = source ? `${source}: ${detail}` : detail;
     consoleEntries.push({ level: "error", text: message });
     hooks.reportError(message);
@@ -329,7 +346,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
   };
 
   const realm = new BindingRealm(window, {
-    touch: hooks.touch,
+    touch: (node, features) => {
+      if (!node || node === document || node.ownerDocument === document) hooks.touch(node, features);
+    },
     boundsOf: hooks.boundsOf,
     computedStyle: hooks.computedStyle,
     // The engine clock's reading when this document's timeline started (see pageNow).
@@ -373,6 +392,14 @@ export function createPageRealm({ window, document, mode, hooks }) {
     (value) => value === pageGlobal || Boolean(nodeOf(value)),
     (value) => value === pageGlobal ? window : nodeOf(value));
   const documentBinding = realm.wrap(document);
+  const DOMStringMap = function DOMStringMap() { throw new TypeError("Illegal constructor"); };
+  realm.datasetPrototype = DOMStringMap.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 });
+  }
+  const validity = platformObject("ValidityState", validityMembers);
+  realm.wrapValidity = validity.create;
   const NodeInterface = function Node() { throw new TypeError("Illegal constructor"); };
   // Node.prototype inherits EventTarget.prototype (DOM §4.4), as Window.prototype does.
   NodeInterface.prototype = mutableBindingPrototype(INTERFACES.Node.prototype, eventTargets.EventTarget.prototype);
@@ -554,7 +581,27 @@ export function createPageRealm({ window, document, mode, hooks }) {
     enumerable: true,
     writable: true,
     value(type) {
-      return canvasContext(nodeOf(this), String(type));
+      return canvasContext(nodeOf(this), String(type), {
+        canvas: this, resolveImage: source => hooks.canvasImage?.(nodeOf(source)),
+        parseFont: value => hooks.canvasFont?.(nodeOf(this), value),
+        text: request => hooks.canvasText?.(nodeOf(this), request),
+      });
+    },
+  });
+  Object.defineProperty(canvasPrototype, "toDataURL", {
+    configurable: true, enumerable: true, writable: true,
+    value(type, quality) {
+      const encoded = encodeCanvas(nodeOf(this), type, quality);
+      return encoded ? `data:${encoded.type};base64,${encoded.bytes.toBase64()}` : "data:,";
+    },
+  });
+  Object.defineProperty(canvasPrototype, "toBlob", {
+    configurable: true, enumerable: true, writable: true,
+    value(callback, type, quality) {
+      if (typeof callback !== "function") throw new TypeError("Canvas toBlob requires a callback");
+      const encoded = encodeCanvas(nodeOf(this), type, quality);
+      const blob = encoded ? new Blob([encoded.bytes], { type: encoded.type }) : null;
+      hostSetTimeout(() => { if (!disposed) runTask(() => callPage(callback, pageGlobal, [blob])); }, 0);
     },
   });
   // HTMLMediaElement. HAVE_* / NETWORK_* / MEDIA_ERR_* live on the prototype
@@ -631,6 +678,33 @@ export function createPageRealm({ window, document, mode, hooks }) {
   DocumentInterface.prototype = withParentNodeMembers(mutableBindingPrototype(INTERFACES.Document.prototype, parentPrototype));
   Object.defineProperty(DocumentInterface.prototype, "constructor", { value: DocumentInterface, writable: true, configurable: true });
   Object.setPrototypeOf(documentBinding, DocumentInterface.prototype);
+  realm.documentPrototype = DocumentInterface.prototype;
+  let parserWindow = null;
+  const parsers = new WeakSet();
+  class DOMParser {
+    constructor() { parsers.add(this); }
+    parseFromString(source, type) {
+      if (!parsers.has(this)) throw new TypeError("Illegal invocation");
+      const mime = String(type);
+      if (!["text/html", "text/xml", "application/xml", "application/xhtml+xml", "image/svg+xml"].includes(mime)) {
+        throw new TypeError("Invalid DOMParser MIME type.");
+      }
+      parserWindow ??= createInertWindow(document.URL);
+      const parsed = new parserWindow.DOMParser().parseFromString(String(source), mime);
+      Object.defineProperty(parsed, "contentType", { value: mime, configurable: true });
+      return realm.wrap(parsed);
+    }
+  }
+  const serializers = new WeakSet();
+  class XMLSerializer {
+    constructor() { serializers.add(this); }
+    serializeToString(root) {
+      if (!serializers.has(this)) throw new TypeError("Illegal invocation");
+      const node = nodeOf(root);
+      if (!node) throw new TypeError("XMLSerializer requires a Node.");
+      return new window.XMLSerializer().serializeToString(node);
+    }
+  }
 
   /** In an iframe's document, parent and top are the embedding frames' windows. */
   const defineFrameWindows = (global) => {
@@ -715,12 +789,12 @@ export function createPageRealm({ window, document, mode, hooks }) {
   };
   Object.defineProperty(pageConsole, Symbol.toStringTag, { value: "console", configurable: true });
 
-  /**
-   * MutationObserver wraps Happy DOM's implementation (records carry node
-   * wrappers); Resize- and IntersectionObserver report the current layout
-   * once per observed element, which is enough for common lazy-loading and
-   * sizing code in a headless viewport.
-   */
+  const layoutObservers = createLayoutObservers({
+    nodeOf, boundsOf: hooks.boundsOf, computedStyle: hooks.computedStyle, viewport: hooks.viewport,
+    schedule: (callback) => schedule(callback, 0, [], false), cancel, call: callPage, now: pageNow,
+  });
+
+  /** MutationObserver wraps Happy DOM records; layout observers use renderer geometry. */
   function observerConstructors() {
     function MutationObserver(callback) {
       if (!new.target) throw new TypeError("Constructor MutationObserver requires 'new'");
@@ -756,48 +830,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return self;
     }
 
-    const layoutObserver = (name, entryFor) => function Observer(callback) {
-      if (!new.target) throw new TypeError(`Constructor ${name} requires 'new'`);
-      const self = {};
-      const observed = new Set();
-      self.observe = (target) => {
-        const node = nodeOf(target);
-        if (!node || observed.has(node)) return;
-        observed.add(node);
-        schedule(() => {
-          if (!observed.has(node)) return;
-          const rect = hooks.boundsOf(node) ?? { left: 0, top: 0, width: 0, height: 0 };
-          callPage(callback, self, [[entryFor(target, rect)], self]);
-        }, 0, [], false);
-      };
-      self.unobserve = (target) => observed.delete(nodeOf(target));
-      self.disconnect = () => observed.clear();
-      self.takeRecords = () => [];
-      return self;
-    };
-    const rectangle = ({ left, top, width, height }) => ({
-      x: left, y: top, left, top, width, height, right: left + width, bottom: top + height,
-    });
-    const ResizeObserver = layoutObserver("ResizeObserver", (target, rect) => ({
-      target,
-      contentRect: rectangle({ ...rect, left: 0, top: 0 }),
-      borderBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
-      contentBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],
-    }));
-    const IntersectionObserver = layoutObserver("IntersectionObserver", (target, rect) => {
-      const { width, height } = hooks.viewport();
-      const visible = rect.top < height && rect.top + rect.height > 0 && rect.left < width && rect.left + rect.width > 0;
-      return {
-        target,
-        time: pageNow(),
-        isIntersecting: visible,
-        intersectionRatio: visible ? 1 : 0,
-        boundingClientRect: rectangle(rect),
-        intersectionRect: rectangle(visible ? rect : { left: 0, top: 0, width: 0, height: 0 }),
-        rootBounds: rectangle({ left: 0, top: 0, width, height }),
-      };
-    });
-    return { MutationObserver, ResizeObserver, IntersectionObserver };
+    return { MutationObserver, ResizeObserver: layoutObservers.ResizeObserver,
+      IntersectionObserver: layoutObservers.IntersectionObserver };
   }
 
   /**
@@ -917,33 +951,62 @@ export function createPageRealm({ window, document, mode, hooks }) {
   }
 
   function networkApi() {
+    // Instrumentation libraries wrap Headers.prototype.set/append. Keep
+    // those overrides local to this document: the renderer's own Headers
+    // intrinsic remains frozen and is never modified by a page.
+    const PageHeaders = class Headers extends HostHeaders {};
+    for (const key of Reflect.ownKeys(HostHeaders.prototype)) {
+      if (key === "constructor") continue;
+      const descriptor = Object.getOwnPropertyDescriptor(HostHeaders.prototype, key);
+      Object.defineProperty(PageHeaders.prototype, key, {
+        ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}),
+      });
+    }
+    const exposeHeaders = (headers) => Object.getPrototypeOf(headers) === PageHeaders.prototype ? headers
+      : Object.setPrototypeOf(headers, PageHeaders.prototype);
+    const PageResponse = class Response extends HostResponse {
+      get headers() { return exposeHeaders(responseHeaders.call(this)); }
+      clone() { return Object.setPrototypeOf(HostResponse.prototype.clone.call(this), PageResponse.prototype); }
+      static error() { return Object.setPrototypeOf(HostResponse.error(), PageResponse.prototype); }
+      static redirect(url, status = 302) { return Object.setPrototypeOf(HostResponse.redirect(url, status), PageResponse.prototype); }
+      static json(data, init = undefined) { return Object.setPrototypeOf(HostResponse.json(data, init), PageResponse.prototype); }
+    };
+    const responseHeaders = Object.getOwnPropertyDescriptor(HostResponse.prototype, "headers").get;
     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 {
+    const PageRequest = class Request extends HostRequest {
       constructor(input, init = undefined) {
-        super(input instanceof globalThis.Request ? input : new URL(String(input), baseUrl()).href, init);
+        super(input instanceof HostRequest ? 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");
+        if (typeof init?.body === "string") {
+          const headers = requestHeaders.call(this);
+          if (!HostHeaders.prototype.has.call(headers, "content-type")) {
+            HostHeaders.prototype.set.call(headers, "content-type", "text/plain;charset=UTF-8");
+          }
         }
       }
+      clone() { return Object.setPrototypeOf(HostRequest.prototype.clone.call(this), PageRequest.prototype); }
     };
+    const requestHeaders = Object.getOwnPropertyDescriptor(HostRequest.prototype, "headers").get;
+    Object.defineProperty(PageRequest.prototype, "headers", {
+      get() { return exposeHeaders(requestHeaders.call(this)); }, enumerable: true, configurable: true,
+    });
 
     // 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;
+      const get = Object.getOwnPropertyDescriptor(HostRequest.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;
+    const cloneRequest = HostRequest.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;
@@ -989,10 +1052,13 @@ export function createPageRealm({ window, document, mode, hooks }) {
     }
 
     function makeResponse(data) {
-      const headers = new Headers(data.headers ?? []);
+      const headers = new PageHeaders(data.headers ?? []);
       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") ?? "" } });
+      // Fetch reads the header list internally; page instrumentation of the
+      // public Headers prototype must not affect response construction.
+      const contentType = HostHeaders.prototype.get.call(headers, "content-type") ?? "";
+      const native = new Response(body, { headers: { "content-type": contentType } });
       const response = {
         type: data.type ?? "basic",
         url: data.url ?? "",
@@ -1024,7 +1090,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     async function pageFetch(input, init = {}) {
       const request = await describeRequest(input, init ?? {});
       const signal = request.signal;
-      if (signal?.aborted) throw abortError();
+      if (disposed || signal?.aborted) throw signal?.reason ?? abortError();
       const scheme = new URL(request.url).protocol;
       let pending;
       let networkPending = null;
@@ -1047,21 +1113,38 @@ export function createPageRealm({ window, document, mode, hooks }) {
       } else {
         const { signal: _signal, ...plain } = request;
         networkPending = hooks.pageFetch(plain);
+        pendingPageFetches.add(networkPending);
         // Network and CORS failures reach the page as a bare TypeError, as in
         // browsers; the reason is only logged to the console.
         pending = networkPending.catch((error) => {
           const text = `fetch ${plain.url}: ${error?.message ?? error}`;
-          consoleEntries.push({ level: "error", text });
-          hooks.consoleMessage?.("error", text);
+          if (!disposed && !signal?.aborted) {
+            consoleEntries.push({ level: "error", text });
+            hooks.consoleMessage?.("error", text);
+          }
+          if (disposed || signal?.aborted) throw signal?.reason ?? abortError();
           throw new TypeError("Failed to fetch");
         });
       }
+      let abort;
       const aborted = signal
-        ? new Promise((_, reject) => signal.addEventListener("abort", () => {
-          networkPending?.abort?.();
-          reject(abortError());
-        }, { once: true }))
+        ? new Promise((_, reject) => {
+          abort = () => {
+            const reason = signal.reason ?? abortError();
+            networkPending?.abort?.(reason);
+            reject(reason);
+          };
+          signal.addEventListener("abort", abort, { once: true });
+          if (signal.aborted) abort();
+        })
         : null;
+      const cleanup = () => {
+        pendingPageFetches.delete(networkPending);
+        if (abort) signal.removeEventListener("abort", abort);
+      };
+      // The fetch promise resolves at headers. Keep cancellation attached
+      // until the streaming body finishes, including across navigation.
+      (networkPending?.finished ?? pending).then(cleanup, cleanup);
       const data = await (aborted ? Promise.race([pending, aborted]) : pending);
       hooks.afterTask();
       return makeResponse(data);
@@ -1075,7 +1158,6 @@ export function createPageRealm({ window, document, mode, hooks }) {
       let url = null;
       let response = null;
       let controller = null;
-      let timer = null;
       const xhr = {
         UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4,
         readyState: 0,
@@ -1101,7 +1183,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
           requestHeaders.append(String(name), String(value));
         },
         getResponseHeader(name) {
-          return response?.headers.get(String(name)) ?? null;
+          return response ? HostHeaders.prototype.get.call(response.headers, String(name)) : null;
         },
         getAllResponseHeaders() {
           if (!response) return "";
@@ -1113,15 +1195,19 @@ export function createPageRealm({ window, document, mode, hooks }) {
         },
         send(body = null) {
           if (xhr.readyState !== 1) throw new DOMException("The object's state must be OPENED.", "InvalidStateError");
-          controller = new AbortController();
-          if (xhr.timeout > 0) timer = schedule(() => controller.abort(), xhr.timeout, [], false);
+          const requestController = controller = new AbortController();
+          let timedOut = false;
+          const timer = xhr.timeout > 0 ? schedule(() => {
+            timedOut = true;
+            requestController.abort();
+          }, xhr.timeout, [], false) : null;
           fire("loadstart");
           pageFetch(url, {
             method,
             headers: requestHeaders,
             body: ["GET", "HEAD"].includes(method) ? null : body,
             credentials: xhr.withCredentials ? "include" : "same-origin",
-            signal: controller.signal,
+            signal: requestController.signal,
           }).then(async (result) => {
             response = result;
             xhr.status = result.status;
@@ -1130,19 +1216,27 @@ export function createPageRealm({ window, document, mode, hooks }) {
             setState(2);
             setState(3);
             const bytes = await result.arrayBuffer();
-            const text = new TextDecoder().decode(bytes);
+            const text = xhr.responseType === "arraybuffer" || xhr.responseType === "blob"
+              ? "" : new TextDecoder().decode(bytes);
             xhr.responseText = ["", "text"].includes(xhr.responseType) ? text : "";
             xhr.response = xhr.responseType === "json" ? safeJson(text)
               : xhr.responseType === "arraybuffer" ? bytes
-                : xhr.responseType === "blob" ? new Blob([bytes], { type: result.headers.get("content-type") ?? "" })
+                : xhr.responseType === "blob" ? new Blob([bytes], { type: HostHeaders.prototype.get.call(result.headers, "content-type") ?? "" })
                   : text;
             setState(4);
             fire("load");
             fire("loadend");
-          }, (error) => {
+          }).catch(() => {
+            // The response promise resolves at headers; body failures still
+            // run XHR's request-error steps instead of leaving it LOADING.
+            response = null;
             xhr.status = 0;
+            xhr.statusText = "";
+            xhr.responseURL = "";
+            xhr.response = null;
+            xhr.responseText = "";
             setState(4);
-            fire(error?.name === "AbortError" ? (timer !== null && xhr.timeout > 0 ? "timeout" : "abort") : "error");
+            fire(timedOut ? "timeout" : requestController.signal.aborted ? "abort" : "error");
             fire("loadend");
           }).finally(() => {
             if (timer !== null) cancel(timer);
@@ -1308,9 +1402,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
       fetch: function fetch(input, init = undefined) { return pageFetch(input, init); },
       XMLHttpRequest,
       WebSocket,
-      Headers,
+      Headers: PageHeaders,
       Request: PageRequest,
-      Response,
+      Response: PageResponse,
       AbortController,
       AbortSignal,
       FormData,
@@ -1476,6 +1570,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return Promise.resolve(values);
     },
   };
+  installImageLoadingAttributes(elementInterfacePrototypes.get("HTMLImageElement"), nodeOf);
   const { location, setHref } = locationBinding(document.URL, hooks.navigate);
   const { History, history, pushEntry } = historyBinding(location, setHref);
   const { Event, CustomEvent, ...uiEvents } = eventConstructors(realm);
@@ -1487,6 +1582,10 @@ export function createPageRealm({ window, document, mode, hooks }) {
   const messaging = createMessaging({
     realm, window, pageGlobal: () => pageGlobal, runTask, callPage, DOMException, frames: hooks.frames ?? null,
   });
+  const broadcasts = createBroadcastChannels({
+    origin: hooks.frames?.self.origin() ?? new URL(document.URL).origin,
+    EventTarget: eventTargets.EventTarget, realm, runTask, DOMException,
+  });
 
   const platform = platformObjects({
     eventTargets, userAgent, userAgentDataMembers: chromeVersion ? userAgentDataMembers : null, mobile: mobileUserAgent, viewport: hooks.viewport,
@@ -1533,12 +1632,13 @@ export function createPageRealm({ window, document, mode, hooks }) {
     // SES rewrites dynamic import() in evaluated classic scripts to this
     // hook. Resolve it through the same module loader and network boundary as
     // parser-inserted modules.
-    __import__: (specifier) => importModule(String(specifier), currentScript?.src || document.URL),
+    __import__: (specifier) => importModule(String(specifier), currentScript?.src || document.baseURI || document.URL),
     performance: platform.performance,
     PerformanceObserver: userTiming.PerformanceObserver,
     crypto: platform.crypto,
     ...platform.interfaces,
     CSSStyleDeclaration: cssStyleDeclarationInterface(realm),
+    ValidityState: validity.Interface,
     ...trustedTypes.interfaces,
     trustedTypes: trustedTypes.trustedTypes,
     Event,
@@ -1591,15 +1691,19 @@ export function createPageRealm({ window, document, mode, hooks }) {
         const tag = String(name).toLowerCase();
         if (typeof constructor !== "function") throw new TypeError("Custom element constructor must be a function");
         if (customElementConstructors.has(tag)) throw new DOMException("Custom element already defined", "NotSupportedError");
+        let captureInitialAttributes;
         const Adapter = class extends window.HTMLElement {
           constructor() {
             super();
+            const initialAttributes = captureInitialAttributes?.(this);
             const wrapper = realm.wrap(this);
             Object.setPrototypeOf(wrapper, constructor.prototype);
             const previous = constructingElement;
             constructingElement = this;
             try { Reflect.construct(constructor, []); }
+            catch (error) { initialAttributes?.cancel(); throw error; }
             finally { constructingElement = previous; }
+            initialAttributes?.finish();
           }
           connectedCallback() {
             const wrapper = realm.wrap(this);
@@ -1610,8 +1714,16 @@ export function createPageRealm({ window, document, mode, hooks }) {
             if (typeof wrapper.disconnectedCallback === "function") callPage(wrapper.disconnectedCallback, wrapper, []);
           }
         };
-        window.customElements.define(tag, Adapter);
+        captureInitialAttributes = installAttributeReactions(Adapter, constructor, realm, callPage);
         customElementConstructors.set(tag, constructor);
+        try { window.customElements.define(tag, Adapter); }
+        catch (error) {
+          // The definition is observable while existing elements upgrade.
+          // Validation failures happen before registration; constructor errors
+          // can happen afterward and must not erase that registered identity.
+          if (window.customElements.get(tag) !== Adapter) customElementConstructors.delete(tag);
+          throw error;
+        }
         // Upgrades change :defined without a DOM mutation.
         hooks.definedChanged?.(tag);
       },
@@ -1626,6 +1738,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       },
     },
     ...INTERFACES,
+    DOMStringMap,
     Node: NodeInterface,
     Text: TextInterface,
     CharacterData: CharacterDataInterface,
@@ -1634,6 +1747,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
     Document: DocumentInterface,
     HTMLDocument: DocumentInterface,
     DocumentFragment: DocumentFragmentInterface,
+    DOMParser,
+    XMLSerializer,
     ...typeCheckInterfaces(),
     addEventListener: windowEvents.addEventListener,
     removeEventListener: windowEvents.removeEventListener,
@@ -1682,6 +1797,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     postMessage: messaging.postMessage,
     MessageChannel: messaging.MessageChannel,
     MessagePort: messaging.MessagePort,
+    BroadcastChannel: broadcasts.BroadcastChannel,
   };
   const accessors = {
     innerWidth: viewportValue("width"),
@@ -1702,7 +1818,8 @@ export function createPageRealm({ window, document, mode, hooks }) {
     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,
+      realm, documentUrl: () => document.URL, documentBaseUrl: () => document.baseURI || document.URL,
+      fetchScript: hooks.fetchScript, runTask, callPage, reportError, DOMException,
       constructorHelper,
       pagePorts: messaging.ports,
       globals: Object.fromEntries(["console", "atob", "btoa", "TextEncoder", "TextDecoder", "URL", "URLSearchParams",
@@ -1758,6 +1875,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
     });
     Object.defineProperty(PagePromise, "length", { value: 1, configurable: true });
     pageGlobal.Promise = PagePromise;
+    pageGlobal.Error = errorInterface(pageGlobal.Error, 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.
@@ -1809,8 +1927,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
         __rejectSomeDirectEvalExpressions__: false,
       });
     evaluate = (source) => {
-      const classic = rewriteClassicScriptSource(source);
-      return evaluatePrepared({ code: escapeSesHtmlComments(classic.code), parsed: classic.parsed, strict: classic.strict });
+      return evaluatePrepared(prepareClassicScript(source));
     };
     // Module code is already strict with its own scope; no global lifting.
     evaluateModuleCode = (code) => compartment.evaluate(escapeSesHtmlComments(code, "module"), {
@@ -1877,7 +1994,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       if (node.nodeType !== 1) continue;
       for (const script of [node, ...node.querySelectorAll("script")]) {
         if (script.tagName !== "SCRIPT" || !createdScripts.has(script) || startedScripts.has(script)) continue;
-        if (!script.isConnected) continue;
+        if (!script.isConnected || script.ownerDocument !== document) continue;
         runInsertedScript(script);
       }
     }
@@ -1903,7 +2020,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
       runClassic(script, script.textContent);
       return;
     }
-    const pending = hooks.fetchScript(new URL(src, document.URL).href).then(
+    const pending = hooks.fetchScript(new URL(src, script.baseURI || document.URL).href).then(
       async (source) => {
         runClassic(script, source, await preparedFor(prepareOffThread(source), source));
         runTask(() => script.dispatchEvent(new window.Event("load")));
@@ -1928,7 +2045,9 @@ export function createPageRealm({ window, document, mode, hooks }) {
   // phases, see module-transform.js.
 
   function ensureFetched(url, type, sourceOverride = null) {
-    const key = `${type ?? "js"} ${url}`;
+    // Inline modules are distinct scripts sharing a real base URL. Their
+    // identity must not leak into import.meta.url as an invented fragment.
+    const key = sourceOverride === null ? `${type ?? "js"} ${url}` : `inline:${++inlineModuleCount}`;
     let record = modules.get(key);
     if (record) return record.fetched;
     record = { url, type, state: "fetching", namespace: Object.create(null), deps: [], error: null };
@@ -2048,11 +2167,12 @@ export function createPageRealm({ window, document, mode, hooks }) {
   async function runModuleScript(script) {
     const src = script.getAttribute("src");
     try {
-      if (src) await importModule(new URL(src, document.URL).href, document.URL);
-      else await importModule(`${document.URL}#inline-module-${++inlineModuleCount}`, document.URL, null, script.textContent ?? "");
+      const baseURL = script.baseURI || document.URL;
+      if (src) await importModule(new URL(src, baseURL).href, baseURL);
+      else await importModule(baseURL, baseURL, null, script.textContent ?? "");
       if (src) runTask(() => script.dispatchEvent(new window.Event("load")));
     } catch (error) {
-      reportError(error, src ? new URL(src, document.URL).href : document.URL);
+      reportError(error, src ? new URL(src, script.baseURI || document.URL).href : document.URL);
       if (src) runTask(() => script.dispatchEvent(new window.Event("error")));
     }
   }
@@ -2178,7 +2298,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
           continue;
         }
         try {
-          const url = new URL(src, document.URL).href;
+          const url = new URL(src, script.baseURI || document.URL).href;
           if ((script.getAttribute("type") ?? "").trim().toLowerCase() === "module") {
             ensureFetched(resolveModuleSpecifier(url, document.URL, importMap), null).then(loadGraph).catch(() => {});
           } else {
@@ -2208,7 +2328,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
         let source;
         try {
           source = src
-            ? await (preloaded.get(script) ?? hooks.fetchScript(new URL(src, document.URL).href))
+            ? await (preloaded.get(script) ?? hooks.fetchScript(new URL(src, script.baseURI || document.URL).href))
             : script.textContent ?? "";
         } catch (error) {
           reportError(error);
@@ -2284,6 +2404,12 @@ export function createPageRealm({ window, document, mode, hooks }) {
       messaging.receive(message);
     },
 
+    /** The renderer completed layout or changed a scroll offset. */
+    layoutChanged(version) {
+      const viewport = hooks.viewport();
+      layoutObservers.update(version, viewport.scrollX, viewport.scrollY, viewport.width, viewport.height, viewport.devicePixelRatio);
+    },
+
     /** A MediaSource object, or the one registered at a blob URL. */
     isMediaSource(value) {
       return mediaScope.isMediaSource(value);
@@ -2297,9 +2423,15 @@ export function createPageRealm({ window, document, mode, hooks }) {
 
     dispose() {
       disposed = true;
+      for (const pending of pendingPageFetches) pending.abort?.();
+      pendingPageFetches.clear();
+      disposeDocumentCanvases(document);
       stopRejectionEvents();
+      layoutObservers.dispose();
+      parserWindow?.happyDOM?.close?.();
       if (blobUrlFallback === mediaScope) blobUrlFallback = null;
       messaging.dispose();
+      broadcasts.dispose();
       workers?.dispose();
       // Leaving the document closes its WebSockets (1001 "going away").
       for (const close of openSockets) close();
@@ -2478,56 +2610,6 @@ function directEvalHelper(compartment, pageGlobal, scriptText) {
   };
 }
 
-/**
- * window.History and window.history for one document. The methods live on a
- * per-document History.prototype that pages may wrap (dev servers do, to see
- * client-side routing). pushState/replaceState change the URL and state
- * without navigating or firing events; traversal is not modelled.
- */
-function historyBinding(location, setHref) {
-  let state = null;
-  let length = 1;
-  const change = (data, url) => {
-    if (url === undefined || url === null) return;
-    const target = new URL(String(url), location.href);
-    if (target.origin !== new URL(location.href).origin) {
-      throw new DOMException(`A history state object with URL '${target.href}' cannot be created in a document with origin '${new URL(location.href).origin}'.`, "SecurityError");
-    }
-    setHref(target.href);
-  };
-  function History() {
-    throw new TypeError("Illegal constructor");
-  }
-  History.prototype = {
-    constructor: History,
-    get length() {
-      return length;
-    },
-    get state() {
-      return state;
-    },
-    scrollRestoration: "auto",
-    back() {},
-    forward() {},
-    go() {},
-    pushState(data, _title, url = undefined) {
-      change(data, url);
-      state = data ?? null;
-      length++;
-    },
-    replaceState(data, _title, url = undefined) {
-      change(data, url);
-      state = data ?? null;
-    },
-  };
-  // A fragment navigation adds an entry with no state (a same-URL one replaces it).
-  const pushEntry = (replace) => {
-    state = null;
-    if (!replace) length++;
-  };
-  return { History, history: Object.create(History.prototype), pushEntry };
-}
-
 /** window.location; `setHref` moves it for same-document (fragment) navigations. */
 function locationBinding(href, navigate) {
   const url = () => new URL(href);
@@ -2773,7 +2855,18 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
     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;
+    const translate = (value, size) => {
+      if (typeof value === "number") return value;
+      if (value?.unit === "%") return value.value / 100 * size;
+      if (value?.unit !== "math") return 0;
+      if (value.kind === "calc") return value.px + value.percent / 100 * size;
+      if (value.kind === "scale") return value.factor * translate(value.value, size);
+      const parts = value.values.map(part => translate(part, size));
+      if (value.kind === "sum") return parts.reduce((sum, part) => sum + part, 0);
+      if (value.kind === "min") return Math.min(...parts);
+      if (value.kind === "max") return Math.max(...parts);
+      return Math.max(parts[0], Math.min(parts[1], parts[2]));
+    };
     Object.assign(values, {
       display: style.display,
       position: style.position,
@@ -2783,10 +2876,16 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
       backgroundImage: style.backgroundImage == null ? "none" : String(style.backgroundImage),
       fontSize: px(style.fontSize),
       fontWeight: String(style.fontWeight),
+      fontStyle: style.fontStyle ?? "normal",
+      fontStretch: `${style.fontStretch ?? 100}%`,
       fontFamily: (style.fontFamily ?? []).join(", "),
+      translate: style.translate ? (style.translate.y === 0 ? length(style.translate.x)
+        : `${length(style.translate.x)} ${length(style.translate.y)}`) : "none",
       lineHeight: style.lineHeight == null ? "normal" : px(style.lineHeight),
       textAlign: style.textAlign,
       whiteSpace: style.whiteSpace,
+      WebkitLineClamp: style.webkitLineClamp == null ? "none" : String(style.webkitLineClamp),
+      WebkitBoxOrient: style.webkitBoxOrient,
       verticalAlign: typeof style.verticalAlign === "number" ? px(style.verticalAlign) : String(style.verticalAlign),
       textOverflow: style.textOverflow,
       boxSizing: style.boxSizing,
@@ -2811,9 +2910,8 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
       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),
+      rowGap: style.rowGapNormal ? "normal" : length(style.rowGap),
+      columnGap: style.columnGapNormal ? "normal" : length(style.columnGap),
       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",
@@ -2823,6 +2921,23 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
       overflowX: style.overflowScrollX ?? (style.overflowX === "clip" ? "clip" : "visible"),
       overflowY: style.overflowScrollY ?? (style.overflowY === "clip" ? "clip" : "visible"),
     });
+    const cornerNames = ["TopLeft", "TopRight", "BottomRight", "BottomLeft"];
+    const cornerLengths = cornerNames.map(corner => (style[`border${corner}Radius`]
+      ?? [style.borderRadius, style.borderRadius]).map(length));
+    cornerNames.forEach((corner, index) => {
+      const [x, y] = cornerLengths[index];
+      values[`border${corner}Radius`] = x === y ? x : `${x} ${y}`;
+    });
+    const compress = ([a, b, c, d]) => a === c && b === d ? a === b ? a : `${a} ${b}`
+      : b === d ? `${a} ${b} ${c}` : `${a} ${b} ${c} ${d}`;
+    const horizontalRadius = compress(cornerLengths.map(pair => pair[0]));
+    const verticalRadius = compress(cornerLengths.map(pair => pair[1]));
+    values.borderRadius = horizontalRadius === verticalRadius ? horizontalRadius : `${horizontalRadius} / ${verticalRadius}`;
+    const rtl = style.direction === "rtl";
+    values.borderStartStartRadius = values[rtl ? "borderTopRightRadius" : "borderTopLeftRadius"];
+    values.borderStartEndRadius = values[rtl ? "borderTopLeftRadius" : "borderTopRightRadius"];
+    values.borderEndStartRadius = values[rtl ? "borderBottomRightRadius" : "borderBottomLeftRadius"];
+    values.borderEndEndRadius = values[rtl ? "borderBottomLeftRadius" : "borderBottomRightRadius"];
     values.overflow = values.overflowX === values.overflowY ? values.overflowX : `${values.overflowX} ${values.overflowY}`;
     sides.forEach((side, index) => {
       values[`margin${side}`] = length(style.margin[index]);
@@ -2843,6 +2958,8 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
   };
   return {
     ...values,
+    webkitLineClamp: values.WebkitLineClamp,
+    webkitBoxOrient: values.WebkitBoxOrient,
     length: names.length,
     item: (index) => names[Number(index)] ?? "",
     getPropertyValue: (name) => {
@@ -2858,6 +2975,7 @@ function computedStyleBinding(style, { custom = null, bounds = null, element = n
 
 function formatConsoleValue(value) {
   if (typeof value === "string") return value;
+  if (hostErrorIsError?.(value)) return diagnosticError(value);
   try {
     return JSON.stringify(value) ?? String(value);
   } catch {
@@ -2865,6 +2983,19 @@ function formatConsoleValue(value) {
   }
 }
 
+// SES retains a privileged stack reader in the host compartment. Use it only
+// when formatting developer diagnostics: pages still see tamed Error.stack
+// and never receive the reader itself.
+function diagnosticError(error) {
+  const message = error?.name ? `${error.name}: ${error.message}` : String(error?.message ?? error);
+  try {
+    const stack = error?.stack || globalThis.getStackString?.(error);
+    return stack ? (stack.startsWith(message) ? stack : `${message}\n${stack}`) : message;
+  } catch {
+    return message;
+  }
+}
+
 function safeJson(text) {
   try {
     return JSON.parse(text);