buninu-browser 0.2.2 → 0.2.3

package/lib/audio/playback-buffer.js

@@ -0,0 +1,27 @@
+// Decoded PCM kept in the controller is independent of the device queue.
+// It can bridge renderer work without increasing pause/seek output latency.
+export class PlaybackBuffer {
+  constructor(bytesPerSecond, frameBytes, leadSeconds) {
+    this.bytesPerSecond = bytesPerSecond;
+    this.frameBytes = frameBytes;
+    this.reserve = leadSeconds <= 0.15 ? 0 : this.align(bytesPerSecond * 2);
+    this.threshold = this.reserve ? this.align(bytesPerSecond * 0.4) : 0;
+    this.buffering = Boolean(this.reserve);
+  }
+
+  align(bytes) {
+    return Math.max(0, Math.floor(bytes / this.frameBytes) * this.frameBytes);
+  }
+
+  ready(queued, inDevice, finishing) {
+    if (!this.reserve || finishing) return true;
+    if (queued < this.frameBytes && inDevice < this.frameBytes) this.buffering = true;
+    if (this.buffering && queued >= this.threshold) this.buffering = false;
+    return !this.buffering;
+  }
+
+  request(queued, outstanding, inDevice, immediateNeed) {
+    // Requests stay bounded even when the producer or network stops replying.
+    return this.align(Math.max(immediateNeed, this.reserve - inDevice) - queued - outstanding);
+  }
+}

package/lib/audio/pulse-client.js

@@ -13,6 +13,7 @@
  * other channels carry a stream's audio. Audio is sent as s16le.
  */
 import { connect } from "node:net";
+import { PlaybackBuffer } from "./playback-buffer.js";
 
 export { floatToS16 } from "./pcm.js";
 
@@ -332,9 +333,9 @@ export class PulseClient {
  * to LEAD_SECONDS ahead of the playback clock, whatever the server asks for.
  * Some servers ask for more at once and queue it themselves (jspulse's
  * OpenSL ES backend requests again as soon as it receives), and then a pause
- * would leave everything already sent still playing. `onRequest(bytes)` asks
- * the producer for about that much more; audio it has not been asked for is
- * never requested twice.
+ * would leave everything already sent still playing. The producer prepares a
+ * separate bounded PCM reserve here so renderer work cannot immediately starve
+ * the output. That reserve is discarded on close, not sent to the device.
  */
 const LEAD_SECONDS = 0.5;
 const PACE_MS = 50;
@@ -359,6 +360,7 @@ class PlaybackStream {
   #onTimingError;
   #timingPending = false;
   #playedBytes = 0;
+  #producerBuffer;
   killed = false;
 
   constructor(client, index, { rate, channels }, onRequest, leadSeconds, onTiming, onTimingError) {
@@ -371,6 +373,7 @@ class PlaybackStream {
     this.#bytesPerSecond = rate * this.#frameBytes;
     this.#onRequest = onRequest;
     this.#leadSeconds = leadSeconds;
+    this.#producerBuffer = new PlaybackBuffer(this.#bytesPerSecond, this.#frameBytes, leadSeconds);
     this.#onTiming = onTiming;
     this.#onTimingError = onTimingError;
     this.#timer = setInterval(() => { this.#pace(); void this.updateTiming(); }, PACE_MS);
@@ -388,7 +391,8 @@ class PlaybackStream {
       const played = Math.min(end, Math.max(0, Math.min(end, timing.readIndex) - timing.sinkSeconds * this.#bytesPerSecond));
       this.#playedBytes = Math.max(this.#playedBytes, this.#frameAligned(played));
       this.#onTiming({ seconds: this.#playedBytes / this.#bytesPerSecond,
-        sentSeconds: this.#offset / this.#bytesPerSecond, sinkSeconds: timing.sinkSeconds, playing: timing.playing });
+        sentSeconds: this.#offset / this.#bytesPerSecond, sinkSeconds: timing.sinkSeconds, playing: timing.playing,
+        bufferedSeconds: this.#queuedBytes / this.#bytesPerSecond });
       this.#pace();
     } catch (error) {
       if (!this.killed) this.#onTimingError?.(error);
@@ -436,7 +440,11 @@ class PlaybackStream {
     // (a few at a time), so small packets leave them little to play from.
     const minimum = this.#frameAligned(this.#bytesPerSecond * MIN_PACKET_SECONDS);
     const maximum = this.#frameAligned(this.#bytesPerSecond * MAX_PACKET_SECONDS);
-    while (this.#credit > 0 && this.#queuedBytes > 0 && this.#offset < allowed) {
+    const inDevice = this.#onTiming ? Math.max(0, this.#offset - this.#playedBytes)
+      : this.#started === null ? 0 : Math.max(0, this.#offset - (performance.now() - this.#started) / 1000 * this.#bytesPerSecond);
+    const ready = this.#producerBuffer.ready(this.#queuedBytes, inDevice, this.finishing);
+    const previousOffset = this.#offset;
+    while (ready && this.#credit > 0 && this.#queuedBytes > 0 && this.#offset < allowed) {
       const room = this.#frameAligned(Math.min(this.#credit, allowed - this.#offset, maximum, this.#queuedBytes));
       if (room < this.#frameBytes || (room < minimum && !this.finishing && this.#queuedBytes < minimum)) break;
       const packet = new Uint8Array(room);
@@ -454,9 +462,11 @@ class PlaybackStream {
       this.#credit -= room;
       this.#queuedBytes -= room;
     }
-    // Ask for what the clock will allow next that is neither queued nor already asked for.
-    const need = this.#frameAligned(Math.min(this.#offset + this.#credit, allowed + this.#bytesPerSecond * PACE_MS / 1000)
-      - this.#offset - this.#queuedBytes - this.#outstanding);
+    // Predecode independently of server credits; only transmission uses the
+    // small device budget above. Keep outstanding requests in that budget too.
+    const immediateNeed = Math.min(this.#credit, allowed + this.#bytesPerSecond * PACE_MS / 1000 - this.#offset);
+    const sentNow = inDevice + this.#offset - previousOffset;
+    const need = this.#producerBuffer.request(this.#queuedBytes, this.#outstanding, sentNow, immediateNeed);
     if (need >= this.#bytesPerSecond * MIN_REQUEST_SECONDS && !this.finishing) {
       this.#outstanding += need;
       this.#onRequest(need);

package/lib/cdp-server.js

@@ -686,6 +686,10 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       return {};
     case "Input.dispatchMouseEvent": {
       const target = getSessionTarget(state, sessionId);
+      if (params.type === "mouseMoved") {
+        await ctx.move?.(params.x, params.y);
+        return {};
+      }
       if (params.type === "mouseWheel") {
         await ctx.scroll?.(params.deltaX ?? 0, params.deltaY ?? 0, { x: params.x, y: params.y });
         return {};
@@ -719,6 +723,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
             text: params.text ?? "",
             code: params.code ?? "",
             repeat: !!params.autoRepeat,
+            windowsVirtualKeyCode: params.windowsVirtualKeyCode,
           });
           target.cdpKeyDown = signature;
         }
@@ -729,6 +734,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
             text: params.text ?? "",
             code: params.code ?? "",
             repeat: !!params.autoRepeat,
+            windowsVirtualKeyCode: params.windowsVirtualKeyCode,
           });
         }
       } else if (params.type === "keyUp") {

package/lib/happy-dom/parser.js

@@ -1,5 +1,6 @@
 import HTMLParser from "../../vendor/happy-dom/packages/happy-dom/src/html-parser/HTMLParser.ts";
 import Window from "../../vendor/happy-dom/packages/happy-dom/src/window/Window.ts";
+import "./selector-pseudo-adapter.js";
 
 const IMPLICIT_HEAD_ELEMENTS = new Set([
   "BASE", "BASEFONT", "BGSOUND", "LINK", "META", "NOFRAMES", "SCRIPT", "STYLE", "TEMPLATE", "TITLE",
@@ -20,6 +21,10 @@ export function parseHTMLDocument(html, url = "about:blank") {
       disableCSSFileLoading: true,
       disableIframePageLoading: true,
       enableImageFileLoading: false,
+      // This DOM is only the tree builder. Link activation must not change
+      // its URL before our controller commits a navigation (downloads never
+      // commit). Otherwise later #links resolve against the download URL.
+      navigation: { disableFallbackToSetURL: true },
     },
   });
 

package/lib/happy-dom/selector-pseudo-adapter.js

@@ -0,0 +1,14 @@
+import SelectorItem from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorItem.ts";
+
+// Happy DOM's :empty checks only element children. CSS also excludes elements
+// with nonempty text nodes (including whitespace); comments do not count.
+const original = SelectorItem.prototype.matchPseudoItem;
+SelectorItem.prototype.matchPseudoItem = function (scope, element, siblings, pseudo, ignoreErrors) {
+  if (pseudo.name === "empty") {
+    for (const child of element.childNodes) {
+      if (child.nodeType === 1 || (child.nodeType === 3 || child.nodeType === 4) && child.data.length) return null;
+    }
+    return { priorityWeight: 10 };
+  }
+  return original.call(this, scope, element, siblings, pseudo, ignoreErrors);
+};

package/lib/headless-shell.js

@@ -455,6 +455,9 @@ export async function createBrowser({
     lifecycleState() {
       return [...reachedLifecycle(committed.host, committed.generation)];
     },
+    move(x, y) {
+      return call("move", x / pageScale(), y / pageScale());
+    },
     async click(x, y) {
       const clicked = await call("click", x / pageScale(), y / pageScale());
       const href = typeof clicked === "string" ? clicked : clicked?.url;

package/lib/layout/text-layout.js

@@ -23,6 +23,14 @@ const ZERO_STRUT = Object.freeze({ positive: 0, negative: 0 });
 const DEFAULT_ASCENT = 0.93;
 const DEFAULT_CONTENT_HEIGHT = 1.17;
 
+// CSS 2 §8.4: all four percentage paddings use the containing block's width.
+// Cyclic percentages contribute zero during intrinsic sizing.
+function paddingBox(style, width = 0) {
+  const padding = style?.padding ?? ZERO_BOX;
+  return padding.every(Number.isFinite) ? padding
+    : padding.map(value => Math.max(0, numberOrZero(resolveLength(value, width))));
+}
+
 const ROOT_LAYER = Object.freeze({ z: 0, order: 0, context: true, parent: null });
 
 export function layoutText(tree, options = {}) {
@@ -325,7 +333,7 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
   const style = box.style;
   // Its containing block, for percentages in relative offsets.
   const containing = ctx.containing;
-  const key = blockCacheKey(width, absorbTop, forcedHeight, style?.position === "relative" ? containing : null);
+  const key = blockCacheKey(width, absorbTop, forcedHeight, containing);
   const cached = cachedBlockResult(ctx, box, key, y, x);
   if (cached) return cached;
   const boxStart = ctx.boxes.length;
@@ -511,31 +519,37 @@ function layoutAbsolutes(ctx, box, record) {
   for (const absolute of box.absolutes) {
     const style = absolute.style;
     const containing = style?.position === "fixed" ? { ...icb, height: icb.height || block.height } : block;
-    const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
-      .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
-    const margin = style?.margin ?? ZERO_BOX;
-    const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
-    const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
-    let width;
-    if (specifiedWidth == null && left != null && right != null) {
-      width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
-    } else {
-      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
+    const previousContaining = ctx.containing;
+    ctx.containing = containing;
+    try {
+      const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
+        .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
+      const margin = style?.margin ?? ZERO_BOX;
+      const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
+      const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
+      let width;
+      if (specifiedWidth == null && left != null && right != null) {
+        width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
+      } else {
+        width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
+      }
+      const staticPosition = absolute.staticPosition ?? containing;
+      const x = left != null ? containing.x + left + marginLeft
+        : right != null ? containing.x + containing.width - right - marginRight - width
+          : staticPosition.x + marginLeft;
+      const specifiedHeight = numberOrNull(resolveLength(style?.height, containing.height));
+      const forcedHeight = specifiedHeight == null && top != null && bottom != null
+        ? Math.max(0, containing.height - top - bottom - marginTop - marginBottom)
+        : null;
+      let height = forcedHeight;
+      if (height == null && top == null && bottom != null) height = dryLayout(ctx, absolute, width).height;
+      const y = top != null ? containing.y + top + marginTop
+        : bottom != null ? containing.y + containing.height - bottom - marginBottom - height
+          : staticPosition.y + marginTop;
+      layoutBlock(ctx, absolute, x, width, y, false, forcedHeight);
+    } finally {
+      ctx.containing = previousContaining;
     }
-    const staticPosition = absolute.staticPosition ?? containing;
-    const x = left != null ? containing.x + left + marginLeft
-      : right != null ? containing.x + containing.width - right - marginRight - width
-        : staticPosition.x + marginLeft;
-    const specifiedHeight = numberOrNull(resolveLength(style?.height, containing.height));
-    const forcedHeight = specifiedHeight == null && top != null && bottom != null
-      ? Math.max(0, containing.height - top - bottom - marginTop - marginBottom)
-      : null;
-    let height = forcedHeight;
-    if (height == null && top == null && bottom != null) height = dryLayout(ctx, absolute, width).height;
-    const y = top != null ? containing.y + top + marginTop
-      : bottom != null ? containing.y + containing.height - bottom - marginBottom - height
-        : staticPosition.y + marginTop;
-    layoutBlock(ctx, absolute, x, width, y, false, forcedHeight);
   }
 }
 
@@ -593,9 +607,9 @@ function shiftedFragment(fragment, dx, dy) {
 }
 
 function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
-  const style = box.style;
+  const padding = paddingBox(box.style, ctx.containing?.width ?? width);
+  const style = box.style && padding !== box.style.padding ? { ...box.style, padding } : box.style;
   const border = borderWidths(style);
-  const padding = style?.padding ?? ZERO_BOX;
   const record = { nodeId: box.node.id, x, y, width, height: 0, style };
   ctx.boxes.push(record);
   if (box.replaced) {
@@ -718,8 +732,13 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
       // Tables with width: auto are sized to their contents (CSS 2 §17.5.2).
       const placed = resolveHorizontal(ctx, child, contentX, contentWidth, Boolean(child.table));
       const result = layoutBlock(ctx, child, placed.x, placed.width, childY, collapsesThroughTop(child));
-      cursor = childY + result.height;
-      pending = bottomStrut(child);
+      if (result.height === 0 && selfCollapsing(child)) {
+        // Empty blocks do not separate adjoining margins (CSS 2 §8.3.1).
+        pending = combineStruts(combined, bottomStrut(child));
+      } else {
+        cursor = childY + result.height;
+        pending = bottomStrut(child);
+      }
       baseline = result.baseline ?? baseline;
     });
     contentBottom = collapsesThroughBottom(box) ? cursor : cursor + strutValue(pending ?? ZERO_STRUT);
@@ -912,7 +931,7 @@ function flexItem(ctx, box, containerWidth) {
   // Sizes below are content-box sizes, as in Blink's FlexItem
   // (base_content_size, hypothetical_content_size); `extra` is padding+border.
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style, containerWidth);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const contentBox = (value) => Math.max(0, style?.boxSizing === "border-box" ? value - extra : value);
   const margin = style?.margin ?? ZERO_BOX;
@@ -1503,7 +1522,7 @@ function minimumContribution(box, minContent, available) {
   const margins = numberOrZero(margin[1]) + numberOrZero(margin[3]);
   const specified = numberOrNull(resolveLength(style?.minWidth, available));
   if (specified != null) {
-    const padding = style?.padding ?? ZERO_BOX;
+    const padding = paddingBox(style, available);
     const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
     return (style.boxSizing === "border-box" ? Math.max(specified, extra) : specified + extra) + margins;
   }
@@ -1693,7 +1712,7 @@ function dryLayout(ctx, box, width) {
 /** Resolves the used border-box width and horizontal margins of a block-level box. */
 function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, percentageBasis = containingWidth) {
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style, percentageBasis);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const borderBox = (value) => style?.boxSizing === "border-box" ? value : value + extra;
   const margin = style?.margin ?? ZERO_BOX;
@@ -1729,7 +1748,7 @@ function maxContentWidth(ctx, box) {
   const cached = ctx.maxContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   let width;
   const specified = numberOrNull(style?.width);
@@ -1772,7 +1791,7 @@ function minContentWidth(ctx, box) {
   const cached = ctx.minContent.get(cacheKey);
   if (cached != null) return cached;
   const style = box.style;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
   const specified = numberOrNull(style?.width);
   const outer = (child) => {
@@ -1821,6 +1840,15 @@ function collapsesThroughTop(box) {
     && inFlowChildren(box)[0]?.kind === "block";
 }
 
+function selfCollapsing(box) {
+  return !box.bfc && box.kind === "block" && !box.replaced
+    && borderWidths(box.style).every(value => value === 0)
+    && (box.style?.padding ?? ZERO_BOX).every(value => value === 0)
+    && (box.style?.height === "auto" || box.style?.height === 0)
+    && (numberOrNull(box.style?.minHeight) ?? 0) <= 0
+    && inFlowChildren(box).every(selfCollapsing);
+}
+
 function collapsesThroughBottom(box) {
   return !box.bfc && box.kind === "block" && !box.replaced
     && borderWidths(box.style)[2] === 0 && (box.style?.padding ?? ZERO_BOX)[2] === 0
@@ -1874,6 +1902,14 @@ function layoutInline(ctx, ifc, x, width, y) {
   // Percentage sizes of inline images.
   atomFor.containing = ctx.containing;
   const lines = breakLines(ctx, paragraph, width, atomFor);
+  // Legacy line clamping applies to a vertical -webkit-box, not ordinary blocks.
+  const clamp = ifc.style?.webkitBoxOrient === "vertical"
+    && ["-webkit-box", "-webkit-inline-box"].includes(ifc.style?.display)
+    ? ifc.style.webkitLineClamp : null;
+  if (clamp && lines.length > clamp) {
+    lines.length = clamp;
+    lines[clamp - 1] = { ...lines[clamp - 1], clamped: true };
+  }
   let cursor = y;
   let baseline = null;
   for (const line of lines) {
@@ -2048,7 +2084,7 @@ function mayBreakWithinWords(paragraph, piece) {
  * room for "…". Mutates `segments`; returns the ellipsis to append, or null.
  */
 function truncateForEllipsis(ctx, style, paragraph, segments, line, width) {
-  if (style?.textOverflow !== "ellipsis" || style.overflowX !== "clip" || line.width <= width + 0.5) return null;
+  if (!line.clamped && (style?.textOverflow !== "ellipsis" || style.overflowX !== "clip" || line.width <= width + 0.5)) return null;
   const lastText = [...segments].reverse().find((segment) => segment.run.kind === "text");
   if (!lastText) return null;
   const text = "\u2026";
@@ -2088,7 +2124,7 @@ function truncateForEllipsis(ctx, style, paragraph, segments, line, width) {
 function inlineImageMargins(node) {
   const margin = node.style?.margin ?? ZERO_BOX;
   const border = borderWidths(node.style);
-  const padding = node.style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(node.style);
   return {
     left: numberOrZero(margin[3]) + border[3] + padding[3],
     right: numberOrZero(margin[1]) + border[1] + padding[1],
@@ -2099,7 +2135,7 @@ function inlineImageMargins(node) {
 function inlineImageVerticalInsets(node) {
   const margin = node.style?.margin ?? ZERO_BOX;
   const border = borderWidths(node.style);
-  const padding = node.style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(node.style);
   return {
     top: numberOrZero(margin[0]) + border[0] + padding[0],
     bottom: numberOrZero(margin[2]) + border[2] + padding[2],
@@ -2128,7 +2164,7 @@ function inlineImageTop(style, height, metrics) {
 
 function inlineInsets(style) {
   const margin = style?.margin ?? ZERO_BOX;
-  const padding = style?.padding ?? ZERO_BOX;
+  const padding = paddingBox(style);
   const border = borderWidths(style);
   return {
     left: numberOrZero(margin[3]) + border[3] + padding[3],
@@ -2320,7 +2356,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
       // Its background and borders, around the content box.
       if (isDecorated(run.node.style)) {
         const border = borderWidths(run.node.style);
-        const padding = run.node.style.padding ?? ZERO_BOX;
+        const padding = paddingBox(run.node.style, ctx.containing?.width);
         ctx.boxes.push({
           nodeId: run.nodeId,
           x: imageX - padding[3] - border[3],
@@ -2396,7 +2432,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
   for (const [node, edge] of edges) {
     const nodeStyle = paragraph.inlineState.get(node)?.style;
     if (!isDecorated(nodeStyle) || edge.first == null) continue;
-    const padding = nodeStyle.padding ?? ZERO_BOX;
+    const padding = paddingBox(nodeStyle, ctx.containing?.width);
     const border = borderWidths(nodeStyle);
     const metrics = textMetrics(ctx, nodeStyle);
     const left = edge.left ?? edge.first;

package/lib/media/video-keyframe.js

@@ -0,0 +1,29 @@
+// wasmpeg seeks to a keyframe without returning its timestamp. Locate it by
+// comparing tiny decoded probes, then rewind before delivering full frames.
+export function seekVideoKeyframe(decoder, seconds) {
+  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);
+    const pixels = decoder.nextFrame(32, 18);
+    if (!pixels) return null;
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < pixels.length; i += 3) hash = Math.imul(hash ^ pixels[i], 0x01000193);
+    return hash >>> 0;
+  };
+  const target = probe(seconds);
+  let keyframe = seconds;
+  if (target !== null) {
+    let earlier = Math.max(0, seconds - 10);
+    if (earlier > 0 && probe(earlier) !== target) {
+      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;
+}

package/lib/paint/display-list.js

@@ -215,7 +215,8 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         if (run.video || run.audio) {
           const rect = { x: run.x, y, width: run.width, height: run.height };
           images.push(currentResource);
-          items.push({ op: run.video ? "drawVideo" : "drawAudio", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
+          const controls = Boolean(tree?.nodesById.get(run.nodeId)?.domNode?.hasAttribute("controls"));
+          items.push({ op: run.video ? "drawVideo" : "drawAudio", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect, controls });
           return;
         }
         if (!currentResource?.image) return;
@@ -402,7 +403,14 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
         if (ownContent && escaping !== "fixed") {
           const positioned = style.position && style.position !== "static";
           if (!escaping || positioned) {
-            clips.push([node, overflowClip(node)]);
+            const clip = overflowClip(node);
+            const radii = clip ? cornerRadii(style, boxes.get(node.id)) : null;
+            if (radii) {
+              const [top, right, bottom, left] = style.borderWidths ?? [0, 0, 0, 0];
+              radii.x = Math.max(0, radii.x - Math.max(left, right));
+              radii.y = Math.max(0, radii.y - Math.max(top, bottom));
+            }
+            clips.push([node, clip, radii]);
             if (isScroller(style)) {
               if (!scrolledBy.size) outOfFlow = positionedOut;
               scrolledBy.add(node);
@@ -429,14 +437,20 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
           transform = transform ? composeTransforms(transform, scrolled) : scrolled;
         }
       }
-      for (const [node, clip] of clips) {
+      const roundedClips = [];
+      for (const [node, clip, radii] of clips) {
         const matrix = transforms.get(node);
-        clipRect = intersectRects(clipRect, clip && matrix ? transformRect(matrix, clip) : clip);
+        const rect = clip && matrix ? transformRect(matrix, clip) : clip;
+        clipRect = intersectRects(clipRect, rect);
+        if (rect && radii && (radii.x > 0 || radii.y > 0)) {
+          roundedClips.push({ rect, radii: matrix
+            ? { x: radii.x * Math.abs(matrix.a), y: radii.y * Math.abs(matrix.d) } : radii });
+        }
       }
       // The owner's own box moves with every scroll container above it, not with its own.
       transform = kind === "text" ? transform : transforms.get(owner) ?? null;
       const scrollers = scrolledBy.size ? [...scrolledBy].map((node) => node.id) : null;
-      result = opacity <= 0 ? null : { opacity, clipRect, fixed, transform, scrollers, outOfFlow };
+      result = opacity <= 0 ? null : { opacity, clipRect, roundedClips, fixed, transform, scrollers, outOfFlow };
     } else {
       result = null;
     }
@@ -503,6 +517,7 @@ function applyEffect(items, start, effect) {
       item.clipRect = effect.clipRect;
       item.bounds = intersectRects(item.bounds, effect.clipRect);
     }
+    if (effect.roundedClips?.length) item.roundedClips = effect.roundedClips;
   }
 }
 

package/lib/render-tree/index.js

@@ -304,6 +304,8 @@ function sameSvg(left, right) {
 
 function boxType(style, tagName = null) {
   const display = style?.display;
+  if (display === "-webkit-box") return "block";
+  if (display === "-webkit-inline-box") return "inline-block";
   if (["flex", "inline-flex", "inline-block", "grid", "inline-grid"].includes(display)) return display;
   if (["table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
     "table-cell", "table-caption", "table-column", "table-column-group"].includes(display)) return display;

package/lib/renderer/bindings.js

@@ -16,6 +16,7 @@ const REFLECTED_PROPERTIES = [
   "value", "checked", "disabled", "type", "name", "href", "src", "alt", "title",
   "placeholder", "selected", "readOnly", "required", "min", "max", "step", "rel", "target",
   "htmlFor", "lang", "dir", "tabIndex", "hidden", "defaultValue", "action", "method",
+  "controls", "autoplay", "loop", "playsInline", "preload", "poster",
 ];
 
 /** Per-document state shared by that document's wrappers. */
@@ -782,6 +783,11 @@ class ElementBinding extends ParentBinding {
     return this.#style;
   }
 
+  // ElementCSSInlineStyle is [PutForwards=cssText], not assignment-readonly.
+  set style(value) {
+    this.style.cssText = value;
+  }
+
   get dataset() {
     this.#dataset ??= datasetBinding(nodeOf(this), realmOf(this));
     return this.#dataset;
@@ -1767,6 +1773,9 @@ class EventBinding {
     return this.#event.code;
   }
 
+  get keyCode() { return this.#event.keyCode ?? 0; }
+  get charCode() { return this.#event.charCode ?? 0; }
+
   get clientX() {
     return this.#event.clientX;
   }
@@ -2515,7 +2524,7 @@ const EVENT_INTERFACES = {
   MouseEvent: ["UIEvent", MOUSE_MEMBERS],
   PointerEvent: ["MouseEvent", ["pointerType"]],
   WheelEvent: ["MouseEvent", ["deltaX", "deltaY", "deltaMode"]],
-  KeyboardEvent: ["UIEvent", ["key", "code", "repeat", ...MODIFIERS]],
+  KeyboardEvent: ["UIEvent", ["key", "code", "keyCode", "charCode", "repeat", ...MODIFIERS]],
   FocusEvent: ["UIEvent", ["relatedTarget"]],
   InputEvent: ["UIEvent", ["data", "inputType"]],
   MessageEvent: ["Event", ["data", "origin", "lastEventId", "source", "ports"]],
@@ -2531,7 +2540,7 @@ const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["h
 const UI_EVENT_TYPES = ["UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
 const UI_EVENT_FIELDS = [
   ...["detail", "clientX", "clientY", "screenX", "screenY", "button", "buttons", "deltaX", "deltaY", "deltaZ", "deltaMode",
-    "pointerId", "width", "height", "pressure", "location"].map((key) => [key, Number]),
+    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode"].map((key) => [key, Number]),
   ...["key", "code", "data", "inputType", "pointerType"].map((key) => [key, String]),
   ...["ctrlKey", "altKey", "shiftKey", "metaKey", "repeat", "isComposing", "isPrimary"].map((key) => [key, Boolean]),
 ];

package/lib/renderer/compositor.js

@@ -23,6 +23,8 @@
  */
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { cropViewport, encodeImage } from "../paint/frame.js";
+import wasmpeg from "../../vendor/wasmpeg/src/js/index.js";
+import { VideoPresentation, compositeVideo } from "./video-presentation.js";
 
 const CHANNEL_FD = 3;
 const MAX_LINE_BYTES = 1024 * 1024;
@@ -32,6 +34,10 @@ let tile = null;
 let scrollEpoch = -1;
 let frameSerial = 0;
 let cached = { key: "", data: "" };
+const video = new VideoPresentation(wasmpeg, () => {
+  frameSerial++;
+  send({ type: "frame" });
+}, report => postMessage({ type: "video-report", ...report }));
 
 const channel = Bun.file(CHANNEL_FD).writer();
 
@@ -41,6 +47,9 @@ function send(message) {
 }
 
 self.onmessage = ({ data }) => {
+  if (data?.type === "video-open") { void video.open(data); return; }
+  if (data?.type === "video-stop") { video.stop(data.id); frameSerial++; return; }
+  if (data?.type === "video-bind") { video.bind(data.id, data.audioId, data.audioStart, data.time); return; }
   if (data?.type !== "frame") return;
   tile = data.tile;
   frameSerial++;
@@ -68,7 +77,8 @@ const methods = {
     if (!tile) return "";
     const key = `${frameSerial}:${viewport.x}:${viewport.y}:${format}:${quality}`;
     if (cached.key !== key) {
-      const { pixels, width, height } = cropViewport(tile, viewport.x, viewport.y, viewport.width, viewport.height);
+      const composited = tile.videoLayer?.id === video.config?.id ? compositeVideo(tile, video.frame) : tile;
+      const { pixels, width, height } = cropViewport(composited, viewport.x, viewport.y, viewport.width, viewport.height);
       const bytes = await encodeImage(pixels, width, height, { format, quality });
       cached = { key, data: Buffer.from(bytes).toString("base64") };
     }
@@ -93,6 +103,10 @@ async function handleLine(line) {
   } catch {
     return;
   }
+  if (request?.type === "audio-timing" && Number.isInteger(request.audioId)) {
+    video.timing(request.audioId, request.seconds);
+    return;
+  }
   if (!Number.isInteger(request?.id) || !Object.hasOwn(methods, request.method)) return;
   try {
     const params = Array.isArray(request.params) ? request.params : [];
@@ -120,4 +134,5 @@ async function handleLine(line) {
 // renderer installs seccomp, which forbids opening files.
 await encodeImage(new Uint8Array(4), 1, 1);
 await encodeImage(new Uint8Array(4), 1, 1, { format: "jpeg" });
+await wasmpeg.load();
 postMessage({ type: "ready" });

package/lib/renderer/custom-element-reactions.js

@@ -0,0 +1,18 @@
+/** Bridge attribute reactions from the host DOM into the page's realm.
+ * Capture the callback and observed names at registration, as browsers do.
+ */
+export function installAttributeReactions(Adapter, constructor, realm, callPage) {
+  const callback = constructor.prototype.attributeChangedCallback;
+  if (typeof callback !== "function") return;
+  const observed = constructor.observedAttributes;
+  Object.defineProperty(Adapter, "observedAttributes", {
+    value: observed === undefined ? [] : Array.from(observed, String),
+  });
+  Object.defineProperty(Adapter.prototype, "attributeChangedCallback", {
+    value(name, oldValue, newValue, namespace = null) {
+      callPage(callback, realm.wrap(this), [name, oldValue, newValue, namespace]);
+    },
+    configurable: true,
+    writable: true,
+  });
+}