buninu-browser 0.5.0 → 0.6.0

package/lib/renderer/page-renderer.js

@@ -28,6 +28,7 @@ import CanvasKitInit from "../../usr/lib/canvaskit/canvaskit.js";
 import { setCanvasKit, canvasResource, observeDocumentCanvases } from "./canvas-2d.js";
 import { createCanvasTextRenderer, parseCanvasFont } from "./canvas-text.js";
 import { DESKTOP_USER_AGENT } from "../user-agent.js";
+import { DocumentCookies } from "./document-cookies.js";
 
 // qml handle begin: optional software shader canvas bridge
 import {paintQmlCanvas} from './canvas-2d.js';
@@ -51,10 +52,12 @@ import { scrollAlignmentDelta } from "./scroll-into-view.js";
 import { elementAtPoint, elementBounds, elementBox, hitTest, interactiveRegions, renderNodeAtPoint } from "../input/hit-test.js";
 import { beginImageLoad, finishImageLoad } from "./image-loading.js";
 import { createImageResourceLoader, imageCrossOrigin, imageRequestKey } from "./image-resources.js";
+import { createResourceElements } from "./resource-elements.js";
 import { DocumentFonts } from "./font-loading.js";
 import { dispatchPointerMove } from "./pointer-move.js";
 import { keyboardInput } from "./keyboard-input.js";
 import { playbackEvent } from "./media-playback-events.js";
+import { repaintLayout } from "../layout/repaint.js";
 import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.js";
 import { absolutizeStyleSheetUrls, extractFontFaces, matchSelectors, mediaQueryMatches, StyleEngine, topmostConnected } from "../style/computed-style.js";
 import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
@@ -63,6 +66,8 @@ import { buildDisplayList, visibleItems } from "../paint/display-list.js";
 import { backgroundBytes, rawFrame, captureViewport, cropViewport, encodeImageBase64 } from "../paint/frame.js";
 import { FrameCaptureCache } from "../paint/frame-cache.js";
 import { RasterReadback } from "../paint/raster-readback.js";
+import { rasterVideoMask, videoMaskBounds, videoMaskItems, videoLayerGeometry } from "./video-mask.js";
+import { compositeVideo } from "./video-presentation.js";
 import { insetRadii, roundedRect } from "../paint/rounded-rect.js";
 import { appendParagraphText } from "../paint/paragraph-text.js";
 import { CLASSIC_SCRIPT_TYPES, createPageRealm } from "./page-realm.js";
@@ -102,6 +107,8 @@ const RESUME_BUFFER_IDLE_MS = 400;
 // element → MediaSource, and the reverse. One renderer owns one page pipeline.
 const elementSources = new WeakMap();
 const sourceElements = new WeakMap();
+// srcObject is independent of the src attribute and takes precedence over it.
+const elementSourceObjects = new WeakMap();
 
 /**
  * A frame's window as other frames of the page reach it (messaging.js): its
@@ -252,6 +259,8 @@ function buildPageRenderer({
   webSockets = null,
   audio = null,
   setCookie = () => {},
+  documentCookies = new DocumentCookies(setCookie),
+  inheritedCookieUrl = null,
   consoleMessage = null,
   trace = null,
   onFrame = null,
@@ -304,17 +313,23 @@ function buildPageRenderer({
     return resolved;
   }
   const renderTreeBuilder = new RenderTreeBuilder();
-  const layoutEngine = new LayoutEngine({ measureText, fontMetrics });
-  const styleEngine = new StyleEngine({ measureText });
+  let layoutEngine = new LayoutEngine({ measureText, fontMetrics });
+  const styleEngine = new StyleEngine({ measureText, deferHidden: true });
   // Incremental restyle: what may have changed style since the last
   // computation. DOM mutations come from a MutationObserver; state that is
   // not in the DOM tree (checked, value, focus) is marked by the code that
   // changes it. `full` asks for a complete restyle.
   const styleChanges = { full: true, roots: new Set(), rootFeatures: new Map(), records: [], observer: null,
     activeElement: null, focusAncestors: new Set() };
+  let resourceElements = null;
   let selectorTraits = { sibling: false, has: null, sheets: null };
   let lastStyleParts = "";
   let laidOutSheets = null;
+  let computedSheets = null;
+  let computedEnvironment = null;
+  // A style-only CSSOM read may consume mutation records before layout runs.
+  // Keep that work pending so a later geometry read cannot reuse stale boxes.
+  let styleLayoutPending = false;
   const sheetTraitsCache = new Map();
   // Invalidation compounds compiled for matchesCompound() and matchSelectors().
   const compiledCompounds = new Map();
@@ -387,13 +402,17 @@ function buildPageRenderer({
     dirty: false,
     resourceLayoutDirty: false,
     userAgent: mobile ? MOBILE_USER_AGENT : DESKTOP_USER_AGENT,
-    // document.cookie as last reported by the controller (non-HttpOnly only).
-    cookie: "",
   };
 
+  const cookieUrl = () => page.url === "about:blank" && inheritedCookieUrl ? inheritedCookieUrl() : page.url;
+  function acceptCookies(response, url = cookieUrl()) {
+    if (!documentCookies.accept(response.cookieState)) documentCookies.seed(url, response.documentCookie, true);
+  }
+
   async function fetchResource(url, kind) {
+    const generation = loadGeneration;
     const response = await rawFetchResource(url, kind);
-    if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
+    if (generation === loadGeneration) acceptCookies(response);
     return response;
   }
   const loadImageResource = createImageResourceLoader(CanvasKit, fetchResource, pageFetch);
@@ -412,8 +431,13 @@ function buildPageRenderer({
       changed() {
         if (disposedRenderer) return;
         clearFontCaches();
-        // Font metrics also affect CSS ch units and normal line-height.
-        styleChanges.full = true;
+        // Layout caches retain shaping, normal line-height and intrinsic
+        // sizes by style/node identity. A loaded typeface changes those even
+        // when CSS values stay the same; reset them only on font completion.
+        layoutEngine = new LayoutEngine({ measureText, fontMetrics });
+        // ch (including a root font-size) also changes computed CSS. Other
+        // documents need fresh layout, while retaining their existing styles.
+        if (styleEngine.usesFontMetrics) styleChanges.full = true;
         page.dirty = true;
         page.resourceLayoutDirty = true;
         page.needsPaint = true;
@@ -438,6 +462,8 @@ function buildPageRenderer({
       [...page.renderTree.nodesById.values()].filter(node => node.type === "text"));
   }
 
+  // Keep fractional CSS sizes through measurement and painting. Rounding each
+  // scale independently can widen painted glyphs beyond the measured line.
   function makeParagraph(text, computedStyle = null, fontSize = computedStyle?.fontSize ?? 16, scale = 1, foregroundPaint = null) {
     const color = canvasColor(CanvasKit, computedStyle?.color ?? "rgba(0, 0, 0, 1)");
     const weight = computedStyle?.fontWeight ?? 400;
@@ -460,7 +486,7 @@ function buildPageRenderer({
       textStyle: {
         color,
         fontFamilies: families,
-        fontSize: Math.max(1, Math.round(fontSize * scale)),
+        fontSize: Math.max(1, fontSize) * scale,
         fontStyle: { weight, slant, width },
         // Roboto is a variable font; static fonts ignore the axis and match by weight.
         fontVariations: [{ axis: "wght", value: weight }, { axis: "wdth", value: stretch }],
@@ -475,7 +501,7 @@ function buildPageRenderer({
     const pushTextStyle = foregroundPaint
       ? value => builder.pushPaintStyle(value, foregroundPaint, backgroundPaint) : value => builder.pushStyle(value);
     const textStyle = (fontFamilies) => CanvasKit.TextStyle({ color, ...decoration, fontFamilies,
-      fontSize: Math.max(1, Math.round(fontSize * scale)), fontStyle: { weight, slant, width },
+      fontSize: Math.max(1, fontSize) * scale, fontStyle: { weight, slant, width },
       fontVariations: [{ axis: "wght", value: weight }, { axis: "wdth", value: stretch }] });
     function append(text, fonts) {
       let emojiStyle;
@@ -518,7 +544,7 @@ function buildPageRenderer({
     return paragraph;
   }
 
-  // Text widths depend only on the font (families, rounded size, weight),
+  // Text widths depend only on the font (families, fractional size, weight),
   // not on the element, so they are cached per font across elements,
   // relayouts and documents. The cache is dropped when it grows too large.
   const MAX_MEASURED_TEXTS = 200_000;
@@ -557,7 +583,7 @@ function buildPageRenderer({
     const weight = computedStyle?.fontWeight ?? 400;
     const fontStyle = computedStyle?.fontStyle ?? "normal";
     const stretch = computedStyle?.fontStretch ?? 100;
-    const key = `${Math.max(1, Math.round(computedStyle?.fontSize ?? 16))}/${weight}/${fontStyle}/${stretch}/${
+    const key = `${Math.max(1, computedStyle?.fontSize ?? 16)}/${weight}/${fontStyle}/${stretch}/${
       resolveFontFamilies(computedStyle?.fontFamily, weight, fontStyle, null, stretch).join(",")}`;
     if (computedStyle && typeof computedStyle === "object") fontKeys.set(computedStyle, key);
     return key;
@@ -759,6 +785,10 @@ function buildPageRenderer({
     const scale = page.deviceScaleFactor;
     const pixelWidth = Math.max(1, Math.round(region.width * scale));
     const pixelHeight = Math.max(1, Math.round(region.height * scale));
+    // The independent compositor already reconstructs an opaque video from
+    // black/white masks. Reuse that path for the ordinary tile too, avoiding
+    // a large Skia image upscale and a second black pass on each UI repaint.
+    const blackPlan = blackVideoPlan(region);
     const damage = canvasDamage(region);
     if (damage) trace?.(`${page.url}: canvas damage ${damage.right-damage.x}x${damage.bottom-damage.y}`);
     if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
@@ -779,7 +809,7 @@ function buildPageRenderer({
     // Clear and replay all layers inside the damage, including backgrounds
     // and foreground occluders. Transparent canvas pixels must not leave trails.
     canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
-    paintDisplayList(canvas, page.displayList, region, scale, null, damage ? {
+    paintDisplayList(canvas, page.displayList, region, scale, blackPlan ? {resource:blackPlan.resource,white:false} : null, damage ? {
       x:damage.x, y:damage.y, width:damage.right-damage.x, height:damage.bottom-damage.y,
     } : region);
     drawHints(canvas, region);
@@ -789,7 +819,26 @@ function buildPageRenderer({
     let pixels;
     try { pixels = rasterReadback.read(image, pixelWidth, pixelHeight); }
     finally { image.delete(); }
-    const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight);
+    const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight, pixels, blackPlan?.resource);
+    if (blackPlan && !videoLayer) {
+      // An injected callback may invalidate presentation during the paint.
+      // Recover the ordinary pixels before publishing an unlayered tile.
+      canvas.save();
+      try {
+        canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
+        paintDisplayList(canvas, page.displayList, region, scale);
+        drawHints(canvas, region);
+      } finally { canvas.restore(); }
+      surface.flush();
+      const retryImage = surface.makeImageSnapshot();
+      try { pixels = rasterReadback.read(retryImage, pixelWidth, pixelHeight); }
+      finally { retryImage.delete(); }
+    }
+    if (blackPlan && videoLayer) {
+      const composed = compositeVideo({pixels,pixelWidth,pixelHeight,x:region.x,y:region.y,width:region.width,height:region.height,scale,videoLayer},blackPlan.frame);
+      // Preserve the caller's shared readback allocation and tile contract.
+      pixels.set(composed.pixels);
+    }
     page.needsPaint = false;
     rasterRegion = {...region};
     rasterized = {
@@ -843,22 +892,31 @@ function buildPageRenderer({
   }
 
   /** After a paint or a compositor scroll, rasterize around the viewport once this thread is idle. */
-  function schedulePrepaint() {
+  function schedulePrepaint(delay = 30) {
     if (disposedRenderer || !onFrame || embedded) return;
     hostClearTimeout(prepaintTimer);
     prepaintTimer = hostSetTimeout(() => {
       prepaintTimer = null;
-      // A pending relayout does not stop this: the current layout, even if
-      // slightly stale, is better than background where the user scrolled.
       const width = Math.max(1, Math.floor(page.width));
       const height = Math.max(1, Math.floor(page.height));
+      // The visible page already has pixels. Let loading and queued layout/
+      // paint settle before spending time expanding a speculative tile.
+      // Retry even if that work proves to be a no-op and never calls render.
+      // A stalled load backs off to one cheap check per second; a new paint
+      // or scroll resets the usual 30ms delay. Scrolling outside the tile
+      // still paints at that delay, using the current layout if necessary.
+      if ((page.loading || page.dirty || page.needsPaint || frameTimer)
+        && tileCovers(lastTile, { x: viewport.x, y: viewport.y, width, height })) {
+        schedulePrepaint(Math.min(1000, Math.max(100, delay * 2)));
+        return;
+      }
       // Still covered with a quarter viewport to spare in both directions
       // (as far as the page goes).
       const top = Math.max(0, viewport.y - height / 4);
       const bottom = Math.max(viewport.y + height, Math.min(viewport.contentHeight, viewport.y + height * 1.25));
       if (tileCovers(lastTile, { x: viewport.x, y: top, width, height: bottom - top }) && sameRasterInput()) return;
       publish(rasterTile(prepaintRegion()));
-    }, 30);
+    }, delay);
   }
 
   /** A rendering opportunity for DOM changes nobody has asked to see yet. */
@@ -917,7 +975,10 @@ function buildPageRenderer({
       if (rounded) canvas.drawRRect(rounded, paint);
       else canvas.drawRect(deviceRect(rect), paint);
     };
-    for (const item of visibleItems(displayList, dirtyView, viewport)) {
+    const paintItems = videoOverride && dirtyView !== view
+      ? videoMaskItems(displayList, view, dirtyView, viewport)
+      : visibleItems(displayList, dirtyView, viewport);
+    for (const item of paintItems) {
       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);
@@ -1474,6 +1535,14 @@ function buildPageRenderer({
     const records = styleChanges.records;
     if (styleChanges.observer) records.push(...styleChanges.observer.takeRecords());
 
+    // Video controls are read from the live DOM when building the display
+    // list. Their presence changes paint even when layout input is identical.
+    if (records.some(record => record.type === "attributes" && record.attributeName === "controls"
+      && record.target?.tagName === "VIDEO")) {
+      page.resourcePaintDirty = true;
+      page.needsPaint = true;
+    }
+
     // qml handle begin: QML visual attributes invalidate retained rendering
     if (hasQmlDomImages(page.document) && qmlTextureVisibilityChanged(records)) {
       page.resourcePaintDirty = true;
@@ -1647,6 +1716,7 @@ function buildPageRenderer({
 
   function replaceParsedDocument(parsed, styleSheets = [], imageResources = emptyImageResources(), linkSheets = null) {
     if (page.document) loadImageResource.cancelDocument(page.document);
+    resourceElements?.dispose();
     resetInputCaret();
     rasterReadback.dispose();
     clearPaintParagraphs();
@@ -1665,6 +1735,10 @@ function buildPageRenderer({
     page.window = parsed.window;
     pointerButtons = 0; suppressPointerMouse = false; pointerPresses.clear(); selectionDrag=null;
     page.document = parsed.document;
+    resourceElements = createResourceElements(parsed.document);
+    computedSheets = null;
+    computedEnvironment = null;
+    styleLayoutPending = false;
     observeDocumentCanvases(parsed.document, (node) => {
       if (disposedRenderer || node.ownerDocument !== page.document || !node.isConnected) return;
       page.resourcePaintDirty = true;
@@ -1695,7 +1769,7 @@ function buildPageRenderer({
   }
 
   /** Style, render tree, layout and display list of the current document. */
-  function styleAndLayout() {
+  function styleAndLayout(styleOnly = false) {
     const started = hostPerformance.now();
     const ms = (from, to) => Math.round(to - from);
     const sheets = currentStyleSheets();
@@ -1711,30 +1785,47 @@ function buildPageRenderer({
       if (key !== fontDefinitionKey) {
         fontDefinitionKey = key;
         clearFontCaches();
+        // Editing/removing a face can select another loaded face or fallback
+        // without a font-load callback. Its metrics invalidate the same caches.
+        layoutEngine = new LayoutEngine({ measureText, fontMetrics });
+        if (styleEngine.usesFontMetrics) styleChanges.full = true;
         page.resourceLayoutDirty = true;
       }
     }
     const changes = takeStyleChanges(sheets); // drained even when unused, so records do not pile up
     const taken = hostPerformance.now();
+    if (styleOnly && computedSheets === sheets && computedEnvironment === environmentKey
+      && changes && changes.roots.size === 0 && changes.self.size === 0) {
+      // Resource/geometry invalidation does not itself invalidate computed CSS.
+      styleLayoutPending ||= changes.treeDirty;
+      return { style: Math.round(taken - started), layout: 0, skipped: true };
+    }
     // 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
+    if (!styleOnly && !styleLayoutPending && 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 };
+      return { style: Math.round(taken - started), layout: 0, skipped: true, geometryUnchanged: true };
     }
     styleEngine.compute(page.document, sheets, environment, fullStyle ? null : changes?.roots ?? null, changes?.self ?? null);
+    computedSheets = sheets;
+    computedEnvironment = environmentKey;
     const computed = hostPerformance.now();
     if (!hasState || hasStateStale) {
       recordHasState(selectorTraitsFor(sheets));
       hasStateStale = false;
     }
     const recorded = hostPerformance.now();
+    if (styleOnly) {
+      styleLayoutPending ||= !changes || changes.treeDirty || !styleEngine.incremental || styleEngine.restyled !== 0;
+      if (verifyStyle && styleEngine.incremental) verifyIncrementalStyle(sheets, environment);
+      return { style: Math.round(recorded - started), layout: 0 };
+    }
     // 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
+    if (!styleLayoutPending && 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 };
@@ -1753,12 +1844,27 @@ function buildPageRenderer({
         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,
+        ignoreStyles: !styleLayoutPending && styleEngine.incremental && styleEngine.restyled === 0,
       })) {
+      styleLayoutPending = false;
       lastStyleParts += ", unchanged layout input";
       return { style: Math.round(styled - started), layout: 0, skipped: true };
     }
+    // Paint-only updates such as progress-bar scaling must not reflow the
+    // entire document whenever a script reads geometry.
+    const repainted = page.renderTree && !page.resourceLayoutDirty && sheets === laidOutSheets
+      ? repaintLayout(page.layout, page.renderTree, nextRenderTree) : null;
     page.renderTree = nextRenderTree;
+    styleLayoutPending = false;
+    if (repainted) {
+      page.layout = repainted;
+      page.displayList = paintList();
+      page.resourcePaintDirty = false;
+      if (clampElementScroll()) page.displayList = paintList();
+      setContentSize();
+      lastStyleParts += ", retained geometry";
+      return { style: Math.round(styled - started), layout: 0 };
+    }
     page.layout = layoutEngine.layout(page.renderTree, {
       measureText, fontMetrics, width: page.width, viewportHeight: page.height, x: 0, y: 0,
     });
@@ -1803,7 +1909,6 @@ function buildPageRenderer({
   function rebuildRenderTree(reason = "update") {
     const started = hostPerformance.now();
     page.dirty = false;
-    page.layoutVersion++;
     page.title = page.document?.title ?? page.title;
     let staleImages = [];
     if (page.document) {
@@ -1811,6 +1916,11 @@ function buildPageRenderer({
       staleImages = queueImageResources();
     }
     const timing = styleAndLayout();
+    // Metadata-only flushes retain the same boxes and styles. Advancing the
+    // version would make every Resize/IntersectionObserver measure again.
+    // Other skipped paths remain conservative; viewport/DPR changes are also
+    // passed separately to layoutChanged, even when this version is unchanged.
+    if (!timing.geometryUnchanged) page.layoutVersion++;
     if (staleImages.length) {
       const stale = new Set(staleImages);
       page.decodedImages = page.decodedImages.filter(image => !stale.has(image));
@@ -1857,7 +1967,7 @@ function buildPageRenderer({
   }
 
   async function runLoad({
-    url, source = "", contentType = "text/html", status = 200, statusText = "", error = null, cookie = "", referrer = "",
+    url, source = "", contentType = "text/html", status = 200, statusText = "", error = null, cookie = "", cookieState = null, referrer = "",
   }, generation, commit) {
     const current = () => generation === loadGeneration;
     const finish = () => {
@@ -1876,7 +1986,7 @@ function buildPageRenderer({
     // qml handle end
 
     page.url = url;
-    page.cookie = typeof cookie === "string" ? cookie : "";
+    if (!documentCookies.accept(cookieState)) documentCookies.seed(cookieUrl(), cookie, !embedded);
     if (error) {
       replaceDocument("", url);
       page.title = "Network error";
@@ -2404,10 +2514,12 @@ function buildPageRenderer({
         return { ...resource, originClean };
       },
       canvasFont(element, value) {
+        if (page.dirty) styleAndLayout(true);
         return parseCanvasFont(value, styleEngine.get(element)?.fontSize ?? 16,
           styleEngine.get(page.document.documentElement)?.fontSize ?? 16);
       },
       canvasText(element, request) {
+        if (request.settings.direction === "inherit" && page.dirty) styleAndLayout(true);
         const style = { ...request.settings.parsedFont,
           direction: request.settings.direction === "inherit" ? styleEngine.get(element)?.direction ?? "ltr" : request.settings.direction };
         documentFonts.update(fontDefinitions, [{ text: String(request.args[0]), style }]);
@@ -2418,6 +2530,7 @@ function buildPageRenderer({
       playMedia,
       pauseMedia,
       seekMedia,
+      reselectMedia,
       attachMediaSrc,
       mediaReadyState,
       mediaNetworkState,
@@ -2474,11 +2587,14 @@ function buildPageRenderer({
         if (page.dirty) rebuildRenderTree("script scrolled");
         revealElement(element, options);
       },
-      computedStyle(element) {
+      computedStyle(element, needsLayout = true) {
         if (!element) return null;
-        if (page.dirty) rebuildRenderTree("getComputedStyle");
+        if (page.dirty) {
+          if (needsLayout) rebuildRenderTree("getComputedStyle");
+          else styleAndLayout(true);
+        }
         const style = styleEngine.get(element);
-        if (style?.padding.some(value => typeof value === "object")) {
+        if (needsLayout && style?.padding.some(value => typeof value === "object")) {
           const box = page.layout?.boxes.find(box => page.renderTree.nodesById.get(box.nodeId)?.domNode === element);
           if (box) return { ...style, padding: box.style.padding };
         }
@@ -2488,9 +2604,9 @@ function buildPageRenderer({
         if (page.dirty) rebuildRenderTree("intersection observer");
         return page.layoutVersion;
       },
-      customProperties(element) {
+      customProperties(element, updateStyle = true) {
         if (!element) return null;
-        if (page.dirty) rebuildRenderTree("getComputedStyle");
+        if (updateStyle && page.dirty) styleAndLayout(true);
         return styleEngine.customPropertiesOf(element);
       },
       navigate: (url) => navigateTo(String(url)),
@@ -2525,18 +2641,18 @@ function buildPageRenderer({
       userAgent: () => page.userAgent,
       initScripts: () => page.initScripts ?? [],
       rewriteScript,
-      documentCookie: () => page.cookie,
+      documentCookie: () => documentCookies.get(cookieUrl()),
       setDocumentCookie(value) {
-        page.cookie = mergeDocumentCookie(page.cookie, String(value));
-        setCookie(String(value));
+        documentCookies.set(cookieUrl(), value);
       },
       clipboardRead,
       clipboardWrite,
       webSockets,
       pageFetch(request) {
+        const generation = loadGeneration;
         const networkPending = pageFetch(request);
         const result = networkPending.then((response) => {
-          if (typeof response.documentCookie === "string") page.cookie = response.documentCookie;
+          if (generation === loadGeneration) acceptCookies(response);
           return response;
         });
         result.abort = (reason) => networkPending.abort?.(reason);
@@ -2596,6 +2712,9 @@ function buildPageRenderer({
 
   /** The border box of an element's layout box in viewport coordinates. */
   function viewportBounds(element) {
+    const box = elementBox(page.renderTree, page.layout, element)?.box;
+    const content = box ? null : elementBounds(page.renderTree, page.layout, element);
+    if (!box && !content) return null;
     let fixed = false;
     for (let ancestor = element; ancestor && ancestor.nodeType === 1; ancestor = ancestor.parentElement) {
       if (styleEngine.get(ancestor)?.position === "fixed") { fixed = true; break; }
@@ -2604,12 +2723,8 @@ function buildPageRenderer({
     const shift = scrollShift(element);
     const scrollX = (fixed ? 0 : viewport.x) + shift.x;
     const scrollY = (fixed ? 0 : viewport.y) + shift.y;
-    const box = elementBox(page.renderTree, page.layout, element)?.box;
     if (box) return { left: box.x - scrollX, top: box.y - scrollY, width: box.width, height: box.height };
-    const content = elementBounds(page.renderTree, page.layout, element);
-    return content
-      ? { left: content.left - scrollX, top: content.top - scrollY, width: content.width, height: content.height }
-      : null;
+    return { left: content.left - scrollX, top: content.top - scrollY, width: content.width, height: content.height };
   }
 
   /**
@@ -2748,6 +2863,7 @@ function buildPageRenderer({
 
   const api = {
     loadDocument,
+    updateCookies: state => documentCookies.accept(state),
     /** Enables page scripts once the sandbox is ready: "ses", "host", or "off". */
     setScripting(mode) {
       page.scripting = ["ses", "host"].includes(mode) ? mode : "off";
@@ -2786,6 +2902,10 @@ function buildPageRenderer({
         ? deviceScaleFactor
         : 1;
       viewport.resize(width, height);
+      // Viewport dimensions are layout input even when DOM/stylesheets did
+      // not mutate (including CSS resizes that keep the same pixel size by
+      // changing DPR). Bypass retained-layout shortcuts in that case.
+      if (resized) page.resourceLayoutDirty = true;
       rebuildRenderTree();
       // Listeners must observe the new viewport and layout. A repeated metrics
       // request (or DPR-only change) does not resize the CSS viewport.
@@ -2953,14 +3073,31 @@ function buildPageRenderer({
         void placeVideo(state, mediaTime(state)).then(() => {
           if (state.playing && state.document === page.document && state.seekSerial === serial) startMedia(state);
         }).catch(reportError);
+      } else if (Number.isSafeInteger(report.continued)) {
+        const video = state.video, p = video.presentation, continuation = p.continuation;
+        if (!continuation?.decoder || report.revision !== p.revision + 1 || report.continued !== continuation.generation) return;
+        video.decoder.close();
+        video.decoder = continuation.decoder;
+        continuation.decoder = null;
+        Object.assign(video, { bytes: continuation.bytes, openedGeneration: continuation.generation,
+          needsLocalPosition: true, done: false });
+        p.revision = report.revision;
+        p.continuation = null;
+        p.pendingEnd = null;
+        p.exhaustedAt = null;
+      } else if ((report.revision ?? 0) !== state.video.presentation.revision) return;
+      else if (report.continuationError) {
+        failVideoContinuation(state, state.video.presentation);
+      } else if (Number.isFinite(report.exhaustedAt)) {
+        state.video.presentation.exhaustedAt = report.exhaustedAt;
+        continueVideoSnapshot(state, report.exhaustedAt);
       } else if (Number.isFinite(report.end)) {
-        state.video.frameTime = report.end;
-        if (needsMore(state.video)) void refillMedia(state, state.video);
-        else {
-          readPresentedFrame(state);
-          stopVideoPresentation(state);
-          state.video.done = true;
-        }
+        const p = state.video.presentation;
+        // EOF can reach the page before its extension reaches the worker.
+        // Defer that old revision's end until continuation succeeds or fails.
+        if (p.continuation) p.pendingEnd = report.end;
+        else if (p.exhaustedAt !== report.end || !continueVideoSnapshot(state, report.end))
+          finishVideoPresentation(state, report.end);
       } else if (Number.isFinite(report.time)) state.video.shownTime = report.time;
     },
     /** The wheel at a viewport point: the delta the page itself still has to scroll (see wheel). */
@@ -3249,6 +3386,8 @@ function buildPageRenderer({
       if (disposedRenderer) return;
       resetInputCaret();
       disposedRenderer = true;
+      resourceElements?.dispose();
+      resourceElements = null;
       loadGeneration++;
       if (page.document) loadImageResource.cancelDocument(page.document);
       hostClearTimeout(prepaintTimer);
@@ -3293,7 +3432,9 @@ function buildPageRenderer({
    */
   function collectStyleSheets(document, documentUrl, linkSheets, pending = null) {
     const sheets = [];
-    for (const element of document.querySelectorAll("style, link[rel~='stylesheet']")) {
+    const elements = document === page.document && resourceElements
+      ? resourceElements.get("sheets") : document.querySelectorAll("style, link[rel~='stylesheet']");
+    for (const element of elements) {
       if (!isCssStyleSheet(element)) continue;
       const applies = styleSheetMatches(element);
       if (element.tagName === "STYLE") {
@@ -3370,7 +3511,7 @@ function buildPageRenderer({
   /** 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")] : [];
+    const elements = document ? resourceElements.get("frames") : [];
     if (!elements.length && !frames.size) return;
     const boxes = frameBoxes();
     for (const [element, frame] of frames) {
@@ -3427,6 +3568,8 @@ function buildPageRenderer({
       clipboardWriteInput,
       webSockets,
       setCookie,
+      documentCookies,
+      inheritedCookieUrl: cookieUrl,
       consoleMessage,
       onFrame: (update) => showFrame(frame, update),
       onLifecycle: (name, generation) => frameLifecycle(frame, name, generation),
@@ -3497,7 +3640,8 @@ function buildPageRenderer({
           contentType: response.contentType || "text/html",
           status: response.status,
           statusText: response.statusText ?? "",
-          cookie: response.documentCookie ?? page.cookie,
+          cookie: documentCookies.get(target.href),
+          cookieState: response.cookieState,
         };
       } catch (error) {
         trace?.(`${page.url}: iframe ${target.href} not shown: ${error?.message ?? error}`);
@@ -3609,10 +3753,10 @@ function buildPageRenderer({
    * 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 style = element?.nodeType === 1 ? styleEngine.get(element) : null;
+    if (!style?.overflowScrollX && !style?.overflowScrollY) 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];
@@ -3781,7 +3925,9 @@ function buildPageRenderer({
 
   /** Every <video> and <audio> gets its (painted) resource: size, frame, playing, time. */
   function initializeVideos(document, resources) {
-    for (const element of document.querySelectorAll("video, audio")) {
+    const elements = document === page.document && resourceElements
+      ? resourceElements.get("media") : document.querySelectorAll("video, audio");
+    for (const element of elements) {
       if (resources.get(element)) continue;
       const audioOnly = element.tagName === "AUDIO";
       resources.set(element, { width: audioOnly ? 300 : Number(element.getAttribute("width")) || 300,
@@ -3847,6 +3993,45 @@ function buildPageRenderer({
     return null;
   }
 
+  function selectedMediaInput(element) {
+    return elementSourceObjects.get(element) ?? element.getAttribute("src")
+      ?? element.querySelector("source[src]")?.getAttribute("src") ?? null;
+  }
+
+  function selectedMediaSource(element, reselect = false) {
+    const input = selectedMediaInput(element);
+    const state = page.media.get(element);
+    // A selected resource outlives object-URL revocation or a <base> change.
+    // Explicit src assignment or load() selects again, even when raw src is
+    // unchanged; passive metadata/playback must keep its original selection.
+    if (!reselect && state?.input === input) return { input, source: state.mediaSource, url: state.url };
+    const source = resolveMediaSource(typeof input === "string" ? videoSource(element) : input);
+    return { input, source, url: typeof input === "string" ? videoSource(element) : source?._objectURL ?? null };
+  }
+
+  function linkMediaSource(element, source) {
+    const previous = elementSources.get(element);
+    if (previous && previous !== source && sourceElements.get(previous) === element) sourceElements.delete(previous);
+    if (source) {
+      elementSources.set(element, source);
+      sourceElements.set(source, element);
+    } else elementSources.delete(element);
+  }
+
+  function currentMediaState(state) {
+    if (state.document !== page.document || page.media.get(state.element) !== state) return false;
+    return selectedMediaInput(state.element) === state.input;
+  }
+
+  // Detached sources can still finish queued appends or change their duration.
+  // Only the selected source in this document may notify its current state.
+  function attachedMediaState(source) {
+    const element = sourceElements.get(source);
+    const state = element && page.media.get(element);
+    return state && element.ownerDocument === page.document && elementSources.get(element) === source
+      && state.mediaSource === source && currentMediaState(state) ? state : 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;
@@ -3865,24 +4050,17 @@ function buildPageRenderer({
 
   /** 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 (!element || element.ownerDocument !== page.document
+      || (element.tagName !== "VIDEO" && element.tagName !== "AUDIO")) return;
+    if (typeof value !== "string") {
+      if (value == null) elementSourceObjects.delete(element);
+      else elementSourceObjects.set(element, value);
+    }
+    // Updating an inactive src attribute must not replace srcObject playback.
+    const state = mediaStateFor(element, typeof value !== "string" || !elementSourceObjects.has(element));
     if (!state) return;
-    state.mediaSource = source;
+    const source = state.mediaSource;
+    if (!source) return;
     if (Number.isFinite(source.duration)) {
       state.durationOverride = true;
       state.duration = source.duration;
@@ -3892,11 +4070,8 @@ function buildPageRenderer({
   }
 
   function mediaAppended(source) {
-    const element = sourceElements.get(source);
-    if (!element) return;
-    const state = page.media.get(element) ?? mediaStateFor(element);
+    const state = attachedMediaState(source);
     if (!state) return;
-    state.mediaSource = source;
     bindSourcePipes(state);
     // A later initialization segment can replace already-buffered video.
     // Shorten the active presentation at its epoch boundary as soon as that
@@ -3920,8 +4095,7 @@ function buildPageRenderer({
   }
 
   function mediaDuration(source, seconds) {
-    const element = sourceElements.get(source);
-    const state = element && page.media.get(element);
+    const state = attachedMediaState(source);
     if (!state || !Number.isFinite(seconds)) return;
     state.durationOverride = true;
     state.duration = seconds;
@@ -3930,28 +4104,27 @@ function buildPageRenderer({
   }
 
   /** The element's playback state, created (not loaded) on first use. */
-  function mediaStateFor(element) {
+  function mediaStateFor(element, reselect = false) {
+    if (!element || element.ownerDocument !== page.document) 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 {}
-    }
+    const { input, source, url } = selectedMediaSource(element, reselect);
+    linkMediaSource(element, source);
     let state = page.media.get(element);
-    if (state && state.url !== url) {
+    if (state && (state.mediaSource !== source || (!source && (state.input !== input || reselect)))) {
       closeMedia(state);
       page.media.delete(element);
       state = null;
+      resource.duration = NaN;
+      resource.time = 0;
+    }
+    if (source && source.readyState === "closed") {
+      try {
+        source.attach(url);
+      } catch {}
     }
+    if (!videoDecoder || !resource || (!url && !source)) return null;
     if (!state) {
-      state = { element, url, resource, bytes: null, pipe: null, videoPipe: null, audioPipe: null,
+      state = { element, input, 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,
@@ -3963,12 +4136,17 @@ function buildPageRenderer({
         state.durationOverride = true;
         resource.duration = source.duration;
       }
-    } else if (source) {
-      state.mediaSource = source;
+    } else {
+      state.input = input;
+      state.url = url;
     }
     return state;
   }
 
+  function reselectMedia(element) {
+    return mediaStateFor(element, true);
+  }
+
   /** Current position in seconds. */
   function mediaTime(state) {
     const sound = state.sound;
@@ -3994,10 +4172,21 @@ function buildPageRenderer({
 
   /** The control bar and frame redraw without a relayout. */
   function repaintMedia() {
-    // The compositor replaces this video's pixels independently. Page changes
-    // still repaint normally; native controls get their periodic time update.
-    if ([...page.media.values()].some(state => state.video?.presentation && state.playing)
-      && !page.dirty && !page.needsPaint) return;
+    // Independent presentation already replaces video pixels. Dirty page UI
+    // must take the ordinary scheduled refresh, which rebuilds layout before
+    // painting and coalesces changes; a media tick must not raster stale items.
+    if (onFrame && !embedded
+      && [...page.media.values()].some(state => state.video?.presentation && state.playing)) {
+      // Another media element can still own a native progress/control bar.
+      // Its mutable resource time is not a DOM mutation, so invalidate paint.
+      if (page.displayList?.items.some(item => item.op === "drawAudio"
+        || (item.op === "drawVideo" && item.controls))) {
+        rasterized.list = null;
+        page.needsPaint = true;
+      }
+      if (page.dirty || page.needsPaint) scheduleFrame();
+      return;
+    }
     rasterized.list = null;
     render();
   }
@@ -4006,11 +4195,81 @@ function buildPageRenderer({
     const presentation = state.video?.presentation;
     if (!presentation) return;
     readPresentedFrame(state);
+    presentation.continuation?.decoder?.close();
+    if (presentation.continuation) presentation.continuation.decoder = null;
+    presentation.continuation = null;
     onVideo?.({ type: "video-stop", id: presentation.id });
     state.video.presentation = null;
     state.video.needsLocalPosition = true;
   }
 
+  function finishVideoPresentation(state, end) {
+    state.video.frameTime = end;
+    if (needsMore(state.video)) void refillMedia(state, state.video);
+    else {
+      readPresentedFrame(state);
+      stopVideoPresentation(state);
+      state.video.done = true;
+    }
+  }
+
+  function failVideoContinuation(state, presentation) {
+    if (state.video?.presentation !== presentation) return;
+    presentation.continuation?.decoder?.close();
+    if (presentation.continuation) presentation.continuation.decoder = null;
+    presentation.continuation = null;
+    const end = presentation.pendingEnd;
+    presentation.pendingEnd = null;
+    if (Number.isFinite(end)) finishVideoPresentation(state, end);
+  }
+
+  // A decoded snapshot can end before its queued pixels are displayed. If
+  // bytes for the same source/configuration already exist, extend that worker
+  // without dispatching waiting, stopping audio or replacing the raster mask.
+  // The ordinary refill path still handles actual starvation and new epochs.
+  function continueVideoSnapshot(state, boundary) {
+    const video = state.video, p = video?.presentation, pipe = video?.pipe;
+    if (!p || p.continuation || !state.playing || state.buffering || !pipe || pipe.error
+      || pipe !== (state.videoPipe ?? state.pipe) || boundary + 1e-6 >= video.endTime
+      || !Number.isSafeInteger(pipe.generation) || pipe.generation <= video.openedGeneration
+      || pipe.generation <= (p.attemptedGeneration ?? -1)) return false;
+    const generation = pipe.generation;
+    let selected, bytes;
+    try {
+      selected = pipe.snapshotAt?.(boundary);
+      if (selected && (selected.id !== video.snapshotId || selected.startTime !== video.startTime
+        || boundary + 1e-6 >= selected.endTime)) return false;
+      bytes = selected?.bytes ?? pipe.bytes();
+    } catch { return false; }
+    if (!(bytes instanceof Uint8Array) || bytes.length <= video.bytes.length) return false;
+    const serial = state.seekSerial;
+    const continuation = p.continuation = { bytes, generation, decoder: null };
+    p.attemptedGeneration = generation;
+    const current = () => state.document === page.document && state.playing && !state.buffering
+      && state.seekSerial === serial && state.video === video && video.presentation === p
+      && p.continuation === continuation && pipe === (state.videoPipe ?? state.pipe)
+      && boundary + 1e-6 < video.endTime;
+    // Keep a correctly opened, lazy page decoder for controls/layout fallback.
+    // Only one replacement is staged; cancellation closes it before reuse.
+    void (async () => {
+      let decoder;
+      try {
+        decoder = await videoDecoder.decode(bytes, decodeOptions(state.videoMime || state.contentType, state.url));
+        if (!current()) { decoder.close(); decoder = null; failVideoContinuation(state, p); return; }
+        if (decoder.width !== video.decoder.width || decoder.height !== video.decoder.height || decoder.fps !== video.decoder.fps)
+          throw new Error("video snapshot configuration changed");
+        continuation.decoder = decoder;
+        decoder = null;
+        onVideo({ type: "video-extend", id: p.id, revision: p.revision, snapshotId: video.snapshotId,
+          generation, bytes, boundary });
+      } catch {
+        decoder?.close();
+        failVideoContinuation(state, p);
+      }
+    })();
+    return true;
+  }
+
   function readPresentedFrame(state) {
     const p = state.video?.presentation;
     if (!p) return;
@@ -4026,10 +4285,28 @@ function buildPageRenderer({
     if (!image) return;
     state.resource.image?.delete();
     Object.assign(state.resource, { image, bitmapWidth: width, bitmapHeight: height });
+    // Decoder formats may carry alpha. Retain only this coherent frame's
+    // owned copy; stopping/replacing the presentation releases it.
+    let opaque = true;
+    for (let i = 3; i < pixels.length; i += 4) if (pixels[i] !== 255) { opaque = false; break; }
+    p.frame = {pixels,width,height,opaque};
     p.serial = serial;
   }
 
-  function makeVideoLayer(canvas, surface, region, scale, width, height) {
+  function blackVideoPlan(region) {
+    if (!onVideo || embedded) return null;
+    const items = [...visibleItems(page.displayList, region, viewport)].filter(item => item.op === "drawVideo");
+    if (items.length !== 1) return null;
+    const item = items[0], resource = page.displayList.images[item.image];
+    const state = [...page.media.values()].find(state => state.resource === resource);
+    const frame = state?.video?.presentation?.frame;
+    if (!frame?.opaque || !state.playing || state.video.done || state.buffering || state.presentationFailed
+      || state.document !== page.document || !state.element.isConnected || item.controls || item.fixed) return null;
+    if (!videoLayerGeometry(item,region,page.deviceScaleFactor).replayable) return null;
+    return {resource,frame};
+  }
+
+  function makeVideoLayer(canvas, surface, region, scale, width, height, pixels, blackResource = null) {
     if (!onVideo) return null;
     const items = [...visibleItems(page.displayList, region, viewport)].filter(item => item.op === "drawVideo");
     const item = items.length === 1 ? items[0] : null;
@@ -4044,37 +4321,31 @@ function buildPageRenderer({
     if (!video.presentation) {
       const id = nextVideoPresentation++;
       const shared = new SharedArrayBuffer(16 + 480 * 480 * 4);
-      video.presentation = { id, shared, serial: 0 };
+      video.presentation = { id, shared, serial: 0, revision: 0 };
       onVideo({ type: "video-open", id, shared, bytes: video.bytes,
+        snapshotId: video.snapshotId, generation: video.openedGeneration,
         options: decodeOptions(state.videoMime || state.contentType, state.url), time: mediaTime(state),
         startTime: video.startTime ?? 0, endTime: video.endTime ?? Infinity,
         hasAudio: state.hasAudio, audioId: state.sound?.id ?? null,
         audioStart: state.sound ? state.sound.streamStart / state.sound.decoder.sampleRate : 0 });
     }
-    const rect = { ...item.rect };
-    if (item.transform) {
-      rect.x = rect.x * item.transform.a + item.transform.e;
-      rect.y = rect.y * item.transform.d + item.transform.f;
-      rect.width *= item.transform.a;
-      rect.height *= item.transform.d;
-    }
-    const raster = white => {
-      canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
-      paintDisplayList(canvas, page.displayList, region, scale, { resource, white });
-      drawHints(canvas, region);
-      surface.flush();
-      const image = surface.makeImageSnapshot();
-      try {
-        return image.readPixels(0, 0, { width, height, colorType: CanvasKit.ColorType.RGBA_8888,
-          alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB });
-      } finally { image.delete(); }
-    };
-    const base = raster(false), mask = raster(true);
-    for (let i = 0; i < mask.length; i++) mask[i] = Math.max(0, mask[i] - base[i]);
-    return { id: video.presentation.id, base, mask, rect: {
-      x: Math.round((rect.x - region.x) * scale), y: Math.round((rect.y - region.y) * scale),
-      width: Math.round(rect.width * scale), height: Math.round(rect.height * scale),
-    } };
+    const {rect} = videoLayerGeometry(item,region,scale);
+    // Reuse the ordinary raster outside the video. Only this region can
+    // differ between the black/white passes, including subtitles and overlays.
+    const bounds = videoMaskBounds(item, region, scale, width, height);
+    let cullPadding = 2;
+    for (const entry of page.displayList.items) if (entry.transform) {
+      // Display-list bounds are in CSS space; transformed device rounding may
+      // reach beyond them. Unknown transforms keep conservative full culling.
+      const {a, d} = entry.transform;
+      cullPadding = Math.max(cullPadding, Math.abs(a) + 1, Math.abs(d) + 1);
+    }
+    const {base, mask} = rasterVideoMask({kit:CanvasKit, canvas, surface, width, height, pixels,
+      bounds, region, scale, cullPadding, blackAlreadyRasterized:blackResource === resource, background:canvasColor(CanvasKit, page.backgroundColor),
+      paint:(white, dirtyView) => paintDisplayList(canvas, page.displayList, region, scale, {resource, white}, dirtyView),
+      hints:() => drawHints(canvas, region),
+    });
+    return { id: video.presentation.id, base, mask, rect };
   }
 
   function isPipe(value) {
@@ -4097,10 +4368,12 @@ function buildPageRenderer({
     state.loading ??= (async () => {
       if (state.mediaSource) {
         await state.mediaSource.waitForPipes();
+        if (!currentMediaState(state)) return;
         bindSourcePipes(state);
       }
       if (!state.pipe && !state.bytes && !state.mediaSource) {
         const response = await fetchResource(state.url, state.showsPicture ? "video" : "audio");
+        if (!currentMediaState(state)) return;
         if (!response.ok) throw new Error(`media ${state.url} failed with HTTP ${response.status}`);
         state.contentType = response.contentType ?? "";
         if (isPipe(response.body)) {
@@ -4112,6 +4385,7 @@ function buildPageRenderer({
         }
       }
       await ensureProbed(state);
+      if (!currentMediaState(state)) return;
       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.
@@ -4149,27 +4423,85 @@ function buildPageRenderer({
     return state.loading;
   }
 
+  // A probe belongs to one immutable snapshot, not merely one media element.
+  // Read MSE's current pipes directly: removeSourceBuffer/changeType can happen
+  // while the demuxer is awaiting its result, before another append notifies us.
+  function mediaProbeInput(state, time = 0) {
+    const pipes = state.mediaSource?.streamPipes?.();
+    const pipe = pipes ? pipes.video : state.videoPipe ?? state.pipe;
+    const selected = pipe?.snapshotAt?.(time);
+    return { pipe, generation: pipe?.generation, id: selected?.id,
+      start: selected?.startTime, end: selected?.endTime,
+      mime: pipes?.videoMime ?? state.videoMime ?? state.contentType,
+      bytes: selected?.bytes ?? (pipe ? pipe.bytes() : state.bytes) };
+  }
+
+  function sameMediaProbeInput(a, b) {
+    return a && a.pipe === b.pipe && a.generation === b.generation
+      && a.id === b.id && a.start === b.start && a.end === b.end && a.mime === b.mime
+      // Versioned pipe snapshots are immutable. An incomplete MP4 header can
+      // be reassembled into a fresh array on each read without new input.
+      && (a.bytes === b.bytes || (a.pipe && Number.isSafeInteger(a.generation)
+        && a.bytes?.byteLength === b.bytes?.byteLength));
+  }
+
+  async function probeMediaInput(state, input) {
+    if (sameMediaProbeInput(state.lastProbe?.input, input)) return state.lastProbe.result;
+    const result = await videoDecoder.probe(input.bytes);
+    // A failed probe remains retryable, including retries of identical bytes.
+    state.lastProbe = { input, result };
+    return result;
+  }
+
+  async function waitForProbeBytes(state, input, size) {
+    let waiting = state.probeByteWait;
+    if (!waiting || waiting.pipe !== input.pipe || waiting.size !== size) {
+      waiting = { pipe: input.pipe, size, promise: null };
+      waiting.promise = input.pipe.waitFor(size).finally(() => {
+        if (state.probeByteWait === waiting) state.probeByteWait = null;
+      });
+      state.probeByteWait = waiting;
+    }
+    let wake;
+    const changed = new Promise(resolve => { wake = resolve; state.wakeProbe = resolve; });
+    state.probeWaitInput = input;
+    try { await Promise.race([waiting.promise, changed]); }
+    finally {
+      if (state.wakeProbe === wake) { state.wakeProbe = null; state.probeWaitInput = null; }
+    }
+  }
+
   /** Probe until the growing body exposes a picture or sample rate, or ends. */
-  async function ensureProbed(state) {
+  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)));
+    // loadMedia and the first append share this transaction. A second waiter
+    // must not start another probe or wait forever for an unnecessary byte.
+    return state.initialProbe ??= probeInitialMedia(state).finally(() => { state.initialProbe = null; });
+  }
+
+  async function probeInitialMedia(state) {
+    let rejected = null;
+    while (currentMediaState(state) && !state.error) {
+      const input = mediaProbeInput(state), {pipe, bytes} = input;
       if (pipe?.error) throw pipe.error;
-      const bytes = snapshot(pipe, state.bytes);
+      if (pipe && !pipe.done && sameMediaProbeInput(rejected, input)) {
+        await waitForProbeBytes(state, input, pipe.size + 1);
+        continue;
+      }
       if (!bytes?.byteLength) {
         if (!pipe || pipe.done) throw new Error(`media ${state.url}: empty response`);
+        await waitForProbeBytes(state, input, pipe.size + 1);
         continue;
       }
       try {
-        const probe = await videoDecoder.probe(bytes);
+        const probe = await probeMediaInput(state, input);
+        if (!currentMediaState(state)) return;
+        if (!sameMediaProbeInput(input, mediaProbeInput(state))) continue;
         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);
+          rejected = input;
           continue;
         }
         if (!state.durationOverride) state.duration = probe.duration ?? NaN;
@@ -4183,40 +4515,60 @@ function buildPageRenderer({
         mediaEvent(state, "loadedmetadata");
         return;
       } catch (error) {
-        lastError = error;
-        if (!pipe || pipe.done) throw lastError;
-        want = Math.max(bytes.byteLength + 1, want * 2);
+        if (!currentMediaState(state)) return;
+        if (!sameMediaProbeInput(input, mediaProbeInput(state))) continue;
+        if (!pipe || pipe.done) throw error;
+        rejected = input;
       }
     }
   }
 
   /** 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(snapshot(pipe, state.bytes, mediaTime(state)));
-        if (!state.durationOverride && probe.duration != null && probe.duration !== state.duration) {
-          state.duration = probe.duration;
-          state.resource.duration = probe.duration;
-          mediaEvent(state, "durationchange");
+  function refreshProbe(state) {
+    // Audio-only appends do not wake a waiter on unchanged video bytes.
+    if (state.wakeProbe && !sameMediaProbeInput(state.probeWaitInput, mediaProbeInput(state))) state.wakeProbe();
+    state.probePending = true;
+    if (state.probing) return state.probing;
+    state.probing = (async () => {
+      do {
+        state.probePending = false;
+        if (!currentMediaState(state)) return;
+        if (!state.probed) {
+          try { await ensureProbed(state); } catch {}
+          continue;
         }
-        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;
-    }
+        const time = mediaTime(state), input = mediaProbeInput(state, time);
+        if (!input.pipe?.size) continue;
+        try {
+          const probe = await probeMediaInput(state, input);
+          if (!currentMediaState(state)) return;
+          // Compare the same selection point. Continuous WebM snapshots trim
+          // their prefix as playback advances, even without any new input.
+          // A seek into another initialization epoch must still reject the
+          // old result; reading only its id leaves lazy snapshot bytes alone.
+          if (!sameMediaProbeInput(input, mediaProbeInput(state, time))
+            || (input.id !== undefined && input.pipe.snapshotAt(mediaTime(state)).id !== input.id)) {
+            state.probePending = true;
+            continue;
+          }
+          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 {}
+      } while (state.probePending);
+    })().finally(() => {
+      state.probing = null;
+      // A notification queued as this promise settles still needs one pass.
+      if (state.probePending && currentMediaState(state)) void refreshProbe(state);
+    });
+    return state.probing;
   }
 
   /** Refresh duration as a progressive response grows, especially MP3. */
@@ -4412,6 +4764,7 @@ function buildPageRenderer({
     playbackEvent(state, "play", mediaEvent);
     try {
       await loadMedia(state);
+      if (!currentMediaState(state)) return;
       if (state.ended) {
         state.ended = false;
         await positionMedia(state, 0);
@@ -4422,7 +4775,7 @@ function buildPageRenderer({
       }
       state.needsPosition = false;
     } catch (error) {
-      if (state.document === page.document) failMedia(state, error, state.pipe?.error ? 2 : 4);
+      if (currentMediaState(state)) failMedia(state, error, state.pipe?.error ? 2 : 4);
       return;
     }
     if (!state.playing || state.document !== page.document) return;
@@ -4458,7 +4811,7 @@ function buildPageRenderer({
       if (state.refilling) await state.refilling.catch(() => {});
       if (state.seekSerial !== serial) return;
       await loadMedia(state);
-      if (state.seekSerial !== serial) return;
+      if (state.seekSerial !== serial || !currentMediaState(state)) 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);
@@ -4494,7 +4847,7 @@ function buildPageRenderer({
       if (!state.video || state.video.done || seconds === 0 || attempt > 0
         || stale || (selected && selected.id !== state.video.snapshotId)) await openVideoDecoder(state, seconds);
       try {
-        state.video.frameTime = seekToKeyframe(state.video.decoder, seconds, state.video.startTime);
+        state.video.frameTime = seekToKeyframe(state.video.decoder, seconds, state.video.startTime, state.video.bytes);
         state.video.hideUntil = seconds;
         state.video.done = false;
         return;
@@ -4638,7 +4991,7 @@ function buildPageRenderer({
     const video = state.video;
     if (video?.needsLocalPosition && !video.presentation && !video.done) {
       try {
-        video.frameTime = seekToKeyframe(video.decoder, now, video.startTime);
+        video.frameTime = seekToKeyframe(video.decoder, now, video.startTime, video.bytes);
         video.hideUntil = now;
         video.needsLocalPosition = false;
       } catch (error) { failMedia(state, error, 3); return; }
@@ -4750,7 +5103,7 @@ function buildPageRenderer({
   function openAudioStream(state) {
     const sound = state.sound;
     sound.finishing = false;
-    const name = new URL(state.url).pathname.split("/").pop() || "audio";
+    const name = new URL(state.url ?? state.document.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`);
@@ -4904,8 +5257,8 @@ function buildPageRenderer({
    * binary search over seek targets finds where that keyframe starts (to a
    * frame). The frames from there to the clock are then decoded unshown.
    */
-  function seekToKeyframe(decoder, seconds, startTime = 0) {
-    return seekVideoKeyframe(decoder, seconds, startTime);
+  function seekToKeyframe(decoder, seconds, startTime = 0, bytes = null) {
+    return seekVideoKeyframe(decoder, seconds, startTime, bytes);
   }
 
   /**
@@ -4926,6 +5279,7 @@ function buildPageRenderer({
       return state.refilling;
     }
     const serial = state.seekSerial;
+    const resumePresentation = Boolean(state.video?.presentation);
     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
@@ -4952,8 +5306,17 @@ function buildPageRenderer({
         // 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 atEpochEnd = stalledTrack && Number.isFinite(stalledTrack.endTime)
+          && (stalledTrack.frameTime !== undefined
+            ? stalledTrack.frameTime + 1e-6 >= stalledTrack.endTime
+            : stalledTrack.position >= Math.round(stalledTrack.endTime * stalledTrack.decoder.sampleRate));
+        const nextEpoch = atEpochEnd ? pipe?.snapshotAt?.(stalledTrack.endTime) : null;
+        // Multiple epochs may already be present in one generation. Only a
+        // known different snapshot id proves there is another configuration;
+        // reaching a timestamp alone must not cause an EOF reopen loop.
         const hasNewSnapshot = Boolean(stalledTrack && pipe
-          && pipe.generation !== stalledTrack.openedGeneration);
+          && (pipe.generation !== stalledTrack.openedGeneration
+            || (nextEpoch?.id != null && nextEpoch.id !== stalledTrack.snapshotId)));
         // 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.
@@ -4984,26 +5347,35 @@ function buildPageRenderer({
           + `${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.
+        // at a keyframe. A newer shared/download snapshot does not invalidate
+        // an audio decoder which can still produce its queued samples. Leave
+        // it alone until its own EOF or epoch boundary requests a refill;
+        // reopening it here needlessly decodes its entire played prefix.
         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));
+        const refillAudio = state.hasAudio && audio && (!stalledTrack || stalledTrack === state.sound || !state.sound);
         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, resumeAt);
           state.video.hideUntil = hideUntil;
-          try {
-            state.video.frameTime = seekToKeyframe(state.video.decoder, resumeAt, state.video.startTime);
-          } catch {
-            state.video.frameTime = state.video.startTime;
+          if (resumePresentation) {
+            // The independent decoder will locate its own current keyframe.
+            // Keep the page decoder lazy; if layout/controls now prevent
+            // presentation, mediaTick positions it before local decoding.
+            state.video.needsLocalPosition = true;
+          } else {
+            try {
+              state.video.frameTime = seekToKeyframe(state.video.decoder, resumeAt, state.video.startTime, state.video.bytes);
+            } catch {
+              state.video.frameTime = state.video.startTime;
+            }
           }
           state.video.done = false;
         }
         if (refillAudio) {
           let opened = false;
+          const replacingAudio = Boolean(state.sound);
           try {
             let audioTime = held ? writtenEnd : time;
             if (state.sound && Number.isFinite(state.sound.endTime)
@@ -5012,7 +5384,10 @@ function buildPageRenderer({
             }
             opened = await openAudioDecoder(state, { keepStream: Boolean(held), time: audioTime });
           } catch (error) {
-            if (!state.video) throw error;
+            // A still-growing undecodable prefix returns false above. A
+            // genuine failure replacing active audio must stop this media;
+            // keeping its exhausted decoder would retry EOF in a busy loop.
+            if (replacingAudio || !state.video) throw error;
             reportError(error);
           }
           // A held stream continues right after the PCM it was given.
@@ -5022,9 +5397,24 @@ function buildPageRenderer({
         // 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);
+        if (state.playing && state.seekSerial === serial && state.document === page.document) {
+          if (resumePresentation && refillVideo) {
+            // Rebind a fresh layer before the first media tick so a resumed
+            // presentation does not also decode its prefix on the page thread.
+            rasterized.list = null;
+            page.resourcePaintDirty = true;
+            page.needsPaint = true;
+            refresh();
+          }
+          startMedia(state);
+        }
       } catch (error) {
-        if (state.document === page.document) failMedia(state, error, 3);
+        // A seek or pause can cancel this asynchronous refill while its
+        // decoder is still opening. Its later failure belongs to that old
+        // operation, not to the playback which replaced it.
+        if (state.document === page.document && state.seekSerial === serial && state.playing) {
+          failMedia(state, error, 3);
+        }
       } finally {
         if (state.refilling === job) {
           state.refilling = null;
@@ -5063,6 +5453,8 @@ function buildPageRenderer({
   }
 
   function closeMedia(state) {
+    state.wakeProbe?.();
+    state.lastProbe = null;
     state.audioOpenSerial = (state.audioOpenSerial ?? 0) + 1;
     state.audioPositioning = null;
     stopClock(state);
@@ -5077,7 +5469,11 @@ function buildPageRenderer({
   }
 
   function disposeVideos() {
-    for (const state of page.media.values()) closeMedia(state);
+    for (const state of page.media.values()) {
+      closeMedia(state);
+      linkMediaSource(state.element, null);
+      elementSourceObjects.delete(state.element);
+    }
     page.media.clear();
   }
 
@@ -5162,7 +5558,7 @@ function buildPageRenderer({
       page.imageElements.delete(element);
       imageRequests.delete(element);
     }
-    for (const element of document.querySelectorAll("img")) {
+    for (const element of resourceElements.get("images")) {
       const src = element.getAttribute("src");
       const credentials = imageCrossOrigin(element);
       const key = imageRequestKey(src, credentials);
@@ -5240,26 +5636,6 @@ function canvasColor(CanvasKit, value) {
     : CanvasKit.BLACK;
 }
 
-/**
- * Applies a document.cookie assignment to the local copy until the
- * controller's jar (the authority) reports the next value.
- */
-function mergeDocumentCookie(current, assignment) {
-  const [pair, ...attributes] = assignment.split(";");
-  const equals = pair.indexOf("=");
-  if (equals < 1) return current;
-  const name = pair.slice(0, equals).trim();
-  const value = pair.slice(equals + 1).trim();
-  const expired = attributes.some((attribute) => {
-    const [key, argument = ""] = attribute.split("=").map((part) => part.trim().toLowerCase());
-    return (key === "max-age" && Number(argument) <= 0)
-      || (key === "expires" && Date.parse(argument) <= Date.now());
-  });
-  const entries = current ? current.split("; ").filter((entry) => !entry.startsWith(`${name}=`)) : [];
-  if (!expired) entries.push(`${name}=${value}`);
-  return entries.join("; ");
-}
-
 /** Page values leave the renderer only as primitives or JSON data. */
 function cloneableResult(value) {
   if (value === null || ["string", "number", "boolean", "undefined"].includes(typeof value)) return value;