buninu-browser 0.2.2 → 0.2.4

package/lib/renderer/page-renderer.js

@@ -23,18 +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, 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";
@@ -42,7 +54,9 @@ import { formatHint } from "../../vendor/wasmpeg/src/js/formats.js";
 import { containerFormat } from "./media-source.js";
 import { floatToS16, splitSamples } from "../audio/pcm.js";
 import { advanceAudio } from "../media/position-audio.js";
-import { pianoNote, PianoMixer } from "../audio/piano.js";
+import { seekVideoKeyframe } from "../media/video-keyframe.js";
+import { PianoMixer } from "../audio/piano.js";
+import { handlePianoInput } from "./piano-input.js";
 
 // Captured at load: in host mode page scripts share this global object.
 const hostPerformance = globalThis.performance;
@@ -67,11 +81,6 @@ const AUDIO_HISTORY_SECONDS = 3;
 const RESUME_BUFFER_SECONDS = 2;
 const RESUME_BUFFER_MAX_WAIT_MS = 6000;
 const RESUME_BUFFER_IDLE_MS = 400;
-// Finding a seek's keyframe (see seekToKeyframe): how far back it may lie,
-// and the size of the pictures compared.
-const KEYFRAME_SEARCH_SECONDS = 10;
-const KEYFRAME_PROBE_WIDTH = 32;
-const KEYFRAME_PROBE_HEIGHT = 18;
 // element → MediaSource, and the reverse. One renderer owns one page pipeline.
 const elementSources = new WeakMap();
 const sourceElements = new WeakMap();
@@ -142,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];
@@ -157,7 +171,7 @@ export function loadGraphics() {
     ]);
     return loadedGraphics = {
       CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
-      genericFamilies,
+      genericFamilies, builtinTypefaces,
     };
   })();
 }
@@ -219,6 +233,7 @@ function buildPageRenderer({
   consoleMessage = null,
   trace = null,
   onFrame = null,
+  onVideo = null,
   onLifecycle = null,
   videoDecoder = null,
   // Prepares a classic script on another thread: (source) => Promise<{ code, parsed, strict }>.
@@ -229,38 +244,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;
@@ -304,6 +328,7 @@ function buildPageRenderer({
     deviceScaleFactor: 1,
     pageScale: 1,
     needsPaint: true,
+    resourcePaintDirty: false,
     loading: false,
     hints: [],
     hintsVisible: false,
@@ -314,6 +339,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(),
@@ -339,15 +365,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 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) {
+  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 | ({
@@ -361,30 +430,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;
   }
 
@@ -418,22 +517,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);
@@ -450,9 +551,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;
@@ -463,9 +565,71 @@ function buildPageRenderer({
   // PaintController reusing cached display items
   // (platform/graphics/paint/paint_controller.cc, BSD).
   let rasterized = { list: null, overlay: "", background: "", scale: 0 };
+  let nextVideoPresentation = 1;
   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() {
@@ -482,6 +646,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;
@@ -489,26 +655,46 @@ 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));
     const region = { x: viewport.x, y: viewport.y, width, height };
     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));
     if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
-      rasterSurface?.delete();
+      // MakeSurface owns a malloc-backed pixel buffer; delete() alone leaks it.
+      rasterSurface?.dispose();
       rasterSurface = CanvasKit.MakeSurface(pixelWidth, pixelHeight);
       rasterSurfaceWidth = pixelWidth;
       rasterSurfaceHeight = pixelHeight;
@@ -521,14 +707,10 @@ 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 = {
       list: page.displayList, overlay: overlayKey(), background: page.backgroundColor, scale: page.deviceScaleFactor,
@@ -544,12 +726,14 @@ function buildPageRenderer({
       height: region.height,
       scale,
       background: backgroundBytes(page.backgroundColor),
+      videoLayer,
     };
   }
 
   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 };
@@ -580,7 +764,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;
@@ -599,7 +783,7 @@ 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();
@@ -609,32 +793,32 @@ function buildPageRenderer({
     }, Math.max(50, 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 } = {}) {
     if (!lastTile) return "";
-    const key = `${tileSerial}:${viewport.x}:${viewport.y}`;
-    if (encoded.key !== key) {
+    const key = `${tileSerial}:${viewport.x}:${viewport.y}:${page.width}:${page.height}:${format}:${quality}:${optimizeForSpeed}`;
+    return captures.get(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") };
-    }
-    return encoded.png;
+      return encodeImageBase64(pixels, width, height, { format, quality, optimizeForSpeed });
+    });
   }
 
   /** Rasterizes display items intersecting the viewport onto a CanvasKit canvas. */
   const paintFailures = new Set();
 
-  function paintDisplayList(canvas, displayList, view, scale) {
+  function paintDisplayList(canvas, displayList, view, scale, videoOverride = null) {
     if (!displayList) return;
     const pixel = (value) => Math.round(value * scale);
     const deviceRect = (rect) => CanvasKit.XYWHRect(
       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));
@@ -654,6 +838,9 @@ function buildPageRenderer({
       try {
         if (item.fixed) canvas.translate(viewport.x * scale, viewport.y * scale);
         if (item.clipRect) canvas.clipRect(deviceRect(item.clipRect), CanvasKit.ClipOp.Intersect, true);
+        for (const clip of item.roundedClips ?? []) {
+          canvas.clipRRect(deviceRRect(clip.rect, clip.radii), CanvasKit.ClipOp.Intersect, true);
+        }
         // A scale in document space, as a device-space matrix around the item's device coordinates.
         if (item.transform) {
           const { a, d, e, f } = item.transform;
@@ -790,7 +977,10 @@ function buildPageRenderer({
         canvas.clipRect(rect, CanvasKit.ClipOp.Intersect, true);
         paint.setColor(CanvasKit.Color(0, 0, 0, 1));
         canvas.drawRect(rect, paint);
-        if (resource?.image) {
+        if (videoOverride?.resource === resource) {
+          paint.setColor(CanvasKit.Color(videoOverride.white ? 255 : 0, videoOverride.white ? 255 : 0, videoOverride.white ? 255 : 0, 1));
+          canvas.drawRect(rect, paint);
+        } else if (resource?.image) {
           canvas.drawImageRect(resource.image,
             CanvasKit.XYWHRect(0, 0, resource.bitmapWidth ?? resource.width, resource.bitmapHeight ?? resource.height),
             rect, null, false);
@@ -798,7 +988,7 @@ function buildPageRenderer({
         const centerX = rect[0] + (rect[2] - rect[0]) / 2;
         const centerY = rect[1] + (rect[3] - rect[1]) / 2;
         paint.setColor(CanvasKit.Color(0, 0, 0, 0.65));
-        if (!resource?.playing) {
+        if (item.controls && !resource?.playing) {
           canvas.drawCircle(centerX, centerY, 22 * scale, paint);
           paint.setColor(CanvasKit.Color(255, 255, 255, 1));
           const path = CanvasKit.Path.MakeFromSVGString(
@@ -806,7 +996,7 @@ function buildPageRenderer({
           if (path) { canvas.drawPath(path, paint); path.delete(); }
         }
         // The control bar (play/pause, time, seekable progress) once playing or known.
-        if (resource?.playing || Number.isFinite(resource?.duration)) {
+        if (item.controls && (resource?.playing || Number.isFinite(resource?.duration))) {
           drawMediaBar(canvas, item.rect.x - view.x, item.rect.y + item.rect.height - MEDIA_BAR_HEIGHT - view.y,
             item.rect.width, MEDIA_BAR_HEIGHT, resource, scale, true);
         }
@@ -818,25 +1008,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();
       }
     }
   }
@@ -853,13 +1041,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],
@@ -1016,6 +1200,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 = [];
@@ -1023,6 +1230,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;
@@ -1047,6 +1255,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"),
     };
@@ -1176,11 +1385,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).
@@ -1208,7 +1418,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) => {
@@ -1225,22 +1436,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));
@@ -1253,6 +1480,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; }
@@ -1267,6 +1500,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;
@@ -1305,16 +1543,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;
@@ -1322,6 +1570,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();
@@ -1342,6 +1592,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
@@ -1391,17 +1655,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("*")) {
@@ -1437,13 +1703,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`
@@ -1462,6 +1729,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) => {
@@ -1481,7 +1749,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 = () => {
@@ -1525,7 +1793,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
@@ -1592,6 +1860,9 @@ function buildPageRenderer({
       refresh();
       phase("style, layout and raster after scripts");
     } else {
+      await documentFonts.ready();
+      if (!current()) return;
+      refresh();
       finish();
     }
   }
@@ -1607,7 +1878,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
@@ -1623,7 +1894,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();
   }
@@ -1638,7 +1910,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) {
@@ -1646,12 +1918,14 @@ 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;
       page.resourceLayoutDirty = true;
@@ -1661,31 +1935,51 @@ 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;
     if (element.tagName === "INPUT" && !["text", "search", "url", "email", "tel", "password"].includes(element.type)) return;
     // Mobile IMEs often send committed text without a usable keydown (key 229
     // or Unidentified). Handle that before the normal beforeinput insertion.
-    if (!backspace && element.getAttribute("id") === "buninu-piano-input" && audio && text.length === 1) {
-      const note = pianoNote(text);
-      if (note !== null) {
-        playPiano(note);
-        return;
-      }
-    }
+    if (!backspace && handlePianoInput(element, { text }, audio ? playPiano : null)) return;
     const value = String(element.value ?? "");
     let start = Number.isInteger(element.selectionStart) ? element.selectionStart : value.length;
     const end = Number.isInteger(element.selectionEnd) ? element.selectionEnd : start;
@@ -1757,6 +2051,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,
@@ -1780,7 +2099,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");
@@ -1812,14 +2131,19 @@ 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;
         if (page.dirty) rebuildRenderTree("getComputedStyle");
-        return styleEngine.get(element);
+        const style = styleEngine.get(element);
+        if (style?.padding.some(value => typeof value === "object")) {
+          const box = page.layout?.boxes.find(box => page.renderTree.nodesById.get(box.nodeId)?.domNode === element);
+          if (box) return { ...style, padding: box.style.padding };
+        }
+        return style;
       },
       layoutVersion() {
         if (page.dirty) rebuildRenderTree("intersection observer");
@@ -1832,7 +2156,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);
@@ -1874,7 +2198,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;
       },
     };
@@ -1888,7 +2213,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();
@@ -1938,14 +2263,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
@@ -2129,9 +2447,9 @@ function buildPageRenderer({
       rebuildRenderTree();
       render();
     },
-    screenshot() {
+    screenshot(options) {
       refresh();
-      return viewportPng();
+      return viewportPng(options);
     },
     /**
      * Diagnostics (not exposed over IPC): page-space border boxes and chosen
@@ -2199,6 +2517,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();
     },
@@ -2215,26 +2534,27 @@ function buildPageRenderer({
       if (focusedFrame?.renderer) return focusedFrame.renderer.press(key, options);
       refresh();
       const pianoInput = page.document?.activeElement;
-      if (audio && pianoInput?.getAttribute?.("id") === "buninu-piano-input") {
-        const note = pianoNote(String(key), String(options.code ?? ""));
-        if (note !== null && !options.repeat && !options.modifiers) {
-          playPiano(note);
-          return { x: viewport.x, y: viewport.y };
-        }
+      if (handlePianoInput(pianoInput, { ...options, key }, audio ? playPiano : null)) {
+        return { x: viewport.x, y: viewport.y };
       }
       // Pages see keydown/keyup first; preventDefault() cancels the default scroll.
       if (page.realm) {
         const target = page.document.activeElement ?? page.document.body;
         const modifiers = Number(options?.modifiers) || 0;
         const init = {
-          key: String(key), code: String(options?.code ?? ""), repeat: Boolean(options?.repeat),
+          ...keyboardInput(key, options), repeat: Boolean(options?.repeat),
           altKey: Boolean(modifiers & 1), ctrlKey: Boolean(modifiers & 2),
           metaKey: Boolean(modifiers & 4), shiftKey: Boolean(modifiers & 8),
           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.
@@ -2246,8 +2566,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 = {
@@ -2272,10 +2593,37 @@ function buildPageRenderer({
     scrollOffset() {
       return { x: viewport.x, y: viewport.y };
     },
+    videoReport(report) {
+      const state = [...page.media.values()].find(state => state.video?.presentation?.id === report.id);
+      if (!state || !state.playing) return;
+      if (report.error) {
+        state.presentationFailed = true;
+        stopVideoPresentation(state);
+        const serial = state.seekSerial;
+        void placeVideo(state, mediaTime(state)).then(() => {
+          if (state.playing && state.document === page.document && state.seekSerial === serial) startMedia(state);
+        }).catch(reportError);
+      } else if (Number.isFinite(report.end)) {
+        state.video.frameTime = report.end;
+        if (needsMore(state.video)) void refillMedia(state, state.video);
+        else {
+          readPresentedFrame(state);
+          stopVideoPresentation(state);
+          state.video.done = true;
+        }
+      } else if (Number.isFinite(report.time)) state.video.shownTime = report.time;
+    },
     /** The wheel at a viewport point: the delta the page itself still has to scroll (see wheel). */
     wheel(x, y, deltaX, deltaY, options = undefined) {
       return wheel(Number(x), Number(y), Number(deltaX) || 0, Number(deltaY) || 0, options);
     },
+    /** Move the pointer in viewport coordinates, including boundary events. */
+    move(x, y) {
+      refresh();
+      const target = elementAtPoint(page.renderTree, page.displayList, Number(x), Number(y), viewport);
+      dispatchPointerMove(page.window, page.realm, target, Number(x), Number(y));
+      refresh();
+    },
     /**
      * Clicks at a viewport point: the page receives a click event first, and
      * unless it calls preventDefault() a link under the point is returned for
@@ -2283,9 +2631,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) {
@@ -2308,12 +2653,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;
@@ -2334,11 +2684,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;
@@ -2348,16 +2699,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 (target.tagName === "AUDIO" || target.tagName === "VIDEO") {
+      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;
@@ -2430,26 +2787,37 @@ 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();
       page.realm?.dispose();
       closePiano();
       disposeVideos();
-      rasterSurface?.delete();
+      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();
     },
   };
@@ -2475,18 +2843,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 };
@@ -2497,9 +2869,10 @@ function buildPageRenderer({
       }, () => {
         // A failed stylesheet must not prevent the document itself from loading.
       }).then(() => {
-        if (entry.text === null || document !== page.document || linkSheets.get(element) !== entry) return;
+        if (document !== page.document || linkSheets.get(element) !== entry) return;
         page.dirty = true;
         scheduleFrame();
+        element.dispatchEvent(new page.window.Event(entry.text === null ? "error" : "load"));
       });
       pending?.push(request);
     }
@@ -2522,20 +2895,16 @@ function buildPageRenderer({
     await Promise.all([...document.querySelectorAll("img")].map(async (element) => {
       const src = element.getAttribute("src");
       if (!src) return;
+      beginImageLoad(element, src);
       try {
-        const response = await fetchResource(new URL(src, documentUrl).href, "image");
-        if (!response.ok) return;
-        // 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) return;
-        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.
+        finishImageLoad(element, src, null);
       }
     }));
     return { map, decoded, entries };
@@ -2651,7 +3020,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";
     }
@@ -2754,6 +3123,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);
   }
 
@@ -2763,13 +3138,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);
   }
 
   /**
@@ -2823,6 +3192,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).
@@ -2920,20 +3290,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. */
@@ -2949,7 +3330,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
@@ -3055,6 +3436,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);
@@ -3135,10 +3532,89 @@ function buildPageRenderer({
 
   /** The control bar and frame redraw without a relayout. */
   function repaintMedia() {
+    // The compositor replaces this video's pixels independently. Page changes
+    // still repaint normally; native controls get their periodic time update.
+    if ([...page.media.values()].some(state => state.video?.presentation && state.playing)
+      && !page.dirty && !page.needsPaint) return;
     rasterized.list = null;
     render();
   }
 
+  function stopVideoPresentation(state) {
+    const presentation = state.video?.presentation;
+    if (!presentation) return;
+    readPresentedFrame(state);
+    onVideo?.({ type: "video-stop", id: presentation.id });
+    state.video.presentation = null;
+    state.video.needsLocalPosition = true;
+  }
+
+  function readPresentedFrame(state) {
+    const p = state.video?.presentation;
+    if (!p) return;
+    const meta = new Int32Array(p.shared, 0, 4);
+    const serial = Atomics.load(meta, 0);
+    if (serial % 2 || !serial || serial === p.serial) return;
+    const width = Atomics.load(meta, 1), height = Atomics.load(meta, 2);
+    if (width < 1 || height < 1 || width * height > 480 * 480) return;
+    const pixels = new Uint8Array(p.shared, 16, width * height * 4).slice();
+    if (serial !== Atomics.load(meta, 0)) return;
+    const image = CanvasKit.MakeImage({ width, height, alphaType: CanvasKit.AlphaType.Unpremul,
+      colorType: CanvasKit.ColorType.RGBA_8888, colorSpace: CanvasKit.ColorSpace.SRGB }, pixels, width * 4);
+    if (!image) return;
+    state.resource.image?.delete();
+    Object.assign(state.resource, { image, bitmapWidth: width, bitmapHeight: height });
+    p.serial = serial;
+  }
+
+  function makeVideoLayer(canvas, surface, region, scale, width, height) {
+    if (!onVideo) return null;
+    const items = [...visibleItems(page.displayList, region, viewport)].filter(item => item.op === "drawVideo");
+    const item = items.length === 1 ? items[0] : null;
+    const resource = item && page.displayList.images[item.image];
+    const state = [...page.media.values()].find(state => state.resource === resource);
+    const eligible = state?.playing && state.video && !state.video.done && !state.buffering
+      && !state.presentationFailed && !item.controls && !item.fixed
+      && (!item.transform || (item.transform.a > 0 && item.transform.d > 0));
+    for (const other of page.media.values()) if (!eligible || other !== state) stopVideoPresentation(other);
+    if (!eligible) return null;
+    const video = state.video;
+    if (!video.presentation) {
+      const id = nextVideoPresentation++;
+      const shared = new SharedArrayBuffer(16 + 480 * 480 * 4);
+      video.presentation = { id, shared, serial: 0 };
+      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 });
+    }
+    const rect = { ...item.rect };
+    if (item.transform) {
+      rect.x = rect.x * item.transform.a + item.transform.e;
+      rect.y = rect.y * item.transform.d + item.transform.f;
+      rect.width *= item.transform.a;
+      rect.height *= item.transform.d;
+    }
+    const raster = white => {
+      canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
+      paintDisplayList(canvas, page.displayList, region, scale, { resource, white });
+      drawHints(canvas, region);
+      surface.flush();
+      const image = surface.makeImageSnapshot();
+      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]);
+    return { id: video.presentation.id, base, mask, rect: {
+      x: Math.round((rect.x - region.x) * scale), y: Math.round((rect.y - region.y) * scale),
+      width: Math.round(rect.width * scale), height: Math.round(rect.height * scale),
+    } };
+  }
+
   function isPipe(value) {
     return Boolean(value && typeof value.waitFor === "function" && typeof value.bytes === "function");
   }
@@ -3220,7 +3696,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;
@@ -3264,7 +3740,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;
@@ -3313,18 +3789,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;
@@ -3340,13 +3819,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;
@@ -3383,8 +3863,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,
@@ -3435,7 +3917,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. */
@@ -3462,6 +3947,7 @@ function buildPageRenderer({
     if (!state || state.playing) return;
     state.error = null;
     setMediaPlaying(state, true);
+    playbackEvent(state, "play", mediaEvent);
     try {
       await loadMedia(state);
       if (state.ended) {
@@ -3484,7 +3970,6 @@ function buildPageRenderer({
       return;
     }
     startMedia(state);
-    mediaEvent(state, "play");
   }
 
   function pauseMedia(element) {
@@ -3495,7 +3980,7 @@ function buildPageRenderer({
     stopClock(state);
     state.needsPosition = true;
     setMediaPlaying(state, false);
-    mediaEvent(state, "pause");
+    playbackEvent(state, "pause", mediaEvent);
   }
 
   async function seekMedia(element, seconds) {
@@ -3539,9 +4024,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;
@@ -3586,7 +4077,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`);
@@ -3598,6 +4089,8 @@ function buildPageRenderer({
 
   /** Starts the clock, the audio stream and the frame/time ticks. */
   function startMedia(state) {
+    hostClearTimeout(state.timer);
+    state.timer = null;
     // An output stream held through a stall (see refillMedia) is already
     // open: the clock goes on from where its audio is, and what it asked for
     // meanwhile is sent now.
@@ -3642,6 +4135,7 @@ function buildPageRenderer({
   }
 
   function stopClock(state, { keepAudio = false } = {}) {
+    stopVideoPresentation(state);
     hostClearTimeout(state.timer);
     state.timer = null;
     state.clockStart = null;
@@ -3680,7 +4174,18 @@ function buildPageRenderer({
     if (!state.playing || state.generation !== loadGeneration || state.document !== page.document) return;
     const now = mediaTime(state);
     const video = state.video;
-    if (video && !video.done && video.frameTime <= now) {
+    if (video?.needsLocalPosition && !video.presentation && !video.done) {
+      try {
+        video.frameTime = seekToKeyframe(video.decoder, now, video.startTime);
+        video.hideUntil = now;
+        video.needsLocalPosition = false;
+      } catch (error) { failMedia(state, error, 3); return; }
+    }
+    if (video?.presentation) {
+      // Decode and present on the compositor thread. This tick only updates
+      // DOM media state; it must not decode the same movie a second time.
+      video.frameTime = now + 1 / (video.decoder.fps || 30);
+    } else if (video && !video.done && video.frameTime <= now) {
       // Late frames are decoded but only the newest is shown.
       const decodeDeadline = hostPerformance.now() + 100;
       while (video.frameTime <= mediaTime(state) && !video.done) {
@@ -3713,6 +4218,10 @@ function buildPageRenderer({
       }
     }
     state.resource.time = now;
+    if (!state.buffering && !state.awaitingAudio) {
+      playbackEvent(state, "playing", mediaEvent);
+      if (!state.playing) return;
+    }
     repaintMedia();
     if (Math.floor(now * 4) !== state.lastTimeUpdate) {
       state.lastTimeUpdate = Math.floor(now * 4);
@@ -3751,6 +4260,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;
@@ -3796,7 +4306,8 @@ function buildPageRenderer({
         if (!state.lastSyncTrace || now - state.lastSyncTrace >= 1000) {
           state.lastSyncTrace = now;
           trace?.(`media sync: audio played ${sound.playedTime.toFixed(3)}s, video shown ${(state.video?.shownTime ?? 0).toFixed(3)}s,`
-            + ` output queued ${Math.max(0, event.sentSeconds - event.seconds).toFixed(3)}s, sink ${Number(event.sinkSeconds ?? 0).toFixed(3)}s`);
+            + ` output queued ${Math.max(0, event.sentSeconds - event.seconds).toFixed(3)}s, sink ${Number(event.sinkSeconds ?? 0).toFixed(3)}s`
+            + `, PCM reserve ${Number(event.bufferedSeconds ?? 0).toFixed(3)}s`);
         }
       } else if (event.event === "timing-error") {
         // Do not silently switch to a free-running clock on missing feedback.
@@ -3830,6 +4341,8 @@ function buildPageRenderer({
       }
     });
     sound.id = id;
+    if (state.video?.presentation) onVideo?.({ type: "video-bind", id: state.video.presentation.id,
+      audioId: id, audioStart: sound.streamStart / sound.decoder.sampleRate, time: mediaTime(state) });
   }
 
   /** Sends about `bytes` of s16le audio (pending samples first, then decoding); at the end, lets it drain. */
@@ -3838,14 +4351,20 @@ function buildPageRenderer({
     if (!state.playing || sound.id === null || sound.finishing) return;
     // While buffering the output plays what it holds and then nothing, as
     // the video waits; what it asks for is sent when playing resumes.
-    if (state.buffering || state.audioPositioning) {
+    if (state.buffering || state.refilling || state.audioPositioning) {
       sound.owed = (sound.owed ?? 0) + bytes;
       return;
     }
     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) {
@@ -3871,7 +4390,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;
@@ -3917,43 +4437,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) {
-    // wasmpeg fails a seek to 0 once frames were decoded; 1 ms reaches the
-    // first keyframe as well.
-    const seek = (time) => decoder.seek(Math.max(1, time * 1000));
-    const frame = 1 / (decoder.fps || 30);
-    if (!(seconds >= frame)) {
-      seek(0);
-      return 0;
-    }
-    const probe = (time) => {
-      seek(time);
-      return pictureKey(decoder.nextFrame(KEYFRAME_PROBE_WIDTH, KEYFRAME_PROBE_HEIGHT));
-    };
-    const target = probe(seconds);
-    let keyframe = seconds;
-    if (target !== null) {
-      let earlier = Math.max(0, seconds - KEYFRAME_SEARCH_SECONDS);
-      if (earlier > 0 && probe(earlier) !== target) {
-        // The keyframe lies in (earlier, keyframe]: narrow it to a frame.
-        while (keyframe - earlier > frame) {
-          const middle = (earlier + keyframe) / 2;
-          if (probe(middle) === target) keyframe = middle;
-          else earlier = middle;
-        }
-      } else {
-        keyframe = earlier;
-      }
-    }
-    seek(keyframe);
-    return keyframe;
-  }
-
-  function pictureKey(pixels) {
-    if (!pixels) return null;
-    let hash = 0x811c9dc5;
-    for (let index = 0; index < pixels.length; index += 3) hash = Math.imul(hash ^ pixels[index], 0x01000193);
-    return hash >>> 0;
+  function seekToKeyframe(decoder, seconds, startTime = 0) {
+    return seekVideoKeyframe(decoder, seconds, startTime);
   }
 
   /**
@@ -3963,17 +4448,33 @@ function buildPageRenderer({
    * new snapshot. The reported output cursor remains the A/V master clock.
    */
   function refillMedia(state, stalledTrack = null) {
-    if (state.refilling) return state.refilling;
+    if (state.refilling) {
+      // An audio prefetch may already be waiting for a later segment. If the
+      // picture catches its own end meanwhile, it really must wait too.
+      if (stalledTrack === state.video && !state.buffering) {
+        state.buffering = true;
+        stopClock(state, { keepAudio: true });
+        if (state.playing) playbackEvent(state, "waiting", mediaEvent);
+      }
+      return state.refilling;
+    }
     const serial = state.seekSerial;
-    state.buffering = true;
     state.base = mediaTime(state);
     // The audio output stays open through a stall: it plays the PCM it holds
     // and then runs dry, and playing resumes right after that PCM. Closing
     // and reopening it instead loses track of what was heard (a closed
     // stream may still play out its device buffer, which then plays twice).
     const holdAudio = Boolean(stalledTrack && state.sound && state.sound.id != null && !state.sound.finishing);
+    // PCM prefetch reaches the end of a snapshot ahead of actual playback.
+    // Keep presenting video against measured audio while the controller plays
+    // its reserve; a decoder needing bytes is not itself an output underrun.
+    const prefetch = holdAudio && stalledTrack === state.sound;
+    state.buffering = !prefetch;
     const stall = { at: hostPerformance.now(), base: state.base };
-    stopClock(state, { keepAudio: holdAudio });
+    if (!prefetch) {
+      stopClock(state, { keepAudio: holdAudio });
+      if (state.playing) playbackEvent(state, "waiting", mediaEvent);
+    }
     // The first await lets `job` be assigned before the body looks at it,
     // so a stall inside startMedia can begin a new refill.
     const job = (async () => {
@@ -4025,19 +4526,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);
@@ -4078,7 +4584,7 @@ function buildPageRenderer({
     state.ended = true;
     state.base = Number.isFinite(state.duration) ? state.duration : state.base;
     setMediaPlaying(state, false);
-    mediaEvent(state, "pause");
+    playbackEvent(state, "pause", mediaEvent);
     mediaEvent(state, "ended");
   }
 
@@ -4121,7 +4627,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;
   }
 
@@ -4134,28 +4640,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(() => {
@@ -4163,6 +4666,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() {
@@ -4174,34 +4682,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);
-      fetchResource(url, "image").then(async (response) => {
-        if (!response.ok) return;
-        const bytes = response.body;
-        const { width, height } = await new Bun.Image(bytes).metadata();
-        const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) return;
-        if (generation !== loadGeneration || document !== page.document || element.getAttribute("src") !== src) {
+      beginImageLoad(element, 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);
-        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;
@@ -4212,15 +4744,22 @@ 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();
-      }).catch(() => {
+        // 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 && imageCrossOrigin(element) === credentials) {
+          finishImageLoad(element, src, null, type => element.dispatchEvent(new page.window.Event(type)));
+        }
       });
     }
     return staleImages;