zig fmt

This commit involves a number of changes to finalizers, all aimed towards
better consistency and reliability.

A big part of this has to do with v8::Inspector's ability to move objects
across IsolatedWorlds. There has been a few previous efforts on this, the most
significant being https://github.com/lightpanda-io/browser/pull/1901. To recap,
a Zig instance can map to 0-N v8::Objects. Where N is the total number of
IsolatedWorlds. Generally, IsolatedWorlds between origins are...isolated...but
the v8::Inspector isn't bound by this. So a Zig instance cannot be tied to a
Context/Identity/IsolatedWorld...it has to live until all references, possibly
from different IsolatedWorlds, are released (or the page is reset).

Finalizers could previously be managed via reference counting or explicitly
toggling the instance as weak/strong. Now, only reference counting is supported.
weak/strong can essentially be seen as an acquireRef (rc += 1) and
releaseRef (rc -= 1). Explicit setting did make some things easier, like not
having to worry so much about double-releasing (e.g. XHR abort being called
multiple times), but it was only used in a few places AND it simply doesn't work
with objects shared between IsolatedWorlds. It is never a boolean now, as 3
different IsolatedWorlds can each hold a reference.

Temps and Globals are tracked on the Session. Previously, they were tracked on
the Identity, but that makes no sense. If a Zig instance can outlive an Identity,
then any of its Temp references can too. This hasn't been a problem because we've
only seen MutationObserver and IntersectionObserver be used cross-origin,
but the right CDP script can make this crash with a use-after-free (e.g.
`MessageEvent.data` is released when the Identity is done, but `MessageEvent` is
still referenced by a different IsolateWorld).

Rather than deinit with a `comptime shutdown: bool`, there is now an explicit
`releaseRef` and `deinit`.

Bridge registration has been streamlined. Previously, types had to register
their finalizer AND acquireRef/releaseRef/deinit had to be declared on the entire
prototype chain, even if these methods just delegated to their proto. Finalizers
are now automatically enabled if a type has a `acquireRef` function. If a type
has an `acquireRef`, then it must have a `releaseRef` and a `deinit`. So if
there's custom cleanup to do in `deinit`, then you also have to define
`acquireRef` and `releaseRef` which will just delegate to the _proto.

Furthermore these finalizer methods can be defined anywhere on the chain.

Previously:

```zig
const KeywboardEvent = struct {
  _proto: *Event,
  ...

  pub fn deinit(self: *KeyboardEvent, session: *Session) void {
    self._proto.deinit(session);
  }

  pub fn releaseRef(self: *KeyboardEvent, session: *Session) void {
    self._proto.releaseRef(session);
  }
}
```

```zig
const KeyboardEvent = struct {
  _proto: *Event,
  ...
  // no deinit, releaseRef, acquireref
}
```

Since the `KeyboardEvent` doesn't participate in finalization directly, it
doesn't have to define anything. The bridge will detect the most specific place
they are defined and call them there.

.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.7'
   v8:
     description: 'v8 version to install'
     required: false
@@ -46,7 +46,7 @@ runs:
 
     - name: Cache v8
       id: cache-v8
-      uses: actions/cache@v4
+      uses: actions/cache@v5
       env:
         cache-name: cache-v8
       with:

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

@@ -20,19 +20,17 @@ jobs:
     if: github.event.pull_request.draft == false
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
 
       - 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 }})
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64
 
       - name: upload artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: lightpanda-build-release
           path: |
@@ -47,7 +45,7 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           repository: 'lightpanda-io/demo'
           fetch-depth: 0
@@ -55,7 +53,7 @@ jobs:
       - run: npm install
 
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: lightpanda-build-release
 
@@ -63,6 +61,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

@@ -9,15 +9,13 @@ env:
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
     paths:
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "vendor/zig-js-runtime"
       - ".github/**"
-      - "vendor/**"
+      - "src/**"
+      - "build.zig"
+      - "build.zig.zon"
+
   pull_request:
 
     # By default GH trigger on types opened, synchronize and reopened.
@@ -29,12 +27,10 @@ on:
 
     paths:
       - ".github/**"
+      - "src/**"
       - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "vendor/**"
-      - ".github/**"
-      - "vendor/**"
+      - "build.zig.zon"
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -52,16 +48,14 @@ jobs:
       - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
 
       - 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 }})
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64
 
       - name: upload artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: lightpanda-build-release
           path: |
@@ -76,7 +70,7 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           repository: 'lightpanda-io/demo'
           fetch-depth: 0
@@ -84,7 +78,7 @@ jobs:
       - run: npm install
 
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: lightpanda-build-release
 
@@ -104,7 +98,7 @@ jobs:
       - name: run end to end tests through proxy
         run: |
           ./proxy/proxy & echo $! > PROXY.id
-          ./lightpanda serve --http_proxy 'http://127.0.0.1:3000' & echo $! > LPD.pid
+          ./lightpanda serve --http-proxy 'http://127.0.0.1:3000' & echo $! > LPD.pid
           go run runner/main.go
           kill `cat LPD.pid` `cat PROXY.id`
 
@@ -117,21 +111,16 @@ jobs:
           BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
           kill `cat LPD.pid` `cat PROXY.id`
 
-  cdp-and-hyperfine-bench:
-    name: cdp-and-hyperfine-bench
+  # e2e tests w/ web-bot-auth configuration on.
+  wba-demo-scripts:
+    name: wba-demo-scripts
     needs: zig-build-release
 
-    env:
-      MAX_MEMORY: 26000
-      MAX_AVG_DURATION: 17
-      LIGHTPANDA_DISABLE_TELEMETRY: true
-
-    # use a self host runner.
-    runs-on: lpd-bench-hetzner
+    runs-on: ubuntu-latest
     timeout-minutes: 15
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           repository: 'lightpanda-io/demo'
           fetch-depth: 0
@@ -139,7 +128,124 @@ jobs:
       - run: npm install
 
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
+        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
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    # Don't execute on PR
+    if: github.event_name != 'pull_request'
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - name: download artifact
+        uses: actions/download-artifact@v8
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      # force a wakup of the auth server before requesting it w/ the test itself
+      - run: curl https://${{ vars.WBA_DOMAIN }}
+
+      - name: run wba test
+        shell: bash
+        run: |
+          node webbotauth/validator.js &
+          VALIDATOR_PID=$!
+          sleep 5
+
+          exec 3<<< "${{ secrets.WBA_PRIVATE_KEY_PEM }}"
+
+          ./lightpanda fetch --dump http://127.0.0.1:8989/ \
+            --web-bot-auth-key-file /proc/self/fd/3 \
+            --web-bot-auth-keyid ${{ vars.WBA_KEY_ID }} \
+            --web-bot-auth-domain ${{ vars.WBA_DOMAIN }}
+
+          wait $VALIDATOR_PID
+          exec 3>&-
+
+  cdp-and-hyperfine-bench:
+    name: cdp-and-hyperfine-bench
+    needs: zig-build-release
+
+    env:
+      MAX_VmHWM: 28000 # 28MB (KB)
+      MAX_CG_PEAK: 8000 # 8MB (KB)
+      MAX_AVG_DURATION: 17
+
+      # 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
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v8
         with:
           name: lightpanda-build-release
 
@@ -150,22 +256,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 +315,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
@@ -193,7 +331,7 @@ jobs:
           echo "${{github.sha}}" > commit.txt
 
       - name: upload artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: bench-results
           path: |
@@ -216,12 +354,12 @@ jobs:
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
 
     steps:
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: bench-results
 
@@ -239,7 +377,7 @@ jobs:
 
     steps:
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: lightpanda-build-release
 

.github/workflows/nightly.yml

@@ -5,7 +5,9 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.NIGHTLY_BUILD_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.NIGHTLY_BUILD_AWS_BUCKET }}
   AWS_REGION: ${{ vars.NIGHTLY_BUILD_AWS_REGION }}
+
   RELEASE: ${{ github.ref_type == 'tag' && github.ref_name || 'nightly' }}
+  VERSION_FLAG: ${{ github.ref_type == 'tag' && format('-Dversion_string={0}', github.ref_name) || format('-Dpre_version={0}', 'nightly') }}
 
 on:
   push:
@@ -33,8 +35,6 @@ jobs:
       - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
         with:
@@ -45,7 +45,7 @@ jobs:
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
 
       - name: zig build
-        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 ${{ env.VERSION_FLAG }}
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -72,11 +72,9 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
         with:
@@ -87,7 +85,7 @@ jobs:
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
 
       - name: zig build
-        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=generic ${{ env.VERSION_FLAG }}
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -116,11 +114,9 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
         with:
@@ -131,7 +127,7 @@ jobs:
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
 
       - name: zig build
-        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast ${{ env.VERSION_FLAG }}
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -158,11 +154,9 @@ jobs:
     timeout-minutes: 20
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
         with:
@@ -173,7 +167,7 @@ jobs:
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
 
       - name: zig build
-        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast ${{ env.VERSION_FLAG }}
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}

.github/workflows/wpt.yml

@@ -5,43 +5,126 @@ 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:
   schedule:
-    - cron: "23 2 * * *"
+    - cron: "21 2 * * *"
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
-  wpt:
-    name: web platform tests json output
+  wpt-build-release:
+    name: zig build release
 
-    runs-on: ubuntu-latest
-    timeout-minutes: 90
+    env:
+      ARCH: aarch64
+      OS: linux
+
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 20
 
     steps:
       - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
 
-      - name: build wpt
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -- version
+      - name: v8 snapshot
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
+
+      - name: zig build release
+        run: zig build -Dsnapshot_path=../../snapshot.bin -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=generic
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v7
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  wpt-build-runner:
+    name: build wpt runner
+
+    runs-on: ubuntu-24.04-arm
+    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@v7
+        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-wpt-aws
+    timeout-minutes: 600
+
+    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@v8
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: download wptrunner
+        uses: actions/download-artifact@v8
+        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 20s
+          ./wptrunner -lpd-path ./lightpanda -json -concurrency 5 -pool 5 --mem-limit 400 > wpt.json
+          kill `cat WPT.pid`
 
       - name: write commit
         run: |
           echo "${{github.sha}}" > commit.txt
 
       - name: upload artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: wpt-results
           path: |
@@ -51,7 +134,7 @@ jobs:
 
   perf-fmt:
     name: perf-fmt
-    needs: wpt
+    needs: run-wpt
 
     runs-on: ubuntu-latest
     timeout-minutes: 15
@@ -64,7 +147,7 @@ jobs:
 
     steps:
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: wpt-results
 

.github/workflows/zig-fmt.yml

@@ -1,60 +0,0 @@
-name: zig-fmt
-
-on:
-  pull_request:
-
-    # By default GH trigger on types opened, synchronize and reopened.
-    # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
-    # Since we skip the job when the PR is in draft state, we want to force CI
-    # running when the PR is marked ready_for_review w/o other change.
-    # see https://github.com/orgs/community/discussions/25722#discussioncomment-3248917
-    types: [opened, synchronize, reopened, ready_for_review]
-
-    paths:
-      - ".github/**"
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-jobs:
-  zig-fmt:
-    name: zig fmt
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
-
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-
-    steps:
-      - uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-
-      # Zig version used from the `minimum_zig_version` field in build.zig.zon
-      - uses: mlugg/setup-zig@v2
-
-      - name: Run zig fmt
-        id: fmt
-        run: |
-          zig fmt --check ./*.zig ./**/*.zig 2> zig-fmt.err > zig-fmt.err2 || echo "Failed"
-          delimiter="$(openssl rand -hex 8)"
-          echo "zig_fmt_errs<<${delimiter}" >> "${GITHUB_OUTPUT}"
-
-          if [ -s zig-fmt.err ]; then
-            echo "// The following errors occurred:" >> "${GITHUB_OUTPUT}"
-            cat zig-fmt.err >> "${GITHUB_OUTPUT}"
-          fi
-
-          if [ -s zig-fmt.err2 ]; then
-            echo "// The following files were not formatted:" >> "${GITHUB_OUTPUT}"
-            cat zig-fmt.err2 >> "${GITHUB_OUTPUT}"
-          fi
-
-          echo "${delimiter}" >> "${GITHUB_OUTPUT}"
-
-      - name: Fail the job
-        if: steps.fmt.outputs.zig_fmt_errs != ''
-        run: exit 1

.github/workflows/zig-test.yml

@@ -5,19 +5,18 @@ 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 }}
+  LIGHTPANDA_DISABLE_TELEMETRY: true
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
     paths:
-      - "build.zig"
-      - "src/**"
-      - "vendor/zig-js-runtime"
       - ".github/**"
-      - "vendor/**"
-  pull_request:
+      - "src/**"
+      - "build.zig"
+      - "build.zig.zon"
 
+  pull_request:
     # By default GH trigger on types opened, synchronize and reopened.
     # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
     # Since we skip the job when the PR is in draft state, we want to force CI
@@ -27,28 +26,63 @@ on:
 
     paths:
       - ".github/**"
+      - "src/**"
       - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "vendor/**"
-      - ".github/**"
-      - "vendor/**"
+      - "build.zig.zon"
+
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
-  zig-test-debug:
-    name: zig test using v8 in debug mode
-    timeout-minutes: 15
+  zig-fmt:
+    name: zig fmt
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    if: github.event.pull_request.draft == false
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
+
+      # Zig version used from the `minimum_zig_version` field in build.zig.zon
+      - uses: mlugg/setup-zig@v2
+
+      - name: Run zig fmt
+        id: fmt
+        run: |
+          zig fmt --check ./*.zig ./**/*.zig 2> zig-fmt.err > zig-fmt.err2 || echo "Failed"
+          delimiter="$(openssl rand -hex 8)"
+          echo "zig_fmt_errs<<${delimiter}" >> "${GITHUB_OUTPUT}"
+
+          if [ -s zig-fmt.err ]; then
+            echo "// The following errors occurred:" >> "${GITHUB_OUTPUT}"
+            cat zig-fmt.err >> "${GITHUB_OUTPUT}"
+          fi
+
+          if [ -s zig-fmt.err2 ]; then
+            echo "// The following files were not formatted:" >> "${GITHUB_OUTPUT}"
+            cat zig-fmt.err2 >> "${GITHUB_OUTPUT}"
+          fi
+
+          echo "${delimiter}" >> "${GITHUB_OUTPUT}"
+
+      - name: Fail the job
+        if: steps.fmt.outputs.zig_fmt_errs != ''
+        run: exit 1
+
+  zig-test-debug:
+    name: zig test using v8 in debug mode
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    if: github.event.pull_request.draft == false
+
+    steps:
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
         with:
@@ -57,21 +91,18 @@ jobs:
       - name: zig build test
         run: zig build -Dprebuilt_v8_path=v8/libc_v8_debug.a -Dtsan=true test
 
-  zig-test:
+  zig-test-release:
     name: zig test
-    timeout-minutes: 15
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    if: github.event.pull_request.draft == false
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
 
       - uses: ./.github/actions/install
 
@@ -83,7 +114,7 @@ jobs:
           echo "${{github.sha}}" > commit.txt
 
       - name: upload artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: bench-results
           path: |
@@ -93,23 +124,22 @@ jobs:
 
   bench-fmt:
     name: perf-fmt
-    needs: zig-test
-
-    # Don't execute on PR
-    if: github.event_name != 'pull_request'
+    needs: zig-test-release
 
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
+    if: github.event_name != 'pull_request'
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
 
     steps:
       - name: download artifact
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v8
         with:
           name: bench-results
 

.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.7
 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" ;; \
@@ -57,8 +53,7 @@ RUN zig build -Doptimize=ReleaseFast \
 # build release
 RUN zig build -Doptimize=ReleaseFast \
     -Dsnapshot_path=../../snapshot.bin \
-    -Dprebuilt_v8_path=v8/libc_v8.a \
-    -Dgit_commit=$(git rev-parse --short HEAD)
+    -Dprebuilt_v8_path=v8/libc_v8.a
 
 FROM debian:stable-slim
 
@@ -79,4 +74,4 @@ EXPOSE 9222/tcp
 # Using "tini" as PID1 ensures that signals work as expected, so e.g. "docker stop" will not hang.
 # (See https://github.com/krallin/tini#why-tini).
 ENTRYPOINT ["/usr/bin/tini", "--"]
-CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222", "--log_level", "info"]
+CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222", "--log-level", "info"]

LICENSING.md

@@ -4,11 +4,3 @@ License names used in this document are as per [SPDX License
 List](https://spdx.org/licenses/).
 
 The default license for this project is [AGPL-3.0-only](LICENSE).
-
-The following directories and their subdirectories are licensed under their
-original upstream licenses:
-
-```
-vendor/
-tests/wpt/
-```

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 test bench data end2end
 
 ## Build v8 snapshot
 build-v8-snapshot:
@@ -57,14 +57,14 @@ build-v8-snapshot:
 
 ## Build in release-fast mode
 build: build-v8-snapshot
-	@printf "\033[36mBuilding (release safe)...\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[36mBuilding (release fast)...\033[0m\n"
+	@$(ZIG) build -Doptimize=ReleaseFast -Dsnapshot_path=../../snapshot.bin || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 	@printf "\033[33mBuild OK\033[0m\n"
 
 ## Build in debug mode
 build-dev:
 	@printf "\033[36mBuilding (debug)...\033[0m\n"
-	@$(ZIG) build -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@$(ZIG) build || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 	@printf "\033[33mBuild OK\033[0m\n"
 
 ## Run the server in release mode
@@ -77,20 +77,6 @@ run-debug: build-dev
 	@printf "\033[36mRunning...\033[0m\n"
 	@./zig-out/bin/lightpanda || (printf "\033[33mRun ERROR\033[0m\n"; exit 1;)
 
-## Run a JS shell in debug mode
-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 +97,7 @@ 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

@@ -1,18 +1,32 @@
 <p align="center">
   <a href="https://lightpanda.io"><img src="https://cdn.lightpanda.io/assets/images/logo/lpd-logo.png" alt="Logo" height=170></a>
 </p>
-
 <h1 align="center">Lightpanda Browser</h1>
+<p align="center">
+<strong>The headless browser built from scratch for AI agents and automation.</strong><br>
+Not a Chromium fork. Not a WebKit patch. A new browser, written in Zig.
+</p>
 
-<p align="center"><a href="https://lightpanda.io/">lightpanda.io</a></p>
-
+</div>
 <div align="center">
 
 [![License](https://img.shields.io/github/license/lightpanda-io/browser)](https://github.com/lightpanda-io/browser/blob/main/LICENSE)
 [![Twitter Follow](https://img.shields.io/twitter/follow/lightpanda_io)](https://twitter.com/lightpanda_io)
 [![GitHub stars](https://img.shields.io/github/stars/lightpanda-io/browser)](https://github.com/lightpanda-io/browser)
+[![Discord](https://img.shields.io/discord/1391984864894521354?style=flat-square&label=discord)](https://discord.gg/K63XeymfB5)
 
 </div>
+<div align="center">
+
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/execution-time-v2.svg">
+](https://github.com/lightpanda-io/demo)
+&emsp;
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/memory-frame-v2.svg">
+](https://github.com/lightpanda-io/demo)
+</div>
+
+_chromedp requesting 933 real web pages over the network on a AWS EC2 m5.large instance.
+See [benchmark details](https://github.com/lightpanda-io/demo/blob/main/BENCHMARKS.md#crawler-benchmark)._
 
 Lightpanda is the open-source browser made for headless usage:
 
@@ -26,16 +40,6 @@ Fast web automation for AI agents, LLM training, scraping and testing:
 - Exceptionally fast execution (11x faster than Chrome)
 - Instant startup
 
-[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/execution-time.svg">
-](https://github.com/lightpanda-io/demo)
-&emsp;
-[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/memory-frame.svg">
-](https://github.com/lightpanda-io/demo)
-</div>
-
-_Puppeteer requesting 100 pages from a local website on a AWS EC2 m5.large instance.
-See [benchmark details](https://github.com/lightpanda-io/demo)._
-
 [^1]: **Playwright support disclaimer:**
 Due to the nature of Playwright, a script that works with the current version of the browser may not function correctly with a future version. Playwright uses an intermediate JavaScript layer that selects an execution strategy based on the browser's available features. If Lightpanda adds a new [Web API](https://developer.mozilla.org/en-US/docs/Web/API), Playwright may choose to execute different code for the same script. This new code path could attempt to use features that are not yet implemented. Lightpanda makes an effort to add compatibility tests, but we can't cover all scenarios. If you encounter an issue, please create a [GitHub issue](https://github.com/lightpanda-io/browser/issues) and include the last known working version of the script.
 
@@ -78,7 +82,7 @@ docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
 ### Dump a URL
 
 ```console
-./lightpanda fetch --obey_robots --log_format pretty  --log_level info https://demo-browser.lightpanda.io/campfire-commerce/
+./lightpanda fetch --obey-robots --log-format pretty  --log-level info https://demo-browser.lightpanda.io/campfire-commerce/
 ```
 ```console
 INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
@@ -113,7 +117,7 @@ INFO  http : request complete . . . . . . . . . . . . . . . . [+141ms]
 ### Start a CDP server
 
 ```console
-./lightpanda serve --obey_robots --log_format pretty  --log_level info --host 127.0.0.1 --port 9222
+./lightpanda serve --obey-robots --log-format pretty  --log-level info --host 127.0.0.1 --port 9222
 ```
 ```console
 INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
@@ -182,12 +186,10 @@ Here are the key features we have implemented:
 - [x] Custom HTTP headers
 - [x] Proxy support
 - [x] Network interception
-- [x] Respect `robots.txt` with option `--obey_robots`
+- [x] Respect `robots.txt` with option `--obey-robots`
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
-You can also follow the progress of our Javascript support in our dedicated [zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime#development) project.
-
 ## Build from sources
 
 ### Prerequisites
@@ -196,10 +198,10 @@ Lightpanda is written with [Zig](https://ziglang.org/) `0.15.2`. You have to
 install it with the right version in order to build the project.
 
 Lightpanda also depends on
-[zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime/) (with v8),
+[v8](https://chromium.googlesource.com/v8/v8.git),
 [Libcurl](https://curl.se/libcurl/) and [html5ever](https://github.com/servo/html5ever).
 
-To be able to build the v8 engine for zig-js-runtime, you have to install some libs:
+To be able to build the v8 engine, you have to install some libs:
 
 For **Debian/Ubuntu based Linux**:
 
@@ -220,18 +222,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 +271,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",
+    .version = "1.0.0-dev",
     .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.7.tar.gz",
+            .hash = "v8-0.0.0-xddH67uBBAD95hWsPQz3Ni1PlZjdywtPXrGUAp8rSKco",
+        },
+        // .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();
@@ -64,27 +67,26 @@ pub fn init(allocator: Allocator, config: *const Config) !*App {
     app.app_dir_path = getAndMakeAppDir(allocator);
 
     app.telemetry = try Telemetry.init(app, config.mode);
-    errdefer app.telemetry.deinit();
+    errdefer app.telemetry.deinit(allocator);
 
-    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.telemetry.deinit(allocator);
+    self.network.deinit();
     self.snapshot.deinit();
     self.platform.deinit();
     self.arena_pool.deinit();

src/ArenaPool.zig

@@ -17,34 +17,62 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const builtin = @import("builtin");
+const log = @import("log.zig");
 
 const Allocator = std.mem.Allocator;
 const ArenaAllocator = std.heap.ArenaAllocator;
 
 const ArenaPool = @This();
 
+const IS_DEBUG = builtin.mode == .Debug;
+
 allocator: Allocator,
 retain_bytes: usize,
 free_list_len: u16 = 0,
 free_list: ?*Entry = null,
 free_list_max: u16,
 entry_pool: std.heap.MemoryPool(Entry),
+mutex: std.Thread.Mutex = .{},
+// Debug mode: track acquire/release counts per debug name to detect leaks and double-frees
+_leak_track: if (IS_DEBUG) std.StringHashMapUnmanaged(isize) else void = if (IS_DEBUG) .empty else {},
 
 const Entry = struct {
     next: ?*Entry,
     arena: ArenaAllocator,
+    debug: if (IS_DEBUG) []const u8 else void = if (IS_DEBUG) "" else {},
 };
 
-pub fn init(allocator: Allocator) ArenaPool {
+pub const DebugInfo = struct {
+    debug: []const u8 = "",
+};
+
+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),
+        ._leak_track = if (IS_DEBUG) .empty else {},
     };
 }
 
 pub fn deinit(self: *ArenaPool) void {
+    if (IS_DEBUG) {
+        var has_leaks = false;
+        var it = self._leak_track.iterator();
+        while (it.next()) |kv| {
+            if (kv.value_ptr.* != 0) {
+                log.err(.bug, "ArenaPool leak", .{ .name = kv.key_ptr.*, .count = kv.value_ptr.* });
+                has_leaks = true;
+            }
+        }
+        if (has_leaks) {
+            @panic("ArenaPool: leaked arenas detected");
+        }
+        self._leak_track.deinit(self.allocator);
+    }
+
     var entry = self.free_list;
     while (entry) |e| {
         entry = e.next;
@@ -53,10 +81,21 @@ pub fn deinit(self: *ArenaPool) void {
     self.entry_pool.deinit();
 }
 
-pub fn acquire(self: *ArenaPool) !Allocator {
+pub fn acquire(self: *ArenaPool, dbg: DebugInfo) !Allocator {
+    self.mutex.lock();
+    defer self.mutex.unlock();
+
     if (self.free_list) |entry| {
         self.free_list = entry.next;
         self.free_list_len -= 1;
+        if (IS_DEBUG) {
+            entry.debug = dbg.debug;
+            const gop = try self._leak_track.getOrPut(self.allocator, dbg.debug);
+            if (!gop.found_existing) {
+                gop.value_ptr.* = 0;
+            }
+            gop.value_ptr.* += 1;
+        }
         return entry.arena.allocator();
     }
 
@@ -64,8 +103,16 @@ pub fn acquire(self: *ArenaPool) !Allocator {
     entry.* = .{
         .next = null,
         .arena = ArenaAllocator.init(self.allocator),
+        .debug = if (IS_DEBUG) dbg.debug else {},
     };
 
+    if (IS_DEBUG) {
+        const gop = try self._leak_track.getOrPut(self.allocator, dbg.debug);
+        if (!gop.found_existing) {
+            gop.value_ptr.* = 0;
+        }
+        gop.value_ptr.* += 1;
+    }
     return entry.arena.allocator();
 }
 
@@ -73,6 +120,25 @@ 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();
+
+    if (IS_DEBUG) {
+        if (self._leak_track.getPtr(entry.debug)) |count| {
+            count.* -= 1;
+            if (count.* < 0) {
+                log.err(.bug, "ArenaPool double-free", .{ .name = entry.debug });
+                @panic("ArenaPool: double-free detected");
+            }
+        } else {
+            log.err(.bug, "ArenaPool release unknown", .{ .name = entry.debug });
+            @panic("ArenaPool: release of untracked arena");
+        }
+    }
+
     const free_list_len = self.free_list_len;
     if (free_list_len == self.free_list_max) {
         arena.deinit();
@@ -80,8 +146,128 @@ 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 });
+}
+
+pub fn resetRetain(_: *const ArenaPool, allocator: Allocator) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    _ = arena.reset(.retain_capacity);
+}
+
+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(.{ .debug = "test" });
+    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(.{ .debug = "test" });
+    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(.{ .debug = "test" });
+    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(.{ .debug = "test1" });
+    const a2 = try pool.acquire(.{ .debug = "test2" });
+    const a3 = try pool.acquire(.{ .debug = "test3" });
+
+    // 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(.{ .debug = "test1" });
+    const a2 = try pool.acquire(.{ .debug = "test2" });
+
+    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(.{ .debug = "test" });
+
+    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(.{ .debug = "test1" });
+    const a2 = try pool.acquire(.{ .debug = "test2" });
+    _ = 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,63 +123,131 @@ 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 port(self: *const Config) u16 {
+    return switch (self.mode) {
+        .serve => |opts| opts.port,
+        else => unreachable,
+    };
+}
+
+pub fn advertiseHost(self: *const Config) []const u8 {
+    return switch (self.mode) {
+        .serve => |opts| opts.advertise_host orelse opts.host,
+        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,
+    advertise_host: ?[]const u8 = null,
     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 WaitUntil = enum {
+    load,
+    domcontentloaded,
+    networkidle,
+    done,
+};
+
 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 = .{},
+    wait_ms: u32 = 5000,
+    wait_until: WaitUntil = .done,
 };
 
 pub const Common = struct {
@@ -185,6 +264,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.
@@ -234,88 +317,106 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
     //                                                                     MAX_HELP_LEN|
     const common_options =
         \\
-        \\--insecure_disable_tls_host_verification
+        \\--insecure-disable-tls-host-verification
         \\                Disables host verification on all HTTP requests. This is an
         \\                advanced option which should only be set if you understand
         \\                and accept the risk of disabling host verification.
         \\
-        \\--obey_robots
+        \\--obey-robots
         \\                Fetches and obeys the robots.txt (if available) of the web pages
         \\                we make requests towards.
         \\                Defaults to false.
         \\
-        \\--http_proxy    The HTTP proxy to use for all HTTP requests.
+        \\--http-proxy    The HTTP proxy to use for all HTTP requests.
         \\                A username:password can be included for basic authentication.
         \\                Defaults to none.
         \\
-        \\--proxy_bearer_token
+        \\--proxy-bearer-token
         \\                The <token> to send for bearer authentication with the proxy
         \\                Proxy-Authorization: Bearer <token>
         \\
-        \\--http_max_concurrent
+        \\--http-max-concurrent
         \\                The maximum number of concurrent HTTP requests.
         \\                Defaults to 10.
         \\
-        \\--http_max_host_open
+        \\--http-max-host-open
         \\                The maximum number of open connection to a given host:port.
         \\                Defaults to 4.
         \\
-        \\--http_connect_timeout
+        \\--http-connect-timeout
         \\                The time, in milliseconds, for establishing an HTTP connection
         \\                before timing out. 0 means it never times out.
         \\                Defaults to 0.
         \\
-        \\--http_timeout
+        \\--http-timeout
         \\                The maximum time, in milliseconds, the transfer is allowed
         \\                to complete. 0 means it never times out.
         \\                Defaults to 10000.
         \\
-        \\--http_max_response_size
+        \\--http-max-response-size
         \\                Limits the acceptable response size for any request
         \\                (e.g. XHR, fetch, script loading, ...).
         \\                Defaults to no limit.
         \\
-        \\--log_level     The log level: debug, info, warn, error or fatal.
+        \\--log-level     The log level: debug, info, warn, error or fatal.
         \\                Defaults to
     ++ (if (builtin.mode == .Debug) " info." else "warn.") ++
         \\
         \\
-        \\--log_format    The log format: pretty or logfmt.
+        \\--log-format    The log format: pretty or logfmt.
         \\                Defaults to
     ++ (if (builtin.mode == .Debug) " pretty." else " logfmt.") ++
         \\
         \\
-        \\--log_filter_scopes
+        \\--log-filter-scopes
         \\                Filter out too verbose logs per scope:
         \\                http, unknown_prop, event, ...
         \\
-        \\--user_agent_suffix
+        \\--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
+        \\--strip-mode    Comma separated list of tag groups to remove from dump
+        \\                the dump. e.g. --strip-mode js,css
         \\                  - "js" script and link[as=script, rel=preload]
         \\                  - "ui" includes img, picture, video, css and svg
         \\                  - "css" includes style and link[rel=stylesheet]
         \\                  - "full" includes js, ui and css
         \\
-        \\--with_base     Add a <base> tag in dump. Defaults to false.
+        \\--with-base     Add a <base> tag in dump. Defaults to false.
+        \\
+        \\--with-frames   Includes the contents of iframes. Defaults to false.
+        \\
+        \\--wait-ms       Wait time in milliseconds.
+        \\                Defaults to 5000.
+        \\
+        \\--wait-until    Wait until the specified event.
+        \\                Supported events: load, domcontentloaded, networkidle, done.
+        \\                Defaults to 'done'.
         \\
     ++ common_options ++
         \\
@@ -330,24 +431,28 @@ pub fn printUsageAndExit(self: *const Config, success: bool) void {
         \\--port          Port of the CDP server
         \\                Defaults to 9222
         \\
+        \\--advertise-host
+        \\                The host to advertise, e.g. in the /json/version response.
+        \\                Useful, for example, when --host is 0.0.0.0.
+        \\                Defaults to --host value
+        \\
         \\--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 +462,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 +497,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);
@@ -414,11 +521,15 @@ fn inferMode(opt: []const u8) ?RunMode {
         return .fetch;
     }
 
-    if (std.mem.eql(u8, opt, "--strip_mode")) {
+    if (std.mem.eql(u8, opt, "--strip-mode") or std.mem.eql(u8, opt, "--strip_mode")) {
         return .fetch;
     }
 
-    if (std.mem.eql(u8, opt, "--with_base")) {
+    if (std.mem.eql(u8, opt, "--with-base") or std.mem.eql(u8, opt, "--with_base")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--with-frames") or std.mem.eql(u8, opt, "--with_frames")) {
         return .fetch;
     }
 
@@ -466,6 +577,15 @@ fn parseServeArgs(
             continue;
         }
 
+        if (std.mem.eql(u8, "--advertise-host", opt) or std.mem.eql(u8, "--advertise_host", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = opt });
+                return error.InvalidArgument;
+            };
+            serve.advertise_host = try allocator.dupe(u8, str);
+            continue;
+        }
+
         if (std.mem.eql(u8, "--timeout", opt)) {
             const str = args.next() orelse {
                 log.fatal(.app, "missing argument value", .{ .arg = "--timeout" });
@@ -479,53 +599,27 @@ fn parseServeArgs(
             continue;
         }
 
-        if (std.mem.eql(u8, "--max_connections", opt)) {
+        if (std.mem.eql(u8, "--cdp-max-connections", opt) or 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 = opt });
                 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 = opt, .err = err });
                 return error.InvalidArgument;
             };
             continue;
         }
 
-        if (std.mem.eql(u8, "--max_tabs", opt)) {
+        if (std.mem.eql(u8, "--cdp-max-pending-connections", opt) or 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 = opt });
                 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 = opt, .err = err });
                 return error.InvalidArgument;
             };
             continue;
@@ -542,39 +636,99 @@ 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 = .{};
+    var wait_ms: u32 = 5000;
+    var wait_until: WaitUntil = .done;
 
     while (args.next()) |opt| {
+        if (std.mem.eql(u8, "--wait-ms", opt) or std.mem.eql(u8, "--wait_ms", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = opt });
+                return error.InvalidArgument;
+            };
+            wait_ms = std.fmt.parseInt(u32, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--wait-until", opt) or std.mem.eql(u8, "--wait_until", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = opt });
+                return error.InvalidArgument;
+            };
+            wait_until = std.meta.stringToEnum(WaitUntil, str) orelse {
+                log.fatal(.app, "invalid argument value", .{ .arg = opt, .val = str });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
         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;
         }
 
         if (std.mem.eql(u8, "--noscript", opt)) {
             log.warn(.app, "deprecation warning", .{
                 .feature = "--noscript argument",
-                .hint = "use '--strip_mode js' instead",
+                .hint = "use '--strip-mode js' instead",
             });
             strip.js = true;
             continue;
         }
 
-        if (std.mem.eql(u8, "--with_base", opt)) {
-            withbase = true;
+        if (std.mem.eql(u8, "--with-base", opt) or std.mem.eql(u8, "--with_base", opt)) {
+            with_base = true;
             continue;
         }
 
-        if (std.mem.eql(u8, "--strip_mode", opt)) {
+        if (std.mem.eql(u8, "--with-frames", opt) or std.mem.eql(u8, "--with_frames", opt)) {
+            with_frames = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--strip-mode", opt) or std.mem.eql(u8, "--strip_mode", opt)) {
             const str = args.next() orelse {
-                log.fatal(.app, "missing argument value", .{ .arg = "--strip_mode" });
+                log.fatal(.app, "missing argument value", .{ .arg = opt });
                 return error.InvalidArgument;
             };
 
@@ -592,7 +746,7 @@ fn parseFetchArgs(
                     strip.ui = true;
                     strip.css = true;
                 } else {
-                    log.fatal(.app, "invalid option choice", .{ .arg = "--strip_mode", .value = trimmed });
+                    log.fatal(.app, "invalid option choice", .{ .arg = opt, .value = trimmed });
                 }
             }
             continue;
@@ -621,10 +775,13 @@ 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,
+        .wait_ms = wait_ms,
+        .wait_until = wait_until,
     };
 }
 
@@ -634,102 +791,102 @@ fn parseCommonArg(
     args: *std.process.ArgIterator,
     common: *Common,
 ) !bool {
-    if (std.mem.eql(u8, "--insecure_disable_tls_host_verification", opt)) {
+    if (std.mem.eql(u8, "--insecure-disable-tls-host-verification", opt) or std.mem.eql(u8, "--insecure_disable_tls_host_verification", opt)) {
         common.tls_verify_host = false;
         return true;
     }
 
-    if (std.mem.eql(u8, "--obey_robots", opt)) {
+    if (std.mem.eql(u8, "--obey-robots", opt) or std.mem.eql(u8, "--obey_robots", opt)) {
         common.obey_robots = true;
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_proxy", opt)) {
+    if (std.mem.eql(u8, "--http-proxy", opt) or std.mem.eql(u8, "--http_proxy", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_proxy" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
         common.http_proxy = try allocator.dupeZ(u8, str);
         return true;
     }
 
-    if (std.mem.eql(u8, "--proxy_bearer_token", opt)) {
+    if (std.mem.eql(u8, "--proxy-bearer-token", opt) or std.mem.eql(u8, "--proxy_bearer_token", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_bearer_token" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
         common.proxy_bearer_token = try allocator.dupeZ(u8, str);
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_max_concurrent", opt)) {
+    if (std.mem.eql(u8, "--http-max-concurrent", opt) or std.mem.eql(u8, "--http_max_concurrent", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_concurrent" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.http_max_concurrent = std.fmt.parseInt(u8, str, 10) catch |err| {
-            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_concurrent", .err = err });
+            log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_max_host_open", opt)) {
+    if (std.mem.eql(u8, "--http-max-host-open", opt) or std.mem.eql(u8, "--http_max_host_open", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_host_open" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.http_max_host_open = std.fmt.parseInt(u8, str, 10) catch |err| {
-            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_host_open", .err = err });
+            log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_connect_timeout", opt)) {
+    if (std.mem.eql(u8, "--http-connect-timeout", opt) or std.mem.eql(u8, "--http_connect_timeout", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_connect_timeout" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.http_connect_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
-            log.fatal(.app, "invalid argument value", .{ .arg = "--http_connect_timeout", .err = err });
+            log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_timeout", opt)) {
+    if (std.mem.eql(u8, "--http-timeout", opt) or std.mem.eql(u8, "--http_timeout", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_timeout" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.http_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
-            log.fatal(.app, "invalid argument value", .{ .arg = "--http_timeout", .err = err });
+            log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--http_max_response_size", opt)) {
+    if (std.mem.eql(u8, "--http-max-response-size", opt) or std.mem.eql(u8, "--http_max_response_size", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_response_size" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.http_max_response_size = std.fmt.parseInt(usize, str, 10) catch |err| {
-            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_response_size", .err = err });
+            log.fatal(.app, "invalid argument value", .{ .arg = opt, .err = err });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--log_level", opt)) {
+    if (std.mem.eql(u8, "--log-level", opt) or std.mem.eql(u8, "--log_level", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--log_level" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
@@ -737,26 +894,26 @@ fn parseCommonArg(
             if (std.mem.eql(u8, str, "error")) {
                 break :blk .err;
             }
-            log.fatal(.app, "invalid option choice", .{ .arg = "--log_level", .value = str });
+            log.fatal(.app, "invalid option choice", .{ .arg = opt, .value = str });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--log_format", opt)) {
+    if (std.mem.eql(u8, "--log-format", opt) or std.mem.eql(u8, "--log_format", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--log_format" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
 
         common.log_format = std.meta.stringToEnum(log.Format, str) orelse {
-            log.fatal(.app, "invalid option choice", .{ .arg = "--log_format", .value = str });
+            log.fatal(.app, "invalid option choice", .{ .arg = opt, .value = str });
             return error.InvalidArgument;
         };
         return true;
     }
 
-    if (std.mem.eql(u8, "--log_filter_scopes", opt)) {
+    if (std.mem.eql(u8, "--log-filter-scopes", opt) or std.mem.eql(u8, "--log_filter_scopes", opt)) {
         if (builtin.mode != .Debug) {
             log.fatal(.app, "experimental", .{ .help = "log scope filtering is only available in debug builds" });
             return false;
@@ -773,7 +930,7 @@ fn parseCommonArg(
         var it = std.mem.splitScalar(u8, str, ',');
         while (it.next()) |part| {
             try arr.append(allocator, std.meta.stringToEnum(log.Scope, part) orelse {
-                log.fatal(.app, "invalid option choice", .{ .arg = "--log_filter_scopes", .value = part });
+                log.fatal(.app, "invalid option choice", .{ .arg = opt, .value = part });
                 return false;
             });
         }
@@ -781,14 +938,14 @@ fn parseCommonArg(
         return true;
     }
 
-    if (std.mem.eql(u8, "--user_agent_suffix", opt)) {
+    if (std.mem.eql(u8, "--user-agent-suffix", opt) or std.mem.eql(u8, "--user_agent_suffix", opt)) {
         const str = args.next() orelse {
-            log.fatal(.app, "missing argument value", .{ .arg = "--user_agent_suffix" });
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
             return error.InvalidArgument;
         };
         for (str) |c| {
             if (!std.ascii.isPrint(c)) {
-                log.fatal(.app, "not printable character", .{ .arg = "--user_agent_suffix" });
+                log.fatal(.app, "not printable character", .{ .arg = opt });
                 return error.InvalidArgument;
             }
         }
@@ -796,5 +953,32 @@ fn parseCommonArg(
         return true;
     }
 
+    if (std.mem.eql(u8, "--web-bot-auth-key-file", opt) or std.mem.eql(u8, "--web_bot_auth_key_file", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
+            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) or std.mem.eql(u8, "--web_bot_auth_keyid", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
+            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) or std.mem.eql(u8, "--web_bot_auth_domain", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = opt });
+            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,563 @@
+// 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 = true,
+interactive_only: bool = false,
+max_depth: u32 = std.math.maxInt(u32) - 1,
+
+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;
+    };
+    var visibility_cache: Element.VisibilityCache = .empty;
+    var pointer_events_cache: Element.PointerEventsCache = .empty;
+    var ctx: WalkContext = .{
+        .xpath_buffer = &xpath_buffer,
+        .listener_targets = listener_targets,
+        .visibility_cache = &visibility_cache,
+        .pointer_events_cache = &pointer_events_cache,
+    };
+    self.walk(&ctx, self.dom_node, null, &visitor, 1, 0) 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;
+    };
+    var visibility_cache: Element.VisibilityCache = .empty;
+    var pointer_events_cache: Element.PointerEventsCache = .empty;
+    var ctx: WalkContext = .{
+        .xpath_buffer = &xpath_buffer,
+        .listener_targets = listener_targets,
+        .visibility_cache = &visibility_cache,
+        .pointer_events_cache = &pointer_events_cache,
+    };
+    self.walk(&ctx, self.dom_node, null, &visitor, 1, 0) 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: CDPNode.Id,
+    axn: AXNode,
+    role: []const u8,
+    name: ?[]const u8,
+    value: ?[]const u8,
+    options: ?[]OptionData = null,
+    xpath: []const u8,
+    is_interactive: bool,
+    node_name: []const u8,
+};
+
+const WalkContext = struct {
+    xpath_buffer: *std.ArrayList(u8),
+    listener_targets: interactive.ListenerTargetMap,
+    visibility_cache: *Element.VisibilityCache,
+    pointer_events_cache: *Element.PointerEventsCache,
+};
+
+fn walk(
+    self: @This(),
+    ctx: *WalkContext,
+    node: *Node,
+    parent_name: ?[]const u8,
+    visitor: anytype,
+    index: usize,
+    current_depth: u32,
+) !void {
+    if (current_depth > self.max_depth) return;
+
+    // 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.checkVisibilityCached(ctx.visibility_cache, 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(self.page, el, html_el, ctx.listener_targets, ctx.pointer_events_cache) != null) {
+                is_interactive = true;
+            }
+        }
+    } else if (node._type == .document or node._type == .document_fragment) {
+        node_name = "root";
+    }
+
+    const initial_xpath_len = ctx.xpath_buffer.items.len;
+    try appendXPathSegment(node, ctx.xpath_buffer.writer(self.arena), index);
+    const xpath = ctx.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 should_visit = true;
+    if (self.interactive_only) {
+        var keep = false;
+        if (interactive.isInteractiveRole(role)) {
+            keep = true;
+        } else if (interactive.isContentRole(role)) {
+            if (name != null and name.?.len > 0) {
+                keep = true;
+            }
+        } else if (std.mem.eql(u8, role, "RootWebArea")) {
+            keep = true;
+        } else if (is_interactive) {
+            keep = true;
+        }
+        if (!keep) {
+            should_visit = false;
+        }
+    } else 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;
+    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,
+    };
+
+    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(ctx, child, name, visitor, gop.value_ptr.*, current_depth + 1);
+        }
+    }
+
+    if (did_visit) {
+        try visitor.leave();
+    }
+
+    ctx.xpath_buffer.shrinkRetainingCapacity(initial_xpath_len);
+}
+
+fn extractSelectOptions(node: *Node, page: *Page, arena: std.mem.Allocator) ![]OptionData {
+    var options: std.ArrayList(OptionData) = .empty;
+    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 {
+        for (0..self.depth) |_| {
+            try self.writer.writeByte(' ');
+        }
+
+        var name_to_print: ?[]const u8 = null;
+        if (data.name) |n| {
+            if (n.len > 0) {
+                name_to_print = 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) {
+                name_to_print = trimmed;
+            }
+        }
+
+        const is_text_only = std.mem.eql(u8, data.role, "StaticText") or std.mem.eql(u8, data.role, "none") or std.mem.eql(u8, data.role, "generic");
+
+        try self.writer.print("{d}", .{data.id});
+        if (!is_text_only) {
+            try self.writer.print(" {s}", .{data.role});
+        }
+        if (name_to_print) |n| {
+            try self.writer.print(" '{s}'", .{n});
+        }
+
+        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("*");
+                }
+            }
+            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;
+        }
+    }
+};
+
+const testing = @import("testing.zig");
+
+test "SemanticTree backendDOMNodeId" {
+    var registry: CDPNode.Registry = .init(testing.allocator);
+    defer registry.deinit();
+
+    var page = try testing.pageTest("cdp/registry1.html");
+    defer testing.reset();
+    defer page._session.removePage();
+
+    const st: Self = .{
+        .dom_node = page.window._document.asNode(),
+        .registry = &registry,
+        .page = page,
+        .arena = testing.arena_allocator,
+        .prune = false,
+        .interactive_only = false,
+        .max_depth = std.math.maxInt(u32) - 1,
+    };
+
+    const json_str = try std.json.Stringify.valueAlloc(testing.allocator, st, .{});
+    defer testing.allocator.free(json_str);
+
+    try testing.expect(std.mem.indexOf(u8, json_str, "\"backendDOMNodeId\":") != null);
+}
+
+test "SemanticTree max_depth" {
+    var registry: CDPNode.Registry = .init(testing.allocator);
+    defer registry.deinit();
+
+    var page = try testing.pageTest("cdp/registry1.html");
+    defer testing.reset();
+    defer page._session.removePage();
+
+    const st: Self = .{
+        .dom_node = page.window._document.asNode(),
+        .registry = &registry,
+        .page = page,
+        .arena = testing.arena_allocator,
+        .prune = false,
+        .interactive_only = false,
+        .max_depth = 1,
+    };
+
+    var aw: std.Io.Writer.Allocating = .init(testing.allocator);
+    defer aw.deinit();
+
+    try st.textStringify(&aw.writer);
+    const text_str = aw.written();
+
+    try testing.expect(std.mem.indexOf(u8, text_str, "other") == null);
+}

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

@@ -19,16 +19,12 @@
 const std = @import("std");
 
 const Allocator = std.mem.Allocator;
-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;
 
 const Session = @import("Session.zig");
 const Notification = @import("../Notification.zig");
@@ -44,13 +40,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 +58,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 +79,40 @@ 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();
+pub fn runMacrotasks(self: *Browser) !void {
+    const env = &self.env;
+
+    try self.env.runMacrotasks();
+    env.pumpMessageLoop();
+
+    // either of the above could have queued more microtasks
+    env.runMicrotasks();
 }
 
-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 msToNextMacrotask(self: *Browser) ?u64 {
+    return self.env.msToNextMacrotask();
+}
+
+pub fn msTo(self: *Browser) bool {
+    return self.env.hasBackgroundTasks();
+}
+
+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.releaseRef(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,28 @@ 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;
+
+    // Set window.event to the currently dispatching event (WHATWG spec)
+    const window = page.window;
+    const prev_event = window._current_event;
+    window._current_event = event;
+    defer window._current_event = prev_event;
+
+    event.acquireRef();
+    defer _ = event.releaseRef(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 +252,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 +270,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 +312,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 +330,311 @@ 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;
+
+    // Set window.event to the currently dispatching event (WHATWG spec)
+    const window = page.window;
+    const prev_event = window._current_event;
+    window._current_event = event;
+    defer window._current_event = prev_event;
+
+    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 = try 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 +644,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 +669,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 +800,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,30 @@ 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 = .{},
         ._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.* = .{
+        ._rc = .{},
+        ._arena = arena,
         ._type = unionInit(Blob.Type, chain.get(1)),
         ._slice = "",
         ._mime = "",
@@ -254,19 +266,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 = .{},
+        ._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 +345,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 +390,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 +404,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 +415,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,12 @@ 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,
+is_default_charset: bool = true,
 
 /// 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 +40,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 +55,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 +71,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 +129,18 @@ 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 has_explicit_charset = false;
 
     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,11 +153,12 @@ 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;
                 charset_len = attribute_value.len;
+                has_explicit_charset = true;
             },
         }
     }
@@ -152,9 +168,137 @@ pub fn parse(input: []u8) !Mime {
         .charset = charset,
         .charset_len = charset_len,
         .content_type = content_type,
+        .is_default_charset = !has_explicit_charset,
     };
 }
 
+/// Prescan the first 1024 bytes of an HTML document for a charset declaration.
+/// Looks for `<meta charset="X">` and `<meta http-equiv="Content-Type" content="...;charset=X">`.
+/// Returns the charset value or null if none found.
+/// See: https://www.w3.org/International/questions/qa-html-encoding-declarations
+pub fn prescanCharset(html: []const u8) ?[]const u8 {
+    const limit = @min(html.len, 1024);
+    const data = html[0..limit];
+
+    // Scan for <meta tags
+    var pos: usize = 0;
+    while (pos < data.len) {
+        // Find next '<'
+        pos = std.mem.indexOfScalarPos(u8, data, pos, '<') orelse return null;
+        pos += 1;
+        if (pos >= data.len) return null;
+
+        // Check for "meta" (case-insensitive)
+        if (pos + 4 >= data.len) return null;
+        var tag_buf: [4]u8 = undefined;
+        _ = std.ascii.lowerString(&tag_buf, data[pos..][0..4]);
+        if (!std.mem.eql(u8, &tag_buf, "meta")) {
+            continue;
+        }
+        pos += 4;
+
+        // Must be followed by whitespace or end of tag
+        if (pos >= data.len) return null;
+        if (data[pos] != ' ' and data[pos] != '\t' and data[pos] != '\n' and
+            data[pos] != '\r' and data[pos] != '/')
+        {
+            continue;
+        }
+
+        // Scan attributes within this meta tag
+        const tag_end = std.mem.indexOfScalarPos(u8, data, pos, '>') orelse return null;
+        const attrs = data[pos..tag_end];
+
+        // Look for charset= attribute directly
+        if (findAttrValue(attrs, "charset")) |charset| {
+            if (charset.len > 0 and charset.len <= 40) return charset;
+        }
+
+        // Look for http-equiv="content-type" with content="...;charset=X"
+        if (findAttrValue(attrs, "http-equiv")) |he| {
+            if (std.ascii.eqlIgnoreCase(he, "content-type")) {
+                if (findAttrValue(attrs, "content")) |content| {
+                    if (extractCharsetFromContentType(content)) |charset| {
+                        return charset;
+                    }
+                }
+            }
+        }
+
+        pos = tag_end + 1;
+    }
+    return null;
+}
+
+fn findAttrValue(attrs: []const u8, name: []const u8) ?[]const u8 {
+    var pos: usize = 0;
+    while (pos < attrs.len) {
+        // Skip whitespace
+        while (pos < attrs.len and (attrs[pos] == ' ' or attrs[pos] == '\t' or
+            attrs[pos] == '\n' or attrs[pos] == '\r'))
+        {
+            pos += 1;
+        }
+        if (pos >= attrs.len) return null;
+
+        // Read attribute name
+        const attr_start = pos;
+        while (pos < attrs.len and attrs[pos] != '=' and attrs[pos] != ' ' and
+            attrs[pos] != '\t' and attrs[pos] != '>' and attrs[pos] != '/')
+        {
+            pos += 1;
+        }
+        const attr_name = attrs[attr_start..pos];
+
+        // Skip whitespace around =
+        while (pos < attrs.len and (attrs[pos] == ' ' or attrs[pos] == '\t')) pos += 1;
+        if (pos >= attrs.len or attrs[pos] != '=') {
+            // No '=' found - skip this token. Advance at least one byte to avoid infinite loop.
+            if (pos == attr_start) pos += 1;
+            continue;
+        }
+        pos += 1; // skip '='
+        while (pos < attrs.len and (attrs[pos] == ' ' or attrs[pos] == '\t')) pos += 1;
+        if (pos >= attrs.len) return null;
+
+        // Read attribute value
+        const value = blk: {
+            if (attrs[pos] == '"' or attrs[pos] == '\'') {
+                const quote = attrs[pos];
+                pos += 1;
+                const val_start = pos;
+                while (pos < attrs.len and attrs[pos] != quote) pos += 1;
+                const val = attrs[val_start..pos];
+                if (pos < attrs.len) pos += 1; // skip closing quote
+                break :blk val;
+            } else {
+                const val_start = pos;
+                while (pos < attrs.len and attrs[pos] != ' ' and attrs[pos] != '\t' and
+                    attrs[pos] != '>' and attrs[pos] != '/')
+                {
+                    pos += 1;
+                }
+                break :blk attrs[val_start..pos];
+            }
+        };
+
+        if (std.ascii.eqlIgnoreCase(attr_name, name)) return value;
+    }
+    return null;
+}
+
+fn extractCharsetFromContentType(content: []const u8) ?[]const u8 {
+    var it = std.mem.splitScalar(u8, content, ';');
+    while (it.next()) |part| {
+        const trimmed = std.mem.trimLeft(u8, part, &.{ ' ', '\t' });
+        if (trimmed.len > 8 and std.ascii.eqlIgnoreCase(trimmed[0..8], "charset=")) {
+            const val = std.mem.trim(u8, trimmed[8..], &.{ ' ', '\t', '"', '\'' });
+            if (val.len > 0 and val.len <= 40) return val;
+        }
+    }
+    return null;
+}
+
 pub fn sniff(body: []const u8) ?Mime {
     // 0x0C is form feed
     const content = std.mem.trimLeft(u8, body, &.{ ' ', '\t', '\n', '\r', 0x0C });
@@ -165,15 +309,30 @@ pub fn sniff(body: []const u8) ?Mime {
     if (content[0] != '<') {
         if (std.mem.startsWith(u8, content, &.{ 0xEF, 0xBB, 0xBF })) {
             // UTF-8 BOM
-            return .{ .content_type = .{ .text_plain = {} } };
+            return .{
+                .content_type = .{ .text_plain = {} },
+                .charset = default_charset,
+                .charset_len = default_charset_len,
+                .is_default_charset = false,
+            };
         }
         if (std.mem.startsWith(u8, content, &.{ 0xFE, 0xFF })) {
             // UTF-16 big-endian BOM
-            return .{ .content_type = .{ .text_plain = {} } };
+            return .{
+                .content_type = .{ .text_plain = {} },
+                .charset = .{ 'U', 'T', 'F', '-', '1', '6', 'B', 'E' } ++ .{0} ** 33,
+                .charset_len = 8,
+                .is_default_charset = false,
+            };
         }
         if (std.mem.startsWith(u8, content, &.{ 0xFF, 0xFE })) {
             // UTF-16 little-endian BOM
-            return .{ .content_type = .{ .text_plain = {} } };
+            return .{
+                .content_type = .{ .text_plain = {} },
+                .charset = .{ 'U', 'T', 'F', '-', '1', '6', 'L', 'E' } ++ .{0} ** 33,
+                .charset_len = 8,
+                .is_default_charset = false,
+            };
         }
         return null;
     }
@@ -227,6 +386,14 @@ pub fn isHTML(self: *const Mime) bool {
     return self.content_type == .text_html;
 }
 
+pub fn isText(mime: *const Mime) bool {
+    return switch (mime.content_type) {
+        .text_xml, .text_html, .text_javascript, .text_plain, .text_css => true,
+        .application_json => true,
+        else => false,
+    };
+}
+
 // we expect value to be lowercase
 fn parseContentType(value: []const u8) !struct { ContentType, usize } {
     const end = std.mem.indexOfScalarPos(u8, value, 0, ';') orelse value.len;
@@ -243,6 +410,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 +423,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 +489,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 +510,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 +549,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 +605,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" {
@@ -492,6 +694,24 @@ test "Mime: sniff" {
 
     try expectHTML("<!-->");
     try expectHTML("    \n\t <!-->");
+
+    {
+        const mime = Mime.sniff(&.{ 0xEF, 0xBB, 0xBF }).?;
+        try testing.expectEqual(.text_plain, std.meta.activeTag(mime.content_type));
+        try testing.expectEqual("UTF-8", mime.charsetString());
+    }
+
+    {
+        const mime = Mime.sniff(&.{ 0xFE, 0xFF }).?;
+        try testing.expectEqual(.text_plain, std.meta.activeTag(mime.content_type));
+        try testing.expectEqual("UTF-16BE", mime.charsetString());
+    }
+
+    {
+        const mime = Mime.sniff(&.{ 0xFF, 0xFE }).?;
+        try testing.expectEqual(.text_plain, std.meta.activeTag(mime.content_type));
+        try testing.expectEqual("UTF-16LE", mime.charsetString());
+    }
 }
 
 const Expectation = struct {
@@ -528,3 +748,35 @@ fn expect(expected: Expectation, input: []const u8) !void {
         try testing.expectEqual(m.charsetStringZ(), actual.charsetStringZ());
     }
 }
+
+test "Mime: prescanCharset" {
+    // <meta charset="X">
+    try testing.expectEqual("utf-8", Mime.prescanCharset("<html><head><meta charset=\"utf-8\">").?);
+    try testing.expectEqual("iso-8859-1", Mime.prescanCharset("<html><head><meta charset=\"iso-8859-1\">").?);
+    try testing.expectEqual("shift_jis", Mime.prescanCharset("<meta charset='shift_jis'>").?);
+
+    // Case-insensitive tag matching
+    try testing.expectEqual("utf-8", Mime.prescanCharset("<META charset=\"utf-8\">").?);
+    try testing.expectEqual("utf-8", Mime.prescanCharset("<Meta charset=\"utf-8\">").?);
+
+    // <meta http-equiv="Content-Type" content="text/html; charset=X">
+    try testing.expectEqual(
+        "iso-8859-1",
+        Mime.prescanCharset("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">").?,
+    );
+
+    // No charset found
+    try testing.expectEqual(null, Mime.prescanCharset("<html><head><title>Test</title>"));
+    try testing.expectEqual(null, Mime.prescanCharset(""));
+    try testing.expectEqual(null, Mime.prescanCharset("no html here"));
+
+    // Self-closing meta without charset must not loop forever
+    try testing.expectEqual(null, Mime.prescanCharset("<meta foo=\"bar\"/>"));
+
+    // Charset after 1024 bytes should not be found
+    var long_html: [1100]u8 = undefined;
+    @memset(&long_html, ' ');
+    const suffix = "<meta charset=\"windows-1252\">";
+    @memcpy(long_html[1050 .. 1050 + suffix.len], suffix);
+    try testing.expectEqual(null, Mime.prescanCharset(&long_html));
+}

src/browser/Runner.zig

@@ -0,0 +1,238 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const lp = @import("lightpanda");
+const builtin = @import("builtin");
+
+const log = @import("../log.zig");
+
+const Page = @import("Page.zig");
+const Session = @import("Session.zig");
+const HttpClient = @import("HttpClient.zig");
+
+const IS_DEBUG = builtin.mode == .Debug;
+
+const Runner = @This();
+
+page: *Page,
+session: *Session,
+http_client: *HttpClient,
+
+pub const Opts = struct {};
+
+pub fn init(session: *Session, _: Opts) !Runner {
+    const page = &(session.page orelse return error.NoPage);
+
+    return .{
+        .page = page,
+        .session = session,
+        .http_client = session.browser.http_client,
+    };
+}
+
+pub const WaitOpts = struct {
+    ms: u32,
+    until: lp.Config.WaitUntil = .done,
+};
+pub fn wait(self: *Runner, opts: WaitOpts) !void {
+    _ = try self._wait(false, opts);
+}
+
+pub const CDPWaitResult = enum {
+    done,
+    cdp_socket,
+};
+pub fn waitCDP(self: *Runner, opts: WaitOpts) !CDPWaitResult {
+    return self._wait(true, opts);
+}
+
+fn _wait(self: *Runner, comptime is_cdp: bool, opts: WaitOpts) !CDPWaitResult {
+    var timer = try std.time.Timer.start();
+    var ms_remaining = opts.ms;
+
+    const tick_opts = TickOpts{
+        .ms = 200,
+        .until = opts.until,
+    };
+    while (true) {
+        const tick_result = self._tick(is_cdp, tick_opts) catch |err| {
+            switch (err) {
+                error.JsError => {}, // already logged (with hopefully more context)
+                else => log.err(.browser, "session wait", .{
+                    .err = err,
+                    .url = self.page.url,
+                }),
+            }
+            return err;
+        };
+
+        const next_ms = switch (tick_result) {
+            .ok => |next_ms| next_ms,
+            .done => return .done,
+            .cdp_socket => if (comptime is_cdp) return .cdp_socket else unreachable,
+        };
+
+        const ms_elapsed = timer.lap() / 1_000_000;
+        if (ms_elapsed >= ms_remaining) {
+            return .done;
+        }
+        ms_remaining -= @intCast(ms_elapsed);
+        if (next_ms > 0) {
+            std.Thread.sleep(std.time.ns_per_ms * next_ms);
+        }
+    }
+}
+
+pub const TickOpts = struct {
+    ms: u32,
+    until: lp.Config.WaitUntil = .done,
+};
+
+pub const TickResult = union(enum) {
+    done,
+    ok: u32,
+};
+pub fn tick(self: *Runner, opts: TickOpts) !TickResult {
+    return switch (try self._tick(false, opts)) {
+        .ok => |ms| .{ .ok = ms },
+        .done => .done,
+        .cdp_socket => unreachable,
+    };
+}
+
+pub const CDPTickResult = union(enum) {
+    done,
+    cdp_socket,
+    ok: u32,
+};
+pub fn tickCDP(self: *Runner, opts: TickOpts) !CDPTickResult {
+    return self._tick(true, opts);
+}
+
+fn _tick(self: *Runner, comptime is_cdp: bool, opts: TickOpts) !CDPTickResult {
+    const page = self.page;
+    const http_client = self.http_client;
+
+    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 (comptime is_cdp) == false) {
+                // 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
+            const http_result = try http_client.tick(@intCast(opts.ms));
+            if ((comptime is_cdp) and http_result == .cdp_socket) {
+                return .cdp_socket;
+            }
+            return .{ .ok = 0 };
+        },
+        .html, .complete => {
+            const session = self.session;
+            if (session.queued_navigation.items.len != 0) {
+                try session.processQueuedNavigation();
+                self.page = &session.page.?; // might have changed
+                return .{ .ok = 0 };
+            }
+            const browser = session.browser;
+
+            // 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.
+            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 (comptime is_cdp == false)) {
+                // we don't need to consider http_client.intercepted here
+                // because is_cdp 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);
+                }
+
+                if (browser.hasBackgroundTasks()) {
+                    // _we_ have nothing to run, but v8 is working on
+                    // background tasks. We'll wait for them.
+                    browser.waitForBackgroundTasks();
+                }
+
+                switch (opts.until) {
+                    .done => {},
+                    .domcontentloaded => if (page._load_state == .load or page._load_state == .complete) {
+                        return .done;
+                    },
+                    .load => if (page._load_state == .complete) {
+                        return .done;
+                    },
+                    .networkidle => if (page._notified_network_idle == .done) {
+                        return .done;
+                    },
+                }
+
+                // We never advertise a wait time of more than 20, there can
+                // always be new background tasks to run.
+                if (browser.msToNextMacrotask()) |ms_to_next_task| {
+                    return .{ .ok = @min(ms_to_next_task, 20) };
+                }
+                return .done;
+            }
+
+            // We're here because we either have active HTTP
+            // connections, or is_cdp == false (aka, there's
+            // an cdp_socket registered with the http client).
+            // We should continue to run tasks, so we minimize how long
+            // we'll poll for network I/O.
+            var ms_to_wait = @min(opts.ms, browser.msToNextMacrotask() 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;
+            }
+            const http_result = try http_client.tick(@intCast(@min(opts.ms, ms_to_wait)));
+            if ((comptime is_cdp) and http_result == .cdp_socket) {
+                return .cdp_socket;
+            }
+            return .{ .ok = 0 };
+        },
+        .err => |err| {
+            page._parse_state = .{ .raw_done = @errorName(err) };
+            return err;
+        },
+        .raw_done => return .done,
+    }
+}

src/browser/ScriptManager.zig

@@ -20,18 +20,18 @@ 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");
 
 const Allocator = std.mem.Allocator;
-const ArrayList = std.ArrayList;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
@@ -59,11 +59,8 @@ ready_scripts: std.DoublyLinkedList,
 
 shutdown: bool = false,
 
-client: *Http.Client,
+client: *HttpClient,
 allocator: Allocator,
-buffer_pool: BufferPool,
-
-script_pool: std.heap.MemoryPool(Script),
 
 // We can download multiple sync modules in parallel, but we want to process
 // them in order. We can't use an std.DoublyLinkedList, like the other script types,
@@ -83,10 +80,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,19 +94,16 @@ pub fn init(page: *Page) ScriptManager {
         .is_evaluating = false,
         .allocator = allocator,
         .imported_modules = .empty,
-        .client = browser.http_client,
+        .client = http_client,
         .static_scripts_done = false,
-        .buffer_pool = BufferPool.init(allocator, 5),
-        .script_pool = std.heap.MemoryPool(Script).init(allocator),
+        .page_notified_of_completion = false,
     };
 }
 
 pub fn deinit(self: *ScriptManager) void {
-    // necessary to free any buffers scripts may be referencing
+    // necessary to free any arenas scripts may be referencing
     self.reset();
 
-    self.buffer_pool.deinit();
-    self.script_pool.deinit();
     self.imported_modules.deinit(self.allocator);
     // we don't deinit self.importmap b/c we use the page's arena for its
     // allocations.
@@ -117,7 +112,10 @@ pub fn deinit(self: *ScriptManager) void {
 pub fn reset(self: *ScriptManager) void {
     var it = self.imported_modules.valueIterator();
     while (it.next()) |value_ptr| {
-        self.buffer_pool.release(value_ptr.buffer);
+        switch (value_ptr.state) {
+            .done => |script| script.deinit(),
+            else => {},
+        }
     }
     self.imported_modules.clearRetainingCapacity();
 
@@ -134,13 +132,13 @@ pub fn reset(self: *ScriptManager) void {
 fn clearList(list: *std.DoublyLinkedList) void {
     while (list.popFirst()) |n| {
         const script: *Script = @fieldParentPtr("node", n);
-        script.deinit(true);
+        script.deinit();
     }
 }
 
-pub fn getHeaders(self: *ScriptManager, url: [:0]const u8) !Http.Headers {
+fn getHeaders(self: *ScriptManager, arena: Allocator, url: [:0]const u8) !net_http.Headers {
     var headers = try self.client.newHeaders();
-    try self.page.headersForRequest(self.page.arena, url, &headers);
+    try self.page.headersForRequest(arena, url, &headers);
     return headers;
 }
 
@@ -155,7 +153,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) {
@@ -188,30 +185,48 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         return;
     };
 
+    var handover = false;
     const page = self.page;
+
+    const arena = try page.getArena(.{ .debug = "addFromElement" });
+    errdefer if (!handover) {
+        page.releaseArena(arena);
+    };
+
     var source: Script.Source = undefined;
     var remote_url: ?[:0]const u8 = null;
     const base_url = page.base();
     if (element.getAttributeSafe(comptime .wrap("src"))) |src| {
-        if (try parseDataURI(page.arena, src)) |data_uri| {
+        if (try parseDataURI(arena, src)) |data_uri| {
             source = .{ .@"inline" = data_uri };
         } else {
-            remote_url = try URL.resolve(page.arena, base_url, src, .{});
+            remote_url = try URL.resolve(arena, base_url, src, .{});
             source = .{ .remote = .{} };
         }
     } else {
-        const inline_source = try element.asNode().getTextContentAlloc(page.arena);
+        var buf = std.Io.Writer.Allocating.init(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.
+            page.releaseArena(arena);
+            return;
+        }
         source = .{ .@"inline" = inline_source };
     }
 
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
-
+    // Only set _executed (already-started) when we actually have content to execute
+    script_element._executed = true;
     const is_inline = source == .@"inline";
 
+    const script = try arena.create(Script);
     script.* = .{
         .kind = kind,
         .node = .{},
+        .arena = arena,
         .manager = self,
         .source = source,
         .script_element = script_element,
@@ -255,14 +270,15 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             if (is_blocking == false) {
                 self.scriptList(script).remove(&script.node);
             }
-            script.deinit(true);
+            // Let the outer errdefer handle releasing the arena if client.request fails
         }
 
         try self.client.request(.{
             .url = url,
             .ctx = script,
             .method = .GET,
-            .headers = try self.getHeaders(url),
+            .frame_id = page._frame_id,
+            .headers = try self.getHeaders(arena, url),
             .blocking = is_blocking,
             .cookie_jar = &page._session.cookie_jar,
             .resource_type = .script,
@@ -273,6 +289,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             .done_callback = Script.doneCallback,
             .error_callback = Script.errorCallback,
         });
+        handover = true;
 
         if (comptime IS_DEBUG) {
             var ls: js.Local.Scope = undefined;
@@ -302,7 +319,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         }
         if (script.status == 0) {
             // an error (that we already logged)
-            script.deinit(true);
+            script.deinit();
             return;
         }
 
@@ -311,7 +328,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         self.is_evaluating = true;
         defer {
             self.is_evaluating = was_evaluating;
-            script.deinit(true);
+            script.deinit();
         }
         return script.eval(page);
     }
@@ -343,11 +360,14 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
     }
     errdefer _ = self.imported_modules.remove(url);
 
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
+    const page = self.page;
+    const arena = try page.getArena(.{ .debug = "preloadImport" });
+    errdefer page.releaseArena(arena);
 
+    const script = try arena.create(Script);
     script.* = .{
         .kind = .module,
+        .arena = arena,
         .url = url,
         .node = .{},
         .manager = self,
@@ -357,13 +377,11 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .mode = .import,
     };
 
-    gop.value_ptr.* = ImportedModule{
-        .manager = self,
-    };
+    gop.value_ptr.* = ImportedModule{};
 
     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", .{
@@ -374,26 +392,30 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         });
     }
 
-    try self.client.request(.{
-        .url = url,
-        .ctx = script,
-        .method = .GET,
-        .headers = try self.getHeaders(url),
-        .cookie_jar = &self.page._session.cookie_jar,
-        .resource_type = .script,
-        .notification = self.page._session.notification,
-        .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
-        .header_callback = Script.headerCallback,
-        .data_callback = Script.dataCallback,
-        .done_callback = Script.doneCallback,
-        .error_callback = Script.errorCallback,
-    });
-
     // This seems wrong since we're not dealing with an async import (unlike
     // getAsyncModule below), but all we're trying to do here is pre-load the
     // script for execution at some point in the future (when waitForImport is
     // called).
     self.async_scripts.append(&script.node);
+
+    self.client.request(.{
+        .url = url,
+        .ctx = script,
+        .method = .GET,
+        .frame_id = page._frame_id,
+        .headers = try self.getHeaders(arena, url),
+        .cookie_jar = &page._session.cookie_jar,
+        .resource_type = .script,
+        .notification = page._session.notification,
+        .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
+        .header_callback = Script.headerCallback,
+        .data_callback = Script.dataCallback,
+        .done_callback = Script.doneCallback,
+        .error_callback = Script.errorCallback,
+    }) catch |err| {
+        self.async_scripts.remove(&script.node);
+        return err;
+    };
 }
 
 pub fn waitForImport(self: *ScriptManager, url: [:0]const u8) !ModuleSource {
@@ -414,12 +436,12 @@ pub fn waitForImport(self: *ScriptManager, url: [:0]const u8) !ModuleSource {
                 _ = try client.tick(200);
                 continue;
             },
-            .done => {
+            .done => |script| {
                 var shared = false;
                 const buffer = entry.value_ptr.buffer;
                 const waiters = entry.value_ptr.waiters;
 
-                if (waiters == 0) {
+                if (waiters == 1) {
                     self.imported_modules.removeByPtr(entry.key_ptr);
                 } else {
                     shared = true;
@@ -428,7 +450,7 @@ pub fn waitForImport(self: *ScriptManager, url: [:0]const u8) !ModuleSource {
                 return .{
                     .buffer = buffer,
                     .shared = shared,
-                    .buffer_pool = &self.buffer_pool,
+                    .script = script,
                 };
             },
             .err => return error.Failed,
@@ -437,11 +459,14 @@ pub fn waitForImport(self: *ScriptManager, url: [:0]const u8) !ModuleSource {
 }
 
 pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.Callback, cb_data: *anyopaque, referrer: []const u8) !void {
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
+    const page = self.page;
+    const arena = try page.getArena(.{ .debug = "getAsyncImport" });
+    errdefer page.releaseArena(arena);
 
+    const script = try arena.create(Script);
     script.* = .{
         .kind = .module,
+        .arena = arena,
         .url = url,
         .node = .{},
         .manager = self,
@@ -456,7 +481,7 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
 
     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", .{
@@ -476,22 +501,25 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
     self.is_evaluating = true;
     defer self.is_evaluating = was_evaluating;
 
-    try self.client.request(.{
+    self.async_scripts.append(&script.node);
+    self.client.request(.{
         .url = url,
         .method = .GET,
-        .headers = try self.getHeaders(url),
+        .frame_id = page._frame_id,
+        .headers = try self.getHeaders(arena, 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,
         .done_callback = Script.doneCallback,
         .error_callback = Script.errorCallback,
-    });
-
-    self.async_scripts.append(&script.node);
+    }) catch |err| {
+        self.async_scripts.remove(&script.node);
+        return err;
+    };
 }
 
 // Called from the Page to let us know it's done parsing the HTML. Necessary that
@@ -516,18 +544,18 @@ fn evaluate(self: *ScriptManager) void {
         var script: *Script = @fieldParentPtr("node", n);
         switch (script.mode) {
             .async => {
-                defer script.deinit(true);
+                defer script.deinit();
                 script.eval(page);
             },
             .import_async => |ia| {
-                defer script.deinit(false);
                 if (script.status < 200 or script.status > 299) {
+                    script.deinit();
                     ia.callback(ia.data, error.FailedToLoad);
                 } else {
                     ia.callback(ia.data, .{
                         .shared = false,
+                        .script = script,
                         .buffer = script.source.remote,
-                        .buffer_pool = &self.buffer_pool,
                     });
                 }
             },
@@ -553,7 +581,7 @@ fn evaluate(self: *ScriptManager) void {
         }
         defer {
             _ = self.defer_scripts.popFirst();
-            script.deinit(true);
+            script.deinit();
         }
         script.eval(page);
     }
@@ -567,19 +595,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();
 
@@ -611,16 +632,31 @@ fn parseImportmap(self: *ScriptManager, script: *const Script) !void {
 }
 
 pub const Script = struct {
-    complete: bool,
     kind: Kind,
+    complete: bool,
     status: u16 = 0,
     source: Source,
     url: []const u8,
+    arena: Allocator,
     mode: ExecutionMode,
     node: std.DoublyLinkedList.Node,
     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,
@@ -652,18 +688,15 @@ pub const Script = struct {
         import_async: ImportAsync,
     };
 
-    fn deinit(self: *Script, comptime release_buffer: bool) void {
-        if ((comptime release_buffer) and self.source == .remote) {
-            self.manager.buffer_pool.release(self.source.remote);
-        }
-        self.manager.script_pool.destroy(self);
+    fn deinit(self: *Script) void {
+        self.manager.page.releaseArena(self.arena);
     }
 
-    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,24 +717,61 @@ pub const Script = struct {
             });
         }
 
-        lp.assert(self.source.remote.capacity == 0, "ScriptManager.HeaderCallback", .{ .capacity = self.source.remote.capacity });
-        var buffer = self.manager.buffer_pool.get();
+        {
+            // 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: std.ArrayList(u8) = .empty;
         if (transfer.getContentLength()) |cl| {
-            try buffer.ensureTotalCapacity(self.manager.allocator, cl);
+            try buffer.ensureTotalCapacity(self.arena, cl);
         }
         self.source = .{ .remote = buffer };
         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 {
-        try self.source.remote.appendSlice(self.manager.allocator, data);
+    fn _dataCallback(self: *Script, _: *HttpClient.Transfer, data: []const u8) !void {
+        try self.source.remote.appendSlice(self.arena, data);
     }
 
     fn doneCallback(ctx: *anyopaque) !void {
@@ -718,9 +788,8 @@ pub const Script = struct {
         } else if (self.mode == .import) {
             manager.async_scripts.remove(&self.node);
             const entry = manager.imported_modules.getPtr(self.url).?;
-            entry.state = .done;
+            entry.state = .{ .done = self };
             entry.buffer = self.source.remote;
-            self.deinit(false);
         }
         manager.evaluate();
     }
@@ -746,7 +815,7 @@ pub const Script = struct {
         const manager = self.manager;
         manager.scriptList(self).remove(&self.node);
         if (manager.shutdown) {
-            self.deinit(true);
+            self.deinit();
             return;
         }
 
@@ -758,7 +827,7 @@ pub const Script = struct {
             },
             else => {},
         }
-        self.deinit(true);
+        self.deinit();
         manager.evaluate();
     }
 
@@ -814,13 +883,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 +910,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 +932,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,89 +945,16 @@ 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,
             });
         };
     }
 };
 
-const BufferPool = struct {
-    count: usize,
-    available: List = .{},
-    allocator: Allocator,
-    max_concurrent_transfers: u8,
-    mem_pool: std.heap.MemoryPool(Container),
-
-    const List = std.DoublyLinkedList;
-
-    const Container = struct {
-        node: List.Node,
-        buf: std.ArrayList(u8),
-    };
-
-    fn init(allocator: Allocator, max_concurrent_transfers: u8) BufferPool {
-        return .{
-            .available = .{},
-            .count = 0,
-            .allocator = allocator,
-            .max_concurrent_transfers = max_concurrent_transfers,
-            .mem_pool = std.heap.MemoryPool(Container).init(allocator),
-        };
-    }
-
-    fn deinit(self: *BufferPool) void {
-        const allocator = self.allocator;
-
-        var node = self.available.first;
-        while (node) |n| {
-            const container: *Container = @fieldParentPtr("node", n);
-            container.buf.deinit(allocator);
-            node = n.next;
-        }
-        self.mem_pool.deinit();
-    }
-
-    fn get(self: *BufferPool) std.ArrayList(u8) {
-        const node = self.available.popFirst() orelse {
-            // return a new buffer
-            return .{};
-        };
-
-        self.count -= 1;
-        const container: *Container = @fieldParentPtr("node", node);
-        defer self.mem_pool.destroy(container);
-        return container.buf;
-    }
-
-    fn release(self: *BufferPool, buffer: ArrayList(u8)) void {
-        // create mutable copy
-        var b = buffer;
-
-        if (self.count == self.max_concurrent_transfers) {
-            b.deinit(self.allocator);
-            return;
-        }
-
-        const container = self.mem_pool.create() catch |err| {
-            b.deinit(self.allocator);
-            log.err(.http, "SM BufferPool release", .{ .err = err });
-            return;
-        };
-
-        b.clearRetainingCapacity();
-        container.* = .{ .buf = b, .node = .{} };
-        self.count += 1;
-        self.available.append(&container.node);
-    }
-};
-
 const ImportAsync = struct {
     data: *anyopaque,
     callback: ImportAsync.Callback,
@@ -969,12 +964,12 @@ const ImportAsync = struct {
 
 pub const ModuleSource = struct {
     shared: bool,
-    buffer_pool: *BufferPool,
+    script: *Script,
     buffer: std.ArrayList(u8),
 
     pub fn deinit(self: *ModuleSource) void {
         if (self.shared == false) {
-            self.buffer_pool.release(self.buffer);
+            self.script.deinit();
         }
     }
 
@@ -984,15 +979,14 @@ pub const ModuleSource = struct {
 };
 
 const ImportedModule = struct {
-    manager: *ScriptManager,
+    waiters: u16 = 1,
     state: State = .loading,
     buffer: std.ArrayList(u8) = .{},
-    waiters: u16 = 1,
 
-    const State = enum {
+    const State = union(enum) {
         err,
-        done,
         loading,
+        done: *Script,
     };
 };
 
@@ -1004,23 +998,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,66 +18,123 @@
 
 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 v8 = js.v8;
 const storage = @import("webapi/storage/storage.zig");
 const Navigation = @import("webapi/navigation/Navigation.zig");
 const History = @import("webapi/History.zig");
 
 const Page = @import("Page.zig");
+pub const Runner = @import("Runner.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,
+
+// Identity tracking for the main world. All main world contexts share this,
+// ensuring object identity works across same-origin frames.
+identity: js.Identity = .{},
+
+// Shared finalizer callbacks across all Identities. Keyed by Zig instance ptr.
+// This ensures objects are only freed when ALL v8 wrappers are gone.
+finalizer_callbacks: std.AutoHashMapUnmanaged(usize, *FinalizerCallback) = .empty,
+
+// Tracked global v8 objects that need to be released on cleanup.
+// Lives at Session level so objects can outlive individual Identities.
+globals: std.ArrayList(v8.Global) = .empty,
+
+// Temporary v8 globals that can be released early. Key is global.data_ptr.
+// Lives at Session level so objects holding Temps can outlive individual Identities.
+temps: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+// Shared resources for all pages in this session.
+// These live for the duration of the page tree (root + frames).
+arena_pool: *ArenaPool,
 
 page: ?Page,
 
+// Double buffer so that, as we process one list of queued navigations, new entries
+// are added to the separate buffer. This ensures that we don't end up with
+// endless navigation loops AND that we don't invalidate the list while iterating
+// if a new entry gets appended
+queued_navigation_1: std.ArrayList(*Page),
+queued_navigation_2: std.ArrayList(*Page),
+// pointer to either queued_navigation_1 or queued_navigation_2
+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 = 0,
+frame_id_gen: u32 = 0,
+
 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(.{ .debug = "Session" });
+    errdefer arena_pool.release(arena);
+
+    const page_arena = try arena_pool.acquire(.{ .debug = "Session.page_arena" });
+    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 = .{},
+        // The prototype (EventTarget) for Navigation is created when a Page is created.
+        .navigation = .{ ._proto = undefined },
         .storage_shed = .{},
         .browser = browser,
+        .queued_navigation = undefined,
+        .queued_navigation_1 = .{},
+        .queued_navigation_2 = .{},
+        .queued_queued_navigation = .{},
         .notification = notification,
-        .arena = session_allocator,
         .cookie_jar = storage.Cookie.Jar.init(allocator),
-        .transfer_arena = browser.transfer_arena.allocator(),
     };
+    self.queued_navigation = &self.queued_navigation_1;
 }
 
 pub fn deinit(self: *Session) void {
@@ -85,7 +142,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 +153,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,73 +175,343 @@ 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 {
+    return self.arena_pool.acquire(.{ .debug = opts.debug });
+}
+
+pub fn releaseArena(self: *Session, allocator: Allocator) void {
+    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 {
+    // Force cleanup all remaining finalized objects
+    {
+        var it = self.finalizer_callbacks.valueIterator();
+        while (it.next()) |fc| {
+            fc.*.deinit(self);
+        }
+        self.finalizer_callbacks = .empty;
+    }
+
+    {
+        for (self.globals.items) |*global| {
+            v8.v8__Global__Reset(global);
+        }
+        self.globals = .empty;
+    }
+
+    {
+        var it = self.temps.valueIterator();
+        while (it.next()) |global| {
+            v8.v8__Global__Reset(global);
+        }
+        self.temps = .empty;
+    }
+
+    self.identity.deinit();
+    self.identity = .{};
+
+    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 = .empty;
+    }
+
+    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);
 }
 
-pub const WaitResult = enum {
-    done,
-    no_page,
-    cdp_socket,
-};
+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 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 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;
         }
-        // if we've successfull navigated, we'll give the new page another
-        // page.wait(wait_ms)
+    }
+    return null;
+}
+
+pub fn runner(self: *Session, opts: Runner.Opts) !Runner {
+    return Runner.init(self, opts);
+}
+
+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);
+}
+
+pub fn processQueuedNavigation(self: *Session) !void {
+    const navigations = self.queued_navigation;
+    if (self.queued_navigation == &self.queued_navigation_1) {
+        self.queued_navigation = &self.queued_navigation_2;
+    } else {
+        self.queued_navigation = &self.queued_navigation_1;
+    }
+
+    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)
+    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;
+        }
+
+        self.processFrameNavigation(page, qn) catch |err| {
+            log.warn(.page, "frame navigation", .{ .url = qn.url, .err = err });
+        };
+    }
+
+    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
+    // processing to prevent infinite loops. New navigations have been queued
+    // in the other buffer.
+    const new_navigations = self.queued_navigation;
+    var i: usize = 0;
+    while (i < new_navigations.items.len) {
+        const page = new_navigations.items[i];
+        if (page._queued_navigation) |qn| {
+            if (qn.is_about_blank) {
+                log.warn(.page, "recursive about blank", .{});
+                _ = self.queued_navigation.swapRemove(i);
+                continue;
+            }
+        }
+        i += 1;
     }
 }
 
-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 processFrameNavigation(self: *Session, page: *Page, qn: *QueuedNavigation) !void {
+    lp.assert(page.parent != null, "root queued navigation", .{});
 
-        // 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 iframe = page.iframe.?;
+    const parent = page.parent.?;
 
-        break :blk .{ url, opts };
-    };
+    page._queued_navigation = null;
+    defer self.releaseArena(qn.arena);
 
-    const page = self.createPage() catch |err| {
-        log.err(.browser, "queued navigation page error", .{
-            .err = err,
-            .url = url,
-        });
-        return err;
-    };
+    errdefer iframe._window = null;
 
-    page.navigate(url, opts) catch |err| {
-        log.err(.browser, "queued navigation error", .{ .err = err, .url = url });
+    const parent_notified = page._parent_notified;
+    if (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 {
+        for (parent.frames.items, 0..) |frame, i| {
+            if (frame == page) {
+                parent.frames_sorted = false;
+                _ = parent.frames.swapRemove(i);
+                break;
+            }
+        }
+        if (parent_notified) {
+            parent._pending_loads -= 1;
+        }
+        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);
+
+    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;
+}
+
+// Every finalizable instance of Zig gets 1 FinalizerCallback registered in the
+// session. This is to ensure that, if v8 doesn't finalize the value, we can
+// release on page reset.
+pub const FinalizerCallback = struct {
+    arena: Allocator,
+    session: *Session,
+    resolved_ptr_id: usize,
+    finalizer_ptr_id: usize,
+    _deinit: *const fn (ptr_id: usize, session: *Session) void,
+
+    // For every FinalizerCallback we'll have 1+ FinalizerCallback.Identity: one
+    // for every identity that gets the instance. In most cases, that'l be 1.
+    pub const Identity = struct {
+        identity: *js.Identity,
+        fc: *Session.FinalizerCallback,
+    };
+
+    fn deinit(self: *FinalizerCallback, session: *Session) void {
+        self._deinit(self.finalizer_ptr_id, session);
+        session.releaseArena(self.arena);
+    }
+};

src/browser/StyleManager.zig

@@ -0,0 +1,855 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const log = @import("../log.zig");
+const String = @import("../string.zig").String;
+
+const Page = @import("Page.zig");
+
+const CssParser = @import("css/Parser.zig");
+const Element = @import("webapi/Element.zig");
+
+const Selector = @import("webapi/selector/Selector.zig");
+const SelectorParser = @import("webapi/selector/Parser.zig");
+const SelectorList = @import("webapi/selector/List.zig");
+
+const CSSStyleRule = @import("webapi/css/CSSStyleRule.zig");
+const CSSStyleSheet = @import("webapi/css/CSSStyleSheet.zig");
+const CSSStyleProperties = @import("webapi/css/CSSStyleProperties.zig");
+const CSSStyleProperty = @import("webapi/css/CSSStyleDeclaration.zig").Property;
+
+const Allocator = std.mem.Allocator;
+
+pub const VisibilityCache = std.AutoHashMapUnmanaged(*Element, bool);
+pub const PointerEventsCache = std.AutoHashMapUnmanaged(*Element, bool);
+
+// Tracks visibility-relevant CSS rules from <style> elements.
+// Rules are bucketed by their rightmost selector part for fast lookup.
+const StyleManager = @This();
+
+const Tag = Element.Tag;
+const RuleList = std.MultiArrayList(VisibilityRule);
+
+page: *Page,
+
+arena: Allocator,
+
+// Bucketed rules for fast lookup - keyed by rightmost selector part
+id_rules: std.StringHashMapUnmanaged(RuleList) = .empty,
+class_rules: std.StringHashMapUnmanaged(RuleList) = .empty,
+tag_rules: std.AutoHashMapUnmanaged(Tag, RuleList) = .empty,
+other_rules: RuleList = .empty, // universal, attribute, pseudo-class endings
+
+// Document order counter for tie-breaking equal specificity
+next_doc_order: u32 = 0,
+
+// When true, rules need to be rebuilt
+dirty: bool = false,
+
+pub fn init(page: *Page) !StyleManager {
+    return .{
+        .page = page,
+        .arena = try page.getArena(.{ .debug = "StyleManager" }),
+    };
+}
+
+pub fn deinit(self: *StyleManager) void {
+    self.page.releaseArena(self.arena);
+}
+
+fn parseSheet(self: *StyleManager, sheet: *CSSStyleSheet) !void {
+    if (sheet._css_rules) |css_rules| {
+        for (css_rules._rules.items) |rule| {
+            const style_rule = rule.is(CSSStyleRule) orelse continue;
+            try self.addRule(style_rule);
+        }
+        return;
+    }
+
+    const owner_node = sheet.getOwnerNode() orelse return;
+    if (owner_node.is(Element.Html.Style)) |style| {
+        const text = try style.asNode().getTextContentAlloc(self.arena);
+        var it = CssParser.parseStylesheet(text);
+        while (it.next()) |parsed_rule| {
+            try self.addRawRule(parsed_rule.selector, parsed_rule.block);
+        }
+    }
+}
+
+fn addRawRule(self: *StyleManager, selector_text: []const u8, block_text: []const u8) !void {
+    if (selector_text.len == 0) return;
+
+    var props = VisibilityProperties{};
+    var it = CssParser.parseDeclarationsList(block_text);
+    while (it.next()) |decl| {
+        const name = decl.name;
+        const val = decl.value;
+        if (std.ascii.eqlIgnoreCase(name, "display")) {
+            props.display_none = std.ascii.eqlIgnoreCase(val, "none");
+        } else if (std.ascii.eqlIgnoreCase(name, "visibility")) {
+            props.visibility_hidden = std.ascii.eqlIgnoreCase(val, "hidden") or std.ascii.eqlIgnoreCase(val, "collapse");
+        } else if (std.ascii.eqlIgnoreCase(name, "opacity")) {
+            props.opacity_zero = std.ascii.eqlIgnoreCase(val, "0");
+        } else if (std.ascii.eqlIgnoreCase(name, "pointer-events")) {
+            props.pointer_events_none = std.ascii.eqlIgnoreCase(val, "none");
+        }
+    }
+
+    if (!props.isRelevant()) return;
+
+    const selectors = SelectorParser.parseList(self.arena, selector_text, self.page) catch return;
+    for (selectors) |selector| {
+        const rightmost = if (selector.segments.len > 0) selector.segments[selector.segments.len - 1].compound else selector.first;
+        const bucket_key = getBucketKey(rightmost) orelse continue;
+        const rule = VisibilityRule{
+            .props = props,
+            .selector = selector,
+            .priority = (@as(u64, computeSpecificity(selector)) << 32) | @as(u64, self.next_doc_order),
+        };
+        self.next_doc_order += 1;
+
+        switch (bucket_key) {
+            .id => |id| {
+                const gop = try self.id_rules.getOrPut(self.arena, id);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .class => |class| {
+                const gop = try self.class_rules.getOrPut(self.arena, class);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .tag => |tag| {
+                const gop = try self.tag_rules.getOrPut(self.arena, tag);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .other => {
+                try self.other_rules.append(self.arena, rule);
+            },
+        }
+    }
+}
+
+pub fn sheetRemoved(self: *StyleManager) void {
+    self.dirty = true;
+}
+
+pub fn sheetModified(self: *StyleManager) void {
+    self.dirty = true;
+}
+
+/// Rebuilds the rule list from all document stylesheets.
+/// Called lazily when dirty flag is set and rules are needed.
+fn rebuildIfDirty(self: *StyleManager) !void {
+    if (!self.dirty) {
+        return;
+    }
+
+    self.dirty = false;
+    errdefer self.dirty = true;
+    const id_rules_count = self.id_rules.count();
+    const class_rules_count = self.class_rules.count();
+    const tag_rules_count = self.tag_rules.count();
+    const other_rules_count = self.other_rules.len;
+
+    self.page._session.arena_pool.resetRetain(self.arena);
+
+    self.next_doc_order = 0;
+
+    self.id_rules = .empty;
+    try self.id_rules.ensureTotalCapacity(self.arena, id_rules_count);
+
+    self.class_rules = .empty;
+    try self.class_rules.ensureTotalCapacity(self.arena, class_rules_count);
+
+    self.tag_rules = .empty;
+    try self.tag_rules.ensureTotalCapacity(self.arena, tag_rules_count);
+
+    self.other_rules = .{};
+    try self.other_rules.ensureTotalCapacity(self.arena, other_rules_count);
+
+    const sheets = self.page.document._style_sheets orelse return;
+    for (sheets._sheets.items) |sheet| {
+        self.parseSheet(sheet) catch |err| {
+            log.err(.browser, "StyleManager parseSheet", .{ .err = err });
+            return err;
+        };
+    }
+}
+
+// Check if an element is hidden based on options.
+// By default only checks display:none.
+// Walks up the tree to check ancestors.
+pub fn isHidden(self: *StyleManager, el: *Element, cache: ?*VisibilityCache, options: CheckVisibilityOptions) bool {
+    self.rebuildIfDirty() catch return false;
+
+    var current: ?*Element = el;
+
+    while (current) |elem| {
+        // Check cache first (only when checking all properties for caching consistency)
+        if (cache) |c| {
+            if (c.get(elem)) |hidden| {
+                if (hidden) {
+                    return true;
+                }
+                current = elem.parentElement();
+                continue;
+            }
+        }
+
+        const hidden = self.isElementHidden(elem, options);
+
+        // Store in cache
+        if (cache) |c| {
+            c.put(self.page.call_arena, elem, hidden) catch {};
+        }
+
+        if (hidden) {
+            return true;
+        }
+        current = elem.parentElement();
+    }
+
+    return false;
+}
+
+/// Check if a single element (not ancestors) is hidden.
+fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOptions) bool {
+    // Track best match per property (value + priority)
+    // Initialize priority to INLINE_PRIORITY for properties we don't care about - this makes
+    // the loop naturally skip them since no stylesheet rule can have priority >= INLINE_PRIORITY
+    var display_none: ?bool = null;
+    var display_priority: u64 = 0;
+
+    var visibility_hidden: ?bool = null;
+    var visibility_priority: u64 = 0;
+
+    var opacity_zero: ?bool = null;
+    var opacity_priority: u64 = 0;
+
+    // Check inline styles FIRST - they use INLINE_PRIORITY so no stylesheet can beat them
+    if (getInlineStyleProperty(el, comptime .wrap("display"), self.page)) |property| {
+        if (property._value.eql(comptime .wrap("none"))) {
+            return true; // Early exit for hiding value
+        }
+        display_none = false;
+        display_priority = INLINE_PRIORITY;
+    }
+
+    if (options.check_visibility) {
+        if (getInlineStyleProperty(el, comptime .wrap("visibility"), self.page)) |property| {
+            if (property._value.eql(comptime .wrap("hidden")) or property._value.eql(comptime .wrap("collapse"))) {
+                return true;
+            }
+            visibility_hidden = false;
+            visibility_priority = INLINE_PRIORITY;
+        }
+    } else {
+        // This can't be beat. Setting this means that, when checking rules
+        // we no longer have to check if options.check_visibility is enabled.
+        // We can just compare the priority.
+        visibility_priority = INLINE_PRIORITY;
+    }
+
+    if (options.check_opacity) {
+        if (getInlineStyleProperty(el, comptime .wrap("opacity"), self.page)) |property| {
+            if (property._value.eql(comptime .wrap("0"))) {
+                return true;
+            }
+            opacity_zero = false;
+            opacity_priority = INLINE_PRIORITY;
+        }
+    } else {
+        opacity_priority = INLINE_PRIORITY;
+    }
+
+    if (display_priority == INLINE_PRIORITY and visibility_priority == INLINE_PRIORITY and opacity_priority == INLINE_PRIORITY) {
+        return false;
+    }
+
+    // Helper to check a single rule
+    const Ctx = struct {
+        display_none: *?bool,
+        display_priority: *u64,
+        visibility_hidden: *?bool,
+        visibility_priority: *u64,
+        opacity_zero: *?bool,
+        opacity_priority: *u64,
+        el: *Element,
+        page: *Page,
+
+        fn checkRules(ctx: @This(), rules: *const RuleList) void {
+            if (ctx.display_priority.* == INLINE_PRIORITY and
+                ctx.visibility_priority.* == INLINE_PRIORITY and
+                ctx.opacity_priority.* == INLINE_PRIORITY)
+            {
+                return;
+            }
+
+            const priorities = rules.items(.priority);
+            const props_list = rules.items(.props);
+            const selectors = rules.items(.selector);
+
+            for (priorities, props_list, selectors) |p, props, selector| {
+                // Fast skip using packed u64 priority
+                if (p <= ctx.display_priority.* and p <= ctx.visibility_priority.* and p <= ctx.opacity_priority.*) {
+                    continue;
+                }
+
+                // Logic for property dominance
+                const dominated = (props.display_none == null or p <= ctx.display_priority.*) and
+                    (props.visibility_hidden == null or p <= ctx.visibility_priority.*) and
+                    (props.opacity_zero == null or p <= ctx.opacity_priority.*);
+
+                if (dominated) continue;
+
+                if (matchesSelector(ctx.el, selector, ctx.page)) {
+                    // Update best priorities
+                    if (props.display_none != null and p > ctx.display_priority.*) {
+                        ctx.display_none.* = props.display_none;
+                        ctx.display_priority.* = p;
+                    }
+                    if (props.visibility_hidden != null and p > ctx.visibility_priority.*) {
+                        ctx.visibility_hidden.* = props.visibility_hidden;
+                        ctx.visibility_priority.* = p;
+                    }
+                    if (props.opacity_zero != null and p > ctx.opacity_priority.*) {
+                        ctx.opacity_zero.* = props.opacity_zero;
+                        ctx.opacity_priority.* = p;
+                    }
+                }
+            }
+        }
+    };
+    const ctx = Ctx{
+        .display_none = &display_none,
+        .display_priority = &display_priority,
+        .visibility_hidden = &visibility_hidden,
+        .visibility_priority = &visibility_priority,
+        .opacity_zero = &opacity_zero,
+        .opacity_priority = &opacity_priority,
+        .el = el,
+        .page = self.page,
+    };
+
+    if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
+        if (self.id_rules.get(id)) |rules| {
+            ctx.checkRules(&rules);
+        }
+    }
+
+    if (el.getAttributeSafe(comptime .wrap("class"))) |class_attr| {
+        var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
+        while (it.next()) |class| {
+            if (self.class_rules.get(class)) |rules| {
+                ctx.checkRules(&rules);
+            }
+        }
+    }
+
+    if (self.tag_rules.get(el.getTag())) |rules| {
+        ctx.checkRules(&rules);
+    }
+
+    ctx.checkRules(&self.other_rules);
+
+    return (display_none orelse false) or (visibility_hidden orelse false) or (opacity_zero orelse false);
+}
+
+/// Check if an element has pointer-events:none.
+/// Checks inline style first - if set, skips stylesheet lookup.
+/// Walks up the tree to check ancestors.
+pub fn hasPointerEventsNone(self: *StyleManager, el: *Element, cache: ?*PointerEventsCache) bool {
+    self.rebuildIfDirty() catch return false;
+
+    var current: ?*Element = el;
+
+    while (current) |elem| {
+        // Check cache first
+        if (cache) |c| {
+            if (c.get(elem)) |pe_none| {
+                if (pe_none) return true;
+                current = elem.parentElement();
+                continue;
+            }
+        }
+
+        const pe_none = self.elementHasPointerEventsNone(elem);
+
+        if (cache) |c| {
+            c.put(self.page.call_arena, elem, pe_none) catch {};
+        }
+
+        if (pe_none) {
+            return true;
+        }
+        current = elem.parentElement();
+    }
+
+    return false;
+}
+
+/// Check if a single element (not ancestors) has pointer-events:none.
+fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
+    const page = self.page;
+
+    // Check inline style first
+    if (getInlineStyleProperty(el, .wrap("pointer-events"), page)) |property| {
+        if (property._value.eql(comptime .wrap("none"))) {
+            return true;
+        }
+        return false;
+    }
+
+    var result: ?bool = null;
+    var best_priority: u64 = 0;
+
+    // Helper to check a single rule
+    const checkRules = struct {
+        fn check(rules: *const RuleList, res: *?bool, current_priority: *u64, elem: *Element, p: *Page) void {
+            if (current_priority.* == INLINE_PRIORITY) return;
+
+            const priorities = rules.items(.priority);
+            const props_list = rules.items(.props);
+            const selectors = rules.items(.selector);
+
+            for (priorities, props_list, selectors) |priority, props, selector| {
+                if (priority <= current_priority.*) continue;
+                if (props.pointer_events_none == null) continue;
+
+                if (matchesSelector(elem, selector, p)) {
+                    res.* = props.pointer_events_none;
+                    current_priority.* = priority;
+                }
+            }
+        }
+    }.check;
+
+    if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
+        if (self.id_rules.get(id)) |rules| {
+            checkRules(&rules, &result, &best_priority, el, page);
+        }
+    }
+
+    if (el.getAttributeSafe(comptime .wrap("class"))) |class_attr| {
+        var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
+        while (it.next()) |class| {
+            if (self.class_rules.get(class)) |rules| {
+                checkRules(&rules, &result, &best_priority, el, page);
+            }
+        }
+    }
+
+    if (self.tag_rules.get(el.getTag())) |rules| {
+        checkRules(&rules, &result, &best_priority, el, page);
+    }
+
+    checkRules(&self.other_rules, &result, &best_priority, el, page);
+
+    return result orelse false;
+}
+
+// Extracts visibility-relevant rules from a CSS rule.
+// Creates one VisibilityRule per selector (not per selector list) so each has correct specificity.
+// Buckets rules by their rightmost selector part for fast lookup.
+fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
+    const selector_text = style_rule._selector_text;
+    if (selector_text.len == 0) {
+        return;
+    }
+
+    // Check if the rule has visibility-relevant properties
+    const style = style_rule._style orelse return;
+    const props = extractVisibilityProperties(style);
+    if (!props.isRelevant()) {
+        return;
+    }
+
+    // Parse the selector list
+    const selectors = SelectorParser.parseList(self.arena, selector_text, self.page) catch return;
+    if (selectors.len == 0) {
+        return;
+    }
+
+    // Create one rule per selector - each has its own specificity
+    // e.g., "#id, .class { display: none }" becomes two rules with different specificities
+    for (selectors) |selector| {
+        // Get the rightmost compound (last segment, or first if no segments)
+        const rightmost = if (selector.segments.len > 0)
+            selector.segments[selector.segments.len - 1].compound
+        else
+            selector.first;
+
+        // Find the bucketing key from rightmost compound
+        const bucket_key = getBucketKey(rightmost) orelse continue; // skip if dynamic pseudo-class
+
+        const rule = VisibilityRule{
+            .props = props,
+            .selector = selector,
+            .priority = (@as(u64, computeSpecificity(selector)) << 32) | @as(u64, self.next_doc_order),
+        };
+        self.next_doc_order += 1;
+
+        // Add to appropriate bucket
+        switch (bucket_key) {
+            .id => |id| {
+                const gop = try self.id_rules.getOrPut(self.arena, id);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .class => |class| {
+                const gop = try self.class_rules.getOrPut(self.arena, class);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .tag => |tag| {
+                const gop = try self.tag_rules.getOrPut(self.arena, tag);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .other => {
+                try self.other_rules.append(self.arena, rule);
+            },
+        }
+    }
+}
+
+const BucketKey = union(enum) {
+    id: []const u8,
+    class: []const u8,
+    tag: Tag,
+    other,
+};
+
+/// Returns the best bucket key for a compound selector, or null if it contains
+/// a dynamic pseudo-class we should skip (hover, active, focus, etc.)
+/// Priority: id > class > tag > other
+fn getBucketKey(compound: Selector.Compound) ?BucketKey {
+    var best_key: BucketKey = .other;
+
+    for (compound.parts) |part| {
+        switch (part) {
+            .id => |id| {
+                best_key = .{ .id = id };
+            },
+            .class => |class| {
+                if (best_key != .id) {
+                    best_key = .{ .class = class };
+                }
+            },
+            .tag => |tag| {
+                if (best_key == .other) {
+                    best_key = .{ .tag = tag };
+                }
+            },
+            .tag_name => {
+                // Custom tag - put in other bucket (can't efficiently look up)
+                // Keep current best_key if we have something better
+            },
+            .pseudo_class => |pc| {
+                // Skip dynamic pseudo-classes - they depend on interaction state
+                switch (pc) {
+                    .hover, .active, .focus, .focus_within, .focus_visible, .visited, .target => {
+                        return null; // Skip this selector entirely
+                    },
+                    else => {},
+                }
+            },
+            .universal, .attribute => {},
+        }
+    }
+
+    return best_key;
+}
+
+/// Extracts visibility-relevant properties from a style declaration.
+fn extractVisibilityProperties(style: *CSSStyleProperties) VisibilityProperties {
+    var props = VisibilityProperties{};
+    const decl = style.asCSSStyleDeclaration();
+
+    if (decl.findProperty(comptime .wrap("display"))) |property| {
+        props.display_none = property._value.eql(comptime .wrap("none"));
+    }
+
+    if (decl.findProperty(comptime .wrap("visibility"))) |property| {
+        props.visibility_hidden = property._value.eql(comptime .wrap("hidden")) or property._value.eql(comptime .wrap("collapse"));
+    }
+
+    if (decl.findProperty(comptime .wrap("opacity"))) |property| {
+        props.opacity_zero = property._value.eql(comptime .wrap("0"));
+    }
+
+    if (decl.findProperty(.wrap("pointer-events"))) |property| {
+        props.pointer_events_none = property._value.eql(comptime .wrap("none"));
+    }
+
+    return props;
+}
+
+// Computes CSS specificity for a selector.
+// Returns packed value: (id_count << 20) | (class_count << 10) | element_count
+pub fn computeSpecificity(selector: Selector.Selector) u32 {
+    var ids: u32 = 0;
+    var classes: u32 = 0; // includes classes, attributes, pseudo-classes
+    var elements: u32 = 0; // includes elements, pseudo-elements
+
+    // Count specificity for first compound
+    countCompoundSpecificity(selector.first, &ids, &classes, &elements);
+
+    // Count specificity for subsequent segments
+    for (selector.segments) |segment| {
+        countCompoundSpecificity(segment.compound, &ids, &classes, &elements);
+    }
+
+    // Pack into single u32: (ids << 20) | (classes << 10) | elements
+    // This gives us 10 bits each, supporting up to 1023 of each type
+    return (@as(u32, @min(ids, 1023)) << 20) | (@as(u32, @min(classes, 1023)) << 10) | @min(elements, 1023);
+}
+
+fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u32, elements: *u32) void {
+    for (compound.parts) |part| {
+        switch (part) {
+            .id => ids.* += 1,
+            .class => classes.* += 1,
+            .tag, .tag_name => elements.* += 1,
+            .universal => {}, // zero specificity
+            .attribute => classes.* += 1,
+            .pseudo_class => |pc| {
+                switch (pc) {
+                    // :where() has zero specificity
+                    .where => {},
+                    // :not(), :is(), :has() take specificity of their most specific argument
+                    .not, .is, .has => |nested| {
+                        var max_nested: u32 = 0;
+                        for (nested) |nested_sel| {
+                            const spec = computeSpecificity(nested_sel);
+                            if (spec > max_nested) max_nested = spec;
+                        }
+                        // Unpack and add to our counts
+                        ids.* += (max_nested >> 20) & 0x3FF;
+                        classes.* += (max_nested >> 10) & 0x3FF;
+                        elements.* += max_nested & 0x3FF;
+                    },
+                    // All other pseudo-classes count as class-level specificity
+                    else => classes.* += 1,
+                }
+            },
+        }
+    }
+}
+
+fn matchesSelector(el: *Element, selector: Selector.Selector, page: *Page) bool {
+    const node = el.asNode();
+    return SelectorList.matches(node, selector, node, page);
+}
+
+const VisibilityProperties = struct {
+    display_none: ?bool = null,
+    visibility_hidden: ?bool = null,
+    opacity_zero: ?bool = null,
+    pointer_events_none: ?bool = null,
+
+    // returne true if any field in VisibilityProperties is not null
+    fn isRelevant(self: VisibilityProperties) bool {
+        return self.display_none != null or
+            self.visibility_hidden != null or
+            self.opacity_zero != null or
+            self.pointer_events_none != null;
+    }
+};
+
+const VisibilityRule = struct {
+    selector: Selector.Selector, // Single selector, not a list
+    props: VisibilityProperties,
+
+    // Packed priority: (specificity << 32) | doc_order
+    priority: u64,
+};
+
+const CheckVisibilityOptions = struct {
+    check_opacity: bool = false,
+    check_visibility: bool = false,
+};
+
+// Inline styles always win over stylesheets - use max u64 as sentinel
+const INLINE_PRIORITY: u64 = std.math.maxInt(u64);
+
+fn getInlineStyleProperty(el: *Element, property_name: String, page: *Page) ?*CSSStyleProperty {
+    const style = el.getOrCreateStyle(page) catch |err| {
+        log.err(.browser, "StyleManager getOrCreateStyle", .{ .err = err });
+        return null;
+    };
+    return style.asCSSStyleDeclaration().findProperty(property_name);
+}
+
+const testing = @import("../testing.zig");
+test "StyleManager: computeSpecificity: element selector" {
+    // div -> (0, 0, 1)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .tag = .div }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: class selector" {
+    // .foo -> (0, 1, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: id selector" {
+    // #bar -> (1, 0, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .id = "bar" }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 20, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: combined selector" {
+    // div.foo#bar -> (1, 1, 1)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .tag = .div },
+            .{ .class = "foo" },
+            .{ .id = "bar" },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual((1 << 20) | (1 << 10) | 1, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: universal selector" {
+    // * -> (0, 0, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.universal} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(0, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: multiple classes" {
+    // .a.b.c -> (0, 3, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .class = "a" },
+            .{ .class = "b" },
+            .{ .class = "c" },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(3 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: descendant combinator" {
+    // div span -> (0, 0, 2)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .tag = .div }} },
+        .segments = &.{
+            .{ .combinator = .descendant, .compound = .{ .parts = &.{.{ .tag = .span }} } },
+        },
+    };
+    try testing.expectEqual(2, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :where() has zero specificity" {
+    // :where(.foo) -> (0, 0, 0) regardless of what's inside
+    const inner_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .where = &.{inner_selector} } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(0, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :not() takes inner specificity" {
+    // :not(.foo) -> (0, 1, 0) - takes specificity of .foo
+    const inner_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .not = &.{inner_selector} } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :is() takes most specific inner" {
+    // :is(.foo, #bar) -> (1, 0, 0) - takes the most specific (#bar)
+    const class_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const id_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .id = "bar" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .is = &.{ class_selector, id_selector } } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 20, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: pseudo-class (general)" {
+    // :hover -> (0, 1, 0) - pseudo-classes count as class-level
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .hover },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: document order tie-breaking" {
+    // When specificity is equal, higher doc_order (later in document) wins
+    const beats = struct {
+        fn f(spec: u32, doc_order: u32, best_spec: u32, best_doc_order: u32) bool {
+            return spec > best_spec or (spec == best_spec and doc_order > best_doc_order);
+        }
+    }.f;
+
+    // Higher specificity always wins regardless of doc_order
+    try testing.expect(beats(2, 0, 1, 10));
+    try testing.expect(!beats(1, 10, 2, 0));
+
+    // Equal specificity: higher doc_order wins
+    try testing.expect(beats(1, 5, 1, 3)); // doc_order 5 > 3
+    try testing.expect(!beats(1, 3, 1, 5)); // doc_order 3 < 5
+
+    // Equal specificity and doc_order: no win
+    try testing.expect(!beats(1, 5, 1, 5));
+}

src/browser/actions.zig

@@ -0,0 +1,137 @@
+// 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 lp = @import("../lightpanda.zig");
+const DOMNode = @import("webapi/Node.zig");
+const Element = @import("webapi/Element.zig");
+const Event = @import("webapi/Event.zig");
+const MouseEvent = @import("webapi/event/MouseEvent.zig");
+const Page = @import("Page.zig");
+const Session = @import("Session.zig");
+const Selector = @import("webapi/selector/Selector.zig");
+
+pub fn click(node: *DOMNode, page: *Page) !void {
+    const el = node.is(Element) orelse return error.InvalidNodeType;
+
+    const mouse_event: *MouseEvent = try .initTrusted(comptime .wrap("click"), .{
+        .bubbles = true,
+        .cancelable = true,
+        .composed = true,
+        .clientX = 0,
+        .clientY = 0,
+    }, page);
+
+    page._event_manager.dispatch(el.asEventTarget(), mouse_event.asEvent()) catch |err| {
+        lp.log.err(.app, "click failed", .{ .err = err });
+        return error.ActionFailed;
+    };
+}
+
+pub fn fill(node: *DOMNode, text: []const u8, page: *Page) !void {
+    const el = node.is(Element) orelse return error.InvalidNodeType;
+
+    if (el.is(Element.Html.Input)) |input| {
+        input.setValue(text, page) catch |err| {
+            lp.log.err(.app, "fill input failed", .{ .err = err });
+            return error.ActionFailed;
+        };
+    } else if (el.is(Element.Html.TextArea)) |textarea| {
+        textarea.setValue(text, page) catch |err| {
+            lp.log.err(.app, "fill textarea failed", .{ .err = err });
+            return error.ActionFailed;
+        };
+    } else if (el.is(Element.Html.Select)) |select| {
+        select.setValue(text, page) catch |err| {
+            lp.log.err(.app, "fill select failed", .{ .err = err });
+            return error.ActionFailed;
+        };
+    } else {
+        return error.InvalidNodeType;
+    }
+
+    const input_evt: *Event = try .initTrusted(comptime .wrap("input"), .{ .bubbles = true }, page);
+    page._event_manager.dispatch(el.asEventTarget(), input_evt) catch |err| {
+        lp.log.err(.app, "dispatch input event failed", .{ .err = err });
+    };
+
+    const change_evt: *Event = try .initTrusted(comptime .wrap("change"), .{ .bubbles = true }, page);
+    page._event_manager.dispatch(el.asEventTarget(), change_evt) catch |err| {
+        lp.log.err(.app, "dispatch change event failed", .{ .err = err });
+    };
+}
+
+pub fn scroll(node: ?*DOMNode, x: ?i32, y: ?i32, page: *Page) !void {
+    if (node) |n| {
+        const el = n.is(Element) orelse return error.InvalidNodeType;
+
+        if (x) |val| {
+            el.setScrollLeft(val, page) catch |err| {
+                lp.log.err(.app, "setScrollLeft failed", .{ .err = err });
+                return error.ActionFailed;
+            };
+        }
+        if (y) |val| {
+            el.setScrollTop(val, page) catch |err| {
+                lp.log.err(.app, "setScrollTop failed", .{ .err = err });
+                return error.ActionFailed;
+            };
+        }
+
+        const scroll_evt: *Event = try .initTrusted(comptime .wrap("scroll"), .{ .bubbles = true }, page);
+        page._event_manager.dispatch(el.asEventTarget(), scroll_evt) catch |err| {
+            lp.log.err(.app, "dispatch scroll event failed", .{ .err = err });
+        };
+    } else {
+        page.window.scrollTo(.{ .x = x orelse 0 }, y, page) catch |err| {
+            lp.log.err(.app, "scroll failed", .{ .err = err });
+            return error.ActionFailed;
+        };
+    }
+}
+
+pub fn waitForSelector(selector: [:0]const u8, timeout_ms: u32, session: *Session) !*DOMNode {
+    var timer = try std.time.Timer.start();
+    var runner = try session.runner(.{});
+    try runner.wait(.{ .ms = timeout_ms, .until = .load });
+
+    while (true) {
+        const page = runner.page;
+        const element = Selector.querySelector(page.document.asNode(), selector, page) catch {
+            return error.InvalidSelector;
+        };
+
+        if (element) |el| {
+            return el.asNode();
+        }
+
+        const elapsed: u32 = @intCast(timer.read() / std.time.ns_per_ms);
+        if (elapsed >= timeout_ms) {
+            return error.Timeout;
+        }
+        switch (try runner.tick(.{ .ms = timeout_ms - elapsed })) {
+            .done => return error.Timeout,
+            .ok => |recommended_sleep_ms| {
+                if (recommended_sleep_ms > 0) {
+                    // guanrateed to be <= 20ms
+                    std.Thread.sleep(std.time.ns_per_ms * recommended_sleep_ms);
+                }
+            },
+        }
+    }
+}

src/browser/css/Parser.zig

@@ -293,3 +293,191 @@ fn isBang(token: Tokenizer.Token) bool {
         else => false,
     };
 }
+
+pub const Rule = struct {
+    selector: []const u8,
+    block: []const u8,
+};
+
+pub fn parseStylesheet(input: []const u8) RulesIterator {
+    return RulesIterator.init(input);
+}
+
+pub const RulesIterator = struct {
+    input: []const u8,
+    stream: TokenStream,
+    has_skipped_at_rule: bool = false,
+
+    pub fn init(input: []const u8) RulesIterator {
+        return .{
+            .input = input,
+            .stream = TokenStream.init(input),
+        };
+    }
+
+    pub fn next(self: *RulesIterator) ?Rule {
+        var selector_start: ?usize = null;
+        var selector_end: ?usize = null;
+
+        while (true) {
+            const peeked = self.stream.peek() orelse return null;
+
+            if (peeked.token == .curly_bracket_block) {
+                if (selector_start == null) {
+                    self.skipBlock();
+                    continue;
+                }
+
+                const open_brace = self.stream.next() orelse return null;
+                const block_start = open_brace.end;
+                var block_end = block_start;
+
+                var depth: usize = 1;
+                while (true) {
+                    const span = self.stream.next() orelse {
+                        block_end = self.input.len;
+                        break;
+                    };
+                    if (span.token == .curly_bracket_block) {
+                        depth += 1;
+                    } else if (span.token == .close_curly_bracket) {
+                        depth -= 1;
+                        if (depth == 0) {
+                            block_end = span.start;
+                            break;
+                        }
+                    }
+                }
+
+                var selector = self.input[selector_start.?..selector_end.?];
+                selector = std.mem.trim(u8, selector, &std.ascii.whitespace);
+
+                return .{
+                    .selector = selector,
+                    .block = self.input[block_start..block_end],
+                };
+            }
+
+            if (peeked.token == .at_keyword) {
+                self.has_skipped_at_rule = true;
+                self.skipAtRule();
+                selector_start = null;
+                selector_end = null;
+                continue;
+            }
+
+            if (selector_start == null and (isWhitespaceOrComment(peeked.token) or isSemicolon(peeked.token))) {
+                _ = self.stream.next();
+                continue;
+            }
+
+            const span = self.stream.next() orelse return null;
+            if (!isWhitespaceOrComment(span.token)) {
+                if (selector_start == null) selector_start = span.start;
+                selector_end = span.end;
+            }
+        }
+    }
+
+    fn skipBlock(self: *RulesIterator) void {
+        const span = self.stream.next() orelse return;
+        if (span.token != .curly_bracket_block) return;
+
+        var depth: usize = 1;
+        while (true) {
+            const next_span = self.stream.next() orelse return;
+            if (next_span.token == .curly_bracket_block) {
+                depth += 1;
+            } else if (next_span.token == .close_curly_bracket) {
+                depth -= 1;
+                if (depth == 0) return;
+            }
+        }
+    }
+
+    fn skipAtRule(self: *RulesIterator) void {
+        _ = self.stream.next(); // consume @keyword
+        var depth: usize = 0;
+        var saw_block = false;
+
+        while (true) {
+            const peeked = self.stream.peek() orelse return;
+            if (!saw_block and isSemicolon(peeked.token) and depth == 0) {
+                _ = self.stream.next();
+                return;
+            }
+
+            const span = self.stream.next() orelse return;
+            if (isWhitespaceOrComment(span.token)) continue;
+
+            if (span.token == .curly_bracket_block) {
+                depth += 1;
+                saw_block = true;
+            } else if (span.token == .close_curly_bracket) {
+                if (depth > 0) depth -= 1;
+                if (saw_block and depth == 0) return;
+            }
+        }
+    }
+};
+
+const testing = std.testing;
+
+test "RulesIterator: single rule" {
+    var it = RulesIterator.init(".test { color: red; }");
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: multiple rules" {
+    var it = RulesIterator.init("h1 { margin: 0; } p { padding: 10px; }");
+
+    var rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("h1", rule.selector);
+    try testing.expectEqualStrings(" margin: 0; ", rule.block);
+
+    rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("p", rule.selector);
+    try testing.expectEqualStrings(" padding: 10px; ", rule.block);
+
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: skips at-rules without block" {
+    var it = RulesIterator.init("@import url('style.css'); .test { color: red; }");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: skips at-rules with block" {
+    var it = RulesIterator.init("@media screen { .test { color: blue; } } .test2 { color: green; }");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test2", rule.selector);
+    try testing.expectEqualStrings(" color: green; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: comments and whitespace" {
+    var it = RulesIterator.init("  /* comment */  .test  /* comment */ { /* comment */ color: red; } \n\t");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" /* comment */ color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: top-level semicolons" {
+    var it = RulesIterator.init("*{}; ; p{}");
+    var rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("*", rule.selector);
+
+    rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("p", rule.selector);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}

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/forms.zig

@@ -0,0 +1,460 @@
+// 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 TreeWalker = @import("webapi/TreeWalker.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+
+const Allocator = std.mem.Allocator;
+
+pub const SelectOption = struct {
+    value: []const u8,
+    text: []const u8,
+
+    pub fn jsonStringify(self: *const SelectOption, jw: anytype) !void {
+        try jw.beginObject();
+        try jw.objectField("value");
+        try jw.write(self.value);
+        try jw.objectField("text");
+        try jw.write(self.text);
+        try jw.endObject();
+    }
+};
+
+pub const FormField = struct {
+    backendNodeId: ?u32 = null,
+    node: *Node,
+    tag_name: []const u8,
+    name: ?[]const u8,
+    input_type: ?[]const u8,
+    required: bool,
+    disabled: bool,
+    value: ?[]const u8,
+    placeholder: ?[]const u8,
+    options: []SelectOption,
+
+    pub fn jsonStringify(self: *const FormField, jw: anytype) !void {
+        try jw.beginObject();
+
+        if (self.backendNodeId) |id| {
+            try jw.objectField("backendNodeId");
+            try jw.write(id);
+        }
+
+        try jw.objectField("tagName");
+        try jw.write(self.tag_name);
+
+        if (self.name) |v| {
+            try jw.objectField("name");
+            try jw.write(v);
+        }
+
+        if (self.input_type) |v| {
+            try jw.objectField("inputType");
+            try jw.write(v);
+        }
+
+        try jw.objectField("required");
+        try jw.write(self.required);
+
+        try jw.objectField("disabled");
+        try jw.write(self.disabled);
+
+        if (self.value) |v| {
+            try jw.objectField("value");
+            try jw.write(v);
+        }
+
+        if (self.placeholder) |v| {
+            try jw.objectField("placeholder");
+            try jw.write(v);
+        }
+
+        if (self.options.len > 0) {
+            try jw.objectField("options");
+            try jw.beginArray();
+            for (self.options) |opt| {
+                try opt.jsonStringify(jw);
+            }
+            try jw.endArray();
+        }
+
+        try jw.endObject();
+    }
+};
+
+pub const FormInfo = struct {
+    backendNodeId: ?u32 = null,
+    node: *Node,
+    action: ?[]const u8,
+    method: ?[]const u8,
+    fields: []FormField,
+
+    pub fn jsonStringify(self: *const FormInfo, jw: anytype) !void {
+        try jw.beginObject();
+
+        if (self.backendNodeId) |id| {
+            try jw.objectField("backendNodeId");
+            try jw.write(id);
+        }
+
+        if (self.action) |v| {
+            try jw.objectField("action");
+            try jw.write(v);
+        }
+
+        if (self.method) |v| {
+            try jw.objectField("method");
+            try jw.write(v);
+        }
+
+        try jw.objectField("fields");
+        try jw.beginArray();
+        for (self.fields) |field| {
+            try field.jsonStringify(jw);
+        }
+        try jw.endArray();
+
+        try jw.endObject();
+    }
+};
+
+/// Populate backendNodeId on each form and its fields by registering
+/// their nodes in the given registry. Works with both CDP and MCP registries.
+pub fn registerNodes(forms_data: []FormInfo, registry: anytype) !void {
+    for (forms_data) |*form| {
+        const form_registered = try registry.register(form.node);
+        form.backendNodeId = form_registered.id;
+        for (form.fields) |*field| {
+            const field_registered = try registry.register(field.node);
+            field.backendNodeId = field_registered.id;
+        }
+    }
+}
+
+/// Collect all forms and their fields under `root`.
+/// Uses Form.getElements() to include fields outside the <form> that
+/// reference it via the form="id" attribute, matching browser behavior.
+/// `arena` must be an arena allocator — returned slices borrow its memory.
+pub fn collectForms(
+    arena: Allocator,
+    root: *Node,
+    page: *Page,
+) ![]FormInfo {
+    var forms: std.ArrayList(FormInfo) = .empty;
+
+    var tw = TreeWalker.Full.init(root, .{});
+    while (tw.next()) |node| {
+        const form = node.is(Element.Html.Form) orelse continue;
+        const el = form.asElement();
+
+        const fields = try collectFormFields(arena, form, page);
+        if (fields.len == 0) continue;
+
+        const action_attr = el.getAttributeSafe(comptime .wrap("action"));
+        const method_str = form.getMethod();
+
+        try forms.append(arena, .{
+            .node = node,
+            .action = if (action_attr) |a| if (a.len > 0) a else null else null,
+            .method = method_str,
+            .fields = fields,
+        });
+    }
+
+    return forms.items;
+}
+
+fn collectFormFields(
+    arena: Allocator,
+    form: *Element.Html.Form,
+    page: *Page,
+) ![]FormField {
+    var fields: std.ArrayList(FormField) = .empty;
+
+    var elements = try form.getElements(page);
+    var it = try elements.iterator();
+    while (it.next()) |el| {
+        const node = el.asNode();
+
+        const is_disabled = el.isDisabled();
+
+        if (el.is(Element.Html.Input)) |input| {
+            if (input._input_type == .hidden) continue;
+            if (input._input_type == .submit or input._input_type == .button or input._input_type == .image) continue;
+
+            try fields.append(arena, .{
+                .node = node,
+                .tag_name = "input",
+                .name = el.getAttributeSafe(comptime .wrap("name")),
+                .input_type = input._input_type.toString(),
+                .required = el.getAttributeSafe(comptime .wrap("required")) != null,
+                .disabled = is_disabled,
+                .value = input.getValue(),
+                .placeholder = el.getAttributeSafe(comptime .wrap("placeholder")),
+                .options = &.{},
+            });
+            continue;
+        }
+
+        if (el.is(Element.Html.TextArea)) |textarea| {
+            try fields.append(arena, .{
+                .node = node,
+                .tag_name = "textarea",
+                .name = el.getAttributeSafe(comptime .wrap("name")),
+                .input_type = null,
+                .required = el.getAttributeSafe(comptime .wrap("required")) != null,
+                .disabled = is_disabled,
+                .value = textarea.getValue(),
+                .placeholder = el.getAttributeSafe(comptime .wrap("placeholder")),
+                .options = &.{},
+            });
+            continue;
+        }
+
+        if (el.is(Element.Html.Select)) |select| {
+            const options = try collectSelectOptions(arena, node, page);
+
+            try fields.append(arena, .{
+                .node = node,
+                .tag_name = "select",
+                .name = el.getAttributeSafe(comptime .wrap("name")),
+                .input_type = null,
+                .required = el.getAttributeSafe(comptime .wrap("required")) != null,
+                .disabled = is_disabled,
+                .value = select.getValue(page),
+                .placeholder = null,
+                .options = options,
+            });
+            continue;
+        }
+
+        // Button elements from getElements() - skip (not fillable)
+    }
+
+    return fields.items;
+}
+
+fn collectSelectOptions(
+    arena: Allocator,
+    select_node: *Node,
+    page: *Page,
+) ![]SelectOption {
+    var options: std.ArrayList(SelectOption) = .empty;
+    const Option = Element.Html.Option;
+
+    var tw = TreeWalker.Full.init(select_node, .{});
+    while (tw.next()) |node| {
+        const el = node.is(Element) orelse continue;
+        const option = el.is(Option) orelse continue;
+
+        try options.append(arena, .{
+            .value = option.getValue(page),
+            .text = option.getText(page),
+        });
+    }
+
+    return options.items;
+}
+
+const testing = @import("../testing.zig");
+
+fn testForms(html: []const u8) ![]FormInfo {
+    const page = try testing.test_session.createPage();
+
+    const doc = page.window._document;
+    const div = try doc.createElement("div", null, page);
+    try page.parseHtmlAsChildren(div.asNode(), html);
+
+    return collectForms(page.call_arena, div.asNode(), page);
+}
+
+test "browser.forms: login form" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form action="/login" method="POST">
+        \\  <input type="email" name="email" required placeholder="Email">
+        \\  <input type="password" name="password" required>
+        \\  <input type="submit" value="Log In">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual("/login", forms[0].action.?);
+    try testing.expectEqual("post", forms[0].method.?);
+    try testing.expectEqual(2, forms[0].fields.len);
+    try testing.expectEqual("email", forms[0].fields[0].name.?);
+    try testing.expectEqual("email", forms[0].fields[0].input_type.?);
+    try testing.expect(forms[0].fields[0].required);
+    try testing.expect(!forms[0].fields[0].disabled);
+    try testing.expectEqual("password", forms[0].fields[1].name.?);
+}
+
+test "browser.forms: form with select" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <select name="color">
+        \\    <option value="red">Red</option>
+        \\    <option value="blue">Blue</option>
+        \\  </select>
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(1, forms[0].fields.len);
+    try testing.expectEqual("select", forms[0].fields[0].tag_name);
+    try testing.expectEqual(2, forms[0].fields[0].options.len);
+    try testing.expectEqual("red", forms[0].fields[0].options[0].value);
+    try testing.expectEqual("Red", forms[0].fields[0].options[0].text);
+}
+
+test "browser.forms: form with textarea" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form method="POST">
+        \\  <textarea name="message" placeholder="Your message"></textarea>
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(1, forms[0].fields.len);
+    try testing.expectEqual("textarea", forms[0].fields[0].tag_name);
+    try testing.expectEqual("Your message", forms[0].fields[0].placeholder.?);
+}
+
+test "browser.forms: empty form skipped" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form action="/empty">
+        \\  <p>No fields here</p>
+        \\</form>
+    );
+    try testing.expectEqual(0, forms.len);
+}
+
+test "browser.forms: hidden inputs excluded" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <input type="hidden" name="csrf" value="token123">
+        \\  <input type="text" name="username">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(1, forms[0].fields.len);
+    try testing.expectEqual("username", forms[0].fields[0].name.?);
+}
+
+test "browser.forms: multiple forms" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form action="/search" method="GET">
+        \\  <input type="text" name="q" placeholder="Search">
+        \\</form>
+        \\<form action="/login" method="POST">
+        \\  <input type="email" name="email">
+        \\  <input type="password" name="pass">
+        \\</form>
+    );
+    try testing.expectEqual(2, forms.len);
+    try testing.expectEqual(1, forms[0].fields.len);
+    try testing.expectEqual(2, forms[1].fields.len);
+}
+
+test "browser.forms: disabled fields flagged" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <input type="text" name="enabled_field">
+        \\  <input type="text" name="disabled_field" disabled>
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(2, forms[0].fields.len);
+    try testing.expect(!forms[0].fields[0].disabled);
+    try testing.expect(forms[0].fields[1].disabled);
+}
+
+test "browser.forms: disabled fieldset" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <fieldset disabled>
+        \\    <input type="text" name="in_disabled_fieldset">
+        \\  </fieldset>
+        \\  <input type="text" name="outside_fieldset">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(2, forms[0].fields.len);
+    try testing.expect(forms[0].fields[0].disabled);
+    try testing.expect(!forms[0].fields[1].disabled);
+}
+
+test "browser.forms: external field via form attribute" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<input type="text" name="external" form="myform">
+        \\<form id="myform" action="/submit">
+        \\  <input type="text" name="internal">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(2, forms[0].fields.len);
+}
+
+test "browser.forms: checkbox and radio return value attribute" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <input type="checkbox" name="agree" value="yes" checked>
+        \\  <input type="radio" name="color" value="red">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(2, forms[0].fields.len);
+    try testing.expectEqual("checkbox", forms[0].fields[0].input_type.?);
+    try testing.expectEqual("yes", forms[0].fields[0].value.?);
+    try testing.expectEqual("radio", forms[0].fields[1].input_type.?);
+    try testing.expectEqual("red", forms[0].fields[1].value.?);
+}
+
+test "browser.forms: form without action or method" {
+    defer testing.reset();
+    defer testing.test_session.removePage();
+    const forms = try testForms(
+        \\<form>
+        \\  <input type="text" name="q">
+        \\</form>
+    );
+    try testing.expectEqual(1, forms.len);
+    try testing.expectEqual(null, forms[0].action);
+    try testing.expectEqual("get", forms[0].method.?);
+    try testing.expectEqual(1, forms[0].fields.len);
+}

src/browser/interactive.zig

@@ -0,0 +1,577 @@
+// 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 {
+    backendNodeId: ?u32 = null,
+    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();
+
+        if (self.backendNodeId) |id| {
+            try jw.objectField("backendNodeId");
+            try jw.write(id);
+        }
+
+        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();
+    }
+};
+
+/// Populate backendNodeId on each interactive element by registering
+/// their nodes in the given registry. Works with both CDP and MCP registries.
+pub fn registerNodes(elements: []InteractiveElement, registry: anytype) !void {
+    for (elements) |*el| {
+        const registered = try registry.register(el.node);
+        el.backendNodeId = registered.id;
+    }
+}
+
+/// 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 css_cache: Element.PointerEventsCache = .empty;
+
+    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(page, el, html_el, listener_targets, &css_cache) 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 = el.isDisabled(),
+            .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(
+    page: *Page,
+    el: *Element,
+    html_el: *Element.Html,
+    listener_targets: ListenerTargetMap,
+    cache: ?*Element.PointerEventsCache,
+) ?InteractivityType {
+    if (el.hasPointerEventsNone(cache, page)) return null;
+
+    // 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;
+}
+
+pub fn isInteractiveRole(role: []const u8) bool {
+    const MAX_LEN = "menuitemcheckbox".len;
+    if (role.len > MAX_LEN) return false;
+    var buf: [MAX_LEN]u8 = undefined;
+    const lowered = std.ascii.lowerString(&buf, role);
+    const interactive_roles = std.StaticStringMap(void).initComptime(.{
+        .{ "button", {} },
+        .{ "checkbox", {} },
+        .{ "combobox", {} },
+        .{ "iframe", {} },
+        .{ "link", {} },
+        .{ "listbox", {} },
+        .{ "menuitem", {} },
+        .{ "menuitemcheckbox", {} },
+        .{ "menuitemradio", {} },
+        .{ "option", {} },
+        .{ "radio", {} },
+        .{ "searchbox", {} },
+        .{ "slider", {} },
+        .{ "spinbutton", {} },
+        .{ "switch", {} },
+        .{ "tab", {} },
+        .{ "textbox", {} },
+        .{ "treeitem", {} },
+    });
+    return interactive_roles.has(lowered);
+}
+
+pub fn isContentRole(role: []const u8) bool {
+    const MAX_LEN = "columnheader".len;
+    if (role.len > MAX_LEN) return false;
+    var buf: [MAX_LEN]u8 = undefined;
+    const lowered = std.ascii.lowerString(&buf, role);
+    const content_roles = std.StaticStringMap(void).initComptime(.{
+        .{ "article", {} },
+        .{ "cell", {} },
+        .{ "columnheader", {} },
+        .{ "gridcell", {} },
+        .{ "heading", {} },
+        .{ "listitem", {} },
+        .{ "main", {} },
+        .{ "navigation", {} },
+        .{ "region", {} },
+        .{ "rowheader", {} },
+    });
+    return content_roles.has(lowered);
+}
+
+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 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: pointer-events none" {
+    const elements = try testInteractive("<button style=\"pointer-events: none;\">Click me</button>");
+    try testing.expectEqual(0, elements.len);
+}
+
+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 ctx, const v8_context = Context.fromIsolate(.{ .handle = v8_isolate });
+    initWithContext(self, ctx, 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);
+        const non_error_res = try 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,278 @@ const ReturnValue = struct {
         v8.v8__ReturnValue__Set(self.handle, handle);
     }
 };
+
+pub const Function = struct {
+    pub const Opts = struct {
+        noop: bool = false,
+        static: bool = false,
+        deletable: bool = true,
+        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 ctx, const v8_context = Context.fromIsolate(.{ .handle = v8_isolate });
+        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

@@ -21,11 +21,13 @@ const lp = @import("lightpanda");
 const log = @import("../../log.zig");
 
 const js = @import("js.zig");
-const Env = @import("Env.zig");
 const bridge = @import("bridge.zig");
+const Env = @import("Env.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,
@@ -60,7 +63,9 @@ templates: []*const v8.FunctionTemplate,
 // Arena for the lifetime of the context
 arena: Allocator,
 
-// The page.call_arena
+// The call_arena for this context. For main world contexts this is
+// page.call_arena. For isolated world contexts this is a separate arena
+// owned by the IsolatedWorld.
 call_arena: Allocator,
 
 // Because calls can be nested (i.e.a function calling a callback),
@@ -74,39 +79,21 @@ 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),
+// Identity tracking for this context. For main world contexts, this points to
+// Session's Identity. For isolated world contexts (CDP inspector), this points
+// to IsolatedWorld's Identity. This ensures same-origin frames share object
+// identity while isolated worlds have separate identity tracking.
+identity: *js.Identity,
 
-// 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,
+// Allocator to use for identity map operations. For main world contexts this is
+// session.page_arena, for isolated worlds it's the isolated world's arena.
+identity_arena: Allocator,
+
+// 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 +111,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 +131,26 @@ 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 {
+/// Returns the Context and v8::Context for the given isolate.
+/// If the current context is from a destroyed Context (e.g., navigated-away iframe),
+/// falls back to the incumbent context (the calling context).
+pub fn fromIsolate(isolate: js.Isolate) struct { *Context, *const v8.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());
+    if (fromC(v8_context)) |ctx| {
+        return .{ ctx, v8_context };
+    }
+    // The current context's Context struct has been freed (e.g., iframe navigated away).
+    // Fall back to the incumbent context (the calling context).
+    const v8_incumbent = v8.v8__Isolate__GetIncumbentContext(isolate.handle).?;
+    return .{ fromC(v8_incumbent).?, v8_incumbent };
 }
 
 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,160 +160,78 @@ 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);
-    }
+    self.session.releaseOrigin(self.origin);
 
-    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)));
-    }
+    // Clear the embedder data so that if V8 keeps this context alive
+    // (because objects created in it are still referenced), we don't
+    // have a dangling pointer to our freed Context struct.
+    v8.v8__Context__SetAlignedPointerInEmbedderData(entered.handle, 1, null);
 
     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 weakRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
-        if (comptime IS_DEBUG) {
-            // should not be possible
-            std.debug.assert(false);
-        }
-        return;
-    };
-    v8.v8__Global__SetWeakFinalizer(&fc.global, fc, bridge.Struct(@TypeOf(obj)).JsApi.Meta.finalizer.from_v8, v8.kParameter);
-}
+pub fn setOrigin(self: *Context, key: ?[]const u8) !void {
+    const env = self.env;
+    const isolate = env.isolate;
 
-pub fn safeWeakRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
-        if (comptime IS_DEBUG) {
-            // should not be possible
-            std.debug.assert(false);
-        }
-        return;
-    };
-    v8.v8__Global__ClearWeak(&fc.global);
-    v8.v8__Global__SetWeakFinalizer(&fc.global, fc, bridge.Struct(@TypeOf(obj)).JsApi.Meta.finalizer.from_v8, v8.kParameter);
-}
+    lp.assert(self.origin.rc == 1, "Ref opaque origin", .{ .rc = self.origin.rc });
 
-pub fn strongRef(self: *Context, obj: anytype) void {
-    const fc = self.finalizer_callbacks.get(@intFromPtr(obj)) orelse {
-        if (comptime IS_DEBUG) {
-            // should not be possible
-            std.debug.assert(false);
-        }
-        return;
-    };
-    v8.v8__Global__ClearWeak(&fc.global);
-}
+    const origin = try self.session.getOrCreateOrigin(key);
 
-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);
+    self.session.releaseOrigin(self.origin);
+    self.origin = origin;
 
-        // 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 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);
     }
+}
 
-    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)),
+pub fn trackGlobal(self: *Context, global: v8.Global) !void {
+    return self.session.globals.append(self.session.page_arena, global);
+}
+
+pub fn trackTemp(self: *Context, global: v8.Global) !void {
+    return self.session.temps.put(self.session.page_arena, global.data_ptr, global);
+}
+
+pub const IdentityResult = struct {
+    value_ptr: *v8.Global,
+    found_existing: bool,
+};
+
+pub fn addIdentity(self: *Context, ptr: usize) !IdentityResult {
+    const gop = try self.identity.identity_map.getOrPut(self.identity_arena, ptr);
+    return .{
+        .value_ptr = gop.value_ptr,
+        .found_existing = gop.found_existing,
     };
-
-    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.
@@ -333,11 +239,14 @@ 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 +256,22 @@ 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 getIncumbent(self: *Context) *Page {
+    return fromC(v8.v8__Isolate__GetIncumbentContext(self.env.isolate.handle).?).?.page;
+}
+
+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) {
@@ -409,15 +311,15 @@ pub fn module(self: *Context, comptime want_result: bool, local: *const js.Local
         }
 
         const owned_url = try arena.dupeZ(u8, url);
+        if (cacheable and !gop.found_existing) {
+            gop.key_ptr.* = owned_url;
+        }
         const m = try compileModule(local, src, owned_url);
 
         if (cacheable) {
             // compileModule is synchronous - nothing can modify the cache during compilation
             lp.assert(gop.value_ptr.module == null, "Context.module has module", .{});
             gop.value_ptr.module = try m.persist();
-            if (!gop.found_existing) {
-                gop.key_ptr.* = owned_url;
-            }
         }
 
         break :blk .{ m, owned_url };
@@ -547,6 +449,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);
         }
     }
 }
@@ -571,7 +481,7 @@ fn resolveModuleCallback(
 ) callconv(.c) ?*const v8.Module {
     _ = import_attributes;
 
-    const self = fromC(c_context.?);
+    const self = fromC(c_context.?).?;
     const local = js.Local{
         .ctx = self,
         .handle = c_context.?,
@@ -604,7 +514,7 @@ pub fn dynamicModuleCallback(
     _ = host_defined_options;
     _ = import_attrs;
 
-    const self = fromC(c_context.?);
+    const self = fromC(c_context.?).?;
     const local = js.Local{
         .ctx = self,
         .handle = c_context.?,
@@ -612,14 +522,23 @@ 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(.{ .generic_error = "Out of memory" }).handle);
+        };
     };
 
     const specifier = js.String.toSliceZ(.{ .local = &local, .handle = v8_specifier.? }) catch |err| {
         log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback2" });
-        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+        return @constCast(local.rejectPromise(.{ .generic_error = "Out of memory" }).handle);
     };
 
     const normalized_specifier = self.script_manager.?.resolveSpecifier(
@@ -628,21 +547,21 @@ pub fn dynamicModuleCallback(
         specifier,
     ) catch |err| {
         log.err(.app, "OOM", .{ .err = err, .src = "dynamicModuleCallback3" });
-        return @constCast((local.rejectPromise("Out of memory") catch return null).handle);
+        return @constCast(local.rejectPromise(.{ .generic_error = "Out of memory" }).handle);
     };
 
     const promise = self._dynamicModuleCallback(normalized_specifier, resource, &local) catch |err| blk: {
         log.err(.js, "dynamic module callback", .{
             .err = err,
         });
-        break :blk local.rejectPromise("Failed to load module") catch return null;
+        break :blk local.rejectPromise(.{ .generic_error = "Out of memory" });
     };
     return @constCast(promise.handle);
 }
 
 pub fn metaObjectCallback(c_context: ?*v8.Context, c_module: ?*v8.Module, c_meta: ?*v8.Value) callconv(.c) void {
     // @HandleScope  implement this without a fat context/local..
-    const self = fromC(c_context.?);
+    const self = fromC(c_context.?).?;
     var local = js.Local{
         .ctx = self,
         .handle = c_context.?,
@@ -686,7 +605,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 +716,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 +805,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 +829,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 +929,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 +941,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

@@ -39,6 +39,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 +57,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 +89,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 +147,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 +185,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 +213,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,8 +253,15 @@ pub fn deinit(self: *Env) void {
     allocator.destroy(self.isolate_params);
 }
 
-pub fn createContext(self: *Env, page: *Page, enter: bool) !*Context {
-    const context_arena = try self.app.arena_pool.acquire();
+pub const ContextParams = struct {
+    identity: *js.Identity,
+    identity_arena: Allocator,
+    call_arena: Allocator,
+    debug_name: []const u8 = "Context",
+};
+
+pub fn createContext(self: *Env, page: *Page, params: ContextParams) !*Context {
+    const context_arena = try self.app.arena_pool.acquire(.{ .debug = params.debug_name });
     errdefer self.app.arena_pool.release(context_arena);
 
     const isolate = self.isolate;
@@ -207,59 +269,101 @@ 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).?;
-    var global_global: v8.Global = undefined;
-    v8.v8__Global__New(isolate.handle, global_obj, &global_global);
 
-    if (enter) {
-        v8.v8__Context__Enter(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);
     }
-    errdefer if (enter) {
-        v8.v8__Context__Exit(v8_context);
-    };
 
     const context_id = self.context_id;
     self.context_id = context_id + 1;
 
+    const session = page._session;
+    const origin = try session.getOrCreateOrigin(null);
+    errdefer session.releaseOrigin(origin);
+
     const context = try context_arena.create(Context);
     context.* = .{
         .env = self,
         .page = page,
+        .origin = origin,
         .id = context_id,
-        .entered = enter,
+        .session = session,
         .isolate = isolate,
         .arena = context_arena,
         .handle = context_global,
         .templates = self.templates,
-        .call_arena = page.call_arena,
+        .call_arena = params.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),
+        .identity = params.identity,
+        .identity_arena = params.identity_arena,
     };
-    try context.identity_map.putNoClobber(context_arena, @intFromPtr(page.window), global_global);
+
+    {
+        // Multiple contexts can be created for the same Window (via CDP). We only
+        // need to register the first one.
+        const gop = try params.identity.identity_map.getOrPut(params.identity_arena, @intFromPtr(page.window));
+        if (gop.found_existing == false) {
+            // our window wrapped in a v8::Global
+            var global_global: v8.Global = undefined;
+            v8.v8__Global__New(isolate.handle, global_obj, &global_global);
+            gop.value_ptr.* = 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 +381,25 @@ 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| {
+pub fn runMacrotasks(self: *Env) !void {
+    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
@@ -300,21 +413,44 @@ pub fn runMacrotasks(self: *Env) !?u64 {
         var hs: js.HandleScope = undefined;
         const entered = ctx.enter(&hs);
         defer entered.exit();
-
-        const ms = (try ctx.scheduler.run()) orelse continue;
-        if (ms_to_next_task == null or ms < ms_to_next_task.?) {
-            ms_to_next_task = ms;
-        }
+        try ctx.scheduler.run();
     }
-    return ms_to_next_task;
 }
 
-pub fn pumpMessageLoop(self: *const Env) bool {
+pub fn msToNextMacrotask(self: *Env) ?u64 {
+    var next_task: u64 = std.math.maxInt(u64);
+    for (self.contexts[0..self.context_count]) |ctx| {
+        const candidate = ctx.scheduler.msToNextHigh() orelse continue;
+        next_task = @min(candidate, next_task);
+    }
+    return if (next_task == std.math.maxInt(u64)) null else next_task;
+}
+
+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,21 +506,30 @@ 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_event = v8.v8__PromiseRejectMessage__GetEvent(&message_handle);
+    if (promise_event != v8.kPromiseRejectWithNoHandler and promise_event != v8.kPromiseHandlerAddedAfterReject) {
+        return;
+    }
+
     const promise_handle = v8.v8__PromiseRejectMessage__GetPromise(&message_handle).?;
     const v8_isolate = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
-    const js_isolate = js.Isolate{ .handle = v8_isolate };
-    const ctx = Context.fromIsolate(js_isolate);
+    const isolate = js.Isolate{ .handle = v8_isolate };
+    const ctx, const v8_context = Context.fromIsolate(isolate);
 
     const local = js.Local{
         .ctx = ctx,
-        .isolate = js_isolate,
-        .handle = v8.v8__Isolate__GetCurrentContext(v8_isolate).?,
+        .isolate = isolate,
+        .handle = v8_context,
         .call_arena = ctx.call_arena,
     };
 
     const page = ctx.page;
-    page.window.unhandledPromiseRejection(.{
+    page.window.unhandledPromiseRejection(promise_event == v8.kPromiseRejectWithNoHandler, .{
         .local = &local,
         .handle = &message_handle,
     }, page) catch |err| {
@@ -405,3 +550,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, .temps = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .temps = &ctx.session.temps };
 }
 
 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,
+        temps: if (global_type == .temp) *std.AutoHashMapUnmanaged(usize, v8.Global) else void,
 
         const Self = @This();
 
@@ -252,5 +255,12 @@ 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 {
+            if (self.temps.fetchRemove(self.handle.data_ptr)) |kv| {
+                var g = kv.value;
+                v8.v8__Global__Reset(&g);
+            }
+        }
     };
 }

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/Identity.zig

@@ -0,0 +1,46 @@
+// 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/>.
+
+// Identity manages the mapping between Zig instances and their v8::Object wrappers.
+// This provides object identity semantics - the same Zig instance always maps to
+// the same JS object within a given Identity scope.
+//
+// Main world contexts share a single Identity (on Session), ensuring that
+// `window.top.document === top's document` works across same-origin frames.
+//
+// Isolated worlds (CDP inspector) have their own Identity, ensuring their
+// v8::Global wrappers don't leak into the main world.
+
+const std = @import("std");
+const js = @import("js.zig");
+
+const Session = @import("../Session.zig");
+
+const v8 = js.v8;
+
+const Identity = @This();
+
+// Maps Zig instance pointers to their v8::Global(Object) wrappers.
+identity_map: std.AutoHashMapUnmanaged(usize, v8.Global) = .empty,
+
+pub fn deinit(self: *Identity) void {
+    var it = self.identity_map.valueIterator();
+    while (it.next()) |global| {
+        v8.v8__Global__Reset(global);
+    }
+}

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);
 }
@@ -90,6 +78,21 @@ pub fn createError(self: Isolate, msg: []const u8) *const v8.Value {
     return v8.v8__Exception__Error(message).?;
 }
 
+pub fn createRangeError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__RangeError(message).?;
+}
+
+pub fn createReferenceError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__ReferenceError(message).?;
+}
+
+pub fn createSyntaxError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__SyntaxError(message).?;
+}
+
 pub fn createTypeError(self: Isolate, msg: []const u8) *const v8.Value {
     const message = self.initStringHandle(msg);
     return v8.v8__Exception__TypeError(message).?;

src/browser/js/Local.zig

@@ -20,6 +20,8 @@ const std = @import("std");
 const log = @import("../../log.zig");
 const string = @import("../../string.zig");
 
+const Session = @import("../Session.zig");
+
 const js = @import("js.zig");
 const bridge = @import("bridge.zig");
 const Caller = @import("Caller.zig");
@@ -31,7 +33,6 @@ const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const v8 = js.v8;
 const CallOpts = Caller.CallOpts;
-const Allocator = std.mem.Allocator;
 
 // Where js.Context has a lifetime tied to the page, and holds the
 // v8::Global<v8::Context>, this has a much shorter lifetime and holds a
@@ -75,8 +76,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 +115,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 +180,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 +201,21 @@ 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 context_arena = ctx.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 context_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 resolved_ptr_id = @intFromPtr(resolved.ptr);
+            const gop = try ctx.addIdentity(resolved_ptr_id);
             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 context_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.
@@ -197,30 +264,27 @@ pub fn mapZigInstanceToJs(self: *const Local, js_obj_handle: ?*const v8.Object,
             // dont' use js_obj.persist(), because we don't want to track this in
             // context.global_objects, we want to track it in context.identity_map.
             v8.v8__Global__New(isolate.handle, js_obj.handle, gop.value_ptr);
-            if (@hasDecl(JsApi.Meta, "finalizer")) {
-                // It would be great if resolved knew the resolved type, but I
-                // 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.?);
-                {
-                    errdefer fc.deinit();
-                    try ctx.finalizer_callbacks.put(ctx.arena, @intFromPtr(resolved.ptr), fc);
-                }
+            if (resolved.finalizer) |finalizer| {
+                const finalizer_ptr_id = finalizer.ptr_id;
+                finalizer.acquireRef(finalizer_ptr_id);
 
-                conditionallyFlagHandoff(value);
-                if (@hasDecl(JsApi.Meta, "weak")) {
-                    if (comptime IS_DEBUG) {
-                        std.debug.assert(JsApi.Meta.weak == true);
-                    }
-                    v8.v8__Global__SetWeakFinalizer(gop.value_ptr, fc, resolved.finalizer_from_v8, v8.kParameter);
+                const session = ctx.session;
+                const finalizer_gop = try session.finalizer_callbacks.getOrPut(session.page_arena, finalizer_ptr_id);
+                if (finalizer_gop.found_existing == false) {
+                    // This is the first context (and very likely only one) to
+                    // see this Zig instance. We need to create the FinalizerCallback
+                    // so that we can cleanup on page reset if v8 doesn't finalize.
+                    errdefer _ = session.finalizer_callbacks.remove(finalizer_ptr_id);
+                    finalizer_gop.value_ptr.* = try self.createFinalizerCallback(resolved_ptr_id, finalizer_ptr_id, finalizer.deinit);
                 }
+                const fc = finalizer_gop.value_ptr.*;
+                const identity_finalizer = try fc.arena.create(Session.FinalizerCallback.Identity);
+                identity_finalizer.* = .{
+                    .fc = fc,
+                    .identity = ctx.identity,
+                };
+
+                v8.v8__Global__SetWeakFinalizer(gop.value_ptr, identity_finalizer, finalizer.release, v8.kParameter);
             }
             return js_obj;
         },
@@ -310,7 +374,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 +516,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,
@@ -1038,12 +1119,19 @@ fn jsUnsignedIntToZig(comptime T: type, max: comptime_int, maybe: u32) !T {
 // This function recursively walks the _type union field (if there is one) to
 // get the most specific class_id possible.
 const Resolved = struct {
-    weak: bool,
     ptr: *anyopaque,
     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: ?Finalizer,
+
+    const Finalizer = struct {
+        // Resolved.ptr is the most specific value in a chain (e.g. IFrame, not EventTarget, Node,  ...)
+        // Finalizer.ptr_id is the most specific value in a chain that defines an acquireRef
+        ptr_id: usize,
+        deinit: *const fn (ptr_id: usize, session: *Session) void,
+        acquireRef: *const fn (ptr_id: usize) void,
+        release: *const fn (handle: ?*const v8.WeakCallbackInfo) callconv(.c) void,
+    };
 };
 pub fn resolveValue(value: anytype) Resolved {
     const T = bridge.Struct(@TypeOf(value));
@@ -1070,27 +1158,85 @@ pub fn resolveValue(value: anytype) Resolved {
     unreachable;
 }
 
-fn resolveT(comptime T: type, value: *anyopaque) Resolved {
+fn resolveT(comptime T: type, value: *T) Resolved {
     const Meta = T.JsApi.Meta;
     return .{
         .ptr = value,
         .class_id = Meta.class_id,
         .prototype_chain = &Meta.prototype_chain,
-        .weak = if (@hasDecl(Meta, "weak")) Meta.weak else false,
-        .finalizer_from_v8 = if (@hasDecl(Meta, "finalizer")) Meta.finalizer.from_v8 else null,
-        .finalizer_from_zig = if (@hasDecl(Meta, "finalizer")) Meta.finalizer.from_zig else null,
+        .finalizer = blk: {
+            const FT = (comptime findFinalizerType(T)) orelse break :blk null;
+            const getFinalizerPtr = comptime finalizerPtrGetter(T, FT);
+            const finalizer_ptr = getFinalizerPtr(value);
+
+            const Wrap = struct {
+                fn deinit(ptr_id: usize, session: *Session) void {
+                    FT.deinit(@ptrFromInt(ptr_id), session);
+                }
+
+                fn acquireRef(ptr_id: usize) void {
+                    FT.acquireRef(@ptrFromInt(ptr_id));
+                }
+
+                fn release(handle: ?*const v8.WeakCallbackInfo) callconv(.c) void {
+                    const ptr = v8.v8__WeakCallbackInfo__GetParameter(handle.?).?;
+                    const identity_finalizer: *Session.FinalizerCallback.Identity = @ptrCast(@alignCast(ptr));
+
+                    const fc = identity_finalizer.fc;
+                    if (identity_finalizer.identity.identity_map.fetchRemove(fc.resolved_ptr_id)) |kv| {
+                        var global = kv.value;
+                        v8.v8__Global__Reset(&global);
+                    }
+
+                    FT.releaseRef(@ptrFromInt(fc.finalizer_ptr_id), fc.session);
+                }
+            };
+            break :blk .{
+                .ptr_id = @intFromPtr(finalizer_ptr),
+                .deinit = Wrap.deinit,
+                .acquireRef = Wrap.acquireRef,
+                .release = Wrap.release,
+            };
+        },
     };
 }
 
-fn conditionallyFlagHandoff(value: anytype) void {
-    const T = bridge.Struct(@TypeOf(value));
-    if (@hasField(T, "_v8_handoff")) {
-        value._v8_handoff = true;
-        return;
+// Start at the "resolved" type (the most specific) and work our way up the
+// prototype chain looking for the type that defines acquireRef
+fn findFinalizerType(comptime T: type) ?type {
+    const S = bridge.Struct(T);
+    if (@hasDecl(S, "acquireRef")) {
+        return S;
     }
-    if (@hasField(T, "_proto")) {
-        conditionallyFlagHandoff(value._proto);
+    if (@hasField(S, "_proto")) {
+        const ProtoPtr = std.meta.fieldInfo(S, ._proto).type;
+        const ProtoChild = @typeInfo(ProtoPtr).pointer.child;
+        return findFinalizerType(ProtoChild);
     }
+    return null;
+}
+
+// Generate a function that follows the _proto pointer chain to get to the finalizer type
+fn finalizerPtrGetter(comptime T: type, comptime FT: type) *const fn (*T) *FT {
+    const S = bridge.Struct(T);
+    if (S == FT) {
+        return struct {
+            fn get(v: *T) *FT {
+                return v;
+            }
+        }.get;
+    }
+    if (@hasField(S, "_proto")) {
+        const ProtoPtr = std.meta.fieldInfo(S, ._proto).type;
+        const ProtoChild = @typeInfo(ProtoPtr).pointer.child;
+        const childGetter = comptime finalizerPtrGetter(ProtoChild, FT);
+        return struct {
+            fn get(v: *T) *FT {
+                return childGetter(v._proto);
+            }
+        }.get;
+    }
+    @compileError("Cannot find path from " ++ @typeName(T) ++ " to " ++ @typeName(FT));
 }
 
 pub fn stackTrace(self: *const Local) !?[]const u8 {
@@ -1121,9 +1267,15 @@ pub fn stackTrace(self: *const Local) !?[]const u8 {
 }
 
 // == Promise Helpers ==
-pub fn rejectPromise(self: *const Local, value: anytype) !js.Promise {
+pub fn rejectPromise(self: *const Local, err: js.PromiseResolver.RejectError) js.Promise {
     var resolver = js.PromiseResolver.init(self);
-    resolver.reject("Local.rejectPromise", value);
+    resolver.rejectError("Local.rejectPromise", err);
+    return resolver.promise();
+}
+
+pub fn rejectErrorPromise(self: *const Local, value: js.PromiseResolver.RejectError) !js.Promise {
+    var resolver = js.PromiseResolver.init(self);
+    resolver.rejectError("Local.rejectPromise", value);
     return resolver.promise();
 }
 
@@ -1164,6 +1316,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 +1342,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) {
@@ -1282,6 +1444,34 @@ pub fn debugContextId(self: *const Local) i32 {
     return v8.v8__Context__DebugContextId(self.handle);
 }
 
+fn createFinalizerCallback(
+    self: *const Local,
+
+    // Key in identity map
+    // The most specific value (KeyboardEvent, not Event)
+    resolved_ptr_id: usize,
+
+    // The most specific value where finalizers are defined
+    // What actually gets acquired / released / deinit
+    finalizer_ptr_id: usize,
+    deinit: *const fn (ptr_id: usize, session: *Session) void,
+) !*Session.FinalizerCallback {
+    const session = self.ctx.session;
+
+    const arena = try session.getArena(.{ .debug = "FinalizerCallback" });
+    errdefer session.releaseArena(arena);
+
+    const fc = try arena.create(Session.FinalizerCallback);
+    fc.* = .{
+        .arena = arena,
+        .session = session,
+        ._deinit = deinit,
+        .resolved_ptr_id = resolved_ptr_id,
+        .finalizer_ptr_id = finalizer_ptr_id,
+    };
+    return fc;
+}
+
 // Encapsulates a Local and a HandleScope. When we're going from V8->Zig
 // we easily get both a Local and a HandleScope via Caller.init.
 // But when we're going from Zig -> V8, things are more complicated.
@@ -1312,6 +1502,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,73 @@
+// 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 security token for contexts within the same origin.
+// Multiple contexts (frames) from the same origin share a single Origin,
+// which provides the V8 SecurityToken that allows cross-context access.
+//
+// Note: Identity tracking (mapping Zig instances to v8::Objects) is managed
+// separately via js.Identity - Session has the main world Identity, and
+// IsolatedWorlds have their own Identity instances.
+
+const std = @import("std");
+const js = @import("js.zig");
+
+const App = @import("../../App.zig");
+
+const v8 = js.v8;
+const Allocator = std.mem.Allocator;
+
+const Origin = @This();
+
+rc: usize = 1,
+arena: Allocator,
+
+// The key, e.g. lightpanda.io:443
+key: []const u8,
+
+// Security token - all contexts in this origin must use the same v8::Value instance
+// as their security token for V8 to allow cross-context access
+security_token: v8.Global,
+
+pub fn init(app: *App, isolate: js.Isolate, key: []const u8) !*Origin {
+    const arena = try app.arena_pool.acquire(.{ .debug = "Origin" });
+    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,
+        .security_token = token_global,
+    };
+    return self;
+}
+
+pub fn deinit(self: *Origin, app: *App) void {
+    v8.v8__Global__Reset(&self.security_token);
+    app.arena_pool.release(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

@@ -16,6 +16,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
@@ -62,22 +63,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, .temps = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .temps = &ctx.session.temps };
 }
 
-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,
+        temps: if (global_type == .temp) *std.AutoHashMapUnmanaged(usize, v8.Global) else void,
 
         const Self = @This();
 
@@ -91,5 +95,12 @@ fn G(comptime discriminator: u8) type {
                 .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
             };
         }
+
+        pub fn release(self: *const Self) void {
+            if (self.temps.fetchRemove(self.handle.data_ptr)) |kv| {
+                var g = kv.value;
+                v8.v8__Global__Reset(&g);
+            }
+        }
     };
 }

src/browser/js/PromiseResolver.zig

@@ -18,8 +18,11 @@
 
 const js = @import("js.zig");
 const v8 = js.v8;
+
 const log = @import("../../log.zig");
 
+const DOMException = @import("../webapi/DOMException.zig");
+
 const PromiseResolver = @This();
 
 local: *const js.Local,
@@ -63,6 +66,43 @@ pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype
     };
 }
 
+pub const RejectError = union(enum) {
+    /// Not to be confused with `DOMException`; this is bare `Error`.
+    generic_error: []const u8,
+    range_error: []const u8,
+    reference_error: []const u8,
+    syntax_error: []const u8,
+    type_error: []const u8,
+    /// DOM exceptions are unknown to V8, belongs to web standards.
+    dom_exception: struct { err: anyerror },
+};
+
+/// Rejects the promise w/ an error object.
+pub fn rejectError(
+    self: PromiseResolver,
+    comptime source: []const u8,
+    err: RejectError,
+) void {
+    const handle = switch (err) {
+        .generic_error => |msg| self.local.isolate.createError(msg),
+        .range_error => |msg| self.local.isolate.createRangeError(msg),
+        .reference_error => |msg| self.local.isolate.createReferenceError(msg),
+        .syntax_error => |msg| self.local.isolate.createSyntaxError(msg),
+        .type_error => |msg| self.local.isolate.createTypeError(msg),
+        // "Exceptional".
+        .dom_exception => |exception| {
+            self._reject(DOMException.fromError(exception.err) orelse unreachable) catch |reject_err| {
+                log.err(.bug, "rejectDomException", .{ .source = source, .err = reject_err, .persistent = false });
+            };
+            return;
+        },
+    };
+
+    self._reject(js.Value{ .handle = handle, .local = self.local }) catch |reject_err| {
+        log.err(.bug, "rejectError", .{ .source = source, .err = reject_err, .persistent = false });
+    };
+}
+
 fn _reject(self: PromiseResolver, value: anytype) !void {
     const local = self.local;
     const js_val = try local.zigValueToJs(value, .{});
@@ -79,7 +119,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/Scheduler.zig

@@ -74,9 +74,10 @@ pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts
     });
 }
 
-pub fn run(self: *Scheduler) !?u64 {
-    _ = try self.runQueue(&self.low_priority);
-    return self.runQueue(&self.high_priority);
+pub fn run(self: *Scheduler) !void {
+    const now = milliTimestamp(.monotonic);
+    try self.runQueue(&self.low_priority, now);
+    try self.runQueue(&self.high_priority, now);
 }
 
 pub fn hasReadyTasks(self: *Scheduler) bool {
@@ -84,16 +85,23 @@ pub fn hasReadyTasks(self: *Scheduler) bool {
     return queueuHasReadyTask(&self.low_priority, now) or queueuHasReadyTask(&self.high_priority, now);
 }
 
-fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
-    if (queue.count() == 0) {
-        return null;
-    }
-
+pub fn msToNextHigh(self: *Scheduler) ?u64 {
+    const task = self.high_priority.peek() orelse return null;
     const now = milliTimestamp(.monotonic);
+    if (task.run_at <= now) {
+        return 0;
+    }
+    return @intCast(task.run_at - now);
+}
+
+fn runQueue(self: *Scheduler, queue: *Queue, now: u64) !void {
+    if (queue.count() == 0) {
+        return;
+    }
 
     while (queue.peek()) |*task_| {
         if (task_.run_at > now) {
-            return @intCast(task_.run_at - now);
+            return;
         }
         var task = queue.remove();
         if (comptime IS_DEBUG) {
@@ -114,7 +122,7 @@ fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
             try self.low_priority.add(task);
         }
     }
-    return null;
+    return;
 }
 
 fn queueuHasReadyTask(queue: *Queue, now: u64) bool {

src/browser/js/Snapshot.zig

@@ -25,7 +25,6 @@ const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const v8 = js.v8;
 const JsApis = bridge.JsApis;
-const Allocator = std.mem.Allocator;
 
 const Snapshot = @This();
 
@@ -137,7 +136,7 @@ pub fn create() !Snapshot {
         defer v8.v8__HandleScope__DESTRUCT(&handle_scope);
 
         // Create templates (constructors only) FIRST
-        var templates: [JsApis.len]*v8.FunctionTemplate = undefined;
+        var templates: [JsApis.len]*const v8.FunctionTemplate = undefined;
         inline for (JsApis, 0..) |JsApi, i| {
             @setEvalBranchQuota(10_000);
             templates[i] = generateConstructor(JsApi, isolate);
@@ -202,12 +201,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 +281,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 +307,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 +327,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 +346,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 +374,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 +399,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| {
@@ -418,7 +418,7 @@ fn collectExternalReferences() [countExternalReferences()]isize {
 // via `new ClassName()` - but they could, for example, be created in
 // Zig and returned from a function call, which is why we need the
 // FunctionTemplate.
-fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionTemplate {
+fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *const v8.FunctionTemplate {
     const callback = blk: {
         if (@hasDecl(JsApi, "constructor")) {
             break :blk JsApi.constructor.func;
@@ -428,10 +428,13 @@ fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionT
         break :blk illegalConstructorCallback;
     };
 
-    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 template = v8.v8__FunctionTemplate__New__DEFAULT2(isolate, callback).?;
+    {
+        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 +442,53 @@ 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);
+fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *const v8.FunctionTemplate) void {
     const instance = v8.v8__FunctionTemplate__InstanceTemplate(template);
+    const prototype = v8.v8__FunctionTemplate__PrototypeTemplate(template);
+
+    // Create a signature that validates the receiver is an instance of this template.
+    // This prevents crashes when JavaScript extracts a getter/method and calls it
+    // with the wrong `this` (e.g., documentGetter.call(null)).
+    const signature = v8.v8__Signature__New(isolate, template);
 
     const declarations = @typeInfo(JsApi).@"struct".decls;
     var has_named_index_getter = false;
@@ -455,37 +501,61 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
         switch (definition) {
             bridge.Accessor => {
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
-                const getter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.getter }).?);
+                const getter_signature = if (value.static) null else signature;
+                const getter_callback = v8.v8__FunctionTemplate__New__Config(isolate, &.{
+                    .callback = value.getter,
+                    .signature = getter_signature,
+                }).?;
+                const setter_callback = if (value.setter) |setter|
+                    v8.v8__FunctionTemplate__New__Config(isolate, &.{
+                        .callback = setter,
+                        .signature = getter_signature,
+                    }).?
+                else
+                    null;
+
+                var attribute: v8.PropertyAttribute = 0;
                 if (value.setter == null) {
-                    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);
-                    }
+                    attribute |= v8.ReadOnly;
+                }
+                if (value.deletable == false) {
+                    attribute |= v8.DontDelete;
+                }
+
+                if (value.static) {
+                    // Static accessors: use Template's SetAccessorProperty
+                    v8.v8__Template__SetAccessorProperty(@ptrCast(template), js_name, getter_callback, setter_callback, attribute);
                 } 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__Config(prototype, &.{
+                        .key = js_name,
+                        .getter = getter_callback,
+                        .setter = setter_callback,
+                        .attribute = attribute,
+                    });
                 }
             },
             bridge.Function => {
-                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func, .length = value.arity }).?);
+                // For non-static functions, use the signature to validate the receiver
+                const func_signature = if (value.static) null else signature;
+                const function_template = v8.v8__FunctionTemplate__New__Config(isolate, &.{
+                    .callback = value.func,
+                    .length = value.arity,
+                    .signature = func_signature,
+                }).?;
                 const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
                 if (value.static) {
                     v8.v8__Template__Set(@ptrCast(template), js_name, @ptrCast(function_template), v8.None);
                 } 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,
@@ -509,12 +579,12 @@ fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.Functio
                 has_named_index_getter = true;
             },
             bridge.Iterator => {
-                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func }).?);
+                const function_template = v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func }).?;
                 const js_name = if (value.async)
                     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 +593,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.session.page_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, .temps = {} };
     }
-    return .{ .handle = global };
+    try ctx.trackTemp(global);
+    return .{ .handle = global, .temps = &ctx.session.temps };
 }
 
 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,
+        temps: if (global_type == .temp) *std.AutoHashMapUnmanaged(usize, v8.Global) else void,
 
         const Self = @This();
 
@@ -336,5 +379,12 @@ 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 {
+            if (self.temps.fetchRemove(self.handle.data_ptr)) |kv| {
+                var g = kv.value;
+                v8.v8__Global__Reset(&g);
+            }
+        }
     };
 }

src/browser/js/bridge.zig

@@ -18,14 +18,12 @@
 
 const std = @import("std");
 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 IS_DEBUG = @import("builtin").mode == .Debug;
 
@@ -38,16 +36,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 {
@@ -103,37 +101,21 @@ pub fn Builder(comptime T: type) type {
             }
             return entries;
         }
-
-        pub fn finalizer(comptime func: *const fn (self: *T, shutdown: bool) void) Finalizer {
-            return .{
-                .from_zig = struct {
-                    fn wrap(ptr: *anyopaque) void {
-                        func(@ptrCast(@alignCast(ptr)), true);
-                    }
-                }.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 ctx = fc.ctx;
-                        const value_ptr = fc.ptr;
-                        if (ctx.finalizer_callbacks.contains(@intFromPtr(value_ptr))) {
-                            func(@ptrCast(@alignCast(value_ptr)), false);
-                            ctx.release(value_ptr);
-                        } else {
-                            // A bit weird, but v8 _requires_ that we release it
-                            // If we don't. We'll 100% crash.
-                            v8.v8__Global__Reset(&fc.global);
-                        }
-                    }
-                }.wrap,
-            };
-        }
     };
 }
 
+fn releaseRef(comptime T: type, ptr_id: usize, session: *Session) void {
+    if (@hasDecl(T, "releaseRef")) {
+        T.releaseRef(@ptrFromInt(ptr_id), session);
+        return;
+    }
+    if (@hasField(T, "_proto")) {
+        releaseRef(Struct(std.meta.fieldInfo(T, ._proto).type), ptr_id, session);
+        return;
+    }
+    @compileError(@typeName(T) ++ " marked with finalizer without an acquireRef in its prototype chain");
+}
+
 pub const Constructor = struct {
     func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
 
@@ -160,44 +142,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 +180,22 @@ pub const Function = struct {
 
 pub const Accessor = struct {
     static: bool = false,
+    deletable: bool = true,
+    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,
+            .deletable = opts.deletable,
         };
 
         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 +203,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 +214,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 +342,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 +361,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 +372,7 @@ pub const Callable = struct {
 pub const Property = struct {
     value: Value,
     template: bool,
+    readonly: bool,
 
     const Value = union(enum) {
         null,
@@ -438,32 +384,16 @@ 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 V8. This may never be called
-    // (hence why we fallback to calling in Context.denit). 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,
 };
 
 pub fn unknownWindowPropertyCallback(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
@@ -766,6 +696,8 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/collections.zig"),
     @import("../webapi/Console.zig"),
     @import("../webapi/Crypto.zig"),
+    @import("../webapi/Permissions.zig"),
+    @import("../webapi/StorageManager.zig"),
     @import("../webapi/CSS.zig"),
     @import("../webapi/css/CSSRule.zig"),
     @import("../webapi/css/CSSRuleList.zig"),
@@ -773,6 +705,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 +743,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 +803,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,7 +818,13 @@ 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/InputEvent.zig"),
     @import("../webapi/event/PromiseRejectionEvent.zig"),
+    @import("../webapi/event/SubmitEvent.zig"),
+    @import("../webapi/event/FormDataEvent.zig"),
     @import("../webapi/MessageChannel.zig"),
     @import("../webapi/MessagePort.zig"),
     @import("../webapi/media/MediaError.zig"),
@@ -900,6 +844,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 +861,20 @@ 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/CryptoKey.zig"),
     @import("../webapi/Selection.zig"),
+    @import("../webapi/ImageData.zig"),
 });

src/browser/js/js.zig

@@ -24,6 +24,8 @@ 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 Identity = @import("Identity.zig");
 pub const Context = @import("Context.zig");
 pub const Local = @import("Local.zig");
 pub const Inspector = @import("Inspector.zig");
@@ -77,6 +79,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 +237,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/links.zig

@@ -0,0 +1,54 @@
+// 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 Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+const Page = @import("Page.zig");
+const Selector = @import("webapi/selector/Selector.zig");
+
+const Allocator = std.mem.Allocator;
+
+/// Collect all links (href attributes from anchor tags) under `root`.
+/// Returns a slice of strings allocated with `arena`.
+pub fn collectLinks(arena: Allocator, root: *Node, page: *Page) ![]const []const u8 {
+    var links: std.ArrayList([]const u8) = .empty;
+
+    if (Selector.querySelectorAll(root, "a[href]", page)) |list| {
+        defer list.deinit(page._session);
+
+        for (list._nodes) |node| {
+            if (node.is(Element.Html.Anchor)) |anchor| {
+                const href = anchor.getHref(page) catch |err| {
+                    @import("../lightpanda.zig").log.err(.app, "resolve href failed", .{ .err = err });
+                    continue;
+                };
+
+                if (href.len > 0) {
+                    try links.append(arena, href);
+                }
+            }
+        }
+    } else |err| {
+        @import("../lightpanda.zig").log.err(.app, "query links failed", .{ .err = err });
+        return err;
+    }
+
+    return links.items;
+}

src/browser/markdown.zig

@@ -0,0 +1,691 @@
+// 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 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;
+}
+
+const Context = struct {
+    state: State,
+    writer: *std.Io.Writer,
+    page: *Page,
+
+    fn ensureNewline(self: *Context) !void {
+        if (!self.state.last_char_was_newline) {
+            try self.writer.writeByte('\n');
+            self.state.last_char_was_newline = true;
+        }
+    }
+
+    fn render(self: *Context, node: *Node) error{WriteFailed}!void {
+        switch (node._type) {
+            .document, .document_fragment => {
+                try self.renderChildren(node);
+            },
+            .element => |el| {
+                try self.renderElement(el);
+            },
+            .cdata => |cd| {
+                if (node.is(Node.CData.Text)) |_| {
+                    var text = cd.getData().str();
+                    if (self.state.pre_node) |pre| {
+                        if (node.parentNode() == pre and node.nextSibling() == null) {
+                            text = std.mem.trimRight(u8, text, " \t\r\n");
+                        }
+                    }
+                    try self.renderText(text);
+                }
+            },
+            else => {},
+        }
+    }
+
+    fn renderChildren(self: *Context, parent: *Node) !void {
+        var it = parent.childrenIterator();
+        while (it.next()) |child| {
+            try self.render(child);
+        }
+    }
+
+    fn renderElement(self: *Context, el: *Element) !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 !self.state.in_table) {
+            try self.ensureNewline();
+            if (shouldAddSpacing(tag)) {
+                try self.writer.writeByte('\n');
+            }
+        } else if (tag == .li or tag == .tr) {
+            try self.ensureNewline();
+        }
+
+        // Prefixes
+        switch (tag) {
+            .h1 => try self.writer.writeAll("# "),
+            .h2 => try self.writer.writeAll("## "),
+            .h3 => try self.writer.writeAll("### "),
+            .h4 => try self.writer.writeAll("#### "),
+            .h5 => try self.writer.writeAll("##### "),
+            .h6 => try self.writer.writeAll("###### "),
+            .ul => {
+                if (self.state.list_depth < self.state.list_stack.len) {
+                    self.state.list_stack[self.state.list_depth] = .{ .type = .unordered, .index = 0 };
+                    self.state.list_depth += 1;
+                }
+            },
+            .ol => {
+                if (self.state.list_depth < self.state.list_stack.len) {
+                    self.state.list_stack[self.state.list_depth] = .{ .type = .ordered, .index = 1 };
+                    self.state.list_depth += 1;
+                }
+            },
+            .li => {
+                const indent = if (self.state.list_depth > 0) self.state.list_depth - 1 else 0;
+                for (0..indent) |_| try self.writer.writeAll("  ");
+
+                if (self.state.list_depth > 0 and self.state.list_stack[self.state.list_depth - 1].type == .ordered) {
+                    const current_list = &self.state.list_stack[self.state.list_depth - 1];
+                    try self.writer.print("{d}. ", .{current_list.index});
+                    current_list.index += 1;
+                } else {
+                    try self.writer.writeAll("- ");
+                }
+                self.state.last_char_was_newline = false;
+            },
+            .table => {
+                self.state.in_table = true;
+                self.state.table_row_index = 0;
+                self.state.table_col_count = 0;
+            },
+            .tr => {
+                self.state.table_col_count = 0;
+                try self.writer.writeByte('|');
+            },
+            .td, .th => {
+                // Note: leading pipe handled by previous cell closing or tr opening
+                self.state.last_char_was_newline = false;
+                try self.writer.writeByte(' ');
+            },
+            .blockquote => {
+                try self.writer.writeAll("> ");
+                self.state.last_char_was_newline = false;
+            },
+            .pre => {
+                try self.writer.writeAll("```\n");
+                self.state.pre_node = el.asNode();
+                self.state.last_char_was_newline = true;
+            },
+            .code => {
+                if (self.state.pre_node == null) {
+                    try self.writer.writeByte('`');
+                    self.state.in_code = true;
+                    self.state.last_char_was_newline = false;
+                }
+            },
+            .b, .strong => {
+                try self.writer.writeAll("**");
+                self.state.last_char_was_newline = false;
+            },
+            .i, .em => {
+                try self.writer.writeAll("*");
+                self.state.last_char_was_newline = false;
+            },
+            .s, .del => {
+                try self.writer.writeAll("~~");
+                self.state.last_char_was_newline = false;
+            },
+            .hr => {
+                try self.writer.writeAll("---\n");
+                self.state.last_char_was_newline = true;
+                return;
+            },
+            .br => {
+                if (self.state.in_table) {
+                    try self.writer.writeByte(' ');
+                } else {
+                    try self.writer.writeByte('\n');
+                    self.state.last_char_was_newline = true;
+                }
+                return;
+            },
+            .img => {
+                try self.writer.writeAll("![");
+                if (el.getAttributeSafe(comptime .wrap("alt"))) |alt| {
+                    try self.escape(alt);
+                }
+                try self.writer.writeAll("](");
+                if (el.getAttributeSafe(comptime .wrap("src"))) |src| {
+                    const absolute_src = URL.resolve(self.page.call_arena, self.page.base(), src, .{ .encode = true }) catch src;
+                    try self.writer.writeAll(absolute_src);
+                }
+                try self.writer.writeAll(")");
+                self.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(self.page.call_arena, self.page.base(), h, .{ .encode = true }) catch h else null;
+
+                if (has_block) {
+                    try self.renderChildren(el.asNode());
+                    if (href) |h| {
+                        if (!self.state.last_char_was_newline) try self.writer.writeByte('\n');
+                        try self.writer.writeAll("([](");
+                        try self.writer.writeAll(h);
+                        try self.writer.writeAll("))\n");
+                        self.state.last_char_was_newline = true;
+                    }
+                    return;
+                }
+
+                if (isStandaloneAnchor(el)) {
+                    if (!self.state.last_char_was_newline) try self.writer.writeByte('\n');
+                    try self.writer.writeByte('[');
+                    if (has_content) {
+                        try self.renderChildren(el.asNode());
+                    } else {
+                        try self.writer.writeAll(label orelse "");
+                    }
+                    try self.writer.writeAll("](");
+                    if (href) |h| {
+                        try self.writer.writeAll(h);
+                    }
+                    try self.writer.writeAll(")\n");
+                    self.state.last_char_was_newline = true;
+                    return;
+                }
+
+                try self.writer.writeByte('[');
+                if (has_content) {
+                    try self.renderChildren(el.asNode());
+                } else {
+                    try self.writer.writeAll(label orelse "");
+                }
+                try self.writer.writeAll("](");
+                if (href) |h| {
+                    try self.writer.writeAll(h);
+                }
+                try self.writer.writeByte(')');
+                self.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 self.writer.writeAll(if (checked) "[x] " else "[ ] ");
+                    self.state.last_char_was_newline = false;
+                }
+                return;
+            },
+            else => {},
+        }
+
+        // --- Render Children ---
+        try self.renderChildren(el.asNode());
+
+        // --- Closing Tag Logic ---
+
+        // Suffixes
+        switch (tag) {
+            .pre => {
+                if (!self.state.last_char_was_newline) {
+                    try self.writer.writeByte('\n');
+                }
+                try self.writer.writeAll("```\n");
+                self.state.pre_node = null;
+                self.state.last_char_was_newline = true;
+            },
+            .code => {
+                if (self.state.pre_node == null) {
+                    try self.writer.writeByte('`');
+                    self.state.in_code = false;
+                    self.state.last_char_was_newline = false;
+                }
+            },
+            .b, .strong => {
+                try self.writer.writeAll("**");
+                self.state.last_char_was_newline = false;
+            },
+            .i, .em => {
+                try self.writer.writeAll("*");
+                self.state.last_char_was_newline = false;
+            },
+            .s, .del => {
+                try self.writer.writeAll("~~");
+                self.state.last_char_was_newline = false;
+            },
+            .blockquote => {},
+            .ul, .ol => {
+                if (self.state.list_depth > 0) self.state.list_depth -= 1;
+            },
+            .table => {
+                self.state.in_table = false;
+            },
+            .tr => {
+                try self.writer.writeByte('\n');
+                if (self.state.table_row_index == 0) {
+                    try self.writer.writeByte('|');
+                    for (0..self.state.table_col_count) |_| {
+                        try self.writer.writeAll("---|");
+                    }
+                    try self.writer.writeByte('\n');
+                }
+                self.state.table_row_index += 1;
+                self.state.last_char_was_newline = true;
+            },
+            .td, .th => {
+                try self.writer.writeAll(" |");
+                self.state.table_col_count += 1;
+                self.state.last_char_was_newline = false;
+            },
+            else => {},
+        }
+
+        // Post-block newlines
+        if (tag.isBlock() and !self.state.in_table) {
+            try self.ensureNewline();
+        }
+    }
+
+    fn renderText(self: *Context, text: []const u8) !void {
+        if (text.len == 0) return;
+
+        if (self.state.pre_node) |_| {
+            try self.writer.writeAll(text);
+            self.state.last_char_was_newline = text[text.len - 1] == '\n';
+            return;
+        }
+
+        // Check for pure whitespace
+        if (isAllWhitespace(text)) {
+            if (!self.state.last_char_was_newline) {
+                try self.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 (!self.state.last_char_was_newline and std.ascii.isWhitespace(text[0]))) {
+                try self.writer.writeByte(' ');
+            }
+
+            try self.escape(word);
+            self.state.last_char_was_newline = false;
+            first = false;
+        }
+
+        // Handle trailing whitespace from the original text
+        if (!first and !self.state.last_char_was_newline and std.ascii.isWhitespace(text[text.len - 1])) {
+            try self.writer.writeByte(' ');
+        }
+    }
+
+    fn escape(self: *Context, text: []const u8) !void {
+        for (text) |c| {
+            switch (c) {
+                '\\', '`', '*', '_', '{', '}', '[', ']', '(', ')', '#', '+', '-', '!', '|' => {
+                    try self.writer.writeByte('\\');
+                    try self.writer.writeByte(c);
+                },
+                else => try self.writer.writeByte(c),
+            }
+        }
+    }
+};
+
+pub fn dump(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
+    _ = opts;
+    var ctx: Context = .{
+        .state = .{},
+        .writer = writer,
+        .page = page,
+    };
+    try ctx.render(node);
+    if (!ctx.state.last_char_was_newline) {
+        try writer.writeByte('\n');
+    }
+}
+
+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,68 @@
 
 <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.onload(() => 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.onload(() => 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.onload(() => 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.onload(() => 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,118 @@
   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="CanvasRenderingContext2D#canvas">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual(ctx.canvas, element);
+  // Setting dimensions via ctx.canvas should update the element.
+  ctx.canvas.width = 40;
+  ctx.canvas.height = 25;
+  testing.expectEqual(element.width, 40);
+  testing.expectEqual(element.height, 25);
+}
+</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.onload(() => {
+      testing.expectEqual(true, loading);
+      testing.expectEqual(true, loadingdone);
+    });
+    testing.expectEqual(true, true);
+}
+</script>

src/browser/tests/css/stylesheet.html

@@ -205,3 +205,331 @@
     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>
+
+<script id="CSSStyleSheet_insertRule_deleteRule">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    sheet.insertRule('.test { color: green; }', 0);
+    testing.expectEqual(1, sheet.cssRules.length);
+    testing.expectEqual('.test', sheet.cssRules[0].selectorText);
+    testing.expectEqual('green', sheet.cssRules[0].style.color);
+
+    sheet.deleteRule(0);
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    let caught = false;
+    try {
+        sheet.deleteRule(5);
+    } catch (e) {
+        caught = true;
+        testing.expectEqual('IndexSizeError', e.name);
+    }
+    testing.expectTrue(caught);
+}
+</script>
+
+<script id="CSSStyleSheet_insertRule_default_index">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    // Call without index, should default to 0
+    sheet.insertRule('.test-default { color: blue; }');
+    testing.expectEqual(1, sheet.cssRules.length);
+    testing.expectEqual('.test-default', sheet.cssRules[0].selectorText);
+
+    // Insert another rule without index, should default to 0 and push the first one to index 1
+    sheet.insertRule('.test-at-0 { color: red; }');
+    testing.expectEqual(2, sheet.cssRules.length);
+    testing.expectEqual('.test-at-0', sheet.cssRules[0].selectorText);
+    testing.expectEqual('.test-default', sheet.cssRules[1].selectorText);
+}
+</script>
+
+<script id="CSSStyleSheet_insertRule_semicolon">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    // Should not throw even with trailing semicolon
+    sheet.insertRule('*{};');
+    testing.expectEqual(1, sheet.cssRules.length);
+}
+</script>
+
+<script id="CSSStyleSheet_insertRule_multiple_rules">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    let caught = false;
+    try {
+        sheet.insertRule('a { color: red; } b { color: blue; }');
+    } catch (e) {
+        caught = true;
+        testing.expectEqual('SyntaxError', e.name);
+    }
+    testing.expectTrue(caught);
+    testing.expectEqual(0, sheet.cssRules.length);
+}
+</script>
+
+<script id="CSSStyleSheet_replaceSync">
+{
+    const sheet = new CSSStyleSheet();
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    sheet.replaceSync('.test { color: blue; }');
+    testing.expectEqual(1, sheet.cssRules.length);
+    testing.expectEqual('.test', sheet.cssRules[0].selectorText);
+    testing.expectEqual('blue', sheet.cssRules[0].style.color);
+
+    let replacedAsync = false;
+    testing.async(async () => {
+        const result = await sheet.replace('.async-test { margin: 10px; }');
+        testing.expectTrue(result === sheet);
+        testing.expectEqual(1, sheet.cssRules.length);
+        testing.expectEqual('.async-test', sheet.cssRules[0].selectorText);
+        replacedAsync = true;
+    });
+    testing.onload(() => testing.expectTrue(replacedAsync));
+}
+</script>
+
+<script id="CSSStyleRule_cssText">
+{
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync('.test { color: red; margin: 10px; }');
+
+    // Check serialization format
+    const cssText = sheet.cssRules[0].cssText;
+    testing.expectTrue(cssText.includes('.test { '));
+    testing.expectTrue(cssText.includes('color: red;'));
+    testing.expectTrue(cssText.includes('margin: 10px;'));
+    testing.expectTrue(cssText.includes('}'));
+}
+</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

@@ -24,11 +24,10 @@
 
 <script id=byId name="test1">
   testing.expectEqual(1, document.querySelector.length);
-  testing.expectError("SyntaxError: Syntax Error", () => document.querySelector(''));
+  testing.expectError("SyntaxError", () => document.querySelector(''));
   testing.withError((err) => {
     testing.expectEqual(12, err.code);
     testing.expectEqual("SyntaxError", err.name);
-    testing.expectEqual("Syntax Error", err.message);
   }, () => document.querySelector(''));
 
   testing.expectEqual('test1', document.querySelector('#byId').getAttribute('name'));
@@ -270,3 +269,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,16 +27,17 @@
     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>
 
 <script id=script1 name="test1">
-  testing.expectError("SyntaxError: Syntax Error", () => document.querySelectorAll(''));
+  testing.expectError("SyntaxError", () => document.querySelectorAll(''));
   testing.withError((err) => {
     testing.expectEqual(12, err.code);
     testing.expectEqual("SyntaxError", err.name);
-    testing.expectEqual("Syntax Error", err.message);
   }, () => document.querySelectorAll(''));
 </script>
 
@@ -376,3 +377,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/document/replace_children.html

@@ -342,3 +342,4 @@
     testing.expectEqual('html', doc.lastChild.nodeName);
   }
 </script>
+

src/browser/tests/document/write.html

@@ -131,7 +131,7 @@
     document.open();
   }, 5);
 
-  testing.eventually(() => {
+  testing.onload(() => {
     // The element should be gone now
     const afterOpen = document.getElementById('will_be_removed');
     testing.expectEqual(null, afterOpen);

src/browser/tests/domexception.html

@@ -127,7 +127,7 @@
 
   testing.withError((err) => {
     testing.expectEqual(3, err.code);
-    testing.expectEqual('Hierarchy Error', err.message);
+    testing.expectEqual('HierarchyRequestError', err.name);
     testing.expectEqual(true, err instanceof DOMException);
     testing.expectEqual(true, err instanceof Error);
   }, () => link.appendChild(content));

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);
+  }
+
+  {
+    const parser = new DOMParser();
+    let d = parser.parseFromString('', 'text/xml');
+    testing.expectEqual('<parsererror>error</parsererror>', new XMLSerializer().serializeToString(d));
+  }
 }
 </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/attributes.html

@@ -36,7 +36,6 @@
   testing.withError((err) => {
     testing.expectEqual(8, err.code);
     testing.expectEqual("NotFoundError", err.name);
-    testing.expectEqual("Not Found", err.message);
   }, () => el1.removeAttributeNode(script_id_node));
 
   testing.expectEqual(an1, el1.removeAttributeNode(an1));

src/browser/tests/element/check_visibility.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<body></body>
+
+<!-
+<script id="inline_display_none">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.style.display = "none";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.display = "block";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="inline_visibility_hidden">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    el.style.visibility = "hidden";
+    // Without visibilityProperty option, visibility:hidden is not checked
+    testing.expectEqual(true, el.checkVisibility());
+    // With visibilityProperty: true, visibility:hidden is detected
+    testing.expectEqual(false, el.checkVisibility({ visibilityProperty: true }));
+
+    el.style.visibility = "collapse";
+    testing.expectEqual(false, el.checkVisibility({ visibilityProperty: true }));
+
+    el.style.visibility = "visible";
+    testing.expectEqual(true, el.checkVisibility({ visibilityProperty: true }));
+
+    el.remove();
+  }
+</script>
+
+<script id="inline_opacity_zero">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    el.style.opacity = "0";
+    // Without checkOpacity option, opacity:0 is not checked
+    testing.expectEqual(true, el.checkVisibility());
+    // With checkOpacity: true, opacity:0 is detected
+    testing.expectEqual(false, el.checkVisibility({ checkOpacity: true }));
+
+    el.style.opacity = "0.5";
+    testing.expectEqual(true, el.checkVisibility({ checkOpacity: true }));
+
+    el.style.opacity = "1";
+    testing.expectEqual(true, el.checkVisibility({ checkOpacity: true }));
+
+    el.remove();
+  }
+</script>
+
+<script id="parent_hidden_hides_child">
+  {
+    const parent = document.createElement("div");
+    const child = document.createElement("span");
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    testing.expectEqual(true, child.checkVisibility());
+
+    // display:none on parent hides children (no option needed)
+    parent.style.display = "none";
+    testing.expectEqual(false, child.checkVisibility());
+
+    // visibility:hidden on parent - needs visibilityProperty option
+    parent.style.display = "block";
+    parent.style.visibility = "hidden";
+    testing.expectEqual(true, child.checkVisibility()); // without option
+    testing.expectEqual(false, child.checkVisibility({ visibilityProperty: true }));
+
+    // opacity:0 on parent - needs checkOpacity option
+    parent.style.visibility = "visible";
+    parent.style.opacity = "0";
+    testing.expectEqual(true, child.checkVisibility()); // without option
+    testing.expectEqual(false, child.checkVisibility({ checkOpacity: true }));
+
+    parent.remove();
+  }
+</script>
+
+<style id="style-basic">
+  .hidden-by-class { display: none; }
+  .visible-by-class { display: block; }
+</style>
+<script id="style_tag_basic">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.className = "hidden-by-class";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.className = "visible-by-class";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.className = "";
+    el.remove();
+  }
+</script>
+
+<style id="style-specificity">
+  .spec-hidden { display: none; }
+  #spec-visible { display: block; }
+</style>
+<script id="specificity_id_beats_class">
+  {
+    const el = document.createElement("div");
+    el.id = "spec-visible";
+    el.className = "spec-hidden";
+    document.body.appendChild(el);
+
+    // ID selector (#spec-visible: display:block) should beat class selector (.spec-hidden: display:none)
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<style id="style-order-1">
+  .order-test { display: none; }
+</style>
+<style id="style-order-2">
+  .order-test { display: block; }
+</style>
+<script id="rule_order_later_wins">
+  {
+    const el = document.createElement("div");
+    el.className = "order-test";
+    document.body.appendChild(el);
+
+    // Second style block should win (display: block)
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<style id="style-override">
+  .should-be-hidden { display: none; }
+</style>
+<script id="inline_overrides_stylesheet">
+  {
+    const el = document.createElement("div");
+    el.className = "should-be-hidden";
+    document.body.appendChild(el);
+
+    testing.expectEqual(false, el.checkVisibility());
+
+    // Inline style should override
+    el.style.display = "block";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="dynamic_style_element">
+  {
+    const el = document.createElement("div");
+    el.className = "dynamic-style-test";
+    document.body.appendChild(el);
+
+    testing.expectEqual(true, el.checkVisibility());
+
+    // Add a style element
+    const style = document.createElement("style");
+    style.textContent = ".dynamic-style-test { display: none; }";
+    document.head.appendChild(style);
+
+    testing.expectEqual(false, el.checkVisibility());
+
+    // Remove the style element
+    style.remove();
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="deep_nesting">
+  {
+    const levels = 5;
+    let current = document.body;
+    const elements = [];
+
+    for (let i = 0; i < levels; i++) {
+      const el = document.createElement("div");
+      current.appendChild(el);
+      elements.push(el);
+      current = el;
+    }
+
+    // All should be visible
+    for (let i = 0; i < levels; i++) {
+      testing.expectEqual(true, elements[i].checkVisibility());
+    }
+
+    // Hide middle element
+    elements[2].style.display = "none";
+
+    // Elements 0, 1 should still be visible
+    testing.expectEqual(true, elements[0].checkVisibility());
+    testing.expectEqual(true, elements[1].checkVisibility());
+
+    // Elements 2, 3, 4 should be hidden
+    testing.expectEqual(false, elements[2].checkVisibility());
+    testing.expectEqual(false, elements[3].checkVisibility());
+    testing.expectEqual(false, elements[4].checkVisibility());
+
+    elements[0].remove();
+  }
+</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
@@ -509,6 +532,6 @@
     testing.expectEqual(true, result);
   });
 
-  testing.eventually(() => testing.expectEqual(true, asyncBlockDispatched));
+  testing.onload(() => testing.expectEqual(true, asyncBlockDispatched));
 }
 </script>

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

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

src/browser/tests/element/html/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>
@@ -327,3 +343,164 @@
   testing.expectEqual('', form.elements['choice'].value)
 }
 </script>
+
+<!-- Test: requestSubmit() fires the submit event (unlike submit()) -->
+<form id="test_form2" action="/should-not-navigate2" method="get">
+  <input name="q" value="test2">
+</form>
+
+<script id="requestSubmit_fires_submit_event">
+{
+  const form = $('#test_form2');
+  let submitFired = false;
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    submitFired = true;
+  });
+
+  form.requestSubmit();
+
+  testing.expectEqual(true, submitFired);
+}
+</script>
+
+<!-- Test: requestSubmit() with preventDefault stops navigation -->
+<form id="test_form3" action="/should-not-navigate3" method="get">
+  <input name="q" value="test3">
+</form>
+
+<script id="requestSubmit_respects_preventDefault">
+{
+  const form = $('#test_form3');
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+  });
+
+  form.requestSubmit();
+
+  // Form submission was prevented, so no navigation should be scheduled
+  testing.expectEqual(true, true);
+}
+</script>
+
+<!-- Test: requestSubmit() with non-submit-button submitter throws TypeError -->
+<form id="test_form_rs1" action="/should-not-navigate4" method="get">
+  <input id="rs1_text" type="text" name="q" value="test">
+  <input id="rs1_submit" type="submit" value="Go">
+  <input id="rs1_image" type="image" src="x.png">
+  <button id="rs1_btn_submit" type="submit">Submit</button>
+  <button id="rs1_btn_reset" type="reset">Reset</button>
+  <button id="rs1_btn_button" type="button">Button</button>
+</form>
+
+<script id="requestSubmit_rejects_non_submit_button">
+{
+  const form = $('#test_form_rs1');
+  form.addEventListener('submit', (e) => e.preventDefault());
+
+  // A text input is not a submit button — should throw TypeError
+  testing.expectError('TypeError', () => {
+    form.requestSubmit($('#rs1_text'));
+  });
+
+  // A reset button is not a submit button — should throw TypeError
+  testing.expectError('TypeError', () => {
+    form.requestSubmit($('#rs1_btn_reset'));
+  });
+
+  // A <button type="button"> is not a submit button — should throw TypeError
+  testing.expectError('TypeError', () => {
+    form.requestSubmit($('#rs1_btn_button'));
+  });
+
+  // A <div> is not a submit button — should throw TypeError
+  const div = document.createElement('div');
+  form.appendChild(div);
+  testing.expectError('TypeError', () => {
+    form.requestSubmit(div);
+  });
+}
+</script>
+
+<!-- Test: requestSubmit() accepts valid submit buttons -->
+<script id="requestSubmit_accepts_submit_buttons">
+{
+  const form = $('#test_form_rs1');
+  let submitCount = 0;
+  form.addEventListener('submit', (e) => { e.preventDefault(); submitCount++; });
+
+  // <input type="submit"> is a valid submitter
+  form.requestSubmit($('#rs1_submit'));
+  testing.expectEqual(1, submitCount);
+
+  // <input type="image"> is a valid submitter
+  form.requestSubmit($('#rs1_image'));
+  testing.expectEqual(2, submitCount);
+
+  // <button type="submit"> is a valid submitter
+  form.requestSubmit($('#rs1_btn_submit'));
+  testing.expectEqual(3, submitCount);
+}
+</script>
+
+<!-- Test: requestSubmit() with submitter not owned by form throws NotFoundError -->
+<form id="test_form_rs2" action="/should-not-navigate5" method="get">
+  <input type="text" name="q" value="test">
+</form>
+<form id="test_form_rs3">
+  <input id="rs3_submit" type="submit" value="Other Submit">
+</form>
+
+<script id="requestSubmit_rejects_wrong_form_submitter">
+{
+  const form = $('#test_form_rs2');
+
+  // Submit button belongs to a different form — should throw NotFoundError
+  testing.expectError('NotFoundError', () => {
+    form.requestSubmit($('#rs3_submit'));
+  });
+}
+</script>
+
+<!-- Test: requestSubmit(submitter) sets SubmitEvent.submitter -->
+<form id="test_form_submitter" action="/should-not-navigate6" method="get">
+  <button id="submitter_btn" type="submit">Save</button>
+</form>
+
+<script id="requestSubmit_sets_submitter">
+{
+  const form = $('#test_form_submitter');
+  const btn = $('#submitter_btn');
+  let capturedSubmitter = undefined;
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    capturedSubmitter = e.submitter;
+  });
+
+  form.requestSubmit(btn);
+  testing.expectEqual(btn, capturedSubmitter);
+}
+</script>
+
+<!-- Test: requestSubmit() without submitter sets submitter to the form element -->
+<form id="test_form_submitter2" action="/should-not-navigate7" method="get">
+  <input type="text" name="q" value="test">
+</form>
+
+<script id="requestSubmit_default_submitter_is_form">
+{
+  const form = $('#test_form_submitter2');
+  let capturedSubmitter = undefined;
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    capturedSubmitter = e.submitter;
+  });
+
+  form.requestSubmit();
+  testing.expectEqual(form, capturedSubmitter);
+}
+</script>