Merge pull request #1560 from arrufat/dump-markdown

Add support for dumping output to markdown

.github/actions/install/action.yml

@@ -13,7 +13,7 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.2.4'
+    default: 'v0.2.9'
   v8:
     description: 'v8 version to install'
     required: false
@@ -22,6 +22,10 @@ inputs:
     description: 'cache dir to use'
     required: false
     default: '~/.cache'
+  debug:
+    description: 'enable v8 pre-built debug version, only available for linux x86_64'
+    required: false
+    default: 'false'
 
 runs:
   using: "composite"
@@ -32,7 +36,7 @@ runs:
       shell: bash
       run: |
         sudo apt-get update
-        sudo apt-get install -y wget xz-utils python3 ca-certificates git pkg-config libglib2.0-dev gperf libexpat1-dev cmake clang
+        sudo apt-get install -y wget xz-utils ca-certificates clang make git
 
     # Zig version used from the `minimum_zig_version` field in build.zig.zon
     - uses: mlugg/setup-zig@v2
@@ -47,17 +51,17 @@ runs:
         cache-name: cache-v8
       with:
         path: ${{ inputs.cache-dir }}/v8
-        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}.a
+        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}${{inputs.debug == 'true' && '_debug' || '' }}.a
 
     - if: ${{ steps.cache-v8.outputs.cache-hit != 'true' }}
       shell: bash
       run: |
         mkdir -p ${{ inputs.cache-dir }}/v8
 
-        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}.a
+        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}${{inputs.debug == 'true' && '_debug' || '' }}.a
 
     - name: install v8
       shell: bash
       run: |
         mkdir -p v8
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8.a
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8${{inputs.debug == 'true' && '_debug' || '' }}.a

.github/workflows/build.yml

@@ -40,7 +40,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -83,7 +82,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -128,7 +126,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -171,7 +168,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin

.github/workflows/e2e-test.yml

@@ -56,8 +56,6 @@ jobs:
           submodules: recursive
 
       - uses: ./.github/actions/install
-        with:
-          mode: 'release'
 
       - name: zig build release
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
@@ -124,10 +122,19 @@ jobs:
     needs: zig-build-release
 
     env:
-      MAX_MEMORY: 28000
-      MAX_AVG_DURATION: 23
+      MAX_VmHWM: 28000 # 28MB (KB)
+      MAX_CG_PEAK: 8000 # 8MB (KB)
+      MAX_AVG_DURATION: 17
       LIGHTPANDA_DISABLE_TELEMETRY: true
 
+      # How to give cgroups access to the user actions-runner on the host:
+      # $ sudo apt install cgroup-tools
+      # $ sudo chmod o+w /sys/fs/cgroup/cgroup.procs
+      # $ sudo mkdir -p /sys/fs/cgroup/actions-runner
+      # $ sudo chown -R actions-runner:actions-runner /sys/fs/cgroup/actions-runner
+      CG_ROOT: /sys/fs/cgroup
+      CG: actions-runner/lpd_${{ github.run_id }}_${{ github.run_attempt }}
+
     # use a self host runner.
     runs-on: lpd-bench-hetzner
     timeout-minutes: 15
@@ -152,22 +159,53 @@ jobs:
           go run ws/main.go & echo $! > WS.pid
           sleep 2
 
+      - name: run lightpanda in cgroup
+        run: |
+          if [ ! -f /sys/fs/cgroup/cgroup.controllers ]; then
+            echo "cgroup v2 not available: /sys/fs/cgroup/cgroup.controllers missing"
+            exit 1
+          fi
+
+          mkdir -p $CG_ROOT/$CG
+          cgexec -g memory:$CG ./lightpanda serve & echo $! > LPD.pid
+
+          sleep 2
+
       - name: run puppeteer
         run: |
-          ./lightpanda serve & echo $! > LPD.pid
-          sleep 2
           RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
           cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
           kill `cat LPD.pid`
 
+          PID=$(cat LPD.pid)
+          while kill -0 $PID 2>/dev/null; do
+            sleep 1
+          done
+          if [ ! -f $CG_ROOT/$CG/memory.peak ]; then
+            echo "memory.peak not available in $CG"
+            exit 1
+          fi
+          cat $CG_ROOT/$CG/memory.peak > LPD.cg_mem_peak
+
       - name: puppeteer result
         run: cat puppeteer.out
 
-      - name: memory regression
+      - name: cgroup memory regression
+        run: |
+          PEAK_BYTES=$(cat LPD.cg_mem_peak)
+          PEAK_KB=$((PEAK_BYTES / 1024))
+          echo "memory.peak_bytes=$PEAK_BYTES"
+          echo "memory.peak_kb=$PEAK_KB"
+          test "$PEAK_KB" -le "$MAX_CG_PEAK"
+
+      - name: virtual memory regression
         run: |
           export LPD_VmHWM=`cat LPD.VmHWM`
           echo "Peak resident set size: $LPD_VmHWM"
-          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+          test "$LPD_VmHWM" -le "$MAX_VmHWM"
+
+      - name: cleanup cgroup
+        run: rmdir $CG_ROOT/$CG
 
       - name: duration regression
         run: |
@@ -180,7 +218,8 @@ jobs:
           export AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
           export TOTAL_DURATION=`cat puppeteer.out|grep 'total duration'|sed 's/total duration (ms) //'`
           export LPD_VmHWM=`cat LPD.VmHWM`
-          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM}}" > bench.json
+          export LPD_CG_PEAK_KB=$(( $(cat LPD.cg_mem_peak) / 1024 ))
+          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM},\"cg_mem_peak\":${LPD_CG_PEAK_KB}}" > bench.json
           cat bench.json
 
       - name: run hyperfine

.github/workflows/zig-test.yml

@@ -12,8 +12,7 @@ on:
       - main
     paths:
       - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
+      - "src/**"
       - "vendor/zig-js-runtime"
       - ".github/**"
       - "vendor/**"
@@ -38,6 +37,26 @@ on:
   workflow_dispatch:
 
 jobs:
+  zig-test-debug:
+    name: zig test using v8 in debug mode
+    timeout-minutes: 15
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          debug: true
+
+      - name: zig build test
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8_debug.a -Dtsan=true test
+
   zig-test:
     name: zig test
     timeout-minutes: 15

Dockerfile

@@ -3,11 +3,12 @@ FROM debian:stable-slim
 ARG MINISIG=0.12
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
 ARG V8=14.0.365.4
-ARG ZIG_V8=v0.2.4
+ARG ZIG_V8=v0.2.9
 ARG TARGETPLATFORM
 
 RUN apt-get update -yq && \
     apt-get install -yq xz-utils ca-certificates \
+        pkg-config libglib2.0-dev \
         clang make curl git
 
 # Get Rust

Makefile

@@ -57,7 +57,7 @@ build-v8-snapshot:
 
 ## Build in release-fast mode
 build: build-v8-snapshot
-	@printf "\033[36mBuilding (release safe)...\033[0m\n"
+	@printf "\033[36mBuilding (release fast)...\033[0m\n"
 	@$(ZIG) build -Doptimize=ReleaseFast -Dsnapshot_path=../../snapshot.bin -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 	@printf "\033[33mBuild OK\033[0m\n"
 

README.md

@@ -78,23 +78,49 @@ docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
 ### Dump a URL
 
 ```console
-./lightpanda fetch --dump https://lightpanda.io
+./lightpanda fetch --obey_robots --log_format pretty  --log_level info https://demo-browser.lightpanda.io/campfire-commerce/
 ```
 ```console
-info(browser): GET https://lightpanda.io/ http.Status.ok
-info(browser): fetch script https://api.website.lightpanda.io/js/script.js: http.Status.ok
-info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeError: Cannot read properties of undefined (reading 'pushState')
+INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
+      disabled = false
+
+INFO  page : navigate . . . . . . . . . . . . . . . . . . . . [+6ms]
+      url = https://demo-browser.lightpanda.io/campfire-commerce/
+      method = GET
+      reason = address_bar
+      body = false
+      req_id = 1
+
+INFO  browser : executing script . . . . . . . . . . . . . .  [+118ms]
+      src = https://demo-browser.lightpanda.io/campfire-commerce/script.js
+      kind = javascript
+      cacheable = true
+
+INFO  http : request complete . . . . . . . . . . . . . . . . [+140ms]
+      source = xhr
+      url = https://demo-browser.lightpanda.io/campfire-commerce/json/product.json
+      status = 200
+      len = 4770
+
+INFO  http : request complete . . . . . . . . . . . . . . . . [+141ms]
+      source = fetch
+      url = https://demo-browser.lightpanda.io/campfire-commerce/json/reviews.json
+      status = 200
+      len = 1615
 <!DOCTYPE html>
 ```
 
 ### Start a CDP server
 
 ```console
-./lightpanda serve --host 127.0.0.1 --port 9222
+./lightpanda serve --obey_robots --log_format pretty  --log_level info --host 127.0.0.1 --port 9222
 ```
 ```console
-info(websocket): starting blocking worker to listen on 127.0.0.1:9222
-info(server): accepting new conn...
+INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
+      disabled = false
+
+INFO  app : server running . . . . . . . . . . . . . . . . .  [+0ms]
+      address = 127.0.0.1:9222
 ```
 
 Once the CDP server started, you can run a Puppeteer script by configuring the
@@ -115,7 +141,7 @@ const context = await browser.createBrowserContext();
 const page = await context.newPage();
 
 // Dump all the links from the page.
-await page.goto('https://wikipedia.com/');
+await page.goto('https://demo-browser.lightpanda.io/amiibo/', {waitUntil: "networkidle0"});
 
 const links = await page.evaluate(() => {
   return Array.from(document.querySelectorAll('a')).map(row => {
@@ -156,6 +182,7 @@ Here are the key features we have implemented:
 - [x] Custom HTTP headers
 - [x] Proxy support
 - [x] Network interception
+- [x] Respect `robots.txt` with option `--obey_robots`
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
@@ -178,6 +205,7 @@ For **Debian/Ubuntu based Linux**:
 
 ```
 sudo apt install xz-utils ca-certificates \
+    pkg-config libglib2.0-dev \
     clang make curl git
 ```
 You also need to [install Rust](https://rust-lang.org/tools/install/).

build.zig

@@ -35,7 +35,8 @@ pub fn build(b: *Build) !void {
     opts.addOption([]const u8, "git_commit", git_commit orelse "dev");
     opts.addOption(?[]const u8, "snapshot_path", snapshot_path);
 
-    const enable_tsan = b.option(bool, "tsan", "Enable Thread Sanitizer");
+    const enable_tsan = b.option(bool, "tsan", "Enable Thread Sanitizer") orelse false;
+    const enable_asan = b.option(bool, "asan", "Enable Address Sanitizer") orelse false;
     const enable_csan = b.option(std.zig.SanitizeC, "csan", "Enable C Sanitizers");
 
     const lightpanda_module = blk: {
@@ -50,7 +51,7 @@ pub fn build(b: *Build) !void {
         });
         mod.addImport("lightpanda", mod); // allow circular "lightpanda" import
 
-        try addDependencies(b, mod, opts, prebuilt_v8_path);
+        try addDependencies(b, mod, opts, enable_asan, enable_tsan, prebuilt_v8_path);
 
         break :blk mod;
     };
@@ -170,15 +171,25 @@ pub fn build(b: *Build) !void {
     }
 }
 
-fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options, prebuilt_v8_path: ?[]const u8) !void {
+fn addDependencies(
+    b: *Build,
+    mod: *Build.Module,
+    opts: *Build.Step.Options,
+    is_asan: bool,
+    is_tsan: bool,
+    prebuilt_v8_path: ?[]const u8,
+) !void {
     mod.addImport("build_config", opts.createModule());
 
     const target = mod.resolved_target.?;
     const dep_opts = .{
         .target = target,
         .optimize = mod.optimize.?,
-        .prebuilt_v8_path = prebuilt_v8_path,
         .cache_root = b.pathFromRoot(".lp-cache"),
+        .prebuilt_v8_path = prebuilt_v8_path,
+        .is_asan = is_asan,
+        .is_tsan = is_tsan,
+        .v8_enable_sandbox = is_tsan,
     };
 
     mod.addIncludePath(b.path("vendor/lightpanda"));

build.zig.zon

@@ -6,10 +6,10 @@
     .minimum_zig_version = "0.15.2",
     .dependencies = .{
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/v0.2.4.tar.gz",
-            .hash = "v8-0.0.0-xddH66YvBAD0YI9xr6F0Xgnw9wN30FdZ10FLyuoV3e66",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/refs/tags/v0.2.9.tar.gz",
+            .hash = "v8-0.0.0-xddH689vBACgpqFVEhT2wxRin-qQQSOcKJoM37MVo0rU",
         },
-        // .v8 = .{ .path = "../zig-v8-fork" },
+        //.v8 = .{ .path = "../zig-v8-fork" },
         .@"boringssl-zig" = .{
             .url = "git+https://github.com/Syndica/boringssl-zig.git#c53df00d06b02b755ad88bbf4d1202ed9687b096",
             .hash = "boringssl-0.1.0-VtJeWehMAAA4RNnwRnzEvKcS9rjsR1QVRw1uJrwXxmVK",

flake.lock

@@ -8,11 +8,11 @@
         "rust-analyzer-src": "rust-analyzer-src"
       },
       "locked": {
-        "lastModified": 1763016383,
-        "narHash": "sha256-eYmo7FNvm3q08iROzwIi8i9dWuUbJJl3uLR3OLnSmdI=",
+        "lastModified": 1770708269,
+        "narHash": "sha256-OnZW86app7hHJJoB5lC9GNXY5QBBIESJB+sIdwEyld0=",
         "owner": "nix-community",
         "repo": "fenix",
-        "rev": "0fad5c0e5c531358e7174cd666af4608f08bc3ba",
+        "rev": "6b5325a017a9a9fe7e6252ccac3680cc7181cd63",
         "type": "github"
       },
       "original": {
@@ -96,11 +96,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1763043403,
-        "narHash": "sha256-DgCTbHdIpzbXSlQlOZEWj8oPt2lrRMlSk03oIstvkVQ=",
+        "lastModified": 1768649915,
+        "narHash": "sha256-jc21hKogFnxU7KXSVTRmxC7u5D4RHwm9BAvDf5/Z1Uo=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "75e04ecd084f93d4105ce68c07dac7656291fe2e",
+        "rev": "3e3f3c7f9977dc123c23ee21e8085ed63daf8c37",
         "type": "github"
       },
       "original": {
@@ -122,11 +122,11 @@
     "rust-analyzer-src": {
       "flake": false,
       "locked": {
-        "lastModified": 1762860488,
-        "narHash": "sha256-rMfWMCOo/pPefM2We0iMBLi2kLBAnYoB9thi4qS7uk4=",
+        "lastModified": 1770668050,
+        "narHash": "sha256-Q05yaIZtQrBKHpyWaPmyJmDRj0lojnVf8nUFE0vydcY=",
         "owner": "rust-lang",
         "repo": "rust-analyzer",
-        "rev": "2efc80078029894eec0699f62ec8d5c1a56af763",
+        "rev": "9efc1f709f3c8134c3acac5d3592a8e4c184a0c6",
         "type": "github"
       },
       "original": {
@@ -175,11 +175,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1762907712,
-        "narHash": "sha256-VNW/+VYIg6N4b9Iq+F0YZmm22n74IdFS7hsPLblWuOY=",
+        "lastModified": 1770598090,
+        "narHash": "sha256-k+82IDgTd9o5sxHIqGlvfwseKln3Ejx1edGtDltuPXo=",
         "owner": "mitchellh",
         "repo": "zig-overlay",
-        "rev": "d16453ee78765e49527c56d23386cead799b6b53",
+        "rev": "142495696982c88edddc8e17e4da90d8164acadf",
         "type": "github"
       },
       "original": {

src/App.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -21,66 +21,38 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 
 const log = @import("log.zig");
-const Http = @import("http/Http.zig");
+const Config = @import("Config.zig");
 const Snapshot = @import("browser/js/Snapshot.zig");
 const Platform = @import("browser/js/Platform.zig");
-
-const Notification = @import("Notification.zig");
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
+const RobotStore = @import("browser/Robots.zig").RobotStore;
+
+pub const Http = @import("http/Http.zig");
+pub const ArenaPool = @import("ArenaPool.zig");
 
-// Container for global state / objects that various parts of the system
-// might need.
 const App = @This();
 
 http: Http,
-config: Config,
+config: *const Config,
 platform: Platform,
 snapshot: Snapshot,
 telemetry: Telemetry,
 allocator: Allocator,
+arena_pool: ArenaPool,
+robots: RobotStore,
 app_dir_path: ?[]const u8,
-notification: *Notification,
 shutdown: bool = false,
 
-pub const RunMode = enum {
-    help,
-    fetch,
-    serve,
-    version,
-};
-
-pub const Config = struct {
-    run_mode: RunMode,
-    tls_verify_host: bool = true,
-    http_proxy: ?[:0]const u8 = null,
-    proxy_bearer_token: ?[:0]const u8 = null,
-    http_timeout_ms: ?u31 = null,
-    http_connect_timeout_ms: ?u31 = null,
-    http_max_host_open: ?u8 = null,
-    http_max_concurrent: ?u8 = null,
-    user_agent: [:0]const u8,
-};
-
-pub fn init(allocator: Allocator, config: Config) !*App {
+pub fn init(allocator: Allocator, config: *const Config) !*App {
     const app = try allocator.create(App);
     errdefer allocator.destroy(app);
 
     app.config = config;
     app.allocator = allocator;
 
-    app.notification = try Notification.init(allocator, null);
-    errdefer app.notification.deinit();
+    app.robots = RobotStore.init(allocator);
 
-    app.http = try Http.init(allocator, .{
-        .max_host_open = config.http_max_host_open orelse 4,
-        .max_concurrent = config.http_max_concurrent orelse 10,
-        .timeout_ms = config.http_timeout_ms orelse 5000,
-        .connect_timeout_ms = config.http_connect_timeout_ms orelse 0,
-        .http_proxy = config.http_proxy,
-        .tls_verify_host = config.tls_verify_host,
-        .proxy_bearer_token = config.proxy_bearer_token,
-        .user_agent = config.user_agent,
-    });
+    app.http = try Http.init(allocator, &app.robots, config);
     errdefer app.http.deinit();
 
     app.platform = try Platform.init();
@@ -91,10 +63,11 @@ pub fn init(allocator: Allocator, config: Config) !*App {
 
     app.app_dir_path = getAndMakeAppDir(allocator);
 
-    app.telemetry = try Telemetry.init(app, config.run_mode);
+    app.telemetry = try Telemetry.init(app, config.mode);
     errdefer app.telemetry.deinit();
 
-    try app.telemetry.register(app.notification);
+    app.arena_pool = ArenaPool.init(allocator);
+    errdefer app.arena_pool.deinit();
 
     return app;
 }
@@ -110,10 +83,11 @@ pub fn deinit(self: *App) void {
         self.app_dir_path = null;
     }
     self.telemetry.deinit();
-    self.notification.deinit();
+    self.robots.deinit();
     self.http.deinit();
     self.snapshot.deinit();
     self.platform.deinit();
+    self.arena_pool.deinit();
 
     allocator.destroy(self);
 }

src/ArenaPool.zig

@@ -0,0 +1,101 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const ArenaPool = @This();
+
+allocator: Allocator,
+retain_bytes: usize,
+free_list_len: u16 = 0,
+free_list: ?*Entry = null,
+free_list_max: u16,
+entry_pool: std.heap.MemoryPool(Entry),
+mutex: std.Thread.Mutex = .{},
+
+const Entry = struct {
+    next: ?*Entry,
+    arena: ArenaAllocator,
+};
+
+pub fn init(allocator: Allocator) ArenaPool {
+    return .{
+        .allocator = allocator,
+        .free_list_max = 512, //  TODO make configurable
+        .retain_bytes = 1024 * 16, // TODO make configurable
+        .entry_pool = std.heap.MemoryPool(Entry).init(allocator),
+    };
+}
+
+pub fn deinit(self: *ArenaPool) void {
+    var entry = self.free_list;
+    while (entry) |e| {
+        entry = e.next;
+        e.arena.deinit();
+    }
+    self.entry_pool.deinit();
+}
+
+pub fn acquire(self: *ArenaPool) !Allocator {
+    self.mutex.lock();
+    defer self.mutex.unlock();
+
+    if (self.free_list) |entry| {
+        self.free_list = entry.next;
+        self.free_list_len -= 1;
+        return entry.arena.allocator();
+    }
+
+    const entry = try self.entry_pool.create();
+    entry.* = .{
+        .next = null,
+        .arena = ArenaAllocator.init(self.allocator),
+    };
+
+    return entry.arena.allocator();
+}
+
+pub fn release(self: *ArenaPool, allocator: Allocator) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    const entry: *Entry = @fieldParentPtr("arena", arena);
+
+    // Reset the arena before acquiring the lock to minimize lock hold time
+    _ = arena.reset(.{ .retain_with_limit = self.retain_bytes });
+
+    self.mutex.lock();
+    defer self.mutex.unlock();
+
+    const free_list_len = self.free_list_len;
+    if (free_list_len == self.free_list_max) {
+        arena.deinit();
+        self.entry_pool.destroy(entry);
+        return;
+    }
+
+    entry.next = self.free_list;
+    self.free_list_len = free_list_len + 1;
+    self.free_list = entry;
+}
+
+pub fn reset(_: *const ArenaPool, allocator: Allocator, retain: usize) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    _ = arena.reset(.{ .retain_with_limit = retain });
+}

src/Config.zig

@@ -0,0 +1,802 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const builtin = @import("builtin");
+const Allocator = std.mem.Allocator;
+
+const log = @import("log.zig");
+const dump = @import("browser/dump.zig");
+
+pub const RunMode = enum {
+    help,
+    fetch,
+    serve,
+    version,
+};
+
+pub const CDP_MAX_HTTP_REQUEST_SIZE = 4096;
+
+// max message size
+// +14 for max websocket payload overhead
+// +140 for the max control packet that might be interleaved in a message
+pub const CDP_MAX_MESSAGE_SIZE = 512 * 1024 + 14 + 140;
+
+mode: Mode,
+exec_name: []const u8,
+http_headers: HttpHeaders,
+
+const Config = @This();
+
+pub fn init(allocator: Allocator, exec_name: []const u8, mode: Mode) !Config {
+    var config = Config{
+        .mode = mode,
+        .exec_name = exec_name,
+        .http_headers = undefined,
+    };
+    config.http_headers = try HttpHeaders.init(allocator, &config);
+    return config;
+}
+
+pub fn deinit(self: *const Config, allocator: Allocator) void {
+    self.http_headers.deinit(allocator);
+}
+
+pub fn tlsVerifyHost(self: *const Config) bool {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.tls_verify_host,
+        else => unreachable,
+    };
+}
+
+pub fn obeyRobots(self: *const Config) bool {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.obey_robots,
+        else => unreachable,
+    };
+}
+
+pub fn httpProxy(self: *const Config) ?[:0]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_proxy,
+        else => unreachable,
+    };
+}
+
+pub fn proxyBearerToken(self: *const Config) ?[:0]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.proxy_bearer_token,
+        .help, .version => null,
+    };
+}
+
+pub fn httpMaxConcurrent(self: *const Config) u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_max_concurrent orelse 10,
+        else => unreachable,
+    };
+}
+
+pub fn httpMaxHostOpen(self: *const Config) u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_max_host_open orelse 4,
+        else => unreachable,
+    };
+}
+
+pub fn httpConnectTimeout(self: *const Config) u31 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_connect_timeout orelse 0,
+        else => unreachable,
+    };
+}
+
+pub fn httpTimeout(self: *const Config) u31 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_timeout orelse 5000,
+        else => unreachable,
+    };
+}
+
+pub fn httpMaxRedirects(_: *const Config) u8 {
+    return 10;
+}
+
+pub fn httpMaxResponseSize(self: *const Config) ?usize {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.http_max_response_size,
+        else => unreachable,
+    };
+}
+
+pub fn logLevel(self: *const Config) ?log.Level {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.log_level,
+        else => unreachable,
+    };
+}
+
+pub fn logFormat(self: *const Config) ?log.Format {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.log_format,
+        else => unreachable,
+    };
+}
+
+pub fn logFilterScopes(self: *const Config) ?[]const log.Scope {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.log_filter_scopes,
+        else => unreachable,
+    };
+}
+
+pub fn userAgentSuffix(self: *const Config) ?[]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch => |opts| opts.common.user_agent_suffix,
+        .help, .version => null,
+    };
+}
+
+pub fn maxConnections(self: *const Config) u16 {
+    return switch (self.mode) {
+        .serve => |opts| opts.cdp_max_connections,
+        else => unreachable,
+    };
+}
+
+pub fn maxPendingConnections(self: *const Config) u31 {
+    return switch (self.mode) {
+        .serve => |opts| opts.cdp_max_pending_connections,
+        else => unreachable,
+    };
+}
+
+pub const Mode = union(RunMode) {
+    help: bool, // false when being printed because of an error
+    fetch: Fetch,
+    serve: Serve,
+    version: void,
+};
+
+pub const Serve = struct {
+    host: []const u8 = "127.0.0.1",
+    port: u16 = 9222,
+    timeout: u31 = 10,
+    cdp_max_connections: u16 = 16,
+    cdp_max_pending_connections: u16 = 128,
+    common: Common = .{},
+};
+
+pub const DumpFormat = enum {
+    html,
+    markdown,
+};
+
+pub const Fetch = struct {
+    url: [:0]const u8,
+    dump_mode: ?DumpFormat = null,
+    common: Common = .{},
+    withbase: bool = false,
+    strip: dump.Opts.Strip = .{},
+};
+
+pub const Common = struct {
+    obey_robots: bool = false,
+    proxy_bearer_token: ?[:0]const u8 = null,
+    http_proxy: ?[:0]const u8 = null,
+    http_max_concurrent: ?u8 = null,
+    http_max_host_open: ?u8 = null,
+    http_timeout: ?u31 = null,
+    http_connect_timeout: ?u31 = null,
+    http_max_response_size: ?usize = null,
+    tls_verify_host: bool = true,
+    log_level: ?log.Level = null,
+    log_format: ?log.Format = null,
+    log_filter_scopes: ?[]log.Scope = null,
+    user_agent_suffix: ?[]const u8 = null,
+};
+
+/// Pre-formatted HTTP headers for reuse across Http and Client.
+/// Must be initialized with an allocator that outlives all HTTP connections.
+pub const HttpHeaders = struct {
+    const user_agent_base: [:0]const u8 = "Lightpanda/1.0";
+
+    user_agent: [:0]const u8, // User agent value (e.g. "Lightpanda/1.0")
+    user_agent_header: [:0]const u8,
+
+    proxy_bearer_header: ?[:0]const u8,
+
+    pub fn init(allocator: Allocator, config: *const Config) !HttpHeaders {
+        const user_agent: [:0]const u8 = if (config.userAgentSuffix()) |suffix|
+            try std.fmt.allocPrintSentinel(allocator, "{s} {s}", .{ user_agent_base, suffix }, 0)
+        else
+            user_agent_base;
+        errdefer if (config.userAgentSuffix() != null) allocator.free(user_agent);
+
+        const user_agent_header = try std.fmt.allocPrintSentinel(allocator, "User-Agent: {s}", .{user_agent}, 0);
+        errdefer allocator.free(user_agent_header);
+
+        const proxy_bearer_header: ?[:0]const u8 = if (config.proxyBearerToken()) |token|
+            try std.fmt.allocPrintSentinel(allocator, "Proxy-Authorization: Bearer {s}", .{token}, 0)
+        else
+            null;
+
+        return .{
+            .user_agent = user_agent,
+            .user_agent_header = user_agent_header,
+            .proxy_bearer_header = proxy_bearer_header,
+        };
+    }
+
+    pub fn deinit(self: *const HttpHeaders, allocator: Allocator) void {
+        if (self.proxy_bearer_header) |hdr| {
+            allocator.free(hdr);
+        }
+        allocator.free(self.user_agent_header);
+        if (self.user_agent.ptr != user_agent_base.ptr) {
+            allocator.free(self.user_agent);
+        }
+    }
+};
+
+pub fn printUsageAndExit(self: *const Config, success: bool) void {
+    //                                                                     MAX_HELP_LEN|
+    const common_options =
+        \\
+        \\--insecure_disable_tls_host_verification
+        \\                Disables host verification on all HTTP requests. This is an
+        \\                advanced option which should only be set if you understand
+        \\                and accept the risk of disabling host verification.
+        \\
+        \\--obey_robots
+        \\                Fetches and obeys the robots.txt (if available) of the web pages
+        \\                we make requests towards.
+        \\                Defaults to false.
+        \\
+        \\--http_proxy    The HTTP proxy to use for all HTTP requests.
+        \\                A username:password can be included for basic authentication.
+        \\                Defaults to none.
+        \\
+        \\--proxy_bearer_token
+        \\                The <token> to send for bearer authentication with the proxy
+        \\                Proxy-Authorization: Bearer <token>
+        \\
+        \\--http_max_concurrent
+        \\                The maximum number of concurrent HTTP requests.
+        \\                Defaults to 10.
+        \\
+        \\--http_max_host_open
+        \\                The maximum number of open connection to a given host:port.
+        \\                Defaults to 4.
+        \\
+        \\--http_connect_timeout
+        \\                The time, in milliseconds, for establishing an HTTP connection
+        \\                before timing out. 0 means it never times out.
+        \\                Defaults to 0.
+        \\
+        \\--http_timeout
+        \\                The maximum time, in milliseconds, the transfer is allowed
+        \\                to complete. 0 means it never times out.
+        \\                Defaults to 10000.
+        \\
+        \\--http_max_response_size
+        \\                Limits the acceptable response size for any request
+        \\                (e.g. XHR, fetch, script loading, ...).
+        \\                Defaults to no limit.
+        \\
+        \\--log_level     The log level: debug, info, warn, error or fatal.
+        \\                Defaults to
+    ++ (if (builtin.mode == .Debug) " info." else "warn.") ++
+        \\
+        \\
+        \\--log_format    The log format: pretty or logfmt.
+        \\                Defaults to
+    ++ (if (builtin.mode == .Debug) " pretty." else " logfmt.") ++
+        \\
+        \\
+        \\--log_filter_scopes
+        \\                Filter out too verbose logs per scope:
+        \\                http, unknown_prop, event, ...
+        \\
+        \\--user_agent_suffix
+        \\                Suffix to append to the Lightpanda/X.Y User-Agent
+        \\
+    ;
+
+    //                                                                     MAX_HELP_LEN|
+    const usage =
+        \\usage: {s} command [options] [URL]
+        \\
+        \\Command can be either 'fetch', 'serve' or 'help'
+        \\
+        \\fetch command
+        \\Fetches the specified URL
+        \\Example: {s} fetch --dump html https://lightpanda.io/
+        \\
+        \\Options:
+        \\--dump          Dumps document to stdout.
+        \\                Argument must be 'html' or 'markdown'.
+        \\                Defaults to no dump.
+        \\
+        \\--strip_mode    Comma separated list of tag groups to remove from dump
+        \\                the dump. e.g. --strip_mode js,css
+        \\                  - "js" script and link[as=script, rel=preload]
+        \\                  - "ui" includes img, picture, video, css and svg
+        \\                  - "css" includes style and link[rel=stylesheet]
+        \\                  - "full" includes js, ui and css
+        \\
+        \\--with_base     Add a <base> tag in dump. Defaults to false.
+        \\
+    ++ common_options ++
+        \\
+        \\serve command
+        \\Starts a websocket CDP server
+        \\Example: {s} serve --host 127.0.0.1 --port 9222
+        \\
+        \\Options:
+        \\--host          Host of the CDP server
+        \\                Defaults to "127.0.0.1"
+        \\
+        \\--port          Port of the CDP server
+        \\                Defaults to 9222
+        \\
+        \\--timeout       Inactivity timeout in seconds before disconnecting clients
+        \\                Defaults to 10 (seconds). Limited to 604800 (1 week).
+        \\
+        \\--cdp_max_connections
+        \\                Maximum number of simultaneous CDP connections.
+        \\                Defaults to 16.
+        \\
+        \\--cdp_max_pending_connections
+        \\                Maximum pending connections in the accept queue.
+        \\                Defaults to 128.
+        \\
+    ++ common_options ++
+        \\
+        \\version command
+        \\Displays the version of {s}
+        \\
+        \\help command
+        \\Displays this message
+        \\
+    ;
+    std.debug.print(usage, .{ self.exec_name, self.exec_name, self.exec_name, self.exec_name });
+    if (success) {
+        return std.process.cleanExit();
+    }
+    std.process.exit(1);
+}
+
+pub fn parseArgs(allocator: Allocator) !Config {
+    var args = try std.process.argsWithAllocator(allocator);
+    defer args.deinit();
+
+    const exec_name = try allocator.dupe(u8, std.fs.path.basename(args.next().?));
+
+    const mode_string = args.next() orelse "";
+    const run_mode = std.meta.stringToEnum(RunMode, mode_string) orelse blk: {
+        const inferred_mode = inferMode(mode_string) orelse
+            return init(allocator, exec_name, .{ .help = false });
+        // "command" wasn't a command but an option. We can't reset args, but
+        // we can create a new one. Not great, but this fallback is temporary
+        // as we transition to this command mode approach.
+        args.deinit();
+
+        args = try std.process.argsWithAllocator(allocator);
+        // skip the exec_name
+        _ = args.skip();
+
+        break :blk inferred_mode;
+    };
+
+    const mode: Mode = switch (run_mode) {
+        .help => .{ .help = true },
+        .serve => .{ .serve = parseServeArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
+        .fetch => .{ .fetch = parseFetchArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
+        .version => .{ .version = {} },
+    };
+    return init(allocator, exec_name, mode);
+}
+
+fn inferMode(opt: []const u8) ?RunMode {
+    if (opt.len == 0) {
+        return .serve;
+    }
+
+    if (std.mem.startsWith(u8, opt, "--") == false) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--dump")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--noscript")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--strip_mode")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--with_base")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--host")) {
+        return .serve;
+    }
+
+    if (std.mem.eql(u8, opt, "--port")) {
+        return .serve;
+    }
+
+    if (std.mem.eql(u8, opt, "--timeout")) {
+        return .serve;
+    }
+
+    return null;
+}
+
+fn parseServeArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Serve {
+    var serve: Serve = .{};
+
+    while (args.next()) |opt| {
+        if (std.mem.eql(u8, "--host", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--host" });
+                return error.InvalidArgument;
+            };
+            serve.host = try allocator.dupe(u8, str);
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--port", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--port" });
+                return error.InvalidArgument;
+            };
+
+            serve.port = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--port", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--timeout", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--timeout" });
+                return error.InvalidArgument;
+            };
+
+            serve.timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--timeout", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--cdp_max_connections", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_connections" });
+                return error.InvalidArgument;
+            };
+
+            serve.cdp_max_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--cdp_max_connections", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--cdp_max_pending_connections", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_pending_connections" });
+                return error.InvalidArgument;
+            };
+
+            serve.cdp_max_pending_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--cdp_max_pending_connections", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (try parseCommonArg(allocator, opt, args, &serve.common)) {
+            continue;
+        }
+
+        log.fatal(.app, "unknown argument", .{ .mode = "serve", .arg = opt });
+        return error.UnkownOption;
+    }
+
+    return serve;
+}
+
+fn parseFetchArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Fetch {
+    var dump_mode: ?DumpFormat = null;
+    var withbase: bool = false;
+    var url: ?[:0]const u8 = null;
+    var common: Common = .{};
+    var strip: dump.Opts.Strip = .{};
+
+    while (args.next()) |opt| {
+        if (std.mem.eql(u8, "--dump", opt)) {
+            var peek_args = args.*;
+            if (peek_args.next()) |next_arg| {
+                if (std.meta.stringToEnum(DumpFormat, next_arg)) |mode| {
+                    dump_mode = mode;
+                    _ = args.next();
+                } else {
+                    dump_mode = .html;
+                }
+            } else {
+                dump_mode = .html;
+            }
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--noscript", opt)) {
+            log.warn(.app, "deprecation warning", .{
+                .feature = "--noscript argument",
+                .hint = "use '--strip_mode js' instead",
+            });
+            strip.js = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--with_base", opt)) {
+            withbase = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--strip_mode", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--strip_mode" });
+                return error.InvalidArgument;
+            };
+
+            var it = std.mem.splitScalar(u8, str, ',');
+            while (it.next()) |part| {
+                const trimmed = std.mem.trim(u8, part, &std.ascii.whitespace);
+                if (std.mem.eql(u8, trimmed, "js")) {
+                    strip.js = true;
+                } else if (std.mem.eql(u8, trimmed, "ui")) {
+                    strip.ui = true;
+                } else if (std.mem.eql(u8, trimmed, "css")) {
+                    strip.css = true;
+                } else if (std.mem.eql(u8, trimmed, "full")) {
+                    strip.js = true;
+                    strip.ui = true;
+                    strip.css = true;
+                } else {
+                    log.fatal(.app, "invalid option choice", .{ .arg = "--strip_mode", .value = trimmed });
+                }
+            }
+            continue;
+        }
+
+        if (try parseCommonArg(allocator, opt, args, &common)) {
+            continue;
+        }
+
+        if (std.mem.startsWith(u8, opt, "--")) {
+            log.fatal(.app, "unknown argument", .{ .mode = "fetch", .arg = opt });
+            return error.UnkownOption;
+        }
+
+        if (url != null) {
+            log.fatal(.app, "duplicate fetch url", .{ .help = "only 1 URL can be specified" });
+            return error.TooManyURLs;
+        }
+        url = try allocator.dupeZ(u8, opt);
+    }
+
+    if (url == null) {
+        log.fatal(.app, "missing fetch url", .{ .help = "URL to fetch must be provided" });
+        return error.MissingURL;
+    }
+
+    return .{
+        .url = url.?,
+        .dump_mode = dump_mode,
+        .strip = strip,
+        .common = common,
+        .withbase = withbase,
+    };
+}
+
+fn parseCommonArg(
+    allocator: Allocator,
+    opt: []const u8,
+    args: *std.process.ArgIterator,
+    common: *Common,
+) !bool {
+    if (std.mem.eql(u8, "--insecure_disable_tls_host_verification", opt)) {
+        common.tls_verify_host = false;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--obey_robots", opt)) {
+        common.obey_robots = true;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_proxy", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_proxy" });
+            return error.InvalidArgument;
+        };
+        common.http_proxy = try allocator.dupeZ(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--proxy_bearer_token", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_bearer_token" });
+            return error.InvalidArgument;
+        };
+        common.proxy_bearer_token = try allocator.dupeZ(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_concurrent", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_concurrent" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_concurrent = std.fmt.parseInt(u8, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_concurrent", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_host_open", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_host_open" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_host_open = std.fmt.parseInt(u8, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_host_open", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_connect_timeout", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_connect_timeout" });
+            return error.InvalidArgument;
+        };
+
+        common.http_connect_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_connect_timeout", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_timeout", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_timeout" });
+            return error.InvalidArgument;
+        };
+
+        common.http_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_timeout", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_response_size", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_response_size" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_response_size = std.fmt.parseInt(usize, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_response_size", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_level", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--log_level" });
+            return error.InvalidArgument;
+        };
+
+        common.log_level = std.meta.stringToEnum(log.Level, str) orelse blk: {
+            if (std.mem.eql(u8, str, "error")) {
+                break :blk .err;
+            }
+            log.fatal(.app, "invalid option choice", .{ .arg = "--log_level", .value = str });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_format", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--log_format" });
+            return error.InvalidArgument;
+        };
+
+        common.log_format = std.meta.stringToEnum(log.Format, str) orelse {
+            log.fatal(.app, "invalid option choice", .{ .arg = "--log_format", .value = str });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_filter_scopes", opt)) {
+        if (builtin.mode != .Debug) {
+            log.fatal(.app, "experimental", .{ .help = "log scope filtering is only available in debug builds" });
+            return false;
+        }
+
+        const str = args.next() orelse {
+            // disables the default filters
+            common.log_filter_scopes = &.{};
+            return true;
+        };
+
+        var arr: std.ArrayList(log.Scope) = .empty;
+
+        var it = std.mem.splitScalar(u8, str, ',');
+        while (it.next()) |part| {
+            try arr.append(allocator, std.meta.stringToEnum(log.Scope, part) orelse {
+                log.fatal(.app, "invalid option choice", .{ .arg = "--log_filter_scopes", .value = part });
+                return false;
+            });
+        }
+        common.log_filter_scopes = arr.items;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--user_agent_suffix", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--user_agent_suffix" });
+            return error.InvalidArgument;
+        };
+        for (str) |c| {
+            if (!std.ascii.isPrint(c)) {
+                log.fatal(.app, "not printable character", .{ .arg = "--user_agent_suffix" });
+                return error.InvalidArgument;
+            }
+        }
+        common.user_agent_suffix = try allocator.dupe(u8, str);
+        return true;
+    }
+
+    return false;
+}

src/Notification.zig

@@ -39,10 +39,9 @@ const List = std.DoublyLinkedList;
 // CDP code registers for the "network_bytes_sent" event, because it needs to
 // send messages to the client when this happens. Our HTTP client could then
 // emit a "network_bytes_sent" message. It would be easy, and it would work.
-// That is, it would work until the Telemetry code makes an HTTP request, and
-// because everything's just one big global, that gets picked up by the
-// registered CDP listener, and the telemetry network activity gets sent to the
-// CDP client.
+// That is, it would work until multiple CDP clients connect, and because
+// everything's just one big global, events from one CDP session would be sent
+// to all CDP clients.
 //
 // To avoid this, one way or another, we need scoping. We could still have
 // a global registry but every "register" and every "emit" has some type of
@@ -50,14 +49,10 @@ const List = std.DoublyLinkedList;
 // between components to share a common scope.
 //
 // Instead, the approach that we take is to have a notification instance per
-// scope. This makes some things harder, but we only plan on having 2
-// notification instances  at a given time: one in a Browser and one in the App.
-// What about something like Telemetry, which lives outside of a Browser but
-// still cares about Browser-events (like .page_navigate)? When the Browser
-// notification is created, a `notification_created` event is raised in the
-// App's notification, which Telemetry is registered for. This allows Telemetry
-// to register for events in the Browser notification. See the Telemetry's
-// register function.
+// CDP connection (BrowserContext). Each CDP connection has its own notification
+// that is shared across all Sessions (tabs) within that connection. This ensures
+// proper isolation between different CDP clients while allowing a single client
+// to receive events from all its tabs.
 const Notification = @This();
 // Every event type (which are hard-coded), has a list of Listeners.
 // When the event happens, we dispatch to those listener.
@@ -66,7 +61,7 @@ event_listeners: EventListeners,
 // list of listeners for a specified receiver
 // @intFromPtr(receiver) -> [listener1, listener2, ...]
 // Used when `unregisterAll` is called.
-listeners: std.AutoHashMapUnmanaged(usize, std.ArrayListUnmanaged(*Listener)),
+listeners: std.AutoHashMapUnmanaged(usize, std.ArrayList(*Listener)),
 
 allocator: Allocator,
 mem_pool: std.heap.MemoryPool(Listener),
@@ -85,7 +80,6 @@ const EventListeners = struct {
     http_request_auth_required: List = .{},
     http_response_data: List = .{},
     http_response_header_done: List = .{},
-    notification_created: List = .{},
 };
 
 const Events = union(enum) {
@@ -102,7 +96,6 @@ const Events = union(enum) {
     http_request_done: *const RequestDone,
     http_response_data: *const ResponseData,
     http_response_header_done: *const ResponseHeaderDone,
-    notification_created: *Notification,
 };
 const EventType = std.meta.FieldEnum(Events);
 
@@ -162,12 +155,7 @@ pub const RequestFail = struct {
     err: anyerror,
 };
 
-pub fn init(allocator: Allocator, parent: ?*Notification) !*Notification {
-
-    // This is put on the heap because we want to raise a .notification_created
-    // event, so that, something like Telemetry, can receive the
-    // .page_navigate event on all notification instances. That can only work
-    // if we dispatch .notification_created with a *Notification.
+pub fn init(allocator: Allocator) !*Notification {
     const notification = try allocator.create(Notification);
     errdefer allocator.destroy(notification);
 
@@ -178,10 +166,6 @@ pub fn init(allocator: Allocator, parent: ?*Notification) !*Notification {
         .mem_pool = std.heap.MemoryPool(Listener).init(allocator),
     };
 
-    if (parent) |pn| {
-        pn.dispatch(.notification_created, notification);
-    }
-
     return notification;
 }
 
@@ -256,6 +240,9 @@ pub fn unregisterAll(self: *Notification, receiver: *anyopaque) void {
 }
 
 pub fn dispatch(self: *Notification, comptime event: EventType, data: ArgType(event)) void {
+    if (self.listeners.count() == 0) {
+        return;
+    }
     const list = &@field(self.event_listeners, @tagName(event));
 
     var node = list.first;
@@ -313,7 +300,7 @@ const Listener = struct {
 
 const testing = std.testing;
 test "Notification" {
-    var notifier = try Notification.init(testing.allocator, null);
+    var notifier = try Notification.init(testing.allocator);
     defer notifier.deinit();
 
     // noop

src/Server.zig

@@ -28,23 +28,25 @@ const ArenaAllocator = std.heap.ArenaAllocator;
 
 const log = @import("log.zig");
 const App = @import("App.zig");
+const Config = @import("Config.zig");
 const CDP = @import("cdp/cdp.zig").CDP;
-
-const MAX_HTTP_REQUEST_SIZE = 4096;
-
-// max message size
-// +14 for max websocket payload overhead
-// +140 for the max control packet that might be interleaved in a message
-const MAX_MESSAGE_SIZE = 512 * 1024 + 14 + 140;
+const Http = @import("http/Http.zig");
+const HttpClient = @import("http/Client.zig");
 
 const Server = @This();
+
 app: *App,
-shutdown: bool = false,
+shutdown: std.atomic.Value(bool) = .init(false),
 allocator: Allocator,
-client: ?posix.socket_t,
 listener: ?posix.socket_t,
 json_version_response: []const u8,
 
+// Thread management
+active_threads: std.atomic.Value(u32) = .init(0),
+clients: std.ArrayList(*Client) = .{},
+client_mutex: std.Thread.Mutex = .{},
+clients_pool: std.heap.MemoryPool(Client),
+
 pub fn init(app: *App, address: net.Address) !Server {
     const allocator = app.allocator;
     const json_version_response = try buildJSONVersionResponse(allocator, address);
@@ -52,19 +54,28 @@ pub fn init(app: *App, address: net.Address) !Server {
 
     return .{
         .app = app,
-        .client = null,
         .listener = null,
         .allocator = allocator,
         .json_version_response = json_version_response,
+        .clients_pool = std.heap.MemoryPool(Client).init(app.allocator),
     };
 }
 
 /// Interrupts the server so that main can complete normally and call all defer handlers.
 pub fn stop(self: *Server) void {
-    if (@atomicRmw(bool, &self.shutdown, .Xchg, true, .monotonic)) {
+    if (self.shutdown.swap(true, .release)) {
         return;
     }
 
+    // Shutdown all active clients
+    {
+        self.client_mutex.lock();
+        defer self.client_mutex.unlock();
+        for (self.clients.items) |client| {
+            client.stop();
+        }
+    }
+
     // Linux and BSD/macOS handle canceling a socket blocked on accept differently.
     // For Linux, we use std.shutdown, which will cause accept to return error.SocketNotListening (EINVAL).
     // For BSD, shutdown will return an error. Instead we call posix.close, which will result with error.ConnectionAborted (BADF).
@@ -81,17 +92,22 @@ pub fn stop(self: *Server) void {
 }
 
 pub fn deinit(self: *Server) void {
+    if (!self.shutdown.load(.acquire)) {
+        self.stop();
+    }
+
+    self.joinThreads();
     if (self.listener) |listener| {
         posix.close(listener);
         self.listener = null;
     }
-    // *if* server.run is running, we should really wait for it to return
-    // before existing from here.
+    self.clients.deinit(self.allocator);
+    self.clients_pool.deinit();
     self.allocator.free(self.json_version_response);
 }
 
 pub fn run(self: *Server, address: net.Address, timeout_ms: u32) !void {
-    const flags = posix.SOCK.STREAM | posix.SOCK.CLOEXEC;
+    const flags = posix.SOCK.STREAM | posix.SOCK.CLOEXEC | posix.SOCK.NONBLOCK;
     const listener = try posix.socket(address.any.family, flags, posix.IPPROTO.TCP);
     self.listener = listener;
 
@@ -101,16 +117,20 @@ pub fn run(self: *Server, address: net.Address, timeout_ms: u32) !void {
     }
 
     try posix.bind(listener, &address.any, address.getOsSockLen());
-    try posix.listen(listener, 1);
+    try posix.listen(listener, self.app.config.maxPendingConnections());
 
     log.info(.app, "server running", .{ .address = address });
-    while (!@atomicLoad(bool, &self.shutdown, .monotonic)) {
+    while (!self.shutdown.load(.acquire)) {
         const socket = posix.accept(listener, null, null, posix.SOCK.NONBLOCK) catch |err| {
             switch (err) {
                 error.SocketNotListening, error.ConnectionAborted => {
                     log.info(.app, "server stopped", .{});
                     break;
                 },
+                error.WouldBlock => {
+                    std.Thread.sleep(10 * std.time.ns_per_ms);
+                    continue;
+                },
                 else => {
                     log.err(.app, "CDP accept", .{ .err = err });
                     std.Thread.sleep(std.time.ns_per_s);
@@ -119,97 +139,121 @@ pub fn run(self: *Server, address: net.Address, timeout_ms: u32) !void {
             }
         };
 
-        self.client = socket;
-        defer if (self.client) |s| {
-            posix.close(s);
-            self.client = null;
-        };
-
-        if (log.enabled(.app, .info)) {
-            var client_address: std.net.Address = undefined;
-            var socklen: posix.socklen_t = @sizeOf(net.Address);
-            try std.posix.getsockname(socket, &client_address.any, &socklen);
-            log.info(.app, "client connected", .{ .ip = client_address });
-        }
-
-        self.readLoop(socket, timeout_ms) catch |err| {
-            log.err(.app, "CDP client loop", .{ .err = err });
+        self.spawnWorker(socket, timeout_ms) catch |err| {
+            log.err(.app, "CDP spawn", .{ .err = err });
+            posix.close(socket);
         };
     }
 }
 
-fn readLoop(self: *Server, socket: posix.socket_t, timeout_ms: u32) !void {
-    // This shouldn't be necessary, but the Client is HUGE (> 512KB) because
-    // it has a large read buffer. I don't know why, but v8 crashes if this
-    // is on the stack (and I assume it's related to its size).
-    const client = try self.allocator.create(Client);
-    defer self.allocator.destroy(client);
+fn handleConnection(self: *Server, socket: posix.socket_t, timeout_ms: u32) void {
+    defer posix.close(socket);
 
-    client.* = try Client.init(socket, self);
+    // Client is HUGE (> 512KB) because it has a large read buffer.
+    // V8 crashes if this is on the stack (likely related to its size).
+    const client = self.getClient() catch |err| {
+        log.err(.app, "CDP client create", .{ .err = err });
+        return;
+    };
+    defer self.releaseClient(client);
+
+    client.* = Client.init(
+        socket,
+        self.allocator,
+        self.app,
+        self.json_version_response,
+        timeout_ms,
+    ) catch |err| {
+        log.err(.app, "CDP client init", .{ .err = err });
+        return;
+    };
     defer client.deinit();
 
-    var http = &self.app.http;
-    http.addCDPClient(.{
-        .socket = socket,
-        .ctx = client,
-        .blocking_read_start = Client.blockingReadStart,
-        .blocking_read = Client.blockingRead,
-        .blocking_read_end = Client.blockingReadStop,
-    });
-    defer http.removeCDPClient();
+    self.registerClient(client);
+    defer self.unregisterClient(client);
 
-    lp.assert(client.mode == .http, "Server.readLoop invalid mode", .{});
-    while (true) {
-        if (http.poll(timeout_ms) != .cdp_socket) {
-            log.info(.app, "CDP timeout", .{});
-            return;
-        }
-
-        if (client.readSocket() == false) {
-            return;
-        }
-
-        if (client.mode == .cdp) {
-            break; // switch to our CDP loop
-        }
+    // Check shutdown after registering to avoid missing stop() signal.
+    // If stop() already iterated over clients, this client won't receive stop()
+    // and would block joinThreads() indefinitely.
+    if (self.shutdown.load(.acquire)) {
+        return;
     }
 
-    var cdp = &client.mode.cdp;
-    var last_message = timestamp(.monotonic);
-    var ms_remaining = timeout_ms;
-    while (true) {
-        switch (cdp.pageWait(ms_remaining)) {
-            .cdp_socket => {
-                if (client.readSocket() == false) {
-                    return;
-                }
-                last_message = timestamp(.monotonic);
-                ms_remaining = timeout_ms;
-            },
-            .no_page => {
-                if (http.poll(ms_remaining) != .cdp_socket) {
-                    log.info(.app, "CDP timeout", .{});
-                    return;
-                }
-                if (client.readSocket() == false) {
-                    return;
-                }
-                last_message = timestamp(.monotonic);
-                ms_remaining = timeout_ms;
-            },
-            .done => {
-                const elapsed = timestamp(.monotonic) - last_message;
-                if (elapsed > ms_remaining) {
-                    log.info(.app, "CDP timeout", .{});
-                    return;
-                }
-                ms_remaining -= @intCast(elapsed);
-            },
-            .navigate => unreachable, // must have been handled by the session
+    client.start();
+}
+
+fn getClient(self: *Server) !*Client {
+    self.client_mutex.lock();
+    defer self.client_mutex.unlock();
+    return self.clients_pool.create();
+}
+
+fn releaseClient(self: *Server, client: *Client) void {
+    self.client_mutex.lock();
+    defer self.client_mutex.unlock();
+    self.clients_pool.destroy(client);
+}
+
+fn registerClient(self: *Server, client: *Client) void {
+    self.client_mutex.lock();
+    defer self.client_mutex.unlock();
+    self.clients.append(self.allocator, client) catch {};
+}
+
+fn unregisterClient(self: *Server, client: *Client) void {
+    self.client_mutex.lock();
+    defer self.client_mutex.unlock();
+    for (self.clients.items, 0..) |c, i| {
+        if (c == client) {
+            _ = self.clients.swapRemove(i);
+            break;
         }
     }
 }
 
+fn spawnWorker(self: *Server, socket: posix.socket_t, timeout_ms: u32) !void {
+    if (self.shutdown.load(.acquire)) {
+        return error.ShuttingDown;
+    }
+
+    // Atomically increment active_threads only if below max_connections.
+    // Uses CAS loop to avoid race between checking the limit and incrementing.
+    //
+    // cmpxchgWeak may fail for two reasons:
+    // 1. Another thread changed the value (increment or decrement)
+    // 2. Spurious failure on some architectures (e.g. ARM)
+    //
+    // We use Weak instead of Strong because we need a retry loop anyway:
+    // if CAS fails because a thread finished (counter decreased), we should
+    // retry rather than return an error - there may now be room for a new connection.
+    //
+    // On failure, cmpxchgWeak returns the actual value, which we reuse to avoid
+    // an extra load on the next iteration.
+    const max_connections = self.app.config.maxConnections();
+    var current = self.active_threads.load(.monotonic);
+    while (current < max_connections) {
+        current = self.active_threads.cmpxchgWeak(current, current + 1, .monotonic, .monotonic) orelse break;
+    } else {
+        return error.MaxThreadsReached;
+    }
+    errdefer _ = self.active_threads.fetchSub(1, .monotonic);
+
+    const thread = try std.Thread.spawn(.{}, runWorker, .{ self, socket, timeout_ms });
+    thread.detach();
+}
+
+fn runWorker(self: *Server, socket: posix.socket_t, timeout_ms: u32) void {
+    defer _ = self.active_threads.fetchSub(1, .monotonic);
+    handleConnection(self, socket, timeout_ms);
+}
+
+fn joinThreads(self: *Server) void {
+    while (self.active_threads.load(.monotonic) > 0) {
+        std.Thread.sleep(10 * std.time.ns_per_ms);
+    }
+}
+
+// Handle exactly one TCP connection.
 pub const Client = struct {
     // The client is initially serving HTTP requests but, under normal circumstances
     // should eventually be upgraded to a websocket connections
@@ -218,11 +262,15 @@ pub const Client = struct {
         cdp: CDP,
     },
 
-    server: *Server,
+    allocator: Allocator,
+    app: *App,
+    http: *HttpClient,
+    json_version_response: []const u8,
     reader: Reader(true),
     socket: posix.socket_t,
     socket_flags: usize,
     send_arena: ArenaAllocator,
+    timeout_ms: u32,
 
     const EMPTY_PONG = [_]u8{ 138, 0 };
 
@@ -233,25 +281,49 @@ pub const Client = struct {
     // "private-use" close codes must be from 4000-49999
     const CLOSE_TIMEOUT = [_]u8{ 136, 2, 15, 160 }; // code: 4000
 
-    fn init(socket: posix.socket_t, server: *Server) !Client {
+    fn init(
+        socket: posix.socket_t,
+        allocator: Allocator,
+        app: *App,
+        json_version_response: []const u8,
+        timeout_ms: u32,
+    ) !Client {
+        if (log.enabled(.app, .info)) {
+            var client_address: std.net.Address = undefined;
+            var socklen: posix.socklen_t = @sizeOf(net.Address);
+            try std.posix.getsockname(socket, &client_address.any, &socklen);
+            log.info(.app, "client connected", .{ .ip = client_address });
+        }
+
         const socket_flags = try posix.fcntl(socket, posix.F.GETFL, 0);
         const nonblocking = @as(u32, @bitCast(posix.O{ .NONBLOCK = true }));
         // we expect the socket to come to us as nonblocking
         lp.assert(socket_flags & nonblocking == nonblocking, "Client.init blocking", .{});
 
-        var reader = try Reader(true).init(server.allocator);
+        var reader = try Reader(true).init(allocator);
         errdefer reader.deinit();
 
+        const http = try app.http.createClient(allocator);
+        errdefer http.deinit();
+
         return .{
             .socket = socket,
-            .server = server,
+            .allocator = allocator,
+            .app = app,
+            .http = http,
+            .json_version_response = json_version_response,
             .reader = reader,
             .mode = .{ .http = {} },
             .socket_flags = socket_flags,
-            .send_arena = ArenaAllocator.init(server.allocator),
+            .send_arena = ArenaAllocator.init(allocator),
+            .timeout_ms = timeout_ms,
         };
     }
 
+    fn stop(self: *Client) void {
+        posix.shutdown(self.socket, .recv) catch {};
+    }
+
     fn deinit(self: *Client) void {
         switch (self.mode) {
             .cdp => |*cdp| cdp.deinit(),
@@ -259,6 +331,88 @@ pub const Client = struct {
         }
         self.reader.deinit();
         self.send_arena.deinit();
+        self.http.deinit();
+    }
+
+    fn start(self: *Client) void {
+        const http = self.http;
+        http.cdp_client = .{
+            .socket = self.socket,
+            .ctx = self,
+            .blocking_read_start = Client.blockingReadStart,
+            .blocking_read = Client.blockingRead,
+            .blocking_read_end = Client.blockingReadStop,
+        };
+        defer http.cdp_client = null;
+
+        self.httpLoop(http) catch |err| {
+            log.err(.app, "CDP client loop", .{ .err = err });
+        };
+    }
+
+    fn httpLoop(self: *Client, http: *HttpClient) !void {
+        lp.assert(self.mode == .http, "Client.httpLoop invalid mode", .{});
+        while (true) {
+            const status = http.tick(self.timeout_ms) catch |err| {
+                log.err(.app, "http tick", .{ .err = err });
+                return;
+            };
+            if (status != .cdp_socket) {
+                log.info(.app, "CDP timeout", .{});
+                return;
+            }
+
+            if (self.readSocket() == false) {
+                return;
+            }
+
+            if (self.mode == .cdp) {
+                break;
+            }
+        }
+
+        return self.cdpLoop(http);
+    }
+
+    fn cdpLoop(self: *Client, http: *HttpClient) !void {
+        var cdp = &self.mode.cdp;
+        var last_message = timestamp(.monotonic);
+        var ms_remaining = self.timeout_ms;
+
+        while (true) {
+            switch (cdp.pageWait(ms_remaining)) {
+                .cdp_socket => {
+                    if (self.readSocket() == false) {
+                        return;
+                    }
+                    last_message = timestamp(.monotonic);
+                    ms_remaining = self.timeout_ms;
+                },
+                .no_page => {
+                    const status = http.tick(ms_remaining) catch |err| {
+                        log.err(.app, "http tick", .{ .err = err });
+                        return;
+                    };
+                    if (status != .cdp_socket) {
+                        log.info(.app, "CDP timeout", .{});
+                        return;
+                    }
+                    if (self.readSocket() == false) {
+                        return;
+                    }
+                    last_message = timestamp(.monotonic);
+                    ms_remaining = self.timeout_ms;
+                },
+                .done => {
+                    const elapsed = timestamp(.monotonic) - last_message;
+                    if (elapsed > ms_remaining) {
+                        log.info(.app, "CDP timeout", .{});
+                        return;
+                    }
+                    ms_remaining -= @intCast(elapsed);
+                },
+            }
+        }
     }
 
     fn blockingReadStart(ctx: *anyopaque) bool {
@@ -315,7 +469,7 @@ pub const Client = struct {
         lp.assert(self.reader.pos == 0, "Client.HTTP pos", .{ .pos = self.reader.pos });
         const request = self.reader.buf[0..self.reader.len];
 
-        if (request.len > MAX_HTTP_REQUEST_SIZE) {
+        if (request.len > Config.CDP_MAX_HTTP_REQUEST_SIZE) {
             self.writeHTTPErrorResponse(413, "Request too large");
             return error.RequestTooLarge;
         }
@@ -368,7 +522,7 @@ pub const Client = struct {
         }
 
         if (std.mem.eql(u8, url, "/json/version")) {
-            try self.send(self.server.json_version_response);
+            try self.send(self.json_version_response);
             // Chromedp (a Go driver) does an http request to /json/version
             // then to / (websocket upgrade) using a different connection.
             // Since we only allow 1 connection at a time, the 2nd one (the
@@ -473,7 +627,7 @@ pub const Client = struct {
             break :blk res;
         };
 
-        self.mode = .{ .cdp = try CDP.init(self.server.app, self) };
+        self.mode = .{ .cdp = try CDP.init(self.app, self.http, self) };
         return self.send(response);
     }
 
@@ -561,7 +715,7 @@ pub const Client = struct {
 
     pub fn sendJSONRaw(
         self: *Client,
-        buf: std.ArrayListUnmanaged(u8),
+        buf: std.ArrayList(u8),
     ) !void {
         // Dangerous API!. We assume the caller has reserved the first 10
         // bytes in `buf`.
@@ -708,7 +862,7 @@ fn Reader(comptime EXPECT_MASK: bool) type {
                     if (message_len > 125) {
                         return error.ControlTooLarge;
                     }
-                } else if (message_len > MAX_MESSAGE_SIZE) {
+                } else if (message_len > Config.CDP_MAX_MESSAGE_SIZE) {
                     return error.TooLarge;
                 } else if (message_len > self.buf.len) {
                     const len = self.buf.len;
@@ -736,7 +890,7 @@ fn Reader(comptime EXPECT_MASK: bool) type {
 
                 if (is_continuation) {
                     const fragments = &(self.fragments orelse return error.InvalidContinuation);
-                    if (fragments.message.items.len + message_len > MAX_MESSAGE_SIZE) {
+                    if (fragments.message.items.len + message_len > Config.CDP_MAX_MESSAGE_SIZE) {
                         return error.TooLarge;
                     }
 
@@ -883,7 +1037,7 @@ fn growBuffer(allocator: Allocator, buf: []u8, required_capacity: usize) ![]u8 {
 
 const Fragments = struct {
     type: Message.Type,
-    message: std.ArrayListUnmanaged(u8),
+    message: std.ArrayList(u8),
 };
 
 const Message = struct {
@@ -907,7 +1061,7 @@ const OpCode = enum(u8) {
     pong = 128 | 10,
 };
 
-fn fillWebsocketHeader(buf: std.ArrayListUnmanaged(u8)) []const u8 {
+fn fillWebsocketHeader(buf: std.ArrayList(u8)) []const u8 {
     // can't use buf[0..10] here, because the header length
     // is variable. If it's just 2 bytes, for example, we need the
     // framed message to be:
@@ -1342,7 +1496,7 @@ fn assertWebSocketMessage(expected: []const u8, input: []const u8) !void {
 }
 
 const MockCDP = struct {
-    messages: std.ArrayListUnmanaged([]const u8) = .{},
+    messages: std.ArrayList([]const u8) = .{},
 
     allocator: Allocator = testing.allocator,
 

src/TestHTTPServer.zig

@@ -20,7 +20,7 @@ const std = @import("std");
 
 const TestHTTPServer = @This();
 
-shutdown: bool,
+shutdown: std.atomic.Value(bool),
 listener: ?std.net.Server,
 handler: Handler,
 
@@ -28,16 +28,23 @@ const Handler = *const fn (req: *std.http.Server.Request) anyerror!void;
 
 pub fn init(handler: Handler) TestHTTPServer {
     return .{
-        .shutdown = true,
+        .shutdown = .init(true),
         .listener = null,
         .handler = handler,
     };
 }
 
 pub fn deinit(self: *TestHTTPServer) void {
-    self.shutdown = true;
+    self.listener = null;
+}
+
+pub fn stop(self: *TestHTTPServer) void {
+    self.shutdown.store(true, .release);
     if (self.listener) |*listener| {
-        listener.deinit();
+        switch (@import("builtin").target.os.tag) {
+            .linux => std.posix.shutdown(listener.stream.handle, .recv) catch {},
+            else => std.posix.close(listener.stream.handle),
+        }
     }
 }
 
@@ -46,12 +53,13 @@ pub fn run(self: *TestHTTPServer, wg: *std.Thread.WaitGroup) !void {
 
     self.listener = try address.listen(.{ .reuse_address = true });
     var listener = &self.listener.?;
+    self.shutdown.store(false, .release);
 
     wg.finish();
 
     while (true) {
         const conn = listener.accept() catch |err| {
-            if (self.shutdown) {
+            if (self.shutdown.load(.acquire) or err == error.SocketNotListening) {
                 return;
             }
             return err;

src/browser/Browser.zig

@@ -25,11 +25,13 @@ const js = @import("js/js.zig");
 const log = @import("../log.zig");
 const App = @import("../App.zig");
 const HttpClient = @import("../http/Client.zig");
-const Notification = @import("../Notification.zig");
+
+const ArenaPool = App.ArenaPool;
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const Session = @import("Session.zig");
+const Notification = @import("../Notification.zig");
 
 // Browser is an instance of the browser.
 // You can create multiple browser instances.
@@ -40,54 +42,40 @@ env: js.Env,
 app: *App,
 session: ?Session,
 allocator: Allocator,
+arena_pool: *ArenaPool,
 http_client: *HttpClient,
-call_arena: ArenaAllocator,
-page_arena: ArenaAllocator,
-session_arena: ArenaAllocator,
-transfer_arena: ArenaAllocator,
-notification: *Notification,
 
-pub fn init(app: *App) !Browser {
+const InitOpts = struct {
+    env: js.Env.InitOpts = .{},
+    http_client: *HttpClient,
+};
+
+pub fn init(app: *App, opts: InitOpts) !Browser {
     const allocator = app.allocator;
 
-    var env = try js.Env.init(allocator, &app.platform, &app.snapshot);
+    var env = try js.Env.init(app, opts.env);
     errdefer env.deinit();
 
-    const notification = try Notification.init(allocator, app.notification);
-    app.http.client.notification = notification;
-    app.http.client.next_request_id = 0; // Should we track ids in CDP only?
-    errdefer notification.deinit();
-
     return .{
         .app = app,
         .env = env,
         .session = null,
         .allocator = allocator,
-        .notification = notification,
-        .http_client = app.http.client,
-        .call_arena = ArenaAllocator.init(allocator),
-        .page_arena = ArenaAllocator.init(allocator),
-        .session_arena = ArenaAllocator.init(allocator),
-        .transfer_arena = ArenaAllocator.init(allocator),
+        .arena_pool = &app.arena_pool,
+        .http_client = opts.http_client,
     };
 }
 
 pub fn deinit(self: *Browser) void {
     self.closeSession();
     self.env.deinit();
-    self.call_arena.deinit();
-    self.page_arena.deinit();
-    self.session_arena.deinit();
-    self.transfer_arena.deinit();
-    self.http_client.notification = null;
-    self.notification.deinit();
 }
 
-pub fn newSession(self: *Browser) !*Session {
+pub fn newSession(self: *Browser, notification: *Notification) !*Session {
     self.closeSession();
     self.session = @as(Session, undefined);
     const session = &self.session.?;
-    try Session.init(session, self);
+    try Session.init(session, self, notification);
     return session;
 }
 
@@ -95,8 +83,7 @@ pub fn closeSession(self: *Browser) void {
     if (self.session) |*session| {
         session.deinit();
         self.session = null;
-        _ = self.session_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
-        self.env.lowMemoryNotification();
+        self.env.memoryPressureNotification(.critical);
     }
 }
 
@@ -104,6 +91,10 @@ pub fn runMicrotasks(self: *const Browser) void {
     self.env.runMicrotasks();
 }
 
+pub fn runMacrotasks(self: *Browser) !?u64 {
+    return try self.env.runMacrotasks();
+}
+
 pub fn runMessageLoop(self: *const Browser) void {
     while (self.env.pumpMessageLoop()) {
         if (comptime IS_DEBUG) {

src/browser/EventManager.zig

@@ -28,28 +28,52 @@ const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Event = @import("webapi/Event.zig");
 const EventTarget = @import("webapi/EventTarget.zig");
+const Element = @import("webapi/Element.zig");
 
 const Allocator = std.mem.Allocator;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
+const EventKey = struct {
+    event_target: usize,
+    type_string: String,
+};
+
+const EventKeyContext = struct {
+    pub fn hash(_: @This(), key: EventKey) u64 {
+        var hasher = std.hash.Wyhash.init(0);
+        hasher.update(std.mem.asBytes(&key.event_target));
+        hasher.update(key.type_string.str());
+        return hasher.final();
+    }
+
+    pub fn eql(_: @This(), a: EventKey, b: EventKey) bool {
+        return a.event_target == b.event_target and a.type_string.eql(b.type_string);
+    }
+};
+
 pub const EventManager = @This();
 
 page: *Page,
 arena: Allocator,
 listener_pool: std.heap.MemoryPool(Listener),
 list_pool: std.heap.MemoryPool(std.DoublyLinkedList),
-lookup: std.AutoHashMapUnmanaged(usize, *std.DoublyLinkedList),
+lookup: std.HashMapUnmanaged(
+    EventKey,
+    *std.DoublyLinkedList,
+    EventKeyContext,
+    std.hash_map.default_max_load_percentage,
+),
 dispatch_depth: usize,
 deferred_removals: std.ArrayList(struct { list: *std.DoublyLinkedList, listener: *Listener }),
 
-pub fn init(page: *Page) EventManager {
+pub fn init(arena: Allocator, page: *Page) EventManager {
     return .{
         .page = page,
         .lookup = .{},
-        .arena = page.arena,
-        .list_pool = std.heap.MemoryPool(std.DoublyLinkedList).init(page.arena),
-        .listener_pool = std.heap.MemoryPool(Listener).init(page.arena),
+        .arena = arena,
+        .list_pool = .init(arena),
+        .listener_pool = .init(arena),
         .dispatch_depth = 0,
         .deferred_removals = .{},
     };
@@ -69,7 +93,7 @@ pub const Callback = union(enum) {
 
 pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, opts: RegisterOptions) !void {
     if (comptime IS_DEBUG) {
-        log.debug(.event, "eventManager.register", .{ .type = typ, .capture = opts.capture, .once = opts.once, .target = target });
+        log.debug(.event, "eventManager.register", .{ .type = typ, .capture = opts.capture, .once = opts.once, .target = target.toString() });
     }
 
     // If a signal is provided and already aborted, don't register the listener
@@ -79,20 +103,24 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
         }
     }
 
-    const gop = try self.lookup.getOrPut(self.arena, @intFromPtr(target));
+    // Allocate the type string we'll use in both listener and key
+    const type_string = try String.init(self.arena, typ, .{});
+
+    const gop = try self.lookup.getOrPut(self.arena, .{
+        .type_string = type_string,
+        .event_target = @intFromPtr(target),
+    });
     if (gop.found_existing) {
         // check for duplicate callbacks already registered
         var node = gop.value_ptr.*.first;
         while (node) |n| {
             const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
-            if (listener.typ.eqlSlice(typ)) {
-                const is_duplicate = switch (callback) {
-                    .object => |obj| listener.function.eqlObject(obj),
-                    .function => |func| listener.function.eqlFunction(func),
-                };
-                if (is_duplicate and listener.capture == opts.capture) {
-                    return;
-                }
+            const is_duplicate = switch (callback) {
+                .object => |obj| listener.function.eqlObject(obj),
+                .function => |func| listener.function.eqlFunction(func),
+            };
+            if (is_duplicate and listener.capture == opts.capture) {
+                return;
             }
             node = n.next;
         }
@@ -114,20 +142,34 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
         .passive = opts.passive,
         .function = func,
         .signal = opts.signal,
-        .typ = try String.init(self.arena, typ, .{}),
+        .typ = type_string,
     };
     // append the listener to the list of listeners for this target
     gop.value_ptr.*.append(&listener.node);
 }
 
 pub fn remove(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, use_capture: bool) void {
-    const list = self.lookup.get(@intFromPtr(target)) orelse return;
-    if (findListener(list, typ, callback, use_capture)) |listener| {
+    const list = self.lookup.get(.{
+        .type_string = .wrap(typ),
+        .event_target = @intFromPtr(target),
+    }) orelse return;
+    if (findListener(list, callback, use_capture)) |listener| {
         self.removeListener(list, listener);
     }
 }
 
-pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void {
+// Dispatching can be recursive from the compiler's point of view, so we need to
+// give it an explicit error set so that other parts of the code can use and
+// inferred error.
+const DispatchError = error{
+    OutOfMemory,
+    StringTooLarge,
+    JSExecCallback,
+    CompilationError,
+    ExecutionError,
+    JsException,
+};
+pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) DispatchError!void {
     if (comptime IS_DEBUG) {
         log.debug(.event, "eventManager.dispatch", .{ .type = event._type_string.str(), .bubbles = event._bubbles });
     }
@@ -137,7 +179,10 @@ pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void
     var was_handled = false;
 
     defer if (was_handled) {
-        self.page.js.runMicrotasks();
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+        ls.local.runMicrotasks();
     };
 
     switch (target._type) {
@@ -151,9 +196,13 @@ pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void
         .navigation,
         .screen,
         .screen_orientation,
+        .visual_viewport,
         .generic,
         => {
-            const list = self.lookup.get(@intFromPtr(target)) orelse return;
+            const list = self.lookup.get(.{
+                .event_target = @intFromPtr(target),
+                .type_string = event._type_string,
+            }) orelse return;
             try self.dispatchAll(list, target, event, &was_handled);
         },
     }
@@ -180,7 +229,10 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
 
     var was_dispatched = false;
     defer if (was_dispatched) {
-        self.page.js.runMicrotasks();
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+        ls.local.runMicrotasks();
     };
 
     if (function_) |func| {
@@ -193,27 +245,37 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
         }
     }
 
-    const list = self.lookup.get(@intFromPtr(target)) orelse return;
+    const list = self.lookup.get(.{
+        .event_target = @intFromPtr(target),
+        .type_string = event._type_string,
+    }) orelse return;
     try self.dispatchAll(list, target, event, &was_dispatched);
 }
 
 fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled: *bool) !void {
     const ShadowRoot = @import("webapi/ShadowRoot.zig");
 
+    const page = self.page;
+    const activation_state = ActivationState.create(event, target, page);
+
     // Defer runs even on early return - ensures event phase is reset
     // and default actions execute (unless prevented)
     defer {
         event._event_phase = .none;
+        // Handle checkbox/radio activation rollback or commit
+        if (activation_state) |state| {
+            state.restore(event, page);
+        }
 
         // Execute default action if not prevented
         if (event._prevent_default) {
             // can't return in a defer (╯°□°)╯︵ ┻━┻
-        } else if (event._type_string.eqlSlice("click")) {
-            self.page.handleClick(target) catch |err| {
+        } else if (event._type_string.eql(comptime .wrap("click"))) {
+            page.handleClick(target) catch |err| {
                 log.warn(.event, "page.click", .{ .err = err });
             };
-        } else if (event._type_string.eqlSlice("keydown")) {
-            self.page.handleKeydown(target, event) catch |err| {
+        } else if (event._type_string.eql(comptime .wrap("keydown"))) {
+            page.handleKeydown(target, event) catch |err| {
                 log.warn(.event, "page.keydown", .{ .err = err });
             };
         }
@@ -248,7 +310,7 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
     // Even though the window isn't part of the DOM, events always propagate
     // through it in the capture phase (unless we stopped at a shadow boundary)
     if (path_len < path_buffer.len) {
-        path_buffer[path_len] = self.page.window.asEventTarget();
+        path_buffer[path_len] = page.window.asEventTarget();
         path_len += 1;
     }
 
@@ -261,7 +323,10 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
     while (i > 1) {
         i -= 1;
         const current_target = path[i];
-        if (self.lookup.get(@intFromPtr(current_target))) |list| {
+        if (self.lookup.get(.{
+            .event_target = @intFromPtr(current_target),
+            .type_string = event._type_string,
+        })) |list| {
             try self.dispatchPhase(list, current_target, event, was_handled, true);
             if (event._stop_propagation) {
                 return;
@@ -272,10 +337,36 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
     // Phase 2: At target
     event._event_phase = .at_target;
     const target_et = target.asEventTarget();
-    if (self.lookup.get(@intFromPtr(target_et))) |list| {
-        try self.dispatchPhase(list, target_et, event, was_handled, null);
-        if (event._stop_propagation) {
-            return;
+
+    blk: {
+        // Get inline handler (e.g., onclick property) for this target
+        if (self.getInlineHandler(target_et, event)) |inline_handler| {
+            was_handled.* = true;
+            event._current_target = target_et;
+
+            var ls: js.Local.Scope = undefined;
+            self.page.js.localScope(&ls);
+            defer ls.deinit();
+
+            try ls.toLocal(inline_handler).callWithThis(void, target_et, .{event});
+
+            if (event._stop_propagation) {
+                return;
+            }
+
+            if (event._stop_immediate_propagation) {
+                break :blk;
+            }
+        }
+
+        if (self.lookup.get(.{
+            .type_string = event._type_string,
+            .event_target = @intFromPtr(target_et),
+        })) |list| {
+            try self.dispatchPhase(list, target_et, event, was_handled, null);
+            if (event._stop_propagation) {
+                return;
+            }
         }
     }
 
@@ -284,7 +375,10 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
     if (event._bubbles) {
         event._event_phase = .bubbling_phase;
         for (path[1..]) |current_target| {
-            if (self.lookup.get(@intFromPtr(current_target))) |list| {
+            if (self.lookup.get(.{
+                .type_string = event._type_string,
+                .event_target = @intFromPtr(current_target),
+            })) |list| {
                 try self.dispatchPhase(list, current_target, event, was_handled, false);
                 if (event._stop_propagation) {
                     break;
@@ -296,7 +390,6 @@ fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled:
 
 fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, comptime capture_only: ?bool) !void {
     const page = self.page;
-    const typ = event._type_string;
 
     // Track dispatch depth for deferred removal
     self.dispatch_depth += 1;
@@ -331,9 +424,6 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
         node = n.next;
 
         // Skip non-matching listeners
-        if (!listener.typ.eql(typ)) {
-            continue;
-        }
         if (comptime capture_only) |capture| {
             if (listener.capture != capture) {
                 continue;
@@ -367,14 +457,18 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
             event._target = getAdjustedTarget(original_target, current_target);
         }
 
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
         switch (listener.function) {
-            .value => |value| try value.local().callWithThis(void, current_target, .{event}),
+            .value => |value| try ls.toLocal(value).callWithThis(void, current_target, .{event}),
             .string => |string| {
                 const str = try page.call_arena.dupeZ(u8, string.str());
-                try self.page.js.eval(str, null);
+                try ls.local.eval(str, null);
             },
-            .object => |*obj_global| {
-                const obj = obj_global.local();
+            .object => |obj_global| {
+                const obj = ls.toLocal(obj_global);
                 if (try obj.getFunction("handleEvent")) |handleEvent| {
                     try handleEvent.callWithThis(void, obj, .{event});
                 }
@@ -397,6 +491,19 @@ fn dispatchAll(self: *EventManager, list: *std.DoublyLinkedList, current_target:
     return self.dispatchPhase(list, current_target, event, was_handled, null);
 }
 
+fn getInlineHandler(self: *EventManager, target: *EventTarget, event: *Event) ?js.Function.Global {
+    const global_event_handlers = @import("webapi/global_event_handlers.zig");
+    const handler_type = global_event_handlers.fromEventType(event._type_string.str()) orelse return null;
+
+    // Look up the inline handler for this target
+    const element = switch (target._type) {
+        .node => |n| n.is(Element) orelse return null,
+        else => return null,
+    };
+
+    return self.page.getAttrListener(element, handler_type);
+}
+
 fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *Listener) void {
     // If we're in a dispatch, defer removal to avoid invalidating iteration
     if (self.dispatch_depth > 0) {
@@ -409,7 +516,7 @@ fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *L
     }
 }
 
-fn findListener(list: *const std.DoublyLinkedList, typ: []const u8, callback: Callback, capture: bool) ?*Listener {
+fn findListener(list: *const std.DoublyLinkedList, callback: Callback, capture: bool) ?*Listener {
     var node = list.first;
     while (node) |n| {
         node = n.next;
@@ -424,9 +531,6 @@ fn findListener(list: *const std.DoublyLinkedList, typ: []const u8, callback: Ca
         if (listener.capture != capture) {
             continue;
         }
-        if (!listener.typ.eqlSlice(typ)) {
-            continue;
-        }
         return listener;
     }
     return null;
@@ -515,3 +619,144 @@ fn isAncestorOrSelf(ancestor: *Node, node: *Node) bool {
 
     return false;
 }
+
+// Handles the default action for clicking on input checked/radio. Maybe this
+// could be generalized if needed, but I'm not sure. This wasn't obvious to me
+// but when an input is clicked, it's important to think about both the intent
+// and the actual result. Imagine you have an unchecked checkbox. When clicked,
+// the checkbox immediately becomes checked, and event handlers see this "checked"
+// intent. But a listener can preventDefault() in which case the check we did at
+// the start will be undone.
+// This is a bit more complicated for radio buttons, as the checking/unchecking
+// and the rollback can impact a different radio input. So if you "check" a radio
+// the intent is that it becomes checked and whatever was checked before becomes
+// unchecked, so that if you have to rollback (because of a preventDefault())
+// then both inputs have to revert to their original values.
+const ActivationState = struct {
+    old_checked: bool,
+    input: *Element.Html.Input,
+    previously_checked_radio: ?*Input,
+
+    const Input = Element.Html.Input;
+
+    fn create(event: *const Event, target: *Node, page: *Page) ?ActivationState {
+        if (event._type_string.eql(comptime .wrap("click")) == false) {
+            return null;
+        }
+
+        const input = target.is(Element.Html.Input) orelse return null;
+        if (input._input_type != .checkbox and input._input_type != .radio) {
+            return null;
+        }
+
+        const old_checked = input._checked;
+        var previously_checked_radio: ?*Element.Html.Input = null;
+
+        // For radio buttons, find the currently checked radio in the group
+        if (input._input_type == .radio and !old_checked) {
+            previously_checked_radio = try findCheckedRadioInGroup(input, page);
+        }
+
+        // Toggle checkbox or check radio (which unchecks others in group)
+        const new_checked = if (input._input_type == .checkbox) !old_checked else true;
+        try input.setChecked(new_checked, page);
+
+        return .{
+            .input = input,
+            .old_checked = old_checked,
+            .previously_checked_radio = previously_checked_radio,
+        };
+    }
+
+    fn restore(self: *const ActivationState, event: *const Event, page: *Page) void {
+        const input = self.input;
+        if (event._prevent_default) {
+            // Rollback: restore previous state
+            input._checked = self.old_checked;
+            input._checked_dirty = true;
+            if (self.previously_checked_radio) |prev_radio| {
+                prev_radio._checked = true;
+                prev_radio._checked_dirty = true;
+            }
+            return;
+        }
+
+        // Commit: fire input and change events only if state actually changed
+        // For checkboxes, state always changes. For radios, only if was unchecked.
+        const state_changed = (input._input_type == .checkbox) or !self.old_checked;
+        if (state_changed) {
+            fireEvent(page, input, "input") catch |err| {
+                log.warn(.event, "input event", .{ .err = err });
+            };
+            fireEvent(page, input, "change") catch |err| {
+                log.warn(.event, "change event", .{ .err = err });
+            };
+        }
+    }
+
+    fn findCheckedRadioInGroup(input: *Input, page: *Page) !?*Input {
+        const elem = input.asElement();
+
+        const name = elem.getAttributeSafe(comptime .wrap("name")) orelse return null;
+        if (name.len == 0) {
+            return null;
+        }
+
+        const form = input.getForm(page);
+
+        // Walk from the root of the tree containing this element
+        // This handles both document-attached and orphaned elements
+        const root = elem.asNode().getRootNode(null);
+
+        const TreeWalker = @import("webapi/TreeWalker.zig");
+        var walker = TreeWalker.Full.init(root, .{});
+
+        while (walker.next()) |node| {
+            const other_element = node.is(Element) orelse continue;
+            const other_input = other_element.is(Input) orelse continue;
+
+            if (other_input._input_type != .radio) {
+                continue;
+            }
+
+            // Skip the input we're checking from
+            if (other_input == input) {
+                continue;
+            }
+
+            const other_name = other_element.getAttributeSafe(comptime .wrap("name")) orelse continue;
+            if (!std.mem.eql(u8, name, other_name)) {
+                continue;
+            }
+
+            // Check if same form context
+            const other_form = other_input.getForm(page);
+            if (form) |f| {
+                const of = other_form orelse continue;
+                if (f != of) {
+                    continue; // Different forms
+                }
+            } else if (other_form != null) {
+                continue; // form is null but other has a form
+            }
+
+            if (other_input._checked) {
+                return other_input;
+            }
+        }
+
+        return null;
+    }
+
+    // Fire input or change event
+    fn fireEvent(page: *Page, input: *Input, comptime typ: []const u8) !void {
+        const event = try Event.initTrusted(comptime .wrap(typ), .{
+            .bubbles = true,
+            .cancelable = false,
+        }, page);
+        defer if (!event._v8_handoff) event.deinit(false);
+
+        const target = input.asElement().asEventTarget();
+        try page._event_manager.dispatch(target, event);
+    }
+};

src/browser/Factory.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -29,6 +29,7 @@ const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Event = @import("webapi/Event.zig");
 const UIEvent = @import("webapi/event/UIEvent.zig");
+const MouseEvent = @import("webapi/event/MouseEvent.zig");
 const Element = @import("webapi/Element.zig");
 const Document = @import("webapi/Document.zig");
 const EventTarget = @import("webapi/EventTarget.zig");
@@ -36,11 +37,15 @@ const XMLHttpRequestEventTarget = @import("webapi/net/XMLHttpRequestEventTarget.
 const Blob = @import("webapi/Blob.zig");
 const AbstractRange = @import("webapi/AbstractRange.zig");
 
+const Allocator = std.mem.Allocator;
+
 const IS_DEBUG = builtin.mode == .Debug;
 const assert = std.debug.assert;
 
 const Factory = @This();
+
 _page: *Page,
+_arena: Allocator,
 _slab: SlabAllocator,
 
 fn PrototypeChain(comptime types: []const type) type {
@@ -146,10 +151,11 @@ fn AutoPrototypeChain(comptime types: []const type) type {
     };
 }
 
-pub fn init(page: *Page) Factory {
+pub fn init(arena: Allocator, page: *Page) Factory {
     return .{
         ._page = page,
-        ._slab = SlabAllocator.init(page.arena, 128),
+        ._arena = arena,
+        ._slab = SlabAllocator.init(arena, 128),
     };
 }
 
@@ -169,50 +175,76 @@ pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
     return chain.get(1);
 }
 
-fn eventInit(typ: []const u8, value: anytype, page: *Page) !Event {
-    // Round to 2ms for privacy (browsers do this)
-    const raw_timestamp = @import("../datetime.zig").milliTimestamp(.monotonic);
-    const time_stamp = (raw_timestamp / 2) * 2;
-
-    return .{
-        ._type = unionInit(Event.Type, value),
-        ._type_string = try String.init(page.arena, typ, .{}),
-        ._time_stamp = time_stamp,
-    };
+pub fn standaloneEventTarget(self: *Factory, child: anytype) !*EventTarget {
+    const allocator = self._slab.allocator();
+    const et = try allocator.create(EventTarget);
+    et.* = .{ ._type = unionInit(EventTarget.Type, child) };
+    return et;
 }
 
 // this is a root object
-pub fn event(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
+pub fn event(self: *Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
     const chain = try PrototypeChain(
         &.{ Event, @TypeOf(child) },
-    ).allocate(allocator);
+    ).allocate(arena);
 
     // Special case: Event has a _type_string field, so we need manual setup
     const event_ptr = chain.get(0);
-    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
+    event_ptr.* = try self.eventInit(arena, typ, chain.get(1));
     chain.setLeaf(1, child);
 
     return chain.get(1);
 }
 
-pub fn uiEvent(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
+pub fn uiEvent(self: *Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
     const chain = try PrototypeChain(
         &.{ Event, UIEvent, @TypeOf(child) },
-    ).allocate(allocator);
+    ).allocate(arena);
 
     // Special case: Event has a _type_string field, so we need manual setup
     const event_ptr = chain.get(0);
-    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
+    event_ptr.* = try self.eventInit(arena, typ, chain.get(1));
     chain.setMiddle(1, UIEvent.Type);
     chain.setLeaf(2, child);
 
     return chain.get(2);
 }
 
+pub fn mouseEvent(self: *Factory, arena: Allocator, typ: String, mouse: MouseEvent, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, MouseEvent, @TypeOf(child) },
+    ).allocate(arena);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try self.eventInit(arena, typ, chain.get(1));
+    chain.setMiddle(1, UIEvent.Type);
+
+    // Set MouseEvent with all its fields
+    const mouse_ptr = chain.get(2);
+    mouse_ptr.* = mouse;
+    mouse_ptr._proto = chain.get(1);
+    mouse_ptr._type = unionInit(MouseEvent.Type, chain.get(3));
+
+    chain.setLeaf(3, child);
+
+    return chain.get(3);
+}
+
+fn eventInit(self: *const Factory, arena: Allocator, typ: String, value: anytype) !Event {
+    // Round to 2ms for privacy (browsers do this)
+    const raw_timestamp = @import("../datetime.zig").milliTimestamp(.monotonic);
+    const time_stamp = (raw_timestamp / 2) * 2;
+
+    return .{
+        ._arena = arena,
+        ._page = self._page,
+        ._type = unionInit(Event.Type, value),
+        ._type_string = typ,
+        ._time_stamp = time_stamp,
+    };
+}
+
 pub fn blob(self: *Factory, child: anytype) !*@TypeOf(child) {
     const allocator = self._slab.allocator();
 
@@ -307,7 +339,7 @@ pub fn svgElement(self: *Factory, tag_name: []const u8, child: anytype) !*@TypeO
     chain.setMiddle(2, Element.Type);
 
     // will never allocate, can't fail
-    const tag_name_str = String.init(self._page.arena, tag_name, .{}) catch unreachable;
+    const tag_name_str = String.init(self._arena, tag_name, .{}) catch unreachable;
 
     // Manually set Element.Svg with the tag_name
     chain.set(3, .{
@@ -320,9 +352,7 @@ pub fn svgElement(self: *Factory, tag_name: []const u8, child: anytype) !*@TypeO
     return chain.get(4);
 }
 
-pub fn xhrEventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
+pub fn xhrEventTarget(_: *const Factory, allocator: Allocator, child: anytype) !*@TypeOf(child) {
     return try AutoPrototypeChain(
         &.{ EventTarget, XMLHttpRequestEventTarget, @TypeOf(child) },
     ).create(allocator, child);
@@ -337,32 +367,6 @@ pub fn textTrackCue(self: *Factory, child: anytype) !*@TypeOf(child) {
     ).create(allocator, child);
 }
 
-fn hasChainRoot(comptime T: type) bool {
-    // Check if this is a root
-    if (@hasDecl(T, "_prototype_root")) {
-        return true;
-    }
-
-    // If no _proto field, we're at the top but not a recognized root
-    if (!@hasField(T, "_proto")) return false;
-
-    // Get the _proto field's type and recurse
-    const fields = @typeInfo(T).@"struct".fields;
-    inline for (fields) |field| {
-        if (std.mem.eql(u8, field.name, "_proto")) {
-            const ProtoType = reflect.Struct(field.type);
-            return hasChainRoot(ProtoType);
-        }
-    }
-
-    return false;
-}
-
-fn isChainType(comptime T: type) bool {
-    if (@hasField(T, "_proto")) return false;
-    return comptime hasChainRoot(T);
-}
-
 pub fn destroy(self: *Factory, value: anytype) void {
     const S = reflect.Struct(@TypeOf(value));
 
@@ -379,7 +383,7 @@ pub fn destroy(self: *Factory, value: anytype) void {
         }
     }
 
-    if (comptime isChainType(S)) {
+    if (comptime @hasField(S, "_proto")) {
         self.destroyChain(value, true, 0, std.mem.Alignment.@"1");
     } else {
         self.destroyStandalone(value);
@@ -387,20 +391,7 @@ pub fn destroy(self: *Factory, value: anytype) void {
 }
 
 pub fn destroyStandalone(self: *Factory, value: anytype) void {
-    const S = reflect.Struct(@TypeOf(value));
-    assert(!@hasDecl(S, "_prototype_root"));
-
     const allocator = self._slab.allocator();
-
-    if (@hasDecl(S, "deinit")) {
-        // And it has a deinit, we'll call it
-        switch (@typeInfo(@TypeOf(S.deinit)).@"fn".params.len) {
-            1 => value.deinit(),
-            2 => value.deinit(self._page),
-            else => @compileLog(@typeName(S) ++ " has an invalid deinit function"),
-        }
-    }
-
     allocator.destroy(value);
 }
 
@@ -416,10 +407,8 @@ fn destroyChain(
 
     // aligns the old size to the alignment of this element
     const current_size = std.mem.alignForward(usize, old_size, @alignOf(S));
-    const alignment = std.mem.Alignment.fromByteUnits(@alignOf(S));
-
-    const new_align = std.mem.Alignment.max(old_align, alignment);
     const new_size = current_size + @sizeOf(S);
+    const new_align = std.mem.Alignment.max(old_align, std.mem.Alignment.of(S));
 
     // This is initially called from a deinit. We don't want to call that
     // same deinit. So when this is the first time destroyChain is called
@@ -438,20 +427,15 @@ fn destroyChain(
 
     if (@hasField(S, "_proto")) {
         self.destroyChain(value._proto, false, new_size, new_align);
-    } else if (@hasDecl(S, "JsApi")) {
-        // Doesn't have a _proto, but has a JsApi.
-        if (self._page.js.removeTaggedMapping(@intFromPtr(value))) |tagged| {
-            allocator.destroy(tagged);
-        }
     } else {
         // no proto so this is the head of the chain.
         // we use this as the ptr to the start of the chain.
         // and we have summed up the length.
         assert(@hasDecl(S, "_prototype_root"));
 
-        const memory_ptr: [*]const u8 = @ptrCast(value);
+        const memory_ptr: [*]u8 = @ptrCast(@constCast(value));
         const len = std.mem.alignForward(usize, new_size, new_align.toByteUnits());
-        allocator.free(memory_ptr[0..len]);
+        allocator.rawFree(memory_ptr[0..len], new_align, @returnAddress());
     }
 }
 

src/browser/Mime.zig

@@ -38,6 +38,10 @@ pub const ContentTypeEnum = enum {
     text_javascript,
     text_plain,
     text_css,
+    image_jpeg,
+    image_gif,
+    image_png,
+    image_webp,
     application_json,
     unknown,
     other,
@@ -49,6 +53,10 @@ pub const ContentType = union(ContentTypeEnum) {
     text_javascript: void,
     text_plain: void,
     text_css: void,
+    image_jpeg: void,
+    image_gif: void,
+    image_png: void,
+    image_webp: void,
     application_json: void,
     unknown: void,
     other: struct { type: []const u8, sub_type: []const u8 },
@@ -61,6 +69,10 @@ pub fn contentTypeString(mime: *const Mime) []const u8 {
         .text_javascript => "application/javascript",
         .text_plain => "text/plain",
         .text_css => "text/css",
+        .image_jpeg => "image/jpeg",
+        .image_png => "image/png",
+        .image_gif => "image/gif",
+        .image_webp => "image/webp",
         .application_json => "application/json",
         else => "",
     };
@@ -243,6 +255,11 @@ fn parseContentType(value: []const u8) !struct { ContentType, usize } {
         @"application/javascript",
         @"application/x-javascript",
 
+        @"image/jpeg",
+        @"image/png",
+        @"image/gif",
+        @"image/webp",
+
         @"application/json",
     }, type_name)) |known_type| {
         const ct: ContentType = switch (known_type) {
@@ -251,6 +268,10 @@ fn parseContentType(value: []const u8) !struct { ContentType, usize } {
             .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
             .@"text/plain" => .{ .text_plain = {} },
             .@"text/css" => .{ .text_css = {} },
+            .@"image/jpeg" => .{ .image_jpeg = {} },
+            .@"image/png" => .{ .image_png = {} },
+            .@"image/gif" => .{ .image_gif = {} },
+            .@"image/webp" => .{ .image_webp = {} },
             .@"application/json" => .{ .application_json = {} },
         };
         return .{ ct, attribute_start };
@@ -358,6 +379,11 @@ test "Mime: parse common" {
 
     try expect(.{ .content_type = .{ .application_json = {} } }, "application/json");
     try expect(.{ .content_type = .{ .text_css = {} } }, "text/css");
+
+    try expect(.{ .content_type = .{ .image_jpeg = {} } }, "image/jpeg");
+    try expect(.{ .content_type = .{ .image_png = {} } }, "image/png");
+    try expect(.{ .content_type = .{ .image_gif = {} } }, "image/gif");
+    try expect(.{ .content_type = .{ .image_webp = {} } }, "image/webp");
 }
 
 test "Mime: parse uncommon" {

src/browser/ScriptManager.zig

@@ -31,7 +31,7 @@ const Http = @import("../http/Http.zig");
 const Element = @import("webapi/Element.zig");
 
 const Allocator = std.mem.Allocator;
-const ArrayListUnmanaged = std.ArrayListUnmanaged;
+const ArrayList = std.ArrayList;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
@@ -83,10 +83,7 @@ imported_modules: std.StringHashMapUnmanaged(ImportedModule),
 // importmap contains resolved urls.
 importmap: std.StringHashMapUnmanaged([:0]const u8),
 
-pub fn init(page: *Page) ScriptManager {
-    // page isn't fully initialized, we can setup our reference, but that's it.
-    const browser = page._session.browser;
-    const allocator = browser.allocator;
+pub fn init(allocator: Allocator, http_client: *Http.Client, page: *Page) ScriptManager {
     return .{
         .page = page,
         .async_scripts = .{},
@@ -96,7 +93,7 @@ pub fn init(page: *Page) ScriptManager {
         .is_evaluating = false,
         .allocator = allocator,
         .imported_modules = .empty,
-        .client = browser.http_client,
+        .client = http_client,
         .static_scripts_done = false,
         .buffer_pool = BufferPool.init(allocator, 5),
         .script_pool = std.heap.MemoryPool(Script).init(allocator),
@@ -138,6 +135,12 @@ fn clearList(list: *std.DoublyLinkedList) void {
     }
 }
 
+pub fn getHeaders(self: *ScriptManager, url: [:0]const u8) !Http.Headers {
+    var headers = try self.client.newHeaders();
+    try self.page.headersForRequest(self.page.arena, url, &headers);
+    return headers;
+}
+
 pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_element: *Element.Html.Script, comptime ctx: []const u8) !void {
     if (script_element._executed) {
         // If a script tag gets dynamically created and added to the dom:
@@ -152,14 +155,14 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
     script_element._executed = true;
 
     const element = script_element.asElement();
-    if (element.getAttributeSafe("nomodule") != null) {
+    if (element.getAttributeSafe(comptime .wrap("nomodule")) != null) {
         // these scripts should only be loaded if we don't support modules
         // but since we do support modules, we can just skip them.
         return;
     }
 
     const kind: Script.Kind = blk: {
-        const script_type = element.getAttributeSafe("type") orelse break :blk .javascript;
+        const script_type = element.getAttributeSafe(comptime .wrap("type")) orelse break :blk .javascript;
         if (script_type.len == 0) {
             break :blk .javascript;
         }
@@ -186,7 +189,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
     var source: Script.Source = undefined;
     var remote_url: ?[:0]const u8 = null;
     const base_url = page.base();
-    if (element.getAttributeSafe("src")) |src| {
+    if (element.getAttributeSafe(comptime .wrap("src"))) |src| {
         if (try parseDataURI(page.arena, src)) |data_uri| {
             source = .{ .@"inline" = data_uri };
         } else {
@@ -217,12 +220,12 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
                 break :blk if (kind == .module) .@"defer" else .normal;
             }
 
-            if (element.getAttributeSafe("async") != null) {
+            if (element.getAttributeSafe(comptime .wrap("async")) != null) {
                 break :blk .async;
             }
 
             // Check for defer or module (before checking dynamic script default)
-            if (kind == .module or element.getAttributeSafe("defer") != null) {
+            if (kind == .module or element.getAttributeSafe(comptime .wrap("defer")) != null) {
                 break :blk .@"defer";
             }
 
@@ -252,17 +255,15 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             script.deinit(true);
         }
 
-        var headers = try self.client.newHeaders();
-        try page.requestCookie(.{}).headersForRequest(page.arena, url, &headers);
-
         try self.client.request(.{
             .url = url,
             .ctx = script,
             .method = .GET,
-            .headers = headers,
+            .headers = try self.getHeaders(url),
             .blocking = is_blocking,
             .cookie_jar = &page._session.cookie_jar,
             .resource_type = .script,
+            .notification = page._session.notification,
             .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
             .header_callback = Script.headerCallback,
             .data_callback = Script.dataCallback,
@@ -271,11 +272,15 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         });
 
         if (comptime IS_DEBUG) {
+            var ls: js.Local.Scope = undefined;
+            page.js.localScope(&ls);
+            defer ls.deinit();
+
             log.debug(.http, "script queue", .{
                 .ctx = ctx,
                 .url = remote_url.?,
                 .element = element,
-                .stack = page.js.stackTrace() catch "???",
+                .stack = ls.local.stackTrace() catch "???",
             });
         }
     }
@@ -353,15 +358,16 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .manager = self,
     };
 
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
     if (comptime IS_DEBUG) {
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+
         log.debug(.http, "script queue", .{
             .url = url,
             .ctx = "module",
             .referrer = referrer,
-            .stack = self.page.js.stackTrace() catch "???",
+            .stack = ls.local.stackTrace() catch "???",
         });
     }
 
@@ -369,9 +375,10 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .url = url,
         .ctx = script,
         .method = .GET,
-        .headers = headers,
+        .headers = try self.getHeaders(url),
         .cookie_jar = &self.page._session.cookie_jar,
         .resource_type = .script,
+        .notification = self.page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -444,15 +451,16 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
         } },
     };
 
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
     if (comptime IS_DEBUG) {
+        var ls: js.Local.Scope = undefined;
+        self.page.js.localScope(&ls);
+        defer ls.deinit();
+
         log.debug(.http, "script queue", .{
             .url = url,
             .ctx = "dynamic module",
             .referrer = referrer,
-            .stack = self.page.js.stackTrace() catch "???",
+            .stack = ls.local.stackTrace() catch "???",
         });
     }
 
@@ -468,10 +476,11 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
     try self.client.request(.{
         .url = url,
         .method = .GET,
-        .headers = headers,
+        .headers = try self.getHeaders(url),
         .ctx = script,
         .resource_type = .script,
         .cookie_jar = &self.page._session.cookie_jar,
+        .notification = self.page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -608,6 +617,7 @@ pub const Script = struct {
     node: std.DoublyLinkedList.Node,
     script_element: ?*Element.Html.Script,
     manager: *ScriptManager,
+    header_callback_called: bool = false,
 
     const Kind = enum {
         module,
@@ -622,7 +632,7 @@ pub const Script = struct {
 
     const Source = union(enum) {
         @"inline": []const u8,
-        remote: std.ArrayListUnmanaged(u8),
+        remote: std.ArrayList(u8),
 
         fn content(self: Source) []const u8 {
             return switch (self) {
@@ -651,7 +661,7 @@ pub const Script = struct {
         log.debug(.http, "script fetch start", .{ .req = transfer });
     }
 
-    fn headerCallback(transfer: *Http.Transfer) !void {
+    fn headerCallback(transfer: *Http.Transfer) !bool {
         const self: *Script = @ptrCast(@alignCast(transfer.ctx));
         const header = &transfer.response_header.?;
         self.status = header.status;
@@ -661,7 +671,7 @@ pub const Script = struct {
                 .status = header.status,
                 .content_type = header.contentType(),
             });
-            return;
+            return false;
         }
 
         if (comptime IS_DEBUG) {
@@ -672,16 +682,21 @@ pub const Script = struct {
             });
         }
 
-        // If this isn't true, then we'll likely leak memory. If you don't
-        // set `CURLOPT_SUPPRESS_CONNECT_HEADERS` and CONNECT to a proxy, this
-        // will fail. This assertion exists to catch incorrect assumptions about
-        // how libcurl works, or about how we've configured it.
-        lp.assert(self.source.remote.capacity == 0, "ScriptManager.HeaderCallback", .{ .capacity = self.source.remote.capacity });
+        {
+            // temp debug, trying to figure out why the next assert sometimes
+            // fails. Is the buffer just corrupt or is headerCallback really
+            // being called twice?
+            lp.assert(self.header_callback_called == false, "ScriptManager.Header recall", .{});
+            self.header_callback_called = true;
+        }
+
+        lp.assert(self.source.remote.capacity == 0, "ScriptManager.Header buffer", .{ .capacity = self.source.remote.capacity });
         var buffer = self.manager.buffer_pool.get();
         if (transfer.getContentLength()) |cl| {
             try buffer.ensureTotalCapacity(self.manager.allocator, cl);
         }
         self.source = .{ .remote = buffer };
+        return true;
     }
 
     fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
@@ -721,7 +736,7 @@ pub const Script = struct {
         log.warn(.http, "script fetch error", .{
             .err = err,
             .req = self.url,
-            .mode = self.mode,
+            .mode = std.meta.activeTag(self.mode),
             .kind = self.kind,
             .status = self.status,
         });
@@ -741,9 +756,13 @@ pub const Script = struct {
             return;
         }
 
-        if (self.mode == .import) {
-            const entry = self.manager.imported_modules.getPtr(self.url).?;
-            entry.state = .err;
+        switch (self.mode) {
+            .import_async => |ia| ia.callback(ia.data, error.FailedToLoad),
+            .import => {
+                const entry = manager.imported_modules.getPtr(self.url).?;
+                entry.state = .err;
+            },
+            else => {},
         }
         self.deinit(true);
         manager.evaluate();
@@ -785,6 +804,12 @@ pub const Script = struct {
             .cacheable = cacheable,
         });
 
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
+        const local = &ls.local;
+
         // Handle importmap special case here: the content is a JSON containing
         // imports.
         if (self.kind == .importmap) {
@@ -795,25 +820,24 @@ pub const Script = struct {
                     .kind = self.kind,
                     .cacheable = cacheable,
                 });
-                self.executeCallback("error", script_element._on_error, page);
+                self.executeCallback("error", local.toLocal(script_element._on_error), page);
                 return;
             };
-            self.executeCallback("load", script_element._on_load, page);
+            self.executeCallback("load", local.toLocal(script_element._on_load), page);
             return;
         }
 
-        const js_context = page.js;
         var try_catch: js.TryCatch = undefined;
-        try_catch.init(js_context);
+        try_catch.init(local);
         defer try_catch.deinit();
 
         const success = blk: {
             const content = self.source.content();
             switch (self.kind) {
-                .javascript => _ = js_context.eval(content, url) catch break :blk false,
+                .javascript => _ = local.eval(content, url) catch break :blk false,
                 .module => {
                     // We don't care about waiting for the evaluation here.
-                    js_context.module(false, content, url, cacheable) catch break :blk false;
+                    page.js.module(false, local, content, url, cacheable) catch break :blk false;
                 },
                 .importmap => unreachable, // handled before the try/catch.
             }
@@ -826,14 +850,14 @@ pub const Script = struct {
 
         defer {
             // We should run microtasks even if script execution fails.
-            page.js.runMicrotasks();
-            _ = page.scheduler.run() catch |err| {
+            local.runMicrotasks();
+            _ = page.js.scheduler.run() catch |err| {
                 log.err(.page, "scheduler", .{ .err = err });
             };
         }
 
         if (success) {
-            self.executeCallback("load", script_element._on_load, page);
+            self.executeCallback("load", local.toLocal(script_element._on_load), page);
             return;
         }
 
@@ -844,15 +868,14 @@ pub const Script = struct {
             .cacheable = cacheable,
         });
 
-        self.executeCallback("error", script_element._on_error, page);
+        self.executeCallback("error", local.toLocal(script_element._on_error), page);
     }
 
-    fn executeCallback(self: *const Script, comptime typ: []const u8, cb_: ?js.Function.Global, page: *Page) void {
-        const cb_global = cb_ orelse return;
-        const cb = cb_global.local();
+    fn executeCallback(self: *const Script, comptime typ: []const u8, cb_: ?js.Function, page: *Page) void {
+        const cb = cb_ orelse return;
 
         const Event = @import("webapi/Event.zig");
-        const event = Event.initTrusted(typ, .{}, page) catch |err| {
+        const event = Event.initTrusted(comptime .wrap(typ), .{}, page) catch |err| {
             log.warn(.js, "script internal callback", .{
                 .url = self.url,
                 .type = typ,
@@ -860,6 +883,7 @@ pub const Script = struct {
             });
             return;
         };
+        defer if (!event._v8_handoff) event.deinit(false);
 
         var caught: js.TryCatch.Caught = undefined;
         cb.tryCall(void, .{event}, &caught) catch {
@@ -879,11 +903,11 @@ const BufferPool = struct {
     max_concurrent_transfers: u8,
     mem_pool: std.heap.MemoryPool(Container),
 
-    const List = std.DoublyLinkedList;
+    const List = std.SinglyLinkedList;
 
     const Container = struct {
         node: List.Node,
-        buf: std.ArrayListUnmanaged(u8),
+        buf: std.ArrayList(u8),
     };
 
     fn init(allocator: Allocator, max_concurrent_transfers: u8) BufferPool {
@@ -908,7 +932,7 @@ const BufferPool = struct {
         self.mem_pool.deinit();
     }
 
-    fn get(self: *BufferPool) std.ArrayListUnmanaged(u8) {
+    fn get(self: *BufferPool) std.ArrayList(u8) {
         const node = self.available.popFirst() orelse {
             // return a new buffer
             return .{};
@@ -920,7 +944,7 @@ const BufferPool = struct {
         return container.buf;
     }
 
-    fn release(self: *BufferPool, buffer: ArrayListUnmanaged(u8)) void {
+    fn release(self: *BufferPool, buffer: ArrayList(u8)) void {
         // create mutable copy
         var b = buffer;
 
@@ -938,7 +962,7 @@ const BufferPool = struct {
         b.clearRetainingCapacity();
         container.* = .{ .buf = b, .node = .{} };
         self.count += 1;
-        self.available.append(&container.node);
+        self.available.prepend(&container.node);
     }
 };
 

src/browser/Session.zig

@@ -28,6 +28,7 @@ const History = @import("webapi/History.zig");
 
 const Page = @import("Page.zig");
 const Browser = @import("Browser.zig");
+const Notification = @import("../Notification.zig");
 
 const Allocator = std.mem.Allocator;
 const IS_DEBUG = @import("builtin").mode == .Debug;
@@ -39,6 +40,7 @@ const IS_DEBUG = @import("builtin").mode == .Debug;
 const Session = @This();
 
 browser: *Browser,
+notification: *Notification,
 
 // Used to create our Inspector and in the BrowserContext.
 arena: Allocator,
@@ -53,31 +55,33 @@ arena: Allocator,
 // page and start another.
 transfer_arena: Allocator,
 
-executor: js.ExecutionWorld,
 cookie_jar: storage.Cookie.Jar,
 storage_shed: storage.Shed,
 
 history: History,
 navigation: Navigation,
 
-page: ?*Page = null,
-
-pub fn init(self: *Session, browser: *Browser) !void {
-    var executor = try browser.env.newExecutionWorld();
-    errdefer executor.deinit();
+page: ?Page,
 
+pub fn init(self: *Session, browser: *Browser, notification: *Notification) !void {
     const allocator = browser.app.allocator;
-    const session_allocator = browser.session_arena.allocator();
+    const arena = try browser.arena_pool.acquire();
+    errdefer browser.arena_pool.release(arena);
+
+    const transfer_arena = try browser.arena_pool.acquire();
+    errdefer browser.arena_pool.release(transfer_arena);
 
     self.* = .{
-        .browser = browser,
-        .executor = executor,
-        .storage_shed = .{},
-        .arena = session_allocator,
-        .cookie_jar = storage.Cookie.Jar.init(allocator),
-        .navigation = .{},
+        .page = null,
+        .arena = arena,
         .history = .{},
-        .transfer_arena = browser.transfer_arena.allocator(),
+        // The prototype (EventTarget) for Navigation is created when a Page is created.
+        .navigation = .{ ._proto = undefined },
+        .storage_shed = .{},
+        .browser = browser,
+        .notification = notification,
+        .transfer_arena = transfer_arena,
+        .cookie_jar = storage.Cookie.Jar.init(allocator),
     };
 }
 
@@ -85,9 +89,12 @@ pub fn deinit(self: *Session) void {
     if (self.page != null) {
         self.removePage();
     }
+    const browser = self.browser;
+
     self.cookie_jar.deinit();
-    self.storage_shed.deinit(self.browser.app.allocator);
-    self.executor.deinit();
+    self.storage_shed.deinit(browser.app.allocator);
+    browser.arena_pool.release(self.transfer_arena);
+    browser.arena_pool.release(self.arena);
 }
 
 // NOTE: the caller is not the owner of the returned value,
@@ -95,11 +102,9 @@ pub fn deinit(self: *Session) void {
 pub fn createPage(self: *Session) !*Page {
     lp.assert(self.page == null, "Session.createPage - page not null", .{});
 
-    const page_arena = &self.browser.page_arena;
-    _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
-
-    self.page = try Page.init(page_arena.allocator(), self.browser.call_arena.allocator(), self);
-    const page = self.page.?;
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, self);
 
     // Creates a new NavigationEventTarget for this page.
     try self.navigation.onNewPage(page);
@@ -109,14 +114,14 @@ pub fn createPage(self: *Session) !*Page {
     }
     // start JS env
     // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
-    self.browser.notification.dispatch(.page_created, page);
+    self.notification.dispatch(.page_created, page);
 
     return page;
 }
 
 pub fn removePage(self: *Session) void {
     // Inform CDP the page is going to be removed, allowing other worlds to remove themselves before the main one
-    self.browser.notification.dispatch(.page_remove, .{});
+    self.notification.dispatch(.page_remove, .{});
     lp.assert(self.page != null, "Session.removePage - page is null", .{});
 
     self.page.?.deinit();
@@ -129,23 +134,45 @@ pub fn removePage(self: *Session) void {
     }
 }
 
+pub fn replacePage(self: *Session) !*Page {
+    if (comptime IS_DEBUG) {
+        log.debug(.browser, "replace page", .{});
+    }
+
+    lp.assert(self.page != null, "Session.replacePage null page", .{});
+    self.page.?.deinit();
+    self.browser.env.memoryPressureNotification(.moderate);
+
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, self);
+    return page;
+}
+
 pub fn currentPage(self: *Session) ?*Page {
-    return self.page orelse return null;
+    return &(self.page orelse return null);
 }
 
 pub const WaitResult = enum {
     done,
     no_page,
     cdp_socket,
-    navigate,
 };
 
 pub fn wait(self: *Session, wait_ms: u32) WaitResult {
     while (true) {
-        const page = self.page orelse return .no_page;
-        switch (page.wait(wait_ms)) {
-            .navigate => self.processScheduledNavigation() catch return .done,
-            else => |result| return result,
+        if (self.page) |*page| {
+            switch (page.wait(wait_ms)) {
+                .done => {
+                    if (page._queued_navigation == null) {
+                        return .done;
+                    }
+                    self.processScheduledNavigation() catch return .done;
+                },
+                else => |result| return result,
+            }
+        } else {
+            return .no_page;
         }
         // if we've successfull navigated, we'll give the new page another
         // page.wait(wait_ms)
@@ -153,24 +180,32 @@ pub fn wait(self: *Session, wait_ms: u32) WaitResult {
 }
 
 fn processScheduledNavigation(self: *Session) !void {
-    const qn = self.page.?._queued_navigation.?;
-    defer _ = self.browser.transfer_arena.reset(.{ .retain_with_limit = 8 * 1024 });
+    defer self.browser.arena_pool.reset(self.transfer_arena, 4 * 1024);
+    const url, const opts = blk: {
+        const qn = self.page.?._queued_navigation.?;
+        // qn might not be safe to use after self.removePage is called, hence
+        // this block;
+        const url = qn.url;
+        const opts = qn.opts;
 
-    // This was already aborted on the page, but it would be pretty
-    // bad if old requests went to the new page, so let's make double sure
-    self.browser.http_client.abort();
-    self.removePage();
+        // This was already aborted on the page, but it would be pretty
+        // bad if old requests went to the new page, so let's make double sure
+        self.browser.http_client.abort();
+        self.removePage();
+
+        break :blk .{ url, opts };
+    };
 
     const page = self.createPage() catch |err| {
         log.err(.browser, "queued navigation page error", .{
             .err = err,
-            .url = qn.url,
+            .url = url,
         });
         return err;
     };
 
-    page.navigate(qn.url, qn.opts) catch |err| {
-        log.err(.browser, "queued navigation error", .{ .err = err, .url = qn.url });
+    page.navigate(url, opts) catch |err| {
+        log.err(.browser, "queued navigation error", .{ .err = err, .url = url });
         return err;
     };
 }

src/browser/URL.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -17,7 +17,6 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const lp = @import("lightpanda");
 const Allocator = std.mem.Allocator;
 
 const ResolveOpts = struct {
@@ -77,8 +76,9 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     }
 
     // trailing space so that we always have space to append the null terminator
-    var out = try std.mem.join(allocator, "", &.{ normalized_base, "/", path, " " });
-    const end = out.len - 1;
+    // and so that we can compare the next two characters without needing to length check
+    var out = try std.mem.join(allocator, "", &.{ normalized_base, "/", path, "  " });
+    const end = out.len - 2;
 
     const path_marker = path_start + 1;
 
@@ -88,33 +88,39 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     var in_i: usize = 0;
     var out_i: usize = 0;
     while (in_i < end) {
-        if (std.mem.startsWith(u8, out[in_i..], "./")) {
-            in_i += 2;
-            continue;
-        }
-
-        if (std.mem.startsWith(u8, out[in_i..], "../")) {
-            lp.assert(out[out_i - 1] == '/', "URL.resolve", .{ .out = out });
-
-            if (out_i > path_marker) {
-                // go back before the /
-                out_i -= 2;
-                while (out_i > 1 and out[out_i - 1] != '/') {
-                    out_i -= 1;
-                }
-            } else {
-                // if out_i == path_marker, than we've reached the start of
-                // the path. We can't ../ any more. E.g.:
-                //    http://www.example.com/../hello.
-                // You might think that's an error, but, at least with
-                //     new URL('../hello', 'http://www.example.com/')
-                // it just ignores the extra ../
+        if (out[in_i] == '.' and (out_i == 0 or out[out_i - 1] == '/')) {
+            if (out[in_i + 1] == '/') { // always safe, because we added a whitespace
+                // /./
+                in_i += 2;
+                continue;
+            }
+            if (out[in_i + 1] == '.' and out[in_i + 2] == '/') { // always safe, because we added two whitespaces
+                // /../
+                if (out_i > path_marker) {
+                    // go back before the /
+                    out_i -= 2;
+                    while (out_i > 1 and out[out_i - 1] != '/') {
+                        out_i -= 1;
+                    }
+                } else {
+                    // if out_i == path_marker, than we've reached the start of
+                    // the path. We can't ../ any more. E.g.:
+                    //    http://www.example.com/../hello.
+                    // You might think that's an error, but, at least with
+                    //     new URL('../hello', 'http://www.example.com/')
+                    // it just ignores the extra ../
+                }
+                in_i += 3;
+                continue;
+            }
+            if (in_i == end - 1) {
+                // ignore trailing dot
+                break;
             }
-            in_i += 3;
-            continue;
         }
 
-        out[out_i] = out[in_i];
+        const c = out[in_i];
+        out[out_i] = c;
         in_i += 1;
         out_i += 1;
     }
@@ -496,6 +502,16 @@ pub fn concatQueryString(arena: Allocator, url: []const u8, query_string: []cons
     return buf.items[0 .. buf.items.len - 1 :0];
 }
 
+pub fn getRobotsUrl(arena: Allocator, url: [:0]const u8) ![:0]const u8 {
+    const origin = try getOrigin(arena, url) orelse return error.NoOrigin;
+    return try std.fmt.allocPrintSentinel(
+        arena,
+        "{s}/robots.txt",
+        .{origin},
+        0,
+    );
+}
+
 const testing = @import("../testing.zig");
 test "URL: isCompleteHTTPUrl" {
     try testing.expectEqual(true, isCompleteHTTPUrl("http://example.com/about"));
@@ -542,6 +558,21 @@ test "URL: resolve" {
     };
 
     const cases = [_]Case{
+        .{
+            .base = "https://example/dir",
+            .path = "abc../test",
+            .expected = "https://example/abc../test",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc.",
+            .expected = "https://example/abc.",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc/.",
+            .expected = "https://example/abc/",
+        },
         .{
             .base = "https://example/xyz/abc/123",
             .path = "something.js",
@@ -757,3 +788,31 @@ test "URL: concatQueryString" {
         try testing.expectEqual("https://www.lightpanda.io/index?1=2&a=b", url);
     }
 }
+
+test "URL: getRobotsUrl" {
+    defer testing.reset();
+    const arena = testing.arena_allocator;
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io");
+        try testing.expectEqual("https://www.lightpanda.io/robots.txt", url);
+    }
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io/some/path");
+        try testing.expectString("https://www.lightpanda.io/robots.txt", url);
+    }
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io:8080/page");
+        try testing.expectString("https://www.lightpanda.io:8080/robots.txt", url);
+    }
+    {
+        const url = try getRobotsUrl(arena, "http://example.com/deep/nested/path?query=value#fragment");
+        try testing.expectString("http://example.com/robots.txt", url);
+    }
+    {
+        const url = try getRobotsUrl(arena, "https://user:pass@example.com/page");
+        try testing.expectString("https://example.com/robots.txt", url);
+    }
+}

src/browser/dump.zig

@@ -51,11 +51,22 @@ pub const Opts = struct {
 
 pub fn root(doc: *Node.Document, opts: RootOpts, writer: *std.Io.Writer, page: *Page) !void {
     if (doc.is(Node.Document.HTMLDocument)) |html_doc| {
-        try writer.writeAll("<!DOCTYPE html>");
+        blk: {
+            // Ideally we just render the doctype which is part of the document
+            if (doc.asNode().firstChild()) |first| {
+                if (first._type == .document_type) {
+                    break :blk;
+                }
+            }
+            // But if the doc has no child, or the first child isn't a doctype
+            // well force it.
+            try writer.writeAll("<!DOCTYPE html>");
+        }
+
         if (opts.with_base) {
             const parent = if (html_doc.getHead()) |head| head.asNode() else doc.asNode();
             const base = try doc.createElement("base", null, page);
-            try base.setAttributeSafe("base", page.base(), page);
+            try base.setAttributeSafe(comptime .wrap("base"), .wrap(page.base()), page);
             _ = try parent.insertBefore(base.asNode(), parent.firstChild(), page);
         }
     }
@@ -99,7 +110,7 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
             // to render that "active" content, so when we're trying to render
             // it, we don't want to skip it.
             if ((comptime force_slot == false) and opts.shadow == .rendered) {
-                if (el.getAttributeSafe("slot")) |_| {
+                if (el.getAttributeSafe(comptime .wrap("slot"))) |_| {
                     // Skip - will be rendered by the Slot if it's the active container
                     return;
                 }
@@ -242,12 +253,12 @@ fn shouldStripElement(el: *const Node.Element, opts: Opts) bool {
         if (std.mem.eql(u8, tag_name, "noscript")) return true;
 
         if (std.mem.eql(u8, tag_name, "link")) {
-            if (el.getAttributeSafe("as")) |as| {
+            if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
                 if (std.mem.eql(u8, as, "script")) return true;
             }
-            if (el.getAttributeSafe("rel")) |rel| {
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
                 if (std.mem.eql(u8, rel, "modulepreload") or std.mem.eql(u8, rel, "preload")) {
-                    if (el.getAttributeSafe("as")) |as| {
+                    if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
                         if (std.mem.eql(u8, as, "script")) return true;
                     }
                 }
@@ -259,7 +270,7 @@ fn shouldStripElement(el: *const Node.Element, opts: Opts) bool {
         if (std.mem.eql(u8, tag_name, "style")) return true;
 
         if (std.mem.eql(u8, tag_name, "link")) {
-            if (el.getAttributeSafe("rel")) |rel| {
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
                 if (std.mem.eql(u8, rel, "stylesheet")) return true;
             }
         }

src/browser/js/Array.zig

@@ -22,7 +22,7 @@ const v8 = js.v8;
 
 const Array = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.Array,
 
 pub fn len(self: Array) usize {
@@ -30,39 +30,37 @@ pub fn len(self: Array) usize {
 }
 
 pub fn get(self: Array, index: u32) !js.Value {
-    const ctx = self.ctx;
+    const ctx = self.local.ctx;
 
     const idx = js.Integer.init(ctx.isolate.handle, index);
-    const handle = v8.v8__Object__Get(@ptrCast(self.handle), ctx.handle, idx.handle) orelse {
+    const handle = v8.v8__Object__Get(@ptrCast(self.handle), self.local.handle, idx.handle) orelse {
         return error.JsException;
     };
 
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = handle,
     };
 }
 
-pub fn set(self: Array, index: u32, value: anytype, comptime opts: js.bridge.Caller.CallOpts) !bool {
-    const ctx = self.ctx;
-
-    const js_value = try ctx.zigValueToJs(value, opts);
+pub fn set(self: Array, index: u32, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const js_value = try self.local.zigValueToJs(value, opts);
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Object__SetAtIndex(@ptrCast(self.handle), ctx.handle, index, js_value.handle, &out);
+    v8.v8__Object__SetAtIndex(@ptrCast(self.handle), self.local.handle, index, js_value.handle, &out);
     return out.has_value;
 }
 
 pub fn toObject(self: Array) js.Object {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
 
 pub fn toValue(self: Array) js.Value {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }

src/browser/js/Caller.zig

@@ -0,0 +1,732 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const log = @import("../../log.zig");
+const string = @import("../../string.zig");
+
+const Page = @import("../Page.zig");
+
+const js = @import("js.zig");
+const Local = @import("Local.zig");
+const Context = @import("Context.zig");
+const TaggedOpaque = @import("TaggedOpaque.zig");
+
+const v8 = js.v8;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const CALL_ARENA_RETAIN = 1024 * 16;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Caller = @This();
+local: Local,
+prev_local: ?*const js.Local,
+prev_context: *Context,
+
+// Takes the raw v8 isolate and extracts the context from it.
+pub fn init(self: *Caller, v8_isolate: *v8.Isolate) void {
+    const v8_context = v8.v8__Isolate__GetCurrentContext(v8_isolate).?;
+    initWithContext(self, Context.fromC(v8_context), v8_context);
+}
+
+fn initWithContext(self: *Caller, ctx: *Context, v8_context: *const v8.Context) void {
+    ctx.call_depth += 1;
+    self.* = Caller{
+        .local = .{
+            .ctx = ctx,
+            .handle = v8_context,
+            .call_arena = ctx.call_arena,
+            .isolate = ctx.isolate,
+        },
+        .prev_local = ctx.local,
+        .prev_context = ctx.page.js,
+    };
+    ctx.page.js = ctx;
+    ctx.local = &self.local;
+}
+
+pub fn deinit(self: *Caller) void {
+    const ctx = self.local.ctx;
+    const call_depth = ctx.call_depth - 1;
+
+    // Because of callbacks, calls can be nested. Because of this, we
+    // can't clear the call_arena after _every_ call. Imagine we have
+    //    arr.forEach((i) => { console.log(i); }
+    //
+    // First we call forEach. Inside of our forEach call,
+    // we call console.log. If we reset the call_arena after this call,
+    // it'll reset it for the `forEach` call after, which might still
+    // need the data.
+    //
+    // Therefore, we keep a call_depth, and only reset the call_arena
+    // when a top-level (call_depth == 0) function ends.
+    if (call_depth == 0) {
+        const arena: *ArenaAllocator = @ptrCast(@alignCast(ctx.call_arena.ptr));
+        _ = arena.reset(.{ .retain_with_limit = CALL_ARENA_RETAIN });
+    }
+
+    ctx.call_depth = call_depth;
+    ctx.local = self.prev_local;
+    ctx.page.js = self.prev_context;
+}
+
+pub const CallOpts = struct {
+    dom_exception: bool = false,
+    null_as_undefined: bool = false,
+    as_typed_array: bool = false,
+};
+
+pub fn constructor(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
+    const local = &self.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const info = FunctionCallbackInfo{ .handle = handle };
+
+    if (!info.isConstructCall()) {
+        handleError(T, @TypeOf(func), local, error.InvalidArgument, info, opts);
+        return;
+    }
+
+    self._constructor(func, info) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+    };
+}
+
+fn _constructor(self: *Caller, func: anytype, info: FunctionCallbackInfo) !void {
+    const F = @TypeOf(func);
+    const local = &self.local;
+    const args = try getArgs(F, 0, local, info);
+    const res = @call(.auto, func, args);
+
+    const ReturnType = @typeInfo(F).@"fn".return_type orelse {
+        @compileError(@typeName(F) ++ " has a constructor without a return type");
+    };
+
+    const new_this_handle = info.getThis();
+    var this = js.Object{ .local = local, .handle = new_this_handle };
+    if (@typeInfo(ReturnType) == .error_union) {
+        const non_error_res = res catch |err| return err;
+        this = try local.mapZigInstanceToJs(new_this_handle, non_error_res);
+    } else {
+        this = try local.mapZigInstanceToJs(new_this_handle, res);
+    }
+
+    // If we got back a different object (existing wrapper), copy the prototype
+    // from new object. (this happens when we're upgrading an CustomElement)
+    if (this.handle != new_this_handle) {
+        const prototype_handle = v8.v8__Object__GetPrototype(new_this_handle).?;
+        var out: v8.MaybeBool = undefined;
+        v8.v8__Object__SetPrototype(this.handle, self.local.handle, prototype_handle, &out);
+        if (comptime IS_DEBUG) {
+            std.debug.assert(out.has_value and out.value);
+        }
+    }
+
+    info.getReturnValue().set(this.handle);
+}
+
+pub fn getIndex(self: *Caller, comptime T: type, func: anytype, idx: u32, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    const local = &self.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return _getIndex(T, local, func, idx, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _getIndex(comptime T: type, local: *const Local, func: anytype, idx: u32, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = idx;
+    if (@typeInfo(F).@"fn".params.len == 3) {
+        @field(args, "2") = local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return handleIndexedReturn(T, F, true, local, ret, info, opts);
+}
+
+pub fn getNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    const local = &self.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return _getNamedIndex(T, local, func, name, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _getNamedIndex(comptime T: type, local: *const Local, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try nameToString(local, @TypeOf(args.@"1"), name);
+    if (@typeInfo(F).@"fn".params.len == 3) {
+        @field(args, "2") = local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return handleIndexedReturn(T, F, true, local, ret, info, opts);
+}
+
+pub fn setNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, js_value: *const v8.Value, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    const local = &self.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return _setNamedIndex(T, local, func, name, .{ .local = &self.local, .handle = js_value }, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _setNamedIndex(comptime T: type, local: *const Local, func: anytype, name: *const v8.Name, js_value: js.Value, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try nameToString(local, @TypeOf(args.@"1"), name);
+    @field(args, "2") = try local.jsValueToZig(@TypeOf(@field(args, "2")), js_value);
+    if (@typeInfo(F).@"fn".params.len == 4) {
+        @field(args, "3") = local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return handleIndexedReturn(T, F, false, local, ret, info, opts);
+}
+
+pub fn deleteNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, handle: *const v8.PropertyCallbackInfo, comptime opts: CallOpts) u8 {
+    const local = &self.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const info = PropertyCallbackInfo{ .handle = handle };
+    return _deleteNamedIndex(T, local, func, name, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+        return 0;
+    };
+}
+
+fn _deleteNamedIndex(comptime T: type, local: *const Local, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    @field(args, "1") = try nameToString(local, @TypeOf(args.@"1"), name);
+    if (@typeInfo(F).@"fn".params.len == 3) {
+        @field(args, "2") = local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return handleIndexedReturn(T, F, false, local, ret, info, opts);
+}
+
+fn handleIndexedReturn(comptime T: type, comptime F: type, comptime getter: bool, local: *const Local, ret: anytype, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    // need to unwrap this error immediately for when opts.null_as_undefined == true
+    // and we need to compare it to null;
+    const non_error_ret = switch (@typeInfo(@TypeOf(ret))) {
+        .error_union => |eu| blk: {
+            break :blk ret catch |err| {
+                // We can't compare err == error.NotHandled if error.NotHandled
+                // isn't part of the possible error set. So we first need to check
+                // if error.NotHandled is part of the error set.
+                if (isInErrorSet(error.NotHandled, eu.error_set)) {
+                    if (err == error.NotHandled) {
+                        // not intercepted
+                        return 0;
+                    }
+                }
+                handleError(T, F, local, err, info, opts);
+                // not intercepted
+                return 0;
+            };
+        },
+        else => ret,
+    };
+
+    if (comptime getter) {
+        info.getReturnValue().set(try local.zigValueToJs(non_error_ret, opts));
+    }
+    // intercepted
+    return 1;
+}
+
+fn isInErrorSet(err: anyerror, comptime T: type) bool {
+    inline for (@typeInfo(T).error_set.?) |e| {
+        if (err == @field(anyerror, e.name)) return true;
+    }
+    return false;
+}
+
+fn nameToString(local: *const Local, comptime T: type, name: *const v8.Name) !T {
+    const handle = @as(*const v8.String, @ptrCast(name));
+    if (T == string.String) {
+        return js.String.toSSO(.{ .local = local, .handle = handle }, false);
+    }
+    if (T == string.Global) {
+        return js.String.toSSO(.{ .local = local, .handle = handle }, true);
+    }
+    return try js.String.toSlice(.{ .local = local, .handle = handle });
+}
+
+fn handleError(comptime T: type, comptime F: type, local: *const Local, err: anyerror, info: anytype, comptime opts: CallOpts) void {
+    const isolate = local.isolate;
+
+    if (comptime @import("builtin").mode == .Debug and @TypeOf(info) == FunctionCallbackInfo) {
+        if (log.enabled(.js, .warn)) {
+            logFunctionCallError(local, @typeName(T), @typeName(F), err, info);
+        }
+    }
+
+    const js_err: *const v8.Value = switch (err) {
+        error.TryCatchRethrow => return,
+        error.InvalidArgument => isolate.createTypeError("invalid argument"),
+        error.OutOfMemory => isolate.createError("out of memory"),
+        error.IllegalConstructor => isolate.createError("Illegal Contructor"),
+        else => blk: {
+            if (comptime opts.dom_exception) {
+                const DOMException = @import("../webapi/DOMException.zig");
+                if (DOMException.fromError(err)) |ex| {
+                    const value = local.zigValueToJs(ex, .{}) catch break :blk isolate.createError("internal error");
+                    break :blk value.handle;
+                }
+            }
+            break :blk isolate.createError(@errorName(err));
+        },
+    };
+
+    const js_exception = isolate.throwException(js_err);
+    info.getReturnValue().setValueHandle(js_exception);
+}
+
+// This is extracted to speed up compilation. When left inlined in handleError,
+// this can add as much as 10 seconds of compilation time.
+fn logFunctionCallError(local: *const Local, type_name: []const u8, func: []const u8, err: anyerror, info: FunctionCallbackInfo) void {
+    const args_dump = serializeFunctionArgs(local, info) catch "failed to serialize args";
+    log.info(.js, "function call error", .{
+        .type = type_name,
+        .func = func,
+        .err = err,
+        .args = args_dump,
+        .stack = local.stackTrace() catch |err1| @errorName(err1),
+    });
+}
+
+fn serializeFunctionArgs(local: *const Local, info: FunctionCallbackInfo) ![]const u8 {
+    var buf = std.Io.Writer.Allocating.init(local.call_arena);
+
+    const separator = log.separator();
+    for (0..info.length()) |i| {
+        try buf.writer.print("{s}{d} - ", .{ separator, i + 1 });
+        const js_value = info.getArg(@intCast(i), local);
+        try local.debugValue(js_value, &buf.writer);
+    }
+    return buf.written();
+}
+
+// Takes a function, and returns a tuple for its argument. Used when we
+// @call a function
+fn ParameterTypes(comptime F: type) type {
+    const params = @typeInfo(F).@"fn".params;
+    var fields: [params.len]std.builtin.Type.StructField = undefined;
+
+    inline for (params, 0..) |param, i| {
+        fields[i] = .{
+            .name = tupleFieldName(i),
+            .type = param.type.?,
+            .default_value_ptr = null,
+            .is_comptime = false,
+            .alignment = @alignOf(param.type.?),
+        };
+    }
+
+    return @Type(.{ .@"struct" = .{
+        .layout = .auto,
+        .decls = &.{},
+        .fields = &fields,
+        .is_tuple = true,
+    } });
+}
+
+fn tupleFieldName(comptime i: usize) [:0]const u8 {
+    return switch (i) {
+        0 => "0",
+        1 => "1",
+        2 => "2",
+        3 => "3",
+        4 => "4",
+        5 => "5",
+        6 => "6",
+        7 => "7",
+        8 => "8",
+        9 => "9",
+        else => std.fmt.comptimePrint("{d}", .{i}),
+    };
+}
+
+fn isPage(comptime T: type) bool {
+    return T == *Page or T == *const Page;
+}
+
+// These wrap the raw v8 C API to provide a cleaner interface.
+pub const FunctionCallbackInfo = struct {
+    handle: *const v8.FunctionCallbackInfo,
+
+    pub fn length(self: FunctionCallbackInfo) u32 {
+        return @intCast(v8.v8__FunctionCallbackInfo__Length(self.handle));
+    }
+
+    pub fn getArg(self: FunctionCallbackInfo, index: u32, local: *const js.Local) js.Value {
+        return .{ .local = local, .handle = v8.v8__FunctionCallbackInfo__INDEX(self.handle, @intCast(index)).? };
+    }
+
+    pub fn getThis(self: FunctionCallbackInfo) *const v8.Object {
+        return v8.v8__FunctionCallbackInfo__This(self.handle).?;
+    }
+
+    pub fn getReturnValue(self: FunctionCallbackInfo) ReturnValue {
+        var rv: v8.ReturnValue = undefined;
+        v8.v8__FunctionCallbackInfo__GetReturnValue(self.handle, &rv);
+        return .{ .handle = rv };
+    }
+
+    fn isConstructCall(self: FunctionCallbackInfo) bool {
+        return v8.v8__FunctionCallbackInfo__IsConstructCall(self.handle);
+    }
+};
+
+pub const PropertyCallbackInfo = struct {
+    handle: *const v8.PropertyCallbackInfo,
+
+    pub fn getThis(self: PropertyCallbackInfo) *const v8.Object {
+        return v8.v8__PropertyCallbackInfo__This(self.handle).?;
+    }
+
+    pub fn getReturnValue(self: PropertyCallbackInfo) ReturnValue {
+        var rv: v8.ReturnValue = undefined;
+        v8.v8__PropertyCallbackInfo__GetReturnValue(self.handle, &rv);
+        return .{ .handle = rv };
+    }
+};
+
+const ReturnValue = struct {
+    handle: v8.ReturnValue,
+
+    pub fn set(self: ReturnValue, value: anytype) void {
+        const T = @TypeOf(value);
+        if (T == *const v8.Object) {
+            self.setValueHandle(@ptrCast(value));
+        } else if (T == *const v8.Value) {
+            self.setValueHandle(value);
+        } else if (T == js.Value) {
+            self.setValueHandle(value.handle);
+        } else {
+            @compileError("Unsupported type for ReturnValue.set: " ++ @typeName(T));
+        }
+    }
+
+    pub fn setValueHandle(self: ReturnValue, handle: *const v8.Value) void {
+        v8.v8__ReturnValue__Set(self.handle, handle);
+    }
+};
+
+pub const Function = struct {
+    pub const Opts = struct {
+        static: bool = false,
+        dom_exception: bool = false,
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+        cache: ?Caching = null,
+
+        // We support two ways to cache a value directly into a v8::Object. The
+        // difference between the two is like the difference between a Map
+        // and a Struct.
+        // 1 - Using the object's internal fields. Think of this as
+        //     adding a field to the struct. It's fast, but the space is reserved
+        //     upfront for _every_ instance, whether we use it or not.
+        //
+        // 2 - Using the object's private state with a v8::Private key. Think of
+        //     this as a HashMap. It takes no memory if the cache isn't used
+        //     but has overhead when used.
+        //
+        // Consider `window.document`, (1) we have relatively few Window objects,
+        // (2) They all have a document and (3) The document is accessed _a lot_.
+        // An internal field makes sense.
+        //
+        // Consider `node.childNodes`, (1) we can have 20K+ node objects, (2)
+        // 95% of nodes will never have their .childNodes access by JavaScript.
+        // Private map lookup makes sense.
+        pub const Caching = union(enum) {
+            internal: u8,
+            private: []const u8,
+        };
+    };
+
+    pub fn call(comptime T: type, info_handle: *const v8.FunctionCallbackInfo, func: anytype, comptime opts: Opts) void {
+        const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(info_handle).?;
+        const v8_context = v8.v8__Isolate__GetCurrentContext(v8_isolate).?;
+
+        const ctx = Context.fromC(v8_context);
+        const info = FunctionCallbackInfo{ .handle = info_handle };
+
+        var hs: js.HandleScope = undefined;
+        hs.initWithIsolateHandle(v8_isolate);
+        defer hs.deinit();
+
+        var cache_state: CacheState = undefined;
+        if (comptime opts.cache) |cache| {
+            // This API is a bit weird. On
+            if (respondFromCache(cache, ctx, v8_context, info, &cache_state)) {
+                // Value was fetched from the cache and returned already
+                return;
+            } else {
+                // Cache miss: cache_state will have been populated
+            }
+        }
+
+        var caller: Caller = undefined;
+        caller.initWithContext(ctx, v8_context);
+        defer caller.deinit();
+
+        const js_value = _call(T, &caller.local, info, func, opts) catch |err| {
+            handleError(T, @TypeOf(func), &caller.local, err, info, .{
+                .dom_exception = opts.dom_exception,
+                .as_typed_array = opts.as_typed_array,
+                .null_as_undefined = opts.null_as_undefined,
+            });
+            return;
+        };
+
+        if (comptime opts.cache) |cache| {
+            cache_state.save(cache, js_value);
+        }
+    }
+
+    fn _call(comptime T: type, local: *const Local, info: FunctionCallbackInfo, func: anytype, comptime opts: Opts) !js.Value {
+        const F = @TypeOf(func);
+        var args: ParameterTypes(F) = undefined;
+        if (comptime opts.static) {
+            args = try getArgs(F, 0, local, info);
+        } else {
+            args = try getArgs(F, 1, local, info);
+            @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+        }
+        const res = @call(.auto, func, args);
+        const js_value = try local.zigValueToJs(res, .{
+            .dom_exception = opts.dom_exception,
+            .as_typed_array = opts.as_typed_array,
+            .null_as_undefined = opts.null_as_undefined,
+        });
+        info.getReturnValue().set(js_value);
+        return js_value;
+    }
+
+    // We can cache a value directly into the v8::Object so that our callback to fetch a property
+    // can be fast. Generally, think of it like this:
+    //   fn callback(handle: *const v8.FunctionCallbackInfo) callconv(.c) void {
+    //       const js_obj = info.getThis();
+    //       const cached_value = js_obj.getFromCache("Nodes.childNodes");
+    //       info.returnValue().set(cached_value);
+    //   }
+    //
+    // That above pseudocode snippet is largely what this respondFromCache is doing.
+    // But on miss, it's also setting the `cache_state` with all of the data it
+    // got checking the cache, so that, once we get the value from our Zig code,
+    // it's quick to store in the v8::Object for subsequent calls.
+    fn respondFromCache(comptime cache: Opts.Caching, ctx: *Context, v8_context: *const v8.Context, info: FunctionCallbackInfo, cache_state: *CacheState) bool {
+        const js_this = info.getThis();
+        const return_value = info.getReturnValue();
+
+        switch (cache) {
+            .internal => |idx| {
+                if (v8.v8__Object__GetInternalField(js_this, idx)) |cached| {
+                    // means we can't cache undefined, since we can't tell the
+                    // difference between "it isn't in the cache" and  "it's
+                    // in the cache with a valud of undefined"
+                    if (!v8.v8__Value__IsUndefined(cached)) {
+                        return_value.set(cached);
+                        return true;
+                    }
+                }
+
+                // store this so that we can quickly save the result into the cache
+                cache_state.* = .{
+                    .js_this = js_this,
+                    .v8_context = v8_context,
+                    .mode = .{ .internal = idx },
+                };
+            },
+            .private => |private_symbol| {
+                const global_handle = &@field(ctx.env.private_symbols, private_symbol).handle;
+                const private_key: *const v8.Private = v8.v8__Global__Get(global_handle, ctx.isolate.handle).?;
+                if (v8.v8__Object__GetPrivate(js_this, v8_context, private_key)) |cached| {
+                    // This means we can't cache "undefined", since we can't tell
+                    // the difference between a (a) undefined == not in the cache
+                    // and (b) undefined == the cache value.  If this becomes
+                    // important, we can check HasPrivate first. But that requires
+                    // calling HasPrivate then GetPrivate.
+                    if (!v8.v8__Value__IsUndefined(cached)) {
+                        return_value.set(cached);
+                        return true;
+                    }
+                }
+
+                // store this so that we can quickly save the result into the cache
+                cache_state.* = .{
+                    .js_this = js_this,
+                    .v8_context = v8_context,
+                    .mode = .{ .private = private_key },
+                };
+            },
+        }
+
+        // cache miss
+        return false;
+    }
+
+    const CacheState = struct {
+        js_this: *const v8.Object,
+        v8_context: *const v8.Context,
+        mode: union(enum) {
+            internal: u8,
+            private: *const v8.Private,
+        },
+
+        pub fn save(self: *const CacheState, comptime cache: Opts.Caching, js_value: js.Value) void {
+            if (comptime cache == .internal) {
+                v8.v8__Object__SetInternalField(self.js_this, self.mode.internal, js_value.handle);
+            } else {
+                var out: v8.MaybeBool = undefined;
+                v8.v8__Object__SetPrivate(self.js_this, self.v8_context, self.mode.private, js_value.handle, &out);
+            }
+        }
+    };
+};
+
+// If we call a method in javascript: cat.lives('nine');
+//
+// Then we'd expect a Zig function with 2 parameters: a self and the string.
+// In this case, offset == 1. Offset is always 1 for setters or methods.
+//
+// Offset is always 0 for constructors.
+//
+// For constructors, setters and methods, we can further increase offset + 1
+// if the first parameter is an instance of Page.
+//
+// Finally, if the JS function is called with _more_ parameters and
+// the last parameter in Zig is an array, we'll try to slurp the additional
+// parameters into the array.
+fn getArgs(comptime F: type, comptime offset: usize, local: *const Local, info: FunctionCallbackInfo) !ParameterTypes(F) {
+    var args: ParameterTypes(F) = undefined;
+
+    const params = @typeInfo(F).@"fn".params[offset..];
+    // Except for the constructor, the first parameter is always `self`
+    // This isn't something we'll bind from JS, so skip it.
+    const params_to_map = blk: {
+        if (params.len == 0) {
+            return args;
+        }
+
+        // If the last parameter is the Page, set it, and exclude it
+        // from our params slice, because we don't want to bind it to
+        // a JS argument
+        if (comptime isPage(params[params.len - 1].type.?)) {
+            @field(args, tupleFieldName(params.len - 1 + offset)) = local.ctx.page;
+            break :blk params[0 .. params.len - 1];
+        }
+
+        // we have neither a Page nor a JsObject. All params must be
+        // bound to a JavaScript value.
+        break :blk params;
+    };
+
+    if (params_to_map.len == 0) {
+        return args;
+    }
+
+    const js_parameter_count = info.length();
+    const last_js_parameter = params_to_map.len - 1;
+    var is_variadic = false;
+
+    {
+        // This is going to get complicated. If the last Zig parameter
+        // is a slice AND the corresponding javascript parameter is
+        // NOT an an array, then we'll treat it as a variadic.
+
+        const last_parameter_type = params_to_map[params_to_map.len - 1].type.?;
+        const last_parameter_type_info = @typeInfo(last_parameter_type);
+        if (last_parameter_type_info == .pointer and last_parameter_type_info.pointer.size == .slice) {
+            const slice_type = last_parameter_type_info.pointer.child;
+            const corresponding_js_value = info.getArg(@intCast(last_js_parameter), local);
+            if (corresponding_js_value.isArray() == false and corresponding_js_value.isTypedArray() == false and slice_type != u8) {
+                is_variadic = true;
+                if (js_parameter_count == 0) {
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = &.{};
+                } else if (js_parameter_count >= params_to_map.len) {
+                    const arr = try local.call_arena.alloc(last_parameter_type_info.pointer.child, js_parameter_count - params_to_map.len + 1);
+                    for (arr, last_js_parameter..) |*a, i| {
+                        a.* = try local.jsValueToZig(slice_type, info.getArg(@intCast(i), local));
+                    }
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = arr;
+                } else {
+                    @field(args, tupleFieldName(params_to_map.len + offset - 1)) = &.{};
+                }
+            }
+        }
+    }
+
+    inline for (params_to_map, 0..) |param, i| {
+        const field_index = comptime i + offset;
+        if (comptime i == params_to_map.len - 1) {
+            if (is_variadic) {
+                break;
+            }
+        }
+
+        if (comptime isPage(param.type.?)) {
+            @compileError("Page must be the last parameter (or 2nd last if there's a JsThis): " ++ @typeName(F));
+        } else if (i >= js_parameter_count) {
+            if (@typeInfo(param.type.?) != .optional) {
+                return error.InvalidArgument;
+            }
+            @field(args, tupleFieldName(field_index)) = null;
+        } else {
+            const js_val = info.getArg(@intCast(i), local);
+            @field(args, tupleFieldName(field_index)) = local.jsValueToZig(param.type.?, js_val) catch {
+                return error.InvalidArgument;
+            };
+        }
+    }
+
+    return args;
+}

src/browser/js/Env.zig

@@ -18,20 +18,34 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const builtin = @import("builtin");
+
 const v8 = js.v8;
 
+const App = @import("../../App.zig");
 const log = @import("../../log.zig");
 
 const bridge = @import("bridge.zig");
 const Context = @import("Context.zig");
+const Isolate = @import("Isolate.zig");
 const Platform = @import("Platform.zig");
 const Snapshot = @import("Snapshot.zig");
 const Inspector = @import("Inspector.zig");
-const ExecutionWorld = @import("ExecutionWorld.zig");
+
+const Page = @import("../Page.zig");
+const Window = @import("../webapi/Window.zig");
 
 const JsApis = bridge.JsApis;
 const Allocator = std.mem.Allocator;
-const ArenaAllocator = std.heap.ArenaAllocator;
+const IS_DEBUG = builtin.mode == .Debug;
+
+fn initClassIds() void {
+    inline for (JsApis, 0..) |JsApi, i| {
+        JsApi.Meta.class_id = i;
+    }
+}
+
+var class_id_once = std.once(initClassIds);
 
 // The Env maps to a V8 isolate, which represents a isolated sandbox for
 // executing JavaScript. The Env is where we'll define our V8 <-> Zig bindings,
@@ -41,13 +55,15 @@ const ArenaAllocator = std.heap.ArenaAllocator;
 // The `types` parameter is a tuple of Zig structures we want to bind to V8.
 const Env = @This();
 
-allocator: Allocator,
+app: *App,
 
 platform: *const Platform,
 
 // the global isolate
 isolate: js.Isolate,
 
+contexts: std.ArrayList(*js.Context),
+
 // just kept around because we need to free it on deinit
 isolate_params: *v8.CreateParams,
 
@@ -59,7 +75,35 @@ eternal_function_templates: []v8.Eternal,
 // Dynamic slice to avoid circular dependency on JsApis.len at comptime
 templates: []*const v8.FunctionTemplate,
 
-pub fn init(allocator: Allocator, platform: *const Platform, snapshot: *Snapshot) !Env {
+// Global template created once per isolate and reused across all contexts
+global_template: v8.Eternal,
+
+// Inspector associated with the Isolate. Exists when CDP is being used.
+inspector: ?*Inspector,
+
+// We can store data in a v8::Object's Private data bag. The keys are v8::Private
+// which an be created once per isolaet.
+private_symbols: PrivateSymbols,
+
+pub const InitOpts = struct {
+    with_inspector: bool = false,
+};
+
+pub fn init(app: *App, opts: InitOpts) !Env {
+    if (comptime IS_DEBUG) {
+        comptime {
+            // V8 requirement for any data using SetAlignedPointerInInternalField
+            const a = @alignOf(@import("TaggedOpaque.zig"));
+            std.debug.assert(a >= 2 and a % 2 == 0);
+        }
+    }
+
+    // Initialize class IDs once before any V8 work
+    class_id_once.call();
+
+    const allocator = app.allocator;
+    const snapshot = &app.snapshot;
+
     var params = try allocator.create(v8.CreateParams);
     errdefer allocator.destroy(params);
     v8.v8__Isolate__CreateParams__CONSTRUCT(params);
@@ -72,17 +116,18 @@ pub fn init(allocator: Allocator, platform: *const Platform, snapshot: *Snapshot
 
     var isolate = js.Isolate.init(params);
     errdefer isolate.deinit();
+    const isolate_handle = isolate.handle;
 
-    v8.v8__Isolate__SetHostImportModuleDynamicallyCallback(isolate.handle, Context.dynamicModuleCallback);
-    v8.v8__Isolate__SetPromiseRejectCallback(isolate.handle, promiseRejectCallback);
-    v8.v8__Isolate__SetMicrotasksPolicy(isolate.handle, v8.kExplicit);
-    v8.v8__Isolate__SetFatalErrorHandler(isolate.handle, fatalCallback);
-    v8.v8__Isolate__SetOOMErrorHandler(isolate.handle, oomCallback);
+    v8.v8__Isolate__SetHostImportModuleDynamicallyCallback(isolate_handle, Context.dynamicModuleCallback);
+    v8.v8__Isolate__SetPromiseRejectCallback(isolate_handle, promiseRejectCallback);
+    v8.v8__Isolate__SetMicrotasksPolicy(isolate_handle, v8.kExplicit);
+    v8.v8__Isolate__SetFatalErrorHandler(isolate_handle, fatalCallback);
+    v8.v8__Isolate__SetOOMErrorHandler(isolate_handle, oomCallback);
 
     isolate.enter();
     errdefer isolate.exit();
 
-    v8.v8__Isolate__SetHostInitializeImportMetaObjectCallback(isolate.handle, Context.metaObjectCallback);
+    v8.v8__Isolate__SetHostInitializeImportMetaObjectCallback(isolate_handle, Context.metaObjectCallback);
 
     // Allocate arrays dynamically to avoid comptime dependency on JsApis.len
     const eternal_function_templates = try allocator.alloc(v8.Eternal, JsApis.len);
@@ -91,74 +136,241 @@ pub fn init(allocator: Allocator, platform: *const Platform, snapshot: *Snapshot
     const templates = try allocator.alloc(*const v8.FunctionTemplate, JsApis.len);
     errdefer allocator.free(templates);
 
+    var global_eternal: v8.Eternal = undefined;
+    var private_symbols: PrivateSymbols = undefined;
     {
         var temp_scope: js.HandleScope = undefined;
         temp_scope.init(isolate);
         defer temp_scope.deinit();
 
-        inline for (JsApis, 0..) |JsApi, i| {
-            JsApi.Meta.class_id = i;
-            const data = v8.v8__Isolate__GetDataFromSnapshotOnce(isolate.handle, snapshot.data_start + i);
+        inline for (JsApis, 0..) |_, i| {
+            const data = v8.v8__Isolate__GetDataFromSnapshotOnce(isolate_handle, snapshot.data_start + i);
             const function_handle: *const v8.FunctionTemplate = @ptrCast(data);
             // Make function template eternal
-            v8.v8__Eternal__New(isolate.handle, @ptrCast(function_handle), &eternal_function_templates[i]);
+            v8.v8__Eternal__New(isolate_handle, @ptrCast(function_handle), &eternal_function_templates[i]);
 
             // Extract the local handle from the global for easy access
-            const eternal_ptr = v8.v8__Eternal__Get(&eternal_function_templates[i], isolate.handle);
+            const eternal_ptr = v8.v8__Eternal__Get(&eternal_function_templates[i], isolate_handle);
             templates[i] = @ptrCast(@alignCast(eternal_ptr.?));
         }
+
+        // Create global template once per isolate
+        const js_global = v8.v8__FunctionTemplate__New__DEFAULT(isolate_handle);
+        const window_name = v8.v8__String__NewFromUtf8(isolate_handle, "Window", v8.kNormal, 6);
+        v8.v8__FunctionTemplate__SetClassName(js_global, window_name);
+
+        // Find Window in JsApis by name (avoids circular import)
+        const window_index = comptime bridge.JsApiLookup.getId(Window.JsApi);
+        v8.v8__FunctionTemplate__Inherit(js_global, templates[window_index]);
+
+        const global_template_local = v8.v8__FunctionTemplate__InstanceTemplate(js_global).?;
+        v8.v8__ObjectTemplate__SetNamedHandler(global_template_local, &.{
+            .getter = bridge.unknownWindowPropertyCallback,
+            .setter = null,
+            .query = null,
+            .deleter = null,
+            .enumerator = null,
+            .definer = null,
+            .descriptor = null,
+            .data = null,
+            .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+        });
+        v8.v8__Eternal__New(isolate_handle, @ptrCast(global_template_local), &global_eternal);
+
+        private_symbols = PrivateSymbols.init(isolate_handle);
+    }
+
+    var inspector: ?*js.Inspector = null;
+    if (opts.with_inspector) {
+        inspector = try Inspector.init(allocator, isolate_handle);
     }
 
     return .{
+        .app = app,
         .context_id = 0,
+        .contexts = .empty,
         .isolate = isolate,
-        .platform = platform,
-        .allocator = allocator,
+        .platform = &app.platform,
         .templates = templates,
         .isolate_params = params,
+        .inspector = inspector,
+        .global_template = global_eternal,
+        .private_symbols = private_symbols,
         .eternal_function_templates = eternal_function_templates,
     };
 }
 
 pub fn deinit(self: *Env) void {
-    self.allocator.free(self.templates);
-    self.allocator.free(self.eternal_function_templates);
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.contexts.items.len == 0);
+    }
+    for (self.contexts.items) |ctx| {
+        ctx.deinit();
+    }
+
+    const allocator = self.app.allocator;
+    if (self.inspector) |i| {
+        i.deinit(allocator);
+    }
+
+    self.contexts.deinit(allocator);
+
+    allocator.free(self.templates);
+    allocator.free(self.eternal_function_templates);
+    self.private_symbols.deinit();
 
     self.isolate.exit();
     self.isolate.deinit();
     v8.v8__ArrayBuffer__Allocator__DELETE(self.isolate_params.array_buffer_allocator.?);
-    self.allocator.destroy(self.isolate_params);
+    allocator.destroy(self.isolate_params);
 }
 
-pub fn newInspector(self: *Env, arena: Allocator, ctx: anytype) !*Inspector {
-    const inspector = try arena.create(Inspector);
-    try Inspector.init(inspector, self.isolate.handle, ctx);
-    return inspector;
+pub fn createContext(self: *Env, page: *Page, enter: bool) !*Context {
+    const context_arena = try self.app.arena_pool.acquire();
+    errdefer self.app.arena_pool.release(context_arena);
+
+    const isolate = self.isolate;
+    var hs: js.HandleScope = undefined;
+    hs.init(isolate);
+    defer hs.deinit();
+
+    // Get the global template that was created once per isolate
+    const global_template: *const v8.ObjectTemplate = @ptrCast(@alignCast(v8.v8__Eternal__Get(&self.global_template, isolate.handle).?));
+    v8.v8__ObjectTemplate__SetInternalFieldCount(global_template, comptime Snapshot.countInternalFields(Window.JsApi));
+    const v8_context = v8.v8__Context__New(isolate.handle, global_template, null).?;
+
+    // Create the v8::Context and wrap it in a v8::Global
+    var context_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, v8_context, &context_global);
+
+    // get the global object for the context, this maps to our Window
+    const global_obj = v8.v8__Context__Global(v8_context).?;
+    {
+        // Store our TAO inside the internal field of the global object. This
+        // maps the v8::Object -> Zig instance. Almost all objects have this, and
+        // it gets setup automatically as objects are created, but the Window
+        // object already exists in v8 (it's the global) so we manually create
+        // the mapping here.
+        const tao = try context_arena.create(@import("TaggedOpaque.zig"));
+        tao.* = .{
+            .value = @ptrCast(page.window),
+            .prototype_chain = (&Window.JsApi.Meta.prototype_chain).ptr,
+            .prototype_len = @intCast(Window.JsApi.Meta.prototype_chain.len),
+            .subtype = .node, // this probably isn't right, but it's what we've been doing all along
+        };
+        v8.v8__Object__SetAlignedPointerInInternalField(global_obj, 0, tao);
+    }
+    // our window wrapped in a v8::Global
+    var global_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, global_obj, &global_global);
+
+    if (enter) {
+        v8.v8__Context__Enter(v8_context);
+    }
+    errdefer if (enter) {
+        v8.v8__Context__Exit(v8_context);
+    };
+
+    const context_id = self.context_id;
+    self.context_id = context_id + 1;
+
+    const context = try context_arena.create(Context);
+    context.* = .{
+        .env = self,
+        .page = page,
+        .id = context_id,
+        .entered = enter,
+        .isolate = isolate,
+        .arena = context_arena,
+        .handle = context_global,
+        .templates = self.templates,
+        .call_arena = page.call_arena,
+        .script_manager = &page._script_manager,
+        .scheduler = .init(context_arena),
+        .finalizer_callback_pool = std.heap.MemoryPool(Context.FinalizerCallback).init(self.app.allocator),
+    };
+    try context.identity_map.putNoClobber(context_arena, @intFromPtr(page.window), global_global);
+
+    // Store a pointer to our context inside the v8 context so that, given
+    // a v8 context, we can get our context out
+    const data = isolate.initBigInt(@intFromPtr(context));
+    v8.v8__Context__SetEmbedderData(v8_context, 1, @ptrCast(data.handle));
+
+    try self.contexts.append(self.app.allocator, context);
+    return context;
+}
+
+pub fn destroyContext(self: *Env, context: *Context) void {
+    for (self.contexts.items, 0..) |ctx, i| {
+        if (ctx == context) {
+            _ = self.contexts.swapRemove(i);
+            break;
+        }
+    } else {
+        if (comptime IS_DEBUG) {
+            @panic("Tried to remove unknown context");
+        }
+    }
+
+    const isolate = self.isolate;
+    if (self.inspector) |inspector| {
+        var hs: js.HandleScope = undefined;
+        hs.init(isolate);
+        defer hs.deinit();
+        inspector.contextDestroyed(@ptrCast(v8.v8__Global__Get(&context.handle, isolate.handle)));
+    }
+
+    context.deinit();
+    isolate.notifyContextDisposed();
 }
 
 pub fn runMicrotasks(self: *const Env) void {
     self.isolate.performMicrotasksCheckpoint();
 }
 
+pub fn runMacrotasks(self: *Env) !?u64 {
+    var ms_to_next_task: ?u64 = null;
+    for (self.contexts.items) |ctx| {
+        if (comptime builtin.is_test == false) {
+            // I hate this comptime check as much as you do. But we have tests
+            // which rely on short execution before shutdown. In real world, it's
+            // underterministic whether a timer will or won't run before the
+            // page shutsdown. But for tests, we need to run them to their end.
+            if (ctx.scheduler.hasReadyTasks() == false) {
+                continue;
+            }
+        }
+
+        var hs: js.HandleScope = undefined;
+        const entered = ctx.enter(&hs);
+        defer entered.exit();
+
+        const ms = (try ctx.scheduler.run()) orelse continue;
+        if (ms_to_next_task == null or ms < ms_to_next_task.?) {
+            ms_to_next_task = ms;
+        }
+    }
+    return ms_to_next_task;
+}
+
 pub fn pumpMessageLoop(self: *const Env) bool {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate.handle);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
     return v8.v8__Platform__PumpMessageLoop(self.platform.handle, self.isolate.handle, false);
 }
 
 pub fn runIdleTasks(self: *const Env) void {
     v8.v8__Platform__RunIdleTasks(self.platform.handle, self.isolate.handle, 1);
 }
-pub fn newExecutionWorld(self: *Env) !ExecutionWorld {
-    return .{
-        .env = self,
-        .context = null,
-        .context_arena = ArenaAllocator.init(self.allocator),
-    };
-}
 
 // V8 doesn't immediately free memory associated with
 // a Context, it's managed by the garbage collector. We use the
 // `lowMemoryNotification` call on the isolate to encourage v8 to free
 // any contexts which have been freed.
+// This GC is very aggressive. Use memoryPressureNotification for less
+// aggressive GC passes.
 pub fn lowMemoryNotification(self: *Env) void {
     var handle_scope: js.HandleScope = undefined;
     handle_scope.init(self.isolate);
@@ -166,6 +378,21 @@ pub fn lowMemoryNotification(self: *Env) void {
     self.isolate.lowMemoryNotification();
 }
 
+// V8 doesn't immediately free memory associated with
+// a Context, it's managed by the garbage collector. We use the
+// `memoryPressureNotification` call on the isolate to encourage v8 to free
+// any contexts which have been freed.
+// The level indicates the aggressivity of the GC required:
+// moderate speeds up incremental GC
+// critical runs one full GC
+// For a more aggressive GC, use lowMemoryNotification.
+pub fn memoryPressureNotification(self: *Env, level: Isolate.MemoryPressureLevel) void {
+    var handle_scope: js.HandleScope = undefined;
+    handle_scope.init(self.isolate);
+    defer handle_scope.deinit();
+    self.isolate.memoryPressureNotification(level);
+}
+
 pub fn dumpMemoryStats(self: *Env) void {
     const stats = self.isolate.getHeapStatistics();
     std.debug.print(
@@ -189,21 +416,24 @@ pub fn dumpMemoryStats(self: *Env) void {
 
 fn promiseRejectCallback(message_handle: v8.PromiseRejectMessage) callconv(.c) void {
     const promise_handle = v8.v8__PromiseRejectMessage__GetPromise(&message_handle).?;
-    const isolate_handle = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
-    const js_isolate = js.Isolate{ .handle = isolate_handle };
-    const context = Context.fromIsolate(js_isolate);
+    const v8_isolate = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
+    const js_isolate = js.Isolate{ .handle = v8_isolate };
+    const ctx = Context.fromIsolate(js_isolate);
 
-    const value =
-        if (v8.v8__PromiseRejectMessage__GetValue(&message_handle)) |v8_value|
-            context.valueToString(.{ .ctx = context, .handle = v8_value }, .{}) catch |err| @errorName(err)
-        else
-            "no value";
+    const local = js.Local{
+        .ctx = ctx,
+        .isolate = js_isolate,
+        .handle = v8.v8__Isolate__GetCurrentContext(v8_isolate).?,
+        .call_arena = ctx.call_arena,
+    };
 
-    log.debug(.js, "unhandled rejection", .{
-        .value = value,
-        .stack = context.stackTrace() catch |err| @errorName(err) orelse "???",
-        .note = "This should be updated to call window.unhandledrejection",
-    });
+    const page = ctx.page;
+    page.window.unhandledPromiseRejection(.{
+        .local = &local,
+        .handle = &message_handle,
+    }, page) catch |err| {
+        log.warn(.browser, "unhandled rejection handler", .{ .err = err });
+    };
 }
 
 fn fatalCallback(c_location: [*c]const u8, c_message: [*c]const u8) callconv(.c) void {
@@ -219,3 +449,19 @@ fn oomCallback(c_location: [*c]const u8, details: ?*const v8.OOMDetails) callcon
     log.fatal(.app, "V8 OOM", .{ .location = location, .detail = detail });
     @import("../../crash_handler.zig").crash("V8 OOM", .{ .location = location, .detail = detail }, @returnAddress());
 }
+
+const PrivateSymbols = struct {
+    const Private = @import("Private.zig");
+
+    child_nodes: Private,
+
+    fn init(isolate: *v8.Isolate) PrivateSymbols {
+        return .{
+            .child_nodes = Private.init(isolate, "child_nodes"),
+        };
+    }
+
+    fn deinit(self: *PrivateSymbols) void {
+        self.child_nodes.deinit();
+    }
+};

src/browser/js/ExecutionWorld.zig

@@ -1,163 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const lp = @import("lightpanda");
-
-const log = @import("../../log.zig");
-const Page = @import("../Page.zig");
-
-const js = @import("js.zig");
-const v8 = js.v8;
-
-const Env = @import("Env.zig");
-const bridge = @import("bridge.zig");
-const Context = @import("Context.zig");
-
-const ArenaAllocator = std.heap.ArenaAllocator;
-const IS_DEBUG = @import("builtin").mode == .Debug;
-
-const CONTEXT_ARENA_RETAIN = 1024 * 64;
-
-// ExecutionWorld closely models a JS World.
-// https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/core/v8/V8BindingDesign.md#World
-// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld
-const ExecutionWorld = @This();
-
-env: *Env,
-
-// Arena whose lifetime is for a single page load. Where
-// the call_arena lives for a single function call, the context_arena
-// lives for the lifetime of the entire page. The allocator will be
-// owned by the Context, but the arena itself is owned by the ExecutionWorld
-// so that we can re-use it from context to context.
-context_arena: ArenaAllocator,
-
-// Currently a context maps to a Browser's Page. Here though, it's only a
-// mechanism to organization page-specific memory. The ExecutionWorld
-// does all the work, but having all page-specific data structures
-// grouped together helps keep things clean.
-context: ?Context = null,
-persisted_context: ?js.Global(Context) = null,
-
-// no init, must be initialized via env.newExecutionWorld()
-
-pub fn deinit(self: *ExecutionWorld) void {
-    if (self.context != null) {
-        self.removeContext();
-    }
-    self.context_arena.deinit();
-}
-
-// Only the top Context in the Main ExecutionWorld should hold a handle_scope.
-// A js.HandleScope is like an arena. Once created, any "Local" that
-// v8 creates will be released (or at least, releasable by the v8 GC)
-// when the handle_scope is freed.
-// We also maintain our own "context_arena" which allows us to have
-// all page related memory easily managed.
-pub fn createContext(self: *ExecutionWorld, page: *Page, enter: bool) !*Context {
-    lp.assert(self.context == null, "ExecptionWorld.createContext has context", .{});
-
-    const env = self.env;
-    const isolate = env.isolate;
-    const arena = self.context_arena.allocator();
-
-    const persisted_context: js.Global(Context) = blk: {
-        var temp_scope: js.HandleScope = undefined;
-        temp_scope.init(isolate);
-        defer temp_scope.deinit();
-
-        // Getting this into the snapshot is tricky (anything involving the
-        // global is tricky). Easier to do here
-        const global_template = @import("Snapshot.zig").createGlobalTemplate(isolate.handle, env.templates);
-        v8.v8__ObjectTemplate__SetNamedHandler(global_template, &.{
-            .getter = bridge.unknownPropertyCallback,
-            .setter = null,
-            .query = null,
-            .deleter = null,
-            .enumerator = null,
-            .definer = null,
-            .descriptor = null,
-            .data = null,
-            .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
-        });
-
-        const context_handle = v8.v8__Context__New(isolate.handle, global_template, null).?;
-        break :blk js.Global(Context).init(isolate.handle, context_handle);
-    };
-
-    // For a Page we only create one HandleScope, it is stored in the main World (enter==true). A page can have multple contexts, 1 for each World.
-    // The main Context that enters and holds the HandleScope should therefore always be created first. Following other worlds for this page
-    // like isolated Worlds, will thereby place their objects on the main page's HandleScope. Note: In the furure the number of context will multiply multiple frames support
-    const v8_context = persisted_context.local();
-    var handle_scope: ?js.HandleScope = null;
-    if (enter) {
-        handle_scope = @as(js.HandleScope, undefined);
-        handle_scope.?.init(isolate);
-        v8.v8__Context__Enter(v8_context);
-    }
-    errdefer if (enter) {
-        v8.v8__Context__Exit(v8_context);
-        handle_scope.?.deinit();
-    };
-
-    const context_id = env.context_id;
-    env.context_id = context_id + 1;
-
-    self.context = Context{
-        .page = page,
-        .id = context_id,
-        .isolate = isolate,
-        .handle = v8_context,
-        .templates = env.templates,
-        .handle_scope = handle_scope,
-        .script_manager = &page._script_manager,
-        .call_arena = page.call_arena,
-        .arena = arena,
-    };
-    self.persisted_context = persisted_context;
-
-    var context = &self.context.?;
-    // Store a pointer to our context inside the v8 context so that, given
-    // a v8 context, we can get our context out
-    const data = isolate.initBigInt(@intFromPtr(context));
-    v8.v8__Context__SetEmbedderData(context.handle, 1, @ptrCast(data.handle));
-
-    try context.setupGlobal();
-    return context;
-}
-
-pub fn removeContext(self: *ExecutionWorld) void {
-    var context = &(self.context orelse return);
-    context.deinit();
-    self.context = null;
-
-    self.persisted_context.?.deinit();
-    self.persisted_context = null;
-
-    self.env.isolate.notifyContextDisposed();
-    _ = self.context_arena.reset(.{ .retain_with_limit = CONTEXT_ARENA_RETAIN });
-}
-
-pub fn terminateExecution(self: *const ExecutionWorld) void {
-    self.env.isolate.terminateExecution();
-}
-
-pub fn resumeExecution(self: *const ExecutionWorld) void {
-    self.env.isolate.cancelTerminateExecution();
-}

src/browser/js/Function.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -20,11 +20,11 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
-const Allocator = std.mem.Allocator;
+const log = @import("../../log.zig");
 
 const Function = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 this: ?*const v8.Object = null,
 handle: *const v8.Function,
 
@@ -34,60 +34,77 @@ pub const Result = struct {
 };
 
 pub fn withThis(self: *const Function, value: anytype) !Function {
+    const local = self.local;
     const this_obj = if (@TypeOf(value) == js.Object)
         value.handle
     else
-        (try self.ctx.zigValueToJs(value, .{})).handle;
+        (try local.zigValueToJs(value, .{})).handle;
 
     return .{
-        .ctx = self.ctx,
+        .local = local,
         .this = this_obj,
         .handle = self.handle,
     };
 }
 
 pub fn newInstance(self: *const Function, caught: *js.TryCatch.Caught) !js.Object {
-    const ctx = self.ctx;
+    const local = self.local;
 
     var try_catch: js.TryCatch = undefined;
-    try_catch.init(ctx);
+    try_catch.init(local);
     defer try_catch.deinit();
 
     // This creates a new instance using this Function as a constructor.
     // const c_args = @as(?[*]const ?*c.Value, @ptrCast(&.{}));
-    const handle = v8.v8__Function__NewInstance(self.handle, ctx.handle, 0, null) orelse {
-        caught.* = try_catch.caughtOrError(ctx.call_arena, error.Unknown);
+    const handle = v8.v8__Function__NewInstance(self.handle, local.handle, 0, null) orelse {
+        caught.* = try_catch.caughtOrError(local.call_arena, error.Unknown);
         return error.JsConstructorFailed;
     };
 
     return .{
-        .ctx = ctx,
+        .local = local,
         .handle = handle,
     };
 }
 
 pub fn call(self: *const Function, comptime T: type, args: anytype) !T {
-    return self.callWithThis(T, self.getThis(), args);
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, self.getThis(), args, &caught, .{}) catch |err| {
+        log.warn(.js, "call caught", .{ .err = err, .caught = caught });
+        return err;
+    };
 }
 
-pub fn tryCall(self: *const Function, comptime T: type, args: anytype, caught: *js.TryCatch.Caught) !T {
-    return self.tryCallWithThis(T, self.getThis(), args, caught);
-}
-
-pub fn tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught) !T {
-    var try_catch: js.TryCatch = undefined;
-
-    try_catch.init(self.ctx);
-    defer try_catch.deinit();
-
-    return self.callWithThis(T, this, args) catch |err| {
-        caught.* = try_catch.caughtOrError(self.ctx.call_arena, err);
+pub fn callRethrow(self: *const Function, comptime T: type, args: anytype) !T {
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, self.getThis(), args, &caught, .{ .rethrow = true }) catch |err| {
+        log.warn(.js, "call caught", .{ .err = err, .caught = caught });
         return err;
     };
 }
 
 pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype) !T {
-    const ctx = self.ctx;
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, this, args, &caught, .{}) catch |err| {
+        log.warn(.js, "callWithThis caught", .{ .err = err, .caught = caught });
+        return err;
+    };
+}
+
+pub fn tryCall(self: *const Function, comptime T: type, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, self.getThis(), args, caught, .{});
+}
+
+pub fn tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, this, args, caught, .{});
+}
+
+const CallOpts = struct {
+    rethrow: bool = false,
+};
+fn _tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught, comptime opts: CallOpts) !T {
+    caught.* = .{};
+    const local = self.local;
 
     // When we're calling a function from within JavaScript itself, this isn't
     // necessary. We're within a Caller instantiation, which will already have
@@ -98,6 +115,7 @@ pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args
     // need to increase the call_depth so that the call_arena remains valid for
     // the duration of the function call. If we don't do this, the call_arena
     // will be reset after each statement of the function which executes Zig code.
+    const ctx = local.ctx;
     const call_depth = ctx.call_depth;
     ctx.call_depth = call_depth + 1;
     defer ctx.call_depth = call_depth;
@@ -106,7 +124,7 @@ pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args
         if (@TypeOf(this) == js.Object) {
             break :blk this;
         }
-        break :blk try ctx.zigValueToJs(this, .{});
+        break :blk try local.zigValueToJs(this, .{});
     };
 
     const aargs = if (comptime @typeInfo(@TypeOf(args)) == .null) struct {}{} else args;
@@ -116,15 +134,15 @@ pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args
             const fields = s.fields;
             var js_args: [fields.len]*const v8.Value = undefined;
             inline for (fields, 0..) |f, i| {
-                js_args[i] = (try ctx.zigValueToJs(@field(aargs, f.name), .{})).handle;
+                js_args[i] = (try local.zigValueToJs(@field(aargs, f.name), .{})).handle;
             }
             const cargs: [fields.len]*const v8.Value = js_args;
             break :blk &cargs;
         },
         .pointer => blk: {
-            var values = try ctx.call_arena.alloc(*const v8.Value, args.len);
+            var values = try local.call_arena.alloc(*const v8.Value, args.len);
             for (args, 0..) |a, i| {
-                values[i] = (try ctx.zigValueToJs(a, .{})).handle;
+                values[i] = (try local.zigValueToJs(a, .{})).handle;
             }
             break :blk values;
         },
@@ -132,54 +150,75 @@ pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args
     };
 
     const c_args = @as(?[*]const ?*v8.Value, @ptrCast(js_args.ptr));
-    const handle = v8.v8__Function__Call(self.handle, ctx.handle, js_this.handle, @as(c_int, @intCast(js_args.len)), c_args) orelse {
-        // std.debug.print("CB ERR: {s}\n", .{self.src() catch "???"});
+
+    var try_catch: js.TryCatch = undefined;
+    try_catch.init(local);
+    defer try_catch.deinit();
+
+    const handle = v8.v8__Function__Call(self.handle, local.handle, js_this.handle, @as(c_int, @intCast(js_args.len)), c_args) orelse {
+        if ((comptime opts.rethrow) and try_catch.hasCaught()) {
+            try_catch.rethrow();
+            return error.TryCatchRethrow;
+        }
+        caught.* = try_catch.caughtOrError(local.call_arena, error.JSExecCallback);
         return error.JSExecCallback;
     };
 
     if (@typeInfo(T) == .void) {
         return {};
     }
-    return ctx.jsValueToZig(T, .{ .ctx = ctx, .handle = handle });
+    return local.jsValueToZig(T, .{ .local = local, .handle = handle });
 }
 
 fn getThis(self: *const Function) js.Object {
-    const handle = if (self.this) |t| t else v8.v8__Context__Global(self.ctx.handle).?;
+    const handle = if (self.this) |t| t else v8.v8__Context__Global(self.local.handle).?;
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = handle,
     };
 }
 
 pub fn src(self: *const Function) ![]const u8 {
-    return self.context.valueToString(.{ .handle = @ptrCast(self.handle) }, .{});
+    return self.local.valueToString(.{ .local = self.local, .handle = @ptrCast(self.handle) }, .{});
 }
 
 pub fn getPropertyValue(self: *const Function, name: []const u8) !?js.Value {
-    const ctx = self.ctx;
-    const key = ctx.isolate.initStringHandle(name);
-    const handle = v8.v8__Object__Get(self.handle, ctx.handle, key) orelse {
+    const local = self.local;
+    const key = local.isolate.initStringHandle(name);
+    const handle = v8.v8__Object__Get(self.handle, self.local.handle, key) orelse {
         return error.JsException;
     };
 
     return .{
-        .ctx = ctx,
+        .local = local,
         .handle = handle,
     };
 }
 
 pub fn persist(self: *const Function) !Global {
-    var ctx = self.ctx;
+    return self._persist(true);
+}
+
+pub fn temp(self: *const Function) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Function, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
 
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_functions.append(ctx.arena, global);
+    } else {
+        try ctx.global_functions_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
+}
 
-    try ctx.global_functions.append(ctx.arena, global);
-
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+pub fn tempWithThis(self: *const Function, value: anytype) !Temp {
+    const with_this = try self.withThis(value);
+    return with_this.temp();
 }
 
 pub fn persistWithThis(self: *const Function, value: anytype) !Global {
@@ -187,22 +226,31 @@ pub fn persistWithThis(self: *const Function, value: anytype) !Global {
     return with_this.persist();
 }
 
-pub const Global = struct {
-    handle: v8.Global,
-    ctx: *js.Context,
+pub const Temp = G(0);
+pub const Global = G(1);
 
-    pub fn deinit(self: *Global) void {
-        v8.v8__Global__Reset(&self.handle);
-    }
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
 
-    pub fn local(self: *const Global) Function {
-        return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
-        };
-    }
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
 
-    pub fn isEqual(self: *const Global, other: Function) bool {
-        return v8.v8__Global__IsEqual(&self.handle, other.handle);
-    }
-};
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Function {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Function) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
+}

src/browser/js/HandleScope.zig

@@ -28,7 +28,11 @@ handle: v8.HandleScope,
 // value, as v8 will then have taken the address of the function-scopped (and no
 // longer valid) local.
 pub fn init(self: *HandleScope, isolate: js.Isolate) void {
-    v8.v8__HandleScope__CONSTRUCT(&self.handle, isolate.handle);
+    self.initWithIsolateHandle(isolate.handle);
+}
+
+pub fn initWithIsolateHandle(self: *HandleScope, isolate: *v8.Isolate) void {
+    v8.v8__HandleScope__CONSTRUCT(&self.handle, isolate);
 }
 
 pub fn deinit(self: *HandleScope) void {

src/browser/js/Inspector.zig

@@ -20,102 +20,79 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
-const Context = @import("Context.zig");
+const TaggedOpaque = @import("TaggedOpaque.zig");
 
 const Allocator = std.mem.Allocator;
-const RndGen = std.Random.DefaultPrng;
 
 const CONTEXT_GROUP_ID = 1;
 const CLIENT_TRUST_LEVEL = 1;
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
+// Inspector exists for the lifetime of the Isolate/Env. 1 Isolate = 1 Inspector.
+// It combines the v8.Inspector and the v8.InspectorClientImpl. The v8.InspectorClientImpl
+// is our own implementation that fulfills the InspectorClient API, i.e. it's the
+// mechanism v8 provides to let us tweak how the inspector works. For example, it
+// Below, you'll find a few pub export fn v8_inspector__Client__IMPL__XYZ functions
+// which is our implementation of what the v8::Inspector requires of our Client
+// (not much at all)
 const Inspector = @This();
 
-handle: *v8.Inspector,
+unique_id: i64,
 isolate: *v8.Isolate,
-client: Client,
-channel: Channel,
-session: Session,
-rnd: RndGen = RndGen.init(0),
-default_context: ?*const v8.Context = null,
+handle: *v8.Inspector,
+client: *v8.InspectorClientImpl,
+default_context: ?v8.Global,
+session: ?Session,
 
-// We expect allocator to be an arena
-// Note: This initializes the pre-allocated inspector in-place
-pub fn init(self: *Inspector, isolate: *v8.Isolate, ctx: anytype) !void {
-    const ContextT = @TypeOf(ctx);
+pub fn init(allocator: Allocator, isolate: *v8.Isolate) !*Inspector {
+    const self = try allocator.create(Inspector);
+    errdefer allocator.destroy(self);
 
-    const Container = switch (@typeInfo(ContextT)) {
-        .@"struct" => ContextT,
-        .pointer => |ptr| ptr.child,
-        .void => NoopInspector,
-        else => @compileError("invalid context type"),
-    };
-    // If necessary, turn a void context into something we can safely ptrCast
-    const safe_context: *anyopaque = if (ContextT == void) @ptrCast(@constCast(&{})) else ctx;
-
-    // Initialize the fields that callbacks need first
     self.* = .{
-        .handle = undefined,
+        .unique_id = 1,
+        .session = null,
         .isolate = isolate,
         .client = undefined,
-        .channel = undefined,
-        .rnd = RndGen.init(0),
+        .handle = undefined,
         .default_context = null,
-        .session = undefined,
     };
 
-    // Create client and set inspector data BEFORE creating the inspector
-    // because V8 will call generateUniqueId during inspector creation
-    const client = Client.init();
-    self.client = client;
-    client.setInspector(self);
+    self.client = v8.v8_inspector__Client__IMPL__CREATE();
+    errdefer v8.v8_inspector__Client__IMPL__DELETE(self.client);
+    v8.v8_inspector__Client__IMPL__SET_DATA(self.client, self);
 
-    // Now create the inspector - generateUniqueId will work because data is set
-    const handle = v8.v8_inspector__Inspector__Create(isolate, client.handle).?;
-    self.handle = handle;
+    self.handle = v8.v8_inspector__Inspector__Create(isolate, self.client).?;
+    errdefer v8.v8_inspector__Inspector__DELETE(self.handle);
 
-    // Create the channel
-    const channel = Channel.init(
-        safe_context,
-        Container.onInspectorResponse,
-        Container.onInspectorEvent,
-        Container.onRunMessageLoopOnPause,
-        Container.onQuitMessageLoopOnPause,
-        isolate,
-    );
-    self.channel = channel;
-    channel.setInspector(self);
-
-    // Create the session
-    const session_handle = v8.v8_inspector__Inspector__Connect(
-        handle,
-        CONTEXT_GROUP_ID,
-        channel.handle,
-        CLIENT_TRUST_LEVEL,
-    ).?;
-    self.session = .{ .handle = session_handle };
+    return self;
 }
 
-pub fn deinit(self: *const Inspector) void {
-    var temp_scope: v8.HandleScope = undefined;
-    v8.v8__HandleScope__CONSTRUCT(&temp_scope, self.isolate);
-    defer v8.v8__HandleScope__DESTRUCT(&temp_scope);
+pub fn deinit(self: *const Inspector, allocator: Allocator) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
 
-    self.session.deinit();
-    self.client.deinit();
-    self.channel.deinit();
+    if (self.session) |*s| {
+        s.deinit();
+    }
+    v8.v8_inspector__Client__IMPL__DELETE(self.client);
     v8.v8_inspector__Inspector__DELETE(self.handle);
+    allocator.destroy(self);
 }
 
-pub fn send(self: *const Inspector, msg: []const u8) void {
-    // Can't assume the main Context exists (with its HandleScope)
-    // available when doing this. Pages (and thus the HandleScope)
-    // comes and goes, but CDP can keep sending messages.
-    const isolate = self.isolate;
-    var temp_scope: v8.HandleScope = undefined;
-    v8.v8__HandleScope__CONSTRUCT(&temp_scope, isolate);
-    defer v8.v8__HandleScope__DESTRUCT(&temp_scope);
+pub fn startSession(self: *Inspector, ctx: anytype) *Session {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.session == null);
+    }
 
-    self.session.dispatchProtocolMessage(isolate, msg);
+    self.session = @as(Session, undefined);
+    Session.init(&self.session.?, self, ctx);
+    return &self.session.?;
+}
+
+pub fn stopSession(self: *Inspector) void {
+    self.session.?.deinit();
+    self.session = null;
 }
 
 // From CDP docs
@@ -128,7 +105,7 @@ pub fn send(self: *const Inspector, msg: []const u8) void {
 // - is_default_context: Whether the execution context is default, should match the auxData
 pub fn contextCreated(
     self: *Inspector,
-    context: *const Context,
+    local: *const js.Local,
     name: []const u8,
     origin: []const u8,
     aux_data: []const u8,
@@ -143,56 +120,24 @@ pub fn contextCreated(
         aux_data.ptr,
         aux_data.len,
         CONTEXT_GROUP_ID,
-        context.handle,
+        local.handle,
     );
 
     if (is_default_context) {
-        self.default_context = context.handle;
+        self.default_context = local.ctx.handle;
     }
 }
 
-// Retrieves the RemoteObject for a given value.
-// The value is loaded through the ExecutionWorld's mapZigInstanceToJs function,
-// just like a method return value. Therefore, if we've mapped this
-// value before, we'll get the existing js.Global(js.Object) and if not
-// we'll create it and track it for cleanup when the context ends.
-pub fn getRemoteObject(
-    self: *const Inspector,
-    context: *Context,
-    group: []const u8,
-    value: anytype,
-) !RemoteObject {
-    const js_value = try context.zigValueToJs(value, .{});
-
-    // We do not want to expose this as a parameter for now
-    const generate_preview = false;
-    return self.session.wrapObject(
-        context.isolate.handle,
-        context.handle,
-        js_value.handle,
-        group,
-        generate_preview,
-    );
+pub fn contextDestroyed(self: *Inspector, context: *const v8.Context) void {
+    v8.v8_inspector__Inspector__ContextDestroyed(self.handle, context);
 }
 
-// Gets a value by object ID regardless of which context it is in.
-// Our TaggedAnyOpaque stores the "resolved" ptr value (the most specific _type,
-// e.g. we store the ptr to the Div not the EventTarget). But, this is asking for
-// the pointer to the Node, so we need to use the same resolution mechanism which
-// is used when we're calling a function to turn the Div into a Node, which is
-// what Context.typeTaggedAnyOpaque does.
-pub fn getNodePtr(self: *const Inspector, allocator: Allocator, object_id: []const u8) !*anyopaque {
-    const unwrapped = try self.session.unwrapObject(allocator, object_id);
-    // The values context and groupId are not used here
-    const js_val = unwrapped.value;
-    if (!v8.v8__Value__IsObject(js_val)) {
-        return error.ObjectIdIsNotANode;
-    }
-    const Node = @import("../webapi/Node.zig");
-    // Cast to *const v8.Object for typeTaggedAnyOpaque
-    return Context.typeTaggedAnyOpaque(*Node, @ptrCast(js_val)) catch {
-        return error.ObjectIdIsNotANode;
-    };
+pub fn resetContextGroup(self: *const Inspector) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    v8.v8_inspector__Inspector__ResetContextGroup(self.handle, CONTEXT_GROUP_ID);
 }
 
 pub const RemoteObject = struct {
@@ -241,20 +186,109 @@ pub const RemoteObject = struct {
     }
 };
 
-const Session = struct {
+// Combines a v8::InspectorSession and a v8::InspectorChannelImpl. The
+// InspectorSession is for zig -> v8 (sending messages to the inspector). The
+// Channel is for v8 -> zig, getting events from the Inspector (that we'll pass
+// back ot some opaque context, i.e the CDP BrowserContext).
+// The channel callbacks are defined below, as:
+//   pub export fn v8_inspector__Channel__IMPL__XYZ
+pub const Session = struct {
+    inspector: *Inspector,
     handle: *v8.InspectorSession,
+    channel: *v8.InspectorChannelImpl,
 
-    fn deinit(self: Session) void {
-        v8.v8_inspector__Session__DELETE(self.handle);
+    // callbacks
+    ctx: *anyopaque,
+    onNotif: *const fn (ctx: *anyopaque, msg: []const u8) void,
+    onResp: *const fn (ctx: *anyopaque, call_id: u32, msg: []const u8) void,
+
+    fn init(self: *Session, inspector: *Inspector, ctx: anytype) void {
+        const Container = @typeInfo(@TypeOf(ctx)).pointer.child;
+
+        const channel = v8.v8_inspector__Channel__IMPL__CREATE(inspector.isolate);
+        const handle = v8.v8_inspector__Inspector__Connect(
+            inspector.handle,
+            CONTEXT_GROUP_ID,
+            channel,
+            CLIENT_TRUST_LEVEL,
+        ).?;
+        v8.v8_inspector__Channel__IMPL__SET_DATA(channel, self);
+
+        self.* = .{
+            .ctx = ctx,
+            .handle = handle,
+            .channel = channel,
+            .inspector = inspector,
+            .onResp = Container.onInspectorResponse,
+            .onNotif = Container.onInspectorEvent,
+        };
     }
 
-    fn dispatchProtocolMessage(self: Session, isolate: *v8.Isolate, msg: []const u8) void {
+    fn deinit(self: *const Session) void {
+        v8.v8_inspector__Session__DELETE(self.handle);
+        v8.v8_inspector__Channel__IMPL__DELETE(self.channel);
+    }
+
+    pub fn send(self: *const Session, msg: []const u8) void {
+        const isolate = self.inspector.isolate;
+        var hs: v8.HandleScope = undefined;
+        v8.v8__HandleScope__CONSTRUCT(&hs, isolate);
+        defer v8.v8__HandleScope__DESTRUCT(&hs);
+
         v8.v8_inspector__Session__dispatchProtocolMessage(
             self.handle,
             isolate,
             msg.ptr,
             msg.len,
         );
+
+        v8.v8__Isolate__PerformMicrotaskCheckpoint(isolate);
+    }
+
+    // Gets a value by object ID regardless of which context it is in.
+    // Our TaggedOpaque stores the "resolved" ptr value (the most specific _type,
+    // e.g. we store the ptr to the Div not the EventTarget). But, this is asking for
+    // the pointer to the Node, so we need to use the same resolution mechanism which
+    // is used when we're calling a function to turn the Div into a Node, which is
+    // what TaggedOpaque.fromJS does.
+    pub fn getNodePtr(self: *const Session, allocator: Allocator, object_id: []const u8, local: *js.Local) !*anyopaque {
+        // just to indicate that the caller is responsible for ensuring there's a local environment
+        _ = local;
+
+        const unwrapped = try self.unwrapObject(allocator, object_id);
+        // The values context and groupId are not used here
+        const js_val = unwrapped.value;
+        if (!v8.v8__Value__IsObject(js_val)) {
+            return error.ObjectIdIsNotANode;
+        }
+
+        const Node = @import("../webapi/Node.zig");
+        // Cast to *const v8.Object for typeTaggedAnyOpaque
+        return TaggedOpaque.fromJS(*Node, @ptrCast(js_val)) catch return error.ObjectIdIsNotANode;
+    }
+
+    // Retrieves the RemoteObject for a given value.
+    // The value is loaded through the ExecutionWorld's mapZigInstanceToJs function,
+    // just like a method return value. Therefore, if we've mapped this
+    // value before, we'll get the existing js.Global(js.Object) and if not
+    // we'll create it and track it for cleanup when the context ends.
+    pub fn getRemoteObject(
+        self: *const Session,
+        local: *const js.Local,
+        group: []const u8,
+        value: anytype,
+    ) !RemoteObject {
+        const js_val = try local.zigValueToJs(value, .{});
+
+        // We do not want to expose this as a parameter for now
+        const generate_preview = false;
+        return self.wrapObject(
+            local.isolate.handle,
+            local.handle,
+            js_val.handle,
+            group,
+            generate_preview,
+        );
     }
 
     fn wrapObject(
@@ -321,85 +355,7 @@ const UnwrappedObject = struct {
     object_group: ?[]const u8,
 };
 
-const Channel = struct {
-    handle: *v8.InspectorChannelImpl,
-
-    // callbacks
-    ctx: *anyopaque,
-    onNotif: onNotifFn = undefined,
-    onResp: onRespFn = undefined,
-    onRunMessageLoopOnPause: onRunMessageLoopOnPauseFn = undefined,
-    onQuitMessageLoopOnPause: onQuitMessageLoopOnPauseFn = undefined,
-
-    pub const onNotifFn = *const fn (ctx: *anyopaque, msg: []const u8) void;
-    pub const onRespFn = *const fn (ctx: *anyopaque, call_id: u32, msg: []const u8) void;
-    pub const onRunMessageLoopOnPauseFn = *const fn (ctx: *anyopaque, context_group_id: u32) void;
-    pub const onQuitMessageLoopOnPauseFn = *const fn (ctx: *anyopaque) void;
-
-    fn init(
-        ctx: *anyopaque,
-        onResp: onRespFn,
-        onNotif: onNotifFn,
-        onRunMessageLoopOnPause: onRunMessageLoopOnPauseFn,
-        onQuitMessageLoopOnPause: onQuitMessageLoopOnPauseFn,
-        isolate: *v8.Isolate,
-    ) Channel {
-        const handle = v8.v8_inspector__Channel__IMPL__CREATE(isolate);
-        return .{
-            .handle = handle,
-            .ctx = ctx,
-            .onResp = onResp,
-            .onNotif = onNotif,
-            .onRunMessageLoopOnPause = onRunMessageLoopOnPause,
-            .onQuitMessageLoopOnPause = onQuitMessageLoopOnPause,
-        };
-    }
-
-    fn deinit(self: Channel) void {
-        v8.v8_inspector__Channel__IMPL__DELETE(self.handle);
-    }
-
-    fn setInspector(self: Channel, inspector: *anyopaque) void {
-        v8.v8_inspector__Channel__IMPL__SET_DATA(self.handle, inspector);
-    }
-
-    fn resp(self: Channel, call_id: u32, msg: []const u8) void {
-        self.onResp(self.ctx, call_id, msg);
-    }
-
-    fn notif(self: Channel, msg: []const u8) void {
-        self.onNotif(self.ctx, msg);
-    }
-};
-
-const Client = struct {
-    handle: *v8.InspectorClientImpl,
-
-    fn init() Client {
-        return .{ .handle = v8.v8_inspector__Client__IMPL__CREATE() };
-    }
-
-    fn deinit(self: Client) void {
-        v8.v8_inspector__Client__IMPL__DELETE(self.handle);
-    }
-
-    fn setInspector(self: Client, inspector: *anyopaque) void {
-        v8.v8_inspector__Client__IMPL__SET_DATA(self.handle, inspector);
-    }
-};
-
-const NoopInspector = struct {
-    pub fn onInspectorResponse(_: *anyopaque, _: u32, _: []const u8) void {}
-    pub fn onInspectorEvent(_: *anyopaque, _: []const u8) void {}
-    pub fn onRunMessageLoopOnPause(_: *anyopaque, _: u32) void {}
-    pub fn onQuitMessageLoopOnPause(_: *anyopaque) void {}
-};
-
-fn fromData(data: *anyopaque) *Inspector {
-    return @ptrCast(@alignCast(data));
-}
-
-pub fn getTaggedAnyOpaque(value: *const v8.Value) ?*js.TaggedAnyOpaque {
+pub fn getTaggedOpaque(value: *const v8.Value) ?*TaggedOpaque {
     if (!v8.v8__Value__IsObject(value)) {
         return null;
     }
@@ -408,9 +364,8 @@ pub fn getTaggedAnyOpaque(value: *const v8.Value) ?*js.TaggedAnyOpaque {
         return null;
     }
 
-    const external_value = v8.v8__Object__GetInternalField(value, 0).?;
-    const external_data = v8.v8__External__Value(external_value).?;
-    return @ptrCast(@alignCast(external_data));
+    const tao_ptr = v8.v8__Object__GetAlignedPointerFromInternalField(value, 0).?;
+    return @ptrCast(@alignCast(tao_ptr));
 }
 
 fn cZigStringToString(s: v8.CZigString) ?[]const u8 {
@@ -424,24 +379,25 @@ pub export fn v8_inspector__Client__IMPL__generateUniqueId(
     data: *anyopaque,
 ) callconv(.c) i64 {
     const inspector: *Inspector = @ptrCast(@alignCast(data));
-    return inspector.rnd.random().int(i64);
+    const unique_id = inspector.unique_id + 1;
+    inspector.unique_id = unique_id;
+    return unique_id;
 }
 
 pub export fn v8_inspector__Client__IMPL__runMessageLoopOnPause(
     _: *v8.InspectorClientImpl,
     data: *anyopaque,
-    ctx_group_id: c_int,
+    context_group_id: c_int,
 ) callconv(.c) void {
-    const inspector: *Inspector = @ptrCast(@alignCast(data));
-    inspector.channel.onRunMessageLoopOnPause(inspector.channel.ctx, @intCast(ctx_group_id));
+    _ = data;
+    _ = context_group_id;
 }
 
 pub export fn v8_inspector__Client__IMPL__quitMessageLoopOnPause(
     _: *v8.InspectorClientImpl,
     data: *anyopaque,
 ) callconv(.c) void {
-    const inspector: *Inspector = @ptrCast(@alignCast(data));
-    inspector.channel.onQuitMessageLoopOnPause(inspector.channel.ctx);
+    _ = data;
 }
 
 pub export fn v8_inspector__Client__IMPL__runIfWaitingForDebugger(
@@ -469,7 +425,8 @@ pub export fn v8_inspector__Client__IMPL__ensureDefaultContextInGroup(
     data: *anyopaque,
 ) callconv(.c) ?*const v8.Context {
     const inspector: *Inspector = @ptrCast(@alignCast(data));
-    return inspector.default_context;
+    const global_handle = inspector.default_context orelse return null;
+    return v8.v8__Global__Get(&global_handle, inspector.isolate);
 }
 
 pub export fn v8_inspector__Channel__IMPL__sendResponse(
@@ -479,8 +436,8 @@ pub export fn v8_inspector__Channel__IMPL__sendResponse(
     msg: [*c]u8,
     length: usize,
 ) callconv(.c) void {
-    const inspector: *Inspector = @ptrCast(@alignCast(data));
-    inspector.channel.resp(@as(u32, @intCast(call_id)), msg[0..length]);
+    const session: *Session = @ptrCast(@alignCast(data));
+    session.onResp(session.ctx, @intCast(call_id), msg[0..length]);
 }
 
 pub export fn v8_inspector__Channel__IMPL__sendNotification(
@@ -489,8 +446,8 @@ pub export fn v8_inspector__Channel__IMPL__sendNotification(
     msg: [*c]u8,
     length: usize,
 ) callconv(.c) void {
-    const inspector: *Inspector = @ptrCast(@alignCast(data));
-    inspector.channel.notif(msg[0..length]);
+    const session: *Session = @ptrCast(@alignCast(data));
+    session.onNotif(session.ctx, msg[0..length]);
 }
 
 pub export fn v8_inspector__Channel__IMPL__flushProtocolNotifications(

src/browser/js/Isolate.zig

@@ -57,6 +57,16 @@ pub fn lowMemoryNotification(self: Isolate) void {
     v8.v8__Isolate__LowMemoryNotification(self.handle);
 }
 
+pub const MemoryPressureLevel = enum(u32) {
+    none = v8.kNone,
+    moderate = v8.kModerate,
+    critical = v8.kCritical,
+};
+
+pub fn memoryPressureNotification(self: Isolate, level: MemoryPressureLevel) void {
+    v8.v8__Isolate__MemoryPressureNotification(self.handle, @intFromEnum(level));
+}
+
 pub fn notifyContextDisposed(self: Isolate) void {
     _ = v8.v8__Isolate__ContextDisposedNotification(self.handle);
 }

src/browser/js/Module.zig

@@ -21,7 +21,7 @@ const v8 = js.v8;
 
 const Module = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.Module,
 
 pub const Status = enum(u32) {
@@ -39,21 +39,21 @@ pub fn getStatus(self: Module) Status {
 
 pub fn getException(self: Module) js.Value {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = v8.v8__Module__GetException(self.handle).?,
     };
 }
 
 pub fn getModuleRequests(self: Module) Requests {
     return .{
-        .ctx = self.ctx.handle,
+        .context_handle = self.local.handle,
         .handle = v8.v8__Module__GetModuleRequests(self.handle).?,
     };
 }
 
 pub fn instantiate(self: Module, cb: v8.ResolveModuleCallback) !bool {
     var out: v8.MaybeBool = undefined;
-    v8.v8__Module__InstantiateModule(self.handle, self.ctx.handle, cb, &out);
+    v8.v8__Module__InstantiateModule(self.handle, self.local.handle, cb, &out);
     if (out.has_value) {
         return out.value;
     }
@@ -61,15 +61,14 @@ pub fn instantiate(self: Module, cb: v8.ResolveModuleCallback) !bool {
 }
 
 pub fn evaluate(self: Module) !js.Value {
-    const ctx = self.ctx;
-    const res = v8.v8__Module__Evaluate(self.handle, ctx.handle) orelse return error.JsException;
+    const res = v8.v8__Module__Evaluate(self.handle, self.local.handle) orelse return error.JsException;
 
     if (self.getStatus() == .kErrored) {
         return error.JsException;
     }
 
     return .{
-        .ctx = ctx,
+        .local = self.local,
         .handle = res,
     };
 }
@@ -80,7 +79,7 @@ pub fn getIdentityHash(self: Module) u32 {
 
 pub fn getModuleNamespace(self: Module) js.Value {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = v8.v8__Module__GetModuleNamespace(self.handle).?,
     };
 }
@@ -90,28 +89,24 @@ pub fn getScriptId(self: Module) u32 {
 }
 
 pub fn persist(self: Module) !Global {
-    var ctx = self.ctx;
+    var ctx = self.local.ctx;
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
     try ctx.global_modules.append(ctx.arena, global);
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+    return .{ .handle = global };
 }
 
 pub const Global = struct {
     handle: v8.Global,
-    ctx: *js.Context,
 
     pub fn deinit(self: *Global) void {
         v8.v8__Global__Reset(&self.handle);
     }
 
-    pub fn local(self: *const Global) Module {
+    pub fn local(self: *const Global, l: *const js.Local) Module {
         return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
         };
     }
 
@@ -121,22 +116,22 @@ pub const Global = struct {
 };
 
 const Requests = struct {
-    ctx: *const v8.Context,
     handle: *const v8.FixedArray,
+    context_handle: *const v8.Context,
 
     pub fn len(self: Requests) usize {
         return @intCast(v8.v8__FixedArray__Length(self.handle));
     }
 
     pub fn get(self: Requests, idx: usize) Request {
-        return .{ .handle = v8.v8__FixedArray__Get(self.handle, self.ctx, @intCast(idx)).? };
+        return .{ .handle = v8.v8__FixedArray__Get(self.handle, self.context_handle, @intCast(idx)).? };
     }
 };
 
 const Request = struct {
     handle: *const v8.ModuleRequest,
 
-    pub fn specifier(self: Request) *const v8.String {
-        return v8.v8__ModuleRequest__GetSpecifier(self.handle).?;
+    pub fn specifier(self: Request, local: *const js.Local) js.String {
+        return .{ .local = local, .handle = v8.v8__ModuleRequest__GetSpecifier(self.handle).? };
     }
 };

src/browser/js/Object.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -22,25 +22,17 @@ const v8 = js.v8;
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
-const Context = @import("Context.zig");
-
-const Allocator = std.mem.Allocator;
-
 const Object = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.Object,
 
-pub fn getId(self: Object) u32 {
-    return @bitCast(v8.v8__Object__GetIdentityHash(self.handle));
-}
-
 pub fn has(self: Object, key: anytype) bool {
-    const ctx = self.ctx;
+    const ctx = self.local.ctx;
     const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Object__Has(self.handle, self.ctx.handle, key_handle, &out);
+    v8.v8__Object__Has(self.handle, self.local.handle, key_handle, &out);
     if (out.has_value) {
         return out.value;
     }
@@ -48,34 +40,34 @@ pub fn has(self: Object, key: anytype) bool {
 }
 
 pub fn get(self: Object, key: anytype) !js.Value {
-    const ctx = self.ctx;
+    const ctx = self.local.ctx;
 
     const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
-    const js_val_handle = v8.v8__Object__Get(self.handle, ctx.handle, key_handle) orelse return error.JsException;
+    const js_val_handle = v8.v8__Object__Get(self.handle, self.local.handle, key_handle) orelse return error.JsException;
 
     return .{
-        .ctx = ctx,
+        .local = self.local,
         .handle = js_val_handle,
     };
 }
 
-pub fn set(self: Object, key: anytype, value: anytype, comptime opts: js.bridge.Caller.CallOpts) !bool {
-    const ctx = self.ctx;
+pub fn set(self: Object, key: anytype, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const ctx = self.local.ctx;
 
-    const js_value = try ctx.zigValueToJs(value, opts);
+    const js_value = try self.local.zigValueToJs(value, opts);
     const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Object__Set(self.handle, ctx.handle, key_handle, js_value.handle, &out);
+    v8.v8__Object__Set(self.handle, self.local.handle, key_handle, js_value.handle, &out);
     return out.has_value;
 }
 
 pub fn defineOwnProperty(self: Object, name: []const u8, value: js.Value, attr: v8.PropertyAttribute) ?bool {
-    const ctx = self.ctx;
+    const ctx = self.local.ctx;
     const name_handle = ctx.isolate.initStringHandle(name);
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Object__DefineOwnProperty(self.handle, ctx.handle, @ptrCast(name_handle), value.handle, attr, &out);
+    v8.v8__Object__DefineOwnProperty(self.handle, self.local.handle, @ptrCast(name_handle), value.handle, attr, &out);
 
     if (out.has_value) {
         return out.value;
@@ -84,53 +76,46 @@ pub fn defineOwnProperty(self: Object, name: []const u8, value: js.Value, attr:
     }
 }
 
-pub fn toString(self: Object) ![]const u8 {
-    return self.ctx.valueToString(self.toValue(), .{});
-}
-
 pub fn toValue(self: Object) js.Value {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
 
 pub fn format(self: Object, writer: *std.Io.Writer) !void {
     if (comptime IS_DEBUG) {
-        return self.ctx.debugValue(self.toValue(), writer);
+        return self.local.ctx.debugValue(self.toValue(), writer);
     }
     const str = self.toString() catch return error.WriteFailed;
     return writer.writeAll(str);
 }
 
 pub fn persist(self: Object) !Global {
-    var ctx = self.ctx;
+    var ctx = self.local.ctx;
 
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
 
     try ctx.global_objects.append(ctx.arena, global);
 
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+    return .{ .handle = global };
 }
 
 pub fn getFunction(self: Object, name: []const u8) !?js.Function {
     if (self.isNullOrUndefined()) {
         return null;
     }
-    const ctx = self.ctx;
+    const local = self.local;
 
-    const js_name = ctx.isolate.initStringHandle(name);
-    const js_val_handle = v8.v8__Object__Get(self.handle, ctx.handle, js_name) orelse return error.JsException;
+    const js_name = local.isolate.initStringHandle(name);
+    const js_val_handle = v8.v8__Object__Get(self.handle, local.handle, js_name) orelse return error.JsException;
 
     if (v8.v8__Value__IsFunction(js_val_handle) == false) {
         return null;
     }
     return .{
-        .ctx = ctx,
+        .local = local,
         .handle = @ptrCast(js_val_handle),
     };
 }
@@ -145,51 +130,48 @@ pub fn isNullOrUndefined(self: Object) bool {
 }
 
 pub fn getOwnPropertyNames(self: Object) js.Array {
-    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.ctx.handle).?;
+    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.local.handle).?;
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = handle,
     };
 }
 
 pub fn getPropertyNames(self: Object) js.Array {
-    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.ctx.handle).?;
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = handle,
     };
 }
 
 pub fn nameIterator(self: Object) NameIterator {
-    const ctx = self.ctx;
-
-    const handle = v8.v8__Object__GetPropertyNames(self.handle, ctx.handle).?;
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
     const count = v8.v8__Array__Length(handle);
 
     return .{
-        .ctx = ctx,
+        .local = self.local,
         .handle = handle,
         .count = count,
     };
 }
 
 pub fn toZig(self: Object, comptime T: type) !T {
-    const js_value = js.Value{ .ctx = self.ctx, .handle = @ptrCast(self.handle) };
-    return self.ctx.jsValueToZig(T, js_value);
+    const js_value = js.Value{ .local = self.local, .handle = @ptrCast(self.handle) };
+    return self.local.jsValueToZig(T, js_value);
 }
 
 pub const Global = struct {
     handle: v8.Global,
-    ctx: *js.Context,
 
     pub fn deinit(self: *Global) void {
         v8.v8__Global__Reset(&self.handle);
     }
 
-    pub fn local(self: *const Global) Object {
+    pub fn local(self: *const Global, l: *const js.Local) Object {
         return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
         };
     }
 
@@ -201,7 +183,7 @@ pub const Global = struct {
 pub const NameIterator = struct {
     count: u32,
     idx: u32 = 0,
-    ctx: *Context,
+    local: *const js.Local,
     handle: *const v8.Array,
 
     pub fn next(self: *NameIterator) !?[]const u8 {
@@ -211,8 +193,8 @@ pub const NameIterator = struct {
         }
         self.idx += 1;
 
-        const js_val_handle = v8.v8__Object__GetIndex(@ptrCast(self.handle), self.ctx.handle, idx) orelse return error.JsException;
-        const js_val = js.Value{ .ctx = self.ctx, .handle = js_val_handle };
-        return try self.ctx.valueToString(js_val, .{});
+        const local = self.local;
+        const js_val_handle = v8.v8__Object__GetIndex(@ptrCast(self.handle), local.handle, idx) orelse return error.JsException;
+        return try js.Value.toStringSlice(.{ .local = local, .handle = js_val_handle });
     }
 };

src/browser/js/Private.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -16,33 +16,27 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
 const js = @import("js.zig");
-
 const v8 = js.v8;
 
-pub fn Global(comptime T: type) type {
-    const H = @FieldType(T, "handle");
+const Private = @This();
 
-    return struct {
-        global: v8.Global,
+// Unlike most types, we always store the Private as a Global. It makes more
+// sense for this type given how it's used.
+handle: v8.Global,
 
-        const Self = @This();
+pub fn init(isolate: *v8.Isolate, name: []const u8) Private {
+    const v8_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+    const private_handle = v8.v8__Private__New(isolate, v8_name);
 
-        pub fn init(isolate: *v8.Isolate, handle: H) Self {
-            var global: v8.Global = undefined;
-            v8.v8__Global__New(isolate, handle, &global);
-            return .{
-                .global = global,
-            };
-        }
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(isolate, private_handle, &global);
 
-        pub fn deinit(self: *Self) void {
-            v8.v8__Global__Reset(&self.global);
-        }
-
-        pub fn local(self: *const Self) H {
-            return @ptrCast(@alignCast(@as(*const anyopaque, @ptrFromInt(self.global.data_ptr))));
-        }
+    return .{
+        .handle = global,
     };
 }
+
+pub fn deinit(self: *Private) void {
+    v8.v8__Global__Reset(&self.handle);
+}

src/browser/js/Promise.zig

@@ -21,63 +21,75 @@ const v8 = js.v8;
 
 const Promise = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.Promise,
 
 pub fn toObject(self: Promise) js.Object {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
 
 pub fn toValue(self: Promise) js.Value {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
 
 pub fn thenAndCatch(self: Promise, on_fulfilled: js.Function, on_rejected: js.Function) !Promise {
-    if (v8.v8__Promise__Then2(self.handle, self.ctx.handle, on_fulfilled.handle, on_rejected.handle)) |handle| {
+    if (v8.v8__Promise__Then2(self.handle, self.local.handle, on_fulfilled.handle, on_rejected.handle)) |handle| {
         return .{
-            .ctx = self.ctx,
+            .local = self.local,
             .handle = handle,
         };
     }
     return error.PromiseChainFailed;
 }
+
 pub fn persist(self: Promise) !Global {
-    var ctx = self.ctx;
-    var global: v8.Global = undefined;
-    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
-    try ctx.global_promises.append(ctx.arena, global);
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+    return self._persist(true);
 }
 
-pub const Global = struct {
-    handle: v8.Global,
-    ctx: *js.Context,
+pub fn temp(self: Promise) !Temp {
+    return self._persist(false);
+}
 
-    pub fn deinit(self: *Global) void {
-        v8.v8__Global__Reset(&self.handle);
-    }
+fn _persist(self: *const Promise, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
 
-    pub fn local(self: *const Global) Promise {
-        return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
-        };
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_promises.append(ctx.arena, global);
+    } else {
+        try ctx.global_promises_temp.put(ctx.arena, global.data_ptr, global);
     }
+    return .{ .handle = global };
+}
 
-    pub fn isEqual(self: *const Global, other: Promise) bool {
-        return v8.v8__Global__IsEqual(&self.handle, other.handle);
-    }
+pub const Temp = G(0);
+pub const Global = G(1);
 
-    pub fn promise(self: *const Global) Promise {
-        return self.local();
-    }
-};
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Promise {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+    };
+}

src/browser/js/PromiseRejection.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -19,6 +19,23 @@
 const js = @import("js.zig");
 const v8 = js.v8;
 
-const Name = @This();
+const PromiseRejection = @This();
 
-handle: *const v8.Name,
+local: *const js.Local,
+handle: *const v8.PromiseRejectMessage,
+
+pub fn promise(self: PromiseRejection) js.Promise {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__PromiseRejectMessage__GetPromise(self.handle).?,
+    };
+}
+
+pub fn reason(self: PromiseRejection) ?js.Value {
+    const value_handle = v8.v8__PromiseRejectMessage__GetValue(self.handle) orelse return null;
+
+    return .{
+        .local = self.local,
+        .handle = value_handle,
+    };
+}

src/browser/js/PromiseResolver.zig

@@ -22,19 +22,19 @@ const log = @import("../../log.zig");
 
 const PromiseResolver = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.PromiseResolver,
 
-pub fn init(ctx: *js.Context) PromiseResolver {
+pub fn init(local: *const js.Local) PromiseResolver {
     return .{
-        .ctx = ctx,
-        .handle = v8.v8__Promise__Resolver__New(ctx.handle).?,
+        .local = local,
+        .handle = v8.v8__Promise__Resolver__New(local.handle).?,
     };
 }
 
 pub fn promise(self: PromiseResolver) js.Promise {
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = v8.v8__Promise__Resolver__GetPromise(self.handle).?,
     };
 }
@@ -46,15 +46,15 @@ pub fn resolve(self: PromiseResolver, comptime source: []const u8, value: anytyp
 }
 
 fn _resolve(self: PromiseResolver, value: anytype) !void {
-    const ctx: *js.Context = @constCast(self.ctx);
-    const js_value = try ctx.zigValueToJs(value, .{});
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Promise__Resolver__Resolve(self.handle, self.ctx.handle, js_value.handle, &out);
+    v8.v8__Promise__Resolver__Resolve(self.handle, self.local.handle, js_val.handle, &out);
     if (!out.has_value or !out.value) {
         return error.FailedToResolvePromise;
     }
-    ctx.runMicrotasks();
+    local.runMicrotasks();
 }
 
 pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
@@ -64,44 +64,36 @@ pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype
 }
 
 fn _reject(self: PromiseResolver, value: anytype) !void {
-    const ctx = self.ctx;
-    const js_value = try ctx.zigValueToJs(value, .{});
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
 
     var out: v8.MaybeBool = undefined;
-    v8.v8__Promise__Resolver__Reject(self.handle, ctx.handle, js_value.handle, &out);
+    v8.v8__Promise__Resolver__Reject(self.handle, local.handle, js_val.handle, &out);
     if (!out.has_value or !out.value) {
         return error.FailedToRejectPromise;
     }
-    ctx.runMicrotasks();
+    local.runMicrotasks();
 }
 
 pub fn persist(self: PromiseResolver) !Global {
-    var ctx = self.ctx;
+    var ctx = self.local.ctx;
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
     try ctx.global_promise_resolvers.append(ctx.arena, global);
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+    return .{ .handle = global };
 }
 
 pub const Global = struct {
     handle: v8.Global,
-    ctx: *js.Context,
 
     pub fn deinit(self: *Global) void {
         v8.v8__Global__Reset(&self.handle);
     }
 
-    pub fn local(self: *const Global) PromiseResolver {
+    pub fn local(self: *const Global, l: *const js.Local) PromiseResolver {
         return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
         };
     }
-
-    pub fn isEqual(self: *const Global, other: PromiseResolver) bool {
-        return v8.v8__Global__IsEqual(&self.handle, other.handle);
-    }
 };

src/browser/js/Scheduler.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -19,8 +19,8 @@
 const std = @import("std");
 const builtin = @import("builtin");
 
-const log = @import("../log.zig");
-const milliTimestamp = @import("../datetime.zig").milliTimestamp;
+const log = @import("../../log.zig");
+const milliTimestamp = @import("../../datetime.zig").milliTimestamp;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
@@ -47,9 +47,15 @@ pub fn init(allocator: std.mem.Allocator) Scheduler {
     };
 }
 
+pub fn deinit(self: *Scheduler) void {
+    finalizeTasks(&self.low_priority);
+    finalizeTasks(&self.high_priority);
+}
+
 const AddOpts = struct {
     name: []const u8 = "",
     low_priority: bool = false,
+    finalizer: ?Finalizer = null,
 };
 pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts: AddOpts) !void {
     if (comptime IS_DEBUG) {
@@ -63,6 +69,7 @@ pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts
         .callback = cb,
         .sequence = seq,
         .name = opts.name,
+        .finalizer = opts.finalizer,
         .run_at = milliTimestamp(.monotonic) + run_in_ms,
     });
 }
@@ -72,6 +79,11 @@ pub fn run(self: *Scheduler) !?u64 {
     return self.runQueue(&self.high_priority);
 }
 
+pub fn hasReadyTasks(self: *Scheduler) bool {
+    const now = milliTimestamp(.monotonic);
+    return queueuHasReadyTask(&self.low_priority, now) or queueuHasReadyTask(&self.high_priority, now);
+}
+
 fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
     if (queue.count() == 0) {
         return null;
@@ -105,12 +117,28 @@ fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
     return null;
 }
 
+fn queueuHasReadyTask(queue: *Queue, now: u64) bool {
+    const task = queue.peek() orelse return false;
+    return task.run_at <= now;
+}
+
+fn finalizeTasks(queue: *Queue) void {
+    var it = queue.iterator();
+    while (it.next()) |t| {
+        if (t.finalizer) |func| {
+            func(t.ctx);
+        }
+    }
+}
+
 const Task = struct {
     run_at: u64,
     sequence: u64,
     ctx: *anyopaque,
     name: []const u8,
     callback: Callback,
+    finalizer: ?Finalizer,
 };
 
 const Callback = *const fn (ctx: *anyopaque) anyerror!?u32;
+const Finalizer = *const fn (ctx: *anyopaque) void;

src/browser/js/Snapshot.zig

@@ -22,7 +22,6 @@ const bridge = @import("bridge.zig");
 const log = @import("../../log.zig");
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
-const Window = @import("../webapi/Window.zig");
 
 const v8 = js.v8;
 const JsApis = bridge.JsApis;
@@ -114,20 +113,6 @@ fn isValid(self: Snapshot) bool {
     return v8.v8__StartupData__IsValid(self.startup_data);
 }
 
-pub fn createGlobalTemplate(isolate: *v8.Isolate, templates: anytype) *const v8.ObjectTemplate {
-    // Set up the global template to inherit from Window's template
-    // This way the global object gets all Window properties through inheritance
-    const js_global = v8.v8__FunctionTemplate__New__DEFAULT(isolate);
-    const window_name = v8.v8__String__NewFromUtf8(isolate, "Window", v8.kNormal, 6);
-    v8.v8__FunctionTemplate__SetClassName(js_global, window_name);
-
-    // Find Window in JsApis by name (avoids circular import)
-    const window_index = comptime bridge.JsApiLookup.getId(Window.JsApi);
-    v8.v8__FunctionTemplate__Inherit(js_global, templates[window_index]);
-
-    return v8.v8__FunctionTemplate__InstanceTemplate(js_global).?;
-}
-
 pub fn create() !Snapshot {
     var external_references = collectExternalReferences();
 
@@ -169,8 +154,7 @@ pub fn create() !Snapshot {
 
         // Set up the global template to inherit from Window's template
         // This way the global object gets all Window properties through inheritance
-        const global_template = createGlobalTemplate(isolate, templates[0..]);
-        const context = v8.v8__Context__New(isolate, global_template, null);
+        const context = v8.v8__Context__New(isolate, null, null);
         v8.v8__Context__Enter(context);
         defer v8.v8__Context__Exit(context);
 
@@ -218,12 +202,16 @@ pub fn create() !Snapshot {
                     const name = JsApi.Meta.name;
                     const illegal_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
                     var maybe_result2: v8.MaybeBool = undefined;
-                    v8.v8__Object__Set(global_obj, context, illegal_class_name, func, &maybe_result2);
+                    v8.v8__Object__DefineOwnProperty(global_obj, context, illegal_class_name, func, 0, &maybe_result2);
                 } else {
                     const name = JsApi.Meta.name;
                     const v8_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
                     var maybe_result: v8.MaybeBool = undefined;
-                    v8.v8__Object__Set(global_obj, context, v8_class_name, func, &maybe_result);
+                    var properties: v8.PropertyAttribute = v8.None;
+                    if (@hasDecl(JsApi.Meta, "enumerable") and JsApi.Meta.enumerable == false) {
+                        properties |= v8.DontEnum;
+                    }
+                    v8.v8__Object__DefineOwnProperty(global_obj, context, v8_class_name, func, properties, &maybe_result);
                 }
             }
         }
@@ -277,12 +265,26 @@ pub fn create() !Snapshot {
     };
 }
 
+// Helper to check if a JsApi has a NamedIndexed handler
+fn hasNamedIndexedGetter(comptime JsApi: type) bool {
+    const declarations = @typeInfo(JsApi).@"struct".decls;
+    inline for (declarations) |d| {
+        const value = @field(JsApi, d.name);
+        const T = @TypeOf(value);
+        if (T == bridge.NamedIndexed) {
+            return true;
+        }
+    }
+    return false;
+}
+
 // Count total callbacks needed for external_references array
 fn countExternalReferences() comptime_int {
     @setEvalBranchQuota(100_000);
 
     // +1 for the illegal constructor callback
     var count: comptime_int = 1;
+    var has_non_template_property: bool = false;
 
     inline for (JsApis) |JsApi| {
         // Constructor (only if explicit)
@@ -305,6 +307,10 @@ fn countExternalReferences() comptime_int {
                 if (value.setter != null) count += 1; // setter
             } else if (T == bridge.Function) {
                 count += 1;
+            } else if (T == bridge.Property) {
+                if (value.template == false) {
+                    has_non_template_property = true;
+                }
             } else if (T == bridge.Iterator) {
                 count += 1;
             } else if (T == bridge.Indexed) {
@@ -317,6 +323,19 @@ fn countExternalReferences() comptime_int {
         }
     }
 
+    if (has_non_template_property) {
+        count += 1;
+    }
+
+    // In debug mode, add unknown property callbacks for types without NamedIndexed
+    if (comptime IS_DEBUG) {
+        inline for (JsApis) |JsApi| {
+            if (!hasNamedIndexedGetter(JsApi)) {
+                count += 1;
+            }
+        }
+    }
+
     return count + 1; // +1 for null terminator
 }
 
@@ -327,6 +346,8 @@ fn collectExternalReferences() [countExternalReferences()]isize {
     references[idx] = @bitCast(@intFromPtr(&illegalConstructorCallback));
     idx += 1;
 
+    var has_non_template_property = false;
+
     inline for (JsApis) |JsApi| {
         if (@hasDecl(JsApi, "constructor")) {
             references[idx] = @bitCast(@intFromPtr(JsApi.constructor.func));
@@ -352,6 +373,10 @@ fn collectExternalReferences() [countExternalReferences()]isize {
             } else if (T == bridge.Function) {
                 references[idx] = @bitCast(@intFromPtr(value.func));
                 idx += 1;
+            } else if (T == bridge.Property) {
+                if (value.template == false) {
+                    has_non_template_property = true;
+                }
             } else if (T == bridge.Iterator) {
                 references[idx] = @bitCast(@intFromPtr(value.func));
                 idx += 1;
@@ -373,6 +398,21 @@ fn collectExternalReferences() [countExternalReferences()]isize {
         }
     }
 
+    if (has_non_template_property) {
+        references[idx] = @bitCast(@intFromPtr(&bridge.Property.getter));
+        idx += 1;
+    }
+
+    // In debug mode, collect unknown property callbacks for types without NamedIndexed
+    if (comptime IS_DEBUG) {
+        inline for (JsApis) |JsApi| {
+            if (!hasNamedIndexedGetter(JsApi)) {
+                references[idx] = @bitCast(@intFromPtr(bridge.unknownObjectPropertyCallback(JsApi)));
+                idx += 1;
+            }
+        }
+    }
+
     return references;
 }
 
@@ -393,9 +433,12 @@ fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionT
     };
 
     const template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, callback).?);
-    if (!@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
-        const instance_template = v8.v8__FunctionTemplate__InstanceTemplate(template);
-        v8.v8__ObjectTemplate__SetInternalFieldCount(instance_template, 1);
+    {
+        const internal_field_count = comptime countInternalFields(JsApi);
+        if (internal_field_count > 0) {
+            const instance_template = v8.v8__FunctionTemplate__InstanceTemplate(template);
+            v8.v8__ObjectTemplate__SetInternalFieldCount(instance_template, internal_field_count);
+        }
     }
     const name_str = if (@hasDecl(JsApi.Meta, "name")) JsApi.Meta.name else @typeName(JsApi);
     const class_name = v8.v8__String__NewFromUtf8(isolate, name_str.ptr, v8.kNormal, @intCast(name_str.len));
@@ -403,12 +446,51 @@ fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionT
     return template;
 }
 
+pub fn countInternalFields(comptime JsApi: type) u8 {
+    var last_used_id = 0;
+    var cache_count: u8 = 0;
+
+    inline for (@typeInfo(JsApi).@"struct".decls) |d| {
+        const name: [:0]const u8 = d.name;
+        const value = @field(JsApi, name);
+        const definition = @TypeOf(value);
+
+        switch (definition) {
+            inline bridge.Accessor, bridge.Function => {
+                const cache = value.cache orelse continue;
+                if (cache != .internal) {
+                    continue;
+                }
+                // We assert that they are declared in-order. This isn't necessary
+                // but I don't want to do anything fancy to look for gaps or
+                // duplicates.
+                const internal_id = cache.internal;
+                if (internal_id != last_used_id + 1) {
+                    @compileError(@typeName(JsApi) ++ "." ++ name ++ " has a non-monotonic cache index");
+                }
+                last_used_id = internal_id;
+                cache_count += 1; // this is just last_used, but it's more explicit this way
+            },
+            else => {},
+        }
+    }
+
+    if (@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        return cache_count;
+    }
+
+    // we need cache_count internal fields, + 1 for the TAO pointer (the v8 -> Zig)
+    // mapping) itself.
+    return cache_count + 1;
+}
+
 // Attaches JsApi members to the prototype template (normal case)
 fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.FunctionTemplate) void {
     const target = v8.v8__FunctionTemplate__PrototypeTemplate(template);
     const instance = v8.v8__FunctionTemplate__InstanceTemplate(template);
 
     const declarations = @typeInfo(JsApi).@"struct".decls;
+    var has_named_index_getter = false;
 
     inline for (declarations) |d| {
         const name: [:0]const u8 = d.name;
@@ -418,7 +500,7 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
         switch (definition) {
             bridge.Accessor => {
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
-                const getter_callback = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.getter).?);
+                const getter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.getter }).?);
                 if (value.setter == null) {
                     if (value.static) {
                         v8.v8__Template__SetAccessorProperty__DEFAULT(@ptrCast(template), js_name, getter_callback);
@@ -429,12 +511,12 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                     if (comptime IS_DEBUG) {
                         std.debug.assert(value.static == false);
                     }
-                    const setter_callback = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.setter.?).?);
+                    const setter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.setter.? }).?);
                     v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT2(target, js_name, getter_callback, setter_callback);
                 }
             },
             bridge.Function => {
-                const function_template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.func).?);
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func, .length = value.arity }).?);
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
                 if (value.static) {
                     v8.v8__Template__Set(@ptrCast(template), js_name, @ptrCast(function_template), v8.None);
@@ -469,9 +551,10 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                     .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
                 };
                 v8.v8__ObjectTemplate__SetNamedHandler(instance, &configuration);
+                has_named_index_getter = true;
             },
             bridge.Iterator => {
-                const function_template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, value.func).?);
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func }).?);
                 const js_name = if (value.async)
                     v8.v8__Symbol__GetAsyncIterator(isolate)
                 else
@@ -479,17 +562,29 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                 v8.v8__Template__Set(@ptrCast(target), js_name, @ptrCast(function_template), v8.None);
             },
             bridge.Property => {
-                // simpleZigValueToJs now returns raw handle directly
-                const js_value = switch (value) {
-                    .int => |v| js.simpleZigValueToJs(.{ .handle = isolate }, v, true, false),
+                const js_value = switch (value.value) {
+                    .null => js.simpleZigValueToJs(.{ .handle = isolate }, null, true, false),
+                    inline .bool, .int, .float, .string => |v| js.simpleZigValueToJs(.{ .handle = isolate }, v, true, false),
                 };
-
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
-                // apply it both to the type itself
-                v8.v8__Template__Set(@ptrCast(template), js_name, js_value, v8.ReadOnly + v8.DontDelete);
 
-                // and to instances of the type
-                v8.v8__Template__Set(@ptrCast(target), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+                if (value.template == false) {
+                    // not defined on the template, only on the instance. This
+                    // is like an Accessor, but because the value is known at
+                    // compile time, we skip _a lot_ of code and quickly return
+                    // the hard-coded value
+                    const getter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{
+                        .callback = bridge.Property.getter,
+                        .data = js_value,
+                        .side_effect_type = v8.kSideEffectType_HasSideEffectToReceiver,
+                    }));
+                    v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT(target, js_name, getter_callback);
+                } else {
+                    // apply it both to the type itself
+                    v8.v8__Template__Set(@ptrCast(template), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+                    // and to instances of the type
+                    v8.v8__Template__Set(@ptrCast(target), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+                }
             },
             bridge.Constructor => {}, // already handled in generateConstructor
             else => {},
@@ -506,6 +601,23 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
         const js_value = v8.v8__String__NewFromUtf8(isolate, JsApi.Meta.name.ptr, v8.kNormal, @intCast(JsApi.Meta.name.len));
         v8.v8__Template__Set(@ptrCast(instance), js_name, js_value, v8.ReadOnly + v8.DontDelete);
     }
+
+    if (comptime IS_DEBUG) {
+        if (!has_named_index_getter) {
+            var configuration: v8.NamedPropertyHandlerConfiguration = .{
+                .getter = bridge.unknownObjectPropertyCallback(JsApi),
+                .setter = null,
+                .query = null,
+                .deleter = null,
+                .enumerator = null,
+                .definer = null,
+                .descriptor = null,
+                .data = null,
+                .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+            };
+            v8.v8__ObjectTemplate__SetNamedHandler(instance, &configuration);
+        }
+    }
 }
 
 fn protoIndexLookup(comptime JsApi: type) ?bridge.JsApiLookup.BackingInt {

src/browser/js/String.zig

@@ -18,36 +18,94 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const SSO = @import("../../string.zig").String;
 
 const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const v8 = js.v8;
 
 const String = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.String,
 
-pub const ToZigOpts = struct {
-    allocator: ?Allocator = null,
-};
-
-pub fn toZig(self: String, opts: ToZigOpts) ![]u8 {
-    return self._toZig(false, opts);
+pub fn toSlice(self: String) ![]u8 {
+    return self._toSlice(false, self.local.call_arena);
 }
-
-pub fn toZigZ(self: String, opts: ToZigOpts) ![:0]u8 {
-    return self._toZig(true, opts);
+pub fn toSliceZ(self: String) ![:0]u8 {
+    return self._toSlice(true, self.local.call_arena);
 }
+pub fn toSliceWithAlloc(self: String, allocator: Allocator) ![]u8 {
+    return self._toSlice(false, allocator);
+}
+fn _toSlice(self: String, comptime null_terminate: bool, allocator: Allocator) !(if (null_terminate) [:0]u8 else []u8) {
+    const local = self.local;
+    const handle = self.handle;
+    const isolate = local.isolate.handle;
 
-fn _toZig(self: String, comptime null_terminate: bool, opts: ToZigOpts) !(if (null_terminate) [:0]u8 else []u8) {
-    const isolate = self.ctx.isolate.handle;
-    const allocator = opts.allocator orelse self.ctx.call_arena;
-    const len: u32 = @intCast(v8.v8__String__Utf8Length(self.handle, isolate));
-    const buf = if (null_terminate) try allocator.allocSentinel(u8, len, 0) else try allocator.alloc(u8, len);
+    const len = v8.v8__String__Utf8Length(handle, isolate);
+    const buf = try (if (comptime null_terminate) allocator.allocSentinel(u8, @intCast(len), 0) else allocator.alloc(u8, @intCast(len)));
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    if (comptime IS_DEBUG) {
+        std.debug.assert(n == len);
+    }
 
-    const options = v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8;
-    const n = v8.v8__String__WriteUtf8(self.handle, isolate, buf.ptr, buf.len, options);
-    std.debug.assert(n == len);
     return buf;
 }
+
+pub fn toSSO(self: String, comptime global: bool) !(if (global) SSO.Global else SSO) {
+    if (comptime global) {
+        return .{ .str = try self.toSSOWithAlloc(self.local.ctx.arena) };
+    }
+    return self.toSSOWithAlloc(self.local.call_arena);
+}
+pub fn toSSOWithAlloc(self: String, allocator: Allocator) !SSO {
+    const handle = self.handle;
+    const isolate = self.local.isolate.handle;
+
+    const len: usize = @intCast(v8.v8__String__Utf8Length(handle, isolate));
+
+    if (len <= 12) {
+        var content: [12]u8 = undefined;
+        const n = v8.v8__String__WriteUtf8(handle, isolate, &content[0], content.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+        if (comptime IS_DEBUG) {
+            std.debug.assert(n == len);
+        }
+        // Weird that we do this _after_, but we have to..I've seen weird issues
+        // in ReleaseMode where v8 won't write to content if it starts off zero
+        // initiated
+        @memset(content[len..], 0);
+        return .{ .len = @intCast(len), .payload = .{ .content = content } };
+    }
+
+    const buf = try allocator.alloc(u8, len);
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    if (comptime IS_DEBUG) {
+        std.debug.assert(n == len);
+    }
+
+    var prefix: [4]u8 = @splat(0);
+    @memcpy(&prefix, buf[0..4]);
+
+    return .{
+        .len = @intCast(len),
+        .payload = .{ .heap = .{
+            .prefix = prefix,
+            .ptr = buf.ptr,
+        } },
+    };
+}
+
+pub fn format(self: String, writer: *std.Io.Writer) !void {
+    const local = self.local;
+    const handle = self.handle;
+    const isolate = local.isolate.handle;
+
+    var small: [1024]u8 = undefined;
+    const len = v8.v8__String__Utf8Length(handle, isolate);
+    var buf = if (len < 1024) &small else local.call_arena.alloc(u8, @intCast(len)) catch return error.WriteFailed;
+
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    return writer.writeAll(buf[0..n]);
+}

src/browser/js/TaggedOpaque.zig

@@ -0,0 +1,129 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+const bridge = js.bridge;
+
+// When we return a Zig object to V8, we put it on the heap and pass it into
+// v8 as an *anyopaque (i.e. void *). When V8 gives us back the value, say, as a
+// function parameter, we know what type it _should_ be.
+//
+// In a simple/perfect world, we could use this knowledge to cast the *anyopaque
+// to the parameter type:
+//   const arg: @typeInfo(@TypeOf(function)).@"fn".params[0] = @ptrCast(v8_data);
+//
+// But there are 2 reasons we can't do that.
+//
+// == Reason 1 ==
+// The JS code might pass the wrong type:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Cat());
+//
+// The zig_setOwner method expects the 2nd parameter to be an *Owner, but
+// the JS code passed a *Cat.
+//
+// To solve this issue, we tag every returned value so that we can check what
+// type it is. In the above case, we'd expect an *Owner, but the tag would tell
+// us that we got a *Cat. We use the type index in our Types lookup as the tag.
+//
+// == Reason 2 ==
+// Because of prototype inheritance, even "correct" code can be a challenge. For
+// example, say the above JavaScript is fixed:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Owner("Leto"));
+//
+// The issue is that setOwner might not expect an *Owner, but rather a
+// *Person, which is the prototype for Owner. Now our Zig code is expecting
+// a *Person, but it was (correctly) given an *Owner.
+// For this reason, we also store the prototype chain.
+const TaggedOpaque = @This();
+
+prototype_len: u16,
+prototype_chain: [*]const PrototypeChainEntry,
+
+// Ptr to the Zig instance. Between the context where it's called (i.e.
+// we have the comptime parameter info for all functions), and the index field
+// we can figure out what type this is.
+value: *anyopaque,
+
+// When we're asked to describe an object via the Inspector, we _must_ include
+// the proper subtype (and description) fields in the returned JSON.
+// V8 will give us a Value and ask us for the subtype. From the js.Value we
+// can get a js.Object, and from the js.Object, we can get out TaggedOpaque
+// which is where we store the subtype.
+subtype: ?bridge.SubType,
+
+pub const PrototypeChainEntry = struct {
+    index: bridge.JsApiLookup.BackingInt,
+    offset: u16, // offset to the _proto field
+};
+
+// Reverses the mapZigInstanceToJs, making sure that our TaggedOpaque
+// contains a ptr to the correct type.
+pub fn fromJS(comptime R: type, js_obj_handle: *const v8.Object) !R {
+    const ti = @typeInfo(R);
+    if (ti != .pointer) {
+        @compileError("non-pointer Zig parameter type: " ++ @typeName(R));
+    }
+
+    const T = ti.pointer.child;
+    const JsApi = bridge.Struct(T).JsApi;
+
+    if (@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        // Empty structs aren't stored as TOAs and there's no data
+        // stored in the JSObject's IntenrnalField. Why bother when
+        // we can just return an empty struct here?
+        return @constCast(@as(*const T, &.{}));
+    }
+
+    const internal_field_count = v8.v8__Object__InternalFieldCount(js_obj_handle);
+    // if it isn't an empty struct, then the v8.Object should have an
+    // InternalFieldCount > 0, since our toa pointer should be embedded
+    // at index 0 of the internal field count.
+    if (internal_field_count == 0) {
+        return error.InvalidArgument;
+    }
+
+    if (!bridge.JsApiLookup.has(JsApi)) {
+        @compileError("unknown Zig type: " ++ @typeName(R));
+    }
+
+    const tao_ptr = v8.v8__Object__GetAlignedPointerFromInternalField(js_obj_handle, 0).?;
+    const tao: *TaggedOpaque = @ptrCast(@alignCast(tao_ptr));
+    const expected_type_index = bridge.JsApiLookup.getId(JsApi);
+
+    const prototype_chain = tao.prototype_chain[0..tao.prototype_len];
+    if (prototype_chain[0].index == expected_type_index) {
+        return @ptrCast(@alignCast(tao.value));
+    }
+
+    // Ok, let's walk up the chain
+    var ptr = @intFromPtr(tao.value);
+    for (prototype_chain[1..]) |proto| {
+        ptr += proto.offset; // the offset to the _proto field
+        const proto_ptr: **anyopaque = @ptrFromInt(ptr);
+        if (proto.index == expected_type_index) {
+            return @ptrCast(@alignCast(proto_ptr.*));
+        }
+        ptr = @intFromPtr(proto_ptr.*);
+    }
+    return error.InvalidArgument;
+}

src/browser/js/TryCatch.zig

@@ -20,47 +20,77 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
 const Allocator = std.mem.Allocator;
 
 const TryCatch = @This();
 
-ctx: *js.Context,
 handle: v8.TryCatch,
+local: *const js.Local,
 
-pub fn init(self: *TryCatch, ctx: *js.Context) void {
-    self.ctx = ctx;
-    v8.v8__TryCatch__CONSTRUCT(&self.handle, ctx.isolate.handle);
+pub fn init(self: *TryCatch, l: *const js.Local) void {
+    self.local = l;
+    v8.v8__TryCatch__CONSTRUCT(&self.handle, l.isolate.handle);
 }
 
 pub fn hasCaught(self: TryCatch) bool {
     return v8.v8__TryCatch__HasCaught(&self.handle);
 }
 
+pub fn rethrow(self: *TryCatch) void {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.hasCaught());
+    }
+    _ = v8.v8__TryCatch__ReThrow(&self.handle);
+}
+
 pub fn caught(self: TryCatch, allocator: Allocator) ?Caught {
-    if (!self.hasCaught()) {
+    if (self.hasCaught() == false) {
         return null;
     }
 
-    const ctx = self.ctx;
-
-    var hs: js.HandleScope = undefined;
-    hs.init(ctx.isolate);
-    defer hs.deinit();
-
+    const l = self.local;
     const line: ?u32 = blk: {
         const handle = v8.v8__TryCatch__Message(&self.handle) orelse return null;
-        const l = v8.v8__Message__GetLineNumber(handle, ctx.handle);
-        break :blk if (l < 0) null else @intCast(l);
+        const line = v8.v8__Message__GetLineNumber(handle, l.handle);
+        break :blk if (line < 0) null else @intCast(line);
     };
 
     const exception: ?[]const u8 = blk: {
         const handle = v8.v8__TryCatch__Exception(&self.handle) orelse break :blk null;
-        break :blk ctx.valueToString(.{ .ctx = ctx, .handle = handle }, .{ .allocator = allocator }) catch |err| @errorName(err);
+        var js_val = js.Value{ .local = l, .handle = handle };
+
+        // If it's an Error object, try to get the message property
+        if (js_val.isObject()) {
+            const js_obj = js_val.toObject();
+            if (js_obj.has("message")) {
+                js_val = js_obj.get("message") catch break :blk null;
+            }
+        }
+
+        if (js_val.isString()) |js_str| {
+            break :blk js_str.toSliceWithAlloc(allocator) catch |err| @errorName(err);
+        }
+        break :blk null;
     };
 
     const stack: ?[]const u8 = blk: {
-        const handle = v8.v8__TryCatch__StackTrace(&self.handle, ctx.handle) orelse break :blk null;
-        break :blk ctx.valueToString(.{ .ctx = ctx, .handle = handle }, .{ .allocator = allocator }) catch |err| @errorName(err);
+        const handle = v8.v8__TryCatch__StackTrace(&self.handle, l.handle) orelse break :blk null;
+        var js_val = js.Value{ .local = l, .handle = handle };
+
+        // If it's an Error object, try to get the stack property
+        if (js_val.isObject()) {
+            const js_obj = js_val.toObject();
+            if (js_obj.has("stack")) {
+                js_val = js_obj.get("stack") catch break :blk null;
+            }
+        }
+
+        if (js_val.isString()) |js_str| {
+            break :blk js_str.toSliceWithAlloc(allocator) catch |err| @errorName(err);
+        }
+        break :blk null;
     };
 
     return .{
@@ -85,10 +115,10 @@ pub fn deinit(self: *TryCatch) void {
 }
 
 pub const Caught = struct {
-    line: ?u32,
-    caught: bool,
-    stack: ?[]const u8,
-    exception: ?[]const u8,
+    line: ?u32 = null,
+    caught: bool = false,
+    stack: ?[]const u8 = null,
+    exception: ?[]const u8 = null,
 
     pub fn format(self: Caught, writer: *std.Io.Writer) !void {
         const separator = @import("../../log.zig").separator();

src/browser/js/Value.zig

@@ -18,6 +18,7 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const SSO = @import("../../string.zig").String;
 
 const v8 = js.v8;
 
@@ -27,15 +28,19 @@ const Allocator = std.mem.Allocator;
 
 const Value = @This();
 
-ctx: *js.Context,
+local: *const js.Local,
 handle: *const v8.Value,
 
 pub fn isObject(self: Value) bool {
     return v8.v8__Value__IsObject(self.handle);
 }
 
-pub fn isString(self: Value) bool {
-    return v8.v8__Value__IsString(self.handle);
+pub fn isString(self: Value) ?js.String {
+    const handle = self.handle;
+    if (!v8.v8__Value__IsString(handle)) {
+        return null;
+    }
+    return .{ .local = self.local, .handle = @ptrCast(handle) };
 }
 
 pub fn isArray(self: Value) bool {
@@ -155,12 +160,12 @@ pub fn isPromise(self: Value) bool {
 }
 
 pub fn toBool(self: Value) bool {
-    return v8.v8__Value__BooleanValue(self.handle, self.ctx.isolate.handle);
+    return v8.v8__Value__BooleanValue(self.handle, self.local.isolate.handle);
 }
 
 pub fn typeOf(self: Value) js.String {
-    const str_handle = v8.v8__Value__TypeOf(self.handle, self.ctx.isolate.handle).?;
-    return js.String{ .ctx = self.ctx, .handle = str_handle };
+    const str_handle = v8.v8__Value__TypeOf(self.handle, self.local.isolate.handle).?;
+    return js.String{ .local = self.local, .handle = str_handle };
 }
 
 pub fn toF32(self: Value) !f32 {
@@ -169,7 +174,7 @@ pub fn toF32(self: Value) !f32 {
 
 pub fn toF64(self: Value) !f64 {
     var maybe: v8.MaybeF64 = undefined;
-    v8.v8__Value__NumberValue(self.handle, self.ctx.handle, &maybe);
+    v8.v8__Value__NumberValue(self.handle, self.local.handle, &maybe);
     if (!maybe.has_value) {
         return error.JsException;
     }
@@ -178,7 +183,7 @@ pub fn toF64(self: Value) !f64 {
 
 pub fn toI32(self: Value) !i32 {
     var maybe: v8.MaybeI32 = undefined;
-    v8.v8__Value__Int32Value(self.handle, self.ctx.handle, &maybe);
+    v8.v8__Value__Int32Value(self.handle, self.local.handle, &maybe);
     if (!maybe.has_value) {
         return error.JsException;
     }
@@ -187,7 +192,7 @@ pub fn toI32(self: Value) !i32 {
 
 pub fn toU32(self: Value) !u32 {
     var maybe: v8.MaybeU32 = undefined;
-    v8.v8__Value__Uint32Value(self.handle, self.ctx.handle, &maybe);
+    v8.v8__Value__Uint32Value(self.handle, self.local.handle, &maybe);
     if (!maybe.has_value) {
         return error.JsException;
     }
@@ -199,66 +204,70 @@ pub fn toPromise(self: Value) js.Promise {
         std.debug.assert(self.isPromise());
     }
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
 
-pub fn toString(self: Value, opts: js.String.ToZigOpts) ![]u8 {
-    return self._toString(false, opts);
+pub fn toString(self: Value) !js.String {
+    const l = self.local;
+    const value_handle: *const v8.Value = blk: {
+        if (self.isSymbol()) {
+            break :blk @ptrCast(v8.v8__Symbol__Description(@ptrCast(self.handle), l.isolate.handle).?);
+        }
+        break :blk self.handle;
+    };
+
+    const str_handle = v8.v8__Value__ToString(value_handle, l.handle) orelse return error.JsException;
+    return .{ .local = self.local, .handle = str_handle };
 }
-pub fn toStringZ(self: Value, opts: js.String.ToZigOpts) ![:0]u8 {
-    return self._toString(true, opts);
+
+pub fn toSSO(self: Value, comptime global: bool) !(if (global) SSO.Global else SSO) {
+    return (try self.toString()).toSSO(global);
+}
+pub fn toSSOWithAlloc(self: Value, allocator: Allocator) !SSO {
+    return (try self.toString()).toSSOWithAlloc(allocator);
+}
+
+pub fn toStringSlice(self: Value) ![]u8 {
+    return (try self.toString()).toSlice();
+}
+pub fn toStringSliceZ(self: Value) ![:0]u8 {
+    return (try self.toString()).toSliceZ();
+}
+pub fn toStringSliceWithAlloc(self: Value, allocator: Allocator) ![]u8 {
+    return (try self.toString()).toSliceWithAlloc(allocator);
 }
 
 pub fn toJson(self: Value, allocator: Allocator) ![]u8 {
-    const json_str_handle = v8.v8__JSON__Stringify(self.ctx.handle, self.handle, null) orelse return error.JsException;
-    return self.ctx.jsStringToZig(json_str_handle, .{ .allocator = allocator });
-}
-
-fn _toString(self: Value, comptime null_terminate: bool, opts: js.String.ToZigOpts) !(if (null_terminate) [:0]u8 else []u8) {
-    const ctx = self.ctx;
-
-    if (self.isSymbol()) {
-        const sym_handle = v8.v8__Symbol__Description(@ptrCast(self.handle), ctx.isolate.handle).?;
-        return _toString(.{ .handle = @ptrCast(sym_handle), .ctx = ctx }, null_terminate, opts);
-    }
-
-    const str_handle = v8.v8__Value__ToString(self.handle, ctx.handle) orelse {
-        return error.JsException;
-    };
-
-    const str = js.String{ .ctx = ctx, .handle = str_handle };
-    if (comptime null_terminate) {
-        return js.String.toZigZ(str, opts);
-    }
-    return js.String.toZig(str, opts);
-}
-
-pub fn fromJson(ctx: *js.Context, json: []const u8) !Value {
-    const v8_isolate = v8.Isolate{ .handle = ctx.isolate.handle };
-    const json_string = v8.String.initUtf8(v8_isolate, json);
-    const v8_context = v8.Context{ .handle = ctx.handle };
-    const value = try v8.Json.parse(v8_context, json_string);
-    return .{ .ctx = ctx, .handle = value.handle };
+    const local = self.local;
+    const str_handle = v8.v8__JSON__Stringify(local.handle, self.handle, null) orelse return error.JsException;
+    return js.String.toSliceWithAlloc(.{ .local = local, .handle = str_handle }, allocator);
 }
 
 pub fn persist(self: Value) !Global {
-    var ctx = self.ctx;
+    return self._persist(true);
+}
+
+pub fn temp(self: Value) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Value, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
 
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
-
-    try ctx.global_values.append(ctx.arena, global);
-
-    return .{
-        .handle = global,
-        .ctx = ctx,
-    };
+    if (comptime is_global) {
+        try ctx.global_values.append(ctx.arena, global);
+    } else {
+        try ctx.global_values_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
 }
 
 pub fn toZig(self: Value, comptime T: type) !T {
-    return self.ctx.jsValueToZig(T, self);
+    return self.local.jsValueToZig(T, self);
 }
 
 pub fn toObject(self: Value) js.Object {
@@ -267,7 +276,7 @@ pub fn toObject(self: Value) js.Object {
     }
 
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
@@ -278,7 +287,7 @@ pub fn toArray(self: Value) js.Array {
     }
 
     return .{
-        .ctx = self.ctx,
+        .local = self.local,
         .handle = @ptrCast(self.handle),
     };
 }
@@ -295,28 +304,37 @@ pub fn toBigInt(self: Value) js.BigInt {
 
 pub fn format(self: Value, writer: *std.Io.Writer) !void {
     if (comptime IS_DEBUG) {
-        return self.ctx.debugValue(self, writer);
+        return self.local.debugValue(self, writer);
     }
-    const str = self.toString(.{}) catch return error.WriteFailed;
-    return writer.writeAll(str);
+    const js_str = self.toString() catch return error.WriteFailed;
+    return js_str.format(writer);
 }
 
-pub const Global = struct {
-    handle: v8.Global,
-    ctx: *js.Context,
+pub const Temp = G(0);
+pub const Global = G(1);
 
-    pub fn deinit(self: *Global) void {
-        v8.v8__Global__Reset(&self.handle);
-    }
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
 
-    pub fn local(self: *const Global) Value {
-        return .{
-            .ctx = self.ctx,
-            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, self.ctx.isolate.handle)),
-        };
-    }
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
 
-    pub fn isEqual(self: *const Global, other: Value) bool {
-        return v8.v8__Global__IsEqual(&self.handle, other.handle);
-    }
-};
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Value {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Value) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
+}

src/browser/js/js.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -19,19 +19,19 @@
 const std = @import("std");
 pub const v8 = @import("v8").c;
 
-const log = @import("../../log.zig");
+const string = @import("../../string.zig");
 
 pub const Env = @import("Env.zig");
 pub const bridge = @import("bridge.zig");
-pub const ExecutionWorld = @import("ExecutionWorld.zig");
+pub const Caller = @import("Caller.zig");
 pub const Context = @import("Context.zig");
+pub const Local = @import("Local.zig");
 pub const Inspector = @import("Inspector.zig");
 pub const Snapshot = @import("Snapshot.zig");
 pub const Platform = @import("Platform.zig");
 pub const Isolate = @import("Isolate.zig");
 pub const HandleScope = @import("HandleScope.zig");
 
-pub const Name = @import("Name.zig");
 pub const Value = @import("Value.zig");
 pub const Array = @import("Array.zig");
 pub const String = @import("String.zig");
@@ -43,8 +43,8 @@ pub const Module = @import("Module.zig");
 pub const BigInt = @import("BigInt.zig");
 pub const Number = @import("Number.zig");
 pub const Integer = @import("Integer.zig");
-pub const Global = @import("global.zig").Global;
 pub const PromiseResolver = @import("PromiseResolver.zig");
+pub const PromiseRejection = @import("PromiseRejection.zig");
 
 const Allocator = std.mem.Allocator;
 
@@ -77,13 +77,100 @@ pub const ArrayBuffer = struct {
     }
 };
 
-pub const Exception = struct {
-    ctx: *const Context,
-    handle: *const v8.Value,
+pub const ArrayType = enum(u8) {
+    int8,
+    uint8,
+    uint8_clamped,
+    int16,
+    uint16,
+    int32,
+    uint32,
+    float16,
+    float32,
+    float64,
+};
 
-    pub fn exception(self: Exception, allocator: Allocator) ![]const u8 {
-        return self.context.valueToString(self.inner, .{ .allocator = allocator });
-    }
+pub fn ArrayBufferRef(comptime kind: ArrayType) type {
+    return struct {
+        const Self = @This();
+
+        const BackingInt = switch (kind) {
+            .int8 => i8,
+            .uint8, .uint8_clamped => u8,
+            .int16 => i16,
+            .uint16 => u16,
+            .int32 => i32,
+            .uint32 => u32,
+            .float16 => f16,
+            .float32 => f32,
+            .float64 => f64,
+        };
+
+        local: *const Local,
+        handle: *const v8.Value,
+
+        /// Persisted typed array.
+        pub const Global = struct {
+            handle: v8.Global,
+
+            pub fn deinit(self: *Global) void {
+                v8.v8__Global__Reset(&self.handle);
+            }
+
+            pub fn local(self: *const Global, l: *const Local) Self {
+                return .{ .local = l, .handle = v8.v8__Global__Get(&self.handle, l.isolate.handle).? };
+            }
+        };
+
+        pub fn init(local: *const Local, size: usize) Self {
+            const ctx = local.ctx;
+            const isolate = ctx.isolate;
+            const bits = switch (@typeInfo(BackingInt)) {
+                .int => |n| n.bits,
+                .float => |f| f.bits,
+                else => unreachable,
+            };
+
+            var array_buffer: *const v8.ArrayBuffer = undefined;
+            if (size == 0) {
+                array_buffer = v8.v8__ArrayBuffer__New(isolate.handle, 0).?;
+            } else {
+                const buffer_len = size * bits / 8;
+                const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, buffer_len).?;
+                const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                array_buffer = v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?;
+            }
+
+            const handle: *const v8.Value = switch (comptime kind) {
+                .int8 => @ptrCast(v8.v8__Int8Array__New(array_buffer, 0, size).?),
+                .uint8 => @ptrCast(v8.v8__Uint8Array__New(array_buffer, 0, size).?),
+                .uint8_clamped => @ptrCast(v8.v8__Uint8ClampedArray__New(array_buffer, 0, size).?),
+                .int16 => @ptrCast(v8.v8__Int16Array__New(array_buffer, 0, size).?),
+                .uint16 => @ptrCast(v8.v8__Uint16Array__New(array_buffer, 0, size).?),
+                .int32 => @ptrCast(v8.v8__Int32Array__New(array_buffer, 0, size).?),
+                .uint32 => @ptrCast(v8.v8__Uint32Array__New(array_buffer, 0, size).?),
+                .float16 => @ptrCast(v8.v8__Float16Array__New(array_buffer, 0, size).?),
+                .float32 => @ptrCast(v8.v8__Float32Array__New(array_buffer, 0, size).?),
+                .float64 => @ptrCast(v8.v8__Float64Array__New(array_buffer, 0, size).?),
+            };
+
+            return .{ .local = local, .handle = handle };
+        }
+
+        pub fn persist(self: *const Self) !Global {
+            var ctx = self.local.ctx;
+            var global: v8.Global = undefined;
+            v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+            try ctx.global_values.append(ctx.arena, global);
+
+            return .{ .handle = global };
+        }
+    };
+}
+
+pub const Exception = struct {
+    local: *const Local,
+    handle: *const v8.Value,
 };
 
 // These are simple types that we can convert to JS with only an isolate. This
@@ -133,12 +220,15 @@ pub fn simpleZigValueToJs(isolate: Isolate, value: anytype, comptime fail: bool,
         },
         .@"struct" => {
             switch (@TypeOf(value)) {
+                string.String => return isolate.initStringHandle(value.str()),
                 ArrayBuffer => {
                     const values = value.values;
                     const len = values.len;
                     const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, len);
-                    const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
-                    @memcpy(data[0..len], @as([]const u8, @ptrCast(values))[0..len]);
+                    if (len > 0) {
+                        const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
+                        @memcpy(data[0..len], @as([]const u8, @ptrCast(values))[0..len]);
+                    }
                     const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
                     return @ptrCast(v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?);
                 },
@@ -215,61 +305,6 @@ pub fn simpleZigValueToJs(isolate: Isolate, value: anytype, comptime fail: bool,
     }
     return null;
 }
-// When we return a Zig object to V8, we put it on the heap and pass it into
-// v8 as an *anyopaque (i.e. void *). When V8 gives us back the value, say, as a
-// function parameter, we know what type it _should_ be.
-//
-// In a simple/perfect world, we could use this knowledge to cast the *anyopaque
-// to the parameter type:
-//   const arg: @typeInfo(@TypeOf(function)).@"fn".params[0] = @ptrCast(v8_data);
-//
-// But there are 2 reasons we can't do that.
-//
-// == Reason 1 ==
-// The JS code might pass the wrong type:
-//
-//   var cat = new Cat();
-//   cat.setOwner(new Cat());
-//
-// The zig_setOwner method expects the 2nd parameter to be an *Owner, but
-// the JS code passed a *Cat.
-//
-// To solve this issue, we tag every returned value so that we can check what
-// type it is. In the above case, we'd expect an *Owner, but the tag would tell
-// us that we got a *Cat. We use the type index in our Types lookup as the tag.
-//
-// == Reason 2 ==
-// Because of prototype inheritance, even "correct" code can be a challenge. For
-// example, say the above JavaScript is fixed:
-//
-//   var cat = new Cat();
-//   cat.setOwner(new Owner("Leto"));
-//
-// The issue is that setOwner might not expect an *Owner, but rather a
-// *Person, which is the prototype for Owner. Now our Zig code is expecting
-// a *Person, but it was (correctly) given an *Owner.
-// For this reason, we also store the prototype chain.
-pub const TaggedAnyOpaque = struct {
-    prototype_len: u16,
-    prototype_chain: [*]const PrototypeChainEntry,
-
-    // Ptr to the Zig instance. Between the context where it's called (i.e.
-    // we have the comptime parameter info for all functions), and the index field
-    // we can figure out what type this is.
-    value: *anyopaque,
-
-    // When we're asked to describe an object via the Inspector, we _must_ include
-    // the proper subtype (and description) fields in the returned JSON.
-    // V8 will give us a Value and ask us for the subtype. From the js.Value we
-    // can get a js.Object, and from the js.Object, we can get out TaggedAnyOpaque
-    // which is where we store the subtype.
-    subtype: ?bridge.SubType,
-};
-
-pub const PrototypeChainEntry = struct {
-    index: bridge.JsApiLookup.BackingInt,
-    offset: u16, // offset to the _proto field
-};
 
 // These are here, and not in Inspector.zig, because Inspector.zig isn't always
 // included (e.g. in the wpt build).
@@ -281,7 +316,7 @@ pub export fn v8_inspector__Client__IMPL__valueSubtype(
     _: *v8.InspectorClientImpl,
     c_value: *const v8.Value,
 ) callconv(.c) [*c]const u8 {
-    const external_entry = Inspector.getTaggedAnyOpaque(c_value) orelse return null;
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
     return if (external_entry.subtype) |st| @tagName(st) else null;
 }
 
@@ -298,11 +333,11 @@ pub export fn v8_inspector__Client__IMPL__descriptionForValueSubtype(
 
     // We _must_ include a non-null description in order for the subtype value
     // to be included. Besides that, I don't know if the value has any meaning
-    const external_entry = Inspector.getTaggedAnyOpaque(c_value) orelse return null;
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
     return if (external_entry.subtype == null) null else "";
 }
 
 test "TaggedAnyOpaque" {
     // If we grow this, fine, but it should be a conscious decision
-    try std.testing.expectEqual(24, @sizeOf(TaggedAnyOpaque));
+    try std.testing.expectEqual(24, @sizeOf(@import("TaggedOpaque.zig")));
 }

src/browser/markdown.zig

@@ -0,0 +1,506 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Page = @import("Page.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+
+pub const Opts = struct {
+    // Options for future customization (e.g., dialect)
+};
+
+const State = struct {
+    const ListType = enum { ordered, unordered };
+    const ListState = struct {
+        type: ListType,
+        index: usize,
+    };
+
+    list_depth: usize = 0,
+    list_stack: [32]ListState = undefined,
+    in_pre: bool = false,
+    pre_node: ?*Node = null,
+    in_code: bool = false,
+    in_table: bool = false,
+    table_row_index: usize = 0,
+    table_col_count: usize = 0,
+    last_char_was_newline: bool = true,
+};
+
+fn isBlock(tag: Element.Tag) bool {
+    return switch (tag) {
+        .p, .div, .section, .article, .header, .footer, .nav, .aside, .h1, .h2, .h3, .h4, .h5, .h6, .ul, .ol, .blockquote, .pre, .table, .hr => true,
+        else => false,
+    };
+}
+
+fn shouldAddSpacing(tag: Element.Tag) bool {
+    return switch (tag) {
+        .p, .h1, .h2, .h3, .h4, .h5, .h6, .blockquote, .pre, .table => true,
+        else => false,
+    };
+}
+
+fn ensureNewline(state: *State, writer: *std.Io.Writer) !void {
+    if (!state.last_char_was_newline) {
+        try writer.writeByte('\n');
+        state.last_char_was_newline = true;
+    }
+}
+
+pub fn dump(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
+    _ = opts;
+    var state = State{};
+    try render(node, &state, writer, page);
+    if (!state.last_char_was_newline) {
+        try writer.writeByte('\n');
+    }
+}
+
+fn render(node: *Node, state: *State, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
+    switch (node._type) {
+        .document, .document_fragment => {
+            try renderChildren(node, state, writer, page);
+        },
+        .element => |el| {
+            try renderElement(el, state, writer, page);
+        },
+        .cdata => |cd| {
+            if (node.is(Node.CData.Text)) |_| {
+                var text = cd.getData();
+                if (state.in_pre) {
+                    if (state.pre_node) |pre| {
+                        if (node.parentNode() == pre and node.nextSibling() == null) {
+                            text = std.mem.trimRight(u8, text, " \t\r\n");
+                        }
+                    }
+                }
+                try renderText(text, state, writer);
+            }
+        },
+        else => {}, // Ignore other node types
+    }
+}
+
+fn renderChildren(parent: *Node, state: *State, writer: *std.Io.Writer, page: *Page) !void {
+    var it = parent.childrenIterator();
+    while (it.next()) |child| {
+        try render(child, state, writer, page);
+    }
+}
+
+fn renderElement(el: *Element, state: *State, writer: *std.Io.Writer, page: *Page) !void {
+    const tag = el.getTag();
+
+    // Skip hidden/metadata elements
+    switch (tag) {
+        .script, .style, .noscript, .template, .head, .meta, .link, .title, .svg => return,
+        else => {},
+    }
+
+    // --- Opening Tag Logic ---
+
+    // Ensure block elements start on a new line (double newline for paragraphs etc)
+    if (isBlock(tag)) {
+        if (!state.in_table) {
+            try ensureNewline(state, writer);
+            if (shouldAddSpacing(tag)) {
+                // Add an extra newline for spacing between blocks
+                try writer.writeByte('\n');
+            }
+        }
+    } else if (tag == .li or tag == .tr) {
+        try ensureNewline(state, writer);
+    }
+
+    // Prefixes
+    switch (tag) {
+        .h1 => try writer.writeAll("# "),
+        .h2 => try writer.writeAll("## "),
+        .h3 => try writer.writeAll("### "),
+        .h4 => try writer.writeAll("#### "),
+        .h5 => try writer.writeAll("##### "),
+        .h6 => try writer.writeAll("###### "),
+        .ul => {
+            if (state.list_depth < state.list_stack.len) {
+                state.list_stack[state.list_depth] = .{ .type = .unordered, .index = 0 };
+                state.list_depth += 1;
+            }
+        },
+        .ol => {
+            if (state.list_depth < state.list_stack.len) {
+                state.list_stack[state.list_depth] = .{ .type = .ordered, .index = 1 };
+                state.list_depth += 1;
+            }
+        },
+        .li => {
+            const indent = if (state.list_depth > 0) state.list_depth - 1 else 0;
+            for (0..indent) |_| try writer.writeAll("  ");
+
+            if (state.list_depth > 0) {
+                const current_list = &state.list_stack[state.list_depth - 1];
+                if (current_list.type == .ordered) {
+                    try writer.print("{d}. ", .{current_list.index});
+                    current_list.index += 1;
+                } else {
+                    try writer.writeAll("- ");
+                }
+            } else {
+                try writer.writeAll("- ");
+            }
+            state.last_char_was_newline = false;
+        },
+        .table => {
+            state.in_table = true;
+            state.table_row_index = 0;
+            state.table_col_count = 0;
+        },
+        .tr => {
+            state.table_col_count = 0;
+            try writer.writeByte('|');
+        },
+        .td, .th => {
+            // Note: leading pipe handled by previous cell closing or tr opening
+            state.last_char_was_newline = false;
+            try writer.writeByte(' ');
+        },
+        .blockquote => {
+            try writer.writeAll("> ");
+            state.last_char_was_newline = false;
+        },
+        .pre => {
+            try writer.writeAll("```\n");
+            state.in_pre = true;
+            state.pre_node = el.asNode();
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (!state.in_pre) {
+                try writer.writeByte('`');
+                state.in_code = true;
+                state.last_char_was_newline = false;
+            }
+        },
+        .b, .strong => {
+            try writer.writeAll("**");
+            state.last_char_was_newline = false;
+        },
+        .i, .em => {
+            try writer.writeAll("*");
+            state.last_char_was_newline = false;
+        },
+        .s, .del => {
+            try writer.writeAll("~~");
+            state.last_char_was_newline = false;
+        },
+        .hr => {
+            try writer.writeAll("---\n");
+            state.last_char_was_newline = true;
+            return; // Void element
+        },
+        .br => {
+            if (state.in_table) {
+                try writer.writeByte(' ');
+            } else {
+                try writer.writeByte('\n');
+                state.last_char_was_newline = true;
+            }
+            return; // Void element
+        },
+        .img => {
+            try writer.writeAll("![");
+            if (el.getAttributeSafe(comptime .wrap("alt"))) |alt| {
+                try escapeMarkdown(writer, alt);
+            }
+            try writer.writeAll("](");
+            if (el.getAttributeSafe(comptime .wrap("src"))) |src| {
+                try writer.writeAll(src);
+            }
+            try writer.writeAll(")");
+            state.last_char_was_newline = false;
+            return; // Treat as void
+        },
+        .anchor => {
+            try writer.writeByte('[');
+            try renderChildren(el.asNode(), state, writer, page);
+            try writer.writeAll("](");
+            if (el.getAttributeSafe(comptime .wrap("href"))) |href| {
+                try writer.writeAll(href);
+            }
+            try writer.writeByte(')');
+            state.last_char_was_newline = false;
+            return;
+        },
+        .input => {
+            if (el.getAttributeSafe(comptime .wrap("type"))) |type_attr| {
+                if (std.ascii.eqlIgnoreCase(type_attr, "checkbox")) {
+                    if (el.getAttributeSafe(comptime .wrap("checked"))) |_| {
+                        try writer.writeAll("[x] ");
+                    } else {
+                        try writer.writeAll("[ ] ");
+                    }
+                    state.last_char_was_newline = false;
+                }
+            }
+            return;
+        },
+        else => {},
+    }
+
+    // --- Render Children ---
+    try renderChildren(el.asNode(), state, writer, page);
+
+    // --- Closing Tag Logic ---
+
+    // Suffixes
+    switch (tag) {
+        .pre => {
+            if (!state.last_char_was_newline) {
+                try writer.writeByte('\n');
+            }
+            try writer.writeAll("```\n");
+            state.in_pre = false;
+            state.pre_node = null;
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (!state.in_pre) {
+                try writer.writeByte('`');
+                state.in_code = false;
+                state.last_char_was_newline = false;
+            }
+        },
+        .b, .strong => {
+            try writer.writeAll("**");
+            state.last_char_was_newline = false;
+        },
+        .i, .em => {
+            try writer.writeAll("*");
+            state.last_char_was_newline = false;
+        },
+        .s, .del => {
+            try writer.writeAll("~~");
+            state.last_char_was_newline = false;
+        },
+        .blockquote => {},
+        .ul, .ol => {
+            if (state.list_depth > 0) state.list_depth -= 1;
+        },
+        .table => {
+            state.in_table = false;
+        },
+        .tr => {
+            try writer.writeByte('\n');
+            if (state.table_row_index == 0) {
+                try writer.writeByte('|');
+                var i: usize = 0;
+                while (i < state.table_col_count) : (i += 1) {
+                    try writer.writeAll("---|");
+                }
+                try writer.writeByte('\n');
+            }
+            state.table_row_index += 1;
+            state.last_char_was_newline = true;
+        },
+        .td, .th => {
+            try writer.writeAll(" |");
+            state.table_col_count += 1;
+            state.last_char_was_newline = false;
+        },
+        else => {},
+    }
+
+    // Post-block newlines
+    if (isBlock(tag)) {
+        if (!state.in_table) {
+            try ensureNewline(state, writer);
+        }
+    }
+}
+
+fn renderText(text: []const u8, state: *State, writer: *std.Io.Writer) !void {
+    if (text.len == 0) return;
+
+    if (state.in_pre) {
+        try writer.writeAll(text);
+        if (text.len > 0 and text[text.len - 1] == '\n') {
+            state.last_char_was_newline = true;
+        } else {
+            state.last_char_was_newline = false;
+        }
+        return;
+    }
+
+    // Check for pure whitespace
+    const is_all_whitespace = for (text) |c| {
+        if (!std.ascii.isWhitespace(c)) break false;
+    } else true;
+
+    if (is_all_whitespace) {
+        if (!state.last_char_was_newline) {
+            try writer.writeByte(' ');
+        }
+        return;
+    }
+
+    // Collapse whitespace
+    var it = std.mem.tokenizeAny(u8, text, " \t\n\r");
+    var first = true;
+    while (it.next()) |word| {
+        if (first) {
+            if (!state.last_char_was_newline) {
+                if (text.len > 0 and std.ascii.isWhitespace(text[0])) {
+                    try writer.writeByte(' ');
+                }
+            }
+        } else {
+            try writer.writeByte(' ');
+        }
+
+        try escapeMarkdown(writer, word);
+        state.last_char_was_newline = false;
+        first = false;
+    }
+
+    // Handle trailing whitespace from the original text
+    if (!first and !state.last_char_was_newline) {
+        if (text.len > 0 and std.ascii.isWhitespace(text[text.len - 1])) {
+            try writer.writeByte(' ');
+        }
+    }
+}
+
+fn escapeMarkdown(writer: *std.Io.Writer, text: []const u8) !void {
+    for (text) |c| {
+        switch (c) {
+            '\\', '`', '*', '_', '{', '}', '[', ']', '(', ')', '#', '+', '-', '!', '|' => {
+                try writer.writeByte('\\');
+                try writer.writeByte(c);
+            },
+            else => try writer.writeByte(c),
+        }
+    }
+}
+
+fn testMarkdownHTML(html: []const u8, expected: []const u8) !void {
+    const testing = @import("../testing.zig");
+    const page = try testing.test_session.createPage();
+    defer testing.test_session.removePage();
+    const doc = page.window._document;
+
+    const div = try doc.createElement("div", null, page);
+    try page.parseHtmlAsChildren(div.asNode(), html);
+
+    var aw: std.Io.Writer.Allocating = .init(testing.allocator);
+    defer aw.deinit();
+    try dump(div.asNode(), .{}, &aw.writer, page);
+
+    try testing.expectString(expected, aw.written());
+}
+
+test "markdown: basic" {
+    try testMarkdownHTML("Hello world", "Hello world\n");
+}
+
+test "markdown: whitespace" {
+    try testMarkdownHTML("<span>A</span> <span>B</span>", "A B\n");
+}
+
+test "markdown: escaping" {
+    try testMarkdownHTML("<p># Not a header</p>", "\n\\# Not a header\n");
+}
+
+test "markdown: strikethrough" {
+    try testMarkdownHTML("<s>deleted</s>", "~~deleted~~\n");
+}
+
+test "markdown: task list" {
+    try testMarkdownHTML(
+        \\<input type="checkbox" checked><input type="checkbox">
+    , "[x] [ ] \n");
+}
+
+test "markdown: ordered list" {
+    try testMarkdownHTML(
+        \\<ol><li>First</li><li>Second</li></ol>
+    , "1. First\n2. Second\n");
+}
+
+test "markdown: table" {
+    try testMarkdownHTML(
+        \\<table><thead><tr><th>Head 1</th><th>Head 2</th></tr></thead>
+        \\<tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table>
+    ,
+        \\
+        \\| Head 1 | Head 2 |
+        \\|---|---|
+        \\| Cell 1 | Cell 2 |
+        \\
+    );
+}
+
+test "markdown: nested lists" {
+    try testMarkdownHTML(
+        \\<ul><li>Parent<ul><li>Child</li></ul></li></ul>
+    ,
+        \\- Parent
+        \\  - Child
+        \\
+    );
+}
+
+test "markdown: blockquote" {
+    try testMarkdownHTML("<blockquote>Hello world</blockquote>", "\n> Hello world\n");
+}
+
+test "markdown: links" {
+    try testMarkdownHTML("<a href=\"https://lightpanda.io\">Lightpanda</a>", "[Lightpanda](https://lightpanda.io)\n");
+}
+
+test "markdown: images" {
+    try testMarkdownHTML("<img src=\"logo.png\" alt=\"Logo\">", "![Logo](logo.png)\n");
+}
+
+test "markdown: headings" {
+    try testMarkdownHTML("<h1>Title</h1><h2>Subtitle</h2>",
+        \\
+        \\# Title
+        \\
+        \\## Subtitle
+        \\
+    );
+}
+
+test "markdown: code" {
+    try testMarkdownHTML(
+        \\<p>Use git push</p>
+        \\<pre><code>line 1
+        \\line 2</code></pre>
+    ,
+        \\
+        \\Use git push
+        \\
+        \\```
+        \\line 1
+        \\line 2
+        \\```
+        \\
+    );
+}

src/browser/parser/Parser.zig

@@ -24,6 +24,7 @@ const Page = @import("../Page.zig");
 const Node = @import("../webapi/Node.zig");
 const Element = @import("../webapi/Element.zig");
 const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 pub const ParsedNode = struct {
     node: *Node,
@@ -373,6 +374,17 @@ fn _appendCallback(self: *Parser, parent: *Node, node_or_text: h5e.NodeOrText) !
     switch (node_or_text.toUnion()) {
         .node => |cpn| {
             const child = getNode(cpn);
+            if (child._parent) |previous_parent| {
+                // html5ever says this can't happen, but we might be screwing up
+                // the node on our side. We shouldn't be, but we're seeing this
+                // in the wild, and I'm not sure why. In debug, let's crash so
+                // we can try to figure it out. In release, let's disconnect
+                // the child first.
+                if (comptime IS_DEBUG) {
+                    unreachable;
+                }
+                self.page.removeNode(previous_parent, child, .{ .will_be_reconnected = parent.isConnected() });
+            }
             try self.page.appendNew(parent, .{ .node = child });
         },
         .text => |txt| try self.page.appendNew(parent, .{ .text = txt }),
@@ -409,7 +421,16 @@ fn appendBeforeSiblingCallback(ctx: *anyopaque, sibling_ref: *anyopaque, node_or
 fn _appendBeforeSiblingCallback(self: *Parser, sibling: *Node, node_or_text: h5e.NodeOrText) !void {
     const parent = sibling.parentNode() orelse return error.NoParent;
     const node: *Node = switch (node_or_text.toUnion()) {
-        .node => |cpn| getNode(cpn),
+        .node => |cpn| blk: {
+            const child = getNode(cpn);
+            if (child._parent) |previous_parent| {
+                // A custom element constructor may have inserted the node into the
+                // DOM before the parser officially places it (e.g. via foster
+                // parenting). Detach it first so insertNodeRelative's assertion holds.
+                self.page.removeNode(previous_parent, child, .{ .will_be_reconnected = parent.isConnected() });
+            }
+            break :blk child;
+        },
         .text => |txt| try self.page.createTextNode(txt),
     };
     try self.page.insertNodeRelative(parent, node, .{ .before = sibling }, .{});

src/browser/reflect.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -16,8 +16,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
 // Gets the Parent of child.
 // HtmlElement.of(script) -> *HTMLElement
 pub fn Struct(comptime T: type) type {
@@ -28,37 +26,3 @@ pub fn Struct(comptime T: type) type {
         else => unreachable,
     };
 }
-
-// Creates an enum of N enums. Doesn't perserve their underlying integer
-pub fn mergeEnums(comptime enums: []const type) type {
-    const field_count = blk: {
-        var count: usize = 0;
-        inline for (enums) |e| {
-            count += @typeInfo(e).@"enum".fields.len;
-        }
-        break :blk count;
-    };
-
-    var i: usize = 0;
-    var fields: [field_count]std.builtin.Type.EnumField = undefined;
-    for (enums) |e| {
-        for (@typeInfo(e).@"enum".fields) |f| {
-            fields[i] = .{
-                .name = f.name,
-                .value = i,
-            };
-            i += 1;
-        }
-    }
-
-    return @Type(.{ .@"enum" = .{
-        .decls = &.{},
-        .tag_type = blk: {
-            if (field_count <= std.math.maxInt(u8)) break :blk u8;
-            if (field_count <= std.math.maxInt(u16)) break :blk u16;
-            unreachable;
-        },
-        .fields = &fields,
-        .is_exhaustive = true,
-    } });
-}

src/browser/tests/console/console.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="time">
+    // should not crash
+    console.time();
+    console.timeLog();
+    console.timeEnd();
+
+    console.time("test");
+    console.timeLog("test");
+    console.timeEnd("test");
+
+    testing.expectEqual(true, true);
+</script>
+
+<script id="count">
+    // should not crash
+    console.count();
+    console.count();
+    console.countReset();
+
+    console.count("test");
+    console.count("test");
+    console.countReset("test");
+
+    testing.expectEqual(true, true);
+</script>

src/browser/tests/crypto.html

@@ -16,44 +16,44 @@
     isRandom(ti8a)
   }
 
-  // {
-  //   let tu16a = new Uint16Array(100)
-  //   testing.expectEqual(tu16a, crypto.getRandomValues(tu16a))
-  //   isRandom(tu16a)
+  {
+    let tu16a = new Uint16Array(100)
+    testing.expectEqual(tu16a, crypto.getRandomValues(tu16a))
+    isRandom(tu16a)
 
-  //   let ti16a = new Int16Array(100)
-  //   testing.expectEqual(ti16a, crypto.getRandomValues(ti16a))
-  //   isRandom(ti16a)
-  // }
+    let ti16a = new Int16Array(100)
+    testing.expectEqual(ti16a, crypto.getRandomValues(ti16a))
+    isRandom(ti16a)
+  }
 
-  // {
-  //   let tu32a = new Uint32Array(100)
-  //   testing.expectEqual(tu32a, crypto.getRandomValues(tu32a))
-  //   isRandom(tu32a)
+  {
+    let tu32a = new Uint32Array(100)
+    testing.expectEqual(tu32a, crypto.getRandomValues(tu32a))
+    isRandom(tu32a)
 
-  //   let ti32a = new Int32Array(100)
-  //   testing.expectEqual(ti32a, crypto.getRandomValues(ti32a))
-  //   isRandom(ti32a)
-  // }
+    let ti32a = new Int32Array(100)
+    testing.expectEqual(ti32a, crypto.getRandomValues(ti32a))
+    isRandom(ti32a)
+  }
 
-  // {
-  //   let tu64a = new BigUint64Array(100)
-  //   testing.expectEqual(tu64a, crypto.getRandomValues(tu64a))
-  //   isRandom(tu64a)
+  {
+    let tu64a = new BigUint64Array(100)
+    testing.expectEqual(tu64a, crypto.getRandomValues(tu64a))
+    isRandom(tu64a)
 
-  //   let ti64a = new BigInt64Array(100)
-  //   testing.expectEqual(ti64a, crypto.getRandomValues(ti64a))
-  //   isRandom(ti64a)
-  // }
+    let ti64a = new BigInt64Array(100)
+    testing.expectEqual(ti64a, crypto.getRandomValues(ti64a))
+    isRandom(ti64a)
+  }
 </script>
 
-<!-- <script id="randomUUID">
+<script id="randomUUID">
   const uuid = crypto.randomUUID();
   testing.expectEqual('string', typeof uuid);
   testing.expectEqual(36, uuid.length);
   const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
   testing.expectEqual(true, regex.test(uuid));
-</script> -->
+</script>
 
 <script id=SubtleCrypto>
   testing.expectEqual(true, crypto.subtle instanceof SubtleCrypto);
@@ -119,3 +119,16 @@
     testing.expectEqual(16, sharedKey.byteLength);
   });
 </script>
+
+<script id="digest">
+  testing.async(async () => {
+    async function hash(algo, data) {
+      const buffer = await window.crypto.subtle.digest(algo, new TextEncoder().encode(data));
+      return [...new Uint8Array(buffer)].map(x => x.toString(16).padStart(2, '0')).join('');
+    }
+    testing.expectEqual("a6a1e3375239f215f09a156df29c17c7d1ac6722", await hash('sha-1', 'over 9000'));
+    testing.expectEqual("1bc375bb92459685194dda18a4b835f4e2972ec1bde6d9ab3db53fcc584a6580", await hash('sha-256', 'over 9000'));
+    testing.expectEqual("a4260d64c2eea9fd30c1f895c5e48a26d817e19d3a700b61b3ce665864ff4b8e012bd357d345aa614c5f642dab865ea1", await hash('sha-384', 'over 9000'));
+    testing.expectEqual("6cad17e6f3f76680d6dd18ed043b75b4f6e1aa1d08b917294942e882fb6466c3510948c34af8b903ed0725b582b3b39c0e485ae2c1b7dfdb192ee38b79c782b6", await hash('sha-512', 'over 9000'));
+  });
+</script>

src/browser/tests/css.html

@@ -20,8 +20,10 @@
   {
     testing.expectEqual('\\30 abc', CSS.escape('0abc'));
     testing.expectEqual('\\31 23', CSS.escape('123'));
-    testing.expectEqual('\\-test', CSS.escape('-test'));
-    testing.expectEqual('\\--test', CSS.escape('--test'));
+    testing.expectEqual('\\-', CSS.escape('-'));
+    testing.expectEqual('-test', CSS.escape('-test'));
+    testing.expectEqual('--test', CSS.escape('--test'));
+    testing.expectEqual('-\\33 ', CSS.escape('-3'));
   }
 </script>
 

src/browser/tests/custom_elements/registry.html

@@ -119,3 +119,33 @@
 }
 </script>
 
+<script id="constructor_self_insert_foster_parent">
+{
+    // Regression: custom element constructor inserting itself (via appendChild) during
+    // innerHTML parsing. When the element is not valid table content, the HTML5 parser
+    // foster-parents it before the <table> via appendBeforeSiblingCallback. That callback
+    // previously didn't check for an existing _parent before calling insertNodeRelative,
+    // causing the "Page.insertNodeRelative parent" assertion to fire.
+    let constructorCalled = 0;
+    let container;
+
+    class CtorSelfInsert extends HTMLElement {
+        constructor() {
+            super();
+            constructorCalled++;
+            // Insert self into container so _parent is set before the parser
+            // officially places this element via appendBeforeSiblingCallback.
+            if (container) container.appendChild(this);
+        }
+    }
+    customElements.define('ctor-self-insert', CtorSelfInsert);
+
+    container = document.createElement('div');
+    // ctor-self-insert is not valid table content; the parser foster-parents it
+    // before the <table>, calling appendBeforeSiblingCallback(sibling=table, node=element).
+    // At that point the element already has _parent=container from the constructor.
+    container.innerHTML = '<table><ctor-self-insert></ctor-self-insert></table>';
+
+    testing.expectEqual(1, constructorCalled);
+}
+</script>

src/browser/tests/document/create_element.html

@@ -2,12 +2,18 @@
 <body></body>
 <script src="../testing.js"></script>
 <script id=createElement>
-  const div = document.createElement('div');
-  testing.expectEqual("DIV", div.tagName);
-  div.id = "hello";
+  testing.expectEqual(1, document.createElement.length);
+
+  const div1 = document.createElement('div');
+  testing.expectEqual(true, div1 instanceof HTMLDivElement);
+  testing.expectEqual("DIV", div1.tagName);
+  div1.id = "hello";
   testing.expectEqual(null, $('#hello'));
 
-  document.getElementsByTagName('body')[0].appendChild(div);
-  testing.expectEqual(div, $('#hello'));
+  const div2 = document.createElement('DIV');
+  testing.expectEqual(true, div2 instanceof HTMLDivElement);
+
+  document.getElementsByTagName('body')[0].appendChild(div1);
+  testing.expectEqual(div1, $('#hello'));
 </script>
 

src/browser/tests/document/create_element_ns.html

@@ -2,9 +2,15 @@
 <body></body>
 <script src="../testing.js"></script>
 <script id=createElementNS>
-  const htmlDiv = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
-  testing.expectEqual('DIV', htmlDiv.tagName);
-  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv.namespaceURI);
+  const htmlDiv1 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
+  testing.expectEqual('DIV', htmlDiv1.tagName);
+  testing.expectEqual(true, htmlDiv1 instanceof HTMLDivElement);
+  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv1.namespaceURI);
+
+  const htmlDiv2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'DIV');
+  testing.expectEqual('DIV', htmlDiv2.tagName);
+  testing.expectEqual(true, htmlDiv2 instanceof HTMLDivElement);
+  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv2.namespaceURI);
 
   const svgRect = document.createElementNS('http://www.w3.org/2000/svg', 'RecT');
   testing.expectEqual('RecT', svgRect.tagName);

src/browser/tests/document/document.html

@@ -13,6 +13,10 @@
   testing.expectEqual(undefined, document.getCurrentScript);
   testing.expectEqual("http://127.0.0.1:9582/src/browser/tests/document/document.html", document.URL);
   testing.expectEqual(window, document.defaultView);
+  testing.expectEqual(false, document.hidden);
+  testing.expectEqual("visible", document.visibilityState);
+  testing.expectEqual(false, document.prerendering);
+  testing.expectEqual(undefined, Document.prerendering);
 </script>
 
 <script id=headAndbody>
@@ -22,6 +26,7 @@
 
 <script id=documentElement>
   testing.expectEqual($('#the_body').parentNode, document.documentElement);
+  testing.expectEqual(document.documentElement, document.scrollingElement);
 </script>
 
 <script id=title>

src/browser/tests/document/focus.html

@@ -81,6 +81,172 @@
 </script>
 
 
+<script id="focusin_focusout_events">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let events = [];
+
+  input1.addEventListener('focus', () => events.push('focus1'));
+  input1.addEventListener('focusin', () => events.push('focusin1'));
+  input1.addEventListener('blur', () => events.push('blur1'));
+  input1.addEventListener('focusout', () => events.push('focusout1'));
+  input2.addEventListener('focus', () => events.push('focus2'));
+  input2.addEventListener('focusin', () => events.push('focusin2'));
+
+  // Focus input1 — should fire focus then focusin
+  input1.focus();
+  testing.expectEqual('focus1,focusin1', events.join(','));
+
+  // Focus input2 — should fire blur, focusout on input1, then focus, focusin on input2
+  events = [];
+  input2.focus();
+  testing.expectEqual('blur1,focusout1,focus2,focusin2', events.join(','));
+}
+</script>
+
+<script id="focusin_bubbles">
+{
+  const input1 = $('#input1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let bodyFocusin = 0;
+  let bodyFocus = 0;
+
+  document.body.addEventListener('focusin', () => bodyFocusin++);
+  document.body.addEventListener('focus', () => bodyFocus++);
+
+  input1.focus();
+
+  // focusin should bubble to body, focus should not
+  testing.expectEqual(1, bodyFocusin);
+  testing.expectEqual(0, bodyFocus);
+}
+</script>
+
+<script id="focusout_bubbles">
+{
+  const input1 = $('#input1');
+
+  input1.focus();
+
+  let bodyFocusout = 0;
+  let bodyBlur = 0;
+
+  document.body.addEventListener('focusout', () => bodyFocusout++);
+  document.body.addEventListener('blur', () => bodyBlur++);
+
+  input1.blur();
+
+  // focusout should bubble to body, blur should not
+  testing.expectEqual(1, bodyFocusout);
+  testing.expectEqual(0, bodyBlur);
+}
+</script>
+
+<script id="focus_relatedTarget">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusRelated = null;
+  let blurRelated = null;
+  let focusinRelated = null;
+  let focusoutRelated = null;
+
+  input1.addEventListener('blur', (e) => { blurRelated = e.relatedTarget; });
+  input1.addEventListener('focusout', (e) => { focusoutRelated = e.relatedTarget; });
+  input2.addEventListener('focus', (e) => { focusRelated = e.relatedTarget; });
+  input2.addEventListener('focusin', (e) => { focusinRelated = e.relatedTarget; });
+
+  input1.focus();
+  input2.focus();
+
+  // blur/focusout on input1 should have relatedTarget = input2 (gaining focus)
+  testing.expectEqual(input2, blurRelated);
+  testing.expectEqual(input2, focusoutRelated);
+
+  // focus/focusin on input2 should have relatedTarget = input1 (losing focus)
+  testing.expectEqual(input1, focusRelated);
+  testing.expectEqual(input1, focusinRelated);
+}
+</script>
+
+<script id="blur_relatedTarget_null">
+{
+  const btn = $('#btn1');
+
+  btn.focus();
+
+  let blurRelated = 'not_set';
+  btn.addEventListener('blur', (e) => { blurRelated = e.relatedTarget; });
+  btn.blur();
+
+  // blur without moving to another element should have relatedTarget = null
+  testing.expectEqual(null, blurRelated);
+}
+</script>
+
+<script id="focus_event_properties">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusEvent = null;
+  let focusinEvent = null;
+  let blurEvent = null;
+  let focusoutEvent = null;
+
+  input1.addEventListener('blur', (e) => { blurEvent = e; });
+  input1.addEventListener('focusout', (e) => { focusoutEvent = e; });
+  input2.addEventListener('focus', (e) => { focusEvent = e; });
+  input2.addEventListener('focusin', (e) => { focusinEvent = e; });
+
+  input1.focus();
+  input2.focus();
+
+  // All four should be FocusEvent instances
+  testing.expectEqual(true, blurEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusoutEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusinEvent instanceof FocusEvent);
+
+  // All four should be composed per spec
+  testing.expectEqual(true, blurEvent.composed);
+  testing.expectEqual(true, focusoutEvent.composed);
+  testing.expectEqual(true, focusEvent.composed);
+  testing.expectEqual(true, focusinEvent.composed);
+
+  // None should be cancelable
+  testing.expectEqual(false, blurEvent.cancelable);
+  testing.expectEqual(false, focusoutEvent.cancelable);
+  testing.expectEqual(false, focusEvent.cancelable);
+  testing.expectEqual(false, focusinEvent.cancelable);
+
+  // blur/focus don't bubble, focusin/focusout do
+  testing.expectEqual(false, blurEvent.bubbles);
+  testing.expectEqual(true, focusoutEvent.bubbles);
+  testing.expectEqual(false, focusEvent.bubbles);
+  testing.expectEqual(true, focusinEvent.bubbles);
+}
+</script>
+
 <script id="focus_disconnected">
 {
   const focused = document.activeElement;
@@ -88,3 +254,46 @@
   testing.expectEqual(focused, document.activeElement);
 }
 </script>
+
+<script id="click_focuses_element">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusCount = 0;
+  let blurCount = 0;
+
+  input1.addEventListener('focus', () => focusCount++);
+  input1.addEventListener('blur', () => blurCount++);
+  input2.addEventListener('focus', () => focusCount++);
+
+  // Click input1 — should focus it and fire focus event
+  input1.click();
+  testing.expectEqual(input1, document.activeElement);
+  testing.expectEqual(1, focusCount);
+  testing.expectEqual(0, blurCount);
+
+  // Click input2 — should move focus, fire blur on input1 and focus on input2
+  input2.click();
+  testing.expectEqual(input2, document.activeElement);
+  testing.expectEqual(2, focusCount);
+  testing.expectEqual(1, blurCount);
+}
+</script>
+
+<script id="click_focuses_button">
+{
+  const btn = $('#btn1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  btn.click();
+  testing.expectEqual(btn, document.activeElement);
+}
+</script>

src/browser/tests/document/insert_adjacent_html.html

@@ -41,4 +41,53 @@
   testing.expectEqual("DIV", newElement.tagName);
   testing.expectEqual("after begin", newElement.innerText);
   testing.expectEqual("afterbegin", newElement.className);
+
+  const fuzzWrapper = document.createElement("div");
+  fuzzWrapper.id = "fuzz-wrapper";
+  document.body.appendChild(fuzzWrapper);
+
+  const fuzzCases = [
+    // These cases have no <body> element (or empty body), so nothing is inserted
+    { name: "empty string", html: "", expectElements: 0 },
+    { name: "comment only", html: "<!-- comment -->", expectElements: 0 },
+    { name: "doctype only", html: "<!DOCTYPE html>", expectElements: 0 },
+    { name: "full empty doc", html: "<!DOCTYPE html><html><head></head><body></body></html>", expectElements: 0 },
+
+    { name: "whitespace only", html: "   ", expectElements: 0 },
+    { name: "newlines only", html: "\n\n\n", expectElements: 0 },
+    { name: "just text", html: "plain text", expectElements: 0 },
+    // Head-only elements: Extracted from <head> container
+    { name: "empty meta", html: "<meta>", expectElements: 1 },
+    { name: "empty title", html: "<title></title>", expectElements: 1 },
+    { name: "empty head", html: "<head></head>", expectElements: 0 },  // Container with no children
+    { name: "empty body", html: "<body></body>", expectElements: 0 },  // Container with no children
+    { name: "empty html", html: "<html></html>", expectElements: 0 },  // Container with no children
+    { name: "meta only", html: "<meta charset='utf-8'>", expectElements: 1 },
+    { name: "title only", html: "<title>Test</title>", expectElements: 1 },
+    { name: "link only", html: "<link rel='stylesheet' href='test.css'>", expectElements: 1 },
+    { name: "meta and title", html: "<meta charset='utf-8'><title>Test</title>", expectElements: 2 },
+    { name: "script only", html: "<script>console.log('hi')<\/script>", expectElements: 1 },
+    { name: "style only", html: "<style>body { color: red; }<\/style>", expectElements: 1 },
+    { name: "unclosed div", html: "<div>content", expectElements: 1 },
+    { name: "unclosed span", html: "<span>text", expectElements: 1 },
+    { name: "invalid tag", html: "<notarealtag>content</notarealtag>", expectElements: 1 },
+    { name: "malformed", html: "<<div>>test<</div>>", expectElements: 1 },  // Parser handles it
+    { name: "just closing tag", html: "</div>", expectElements: 0 },
+    { name: "nested empty", html: "<div><div></div></div>", expectElements: 1 },
+    { name: "multiple top-level", html: "<span>1</span><span>2</span><span>3</span>", expectElements: 3 },
+    { name: "mixed text and elements", html: "Text before<b>bold</b>Text after", expectElements: 1 },
+    { name: "deeply nested", html: "<div><div><div><span>deep</span></div></div></div>", expectElements: 1 },
+  ];
+
+  fuzzCases.forEach((tc, idx) => {
+    fuzzWrapper.innerHTML = "";
+    fuzzWrapper.insertAdjacentHTML("beforeend", tc.html);
+    if (tc.expectElements !== fuzzWrapper.childElementCount) {
+      console.warn(`Fuzz idx: ${idx}`);
+      testing.expectEqual(tc.expectElements, fuzzWrapper.childElementCount);
+    }
+  });
+
+  // Clean up
+  document.body.removeChild(fuzzWrapper);
 </script>

src/browser/tests/document/query_selector.html

@@ -23,6 +23,7 @@
 <main>Main content</main>
 
 <script id=byId name="test1">
+  testing.expectEqual(1, document.querySelector.length);
   testing.expectError("SyntaxError: Syntax Error", () => document.querySelector(''));
   testing.withError((err) => {
     testing.expectEqual(12, err.code);
@@ -269,3 +270,36 @@
   testing.expectEqual('rect', document.querySelector('svg g rect').tagName);
 }
 </script>
+
+<script id=special>
+  testing.expectEqual(null, document.querySelector('\\'));
+
+  testing.expectEqual(null, document.querySelector('div\\'));
+  testing.expectEqual(null, document.querySelector('.test-class\\'));
+  testing.expectEqual(null, document.querySelector('#byId\\'));
+</script>
+
+<div class="café">Non-ASCII class 1</div>
+<div class="日本語">Non-ASCII class 2</div>
+<span id="niño">Non-ASCII ID 1</span>
+<p id="🎨">Non-ASCII ID 2</p>
+
+<script id=nonAsciiSelectors>
+  testing.expectEqual('Non-ASCII class 1', document.querySelector('.café').textContent);
+  testing.expectEqual('Non-ASCII class 2', document.querySelector('.日本語').textContent);
+
+  testing.expectEqual('Non-ASCII ID 1', document.querySelector('#niño').textContent);
+  testing.expectEqual('Non-ASCII ID 2', document.querySelector('#🎨').textContent);
+
+  testing.expectEqual('Non-ASCII class 1', document.querySelector('div.café').textContent);
+  testing.expectEqual('Non-ASCII ID 1', document.querySelector('span#niño').textContent);
+</script>
+
+<span id=".,:!">Punctuation test</span>
+
+<script id=escapedPunctuation>
+{
+  // Test escaped punctuation in ID selectors
+  testing.expectEqual('Punctuation test', document.querySelector('#\\.\\,\\:\\!').textContent);
+}
+</script>

src/browser/tests/element/attributes.html

@@ -248,7 +248,7 @@
 }
 </script>
 
-<div id=legacy></a>
+<a id=legacy></a>
 <script id=legacy>
   {
     let a = document.getElementById('legacy').attributes;
@@ -266,3 +266,19 @@
     testing.expectEqual('abc123', a[0].value);
   }
 </script>
+
+<div id="nsa"></div>
+<script id=non-string-attr>
+  {
+    let nsa = document.getElementById('nsa');
+
+    nsa.setAttribute('int', 1);
+    testing.expectEqual('1', nsa.getAttribute('int'));
+
+    nsa.setAttribute('obj', {});
+    testing.expectEqual('[object Object]', nsa.getAttribute('obj'));
+
+    nsa.setAttribute('arr', []);
+    testing.expectEqual('', nsa.getAttribute('arr'));
+  }
+</script>

src/browser/tests/element/class_list.html

@@ -93,6 +93,29 @@
 }
 </script>
 
+<script id=replace_errors>
+{
+  const div = document.createElement('div');
+  div.className = 'foo bar';
+
+  testing.withError((err) => {
+    testing.expectEqual('SyntaxError', err.name);
+  }, () => div.classList.replace('', 'baz'));
+
+  testing.withError((err) => {
+    testing.expectEqual('SyntaxError', err.name);
+  }, () => div.classList.replace('foo', ''));
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => div.classList.replace('foo bar', 'baz'));
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => div.classList.replace('foo', 'bar baz'));
+}
+</script>
+
 <script id=item>
 {
   const div = document.createElement('div');
@@ -166,6 +189,29 @@
 }
 </script>
 
+<script id=classList_assignment>
+{
+  const div = document.createElement('div');
+
+  // Direct assignment should work (equivalent to classList.value = ...)
+  div.classList = 'foo bar baz';
+  testing.expectEqual('foo bar baz', div.className);
+  testing.expectEqual(3, div.classList.length);
+  testing.expectEqual(true, div.classList.contains('foo'));
+
+  // Assigning again should replace
+  div.classList = 'qux';
+  testing.expectEqual('qux', div.className);
+  testing.expectEqual(1, div.classList.length);
+  testing.expectEqual(false, div.classList.contains('foo'));
+
+  // Empty assignment
+  div.classList = '';
+  testing.expectEqual('', div.className);
+  testing.expectEqual(0, div.classList.length);
+}
+</script>
+
 <script id=errors>
 {
   const div = document.createElement('div');

src/browser/tests/element/css_style_properties.html

@@ -121,6 +121,29 @@
 }
 </script>
 
+<script id="propertyAssignment">
+{
+  const div = $('#test-div');
+  div.style.cssText = '';
+
+  // camelCase assignment
+  div.style.opacity = '0.5';
+  testing.expectEqual('0.5', div.style.opacity);
+
+  // bracket notation assignment
+  div.style['filter'] = 'blur(5px)';
+  testing.expectEqual('blur(5px)', div.style.filter);
+
+  // numeric value coerced to string
+  div.style.opacity = 1;
+  testing.expectEqual('1', div.style.opacity);
+
+  // assigning method names should be ignored (not intercepted)
+  div.style.setProperty('color', 'blue');
+  testing.expectEqual('blue', div.style.color);
+}
+</script>
+
 <script id="prototypeChainCheck">
 {
   const div = $('#test-div');

src/browser/tests/element/get_elements_by_tag_name_ns.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id="container" xmlns="http://www.w3.org/1999/xhtml">
+  <div id="div1">div1</div>
+  <p id="p1">p1</p>
+  <div id="div2">div2</div>
+</div>
+
+<svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <circle id="circle1" cx="50" cy="50" r="40"/>
+  <rect id="rect1" x="10" y="10" width="30" height="30"/>
+  <circle id="circle2" cx="25" cy="25" r="10"/>
+</svg>
+
+<div id="mixed">
+  <div id="htmlDiv" xmlns="http://www.w3.org/1999/xhtml">HTML div</div>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <circle id="svgCircle" cx="10" cy="10" r="5"/>
+  </svg>
+</div>
+
+<script id=basic>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  // Test HTML namespace
+  const htmlDivs = document.getElementsByTagNameNS(htmlNS, 'div');
+  testing.expectEqual(true, htmlDivs instanceof HTMLCollection);
+  testing.expectEqual(5, htmlDivs.length); // container, div1, div2, mixed, htmlDiv
+
+  const htmlPs = document.getElementsByTagNameNS(htmlNS, 'p');
+  testing.expectEqual(1, htmlPs.length);
+  testing.expectEqual('p1', htmlPs[0].id);
+}
+</script>
+
+<script id=svgNamespace>
+{
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  const circles = document.getElementsByTagNameNS(svgNS, 'circle');
+  testing.expectEqual(3, circles.length); // circle1, circle2, svgCircle
+  testing.expectEqual('circle1', circles[0].id);
+  testing.expectEqual('circle2', circles[1].id);
+  testing.expectEqual('svgCircle', circles[2].id);
+
+  const rects = document.getElementsByTagNameNS(svgNS, 'rect');
+  testing.expectEqual(1, rects.length);
+  testing.expectEqual('rect1', rects[0].id);
+}
+</script>
+
+<script id=nullNamespace>
+{
+  // Null namespace should match elements with null namespace
+  const nullNsElements = document.getElementsByTagNameNS(null, 'div');
+  testing.expectEqual(0, nullNsElements.length); // Our divs are in HTML namespace
+}
+</script>
+
+<script id=wildcardNamespace>
+{
+  // Wildcard namespace "*" should match all namespaces
+  const allDivs = document.getElementsByTagNameNS('*', 'div');
+  testing.expectEqual(5, allDivs.length); // All divs regardless of namespace
+}
+</script>
+
+<script id=wildcardLocalName>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+
+  // Wildcard local name should match all elements in that namespace
+  const allHtmlElements = document.getElementsByTagNameNS(htmlNS, '*');
+  testing.expectEqual(true, allHtmlElements.length > 0);
+}
+</script>
+
+<script id=caseSensitive>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+
+  // getElementsByTagNameNS is case-sensitive for local names
+  const lowerDivs = document.getElementsByTagNameNS(htmlNS, 'div');
+  const upperDivs = document.getElementsByTagNameNS(htmlNS, 'DIV');
+
+  testing.expectEqual(5, lowerDivs.length);
+  testing.expectEqual(0, upperDivs.length); // Should be 0 because it's case-sensitive
+}
+</script>
+
+<script id=unknownNamespace>
+{
+  // Unknown namespace should still work
+  const unknownNs = document.getElementsByTagNameNS('http://example.com/unknown', 'div');
+  testing.expectEqual(0, unknownNs.length);
+}
+</script>
+
+<script id=emptyResult>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  testing.expectEqual(0, document.getElementsByTagNameNS(htmlNS, 'nonexistent').length);
+  testing.expectEqual(0, document.getElementsByTagNameNS(svgNS, 'nonexistent').length);
+}
+</script>
+
+<script id=elementMethod>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const container = document.getElementById('container');
+
+  // getElementsByTagNameNS on element should only search descendants
+  const divsInContainer = container.getElementsByTagNameNS(htmlNS, 'div');
+  testing.expectEqual(2, divsInContainer.length); // div1, div2 (not container itself)
+  testing.expectEqual('div1', divsInContainer[0].id);
+  testing.expectEqual('div2', divsInContainer[1].id);
+}
+</script>

src/browser/tests/element/html/event_listeners.html

@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<!-- Test inline event listeners set via HTML attributes -->
+<div id="attr-click" onclick="window.x = 1"></div>
+<div id="attr-load" onload="window.x = 1"></div>
+<div id="attr-error" onerror="window.x = 1"></div>
+<div id="attr-focus" onfocus="window.x = 1"></div>
+<div id="attr-blur" onblur="window.x = 1"></div>
+<div id="attr-keydown" onkeydown="window.x = 1"></div>
+<div id="attr-mousedown" onmousedown="window.x = 1"></div>
+<div id="attr-submit" onsubmit="window.x = 1"></div>
+<div id="attr-wheel" onwheel="window.x = 1"></div>
+<div id="attr-scroll" onscroll="window.x = 1"></div>
+<div id="attr-contextmenu" oncontextmenu="window.x = 1"></div>
+<div id="no-listeners"></div>
+
+<script id="attr_listener_returns_function">
+{
+    // Inline listeners set via HTML attributes should return a function
+    testing.expectEqual('function', typeof $('#attr-click').onclick);
+    testing.expectEqual('function', typeof $('#attr-load').onload);
+    testing.expectEqual('function', typeof $('#attr-error').onerror);
+    testing.expectEqual('function', typeof $('#attr-focus').onfocus);
+    testing.expectEqual('function', typeof $('#attr-blur').onblur);
+    testing.expectEqual('function', typeof $('#attr-keydown').onkeydown);
+    testing.expectEqual('function', typeof $('#attr-mousedown').onmousedown);
+    testing.expectEqual('function', typeof $('#attr-submit').onsubmit);
+    testing.expectEqual('function', typeof $('#attr-wheel').onwheel);
+    testing.expectEqual('function', typeof $('#attr-scroll').onscroll);
+    testing.expectEqual('function', typeof $('#attr-contextmenu').oncontextmenu);
+}
+</script>
+
+<script id="no_attr_listener_returns_null">
+{
+    // Elements without inline listeners should return null
+    const div = $('#no-listeners');
+    testing.expectEqual(null, div.onclick);
+    testing.expectEqual(null, div.onload);
+    testing.expectEqual(null, div.onerror);
+    testing.expectEqual(null, div.onfocus);
+    testing.expectEqual(null, div.onblur);
+    testing.expectEqual(null, div.onkeydown);
+    testing.expectEqual(null, div.onmousedown);
+    testing.expectEqual(null, div.onsubmit);
+    testing.expectEqual(null, div.onwheel);
+    testing.expectEqual(null, div.onscroll);
+    testing.expectEqual(null, div.oncontextmenu);
+}
+</script>
+
+<script id="js_setter_getter">
+{
+    // Test setting and getting listeners via JavaScript property
+    const div = document.createElement('div');
+
+    // Initially null
+    testing.expectEqual(null, div.onclick);
+    testing.expectEqual(null, div.onload);
+    testing.expectEqual(null, div.onerror);
+
+    // Set listeners
+    const clickHandler = () => {};
+    const loadHandler = () => {};
+    const errorHandler = () => {};
+
+    div.onclick = clickHandler;
+    div.onload = loadHandler;
+    div.onerror = errorHandler;
+
+    // Verify they can be retrieved and are functions
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onload);
+    testing.expectEqual('function', typeof div.onerror);
+}
+</script>
+
+<script id="js_listener_invoke">
+{
+    // Test that JS-set listeners can be invoked directly
+    const div = document.createElement('div');
+    window.jsInvokeResult = 0;
+
+    div.onclick = () => { window.jsInvokeResult = 100; };
+    div.onclick();
+    testing.expectEqual(100, window.jsInvokeResult);
+
+    div.onload = () => { window.jsInvokeResult = 200; };
+    div.onload();
+    testing.expectEqual(200, window.jsInvokeResult);
+
+    div.onfocus = () => { window.jsInvokeResult = 300; };
+    div.onfocus();
+    testing.expectEqual(300, window.jsInvokeResult);
+}
+</script>
+
+<script id="js_listener_invoke_with_return">
+{
+    // Test that JS-set listeners return values when invoked
+    const div = document.createElement('div');
+
+    div.onclick = () => { return 'click-result'; };
+    testing.expectEqual('click-result', div.onclick());
+
+    div.onload = () => { return 42; };
+    testing.expectEqual(42, div.onload());
+
+    div.onfocus = () => { return { key: 'value' }; };
+    testing.expectEqual('value', div.onfocus().key);
+}
+</script>
+
+<script id="js_listener_invoke_with_args">
+{
+    // Test that JS-set listeners can receive arguments when invoked
+    const div = document.createElement('div');
+
+    div.onclick = (a, b) => { return a + b; };
+    testing.expectEqual(15, div.onclick(10, 5));
+
+    div.onload = (msg) => { return 'Hello, ' + msg; };
+    testing.expectEqual('Hello, World', div.onload('World'));
+}
+</script>
+
+<script id="js_setter_override">
+{
+    // Test that setting a new listener overrides the old one
+    const div = document.createElement('div');
+
+    const first = () => { return 1; };
+    const second = () => { return 2; };
+
+    div.onclick = first;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(1, div.onclick());
+
+    div.onclick = second;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(2, div.onclick());
+}
+</script>
+
+<script id="different_event_types_independent">
+{
+    // Test that different event types are stored independently
+    const div = document.createElement('div');
+
+    const clickFn = () => {};
+    const focusFn = () => {};
+    const blurFn = () => {};
+
+    div.onclick = clickFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(null, div.onfocus);
+    testing.expectEqual(null, div.onblur);
+
+    div.onfocus = focusFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onfocus);
+    testing.expectEqual(null, div.onblur);
+
+    div.onblur = blurFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onfocus);
+    testing.expectEqual('function', typeof div.onblur);
+}
+</script>
+
+<script id="keyboard_event_listeners">
+{
+    // Test keyboard event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onkeydown);
+    testing.expectEqual(null, div.onkeyup);
+    testing.expectEqual(null, div.onkeypress);
+
+    div.onkeydown = () => {};
+    div.onkeyup = () => {};
+    div.onkeypress = () => {};
+
+    testing.expectEqual('function', typeof div.onkeydown);
+    testing.expectEqual('function', typeof div.onkeyup);
+    testing.expectEqual('function', typeof div.onkeypress);
+}
+</script>
+
+<script id="mouse_event_listeners">
+{
+    // Test mouse event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onmousedown);
+    testing.expectEqual(null, div.onmouseup);
+    testing.expectEqual(null, div.onmousemove);
+    testing.expectEqual(null, div.onmouseover);
+    testing.expectEqual(null, div.onmouseout);
+    testing.expectEqual(null, div.ondblclick);
+
+    div.onmousedown = () => {};
+    div.onmouseup = () => {};
+    div.onmousemove = () => {};
+    div.onmouseover = () => {};
+    div.onmouseout = () => {};
+    div.ondblclick = () => {};
+
+    testing.expectEqual('function', typeof div.onmousedown);
+    testing.expectEqual('function', typeof div.onmouseup);
+    testing.expectEqual('function', typeof div.onmousemove);
+    testing.expectEqual('function', typeof div.onmouseover);
+    testing.expectEqual('function', typeof div.onmouseout);
+    testing.expectEqual('function', typeof div.ondblclick);
+}
+</script>
+
+<script id="pointer_event_listeners">
+{
+    // Test pointer event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onpointerdown);
+    testing.expectEqual(null, div.onpointerup);
+    testing.expectEqual(null, div.onpointermove);
+    testing.expectEqual(null, div.onpointerover);
+    testing.expectEqual(null, div.onpointerout);
+    testing.expectEqual(null, div.onpointerenter);
+    testing.expectEqual(null, div.onpointerleave);
+    testing.expectEqual(null, div.onpointercancel);
+
+    div.onpointerdown = () => {};
+    div.onpointerup = () => {};
+    div.onpointermove = () => {};
+    div.onpointerover = () => {};
+    div.onpointerout = () => {};
+    div.onpointerenter = () => {};
+    div.onpointerleave = () => {};
+    div.onpointercancel = () => {};
+
+    testing.expectEqual('function', typeof div.onpointerdown);
+    testing.expectEqual('function', typeof div.onpointerup);
+    testing.expectEqual('function', typeof div.onpointermove);
+    testing.expectEqual('function', typeof div.onpointerover);
+    testing.expectEqual('function', typeof div.onpointerout);
+    testing.expectEqual('function', typeof div.onpointerenter);
+    testing.expectEqual('function', typeof div.onpointerleave);
+    testing.expectEqual('function', typeof div.onpointercancel);
+}
+</script>
+
+<script id="form_event_listeners">
+{
+    // Test form event listener getters/setters
+    const form = document.createElement('form');
+
+    testing.expectEqual(null, form.onsubmit);
+    testing.expectEqual(null, form.onreset);
+    testing.expectEqual(null, form.onchange);
+    testing.expectEqual(null, form.oninput);
+    testing.expectEqual(null, form.oninvalid);
+
+    form.onsubmit = () => {};
+    form.onreset = () => {};
+    form.onchange = () => {};
+    form.oninput = () => {};
+    form.oninvalid = () => {};
+
+    testing.expectEqual('function', typeof form.onsubmit);
+    testing.expectEqual('function', typeof form.onreset);
+    testing.expectEqual('function', typeof form.onchange);
+    testing.expectEqual('function', typeof form.oninput);
+    testing.expectEqual('function', typeof form.oninvalid);
+}
+</script>
+
+<script id="drag_event_listeners">
+{
+    // Test drag event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.ondrag);
+    testing.expectEqual(null, div.ondragstart);
+    testing.expectEqual(null, div.ondragend);
+    testing.expectEqual(null, div.ondragenter);
+    testing.expectEqual(null, div.ondragleave);
+    testing.expectEqual(null, div.ondragover);
+    testing.expectEqual(null, div.ondrop);
+
+    div.ondrag = () => {};
+    div.ondragstart = () => {};
+    div.ondragend = () => {};
+    div.ondragenter = () => {};
+    div.ondragleave = () => {};
+    div.ondragover = () => {};
+    div.ondrop = () => {};
+
+    testing.expectEqual('function', typeof div.ondrag);
+    testing.expectEqual('function', typeof div.ondragstart);
+    testing.expectEqual('function', typeof div.ondragend);
+    testing.expectEqual('function', typeof div.ondragenter);
+    testing.expectEqual('function', typeof div.ondragleave);
+    testing.expectEqual('function', typeof div.ondragover);
+    testing.expectEqual('function', typeof div.ondrop);
+}
+</script>
+
+<script id="clipboard_event_listeners">
+{
+    // Test clipboard event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.oncopy);
+    testing.expectEqual(null, div.oncut);
+    testing.expectEqual(null, div.onpaste);
+
+    div.oncopy = () => {};
+    div.oncut = () => {};
+    div.onpaste = () => {};
+
+    testing.expectEqual('function', typeof div.oncopy);
+    testing.expectEqual('function', typeof div.oncut);
+    testing.expectEqual('function', typeof div.onpaste);
+}
+</script>
+
+<script id="scroll_event_listeners">
+{
+    // Test scroll event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onscroll);
+    testing.expectEqual(null, div.onscrollend);
+    testing.expectEqual(null, div.onresize);
+
+    div.onscroll = () => {};
+    div.onscrollend = () => {};
+    div.onresize = () => {};
+
+    testing.expectEqual('function', typeof div.onscroll);
+    testing.expectEqual('function', typeof div.onscrollend);
+    testing.expectEqual('function', typeof div.onresize);
+}
+</script>
+
+<script id="animation_event_listeners">
+{
+    // Test animation event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onanimationstart);
+    testing.expectEqual(null, div.onanimationend);
+    testing.expectEqual(null, div.onanimationiteration);
+    testing.expectEqual(null, div.onanimationcancel);
+
+    div.onanimationstart = () => {};
+    div.onanimationend = () => {};
+    div.onanimationiteration = () => {};
+    div.onanimationcancel = () => {};
+
+    testing.expectEqual('function', typeof div.onanimationstart);
+    testing.expectEqual('function', typeof div.onanimationend);
+    testing.expectEqual('function', typeof div.onanimationiteration);
+    testing.expectEqual('function', typeof div.onanimationcancel);
+}
+</script>
+
+<script id="transition_event_listeners">
+{
+    // Test transition event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.ontransitionstart);
+    testing.expectEqual(null, div.ontransitionend);
+    testing.expectEqual(null, div.ontransitionrun);
+    testing.expectEqual(null, div.ontransitioncancel);
+
+    div.ontransitionstart = () => {};
+    div.ontransitionend = () => {};
+    div.ontransitionrun = () => {};
+    div.ontransitioncancel = () => {};
+
+    testing.expectEqual('function', typeof div.ontransitionstart);
+    testing.expectEqual('function', typeof div.ontransitionend);
+    testing.expectEqual('function', typeof div.ontransitionrun);
+    testing.expectEqual('function', typeof div.ontransitioncancel);
+}
+</script>
+
+<script id="misc_event_listeners">
+{
+    // Test miscellaneous event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onwheel);
+    testing.expectEqual(null, div.ontoggle);
+    testing.expectEqual(null, div.oncontextmenu);
+    testing.expectEqual(null, div.onselect);
+    testing.expectEqual(null, div.onabort);
+    testing.expectEqual(null, div.oncancel);
+    testing.expectEqual(null, div.onclose);
+
+    div.onwheel = () => {};
+    div.ontoggle = () => {};
+    div.oncontextmenu = () => {};
+    div.onselect = () => {};
+    div.onabort = () => {};
+    div.oncancel = () => {};
+    div.onclose = () => {};
+
+    testing.expectEqual('function', typeof div.onwheel);
+    testing.expectEqual('function', typeof div.ontoggle);
+    testing.expectEqual('function', typeof div.oncontextmenu);
+    testing.expectEqual('function', typeof div.onselect);
+    testing.expectEqual('function', typeof div.onabort);
+    testing.expectEqual('function', typeof div.oncancel);
+    testing.expectEqual('function', typeof div.onclose);
+}
+</script>
+
+<script id="media_event_listeners">
+{
+    // Test media event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onplay);
+    testing.expectEqual(null, div.onpause);
+    testing.expectEqual(null, div.onplaying);
+    testing.expectEqual(null, div.onended);
+    testing.expectEqual(null, div.onvolumechange);
+    testing.expectEqual(null, div.onwaiting);
+    testing.expectEqual(null, div.onseeking);
+    testing.expectEqual(null, div.onseeked);
+    testing.expectEqual(null, div.ontimeupdate);
+    testing.expectEqual(null, div.onloadstart);
+    testing.expectEqual(null, div.onprogress);
+    testing.expectEqual(null, div.onstalled);
+    testing.expectEqual(null, div.onsuspend);
+    testing.expectEqual(null, div.oncanplay);
+    testing.expectEqual(null, div.oncanplaythrough);
+    testing.expectEqual(null, div.ondurationchange);
+    testing.expectEqual(null, div.onemptied);
+    testing.expectEqual(null, div.onloadeddata);
+    testing.expectEqual(null, div.onloadedmetadata);
+    testing.expectEqual(null, div.onratechange);
+
+    div.onplay = () => {};
+    div.onpause = () => {};
+    div.onplaying = () => {};
+    div.onended = () => {};
+    div.onvolumechange = () => {};
+    div.onwaiting = () => {};
+    div.onseeking = () => {};
+    div.onseeked = () => {};
+    div.ontimeupdate = () => {};
+    div.onloadstart = () => {};
+    div.onprogress = () => {};
+    div.onstalled = () => {};
+    div.onsuspend = () => {};
+    div.oncanplay = () => {};
+    div.oncanplaythrough = () => {};
+    div.ondurationchange = () => {};
+    div.onemptied = () => {};
+    div.onloadeddata = () => {};
+    div.onloadedmetadata = () => {};
+    div.onratechange = () => {};
+
+    testing.expectEqual('function', typeof div.onplay);
+    testing.expectEqual('function', typeof div.onpause);
+    testing.expectEqual('function', typeof div.onplaying);
+    testing.expectEqual('function', typeof div.onended);
+    testing.expectEqual('function', typeof div.onvolumechange);
+    testing.expectEqual('function', typeof div.onwaiting);
+    testing.expectEqual('function', typeof div.onseeking);
+    testing.expectEqual('function', typeof div.onseeked);
+    testing.expectEqual('function', typeof div.ontimeupdate);
+    testing.expectEqual('function', typeof div.onloadstart);
+    testing.expectEqual('function', typeof div.onprogress);
+    testing.expectEqual('function', typeof div.onstalled);
+    testing.expectEqual('function', typeof div.onsuspend);
+    testing.expectEqual('function', typeof div.oncanplay);
+    testing.expectEqual('function', typeof div.oncanplaythrough);
+    testing.expectEqual('function', typeof div.ondurationchange);
+    testing.expectEqual('function', typeof div.onemptied);
+    testing.expectEqual('function', typeof div.onloadeddata);
+    testing.expectEqual('function', typeof div.onloadedmetadata);
+    testing.expectEqual('function', typeof div.onratechange);
+}
+</script>
+
+<img src="https://cdn.lightpanda.io/website/assets/images/docs/hn.png" />
+
+<script id="document-element-load">
+{
+  let asyncBlockDispatched = false;
+  const docElement = document.documentElement;
+
+  testing.async(async () => {
+    const result = await new Promise(resolve => {
+    // We should get this fired at capturing phase when a resource loaded.
+      docElement.addEventListener("load", e => {
+        testing.expectEqual(e.eventPhase, Event.CAPTURING_PHASE);
+        return resolve(true);
+      }, true);
+    });
+
+    asyncBlockDispatched = true;
+    testing.expectEqual(true, result);
+  });
+
+  testing.eventually(() => testing.expectEqual(true, asyncBlockDispatched));
+}
+</script>

src/browser/tests/element/html/fieldset.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<fieldset id="fs1" disabled name="group1">
+  <input type="text">
+</fieldset>
+<fieldset id="fs2">
+  <input type="text">
+</fieldset>
+
+<script id="disabled">
+  {
+    const fs1 = document.getElementById('fs1');
+    testing.expectEqual(true, fs1.disabled);
+
+    fs1.disabled = false;
+    testing.expectEqual(false, fs1.disabled);
+
+    const fs2 = document.getElementById('fs2');
+    testing.expectEqual(false, fs2.disabled);
+  }
+</script>
+
+<script id="name">
+  {
+    const fs1 = document.getElementById('fs1');
+    testing.expectEqual('group1', fs1.name);
+
+    fs1.name = 'updated';
+    testing.expectEqual('updated', fs1.name);
+
+    const fs2 = document.getElementById('fs2');
+    testing.expectEqual('', fs2.name);
+  }
+</script>

src/browser/tests/element/html/htmlelement-props.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<div id="d1" hidden>Hidden div</div>
+<div id="d2">Visible div</div>
+<input id="i1" tabindex="5">
+<div id="d3">No tabindex</div>
+
+<script id="hidden">
+  {
+    const d1 = document.getElementById('d1');
+    testing.expectEqual(true, d1.hidden);
+
+    d1.hidden = false;
+    testing.expectEqual(false, d1.hidden);
+
+    const d2 = document.getElementById('d2');
+    testing.expectEqual(false, d2.hidden);
+
+    d2.hidden = true;
+    testing.expectEqual(true, d2.hidden);
+  }
+</script>
+
+<script id="tabIndex">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual(5, i1.tabIndex);
+
+    i1.tabIndex = 10;
+    testing.expectEqual(10, i1.tabIndex);
+
+    // Non-interactive elements default to -1
+    const d3 = document.getElementById('d3');
+    testing.expectEqual(-1, d3.tabIndex);
+
+    d3.tabIndex = 0;
+    testing.expectEqual(0, d3.tabIndex);
+
+    // Interactive elements default to 0 per spec
+    const input = document.createElement('input');
+    testing.expectEqual(0, input.tabIndex);
+
+    const button = document.createElement('button');
+    testing.expectEqual(0, button.tabIndex);
+
+    const a = document.createElement('a');
+    testing.expectEqual(0, a.tabIndex);
+
+    const select = document.createElement('select');
+    testing.expectEqual(0, select.tabIndex);
+
+    const textarea = document.createElement('textarea');
+    testing.expectEqual(0, textarea.tabIndex);
+  }
+</script>

src/browser/tests/element/html/image.html

@@ -97,3 +97,78 @@
     testing.expectEqual('lazy', img.getAttribute('loading'));
 }
 </script>
+
+<script id="complete">
+{
+    // Image with no src is complete per spec
+    const img = document.createElement('img');
+    testing.expectEqual(true, img.complete);
+
+    // Image with src is also complete (headless browser, no actual fetch)
+    img.src = 'test.png';
+    testing.expectEqual(true, img.complete);
+
+    // Image constructor also complete
+    const img2 = new Image();
+    testing.expectEqual(true, img2.complete);
+}
+</script>
+
+<script id="load-trigger-event">
+{
+  const img = document.createElement("img");
+  let count = 0;
+  img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
+    testing.expectEqual(true, count < 3);
+    count++;
+
+    testing.expectEqual(false, bubbles);
+    testing.expectEqual(false, cancelBubble);
+    testing.expectEqual(false, cancelable);
+    testing.expectEqual(false, composed);
+    testing.expectEqual(true, isTrusted);
+    testing.expectEqual(img, target);
+  });
+
+  for (let i = 0; i < 3; i++) {
+    img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
+    testing.expectEqual("https://cdn.lightpanda.io/website/assets/images/docs/hn.png", img.src);
+  }
+
+  // Make sure count is incremented asynchronously.
+  testing.expectEqual(0, count);
+}
+</script>
+
+<img
+  id="inline-img"
+  src="https://cdn.lightpanda.io/website/assets/images/docs/hn.png"
+  onload="(() => testing.expectEqual(true, true))()"
+/>
+
+<script id="inline-on-load">
+{
+  const img = document.getElementById("inline-img");
+  testing.expectEqual(true, img.onload instanceof Function);
+  // Also call inline to double check.
+  img.onload();
+
+  // Make sure ones attached with `addEventListener` also executed.
+  testing.async(async () => {
+    const result = await new Promise(resolve => {
+      img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
+        testing.expectEqual(false, bubbles);
+        testing.expectEqual(false, cancelBubble);
+        testing.expectEqual(false, cancelable);
+        testing.expectEqual(false, composed);
+        testing.expectEqual(true, isTrusted);
+        testing.expectEqual(img, target);
+
+        return resolve(true);
+      });
+    });
+
+    testing.expectEqual(true, result);
+  });
+}
+</script>

src/browser/tests/element/html/input-attrs.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<input id="i1" placeholder="Enter name" min="0" max="100" step="5" autocomplete="email">
+<input id="i2" type="file" multiple>
+<input id="i3">
+
+<script id="placeholder">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('Enter name', i1.placeholder);
+
+    i1.placeholder = 'Updated';
+    testing.expectEqual('Updated', i1.placeholder);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.placeholder);
+  }
+</script>
+
+<script id="min">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('0', i1.min);
+
+    i1.min = '10';
+    testing.expectEqual('10', i1.min);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.min);
+  }
+</script>
+
+<script id="max">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('100', i1.max);
+
+    i1.max = '200';
+    testing.expectEqual('200', i1.max);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.max);
+  }
+</script>
+
+<script id="step">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('5', i1.step);
+
+    i1.step = '0.5';
+    testing.expectEqual('0.5', i1.step);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.step);
+  }
+</script>
+
+<script id="multiple">
+  {
+    const i2 = document.getElementById('i2');
+    testing.expectEqual(true, i2.multiple);
+
+    i2.multiple = false;
+    testing.expectEqual(false, i2.multiple);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual(false, i3.multiple);
+
+    i3.multiple = true;
+    testing.expectEqual(true, i3.multiple);
+  }
+</script>
+
+<script id="autocomplete">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('email', i1.autocomplete);
+
+    i1.autocomplete = 'off';
+    testing.expectEqual('off', i1.autocomplete);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.autocomplete);
+  }
+</script>

src/browser/tests/element/html/input.html

@@ -183,6 +183,44 @@
 }
 </script>
 
+<script id="selectionchange_event">
+  {
+    const input = document.createElement('input');
+    input.value = 'Hello World';
+    document.body.appendChild(input);
+
+    let eventCount = 0;
+    let lastEvent = null;
+    
+    input.addEventListener('selectionchange', (e) => {
+      eventCount++;
+      lastEvent = e;
+    });
+    
+    testing.expectEqual(0, eventCount);
+    
+    input.setSelectionRange(0, 5);
+    input.select();
+    input.selectionStart = 3;
+    input.selectionEnd = 8;
+
+    let bubbledToBody = false;
+    document.body.addEventListener('selectionchange', () => {
+      bubbledToBody = true;
+    });
+    input.setSelectionRange(1, 4);
+
+    testing.eventually(() => {
+      testing.expectEqual(5, eventCount);
+      testing.expectEqual('selectionchange', lastEvent.type);
+      testing.expectEqual(input, lastEvent.target);
+      testing.expectEqual(true, lastEvent.bubbles);
+      testing.expectEqual(false, lastEvent.cancelable);
+      testing.expectEqual(true, bubbledToBody);
+    });
+  }
+</script>
+
 <script id="defaultChecked">
   testing.expectEqual(true, $('#check1').defaultChecked)
   testing.expectEqual(false, $('#check2').defaultChecked)

src/browser/tests/element/html/input_click.html

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<!-- Checkbox click tests -->
+<input id="checkbox1" type="checkbox">
+<input id="checkbox2" type="checkbox" checked>
+<input id="checkbox_disabled" type="checkbox" disabled>
+
+<!-- Radio click tests -->
+<input id="radio1" type="radio" name="clickgroup" checked>
+<input id="radio2" type="radio" name="clickgroup">
+<input id="radio3" type="radio" name="clickgroup">
+<input id="radio_disabled" type="radio" name="clickgroup" disabled>
+
+<script id="checkbox_click_toggles">
+  {
+    const cb = $('#checkbox1');
+    testing.expectEqual(false, cb.checked);
+
+    cb.click();
+    testing.expectEqual(true, cb.checked);
+
+    cb.click();
+    testing.expectEqual(false, cb.checked);
+  }
+</script>
+
+<script id="checkbox_click_preventDefault_reverts">
+  {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    testing.expectEqual(false, cb.checked);
+
+    cb.addEventListener('click', (e) => {
+      testing.expectEqual(true, cb.checked, 'checkbox should be checked during click handler');
+      e.preventDefault();
+    });
+
+    cb.click();
+    testing.expectEqual(false, cb.checked, 'checkbox should revert after preventDefault');
+  }
+</script>
+
+<script id="checkbox_click_events_order">
+  {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    document.body.appendChild(cb);
+
+    const events = [];
+
+    cb.addEventListener('click', () => events.push('click'));
+    cb.addEventListener('input', () => events.push('input'));
+    cb.addEventListener('change', () => events.push('change'));
+
+    cb.click();
+
+    testing.expectEqual(3, events.length);
+    testing.expectEqual('click', events[0]);
+    testing.expectEqual('input', events[1]);
+    testing.expectEqual('change', events[2]);
+
+    document.body.removeChild(cb);
+  }
+</script>
+
+<script id="checkbox_click_preventDefault_no_input_change">
+  {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    document.body.appendChild(cb);
+
+    const events = [];
+
+    cb.addEventListener('click', (e) => {
+      events.push('click');
+      e.preventDefault();
+    });
+    cb.addEventListener('input', () => events.push('input'));
+    cb.addEventListener('change', () => events.push('change'));
+
+    cb.click();
+
+    testing.expectEqual(1, events.length, 'only click event should fire');
+    testing.expectEqual('click', events[0]);
+
+    document.body.removeChild(cb);
+  }
+</script>
+
+<script id="checkbox_click_state_visible_in_handler">
+  {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    cb.checked = true;
+
+    cb.addEventListener('click', (e) => {
+      testing.expectEqual(false, cb.checked, 'should see toggled state in handler');
+      e.preventDefault();
+      testing.expectEqual(false, cb.checked, 'should still be toggled after preventDefault in handler');
+    });
+
+    cb.click();
+    testing.expectEqual(true, cb.checked, 'should revert to original state after handler completes');
+  }
+</script>
+
+<script id="radio_click_checks_clicked">
+  {
+    const r1 = $('#radio1');
+    const r2 = $('#radio2');
+
+    testing.expectEqual(true, r1.checked);
+    testing.expectEqual(false, r2.checked);
+
+    r2.click();
+    testing.expectEqual(false, r1.checked);
+    testing.expectEqual(true, r2.checked);
+  }
+</script>
+
+<script id="radio_click_preventDefault_reverts">
+  {
+    const r1 = document.createElement('input');
+    r1.type = 'radio';
+    r1.name = 'testgroup';
+    r1.checked = true;
+
+    const r2 = document.createElement('input');
+    r2.type = 'radio';
+    r2.name = 'testgroup';
+
+    document.body.appendChild(r1);
+    document.body.appendChild(r2);
+
+    r2.addEventListener('click', (e) => {
+      testing.expectEqual(false, r1.checked, 'r1 should be unchecked during click handler');
+      testing.expectEqual(true, r2.checked, 'r2 should be checked during click handler');
+      e.preventDefault();
+    });
+
+    r2.click();
+
+    testing.expectEqual(true, r1.checked, 'r1 should be restored after preventDefault');
+    testing.expectEqual(false, r2.checked, 'r2 should revert after preventDefault');
+
+    document.body.removeChild(r1);
+    document.body.removeChild(r2);
+  }
+</script>
+
+<script id="radio_click_events_order">
+  {
+    const r = document.createElement('input');
+    r.type = 'radio';
+    r.name = 'eventtest';
+    document.body.appendChild(r);
+
+    const events = [];
+
+    r.addEventListener('click', () => events.push('click'));
+    r.addEventListener('input', () => events.push('input'));
+    r.addEventListener('change', () => events.push('change'));
+
+    r.click();
+
+    testing.expectEqual(3, events.length);
+    testing.expectEqual('click', events[0]);
+    testing.expectEqual('input', events[1]);
+    testing.expectEqual('change', events[2]);
+
+    document.body.removeChild(r);
+  }
+</script>
+
+<script id="radio_click_already_checked_no_events">
+  {
+    const r = document.createElement('input');
+    r.type = 'radio';
+    r.name = 'alreadytest';
+    r.checked = true;
+    document.body.appendChild(r);
+
+    const events = [];
+
+    r.addEventListener('click', () => events.push('click'));
+    r.addEventListener('input', () => events.push('input'));
+    r.addEventListener('change', () => events.push('change'));
+
+    r.click();
+
+    testing.expectEqual(1, events.length, 'only click event should fire for already-checked radio');
+    testing.expectEqual('click', events[0]);
+
+    document.body.removeChild(r);
+  }
+</script>
+
+<script id="disabled_checkbox_no_click">
+  {
+    const cb = $('#checkbox_disabled');
+    const events = [];
+
+    cb.addEventListener('click', () => events.push('click'));
+    cb.addEventListener('input', () => events.push('input'));
+    cb.addEventListener('change', () => events.push('change'));
+
+    cb.click();
+
+    testing.expectEqual(0, events.length, 'disabled checkbox should not fire any events');
+  }
+</script>
+
+<script id="disabled_radio_no_click">
+  {
+    const r = $('#radio_disabled');
+    const events = [];
+
+    r.addEventListener('click', () => events.push('click'));
+    r.addEventListener('input', () => events.push('input'));
+    r.addEventListener('change', () => events.push('change'));
+
+    r.click();
+
+    testing.expectEqual(0, events.length, 'disabled radio should not fire any events');
+  }
+</script>
+
+<script id="input_and_change_are_trusted">
+  {
+    const cb = document.createElement('input');
+    cb.type = 'checkbox';
+    document.body.appendChild(cb);
+
+    let inputEvent = null;
+    let changeEvent = null;
+
+    cb.addEventListener('input', (e) => inputEvent = e);
+    cb.addEventListener('change', (e) => changeEvent = e);
+
+    cb.click();
+
+    testing.expectEqual(true, inputEvent.isTrusted, 'input event should be trusted');
+    testing.expectEqual(true, inputEvent.bubbles, 'input event should bubble');
+    testing.expectEqual(false, inputEvent.cancelable, 'input event should not be cancelable');
+
+    testing.expectEqual(true, changeEvent.isTrusted, 'change event should be trusted');
+    testing.expectEqual(true, changeEvent.bubbles, 'change event should bubble');
+    testing.expectEqual(false, changeEvent.cancelable, 'change event should not be cancelable');
+
+    document.body.removeChild(cb);
+  }
+</script>
+
+<script id="multiple_radios_click_sequence">
+  {
+    const r1 = $('#radio1');
+    const r2 = $('#radio2');
+    const r3 = $('#radio3');
+
+    // Reset to known state
+    r1.checked = true;
+
+    testing.expectEqual(true, r1.checked);
+    testing.expectEqual(false, r2.checked);
+    testing.expectEqual(false, r3.checked);
+
+    r2.click();
+    testing.expectEqual(false, r1.checked);
+    testing.expectEqual(true, r2.checked);
+    testing.expectEqual(false, r3.checked);
+
+    r3.click();
+    testing.expectEqual(false, r1.checked);
+    testing.expectEqual(false, r2.checked);
+    testing.expectEqual(true, r3.checked);
+
+    r1.click();
+    testing.expectEqual(true, r1.checked);
+    testing.expectEqual(false, r2.checked);
+    testing.expectEqual(false, r3.checked);
+  }
+</script>

src/browser/tests/element/html/label.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<label id="l1" for="input1">Name</label>
+<input id="input1">
+
+<script id="htmlFor">
+  {
+    const l1 = document.getElementById('l1');
+    testing.expectEqual('input1', l1.htmlFor);
+
+    l1.htmlFor = 'input2';
+    testing.expectEqual('input2', l1.htmlFor);
+
+    const l2 = document.createElement('label');
+    testing.expectEqual('', l2.htmlFor);
+  }
+</script>

src/browser/tests/element/html/li.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<ol>
+  <li id="li1" value="5">Item</li>
+  <li id="li2">Item</li>
+</ol>
+
+<script id="value">
+  {
+    const li1 = document.getElementById('li1');
+    testing.expectEqual(5, li1.value);
+
+    li1.value = 10;
+    testing.expectEqual(10, li1.value);
+
+    const li2 = document.getElementById('li2');
+    testing.expectEqual(0, li2.value);
+
+    li2.value = -3;
+    testing.expectEqual(-3, li2.value);
+  }
+</script>

src/browser/tests/element/html/link.html

@@ -9,4 +9,13 @@
 
   l2.href = '/over/9000';
   testing.expectEqual('http://127.0.0.1:9582/over/9000', l2.href);
+
+  l2.crossOrigin = 'nope';
+  testing.expectEqual('anonymous', l2.crossOrigin);
+
+  l2.crossOrigin = 'use-Credentials';
+  testing.expectEqual('use-credentials', l2.crossOrigin);
+
+  l2.crossOrigin = '';
+  testing.expectEqual('anonymous', l2.crossOrigin);
 </script>

src/browser/tests/element/html/media.html

@@ -50,6 +50,50 @@
   }
 </script>
 
+<script id="play_pause_events">
+  {
+    const audio = document.createElement('audio');
+    const events = [];
+
+    audio.addEventListener('play', () => events.push('play'));
+    audio.addEventListener('playing', () => events.push('playing'));
+    audio.addEventListener('pause', () => events.push('pause'));
+    audio.addEventListener('emptied', () => events.push('emptied'));
+
+    // First play: paused -> playing, fires play + playing
+    audio.play();
+    testing.expectEqual('play,playing', events.join(','));
+
+    // Second play: already playing, no events
+    audio.play();
+    testing.expectEqual('play,playing', events.join(','));
+
+    // Pause: playing -> paused, fires pause
+    audio.pause();
+    testing.expectEqual('play,playing,pause', events.join(','));
+
+    // Second pause: already paused, no event
+    audio.pause();
+    testing.expectEqual('play,playing,pause', events.join(','));
+
+    // Third play: resume from pause, fires play + playing (verified in Chrome)
+    audio.play();
+    testing.expectEqual('play,playing,pause,play,playing', events.join(','));
+
+    // Pause again
+    audio.pause();
+    testing.expectEqual('play,playing,pause,play,playing,pause', events.join(','));
+
+    // Load: resets state, fires emptied
+    audio.load();
+    testing.expectEqual('play,playing,pause,play,playing,pause,emptied', events.join(','));
+
+    // Play after load: fires play + playing
+    audio.play();
+    testing.expectEqual('play,playing,pause,play,playing,pause,emptied,play,playing', events.join(','));
+  }
+</script>
+
 <script id="volume_muted">
   {
     const audio = document.getElementById('audio1');

src/browser/tests/element/html/ol.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<ol id="ol1" start="5" reversed type="a">
+  <li>Item</li>
+</ol>
+<ol id="ol2">
+  <li>Item</li>
+</ol>
+
+<script id="start">
+  {
+    const ol1 = document.getElementById('ol1');
+    testing.expectEqual(5, ol1.start);
+
+    ol1.start = 10;
+    testing.expectEqual(10, ol1.start);
+
+    const ol2 = document.getElementById('ol2');
+    testing.expectEqual(1, ol2.start);
+  }
+</script>
+
+<script id="reversed">
+  {
+    const ol1 = document.getElementById('ol1');
+    testing.expectEqual(true, ol1.reversed);
+
+    ol1.reversed = false;
+    testing.expectEqual(false, ol1.reversed);
+
+    const ol2 = document.getElementById('ol2');
+    testing.expectEqual(false, ol2.reversed);
+
+    ol2.reversed = true;
+    testing.expectEqual(true, ol2.reversed);
+  }
+</script>
+
+<script id="type">
+  {
+    const ol1 = document.getElementById('ol1');
+    testing.expectEqual('a', ol1.type);
+
+    ol1.type = '1';
+    testing.expectEqual('1', ol1.type);
+
+    const ol2 = document.getElementById('ol2');
+    testing.expectEqual('1', ol2.type);
+  }
+</script>

src/browser/tests/element/html/optgroup.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<select>
+  <optgroup id="og1" label="Group 1" disabled>
+    <option>A</option>
+  </optgroup>
+  <optgroup id="og2" label="Group 2">
+    <option>B</option>
+  </optgroup>
+</select>
+
+<script id="disabled">
+  {
+    const og1 = document.getElementById('og1');
+    testing.expectEqual(true, og1.disabled);
+
+    og1.disabled = false;
+    testing.expectEqual(false, og1.disabled);
+
+    const og2 = document.getElementById('og2');
+    testing.expectEqual(false, og2.disabled);
+
+    og2.disabled = true;
+    testing.expectEqual(true, og2.disabled);
+  }
+</script>
+
+<script id="label">
+  {
+    const og1 = document.getElementById('og1');
+    testing.expectEqual('Group 1', og1.label);
+
+    og1.label = 'Updated';
+    testing.expectEqual('Updated', og1.label);
+
+    const og = document.createElement('optgroup');
+    testing.expectEqual('', og.label);
+  }
+</script>

src/browser/tests/element/html/picture.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<!-- <script id="createElement">
+{
+    const picture = document.createElement('picture');
+    testing.expectEqual('PICTURE', picture.tagName);
+    testing.expectEqual('[object HTMLPictureElement]', Object.prototype.toString.call(picture));
+}
+</script>
+
+<script id="constructor_type">
+{
+    const picture = document.createElement('picture');
+    testing.expectEqual(true, picture instanceof HTMLElement);
+    testing.expectEqual(true, picture instanceof Element);
+    testing.expectEqual(true, picture instanceof Node);
+}
+</script> -->
+
+<picture id="inline-picture">
+  <source media="(min-width: 800px)" srcset="large.jpg">
+  <source media="(min-width: 400px)" srcset="medium.jpg">
+  <img src="small.jpg" alt="Test image">
+</picture>
+
+<script id="inline_picture">
+{
+    const picture = document.getElementById('inline-picture');
+    testing.expectEqual('PICTURE', picture.tagName);
+    testing.expectEqual(3, picture.children.length);
+
+    const sources = picture.querySelectorAll('source');
+    testing.expectEqual(2, sources.length);
+
+    // const img = picture.querySelector('img');
+    // testing.expectEqual('IMG', img.tagName);
+}
+</script>
+
+<!-- <script id="appendChild">
+{
+    const picture = document.createElement('picture');
+    const source = document.createElement('source');
+    const img = document.createElement('img');
+
+    picture.appendChild(source);
+    picture.appendChild(img);
+
+    testing.expectEqual(2, picture.children.length);
+    testing.expectEqual('SOURCE', picture.children[0].tagName);
+    testing.expectEqual('IMG', picture.children[1].tagName);
+}
+</script>
+ -->

src/browser/tests/element/html/quote.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<blockquote id="q1" cite="https://example.com/source">Quote</blockquote>
+
+<script id="cite">
+  {
+    const q1 = document.getElementById('q1');
+    testing.expectEqual('https://example.com/source', q1.cite);
+
+    q1.cite = 'https://example.com/other';
+    testing.expectEqual('https://example.com/other', q1.cite);
+
+    const q2 = document.createElement('blockquote');
+    testing.expectEqual('', q2.cite);
+  }
+</script>

src/browser/tests/element/html/script/script.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<script src="../../../testing.js"></script>
+
+<script id="script">
+   {
+    let s = document.createElement('script');
+    testing.expectEqual('', s.src);
+
+    s.src = '/over.9000.js';
+    testing.expectEqual('http://127.0.0.1:9582/over.9000.js', s.src);
+   }
+</script>

src/browser/tests/element/html/style.html

@@ -3,7 +3,46 @@
 
 <script id="sheet">
   {
+    // Disconnected style element should have no sheet
     testing.expectEqual(null, document.createElement('style').sheet);
+
+    // Connected style element should have a CSSStyleSheet
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    testing.expectEqual(true, style.sheet instanceof CSSStyleSheet);
+
+    // Same sheet instance on repeated access
+    testing.expectEqual(true, style.sheet === style.sheet);
+
+    // Non-CSS type should have no sheet
+    const lessStyle = document.createElement('style');
+    lessStyle.type = 'text/less';
+    document.head.appendChild(lessStyle);
+    testing.expectEqual(null, lessStyle.sheet);
+
+    // Empty type attribute is valid (defaults to text/css per spec)
+    const emptyType = document.createElement('style');
+    emptyType.setAttribute('type', '');
+    document.head.appendChild(emptyType);
+    testing.expectEqual(true, emptyType.sheet instanceof CSSStyleSheet);
+
+    // Case-insensitive type check
+    const upperType = document.createElement('style');
+    upperType.type = 'TEXT/CSS';
+    document.head.appendChild(upperType);
+    testing.expectEqual(true, upperType.sheet instanceof CSSStyleSheet);
+
+    // Disconnection clears sheet
+    const tempStyle = document.createElement('style');
+    document.head.appendChild(tempStyle);
+    testing.expectEqual(true, tempStyle.sheet instanceof CSSStyleSheet);
+    document.head.removeChild(tempStyle);
+    testing.expectEqual(null, tempStyle.sheet);
+
+    // ownerNode points back to the style element
+    const ownStyle = document.createElement('style');
+    document.head.appendChild(ownStyle);
+    testing.expectEqual(true, ownStyle.sheet.ownerNode === ownStyle);
   }
 </script>
 

src/browser/tests/element/html/tablecell.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<table>
+  <tr>
+    <td id="td1" colspan="3" rowspan="2">Cell</td>
+    <td id="td2">Cell</td>
+  </tr>
+</table>
+
+<script id="colSpan">
+  {
+    const td1 = document.getElementById('td1');
+    testing.expectEqual(3, td1.colSpan);
+
+    td1.colSpan = 5;
+    testing.expectEqual(5, td1.colSpan);
+
+    const td2 = document.getElementById('td2');
+    testing.expectEqual(1, td2.colSpan);
+
+    // colSpan 0 clamps to 1
+    td2.colSpan = 0;
+    testing.expectEqual(1, td2.colSpan);
+
+    // colSpan > 1000 clamps to 1000
+    td2.colSpan = 9999;
+    testing.expectEqual(1000, td2.colSpan);
+  }
+</script>
+
+<script id="rowSpan">
+  {
+    const td1 = document.getElementById('td1');
+    testing.expectEqual(2, td1.rowSpan);
+
+    td1.rowSpan = 4;
+    testing.expectEqual(4, td1.rowSpan);
+
+    const td2 = document.getElementById('td2');
+    testing.expectEqual(1, td2.rowSpan);
+
+    // rowSpan 0 is valid per spec (span remaining rows)
+    td2.rowSpan = 0;
+    testing.expectEqual(0, td2.rowSpan);
+
+    // rowSpan > 65534 clamps to 65534
+    td2.rowSpan = 99999;
+    testing.expectEqual(65534, td2.rowSpan);
+  }
+</script>

src/browser/tests/element/html/textarea.html

@@ -229,3 +229,41 @@
     testing.expectEqual('some content', clone.value)
   }
 </script>
+
+<script id="selectionchange_event">
+  {
+    const textarea = document.createElement('textarea');
+    textarea.value = 'Hello World';
+    document.body.appendChild(textarea);
+    
+    let eventCount = 0;
+    let lastEvent = null;
+    
+    textarea.addEventListener('selectionchange', (e) => {
+      eventCount++;
+      lastEvent = e;
+    });
+    
+    testing.expectEqual(0, eventCount);
+    
+    textarea.setSelectionRange(0, 5);
+    textarea.select();
+    textarea.selectionStart = 3;
+    textarea.selectionEnd = 8;
+    
+    let bubbledToBody = false;
+    document.body.addEventListener('selectionchange', () => {
+      bubbledToBody = true;
+    });
+    textarea.setSelectionRange(1, 4);
+    
+    testing.eventually(() => {
+      testing.expectEqual(5, eventCount);
+      testing.expectEqual('selectionchange', lastEvent.type);
+      testing.expectEqual(textarea, lastEvent.target);
+      testing.expectEqual(true, lastEvent.bubbles);
+      testing.expectEqual(false, lastEvent.cancelable);
+      testing.expectEqual(true, bubbledToBody);
+    });
+  }
+</script>

src/browser/tests/element/html/time.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<time id="t1" datetime="2024-01-15">January 15</time>
+
+<script id="dateTime">
+  {
+    const t = document.getElementById('t1');
+    testing.expectEqual('2024-01-15', t.dateTime);
+
+    t.dateTime = '2024-12-25T10:00';
+    testing.expectEqual('2024-12-25T10:00', t.dateTime);
+
+    const t2 = document.createElement('time');
+    testing.expectEqual('', t2.dateTime);
+  }
+</script>

src/browser/tests/element/position.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id="test1">Test Element</div>
+<div id="test2">Another Element</div>
+
+<script id="clientDimensions">
+{
+  const test1 = $('#test1');
+
+  // clientWidth/Height - default is 5px in dummy layout
+  testing.expectEqual('number', typeof test1.clientWidth);
+  testing.expectEqual('number', typeof test1.clientHeight);
+  testing.expectTrue(test1.clientWidth >= 0);
+  testing.expectTrue(test1.clientHeight >= 0);
+
+  // clientTop/Left should be 0 (no borders in dummy layout)
+  testing.expectEqual(0, test1.clientTop);
+  testing.expectEqual(0, test1.clientLeft);
+}
+</script>
+
+<script id="scrollDimensions">
+{
+  const test1 = $('#test1');
+
+  // In dummy layout, scroll dimensions equal client dimensions (no overflow)
+  testing.expectEqual(test1.clientWidth, test1.scrollWidth);
+  testing.expectEqual(test1.clientHeight, test1.scrollHeight);
+}
+</script>
+
+<script id="scrollPosition">
+{
+  const test1 = $('#test1');
+
+  // Initial scroll position should be 0
+  testing.expectEqual(0, test1.scrollTop);
+  testing.expectEqual(0, test1.scrollLeft);
+
+  // Setting scroll position
+  test1.scrollTop = 50;
+  testing.expectEqual(50, test1.scrollTop);
+
+  test1.scrollLeft = 25;
+  testing.expectEqual(25, test1.scrollLeft);
+
+  // Negative values should be clamped to 0
+  test1.scrollTop = -10;
+  testing.expectEqual(0, test1.scrollTop);
+
+  test1.scrollLeft = -5;
+  testing.expectEqual(0, test1.scrollLeft);
+
+  // Each element has independent scroll position
+  const test2 = $('#test2');
+  testing.expectEqual(0, test2.scrollTop);
+  testing.expectEqual(0, test2.scrollLeft);
+
+  test2.scrollTop = 100;
+  testing.expectEqual(100, test2.scrollTop);
+  testing.expectEqual(0, test1.scrollTop); // test1 should still be 0
+}
+</script>
+
+<script id="offsetDimensions">
+{
+  const test1 = $('#test1');
+
+  // offsetWidth/Height should be numbers
+  testing.expectEqual('number', typeof test1.offsetWidth);
+  testing.expectEqual('number', typeof test1.offsetHeight);
+  testing.expectTrue(test1.offsetWidth >= 0);
+  testing.expectTrue(test1.offsetHeight >= 0);
+
+  // Should equal client dimensions
+  testing.expectEqual(test1.clientWidth, test1.offsetWidth);
+  testing.expectEqual(test1.clientHeight, test1.offsetHeight);
+}
+</script>
+
+<script id="offsetPosition">
+{
+  const test1 = $('#test1');
+  const test2 = $('#test2');
+
+  // offsetTop/Left should be calculated from tree position
+  // These values are based on the heuristic layout engine
+  const top1 = test1.offsetTop;
+  const left1 = test1.offsetLeft;
+  const top2 = test2.offsetTop;
+  const left2 = test2.offsetLeft;
+
+  // Position values should be numbers
+  testing.expectEqual('number', typeof top1);
+  testing.expectEqual('number', typeof left1);
+  testing.expectEqual('number', typeof top2);
+  testing.expectEqual('number', typeof left2);
+
+  // Siblings should have different positions (either different x or y)
+  testing.expectTrue(top1 !== top2 || left1 !== left2);
+}
+</script>
+
+<script id="offsetVsBounding">
+{
+  const test1 = $('#test1');
+
+  // offsetTop/Left should match getBoundingClientRect
+  const rect = test1.getBoundingClientRect();
+  testing.expectEqual(rect.y, test1.offsetTop);
+  testing.expectEqual(rect.x, test1.offsetLeft);
+  testing.expectEqual(rect.width, test1.offsetWidth);
+  testing.expectEqual(rect.height, test1.offsetHeight);
+}
+</script>

src/browser/tests/element/replace_with.html

@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<!-- Test 1: Basic single element replacement -->
+<div id="test1">
+  <div id="parent1">
+    <div id="old1">Old Content</div>
+  </div>
+</div>
+
+<script id="test1-basic-replacement">
+  const old1 = $('#old1');
+  const parent1 = $('#parent1');
+
+  testing.expectEqual(1, parent1.childElementCount);
+  testing.expectEqual(old1, document.getElementById('old1'));
+
+  const new1 = document.createElement('div');
+  new1.id = 'new1';
+  new1.textContent = 'New Content';
+
+  old1.replaceWith(new1);
+
+  testing.expectEqual(1, parent1.childElementCount);
+  testing.expectEqual(null, document.getElementById('old1'));
+  testing.expectEqual(new1, document.getElementById('new1'));
+  testing.expectEqual(parent1, new1.parentElement);
+</script>
+
+<!-- Test 2: Replace with multiple elements -->
+<div id="test2">
+  <div id="parent2">
+    <div id="old2">Old</div>
+  </div>
+</div>
+
+<script id="test2-multiple-elements">
+  const old2 = $('#old2');
+  const parent2 = $('#parent2');
+
+  testing.expectEqual(1, parent2.childElementCount);
+
+  const new2a = document.createElement('div');
+  new2a.id = 'new2a';
+  const new2b = document.createElement('div');
+  new2b.id = 'new2b';
+  const new2c = document.createElement('div');
+  new2c.id = 'new2c';
+
+  old2.replaceWith(new2a, new2b, new2c);
+
+  testing.expectEqual(3, parent2.childElementCount);
+  testing.expectEqual(null, document.getElementById('old2'));
+  testing.expectEqual(new2a, document.getElementById('new2a'));
+  testing.expectEqual(new2b, document.getElementById('new2b'));
+  testing.expectEqual(new2c, document.getElementById('new2c'));
+
+  // Check order
+  testing.expectEqual(new2a, parent2.children[0]);
+  testing.expectEqual(new2b, parent2.children[1]);
+  testing.expectEqual(new2c, parent2.children[2]);
+</script>
+
+<!-- Test 3: Replace with text nodes -->
+<div id="test3">
+  <div id="parent3"><div id="old3">Old</div></div>
+</div>
+
+<script id="test3-text-nodes">
+  const old3 = $('#old3');
+  const parent3 = $('#parent3');
+
+  old3.replaceWith('Text1', ' ', 'Text2');
+
+  testing.expectEqual(null, document.getElementById('old3'));
+  testing.expectEqual('Text1 Text2', parent3.textContent);
+</script>
+
+<!-- Test 4: Replace with mix of elements and text -->
+<div id="test4">
+  <div id="parent4"><div id="old4">Old</div></div>
+</div>
+
+<script id="test4-mixed">
+  const old4 = $('#old4');
+  const parent4 = $('#parent4');
+
+  const new4 = document.createElement('span');
+  new4.id = 'new4';
+  new4.textContent = 'Element';
+
+  old4.replaceWith('Before ', new4, ' After');
+
+  testing.expectEqual(null, document.getElementById('old4'));
+  testing.expectEqual(new4, document.getElementById('new4'));
+  testing.expectEqual('Before Element After', parent4.textContent);
+</script>
+
+<!-- Test 5: Replace element not connected to document -->
+<script id="test5-not-connected">
+  const disconnected = document.createElement('div');
+  disconnected.id = 'disconnected5';
+
+  const replacement = document.createElement('div');
+  replacement.id = 'replacement5';
+
+  // Should do nothing since element has no parent
+  disconnected.replaceWith(replacement);
+
+  // Neither should be in the document
+  testing.expectEqual(null, document.getElementById('disconnected5'));
+  testing.expectEqual(null, document.getElementById('replacement5'));
+</script>
+
+<!-- Test 6: Replace with nodes that already have a parent -->
+<div id="test6">
+  <div id="parent6a">
+    <div id="old6">Old</div>
+  </div>
+  <div id="parent6b">
+    <div id="moving6a">Moving A</div>
+    <div id="moving6b">Moving B</div>
+  </div>
+</div>
+
+<script id="test6-moving-nodes">
+  const old6 = $('#old6');
+  const parent6a = $('#parent6a');
+  const parent6b = $('#parent6b');
+  const moving6a = $('#moving6a');
+  const moving6b = $('#moving6b');
+
+  testing.expectEqual(1, parent6a.childElementCount);
+  testing.expectEqual(2, parent6b.childElementCount);
+
+  // Replace old6 with nodes that already have parent6b as parent
+  old6.replaceWith(moving6a, moving6b);
+
+  // old6 should be gone
+  testing.expectEqual(null, document.getElementById('old6'));
+
+  // parent6a should now have the moved elements
+  testing.expectEqual(2, parent6a.childElementCount);
+  testing.expectEqual(moving6a, parent6a.children[0]);
+  testing.expectEqual(moving6b, parent6a.children[1]);
+
+  // parent6b should now be empty
+  testing.expectEqual(0, parent6b.childElementCount);
+
+  // getElementById should still work
+  testing.expectEqual(moving6a, document.getElementById('moving6a'));
+  testing.expectEqual(moving6b, document.getElementById('moving6b'));
+  testing.expectEqual(parent6a, moving6a.parentElement);
+  testing.expectEqual(parent6a, moving6b.parentElement);
+</script>
+
+<!-- Test 7: Replace with nested elements -->
+<div id="test7">
+  <div id="parent7">
+    <div id="old7">Old</div>
+  </div>
+</div>
+
+<script id="test7-nested">
+  const old7 = $('#old7');
+  const parent7 = $('#parent7');
+
+  const new7 = document.createElement('div');
+  new7.id = 'new7';
+
+  const child7a = document.createElement('div');
+  child7a.id = 'child7a';
+  const child7b = document.createElement('div');
+  child7b.id = 'child7b';
+
+  new7.appendChild(child7a);
+  new7.appendChild(child7b);
+
+  old7.replaceWith(new7);
+
+  testing.expectEqual(null, document.getElementById('old7'));
+  testing.expectEqual(new7, document.getElementById('new7'));
+  testing.expectEqual(child7a, document.getElementById('child7a'));
+  testing.expectEqual(child7b, document.getElementById('child7b'));
+  testing.expectEqual(2, new7.childElementCount);
+</script>
+
+<!-- Test 8: Replace maintains sibling order -->
+<div id="test8">
+  <div id="parent8">
+    <div id="before8">Before</div>
+    <div id="old8">Old</div>
+    <div id="after8">After</div>
+  </div>
+</div>
+
+<script id="test8-sibling-order">
+  const old8 = $('#old8');
+  const parent8 = $('#parent8');
+  const before8 = $('#before8');
+  const after8 = $('#after8');
+
+  testing.expectEqual(3, parent8.childElementCount);
+
+  const new8 = document.createElement('div');
+  new8.id = 'new8';
+
+  old8.replaceWith(new8);
+
+  testing.expectEqual(3, parent8.childElementCount);
+  testing.expectEqual(before8, parent8.children[0]);
+  testing.expectEqual(new8, parent8.children[1]);
+  testing.expectEqual(after8, parent8.children[2]);
+</script>
+
+<!-- Test 9: Replace first child -->
+<div id="test9">
+  <div id="parent9">
+    <div id="first9">First</div>
+    <div id="second9">Second</div>
+  </div>
+</div>
+
+<script id="test9-first-child">
+  const first9 = $('#first9');
+  const parent9 = $('#parent9');
+
+  const new9 = document.createElement('div');
+  new9.id = 'new9';
+
+  first9.replaceWith(new9);
+
+  testing.expectEqual(null, document.getElementById('first9'));
+  testing.expectEqual(new9, parent9.firstElementChild);
+  testing.expectEqual(new9, parent9.children[0]);
+</script>
+
+<!-- Test 10: Replace last child -->
+<div id="test10">
+  <div id="parent10">
+    <div id="first10">First</div>
+    <div id="last10">Last</div>
+  </div>
+</div>
+
+<script id="test10-last-child">
+  const last10 = $('#last10');
+  const parent10 = $('#parent10');
+
+  const new10 = document.createElement('div');
+  new10.id = 'new10';
+
+  last10.replaceWith(new10);
+
+  testing.expectEqual(null, document.getElementById('last10'));
+  testing.expectEqual(new10, parent10.lastElementChild);
+  testing.expectEqual(new10, parent10.children[1]);
+</script>
+
+<!-- Test 11: Replace with empty (no arguments) - effectively removes the element -->
+<div id="test11">
+  <div id="parent11">
+    <div id="old11">Old</div>
+  </div>
+</div>
+
+<script id="test11-empty">
+  const old11 = $('#old11');
+  const parent11 = $('#parent11');
+
+  testing.expectEqual(1, parent11.childElementCount);
+
+  // Calling replaceWith() with no args should just remove the element
+  old11.replaceWith();
+
+  // Element should be removed, leaving parent empty
+  testing.expectEqual(0, parent11.childElementCount);
+  testing.expectEqual(null, document.getElementById('old11'));
+  testing.expectEqual(null, old11.parentElement);
+</script>
+
+<!-- Test 12: Replace and check childElementCount updates -->
+<div id="test12">
+  <div id="parent12">
+    <div id="a12">A</div>
+    <div id="b12">B</div>
+    <div id="c12">C</div>
+  </div>
+</div>
+
+<script id="test12-child-count">
+  const b12 = $('#b12');
+  const parent12 = $('#parent12');
+
+  testing.expectEqual(3, parent12.childElementCount);
+
+  // Replace with 2 elements
+  const new12a = document.createElement('div');
+  new12a.id = 'new12a';
+  const new12b = document.createElement('div');
+  new12b.id = 'new12b';
+
+  b12.replaceWith(new12a, new12b);
+
+  testing.expectEqual(4, parent12.childElementCount);
+  testing.expectEqual(null, document.getElementById('b12'));
+</script>
+
+<!-- Test 13: Replace deeply nested element -->
+<div id="test13">
+  <div id="l1">
+    <div id="l2">
+      <div id="l3">
+        <div id="l4">
+          <div id="old13">Deep</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script id="test13-deeply-nested">
+  const old13 = $('#old13');
+  const l4 = $('#l4');
+
+  const new13 = document.createElement('div');
+  new13.id = 'new13';
+
+  old13.replaceWith(new13);
+
+  testing.expectEqual(null, document.getElementById('old13'));
+  testing.expectEqual(new13, document.getElementById('new13'));
+  testing.expectEqual(l4, new13.parentElement);
+</script>

src/browser/tests/event/focus.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<script id=default>
+  let event = new FocusEvent('focus');
+  testing.expectEqual('focus', event.type);
+  testing.expectEqual(true, event instanceof FocusEvent);
+  testing.expectEqual(true, event instanceof UIEvent);
+  testing.expectEqual(true, event instanceof Event);
+  testing.expectEqual(null, event.relatedTarget);
+</script>
+
+<script id=parameters>
+  let div = document.createElement('div');
+  let focusEvent = new FocusEvent('blur', { relatedTarget: div });
+  testing.expectEqual(div, focusEvent.relatedTarget);
+</script>
+
+<script id=createEvent>
+  let evt = document.createEvent('focusevent');
+  testing.expectEqual(true, evt instanceof FocusEvent);
+  testing.expectEqual(true, evt instanceof UIEvent);
+</script>

src/browser/tests/event/mouse.html

@@ -10,11 +10,13 @@
   testing.expectEqual(0, event.clientY);
   testing.expectEqual(0, event.screenX);
   testing.expectEqual(0, event.screenY);
+  testing.expectEqual(0, event.buttons);
 </script>
 
 <script id=parameters>
-  let new_event = new MouseEvent('click', { 'button': 0, 'clientX': 10, 'clientY': 20, screenX: 200, screenY: 500 });
+  let new_event = new MouseEvent('click', { 'button': 0, 'clientX': 10, 'clientY': 20, screenX: 200, screenY: 500, buttons: 5 });
   testing.expectEqual(0, new_event.button);
+  testing.expectEqual(5, new_event.buttons);
   testing.expectEqual(10, new_event.x);
   testing.expectEqual(20, new_event.y);
   testing.expectEqual(10, new_event.pageX);

src/browser/tests/event/pointer.html

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<script id=default>
+{
+  let event = new PointerEvent('pointerdown');
+  testing.expectEqual('pointerdown', event.type);
+  testing.expectEqual(true, event instanceof PointerEvent);
+  testing.expectEqual(true, event instanceof MouseEvent);
+  testing.expectEqual(true, event instanceof UIEvent);
+  testing.expectEqual(true, event instanceof Event);
+  testing.expectEqual(0, event.pointerId);
+  testing.expectEqual('', event.pointerType);
+  testing.expectEqual(1.0, event.width);
+  testing.expectEqual(1.0, event.height);
+  testing.expectEqual(0.0, event.pressure);
+  testing.expectEqual(0.0, event.tangentialPressure);
+  testing.expectEqual(0, event.tiltX);
+  testing.expectEqual(0, event.tiltY);
+  testing.expectEqual(0, event.twist);
+  testing.expectEqual(false, event.isPrimary);
+}
+</script>
+
+<script id=parameters>
+{
+  let new_event = new PointerEvent('pointerdown', {
+    pointerId: 42,
+    pointerType: 'pen',
+    width: 10.5,
+    height: 20.5,
+    pressure: 0.75,
+    tangentialPressure: -0.25,
+    tiltX: 30,
+    tiltY: 45,
+    twist: 90,
+    isPrimary: true,
+    clientX: 100,
+    clientY: 200,
+    screenX: 300,
+    screenY: 400
+  });
+  testing.expectEqual(42, new_event.pointerId);
+  testing.expectEqual('pen', new_event.pointerType);
+  testing.expectEqual(10.5, new_event.width);
+  testing.expectEqual(20.5, new_event.height);
+  testing.expectEqual(0.75, new_event.pressure);
+  testing.expectEqual(-0.25, new_event.tangentialPressure);
+  testing.expectEqual(30, new_event.tiltX);
+  testing.expectEqual(45, new_event.tiltY);
+  testing.expectEqual(90, new_event.twist);
+  testing.expectEqual(true, new_event.isPrimary);
+  testing.expectEqual(100, new_event.clientX);
+  testing.expectEqual(200, new_event.clientY);
+  testing.expectEqual(300, new_event.screenX);
+  testing.expectEqual(400, new_event.screenY);
+}
+</script>
+
+<script id=mousePointerType>
+{
+  let mouse_event = new PointerEvent('pointerdown', { pointerType: 'mouse' });
+  testing.expectEqual('mouse', mouse_event.pointerType);
+}
+</script>
+
+<script id=touchPointerType>
+{
+  let touch_event = new PointerEvent('pointerdown', { pointerType: 'touch', pointerId: 1, pressure: 0.5 });
+  testing.expectEqual('touch', touch_event.pointerType);
+  testing.expectEqual(1, touch_event.pointerId);
+  testing.expectEqual(0.5, touch_event.pressure);
+}
+</script>
+
+<script id=listener>
+{
+  let pe = new PointerEvent('pointerdown', { pointerId: 123 });
+  testing.expectEqual(true, pe instanceof PointerEvent);
+  testing.expectEqual(true, pe instanceof MouseEvent);
+  testing.expectEqual(true, pe instanceof Event);
+
+  var evt = null;
+  document.addEventListener('pointerdown', function (e) {
+    evt = e;
+  });
+  document.dispatchEvent(pe);
+  testing.expectEqual('pointerdown', evt.type);
+  testing.expectEqual(true, evt instanceof PointerEvent);
+  testing.expectEqual(123, evt.pointerId);
+}
+</script>
+
+<script id=isTrusted>
+{
+  let pointerEvent = new PointerEvent('pointerup');
+  testing.expectEqual(false, pointerEvent.isTrusted);
+
+  let pointerIsTrusted = null;
+  document.addEventListener('pointertest', (e) => {
+    pointerIsTrusted = e.isTrusted;
+    testing.expectEqual(true, e instanceof PointerEvent);
+  });
+  document.dispatchEvent(new PointerEvent('pointertest'));
+  testing.expectEqual(false, pointerIsTrusted);
+}
+</script>
+
+<script id=eventTypes>
+{
+  let down = new PointerEvent('pointerdown');
+  testing.expectEqual('pointerdown', down.type);
+
+  let up = new PointerEvent('pointerup');
+  testing.expectEqual('pointerup', up.type);
+
+  let move = new PointerEvent('pointermove');
+  testing.expectEqual('pointermove', move.type);
+
+  let enter = new PointerEvent('pointerenter');
+  testing.expectEqual('pointerenter', enter.type);
+
+  let leave = new PointerEvent('pointerleave');
+  testing.expectEqual('pointerleave', leave.type);
+
+  let over = new PointerEvent('pointerover');
+  testing.expectEqual('pointerover', over.type);
+
+  let out = new PointerEvent('pointerout');
+  testing.expectEqual('pointerout', out.type);
+
+  let cancel = new PointerEvent('pointercancel');
+  testing.expectEqual('pointercancel', cancel.type);
+}
+</script>
+
+<script id=inheritedMouseProperties>
+{
+  let pe = new PointerEvent('pointerdown', {
+    button: 2,
+    buttons: 4,
+    altKey: true,
+    ctrlKey: true,
+    shiftKey: true,
+    metaKey: true
+  });
+  testing.expectEqual(2, pe.button);
+  testing.expectEqual(true, pe.altKey);
+  testing.expectEqual(true, pe.ctrlKey);
+  testing.expectEqual(true, pe.shiftKey);
+  testing.expectEqual(true, pe.metaKey);
+}
+</script>
+
+<script id=inheritedUIEventProperties>
+{
+  let pe = new PointerEvent('pointerdown', {
+    detail: 5,
+    bubbles: true,
+    cancelable: true
+  });
+  testing.expectEqual(5, pe.detail);
+  testing.expectEqual(true, pe.bubbles);
+  testing.expectEqual(true, pe.cancelable);
+}
+</script>

src/browser/tests/event/promise_rejection.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=project_rejection>
+  {
+    let e1 = new PromiseRejectionEvent("rejectionhandled");
+    testing.expectEqual(true, e1 instanceof PromiseRejectionEvent);
+    testing.expectEqual(true, e1 instanceof Event);
+
+    testing.expectEqual("rejectionhandled", e1.type);
+    testing.expectEqual(null, e1.reason);
+    testing.expectEqual(null, e1.promise);
+
+    let e2 = new PromiseRejectionEvent("rejectionhandled", {reason: ['tea']});
+    testing.expectEqual(true, e2 instanceof PromiseRejectionEvent);
+    testing.expectEqual(true, e2 instanceof Event);
+
+    testing.expectEqual("rejectionhandled", e2.type);
+    testing.expectEqual(['tea'], e2.reason);
+    testing.expectEqual(null, e2.promise);
+  }
+</script>

src/browser/tests/event/text.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<script id=createEvent>
+  let evt = document.createEvent('TextEvent');
+  testing.expectEqual(true, evt instanceof TextEvent);
+  testing.expectEqual(true, evt instanceof UIEvent);
+  testing.expectEqual('', evt.data);
+</script>
+
+<script id=initTextEvent>
+  let textEvent = document.createEvent('TextEvent');
+  textEvent.initTextEvent('textInput', true, false, window, 'test data');
+  testing.expectEqual('textInput', textEvent.type);
+  testing.expectEqual('test data', textEvent.data);
+  testing.expectEqual(true, textEvent.bubbles);
+  testing.expectEqual(false, textEvent.cancelable);
+</script>

src/browser/tests/event/wheel.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<script id=default>
+  let event = new WheelEvent('wheel');
+  testing.expectEqual('wheel', event.type);
+  testing.expectEqual(true, event instanceof WheelEvent);
+  testing.expectEqual(true, event instanceof MouseEvent);
+  testing.expectEqual(true, event instanceof UIEvent);
+  testing.expectEqual(0, event.deltaX);
+  testing.expectEqual(0, event.deltaY);
+  testing.expectEqual(0, event.deltaZ);
+  testing.expectEqual(0, event.deltaMode);
+</script>
+
+<script id=parameters>
+  let wheelEvent = new WheelEvent('wheel', {
+    deltaX: 10,
+    deltaY: 20,
+    deltaMode: WheelEvent.DOM_DELTA_LINE
+  });
+  testing.expectEqual(10, wheelEvent.deltaX);
+  testing.expectEqual(20, wheelEvent.deltaY);
+  testing.expectEqual(1, wheelEvent.deltaMode);
+</script>
+
+<script id=constants>
+  testing.expectEqual(0, WheelEvent.DOM_DELTA_PIXEL);
+  testing.expectEqual(1, WheelEvent.DOM_DELTA_LINE);
+  testing.expectEqual(2, WheelEvent.DOM_DELTA_PAGE);
+</script>

src/browser/tests/events.html

@@ -635,3 +635,130 @@
   // https://github.com/lightpanda-io/browser/pull/1316
   testing.expectError('TypeError', () => MessageEvent(''));
 </script>
+
+<div id=inline_parent><div id=inline_child></div></div>
+<script id=inlineHandlerReceivesEvent>
+  // Test that inline onclick handler receives the event object
+  {
+    const inline_child = $('#inline_child');
+    let receivedType = null;
+    let receivedTarget = null;
+    let receivedCurrentTarget = null;
+
+    inline_child.onclick = function(e) {
+      // Capture values DURING handler execution
+      receivedType = e.type;
+      receivedTarget = e.target;
+      receivedCurrentTarget = e.currentTarget;
+    };
+
+    inline_child.click();
+
+    testing.expectEqual('click', receivedType);
+    testing.expectEqual(inline_child, receivedTarget);
+    testing.expectEqual(inline_child, receivedCurrentTarget);
+  }
+</script>
+
+<div id=inline_order_parent><div id=inline_order_child></div></div>
+<script id=inlineHandlerOrder>
+  // Test that inline handler executes in proper order with addEventListener
+  {
+    const inline_order_child = $('#inline_order_child');
+    const inline_order_parent = $('#inline_order_parent');
+    const order = [];
+
+    // Capture listener on parent
+    inline_order_parent.addEventListener('click', () => order.push('parent-capture'), true);
+
+    // Inline handler on child (should execute at target phase)
+    inline_order_child.onclick = () => order.push('child-onclick');
+
+    // addEventListener on child (should execute at target phase, after onclick)
+    inline_order_child.addEventListener('click', () => order.push('child-listener'));
+
+    // Bubble listener on parent
+    inline_order_parent.addEventListener('click', () => order.push('parent-bubble'));
+
+    inline_order_child.click();
+
+    // Expected order: capture, then onclick, then addEventListener, then bubble
+    testing.expectEqual('parent-capture', order[0]);
+    testing.expectEqual('child-onclick', order[1]);
+    testing.expectEqual('child-listener', order[2]);
+    testing.expectEqual('parent-bubble', order[3]);
+    testing.expectEqual(4, order.length);
+  }
+</script>
+
+<div id=inline_prevent><div id=inline_prevent_child></div></div>
+<script id=inlineHandlerPreventDefault>
+  // Test that inline handler can preventDefault and it affects addEventListener listeners
+  {
+    const inline_prevent_child = $('#inline_prevent_child');
+    let preventDefaultCalled = false;
+    let listenerSawPrevented = false;
+
+    inline_prevent_child.onclick = function(e) {
+      e.preventDefault();
+      preventDefaultCalled = true;
+    };
+
+    inline_prevent_child.addEventListener('click', (e) => {
+      listenerSawPrevented = e.defaultPrevented;
+    });
+
+    const result = inline_prevent_child.dispatchEvent(new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true
+    }));
+
+    testing.expectEqual(true, preventDefaultCalled);
+    testing.expectEqual(true, listenerSawPrevented);
+    testing.expectEqual(false, result); // dispatchEvent returns false when prevented
+  }
+</script>
+
+<div id=inline_stop_parent><div id=inline_stop_child></div></div>
+<script id=inlineHandlerStopPropagation>
+  // Test that inline handler can stopPropagation
+  {
+    const inline_stop_child = $('#inline_stop_child');
+    const inline_stop_parent = $('#inline_stop_parent');
+    let childCalled = false;
+    let parentCalled = false;
+
+    inline_stop_child.onclick = function(e) {
+      childCalled = true;
+      e.stopPropagation();
+    };
+
+    inline_stop_parent.addEventListener('click', () => {
+      parentCalled = true;
+    });
+
+    inline_stop_child.click();
+
+    testing.expectEqual(true, childCalled);
+    testing.expectEqual(false, parentCalled); // Should not bubble to parent
+  }
+</script>
+
+<div id=inline_replace_test></div>
+<script id=inlineHandlerReplacement>
+  // Test that setting onclick property replaces previous handler
+  {
+    const inline_replace_test = $('#inline_replace_test');
+    let calls = [];
+
+    inline_replace_test.onclick = () => calls.push('first');
+    inline_replace_test.click();
+
+    inline_replace_test.onclick = () => calls.push('second');
+    inline_replace_test.click();
+
+    testing.expectEqual('first', calls[0]);
+    testing.expectEqual('second', calls[1]);
+    testing.expectEqual(2, calls.length);
+  }
+</script>

src/browser/tests/history.html

@@ -30,7 +30,7 @@
 
   testing.eventually(() => {
     testing.expectEqual(true, popstateEventFired);
-    testing.expectEqual(state, popstateEventState);
+    testing.expectEqual({testInProgress: true }, popstateEventState);
   })
 
   history.back();

src/browser/tests/history_after_nav.skip.html

@@ -1,6 +1 @@
 <!DOCTYPE html>
-<script src="testing.js"></script>
-
-<script id=history-after-nav>
-    testing.expectEqual(true, history.state && history.state.testInProgress);
-</script>

src/browser/tests/image_data.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<script src="testing.js"></script>
+
+<script id=constructor-basic>
+  {
+    const img = new ImageData(10, 20);
+    testing.expectEqual(10, img.width);
+    testing.expectEqual(20, img.height);
+    testing.expectEqual("srgb", img.colorSpace);
+    testing.expectEqual("rgba-unorm8", img.pixelFormat);
+  }
+</script>
+
+<script id=data-property>
+  {
+    const img = new ImageData(2, 3);
+    const data = img.data;
+    testing.expectEqual(true, data instanceof Uint8ClampedArray);
+    // 2 * 3 * 4 (RGBA) = 24 bytes
+    testing.expectEqual(24, data.length);
+  }
+</script>
+
+<script id=data-initialized-to-zero>
+  {
+    const img = new ImageData(2, 2);
+    const data = img.data;
+    for (let i = 0; i < data.length; i++) {
+      testing.expectEqual(0, data[i]);
+    }
+  }
+</script>
+
+<script id=data-mutability>
+  {
+    const img = new ImageData(1, 1);
+    const data = img.data;
+    // Set pixel to red (RGBA)
+    data[0] = 255;
+    data[1] = 0;
+    data[2] = 0;
+    data[3] = 255;
+
+    // Read back through the same accessor
+    const data2 = img.data;
+    testing.expectEqual(255, data2[0]);
+    testing.expectEqual(0, data2[1]);
+    testing.expectEqual(0, data2[2]);
+    testing.expectEqual(255, data2[3]);
+  }
+</script>
+
+<script id=constructor-with-settings>
+  {
+    const img = new ImageData(5, 5, { colorSpace: "srgb" });
+    testing.expectEqual(5, img.width);
+    testing.expectEqual(5, img.height);
+    testing.expectEqual("srgb", img.colorSpace);
+  }
+</script>
+
+<script id=constructor-invalid-colorspace>
+  testing.expectError("TypeError", () => {
+    new ImageData(5, 5, { colorSpace: "display-p3" });
+  });
+</script>
+
+<script id=single-pixel>
+  {
+    const img = new ImageData(1, 1);
+    testing.expectEqual(4, img.data.length);
+    testing.expectEqual(1, img.width);
+    testing.expectEqual(1, img.height);
+  }
+</script>

src/browser/tests/intersection_observer/basic.html

@@ -25,6 +25,8 @@
         testing.expectEqual('number', typeof entry.intersectionRatio);
         testing.expectEqual('object', typeof entry.boundingClientRect);
         testing.expectEqual('object', typeof entry.intersectionRect);
+        testing.expectEqual('number', typeof entry.time);
+        testing.expectEqual(true, entry.time > 0);
 
         observer.disconnect();
     });