buninu-browser 0.2.3 → 0.3.0

package/lib/renderer/page-renderer.js

@@ -23,22 +23,30 @@
  * after the load event.
  */
 import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
-import { setCanvasKit } from "./canvas-2d.js";
+import { setCanvasKit, canvasResource, observeDocumentCanvases } from "./canvas-2d.js";
+import { createCanvasTextRenderer, parseCanvasFont } from "./canvas-text.js";
 import { DESKTOP_USER_AGENT } from "../user-agent.js";
 import { parseHTMLDocument } from "../happy-dom/parser.js";
 import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
-import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
+import { scrollAlignmentDelta } from "./scroll-into-view.js";
+import { elementAtPoint, elementBounds, elementBox, hitTest, interactiveRegions, renderNodeAtPoint } from "../input/hit-test.js";
 import { beginImageLoad, finishImageLoad } from "./image-loading.js";
+import { createImageResourceLoader, imageCrossOrigin, imageRequestKey } from "./image-resources.js";
+import { DocumentFonts } from "./font-loading.js";
 import { dispatchPointerMove } from "./pointer-move.js";
 import { keyboardInput } from "./keyboard-input.js";
 import { playbackEvent } from "./media-playback-events.js";
 import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.js";
-import { absolutizeStyleSheetUrls, matchSelectors, StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { absolutizeStyleSheetUrls, extractFontFaces, matchSelectors, mediaQueryMatches, StyleEngine, topmostConnected } from "../style/computed-style.js";
 import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
 import { elementFeatures, sheetTraits } from "../style/selector-traits.js";
 import { buildDisplayList, visibleItems } from "../paint/display-list.js";
-import { backgroundBytes, cropViewport, encodeImage } from "../paint/frame.js";
+import { backgroundBytes, rawFrame, captureViewport, cropViewport, encodeImageBase64 } from "../paint/frame.js";
+import { FrameCaptureCache } from "../paint/frame-cache.js";
+import { RasterReadback } from "../paint/raster-readback.js";
+import { insetRadii, roundedRect } from "../paint/rounded-rect.js";
+import { appendParagraphText } from "../paint/paragraph-text.js";
 import { CLASSIC_SCRIPT_TYPES, createPageRealm } from "./page-realm.js";
 import { originOf } from "./messaging.js";
 import { MOBILE_USER_AGENT } from "./flags.js";
@@ -143,6 +151,11 @@ export function loadGraphics() {
     const fontCollection = CanvasKit.FontCollection.Make();
     fontCollection.setDefaultFontManager(fontProvider);
     fontCollection.enableFontFallback();
+    const builtinTypefaces = [...loadedFamilies.values()].map(family => ({
+      family, typeface: fontProvider.matchFamilyStyle(family, {
+        weight: 400, width: 5, slant: CanvasKit.FontSlant.Upright,
+      }),
+    })).filter(entry => entry.typeface);
 
     const fontFamilies = uiFontNames.map((name) => (fontCatalogue.fonts[name].families ?? [name])[0]);
     const sansSerifFamily = fontFamilies[0];
@@ -158,7 +171,7 @@ export function loadGraphics() {
     ]);
     return loadedGraphics = {
       CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
-      genericFamilies,
+      genericFamilies, builtinTypefaces,
     };
   })();
 }
@@ -214,6 +227,7 @@ function buildPageRenderer({
   requestDownload = () => {},
   reportError = () => {},
   pageFetch = () => Promise.reject(new TypeError("network access is not available")),
+  clipboardWrite = () => Promise.reject(Error("Clipboard unavailable")),
   webSockets = null,
   audio = null,
   setCookie = () => {},
@@ -231,38 +245,47 @@ function buildPageRenderer({
   // An iframe's document (see syncFrames): frames go to the embedding page,
   // which needs only the viewport, so nothing is painted ahead.
   embedded = false,
+  allocateFramePixels = null,
   // This document's window handle, made by the embedding page (see windowHandle).
   frameWindow = null,
 }, {
   CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
-  genericFamilies,
+  genericFamilies, builtinTypefaces,
 }) {
+  let documentFonts = null;
+  let fontSheets = null;
+  let fontEnvironment = "";
+  let fontDefinitions = [];
+  let fontDefinitionKey = "[]";
   const resolvedFamilies = new Map();
   /** First available family from a computed font-family list, then the UI fallbacks. */
-  function resolveFontFamilies(families = ["sans-serif"], weight = 400) {
+  function resolveFontFamilies(families = ["sans-serif"], weight = 400, fontStyle = "normal", point = null, stretch = 100) {
     const bold = weight >= 600;
-    const key = `${bold}\n${families.join("\n")}`;
-    let resolved = resolvedFamilies.get(key);
+    const key = `${weight}/${fontStyle}/${stretch}\n${families.join("\n")}`;
+    let resolved = point === null && resolvedFamilies.get(key);
     if (!resolved) {
-      let primary = families
-        .map((family) => loadedFamilies.get(family.toLowerCase()) ?? genericFamilies.get(family.toLowerCase()))
-        .find(Boolean) ?? sansSerifFamily;
-      if (bold && primary === monospaceFamily) primary = monospaceBoldFamily;
-      resolved = [primary, ...fontFamilies.filter((family) => family !== primary)];
-      resolvedFamilies.set(key, resolved);
+      let primary = [];
+      for (const family of families) {
+        const web = documentFonts?.resolve(family, weight, fontStyle, point, stretch);
+        if (web?.length) { primary.push(...web); continue; }
+        const builtin = loadedFamilies.get(family.toLowerCase()) ?? genericFamilies.get(family.toLowerCase());
+        if (builtin) { primary.push(bold && builtin === monospaceFamily ? monospaceBoldFamily : builtin); break; }
+      }
+      if (!primary.length) primary = [sansSerifFamily];
+      resolved = [...primary, ...fontFamilies.filter((family) => !primary.includes(family))];
+      if (point === null) resolvedFamilies.set(key, resolved);
     }
     return resolved;
   }
-  const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
-  const emojiPresentation = /^\p{Emoji_Presentation}/u;
   const renderTreeBuilder = new RenderTreeBuilder();
   const layoutEngine = new LayoutEngine({ measureText, fontMetrics });
-  const styleEngine = new StyleEngine();
+  const styleEngine = new StyleEngine({ measureText });
   // Incremental restyle: what may have changed style since the last
   // computation. DOM mutations come from a MutationObserver; state that is
   // not in the DOM tree (checked, value, focus) is marked by the code that
   // changes it. `full` asks for a complete restyle.
-  const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null, activeElement: null };
+  const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null,
+    activeElement: null, focusAncestors: new Set() };
   let selectorTraits = { sibling: false, has: null, sheets: null };
   let lastStyleParts = "";
   let laidOutSheets = null;
@@ -306,6 +329,7 @@ function buildPageRenderer({
     deviceScaleFactor: 1,
     pageScale: 1,
     needsPaint: true,
+    resourcePaintDirty: false,
     loading: false,
     hints: [],
     hintsVisible: false,
@@ -316,6 +340,7 @@ function buildPageRenderer({
     backgroundColor: "rgba(255, 255, 255, 1)",
     resources: new WeakMap(),
     decodedImages: [],
+    imageElements: new Set(),
     imagesLoaded: null,
     // CSS background images by absolute URL: { resource, loaded } (see queueBackgroundImages).
     backgrounds: new Map(),
@@ -341,15 +366,58 @@ function buildPageRenderer({
     if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
     return response;
   }
+  const loadImageResource = createImageResourceLoader(CanvasKit, fetchResource, pageFetch);
+  const renderCanvasText = createCanvasTextRenderer(CanvasKit, makeParagraph);
+
+  function resetDocumentFonts() {
+    documentFonts?.dispose();
+    fontSheets = null;
+    fontDefinitions = [];
+    if (fontDefinitionKey !== "[]") clearFontCaches();
+    fontEnvironment = "";
+    fontDefinitionKey = "[]";
+    documentFonts = new DocumentFonts({
+      CanvasKit, builtins: builtinTypefaces, defaultCollection: fontCollection, fetch: pageFetch,
+      availableFamilies: new Set([...loadedFamilies.keys(), ...genericFamilies.keys()]),
+      changed() {
+        if (disposedRenderer) return;
+        clearFontCaches();
+        // Font metrics also affect CSS ch units and normal line-height.
+        styleChanges.full = true;
+        page.dirty = true;
+        page.resourceLayoutDirty = true;
+        page.needsPaint = true;
+        scheduleFrame();
+      },
+      error: error => trace?.(`font failed: ${error?.message ?? error}`),
+    });
+  }
 
-  function makeParagraph(text, computedStyle = null, fontSize = computedStyle?.fontSize ?? 16, scale = 1) {
+  function clearFontCaches() {
+    resolvedFamilies.clear();
+    measuredWidths.clear();
+    measuredCount = 0;
+    fontKeys = new WeakMap();
+    fontMetricsCache.clear();
+    clearPaintParagraphs();
+    rasterized.list = null;
+  }
+
+  function queueFontLoads() {
+    if (page.renderTree && fontDefinitions.length) documentFonts.update(fontDefinitions,
+      [...page.renderTree.nodesById.values()].filter(node => node.type === "text"));
+  }
+
+  function makeParagraph(text, computedStyle = null, fontSize = computedStyle?.fontSize ?? 16, scale = 1, foregroundPaint = null) {
     const color = canvasColor(CanvasKit, computedStyle?.color ?? "rgba(0, 0, 0, 1)");
     const weight = computedStyle?.fontWeight ?? 400;
-    const families = resolveFontFamilies(computedStyle?.fontFamily, weight);
-    const emojiFontFamilies = [
-      ...families.filter((name) => name.includes("Emoji")),
-      ...families.filter((name) => !name.includes("Emoji")),
-    ];
+    const fontStyle = computedStyle?.fontStyle ?? "normal";
+    const stretch = computedStyle?.fontStretch ?? 100;
+    const widths = [50, 62.5, 75, 87.5, 100, 112.5, 125, 150, 200];
+    const width = widths.reduce((best, value, index) => Math.abs(value - stretch) < Math.abs(widths[best] - stretch) ? index : best, 4) + 1;
+    const slant = fontStyle === "italic" ? CanvasKit.FontSlant.Italic
+      : fontStyle === "oblique" ? CanvasKit.FontSlant.Oblique : CanvasKit.FontSlant.Upright;
+    const families = resolveFontFamilies(computedStyle?.fontFamily, weight, fontStyle, null, stretch);
     // text-decoration lines, drawn by SkParagraph under/over/through the glyphs.
     const decoration = computedStyle?.decoration ? {
       decoration: computedStyle.decoration.lines.reduce((mask, line) => mask | ({
@@ -363,30 +431,60 @@ function buildPageRenderer({
         color,
         fontFamilies: families,
         fontSize: Math.max(1, Math.round(fontSize * scale)),
-        fontStyle: { weight },
+        fontStyle: { weight, slant, width },
         // Roboto is a variable font; static fonts ignore the axis and match by weight.
-        fontVariations: [{ axis: "wght", value: weight }],
+        fontVariations: [{ axis: "wght", value: weight }, { axis: "wdth", value: stretch }],
         ...decoration,
       },
       maxLines: 1,
+      ...(computedStyle?.direction ? { textDirection: computedStyle.direction === "rtl" ? CanvasKit.TextDirection.RTL : CanvasKit.TextDirection.LTR } : {}),
     });
-    const builder = CanvasKit.ParagraphBuilder.MakeFromFontCollection(style, fontCollection);
-    for (const { segment } of graphemes.segment(text || " ")) {
-      const emoji = emojiPresentation.test(segment) || segment.includes("\uFE0F");
-      if (emoji) {
-        builder.pushStyle(CanvasKit.TextStyle({
-          color,
-          ...decoration,
-          fontFamilies: emojiFontFamilies,
-          fontSize: Math.max(1, Math.round(fontSize * scale)),
-          fontStyle: { weight: computedStyle?.fontWeight ?? 400 },
-        }));
-      }
-      builder.addText(segment);
-      if (emoji) builder.pop();
+    const builder = CanvasKit.ParagraphBuilder.MakeFromFontCollection(style, documentFonts?.collection ?? fontCollection);
+    const backgroundPaint = foregroundPaint ? new CanvasKit.Paint() : null;
+    if (backgroundPaint) backgroundPaint.setColor(CanvasKit.TRANSPARENT);
+    const pushTextStyle = foregroundPaint
+      ? value => builder.pushPaintStyle(value, foregroundPaint, backgroundPaint) : value => builder.pushStyle(value);
+    const textStyle = (fontFamilies) => CanvasKit.TextStyle({ color, ...decoration, fontFamilies,
+      fontSize: Math.max(1, Math.round(fontSize * scale)), fontStyle: { weight, slant, width },
+      fontVariations: [{ axis: "wght", value: weight }, { axis: "wdth", value: stretch }] });
+    function append(text, fonts) {
+      let emojiStyle;
+      const writer = foregroundPaint ? { addText: value => builder.addText(value), pushStyle: pushTextStyle, pop: () => builder.pop() } : builder;
+      appendParagraphText(writer, text, () => emojiStyle ??= textStyle([
+        ...fonts.filter(name => name.includes("Emoji")), ...fonts.filter(name => !name.includes("Emoji")),
+      ]));
     }
+    if (foregroundPaint) pushTextStyle(textStyle(families));
+    if (documentFonts?.hasUnicodeRanges && text) {
+      // A downloaded subset may physically contain more glyphs than its CSS
+      // unicode-range permits. Apply the range when choosing native families,
+      // preserving whole adjacent runs for shaping instead of per-letter calls.
+      const choices = new Map();
+      let run = "", previous = null, previousKey = "";
+      const flush = () => {
+        if (!run) return;
+        pushTextStyle(textStyle(previous));
+        append(run, previous);
+        builder.pop();
+      };
+      for (const character of text) {
+        const point = character.codePointAt(0);
+        let choice = choices.get(point);
+        if (!choice) {
+          const fonts = resolveFontFamilies(computedStyle?.fontFamily, weight, fontStyle, point, stretch);
+          choices.set(point, choice = { fonts, key: fonts.join("\n") });
+        }
+        if (run && choice.key !== previousKey) { flush(); run = ""; }
+        previous = choice.fonts;
+        previousKey = choice.key;
+        run += character;
+      }
+      flush();
+    } else append(text, families);
+    if (foregroundPaint) builder.pop();
     const paragraph = builder.build();
     builder.delete();
+    backgroundPaint?.delete();
     return paragraph;
   }
 
@@ -420,22 +518,24 @@ function buildPageRenderer({
   }
 
   // Computed styles are immutable and shared, so each one's key is computed once.
-  const fontKeys = new WeakMap();
+  let fontKeys = new WeakMap();
   function fontKeyOf(computedStyle) {
     if (computedStyle && typeof computedStyle === "object") {
       const cached = fontKeys.get(computedStyle);
       if (cached) return cached;
     }
     const weight = computedStyle?.fontWeight ?? 400;
-    const key = `${Math.max(1, Math.round(computedStyle?.fontSize ?? 16))}/${weight}/${
-      resolveFontFamilies(computedStyle?.fontFamily, weight).join(",")}`;
+    const fontStyle = computedStyle?.fontStyle ?? "normal";
+    const stretch = computedStyle?.fontStretch ?? 100;
+    const key = `${Math.max(1, Math.round(computedStyle?.fontSize ?? 16))}/${weight}/${fontStyle}/${stretch}/${
+      resolveFontFamilies(computedStyle?.fontFamily, weight, fontStyle, null, stretch).join(",")}`;
     if (computedStyle && typeof computedStyle === "object") fontKeys.set(computedStyle, key);
     return key;
   }
 
   const fontMetricsCache = new Map();
   function fontMetrics(computedStyle = null) {
-    const key = `${computedStyle?.fontSize ?? 16}/${computedStyle?.fontWeight ?? 400}/${computedStyle?.fontFamily?.join(",")}`;
+    const key = fontKeyOf(computedStyle);
     let metrics = fontMetricsCache.get(key);
     if (!metrics) {
       const paragraph = makeParagraph("Hg", computedStyle);
@@ -452,9 +552,10 @@ function buildPageRenderer({
   // thread scrolls on its own (keys, fragments, script, a new document).
   let scrollEpoch = 0;
   let syncedScroll = { x: 0, y: 0 };
+  let syncedViewport = { width: 0, height: 0 };
   let tileSerial = 0;
   let lastTile = null;
-  let encoded = { key: "", png: "" };
+  const captures = new FrameCaptureCache();
   let prepaintTimer = null;
   let frameTimer = null;
   let lastRebuildMs = 0;
@@ -469,6 +570,67 @@ function buildPageRenderer({
   let rasterSurface = null;
   let rasterSurfaceWidth = 0;
   let rasterSurfaceHeight = 0;
+  const rasterReadback = new RasterReadback(CanvasKit, { shared: Boolean(onFrame), allocate: allocateFramePixels });
+  // A scroll or unrelated DOM update does not change text shaping. Keep a
+  // bounded set of visible paragraphs keyed by their complete shaping input.
+  // Both limits matter: a page may contain many unique or very long strings.
+  const paintedParagraphs = new Map();
+  let paragraphKeys = new WeakMap();
+  let paintedCharacters = 0;
+  const MAX_PAINT_PARAGRAPHS = 256;
+  const MAX_PAINT_CHARACTERS = 64_000;
+
+  function releasePaintParagraph(key, entry) {
+    entry.paragraph.delete();
+    paintedParagraphs.delete(key);
+    paintedCharacters -= entry.characters;
+  }
+
+  function clearPaintParagraphs() {
+    renderCanvasText.clear();
+    for (const entry of paintedParagraphs.values()) entry.paragraph.delete();
+    paintedParagraphs.clear();
+    paragraphKeys = new WeakMap();
+    paintedCharacters = 0;
+  }
+
+  function paragraphForPaint(item, scale, width) {
+    const retained = item.text.length <= 4096;
+    let cachedKey = retained && paragraphKeys.get(item);
+    if (retained && (!cachedKey || cachedKey.scale !== scale || cachedKey.width !== width)) {
+      cachedKey = { scale, width, key: JSON.stringify([item.text, item.color, item.font,
+        item.decoration, scale, width]) };
+      paragraphKeys.set(item, cachedKey);
+    }
+    const key = cachedKey?.key;
+    let entry = retained && paintedParagraphs.get(key);
+    if (entry) {
+      paintedParagraphs.delete(key);
+      paintedParagraphs.set(key, entry);
+      return entry;
+    }
+    const paragraph = makeParagraph(item.text, {
+      color: item.color, fontSize: item.font.size, fontWeight: item.font.weight, fontFamily: item.font.family,
+      fontStyle: item.font.style, fontStretch: item.font.stretch,
+      decoration: item.decoration,
+    }, undefined, scale);
+    try {
+      paragraph.layout(width);
+    } catch (error) {
+      paragraph.delete();
+      throw error;
+    }
+    entry = { paragraph, retained, characters: item.text.length };
+    if (entry.retained) {
+      paintedParagraphs.set(key, entry);
+      paintedCharacters += item.text.length;
+      while (paintedParagraphs.size > MAX_PAINT_PARAGRAPHS || paintedCharacters > MAX_PAINT_CHARACTERS) {
+        const [oldKey, oldEntry] = paintedParagraphs.entries().next().value;
+        releasePaintParagraph(oldKey, oldEntry);
+      }
+    }
+    return entry;
+  }
 
   /** Hint overlay contents, as a comparable key. */
   function overlayKey() {
@@ -485,6 +647,8 @@ function buildPageRenderer({
     if (page.displayList?.items.some((item) => item.fixed)
       && (rasterized.scrollX !== viewport.x || rasterized.scrollY !== viewport.y)) return false;
     if (rasterized.list === page.displayList) return true;
+    if (rasterized.list?.images.length !== page.displayList?.images.length
+      || page.displayList?.images.some((resource, index) => resource !== rasterized.list.images[index])) return false;
     if (!rasterized.list || !page.displayList || !Bun.deepEquals(rasterized.list.items, page.displayList.items)) return false;
     rasterized.list = page.displayList;
     return true;
@@ -492,6 +656,12 @@ function buildPageRenderer({
 
   /** Rasterizes the viewport and hands it to the compositor. */
   function render() {
+    if (disposedRenderer) return;
+    if (page.resourcePaintDirty) {
+      page.displayList = paintList();
+      page.resourcePaintDirty = false;
+    }
+    page.realm?.layoutChanged(page.layoutVersion);
     if (onVideo) for (const state of page.media.values()) readPresentedFrame(state);
     const width = Math.max(1, Math.floor(page.width));
     const height = Math.max(1, Math.floor(page.height));
@@ -499,15 +669,27 @@ function buildPageRenderer({
     if (lastTile && tileCovers(lastTile, region) && sameRasterInput()) {
       page.needsPaint = false;
       // Only this thread's scroll position changed: tell the compositor.
-      if (viewport.x !== syncedScroll.x || viewport.y !== syncedScroll.y) publish(lastTile);
+      if (viewport.x !== syncedScroll.x || viewport.y !== syncedScroll.y
+        || page.width !== syncedViewport.width || page.height !== syncedViewport.height) publish(lastTile);
     } else {
-      publish(rasterTile(region));
+      // Keep a previously prepainted region during ordinary page updates.
+      // Shrinking to the viewport and expanding again 30ms later used to
+      // rasterize each animation twice and repeatedly resize native surfaces.
+      const retained = !page.loading && lastTile && tileCovers(lastTile, region)
+        && lastTile.height <= height * 2.5;
+      publish(rasterTile(retained ? { x: lastTile.x, y: lastTile.y, width: lastTile.width, height: lastTile.height } : region));
     }
     schedulePrepaint();
   }
 
   /** Rasterizes a page rectangle (CSS pixels) into RGBA pixels. */
   function rasterTile(region) {
+    // Prepaint can run before a queued canvas/image repaint. Refresh native
+    // snapshots here too: the old display list may hold a released image.
+    if (page.resourcePaintDirty) {
+      page.displayList = paintList();
+      page.resourcePaintDirty = false;
+    }
     const scale = page.deviceScaleFactor;
     const pixelWidth = Math.max(1, Math.round(region.width * scale));
     const pixelHeight = Math.max(1, Math.round(region.height * scale));
@@ -526,14 +708,9 @@ function buildPageRenderer({
     drawHints(canvas, region);
     surface.flush();
     const image = surface.makeImageSnapshot();
-    const pixels = image.readPixels(0, 0, {
-      width: pixelWidth,
-      height: pixelHeight,
-      colorType: CanvasKit.ColorType.RGBA_8888,
-      alphaType: CanvasKit.AlphaType.Unpremul,
-      colorSpace: CanvasKit.ColorSpace.SRGB,
-    });
-    image.delete();
+    let pixels;
+    try { pixels = rasterReadback.read(image, pixelWidth, pixelHeight); }
+    finally { image.delete(); }
     const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight);
     page.needsPaint = false;
     rasterized = {
@@ -557,6 +734,7 @@ function buildPageRenderer({
   function publish(tile) {
     lastTile = tile;
     tileSerial++;
+    syncedViewport = { width: page.width, height: page.height };
     if (viewport.x !== syncedScroll.x || viewport.y !== syncedScroll.y) {
       scrollEpoch++;
       syncedScroll = { x: viewport.x, y: viewport.y };
@@ -587,7 +765,7 @@ function buildPageRenderer({
 
   /** After a paint or a compositor scroll, rasterize around the viewport once this thread is idle. */
   function schedulePrepaint() {
-    if (!onFrame || embedded) return;
+    if (disposedRenderer || !onFrame || embedded) return;
     hostClearTimeout(prepaintTimer);
     prepaintTimer = hostSetTimeout(() => {
       prepaintTimer = null;
@@ -606,25 +784,28 @@ function buildPageRenderer({
 
   /** A rendering opportunity for DOM changes nobody has asked to see yet. */
   function scheduleFrame() {
-    if (!onFrame || frameTimer || page.loading) return;
+    if (disposedRenderer || !onFrame || frameTimer || page.loading) return;
     frameTimer = hostSetTimeout(() => {
       frameTimer = null;
       refresh();
-    // Leave one rebuild-sized idle window after an expensive frame. Without
-    // it, a large document can spend all its time producing back-to-back
-    // frames while scripts are still making related mutations.
-    }, Math.max(50, lastRebuildMs * 2));
+    // Coalesce ordinary mutations for 16ms. Expensive style/layout rebuilds
+    // retain a longer idle window so related script mutations can settle
+    // instead of continuously rebuilding a large document.
+    }, Math.max(16, lastRebuildMs * 2));
   }
 
-  /** The viewport as a PNG (base64), cut from the latest tile. */
-  async function viewportPng() {
+  /** The viewport as an encoded image (base64), cut from the latest tile. */
+  async function viewportPng({ format = "png", quality = 80, optimizeForSpeed = false, clip } = {}) {
     if (!lastTile) return "";
-    const key = `${tileSerial}:${viewport.x}:${viewport.y}`;
-    if (encoded.key !== key) {
-      const { pixels, width, height } = cropViewport(lastTile, viewport.x, viewport.y, page.width, page.height);
-      encoded = { key, png: Buffer.from(await encodeImage(pixels, width, height)).toString("base64") };
+    if (format === 'rgba' || format === 'bgra') {
+      const {pixels,width,height} = captureViewport(lastTile, viewport.x, viewport.y, page.width, page.height,clip);
+      return rawFrame(pixels,width,height,format);
     }
-    return encoded.png;
+    const key = `${tileSerial}:${viewport.x}:${viewport.y}:${page.width}:${page.height}:${format}:${quality}:${optimizeForSpeed}:${JSON.stringify(clip)}`;
+    return captures.get(key, () => {
+      const { pixels, width, height } = captureViewport(lastTile, viewport.x, viewport.y, page.width, page.height,clip);
+      return encodeImageBase64(pixels, width, height, { format, quality, optimizeForSpeed });
+    });
   }
 
   /** Rasterizes display items intersecting the viewport onto a CanvasKit canvas. */
@@ -637,11 +818,12 @@ function buildPageRenderer({
       pixel(rect.x - view.x), pixel(rect.y - view.y), pixel(rect.width), pixel(rect.height),
     );
     const deviceRRect = (rect, radii) => radii && (radii.x > 0 || radii.y > 0)
-      ? CanvasKit.RRectXY(deviceRect(rect), radii.x * scale, radii.y * scale)
+      ? roundedRect(deviceRect(rect), radii, scale)
       : null;
     // Returns a paint plus a release function that also frees its shader.
     const fillPaint = (item) => {
       const paint = new CanvasKit.Paint();
+      if (item.radii && (item.radii.x > 0 || item.radii.y > 0)) paint.setAntiAlias(true);
       const shader = item.gradient ? gradientShader(item.gradient, view, scale) : null;
       if (shader) paint.setShader(shader);
       else paint.setColor(canvasColor(CanvasKit, item.color));
@@ -831,25 +1013,23 @@ function buildPageRenderer({
       } else if (item.op === "drawSvg") {
         drawSvg(item);
       } else if (item.op === "drawText") {
-        const textStyle = {
-          color: item.color, fontSize: item.font.size, fontWeight: item.font.weight, fontFamily: item.font.family,
-          decoration: item.decoration,
-        };
-        const paragraph = makeParagraph(item.text, textStyle, undefined, scale);
-        paragraph.layout(pixel(Math.max(1, view.width + view.x - item.x)));
-        if (item.gradient) {
-          // background-clip:text: draw glyphs, then keep the gradient only where they are.
-          canvas.saveLayer(null, deviceRect(item.bounds));
-          canvas.drawParagraph(paragraph, pixel(item.x - view.x), pixel(item.y - view.y));
-          const paint = fillPaint(item);
-          paint.setBlendMode(CanvasKit.BlendMode.SrcIn);
-          canvas.drawRect(deviceRect(item.bounds), paint);
-          paint.release();
-          canvas.restore();
-        } else {
-          canvas.drawParagraph(paragraph, pixel(item.x - view.x), pixel(item.y - view.y));
+        const entry = paragraphForPaint(item, scale, pixel(Math.max(1, view.width + view.x - item.x)));
+        try {
+          if (item.gradient) {
+            // background-clip:text: draw glyphs, then keep the gradient only where they are.
+            canvas.saveLayer(null, deviceRect(item.bounds));
+            canvas.drawParagraph(entry.paragraph, pixel(item.x - view.x), pixel(item.y - view.y));
+            const paint = fillPaint(item);
+            paint.setBlendMode(CanvasKit.BlendMode.SrcIn);
+            canvas.drawRect(deviceRect(item.bounds), paint);
+            paint.release();
+            canvas.restore();
+          } else {
+            canvas.drawParagraph(entry.paragraph, pixel(item.x - view.x), pixel(item.y - view.y));
+          }
+        } finally {
+          if (!entry.retained) entry.paragraph.delete();
         }
-        paragraph.delete();
       }
     }
   }
@@ -866,13 +1046,9 @@ function buildPageRenderer({
     const Y0 = (item.rect.y - view.y) * scale;
     const X1 = X0 + item.rect.width * scale;
     const Y1 = Y0 + item.rect.height * scale;
-    const rx = item.radii.x * scale;
-    const ry = item.radii.y * scale;
     const [x0, y0, x1, y1] = [X0 + left, Y0 + top, Math.max(X0 + left, X1 - right), Math.max(Y0 + top, Y1 - bottom)];
-    const outer = Float32Array.of(X0, Y0, X1, Y1, rx, ry, rx, ry, rx, ry, rx, ry);
-    const inner = Float32Array.of(x0, y0, x1, y1,
-      Math.max(0, rx - left), Math.max(0, ry - top), Math.max(0, rx - right), Math.max(0, ry - top),
-      Math.max(0, rx - right), Math.max(0, ry - bottom), Math.max(0, rx - left), Math.max(0, ry - bottom));
+    const outer = roundedRect([X0, Y0, X1, Y1], item.radii, scale);
+    const inner = roundedRect([x0, y0, x1, y1], insetRadii(item.radii, item.widths), scale);
     const sides = [
       [X0, Y0, X1, Y0, x1, y0, x0, y0],
       [X1, Y0, X1, Y1, x1, y1, x1, y0],
@@ -1029,6 +1205,29 @@ function buildPageRenderer({
     }
   }
 
+  function nativeControlState(element) {
+    return [element.value, element.checked, element.indeterminate, element.selected, element.selectedIndex];
+  }
+
+  /** HTML activation can change control properties without attribute records
+   * (including a different radio in the same group). Compare these few native
+   * states instead of restyling the entire document for every pointer click.
+   */
+  function controlStatesBeforeActivation() {
+    return new Map(Array.from(page.document.querySelectorAll("input,select,textarea,option"),
+      element => [element,nativeControlState(element)]));
+  }
+
+  function invalidateActivatedControls(previous) {
+    for (const [element,before] of previous) {
+      const after = nativeControlState(element);
+      if (before.some((value,index) => value !== after[index])) {
+        markStyleDirty(element);
+        page.dirty = true;
+      }
+    }
+  }
+
   function observeStyleChanges(document) {
     styleChanges.observer?.disconnect();
     styleChanges.records = [];
@@ -1036,6 +1235,7 @@ function buildPageRenderer({
     styleChanges.rootFeatures = new Map();
     styleChanges.full = "new document";
     styleChanges.activeElement = null;
+    styleChanges.focusAncestors = new Set();
     const observer = new page.window.MutationObserver((records) => { styleChanges.records.push(...records); });
     observer.observe(document, { subtree: true, childList: true, attributes: true, attributeOldValue: true, characterData: true });
     styleChanges.observer = observer;
@@ -1060,6 +1260,7 @@ function buildPageRenderer({
       descendantFeatures: union("descendantFeatures"), siblingFeatures: union("siblingFeatures"),
       descendantStateCompounds: parts.flatMap((part) => part.descendantStateCompounds),
       siblingTargetCompounds: [...union("siblingTargetCompounds")],
+      observedAttributes: union("observedAttributes"),
       forward: any("forward"), firstChild: any("firstChild"), backward: any("backward"), lastChild: any("lastChild"),
       defined: any("defined"), target: any("target"),
     };
@@ -1189,11 +1390,12 @@ function buildPageRenderer({
     let treeDirty = false;
     let full = styleChanges.full;
     const active = page.document.activeElement;
-    if (active !== styleChanges.activeElement) {
-      // :focus, :focus-within and :focus-visible follow the focused element.
-      if (styleChanges.activeElement !== null) full ||= "focus moved";
-      styleChanges.activeElement = active;
-    }
+    const previousActive = styleChanges.activeElement;
+    const previousFocusAncestors = styleChanges.focusAncestors;
+    const focusAncestors = new Set();
+    for (let element = active; element; element = element.parentElement) focusAncestors.add(element);
+    styleChanges.activeElement = active;
+    styleChanges.focusAncestors = focusAncestors;
     // Elements whose subtree restyles (`roots`), and elements whose own
     // matches may change but whose subtree restyles only if their style does
     // (`self`, decided by the style engine).
@@ -1221,7 +1423,8 @@ function buildPageRenderer({
       if (!states.length) return false;
       const available = new Set(elementFeatures(element));
       return traits.descendantStateCompounds.some((entry) => (states.includes(":state") || entry.states.some((state) => states.includes(state)))
-        && entry.required.every((feature) => available.has(feature)));
+        && entry.required.every((feature) => available.has(feature))
+        && entry.alternatives.every(group => group.some(required => required.every(feature => available.has(feature)))));
     };
     /** An element whose features changed: itself, and wider where non-subject compounds use them. */
     const changed = (element, features) => {
@@ -1238,22 +1441,38 @@ function buildPageRenderer({
       if (matchesChanged(structuralState, element)) roots.add(element);
     };
     if (!full && !hasState) full = "first restyle";
-    // Marked elements: state outside the DOM (checked, value) or a DOM change
-    // the records also describe; both start as a change of the element's state.
-    for (const element of [...roots]) {
-      roots.delete(element);
+    // Only the explicitly marked roots need converting to feature changes;
+    // roots added by relational/focus invalidation below must remain roots.
+    const markedRoots = [...roots];
+    roots.clear();
+    for (const element of markedRoots) {
       if (!full) changed(element, styleChanges.rootFeatures.get(element) ?? [":state"]);
     }
+    if (!full) {
+      // Focus affects the two subjects, their :focus-within ancestor paths,
+      // and selectors related to those nodes. Keep the previous path because
+      // the old focused element may have been removed or reparented already.
+      if (active !== previousActive) {
+        if (previousActive) changed(previousActive, [":focus", ":focus-visible"]);
+        if (active) changed(active, [":focus", ":focus-visible"]);
+      }
+      for (const element of previousFocusAncestors) if (!focusAncestors.has(element)) changed(element, [":focus-within"]);
+      for (const element of focusAncestors) if (!previousFocusAncestors.has(element)) changed(element, [":focus-within"]);
+    }
     for (const record of records) {
       if (full) break;
       const target = record.target;
       if (record.type === "attributes") {
         if (target.nodeType !== 1) continue;
         const name = record.attributeName;
+        // Happy DOM reports null for an empty attribute's previous value on
+        // removal. Null therefore cannot prove that the attribute is unchanged.
+        if (record.oldValue !== null && record.oldValue === target.getAttribute(name)) continue;
         // data/ARIA/title changes have no direct render-tree representation;
         // selectors that observe them are handled by the style diff below.
         // Other attributes may alter controls, replaced elements or visibility.
         if (!name.startsWith("data-") && !name.startsWith("aria-") && name !== "title") treeDirty = true;
+        else if (!traits.observedAttributes.has(name.toLowerCase())) continue;
         const features = ["[" + name];
         if (name === "class") {
           const before = new Set(String(record.oldValue ?? "").split(/\s+/).filter(Boolean));
@@ -1266,6 +1485,12 @@ function buildPageRenderer({
           if (id) features.push("#" + id);
         }
         changed(target, features);
+        // The UA disclosure marker depends on its parent's open state even
+        // when no author selector observes [open].
+        if (name === "open" && target.tagName === "DETAILS") {
+          const summary = [...target.children].find(element => element.tagName === "SUMMARY");
+          if (summary) self.add(summary);
+        }
       } else if (record.type === "childList") {
         treeDirty = true;
         if (target.nodeType !== 1) { full = `children of ${target.nodeName}`; break; }
@@ -1280,6 +1505,11 @@ function buildPageRenderer({
           }
         }
         self.add(target);
+        // Adding, removing or moving a summary can change which one receives
+        // the UA list-item display and disclosure marker.
+        if (target.tagName === "DETAILS") {
+          for (const child of target.children) if (child.tagName === "SUMMARY") self.add(child);
+        }
         hasChanges(traits, target, add, hasChecked);
         let next = record.nextSibling;
         while (next && next.nodeType !== 1) next = next.nextSibling;
@@ -1318,16 +1548,26 @@ function buildPageRenderer({
   }
 
   function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
+    if (page.document) loadImageResource.cancelDocument(page.document);
+    rasterReadback.dispose();
+    clearPaintParagraphs();
+    resetDocumentFonts();
     disposeFrames();
     closePiano();
     disposeVideos();
     page.realm?.dispose();
     page.realm = null;
-    page.window?.happyDOM?.abort?.();
+    page.window?.happyDOM?.close?.();
     for (const image of page.decodedImages) image.delete();
     disposeBackgrounds();
     page.window = parsed.window;
     page.document = parsed.document;
+    observeDocumentCanvases(parsed.document, (node) => {
+      if (disposedRenderer || node.ownerDocument !== page.document || !node.isConnected) return;
+      page.resourcePaintDirty = true;
+      page.needsPaint = true;
+      scheduleFrame();
+    });
     observeStyleChanges(parsed.document);
     page.title = parsed.document.title;
     page.styleSheets = styleSheets;
@@ -1335,6 +1575,8 @@ function buildPageRenderer({
     page.resources = imageResources.map;
     initializeVideos(parsed.document, page.resources);
     page.decodedImages = imageResources.decoded;
+    page.imageElements = new Set(imageResources.entries.map(entry => entry.element));
+    page.resourcePaintDirty = false;
     page.imagesLoaded = null;
     imageRequests = new WeakMap();
     page.elementScroll = new Map();
@@ -1355,6 +1597,20 @@ function buildPageRenderer({
     const ms = (from, to) => Math.round(to - from);
     const sheets = currentStyleSheets();
     const environment = { width: page.width, height: page.height, mobile };
+    const documentBaseURL = page.document.baseURI || page.url;
+    const environmentKey = `${page.width}/${page.height}/${mobile}/${documentBaseURL}`;
+    if (fontSheets !== sheets || fontEnvironment !== environmentKey) {
+      fontSheets = sheets;
+      fontEnvironment = environmentKey;
+      fontDefinitions = sheets.flatMap(sheet => /@font-face\b/i.test(sheet) ? extractFontFaces(sheet, documentBaseURL, environment) : []);
+      documentFonts.setFaces(fontDefinitions);
+      const key = JSON.stringify(fontDefinitions);
+      if (key !== fontDefinitionKey) {
+        fontDefinitionKey = key;
+        clearFontCaches();
+        page.resourceLayoutDirty = true;
+      }
+    }
     const changes = takeStyleChanges(sheets); // drained even when unused, so records do not pile up
     const taken = hostPerformance.now();
     // A rendering opportunity can be scheduled by lifecycle work which did
@@ -1404,17 +1660,19 @@ function buildPageRenderer({
       measureText, fontMetrics, width: page.width, viewportHeight: page.height, x: 0, y: 0,
     });
     page.displayList = paintList();
+    page.resourcePaintDirty = false;
     // The content may now reach less far than a container was scrolled.
     if (clampElementScroll()) page.displayList = paintList();
     page.resourceLayoutDirty = false;
     laidOutSheets = sheets;
     setContentSize();
+    queueFontLoads();
     return { style: Math.round(styled - started), layout: Math.round(hostPerformance.now() - styled) };
   }
 
   /** BUNINU_VERIFY_STYLE: compare an incremental restyle with a full one, element by element. */
   function verifyIncrementalStyle(sheets, environment) {
-    const reference = new StyleEngine().compute(page.document, sheets, environment);
+    const reference = new StyleEngine({ measureText }).compute(page.document, sheets, environment);
     const serialize = (style) => JSON.stringify(style, (key, value) => typeof value === "bigint" ? String(value) : value);
     let mismatches = 0;
     for (const element of page.document.querySelectorAll("*")) {
@@ -1450,13 +1708,14 @@ function buildPageRenderer({
       staleImages = queueImageResources();
     }
     const timing = styleAndLayout();
-    for (const image of staleImages) {
-      const index = page.decodedImages.indexOf(image);
-      if (index >= 0) page.decodedImages.splice(index, 1);
-      image.delete();
+    if (staleImages.length) {
+      const stale = new Set(staleImages);
+      page.decodedImages = page.decodedImages.filter(image => !stale.has(image));
+      for (const image of stale) image.delete();
     }
     if (!timing.skipped) page.needsPaint = true;
     syncFrames();
+    page.realm?.layoutChanged(page.layoutVersion);
     if (!timing.skipped) queueBackgroundImages();
     lastRebuildMs = hostPerformance.now() - started;
     trace?.(`${page.url}: restyle and relayout (${reason}) ${Math.round(lastRebuildMs)}ms`
@@ -1475,6 +1734,7 @@ function buildPageRenderer({
    * page); the rest of the load continues, see `whenLoaded`.
    */
   function loadDocument(document) {
+    if (disposedRenderer) return Promise.reject(new Error("Renderer has been disposed"));
     const generation = ++loadGeneration;
     let commit;
     const committed = new Promise((resolve, reject) => {
@@ -1494,7 +1754,7 @@ function buildPageRenderer({
   }
 
   async function runLoad({
-    url, source = "", contentType = "text/html", status = 200, statusText = "", error = null, cookie = "",
+    url, source = "", contentType = "text/html", status = 200, statusText = "", error = null, cookie = "", referrer = "",
   }, generation, commit) {
     const current = () => generation === loadGeneration;
     const finish = () => {
@@ -1538,7 +1798,7 @@ function buildPageRenderer({
       phaseStart = now;
     } : () => {};
     const isHtml = contentType.toLowerCase().includes("html");
-    const parsed = parseHTMLDocument(isHtml ? source : "<body></body>", url);
+    const parsed = parseHTMLDocument(isHtml ? source : "<body></body>", url, referrer);
     phase("parse");
     // Stylesheets block rendering and scripts; images do not (only the
     // window load event waits for them, see whenImagesLoaded): one slow image
@@ -1605,6 +1865,9 @@ function buildPageRenderer({
       refresh();
       phase("style, layout and raster after scripts");
     } else {
+      await documentFonts.ready();
+      if (!current()) return;
+      refresh();
       finish();
     }
   }
@@ -1620,7 +1883,7 @@ function buildPageRenderer({
     const preloaded = new Map();
     const preload = (href) => {
       let target;
-      try { target = new URL(href, documentUrl); } catch { return; }
+      try { target = new URL(href, document.baseURI || documentUrl); } catch { return; }
       if (!["http:", "https:"].includes(target.protocol) || preloaded.has(target.href)) return;
       const response = fetchResource(target.href, "script");
       response.catch(() => {}); // reported when the script runs
@@ -1636,7 +1899,8 @@ function buildPageRenderer({
 
   /** Frees what a superseded load fetched. */
   async function discard(images, parsed = null) {
-    parsed?.window?.happyDOM?.abort?.();
+    if (parsed?.document) loadImageResource.cancelDocument(parsed.document);
+    parsed?.window?.happyDOM?.close?.();
     const loaded = await images.catch(() => emptyImageResources());
     for (const image of loaded.decoded) image.delete();
   }
@@ -1651,7 +1915,7 @@ function buildPageRenderer({
     // queueImageResources must not fetch these again.
     for (const element of document.querySelectorAll("img")) {
       const src = element.getAttribute("src");
-      if (src) imageRequests.set(element, src);
+      if (src) imageRequests.set(element, imageRequestKey(src, imageCrossOrigin(element)));
     }
     page.imagesLoaded = images.then((loaded) => {
       if (generation !== loadGeneration || document !== page.document) {
@@ -1659,12 +1923,13 @@ function buildPageRenderer({
         return;
       }
       for (const { element, src, resource } of loaded.entries) {
-        if (element.getAttribute("src") !== src || page.resources.get(element)) {
+        if (element.getAttribute("src") !== src || imageCrossOrigin(element) !== resource.crossOrigin || page.resources.get(element)) {
           resource.image.delete();
           continue;
         }
         page.resources.set(element, resource);
         page.decodedImages.push(resource.image);
+        page.imageElements.add(element);
         finishImageLoad(element, src, resource, type => element.dispatchEvent(new page.window.Event(type)));
       }
       page.dirty = true;
@@ -1675,18 +1940,44 @@ function buildPageRenderer({
 
   function inlineStyleSheets(document) {
     return [...document.querySelectorAll("style")]
-      .filter((element) => !element.closest("noscript"))
+      .filter((element) => isCssStyleSheet(element) && styleSheetMatches(element))
       .map((element) => element.textContent ?? "");
   }
 
+  function isCssStyleSheet(element) {
+    const type = element.getAttribute("type")?.trim().toLowerCase();
+    return (!type || type === "text/css") && !element.closest("noscript");
+  }
+
+  function styleSheetMatches(element) {
+    return mediaQueryMatches(element.getAttribute("media") ?? "", { width: page.width, height: page.height, mobile })
+      && !(element.tagName === "LINK" && element.hasAttribute("disabled"));
+  }
+
   /** Brings style, layout and raster up to date; returns whether it repainted. */
   function refresh() {
+    if (disposedRenderer) return false;
     if (page.dirty) rebuildRenderTree();
     if (!page.needsPaint) return false;
     render();
     return true;
   }
 
+  function isDisclosureControl(element) {
+    if (element?.tagName === "DETAILS") return ![...element.children].some(child => child.tagName === "SUMMARY");
+    return element?.tagName === "SUMMARY" && element.parentElement?.tagName === "DETAILS"
+      && [...element.parentElement.children].find(child => child.tagName === "SUMMARY") === element;
+  }
+
+  function activateDisclosure(element) {
+    const prevented = page.realm.dispatch(element, new page.window.MouseEvent("click", {
+      bubbles: true, cancelable: true, composed: true, detail: 0,
+    }));
+    // An explicit summary is activated by the DOM's click default action.
+    // The generated label has no DOM summary, so its owner toggles here.
+    if (!prevented && element.tagName === "DETAILS") element.open = !element.open;
+  }
+
   function editFocusedText(text, backspace = false) {
     const element = page.document.activeElement;
     if (!element || !["INPUT", "TEXTAREA"].includes(element.tagName) || element.disabled || element.readOnly) return;
@@ -1765,6 +2056,31 @@ function buildPageRenderer({
         page.dirty = true;
         scheduleFrame();
       },
+      activationState: controlStatesBeforeActivation,
+      activationChanged(previous) {
+        invalidateActivatedControls(previous);
+        if (page.dirty) scheduleFrame();
+      },
+      canvasImage(element) {
+        if (!element) return null;
+        if (element.tagName === "CANVAS") return canvasResource(element);
+        const resource = page.resources.get(element);
+        if (!resource?.image) return null;
+        const url = resource.url ?? element.src ?? "";
+        const originClean = resource.originClean ?? (url.startsWith("data:") || originOf(url) === originOf(page.url));
+        return { ...resource, originClean };
+      },
+      canvasFont(element, value) {
+        return parseCanvasFont(value, styleEngine.get(element)?.fontSize ?? 16,
+          styleEngine.get(page.document.documentElement)?.fontSize ?? 16);
+      },
+      canvasText(element, request) {
+        const style = { ...request.settings.parsedFont,
+          direction: request.settings.direction === "inherit" ? styleEngine.get(element)?.direction ?? "ltr" : request.settings.direction };
+        documentFonts.update(fontDefinitions, [{ text: String(request.args[0]), style }]);
+        return renderCanvasText({ ...request, style,
+          settings: { ...request.settings, direction: style.direction } });
+      },
       mediaState,
       playMedia,
       pauseMedia,
@@ -1788,7 +2104,7 @@ function buildPageRenderer({
           scheduleFrame();
         }
       },
-      whenImagesLoaded: () => Promise.all([page.imagesLoaded, ...[...page.backgrounds.values()].map((entry) => entry.loaded)]),
+      whenImagesLoaded: () => Promise.all([page.imagesLoaded, documentFonts.ready(), ...[...page.backgrounds.values()].map((entry) => entry.loaded)]),
       afterTask() {},
       boundsOf(element) {
         if (page.dirty) rebuildRenderTree("script read geometry");
@@ -1820,9 +2136,9 @@ function buildPageRenderer({
         if (page.dirty) rebuildRenderTree("script scrolled");
         setElementScroll(element, x, y);
       },
-      scrollIntoView(element) {
+      scrollIntoView(element, options) {
         if (page.dirty) rebuildRenderTree("script scrolled");
-        revealElement(element);
+        revealElement(element, options);
       },
       computedStyle(element) {
         if (!element) return null;
@@ -1845,7 +2161,7 @@ function buildPageRenderer({
       },
       navigate: (url) => navigateTo(String(url)),
       activateLink(anchor) {
-        const href = new URL(anchor.getAttribute("href"), page.url).href;
+        const href = new URL(anchor.getAttribute("href"), anchor.baseURI || page.url).href;
         const name = anchor.hasAttribute("download") ? anchor.getAttribute("download") ?? "" : null;
         if (href.startsWith("blob:") && name !== null) void downloadBlob(href, name);
         else navigateTo(href, name);
@@ -1880,6 +2196,7 @@ function buildPageRenderer({
         page.cookie = mergeDocumentCookie(page.cookie, String(value));
         setCookie(String(value));
       },
+      clipboardWrite,
       webSockets,
       pageFetch(request) {
         const networkPending = pageFetch(request);
@@ -1887,7 +2204,8 @@ function buildPageRenderer({
           if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
           return response;
         });
-        result.abort = () => networkPending.abort?.();
+        result.abort = (reason) => networkPending.abort?.(reason);
+        result.finished = networkPending.finished;
         return result;
       },
     };
@@ -1901,7 +2219,7 @@ function buildPageRenderer({
   function submitForm(form, submitter = null) {
     const method = (submitter?.getAttribute("formmethod") ?? form.getAttribute("method") ?? "get").toLowerCase();
     const action = submitter?.getAttribute("formaction") ?? form.getAttribute("action") ?? page.url;
-    const url = new URL(action || page.url, page.url);
+    const url = new URL(action || page.url, form.baseURI || page.url);
     const entries = [...new page.window.FormData(form, submitter)];
     if (method === "post") {
       const enctype = (submitter?.getAttribute("formenctype") ?? form.getAttribute("enctype") ?? "").toLowerCase();
@@ -1951,14 +2269,7 @@ function buildPageRenderer({
     const shift = scrollShift(element);
     const scrollX = (fixed ? 0 : viewport.x) + shift.x;
     const scrollY = (fixed ? 0 : viewport.y) + shift.y;
-    let nodeId = null;
-    for (const node of page.renderTree.nodesById.values()) {
-      if (node.domNode === element && !node.pseudo) {
-        nodeId = node.id;
-        break;
-      }
-    }
-    const box = nodeId == null ? null : page.layout.boxes.find((candidate) => candidate.nodeId === nodeId && !candidate.inline);
+    const box = elementBox(page.renderTree, page.layout, element)?.box;
     if (box) return { left: box.x - scrollX, top: box.y - scrollY, width: box.width, height: box.height };
     const content = elementBounds(page.renderTree, page.layout, element);
     return content
@@ -2132,6 +2443,7 @@ function buildPageRenderer({
      * visualViewport.scale.
      */
     resize(width, height, deviceScaleFactor = 1, pageScale = 1) {
+      const resized = width !== page.width || height !== page.height;
       page.pageScale = Number.isFinite(pageScale) && pageScale > 0 ? pageScale : 1;
       page.width = width;
       page.height = height;
@@ -2140,11 +2452,15 @@ function buildPageRenderer({
         : 1;
       viewport.resize(width, height);
       rebuildRenderTree();
+      // Listeners must observe the new viewport and layout. A repeated metrics
+      // request (or DPR-only change) does not resize the CSS viewport.
+      if (resized && page.realm)
+        page.realm.dispatch(page.window, new page.window.Event("resize"));
       render();
     },
-    screenshot() {
+    screenshot(options) {
       refresh();
-      return viewportPng();
+      return viewportPng(options);
     },
     /**
      * Diagnostics (not exposed over IPC): page-space border boxes and chosen
@@ -2212,6 +2528,7 @@ function buildPageRenderer({
     /** The compositor scrolled: follow it, and rasterize around the new position when idle. */
     applyCompositorScroll(x, y) {
       viewport.scrollTo(x, y);
+      page.realm?.layoutChanged(page.layoutVersion);
       syncedScroll = { x: viewport.x, y: viewport.y };
       schedulePrepaint();
     },
@@ -2242,8 +2559,13 @@ function buildPageRenderer({
           bubbles: true, cancelable: true,
         };
         const prevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keydown", init));
+        let activated = false;
         if (!prevented && !init.ctrlKey && !init.metaKey && !init.altKey) {
-          if (key === "Backspace") editFocusedText("", true);
+          if ((key === "Enter" || key === " ") && isDisclosureControl(target)) {
+            activated = true;
+            if (key === "Enter") activateDisclosure(target);
+          }
+          else if (key === "Backspace") editFocusedText("", true);
           else if (key === "Enter" && target.tagName === "TEXTAREA") {
             // A search IME's action key submits a search form. Other textareas
             // keep their normal newline behavior.
@@ -2255,8 +2577,9 @@ function buildPageRenderer({
           }
           else if (String(key).length === 1) editFocusedText(String(key));
         }
-        page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
-        if (refresh() || prevented) return { x: viewport.x, y: viewport.y };
+        const upPrevented = page.realm.dispatch(target, new page.window.KeyboardEvent("keyup", init));
+        if (activated && key === " " && !upPrevented) activateDisclosure(target);
+        if (refresh() || prevented || activated) return { x: viewport.x, y: viewport.y };
       }
       const pageStep = Math.max(31, viewport.height - 31);
       const delta = {
@@ -2319,9 +2642,6 @@ function buildPageRenderer({
      */
     click(x, y) {
       refresh();
-      // Activation can toggle checked state (radios in a group, through a
-      // label) without a DOM mutation, so the next restyle is a full one.
-      markStyleDirty(null); // full: click
       let region = hitTest(page.renderTree, page.layout, x, y, viewport, viewport);
       let forwarded = false;
       if (!region) {
@@ -2344,12 +2664,17 @@ function buildPageRenderer({
       // it is now (scroll containers move their content); the interactive
       // regions (laid out, unscrolled) stand in only where nothing is painted,
       // and a search form's forwarded field takes the click on the form.
-      const precise = page.displayList ? elementAtPoint(page.renderTree, page.displayList, x, y, viewport) : null;
+      const hitNode = page.displayList ? renderNodeAtPoint(page.renderTree, page.displayList, x, y, viewport) : null;
+      const precise = hitNode?.domNode?.nodeType === 1 ? hitNode.domNode : hitNode?.domNode?.parentElement;
       const target = forwarded ? region.element : precise ?? region?.element ?? null;
+      const generatedDisclosure = hitNode?.pseudo === "summary" && target?.tagName === "DETAILS";
       if (!target) {
         focusedFrame = null;
         return null;
       }
+      // Event dispatch determines the activation target before handlers run.
+      // A handler may replace the clicked descendants while retaining the link.
+      const activationAnchor = target.closest?.("a[href]");
       // A click inside an iframe belongs to its document alone.
       const inFrame = target.tagName === "IFRAME" ? frameAt(target, x, y) : null;
       focusedFrame = inFrame?.frame ?? null;
@@ -2370,11 +2695,12 @@ function buildPageRenderer({
       }
       // The press focuses the focusable element it lands in, unless mousedown was canceled.
       const focus = () => {
-        const focusable = target.closest?.("input, textarea, select, button, [tabindex]");
+        const focusable = generatedDisclosure ? target : target.closest?.("input, textarea, select, button, summary, [tabindex]");
         if (focusable && !focusable.disabled) focusable.focus();
       };
       if (!page.realm) focus();
       else {
+        const controlStates = controlStatesBeforeActivation();
         // A press and release, then the click (UI Events §3.5).
         const init = { bubbles: true, cancelable: true, composed: true, clientX: Number(x), clientY: Number(y), button: 0 };
         const PointerEvent = page.window.PointerEvent ?? page.window.MouseEvent;
@@ -2384,16 +2710,22 @@ function buildPageRenderer({
         page.realm.dispatch(target, new PointerEvent("pointerup", pointer));
         page.realm.dispatch(target, new page.window.MouseEvent("mouseup", init));
         const prevented = page.realm.dispatch(target, new page.window.MouseEvent("click", { ...init, detail: 1 }));
+        invalidateActivatedControls(controlStates);
         refresh();
         if (prevented) return null;
       }
+      if (generatedDisclosure) {
+        target.open = !target.open;
+        refresh();
+        return null;
+      }
       if ((target.tagName === "AUDIO" || target.tagName === "VIDEO") && target.hasAttribute("controls")) {
         clickMedia(target, x, y);
         return null;
       }
-      const anchor = target.closest?.("a[href]");
-      if (!anchor) return null;
-      const href = new URL(anchor.getAttribute("href"), page.url).href;
+      const anchor = activationAnchor;
+      if (!anchor?.hasAttribute("href")) return null;
+      const href = new URL(anchor.getAttribute("href"), anchor.baseURI || page.url).href;
       if (href.startsWith("javascript:")) {
         this.runJavaScriptURL(href);
         return null;
@@ -2466,16 +2798,22 @@ function buildPageRenderer({
       if (!page.realm) return undefined;
       let value = page.realm.evaluate(utilityExpression);
       if (value !== null && typeof value === "object" && typeof value.then === "function") {
-        value = await Promise.race([
-          Promise.resolve(value),
-          new Promise((resolve) => hostSetTimeout(resolve, 5000, undefined)),
-        ]).catch((error) => String(error?.message ?? error));
+        let timer;
+        try {
+          value = await Promise.race([
+            Promise.resolve(value),
+            new Promise((resolve) => { timer = hostSetTimeout(resolve, 5000, undefined); }),
+          ]).catch((error) => String(error?.message ?? error));
+        } finally { hostClearTimeout(timer); }
       }
       refresh();
       return cloneableResult(value);
     },
     dispose() {
+      if (disposedRenderer) return;
       disposedRenderer = true;
+      loadGeneration++;
+      if (page.document) loadImageResource.cancelDocument(page.document);
       hostClearTimeout(prepaintTimer);
       hostClearTimeout(frameTimer);
       disposeFrames();
@@ -2484,8 +2822,13 @@ function buildPageRenderer({
       disposeVideos();
       rasterSurface?.dispose();
       rasterSurface = null;
-      page.window?.happyDOM?.abort?.();
+      rasterReadback.dispose();
+      clearPaintParagraphs();
+      documentFonts.dispose();
+      page.window?.happyDOM?.close?.();
       for (const image of page.decodedImages) image.delete();
+      page.decodedImages = [];
+      page.imageElements.clear();
       disposeBackgrounds();
     },
   };
@@ -2511,18 +2854,22 @@ function buildPageRenderer({
   function collectStyleSheets(document, documentUrl, linkSheets, pending = null) {
     const sheets = [];
     for (const element of document.querySelectorAll("style, link[rel~='stylesheet']")) {
-      if (element.closest("noscript")) continue;
+      if (!isCssStyleSheet(element)) continue;
+      const applies = styleSheetMatches(element);
       if (element.tagName === "STYLE") {
-        sheets.push(element.textContent ?? "");
+        if (applies) sheets.push(element.textContent ?? "");
         continue;
       }
+      // A disabled link is fetched when enabled; nonmatching media may be
+      // fetched now, but must never contribute rules to the screen cascade.
+      if (element.hasAttribute("disabled")) continue;
       const href = element.getAttribute("href");
       let url;
-      try { url = href ? new URL(href, documentUrl).href : null; } catch { url = null; }
+      try { url = href ? new URL(href, element.baseURI || documentUrl).href : null; } catch { url = null; }
       if (!url) continue;
       const loaded = linkSheets.get(element);
       if (loaded?.url === url) {
-        if (loaded.text !== null) sheets.push(loaded.text);
+        if (applies && loaded.text !== null) sheets.push(loaded.text);
         continue;
       }
       const entry = { url, text: null };
@@ -2561,17 +2908,10 @@ function buildPageRenderer({
       if (!src) return;
       beginImageLoad(element, src);
       try {
-        const response = await fetchResource(new URL(src, documentUrl).href, "image");
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        // Untrusted image bytes are decoded here, inside the renderer.
-        const bytes = response.body;
-        const { width, height } = await new Bun.Image(bytes).metadata();
-        const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) throw new Error("Image decoding failed");
-        const resource = Object.freeze({ width, height, image, url: response.url });
+        const resource = await loadImageResource(document, new URL(src, element.baseURI || documentUrl).href, imageCrossOrigin(element));
         finishImageLoad(element, src, resource);
         map.set(element, resource);
-        decoded.push(image);
+        decoded.push(resource.image);
         entries.push({ element, src, resource });
       } catch {
         // Broken images keep their fallback replaced-element dimensions.
@@ -2640,6 +2980,7 @@ function buildPageRenderer({
       requestDownload,
       reportError,
       pageFetch,
+      clipboardWrite,
       webSockets,
       setCookie,
       consoleMessage,
@@ -2691,7 +3032,7 @@ function buildPageRenderer({
     const src = element.getAttribute("src")?.trim();
     if (!src) return "about:blank";
     try {
-      return new URL(src, page.url).href;
+      return new URL(src, element.baseURI || page.url).href;
     } catch {
       return "about:blank";
     }
@@ -2794,6 +3135,12 @@ function buildPageRenderer({
   }
 
   function paintList() {
+    for (const node of page.renderTree?.nodesById.values() ?? []) {
+      if (node.tagName !== "CANVAS") continue;
+      const resource = canvasResource(node.domNode);
+      if (resource) page.resources.set(node.domNode, resource);
+      else page.resources.delete(node.domNode);
+    }
     return buildDisplayList(page.layout, page.renderTree, page.resources, backgroundResource, scrollOffsetOf);
   }
 
@@ -2803,13 +3150,7 @@ function buildPageRenderer({
 
   /** The render node and layout box of an element, or null. */
   function layoutBoxOf(element) {
-    if (!page.renderTree || !page.layout) return null;
-    for (const node of page.renderTree.nodesById.values()) {
-      if (node.domNode !== element || node.pseudo) continue;
-      const box = page.layout.boxes.find((candidate) => candidate.nodeId === node.id && !candidate.inline);
-      return box ? { node, box } : null;
-    }
-    return null;
+    return elementBox(page.renderTree, page.layout, element);
   }
 
   /**
@@ -2863,6 +3204,7 @@ function buildPageRenderer({
     if (next.x || next.y) page.elementScroll.set(element, next);
     else page.elementScroll.delete(element);
     page.layoutVersion++;
+    page.realm?.layoutChanged(page.layoutVersion);
     page.displayList = paintList();
     page.needsPaint = true;
     // A scroll event at the element, as a task (CSSOM View §13.1).
@@ -2960,20 +3302,31 @@ function buildPageRenderer({
     return left;
   }
 
-  /** Scrolls the scroll containers around an element, then the page, so that its top shows. */
-  function revealElement(element) {
-    for (let node = element.parentElement; node && node.nodeType === 1; node = node.parentElement) {
+  /** Aligns the element within each scrollport, from the innermost out. */
+  function revealElement(element, { block = "start", inline = "nearest", container = "all" } = {}) {
+    let moved = false;
+    let fixed = styleEngine.get(element)?.position === "fixed";
+    const direction = styleEngine.get(element)?.direction;
+    if (direction === "rtl" && inline !== "nearest" && inline !== "center") inline = inline === "start" ? "end" : "start";
+    for (let node = element.parentElement; !fixed && node && node.nodeType === 1; node = node.parentElement) {
+      if (node === page.document.documentElement) break;
+      fixed = styleEngine.get(node)?.position === "fixed";
       const geometry = scrollerGeometry(node);
       if (!geometry) continue;
       const target = viewportBounds(element);
-      const container = viewportBounds(node);
-      if (!target || !container) continue;
+      const bounds = viewportBounds(node);
+      if (!target || !bounds) continue;
       const [borderTop, , , borderLeft] = styleEngine.get(node)?.borderWidths ?? [0, 0, 0, 0];
-      setElementScroll(node, geometry.x + target.left - (container.left + borderLeft), geometry.y + target.top - (container.top + borderTop));
+      moved = setElementScroll(node,
+        geometry.x + scrollAlignmentDelta(target.left - bounds.left - borderLeft, target.width, geometry.clientWidth, inline),
+        geometry.y + scrollAlignmentDelta(target.top - bounds.top - borderTop, target.height, geometry.clientHeight, block)) || moved;
+      if (container === "nearest") { if (moved) render(); return; }
     }
     const bounds = viewportBounds(element);
-    if (bounds) viewport.scrollTo(viewport.x, viewport.y + bounds.top);
-    render();
+    if (bounds && !fixed) moved = viewport.scrollTo(
+      viewport.x + scrollAlignmentDelta(bounds.left, bounds.width, viewport.width, inline),
+      viewport.y + scrollAlignmentDelta(bounds.top, bounds.height, viewport.height, block)) || moved;
+    if (moved) render();
   }
 
   /** Every <video> and <audio> gets its (painted) resource: size, frame, playing, time. */
@@ -2989,7 +3342,7 @@ function buildPageRenderer({
 
   function videoSource(element) {
     const src = element.getAttribute("src") ?? element.querySelector("source[src]")?.getAttribute("src");
-    try { return src ? new URL(src, page.url).href : null; } catch { return null; }
+    try { return src ? new URL(src, element.baseURI || page.url).href : null; } catch { return null; }
   }
 
   // ---- media: <video> and <audio> share one pipeline. An <audio> is media
@@ -3095,6 +3448,22 @@ function buildPageRenderer({
     if (!state) return;
     state.mediaSource = source;
     bindSourcePipes(state);
+    // A later initialization segment can replace already-buffered video.
+    // Shorten the active presentation at its epoch boundary as soon as that
+    // boundary is known, without discarding the frames before it.
+    if (state.video?.pipe?.snapshotAt) {
+      const current = state.video.pipe.snapshotAt(state.video.startTime);
+      const endTime = current.id === state.video.snapshotId ? current.endTime : current.startTime;
+      if (endTime !== state.video.endTime) {
+        state.video.endTime = endTime;
+        if (state.video.presentation) onVideo?.({ type: "video-bind", id: state.video.presentation.id,
+          endTime });
+      }
+    }
+    if (state.sound?.pipe?.snapshotAt) {
+      const current = state.sound.pipe.snapshotAt(state.sound.startTime);
+      state.sound.endTime = current.id === state.sound.snapshotId ? current.endTime : current.startTime;
+    }
     if (state.audioPipe && state.audioPipe !== state.videoPipe) state.hasAudio = true;
     void refreshProbe(state);
     if (state.playing && state.hasAudio && !state.sound) ensureAudio(state);
@@ -3226,8 +3595,9 @@ function buildPageRenderer({
       const id = nextVideoPresentation++;
       const shared = new SharedArrayBuffer(16 + 480 * 480 * 4);
       video.presentation = { id, shared, serial: 0 };
-      onVideo({ type: "video-open", id, shared, bytes: snapshot(video.pipe, state.bytes),
+      onVideo({ type: "video-open", id, shared, bytes: video.bytes,
         options: decodeOptions(state.videoMime || state.contentType, state.url), time: mediaTime(state),
+        startTime: video.startTime ?? 0, endTime: video.endTime ?? Infinity,
         hasAudio: state.hasAudio, audioId: state.sound?.id ?? null,
         audioStart: state.sound ? state.sound.streamStart / state.sound.decoder.sampleRate : 0 });
     }
@@ -3244,10 +3614,10 @@ function buildPageRenderer({
       drawHints(canvas, region);
       surface.flush();
       const image = surface.makeImageSnapshot();
-      const pixels = image.readPixels(0, 0, { width, height, colorType: CanvasKit.ColorType.RGBA_8888,
-        alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB });
-      image.delete();
-      return pixels;
+      try {
+        return image.readPixels(0, 0, { width, height, colorType: CanvasKit.ColorType.RGBA_8888,
+          alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB });
+      } finally { image.delete(); }
     };
     const base = raster(false), mask = raster(true);
     for (let i = 0; i < mask.length; i++) mask[i] = Math.max(0, mask[i] - base[i]);
@@ -3338,7 +3708,7 @@ function buildPageRenderer({
     while (true) {
       if (pipe) await pipe.waitFor(pipe.done ? pipe.size : Math.max(1, Math.min(want, pipe.size + 1)));
       if (pipe?.error) throw pipe.error;
-      const bytes = pipe ? pipe.bytes() : state.bytes;
+      const bytes = snapshot(pipe, state.bytes);
       if (!bytes?.byteLength) {
         if (!pipe || pipe.done) throw new Error(`media ${state.url}: empty response`);
         continue;
@@ -3382,7 +3752,7 @@ function buildPageRenderer({
       const pipe = state.videoPipe ?? state.pipe;
       if (!pipe?.size) return;
       try {
-        const probe = await videoDecoder.probe(pipe.bytes());
+        const probe = await videoDecoder.probe(snapshot(pipe, state.bytes, mediaTime(state)));
         if (!state.durationOverride && probe.duration != null && probe.duration !== state.duration) {
           state.duration = probe.duration;
           state.resource.duration = probe.duration;
@@ -3431,19 +3801,21 @@ function buildPageRenderer({
     return format ? { format } : {};
   }
 
-  function snapshot(pipe, bytes) {
-    return pipe ? pipe.bytes() : bytes;
+  function snapshot(pipe, bytes, time = 0) {
+    return pipe?.snapshotAt ? pipe.snapshotAt(time).bytes : pipe ? pipe.bytes() : bytes;
   }
 
-  async function openVideoDecoder(state) {
+  async function openVideoDecoder(state, time = mediaTime(state)) {
     stopVideoPresentation(state);
     const pipe = state.videoPipe ?? state.pipe;
     const generation = pipe?.generation ?? 0;
-    const bytes = snapshot(pipe, state.bytes);
+    const selected = pipe?.snapshotAt?.(time);
+    const bytes = selected?.bytes ?? snapshot(pipe, state.bytes);
     if (!bytes?.byteLength) throw new Error(`media ${state.url}: no video bytes`);
     state.video?.decoder.close();
     const decoder = await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url));
-    state.video = { decoder, frameTime: 0, done: false, pipe, openedGeneration: generation };
+    state.video = { decoder, bytes, frameTime: selected?.startTime ?? 0, done: false, pipe, openedGeneration: generation,
+      snapshotId: selected?.id, startTime: selected?.startTime ?? 0, endTime: selected?.endTime ?? Infinity };
     trace?.(`video decoded ${state.url}: ${decoder.width}x${decoder.height}`);
     if (state.resource.width !== decoder.width || state.resource.height !== decoder.height) {
       state.resource.width = decoder.width;
@@ -3459,13 +3831,14 @@ function buildPageRenderer({
    * (no bytes yet, or audio_open hit EOF / invalid data on a short prefix).
    * The previous decoder stays until a new one succeeds.
    */
-  async function openAudioDecoder(state, { keepStream = false } = {}) {
+  async function openAudioDecoder(state, { keepStream = false, time = mediaTime(state) } = {}) {
     const serial = state.seekSerial;
     const operation = (state.audioOpenSerial ?? 0) + 1;
     state.audioOpenSerial = operation;
     const pipe = state.audioPipe ?? state.pipe;
     const generation = pipe?.generation ?? 0;
-    const bytes = snapshot(pipe, state.bytes);
+    const selected = pipe?.snapshotAt?.(time);
+    const bytes = selected?.bytes ?? snapshot(pipe, state.bytes);
     const pending = pipe && !pipe.done && !pipe.error;
     if (!bytes?.byteLength) {
       if (pending) return false;
@@ -3502,8 +3875,10 @@ function buildPageRenderer({
       throw new Error("audio format changed while output stream is active");
     }
     previous?.decoder.close();
-    state.sound = { decoder, id: null, position: 0, pending: firstSamples, history: [], finishing: false, done: false,
-      pipe, openedGeneration: generation };
+    state.sound = { decoder, id: null, position: Math.round((selected?.startTime ?? 0) * decoder.sampleRate),
+      pending: firstSamples, history: [], finishing: false, done: false,
+      pipe, openedGeneration: generation, snapshotId: selected?.id,
+      startTime: selected?.startTime ?? 0, endTime: selected?.endTime ?? Infinity };
     if (keepStream && previousId != null) {
       // The output stream carries on with the new decoder's samples.
       Object.assign(state.sound, { id: previousId, streamStart: previous.streamStart,
@@ -3554,7 +3929,10 @@ function buildPageRenderer({
   function needsMore(track) {
     const pipe = track?.pipe;
     if (!pipe || pipe.error) return false;
-    return pipe.generation !== track.openedGeneration || !pipe.done;
+    const atBoundary = Number.isFinite(track.endTime) && (track.frameTime !== undefined
+      ? track.frameTime + 1e-6 >= track.endTime
+      : track.position >= Math.round(track.endTime * track.decoder.sampleRate));
+    return pipe.generation !== track.openedGeneration || !pipe.done || atBoundary;
   }
 
   /** A click on the media: on its progress track it seeks, anywhere else it plays or pauses. */
@@ -3658,9 +4036,15 @@ function buildPageRenderer({
   /** Seek, reopening on a longer snapshot when the target is not in this prefix yet. */
   async function placeVideo(state, seconds) {
     for (let attempt = 0; attempt < 8; attempt++) {
-      if (!state.video || state.video.done || seconds === 0 || attempt > 0) await openVideoDecoder(state);
+      const pipe = state.videoPipe ?? state.pipe;
+      const selected = pipe?.snapshotAt?.(seconds);
+      // A seek beyond an old snapshot can succeed at its last keyframe.
+      // Reopen on newer bytes first; an exception does not detect that case.
+      const stale = pipe && (pipe !== state.video?.pipe || pipe.generation !== state.video?.openedGeneration);
+      if (!state.video || state.video.done || seconds === 0 || attempt > 0
+        || stale || (selected && selected.id !== state.video.snapshotId)) await openVideoDecoder(state, seconds);
       try {
-        state.video.frameTime = seekToKeyframe(state.video.decoder, seconds);
+        state.video.frameTime = seekToKeyframe(state.video.decoder, seconds, state.video.startTime);
         state.video.hideUntil = seconds;
         state.video.done = false;
         return;
@@ -3705,7 +4089,7 @@ function buildPageRenderer({
       const reached = await advanceAudio(() => state.sound, seconds, {
         needsMore,
         active: () => state.audioPositioning === transaction && state.seekSerial === serial && state.document === page.document,
-        reopen: () => openAudioDecoder(state, { keepStream: true }),
+        reopen: () => openAudioDecoder(state, { keepStream: true, time: seconds }),
       });
       if (!reached && state.audioPositioning === transaction && state.seekSerial === serial) {
         throw new Error(`audio could not reach ${seconds.toFixed(3)}s; refusing to replay an earlier prefix`);
@@ -3804,7 +4188,7 @@ function buildPageRenderer({
     const video = state.video;
     if (video?.needsLocalPosition && !video.presentation && !video.done) {
       try {
-        video.frameTime = seekToKeyframe(video.decoder, now);
+        video.frameTime = seekToKeyframe(video.decoder, now, video.startTime);
         video.hideUntil = now;
         video.needsLocalPosition = false;
       } catch (error) { failMedia(state, error, 3); return; }
@@ -3888,6 +4272,7 @@ function buildPageRenderer({
   function drawVideoFrame(state, show) {
     const video = state.video;
     const decoder = video.decoder;
+    if (video.frameTime + 1e-6 >= video.endTime) return "stall";
     const width = Math.min(480, decoder.width);
     const height = Math.max(1, Math.round(width * decoder.height / Math.max(1, decoder.width)));
     let pixels;
@@ -3984,8 +4369,14 @@ function buildPageRenderer({
     }
     const { channels, sampleRate } = sound.decoder;
     const frameBytes = channels * 2;
+    const endSample = Math.round(sound.endTime * sampleRate);
     sound.lastRequest = bytes;
     for (let sent = 0; sent + frameBytes <= bytes;) {
+      if (sound.position >= endSample) {
+        sound.owed = (sound.owed ?? 0) + bytes - sent;
+        void refillMedia(state, sound);
+        return;
+      }
       let samples = sound.pending;
       sound.pending = null;
       if (!samples) {
@@ -4011,7 +4402,8 @@ function buildPageRenderer({
         audio.finish(sound.id);
         return;
       }
-      const [taken, remaining] = splitSamples(samples, channels, bytes - sent);
+      const boundaryBytes = Math.max(0, endSample - sound.position) * frameBytes;
+      const [taken, remaining] = splitSamples(samples, channels, Math.min(bytes - sent, boundaryBytes));
       if (remaining.length) sound.pending = remaining;
       sound.history.push({ start: sound.position, samples: taken });
       sound.position += taken.length / channels;
@@ -4057,8 +4449,8 @@ function buildPageRenderer({
    * binary search over seek targets finds where that keyframe starts (to a
    * frame). The frames from there to the clock are then decoded unshown.
    */
-  function seekToKeyframe(decoder, seconds) {
-    return seekVideoKeyframe(decoder, seconds);
+  function seekToKeyframe(decoder, seconds, startTime = 0) {
+    return seekVideoKeyframe(decoder, seconds, startTime);
   }
 
   /**
@@ -4146,19 +4538,24 @@ function buildPageRenderer({
           const resumeAt = stalledTrack === state.video && state.video ? Math.min(time, state.video.frameTime) : time;
           // The picture must not go back to the keyframe the decoder restarts at.
           const hideUntil = Math.max(state.video?.shownTime ?? 0, state.video?.hideUntil ?? 0);
-          await openVideoDecoder(state);
+          await openVideoDecoder(state, resumeAt);
           state.video.hideUntil = hideUntil;
           try {
-            state.video.frameTime = seekToKeyframe(state.video.decoder, resumeAt);
+            state.video.frameTime = seekToKeyframe(state.video.decoder, resumeAt, state.video.startTime);
           } catch {
-            state.video.frameTime = 0;
+            state.video.frameTime = state.video.startTime;
           }
           state.video.done = false;
         }
         if (refillAudio) {
           let opened = false;
           try {
-            opened = await openAudioDecoder(state, { keepStream: Boolean(held) });
+            let audioTime = held ? writtenEnd : time;
+            if (state.sound && Number.isFinite(state.sound.endTime)
+              && state.sound.position >= Math.round(state.sound.endTime * state.sound.decoder.sampleRate)) {
+              audioTime = Math.max(audioTime, state.sound.endTime);
+            }
+            opened = await openAudioDecoder(state, { keepStream: Boolean(held), time: audioTime });
           } catch (error) {
             if (!state.video) throw error;
             reportError(error);
@@ -4242,7 +4639,7 @@ function buildPageRenderer({
   /** The decoded CSS background image a url() names, if it has arrived. */
   function backgroundResource(url) {
     let absolute;
-    try { absolute = new URL(url, page.url).href; } catch { return null; }
+    try { absolute = new URL(url, page.document.baseURI || page.url).href; } catch { return null; }
     return page.backgrounds.get(absolute)?.resource ?? null;
   }
 
@@ -4255,28 +4652,25 @@ function buildPageRenderer({
     if (!tree) return;
     const document = page.document;
     const seen = new Set();
+    const used = new Set();
     for (const node of tree.nodesById.values()) {
       const value = node.style?.backgroundImage;
       if (!value || seen.has(value) || !value.includes("url(")) continue;
       seen.add(value);
       for (const match of value.matchAll(CSS_URL)) {
         let url;
-        try { url = new URL(match[2], page.url).href; } catch { continue; }
+        try { url = new URL(match[2], document.baseURI || page.url).href; } catch { continue; }
+        used.add(url);
         if (page.backgrounds.has(url)) continue;
         const entry = { resource: null, loaded: null };
         page.backgrounds.set(url, entry);
-        entry.loaded = fetchResource(url, "image").then(async (response) => {
-          if (!response.ok || page.backgrounds.get(url) !== entry) return;
-          const bytes = response.body;
-          const { width, height } = await new Bun.Image(bytes).metadata();
-          const image = CanvasKit.MakeImageFromEncoded(bytes);
-          if (!image) return;
+        entry.loaded = loadImageResource(document, url).then((resource) => {
           if (page.backgrounds.get(url) !== entry || document !== page.document) {
-            image.delete();
+            resource.image.delete();
             return;
           }
-          entry.resource = Object.freeze({ width, height, image, url });
-          if (page.layout) page.displayList = paintList();
+          entry.resource = resource;
+          page.resourcePaintDirty = true;
           page.needsPaint = true;
           scheduleFrame();
         }).catch(() => {
@@ -4284,6 +4678,11 @@ function buildPageRenderer({
         });
       }
     }
+    for (const [url, entry] of page.backgrounds) {
+      if (used.has(url)) continue;
+      entry.resource?.image.delete();
+      page.backgrounds.delete(url);
+    }
   }
 
   function disposeBackgrounds() {
@@ -4295,36 +4694,58 @@ function buildPageRenderer({
     const document = page.document;
     const generation = loadGeneration;
     const staleImages = [];
+    // Infinite feeds remove old DOM images without navigating. The resource
+    // WeakMap alone cannot release their explicitly-owned Skia handles.
+    for (const element of page.imageElements) {
+      if (element.isConnected && element.ownerDocument === document && element.getAttribute("src")) continue;
+      const image = page.resources.get(element)?.image;
+      if (image) {
+        staleImages.push(image);
+        page.resourceLayoutDirty = true;
+      }
+      page.resources.delete(element);
+      page.imageElements.delete(element);
+      imageRequests.delete(element);
+    }
     for (const element of document.querySelectorAll("img")) {
       const src = element.getAttribute("src");
-      if (!src || imageRequests.get(element) === src) continue;
+      const credentials = imageCrossOrigin(element);
+      const key = imageRequestKey(src, credentials);
+      if (!src || imageRequests.get(element) === key) continue;
       let url;
-      try { url = new URL(src, page.url).href; } catch { continue; }
-      if (page.resources.get(element)?.url === url) {
-        imageRequests.set(element, src);
+      try { url = new URL(src, element.baseURI || page.url).href; } catch { continue; }
+      const existing = page.resources.get(element);
+      if (existing?.requestedURL === url && existing.crossOrigin === credentials) {
+        imageRequests.set(element, key);
         continue;
       }
-      imageRequests.set(element, src);
+      imageRequests.set(element, key);
       const oldImage = page.resources.get(element)?.image;
-      if (oldImage) staleImages.push(oldImage);
+      if (oldImage) {
+        staleImages.push(oldImage);
+        page.resourceLayoutDirty = true;
+      }
       page.resources.delete(element);
       beginImageLoad(element, src);
-      fetchResource(url, "image").then(async (response) => {
-        if (!response.ok) throw new Error(`HTTP ${response.status}`);
-        const bytes = response.body;
-        const { width, height } = await new Bun.Image(bytes).metadata();
-        const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) throw new Error("Image decoding failed");
-        if (generation !== loadGeneration || document !== page.document || element.getAttribute("src") !== src) {
+      loadImageResource(document, url, credentials).then((resource) => {
+        const { width, height, image } = resource;
+        if (generation !== loadGeneration || document !== page.document || element.getAttribute("src") !== src
+          || imageCrossOrigin(element) !== credentials) {
           image.delete();
           return;
         }
-        page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
+        page.resources.set(element, resource);
         page.decodedImages.push(image);
-        finishImageLoad(element, src, { width, height }, type => element.dispatchEvent(new page.window.Event(type)));
-        const node = [...page.renderTree.nodesById.values()].find((candidate) => candidate.domNode === element);
-        const run = page.layout.fragments.flatMap((fragment) => fragment.runs)
-          .find((candidate) => candidate.type === "image" && candidate.nodeId === node?.id);
+        page.imageElements.add(element);
+        let node, run;
+        for (const candidate of page.renderTree.nodesById.values()) {
+          if (candidate.domNode === element) { node = candidate; break; }
+        }
+        if (node) outer: for (const fragment of page.layout.fragments) {
+          for (const candidate of fragment.runs) {
+            if (candidate.type === "image" && candidate.nodeId === node.id) { run = candidate; break outer; }
+          }
+        }
         const cssWidth = node?.style?.width;
         const cssHeight = node?.style?.height;
         const specifiedWidth = typeof cssWidth === "number" ? cssWidth : node?.widthAttribute;
@@ -4335,17 +4756,20 @@ function buildPageRenderer({
         const paintOnly = run && Number.isFinite(specifiedWidth) && Number.isFinite(specifiedHeight)
           && Math.abs(run.width - specifiedWidth) < 0.01 && Math.abs(run.height - specifiedHeight) < 0.01;
         if (paintOnly) {
-          page.displayList = paintList();
+          page.resourcePaintDirty = true;
           page.needsPaint = true;
         } else {
           page.dirty = true;
           page.resourceLayoutDirty = true;
         }
-        refresh();
+        // All arrivals in this rendering opportunity share layout/raster.
+        // An onload handler which reads geometry still flushes synchronously.
+        finishImageLoad(element, src, { width, height }, type => element.dispatchEvent(new page.window.Event(type)));
+        scheduleFrame();
       }).catch((error) => {
         // A failed image retains its fallback replaced-element dimensions.
         trace?.(`image failed ${url}: ${error?.message ?? error}`);
-        if (generation === loadGeneration && document === page.document) {
+        if (generation === loadGeneration && document === page.document && imageCrossOrigin(element) === credentials) {
           finishImageLoad(element, src, null, type => element.dispatchEvent(new page.window.Event(type)));
         }
       });