buninu-browser 0.2.1 → 0.2.3

package/patches/happy-dom/0006-parse-css-escapes-in-selectors.patch

@@ -0,0 +1,115 @@
+diff --git a/packages/happy-dom/src/query-selector/SelectorParser.ts b/packages/happy-dom/src/query-selector/SelectorParser.ts
+index 60cc951..62cf4b9 100644
+--- a/packages/happy-dom/src/query-selector/SelectorParser.ts
++++ b/packages/happy-dom/src/query-selector/SelectorParser.ts
+@@ -12,10 +12,11 @@ import type { TGlobalMatchFunction } from './TGlobalMatchFunction.js';
+ /**
+  * Selector group RegExp.
+  *
+- * Group 1: Combinator (" ", ",", "+", ">", "̣~")
+- * Group 2: Parentheses or brackets.
++ * Group 1: An escaped character (e.g. "\:", "\31 "), skipped.
++ * Group 2: Combinator (" ", ",", "+", ">", "̣~")
++ * Group 3: Parentheses, brackets or quotes.
+  */
+-const SELECTOR_GROUP_REGEXP = /(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
++const SELECTOR_GROUP_REGEXP = /(\\[0-9a-fA-F]{1,6}\s?|\\[\s\S])|(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
+ 
+ /**
+  * Selector RegExp.
+@@ -45,7 +46,7 @@ const SELECTOR_GROUP_REGEXP = /(\s*[\s,+>~]\s*)|([\[\]\(\)"'])/g;
+  * Group 23: Pseudo element (e.g. "::after", "::-webkit-inner-spin-button").
+  */
+ const SELECTOR_REGEXP =
+-	/(\*)|([a-zA-Z0-9\u00A0-\uFFFF-]+)|#(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\.)+)|\.(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\.)+)|\[(([a-zA-Z0-9-_]|\\.)+)\]|\[(([a-zA-Z0-9-_]|\\.)+)\s*([~|^$*]{0,1})\s*=\s*("([^"]*)"|'([^']*)')\s*(s|i){0,1}\]|\[(([a-zA-Z0-9-_]|\\.)+)\s*([~|^$*]{0,1})\s*=\s*(([a-zA-Z0-9\u00A0-\uFFFF_¤£-]|\\.)+)\]|:([a-zA-Z-]+)\s*\(.+\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)/g;
++	/(\*)|((?:[a-zA-Z0-9\u00A0-\uFFFF-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|#(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|\.(([a-zA-Z0-9\u00A0-\uFFFF_-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\]|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\s*([~|^$*]{0,1})\s*=\s*("((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)')\s*(s|i){0,1}\]|\[(([a-zA-Z0-9-_]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\s*([~|^$*]{0,1})\s*=\s*(([a-zA-Z0-9\u00A0-\uFFFF_¤£-]|\\[0-9a-fA-F]{1,6}\s?|\\.)+)\]|:([a-zA-Z-]+)\s*\(.+\)|:([a-zA-Z-]+)|::([a-zA-Z-]+)/g;
+ 
+ /**
+  * Selector pseudo RegExp.
+@@ -55,11 +56,6 @@ const SELECTOR_REGEXP =
+  */
+ const SELECTOR_PSEUDO_REGEXP = /:([a-zA-Z-]+)|([()])/g;
+ 
+-/**
+- * Escaped Character RegExp.
+- */
+-const ESCAPED_CHARACTER_REGEXP = /\\/g;
+-
+ /**
+  * CSS Escape RegExp.
+  *
+@@ -187,6 +183,11 @@ export default class SelectorParser {
+ 
+ 		while ((match = regExp.exec(selector))) {
+ 			if (match[1]) {
++				// An escaped character (CSS Syntax §4.3.7) is part of the selector it is in,
++				// never a combinator, bracket or quote.
++				continue;
++			}
++			if (match[2]) {
+ 				// Matches combinator (" ", ",", "+", ">", "̣~")
+ 				// We should ignore combinators that are inside parentheses, brackets or apostrophes
+ 
+@@ -198,7 +199,7 @@ export default class SelectorParser {
+ 				) {
+ 					const childSelector = selector.substring(lastIndex, match.index).trim();
+ 
+-					switch (match[1].trim()) {
++					switch (match[2].trim()) {
+ 						case ',':
+ 							selectorItem = this.getSelectorGroupItem(childSelector, combinator);
+ 							if (!selectorItem) {
+@@ -262,7 +263,7 @@ export default class SelectorParser {
+ 			} else {
+ 				// Matches parentheses or brackets.
+ 
+-				switch (match[2]) {
++				switch (match[3]) {
+ 					case '(':
+ 						if (depth.singleApostrophe === 0 && depth.doubleApostrophe === 0) {
+ 							depth.parentheses++;
+@@ -365,22 +366,22 @@ export default class SelectorParser {
+ 			} else if (match[2]) {
+ 				// Matches tag name, e.g. "div"
+ 
+-				selectorItem.tagName = match[2].toUpperCase();
++				selectorItem.tagName = SelectorParser.cssUnescape(match[2]).toUpperCase();
+ 			} else if (match[3]) {
+ 				// Matches ID, e.g. "#id"
+ 
+-				selectorItem.id = match[3].replace(ESCAPED_CHARACTER_REGEXP, '');
++				selectorItem.id = SelectorParser.cssUnescape(match[3]);
+ 			} else if (match[5]) {
+ 				// Matches class names, e.g. ".class1"
+ 
+ 				selectorItem.classNames = selectorItem.classNames || [];
+-				selectorItem.classNames.push(match[5].replace(ESCAPED_CHARACTER_REGEXP, ''));
++				selectorItem.classNames.push(SelectorParser.cssUnescape(match[5]));
+ 			} else if (match[7]) {
+ 				// Matches attributes without value, e.g. [attr]
+ 
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[7].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[7]),
+ 					operator: null,
+ 					value: null,
+ 					modifier: null,
+@@ -393,7 +394,7 @@ export default class SelectorParser {
+ 				const unescapedValue = SelectorParser.cssUnescape(value);
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[9].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[9]),
+ 					operator: match[11] || null,
+ 					value: unescapedValue,
+ 					modifier: <'s'>match[15] || null,
+@@ -409,7 +410,7 @@ export default class SelectorParser {
+ 				const unescapedValue = SelectorParser.cssUnescape(match[19]);
+ 				selectorItem.attributes = selectorItem.attributes || [];
+ 				selectorItem.attributes.push({
+-					name: match[16].replace(ESCAPED_CHARACTER_REGEXP, ''),
++					name: SelectorParser.cssUnescape(match[16]),
+ 					operator: match[18] || null,
+ 					value: unescapedValue,
+ 					modifier: null,

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

@@ -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(() => {
@@ -106,7 +144,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>
@@ -25,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;
@@ -544,3 +567,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";
 
@@ -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>`,
@@ -126,3 +140,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);
+});