Merge pull request #1825 from sjhddh/fix-tracking-allocator-resize

fix: only increment TrackingAllocator reallocation_count on successful resizes

.github/actions/install/action.yml

@@ -13,7 +13,7 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.2.8'
+    default: 'v0.3.3'
   v8:
     description: 'v8 version to install'
     required: false

.github/workflows/e2e-integration-test.yml

@@ -63,6 +63,6 @@ jobs:
 
       - name: run end to end integration tests
         run: |
-          ./lightpanda serve & echo $! > LPD.pid
+          ./lightpanda serve --log_level error & echo $! > LPD.pid
           go run integration/main.go
           kill `cat LPD.pid`

.github/workflows/e2e-test.yml

@@ -117,15 +117,123 @@ jobs:
           BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
           kill `cat LPD.pid` `cat PROXY.id`
 
+  # e2e tests w/ web-bot-auth configuration on.
+  wba-demo-scripts:
+    name: wba-demo-scripts
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - run: echo "${{ secrets.WBA_PRIVATE_KEY_PEM }}" > private_key.pem
+
+      - name: run end to end tests
+        run: |
+          ./lightpanda serve \
+            --web_bot_auth_key_file private_key.pem \
+            --web_bot_auth_keyid ${{ vars.WBA_KEY_ID }} \
+            --web_bot_auth_domain ${{ vars.WBA_DOMAIN }} \
+            & echo $! > LPD.pid
+          go run runner/main.go
+          kill `cat LPD.pid`
+
+      - name: build proxy
+        run: |
+          cd proxy
+          go build
+
+      - name: run end to end tests through proxy
+        run: |
+          ./proxy/proxy & echo $! > PROXY.id
+          ./lightpanda serve \
+            --web_bot_auth_key_file private_key.pem \
+            --web_bot_auth_keyid ${{ vars.WBA_KEY_ID }} \
+            --web_bot_auth_domain ${{ vars.WBA_DOMAIN }} \
+            --http_proxy 'http://127.0.0.1:3000' \
+            & echo $! > LPD.pid
+          go run runner/main.go
+          kill `cat LPD.pid` `cat PROXY.id`
+
+      - name: run request interception through proxy
+        run: |
+          export PROXY_USERNAME=username PROXY_PASSWORD=password
+          ./proxy/proxy & echo $! > PROXY.id
+          ./lightpanda serve & echo $! > LPD.pid
+          URL=https://demo-browser.lightpanda.io/campfire-commerce/ node puppeteer/proxy_auth.js
+          BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
+          kill `cat LPD.pid` `cat PROXY.id`
+
+  wba-test:
+    name: wba-test
+    needs: zig-build-release
+
+    env:
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: echo "${{ secrets.WBA_PRIVATE_KEY_PEM }}" > private_key.pem
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run wba test
+        run: |
+          node webbotauth/validator.js &
+          VALIDATOR_PID=$!
+          sleep 2
+
+          ./lightpanda fetch http://127.0.0.1:8989/ \
+            --web_bot_auth_key_file private_key.pem \
+            --web_bot_auth_keyid ${{ vars.WBA_KEY_ID }} \
+            --web_bot_auth_domain ${{ vars.WBA_DOMAIN }}
+
+          wait $VALIDATOR_PID
+
   cdp-and-hyperfine-bench:
     name: cdp-and-hyperfine-bench
     needs: zig-build-release
 
     env:
-      MAX_MEMORY: 26000
+      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
@@ -150,22 +258,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: |
@@ -178,7 +317,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/wpt.yml

@@ -5,6 +5,7 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
   AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
+  AWS_CF_DISTRIBUTION: ${{ vars.AWS_CF_DISTRIBUTION }}
   LIGHTPANDA_DISABLE_TELEMETRY: true
 
 on:
@@ -15,11 +16,11 @@ on:
   workflow_dispatch:
 
 jobs:
-  wpt:
-    name: web platform tests json output
+  wpt-build-release:
+    name: zig build release
 
     runs-on: ubuntu-latest
-    timeout-minutes: 90
+    timeout-minutes: 15
 
     steps:
       - uses: actions/checkout@v6
@@ -30,11 +31,85 @@ jobs:
 
       - uses: ./.github/actions/install
 
-      - name: build wpt
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -- version
+      - 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 }})
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  wpt-build-runner:
+    name: build wpt runner
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: |
+          cd ./wptrunner
+          CGO_ENABLED=0 go build
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: wptrunner
+          path: |
+            wptrunner/wptrunner
+          retention-days: 1
+
+  run-wpt:
+    name: web platform tests json output
+    needs:
+      - wpt-build-release
+      - wpt-build-runner
+
+    # use a self host runner.
+    runs-on: lpd-bench-hetzner
+    timeout-minutes: 180
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: fork
+          repository: 'lightpanda-io/wpt'
+          fetch-depth: 0
+
+      # The hosts are configured manually on the self host runner.
+      # - name: create custom hosts
+      #   run: ./wpt make-hosts-file | sudo tee -a /etc/hosts
+
+      - name: generate manifest
+        run: ./wpt manifest
+
+      - name: download lightpanda release
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: download wptrunner
+        uses: actions/download-artifact@v4
+        with:
+          name: wptrunner
+
+      - run: chmod a+x ./wptrunner
 
       - name: run test with json output
-        run:  zig-out/bin/lightpanda-wpt --json > wpt.json
+        run: |
+          ./wpt serve 2> /dev/null & echo $! > WPT.pid
+          sleep 10s
+          ./wptrunner -lpd-path ./lightpanda -json -concurrency 10 -pool 3 > wpt.json
+          kill `cat WPT.pid`
 
       - name: write commit
         run: |
@@ -51,7 +126,7 @@ jobs:
 
   perf-fmt:
     name: perf-fmt
-    needs: wpt
+    needs: run-wpt
 
     runs-on: ubuntu-latest
     timeout-minutes: 15

.gitignore

@@ -1,11 +1,6 @@
-zig-cache
 /.zig-cache/
 /.lp-cache/
 zig-out
-/vendor/netsurf/out
-/vendor/libiconv/
 lightpanda.id
-/v8/
-/build/
 /src/html5ever/target/
 src/snapshot.bin

.gitmodules

@@ -1,15 +0,0 @@
-[submodule "tests/wpt"]
-	path = tests/wpt
-	url = https://github.com/lightpanda-io/wpt
-[submodule "vendor/nghttp2"]
-	path = vendor/nghttp2
-	url = https://github.com/nghttp2/nghttp2.git
-[submodule "vendor/zlib"]
-	path = vendor/zlib
-	url = https://github.com/madler/zlib.git
-[submodule "vendor/curl"]
-	path = vendor/curl
-	url = https://github.com/curl/curl.git
-[submodule "vendor/brotli"]
-	path = vendor/brotli
-	url = https://github.com/google/brotli

Dockerfile

@@ -3,7 +3,7 @@ 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.8
+ARG ZIG_V8=v0.3.3
 ARG TARGETPLATFORM
 
 RUN apt-get update -yq && \
@@ -36,10 +36,6 @@ RUN ZIG=$(grep '\.minimum_zig_version = "' "build.zig.zon" | cut -d'"' -f2) && \
     mv zig-${ARCH}-linux-${ZIG} /usr/local/lib && \
     ln -s /usr/local/lib/zig-${ARCH}-linux-${ZIG}/zig /usr/local/bin/zig
 
-# install deps
-RUN git submodule init && \
-    git submodule update --recursive
-
 # download and install v8
 RUN case $TARGETPLATFORM in \
     "linux/arm64") ARCH="aarch64" ;; \

Makefile

@@ -47,7 +47,7 @@ help:
 
 # $(ZIG) commands
 # ------------
-.PHONY: build build-v8-snapshot build-dev run run-release shell test bench wpt data end2end
+.PHONY: build build-v8-snapshot build-dev run run-release shell test bench data end2end
 
 ## Build v8 snapshot
 build-v8-snapshot:
@@ -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"
 
@@ -82,15 +82,6 @@ shell:
 	@printf "\033[36mBuilding shell...\033[0m\n"
 	@$(ZIG) build shell || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 
-## Run WPT tests
-wpt:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-
-wpt-summary:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-
 ## Test - `grep` is used to filter out the huge compile command on build
 ifeq ($(OS), macos)
 test:
@@ -111,13 +102,8 @@ end2end:
 # ------------
 .PHONY: install
 
-## Install and build dependencies for release
-install: install-submodule
+install: build
 
 data:
 	cd src/data && go run public_suffix_list_gen.go > public_suffix_list.zig
 
-## Init and update git submodule
-install-submodule:
-	@git submodule init && \
-	git submodule update

README.md

@@ -220,18 +220,6 @@ For **MacOS**, you need cmake and [Rust](https://rust-lang.org/tools/install/).
 brew install cmake
 ```
 
-### Install Git submodules
-
-The project uses git submodules for dependencies.
-
-To init or update the submodules in the `vendor/` directory:
-
-```
-make install-submodule
-```
-
-This is an alias for `git submodule init && git submodule update`.
-
 ### Build and run
 
 You an build the entire browser with `make build` or `make build-dev` for debug
@@ -281,35 +269,75 @@ make end2end
 Lightpanda is tested against the standardized [Web Platform
 Tests](https://web-platform-tests.org/).
 
-The relevant tests cases are committed in a [dedicated repository](https://github.com/lightpanda-io/wpt) which is fetched by the `make install-submodule` command.
-
-All the tests cases executed are located in the `tests/wpt` sub-directory.
+We use [a fork](https://github.com/lightpanda-io/wpt/tree/fork) including a custom
+[`testharnessreport.js`](https://github.com/lightpanda-io/wpt/commit/01a3115c076a3ad0c84849dbbf77a6e3d199c56f).
 
 For reference, you can easily execute a WPT test case with your browser via
 [wpt.live](https://wpt.live).
 
+#### Configure WPT HTTP server
+
+To run the test, you must clone the repository, configure the custom hosts and generate the
+`MANIFEST.json` file.
+
+Clone the repository with the `fork` branch.
+```
+git clone -b fork --depth=1 git@github.com:lightpanda-io/wpt.git
+```
+
+Enter into the `wpt/` dir.
+
+Install custom domains in your `/etc/hosts`
+```
+./wpt make-hosts-file | sudo tee -a /etc/hosts
+```
+
+Generate `MANIFEST.json`
+```
+./wpt manifest
+```
+Use the [WPT's setup
+guide](https://web-platform-tests.org/running-tests/from-local-system.html) for
+details.
+
 #### Run WPT test suite
 
-To run all the tests:
+An external [Go](https://go.dev) runner is provided by
+[github.com/lightpanda-io/demo/](https://github.com/lightpanda-io/demo/)
+repository, located into `wptrunner/` dir.
+You need to clone the project first.
+
+First start the WPT's HTTP server from your `wpt/` clone dir.
+```
+./wpt serve
+```
+
+Run a Lightpanda browser
 
 ```
-make wpt
+zig build run -- --insecure_disable_tls_host_verification
+```
+
+Then you can start the wptrunner from the Demo's clone dir:
+```
+cd wptrunner && go run .
 ```
 
 Or one specific test:
 
 ```
-make wpt Node-childNodes.html
+cd wptrunner && go run . Node-childNodes.html
 ```
 
-#### Add a new WPT test case
+`wptrunner` command accepts `--summary` and `--json` options modifying output.
+Also `--concurrency` define the concurrency limit.
 
-We add new relevant tests cases files when we implemented changes in Lightpanda.
+:warning: Running the whole test suite will take a long time. In this case,
+it's useful to build in `releaseFast` mode to make tests faster.
 
-To add a new test, copy the file you want from the [WPT
-repo](https://github.com/web-platform-tests/wpt) into the `tests/wpt` directory.
-
-:warning: Please keep the original directory tree structure of `tests/wpt`.
+```
+zig build -Doptimize=ReleaseFast run
+```
 
 ## Contributing
 

build.zig.zon

@@ -1,18 +1,35 @@
 .{
     .name = .browser,
-    .paths = .{""},
     .version = "0.0.0",
     .fingerprint = 0xda130f3af836cea0, // Changing this has security and trust implications.
     .minimum_zig_version = "0.15.2",
     .dependencies = .{
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/refs/tags/v0.2.8.tar.gz",
-            .hash = "v8-0.0.0-xddH63lfBADJ7UE2zAJ8nJIBnxoSiimXSaX6Q_M_7DS3",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/refs/tags/v0.3.3.tar.gz",
+            .hash = "v8-0.0.0-xddH6yx3BAAGD9jSoq_ttt_bk9MectTU44s_HZxxE5LD",
+        },
+        // .v8 = .{ .path = "../zig-v8-fork" },
+        .brotli = .{
+            // v1.2.0
+            .url = "https://github.com/google/brotli/archive/028fb5a23661f123017c060daa546b55cf4bde29.tar.gz",
+            .hash = "N-V-__8AAJudKgCQCuIiH6MJjAiIJHfg_tT_Ew-0vZwVkCo_",
+        },
+        .zlib = .{
+            .url = "https://github.com/madler/zlib/releases/download/v1.3.2/zlib-1.3.2.tar.gz",
+            .hash = "N-V-__8AAJ2cNgAgfBtAw33Bxfu1IWISDeKKSr3DAqoAysIJ",
+        },
+        .nghttp2 = .{
+            .url = "https://github.com/nghttp2/nghttp2/releases/download/v1.68.0/nghttp2-1.68.0.tar.gz",
+            .hash = "N-V-__8AAL15vQCI63ZL6Zaz5hJg6JTEgYXGbLnMFSnf7FT3",
         },
-        //.v8 = .{ .path = "../zig-v8-fork" },
         .@"boringssl-zig" = .{
             .url = "git+https://github.com/Syndica/boringssl-zig.git#c53df00d06b02b755ad88bbf4d1202ed9687b096",
             .hash = "boringssl-0.1.0-VtJeWehMAAA4RNnwRnzEvKcS9rjsR1QVRw1uJrwXxmVK",
         },
+        .curl = .{
+            .url = "https://github.com/curl/curl/releases/download/curl-8_18_0/curl-8.18.0.tar.gz",
+            .hash = "N-V-__8AALp9QAGn6CCHZ6fK_FfMyGtG824LSHYHHasM3w-y",
+        },
     },
+    .paths = .{""},
 }

src/App.zig

@@ -25,35 +25,38 @@ const Config = @import("Config.zig");
 const Snapshot = @import("browser/js/Snapshot.zig");
 const Platform = @import("browser/js/Platform.zig");
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
-const RobotStore = @import("browser/Robots.zig").RobotStore;
 
-pub const Http = @import("http/Http.zig");
+const Network = @import("network/Runtime.zig");
 pub const ArenaPool = @import("ArenaPool.zig");
 
 const App = @This();
 
-http: Http,
+network: Network,
 config: *const Config,
 platform: Platform,
 snapshot: Snapshot,
 telemetry: Telemetry,
 allocator: Allocator,
 arena_pool: ArenaPool,
-robots: RobotStore,
 app_dir_path: ?[]const u8,
-shutdown: bool = false,
 
 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.* = .{
+        .config = config,
+        .allocator = allocator,
+        .network = undefined,
+        .platform = undefined,
+        .snapshot = undefined,
+        .app_dir_path = undefined,
+        .telemetry = undefined,
+        .arena_pool = undefined,
+    };
 
-    app.robots = RobotStore.init(allocator);
-
-    app.http = try Http.init(allocator, &app.robots, config);
-    errdefer app.http.deinit();
+    app.network = try Network.init(allocator, config);
+    errdefer app.network.deinit();
 
     app.platform = try Platform.init();
     errdefer app.platform.deinit();
@@ -66,25 +69,24 @@ pub fn init(allocator: Allocator, config: *const Config) !*App {
     app.telemetry = try Telemetry.init(app, config.mode);
     errdefer app.telemetry.deinit();
 
-    app.arena_pool = ArenaPool.init(allocator);
+    app.arena_pool = ArenaPool.init(allocator, 512, 1024 * 16);
     errdefer app.arena_pool.deinit();
 
     return app;
 }
 
-pub fn deinit(self: *App) void {
-    if (@atomicRmw(bool, &self.shutdown, .Xchg, true, .monotonic)) {
-        return;
-    }
+pub fn shutdown(self: *const App) bool {
+    return self.network.shutdown.load(.acquire);
+}
 
+pub fn deinit(self: *App) void {
     const allocator = self.allocator;
     if (self.app_dir_path) |app_dir_path| {
         allocator.free(app_dir_path);
         self.app_dir_path = null;
     }
     self.telemetry.deinit();
-    self.robots.deinit();
-    self.http.deinit();
+    self.network.deinit();
     self.snapshot.deinit();
     self.platform.deinit();
     self.arena_pool.deinit();

src/ArenaPool.zig

@@ -29,18 +29,19 @@ 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 {
+pub fn init(allocator: Allocator, free_list_max: u16, retain_bytes: usize) 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),
+        .free_list_max = free_list_max,
+        .retain_bytes = retain_bytes,
+        .entry_pool = .init(allocator),
     };
 }
 
@@ -54,6 +55,9 @@ pub fn deinit(self: *ArenaPool) void {
 }
 
 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;
@@ -73,6 +77,12 @@ 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();
@@ -80,8 +90,123 @@ pub fn release(self: *ArenaPool, allocator: Allocator) void {
         return;
     }
 
-    _ = arena.reset(.{ .retain_with_limit = self.retain_bytes });
     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 });
+}
+
+const testing = std.testing;
+
+test "arena pool - basic acquire and use" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc = try pool.acquire();
+    const buf = try alloc.alloc(u8, 64);
+    @memset(buf, 0xAB);
+    try testing.expectEqual(@as(u8, 0xAB), buf[0]);
+
+    pool.release(alloc);
+}
+
+test "arena pool - reuse entry after release" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc1 = try pool.acquire();
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+
+    pool.release(alloc1);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+
+    // The same entry should be returned from the free list.
+    const alloc2 = try pool.acquire();
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+    try testing.expectEqual(alloc1.ptr, alloc2.ptr);
+
+    pool.release(alloc2);
+}
+
+test "arena pool - multiple concurrent arenas" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+    const a3 = try pool.acquire();
+
+    // All three must be distinct arenas.
+    try testing.expect(a1.ptr != a2.ptr);
+    try testing.expect(a2.ptr != a3.ptr);
+    try testing.expect(a1.ptr != a3.ptr);
+
+    _ = try a1.alloc(u8, 16);
+    _ = try a2.alloc(u8, 32);
+    _ = try a3.alloc(u8, 48);
+
+    pool.release(a1);
+    pool.release(a2);
+    pool.release(a3);
+
+    try testing.expectEqual(@as(u16, 3), pool.free_list_len);
+}
+
+test "arena pool - free list respects max limit" {
+    // Cap the free list at 1 so the second release discards its arena.
+    var pool = ArenaPool.init(testing.allocator, 1, 1024 * 16);
+    defer pool.deinit();
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+
+    pool.release(a1);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+
+    // The free list is full; a2's arena should be destroyed, not queued.
+    pool.release(a2);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+}
+
+test "arena pool - reset clears memory without releasing" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc = try pool.acquire();
+
+    const buf = try alloc.alloc(u8, 128);
+    @memset(buf, 0xFF);
+
+    // reset() frees arena memory but keeps the allocator in-flight.
+    pool.reset(alloc, 0);
+
+    // The free list must stay empty; the allocator was not released.
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+
+    // Allocating again through the same arena must still work.
+    const buf2 = try alloc.alloc(u8, 64);
+    @memset(buf2, 0x00);
+    try testing.expectEqual(@as(u8, 0x00), buf2[0]);
+
+    pool.release(alloc);
+}
+
+test "arena pool - deinit with entries in free list" {
+    // Verifies that deinit properly cleans up free-listed arenas (no leaks
+    // detected by the test allocator).
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+    _ = try a1.alloc(u8, 256);
+    _ = try a2.alloc(u8, 512);
+    pool.release(a1);
+    pool.release(a2);
+    try testing.expectEqual(@as(u16, 2), pool.free_list_len);
+
+    pool.deinit();
+}

src/Config.zig

@@ -23,13 +23,24 @@ const Allocator = std.mem.Allocator;
 const log = @import("log.zig");
 const dump = @import("browser/dump.zig");
 
+const WebBotAuthConfig = @import("network/WebBotAuth.zig").Config;
+
 pub const RunMode = enum {
     help,
     fetch,
     serve,
     version,
+    mcp,
 };
 
+pub const MAX_LISTENERS = 16;
+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,
@@ -52,56 +63,56 @@ pub fn deinit(self: *const Config, allocator: Allocator) void {
 
 pub fn tlsVerifyHost(self: *const Config) bool {
     return switch (self.mode) {
-        inline .serve, .fetch => |opts| opts.common.tls_verify_host,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_timeout orelse 5000,
         else => unreachable,
     };
 }
@@ -112,62 +123,106 @@ pub fn httpMaxRedirects(_: *const Config) u8 {
 
 pub fn httpMaxResponseSize(self: *const Config) ?usize {
     return switch (self.mode) {
-        inline .serve, .fetch => |opts| opts.common.http_max_response_size,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |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,
+        inline .serve, .fetch, .mcp => |opts| opts.common.user_agent_suffix,
         .help, .version => null,
     };
 }
 
+pub fn cdpTimeout(self: *const Config) usize {
+    return switch (self.mode) {
+        .serve => |opts| if (opts.timeout > 604_800) 604_800_000 else @as(usize, opts.timeout) * 1000,
+        else => unreachable,
+    };
+}
+
+pub fn webBotAuth(self: *const Config) ?WebBotAuthConfig {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| WebBotAuthConfig{
+            .key_file = opts.common.web_bot_auth_key_file orelse return null,
+            .keyid = opts.common.web_bot_auth_keyid orelse return null,
+            .domain = opts.common.web_bot_auth_domain orelse return null,
+        },
+        .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,
+    mcp: Mcp,
 };
 
 pub const Serve = struct {
     host: []const u8 = "127.0.0.1",
     port: u16 = 9222,
     timeout: u31 = 10,
-    max_connections: u16 = 16,
-    max_tabs_per_connection: u16 = 8,
-    max_memory_per_tab: u64 = 512 * 1024 * 1024,
-    max_pending_connections: u16 = 128,
+    cdp_max_connections: u16 = 16,
+    cdp_max_pending_connections: u16 = 128,
     common: Common = .{},
 };
 
+pub const Mcp = struct {
+    common: Common = .{},
+};
+
+pub const DumpFormat = enum {
+    html,
+    markdown,
+    wpt,
+    semantic_tree,
+    semantic_tree_text,
+};
+
 pub const Fetch = struct {
     url: [:0]const u8,
-    dump: bool = false,
+    dump_mode: ?DumpFormat = null,
     common: Common = .{},
-    withbase: bool = false,
+    with_base: bool = false,
+    with_frames: bool = false,
     strip: dump.Opts.Strip = .{},
 };
 
@@ -185,6 +240,10 @@ pub const Common = struct {
     log_format: ?log.Format = null,
     log_filter_scopes: ?[]log.Scope = null,
     user_agent_suffix: ?[]const u8 = null,
+
+    web_bot_auth_key_file: ?[]const u8 = null,
+    web_bot_auth_keyid: ?[]const u8 = null,
+    web_bot_auth_domain: ?[]const u8 = null,
 };
 
 /// Pre-formatted HTTP headers for reuse across Http and Client.
@@ -292,21 +351,30 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
         \\--user_agent_suffix
         \\                Suffix to append to the Lightpanda/X.Y User-Agent
         \\
+        \\--web_bot_auth_key_file
+        \\                Path to the Ed25519 private key PEM file.
+        \\
+        \\--web_bot_auth_keyid
+        \\                The JWK thumbprint of your public key.
+        \\
+        \\--web_bot_auth_domain
+        \\                Your domain e.g. yourdomain.com
     ;
 
     //                                                                     MAX_HELP_LEN|
     const usage =
         \\usage: {s} command [options] [URL]
         \\
-        \\Command can be either 'fetch', 'serve' or 'help'
+        \\Command can be either 'fetch', 'serve', 'mcp' or 'help'
         \\
         \\fetch command
         \\Fetches the specified URL
-        \\Example: {s} fetch --dump https://lightpanda.io/
+        \\Example: {s} fetch --dump html https://lightpanda.io/
         \\
         \\Options:
         \\--dump          Dumps document to stdout.
-        \\                Defaults to false.
+        \\                Argument must be 'html', 'markdown', 'semantic_tree', or 'semantic_tree_text'.
+        \\                Defaults to no dump.
         \\
         \\--strip_mode    Comma separated list of tag groups to remove from dump
         \\                the dump. e.g. --strip_mode js,css
@@ -317,6 +385,8 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
         \\
         \\--with_base     Add a <base> tag in dump. Defaults to false.
         \\
+        \\--with_frames   Includes the contents of iframes. Defaults to false.
+        \\
     ++ common_options ++
         \\
         \\serve command
@@ -333,21 +403,20 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
         \\--timeout       Inactivity timeout in seconds before disconnecting clients
         \\                Defaults to 10 (seconds). Limited to 604800 (1 week).
         \\
-        \\--max_connections
+        \\--cdp_max_connections
         \\                Maximum number of simultaneous CDP connections.
         \\                Defaults to 16.
         \\
-        \\--max_tabs      Maximum number of tabs per CDP connection.
-        \\                Defaults to 8.
-        \\
-        \\--max_tab_memory
-        \\                Maximum memory per tab in bytes.
-        \\                Defaults to 536870912 (512 MB).
-        \\
-        \\--max_pending_connections
+        \\--cdp_max_pending_connections
         \\                Maximum pending connections in the accept queue.
         \\                Defaults to 128.
         \\
+    ++ common_options ++
+        \\
+        \\mcp command
+        \\Starts an MCP (Model Context Protocol) server over stdio
+        \\Example: {s} mcp
+        \\
     ++ common_options ++
         \\
         \\version command
@@ -357,7 +426,7 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
         \\Displays this message
         \\
     ;
-    std.debug.print(usage, .{ self.exec_name, self.exec_name, self.exec_name, self.exec_name });
+    std.debug.print(usage, .{ self.exec_name, self.exec_name, self.exec_name, self.exec_name, self.exec_name });
     if (success) {
         return std.process.cleanExit();
     }
@@ -392,6 +461,8 @@ pub fn parseArgs(allocator: Allocator) !Config {
             return init(allocator, exec_name, .{ .help = false }) },
         .fetch => .{ .fetch = parseFetchArgs(allocator, &args) catch
             return init(allocator, exec_name, .{ .help = false }) },
+        .mcp => .{ .mcp = parseMcpArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
         .version => .{ .version = {} },
     };
     return init(allocator, exec_name, mode);
@@ -422,6 +493,10 @@ fn inferMode(opt: []const u8) ?RunMode {
         return .fetch;
     }
 
+    if (std.mem.eql(u8, opt, "--with_frames")) {
+        return .fetch;
+    }
+
     if (std.mem.eql(u8, opt, "--host")) {
         return .serve;
     }
@@ -479,53 +554,27 @@ fn parseServeArgs(
             continue;
         }
 
-        if (std.mem.eql(u8, "--max_connections", opt)) {
+        if (std.mem.eql(u8, "--cdp_max_connections", opt)) {
             const str = args.next() orelse {
-                log.fatal(.app, "missing argument value", .{ .arg = "--max_connections" });
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_connections" });
                 return error.InvalidArgument;
             };
 
-            serve.max_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
-                log.fatal(.app, "invalid argument value", .{ .arg = "--max_connections", .err = err });
+            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, "--max_tabs", opt)) {
+        if (std.mem.eql(u8, "--cdp_max_pending_connections", opt)) {
             const str = args.next() orelse {
-                log.fatal(.app, "missing argument value", .{ .arg = "--max_tabs" });
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_pending_connections" });
                 return error.InvalidArgument;
             };
 
-            serve.max_tabs_per_connection = std.fmt.parseInt(u16, str, 10) catch |err| {
-                log.fatal(.app, "invalid argument value", .{ .arg = "--max_tabs", .err = err });
-                return error.InvalidArgument;
-            };
-            continue;
-        }
-
-        if (std.mem.eql(u8, "--max_tab_memory", opt)) {
-            const str = args.next() orelse {
-                log.fatal(.app, "missing argument value", .{ .arg = "--max_tab_memory" });
-                return error.InvalidArgument;
-            };
-
-            serve.max_memory_per_tab = std.fmt.parseInt(u64, str, 10) catch |err| {
-                log.fatal(.app, "invalid argument value", .{ .arg = "--max_tab_memory", .err = err });
-                return error.InvalidArgument;
-            };
-            continue;
-        }
-
-        if (std.mem.eql(u8, "--max_pending_connections", opt)) {
-            const str = args.next() orelse {
-                log.fatal(.app, "missing argument value", .{ .arg = "--max_pending_connections" });
-                return error.InvalidArgument;
-            };
-
-            serve.max_pending_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
-                log.fatal(.app, "invalid argument value", .{ .arg = "--max_pending_connections", .err = err });
+            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;
@@ -542,19 +591,48 @@ fn parseServeArgs(
     return serve;
 }
 
+fn parseMcpArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Mcp {
+    var mcp: Mcp = .{};
+
+    while (args.next()) |opt| {
+        if (try parseCommonArg(allocator, opt, args, &mcp.common)) {
+            continue;
+        }
+
+        log.fatal(.mcp, "unknown argument", .{ .mode = "mcp", .arg = opt });
+        return error.UnkownOption;
+    }
+
+    return mcp;
+}
+
 fn parseFetchArgs(
     allocator: Allocator,
     args: *std.process.ArgIterator,
 ) !Fetch {
-    var fetch_dump: bool = false;
-    var withbase: bool = false;
+    var dump_mode: ?DumpFormat = null;
+    var with_base: bool = false;
+    var with_frames: 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)) {
-            fetch_dump = true;
+            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;
         }
 
@@ -568,7 +646,12 @@ fn parseFetchArgs(
         }
 
         if (std.mem.eql(u8, "--with_base", opt)) {
-            withbase = true;
+            with_base = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--with_frames", opt)) {
+            with_frames = true;
             continue;
         }
 
@@ -621,10 +704,11 @@ fn parseFetchArgs(
 
     return .{
         .url = url.?,
-        .dump = fetch_dump,
+        .dump_mode = dump_mode,
         .strip = strip,
         .common = common,
-        .withbase = withbase,
+        .with_base = with_base,
+        .with_frames = with_frames,
     };
 }
 
@@ -796,5 +880,32 @@ fn parseCommonArg(
         return true;
     }
 
+    if (std.mem.eql(u8, "--web_bot_auth_key_file", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--web_bot_auth_key_file" });
+            return error.InvalidArgument;
+        };
+        common.web_bot_auth_key_file = try allocator.dupe(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--web_bot_auth_keyid", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--web_bot_auth_keyid" });
+            return error.InvalidArgument;
+        };
+        common.web_bot_auth_keyid = try allocator.dupe(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--web_bot_auth_domain", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--web_bot_auth_domain" });
+            return error.InvalidArgument;
+        };
+        common.web_bot_auth_domain = try allocator.dupe(u8, str);
+        return true;
+    }
+
     return false;
 }

src/Notification.zig

@@ -21,7 +21,7 @@ const lp = @import("lightpanda");
 
 const log = @import("log.zig");
 const Page = @import("browser/Page.zig");
-const Transfer = @import("http/Client.zig").Transfer;
+const Transfer = @import("browser/HttpClient.zig").Transfer;
 
 const Allocator = std.mem.Allocator;
 
@@ -73,6 +73,7 @@ const EventListeners = struct {
     page_navigated: List = .{},
     page_network_idle: List = .{},
     page_network_almost_idle: List = .{},
+    page_frame_created: List = .{},
     http_request_fail: List = .{},
     http_request_start: List = .{},
     http_request_intercept: List = .{},
@@ -89,6 +90,7 @@ const Events = union(enum) {
     page_navigated: *const PageNavigated,
     page_network_idle: *const PageNetworkIdle,
     page_network_almost_idle: *const PageNetworkAlmostIdle,
+    page_frame_created: *const PageFrameCreated,
     http_request_fail: *const RequestFail,
     http_request_start: *const RequestStart,
     http_request_intercept: *const RequestIntercept,
@@ -102,24 +104,36 @@ const EventType = std.meta.FieldEnum(Events);
 pub const PageRemove = struct {};
 
 pub const PageNavigate = struct {
-    req_id: usize,
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
     url: [:0]const u8,
     opts: Page.NavigateOpts,
 };
 
 pub const PageNavigated = struct {
-    req_id: usize,
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
     url: [:0]const u8,
     opts: Page.NavigatedOpts,
 };
 
 pub const PageNetworkIdle = struct {
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
 };
 
 pub const PageNetworkAlmostIdle = struct {
+    req_id: u32,
+    frame_id: u32,
+    timestamp: u64,
+};
+
+pub const PageFrameCreated = struct {
+    frame_id: u32,
+    parent_id: u32,
     timestamp: u64,
 };
 
@@ -305,6 +319,7 @@ test "Notification" {
 
     // noop
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 4,
         .url = undefined,
@@ -315,6 +330,7 @@ test "Notification" {
 
     try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 4,
         .url = undefined,
@@ -324,6 +340,7 @@ test "Notification" {
 
     notifier.unregisterAll(&tc);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 10,
         .url = undefined,
@@ -334,23 +351,25 @@ test "Notification" {
     try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
     try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 10,
         .url = undefined,
         .opts = .{},
     });
-    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 6, .url = undefined, .opts = .{} });
+    notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 6, .url = undefined, .opts = .{} });
     try testing.expectEqual(14, tc.page_navigate);
     try testing.expectEqual(6, tc.page_navigated);
 
     notifier.unregisterAll(&tc);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 100,
         .url = undefined,
         .opts = .{},
     });
-    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+    notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
     try testing.expectEqual(14, tc.page_navigate);
     try testing.expectEqual(6, tc.page_navigated);
 
@@ -358,27 +377,27 @@ test "Notification" {
         // unregister
         try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
         try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(1006, tc.page_navigated);
 
         notifier.unregister(.page_navigate, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
 
         notifier.unregister(.page_navigated, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
 
         // already unregistered, try anyways
         notifier.unregister(.page_navigated, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
     }

src/SemanticTree.zig

@@ -0,0 +1,450 @@
+// 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.  See <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const lp = @import("lightpanda");
+const log = @import("log.zig");
+const isAllWhitespace = @import("string.zig").isAllWhitespace;
+const Page = lp.Page;
+const interactive = @import("browser/interactive.zig");
+
+const CData = @import("browser/webapi/CData.zig");
+const Element = @import("browser/webapi/Element.zig");
+const Node = @import("browser/webapi/Node.zig");
+const AXNode = @import("cdp/AXNode.zig");
+const CDPNode = @import("cdp/Node.zig");
+
+const Self = @This();
+
+dom_node: *Node,
+registry: *CDPNode.Registry,
+page: *Page,
+arena: std.mem.Allocator,
+prune: bool = false,
+
+pub fn jsonStringify(self: @This(), jw: *std.json.Stringify) error{WriteFailed}!void {
+    var visitor = JsonVisitor{ .jw = jw, .tree = self };
+    var xpath_buffer: std.ArrayList(u8) = .{};
+    const listener_targets = interactive.buildListenerTargetMap(self.page, self.arena) catch |err| {
+        log.err(.app, "listener map failed", .{ .err = err });
+        return error.WriteFailed;
+    };
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets) catch |err| {
+        log.err(.app, "semantic tree json dump failed", .{ .err = err });
+        return error.WriteFailed;
+    };
+}
+
+pub fn textStringify(self: @This(), writer: *std.Io.Writer) error{WriteFailed}!void {
+    var visitor = TextVisitor{ .writer = writer, .tree = self, .depth = 0 };
+    var xpath_buffer: std.ArrayList(u8) = .empty;
+    const listener_targets = interactive.buildListenerTargetMap(self.page, self.arena) catch |err| {
+        log.err(.app, "listener map failed", .{ .err = err });
+        return error.WriteFailed;
+    };
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets) catch |err| {
+        log.err(.app, "semantic tree text dump failed", .{ .err = err });
+        return error.WriteFailed;
+    };
+}
+
+const OptionData = struct {
+    value: []const u8,
+    text: []const u8,
+    selected: bool,
+};
+
+const NodeData = struct {
+    id: u32,
+    axn: AXNode,
+    role: []const u8,
+    name: ?[]const u8,
+    value: ?[]const u8,
+    options: ?[]OptionData = null,
+    xpath: []const u8,
+    is_interactive: bool,
+    node_name: []const u8,
+};
+
+fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap) !void {
+    // 1. Skip non-content nodes
+    if (node.is(Element)) |el| {
+        const tag = el.getTag();
+        if (tag.isMetadata() or tag == .svg) return;
+
+        // We handle options/optgroups natively inside their parents, skip them in the general walk
+        if (tag == .datalist or tag == .option or tag == .optgroup) return;
+
+        // Check visibility using the engine's checkVisibility which handles CSS display: none
+        if (!el.checkVisibility(self.page)) {
+            return;
+        }
+
+        if (el.is(Element.Html)) |html_el| {
+            if (html_el.getHidden()) return;
+        }
+    } else if (node.is(CData.Text)) |text_node| {
+        const text = text_node.getWholeText();
+        if (isAllWhitespace(text)) {
+            return;
+        }
+    } else if (node._type != .document and node._type != .document_fragment) {
+        return;
+    }
+
+    const cdp_node = try self.registry.register(node);
+    const axn = AXNode.fromNode(node);
+    const role = try axn.getRole();
+
+    var is_interactive = false;
+    var value: ?[]const u8 = null;
+    var options: ?[]OptionData = null;
+    var node_name: []const u8 = "text";
+
+    if (node.is(Element)) |el| {
+        node_name = el.getTagNameLower();
+
+        if (el.is(Element.Html.Input)) |input| {
+            value = input.getValue();
+            if (el.getAttributeSafe(comptime lp.String.wrap("list"))) |list_id| {
+                options = try extractDataListOptions(list_id, self.page, self.arena);
+            }
+        } else if (el.is(Element.Html.TextArea)) |textarea| {
+            value = textarea.getValue();
+        } else if (el.is(Element.Html.Select)) |select| {
+            value = select.getValue(self.page);
+            options = try extractSelectOptions(el.asNode(), self.page, self.arena);
+        }
+
+        if (el.is(Element.Html)) |html_el| {
+            if (interactive.classifyInteractivity(el, html_el, listener_targets) != null) {
+                is_interactive = true;
+            }
+        }
+    } else if (node._type == .document or node._type == .document_fragment) {
+        node_name = "root";
+    }
+
+    const initial_xpath_len = xpath_buffer.items.len;
+    try appendXPathSegment(node, xpath_buffer.writer(self.arena), index);
+    const xpath = xpath_buffer.items;
+
+    var name = try axn.getName(self.page, self.arena);
+
+    const has_explicit_label = if (node.is(Element)) |el|
+        el.getAttributeSafe(.wrap("aria-label")) != null or el.getAttributeSafe(.wrap("title")) != null
+    else
+        false;
+
+    const structural = isStructuralRole(role);
+
+    // Filter out computed concatenated names for generic containers without explicit labels.
+    // This prevents token bloat and ensures their StaticText children aren't incorrectly pruned.
+    // We ignore interactivity because a generic wrapper with an event listener still shouldn't hoist all text.
+    if (name != null and structural and !has_explicit_label) {
+        name = null;
+    }
+
+    var data = NodeData{
+        .id = cdp_node.id,
+        .axn = axn,
+        .role = role,
+        .name = name,
+        .value = value,
+        .options = options,
+        .xpath = xpath,
+        .is_interactive = is_interactive,
+        .node_name = node_name,
+    };
+
+    var should_visit = true;
+    if (self.prune) {
+        if (structural and !is_interactive and !has_explicit_label) {
+            should_visit = false;
+        }
+
+        if (std.mem.eql(u8, role, "StaticText") and node._parent != null) {
+            if (parent_name != null and name != null and std.mem.indexOf(u8, parent_name.?, name.?) != null) {
+                should_visit = false;
+            }
+        }
+    }
+
+    var did_visit = false;
+    var should_walk_children = true;
+    if (should_visit) {
+        should_walk_children = try visitor.visit(node, &data);
+        did_visit = true; // Always true if should_visit was true, because visit() executed and opened structures
+    } else {
+        // If we skip the node, we must NOT tell the visitor to close it later
+        did_visit = false;
+    }
+
+    if (should_walk_children) {
+        // If we are printing this node normally OR skipping it and unrolling its children,
+        // we walk the children iterator.
+        var it = node.childrenIterator();
+        var tag_counts = std.StringArrayHashMap(usize).init(self.arena);
+        while (it.next()) |child| {
+            var tag: []const u8 = "text()";
+            if (child.is(Element)) |el| {
+                tag = el.getTagNameLower();
+            }
+
+            const gop = try tag_counts.getOrPut(tag);
+            if (!gop.found_existing) {
+                gop.value_ptr.* = 0;
+            }
+            gop.value_ptr.* += 1;
+
+            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets);
+        }
+    }
+
+    if (did_visit) {
+        try visitor.leave();
+    }
+
+    xpath_buffer.shrinkRetainingCapacity(initial_xpath_len);
+}
+
+fn extractSelectOptions(node: *Node, page: *Page, arena: std.mem.Allocator) ![]OptionData {
+    var options = std.ArrayListUnmanaged(OptionData){};
+    var it = node.childrenIterator();
+    while (it.next()) |child| {
+        if (child.is(Element)) |el| {
+            if (el.getTag() == .option) {
+                if (el.is(Element.Html.Option)) |opt| {
+                    const text = opt.getText(page);
+                    const value = opt.getValue(page);
+                    const selected = opt.getSelected();
+                    try options.append(arena, .{ .text = text, .value = value, .selected = selected });
+                }
+            } else if (el.getTag() == .optgroup) {
+                var group_it = child.childrenIterator();
+                while (group_it.next()) |group_child| {
+                    if (group_child.is(Element.Html.Option)) |opt| {
+                        const text = opt.getText(page);
+                        const value = opt.getValue(page);
+                        const selected = opt.getSelected();
+                        try options.append(arena, .{ .text = text, .value = value, .selected = selected });
+                    }
+                }
+            }
+        }
+    }
+    return options.toOwnedSlice(arena);
+}
+
+fn extractDataListOptions(list_id: []const u8, page: *Page, arena: std.mem.Allocator) !?[]OptionData {
+    if (page.document.getElementById(list_id, page)) |referenced_el| {
+        if (referenced_el.getTag() == .datalist) {
+            return try extractSelectOptions(referenced_el.asNode(), page, arena);
+        }
+    }
+    return null;
+}
+
+fn appendXPathSegment(node: *Node, writer: anytype, index: usize) !void {
+    if (node.is(Element)) |el| {
+        const tag = el.getTagNameLower();
+        try std.fmt.format(writer, "/{s}[{d}]", .{ tag, index });
+    } else if (node.is(CData.Text)) |_| {
+        try std.fmt.format(writer, "/text()[{d}]", .{index});
+    }
+}
+
+const JsonVisitor = struct {
+    jw: *std.json.Stringify,
+    tree: Self,
+
+    pub fn visit(self: *JsonVisitor, node: *Node, data: *NodeData) !bool {
+        try self.jw.beginObject();
+
+        try self.jw.objectField("nodeId");
+        try self.jw.write(try std.fmt.allocPrint(self.tree.arena, "{d}", .{data.id}));
+
+        try self.jw.objectField("backendDOMNodeId");
+        try self.jw.write(data.id);
+
+        try self.jw.objectField("nodeName");
+        try self.jw.write(data.node_name);
+
+        try self.jw.objectField("xpath");
+        try self.jw.write(data.xpath);
+
+        if (node.is(Element)) |el| {
+            try self.jw.objectField("nodeType");
+            try self.jw.write(1);
+
+            try self.jw.objectField("isInteractive");
+            try self.jw.write(data.is_interactive);
+
+            try self.jw.objectField("role");
+            try self.jw.write(data.role);
+
+            if (data.name) |name| {
+                if (name.len > 0) {
+                    try self.jw.objectField("name");
+                    try self.jw.write(name);
+                }
+            }
+
+            if (data.value) |value| {
+                try self.jw.objectField("value");
+                try self.jw.write(value);
+            }
+
+            if (el._attributes) |attrs| {
+                try self.jw.objectField("attributes");
+                try self.jw.beginObject();
+                var iter = attrs.iterator();
+                while (iter.next()) |attr| {
+                    try self.jw.objectField(attr._name.str());
+                    try self.jw.write(attr._value.str());
+                }
+                try self.jw.endObject();
+            }
+
+            if (data.options) |options| {
+                try self.jw.objectField("options");
+                try self.jw.beginArray();
+                for (options) |opt| {
+                    try self.jw.beginObject();
+                    try self.jw.objectField("value");
+                    try self.jw.write(opt.value);
+                    try self.jw.objectField("text");
+                    try self.jw.write(opt.text);
+                    try self.jw.objectField("selected");
+                    try self.jw.write(opt.selected);
+                    try self.jw.endObject();
+                }
+                try self.jw.endArray();
+            }
+        } else if (node.is(CData.Text)) |text_node| {
+            try self.jw.objectField("nodeType");
+            try self.jw.write(3);
+            try self.jw.objectField("nodeValue");
+            try self.jw.write(text_node.getWholeText());
+        } else {
+            try self.jw.objectField("nodeType");
+            try self.jw.write(9);
+        }
+
+        try self.jw.objectField("children");
+        try self.jw.beginArray();
+
+        if (data.options != null) {
+            // Signal to not walk children, as we handled them natively
+            return false;
+        }
+
+        return true;
+    }
+
+    pub fn leave(self: *JsonVisitor) !void {
+        try self.jw.endArray();
+        try self.jw.endObject();
+    }
+};
+
+fn isStructuralRole(role: []const u8) bool {
+    const structural_roles = std.StaticStringMap(void).initComptime(.{
+        .{ "none", {} },
+        .{ "generic", {} },
+        .{ "InlineTextBox", {} },
+        .{ "banner", {} },
+        .{ "navigation", {} },
+        .{ "main", {} },
+        .{ "list", {} },
+        .{ "listitem", {} },
+        .{ "table", {} },
+        .{ "rowgroup", {} },
+        .{ "row", {} },
+        .{ "cell", {} },
+        .{ "region", {} },
+    });
+    return structural_roles.has(role);
+}
+
+const TextVisitor = struct {
+    writer: *std.Io.Writer,
+    tree: Self,
+    depth: usize,
+
+    pub fn visit(self: *TextVisitor, node: *Node, data: *NodeData) !bool {
+        // Format: "  [12] link: Hacker News (value)"
+        for (0..(self.depth * 2)) |_| {
+            try self.writer.writeByte(' ');
+        }
+        try self.writer.print("[{d}] {s}: ", .{ data.id, data.role });
+
+        if (data.name) |n| {
+            if (n.len > 0) {
+                try self.writer.writeAll(n);
+            }
+        } else if (node.is(CData.Text)) |text_node| {
+            const trimmed = std.mem.trim(u8, text_node.getWholeText(), " \t\r\n");
+            if (trimmed.len > 0) {
+                try self.writer.writeAll(trimmed);
+            }
+        }
+
+        if (data.value) |v| {
+            if (v.len > 0) {
+                try self.writer.print(" (value: {s})", .{v});
+            }
+        }
+
+        if (data.options) |options| {
+            try self.writer.writeAll(" options: [");
+            for (options, 0..) |opt, i| {
+                if (i > 0) try self.writer.writeAll(", ");
+                try self.writer.print("'{s}'", .{opt.value});
+                if (opt.selected) {
+                    try self.writer.writeAll(" (selected)");
+                }
+            }
+            try self.writer.writeAll("]\n");
+            self.depth += 1;
+            return false; // Native handling complete, do not walk children
+        }
+
+        try self.writer.writeByte('\n');
+        self.depth += 1;
+
+        // If this is a leaf-like semantic node and we already have a name,
+        // skip children to avoid redundant StaticText or noise.
+        const is_leaf_semantic = std.mem.eql(u8, data.role, "link") or
+            std.mem.eql(u8, data.role, "button") or
+            std.mem.eql(u8, data.role, "heading") or
+            std.mem.eql(u8, data.role, "code");
+        if (is_leaf_semantic and data.name != null and data.name.?.len > 0) {
+            return false;
+        }
+
+        return true;
+    }
+
+    pub fn leave(self: *TextVisitor) !void {
+        if (self.depth > 0) {
+            self.depth -= 1;
+        }
+    }
+};

src/TestHTTPServer.zig

@@ -17,6 +17,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const URL = @import("browser/URL.zig");
 
 const TestHTTPServer = @This();
 
@@ -97,7 +98,10 @@ fn handleConnection(self: *TestHTTPServer, conn: std.net.Server.Connection) !voi
 }
 
 pub fn sendFile(req: *std.http.Server.Request, file_path: []const u8) !void {
-    var file = std.fs.cwd().openFile(file_path, .{}) catch |err| switch (err) {
+    var url_buf: [1024]u8 = undefined;
+    var fba = std.heap.FixedBufferAllocator.init(&url_buf);
+    const unescaped_file_path = try URL.unescape(fba.allocator(), file_path);
+    var file = std.fs.cwd().openFile(unescaped_file_path, .{}) catch |err| switch (err) {
         error.FileNotFound => return req.respond("server error", .{ .status = .not_found }),
         else => return err,
     };

src/browser/Browser.zig

@@ -24,9 +24,9 @@ const ArenaAllocator = std.heap.ArenaAllocator;
 const js = @import("js/js.zig");
 const log = @import("../log.zig");
 const App = @import("../App.zig");
+const HttpClient = @import("HttpClient.zig");
 
 const ArenaPool = App.ArenaPool;
-const HttpClient = App.Http.Client;
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
@@ -44,13 +44,10 @@ session: ?Session,
 allocator: Allocator,
 arena_pool: *ArenaPool,
 http_client: *HttpClient,
-call_arena: ArenaAllocator,
-page_arena: ArenaAllocator,
-session_arena: ArenaAllocator,
-transfer_arena: ArenaAllocator,
 
 const InitOpts = struct {
     env: js.Env.InitOpts = .{},
+    http_client: *HttpClient,
 };
 
 pub fn init(app: *App, opts: InitOpts) !Browser {
@@ -65,21 +62,13 @@ pub fn init(app: *App, opts: InitOpts) !Browser {
         .session = null,
         .allocator = allocator,
         .arena_pool = &app.arena_pool,
-        .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),
+        .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();
 }
 
 pub fn newSession(self: *Browser, notification: *Notification) !*Session {
@@ -94,24 +83,33 @@ 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.memoryPressureNotification(.critical);
     }
 }
 
-pub fn runMicrotasks(self: *const Browser) void {
+pub fn runMicrotasks(self: *Browser) void {
     self.env.runMicrotasks();
 }
 
 pub fn runMacrotasks(self: *Browser) !?u64 {
-    return try self.env.runMacrotasks();
+    const env = &self.env;
+
+    const time_to_next = try self.env.runMacrotasks();
+    env.pumpMessageLoop();
+
+    // either of the above could have queued more microtasks
+    env.runMicrotasks();
+
+    return time_to_next;
 }
 
-pub fn runMessageLoop(self: *const Browser) void {
-    while (self.env.pumpMessageLoop()) {
-        if (comptime IS_DEBUG) {
-            log.debug(.browser, "pumpMessageLoop", .{});
-        }
-    }
+pub fn hasBackgroundTasks(self: *Browser) bool {
+    return self.env.hasBackgroundTasks();
+}
+pub fn waitForBackgroundTasks(self: *Browser) void {
+    self.env.waitForBackgroundTasks();
+}
+
+pub fn runIdleTasks(self: *const Browser) void {
     self.env.runIdleTasks();
 }

src/browser/EventManager.zig

@@ -28,6 +28,7 @@ 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;
 
@@ -55,7 +56,12 @@ pub const EventManager = @This();
 
 page: *Page,
 arena: Allocator,
+// Used as an optimization in Page._documentIsComplete. If we know there are no
+// 'load' listeners in the document, we can skip dispatching the per-resource
+// 'load' event (e.g. amazon product page has no listener and ~350 resources)
+has_dom_load_listener: bool,
 listener_pool: std.heap.MemoryPool(Listener),
+ignore_list: std.ArrayList(*Listener),
 list_pool: std.heap.MemoryPool(std.DoublyLinkedList),
 lookup: std.HashMapUnmanaged(
     EventKey,
@@ -66,15 +72,17 @@ lookup: std.HashMapUnmanaged(
 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,
+        .ignore_list = .{},
+        .list_pool = .init(arena),
+        .listener_pool = .init(arena),
         .dispatch_depth = 0,
         .deferred_removals = .{},
+        .has_dom_load_listener = false,
     };
 }
 
@@ -105,6 +113,10 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
     // Allocate the type string we'll use in both listener and key
     const type_string = try String.init(self.arena, typ, .{});
 
+    if (type_string.eql(comptime .wrap("load")) and target._type == .node) {
+        self.has_dom_load_listener = true;
+    }
+
     const gop = try self.lookup.getOrPut(self.arena, .{
         .type_string = type_string,
         .event_target = @intFromPtr(target),
@@ -145,6 +157,11 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
     };
     // append the listener to the list of listeners for this target
     gop.value_ptr.*.append(&listener.node);
+
+    // Track load listeners for script execution ignore list
+    if (type_string.eql(comptime .wrap("load"))) {
+        try self.ignore_list.append(self.arena, listener);
+    }
 }
 
 pub fn remove(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, use_capture: bool) void {
@@ -157,6 +174,10 @@ pub fn remove(self: *EventManager, target: *EventTarget, typ: []const u8, callba
     }
 }
 
+pub fn clearIgnoreList(self: *EventManager) void {
+    self.ignore_list.clearRetainingCapacity();
+}
+
 // 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.
@@ -168,42 +189,31 @@ const DispatchError = error{
     ExecutionError,
     JsException,
 };
+
+pub const DispatchOpts = struct {
+    // A "load" event triggered by a script (in ScriptManager) should not trigger
+    // a "load" listener added within that script. Therefore, any "load" listener
+    // that we add go into an ignore list until after the script finishes executing.
+    // The ignore list is only checked when apply_ignore  == true, which is only
+    // set by the ScriptManager when raising the script's "load" event.
+    apply_ignore: bool = false,
+};
+
 pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) DispatchError!void {
+    return self.dispatchOpts(target, event, .{});
+}
+
+pub fn dispatchOpts(self: *EventManager, target: *EventTarget, event: *Event, comptime opts: DispatchOpts) DispatchError!void {
+    event.acquireRef();
+    defer event.deinit(false, self.page._session);
+
     if (comptime IS_DEBUG) {
         log.debug(.event, "eventManager.dispatch", .{ .type = event._type_string.str(), .bubbles = event._bubbles });
     }
 
-    event._target = target;
-    event._dispatch_target = target; // Store original target for composedPath()
-    var was_handled = false;
-
-    defer if (was_handled) {
-        var ls: js.Local.Scope = undefined;
-        self.page.js.localScope(&ls);
-        defer ls.deinit();
-        ls.local.runMicrotasks();
-    };
-
     switch (target._type) {
-        .node => |node| try self.dispatchNode(node, event, &was_handled),
-        .xhr,
-        .window,
-        .abort_signal,
-        .media_query_list,
-        .message_port,
-        .text_track_cue,
-        .navigation,
-        .screen,
-        .screen_orientation,
-        .visual_viewport,
-        .generic,
-        => {
-            const list = self.lookup.get(.{
-                .event_target = @intFromPtr(target),
-                .type_string = event._type_string,
-            }) orelse return;
-            try self.dispatchAll(list, target, event, &was_handled);
-        },
+        .node => |node| try self.dispatchNode(node, event, opts),
+        else => try self.dispatchDirect(target, event, null, .{ .context = "dispatch" }),
     }
 }
 
@@ -212,13 +222,22 @@ pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) Dispat
 // property is just a shortcut for calling addEventListener, but they are distinct.
 // An event set via property cannot be removed by removeEventListener. If you
 // set both the property and add a listener, they both execute.
-const DispatchWithFunctionOptions = struct {
+const DispatchDirectOptions = struct {
     context: []const u8,
     inject_target: bool = true,
 };
-pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *Event, function_: ?js.Function, comptime opts: DispatchWithFunctionOptions) !void {
+
+// Direct dispatch for non-DOM targets (Window, XHR, AbortSignal) or DOM nodes with
+// property handlers. No propagation - just calls the handler and registered listeners.
+// Handler can be: null, ?js.Function.Global, ?js.Function.Temp, or js.Function
+pub fn dispatchDirect(self: *EventManager, target: *EventTarget, event: *Event, handler: anytype, comptime opts: DispatchDirectOptions) !void {
+    const page = self.page;
+
+    event.acquireRef();
+    defer event.deinit(false, page._session);
+
     if (comptime IS_DEBUG) {
-        log.debug(.event, "dispatchWithFunction", .{ .type = event._type_string.str(), .context = opts.context, .has_function = function_ != null });
+        log.debug(.event, "dispatchDirect", .{ .type = event._type_string, .context = opts.context });
     }
 
     if (comptime opts.inject_target) {
@@ -227,14 +246,15 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
     }
 
     var was_dispatched = false;
-    defer if (was_dispatched) {
-        var ls: js.Local.Scope = undefined;
-        self.page.js.localScope(&ls);
-        defer ls.deinit();
-        ls.local.runMicrotasks();
-    };
 
-    if (function_) |func| {
+    var ls: js.Local.Scope = undefined;
+    page.js.localScope(&ls);
+    defer {
+        ls.local.runMicrotasks();
+        ls.deinit();
+    }
+
+    if (getFunction(handler, &ls.local)) |func| {
         event._current_target = target;
         if (func.callWithThis(void, target, .{event})) {
             was_dispatched = true;
@@ -244,121 +264,15 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
         }
     }
 
+    // listeners reigstered via addEventListener
     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");
-
-    // Defer runs even on early return - ensures event phase is reset
-    // and default actions execute (unless prevented)
-    defer {
-        event._event_phase = .none;
-
-        // 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| {
-                log.warn(.event, "page.click", .{ .err = err });
-            };
-        } else if (event._type_string.eqlSlice("keydown")) {
-            self.page.handleKeydown(target, event) catch |err| {
-                log.warn(.event, "page.keydown", .{ .err = err });
-            };
-        }
-    }
-
-    var path_len: usize = 0;
-    var path_buffer: [128]*EventTarget = undefined;
-
-    var node: ?*Node = target;
-    while (node) |n| {
-        if (path_len >= path_buffer.len) break;
-        path_buffer[path_len] = n.asEventTarget();
-        path_len += 1;
-
-        // Check if this node is a shadow root
-        if (n.is(ShadowRoot)) |shadow| {
-            event._needs_retargeting = true;
-
-            // If event is not composed, stop at shadow boundary
-            if (!event._composed) {
-                break;
-            }
-
-            // Otherwise, jump to the shadow host and continue
-            node = shadow._host.asNode();
-            continue;
-        }
-
-        node = n._parent;
-    }
-
-    // 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_len += 1;
-    }
-
-    const path = path_buffer[0..path_len];
-
-    // Phase 1: Capturing phase (root → target, excluding target)
-    // This happens for all events, regardless of bubbling
-    event._event_phase = .capturing_phase;
-    var i: usize = path_len;
-    while (i > 1) {
-        i -= 1;
-        const current_target = path[i];
-        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;
-            }
-        }
-    }
-
-    // Phase 2: At target
-    event._event_phase = .at_target;
-    const target_et = target.asEventTarget();
-    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;
-        }
-    }
-
-    // Phase 3: Bubbling phase (target → root, excluding target)
-    // This only happens if the event bubbles
-    if (event._bubbles) {
-        event._event_phase = .bubbling_phase;
-        for (path[1..]) |current_target| {
-            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;
-                }
-            }
-        }
-    }
-}
-
-fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, comptime capture_only: ?bool) !void {
-    const page = self.page;
+    // This is a slightly simplified version of what you'll find in dispatchPhase
+    // It is simpler because, for direct dispatching, we know there's no ancestors
+    // and only the single target phase.
 
     // Track dispatch depth for deferred removal
     self.dispatch_depth += 1;
@@ -392,13 +306,6 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
         is_done = (listener == last_listener);
         node = n.next;
 
-        // Skip non-matching listeners
-        if (comptime capture_only) |capture| {
-            if (listener.capture != capture) {
-                continue;
-            }
-        }
-
         // Skip removed listeners
         if (listener.removed) {
             continue;
@@ -417,6 +324,304 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
             self.removeListener(list, listener);
         }
 
+        was_dispatched = true;
+        event._current_target = target;
+
+        switch (listener.function) {
+            .value => |value| try ls.toLocal(value).callWithThis(void, target, .{event}),
+            .string => |string| {
+                const str = try page.call_arena.dupeZ(u8, string.str());
+                try ls.local.eval(str, null);
+            },
+            .object => |obj_global| {
+                const obj = ls.toLocal(obj_global);
+                if (try obj.getFunction("handleEvent")) |handleEvent| {
+                    try handleEvent.callWithThis(void, obj, .{event});
+                }
+            },
+        }
+
+        if (event._stop_immediate_propagation) {
+            return;
+        }
+    }
+}
+
+fn getFunction(handler: anytype, local: *const js.Local) ?js.Function {
+    const T = @TypeOf(handler);
+    const ti = @typeInfo(T);
+
+    if (ti == .null) {
+        return null;
+    }
+    if (ti == .optional) {
+        return getFunction(handler orelse return null, local);
+    }
+    return switch (T) {
+        js.Function => handler,
+        js.Function.Temp => local.toLocal(handler),
+        js.Function.Global => local.toLocal(handler),
+        else => @compileError("handler must be null or \\??js.Function(\\.(Temp|Global))?"),
+    };
+}
+
+/// Check if there are any listeners for a direct dispatch (non-DOM target).
+/// Use this to avoid creating an event when there are no listeners.
+pub fn hasDirectListeners(self: *EventManager, target: *EventTarget, typ: []const u8, handler: anytype) bool {
+    if (hasHandler(handler)) {
+        return true;
+    }
+    return self.lookup.get(.{
+        .event_target = @intFromPtr(target),
+        .type_string = .wrap(typ),
+    }) != null;
+}
+
+fn hasHandler(handler: anytype) bool {
+    const ti = @typeInfo(@TypeOf(handler));
+    if (ti == .null) {
+        return false;
+    }
+    if (ti == .optional) {
+        return handler != null;
+    }
+    return true;
+}
+
+fn dispatchNode(self: *EventManager, target: *Node, event: *Event, comptime opts: DispatchOpts) !void {
+    const ShadowRoot = @import("webapi/ShadowRoot.zig");
+
+    {
+        const et = target.asEventTarget();
+        event._target = et;
+        event._dispatch_target = et; // Store original target for composedPath()
+    }
+
+    const page = self.page;
+    var was_handled = false;
+
+    // Create a single scope for all event handlers in this dispatch.
+    // This ensures function handles passed to queueMicrotask remain valid
+    // throughout the entire dispatch, preventing crashes when microtasks run.
+    var ls: js.Local.Scope = undefined;
+    page.js.localScope(&ls);
+    defer {
+        if (was_handled) {
+            ls.local.runMicrotasks();
+        }
+        ls.deinit();
+    }
+
+    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;
+        event._stop_propagation = false;
+        event._stop_immediate_propagation = false;
+        // 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.eql(comptime .wrap("click"))) {
+            page.handleClick(target) catch |err| {
+                log.warn(.event, "page.click", .{ .err = err });
+            };
+        } else if (event._type_string.eql(comptime .wrap("keydown"))) {
+            page.handleKeydown(target, event) catch |err| {
+                log.warn(.event, "page.keydown", .{ .err = err });
+            };
+        }
+    }
+
+    var path_len: usize = 0;
+    var path_buffer: [128]*EventTarget = undefined;
+
+    var node: ?*Node = target;
+    while (node) |n| {
+        if (path_len >= path_buffer.len) break;
+        path_buffer[path_len] = n.asEventTarget();
+        path_len += 1;
+
+        // Check if this node is a shadow root
+        if (n.is(ShadowRoot)) |shadow| {
+            event._needs_retargeting = true;
+
+            // If event is not composed, stop at shadow boundary
+            if (!event._composed) {
+                break;
+            }
+
+            // Otherwise, jump to the shadow host and continue
+            node = shadow._host.asNode();
+            continue;
+        }
+
+        node = n._parent;
+    }
+
+    // Even though the window isn't part of the DOM, most events propagate
+    // through it in the capture phase (unless we stopped at a shadow boundary)
+    // The only explicit exception is "load"
+    if (event._type_string.eql(comptime .wrap("load")) == false) {
+        if (path_len < path_buffer.len) {
+            path_buffer[path_len] = page.window.asEventTarget();
+            path_len += 1;
+        }
+    }
+
+    const path = path_buffer[0..path_len];
+
+    // Phase 1: Capturing phase (root → target, excluding target)
+    // This happens for all events, regardless of bubbling
+    event._event_phase = .capturing_phase;
+    var i: usize = path_len;
+    while (i > 1) {
+        i -= 1;
+        if (event._stop_propagation) return;
+        const current_target = path[i];
+        if (self.lookup.get(.{
+            .event_target = @intFromPtr(current_target),
+            .type_string = event._type_string,
+        })) |list| {
+            try self.dispatchPhase(list, current_target, event, &was_handled, &ls.local, comptime .init(true, opts));
+        }
+    }
+
+    // Phase 2: At target
+    if (event._stop_propagation) return;
+    event._event_phase = .at_target;
+    const target_et = target.asEventTarget();
+
+    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;
+
+            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, &ls.local, comptime .init(null, opts));
+            if (event._stop_propagation) {
+                return;
+            }
+        }
+    }
+
+    // Phase 3: Bubbling phase (target → root, excluding target)
+    // This only happens if the event bubbles
+    if (event._bubbles) {
+        event._event_phase = .bubbling_phase;
+        for (path[1..]) |current_target| {
+            if (event._stop_propagation) break;
+            if (self.lookup.get(.{
+                .type_string = event._type_string,
+                .event_target = @intFromPtr(current_target),
+            })) |list| {
+                try self.dispatchPhase(list, current_target, event, &was_handled, &ls.local, comptime .init(false, opts));
+            }
+        }
+    }
+}
+
+const DispatchPhaseOpts = struct {
+    capture_only: ?bool = null,
+    apply_ignore: bool = false,
+
+    fn init(capture_only: ?bool, opts: DispatchOpts) DispatchPhaseOpts {
+        return .{
+            .capture_only = capture_only,
+            .apply_ignore = opts.apply_ignore,
+        };
+    }
+};
+
+fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, local: *const js.Local, comptime opts: DispatchPhaseOpts) !void {
+    const page = self.page;
+
+    // Track dispatch depth for deferred removal
+    self.dispatch_depth += 1;
+    defer {
+        const dispatch_depth = self.dispatch_depth;
+        // Only destroy deferred listeners when we exit the outermost dispatch
+        if (dispatch_depth == 1) {
+            for (self.deferred_removals.items) |removal| {
+                removal.list.remove(&removal.listener.node);
+                self.listener_pool.destroy(removal.listener);
+            }
+            self.deferred_removals.clearRetainingCapacity();
+        } else {
+            self.dispatch_depth = dispatch_depth - 1;
+        }
+    }
+
+    // Use the last listener in the list as sentinel - listeners added during dispatch will be after it
+    const last_node = list.last orelse return;
+    const last_listener: *Listener = @alignCast(@fieldParentPtr("node", last_node));
+
+    // Iterate through the list, stopping after we've encountered the last_listener
+    var node = list.first;
+    var is_done = false;
+    node_loop: while (node) |n| {
+        if (is_done) {
+            break;
+        }
+
+        const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
+        is_done = (listener == last_listener);
+        node = n.next;
+
+        // Skip non-matching listeners
+        if (comptime opts.capture_only) |capture| {
+            if (listener.capture != capture) {
+                continue;
+            }
+        }
+
+        // Skip removed listeners
+        if (listener.removed) {
+            continue;
+        }
+
+        // If the listener has an aborted signal, remove it and skip
+        if (listener.signal) |signal| {
+            if (signal.getAborted()) {
+                self.removeListener(list, listener);
+                continue;
+            }
+        }
+
+        if (comptime opts.apply_ignore) {
+            for (self.ignore_list.items) |ignored| {
+                if (ignored == listener) {
+                    continue :node_loop;
+                }
+            }
+        }
+
+        // Remove "once" listeners BEFORE calling them so nested dispatches don't see them
+        if (listener.once) {
+            self.removeListener(list, listener);
+        }
+
         was_handled.* = true;
         event._current_target = current_target;
 
@@ -426,18 +631,14 @@ 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 ls.toLocal(value).callWithThis(void, current_target, .{event}),
+            .value => |value| try local.toLocal(value).callWithThis(void, current_target, .{event}),
             .string => |string| {
                 const str = try page.call_arena.dupeZ(u8, string.str());
-                try ls.local.eval(str, null);
+                try local.eval(str, null);
             },
             .object => |obj_global| {
-                const obj = ls.toLocal(obj_global);
+                const obj = local.toLocal(obj_global);
                 if (try obj.getFunction("handleEvent")) |handleEvent| {
                     try handleEvent.callWithThis(void, obj, .{event});
                 }
@@ -455,9 +656,20 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
     }
 }
 
-//  Non-Node dispatching (XHR, Window without propagation)
-fn dispatchAll(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool) !void {
-    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 html_element = switch (target._type) {
+        .node => |n| n.is(Element.Html) orelse return null,
+        else => return null,
+    };
+
+    return html_element.getAttributeFunction(handler_type, self.page) catch |err| {
+        log.warn(.event, "inline html callback", .{ .type = handler_type, .err = err });
+        return null;
+    };
 }
 
 fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *Listener) void {
@@ -575,3 +787,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
+        // and the element is connected to a document (detached elements don't fire).
+        // 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 and input.asElement().asNode().isConnected()) {
+            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);
+
+        const target = input.asElement().asEventTarget();
+        try page._event_manager.dispatch(target, event);
+    }
+};

src/browser/Factory.zig

@@ -42,10 +42,94 @@ const Allocator = std.mem.Allocator;
 const IS_DEBUG = builtin.mode == .Debug;
 const assert = std.debug.assert;
 
+// Shared across all frames of a Page.
 const Factory = @This();
-_page: *Page,
+
+_arena: Allocator,
 _slab: SlabAllocator,
 
+pub fn init(arena: Allocator) Factory {
+    return .{
+        ._arena = arena,
+        ._slab = SlabAllocator.init(arena, 128),
+    };
+}
+
+// this is a root object
+pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
+    return self.eventTargetWithAllocator(self._slab.allocator(), child);
+}
+
+pub fn eventTargetWithAllocator(_: *const Factory, allocator: Allocator, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ EventTarget, @TypeOf(child) },
+    ).allocate(allocator);
+
+    const event_ptr = chain.get(0);
+    event_ptr.* = .{
+        ._type = unionInit(EventTarget.Type, chain.get(1)),
+    };
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+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(_: *const Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, @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 eventInit(arena, typ, chain.get(1));
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+pub fn uiEvent(_: *const Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, @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 eventInit(arena, typ, chain.get(1));
+    chain.setMiddle(1, UIEvent.Type);
+    chain.setLeaf(2, child);
+
+    return chain.get(2);
+}
+
+pub fn mouseEvent(_: *const 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 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 PrototypeChain(comptime types: []const type) type {
     return struct {
         const Self = @This();
@@ -149,102 +233,29 @@ fn AutoPrototypeChain(comptime types: []const type) type {
     };
 }
 
-pub fn init(page: *Page) Factory {
-    return .{
-        ._page = page,
-        ._slab = SlabAllocator.init(page.arena, 128),
-    };
-}
-
-// this is a root object
-pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-    const chain = try PrototypeChain(
-        &.{ EventTarget, @TypeOf(child) },
-    ).allocate(allocator);
-
-    const event_ptr = chain.get(0);
-    event_ptr.* = .{
-        ._type = unionInit(EventTarget.Type, chain.get(1)),
-    };
-    chain.setLeaf(1, child);
-
-    return chain.get(1);
-}
-
-// this is a root object
-pub fn event(self: *Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
-    const chain = try PrototypeChain(
-        &.{ Event, @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.setLeaf(1, child);
-
-    return chain.get(1);
-}
-
-pub fn uiEvent(self: *Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
-    const chain = try PrototypeChain(
-        &.{ Event, UIEvent, @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);
-    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 {
+fn eventInit(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 .{
+        ._rc = 0,
         ._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();
-
+pub fn blob(_: *const Factory, arena: Allocator, child: anytype) !*@TypeOf(child) {
     // Special case: Blob has slice and mime fields, so we need manual setup
     const chain = try PrototypeChain(
         &.{ Blob, @TypeOf(child) },
-    ).allocate(allocator);
+    ).allocate(arena);
 
     const blob_ptr = chain.get(0);
     blob_ptr.* = .{
+        ._arena = arena,
         ._type = unionInit(Blob.Type, chain.get(1)),
         ._slice = "",
         ._mime = "",
@@ -254,19 +265,23 @@ pub fn blob(self: *Factory, child: anytype) !*@TypeOf(child) {
     return chain.get(1);
 }
 
-pub fn abstractRange(self: *Factory, child: anytype, page: *Page) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-    const chain = try PrototypeChain(&.{ AbstractRange, @TypeOf(child) }).allocate(allocator);
+pub fn abstractRange(_: *const Factory, arena: Allocator, child: anytype, page: *Page) !*@TypeOf(child) {
+    const chain = try PrototypeChain(&.{ AbstractRange, @TypeOf(child) }).allocate(arena);
 
     const doc = page.document.asNode();
-    chain.set(0, AbstractRange{
+    const abstract_range = chain.get(0);
+    abstract_range.* = AbstractRange{
+        ._rc = 0,
+        ._arena = arena,
+        ._page_id = page.id,
         ._type = unionInit(AbstractRange.Type, chain.get(1)),
         ._end_offset = 0,
         ._start_offset = 0,
         ._end_container = doc,
         ._start_container = doc,
-    });
+    };
     chain.setLeaf(1, child);
+    page._live_ranges.append(&abstract_range._range_link);
     return chain.get(1);
 }
 
@@ -329,7 +344,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, .{
@@ -374,7 +389,7 @@ pub fn destroy(self: *Factory, value: anytype) void {
     }
 
     if (comptime @hasField(S, "_proto")) {
-        self.destroyChain(value, true, 0, std.mem.Alignment.@"1");
+        self.destroyChain(value, 0, std.mem.Alignment.@"1");
     } else {
         self.destroyStandalone(value);
     }
@@ -388,7 +403,6 @@ pub fn destroyStandalone(self: *Factory, value: anytype) void {
 fn destroyChain(
     self: *Factory,
     value: anytype,
-    comptime first: bool,
     old_size: usize,
     old_align: std.mem.Alignment,
 ) void {
@@ -400,23 +414,8 @@ fn destroyChain(
     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
-    // we don't call deinit (because we're in that deinit)
-    if (!comptime first) {
-        // But if it isn't the first time
-        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"),
-            }
-        }
-    }
-
     if (@hasField(S, "_proto")) {
-        self.destroyChain(value._proto, false, new_size, new_align);
+        self.destroyChain(value._proto, new_size, new_align);
     } else {
         // no proto so this is the head of the chain.
         // we use this as the ptr to the start of the chain.

src/browser/Mime.zig

@@ -24,10 +24,11 @@ params: []const u8 = "",
 // IANA defines max. charset value length as 40.
 // We keep 41 for null-termination since HTML parser expects in this format.
 charset: [41]u8 = default_charset,
-charset_len: usize = 5,
+charset_len: usize = default_charset_len,
 
 /// String "UTF-8" continued by null characters.
-pub const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+const default_charset_len = 5;
 
 /// Mime with unknown Content-Type, empty params and empty charset.
 pub const unknown = Mime{ .content_type = .{ .unknown = {} } };
@@ -38,6 +39,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 +54,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 +70,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 => "",
     };
@@ -115,17 +128,17 @@ pub fn parse(input: []u8) !Mime {
 
     const params = trimLeft(normalized[type_len..]);
 
-    var charset: [41]u8 = undefined;
-    var charset_len: usize = undefined;
+    var charset: [41]u8 = default_charset;
+    var charset_len: usize = default_charset_len;
 
     var it = std.mem.splitScalar(u8, params, ';');
     while (it.next()) |attr| {
-        const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse return error.Invalid;
+        const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse continue;
         const name = trimLeft(attr[0..i]);
 
         const value = trimRight(attr[i + 1 ..]);
         if (value.len == 0) {
-            return error.Invalid;
+            continue;
         }
 
         const attribute_name = std.meta.stringToEnum(enum {
@@ -138,7 +151,7 @@ pub fn parse(input: []u8) !Mime {
                     break;
                 }
 
-                const attribute_value = try parseCharset(value);
+                const attribute_value = parseCharset(value) catch continue;
                 @memcpy(charset[0..attribute_value.len], attribute_value);
                 // Null-terminate right after attribute value.
                 charset[attribute_value.len] = 0;
@@ -243,6 +256,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 +269,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 };
@@ -313,6 +335,19 @@ test "Mime: invalid" {
         "text/ html",
         "text / html",
         "text/html other",
+    };
+
+    for (invalids) |invalid| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
+        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+    }
+}
+
+test "Mime: malformed parameters are ignored" {
+    defer testing.reset();
+
+    // These should all parse successfully as text/html with malformed params ignored
+    const valid_with_malformed_params = [_][]const u8{
         "text/html; x",
         "text/html; x=",
         "text/html; x=  ",
@@ -321,11 +356,13 @@ test "Mime: invalid" {
         "text/html; charset=\"\"",
         "text/html; charset=\"",
         "text/html; charset=\"\\",
+        "text/html;\"",
     };
 
-    for (invalids) |invalid| {
-        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
-        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+    for (valid_with_malformed_params) |input| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, input);
+        const mime = try Mime.parse(mutable_input);
+        try testing.expectEqual(.text_html, std.meta.activeTag(mime.content_type));
     }
 }
 
@@ -358,6 +395,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" {
@@ -409,6 +451,12 @@ test "Mime: parse charset" {
         .charset = "custom-non-standard-charset-value",
         .params = "charset=\"custom-non-standard-charset-value\"",
     }, "text/xml;charset=\"custom-non-standard-charset-value\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "UTF-8",
+        .params = "x=\"",
+    }, "text/html;x=\"");
 }
 
 test "Mime: isHTML" {

src/browser/ScriptManager.zig

@@ -20,13 +20,15 @@ const std = @import("std");
 const lp = @import("lightpanda");
 const builtin = @import("builtin");
 
-const js = @import("js/js.zig");
 const log = @import("../log.zig");
+const HttpClient = @import("HttpClient.zig");
+const net_http = @import("../network/http.zig");
+const String = @import("../string.zig").String;
 
+const js = @import("js/js.zig");
 const URL = @import("URL.zig");
 const Page = @import("Page.zig");
 const Browser = @import("Browser.zig");
-const Http = @import("../http/Http.zig");
 
 const Element = @import("webapi/Element.zig");
 
@@ -59,7 +61,7 @@ ready_scripts: std.DoublyLinkedList,
 
 shutdown: bool = false,
 
-client: *Http.Client,
+client: *HttpClient,
 allocator: Allocator,
 buffer_pool: BufferPool,
 
@@ -83,10 +85,11 @@ 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;
+// have we notified the page that all scripts are loaded (used to fire the "load"
+// event).
+page_notified_of_completion: bool,
+
+pub fn init(allocator: Allocator, http_client: *HttpClient, page: *Page) ScriptManager {
     return .{
         .page = page,
         .async_scripts = .{},
@@ -96,9 +99,10 @@ 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),
+        .page_notified_of_completion = false,
         .script_pool = std.heap.MemoryPool(Script).init(allocator),
     };
 }
@@ -138,7 +142,7 @@ fn clearList(list: *std.DoublyLinkedList) void {
     }
 }
 
-pub fn getHeaders(self: *ScriptManager, url: [:0]const u8) !Http.Headers {
+pub fn getHeaders(self: *ScriptManager, url: [:0]const u8) !net_http.Headers {
     var headers = try self.client.newHeaders();
     try self.page.headersForRequest(self.page.arena, url, &headers);
     return headers;
@@ -155,7 +159,6 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         // <script> has already been processed.
         return;
     }
-    script_element._executed = true;
 
     const element = script_element.asElement();
     if (element.getAttributeSafe(comptime .wrap("nomodule")) != null) {
@@ -200,10 +203,22 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             source = .{ .remote = .{} };
         }
     } else {
-        const inline_source = try element.asNode().getTextContentAlloc(page.arena);
+        var buf = std.Io.Writer.Allocating.init(page.arena);
+        try element.asNode().getChildTextContent(&buf.writer);
+        try buf.writer.writeByte(0);
+        const data = buf.written();
+        const inline_source: [:0]const u8 = data[0 .. data.len - 1 :0];
+        if (inline_source.len == 0) {
+            // we haven't set script_element._executed = true yet, which is good.
+            // If content is appended to the script, we will execute it then.
+            return;
+        }
         source = .{ .@"inline" = inline_source };
     }
 
+    // Only set _executed (already-started) when we actually have content to execute
+    script_element._executed = true;
+
     const script = try self.script_pool.create();
     errdefer self.script_pool.destroy(script);
 
@@ -262,6 +277,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             .url = url,
             .ctx = script,
             .method = .GET,
+            .frame_id = page._frame_id,
             .headers = try self.getHeaders(url),
             .blocking = is_blocking,
             .cookie_jar = &page._session.cookie_jar,
@@ -361,9 +377,11 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .manager = self,
     };
 
+    const page = self.page;
+
     if (comptime IS_DEBUG) {
         var ls: js.Local.Scope = undefined;
-        self.page.js.localScope(&ls);
+        page.js.localScope(&ls);
         defer ls.deinit();
 
         log.debug(.http, "script queue", .{
@@ -378,10 +396,11 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .url = url,
         .ctx = script,
         .method = .GET,
+        .frame_id = page._frame_id,
         .headers = try self.getHeaders(url),
-        .cookie_jar = &self.page._session.cookie_jar,
+        .cookie_jar = &page._session.cookie_jar,
         .resource_type = .script,
-        .notification = self.page._session.notification,
+        .notification = page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -454,9 +473,10 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
         } },
     };
 
+    const page = self.page;
     if (comptime IS_DEBUG) {
         var ls: js.Local.Scope = undefined;
-        self.page.js.localScope(&ls);
+        page.js.localScope(&ls);
         defer ls.deinit();
 
         log.debug(.http, "script queue", .{
@@ -479,11 +499,12 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
     try self.client.request(.{
         .url = url,
         .method = .GET,
+        .frame_id = page._frame_id,
         .headers = try self.getHeaders(url),
         .ctx = script,
         .resource_type = .script,
-        .cookie_jar = &self.page._session.cookie_jar,
-        .notification = self.page._session.notification,
+        .cookie_jar = &page._session.cookie_jar,
+        .notification = page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -567,19 +588,12 @@ fn evaluate(self: *ScriptManager) void {
     // Page makes this safe to call multiple times.
     page.documentIsLoaded();
 
-    if (self.async_scripts.first == null) {
-        // Looks like all async scripts are done too!
-        // Page makes this safe to call multiple times.
-        page.documentIsComplete();
+    if (self.async_scripts.first == null and self.page_notified_of_completion == false) {
+        self.page_notified_of_completion = true;
+        page.scriptsCompletedLoading();
     }
 }
 
-pub fn isDone(self: *const ScriptManager) bool {
-    return self.static_scripts_done and // page is done processing initial html
-        self.defer_scripts.first == null and // no deferred scripts
-        self.async_scripts.first == null; // no async scripts
-}
-
 fn parseImportmap(self: *ScriptManager, script: *const Script) !void {
     const content = script.source.content();
 
@@ -621,6 +635,20 @@ pub const Script = struct {
     script_element: ?*Element.Html.Script,
     manager: *ScriptManager,
 
+    // for debugging a rare production issue
+    header_callback_called: bool = false,
+
+    // for debugging a rare production issue
+    debug_transfer_id: u32 = 0,
+    debug_transfer_tries: u8 = 0,
+    debug_transfer_aborted: bool = false,
+    debug_transfer_bytes_received: usize = 0,
+    debug_transfer_notified_fail: bool = false,
+    debug_transfer_redirecting: bool = false,
+    debug_transfer_intercept_state: u8 = 0,
+    debug_transfer_auth_challenge: bool = false,
+    debug_transfer_easy_id: usize = 0,
+
     const Kind = enum {
         module,
         javascript,
@@ -659,11 +687,11 @@ pub const Script = struct {
         self.manager.script_pool.destroy(self);
     }
 
-    fn startCallback(transfer: *Http.Transfer) !void {
+    fn startCallback(transfer: *HttpClient.Transfer) !void {
         log.debug(.http, "script fetch start", .{ .req = transfer });
     }
 
-    fn headerCallback(transfer: *Http.Transfer) !bool {
+    fn headerCallback(transfer: *HttpClient.Transfer) !bool {
         const self: *Script = @ptrCast(@alignCast(transfer.ctx));
         const header = &transfer.response_header.?;
         self.status = header.status;
@@ -684,7 +712,44 @@ pub const Script = struct {
             });
         }
 
-        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", .{
+                .m = @tagName(std.meta.activeTag(self.mode)),
+                .a1 = self.debug_transfer_id,
+                .a2 = self.debug_transfer_tries,
+                .a3 = self.debug_transfer_aborted,
+                .a4 = self.debug_transfer_bytes_received,
+                .a5 = self.debug_transfer_notified_fail,
+                .a6 = self.debug_transfer_redirecting,
+                .a7 = self.debug_transfer_intercept_state,
+                .a8 = self.debug_transfer_auth_challenge,
+                .a9 = self.debug_transfer_easy_id,
+                .b1 = transfer.id,
+                .b2 = transfer._tries,
+                .b3 = transfer.aborted,
+                .b4 = transfer.bytes_received,
+                .b5 = transfer._notified_fail,
+                .b6 = transfer._redirecting,
+                .b7 = @intFromEnum(transfer._intercept_state),
+                .b8 = transfer._auth_challenge != null,
+                .b9 = if (transfer._conn) |c| @intFromPtr(c.easy) else 0,
+            });
+            self.header_callback_called = true;
+            self.debug_transfer_id = transfer.id;
+            self.debug_transfer_tries = transfer._tries;
+            self.debug_transfer_aborted = transfer.aborted;
+            self.debug_transfer_bytes_received = transfer.bytes_received;
+            self.debug_transfer_notified_fail = transfer._notified_fail;
+            self.debug_transfer_redirecting = transfer._redirecting;
+            self.debug_transfer_intercept_state = @intFromEnum(transfer._intercept_state);
+            self.debug_transfer_auth_challenge = transfer._auth_challenge != null;
+            self.debug_transfer_easy_id = if (transfer._conn) |c| @intFromPtr(c.easy) else 0;
+        }
+
+        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);
@@ -693,14 +758,14 @@ pub const Script = struct {
         return true;
     }
 
-    fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
+    fn dataCallback(transfer: *HttpClient.Transfer, data: []const u8) !void {
         const self: *Script = @ptrCast(@alignCast(transfer.ctx));
         self._dataCallback(transfer, data) catch |err| {
             log.err(.http, "SM.dataCallback", .{ .err = err, .transfer = transfer, .len = data.len });
             return err;
         };
     }
-    fn _dataCallback(self: *Script, _: *Http.Transfer, data: []const u8) !void {
+    fn _dataCallback(self: *Script, _: *HttpClient.Transfer, data: []const u8) !void {
         try self.source.remote.appendSlice(self.manager.allocator, data);
     }
 
@@ -814,13 +879,15 @@ pub const Script = struct {
                     .kind = self.kind,
                     .cacheable = cacheable,
                 });
-                self.executeCallback("error", local.toLocal(script_element._on_error), page);
+                self.executeCallback(comptime .wrap("error"), page);
                 return;
             };
-            self.executeCallback("load", local.toLocal(script_element._on_load), page);
+            self.executeCallback(comptime .wrap("load"), page);
             return;
         }
 
+        defer page._event_manager.clearIgnoreList();
+
         var try_catch: js.TryCatch = undefined;
         try_catch.init(local);
         defer try_catch.deinit();
@@ -839,19 +906,18 @@ pub const Script = struct {
         };
 
         if (comptime IS_DEBUG) {
-            log.debug(.browser, "executed script", .{ .src = url, .success = success, .on_load = script_element._on_load != null });
+            log.debug(.browser, "executed script", .{ .src = url, .success = success });
         }
 
         defer {
-            // We should run microtasks even if script execution fails.
-            local.runMicrotasks();
+            local.runMacrotasks(); // also runs microtasks
             _ = page.js.scheduler.run() catch |err| {
                 log.err(.page, "scheduler", .{ .err = err });
             };
         }
 
         if (success) {
-            self.executeCallback("load", local.toLocal(script_element._on_load), page);
+            self.executeCallback(comptime .wrap("load"), page);
             return;
         }
 
@@ -862,14 +928,12 @@ pub const Script = struct {
             .cacheable = cacheable,
         });
 
-        self.executeCallback("error", local.toLocal(script_element._on_error), page);
+        self.executeCallback(comptime .wrap("error"), page);
     }
 
-    fn executeCallback(self: *const Script, comptime typ: []const u8, cb_: ?js.Function, page: *Page) void {
-        const cb = cb_ orelse return;
-
+    fn executeCallback(self: *const Script, typ: String, page: *Page) void {
         const Event = @import("webapi/Event.zig");
-        const event = Event.initTrusted(comptime .wrap(typ), .{}, page) catch |err| {
+        const event = Event.initTrusted(typ, .{}, page) catch |err| {
             log.warn(.js, "script internal callback", .{
                 .url = self.url,
                 .type = typ,
@@ -877,14 +941,11 @@ 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 {
+        page._event_manager.dispatchOpts(self.script_element.?.asNode().asEventTarget(), event, .{ .apply_ignore = true }) catch |err| {
             log.warn(.js, "script callback", .{
                 .url = self.url,
                 .type = typ,
-                .caught = caught,
+                .err = err,
             });
         };
     }
@@ -897,7 +958,7 @@ 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,
@@ -956,7 +1017,7 @@ const BufferPool = struct {
         b.clearRetainingCapacity();
         container.* = .{ .buf = b, .node = .{} };
         self.count += 1;
-        self.available.append(&container.node);
+        self.available.prepend(&container.node);
     }
 };
 
@@ -1004,23 +1065,35 @@ fn parseDataURI(allocator: Allocator, src: []const u8) !?[]const u8 {
 
     const uri = src[5..];
     const data_starts = std.mem.indexOfScalar(u8, uri, ',') orelse return null;
+    const data = uri[data_starts + 1 ..];
 
-    var data = uri[data_starts + 1 ..];
+    const unescaped = try URL.unescape(allocator, data);
 
-    // Extract the encoding.
     const metadata = uri[0..data_starts];
-    if (std.mem.endsWith(u8, metadata, ";base64")) {
-        const decoder = std.base64.standard.Decoder;
-        const decoded_size = try decoder.calcSizeForSlice(data);
-
-        const buffer = try allocator.alloc(u8, decoded_size);
-        errdefer allocator.free(buffer);
-
-        try decoder.decode(buffer, data);
-        data = buffer;
+    if (std.mem.endsWith(u8, metadata, ";base64") == false) {
+        return unescaped;
     }
 
-    return data;
+    // Forgiving base64 decode per WHATWG spec:
+    // https://infra.spec.whatwg.org/#forgiving-base64-decode
+    // Step 1: Remove all ASCII whitespace
+    var stripped = try std.ArrayList(u8).initCapacity(allocator, unescaped.len);
+    for (unescaped) |c| {
+        if (!std.ascii.isWhitespace(c)) {
+            stripped.appendAssumeCapacity(c);
+        }
+    }
+    const trimmed = std.mem.trimRight(u8, stripped.items, "=");
+
+    // Length % 4 == 1 is invalid
+    if (trimmed.len % 4 == 1) {
+        return error.InvalidCharacterError;
+    }
+
+    const decoded_size = std.base64.standard_no_pad.Decoder.calcSizeForSlice(trimmed) catch return error.InvalidCharacterError;
+    const buffer = try allocator.alloc(u8, decoded_size);
+    std.base64.standard_no_pad.Decoder.decode(buffer, trimmed) catch return error.InvalidCharacterError;
+    return buffer;
 }
 
 const testing = @import("../testing.zig");

src/browser/Session.zig

@@ -18,8 +18,10 @@
 
 const std = @import("std");
 const lp = @import("lightpanda");
+const builtin = @import("builtin");
 
 const log = @import("../log.zig");
+const App = @import("../App.zig");
 
 const js = @import("js/js.zig");
 const storage = @import("webapi/storage/storage.zig");
@@ -28,55 +30,90 @@ const History = @import("webapi/History.zig");
 
 const Page = @import("Page.zig");
 const Browser = @import("Browser.zig");
+const Factory = @import("Factory.zig");
 const Notification = @import("../Notification.zig");
+const QueuedNavigation = Page.QueuedNavigation;
 
 const Allocator = std.mem.Allocator;
-const IS_DEBUG = @import("builtin").mode == .Debug;
+const ArenaPool = App.ArenaPool;
+const IS_DEBUG = builtin.mode == .Debug;
 
-// Session is like a browser's tab.
-// It owns the js env and the loader for all the pages of the session.
 // You can create successively multiple pages for a session, but you must
-// deinit a page before running another one.
+// deinit a page before running another one. It manages two distinct lifetimes.
+//
+// The first is the lifetime of the Session itself, where pages are created and
+// removed, but share the same cookie jar and navigation history (etc...)
+//
+// The second is as a container the data needed by the full page hierarchy, i.e. \
+// the root page and all of its frames (and all of their frames.)
 const Session = @This();
 
+// These are the fields that remain intact for the duration of the Session
 browser: *Browser,
-notification: *Notification,
-
-// Used to create our Inspector and in the BrowserContext.
 arena: Allocator,
-
-// The page's arena is unsuitable for data that has to existing while
-// navigating from one page to another. For example, if we're clicking
-// on an HREF, the URL exists in the original page (where the click
-// originated) but also has to exist in the new page.
-// While we could use the Session's arena, this could accumulate a lot of
-// memory if we do many navigation events. The `transfer_arena` is meant to
-// bridge the gap: existing long enough to store any data needed to end one
-// page and start another.
-transfer_arena: Allocator,
-
-cookie_jar: storage.Cookie.Jar,
-storage_shed: storage.Shed,
-
 history: History,
 navigation: Navigation,
+storage_shed: storage.Shed,
+notification: *Notification,
+cookie_jar: storage.Cookie.Jar,
+
+// These are the fields that get reset whenever the Session's page (the root) is reset.
+factory: Factory,
+
+page_arena: Allocator,
+
+// Origin map for same-origin context sharing. Scoped to the root page lifetime.
+origins: std.StringHashMapUnmanaged(*js.Origin) = .empty,
+
+// Shared resources for all pages in this session.
+// These live for the duration of the page tree (root + frames).
+arena_pool: *ArenaPool,
+
+// In Debug, we use this to see if anything fails to release an arena back to
+// the pool.
+_arena_pool_leak_track: if (IS_DEBUG) std.AutoHashMapUnmanaged(usize, struct {
+    owner: []const u8,
+    count: usize,
+}) else void = if (IS_DEBUG) .empty else {},
 
 page: ?Page,
 
+queued_navigation: std.ArrayList(*Page),
+// Temporary buffer for about:blank navigations during processing.
+// We process async navigations first (safe from re-entrance), then sync
+// about:blank navigations (which may add to queued_navigation).
+queued_queued_navigation: std.ArrayList(*Page),
+
+page_id_gen: u32,
+frame_id_gen: u32,
+
 pub fn init(self: *Session, browser: *Browser, notification: *Notification) !void {
     const allocator = browser.app.allocator;
-    const session_allocator = browser.session_arena.allocator();
+    const arena_pool = browser.arena_pool;
+
+    const arena = try arena_pool.acquire();
+    errdefer arena_pool.release(arena);
+
+    const page_arena = try arena_pool.acquire();
+    errdefer arena_pool.release(page_arena);
 
     self.* = .{
         .page = null,
+        .arena = arena,
+        .arena_pool = arena_pool,
+        .page_arena = page_arena,
+        .factory = Factory.init(page_arena),
         .history = .{},
-        .navigation = .{},
+        .page_id_gen = 0,
+        .frame_id_gen = 0,
+        // The prototype (EventTarget) for Navigation is created when a Page is created.
+        .navigation = .{ ._proto = undefined },
         .storage_shed = .{},
         .browser = browser,
+        .queued_navigation = .{},
+        .queued_queued_navigation = .{},
         .notification = notification,
-        .arena = session_allocator,
         .cookie_jar = storage.Cookie.Jar.init(allocator),
-        .transfer_arena = browser.transfer_arena.allocator(),
     };
 }
 
@@ -85,7 +122,10 @@ pub fn deinit(self: *Session) void {
         self.removePage();
     }
     self.cookie_jar.deinit();
+
     self.storage_shed.deinit(self.browser.app.allocator);
+    self.arena_pool.release(self.page_arena);
+    self.arena_pool.release(self.arena);
 }
 
 // NOTE: the caller is not the owner of the returned value,
@@ -93,11 +133,9 @@ pub fn deinit(self: *Session) void {
 pub fn createPage(self: *Session) !*Page {
     lp.assert(self.page == null, "Session.createPage - page not null", .{});
 
-    _ = self.browser.page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
-
     self.page = @as(Page, undefined);
     const page = &self.page.?;
-    try Page.init(page, self);
+    try Page.init(page, self.nextFrameId(), self, null);
 
     // Creates a new NavigationEventTarget for this page.
     try self.navigation.onNewPage(page);
@@ -117,16 +155,140 @@ pub fn removePage(self: *Session) void {
     self.notification.dispatch(.page_remove, .{});
     lp.assert(self.page != null, "Session.removePage - page is null", .{});
 
-    self.page.?.deinit();
+    self.page.?.deinit(false);
     self.page = null;
 
     self.navigation.onRemovePage();
+    self.resetPageResources();
 
     if (comptime IS_DEBUG) {
         log.debug(.browser, "remove page", .{});
     }
 }
 
+pub const GetArenaOpts = struct {
+    debug: []const u8,
+};
+
+pub fn getArena(self: *Session, opts: GetArenaOpts) !Allocator {
+    const allocator = try self.arena_pool.acquire();
+    if (comptime IS_DEBUG) {
+        // Use session's arena (not page_arena) since page_arena gets reset between pages
+        const gop = try self._arena_pool_leak_track.getOrPut(self.arena, @intFromPtr(allocator.ptr));
+        if (gop.found_existing and gop.value_ptr.count != 0) {
+            log.err(.bug, "ArenaPool Double Use", .{ .owner = gop.value_ptr.*.owner });
+            @panic("ArenaPool Double Use");
+        }
+        gop.value_ptr.* = .{ .owner = opts.debug, .count = 1 };
+    }
+    return allocator;
+}
+
+pub fn releaseArena(self: *Session, allocator: Allocator) void {
+    if (comptime IS_DEBUG) {
+        const found = self._arena_pool_leak_track.getPtr(@intFromPtr(allocator.ptr)).?;
+        if (found.count != 1) {
+            log.err(.bug, "ArenaPool Double Free", .{ .owner = found.owner, .count = found.count });
+            if (comptime builtin.is_test) {
+                @panic("ArenaPool Double Free");
+            }
+            return;
+        }
+        found.count = 0;
+    }
+    return self.arena_pool.release(allocator);
+}
+
+pub fn getOrCreateOrigin(self: *Session, key_: ?[]const u8) !*js.Origin {
+    const key = key_ orelse {
+        var opaque_origin: [36]u8 = undefined;
+        @import("../id.zig").uuidv4(&opaque_origin);
+        // Origin.init will dupe opaque_origin. It's fine that this doesn't
+        // get added to self.origins. In fact, it further isolates it. When the
+        // context is freed, it'll call session.releaseOrigin which will free it.
+        return js.Origin.init(self.browser.app, self.browser.env.isolate, &opaque_origin);
+    };
+
+    const gop = try self.origins.getOrPut(self.arena, key);
+    if (gop.found_existing) {
+        const origin = gop.value_ptr.*;
+        origin.rc += 1;
+        return origin;
+    }
+
+    errdefer _ = self.origins.remove(key);
+
+    const origin = try js.Origin.init(self.browser.app, self.browser.env.isolate, key);
+    gop.key_ptr.* = origin.key;
+    gop.value_ptr.* = origin;
+    return origin;
+}
+
+pub fn releaseOrigin(self: *Session, origin: *js.Origin) void {
+    const rc = origin.rc;
+    if (rc == 1) {
+        _ = self.origins.remove(origin.key);
+        origin.deinit(self.browser.app);
+    } else {
+        origin.rc = rc - 1;
+    }
+}
+
+/// Reset page_arena and factory for a clean slate.
+/// Called when root page is removed.
+fn resetPageResources(self: *Session) void {
+    // Check for arena leaks before releasing
+    if (comptime IS_DEBUG) {
+        var it = self._arena_pool_leak_track.valueIterator();
+        while (it.next()) |value_ptr| {
+            if (value_ptr.count > 0) {
+                log.err(.bug, "ArenaPool Leak", .{ .owner = value_ptr.owner });
+            }
+        }
+        self._arena_pool_leak_track.clearRetainingCapacity();
+    }
+
+    // All origins should have been released when contexts were destroyed
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.origins.count() == 0);
+    }
+    // Defensive cleanup in case origins leaked
+    {
+        const app = self.browser.app;
+        var it = self.origins.valueIterator();
+        while (it.next()) |value| {
+            value.*.deinit(app);
+        }
+        self.origins.clearRetainingCapacity();
+    }
+
+    // Release old page_arena and acquire fresh one
+    self.frame_id_gen = 0;
+    self.arena_pool.reset(self.page_arena, 64 * 1024);
+    self.factory = Factory.init(self.page_arena);
+}
+
+pub fn replacePage(self: *Session) !*Page {
+    if (comptime IS_DEBUG) {
+        log.debug(.browser, "replace page", .{});
+    }
+
+    lp.assert(self.page != null, "Session.replacePage null page", .{});
+    lp.assert(self.page.?.parent == null, "Session.replacePage with parent", .{});
+
+    var current = self.page.?;
+    const frame_id = current._frame_id;
+    current.deinit(true);
+
+    self.resetPageResources();
+    self.browser.env.memoryPressureNotification(.moderate);
+
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, frame_id, self, null);
+    return page;
+}
+
 pub fn currentPage(self: *Session) ?*Page {
     return &(self.page orelse return null);
 }
@@ -137,53 +299,363 @@ pub const WaitResult = enum {
     cdp_socket,
 };
 
-pub fn wait(self: *Session, wait_ms: u32) WaitResult {
-    while (true) {
-        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;
+pub fn findPageByFrameId(self: *Session, frame_id: u32) ?*Page {
+    const page = self.currentPage() orelse return null;
+    return findPageBy(page, "_frame_id", frame_id);
+}
+
+pub fn findPageById(self: *Session, id: u32) ?*Page {
+    const page = self.currentPage() orelse return null;
+    return findPageBy(page, "id", id);
+}
+
+fn findPageBy(page: *Page, comptime field: []const u8, id: u32) ?*Page {
+    if (@field(page, field) == id) return page;
+    for (page.frames.items) |f| {
+        if (findPageBy(f, field, id)) |found| {
+            return found;
+        }
+    }
+    return null;
+}
+
+pub fn wait(self: *Session, wait_ms: u32) WaitResult {
+    var page = &(self.page orelse return .no_page);
+    while (true) {
+        const wait_result = self._wait(page, wait_ms) catch |err| {
+            switch (err) {
+                error.JsError => {}, // already logged (with hopefully more context)
+                else => log.err(.browser, "session wait", .{
+                    .err = err,
+                    .url = page.url,
+                }),
+            }
+            return .done;
+        };
+
+        switch (wait_result) {
+            .done => {
+                if (self.queued_navigation.items.len == 0) {
+                    return .done;
+                }
+                self.processQueuedNavigation() catch return .done;
+                page = &self.page.?; // might have changed
+            },
+            else => |result| return result,
         }
-        // if we've successfull navigated, we'll give the new page another
-        // page.wait(wait_ms)
     }
 }
 
-fn processScheduledNavigation(self: *Session) !void {
-    defer _ = self.browser.transfer_arena.reset(.{ .retain_with_limit = 8 * 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;
+fn _wait(self: *Session, page: *Page, wait_ms: u32) !WaitResult {
+    var timer = try std.time.Timer.start();
+    var ms_remaining = wait_ms;
 
-        // 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();
+    const browser = self.browser;
+    var http_client = browser.http_client;
 
-        break :blk .{ url, opts };
-    };
+    // I'd like the page to know NOTHING about cdp_socket / CDP, but the
+    // fact is that the behavior of wait changes depending on whether or
+    // not we're using CDP.
+    // If we aren't using CDP, as soon as we think there's nothing left
+    // to do, we can exit - we'de done.
+    // But if we are using CDP, we should wait for the whole `wait_ms`
+    // because the http_click.tick() also monitors the CDP socket. And while
+    // we could let CDP poll http (like it does for HTTP requests), the fact
+    // is that we know more about the timing of stuff (e.g. how long to
+    // poll/sleep) in the page.
+    const exit_when_done = http_client.cdp_client == null;
 
-    const page = self.createPage() catch |err| {
-        log.err(.browser, "queued navigation page error", .{
-            .err = err,
-            .url = url,
-        });
-        return err;
-    };
+    while (true) {
+        switch (page._parse_state) {
+            .pre, .raw, .text, .image => {
+                // The main page hasn't started/finished navigating.
+                // There's no JS to run, and no reason to run the scheduler.
+                if (http_client.active == 0 and exit_when_done) {
+                    // haven't started navigating, I guess.
+                    return .done;
+                }
+                // Either we have active http connections, or we're in CDP
+                // mode with an extra socket. Either way, we're waiting
+                // for http traffic
+                if (try http_client.tick(@intCast(ms_remaining)) == .cdp_socket) {
+                    // exit_when_done is explicitly set when there isn't
+                    // an extra socket, so it should not be possibl to
+                    // get an cdp_socket message when exit_when_done
+                    // is true.
+                    if (IS_DEBUG) {
+                        std.debug.assert(exit_when_done == false);
+                    }
 
-    page.navigate(url, opts) catch |err| {
-        log.err(.browser, "queued navigation error", .{ .err = err, .url = url });
+                    // data on a socket we aren't handling, return to caller
+                    return .cdp_socket;
+                }
+            },
+            .html, .complete => {
+                if (self.queued_navigation.items.len != 0) {
+                    return .done;
+                }
+
+                // The HTML page was parsed. We now either have JS scripts to
+                // download, or scheduled tasks to execute, or both.
+
+                // scheduler.run could trigger new http transfers, so do not
+                // store http_client.active BEFORE this call and then use
+                // it AFTER.
+                const ms_to_next_task = try browser.runMacrotasks();
+
+                // Each call to this runs scheduled load events.
+                try page.dispatchLoad();
+
+                const http_active = http_client.active;
+                const total_network_activity = http_active + http_client.intercepted;
+                if (page._notified_network_almost_idle.check(total_network_activity <= 2)) {
+                    page.notifyNetworkAlmostIdle();
+                }
+                if (page._notified_network_idle.check(total_network_activity == 0)) {
+                    page.notifyNetworkIdle();
+                }
+
+                if (http_active == 0 and exit_when_done) {
+                    // we don't need to consider http_client.intercepted here
+                    // because exit_when_done is true, and that can only be
+                    // the case when interception isn't possible.
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(http_client.intercepted == 0);
+                    }
+
+                    var ms: u64 = ms_to_next_task orelse blk: {
+                        if (wait_ms - ms_remaining < 100) {
+                            if (comptime builtin.is_test) {
+                                return .done;
+                            }
+                            // Look, we want to exit ASAP, but we don't want
+                            // to exit so fast that we've run none of the
+                            // background jobs.
+                            break :blk 50;
+                        }
+
+                        if (browser.hasBackgroundTasks()) {
+                            // _we_ have nothing to run, but v8 is working on
+                            // background tasks. We'll wait for them.
+                            browser.waitForBackgroundTasks();
+                            break :blk 20;
+                        }
+
+                        // No http transfers, no cdp extra socket, no
+                        // scheduled tasks, we're done.
+                        return .done;
+                    };
+
+                    if (ms > ms_remaining) {
+                        // Same as above, except we have a scheduled task,
+                        // it just happens to be too far into the future
+                        // compared to how long we were told to wait.
+                        if (!browser.hasBackgroundTasks()) {
+                            return .done;
+                        }
+                        // _we_ have nothing to run, but v8 is working on
+                        // background tasks. We'll wait for them.
+                        browser.waitForBackgroundTasks();
+                        ms = 20;
+                    }
+
+                    // We have a task to run in the not-so-distant future.
+                    // You might think we can just sleep until that task is
+                    // ready, but we should continue to run lowPriority tasks
+                    // in the meantime, and that could unblock things. So
+                    // we'll just sleep for a bit, and then restart our wait
+                    // loop to see if anything new can be processed.
+                    std.Thread.sleep(std.time.ns_per_ms * @as(u64, @intCast(@min(ms, 20))));
+                } else {
+                    // We're here because we either have active HTTP
+                    // connections, or exit_when_done == false (aka, there's
+                    // an cdp_socket registered with the http client).
+                    // We should continue to run lowPriority tasks, so we
+                    // minimize how long we'll poll for network I/O.
+                    var ms_to_wait = @min(200, ms_to_next_task orelse 200);
+                    if (ms_to_wait > 10 and browser.hasBackgroundTasks()) {
+                        // if we have background tasks, we don't want to wait too
+                        // long for a message from the client. We want to go back
+                        // to the top of the loop and run macrotasks.
+                        ms_to_wait = 10;
+                    }
+                    if (try http_client.tick(@min(ms_remaining, ms_to_wait)) == .cdp_socket) {
+                        // data on a socket we aren't handling, return to caller
+                        return .cdp_socket;
+                    }
+                }
+            },
+            .err => |err| {
+                page._parse_state = .{ .raw_done = @errorName(err) };
+                return err;
+            },
+            .raw_done => {
+                if (exit_when_done) {
+                    return .done;
+                }
+                // we _could_ http_client.tick(ms_to_wait), but this has
+                // the same result, and I feel is more correct.
+                return .no_page;
+            },
+        }
+
+        const ms_elapsed = timer.lap() / 1_000_000;
+        if (ms_elapsed >= ms_remaining) {
+            return .done;
+        }
+        ms_remaining -= @intCast(ms_elapsed);
+    }
+}
+
+pub fn scheduleNavigation(self: *Session, page: *Page) !void {
+    const list = &self.queued_navigation;
+
+    // Check if page is already queued
+    for (list.items) |existing| {
+        if (existing == page) {
+            // Already queued
+            return;
+        }
+    }
+
+    return list.append(self.arena, page);
+}
+
+fn processQueuedNavigation(self: *Session) !void {
+    const navigations = &self.queued_navigation;
+
+    if (self.page.?._queued_navigation != null) {
+        // This is both an optimization and a simplification of sorts. If the
+        // root page is navigating, then we don't need to process any other
+        // navigation. Also, the navigation for the root page and for a frame
+        // is different enough that have two distinct code blocks is, imo,
+        // better. Yes, there will be duplication.
+        navigations.clearRetainingCapacity();
+        return self.processRootQueuedNavigation();
+    }
+
+    const about_blank_queue = &self.queued_queued_navigation;
+    defer about_blank_queue.clearRetainingCapacity();
+
+    // First pass: process async navigations (non-about:blank)
+    // These cannot cause re-entrant navigation scheduling
+    for (navigations.items) |page| {
+        const qn = page._queued_navigation.?;
+
+        if (qn.is_about_blank) {
+            // Defer about:blank to second pass
+            try about_blank_queue.append(self.arena, page);
+            continue;
+        }
+
+        try self.processFrameNavigation(page, qn);
+    }
+
+    // Clear the queue after first pass
+    navigations.clearRetainingCapacity();
+
+    // Second pass: process synchronous navigations (about:blank)
+    // These may trigger new navigations which go into queued_navigation
+    for (about_blank_queue.items) |page| {
+        const qn = page._queued_navigation.?;
+        try self.processFrameNavigation(page, qn);
+    }
+
+    // Safety: Remove any about:blank navigations that were queued during the
+    // second pass to prevent infinite loops
+    var i: usize = 0;
+    while (i < navigations.items.len) {
+        const page = navigations.items[i];
+        if (page._queued_navigation) |qn| {
+            if (qn.is_about_blank) {
+                log.warn(.page, "recursive about    blank", .{});
+                _ = navigations.swapRemove(i);
+                continue;
+            }
+        }
+        i += 1;
+    }
+}
+
+fn processFrameNavigation(self: *Session, page: *Page, qn: *QueuedNavigation) !void {
+    lp.assert(page.parent != null, "root queued navigation", .{});
+
+    const iframe = page.iframe.?;
+    const parent = page.parent.?;
+
+    page._queued_navigation = null;
+    defer self.releaseArena(qn.arena);
+
+    errdefer iframe._window = null;
+
+    if (page._parent_notified) {
+        // we already notified the parent that we had loaded
+        parent._pending_loads += 1;
+    }
+
+    const frame_id = page._frame_id;
+    page.deinit(true);
+    page.* = undefined;
+
+    try Page.init(page, frame_id, self, parent);
+    errdefer page.deinit(true);
+
+    page.iframe = iframe;
+    iframe._window = page.window;
+
+    page.navigate(qn.url, qn.opts) catch |err| {
+        log.err(.browser, "queued frame navigation error", .{ .err = err });
         return err;
     };
 }
+
+fn processRootQueuedNavigation(self: *Session) !void {
+    const current_page = &self.page.?;
+    const frame_id = current_page._frame_id;
+
+    // create a copy before the page is cleared
+    const qn = current_page._queued_navigation.?;
+    current_page._queued_navigation = null;
+
+    defer self.arena_pool.release(qn.arena);
+
+    // HACK
+    // Mark as released in tracking BEFORE removePage clears the map.
+    // We can't call releaseArena() because that would also return the arena
+    // to the pool, making the memory invalid before we use qn.url/qn.opts.
+    if (comptime IS_DEBUG) {
+        if (self._arena_pool_leak_track.getPtr(@intFromPtr(qn.arena.ptr))) |found| {
+            found.count = 0;
+        }
+    }
+
+    self.removePage();
+
+    self.page = @as(Page, undefined);
+    const new_page = &self.page.?;
+    try Page.init(new_page, frame_id, self, null);
+
+    // Creates a new NavigationEventTarget for this page.
+    try self.navigation.onNewPage(new_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.notification.dispatch(.page_created, new_page);
+
+    new_page.navigate(qn.url, qn.opts) catch |err| {
+        log.err(.browser, "queued navigation error", .{ .err = err });
+        return err;
+    };
+}
+
+pub fn nextFrameId(self: *Session) u32 {
+    const id = self.frame_id_gen +% 1;
+    self.frame_id_gen = id;
+    return id;
+}
+
+pub fn nextPageId(self: *Session) u32 {
+    const id = self.page_id_gen +% 1;
+    self.page_id_gen = id;
+    return id;
+}

src/browser/URL.zig

@@ -20,44 +20,61 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 
 const ResolveOpts = struct {
+    encode: bool = false,
     always_dupe: bool = false,
 };
+
 // path is anytype, so that it can be used with both []const u8 and [:0]const u8
 pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime opts: ResolveOpts) ![:0]const u8 {
     const PT = @TypeOf(path);
     if (base.len == 0 or isCompleteHTTPUrl(path)) {
         if (comptime opts.always_dupe or !isNullTerminated(PT)) {
-            return allocator.dupeZ(u8, path);
+            const duped = try allocator.dupeZ(u8, path);
+            return processResolved(allocator, duped, opts);
+        }
+        if (comptime opts.encode) {
+            return processResolved(allocator, path, opts);
         }
         return path;
     }
 
     if (path.len == 0) {
         if (comptime opts.always_dupe) {
-            return allocator.dupeZ(u8, base);
+            const duped = try allocator.dupeZ(u8, base);
+            return processResolved(allocator, duped, opts);
+        }
+        if (comptime opts.encode) {
+            return processResolved(allocator, base, opts);
         }
         return base;
     }
 
     if (path[0] == '?') {
         const base_path_end = std.mem.indexOfAny(u8, base, "?#") orelse base.len;
-        return std.mem.joinZ(allocator, "", &.{ base[0..base_path_end], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..base_path_end], path });
+        return processResolved(allocator, result, opts);
     }
     if (path[0] == '#') {
         const base_fragment_start = std.mem.indexOfScalar(u8, base, '#') orelse base.len;
-        return std.mem.joinZ(allocator, "", &.{ base[0..base_fragment_start], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..base_fragment_start], path });
+        return processResolved(allocator, result, opts);
     }
 
     if (std.mem.startsWith(u8, path, "//")) {
         // network-path reference
         const index = std.mem.indexOfScalar(u8, base, ':') orelse {
             if (comptime isNullTerminated(PT)) {
+                if (comptime opts.encode) {
+                    return processResolved(allocator, path, opts);
+                }
                 return path;
             }
-            return allocator.dupeZ(u8, path);
+            const duped = try allocator.dupeZ(u8, path);
+            return processResolved(allocator, duped, opts);
         };
         const protocol = base[0 .. index + 1];
-        return std.mem.joinZ(allocator, "", &.{ protocol, path });
+        const result = try std.mem.joinZ(allocator, "", &.{ protocol, path });
+        return processResolved(allocator, result, opts);
     }
 
     const scheme_end = std.mem.indexOf(u8, base, "://");
@@ -65,7 +82,8 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     const path_start = std.mem.indexOfScalarPos(u8, base, authority_start, '/') orelse base.len;
 
     if (path[0] == '/') {
-        return std.mem.joinZ(allocator, "", &.{ base[0..path_start], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..path_start], path });
+        return processResolved(allocator, result, opts);
     }
 
     var normalized_base: []const u8 = base[0..path_start];
@@ -127,7 +145,122 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
 
     // we always have an extra space
     out[out_i] = 0;
-    return out[0..out_i :0];
+    return processResolved(allocator, out[0..out_i :0], opts);
+}
+
+fn processResolved(allocator: Allocator, url: [:0]const u8, comptime opts: ResolveOpts) ![:0]const u8 {
+    if (!comptime opts.encode) {
+        return url;
+    }
+    return ensureEncoded(allocator, url);
+}
+
+pub fn ensureEncoded(allocator: Allocator, url: [:0]const u8) ![:0]const u8 {
+    const scheme_end = std.mem.indexOf(u8, url, "://");
+    const authority_start = if (scheme_end) |end| end + 3 else 0;
+    const path_start = std.mem.indexOfScalarPos(u8, url, authority_start, '/') orelse return url;
+
+    const query_start = std.mem.indexOfScalarPos(u8, url, path_start, '?');
+    const fragment_start = std.mem.indexOfScalarPos(u8, url, query_start orelse path_start, '#');
+
+    const path_end = query_start orelse fragment_start orelse url.len;
+    const query_end = if (query_start) |_| (fragment_start orelse url.len) else path_end;
+
+    const path_to_encode = url[path_start..path_end];
+    const encoded_path = try percentEncodeSegment(allocator, path_to_encode, .path);
+
+    const encoded_query = if (query_start) |qs| blk: {
+        const query_to_encode = url[qs + 1 .. query_end];
+        const encoded = try percentEncodeSegment(allocator, query_to_encode, .query);
+        break :blk encoded;
+    } else null;
+
+    const encoded_fragment = if (fragment_start) |fs| blk: {
+        const fragment_to_encode = url[fs + 1 ..];
+        const encoded = try percentEncodeSegment(allocator, fragment_to_encode, .query);
+        break :blk encoded;
+    } else null;
+
+    if (encoded_path.ptr == path_to_encode.ptr and
+        (encoded_query == null or encoded_query.?.ptr == url[query_start.? + 1 .. query_end].ptr) and
+        (encoded_fragment == null or encoded_fragment.?.ptr == url[fragment_start.? + 1 ..].ptr))
+    {
+        // nothing has changed
+        return url;
+    }
+
+    var buf = try std.ArrayList(u8).initCapacity(allocator, url.len + 20);
+    try buf.appendSlice(allocator, url[0..path_start]);
+    try buf.appendSlice(allocator, encoded_path);
+    if (encoded_query) |eq| {
+        try buf.append(allocator, '?');
+        try buf.appendSlice(allocator, eq);
+    }
+    if (encoded_fragment) |ef| {
+        try buf.append(allocator, '#');
+        try buf.appendSlice(allocator, ef);
+    }
+    try buf.append(allocator, 0);
+    return buf.items[0 .. buf.items.len - 1 :0];
+}
+
+const EncodeSet = enum { path, query, userinfo };
+
+fn percentEncodeSegment(allocator: Allocator, segment: []const u8, comptime encode_set: EncodeSet) ![]const u8 {
+    // Check if encoding is needed
+    var needs_encoding = false;
+    for (segment) |c| {
+        if (shouldPercentEncode(c, encode_set)) {
+            needs_encoding = true;
+            break;
+        }
+    }
+    if (!needs_encoding) {
+        return segment;
+    }
+
+    var buf = try std.ArrayList(u8).initCapacity(allocator, segment.len + 10);
+
+    var i: usize = 0;
+    while (i < segment.len) : (i += 1) {
+        const c = segment[i];
+
+        // Check if this is an already-encoded sequence (%XX)
+        if (c == '%' and i + 2 < segment.len) {
+            const end = i + 2;
+            const h1 = segment[i + 1];
+            const h2 = segment[end];
+            if (std.ascii.isHex(h1) and std.ascii.isHex(h2)) {
+                try buf.appendSlice(allocator, segment[i .. end + 1]);
+                i = end;
+                continue;
+            }
+        }
+
+        if (shouldPercentEncode(c, encode_set)) {
+            try buf.writer(allocator).print("%{X:0>2}", .{c});
+        } else {
+            try buf.append(allocator, c);
+        }
+    }
+
+    return buf.items;
+}
+
+fn shouldPercentEncode(c: u8, comptime encode_set: EncodeSet) bool {
+    return switch (c) {
+        // Unreserved characters (RFC 3986)
+        'A'...'Z', 'a'...'z', '0'...'9', '-', '.', '_', '~' => false,
+        // sub-delims allowed in path/query but some must be encoded in userinfo
+        '!', '$', '&', '\'', '(', ')', '*', '+', ',' => false,
+        ';', '=' => encode_set == .userinfo,
+        // Separators: userinfo must encode these
+        '/', ':', '@' => encode_set == .userinfo,
+        // '?' is allowed in queries but not in paths or userinfo
+        '?' => encode_set != .query,
+        // Everything else needs encoding (including space)
+        else => true,
+    };
 }
 
 fn isNullTerminated(comptime value: type) bool {
@@ -144,6 +277,11 @@ pub fn isCompleteHTTPUrl(url: []const u8) bool {
         return false;
     }
 
+    // blob: and data: URLs are complete but don't follow scheme:// pattern
+    if (std.mem.startsWith(u8, url, "blob:") or std.mem.startsWith(u8, url, "data:")) {
+        return true;
+    }
+
     // Check if there's a scheme (protocol) ending with ://
     const colon_pos = std.mem.indexOfScalar(u8, url, ':') orelse return false;
 
@@ -384,7 +522,7 @@ pub fn setHost(current: [:0]const u8, value: []const u8, allocator: Allocator) !
     const search = getSearch(current);
     const hash = getHash(current);
 
-    // Check if the host includes a port
+    // Check if the new value includes a port
     const colon_pos = std.mem.lastIndexOfScalar(u8, value, ':');
     const clean_host = if (colon_pos) |pos| blk: {
         const port_str = value[pos + 1 ..];
@@ -396,7 +534,14 @@ pub fn setHost(current: [:0]const u8, value: []const u8, allocator: Allocator) !
             break :blk value[0..pos];
         }
         break :blk value;
-    } else value;
+    } else blk: {
+        // No port in new value - preserve existing port
+        const current_port = getPort(current);
+        if (current_port.len > 0) {
+            break :blk try std.fmt.allocPrint(allocator, "{s}:{s}", .{ value, current_port });
+        }
+        break :blk value;
+    };
 
     return buildUrl(allocator, protocol, clean_host, pathname, search, hash);
 }
@@ -414,6 +559,9 @@ pub fn setHostname(current: [:0]const u8, value: []const u8, allocator: Allocato
 pub fn setPort(current: [:0]const u8, value: ?[]const u8, allocator: Allocator) ![:0]const u8 {
     const hostname = getHostname(current);
     const protocol = getProtocol(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
 
     // Handle null or default ports
     const new_host = if (value) |port_str| blk: {
@@ -430,7 +578,7 @@ pub fn setPort(current: [:0]const u8, value: ?[]const u8, allocator: Allocator)
         break :blk try std.fmt.allocPrint(allocator, "{s}:{s}", .{ hostname, port_str });
     } else hostname;
 
-    return setHost(current, new_host, allocator);
+    return buildUrl(allocator, protocol, new_host, pathname, search, hash);
 }
 
 pub fn setPathname(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
@@ -478,6 +626,64 @@ pub fn setHash(current: [:0]const u8, value: []const u8, allocator: Allocator) !
     return buildUrl(allocator, protocol, host, pathname, search, hash);
 }
 
+pub fn setUsername(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const host = getHost(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
+    const password = getPassword(current);
+
+    const encoded_username = try percentEncodeSegment(allocator, value, .userinfo);
+    return buildUrlWithUserInfo(allocator, protocol, encoded_username, password, host, pathname, search, hash);
+}
+
+pub fn setPassword(current: [:0]const u8, value: []const u8, allocator: Allocator) ![:0]const u8 {
+    const protocol = getProtocol(current);
+    const host = getHost(current);
+    const pathname = getPathname(current);
+    const search = getSearch(current);
+    const hash = getHash(current);
+    const username = getUsername(current);
+
+    const encoded_password = try percentEncodeSegment(allocator, value, .userinfo);
+    return buildUrlWithUserInfo(allocator, protocol, username, encoded_password, host, pathname, search, hash);
+}
+
+fn buildUrlWithUserInfo(
+    allocator: Allocator,
+    protocol: []const u8,
+    username: []const u8,
+    password: []const u8,
+    host: []const u8,
+    pathname: []const u8,
+    search: []const u8,
+    hash: []const u8,
+) ![:0]const u8 {
+    if (username.len == 0 and password.len == 0) {
+        return buildUrl(allocator, protocol, host, pathname, search, hash);
+    } else if (password.len == 0) {
+        return std.fmt.allocPrintSentinel(allocator, "{s}//{s}@{s}{s}{s}{s}", .{
+            protocol,
+            username,
+            host,
+            pathname,
+            search,
+            hash,
+        }, 0);
+    } else {
+        return std.fmt.allocPrintSentinel(allocator, "{s}//{s}:{s}@{s}{s}{s}{s}", .{
+            protocol,
+            username,
+            password,
+            host,
+            pathname,
+            search,
+            hash,
+        }, 0);
+    }
+}
+
 pub fn concatQueryString(arena: Allocator, url: []const u8, query_string: []const u8) ![:0]const u8 {
     if (query_string.len == 0) {
         return arena.dupeZ(u8, url);
@@ -512,6 +718,33 @@ pub fn getRobotsUrl(arena: Allocator, url: [:0]const u8) ![:0]const u8 {
     );
 }
 
+pub fn unescape(arena: Allocator, input: []const u8) ![]const u8 {
+    if (std.mem.indexOfScalar(u8, input, '%') == null) {
+        return input;
+    }
+
+    var result = try std.ArrayList(u8).initCapacity(arena, input.len);
+
+    var i: usize = 0;
+    while (i < input.len) {
+        if (input[i] == '%' and i + 2 < input.len) {
+            const hex = input[i + 1 .. i + 3];
+            const byte = std.fmt.parseInt(u8, hex, 16) catch {
+                result.appendAssumeCapacity(input[i]);
+                i += 1;
+                continue;
+            };
+            result.appendAssumeCapacity(byte);
+            i += 3;
+        } else {
+            result.appendAssumeCapacity(input[i]);
+            i += 1;
+        }
+    }
+
+    return result.items;
+}
+
 const testing = @import("../testing.zig");
 test "URL: isCompleteHTTPUrl" {
     try testing.expectEqual(true, isCompleteHTTPUrl("http://example.com/about"));
@@ -691,6 +924,297 @@ test "URL: resolve" {
     }
 }
 
+test "URL: ensureEncoded" {
+    defer testing.reset();
+
+    const Case = struct {
+        url: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        .{
+            .url = "https://example.com/over 9000!",
+            .expected = "https://example.com/over%209000!",
+        },
+        .{
+            .url = "http://example.com/hello world.html",
+            .expected = "http://example.com/hello%20world.html",
+        },
+        .{
+            .url = "https://example.com/file[1].html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .url = "https://example.com/file{name}.html",
+            .expected = "https://example.com/file%7Bname%7D.html",
+        },
+        .{
+            .url = "https://example.com/page?query=hello world",
+            .expected = "https://example.com/page?query=hello%20world",
+        },
+        .{
+            .url = "https://example.com/page?a=1&b=value with spaces",
+            .expected = "https://example.com/page?a=1&b=value%20with%20spaces",
+        },
+        .{
+            .url = "https://example.com/page#section one",
+            .expected = "https://example.com/page#section%20one",
+        },
+        .{
+            .url = "https://example.com/my path?query=my value#my anchor",
+            .expected = "https://example.com/my%20path?query=my%20value#my%20anchor",
+        },
+        .{
+            .url = "https://example.com/already%20encoded",
+            .expected = "https://example.com/already%20encoded",
+        },
+        .{
+            .url = "https://example.com/file%5B1%5D.html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .url = "https://example.com/caf%C3%A9",
+            .expected = "https://example.com/caf%C3%A9",
+        },
+        .{
+            .url = "https://example.com/page?query=already%20encoded",
+            .expected = "https://example.com/page?query=already%20encoded",
+        },
+        .{
+            .url = "https://example.com/page?a=1&b=value%20here",
+            .expected = "https://example.com/page?a=1&b=value%20here",
+        },
+        .{
+            .url = "https://example.com/page#section%20one",
+            .expected = "https://example.com/page#section%20one",
+        },
+        .{
+            .url = "https://example.com/part%20encoded and not",
+            .expected = "https://example.com/part%20encoded%20and%20not",
+        },
+        .{
+            .url = "https://example.com/page?a=encoded%20value&b=not encoded",
+            .expected = "https://example.com/page?a=encoded%20value&b=not%20encoded",
+        },
+        .{
+            .url = "https://example.com/my%20path?query=not encoded#encoded%20anchor",
+            .expected = "https://example.com/my%20path?query=not%20encoded#encoded%20anchor",
+        },
+        .{
+            .url = "https://example.com/fully%20encoded?query=also%20encoded#and%20this",
+            .expected = "https://example.com/fully%20encoded?query=also%20encoded#and%20this",
+        },
+        .{
+            .url = "https://example.com/path-with_under~tilde",
+            .expected = "https://example.com/path-with_under~tilde",
+        },
+        .{
+            .url = "https://example.com/sub-delims!$&'()*+,;=",
+            .expected = "https://example.com/sub-delims!$&'()*+,;=",
+        },
+        .{
+            .url = "https://example.com",
+            .expected = "https://example.com",
+        },
+        .{
+            .url = "https://example.com?query=value",
+            .expected = "https://example.com?query=value",
+        },
+        .{
+            .url = "https://example.com/clean/path",
+            .expected = "https://example.com/clean/path",
+        },
+        .{
+            .url = "https://example.com/path?clean=query#clean-fragment",
+            .expected = "https://example.com/path?clean=query#clean-fragment",
+        },
+        .{
+            .url = "https://example.com/100% complete",
+            .expected = "https://example.com/100%25%20complete",
+        },
+        .{
+            .url = "https://example.com/path?value=100% done",
+            .expected = "https://example.com/path?value=100%25%20done",
+        },
+        .{
+            .url = "about:blank",
+            .expected = "about:blank",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try ensureEncoded(testing.arena_allocator, case.url);
+        try testing.expectString(case.expected, result);
+    }
+}
+
+test "URL: resolve with encoding" {
+    defer testing.reset();
+
+    const Case = struct {
+        base: [:0]const u8,
+        path: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        // Spaces should be encoded as %20, but ! is allowed
+        .{
+            .base = "https://example.com/dir/",
+            .path = "over 9000!",
+            .expected = "https://example.com/dir/over%209000!",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "hello world.html",
+            .expected = "https://example.com/hello%20world.html",
+        },
+        // Multiple spaces
+        .{
+            .base = "https://example.com/",
+            .path = "path with  multiple   spaces",
+            .expected = "https://example.com/path%20with%20%20multiple%20%20%20spaces",
+        },
+        // Special characters that need encoding
+        .{
+            .base = "https://example.com/",
+            .path = "file[1].html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file{name}.html",
+            .expected = "https://example.com/file%7Bname%7D.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file<test>.html",
+            .expected = "https://example.com/file%3Ctest%3E.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file\"quote\".html",
+            .expected = "https://example.com/file%22quote%22.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file|pipe.html",
+            .expected = "https://example.com/file%7Cpipe.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file\\backslash.html",
+            .expected = "https://example.com/file%5Cbackslash.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file^caret.html",
+            .expected = "https://example.com/file%5Ecaret.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file`backtick`.html",
+            .expected = "https://example.com/file%60backtick%60.html",
+        },
+        // Characters that should NOT be encoded
+        .{
+            .base = "https://example.com/",
+            .path = "path-with_under~tilde.html",
+            .expected = "https://example.com/path-with_under~tilde.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "path/with/slashes",
+            .expected = "https://example.com/path/with/slashes",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "sub-delims!$&'()*+,;=.html",
+            .expected = "https://example.com/sub-delims!$&'()*+,;=.html",
+        },
+        // Already encoded characters should not be double-encoded
+        .{
+            .base = "https://example.com/",
+            .path = "already%20encoded",
+            .expected = "https://example.com/already%20encoded",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file%5B1%5D.html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        // Mix of encoded and unencoded
+        .{
+            .base = "https://example.com/",
+            .path = "part%20encoded and not",
+            .expected = "https://example.com/part%20encoded%20and%20not",
+        },
+        // Query strings and fragments ARE encoded
+        .{
+            .base = "https://example.com/",
+            .path = "file name.html?query=value with spaces",
+            .expected = "https://example.com/file%20name.html?query=value%20with%20spaces",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file name.html#anchor with spaces",
+            .expected = "https://example.com/file%20name.html#anchor%20with%20spaces",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file.html?hello=world !",
+            .expected = "https://example.com/file.html?hello=world%20!",
+        },
+        // Query structural characters should NOT be encoded
+        .{
+            .base = "https://example.com/",
+            .path = "file.html?a=1&b=2",
+            .expected = "https://example.com/file.html?a=1&b=2",
+        },
+        // Relative paths with encoding
+        .{
+            .base = "https://example.com/dir/page.html",
+            .path = "../other dir/file.html",
+            .expected = "https://example.com/other%20dir/file.html",
+        },
+        .{
+            .base = "https://example.com/dir/",
+            .path = "./sub dir/file.html",
+            .expected = "https://example.com/dir/sub%20dir/file.html",
+        },
+        // Absolute paths with encoding
+        .{
+            .base = "https://example.com/some/path",
+            .path = "/absolute path/file.html",
+            .expected = "https://example.com/absolute%20path/file.html",
+        },
+        // Unicode/high bytes (though ideally these should be UTF-8 encoded first)
+        .{
+            .base = "https://example.com/",
+            .path = "café",
+            .expected = "https://example.com/caf%C3%A9",
+        },
+        // Empty path
+        .{
+            .base = "https://example.com/",
+            .path = "",
+            .expected = "https://example.com/",
+        },
+        // Complete URL as path (should not be encoded)
+        .{
+            .base = "https://example.com/",
+            .path = "https://other.com/path with spaces",
+            .expected = "https://other.com/path%20with%20spaces",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try resolve(testing.arena_allocator, case.base, case.path, .{ .encode = true });
+        try testing.expectString(case.expected, result);
+    }
+}
+
 test "URL: eqlDocument" {
     defer testing.reset();
     {
@@ -816,3 +1340,77 @@ test "URL: getRobotsUrl" {
         try testing.expectString("https://example.com/robots.txt", url);
     }
 }
+
+test "URL: unescape" {
+    defer testing.reset();
+    const arena = testing.arena_allocator;
+
+    {
+        const result = try unescape(arena, "hello world");
+        try testing.expectEqual("hello world", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%20world");
+        try testing.expectEqual("hello world", result);
+    }
+
+    {
+        const result = try unescape(arena, "%48%65%6c%6c%6f");
+        try testing.expectEqual("Hello", result);
+    }
+
+    {
+        const result = try unescape(arena, "%48%65%6C%6C%6F");
+        try testing.expectEqual("Hello", result);
+    }
+
+    {
+        const result = try unescape(arena, "a%3Db");
+        try testing.expectEqual("a=b", result);
+    }
+
+    {
+        const result = try unescape(arena, "a%3DB");
+        try testing.expectEqual("a=B", result);
+    }
+
+    {
+        const result = try unescape(arena, "ZDIgPSAndHdvJzs%3D");
+        try testing.expectEqual("ZDIgPSAndHdvJzs=", result);
+    }
+
+    {
+        const result = try unescape(arena, "%5a%44%4d%67%50%53%41%6e%64%47%68%79%5a%57%55%6e%4f%77%3D%3D");
+        try testing.expectEqual("ZDMgPSAndGhyZWUnOw==", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%2world");
+        try testing.expectEqual("hello%2world", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%ZZworld");
+        try testing.expectEqual("hello%ZZworld", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%");
+        try testing.expectEqual("hello%", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%2");
+        try testing.expectEqual("hello%2", result);
+    }
+}
+
+test "URL: getHost" {
+    try testing.expectEqualSlices(u8, "example.com:8080", getHost("https://example.com:8080/path"));
+    try testing.expectEqualSlices(u8, "example.com", getHost("https://example.com/path"));
+    try testing.expectEqualSlices(u8, "example.com:443", getHost("https://example.com:443/"));
+    try testing.expectEqualSlices(u8, "example.com", getHost("https://user:pass@example.com/page"));
+    try testing.expectEqualSlices(u8, "example.com:8080", getHost("https://user:pass@example.com:8080/page"));
+    try testing.expectEqualSlices(u8, "", getHost("not-a-url"));
+}

src/browser/css/Tokenizer.zig

@@ -480,10 +480,11 @@ fn consumeName(self: *Tokenizer) []const u8 {
                 self.consumeEscape();
             },
             0x0 => self.advance(1),
-            '\x80'...'\xBF', '\xC0'...'\xEF', '\xF0'...'\xFF' => {
-                // This byte *is* part of a multi-byte code point,
-                // we’ll end up copying the whole code point before this loop does something else.
-                self.advance(1);
+            '\x80'...'\xFF' => {
+                // Non-ASCII: advance over the complete UTF-8 code point in one step.
+                // Using consumeChar() instead of advance(1) ensures we never land on
+                // a continuation byte, which advance() asserts against.
+                self.consumeChar();
             },
             else => {
                 if (self.hasNonAsciiAt(0)) {
@@ -583,7 +584,7 @@ fn consumeNumeric(self: *Tokenizer) Token {
             };
 
             self.advance(2);
-        } else if (self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(2))) {
+        } else if (self.hasAtLeast(2) and std.ascii.isDigit(self.byteAt(2))) {
             self.advance(1);
         } else {
             break :blk;

src/browser/dump.zig

@@ -20,16 +20,15 @@ const std = @import("std");
 const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Slot = @import("webapi/element/html/Slot.zig");
+const IFrame = @import("webapi/element/html/IFrame.zig");
 
-pub const RootOpts = struct {
-    with_base: bool = false,
-    strip: Opts.Strip = .{},
-    shadow: Opts.Shadow = .rendered,
-};
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 pub const Opts = struct {
-    strip: Strip = .{},
-    shadow: Shadow = .rendered,
+    with_base: bool = false,
+    with_frames: bool = false,
+    strip: Opts.Strip = .{},
+    shadow: Opts.Shadow = .rendered,
 
     pub const Strip = struct {
         js: bool = false,
@@ -49,7 +48,7 @@ pub const Opts = struct {
     };
 };
 
-pub fn root(doc: *Node.Document, opts: RootOpts, writer: *std.Io.Writer, page: *Page) !void {
+pub fn root(doc: *Node.Document, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
     if (doc.is(Node.Document.HTMLDocument)) |html_doc| {
         blk: {
             // Ideally we just render the doctype which is part of the document
@@ -71,7 +70,7 @@ pub fn root(doc: *Node.Document, opts: RootOpts, writer: *std.Io.Writer, page: *
         }
     }
 
-    return deep(doc.asNode(), .{ .strip = opts.strip, .shadow = opts.shadow }, writer, page);
+    return deep(doc.asNode(), opts, writer, page);
 }
 
 pub fn deep(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
@@ -83,19 +82,19 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
         .cdata => |cd| {
             if (node.is(Node.CData.Comment)) |_| {
                 try writer.writeAll("<!--");
-                try writer.writeAll(cd.getData());
+                try writer.writeAll(cd.getData().str());
                 try writer.writeAll("-->");
             } else if (node.is(Node.CData.ProcessingInstruction)) |pi| {
                 try writer.writeAll("<?");
                 try writer.writeAll(pi._target);
                 try writer.writeAll(" ");
-                try writer.writeAll(cd.getData());
+                try writer.writeAll(cd.getData().str());
                 try writer.writeAll("?>");
             } else {
                 if (shouldEscapeText(node._parent)) {
-                    try writeEscapedText(cd.getData(), writer);
+                    try writeEscapedText(cd.getData().str(), writer);
                 } else {
-                    try writer.writeAll(cd.getData());
+                    try writer.writeAll(cd.getData().str());
                 }
             }
         },
@@ -140,7 +139,24 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
                 }
             }
 
-            try children(node, opts, writer, page);
+            if (opts.with_frames and el.is(IFrame) != null) {
+                const frame = el.as(IFrame);
+                if (frame.getContentDocument()) |doc| {
+                    // A frame's document should always ahave a page, but
+                    // I'm not willing to crash a release build on that assertion.
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(doc._page != null);
+                    }
+                    if (doc._page) |frame_page| {
+                        try writer.writeByte('\n');
+                        root(doc, opts, writer, frame_page) catch return error.WriteFailed;
+                        try writer.writeByte('\n');
+                    }
+                }
+            } else {
+                try children(node, opts, writer, page);
+            }
+
             if (!isVoidElement(el)) {
                 try writer.writeAll("</");
                 try writer.writeAll(el.getTagNameDump());
@@ -172,7 +188,11 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
             try writer.writeAll(">\n");
         },
         .document_fragment => try children(node, opts, writer, page),
-        .attribute => unreachable,
+        .attribute => {
+            // Not called normally, but can be called via XMLSerializer.serializeToString
+            // in which case it should return an empty string
+            try writer.writeAll("");
+        },
     }
 }
 
@@ -294,6 +314,12 @@ fn shouldEscapeText(node_: ?*Node) bool {
     if (node.is(Node.Element.Html.Script) != null) {
         return false;
     }
+    // When scripting is enabled, <noscript> is a raw text element per the HTML spec
+    // (https://html.spec.whatwg.org/multipage/parsing.html#serialising-html-fragments).
+    // Its text content must not be HTML-escaped during serialization.
+    if (node.is(Node.Element.Html.Generic)) |generic| {
+        if (generic._tag == .noscript) return false;
+    }
     return true;
 }
 fn writeEscapedText(text: []const u8, writer: *std.Io.Writer) !void {

src/browser/interactive.zig

@@ -0,0 +1,546 @@
+// 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 URL = @import("URL.zig");
+const TreeWalker = @import("webapi/TreeWalker.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+const EventTarget = @import("webapi/EventTarget.zig");
+
+const Allocator = std.mem.Allocator;
+
+pub const InteractivityType = enum {
+    native,
+    aria,
+    contenteditable,
+    listener,
+    focusable,
+};
+
+pub const InteractiveElement = struct {
+    node: *Node,
+    tag_name: []const u8,
+    role: ?[]const u8,
+    name: ?[]const u8,
+    interactivity_type: InteractivityType,
+    listener_types: []const []const u8,
+    disabled: bool,
+    tab_index: i32,
+    id: ?[]const u8,
+    class: ?[]const u8,
+    href: ?[]const u8,
+    input_type: ?[]const u8,
+    value: ?[]const u8,
+    element_name: ?[]const u8,
+    placeholder: ?[]const u8,
+
+    pub fn jsonStringify(self: *const InteractiveElement, jw: anytype) !void {
+        try jw.beginObject();
+
+        try jw.objectField("tagName");
+        try jw.write(self.tag_name);
+
+        try jw.objectField("role");
+        try jw.write(self.role);
+
+        try jw.objectField("name");
+        try jw.write(self.name);
+
+        try jw.objectField("type");
+        try jw.write(@tagName(self.interactivity_type));
+
+        if (self.listener_types.len > 0) {
+            try jw.objectField("listeners");
+            try jw.beginArray();
+            for (self.listener_types) |lt| {
+                try jw.write(lt);
+            }
+            try jw.endArray();
+        }
+
+        if (self.disabled) {
+            try jw.objectField("disabled");
+            try jw.write(true);
+        }
+
+        try jw.objectField("tabIndex");
+        try jw.write(self.tab_index);
+
+        if (self.id) |v| {
+            try jw.objectField("id");
+            try jw.write(v);
+        }
+
+        if (self.class) |v| {
+            try jw.objectField("class");
+            try jw.write(v);
+        }
+
+        if (self.href) |v| {
+            try jw.objectField("href");
+            try jw.write(v);
+        }
+
+        if (self.input_type) |v| {
+            try jw.objectField("inputType");
+            try jw.write(v);
+        }
+
+        if (self.value) |v| {
+            try jw.objectField("value");
+            try jw.write(v);
+        }
+
+        if (self.element_name) |v| {
+            try jw.objectField("elementName");
+            try jw.write(v);
+        }
+
+        if (self.placeholder) |v| {
+            try jw.objectField("placeholder");
+            try jw.write(v);
+        }
+
+        try jw.endObject();
+    }
+};
+
+/// Collect all interactive elements under `root`.
+pub fn collectInteractiveElements(
+    root: *Node,
+    arena: Allocator,
+    page: *Page,
+) ![]InteractiveElement {
+    // Pre-build a map of event_target pointer → event type names,
+    // so classify and getListenerTypes are both O(1) per element.
+    const listener_targets = try buildListenerTargetMap(page, arena);
+
+    var results: std.ArrayList(InteractiveElement) = .empty;
+
+    var tw = TreeWalker.Full.init(root, .{});
+    while (tw.next()) |node| {
+        const el = node.is(Element) orelse continue;
+        const html_el = el.is(Element.Html) orelse continue;
+
+        // Skip non-visual elements that are never user-interactive.
+        switch (el.getTag()) {
+            .script, .style, .link, .meta, .head, .noscript, .template => continue,
+            else => {},
+        }
+
+        const itype = classifyInteractivity(el, html_el, listener_targets) orelse continue;
+
+        const listener_types = getListenerTypes(
+            el.asEventTarget(),
+            listener_targets,
+        );
+
+        try results.append(arena, .{
+            .node = node,
+            .tag_name = el.getTagNameLower(),
+            .role = getRole(el),
+            .name = try getAccessibleName(el, arena),
+            .interactivity_type = itype,
+            .listener_types = listener_types,
+            .disabled = isDisabled(el),
+            .tab_index = html_el.getTabIndex(),
+            .id = el.getAttributeSafe(comptime .wrap("id")),
+            .class = el.getAttributeSafe(comptime .wrap("class")),
+            .href = if (el.getAttributeSafe(comptime .wrap("href"))) |href|
+                URL.resolve(arena, page.base(), href, .{ .encode = true }) catch href
+            else
+                null,
+            .input_type = getInputType(el),
+            .value = getInputValue(el),
+            .element_name = el.getAttributeSafe(comptime .wrap("name")),
+            .placeholder = el.getAttributeSafe(comptime .wrap("placeholder")),
+        });
+    }
+
+    return results.items;
+}
+
+pub const ListenerTargetMap = std.AutoHashMapUnmanaged(usize, std.ArrayList([]const u8));
+
+/// Pre-build a map from event_target pointer → list of event type names.
+/// This lets both classifyInteractivity (O(1) "has any?") and
+/// getListenerTypes (O(1) "which ones?") avoid re-iterating per element.
+pub fn buildListenerTargetMap(page: *Page, arena: Allocator) !ListenerTargetMap {
+    var map = ListenerTargetMap{};
+
+    // addEventListener registrations
+    var it = page._event_manager.lookup.iterator();
+    while (it.next()) |entry| {
+        const list = entry.value_ptr.*;
+        if (list.first != null) {
+            const gop = try map.getOrPut(arena, entry.key_ptr.event_target);
+            if (!gop.found_existing) gop.value_ptr.* = .empty;
+            try gop.value_ptr.append(arena, entry.key_ptr.type_string.str());
+        }
+    }
+
+    // Inline handlers (onclick, onmousedown, etc.)
+    var attr_it = page._event_target_attr_listeners.iterator();
+    while (attr_it.next()) |entry| {
+        const gop = try map.getOrPut(arena, @intFromPtr(entry.key_ptr.target));
+        if (!gop.found_existing) gop.value_ptr.* = .empty;
+        // Strip "on" prefix to get the event type name.
+        try gop.value_ptr.append(arena, @tagName(entry.key_ptr.handler)[2..]);
+    }
+
+    return map;
+}
+
+pub fn classifyInteractivity(
+    el: *Element,
+    html_el: *Element.Html,
+    listener_targets: ListenerTargetMap,
+) ?InteractivityType {
+    // 1. Native interactive by tag
+    switch (el.getTag()) {
+        .button, .summary, .details, .select, .textarea => return .native,
+        .anchor, .area => {
+            if (el.getAttributeSafe(comptime .wrap("href")) != null) return .native;
+        },
+        .input => {
+            if (el.is(Element.Html.Input)) |input| {
+                if (input._input_type != .hidden) return .native;
+            }
+        },
+        else => {},
+    }
+
+    // 2. ARIA interactive role
+    if (el.getAttributeSafe(comptime .wrap("role"))) |role| {
+        if (isInteractiveRole(role)) return .aria;
+    }
+
+    // 3. contenteditable (15 bytes, exceeds SSO limit for comptime)
+    if (el.getAttributeSafe(.wrap("contenteditable"))) |ce| {
+        if (ce.len == 0 or std.ascii.eqlIgnoreCase(ce, "true")) return .contenteditable;
+    }
+
+    // 4. Event listeners (addEventListener or inline handlers)
+    const et_ptr = @intFromPtr(html_el.asEventTarget());
+    if (listener_targets.get(et_ptr) != null) return .listener;
+
+    // 5. Explicitly focusable via tabindex.
+    // Only count elements with an EXPLICIT tabindex attribute,
+    // since getTabIndex() returns 0 for all interactive tags by default
+    // (including anchors without href and hidden inputs).
+    if (el.getAttributeSafe(comptime .wrap("tabindex"))) |_| {
+        if (html_el.getTabIndex() >= 0) return .focusable;
+    }
+
+    return null;
+}
+
+fn isInteractiveRole(role: []const u8) bool {
+    const interactive_roles = [_][]const u8{
+        "button",           "link",          "tab",        "menuitem",
+        "menuitemcheckbox", "menuitemradio", "switch",     "checkbox",
+        "radio",            "slider",        "spinbutton", "searchbox",
+        "combobox",         "option",        "treeitem",
+    };
+    for (interactive_roles) |r| {
+        if (std.ascii.eqlIgnoreCase(role, r)) return true;
+    }
+    return false;
+}
+
+fn getRole(el: *Element) ?[]const u8 {
+    // Explicit role attribute takes precedence
+    if (el.getAttributeSafe(comptime .wrap("role"))) |role| return role;
+
+    // Implicit role from tag
+    return switch (el.getTag()) {
+        .button, .summary => "button",
+        .anchor, .area => if (el.getAttributeSafe(comptime .wrap("href")) != null) "link" else null,
+        .input => blk: {
+            if (el.is(Element.Html.Input)) |input| {
+                break :blk switch (input._input_type) {
+                    .text, .tel, .url, .email => "textbox",
+                    .checkbox => "checkbox",
+                    .radio => "radio",
+                    .button, .submit, .reset, .image => "button",
+                    .range => "slider",
+                    .number => "spinbutton",
+                    .search => "searchbox",
+                    else => null,
+                };
+            }
+            break :blk null;
+        },
+        .select => "combobox",
+        .textarea => "textbox",
+        .details => "group",
+        else => null,
+    };
+}
+
+fn getAccessibleName(el: *Element, arena: Allocator) !?[]const u8 {
+    // aria-label
+    if (el.getAttributeSafe(comptime .wrap("aria-label"))) |v| {
+        if (v.len > 0) return v;
+    }
+
+    // alt (for img, input[type=image])
+    if (el.getAttributeSafe(comptime .wrap("alt"))) |v| {
+        if (v.len > 0) return v;
+    }
+
+    // title
+    if (el.getAttributeSafe(comptime .wrap("title"))) |v| {
+        if (v.len > 0) return v;
+    }
+
+    // placeholder
+    if (el.getAttributeSafe(comptime .wrap("placeholder"))) |v| {
+        if (v.len > 0) return v;
+    }
+
+    // value (for buttons)
+    if (el.getTag() == .input) {
+        if (el.getAttributeSafe(comptime .wrap("value"))) |v| {
+            if (v.len > 0) return v;
+        }
+    }
+
+    // Text content (first non-empty text node, trimmed)
+    return try getTextContent(el.asNode(), arena);
+}
+
+fn getTextContent(node: *Node, arena: Allocator) !?[]const u8 {
+    var tw: TreeWalker.FullExcludeSelf = .init(node, .{});
+
+    var arr: std.ArrayList(u8) = .empty;
+    var single_chunk: ?[]const u8 = null;
+
+    while (tw.next()) |child| {
+        // Skip text inside script/style elements.
+        if (child.is(Element)) |el| {
+            switch (el.getTag()) {
+                .script, .style => {
+                    tw.skipChildren();
+                    continue;
+                },
+                else => {},
+            }
+        }
+        if (child.is(Node.CData)) |cdata| {
+            if (cdata.is(Node.CData.Text)) |text| {
+                const content = std.mem.trim(u8, text.getWholeText(), &std.ascii.whitespace);
+                if (content.len > 0) {
+                    if (single_chunk == null and arr.items.len == 0) {
+                        single_chunk = content;
+                    } else {
+                        if (single_chunk) |sc| {
+                            try arr.appendSlice(arena, sc);
+                            try arr.append(arena, ' ');
+                            single_chunk = null;
+                        }
+                        try arr.appendSlice(arena, content);
+                        try arr.append(arena, ' ');
+                    }
+                }
+            }
+        }
+    }
+
+    if (single_chunk) |sc| return sc;
+    if (arr.items.len == 0) return null;
+
+    // strip out trailing space
+    return arr.items[0 .. arr.items.len - 1];
+}
+fn isDisabled(el: *Element) bool {
+    if (el.getAttributeSafe(comptime .wrap("disabled")) != null) return true;
+    return isDisabledByFieldset(el);
+}
+
+/// Check if an element is disabled by an ancestor <fieldset disabled>.
+/// Per spec, elements inside the first <legend> child of a disabled fieldset
+/// are NOT disabled by that fieldset.
+fn isDisabledByFieldset(el: *Element) bool {
+    const element_node = el.asNode();
+    var current: ?*Node = element_node._parent;
+    while (current) |node| {
+        current = node._parent;
+        const ancestor = node.is(Element) orelse continue;
+
+        if (ancestor.getTag() == .fieldset and ancestor.getAttributeSafe(comptime .wrap("disabled")) != null) {
+            // Check if element is inside the first <legend> child of this fieldset
+            var child = ancestor.firstElementChild();
+            while (child) |c| {
+                if (c.getTag() == .legend) {
+                    if (c.asNode().contains(element_node)) return false;
+                    break;
+                }
+                child = c.nextElementSibling();
+            }
+            return true;
+        }
+    }
+    return false;
+}
+
+fn getInputType(el: *Element) ?[]const u8 {
+    if (el.is(Element.Html.Input)) |input| {
+        return input._input_type.toString();
+    }
+    return null;
+}
+
+fn getInputValue(el: *Element) ?[]const u8 {
+    if (el.is(Element.Html.Input)) |input| {
+        return input.getValue();
+    }
+    return null;
+}
+
+/// Get all event listener types registered on this target.
+fn getListenerTypes(target: *EventTarget, listener_targets: ListenerTargetMap) []const []const u8 {
+    if (listener_targets.get(@intFromPtr(target))) |types| return types.items;
+    return &.{};
+}
+
+const testing = @import("../testing.zig");
+
+fn testInteractive(html: []const u8) ![]InteractiveElement {
+    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);
+
+    return collectInteractiveElements(div.asNode(), page.call_arena, page);
+}
+
+test "browser.interactive: button" {
+    const elements = try testInteractive("<button>Click me</button>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual("button", elements[0].tag_name);
+    try testing.expectEqual("button", elements[0].role.?);
+    try testing.expectEqual("Click me", elements[0].name.?);
+    try testing.expectEqual(InteractivityType.native, elements[0].interactivity_type);
+}
+
+test "browser.interactive: anchor with href" {
+    const elements = try testInteractive("<a href=\"/page\">Link</a>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual("a", elements[0].tag_name);
+    try testing.expectEqual("link", elements[0].role.?);
+    try testing.expectEqual("Link", elements[0].name.?);
+}
+
+test "browser.interactive: anchor without href" {
+    const elements = try testInteractive("<a>Not a link</a>");
+    try testing.expectEqual(0, elements.len);
+}
+
+test "browser.interactive: input types" {
+    const elements = try testInteractive(
+        \\<input type="text" placeholder="Search">
+        \\<input type="hidden" name="csrf">
+    );
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual("input", elements[0].tag_name);
+    try testing.expectEqual("text", elements[0].input_type.?);
+    try testing.expectEqual("Search", elements[0].placeholder.?);
+}
+
+test "browser.interactive: select and textarea" {
+    const elements = try testInteractive(
+        \\<select name="color"><option>Red</option></select>
+        \\<textarea name="msg"></textarea>
+    );
+    try testing.expectEqual(2, elements.len);
+    try testing.expectEqual("select", elements[0].tag_name);
+    try testing.expectEqual("textarea", elements[1].tag_name);
+}
+
+test "browser.interactive: aria role" {
+    const elements = try testInteractive("<div role=\"button\">Custom</div>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual("div", elements[0].tag_name);
+    try testing.expectEqual("button", elements[0].role.?);
+    try testing.expectEqual(InteractivityType.aria, elements[0].interactivity_type);
+}
+
+test "browser.interactive: contenteditable" {
+    const elements = try testInteractive("<div contenteditable=\"true\">Edit me</div>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual(InteractivityType.contenteditable, elements[0].interactivity_type);
+}
+
+test "browser.interactive: tabindex" {
+    const elements = try testInteractive("<div tabindex=\"0\">Focusable</div>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expectEqual(InteractivityType.focusable, elements[0].interactivity_type);
+    try testing.expectEqual(@as(i32, 0), elements[0].tab_index);
+}
+
+test "browser.interactive: disabled" {
+    const elements = try testInteractive("<button disabled>Off</button>");
+    try testing.expectEqual(1, elements.len);
+    try testing.expect(elements[0].disabled);
+}
+
+test "browser.interactive: disabled by fieldset" {
+    const elements = try testInteractive(
+        \\<fieldset disabled>
+        \\  <button>Disabled</button>
+        \\  <legend><button>In legend</button></legend>
+        \\</fieldset>
+    );
+    try testing.expectEqual(2, elements.len);
+    // Button outside legend is disabled by fieldset
+    try testing.expect(elements[0].disabled);
+    // Button inside first legend is NOT disabled
+    try testing.expect(!elements[1].disabled);
+}
+
+test "browser.interactive: non-interactive div" {
+    const elements = try testInteractive("<div>Just text</div>");
+    try testing.expectEqual(0, elements.len);
+}
+
+test "browser.interactive: details and summary" {
+    const elements = try testInteractive("<details><summary>More</summary><p>Content</p></details>");
+    try testing.expectEqual(2, elements.len);
+    try testing.expectEqual("details", elements[0].tag_name);
+    try testing.expectEqual("summary", elements[1].tag_name);
+}
+
+test "browser.interactive: mixed elements" {
+    const elements = try testInteractive(
+        \\<div>
+        \\  <a href="/home">Home</a>
+        \\  <p>Some text</p>
+        \\  <button id="btn1">Submit</button>
+        \\  <input type="email" placeholder="Email">
+        \\  <div>Not interactive</div>
+        \\  <div role="tab">Tab</div>
+        \\</div>
+    );
+    try testing.expectEqual(4, elements.len);
+}

src/browser/js/Caller.zig

@@ -23,6 +23,7 @@ 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");
 
@@ -33,25 +34,24 @@ const CALL_ARENA_RETAIN = 1024 * 16;
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const Caller = @This();
-local: js.Local,
+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_handle = v8.v8__Isolate__GetCurrentContext(v8_isolate);
-
-    const embedder_data = v8.v8__Context__GetEmbedderData(v8_context_handle, 1);
-    var lossless: bool = undefined;
-    const ctx: *Context = @ptrFromInt(v8.v8__BigInt__Uint64Value(embedder_data, &lossless));
+    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_handle.?,
+            .handle = v8_context,
             .call_arena = ctx.call_arena,
-            .isolate = .{ .handle = v8_isolate },
+            .isolate = ctx.isolate,
         },
         .prev_local = ctx.local,
         .prev_context = ctx.page.js,
@@ -60,6 +60,11 @@ pub fn init(self: *Caller, v8_isolate: *v8.Isolate) void {
     ctx.local = &self.local;
 }
 
+pub fn initFromHandle(self: *Caller, handle: ?*const v8.FunctionCallbackInfo) void {
+    const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+    self.init(isolate);
+}
+
 pub fn deinit(self: *Caller) void {
     const ctx = self.local.ctx;
     const call_depth = ctx.call_depth - 1;
@@ -92,25 +97,28 @@ pub const CallOpts = struct {
 };
 
 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(self.local.isolate);
+    hs.init(local.isolate);
     defer hs.deinit();
 
     const info = FunctionCallbackInfo{ .handle = handle };
 
     if (!info.isConstructCall()) {
-        self.handleError(T, @TypeOf(func), error.InvalidArgument, info, opts);
+        handleError(T, @TypeOf(func), local, error.InvalidArgument, info, opts);
         return;
     }
 
     self._constructor(func, info) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
+        handleError(T, @TypeOf(func), local, err, info, opts);
     };
 }
 
 fn _constructor(self: *Caller, func: anytype, info: FunctionCallbackInfo) !void {
     const F = @TypeOf(func);
-    const args = try self.getArgs(F, 0, info);
+    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 {
@@ -118,12 +126,12 @@ fn _constructor(self: *Caller, func: anytype, info: FunctionCallbackInfo) !void
     };
 
     const new_this_handle = info.getThis();
-    var this = js.Object{ .local = &self.local, .handle = new_this_handle };
+    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 self.local.mapZigInstanceToJs(new_this_handle, non_error_res);
+        this = try local.mapZigInstanceToJs(new_this_handle, non_error_res);
     } else {
-        this = try self.local.mapZigInstanceToJs(new_this_handle, res);
+        this = try local.mapZigInstanceToJs(new_this_handle, res);
     }
 
     // If we got back a different object (existing wrapper), copy the prototype
@@ -140,144 +148,141 @@ fn _constructor(self: *Caller, func: anytype, info: FunctionCallbackInfo) !void
     info.getReturnValue().set(this.handle);
 }
 
-pub fn method(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
-    var hs: js.HandleScope = undefined;
-    hs.init(self.local.isolate);
-    defer hs.deinit();
-
-    const info = FunctionCallbackInfo{ .handle = handle };
-    self._method(T, func, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
-    };
-}
-
-fn _method(self: *Caller, comptime T: type, func: anytype, info: FunctionCallbackInfo, comptime opts: CallOpts) !void {
-    const F = @TypeOf(func);
-    var args = try self.getArgs(F, 1, info);
-
-    const js_this = info.getThis();
-    @field(args, "0") = try TaggedOpaque.fromJS(*T, js_this);
-
-    const res = @call(.auto, func, args);
-
-    const mapped = try self.local.zigValueToJs(res, opts);
-    const return_value = info.getReturnValue();
-    return_value.set(mapped);
-}
-
-pub fn function(self: *Caller, comptime T: type, func: anytype, handle: *const v8.FunctionCallbackInfo, comptime opts: CallOpts) void {
-    var hs: js.HandleScope = undefined;
-    hs.init(self.local.isolate);
-    defer hs.deinit();
-
-    const info = FunctionCallbackInfo{ .handle = handle };
-    self._function(func, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
-    };
-}
-
-fn _function(self: *Caller, func: anytype, info: FunctionCallbackInfo, comptime opts: CallOpts) !void {
-    const F = @TypeOf(func);
-    const args = try self.getArgs(F, 0, info);
-    const res = @call(.auto, func, args);
-    info.getReturnValue().set(try self.local.zigValueToJs(res, opts));
-}
-
 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(self.local.isolate);
+    hs.init(local.isolate);
     defer hs.deinit();
 
     const info = PropertyCallbackInfo{ .handle = handle };
-    return self._getIndex(T, func, idx, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
+    return _getIndex(T, local, func, idx, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
         // not intercepted
         return 0;
     };
 }
 
-fn _getIndex(self: *Caller, comptime T: type, func: anytype, idx: u32, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+fn _getIndex(comptime T: type, local: *const Local, func: anytype, idx: u32, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
     const F = @TypeOf(func);
-    var args = try self.getArgs(F, 2, info);
+    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 self.handleIndexedReturn(T, F, true, ret, info, opts);
+    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(self.local.isolate);
+    hs.init(local.isolate);
     defer hs.deinit();
 
     const info = PropertyCallbackInfo{ .handle = handle };
-    return self._getNamedIndex(T, func, name, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
+    return _getNamedIndex(T, local, func, name, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
         // not intercepted
         return 0;
     };
 }
 
-fn _getNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+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 = try self.getArgs(F, 2, info);
+    var args: ParameterTypes(F) = undefined;
     @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
-    @field(args, "1") = try self.nameToString(@TypeOf(args.@"1"), name);
+    @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 self.handleIndexedReturn(T, F, true, ret, info, opts);
+    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(self.local.isolate);
+    hs.init(local.isolate);
     defer hs.deinit();
 
     const info = PropertyCallbackInfo{ .handle = handle };
-    return self._setNamedIndex(T, func, name, .{ .local = &self.local, .handle = js_value }, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
+    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(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, js_value: js.Value, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+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 self.nameToString(@TypeOf(args.@"1"), name);
-    @field(args, "2") = try self.local.jsValueToZig(@TypeOf(@field(args, "2")), js_value);
+    @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") = self.local.ctx.page;
+        @field(args, "3") = local.ctx.page;
     }
     const ret = @call(.auto, func, args);
-    return self.handleIndexedReturn(T, F, false, ret, info, opts);
+    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(self.local.isolate);
+    hs.init(local.isolate);
     defer hs.deinit();
 
     const info = PropertyCallbackInfo{ .handle = handle };
-    return self._deleteNamedIndex(T, func, name, info, opts) catch |err| {
-        self.handleError(T, @TypeOf(func), err, info, opts);
+    return _deleteNamedIndex(T, local, func, name, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
         return 0;
     };
 }
 
-fn _deleteNamedIndex(self: *Caller, comptime T: type, func: anytype, name: *const v8.Name, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+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 self.nameToString(@TypeOf(args.@"1"), name);
+    @field(args, "1") = try nameToString(local, @TypeOf(args.@"1"), name);
     if (@typeInfo(F).@"fn".params.len == 3) {
-        @field(args, "2") = self.local.ctx.page;
+        @field(args, "2") = local.ctx.page;
     }
     const ret = @call(.auto, func, args);
-    return self.handleIndexedReturn(T, F, false, ret, info, opts);
+    return handleIndexedReturn(T, F, false, local, ret, info, opts);
 }
 
-fn handleIndexedReturn(self: *Caller, comptime T: type, comptime F: type, comptime getter: bool, ret: anytype, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+pub fn getEnumerator(self: *Caller, comptime T: type, func: anytype, 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 _getEnumerator(T, local, func, info, opts) catch |err| {
+        handleError(T, @TypeOf(func), local, err, info, opts);
+        // not intercepted
+        return 0;
+    };
+}
+
+fn _getEnumerator(comptime T: type, local: *const Local, func: anytype, info: PropertyCallbackInfo, comptime opts: CallOpts) !u8 {
+    const F = @TypeOf(func);
+    var args: ParameterTypes(F) = undefined;
+    @field(args, "0") = try TaggedOpaque.fromJS(*T, info.getThis());
+    if (@typeInfo(F).@"fn".params.len == 2) {
+        @field(args, "1") = local.ctx.page;
+    }
+    const ret = @call(.auto, func, args);
+    return handleIndexedReturn(T, F, true, local, ret, info, opts);
+}
+
+fn handleIndexedReturn(comptime T: type, comptime F: type, comptime with_value: 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))) {
@@ -292,7 +297,7 @@ fn handleIndexedReturn(self: *Caller, comptime T: type, comptime F: type, compti
                         return 0;
                     }
                 }
-                self.handleError(T, F, err, info, opts);
+                handleError(T, F, local, err, info, opts);
                 // not intercepted
                 return 0;
             };
@@ -300,8 +305,8 @@ fn handleIndexedReturn(self: *Caller, comptime T: type, comptime F: type, compti
         else => ret,
     };
 
-    if (comptime getter) {
-        info.getReturnValue().set(try self.local.zigValueToJs(non_error_ret, opts));
+    if (comptime with_value) {
+        info.getReturnValue().set(try local.zigValueToJs(non_error_ret, opts));
     }
     // intercepted
     return 1;
@@ -314,36 +319,41 @@ fn isInErrorSet(err: anyerror, comptime T: type) bool {
     return false;
 }
 
-fn nameToString(self: *const Caller, comptime T: type, name: *const v8.Name) !T {
+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 = &self.local, .handle = handle }, false);
+        return js.String.toSSO(.{ .local = local, .handle = handle }, false);
     }
     if (T == string.Global) {
-        return js.String.toSSO(.{ .local = &self.local, .handle = handle }, true);
+        return js.String.toSSO(.{ .local = local, .handle = handle }, true);
     }
-    return try js.String.toSlice(.{ .local = &self.local, .handle = handle });
+    return try js.String.toSlice(.{ .local = local, .handle = handle });
 }
 
-fn handleError(self: *Caller, comptime T: type, comptime F: type, err: anyerror, info: anytype, comptime opts: CallOpts) void {
-    const isolate = self.local.isolate;
+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)) {
-            self.logFunctionCallError(@typeName(T), @typeName(F), err, info);
+    if (comptime IS_DEBUG and @TypeOf(info) == FunctionCallbackInfo) {
+        if (log.enabled(.js, .debug)) {
+            const DOMException = @import("../webapi/DOMException.zig");
+            if (DOMException.fromError(err) == null) {
+                // This isn't a DOMException, let's log it
+                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.TypeError => isolate.createTypeError(""),
         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 = self.local.zigValueToJs(ex, .{}) catch break :blk isolate.createError("internal error");
+                    const value = local.zigValueToJs(ex, .{}) catch break :blk isolate.createError("internal error");
                     break :blk value.handle;
                 }
             }
@@ -355,120 +365,20 @@ fn handleError(self: *Caller, comptime T: type, comptime F: type, err: anyerror,
     info.getReturnValue().setValueHandle(js_exception);
 }
 
-// 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(self: *const Caller, comptime F: type, comptime offset: usize, info: anytype) !ParameterTypes(F) {
-    const local = &self.local;
-    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;
-}
-
 // 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(self: *Caller, type_name: []const u8, func: []const u8, err: anyerror, info: FunctionCallbackInfo) void {
-    const args_dump = self.serializeFunctionArgs(info) catch "failed to serialize args";
-    log.info(.js, "function call error", .{
+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.debug(.js, "function call error", .{
         .type = type_name,
         .func = func,
         .err = err,
         .args = args_dump,
-        .stack = self.local.stackTrace() catch |err1| @errorName(err1),
+        .stack = local.stackTrace() catch |err1| @errorName(err1),
     });
 }
 
-fn serializeFunctionArgs(self: *Caller, info: FunctionCallbackInfo) ![]const u8 {
-    const local = &self.local;
+fn serializeFunctionArgs(local: *const Local, info: FunctionCallbackInfo) ![]const u8 {
     var buf = std.Io.Writer.Allocating.init(local.call_arena);
 
     const separator = log.separator();
@@ -536,6 +446,11 @@ pub const FunctionCallbackInfo = struct {
         return .{ .local = local, .handle = v8.v8__FunctionCallbackInfo__INDEX(self.handle, @intCast(index)).? };
     }
 
+    pub fn getData(self: FunctionCallbackInfo) ?*anyopaque {
+        const data = v8.v8__FunctionCallbackInfo__Data(self.handle) orelse return null;
+        return v8.v8__External__Value(@ptrCast(data));
+    }
+
     pub fn getThis(self: FunctionCallbackInfo) *const v8.Object {
         return v8.v8__FunctionCallbackInfo__This(self.handle).?;
     }
@@ -585,3 +500,279 @@ const ReturnValue = struct {
         v8.v8__ReturnValue__Set(self.handle, handle);
     }
 };
+
+pub const Function = struct {
+    pub const Opts = struct {
+        noop: bool = false,
+        static: bool = false,
+        dom_exception: bool = false,
+        as_typed_array: bool = false,
+        null_as_undefined: bool = false,
+        cache: ?Caching = null,
+        embedded_receiver: bool = false,
+
+        // 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 if (comptime opts.embedded_receiver) {
+            args = try getArgs(F, 1, local, info);
+            @field(args, "0") = @ptrCast(@alignCast(info.getData() orelse unreachable));
+        } 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 (slice_type == js.Value or (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/Context.zig

@@ -23,9 +23,11 @@ const log = @import("../../log.zig");
 const js = @import("js.zig");
 const Env = @import("Env.zig");
 const bridge = @import("bridge.zig");
+const Origin = @import("Origin.zig");
 const Scheduler = @import("Scheduler.zig");
 
 const Page = @import("../Page.zig");
+const Session = @import("../Session.zig");
 const ScriptManager = @import("../ScriptManager.zig");
 
 const v8 = js.v8;
@@ -41,15 +43,16 @@ const Context = @This();
 id: usize,
 env: *Env,
 page: *Page,
+session: *Session,
 isolate: js.Isolate,
 
+// Per-context microtask queue for isolation between contexts
+microtask_queue: *v8.MicrotaskQueue,
+
 // The v8::Global<v8::Context>. When necessary, we can create a v8::Local<<v8::Context>>
 // from this, and we can free it when the context is done.
 handle: v8.Global,
 
-// True if the context is auto-entered,
-entered: bool,
-
 cpu_profiler: ?*v8.CpuProfiler = null,
 
 heap_profiler: ?*v8.HeapProfiler = null,
@@ -74,39 +77,11 @@ call_depth: usize = 0,
 // context.localScope
 local: ?*const js.Local = null,
 
-// Serves two purposes. Like `global_objects`, this is used to free
-// every Global(Object) we've created during the lifetime of the context.
-// More importantly, it serves as an identity map - for a given Zig
-// instance, we map it to the same Global(Object).
-// The key is the @intFromPtr of the Zig value
-identity_map: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+origin: *Origin,
 
-// Any type that is stored in the identity_map which has a finalizer declared
-// will have its finalizer stored here. This is only used when shutting down
-// if v8 hasn't called the finalizer directly itself.
-finalizer_callbacks: std.AutoHashMapUnmanaged(usize, *FinalizerCallback) = .empty,
-finalizer_callback_pool: std.heap.MemoryPool(FinalizerCallback),
-
-// Some web APIs have to manage opaque values. Ideally, they use an
-// js.Object, but the js.Object has no lifetime guarantee beyond the
-// current call. They can call .persist() on their js.Object to get
-// a `Global(Object)`. We need to track these to free them.
-// This used to be a map and acted like identity_map; the key was
-// the @intFromPtr(js_obj.handle). But v8 can re-use address. Without
-// a reliable way to know if an object has already been persisted,
-// we now simply persist every time persist() is called.
-global_values: std.ArrayList(v8.Global) = .empty,
-global_objects: std.ArrayList(v8.Global) = .empty,
+// Unlike other v8 types, like functions or objects, modules are not shared
+// across origins.
 global_modules: std.ArrayList(v8.Global) = .empty,
-global_promises: std.ArrayList(v8.Global) = .empty,
-global_functions: std.ArrayList(v8.Global) = .empty,
-global_promise_resolvers: std.ArrayList(v8.Global) = .empty,
-
-// Temp variants stored in HashMaps for O(1) early cleanup.
-// Key is global.data_ptr.
-global_values_temp: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
-global_promises_temp: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
-global_functions_temp: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
 
 // Our module cache: normalized module specifier => module.
 module_cache: std.StringHashMapUnmanaged(ModuleEntry) = .empty,
@@ -124,10 +99,6 @@ script_manager: ?*ScriptManager,
 // Our macrotasks
 scheduler: Scheduler,
 
-// Prevents us from enqueuing a microtask for this context while we're shutting
-// down.
-shutting_down: bool = false,
-
 unknown_properties: (if (IS_DEBUG) std.StringHashMapUnmanaged(UnknownPropertyStat) else void) = if (IS_DEBUG) .{} else {},
 
 const ModuleEntry = struct {
@@ -148,21 +119,16 @@ const ModuleEntry = struct {
     resolver_promise: ?js.Promise.Global = null,
 };
 
-fn fromC(c_context: *const v8.Context) *Context {
-    const data = v8.v8__Context__GetEmbedderData(c_context, 1).?;
-    const big_int = js.BigInt{ .handle = @ptrCast(data) };
-    return @ptrFromInt(big_int.getUint64());
+pub fn fromC(c_context: *const v8.Context) *Context {
+    return @ptrCast(@alignCast(v8.v8__Context__GetAlignedPointerFromEmbedderData(c_context, 1)));
 }
 
 pub fn fromIsolate(isolate: js.Isolate) *Context {
-    const v8_context = v8.v8__Isolate__GetCurrentContext(isolate.handle).?;
-    const data = v8.v8__Context__GetEmbedderData(v8_context, 1).?;
-    const big_int = js.BigInt{ .handle = @ptrCast(data) };
-    return @ptrFromInt(big_int.getUint64());
+    return fromC(v8.v8__Isolate__GetCurrentContext(isolate.handle).?);
 }
 
 pub fn deinit(self: *Context) void {
-    if (comptime IS_DEBUG) {
+    if (comptime IS_DEBUG and @import("builtin").is_test == false) {
         var it = self.unknown_properties.iterator();
         while (it.next()) |kv| {
             log.debug(.unknown_prop, "unknown property", .{
@@ -172,91 +138,66 @@ pub fn deinit(self: *Context) void {
             });
         }
     }
-    defer self.env.app.arena_pool.release(self.arena);
+
+    const env = self.env;
+    defer env.app.arena_pool.release(self.arena);
 
     var hs: js.HandleScope = undefined;
     const entered = self.enter(&hs);
     defer entered.exit();
 
-    // We might have microtasks in the isolate that refence this context. The
-    // only option we have is to run them. But a microtask could queue another
-    // microtask, so we set the shutting_down flag, so that any such microtask
-    // will be a noop (this isn't automatic, when v8 calls our microtask callback
-    // the first thing we'll check is if self.shutting_down == true).
-    self.shutting_down = true;
-    self.env.runMicrotasks();
-
-    // can release objects
+    // this can release objects
     self.scheduler.deinit();
 
-    {
-        var it = self.identity_map.valueIterator();
-        while (it.next()) |global| {
-            v8.v8__Global__Reset(global);
-        }
-    }
-    {
-        var it = self.finalizer_callbacks.valueIterator();
-        while (it.next()) |finalizer| {
-            finalizer.*.deinit();
-        }
-        self.finalizer_callback_pool.deinit();
-    }
-
-    for (self.global_values.items) |*global| {
-        v8.v8__Global__Reset(global);
-    }
-
-    for (self.global_objects.items) |*global| {
-        v8.v8__Global__Reset(global);
-    }
-
     for (self.global_modules.items) |*global| {
         v8.v8__Global__Reset(global);
     }
 
-    for (self.global_functions.items) |*global| {
-        v8.v8__Global__Reset(global);
-    }
-
-    for (self.global_promises.items) |*global| {
-        v8.v8__Global__Reset(global);
-    }
-
-    for (self.global_promise_resolvers.items) |*global| {
-        v8.v8__Global__Reset(global);
-    }
-
-    {
-        var it = self.global_values_temp.valueIterator();
-        while (it.next()) |global| {
-            v8.v8__Global__Reset(global);
-        }
-    }
-
-    {
-        var it = self.global_promises_temp.valueIterator();
-        while (it.next()) |global| {
-            v8.v8__Global__Reset(global);
-        }
-    }
-
-    {
-        var it = self.global_functions_temp.valueIterator();
-        while (it.next()) |global| {
-            v8.v8__Global__Reset(global);
-        }
-    }
-
-    if (self.entered) {
-        v8.v8__Context__Exit(@ptrCast(v8.v8__Global__Get(&self.handle, self.isolate.handle)));
-    }
+    self.session.releaseOrigin(self.origin);
 
     v8.v8__Global__Reset(&self.handle);
+    env.isolate.notifyContextDisposed();
+    // There can be other tasks associated with this context that we need to
+    // purge while the context is still alive.
+    _ = env.pumpMessageLoop();
+    v8.v8__MicrotaskQueue__DELETE(self.microtask_queue);
+}
+
+pub fn setOrigin(self: *Context, key: ?[]const u8) !void {
+    const env = self.env;
+    const isolate = env.isolate;
+
+    const origin = try self.session.getOrCreateOrigin(key);
+    errdefer self.session.releaseOrigin(origin);
+
+    try self.origin.transferTo(origin);
+    lp.assert(self.origin.rc == 1, "Ref opaque origin", .{ .rc = self.origin.rc });
+    self.origin.deinit(env.app);
+
+    self.origin = origin;
+
+    {
+        var ls: js.Local.Scope = undefined;
+        self.localScope(&ls);
+        defer ls.deinit();
+
+        // Set the V8::Context SecurityToken, which is a big part of what allows
+        // one context to access another.
+        const token_local = v8.v8__Global__Get(&origin.security_token, isolate.handle);
+        v8.v8__Context__SetSecurityToken(ls.local.handle, token_local);
+    }
+}
+
+pub fn trackGlobal(self: *Context, global: v8.Global) !void {
+    return self.origin.trackGlobal(global);
+}
+
+pub fn trackTemp(self: *Context, global: v8.Global) !void {
+    return self.origin.trackTemp(global);
 }
 
 pub fn weakRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
+    const fc = self.origin.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
         if (comptime IS_DEBUG) {
             // should not be possible
             std.debug.assert(false);
@@ -267,7 +208,7 @@ pub fn weakRef(self: *Context, obj: anytype) void {
 }
 
 pub fn safeWeakRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
+    const fc = self.origin.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
         if (comptime IS_DEBUG) {
             // should not be possible
             std.debug.assert(false);
@@ -279,7 +220,7 @@ pub fn safeWeakRef(self: *Context, obj: anytype) void {
 }
 
 pub fn strongRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
+    const fc = self.origin.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
         if (comptime IS_DEBUG) {
             // should not be possible
             std.debug.assert(false);
@@ -289,55 +230,19 @@ pub fn strongRef(self: *Context, obj: anytype) void {
     v8.v8__Global__ClearWeak(&fc.global);
 }
 
-pub fn release(self: *Context, item: anytype) void {
-    if (@TypeOf(item) == *anyopaque) {
-        // Existing *anyopaque path for identity_map. Called internally from
-        // finalizers
-        var global = self.identity_map.fetchRemove(@intFromPtr(item)) orelse {
-            if (comptime IS_DEBUG) {
-                // should not be possible
-                std.debug.assert(false);
-            }
-            return;
-        };
-        v8.v8__Global__Reset(&global.value);
-
-        // The item has been fianalized, remove it for the finalizer callback so that
-        // we don't try to call it again on shutdown.
-        const fc = self.finalizer_callbacks.fetchRemove(@intFromPtr(item)) orelse {
-            if (comptime IS_DEBUG) {
-                // should not be possible
-                std.debug.assert(false);
-            }
-            return;
-        };
-        self.finalizer_callback_pool.destroy(fc.value);
-        return;
-    }
-
-    var map = switch (@TypeOf(item)) {
-        js.Value.Temp => &self.global_values_temp,
-        js.Promise.Temp => &self.global_promises_temp,
-        js.Function.Temp => &self.global_functions_temp,
-        else => |T| @compileError("Context.release cannot be called with a " ++ @typeName(T)),
-    };
-
-    if (map.fetchRemove(item.handle.data_ptr)) |kv| {
-        var global = kv.value;
-        v8.v8__Global__Reset(&global);
-    }
-}
-
 // Any operation on the context have to be made from a local.
 pub fn localScope(self: *Context, ls: *js.Local.Scope) void {
     const isolate = self.isolate;
     js.HandleScope.init(&ls.handle_scope, isolate);
 
+    const local_v8_context: *const v8.Context = @ptrCast(v8.v8__Global__Get(&self.handle, isolate.handle));
+    v8.v8__Context__Enter(local_v8_context);
+
     // TODO: add and init ls.hs  for the handlescope
     ls.local = .{
         .ctx = self,
-        .handle = @ptrCast(v8.v8__Global__Get(&self.handle, isolate.handle)),
         .isolate = isolate,
+        .handle = local_v8_context,
         .call_arena = self.call_arena,
     };
 }
@@ -347,29 +252,18 @@ pub fn toLocal(self: *Context, global: anytype) js.Local.ToLocalReturnType(@Type
     return l.toLocal(global);
 }
 
-// This isn't expected to be called often. It's for converting attributes into
-// function calls, e.g. <body onload="doSomething"> will turn that "doSomething"
-// string into a js.Function which looks like: function(e) { doSomething(e) }
-// There might be more efficient ways to do this, but doing it this way means
-// our code only has to worry about js.Funtion, not some union of a js.Function
-// or a string.
-pub fn stringToPersistedFunction(self: *Context, str: []const u8) !js.Function.Global {
+pub fn stringToPersistedFunction(
+    self: *Context,
+    function_body: []const u8,
+    comptime parameter_names: []const []const u8,
+    extensions: []const v8.Object,
+) !js.Function.Global {
     var ls: js.Local.Scope = undefined;
     self.localScope(&ls);
     defer ls.deinit();
 
-    var extra: []const u8 = "";
-    const normalized = std.mem.trim(u8, str, &std.ascii.whitespace);
-    if (normalized.len > 0 and normalized[normalized.len - 1] != ')') {
-        extra = "(e)";
-    }
-    const full = try std.fmt.allocPrintSentinel(self.call_arena, "(function(e) {{ {s}{s} }})", .{ normalized, extra }, 0);
-
-    const js_val = try ls.local.compileAndRun(full, null);
-    if (!js_val.isFunction()) {
-        return error.StringFunctionError;
-    }
-    return try (js.Function{ .local = &ls.local, .handle = @ptrCast(js_val.handle) }).persist();
+    const js_function = try ls.local.compileFunction(function_body, parameter_names, extensions);
+    return js_function.persist();
 }
 
 pub fn module(self: *Context, comptime want_result: bool, local: *const js.Local, src: []const u8, url: []const u8, cacheable: bool) !(if (want_result) ModuleEntry else void) {
@@ -547,6 +441,14 @@ fn postCompileModule(self: *Context, mod: js.Module, url: [:0]const u8, local: *
             nested_gop.key_ptr.* = owned_specifier;
             nested_gop.value_ptr.* = .{};
             try script_manager.preloadImport(owned_specifier, url);
+        } else if (nested_gop.value_ptr.module == null) {
+            // Entry exists but module failed to compile previously.
+            // The imported_modules entry may have been consumed, so
+            // re-preload to ensure waitForImport can find it.
+            // Key was stored via dupeZ so it has a sentinel in memory.
+            const key = nested_gop.key_ptr.*;
+            const key_z: [:0]const u8 = key.ptr[0..key.len :0];
+            try script_manager.preloadImport(key_z, url);
         }
     }
 }
@@ -612,9 +514,18 @@ pub fn dynamicModuleCallback(
         .isolate = self.isolate,
     };
 
-    const resource = js.String.toSliceZ(.{ .local = &local, .handle = resource_name.? }) catch |err| {
-        log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback1" });
-        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+    const resource = blk: {
+        const resource_value = js.Value{ .handle = resource_name.?, .local = &local };
+        if (resource_value.isNullOrUndefined()) {
+            // will only be null / undefined in extreme cases (e.g. WPT tests)
+            // where you're
+            break :blk self.page.base();
+        }
+
+        break :blk js.String.toSliceZ(.{ .local = &local, .handle = resource_name.? }) catch |err| {
+            log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback1" });
+            return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+        };
     };
 
     const specifier = js.String.toSliceZ(.{ .local = &local, .handle = v8_specifier.? }) catch |err| {
@@ -686,7 +597,15 @@ fn _resolveModuleCallback(self: *Context, referrer: js.Module, specifier: [:0]co
         return local.toLocal(m).handle;
     }
 
-    var source = try self.script_manager.?.waitForImport(normalized_specifier);
+    var source = self.script_manager.?.waitForImport(normalized_specifier) catch |err| switch (err) {
+        error.UnknownModule => blk: {
+            // Module is in cache but was consumed from imported_modules
+            // (e.g., by a previous failed resolution). Re-preload and retry.
+            try self.script_manager.?.preloadImport(normalized_specifier, referrer_path);
+            break :blk try self.script_manager.?.waitForImport(normalized_specifier);
+        },
+        else => return err,
+    };
     defer source.deinit();
 
     var try_catch: js.TryCatch = undefined;
@@ -789,9 +708,16 @@ fn _dynamicModuleCallback(self: *Context, specifier: [:0]const u8, referrer: []c
             entry.module_promise = try module_resolver.promise().persist();
         } else {
             // the module was loaded, but not evaluated, we _have_ to evaluate it now
+            if (status == .kUninstantiated) {
+                if (try mod.instantiate(resolveModuleCallback) == false) {
+                    _ = resolver.reject("module instantiation", local.newString("Module instantiation failed"));
+                    return promise;
+                }
+            }
+
             const evaluated = mod.evaluate() catch {
                 if (comptime IS_DEBUG) {
-                    std.debug.assert(status == .kErrored);
+                    std.debug.assert(mod.getStatus() == .kErrored);
                 }
                 _ = resolver.reject("module evaluation", local.newString("Module evaluation failed"));
                 return promise;
@@ -871,13 +797,12 @@ fn resolveDynamicModule(self: *Context, state: *DynamicModuleResolveState, modul
 
     const then_callback = newFunctionWithData(local, struct {
         pub fn callback(callback_handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-            const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(callback_handle).?;
             var c: Caller = undefined;
-            c.init(isolate);
+            c.initFromHandle(callback_handle);
             defer c.deinit();
 
-            const info_data = v8.v8__FunctionCallbackInfo__Data(callback_handle).?;
-            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(v8.v8__External__Value(@ptrCast(info_data))));
+            const info = Caller.FunctionCallbackInfo{ .handle = callback_handle.? };
+            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(info.getData() orelse return));
 
             if (s.context_id != c.local.ctx.id) {
                 // The microtask is tied to the isolate, not the context
@@ -896,17 +821,15 @@ fn resolveDynamicModule(self: *Context, state: *DynamicModuleResolveState, modul
 
     const catch_callback = newFunctionWithData(local, struct {
         pub fn callback(callback_handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-            const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(callback_handle).?;
             var c: Caller = undefined;
-            c.init(isolate);
+            c.initFromHandle(callback_handle);
             defer c.deinit();
 
-            const info_data = v8.v8__FunctionCallbackInfo__Data(callback_handle).?;
-            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(v8.v8__External__Value(@ptrCast(info_data))));
+            const info = Caller.FunctionCallbackInfo{ .handle = callback_handle.? };
+            const s: *DynamicModuleResolveState = @ptrCast(@alignCast(info.getData() orelse return));
 
             const l = &c.local;
-            const ctx = l.ctx;
-            if (s.context_id != ctx.id) {
+            if (s.context_id != l.ctx.id) {
                 return;
             }
 
@@ -998,13 +921,10 @@ pub fn queueSlotchangeDelivery(self: *Context) !void {
 // But for these Context microtasks, we want to (a) make sure the context isn't
 // being shut down and (b) that it's entered.
 fn enqueueMicrotask(self: *Context, callback: anytype) void {
-    self.isolate.enqueueMicrotask(struct {
+    // Use context-specific microtask queue instead of isolate queue
+    v8.v8__MicrotaskQueue__EnqueueMicrotask(self.microtask_queue, self.isolate.handle, struct {
         fn run(data: ?*anyopaque) callconv(.c) void {
             const ctx: *Context = @ptrCast(@alignCast(data.?));
-            if (ctx.shutting_down) {
-                return;
-            }
-
             var hs: js.HandleScope = undefined;
             const entered = ctx.enter(&hs);
             defer entered.exit();
@@ -1013,38 +933,18 @@ fn enqueueMicrotask(self: *Context, callback: anytype) void {
     }.run, self);
 }
 
+// There's an assumption here: the js.Function will be alive when microtasks are
+// run. If we're Env.runMicrotasks in all the places that we're supposed to, then
+// this should be safe (I think). In whatever HandleScope a microtask is enqueued,
+// PerformCheckpoint should be run. So the v8::Local<v8::Function> should remain
+// valid. If we have problems with this, a simple solution is to provide a Zig
+// wrapper for these callbacks which references a js.Function.Temp, on callback
+// it executes the function and then releases the global.
 pub fn queueMicrotaskFunc(self: *Context, cb: js.Function) void {
-    self.isolate.enqueueMicrotaskFunc(cb);
+    // Use context-specific microtask queue instead of isolate queue
+    v8.v8__MicrotaskQueue__EnqueueMicrotaskFunc(self.microtask_queue, self.isolate.handle, cb.handle);
 }
 
-pub fn createFinalizerCallback(self: *Context, global: v8.Global, ptr: *anyopaque, finalizerFn: *const fn (ptr: *anyopaque) void) !*FinalizerCallback {
-    const fc = try self.finalizer_callback_pool.create();
-    fc.* = .{
-        .ctx = self,
-        .ptr = ptr,
-        .global = global,
-        .finalizerFn = finalizerFn,
-    };
-    return fc;
-}
-
-// == Misc ==
-// A type that has a finalizer can have its finalizer called one of two ways.
-// The first is from V8 via the WeakCallback we give to weakRef. But that isn't
-// guaranteed to fire, so we track this in ctx._finalizers and call them on
-// context shutdown.
-pub const FinalizerCallback = struct {
-    ctx: *Context,
-    ptr: *anyopaque,
-    global: v8.Global,
-    finalizerFn: *const fn (ptr: *anyopaque) void,
-
-    pub fn deinit(self: *FinalizerCallback) void {
-        self.finalizerFn(self.ptr);
-        self.ctx.finalizer_callback_pool.destroy(self);
-    }
-};
-
 // == Profiler ==
 pub fn startCpuProfiler(self: *Context) void {
     if (comptime !IS_DEBUG) {

src/browser/js/Env.zig

@@ -26,6 +26,7 @@ const App = @import("../../App.zig");
 const log = @import("../../log.zig");
 
 const bridge = @import("bridge.zig");
+const Origin = @import("Origin.zig");
 const Context = @import("Context.zig");
 const Isolate = @import("Isolate.zig");
 const Platform = @import("Platform.zig");
@@ -39,6 +40,14 @@ const JsApis = bridge.JsApis;
 const Allocator = std.mem.Allocator;
 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,
 // and it's where we'll start ExecutionWorlds, which actually execute JavaScript.
@@ -49,18 +58,26 @@ const Env = @This();
 
 app: *App,
 
+allocator: Allocator,
+
 platform: *const Platform,
 
 // the global isolate
 isolate: js.Isolate,
 
-contexts: std.ArrayList(*js.Context),
+contexts: [64]*Context,
+context_count: usize,
 
 // just kept around because we need to free it on deinit
 isolate_params: *v8.CreateParams,
 
 context_id: usize,
 
+// Maps origin -> shared Origin contains, for v8 values shared across
+// same-origin Contexts. There's a mismatch here between our JS model and our
+// Browser model. Origins only live as long as the root page of a session exists.
+// It would be wrong/dangerous to re-use an Origin across root page navigations.
+
 // Global handles that need to be freed on deinit
 eternal_function_templates: []v8.Eternal,
 
@@ -73,11 +90,28 @@ 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,
+
+microtask_queues_are_running: bool,
+
 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;
 
@@ -114,13 +148,13 @@ pub fn init(app: *App, opts: InitOpts) !Env {
     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;
+        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
@@ -152,7 +186,24 @@ pub fn init(app: *App, opts: InitOpts) !Env {
             .data = null,
             .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
         });
+        // I don't 100% understand this. We actually set this up in the snapshot,
+        // but for the global instance, it doesn't work. SetIndexedHandler and
+        // SetNamedHandler are set on the Instance template, and that's the key
+        // difference. The context has its own global instance, so we need to set
+        // these back up directly on it. There might be a better way to do this.
+        v8.v8__ObjectTemplate__SetIndexedHandler(global_template_local, &.{
+            .getter = Window.JsApi.index.getter,
+            .setter = null,
+            .query = null,
+            .deleter = null,
+            .enumerator = null,
+            .definer = null,
+            .descriptor = null,
+            .data = null,
+            .flags = 0,
+        });
         v8.v8__Eternal__New(isolate_handle, @ptrCast(global_template_local), &global_eternal);
+        private_symbols = PrivateSymbols.init(isolate_handle);
     }
 
     var inspector: ?*js.Inspector = null;
@@ -163,34 +214,39 @@ pub fn init(app: *App, opts: InitOpts) !Env {
     return .{
         .app = app,
         .context_id = 0,
-        .contexts = .empty,
+        .allocator = allocator,
+        .contexts = undefined,
+        .context_count = 0,
         .isolate = isolate,
         .platform = &app.platform,
         .templates = templates,
         .isolate_params = params,
         .inspector = inspector,
-        .eternal_function_templates = eternal_function_templates,
         .global_template = global_eternal,
+        .private_symbols = private_symbols,
+        .microtask_queues_are_running = false,
+        .eternal_function_templates = eternal_function_templates,
     };
 }
 
 pub fn deinit(self: *Env) void {
     if (comptime IS_DEBUG) {
-        std.debug.assert(self.contexts.items.len == 0);
+        std.debug.assert(self.context_count == 0);
     }
-    for (self.contexts.items) |ctx| {
+    for (self.contexts[0..self.context_count]) |ctx| {
         ctx.deinit();
     }
 
-    const allocator = self.app.allocator;
+    const app = self.app;
+    const allocator = 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();
@@ -198,7 +254,7 @@ pub fn deinit(self: *Env) void {
     allocator.destroy(self.isolate_params);
 }
 
-pub fn createContext(self: *Env, page: *Page, enter: bool) !*Context {
+pub fn createContext(self: *Env, page: *Page) !*Context {
     const context_arena = try self.app.arena_pool.acquire();
     errdefer self.app.arena_pool.release(context_arena);
 
@@ -207,59 +263,91 @@ pub fn createContext(self: *Env, page: *Page, enter: bool) !*Context {
     hs.init(isolate);
     defer hs.deinit();
 
+    // Create a per-context microtask queue for isolation
+    const microtask_queue = v8.v8__MicrotaskQueue__New(isolate.handle, v8.kExplicit).?;
+    errdefer v8.v8__MicrotaskQueue__DELETE(microtask_queue);
+
     // 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).?));
-    const v8_context = v8.v8__Context__New(isolate.handle, global_template, null).?;
+    v8.v8__ObjectTemplate__SetInternalFieldCount(global_template, comptime Snapshot.countInternalFields(Window.JsApi));
+
+    const v8_context = v8.v8__Context__New__Config(isolate.handle, &.{
+        .global_template = global_template,
+        .global_object = null,
+        .microtask_queue = microtask_queue,
+    }).?;
 
     // 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);
 
-    // our window wrapped in a v8::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 origin = try page._session.getOrCreateOrigin(null);
+    errdefer page._session.releaseOrigin(origin);
+
     const context = try context_arena.create(Context);
     context.* = .{
         .env = self,
         .page = page,
+        .session = page._session,
+        .origin = origin,
         .id = context_id,
-        .entered = enter,
         .isolate = isolate,
         .arena = context_arena,
         .handle = context_global,
         .templates = self.templates,
         .call_arena = page.call_arena,
+        .microtask_queue = microtask_queue,
         .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);
+    try context.origin.identity_map.putNoClobber(origin.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));
+    v8.v8__Context__SetAlignedPointerInEmbedderData(v8_context, 1, @ptrCast(context));
+
+    const count = self.context_count;
+    if (count >= self.contexts.len) {
+        return error.TooManyContexts;
+    }
+    self.contexts[count] = context;
+    self.context_count = count + 1;
 
-    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| {
+    for (self.contexts[0..self.context_count], 0..) |ctx, i| {
         if (ctx == context) {
-            _ = self.contexts.swapRemove(i);
+            // Swap with last element and decrement count
+            self.context_count -= 1;
+            self.contexts[i] = self.contexts[self.context_count];
             break;
         }
     } else {
@@ -277,16 +365,26 @@ pub fn destroyContext(self: *Env, context: *Context) void {
     }
 
     context.deinit();
-    isolate.notifyContextDisposed();
 }
 
-pub fn runMicrotasks(self: *const Env) void {
-    self.isolate.performMicrotasksCheckpoint();
+pub fn runMicrotasks(self: *Env) void {
+    if (self.microtask_queues_are_running == false) {
+        const v8_isolate = self.isolate.handle;
+
+        self.microtask_queues_are_running = true;
+        defer self.microtask_queues_are_running = false;
+
+        var i: usize = 0;
+        while (i < self.context_count) : (i += 1) {
+            const ctx = self.contexts[i];
+            v8.v8__MicrotaskQueue__PerformCheckpoint(ctx.microtask_queue, v8_isolate);
+        }
+    }
 }
 
 pub fn runMacrotasks(self: *Env) !?u64 {
     var ms_to_next_task: ?u64 = null;
-    for (self.contexts.items) |ctx| {
+    for (self.contexts[0..self.context_count]) |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
@@ -309,12 +407,31 @@ pub fn runMacrotasks(self: *Env) !?u64 {
     return ms_to_next_task;
 }
 
-pub fn pumpMessageLoop(self: *const Env) bool {
+pub fn pumpMessageLoop(self: *const Env) void {
     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);
+    const isolate = self.isolate.handle;
+    const platform = self.platform.handle;
+    while (v8.v8__Platform__PumpMessageLoop(platform, isolate, false)) {}
+}
+
+pub fn hasBackgroundTasks(self: *const Env) bool {
+    return v8.v8__Isolate__HasPendingBackgroundTasks(self.isolate.handle);
+}
+
+pub fn waitForBackgroundTasks(self: *Env) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate.handle);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    const isolate = self.isolate.handle;
+    const platform = self.platform.handle;
+    while (v8.v8__Isolate__HasPendingBackgroundTasks(isolate)) {
+        _ = v8.v8__Platform__PumpMessageLoop(platform, isolate, true);
+        self.runMicrotasks();
+    }
 }
 
 pub fn runIdleTasks(self: *const Env) void {
@@ -370,6 +487,10 @@ pub fn dumpMemoryStats(self: *Env) void {
     , .{ stats.total_heap_size, stats.total_heap_size_executable, stats.total_physical_size, stats.total_available_size, stats.used_heap_size, stats.heap_size_limit, stats.malloced_memory, stats.external_memory, stats.peak_malloced_memory, stats.number_of_native_contexts, stats.number_of_detached_contexts, stats.total_global_handles_size, stats.used_global_handles_size, stats.does_zap_garbage });
 }
 
+pub fn terminate(self: *const Env) void {
+    v8.v8__Isolate__TerminateExecution(self.isolate.handle);
+}
+
 fn promiseRejectCallback(message_handle: v8.PromiseRejectMessage) callconv(.c) void {
     const promise_handle = v8.v8__PromiseRejectMessage__GetPromise(&message_handle).?;
     const v8_isolate = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
@@ -405,3 +526,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/Function.zig

@@ -160,8 +160,8 @@ fn _tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args
             try_catch.rethrow();
             return error.TryCatchRethrow;
         }
-        caught.* = try_catch.caughtOrError(local.call_arena, error.JSExecCallback);
-        return error.JSExecCallback;
+        caught.* = try_catch.caughtOrError(local.call_arena, error.JsException);
+        return error.JsException;
     };
 
     if (@typeInfo(T) == .void) {
@@ -209,11 +209,11 @@ fn _persist(self: *const Function, comptime is_global: bool) !(if (is_global) Gl
     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);
+        try ctx.trackGlobal(global);
+        return .{ .handle = global, .origin = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .origin = ctx.origin };
 }
 
 pub fn tempWithThis(self: *const Function, value: anytype) !Temp {
@@ -226,15 +226,18 @@ pub fn persistWithThis(self: *const Function, value: anytype) !Global {
     return with_this.persist();
 }
 
-pub const Temp = G(0);
-pub const Global = G(1);
+pub const Temp = G(.temp);
+pub const Global = G(.global);
 
-fn G(comptime discriminator: u8) type {
+const GlobalType = enum(u8) {
+    temp,
+    global,
+};
+
+fn G(comptime global_type: GlobalType) type {
     return struct {
         handle: v8.Global,
-
-        // makes the types different (G(0) != G(1)), without taking up space
-        comptime _: u8 = discriminator,
+        origin: if (global_type == .temp) *js.Origin else void,
 
         const Self = @This();
 
@@ -252,5 +255,9 @@ fn G(comptime discriminator: u8) type {
         pub fn isEqual(self: *const Self, other: Function) bool {
             return v8.v8__Global__IsEqual(&self.handle, other.handle);
         }
+
+        pub fn release(self: *const Self) void {
+            self.origin.releaseTemp(self.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

@@ -130,6 +130,12 @@ pub fn contextCreated(
 
 pub fn contextDestroyed(self: *Inspector, context: *const v8.Context) void {
     v8.v8_inspector__Inspector__ContextDestroyed(self.handle, context);
+
+    if (self.default_context) |*dc| {
+        if (v8.v8__Global__IsEqual(dc, context)) {
+            self.default_context = null;
+        }
+    }
 }
 
 pub fn resetContextGroup(self: *const Inspector) void {
@@ -241,8 +247,6 @@ pub const Session = struct {
             msg.ptr,
             msg.len,
         );
-
-        v8.v8__Isolate__PerformMicrotaskCheckpoint(isolate);
     }
 
     // Gets a value by object ID regardless of which context it is in.
@@ -364,9 +368,8 @@ pub fn getTaggedOpaque(value: *const v8.Value) ?*TaggedOpaque {
         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 {

src/browser/js/Isolate.zig

@@ -41,18 +41,6 @@ pub fn exit(self: Isolate) void {
     v8.v8__Isolate__Exit(self.handle);
 }
 
-pub fn performMicrotasksCheckpoint(self: Isolate) void {
-    v8.v8__Isolate__PerformMicrotaskCheckpoint(self.handle);
-}
-
-pub fn enqueueMicrotask(self: Isolate, callback: anytype, data: anytype) void {
-    v8.v8__Isolate__EnqueueMicrotask(self.handle, callback, data);
-}
-
-pub fn enqueueMicrotaskFunc(self: Isolate, function: js.Function) void {
-    v8.v8__Isolate__EnqueueMicrotaskFunc(self.handle, function.handle);
-}
-
 pub fn lowMemoryNotification(self: Isolate) void {
     v8.v8__Isolate__LowMemoryNotification(self.handle);
 }

src/browser/js/Local.zig

@@ -17,6 +17,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Page = @import("../Page.zig");
+const Session = @import("../Session.zig");
 const log = @import("../../log.zig");
 const string = @import("../../string.zig");
 
@@ -75,8 +77,34 @@ pub fn newArray(self: *const Local, len: u32) js.Array {
     };
 }
 
+/// Creates a new typed array. Memory is owned by JS context.
+/// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Typed_arrays
+pub fn createTypedArray(self: *const Local, comptime array_type: js.ArrayType, size: usize) js.ArrayBufferRef(array_type) {
+    return .init(self, size);
+}
+
+pub fn newCallback(
+    self: *const Local,
+    callback: anytype,
+    data: anytype,
+) js.Function {
+    const external = self.isolate.createExternal(data);
+    const handle = v8.v8__Function__New__DEFAULT2(self.handle, struct {
+        fn wrap(info_handle: ?*const js.v8.FunctionCallbackInfo) callconv(.c) void {
+            Caller.Function.call(@TypeOf(data), info_handle.?, callback, .{ .embedded_receiver = true });
+        }
+    }.wrap, @ptrCast(external)).?;
+    return .{ .local = self, .handle = handle };
+}
+
+pub fn runMacrotasks(self: *const Local) void {
+    const env = self.ctx.env;
+    env.pumpMessageLoop();
+    env.runMicrotasks(); // macrotasks can cause microtasks to queue
+}
+
 pub fn runMicrotasks(self: *const Local) void {
-    self.isolate.performMicrotasksCheckpoint();
+    self.ctx.env.runMicrotasks();
 }
 
 // == Executors ==
@@ -88,6 +116,49 @@ pub fn exec(self: *const Local, src: []const u8, name: ?[]const u8) !js.Value {
     return self.compileAndRun(src, name);
 }
 
+/// Compiles a function body as function.
+///
+/// https://v8.github.io/api/head/classv8_1_1ScriptCompiler.html#a3a15bb5a7dfc3f998e6ac789e6b4646a
+pub fn compileFunction(
+    self: *const Local,
+    function_body: []const u8,
+    /// We tend to know how many params we'll pass; can remove the comptime if necessary.
+    comptime parameter_names: []const []const u8,
+    extensions: []const v8.Object,
+) !js.Function {
+    // TODO: Make configurable.
+    const script_name = self.isolate.initStringHandle("anonymous");
+    const script_source = self.isolate.initStringHandle(function_body);
+
+    var parameter_list: [parameter_names.len]*const v8.String = undefined;
+    inline for (0..parameter_names.len) |i| {
+        parameter_list[i] = self.isolate.initStringHandle(parameter_names[i]);
+    }
+
+    // Create `ScriptOrigin`.
+    var origin: v8.ScriptOrigin = undefined;
+    v8.v8__ScriptOrigin__CONSTRUCT(&origin, script_name);
+
+    // Create `ScriptCompilerSource`.
+    var script_compiler_source: v8.ScriptCompilerSource = undefined;
+    v8.v8__ScriptCompiler__Source__CONSTRUCT2(script_source, &origin, null, &script_compiler_source);
+    defer v8.v8__ScriptCompiler__Source__DESTRUCT(&script_compiler_source);
+
+    // Compile the function.
+    const result = v8.v8__ScriptCompiler__CompileFunction(
+        self.handle,
+        &script_compiler_source,
+        parameter_list.len,
+        &parameter_list,
+        extensions.len,
+        @ptrCast(&extensions),
+        v8.kNoCompileOptions,
+        v8.kNoCacheNoReason,
+    ) orelse return error.CompilationError;
+
+    return .{ .local = self, .handle = result };
+}
+
 pub fn compileAndRun(self: *const Local, src: []const u8, name: ?[]const u8) !js.Value {
     const script_name = self.isolate.initStringHandle(name orelse "anonymous");
     const script_source = self.isolate.initStringHandle(src);
@@ -110,7 +181,7 @@ pub fn compileAndRun(self: *const Local, src: []const u8, name: ?[]const u8) !js
     ) orelse return error.CompilationError;
 
     // Run the script
-    const result = v8.v8__Script__Run(v8_script, self.handle) orelse return error.ExecutionError;
+    const result = v8.v8__Script__Run(v8_script, self.handle) orelse return error.JsException;
     return .{ .local = self, .handle = result };
 }
 
@@ -131,20 +202,20 @@ pub fn compileAndRun(self: *const Local, src: []const u8, name: ?[]const u8) !js
 //      we can just grab it from the identity_map)
 pub fn mapZigInstanceToJs(self: *const Local, js_obj_handle: ?*const v8.Object, value: anytype) !js.Object {
     const ctx = self.ctx;
-    const arena = ctx.arena;
+    const origin_arena = ctx.origin.arena;
 
     const T = @TypeOf(value);
     switch (@typeInfo(T)) {
         .@"struct" => {
             // Struct, has to be placed on the heap
-            const heap = try arena.create(T);
+            const heap = try origin_arena.create(T);
             heap.* = value;
             return self.mapZigInstanceToJs(js_obj_handle, heap);
         },
         .pointer => |ptr| {
             const resolved = resolveValue(value);
 
-            const gop = try ctx.identity_map.getOrPut(arena, @intFromPtr(resolved.ptr));
+            const gop = try ctx.origin.addIdentity(@intFromPtr(resolved.ptr));
             if (gop.found_existing) {
                 // we've seen this instance before, return the same object
                 return (js.Object.Global{ .handle = gop.value_ptr.* }).local(self);
@@ -173,7 +244,7 @@ pub fn mapZigInstanceToJs(self: *const Local, js_obj_handle: ?*const v8.Object,
                 // The TAO contains the pointer to our Zig instance as
                 // well as any meta data we'll need to use it later.
                 // See the TaggedOpaque struct for more details.
-                const tao = try arena.create(TaggedOpaque);
+                const tao = try origin_arena.create(TaggedOpaque);
                 tao.* = .{
                     .value = resolved.ptr,
                     .prototype_chain = resolved.prototype_chain.ptr,
@@ -181,11 +252,7 @@ pub fn mapZigInstanceToJs(self: *const Local, js_obj_handle: ?*const v8.Object,
                     .subtype = if (@hasDecl(JsApi.Meta, "subtype")) JsApi.Meta.subype else .node,
                 };
 
-                // Skip setting internal field for the global object (Window)
-                // Window accessors get the instance from context.page.window instead
-                // if (resolved.class_id != @import("../webapi/Window.zig").JsApi.Meta.class_id) {
-                v8.v8__Object__SetInternalField(js_obj.handle, 0, isolate.createExternal(tao));
-                // }
+                v8.v8__Object__SetAlignedPointerInInternalField(js_obj.handle, 0, tao);
             } else {
                 // If the struct is empty, we don't need to do all
                 // the TOA stuff and setting the internal data.
@@ -202,19 +269,20 @@ pub fn mapZigInstanceToJs(self: *const Local, js_obj_handle: ?*const v8.Object,
                 // can't figure out how to make that work, since it depends on
                 // the [runtime] `value`.
                 // We need the resolved finalizer, which we have in resolved.
+                //
                 // The above if statement would be more clear as:
                 //    if (resolved.finalizer_from_v8) |finalizer| {
                 // But that's a runtime check.
                 // Instead, we check if the base has finalizer. The assumption
                 // here is that if a resolve type has a finalizer, then the base
                 // should have a finalizer too.
-                const fc = try ctx.createFinalizerCallback(gop.value_ptr.*, resolved.ptr, resolved.finalizer_from_zig.?);
+                const fc = try ctx.origin.createFinalizerCallback(ctx.session, gop.value_ptr.*, resolved.ptr, resolved.finalizer_from_zig.?);
                 {
                     errdefer fc.deinit();
-                    try ctx.finalizer_callbacks.put(ctx.arena, @intFromPtr(resolved.ptr), fc);
+                    try ctx.origin.finalizer_callbacks.put(ctx.origin.arena, @intFromPtr(resolved.ptr), fc);
                 }
 
-                conditionallyFlagHandoff(value);
+                conditionallyReference(value);
                 if (@hasDecl(JsApi.Meta, "weak")) {
                     if (comptime IS_DEBUG) {
                         std.debug.assert(JsApi.Meta.weak == true);
@@ -310,7 +378,17 @@ pub fn zigValueToJs(self: *const Local, value: anytype, comptime opts: CallOpts)
                 js.Value => return value,
                 js.Exception => return .{ .local = self, .handle = isolate.throwException(value.handle) },
 
+                js.ArrayBufferRef(.int8).Global, js.ArrayBufferRef(.uint8).Global,
+                js.ArrayBufferRef(.uint8_clamped).Global, js.ArrayBufferRef(.int16).Global,
+                js.ArrayBufferRef(.uint16).Global, js.ArrayBufferRef(.int32).Global,
+                js.ArrayBufferRef(.uint32).Global, js.ArrayBufferRef(.float16).Global,
+                js.ArrayBufferRef(.float32).Global, js.ArrayBufferRef(.float64).Global,
+                => {
+                    return .{ .local = self, .handle = value.local(self).handle };
+                },
+
                 inline
+                js.Array,
                 js.Function,
                 js.Object,
                 js.Promise,
@@ -442,6 +520,13 @@ pub fn jsValueToZig(self: *const Local, comptime T: type, js_val: js.Value) !T {
                 return js_val;
             }
 
+            if (comptime o.child == js.NullableString) {
+                if (js_val.isUndefined()) {
+                    return null;
+                }
+                return .{ .value = try js_val.toStringSlice() };
+            }
+
             if (comptime o.child == js.Object) {
                 return js.Object{
                     .local = self,
@@ -1043,7 +1128,7 @@ const Resolved = struct {
     class_id: u16,
     prototype_chain: []const @import("TaggedOpaque.zig").PrototypeChainEntry,
     finalizer_from_v8: ?*const fn (handle: ?*const v8.WeakCallbackInfo) callconv(.c) void = null,
-    finalizer_from_zig: ?*const fn (ptr: *anyopaque) void = null,
+    finalizer_from_zig: ?*const fn (ptr: *anyopaque, session: *Session) void = null,
 };
 pub fn resolveValue(value: anytype) Resolved {
     const T = bridge.Struct(@TypeOf(value));
@@ -1082,14 +1167,14 @@ fn resolveT(comptime T: type, value: *anyopaque) Resolved {
     };
 }
 
-fn conditionallyFlagHandoff(value: anytype) void {
+fn conditionallyReference(value: anytype) void {
     const T = bridge.Struct(@TypeOf(value));
-    if (@hasField(T, "_v8_handoff")) {
-        value._v8_handoff = true;
+    if (@hasDecl(T, "acquireRef")) {
+        value.acquireRef();
         return;
     }
     if (@hasField(T, "_proto")) {
-        conditionallyFlagHandoff(value._proto);
+        conditionallyReference(value._proto);
     }
 }
 
@@ -1164,6 +1249,9 @@ fn _debugValue(self: *const Local, js_val: js.Value, seen: *std.AutoHashMapUnman
 
         if (js_val.isSymbol()) {
             const symbol_handle = v8.v8__Symbol__Description(@ptrCast(js_val.handle), self.isolate.handle).?;
+            if (v8.v8__Value__IsUndefined(symbol_handle)) {
+                return writer.writeAll("undefined (symbol)");
+            }
             return writer.print("{f} (symbol)", .{js.String{ .local = self, .handle = @ptrCast(symbol_handle) }});
         }
         const js_val_str = try js_val.toStringSlice();
@@ -1187,13 +1275,20 @@ fn _debugValue(self: *const Local, js_val: js.Value, seen: *std.AutoHashMapUnman
         gop.value_ptr.* = {};
     }
 
-    const names_arr = js_obj.getOwnPropertyNames();
-    const len = names_arr.len();
-
     if (depth > 20) {
         return writer.writeAll("...deeply nested object...");
     }
-    const own_len = js_obj.getOwnPropertyNames().len();
+
+    const names_arr = js_obj.getOwnPropertyNames() catch {
+        return writer.writeAll("...invalid object...");
+    };
+    const len = names_arr.len();
+
+    const own_len = blk: {
+        const own_names = js_obj.getOwnPropertyNames() catch break :blk 0;
+        break :blk own_names.len();
+    };
+
     if (own_len == 0) {
         const js_val_str = try js_val.toStringSlice();
         if (js_val_str.len > 2000) {
@@ -1312,6 +1407,7 @@ pub const Scope = struct {
     handle_scope: js.HandleScope,
 
     pub fn deinit(self: *Scope) void {
+        v8.v8__Context__Exit(self.local.handle);
         self.handle_scope.deinit();
     }
 

src/browser/js/Object.zig

@@ -97,7 +97,7 @@ pub fn persist(self: Object) !Global {
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
 
-    try ctx.global_objects.append(ctx.arena, global);
+    try ctx.trackGlobal(global);
 
     return .{ .handle = global };
 }
@@ -129,8 +129,14 @@ pub fn isNullOrUndefined(self: Object) bool {
     return v8.v8__Value__IsNullOrUndefined(@ptrCast(self.handle));
 }
 
-pub fn getOwnPropertyNames(self: Object) js.Array {
-    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.local.handle).?;
+pub fn getOwnPropertyNames(self: Object) !js.Array {
+    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.local.handle) orelse {
+        // This is almost always a fatal error case. Either we're in some exception
+        // and things are messy, or we're shutting down, or someone has messed up
+        // the object (like some WPT tests do).
+        return error.TypeError;
+    };
+
     return .{
         .local = self.local,
         .handle = handle,
@@ -145,8 +151,11 @@ pub fn getPropertyNames(self: Object) js.Array {
     };
 }
 
-pub fn nameIterator(self: Object) NameIterator {
-    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
+pub fn nameIterator(self: Object) !NameIterator {
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle) orelse {
+        // see getOwnPropertyNames above
+        return error.TypeError;
+    };
     const count = v8.v8__Array__Length(handle);
 
     return .{

src/browser/js/Origin.zig

@@ -0,0 +1,253 @@
+// 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/>.
+
+// Origin represents the shared Zig<->JS bridge state for all contexts within
+// the same origin. Multiple contexts (frames) from the same origin share a
+// single Origin, ensuring that JS objects maintain their identity across frames.
+
+const std = @import("std");
+const js = @import("js.zig");
+
+const App = @import("../../App.zig");
+const Session = @import("../Session.zig");
+
+const v8 = js.v8;
+const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const Origin = @This();
+
+rc: usize = 1,
+arena: Allocator,
+
+// The key, e.g. lightpanda.io:443
+key: []const u8,
+
+// Security token - all contexts in this realm must use the same v8::Value instance
+// as their security token for V8 to allow cross-context access
+security_token: v8.Global,
+
+// Serves two purposes. Like `global_objects`, this is used to free
+// every Global(Object) we've created during the lifetime of the realm.
+// More importantly, it serves as an identity map - for a given Zig
+// instance, we map it to the same Global(Object).
+// The key is the @intFromPtr of the Zig value
+identity_map: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+// Some web APIs have to manage opaque values. Ideally, they use an
+// js.Object, but the js.Object has no lifetime guarantee beyond the
+// current call. They can call .persist() on their js.Object to get
+// a `Global(Object)`. We need to track these to free them.
+// This used to be a map and acted like identity_map; the key was
+// the @intFromPtr(js_obj.handle). But v8 can re-use address. Without
+// a reliable way to know if an object has already been persisted,
+// we now simply persist every time persist() is called.
+globals: std.ArrayList(v8.Global) = .empty,
+
+// Temp variants stored in HashMaps for O(1) early cleanup.
+// Key is global.data_ptr.
+temps: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+// Any type that is stored in the identity_map which has a finalizer declared
+// will have its finalizer stored here. This is only used when shutting down
+// if v8 hasn't called the finalizer directly itself.
+finalizer_callbacks: std.AutoHashMapUnmanaged(usize, *FinalizerCallback) = .empty,
+
+pub fn init(app: *App, isolate: js.Isolate, key: []const u8) !*Origin {
+    const arena = try app.arena_pool.acquire();
+    errdefer app.arena_pool.release(arena);
+
+    var hs: js.HandleScope = undefined;
+    hs.init(isolate);
+    defer hs.deinit();
+
+    const owned_key = try arena.dupe(u8, key);
+    const token_local = isolate.initStringHandle(owned_key);
+    var token_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, token_local, &token_global);
+
+    const self = try arena.create(Origin);
+    self.* = .{
+        .rc = 1,
+        .arena = arena,
+        .key = owned_key,
+        .globals = .empty,
+        .temps = .empty,
+        .security_token = token_global,
+    };
+    return self;
+}
+
+pub fn deinit(self: *Origin, app: *App) void {
+    // Call finalizers before releasing anything
+    {
+        var it = self.finalizer_callbacks.valueIterator();
+        while (it.next()) |finalizer| {
+            finalizer.*.deinit();
+        }
+    }
+
+    v8.v8__Global__Reset(&self.security_token);
+
+    {
+        var it = self.identity_map.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+    }
+
+    for (self.globals.items) |*global| {
+        v8.v8__Global__Reset(global);
+    }
+
+    {
+        var it = self.temps.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+    }
+
+    app.arena_pool.release(self.arena);
+}
+
+pub fn trackGlobal(self: *Origin, global: v8.Global) !void {
+    return self.globals.append(self.arena, global);
+}
+
+pub const IdentityResult = struct {
+    value_ptr: *v8.Global,
+    found_existing: bool,
+};
+
+pub fn addIdentity(self: *Origin, ptr: usize) !IdentityResult {
+    const gop = try self.identity_map.getOrPut(self.arena, ptr);
+    return .{
+        .value_ptr = gop.value_ptr,
+        .found_existing = gop.found_existing,
+    };
+}
+
+pub fn trackTemp(self: *Origin, global: v8.Global) !void {
+    return self.temps.put(self.arena, global.data_ptr, global);
+}
+
+pub fn releaseTemp(self: *Origin, global: v8.Global) void {
+    if (self.temps.fetchRemove(global.data_ptr)) |kv| {
+        var g = kv.value;
+        v8.v8__Global__Reset(&g);
+    }
+}
+
+/// Release an item from the identity_map (called after finalizer runs from V8)
+pub fn release(self: *Origin, item: *anyopaque) void {
+    var global = self.identity_map.fetchRemove(@intFromPtr(item)) orelse {
+        if (comptime IS_DEBUG) {
+            std.debug.assert(false);
+        }
+        return;
+    };
+    v8.v8__Global__Reset(&global.value);
+
+    // The item has been finalized, remove it from the finalizer callback so that
+    // we don't try to call it again on shutdown.
+    const kv = self.finalizer_callbacks.fetchRemove(@intFromPtr(item)) orelse {
+        if (comptime IS_DEBUG) {
+            std.debug.assert(false);
+        }
+        return;
+    };
+    const fc = kv.value;
+    fc.session.releaseArena(fc.arena);
+}
+
+pub fn createFinalizerCallback(
+    self: *Origin,
+    session: *Session,
+    global: v8.Global,
+    ptr: *anyopaque,
+    zig_finalizer: *const fn (ptr: *anyopaque, session: *Session) void,
+) !*FinalizerCallback {
+    const arena = try session.getArena(.{ .debug = "FinalizerCallback" });
+    errdefer session.releaseArena(arena);
+    const fc = try arena.create(FinalizerCallback);
+    fc.* = .{
+        .arena = arena,
+        .origin = self,
+        .session = session,
+        .ptr = ptr,
+        .global = global,
+        .zig_finalizer = zig_finalizer,
+    };
+    return fc;
+}
+
+pub fn transferTo(self: *Origin, dest: *Origin) !void {
+    const arena = dest.arena;
+
+    try dest.globals.ensureUnusedCapacity(arena, self.globals.items.len);
+    for (self.globals.items) |obj| {
+        dest.globals.appendAssumeCapacity(obj);
+    }
+    self.globals.clearRetainingCapacity();
+
+    {
+        try dest.temps.ensureUnusedCapacity(arena, self.temps.count());
+        var it = self.temps.iterator();
+        while (it.next()) |kv| {
+            try dest.temps.put(arena, kv.key_ptr.*, kv.value_ptr.*);
+        }
+        self.temps.clearRetainingCapacity();
+    }
+
+    {
+        try dest.finalizer_callbacks.ensureUnusedCapacity(arena, self.finalizer_callbacks.count());
+        var it = self.finalizer_callbacks.iterator();
+        while (it.next()) |kv| {
+            kv.value_ptr.*.origin = dest;
+            try dest.finalizer_callbacks.put(arena, kv.key_ptr.*, kv.value_ptr.*);
+        }
+        self.finalizer_callbacks.clearRetainingCapacity();
+    }
+
+    {
+        try dest.identity_map.ensureUnusedCapacity(arena, self.identity_map.count());
+        var it = self.identity_map.iterator();
+        while (it.next()) |kv| {
+            try dest.identity_map.put(arena, kv.key_ptr.*, kv.value_ptr.*);
+        }
+        self.identity_map.clearRetainingCapacity();
+    }
+}
+
+// A type that has a finalizer can have its finalizer called one of two ways.
+// The first is from V8 via the WeakCallback we give to weakRef. But that isn't
+// guaranteed to fire, so we track this in finalizer_callbacks and call them on
+// origin shutdown.
+pub const FinalizerCallback = struct {
+    arena: Allocator,
+    origin: *Origin,
+    session: *Session,
+    ptr: *anyopaque,
+    global: v8.Global,
+    zig_finalizer: *const fn (ptr: *anyopaque, session: *Session) void,
+
+    pub fn deinit(self: *FinalizerCallback) void {
+        self.zig_finalizer(self.ptr, self.session);
+        self.session.releaseArena(self.arena);
+    }
+};

src/browser/js/Private.zig

@@ -0,0 +1,42 @@
+// 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 Private = @This();
+
+// 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,
+
+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);
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(isolate, private_handle, &global);
+
+    return .{
+        .handle = global,
+    };
+}
+
+pub fn deinit(self: *Private) void {
+    v8.v8__Global__Reset(&self.handle);
+}

src/browser/js/Promise.zig

@@ -62,22 +62,25 @@ fn _persist(self: *const Promise, comptime is_global: bool) !(if (is_global) Glo
     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);
+        try ctx.trackGlobal(global);
+        return .{ .handle = global, .origin = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .origin = ctx.origin };
 }
 
-pub const Temp = G(0);
-pub const Global = G(1);
+pub const Temp = G(.temp);
+pub const Global = G(.global);
 
-fn G(comptime discriminator: u8) type {
+const GlobalType = enum(u8) {
+    temp,
+    global,
+};
+
+fn G(comptime global_type: GlobalType) type {
     return struct {
         handle: v8.Global,
-
-        // makes the types different (G(0) != G(1)), without taking up space
-        comptime _: u8 = discriminator,
+        origin: if (global_type == .temp) *js.Origin else void,
 
         const Self = @This();
 
@@ -91,5 +94,9 @@ fn G(comptime discriminator: u8) type {
                 .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
             };
         }
+
+        pub fn release(self: *const Self) void {
+            self.origin.releaseTemp(self.handle);
+        }
     };
 }

src/browser/js/PromiseResolver.zig

@@ -79,7 +79,7 @@ pub fn persist(self: PromiseResolver) !Global {
     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);
+    try ctx.trackGlobal(global);
     return .{ .handle = global };
 }
 

src/browser/js/Snapshot.zig

@@ -202,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);
                 }
             }
         }
@@ -278,9 +282,13 @@ fn hasNamedIndexedGetter(comptime JsApi: type) bool {
 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;
+    var count: comptime_int = 0;
+
+    // +1 for the illegal constructor callback shared by various types
+    count += 1;
+
+    // +1 for the noop function shared by various types
+    count += 1;
 
     inline for (JsApis) |JsApi| {
         // Constructor (only if explicit)
@@ -300,17 +308,18 @@ fn countExternalReferences() comptime_int {
             const T = @TypeOf(value);
             if (T == bridge.Accessor) {
                 count += 1; // getter
-                if (value.setter != null) count += 1; // setter
+                if (value.setter != null) {
+                    count += 1;
+                }
             } 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) {
                 count += 1;
+                if (value.enumerator != null) {
+                    count += 1;
+                }
             } else if (T == bridge.NamedIndexed) {
                 count += 1; // getter
                 if (value.setter != null) count += 1;
@@ -319,10 +328,6 @@ 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| {
@@ -342,7 +347,8 @@ fn collectExternalReferences() [countExternalReferences()]isize {
     references[idx] = @bitCast(@intFromPtr(&illegalConstructorCallback));
     idx += 1;
 
-    var has_non_template_property = false;
+    references[idx] = @bitCast(@intFromPtr(&bridge.Function.noopFunction));
+    idx += 1;
 
     inline for (JsApis) |JsApi| {
         if (@hasDecl(JsApi, "constructor")) {
@@ -369,16 +375,16 @@ 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;
             } else if (T == bridge.Indexed) {
                 references[idx] = @bitCast(@intFromPtr(value.getter));
                 idx += 1;
+                if (value.enumerator) |enumerator| {
+                    references[idx] = @bitCast(@intFromPtr(enumerator));
+                    idx += 1;
+                }
             } else if (T == bridge.NamedIndexed) {
                 references[idx] = @bitCast(@intFromPtr(value.getter));
                 idx += 1;
@@ -394,11 +400,6 @@ 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| {
@@ -429,9 +430,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));
@@ -439,10 +443,48 @@ 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 prototype = v8.v8__FunctionTemplate__PrototypeTemplate(template);
 
     const declarations = @typeInfo(JsApi).@"struct".decls;
     var has_named_index_getter = false;
@@ -460,14 +502,14 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                     if (value.static) {
                         v8.v8__Template__SetAccessorProperty__DEFAULT(@ptrCast(template), js_name, getter_callback);
                     } else {
-                        v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT(target, js_name, getter_callback);
+                        v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT(prototype, js_name, getter_callback);
                     }
                 } else {
                     if (comptime IS_DEBUG) {
                         std.debug.assert(value.static == false);
                     }
                     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);
+                    v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT2(prototype, js_name, getter_callback, setter_callback);
                 }
             },
             bridge.Function => {
@@ -476,16 +518,16 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                 if (value.static) {
                     v8.v8__Template__Set(@ptrCast(template), js_name, @ptrCast(function_template), v8.None);
                 } else {
-                    v8.v8__Template__Set(@ptrCast(target), js_name, @ptrCast(function_template), v8.None);
+                    v8.v8__Template__Set(@ptrCast(prototype), js_name, @ptrCast(function_template), v8.None);
                 }
             },
             bridge.Indexed => {
                 var configuration: v8.IndexedPropertyHandlerConfiguration = .{
                     .getter = value.getter,
+                    .enumerator = value.enumerator,
                     .setter = null,
                     .query = null,
                     .deleter = null,
-                    .enumerator = null,
                     .definer = null,
                     .descriptor = null,
                     .data = null,
@@ -514,7 +556,7 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                     v8.v8__Symbol__GetAsyncIterator(isolate)
                 else
                     v8.v8__Symbol__GetIterator(isolate);
-                v8.v8__Template__Set(@ptrCast(target), js_name, @ptrCast(function_template), v8.None);
+                v8.v8__Template__Set(@ptrCast(prototype), js_name, @ptrCast(function_template), v8.None);
             },
             bridge.Property => {
                 const js_value = switch (value.value) {
@@ -523,22 +565,14 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                 };
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
 
-                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
+                {
+                    const flags = if (value.readonly) v8.ReadOnly + v8.DontDelete else 0;
+                    v8.v8__Template__Set(@ptrCast(prototype), js_name, js_value, flags);
+                }
+
+                if (value.template) {
+                    // apply it both to the type itself (e.g. Node.Elem)
                     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

src/browser/js/String.zig

@@ -56,7 +56,7 @@ fn _toSlice(self: String, comptime null_terminate: bool, allocator: Allocator) !
 
 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 .{ .str = try self.toSSOWithAlloc(self.local.ctx.origin.arena) };
     }
     return self.toSSOWithAlloc(self.local.call_arena);
 }

src/browser/js/TaggedOpaque.zig

@@ -95,33 +95,6 @@ pub fn fromJS(comptime R: type, js_obj_handle: *const v8.Object) !R {
     }
 
     const internal_field_count = v8.v8__Object__InternalFieldCount(js_obj_handle);
-    // Special case for Window: the global object doesn't have internal fields
-    // Window instance is stored in context.page.window instead
-    if (internal_field_count == 0) {
-        // Normally, this would be an error. All JsObject that map to a Zig type
-        // are either `empty_with_no_proto` (handled above) or have an
-        // interalFieldCount. The only exception to that is the Window...
-        const isolate = v8.v8__Object__GetIsolate(js_obj_handle).?;
-        const context = js.Context.fromIsolate(.{ .handle = isolate });
-
-        const Window = @import("../webapi/Window.zig");
-        if (T == Window) {
-            return context.page.window;
-        }
-
-        // ... Or the window's prototype.
-        // We could make this all comptime-fancy, but it's easier to hard-code
-        // the EventTarget
-
-        const EventTarget = @import("../webapi/EventTarget.zig");
-        if (T == EventTarget) {
-            return context.page.window._proto;
-        }
-
-        // Type not found in Window's prototype chain
-        return error.InvalidArgument;
-    }
-
     // 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.
@@ -133,8 +106,8 @@ pub fn fromJS(comptime R: type, js_obj_handle: *const v8.Object) !R {
         @compileError("unknown Zig type: " ++ @typeName(R));
     }
 
-    const internal_field_handle = v8.v8__Object__GetInternalField(js_obj_handle, 0).?;
-    const tao: *TaggedOpaque = @ptrCast(@alignCast(v8.v8__External__Value(internal_field_handle)));
+    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];

src/browser/js/TryCatch.zig

@@ -134,4 +134,17 @@ pub const Caught = struct {
         try writer.write(prefix ++ ".line", self.line);
         try writer.write(prefix ++ ".caught", self.caught);
     }
+
+    pub fn jsonStringify(self: Caught, jw: anytype) !void {
+        try jw.beginObject();
+        try jw.objectField("exception");
+        try jw.write(self.exception);
+        try jw.objectField("stack");
+        try jw.write(self.stack);
+        try jw.objectField("line");
+        try jw.write(self.line);
+        try jw.objectField("caught");
+        try jw.write(self.caught);
+        try jw.endObject();
+    }
 };

src/browser/js/Value.zig

@@ -245,6 +245,46 @@ pub fn toJson(self: Value, allocator: Allocator) ![]u8 {
     return js.String.toSliceWithAlloc(.{ .local = local, .handle = str_handle }, allocator);
 }
 
+// Currently does not support host objects (Blob, File, etc.) or transferables
+// which require delegate callbacks to be implemented.
+pub fn structuredClone(self: Value) !Value {
+    const local = self.local;
+    const v8_context = local.handle;
+    const v8_isolate = local.isolate.handle;
+
+    const size, const data = blk: {
+        const serializer = v8.v8__ValueSerializer__New(v8_isolate, null) orelse return error.JsException;
+        defer v8.v8__ValueSerializer__DELETE(serializer);
+
+        var write_result: v8.MaybeBool = undefined;
+        v8.v8__ValueSerializer__WriteHeader(serializer);
+        v8.v8__ValueSerializer__WriteValue(serializer, v8_context, self.handle, &write_result);
+        if (!write_result.has_value or !write_result.value) {
+            return error.JsException;
+        }
+
+        var size: usize = undefined;
+        const data = v8.v8__ValueSerializer__Release(serializer, &size) orelse return error.JsException;
+        break :blk .{ size, data };
+    };
+
+    defer v8.v8__ValueSerializer__FreeBuffer(data);
+
+    const cloned_handle = blk: {
+        const deserializer = v8.v8__ValueDeserializer__New(v8_isolate, data, size, null) orelse return error.JsException;
+        defer v8.v8__ValueDeserializer__DELETE(deserializer);
+
+        var read_header_result: v8.MaybeBool = undefined;
+        v8.v8__ValueDeserializer__ReadHeader(deserializer, v8_context, &read_header_result);
+        if (!read_header_result.has_value or !read_header_result.value) {
+            return error.JsException;
+        }
+        break :blk v8.v8__ValueDeserializer__ReadValue(deserializer, v8_context) orelse return error.JsException;
+    };
+
+    return .{ .local = local, .handle = cloned_handle };
+}
+
 pub fn persist(self: Value) !Global {
     return self._persist(true);
 }
@@ -259,11 +299,11 @@ fn _persist(self: *const Value, comptime is_global: bool) !(if (is_global) Globa
     var global: v8.Global = undefined;
     v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
     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);
+        try ctx.trackGlobal(global);
+        return .{ .handle = global, .origin = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .origin = ctx.origin };
 }
 
 pub fn toZig(self: Value, comptime T: type) !T {
@@ -310,15 +350,18 @@ pub fn format(self: Value, writer: *std.Io.Writer) !void {
     return js_str.format(writer);
 }
 
-pub const Temp = G(0);
-pub const Global = G(1);
+pub const Temp = G(.temp);
+pub const Global = G(.global);
 
-fn G(comptime discriminator: u8) type {
+const GlobalType = enum(u8) {
+    temp,
+    global,
+};
+
+fn G(comptime global_type: GlobalType) type {
     return struct {
         handle: v8.Global,
-
-        // makes the types different (G(0) != G(1)), without taking up space
-        comptime _: u8 = discriminator,
+        origin: if (global_type == .temp) *js.Origin else void,
 
         const Self = @This();
 
@@ -336,5 +379,9 @@ fn G(comptime discriminator: u8) type {
         pub fn isEqual(self: *const Self, other: Value) bool {
             return v8.v8__Global__IsEqual(&self.handle, other.handle);
         }
+
+        pub fn release(self: *const Self) void {
+            self.origin.releaseTemp(self.handle);
+        }
     };
 }

src/browser/js/bridge.zig

@@ -21,11 +21,13 @@ const js = @import("js.zig");
 const lp = @import("lightpanda");
 const log = @import("../../log.zig");
 const Page = @import("../Page.zig");
+const Session = @import("../Session.zig");
 
 const v8 = js.v8;
 
 const Caller = @import("Caller.zig");
 const Context = @import("Context.zig");
+const Origin = @import("Origin.zig");
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
@@ -38,16 +40,16 @@ pub fn Builder(comptime T: type) type {
             return Constructor.init(T, func, opts);
         }
 
-        pub fn accessor(comptime getter: anytype, comptime setter: anytype, comptime opts: Accessor.Opts) Accessor {
+        pub fn accessor(comptime getter: anytype, comptime setter: anytype, comptime opts: Caller.Function.Opts) Accessor {
             return Accessor.init(T, getter, setter, opts);
         }
 
-        pub fn function(comptime func: anytype, comptime opts: Function.Opts) Function {
+        pub fn function(comptime func: anytype, comptime opts: Caller.Function.Opts) Function {
             return Function.init(T, func, opts);
         }
 
-        pub fn indexed(comptime getter_func: anytype, comptime opts: Indexed.Opts) Indexed {
-            return Indexed.init(T, getter_func, opts);
+        pub fn indexed(comptime getter_func: anytype, comptime enumerator_func: anytype, comptime opts: Indexed.Opts) Indexed {
+            return Indexed.init(T, getter_func, enumerator_func, opts);
         }
 
         pub fn namedIndexed(comptime getter_func: anytype, setter_func: anytype, deleter_func: anytype, comptime opts: NamedIndexed.Opts) NamedIndexed {
@@ -104,24 +106,24 @@ pub fn Builder(comptime T: type) type {
             return entries;
         }
 
-        pub fn finalizer(comptime func: *const fn (self: *T, shutdown: bool) void) Finalizer {
+        pub fn finalizer(comptime func: *const fn (self: *T, shutdown: bool, session: *Session) void) Finalizer {
             return .{
                 .from_zig = struct {
-                    fn wrap(ptr: *anyopaque) void {
-                        func(@ptrCast(@alignCast(ptr)), true);
+                    fn wrap(ptr: *anyopaque, session: *Session) void {
+                        func(@ptrCast(@alignCast(ptr)), true, session);
                     }
                 }.wrap,
 
                 .from_v8 = struct {
                     fn wrap(handle: ?*const v8.WeakCallbackInfo) callconv(.c) void {
                         const ptr = v8.v8__WeakCallbackInfo__GetParameter(handle.?).?;
-                        const fc: *Context.FinalizerCallback = @ptrCast(@alignCast(ptr));
+                        const fc: *Origin.FinalizerCallback = @ptrCast(@alignCast(ptr));
 
-                        const ctx = fc.ctx;
+                        const origin = fc.origin;
                         const value_ptr = fc.ptr;
-                        if (ctx.finalizer_callbacks.contains(@intFromPtr(value_ptr))) {
-                            func(@ptrCast(@alignCast(value_ptr)), false);
-                            ctx.release(value_ptr);
+                        if (origin.finalizer_callbacks.contains(@intFromPtr(value_ptr))) {
+                            func(@ptrCast(@alignCast(value_ptr)), false, fc.session);
+                            origin.release(value_ptr);
                         } else {
                             // A bit weird, but v8 _requires_ that we release it
                             // If we don't. We'll 100% crash.
@@ -160,44 +162,25 @@ pub const Constructor = struct {
 pub const Function = struct {
     static: bool,
     arity: usize,
+    noop: bool = false,
+    cache: ?Caller.Function.Opts.Caching = null,
     func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
 
-    const Opts = struct {
-        static: bool = false,
-        dom_exception: bool = false,
-        as_typed_array: bool = false,
-        null_as_undefined: bool = false,
-    };
-
-    fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Function {
+    fn init(comptime T: type, comptime func: anytype, comptime opts: Caller.Function.Opts) Function {
         return .{
+            .cache = opts.cache,
             .static = opts.static,
             .arity = getArity(@TypeOf(func)),
-            .func = struct {
+            .func = if (opts.noop) noopFunction else struct {
                 fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
-                    var caller: Caller = undefined;
-                    caller.init(v8_isolate);
-                    defer caller.deinit();
-
-                    if (comptime opts.static) {
-                        caller.function(T, func, handle.?, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    } else {
-                        caller.method(T, func, handle.?, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    }
+                    Caller.Function.call(T, handle.?, func, opts);
                 }
             }.wrap,
         };
     }
 
+    pub fn noopFunction(_: ?*const v8.FunctionCallbackInfo) callconv(.c) void {}
+
     fn getArity(comptime T: type) usize {
         var count: usize = 0;
         var params = @typeInfo(T).@"fn".params;
@@ -217,42 +200,20 @@ pub const Function = struct {
 
 pub const Accessor = struct {
     static: bool = false,
+    cache: ?Caller.Function.Opts.Caching = null,
     getter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
     setter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
 
-    const Opts = struct {
-        static: bool = false,
-        as_typed_array: bool = false,
-        null_as_undefined: bool = false,
-        dom_exception: bool = false,
-    };
-
-    fn init(comptime T: type, comptime getter: anytype, comptime setter: anytype, comptime opts: Opts) Accessor {
+    fn init(comptime T: type, comptime getter: anytype, comptime setter: anytype, comptime opts: Caller.Function.Opts) Accessor {
         var accessor = Accessor{
+            .cache = opts.cache,
             .static = opts.static,
         };
 
         if (@typeInfo(@TypeOf(getter)) != .null) {
             accessor.getter = struct {
                 fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
-                    var caller: Caller = undefined;
-                    caller.init(v8_isolate);
-                    defer caller.deinit();
-
-                    if (comptime opts.static) {
-                        caller.function(T, getter, handle.?, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    } else {
-                        caller.method(T, getter, handle.?, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    }
+                    Caller.Function.call(T, handle.?, getter, opts);
                 }
             }.wrap;
         }
@@ -260,16 +221,7 @@ pub const Accessor = struct {
         if (@typeInfo(@TypeOf(setter)) != .null) {
             accessor.setter = struct {
                 fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
-                    var caller: Caller = undefined;
-                    caller.init(v8_isolate);
-                    defer caller.deinit();
-
-                    caller.method(T, setter, handle.?, .{
-                        .dom_exception = opts.dom_exception,
-                        .as_typed_array = opts.as_typed_array,
-                        .null_as_undefined = opts.null_as_undefined,
-                    });
+                    Caller.Function.call(T, handle.?, setter, opts);
                 }
             }.wrap;
         }
@@ -280,26 +232,44 @@ pub const Accessor = struct {
 
 pub const Indexed = struct {
     getter: *const fn (idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
+    enumerator: ?*const fn (handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
 
     const Opts = struct {
         as_typed_array: bool = false,
         null_as_undefined: bool = false,
     };
 
-    fn init(comptime T: type, comptime getter: anytype, comptime opts: Opts) Indexed {
-        return .{ .getter = struct {
-            fn wrap(idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
-                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
-                var caller: Caller = undefined;
-                caller.init(v8_isolate);
-                defer caller.deinit();
+    fn init(comptime T: type, comptime getter: anytype, comptime enumerator: anytype, comptime opts: Opts) Indexed {
+        var indexed = Indexed{
+            .enumerator = null,
+            .getter = struct {
+                fn wrap(idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
 
-                return caller.getIndex(T, getter, idx, handle.?, .{
-                    .as_typed_array = opts.as_typed_array,
-                    .null_as_undefined = opts.null_as_undefined,
-                });
-            }
-        }.wrap };
+                    return caller.getIndex(T, getter, idx, handle.?, .{
+                        .as_typed_array = opts.as_typed_array,
+                        .null_as_undefined = opts.null_as_undefined,
+                    });
+                }
+            }.wrap,
+        };
+
+        if (@typeInfo(@TypeOf(enumerator)) != .null) {
+            indexed.enumerator = struct {
+                fn wrap(handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+                    return caller.getEnumerator(T, enumerator, handle.?, .{});
+                }
+            }.wrap;
+        }
+
+        return indexed;
     }
 };
 
@@ -390,11 +360,9 @@ pub const Iterator = struct {
             .async = opts.async,
             .func = struct {
                 fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-                    const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
-                    var caller: Caller = undefined;
-                    caller.init(v8_isolate);
-                    defer caller.deinit();
-                    caller.method(T, struct_or_func, handle.?, .{});
+                    return Caller.Function.call(T, handle.?, struct_or_func, .{
+                        .null_as_undefined = opts.null_as_undefined,
+                    });
                 }
             }.wrap,
         };
@@ -411,12 +379,7 @@ pub const Callable = struct {
     fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Callable {
         return .{ .func = struct {
             fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-                const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
-                var caller: Caller = undefined;
-                caller.init(v8_isolate);
-                defer caller.deinit();
-
-                caller.method(T, func, handle.?, .{
+                Caller.Function.call(T, handle.?, func, .{
                     .null_as_undefined = opts.null_as_undefined,
                 });
             }
@@ -427,6 +390,7 @@ pub const Callable = struct {
 pub const Property = struct {
     value: Value,
     template: bool,
+    readonly: bool,
 
     const Value = union(enum) {
         null,
@@ -438,30 +402,25 @@ pub const Property = struct {
 
     const Opts = struct {
         template: bool,
+        readonly: bool = true,
     };
 
     fn init(value: Value, opts: Opts) Property {
         return .{
             .value = value,
             .template = opts.template,
+            .readonly = opts.readonly,
         };
     }
-
-    pub fn getter(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
-        const value = v8.v8__FunctionCallbackInfo__Data(handle.?);
-        var rv: v8.ReturnValue = undefined;
-        v8.v8__FunctionCallbackInfo__GetReturnValue(handle.?, &rv);
-        v8.v8__ReturnValue__Set(rv, value);
-    }
 };
 
 const Finalizer = struct {
-    // The finalizer wrapper when called fro Zig. This is only called on
-    // Context.deinit
-    from_zig: *const fn (ctx: *anyopaque) void,
+    // The finalizer wrapper when called from Zig. This is only called on
+    // Origin.deinit
+    from_zig: *const fn (ctx: *anyopaque, session: *Session) void,
 
     // The finalizer wrapper when called from V8. This may never be called
-    // (hence why we fallback to calling in Context.denit). If it is called,
+    // (hence why we fallback to calling in Origin.deinit). If it is called,
     // it is only ever called after we SetWeak on the Global.
     from_v8: *const fn (?*const v8.WeakCallbackInfo) callconv(.c) void,
 };
@@ -773,6 +732,8 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/css/CSSStyleRule.zig"),
     @import("../webapi/css/CSSStyleSheet.zig"),
     @import("../webapi/css/CSSStyleProperties.zig"),
+    @import("../webapi/css/FontFace.zig"),
+    @import("../webapi/css/FontFaceSet.zig"),
     @import("../webapi/css/MediaQueryList.zig"),
     @import("../webapi/css/StyleSheetList.zig"),
     @import("../webapi/Document.zig"),
@@ -809,8 +770,10 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/element/html/Custom.zig"),
     @import("../webapi/element/html/Data.zig"),
     @import("../webapi/element/html/DataList.zig"),
+    @import("../webapi/element/html/Details.zig"),
     @import("../webapi/element/html/Dialog.zig"),
     @import("../webapi/element/html/Directory.zig"),
+    @import("../webapi/element/html/DList.zig"),
     @import("../webapi/element/html/Div.zig"),
     @import("../webapi/element/html/Embed.zig"),
     @import("../webapi/element/html/FieldSet.zig"),
@@ -867,6 +830,8 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/element/svg/Generic.zig"),
     @import("../webapi/encoding/TextDecoder.zig"),
     @import("../webapi/encoding/TextEncoder.zig"),
+    @import("../webapi/encoding/TextEncoderStream.zig"),
+    @import("../webapi/encoding/TextDecoderStream.zig"),
     @import("../webapi/Event.zig"),
     @import("../webapi/event/CompositionEvent.zig"),
     @import("../webapi/event/CustomEvent.zig"),
@@ -880,6 +845,9 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/event/MouseEvent.zig"),
     @import("../webapi/event/PointerEvent.zig"),
     @import("../webapi/event/KeyboardEvent.zig"),
+    @import("../webapi/event/FocusEvent.zig"),
+    @import("../webapi/event/WheelEvent.zig"),
+    @import("../webapi/event/TextEvent.zig"),
     @import("../webapi/event/PromiseRejectionEvent.zig"),
     @import("../webapi/MessageChannel.zig"),
     @import("../webapi/MessagePort.zig"),
@@ -900,6 +868,10 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/streams/ReadableStream.zig"),
     @import("../webapi/streams/ReadableStreamDefaultReader.zig"),
     @import("../webapi/streams/ReadableStreamDefaultController.zig"),
+    @import("../webapi/streams/WritableStream.zig"),
+    @import("../webapi/streams/WritableStreamDefaultWriter.zig"),
+    @import("../webapi/streams/WritableStreamDefaultController.zig"),
+    @import("../webapi/streams/TransformStream.zig"),
     @import("../webapi/Node.zig"),
     @import("../webapi/storage/storage.zig"),
     @import("../webapi/URL.zig"),
@@ -913,15 +885,19 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/IdleDeadline.zig"),
     @import("../webapi/Blob.zig"),
     @import("../webapi/File.zig"),
+    @import("../webapi/FileList.zig"),
+    @import("../webapi/FileReader.zig"),
     @import("../webapi/Screen.zig"),
     @import("../webapi/VisualViewport.zig"),
     @import("../webapi/PerformanceObserver.zig"),
     @import("../webapi/navigation/Navigation.zig"),
-    @import("../webapi/navigation/NavigationEventTarget.zig"),
     @import("../webapi/navigation/NavigationHistoryEntry.zig"),
     @import("../webapi/navigation/NavigationActivation.zig"),
     @import("../webapi/canvas/CanvasRenderingContext2D.zig"),
     @import("../webapi/canvas/WebGLRenderingContext.zig"),
+    @import("../webapi/canvas/OffscreenCanvas.zig"),
+    @import("../webapi/canvas/OffscreenCanvasRenderingContext2D.zig"),
     @import("../webapi/SubtleCrypto.zig"),
     @import("../webapi/Selection.zig"),
+    @import("../webapi/ImageData.zig"),
 });

src/browser/js/js.zig

@@ -24,6 +24,7 @@ const string = @import("../../string.zig");
 pub const Env = @import("Env.zig");
 pub const bridge = @import("bridge.zig");
 pub const Caller = @import("Caller.zig");
+pub const Origin = @import("Origin.zig");
 pub const Context = @import("Context.zig");
 pub const Local = @import("Local.zig");
 pub const Inspector = @import("Inspector.zig");
@@ -77,6 +78,107 @@ pub const ArrayBuffer = struct {
     }
 };
 
+pub const ArrayType = enum(u8) {
+    int8,
+    uint8,
+    uint8_clamped,
+    int16,
+    uint16,
+    int32,
+    uint32,
+    float16,
+    float32,
+    float64,
+};
+
+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.trackGlobal(global);
+
+            return .{ .handle = global };
+        }
+    };
+}
+
+// If a WebAPI takes a []const u8, then we'll coerce any JS value to that string
+// so null -> "null". But if a WebAPI takes an optional string, ?[]const u8,
+// how should we handle null? If the parameter _isn't_ passed, then it's obvious
+// that it should be null, but what if `null` is passed? It's ambiguous, should
+// that be null, or "null"? It could depend on the api. So, `null` passed to
+// ?[]const u8 will be `null`. If you want it to be "null", use a `.js.NullableString`.
+pub const NullableString = struct {
+    value: []const u8,
+};
+
 pub const Exception = struct {
     local: *const Local,
     handle: *const v8.Value,
@@ -134,8 +236,10 @@ pub fn simpleZigValueToJs(isolate: Isolate, value: anytype, comptime fail: bool,
                     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).?);
                 },

src/browser/markdown.zig

@@ -0,0 +1,682 @@
+// 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 URL = @import("URL.zig");
+const TreeWalker = @import("webapi/TreeWalker.zig");
+const CData = @import("webapi/CData.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+const isAllWhitespace = @import("../string.zig").isAllWhitespace;
+
+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,
+    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 shouldAddSpacing(tag: Element.Tag) bool {
+    return switch (tag) {
+        .p, .h1, .h2, .h3, .h4, .h5, .h6, .blockquote, .pre, .table => true,
+        else => false,
+    };
+}
+
+fn isLayoutBlock(tag: Element.Tag) bool {
+    return switch (tag) {
+        .main, .section, .article, .nav, .aside, .header, .footer, .div, .ul, .ol => true,
+        else => false,
+    };
+}
+
+fn isStandaloneAnchor(el: *Element) bool {
+    const node = el.asNode();
+    const parent = node.parentNode() orelse return false;
+    const parent_el = parent.is(Element) orelse return false;
+
+    if (!isLayoutBlock(parent_el.getTag())) return false;
+
+    var prev = node.previousSibling();
+    while (prev) |p| : (prev = p.previousSibling()) {
+        if (isSignificantText(p)) return false;
+        if (p.is(Element)) |pe| {
+            if (isVisibleElement(pe)) break;
+        }
+    }
+
+    var next = node.nextSibling();
+    while (next) |n| : (next = n.nextSibling()) {
+        if (isSignificantText(n)) return false;
+        if (n.is(Element)) |ne| {
+            if (isVisibleElement(ne)) break;
+        }
+    }
+
+    return true;
+}
+
+fn isSignificantText(node: *Node) bool {
+    const text = node.is(Node.CData.Text) orelse return false;
+    return !isAllWhitespace(text.getWholeText());
+}
+
+fn isVisibleElement(el: *Element) bool {
+    const tag = el.getTag();
+    return !tag.isMetadata() and tag != .svg;
+}
+
+fn getAnchorLabel(el: *Element) ?[]const u8 {
+    return el.getAttributeSafe(comptime .wrap("aria-label")) orelse el.getAttributeSafe(comptime .wrap("title"));
+}
+
+fn hasBlockDescendant(root: *Node) bool {
+    var tw = TreeWalker.FullExcludeSelf.Elements.init(root, .{});
+    while (tw.next()) |el| {
+        if (el.getTag().isBlock()) return true;
+    }
+    return false;
+}
+
+fn hasVisibleContent(root: *Node) bool {
+    var tw = TreeWalker.FullExcludeSelf.init(root, .{});
+    while (tw.next()) |node| {
+        if (isSignificantText(node)) return true;
+        if (node.is(Element)) |el| {
+            if (!isVisibleElement(el)) {
+                tw.skipChildren();
+            } else if (el.getTag() == .img) {
+                return true;
+            }
+        }
+    }
+    return 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().str();
+                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 => {},
+    }
+}
+
+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();
+
+    if (!isVisibleElement(el)) return;
+
+    // --- Opening Tag Logic ---
+
+    // Ensure block elements start on a new line (double newline for paragraphs etc)
+    if (tag.isBlock() and !state.in_table) {
+        try ensureNewline(state, writer);
+        if (shouldAddSpacing(tag)) {
+            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 and state.list_stack[state.list_depth - 1].type == .ordered) {
+                const current_list = &state.list_stack[state.list_depth - 1];
+                try writer.print("{d}. ", .{current_list.index});
+                current_list.index += 1;
+            } 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.pre_node = el.asNode();
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (state.pre_node == null) {
+                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;
+        },
+        .br => {
+            if (state.in_table) {
+                try writer.writeByte(' ');
+            } else {
+                try writer.writeByte('\n');
+                state.last_char_was_newline = true;
+            }
+            return;
+        },
+        .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| {
+                const absolute_src = URL.resolve(page.call_arena, page.base(), src, .{ .encode = true }) catch src;
+                try writer.writeAll(absolute_src);
+            }
+            try writer.writeAll(")");
+            state.last_char_was_newline = false;
+            return;
+        },
+        .anchor => {
+            const has_content = hasVisibleContent(el.asNode());
+            const label = getAnchorLabel(el);
+            const href_raw = el.getAttributeSafe(comptime .wrap("href"));
+
+            if (!has_content and label == null and href_raw == null) return;
+
+            const has_block = hasBlockDescendant(el.asNode());
+            const href = if (href_raw) |h| URL.resolve(page.call_arena, page.base(), h, .{ .encode = true }) catch h else null;
+
+            if (has_block) {
+                try renderChildren(el.asNode(), state, writer, page);
+                if (href) |h| {
+                    if (!state.last_char_was_newline) try writer.writeByte('\n');
+                    try writer.writeAll("([](");
+                    try writer.writeAll(h);
+                    try writer.writeAll("))\n");
+                    state.last_char_was_newline = true;
+                }
+                return;
+            }
+
+            if (isStandaloneAnchor(el)) {
+                if (!state.last_char_was_newline) try writer.writeByte('\n');
+                try writer.writeByte('[');
+                if (has_content) {
+                    try renderChildren(el.asNode(), state, writer, page);
+                } else {
+                    try writer.writeAll(label orelse "");
+                }
+                try writer.writeAll("](");
+                if (href) |h| {
+                    try writer.writeAll(h);
+                }
+                try writer.writeAll(")\n");
+                state.last_char_was_newline = true;
+                return;
+            }
+
+            try writer.writeByte('[');
+            if (has_content) {
+                try renderChildren(el.asNode(), state, writer, page);
+            } else {
+                try writer.writeAll(label orelse "");
+            }
+            try writer.writeAll("](");
+            if (href) |h| {
+                try writer.writeAll(h);
+            }
+            try writer.writeByte(')');
+            state.last_char_was_newline = false;
+            return;
+        },
+        .input => {
+            const type_attr = el.getAttributeSafe(comptime .wrap("type")) orelse return;
+            if (std.ascii.eqlIgnoreCase(type_attr, "checkbox")) {
+                const checked = el.getAttributeSafe(comptime .wrap("checked")) != null;
+                try writer.writeAll(if (checked) "[x] " else "[ ] ");
+                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.pre_node = null;
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (state.pre_node == null) {
+                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('|');
+                for (0..state.table_col_count) |_| {
+                    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 (tag.isBlock() and !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.pre_node) |_| {
+        try writer.writeAll(text);
+        state.last_char_was_newline = text[text.len - 1] == '\n';
+        return;
+    }
+
+    // Check for pure whitespace
+    if (isAllWhitespace(text)) {
+        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 or (!state.last_char_was_newline and std.ascii.isWhitespace(text[0]))) {
+            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 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();
+    page.url = "http://localhost/";
+
+    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 "browser.markdown: basic" {
+    try testMarkdownHTML("Hello world", "Hello world\n");
+}
+
+test "browser.markdown: whitespace" {
+    try testMarkdownHTML("<span>A</span> <span>B</span>", "A B\n");
+}
+
+test "browser.markdown: escaping" {
+    try testMarkdownHTML("<p># Not a header</p>", "\n\\# Not a header\n");
+}
+
+test "browser.markdown: strikethrough" {
+    try testMarkdownHTML("<s>deleted</s>", "~~deleted~~\n");
+}
+
+test "browser.markdown: task list" {
+    try testMarkdownHTML(
+        \\<input type="checkbox" checked><input type="checkbox">
+    , "[x] [ ] \n");
+}
+
+test "browser.markdown: ordered list" {
+    try testMarkdownHTML(
+        \\<ol><li>First</li><li>Second</li></ol>
+    , "1. First\n2. Second\n");
+}
+
+test "browser.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 "browser.markdown: nested lists" {
+    try testMarkdownHTML(
+        \\<ul><li>Parent<ul><li>Child</li></ul></li></ul>
+    ,
+        \\- Parent
+        \\  - Child
+        \\
+    );
+}
+
+test "browser.markdown: blockquote" {
+    try testMarkdownHTML("<blockquote>Hello world</blockquote>", "\n> Hello world\n");
+}
+
+test "browser.markdown: links" {
+    try testMarkdownHTML("<a href=\"/relative\">Link</a>", "[Link](http://localhost/relative)\n");
+}
+
+test "browser.markdown: images" {
+    try testMarkdownHTML("<img src=\"logo.png\" alt=\"Logo\">", "![Logo](http://localhost/logo.png)\n");
+}
+
+test "browser.markdown: headings" {
+    try testMarkdownHTML("<h1>Title</h1><h2>Subtitle</h2>",
+        \\
+        \\# Title
+        \\
+        \\## Subtitle
+        \\
+    );
+}
+
+test "browser.markdown: code" {
+    try testMarkdownHTML(
+        \\<p>Use git push</p>
+        \\<pre><code>line 1
+        \\line 2</code></pre>
+    ,
+        \\
+        \\Use git push
+        \\
+        \\```
+        \\line 1
+        \\line 2
+        \\```
+        \\
+    );
+}
+
+test "browser.markdown: block link" {
+    try testMarkdownHTML(
+        \\<a href="https://example.com">
+        \\  <h3>Title</h3>
+        \\  <p>Description</p>
+        \\</a>
+    ,
+        \\
+        \\### Title
+        \\
+        \\Description
+        \\([](https://example.com))
+        \\
+    );
+}
+
+test "browser.markdown: inline link" {
+    try testMarkdownHTML(
+        \\<p>Visit <a href="https://example.com">Example</a>.</p>
+    ,
+        \\
+        \\Visit [Example](https://example.com).
+        \\
+    );
+}
+
+test "browser.markdown: standalone anchors" {
+    // Inside main, with whitespace between anchors -> treated as blocks
+    try testMarkdownHTML(
+        \\<main>
+        \\  <a href="1">Link 1</a>
+        \\  <a href="2">Link 2</a>
+        \\</main>
+    ,
+        \\[Link 1](http://localhost/1)
+        \\[Link 2](http://localhost/2)
+        \\
+    );
+}
+
+test "browser.markdown: mixed anchors in main" {
+    // Anchors surrounded by text should remain inline
+    try testMarkdownHTML(
+        \\<main>
+        \\  Welcome <a href="1">Link 1</a>.
+        \\</main>
+    ,
+        \\Welcome [Link 1](http://localhost/1). 
+        \\
+    );
+}
+
+test "browser.markdown: skip empty links" {
+    try testMarkdownHTML(
+        \\<a href="/"></a>
+        \\<a href="/"><svg></svg></a>
+    ,
+        \\[](http://localhost/)
+        \\[](http://localhost/)
+        \\
+    );
+}
+
+test "browser.markdown: resolve links" {
+    const testing = @import("../testing.zig");
+    const page = try testing.test_session.createPage();
+    defer testing.test_session.removePage();
+    page.url = "https://example.com/a/index.html";
+
+    const doc = page.window._document;
+    const div = try doc.createElement("div", null, page);
+    try page.parseHtmlAsChildren(div.asNode(),
+        \\<a href="b">Link</a>
+        \\<img src="../c.png" alt="Img">
+        \\<a href="/my page">Space</a>
+    );
+
+    var aw: std.Io.Writer.Allocating = .init(testing.allocator);
+    defer aw.deinit();
+    try dump(div.asNode(), .{}, &aw.writer, page);
+
+    try testing.expectString(
+        \\[Link](https://example.com/a/b)
+        \\![Img](https://example.com/c.png) 
+        \\[Space](https://example.com/my%20page)
+        \\
+    , aw.written());
+}
+
+test "browser.markdown: anchor fallback label" {
+    try testMarkdownHTML(
+        \\<a href="/discord" aria-label="Discord Server"><svg></svg></a>
+    , "[Discord Server](http://localhost/discord)\n");
+
+    try testMarkdownHTML(
+        \\<a href="/search" title="Search Site"><svg></svg></a>
+    , "[Search Site](http://localhost/search)\n");
+
+    try testMarkdownHTML(
+        \\<a href="/no-label"><svg></svg></a>
+    , "[](http://localhost/no-label)\n");
+}

src/browser/parser/Parser.zig

@@ -23,6 +23,9 @@ const h5e = @import("html5ever.zig");
 const Page = @import("../Page.zig");
 const Node = @import("../webapi/Node.zig");
 const Element = @import("../webapi/Element.zig");
+
+pub const AttributeIterator = h5e.AttributeIterator;
+
 const Allocator = std.mem.Allocator;
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
@@ -421,7 +424,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/structured_data.zig

@@ -0,0 +1,489 @@
+// 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 URL = @import("URL.zig");
+const TreeWalker = @import("webapi/TreeWalker.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+
+const Allocator = std.mem.Allocator;
+
+/// Key-value pair for structured data properties.
+pub const Property = struct {
+    key: []const u8,
+    value: []const u8,
+};
+
+pub const AlternateLink = struct {
+    href: []const u8,
+    hreflang: ?[]const u8,
+    type: ?[]const u8,
+    title: ?[]const u8,
+};
+
+pub const StructuredData = struct {
+    json_ld: []const []const u8,
+    open_graph: []const Property,
+    twitter_card: []const Property,
+    meta: []const Property,
+    links: []const Property,
+    alternate: []const AlternateLink,
+
+    pub fn jsonStringify(self: *const StructuredData, jw: anytype) !void {
+        try jw.beginObject();
+
+        try jw.objectField("jsonLd");
+        try jw.write(self.json_ld);
+
+        try jw.objectField("openGraph");
+        try writeProperties(jw, self.open_graph);
+
+        try jw.objectField("twitterCard");
+        try writeProperties(jw, self.twitter_card);
+
+        try jw.objectField("meta");
+        try writeProperties(jw, self.meta);
+
+        try jw.objectField("links");
+        try writeProperties(jw, self.links);
+
+        if (self.alternate.len > 0) {
+            try jw.objectField("alternate");
+            try jw.beginArray();
+            for (self.alternate) |alt| {
+                try jw.beginObject();
+                try jw.objectField("href");
+                try jw.write(alt.href);
+                if (alt.hreflang) |v| {
+                    try jw.objectField("hreflang");
+                    try jw.write(v);
+                }
+                if (alt.type) |v| {
+                    try jw.objectField("type");
+                    try jw.write(v);
+                }
+                if (alt.title) |v| {
+                    try jw.objectField("title");
+                    try jw.write(v);
+                }
+                try jw.endObject();
+            }
+            try jw.endArray();
+        }
+
+        try jw.endObject();
+    }
+};
+
+/// Serializes properties as a JSON object. When a key appears multiple times
+/// (e.g. multiple og:image tags), values are grouped into an array.
+/// Alternatives considered: always-array values (verbose), or an array of
+/// {key, value} pairs (preserves order but less ergonomic for consumers).
+fn writeProperties(jw: anytype, properties: []const Property) !void {
+    try jw.beginObject();
+    for (properties, 0..) |prop, i| {
+        // Skip keys already written by an earlier occurrence.
+        var already_written = false;
+        for (properties[0..i]) |prev| {
+            if (std.mem.eql(u8, prev.key, prop.key)) {
+                already_written = true;
+                break;
+            }
+        }
+        if (already_written) continue;
+
+        // Count total occurrences to decide string vs array.
+        var count: usize = 0;
+        for (properties) |p| {
+            if (std.mem.eql(u8, p.key, prop.key)) count += 1;
+        }
+
+        try jw.objectField(prop.key);
+        if (count == 1) {
+            try jw.write(prop.value);
+        } else {
+            try jw.beginArray();
+            for (properties) |p| {
+                if (std.mem.eql(u8, p.key, prop.key)) {
+                    try jw.write(p.value);
+                }
+            }
+            try jw.endArray();
+        }
+    }
+    try jw.endObject();
+}
+
+/// Extract all structured data from the page.
+pub fn collectStructuredData(
+    root: *Node,
+    arena: Allocator,
+    page: *Page,
+) !StructuredData {
+    var json_ld: std.ArrayList([]const u8) = .empty;
+    var open_graph: std.ArrayList(Property) = .empty;
+    var twitter_card: std.ArrayList(Property) = .empty;
+    var meta: std.ArrayList(Property) = .empty;
+    var links: std.ArrayList(Property) = .empty;
+    var alternate: std.ArrayList(AlternateLink) = .empty;
+
+    // Extract language from the root <html> element.
+    if (root.is(Element)) |root_el| {
+        if (root_el.getAttributeSafe(comptime .wrap("lang"))) |lang| {
+            try meta.append(arena, .{ .key = "language", .value = lang });
+        }
+    } else {
+        // Root is document — check documentElement.
+        var children = root.childrenIterator();
+        while (children.next()) |child| {
+            const el = child.is(Element) orelse continue;
+            if (el.getTag() == .html) {
+                if (el.getAttributeSafe(comptime .wrap("lang"))) |lang| {
+                    try meta.append(arena, .{ .key = "language", .value = lang });
+                }
+                break;
+            }
+        }
+    }
+
+    var tw = TreeWalker.Full.init(root, .{});
+    while (tw.next()) |node| {
+        const el = node.is(Element) orelse continue;
+
+        switch (el.getTag()) {
+            .script => {
+                try collectJsonLd(el, arena, &json_ld);
+                tw.skipChildren();
+            },
+            .meta => collectMeta(el, &open_graph, &twitter_card, &meta, arena) catch {},
+            .title => try collectTitle(node, arena, &meta),
+            .link => try collectLink(el, arena, page, &links, &alternate),
+            // Skip body subtree for non-JSON-LD — all other metadata is in <head>.
+            // JSON-LD can appear in <body> so we don't skip the whole body.
+            else => {},
+        }
+    }
+
+    return .{
+        .json_ld = json_ld.items,
+        .open_graph = open_graph.items,
+        .twitter_card = twitter_card.items,
+        .meta = meta.items,
+        .links = links.items,
+        .alternate = alternate.items,
+    };
+}
+
+fn collectJsonLd(
+    el: *Element,
+    arena: Allocator,
+    json_ld: *std.ArrayList([]const u8),
+) !void {
+    const type_attr = el.getAttributeSafe(comptime .wrap("type")) orelse return;
+    if (!std.ascii.eqlIgnoreCase(type_attr, "application/ld+json")) return;
+
+    var buf: std.Io.Writer.Allocating = .init(arena);
+    try el.asNode().getTextContent(&buf.writer);
+    const text = buf.written();
+    if (text.len > 0) {
+        try json_ld.append(arena, std.mem.trim(u8, text, &std.ascii.whitespace));
+    }
+}
+
+fn collectMeta(
+    el: *Element,
+    open_graph: *std.ArrayList(Property),
+    twitter_card: *std.ArrayList(Property),
+    meta: *std.ArrayList(Property),
+    arena: Allocator,
+) !void {
+    // charset: <meta charset="..."> (no content attribute needed).
+    if (el.getAttributeSafe(comptime .wrap("charset"))) |charset| {
+        try meta.append(arena, .{ .key = "charset", .value = charset });
+    }
+
+    const content = el.getAttributeSafe(comptime .wrap("content")) orelse return;
+
+    // Open Graph: <meta property="og:...">
+    if (el.getAttributeSafe(comptime .wrap("property"))) |property| {
+        if (std.mem.startsWith(u8, property, "og:")) {
+            try open_graph.append(arena, .{ .key = property[3..], .value = content });
+            return;
+        }
+        // Article, profile, etc. are OG sub-namespaces.
+        if (std.mem.startsWith(u8, property, "article:") or
+            std.mem.startsWith(u8, property, "profile:") or
+            std.mem.startsWith(u8, property, "book:") or
+            std.mem.startsWith(u8, property, "music:") or
+            std.mem.startsWith(u8, property, "video:"))
+        {
+            try open_graph.append(arena, .{ .key = property, .value = content });
+            return;
+        }
+    }
+
+    // Twitter Cards: <meta name="twitter:...">
+    if (el.getAttributeSafe(comptime .wrap("name"))) |name| {
+        if (std.mem.startsWith(u8, name, "twitter:")) {
+            try twitter_card.append(arena, .{ .key = name[8..], .value = content });
+            return;
+        }
+
+        // Standard meta tags by name.
+        const known_names = [_][]const u8{
+            "description", "author",    "keywords",    "robots",
+            "viewport",    "generator", "theme-color",
+        };
+        for (known_names) |known| {
+            if (std.ascii.eqlIgnoreCase(name, known)) {
+                try meta.append(arena, .{ .key = known, .value = content });
+                return;
+            }
+        }
+    }
+
+    // http-equiv (e.g. Content-Type, refresh)
+    if (el.getAttributeSafe(comptime .wrap("http-equiv"))) |http_equiv| {
+        try meta.append(arena, .{ .key = http_equiv, .value = content });
+    }
+}
+
+fn collectTitle(
+    node: *Node,
+    arena: Allocator,
+    meta: *std.ArrayList(Property),
+) !void {
+    var buf: std.Io.Writer.Allocating = .init(arena);
+    try node.getTextContent(&buf.writer);
+    const text = std.mem.trim(u8, buf.written(), &std.ascii.whitespace);
+    if (text.len > 0) {
+        try meta.append(arena, .{ .key = "title", .value = text });
+    }
+}
+
+fn collectLink(
+    el: *Element,
+    arena: Allocator,
+    page: *Page,
+    links: *std.ArrayList(Property),
+    alternate: *std.ArrayList(AlternateLink),
+) !void {
+    const rel = el.getAttributeSafe(comptime .wrap("rel")) orelse return;
+    const raw_href = el.getAttributeSafe(comptime .wrap("href")) orelse return;
+    const href = URL.resolve(arena, page.base(), raw_href, .{ .encode = true }) catch raw_href;
+
+    if (std.ascii.eqlIgnoreCase(rel, "alternate")) {
+        try alternate.append(arena, .{
+            .href = href,
+            .hreflang = el.getAttributeSafe(comptime .wrap("hreflang")),
+            .type = el.getAttributeSafe(comptime .wrap("type")),
+            .title = el.getAttributeSafe(comptime .wrap("title")),
+        });
+        return;
+    }
+
+    const relevant_rels = [_][]const u8{
+        "canonical",        "icon",       "manifest", "shortcut icon",
+        "apple-touch-icon", "search",     "author",   "license",
+        "dns-prefetch",     "preconnect",
+    };
+    for (relevant_rels) |known| {
+        if (std.ascii.eqlIgnoreCase(rel, known)) {
+            try links.append(arena, .{ .key = known, .value = href });
+            return;
+        }
+    }
+}
+
+// --- Tests ---
+
+const testing = @import("../testing.zig");
+
+fn testStructuredData(html: []const u8) !StructuredData {
+    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);
+
+    return collectStructuredData(div.asNode(), page.call_arena, page);
+}
+
+fn findProperty(props: []const Property, key: []const u8) ?[]const u8 {
+    for (props) |p| {
+        if (std.mem.eql(u8, p.key, key)) return p.value;
+    }
+    return null;
+}
+
+test "structured_data: json-ld" {
+    const data = try testStructuredData(
+        \\<script type="application/ld+json">
+        \\{"@context":"https://schema.org","@type":"Article","headline":"Test"}
+        \\</script>
+    );
+    try testing.expectEqual(1, data.json_ld.len);
+    try testing.expect(std.mem.indexOf(u8, data.json_ld[0], "Article") != null);
+}
+
+test "structured_data: multiple json-ld" {
+    const data = try testStructuredData(
+        \\<script type="application/ld+json">{"@type":"Organization"}</script>
+        \\<script type="application/ld+json">{"@type":"BreadcrumbList"}</script>
+        \\<script type="text/javascript">var x = 1;</script>
+    );
+    try testing.expectEqual(2, data.json_ld.len);
+}
+
+test "structured_data: open graph" {
+    const data = try testStructuredData(
+        \\<meta property="og:title" content="My Page">
+        \\<meta property="og:description" content="A description">
+        \\<meta property="og:image" content="https://example.com/img.jpg">
+        \\<meta property="og:url" content="https://example.com">
+        \\<meta property="og:type" content="article">
+        \\<meta property="article:published_time" content="2026-03-10">
+    );
+    try testing.expectEqual(6, data.open_graph.len);
+    try testing.expectEqual("My Page", findProperty(data.open_graph, "title").?);
+    try testing.expectEqual("article", findProperty(data.open_graph, "type").?);
+    try testing.expectEqual("2026-03-10", findProperty(data.open_graph, "article:published_time").?);
+}
+
+test "structured_data: open graph duplicate keys" {
+    const data = try testStructuredData(
+        \\<meta property="og:title" content="My Page">
+        \\<meta property="og:image" content="https://example.com/img1.jpg">
+        \\<meta property="og:image" content="https://example.com/img2.jpg">
+        \\<meta property="og:image" content="https://example.com/img3.jpg">
+    );
+    // Duplicate keys are preserved as separate Property entries.
+    try testing.expectEqual(4, data.open_graph.len);
+
+    // Verify serialization groups duplicates into arrays.
+    const json = try std.json.Stringify.valueAlloc(testing.allocator, data, .{});
+    defer testing.allocator.free(json);
+
+    const parsed = try std.json.parseFromSlice(std.json.Value, testing.allocator, json, .{});
+    defer parsed.deinit();
+    const og = parsed.value.object.get("openGraph").?.object;
+    // "title" appears once → string.
+    switch (og.get("title").?) {
+        .string => {},
+        else => return error.TestUnexpectedResult,
+    }
+    // "image" appears 3 times → array.
+    switch (og.get("image").?) {
+        .array => |arr| try testing.expectEqual(3, arr.items.len),
+        else => return error.TestUnexpectedResult,
+    }
+}
+
+test "structured_data: twitter card" {
+    const data = try testStructuredData(
+        \\<meta name="twitter:card" content="summary_large_image">
+        \\<meta name="twitter:site" content="@example">
+        \\<meta name="twitter:title" content="My Page">
+    );
+    try testing.expectEqual(3, data.twitter_card.len);
+    try testing.expectEqual("summary_large_image", findProperty(data.twitter_card, "card").?);
+    try testing.expectEqual("@example", findProperty(data.twitter_card, "site").?);
+}
+
+test "structured_data: meta tags" {
+    const data = try testStructuredData(
+        \\<title>Page Title</title>
+        \\<meta name="description" content="A test page">
+        \\<meta name="author" content="Test Author">
+        \\<meta name="keywords" content="test, example">
+        \\<meta name="robots" content="index, follow">
+    );
+    try testing.expectEqual("Page Title", findProperty(data.meta, "title").?);
+    try testing.expectEqual("A test page", findProperty(data.meta, "description").?);
+    try testing.expectEqual("Test Author", findProperty(data.meta, "author").?);
+    try testing.expectEqual("test, example", findProperty(data.meta, "keywords").?);
+    try testing.expectEqual("index, follow", findProperty(data.meta, "robots").?);
+}
+
+test "structured_data: link elements" {
+    const data = try testStructuredData(
+        \\<link rel="canonical" href="https://example.com/page">
+        \\<link rel="icon" href="/favicon.ico">
+        \\<link rel="manifest" href="/manifest.json">
+        \\<link rel="stylesheet" href="/style.css">
+    );
+    try testing.expectEqual(3, data.links.len);
+    try testing.expectEqual("https://example.com/page", findProperty(data.links, "canonical").?);
+    // stylesheet should be filtered out
+    try testing.expectEqual(null, findProperty(data.links, "stylesheet"));
+}
+
+test "structured_data: alternate links" {
+    const data = try testStructuredData(
+        \\<link rel="alternate" href="https://example.com/fr" hreflang="fr" title="French">
+        \\<link rel="alternate" href="https://example.com/de" hreflang="de">
+    );
+    try testing.expectEqual(2, data.alternate.len);
+    try testing.expectEqual("fr", data.alternate[0].hreflang.?);
+    try testing.expectEqual("French", data.alternate[0].title.?);
+    try testing.expectEqual("de", data.alternate[1].hreflang.?);
+    try testing.expectEqual(null, data.alternate[1].title);
+}
+
+test "structured_data: non-metadata elements ignored" {
+    const data = try testStructuredData(
+        \\<div>Just text</div>
+        \\<p>More text</p>
+        \\<a href="/link">Link</a>
+    );
+    try testing.expectEqual(0, data.json_ld.len);
+    try testing.expectEqual(0, data.open_graph.len);
+    try testing.expectEqual(0, data.twitter_card.len);
+    try testing.expectEqual(0, data.meta.len);
+    try testing.expectEqual(0, data.links.len);
+}
+
+test "structured_data: charset and http-equiv" {
+    const data = try testStructuredData(
+        \\<meta charset="utf-8">
+        \\<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    );
+    try testing.expectEqual("utf-8", findProperty(data.meta, "charset").?);
+    try testing.expectEqual("text/html; charset=utf-8", findProperty(data.meta, "Content-Type").?);
+}
+
+test "structured_data: mixed content" {
+    const data = try testStructuredData(
+        \\<title>My Site</title>
+        \\<meta property="og:title" content="OG Title">
+        \\<meta name="twitter:card" content="summary">
+        \\<meta name="description" content="A page">
+        \\<link rel="canonical" href="https://example.com">
+        \\<script type="application/ld+json">{"@type":"WebSite"}</script>
+    );
+    try testing.expectEqual(1, data.json_ld.len);
+    try testing.expectEqual(1, data.open_graph.len);
+    try testing.expectEqual(1, data.twitter_card.len);
+    try testing.expectEqual("My Site", findProperty(data.meta, "title").?);
+    try testing.expectEqual("A page", findProperty(data.meta, "description").?);
+    try testing.expectEqual(1, data.links.len);
+}

src/browser/tests/animation/animation.html

@@ -3,13 +3,67 @@
 
 <script id=animation>
   let a1 = document.createElement('div').animate(null, null);
-  testing.expectEqual('finished', a1.playState);
+  testing.expectEqual('idle', a1.playState);
 
   let cb = [];
-  a1.ready.then(() => { cb.push('ready') });
   a1.finished.then((x) => {
-    cb.push('finished');
+    cb.push(a1.playState);
     cb.push(x == a1);
   });
-  testing.eventually(() => testing.expectEqual(['finished', true], cb));
+  a1.ready.then(() => {
+    cb.push(a1.playState);
+    a1.play();
+    cb.push(a1.playState);
+  });
+  testing.eventually(() => testing.expectEqual(['idle', 'running', 'finished', true], cb));
+</script>
+
+<script id=startTime>
+  let a2 = document.createElement('div').animate(null, null);
+  // startTime defaults to null
+  testing.expectEqual(null, a2.startTime);
+  // startTime is settable
+  a2.startTime = 42.5;
+  testing.expectEqual(42.5, a2.startTime);
+  // startTime can be reset to null
+  a2.startTime = null;
+  testing.expectEqual(null, a2.startTime);
+</script>
+
+<script id=onfinish>
+  let a3 = document.createElement('div').animate(null, null);
+  // onfinish defaults to null
+  testing.expectEqual(null, a3.onfinish);
+
+  let calls = [];
+  // onfinish callback should be scheduled and called asynchronously
+  a3.onfinish = function() { calls.push('finish'); };
+  a3.play();
+  testing.eventually(() => testing.expectEqual(['finish'], calls));
+</script>
+
+<script id=pause>
+  let a4 = document.createElement('div').animate(null, null);
+  let cb4 = [];
+  a4.finished.then((x) => { cb4.push(a4.playState) });
+  a4.ready.then(() => {
+    a4.play();
+    cb4.push(a4.playState)
+    a4.pause();
+    cb4.push(a4.playState)
+  });
+  testing.eventually(() => testing.expectEqual(['running', 'paused'], cb4));
+</script>
+
+<script id=finish>
+  let a5 = document.createElement('div').animate(null, null);
+  testing.expectEqual('idle', a5.playState);
+
+  let cb5 = [];
+  a5.finished.then((x) => { cb5.push(a5.playState) });
+  a5.ready.then(() => {
+    cb5.push(a5.playState);
+    a5.play();
+  });
+  testing.eventually(() => testing.expectEqual(['idle', 'finished'], cb5));
 </script>

src/browser/tests/blob.html

@@ -98,6 +98,64 @@
   }
 </script>
 
+<script id=mime_parsing>
+  // MIME types are lowercased
+  {
+    const blob = new Blob([], { type: "TEXT/HTML" });
+    testing.expectEqual("text/html", blob.type);
+  }
+
+  {
+    const blob = new Blob([], { type: "Application/JSON" });
+    testing.expectEqual("application/json", blob.type);
+  }
+
+  // MIME with parameters - lowercased
+  {
+    const blob = new Blob([], { type: "text/html; charset=UTF-8" });
+    testing.expectEqual("text/html; charset=utf-8", blob.type);
+  }
+
+  // Any ASCII string is accepted and lowercased (no MIME structure validation)
+  {
+    const blob = new Blob([], { type: "invalid" });
+    testing.expectEqual("invalid", blob.type);
+  }
+
+  {
+    const blob = new Blob([], { type: "/" });
+    testing.expectEqual("/", blob.type);
+  }
+
+  // Non-ASCII characters cause empty string (chars outside U+0020-U+007E)
+  {
+    const blob = new Blob([], { type: "ý/x" });
+    testing.expectEqual("", blob.type);
+  }
+
+  {
+    const blob = new Blob([], { type: "text/plàin" });
+    testing.expectEqual("", blob.type);
+  }
+
+  // Control characters cause empty string
+  {
+    const blob = new Blob([], { type: "text/html\x00" });
+    testing.expectEqual("", blob.type);
+  }
+
+  // Empty type stays empty
+  {
+    const blob = new Blob([]);
+    testing.expectEqual("", blob.type);
+  }
+
+  {
+    const blob = new Blob([], { type: "" });
+    testing.expectEqual("", blob.type);
+  }
+</script>
+
 <script id=slice>
   {
     const parts = ["la", "symphonie", "des", "éclairs"];

src/browser/tests/canvas/canvas_rendering_context_2d.html

@@ -33,3 +33,105 @@
   testing.expectEqual(ctx.fillStyle, "rgba(255, 0, 0, 0.06)");
 }
 </script>
+
+<script id="CanvasRenderingContext2D#createImageData(width, height)">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const imageData = ctx.createImageData(100, 200);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 100);
+  testing.expectEqual(imageData.height, 200);
+  testing.expectEqual(imageData.data.length, 100 * 200 * 4);
+  testing.expectEqual(true, imageData.data instanceof Uint8ClampedArray);
+
+  // All pixels should be initialized to 0.
+  testing.expectEqual(imageData.data[0], 0);
+  testing.expectEqual(imageData.data[1], 0);
+  testing.expectEqual(imageData.data[2], 0);
+  testing.expectEqual(imageData.data[3], 0);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#createImageData(imageData)">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const source = ctx.createImageData(50, 75);
+  const imageData = ctx.createImageData(source);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 50);
+  testing.expectEqual(imageData.height, 75);
+  testing.expectEqual(imageData.data.length, 50 * 75 * 4);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#putImageData">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const imageData = ctx.createImageData(10, 10);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  // Modify some pixel data.
+  imageData.data[0] = 255;
+  imageData.data[1] = 0;
+  imageData.data[2] = 0;
+  imageData.data[3] = 255;
+
+  // putImageData should not throw.
+  ctx.putImageData(imageData, 0, 0);
+  ctx.putImageData(imageData, 10, 20);
+  // With dirty rect parameters.
+  ctx.putImageData(imageData, 0, 0, 0, 0, 5, 5);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#getImageData">
+{
+  const element = document.createElement("canvas");
+  element.width = 100;
+  element.height = 50;
+  const ctx = element.getContext("2d");
+
+  const imageData = ctx.getImageData(0, 0, 10, 20);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 10);
+  testing.expectEqual(imageData.height, 20);
+  testing.expectEqual(imageData.data.length, 10 * 20 * 4);
+  testing.expectEqual(true, imageData.data instanceof Uint8ClampedArray);
+
+  // Undrawn canvas should return transparent black pixels.
+  testing.expectEqual(imageData.data[0], 0);
+  testing.expectEqual(imageData.data[1], 0);
+  testing.expectEqual(imageData.data[2], 0);
+  testing.expectEqual(imageData.data[3], 0);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#getImageData invalid">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  // Zero or negative width/height should throw IndexSizeError.
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, 0, 10));
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, 10, 0));
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, -5, 10));
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, 10, -5));
+}
+</script>
+
+
+<script id="getter">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual('10px sans-serif', ctx.font);
+  ctx.font = 'bold 48px serif'
+  testing.expectEqual('bold 48px serif', ctx.font);
+
+}
+</script>

src/browser/tests/canvas/offscreen_canvas.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=OffscreenCanvas>
+{
+  const canvas = new OffscreenCanvas(256, 256);
+  testing.expectEqual(true, canvas instanceof OffscreenCanvas);
+  testing.expectEqual(canvas.width, 256);
+  testing.expectEqual(canvas.height, 256);
+}
+</script>
+
+<script id=OffscreenCanvas#width>
+{
+  const canvas = new OffscreenCanvas(100, 200);
+  testing.expectEqual(canvas.width, 100);
+  canvas.width = 300;
+  testing.expectEqual(canvas.width, 300);
+}
+</script>
+
+<script id=OffscreenCanvas#height>
+{
+  const canvas = new OffscreenCanvas(100, 200);
+  testing.expectEqual(canvas.height, 200);
+  canvas.height = 400;
+  testing.expectEqual(canvas.height, 400);
+}
+</script>
+
+<script id=OffscreenCanvas#getContext>
+{
+  const canvas = new OffscreenCanvas(64, 64);
+  const ctx = canvas.getContext("2d");
+  testing.expectEqual(true, ctx instanceof OffscreenCanvasRenderingContext2D);
+  // We can't really test rendering but let's try to call it at least.
+  ctx.fillRect(0, 0, 10, 10);
+}
+</script>
+
+<script id=OffscreenCanvas#convertToBlob>
+{
+  const canvas = new OffscreenCanvas(64, 64);
+  const promise = canvas.convertToBlob();
+  testing.expectEqual(true, promise instanceof Promise);
+  // The promise should resolve to a Blob (even if empty)
+  promise.then(blob => {
+    testing.expectEqual(true, blob instanceof Blob);
+    testing.expectEqual(blob.size, 0); // Empty since no rendering
+  });
+}
+</script>
+
+<script id=HTMLCanvasElement#transferControlToOffscreen>
+{
+  const htmlCanvas = document.createElement("canvas");
+  htmlCanvas.width = 128;
+  htmlCanvas.height = 96;
+  const offscreen = htmlCanvas.transferControlToOffscreen();
+  testing.expectEqual(true, offscreen instanceof OffscreenCanvas);
+  testing.expectEqual(offscreen.width, 128);
+  testing.expectEqual(offscreen.height, 96);
+}
+</script>
+
+<script id=OffscreenCanvasRenderingContext2D#getImageData>
+{
+  const canvas = new OffscreenCanvas(100, 50);
+  const ctx = canvas.getContext("2d");
+
+  const imageData = ctx.getImageData(0, 0, 10, 20);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 10);
+  testing.expectEqual(imageData.height, 20);
+  testing.expectEqual(imageData.data.length, 10 * 20 * 4);
+
+  // Undrawn canvas should return transparent black pixels.
+  testing.expectEqual(imageData.data[0], 0);
+  testing.expectEqual(imageData.data[1], 0);
+  testing.expectEqual(imageData.data[2], 0);
+  testing.expectEqual(imageData.data[3], 0);
+
+  // Zero or negative dimensions should throw.
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, 0, 10));
+  testing.expectError('Index or size', () => ctx.getImageData(0, 0, 10, -5));
+}
+</script>

src/browser/tests/cdata/comment.html

@@ -4,4 +4,6 @@
 <script id=comment>
   testing.expectEqual('', new Comment().data);
   testing.expectEqual('over 9000! ', new Comment('over 9000! ').data);
+
+  testing.expectEqual('null', new Comment(null).data);
 </script>

src/browser/tests/cdata/text.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <a id="link" href="foo" class="ok">OK</a>
 
-<script src="../../testing.js"></script>
+<script src="../testing.js"></script>
 <script id=text>
   let t = new Text('foo');
   testing.expectEqual('foo', t.data);
@@ -16,4 +16,7 @@
   let split = text.splitText('OK'.length);
   testing.expectEqual(' modified', split.data);
   testing.expectEqual('OK', text.data);
+
+    let x = new Text(null);
+    testing.expectEqual("null", x.data);
 </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

@@ -69,3 +69,11 @@
     testing.expectEqual(true, CSS.supports('z-index', '10'));
   }
 </script>
+
+<script id="escape_null_character">
+  {
+    testing.expectEqual('\uFFFD', CSS.escape('\x00'));
+    testing.expectEqual('test\uFFFDvalue', CSS.escape('test\x00value'));
+    testing.expectEqual('\uFFFDabc', CSS.escape('\x00abc'));
+  }
+</script>

src/browser/tests/css/font_face.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="constructor_basic">
+{
+    const face = new FontFace("TestFont", "url(test.woff)");
+    testing.expectTrue(face instanceof FontFace);
+}
+</script>
+
+<script id="constructor_name">
+{
+    testing.expectEqual('FontFace', FontFace.name);
+}
+</script>
+
+<script id="family_property">
+{
+    const face = new FontFace("MyFont", "url(font.woff2)");
+    testing.expectEqual("MyFont", face.family);
+}
+</script>
+
+<script id="status_is_loaded">
+{
+    const face = new FontFace("F", "url(f.woff)");
+    testing.expectEqual("loaded", face.status);
+}
+</script>
+
+<script id="loaded_is_promise">
+{
+    const face = new FontFace("F", "url(f.woff)");
+    testing.expectTrue(face.loaded instanceof Promise);
+}
+</script>
+
+<script id="load_returns_promise">
+{
+    const face = new FontFace("F", "url(f.woff)");
+    testing.expectTrue(face.load() instanceof Promise);
+}
+</script>
+
+<script id="default_descriptors">
+{
+    const face = new FontFace("F", "url(f.woff)");
+    testing.expectEqual("normal", face.style);
+    testing.expectEqual("normal", face.weight);
+    testing.expectEqual("normal", face.stretch);
+    testing.expectEqual("normal", face.variant);
+    testing.expectEqual("normal", face.featureSettings);
+    testing.expectEqual("auto", face.display);
+}
+</script>
+
+<script id="document_fonts_add">
+{
+    const face = new FontFace("AddedFont", "url(added.woff)");
+    const result = document.fonts.add(face);
+    testing.expectTrue(result === document.fonts);
+}
+</script>

src/browser/tests/css/font_face_set.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="document_fonts_exists">
+{
+    testing.expectTrue(document.fonts !== undefined);
+    testing.expectTrue(document.fonts !== null);
+}
+</script>
+
+<script id="document_fonts_same_instance">
+{
+    // Should return same instance each time
+    const f1 = document.fonts;
+    const f2 = document.fonts;
+    testing.expectTrue(f1 === f2);
+}
+</script>
+
+<script id="document_fonts_status">
+{
+    testing.expectEqual('loaded', document.fonts.status);
+}
+</script>
+
+<script id="document_fonts_size">
+{
+    testing.expectEqual(0, document.fonts.size);
+}
+</script>
+
+<script id="document_fonts_ready_is_promise">
+{
+    const ready = document.fonts.ready;
+    testing.expectTrue(ready instanceof Promise);
+}
+</script>
+
+<script id="document_fonts_ready_resolves">
+{
+    let resolved = false;
+    document.fonts.ready.then(() => { resolved = true; });
+    // Promise resolution is async; just confirm .then() does not throw
+    testing.expectTrue(typeof document.fonts.ready.then === 'function');
+}
+</script>
+
+<script id="document_fonts_check">
+{
+    testing.expectTrue(document.fonts.check('16px sans-serif'));
+}
+</script>
+
+<script id="document_fonts_constructor_name">
+{
+    testing.expectEqual('FontFaceSet', document.fonts.constructor.name);
+}
+</script>
+
+<script id="document_fonts_addEventListener">
+{
+    let loading = false;
+    document.fonts.addEventListener('loading', function() {
+        loading = true;
+    });
+
+    let loadingdone = false;
+    document.fonts.addEventListener('loadingdone', function() {
+        loadingdone = true;
+    });
+
+    document.fonts.load("italic bold 16px Roboto");
+
+    testing.eventually(() => {
+      testing.expectEqual(true, loading);
+      testing.expectEqual(true, loadingdone);
+    });
+    testing.expectEqual(true, true);
+}
+</script>

src/browser/tests/css/stylesheet.html

@@ -205,3 +205,217 @@
     testing.expectEqual('', style.getPropertyPriority('content'));
 }
 </script>
+
+<script id="CSSStyleDeclaration_style_syncs_to_attribute">
+{
+    // JS style modifications must be reflected in getAttribute.
+    const div = document.createElement('div');
+
+    // Named property assignment (element.style.X = ...)
+    div.style.opacity = '0';
+    testing.expectEqual('opacity: 0;', div.getAttribute('style'));
+
+    // Update existing property
+    div.style.opacity = '1';
+    testing.expectEqual('opacity: 1;', div.getAttribute('style'));
+
+    // Add a second property
+    div.style.color = 'red';
+    testing.expectTrue(div.getAttribute('style').includes('opacity: 1'));
+    testing.expectTrue(div.getAttribute('style').includes('color: red'));
+
+    // removeProperty syncs back
+    div.style.removeProperty('opacity');
+    testing.expectTrue(!div.getAttribute('style').includes('opacity'));
+    testing.expectTrue(div.getAttribute('style').includes('color: red'));
+
+    // setCssText syncs back
+    div.style.cssText = 'filter: blur(0px)';
+    testing.expectEqual('filter: blur(0px);', div.getAttribute('style'));
+
+    // setCssText with empty string clears attribute
+    div.style.cssText = '';
+    testing.expectEqual('', div.getAttribute('style'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_outerHTML_reflects_style_changes">
+{
+    // outerHTML must reflect JS-modified styles (regression test for
+    // DOM serialization reading stale HTML-parsed attribute values).
+    const div = document.createElement('div');
+    div.setAttribute('style', 'filter:blur(10px);opacity:0');
+
+    div.style.filter = 'blur(0px)';
+    div.style.opacity = '1';
+
+    const html = div.outerHTML;
+    testing.expectTrue(html.includes('filter: blur(0px)'));
+    testing.expectTrue(html.includes('opacity: 1'));
+    testing.expectTrue(!html.includes('blur(10px)'));
+    testing.expectTrue(!html.includes('opacity:0'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_non_ascii_custom_property">
+{
+    // Regression test: accessing element.style must not crash when the inline
+    // style attribute contains CSS custom properties with non-ASCII (UTF-8
+    // multibyte) names, such as French accented characters.
+    // The CSS Tokenizer's consumeName() must advance over whole UTF-8 sequences
+    // rather than byte-by-byte to avoid landing on a continuation byte.
+    const div = document.createElement('div');
+    div.setAttribute('style',
+        '--color-store-bulles-\u00e9t\u00e9-fg: #6a818f;' +
+        '--color-store-soir\u00e9es-odl-fg: #56b3b3;' +
+        'color: red;'
+    );
+
+    // Must not crash, and ASCII properties that follow non-ASCII ones must be readable.
+    testing.expectEqual('red', div.style.getPropertyValue('color'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_normalize_zero_to_0px">
+{
+    // Per CSSOM spec, unitless zero in length properties should serialize as "0px"
+    const div = document.createElement('div');
+
+    div.style.width = '0';
+    testing.expectEqual('0px', div.style.width);
+
+    div.style.margin = '0';
+    testing.expectEqual('0px', div.style.margin);
+
+    div.style.padding = '0';
+    testing.expectEqual('0px', div.style.padding);
+
+    div.style.top = '0';
+    testing.expectEqual('0px', div.style.top);
+
+    // Scroll properties
+    div.style.scrollMarginTop = '0';
+    testing.expectEqual('0px', div.style.scrollMarginTop);
+
+    div.style.scrollPaddingBottom = '0';
+    testing.expectEqual('0px', div.style.scrollPaddingBottom);
+
+    // Multi-column
+    div.style.columnWidth = '0';
+    testing.expectEqual('0px', div.style.columnWidth);
+
+    div.style.columnRuleWidth = '0';
+    testing.expectEqual('0px', div.style.columnRuleWidth);
+
+    // Outline shorthand
+    div.style.outline = '0';
+    testing.expectEqual('0px', div.style.outline);
+
+    // Shapes
+    div.style.shapeMargin = '0';
+    testing.expectEqual('0px', div.style.shapeMargin);
+
+    // Non-length properties should not be affected
+    div.style.opacity = '0';
+    testing.expectEqual('0', div.style.opacity);
+
+    div.style.zIndex = '0';
+    testing.expectEqual('0', div.style.zIndex);
+}
+</script>
+
+<script id="CSSStyleDeclaration_normalize_first_baseline">
+{
+    // "first baseline" should serialize canonically as "baseline"
+    const div = document.createElement('div');
+
+    div.style.alignItems = 'first baseline';
+    testing.expectEqual('baseline', div.style.alignItems);
+
+    div.style.alignContent = 'first baseline';
+    testing.expectEqual('baseline', div.style.alignContent);
+
+    div.style.alignSelf = 'first baseline';
+    testing.expectEqual('baseline', div.style.alignSelf);
+
+    div.style.justifySelf = 'first baseline';
+    testing.expectEqual('baseline', div.style.justifySelf);
+
+    // "last baseline" should remain unchanged
+    div.style.alignItems = 'last baseline';
+    testing.expectEqual('last baseline', div.style.alignItems);
+}
+</script>
+
+<script id="CSSStyleDeclaration_normalize_duplicate_values">
+{
+    // For 2-value shorthand properties, "X X" should collapse to "X"
+    const div = document.createElement('div');
+
+    div.style.placeContent = 'center center';
+    testing.expectEqual('center', div.style.placeContent);
+
+    div.style.placeContent = 'start start';
+    testing.expectEqual('start', div.style.placeContent);
+
+    div.style.gap = '10px 10px';
+    testing.expectEqual('10px', div.style.gap);
+
+    // Different values should not collapse
+    div.style.placeContent = 'center start';
+    testing.expectEqual('center start', div.style.placeContent);
+
+    div.style.gap = '10px 20px';
+    testing.expectEqual('10px 20px', div.style.gap);
+
+    // New shorthands
+    div.style.overflow = 'hidden hidden';
+    testing.expectEqual('hidden', div.style.overflow);
+
+    div.style.scrollSnapAlign = 'start start';
+    testing.expectEqual('start', div.style.scrollSnapAlign);
+
+    div.style.overscrollBehavior = 'auto auto';
+    testing.expectEqual('auto', div.style.overscrollBehavior);
+}
+</script>
+
+<script id="CSSStyleDeclaration_normalize_anchor_size">
+{
+    // anchor-size() should serialize with dashed ident (anchor name) before size keyword
+    const div = document.createElement('div');
+
+    // Already canonical order - should stay the same
+    div.style.width = 'anchor-size(--foo width)';
+    testing.expectEqual('anchor-size(--foo width)', div.style.width);
+
+    // Non-canonical order - should be reordered
+    div.style.width = 'anchor-size(width --foo)';
+    testing.expectEqual('anchor-size(--foo width)', div.style.width);
+
+    // With fallback value
+    div.style.width = 'anchor-size(height --bar, 100px)';
+    testing.expectEqual('anchor-size(--bar height, 100px)', div.style.width);
+
+    // Different size keywords
+    div.style.width = 'anchor-size(block --baz)';
+    testing.expectEqual('anchor-size(--baz block)', div.style.width);
+
+    div.style.width = 'anchor-size(inline --qux)';
+    testing.expectEqual('anchor-size(--qux inline)', div.style.width);
+
+    div.style.width = 'anchor-size(self-block --test)';
+    testing.expectEqual('anchor-size(--test self-block)', div.style.width);
+
+    div.style.width = 'anchor-size(self-inline --test)';
+    testing.expectEqual('anchor-size(--test self-inline)', div.style.width);
+
+    // Without anchor name (implicit default anchor)
+    div.style.width = 'anchor-size(width)';
+    testing.expectEqual('anchor-size(width)', div.style.width);
+
+    // Nested anchor-size in fallback
+    div.style.width = 'anchor-size(width --foo, anchor-size(height --bar))';
+    testing.expectEqual('anchor-size(--foo width, anchor-size(--bar height))', div.style.width);
+}
+</script>

src/browser/tests/custom_elements/constructor.html

@@ -53,3 +53,78 @@
     testing.expectEqual('NO-CONSTRUCTOR-ELEMENT', el.tagName);
 }
 </script>
+
+<div id=clone_container></div>
+
+<script id=clone>
+    {
+        let calls = 0;
+        class MyCloneElementA extends HTMLElement {
+            constructor() {
+                super();
+                calls += 1;
+                $('#clone_container').appendChild(this);
+            }
+        }
+        customElements.define('my-clone_element_a', MyCloneElementA);
+        const original = document.createElement('my-clone_element_a');
+         $('#clone_container').cloneNode(true);
+        testing.expectEqual(2, calls);
+    }
+</script>
+
+<div id=fragment_clone_container></div>
+
+<script id=clone_fragment>
+    {
+        let calls = 0;
+        class MyFragmentCloneElement extends HTMLElement {
+            constructor() {
+                super();
+                calls += 1;
+                $('#fragment_clone_container').appendChild(this);
+            }
+        }
+        customElements.define('my-fragment-clone-element', MyFragmentCloneElement);
+
+        // Create a DocumentFragment with a custom element
+        const fragment = document.createDocumentFragment();
+        const customEl = document.createElement('my-fragment-clone-element');
+        fragment.appendChild(customEl);
+
+        // Clone the fragment - this should trigger the crash
+        // because the constructor will attach the element during cloning
+        const clonedFragment = fragment.cloneNode(true);
+        testing.expectEqual(2, calls);
+    }
+</script>
+
+<div id=range_clone_container></div>
+
+<script id=clone_range>
+    {
+        let calls = 0;
+        class MyRangeCloneElement extends HTMLElement {
+            constructor() {
+                super();
+                calls += 1;
+                $('#range_clone_container').appendChild(this);
+            }
+        }
+        customElements.define('my-range-clone-element', MyRangeCloneElement);
+
+        // Create a container with a custom element
+        const container = document.createElement('div');
+        const customEl = document.createElement('my-range-clone-element');
+        container.appendChild(customEl);
+
+        // Create a range that includes the custom element
+        const range = document.createRange();
+        range.selectNodeContents(container);
+
+        // Clone the range contents - this should trigger the crash
+        // because the constructor will attach the element during cloning
+        const clonedContents = range.cloneContents();
+        testing.expectEqual(2, calls);
+    }
+</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/custom_elements/throw_on_dynamic_markup_insertion.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<head>
+<script src="../testing.js"></script>
+<script>
+// Test that document.open/write/close throw InvalidStateError during custom element
+// reactions when the element is parsed from HTML
+
+window.constructorOpenException = null;
+window.constructorWriteException = null;
+window.constructorCloseException = null;
+window.constructorCalled = false;
+
+class ThrowTestElement extends HTMLElement {
+    constructor() {
+        super();
+        window.constructorCalled = true;
+
+        // Try document.open on the same document during constructor - should throw
+        try {
+            document.open();
+        } catch (e) {
+            window.constructorOpenException = e;
+        }
+
+        // Try document.write on the same document during constructor - should throw
+        try {
+            document.write('<b>test</b>');
+        } catch (e) {
+            window.constructorWriteException = e;
+        }
+
+        // Try document.close on the same document during constructor - should throw
+        try {
+            document.close();
+        } catch (e) {
+            window.constructorCloseException = e;
+        }
+    }
+}
+
+customElements.define('throw-test-element', ThrowTestElement);
+</script>
+</head>
+<body>
+<!-- This element will be parsed from HTML, triggering the constructor -->
+<throw-test-element id="test-element"></throw-test-element>
+
+<script id="verify_throws">
+{
+    // Verify the constructor was called
+    testing.expectEqual(true, window.constructorCalled);
+
+    // Verify document.open threw InvalidStateError
+    testing.expectEqual(true, window.constructorOpenException !== null);
+    testing.expectEqual('InvalidStateError', window.constructorOpenException.name);
+
+    // Verify document.write threw InvalidStateError
+    testing.expectEqual(true, window.constructorWriteException !== null);
+    testing.expectEqual('InvalidStateError', window.constructorWriteException.name);
+
+    // Verify document.close threw InvalidStateError
+    testing.expectEqual(true, window.constructorCloseException !== null);
+    testing.expectEqual('InvalidStateError', window.constructorCloseException.name);
+}
+</script>
+</body>

src/browser/tests/document/create_element_ns.html

@@ -7,9 +7,11 @@
   testing.expectEqual(true, htmlDiv1 instanceof HTMLDivElement);
   testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv1.namespaceURI);
 
+  // Per spec, createElementNS does NOT lowercase — 'DIV' != 'div', so this
+  // creates an HTMLUnknownElement, not an HTMLDivElement.
   const htmlDiv2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'DIV');
   testing.expectEqual('DIV', htmlDiv2.tagName);
-  testing.expectEqual(true, htmlDiv2 instanceof HTMLDivElement);
+  testing.expectEqual(false, htmlDiv2 instanceof HTMLDivElement);
   testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv2.namespaceURI);
 
   const svgRect = document.createElementNS('http://www.w3.org/2000/svg', 'RecT');

src/browser/tests/document/document.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <head id="the_head">
+  <meta charset="UTF-8">
   <title>Test Document Title</title>
   <script src="../testing.js"></script>
 </head>
@@ -11,7 +12,7 @@
   testing.expectEqual(10, document.childNodes[0].nodeType);
   testing.expectEqual(null, document.parentNode);
   testing.expectEqual(undefined, document.getCurrentScript);
-  testing.expectEqual("http://127.0.0.1:9582/src/browser/tests/document/document.html", document.URL);
+  testing.expectEqual(testing.BASE_URL + 'document/document.html', document.URL);
   testing.expectEqual(window, document.defaultView);
   testing.expectEqual(false, document.hidden);
   testing.expectEqual("visible", document.visibilityState);
@@ -26,6 +27,7 @@
 
 <script id=documentElement>
   testing.expectEqual($('#the_body').parentNode, document.documentElement);
+  testing.expectEqual(document.documentElement, document.scrollingElement);
 </script>
 
 <script id=title>
@@ -55,7 +57,7 @@
   testing.expectEqual('CSS1Compat', document.compatMode);
   testing.expectEqual(document.URL, document.documentURI);
   testing.expectEqual('', document.referrer);
-  testing.expectEqual('127.0.0.1', document.domain);
+  testing.expectEqual(testing.HOST, document.domain);
 </script>
 
 <script id=programmatic_document_metadata>
@@ -68,7 +70,7 @@
   testing.expectEqual('CSS1Compat', doc.compatMode);
   testing.expectEqual('', doc.referrer);
   // Programmatic document should have empty domain (no URL/origin)
-  testing.expectEqual('127.0.0.1', doc.domain);
+  testing.expectEqual(testing.HOST, doc.domain);
 </script>
 
 <!-- Test anchors and links -->
@@ -175,15 +177,111 @@
   testing.expectEqual(initialLength, anchors.length);
 </script>
 
-<script id=cookie>
-  testing.expectEqual('', document.cookie);
-  document.cookie = 'name=Oeschger;';
-  document.cookie = 'favorite_food=tripe;';
+<script id=cookie_basic>
+  // Basic cookie operations
+  document.cookie = 'testbasic1=Oeschger';
+  testing.expectEqual(true, document.cookie.includes('testbasic1=Oeschger'));
 
-  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
-  // "" should be returned, but the framework overrules it atm
+  document.cookie = 'testbasic2=tripe';
+  testing.expectEqual(true, document.cookie.includes('testbasic1=Oeschger'));
+  testing.expectEqual(true, document.cookie.includes('testbasic2=tripe'));
+
+  // HttpOnly should be ignored from JavaScript
+  const beforeHttp = document.cookie;
   document.cookie = 'IgnoreMy=Ghost; HttpOnly';
-  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+  testing.expectEqual(false, document.cookie.includes('IgnoreMy=Ghost'));
+
+  // Clean up
+  document.cookie = 'testbasic1=; Max-Age=0';
+  document.cookie = 'testbasic2=; Max-Age=0';
+</script>
+
+<script id=cookie_special_chars>
+  // Test special characters in cookie values
+  document.cookie = 'testspaces=hello world';
+  testing.expectEqual(true, document.cookie.includes('testspaces=hello world'));
+  document.cookie = 'testspaces=; Max-Age=0';
+
+  // Test various allowed special characters
+  document.cookie = 'testspecial=!#$%&\'()*+-./';
+  testing.expectEqual(true, document.cookie.includes('testspecial='));
+  document.cookie = 'testspecial=; Max-Age=0';
+
+  // Semicolon terminates the cookie value
+  document.cookie = 'testsemi=before;after';
+  testing.expectEqual(true, document.cookie.includes('testsemi=before'));
+  testing.expectEqual(false, document.cookie.includes('after'));
+  document.cookie = 'testsemi=; Max-Age=0';
+</script>
+
+<script id=cookie_empty_name>
+  // Cookie with empty name (just a value)
+  document.cookie = 'teststandalone';
+  testing.expectEqual(true, document.cookie.includes('teststandalone'));
+  document.cookie = 'teststandalone; Max-Age=0';
+</script>
+
+<script id=cookie_whitespace>
+  // Names and values should be trimmed
+  document.cookie = '  testtrim  =  trimmed_value  ';
+  testing.expectEqual(true, document.cookie.includes('testtrim=trimmed_value'));
+  document.cookie = 'testtrim=; Max-Age=0';
+</script>
+
+<script id=cookie_max_age>
+  // Max-Age=0 should immediately delete
+  document.cookie = 'testtemp0=value; Max-Age=0';
+  testing.expectEqual(false, document.cookie.includes('testtemp0=value'));
+
+  // Negative Max-Age should also delete
+  document.cookie = 'testinstant=value';
+  testing.expectEqual(true, document.cookie.includes('testinstant=value'));
+  document.cookie = 'testinstant=value; Max-Age=-1';
+  testing.expectEqual(false, document.cookie.includes('testinstant=value'));
+
+  // Positive Max-Age should keep cookie
+  document.cookie = 'testkept=value; Max-Age=3600';
+  testing.expectEqual(true, document.cookie.includes('testkept=value'));
+  document.cookie = 'testkept=; Max-Age=0';
+</script>
+
+<script id=cookie_overwrite>
+  // Setting a cookie with the same name should overwrite
+  document.cookie = 'testoverwrite=first';
+  testing.expectEqual(true, document.cookie.includes('testoverwrite=first'));
+
+  document.cookie = 'testoverwrite=second';
+  testing.expectEqual(true, document.cookie.includes('testoverwrite=second'));
+  testing.expectEqual(false, document.cookie.includes('testoverwrite=first'));
+
+  document.cookie = 'testoverwrite=; Max-Age=0';
+</script>
+
+<script id=cookie_path>
+  // Path attribute
+  document.cookie = 'testpath1=value; Path=/';
+  testing.expectEqual(true, document.cookie.includes('testpath1=value'));
+
+  // Different path cookie should coexist
+  document.cookie = 'testpath2=value2; Path=/src';
+  testing.expectEqual(true, document.cookie.includes('testpath1=value'));
+
+  document.cookie = 'testpath1=; Max-Age=0; Path=/';
+  document.cookie = 'testpath2=; Max-Age=0; Path=/src';
+</script>
+
+<script id=cookie_invalid_chars>
+  // Control characters (< 32 or > 126) should be rejected
+  const beforeBad = document.cookie;
+
+  document.cookie = 'testbad1\x00=value';
+  testing.expectEqual(false, document.cookie.includes('testbad1'));
+
+  document.cookie = 'testbad2\x1F=value';
+  testing.expectEqual(false, document.cookie.includes('testbad2'));
+
+  document.cookie = 'testbad3=val\x7F';
+  testing.expectEqual(false, document.cookie.includes('testbad3'));
 </script>
 
 <script id=createAttribute>

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,68 @@
   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>
+
+<script id="focus_disconnected_no_blur">
+{
+  const input1 = $('#input1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  input1.focus();
+  testing.expectEqual(input1, document.activeElement);
+
+  let blurCount = 0;
+  input1.addEventListener('blur', () => { blurCount++ });
+
+  // Focusing a disconnected element should be a no-op:
+  // blur must not fire on the currently focused element
+  document.createElement('a').focus();
+  testing.expectEqual(input1, document.activeElement);
+  testing.expectEqual(0, blurCount);
+}
+</script>

src/browser/tests/document/query_selector.html

@@ -270,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/document/query_selector_all.html

@@ -27,7 +27,9 @@
     testing.expectEqual(expected.length, result.length);
     testing.expectEqual(expected, Array.from(result).map((e) => e.textContent));
     testing.expectEqual(expected, Array.from(result.values()).map((e) => e.textContent));
+
     testing.expectEqual(expected.map((e, i) => i), Array.from(result.keys()));
+    testing.expectEqual(expected.map((e, i) => i.toString()), Object.keys(result));
   }
 </script>
 
@@ -376,3 +378,93 @@
 }
 </script>
 
+<form id="form-validity-test">
+  <input id="vi-required-empty" type="text" required>
+  <input id="vi-optional" type="text">
+  <input id="vi-hidden-required" type="hidden" required>
+  <fieldset id="vi-fieldset">
+    <input id="vi-nested-required" type="text" required>
+    <select id="vi-select-required" required>
+      <option value="">Pick one</option>
+      <option value="a">A</option>
+    </select>
+  </fieldset>
+</form>
+<input id="vi-checkbox" type="checkbox">
+
+<script id=invalidPseudo>
+{
+  // Inputs with required + empty value are :invalid
+  testing.expectEqual(true, document.getElementById('vi-required-empty').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-required-empty').matches(':valid'));
+
+  // Inputs without required are :valid
+  testing.expectEqual(false, document.getElementById('vi-optional').matches(':invalid'));
+  testing.expectEqual(true, document.getElementById('vi-optional').matches(':valid'));
+
+  // hidden inputs are not candidates for constraint validation
+  testing.expectEqual(false, document.getElementById('vi-hidden-required').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-hidden-required').matches(':valid'));
+
+  // select with required and empty selected value is :invalid
+  testing.expectEqual(true, document.getElementById('vi-select-required').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-select-required').matches(':valid'));
+
+  // fieldset containing invalid controls is :invalid
+  testing.expectEqual(true, document.getElementById('vi-fieldset').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-fieldset').matches(':valid'));
+
+  // form containing invalid controls is :invalid
+  testing.expectEqual(true, document.getElementById('form-validity-test').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('form-validity-test').matches(':valid'));
+}
+</script>
+
+<script id=validAfterValueSet>
+{
+  // After setting a value, a required input becomes :valid
+  const input = document.getElementById('vi-required-empty');
+  input.value = 'hello';
+  testing.expectEqual(false, input.matches(':invalid'));
+  testing.expectEqual(true, input.matches(':valid'));
+  input.value = '';
+}
+</script>
+
+<script id=indeterminatePseudo>
+{
+  const cb = document.getElementById('vi-checkbox');
+  testing.expectEqual(false, cb.matches(':indeterminate'));
+  cb.indeterminate = true;
+  testing.expectEqual(true, cb.matches(':indeterminate'));
+  cb.indeterminate = false;
+  testing.expectEqual(false, cb.matches(':indeterminate'));
+}
+</script>
+
+<script id=iterator_list_lifetime>
+  // This test is intended to ensure that a list remains alive as long as it
+  // must, i.e. as long as any iterator referencing the list is alive.
+  // This test depends on being able to force the v8 GC to cleanup, which
+  // we have no way of controlling. At worst, the test will pass without
+  // actually testing correct lifetime. But it was at least manually verified
+  // for me that this triggers plenty of GCs.
+  const expected = Array.from(document.querySelectorAll('*')).length;
+  {
+    let keys = [];
+
+    // Phase 1: Create many lists+iterators to fill up the arena pool
+    for (let i = 0; i < 1000; i++) {
+      let list = document.querySelectorAll('*');
+      keys.push(list.keys());
+
+      // Create an Event every iteration to compete for arenas
+      new Event('arena_compete');
+    }
+
+    for (let k of keys) {
+      const result = Array.from(k);
+      testing.expectEqual(expected, result.length);
+    }
+  }
+</script>

src/browser/tests/document/query_selector_attributes.html

@@ -111,3 +111,15 @@
   const containerDataTest = document.querySelector('#container [data-test]');
   testing.expectEqual('First', containerDataTest.innerText);
 </script>
+
+<link rel="preload" as="image" imagesrcset="url1.png 1x, url2.png 2x" id="preload-link">
+
+<script id="commaInAttrValue">
+  // Commas inside quoted attribute values must not be treated as selector separators
+  const el = document.querySelector('link[rel="preload"][as="image"][imagesrcset="url1.png 1x, url2.png 2x"]');
+  testing.expectEqual('preload-link', el.id);
+
+  // Also test with single quotes inside selector
+  const el2 = document.querySelector("link[imagesrcset='url1.png 1x, url2.png 2x']");
+  testing.expectEqual('preload-link', el2.id);
+</script>

src/browser/tests/domimplementation.html

@@ -108,6 +108,20 @@
   }
 </script>
 
+<script id=createHTMLDocument_nulll_title>
+  {
+    const impl = document.implementation;
+    const doc = impl.createHTMLDocument(null);
+
+    testing.expectEqual('null', doc.title);
+
+    // Should have title element in head
+    const titleElement = doc.head.querySelector('title');
+    testing.expectEqual(true, titleElement !== null);
+    testing.expectEqual('null', titleElement.textContent);
+  }
+</script>
+
 <script id=createHTMLDocument_structure>
   {
     const impl = document.implementation;

src/browser/tests/domparser.html

@@ -4,9 +4,17 @@
 
 <script id=basic>
 {
-  const parser = new DOMParser();
-  testing.expectEqual('object', typeof parser);
-  testing.expectEqual('function', typeof parser.parseFromString);
+  {
+    const parser = new DOMParser();
+    testing.expectEqual('object', typeof parser);
+    testing.expectEqual('function', typeof parser.parseFromString);
+  }
+
+  {
+    // Empty XML is a parse error (no root element)
+    const parser = new DOMParser();
+    testing.expectError('Error', () => parser.parseFromString('', 'text/xml'));
+  }
 }
 </script>
 
@@ -389,3 +397,25 @@
   }
 }
 </script>
+
+<script id=getElementsByTagName-xml>
+{
+  const parser = new DOMParser();
+  const doc = parser.parseFromString('<layout><row><col>A</col><col>B</col></row></layout>', 'text/xml');
+
+  // Test getElementsByTagName on document
+  const rows = doc.getElementsByTagName('row');
+  testing.expectEqual(1, rows.length);
+
+  // Test getElementsByTagName on element
+  const row = rows[0];
+  const cols = row.getElementsByTagName('col');
+  testing.expectEqual(2, cols.length);
+  testing.expectEqual('A', cols[0].textContent);
+  testing.expectEqual('B', cols[1].textContent);
+
+  // Test getElementsByTagName('*') on element
+  const allElements = row.getElementsByTagName('*');
+  testing.expectEqual(2, allElements.length);
+}
+</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');
@@ -131,3 +154,11 @@
   testing.expectEqual(true, typeof div.style.getPropertyPriority === 'function');
 }
 </script>
+
+
+<div id=crash1 style="background-position: 5% .1em"></div>
+<script id="crash_case_1">
+{
+  testing.expectEqual('5% .1em', $('#crash1').style.backgroundPosition);
+}
+</script>

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/anchor.html

@@ -11,11 +11,11 @@
 <script id=empty_href>
   testing.expectEqual('', $('#a0').href);
 
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/anchor1.html', $('#a1').href);
-  testing.expectEqual('http://127.0.0.1:9582/hello/world/anchor2.html', $('#a2').href);
+  testing.expectEqual(testing.BASE_URL + 'element/anchor1.html', $('#a1').href);
+  testing.expectEqual(testing.ORIGIN + 'hello/world/anchor2.html', $('#a2').href);
   testing.expectEqual('https://www.openmymind.net/Elixirs-With-Statement/', $('#a3').href);
 
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', $('#link').href);
+  testing.expectEqual(testing.BASE_URL + 'element/html/foo', $('#link').href);
 </script>
 
 <script id=dynamic_anchor_defaults>
@@ -129,7 +129,7 @@
   testing.expectEqual('https://foo.bar/?q=bar#frag', link.href);
 
   link.href = 'foo';
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', link.href);
+  testing.expectEqual(testing.BASE_URL + 'element/html/foo', link.href);
 
   testing.expectEqual('', link.type);
   link.type = 'text/html';
@@ -245,3 +245,11 @@
   testing.expectEqual('', b.toString());
 }
 </script>
+
+<script id=url_encode>
+  {
+    let a = document.createElement('a');
+    a.href = 'over 9000!';
+    testing.expectEqual(testing.BASE_URL + 'element/html/over%209000!', a.href);
+  }
+</script>

src/browser/tests/element/html/details.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<!-- Details elements -->
+<details id="details1">
+  <summary>Summary</summary>
+  Content
+</details>
+<details id="details2" open>
+  <summary>Open Summary</summary>
+  Content
+</details>
+
+<script id="instanceof">
+  {
+    const details = document.createElement('details')
+    testing.expectTrue(details instanceof HTMLDetailsElement)
+  }
+</script>
+
+<script id="open_initial">
+  testing.expectEqual(false, $('#details1').open)
+  testing.expectEqual(true, $('#details2').open)
+</script>
+
+<script id="open_set">
+  {
+    $('#details1').open = true
+    testing.expectEqual(true, $('#details1').open)
+
+    $('#details2').open = false
+    testing.expectEqual(false, $('#details2').open)
+  }
+</script>
+
+<script id="open_reflects_attribute">
+  {
+    const details = document.createElement('details')
+    testing.expectEqual(null, details.getAttribute('open'))
+
+    details.open = true
+    testing.expectEqual('', details.getAttribute('open'))
+
+    details.open = false
+    testing.expectEqual(null, details.getAttribute('open'))
+  }
+</script>
+
+<script id="name_initial">
+  {
+    const details = document.createElement('details')
+    testing.expectEqual('', details.name)
+  }
+</script>
+
+<script id="name_set">
+  {
+    const details = document.createElement('details')
+    details.name = 'group1'
+    testing.expectEqual('group1', details.name)
+    testing.expectEqual('group1', details.getAttribute('name'))
+  }
+</script>

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

@@ -143,6 +143,29 @@
 }
 </script>
 
+<script id="js_setter_null_clears_listener">
+{
+    // Setting an event handler property to null must silently clear it (not throw).
+    // Browsers also accept undefined and non-function values without throwing.
+    const div = document.createElement('div');
+
+    div.onload = () => 42;
+    testing.expectEqual('function', typeof div.onload);
+
+    // Setting to null removes the listener; getter returns null
+    div.onload = null;
+    testing.expectEqual(null, div.onload);
+
+    div.onerror = () => {};
+    div.onerror = null;
+    testing.expectEqual(null, div.onerror);
+
+    div.onclick = () => {};
+    div.onclick = null;
+    testing.expectEqual(null, div.onclick);
+}
+</script>
+
 <script id="different_event_types_independent">
 {
     // Test that different event types are stored independently

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/form.html

@@ -23,6 +23,22 @@
   }
 </script>
 
+<script id="action">
+  {
+    const form = document.createElement('form')
+    testing.expectEqual(testing.BASE_URL + 'element/html/form.html', form.action)
+
+    form.action = 'hello';
+    testing.expectEqual(testing.BASE_URL + 'element/html/hello', form.action)
+
+    form.action = '/hello';
+    testing.expectEqual(testing.ORIGIN + 'hello', form.action)
+
+    form.action = 'https://lightpanda.io/hello';
+    testing.expectEqual('https://lightpanda.io/hello', form.action)
+  }
+</script>
+
 <!-- Test fixtures for form.method -->
 <form id="form_get" method="get"></form>
 <form id="form_post" method="post"></form>

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

@@ -32,12 +32,12 @@
 
     img.src = 'test.png';
     // src property returns resolved absolute URL
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/test.png', img.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/test.png', img.src);
     // getAttribute returns the raw attribute value
     testing.expectEqual('test.png', img.getAttribute('src'));
 
     img.src = '/absolute/path.png';
-    testing.expectEqual('http://127.0.0.1:9582/absolute/path.png', img.src);
+    testing.expectEqual(testing.ORIGIN + 'absolute/path.png', img.src);
     testing.expectEqual('/absolute/path.png', img.getAttribute('src'));
 
     img.src = 'https://example.com/image.png';
@@ -98,48 +98,31 @@
 }
 </script>
 
-<script id="load-trigger-event">
+<script id="complete">
 {
-  const img = document.createElement("img");
-  let count = 0;
-  img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
-    testing.expectEqual(true, count < 3);
-    count++;
+    // Image with no src is complete per spec
+    const img = document.createElement('img');
+    testing.expectEqual(true, img.complete);
 
-    testing.expectEqual(false, bubbles);
-    testing.expectEqual(false, cancelBubble);
-    testing.expectEqual(false, cancelable);
-    testing.expectEqual(false, composed);
-    testing.expectEqual(true, isTrusted);
-    testing.expectEqual(img, target);
-  });
+    // Image with src is also complete (headless browser, no actual fetch)
+    img.src = 'test.png';
+    testing.expectEqual(true, img.complete);
 
-  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);
+    // Image constructor also complete
+    const img2 = new Image();
+    testing.expectEqual(true, img2.complete);
 }
 </script>
 
-<img
-  id="inline-img"
-  src="https://cdn.lightpanda.io/website/assets/images/docs/hn.png"
-  onload="(() => testing.expectEqual(true, true))()"
-/>
+<body></body>
 
-<script id="inline-on-load">
+<script id="img-load-event">
 {
-  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.
+  // An img fires a load event when src is set.
+  const img = document.createElement("img");
+  let result = false;
   testing.async(async () => {
-    const result = await new Promise(resolve => {
+    await new Promise(resolve => {
       img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
         testing.expectEqual(false, bubbles);
         testing.expectEqual(false, cancelBubble);
@@ -147,12 +130,46 @@
         testing.expectEqual(false, composed);
         testing.expectEqual(true, isTrusted);
         testing.expectEqual(img, target);
-
-        return resolve(true);
+        result = true;
+        return resolve();
       });
+      img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
     });
-
-    testing.expectEqual(true, result);
   });
+
+  testing.eventually(() => testing.expectEqual(true, result));
 }
 </script>
+
+<script id="img-no-load-without-src">
+{
+  // An img without src should not fire a load event.
+  let fired = false;
+  const img = document.createElement("img");
+  img.addEventListener("load", () => { fired = true; });
+  document.body.appendChild(img);
+  testing.eventually(() => testing.expectEqual(false, fired));
+}
+</script>
+
+<script id="lazy-src-set">
+{
+  // Append to DOM first, then set src — load should still fire.
+  const img = document.createElement("img");
+  let result = false;
+  img.onload = () => result = true;
+  document.body.appendChild(img);
+  img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
+</script>
+
+<script id=url_encode>
+  {
+    let img = document.createElement('img');
+    img.src = 'over 9000!?hello=world !';
+    testing.expectEqual('over 9000!?hello=world !', img.getAttribute('src'));
+    testing.expectEqual(testing.BASE_URL + 'element/html/over%209000!?hello=world%20!', img.src);
+  }
+</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

@@ -46,7 +46,7 @@
     testing.expectEqual(5, input.maxLength);
     input.maxLength = 'banana';
     testing.expectEqual(0, input.maxLength);
-    testing.expectError('Error: NegativeValueNotAllowed', () => { input.maxLength = -45;});
+    testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => { input.maxLength = -45;});
 
     testing.expectEqual(20, input.size);
     input.size = 5;
@@ -57,9 +57,9 @@
 
     testing.expectEqual('', input.src);
     input.src = 'foo'
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', input.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/foo', input.src);
     input.src = '-3'
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/-3', input.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/-3', input.src);
     input.src = ''
   }
 </script>
@@ -221,7 +221,45 @@
   }
 </script>
 
-<!-- <script id="defaultChecked">
+<script id="select_event">
+  {
+    const input = document.createElement('input');
+    input.value = 'Hello World';
+    document.body.appendChild(input);
+
+    let eventCount = 0;
+    let lastEvent = null;
+
+    input.addEventListener('select', (e) => {
+      eventCount++;
+      lastEvent = e;
+    });
+
+    let onselectFired = false;
+    input.onselect = () => { onselectFired = true; };
+
+    let bubbledToBody = false;
+    document.body.addEventListener('select', () => {
+      bubbledToBody = true;
+    });
+
+    testing.expectEqual(0, eventCount);
+
+    input.select();
+
+    testing.eventually(() => {
+      testing.expectEqual(1, eventCount);
+      testing.expectEqual('select', lastEvent.type);
+      testing.expectEqual(input, lastEvent.target);
+      testing.expectEqual(true, lastEvent.bubbles);
+      testing.expectEqual(false, lastEvent.cancelable);
+      testing.expectEqual(true, bubbledToBody);
+      testing.expectEqual(true, onselectFired);
+    });
+  }
+</script>
+
+<script id="defaultChecked">
   testing.expectEqual(true, $('#check1').defaultChecked)
   testing.expectEqual(false, $('#check2').defaultChecked)
   testing.expectEqual(true, $('#radio1').defaultChecked)
@@ -493,4 +531,4 @@
     input_checked.defaultChecked = true;
     testing.expectEqual(false, input_checked.checked);
   }
-</script> -->
+</script>

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,74 @@
+<!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>
+
+<label id="l2" for="input1"><span>Name</span></label>
+<input id="input2" type="text">
+<input id="input-hidden" type="hidden">
+<select id="sel1"><option>a</option></select>
+<button id="btn1">Click</button>
+<label id="l3"><input id="input3"><span>desc</span></label>
+<label id="l4"><span>no control here</span></label>
+<label id="l5"><label id="l5-inner"><input id="input5"></label></label>
+
+<script id="control">
+  {
+    // for attribute pointing to a text input
+    const l2 = document.getElementById('l2');
+    testing.expectEqual('input1', l2.control.id);
+
+    // for attribute pointing to a non-existent id
+    const lMissing = document.createElement('label');
+    lMissing.htmlFor = 'does-not-exist';
+    testing.expectEqual(null, lMissing.control);
+
+    // for attribute pointing to a hidden input -> not labelable, returns null
+    const lHidden = document.createElement('label');
+    lHidden.htmlFor = 'input-hidden';
+    document.body.appendChild(lHidden);
+    testing.expectEqual(null, lHidden.control);
+
+    // for attribute pointing to a select
+    const lSel = document.createElement('label');
+    lSel.htmlFor = 'sel1';
+    document.body.appendChild(lSel);
+    testing.expectEqual('sel1', lSel.control.id);
+
+    // for attribute pointing to a button
+    const lBtn = document.createElement('label');
+    lBtn.htmlFor = 'btn1';
+    document.body.appendChild(lBtn);
+    testing.expectEqual('btn1', lBtn.control.id);
+
+    // no for attribute: first labelable descendant
+    const l3 = document.getElementById('l3');
+    testing.expectEqual('input3', l3.control.id);
+
+    // no for attribute: no labelable descendant -> null
+    const l4 = document.getElementById('l4');
+    testing.expectEqual(null, l4.control);
+
+    // no for attribute: nested labels, first labelable in tree order
+    const l5 = document.getElementById('l5');
+    testing.expectEqual('input5', l5.control.id);
+
+    // label with no for and not in document -> null
+    const lDetached = document.createElement('label');
+    testing.expectEqual(null, lDetached.control);
+  }
+</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

@@ -8,5 +8,79 @@
   testing.expectEqual('https://lightpanda.io/opensource-browser/15', l2.href);
 
   l2.href = '/over/9000';
-  testing.expectEqual('http://127.0.0.1:9582/over/9000', l2.href);
+  testing.expectEqual(testing.ORIGIN + '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>
+
+<script id="link-load-event">
+{
+  // A link with rel=stylesheet and a non-empty href fires a load event when appended to the DOM
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = 'https://lightpanda.io/opensource-browser/15';
+
+  testing.async(async () => {
+    const result = await new Promise(resolve => {
+      link.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(link, target);
+        resolve(true);
+      });
+      document.head.appendChild(link);
+    });
+    testing.expectEqual(true, result);
+  });
+  testing.expectEqual(true, true);
+}
+</script>
+
+<script id="link-no-load-without-href">
+{
+  // A link with rel=stylesheet but no href should not fire a load event
+  let fired = false;
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.addEventListener('load', () => { fired = true; });
+  document.head.appendChild(link);
+  testing.eventually(() => testing.expectEqual(false, fired));
+}
+</script>
+
+<script id="link-no-load-wrong-rel">
+{
+  // A link without rel=stylesheet should not fire a load event
+  let fired = false;
+  const link = document.createElement('link');
+  link.href = 'https://lightpanda.io/opensource-browser/15';
+  link.addEventListener('load', () => { fired = true; });
+  document.head.appendChild(link);
+  testing.eventually(() => testing.expectEqual(false, fired));
+}
+</script>
+
+<script id="lazy-href-set">
+{
+  let result = false;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.onload = () => result = true;
+  // Append to DOM,
+  document.head.appendChild(link);
+  // then set href.
+  link.href = 'https://lightpanda.io/opensource-browser/15';
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
 </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');
@@ -194,7 +238,7 @@
     testing.expectEqual('', audio.src);
 
     audio.src = 'test.mp3';
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/test.mp3', audio.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/test.mp3', audio.src);
   }
 </script>
 
@@ -204,7 +248,7 @@
     testing.expectEqual('', video.poster);
 
     video.poster = 'poster.jpg';
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/poster.jpg', video.poster);
+    testing.expectEqual(testing.BASE_URL + 'element/html/poster.jpg', video.poster);
   }
 </script>
 

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/option.html

@@ -29,6 +29,12 @@
   testing.expectEqual('Text 3', $('#opt3').text)
 </script>
 
+<script id="text_set">
+  $('#opt1').text = 'New Text 1'
+  testing.expectEqual('New Text 1', $('#opt1').text)
+  testing.expectEqual('New Text 1', $('#opt1').textContent)
+</script>
+
 <script id="selected">
   testing.expectEqual(false, $('#opt1').selected)
   testing.expectEqual(true, $('#opt2').selected)

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/async_text.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<script src="../../../testing.js"></script>
+
+<script id=force_async>
+{
+   // Dynamically created scripts have async=true by default
+   let s = document.createElement('script');
+   testing.expectEqual(true, s.async);
+
+   // Setting async=false clears the force async flag and removes attribute
+   s.async = false;
+   testing.expectEqual(false, s.async);
+   testing.expectEqual(false, s.hasAttribute('async'));
+
+   // Setting async=true adds the attribute
+   s.async = true;
+   testing.expectEqual(true, s.async);
+   testing.expectEqual(true, s.hasAttribute('async'));
+}
+</script>
+
+<script></script>
+<script id=empty>
+{
+   // Empty parser-inserted script should have async=true (force async retained)
+   let scripts = document.getElementsByTagName('script');
+   let emptyScript = scripts[scripts.length - 2];
+   testing.expectEqual(true, emptyScript.async);
+}
+</script>
+
+<script id=text_content>
+{
+   let s = document.createElement('script');
+   s.appendChild(document.createComment('COMMENT'));
+   s.appendChild(document.createTextNode('  TEXT  '));
+   s.appendChild(document.createProcessingInstruction('P', 'I'));
+   let a = s.appendChild(document.createElement('a'));
+   a.appendChild(document.createTextNode('ELEMENT'));
+
+   // script.text should return only direct Text node children
+   testing.expectEqual('  TEXT  ', s.text);
+   // script.textContent should return all descendant text
+   testing.expectEqual('  TEXT  ELEMENT', s.textContent);
+}
+</script>
+
+<script id=lazy_inline>
+{
+   // Empty script in DOM, then append text - should execute
+   window.lazyScriptRan = false;
+   let s = document.createElement('script');
+   document.head.appendChild(s);
+   // Script is in DOM but empty, so not yet executed
+   testing.expectEqual(false, window.lazyScriptRan);
+   // Append text node with code
+   s.appendChild(document.createTextNode('window.lazyScriptRan = true;'));
+   // Now it should have executed
+   testing.expectEqual(true, window.lazyScriptRan);
+}
+</script>

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

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<head></head>
+<script src="../../../testing.js"></script>
+
+<script id=textContent_inline>
+  window.inline_executed = false;
+  const s1 = document.createElement('script');
+  s1.textContent = 'window.inline_executed = true;';
+  document.head.appendChild(s1);
+  testing.expectTrue(window.inline_executed);
+</script>
+
+<script id=text_property_inline>
+  window.text_executed = false;
+  const s2 = document.createElement('script');
+  s2.text = 'window.text_executed = true;';
+  document.head.appendChild(s2);
+  testing.expectTrue(window.text_executed);
+</script>
+
+<script id=innerHTML_inline>
+  window.innerHTML_executed = false;
+  const s3 = document.createElement('script');
+  s3.innerHTML = 'window.innerHTML_executed = true;';
+  document.head.appendChild(s3);
+  testing.expectTrue(window.innerHTML_executed);
+</script>
+
+<script id=no_double_execute_inline>
+  window.inline_counter = 0;
+  const s4 = document.createElement('script');
+  s4.textContent = 'window.inline_counter++;';
+  document.head.appendChild(s4);
+  document.head.appendChild(s4);
+  testing.expectEqual(1, window.inline_counter);
+</script>
+
+<script id=empty_script_no_execute>
+  window.empty_ran = false;
+  const s5 = document.createElement('script');
+  document.head.appendChild(s5);
+  testing.expectFalse(window.empty_ran);
+</script>
+
+<script id=module_inline>
+  window.module_executed = false;
+  const s6 = document.createElement('script');
+  s6.type = 'module';
+  s6.textContent = 'window.module_executed = true;';
+  document.head.appendChild(s6);
+  testing.eventually(() => {
+    testing.expectTrue(window.module_executed);
+  });
+</script>

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

@@ -2,11 +2,28 @@
 <script src="../../../testing.js"></script>
 
 <script id="script">
-   {
-    let s = document.createElement('script');
-    testing.expectEqual('', s.src);
+{
+   let dom_load = false;
+   let attribute_load = false;
 
-    s.src = '/over.9000.js';
-    testing.expectEqual('http://127.0.0.1:9582/over.9000.js', s.src);
+   let s = document.createElement('script');
+   document.documentElement.addEventListener('load', (e) => {
+      testing.expectEqual(s, e.target);
+      dom_load = true;
+   }, true);
+
+   testing.expectEqual('', s.src);
+   s.onload = function(e) {
+      testing.expectEqual(s, e.target);
+      attribute_load = true;
    }
+   s.src = 'empty.js';
+   testing.expectEqual(testing.BASE_URL + 'element/html/script/empty.js', s.src);
+   document.head.appendChild(s);
+
+   testing.eventually(() => {
+      testing.expectEqual(true, dom_load);
+      testing.expectEqual(true, attribute_load);
+   });
+}
 </script>