buninu-browser 0.2.0 → 0.2.2

package/lib/renderer/page-renderer.js

@@ -23,19 +23,25 @@
  * 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 { layoutText } from "../layout/text-layout.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 { RenderTreeBuilder, renderTreeText } from "../render-tree/index.js";
-import { StyleEngine, topmostConnected } from "../style/computed-style.js";
+import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
+import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.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 { createPageRealm } from "./page-realm.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 { advanceAudio } from "../media/position-audio.js";
 import { pianoNote, PianoMixer } from "../audio/piano.js";
 
 // Captured at load: in host mode page scripts share this global object.
@@ -47,11 +53,114 @@ const hostClearInterval = globalThis.clearInterval;
 
 /** How long subresources may take before a preview of the unstyled document is shown. */
 export const PREVIEW_DELAY_MS = 300;
+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;
+// Finding a seek's keyframe (see seekToKeyframe): how far back it may lie,
+// and the size of the pictures compared.
+const KEYFRAME_SEARCH_SECONDS = 10;
+const KEYFRAME_PROBE_WIDTH = 32;
+const KEYFRAME_PROBE_HEIGHT = 18;
+// element → MediaSource, and the reverse. One renderer owns one page pipeline.
+const elementSources = new WeakMap();
+const sourceElements = new WeakMap();
+
+/**
+ * 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
@@ -93,7 +202,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 = () => {},
@@ -107,46 +221,20 @@ export async function createPageRenderer({
   onFrame = 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) {
@@ -166,20 +254,42 @@ export async function createPageRenderer({
   const graphemes = new Intl.Segmenter(undefined, { granularity: "grapheme" });
   const emojiPresentation = /^\p{Emoji_Presentation}/u;
   const renderTreeBuilder = new RenderTreeBuilder();
+  const layoutEngine = new LayoutEngine({ measureText, fontMetrics });
   const styleEngine = new StyleEngine();
   // Incremental restyle: what may have changed style since the last
   // computation. DOM mutations come from a MutationObserver; state that is
   // not in the DOM tree (checked, value, focus) is marked by the code that
   // changes it. `full` asks for a complete restyle.
-  const styleChanges = { full: true, roots: new Set(), records: [], observer: null, activeElement: null };
+  const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null, activeElement: null };
   let selectorTraits = { sibling: false, has: null, sheets: null };
   let lastStyleParts = "";
+  let laidOutSheets = null;
   const sheetTraitsCache = new Map();
+  // Invalidation compounds compiled for matchesCompound() and matchSelectors().
+  const compiledCompounds = new Map();
   let lastStyleReason = "";
   let hasState = null;
   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",
@@ -199,16 +309,26 @@ export async function createPageRenderer({
     hintsVisible: false,
     styleSheets: [],
     linkSheets: null,
+    // The document's scripts fetched ahead of their turn (see preloadScripts), by URL.
+    preloadedScripts: new Map(),
     backgroundColor: "rgba(255, 255, 255, 1)",
     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,
     // "off" until the renderer process has set up its sandbox.
     scripting: "off",
     dirty: false,
+    resourceLayoutDirty: false,
     userAgent: mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT,
     // document.cookie as last reported by the controller (non-HttpOnly only).
     cookie: "",
@@ -343,6 +463,9 @@ 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 rasterSurface = null;
+  let rasterSurfaceWidth = 0;
+  let rasterSurfaceHeight = 0;
 
   /** Hint overlay contents, as a comparable key. */
   function overlayKey() {
@@ -355,6 +478,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;
@@ -383,7 +507,13 @@ 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) {
+      rasterSurface?.delete();
+      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));
@@ -399,11 +529,10 @@ export async function createPageRenderer({
       colorSpace: CanvasKit.ColorSpace.SRGB,
     });
     image.delete();
-    surface.delete();
     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,
@@ -451,7 +580,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;
@@ -521,10 +650,15 @@ 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);
+        // 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);
@@ -624,6 +758,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);
@@ -845,19 +1003,24 @@ export async function createPageRenderer({
 
   /** `linkSheets` (link element -> { url, text }) makes the sheet list follow the DOM; without it the given sheets are fixed. */
   /** Marks a node whose own state changed (its subtree may restyle); null asks for a full restyle. */
-  function markStyleDirty(node) {
+  function markStyleDirty(node, features = [":state"]) {
     // Documents and fragments carry no state selectors read; their children's
     // changes arrive as mutation records.
     if (node?.nodeType === 9 || node?.nodeType === 11) return;
     const element = node?.nodeType === 1 ? node : node?.parentElement;
     if (!element) styleChanges.full ||= node ? `touched ${node.nodeName}` : "unknown change";
-    else styleChanges.roots.add(element);
+    else {
+      styleChanges.roots.add(element);
+      const previous = styleChanges.rootFeatures.get(element);
+      styleChanges.rootFeatures.set(element, previous ? [...new Set([...previous, ...features])] : features);
+    }
   }
 
   function observeStyleChanges(document) {
     styleChanges.observer?.disconnect();
     styleChanges.records = [];
     styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
     styleChanges.full = "new document";
     styleChanges.activeElement = null;
     const observer = new page.window.MutationObserver((records) => { styleChanges.records.push(...records); });
@@ -882,6 +1045,7 @@ export async function createPageRenderer({
       sheets, sibling: any("sibling"), hasSiblings: any("hasSiblings"),
       hasCompounds: [...union("hasCompounds")], structuralCompounds: [...union("structuralCompounds")],
       descendantFeatures: union("descendantFeatures"), siblingFeatures: union("siblingFeatures"),
+      descendantStateCompounds: parts.flatMap((part) => part.descendantStateCompounds),
       siblingTargetCompounds: [...union("siblingTargetCompounds")],
       forward: any("forward"), firstChild: any("firstChild"), backward: any("backward"), lastChild: any("lastChild"),
       defined: any("defined"), target: any("target"),
@@ -898,70 +1062,7 @@ export async function createPageRenderer({
   function sheetTraitsFor(sheet) {
     let traits = sheetTraitsCache.get(sheet);
     if (traits) return traits;
-    const text = String(sheet).replace(/\/\*[\s\S]*?\*\//g, "");
-    const plain = text.replace(/\[[^\]]*\]/g, "[]").replace(/\{[^}]*\}/g, "{}");
-    const sibling = /[^\s~|^$*=\[]\s*[+~]\s*[^\s=]/.test(plain);
-    const hasCompounds = new Set();
-    let hasSiblings = false;
-    const selectorsOnly = text.replace(/\{[^}]*\}/g, "{}");
-    for (const block of selectorsOnly.matchAll(/[^{}]*:has\([^{]*\{/g)) {
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        for (const compound of compoundsOf(selector)) {
-          if (!compound.includes(":has(")) continue;
-          hasCompounds.add(compound.replace(/::[\w-]+(\([^)]*\))?$/, ""));
-          if (/:has\(\s*[+~]/.test(compound)) hasSiblings = true;
-        }
-      }
-    }
-    // Structural pseudo-classes: which siblings a child list change can
-    // affect, and the compounds where they are not the subject (".a:last-child .b"),
-    // whose matches decide whether a sibling's subtree must restyle too.
-    const structural = /:(?:nth-child|nth-last-child|first-child|last-child|only-child|nth-of-type|nth-last-of-type|first-of-type|last-of-type|only-of-type)\b/;
-    const structuralCompounds = new Set();
-    for (const block of selectorsOnly.matchAll(/[^{}]*\{/g)) {
-      if (!structural.test(block[0])) continue;
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        const compounds = compoundsOf(selector);
-        for (const compound of compounds.slice(0, -1)) if (structural.test(compound)) structuralCompounds.add(compound);
-      }
-    }
-    // Invalidation features (class ".x", id "#x", attribute "[x", tag "t:x",
-    // state ":state", anything "*") of compounds that are not a selector's
-    // subject: left of a descendant/child combinator, a change to them can
-    // restyle the element's subtree; left of + / ~, its later siblings.
-    const descendantFeatures = new Set();
-    const siblingFeatures = new Set();
-    // Selectors ending in a compound right of + / ~ that is not the subject
-    // (".a + .b" of ".a + .b .c"): a later sibling's subtree restyles only
-    // when its match of one of them changes.
-    const siblingTargetCompounds = new Set();
-    for (const block of selectorsOnly.matchAll(/[^{}@]*\{/g)) {
-      for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
-        const parts = complexParts(selector);
-        parts.forEach(({ compound, combinator }, index) => {
-          const nested = /\([^)]*[\s>+~][^)]*\)/.test(compound); // :is(.a .b) hides combinators
-          const previous = parts[index - 1]?.combinator;
-          if ((previous === "+" || previous === "~") && index < parts.length - 1) {
-            // With what is left of it ("li:first-child + li"): the relation to
-            // the earlier sibling can end while the compound still matches.
-            const left = parts.slice(0, index).map((part) => `${part.compound} ${part.combinator === " " ? "" : part.combinator + " "}`).join("");
-            siblingTargetCompounds.add(left + compound);
-          }
-          if (index === parts.length - 1 && !nested) return;
-          const features = compoundFeatures(compound);
-          if (nested || combinator === " " || combinator === ">") for (const feature of features) descendantFeatures.add(feature);
-          if (nested || combinator === "+" || combinator === "~") for (const feature of features) siblingFeatures.add(feature);
-        });
-      }
-    }
-    traits = {
-      sibling, hasCompounds, hasSiblings, structuralCompounds, descendantFeatures, siblingFeatures, siblingTargetCompounds,
-      forward: /:(?:nth-child|nth-of-type|first-of-type|only-of-type)\b/.test(selectorsOnly),
-      firstChild: /:(?:first-child|only-child)\b/.test(selectorsOnly),
-      backward: /:(?:nth-last-child|nth-last-of-type|last-of-type|only-of-type)\b/.test(selectorsOnly),
-      lastChild: /:(?:last-child|only-child)\b/.test(selectorsOnly),
-      defined: text.includes(":defined"), target: /:target\b/.test(text),
-    };
+    traits = sheetTraits(sheet);
     sheetTraitsCache.set(sheet, traits);
     return traits;
   }
@@ -973,11 +1074,14 @@ export async function createPageRenderer({
    */
   function recordHasState(traits) {
     const reuse = hasState !== null;
+    if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
     const record = (compounds, previous) => {
+      const missing = compounds.filter((compound) => !(reuse && previous?.has(compound)));
+      const matched = missing.length ? matchSelectors(page.document, missing, compiledCompounds) : null;
       const state = new Map();
       for (const compound of compounds) {
-        if (reuse && previous?.has(compound)) { state.set(compound, previous.get(compound)); continue; }
-        try { state.set(compound, new Set(page.document.querySelectorAll(compound))); } catch { /* invalid: never matches */ }
+        if (reuse && previous?.has(compound)) state.set(compound, previous.get(compound));
+        else if (matched.has(compound)) state.set(compound, matched.get(compound)); // invalid ones never match
       }
       return state;
     };
@@ -988,13 +1092,12 @@ export async function createPageRenderer({
 
   /** Brings the recorded matches of an inserted subtree up to date (it may have been in the document before). */
   function recordInserted(root) {
-    for (const state of [hasState, structuralState, siblingState]) {
-      for (const [compound, matched] of state ?? []) {
-        let inside;
-        try {
-          inside = new Set(root.querySelectorAll(compound));
-          if (root.matches(compound)) inside.add(root);
-        } catch { continue; }
+    const states = [hasState, structuralState, siblingState].filter(Boolean);
+    const now = matchSelectors(root, states.flatMap((state) => [...state.keys()]), compiledCompounds);
+    for (const state of states) {
+      for (const [compound, matched] of state) {
+        const inside = now.get(compound);
+        if (!inside) continue;
         for (const element of [root, ...root.getElementsByTagName("*")]) {
           if (inside.has(element)) matched.add(element); else matched.delete(element);
         }
@@ -1003,12 +1106,24 @@ export async function createPageRenderer({
   }
 
 
+  /** element.matches(compound), with the compound compiled once (see matchSelectors). */
+  function matchesCompound(element, compound) {
+    let compiled = compiledCompounds.get(compound);
+    if (compiled === undefined) {
+      compiled = compileSelector(element, compound);
+      if (compiled === undefined) return element.matches(compound);
+      if (compiledCompounds.size >= MAX_COMPILED_COMPOUNDS) compiledCompounds.clear();
+      compiledCompounds.set(compound, compiled);
+    }
+    return compiled !== null && matchesCompiled(element, compiled);
+  }
+
   /** Re-checks `element` against recorded compounds; whether any match changed (the state is updated). */
   function matchesChanged(state, element) {
     let changed = false;
     for (const [compound, matched] of state ?? []) {
       let now = false;
-      try { now = element.matches(compound); } catch {}
+      try { now = matchesCompound(element, compound); } catch {}
       if (now === matched.has(element)) continue;
       if (now) matched.add(element); else matched.delete(element);
       changed = true;
@@ -1034,7 +1149,7 @@ export async function createPageRenderer({
         checked.add(candidate);
         for (const [compound, matched] of hasState) {
           let now = false;
-          try { now = candidate.matches(compound); } catch {}
+          try { now = matchesCompound(candidate, compound); } catch {}
           if (now === matched.has(candidate)) continue;
           if (now) matched.add(candidate); else matched.delete(candidate);
           add(candidate);
@@ -1055,6 +1170,10 @@ export async function createPageRenderer({
     const records = styleChanges.records;
     if (styleChanges.observer) records.push(...styleChanges.observer.takeRecords());
     const roots = styleChanges.roots;
+    // Explicit roots mean that state-dependent selectors may need restyling;
+    // they do not by themselves change render-tree content. DOM mutation
+    // records below identify structural/content changes separately.
+    let treeDirty = false;
     let full = styleChanges.full;
     const active = page.document.activeElement;
     if (active !== styleChanges.activeElement) {
@@ -1081,11 +1200,22 @@ export async function createPageRenderer({
       if (matchesChanged(siblingState, element)) roots.add(element);
     };
     const later = (element) => { for (let next = element?.nextElementSibling; next; next = next.nextElementSibling) laterSibling(next); };
+    const featureMatches = (used, changedFeatures) => changedFeatures.some((feature) => feature === ":state"
+      ? [...used].some((candidate) => candidate.startsWith(":"))
+      : used.has(feature));
+    const stateAffectsDescendants = (element, changedFeatures) => {
+      const states = changedFeatures.filter((feature) => feature.startsWith(":"));
+      if (!states.length) return false;
+      const available = new Set(elementFeatures(element));
+      return traits.descendantStateCompounds.some((entry) => (states.includes(":state") || entry.states.some((state) => states.includes(state)))
+        && entry.required.every((feature) => available.has(feature)));
+    };
     /** An element whose features changed: itself, and wider where non-subject compounds use them. */
     const changed = (element, features) => {
       self.add(element);
-      if (features.some((feature) => traits.descendantFeatures.has(feature))) roots.add(element);
-      if (traits.siblingFeatures.has("*") || features.some((feature) => traits.siblingFeatures.has(feature))) later(element);
+      const ordinary = features.filter((feature) => !feature.startsWith(":"));
+      if (featureMatches(traits.descendantFeatures, ordinary) || stateAffectsDescendants(element, features)) roots.add(element);
+      if (traits.siblingFeatures.has("*") || featureMatches(traits.siblingFeatures, features)) later(element);
       hasChanges(traits, element, add, hasChecked);
     };
     const touchSibling = (element) => {
@@ -1099,7 +1229,7 @@ export async function createPageRenderer({
     // the records also describe; both start as a change of the element's state.
     for (const element of [...roots]) {
       roots.delete(element);
-      if (!full) changed(element, [":state"]);
+      if (!full) changed(element, styleChanges.rootFeatures.get(element) ?? [":state"]);
     }
     for (const record of records) {
       if (full) break;
@@ -1107,6 +1237,10 @@ export async function createPageRenderer({
       if (record.type === "attributes") {
         if (target.nodeType !== 1) continue;
         const name = record.attributeName;
+        // data/ARIA/title changes have no direct render-tree representation;
+        // selectors that observe them are handled by the style diff below.
+        // Other attributes may alter controls, replaced elements or visibility.
+        if (!name.startsWith("data-") && !name.startsWith("aria-") && name !== "title") treeDirty = true;
         const features = ["[" + name];
         if (name === "class") {
           const before = new Set(String(record.oldValue ?? "").split(/\s+/).filter(Boolean));
@@ -1120,6 +1254,7 @@ export async function createPageRenderer({
         }
         changed(target, features);
       } else if (record.type === "childList") {
+        treeDirty = true;
         if (target.nodeType !== 1) { full = `children of ${target.nodeName}`; break; }
         // Inserted elements restyle; the parent itself may change (:empty);
         // siblings around the change point may match structural
@@ -1150,6 +1285,7 @@ export async function createPageRenderer({
           }
         }
       } else if (record.type === "characterData") {
+        treeDirty = true;
         // Only :empty and :has() can see text: the parent itself.
         const parent = target.parentElement;
         if (parent) {
@@ -1161,19 +1297,22 @@ export async function createPageRenderer({
     if (!full) for (const node of topmostConnected(inserted, page.document)) recordInserted(node);
     styleChanges.records = [];
     styleChanges.roots = new Set();
+    styleChanges.rootFeatures = new Map();
     styleChanges.full = false;
     lastStyleReason = full || `${roots.size} root(s), ${self.size} self`;
     if (full) hasState = null; // recorded again after the full restyle
-    return full ? null : { roots, self };
+    return full ? null : { roots, self, treeDirty };
   }
 
   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);
@@ -1185,10 +1324,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;
@@ -1197,10 +1339,19 @@ export async function createPageRenderer({
   /** Style, render tree, layout and display list of the current document. */
   function styleAndLayout() {
     const started = hostPerformance.now();
+    const ms = (from, to) => Math.round(to - from);
     const sheets = currentStyleSheets();
     const environment = { width: page.width, height: page.height, mobile };
     const changes = takeStyleChanges(sheets); // drained even when unused, so records do not pile up
     const taken = hostPerformance.now();
+    // A rendering opportunity can be scheduled by lifecycle work which did
+    // not actually change DOM, state, resources, or styles. Keep the retained
+    // layout/display list in that case instead of laying the whole page out.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && changes.roots.size === 0 && changes.self.size === 0) {
+      lastStyleParts = `changes ${Math.round(taken - started)}, no invalidation`;
+      return { style: Math.round(taken - started), layout: 0, skipped: true };
+    }
     styleEngine.compute(page.document, sheets, environment, fullStyle ? null : changes?.roots ?? null, changes?.self ?? null);
     const computed = hostPerformance.now();
     if (!hasState || hasStateStale) {
@@ -1208,18 +1359,43 @@ export async function createPageRenderer({
       hasStateStale = false;
     }
     const recorded = hostPerformance.now();
+    // Attribute mutations used by application bookkeeping often match no
+    // different rule and do not alter render-tree content. Once style has
+    // proved that no element changed, retain layout and paint unchanged.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets && changes
+      && !changes.treeDirty && styleEngine.incremental && styleEngine.restyled === 0) {
+      lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, no visual change`;
+      return { style: Math.round(recorded - started), layout: 0, skipped: true };
+    }
     if (verifyStyle && styleEngine.incremental) verifyIncrementalStyle(sheets, environment);
     const verified = hostPerformance.now();
     page.backgroundColor = documentBackground(page.document, styleEngine);
-    page.renderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
+    const nextRenderTree = renderTreeBuilder.build(page.document, styleEngine, page.resources);
     const styled = hostPerformance.now();
-    const ms = (from, to) => Math.round(to - from);
     lastStyleParts = `changes ${ms(started, taken)}, compute ${ms(taken, computed)}, record ${ms(computed, recorded)}, tree ${ms(verified, styled)}`;
-    page.layout = layoutText(page.renderTree, {
+    // MutationObserver also reports changes under non-rendered nodes such as
+    // script and metadata elements. Compare the actual immutable layout input
+    // after rebuilding it, so those changes do not trigger a full reflow.
+    if (page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets
+      && sameLayoutInput(page.renderTree.root, nextRenderTree.root, {
+        ignoreResources: true,
+        // A zero-element incremental pass retained every computed style.
+        // Control placeholders may still wrap that style in a fresh object.
+        ignoreStyles: styleEngine.incremental && styleEngine.restyled === 0,
+      })) {
+      lastStyleParts += ", unchanged layout input";
+      return { style: Math.round(styled - started), layout: 0, skipped: true };
+    }
+    page.renderTree = nextRenderTree;
+    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);
-    viewport.setContentSize(page.layout.width, page.layout.height);
+    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;
+    setContentSize();
     return { style: Math.round(styled - started), layout: Math.round(hostPerformance.now() - styled) };
   }
 
@@ -1244,12 +1420,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.needsPaint = true;
+    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)`);
@@ -1308,6 +1503,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();
@@ -1329,6 +1534,7 @@ export async function createPageRenderer({
     const linkSheets = isHtml ? new WeakMap() : null;
     const styleSheets = isHtml ? loadStyleSheets(parsed.document, url, linkSheets) : Promise.resolve([]);
     const images = isHtml ? loadImageResources(parsed.document, url) : Promise.resolve(emptyImageResources());
+    page.preloadedScripts = isHtml && page.scripting !== "off" ? preloadScripts(parsed.document, url) : new Map();
     let imagesReady = null;
     images.then((loaded) => { imagesReady = loaded; });
     let timer;
@@ -1362,8 +1568,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();
@@ -1387,6 +1596,31 @@ export async function createPageRenderer({
     }
   }
 
+  /**
+   * Like a browser's preload scanner: starts fetching the document's external
+   * scripts and declared module preloads (<link rel=modulepreload>) as soon
+   * as it is parsed, while its stylesheets load and it is styled, instead of
+   * when the scripts' turn comes and a module graph is discovered level by
+   * level. Only the bytes are fetched early; fetchScript() takes them.
+   */
+  function preloadScripts(document, documentUrl) {
+    const preloaded = new Map();
+    const preload = (href) => {
+      let target;
+      try { target = new URL(href, documentUrl); } catch { return; }
+      if (!["http:", "https:"].includes(target.protocol) || preloaded.has(target.href)) return;
+      const response = fetchResource(target.href, "script");
+      response.catch(() => {}); // reported when the script runs
+      preloaded.set(target.href, response);
+    };
+    for (const script of document.querySelectorAll("script[src]")) {
+      const type = (script.getAttribute("type") ?? "").trim().toLowerCase();
+      if (type === "module" || (CLASSIC_SCRIPT_TYPES.has(type) && !script.hasAttribute("nomodule"))) preload(script.getAttribute("src"));
+    }
+    for (const link of document.querySelectorAll("link[rel~='modulepreload'][href]")) preload(link.getAttribute("href"));
+    return preloaded;
+  }
+
   /** Frees what a superseded load fetched. */
   async function discard(images, parsed = null) {
     parsed?.window?.happyDOM?.abort?.();
@@ -1420,6 +1654,7 @@ export async function createPageRenderer({
         page.decodedImages.push(resource.image);
       }
       page.dirty = true;
+      page.resourceLayoutDirty = true;
       scheduleFrame();
     }, () => {});
   }
@@ -1432,16 +1667,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;
@@ -1512,14 +1738,22 @@ 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) for (const element of page.document.getElementsByTagName(String(name))) markStyleDirty(element);
+        if (selectorTraits.defined) {
+          for (const element of page.document.getElementsByTagName(String(name))) markStyleDirty(element, [":defined"]);
+        }
         page.dirty = true;
         scheduleFrame();
       },
-      touch(node = null) {
-        markStyleDirty(node);
+      touch(node = null, stateFeatures = []) {
+        if (stateFeatures.length) markStyleDirty(node, stateFeatures);
         page.dirty = true;
         scheduleFrame();
       },
@@ -1527,8 +1761,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.
@@ -1537,7 +1780,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");
@@ -1556,11 +1799,37 @@ 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);
       },
+      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) {
         const href = new URL(anchor.getAttribute("href"), page.url).href;
@@ -1570,52 +1839,105 @@ 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();
         }
-        const response = await fetchResource(url, "script");
+        const preloaded = page.preloadedScripts.get(url);
+        if (preloaded) page.preloadedScripts.delete(url);
+        const response = await (preloaded ?? fetchResource(url, "script"));
         if (!response.ok) throw new Error(`script ${url} failed with HTTP ${response.status}`);
         return new TextDecoder().decode(response.body);
       },
       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) {
@@ -1696,7 +2018,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));
@@ -1731,9 +2072,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) {
@@ -1750,6 +2096,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 ?? [];
@@ -1862,6 +2212,7 @@ 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") {
@@ -1914,12 +2265,17 @@ 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 };
     },
+    /** 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);
+    },
     /**
      * 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
@@ -1931,6 +2287,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
@@ -1940,13 +2297,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);
@@ -1954,22 +2332,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") {
+        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:")) {
@@ -2053,15 +2439,18 @@ export async function createPageRenderer({
       return cloneableResult(value);
     },
     dispose() {
+      disposedRenderer = true;
       hostClearTimeout(prepaintTimer);
       hostClearTimeout(frameTimer);
+      disposeFrames();
       page.realm?.dispose();
       closePiano();
       disposeVideos();
+      rasterSurface?.delete();
+      rasterSurface = null;
       page.window?.happyDOM?.abort?.();
       for (const image of page.decodedImages) image.delete();
-      fontCollection.delete();
-      fontProvider.delete();
+      disposeBackgrounds();
     },
   };
 
@@ -2103,7 +2492,8 @@ 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(() => {
@@ -2151,6 +2541,401 @@ export async function createPageRenderer({
     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")) {
@@ -2179,31 +2964,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;
@@ -2223,39 +3139,192 @@ export async function createPageRenderer({
     render();
   }
 
-  /** Fetches (once), probes, and opens the decoders for what the file holds. */
+  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;
+        }
+      }
+      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;
       }
-      if (!Number.isFinite(state.duration) && !state.probed) {
-        const probe = await videoDecoder.probe(state.bytes);
+      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;
+    }
+  }
+
+  /** 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 } : {};
   }
 
-  // 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 } : {};
+  function snapshot(pipe, bytes) {
+    return pipe ? pipe.bytes() : bytes;
   }
 
   async function openVideoDecoder(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;
@@ -2265,11 +3334,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. */
@@ -2294,6 +3460,7 @@ export async function createPageRenderer({
   async function playMedia(element) {
     const state = mediaStateFor(element);
     if (!state || state.playing) return;
+    state.error = null;
     setMediaPlaying(state, true);
     try {
       await loadMedia(state);
@@ -2302,21 +3469,18 @@ 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);
@@ -2327,6 +3491,7 @@ export async function createPageRenderer({
     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);
@@ -2336,10 +3501,17 @@ export async function createPageRenderer({
   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);
@@ -2360,80 +3532,149 @@ 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) {
+    // 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.sound && !state.sound.done) openAudioStream(state);
+    if (state.hasAudio) ensureAudio(state);
     mediaTick(state);
   }
 
-  function stopClock(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();
+    mediaTick(state);
+  }
+
+  function stopClock(state, { keepAudio = false } = {}) {
     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;
@@ -2441,9 +3682,34 @@ export async function createPageRenderer({
     const video = state.video;
     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;
@@ -2456,22 +3722,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;
@@ -2486,12 +3779,46 @@ 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`);
+        }
+      } 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;
@@ -2499,6 +3826,7 @@ 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;
@@ -2508,13 +3836,37 @@ export async function createPageRenderer({
   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.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;
@@ -2532,6 +3884,195 @@ 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) {
+    // wasmpeg fails a seek to 0 once frames were decoded; 1 ms reaches the
+    // first keyframe as well.
+    const seek = (time) => decoder.seek(Math.max(1, time * 1000));
+    const frame = 1 / (decoder.fps || 30);
+    if (!(seconds >= frame)) {
+      seek(0);
+      return 0;
+    }
+    const probe = (time) => {
+      seek(time);
+      return pictureKey(decoder.nextFrame(KEYFRAME_PROBE_WIDTH, KEYFRAME_PROBE_HEIGHT));
+    };
+    const target = probe(seconds);
+    let keyframe = seconds;
+    if (target !== null) {
+      let earlier = Math.max(0, seconds - KEYFRAME_SEARCH_SECONDS);
+      if (earlier > 0 && probe(earlier) !== target) {
+        // The keyframe lies in (earlier, keyframe]: narrow it to a frame.
+        while (keyframe - earlier > frame) {
+          const middle = (earlier + keyframe) / 2;
+          if (probe(middle) === target) keyframe = middle;
+          else earlier = middle;
+        }
+      } else {
+        keyframe = earlier;
+      }
+    }
+    seek(keyframe);
+    return keyframe;
+  }
+
+  function pictureKey(pixels) {
+    if (!pixels) return null;
+    let hash = 0x811c9dc5;
+    for (let index = 0; index < pixels.length; index += 3) hash = Math.imul(hash ^ pixels[index], 0x01000193);
+    return hash >>> 0;
+  }
+
+  /**
+   * 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) return state.refilling;
+    const serial = state.seekSerial;
+    state.buffering = true;
+    state.base = mediaTime(state);
+    // The audio output stays open through a stall: it plays the PCM it holds
+    // and then runs dry, and playing resumes right after that PCM. Closing
+    // and reopening it instead loses track of what was heard (a closed
+    // stream may still play out its device buffer, which then plays twice).
+    const holdAudio = Boolean(stalledTrack && state.sound && state.sound.id != null && !state.sound.finishing);
+    const stall = { at: hostPerformance.now(), base: state.base };
+    stopClock(state, { keepAudio: holdAudio });
+    // 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;
@@ -2549,6 +4090,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();
@@ -2575,6 +4118,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;
@@ -2604,7 +4199,25 @@ export async function createPageRenderer({
         }
         page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
         page.decodedImages.push(image);
-        page.dirty = true;
+        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);
+        const cssWidth = node?.style?.width;
+        const cssHeight = node?.style?.height;
+        const specifiedWidth = typeof cssWidth === "number" ? cssWidth : node?.widthAttribute;
+        const specifiedHeight = typeof cssHeight === "number" ? cssHeight : node?.heightAttribute;
+        // When both used dimensions were already fixed, decoded pixels only
+        // change paint. The retained layout remains authoritative and the
+        // display list resolves the current resource by DOM node.
+        const paintOnly = run && Number.isFinite(specifiedWidth) && Number.isFinite(specifiedHeight)
+          && Math.abs(run.width - specifiedWidth) < 0.01 && Math.abs(run.height - specifiedHeight) < 0.01;
+        if (paintOnly) {
+          page.displayList = paintList();
+          page.needsPaint = true;
+        } else {
+          page.dirty = true;
+          page.resourceLayoutDirty = true;
+        }
         refresh();
       }).catch(() => {
         // A failed image retains its fallback replaced-element dimensions.
@@ -2614,114 +4227,6 @@ export async function createPageRenderer({
   }
 }
 
-/** Splits at top-level `separator` (outside (), [] and quotes). */
-function splitTopLevelText(text, separator) {
-  const parts = [];
-  let depth = 0;
-  let quote = "";
-  let start = 0;
-  for (let index = 0; index < text.length; index++) {
-    const character = text[index];
-    if (quote) { if (character === "\\") index++; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    else if (character === "\\") index++;
-    else if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    else if (character === separator && depth === 0) { parts.push(text.slice(start, index).trim()); start = index + 1; }
-  }
-  parts.push(text.slice(start).trim());
-  return parts.filter(Boolean);
-}
-
-const STATE_PSEUDO = /:(?:checked|indeterminate|default|disabled|enabled|placeholder-shown|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|user-valid|user-invalid|autofill|open|popover-open|modal|target|focus|focus-visible|focus-within|hover|active|visited|link|any-link|defined|fullscreen)\b/;
-
-/** CSS escapes in an identifier (".\\:popover-open", "\\31 a") resolved. */
-function cssUnescape(text) {
-  return text.replace(/\\([0-9a-fA-F]{1,6})\s?/g, (_, hex) => String.fromCodePoint(parseInt(hex, 16))).replace(/\\(.)/g, "$1");
-}
-
-/** Invalidation features a compound selector mentions (see selectorTraitsFor). */
-function compoundFeatures(compound) {
-  const features = [];
-  const plain = compound.replace(/\[[^\]]*\]/g, (attribute) => {
-    const name = /^\[\s*([\w-]+)/.exec(attribute)?.[1];
-    if (name) features.push("[" + name.toLowerCase());
-    return "";
-  });
-  for (const match of plain.matchAll(/([.#])((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w\u00a0-\uffff-])+)/g)) features.push(match[1] + cssUnescape(match[2]));
-  const tag = /^(?:[a-zA-Z][\w-]*)/.exec(plain)?.[0];
-  if (tag) features.push("t:" + tag.toLowerCase());
-  if (STATE_PSEUDO.test(plain)) features.push(":state");
-  // Nothing but a universal selector or pseudo-classes: it can match anything.
-  if (!features.length || /^\*/.test(plain)) features.push("*");
-  return features;
-}
-
-/** The features an element has (for a sibling it inserts next to, for example). */
-function elementFeatures(element) {
-  const features = ["t:" + element.localName];
-  const id = element.getAttribute("id");
-  if (id) features.push("#" + id);
-  for (const name of element.classList) features.push("." + name);
-  for (const attribute of element.attributes) features.push("[" + attribute.name);
-  return features;
-}
-
-/** A complex selector's compounds with the combinator after each (" ", ">", "+", "~", or null for the subject). */
-function complexParts(selector) {
-  const parts = [];
-  let depth = 0;
-  let quote = "";
-  let current = "";
-  let combinator = null;
-  const flush = () => {
-    if (current) parts.push({ compound: current, combinator: null });
-    current = "";
-  };
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (quote) { current += character; if (character === "\\") current += selector[++index] ?? ""; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    if (character === "\\") { current += character + (selector[++index] ?? ""); continue; }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && /[\s>+~]/.test(character)) {
-      flush();
-      combinator = character.trim() ? character : combinator ?? " ";
-      if (character.trim() && parts.length) parts.at(-1).combinator = character;
-      else if (parts.length && parts.at(-1).combinator === null) parts.at(-1).combinator = " ";
-      continue;
-    }
-    current += character;
-  }
-  flush();
-  return parts;
-}
-
-/** The compound selectors of a complex selector (split at top-level combinators). */
-function compoundsOf(selector) {
-  const compounds = [];
-  let depth = 0;
-  let quote = "";
-  let current = "";
-  for (let index = 0; index < selector.length; index++) {
-    const character = selector[index];
-    if (quote) { current += character; if (character === "\\") current += selector[++index] ?? ""; else if (character === quote) quote = ""; continue; }
-    if (character === '"' || character === "'") quote = character;
-    if (character === "\\") { current += character + (selector[++index] ?? ""); continue; }
-    if (character === "(" || character === "[") depth++;
-    else if (character === ")" || character === "]") depth--;
-    if (depth === 0 && /[\s>+~]/.test(character)) {
-      if (current) compounds.push(current);
-      current = "";
-      continue;
-    }
-    current += character;
-  }
-  if (current) compounds.push(current);
-  return compounds;
-}
-
 function canvasColor(CanvasKit, value) {
   const match = /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/.exec(value);
   return match