buninu-browser 0.2.2 → 0.2.3

package/lib/renderer/video-presentation.js

@@ -0,0 +1,126 @@
+import { seekVideoKeyframe } from "../media/video-keyframe.js";
+
+// Runs in the compositor Worker, never in the page's JavaScript turn. Both
+// queue duration and decoded pixel memory are bounded. No audio extrapolation.
+export class VideoPresentation {
+  constructor(engine, changed, report) {
+    this.engine = engine;
+    this.changed = changed;
+    this.report = report;
+    this.epoch = 0;
+    this.timer = null;
+    this.clocks = new Map();
+  }
+  async open(config) {
+    this.stop();
+    const epoch = this.epoch;
+    this.config = config;
+    config.started = performance.now();
+    try {
+      const decoder = await this.engine.decode(config.bytes, config.options);
+      if (epoch !== this.epoch) { decoder.close(); return; }
+      this.decoder = decoder;
+      this.nextTime = config.time > 0 ? seekVideoKeyframe(decoder, config.time) : 0;
+      this.width = Math.max(1, Math.min(480, decoder.width));
+      this.height = Math.max(1, Math.round(this.width * decoder.height / Math.max(1, decoder.width)));
+      if (this.height > 480) {
+        this.width = Math.max(1, Math.round(this.width * 480 / this.height));
+        this.height = 480;
+      }
+      this.limit = Math.max(2, Math.min(30, Math.floor(16 * 1024 * 1024 / (this.width * this.height * 4))));
+      this.step();
+    } catch (error) {
+      if (epoch === this.epoch) this.report({ id: config.id, error: String(error) });
+    }
+  }
+  stop(id) {
+    if (id !== undefined && this.config?.id !== id) return;
+    this.epoch++;
+    clearTimeout(this.timer);
+    this.decoder?.close();
+    this.decoder = null;
+    this.queue = [];
+    this.frame = null;
+    this.eof = false;
+    this.reportedEnd = false;
+    this.config = null;
+  }
+  timing(id, seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0) return;
+    this.clocks.set(id, seconds);
+    // Audio stream identifiers increase monotonically within this renderer.
+    if (this.clocks.size > 32) this.clocks.delete(this.clocks.keys().next().value);
+  }
+  bind(id, audioId, audioStart, time) {
+    if (this.config?.id !== id) return;
+    Object.assign(this.config, { audioId, audioStart, time });
+  }
+  time() {
+    const c = this.config;
+    if (c.audioId != null) return c.audioStart + (this.clocks.get(c.audioId) ?? 0);
+    // Until its audio stream exists, a known audio track holds the image.
+    if (c.hasAudio) return c.time;
+    return c.time + (performance.now() - c.started) / 1000;
+  }
+  step() {
+    if (!this.decoder || !this.config) return;
+    const time = this.time();
+    const deadline = performance.now() + 8;
+    try {
+      while (!this.eof && this.queue.length < this.limit && this.nextTime <= time + 0.75) {
+        const pixels = this.decoder.nextFrame(this.width, this.height);
+        if (!pixels) { this.eof = true; break; }
+        const frame = { pixels, time: this.nextTime, width: this.width, height: this.height };
+        this.nextTime += 1 / (this.decoder.fps || 30);
+        // A reopened decoder starts at an earlier keyframe. Decode through
+        // that prefix without flashing it over the last displayed picture.
+        if (frame.time + 1 / (this.decoder.fps || 30) > this.config.time) this.queue.push(frame);
+        if (performance.now() >= deadline) break;
+      }
+    } catch {
+      // Growing snapshots can throw at their current end. The main thread
+      // owns network/refill policy and decides whether this is EOF or an error.
+      this.eof = true;
+    }
+    let latest = null;
+    while (this.queue.length && this.queue[0].time <= time + 1e-6) latest = this.queue.shift();
+    if (latest) {
+      this.frame = latest;
+      if (this.config.shared) {
+        const meta = new Int32Array(this.config.shared, 0, 4);
+        Atomics.add(meta, 0, 1);
+        new Uint8Array(this.config.shared, 16, latest.pixels.length).set(latest.pixels);
+        Atomics.store(meta, 1, latest.width);
+        Atomics.store(meta, 2, latest.height);
+        Atomics.add(meta, 0, 1);
+      }
+      this.changed();
+      this.report({ id: this.config.id, time: latest.time });
+    }
+    if (this.eof && !this.queue.length && time >= this.nextTime && !this.reportedEnd) {
+      this.reportedEnd = true;
+      this.report({ id: this.config.id, end: this.nextTime });
+    }
+    this.timer = setTimeout(() => this.step(), 10);
+  }
+}
+
+// Black/white raster passes capture the video's contribution after clipping,
+// opacity, subtitles and controls. This preserves foreground pixels instead of
+// pasting a rectangular video over the page's UI.
+export function compositeVideo(tile, frame) {
+  const layer = tile.videoLayer;
+  if (!layer || !frame) return tile;
+  const pixels = new Uint8Array(layer.base);
+  const { x, y, width, height } = layer.rect;
+  for (let py = Math.max(0, Math.floor(y)); py < Math.min(tile.pixelHeight, Math.ceil(y + height)); py++) {
+    const sy = Math.max(0, Math.min(frame.height - 1, Math.floor((py - y) / height * frame.height)));
+    for (let px = Math.max(0, Math.floor(x)); px < Math.min(tile.pixelWidth, Math.ceil(x + width)); px++) {
+      const sx = Math.max(0, Math.min(frame.width - 1, Math.floor((px - x) / width * frame.width)));
+      const dst = (py * tile.pixelWidth + px) * 4, src = (sy * frame.width + sx) * 4;
+      for (let c = 0; c < 3; c++) pixels[dst + c] = Math.min(255,
+        layer.base[dst + c] + Math.round(frame.pixels[src + c] * layer.mask[dst + c] / 255));
+    }
+  }
+  return { ...tile, pixels };
+}

package/lib/style/computed-style.js

@@ -32,6 +32,7 @@ const LIST_STYLE_TYPES = new Set([
   "lower-alpha", "upper-alpha", "lower-latin", "upper-latin", "lower-roman", "upper-roman",
 ]);
 const DISPLAYS = new Set([
+  "-webkit-box", "-webkit-inline-box",
   "none", "block", "flex", "grid", "inline", "inline-block", "inline-flex", "inline-grid", "list-item",
   "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
   "table-cell", "table-caption", "table-column", "table-column-group",
@@ -61,6 +62,8 @@ const WHITE_SPACES = new Set(["normal", "nowrap", "pre", "pre-wrap"]);
 const CSS_WIDE_KEYWORDS = new Set(["inherit", "initial", "unset", "revert", "revert-layer"]);
 // Computed-style fields a shorthand (or a property not named after its field) covers.
 const PROPERTY_FIELDS = Object.freeze({
+  "-webkit-line-clamp": ["webkitLineClamp"],
+  "-webkit-box-orient": ["webkitBoxOrient"],
   overflow: ["overflowX", "overflowY", "overflowScrollX", "overflowScrollY"],
   "overflow-x": ["overflowX", "overflowScrollX"],
   "overflow-y": ["overflowY", "overflowScrollY"],
@@ -111,6 +114,8 @@ const INITIAL = Object.freeze({
   lineHeightFactor: null,
   textAlign: "start",
   whiteSpace: "normal",
+  webkitLineClamp: null,
+  webkitBoxOrient: "horizontal",
   listStyleType: "disc",
   margin: Object.freeze([0, 0, 0, 0]),
   padding: Object.freeze([0, 0, 0, 0]),
@@ -1090,6 +1095,13 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "display": if (DISPLAYS.has(value)) style.display = value; break;
+    case "-webkit-line-clamp":
+      if (value === "none") style.webkitLineClamp = null;
+      else if (/^[1-9]\d*$/.test(value)) style.webkitLineClamp = Number(value);
+      break;
+    case "-webkit-box-orient":
+      if (["vertical", "horizontal"].includes(value)) style.webkitBoxOrient = value;
+      break;
     case "text-decoration-line": {
       const lines = parseDecorationLines(value);
       if (lines) style.textDecorationLine = lines;
@@ -1236,8 +1248,11 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     case "font-size": {
       const parentSize = parentStyle?.fontSize ?? INITIAL.fontSize;
+      const specified = computedLength(value, parentSize, true);
+      const relativeSize = specified?.unit === "%" ? parentSize * specified.value / 100
+        : specified?.unit === "math" && specified.kind === "calc" ? specified.px + parentSize * specified.percent / 100 : specified;
       const length = FONT_SIZE_KEYWORDS[value] ?? (value === "larger" ? parentSize * 1.2 : value === "smaller" ? parentSize / 1.2
-        : computedLength(value, parentSize));
+        : relativeSize);
       if (length > 0) style.fontSize = length;
       break;
     }
@@ -1370,7 +1385,7 @@ function setProperty(style, name, value, parentStyle = null) {
       break;
     }
     case "padding": {
-      const box = boxLengths(value, false, style.fontSize, false);
+      const box = boxLengths(value, false, style.fontSize, false, true);
       if (box) style.padding = box;
       break;
     }
@@ -1384,8 +1399,9 @@ function setProperty(style, name, value, parentStyle = null) {
     case "padding-left": {
       const [box, side] = name.split("-");
       const isMargin = box === "margin";
-      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style.fontSize);
-      if (length === "auto" || (Number.isFinite(length) && (isMargin || length >= 0))) {
+      const length = isMargin && value === "auto" ? "auto" : computedLength(value, style.fontSize, !isMargin);
+      if (length === "auto" || (!isMargin && isLength(length) && typeof length === "object"
+        && (!isPercentage(length) || length.value >= 0)) || (Number.isFinite(length) && (isMargin || length >= 0))) {
         style[box] = style[box].with(BOX_SIDES.indexOf(side), length);
       }
       break;
@@ -2465,7 +2481,7 @@ function splitTopLevel(source, separator) {
     const character = source[index];
     if (character === "(") depth++;
     else if (character === ")") depth--;
-    else if (character === separator && depth === 0) {
+    else if ((character === separator || separator === " " && /\s/.test(character)) && depth === 0) {
       parts.push(source.slice(start, index).trim());
       start = index + 1;
     }
@@ -2475,10 +2491,11 @@ function splitTopLevel(source, separator) {
 }
 
 function boxLengths(value, allowNegative, emSize, allowAuto, allowPercentage = false) {
-  const parts = value.trim().split(/\s+/).map((part) =>
+  const parts = splitTopLevel(value.trim(), " ").filter(Boolean).map((part) =>
     allowAuto && part === "auto" ? "auto" : computedLength(part, emSize, allowPercentage));
   if (parts.length < 1 || parts.length > 4 || parts.some((part) =>
-    part !== "auto" && !isPercentage(part) && (!Number.isFinite(part) || (!allowNegative && part < 0)))) return null;
+    part !== "auto" && !(allowPercentage && isLength(part) && typeof part === "object"
+      && (allowNegative || !isPercentage(part) || part.value >= 0)) && (!Number.isFinite(part) || (!allowNegative && part < 0)))) return null;
   const [top, right = top, bottom = top, left = right] = parts.length === 3
     ? [parts[0], parts[1], parts[2], parts[1]]
     : parts.length === 2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/test/compositor.test.js

@@ -62,6 +62,44 @@ test("the compositor answers screenshots and scrolling while the main thread is
 }, 30_000);
 
 let server;
+test("video continues presenting while page JavaScript blocks, then freezes on pause", async () => {
+  const host = new RendererHost({ timeout: 20_000,
+    fetch: async () => new Response(Bun.file(new URL("./fixtures/long-video.mp4", import.meta.url)),
+      { headers: { "content-type": "video/mp4" } }) });
+  try {
+    await host.start();
+    await host.call("resize", 160, 120, 1);
+    await host.call("loadDocument", { url: "https://page.test/", contentType: "text/html",
+      source: '<body style="margin:0"><video id="v" width="160" height="120" src="/movie.mp4"></video>' });
+    await host.call("whenLoaded");
+    await host.call("evaluate", "document.getElementById('v').play()");
+    await Bun.sleep(400);
+    const busy = host.call("evaluate", "(() => { const end=Date.now()+2000; while(Date.now()<end); return true; })()");
+    await Bun.sleep(200);
+    const first = await host.composite("screenshot");
+    await Bun.sleep(600);
+    const second = await host.composite("screenshot");
+    expect(Bun.hash(second)).not.toBe(Bun.hash(first));
+    expect(await busy).toBe(true);
+    await host.call("evaluate", "document.getElementById('v').pause()");
+    const paused = await host.composite("screenshot");
+    await Bun.sleep(350);
+    expect(await host.composite("screenshot")).toBe(paused);
+    await host.call("evaluate", "document.getElementById('v').currentTime=5");
+    await Bun.sleep(250);
+    const sought = await host.composite("screenshot");
+    expect(Bun.hash(sought)).not.toBe(Bun.hash(paused));
+    await host.call("evaluate", "document.getElementById('v').play()");
+    await Bun.sleep(400);
+    const resumed = await host.composite("screenshot");
+    await Bun.sleep(400);
+    expect(Bun.hash(await host.composite("screenshot"))).not.toBe(Bun.hash(resumed));
+    await host.call("loadDocument", { url: "https://page.test/next", contentType: "text/html", source: '<body style="background:red">next</body>' });
+    const next = await host.composite("screenshot");
+    await Bun.sleep(300);
+    expect(await host.composite("screenshot")).toBe(next);
+  } finally { host.close(); }
+}, 30_000);
 let releaseStyles;
 let releaseScript;
 beforeAll(() => {

package/test/computed-style.test.js

@@ -27,6 +27,27 @@ test("computes the initial UA and inherited style subset", () => {
   window.happyDOM.abort();
 });
 
+test(":empty includes text nodes, but ignores comments and empty text nodes", () => {
+  const { document, window } = parseHTMLDocument('<span id="text">0</span><span id="space"> </span><span id="empty"><!--comment--></span>');
+  const styles = new StyleEngine().compute(document, ['span:empty { display:none }']);
+  expect(document.querySelector('#text').matches(':empty')).toBe(false);
+  expect(styles.get(document.querySelector('#text')).display).toBe('inline');
+  expect(styles.get(document.querySelector('#space')).display).toBe('inline');
+  expect(styles.get(document.querySelector('#empty')).display).toBe('none');
+  window.happyDOM.abort();
+});
+
+test("percentage root fonts set the basis for rem and descendant percentage fonts", () => {
+  const { document, window } = parseHTMLDocument(`<html style="font-size:62.5%"><body>
+    <div id="relative" style="font-size:1.4rem"><span id="child" style="font-size:150%">text</span></div>
+  </body></html>`);
+  const styles = new StyleEngine().compute(document);
+  expect(styles.get(document.documentElement).fontSize).toBe(10);
+  expect(styles.get(document.getElementById('relative')).fontSize).toBe(14);
+  expect(styles.get(document.getElementById('child')).fontSize).toBe(21);
+  window.happyDOM.abort();
+});
+
 test("inline declarations validate values and preserve important priority", () => {
   const { document, window } = parseHTMLDocument(`<div id="box" style="
     display: block; display: none !important; display: inline;

package/test/display-list.test.js

@@ -20,6 +20,20 @@ function displayListFor(html, css, resources = new WeakMap()) {
   return { document, window, tree, displayList: buildDisplayList(layout, tree) };
 }
 
+test("native video controls are opt-in and do not cover a site's own player UI", () => {
+  const { window, displayList } = displayListFor('<video></video><video controls></video>', 'video { width:100px; height:60px }');
+  expect(displayList.items.filter(item => item.op === 'drawVideo').map(item => item.controls)).toEqual([false, true]);
+  window.happyDOM.abort();
+});
+
+test("rounded overflow containers clip descendant media, including transformed clips", () => {
+  const { window, displayList } = displayListFor('<div><video></video></div>',
+    'div { width:100px;height:60px;overflow:hidden;border-radius:12px;transform:scale(2);transform-origin:0 0 } video {width:100px;height:60px}');
+  const video = displayList.items.find(item => item.op === 'drawVideo');
+  expect(video.roundedClips).toEqual([{rect:{x:0,y:0,width:200,height:120},radii:{x:24,y:24}}]);
+  window.happyDOM.abort();
+});
+
 test("paints box decorations in tree order before inline content", () => {
   const { window, displayList } = displayListFor(
     `<div class="card"><p>hi <code>x</code></p></div>`,

package/test/download.test.js

@@ -19,6 +19,8 @@ beforeAll(() => {
         + '<a id="attachment" href="/attachment">attachment</a>'
         + '<a id="data" href="data:text/plain,hello%20data" download="data.txt">data</a>'
         + '<a id="blob" download="blob.txt">blob</a>'
+        + '<a id="toc" href="#contents">contents</a><h2 id="contents">Contents</h2>'
+        + '<script>document.getElementById("toc").addEventListener("click", event => { event.preventDefault(); location.href = event.currentTarget.href; });</script>'
         + '<script>document.getElementById("blob").href = URL.createObjectURL(new Blob(["blob bytes"]));</script>',
       { headers: { "content-type": "text/html" } });
       if (path === "/plain") return new Response("original bytes", { headers: { "content-type": "text/plain" } });
@@ -74,6 +76,12 @@ test("clicked downloads save files and leave the current page in place", async (
     await click("#attachment");
     expect(readFileSync(join(dir, "photo.jpg"), "utf8")).toBe("photo bytes");
     expect(browser.context.resourceContent()?.url).toBe(`${origin}/links`);
+    expect(await browser.context.evaluate("[location.href, document.URL, document.baseURI, document.getElementById('toc').href]"))
+      .toEqual([`${origin}/links`, `${origin}/links`, `${origin}/links`, `${origin}/links#contents`]);
+    await click("#toc");
+    expect(await browser.context.evaluate("[location.href, document.URL]"))
+      .toEqual([`${origin}/links#contents`, `${origin}/links#contents`]);
+    expect(events.filter((item) => item.event === "willBegin")).toHaveLength(4);
     await click("#data");
     expect(readFileSync(join(dir, "data.txt"), "utf8")).toBe("hello data");
     await browser.context.evaluate("document.getElementById('blob').click()");

package/test/headless-shell.test.js

@@ -126,6 +126,8 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
     await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: demoKey.x + demoKey.width / 2,
       y: demoKey.y + demoKey.height - 15, button: "left", clickCount: 1 });
     expect(await view.evaluate("document.activeElement.id")).toBe("buninu-piano-input");
+    await view.cdp("Input.insertText", { text: "jkl JKL!" });
+    expect(await view.evaluate("document.activeElement.value")).toBe("");
     await view.resize(480, 240);
     await view.navigate(`http://127.0.0.1:${fixture.port}/`);
 
@@ -198,12 +200,32 @@ test("top-level shell exposes the parsed document through Bun.WebView", async ()
     await view.cdp("Input.dispatchMouseEvent", { type: "mousePressed", x: pianoRect.x + 10, y: pianoRect.y + 10, button: "left", clickCount: 1 });
     await view.cdp("Input.dispatchMouseEvent", { type: "mouseReleased", x: pianoRect.x + 10, y: pianoRect.y + 10, button: "left", clickCount: 1 });
     await view.cdp("Input.insertText", { text: "j" });
+    await view.cdp("Input.insertText", { text: "jk lJK!中" });
+    for (const key of ["j", "k", " "]) {
+      await view.cdp("Input.dispatchKeyEvent", { type: "rawKeyDown", key, autoRepeat: true });
+      await view.cdp("Input.dispatchKeyEvent", { type: "keyUp", key });
+    }
     await view.cdp("Input.dispatchKeyEvent", { type: "rawKeyDown", key: "k", code: "KeyK" });
     await view.cdp("Input.dispatchKeyEvent", { type: "keyUp", key: "k", code: "KeyK" });
+    for (const type of ["rawKeyDown", "char", "keyUp"]) {
+      for (const key of ["j", "k", "l"]) {
+        await view.cdp("Input.dispatchKeyEvent", { type, key, code: `Key${key.toUpperCase()}`, text: type === "char" ? key : undefined });
+      }
+    }
     expect(await view.evaluate("document.getElementById('buninu-piano-input').value")).toBe("");
     await view.navigate(`http://127.0.0.1:${fixture.port}/`);
 
     expect(await view.evaluate("scrollY")).toBe(0);
+    await view.evaluate(`window.spaceKeys=[];document.addEventListener('keydown',event=>{
+      if(event.keyCode===32){event.preventDefault();spaceKeys.push([event.keyCode,event.which]);}
+    });`);
+    for(let i=0;i<6;i++) {
+      for(const type of ['rawKeyDown','char','keyUp']) {
+        await view.cdp('Input.dispatchKeyEvent', {type,key:' ',code:'Space',windowsVirtualKeyCode:32,text:type==='char'?' ':undefined});
+      }
+    }
+    expect(await view.evaluate('spaceKeys')).toEqual(Array.from({length:6},()=>[32,32]));
+    expect(await view.evaluate('scrollY')).toBe(0);
     await view.cdp("Input.dispatchMouseEvent", {
       type: "mouseWheel",
       x: 100,

package/test/media-playback-events.test.js

@@ -0,0 +1,22 @@
+import { expect, test } from 'bun:test';
+import { playbackEvent } from '../lib/renderer/media-playback-events.js';
+
+test('playback notifications distinguish unpaused, advancing and starved states', () => {
+  const state = {playing:true}, events=[];
+  const dispatch=(_state,type)=>events.push(type);
+  for(const phase of ['play','playing','playing','waiting','waiting','playing','playing','pause','play','playing']) {
+    playbackEvent(state,phase,dispatch);
+  }
+  expect(events).toEqual(['play','playing','waiting','canplay','playing','pause','play','playing']);
+});
+
+test('pausing in canplay does not report playback resumed', () => {
+  const state={playing:true}, events=[];
+  const dispatch=(_state,type)=>{
+    events.push(type);
+    if(type==='canplay') {state.playing=false;playbackEvent(state,'pause',dispatch);}
+  };
+  playbackEvent(state,'waiting',dispatch);
+  playbackEvent(state,'playing',dispatch);
+  expect(events).toEqual(['waiting','canplay','pause']);
+});

package/test/page-scripts.test.js

@@ -226,6 +226,69 @@ test("direct eval preserves receivers of lexical calls and tagged templates", as
   ]);
 });
 
+test("pointer movement delivers trusted mouse events to page controls", async () => {
+  await load(`<div id="control" style="width:100px;height:100px;background:red"></div><script>
+    window.moves = [];
+    for (const type of ['mouseenter','mousemove','mouseleave']) {
+      document.querySelector('#control').addEventListener(type, e => moves.push([e.type,e.isTrusted]));
+    }
+  </script>`);
+  await renderer.call('move', 30, 30);
+  await renderer.call('move', 150, 150);
+  expect(await evaluate('moves')).toEqual([['mouseenter',true],['mousemove',true],['mouseleave',true]]);
+});
+
+test("assigning element.style forwards to cssText without replacing its identity", async () => {
+  await load(`<div id="target"></div><script>
+    const target = document.querySelector('#target'), original = target.style;
+    target.style = 'width: 73px; color: red';
+    window.styleResult = [target.style === original, target.style.width, target.style.color];
+    target.style = '';
+    styleResult.push(target.style.cssText);
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(styleResult)"))).toEqual([true, '73px', 'red', '']);
+});
+
+test("History methods borrowed from an iframe operate on the receiving history", async () => {
+  await load(`<iframe></iframe><script>
+    const frame = document.querySelector('iframe').contentWindow;
+    frame.History.prototype.replaceState.call(history, { step: 1 }, '', '/watch?v=example');
+    frame.History.prototype.pushState.call(history, { step: 2 }, '', '#comments');
+    window.historyResult = [location.href, history.state.step, history.length, frame.location.href];
+    try { frame.History.prototype.replaceState.call(history, {}, '', 'https://other.test/'); }
+    catch (e) { window.historyOriginError = e.name; }
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(historyResult)"))).toEqual([
+    'https://page.test/watch?v=example#comments', 2, 2, 'about:blank',
+  ]);
+  expect(await evaluate("historyOriginError")).toBe('SecurityError');
+});
+
+test("custom elements receive observed attribute reactions and can enable deferred initialization", async () => {
+  await load(`<script>
+    window.reactions = [];
+    window.observedReads = 0;
+    class DeferredPanel extends HTMLElement {
+      static get observedAttributes() { observedReads++; return ['disable-upgrade']; }
+      attributeChangedCallback(name, before, after) {
+        reactions.push([name, before, after, this === document.querySelector('deferred-panel')]);
+        if (after === null) this.textContent = 'ready';
+      }
+    }
+    customElements.define('deferred-panel', DeferredPanel);
+    const panel = document.createElement('deferred-panel');
+    document.body.appendChild(panel);
+    panel.setAttribute('disable-upgrade', '');
+    panel.setAttribute('unobserved', 'value');
+    panel.removeAttribute('disable-upgrade');
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(reactions)"))).toEqual([
+    ['disable-upgrade', null, '', true], ['disable-upgrade', '', null, true],
+  ]);
+  expect(await evaluate("observedReads")).toBe(1);
+  expect(await evaluate("document.querySelector('deferred-panel').textContent")).toBe('ready');
+});
+
 test("documents and shadow roots have adoptedStyleSheets, which page patches of Element.prototype may extend", async () => {
   await load(`<div id="host"></div><script>
     // As a popover polyfill does: every new shadow root adopts its sheet.
@@ -354,6 +417,24 @@ test("form.elements is a live named collection of form controls", async () => {
   expect(await evaluate("document.getElementById('form').elements.length")).toBe(3);
 });
 
+test("uncommitted links do not change the base used by subsequent fragment links", async () => {
+  for (const href of ["/archive.zip", "/LICENSE"]) {
+    for (const scripted of [false, true]) {
+      await load(`<a id="away" href="${href}">away</a><a id="toc" href="#contents">TOC</a>
+        <h2 id="contents">Contents</h2>`);
+      const before = await evaluate("[document.URL, document.baseURI, location.href, document.getElementById('toc').href]");
+      if (scripted) await evaluate("document.getElementById('away').click()");
+      else {
+        const point = await evaluate("(() => { const r=document.getElementById('away').getBoundingClientRect(); return [r.x+r.width/2,r.y+r.height/2]; })()");
+        expect(await renderer.call("click", ...point)).toBe(`https://page.test${href}`);
+      }
+      expect(await evaluate("[document.URL, document.baseURI, location.href, document.getElementById('toc').href]")).toEqual(before);
+      await evaluate("document.getElementById('toc').click()");
+      expect(await evaluate("[location.href, document.URL, document.baseURI]")).toEqual(Array(3).fill("https://page.test/#contents"));
+    }
+  }
+});
+
 test("constructable CSSStyleSheet supports feature checks and basic rule mutation", async () => {
   await load(`<p>cssom</p>`);
   expect(await evaluate(`(async () => {
@@ -391,6 +472,23 @@ test("document.elementFromPoint finds the topmost element painted there", async
     document.elementFromPoint(300, 30)?.id, document.elementFromPoint(-1, 5)]`)).toEqual(["text", "over", "under", null]);
 });
 
+test("rounded overflow clips a child's pixels rather than only the parent's background", async () => {
+  await load('<div style="width:40px;height:40px;border-radius:20px;overflow:hidden"><div style="width:40px;height:40px;background:red"></div></div>');
+  const clipped = await renderer.call("screenshot");
+  const { default: init } = await import('../usr/lib/canvaskit/canvaskit.js');
+  const kit = await init({ locateFile: name => new URL(`../usr/lib/canvaskit/${name}`, import.meta.url).pathname });
+  const image = kit.MakeImageFromEncoded(Buffer.from(clipped, 'base64'));
+  try {
+    const pixel = (x, y) => Array.from(image.readPixels(x, y, {
+      width:1, height:1, colorType:kit.ColorType.RGBA_8888, alphaType:kit.AlphaType.Unpremul, colorSpace:kit.ColorSpace.SRGB,
+    })).slice(0, 3);
+    expect(pixel(0, 0)).toEqual([255, 255, 255]);
+    expect(pixel(20, 20)).toEqual([255, 0, 0]);
+  } finally { image.delete(); }
+  await load('<div style="width:40px;height:40px;background:red"></div>');
+  expect(await renderer.call("screenshot")).not.toBe(clipped);
+});
+
 test("scripts change the DOM and the next screenshot shows it", async () => {
   await load(`<div id="box" style="height:20px"></div>
     <script>document.getElementById('box').style.background = 'rgb(255, 0, 0)';
@@ -577,6 +675,40 @@ test("CSS.escape produces selectors for leading digits and punctuation", async (
   expect(await evaluate("CSS.escape('1:a')")).toBe("\\31 \\:a");
 });
 
+test("legacy keyboard shortcuts cancel space scrolling on every press", async () => {
+  await load(`<div tabindex="0" id="player" style="height:100px"></div><div style="height:2000px"></div>
+    <script>var keys=[],player=document.getElementById('player');player.focus();player.addEventListener('keydown',e=>{
+      keys.push([e.key,e.code,e.keyCode,e.which,e.isTrusted]);if(e.keyCode===32)e.preventDefault();
+    });</script>`);
+  for (let i=0;i<6;i++) await renderer.call('press',' ',{code:'Space',windowsVirtualKeyCode:32});
+  expect(await evaluate('keys')).toEqual(Array.from({length:6},()=>[' ','Space',32,32,true]));
+  expect(await renderer.call('scrollOffset')).toEqual({x:0,y:0});
+  await evaluate('player.blur()');
+  await renderer.call('press',' ',{code:'Space'});
+  expect((await renderer.call('scrollOffset')).y).toBeGreaterThan(0);
+});
+
+test("site media controls can repeatedly toggle using playing/pause events and legacy space keys", async () => {
+  await load(`<div id="player" tabindex="0" style="height:100px"><video id="v" src="/long-video.mp4" style="width:100px;height:80px"></video></div><div style="height:2000px"></div>
+    <script>var state='paused',events=[],player=document.getElementById('player'),v=document.getElementById('v');
+    for(const type of ['play','playing','pause'])v.addEventListener(type,()=>{events.push(type);if(type!=='play')state=type;});
+    function toggle(){if(state==='playing')v.pause();else v.play();}
+    player.addEventListener('click',toggle);
+    player.addEventListener('keydown',e=>{if(e.keyCode===32){e.preventDefault();toggle();}});
+    player.focus();</script>`);
+  for (const input of ['click','press']) {
+    for(let i=0;i<6;i++) {
+      if(input==='click')await renderer.call('click',40,40);
+      else await renderer.call('press',' ',{code:'Space'});
+      const expected=i%2===0?'playing':'pause';
+      expect(await waitFor(`state===${JSON.stringify(expected)}`,5000)).toBe(true);
+      expect(await evaluate('v.paused')).toBe(i%2===1);
+    }
+  }
+  expect(await renderer.call('scrollOffset')).toEqual({x:0,y:0});
+  expect(await evaluate('events.slice(0,3)')).toEqual(['play','playing','pause']);
+});
+
 test("a video plays frames and pauses when clicked", async () => {
   await load(`<video src="/long-video.mp4" controls width="160" height="120"></video>`);
   const bounds = await evaluate("document.querySelector('video').getBoundingClientRect().toJSON()");
@@ -1707,7 +1839,8 @@ test("initial MSE playback waits briefly for a separate audio segment", async ()
   await load(`<video id="v" width="160" height="120"></video>`);
   await evaluate(`(() => {
     const video = document.getElementById("v");
-    video.addEventListener("play", () => { window.startedAt = performance.now(); });
+    // play is the unpause request; playing is when buffered media can advance.
+    video.addEventListener("playing", () => { window.startedAt = performance.now(); }, { once:true });
     const source = new MediaSource();
     video.src = URL.createObjectURL(source);
     source.addEventListener("sourceopen", async () => {
@@ -1861,6 +1994,31 @@ test("a click inside an iframe goes to the element under it in the frame's docum
   expect(await evaluate(`document.getElementById("frame").contentWindow.clicked`)).toEqual([[20, 20]]);
 });
 
+test("dynamic linked stylesheets fire load after their rules become available", async () => {
+  await load(`<div id="target"></div><script>
+    window.sheetLoaded = false;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = '/slow.css';
+    link.onload = () => { window.sheetLoaded = getComputedStyle(document.body).color; };
+    document.head.appendChild(link);
+  </script>`);
+  for (let i = 0; i < 60 && await evaluate('sheetLoaded') === false; i++) await Bun.sleep(25);
+  expect(await evaluate('sheetLoaded')).toBe('rgba(255, 0, 0, 1)');
+});
+
+test("decoded dynamic images report natural dimensions and fire load", async () => {
+  await load(`<script>
+    window.imageLoaded = false;
+    const img = document.createElement('img');
+    img.onload = () => { window.imageLoaded = [img.complete, img.naturalWidth, img.naturalHeight]; };
+    img.src = '/red-2x3.png';
+    document.body.appendChild(img);
+  </script>`);
+  for (let i = 0; i < 60 && await evaluate('imageLoaded') === false; i++) await Bun.sleep(25);
+  expect(await evaluate('imageLoaded')).toEqual([true, 2, 3]);
+});
+
 test("images a script inserts and measures at once still load", async () => {
   await load(`<div id="host"></div><script>
     const img = document.createElement("img");