buninu-browser 0.2.1 → 0.2.2

package/patches/happy-dom/README.md

@@ -21,6 +21,8 @@ git -C vendor/happy-dom apply --check ../../patches/happy-dom/0004-insert-adjace
 git -C vendor/happy-dom apply ../../patches/happy-dom/0004-insert-adjacent-html-in-order.patch
 git -C vendor/happy-dom apply --check ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
 git -C vendor/happy-dom apply ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
+git -C vendor/happy-dom apply --check ../../patches/happy-dom/0006-parse-css-escapes-in-selectors.patch
+git -C vendor/happy-dom apply ../../patches/happy-dom/0006-parse-css-escapes-in-selectors.patch
 ```
 
 For the already-patched vendored tree, verify that the recorded patch can be
@@ -32,6 +34,7 @@ git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0002-use
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0003-defer-script-events-to-renderer.patch
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0004-insert-adjacent-html-in-order.patch
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0005-invalidate-matches-on-structure-changes.patch
+git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0006-parse-css-escapes-in-selectors.patch
 ```
 
 ## Patch manifest
@@ -43,6 +46,29 @@ git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0005-inv
 | `0003-defer-script-events-to-renderer.patch` | `packages/happy-dom/src/nodes/html-script-element/HTMLScriptElement.ts` | Suppress Happy DOM's synthetic load/error event when its own script loader is disabled; the renderer fetches and executes scripts and dispatches the real outcome itself. | `bun test test/page-scripts.test.js` (`page-inserted scripts run; innerHTML scripts do not; on* handlers fire`) |
 | `0004-insert-adjacent-html-in-order.patch` | `packages/happy-dom/src/nodes/element/Element.ts` | `insertAdjacentHTML` inserted the parsed nodes one at a time, which reversed their order at `afterbegin` and `afterend`; insert the parsed fragment as a whole. | `bun test test/page-scripts.test.js` (`insertAdjacentHTML keeps the order of the inserted nodes at every position`) |
 | `0005-invalidate-matches-on-structure-changes.patch` | `packages/happy-dom/src/query-selector/QuerySelector.ts` | `Element.matches()` cached results that were invalidated only by changes to the elements the matcher visited, so structural pseudo-classes and sibling combinators stayed stale after a child list change, and `:has()` after any change in the subtree; register the parent of every visited element, and do not cache `:has()` matches. | `bun test test/happy-dom-matches.test.js` |
+| `0006-parse-css-escapes-in-selectors.patch` | `packages/happy-dom/src/query-selector/SelectorParser.ts` | The group scan treated a comma, space, quote, or parenthesis that belonged to a CSS escape (`\,`, `\31 `, `\"`, `\(`) as a combinator or grouping character, and a type selector stopped at the first backslash, so `\64 iv` and `my\-el` did not parse. Escapes are consumed first (CSS Syntax §4.3.7) and a type selector is unescaped with the existing `cssUnescape` before it is uppercased. Identifiers, classes, and attribute values already accepted a backslash; this patch does not change how those are decoded. | `bun test test/page-scripts.test.js -t "selectors with CSS escapes"` |
+
+### `0006` against upstream `SelectorParser.ts`
+
+Upstream `v20.14.5` splits a selector with `SELECTOR_GROUP_REGEXP`. Its groups
+are a combinator (` `, `,`, `+`, `>`, `~`) and a grouping character (`(`, `)`,
+`[`, `]`, `"` or `'`). A backslash is not special there, so the character after
+it is what the scan sees. The type-selector alternative is
+`[a-zA-Z0-9\u00A0-\uFFFF-]+`, which also stops at `\`.
+
+| Selector | Upstream | With `0006` |
+|---|---|---|
+| `style\=\"\"` | each `"` changes the quote depth, then the type selector stops at `\`, so the selector is rejected | both escapes stay in one type selector; `cssUnescape` yields `style=""` |
+| `.x\,y > span` | the comma starts another selector in the list | `\,` stays in the class; `>` is still the child combinator |
+| `\64 iv` | the space after the hex escape is a descendant combinator, and `\` is not a type-selector character | `\64 ` is one escape (U+0064), so the type is `div` |
+| `my\-el` | the type selector matches `my` and then fails on `\-el` | the type is `my-el` |
+
+The patched group expression matches an escape first
+(`\[0-9a-fA-F]{1,6}\s?` or `\[\s\S]`) and skips it. Combinators and grouping
+characters move to groups 2 and 3. A type selector may contain the same
+escapes and is passed through `cssUnescape`, the helper upstream already uses
+for attribute values, before `toUpperCase()`. Classes and ids still drop a
+backslash with `replace(/\\/g, '')`; hex escapes in those are unchanged.
 
 Keep each local Happy DOM change in a separate numbered patch and add it to
 this table with its reason and focused test. When updating Happy DOM, regenerate

package/patches/ses/0002-embedder-native-functions-source-text-sloppy-code.patch

@@ -0,0 +1,106 @@
+diff --git a/dist/ses.mjs b/dist/ses.mjs
+index 8bda46b..d7b18ff 100644
+--- a/dist/ses.mjs
++++ b/dist/ses.mjs
+@@ -9568,7 +9568,7 @@ function buildOptimizer(constants, name) {
+             ${globalObjectOptimizer}
+             ${moduleLexicalOptimizer}
+             return function() {
+-              'use strict';
++              ${context.sloppyCode ? '' : "'use strict';"}
+               return eval(arguments[0]);
+             };
+           }
+@@ -9611,6 +9611,7 @@ const { Fail } = assert;
+   moduleLexicals = {},
+   globalTransforms = [],
+   sloppyGlobalsMode = false,
++  sloppyCode = false,
+ }) => {
+   const scopeTerminator = sloppyGlobalsMode
+     ? createSloppyGlobalsScopeTerminator(globalObject)
+@@ -9623,6 +9624,7 @@ const { Fail } = assert;
+     moduleLexicals,
+     globalObject,
+     scopeTerminator,
++    sloppyCode,
+   });
+ 
+   // Defer creating the actual evaluator to first use.
+@@ -9715,6 +9717,14 @@ const nativeSuffix = ') { [native code] }';
+ // use this top level state so that multiple calls to `tameFunctionToString` are
+ // idempotent, rather than creating redundant indirections.
+ let markVirtualizedNativeFunction;
++let sourceTextTransform;
++// Taken (and deleted) by the embedder, like the native-function marker.
++Object.defineProperty(globalThis, Symbol.for('ses.setFunctionSourceTextTransform'), {
++  value: transform => {
++    sourceTextTransform = transform;
++  },
++  configurable: true,
++});
+ 
+ /**
+  * Replace `Function.prototype.toString` with one that recognizes
+@@ -9726,7 +9736,10 @@ let markVirtualizedNativeFunction;
+ 
+     const tamingMethods = {
+       toString() {
+-        const str = functionToString(this);
++        let str = functionToString(this);
++        // The embedder may map the text of source it rewrote back to the
++        // text the page wrote (see the registered symbol below).
++        if (sourceTextTransform !== undefined) str = sourceTextTransform(str);
+         if (
+           stringEndsWith(str, nativeSuffix) ||
+           !weaksetHas(virtualizedNativeFunctions, this)
+@@ -9744,6 +9757,8 @@ let markVirtualizedNativeFunction;
+     markVirtualizedNativeFunction = freeze(func =>
+       weaksetAdd(virtualizedNativeFunctions, func),
+     );
++    // Function.prototype.toString is itself a built-in function.
++    markVirtualizedNativeFunction(tamingMethods.toString);
+   }
+   return markVirtualizedNativeFunction;
+ };$h͏_once.tameFunctionToString(tameFunctionToString);
+@@ -12523,12 +12538,15 @@ const { quote: q } = assert;
+ 
+ 
+        const provideCompartmentEvaluator = (compartmentFields, options) => {
+-  const { sloppyGlobalsMode = false, __moduleShimLexicals__ = undefined } =
+-    options;
++  const {
++    sloppyGlobalsMode = false,
++    __moduleShimLexicals__ = undefined,
++    __sloppyCode__ = false,
++  } = options;
+ 
+   let safeEvaluate;
+ 
+-  if (__moduleShimLexicals__ === undefined && !sloppyGlobalsMode) {
++  if (__moduleShimLexicals__ === undefined && !sloppyGlobalsMode && !__sloppyCode__) {
+     ({ safeEvaluate } = compartmentFields);
+   } else {
+     // The scope proxy or global lexicals are different from the
+@@ -12560,6 +12578,7 @@ const { quote: q } = assert;
+       moduleLexicals,
+       globalTransforms,
+       sloppyGlobalsMode,
++      sloppyCode: __sloppyCode__,
+     }));
+   }
+ 
+@@ -15138,6 +15157,13 @@ globalThis.repairIntrinsics = options => {
+ 
+ const markVirtualizedNativeFunction = tameFunctionToString();
+ 
++// The embedder takes this once (and deletes it) to present its own
++// host-implemented Web APIs as built-in functions, as browsers do.
++Object.defineProperty(globalThis, Symbol.for('ses.markVirtualizedNativeFunction'), {
++  value: markVirtualizedNativeFunction,
++  configurable: true,
++});
++
+ const muteReporter = chooseReporter('none');
+ 
+ // @ts-ignore Compartment is definitely on globalThis.

package/patches/ses/0003-cache-sloppy-evaluators.patch

@@ -0,0 +1,47 @@
+diff --git a/dist/ses.mjs b/dist/ses.mjs
+index d7b18ff..31d23ad 100644
+--- a/dist/ses.mjs
++++ b/dist/ses.mjs
+@@ -12537,7 +12537,13 @@ const { quote: q } = assert;
+ 
+ 
+ 
+-       const provideCompartmentEvaluator = (compartmentFields, options) => {
++       // Evaluators for sloppyGlobalsMode / __sloppyCode__, one per compartment and
++// combination: building one scans the global object and compiles a new
++// evaluator function, which made every such evaluate() call cost hundreds of
++// microseconds.
++const sloppyEvaluators = new WeakMap();
++
++const provideCompartmentEvaluator = (compartmentFields, options) => {
+   const {
+     sloppyGlobalsMode = false,
+     __moduleShimLexicals__ = undefined,
+@@ -12546,6 +12552,13 @@ const { quote: q } = assert;
+ 
+   let safeEvaluate;
+ 
++  const cacheKey = __moduleShimLexicals__ === undefined
++    ? `${Boolean(sloppyGlobalsMode)}:${Boolean(__sloppyCode__)}` : undefined;
++  let cached = sloppyEvaluators.get(compartmentFields);
++  if (cacheKey !== undefined && cached && cached.has(cacheKey)) {
++    return { safeEvaluate: cached.get(cacheKey) };
++  }
++
+   if (__moduleShimLexicals__ === undefined && !sloppyGlobalsMode && !__sloppyCode__) {
+     ({ safeEvaluate } = compartmentFields);
+   } else {
+@@ -12580,6 +12593,13 @@ const { quote: q } = assert;
+       sloppyGlobalsMode,
+       sloppyCode: __sloppyCode__,
+     }));
++    if (cacheKey !== undefined) {
++      if (!cached) {
++        cached = new Map();
++        sloppyEvaluators.set(compartmentFields, cached);
++      }
++      cached.set(cacheKey, safeEvaluate);
++    }
+   }
+ 
+   return { safeEvaluate };

package/patches/ses/README.md

@@ -6,11 +6,15 @@ relative to `vendor/ses`.
 For the already-patched tree, verify the recorded patch without changing files:
 
 ```sh
+git -C vendor/ses apply --reverse --check ../../patches/ses/0003-cache-sloppy-evaluators.patch
+git -C vendor/ses apply --reverse --check ../../patches/ses/0002-embedder-native-functions-source-text-sloppy-code.patch
 git -C vendor/ses apply --reverse --check ../../patches/ses/0001-allow-regexp-own-tostring.patch
 ```
 
 | Patch | Modified file | Reason | Verification |
 |---|---|---|---|
 | `0001-allow-regexp-own-tostring.patch` | `dist/ses.mjs` | Allow a page script to assign an own `toString` method to a `RegExp` instance despite the frozen prototype. This does not make the prototype writable. | `bun test test/page-scripts.test.js` |
+| `0002-embedder-native-functions-source-text-sloppy-code.patch` | `dist/ses.mjs` | Three embedder hooks for browser fidelity: (1) the toString taming's `markVirtualizedNativeFunction` is left on the host global under `Symbol.for("ses.markVirtualizedNativeFunction")` (taken and deleted by `lib/renderer/native-functions.js`) so Web APIs print as `[native code]`, and the taming's own `toString` is marked native; (2) a `Symbol.for("ses.setFunctionSourceTextTransform")` setter lets the embedder map rewritten source text back to the page's text in `Function.prototype.toString`; (3) an `__sloppyCode__` evaluate option drops the evaluator's `'use strict'`, so classic scripts run as sloppy-mode code. Page code only gets (3) for sources the rewriter parsed, which routes every sloppy `this` through a helper that never yields the host global. | `bun test test/page-scripts.test.js test/script-rewrite.test.js` |
+| `0003-cache-sloppy-evaluators.patch` | `dist/ses.mjs` | `evaluate()` with `sloppyGlobalsMode` or `__sloppyCode__` built a new safe evaluator on every call (scanning the global object for constants and compiling a new evaluator function), which made each page `eval`, `Function` and classic script cost hundreds of microseconds. The evaluator is now kept per compartment and option combination; it only binds non-writable, non-configurable globals as constants, which cannot change. `__moduleShimLexicals__` evaluations are not cached. | `bun test test/page-scripts.test.js test/script-rewrite.test.js` |
 
 Keep future local SES changes in numbered patches and update this manifest.

package/test/canvas-2d.test.js

@@ -0,0 +1,55 @@
+import { beforeAll, expect, test } from "bun:test";
+import CanvasKitInit from "../usr/lib/canvaskit/canvaskit.js";
+import { canvasContext, resetCanvas, setCanvasKit } from "../lib/renderer/canvas-2d.js";
+
+beforeAll(async () => {
+  const wasmBinary = await Bun.file(new URL("../usr/lib/canvaskit/canvaskit.wasm", import.meta.url)).arrayBuffer();
+  setCanvasKit(await CanvasKitInit({ wasmBinary }));
+});
+
+function canvas(width = 1, height = 1) {
+  return { width, height };
+}
+
+/**
+ * The probe web-animations-next-lite uses to accept a CSS colour.
+ * CanvasKit turns a string it cannot parse into black, so the two reads match
+ * and the sample is opaque black. A string it can parse reads back the same
+ * way both times.
+ */
+function sample(context, color) {
+  context.fillStyle = "#000";
+  context.fillStyle = color;
+  const first = context.fillStyle;
+  context.fillStyle = "#fff";
+  context.fillStyle = color;
+  if (first !== context.fillStyle) return null;
+  context.fillRect(0, 0, 1, 1);
+  const data = [...context.getImageData(0, 0, 1, 1).data];
+  context.clearRect(0, 0, 1, 1);
+  return data;
+}
+
+test("a colour reads back stably, and one CanvasKit cannot parse is black", () => {
+  const context = canvasContext(canvas(), "2d");
+  expect(context.fillStyle).toBe("#000000");
+  expect(sample(context, "not-a-color")).toEqual([0, 0, 0, 255]);
+  expect(sample(context, "red")).toEqual([255, 0, 0, 255]);
+  expect(sample(context, "rgba(1, 2, 3, 0.5)")).toEqual([1, 2, 3, 128]);
+  expect(context.getImageData(0, 0, 1, 1).data.length).toBe(4);
+  expect(context.getImageData(0, 0, 1, 1).data[3]).toBe(0);
+  expect(canvasContext(canvas(), "webgl")).toBeNull();
+});
+
+test("the same canvas keeps one context, and changing width clears it", () => {
+  const node = canvas(2, 2);
+  const context = canvasContext(node, "2d");
+  expect(canvasContext(node, "2d")).toBe(context);
+  context.fillStyle = "blue";
+  context.fillRect(0, 0, 2, 2);
+  expect(context.getImageData(1, 1, 1, 1).data[2]).toBe(255);
+  node.width = 1;
+  resetCanvas(node);
+  expect(context.fillStyle).toBe("#000000");
+  expect([...context.getImageData(0, 0, 1, 1).data]).toEqual([0, 0, 0, 0]);
+});

package/test/compositor.test.js

@@ -106,7 +106,9 @@ test("a preview is shown while stylesheets load, then the styled page, then scri
   try {
     await context.resize(320, 200, 1);
     await context.navigate(`http://127.0.0.1:${server.port}/`);
-    // navigate returned at the first paint: the stylesheet is still pending.
+    // navigate returned at the first paint: the stylesheet is still pending
+    // (held by the server; under load its request may only now be arriving).
+    for (const deadline = Date.now() + 10_000; !releaseStyles && Date.now() < deadline;) await Bun.sleep(20);
     expect(releaseStyles).toBeFunction();
     expect(events).toEqual([]);
     expect(context.lifecycleState()).toEqual([]);

package/test/computed-style.test.js

@@ -1,7 +1,9 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { RenderTreeBuilder, renderTreeText } from "../lib/render-tree/index.js";
-import { computeElementStyle, matchSelectors, parseDeclarations, StyleEngine } from "../lib/style/computed-style.js";
+import {
+  absolutizeStyleSheetUrls, computeElementStyle, matchSelectors, parseDeclarations, StyleEngine,
+} from "../lib/style/computed-style.js";
 
 test("computes the initial UA and inherited style subset", () => {
   const { document, window } = parseHTMLDocument(`<body>
@@ -544,3 +546,38 @@ test("incremental restyles of changed subtrees and added sheets equal a full res
   same("added sheet");
   window.happyDOM.abort();
 });
+
+test("background shorthand and longhands keep image layers with their position, size and repeat", () => {
+  const { document, window } = parseHTMLDocument(`<body>
+    <div id="short" style="background: url(icon.png) no-repeat center / 32px 16px, linear-gradient(red, blue) #fff"></div>
+    <div id="long" style="background: url('a.png'); background-size: cover; background-position: right 4px top; background-repeat: repeat-x"></div>
+    <div id="color" style="background: url(x.png); background: #000"></div>
+    <div id="invalid" style="background: url(x.png) bogus-token"></div>
+  </body>`);
+  const engine = new StyleEngine().compute(document);
+  const style = (id) => engine.get(document.getElementById(id));
+  expect(style("short")).toMatchObject({
+    backgroundImage: "url(icon.png), linear-gradient(red, blue)",
+    backgroundPosition: "center, 0% 0%",
+    backgroundSize: "32px 16px, auto",
+    backgroundRepeat: "no-repeat, repeat",
+    backgroundColor: "rgba(255, 255, 255, 1)",
+  });
+  expect(style("long")).toMatchObject({
+    backgroundImage: "url('a.png')", backgroundSize: "cover", backgroundPosition: "right 4px top", backgroundRepeat: "repeat-x",
+  });
+  // A later shorthand resets the image layers.
+  expect(style("color")).toMatchObject({ backgroundImage: null, backgroundColor: "rgba(0, 0, 0, 1)" });
+  // An invalid shorthand is dropped as a whole.
+  expect(style("invalid")).toMatchObject({ backgroundImage: null, backgroundColor: "rgba(0, 0, 0, 0)" });
+  window.happyDOM.abort();
+});
+
+test("a linked style sheet's url()s resolve against the sheet", () => {
+  expect(absolutizeStyleSheetUrls(
+    `a { background: url(img/a.png) } b { background: url("../b.png") } c { background: url(data:image/png;base64,AA) }
+     d { background: url(https://cdn.test/d.png) } e { mask: url(#m) }`,
+    "https://site.test/css/main.css",
+  )).toBe(`a { background: url(https://site.test/css/img/a.png) } b { background: url("https://site.test/b.png") } c { background: url(data:image/png;base64,AA) }
+     d { background: url(https://cdn.test/d.png) } e { mask: url(#m) }`);
+});

package/test/display-list.test.js

@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 import { layoutText } from "../lib/layout/text-layout.js";
-import { buildDisplayList, visibleItems } from "../lib/paint/display-list.js";
+import { buildDisplayList, hitTarget, visibleItems } from "../lib/paint/display-list.js";
 import { RenderTreeBuilder } from "../lib/render-tree/index.js";
 import { StyleEngine } from "../lib/style/computed-style.js";
 
@@ -126,3 +126,76 @@ test("visibility, opacity and overflow/clip clipping apply to descendants", () =
   window.happyDOM.abort();
 });
 
+
+function backgroundList(html, css, resources) {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">${html}</body>`);
+  const styles = new StyleEngine().compute(document, [css]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0, y: 0, width: 200, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const displayList = buildDisplayList(layout, tree, null, (url) => resources[url] ?? null);
+  window.happyDOM.abort();
+  return displayList;
+}
+
+test("background images are sized, positioned and repeated in the padding box, painted in the border box", () => {
+  const icon = { width: 48, height: 24, image: {} };
+  const items = backgroundList(
+    `<div class="a"></div><div class="b"></div><div class="c"></div><div class="missing"></div>`,
+    `div { height:60px; width:100px }
+     .a { background: url(icon.png) no-repeat center / 32px; border: 2px solid black }
+     .b { background-image: url(icon.png); background-size: cover; background-repeat: repeat-x }
+     .c { background: url(icon.png) no-repeat right 5px bottom 10px }
+     .missing { background: url(none.png) }`,
+    { "icon.png": icon },
+  ).items.filter((item) => item.op === "drawBackgroundImage");
+  // The image that has not arrived paints nothing.
+  expect(items).toHaveLength(3);
+  const [a, b, c] = items;
+  // 32px wide keeps the 2:1 ratio, centered in the 100x60 padding box inside the border.
+  expect(a).toMatchObject({ tile: { x: 2 + 34, y: 2 + 22, width: 32, height: 16 }, repeatX: false, repeatY: false });
+  expect(a.bounds).toEqual({ x: 36, y: 24, width: 32, height: 16 });
+  // cover: scaled to fill both sides; repeat-x spans the box horizontally only.
+  expect(b).toMatchObject({ tile: { x: 0, y: 64, width: 120, height: 60 }, repeatX: true, repeatY: false });
+  expect(b.bounds).toEqual({ x: 0, y: 64, width: 100, height: 60 });
+  // Edge offsets: 5px from the right, 10px from the bottom.
+  expect(c.tile).toEqual({ x: 100 - 5 - 48, y: 124 + 60 - 10 - 24, width: 48, height: 24 });
+});
+
+test("transform: scale paints and hit-tests a box and its contents about its origin", () => {
+  const displayList = backgroundList(
+    `<div class="tile"><span>x</span></div>`,
+    `.tile { width:100px; height:100px; background:#123; transform: scale(.5); overflow: hidden }`,
+    {},
+  );
+  const fill = displayList.items.find((item) => item.op === "fillRect");
+  expect(fill.transform).toEqual({ a: 0.5, d: 0.5, e: 25, f: 25 });
+  expect(fill.bounds).toEqual({ x: 25, y: 25, width: 50, height: 50 });
+  // Its overflow clip shrinks with it.
+  const text = displayList.items.find((item) => item.op === "drawText");
+  expect(text.clipRect).toEqual({ x: 25, y: 25, width: 50, height: 50 });
+  expect(hitTarget(displayList, 10, 10, { x: 0, y: 0 })).not.toBe(fill.nodeId);
+  expect(hitTarget(displayList, 30, 30, { x: 0, y: 0 })).toBe(fill.nodeId);
+});
+
+test("a scroll container moves its content by its scroll offset and reports how far the content reaches", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0"><div id="box"><p>a</p><p>b</p><p>c</p></div></body>`);
+  const styles = new StyleEngine().compute(document, [`#box { height:40px; overflow:auto; background:#123 } p { margin:0; height:20px }`]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0, y: 0, width: 200, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }),
+  });
+  const box = document.getElementById("box");
+  const displayList = buildDisplayList(layout, tree, null, null, (element) => element === box ? { x: 0, y: 15 } : null);
+  window.happyDOM.abort();
+  const background = displayList.items.find((item) => item.op === "fillRect");
+  // The container itself stays; its text moves up by the offset, clipped to it.
+  expect(background.transform).toBeUndefined();
+  const second = displayList.items.find((item) => item.op === "drawText" && item.text === "b");
+  expect(second.transform).toEqual({ a: 1, d: 1, e: 0, f: -15 });
+  expect(second.clipRect).toEqual({ x: 0, y: 0, width: 200, height: 40 });
+  const boxId = [...tree.nodesById.values()].find((node) => node.domNode === box).id;
+  expect(displayList.scrollers.get(boxId)).toMatchObject({ bottom: 60 });
+  expect(hitTarget(displayList, 5, 10, { x: 0, y: 0 })).toBe(second.nodeId);
+});

package/test/download.test.js

@@ -151,6 +151,41 @@ test("CDP Page.getResourceContent returns the bytes base64-encoded", async () =>
   }
 });
 
+test("CDP downloads the committed document after a navigation outside CDP", async () => {
+  const { CdpServer } = await import("../lib/cdp-server.js");
+  const browser = await createBrowser({ spareRenderer: false });
+  const cdp = CdpServer.create(browser.context).listen(0, "127.0.0.1");
+  let socket;
+  try {
+    const target = await (await fetch(`http://127.0.0.1:${cdp.port}/json/new?about:blank`, { method: "PUT" })).json();
+    socket = new WebSocket(target.webSocketDebuggerUrl);
+    await new Promise(resolve => socket.addEventListener("open", resolve, { once: true }));
+    let nextId = 0;
+    const call = (method, params = {}) => new Promise(resolve => {
+      const id = ++nextId;
+      const listener = ({ data }) => {
+        const message = JSON.parse(data);
+        if (message.id !== id) return;
+        socket.removeEventListener("message", listener);
+        resolve(message);
+      };
+      socket.addEventListener("message", listener);
+      socket.send(JSON.stringify({ id, method, params }));
+    });
+    await browser.context.navigate(`http://127.0.0.1:${server.port}/start`);
+    const { result: { frameTree } } = await call("Page.getFrameTree");
+    expect(frameTree.frame.url).toBe(`http://127.0.0.1:${server.port}/page`);
+    expect(frameTree.frame.mimeType).toBe("text/html");
+    const result = await call("Page.getResourceContent", { frameId: frameTree.frame.id, url: frameTree.frame.url });
+    expect(result.error).toBeUndefined();
+    expect(Buffer.from(result.result.content, "base64")).toEqual(Buffer.from(BIG5));
+  } finally {
+    socket?.close();
+    cdp.stop(true);
+    browser.close();
+  }
+});
+
 test("CDP download behavior controls the directory and emits completion events", async () => {
   const { CdpServer } = await import("../lib/cdp-server.js");
   const dir = mkdtempSync(join(tmpdir(), "buninu-cdp-download-"));

package/test/fixtures/media-sync.js

@@ -0,0 +1,57 @@
+// Isolated because host scripting installs browser globals in this process.
+import { strict as assert } from "node:assert";
+import { createPageRenderer } from "../../lib/renderer/page-renderer.js";
+
+const sleep = Bun.sleep;
+const success = () => process.stdout.write("media clock integration passed\n");
+let output, frames = 0, samples = 0;
+const errors = [];
+const renderer = await createPageRenderer({
+  fetchResource: async () => ({ ok: true, body: new Uint8Array([1]), contentType: "video/mp4" }),
+  reportError: error => errors.push(String(error)),
+  videoDecoder: {
+    probe: async () => ({ duration: 10, video: { width: 2, height: 2 }, audio: { sampleRate: 1000 } }),
+    decode: async () => ({ width: 2, height: 2, fps: 10,
+      nextFrame(w, h) { frames++; return new Uint8Array(w * h * 4); }, seek() {}, close() {} }),
+    decodeAudio: async () => ({ sampleRate: 1000, channels: 1,
+      nextSamples() { return new Float32Array(100); }, close() {} }),
+  },
+  audio: {
+    open(options, listener) { output = listener; return 1; },
+    write(id, bytes) { samples += bytes.length / 2; },
+    close() { return Promise.resolve(samples * 2); },
+    finish() {},
+  },
+});
+try {
+  renderer.setScripting("host");
+  await renderer.loadDocument({ url: "https://media.test/", source: '<video id="v" src="clip.mp4"></video>', contentType: "text/html" });
+  await renderer.evaluate("document.getElementById('v').play()");
+  output({ event: "request", bytes: 1000 });
+  assert.equal(samples, 500);
+  await sleep(180);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0,
+    "queued samples are not played samples");
+  const firstFrames = frames;
+  await sleep(180);
+  assert.equal(frames, firstFrames, "video cannot outrun an audio device which hasn't started");
+  output({ event: "timing", seconds: 0.2, sentSeconds: 0.5, sinkSeconds: 0.3 });
+  await sleep(160);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.2);
+  const stalledFrames = frames;
+  await sleep(300);
+  assert.equal(frames, stalledFrames, "no clock advance through missing feedback/network starvation");
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.2);
+  output({ event: "timing", seconds: 0.4, sentSeconds: 0.5, sinkSeconds: 0.1 });
+  await sleep(160);
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.4);
+  assert.ok(frames > stalledFrames, "frames resume only with measured audio progress");
+  await renderer.evaluate("document.getElementById('v').pause()");
+  output({ event: "timing", seconds: 0.5, sentSeconds: 0.5, sinkSeconds: 0 });
+  assert.equal(await renderer.evaluate("document.getElementById('v').currentTime"), 0.4,
+    "late feedback from a closed stream cannot move a paused element");
+  assert.deepEqual(errors, []);
+  success();
+} finally {
+  renderer.dispose();
+}

package/test/happy-dom-platform-adapters.test.js

@@ -1,12 +1,16 @@
 import { expect, test } from "bun:test";
 import imageSize from "../lib/happy-dom/image-size-adapter.js";
 import MIMEType from "../lib/happy-dom/mime-type-adapter.js";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
 
 const ONE_PIXEL_PNG = Buffer.from(
   "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAF/gL+3MxZ5wAAAABJRU5ErkJggg==",
   "base64",
 );
 
+// A 2x3 PNG.
+const SMALL_PNG = "iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==";
+
 test("MIME adapter supplies the FileReader surface without whatwg-mimetype", () => {
   expect(String(MIMEType.parse("Text/Plain; charset=UTF-8"))).toBe("text/plain");
   expect(MIMEType.parse("not a mime type")).toBeNull();
@@ -16,3 +20,24 @@ test("image size adapter uses Bun.Image metadata", async () => {
   expect(await imageSize(ONE_PIXEL_PNG)).toEqual({ width: 1, height: 1 });
 });
 
+
+test("an image whose src changes while its size is read reports only the latest image", async () => {
+  const { document, window } = parseHTMLDocument("<img>");
+  const image = document.querySelector("img");
+  const events = [];
+  image.addEventListener("load", () => events.push(`load ${image.naturalWidth}x${image.naturalHeight}`));
+  image.addEventListener("error", () => events.push("error"));
+  image.setAttribute("src", `data:image/png;base64,${ONE_PIXEL_PNG.toString("base64")}`);
+  image.setAttribute("src", `data:image/png;base64,${SMALL_PNG}`);
+  // Not complete until its size is known.
+  expect(image.complete).toBeFalse();
+  await Bun.sleep(100);
+  expect(events).toEqual(["load 2x3"]);
+  expect(image.complete).toBeTrue();
+  // A removed src drops the image being read.
+  image.setAttribute("src", `data:image/png;base64,${ONE_PIXEL_PNG.toString("base64")}`);
+  image.removeAttribute("src");
+  await Bun.sleep(100);
+  expect([events.length, image.naturalWidth]).toEqual([1, 0]);
+  window.happyDOM.abort();
+});

package/test/headless-shell.test.js

@@ -351,7 +351,7 @@ test("a client may set up and navigate before the first renderer is up", async (
     fetched++;
     return new Response("<!doctype html><title>early</title><p>x</p>", { headers: { "content-type": "text/html" } });
   } });
-  const browser = await createBrowser({ spareRenderer: false, waitForRenderer: false });
+  const browser = await createBrowser({ spareRenderer: false, waitForRenderer: false, webkit: false });
   let ready = false;
   browser.ready.then(() => { ready = true; });
   try {

package/test/hit-test.test.js

@@ -1,6 +1,7 @@
 import { expect, test } from "bun:test";
 import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
-import { elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.js";
+import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../lib/input/hit-test.js";
+import { buildDisplayList } from "../lib/paint/display-list.js";
 import { layoutText } from "../lib/layout/text-layout.js";
 import { RenderTreeBuilder } from "../lib/render-tree/index.js";
 import { StyleEngine } from "../lib/style/computed-style.js";
@@ -84,3 +85,26 @@ test("hidden and pointer-events: none boxes let clicks through, but their opted-
   expect(regions.map((region) => region.element.getAttribute("href") ?? region.element.tagName)).toEqual(["open", "shown", "plain"]);
   window.happyDOM.abort();
 });
+
+test("pointer events target the topmost element painted at a point, whatever its tag", () => {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">
+    <table><tr><td id="cell" style="width:100px;height:50px"><span id="label">tile</span></td></tr></table>
+    <div id="under" style="height:40px"></div>
+    <div id="over" style="position:absolute;top:60px;left:0;width:50px;height:20px"></div>
+    <div id="ghost" style="position:absolute;top:60px;left:50px;width:50px;height:20px;pointer-events:none"></div>
+  </body>`);
+  const styles = new StyleEngine().compute(document);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, { x: 0, y: 0, width: 400, lineHeight: 20, measureText: (text) => text.length * 10, fontMetrics: () => ({ ascent: 16, height: 20 }) });
+  const displayList = buildDisplayList(layout, tree);
+  const at = (x, y) => elementAtPoint(tree, displayList, x, y, { x: 0, y: 0 })?.id ?? null;
+  const label = layout.fragments.flatMap((fragment) => fragment.runs.map((run) => ({ run, fragment })))
+    .find(({ run }) => tree.nodesById.get(run.nodeId)?.domNode?.parentElement?.id === "label");
+  // Text hits its element; the rest of the cell hits the cell.
+  expect(at(label.run.x + 1, label.fragment.y + 1)).toBe("label");
+  expect(at(label.run.x + label.run.width + 20, label.fragment.y + 1)).toBe("cell");
+  // A positioned box paints over the in-flow one; pointer-events:none passes through.
+  expect(at(10, 65)).toBe("over");
+  expect(at(60, 65)).toBe("under");
+  window.happyDOM.abort();
+});