buninu-browser 0.2.0 → 0.2.2

package/AGENTS.md

@@ -5,7 +5,11 @@
 - Native bindings are generally not allowed in the headless shell itself
   * In the future when it is wrapped into a full browser on each platform, the frontend should stay as thin wrappers just enough to draw rendered content from the headlesss shell
   * Specifically, able to work with ../casty through CDP is an important goal
+- Working with casty requires setting the env CASTY_BROWSER to the absolute path of buninu-browser.js
+  * Then start casty by `bun ../casty/index.js [URL]`. If no URL is specified it starts casty's homepage.
+- Enable logs by BUNINU_LOG
 - Only use Bun FFI to dlopen libc when other methods are clearly not enough
+- Read README.md and `bun index.js --help` for a general understanding
 
 ## Implementing the browser
 - Do not treat any website specially when refining browser features like layout css js. Fix the actual problem that all websites can benefit from.

package/README.md

@@ -24,6 +24,12 @@ npx buninu-browser
 # Open a URL
 npx buninu-browser buninu.org
 
+# WebKit/Safari compatibility identity is the default
+npx buninu-browser https://youtu.be/jf-pn0a-Twk
+
+# Switch back to the Chromium compatibility identity
+npx buninu-browser buninu.org -- --chromium
+
 # Arguments after -- go to the
 # browser engine; --mobile presents
 # it as a phone (mobile user agent,
@@ -60,6 +66,17 @@ this package's `buninu-browser.js`
 and starts casty with `npx` when npx
 and Bun are both installed, otherwise
 with `bunx`, or `bun x`.
+No adjacent casty checkout is needed. From a local Buninu Browser checkout,
+`bun index.js [URL] [-- BROWSER_FLAGS...]` uses the same package-based launcher.
+
+The engine defaults to a WebKit/Safari compatibility identity in casty,
+headless, and screenshot modes. `--webkit` explicitly selects this default;
+`--chromium` selects the previous desktop Chromium identity. Pass these flags
+after `--` through casty, or directly after `--headless`. If both desktop flags
+are supplied, the last one wins. `--mobile` takes priority over either desktop
+identity and retains the Android phone profile. These flags select browser
+identities, not native WebKit or Chromium engines. API callers can use
+`createBrowser({ webkit: false })` to select the Chromium identity.
 
 The first argument picks a frontend;
 the rest is passed on:
@@ -147,11 +164,11 @@ Compatibility with casty is therefore part of the initial vertical slice
 rather than a later layer: CDP discovery, target lifecycle, navigation,
 screenshots and screencast, viewport, and input. Early development and every
 screen test so far have been done in casty itself. casty launches the
-browser named by `CASTY_BROWSER` before looking for Chromium, so a checkout
-of this repository runs next to a casty checkout with:
+browser named by `CASTY_BROWSER` before looking for Chromium. The package
+launcher sets this automatically and obtains casty through the package runner:
 
 ```sh
-CASTY_BROWSER="$PWD/buninu-browser.js" bun ../casty/bin/casty.js buninu.org
+npx buninu-browser buninu.org
 ```
 
 ## Design
@@ -247,7 +264,7 @@ pushes a screencast frame.
 ### Mobile presentation
 
 Pages see a desktop browser unless `--mobile` is given. With it, requests
-and `navigator.userAgent` use an Android 16 WebView user agent, and the
+and `navigator.userAgent` use an Android 16 Chrome user agent, and the
 `hover`/`pointer` media features report a touch screen (`hover: none`,
 `pointer: coarse`). User agent overrides sent over CDP are ignored so the
 flag stays in effect under clients that set a desktop user agent, such as
@@ -257,11 +274,29 @@ asked for; input coordinates are scaled back, and pages see the factor as
 `visualViewport.scale`.
 
 ```sh
-CASTY_BROWSER="$PWD/buninu-browser.js" bun ../casty/bin/casty.js github.com -- --mobile
+npx buninu-browser github.com -- --mobile
 ```
 
 ### Video and audio
 
+The default desktop WebKit/Safari compatibility identity (also selectable with
+`--webkit`) matches Bun's JavaScriptCore more closely than the optional
+`--chromium` identity. It presents macOS Safari even on other operating systems, sets the
+matching navigator vendor/platform, and omits Chromium User-Agent Client Hints.
+This can help pages that compare their declared browser with JavaScript engine
+behavior. The flag applies to every site and keeps the page sandbox enabled.
+
+```sh
+npx buninu-browser https://youtu.be/jf-pn0a-Twk -- --webkit
+```
+
+The casty package version must support non-Chromium CDP backends without
+replacing their advertised identity or applying Chrome-specific page patches.
+The default and explicit
+`--webkit` profiles ignore CDP user-agent overrides. The same flag works with
+`--headless` and screenshot mode. This is a compatibility workaround, not a
+guarantee that a service will accept every session.
+
 `<video>` and `<audio>` share one pipeline; an `<audio controls>` is a
 300x32 control bar with no picture. Clicking plays or pauses, clicking the
 progress track seeks, and page script has `play()`, `pause()`,
@@ -271,9 +306,39 @@ MPEG-4, Theora, MPEG-1/2; MP3, AAC, FLAC, Vorbis, Opus, WAV).
 
 Sound, a video's included, plays through a PulseAudio native-protocol server
 on `127.0.0.1:4713`, such as [jspulse](https://github.com/jjtseng93/jspulse)
-(`npx @drxiaozhi/jspulse`); without one, video plays silently. The controller
-holds the connection, since renderers cannot open sockets, and paces the
-stream to real time, so pausing stops the sound within half a second.
+or PulseAudio itself; without one, video plays silently. Start jspulse with
+the backend appropriate for your platform:
+
+```sh
+npx @drxiaozhi/jspulse --sles   # Android OpenSL ES
+npx @drxiaozhi/jspulse --alsa   # Linux ALSA
+npx @drxiaozhi/jspulse --win32  # Windows waveform audio
+```
+
+Keep the server on its default port, `4713`, when using Buninu Browser.
+Although jspulse supports `-p` / `--port`, the browser currently connects to
+`127.0.0.1:4713` and does not read `PULSE_SERVER`.
+
+The controller
+holds the connection, since renderers cannot open sockets. For media playback
+it polls the server's playback cursor and measured sink latency; video follows
+the reported audio progress, not the amount of PCM submitted or elapsed wall
+time. Missing timing feedback holds the clock and is logged, rather than being
+replaced by a fixed A/V delay. Audio queued ahead is bounded, including across
+network stalls and decoder reopens.
+
+Synchronization requires the standard PulseAudio timing query and an output
+backend that reports its measured queue latency. jspulse provides a common
+timing interface across ALSA, Windows, and OpenSL ES: ALSA uses hardware delay
+and software queue measurements; Windows and OpenSL ES track buffer completion.
+The shared Windows/ALSA mixer accounts for each stream separately.
+Use a jspulse version that includes this timing support; older OpenSL ES
+backends lack it. A server reporting zero latency while retaining an
+unreported device queue cannot provide accurate synchronization.
+Buffer-completion timing has buffer-sized resolution and does not measure
+additional unreported downstream latency, such as Bluetooth output latency.
+With `BUNINU_LOG`, `media sync` records reported audio progress, the latest
+rendered video position, and the output queue/latency for diagnosis.
 
 ### Diagnostics
 
@@ -289,7 +354,7 @@ Renderers cannot open files under seccomp, so the controller collects their
 output and writes the log.
 
 ```sh
-BUNINU_LOG=1 CASTY_BROWSER="$PWD/buninu-browser.js" bun ../casty/bin/casty.js github.com
+BUNINU_LOG=1 npx buninu-browser github.com
 ```
 
 ## Open-source components

package/bunfig.toml

@@ -1,2 +1,3 @@
 [test]
 pathIgnorePatterns = ["vendor/**"]
+preload = ["./test/setup.js"]

package/buninu-browser.js

@@ -45,6 +45,10 @@ Options:
   --mobile                        Present as a phone: mobile user agent and touch media
                                   features (hover: none, pointer: coarse); user agent
                                   overrides over CDP are ignored
+  --webkit                        Use a desktop WebKit/Safari compatibility identity (default)
+                                  for JavaScriptCore; CDP user agent overrides are ignored
+  --chromium                      Use the previous desktop Chromium compatibility identity
+                                  Last desktop identity flag wins; --mobile takes priority
   --screenshot[=FILE]             Capture one PNG and exit (default screenshot.png)
   --window-size=WIDTH,HEIGHT      Viewport size for the screenshot (default 800,600)
   --screenshot-wait=MILLISECONDS  Wait after page load before capturing

package/index.js

@@ -84,6 +84,11 @@ Frontends (first argument only):
   --win32, --gtk, --appkit, --qt
       Native windowed frontends (reserved, not implemented yet)
 
+Browser identity:
+  WebKit/Safari compatibility identity is the engine default (not native WebKit).
+  Pass -- --webkit or -- --chromium through casty; with --headless, omit --.
+  Last desktop identity flag wins; --mobile takes priority.
+
 Information:
   --help, -h, -help
       Show this help & exit

package/lib/audio/piano.js

@@ -46,7 +46,30 @@ export function pianoNote(key, code = "") {
 export function pianoTone(note, rate = 48000) {
   const frames = Math.round(rate * 0.7);
   const samples = new Float32Array(frames);
-  const frequency = 440 * 2 ** ((note - 69) / 12);
+  
+  
+  let frequency = 432
+  
+  if(0)
+  {
+    frequency = 432 * 2 ** ((note - 69) / 12);
+  }
+  else
+  {
+    const note_diff = note - 69
+
+    const ratios = [
+      1, 16/15, 9/8, 6/5, 5/4, 4/3, 
+      45/32, 3/2, 8/5, 5/3, 9/5, 15/8
+    ]
+    const ratio = ratios[
+      (note_diff + 432) % 12
+    ]
+    const octave = Math.floor(note_diff/12)
+    
+    frequency = 432 * ratio * 2**octave ;
+  }
+  
   // The original left-hand register is quiet on small speakers. Raise only
   // its level; leave pitch and relative harmonic balance untouched.
   const gain = 1 + Math.max(0, Math.min(1, (60 - note) / 24));

package/lib/audio/pulse-client.js

@@ -22,11 +22,11 @@ const PROTOCOL_VERSION = 8;
 const SAMPLE_S16LE = 3;
 const COMMAND = {
   ERROR: 0, REPLY: 2, CREATE_PLAYBACK_STREAM: 3, DELETE_PLAYBACK_STREAM: 4, AUTH: 8, SET_CLIENT_NAME: 9,
-  DRAIN_PLAYBACK_STREAM: 12, REQUEST: 61, UNDERFLOW: 63, PLAYBACK_STREAM_KILLED: 32,
+  DRAIN_PLAYBACK_STREAM: 12, GET_PLAYBACK_LATENCY: 14, REQUEST: 61, UNDERFLOW: 63, PLAYBACK_STREAM_KILLED: 32,
 };
 const TAG = {
   STRING: 0x74, NULL: 0x4e, U32: 0x4c, U8: 0x42, SAMPLE_SPEC: 0x61, ARBITRARY: 0x78, TRUE: 0x31, FALSE: 0x30,
-  CHANNEL_MAP: 0x6d, CVOLUME: 0x76,
+  CHANNEL_MAP: 0x6d, CVOLUME: 0x76, TIMEVAL: 0x54, USEC: 0x55, S64: 0x72,
 };
 // PulseAudio channel positions: mono, front-left, front-right, then aux channels.
 const POSITION = { MONO: 0, FRONT_LEFT: 1, FRONT_RIGHT: 2, AUX0: 12 };
@@ -52,6 +52,11 @@ class TagWriter {
     return this;
   }
 
+  timeval(milliseconds) {
+    this.#bytes.push(TAG.TIMEVAL, ...u32be(Math.floor(milliseconds / 1000)), ...u32be((milliseconds % 1000) * 1000));
+    return this;
+  }
+
   arbitrary(bytes) {
     this.#bytes.push(TAG.ARBITRARY, ...u32be(bytes.length), ...bytes);
     return this;
@@ -95,6 +100,27 @@ class TagReader {
     return this.#rawU32();
   }
 
+  bool() {
+    const tag = this.#data[this.#index++];
+    if (tag !== TAG.TRUE && tag !== TAG.FALSE) throw new Error("pulse: invalid boolean");
+    return tag === TAG.TRUE;
+  }
+
+  timeval() {
+    this.#expect(TAG.TIMEVAL);
+    return this.#rawU32() + this.#rawU32() / 1e6;
+  }
+
+  integer64(tag, signed = false) {
+    this.#expect(tag);
+    if (this.#index + 8 > this.#data.length) throw new Error("pulse: truncated timing value");
+    const view = new DataView(this.#data.buffer, this.#data.byteOffset + this.#index, 8);
+    const value = Number(signed ? view.getBigInt64(0) : view.getBigUint64(0));
+    this.#index += 8;
+    if (!Number.isSafeInteger(value)) throw new Error("pulse: timing value out of range");
+    return value;
+  }
+
   string() {
     if (this.#data[this.#index] === TAG.NULL) {
       this.#index++;
@@ -175,13 +201,17 @@ export class PulseClient {
   }
 
   /** Sends a command packet; resolves with the reply's reader. */
-  #command(command, fill = () => {}) {
+  #command(command, fill = () => {}, timeout = 0) {
     if (this.#closed) return Promise.reject(new Error("pulse: connection closed"));
     const tag = this.#nextTag++;
     const writer = new TagWriter().u32(command).u32(tag);
     fill(writer);
     return new Promise((resolve, reject) => {
-      this.#pending.set(tag, { resolve, reject, command });
+      const timer = timeout ? setTimeout(() => {
+        this.#pending.delete(tag);
+        reject(new Error("pulse: timing request timed out"));
+      }, timeout) : null;
+      this.#pending.set(tag, { resolve, reject, command, timer });
       this.#socket.write(frame(PACKET_CHANNEL, writer.finish()));
     });
   }
@@ -210,6 +240,7 @@ export class PulseClient {
       const pending = this.#pending.get(tag);
       this.#pending.delete(tag);
       if (!pending) return;
+      clearTimeout(pending.timer);
       if (command === COMMAND.REPLY) pending.resolve(reader);
       else pending.reject(new Error(`pulse: command ${pending.command} server error ${reader.u32()}`));
     } else if (command === COMMAND.REQUEST) {
@@ -217,6 +248,8 @@ export class PulseClient {
       stream?.grant(reader.u32());
     } else if (command === COMMAND.PLAYBACK_STREAM_KILLED) {
       this.#streams.get(reader.u32())?.kill();
+    } else if (command === COMMAND.UNDERFLOW) {
+      this.#streams.get(reader.u32())?.updateTiming();
     }
   }
 
@@ -225,7 +258,7 @@ export class PulseClient {
    * `onRequest(bytes)` asks for about that much more audio, paced to real time
    * (see PlaybackStream).
    */
-  async openPlayback({ rate, channels, name = "audio", onRequest = () => {}, leadSeconds = LEAD_SECONDS }) {
+  async openPlayback({ rate, channels, name = "audio", onRequest = () => {}, onTiming = null, onTimingError = null, leadSeconds = LEAD_SECONDS }) {
     const spec = { format: SAMPLE_S16LE, channels, rate };
     const frameBytes = channels * 2;
     const bytesForSeconds = (seconds) => Math.max(frameBytes, Math.round(rate * seconds) * frameBytes);
@@ -245,7 +278,7 @@ export class PulseClient {
     const index = reply.u32();
     reply.u32(); // sink input index
     const requested = reply.u32();
-    const stream = new PlaybackStream(this, index, spec, onRequest, leadSeconds);
+    const stream = new PlaybackStream(this, index, spec, onRequest, leadSeconds, onTiming, onTimingError);
     this.#streams.set(index, stream);
     stream.grant(requested);
     return stream;
@@ -261,6 +294,20 @@ export class PulseClient {
     return this.#command(COMMAND.DRAIN_PLAYBACK_STREAM, (w) => w.u32(index));
   }
 
+  /** Protocol v8 timing: the read cursor minus the sink's measured device queue. */
+  async playbackTiming(index) {
+    const reply = await this.#command(COMMAND.GET_PLAYBACK_LATENCY,
+      (w) => w.u32(index).timeval(Date.now()), 2000);
+    const sinkSeconds = reply.integer64(TAG.USEC) / 1e6;
+    reply.integer64(TAG.USEC); // source latency (recording only)
+    const playing = reply.bool();
+    reply.timeval(); // echoed request time
+    reply.timeval(); // server measurement time; don't assume synchronized wall clocks
+    const writeIndex = reply.integer64(TAG.S64, true);
+    const readIndex = reply.integer64(TAG.S64, true);
+    return { sinkSeconds, playing, writeIndex, readIndex };
+  }
+
   async deleteStream(index) {
     this.#streams.delete(index);
     await this.#command(COMMAND.DELETE_PLAYBACK_STREAM, (w) => w.u32(index)).catch(() => {});
@@ -269,7 +316,10 @@ export class PulseClient {
   close() {
     if (this.#closed) return;
     this.#closed = true;
-    for (const { reject } of this.#pending.values()) reject(new Error("pulse: connection closed"));
+    for (const { reject, timer } of this.#pending.values()) {
+      clearTimeout(timer);
+      reject(new Error("pulse: connection closed"));
+    }
     this.#pending.clear();
     for (const stream of this.#streams.values()) stream.kill();
     this.#streams.clear();
@@ -305,9 +355,13 @@ class PlaybackStream {
   #started = null;
   #timer = null;
   #leadSeconds;
+  #onTiming;
+  #onTimingError;
+  #timingPending = false;
+  #playedBytes = 0;
   killed = false;
 
-  constructor(client, index, { rate, channels }, onRequest, leadSeconds) {
+  constructor(client, index, { rate, channels }, onRequest, leadSeconds, onTiming, onTimingError) {
     this.#client = client;
     this.index = index;
     // Audio is only ever cut at whole frames (one sample of every channel):
@@ -317,7 +371,30 @@ class PlaybackStream {
     this.#bytesPerSecond = rate * this.#frameBytes;
     this.#onRequest = onRequest;
     this.#leadSeconds = leadSeconds;
-    this.#timer = setInterval(() => this.#pace(), PACE_MS);
+    this.#onTiming = onTiming;
+    this.#onTimingError = onTimingError;
+    this.#timer = setInterval(() => { this.#pace(); void this.updateTiming(); }, PACE_MS);
+  }
+
+  async updateTiming() {
+    if (!this.#onTiming || this.killed || this.#timingPending) return;
+    this.#timingPending = true;
+    try {
+      const timing = await this.#client.playbackTiming(this.index);
+      if (this.killed) return;
+      // Never count queued PCM or underrun silence as played media. No wall
+      // clock extrapolation: an absent/stale report freezes the master clock.
+      const end = Math.min(this.#offset, Math.max(0, timing.writeIndex));
+      const played = Math.min(end, Math.max(0, Math.min(end, timing.readIndex) - timing.sinkSeconds * this.#bytesPerSecond));
+      this.#playedBytes = Math.max(this.#playedBytes, this.#frameAligned(played));
+      this.#onTiming({ seconds: this.#playedBytes / this.#bytesPerSecond,
+        sentSeconds: this.#offset / this.#bytesPerSecond, sinkSeconds: timing.sinkSeconds, playing: timing.playing });
+      this.#pace();
+    } catch (error) {
+      if (!this.killed) this.#onTimingError?.(error);
+    } finally {
+      this.#timingPending = false;
+    }
   }
 
   /** The server has room for `bytes` more. */
@@ -343,6 +420,11 @@ class PlaybackStream {
   #allowed() {
     const elapsed = this.#started === null ? 0 : (performance.now() - this.#started) / 1000;
     const bytes = Math.floor(this.#bytesPerSecond * (elapsed + this.#leadSeconds));
+    // Device progress is authoritative, with real-time pacing as a second
+    // ceiling: a server incorrectly reporting a zero queue cannot flood the
+    // device faster than real time. This is a queue limit, not an A/V offset.
+    if (this.#onTiming) return this.#frameAligned(Math.min(bytes,
+      this.#playedBytes + this.#bytesPerSecond * this.#leadSeconds));
     return bytes - (bytes % this.#frameBytes);
   }
 
@@ -381,6 +463,23 @@ class PlaybackStream {
     }
   }
 
+  /**
+   * Restarts the pacing clock from what was sent so far. After the writer
+   * paused (the output ran dry), sending resumes at the playback rate
+   * instead of catching up with the time that passed, which would queue
+   * seconds on the server and delay what plays from then on.
+   */
+  resync() {
+    if (this.killed || this.#started === null) return;
+    this.#started = performance.now() - this.#offset / this.#bytesPerSecond * 1000;
+    this.#pace();
+  }
+
+  /** Bytes handed to the server so far: once there, the server may play them even after the stream closes. */
+  get sentBytes() {
+    return this.#offset;
+  }
+
   /** Bytes queued but not yet sent. */
   get queued() {
     return this.#queuedBytes;
@@ -392,9 +491,18 @@ class PlaybackStream {
     while (this.#queue.length && !this.killed) await new Promise((resolve) => setTimeout(resolve, PACE_MS));
     if (!this.killed) {
       await this.#client.drain(this.index).catch(() => {});
-      // A server that queued ahead may answer the drain early: wait for the clock too.
-      const end = (this.#started ?? performance.now()) + this.#offset / this.#bytesPerSecond * 1000;
-      while (!this.killed && performance.now() < end) await new Promise((resolve) => setTimeout(resolve, PACE_MS));
+      if (this.#onTiming) {
+        // Some compatible servers acknowledge drain before their device queue
+        // empties. Only a measured playback cursor may end synchronized media.
+        while (!this.killed && this.#playedBytes < this.#offset) {
+          await this.updateTiming();
+          await new Promise((resolve) => setTimeout(resolve, PACE_MS));
+        }
+      }
+      if (!this.#onTiming) {
+        const end = (this.#started ?? performance.now()) + this.#offset / this.#bytesPerSecond * 1000;
+        while (!this.killed && performance.now() < end) await new Promise((resolve) => setTimeout(resolve, PACE_MS));
+      }
     }
     await this.close();
   }

package/lib/cdp-server.js

@@ -1,4 +1,4 @@
-import { CHROMIUM_VERSION, DESKTOP_USER_AGENT } from "./user-agent.js";
+import { BROWSER_PRODUCT, DESKTOP_USER_AGENT } from "./user-agent.js";
 
 const CDP_DEFAULT_PORT = 9222;
 const CDP_PROTOCOL_VERSION = "1.3";
@@ -124,11 +124,10 @@ export class CdpServer {
 
         if (pathname === "/json/version") {
           return respond(jsonResponse({
-            Browser: `Chrome/${CHROMIUM_VERSION}`,
+            Browser: BROWSER_PRODUCT,
             "Protocol-Version": CDP_PROTOCOL_VERSION,
-            "User-Agent": DESKTOP_USER_AGENT,
-            "V8-Version": Bun.version,
-            "WebKit-Version": "537.36",
+            "User-Agent": context.userAgent ?? DESKTOP_USER_AGENT,
+            "Bun-Version": Bun.version,
             webSocketDebuggerUrl,
           }));
         }
@@ -283,9 +282,9 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     case "Browser.getVersion":
       return {
         protocolVersion: CDP_PROTOCOL_VERSION,
-        product: `Chrome/${CHROMIUM_VERSION}`,
+        product: BROWSER_PRODUCT,
         revision: "cdp-server",
-        userAgent: DESKTOP_USER_AGENT,
+        userAgent: ctx.userAgent ?? DESKTOP_USER_AGENT,
         jsVersion: Bun.version,
       };
     case "Browser.setDownloadBehavior":
@@ -381,11 +380,14 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     }
     case "Page.getFrameTree": {
       const target = getSessionTarget(state, sessionId);
+      // Script/form navigations can replace the document without Page.navigate.
+      // Report the committed response, not the last URL requested over CDP.
+      const resource = await ctx.resourceContent?.() ?? await ctx.resourceContent?.(target.url);
       // The document's own type (an image, TOML...), not the page shown for it.
-      const type = (await ctx.resourceContent?.(target.url))?.contentType?.split(";")[0].trim().toLowerCase();
+      const type = resource?.contentType?.split(";")[0].trim().toLowerCase();
       return {
         frameTree: {
-          frame: { ...createFrame(target), ...(type ? { mimeType: type } : {}) },
+          frame: { ...createFrame(resource ? { ...target, url: resource.url ?? target.url } : target), ...(type ? { mimeType: type } : {}) },
         },
       };
     }
@@ -398,8 +400,11 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       return {};
     case "Page.addScriptToEvaluateOnNewDocument":
       return {
-        identifier: `script-${state.nextObjectId++}`,
+        identifier: ctx.addInitScript?.(params.source ?? "") ?? `script-${state.nextObjectId++}`,
       };
+    case "Page.removeScriptToEvaluateOnNewDocument":
+      ctx.removeInitScript?.(params.identifier);
+      return {};
     case "Page.createIsolatedWorld": {
       const target = getSessionTarget(state, sessionId);
       const executionContextId = state.nextExecutionContextId++;
@@ -509,7 +514,9 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
       const target = getSessionTarget(state, sessionId);
       target.screencast = { ...params };
       target.screencastEmit = emit;
-      await emitScreencastFrame(ctx, state, target, emit);
+      // As in Chrome, the reply does not wait for the first frame (nor the
+      // renderer, which may still be starting); frames follow as events.
+      void pushScreencastFrame(ctx, state, target);
       return {};
     }
     case "Page.screencastFrameAck":
@@ -680,7 +687,7 @@ async function dispatch(ctx, state, method, params, sessionId, emit) {
     case "Input.dispatchMouseEvent": {
       const target = getSessionTarget(state, sessionId);
       if (params.type === "mouseWheel") {
-        await ctx.scroll?.(params.deltaX ?? 0, params.deltaY ?? 0);
+        await ctx.scroll?.(params.deltaX ?? 0, params.deltaY ?? 0, { x: params.x, y: params.y });
         return {};
       }
 

package/lib/happy-dom/parser.js

@@ -24,21 +24,40 @@ export function parseHTMLDocument(html, url = "about:blank") {
   });
 
   new HTMLParser(window).parse(String(html), window.document);
-  normalizeImplicitHead(window.document);
+  normalizeImplicitHead(window.document, implicitHeadCount(String(html)));
   return { window, document: window.document };
 }
 
+/**
+ * How many leading metadata elements belong in the implicit head: with no
+ * <head> tag, those before an explicit <body> tag (all of them without one).
+ * With a <head> tag Happy DOM places them itself. Comments and the contents
+ * of raw-text elements are skipped so that text in them is not counted.
+ */
+function implicitHeadCount(html) {
+  const source = html
+    .replace(/<!--[\s\S]*?-->/g, "")
+    .replace(/<(script|style|textarea|title|template|noframes)\b([^>]*)>[\s\S]*?<\/\1\s*>/gi, "<$1$2></$1>");
+  if (/<head[\s>\/]/i.test(source)) return 0;
+  const bodyAt = source.search(/<body[\s>\/]/i);
+  if (bodyAt < 0) return Infinity;
+  return (source.slice(0, bodyAt).match(/<(base|basefont|bgsound|link|meta|noframes|script|style|template|title)\b/gi) ?? []).length;
+}
+
 /**
  * Happy DOM 20's parser places metadata in body when source omits explicit
  * head/body tags. HTML's "before head" and "in head" insertion modes instead
- * put leading metadata elements into the implicit head.
+ * put leading metadata elements into the implicit head; once the <body> tag
+ * has been seen, metadata stays in body (`limit` counts those before it).
  */
-function normalizeImplicitHead(document) {
+function normalizeImplicitHead(document, limit) {
   const { head, body } = document;
-  if (!head || !body) return;
+  if (!head || !body || limit <= 0) return;
 
+  let moved = 0;
   let bodyContentStarted = false;
   for (const node of [...body.childNodes]) {
+    if (moved >= limit) break;
     if (!bodyContentStarted && node.nodeType === 3 && !node.textContent.trim()) {
       node.remove();
       continue;
@@ -46,6 +65,7 @@ function normalizeImplicitHead(document) {
     if (node.nodeType === 8) continue;
     if (!bodyContentStarted && node.nodeType === 1 && IMPLICIT_HEAD_ELEMENTS.has(node.tagName)) {
       head.appendChild(node);
+      moved++;
       continue;
     }
     bodyContentStarted = true;

package/lib/happy-dom/selector-matcher.js

@@ -0,0 +1,83 @@
+import * as PropertySymbol from "../../vendor/happy-dom/packages/happy-dom/src/PropertySymbol.ts";
+import QuerySelector from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/QuerySelector.ts";
+import SelectorCombinatorEnum from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorCombinatorEnum.ts";
+import SelectorParser from "../../vendor/happy-dom/packages/happy-dom/src/query-selector/SelectorParser.ts";
+
+/**
+ * Selector matching for the style engine, which matches tens of thousands of
+ * stylesheet selectors against every element. It gives the answers of Happy
+ * DOM's Element.matches() (same parser, same per-compound matching), without
+ * what that pays on every call: re-validating and looking up the selector
+ * string, and recording a cached result on the element and the elements it
+ * visited. The style engine keeps its own results.
+ */
+
+// Element.matches() rejects these before parsing (Happy DOM's QuerySelector).
+const INVALID_SELECTOR = /^[.#\[]?\d|[.#]$/;
+
+/**
+ * A selector compiled for matchesCompiled(), or null when it is invalid.
+ * `element` is any element of the document (it provides the window). The
+ * result does not depend on the document and may be kept with the selector.
+ * Returns undefined for objects that are not Happy DOM elements.
+ */
+export function compileSelector(element, selector) {
+  const window = element?.[PropertySymbol.window];
+  if (!window) return undefined;
+  selector = String(selector);
+  if (INVALID_SELECTOR.test(selector)) return null;
+  try {
+    const groups = new SelectorParser({ window, scope: element, globalMatchFunction: QuerySelector.globalMatchFunction })
+      .getSelectorGroups(selector);
+    // Matching walks from the subject (the last compound) leftwards.
+    return groups.map((items) => items.slice().reverse());
+  } catch {
+    return null;
+  }
+}
+
+/** Whether `element` matches a compiled selector, as element.matches(selector) would. */
+export function matchesCompiled(element, compiled) {
+  for (const items of compiled) {
+    if (matchItems(element, element, items, 0, null)) return true;
+  }
+  return false;
+}
+
+/** Happy DOM's QuerySelector.matchSelector, reduced to a yes or no. */
+function matchItems(scope, element, items, index, previous) {
+  const item = items[index];
+  if (!item) return false;
+  if (item.match(scope, element)) {
+    if (index === items.length - 1) return true;
+    switch (item.combinator) {
+      case SelectorCombinatorEnum.adjacentSibling: {
+        const sibling = element.previousElementSibling;
+        if (sibling && matchItems(scope, sibling, items, index + 1, item)) return true;
+        break;
+      }
+      case SelectorCombinatorEnum.none:
+      case SelectorCombinatorEnum.child:
+      case SelectorCombinatorEnum.descendant: {
+        const parent = element.parentNode;
+        if (parent && parent !== element[PropertySymbol.ownerDocument] && matchItems(scope, parent, items, index + 1, item)) return true;
+        break;
+      }
+      case SelectorCombinatorEnum.subsequentSibling: {
+        const parent = element.parentNode;
+        if (parent && parent !== element[PropertySymbol.ownerDocument]) {
+          const siblings = parent[PropertySymbol.elementArray];
+          for (let i = siblings.indexOf(element) - 1; i >= 0; i--) {
+            if (matchItems(scope, siblings[i], items, index + 1, item)) return true;
+          }
+        }
+        break;
+      }
+    }
+  }
+  if (previous?.combinator === SelectorCombinatorEnum.none || previous?.combinator === SelectorCombinatorEnum.descendant) {
+    const parent = element.parentNode;
+    if (parent && parent !== element[PropertySymbol.ownerDocument]) return matchItems(scope, parent, items, index, previous);
+  }
+  return false;
+}