buninu-browser 0.2.1 → 0.2.3

package/lib/renderer/page-renderer.js

@@ -23,22 +23,32 @@
  * after the load event.
  */
 import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
+import { setCanvasKit } from "./canvas-2d.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 { elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
+import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
+import { beginImageLoad, finishImageLoad } from "./image-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 { matchSelectors, StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { absolutizeStyleSheetUrls, matchSelectors, 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 { CLASSIC_SCRIPT_TYPES, createPageRealm } from "./page-realm.js";
+import { originOf } from "./messaging.js";
 import { MOBILE_USER_AGENT } from "./flags.js";
 import { formatHint } from "../../vendor/wasmpeg/src/js/formats.js";
+import { containerFormat } from "./media-source.js";
 import { floatToS16, splitSamples } from "../audio/pcm.js";
-import { pianoNote, PianoMixer } from "../audio/piano.js";
+import { advanceAudio } from "../media/position-audio.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;
@@ -53,8 +63,105 @@ const MAX_COMPILED_COMPOUNDS = 10_000;
 
 // Media controls: the bar's height over video, and where its parts sit.
 const MEDIA_BAR_HEIGHT = 24;
+// url(...) in a computed background-image.
+const CSS_URL = /url\(\s*(["']?)(.*?)\1\s*\)/gis;
 // Decoded audio already sent, kept so pause/resume continues exactly without decoding again.
 const AUDIO_HISTORY_SECONDS = 3;
+// After a stall, playing resumes once this much more media has arrived (or
+// the wait gives up): resuming on the first bytes stalls again at once on a
+// slow network.
+const RESUME_BUFFER_SECONDS = 2;
+const RESUME_BUFFER_MAX_WAIT_MS = 6000;
+const RESUME_BUFFER_IDLE_MS = 400;
+// element → MediaSource, and the reverse. One renderer owns one page pipeline.
+const elementSources = new WeakMap();
+const sourceElements = new WeakMap();
+
+/**
+ * A frame's window as other frames of the page reach it (messaging.js): its
+ * place among the frames, its document's origin, and delivery of messages to
+ * the realm of whatever document it shows. The page renderer showing the
+ * frame attaches itself; until then the frame shows nothing to post to.
+ */
+export function windowHandle(parent = null, name = "") {
+  let target = null;
+  // The browsing context name (window.name); it outlives navigations.
+  let contextName = String(name);
+  const handle = {
+    name: () => contextName,
+    setName(value) {
+      contextName = String(value);
+    },
+    parent: () => parent,
+    top: () => parent ? parent.top() : handle,
+    origin: () => target?.origin() ?? "null",
+    post: (message) => target?.post(message),
+    closed: () => target?.closed() ?? false,
+    children: () => target?.children() ?? [],
+    global: () => target?.global() ?? null,
+    document: () => target?.document() ?? null,
+    attach(renderer) {
+      target = renderer;
+    },
+  };
+  return handle;
+}
+
+/**
+ * CanvasKit and the bundled fonts, loaded once per process: a page and the
+ * documents of its iframes draw with the same CanvasKit instance (images
+ * cannot move between instances), and the files are read before the
+ * renderer's sandbox closes.
+ */
+let graphics = null;
+// The same, once loaded: an embedding page makes its iframes' renderers with it synchronously.
+let loadedGraphics = null;
+export function loadGraphics() {
+  return graphics ??= (async () => {
+    const wasmBinary = await Bun.file(new URL("canvaskit.wasm", canvasKitDirectory)).arrayBuffer();
+    const CanvasKit = await CanvasKitInit({ wasmBinary });
+    // Page <canvas> uses this same instance. Two CanvasKit instances cannot share images.
+    setCanvasKit(CanvasKit);
+    const fontCatalogue = await Bun.file(new URL("fonts.json", fontDirectory)).json();
+    const uiFontNames = [fontCatalogue.sets.ui.regular, ...fontCatalogue.sets.ui.fallback];
+    const monospaceFontNames = [fontCatalogue.sets.terminal.regular, fontCatalogue.sets.terminal.bold];
+    const fontBuffers = await Promise.all([...uiFontNames, ...monospaceFontNames].map((name) =>
+      Bun.file(new URL(fontCatalogue.fonts[name].file, fontDirectory)).arrayBuffer()));
+    // A TypefaceFontProvider registers each file under an explicit family name.
+    // CanvasKit does not pick a static bold face by weight within one family, so
+    // the monospace bold file gets its own catalogue name and is chosen by weight.
+    const fontProvider = CanvasKit.TypefaceFontProvider.Make();
+    const loadedFamilies = new Map();
+    [...uiFontNames, ...monospaceFontNames].forEach((name, index) => {
+      const family = (fontCatalogue.fonts[name].families ?? [name])[0];
+      fontProvider.registerFont(fontBuffers[index], family);
+      loadedFamilies.set(family.toLowerCase(), family);
+    });
+    // One font collection for every paragraph: building each paragraph from
+    // the provider made a new collection, so Skia's font matching and fallback
+    // caches started cold every time (about 3x slower per paragraph).
+    const fontCollection = CanvasKit.FontCollection.Make();
+    fontCollection.setDefaultFontManager(fontProvider);
+    fontCollection.enableFontFallback();
+
+    const fontFamilies = uiFontNames.map((name) => (fontCatalogue.fonts[name].families ?? [name])[0]);
+    const sansSerifFamily = fontFamilies[0];
+    const monospaceFamily = fontCatalogue.sets.terminal.regular;
+    const monospaceBoldFamily = fontCatalogue.sets.terminal.bold;
+    // Maps CSS generic and common platform family names onto the bundled fonts.
+    const genericFamilies = new Map([
+      ["monospace", monospaceFamily], ["ui-monospace", monospaceFamily], ["menlo", monospaceFamily],
+      ["consolas", monospaceFamily], ["monaco", monospaceFamily], ["courier", monospaceFamily],
+      ["courier new", monospaceFamily], ["sans-serif", sansSerifFamily], ["serif", sansSerifFamily],
+      ["system-ui", sansSerifFamily], ["-apple-system", sansSerifFamily], ["blinkmacsystemfont", sansSerifFamily],
+      ["ui-sans-serif", sansSerifFamily], ["arial", sansSerifFamily], ["helvetica", sansSerifFamily],
+    ]);
+    return loadedGraphics = {
+      CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
+      genericFamilies,
+    };
+  })();
+}
 
 /**
  * Horizontal layout of a media control bar `width` CSS pixels wide: the
@@ -96,7 +203,12 @@ const fontDirectory = new URL("../../usr/share/fonts/", import.meta.url);
  *   videoDecoder?: object | null,
  * }} options
  */
-export async function createPageRenderer({
+export async function createPageRenderer(options) {
+  return buildPageRenderer(options, await loadGraphics());
+}
+
+/** createPageRenderer with the graphics already loaded. */
+function buildPageRenderer({
   fetchResource: rawFetchResource,
   requestNavigation = () => {},
   requestDownload = () => {},
@@ -108,48 +220,23 @@ export async function createPageRenderer({
   consoleMessage = null,
   trace = null,
   onFrame = null,
+  onVideo = null,
   onLifecycle = null,
   videoDecoder = null,
+  // Prepares a classic script on another thread: (source) => Promise<{ code, parsed, strict }>.
+  rewriteScript = null,
   mobile = false,
   verifyStyle = false,
   fullStyle = false,
+  // An iframe's document (see syncFrames): frames go to the embedding page,
+  // which needs only the viewport, so nothing is painted ahead.
+  embedded = false,
+  // This document's window handle, made by the embedding page (see windowHandle).
+  frameWindow = null,
+}, {
+  CanvasKit, loadedFamilies, fontCollection, fontFamilies, sansSerifFamily, monospaceFamily, monospaceBoldFamily,
+  genericFamilies,
 }) {
-  const wasmBinary = await Bun.file(new URL("canvaskit.wasm", canvasKitDirectory)).arrayBuffer();
-  const CanvasKit = await CanvasKitInit({ wasmBinary });
-  const fontCatalogue = await Bun.file(new URL("fonts.json", fontDirectory)).json();
-  const uiFontNames = [fontCatalogue.sets.ui.regular, ...fontCatalogue.sets.ui.fallback];
-  const monospaceFontNames = [fontCatalogue.sets.terminal.regular, fontCatalogue.sets.terminal.bold];
-  const fontBuffers = await Promise.all([...uiFontNames, ...monospaceFontNames].map((name) =>
-    Bun.file(new URL(fontCatalogue.fonts[name].file, fontDirectory)).arrayBuffer()));
-  // A TypefaceFontProvider registers each file under an explicit family name.
-  // CanvasKit does not pick a static bold face by weight within one family, so
-  // the monospace bold file gets its own catalogue name and is chosen by weight.
-  const fontProvider = CanvasKit.TypefaceFontProvider.Make();
-  const loadedFamilies = new Map();
-  [...uiFontNames, ...monospaceFontNames].forEach((name, index) => {
-    const family = (fontCatalogue.fonts[name].families ?? [name])[0];
-    fontProvider.registerFont(fontBuffers[index], family);
-    loadedFamilies.set(family.toLowerCase(), family);
-  });
-  // One font collection for every paragraph: building each paragraph from
-  // the provider made a new collection, so Skia's font matching and fallback
-  // caches started cold every time (about 3x slower per paragraph).
-  const fontCollection = CanvasKit.FontCollection.Make();
-  fontCollection.setDefaultFontManager(fontProvider);
-  fontCollection.enableFontFallback();
-
-  const fontFamilies = uiFontNames.map((name) => (fontCatalogue.fonts[name].families ?? [name])[0]);
-  const sansSerifFamily = fontFamilies[0];
-  const monospaceFamily = fontCatalogue.sets.terminal.regular;
-  const monospaceBoldFamily = fontCatalogue.sets.terminal.bold;
-  // Maps CSS generic and common platform family names onto the bundled fonts.
-  const genericFamilies = new Map([
-    ["monospace", monospaceFamily], ["ui-monospace", monospaceFamily], ["menlo", monospaceFamily],
-    ["consolas", monospaceFamily], ["monaco", monospaceFamily], ["courier", monospaceFamily],
-    ["courier new", monospaceFamily], ["sans-serif", sansSerifFamily], ["serif", sansSerifFamily],
-    ["system-ui", sansSerifFamily], ["-apple-system", sansSerifFamily], ["blinkmacsystemfont", sansSerifFamily],
-    ["ui-sans-serif", sansSerifFamily], ["arial", sansSerifFamily], ["helvetica", sansSerifFamily],
-  ]);
   const resolvedFamilies = new Map();
   /** First available family from a computed font-family list, then the UI fallbacks. */
   function resolveFontFamilies(families = ["sans-serif"], weight = 400) {
@@ -187,6 +274,24 @@ export async function createPageRenderer({
   let hasStateStale = false;
   let structuralState = null;
   let siblingState = null;
+  // iframes (see syncFrames), by element.
+  const frames = new Map();
+  let disposedRenderer = false;
+  const ownWindow = frameWindow ?? windowHandle(null);
+  ownWindow.attach({
+    // An iframe's about:blank document has the origin of the page that made it.
+    origin: () => page.url === "about:blank" && ownWindow.parent() ? ownWindow.parent().origin() : originOf(page.url),
+    post: (message) => page.realm?.receiveMessage(message),
+    closed: () => disposedRenderer,
+    children: () => [...frames.values()].map((frame) => frame.window),
+    global: () => page.realm?.pageGlobal ?? null,
+    document: () => page.realm?.documentBinding ?? null,
+  });
+  // Changes whenever a frame's image does, so the page is rasterized again.
+  let framesVersion = 0;
+  let framePaintTimer = null;
+  // The frame keyboard input goes to, after a click into it.
+  let focusedFrame = null;
   const viewport = new ScrollViewport(800, 600);
   const page = {
     url: "about:blank",
@@ -212,6 +317,13 @@ export async function createPageRenderer({
     resources: new WeakMap(),
     decodedImages: [],
     imagesLoaded: null,
+    // CSS background images by absolute URL: { resource, loaded } (see queueBackgroundImages).
+    backgrounds: new Map(),
+    // Scroll offsets of scroll containers, by element (see setElementScroll).
+    elementScroll: new Map(),
+    // Bumped whenever boxes may have moved (layout, element scrolling), so
+    // IntersectionObserver checks can skip unchanged frames.
+    layoutVersion: 0,
     // <video> and <audio> playback states, by element (see playMedia).
     media: new Map(),
     realm: null,
@@ -353,6 +465,10 @@ export async function createPageRenderer({
   // 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;
 
   /** Hint overlay contents, as a comparable key. */
   function overlayKey() {
@@ -365,6 +481,7 @@ export async function createPageRenderer({
   function sameRasterInput() {
     if (rasterized.scale !== page.deviceScaleFactor || rasterized.background !== page.backgroundColor) return false;
     if (rasterized.overlay !== overlayKey()) return false;
+    if (rasterized.frames !== framesVersion) return false;
     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;
@@ -375,6 +492,7 @@ export async function createPageRenderer({
 
   /** Rasterizes the viewport and hands it to the compositor. */
   function render() {
+    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 };
@@ -393,7 +511,14 @@ export async function createPageRenderer({
     const scale = page.deviceScaleFactor;
     const pixelWidth = Math.max(1, Math.round(region.width * scale));
     const pixelHeight = Math.max(1, Math.round(region.height * scale));
-    const surface = CanvasKit.MakeSurface(pixelWidth, pixelHeight);
+    if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
+      // MakeSurface owns a malloc-backed pixel buffer; delete() alone leaks it.
+      rasterSurface?.dispose();
+      rasterSurface = CanvasKit.MakeSurface(pixelWidth, pixelHeight);
+      rasterSurfaceWidth = pixelWidth;
+      rasterSurfaceHeight = pixelHeight;
+    }
+    const surface = rasterSurface;
     if (!surface) throw new Error(`Unable to create a ${pixelWidth}x${pixelHeight} CanvasKit surface`);
     const canvas = surface.getCanvas();
     canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
@@ -409,11 +534,11 @@ export async function createPageRenderer({
       colorSpace: CanvasKit.ColorSpace.SRGB,
     });
     image.delete();
-    surface.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,
-      scrollX: viewport.x, scrollY: viewport.y,
+      scrollX: viewport.x, scrollY: viewport.y, frames: framesVersion,
     };
     return {
       pixels,
@@ -425,6 +550,7 @@ export async function createPageRenderer({
       height: region.height,
       scale,
       background: backgroundBytes(page.backgroundColor),
+      videoLayer,
     };
   }
 
@@ -461,7 +587,7 @@ export async function createPageRenderer({
 
   /** After a paint or a compositor scroll, rasterize around the viewport once this thread is idle. */
   function schedulePrepaint() {
-    if (!onFrame) return;
+    if (!onFrame || embedded) return;
     hostClearTimeout(prepaintTimer);
     prepaintTimer = hostSetTimeout(() => {
       prepaintTimer = null;
@@ -504,7 +630,7 @@ export async function createPageRenderer({
   /** 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(
@@ -531,10 +657,18 @@ export async function createPageRenderer({
       else canvas.drawRect(deviceRect(rect), paint);
     };
     for (const item of visibleItems(displayList, view, viewport)) {
-      const saved = item.fixed || item.clipRect || item.opacity < 1 ? canvas.save() : null;
+      const saved = item.fixed || item.clipRect || item.opacity < 1 || item.transform ? canvas.save() : null;
       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;
+          canvas.concat([a, 0, ((a - 1) * view.x + e) * scale, 0, d, ((d - 1) * view.y + f) * scale, 0, 0, 1]);
+        }
         if (item.opacity < 1) {
           const layer = new CanvasKit.Paint();
           layer.setAlphaf(item.opacity);
@@ -634,6 +768,30 @@ export async function createPageRenderer({
           false,
         );
         canvas.restore();
+      } else if (item.op === "drawBackgroundImage") {
+        // Tiles from an image shader, repeating (or not) per axis.
+        const resource = displayList.images[item.image];
+        const { tile } = item;
+        canvas.save();
+        const clip = deviceRRect(item.rect, item.radii);
+        if (clip) canvas.clipRRect(clip, CanvasKit.ClipOp.Intersect, true);
+        const matrix = CanvasKit.Matrix.multiply(
+          CanvasKit.Matrix.translated((tile.x - view.x) * scale, (tile.y - view.y) * scale),
+          CanvasKit.Matrix.scaled(tile.width * scale / resource.width, tile.height * scale / resource.height),
+        );
+        const shader = resource.image.makeShaderOptions(
+          item.repeatX ? CanvasKit.TileMode.Repeat : CanvasKit.TileMode.Decal,
+          item.repeatY ? CanvasKit.TileMode.Repeat : CanvasKit.TileMode.Decal,
+          CanvasKit.FilterMode.Linear,
+          CanvasKit.MipmapMode.None,
+          matrix,
+        );
+        const paint = new CanvasKit.Paint();
+        paint.setShader(shader);
+        canvas.drawRect(deviceRect(item.bounds), paint);
+        paint.delete();
+        shader.delete();
+        canvas.restore();
       } else if (item.op === "drawVideo") {
         const resource = displayList.images[item.image];
         const rect = deviceRect(item.rect);
@@ -642,7 +800,10 @@ export async function createPageRenderer({
         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);
@@ -650,7 +811,7 @@ export async function createPageRenderer({
         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(
@@ -658,7 +819,7 @@ export async function createPageRenderer({
           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);
         }
@@ -1157,12 +1318,14 @@ export async function createPageRenderer({
   }
 
   function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
+    disposeFrames();
     closePiano();
     disposeVideos();
     page.realm?.dispose();
     page.realm = null;
     page.window?.happyDOM?.abort?.();
     for (const image of page.decodedImages) image.delete();
+    disposeBackgrounds();
     page.window = parsed.window;
     page.document = parsed.document;
     observeStyleChanges(parsed.document);
@@ -1174,10 +1337,13 @@ export async function createPageRenderer({
     page.decodedImages = imageResources.decoded;
     page.imagesLoaded = null;
     imageRequests = new WeakMap();
+    page.elementScroll = new Map();
     const timing = styleAndLayout();
+    syncFrames();
+    queueBackgroundImages();
     trace?.(`${page.url}: first style ${timing.style}ms, layout ${timing.layout}ms`);
     viewport.scrollTo(0, 0);
-    viewport.setContentSize(page.layout.width, page.layout.height);
+    setContentSize();
     page.hints = [];
     page.hintsVisible = false;
     page.needsPaint = true;
@@ -1237,10 +1403,12 @@ export async function createPageRenderer({
     page.layout = layoutEngine.layout(page.renderTree, {
       measureText, fontMetrics, width: page.width, viewportHeight: page.height, x: 0, y: 0,
     });
-    page.displayList = buildDisplayList(page.layout, page.renderTree, page.resources);
+    page.displayList = paintList();
+    // The content may now reach less far than a container was scrolled.
+    if (clampElementScroll()) page.displayList = paintList();
     page.resourceLayoutDirty = false;
     laidOutSheets = sheets;
-    viewport.setContentSize(page.layout.width, page.layout.height);
+    setContentSize();
     return { style: Math.round(styled - started), layout: Math.round(hostPerformance.now() - styled) };
   }
 
@@ -1265,12 +1433,31 @@ export async function createPageRenderer({
     if (mismatches) reportError(`buninu-browser: incremental style: ${mismatches} element(s) differ from a full restyle`);
   }
 
+  /**
+   * Brings style and layout up to date with the DOM. Whichever path asks (a
+   * frame, or a script reading geometry or styles), the media and images the
+   * DOM now names are requested first: a script that inserts images and
+   * measures them at once must not leave them unloaded.
+   */
   function rebuildRenderTree(reason = "update") {
     const started = hostPerformance.now();
     page.dirty = false;
+    page.layoutVersion++;
     page.title = page.document?.title ?? page.title;
+    let staleImages = [];
+    if (page.document) {
+      initializeVideos(page.document, page.resources);
+      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 (!timing.skipped) page.needsPaint = true;
+    syncFrames();
+    if (!timing.skipped) queueBackgroundImages();
     lastRebuildMs = hostPerformance.now() - started;
     trace?.(`${page.url}: restyle and relayout (${reason}) ${Math.round(lastRebuildMs)}ms`
       + ` (style ${timing.style}ms for ${styleEngine.incremental ? styleEngine.restyled : "all"} elements: ${lastStyleReason}; ${lastStyleParts}, layout ${timing.layout}ms)`);
@@ -1329,6 +1516,16 @@ export async function createPageRenderer({
     }
     if (url === "about:blank") {
       replaceDocument("", url);
+      // An iframe's blank document is scripted from its page (through
+      // contentWindow and contentDocument), so it has a realm.
+      if (embedded && page.scripting !== "off") {
+        page.realm = createPageRealm({ window: page.window, document: page.document, mode: page.scripting, hooks: realmHooks(generation) });
+        render();
+        commit.resolve();
+        // No scripts of its own: it is complete at once, and its realm reports so.
+        await page.realm.runDocumentScripts();
+        return;
+      }
       render();
       commit.resolve();
       finish();
@@ -1384,8 +1581,11 @@ export async function createPageRenderer({
       page.document.body.textContent = source;
       rebuildRenderTree();
     }
-    if (status < 200 || status > 299) {
-      page.document.body.textContent = `HTTP ${status} ${statusText}\n${page.document.body.textContent}`;
+    // An error status with a body shows that body, scripts included, as in
+    // Chrome: sites serve real pages that way (Google's "unusual traffic"
+    // check comes as 429). Only an empty response gets a note instead.
+    if ((status < 200 || status > 299) && !source.trim()) {
+      page.document.body.textContent = `HTTP ${status} ${statusText}`.trim();
       rebuildRenderTree();
     }
     render();
@@ -1465,6 +1665,7 @@ export async function createPageRenderer({
         }
         page.resources.set(element, resource);
         page.decodedImages.push(resource.image);
+        finishImageLoad(element, src, resource, type => element.dispatchEvent(new page.window.Event(type)));
       }
       page.dirty = true;
       page.resourceLayoutDirty = true;
@@ -1480,16 +1681,7 @@ export async function createPageRenderer({
 
   /** Brings style, layout and raster up to date; returns whether it repainted. */
   function refresh() {
-    if (page.dirty) {
-      initializeVideos(page.document, page.resources);
-      const staleImages = queueImageResources();
-      rebuildRenderTree();
-      for (const image of staleImages) {
-        const index = page.decodedImages.indexOf(image);
-        if (index >= 0) page.decodedImages.splice(index, 1);
-        image.delete();
-      }
-    }
+    if (page.dirty) rebuildRenderTree();
     if (!page.needsPaint) return false;
     render();
     return true;
@@ -1501,13 +1693,7 @@ export async function createPageRenderer({
     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;
@@ -1560,6 +1746,12 @@ export async function createPageRenderer({
 
   function realmHooks(generation) {
     return {
+      frames: {
+        self: ownWindow,
+        parent: ownWindow.parent(),
+        top: ownWindow.top(),
+        childOf: (element) => ensureFrame(element)?.window ?? null,
+      },
       definedChanged(name) {
         // An upgrade changes :defined for that tag's elements only.
         if (selectorTraits.defined) {
@@ -1577,8 +1769,17 @@ export async function createPageRenderer({
       playMedia,
       pauseMedia,
       seekMedia,
+      attachMediaSrc,
+      mediaReadyState,
+      mediaNetworkState,
+      mediaError,
+      mediaBuffered,
+      mediaAppended,
+      mediaDuration,
       lifecycle(name) {
         if (generation !== loadGeneration) return;
+        // The images load waited for are in the frame shown at load.
+        if (name === "load") refresh();
         onLifecycle?.(name, generation);
         // Parsing and the deferred scripts are done: changes from async
         // scripts and late images get frames, without waiting for load.
@@ -1587,7 +1788,7 @@ export async function createPageRenderer({
           scheduleFrame();
         }
       },
-      whenImagesLoaded: () => page.imagesLoaded,
+      whenImagesLoaded: () => Promise.all([page.imagesLoaded, ...[...page.backgrounds.values()].map((entry) => entry.loaded)]),
       afterTask() {},
       boundsOf(element) {
         if (page.dirty) rebuildRenderTree("script read geometry");
@@ -1606,10 +1807,41 @@ export async function createPageRenderer({
         if (page.dirty) rebuildRenderTree("script scrolled");
         if (viewport.scrollTo(x, y)) render();
       },
+      elementScroll(element) {
+        if (page.dirty) rebuildRenderTree("script read geometry");
+        return scrollerGeometry(element);
+      },
+      elementAt(x, y) {
+        if (page.dirty) rebuildRenderTree("script read geometry");
+        if (!(x >= 0 && y >= 0 && x < page.width && y < page.height) || !page.displayList) return null;
+        return elementAtPoint(page.renderTree, page.displayList, x, y, viewport);
+      },
+      setElementScroll(element, x, y) {
+        if (page.dirty) rebuildRenderTree("script scrolled");
+        setElementScroll(element, x, y);
+      },
+      scrollIntoView(element) {
+        if (page.dirty) rebuildRenderTree("script scrolled");
+        revealElement(element);
+      },
       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");
+        return page.layoutVersion;
+      },
+      customProperties(element) {
+        if (!element) return null;
+        if (page.dirty) rebuildRenderTree("getComputedStyle");
+        return styleEngine.customPropertiesOf(element);
       },
       navigate: (url) => navigateTo(String(url)),
       activateLink(anchor) {
@@ -1620,7 +1852,14 @@ export async function createPageRenderer({
       },
       submitForm,
       async fetchScript(url) {
-        if (/^(?:blob|data):/i.test(url)) {
+        // Blob URLs live in this document's registry. Host fetch only accepts
+        // http(s) and s3, and a MediaSource URL has no script bytes.
+        if (/^blob:/i.test(url)) {
+          const stored = page.realm?.blobEntry?.(url);
+          if (stored?.kind !== "blob") throw new TypeError("Failed to fetch");
+          return new TextDecoder().decode(await stored.blob.arrayBuffer());
+        }
+        if (/^data:/i.test(url)) {
           const response = await fetch(url);
           if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
           return response.text();
@@ -1634,40 +1873,84 @@ export async function createPageRenderer({
       reportError,
       consoleMessage,
       userAgent: () => page.userAgent,
+      initScripts: () => page.initScripts ?? [],
+      rewriteScript,
       documentCookie: () => page.cookie,
       setDocumentCookie(value) {
         page.cookie = mergeDocumentCookie(page.cookie, String(value));
         setCookie(String(value));
       },
       webSockets,
-      async pageFetch(request) {
-        const response = await pageFetch(request);
-        if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
-        return response;
+      pageFetch(request) {
+        const networkPending = pageFetch(request);
+        const result = networkPending.then((response) => {
+          if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
+          return response;
+        });
+        result.abort = () => networkPending.abort?.();
+        return result;
       },
     };
   }
 
+  /**
+   * Form submission (HTML §4.10.21.3): GET puts the entries in the action's
+   * query; POST sends them as the body, encoded per the form's enctype, and
+   * the controller navigates with that request.
+   */
   function submitForm(form, submitter = null) {
     const method = (submitter?.getAttribute("formmethod") ?? form.getAttribute("method") ?? "get").toLowerCase();
-    if (method !== "get") return;
     const action = submitter?.getAttribute("formaction") ?? form.getAttribute("action") ?? page.url;
     const url = new URL(action || page.url, page.url);
+    const entries = [...new page.window.FormData(form, submitter)];
+    if (method === "post") {
+      const enctype = (submitter?.getAttribute("formenctype") ?? form.getAttribute("enctype") ?? "").toLowerCase();
+      requestNavigation(url.href, null, null, encodeFormBody(entries, enctype));
+      return;
+    }
+    if (method !== "get") return;
     url.search = "";
-    for (const [name, value] of new page.window.FormData(form, submitter)) {
+    for (const [name, value] of entries) {
       if (typeof value === "string") url.searchParams.append(name, value);
     }
     navigateTo(url.href);
   }
 
+  /** A POST form's entries as a request body and its content type. Files go as empty parts. */
+  function encodeFormBody(entries, enctype) {
+    const encoder = new TextEncoder();
+    if (enctype === "multipart/form-data") {
+      const boundary = `----buninuFormBoundary${crypto.randomUUID().replaceAll("-", "")}`;
+      const quote = (text) => String(text).replace(/\r\n|\r|\n/g, "\r\n").replaceAll('"', "%22");
+      let body = "";
+      for (const [name, value] of entries) {
+        const file = typeof value === "string" ? null : value;
+        body += `--${boundary}\r\nContent-Disposition: form-data; name="${quote(name)}"`
+          + (file ? `; filename="${quote(file.name ?? "")}"\r\nContent-Type: application/octet-stream` : "")
+          + `\r\n\r\n${file ? "" : String(value).replace(/\r\n|\r|\n/g, "\r\n")}\r\n`;
+      }
+      body += `--${boundary}--\r\n`;
+      return { method: "POST", body: encoder.encode(body), contentType: `multipart/form-data; boundary=${boundary}` };
+    }
+    if (enctype === "text/plain") {
+      const body = entries.map(([name, value]) => `${name}=${typeof value === "string" ? value : value.name ?? ""}\r\n`).join("");
+      return { method: "POST", body: encoder.encode(body), contentType: "text/plain" };
+    }
+    const params = new URLSearchParams();
+    for (const [name, value] of entries) params.append(name, typeof value === "string" ? value : value.name ?? "");
+    return { method: "POST", body: encoder.encode(params.toString()), contentType: "application/x-www-form-urlencoded" };
+  }
+
   /** The border box of an element's layout box in viewport coordinates. */
   function viewportBounds(element) {
     let fixed = false;
     for (let ancestor = element; ancestor && ancestor.nodeType === 1; ancestor = ancestor.parentElement) {
       if (styleEngine.get(ancestor)?.position === "fixed") { fixed = true; break; }
     }
-    const scrollX = fixed ? 0 : viewport.x;
-    const scrollY = fixed ? 0 : viewport.y;
+    // Scroll containers around it move it too.
+    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) {
@@ -1748,7 +2031,26 @@ export async function createPageRenderer({
 
   function collectHints() {
     const chars = ["a", "s", "d", "f", "j", "k", "l"];
-    const regions = interactiveRegions(page.renderTree, page.layout, viewport, viewport).slice(0, 49);
+    // Laid-out regions moved by the scroll containers around them, kept
+    // where the element itself shows (not scrolled out of a container or covered).
+    const regions = interactiveRegions(page.renderTree, page.layout, viewport, {})
+      .map((region) => {
+        const shift = scrollShift(region.element);
+        if (!shift.x && !shift.y) return region;
+        const rects = region.rects.map((rect) => ({
+          ...rect, left: rect.left - shift.x, right: rect.right - shift.x, top: rect.top - shift.y, bottom: rect.bottom - shift.y,
+        }));
+        return { element: region.element, rects };
+      })
+      .filter((region) => {
+        const rect = region.rects[0];
+        const cx = (rect.left + rect.right) / 2;
+        const cy = (rect.top + rect.bottom) / 2;
+        if (cx < 0 || cy < 0 || cx >= page.width || cy >= page.height) return false;
+        const shown = page.displayList ? elementAtPoint(page.renderTree, page.displayList, cx, cy, viewport) : null;
+        return !shown || shown === region.element || region.element.contains(shown) || shown.contains(region.element);
+      })
+      .slice(0, 49);
     const labels = regions.length <= chars.length
       ? chars
       : chars.flatMap((first) => chars.map((second) => first + second));
@@ -1783,9 +2085,14 @@ export async function createPageRenderer({
 
   async function downloadBlob(url, name) {
     try {
-      const response = await fetch(url);
-      if (!response.ok) throw new Error(`blob download failed: HTTP ${response.status}`);
-      const data = new Uint8Array(await response.arrayBuffer());
+      const stored = page.realm?.blobEntry?.(url);
+      let data;
+      if (stored?.kind === "blob") data = new Uint8Array(await stored.blob.arrayBuffer());
+      else {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`blob download failed: HTTP ${response.status}`);
+        data = new Uint8Array(await response.arrayBuffer());
+      }
       if (data.byteLength > 64 * 1024 * 1024) throw new Error("blob download exceeds 64 MB");
       requestDownload({ url, name, data });
     } catch (error) {
@@ -1802,6 +2109,10 @@ export async function createPageRenderer({
     setUserAgent(userAgent) {
       if (typeof userAgent === "string" && userAgent) page.userAgent = userAgent;
     },
+    /** Scripts every new document runs before its own (CDP Page.addScriptToEvaluateOnNewDocument). */
+    setInitScripts(sources) {
+      page.initScripts = Array.isArray(sources) ? sources.map(String) : [];
+    },
     /** Messages the page logged, for diagnostics. */
     consoleMessages() {
       return page.realm?.console ?? [];
@@ -1914,21 +2225,18 @@ export async function createPageRenderer({
       return { x: viewport.x, y: viewport.y };
     },
     press(key, options = {}) {
+      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,
@@ -1966,12 +2274,44 @@ export async function createPageRenderer({
       return { x: viewport.x, y: viewport.y };
     },
     type(text) {
+      if (focusedFrame?.renderer) return focusedFrame.renderer.type(text);
       editFocusedText(String(text ?? ""));
       refresh();
     },
     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
@@ -1983,6 +2323,7 @@ export async function createPageRenderer({
       // 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) {
         // Some search forms draw a wide control around a narrow textarea and
         // rely on script to forward clicks. Preserve that affordance when the
@@ -1992,13 +2333,34 @@ export async function createPageRenderer({
           if (!bounds || x < bounds.left || x >= bounds.left + bounds.width
             || y < bounds.top || y >= bounds.top + bounds.height) continue;
           const fields = form.querySelectorAll('textarea[inputmode="search"], input[type="search"]');
-          if (fields.length === 1) region = { element: fields[0] };
+          if (fields.length === 1) {
+            region = { element: fields[0] };
+            forwarded = true;
+          }
           break;
         }
       }
-      if (!region) return null;
+      // Pointer events go to the topmost element painted at the point, where
+      // 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 target = forwarded ? region.element : precise ?? region?.element ?? null;
+      if (!target) {
+        focusedFrame = null;
+        return null;
+      }
+      // A click inside an iframe belongs to its document alone.
+      const inFrame = target.tagName === "IFRAME" ? frameAt(target, x, y) : null;
+      focusedFrame = inFrame?.frame ?? null;
+      if (inFrame) {
+        const followed = inFrame.frame.renderer.click(inFrame.x, inFrame.y);
+        const href = typeof followed === "string" ? followed : followed?.fragmentFrom ? null : followed?.url;
+        if (href && !followed?.download) void loadFrame(inFrame.frame, href);
+        return null;
+      }
       if (page.url === "about:audio") {
-        const key = region.element.closest?.("[data-piano-note]");
+        const key = target.closest?.("[data-piano-note]");
         const note = Number(key?.getAttribute("data-piano-note"));
         if (key && Number.isInteger(note) && note >= 0 && note <= 127 && audio) {
           playPiano(note);
@@ -2006,22 +2368,30 @@ export async function createPageRenderer({
           return null;
         }
       }
-      if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(region.element.tagName)) {
-        region.element.focus();
-      }
-      if (page.realm) {
-        const event = new page.window.MouseEvent("click", {
-          bubbles: true, cancelable: true, clientX: Number(x), clientY: Number(y), button: 0,
-        });
-        const prevented = page.realm.dispatch(region.element, event);
+      // The press focuses the focusable element it lands in, unless mousedown was canceled.
+      const focus = () => {
+        const focusable = target.closest?.("input, textarea, select, button, [tabindex]");
+        if (focusable && !focusable.disabled) focusable.focus();
+      };
+      if (!page.realm) focus();
+      else {
+        // 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;
+        const pointer = { ...init, pointerId: 1, pointerType: "mouse", isPrimary: true };
+        page.realm.dispatch(target, new PointerEvent("pointerdown", { ...pointer, buttons: 1 }));
+        if (!page.realm.dispatch(target, new page.window.MouseEvent("mousedown", { ...init, buttons: 1 }))) focus();
+        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 }));
         refresh();
         if (prevented) return null;
       }
-      if (region.element.tagName === "AUDIO" || region.element.tagName === "VIDEO") {
-        clickMedia(region.element, x, y);
+      if ((target.tagName === "AUDIO" || target.tagName === "VIDEO") && target.hasAttribute("controls")) {
+        clickMedia(target, x, y);
         return null;
       }
-      const anchor = region.element.closest?.("a[href]");
+      const anchor = target.closest?.("a[href]");
       if (!anchor) return null;
       const href = new URL(anchor.getAttribute("href"), page.url).href;
       if (href.startsWith("javascript:")) {
@@ -2105,15 +2475,18 @@ export async function createPageRenderer({
       return cloneableResult(value);
     },
     dispose() {
+      disposedRenderer = true;
       hostClearTimeout(prepaintTimer);
       hostClearTimeout(frameTimer);
+      disposeFrames();
       page.realm?.dispose();
       closePiano();
       disposeVideos();
+      rasterSurface?.dispose();
+      rasterSurface = null;
       page.window?.happyDOM?.abort?.();
       for (const image of page.decodedImages) image.delete();
-      fontCollection.delete();
-      fontProvider.delete();
+      disposeBackgrounds();
     },
   };
 
@@ -2155,13 +2528,15 @@ export async function createPageRenderer({
       const entry = { url, text: null };
       linkSheets.set(element, entry);
       const request = fetchResource(url, "stylesheet").then((response) => {
-        if (response.ok) entry.text = new TextDecoder().decode(response.body);
+        // Its url()s are relative to the sheet, not to the document.
+        if (response.ok) entry.text = absolutizeStyleSheetUrls(new TextDecoder().decode(response.body), response.url || url);
       }, () => {
         // 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);
     }
@@ -2184,25 +2559,423 @@ export async function createPageRenderer({
     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;
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
         // Untrusted image bytes are decoded here, inside the renderer.
         const bytes = response.body;
         const { width, height } = await new Bun.Image(bytes).metadata();
         const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) return;
+        if (!image) throw new Error("Image decoding failed");
         const resource = Object.freeze({ width, height, image, url: response.url });
+        finishImageLoad(element, src, resource);
         map.set(element, resource);
         decoded.push(image);
         entries.push({ element, src, resource });
       } catch {
         // Broken images keep their fallback replaced-element dimensions.
+        finishImageLoad(element, src, null);
       }
     }));
     return { map, decoded, entries };
   }
 
+  // ---- iframes. Each same-origin iframe's document lives in a page renderer
+  // of its own (embedded), sharing this process's CanvasKit: its frames are
+  // cut to its viewport and drawn into the iframe's box through a resource
+  // whose image is swapped as frames arrive. Other documents are not given to
+  // this process (the controller checks), so their iframes stay empty.
+
+  /** Brings the frames in line with the document's iframes: their documents and sizes. */
+  function syncFrames() {
+    const document = page.document;
+    const elements = document ? [...document.getElementsByTagName("iframe")] : [];
+    if (!elements.length && !frames.size) return;
+    const boxes = frameBoxes();
+    for (const [element, frame] of frames) {
+      if (!element.isConnected || element.ownerDocument !== document) disposeFrame(frame);
+    }
+    for (const element of elements) {
+      const frame = ensureFrame(element);
+      page.resources.set(element, frame.holder);
+      // Setting the name attribute names the frame (HTML §4.8.5).
+      const nameAttribute = element.getAttribute("name");
+      if (nameAttribute !== frame.nameAttribute) {
+        frame.nameAttribute = nameAttribute;
+        frame.window.setName(nameAttribute ?? "");
+      }
+      frame.box = boxes.get(element) ?? null;
+      const width = Math.max(1, Math.round(frame.box?.width ?? 300));
+      const height = Math.max(1, Math.round(frame.box?.height ?? 150));
+      if (!frame.size || frame.size.width !== width || frame.size.height !== height || frame.size.scale !== page.deviceScaleFactor) {
+        frame.size = { width, height, scale: page.deviceScaleFactor };
+        void frame.ready.then((renderer) => renderer?.resize(width, height, page.deviceScaleFactor));
+      }
+      const source = frameSource(element);
+      if (source !== frame.source) {
+        frame.source = source;
+        void loadFrame(frame, source);
+      }
+    }
+  }
+
+  /** The frame of an iframe of this document, made on first need (a script may post to it at once). */
+  function ensureFrame(element) {
+    let frame = frames.get(element);
+    if (frame) return frame;
+    if (element?.tagName !== "IFRAME" || !element.isConnected || element.ownerDocument !== page.document) return null;
+    frame = { element, renderer: null, ready: null, source: undefined, token: 0, size: null, box: null,
+      window: windowHandle(ownWindow, element.getAttribute("name") ?? ""), holder: { width: 0, height: 0, image: null } };
+    frame.nameAttribute = element.getAttribute("name");
+    frames.set(element, frame);
+    page.resources.set(element, frame.holder);
+    // Made at once, as is its initial about:blank document (HTML §4.8.5): a
+    // script can use its contentWindow as soon as the iframe is inserted.
+    const renderer = buildPageRenderer({
+      fetchResource: rawFetchResource,
+      requestNavigation: (url, downloadName) => {
+        if (downloadName === null) void loadFrame(frame, url);
+      },
+      requestDownload,
+      reportError,
+      pageFetch,
+      webSockets,
+      setCookie,
+      consoleMessage,
+      onFrame: (update) => showFrame(frame, update),
+      onLifecycle: (name, generation) => frameLifecycle(frame, name, generation),
+      videoDecoder,
+      rewriteScript,
+      mobile,
+      embedded: true,
+      frameWindow: frame.window,
+    }, loadedGraphics);
+    // Page scripts in "host" mode share one global object; a frame's scripts need their own.
+    renderer.setScripting(page.scripting === "ses" ? "ses" : "off");
+    renderer.setUserAgent(page.userAgent);
+    renderer.setInitScripts(page.initScripts ?? []);
+    frame.renderer = renderer;
+    frame.ready = Promise.resolve(renderer);
+    frame.loading = renderer.loadDocument({ url: "about:blank" }).then((generation) => {
+      frame.generation = generation;
+      frame.initialGeneration = generation;
+    });
+    // Then its src, at once: syncFrames only adjusts the size later. A frame
+    // without one keeps its initial document, whose load the iframe fires;
+    // otherwise only its src's load is fired.
+    frame.source = frameSource(element);
+    frame.silentInitialLoad = frame.source !== "about:blank";
+    if (frame.source !== "about:blank") void loadFrame(frame, frame.source);
+    return frame;
+  }
+
+  /** Each rendered iframe's content box, in document coordinates. */
+  function frameBoxes() {
+    const boxes = new Map();
+    if (!page.layout || !page.renderTree) return boxes;
+    for (const fragment of page.layout.fragments) {
+      for (const run of fragment.runs) {
+        if (run.type !== "image") continue;
+        const element = page.renderTree.nodesById.get(run.nodeId)?.domNode;
+        if (element?.tagName === "IFRAME") {
+          boxes.set(element, { x: run.x, y: run.y ?? fragment.y, width: run.width, height: run.height });
+        }
+      }
+    }
+    return boxes;
+  }
+
+  /** The URL an iframe shows: its src resolved against the page, or about:blank. */
+  function frameSource(element) {
+    const src = element.getAttribute("src")?.trim();
+    if (!src) return "about:blank";
+    try {
+      return new URL(src, page.url).href;
+    } catch {
+      return "about:blank";
+    }
+  }
+
+  /** Loads a frame's document; a cross-origin one (or a failure) leaves it blank. */
+  async function loadFrame(frame, url) {
+    const token = ++frame.token;
+    let document = { url: "about:blank" };
+    let target = null;
+    try { target = new URL(url); } catch { /* blank */ }
+    if (target && ["http:", "https:"].includes(target.protocol) && target.origin === new URL(page.url).origin) {
+      try {
+        const response = await fetchResource(target.href, "iframe");
+        document = {
+          url: response.url || target.href,
+          source: new TextDecoder().decode(response.body),
+          contentType: response.contentType || "text/html",
+          status: response.status,
+          statusText: response.statusText ?? "",
+          cookie: response.documentCookie ?? page.cookie,
+        };
+      } catch (error) {
+        trace?.(`${page.url}: iframe ${target.href} not shown: ${error?.message ?? error}`);
+      }
+    }
+    const renderer = await frame.ready;
+    if (!renderer || token !== frame.token || !frames.has(frame.element)) return;
+    frame.loading = renderer.loadDocument(document).then((generation) => { frame.generation = generation; });
+  }
+
+  /** A frame's document painted: its viewport becomes the iframe's image. */
+  function showFrame(frame, { tile, scroll, viewport: size }) {
+    if (!frames.has(frame.element)) return;
+    const { pixels, width, height } = cropViewport(tile, scroll.x, scroll.y, size.width, size.height);
+    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;
+    const first = !frame.holder.image;
+    frame.holder.image?.delete();
+    Object.assign(frame.holder, { width, height, image });
+    framesVersion++;
+    // The display list leaves out images that have nothing to show yet.
+    if (first && page.layout) page.displayList = paintList();
+    page.needsPaint = true;
+    if (!framePaintTimer) {
+      framePaintTimer = hostSetTimeout(() => {
+        framePaintTimer = null;
+        if (page.needsPaint && !page.loading) render();
+      }, 16);
+    }
+  }
+
+  /** A frame's document reached DOMContentLoaded or load: the iframe fires load. */
+  function frameLifecycle(frame, name, generation) {
+    if (name !== "load" || !frames.has(frame.element)) return;
+    // A blank document loads within loadDocument, before its generation is known here.
+    hostSetTimeout(() => void frame.loading?.then(() => {
+      if (frame.generation !== generation || !frames.has(frame.element) || !page.realm) return;
+      if (frame.silentInitialLoad && generation === frame.initialGeneration) return;
+      page.realm.dispatch(frame.element, new page.window.Event("load"));
+      refresh();
+    }), 0);
+  }
+
+  function disposeFrame(frame) {
+    frames.delete(frame.element);
+    if (focusedFrame === frame) focusedFrame = null;
+    frame.token++;
+    void frame.ready?.then((renderer) => renderer?.dispose());
+    frame.holder.image?.delete();
+    frame.holder.image = null;
+  }
+
+  function disposeFrames() {
+    for (const frame of [...frames.values()]) disposeFrame(frame);
+    hostClearTimeout(framePaintTimer);
+    framePaintTimer = null;
+  }
+
+  /** The frame under a viewport point, with the point in the frame's own viewport. */
+  function frameAt(element, x, y) {
+    const frame = frames.get(element);
+    if (!frame?.renderer || !frame.box) return null;
+    const shift = scrollShift(element);
+    return { frame, x: x + viewport.x + shift.x - frame.box.x, y: y + viewport.y + shift.y - frame.box.y };
+  }
+
+  // ---- Scroll containers (CSS Overflow 3 §3). Elements with overflow other
+  // than visible or clip scroll their content: the offsets live here, paint
+  // moves the content by them (see paintEffects), and the wheel, scripts and
+  // scrollIntoView change them.
+
+  /** The page scrolls over its laid-out size and whatever overflows it (see displayList.extent). */
+  function setContentSize() {
+    const extent = page.displayList?.extent;
+    viewport.setContentSize(Math.max(page.layout.width, extent?.width ?? 0), Math.max(page.layout.height, extent?.height ?? 0));
+  }
+
+  function paintList() {
+    return buildDisplayList(page.layout, page.renderTree, page.resources, backgroundResource, scrollOffsetOf);
+  }
+
+  function scrollOffsetOf(element) {
+    return element ? page.elementScroll.get(element) ?? null : null;
+  }
+
+  /** 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;
+  }
+
+  /**
+   * A scroll container's scroll position and sizes (CSSOM View §6): its
+   * padding box is the client area, its content's reach the scroll area.
+   * Null for an element that is not one.
+   */
+  function scrollerGeometry(element) {
+    const style = element?.nodeType === 1 ? styleEngine.get(element) : null;
+    if (!style?.overflowScrollX && !style?.overflowScrollY) return null;
+    const found = layoutBoxOf(element);
+    if (!found) return null;
+    const { node, box } = found;
+    const [borderTop, borderRight, borderBottom, borderLeft] = style.borderWidths ?? [0, 0, 0, 0];
+    const padding = style.padding ?? [0, 0, 0, 0];
+    const client = {
+      x: box.x + borderLeft,
+      y: box.y + borderTop,
+      width: Math.max(0, box.width - borderLeft - borderRight),
+      height: Math.max(0, box.height - borderTop - borderBottom),
+    };
+    const extent = page.displayList?.scrollers?.get(node.id);
+    // In-flow content gets the end padding; absolutely positioned boxes reach only as far as they do.
+    const scrollWidth = Math.max(client.width, extent ? Math.max(extent.flowRight - client.x + (Number(padding[1]) || 0),
+      extent.right - client.x) : 0);
+    const scrollHeight = Math.max(client.height, extent ? Math.max(extent.flowBottom - client.y + (Number(padding[2]) || 0),
+      extent.bottom - client.y) : 0);
+    const offset = page.elementScroll.get(element) ?? { x: 0, y: 0 };
+    return {
+      x: offset.x,
+      y: offset.y,
+      clientWidth: client.width,
+      clientHeight: client.height,
+      scrollWidth,
+      scrollHeight,
+      maxX: style.overflowScrollX ? Math.max(0, scrollWidth - client.width) : 0,
+      maxY: style.overflowScrollY ? Math.max(0, scrollHeight - client.height) : 0,
+      user: { x: style.overflowScrollX === "auto", y: style.overflowScrollY === "auto" },
+    };
+  }
+
+  /** Scrolls a scroll container to (x, y), clamped; returns whether it moved. */
+  function setElementScroll(element, x, y) {
+    const geometry = scrollerGeometry(element);
+    if (!geometry) return false;
+    const next = {
+      x: Math.round(Math.min(geometry.maxX, Math.max(0, Number(x) || 0))),
+      y: Math.round(Math.min(geometry.maxY, Math.max(0, Number(y) || 0))),
+    };
+    if (next.x === geometry.x && next.y === geometry.y) return false;
+    if (next.x || next.y) page.elementScroll.set(element, next);
+    else page.elementScroll.delete(element);
+    page.layoutVersion++;
+    page.displayList = paintList();
+    page.needsPaint = true;
+    // A scroll event at the element, as a task (CSSOM View §13.1).
+    hostSetTimeout(() => {
+      if (page.realm && element.isConnected) page.realm.dispatch(element, new page.window.Event("scroll"));
+    }, 0);
+    return true;
+  }
+
+  /**
+   * Keeps offsets within what each scroll container can scroll after a
+   * relayout (measured on the display list just built); returns whether any changed.
+   */
+  function clampElementScroll() {
+    let changed = false;
+    for (const [element, offset] of page.elementScroll) {
+      const geometry = element.isConnected ? scrollerGeometry(element) : null;
+      if (!geometry) {
+        page.elementScroll.delete(element);
+        changed = true;
+      } else if (offset.x > geometry.maxX || offset.y > geometry.maxY) {
+        page.elementScroll.set(element, { x: Math.min(offset.x, geometry.maxX), y: Math.min(offset.y, geometry.maxY) });
+        changed = true;
+      }
+    }
+    return changed;
+  }
+
+  /** How far the scroll containers around an element have moved it (to subtract from its layout position). */
+  function scrollShift(element) {
+    let x = 0;
+    let y = 0;
+    for (let node = element; node && node.nodeType === 1; node = node.parentElement) {
+      if (node !== element) {
+        const offset = page.elementScroll.get(node);
+        if (offset) {
+          x += offset.x;
+          y += offset.y;
+        }
+      }
+      // Fixed content does not move with what is around it.
+      if (styleEngine.get(node)?.position === "fixed") break;
+    }
+    return { x, y };
+  }
+
+  /**
+   * The wheel at a viewport point (UI Events §5.4): a wheel event at the
+   * element there; unless it is canceled, the scroll containers from there
+   * outwards each take what they can still scroll of the delta and pass the
+   * rest on (scroll chaining), an iframe's document included unless the
+   * iframe says scrolling="no". Returns the delta left over for the page,
+   * which the compositor scrolls (or, for an iframe's document, the frame here).
+   */
+  function wheel(x, y, deltaX, deltaY, { scrollViewport = true } = {}) {
+    refresh();
+    let left = { x: deltaX, y: deltaY };
+    const target = page.displayList ? elementAtPoint(page.renderTree, page.displayList, x, y, viewport) : null;
+    if (target?.tagName === "IFRAME") {
+      const inFrame = frameAt(target, x, y);
+      if (inFrame) {
+        left = inFrame.frame.renderer.wheel(inFrame.x, inFrame.y, left.x, left.y, {
+          scrollViewport: target.getAttribute("scrolling")?.toLowerCase() !== "no",
+        });
+        if (!left.x && !left.y) return left;
+      }
+    }
+    if (target && page.realm) {
+      const WheelEvent = page.window.WheelEvent ?? page.window.MouseEvent;
+      const event = new WheelEvent("wheel", {
+        bubbles: true, cancelable: true, composed: true, clientX: x, clientY: y, deltaX: left.x, deltaY: left.y, deltaMode: 0,
+      });
+      if (page.realm.dispatch(target, event)) return { x: 0, y: 0 };
+    }
+    let moved = false;
+    for (let node = target; node && node.nodeType === 1 && (left.x || left.y); node = node.parentElement) {
+      const geometry = scrollerGeometry(node);
+      if (!geometry) continue;
+      const nextX = geometry.user.x ? Math.min(geometry.maxX, Math.max(0, geometry.x + left.x)) : geometry.x;
+      const nextY = geometry.user.y ? Math.min(geometry.maxY, Math.max(0, geometry.y + left.y)) : geometry.y;
+      if (nextX === geometry.x && nextY === geometry.y) continue;
+      setElementScroll(node, nextX, nextY);
+      left = { x: left.x - (nextX - geometry.x), y: left.y - (nextY - geometry.y) };
+      moved = true;
+    }
+    // An iframe's document scrolls its own viewport; the top-level page leaves that to the compositor.
+    if (embedded && scrollViewport && (left.x || left.y)) {
+      const before = { x: viewport.x, y: viewport.y };
+      if (viewport.scrollBy(left.x, left.y)) {
+        left = { x: left.x - (viewport.x - before.x), y: left.y - (viewport.y - before.y) };
+        moved = true;
+      }
+    }
+    if (moved) render();
+    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) {
+      const geometry = scrollerGeometry(node);
+      if (!geometry) continue;
+      const target = viewportBounds(element);
+      const container = viewportBounds(node);
+      if (!target || !container) 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));
+    }
+    const bounds = viewportBounds(element);
+    if (bounds) viewport.scrollTo(viewport.x, viewport.y + bounds.top);
+    render();
+  }
+
   /** Every <video> and <audio> gets its (painted) resource: size, frame, playing, time. */
   function initializeVideos(document, resources) {
     for (const element of document.querySelectorAll("video, audio")) {
@@ -2231,31 +3004,162 @@ export async function createPageRenderer({
   /** HTMLMediaElement state for page script. */
   function mediaState(element) {
     const state = page.media.get(element);
+    const decoder = state?.video?.decoder;
     return { paused: !state?.playing, ended: Boolean(state?.ended), currentTime: state ? mediaTime(state) : 0,
-      duration: state?.duration ?? NaN };
+      duration: state?.duration ?? NaN, videoWidth: decoder?.width || 0, videoHeight: decoder?.height || 0 };
+  }
+
+  function mediaReadyState(element) {
+    const state = page.media.get(element);
+    if (!state?.probed) return 0;
+    if (state.buffering) return 2;
+    if (state.video || state.sound) return state.pipe && !state.pipe.done ? 3 : 4;
+    return 1;
+  }
+
+  function mediaNetworkState(element) {
+    const state = page.media.get(element);
+    const hasSrc = Boolean(videoSource(element) || elementSources.get(element));
+    if (!state && !hasSrc) return 0;
+    if (state?.error) return 3;
+    if ((state?.pipe && !state.pipe.done) || state?.loading) return 2;
+    return 1;
+  }
+
+  function mediaError(element) {
+    return page.media.get(element)?.error ?? null;
+  }
+
+  function mediaBuffered(element) {
+    const state = page.media.get(element);
+    const end = state?.mediaSource?.bufferedEnd?.() || state?.bufferedEnd || 0;
+    return end > 0 ? { length: 1, start: 0, end } : { length: 0, start: 0, end: 0 };
+  }
+
+  function resolveMediaSource(value) {
+    const realm = page.realm;
+    if (!realm?.isMediaSource) return null;
+    if (realm.isMediaSource(value)) return value;
+    if (typeof value === "string") return realm.mediaSourceAt(value);
+    return null;
+  }
+
+  /** A resource record for a media element created after the document was parsed. */
+  function ensureMediaResource(element) {
+    if (!element || (element.tagName !== "VIDEO" && element.tagName !== "AUDIO")) return null;
+    let resource = page.resources.get(element);
+    if (resource) return resource;
+    const audioOnly = element.tagName === "AUDIO";
+    resource = {
+      width: audioOnly ? 300 : Number(element.getAttribute("width")) || 300,
+      height: audioOnly ? 32 : Number(element.getAttribute("height")) || 150,
+      bitmapWidth: 0, bitmapHeight: 0, image: null, playing: false, time: 0, duration: NaN,
+    };
+    page.resources.set(element, resource);
+    page.dirty = true;
+    return resource;
+  }
+
+  /** src or srcObject points at a MediaSource: attach it and queue sourceopen. */
+  function attachMediaSrc(element, value) {
+    if (!element || (element.tagName !== "VIDEO" && element.tagName !== "AUDIO")) return;
+    const source = resolveMediaSource(value);
+    if (!source) {
+      elementSources.delete(element);
+      return;
+    }
+    elementSources.set(element, source);
+    sourceElements.set(source, element);
+    if (source.readyState === "closed") {
+      try {
+        source.attach(typeof value === "string" ? value : source._objectURL);
+      } catch {
+        return;
+      }
+    }
+    const state = mediaStateFor(element);
+    if (!state) return;
+    state.mediaSource = source;
+    if (Number.isFinite(source.duration)) {
+      state.durationOverride = true;
+      state.duration = source.duration;
+      if (state.resource) state.resource.duration = source.duration;
+    }
+    bindSourcePipes(state);
+  }
+
+  function mediaAppended(source) {
+    const element = sourceElements.get(source);
+    if (!element) return;
+    const state = page.media.get(element) ?? mediaStateFor(element);
+    if (!state) return;
+    state.mediaSource = source;
+    bindSourcePipes(state);
+    if (state.audioPipe && state.audioPipe !== state.videoPipe) state.hasAudio = true;
+    void refreshProbe(state);
+    if (state.playing && state.hasAudio && !state.sound) ensureAudio(state);
+  }
+
+  function mediaDuration(source, seconds) {
+    const element = sourceElements.get(source);
+    const state = element && page.media.get(element);
+    if (!state || !Number.isFinite(seconds)) return;
+    state.durationOverride = true;
+    state.duration = seconds;
+    if (state.resource) state.resource.duration = seconds;
+    mediaEvent(state, "durationchange");
   }
 
   /** The element's playback state, created (not loaded) on first use. */
   function mediaStateFor(element) {
-    const resource = page.resources.get(element);
-    const url = videoSource(element);
-    if (!videoDecoder || !resource || !url) return null;
+    const resource = ensureMediaResource(element);
+    let source = elementSources.get(element) ?? null;
+    const attributeUrl = videoSource(element);
+    if (!source && attributeUrl) source = resolveMediaSource(attributeUrl);
+    const url = attributeUrl ?? source?._objectURL ?? null;
+    if (!videoDecoder || !resource || (!url && !source)) return null;
+    if (source && source.readyState === "closed") {
+      try {
+        source.attach(url);
+        elementSources.set(element, source);
+        sourceElements.set(source, element);
+      } catch {}
+    }
     let state = page.media.get(element);
     if (state && state.url !== url) {
       closeMedia(state);
+      page.media.delete(element);
       state = null;
     }
     if (!state) {
-      state = { element, url, resource, bytes: null, loading: null, showsPicture: element.tagName === "VIDEO",
-        video: null, sound: null, playing: false, ended: false, duration: NaN, base: 0, clockStart: null,
-        timer: null, lastTimeUpdate: -1, generation: loadGeneration, document: page.document };
+      state = { element, url, resource, bytes: null, pipe: null, videoPipe: null, audioPipe: null,
+        loading: null, showsPicture: element.tagName === "VIDEO", mediaSource: source,
+        video: null, sound: null, playing: false, ended: false,
+        duration: Number.isFinite(source?.duration) ? source.duration : NaN, base: 0, clockStart: null,
+        timer: null, lastTimeUpdate: -1, generation: loadGeneration, document: page.document,
+        probed: false, hasVideo: false, hasAudio: false, buffering: false, refilling: null,
+        seekSerial: 0, error: null, bufferedEnd: 0, contentType: "", videoMime: "", audioMime: "" };
       page.media.set(element, state);
+      if (Number.isFinite(source?.duration)) {
+        state.durationOverride = true;
+        resource.duration = source.duration;
+      }
+    } else if (source) {
+      state.mediaSource = source;
     }
     return state;
   }
 
   /** Current position in seconds. */
   function mediaTime(state) {
+    const sound = state.sound;
+    if (state.playing && sound?.id != null && !sound.done) {
+      const time = sound.playedTime ?? sound.streamStart / sound.decoder.sampleRate;
+      return Number.isFinite(state.duration) ? Math.min(state.duration, time) : time;
+    }
+    // A known audio track which hasn't arrived must not leave its picture
+    // running independently during a network outage.
+    if (state.playing && state.hasAudio && audio && !sound) return state.base;
     const running = state.playing && state.clockStart !== null ? (hostPerformance.now() - state.clockStart) / 1000 : 0;
     const time = state.base + running;
     return Number.isFinite(state.duration) ? Math.min(state.duration, time) : time;
@@ -2271,43 +3175,275 @@ export async function createPageRenderer({
 
   /** 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();
   }
 
-  /** Fetches (once), probes, and opens the decoders for what the file holds. */
+  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: snapshot(video.pipe, state.bytes),
+        options: decodeOptions(state.videoMime || state.contentType, state.url), time: mediaTime(state),
+        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();
+      const pixels = image.readPixels(0, 0, { width, height, colorType: CanvasKit.ColorType.RGBA_8888,
+        alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB });
+      image.delete();
+      return pixels;
+    };
+    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");
+  }
+
+  function bindSourcePipes(state) {
+    const pipes = state.mediaSource?.streamPipes?.();
+    if (!pipes) return;
+    if (pipes.video) state.videoPipe = pipes.video;
+    if (pipes.audio) state.audioPipe = pipes.audio;
+    state.pipe = state.videoPipe ?? state.audioPipe ?? state.pipe;
+    state.videoMime = pipes.videoMime || state.videoMime;
+    state.audioMime = pipes.audioMime || state.audioMime;
+    state.audioHasMedia = pipes.audioReady;
+  }
+
+  /** Fetches (or attaches MSE pipes), probes a prefix, and opens decoders. */
   function loadMedia(state) {
     state.loading ??= (async () => {
-      if (!state.bytes) {
+      if (state.mediaSource) {
+        await state.mediaSource.waitForPipes();
+        bindSourcePipes(state);
+      }
+      if (!state.pipe && !state.bytes && !state.mediaSource) {
         const response = await fetchResource(state.url, state.showsPicture ? "video" : "audio");
         if (!response.ok) throw new Error(`media ${state.url} failed with HTTP ${response.status}`);
-        state.bytes = response.body;
+        state.contentType = response.contentType ?? "";
+        if (isPipe(response.body)) {
+          state.pipe = response.body;
+          state.videoPipe = state.pipe;
+          state.audioPipe = state.pipe;
+        } else {
+          state.bytes = response.body;
+        }
       }
-      if (!Number.isFinite(state.duration) && !state.probed) {
-        const probe = await videoDecoder.probe(state.bytes);
+      await ensureProbed(state);
+      if (!state.mediaSource) watchProgressiveMetadata(state);
+      if (state.hasVideo && !state.video) await openVideoDecoder(state);
+      // A separate audio buffer often arrives as an init segment, or empty.
+      // That is not a broken video: picture plays, and sound attaches later.
+      if (state.hasAudio && audio && !state.sound) {
+        try {
+          let opened = await openAudioDecoder(state);
+          // With separate MSE buffers the audio init segment often arrives
+          // before its first media segment. Starting the video clock here
+          // makes ensureAudio seek past the opening words once sound becomes
+          // decodable. Briefly wait for that first segment so both start at 0.
+          const audioPipe = state.audioPipe ?? state.pipe;
+          const separateAudio = state.audioPipe && state.audioPipe !== state.videoPipe;
+          if (state.video && audioPipe && !audioPipe.done && !audioPipe.error
+            && (!opened || (separateAudio && !state.audioHasMedia))) {
+            const deadline = hostPerformance.now() + 750;
+            do {
+              const mark = audioPipe.size + 1;
+              const remaining = Math.max(0, deadline - hostPerformance.now());
+              await Promise.race([
+                audioPipe.waitFor(mark),
+                new Promise((resolve) => hostSetTimeout(resolve, remaining)),
+              ]);
+              bindSourcePipes(state);
+            } while (separateAudio && !state.audioHasMedia && !audioPipe.done && !audioPipe.error
+              && hostPerformance.now() < deadline);
+            if (!audioPipe.error) opened = await openAudioDecoder(state);
+          }
+        } catch (error) {
+          if (!state.video) throw error;
+          reportError(error);
+        }
+      }
+    })().finally(() => { state.loading = null; });
+    return state.loading;
+  }
+
+  /** Probe until the growing body exposes a picture or sample rate, or ends. */
+  async function ensureProbed(state) {
+    if (state.probed) return;
+    const pipe = state.videoPipe ?? state.pipe;
+    let want = 1024;
+    let lastError = null;
+    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;
+      if (!bytes?.byteLength) {
+        if (!pipe || pipe.done) throw new Error(`media ${state.url}: empty response`);
+        continue;
+      }
+      try {
+        const probe = await videoDecoder.probe(bytes);
+        const videoReady = probe.video?.width > 0;
+        const audioReady = probe.audio?.sampleRate > 0;
+        if (!videoReady && !audioReady) {
+          if (!pipe || pipe.done) throw new Error(`media ${state.url}: no supported tracks`);
+          want = Math.max(bytes.byteLength + 1, want * 2);
+          continue;
+        }
+        if (!state.durationOverride) state.duration = probe.duration ?? NaN;
+        state.hasVideo = Boolean(state.showsPicture && videoReady);
+        state.hasAudio = Boolean(audioReady || (state.audioPipe && state.audioPipe !== pipe));
         state.probed = true;
-        state.duration = probe.duration ?? NaN;
-        state.hasVideo = state.showsPicture && probe.video?.width > 0;
-        state.hasAudio = probe.audio?.sampleRate > 0;
+        const end = Number.isFinite(probe.duration) && probe.duration > 0 ? probe.duration : 0.001;
+        state.bufferedEnd = end;
+        state.mediaSource?.noteBuffered(end);
         state.resource.duration = state.duration;
         mediaEvent(state, "loadedmetadata");
+        return;
+      } catch (error) {
+        lastError = error;
+        if (!pipe || pipe.done) throw lastError;
+        want = Math.max(bytes.byteLength + 1, want * 2);
       }
-      if (state.hasVideo && !state.video) await openVideoDecoder(state);
-      if (state.hasAudio && audio && !state.sound) await openAudioDecoder(state);
-    })().finally(() => { state.loading = null; });
-    return state.loading;
+    }
   }
 
-  // FFmpeg probes the container; formats without magic bytes take a hint from the extension.
-  function decodeOptions(state) {
-    const hint = formatHint(new URL(state.url).pathname);
-    return hint ? { format: hint } : {};
+  /** A later MSE append can extend the duration and the buffered range. */
+  async function refreshProbe(state) {
+    if (state.probing) return;
+    state.probing = true;
+    try {
+      if (!state.probed) {
+        await ensureProbed(state);
+        return;
+      }
+      const pipe = state.videoPipe ?? state.pipe;
+      if (!pipe?.size) return;
+      try {
+        const probe = await videoDecoder.probe(pipe.bytes());
+        if (!state.durationOverride && probe.duration != null && probe.duration !== state.duration) {
+          state.duration = probe.duration;
+          state.resource.duration = probe.duration;
+          mediaEvent(state, "durationchange");
+        }
+        const end = Number.isFinite(probe.duration) && probe.duration > 0 ? probe.duration : Math.max(state.bufferedEnd, 0.001);
+        state.bufferedEnd = end;
+        state.mediaSource?.noteBuffered(end);
+        if (probe.video?.width > 0 && state.showsPicture) state.hasVideo = true;
+        if (probe.audio?.sampleRate > 0) state.hasAudio = true;
+      } catch {}
+    } finally {
+      state.probing = false;
+    }
+  }
+
+  /** Refresh duration as a progressive response grows, especially MP3. */
+  function watchProgressiveMetadata(state) {
+    const pipe = state.pipe;
+    if (!pipe || pipe.done || state.metadataWatch) return;
+    state.metadataWatch = (async () => {
+      let mark = Math.max(pipe.size + 1, pipe.size * 2);
+      while (state.document === page.document && !pipe.error) {
+        await pipe.waitFor(mark);
+        if (state.document !== page.document || pipe.error) return;
+        await refreshProbe(state);
+        if (pipe.done) return;
+        mark = Math.max(pipe.size + 64 * 1024, pipe.size * 2);
+      }
+    })().catch((error) => reportError(error)).finally(() => {
+      state.metadataWatch = null;
+    });
+  }
+
+  // Content-probed when the URL has a container extension. Blob MSE URLs do
+  // not, so the SourceBuffer MIME selects the demuxer.
+  function decodeOptions(mime, url) {
+    let path = "";
+    try {
+      path = url ? new URL(url).pathname : "";
+    } catch {}
+    const hint = formatHint(path);
+    if (hint) return { format: hint };
+    if (/\.(mp4|m4v|m4a|webm|mkv|ogg|ogv|mp3|wav|aac|flac)$/i.test(path)) return {};
+    const format = containerFormat(mime);
+    return format ? { format } : {};
+  }
+
+  function snapshot(pipe, bytes) {
+    return pipe ? pipe.bytes() : bytes;
   }
 
   async function openVideoDecoder(state) {
+    stopVideoPresentation(state);
+    const pipe = state.videoPipe ?? state.pipe;
+    const generation = pipe?.generation ?? 0;
+    const 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(state.bytes, decodeOptions(state));
-    state.video = { decoder, frameTime: 0, done: false };
+    const decoder = await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url));
+    state.video = { decoder, frameTime: 0, done: false, pipe, openedGeneration: generation };
     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;
@@ -2317,11 +3453,108 @@ export async function createPageRenderer({
     }
   }
 
-  async function openAudioDecoder(state) {
-    state.sound?.decoder.close();
-    const decoder = await videoDecoder.decodeAudio(state.bytes, decodeOptions(state));
-    state.sound = { decoder, id: null, position: 0, pending: null, history: [], finishing: false, done: false };
+  /**
+   * Opens the audio decoder on the current snapshot.
+   * Returns false when the pipe can still grow into something decodable
+   * (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 } = {}) {
+    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 pending = pipe && !pipe.done && !pipe.error;
+    if (!bytes?.byteLength) {
+      if (pending) return false;
+      throw new Error(`media ${state.url}: no audio bytes`);
+    }
+    let decoder;
+    try {
+      decoder = await videoDecoder.decodeAudio(bytes, decodeOptions(state.audioMime || state.contentType, state.url));
+    } catch (error) {
+      if (pending || (pipe && pipe.generation !== generation)) return false;
+      throw error;
+    }
+    let firstSamples = null;
+    try {
+      firstSamples = decoder.nextSamples();
+    } catch (error) {
+      decoder.close();
+      if (pending || (pipe && pipe.generation !== generation)) return false;
+      throw error;
+    }
+    if (!firstSamples && pending) {
+      decoder.close();
+      return false;
+    }
+    if (state.document !== page.document || state.seekSerial !== serial || state.audioOpenSerial !== operation) {
+      decoder.close();
+      return false;
+    }
+    const previous = state.sound;
+    const previousId = previous?.id ?? null;
+    if (keepStream && previousId != null
+      && (previous.decoder.sampleRate !== decoder.sampleRate || previous.decoder.channels !== decoder.channels)) {
+      decoder.close();
+      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 };
+    if (keepStream && previousId != null) {
+      // The output stream carries on with the new decoder's samples.
+      Object.assign(state.sound, { id: previousId, streamStart: previous.streamStart,
+        playedTime: previous.playedTime, owed: previous.owed ?? 0 });
+    } else if (previousId != null) audio?.close(previousId);
     trace?.(`audio decoded ${state.url}: ${decoder.sampleRate} Hz, ${decoder.channels} channels`);
+    return true;
+  }
+
+  /** Attaches sound once a separate audio buffer becomes decodable. */
+  function ensureAudio(state) {
+    // loadMedia/refillMedia own decoder replacement. An append arriving while
+    // either awaits bytes must not start a second opener and reset live audio
+    // back to the first packet.
+    if (state.loading || state.refilling || state.sound || state.audioWatch || !state.hasAudio || !audio) return;
+    const pipe = state.audioPipe ?? state.pipe;
+    if (!pipe) return;
+    state.audioWatch = (async () => {
+      try {
+        while (state.playing && !state.sound && state.document === page.document) {
+          let opened = false;
+          try {
+            opened = await openAudioDecoder(state);
+          } catch (error) {
+            if (state.video) reportError(error);
+            else if (state.document === page.document) failMedia(state, error, 4);
+            return;
+          }
+          if (opened && state.sound && state.playing && state.document === page.document) {
+            await positionAudio(state, mediaTime(state));
+            if (state.sound && !state.sound.id) openAudioStream(state);
+            return;
+          }
+          if (state.sound || pipe.done || pipe.error) return;
+          const size = pipe.size;
+          await pipe.waitFor(size + 1);
+        }
+      } finally {
+        state.audioWatch = null;
+      }
+    })();
+  }
+
+  /**
+   * The decoder was opened on a snapshot that is not the finished body.
+   * null and a truncated-file error both mean "wait", not "ended".
+   */
+  function needsMore(track) {
+    const pipe = track?.pipe;
+    if (!pipe || pipe.error) return false;
+    return pipe.generation !== track.openedGeneration || !pipe.done;
   }
 
   /** A click on the media: on its progress track it seeks, anywhere else it plays or pauses. */
@@ -2346,7 +3579,9 @@ export async function createPageRenderer({
   async function playMedia(element) {
     const state = mediaStateFor(element);
     if (!state || state.playing) return;
+    state.error = null;
     setMediaPlaying(state, true);
+    playbackEvent(state, "play", mediaEvent);
     try {
       await loadMedia(state);
       if (state.ended) {
@@ -2354,44 +3589,48 @@ export async function createPageRenderer({
         await positionMedia(state, 0);
       } else if (state.needsPosition) {
         // After a pause the audio decoder is ahead of where playing resumes.
-        await positionMedia(state, state.base, { videoToo: false });
+        const moved = await skipPlayedAudio(state);
+        await positionMedia(state, state.base, { videoToo: moved });
       }
       state.needsPosition = false;
     } catch (error) {
-      if (state.document === page.document) reportError(error);
-      closeMedia(state);
-      page.media.delete(element);
-      repaintMedia();
+      if (state.document === page.document) failMedia(state, error, state.pipe?.error ? 2 : 4);
       return;
     }
     if (!state.playing || state.document !== page.document) return;
     if (!state.video && !state.sound) {
       // Nothing this engine can play (audio with no audio output).
-      setMediaPlaying(state, false);
-      reportError(new Error(`media ${state.url}: nothing to play`));
+      failMedia(state, new Error(`media ${state.url}: nothing to play`), 4);
       return;
     }
     startMedia(state);
-    mediaEvent(state, "play");
   }
 
   function pauseMedia(element) {
     const state = page.media.get(element);
     if (!state?.playing) return;
     state.base = mediaTime(state);
+    trace?.(`media pause at ${state.base.toFixed(3)}s`);
     stopClock(state);
     state.needsPosition = true;
     setMediaPlaying(state, false);
-    mediaEvent(state, "pause");
+    playbackEvent(state, "pause", mediaEvent);
   }
 
   async function seekMedia(element, seconds) {
     const state = mediaStateFor(element);
     if (!state) return;
+    trace?.(`media seek to ${Number(seconds).toFixed(3)}s from ${mediaTime(state).toFixed(3)}s`);
+    const serial = ++state.seekSerial;
     const wasPlaying = state.playing;
     if (wasPlaying) stopClock(state);
+    // A seek goes where it is told, whatever the output still plays.
+    state.outputEnd = null;
     try {
+      if (state.refilling) await state.refilling.catch(() => {});
+      if (state.seekSerial !== serial) return;
       await loadMedia(state);
+      if (state.seekSerial !== serial) return;
       const target = Math.max(0, Math.min(Number.isFinite(state.duration) ? state.duration : Infinity, Number(seconds) || 0));
       state.ended = false;
       await positionMedia(state, target);
@@ -2412,93 +3651,205 @@ export async function createPageRenderer({
   /** Moves the decoders (and the clock's base) to `seconds`. */
   async function positionMedia(state, seconds, { videoToo = true } = {}) {
     state.base = seconds;
-    if (state.video && videoToo) {
-      if (state.video.done || seconds === 0) await openVideoDecoder(state);
-      if (seconds > 0) state.video.decoder.seek(seconds * 1000);
-      state.video.frameTime = seconds;
-      state.video.done = false;
-    }
+    if (state.video && videoToo) await placeVideo(state, seconds);
     if (state.sound) await positionAudio(state, seconds);
   }
 
-  /** Puts the audio decoder at `seconds`: from the kept history, by decoding ahead, or from the start. */
-  async function positionAudio(state, seconds) {
-    const sound = state.sound;
-    const { sampleRate, channels } = sound.decoder;
-    const target = Math.max(0, Math.round(seconds * sampleRate));
-    sound.done = false;
-    const historyStart = sound.history[0]?.start ?? Infinity;
-    if (target >= historyStart && target < sound.position) {
-      // Resume inside audio already decoded: take it from the history.
-      const parts = [];
-      for (const chunk of sound.history) {
-        const frames = chunk.samples.length / channels;
-        if (chunk.start + frames <= target) continue;
-        parts.push(chunk.start >= target ? chunk.samples : chunk.samples.subarray((target - chunk.start) * channels));
-      }
-      if (sound.pending) parts.push(sound.pending);
-      sound.pending = concatSamples(parts);
-      sound.position = target;
-      sound.history = [];
-      return;
-    }
-    if (target < sound.position) await openAudioDecoder(state);
-    const current = state.sound;
-    current.history = [];
-    if (current.pending) {
-      const frames = current.pending.length / channels;
-      if (current.position + frames > target) {
-        current.pending = current.pending.subarray((target - current.position) * channels);
-        current.position = target;
+  /** 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);
+      try {
+        state.video.frameTime = seekToKeyframe(state.video.decoder, seconds);
+        state.video.hideUntil = seconds;
+        state.video.done = false;
         return;
+      } catch (error) {
+        if (!needsMore(state.video)) throw error;
+        const pipe = state.video.pipe;
+        const size = pipe.size;
+        await pipe.waitFor(size + 1);
+        if (pipe.error) throw pipe.error;
+        if (pipe.size === size) throw error;
       }
-      current.position += frames;
-      current.pending = null;
     }
-    while (current.position < target) {
-      const samples = current.decoder.nextSamples();
-      if (!samples) return;
-      const frames = samples.length / channels;
-      if (current.position + frames > target) {
-        current.pending = samples.subarray((target - current.position) * channels);
-        current.position = target;
+  }
+
+  /** Puts the audio decoder at `seconds`: from the kept history, by decoding ahead, or from the start. */
+  async function positionAudio(state, seconds) {
+    const transaction = {};
+    state.audioPositioning = transaction;
+    const serial = state.seekSerial;
+    try {
+      if (state.sound) trace?.(`audio positioned at ${seconds.toFixed(3)}s (was at ${(state.sound.position / state.sound.decoder.sampleRate).toFixed(3)}s)`);
+      const sound = state.sound;
+      const { sampleRate, channels } = sound.decoder;
+      const target = Math.max(0, Math.round(seconds * sampleRate));
+      sound.done = false;
+      const historyStart = sound.history[0]?.start ?? Infinity;
+      if (target >= historyStart && target < sound.position) {
+        // Resume inside audio already decoded: take it from the history.
+        const parts = [];
+        for (const chunk of sound.history) {
+          const frames = chunk.samples.length / channels;
+          if (chunk.start + frames <= target) continue;
+          parts.push(chunk.start >= target ? chunk.samples : chunk.samples.subarray((target - chunk.start) * channels));
+        }
+        if (sound.pending) parts.push(sound.pending);
+        sound.pending = concatSamples(parts);
+        sound.position = target;
+        sound.history = [];
         return;
       }
-      current.position += frames;
+      sound.history = [];
+      const reached = await advanceAudio(() => state.sound, seconds, {
+        needsMore,
+        active: () => state.audioPositioning === transaction && state.seekSerial === serial && state.document === page.document,
+        reopen: () => openAudioDecoder(state, { keepStream: true }),
+      });
+      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`);
+      }
+    } finally {
+      if (state.audioPositioning === transaction) state.audioPositioning = null;
     }
   }
 
   /** 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.
+    if (state.sound && !state.sound.done && state.sound.id != null) {
+      const sound = state.sound;
+      state.base = mediaTime(state);
+      state.clockStart = hostPerformance.now();
+      if (state.resyncAudio) audio.resync?.(sound.id);
+      state.resyncAudio = false;
+      const owed = sound.owed ?? 0;
+      sound.owed = 0;
+      if (owed > 0) feedAudio(state, owed);
+      mediaTick(state);
+      return;
+    }
+    // Opening a PulseAudio stream is asynchronous. Advancing the video clock
+    // before the output is ready used to make a later decoder reopen seek
+    // audio past PCM which had not actually reached the output yet. Let the
+    // output stream establish the common A/V epoch instead.
+    if (state.sound && !state.sound.done) {
+      state.clockStart = null;
+      state.awaitingAudio = true;
+      openAudioStream(state);
+      // A misbehaving output server must not freeze video forever. Normally
+      // ready/request arrives almost immediately; this is only a safety net.
+      state.audioClockTimer = hostSetTimeout(() => startAudioClock(state, state.sound), 500);
+      return;
+    }
+    state.clockStart = hostPerformance.now();
+    if (state.hasAudio) ensureAudio(state);
+    mediaTick(state);
+  }
+
+  /** Releases a clock which was waiting for audio output to become writable. */
+  function startAudioClock(state, sound) {
+    if (!state.awaitingAudio || state.sound !== sound || !state.playing) return;
+    state.awaitingAudio = false;
+    hostClearTimeout(state.audioClockTimer);
+    state.audioClockTimer = null;
     state.clockStart = hostPerformance.now();
-    if (state.sound && !state.sound.done) openAudioStream(state);
     mediaTick(state);
   }
 
-  function stopClock(state) {
+  function stopClock(state, { keepAudio = false } = {}) {
+    stopVideoPresentation(state);
     hostClearTimeout(state.timer);
     state.timer = null;
     state.clockStart = null;
-    if (state.sound?.id != null) {
-      audio.close(state.sound.id);
-      state.sound.id = null;
-      state.sound.finishing = false;
+    state.awaitingAudio = false;
+    hostClearTimeout(state.audioClockTimer);
+    state.audioClockTimer = null;
+    state.outputEnd = null;
+    if (state.sound?.id != null && !keepAudio) {
+      const sound = state.sound;
+      trace?.(`audio stream closed at ${(sound.position / sound.decoder.sampleRate).toFixed(3)}s written, clock ${mediaTime(state).toFixed(3)}s`);
+      const { sampleRate, channels } = sound.decoder;
+      const start = sound.streamStart ?? sound.position;
+      // The output may go on playing the PCM it already holds (some servers
+      // drain a closed stream): playing resumes after it, not twice.
+      state.outputEnd = Promise.resolve(audio.close(sound.id))
+        .then((sentBytes) => (start + (Number(sentBytes) || 0) / (2 * channels)) / sampleRate, () => null);
+      sound.id = null;
+      sound.finishing = false;
     }
   }
 
+  /**
+   * Moves the media clock past the audio the closed output stream still
+   * plays (see stopClock). True when it moved, so video must follow.
+   */
+  async function skipPlayedAudio(state) {
+    const end = await (state.outputEnd ?? null);
+    state.outputEnd = null;
+    if (!Number.isFinite(end) || end <= state.base) return false;
+    state.base = Number.isFinite(state.duration) ? Math.min(state.duration, end) : end;
+    return true;
+  }
+
   /** Draws the frames the clock has reached, updates time, ends when everything has played. */
   function mediaTick(state) {
     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.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.
-      while (video.frameTime <= now && !video.done) {
-        const nextIsLate = video.frameTime + 1 / (video.decoder.fps || 30) <= now;
-        if (!drawVideoFrame(state, !nextIsLate)) video.done = true;
+      const decodeDeadline = hostPerformance.now() + 100;
+      while (video.frameTime <= mediaTime(state) && !video.done) {
+        const current = mediaTime(state);
+        const nextIsLate = video.frameTime + 1 / (video.decoder.fps || 30) <= current;
+        // If this tick has spent its decode budget, decode one final frame
+        // for display before yielding. Otherwise a video that can never quite
+        // catch the wall clock discards every frame forever while its controls
+        // continue to advance.
+        const yielding = hostPerformance.now() >= decodeDeadline;
+        // Frames before where the picture already was (or a seek's target)
+        // are decoded unshown: the decoder restarted at an earlier keyframe.
+        const reached = video.frameTime + 1e-6 >= (video.hideUntil ?? 0);
+        let step;
+        try {
+          step = drawVideoFrame(state, reached && (!nextIsLate || yielding));
+        } catch (error) {
+          failMedia(state, error, 3);
+          return;
+        }
+        if (step === "stall") {
+          void refillMedia(state, video);
+          return;
+        }
+        if (!step) video.done = true;
+        // Keep tasks responsive even when software decoding is slower than
+        // real time. The zero-delay continuation resumes catching up against
+        // a freshly read clock instead of accumulating this task's duration.
+        if (yielding && video.frameTime <= mediaTime(state)) break;
       }
     }
     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);
@@ -2508,22 +3859,49 @@ export async function createPageRenderer({
     const soundFinished = !state.sound || state.sound.done;
     // The clock at the duration ends it too: after a seek, frames restart at a
     // keyframe before the target, and wasmpeg does not tell their timestamps.
-    const pastEnd = Number.isFinite(state.duration) && state.clockStart !== null
-      && state.base + (hostPerformance.now() - state.clockStart) / 1000 >= state.duration;
+    // A prefix can already report the full duration, so the clock must not
+    // run the element out while bytes are still arriving.
+    const pastEnd = !state.buffering && Number.isFinite(state.duration) && now >= state.duration;
+    const pipeOpen = state.pipe && !state.pipe.done && !state.pipe.error;
+    if (pastEnd && pipeOpen) {
+      const stale = state.video && needsMore(state.video) ? state.video
+        : state.sound && needsMore(state.sound) ? state.sound : null;
+      void refillMedia(state, stale);
+      return;
+    }
+    if (videoFinished && soundFinished && pipeOpen) {
+      const stalled = video?.done && needsMore(video) ? video
+        : state.sound?.done && needsMore(state.sound) ? state.sound : null;
+      void refillMedia(state, stalled);
+      return;
+    }
     if ((videoFinished && soundFinished) || (pastEnd && soundFinished)) return endMedia(state);
-    const delay = video && !video.done ? Math.max(5, (video.frameTime - mediaTime(state)) * 1000) : 250;
+    const delay = video && !video.done ? Math.max(0, (video.frameTime - mediaTime(state)) * 1000) : 250;
     state.timer = hostSetTimeout(() => mediaTick(state), delay);
   }
 
-  /** Decodes the next frame; shows it when `show`. False at the end of the stream. */
+  /**
+   * Decodes the next frame; shows it when `show`.
+   * True when a frame was produced, false at a real end, "stall" when the
+   * pipe still owes bytes (a short mp4 throws AVERROR_INVALIDDATA there).
+   */
   function drawVideoFrame(state, show) {
-    const decoder = state.video.decoder;
+    const video = state.video;
+    const decoder = video.decoder;
     const width = Math.min(480, decoder.width);
-    const height = Math.max(1, Math.round(width * decoder.height / decoder.width));
-    const pixels = decoder.nextFrame(width, height);
-    if (!pixels) return false;
+    const height = Math.max(1, Math.round(width * decoder.height / Math.max(1, decoder.width)));
+    let pixels;
+    try {
+      pixels = decoder.nextFrame(width, height);
+    } catch (error) {
+      if (needsMore(video)) return "stall";
+      throw error;
+    }
+    if (!pixels) return needsMore(video) ? "stall" : false;
+    const shownTime = state.video.frameTime;
     state.video.frameTime += 1 / (decoder.fps || 30);
     if (!show) return true;
+    state.video.shownTime = shownTime;
     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 true;
@@ -2538,12 +3916,47 @@ export async function createPageRenderer({
     const sound = state.sound;
     sound.finishing = false;
     const name = new URL(state.url).pathname.split("/").pop() || "audio";
+    // Where this stream's PCM starts, to tell where its output ends when it closes (see stopClock).
+    sound.streamStart = sound.position;
+    trace?.(`audio stream opened at ${(sound.position / sound.decoder.sampleRate).toFixed(3)}s`);
     const id = audio.open({ rate: sound.decoder.sampleRate, channels: sound.decoder.channels, name }, (event) => {
-      if (sound.id !== id) return;
-      if (event.event === "request") feedAudio(state, event.bytes);
-      else if (event.event === "ended") {
+      // The stream outlives a decoder reopened during a stall (see
+      // refillMedia), so events go to whichever sound holds it now.
+      const sound = state.sound;
+      if (!sound || sound.id !== id) return;
+      if (event.event === "timing") {
+        if (!Number.isFinite(event.seconds) || event.seconds < 0) return;
+        sound.playedTime = (sound.streamStart / sound.decoder.sampleRate) + event.seconds;
+        state.base = sound.playedTime;
+        sound.timingError = false;
+        const now = hostPerformance.now();
+        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`
+            + `, 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.
+        if (!sound.timingError) reportError(new Error(`audio timing unavailable; playback clock held: ${event.message}`));
+        sound.timingError = true;
+      } else if (event.event === "request") {
+        // A request is the first point at which PulseAudio has created the
+        // playback stream. Queue its PCM before releasing the clock: feeding
+        // a decoder opened on a growing snapshot can itself start a refill,
+        // in which case that replacement stream must establish the epoch.
+        feedAudio(state, event.bytes);
+        startAudioClock(state, sound);
+      } else if (event.event === "ready") {
+        // Some servers create a writable stream with an initial grant of zero,
+        // so no request is sent until playback advances.
+        startAudioClock(state, sound);
+      } else if (event.event === "ended") {
+        state.base = sound.playedTime ?? state.base;
+        state.clockStart = hostPerformance.now();
         sound.id = null;
         sound.done = true;
+        startAudioClock(state, sound);
         mediaTick(state);
       } else if (event.event === "error") {
         sound.id = null;
@@ -2551,22 +3964,49 @@ export async function createPageRenderer({
         reportError(new Error(`audio: ${event.message}`));
         // Video plays on without sound; audio alone stops.
         if (!state.video) pauseMedia(state.element);
+        else startAudioClock(state, sound);
       }
     });
     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. */
   function feedAudio(state, bytes) {
     const sound = state.sound;
     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.refilling || state.audioPositioning) {
+      sound.owed = (sound.owed ?? 0) + bytes;
+      return;
+    }
     const { channels, sampleRate } = sound.decoder;
     const frameBytes = channels * 2;
+    sound.lastRequest = bytes;
     for (let sent = 0; sent + frameBytes <= bytes;) {
       let samples = sound.pending;
       sound.pending = null;
-      samples ??= sound.decoder.nextSamples();
       if (!samples) {
+        try {
+          samples = sound.decoder.nextSamples();
+        } catch (error) {
+          if (needsMore(sound)) {
+            sound.owed = (sound.owed ?? 0) + bytes - sent;
+            void refillMedia(state, sound);
+            return;
+          }
+          failMedia(state, error, 3);
+          return;
+        }
+      }
+      if (!samples) {
+        if (needsMore(sound)) {
+          sound.owed = (sound.owed ?? 0) + bytes - sent;
+          void refillMedia(state, sound);
+          return;
+        }
         sound.finishing = true;
         audio.finish(sound.id);
         return;
@@ -2584,12 +4024,182 @@ export async function createPageRenderer({
     }
   }
 
+  /**
+   * While bytes keep arriving, waits until `pipe` holds about
+   * RESUME_BUFFER_SECONDS more media than `position` needs (estimated from
+   * the bytes per second so far). Stops waiting when it is finished, when
+   * nothing arrived for RESUME_BUFFER_IDLE_MS (that burst is over: waiting
+   * for the next could take long), or after RESUME_BUFFER_MAX_WAIT_MS.
+   */
+  async function bufferAhead(pipe, position) {
+    const deadline = hostPerformance.now() + RESUME_BUFFER_MAX_WAIT_MS;
+    // The pipe ends near `position` when starved; early on that says little,
+    // so the rate is taken over at least a few seconds (an underestimate).
+    const bytesPerSecond = pipe.size / Math.max(4, position);
+    const goal = pipe.size + bytesPerSecond * RESUME_BUFFER_SECONDS;
+    while (!pipe.done && !pipe.error && pipe.size < goal) {
+      const wait = Math.min(RESUME_BUFFER_IDLE_MS, deadline - hostPerformance.now());
+      if (wait <= 0) return;
+      const size = pipe.size;
+      let timer = null;
+      await Promise.race([pipe.waitFor(size + 1), new Promise((resolve) => { timer = hostSetTimeout(resolve, wait); })]);
+      hostClearTimeout(timer);
+      if (pipe.size === size) return;
+    }
+  }
+
+  /**
+   * Seeks `decoder` to the keyframe at or before `seconds` and returns that
+   * keyframe's time. wasmpeg seeks to the keyframe without telling its
+   * timestamp; taking the target as the position would show every later
+   * frame early by the distance to the keyframe, and the picture would trail
+   * the sound. Seeks to the same keyframe yield the same first picture, so a
+   * binary search over seek targets finds where that keyframe starts (to a
+   * frame). The frames from there to the clock are then decoded unshown.
+   */
+  function seekToKeyframe(decoder, seconds) {
+    return seekVideoKeyframe(decoder, seconds);
+  }
+
+  /**
+   * The decoder ran off the end of the snapshot it was opened on. Freeze the
+   * clock, wait for more bytes, reopen on the new snapshot and seek back.
+   * Retain the output stream and outstanding credits while positioning the
+   * new snapshot. The reported output cursor remains the A/V master clock.
+   */
+  function refillMedia(state, stalledTrack = null) {
+    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.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 };
+    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 () => {
+      await Promise.resolve();
+      try {
+        const pipe = stalledTrack?.pipe ?? state.video?.pipe ?? state.sound?.pipe ?? state.pipe;
+        const mark = (pipe?.size ?? 0) + 1;
+        // An append may have arrived after this decoder's snapshot was
+        // opened but before it reached EOF. Consume that generation now;
+        // waiting for one more append creates a segment-sized pause.
+        const hasNewSnapshot = Boolean(stalledTrack && pipe
+          && pipe.generation !== stalledTrack.openedGeneration);
+        // Some demuxers report EOF at an fMP4/WebM fragment boundary even
+        // though the same snapshot contains later fragments. Reopen once at
+        // each position/generation; if it makes no progress, wait for append.
+        const retry = state.lastRefill;
+        const canRetrySnapshot = Boolean(stalledTrack && pipe && !hasNewSnapshot
+          && (!retry || retry.pipe !== pipe || retry.generation !== pipe.generation
+            || state.base > retry.time + 0.25));
+        if (pipe && !pipe.done && !hasNewSnapshot && !canRetrySnapshot) {
+          await pipe.waitFor(mark);
+          // Starved by a slow network, the smallest refill stalls again at
+          // once: buffer a few seconds ahead first, as browsers do before
+          // leaving "waiting".
+          await bufferAhead(pipe, state.base);
+        }
+        if (state.seekSerial !== serial || state.document !== page.document || !state.playing) return;
+        if (pipe?.error) throw pipe.error;
+        // Where the audio is now: it kept playing what it held after the stall.
+        const held = holdAudio && state.sound?.id != null ? state.sound : null;
+        const writtenEnd = held ? held.position / held.decoder.sampleRate : null;
+        if (held) {
+          state.base = mediaTime(state);
+        } else {
+          await skipPlayedAudio(state);
+        }
+        if (state.seekSerial !== serial || state.document !== page.document || !state.playing) return;
+        const time = state.base;
+        trace?.(`media stall (${stalledTrack === state.video ? "video" : stalledTrack === state.sound ? "audio" : "end"}): resume at ${time.toFixed(3)}s`
+          + `${held ? `, audio held to ${writtenEnd.toFixed(3)}s` : ""} after ${((hostPerformance.now() - stall.at) / 1000).toFixed(2)}s`);
+        if (stalledTrack && pipe) state.lastRefill = { pipe, generation: pipe.generation, time };
+        // A video decoder still decoding is left alone: reopened, it restarts
+        // at a keyframe. Audio reopens on any newer snapshot (it may share the
+        // stalled pipe), which positionAudio continues sample-exactly.
+        const refillVideo = state.hasVideo && (!stalledTrack || stalledTrack === state.video || !state.video);
+        const refillAudio = state.hasAudio && audio && (!stalledTrack || stalledTrack === state.sound || !state.sound
+          || (state.sound.pipe && state.sound.pipe.generation !== state.sound.openedGeneration));
+        if (refillVideo) {
+          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);
+          state.video.hideUntil = hideUntil;
+          try {
+            state.video.frameTime = seekToKeyframe(state.video.decoder, resumeAt);
+          } catch {
+            state.video.frameTime = 0;
+          }
+          state.video.done = false;
+        }
+        if (refillAudio) {
+          let opened = false;
+          try {
+            opened = await openAudioDecoder(state, { keepStream: Boolean(held) });
+          } catch (error) {
+            if (!state.video) throw error;
+            reportError(error);
+          }
+          // A held stream continues right after the PCM it was given.
+          if (opened) await positionAudio(state, held ? writtenEnd : time);
+          else if (state.playing && !state.sound) ensureAudio(state);
+        }
+        // Drop this job before startMedia so a new stall can refill.
+        if (state.refilling === job) state.refilling = null;
+        state.buffering = false;
+        if (state.playing && state.seekSerial === serial && state.document === page.document) startMedia(state);
+      } catch (error) {
+        if (state.document === page.document) failMedia(state, error, 3);
+      } finally {
+        if (state.refilling === job) {
+          state.refilling = null;
+          state.buffering = false;
+        }
+      }
+    })();
+    state.refilling = job;
+    return job;
+  }
+
+  function failMedia(state, error, code) {
+    state.error = { code, message: String(error?.message ?? error) };
+    closeMedia(state);
+    state.playing = false;
+    if (state.resource) state.resource.playing = false;
+    mediaEvent(state, "error");
+    reportError(error);
+    repaintMedia();
+  }
+
   function endMedia(state) {
     stopClock(state);
     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");
   }
 
@@ -2601,6 +4211,8 @@ export async function createPageRenderer({
   }
 
   function closeMedia(state) {
+    state.audioOpenSerial = (state.audioOpenSerial ?? 0) + 1;
+    state.audioPositioning = null;
     stopClock(state);
     state.playing = false;
     state.video?.decoder.close();
@@ -2627,6 +4239,58 @@ export async function createPageRenderer({
     return out;
   }
 
+  /** 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; }
+    return page.backgrounds.get(absolute)?.resource ?? null;
+  }
+
+  /**
+   * Requests the background images the laid-out document uses and has not
+   * asked for yet. They change only paint: each repaints the page on arrival.
+   */
+  function queueBackgroundImages() {
+    const tree = page.renderTree;
+    if (!tree) return;
+    const document = page.document;
+    const seen = 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; }
+        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;
+          if (page.backgrounds.get(url) !== entry || document !== page.document) {
+            image.delete();
+            return;
+          }
+          entry.resource = Object.freeze({ width, height, image, url });
+          if (page.layout) page.displayList = paintList();
+          page.needsPaint = true;
+          scheduleFrame();
+        }).catch(() => {
+          // A broken background image paints nothing.
+        });
+      }
+    }
+  }
+
+  function disposeBackgrounds() {
+    for (const entry of page.backgrounds.values()) entry.resource?.image.delete();
+    page.backgrounds = new Map();
+  }
+
   function queueImageResources() {
     const document = page.document;
     const generation = loadGeneration;
@@ -2644,18 +4308,20 @@ export async function createPageRenderer({
       const oldImage = page.resources.get(element)?.image;
       if (oldImage) staleImages.push(oldImage);
       page.resources.delete(element);
+      beginImageLoad(element, src);
       fetchResource(url, "image").then(async (response) => {
-        if (!response.ok) return;
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
         const bytes = response.body;
         const { width, height } = await new Bun.Image(bytes).metadata();
         const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) return;
+        if (!image) throw new Error("Image decoding failed");
         if (generation !== loadGeneration || document !== page.document || element.getAttribute("src") !== src) {
           image.delete();
           return;
         }
         page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
         page.decodedImages.push(image);
+        finishImageLoad(element, src, { width, height }, type => element.dispatchEvent(new page.window.Event(type)));
         const node = [...page.renderTree.nodesById.values()].find((candidate) => candidate.domNode === element);
         const run = page.layout.fragments.flatMap((fragment) => fragment.runs)
           .find((candidate) => candidate.type === "image" && candidate.nodeId === node?.id);
@@ -2669,15 +4335,19 @@ export async function createPageRenderer({
         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 = buildDisplayList(page.layout, page.renderTree, page.resources);
+          page.displayList = paintList();
           page.needsPaint = true;
         } else {
           page.dirty = true;
           page.resourceLayoutDirty = true;
         }
         refresh();
-      }).catch(() => {
+      }).catch((error) => {
         // A failed image retains its fallback replaced-element dimensions.
+        trace?.(`image failed ${url}: ${error?.message ?? error}`);
+        if (generation === loadGeneration && document === page.document) {
+          finishImageLoad(element, src, null, type => element.dispatchEvent(new page.window.Event(type)));
+        }
       });
     }
     return staleImages;