normalize html title whitespace

Rework HTMLAllCollection

.github/actions/install/action.yml

@@ -5,7 +5,7 @@ inputs:
   zig:
     description: 'Zig version to install'
     required: false
-    default: '0.13.0'
+    default: '0.14.0'
   arch:
     description: 'CPU arch used to select the v8 lib'
     required: false
@@ -17,11 +17,11 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.1.11'
+    default: 'v0.1.23'
   v8:
     description: 'v8 version to install'
     required: false
-    default: '11.1.134'
+    default: '13.6.233.8'
   cache-dir:
     description: 'cache dir to use'
     required: false
@@ -59,11 +59,11 @@ runs:
     - name: install v8
       shell: bash
       run: |
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{inputs.arch}}-${{inputs.os}}/debug
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{inputs.arch}}-${{inputs.os}}/debug/libc_v8.a
+        mkdir -p v8/out/debug/obj/zig/
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/debug/obj/zig/libc_v8.a
 
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{inputs.arch}}-${{inputs.os}}/release
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{inputs.arch}}-${{inputs.os}}/release/libc_v8.a
+        mkdir -p v8/out/release/obj/zig/
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/release/obj/zig/libc_v8.a
 
     - name: libiconv
       shell: bash

.github/workflows/build.yml

@@ -17,6 +17,7 @@ jobs:
       OS: linux
 
     runs-on: ubuntu-22.04
+    timeout-minutes: 15
 
     steps:
       - uses: actions/checkout@v4
@@ -26,9 +27,45 @@ jobs:
           submodules: recursive
 
       - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
 
       - name: zig build
-        run: zig build --release=safe -Doptimize=ReleaseSafe -Dengine=v8 -Dcpu=x86_64
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly
+
+  build-linux-aarch64:
+    env:
+      ARCH: aarch64
+      OS: linux
+
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -46,6 +83,7 @@ jobs:
       OS: macos
 
     runs-on: macos-latest
+    timeout-minutes: 15
 
     steps:
       - uses: actions/checkout@v4
@@ -60,7 +98,40 @@ jobs:
           arch: ${{env.ARCH}}
 
       - name: zig build
-        run: zig build --release=safe -Doptimize=ReleaseSafe -Dengine=v8
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly
+
+  build-macos-x86_64:
+    env:
+      ARCH: x86_64
+      OS: macos
+
+    runs-on: macos-13
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}

.github/workflows/cla.yml

@@ -14,6 +14,8 @@ permissions:
 jobs:
   CLAAssistant:
     runs-on: ubuntu-latest
+    timeout-minutes: 5
+
     steps:
       - name: "CLA Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
@@ -26,7 +28,7 @@ jobs:
           path-to-document: 'https://github.com/lightpanda-io/browser/blob/main/CLA.md'
           # branch should not be protected
           branch: 'main'
-          allowlist: krichprollsch,francisbouvier,katie-lpd
+          allowlist: krichprollsch,francisbouvier,katie-lpd,sjorsdonkers,bornlex
 
           remote-organization-name: lightpanda-io
           remote-repository-name: cla

.github/workflows/e2e-test.yml

@@ -0,0 +1,137 @@
+name: e2e-test
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "build.zig"
+      - "src/**/*.zig"
+      - "src/*.zig"
+      - "vendor/zig-js-runtime"
+      - ".github/**"
+      - "vendor/**"
+  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"
+      - "vendor/**"
+      - ".github/**"
+      - "vendor/**"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  zig-build-release:
+    name: zig build release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+
+      - name: zig build release
+        run: zig build -Doptimize=ReleaseSafe
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  puppeteer-perf:
+    name: puppeteer-perf
+    needs: zig-build-release
+
+    env:
+      MAX_MEMORY: 28000
+      MAX_AVG_DURATION: 24
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run puppeteer
+        run: |
+          python3 -m http.server 1234 -d ./public & echo $! > PYTHON.pid
+          ./lightpanda serve --gc_hints & echo $! > LPD.pid
+          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` `cat PYTHON.pid`
+
+      - name: puppeteer result
+        run: cat puppeteer.out
+
+      - name: memory regression
+        run: |
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "Peak resident set size: $LPD_VmHWM"
+          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+
+      - name: duration regression
+        run: |
+          export PUPPETEER_AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          echo "puppeteer avg duration: $PUPPETEER_AVG_DURATION"
+          test "$PUPPETEER_AVG_DURATION" -le "$MAX_AVG_DURATION"
+
+  demo-scripts:
+    name: demo-scripts
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run end to end tests
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          go run runner/main.go --verbose
+          kill `cat LPD.pid`

.github/workflows/wpt.yml

@@ -7,44 +7,18 @@ env:
   AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
 
 on:
-  push:
-    branches:
-      - main
-    paths:
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
-  pull_request:
+  schedule:
+    - cron: "23 2 * * *"
 
-    # 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"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
   wpt:
-    name: web platform tests
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
+    name: web platform tests json output
 
     runs-on: ubuntu-latest
+    timeout-minutes: 90
 
     steps:
       - uses: actions/checkout@v4
@@ -55,15 +29,8 @@ jobs:
 
       - uses: ./.github/actions/install
 
-      - run: zig build wpt -Dengine=v8 -- --safe --summary
-
-        # For now WPT tests doesn't pass at all.
-        # We accept then to continue the job on failure.
-        # TODO remove the continue-on-error when tests will pass.
-        continue-on-error: true
-
       - name: json output
-        run: zig build wpt -Dengine=v8 -- --safe --json > wpt.json
+        run: zig build wpt -- --json > wpt.json
 
       - name: write commit
         run: |
@@ -82,10 +49,9 @@ jobs:
     name: perf-fmt
     needs: wpt
 
-    # Don't execute on PR
-    if: github.event_name != 'pull_request'
-
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:

.github/workflows/zig-fmt.yml

@@ -1,7 +1,7 @@
 name: zig-fmt
 
 env:
-  ZIG_VERSION: 0.13.0
+  ZIG_VERSION: 0.14.0
 
 on:
   pull_request:
@@ -29,6 +29,7 @@ jobs:
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     steps:
       - uses: mlugg/setup-zig@v1

.github/workflows/zig-test.yml

@@ -56,7 +56,7 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: zig build debug
-        run: zig build -Dengine=v8
+        run: zig build
 
       - name: upload artifact
         uses: actions/upload-artifact@v4
@@ -66,28 +66,28 @@ jobs:
             zig-out/bin/lightpanda
           retention-days: 1
 
-  zig-build-release:
-    name: zig build release
+  browser-fetch:
+    name: browser fetch
+    needs: zig-build-dev
 
-    # Don't run the CI on PR
-    if: github.event_name != 'pull_request'
+    # Don't run the CI with draft PR.
+    if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - name: download artifact
+        uses: actions/download-artifact@v4
         with:
-          fetch-depth: 0
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
+          name: lightpanda-build-dev
 
-      - uses: ./.github/actions/install
+      - run: chmod a+x ./lightpanda
 
-      - name: zig build release
-        run: zig build -Doptimize=ReleaseSafe -Dengine=v8
+      - run: ./lightpanda fetch https://httpbin.io/xhr/get
 
   zig-test:
     name: zig test
+    timeout-minutes: 15
 
     # Don't run the CI with draft PR.
     if: github.event.pull_request.draft == false
@@ -104,7 +104,7 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: zig build test
-        run: zig build test -Dengine=v8 -- --json > bench.json
+        run: zig build test -- --json > bench.json
 
       - name: write commit
         run: |
@@ -127,6 +127,8 @@ jobs:
     if: github.event_name != 'pull_request'
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:
@@ -141,30 +143,3 @@ jobs:
 
       - name: format and send json result
         run: /perf-fmt bench-browser ${{ github.sha }} bench.json
-
-  demo-puppeteer:
-    name: demo-puppeteer
-    needs: zig-build-dev
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          repository: 'lightpanda-io/demo'
-          fetch-depth: 0
-
-      - run: npm install
-
-      - name: download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: lightpanda-build-dev
-
-      - run: chmod a+x ./lightpanda
-
-      - name: run puppeteer
-        run: |
-          python3 -m http.server 1234 -d ./public &
-          ./lightpanda &
-          RUNS=2 npm run bench-puppeteer-cdp

.gitignore

@@ -3,3 +3,5 @@ zig-cache
 zig-out
 /vendor/netsurf/out
 /vendor/libiconv/
+lightpanda.id
+/v8/

.gitmodules

@@ -1,6 +1,3 @@
-[submodule "vendor/zig-js-runtime"]
-	path = vendor/zig-js-runtime
-	url = https://github.com/lightpanda-io/zig-js-runtime.git/
 [submodule "vendor/netsurf/libwapcaplet"]
 	path = vendor/netsurf/libwapcaplet
 	url = https://github.com/lightpanda-io/libwapcaplet.git/
@@ -22,9 +19,3 @@
 [submodule "vendor/mimalloc"]
 	path = vendor/mimalloc
 	url = https://github.com/microsoft/mimalloc.git/
-[submodule "vendor/tls.zig"]
-	path = vendor/tls.zig
-	url = https://github.com/ianic/tls.zig.git/
-[submodule "vendor/zig-async-io"]
-	path = vendor/zig-async-io
-	url = https://github.com/lightpanda-io/zig-async-io.git/

Dockerfile

@@ -1,11 +1,11 @@
-FROM ubuntu:22.04
+FROM ubuntu:24.04
 
-ARG ZIG=0.13.0
+ARG MINISIG=0.12
+ARG ZIG=0.14.0
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
-ARG OS=linux
 ARG ARCH=x86_64
 ARG V8=11.1.134
-ARG ZIG_V8=v0.1.11
+ARG ZIG_V8=v0.1.23
 
 RUN apt-get update -yq && \
     apt-get install -yq xz-utils \
@@ -16,25 +16,25 @@ RUN apt-get update -yq && \
         curl git
 
 # install minisig
-RUN curl -L -O https://github.com/jedisct1/minisign/releases/download/0.11/minisign-0.11-linux.tar.gz && \
-    tar xvzf minisign-0.11-linux.tar.gz
+RUN curl --fail -L -O https://github.com/jedisct1/minisign/releases/download/${MINISIG}/minisign-${MINISIG}-linux.tar.gz && \
+    tar xvzf minisign-${MINISIG}-linux.tar.gz
 
 # install zig
-RUN curl -O https://ziglang.org/download/${ZIG}/zig-linux-x86_64-${ZIG}.tar.xz && \
-    curl -O https://ziglang.org/download/${ZIG}/zig-linux-x86_64-${ZIG}.tar.xz.minisig
+RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-linux-${ARCH}-${ZIG}.tar.xz
+RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-linux-${ARCH}-${ZIG}.tar.xz.minisig
 
-RUN minisign-linux/x86_64/minisign -Vm zig-linux-x86_64-${ZIG}.tar.xz -P ${ZIG_MINISIG}
+RUN minisign-linux/${ARCH}/minisign -Vm zig-linux-${ARCH}-${ZIG}.tar.xz -P ${ZIG_MINISIG}
 
 # clean minisg
 RUN rm -fr minisign-0.11-linux.tar.gz minisign-linux
 
 # install zig
-RUN tar xvf zig-linux-x86_64-${ZIG}.tar.xz && \
-    mv zig-linux-x86_64-${ZIG} /usr/local/lib && \
-    ln -s /usr/local/lib/zig-linux-x86_64-${ZIG}/zig /usr/local/bin/zig
+RUN tar xvf zig-linux-${ARCH}-${ZIG}.tar.xz && \
+    mv zig-linux-${ARCH}-${ZIG} /usr/local/lib && \
+    ln -s /usr/local/lib/zig-linux-${ARCH}-${ZIG}/zig /usr/local/bin/zig
 
 # clean up zig install
-RUN rm -fr zig-linux-x86_64-${ZIG}.tar.xz zig-linux-x86_64-${ZIG}.tar.xz.minisig
+RUN rm -fr zig-linux-${ARCH}-${ZIG}.tar.xz zig-linux-${ARCH}-${ZIG}.tar.xz.minisig
 
 # force use of http instead of ssh with github
 RUN cat <<EOF > /root/.gitconfig
@@ -51,23 +51,19 @@ WORKDIR /browser
 RUN git submodule init && \
     git submodule update --recursive
 
-RUN cd vendor/zig-js-runtime && \
-    git submodule init && \
-    git submodule update --recursive
-
 RUN make install-libiconv && \
     make install-netsurf && \
     make install-mimalloc
 
 # download and install v8
-RUN curl -L -o libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${ZIG_V8}/libc_v8_${V8}_${OS}_${ARCH}.a && \
-    mkdir -p vendor/zig-js-runtime/vendor/v8/${ARCH}-${OS}/release && \
-    mv libc_v8.a vendor/zig-js-runtime/vendor/v8/${ARCH}-${OS}/release/libc_v8.a
+RUN curl --fail -L -o libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${ZIG_V8}/libc_v8_${V8}_linux_${ARCH}.a && \
+    mkdir -p v8/build/${ARCH}-linux/release/ninja/obj/zig/ && \
+    mv libc_v8.a v8/build/${ARCH}-linux/release/ninja/obj/zig/libc_v8.a
 
 # build release
 RUN make build
 
-FROM ubuntu:22.04
+FROM ubuntu:24.04
 
 # copy ca certificates
 COPY --from=0 /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt
@@ -76,4 +72,4 @@ COPY --from=0 /browser/zig-out/bin/lightpanda /bin/lightpanda
 
 EXPOSE 9222/tcp
 
-CMD ["/bin/lightpanda", "--host", "0.0.0.0", "--port", "9222"]
+CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222"]

LICENSING.md

@@ -10,7 +10,6 @@ The default license for this project is [AGPL-3.0-only](LICENSE).
 The following files are licensed under MIT:
 
 ```
-src/http/Client.zig
 src/polyfill/fetch.js
 ```
 

Makefile

@@ -3,7 +3,7 @@
 
 ZIG := zig
 BC := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
-# option test filter make unittest F="server"
+# option test filter make test F="server"
 F=
 
 # OS and ARCH
@@ -11,6 +11,9 @@ kernel = $(shell uname -ms)
 ifeq ($(kernel), Darwin arm64)
 	OS := macos
 	ARCH := aarch64
+else ifeq ($(kernel), Darwin x86_64)
+	OS := macos
+	ARCH := x86_64
 else ifeq ($(kernel), Linux aarch64)
 	OS := linux
 	ARCH := aarch64
@@ -44,7 +47,8 @@ help:
 
 # $(ZIG) commands
 # ------------
-.PHONY: build build-dev run run-release shell test bench download-zig wpt unittest
+.PHONY: build build-dev run run-release shell test bench download-zig wpt data get-v8 build-v8 build-v8-dev
+.PHONY: end2end
 
 zig_version = $(shell grep 'recommended_zig_version = "' "vendor/zig-js-runtime/build.zig" | cut -d'"' -f2)
 
@@ -59,13 +63,13 @@ download-zig:
 ## Build in release-safe mode
 build:
 	@printf "\e[36mBuilding (release safe)...\e[0m\n"
-	@$(ZIG) build -Doptimize=ReleaseSafe -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	$(ZIG) build -Doptimize=ReleaseSafe -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 	@printf "\e[33mBuild OK\e[0m\n"
 
 ## Build in debug mode
 build-dev:
 	@printf "\e[36mBuilding (debug)...\e[0m\n"
-	@$(ZIG) build -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 	@printf "\e[33mBuild OK\e[0m\n"
 
 ## Run the server in debug mode
@@ -76,39 +80,52 @@ run: build
 ## Run a JS shell in debug mode
 shell:
 	@printf "\e[36mBuilding shell...\e[0m\n"
-	@$(ZIG) build shell -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build shell || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 ## Run WPT tests
 wpt:
 	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 wpt-summary:
 	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 ## Test
 test:
-	@printf "\e[36mTesting...\e[0m\n"
-	@$(ZIG) build test -Dengine=v8 || (printf "\e[33mTest ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mTest OK\e[0m\n"
+	@TEST_FILTER='${F}' $(ZIG) build test -freference-trace --summary all
 
-unittest:
-	@TEST_FILTER='${F}' $(ZIG) build unittest -freference-trace --summary all
+## Run demo/runner end to end tests
+end2end:
+	@test -d ../demo
+	cd ../demo && go run runner/main.go
+
+## v8
+get-v8:
+	@printf "\e[36mGetting v8 source...\e[0m\n"
+	@$(ZIG) build get-v8
+
+build-v8-dev:
+	@printf "\e[36mBuilding v8 (dev)...\e[0m\n"
+	@$(ZIG) build build-v8
+
+build-v8:
+	@printf "\e[36mBuilding v8...\e[0m\n"
+	@$(ZIG) build -Doptimize=ReleaseSafe build-v8
 
 # Install and build required dependencies commands
 # ------------
 .PHONY: install-submodule
-.PHONY: install-zig-js-runtime install-zig-js-runtime-dev install-libiconv
+.PHONY: install-libiconv
 .PHONY: _install-netsurf install-netsurf clean-netsurf test-netsurf install-netsurf-dev
 .PHONY: install-mimalloc install-mimalloc-dev clean-mimalloc
 .PHONY: install-dev install
 
 ## Install and build dependencies for release
-install: install-submodule install-zig-js-runtime install-libiconv install-netsurf install-mimalloc
+install: install-submodule install-libiconv install-netsurf install-mimalloc
 
 ## Install and build dependencies for dev
-install-dev: install-submodule install-zig-js-runtime-dev install-libiconv install-netsurf-dev install-mimalloc-dev
+install-dev: install-submodule install-libiconv install-netsurf-dev install-mimalloc-dev
 
 install-netsurf-dev: _install-netsurf
 install-netsurf-dev: OPTCFLAGS := -O0 -g -DNDEBUG
@@ -144,7 +161,7 @@ _install-netsurf: clean-netsurf
 	BUILDDIR=$(BC_NS)/build/libdom make install && \
 	printf "\e[33mRunning libdom example...\e[0m\n" && \
 	cd examples && \
-	zig cc \
+	$(ZIG) cc \
 	-I$(ICONV)/include \
 	-I$(BC_NS)/include \
 	-L$(ICONV)/lib \
@@ -191,13 +208,8 @@ ifneq ("$(wildcard vendor/libiconv/libiconv-1.17/Makefile)","")
 	make clean
 endif
 
-install-zig-js-runtime-dev:
-	@cd vendor/zig-js-runtime && \
-	make install-dev
-
-install-zig-js-runtime:
-	@cd vendor/zig-js-runtime && \
-	make install
+data:
+	cd src/data && go run public_suffix_list_gen.go > public_suffix_list.zig
 
 .PHONY: _build_mimalloc
 

README.md

@@ -8,33 +8,33 @@
 
 <div align="center">
 
-[![Commit Activity](https://img.shields.io/github/commit-activity/m/lightpanda-io/browser)](https://github.com/lightpanda-io/browser/commits/main)
 [![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)
 
 </div>
 
-<div align="center">
-  
-<a href="https://trendshift.io/repositories/12815" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12815" alt="lightpanda-io%2Fbrowser | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
-
-</div>
-
 Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
 - Support of Web APIs (partial, WIP)
 - Compatible with Playwright, Puppeteer through CDP (WIP)
 
-Fast web automation for AI agents, LLM training, scraping and testing with minimal memory footprint:
+Fast web automation for AI agents, LLM training, scraping and testing:
 
 - Ultra-low memory footprint (9x less than Chrome)
-- Exceptionally fast execution (11x faster than Chrome) & instant startup
+- Exceptionally fast execution (11x faster than Chrome)
+- Instant startup
 
-<img width=500px src="https://cdn.lightpanda.io/assets/images/benchmark_2024-12-04.png">
+[<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>
 
-See [benchmark details](https://github.com/lightpanda-io/demo).
+_Puppeteer requesting 100 pages from a local website on a AWS EC2 m5.large instance.
+See [benchmark details](https://github.com/lightpanda-io/demo)._
 
 ## Quick start
 
@@ -44,29 +44,29 @@ You can download the last binary from the [nightly
 builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
 Linux x86_64 and MacOS aarch64.
 
+*For Linux*
 ```console
-# Download the binary
-$ wget https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-x86_64-linux
-$ chmod a+x ./lightpanda-x86_64-linux
-$ ./lightpanda-x86_64-linux -h
-usage: ./lightpanda-x86_64-linux [options] [URL]
-
-  start Lightpanda browser
-
-  * if an url is provided the browser will fetch the page and exit
-  * otherwhise the browser starts a CDP server
-
-  -h, --help      Print this help message and exit.
-  --host          Host of the CDP server (default "127.0.0.1")
-  --port          Port of the CDP server (default "9222")
-  --timeout       Timeout for incoming connections of the CDP server (in seconds, default "3")
-  --dump          Dump document in stdout (fetch mode only)
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-x86_64-linux && \
+chmod a+x ./lightpanda
 ```
 
-### Dump an URL
+*For MacOS*
+```console
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-aarch64-macos && \
+chmod a+x ./lightpanda
+```
+
+*For Windows + WSL2*
+
+The Lightpanda browser is compatible to run on windows inside WSL. Follow the Linux instruction for installation from a WSL terminal.
+It is recommended to install clients like Puppeteer on the Windows host.
+
+### Dump a URL
 
 ```console
-$ ./lightpanda-x86_64-linux --dump https://lightpanda.io
+./lightpanda fetch --dump https://lightpanda.io
+```
+```console
 info(browser): GET https://lightpanda.io/ http.Status.ok
 info(browser): fetch script https://api.website.lightpanda.io/js/script.js: http.Status.ok
 info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeError: Cannot read properties of undefined (reading 'pushState')
@@ -76,7 +76,9 @@ info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeE
 ### Start a CDP server
 
 ```console
-$ ./lightpanda-x86_64-linux --host 127.0.0.1 --port 9222
+./lightpanda serve --host 127.0.0.1 --port 9222
+```
+```console
 info(websocket): starting blocking worker to listen on 127.0.0.1:9222
 info(server): accepting new conn...
 ```
@@ -98,17 +100,52 @@ const browser = await puppeteer.connect({
 const context = await browser.createBrowserContext();
 const page = await context.newPage();
 
+// Dump all the links from the page.
 await page.goto('https://wikipedia.com/');
 
+const links = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('a')).map(row => {
+    return row.getAttribute('href');
+  });
+});
+
+console.log(links);
+
 await page.close();
 await context.close();
+await browser.disconnect();
 ```
 
+### Telemetry
+By default, Lightpanda collects and sends usage telemetry. This can be disabled by setting an environment variable `LIGHTPANDA_DISABLE_TELEMETRY=true`. You can read Lightpanda's privacy policy at: [https://lightpanda.io/privacy-policy](https://lightpanda.io/privacy-policy).
+
+## Status
+
+Lightpanda is still a work in progress and is currently at a Beta stage.
+
+:warning: You should expect most websites to fail or crash.
+
+Here are the key features we have implemented:
+
+- [x] HTTP loader
+- [x] HTML parser and DOM tree (based on Netsurf libs)
+- [x] Javascript support (v8)
+- [x] Basic DOM APIs
+- [x] Ajax
+  - [x] XHR API
+  - [x] Fetch API
+- [x] DOM dump
+- [x] Basic CDP/websockets server
+
+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
 
-Lightpanda is written with [Zig](https://ziglang.org/) `0.13.0`. You have to
+Lightpanda is written with [Zig](https://ziglang.org/) `0.14.0`. You have to
 install it with the right version in order to build the project.
 
 Lightpanda also depends on
@@ -124,10 +161,15 @@ For Debian/Ubuntu based Linux:
 sudo apt install xz-utils \
     python3 ca-certificates git \
     pkg-config libglib2.0-dev \
-    gperf libexpat1-dev \
+    gperf libexpat1-dev unzip \
     cmake clang
 ```
 
+For systems with [Nix](https://nixos.org/download/), you can use the devShell:
+```
+nix develop
+```
+
 For MacOS, you only need cmake:
 
 ```
@@ -152,6 +194,14 @@ To init or update the submodules in the `vendor/` directory:
 make install-submodule
 ```
 
+**iconv**
+
+libiconv is an internationalization library used by Netsurf.
+
+```
+make install-libiconv
+```
+
 **Netsurf libs**
 
 Netsurf libs are used for HTML parsing and DOM tree generation.
@@ -176,17 +226,21 @@ Note: when Mimalloc is built in dev mode, you can dump memory stats with the
 env var `MIMALLOC_SHOW_STATS=1`. See
 [https://microsoft.github.io/mimalloc/environment.html](https://microsoft.github.io/mimalloc/environment.html).
 
-**zig-js-runtime**
+**v8**
 
-Our own Zig/Javascript runtime, which includes the v8 Javascript engine.
-
-This build task is very long and cpu consuming, as you will build v8 from sources.
+First, get the tools necessary for building V8, as well as the V8 source code:
 
 ```
-make install-zig-js-runtime
+make get-v8
 ```
 
-For dev env, use `make install-zig-js-runtime-dev`.
+Next, build v8. This build task is very long and cpu consuming, as you will build v8 from sources.
+
+```
+make build-v8
+```
+
+For dev env, use `make build-v8-dev`.
 
 ## Test
 
@@ -194,6 +248,20 @@ For dev env, use `make install-zig-js-runtime-dev`.
 
 You can test Lightpanda by running `make test`.
 
+### End to end tests
+
+To run end to end tests, you need to clone the [demo
+repository](https://github.com/lightpanda-io/demo) into `../demo` dir.
+
+You have to install the [demo's node
+requirements](https://github.com/lightpanda-io/demo?tab=readme-ov-file#dependencies-1)
+
+You also need to install [Go](https://go.dev) > v1.24.
+
+```
+make end2end
+```
+
 ### Web Platform Tests
 
 Lightpanda is tested against the standardized [Web Platform
@@ -260,25 +328,3 @@ If we want both Javascript and performance in a true headless browser, we need t
 - Not based on Chromium, Blink or WebKit
 - Low-level system programming language (Zig) with optimisations in mind
 - Opinionated: without graphical rendering
-
-## Status
-
-Lightpanda is still a work in progress and is currently at a Beta stage.
-
-:warning: You should expect most websites to fail or crash.
-
-Here are the key features we have implemented:
-
-- [x] HTTP loader
-- [x] HTML parser and DOM tree (based on Netsurf libs)
-- [x] Javascript support (v8)
-- [x] Basic DOM APIs
-- [x] Ajax
-  - [x] XHR API
-  - [x] Fetch API
-- [x] DOM dump
-- [x] Basic CDP/websockets server
-
-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.zig

@@ -17,16 +17,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-
 const builtin = @import("builtin");
 
-const jsruntime_path = "vendor/zig-js-runtime/";
-const jsruntime = @import("vendor/zig-js-runtime/build.zig");
-const jsruntime_pkgs = jsruntime.packages(jsruntime_path);
-
 /// Do not rename this constant. It is scanned by some scripts to determine
 /// which zig version to install.
-const recommended_zig_version = jsruntime.recommended_zig_version;
+const recommended_zig_version = "0.14.0";
 
 pub fn build(b: *std.Build) !void {
     switch (comptime builtin.zig_version.order(std.SemanticVersion.parse(recommended_zig_version) catch unreachable)) {
@@ -42,189 +37,186 @@ pub fn build(b: *std.Build) !void {
         },
     }
 
-    const target = b.standardTargetOptions(.{});
-    const mode = b.standardOptimizeOption(.{});
-
-    const options = jsruntime.buildOptions(b);
-
-    // browser
-    // -------
-
-    // compile and install
-    const exe = b.addExecutable(.{
-        .name = "lightpanda",
-        .root_source_file = b.path("src/main.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, exe, options);
-    b.installArtifact(exe);
-
-    // run
-    const run_cmd = b.addRunArtifact(exe);
-    if (b.args) |args| {
-        run_cmd.addArgs(args);
-    }
-
-    // step
-    const run_step = b.step("run", "Run the app");
-    run_step.dependOn(&run_cmd.step);
-
-    // shell
-    // -----
-
-    // compile and install
-    const shell = b.addExecutable(.{
-        .name = "lightpanda-shell",
-        .root_source_file = b.path("src/main_shell.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, shell, options);
-    try jsruntime_pkgs.add_shell(shell);
-
-    // run
-    const shell_cmd = b.addRunArtifact(shell);
-    if (b.args) |args| {
-        shell_cmd.addArgs(args);
-    }
-
-    // step
-    const shell_step = b.step("shell", "Run JS shell");
-    shell_step.dependOn(&shell_cmd.step);
-
-    // test
-    // ----
-
-    // compile
-    const tests = b.addTest(.{
-        .root_source_file = b.path("src/main_tests.zig"),
-        .test_runner = b.path("src/main_tests.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, tests, options);
-
-    // add jsruntime pretty deps
-    tests.root_module.addAnonymousImport("pretty", .{
-        .root_source_file = b.path("vendor/zig-js-runtime/src/pretty.zig"),
-    });
-
-    const run_tests = b.addRunArtifact(tests);
-    if (b.args) |args| {
-        run_tests.addArgs(args);
-    }
-
-    // step
-    const test_step = b.step("test", "Run unit tests");
-    test_step.dependOn(&run_tests.step);
-
-    // unittest
-    // ----
-
-    // compile
-    const unit_tests = b.addTest(.{
-        .root_source_file = b.path("src/unit_tests.zig"),
-        .test_runner = b.path("src/unit_tests.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, unit_tests, options);
-
-    const run_unit_tests = b.addRunArtifact(unit_tests);
-    if (b.args) |args| {
-        run_unit_tests.addArgs(args);
-    }
-
-    // step
-    const unit_test_step = b.step("unittest", "Run unit tests");
-    unit_test_step.dependOn(&run_unit_tests.step);
-
-    // wpt
-    // -----
-
-    // compile and install
-    const wpt = b.addExecutable(.{
-        .name = "lightpanda-wpt",
-        .root_source_file = b.path("src/main_wpt.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, wpt, options);
-
-    // run
-    const wpt_cmd = b.addRunArtifact(wpt);
-    if (b.args) |args| {
-        wpt_cmd.addArgs(args);
-    }
-    // step
-    const wpt_step = b.step("wpt", "WPT tests");
-    wpt_step.dependOn(&wpt_cmd.step);
-}
-
-fn common(
-    b: *std.Build,
-    step: *std.Build.Step.Compile,
-    options: jsruntime.Options,
-) !void {
-    const target = step.root_module.resolved_target.?;
-    const jsruntimemod = try jsruntime_pkgs.module(
-        b,
-        options,
-        step.root_module.optimize.?,
-        target,
+    var opts = b.addOptions();
+    opts.addOption(
+        []const u8,
+        "git_commit",
+        b.option([]const u8, "git_commit", "Current git commit") orelse "dev",
     );
-    step.root_module.addImport("jsruntime", jsruntimemod);
 
-    const netsurf = try moduleNetSurf(b, target);
-    netsurf.addImport("jsruntime", jsruntimemod);
-    step.root_module.addImport("netsurf", netsurf);
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});
 
-    const asyncio = b.addModule("asyncio", .{
-        .root_source_file = b.path("vendor/zig-async-io/src/lib.zig"),
-    });
-    step.root_module.addImport("asyncio", asyncio);
+    {
+        // browser
+        // -------
 
-    const tlsmod = b.addModule("tls", .{
-        .root_source_file = b.path("vendor/tls.zig/src/main.zig"),
-    });
-    step.root_module.addImport("tls", tlsmod);
+        // compile and install
+        const exe = b.addExecutable(.{
+            .name = "lightpanda",
+            .target = target,
+            .optimize = optimize,
+            .root_source_file = b.path("src/main.zig"),
+        });
+
+        try common(b, opts, exe);
+        b.installArtifact(exe);
+
+        // run
+        const run_cmd = b.addRunArtifact(exe);
+        if (b.args) |args| {
+            run_cmd.addArgs(args);
+        }
+
+        // step
+        const run_step = b.step("run", "Run the app");
+        run_step.dependOn(&run_cmd.step);
+    }
+
+    {
+        // get v8
+        // -------
+        const v8 = b.dependency("v8", .{ .target = target, .optimize = optimize });
+        const get_v8 = b.addRunArtifact(v8.artifact("get-v8"));
+        const get_step = b.step("get-v8", "Get v8");
+        get_step.dependOn(&get_v8.step);
+    }
+
+    {
+        // build v8
+        // -------
+        const v8 = b.dependency("v8", .{ .target = target, .optimize = optimize });
+        const build_v8 = b.addRunArtifact(v8.artifact("build-v8"));
+        const build_step = b.step("build-v8", "Build v8");
+        build_step.dependOn(&build_v8.step);
+    }
+
+    {
+        // tests
+        // ----
+
+        // compile
+        const tests = b.addTest(.{
+            .root_source_file = b.path("src/main.zig"),
+            .test_runner = .{ .path = b.path("src/test_runner.zig"), .mode = .simple },
+            .target = target,
+            .optimize = optimize,
+        });
+        try common(b, opts, tests);
+
+        const run_tests = b.addRunArtifact(tests);
+        if (b.args) |args| {
+            run_tests.addArgs(args);
+        }
+
+        // step
+        const tests_step = b.step("test", "Run unit tests");
+        tests_step.dependOn(&run_tests.step);
+    }
+
+    {
+        // wpt
+        // -----
+
+        // compile and install
+        const wpt = b.addExecutable(.{
+            .name = "lightpanda-wpt",
+            .root_source_file = b.path("src/main_wpt.zig"),
+            .target = target,
+            .optimize = optimize,
+        });
+        try common(b, opts, wpt);
+
+        // run
+        const wpt_cmd = b.addRunArtifact(wpt);
+        if (b.args) |args| {
+            wpt_cmd.addArgs(args);
+        }
+        // step
+        const wpt_step = b.step("wpt", "WPT tests");
+        wpt_step.dependOn(&wpt_cmd.step);
+    }
 }
 
-fn moduleNetSurf(b: *std.Build, target: std.Build.ResolvedTarget) !*std.Build.Module {
-    const mod = b.addModule("netsurf", .{
-        .root_source_file = b.path("src/netsurf/netsurf.zig"),
-        .target = target,
-    });
+fn common(b: *std.Build, opts: *std.Build.Step.Options, step: *std.Build.Step.Compile) !void {
+    const mod = step.root_module;
+    const target = mod.resolved_target.?;
+    const optimize = mod.optimize.?;
+    const dep_opts = .{ .target = target, .optimize = optimize };
 
+    try moduleNetSurf(b, step, target);
+    mod.addImport("tls", b.dependency("tls", dep_opts).module("tls"));
+    mod.addImport("tigerbeetle-io", b.dependency("tigerbeetle_io", .{}).module("tigerbeetle_io"));
+
+    {
+        // v8
+        const v8_opts = b.addOptions();
+        v8_opts.addOption(bool, "inspector_subtype", false);
+
+        const v8_mod = b.dependency("v8", dep_opts).module("v8");
+        v8_mod.addOptions("default_exports", v8_opts);
+        mod.addImport("v8", v8_mod);
+    }
+
+    const lib_path = try std.fmt.allocPrint(
+        mod.owner.allocator,
+        "v8/out/{s}/obj/zig/libc_v8.a",
+        .{if (mod.optimize.? == .Debug) "debug" else "release"},
+    );
+    mod.link_libcpp = true;
+    mod.addObjectFile(mod.owner.path(lib_path));
+
+    switch (target.result.os.tag) {
+        .macos => {
+            // v8 has a dependency, abseil-cpp, which, on Mac, uses CoreFoundation
+            mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
+            mod.linkFramework("CoreFoundation", .{});
+        },
+        else => {},
+    }
+
+    mod.addImport("build_info", opts.createModule());
+    mod.addObjectFile(mod.owner.path(lib_path));
+}
+
+fn moduleNetSurf(b: *std.Build, step: *std.Build.Step.Compile, target: std.Build.ResolvedTarget) !void {
     const os = target.result.os.tag;
     const arch = target.result.cpu.arch;
 
     // iconv
     const libiconv_lib_path = try std.fmt.allocPrint(
-        mod.owner.allocator,
+        b.allocator,
         "vendor/libiconv/out/{s}-{s}/lib/libiconv.a",
         .{ @tagName(os), @tagName(arch) },
     );
     const libiconv_include_path = try std.fmt.allocPrint(
-        mod.owner.allocator,
+        b.allocator,
         "vendor/libiconv/out/{s}-{s}/lib/libiconv.a",
         .{ @tagName(os), @tagName(arch) },
     );
-    mod.addObjectFile(b.path(libiconv_lib_path));
-    mod.addIncludePath(b.path(libiconv_include_path));
+    step.addObjectFile(b.path(libiconv_lib_path));
+    step.addIncludePath(b.path(libiconv_include_path));
 
-    // mimalloc
-    mod.addImport("mimalloc", (try moduleMimalloc(b, target)));
+    {
+        // mimalloc
+        const mimalloc = "vendor/mimalloc";
+        const lib_path = try std.fmt.allocPrint(
+            b.allocator,
+            mimalloc ++ "/out/{s}-{s}/lib/libmimalloc.a",
+            .{ @tagName(os), @tagName(arch) },
+        );
+        step.addObjectFile(b.path(lib_path));
+        step.addIncludePath(b.path(mimalloc ++ "/include"));
+    }
 
     // netsurf libs
     const ns = "vendor/netsurf";
     const ns_include_path = try std.fmt.allocPrint(
-        mod.owner.allocator,
+        b.allocator,
         ns ++ "/out/{s}-{s}/include",
         .{ @tagName(os), @tagName(arch) },
     );
-    mod.addIncludePath(b.path(ns_include_path));
+    step.addIncludePath(b.path(ns_include_path));
 
     const libs: [4][]const u8 = .{
         "libdom",
@@ -234,34 +226,11 @@ fn moduleNetSurf(b: *std.Build, target: std.Build.ResolvedTarget) !*std.Build.Mo
     };
     inline for (libs) |lib| {
         const ns_lib_path = try std.fmt.allocPrint(
-            mod.owner.allocator,
+            b.allocator,
             ns ++ "/out/{s}-{s}/lib/" ++ lib ++ ".a",
             .{ @tagName(os), @tagName(arch) },
         );
-        mod.addObjectFile(b.path(ns_lib_path));
-        mod.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
+        step.addObjectFile(b.path(ns_lib_path));
+        step.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
     }
-
-    return mod;
-}
-
-fn moduleMimalloc(b: *std.Build, target: std.Build.ResolvedTarget) !*std.Build.Module {
-    const mod = b.addModule("mimalloc", .{
-        .root_source_file = b.path("src/mimalloc/mimalloc.zig"),
-        .target = target,
-    });
-
-    const os = target.result.os.tag;
-    const arch = target.result.cpu.arch;
-
-    const mimalloc = "vendor/mimalloc";
-    const lib_path = try std.fmt.allocPrint(
-        mod.owner.allocator,
-        mimalloc ++ "/out/{s}-{s}/lib/libmimalloc.a",
-        .{ @tagName(os), @tagName(arch) },
-    );
-    mod.addObjectFile(b.path(lib_path));
-    mod.addIncludePath(b.path(mimalloc ++ "/include"));
-
-    return mod;
 }

build.zig.zon

@@ -0,0 +1,22 @@
+.{
+    .name = .browser,
+    .paths = .{""},
+    .version = "0.0.0",
+    .fingerprint = 0xda130f3af836cea0,
+    .dependencies = .{
+        .tls = .{
+            .url = "https://github.com/ianic/tls.zig/archive/b29a8b45fc59fc2d202769c4f54509bb9e17d0a2.tar.gz",
+            .hash = "tls-0.1.0-ER2e0uAxBQDm_TmSDdbiiyvAZoh4ejlDD4hW8Fl813xE",
+        },
+        .tigerbeetle_io = .{
+            .url = "https://github.com/lightpanda-io/tigerbeetle-io/archive/61d9652f1a957b7f4db723ea6aa0ce9635e840ce.tar.gz",
+            .hash = "tigerbeetle_io-0.0.0-ViLgxpyRBAB5BMfIcj3KMXfbJzwARs9uSl8aRy2OXULd",
+        },
+        .v8 = .{
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/6f1ee74a0e7002ea3568e337ab716c1e75c53769.tar.gz",
+            .hash = "v8-0.0.0-xddH6z2yAwCOPUGmy1IgXysI1yWt8ftd2Z3D5zp0I9tV",
+        },
+        //.v8 = .{ .path = "../zig-v8-fork" },
+        //.tigerbeetle_io = .{ .path = "../tigerbeetle-io" },
+    },
+}

flake.lock

@@ -0,0 +1,202 @@
+{
+  "nodes": {
+    "flake-compat": {
+      "flake": false,
+      "locked": {
+        "lastModified": 1733328505,
+        "narHash": "sha256-NeCCThCEP3eCl2l/+27kNNK7QrwZB1IJCrXfrbv5oqU=",
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "rev": "ff81ac966bb2cae68946d5ed5fc4994f96d0ffec",
+        "type": "github"
+      },
+      "original": {
+        "owner": "edolstra",
+        "repo": "flake-compat",
+        "type": "github"
+      }
+    },
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_2": {
+      "inputs": {
+        "systems": "systems_2"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "flake-utils_3": {
+      "inputs": {
+        "systems": "systems_3"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "iguana": {
+      "inputs": {
+        "flake-utils": "flake-utils_2",
+        "nixpkgs": [
+          "nixpkgs"
+        ],
+        "zigPkgs": "zigPkgs"
+      },
+      "locked": {
+        "lastModified": 1746539192,
+        "narHash": "sha256-32nN8JlRqNuCFfrDooyre+gDSnxZuCtK/qaHhRmGMhg=",
+        "owner": "mookums",
+        "repo": "iguana",
+        "rev": "5569f95694edf59803429400ff6cb1c7522da801",
+        "type": "github"
+      },
+      "original": {
+        "owner": "mookums",
+        "repo": "iguana",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1746397377,
+        "narHash": "sha256-5oLdRa3vWSRbuqPIFFmQBGGUqaYZBxX+GGtN9f/n4lU=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "ed30f8aba41605e3ab46421e3dcb4510ec560ff8",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1746481231,
+        "narHash": "sha256-U3VKPi5D2oLBFzaMI0jJLJp8J64ZLjz+EwodUS//QWc=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "c6aca34d2ca2ce9e20b722f54e684cda64b275c2",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "release-24.11",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "iguana": "iguana",
+        "nixpkgs": "nixpkgs_2"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_3": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "zigPkgs": {
+      "inputs": {
+        "flake-compat": "flake-compat",
+        "flake-utils": "flake-utils_3",
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1746475050,
+        "narHash": "sha256-KJC7BNY+NPCc1I+quGkWtoHXOMvFVEyer8Y0haOtTCA=",
+        "owner": "mookums",
+        "repo": "zig-overlay",
+        "rev": "dfa488aa462932e46f44fddf6677ff22f1244c22",
+        "type": "github"
+      },
+      "original": {
+        "owner": "mookums",
+        "repo": "zig-overlay",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,62 @@
+{
+  description = "headless browser designed for AI and automation";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/release-24.11";
+
+    iguana.url = "github:mookums/iguana";
+    iguana.inputs.nixpkgs.follows = "nixpkgs";
+
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs =
+    {
+      nixpkgs,
+      iguana,
+      flake-utils,
+      ...
+    }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        zigVersion = "0_14_0";
+        iguanaLib = iguana.lib.${system};
+
+        pkgs = import nixpkgs {
+          inherit system;
+          overlays = [
+            (iguanaLib.mkZigOverlay zigVersion)
+            (iguanaLib.mkZlsOverlay zigVersion)
+          ];
+        };
+
+        # This build pipeline is very unhappy without an FHS-compliant env.
+        fhs = pkgs.buildFHSUserEnv {
+          name = "fhs-shell";
+          targetPkgs =
+            pkgs: with pkgs; [
+              zig
+              zls
+              pkg-config
+              cmake
+              gperf
+              expat.dev
+              python3
+              glib.dev
+              glibc.dev
+              zlib
+              ninja
+              gn
+              gcc-unwrapped
+              binutils
+              clang
+              clang-tools
+            ];
+        };
+      in
+      {
+        devShells.default = fhs.env;
+      }
+    );
+}

src/apiweb.zig

@@ -1,47 +0,0 @@
-// Copyright (C) 2023-2024  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 generate = @import("generate.zig");
-
-const Console = @import("jsruntime").Console;
-
-const DOM = @import("dom/dom.zig");
-const HTML = @import("html/html.zig");
-const Events = @import("events/event.zig");
-const XHR = @import("xhr/xhr.zig");
-const Storage = @import("storage/storage.zig");
-const URL = @import("url/url.zig");
-const Iterators = @import("iterator/iterator.zig");
-const XMLSerializer = @import("xmlserializer/xmlserializer.zig");
-
-pub const HTMLDocument = @import("html/document.zig").HTMLDocument;
-
-// Interfaces
-pub const Interfaces = generate.Tuple(.{
-    Console,
-    DOM.Interfaces,
-    Events.Interfaces,
-    HTML.Interfaces,
-    XHR.Interfaces,
-    Storage.Interfaces,
-    URL.Interfaces,
-    Iterators.Interfaces,
-    XMLSerializer.Interfaces,
-}){};
-
-pub const UserContext = @import("user_context.zig").UserContext;

src/app.zig

@@ -0,0 +1,101 @@
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const Loop = @import("runtime/loop.zig").Loop;
+const HttpClient = @import("http/client.zig").Client;
+const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
+const Notification = @import("notification.zig").Notification;
+
+const log = std.log.scoped(.app);
+
+// Container for global state / objects that various parts of the system
+// might need.
+pub const App = struct {
+    loop: *Loop,
+    config: Config,
+    allocator: Allocator,
+    telemetry: Telemetry,
+    http_client: HttpClient,
+    app_dir_path: ?[]const u8,
+    notification: *Notification,
+
+    pub const RunMode = enum {
+        help,
+        fetch,
+        serve,
+        version,
+    };
+
+    pub const Config = struct {
+        run_mode: RunMode,
+        gc_hints: bool = false,
+        tls_verify_host: bool = true,
+        http_proxy: ?std.Uri = null,
+    };
+
+    pub fn init(allocator: Allocator, config: Config) !*App {
+        const app = try allocator.create(App);
+        errdefer allocator.destroy(app);
+
+        const loop = try allocator.create(Loop);
+        errdefer allocator.destroy(loop);
+
+        loop.* = try Loop.init(allocator);
+        errdefer loop.deinit();
+
+        const notification = try Notification.init(allocator, null);
+        errdefer notification.deinit();
+
+        const app_dir_path = getAndMakeAppDir(allocator);
+
+        app.* = .{
+            .loop = loop,
+            .allocator = allocator,
+            .telemetry = undefined,
+            .app_dir_path = app_dir_path,
+            .notification = notification,
+            .http_client = try HttpClient.init(allocator, 5, .{
+                .http_proxy = config.http_proxy,
+                .tls_verify_host = config.tls_verify_host,
+            }),
+            .config = config,
+        };
+        app.telemetry = Telemetry.init(app, config.run_mode);
+        try app.telemetry.register(app.notification);
+
+        return app;
+    }
+
+    pub fn deinit(self: *App) void {
+        const allocator = self.allocator;
+        if (self.app_dir_path) |app_dir_path| {
+            allocator.free(app_dir_path);
+        }
+        self.telemetry.deinit();
+        self.loop.deinit();
+        allocator.destroy(self.loop);
+        self.http_client.deinit();
+        self.notification.deinit();
+        allocator.destroy(self);
+    }
+};
+
+fn getAndMakeAppDir(allocator: Allocator) ?[]const u8 {
+    if (@import("builtin").is_test) {
+        return allocator.dupe(u8, "/tmp") catch unreachable;
+    }
+    const app_dir_path = std.fs.getAppDataDir(allocator, "lightpanda") catch |err| {
+        log.warn("failed to get lightpanda data dir: {}", .{err});
+        return null;
+    };
+
+    std.fs.cwd().makePath(app_dir_path) catch |err| switch (err) {
+        error.PathAlreadyExists => return app_dir_path,
+        else => {
+            allocator.free(app_dir_path);
+            log.warn("failed to create lightpanda data dir: {}", .{err});
+            return null;
+        },
+    };
+    return app_dir_path;
+}

src/browser/browser.zig

@@ -17,677 +17,86 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const builtin = @import("builtin");
 
-const Types = @import("root").Types;
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
 
-const parser = @import("netsurf");
-const Loader = @import("loader.zig").Loader;
-const Dump = @import("dump.zig");
-const Mime = @import("mime.zig").Mime;
+const Env = @import("env.zig").Env;
+const App = @import("../app.zig").App;
+const Session = @import("session.zig").Session;
+const Notification = @import("../notification.zig").Notification;
 
-const jsruntime = @import("jsruntime");
-const Loop = jsruntime.Loop;
-const Env = jsruntime.Env;
-const Module = jsruntime.Module;
-
-const apiweb = @import("../apiweb.zig");
-
-const Window = @import("../html/window.zig").Window;
-const Walker = @import("../dom/walker.zig").WalkerDepthFirst;
-
-const URL = @import("../url/url.zig").URL;
-const Location = @import("../html/location.zig").Location;
-
-const storage = @import("../storage/storage.zig");
-
-const FetchResult = @import("../http/Client.zig").Client.FetchResult;
-
-const UserContext = @import("../user_context.zig").UserContext;
-const HttpClient = @import("asyncio").Client;
-
-const polyfill = @import("../polyfill/polyfill.zig");
-
-const log = std.log.scoped(.browser);
-
-pub const user_agent = "Lightpanda/1.0";
+const http = @import("../http/client.zig");
 
 // Browser is an instance of the browser.
 // You can create multiple browser instances.
 // A browser contains only one session.
-// TODO allow multiple sessions per browser.
 pub const Browser = struct {
-    session: Session = undefined,
-    agent: []const u8 = user_agent,
+    env: *Env,
+    app: *App,
+    session: ?Session,
+    allocator: Allocator,
+    http_client: *http.Client,
+    page_arena: ArenaAllocator,
+    notification: *Notification,
 
-    const uri = "about:blank";
+    pub fn init(app: *App) !Browser {
+        const allocator = app.allocator;
 
-    pub fn init(self: *Browser, alloc: std.mem.Allocator, loop: *Loop, vm: jsruntime.VM) !void {
-        // We want to ensure the caller initialised a VM, but the browser
-        // doesn't use it directly...
-        _ = vm;
+        const env = try Env.init(allocator, .{});
+        errdefer env.deinit();
 
-        try Session.init(&self.session, alloc, loop, uri);
+        const notification = try Notification.init(allocator, app.notification);
+        errdefer notification.deinit();
+
+        return .{
+            .app = app,
+            .env = env,
+            .session = null,
+            .allocator = allocator,
+            .notification = notification,
+            .http_client = &app.http_client,
+            .page_arena = ArenaAllocator.init(allocator),
+        };
     }
 
     pub fn deinit(self: *Browser) void {
-        self.session.deinit();
-    }
-
-    pub fn newSession(
-        self: *Browser,
-        alloc: std.mem.Allocator,
-        loop: *jsruntime.Loop,
-    ) !void {
-        self.session.deinit();
-        try Session.init(&self.session, alloc, loop, uri);
-    }
-
-    pub fn currentPage(self: *Browser) ?*Page {
-        if (self.session.page == null) return null;
-
-        return &self.session.page.?;
-    }
-};
-
-// 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.
-pub const Session = struct {
-    // allocator used to init the arena.
-    alloc: std.mem.Allocator,
-
-    // The arena is used only to bound the js env init b/c it leaks memory.
-    // see https://github.com/lightpanda-io/jsruntime-lib/issues/181
-    //
-    // The arena is initialised with self.alloc allocator.
-    // all others Session deps use directly self.alloc and not the arena.
-    arena: std.heap.ArenaAllocator,
-
-    uri: []const u8,
-
-    // TODO handle proxy
-    loader: Loader,
-    env: Env = undefined,
-    inspector: ?jsruntime.Inspector = null,
-
-    window: Window,
-
-    // TODO move the shed to the browser?
-    storageShed: storage.Shed,
-    page: ?Page = null,
-    httpClient: HttpClient,
-
-    jstypes: [Types.len]usize = undefined,
-
-    fn init(self: *Session, alloc: std.mem.Allocator, loop: *Loop, uri: []const u8) !void {
-        self.* = Session{
-            .uri = uri,
-            .alloc = alloc,
-            .arena = std.heap.ArenaAllocator.init(alloc),
-            .window = Window.create(null, .{ .agent = user_agent }),
-            .loader = Loader.init(alloc),
-            .storageShed = storage.Shed.init(alloc),
-            .httpClient = undefined,
-        };
-
-        Env.init(&self.env, self.arena.allocator(), loop, null);
-        self.httpClient = .{ .allocator = alloc };
-        try self.env.load(&self.jstypes);
-    }
-
-    fn fetchModule(ctx: *anyopaque, referrer: ?jsruntime.Module, specifier: []const u8) !jsruntime.Module {
-        _ = referrer;
-
-        const self: *Session = @ptrCast(@alignCast(ctx));
-
-        if (self.page == null) return error.NoPage;
-
-        log.debug("fetch module: specifier: {s}", .{specifier});
-        const alloc = self.arena.allocator();
-        const body = try self.page.?.fetchData(alloc, specifier);
-        defer alloc.free(body);
-
-        return self.env.compileModule(body, specifier);
-    }
-
-    fn deinit(self: *Session) void {
-        if (self.page) |*p| p.deinit();
-
-        if (self.inspector) |inspector| {
-            inspector.deinit(self.alloc);
-        }
-
+        self.closeSession();
         self.env.deinit();
-        self.arena.deinit();
-
-        self.httpClient.deinit();
-        self.loader.deinit();
-        self.storageShed.deinit();
+        self.page_arena.deinit();
+        self.notification.deinit();
     }
 
-    pub fn initInspector(
-        self: *Session,
-        ctx: anytype,
-        onResp: jsruntime.InspectorOnResponseFn,
-        onEvent: jsruntime.InspectorOnEventFn,
-    ) !void {
-        const ctx_opaque = @as(*anyopaque, @ptrCast(ctx));
-        self.inspector = try jsruntime.Inspector.init(self.alloc, self.env, ctx_opaque, onResp, onEvent);
-        self.env.setInspector(self.inspector.?);
+    pub fn newSession(self: *Browser) !*Session {
+        self.closeSession();
+        self.session = @as(Session, undefined);
+        const session = &self.session.?;
+        try Session.init(session, self);
+        return session;
     }
 
-    pub fn callInspector(self: *Session, msg: []const u8) void {
-        if (self.inspector) |inspector| {
-            inspector.send(msg, self.env);
-        } else {
-            @panic("No Inspector");
+    pub fn closeSession(self: *Browser) void {
+        if (self.session) |*session| {
+            session.deinit();
+            self.session = null;
+            if (self.app.config.gc_hints) {
+                self.env.lowMemoryNotification();
+            }
         }
     }
 
-    // NOTE: the caller is not the owner of the returned value,
-    // the pointer on Page is just returned as a convenience
-    pub fn createPage(self: *Session) !*Page {
-        if (self.page != null) return error.SessionPageExists;
-        const p: Page = undefined;
-        self.page = p;
-        Page.init(&self.page.?, self.alloc, self);
-        return &self.page.?;
+    pub fn runMicrotasks(self: *const Browser) void {
+        return self.env.runMicrotasks();
     }
 };
 
-// Page navigates to an url.
-// You can navigates multiple urls with the same page, but you have to call
-// end() to stop the previous navigation before starting a new one.
-// The page handle all its memory in an arena allocator. The arena is reseted
-// when end() is called.
-pub const Page = struct {
-    arena: std.heap.ArenaAllocator,
-    session: *Session,
-    doc: ?*parser.Document = null,
-
-    // handle url
-    rawuri: ?[]const u8 = null,
-    uri: std.Uri = undefined,
-    origin: ?[]const u8 = null,
-
-    // html url and location
-    url: ?URL = null,
-    location: Location = .{},
-
-    raw_data: ?[]const u8 = null,
-
-    fn init(
-        self: *Page,
-        alloc: std.mem.Allocator,
-        session: *Session,
-    ) void {
-        self.* = .{
-            .arena = std.heap.ArenaAllocator.init(alloc),
-            .session = session,
-        };
-    }
-
-    // start js env.
-    // - auxData: extra data forwarded to the Inspector
-    // see Inspector.contextCreated
-    pub fn start(self: *Page, auxData: ?[]const u8) !void {
-        // start JS env
-        log.debug("start js env", .{});
-        try self.session.env.start();
-
-        // register the module loader
-        try self.session.env.setModuleLoadFn(self.session, Session.fetchModule);
-
-        // add global objects
-        log.debug("setup global env", .{});
-        try self.session.env.bindGlobal(&self.session.window);
-
-        // load polyfills
-        try polyfill.load(self.arena.allocator(), self.session.env);
-
-        // inspector
-        if (self.session.inspector) |inspector| {
-            log.debug("inspector context created", .{});
-            inspector.contextCreated(self.session.env, "", self.origin orelse "://", auxData);
-        }
-    }
-
-    // reset js env and mem arena.
-    pub fn end(self: *Page) void {
-        self.session.env.stop();
-        // TODO unload document: https://html.spec.whatwg.org/#unloading-documents
-
-        if (self.url) |*u| u.deinit(self.arena.allocator());
-        self.url = null;
-        self.location.url = null;
-        self.session.window.replaceLocation(&self.location) catch |e| {
-            log.err("reset window location: {any}", .{e});
-        };
-        self.doc = null;
-
-        // clear netsurf memory arena.
-        parser.deinit();
-
-        _ = self.arena.reset(.free_all);
-    }
-
-    pub fn deinit(self: *Page) void {
-        self.end();
-        self.arena.deinit();
-        self.session.page = null;
-    }
-
-    // dump writes the page content into the given file.
-    pub fn dump(self: *Page, out: std.fs.File) !void {
-
-        // if no HTML document pointer available, dump the data content only.
-        if (self.doc == null) {
-            // no data loaded, nothing to do.
-            if (self.raw_data == null) return;
-            return try out.writeAll(self.raw_data.?);
-        }
-
-        // if the page has a pointer to a document, dumps the HTML.
-        try Dump.writeHTML(self.doc.?, out);
-    }
-
-    pub fn wait(self: *Page) !void {
-
-        // try catch
-        var try_catch: jsruntime.TryCatch = undefined;
-        try_catch.init(self.session.env);
-        defer try_catch.deinit();
-
-        self.session.env.wait() catch |err| {
-            // the js env could not be started if the document wasn't an HTML.
-            if (err == error.EnvNotStarted) return;
-
-            const alloc = self.arena.allocator();
-            if (try try_catch.err(alloc, self.session.env)) |msg| {
-                defer alloc.free(msg);
-                log.info("wait error: {s}", .{msg});
-                return;
-            }
-        };
-        log.debug("wait: OK", .{});
-    }
-
-    // spec reference: https://html.spec.whatwg.org/#document-lifecycle
-    // - auxData: extra data forwarded to the Inspector
-    // see Inspector.contextCreated
-    pub fn navigate(self: *Page, uri: []const u8, auxData: ?[]const u8) !void {
-        const alloc = self.arena.allocator();
-
-        log.debug("starting GET {s}", .{uri});
-
-        // if the uri is about:blank, nothing to do.
-        if (std.mem.eql(u8, "about:blank", uri)) {
-            return;
-        }
-
-        // own the url
-        if (self.rawuri) |prev| alloc.free(prev);
-        self.rawuri = try alloc.dupe(u8, uri);
-        self.uri = std.Uri.parse(self.rawuri.?) catch try std.Uri.parseAfterScheme("", self.rawuri.?);
-
-        if (self.url) |*prev| prev.deinit(alloc);
-        self.url = try URL.constructor(alloc, self.rawuri.?, null);
-        self.location.url = &self.url.?;
-        try self.session.window.replaceLocation(&self.location);
-
-        // prepare origin value.
-        var buf = std.ArrayList(u8).init(alloc);
-        defer buf.deinit();
-        try self.uri.writeToStream(.{
-            .scheme = true,
-            .authority = true,
-        }, buf.writer());
-        self.origin = try buf.toOwnedSlice();
-
-        // TODO handle fragment in url.
-
-        // load the data
-        var resp = try self.session.loader.get(alloc, self.uri);
-        defer resp.deinit();
-
-        const req = resp.req;
-
-        log.info("GET {any} {d}", .{ self.uri, @intFromEnum(req.response.status) });
-
-        // TODO handle redirection
-        log.debug("{?} {d} {s}", .{
-            req.response.version,
-            @intFromEnum(req.response.status),
-            req.response.reason,
-            // TODO log headers
-        });
-
-        // TODO handle charset
-        // https://html.spec.whatwg.org/#content-type
-        var it = req.response.iterateHeaders();
-        var ct: ?[]const u8 = null;
-        while (true) {
-            const h = it.next() orelse break;
-            if (std.ascii.eqlIgnoreCase(h.name, "Content-Type")) {
-                ct = try alloc.dupe(u8, h.value);
-            }
-        }
-        if (ct == null) {
-            // no content type in HTTP headers.
-            // TODO try to sniff mime type from the body.
-            log.info("no content-type HTTP header", .{});
-            return;
-        }
-        defer alloc.free(ct.?);
-
-        log.debug("header content-type: {s}", .{ct.?});
-        var mime = try Mime.parse(alloc, ct.?);
-        defer mime.deinit();
-
-        if (mime.isHTML()) {
-            try self.loadHTMLDoc(req.reader(), mime.charset orelse "utf-8", auxData);
-        } else {
-            log.info("non-HTML document: {s}", .{ct.?});
-
-            // save the body into the page.
-            self.raw_data = try req.reader().readAllAlloc(alloc, 16 * 1024 * 1024);
-        }
-    }
-
-    // https://html.spec.whatwg.org/#read-html
-    fn loadHTMLDoc(self: *Page, reader: anytype, charset: []const u8, auxData: ?[]const u8) !void {
-        const alloc = self.arena.allocator();
-
-        // start netsurf memory arena.
-        try parser.init();
-
-        log.debug("parse html with charset {s}", .{charset});
-
-        const ccharset = try alloc.dupeZ(u8, charset);
-        defer alloc.free(ccharset);
-
-        const html_doc = try parser.documentHTMLParse(reader, ccharset);
-        const doc = parser.documentHTMLToDocument(html_doc);
-
-        // save a document's pointer in the page.
-        self.doc = doc;
-
-        // TODO set document.readyState to interactive
-        // https://html.spec.whatwg.org/#reporting-document-loading-status
-
-        // inject the URL to the document including the fragment.
-        try parser.documentSetDocumentURI(doc, self.rawuri orelse "about:blank");
-
-        // TODO set the referrer to the document.
-
-        try self.session.window.replaceDocument(html_doc);
-        self.session.window.setStorageShelf(
-            try self.session.storageShed.getOrPut(self.origin orelse "null"),
-        );
-
-        // https://html.spec.whatwg.org/#read-html
-
-        // inspector
-        if (self.session.inspector) |inspector| {
-            inspector.contextCreated(self.session.env, "", self.origin.?, auxData);
-        }
-
-        // replace the user context document with the new one.
-        try self.session.env.setUserContext(.{
-            .document = html_doc,
-            .httpClient = &self.session.httpClient,
-        });
-
-        // browse the DOM tree to retrieve scripts
-        // TODO execute the synchronous scripts during the HTL parsing.
-        // TODO fetch the script resources concurrently but execute them in the
-        // declaration order for synchronous ones.
-
-        // sasync stores scripts which can be run asynchronously.
-        // for now they are just run after the non-async one in order to
-        // dispatch DOMContentLoaded the sooner as possible.
-        var sasync = std.ArrayList(Script).init(alloc);
-        defer sasync.deinit();
-
-        const root = parser.documentToNode(doc);
-        const walker = Walker{};
-        var next: ?*parser.Node = null;
-        while (true) {
-            next = try walker.get_next(root, next) orelse break;
-
-            // ignore non-elements nodes.
-            if (try parser.nodeType(next.?) != .element) {
-                continue;
-            }
-
-            const e = parser.nodeToElement(next.?);
-
-            // ignore non-js script.
-            const script = try Script.init(e) orelse continue;
-            if (script.kind == .unknown) continue;
-
-            // Ignore the defer attribute b/c we analyze all script
-            // after the document has been parsed.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer
-
-            // TODO use fetchpriority
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#fetchpriority
-
-            // > async
-            // > For classic scripts, if the async attribute is present,
-            // > then the classic script will be fetched in parallel to
-            // > parsing and evaluated as soon as it is available.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async
-            if (script.isasync) {
-                try sasync.append(script);
-                continue;
-            }
-
-            // TODO handle for attribute
-            // TODO handle event attribute
-
-            // TODO defer
-            // > This Boolean attribute is set to indicate to a browser
-            // > that the script is meant to be executed after the
-            // > document has been parsed, but before firing
-            // > DOMContentLoaded.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer
-            // defer allow us to load a script w/o blocking the rest of
-            // evaluations.
-
-            // > Scripts without async, defer or type="module"
-            // > attributes, as well as inline scripts without the
-            // > type="module" attribute, are fetched and executed
-            // > immediately before the browser continues to parse the
-            // > page.
-            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes
-            try parser.documentHTMLSetCurrentScript(html_doc, @ptrCast(e));
-            self.evalScript(script) catch |err| log.warn("evaljs: {any}", .{err});
-            try parser.documentHTMLSetCurrentScript(html_doc, null);
-        }
-
-        // TODO wait for deferred scripts
-
-        // dispatch DOMContentLoaded before the transition to "complete",
-        // at the point where all subresources apart from async script elements
-        // have loaded.
-        // https://html.spec.whatwg.org/#reporting-document-loading-status
-        const evt = try parser.eventCreate();
-        defer parser.eventDestroy(evt);
-
-        try parser.eventInit(evt, "DOMContentLoaded", .{ .bubbles = true, .cancelable = true });
-        _ = try parser.eventTargetDispatchEvent(parser.toEventTarget(parser.DocumentHTML, html_doc), evt);
-
-        // eval async scripts.
-        for (sasync.items) |s| {
-            try parser.documentHTMLSetCurrentScript(html_doc, @ptrCast(s.element));
-            self.evalScript(s) catch |err| log.warn("evaljs: {any}", .{err});
-            try parser.documentHTMLSetCurrentScript(html_doc, null);
-        }
-
-        // TODO wait for async scripts
-
-        // TODO set document.readyState to complete
-
-        // dispatch window.load event
-        const loadevt = try parser.eventCreate();
-        defer parser.eventDestroy(loadevt);
-
-        try parser.eventInit(loadevt, "load", .{});
-        _ = try parser.eventTargetDispatchEvent(
-            parser.toEventTarget(Window, &self.session.window),
-            loadevt,
-        );
-    }
-
-    // evalScript evaluates the src in priority.
-    // if no src is present, we evaluate the text source.
-    // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model
-    fn evalScript(self: *Page, s: Script) !void {
-        const alloc = self.arena.allocator();
-
-        // https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-classic-script
-        const opt_src = try parser.elementGetAttribute(s.element, "src");
-        if (opt_src) |src| {
-            log.debug("starting GET {s}", .{src});
-
-            self.fetchScript(s) catch |err| {
-                switch (err) {
-                    FetchError.BadStatusCode => return err,
-
-                    // TODO If el's result is null, then fire an event named error at
-                    // el, and return.
-                    FetchError.NoBody => return,
-
-                    FetchError.JsErr => {}, // nothing to do here.
-                    else => return err,
-                }
-            };
-
-            // TODO If el's from an external file is true, then fire an event
-            // named load at el.
-
-            return;
-        }
-
-        // TODO handle charset attribute
-        const opt_text = try parser.nodeTextContent(parser.elementToNode(s.element));
-        if (opt_text) |text| {
-            try s.eval(alloc, self.session.env, text);
-            return;
-        }
-
-        // nothing has been loaded.
-        // TODO If el's result is null, then fire an event named error at
-        // el, and return.
-    }
-
-    const FetchError = error{
-        BadStatusCode,
-        NoBody,
-        JsErr,
-    };
-
-    // the caller owns the returned string
-    fn fetchData(self: *Page, alloc: std.mem.Allocator, src: []const u8) ![]const u8 {
-        log.debug("starting fetch {s}", .{src});
-
-        var buffer: [1024]u8 = undefined;
-        var b: []u8 = buffer[0..];
-        const u = try std.Uri.resolve_inplace(self.uri, src, &b);
-
-        var fetchres = try self.session.loader.get(alloc, u);
-        defer fetchres.deinit();
-
-        const resp = fetchres.req.response;
-
-        log.info("fetch {any}: {d}", .{ u, resp.status });
-
-        if (resp.status != .ok) return FetchError.BadStatusCode;
-
-        // TODO check content-type
-        const body = try fetchres.req.reader().readAllAlloc(alloc, 16 * 1024 * 1024);
-
-        // check no body
-        if (body.len == 0) return FetchError.NoBody;
-
-        return body;
-    }
-
-    // fetchScript senf a GET request to the src and execute the script
-    // received.
-    fn fetchScript(self: *Page, s: Script) !void {
-        const alloc = self.arena.allocator();
-        const body = try self.fetchData(alloc, s.src);
-        defer alloc.free(body);
-
-        try s.eval(alloc, self.session.env, body);
-    }
-
-    const Script = struct {
-        element: *parser.Element,
-        kind: Kind,
-        isasync: bool,
-
-        src: []const u8,
-
-        const Kind = enum {
-            unknown,
-            javascript,
-            module,
-        };
-
-        fn init(e: *parser.Element) !?Script {
-            // ignore non-script tags
-            const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(e)));
-            if (tag != .script) return null;
-
-            return .{
-                .element = e,
-                .kind = kind(try parser.elementGetAttribute(e, "type")),
-                .isasync = try parser.elementGetAttribute(e, "async") != null,
-
-                .src = try parser.elementGetAttribute(e, "src") orelse "inline",
-            };
-        }
-
-        // > type
-        // > Attribute is not set (default), an empty string, or a JavaScript MIME
-        // > type indicates that the script is a "classic script", containing
-        // > JavaScript code.
-        // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type
-        fn kind(stype: ?[]const u8) Kind {
-            if (stype == null or stype.?.len == 0) return .javascript;
-            if (std.mem.eql(u8, stype.?, "application/javascript")) return .javascript;
-            if (std.mem.eql(u8, stype.?, "module")) return .module;
-
-            return .unknown;
-        }
-
-        fn eval(self: Script, alloc: std.mem.Allocator, env: Env, body: []const u8) !void {
-            var try_catch: jsruntime.TryCatch = undefined;
-            try_catch.init(env);
-            defer try_catch.deinit();
-
-            const res = switch (self.kind) {
-                .unknown => return error.UnknownScript,
-                .javascript => env.exec(body, self.src),
-                .module => env.module(body, self.src),
-            } catch {
-                if (try try_catch.err(alloc, env)) |msg| {
-                    defer alloc.free(msg);
-                    log.info("eval script {s}: {s}", .{ self.src, msg });
-                }
-                return FetchError.JsErr;
-            };
-
-            if (builtin.mode == .Debug) {
-                const msg = try res.toString(alloc, env);
-                defer alloc.free(msg);
-                log.debug("eval script {s}: {s}", .{ self.src, msg });
-            }
-        }
-    };
-};
+const testing = @import("../testing.zig");
+test "Browser" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    // this will crash if ICU isn't properly configured / ininitialized
+    try runner.testCases(&.{
+        .{ "new Intl.DateTimeFormat()", "[object Intl.DateTimeFormat]" },
+    }, .{});
+}

src/browser/console/console.zig

@@ -0,0 +1,240 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const builtin = @import("builtin");
+
+const JsObject = @import("../env.zig").Env.JsObject;
+const SessionState = @import("../env.zig").SessionState;
+
+const log = if (builtin.is_test) &test_capture else std.log.scoped(.console);
+
+pub const Console = struct {
+    // TODO: configurable writer
+    timers: std.StringHashMapUnmanaged(u32) = .{},
+    counts: std.StringHashMapUnmanaged(u32) = .{},
+
+    pub fn _log(_: *const Console, values: []JsObject, state: *SessionState) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.info("{s}", .{try serializeValues(values, state)});
+    }
+
+    pub fn _info(console: *const Console, values: []JsObject, state: *SessionState) !void {
+        return console._log(values, state);
+    }
+
+    pub fn _debug(_: *const Console, values: []JsObject, state: *SessionState) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.debug("{s}", .{try serializeValues(values, state)});
+    }
+
+    pub fn _warn(_: *const Console, values: []JsObject, state: *SessionState) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.warn("{s}", .{try serializeValues(values, state)});
+    }
+
+    pub fn _error(_: *const Console, values: []JsObject, state: *SessionState) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.err("{s}", .{try serializeValues(values, state)});
+    }
+
+    pub fn _clear(_: *const Console) void {}
+
+    pub fn _count(self: *Console, label_: ?[]const u8, state: *SessionState) !void {
+        const label = label_ orelse "default";
+        const gop = try self.counts.getOrPut(state.arena, label);
+
+        var current: u32 = 0;
+        if (gop.found_existing) {
+            current = gop.value_ptr.*;
+        } else {
+            gop.key_ptr.* = try state.arena.dupe(u8, label);
+        }
+
+        const count = current + 1;
+        gop.value_ptr.* = count;
+
+        log.info("{s}: {d}", .{ label, count });
+    }
+
+    pub fn _countReset(self: *Console, label_: ?[]const u8) !void {
+        const label = label_ orelse "default";
+        const kv = self.counts.fetchRemove(label) orelse {
+            log.warn("Counter \"{s}\" doesn't exist.", .{label});
+            return;
+        };
+
+        log.info("{s}: {d}", .{ label, kv.value });
+    }
+
+    pub fn _time(self: *Console, label_: ?[]const u8, state: *SessionState) !void {
+        const label = label_ orelse "default";
+        const gop = try self.timers.getOrPut(state.arena, label);
+
+        if (gop.found_existing) {
+            log.warn("Timer \"{s}\" already exists.", .{label});
+            return;
+        }
+        gop.key_ptr.* = try state.arena.dupe(u8, label);
+        gop.value_ptr.* = timestamp();
+    }
+
+    pub fn _timeLog(self: *Console, label_: ?[]const u8) void {
+        const elapsed = timestamp();
+        const label = label_ orelse "default";
+        const start = self.timers.get(label) orelse {
+            log.warn("Timer \"{s}\" doesn't exist.", .{label});
+            return;
+        };
+
+        log.info("\"{s}\": {d}ms", .{ label, elapsed - start });
+    }
+
+    pub fn _timeStop(self: *Console, label_: ?[]const u8) void {
+        const elapsed = timestamp();
+        const label = label_ orelse "default";
+        const kv = self.timers.fetchRemove(label) orelse {
+            log.warn("Timer \"{s}\" doesn't exist.", .{label});
+            return;
+        };
+
+        log.info("\"{s}\": {d}ms - timer ended", .{ label, elapsed - kv.value });
+    }
+
+    pub fn _assert(_: *Console, assertion: JsObject, values: []JsObject, state: *SessionState) !void {
+        if (assertion.isTruthy()) {
+            return;
+        }
+        var serialized_values: []const u8 = "";
+        if (values.len > 0) {
+            serialized_values = try serializeValues(values, state);
+        }
+        log.err("Assertion failed: {s}", .{serialized_values});
+    }
+
+    fn serializeValues(values: []JsObject, state: *SessionState) ![]const u8 {
+        const arena = state.call_arena;
+        var arr: std.ArrayListUnmanaged(u8) = .{};
+        try arr.appendSlice(arena, try values[0].toString());
+        for (values[1..]) |value| {
+            try arr.append(arena, ' ');
+            try arr.appendSlice(arena, try value.toString());
+        }
+        return arr.items;
+    }
+};
+
+fn timestamp() u32 {
+    const ts = std.posix.clock_gettime(std.posix.CLOCK.MONOTONIC) catch unreachable;
+    return @intCast(ts.sec);
+}
+
+var test_capture = TestCapture{};
+const testing = @import("../../testing.zig");
+test "Browser.Console" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    defer testing.reset();
+
+    {
+        try runner.testCases(&.{
+            .{ "console.log('a')", "undefined" },
+            .{ "console.warn('hello world', 23, true, new Object())", "undefined" },
+        }, .{});
+
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("a", captured[0]);
+        try testing.expectEqual("hello world 23 true [object Object]", captured[1]);
+    }
+
+    {
+        test_capture.reset();
+        try runner.testCases(&.{
+            .{ "console.countReset()", "undefined" },
+            .{ "console.count()", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count()", "undefined" },
+            .{ "console.countReset('teg')", "undefined" },
+            .{ "console.countReset()", "undefined" },
+            .{ "console.count()", "undefined" },
+        }, .{});
+
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("Counter \"default\" doesn't exist.", captured[0]);
+        try testing.expectEqual("default: 1", captured[1]);
+        try testing.expectEqual("teg: 1", captured[2]);
+        try testing.expectEqual("teg: 2", captured[3]);
+        try testing.expectEqual("teg: 3", captured[4]);
+        try testing.expectEqual("default: 2", captured[5]);
+        try testing.expectEqual("teg: 3", captured[6]);
+        try testing.expectEqual("default: 2", captured[7]);
+        try testing.expectEqual("default: 1", captured[8]);
+    }
+
+    {
+        test_capture.reset();
+        try runner.testCases(&.{
+            .{ "console.assert(true)", "undefined" },
+            .{ "console.assert('a', 2, 3, 4)", "undefined" },
+            .{ "console.assert('')", "undefined" },
+            .{ "console.assert('', 'x', true)", "undefined" },
+            .{ "console.assert(false, 'x')", "undefined" },
+        }, .{});
+
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("Assertion failed: ", captured[0]);
+        try testing.expectEqual("Assertion failed: x true", captured[1]);
+        try testing.expectEqual("Assertion failed: x", captured[2]);
+    }
+}
+
+const TestCapture = struct {
+    captured: std.ArrayListUnmanaged([]const u8) = .{},
+
+    fn reset(self: *TestCapture) void {
+        self.captured = .{};
+    }
+
+    fn debug(self: *TestCapture, comptime fmt: []const u8, args: anytype) void {
+        const str = std.fmt.allocPrint(testing.arena_allocator, fmt, args) catch unreachable;
+        self.captured.append(testing.arena_allocator, str) catch unreachable;
+    }
+
+    fn info(self: *TestCapture, comptime fmt: []const u8, args: anytype) void {
+        self.debug(fmt, args);
+    }
+
+    fn warn(self: *TestCapture, comptime fmt: []const u8, args: anytype) void {
+        self.debug(fmt, args);
+    }
+
+    fn err(self: *TestCapture, comptime fmt: []const u8, args: anytype) void {
+        self.debug(fmt, args);
+    }
+};

src/browser/crypto/crypto.zig

@@ -0,0 +1,82 @@
+// Copyright (C) 2023-2024  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 uuidv4 = @import("../../id.zig").uuidv4;
+
+// https://w3c.github.io/webcrypto/#crypto-interface
+pub const Crypto = struct {
+    pub fn _getRandomValues(_: *const Crypto, into: RandomValues) !void {
+        const buf = into.asBuffer();
+        if (buf.len > 65_536) {
+            return error.QuotaExceededError;
+        }
+        std.crypto.random.bytes(buf);
+    }
+
+    pub fn _randomUUID(_: *const Crypto) [36]u8 {
+        var hex: [36]u8 = undefined;
+        uuidv4(&hex);
+        return hex;
+    }
+};
+
+const RandomValues = union(enum) {
+    int8: []i8,
+    uint8: []u8,
+    int16: []i16,
+    uint16: []u16,
+    int32: []i32,
+    uint32: []u32,
+    int64: []i64,
+    uint64: []u64,
+
+    fn asBuffer(self: RandomValues) []u8 {
+        switch (self) {
+            .int8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .uint8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .int16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .uint16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .int32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .uint32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .int64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+            .uint64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+        }
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Crypto" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const a = crypto.randomUUID();", "undefined" },
+        .{ "const b = crypto.randomUUID();", "undefined" },
+        .{ "a.length;", "36" },
+        .{ "a.length;", "36" },
+        .{ "a == b;", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "try { crypto.getRandomValues(new BigUint64Array(8193)) } catch(e) { e.message == 'QuotaExceededError' }", "true" },
+        .{ "let r1 = new Int32Array(5)", "undefined" },
+        .{ "crypto.getRandomValues(r1)", "undefined" },
+        .{ "new Set(r1).size", "5" },
+    }, .{});
+}

src/browser/css/libdom.zig

@@ -18,7 +18,7 @@
 
 const std = @import("std");
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 // Node implementation with Netsurf Libdom C lib.
 pub const Node = struct {

src/browser/css/libdom_test.zig

@@ -19,7 +19,7 @@
 const std = @import("std");
 const css = @import("css.zig");
 const Node = @import("libdom.zig").Node;
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Matcher = struct {
     const Nodes = std.ArrayList(Node);
@@ -161,7 +161,7 @@ test "matchFirst" {
     for (testcases) |tc| {
         matcher.reset();
 
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
+        const doc = try parser.documentHTMLParseFromStr(alloc, tc.html);
         defer parser.documentHTMLClose(doc) catch {};
 
         const s = css.parse(alloc, tc.q, .{}) catch |e| {

src/browser/css/parser.zig

@@ -29,6 +29,8 @@ const PseudoClass = selector.PseudoClass;
 const AttributeOP = selector.AttributeOP;
 const Combinator = selector.Combinator;
 
+const REPLACEMENT_CHARACTER = &.{ 239, 191, 189 };
+
 pub const ParseError = error{
     ExpectedSelector,
     ExpectedIdentifier,
@@ -217,22 +219,31 @@ pub const Parser = struct {
     // parseName parses a name (which is like an identifier, but doesn't have
     // extra restrictions on the first character).
     fn parseName(p: *Parser, w: anytype) ParseError!void {
+        const sel = p.s;
+        const sel_len = sel.len;
+
         var i = p.i;
         var ok = false;
 
-        while (i < p.s.len) {
-            const c = p.s[i];
+        while (i < sel_len) {
+            const c = sel[i];
 
             if (nameChar(c)) {
                 const start = i;
-                while (i < p.s.len and nameChar(p.s[i])) i += 1;
-                w.writeAll(p.s[start..i]) catch return ParseError.WriteError;
+                while (i < sel_len and nameChar(sel[i])) i += 1;
+                w.writeAll(sel[start..i]) catch return ParseError.WriteError;
                 ok = true;
             } else if (c == '\\') {
                 p.i = i;
                 try p.parseEscape(w);
                 i = p.i;
                 ok = true;
+            } else if (c == 0) {
+                w.writeAll(REPLACEMENT_CHARACTER) catch return ParseError.WriteError;
+                i += 1;
+                if (i == sel_len) {
+                    ok = true;
+                }
             } else {
                 // default:
                 break;
@@ -246,33 +257,52 @@ pub const Parser = struct {
     // parseEscape parses a backslash escape.
     // The returned string is owned by the caller.
     fn parseEscape(p: *Parser, w: anytype) ParseError!void {
-        if (p.s.len < p.i + 2 or p.s[p.i] != '\\') {
-            return ParseError.InvalidEscape;
+        const sel = p.s;
+        const sel_len = sel.len;
+
+        if (sel_len < p.i + 2 or sel[p.i] != '\\') {
+            p.i += 1;
+            w.writeAll(REPLACEMENT_CHARACTER) catch return ParseError.WriteError;
+            return;
         }
 
         const start = p.i + 1;
-        const c = p.s[start];
-        if (ascii.isWhitespace(c)) return ParseError.EscapeLineEndingOutsideString;
+        const c = sel[start];
 
         // unicode escape (hex)
         if (ascii.isHex(c)) {
             var i: usize = start;
-            while (i < start + 6 and i < p.s.len and ascii.isHex(p.s[i])) {
+            while (i < start + 6 and i < sel_len and ascii.isHex(sel[i])) {
                 i += 1;
             }
-            const v = std.fmt.parseUnsigned(u21, p.s[start..i], 16) catch return ParseError.InvalidUnicode;
-            if (p.s.len > i) {
-                switch (p.s[i]) {
-                    '\r' => {
-                        i += 1;
-                        if (p.s.len > i and p.s[i] == '\n') i += 1;
-                    },
-                    ' ', '\t', '\n', std.ascii.control_code.ff => i += 1,
-                    else => {},
+
+            const v = std.fmt.parseUnsigned(u21, sel[start..i], 16) catch {
+                p.i = i;
+                w.writeAll(REPLACEMENT_CHARACTER) catch return ParseError.WriteError;
+                return;
+            };
+
+            if (sel_len >= i) {
+                if (sel_len > i) {
+                    switch (sel[i]) {
+                        '\r' => {
+                            i += 1;
+                            if (sel_len > i and sel[i] == '\n') i += 1;
+                        },
+                        ' ', '\t', '\n', std.ascii.control_code.ff => i += 1,
+                        else => {},
+                    }
                 }
                 p.i = i;
+                if (v == 0) {
+                    w.writeAll(REPLACEMENT_CHARACTER) catch return ParseError.WriteError;
+                    return;
+                }
                 var buf: [4]u8 = undefined;
-                const ln = std.unicode.utf8Encode(v, &buf) catch return ParseError.InvalidUnicode;
+                const ln = std.unicode.utf8Encode(v, &buf) catch {
+                    w.writeAll(REPLACEMENT_CHARACTER) catch return ParseError.WriteError;
+                    return;
+                };
                 w.writeAll(buf[0..ln]) catch return ParseError.WriteError;
                 return;
             }
@@ -280,7 +310,7 @@ pub const Parser = struct {
 
         // Return the literal character after the backslash.
         p.i += 2;
-        w.writeAll(p.s[start .. start + 1]) catch return ParseError.WriteError;
+        w.writeByte(sel[start]) catch return ParseError.WriteError;
     }
 
     // parseIDSelector parses a selector that matches by id attribute.
@@ -383,20 +413,23 @@ pub const Parser = struct {
 
     // parseString parses a single- or double-quoted string.
     fn parseString(p: *Parser, writer: anytype) ParseError!void {
-        var i = p.i;
-        if (p.s.len < i + 2) return ParseError.ExpectedString;
+        const sel = p.s;
+        const sel_len = sel.len;
 
-        const quote = p.s[i];
+        var i = p.i;
+        if (sel_len < i + 2) return ParseError.ExpectedString;
+
+        const quote = sel[i];
         i += 1;
 
-        loop: while (i < p.s.len) {
-            switch (p.s[i]) {
+        loop: while (i < sel_len) {
+            switch (sel[i]) {
                 '\\' => {
-                    if (p.s.len > i + 1) {
-                        const c = p.s[i + 1];
+                    if (sel_len > i + 1) {
+                        const c = sel[i + 1];
                         switch (c) {
                             '\r' => {
-                                if (p.s.len > i + 2 and p.s[i + 2] == '\n') {
+                                if (sel_len > i + 2 and sel[i + 2] == '\n') {
                                     i += 3;
                                     continue :loop;
                                 }
@@ -418,17 +451,17 @@ pub const Parser = struct {
                 else => |c| {
                     if (c == quote) break :loop;
                     const start = i;
-                    while (i < p.s.len) {
-                        const cc = p.s[i];
+                    while (i < sel_len) {
+                        const cc = sel[i];
                         if (cc == quote or cc == '\\' or c == '\r' or c == '\n' or c == std.ascii.control_code.ff) break;
                         i += 1;
                     }
-                    writer.writeAll(p.s[start..i]) catch return ParseError.WriteError;
+                    writer.writeAll(sel[start..i]) catch return ParseError.WriteError;
                 },
             }
         }
 
-        if (i >= p.s.len) return ParseError.InvalidString;
+        if (i >= sel_len) return ParseError.InvalidString;
 
         // Consume the final quote.
         i += 1;

src/browser/datauri.zig

@@ -0,0 +1,79 @@
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+// Represents https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data
+pub const DataURI = struct {
+    was_base64_encoded: bool,
+    // The contents in the uri. It will be base64 decoded but not prepared in
+    // any way for mime.charset.
+    data: []const u8,
+
+    // Parses data:[<media-type>][;base64],<data>
+    pub fn parse(allocator: Allocator, src: []const u8) !?DataURI {
+        if (!std.mem.startsWith(u8, src, "data:")) {
+            return null;
+        }
+
+        const uri = src[5..];
+        const data_starts = std.mem.indexOfScalar(u8, uri, ',') orelse return null;
+
+        // Extract the encoding.
+        var metadata = uri[0..data_starts];
+        var base64_encoded = false;
+        if (std.mem.endsWith(u8, metadata, ";base64")) {
+            base64_encoded = true;
+            metadata = metadata[0 .. metadata.len - 7];
+        }
+
+        // TODO: Extract mime type. This not trivial because Mime.parse requires
+        // a []u8 and might mutate the src. And, the DataURI.parse references atm
+        // do not have deinit calls.
+
+        // Prepare the data.
+        var data = uri[data_starts + 1 ..];
+        if (base64_encoded) {
+            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;
+        }
+
+        return .{
+            .was_base64_encoded = base64_encoded,
+            .data = data,
+        };
+    }
+
+    pub fn deinit(self: *const DataURI, allocator: Allocator) void {
+        if (self.was_base64_encoded) {
+            allocator.free(self.data);
+        }
+    }
+};
+
+const testing = std.testing;
+test "DataURI: parse valid" {
+    try test_valid("data:text/javascript; charset=utf-8;base64,Zm9v", "foo");
+    try test_valid("data:text/javascript; charset=utf-8;,foo", "foo");
+    try test_valid("data:,foo", "foo");
+}
+
+test "DataURI: parse invalid" {
+    try test_cannot_parse("atad:,foo");
+    try test_cannot_parse("data:foo");
+    try test_cannot_parse("data:");
+}
+
+fn test_valid(uri: []const u8, expected: []const u8) !void {
+    const data_uri = try DataURI.parse(std.testing.allocator, uri) orelse return error.TestFailed;
+    defer data_uri.deinit(testing.allocator);
+    try testing.expectEqualStrings(expected, data_uri.data);
+}
+
+fn test_cannot_parse(uri: []const u8) !void {
+    try testing.expectEqual(null, DataURI.parse(std.testing.allocator, uri));
+}

src/browser/dom/attribute.zig

@@ -16,22 +16,15 @@
 // 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 jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Node = @import("node.zig").Node;
-const DOMException = @import("exceptions.zig").DOMException;
 
 // WEB IDL https://dom.spec.whatwg.org/#attr
 pub const Attr = struct {
     pub const Self = parser.Attribute;
     pub const prototype = *Node;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     pub fn get_namespaceURI(self: *parser.Attribute) !?[]const u8 {
         return try parser.nodeGetNamespace(parser.attributeToNode(self));
@@ -70,34 +63,33 @@ pub const Attr = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var getters = [_]Case{
-        .{ .src = "let a = document.createAttributeNS('foo', 'bar')", .ex = "undefined" },
-        .{ .src = "a.namespaceURI", .ex = "foo" },
-        .{ .src = "a.prefix", .ex = "null" },
-        .{ .src = "a.localName", .ex = "bar" },
-        .{ .src = "a.name", .ex = "bar" },
-        .{ .src = "a.value", .ex = "" },
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Attribute" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a = document.createAttributeNS('foo', 'bar')", "undefined" },
+        .{ "a.namespaceURI", "foo" },
+        .{ "a.prefix", "null" },
+        .{ "a.localName", "bar" },
+        .{ "a.name", "bar" },
+        .{ "a.value", "" },
         // TODO: libdom has a bug here: the created attr has no parent, it
         // causes a panic w/ libdom when setting the value.
-        //.{ .src = "a.value = 'nok'", .ex = "nok" },
-        .{ .src = "a.ownerElement", .ex = "null" },
-    };
-    try checkCases(js_env, &getters);
+        //.{ "a.value = 'nok'", "nok" },
+        .{ "a.ownerElement", "null" },
+    }, .{});
 
-    var attr = [_]Case{
-        .{ .src = "let b = document.getElementById('link').getAttributeNode('class')", .ex = "undefined" },
-        .{ .src = "b.name", .ex = "class" },
-        .{ .src = "b.value", .ex = "ok" },
-        .{ .src = "b.value = 'nok'", .ex = "nok" },
-        .{ .src = "b.value", .ex = "nok" },
-        .{ .src = "b.value = null", .ex = "null" },
-        .{ .src = "b.value", .ex = "null" },
-        .{ .src = "b.value = 'ok'", .ex = "ok" },
-        .{ .src = "b.ownerElement.id", .ex = "link" },
-    };
-    try checkCases(js_env, &attr);
+    try runner.testCases(&.{
+        .{ "let b = document.getElementById('link').getAttributeNode('class')", "undefined" },
+        .{ "b.name", "class" },
+        .{ "b.value", "ok" },
+        .{ "b.value = 'nok'", "nok" },
+        .{ "b.value", "nok" },
+        .{ "b.value = null", "null" },
+        .{ "b.value", "null" },
+        .{ "b.value = 'ok'", "ok" },
+        .{ "b.ownerElement.id", "link" },
+    }, .{});
 }

src/browser/dom/cdata_section.zig

@@ -16,9 +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 parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Text = @import("text.zig").Text;
 
@@ -26,5 +24,5 @@ const Text = @import("text.zig").Text;
 pub const CDATASection = struct {
     pub const Self = parser.CDATASection;
     pub const prototype = *Text;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };

src/browser/dom/character_data.zig

@@ -18,11 +18,7 @@
 
 const std = @import("std");
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Node = @import("node.zig").Node;
 const Comment = @import("comment.zig").Comment;
@@ -42,7 +38,7 @@ pub const Interfaces = .{
 pub const CharacterData = struct {
     pub const Self = parser.CharacterData;
     pub const prototype = *Node;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     // JS funcs
     // --------
@@ -101,79 +97,100 @@ pub const CharacterData = struct {
     pub fn _substringData(self: *parser.CharacterData, offset: u32, count: u32) ![]const u8 {
         return try parser.characterDataSubstringData(self, offset, count);
     }
+
+    // netsurf's CharacterData (text, comment) doesn't implement the
+    // dom_node_get_attributes and thus will crash if we try to call nodeIsEqualNode.
+    pub fn _isEqualNode(self: *parser.CharacterData, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(@ptrCast(self)) != try parser.nodeType(other_node)) {
+            return false;
+        }
+
+        const other: *parser.CharacterData = @ptrCast(other_node);
+        if (std.mem.eql(u8, try get_data(self), try get_data(other)) == false) {
+            return false;
+        }
+
+        return true;
+    }
+
+    pub fn _before(self: *parser.CharacterData, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.characterDataToNode(self);
+        return Node.before(ref_node, nodes);
+    }
+
+    pub fn _after(self: *parser.CharacterData, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.characterDataToNode(self);
+        return Node.after(ref_node, nodes);
+    }
 };
 
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var get_data = [_]Case{
-        .{ .src = "let link = document.getElementById('link')", .ex = "undefined" },
-        .{ .src = "let cdata = link.firstChild", .ex = "undefined" },
-        .{ .src = "cdata.data", .ex = "OK" },
-    };
-    try checkCases(js_env, &get_data);
+const testing = @import("../../testing.zig");
+test "Browser.DOM.CharacterData" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-    var set_data = [_]Case{
-        .{ .src = "cdata.data = 'OK modified'", .ex = "OK modified" },
-        .{ .src = "cdata.data === 'OK modified'", .ex = "true" },
-        .{ .src = "cdata.data = 'OK'", .ex = "OK" },
-    };
-    try checkCases(js_env, &set_data);
+    try runner.testCases(&.{
+        .{ "let link = document.getElementById('link')", "undefined" },
+        .{ "let cdata = link.firstChild", "undefined" },
+        .{ "cdata.data", "OK" },
+    }, .{});
 
-    var get_length = [_]Case{
-        .{ .src = "cdata.length === 2", .ex = "true" },
-    };
-    try checkCases(js_env, &get_length);
+    try runner.testCases(&.{
+        .{ "cdata.data = 'OK modified'", "OK modified" },
+        .{ "cdata.data === 'OK modified'", "true" },
+        .{ "cdata.data = 'OK'", "OK" },
+    }, .{});
 
-    var get_next_elem_sibling = [_]Case{
-        .{ .src = "cdata.nextElementSibling === null", .ex = "true" },
+    try runner.testCases(&.{
+        .{ "cdata.length === 2", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.nextElementSibling === null", "true" },
         // create a next element
-        .{ .src = "let next = document.createElement('a')", .ex = "undefined" },
-        .{ .src = "link.appendChild(next, cdata) !== undefined", .ex = "true" },
-        .{ .src = "cdata.nextElementSibling.localName === 'a' ", .ex = "true" },
-    };
-    try checkCases(js_env, &get_next_elem_sibling);
+        .{ "let next = document.createElement('a')", "undefined" },
+        .{ "link.appendChild(next, cdata) !== undefined", "true" },
+        .{ "cdata.nextElementSibling.localName === 'a' ", "true" },
+    }, .{});
 
-    var get_prev_elem_sibling = [_]Case{
-        .{ .src = "cdata.previousElementSibling === null", .ex = "true" },
+    try runner.testCases(&.{
+        .{ "cdata.previousElementSibling === null", "true" },
         // create a prev element
-        .{ .src = "let prev = document.createElement('div')", .ex = "undefined" },
-        .{ .src = "link.insertBefore(prev, cdata) !== undefined", .ex = "true" },
-        .{ .src = "cdata.previousElementSibling.localName === 'div' ", .ex = "true" },
-    };
-    try checkCases(js_env, &get_prev_elem_sibling);
+        .{ "let prev = document.createElement('div')", "undefined" },
+        .{ "link.insertBefore(prev, cdata) !== undefined", "true" },
+        .{ "cdata.previousElementSibling.localName === 'div' ", "true" },
+    }, .{});
 
-    var append_data = [_]Case{
-        .{ .src = "cdata.appendData(' modified')", .ex = "undefined" },
-        .{ .src = "cdata.data === 'OK modified' ", .ex = "true" },
-    };
-    try checkCases(js_env, &append_data);
+    try runner.testCases(&.{
+        .{ "cdata.appendData(' modified')", "undefined" },
+        .{ "cdata.data === 'OK modified' ", "true" },
+    }, .{});
 
-    var delete_data = [_]Case{
-        .{ .src = "cdata.deleteData('OK'.length, ' modified'.length)", .ex = "undefined" },
-        .{ .src = "cdata.data == 'OK'", .ex = "true" },
-    };
-    try checkCases(js_env, &delete_data);
+    try runner.testCases(&.{
+        .{ "cdata.deleteData('OK'.length, ' modified'.length)", "undefined" },
+        .{ "cdata.data == 'OK'", "true" },
+    }, .{});
 
-    var insert_data = [_]Case{
-        .{ .src = "cdata.insertData('OK'.length-1, 'modified')", .ex = "undefined" },
-        .{ .src = "cdata.data == 'OmodifiedK'", .ex = "true" },
-    };
-    try checkCases(js_env, &insert_data);
+    try runner.testCases(&.{
+        .{ "cdata.insertData('OK'.length-1, 'modified')", "undefined" },
+        .{ "cdata.data == 'OmodifiedK'", "true" },
+    }, .{});
 
-    var replace_data = [_]Case{
-        .{ .src = "cdata.replaceData('OK'.length-1, 'modified'.length, 'replaced')", .ex = "undefined" },
-        .{ .src = "cdata.data == 'OreplacedK'", .ex = "true" },
-    };
-    try checkCases(js_env, &replace_data);
+    try runner.testCases(&.{
+        .{ "cdata.replaceData('OK'.length-1, 'modified'.length, 'replaced')", "undefined" },
+        .{ "cdata.data == 'OreplacedK'", "true" },
+    }, .{});
 
-    var substring_data = [_]Case{
-        .{ .src = "cdata.substringData('OK'.length-1, 'replaced'.length) == 'replaced'", .ex = "true" },
-        .{ .src = "cdata.substringData('OK'.length-1, 0) == ''", .ex = "true" },
-    };
-    try checkCases(js_env, &substring_data);
+    try runner.testCases(&.{
+        .{ "cdata.substringData('OK'.length-1, 'replaced'.length) == 'replaced'", "true" },
+        .{ "cdata.substringData('OK'.length-1, 0) == ''", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.substringData('OK'.length-1, 'replaced'.length) == 'replaced'", "true" },
+        .{ "cdata.substringData('OK'.length-1, 0) == ''", "true" },
+    }, .{});
 }

src/browser/dom/comment.zig

@@ -15,27 +15,22 @@
 //
 // 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 parser = @import("netsurf");
-
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const parser = @import("../netsurf.zig");
 
 const CharacterData = @import("character_data.zig").CharacterData;
 
-const UserContext = @import("../user_context.zig").UserContext;
+const SessionState = @import("../env.zig").SessionState;
 
 // https://dom.spec.whatwg.org/#interface-comment
 pub const Comment = struct {
     pub const Self = parser.Comment;
     pub const prototype = *CharacterData;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
-    pub fn constructor(userctx: UserContext, data: ?[]const u8) !*parser.Comment {
+    pub fn constructor(data: ?[]const u8, state: *const SessionState) !*parser.Comment {
         return parser.documentCreateComment(
-            parser.documentHTMLToDocument(userctx.document),
+            parser.documentHTMLToDocument(state.document.?),
             data orelse "",
         );
     }
@@ -44,16 +39,16 @@ pub const Comment = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var constructor = [_]Case{
-        .{ .src = "let comment = new Comment('foo')", .ex = "undefined" },
-        .{ .src = "comment.data", .ex = "foo" },
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Comment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "let emptycomment = new Comment()", .ex = "undefined" },
-        .{ .src = "emptycomment.data", .ex = "" },
-    };
-    try checkCases(js_env, &constructor);
+    try runner.testCases(&.{
+        .{ "let comment = new Comment('foo')", "undefined" },
+        .{ "comment.data", "foo" },
+
+        .{ "let emptycomment = new Comment()", "undefined" },
+        .{ "emptycomment.data", "" },
+    }, .{});
 }

src/browser/dom/css.zig

@@ -18,7 +18,7 @@
 
 const std = @import("std");
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const css = @import("../css/css.zig");
 const Node = @import("../css/libdom.zig").Node;
@@ -49,7 +49,7 @@ const MatchAll = struct {
     fn init(alloc: std.mem.Allocator) MatchAll {
         return .{
             .alloc = alloc,
-            .nl = NodeList.init(),
+            .nl = .{},
         };
     }
 
@@ -62,7 +62,8 @@ const MatchAll = struct {
     }
 
     fn toOwnedList(m: *MatchAll) NodeList {
-        defer m.nl = NodeList.init();
+        // reset it.
+        defer m.nl = .{};
         return m.nl;
     }
 };

src/browser/dom/document.zig

@@ -0,0 +1,432 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const Node = @import("node.zig").Node;
+const NodeList = @import("nodelist.zig").NodeList;
+const NodeUnion = @import("node.zig").Union;
+
+const collection = @import("html_collection.zig");
+const css = @import("css.zig");
+
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+
+const DOMImplementation = @import("implementation.zig").DOMImplementation;
+
+// WEB IDL https://dom.spec.whatwg.org/#document
+pub const Document = struct {
+    pub const Self = parser.Document;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn constructor(state: *const SessionState) !*parser.DocumentHTML {
+        const doc = try parser.documentCreateDocument(
+            try parser.documentHTMLGetTitle(state.document.?),
+        );
+
+        // we have to work w/ document instead of html document.
+        const ddoc = parser.documentHTMLToDocument(doc);
+        const ccur = parser.documentHTMLToDocument(state.document.?);
+        try parser.documentSetDocumentURI(ddoc, try parser.documentGetDocumentURI(ccur));
+        try parser.documentSetInputEncoding(ddoc, try parser.documentGetInputEncoding(ccur));
+
+        return doc;
+    }
+
+    // JS funcs
+    // --------
+    pub fn get_implementation(_: *parser.Document) DOMImplementation {
+        return DOMImplementation{};
+    }
+
+    pub fn get_documentElement(self: *parser.Document) !?ElementUnion {
+        const e = try parser.documentGetDocumentElement(self);
+        if (e == null) return null;
+        return try Element.toInterface(e.?);
+    }
+
+    pub fn get_documentURI(self: *parser.Document) ![]const u8 {
+        return try parser.documentGetDocumentURI(self);
+    }
+
+    pub fn get_URL(self: *parser.Document) ![]const u8 {
+        return try get_documentURI(self);
+    }
+
+    // TODO implement contentType
+    pub fn get_contentType(self: *parser.Document) []const u8 {
+        _ = self;
+        return "text/html";
+    }
+
+    // TODO implement compactMode
+    pub fn get_compatMode(self: *parser.Document) []const u8 {
+        _ = self;
+        return "CSS1Compat";
+    }
+
+    pub fn get_characterSet(self: *parser.Document) ![]const u8 {
+        return try parser.documentGetInputEncoding(self);
+    }
+
+    // alias of get_characterSet
+    pub fn get_charset(self: *parser.Document) ![]const u8 {
+        return try get_characterSet(self);
+    }
+
+    // alias of get_characterSet
+    pub fn get_inputEncoding(self: *parser.Document) ![]const u8 {
+        return try get_characterSet(self);
+    }
+
+    pub fn get_doctype(self: *parser.Document) !?*parser.DocumentType {
+        return try parser.documentGetDoctype(self);
+    }
+
+    pub fn _createEvent(_: *parser.Document, eventCstr: []const u8) !*parser.Event {
+        // TODO: for now only "Event" constructor is supported
+        // see table on https://dom.spec.whatwg.org/#dom-document-createevent $2
+        if (std.ascii.eqlIgnoreCase(eventCstr, "Event") or std.ascii.eqlIgnoreCase(eventCstr, "Events")) {
+            return try parser.eventCreate();
+        }
+        return parser.DOMError.NotSupported;
+    }
+
+    pub fn _getElementById(self: *parser.Document, id: []const u8) !?ElementUnion {
+        const e = try parser.documentGetElementById(self, id) orelse return null;
+        return try Element.toInterface(e);
+    }
+
+    pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
+        const e = try parser.documentCreateElement(self, tag_name);
+        return try Element.toInterface(e);
+    }
+
+    pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {
+        const e = try parser.documentCreateElementNS(self, ns, tag_name);
+        return try Element.toInterface(e);
+    }
+
+    // We can't simply use libdom dom_document_get_elements_by_tag_name here.
+    // Indeed, netsurf implemented a previous dom spec when
+    // getElementsByTagName returned a NodeList.
+    // But since
+    // https://github.com/whatwg/dom/commit/190700b7c12ecfd3b5ebdb359ab1d6ea9cbf7749
+    // the spec changed to return an HTMLCollection instead.
+    // That's why we reimplemented getElementsByTagName by using an
+    // HTMLCollection in zig here.
+    pub fn _getElementsByTagName(
+        self: *parser.Document,
+        tag_name: []const u8,
+        state: *SessionState,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(state.arena, parser.documentToNode(self), tag_name, true);
+    }
+
+    pub fn _getElementsByClassName(
+        self: *parser.Document,
+        classNames: []const u8,
+        state: *SessionState,
+    ) !collection.HTMLCollection {
+        const allocator = state.arena;
+        return try collection.HTMLCollectionByClassName(allocator, parser.documentToNode(self), classNames, true);
+    }
+
+    pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
+        return try parser.documentCreateDocumentFragment(self);
+    }
+
+    pub fn _createTextNode(self: *parser.Document, data: []const u8) !*parser.Text {
+        return try parser.documentCreateTextNode(self, data);
+    }
+
+    pub fn _createCDATASection(self: *parser.Document, data: []const u8) !*parser.CDATASection {
+        return try parser.documentCreateCDATASection(self, data);
+    }
+
+    pub fn _createComment(self: *parser.Document, data: []const u8) !*parser.Comment {
+        return try parser.documentCreateComment(self, data);
+    }
+
+    pub fn _createProcessingInstruction(self: *parser.Document, target: []const u8, data: []const u8) !*parser.ProcessingInstruction {
+        return try parser.documentCreateProcessingInstruction(self, target, data);
+    }
+
+    pub fn _importNode(self: *parser.Document, node: *parser.Node, deep: ?bool) !NodeUnion {
+        const n = try parser.documentImportNode(self, node, deep orelse false);
+        return try Node.toInterface(n);
+    }
+
+    pub fn _adoptNode(self: *parser.Document, node: *parser.Node) !NodeUnion {
+        const n = try parser.documentAdoptNode(self, node);
+        return try Node.toInterface(n);
+    }
+
+    pub fn _createAttribute(self: *parser.Document, name: []const u8) !*parser.Attribute {
+        return try parser.documentCreateAttribute(self, name);
+    }
+
+    pub fn _createAttributeNS(self: *parser.Document, ns: []const u8, qname: []const u8) !*parser.Attribute {
+        return try parser.documentCreateAttributeNS(self, ns, qname);
+    }
+
+    // ParentNode
+    // https://dom.spec.whatwg.org/#parentnode
+    pub fn get_children(self: *parser.Document) !collection.HTMLCollection {
+        return try collection.HTMLCollectionChildren(parser.documentToNode(self), false);
+    }
+
+    pub fn get_firstElementChild(self: *parser.Document) !?ElementUnion {
+        const elt = try parser.documentGetDocumentElement(self) orelse return null;
+        return try Element.toInterface(elt);
+    }
+
+    pub fn get_lastElementChild(self: *parser.Document) !?ElementUnion {
+        const elt = try parser.documentGetDocumentElement(self) orelse return null;
+        return try Element.toInterface(elt);
+    }
+
+    pub fn get_childElementCount(self: *parser.Document) !u32 {
+        _ = try parser.documentGetDocumentElement(self) orelse return 0;
+        return 1;
+    }
+
+    pub fn _querySelector(self: *parser.Document, selector: []const u8, state: *SessionState) !?ElementUnion {
+        if (selector.len == 0) return null;
+
+        const allocator = state.arena;
+        const n = try css.querySelector(allocator, parser.documentToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try Element.toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.Document, selector: []const u8, state: *SessionState) !NodeList {
+        const allocator = state.arena;
+        return css.querySelectorAll(allocator, parser.documentToNode(self), selector);
+    }
+
+    pub fn _prepend(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.documentToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.documentToNode(self), nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.documentToNode(self), nodes);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Document" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "document.__proto__.__proto__.constructor.name", "Document" },
+        .{ "document.__proto__.__proto__.__proto__.constructor.name", "Node" },
+        .{ "document.__proto__.__proto__.__proto__.__proto__.constructor.name", "EventTarget" },
+
+        .{ "let newdoc = new Document()", "undefined" },
+        .{ "newdoc.documentElement", "null" },
+        .{ "newdoc.children.length", "0" },
+        .{ "newdoc.getElementsByTagName('*').length", "0" },
+        .{ "newdoc.getElementsByTagName('*').item(0)", "null" },
+        .{ "newdoc.inputEncoding === document.inputEncoding", "true" },
+        .{ "newdoc.documentURI === document.documentURI", "true" },
+        .{ "newdoc.URL === document.URL", "true" },
+        .{ "newdoc.compatMode === document.compatMode", "true" },
+        .{ "newdoc.characterSet === document.characterSet", "true" },
+        .{ "newdoc.charset === document.charset", "true" },
+        .{ "newdoc.contentType === document.contentType", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let getElementById = document.getElementById('content')", "undefined" },
+        .{ "getElementById.constructor.name", "HTMLDivElement" },
+        .{ "getElementById.localName", "div" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let getElementsByTagName = document.getElementsByTagName('p')", "undefined" },
+        .{ "getElementsByTagName.length", "2" },
+        .{ "getElementsByTagName.item(0).localName", "p" },
+        .{ "getElementsByTagName.item(1).localName", "p" },
+        .{ "let getElementsByTagNameAll = document.getElementsByTagName('*')", "undefined" },
+        .{ "getElementsByTagNameAll.length", "8" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(7).localName", "p" },
+        .{ "getElementsByTagNameAll.namedItem('para-empty-child').localName", "span" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let ok = document.getElementsByClassName('ok')", "undefined" },
+        .{ "ok.length", "2" },
+        .{ "let empty = document.getElementsByClassName('empty')", "undefined" },
+        .{ "empty.length", "1" },
+        .{ "let emptyok = document.getElementsByClassName('empty ok')", "undefined" },
+        .{ "emptyok.length", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let e = document.documentElement", "undefined" },
+        .{ "e.localName", "html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.characterSet", "UTF-8" },
+        .{ "document.charset", "UTF-8" },
+        .{ "document.inputEncoding", "UTF-8" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.compatMode", "CSS1Compat" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.contentType", "text/html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.documentURI", "about:blank" },
+        .{ "document.URL", "about:blank" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let impl = document.implementation", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let d = new Document()", "undefined" },
+        .{ "d.characterSet", "UTF-8" },
+        .{ "d.URL", "about:blank" },
+        .{ "d.documentURI", "about:blank" },
+        .{ "d.compatMode", "CSS1Compat" },
+        .{ "d.contentType", "text/html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createDocumentFragment()", "undefined" },
+        .{ "v.nodeName", "#document-fragment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createTextNode('foo')", "undefined" },
+        .{ "v.nodeName", "#text" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createCDATASection('foo')", "undefined" },
+        .{ "v.nodeName", "#cdata-section" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createComment('foo')", "undefined" },
+        .{ "v.nodeName", "#comment" },
+        .{ "let v2 = v.cloneNode()", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let pi = document.createProcessingInstruction('foo', 'bar')", "undefined" },
+        .{ "pi.target", "foo" },
+        .{ "let pi2 = pi.cloneNode()", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let nimp = document.getElementById('content')", "undefined" },
+        .{ "var v = document.importNode(nimp)", "undefined" },
+        .{ "v.nodeName", "DIV" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createAttribute('foo')", "undefined" },
+        .{ "v.nodeName", "foo" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.children.length", "1" },
+        .{ "document.children.item(0).nodeName", "HTML" },
+        .{ "document.firstElementChild.nodeName", "HTML" },
+        .{ "document.lastElementChild.nodeName", "HTML" },
+        .{ "document.childElementCount", "1" },
+
+        .{ "let nd = new Document()", "undefined" },
+        .{ "nd.children.length", "0" },
+        .{ "nd.children.item(0)", "null" },
+        .{ "nd.firstElementChild", "null" },
+        .{ "nd.lastElementChild", "null" },
+        .{ "nd.childElementCount", "0" },
+
+        .{ "let emptydoc = document.createElement('html')", "undefined" },
+        .{ "emptydoc.prepend(document.createElement('html'))", "undefined" },
+
+        .{ "let emptydoc2 = document.createElement('html')", "undefined" },
+        .{ "emptydoc2.append(document.createElement('html'))", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.querySelector('')", "null" },
+        .{ "document.querySelector('*').nodeName", "HTML" },
+        .{ "document.querySelector('#content').id", "content" },
+        .{ "document.querySelector('#para').id", "para" },
+        .{ "document.querySelector('.ok').id", "link" },
+        .{ "document.querySelector('a ~ p').id", "para-empty" },
+        .{ "document.querySelector(':root').nodeName", "HTML" },
+
+        .{ "document.querySelectorAll('p').length", "2" },
+        .{
+            \\  Array.from(document.querySelectorAll('#content > p#para-empty'))
+            \\    .map(row => row.querySelector('span').textContent)
+            \\    .length;
+            ,
+            "1",
+        },
+    }, .{});
+
+    // this test breaks the doc structure, keep it at the end of the test
+    // suite.
+    try runner.testCases(&.{
+        .{ "let nadop = document.getElementById('content')", "undefined" },
+        .{ "var v = document.adoptNode(nadop)", "undefined" },
+        .{ "v.nodeName", "DIV" },
+    }, .{});
+
+    const Case = testing.JsRunner.Case;
+    const tags = comptime parser.Tag.all();
+    var createElements: [(tags.len) * 2]Case = undefined;
+    inline for (tags, 0..) |tag, i| {
+        const tag_name = @tagName(tag);
+        createElements[i * 2] = Case{
+            "var " ++ tag_name ++ "Elem = document.createElement('" ++ tag_name ++ "')",
+            "undefined",
+        };
+        createElements[(i * 2) + 1] = Case{
+            tag_name ++ "Elem.localName",
+            tag_name,
+        };
+    }
+    try runner.testCases(&createElements, .{});
+}

src/browser/dom/document_fragment.zig

@@ -0,0 +1,74 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const Node = @import("node.zig").Node;
+
+// WEB IDL https://dom.spec.whatwg.org/#documentfragment
+pub const DocumentFragment = struct {
+    pub const Self = parser.DocumentFragment;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn constructor(state: *const SessionState) !*parser.DocumentFragment {
+        return parser.documentCreateDocumentFragment(
+            parser.documentHTMLToDocument(state.document.?),
+        );
+    }
+
+    pub fn _isEqualNode(self: *parser.DocumentFragment, other_node: *parser.Node) !bool {
+        const other_type = try parser.nodeType(other_node);
+        if (other_type != .document_fragment) {
+            return false;
+        }
+        _ = self;
+        return true;
+    }
+
+    pub fn _prepend(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.documentFragmentToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.documentFragmentToNode(self), nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.documentFragmentToNode(self), nodes);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.DocumentFragment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const dc = new DocumentFragment()", "undefined" },
+        .{ "dc.constructor.name", "DocumentFragment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const dc1 = new DocumentFragment()", "undefined" },
+        .{ "const dc2 = new DocumentFragment()", "undefined" },
+        .{ "dc1.isEqualNode(dc1)", "true" },
+        .{ "dc1.isEqualNode(dc2)", "true" },
+    }, .{});
+}

src/browser/dom/document_type.zig

@@ -0,0 +1,80 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+
+const Node = @import("node.zig").Node;
+
+// WEB IDL https://dom.spec.whatwg.org/#documenttype
+pub const DocumentType = struct {
+    pub const Self = parser.DocumentType;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn get_name(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetName(self);
+    }
+
+    pub fn get_publicId(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetPublicId(self);
+    }
+
+    pub fn get_systemId(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetSystemId(self);
+    }
+
+    // netsurf's DocumentType doesn't implement the dom_node_get_attributes
+    // and thus will crash if we try to call nodeIsEqualNode.
+    pub fn _isEqualNode(self: *parser.DocumentType, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(other_node) != .document_type) {
+            return false;
+        }
+
+        const other: *parser.DocumentType = @ptrCast(other_node);
+        if (std.mem.eql(u8, try get_name(self), try get_name(other)) == false) {
+            return false;
+        }
+        if (std.mem.eql(u8, try get_publicId(self), try get_publicId(other)) == false) {
+            return false;
+        }
+        if (std.mem.eql(u8, try get_systemId(self), try get_systemId(other)) == false) {
+            return false;
+        }
+        return true;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.DocumentType" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let dt1 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "let dt2 = document.implementation.createDocumentType('qname2', 'pid2', 'sys2');", "undefined" },
+        .{ "let dt3 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "dt1.isEqualNode(dt1)", "true" },
+        .{ "dt1.isEqualNode(dt3)", "true" },
+        .{ "dt1.isEqualNode(dt2)", "false" },
+        .{ "dt2.isEqualNode(dt3)", "false" },
+        .{ "dt1.isEqualNode(document)", "false" },
+        .{ "document.isEqualNode(dt1)", "false" },
+    }, .{});
+}

src/browser/dom/dom.zig

@@ -20,19 +20,21 @@ const DOMException = @import("exceptions.zig").DOMException;
 const EventTarget = @import("event_target.zig").EventTarget;
 const DOMImplementation = @import("implementation.zig").DOMImplementation;
 const NamedNodeMap = @import("namednodemap.zig").NamedNodeMap;
-const DOMTokenList = @import("token_list.zig").DOMTokenList;
+const DOMTokenList = @import("token_list.zig");
 const NodeList = @import("nodelist.zig");
-const Nod = @import("node.zig");
+const Node = @import("node.zig");
 const MutationObserver = @import("mutation_observer.zig");
+const IntersectionObserver = @import("intersection_observer.zig");
 
 pub const Interfaces = .{
     DOMException,
     EventTarget,
     DOMImplementation,
     NamedNodeMap,
-    DOMTokenList,
+    DOMTokenList.Interfaces,
     NodeList.Interfaces,
-    Nod.Node,
-    Nod.Interfaces,
+    Node.Node,
+    Node.Interfaces,
     MutationObserver.Interfaces,
+    IntersectionObserver.Interfaces,
 };

src/browser/dom/element.zig

@@ -0,0 +1,611 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const collection = @import("html_collection.zig");
+const dump = @import("../dump.zig");
+const css = @import("css.zig");
+
+const Node = @import("node.zig").Node;
+const Walker = @import("walker.zig").WalkerDepthFirst;
+const NodeList = @import("nodelist.zig").NodeList;
+const HTMLElem = @import("../html/elements.zig");
+pub const Union = @import("../html/elements.zig").Union;
+
+const log = std.log.scoped(.element);
+
+// WEB IDL https://dom.spec.whatwg.org/#element
+pub const Element = struct {
+    pub const Self = parser.Element;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub const DOMRect = struct {
+        x: f64,
+        y: f64,
+        width: f64,
+        height: f64,
+    };
+
+    pub fn toInterface(e: *parser.Element) !Union {
+        return try HTMLElem.toInterface(Union, e);
+        // SVGElement and MathML are not supported yet.
+    }
+
+    // JS funcs
+    // --------
+
+    pub fn get_namespaceURI(self: *parser.Element) !?[]const u8 {
+        return try parser.nodeGetNamespace(parser.elementToNode(self));
+    }
+
+    pub fn get_prefix(self: *parser.Element) !?[]const u8 {
+        return try parser.nodeGetPrefix(parser.elementToNode(self));
+    }
+
+    pub fn get_localName(self: *parser.Element) ![]const u8 {
+        return try parser.nodeLocalName(parser.elementToNode(self));
+    }
+
+    pub fn get_tagName(self: *parser.Element) ![]const u8 {
+        return try parser.nodeName(parser.elementToNode(self));
+    }
+
+    pub fn get_id(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "id") orelse "";
+    }
+
+    pub fn set_id(self: *parser.Element, id: []const u8) !void {
+        return try parser.elementSetAttribute(self, "id", id);
+    }
+
+    pub fn get_className(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "class") orelse "";
+    }
+
+    pub fn set_className(self: *parser.Element, class: []const u8) !void {
+        return try parser.elementSetAttribute(self, "class", class);
+    }
+
+    pub fn get_slot(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "slot") orelse "";
+    }
+
+    pub fn set_slot(self: *parser.Element, slot: []const u8) !void {
+        return try parser.elementSetAttribute(self, "slot", slot);
+    }
+
+    pub fn get_classList(self: *parser.Element) !*parser.TokenList {
+        return try parser.tokenListCreate(self, "class");
+    }
+
+    pub fn get_attributes(self: *parser.Element) !*parser.NamedNodeMap {
+        // An element must have non-nil attributes.
+        return try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
+    }
+
+    pub fn get_innerHTML(self: *parser.Element, state: *SessionState) ![]const u8 {
+        var buf = std.ArrayList(u8).init(state.arena);
+        try dump.writeChildren(parser.elementToNode(self), buf.writer());
+        return buf.items;
+    }
+
+    pub fn get_outerHTML(self: *parser.Element, state: *SessionState) ![]const u8 {
+        var buf = std.ArrayList(u8).init(state.arena);
+        try dump.writeNode(parser.elementToNode(self), buf.writer());
+        return buf.items;
+    }
+
+    pub fn set_innerHTML(self: *parser.Element, str: []const u8) !void {
+        const node = parser.elementToNode(self);
+        const doc = try parser.nodeOwnerDocument(node) orelse return parser.DOMError.WrongDocument;
+        // parse the fragment
+        const fragment = try parser.documentParseFragmentFromStr(doc, str);
+
+        // remove existing children
+        try Node.removeChildren(node);
+
+        // get fragment body children
+        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;
+
+        // append children to the node
+        const ln = try parser.nodeListLength(children);
+        var i: u32 = 0;
+        while (i < ln) {
+            defer i += 1;
+            const child = try parser.nodeListItem(children, i) orelse continue;
+            _ = try parser.nodeAppendChild(node, child);
+        }
+    }
+
+    // The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
+    // Returns the closest ancestor Element or itself, which matches the selectors. If there are no such element, null.
+    pub fn _closest(self: *parser.Element, selector: []const u8, state: *SessionState) !?*parser.Element {
+        const cssParse = @import("../css/css.zig").parse;
+        const CssNodeWrap = @import("../css/libdom.zig").Node;
+        const select = try cssParse(state.call_arena, selector, .{});
+
+        var current: CssNodeWrap = .{ .node = parser.elementToNode(self) };
+        while (true) {
+            if (try select.match(current)) {
+                if (!current.isElement()) {
+                    log.err("closest: is not an element: {s}", .{try current.tag()});
+                    return null;
+                }
+                return parser.nodeToElement(current.node);
+            }
+            current = try current.parent() orelse return null;
+        }
+    }
+
+    pub fn _hasAttributes(self: *parser.Element) !bool {
+        return try parser.nodeHasAttributes(parser.elementToNode(self));
+    }
+
+    pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
+        return try parser.elementGetAttribute(self, qname);
+    }
+
+    pub fn _getAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !?[]const u8 {
+        return try parser.elementGetAttributeNS(self, ns, qname);
+    }
+
+    pub fn _setAttribute(self: *parser.Element, qname: []const u8, value: []const u8) !void {
+        return try parser.elementSetAttribute(self, qname, value);
+    }
+
+    pub fn _setAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8, value: []const u8) !void {
+        return try parser.elementSetAttributeNS(self, ns, qname, value);
+    }
+
+    pub fn _removeAttribute(self: *parser.Element, qname: []const u8) !void {
+        return try parser.elementRemoveAttribute(self, qname);
+    }
+
+    pub fn _removeAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !void {
+        return try parser.elementRemoveAttributeNS(self, ns, qname);
+    }
+
+    pub fn _hasAttribute(self: *parser.Element, qname: []const u8) !bool {
+        return try parser.elementHasAttribute(self, qname);
+    }
+
+    pub fn _hasAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !bool {
+        return try parser.elementHasAttributeNS(self, ns, qname);
+    }
+
+    // https://dom.spec.whatwg.org/#dom-element-toggleattribute
+    pub fn _toggleAttribute(self: *parser.Element, qname: []u8, force: ?bool) !bool {
+        _ = std.ascii.lowerString(qname, qname);
+        const exists = try parser.elementHasAttribute(self, qname);
+
+        // If attribute is null, then:
+        if (!exists) {
+            // If force is not given or is true, create an attribute whose
+            // local name is qualifiedName, value is the empty string and node
+            // document is this’s node document, then append this attribute to
+            // this, and then return true.
+            if (force == null or force.?) {
+                try parser.elementSetAttribute(self, qname, "");
+                return true;
+            }
+            if (try parser.validateName(qname) == false) {
+                return parser.DOMError.InvalidCharacter;
+            }
+
+            // Return false.
+            return false;
+        }
+
+        // Otherwise, if force is not given or is false, remove an attribute
+        // given qualifiedName and this, and then return false.
+        if (force == null or !force.?) {
+            try parser.elementRemoveAttribute(self, qname);
+            return false;
+        }
+
+        // Return true.
+        return true;
+    }
+
+    pub fn _getAttributeNode(self: *parser.Element, name: []const u8) !?*parser.Attribute {
+        return try parser.elementGetAttributeNode(self, name);
+    }
+
+    pub fn _getAttributeNodeNS(self: *parser.Element, ns: []const u8, name: []const u8) !?*parser.Attribute {
+        return try parser.elementGetAttributeNodeNS(self, ns, name);
+    }
+
+    pub fn _setAttributeNode(self: *parser.Element, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.elementSetAttributeNode(self, attr);
+    }
+
+    pub fn _setAttributeNodeNS(self: *parser.Element, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.elementSetAttributeNodeNS(self, attr);
+    }
+
+    pub fn _removeAttributeNode(self: *parser.Element, attr: *parser.Attribute) !*parser.Attribute {
+        return try parser.elementRemoveAttributeNode(self, attr);
+    }
+
+    pub fn _getElementsByTagName(
+        self: *parser.Element,
+        tag_name: []const u8,
+        state: *SessionState,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(
+            state.arena,
+            parser.elementToNode(self),
+            tag_name,
+            false,
+        );
+    }
+
+    pub fn _getElementsByClassName(
+        self: *parser.Element,
+        classNames: []const u8,
+        state: *SessionState,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByClassName(
+            state.arena,
+            parser.elementToNode(self),
+            classNames,
+            false,
+        );
+    }
+
+    // ParentNode
+    // https://dom.spec.whatwg.org/#parentnode
+    pub fn get_children(self: *parser.Element) !collection.HTMLCollection {
+        return try collection.HTMLCollectionChildren(parser.elementToNode(self), false);
+    }
+
+    pub fn get_firstElementChild(self: *parser.Element) !?Union {
+        var children = try get_children(self);
+        return try children._item(0);
+    }
+
+    pub fn get_lastElementChild(self: *parser.Element) !?Union {
+        // TODO we could check the last child node first, if it's an element,
+        // we can return it directly instead of looping twice over the
+        // children.
+        var children = try get_children(self);
+        const ln = try children.get_length();
+        if (ln == 0) return null;
+        return try children._item(ln - 1);
+    }
+
+    pub fn get_childElementCount(self: *parser.Element) !u32 {
+        var children = try get_children(self);
+        return try children.get_length();
+    }
+
+    // NonDocumentTypeChildNode
+    // https://dom.spec.whatwg.org/#interface-nondocumenttypechildnode
+    pub fn get_previousElementSibling(self: *parser.Element) !?Union {
+        const res = try parser.nodePreviousElementSibling(parser.elementToNode(self));
+        if (res == null) return null;
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
+    }
+
+    pub fn get_nextElementSibling(self: *parser.Element) !?Union {
+        const res = try parser.nodeNextElementSibling(parser.elementToNode(self));
+        if (res == null) return null;
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
+    }
+
+    fn getElementById(self: *parser.Element, id: []const u8) !?*parser.Node {
+        // walk over the node tree fo find the node by id.
+        const root = parser.elementToNode(self);
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = try walker.get_next(root, next) orelse return null;
+            // ignore non-element nodes.
+            if (try parser.nodeType(next.?) != .element) {
+                continue;
+            }
+            const e = parser.nodeToElement(next.?);
+            if (std.mem.eql(u8, id, try get_id(e))) return next;
+        }
+    }
+
+    pub fn _querySelector(self: *parser.Element, selector: []const u8, state: *SessionState) !?Union {
+        if (selector.len == 0) return null;
+
+        const n = try css.querySelector(state.arena, parser.elementToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.Element, selector: []const u8, state: *SessionState) !NodeList {
+        return css.querySelectorAll(state.arena, parser.elementToNode(self), selector);
+    }
+
+    pub fn _prepend(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.elementToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.elementToNode(self), nodes);
+    }
+
+    pub fn _before(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.elementToNode(self);
+        return Node.before(ref_node, nodes);
+    }
+
+    pub fn _after(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.elementToNode(self);
+        return Node.after(ref_node, nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.elementToNode(self), nodes);
+    }
+
+    pub fn _getBoundingClientRect(self: *parser.Element, state: *SessionState) !DOMRect {
+        return state.renderer.getRect(self);
+    }
+
+    // returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
+    // We do not render so just always return the element's rect.
+    pub fn _getClientRects(self: *parser.Element, state: *SessionState) ![1]DOMRect {
+        return [_]DOMRect{try state.renderer.getRect(self)};
+    }
+
+    pub fn get_clientWidth(_: *parser.Element, state: *SessionState) u32 {
+        return state.renderer.width();
+    }
+
+    pub fn get_clientHeight(_: *parser.Element, state: *SessionState) u32 {
+        return state.renderer.height();
+    }
+
+    pub fn _matches(self: *parser.Element, selectors: []const u8, state: *SessionState) !bool {
+        const cssParse = @import("../css/css.zig").parse;
+        const CssNodeWrap = @import("../css/libdom.zig").Node;
+        const s = try cssParse(state.call_arena, selectors, .{});
+        return s.match(CssNodeWrap{ .node = parser.elementToNode(self) });
+    }
+
+    pub fn _scrollIntoViewIfNeeded(_: *parser.Element, center_if_needed: ?bool) void {
+        _ = center_if_needed;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Element" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let g = document.getElementById('content')", "undefined" },
+        .{ "g.namespaceURI", "http://www.w3.org/1999/xhtml" },
+        .{ "g.prefix", "null" },
+        .{ "g.localName", "div" },
+        .{ "g.tagName", "DIV" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let gs = document.getElementById('content')", "undefined" },
+        .{ "gs.id", "content" },
+        .{ "gs.id = 'foo'", "foo" },
+        .{ "gs.id", "foo" },
+        .{ "gs.id = 'content'", "content" },
+        .{ "gs.className", "" },
+        .{ "let gs2 = document.getElementById('para-empty')", "undefined" },
+        .{ "gs2.className", "ok empty" },
+        .{ "gs2.className = 'foo bar baz'", "foo bar baz" },
+        .{ "gs2.className", "foo bar baz" },
+        .{ "gs2.className = 'ok empty'", "ok empty" },
+        .{ "let cl = gs2.classList", "undefined" },
+        .{ "cl.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el2 = document.createElement('div');", "undefined" },
+        .{ "el2.id = 'closest'; el2.className = 'ok';", "ok" },
+        .{ "el2.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "el2.closest('.ok')", "[object HTMLDivElement]" },
+        .{ "el2.closest('#9000')", "null" },
+        .{ "el2.closest('.notok')", "null" },
+
+        .{ "const sp = document.createElement('span');", "undefined" },
+        .{ "el2.appendChild(sp);", "[object HTMLSpanElement]" },
+        .{ "sp.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "sp.closest('#9000')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content')", "undefined" },
+        .{ "a.hasAttributes()", "true" },
+        .{ "a.attributes.length", "1" },
+
+        .{ "a.getAttribute('id')", "content" },
+
+        .{ "a.hasAttribute('foo')", "false" },
+        .{ "a.getAttribute('foo')", "null" },
+
+        .{ "a.setAttribute('foo', 'bar')", "undefined" },
+        .{ "a.hasAttribute('foo')", "true" },
+        .{ "a.getAttribute('foo')", "bar" },
+
+        .{ "a.setAttribute('foo', 'baz')", "undefined" },
+        .{ "a.hasAttribute('foo')", "true" },
+        .{ "a.getAttribute('foo')", "baz" },
+
+        .{ "a.removeAttribute('foo')", "undefined" },
+        .{ "a.hasAttribute('foo')", "false" },
+        .{ "a.getAttribute('foo')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let b = document.getElementById('content')", "undefined" },
+        .{ "b.toggleAttribute('foo')", "true" },
+        .{ "b.hasAttribute('foo')", "true" },
+        .{ "b.getAttribute('foo')", "" },
+
+        .{ "b.toggleAttribute('foo')", "false" },
+        .{ "b.hasAttribute('foo')", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c = document.getElementById('content')", "undefined" },
+        .{ "c.children.length", "3" },
+        .{ "c.firstElementChild.nodeName", "A" },
+        .{ "c.lastElementChild.nodeName", "P" },
+        .{ "c.childElementCount", "3" },
+
+        .{ "c.prepend(document.createTextNode('foo'))", "undefined" },
+        .{ "c.append(document.createTextNode('bar'))", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let d = document.getElementById('para')", "undefined" },
+        .{ "d.previousElementSibling.nodeName", "P" },
+        .{ "d.nextElementSibling", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let e = document.getElementById('content')", "undefined" },
+        .{ "e.querySelector('foo')", "null" },
+        .{ "e.querySelector('#foo')", "null" },
+        .{ "e.querySelector('#link').id", "link" },
+        .{ "e.querySelector('#para').id", "para" },
+        .{ "e.querySelector('*').id", "link" },
+        .{ "e.querySelector('')", "null" },
+        .{ "e.querySelector('*').id", "link" },
+        .{ "e.querySelector('#content')", "null" },
+        .{ "e.querySelector('#para').id", "para" },
+        .{ "e.querySelector('.ok').id", "link" },
+        .{ "e.querySelector('a ~ p').id", "para-empty" },
+
+        .{ "e.querySelectorAll('foo').length", "0" },
+        .{ "e.querySelectorAll('#foo').length", "0" },
+        .{ "e.querySelectorAll('#link').length", "1" },
+        .{ "e.querySelectorAll('#link').item(0).id", "link" },
+        .{ "e.querySelectorAll('#para').length", "1" },
+        .{ "e.querySelectorAll('#para').item(0).id", "para" },
+        .{ "e.querySelectorAll('*').length", "4" },
+        .{ "e.querySelectorAll('p').length", "2" },
+        .{ "e.querySelectorAll('.ok').item(0).id", "link" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let f = document.getElementById('content')", "undefined" },
+        .{ "let ff = document.createAttribute('foo')", "undefined" },
+        .{ "f.setAttributeNode(ff)", "null" },
+        .{ "f.getAttributeNode('foo').name", "foo" },
+        .{ "f.removeAttributeNode(ff).name", "foo" },
+        .{ "f.getAttributeNode('bar')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').innerHTML", " And" },
+        .{ "document.getElementById('para-empty').innerHTML.trim()", "<span id=\"para-empty-child\"></span>" },
+
+        .{ "let h = document.getElementById('para-empty')", "undefined" },
+        .{ "const prev = h.innerHTML", "undefined" },
+        .{ "h.innerHTML = '<p id=\"hello\">hello world</p>'", "<p id=\"hello\">hello world</p>" },
+        .{ "h.innerHTML", "<p id=\"hello\">hello world</p>" },
+        .{ "h.firstChild.nodeName", "P" },
+        .{ "h.firstChild.id", "hello" },
+        .{ "h.firstChild.textContent", "hello world" },
+        .{ "h.innerHTML = prev; true", "true" },
+        .{ "document.getElementById('para-empty').innerHTML.trim()", "<span id=\"para-empty-child\"></span>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').outerHTML", "<p id=\"para\"> And</p>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').clientWidth", "1" },
+        .{ "document.getElementById('para').clientHeight", "1" },
+
+        .{ "let r1 = document.getElementById('para').getBoundingClientRect()", "undefined" },
+        .{ "r1.x", "0" },
+        .{ "r1.y", "0" },
+        .{ "r1.width", "1" },
+        .{ "r1.height", "1" },
+
+        .{ "let r2 = document.getElementById('content').getBoundingClientRect()", "undefined" },
+        .{ "r2.x", "1" },
+        .{ "r2.y", "0" },
+        .{ "r2.width", "1" },
+        .{ "r2.height", "1" },
+
+        .{ "let r3 = document.getElementById('para').getBoundingClientRect()", "undefined" },
+        .{ "r3.x", "0" },
+        .{ "r3.y", "0" },
+        .{ "r3.width", "1" },
+        .{ "r3.height", "1" },
+
+        .{ "document.getElementById('para').clientWidth", "2" },
+        .{ "document.getElementById('para').clientHeight", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el = document.createElement('div');", "undefined" },
+        .{ "el.id = 'matches'; el.className = 'ok';", "ok" },
+        .{ "el.matches('#matches')", "true" },
+        .{ "el.matches('.ok')", "true" },
+        .{ "el.matches('#9000')", "false" },
+        .{ "el.matches('.notok')", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el3 = document.createElement('div');", "undefined" },
+        .{ "el3.scrollIntoViewIfNeeded();", "undefined" },
+        .{ "el3.scrollIntoViewIfNeeded(false);", "undefined" },
+    }, .{});
+
+    // before
+    try runner.testCases(&.{
+        .{ "const before_container = document.createElement('div');", "undefined" },
+        .{ "document.append(before_container);", "undefined" },
+        .{ "const b1 = document.createElement('div');", "undefined" },
+        .{ "before_container.append(b1);", "undefined" },
+
+        .{ "const b1_a = document.createElement('p');", "undefined" },
+        .{ "b1.before(b1_a, 'over 9000');", "undefined" },
+        .{ "before_container.innerHTML", "<p></p>over 9000<div></div>" },
+    }, .{});
+
+    // after
+    try runner.testCases(&.{
+        .{ "const after_container = document.createElement('div');", "undefined" },
+        .{ "document.append(after_container);", "undefined" },
+        .{ "const a1 = document.createElement('div');", "undefined" },
+        .{ "after_container.append(a1);", "undefined" },
+
+        .{ "const a1_a = document.createElement('p');", "undefined" },
+        .{ "a1.after('over 9000', a1_a);", "undefined" },
+        .{ "after_container.innerHTML", "<div></div>over 9000<p></p>" },
+    }, .{});
+}

src/browser/dom/event_target.zig

@@ -0,0 +1,251 @@
+// Copyright (C) 2023-2024  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 Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const EventHandler = @import("../events/event.zig").EventHandler;
+
+const DOMException = @import("exceptions.zig").DOMException;
+const Nod = @import("node.zig");
+
+// EventTarget interfaces
+pub const Union = Nod.Union;
+
+// EventTarget implementation
+pub const EventTarget = struct {
+    pub const Self = parser.EventTarget;
+    pub const Exception = DOMException;
+
+    pub fn toInterface(et: *parser.EventTarget) !Union {
+        // NOTE: for now we state that all EventTarget are Nodes
+        // TODO: handle other types (eg. Window)
+        return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
+    }
+
+    // JS funcs
+    // --------
+
+    const AddEventListenerOpts = union(enum) {
+        opts: Opts,
+        capture: bool,
+
+        const Opts = struct {
+            capture: ?bool,
+            once: ?bool, // currently does nothing
+            passive: ?bool, // currently does nothing
+            signal: ?bool, // currently does nothing
+        };
+    };
+
+    pub fn _addEventListener(
+        self: *parser.EventTarget,
+        typ: []const u8,
+        cbk: Env.Callback,
+        opts_: ?AddEventListenerOpts,
+        state: *SessionState,
+    ) !void {
+        var capture = false;
+        if (opts_) |opts| {
+            switch (opts) {
+                .capture => |c| capture = c,
+                .opts => |o| {
+                    // Done this way so that, for common cases that _only_ set
+                    // capture, i.e. {captrue: true}, it works.
+                    // But for any case that sets any of the other flags, we
+                    // error. If we don't error, this function call would succeed
+                    // but the behavior might be wrong. At this point, it's
+                    // better to be explicit and error.
+                    if (o.once orelse false) return error.NotImplemented;
+                    if (o.signal orelse false) return error.NotImplemented;
+                    if (o.passive orelse false) return error.NotImplemented;
+                    capture = o.capture orelse false;
+                },
+            }
+        }
+
+        // check if event target has already this listener
+        const lst = try parser.eventTargetHasListener(
+            self,
+            typ,
+            capture,
+            cbk.id,
+        );
+        if (lst != null) {
+            return;
+        }
+
+        const eh = try EventHandler.init(state.arena, try cbk.withThis(self));
+
+        try parser.eventTargetAddEventListener(
+            self,
+            typ,
+            &eh.node,
+            capture,
+        );
+    }
+
+    pub fn _removeEventListener(
+        self: *parser.EventTarget,
+        typ: []const u8,
+        cbk: Env.Callback,
+        capture: ?bool,
+        // TODO: hanle EventListenerOptions
+        // see #https://github.com/lightpanda-io/jsruntime-lib/issues/114
+    ) !void {
+        // check if event target has already this listener
+        const lst = try parser.eventTargetHasListener(
+            self,
+            typ,
+            capture orelse false,
+            cbk.id,
+        );
+        if (lst == null) {
+            return;
+        }
+
+        // remove listener
+        try parser.eventTargetRemoveEventListener(
+            self,
+            typ,
+            lst.?,
+            capture orelse false,
+        );
+    }
+
+    pub fn _dispatchEvent(self: *parser.EventTarget, event: *parser.Event) !bool {
+        return try parser.eventTargetDispatchEvent(self, event);
+    }
+
+    pub fn deinit(self: *parser.EventTarget, state: *SessionState) void {
+        parser.eventTargetRemoveAllEventListeners(self, state.arena) catch unreachable;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.EventTarget" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let para = document.getElementById('para')", "undefined" },
+        // NOTE: as some event properties will change during the event dispatching phases
+        // we need to copy thoses values in order to check them afterwards
+        .{
+            \\ var nb = 0; var evt; var phase; var cur;
+            \\ function cbk(event) {
+            \\   evt = event;
+            \\   phase = event.eventPhase;
+            \\   cur = event.currentTarget;
+            \\   nb ++;
+            \\ }
+            ,
+            "undefined",
+        },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "content.addEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "basic" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "0" }, // handler is not called, no capture, not the target, no bubbling
+        .{ "evt === undefined", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.addEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.addEventListener('basic', cbk, true)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.removeEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.removeEventListener('basic', cbk, {capture: true})", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "content.addEventListener('capture', cbk, true)", "undefined" },
+        .{ "content.dispatchEvent(new Event('capture'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "capture" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('capture'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "capture" },
+        .{ "phase", "1" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "content.addEventListener('bubbles', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('bubbles', {bubbles: true}))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "bubbles" },
+        .{ "evt.bubbles", "true" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('bubbles', {bubbles: true}))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "bubbles" },
+        .{ "phase", "3" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+}

src/browser/dom/exceptions.zig

@@ -19,19 +19,13 @@
 const std = @import("std");
 const allocPrint = std.fmt.allocPrint;
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 // https://webidl.spec.whatwg.org/#idl-DOMException
 pub const DOMException = struct {
     err: parser.DOMError,
     str: []const u8,
 
-    pub const mem_guarantied = true;
-
     pub const ErrorSet = parser.DOMError;
 
     // static attributes
@@ -62,7 +56,7 @@ pub const DOMException = struct {
     pub const _DATA_CLONE_ERR = 25;
 
     // TODO: deinit
-    pub fn init(alloc: std.mem.Allocator, err: anyerror, callerName: []const u8) anyerror!DOMException {
+    pub fn init(alloc: std.mem.Allocator, err: anyerror, callerName: []const u8) !DOMException {
         const errCast = @as(parser.DOMError, @errorCast(err));
         const errName = DOMException.name(errCast);
         const str = switch (errCast) {
@@ -120,7 +114,7 @@ pub const DOMException = struct {
 
     // JS properties and methods
 
-    pub fn get_code(self: DOMException) u8 {
+    pub fn get_code(self: *const DOMException) u8 {
         return switch (self.err) {
             error.IndexSize => 1,
             error.StringSize => 2,
@@ -157,38 +151,41 @@ pub const DOMException = struct {
         };
     }
 
-    pub fn get_name(self: DOMException) []const u8 {
+    pub fn get_name(self: *const DOMException) []const u8 {
         return DOMException.name(self.err);
     }
 
-    pub fn get_message(self: DOMException) []const u8 {
+    pub fn get_message(self: *const DOMException) []const u8 {
         const errName = DOMException.name(self.err);
         return self.str[errName.len + 2 ..];
     }
 
-    pub fn _toString(self: DOMException) []const u8 {
+    pub fn _toString(self: *const DOMException) []const u8 {
         return self.str;
     }
 };
 
-// Tests
-// -----
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Exception" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
     const err = "Failed to execute 'appendChild' on 'Node': The new child element contains the parent.";
-    var cases = [_]Case{
-        .{ .src = "let content = document.getElementById('content')", .ex = "undefined" },
-        .{ .src = "let link = document.getElementById('link')", .ex = "undefined" },
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let link = document.getElementById('link')", "undefined" },
         // HierarchyRequestError
-        .{ .src = "var HierarchyRequestError; try {link.appendChild(content)} catch (error) {HierarchyRequestError = error} HierarchyRequestError.name", .ex = "HierarchyRequestError" },
-        .{ .src = "HierarchyRequestError.code", .ex = "3" },
-        .{ .src = "HierarchyRequestError.message", .ex = err },
-        .{ .src = "HierarchyRequestError.toString()", .ex = "HierarchyRequestError: " ++ err },
-        .{ .src = "HierarchyRequestError instanceof DOMException", .ex = "true" },
-        .{ .src = "HierarchyRequestError instanceof Error", .ex = "true" },
-    };
-    try checkCases(js_env, &cases);
+        .{
+            \\ var he;
+            \\ try { link.appendChild(content) } catch (error) { he = error}
+            \\ he.name
+            ,
+            "HierarchyRequestError",
+        },
+        .{ "he.code", "3" },
+        .{ "he.message", err },
+        .{ "he.toString()", "HierarchyRequestError: " ++ err },
+        .{ "he instanceof DOMException", "true" },
+        .{ "he instanceof Error", "true" },
+    }, .{});
 }

src/browser/dom/html_collection.zig

@@ -17,22 +17,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Allocator = std.mem.Allocator;
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-const generate = @import("../generate.zig");
-
-const utils = @import("utils.z");
 const Element = @import("element.zig").Element;
 const Union = @import("element.zig").Union;
-
+const JsThis = @import("../env.zig").JsThis;
 const Walker = @import("walker.zig").Walker;
-const WalkerDepthFirst = @import("walker.zig").WalkerDepthFirst;
-const WalkerChildren = @import("walker.zig").WalkerChildren;
-const WalkerNone = @import("walker.zig").WalkerNone;
 
 const Matcher = union(enum) {
     matchByName: MatchByName,
@@ -45,25 +37,11 @@ const Matcher = union(enum) {
 
     pub fn match(self: Matcher, node: *parser.Node) !bool {
         switch (self) {
-            inline .matchTrue => return true,
-            inline .matchFalse => return false,
-            inline .matchByTagName => |case| return case.match(node),
-            inline .matchByClassName => |case| return case.match(node),
-            inline .matchByName => |case| return case.match(node),
-            inline .matchByLinks => return MatchByLinks.match(node),
-            inline .matchByAnchors => return MatchByAnchors.match(node),
-        }
-    }
-
-    pub fn deinit(self: Matcher, alloc: std.mem.Allocator) void {
-        switch (self) {
-            inline .matchTrue => return,
-            inline .matchFalse => return,
-            inline .matchByTagName => |case| return case.deinit(alloc),
-            inline .matchByClassName => |case| return case.deinit(alloc),
-            inline .matchByName => |case| return case.deinit(alloc),
-            inline .matchByLinks => return,
-            inline .matchByAnchors => return,
+            .matchTrue => return true,
+            .matchFalse => return false,
+            .matchByLinks => return MatchByLinks.match(node),
+            .matchByAnchors => return MatchByAnchors.match(node),
+            inline else => |m| return m.match(node),
         }
     }
 };
@@ -74,54 +52,49 @@ pub const MatchByTagName = struct {
     tag: []const u8,
     is_wildcard: bool,
 
-    fn init(alloc: std.mem.Allocator, tag_name: []const u8) !MatchByTagName {
-        const tag_name_alloc = try alloc.alloc(u8, tag_name.len);
-        @memcpy(tag_name_alloc, tag_name);
-        return MatchByTagName{
-            .tag = tag_name_alloc,
-            .is_wildcard = std.mem.eql(u8, tag_name, "*"),
+    fn init(arena: Allocator, tag_name: []const u8) !MatchByTagName {
+        if (std.mem.eql(u8, tag_name, "*")) {
+            return .{ .tag = "*", .is_wildcard = true };
+        }
+
+        return .{
+            .tag = try arena.dupe(u8, tag_name),
+            .is_wildcard = false,
         };
     }
 
     pub fn match(self: MatchByTagName, node: *parser.Node) !bool {
         return self.is_wildcard or std.ascii.eqlIgnoreCase(self.tag, try parser.nodeName(node));
     }
-
-    fn deinit(self: MatchByTagName, alloc: std.mem.Allocator) void {
-        alloc.free(self.tag);
-    }
 };
 
 pub fn HTMLCollectionByTagName(
-    alloc: std.mem.Allocator,
+    arena: Allocator,
     root: ?*parser.Node,
     tag_name: []const u8,
     include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{
-            .matchByTagName = try MatchByTagName.init(alloc, tag_name),
-        },
+        .walker = .{ .walkerDepthFirst = .{} },
+        .matcher = .{ .matchByTagName = try MatchByTagName.init(arena, tag_name) },
         .include_root = include_root,
     };
 }
 
 pub const MatchByClassName = struct {
-    classNames: []const u8,
+    class_names: []const u8,
 
-    fn init(alloc: std.mem.Allocator, classNames: []const u8) !MatchByClassName {
-        const class_names_alloc = try alloc.alloc(u8, classNames.len);
-        @memcpy(class_names_alloc, classNames);
-        return MatchByClassName{
-            .classNames = class_names_alloc,
+    fn init(arena: Allocator, class_names: []const u8) !MatchByClassName {
+        return .{
+            .class_names = try arena.dupe(u8, class_names),
         };
     }
 
     pub fn match(self: MatchByClassName, node: *parser.Node) !bool {
-        var it = std.mem.splitAny(u8, self.classNames, " ");
         const e = parser.nodeToElement(node);
+
+        var it = std.mem.splitScalar(u8, self.class_names, ' ');
         while (it.next()) |c| {
             if (!try parser.elementHasClass(e, c)) {
                 return false;
@@ -130,24 +103,18 @@ pub const MatchByClassName = struct {
 
         return true;
     }
-
-    fn deinit(self: MatchByClassName, alloc: std.mem.Allocator) void {
-        alloc.free(self.classNames);
-    }
 };
 
 pub fn HTMLCollectionByClassName(
-    alloc: std.mem.Allocator,
+    arena: Allocator,
     root: ?*parser.Node,
     classNames: []const u8,
     include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{
-            .matchByClassName = try MatchByClassName.init(alloc, classNames),
-        },
+        .walker = .{ .walkerDepthFirst = .{} },
+        .matcher = .{ .matchByClassName = try MatchByClassName.init(arena, classNames) },
         .include_root = include_root,
     };
 }
@@ -155,11 +122,9 @@ pub fn HTMLCollectionByClassName(
 pub const MatchByName = struct {
     name: []const u8,
 
-    fn init(alloc: std.mem.Allocator, name: []const u8) !MatchByName {
-        const names_alloc = try alloc.alloc(u8, name.len);
-        @memcpy(names_alloc, name);
-        return MatchByName{
-            .name = names_alloc,
+    fn init(arena: Allocator, name: []const u8) !MatchByName {
+        return .{
+            .name = try arena.dupe(u8, name),
         };
     }
 
@@ -168,39 +133,59 @@ pub const MatchByName = struct {
         const nname = try parser.elementGetAttribute(e, "name") orelse return false;
         return std.mem.eql(u8, self.name, nname);
     }
-
-    fn deinit(self: MatchByName, alloc: std.mem.Allocator) void {
-        alloc.free(self.name);
-    }
 };
 
 pub fn HTMLCollectionByName(
-    alloc: std.mem.Allocator,
+    arena: Allocator,
     root: ?*parser.Node,
     name: []const u8,
     include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{
-            .matchByName = try MatchByName.init(alloc, name),
-        },
+        .walker = .{ .walkerDepthFirst = .{} },
+        .matcher = .{ .matchByName = try MatchByName.init(arena, name) },
         .include_root = include_root,
     };
 }
 
-pub fn HTMLCollectionAll(
-    root: ?*parser.Node,
-    include_root: bool,
-) !HTMLCollection {
-    return HTMLCollection{
-        .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{ .matchTrue = .{} },
-        .include_root = include_root,
+// HTMLAllCollection is a special type: instances of it are falsy. It's the only
+// object in the WebAPI that behaves like this - in fact, it's even a special
+// case in the JavaScript spec.
+// This is important, because a lot of browser detection rely on this behavior
+// to determine what browser is running.
+
+// It's also possible to use an instance like a function:
+//   document.all(3)
+//   document.all('some_id')
+pub const HTMLAllCollection = struct {
+    pub const prototype = *HTMLCollection;
+
+    proto: HTMLCollection,
+
+    pub const mark_as_undetectable = true;
+
+    pub fn init(root: ?*parser.Node) HTMLAllCollection {
+        return .{ .proto = .{
+            .root = root,
+            .walker = .{ .walkerDepthFirst = .{} },
+            .matcher = .{ .matchTrue = .{} },
+            .include_root = true,
+        } };
+    }
+
+    const CAllAsFunctionArg = union(enum) {
+        index: u32,
+        id: []const u8,
     };
-}
+
+    pub fn jsCallAsFunction(self: *HTMLAllCollection, arg: CAllAsFunctionArg) !?Union {
+        return switch (arg) {
+            .index => |i| self.proto._item(i),
+            .id => |id| self.proto._namedItem(id),
+        };
+    }
+};
 
 pub fn HTMLCollectionChildren(
     root: ?*parser.Node,
@@ -208,8 +193,8 @@ pub fn HTMLCollectionChildren(
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerChildren = .{} },
-        .matcher = Matcher{ .matchTrue = .{} },
+        .walker = .{ .walkerChildren = .{} },
+        .matcher = .{ .matchTrue = .{} },
         .include_root = include_root,
     };
 }
@@ -217,8 +202,8 @@ pub fn HTMLCollectionChildren(
 pub fn HTMLCollectionEmpty() !HTMLCollection {
     return HTMLCollection{
         .root = null,
-        .walker = Walker{ .walkerNone = .{} },
-        .matcher = Matcher{ .matchFalse = .{} },
+        .walker = .{ .walkerNone = .{} },
+        .matcher = .{ .matchFalse = .{} },
         .include_root = false,
     };
 }
@@ -243,10 +228,8 @@ pub fn HTMLCollectionByLinks(
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{
-            .matchByLinks = MatchByLinks{},
-        },
+        .walker = .{ .walkerDepthFirst = .{} },
+        .matcher = .{ .matchByLinks = MatchByLinks{} },
         .include_root = include_root,
     };
 }
@@ -270,17 +253,13 @@ pub fn HTMLCollectionByAnchors(
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
-        .walker = Walker{ .walkerDepthFirst = .{} },
-        .matcher = Matcher{
-            .matchByAnchors = MatchByAnchors{},
-        },
+        .walker = .{ .walkerDepthFirst = .{} },
+        .matcher = .{ .matchByAnchors = MatchByAnchors{} },
         .include_root = include_root,
     };
 }
 
 pub const HTMLCollectionIterator = struct {
-    pub const mem_guarantied = true;
-
     coll: *HTMLCollection,
     index: u32 = 0,
 
@@ -311,8 +290,6 @@ pub const HTMLCollectionIterator = struct {
 // dom_html_collection expects a comparison function callback as arguement.
 // But we wanted a dynamically comparison here, according to the match tagname.
 pub const HTMLCollection = struct {
-    pub const mem_guarantied = true;
-
     matcher: Matcher,
     walker: Walker,
 
@@ -324,15 +301,11 @@ pub const HTMLCollection = struct {
     include_root: bool = false,
 
     // save a state for the collection to improve the _item speed.
-    cur_idx: ?u32 = undefined,
-    cur_node: ?*parser.Node = undefined,
-
-    // array_like_keys is used to keep reference to array like interface implementation.
-    // the collection generates keys string which must be free on deinit.
-    array_like_keys: std.ArrayListUnmanaged([]u8) = .{},
+    cur_idx: ?u32 = null,
+    cur_node: ?*parser.Node = null,
 
     // start returns the first node to walk on.
-    fn start(self: HTMLCollection) !?*parser.Node {
+    fn start(self: *const HTMLCollection) !?*parser.Node {
         if (self.root == null) return null;
 
         if (self.include_root) {
@@ -412,7 +385,7 @@ pub const HTMLCollection = struct {
         return try Element.toInterface(e);
     }
 
-    pub fn _namedItem(self: *HTMLCollection, name: []const u8) !?Union {
+    pub fn _namedItem(self: *const HTMLCollection, name: []const u8) !?Union {
         if (self.root == null) return null;
         if (name.len == 0) return null;
 
@@ -454,81 +427,73 @@ pub const HTMLCollection = struct {
         return null;
     }
 
-    pub fn postAttach(self: *HTMLCollection, alloc: std.mem.Allocator, js_obj: jsruntime.JSObject) !void {
-        const ln = try self.get_length();
-        var i: u32 = 0;
-        while (i < ln) {
-            defer i += 1;
-            const k = try std.fmt.allocPrint(alloc, "{d}", .{i});
-            try self.array_like_keys.append(alloc, k);
-
-            const node = try self.item(i) orelse unreachable;
+    pub fn postAttach(self: *HTMLCollection, js_this: JsThis) !void {
+        const len = try self.get_length();
+        for (0..len) |i| {
+            const node = try self.item(@intCast(i)) orelse unreachable;
             const e = @as(*parser.Element, @ptrCast(node));
-            try js_obj.set(k, e);
+            try js_this.setIndex(@intCast(i), e, .{});
 
             if (try item_name(e)) |name| {
-                try js_obj.set(name, e);
+                // Even though an entry might have an empty id, the spec says
+                // that namedItem("") should always return null
+                if (name.len > 0) {
+                    // Named fields should not be enumerable (it is defined with
+                    // the LegacyUnenumerableNamedProperties flag.)
+                    try js_this.set(name, e, .{ .DONT_ENUM = true });
+                }
             }
         }
     }
-
-    pub fn deinit(self: *HTMLCollection, alloc: std.mem.Allocator) void {
-        for (self.array_like_keys_) |k| alloc.free(k);
-        self.array_like_keys.deinit(alloc);
-        self.matcher.deinit(alloc);
-    }
 };
 
-// Tests
-// -----
+const testing = @import("../../testing.zig");
+test "Browser.DOM.HTMLCollection" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var getElementsByTagName = [_]Case{
-        .{ .src = "let getElementsByTagName = document.getElementsByTagName('p')", .ex = "undefined" },
-        .{ .src = "getElementsByTagName.length", .ex = "2" },
-        .{ .src = "let getElementsByTagNameCI = document.getElementsByTagName('P')", .ex = "undefined" },
-        .{ .src = "getElementsByTagNameCI.length", .ex = "2" },
-        .{ .src = "getElementsByTagName.item(0).localName", .ex = "p" },
-        .{ .src = "getElementsByTagName.item(1).localName", .ex = "p" },
-        .{ .src = "let getElementsByTagNameAll = document.getElementsByTagName('*')", .ex = "undefined" },
-        .{ .src = "getElementsByTagNameAll.length", .ex = "8" },
-        .{ .src = "getElementsByTagNameAll.item(0).localName", .ex = "html" },
-        .{ .src = "getElementsByTagNameAll.item(0).localName", .ex = "html" },
-        .{ .src = "getElementsByTagNameAll.item(1).localName", .ex = "head" },
-        .{ .src = "getElementsByTagNameAll.item(0).localName", .ex = "html" },
-        .{ .src = "getElementsByTagNameAll.item(2).localName", .ex = "body" },
-        .{ .src = "getElementsByTagNameAll.item(3).localName", .ex = "div" },
-        .{ .src = "getElementsByTagNameAll.item(7).localName", .ex = "p" },
-        .{ .src = "getElementsByTagNameAll.namedItem('para-empty-child').localName", .ex = "span" },
+    try runner.testCases(&.{
+        .{ "let getElementsByTagName = document.getElementsByTagName('p')", "undefined" },
+        .{ "getElementsByTagName.length", "2" },
+        .{ "let getElementsByTagNameCI = document.getElementsByTagName('P')", "undefined" },
+        .{ "getElementsByTagNameCI.length", "2" },
+        .{ "getElementsByTagName.item(0).localName", "p" },
+        .{ "getElementsByTagName.item(1).localName", "p" },
+        .{ "let getElementsByTagNameAll = document.getElementsByTagName('*')", "undefined" },
+        .{ "getElementsByTagNameAll.length", "8" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(1).localName", "head" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(2).localName", "body" },
+        .{ "getElementsByTagNameAll.item(3).localName", "div" },
+        .{ "getElementsByTagNameAll.item(7).localName", "p" },
+        .{ "getElementsByTagNameAll.namedItem('para-empty-child').localName", "span" },
 
         // array like
-        .{ .src = "getElementsByTagNameAll[0].localName", .ex = "html" },
-        .{ .src = "getElementsByTagNameAll[7].localName", .ex = "p" },
-        .{ .src = "getElementsByTagNameAll[8]", .ex = "undefined" },
-        .{ .src = "getElementsByTagNameAll['para-empty-child'].localName", .ex = "span" },
-        .{ .src = "getElementsByTagNameAll['foo']", .ex = "undefined" },
+        .{ "getElementsByTagNameAll[0].localName", "html" },
+        .{ "getElementsByTagNameAll[7].localName", "p" },
+        .{ "getElementsByTagNameAll[8]", "undefined" },
+        .{ "getElementsByTagNameAll['para-empty-child'].localName", "span" },
+        .{ "getElementsByTagNameAll['foo']", "undefined" },
 
-        .{ .src = "document.getElementById('content').getElementsByTagName('*').length", .ex = "4" },
-        .{ .src = "document.getElementById('content').getElementsByTagName('p').length", .ex = "2" },
-        .{ .src = "document.getElementById('content').getElementsByTagName('div').length", .ex = "0" },
+        .{ "document.getElementById('content').getElementsByTagName('*').length", "4" },
+        .{ "document.getElementById('content').getElementsByTagName('p').length", "2" },
+        .{ "document.getElementById('content').getElementsByTagName('div').length", "0" },
 
-        .{ .src = "document.children.length", .ex = "1" },
-        .{ .src = "document.getElementById('content').children.length", .ex = "3" },
+        .{ "document.children.length", "1" },
+        .{ "document.getElementById('content').children.length", "3" },
 
         // check liveness
-        .{ .src = "let content = document.getElementById('content')", .ex = "undefined" },
-        .{ .src = "let pe = document.getElementById('para-empty')", .ex = "undefined" },
-        .{ .src = "let p = document.createElement('p')", .ex = "undefined" },
-        .{ .src = "p.textContent = 'OK live'", .ex = "OK live" },
-        .{ .src = "getElementsByTagName.item(1).textContent", .ex = " And" },
-        .{ .src = "content.appendChild(p) != undefined", .ex = "true" },
-        .{ .src = "getElementsByTagName.length", .ex = "3" },
-        .{ .src = "getElementsByTagName.item(2).textContent", .ex = "OK live" },
-        .{ .src = "content.insertBefore(p, pe) != undefined", .ex = "true" },
-        .{ .src = "getElementsByTagName.item(0).textContent", .ex = "OK live" },
-    };
-    try checkCases(js_env, &getElementsByTagName);
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let pe = document.getElementById('para-empty')", "undefined" },
+        .{ "let p = document.createElement('p')", "undefined" },
+        .{ "p.textContent = 'OK live'", "OK live" },
+        .{ "getElementsByTagName.item(1).textContent", " And" },
+        .{ "content.appendChild(p) != undefined", "true" },
+        .{ "getElementsByTagName.length", "3" },
+        .{ "getElementsByTagName.item(2).textContent", "OK live" },
+        .{ "content.insertBefore(p, pe) != undefined", "true" },
+        .{ "getElementsByTagName.item(0).textContent", "OK live" },
+    }, .{});
 }

src/browser/dom/implementation.zig

@@ -0,0 +1,69 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const DOMException = @import("exceptions.zig").DOMException;
+
+// WEB IDL https://dom.spec.whatwg.org/#domimplementation
+pub const DOMImplementation = struct {
+    pub const Exception = DOMException;
+
+    pub fn _createDocumentType(
+        _: *DOMImplementation,
+        qname: [:0]const u8,
+        publicId: [:0]const u8,
+        systemId: [:0]const u8,
+    ) !*parser.DocumentType {
+        return try parser.domImplementationCreateDocumentType(qname, publicId, systemId);
+    }
+
+    pub fn _createDocument(
+        _: *DOMImplementation,
+        namespace: ?[:0]const u8,
+        qname: ?[:0]const u8,
+        doctype: ?*parser.DocumentType,
+    ) !*parser.Document {
+        return try parser.domImplementationCreateDocument(namespace, qname, doctype);
+    }
+
+    pub fn _createHTMLDocument(_: *DOMImplementation, title: ?[]const u8) !*parser.DocumentHTML {
+        return try parser.domImplementationCreateHTMLDocument(title);
+    }
+
+    pub fn _hasFeature(_: *DOMImplementation) bool {
+        return true;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Implementation" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let impl = document.implementation", "undefined" },
+        .{ "impl.createHTMLDocument();", "[object HTMLDocument]" },
+        .{ "impl.createHTMLDocument('foo');", "[object HTMLDocument]" },
+        .{ "impl.createDocument(null, 'foo');", "[object Document]" },
+        .{ "impl.createDocumentType('foo', 'bar', 'baz')", "[object DocumentType]" },
+        .{ "impl.hasFeature()", "true" },
+    }, .{});
+}

src/browser/dom/intersection_observer.zig

@@ -0,0 +1,276 @@
+// 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 parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const Env = @import("../env.zig").Env;
+const Element = @import("element.zig").Element;
+
+pub const Interfaces = .{
+    IntersectionObserver,
+    IntersectionObserverEntry,
+};
+
+const log = std.log.scoped(.events);
+
+// This is supposed to listen to change between the root and observation targets.
+// However, our rendered stores everything as 1 pixel sized boxes in a long row that never changes.
+// As such, there are no changes to intersections between the root and any target.
+// Instead we keep a list of all entries that are being observed.
+// The callback is called with all entries everytime a new entry is added(observed).
+// Potentially we should also call the callback at a regular interval.
+// The returned Entries are phony, they always indicate full intersection.
+// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
+pub const IntersectionObserver = struct {
+    callback: Env.Callback,
+    options: IntersectionObserverOptions,
+    state: *SessionState,
+
+    observed_entries: std.ArrayListUnmanaged(IntersectionObserverEntry),
+
+    // new IntersectionObserver(callback)
+    // new IntersectionObserver(callback, options) [not supported yet]
+    pub fn constructor(callback: Env.Callback, options_: ?IntersectionObserverOptions, state: *SessionState) !IntersectionObserver {
+        var options = IntersectionObserverOptions{
+            .root = parser.documentToNode(parser.documentHTMLToDocument(state.document.?)),
+            .rootMargin = "0px 0px 0px 0px",
+            .threshold = &.{0.0},
+        };
+        if (options_) |*o| {
+            if (o.root) |root| {
+                options.root = root;
+            } // Other properties are not used due to the way we render
+        }
+
+        return .{
+            .callback = callback,
+            .options = options,
+            .state = state,
+            .observed_entries = .{},
+        };
+    }
+
+    pub fn _disconnect(self: *IntersectionObserver) !void {
+        self.observed_entries = .{}; // We don't free as it is on an arena
+    }
+
+    pub fn _observe(self: *IntersectionObserver, target_element: *parser.Element) !void {
+        for (self.observed_entries.items) |*observer| {
+            if (observer.target == target_element) {
+                return; // Already observed
+            }
+        }
+
+        try self.observed_entries.append(self.state.arena, .{
+            .state = self.state,
+            .target = target_element,
+            .options = &self.options,
+        });
+
+        var result: Env.Callback.Result = undefined;
+        self.callback.tryCall(.{self.observed_entries.items}, &result) catch {
+            log.err("intersection observer callback error: {s}", .{result.exception});
+            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        };
+    }
+
+    pub fn _unobserve(self: *IntersectionObserver, target: *parser.Element) !void {
+        for (self.observed_entries.items, 0..) |*observer, index| {
+            if (observer.target == target) {
+                _ = self.observed_entries.swapRemove(index);
+                break;
+            }
+        }
+    }
+
+    pub fn _takeRecords(self: *IntersectionObserver) []IntersectionObserverEntry {
+        return self.observed_entries.items;
+    }
+};
+
+const IntersectionObserverOptions = struct {
+    root: ?*parser.Node, // Element or Document
+    rootMargin: ?[]const u8,
+    threshold: ?[]const f32,
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
+// https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
+pub const IntersectionObserverEntry = struct {
+    state: *SessionState,
+    target: *parser.Element,
+    options: *IntersectionObserverOptions,
+
+    // Returns the bounds rectangle of the target element as a DOMRectReadOnly. The bounds are computed as described in the documentation for Element.getBoundingClientRect().
+    pub fn get_boundingClientRect(self: *const IntersectionObserverEntry) !Element.DOMRect {
+        return self.state.renderer.getRect(self.target);
+    }
+
+    // Returns the ratio of the intersectionRect to the boundingClientRect.
+    pub fn get_intersectionRatio(_: *const IntersectionObserverEntry) f32 {
+        return 1.0;
+    }
+
+    // Returns a DOMRectReadOnly representing the target's visible area.
+    pub fn get_intersectionRect(self: *const IntersectionObserverEntry) !Element.DOMRect {
+        return self.state.renderer.getRect(self.target);
+    }
+
+    // A Boolean value which is true if the target element intersects with the intersection observer's root. If this is true, then, the IntersectionObserverEntry describes a transition into a state of intersection; if it's false, then you know the transition is from intersecting to not-intersecting.
+    pub fn get_isIntersecting(_: *const IntersectionObserverEntry) bool {
+        return true;
+    }
+
+    // Returns a DOMRectReadOnly for the intersection observer's root.
+    pub fn get_rootBounds(self: *const IntersectionObserverEntry) !Element.DOMRect {
+        const root = self.options.root.?;
+        if (@intFromPtr(root) == @intFromPtr(self.state.document.?)) {
+            return self.state.renderer.boundingRect();
+        }
+
+        const root_type = try parser.nodeType(root);
+
+        var element: *parser.Element = undefined;
+        switch (root_type) {
+            .element => element = parser.nodeToElement(root),
+            .document => {
+                const doc = parser.nodeToDocument(root);
+                element = (try parser.documentGetDocumentElement(doc)).?;
+            },
+            else => return error.InvalidState,
+        }
+
+        return try self.state.renderer.getRect(element);
+    }
+
+    // The Element whose intersection with the root changed.
+    pub fn get_target(self: *const IntersectionObserverEntry) *parser.Element {
+        return self.target;
+    }
+
+    // TODO: pub fn get_time(self: *const IntersectionObserverEntry)
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.IntersectionObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new IntersectionObserver(() => {}).observe(document.documentElement);", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let count_a = 0;", "undefined" },
+        .{ "const a1 = document.createElement('div');", "undefined" },
+        .{ "new IntersectionObserver(entries => {count_a += 1;}).observe(a1);", "undefined" },
+        .{ "count_a;", "1" },
+    }, .{});
+
+    // This test is documenting current behavior, not correct behavior.
+    // Currently every time observe is called, the callback is called with all entries.
+    try runner.testCases(&.{
+        .{ "let count_b = 0;", "undefined" },
+        .{ "let observer_b = new IntersectionObserver(entries => {count_b = entries.length;});", "undefined" },
+        .{ "const b1 = document.createElement('div');", "undefined" },
+        .{ "observer_b.observe(b1);", "undefined" },
+        .{ "count_b;", "1" },
+        .{ "const b2 = document.createElement('div');", "undefined" },
+        .{ "observer_b.observe(b2);", "undefined" },
+        .{ "count_b;", "2" },
+    }, .{});
+
+    // Re-observing is a no-op
+    try runner.testCases(&.{
+        .{ "let count_bb = 0;", "undefined" },
+        .{ "let observer_bb = new IntersectionObserver(entries => {count_bb = entries.length;});", "undefined" },
+        .{ "const bb1 = document.createElement('div');", "undefined" },
+        .{ "observer_bb.observe(bb1);", "undefined" },
+        .{ "count_bb;", "1" },
+        .{ "observer_bb.observe(bb1);", "undefined" },
+        .{ "count_bb;", "1" }, // Still 1, not 2
+    }, .{});
+
+    // Unobserve
+    try runner.testCases(&.{
+        .{ "let count_c = 0;", "undefined" },
+        .{ "let observer_c = new IntersectionObserver(entries => { count_c = entries.length;});", "undefined" },
+        .{ "const c1 = document.createElement('div');", "undefined" },
+        .{ "observer_c.observe(c1);", "undefined" },
+        .{ "count_c;", "1" },
+        .{ "observer_c.unobserve(c1);", "undefined" },
+        .{ "const c2 = document.createElement('div');", "undefined" },
+        .{ "observer_c.observe(c2);", "undefined" },
+        .{ "count_c;", "1" },
+    }, .{});
+
+    // Disconnect
+    try runner.testCases(&.{
+        .{ "let observer_d = new IntersectionObserver(entries => {});", "undefined" },
+        .{ "let d1 = document.createElement('div');", "undefined" },
+        .{ "observer_d.observe(d1);", "undefined" },
+        .{ "observer_d.disconnect();", "undefined" },
+        .{ "observer_d.takeRecords().length;", "0" },
+    }, .{});
+
+    // takeRecords
+    try runner.testCases(&.{
+        .{ "let observer_e = new IntersectionObserver(entries => {});", "undefined" },
+        .{ "let e1 = document.createElement('div');", "undefined" },
+        .{ "observer_e.observe(e1);", "undefined" },
+        .{ "const e2 = document.createElement('div');", "undefined" },
+        .{ "observer_e.observe(e2);", "undefined" },
+        .{ "observer_e.takeRecords().length;", "2" },
+    }, .{});
+
+    // Entry
+    try runner.testCases(&.{
+        .{ "let entry;", "undefined" },
+        .{ "new IntersectionObserver(entries => { entry = entries[0]; }).observe(document.createElement('div'));", "undefined" },
+        .{ "entry.boundingClientRect.x;", "0" },
+        .{ "entry.intersectionRatio;", "1" },
+        .{ "entry.intersectionRect.x;", "0" },
+        .{ "entry.intersectionRect.y;", "0" },
+        .{ "entry.intersectionRect.width;", "1" },
+        .{ "entry.intersectionRect.height;", "1" },
+        .{ "entry.isIntersecting;", "true" },
+        .{ "entry.rootBounds.x;", "0" },
+        .{ "entry.rootBounds.y;", "0" },
+        .{ "entry.rootBounds.width;", "1" },
+        .{ "entry.rootBounds.height;", "1" },
+        .{ "entry.target;", "[object HTMLDivElement]" },
+    }, .{});
+
+    // Options
+    try runner.testCases(&.{
+        .{ "const new_root = document.createElement('span');", "undefined" },
+        .{ "let new_entry;", "undefined" },
+        .{
+            \\ const new_observer = new IntersectionObserver(
+            \\ entries => { new_entry = entries[0]; },
+            \\ {root: new_root, rootMargin: '0px 0px 0px 0px', threshold: [0]});
+            ,
+            "undefined",
+        },
+        .{ "new_observer.observe(document.createElement('div'));", "undefined" },
+        .{ "new_entry.rootBounds.x;", "1" },
+    }, .{});
+}

src/browser/dom/mutation_observer.zig

@@ -0,0 +1,397 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+const Env = @import("../env.zig").Env;
+const NodeList = @import("nodelist.zig").NodeList;
+
+pub const Interfaces = .{
+    MutationObserver,
+    MutationRecord,
+};
+
+const Walker = @import("../dom/walker.zig").WalkerChildren;
+
+const log = std.log.scoped(.events);
+
+// WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
+pub const MutationObserver = struct {
+    cbk: Env.Callback,
+    arena: Allocator,
+
+    // List of records which were observed. When the scopeEnds, we need to
+    // execute our callback with it.
+    observed: std.ArrayListUnmanaged(*MutationRecord),
+
+    pub fn constructor(cbk: Env.Callback, state: *SessionState) !MutationObserver {
+        return .{
+            .cbk = cbk,
+            .observed = .{},
+            .arena = state.arena,
+        };
+    }
+
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
+        const options = options_ orelse MutationObserverInit{};
+
+        const observer = try self.arena.create(Observer);
+        observer.* = .{
+            .node = node,
+            .options = options,
+            .mutation_observer = self,
+            .event_node = .{ .id = self.cbk.id, .func = Observer.handle },
+        };
+
+        // register node's events
+        if (options.childList or options.subtree) {
+            try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMNodeInserted",
+                &observer.event_node,
+                false,
+            );
+            try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMNodeRemoved",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.attr()) {
+            try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMAttrModified",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.cdata()) {
+            try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMCharacterDataModified",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.subtree) {
+            try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMSubtreeModified",
+                &observer.event_node,
+                false,
+            );
+        }
+    }
+
+    pub fn jsCallScopeEnd(self: *MutationObserver, _: anytype) void {
+        const record = self.observed.items;
+        if (record.len == 0) {
+            return;
+        }
+
+        defer self.observed.clearRetainingCapacity();
+
+        for (record) |r| {
+            const records = [_]MutationRecord{r.*};
+            var result: Env.Callback.Result = undefined;
+            self.cbk.tryCall(.{records}, &result) catch {
+                log.err("mutation observer callback error: {s}", .{result.exception});
+                log.debug("stack:\n{s}", .{result.stack orelse "???"});
+            };
+        }
+    }
+
+    // TODO
+    pub fn _disconnect(_: *MutationObserver) !void {
+        // TODO unregister listeners.
+    }
+
+    // TODO
+    pub fn _takeRecords(_: *const MutationObserver) ?[]const u8 {
+        return &[_]u8{};
+    }
+};
+
+pub const MutationRecord = struct {
+    type: []const u8,
+    target: *parser.Node,
+    added_nodes: NodeList = .{},
+    removed_nodes: NodeList = .{},
+    previous_sibling: ?*parser.Node = null,
+    next_sibling: ?*parser.Node = null,
+    attribute_name: ?[]const u8 = null,
+    attribute_namespace: ?[]const u8 = null,
+    old_value: ?[]const u8 = null,
+
+    pub fn get_type(self: *const MutationRecord) []const u8 {
+        return self.type;
+    }
+
+    pub fn get_addedNodes(self: *MutationRecord) *NodeList {
+        return &self.added_nodes;
+    }
+
+    pub fn get_removedNodes(self: *MutationRecord) *NodeList {
+        return &self.removed_nodes;
+    }
+
+    pub fn get_target(self: *const MutationRecord) *parser.Node {
+        return self.target;
+    }
+
+    pub fn get_attributeName(self: *const MutationRecord) ?[]const u8 {
+        return self.attribute_name;
+    }
+
+    pub fn get_attributeNamespace(self: *const MutationRecord) ?[]const u8 {
+        return self.attribute_namespace;
+    }
+
+    pub fn get_previousSibling(self: *const MutationRecord) ?*parser.Node {
+        return self.previous_sibling;
+    }
+
+    pub fn get_nextSibling(self: *const MutationRecord) ?*parser.Node {
+        return self.next_sibling;
+    }
+
+    pub fn get_oldValue(self: *const MutationRecord) ?[]const u8 {
+        return self.old_value;
+    }
+};
+
+const MutationObserverInit = struct {
+    childList: bool = false,
+    attributes: bool = false,
+    characterData: bool = false,
+    subtree: bool = false,
+    attributeOldValue: bool = false,
+    characterDataOldValue: bool = false,
+    // TODO
+    // attributeFilter: [][]const u8,
+
+    fn attr(self: MutationObserverInit) bool {
+        return self.attributes or self.attributeOldValue;
+    }
+
+    fn cdata(self: MutationObserverInit) bool {
+        return self.characterData or self.characterDataOldValue;
+    }
+};
+
+const Observer = struct {
+    node: *parser.Node,
+    options: MutationObserverInit,
+
+    // record of the mutation, all observed changes in 1 call are batched
+    record: ?MutationRecord = null,
+
+    // reference back to the MutationObserver so that we can access the arena
+    // and batch the mutation records.
+    mutation_observer: *MutationObserver,
+
+    event_node: parser.EventNode,
+
+    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
+        // mutation on any target is always ok.
+        if (o.options.subtree) {
+            return true;
+        }
+
+        // if target equals node, alway ok.
+        if (target == o.node) {
+            return true;
+        }
+
+        // no subtree, no same target and no childlist, always noky.
+        if (!o.options.childList) {
+            return false;
+        }
+
+        // target must be a child of o.node
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = walker.get_next(o.node, next) catch break orelse break;
+            if (next.? == target) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    fn handle(en: *parser.EventNode, event: *parser.Event) void {
+        const self: *Observer = @fieldParentPtr("event_node", en);
+
+        var mutation_observer = self.mutation_observer;
+
+        const node = blk: {
+            const event_target = parser.eventTarget(event) catch |e| {
+                log.err("mutation observer event target: {any}", .{e});
+                return;
+            } orelse return;
+
+            break :blk parser.eventTargetToNode(event_target);
+        };
+
+        if (self.appliesTo(node) == false) {
+            return;
+        }
+
+        const event_type = blk: {
+            const t = parser.eventType(event) catch |e| {
+                log.err("mutation observer event type: {any}", .{e});
+                return;
+            };
+            break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
+        };
+
+        const arena = mutation_observer.arena;
+        if (self.record == null) {
+            self.record = .{
+                .target = self.node,
+                .type = event_type.recordType(),
+            };
+            mutation_observer.observed.append(arena, &self.record.?) catch |err| {
+                log.err("mutation_observer append: {}", .{err});
+            };
+        }
+
+        var record = &self.record.?;
+        const mutation_event = parser.eventToMutationEvent(event);
+
+        switch (event_type) {
+            .DOMAttrModified => {
+                record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
+                if (self.options.attributeOldValue) {
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
+                }
+            },
+            .DOMCharacterDataModified => {
+                if (self.options.characterDataOldValue) {
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
+                }
+            },
+            .DOMNodeInserted => {
+                if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
+                    record.added_nodes.append(arena, related_node) catch |e| {
+                        log.err("mutation event handler error: {any}", .{e});
+                        return;
+                    };
+                }
+            },
+            .DOMNodeRemoved => {
+                if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
+                    record.removed_nodes.append(arena, related_node) catch |e| {
+                        log.err("mutation event handler error: {any}", .{e});
+                        return;
+                    };
+                }
+            },
+        }
+    }
+};
+
+const MutationEventType = enum {
+    DOMAttrModified,
+    DOMCharacterDataModified,
+    DOMNodeInserted,
+    DOMNodeRemoved,
+
+    fn recordType(self: MutationEventType) []const u8 {
+        return switch (self) {
+            .DOMAttrModified => "attributes",
+            .DOMCharacterDataModified => "characterData",
+            .DOMNodeInserted => "childList",
+            .DOMNodeRemoved => "childList",
+        };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.MutationObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new MutationObserver(() => {}).observe(document, { childList: true });", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var nb = 0;
+            \\ var mrs;
+            \\ new MutationObserver((mu) => {
+            \\    mrs = mu;
+            \\    nb++;
+            \\ }).observe(document.firstElementChild, { attributes: true, attributeOldValue: true });
+            \\ document.firstElementChild.setAttribute("foo", "bar");
+            \\ // ignored b/c it's about another target.
+            \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
+            \\ nb;
+            ,
+            "1",
+        },
+        .{ "mrs[0].type", "attributes" },
+        .{ "mrs[0].target == document.firstElementChild", "true" },
+        .{ "mrs[0].target.getAttribute('foo')", "bar" },
+        .{ "mrs[0].attributeName", "foo" },
+        .{ "mrs[0].oldValue", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para").firstChild;
+            \\ var nb2 = 0;
+            \\ var mrs2;
+            \\ new MutationObserver((mu) => {
+            \\     mrs2 = mu;
+            \\     nb2++;
+            \\ }).observe(node, { characterData: true, characterDataOldValue: true });
+            \\ node.data = "foo";
+            \\ nb2;
+            ,
+            "1",
+        },
+        .{ "mrs2[0].type", "characterData" },
+        .{ "mrs2[0].target == node", "true" },
+        .{ "mrs2[0].target.data", "foo" },
+        .{ "mrs2[0].oldValue", " And" },
+    }, .{});
+
+    // tests that mutation observers that have a callback which trigger the
+    // mutation observer don't crash.
+    // https://github.com/lightpanda-io/browser/issues/550
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ new MutationObserver(() => {
+            \\     node.innerText = 'a';
+            \\ }).observe(document, { subtree:true,childList:true });
+            \\ node.innerText = "2";
+            ,
+            "2",
+        },
+    }, .{});
+}

src/browser/dom/namednodemap.zig

@@ -16,20 +16,13 @@
 // 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 parser = @import("netsurf");
-
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const parser = @import("../netsurf.zig");
 
 const DOMException = @import("exceptions.zig").DOMException;
 
 // WEB IDL https://dom.spec.whatwg.org/#namednodemap
 pub const NamedNodeMap = struct {
     pub const Self = parser.NamedNodeMap;
-    pub const mem_guarantied = true;
 
     pub const Exception = DOMException;
 
@@ -75,23 +68,30 @@ pub const NamedNodeMap = struct {
     ) !*parser.Attribute {
         return try parser.namedNodeMapRemoveNamedItemNS(self, namespace, localname);
     }
+
+    pub fn indexed_get(self: *parser.NamedNodeMap, index: u32, has_value: *bool) !*parser.Attribute {
+        return (try NamedNodeMap._item(self, index)) orelse {
+            has_value.* = false;
+            return undefined;
+        };
+    }
 };
 
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var setItem = [_]Case{
-        .{ .src = "let a = document.getElementById('content').attributes", .ex = "undefined" },
-        .{ .src = "a.length", .ex = "1" },
-        .{ .src = "a.item(0)", .ex = "[object Attr]" },
-        .{ .src = "a.item(1)", .ex = "null" },
-        .{ .src = "a.getNamedItem('id')", .ex = "[object Attr]" },
-        .{ .src = "a.getNamedItem('foo')", .ex = "null" },
-        .{ .src = "a.setNamedItem(a.getNamedItem('id'))", .ex = "[object Attr]" },
-    };
-    try checkCases(js_env, &setItem);
+const testing = @import("../../testing.zig");
+test "Browser.DOM.NamedNodeMap" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content').attributes", "undefined" },
+        .{ "a.length", "1" },
+        .{ "a.item(0)", "[object Attr]" },
+        .{ "a.item(1)", "null" },
+        .{ "a.getNamedItem('id')", "[object Attr]" },
+        .{ "a.getNamedItem('foo')", "null" },
+        .{ "a.setNamedItem(a.getNamedItem('id'))", "[object Attr]" },
+    }, .{});
 }

src/browser/dom/node.zig

@@ -0,0 +1,712 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const generate = @import("../../runtime/generate.zig");
+
+const SessionState = @import("../env.zig").SessionState;
+const EventTarget = @import("event_target.zig").EventTarget;
+
+// DOM
+const Attr = @import("attribute.zig").Attr;
+const CData = @import("character_data.zig");
+const Element = @import("element.zig").Element;
+const NodeList = @import("nodelist.zig").NodeList;
+const Document = @import("document.zig").Document;
+const DocumentType = @import("document_type.zig").DocumentType;
+const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
+const HTMLCollection = @import("html_collection.zig").HTMLCollection;
+const HTMLAllCollection = @import("html_collection.zig").HTMLAllCollection;
+const HTMLCollectionIterator = @import("html_collection.zig").HTMLCollectionIterator;
+const Walker = @import("walker.zig").WalkerDepthFirst;
+
+// HTML
+const HTML = @import("../html/html.zig");
+const HTMLElem = @import("../html/elements.zig");
+
+// Node interfaces
+pub const Interfaces = .{
+    Attr,
+    CData.CharacterData,
+    CData.Interfaces,
+    Element,
+    Document,
+    DocumentType,
+    DocumentFragment,
+    HTMLCollection,
+    HTMLAllCollection,
+    HTMLCollectionIterator,
+    HTML.Interfaces,
+};
+
+pub const Union = generate.Union(Interfaces);
+
+// Node implementation
+pub const Node = struct {
+    pub const Self = parser.Node;
+    pub const prototype = *EventTarget;
+    pub const subtype = .node;
+
+    pub fn toInterface(node: *parser.Node) !Union {
+        return switch (try parser.nodeType(node)) {
+            .element => try HTMLElem.toInterface(
+                Union,
+                @as(*parser.Element, @ptrCast(node)),
+            ),
+            .comment => .{ .Comment = @as(*parser.Comment, @ptrCast(node)) },
+            .text => .{ .Text = @as(*parser.Text, @ptrCast(node)) },
+            .cdata_section => .{ .CDATASection = @as(*parser.CDATASection, @ptrCast(node)) },
+            .processing_instruction => .{ .ProcessingInstruction = @as(*parser.ProcessingInstruction, @ptrCast(node)) },
+            .document => .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) },
+            .document_type => .{ .DocumentType = @as(*parser.DocumentType, @ptrCast(node)) },
+            .attribute => .{ .Attr = @as(*parser.Attribute, @ptrCast(node)) },
+            .document_fragment => .{ .DocumentFragment = @as(*parser.DocumentFragment, @ptrCast(node)) },
+            else => @panic("node type not handled"), // TODO
+        };
+    }
+
+    // class attributes
+
+    pub const _ELEMENT_NODE = @intFromEnum(parser.NodeType.element);
+    pub const _ATTRIBUTE_NODE = @intFromEnum(parser.NodeType.attribute);
+    pub const _TEXT_NODE = @intFromEnum(parser.NodeType.text);
+    pub const _CDATA_SECTION_NODE = @intFromEnum(parser.NodeType.cdata_section);
+    pub const _PROCESSING_INSTRUCTION_NODE = @intFromEnum(parser.NodeType.processing_instruction);
+    pub const _COMMENT_NODE = @intFromEnum(parser.NodeType.comment);
+    pub const _DOCUMENT_NODE = @intFromEnum(parser.NodeType.document);
+    pub const _DOCUMENT_TYPE_NODE = @intFromEnum(parser.NodeType.document_type);
+    pub const _DOCUMENT_FRAGMENT_NODE = @intFromEnum(parser.NodeType.document_fragment);
+
+    // These 3 are deprecated, but both Chrome and Firefox still expose them
+    pub const _ENTITY_REFERENCE_NODE = @intFromEnum(parser.NodeType.entity_reference);
+    pub const _ENTITY_NODE = @intFromEnum(parser.NodeType.entity);
+    pub const _NOTATION_NODE = @intFromEnum(parser.NodeType.notation);
+
+    // JS funcs
+    // --------
+
+    // Read-only attributes
+
+    pub fn get_firstChild(self: *parser.Node) !?Union {
+        const res = try parser.nodeFirstChild(self);
+        if (res == null) {
+            return null;
+        }
+        return try Node.toInterface(res.?);
+    }
+
+    pub fn get_lastChild(self: *parser.Node) !?Union {
+        const res = try parser.nodeLastChild(self);
+        if (res == null) {
+            return null;
+        }
+        return try Node.toInterface(res.?);
+    }
+
+    pub fn get_nextSibling(self: *parser.Node) !?Union {
+        const res = try parser.nodeNextSibling(self);
+        if (res == null) {
+            return null;
+        }
+        return try Node.toInterface(res.?);
+    }
+
+    pub fn get_previousSibling(self: *parser.Node) !?Union {
+        const res = try parser.nodePreviousSibling(self);
+        if (res == null) {
+            return null;
+        }
+        return try Node.toInterface(res.?);
+    }
+
+    pub fn get_parentNode(self: *parser.Node) !?Union {
+        const res = try parser.nodeParentNode(self);
+        if (res == null) {
+            return null;
+        }
+        return try Node.toInterface(res.?);
+    }
+
+    pub fn get_parentElement(self: *parser.Node) !?HTMLElem.Union {
+        const res = try parser.nodeParentElement(self);
+        if (res == null) {
+            return null;
+        }
+        return try HTMLElem.toInterface(HTMLElem.Union, @as(*parser.Element, @ptrCast(res.?)));
+    }
+
+    pub fn get_nodeName(self: *parser.Node) ![]const u8 {
+        return try parser.nodeName(self);
+    }
+
+    pub fn get_nodeType(self: *parser.Node) !u8 {
+        return @intFromEnum(try parser.nodeType(self));
+    }
+
+    pub fn get_ownerDocument(self: *parser.Node) !?*parser.DocumentHTML {
+        const res = try parser.nodeOwnerDocument(self);
+        if (res == null) {
+            return null;
+        }
+        return @as(*parser.DocumentHTML, @ptrCast(res.?));
+    }
+
+    pub fn get_isConnected(self: *parser.Node) !bool {
+        // TODO: handle Shadow DOM
+        if (try parser.nodeType(self) == .document) {
+            return true;
+        }
+        return try Node.get_parentNode(self) != null;
+    }
+
+    // Read/Write attributes
+
+    pub fn get_nodeValue(self: *parser.Node) !?[]const u8 {
+        return try parser.nodeValue(self);
+    }
+
+    pub fn set_nodeValue(self: *parser.Node, data: []u8) !void {
+        try parser.nodeSetValue(self, data);
+    }
+
+    pub fn get_textContent(self: *parser.Node) !?[]const u8 {
+        return try parser.nodeTextContent(self);
+    }
+
+    pub fn set_textContent(self: *parser.Node, data: []u8) !void {
+        return try parser.nodeSetTextContent(self, data);
+    }
+
+    // Methods
+
+    pub fn _appendChild(self: *parser.Node, child: *parser.Node) !Union {
+        // TODO: DocumentFragment special case
+        const res = try parser.nodeAppendChild(self, child);
+        return try Node.toInterface(res);
+    }
+
+    pub fn _cloneNode(self: *parser.Node, deep: ?bool) !Union {
+        const clone = try parser.nodeCloneNode(self, deep orelse false);
+        return try Node.toInterface(clone);
+    }
+
+    pub fn _compareDocumentPosition(self: *parser.Node, other: *parser.Node) !u32 {
+        if (self == other) return 0;
+
+        const docself = try parser.nodeOwnerDocument(self);
+        const docother = try parser.nodeOwnerDocument(other);
+
+        // Both are in different document.
+        if (docself == null or docother == null or docother.? != docself.?) {
+            return @intFromEnum(parser.DocumentPosition.disconnected);
+        }
+
+        // TODO Both are in a different trees in the same document.
+
+        const w = Walker{};
+        var next: ?*parser.Node = null;
+
+        // Is other a descendant of self?
+        while (true) {
+            next = try w.get_next(self, next) orelse break;
+            if (other == next) {
+                return @intFromEnum(parser.DocumentPosition.following) +
+                    @intFromEnum(parser.DocumentPosition.contained_by);
+            }
+        }
+
+        // Is self a descendant of other?
+        next = null;
+        while (true) {
+            next = try w.get_next(other, next) orelse break;
+            if (self == next) {
+                return @intFromEnum(parser.DocumentPosition.contains) +
+                    @intFromEnum(parser.DocumentPosition.preceding);
+            }
+        }
+
+        next = null;
+        while (true) {
+            next = try w.get_next(parser.documentToNode(docself.?), next) orelse break;
+            if (other == next) {
+                // other precedes self.
+                return @intFromEnum(parser.DocumentPosition.preceding);
+            }
+            if (self == next) {
+                // other follows self.
+                return @intFromEnum(parser.DocumentPosition.following);
+            }
+        }
+
+        return 0;
+    }
+
+    pub fn _contains(self: *parser.Node, other: *parser.Node) !bool {
+        return try parser.nodeContains(self, other);
+    }
+
+    pub fn _getRootNode(self: *parser.Node) !?HTMLElem.Union {
+        // TODO return this’s shadow-including root if options["composed"] is true
+        const res = try parser.nodeOwnerDocument(self);
+        if (res == null) {
+            return null;
+        }
+        return try HTMLElem.toInterface(HTMLElem.Union, @as(*parser.Element, @ptrCast(res.?)));
+    }
+
+    pub fn _hasChildNodes(self: *parser.Node) !bool {
+        return try parser.nodeHasChildNodes(self);
+    }
+
+    pub fn get_childNodes(self: *parser.Node, state: *SessionState) !NodeList {
+        const allocator = state.arena;
+        var list: NodeList = .{};
+
+        var n = try parser.nodeFirstChild(self) orelse return list;
+        while (true) {
+            try list.append(allocator, n);
+            n = try parser.nodeNextSibling(n) orelse return list;
+        }
+    }
+
+    pub fn _insertBefore(self: *parser.Node, new_node: *parser.Node, ref_node: *parser.Node) !*parser.Node {
+        return try parser.nodeInsertBefore(self, new_node, ref_node);
+    }
+
+    pub fn _isDefaultNamespace(self: *parser.Node, namespace: ?[]const u8) !bool {
+        return try parser.nodeIsDefaultNamespace(self, namespace);
+    }
+
+    pub fn _isEqualNode(self: *parser.Node, other: *parser.Node) !bool {
+        // TODO: other is not an optional parameter, but can be null.
+        return try parser.nodeIsEqualNode(self, other);
+    }
+
+    pub fn _isSameNode(self: *parser.Node, other: *parser.Node) !bool {
+        // TODO: other is not an optional parameter, but can be null.
+        // NOTE: there is no need to use isSameNode(); instead use the === strict equality operator
+        return try parser.nodeIsSameNode(self, other);
+    }
+
+    pub fn _lookupPrefix(self: *parser.Node, namespace: ?[]const u8) !?[]const u8 {
+        // TODO: other is not an optional parameter, but can be null.
+        if (namespace == null) {
+            return null;
+        }
+        if (std.mem.eql(u8, namespace.?, "")) {
+            return null;
+        }
+        return try parser.nodeLookupPrefix(self, namespace.?);
+    }
+
+    pub fn _lookupNamespaceURI(self: *parser.Node, prefix: ?[]const u8) !?[]const u8 {
+        // TODO: other is not an optional parameter, but can be null.
+        return try parser.nodeLookupNamespaceURI(self, prefix);
+    }
+
+    pub fn _normalize(self: *parser.Node) !void {
+        return try parser.nodeNormalize(self);
+    }
+
+    pub fn _removeChild(self: *parser.Node, child: *parser.Node) !Union {
+        const res = try parser.nodeRemoveChild(self, child);
+        return try Node.toInterface(res);
+    }
+
+    pub fn _replaceChild(self: *parser.Node, new_child: *parser.Node, old_child: *parser.Node) !Union {
+        const res = try parser.nodeReplaceChild(self, new_child, old_child);
+        return try Node.toInterface(res);
+    }
+
+    // Check if the hierarchy node tree constraints are respected.
+    // For now, it checks only if new nodes are not self.
+    // TODO implements the others contraints.
+    // see https://dom.spec.whatwg.org/#concept-node-tree
+    pub fn hierarchy(self: *parser.Node, nodes: []const NodeOrText) bool {
+        for (nodes) |n| {
+            if (n.is(self)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    pub fn prepend(self: *parser.Node, nodes: []const NodeOrText) !void {
+        if (nodes.len == 0) {
+            return;
+        }
+
+        // check hierarchy
+        if (!hierarchy(self, nodes)) {
+            return parser.DOMError.HierarchyRequest;
+        }
+
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;
+
+        if (try parser.nodeFirstChild(self)) |first| {
+            for (nodes) |node| {
+                _ = try parser.nodeInsertBefore(self, try node.toNode(doc), first);
+            }
+            return;
+        }
+
+        for (nodes) |node| {
+            _ = try parser.nodeAppendChild(self, try node.toNode(doc));
+        }
+    }
+
+    pub fn append(self: *parser.Node, nodes: []const NodeOrText) !void {
+        if (nodes.len == 0) {
+            return;
+        }
+
+        // check hierarchy
+        if (!hierarchy(self, nodes)) {
+            return parser.DOMError.HierarchyRequest;
+        }
+
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;
+        for (nodes) |node| {
+            _ = try parser.nodeAppendChild(self, try node.toNode(doc));
+        }
+    }
+
+    pub fn replaceChildren(self: *parser.Node, nodes: []const NodeOrText) !void {
+        if (nodes.len == 0) {
+            return;
+        }
+
+        // check hierarchy
+        if (!hierarchy(self, nodes)) {
+            return parser.DOMError.HierarchyRequest;
+        }
+
+        // remove existing children
+        try removeChildren(self);
+
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;
+        // add new children
+        for (nodes) |node| {
+            _ = try parser.nodeAppendChild(self, try node.toNode(doc));
+        }
+    }
+
+    pub fn removeChildren(self: *parser.Node) !void {
+        if (!try parser.nodeHasChildNodes(self)) return;
+
+        const children = try parser.nodeGetChildNodes(self);
+        const ln = try parser.nodeListLength(children);
+        var i: u32 = 0;
+        while (i < ln) {
+            defer i += 1;
+            // we always retrieve the 0 index child on purpose: libdom nodelist
+            // are dynamic. So the next child to remove is always as pos 0.
+            const child = try parser.nodeListItem(children, 0) orelse continue;
+            _ = try parser.nodeRemoveChild(self, child);
+        }
+    }
+
+    pub fn before(self: *parser.Node, nodes: []const NodeOrText) !void {
+        const parent = try parser.nodeParentNode(self) orelse return;
+        const doc = (try parser.nodeOwnerDocument(parent)) orelse return;
+
+        var sibling: ?*parser.Node = self;
+        // have to find the first sibling that isn't in nodes
+        CHECK: while (sibling) |s| {
+            for (nodes) |n| {
+                if (n.is(s)) {
+                    sibling = try parser.nodePreviousSibling(s);
+                    continue :CHECK;
+                }
+            }
+            break;
+        }
+
+        if (sibling == null) {
+            sibling = try parser.nodeFirstChild(parent);
+        }
+
+        if (sibling) |ref_node| {
+            for (nodes) |node| {
+                _ = try parser.nodeInsertBefore(parent, try node.toNode(doc), ref_node);
+            }
+            return;
+        }
+
+        return Node.prepend(self, nodes);
+    }
+
+    pub fn after(self: *parser.Node, nodes: []const NodeOrText) !void {
+        const parent = try parser.nodeParentNode(self) orelse return;
+        const doc = (try parser.nodeOwnerDocument(parent)) orelse return;
+
+        // have to find the first sibling that isn't in nodes
+        var sibling = try parser.nodeNextSibling(self);
+        CHECK: while (sibling) |s| {
+            for (nodes) |n| {
+                if (n.is(s)) {
+                    sibling = try parser.nodeNextSibling(s);
+                    continue :CHECK;
+                }
+            }
+            break;
+        }
+
+        if (sibling) |ref_node| {
+            for (nodes) |node| {
+                _ = try parser.nodeInsertBefore(parent, try node.toNode(doc), ref_node);
+            }
+            return;
+        }
+
+        for (nodes) |node| {
+            _ = try parser.nodeAppendChild(parent, try node.toNode(doc));
+        }
+    }
+
+    // A lot of functions take either a node or text input.
+    // The text input is to be converted into a Text node.
+    pub const NodeOrText = union(enum) {
+        text: []const u8,
+        node: *parser.Node,
+
+        fn toNode(self: NodeOrText, doc: *parser.Document) !*parser.Node {
+            return switch (self) {
+                .node => |n| n,
+                .text => |txt| @ptrCast(try parser.documentCreateTextNode(doc, txt)),
+            };
+        }
+
+        // Whether the node represented by the NodeOrText is the same as the
+        // given Node. Always false for text values as these represent as-of-yet
+        // created Text nodes.
+        fn is(self: NodeOrText, other: *parser.Node) bool {
+            return switch (self) {
+                .text => false,
+                .node => |n| n == other,
+            };
+        }
+    };
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.node" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    {
+        var err_out: ?[]const u8 = null;
+        try runner.exec(
+            \\ function trimAndReplace(str) {
+            \\   str = str.replace(/(\r\n|\n|\r)/gm,'');
+            \\   str = str.replace(/\s+/g, ' ');
+            \\   str = str.trim();
+            \\   return str;
+            \\ }
+        , "trimAndReplace", &err_out);
+    }
+
+    try runner.testCases(&.{
+        .{ "document.body.compareDocumentPosition(document.firstChild); ", "10" },
+        .{ "document.getElementById(\"para-empty\").compareDocumentPosition(document.getElementById(\"content\"));", "10" },
+        .{ "document.getElementById(\"content\").compareDocumentPosition(document.getElementById(\"para-empty\"));", "20" },
+        .{ "document.getElementById(\"link\").compareDocumentPosition(document.getElementById(\"link\"));", "0" },
+        .{ "document.getElementById(\"para-empty\").compareDocumentPosition(document.getElementById(\"link\"));", "2" },
+        .{ "document.getElementById(\"link\").compareDocumentPosition(document.getElementById(\"para-empty\"));", "4" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('content').getRootNode().__proto__.constructor.name", "HTMLDocument" },
+    }, .{});
+
+    try runner.testCases(&.{
+        // for next test cases
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let link = document.getElementById('link')", "undefined" },
+        .{ "let first_child = content.firstChild.nextSibling", "undefined" }, // nextSibling because of line return \n
+
+        .{ "let body_first_child = document.body.firstChild", "undefined" },
+        .{ "body_first_child.localName", "div" },
+        .{ "body_first_child.__proto__.constructor.name", "HTMLDivElement" },
+        .{ "document.getElementById('para-empty').firstChild.firstChild", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let last_child = content.lastChild.previousSibling", "undefined" }, // previousSibling because of line return \n
+        .{ "last_child.__proto__.constructor.name", "Comment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let next_sibling = link.nextSibling.nextSibling", "undefined" },
+        .{ "next_sibling.localName", "p" },
+        .{ "next_sibling.__proto__.constructor.name", "HTMLParagraphElement" },
+        .{ "content.nextSibling.nextSibling", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let prev_sibling = document.getElementById('para-empty').previousSibling.previousSibling", "undefined" },
+        .{ "prev_sibling.localName", "a" },
+        .{ "prev_sibling.__proto__.constructor.name", "HTMLAnchorElement" },
+        .{ "content.previousSibling", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let parent = document.getElementById('para').parentElement", "undefined" },
+        .{ "parent.localName", "div" },
+        .{ "parent.__proto__.constructor.name", "HTMLDivElement" },
+        .{ "let h = content.parentElement.parentElement", "undefined" },
+        .{ "h.parentElement", "null" },
+        .{ "h.parentNode.__proto__.constructor.name", "HTMLDocument" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "first_child.nodeName === 'A'", "true" },
+        .{ "link.firstChild.nodeName === '#text'", "true" },
+        .{ "last_child.nodeName === '#comment'", "true" },
+        .{ "document.nodeName === '#document'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "first_child.nodeType === 1", "true" },
+        .{ "link.firstChild.nodeType === 3", "true" },
+        .{ "last_child.nodeType === 8", "true" },
+        .{ "document.nodeType === 9", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let owner = content.ownerDocument", "undefined" },
+        .{ "owner.__proto__.constructor.name", "HTMLDocument" },
+        .{ "document.ownerDocument", "null" },
+        .{ "let owner2 = document.createElement('div').ownerDocument", "undefined" },
+        .{ "owner2.__proto__.constructor.name", "HTMLDocument" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "content.isConnected", "true" },
+        .{ "document.isConnected", "true" },
+        .{ "document.createElement('div').isConnected", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "last_child.nodeValue === 'comment'", "true" },
+        .{ "link.nodeValue === null", "true" },
+        .{ "let text = link.firstChild", "undefined" },
+        .{ "text.nodeValue === 'OK'", "true" },
+        .{ "text.nodeValue = 'OK modified'", "OK modified" },
+        .{ "text.nodeValue === 'OK modified'", "true" },
+        .{ "link.nodeValue = 'nothing'", "nothing" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "text.textContent === 'OK modified'", "true" },
+        .{ "trimAndReplace(content.textContent) === 'OK modified And'", "true" },
+        .{ "text.textContent = 'OK'", "OK" },
+        .{ "text.textContent", "OK" },
+        .{ "trimAndReplace(document.getElementById('para-empty').textContent)", "" },
+        .{ "document.getElementById('para-empty').textContent = 'OK'", "OK" },
+        .{ "document.getElementById('para-empty').firstChild.nodeName === '#text'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let append = document.createElement('h1')", "undefined" },
+        .{ "content.appendChild(append).toString()", "[object HTMLHeadingElement]" },
+        .{ "content.lastChild.__proto__.constructor.name", "HTMLHeadingElement" },
+        .{ "content.appendChild(link).toString()", "[object HTMLAnchorElement]" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let clone = link.cloneNode()", "undefined" },
+        .{ "clone.toString()", "[object HTMLAnchorElement]" },
+        .{ "clone.parentNode === null", "true" },
+        .{ "clone.firstChild === null", "true" },
+        .{ "let clone_deep = link.cloneNode(true)", "undefined" },
+        .{ "clone_deep.firstChild.nodeName === '#text'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "link.contains(text)", "true" },
+        .{ "text.contains(link)", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "link.hasChildNodes()", "true" },
+        .{ "text.hasChildNodes()", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "link.childNodes.length", "1" },
+        .{ "text.childNodes.length", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let insertBefore = document.createElement('a')", "undefined" },
+        .{ "link.insertBefore(insertBefore, text) !== undefined", "true" },
+        .{ "link.firstChild.localName === 'a'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        // TODO: does not seems to work
+        // .{ "link.isDefaultNamespace('')", "true" },
+        .{ "link.isDefaultNamespace('false')", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let equal1 = document.createElement('a')", "undefined" },
+        .{ "let equal2 = document.createElement('a')", "undefined" },
+        .{ "equal1.textContent = 'is equal'", "is equal" },
+        .{ "equal2.textContent = 'is equal'", "is equal" },
+        // TODO: does not seems to work
+        // .{ "equal1.isEqualNode(equal2)", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.body.isSameNode(document.body)", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        // TODO: no test
+        .{ "link.normalize()", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "content.removeChild(append) !== undefined", "true" },
+        .{ "last_child.__proto__.constructor.name !== 'HTMLHeadingElement'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let replace = document.createElement('div')", "undefined" },
+        .{ "link.replaceChild(replace, insertBefore) !== undefined", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "Node.ELEMENT_NODE", "1" },
+        .{ "Node.ATTRIBUTE_NODE", "2" },
+        .{ "Node.TEXT_NODE", "3" },
+        .{ "Node.CDATA_SECTION_NODE", "4" },
+        .{ "Node.PROCESSING_INSTRUCTION_NODE", "7" },
+        .{ "Node.COMMENT_NODE", "8" },
+        .{ "Node.DOCUMENT_NODE", "9" },
+        .{ "Node.DOCUMENT_TYPE_NODE", "10" },
+        .{ "Node.DOCUMENT_FRAGMENT_NODE", "11" },
+        .{ "Node.ENTITY_REFERENCE_NODE", "5" },
+        .{ "Node.ENTITY_NODE", "6" },
+        .{ "Node.NOTATION_NODE", "12" },
+    }, .{});
+}

src/browser/dom/nodelist.zig

@@ -18,13 +18,10 @@
 
 const std = @import("std");
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
-const jsruntime = @import("jsruntime");
-const Callback = jsruntime.Callback;
-const CallbackResult = jsruntime.CallbackResult;
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const JsThis = @import("../env.zig").JsThis;
+const Callback = @import("../env.zig").Callback;
 
 const NodeUnion = @import("node.zig").Union;
 const Node = @import("node.zig").Node;
@@ -41,8 +38,6 @@ pub const Interfaces = .{
 };
 
 pub const NodeListIterator = struct {
-    pub const mem_guarantied = true;
-
     coll: *NodeList,
     index: u32 = 0,
 
@@ -69,8 +64,6 @@ pub const NodeListIterator = struct {
 };
 
 pub const NodeListEntriesIterator = struct {
-    pub const mem_guarantied = true;
-
     coll: *NodeList,
     index: u32 = 0,
 
@@ -104,18 +97,10 @@ pub const NodeListEntriesIterator = struct {
 // implementation allows only static nodelist.
 // see https://dom.spec.whatwg.org/#old-style-collections
 pub const NodeList = struct {
-    pub const mem_guarantied = true;
     pub const Exception = DOMException;
-
     const NodesArrayList = std.ArrayListUnmanaged(*parser.Node);
 
-    nodes: NodesArrayList,
-
-    pub fn init() NodeList {
-        return NodeList{
-            .nodes = NodesArrayList{},
-        };
-    }
+    nodes: NodesArrayList = .{},
 
     pub fn deinit(self: *NodeList, alloc: std.mem.Allocator) void {
         // TODO unref all nodes
@@ -130,7 +115,7 @@ pub const NodeList = struct {
         return @intCast(self.nodes.items.len);
     }
 
-    pub fn _item(self: *NodeList, index: u32) !?NodeUnion {
+    pub fn _item(self: *const NodeList, index: u32) !?NodeUnion {
         if (index >= self.nodes.items.len) {
             return null;
         }
@@ -139,17 +124,30 @@ pub const NodeList = struct {
         return try Node.toInterface(n);
     }
 
-    pub fn _forEach(self: *NodeList, alloc: std.mem.Allocator, cbk: Callback) !void { // TODO handle thisArg
-        var res = CallbackResult.init(alloc);
-        defer res.deinit();
+    // This code works, but it's _MUCH_ slower than using postAttach. The benefit
+    // of this version, is that it's "live"..but we're talking many orders of
+    // magnitude slower.
+    //
+    // You can test it by commenting out `postAttach`, uncommenting this and
+    // running:
+    //    zig build wpt --  tests/wpt/dom/nodes/NodeList-static-length-getter-tampered-indexOf-1.html
+    //
+    // I think this _is_ the right way to do it, but I must be doing something
+    // wrong to make it so slow.
+    // pub fn indexed_get(self: *const NodeList, index: u32, has_value: *bool) !?NodeUnion {
+    //     return (try self._item(index)) orelse {
+    //         has_value.* = false;
+    //         return null;
+    //     };
+    // }
 
+    pub fn _forEach(self: *NodeList, cbk: Callback) !void { // TODO handle thisArg
         for (self.nodes.items, 0..) |n, i| {
             const ii: u32 = @intCast(i);
-            cbk.trycall(.{ n, ii, self }, &res) catch |e| {
-                log.err("callback error: {s}", .{res.result orelse "unknown"});
-                log.debug("{s}", .{res.stack orelse "no stack trace"});
-
-                return e;
+            var result: Callback.Result = undefined;
+            cbk.tryCall(.{ n, ii, self }, &result) catch {
+                log.err("callback error: {s}", .{result.exception});
+                log.debug("stack:\n{s}", .{result.stack orelse "???"});
             };
         }
     }
@@ -171,38 +169,32 @@ pub const NodeList = struct {
     }
 
     // TODO entries() https://developer.mozilla.org/en-US/docs/Web/API/NodeList/entries
-
-    pub fn postAttach(self: *NodeList, alloc: std.mem.Allocator, js_obj: jsruntime.JSObject) !void {
-        const ln = self.get_length();
-        var i: u32 = 0;
-        while (i < ln) {
-            defer i += 1;
-            const k = try std.fmt.allocPrint(alloc, "{d}", .{i});
-
-            const node = try self._item(i) orelse unreachable;
-            try js_obj.set(k, node);
+    pub fn postAttach(self: *NodeList, js_this: JsThis) !void {
+        const len = self.get_length();
+        for (0..len) |i| {
+            const node = try self._item(@intCast(i)) orelse unreachable;
+            try js_this.setIndex(@intCast(i), node, .{});
         }
     }
 };
 
-// Tests
-// -----
+const testing = @import("../../testing.zig");
+test "Browser.DOM.NodeList" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var childnodes = [_]Case{
-        .{ .src = "let list = document.getElementById('content').childNodes", .ex = "undefined" },
-        .{ .src = "list.length", .ex = "9" },
-        .{ .src = "list[0].__proto__.constructor.name", .ex = "Text" },
-        .{ .src = 
-        \\let i = 0;
-        \\list.forEach(function (n, idx) {
-        \\  i += idx;
-        \\});
-        \\i;
-        , .ex = "36" },
-    };
-    try checkCases(js_env, &childnodes);
+    try runner.testCases(&.{
+        .{ "let list = document.getElementById('content').childNodes", "undefined" },
+        .{ "list.length", "9" },
+        .{ "list[0].__proto__.constructor.name", "Text" },
+        .{
+            \\  let i = 0;
+            \\  list.forEach(function (n, idx) {
+            \\    i += idx;
+            \\  });
+            \\  i;
+            ,
+            "36",
+        },
+    }, .{});
 }

src/browser/dom/processing_instruction.zig

@@ -0,0 +1,116 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const Node = @import("node.zig").Node;
+const SessionState = @import("../env.zig").SessionState;
+
+// https://dom.spec.whatwg.org/#processinginstruction
+pub const ProcessingInstruction = struct {
+    pub const Self = parser.ProcessingInstruction;
+
+    // TODO for libdom processing instruction inherit from node.
+    // But the spec says it must inherit from CDATA.
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn get_target(self: *parser.ProcessingInstruction) ![]const u8 {
+        // libdom stores the ProcessingInstruction target in the node's name.
+        return try parser.nodeName(parser.processingInstructionToNode(self));
+    }
+
+    // There's something wrong when we try to clone a ProcessInstruction normally.
+    // The resulting object can't be cast back into a node (it crashes). This is
+    // a simple workaround.
+    pub fn _cloneNode(self: *parser.ProcessingInstruction, _: ?bool, state: *SessionState) !*parser.ProcessingInstruction {
+        return try parser.documentCreateProcessingInstruction(
+            @ptrCast(state.document),
+            try get_target(self),
+            (try get_data(self)) orelse "",
+        );
+    }
+
+    pub fn get_data(self: *parser.ProcessingInstruction) !?[]const u8 {
+        return try parser.nodeValue(parser.processingInstructionToNode(self));
+    }
+
+    pub fn set_data(self: *parser.ProcessingInstruction, data: []u8) !void {
+        try parser.nodeSetValue(parser.processingInstructionToNode(self), data);
+    }
+
+    // netsurf's ProcessInstruction doesn't implement the dom_node_get_attributes
+    // and thus will crash if we try to call nodeIsEqualNode.
+    pub fn _isEqualNode(self: *parser.ProcessingInstruction, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(other_node) != .processing_instruction) {
+            return false;
+        }
+
+        const other: *parser.ProcessingInstruction = @ptrCast(other_node);
+
+        if (std.mem.eql(u8, try get_target(self), try get_target(other)) == false) {
+            return false;
+        }
+
+        {
+            const self_data = try get_data(self);
+            const other_data = try get_data(other);
+            if (self_data == null and other_data != null) {
+                return false;
+            }
+            if (self_data != null and other_data == null) {
+                return false;
+            }
+            if (std.mem.eql(u8, self_data.?, other_data.?) == false) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.ProcessingInstruction" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let pi = document.createProcessingInstruction('foo', 'bar')", "undefined" },
+        .{ "pi.target", "foo" },
+        .{ "pi.data", "bar" },
+        .{ "pi.data = 'foo'", "foo" },
+        .{ "pi.data", "foo" },
+
+        .{ "let pi2 = pi.cloneNode()", "undefined" },
+        .{ "pi2.nodeType", "7" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let pi11 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
+        .{ "let pi12 = document.createProcessingInstruction('target2', 'data2');", "undefined" },
+        .{ "let pi13 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
+        .{ "pi11.isEqualNode(pi11)", "true" },
+        .{ "pi11.isEqualNode(pi13)", "true" },
+        .{ "pi11.isEqualNode(pi12)", "false" },
+        .{ "pi12.isEqualNode(pi13)", "false" },
+        .{ "pi11.isEqualNode(document)", "false" },
+        .{ "document.isEqualNode(pi11)", "false" },
+    }, .{});
+}

src/browser/dom/text.zig

@@ -16,19 +16,12 @@
 // 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 jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
 
 const CharacterData = @import("character_data.zig").CharacterData;
 const CDATASection = @import("cdata_section.zig").CDATASection;
 
-const UserContext = @import("../user_context.zig").UserContext;
-
 // Text interfaces
 pub const Interfaces = .{
     CDATASection,
@@ -37,11 +30,11 @@ pub const Interfaces = .{
 pub const Text = struct {
     pub const Self = parser.Text;
     pub const prototype = *CharacterData;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
-    pub fn constructor(userctx: UserContext, data: ?[]const u8) !*parser.Text {
+    pub fn constructor(data: ?[]const u8, state: *const SessionState) !*parser.Text {
         return parser.documentCreateTextNode(
-            parser.documentHTMLToDocument(userctx.document),
+            parser.documentHTMLToDocument(state.document.?),
             data orelse "",
         );
     }
@@ -66,30 +59,28 @@ pub const Text = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var constructor = [_]Case{
-        .{ .src = "let t = new Text('foo')", .ex = "undefined" },
-        .{ .src = "t.data", .ex = "foo" },
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Text" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "let emptyt = new Text()", .ex = "undefined" },
-        .{ .src = "emptyt.data", .ex = "" },
-    };
-    try checkCases(js_env, &constructor);
+    try runner.testCases(&.{
+        .{ "let t = new Text('foo')", "undefined" },
+        .{ "t.data", "foo" },
 
-    var get_whole_text = [_]Case{
-        .{ .src = "let text = document.getElementById('link').firstChild", .ex = "undefined" },
-        .{ .src = "text.wholeText === 'OK'", .ex = "true" },
-    };
-    try checkCases(js_env, &get_whole_text);
+        .{ "let emptyt = new Text()", "undefined" },
+        .{ "emptyt.data", "" },
+    }, .{});
 
-    var split_text = [_]Case{
-        .{ .src = "text.data = 'OK modified'", .ex = "OK modified" },
-        .{ .src = "let split = text.splitText('OK'.length)", .ex = "undefined" },
-        .{ .src = "split.data === ' modified'", .ex = "true" },
-        .{ .src = "text.data === 'OK'", .ex = "true" },
-    };
-    try checkCases(js_env, &split_text);
+    try runner.testCases(&.{
+        .{ "let text = document.getElementById('link').firstChild", "undefined" },
+        .{ "text.wholeText === 'OK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "text.data = 'OK modified'", "OK modified" },
+        .{ "let split = text.splitText('OK'.length)", "undefined" },
+        .{ "split.data === ' modified'", "true" },
+        .{ "text.data === 'OK'", "true" },
+    }, .{});
 }

src/browser/dom/token_list.zig

@@ -0,0 +1,243 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const iterator = @import("../iterator/iterator.zig");
+
+const Callback = @import("../env.zig").Callback;
+const JsObject = @import("../env.zig").JsObject;
+const DOMException = @import("exceptions.zig").DOMException;
+
+const log = std.log.scoped(.token_list);
+
+pub const Interfaces = .{
+    DOMTokenList,
+    DOMTokenListIterable,
+    TokenListEntriesIterator,
+    TokenListEntriesIterator.Iterable,
+};
+
+// https://dom.spec.whatwg.org/#domtokenlist
+pub const DOMTokenList = struct {
+    pub const Self = parser.TokenList;
+    pub const Exception = DOMException;
+
+    pub fn get_length(self: *parser.TokenList) !u32 {
+        return parser.tokenListGetLength(self);
+    }
+
+    pub fn _item(self: *parser.TokenList, index: u32) !?[]const u8 {
+        return parser.tokenListItem(self, index);
+    }
+
+    pub fn _contains(self: *parser.TokenList, token: []const u8) !bool {
+        return parser.tokenListContains(self, token);
+    }
+
+    pub fn _add(self: *parser.TokenList, tokens: []const []const u8) !void {
+        for (tokens) |token| {
+            try parser.tokenListAdd(self, token);
+        }
+    }
+
+    pub fn _remove(self: *parser.TokenList, tokens: []const []const u8) !void {
+        for (tokens) |token| {
+            try parser.tokenListRemove(self, token);
+        }
+    }
+
+    /// If token is the empty string, then throw a "SyntaxError" DOMException.
+    /// If token contains any ASCII whitespace, then throw an
+    /// "InvalidCharacterError" DOMException.
+    fn validateToken(token: []const u8) !void {
+        if (token.len == 0) {
+            return parser.DOMError.Syntax;
+        }
+        for (token) |c| {
+            if (std.ascii.isWhitespace(c)) return parser.DOMError.InvalidCharacter;
+        }
+    }
+
+    pub fn _toggle(self: *parser.TokenList, token: []const u8, force: ?bool) !bool {
+        try validateToken(token);
+        const exists = try parser.tokenListContains(self, token);
+        if (exists) {
+            if (force == null or force.? == false) {
+                try parser.tokenListRemove(self, token);
+                return false;
+            }
+            return true;
+        }
+
+        if (force == null or force.? == true) {
+            try parser.tokenListAdd(self, token);
+            return true;
+        }
+        return false;
+    }
+
+    pub fn _replace(self: *parser.TokenList, token: []const u8, new: []const u8) !bool {
+        try validateToken(token);
+        try validateToken(new);
+        const exists = try parser.tokenListContains(self, token);
+        if (!exists) return false;
+        try parser.tokenListRemove(self, token);
+        try parser.tokenListAdd(self, new);
+        return true;
+    }
+
+    // TODO to implement.
+    pub fn _supports(_: *parser.TokenList, token: []const u8) !bool {
+        try validateToken(token);
+        return error.TypeError;
+    }
+
+    pub fn get_value(self: *parser.TokenList) !?[]const u8 {
+        return (try parser.tokenListGetValue(self)) orelse "";
+    }
+
+    pub fn set_value(self: *parser.TokenList, value: []const u8) !void {
+        return parser.tokenListSetValue(self, value);
+    }
+
+    pub fn _toString(self: *parser.TokenList) ![]const u8 {
+        return (try get_value(self)) orelse "";
+    }
+
+    pub fn _keys(self: *parser.TokenList) !iterator.U32Iterator {
+        return .{ .length = try get_length(self) };
+    }
+
+    pub fn _values(self: *parser.TokenList) DOMTokenListIterable {
+        return DOMTokenListIterable.init(.{ .token_list = self });
+    }
+
+    pub fn _entries(self: *parser.TokenList) TokenListEntriesIterator {
+        return TokenListEntriesIterator.init(.{ .token_list = self });
+    }
+
+    pub fn _symbol_iterator(self: *parser.TokenList) DOMTokenListIterable {
+        return _values(self);
+    }
+
+    // TODO handle thisArg
+    pub fn _forEach(self: *parser.TokenList, cbk: Callback, this_arg: JsObject) !void {
+        var entries = _entries(self);
+        while (try entries._next()) |entry| {
+            var result: Callback.Result = undefined;
+            cbk.tryCallWithThis(this_arg, .{ entry.@"1", entry.@"0", self }, &result) catch {
+                log.err("callback error: {s}", .{result.exception});
+                log.debug("stack:\n{s}", .{result.stack orelse "???"});
+            };
+        }
+    }
+};
+
+const DOMTokenListIterable = iterator.Iterable(Iterator, "DOMTokenListIterable");
+const TokenListEntriesIterator = iterator.NumericEntries(Iterator, "TokenListEntriesIterator");
+
+pub const Iterator = struct {
+    index: u32 = 0,
+    token_list: *parser.TokenList,
+
+    // used when wrapped in an iterator.NumericEntries
+    pub const Error = parser.DOMError;
+
+    pub fn _next(self: *Iterator) !?[]const u8 {
+        const index = self.index;
+        self.index = index + 1;
+        return DOMTokenList._item(self.token_list, index);
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.TokenList" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let gs = document.getElementById('para-empty')", "undefined" },
+        .{ "let cl = gs.classList", "undefined" },
+        .{ "gs.className", "ok empty" },
+        .{ "cl.value", "ok empty" },
+        .{ "cl.length", "2" },
+        .{ "gs.className = 'foo bar baz'", "foo bar baz" },
+        .{ "gs.className", "foo bar baz" },
+        .{ "cl.length", "3" },
+        .{ "gs.className = 'ok empty'", "ok empty" },
+        .{ "cl.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let cl2 = gs.classList", "undefined" },
+        .{ "cl2.length", "2" },
+        .{ "cl2.item(0)", "ok" },
+        .{ "cl2.item(1)", "empty" },
+        .{ "cl2.contains('ok')", "true" },
+        .{ "cl2.contains('nok')", "false" },
+        .{ "cl2.add('foo', 'bar', 'baz')", "undefined" },
+        .{ "cl2.length", "5" },
+        .{ "cl2.remove('foo', 'bar', 'baz')", "undefined" },
+        .{ "cl2.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let cl3 = gs.classList", "undefined" },
+        .{ "cl3.toggle('ok')", "false" },
+        .{ "cl3.toggle('ok')", "true" },
+        .{ "cl3.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let cl4 = gs.classList", "undefined" },
+        .{ "cl4.replace('ok', 'nok')", "true" },
+        .{ "cl4.value", "empty nok" },
+        .{ "cl4.replace('nok', 'ok')", "true" },
+        .{ "cl4.value", "empty ok" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let cl5 = gs.classList", "undefined" },
+        .{ "let keys = [...cl5.keys()]", "undefined" },
+        .{ "keys.length", "2" },
+        .{ "keys[0]", "0" },
+        .{ "keys[1]", "1" },
+
+        .{ "let values = [...cl5.values()]", "undefined" },
+        .{ "values.length", "2" },
+        .{ "values[0]", "empty" },
+        .{ "values[1]", "ok" },
+
+        .{ "let entries = [...cl5.entries()]", "undefined" },
+        .{ "entries.length", "2" },
+        .{ "entries[0]", "0,empty" },
+        .{ "entries[1]", "1,ok" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let cl6 = gs.classList", "undefined" },
+        .{ "cl6.value = 'a  b  ccc'", "a  b  ccc" },
+        .{ "cl6.value", "a  b  ccc" },
+        .{ "cl6.toString()", "a  b  ccc" },
+    }, .{});
+}

src/browser/dom/walker.zig

@@ -16,9 +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 parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 pub const Walker = union(enum) {
     walkerDepthFirst: WalkerDepthFirst,

src/browser/dump.zig

@@ -17,10 +17,9 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const File = std.fs.File;
 
-const parser = @import("netsurf");
-const Walker = @import("../dom/walker.zig").WalkerChildren;
+const parser = @import("netsurf.zig");
+const Walker = @import("dom/walker.zig").WalkerChildren;
 
 // writer must be a std.io.Writer
 pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
@@ -38,18 +37,18 @@ pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
             try writer.writeAll(tag);
 
             // write the attributes
-            const map = try parser.nodeGetAttributes(node);
-            const ln = try parser.namedNodeMapGetLength(map);
-            var i: u32 = 0;
-            while (i < ln) {
-                const attr = try parser.namedNodeMapItem(map, i) orelse break;
-                try writer.writeAll(" ");
-                try writer.writeAll(try parser.attributeGetName(attr));
-                try writer.writeAll("=\"");
-                const attribute_value = try parser.attributeGetValue(attr) orelse "";
-                try writeEscapedAttributeValue(writer, attribute_value);
-                try writer.writeAll("\"");
-                i += 1;
+            const _map = try parser.nodeGetAttributes(node);
+            if (_map) |map| {
+                const ln = try parser.namedNodeMapGetLength(map);
+                for (0..ln) |i| {
+                    const attr = try parser.namedNodeMapItem(map, @intCast(i)) orelse break;
+                    try writer.writeAll(" ");
+                    try writer.writeAll(try parser.attributeGetName(attr));
+                    try writer.writeAll("=\"");
+                    const attribute_value = try parser.attributeGetValue(attr) orelse "";
+                    try writeEscapedAttributeValue(writer, attribute_value);
+                    try writer.writeAll("\"");
+                }
             }
 
             try writer.writeAll(">");
@@ -197,7 +196,10 @@ fn testWriteFullHTML(comptime expected: []const u8, src: []const u8) !void {
     var buf = std.ArrayListUnmanaged(u8){};
     defer buf.deinit(testing.allocator);
 
-    const doc_html = try parser.documentHTMLParseFromStr(src);
+    var aa = std.heap.ArenaAllocator.init(testing.allocator);
+    defer aa.deinit();
+
+    const doc_html = try parser.documentHTMLParseFromStr(aa.allocator(), src);
     defer parser.documentHTMLClose(doc_html) catch {};
 
     const doc = parser.documentHTMLToDocument(doc_html);

src/browser/encoding/text_encoder.zig

@@ -0,0 +1,64 @@
+// Copyright (C) 2023-2024  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 Env = @import("../env.zig").Env;
+
+pub const Interfaces = .{
+    TextEncoder,
+};
+
+// https://encoding.spec.whatwg.org/#interface-textencoder
+pub const TextEncoder = struct {
+    pub fn constructor() !TextEncoder {
+        return .{};
+    }
+
+    pub fn get_encoding(_: *const TextEncoder) []const u8 {
+        return "utf-8";
+    }
+
+    pub fn _encode(_: *const TextEncoder, v: []const u8) !Env.TypedArray(u8) {
+        // Ensure the input is a valid utf-8
+        // It seems chrome accepts invalid utf-8 sequence.
+        //
+        if (!std.unicode.utf8ValidateSlice(v)) {
+            return error.InvalidUtf8;
+        }
+
+        return .{ .values = v };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Encoding.TextEncoder" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var encoder = new TextEncoder();", "undefined" },
+        .{ "encoder.encoding;", "utf-8" },
+        .{ "encoder.encode('€');", "226,130,172" },
+
+        // Invalid utf-8 sequence.
+        // Result with chrome:
+        // .{ "encoder.encode(new Uint8Array([0xE2,0x28,0xA1]))", "50,50,54,44,52,48,44,49,54,49" },
+        .{ "try {encoder.encode(new Uint8Array([0xE2,0x28,0xA1])) } catch (e) { e };", "Error: InvalidUtf8" },
+    }, .{});
+}

src/browser/env.zig

@@ -0,0 +1,62 @@
+const std = @import("std");
+
+const parser = @import("netsurf.zig");
+const URL = @import("../url.zig").URL;
+const js = @import("../runtime/js.zig");
+const storage = @import("storage/storage.zig");
+const generate = @import("../runtime/generate.zig");
+const Renderer = @import("renderer.zig").Renderer;
+const Loop = @import("../runtime/loop.zig").Loop;
+const HttpClient = @import("../http/client.zig").Client;
+
+const WebApis = struct {
+    // Wrapped like this for debug ergonomics.
+    // When we create our Env, a few lines down, we define it as:
+    //   pub const Env = js.Env(*SessionState, WebApis);
+    //
+    // If there's a compile time error witht he Env, it's type will be readable,
+    // i.e.: runtime.js.Env(*browser.env.SessionState, browser.env.WebApis)
+    //
+    // But if we didn't wrap it in the struct, like we once didn't, and defined
+    // env as:
+    //   pub const Env = js.Env(*SessionState, Interfaces);
+    //
+    // Because Interfaces is an anynoumous type, it doesn't have a friendly name
+    // and errors would be something like:
+    //   runtime.js.Env(*browser.env.SessionState, .{...A HUNDRED TYPES...})
+    pub const Interfaces = generate.Tuple(.{
+        @import("crypto/crypto.zig").Crypto,
+        @import("console/console.zig").Console,
+        @import("dom/dom.zig").Interfaces,
+        @import("encoding/text_encoder.zig").Interfaces,
+        @import("events/event.zig").Interfaces,
+        @import("html/html.zig").Interfaces,
+        @import("iterator/iterator.zig").Interfaces,
+        @import("storage/storage.zig").Interfaces,
+        @import("url/url.zig").Interfaces,
+        @import("xhr/xhr.zig").Interfaces,
+        @import("xhr/form_data.zig").Interfaces,
+        @import("xmlserializer/xmlserializer.zig").Interfaces,
+    });
+};
+
+pub const JsThis = Env.JsThis;
+pub const JsObject = Env.JsObject;
+pub const Callback = Env.Callback;
+pub const Env = js.Env(*SessionState, WebApis);
+pub const Global = @import("html/window.zig").Window;
+
+pub const SessionState = struct {
+    loop: *Loop,
+    url: *const URL,
+    renderer: *Renderer,
+    arena: std.mem.Allocator,
+    http_client: *HttpClient,
+    cookie_jar: *storage.CookieJar,
+    document: ?*parser.DocumentHTML,
+
+    // dangerous, but set by the JS framework
+    // shorter-lived than the arena above, which
+    // exists for the entire rendering of the page
+    call_arena: std.mem.Allocator = undefined,
+};

src/browser/events/custom_event.zig

@@ -0,0 +1,79 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const Event = @import("event.zig").Event;
+const JsObject = @import("../env.zig").JsObject;
+
+// https://dom.spec.whatwg.org/#interface-customevent
+pub const CustomEvent = struct {
+    pub const prototype = *Event;
+
+    proto: parser.Event,
+    detail: ?JsObject,
+
+    const CustomEventInit = struct {
+        bubbles: bool = false,
+        cancelable: bool = false,
+        composed: bool = false,
+        detail: ?JsObject = null,
+    };
+
+    pub fn constructor(event_type: []const u8, opts_: ?CustomEventInit) !CustomEvent {
+        const opts = opts_ orelse CustomEventInit{};
+
+        const event = try parser.eventCreate();
+        defer parser.eventDestroy(event);
+        try parser.eventInit(event, event_type, .{
+            .bubbles = opts.bubbles,
+            .cancelable = opts.cancelable,
+            .composed = opts.composed,
+        });
+
+        return .{
+            .proto = event.*,
+            .detail = if (opts.detail) |d| try d.persist() else null,
+        };
+    }
+
+    pub fn get_detail(self: *CustomEvent) ?JsObject {
+        return self.detail;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.CustomEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let capture = null", "undefined" },
+        .{ "const el = document.createElement('div');", "undefined" },
+        .{ "el.addEventListener('c1', (e) => { capture = 'c1-' + new String(e.detail)})", "undefined" },
+        .{ "el.addEventListener('c2', (e) => { capture = 'c2-' + new String(e.detail.over)})", "undefined" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1'));", "true" },
+        .{ "capture", "c1-null" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1', {detail: '123'}));", "true" },
+        .{ "capture", "c1-123" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c2', {detail: {over: 9000}}));", "true" },
+        .{ "capture", "c2-9000" },
+    }, .{});
+}

src/browser/events/event.zig

@@ -0,0 +1,270 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const parser = @import("../netsurf.zig");
+const Callback = @import("../env.zig").Callback;
+const generate = @import("../../runtime/generate.zig");
+
+const DOMException = @import("../dom/exceptions.zig").DOMException;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const EventTargetUnion = @import("../dom/event_target.zig").Union;
+
+const CustomEvent = @import("custom_event.zig").CustomEvent;
+const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
+
+const log = std.log.scoped(.events);
+
+// Event interfaces
+pub const Interfaces = .{
+    Event,
+    CustomEvent,
+    ProgressEvent,
+};
+
+pub const Union = generate.Union(Interfaces);
+
+// https://dom.spec.whatwg.org/#event
+pub const Event = struct {
+    pub const Self = parser.Event;
+    pub const Exception = DOMException;
+
+    pub const EventInit = parser.EventInit;
+
+    // JS
+    // --
+
+    pub const _CAPTURING_PHASE = 1;
+    pub const _AT_TARGET = 2;
+    pub const _BUBBLING_PHASE = 3;
+
+    pub fn toInterface(evt: *parser.Event) !Union {
+        return switch (try parser.eventGetInternalType(evt)) {
+            .event => .{ .Event = evt },
+            .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
+            .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
+        };
+    }
+
+    pub fn constructor(event_type: []const u8, opts: ?EventInit) !*parser.Event {
+        const event = try parser.eventCreate();
+        try parser.eventInit(event, event_type, opts orelse EventInit{});
+        return event;
+    }
+
+    // Getters
+
+    pub fn get_type(self: *parser.Event) ![]const u8 {
+        return try parser.eventType(self);
+    }
+
+    pub fn get_target(self: *parser.Event) !?EventTargetUnion {
+        const et = try parser.eventTarget(self);
+        if (et == null) return null;
+        return try EventTarget.toInterface(et.?);
+    }
+
+    pub fn get_currentTarget(self: *parser.Event) !?EventTargetUnion {
+        const et = try parser.eventCurrentTarget(self);
+        if (et == null) return null;
+        return try EventTarget.toInterface(et.?);
+    }
+
+    pub fn get_eventPhase(self: *parser.Event) !u8 {
+        return try parser.eventPhase(self);
+    }
+
+    pub fn get_bubbles(self: *parser.Event) !bool {
+        return try parser.eventBubbles(self);
+    }
+
+    pub fn get_cancelable(self: *parser.Event) !bool {
+        return try parser.eventCancelable(self);
+    }
+
+    pub fn get_defaultPrevented(self: *parser.Event) !bool {
+        return try parser.eventDefaultPrevented(self);
+    }
+
+    pub fn get_isTrusted(self: *parser.Event) !bool {
+        return try parser.eventIsTrusted(self);
+    }
+
+    pub fn get_timestamp(self: *parser.Event) !u32 {
+        return try parser.eventTimestamp(self);
+    }
+
+    // Methods
+
+    pub fn _initEvent(
+        self: *parser.Event,
+        eventType: []const u8,
+        bubbles: ?bool,
+        cancelable: ?bool,
+    ) !void {
+        const opts = EventInit{
+            .bubbles = bubbles orelse false,
+            .cancelable = cancelable orelse false,
+        };
+        return try parser.eventInit(self, eventType, opts);
+    }
+
+    pub fn _stopPropagation(self: *parser.Event) !void {
+        return try parser.eventStopPropagation(self);
+    }
+
+    pub fn _stopImmediatePropagation(self: *parser.Event) !void {
+        return try parser.eventStopImmediatePropagation(self);
+    }
+
+    pub fn _preventDefault(self: *parser.Event) !void {
+        return try parser.eventPreventDefault(self);
+    }
+};
+
+pub const EventHandler = struct {
+    callback: Callback,
+    node: parser.EventNode,
+
+    pub fn init(allocator: Allocator, callback: Callback) !*EventHandler {
+        const eh = try allocator.create(EventHandler);
+        eh.* = .{
+            .callback = callback,
+            .node = .{
+                .id = callback.id,
+                .func = handle,
+            },
+        };
+        return eh;
+    }
+
+    fn handle(node: *parser.EventNode, event: *parser.Event) void {
+        const ievent = Event.toInterface(event) catch |err| {
+            log.err("Event.toInterface: {}", .{err});
+            return;
+        };
+
+        const self: *EventHandler = @fieldParentPtr("node", node);
+        var result: Callback.Result = undefined;
+        self.callback.tryCall(.{ievent}, &result) catch {
+            log.err("event handler error: {s}", .{result.exception});
+            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Event" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let para = document.getElementById('para')", "undefined" },
+        .{ "var nb = 0; var evt", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ content.addEventListener('target', function(e) {
+            \\  evt = e; nb = nb + 1;
+            \\  e.preventDefault();
+            \\ })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('target', {bubbles: true, cancelable: true}))", "false" },
+        .{ "nb", "1" },
+        .{ "evt.target === content", "true" },
+        .{ "evt.bubbles", "true" },
+        .{ "evt.cancelable", "true" },
+        .{ "evt.defaultPrevented", "true" },
+        .{ "evt.isTrusted", "true" },
+        .{ "evt.timestamp > 1704063600", "true" }, // 2024/01/01 00:00
+        // event.type, event.currentTarget, event.phase checked in EventTarget
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\ content.addEventListener('stop',function(e) {
+            \\    e.stopPropagation();
+            \\    nb = nb + 1;
+            \\  }, true)
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  para.addEventListener('stop',function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "para.dispatchEvent(new Event('stop'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    e.stopImmediatePropagation();
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('immediate'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at first content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('legacy', function(e) {
+            \\     evt = e; nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "let evtLegacy = document.createEvent('Event')", "undefined" },
+        .{ "evtLegacy.initEvent('legacy')", "undefined" },
+        .{ "content.dispatchEvent(evtLegacy)", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var nb = 0; var evt = null; function cbk(event) { nb ++; evt=event; }", "undefined" },
+        .{ "document.addEventListener('count', cbk)", "undefined" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "0" },
+    }, .{});
+}

src/browser/html/document.zig

@@ -18,26 +18,35 @@
 
 const std = @import("std");
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const Node = @import("../dom/node.zig").Node;
 const Document = @import("../dom/document.zig").Document;
 const NodeList = @import("../dom/nodelist.zig").NodeList;
-const HTMLElem = @import("elements.zig");
 const Location = @import("location.zig").Location;
 
 const collection = @import("../dom/html_collection.zig");
 const Walker = @import("../dom/walker.zig").WalkerDepthFirst;
+const Cookie = @import("../storage/cookie.zig").Cookie;
+
+pub fn normalizeWhitespace(arena: std.mem.Allocator, title: []const u8) ![]const u8 {
+    var normalized = try std.ArrayListUnmanaged(u8).initCapacity(arena, title.len);
+    var tokens = std.mem.tokenizeAny(u8, title, &std.ascii.whitespace);
+
+    var prepend = false;
+    while (tokens.next()) |token| {
+        if (prepend) normalized.appendAssumeCapacity(' ') else prepend = true;
+        normalized.appendSliceAssumeCapacity(token);
+    }
+
+    return normalized.items;
+}
 
 // WEB IDL https://html.spec.whatwg.org/#the-document-object
 pub const HTMLDocument = struct {
     pub const Self = parser.DocumentHTML;
     pub const prototype = *Document;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     // JS funcs
     // --------
@@ -79,63 +88,69 @@ pub const HTMLDocument = struct {
         }
     }
 
-    // TODO: not implemented by libdom
-    pub fn get_cookie(_: *parser.DocumentHTML) ![]const u8 {
-        return error.NotImplemented;
+    pub fn get_cookie(_: *parser.DocumentHTML, state: *SessionState) ![]const u8 {
+        var buf: std.ArrayListUnmanaged(u8) = .{};
+        try state.cookie_jar.forRequest(&state.url.uri, buf.writer(state.arena), .{ .navigation = true });
+        return buf.items;
     }
 
-    // TODO: not implemented by libdom
-    pub fn set_cookie(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
-        return error.NotImplemented;
+    pub fn set_cookie(_: *parser.DocumentHTML, cookie_str: []const u8, state: *SessionState) ![]const u8 {
+        // we use the cookie jar's allocator to parse the cookie because it
+        // outlives the page's arena.
+        const c = try Cookie.parse(state.cookie_jar.allocator, &state.url.uri, cookie_str);
+        errdefer c.deinit();
+        try state.cookie_jar.add(c, std.time.timestamp());
+        return cookie_str;
     }
 
     pub fn get_title(self: *parser.DocumentHTML) ![]const u8 {
         return try parser.documentHTMLGetTitle(self);
     }
 
-    pub fn set_title(self: *parser.DocumentHTML, v: []const u8) ![]const u8 {
-        try parser.documentHTMLSetTitle(self, v);
-        return v;
+    pub fn set_title(self: *parser.DocumentHTML, v: []const u8, state: *SessionState) ![]const u8 {
+        const normalized = try normalizeWhitespace(state.arena, v);
+        try parser.documentHTMLSetTitle(self, normalized);
+        return normalized;
     }
 
-    pub fn _getElementsByName(self: *parser.DocumentHTML, alloc: std.mem.Allocator, name: []const u8) !NodeList {
-        var list = NodeList.init();
-        errdefer list.deinit(alloc);
+    pub fn _getElementsByName(self: *parser.DocumentHTML, name: []const u8, state: *SessionState) !NodeList {
+        const arena = state.arena;
+        var list: NodeList = .{};
 
         if (name.len == 0) return list;
 
         const root = parser.documentHTMLToNode(self);
-        var c = try collection.HTMLCollectionByName(alloc, root, name, false);
+        var c = try collection.HTMLCollectionByName(arena, root, name, false);
 
         const ln = try c.get_length();
         var i: u32 = 0;
         while (i < ln) {
             const n = try c.item(i) orelse break;
-            try list.append(alloc, n);
+            try list.append(arena, n);
             i += 1;
         }
 
         return list;
     }
 
-    pub fn get_images(self: *parser.DocumentHTML, alloc: std.mem.Allocator) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(alloc, parser.documentHTMLToNode(self), "img", false);
+    pub fn get_images(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "img", false);
     }
 
-    pub fn get_embeds(self: *parser.DocumentHTML, alloc: std.mem.Allocator) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(alloc, parser.documentHTMLToNode(self), "embed", false);
+    pub fn get_embeds(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "embed", false);
     }
 
-    pub fn get_plugins(self: *parser.DocumentHTML, alloc: std.mem.Allocator) !collection.HTMLCollection {
-        return get_embeds(self, alloc);
+    pub fn get_plugins(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
+        return get_embeds(self, state);
     }
 
-    pub fn get_forms(self: *parser.DocumentHTML, alloc: std.mem.Allocator) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(alloc, parser.documentHTMLToNode(self), "form", false);
+    pub fn get_forms(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "form", false);
     }
 
-    pub fn get_scripts(self: *parser.DocumentHTML, alloc: std.mem.Allocator) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(alloc, parser.documentHTMLToNode(self), "script", false);
+    pub fn get_scripts(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "script", false);
     }
 
     pub fn get_applets(_: *parser.DocumentHTML) !collection.HTMLCollection {
@@ -150,8 +165,8 @@ pub const HTMLDocument = struct {
         return try collection.HTMLCollectionByAnchors(parser.documentHTMLToNode(self), false);
     }
 
-    pub fn get_all(self: *parser.DocumentHTML) !collection.HTMLCollection {
-        return try collection.HTMLCollectionAll(parser.documentHTMLToNode(self), true);
+    pub fn get_all(self: *parser.DocumentHTML) collection.HTMLAllCollection {
+        return collection.HTMLAllCollection.init(parser.documentHTMLToNode(self));
     }
 
     pub fn get_currentScript(self: *parser.DocumentHTML) !?*parser.Script {
@@ -206,54 +221,64 @@ pub const HTMLDocument = struct {
     pub fn set_bgColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
         return "";
     }
-
-    pub fn deinit(_: *parser.DocumentHTML, _: std.mem.Allocator) void {}
 };
 
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var constructor = [_]Case{
-        .{ .src = "document.__proto__.constructor.name", .ex = "HTMLDocument" },
-        .{ .src = "document.__proto__.__proto__.constructor.name", .ex = "Document" },
-        .{ .src = "document.body.localName == 'body'", .ex = "true" },
-    };
-    try checkCases(js_env, &constructor);
+const testing = @import("../../testing.zig");
 
-    var getters = [_]Case{
-        .{ .src = "document.domain", .ex = "" },
-        .{ .src = "document.referrer", .ex = "" },
-        .{ .src = "document.title", .ex = "" },
-        .{ .src = "document.body.localName", .ex = "body" },
-        .{ .src = "document.head.localName", .ex = "head" },
-        .{ .src = "document.images.length", .ex = "0" },
-        .{ .src = "document.embeds.length", .ex = "0" },
-        .{ .src = "document.plugins.length", .ex = "0" },
-        .{ .src = "document.scripts.length", .ex = "0" },
-        .{ .src = "document.forms.length", .ex = "0" },
-        .{ .src = "document.links.length", .ex = "1" },
-        .{ .src = "document.applets.length", .ex = "0" },
-        .{ .src = "document.anchors.length", .ex = "0" },
-        .{ .src = "document.all.length", .ex = "8" },
-        .{ .src = "document.currentScript", .ex = "null" },
-    };
-    try checkCases(js_env, &getters);
+test "Browser.HTML.Document" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-    var titles = [_]Case{
-        .{ .src = "document.title = 'foo'", .ex = "foo" },
-        .{ .src = "document.title", .ex = "foo" },
-        .{ .src = "document.title = ''", .ex = "" },
-    };
-    try checkCases(js_env, &titles);
+    try runner.testCases(&.{
+        .{ "document.__proto__.constructor.name", "HTMLDocument" },
+        .{ "document.__proto__.__proto__.constructor.name", "Document" },
+        .{ "document.body.localName == 'body'", "true" },
+    }, .{});
 
-    var getElementsByName = [_]Case{
-        .{ .src = "document.getElementById('link').setAttribute('name', 'foo')", .ex = "undefined" },
-        .{ .src = "let list = document.getElementsByName('foo')", .ex = "undefined" },
-        .{ .src = "list.length", .ex = "1" },
-    };
-    try checkCases(js_env, &getElementsByName);
+    try runner.testCases(&.{
+        .{ "document.domain", "" },
+        .{ "document.referrer", "" },
+        .{ "document.title", "" },
+        .{ "document.body.localName", "body" },
+        .{ "document.head.localName", "head" },
+        .{ "document.images.length", "0" },
+        .{ "document.embeds.length", "0" },
+        .{ "document.plugins.length", "0" },
+        .{ "document.scripts.length", "0" },
+        .{ "document.forms.length", "0" },
+        .{ "document.links.length", "1" },
+        .{ "document.applets.length", "0" },
+        .{ "document.anchors.length", "0" },
+        .{ "document.all.length", "8" },
+        .{ "document.currentScript", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.title = 'foo'", "foo" },
+        .{ "document.title", "foo" },
+        .{ "document.title = ''", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('link').setAttribute('name', 'foo')", "undefined" },
+        .{ "let list = document.getElementsByName('foo')", "undefined" },
+        .{ "list.length", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.cookie", "" },
+        .{ "document.cookie = 'name=Oeschger; SameSite=None; Secure'", "name=Oeschger; SameSite=None; Secure" },
+        .{ "document.cookie = 'favorite_food=tripe; SameSite=None; Secure'", "favorite_food=tripe; SameSite=None; Secure" },
+        .{ "document.cookie", "name=Oeschger; favorite_food=tripe" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "!document.all", "true" },
+        .{ "!!document.all", "false" },
+        .{ "document.all(5)", "[object HTMLParagraphElement]" },
+        .{ "document.all('content')", "[object HTMLDivElement]" },
+    }, .{});
 }

src/browser/html/elements.zig

@@ -17,16 +17,13 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 const std = @import("std");
 
-const parser = @import("netsurf");
-const generate = @import("../generate.zig");
+const parser = @import("../netsurf.zig");
+const generate = @import("../../runtime/generate.zig");
+const SessionState = @import("../env.zig").SessionState;
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const Element = @import("../dom/element.zig").Element;
 const URL = @import("../url/url.zig").URL;
 const Node = @import("../dom/node.zig").Node;
+const Element = @import("../dom/element.zig").Element;
 
 // HTMLElement interfaces
 pub const Interfaces = .{
@@ -105,14 +102,12 @@ pub const Union = generate.Union(Interfaces);
 // Abstract class
 // --------------
 
-const CSSProperties = struct {
-    pub const mem_guarantied = true;
-};
+const CSSProperties = struct {};
 
 pub const HTMLElement = struct {
     pub const Self = parser.ElementHTML;
     pub const prototype = *Element;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     pub fn get_style(_: *parser.ElementHTML) CSSProperties {
         return .{};
@@ -136,6 +131,18 @@ pub const HTMLElement = struct {
         // attach the text node.
         _ = try parser.nodeAppendChild(n, @as(*parser.Node, @ptrCast(t)));
     }
+
+    pub fn _click(e: *parser.ElementHTML) !void {
+        const event = try parser.mouseEventCreate();
+        defer parser.mouseEventDestroy(event);
+        try parser.mouseEventInit(event, "click", .{
+            .x = 0,
+            .y = 0,
+            .bubbles = true,
+            .cancelable = true,
+        });
+        _ = try parser.elementDispatchEvent(@ptrCast(e), @ptrCast(event));
+    }
 };
 
 // Deprecated HTMLElements in Chrome (2023/03/15)
@@ -148,7 +155,7 @@ pub const HTMLElement = struct {
 pub const HTMLMediaElement = struct {
     pub const Self = parser.MediaElement;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 // HTML elements
@@ -157,14 +164,14 @@ pub const HTMLMediaElement = struct {
 pub const HTMLUnknownElement = struct {
     pub const Self = parser.Unknown;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 // https://html.spec.whatwg.org/#the-a-element
 pub const HTMLAnchorElement = struct {
     pub const Self = parser.Anchor;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     pub fn get_target(self: *parser.Anchor) ![]const u8 {
         return try parser.anchorGetTarget(self);
@@ -174,7 +181,7 @@ pub const HTMLAnchorElement = struct {
         return try parser.anchorSetTarget(self, href);
     }
 
-    pub fn get_download(_: *parser.Anchor) ![]const u8 {
+    pub fn get_download(_: *const parser.Anchor) ![]const u8 {
         return ""; // TODO
     }
 
@@ -218,47 +225,39 @@ pub const HTMLAnchorElement = struct {
         return try parser.nodeSetTextContent(parser.anchorToNode(self), v);
     }
 
-    inline fn url(self: *parser.Anchor, alloc: std.mem.Allocator) !URL {
+    inline fn url(self: *parser.Anchor, state: *SessionState) !URL {
         const href = try parser.anchorGetHref(self);
-        return URL.constructor(alloc, href, null); // TODO inject base url
+        return URL.constructor(href, null, state); // TODO inject base url
     }
 
     // TODO return a disposable string
-    pub fn get_origin(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try u.get_origin(alloc);
+    pub fn get_origin(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try u.get_origin(state);
     }
 
     // TODO return a disposable string
-    pub fn get_protocol(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return u.get_protocol(alloc);
+    pub fn get_protocol(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return u.get_protocol(state);
     }
 
-    pub fn set_protocol(self: *parser.Anchor, alloc: std.mem.Allocator, v: []const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_protocol(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         u.uri.scheme = v;
-        const href = try u.format(alloc);
-        defer alloc.free(href);
-
+        const href = try u.toString(arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_host(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try u.get_host(alloc);
+    pub fn get_host(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try u.get_host(state);
     }
 
-    pub fn set_host(self: *parser.Anchor, alloc: std.mem.Allocator, v: []const u8) !void {
+    pub fn set_host(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
         // search : separator
         var p: ?u16 = null;
         var h: []const u8 = undefined;
@@ -270,8 +269,8 @@ pub const HTMLAnchorElement = struct {
             }
         }
 
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (p) |pp| {
             u.uri.host = .{ .raw = h };
@@ -281,40 +280,33 @@ pub const HTMLAnchorElement = struct {
             u.uri.port = null;
         }
 
-        const href = try u.format(alloc);
-        defer alloc.free(href);
-
+        const href = try u.toString(arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_hostname(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try alloc.dupe(u8, u.get_hostname());
+    pub fn get_hostname(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try state.arena.dupe(u8, u.get_hostname());
     }
 
-    pub fn set_hostname(self: *parser.Anchor, alloc: std.mem.Allocator, v: []const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
+    pub fn set_hostname(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
         u.uri.host = .{ .raw = v };
-        const href = try u.format(alloc);
+        const href = try u.toString(arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_port(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try u.get_port(alloc);
+    pub fn get_port(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try u.get_port(state);
     }
 
-    pub fn set_port(self: *parser.Anchor, alloc: std.mem.Allocator, v: ?[]const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_port(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (v != null and v.?.len > 0) {
             u.uri.port = try std.fmt.parseInt(u16, v.?, 10);
@@ -322,407 +314,387 @@ pub const HTMLAnchorElement = struct {
             u.uri.port = null;
         }
 
-        const href = try u.format(alloc);
-        defer alloc.free(href);
-
+        const href = try u.toString(arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_username(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try alloc.dupe(u8, u.get_username());
+    pub fn get_username(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try state.arena.dupe(u8, u.get_username());
     }
 
-    pub fn set_username(self: *parser.Anchor, alloc: std.mem.Allocator, v: ?[]const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_username(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (v) |vv| {
             u.uri.user = .{ .raw = vv };
         } else {
             u.uri.user = null;
         }
-        const href = try u.format(alloc);
-        defer alloc.free(href);
+        const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_password(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try alloc.dupe(u8, u.get_password());
+    pub fn get_password(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try state.arena.dupe(u8, u.get_password());
     }
 
-    pub fn set_password(self: *parser.Anchor, alloc: std.mem.Allocator, v: ?[]const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_password(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (v) |vv| {
             u.uri.password = .{ .raw = vv };
         } else {
             u.uri.password = null;
         }
-        const href = try u.format(alloc);
-        defer alloc.free(href);
+        const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_pathname(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try alloc.dupe(u8, u.get_pathname());
+    pub fn get_pathname(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try state.arena.dupe(u8, u.get_pathname());
     }
 
-    pub fn set_pathname(self: *parser.Anchor, alloc: std.mem.Allocator, v: []const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
+    pub fn set_pathname(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
         u.uri.path = .{ .raw = v };
-        const href = try u.format(alloc);
-        defer alloc.free(href);
+        const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_search(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try u.get_search(alloc);
+    pub fn get_search(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try u.get_search(state);
     }
 
-    pub fn set_search(self: *parser.Anchor, alloc: std.mem.Allocator, v: ?[]const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_search(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (v) |vv| {
             u.uri.query = .{ .raw = vv };
         } else {
             u.uri.query = null;
         }
-        const href = try u.format(alloc);
-        defer alloc.free(href);
+        const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_hash(self: *parser.Anchor, alloc: std.mem.Allocator) ![]const u8 {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
-
-        return try u.get_hash(alloc);
+    pub fn get_hash(self: *parser.Anchor, state: *SessionState) ![]const u8 {
+        var u = try url(self, state);
+        return try u.get_hash(state);
     }
 
-    pub fn set_hash(self: *parser.Anchor, alloc: std.mem.Allocator, v: ?[]const u8) !void {
-        var u = try url(self, alloc);
-        defer u.deinit(alloc);
+    pub fn set_hash(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        var u = try url(self, state);
 
         if (v) |vv| {
             u.uri.fragment = .{ .raw = vv };
         } else {
             u.uri.fragment = null;
         }
-        const href = try u.format(alloc);
-        defer alloc.free(href);
+        const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
-
-    pub fn deinit(_: *parser.Anchor, _: std.mem.Allocator) void {}
 };
 
 pub const HTMLAppletElement = struct {
     pub const Self = parser.Applet;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLAreaElement = struct {
     pub const Self = parser.Area;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLAudioElement = struct {
     pub const Self = parser.Audio;
     pub const prototype = *HTMLMediaElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLBRElement = struct {
     pub const Self = parser.BR;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLBaseElement = struct {
     pub const Self = parser.Base;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLBodyElement = struct {
     pub const Self = parser.Body;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLButtonElement = struct {
     pub const Self = parser.Button;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLCanvasElement = struct {
     pub const Self = parser.Canvas;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDListElement = struct {
     pub const Self = parser.DList;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDataElement = struct {
     pub const Self = parser.Data;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDataListElement = struct {
     pub const Self = parser.DataList;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDialogElement = struct {
     pub const Self = parser.Dialog;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDirectoryElement = struct {
     pub const Self = parser.Directory;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLDivElement = struct {
     pub const Self = parser.Div;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLEmbedElement = struct {
     pub const Self = parser.Embed;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLFieldSetElement = struct {
     pub const Self = parser.FieldSet;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLFontElement = struct {
     pub const Self = parser.Font;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLFormElement = struct {
     pub const Self = parser.Form;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLFrameElement = struct {
     pub const Self = parser.Frame;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLFrameSetElement = struct {
     pub const Self = parser.FrameSet;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLHRElement = struct {
     pub const Self = parser.HR;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLHeadElement = struct {
     pub const Self = parser.Head;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLHeadingElement = struct {
     pub const Self = parser.Heading;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLHtmlElement = struct {
     pub const Self = parser.Html;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLIFrameElement = struct {
     pub const Self = parser.IFrame;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLImageElement = struct {
     pub const Self = parser.Image;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLInputElement = struct {
     pub const Self = parser.Input;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLLIElement = struct {
     pub const Self = parser.LI;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLLabelElement = struct {
     pub const Self = parser.Label;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLLegendElement = struct {
     pub const Self = parser.Legend;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLLinkElement = struct {
     pub const Self = parser.Link;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLMapElement = struct {
     pub const Self = parser.Map;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLMetaElement = struct {
     pub const Self = parser.Meta;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLMeterElement = struct {
     pub const Self = parser.Meter;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLModElement = struct {
     pub const Self = parser.Mod;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLOListElement = struct {
     pub const Self = parser.OList;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLObjectElement = struct {
     pub const Self = parser.Object;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLOptGroupElement = struct {
     pub const Self = parser.OptGroup;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLOptionElement = struct {
     pub const Self = parser.Option;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLOutputElement = struct {
     pub const Self = parser.Output;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLParagraphElement = struct {
     pub const Self = parser.Paragraph;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLParamElement = struct {
     pub const Self = parser.Param;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLPictureElement = struct {
     pub const Self = parser.Picture;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLPreElement = struct {
     pub const Self = parser.Pre;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLProgressElement = struct {
     pub const Self = parser.Progress;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLQuoteElement = struct {
     pub const Self = parser.Quote;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 // https://html.spec.whatwg.org/#the-script-element
 pub const HTMLScriptElement = struct {
     pub const Self = parser.Script;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
     pub fn get_src(self: *parser.Script) !?[]const u8 {
         return try parser.elementGetAttribute(
@@ -837,103 +809,103 @@ pub const HTMLScriptElement = struct {
 pub const HTMLSelectElement = struct {
     pub const Self = parser.Select;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLSourceElement = struct {
     pub const Self = parser.Source;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLSpanElement = struct {
     pub const Self = parser.Span;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLStyleElement = struct {
     pub const Self = parser.Style;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableElement = struct {
     pub const Self = parser.Table;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableCaptionElement = struct {
     pub const Self = parser.TableCaption;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableCellElement = struct {
     pub const Self = parser.TableCell;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableColElement = struct {
     pub const Self = parser.TableCol;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableRowElement = struct {
     pub const Self = parser.TableRow;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTableSectionElement = struct {
     pub const Self = parser.TableSection;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTemplateElement = struct {
     pub const Self = parser.Template;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTextAreaElement = struct {
     pub const Self = parser.TextArea;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTimeElement = struct {
     pub const Self = parser.Time;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTitleElement = struct {
     pub const Self = parser.Title;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLTrackElement = struct {
     pub const Self = parser.Track;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLUListElement = struct {
     pub const Self = parser.UList;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub const HTMLVideoElement = struct {
     pub const Self = parser.Video;
     pub const prototype = *HTMLElement;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };
 
 pub fn toInterface(comptime T: type, e: *parser.Element) !T {
@@ -1010,89 +982,92 @@ pub fn toInterface(comptime T: type, e: *parser.Element) !T {
     };
 }
 
-// Tests
-// -----
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Element" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var anchor = [_]Case{
-        .{ .src = "let a = document.getElementById('link')", .ex = "undefined" },
-        .{ .src = "a.target", .ex = "" },
-        .{ .src = "a.target = '_blank'", .ex = "_blank" },
-        .{ .src = "a.target", .ex = "_blank" },
-        .{ .src = "a.target = ''", .ex = "" },
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('link')", "undefined" },
+        .{ "a.target", "" },
+        .{ "a.target = '_blank'", "_blank" },
+        .{ "a.target", "_blank" },
+        .{ "a.target = ''", "" },
 
-        .{ .src = "a.href", .ex = "foo" },
-        .{ .src = "a.href = 'https://lightpanda.io/'", .ex = "https://lightpanda.io/" },
-        .{ .src = "a.href", .ex = "https://lightpanda.io/" },
+        .{ "a.href", "foo" },
+        .{ "a.href = 'https://lightpanda.io/'", "https://lightpanda.io/" },
+        .{ "a.href", "https://lightpanda.io/" },
 
-        .{ .src = "a.origin", .ex = "https://lightpanda.io" },
+        .{ "a.origin", "https://lightpanda.io" },
 
-        .{ .src = "a.host = 'lightpanda.io:443'", .ex = "lightpanda.io:443" },
-        .{ .src = "a.host", .ex = "lightpanda.io:443" },
-        .{ .src = "a.port", .ex = "443" },
-        .{ .src = "a.hostname", .ex = "lightpanda.io" },
+        .{ "a.host = 'lightpanda.io:443'", "lightpanda.io:443" },
+        .{ "a.host", "lightpanda.io:443" },
+        .{ "a.port", "443" },
+        .{ "a.hostname", "lightpanda.io" },
 
-        .{ .src = "a.host = 'lightpanda.io'", .ex = "lightpanda.io" },
-        .{ .src = "a.host", .ex = "lightpanda.io" },
-        .{ .src = "a.port", .ex = "" },
-        .{ .src = "a.hostname", .ex = "lightpanda.io" },
+        .{ "a.host = 'lightpanda.io'", "lightpanda.io" },
+        .{ "a.host", "lightpanda.io" },
+        .{ "a.port", "" },
+        .{ "a.hostname", "lightpanda.io" },
 
-        .{ .src = "a.host", .ex = "lightpanda.io" },
-        .{ .src = "a.hostname", .ex = "lightpanda.io" },
-        .{ .src = "a.hostname = 'foo.bar'", .ex = "foo.bar" },
-        .{ .src = "a.href", .ex = "https://foo.bar/" },
+        .{ "a.host", "lightpanda.io" },
+        .{ "a.hostname", "lightpanda.io" },
+        .{ "a.hostname = 'foo.bar'", "foo.bar" },
+        .{ "a.href", "https://foo.bar/" },
 
-        .{ .src = "a.search", .ex = "" },
-        .{ .src = "a.search = 'q=bar'", .ex = "q=bar" },
-        .{ .src = "a.search", .ex = "?q=bar" },
-        .{ .src = "a.href", .ex = "https://foo.bar/?q=bar" },
+        .{ "a.search", "" },
+        .{ "a.search = 'q=bar'", "q=bar" },
+        .{ "a.search", "?q=bar" },
+        .{ "a.href", "https://foo.bar/?q=bar" },
 
-        .{ .src = "a.hash", .ex = "" },
-        .{ .src = "a.hash = 'frag'", .ex = "frag" },
-        .{ .src = "a.hash", .ex = "#frag" },
-        .{ .src = "a.href", .ex = "https://foo.bar/?q=bar#frag" },
+        .{ "a.hash", "" },
+        .{ "a.hash = 'frag'", "frag" },
+        .{ "a.hash", "#frag" },
+        .{ "a.href", "https://foo.bar/?q=bar#frag" },
 
-        .{ .src = "a.port", .ex = "" },
-        .{ .src = "a.port = '443'", .ex = "443" },
-        .{ .src = "a.host", .ex = "foo.bar:443" },
-        .{ .src = "a.hostname", .ex = "foo.bar" },
-        .{ .src = "a.href", .ex = "https://foo.bar:443/?q=bar#frag" },
-        .{ .src = "a.port = null", .ex = "null" },
-        .{ .src = "a.href", .ex = "https://foo.bar/?q=bar#frag" },
+        .{ "a.port", "" },
+        .{ "a.port = '443'", "443" },
+        .{ "a.host", "foo.bar:443" },
+        .{ "a.hostname", "foo.bar" },
+        .{ "a.href", "https://foo.bar:443/?q=bar#frag" },
+        .{ "a.port = null", "null" },
+        .{ "a.href", "https://foo.bar/?q=bar#frag" },
 
-        .{ .src = "a.href = 'foo'", .ex = "foo" },
+        .{ "a.href = 'foo'", "foo" },
 
-        .{ .src = "a.type", .ex = "" },
-        .{ .src = "a.type = 'text/html'", .ex = "text/html" },
-        .{ .src = "a.type", .ex = "text/html" },
-        .{ .src = "a.type = ''", .ex = "" },
+        .{ "a.type", "" },
+        .{ "a.type = 'text/html'", "text/html" },
+        .{ "a.type", "text/html" },
+        .{ "a.type = ''", "" },
 
-        .{ .src = "a.text", .ex = "OK" },
-        .{ .src = "a.text = 'foo'", .ex = "foo" },
-        .{ .src = "a.text", .ex = "foo" },
-        .{ .src = "a.text = 'OK'", .ex = "OK" },
-    };
-    try checkCases(js_env, &anchor);
+        .{ "a.text", "OK" },
+        .{ "a.text = 'foo'", "foo" },
+        .{ "a.text", "foo" },
+        .{ "a.text = 'OK'", "OK" },
+    }, .{});
 
-    var script = [_]Case{
-        .{ .src = "let script = document.createElement('script')", .ex = "undefined" },
-        .{ .src = "script.src = 'foo.bar'", .ex = "foo.bar" },
+    try runner.testCases(&.{
+        .{ "let script = document.createElement('script')", "undefined" },
+        .{ "script.src = 'foo.bar'", "foo.bar" },
 
-        .{ .src = "script.async = true", .ex = "true" },
-        .{ .src = "script.async", .ex = "true" },
-        .{ .src = "script.async = false", .ex = "false" },
-        .{ .src = "script.async", .ex = "false" },
-    };
-    try checkCases(js_env, &script);
+        .{ "script.async = true", "true" },
+        .{ "script.async", "true" },
+        .{ "script.async = false", "false" },
+        .{ "script.async", "false" },
+    }, .{});
 
-    var innertext = [_]Case{
-        .{ .src = "const backup = document.getElementById('content')", .ex = "undefined" },
-        .{ .src = "document.getElementById('content').innerText = 'foo';", .ex = "foo" },
-        .{ .src = "document.getElementById('content').innerText", .ex = "foo" },
-        .{ .src = "document.getElementById('content').innerHTML = backup; true;", .ex = "true" },
-    };
-    try checkCases(js_env, &innertext);
+    try runner.testCases(&.{
+        .{ "const backup = document.getElementById('content')", "undefined" },
+        .{ "document.getElementById('content').innerText = 'foo';", "foo" },
+        .{ "document.getElementById('content').innerText", "foo" },
+        .{ "document.getElementById('content').innerHTML = backup; true;", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let click_count = 0;", "undefined" },
+        .{ "let clickCbk = function() { click_count++ }", "undefined" },
+        .{ "document.getElementById('content').addEventListener('click', clickCbk);", "undefined" },
+        .{ "document.getElementById('content').click()", "undefined" },
+        .{ "click_count", "1" },
+    }, .{});
 }

src/browser/html/history.zig

@@ -18,16 +18,8 @@
 
 const std = @import("std");
 
-const builtin = @import("builtin");
-const jsruntime = @import("jsruntime");
-
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
 // https://html.spec.whatwg.org/multipage/nav-history-apis.html#the-history-interface
 pub const History = struct {
-    pub const mem_guarantied = true;
-
     const ScrollRestorationMode = enum {
         auto,
         manual,
@@ -98,31 +90,31 @@ pub const History = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var history = [_]Case{
-        .{ .src = "history.scrollRestoration", .ex = "auto" },
-        .{ .src = "history.scrollRestoration = 'manual'", .ex = "manual" },
-        .{ .src = "history.scrollRestoration = 'foo'", .ex = "foo" },
-        .{ .src = "history.scrollRestoration", .ex = "manual" },
-        .{ .src = "history.scrollRestoration = 'auto'", .ex = "auto" },
-        .{ .src = "history.scrollRestoration", .ex = "auto" },
+const testing = @import("../../testing.zig");
+test "Browser.HTML.History" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "history.state", .ex = "null" },
+    try runner.testCases(&.{
+        .{ "history.scrollRestoration", "auto" },
+        .{ "history.scrollRestoration = 'manual'", "manual" },
+        .{ "history.scrollRestoration = 'foo'", "foo" },
+        .{ "history.scrollRestoration", "manual" },
+        .{ "history.scrollRestoration = 'auto'", "auto" },
+        .{ "history.scrollRestoration", "auto" },
 
-        .{ .src = "history.pushState({}, null, '')", .ex = "undefined" },
+        .{ "history.state", "null" },
 
-        .{ .src = "history.replaceState({}, null, '')", .ex = "undefined" },
+        .{ "history.pushState({}, null, '')", "undefined" },
 
-        .{ .src = "history.go()", .ex = "undefined" },
-        .{ .src = "history.go(1)", .ex = "undefined" },
-        .{ .src = "history.go(-1)", .ex = "undefined" },
+        .{ "history.replaceState({}, null, '')", "undefined" },
 
-        .{ .src = "history.forward()", .ex = "undefined" },
+        .{ "history.go()", "undefined" },
+        .{ "history.go(1)", "undefined" },
+        .{ "history.go(-1)", "undefined" },
 
-        .{ .src = "history.back()", .ex = "undefined" },
-    };
-    try checkCases(js_env, &history);
+        .{ "history.forward()", "undefined" },
+
+        .{ "history.back()", "undefined" },
+    }, .{});
 }

src/browser/html/html.zig

@@ -16,22 +16,26 @@
 // 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 generate = @import("../generate.zig");
-
 const HTMLDocument = @import("document.zig").HTMLDocument;
 const HTMLElem = @import("elements.zig");
+const SVGElem = @import("svg_elements.zig");
 const Window = @import("window.zig").Window;
 const Navigator = @import("navigator.zig").Navigator;
 const History = @import("history.zig").History;
 const Location = @import("location.zig").Location;
+const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
+const Performance = @import("performance.zig").Performance;
 
 pub const Interfaces = .{
     HTMLDocument,
     HTMLElem.HTMLElement,
     HTMLElem.HTMLMediaElement,
     HTMLElem.Interfaces,
+    SVGElem.SVGElement,
     Window,
     Navigator,
     History,
     Location,
+    MediaQueryList,
+    Performance,
 };

src/browser/html/location.zig

@@ -0,0 +1,107 @@
+// Copyright (C) 2023-2024  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 SessionState = @import("../env.zig").SessionState;
+
+const URL = @import("../url/url.zig").URL;
+
+// https://html.spec.whatwg.org/multipage/nav-history-apis.html#the-location-interface
+pub const Location = struct {
+    url: ?URL = null,
+
+    pub fn get_href(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_href(state);
+        return "";
+    }
+
+    pub fn get_protocol(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_protocol(state);
+        return "";
+    }
+
+    pub fn get_host(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_host(state);
+        return "";
+    }
+
+    pub fn get_hostname(self: *Location) []const u8 {
+        if (self.url) |*u| return u.get_hostname();
+        return "";
+    }
+
+    pub fn get_port(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_port(state);
+        return "";
+    }
+
+    pub fn get_pathname(self: *Location) []const u8 {
+        if (self.url) |*u| return u.get_pathname();
+        return "";
+    }
+
+    pub fn get_search(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_search(state);
+        return "";
+    }
+
+    pub fn get_hash(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_hash(state);
+        return "";
+    }
+
+    pub fn get_origin(self: *Location, state: *SessionState) ![]const u8 {
+        if (self.url) |*u| return u.get_origin(state);
+        return "";
+    }
+
+    // TODO
+    pub fn _assign(_: *Location, url: []const u8) !void {
+        _ = url;
+    }
+
+    // TODO
+    pub fn _replace(_: *Location, url: []const u8) !void {
+        _ = url;
+    }
+
+    // TODO
+    pub fn _reload(_: *Location) !void {}
+
+    pub fn _toString(self: *Location, state: *SessionState) ![]const u8 {
+        return try self.get_href(state);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Location" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "location.href", "https://lightpanda.io/opensource-browser/" },
+        .{ "document.location.href", "https://lightpanda.io/opensource-browser/" },
+
+        .{ "location.host", "lightpanda.io" },
+        .{ "location.hostname", "lightpanda.io" },
+        .{ "location.origin", "https://lightpanda.io" },
+        .{ "location.pathname", "/opensource-browser/" },
+        .{ "location.hash", "" },
+        .{ "location.port", "" },
+        .{ "location.search", "" },
+    }, .{});
+}

src/browser/html/media_query_list.zig

@@ -0,0 +1,45 @@
+// 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 parser = @import("../netsurf.zig");
+const Callback = @import("../env.zig").Callback;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+// https://drafts.csswg.org/cssom-view/#the-mediaquerylist-interface
+pub const MediaQueryList = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    // This is not safe as it relies on a structure layout that isn't guaranteed
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    matches: bool,
+    media: []const u8,
+
+    pub fn get_matches(self: *const MediaQueryList) bool {
+        return self.matches;
+    }
+
+    pub fn get_media(self: *const MediaQueryList) []const u8 {
+        return self.media;
+    }
+
+    pub fn _addListener(_: *const MediaQueryList, _: Callback) void {}
+
+    pub fn _removeListener(_: *const MediaQueryList, _: Callback) void {}
+};

src/browser/html/navigator.zig

@@ -19,15 +19,9 @@
 const std = @import("std");
 
 const builtin = @import("builtin");
-const jsruntime = @import("jsruntime");
-
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
 
 // https://html.spec.whatwg.org/multipage/system-state.html#navigator
 pub const Navigator = struct {
-    pub const mem_guarantied = true;
-
     agent: []const u8 = "Lightpanda/1.0",
     version: []const u8 = "1.0",
     vendor: []const u8 = "",
@@ -89,14 +83,14 @@ pub const Navigator = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var navigator = [_]Case{
-        .{ .src = "navigator.userAgent", .ex = "Lightpanda/1.0" },
-        .{ .src = "navigator.appVersion", .ex = "1.0" },
-        .{ .src = "navigator.language", .ex = "en-US" },
-    };
-    try checkCases(js_env, &navigator);
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Navigator" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "navigator.userAgent", "Lightpanda/1.0" },
+        .{ "navigator.appVersion", "1.0" },
+        .{ "navigator.language", "en-US" },
+    }, .{});
 }

src/browser/html/performance.zig

@@ -0,0 +1,87 @@
+// 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 parser = @import("../netsurf.zig");
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Performance
+pub const Performance = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    time_origin: std.time.Timer,
+    // if (Window.crossOriginIsolated) -> Resolution in isolated contexts:       5 microseconds
+    // else                            -> Resolution in non-isolated contexts: 100 microseconds
+    const ms_resolution = 100;
+
+    fn limitedResolutionMs(nanoseconds: u64) f64 {
+        const elapsed_at_resolution = ((nanoseconds / std.time.ns_per_us) + ms_resolution / 2) / ms_resolution * ms_resolution;
+        const elapsed = @as(f64, @floatFromInt(elapsed_at_resolution));
+        return elapsed / @as(f64, std.time.us_per_ms);
+    }
+
+    pub fn get_timeOrigin(self: *const Performance) f64 {
+        const is_posix = switch (@import("builtin").os.tag) { // From std.time.zig L125
+            .windows, .uefi, .wasi => false,
+            else => true,
+        };
+        const zero = std.time.Instant{ .timestamp = if (!is_posix) 0 else .{ .sec = 0, .nsec = 0 } };
+        const started = self.time_origin.started.since(zero);
+        return limitedResolutionMs(started);
+    }
+
+    pub fn _now(self: *Performance) f64 {
+        return limitedResolutionMs(self.time_origin.read());
+    }
+};
+
+const testing = @import("./../../testing.zig");
+
+test "Performance: get_timeOrigin" {
+    var perf = Performance{ .time_origin = try std.time.Timer.start() };
+    const time_origin = perf.get_timeOrigin();
+    try testing.expect(time_origin >= 0);
+
+    // Check resolution
+    try testing.expectDelta(@rem(time_origin * std.time.us_per_ms, 100.0), 0.0, 0.1);
+}
+
+test "Performance: now" {
+    var perf = Performance{ .time_origin = try std.time.Timer.start() };
+
+    // Monotonically increasing
+    var now = perf._now();
+    while (now <= 0) { // Loop for now to not be 0
+        try testing.expectEqual(now, 0);
+        now = perf._now();
+    }
+    // Check resolution
+    try testing.expectDelta(@rem(now * std.time.us_per_ms, 100.0), 0.0, 0.1);
+
+    var after = perf._now();
+    while (after <= now) { // Loop untill after > now
+        try testing.expectEqual(after, now);
+        after = perf._now();
+    }
+    // Check resolution
+    try testing.expectDelta(@rem(after * std.time.us_per_ms, 100.0), 0.0, 0.1);
+}

src/browser/html/svg_elements.zig

@@ -0,0 +1,41 @@
+// Copyright (C) 2023-2024  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 Element = @import("../dom/element.zig").Element;
+
+// Support for SVGElements is very limited, this is a dummy implementation.
+// This is here no to be able to support `element instanceof SVGElement;` in JavaScript.
+// https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
+pub const SVGElement = struct {
+    // Currently the prototype chain is not implemented (will not be returned by toInterface())
+    // For that we need parser.SvgElement and the derived types with tags in the v-table.
+    pub const prototype = *Element;
+    // While this is a Node, could consider not exposing the subtype untill we have
+    // a Self type to cast to.
+    pub const subtype = .node;
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.SVGElement" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "'AString' instanceof SVGElement", "false" },
+    }, .{});
+}

src/browser/html/window.zig

@@ -0,0 +1,315 @@
+// Copyright (C) 2023-2024  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 parser = @import("../netsurf.zig");
+const Callback = @import("../env.zig").Callback;
+const SessionState = @import("../env.zig").SessionState;
+const Loop = @import("../../runtime/loop.zig").Loop;
+
+const Navigator = @import("navigator.zig").Navigator;
+const History = @import("history.zig").History;
+const Location = @import("location.zig").Location;
+const Crypto = @import("../crypto/crypto.zig").Crypto;
+const Console = @import("../console/console.zig").Console;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
+const Performance = @import("performance.zig").Performance;
+
+const storage = @import("../storage/storage.zig");
+
+const log = std.log.scoped(.window);
+
+// https://dom.spec.whatwg.org/#interface-window-extensions
+// https://html.spec.whatwg.org/multipage/nav-history-apis.html#window
+pub const Window = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    document: ?*parser.DocumentHTML = null,
+    target: []const u8 = "",
+    history: History = .{},
+    location: Location = .{},
+    storage_shelf: ?*storage.Shelf = null,
+
+    // counter for having unique timer ids
+    timer_id: u31 = 0,
+    timers: std.AutoHashMapUnmanaged(u32, *TimerCallback) = .{},
+
+    crypto: Crypto = .{},
+    console: Console = .{},
+    navigator: Navigator = .{},
+    performance: Performance,
+
+    pub fn create(target: ?[]const u8, navigator: ?Navigator) !Window {
+        return .{
+            .target = target orelse "",
+            .navigator = navigator orelse .{},
+            .performance = .{ .time_origin = try std.time.Timer.start() },
+        };
+    }
+
+    pub fn replaceLocation(self: *Window, loc: Location) !void {
+        self.location = loc;
+        if (self.document) |doc| {
+            try parser.documentHTMLSetLocation(Location, doc, &self.location);
+        }
+    }
+
+    pub fn replaceDocument(self: *Window, doc: *parser.DocumentHTML) !void {
+        self.performance.time_origin.reset(); // When to reset see: https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin
+        self.document = doc;
+        try parser.documentHTMLSetLocation(Location, doc, &self.location);
+    }
+
+    pub fn setStorageShelf(self: *Window, shelf: *storage.Shelf) void {
+        self.storage_shelf = shelf;
+    }
+
+    pub fn get_window(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_navigator(self: *Window) *Navigator {
+        return &self.navigator;
+    }
+
+    pub fn get_location(self: *Window) *Location {
+        return &self.location;
+    }
+
+    pub fn get_console(self: *Window) *Console {
+        return &self.console;
+    }
+
+    pub fn get_crypto(self: *Window) *Crypto {
+        return &self.crypto;
+    }
+
+    pub fn get_self(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_parent(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_document(self: *Window) ?*parser.DocumentHTML {
+        return self.document;
+    }
+
+    pub fn get_history(self: *Window) *History {
+        return &self.history;
+    }
+
+    //  The interior height of the window in pixels, including the height of the horizontal scroll bar, if present.
+    pub fn get_innerHeight(_: *Window, state: *SessionState) u32 {
+        // We do not have scrollbars or padding so this is the same as Element.clientHeight
+        return state.renderer.height();
+    }
+
+    // The interior width of the window in pixels. That includes the width of the vertical scroll bar, if one is present.
+    pub fn get_innerWidth(_: *Window, state: *SessionState) u32 {
+        // We do not have scrollbars or padding so this is the same as Element.clientWidth
+        return state.renderer.width();
+    }
+
+    pub fn get_name(self: *Window) []const u8 {
+        return self.target;
+    }
+
+    pub fn get_localStorage(self: *Window) !*storage.Bottle {
+        if (self.storage_shelf == null) return parser.DOMError.NotSupported;
+        return &self.storage_shelf.?.bucket.local;
+    }
+
+    pub fn get_sessionStorage(self: *Window) !*storage.Bottle {
+        if (self.storage_shelf == null) return parser.DOMError.NotSupported;
+        return &self.storage_shelf.?.bucket.session;
+    }
+
+    pub fn get_performance(self: *Window) *Performance {
+        return &self.performance;
+    }
+
+    // Tells the browser you wish to perform an animation. It requests the browser to call a user-supplied callback function before the next repaint.
+    // fn callback(timestamp: f64)
+    // Returns the request ID, that uniquely identifies the entry in the callback list.
+    pub fn _requestAnimationFrame(
+        self: *Window,
+        callback: Callback,
+    ) !u32 {
+        // We immediately execute the callback, but this may not be correct TBD.
+        // Since: When multiple callbacks queued by requestAnimationFrame() begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
+        var result: Callback.Result = undefined;
+        callback.tryCall(.{self.performance._now()}, &result) catch {
+            log.err("Window.requestAnimationFrame(): {s}", .{result.exception});
+            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        };
+        return 99; // not unique, but user cannot make assumptions about it. cancelAnimationFrame will be too late anyway.
+    }
+
+    // Cancels an animation frame request previously scheduled through requestAnimationFrame().
+    // This is a no-op since _requestAnimationFrame immediately executes the callback.
+    pub fn _cancelAnimationFrame(_: *Window, request_id: u32) void {
+        _ = request_id;
+    }
+
+    // TODO handle callback arguments.
+    pub fn _setTimeout(self: *Window, cbk: Callback, delay: ?u32, state: *SessionState) !u32 {
+        return self.createTimeout(cbk, delay, state, false);
+    }
+
+    // TODO handle callback arguments.
+    pub fn _setInterval(self: *Window, cbk: Callback, delay: ?u32, state: *SessionState) !u32 {
+        return self.createTimeout(cbk, delay, state, true);
+    }
+
+    pub fn _clearTimeout(self: *Window, id: u32, state: *SessionState) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        try state.loop.cancel(kv.value.loop_id);
+    }
+
+    pub fn _clearInterval(self: *Window, id: u32, state: *SessionState) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        try state.loop.cancel(kv.value.loop_id);
+    }
+
+    pub fn _matchMedia(_: *const Window, media: []const u8, state: *SessionState) !MediaQueryList {
+        return .{
+            .matches = false, // TODO?
+            .media = try state.arena.dupe(u8, media),
+        };
+    }
+
+    fn createTimeout(self: *Window, cbk: Callback, delay_: ?u32, state: *SessionState, comptime repeat: bool) !u32 {
+        if (self.timers.count() > 512) {
+            return error.TooManyTimeout;
+        }
+        const timer_id = self.timer_id +% 1;
+        self.timer_id = timer_id;
+
+        const arena = state.arena;
+
+        const gop = try self.timers.getOrPut(arena, timer_id);
+        if (gop.found_existing) {
+            // this can only happen if we've created 2^31 timeouts.
+            return error.TooManyTimeout;
+        }
+        errdefer _ = self.timers.remove(timer_id);
+
+        const delay: u63 = @as(u63, (delay_ orelse 0)) * std.time.ns_per_ms;
+        const callback = try arena.create(TimerCallback);
+
+        callback.* = .{
+            .cbk = cbk,
+            .loop_id = 0, // we're going to set this to a real value shortly
+            .window = self,
+            .timer_id = timer_id,
+            .node = .{ .func = TimerCallback.run },
+            .repeat = if (repeat) delay else null,
+        };
+        callback.loop_id = try state.loop.timeout(delay, &callback.node);
+
+        gop.value_ptr.* = callback;
+        return timer_id;
+    }
+};
+
+const TimerCallback = struct {
+    // the internal loop id, need it when cancelling
+    loop_id: usize,
+
+    // the id of our timer (windows.timers key)
+    timer_id: u31,
+
+    // The JavaScript callback to execute
+    cbk: Callback,
+
+    // This is the internal data that the event loop tracks. We'll get this
+    // back in run and, from it, can get our TimerCallback instance
+    node: Loop.CallbackNode = undefined,
+
+    // if the event should be repeated
+    repeat: ?u63 = null,
+
+    window: *Window,
+
+    fn run(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+        const self: *TimerCallback = @fieldParentPtr("node", node);
+
+        var result: Callback.Result = undefined;
+        self.cbk.tryCall(.{}, &result) catch {
+            log.err("timeout callback error: {s}", .{result.exception});
+            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        };
+
+        if (self.repeat) |r| {
+            // setInterval
+            repeat_delay.* = r;
+            return;
+        }
+
+        // setTimeout
+        _ = self.window.timers.remove(self.timer_id);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Window" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    // requestAnimationFrame should be able to wait by recursively calling itself
+    // Note however that we in this test do not wait as the request is just send to the browser
+    try runner.testCases(&.{
+        .{
+            \\ let start;
+            \\ function step(timestamp) {
+            \\    if (start === undefined) {
+            \\      start = timestamp;
+            \\    }
+            \\    const elapsed = timestamp - start;
+            \\    if (elapsed < 2000) {
+            \\      requestAnimationFrame(step);
+            \\    }
+            \\ }
+            ,
+            null,
+        },
+        .{ "requestAnimationFrame(step);", null }, // returned id is checked in the next test
+    }, .{});
+
+    // cancelAnimationFrame should be able to cancel a request with the given id
+    try runner.testCases(&.{
+        .{ "let request_id = requestAnimationFrame(timestamp => {});", null },
+        .{ "cancelAnimationFrame(request_id);", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "1" }, // Width is 1 even if there are no elements
+        .{ "document.createElement('div').getClientRects()", null },
+        .{ "document.createElement('div').getClientRects()", null },
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "2" },
+    }, .{});
+}

src/browser/iterator/iterator.zig

@@ -0,0 +1,226 @@
+pub const Interfaces = .{
+    U32Iterator,
+};
+
+pub const U32Iterator = struct {
+    length: u32,
+    index: u32 = 0,
+
+    pub const Return = struct {
+        value: u32,
+        done: bool,
+    };
+
+    pub fn _next(self: *U32Iterator) Return {
+        const i = self.index;
+        if (i >= self.length) {
+            return .{
+                .value = 0,
+                .done = true,
+            };
+        }
+
+        self.index = i + 1;
+        return .{
+            .value = i,
+            .done = false,
+        };
+    }
+
+    // Iterators should be iterable. There's a [JS] example on MDN that
+    // suggests this is the correct approach:
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol
+    pub fn _symbol_iterator(self: *U32Iterator) *U32Iterator {
+        return self;
+    }
+};
+
+// A wrapper around an iterator that emits an Iterable result
+// An iterable has a next() which emits a {done: bool, value: T} result
+pub fn Iterable(comptime T: type, comptime JsName: []const u8) type {
+    // The inner iterator's return type.
+    // Maybe an error union.
+    // Definitely an optional
+    const RawValue = @typeInfo(@TypeOf(T._next)).@"fn".return_type.?;
+    const CanError = @typeInfo(RawValue) == .error_union;
+
+    const Value = blk: {
+        // Unwrap the RawValue
+        var V = RawValue;
+        if (CanError) {
+            V = @typeInfo(V).error_union.payload;
+        }
+        break :blk @typeInfo(V).optional.child;
+    };
+
+    const Result = struct {
+        done: bool,
+        // todo, technically, we should return undefined when done = true
+        // or even omit the value;
+        value: ?Value,
+    };
+
+    const ReturnType = if (CanError) T.Error!Result else Result;
+
+    return struct {
+        // the inner value iterator
+        inner: T,
+
+        // Generics don't generate clean names. Can't just take the resulting
+        // type name and use that as a the JS class name. So we always ask for
+        // an explicit JS class name
+        pub const js_name = JsName;
+
+        const Self = @This();
+
+        pub fn init(inner: T) Self {
+            return .{ .inner = inner };
+        }
+
+        pub fn _next(self: *Self) ReturnType {
+            const value = if (comptime CanError) try self.inner._next() else self.inner._next();
+            return .{ .done = value == null, .value = value };
+        }
+
+        pub fn _symbol_iterator(self: *Self) *Self {
+            return self;
+        }
+    };
+}
+
+// A wrapper around an iterator that emits integer/index keyed entries.
+pub fn NumericEntries(comptime T: type, comptime JsName: []const u8) type {
+    // The inner iterator's return type.
+    // Maybe an error union.
+    // Definitely an optional
+    const RawValue = @typeInfo(@TypeOf(T._next)).@"fn".return_type.?;
+    const CanError = @typeInfo(RawValue) == .error_union;
+
+    const Value = blk: {
+        // Unwrap the RawValue
+        var V = RawValue;
+        if (CanError) {
+            V = @typeInfo(V).error_union.payload;
+        }
+        break :blk @typeInfo(V).optional.child;
+    };
+
+    const ReturnType = if (CanError) T.Error!?struct { u32, Value } else ?struct { u32, Value };
+
+    // Avoid ambiguity. We want to expose a NumericEntries(T).Iterable, so we
+    // need a declartion inside here for an "Iterable", but that will conflict
+    // with the above Iterable generic function we have.
+    const BaseIterable = Iterable;
+
+    return struct {
+        // the inner value iterator
+        inner: T,
+        index: u32,
+
+        const Self = @This();
+
+        // Generics don't generate clean names. Can't just take the resulting
+        // type name and use that as a the JS class name. So we always ask for
+        // an explicit JS class name
+        pub const js_name = JsName;
+
+        // re-exposed for when/if we compose this type into an Iterable
+        pub const Error = T.Error;
+
+        // This iterator as an iterable
+        pub const Iterable = BaseIterable(Self, JsName ++ "Iterable");
+
+        pub fn init(inner: T) Self {
+            return .{ .inner = inner, .index = 0 };
+        }
+
+        pub fn _next(self: *Self) ReturnType {
+            const value_ = if (comptime CanError) try self.inner._next() else self.inner._next();
+            const value = value_ orelse return null;
+
+            const index = self.index;
+            self.index = index + 1;
+            return .{ index, value };
+        }
+
+        // make the iterator, iterable
+        pub fn _symbol_iterator(self: *Self) Self.Iterable {
+            return Self.Iterable.init(self.*);
+        }
+    };
+}
+
+const testing = @import("../../testing.zig");
+test "U32Iterator" {
+    {
+        var it = U32Iterator{ .length = 0 };
+        try testing.expectEqual(.{ .value = 0, .done = true }, it._next());
+        try testing.expectEqual(.{ .value = 0, .done = true }, it._next());
+    }
+
+    {
+        var it = U32Iterator{ .length = 3 };
+        try testing.expectEqual(.{ .value = 0, .done = false }, it._next());
+        try testing.expectEqual(.{ .value = 1, .done = false }, it._next());
+        try testing.expectEqual(.{ .value = 2, .done = false }, it._next());
+        try testing.expectEqual(.{ .value = 0, .done = true }, it._next());
+        try testing.expectEqual(.{ .value = 0, .done = true }, it._next());
+    }
+}
+
+test "NumericEntries" {
+    const it = DummyIterator{};
+    var entries = NumericEntries(DummyIterator, "DummyIterator").init(it);
+
+    const v1 = entries._next().?;
+    try testing.expectEqual(0, v1.@"0");
+    try testing.expectEqual("it's", v1.@"1");
+
+    const v2 = entries._next().?;
+    try testing.expectEqual(1, v2.@"0");
+    try testing.expectEqual("over", v2.@"1");
+
+    const v3 = entries._next().?;
+    try testing.expectEqual(2, v3.@"0");
+    try testing.expectEqual("9000!!", v3.@"1");
+
+    try testing.expectEqual(null, entries._next());
+    try testing.expectEqual(null, entries._next());
+    try testing.expectEqual(null, entries._next());
+}
+
+test "Iterable" {
+    const it = DummyIterator{};
+    var entries = Iterable(DummyIterator, "DummyIterator").init(it);
+
+    const v1 = entries._next();
+    try testing.expectEqual(false, v1.done);
+    try testing.expectEqual("it's", v1.value.?);
+
+    const v2 = entries._next();
+    try testing.expectEqual(false, v2.done);
+    try testing.expectEqual("over", v2.value.?);
+
+    const v3 = entries._next();
+    try testing.expectEqual(false, v3.done);
+    try testing.expectEqual("9000!!", v3.value.?);
+
+    try testing.expectEqual(true, entries._next().done);
+    try testing.expectEqual(true, entries._next().done);
+    try testing.expectEqual(true, entries._next().done);
+}
+
+const DummyIterator = struct {
+    index: u32 = 0,
+
+    pub fn _next(self: *DummyIterator) ?[]const u8 {
+        const index = self.index;
+        self.index = index + 1;
+        return switch (index) {
+            0 => "it's",
+            1 => "over",
+            2 => "9000!!",
+            else => null,
+        };
+    }
+};

src/browser/loader.zig

@@ -1,97 +0,0 @@
-// Copyright (C) 2023-2024  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 Client = @import("../http/Client.zig");
-
-const user_agent = @import("browser.zig").user_agent;
-
-pub const Loader = struct {
-    client: Client,
-    // use 64KB for headers buffer size.
-    server_header_buffer: [1024 * 64]u8 = undefined,
-
-    pub const Response = struct {
-        alloc: std.mem.Allocator,
-        req: *Client.Request,
-
-        pub fn deinit(self: *Response) void {
-            self.req.deinit();
-            self.alloc.destroy(self.req);
-        }
-    };
-
-    pub fn init(alloc: std.mem.Allocator) Loader {
-        return Loader{
-            .client = Client{
-                .allocator = alloc,
-            },
-        };
-    }
-
-    pub fn deinit(self: *Loader) void {
-        self.client.deinit();
-    }
-
-    // see
-    // https://ziglang.org/documentation/master/std/#A;std:http.Client.fetch
-    // for reference.
-    // The caller is responsible for calling `deinit()` on the `Response`.
-    pub fn get(self: *Loader, alloc: std.mem.Allocator, uri: std.Uri) !Response {
-        var resp = Response{
-            .alloc = alloc,
-            .req = try alloc.create(Client.Request),
-        };
-        errdefer alloc.destroy(resp.req);
-
-        resp.req.* = try self.client.open(.GET, uri, .{
-            .headers = .{
-                .user_agent = .{ .override = user_agent },
-            },
-            .extra_headers = &.{
-                .{ .name = "Accept", .value = "*/*" },
-                .{ .name = "Accept-Language", .value = "en-US,en;q=0.5" },
-            },
-            .server_header_buffer = &self.server_header_buffer,
-        });
-        errdefer resp.req.deinit();
-
-        try resp.req.send();
-        try resp.req.finish();
-        try resp.req.wait();
-
-        return resp;
-    }
-};
-
-test "loader: get" {
-    const alloc = std.testing.allocator;
-    var loader = Loader.init(alloc);
-    defer loader.deinit();
-
-    const uri = try std.Uri.parse("http://localhost:9582/loader");
-    var result = try loader.get(alloc, uri);
-    defer result.deinit();
-
-    try std.testing.expectEqual(.ok, result.req.response.status);
-
-    var res: [128]u8 = undefined;
-    const size = try result.req.readAll(&res);
-    try std.testing.expectEqual(6, size);
-    try std.testing.expectEqualStrings("Hello!", res[0..6]);
-}

src/browser/mimalloc.zig

@@ -21,7 +21,6 @@
 // We replace the libdom default usage of allocations with mimalloc heap
 // allocation to be able to free all memory used at once, like an arena usage.
 
-const std = @import("std");
 const c = @cImport({
     @cInclude("mimalloc.h");
 });

src/browser/mime.zig

@@ -23,38 +23,47 @@ pub const Mime = struct {
     content_type: ContentType,
     params: []const u8 = "",
     charset: ?[]const u8 = null,
-    arena: std.heap.ArenaAllocator,
+
+    pub const unknown = Mime{
+        .params = "",
+        .charset = "",
+        .content_type = .{ .unknown = {} },
+    };
 
     pub const ContentTypeEnum = enum {
         text_xml,
         text_html,
+        text_javascript,
         text_plain,
+        unknown,
         other,
     };
 
     pub const ContentType = union(ContentTypeEnum) {
         text_xml: void,
         text_html: void,
+        text_javascript: void,
         text_plain: void,
+        unknown: void,
         other: struct { type: []const u8, sub_type: []const u8 },
     };
 
-    pub fn parse(allocator: Allocator, input: []const u8) !Mime {
+    pub fn parse(arena: Allocator, input: []u8) !Mime {
         if (input.len > 255) {
             return error.TooBig;
         }
 
-        var arena = std.heap.ArenaAllocator.init(allocator);
-        errdefer arena.deinit();
+        // Zig's trim API is broken. The return type is always `[]const u8`,
+        // even if the input type is `[]u8`. @constCast is safe here.
+        var normalized = @constCast(std.mem.trim(u8, input, &std.ascii.whitespace));
+        _ = std.ascii.lowerString(normalized, normalized);
 
-        var trimmed = trim(input);
-
-        const content_type, const type_len = try parseContentType(trimmed);
-        if (type_len >= trimmed.len) {
-            return .{ .arena = arena, .content_type = content_type };
+        const content_type, const type_len = try parseContentType(normalized);
+        if (type_len >= normalized.len) {
+            return .{ .content_type = content_type };
         }
 
-        const params = trimLeft(trimmed[type_len..]);
+        const params = trimLeft(normalized[type_len..]);
 
         var charset: ?[]const u8 = null;
 
@@ -68,86 +77,135 @@ pub const Mime = struct {
                 return error.Invalid;
             }
 
-            switch (name.len) {
-                7 => if (isCaseEqual("charset", name)) {
-                    charset = try parseValue(arena.allocator(), value);
-                },
-                else => {},
+            const attribute_name = std.meta.stringToEnum(enum {
+                charset,
+            }, name) orelse continue;
+
+            switch (attribute_name) {
+                .charset => charset = try parseAttributeValue(arena, value),
             }
         }
 
         return .{
-            .arena = arena,
             .params = params,
             .charset = charset,
             .content_type = content_type,
         };
     }
 
-    pub fn deinit(self: *Mime) void {
-        self.arena.deinit();
+    pub fn sniff(body: []const u8) ?Mime {
+        // 0x0C is form feed
+        const content = std.mem.trimLeft(u8, body, &.{ ' ', '\t', '\n', '\r', 0x0C });
+        if (content.len == 0) {
+            return null;
+        }
+
+        if (content[0] != '<') {
+            if (std.mem.startsWith(u8, content, &.{ 0xEF, 0xBB, 0xBF })) {
+                // UTF-8 BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            if (std.mem.startsWith(u8, content, &.{ 0xFE, 0xFF })) {
+                // UTF-16 big-endian BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            if (std.mem.startsWith(u8, content, &.{ 0xFF, 0xFE })) {
+                // UTF-16 little-endian BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            return null;
+        }
+
+        // The longest prefix we have is "<!DOCTYPE HTML ", 15 bytes. If we're
+        // here, we already know content[0] == '<', so we can skip that. So 14
+        // bytes.
+
+        // +1 because we don't need the leading '<'
+        var buf: [14]u8 = undefined;
+
+        const stripped = content[1..];
+        const prefix_len = @min(stripped.len, buf.len);
+        const prefix = std.ascii.lowerString(&buf, stripped[0..prefix_len]);
+
+        // we already know it starts with a <
+        const known_prefixes = [_]struct { []const u8, ContentType }{
+            .{ "!doctype html", .{ .text_html = {} } },
+            .{ "html", .{ .text_html = {} } },
+            .{ "script", .{ .text_html = {} } },
+            .{ "iframe", .{ .text_html = {} } },
+            .{ "h1", .{ .text_html = {} } },
+            .{ "div", .{ .text_html = {} } },
+            .{ "font", .{ .text_html = {} } },
+            .{ "table", .{ .text_html = {} } },
+            .{ "a", .{ .text_html = {} } },
+            .{ "style", .{ .text_html = {} } },
+            .{ "title", .{ .text_html = {} } },
+            .{ "b", .{ .text_html = {} } },
+            .{ "body", .{ .text_html = {} } },
+            .{ "br", .{ .text_html = {} } },
+            .{ "p", .{ .text_html = {} } },
+            .{ "!--", .{ .text_html = {} } },
+            .{ "xml", .{ .text_xml = {} } },
+        };
+        inline for (known_prefixes) |kp| {
+            const known_prefix = kp.@"0";
+            if (std.mem.startsWith(u8, prefix, known_prefix) and prefix.len > known_prefix.len) {
+                const next = prefix[known_prefix.len];
+                // a "tag-terminating-byte"
+                if (next == ' ' or next == '>') {
+                    return .{ .content_type = kp.@"1" };
+                }
+            }
+        }
+
+        return null;
     }
 
     pub fn isHTML(self: *const Mime) bool {
         return self.content_type == .text_html;
     }
 
+    // we expect value to be lowercase
     fn parseContentType(value: []const u8) !struct { ContentType, usize } {
-        const separator = std.mem.indexOfScalarPos(u8, value, 0, '/') orelse {
-            return error.Invalid;
-        };
-        const end = std.mem.indexOfScalarPos(u8, value, separator, ';') orelse blk: {
-            break :blk value.len;
-        };
+        const end = std.mem.indexOfScalarPos(u8, value, 0, ';') orelse value.len;
+        const type_name = trimRight(value[0..end]);
+        const attribute_start = end + 1;
+
+        if (std.meta.stringToEnum(enum {
+            @"text/xml",
+            @"text/html",
+
+            @"text/javascript",
+            @"application/javascript",
+            @"application/x-javascript",
+
+            @"text/plain",
+        }, type_name)) |known_type| {
+            const ct: ContentType = switch (known_type) {
+                .@"text/xml" => .{ .text_xml = {} },
+                .@"text/html" => .{ .text_html = {} },
+                .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
+                .@"text/plain" => .{ .text_plain = {} },
+            };
+            return .{ ct, attribute_start };
+        }
+
+        const separator = std.mem.indexOfScalarPos(u8, type_name, 0, '/') orelse return error.Invalid;
 
         const main_type = value[0..separator];
         const sub_type = trimRight(value[separator + 1 .. end]);
 
-        if (parseCommonContentType(main_type, sub_type)) |content_type| {
-            return .{ content_type, end + 1 };
-        }
-
-        if (main_type.len == 0) {
+        if (main_type.len == 0 or validType(main_type) == false) {
             return error.Invalid;
         }
-        if (validType(main_type) == false) {
+        if (sub_type.len == 0 or validType(sub_type) == false) {
             return error.Invalid;
         }
 
-        if (sub_type.len == 0) {
-            return error.Invalid;
-        }
-        if (validType(sub_type) == false) {
-            return error.Invalid;
-        }
-
-        const content_type = ContentType{ .other = .{
+        return .{ .{ .other = .{
             .type = main_type,
             .sub_type = sub_type,
-        } };
-
-        return .{ content_type, end + 1 };
-    }
-
-    fn parseCommonContentType(main_type: []const u8, sub_type: []const u8) ?ContentType {
-        switch (main_type.len) {
-            4 => if (isCaseEqual("text", main_type)) {
-                switch (sub_type.len) {
-                    3 => if (isCaseEqual("xml", sub_type)) {
-                        return .{ .text_xml = {} };
-                    },
-                    4 => if (isCaseEqual("html", sub_type)) {
-                        return .{ .text_html = {} };
-                    },
-                    5 => if (isCaseEqual("plain", sub_type)) {
-                        return .{ .text_plain = {} };
-                    },
-                    else => {},
-                }
-            },
-            else => {},
-        }
-        return null;
+        } }, attribute_start };
     }
 
     const T_SPECIAL = blk: {
@@ -158,7 +216,7 @@ pub const Mime = struct {
         break :blk v;
     };
 
-    fn parseValue(allocator: Allocator, value: []const u8) ![]const u8 {
+    fn parseAttributeValue(arena: Allocator, value: []const u8) ![]const u8 {
         if (value[0] != '"') {
             return value;
         }
@@ -191,7 +249,7 @@ pub const Mime = struct {
         }
 
         value_pos = 1;
-        const owned = try allocator.alloc(u8, unescaped_len);
+        const owned = try arena.alloc(u8, unescaped_len);
         for (0..unescaped_len) |i| {
             switch (value[value_pos]) {
                 '"' => break,
@@ -228,10 +286,6 @@ pub const Mime = struct {
         return true;
     }
 
-    fn trim(s: []const u8) []const u8 {
-        return std.mem.trim(u8, s, &std.ascii.whitespace);
-    }
-
     fn trimLeft(s: []const u8) []const u8 {
         return std.mem.trimLeft(u8, s, &std.ascii.whitespace);
     }
@@ -239,28 +293,12 @@ pub const Mime = struct {
     fn trimRight(s: []const u8) []const u8 {
         return std.mem.trimRight(u8, s, &std.ascii.whitespace);
     }
-
-    fn isCaseEqual(comptime target: anytype, value: []const u8) bool {
-        // - 8 beause we don't care about the sentinel
-        const bit_len = @bitSizeOf(@TypeOf(target.*)) - 8;
-        const byte_len = bit_len / 8;
-
-        const T = @Type(.{ .Int = .{
-            .bits = bit_len,
-            .signedness = .unsigned,
-        } });
-
-        const bit_target: T = @bitCast(@as(*const [byte_len]u8, target).*);
-
-        if (@as(T, @bitCast(value[0..byte_len].*)) == bit_target) {
-            return true;
-        }
-        return std.ascii.eqlIgnoreCase(value, target);
-    }
 };
 
-const testing = std.testing;
+const testing = @import("../testing.zig");
 test "Mime: invalid " {
+    defer testing.reset();
+
     const invalids = [_][]const u8{
         "",
         "text",
@@ -280,11 +318,14 @@ test "Mime: invalid " {
     };
 
     for (invalids) |invalid| {
-        try testing.expectError(error.Invalid, Mime.parse(undefined, invalid));
+        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
+        try testing.expectError(error.Invalid, Mime.parse(undefined, mutable_input));
     }
 }
 
 test "Mime: parse common" {
+    defer testing.reset();
+
     try expect(.{ .content_type = .{ .text_xml = {} } }, "text/xml");
     try expect(.{ .content_type = .{ .text_html = {} } }, "text/html");
     try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain");
@@ -304,24 +345,32 @@ test "Mime: parse common" {
     try expect(.{ .content_type = .{ .text_xml = {} } }, " TeXT/xml");
     try expect(.{ .content_type = .{ .text_html = {} } }, "teXt/HtML  ;");
     try expect(.{ .content_type = .{ .text_plain = {} } }, "tExT/PlAiN;");
+
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "text/javascript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "Application/JavaScript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "application/x-javascript");
 }
 
 test "Mime: parse uncommon" {
-    const text_javascript = Expectation{
-        .content_type = .{ .other = .{ .type = "text", .sub_type = "javascript" } },
+    defer testing.reset();
+
+    const text_csv = Expectation{
+        .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } },
     };
-    try expect(text_javascript, "text/javascript");
-    try expect(text_javascript, "text/javascript;");
-    try expect(text_javascript, "  text/javascript\t  ");
-    try expect(text_javascript, "  text/javascript\t  ;");
+    try expect(text_csv, "text/csv");
+    try expect(text_csv, "text/csv;");
+    try expect(text_csv, "  text/csv\t  ");
+    try expect(text_csv, "  text/csv\t  ;");
 
     try expect(
-        .{ .content_type = .{ .other = .{ .type = "Text", .sub_type = "Javascript" } } },
-        "Text/Javascript",
+        .{ .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } } },
+        "Text/CSV",
     );
 }
 
 test "Mime: parse charset" {
+    defer testing.reset();
+
     try expect(.{
         .content_type = .{ .text_xml = {} },
         .charset = "utf-8",
@@ -342,10 +391,12 @@ test "Mime: parse charset" {
 }
 
 test "Mime: isHTML" {
+    defer testing.reset();
+
     const isHTML = struct {
         fn isHTML(expected: bool, input: []const u8) !void {
-            var mime = try Mime.parse(testing.allocator, input);
-            defer mime.deinit();
+            const mutable_input = try testing.arena_allocator.dupe(u8, input);
+            var mime = try Mime.parse(testing.arena_allocator, mutable_input);
             try testing.expectEqual(expected, mime.isHTML());
         }
     }.isHTML;
@@ -357,6 +408,71 @@ test "Mime: isHTML" {
     try isHTML(false, "over/9000");
 }
 
+test "Mime: sniff" {
+    try testing.expectEqual(null, Mime.sniff(""));
+    try testing.expectEqual(null, Mime.sniff("<htm"));
+    try testing.expectEqual(null, Mime.sniff("<html!"));
+    try testing.expectEqual(null, Mime.sniff("<a_"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype html"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n  <!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n \t <font/>"));
+
+    const expectHTML = struct {
+        fn expect(input: []const u8) !void {
+            try testing.expectEqual(.text_html, std.meta.activeTag(Mime.sniff(input).?.content_type));
+        }
+    }.expect;
+
+    try expectHTML("<!doctype html ");
+    try expectHTML("\n  \t    <!DOCTYPE HTML ");
+
+    try expectHTML("<html ");
+    try expectHTML("\n  \t    <HtmL> even more stufff");
+
+    try expectHTML("<script>");
+    try expectHTML("\n  \t    <SCRIpt >alert(document.cookies)</script>");
+
+    try expectHTML("<iframe>");
+    try expectHTML(" \t    <ifRAME >");
+
+    try expectHTML("<h1>");
+    try expectHTML("  <H1>");
+
+    try expectHTML("<div>");
+    try expectHTML("\n\r\r  <DiV>");
+
+    try expectHTML("<font>");
+    try expectHTML("  <fonT>");
+
+    try expectHTML("<table>");
+    try expectHTML("\t\t<TAblE>");
+
+    try expectHTML("<a>");
+    try expectHTML("\n\n<A>");
+
+    try expectHTML("<style>");
+    try expectHTML("    \n\t <STyLE>");
+
+    try expectHTML("<title>");
+    try expectHTML("    \n\t <TITLE>");
+
+    try expectHTML("<b>");
+    try expectHTML("    \n\t <B>");
+
+    try expectHTML("<body>");
+    try expectHTML("    \n\t <BODY>");
+
+    try expectHTML("<br>");
+    try expectHTML("    \n\t <BR>");
+
+    try expectHTML("<p>");
+    try expectHTML("    \n\t <P>");
+
+    try expectHTML("<!-->");
+    try expectHTML("    \n\t <!-->");
+}
+
 const Expectation = struct {
     content_type: Mime.ContentType,
     params: []const u8 = "",
@@ -364,9 +480,9 @@ const Expectation = struct {
 };
 
 fn expect(expected: Expectation, input: []const u8) !void {
-    var actual = try Mime.parse(testing.allocator, input);
-    defer actual.deinit();
+    const mutable_input = try testing.arena_allocator.dupe(u8, input);
 
+    const actual = try Mime.parse(testing.arena_allocator, mutable_input);
     try testing.expectEqual(
         std.meta.activeTag(expected.content_type),
         std.meta.activeTag(actual.content_type),
@@ -375,16 +491,16 @@ fn expect(expected: Expectation, input: []const u8) !void {
     switch (expected.content_type) {
         .other => |e| {
             const a = actual.content_type.other;
-            try testing.expectEqualStrings(e.type, a.type);
-            try testing.expectEqualStrings(e.sub_type, a.sub_type);
+            try testing.expectEqual(e.type, a.type);
+            try testing.expectEqual(e.sub_type, a.sub_type);
         },
         else => {}, // already asserted above
     }
 
-    try testing.expectEqualStrings(expected.params, actual.params);
+    try testing.expectEqual(expected.params, actual.params);
 
     if (expected.charset) |ec| {
-        try testing.expectEqualStrings(ec, actual.charset.?);
+        try testing.expectEqual(ec, actual.charset.?);
     } else {
         try testing.expectEqual(null, actual.charset);
     }

src/browser/netsurf.zig

@@ -24,11 +24,12 @@ const c = @cImport({
     @cInclude("dom/bindings/hubbub/parser.h");
     @cInclude("events/event_target.h");
     @cInclude("events/event.h");
+    @cInclude("events/mouse_event.h");
+    @cInclude("utils/validate.h");
 });
 
-const mimalloc = @import("mimalloc");
-
-const Callback = @import("jsruntime").Callback;
+const mimalloc = @import("mimalloc.zig");
+const normalizeWhitespace = @import("html/document.zig").normalizeWhitespace;
 
 // init initializes netsurf lib.
 // init starts a mimalloc heap arena for the netsurf session. The caller must
@@ -260,7 +261,7 @@ pub const Tag = enum(u8) {
 
     pub fn all() []Tag {
         comptime {
-            const info = @typeInfo(Tag).Enum;
+            const info = @typeInfo(Tag).@"enum";
             var l: [info.fields.len]Tag = undefined;
             for (info.fields, 0..) |field, i| {
                 l[i] = @as(Tag, @enumFromInt(field.value));
@@ -520,6 +521,7 @@ pub fn eventSetInternalType(evt: *Event, internal_type: EventType) !void {
 pub const EventType = enum(u8) {
     event = 0,
     progress_event = 1,
+    custom_event = 2,
 };
 
 pub const MutationEvent = c.dom_mutation_event;
@@ -585,11 +587,61 @@ pub inline fn toEventTarget(comptime T: type, v: *T) *EventTarget {
     return @as(*EventTarget, @ptrCast(et_aligned));
 }
 
+// The way we implement events is a lot like how Zig implements linked lists.
+// A Zig struct contains an `EventNode` field, i.e.:
+//    node: parser.EventNode,
+//
+// When eventTargetAddEventListener is called, we pass in `&self.node`.
+// This is the pointer that's stored in the netsurf listener and it's the data
+// we can get back from the listener. We can call the node's `func` function,
+// passing the node itself, and the receiving function will know how to turn
+// that node into the our "self", i..e by using @fieldParentPtr.
+// https://www.openmymind.net/Zigs-New-LinkedList-API/
+pub const EventNode = struct {
+    // Event id, used for removing. Internal Zig events won't have an id.
+    // This is normally set to the callback.id for a JavaScript event.
+    id: ?usize = null,
+
+    func: *const fn (node: *EventNode, event: *Event) void,
+
+    fn idFromListener(lst: *EventListener) ?usize {
+        const ctx = eventListenerGetData(lst) orelse return null;
+        const node: *EventNode = @alignCast(@ptrCast(ctx));
+        return node.id;
+    }
+};
+
+pub fn eventTargetAddEventListener(
+    et: *EventTarget,
+    typ: []const u8,
+    node: *EventNode,
+    capture: bool,
+) !void {
+    const event_handler = struct {
+        fn handle(event_: ?*Event, ptr_: ?*anyopaque) callconv(.C) void {
+            const ptr = ptr_ orelse return;
+            const event = event_ orelse return;
+
+            const node_: *EventNode = @alignCast(@ptrCast(ptr));
+            node_.func(node_, event);
+        }
+    }.handle;
+
+    var listener: ?*EventListener = undefined;
+    const errLst = c.dom_event_listener_create(event_handler, node, &listener);
+    try DOMErr(errLst);
+    defer c.dom_event_listener_unref(listener);
+
+    const s = try strFromData(typ);
+    const err = eventTargetVtable(et).add_event_listener.?(et, s, listener, capture);
+    try DOMErr(err);
+}
+
 pub fn eventTargetHasListener(
     et: *EventTarget,
     typ: []const u8,
     capture: bool,
-    cbk_id: usize,
+    id: usize,
 ) !?*EventListener {
     const str = try strFromData(typ);
 
@@ -614,9 +666,8 @@ pub fn eventTargetHasListener(
             // and capture property,
             // let's check if the callback handler is the same
             defer c.dom_event_listener_unref(listener);
-            const ehd = EventHandlerDataInternal.fromListener(listener);
-            if (ehd) |d| {
-                if (cbk_id == d.data.cbk.id()) {
+            if (EventNode.idFromListener(listener)) |node_id| {
+                if (node_id == id) {
                     return lst;
                 }
             }
@@ -634,127 +685,18 @@ pub fn eventTargetHasListener(
     return null;
 }
 
-// EventHandlerFunc is a zig function called when the event is dispatched to a
-// listener.
-// The EventHandlerFunc is responsible to call the callback included into the
-// EventHandlerData.
-pub const EventHandlerFunc = *const fn (event: ?*Event, data: EventHandlerData) void;
-
-// EventHandler implements the function exposed in C and called by libdom.
-// It retrieves the EventHandlerInternalData and call the EventHandlerFunc with
-// the EventHandlerData in parameter.
-const EventHandler = struct {
-    fn handle(event: ?*Event, data: ?*anyopaque) callconv(.C) void {
-        if (data) |d| {
-            const ehd = EventHandlerDataInternal.get(d);
-            ehd.handler(event, ehd.data);
-
-            // NOTE: we can not call func.deinit here
-            // b/c the handler can be called several times
-            // either on this dispatch event or in anoter one
-        }
-    }
-}.handle;
-
-// EventHandlerData contains a JS callback and the data associated to the
-// handler.
-// If given, deinitFunc is called with the data pointer to allow the creator to
-// clean memory.
-// The callback is deinit by EventHandlerDataInternal. It must NOT be deinit
-// into deinitFunc.
-pub const EventHandlerData = struct {
-    cbk: Callback,
-    data: ?*anyopaque = null,
-    // deinitFunc implements the data deinitialization.
-    deinitFunc: ?DeinitFunc = null,
-
-    pub const DeinitFunc = *const fn (data: ?*anyopaque, alloc: std.mem.Allocator) void;
-};
-
-// EventHandlerDataInternal groups the EventHandlerFunc and the EventHandlerData.
-const EventHandlerDataInternal = struct {
-    data: EventHandlerData,
-    handler: EventHandlerFunc,
-
-    fn init(alloc: std.mem.Allocator, handler: EventHandlerFunc, data: EventHandlerData) !*EventHandlerDataInternal {
-        const ptr = try alloc.create(EventHandlerDataInternal);
-        ptr.* = .{
-            .data = data,
-            .handler = handler,
-        };
-        return ptr;
-    }
-
-    fn deinit(self: *EventHandlerDataInternal, alloc: std.mem.Allocator) void {
-        if (self.data.deinitFunc) |d| d(self.data.data, alloc);
-        self.data.cbk.deinit(alloc);
-        alloc.destroy(self);
-    }
-
-    fn get(data: *anyopaque) *EventHandlerDataInternal {
-        const ptr: *align(@alignOf(*EventHandlerDataInternal)) anyopaque = @alignCast(data);
-        return @as(*EventHandlerDataInternal, @ptrCast(ptr));
-    }
-
-    // retrieve a EventHandlerDataInternal from a listener.
-    fn fromListener(lst: *EventListener) ?*EventHandlerDataInternal {
-        const data = eventListenerGetData(lst);
-        // free cbk allocation made on eventTargetAddEventListener
-        if (data == null) return null;
-
-        return get(data.?);
-    }
-};
-
-pub fn eventTargetAddEventListener(
-    et: *EventTarget,
-    alloc: std.mem.Allocator,
-    typ: []const u8,
-    handlerFunc: EventHandlerFunc,
-    data: EventHandlerData,
-    capture: bool,
-) !void {
-    // this allocation will be removed either on
-    // eventTargetRemoveEventListener or eventTargetRemoveAllEventListeners
-    const ehd = try EventHandlerDataInternal.init(alloc, handlerFunc, data);
-    errdefer ehd.deinit(alloc);
-
-    // When a function is used as an event handler, its this parameter is bound
-    // to the DOM element on which the listener is placed.
-    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#this_in_dom_event_handlers
-    try ehd.data.cbk.setThisArg(et);
-
-    const ctx = @as(*anyopaque, @ptrCast(ehd));
-    var listener: ?*EventListener = undefined;
-    const errLst = c.dom_event_listener_create(EventHandler, ctx, &listener);
-    try DOMErr(errLst);
-    defer c.dom_event_listener_unref(listener);
-
-    const s = try strFromData(typ);
-    const err = eventTargetVtable(et).add_event_listener.?(et, s, listener, capture);
-    try DOMErr(err);
-}
-
 pub fn eventTargetRemoveEventListener(
     et: *EventTarget,
-    alloc: std.mem.Allocator,
     typ: []const u8,
     lst: *EventListener,
     capture: bool,
 ) !void {
-    // free data allocation made on eventTargetAddEventListener
-    const ehd = EventHandlerDataInternal.fromListener(lst);
-    if (ehd) |d| d.deinit(alloc);
-
     const s = try strFromData(typ);
     const err = eventTargetVtable(et).remove_event_listener.?(et, s, lst, capture);
     try DOMErr(err);
 }
 
-pub fn eventTargetRemoveAllEventListeners(
-    et: *EventTarget,
-    alloc: std.mem.Allocator,
-) !void {
+pub fn eventTargetRemoveAllEventListeners(et: *EventTarget) !void {
     var next: ?*EventListenerEntry = undefined;
     var lst: ?*EventListener = undefined;
 
@@ -771,18 +713,16 @@ pub fn eventTargetRemoveAllEventListeners(
         try DOMErr(errIter);
 
         if (lst) |listener| {
-            defer c.dom_event_listener_unref(listener);
-
-            const ehd = EventHandlerDataInternal.fromListener(listener);
-            if (ehd) |d| d.deinit(alloc);
-
-            const err = eventTargetVtable(et).remove_event_listener.?(
-                et,
-                null,
-                lst,
-                false,
-            );
-            try DOMErr(err);
+            if (EventNode.idFromListener(listener) != null) {
+                defer c.dom_event_listener_unref(listener);
+                const err = eventTargetVtable(et).remove_event_listener.?(
+                    et,
+                    null,
+                    lst,
+                    false,
+                );
+                try DOMErr(err);
+            }
         }
 
         if (next == null) {
@@ -801,10 +741,15 @@ pub fn eventTargetDispatchEvent(et: *EventTarget, event: *Event) !bool {
     return res;
 }
 
+pub fn elementDispatchEvent(element: *Element, event: *Event) !bool {
+    const et: *EventTarget = toEventTarget(Element, element);
+    return eventTargetDispatchEvent(et, @ptrCast(event));
+}
+
 pub fn eventTargetTBaseFieldName(comptime T: type) ?[]const u8 {
     std.debug.assert(@inComptime());
     switch (@typeInfo(T)) {
-        .Struct => |ti| {
+        .@"struct" => |ti| {
             for (ti.fields) |f| {
                 if (f.type == EventTargetTBase) return f.name;
             }
@@ -860,6 +805,61 @@ pub const EventTargetTBase = extern struct {
     }
 };
 
+// MouseEvent
+
+pub const MouseEvent = c.dom_mouse_event;
+
+pub fn mouseEventCreate() !*MouseEvent {
+    var evt: ?*MouseEvent = undefined;
+    const err = c._dom_mouse_event_create(&evt);
+    try DOMErr(err);
+    return evt.?;
+}
+
+pub fn mouseEventDestroy(evt: *MouseEvent) void {
+    c._dom_mouse_event_destroy(evt);
+}
+
+const MouseEventOpts = struct {
+    x: i32,
+    y: i32,
+    bubbles: bool = false,
+    cancelable: bool = false,
+    ctrl: bool = false,
+    alt: bool = false,
+    shift: bool = false,
+    meta: bool = false,
+    button: u16 = 0,
+    click_count: u16 = 1,
+};
+
+pub fn mouseEventInit(evt: *MouseEvent, typ: []const u8, opts: MouseEventOpts) !void {
+    const s = try strFromData(typ);
+    const err = c._dom_mouse_event_init(
+        evt,
+        s,
+        opts.bubbles,
+        opts.cancelable,
+        null, // dom_abstract_view* ?
+        opts.click_count, // details
+        opts.x, // screen_x
+        opts.y, // screen_y
+        opts.x, // client_x
+        opts.y, // client_y
+        opts.ctrl,
+        opts.alt,
+        opts.shift,
+        opts.meta,
+        opts.button,
+        null, // related target
+    );
+    try DOMErr(err);
+}
+
+pub fn mouseEventDefaultPrevented(evt: *MouseEvent) !bool {
+    return eventDefaultPrevented(@ptrCast(evt));
+}
+
 // NodeType
 
 pub const NodeType = enum(u4) {
@@ -1187,8 +1187,8 @@ pub fn nodeInsertBefore(node: *Node, new_node: *Node, ref_node: *Node) !*Node {
     return res.?;
 }
 
-pub fn nodeIsDefaultNamespace(node: *Node, namespace: []const u8) !bool {
-    const s = try strFromData(namespace);
+pub fn nodeIsDefaultNamespace(node: *Node, namespace_: ?[]const u8) !bool {
+    const s = if (namespace_) |n| try strFromData(n) else null;
     var res: bool = undefined;
     const err = nodeVtable(node).dom_node_is_default_namespace.?(node, s, &res);
     try DOMErr(err);
@@ -1217,9 +1217,10 @@ pub fn nodeLookupPrefix(node: *Node, namespace: []const u8) !?[]const u8 {
     return strToData(s.?);
 }
 
-pub fn nodeLookupNamespaceURI(node: *Node, prefix: ?[]const u8) !?[]const u8 {
+pub fn nodeLookupNamespaceURI(node: *Node, prefix_: ?[]const u8) !?[]const u8 {
     var s: ?*String = undefined;
-    const err = nodeVtable(node).dom_node_lookup_namespace.?(node, try strFromData(prefix.?), &s);
+    const prefix: ?*String = if (prefix_) |p| try strFromData(p) else null;
+    const err = nodeVtable(node).dom_node_lookup_namespace.?(node, prefix, &s);
     try DOMErr(err);
     if (s == null) return null;
     return strToData(s.?);
@@ -1251,11 +1252,11 @@ pub fn nodeHasAttributes(node: *Node) !bool {
     return res;
 }
 
-pub fn nodeGetAttributes(node: *Node) !*NamedNodeMap {
+pub fn nodeGetAttributes(node: *Node) !?*NamedNodeMap {
     var res: ?*NamedNodeMap = undefined;
     const err = nodeVtable(node).dom_node_get_attributes.?(node, &res);
     try DOMErr(err);
-    return res.?;
+    return res;
 }
 
 pub fn nodeGetNamespace(node: *Node) !?[]const u8 {
@@ -1279,6 +1280,11 @@ pub inline fn nodeToElement(node: *Node) *Element {
     return @as(*Element, @ptrCast(node));
 }
 
+// nodeToDocument is an helper to convert a node to an document.
+pub inline fn nodeToDocument(node: *Node) *Document {
+    return @as(*Document, @ptrCast(node));
+}
+
 // CharacterData
 pub const CharacterData = c.dom_characterdata;
 
@@ -1505,6 +1511,13 @@ pub fn elementHasAttribute(elem: *Element, qname: []const u8) !bool {
     return res;
 }
 
+pub fn elementHasAttributeNS(elem: *Element, ns: []const u8, qname: []const u8) !bool {
+    var res: bool = undefined;
+    const err = elementVtable(elem).dom_element_has_attribute_ns.?(elem, if (ns.len == 0) null else try strFromData(ns), try strFromData(qname), &res);
+    try DOMErr(err);
+    return res;
+}
+
 pub fn elementGetAttributeNode(elem: *Element, name: []const u8) !?*Attribute {
     var a: ?*Attribute = undefined;
     const err = elementVtable(elem).dom_element_get_attribute_node.?(elem, try strFromData(name), &a);
@@ -1516,7 +1529,7 @@ pub fn elementGetAttributeNodeNS(elem: *Element, ns: []const u8, name: []const u
     var a: ?*Attribute = undefined;
     const err = elementVtable(elem).dom_element_get_attribute_node_ns.?(
         elem,
-        try strFromData(ns),
+        if (ns.len == 0) null else try strFromData(ns),
         try strFromData(name),
         &a,
     );
@@ -1611,6 +1624,11 @@ pub fn tokenListGetValue(l: *TokenList) !?[]const u8 {
     return strToData(res.?);
 }
 
+pub fn tokenListSetValue(l: *TokenList, value: []const u8) !void {
+    const err = c.dom_tokenlist_set_value(l, try strFromData(value));
+    try DOMErr(err);
+}
+
 // ElementHTML
 pub const ElementHTML = c.dom_html_element;
 
@@ -1622,6 +1640,14 @@ pub fn elementHTMLGetTagType(elem_html: *ElementHTML) !Tag {
     var tag_type: c.dom_html_element_type = undefined;
     const err = elementHTMLVtable(elem_html).dom_html_element_get_tag_type.?(elem_html, &tag_type);
     try DOMErr(err);
+
+    if (tag_type >= 255) {
+        // This is questionable, but std.meta.intToEnum has more overhead
+        // Added this because this WPT test started to fail once we
+        // introduced an SVGElement:
+        //   html/dom/documents/dom-tree-accessors/document.title-09.html
+        return Tag.undef;
+    }
     return @as(Tag, @enumFromInt(tag_type));
 }
 
@@ -2127,12 +2153,12 @@ fn parserErr(err: HubbubErr) ParserError!void {
 
 // documentHTMLParseFromStr parses the given HTML string.
 // The caller is responsible for closing the document.
-pub fn documentHTMLParseFromStr(str: []const u8) !*DocumentHTML {
+pub fn documentHTMLParseFromStr(arena: std.mem.Allocator, str: []const u8) !*DocumentHTML {
     var fbs = std.io.fixedBufferStream(str);
-    return try documentHTMLParse(fbs.reader(), "UTF-8");
+    return try documentHTMLParse(arena, fbs.reader(), "UTF-8");
 }
 
-pub fn documentHTMLParse(reader: anytype, enc: ?[:0]const u8) !*DocumentHTML {
+pub fn documentHTMLParse(arena: std.mem.Allocator, reader: anytype, enc: ?[:0]const u8) !*DocumentHTML {
     var parser: ?*c.dom_hubbub_parser = undefined;
     var doc: ?*c.dom_document = undefined;
     var err: c.hubbub_error = undefined;
@@ -2144,7 +2170,11 @@ pub fn documentHTMLParse(reader: anytype, enc: ?[:0]const u8) !*DocumentHTML {
 
     try parseData(parser.?, reader);
 
-    return @as(*DocumentHTML, @ptrCast(doc.?));
+    const html_doc: *DocumentHTML = @ptrCast(doc.?);
+    const old_title = try documentHTMLGetTitle(html_doc);
+    const normalized = try normalizeWhitespace(arena, old_title);
+    try documentHTMLSetTitle(html_doc, normalized);
+    return html_doc;
 }
 
 pub fn documentParseFragmentFromStr(self: *Document, str: []const u8) !*DocumentFragment {
@@ -2181,21 +2211,28 @@ fn parseParams(enc: ?[:0]const u8) c.dom_hubbub_parser_params {
 
 fn parseData(parser: *c.dom_hubbub_parser, reader: anytype) !void {
     var err: c.hubbub_error = undefined;
-    var buffer: [1024]u8 = undefined;
-    var ln = buffer.len;
-    while (ln > 0) {
-        ln = try reader.read(&buffer);
-        err = c.dom_hubbub_parser_parse_chunk(parser, &buffer, ln);
-        // TODO handle encoding change error return.
-        // When the HTML contains a META tag with a different encoding than the
-        // original one, a c.DOM_HUBBUB_HUBBUB_ERR_ENCODINGCHANGE error is
-        // returned.
-        // In this case, we must restart the parsing with the new detected
-        // encoding. The detected encoding is stored in the document and we can
-        // get it with documentGetInputEncoding().
-        try parserErr(err);
+    const TI = @typeInfo(@TypeOf(reader));
+    if (TI == .pointer and @hasDecl(TI.pointer.child, "next")) {
+        while (try reader.next()) |data| {
+            err = c.dom_hubbub_parser_parse_chunk(parser, data.ptr, data.len);
+            try parserErr(err);
+        }
+    } else {
+        var buffer: [1024]u8 = undefined;
+        var ln = buffer.len;
+        while (ln > 0) {
+            ln = try reader.read(&buffer);
+            err = c.dom_hubbub_parser_parse_chunk(parser, &buffer, ln);
+            // TODO handle encoding change error return.
+            // When the HTML contains a META tag with a different encoding than the
+            // original one, a c.DOM_HUBBUB_HUBBUB_ERR_ENCODINGCHANGE error is
+            // returned.
+            // In this case, we must restart the parsing with the new detected
+            // encoding. The detected encoding is stored in the document and we can
+            // get it with documentGetInputEncoding().
+            try parserErr(err);
+        }
     }
-
     err = c.dom_hubbub_parser_completed(parser);
     try parserErr(err);
 }
@@ -2283,3 +2320,7 @@ pub fn documentHTMLGetLocation(T: type, doc: *DocumentHTML) !?*T {
     const ptr: *align(@alignOf(*T)) anyopaque = @alignCast(l.?);
     return @as(*T, @ptrCast(ptr));
 }
+
+pub fn validateName(name: []const u8) !bool {
+    return c._dom_validate_name(try strFromData(name));
+}

src/browser/page.zig

@@ -0,0 +1,678 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const builtin = @import("builtin");
+
+const Allocator = std.mem.Allocator;
+
+const Dump = @import("dump.zig");
+const Mime = @import("mime.zig").Mime;
+const DataURI = @import("datauri.zig").DataURI;
+const Session = @import("session.zig").Session;
+const Renderer = @import("renderer.zig").Renderer;
+const SessionState = @import("env.zig").SessionState;
+const Window = @import("html/window.zig").Window;
+const Walker = @import("dom/walker.zig").WalkerDepthFirst;
+const Env = @import("env.zig").Env;
+const Loop = @import("../runtime/loop.zig").Loop;
+
+const URL = @import("../url.zig").URL;
+
+const parser = @import("netsurf.zig");
+const http = @import("../http/client.zig");
+const storage = @import("storage/storage.zig");
+
+const polyfill = @import("polyfill/polyfill.zig");
+
+const log = std.log.scoped(.page);
+
+// Page navigates to an url.
+// You can navigates multiple urls with the same page, but you have to call
+// end() to stop the previous navigation before starting a new one.
+// The page handle all its memory in an arena allocator. The arena is reseted
+// when end() is called.
+pub const Page = struct {
+    session: *Session,
+
+    // an arena with a lifetime for the entire duration of the page
+    arena: Allocator,
+
+    // Gets injected into any WebAPI method that needs it
+    state: SessionState,
+
+    // Serves are the root object of our JavaScript environment
+    window: Window,
+
+    doc: ?*parser.Document,
+
+    // The URL of the page
+    url: URL,
+
+    raw_data: ?[]const u8,
+
+    renderer: Renderer,
+
+    microtask_node: Loop.CallbackNode,
+
+    window_clicked_event_node: parser.EventNode,
+
+    scope: *Env.Scope,
+
+    // List of modules currently fetched/loaded.
+    module_map: std.StringHashMapUnmanaged([]const u8),
+
+    // current_script is the script currently evaluated by the page.
+    // current_script could by fetch module to resolve module's url to fetch.
+    current_script: ?*const Script = null,
+
+    pub fn init(self: *Page, arena: Allocator, session: *Session) !void {
+        const browser = session.browser;
+        self.* = .{
+            .window = try Window.create(null, null),
+            .arena = arena,
+            .doc = null,
+            .raw_data = null,
+            .url = URL.empty,
+            .session = session,
+            .renderer = Renderer.init(arena),
+            .microtask_node = .{ .func = microtaskCallback },
+            .window_clicked_event_node = .{ .func = windowClicked },
+            .state = .{
+                .arena = arena,
+                .document = null,
+                .url = &self.url,
+                .renderer = &self.renderer,
+                .loop = browser.app.loop,
+                .cookie_jar = &session.cookie_jar,
+                .http_client = browser.http_client,
+            },
+            .scope = try session.executor.startScope(&self.window, &self.state, self, true),
+            .module_map = .empty,
+        };
+
+        // load polyfills
+        try polyfill.load(self.arena, self.scope);
+
+        // _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.microtask_node);
+    }
+
+    fn microtaskCallback(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+        const self: *Page = @fieldParentPtr("microtask_node", node);
+        self.session.browser.runMicrotasks();
+        repeat_delay.* = 1 * std.time.ns_per_ms;
+    }
+
+    // dump writes the page content into the given file.
+    pub fn dump(self: *const Page, out: std.fs.File) !void {
+        // if no HTML document pointer available, dump the data content only.
+        if (self.doc == null) {
+            // no data loaded, nothing to do.
+            if (self.raw_data == null) return;
+            return try out.writeAll(self.raw_data.?);
+        }
+
+        // if the page has a pointer to a document, dumps the HTML.
+        try Dump.writeHTML(self.doc.?, out);
+    }
+
+    pub fn fetchModuleSource(ctx: *anyopaque, specifier: []const u8) !?[]const u8 {
+        const self: *Page = @ptrCast(@alignCast(ctx));
+
+        log.debug("fetch module: specifier: {s}", .{specifier});
+
+        const base = if (self.current_script) |s| s.src else null;
+
+        const file_src = blk: {
+            if (base) |_base| {
+                break :blk try URL.stitch(self.arena, specifier, _base);
+            } else break :blk specifier;
+        };
+
+        if (self.module_map.get(file_src)) |module| return module;
+
+        const module = try self.fetchData(specifier, base);
+        if (module) |_module| try self.module_map.putNoClobber(self.arena, file_src, _module);
+        return module;
+    }
+
+    pub fn wait(self: *Page) !void {
+        var try_catch: Env.TryCatch = undefined;
+        try_catch.init(self.scope);
+        defer try_catch.deinit();
+
+        try self.session.browser.app.loop.run();
+
+        if (try_catch.hasCaught() == false) {
+            log.debug("wait: OK", .{});
+            return;
+        }
+
+        const msg = (try try_catch.err(self.arena)) orelse "unknown";
+        log.info("wait error: {s}", .{msg});
+    }
+
+    pub fn origin(self: *const Page, arena: Allocator) ![]const u8 {
+        var arr: std.ArrayListUnmanaged(u8) = .{};
+        try self.url.origin(arr.writer(arena));
+        return arr.items;
+    }
+
+    // spec reference: https://html.spec.whatwg.org/#document-lifecycle
+    pub fn navigate(self: *Page, request_url: URL, opts: NavigateOpts) !void {
+        const arena = self.arena;
+        const session = self.session;
+
+        log.debug("starting GET {s}", .{request_url});
+
+        // if the url is about:blank, nothing to do.
+        if (std.mem.eql(u8, "about:blank", request_url.raw)) {
+            return;
+        }
+
+        // we don't clone url, because we're going to replace self.url
+        // later in this function, with the final request url (since we might
+        // redirect)
+        self.url = request_url;
+
+        // load the data
+        var request = try self.newHTTPRequest(.GET, &self.url, .{ .navigation = true });
+        defer request.deinit();
+
+        session.browser.notification.dispatch(.page_navigate, &.{
+            .url = &self.url,
+            .reason = opts.reason,
+            .timestamp = timestamp(),
+        });
+
+        var response = try request.sendSync(.{});
+
+        // would be different than self.url in the case of a redirect
+        self.url = try URL.fromURI(arena, request.request_uri);
+
+        const header = response.header;
+        try session.cookie_jar.populateFromResponse(&self.url.uri, &header);
+
+        // TODO handle fragment in url.
+        try self.window.replaceLocation(.{ .url = try self.url.toWebApi(arena) });
+
+        log.info("GET {any} {d}", .{ self.url, header.status });
+
+        const content_type = header.get("content-type");
+
+        const mime: Mime = blk: {
+            if (content_type) |ct| {
+                break :blk try Mime.parse(arena, ct);
+            }
+            break :blk Mime.sniff(try response.peek());
+        } orelse .unknown;
+
+        if (mime.isHTML()) {
+            try self.loadHTMLDoc(&response, mime.charset orelse "utf-8");
+        } else {
+            log.info("non-HTML document: {s}", .{content_type orelse "null"});
+            var arr: std.ArrayListUnmanaged(u8) = .{};
+            while (try response.next()) |data| {
+                try arr.appendSlice(arena, try arena.dupe(u8, data));
+            }
+            // save the body into the page.
+            self.raw_data = arr.items;
+        }
+
+        session.browser.notification.dispatch(.page_navigated, &.{
+            .url = &self.url,
+            .timestamp = timestamp(),
+        });
+    }
+
+    // https://html.spec.whatwg.org/#read-html
+    fn loadHTMLDoc(self: *Page, reader: anytype, charset: []const u8) !void {
+        const arena = self.arena;
+
+        log.debug("parse html with charset {s}", .{charset});
+
+        const ccharset = try arena.dupeZ(u8, charset);
+
+        const html_doc = try parser.documentHTMLParse(arena, reader, ccharset);
+        const doc = parser.documentHTMLToDocument(html_doc);
+
+        // save a document's pointer in the page.
+        self.doc = doc;
+
+        const document_element = (try parser.documentGetDocumentElement(doc)) orelse return error.DocumentElementError;
+        try parser.eventTargetAddEventListener(
+            parser.toEventTarget(parser.Element, document_element),
+            "click",
+            &self.window_clicked_event_node,
+            false,
+        );
+
+        // TODO set document.readyState to interactive
+        // https://html.spec.whatwg.org/#reporting-document-loading-status
+
+        // inject the URL to the document including the fragment.
+        try parser.documentSetDocumentURI(doc, self.url.raw);
+
+        // TODO set the referrer to the document.
+        try self.window.replaceDocument(html_doc);
+        self.window.setStorageShelf(
+            try self.session.storage_shed.getOrPut(try self.origin(self.arena)),
+        );
+
+        // https://html.spec.whatwg.org/#read-html
+
+        // update the sessions state
+        self.state.document = html_doc;
+
+        // browse the DOM tree to retrieve scripts
+        // TODO execute the synchronous scripts during the HTL parsing.
+        // TODO fetch the script resources concurrently but execute them in the
+        // declaration order for synchronous ones.
+
+        // async_scripts stores scripts which can be run asynchronously.
+        // for now they are just run after the non-async one in order to
+        // dispatch DOMContentLoaded the sooner as possible.
+        var async_scripts: std.ArrayListUnmanaged(Script) = .{};
+
+        // defer_scripts stores scripts which are meant to be deferred. For now
+        // this doesn't have a huge impact, since normal scripts are parsed
+        // after the document is loaded. But (a) we should fix that and (b)
+        // this results in JavaScript being loaded in the same order as browsers
+        // which can help debug issues (and might actually fix issues if websites
+        // are expecting this execution order)
+        var defer_scripts: std.ArrayListUnmanaged(Script) = .{};
+
+        const root = parser.documentToNode(doc);
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = try walker.get_next(root, next) orelse break;
+
+            // ignore non-elements nodes.
+            if (try parser.nodeType(next.?) != .element) {
+                continue;
+            }
+
+            const e = parser.nodeToElement(next.?);
+
+            // ignore non-js script.
+            const script = try Script.init(e) orelse continue;
+
+            // TODO use fetchpriority
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#fetchpriority
+
+            // > async
+            // > For classic scripts, if the async attribute is present,
+            // > then the classic script will be fetched in parallel to
+            // > parsing and evaluated as soon as it is available.
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#async
+            if (script.is_async) {
+                try async_scripts.append(arena, script);
+                continue;
+            }
+
+            if (script.is_defer) {
+                try defer_scripts.append(arena, script);
+                continue;
+            }
+
+            // TODO handle for attribute
+            // TODO handle event attribute
+
+            // > Scripts without async, defer or type="module"
+            // > attributes, as well as inline scripts without the
+            // > type="module" attribute, are fetched and executed
+            // > immediately before the browser continues to parse the
+            // > page.
+            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes
+            try parser.documentHTMLSetCurrentScript(html_doc, @ptrCast(e));
+            self.evalScript(&script) catch |err| log.warn("evaljs: {any}", .{err});
+            try parser.documentHTMLSetCurrentScript(html_doc, null);
+        }
+
+        for (defer_scripts.items) |s| {
+            try parser.documentHTMLSetCurrentScript(html_doc, @ptrCast(s.element));
+            self.evalScript(&s) catch |err| log.warn("evaljs: {any}", .{err});
+            try parser.documentHTMLSetCurrentScript(html_doc, null);
+        }
+
+        // dispatch DOMContentLoaded before the transition to "complete",
+        // at the point where all subresources apart from async script elements
+        // have loaded.
+        // https://html.spec.whatwg.org/#reporting-document-loading-status
+        const evt = try parser.eventCreate();
+        defer parser.eventDestroy(evt);
+
+        try parser.eventInit(evt, "DOMContentLoaded", .{ .bubbles = true, .cancelable = true });
+        _ = try parser.eventTargetDispatchEvent(parser.toEventTarget(parser.DocumentHTML, html_doc), evt);
+
+        // eval async scripts.
+        for (async_scripts.items) |s| {
+            try parser.documentHTMLSetCurrentScript(html_doc, @ptrCast(s.element));
+            self.evalScript(&s) catch |err| log.warn("evaljs: {any}", .{err});
+            try parser.documentHTMLSetCurrentScript(html_doc, null);
+        }
+
+        // TODO wait for async scripts
+
+        // TODO set document.readyState to complete
+
+        // dispatch window.load event
+        const loadevt = try parser.eventCreate();
+        defer parser.eventDestroy(loadevt);
+
+        try parser.eventInit(loadevt, "load", .{});
+        _ = try parser.eventTargetDispatchEvent(
+            parser.toEventTarget(Window, &self.window),
+            loadevt,
+        );
+    }
+
+    // evalScript evaluates the src in priority.
+    // if no src is present, we evaluate the text source.
+    // https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model
+    fn evalScript(self: *Page, script: *const Script) !void {
+        const src = script.src orelse {
+            // source is inline
+            // TODO handle charset attribute
+            if (try parser.nodeTextContent(parser.elementToNode(script.element))) |text| {
+                try script.eval(self, text);
+            }
+            return;
+        };
+
+        self.current_script = script;
+        defer self.current_script = null;
+
+        log.debug("starting GET {s}", .{src});
+
+        // https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-classic-script
+        const body = (try self.fetchData(src, null)) orelse {
+            // TODO If el's result is null, then fire an event named error at
+            // el, and return
+            return;
+        };
+
+        script.eval(self, body) catch |err| switch (err) {
+            error.JsErr => {}, // nothing to do here.
+            else => return err,
+        };
+
+        // TODO If el's from an external file is true, then fire an event
+        // named load at el.
+    }
+
+    // fetchData returns the data corresponding to the src target.
+    // It resolves src using the page's uri.
+    // If a base path is given, src is resolved according to the base first.
+    // the caller owns the returned string
+    fn fetchData(self: *const Page, src: []const u8, base: ?[]const u8) !?[]const u8 {
+        log.debug("starting fetch {s}", .{src});
+
+        const arena = self.arena;
+
+        // Handle data URIs.
+        if (try DataURI.parse(arena, src)) |data_uri| {
+            return data_uri.data;
+        }
+
+        var res_src = src;
+
+        // if a base path is given, we resolve src using base.
+        if (base) |_base| {
+            res_src = try URL.stitch(arena, src, _base);
+        }
+
+        var origin_url = &self.url;
+        const url = try origin_url.resolve(arena, res_src);
+
+        var request = try self.newHTTPRequest(.GET, &url, .{
+            .origin_uri = &origin_url.uri,
+            .navigation = false,
+        });
+        defer request.deinit();
+
+        var response = try request.sendSync(.{});
+        var header = response.header;
+        try self.session.cookie_jar.populateFromResponse(&url.uri, &header);
+
+        log.info("fetch {any}: {d}", .{ url, header.status });
+
+        if (header.status != 200) {
+            return error.BadStatusCode;
+        }
+
+        var arr: std.ArrayListUnmanaged(u8) = .{};
+        while (try response.next()) |data| {
+            try arr.appendSlice(arena, try arena.dupe(u8, data));
+        }
+
+        // TODO check content-type
+
+        // check no body
+        if (arr.items.len == 0) {
+            return null;
+        }
+
+        return arr.items;
+    }
+
+    fn newHTTPRequest(self: *const Page, method: http.Request.Method, url: *const URL, opts: storage.cookie.LookupOpts) !http.Request {
+        var request = try self.state.http_client.request(method, &url.uri);
+        errdefer request.deinit();
+
+        var arr: std.ArrayListUnmanaged(u8) = .{};
+        try self.state.cookie_jar.forRequest(&url.uri, arr.writer(self.arena), opts);
+
+        if (arr.items.len > 0) {
+            try request.addHeader("Cookie", arr.items, .{});
+        }
+
+        return request;
+    }
+
+    pub const MouseEvent = struct {
+        x: i32,
+        y: i32,
+        type: Type,
+
+        const Type = enum {
+            pressed,
+            released,
+        };
+    };
+
+    pub fn mouseEvent(self: *Page, me: MouseEvent) !void {
+        if (me.type != .pressed) {
+            return;
+        }
+
+        const element = self.renderer.getElementAtPosition(me.x, me.y) orelse return;
+
+        const event = try parser.mouseEventCreate();
+        defer parser.mouseEventDestroy(event);
+        try parser.mouseEventInit(event, "click", .{
+            .bubbles = true,
+            .cancelable = true,
+            .x = me.x,
+            .y = me.y,
+        });
+        _ = try parser.elementDispatchEvent(element, @ptrCast(event));
+    }
+
+    fn windowClicked(node: *parser.EventNode, event: *parser.Event) void {
+        const self: *Page = @fieldParentPtr("window_clicked_event_node", node);
+        self._windowClicked(event) catch |err| {
+            log.err("window click handler: {}", .{err});
+        };
+    }
+
+    fn _windowClicked(self: *Page, event: *parser.Event) !void {
+        const target = (try parser.eventTarget(event)) orelse return;
+
+        const node = parser.eventTargetToNode(target);
+        if (try parser.nodeType(node) != .element) {
+            return;
+        }
+
+        const html_element: *parser.ElementHTML = @ptrCast(node);
+        switch (try parser.elementHTMLGetTagType(html_element)) {
+            .a => {
+                const element: *parser.Element = @ptrCast(node);
+                const href = (try parser.elementGetAttribute(element, "href")) orelse return;
+
+                // We cannot navigate immediately as navigating will delete the DOM tree, which holds this event's node.
+                // As such we schedule the function to be called as soon as possible.
+                // NOTE Using the page.arena assumes that the scheduling loop does use this object after invoking the callback
+                // If that changes we may want to consider storing DelayedNavigation in the session instead.
+                const arena = self.arena;
+                const navi = try arena.create(DelayedNavigation);
+                navi.* = .{
+                    .session = self.session,
+                    .href = try arena.dupe(u8, href),
+                };
+                _ = try self.state.loop.timeout(0, &navi.navigate_node);
+            },
+            else => {},
+        }
+    }
+
+    const DelayedNavigation = struct {
+        navigate_node: Loop.CallbackNode = .{ .func = DelayedNavigation.delay_navigate },
+        session: *Session,
+        href: []const u8,
+
+        fn delay_navigate(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+            _ = repeat_delay;
+            const self: *DelayedNavigation = @fieldParentPtr("navigate_node", node);
+            self.session.pageNavigate(self.href) catch |err| {
+                log.err("Delayed navigation error {}", .{err}); // TODO: should we trigger a specific event here?
+            };
+        }
+    };
+
+    const Script = struct {
+        kind: Kind,
+        is_async: bool,
+        is_defer: bool,
+        src: ?[]const u8,
+        element: *parser.Element,
+        // The javascript  to load after we successfully load the script
+        onload: ?[]const u8,
+
+        // The javascript to load if we have an error executing the script
+        // For now, we ignore this, since we still have a lot of errors that we
+        // shouldn't
+        //onerror: ?[]const u8,
+
+        const Kind = enum {
+            module,
+            javascript,
+        };
+
+        fn init(e: *parser.Element) !?Script {
+            // ignore non-script tags
+            const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(e)));
+            if (tag != .script) {
+                return null;
+            }
+
+            if (try parser.elementGetAttribute(e, "nomodule") != null) {
+                // these scripts should only be loaded if we don't support modules
+                // but since we do support modules, we can just skip them.
+                return null;
+            }
+
+            const kind = parseKind(try parser.elementGetAttribute(e, "type")) orelse {
+                return null;
+            };
+
+            return .{
+                .kind = kind,
+                .element = e,
+                .src = try parser.elementGetAttribute(e, "src"),
+                .onload = try parser.elementGetAttribute(e, "onload"),
+                .is_async = try parser.elementGetAttribute(e, "async") != null,
+                .is_defer = try parser.elementGetAttribute(e, "defer") != null,
+            };
+        }
+
+        // > type
+        // > Attribute is not set (default), an empty string, or a JavaScript MIME
+        // > type indicates that the script is a "classic script", containing
+        // > JavaScript code.
+        // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attribute_is_not_set_default_an_empty_string_or_a_javascript_mime_type
+        fn parseKind(script_type_: ?[]const u8) ?Kind {
+            const script_type = script_type_ orelse return .javascript;
+            if (script_type.len == 0) {
+                return .javascript;
+            }
+
+            if (std.mem.eql(u8, script_type, "application/javascript")) return .javascript;
+            if (std.mem.eql(u8, script_type, "text/javascript")) return .javascript;
+            if (std.mem.eql(u8, script_type, "module")) return .module;
+
+            return null;
+        }
+
+        fn eval(self: *const Script, page: *Page, body: []const u8) !void {
+            var try_catch: Env.TryCatch = undefined;
+            try_catch.init(page.scope);
+            defer try_catch.deinit();
+
+            const src = self.src orelse "inline";
+            const res = switch (self.kind) {
+                .javascript => page.scope.exec(body, src),
+                .module => page.scope.module(body, src),
+            } catch {
+                if (try try_catch.err(page.arena)) |msg| {
+                    log.info("eval script {s}: {s}", .{ src, msg });
+                }
+                return error.JsErr;
+            };
+
+            if (builtin.mode == .Debug) {
+                const msg = try res.toString(page.arena);
+                log.debug("eval script {s}: {s}", .{ src, msg });
+            }
+
+            if (self.onload) |onload| {
+                _ = page.scope.exec(onload, "script_on_load") catch {
+                    if (try try_catch.err(page.arena)) |msg| {
+                        log.info("eval script onload {s}: {s}", .{ src, msg });
+                    }
+                    return error.JsErr;
+                };
+            }
+        }
+    };
+};
+
+pub const NavigateReason = enum {
+    anchor,
+    address_bar,
+};
+
+const NavigateOpts = struct {
+    reason: NavigateReason = .address_bar,
+};
+
+fn timestamp() u32 {
+    const ts = std.posix.clock_gettime(std.posix.CLOCK.MONOTONIC) catch unreachable;
+    return @intCast(ts.sec);
+}

src/browser/polyfill/fetch.zig

@@ -0,0 +1,46 @@
+// fetch.js code comes from
+// https://github.com/JakeChampion/fetch/blob/main/fetch.js
+//
+// The original code source is available in MIT license.
+//
+// The script comes from the built version from npm.
+// You can get the package with the command:
+//
+// wget $(npm view whatwg-fetch dist.tarball)
+//
+// The source is the content of `package/dist/fetch.umd.js` file.
+pub const source = @embedFile("fetch.js");
+
+const testing = @import("../../testing.zig");
+test "Browser.fetch" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try @import("polyfill.zig").load(testing.allocator, runner.scope);
+
+    try runner.testCases(&.{
+        .{
+            \\  var ok = false;
+            \\  const request = new Request("http://127.0.0.1:9582/loader");
+            \\  fetch(request).then((response) => { ok = response.ok; });
+            \\  false;
+            ,
+            "false",
+        },
+        // all events have been resolved.
+        .{ "ok", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\  var ok2 = false;
+            \\  const request2 = new Request("http://127.0.0.1:9582/loader");
+            \\  (async function () { resp = await fetch(request2); ok2 = resp.ok; }());
+            \\  false;
+            ,
+            "false",
+        },
+        // all events have been resolved.
+        .{ "ok2", "true" },
+    }, .{});
+}

src/browser/polyfill/polyfill.zig

@@ -19,10 +19,8 @@
 const std = @import("std");
 const builtin = @import("builtin");
 
-const jsruntime = @import("jsruntime");
-const Env = jsruntime.Env;
-
-const fetch = @import("fetch.zig").fetch_polyfill;
+const Allocator = std.mem.Allocator;
+const Env = @import("../env.zig").Env;
 
 const log = std.log.scoped(.polyfill);
 
@@ -33,23 +31,23 @@ const modules = [_]struct {
     .{ .name = "polyfill-fetch", .source = @import("fetch.zig").source },
 };
 
-pub fn load(alloc: std.mem.Allocator, env: Env) !void {
-    var try_catch: jsruntime.TryCatch = undefined;
-    try_catch.init(env);
+pub fn load(allocator: Allocator, scope: *Env.Scope) !void {
+    var try_catch: Env.TryCatch = undefined;
+    try_catch.init(scope);
     defer try_catch.deinit();
 
     for (modules) |m| {
-        const res = env.exec(m.source, m.name) catch {
-            if (try try_catch.err(alloc, env)) |msg| {
-                defer alloc.free(msg);
+        const res = scope.exec(m.source, m.name) catch |err| {
+            if (try try_catch.err(allocator)) |msg| {
+                defer allocator.free(msg);
                 log.err("load {s}: {s}", .{ m.name, msg });
             }
-            return;
+            return err;
         };
 
         if (builtin.mode == .Debug) {
-            const msg = try res.toString(alloc, env);
-            defer alloc.free(msg);
+            const msg = try res.toString(allocator);
+            defer allocator.free(msg);
             log.debug("load {s}: {s}", .{ m.name, msg });
         }
     }

src/browser/renderer.zig

@@ -0,0 +1,96 @@
+// Copyright (C) 2023-2024  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 parser = @import("netsurf.zig");
+
+const Allocator = std.mem.Allocator;
+
+// provide very poor abstration to the rest of the code. In theory, we can change
+// the FlatRenderer to a different implementation, and it'll all just work.
+pub const Renderer = FlatRenderer;
+
+// This "renderer" positions elements in a single row in an unspecified order.
+// The important thing is that elements have a consistent position/index within
+// that row, which can be turned into a rectangle.
+const FlatRenderer = struct {
+    allocator: Allocator,
+
+    // key is a @ptrFromInt of the element
+    // value is the index position
+    positions: std.AutoHashMapUnmanaged(u64, u32),
+
+    // given an index, get the element
+    elements: std.ArrayListUnmanaged(u64),
+
+    const Element = @import("dom/element.zig").Element;
+
+    // we expect allocator to be an arena
+    pub fn init(allocator: Allocator) FlatRenderer {
+        return .{
+            .elements = .{},
+            .positions = .{},
+            .allocator = allocator,
+        };
+    }
+
+    pub fn getRect(self: *FlatRenderer, e: *parser.Element) !Element.DOMRect {
+        var elements = &self.elements;
+        const gop = try self.positions.getOrPut(self.allocator, @intFromPtr(e));
+        var x: u32 = gop.value_ptr.*;
+        if (gop.found_existing == false) {
+            x = @intCast(elements.items.len);
+            try elements.append(self.allocator, @intFromPtr(e));
+            gop.value_ptr.* = x;
+        }
+
+        return .{
+            .x = @floatFromInt(x),
+            .y = 0.0,
+            .width = 1.0,
+            .height = 1.0,
+        };
+    }
+
+    pub fn boundingRect(self: *const FlatRenderer) Element.DOMRect {
+        return .{
+            .x = 0.0,
+            .y = 0.0,
+            .width = @floatFromInt(self.width()),
+            .height = @floatFromInt(self.height()),
+        };
+    }
+
+    pub fn width(self: *const FlatRenderer) u32 {
+        return @max(@as(u32, @intCast(self.elements.items.len)), 1); // At least 1 pixel even if empty
+    }
+
+    pub fn height(_: *const FlatRenderer) u32 {
+        return 1;
+    }
+
+    pub fn getElementAtPosition(self: *const FlatRenderer, x: i32, y: i32) ?*parser.Element {
+        if (y != 0 or x < 0) {
+            return null;
+        }
+
+        const elements = self.elements.items;
+        return if (x < elements.len) @ptrFromInt(elements[@intCast(x)]) else null;
+    }
+};

src/browser/session.zig

@@ -0,0 +1,132 @@
+// Copyright (C) 2023-2024  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 ArenaAllocator = std.heap.ArenaAllocator;
+
+const Env = @import("env.zig").Env;
+const Page = @import("page.zig").Page;
+const Browser = @import("browser.zig").Browser;
+
+const parser = @import("netsurf.zig");
+const storage = @import("storage/storage.zig");
+
+const log = std.log.scoped(.session);
+
+// 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.
+pub const Session = struct {
+    browser: *Browser,
+
+    // Used to create our Inspector and in the BrowserContext.
+    arena: ArenaAllocator,
+
+    executor: Env.Executor,
+    storage_shed: storage.Shed,
+    cookie_jar: storage.CookieJar,
+
+    page: ?Page = null,
+
+    pub fn init(self: *Session, browser: *Browser) !void {
+        var executor = try browser.env.newExecutor();
+        errdefer executor.deinit();
+
+        const allocator = browser.app.allocator;
+        self.* = .{
+            .browser = browser,
+            .executor = executor,
+            .arena = ArenaAllocator.init(allocator),
+            .storage_shed = storage.Shed.init(allocator),
+            .cookie_jar = storage.CookieJar.init(allocator),
+        };
+    }
+
+    pub fn deinit(self: *Session) void {
+        if (self.page != null) {
+            self.removePage();
+        }
+        self.arena.deinit();
+        self.cookie_jar.deinit();
+        self.storage_shed.deinit();
+        self.executor.deinit();
+    }
+
+    // NOTE: the caller is not the owner of the returned value,
+    // the pointer on Page is just returned as a convenience
+    pub fn createPage(self: *Session) !*Page {
+        std.debug.assert(self.page == null);
+
+        // Start netsurf memory arena.
+        // We need to init this early as JS event handlers may be registered through Runtime.evaluate before the first html doc is loaded
+        try parser.init();
+
+        const page_arena = &self.browser.page_arena;
+        _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
+
+        self.page = @as(Page, undefined);
+        const page = &self.page.?;
+        try Page.init(page, page_arena.allocator(), self);
+
+        // start JS env
+        log.debug("start new js scope", .{});
+        // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
+        self.browser.notification.dispatch(.page_created, page);
+
+        return page;
+    }
+
+    pub fn removePage(self: *Session) void {
+        // Inform CDP the page is going to be removed, allowing other worlds to remove themselves before the main one
+        self.browser.notification.dispatch(.page_remove, .{});
+
+        std.debug.assert(self.page != null);
+        // Reset all existing callbacks.
+        self.browser.app.loop.reset();
+        self.executor.endScope();
+        self.page = null;
+
+        // clear netsurf memory arena.
+        parser.deinit();
+    }
+
+    pub fn currentPage(self: *Session) ?*Page {
+        return &(self.page orelse return null);
+    }
+
+    pub fn pageNavigate(self: *Session, url_string: []const u8) !void {
+        // currently, this is only called from the page, so let's hope
+        // it isn't null!
+        std.debug.assert(self.page != null);
+
+        // can't use the page arena, because we're about to reset it
+        // and don't want to use the session's arena, because that'll start to
+        // look like a leak if we navigate from page to page a lot.
+        var buf: [2048]u8 = undefined;
+        var fba = std.heap.FixedBufferAllocator.init(&buf);
+        const url = try self.page.?.url.resolve(fba.allocator(), url_string);
+
+        self.removePage();
+        var page = try self.createPage();
+        return page.navigate(url, .{
+            .reason = .anchor,
+        });
+    }
+};

src/browser/storage/cookie.zig

@@ -0,0 +1,906 @@
+const std = @import("std");
+const Uri = std.Uri;
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const http = @import("../../http/client.zig");
+const DateTime = @import("../../datetime.zig").DateTime;
+const public_suffix_list = @import("../../data/public_suffix_list.zig").lookup;
+
+const log = std.log.scoped(.cookie);
+
+pub const LookupOpts = struct {
+    request_time: ?i64 = null,
+    origin_uri: ?*const Uri = null,
+    navigation: bool = true,
+};
+
+pub const Jar = struct {
+    allocator: Allocator,
+    cookies: std.ArrayListUnmanaged(Cookie),
+
+    pub fn init(allocator: Allocator) Jar {
+        return .{
+            .cookies = .{},
+            .allocator = allocator,
+        };
+    }
+
+    pub fn deinit(self: *Jar) void {
+        for (self.cookies.items) |c| {
+            c.deinit();
+        }
+        self.cookies.deinit(self.allocator);
+    }
+
+    pub fn add(
+        self: *Jar,
+        cookie: Cookie,
+        request_time: i64,
+    ) !void {
+        const is_expired = isCookieExpired(&cookie, request_time);
+        defer if (is_expired) {
+            cookie.deinit();
+        };
+
+        for (self.cookies.items, 0..) |*c, i| {
+            if (areCookiesEqual(&cookie, c)) {
+                c.deinit();
+                if (is_expired) {
+                    _ = self.cookies.swapRemove(i);
+                } else {
+                    self.cookies.items[i] = cookie;
+                }
+                return;
+            }
+        }
+
+        if (!is_expired) {
+            try self.cookies.append(self.allocator, cookie);
+        }
+    }
+
+    pub fn forRequest(self: *Jar, target_uri: *const Uri, writer: anytype, opts: LookupOpts) !void {
+        const target_path = target_uri.path.percent_encoded;
+        const target_host = (target_uri.host orelse return error.InvalidURI).percent_encoded;
+
+        const same_site = try areSameSite(opts.origin_uri, target_host);
+        const is_secure = std.mem.eql(u8, target_uri.scheme, "https");
+
+        var i: usize = 0;
+        var cookies = self.cookies.items;
+        const navigation = opts.navigation;
+        const request_time = opts.request_time orelse std.time.timestamp();
+
+        var first = true;
+        while (i < cookies.len) {
+            const cookie = &cookies[i];
+
+            if (isCookieExpired(cookie, request_time)) {
+                cookie.deinit();
+                _ = self.cookies.swapRemove(i);
+                // don't increment i !
+                continue;
+            }
+            i += 1;
+
+            if (is_secure == false and cookie.secure) {
+                // secure cookie can only be sent over HTTPs
+                continue;
+            }
+
+            if (same_site == false) {
+                // If we aren't on the "same site" (matching 2nd level domain
+                // taking into account public suffix list), then the cookie
+                // can only be sent if cookie.same_site == .none, or if
+                // we're navigating to (as opposed to, say, loading an image)
+                // and cookie.same_site == .lax
+                switch (cookie.same_site) {
+                    .strict => continue,
+                    .lax => if (navigation == false) continue,
+                    .none => {},
+                }
+            }
+
+            {
+                const domain = cookie.domain;
+                if (domain[0] == '.') {
+                    // When a Set-Cookie header has a Domain attribute
+                    // Then we will _always_ prefix it with a dot, extending its
+                    // availability to all subdomains (yes, setting the Domain
+                    // attributes EXPANDS the domains which the cookie will be
+                    // sent to, to always include all subdomains).
+                    if (std.mem.eql(u8, target_host, domain[1..]) == false and std.mem.endsWith(u8, target_host, domain) == false) {
+                        continue;
+                    }
+                } else if (std.mem.eql(u8, target_host, domain) == false) {
+                    // When the Domain attribute isn't specific, then the cookie
+                    // is only sent on an exact match.
+                    continue;
+                }
+            }
+
+            {
+                const path = cookie.path;
+                if (path[path.len - 1] == '/') {
+                    // If our cookie has a trailing slash, we can only match is
+                    // the target path is a perfix. I.e., if our path is
+                    // /doc/  we can only match /doc/*
+                    if (std.mem.startsWith(u8, target_path, path) == false) {
+                        continue;
+                    }
+                } else {
+                    // Our cookie path is something like /hello
+                    if (std.mem.startsWith(u8, target_path, path) == false) {
+                        // The target path has to either be /hello (it isn't)
+                        continue;
+                    } else if (target_path.len < path.len or (target_path.len > path.len and target_path[path.len] != '/')) {
+                        // Or it has to be something like /hello/* (it isn't)
+                        // it isn't!
+                        continue;
+                    }
+                }
+            }
+            // we have a match!
+            if (first) {
+                first = false;
+            } else {
+                try writer.writeAll("; ");
+            }
+            try writeCookie(cookie, writer);
+        }
+    }
+
+    pub fn populateFromResponse(self: *Jar, uri: *const Uri, header: *const http.ResponseHeader) !void {
+        const now = std.time.timestamp();
+        var it = header.iterate("set-cookie");
+        while (it.next()) |set_cookie| {
+            const c = Cookie.parse(self.allocator, uri, set_cookie) catch |err| {
+                log.warn("Couldn't parse cookie '{s}': {}\n", .{ set_cookie, err });
+                continue;
+            };
+            try self.add(c, now);
+        }
+    }
+
+    fn writeCookie(cookie: *const Cookie, writer: anytype) !void {
+        if (cookie.name.len > 0) {
+            try writer.writeAll(cookie.name);
+            try writer.writeByte('=');
+        }
+        if (cookie.value.len > 0) {
+            try writer.writeAll(cookie.value);
+        }
+    }
+};
+
+pub const CookieList = struct {
+    _cookies: std.ArrayListUnmanaged(*const Cookie) = .{},
+
+    pub fn deinit(self: *CookieList, allocator: Allocator) void {
+        self._cookies.deinit(allocator);
+    }
+
+    pub fn cookies(self: *const CookieList) []*const Cookie {
+        return self._cookies.items;
+    }
+
+    pub fn len(self: *const CookieList) usize {
+        return self._cookies.items.len;
+    }
+
+    pub fn write(self: *const CookieList, writer: anytype) !void {
+        const all = self._cookies.items;
+        if (all.len == 0) {
+            return;
+        }
+        try writeCookie(all[0], writer);
+        for (all[1..]) |cookie| {
+            try writer.writeAll("; ");
+            try writeCookie(cookie, writer);
+        }
+    }
+
+    fn writeCookie(cookie: *const Cookie, writer: anytype) !void {
+        if (cookie.name.len > 0) {
+            try writer.writeAll(cookie.name);
+            try writer.writeByte('=');
+        }
+        if (cookie.value.len > 0) {
+            try writer.writeAll(cookie.value);
+        }
+    }
+};
+
+fn isCookieExpired(cookie: *const Cookie, now: i64) bool {
+    const ce = cookie.expires orelse return false;
+    return ce <= now;
+}
+
+fn areCookiesEqual(a: *const Cookie, b: *const Cookie) bool {
+    if (std.mem.eql(u8, a.name, b.name) == false) {
+        return false;
+    }
+    if (std.mem.eql(u8, a.domain, b.domain) == false) {
+        return false;
+    }
+    if (std.mem.eql(u8, a.path, b.path) == false) {
+        return false;
+    }
+    return true;
+}
+
+fn areSameSite(origin_uri_: ?*const std.Uri, target_host: []const u8) !bool {
+    const origin_uri = origin_uri_ orelse return true;
+    const origin_host = (origin_uri.host orelse return error.InvalidURI).percent_encoded;
+
+    // common case
+    if (std.mem.eql(u8, target_host, origin_host)) {
+        return true;
+    }
+
+    return std.mem.eql(u8, findSecondLevelDomain(target_host), findSecondLevelDomain(origin_host));
+}
+
+fn findSecondLevelDomain(host: []const u8) []const u8 {
+    var i = std.mem.lastIndexOfScalar(u8, host, '.') orelse return host;
+    while (true) {
+        i = std.mem.lastIndexOfScalar(u8, host[0..i], '.') orelse return host;
+        const strip = i + 1;
+        if (public_suffix_list(host[strip..]) == false) {
+            return host[strip..];
+        }
+    }
+}
+
+pub const Cookie = struct {
+    arena: ArenaAllocator,
+    name: []const u8,
+    value: []const u8,
+    path: []const u8,
+    domain: []const u8,
+    expires: ?i64,
+    secure: bool,
+    http_only: bool,
+    same_site: SameSite,
+
+    const SameSite = enum {
+        strict,
+        lax,
+        none,
+    };
+
+    pub fn deinit(self: *const Cookie) void {
+        self.arena.deinit();
+    }
+
+    // There's https://datatracker.ietf.org/doc/html/rfc6265 but browsers are
+    // far less strict. I only found 2 cases where browsers will reject a cookie:
+    //   - a byte 0...32 and 127..255 anywhere in the cookie (the HTTP header
+    //     parser might take care of this already)
+    //   - any shenanigans with the domain attribute - it has to be the current
+    //     domain or one of higher order, exluding TLD.
+    // Anything else, will turn into a cookie.
+    // Single value? That's a cookie with an emtpy name and a value
+    // Key or Values with characters the RFC says aren't allowed? Allowed! (
+    //   (as long as the characters are 32...126)
+    // Invalid attributes? Ignored.
+    // Invalid attribute values? Ignore.
+    // Duplicate attributes - use the last valid
+    // Value-less attributes with a value? Ignore the value
+    pub fn parse(allocator: Allocator, uri: *const std.Uri, str: []const u8) !Cookie {
+        if (str.len == 0) {
+            // this check is necessary, `std.mem.minMax` asserts len > 0
+            return error.Empty;
+        }
+
+        const host = (uri.host orelse return error.InvalidURI).percent_encoded;
+
+        {
+            const min, const max = std.mem.minMax(u8, str);
+            if (min < 32 or max > 126) {
+                return error.InvalidByteSequence;
+            }
+        }
+
+        const cookie_name, const cookie_value, const rest = parseNameValue(str) catch {
+            return error.InvalidNameValue;
+        };
+
+        var scrap: [8]u8 = undefined;
+
+        var path: ?[]const u8 = null;
+        var domain: ?[]const u8 = null;
+        var secure: ?bool = null;
+        var max_age: ?i64 = null;
+        var http_only: ?bool = null;
+        var expires: ?DateTime = null;
+        var same_site: ?Cookie.SameSite = null;
+
+        var it = std.mem.splitScalar(u8, rest, ';');
+        while (it.next()) |attribute| {
+            const sep = std.mem.indexOfScalarPos(u8, attribute, 0, '=') orelse attribute.len;
+            const key_string = trim(attribute[0..sep]);
+
+            if (key_string.len > 8) {
+                // not valid, ignore
+                continue;
+            }
+
+            // Make sure no one changes our max length without also expanding the size of scrap
+            std.debug.assert(key_string.len <= 8);
+
+            const key = std.meta.stringToEnum(enum {
+                path,
+                domain,
+                secure,
+                @"max-age",
+                expires,
+                httponly,
+                samesite,
+            }, std.ascii.lowerString(&scrap, key_string)) orelse continue;
+
+            var value = if (sep == attribute.len) "" else trim(attribute[sep + 1 ..]);
+            switch (key) {
+                .path => {
+                    // path attribute value either begins with a '/' or we
+                    // ignore it and use the "default-path" algorithm
+                    if (value.len > 0 and value[0] == '/') {
+                        path = value;
+                    }
+                },
+                .domain => {
+                    if (value.len == 0) {
+                        continue;
+                    }
+                    if (value[0] == '.') {
+                        // leading dot is ignored
+                        value = value[1..];
+                    }
+
+                    if (std.mem.indexOfScalarPos(u8, value, 0, '.') == null) {
+                        // can't set a cookie for a TLD
+                        return error.InvalidDomain;
+                    }
+
+                    if (std.mem.endsWith(u8, host, value) == false) {
+                        return error.InvalidDomain;
+                    }
+                    domain = value;
+                },
+                .secure => secure = true,
+                .@"max-age" => max_age = std.fmt.parseInt(i64, value, 10) catch continue,
+                .expires => expires = DateTime.parse(value, .rfc822) catch continue,
+                .httponly => http_only = true,
+                .samesite => {
+                    same_site = std.meta.stringToEnum(Cookie.SameSite, std.ascii.lowerString(&scrap, value)) orelse continue;
+                },
+            }
+        }
+
+        if (same_site == .none and secure == null) {
+            return error.InsecureSameSite;
+        }
+
+        var arena = ArenaAllocator.init(allocator);
+        errdefer arena.deinit();
+        const aa = arena.allocator();
+        const owned_name = try aa.dupe(u8, cookie_name);
+        const owned_value = try aa.dupe(u8, cookie_value);
+        const owned_path = if (path) |p|
+            try aa.dupe(u8, p)
+        else
+            try defaultPath(aa, uri.path.percent_encoded);
+
+        const owned_domain = if (domain) |d| blk: {
+            const s = try aa.alloc(u8, d.len + 1);
+            s[0] = '.';
+            @memcpy(s[1..], d);
+            break :blk s;
+        } else blk: {
+            break :blk try aa.dupe(u8, host);
+        };
+
+        var normalized_expires: ?i64 = null;
+        if (max_age) |ma| {
+            normalized_expires = std.time.timestamp() + ma;
+        } else {
+            // max age takes priority over expires
+            if (expires) |e| {
+                normalized_expires = e.sub(DateTime.now(), .seconds);
+            }
+        }
+
+        return .{
+            .arena = arena,
+            .name = owned_name,
+            .value = owned_value,
+            .path = owned_path,
+            .same_site = same_site orelse .lax,
+            .secure = secure orelse false,
+            .http_only = http_only orelse false,
+            .domain = owned_domain,
+            .expires = normalized_expires,
+        };
+    }
+
+    fn parseNameValue(str: []const u8) !struct { []const u8, []const u8, []const u8 } {
+        const key_value_end = std.mem.indexOfScalarPos(u8, str, 0, ';') orelse str.len;
+        const rest = if (key_value_end == str.len) "" else str[key_value_end + 1 ..];
+
+        const sep = std.mem.indexOfScalarPos(u8, str[0..key_value_end], 0, '=') orelse {
+            const value = trim(str[0..key_value_end]);
+            if (value.len == 0) {
+                return error.Empty;
+            }
+            return .{ "", value, rest };
+        };
+
+        const name = trim(str[0..sep]);
+        const value = trim(str[sep + 1 .. key_value_end]);
+        return .{ name, value, rest };
+    }
+};
+
+fn defaultPath(allocator: Allocator, document_path: []const u8) ![]const u8 {
+    if (document_path.len == 0 or (document_path.len == 1 and document_path[0] == '/')) {
+        return "/";
+    }
+    const last = std.mem.lastIndexOfScalar(u8, document_path[1..], '/') orelse {
+        return "/";
+    };
+    return try allocator.dupe(u8, document_path[0 .. last + 1]);
+}
+
+fn trim(str: []const u8) []const u8 {
+    return std.mem.trim(u8, str, &std.ascii.whitespace);
+}
+
+fn trimLeft(str: []const u8) []const u8 {
+    return std.mem.trimLeft(u8, str, &std.ascii.whitespace);
+}
+
+fn trimRight(str: []const u8) []const u8 {
+    return std.mem.trimLeft(u8, str, &std.ascii.whitespace);
+}
+
+const testing = @import("../../testing.zig");
+test "cookie: findSecondLevelDomain" {
+    const cases = [_]struct { []const u8, []const u8 }{
+        .{ "", "" },
+        .{ "com", "com" },
+        .{ "lightpanda.io", "lightpanda.io" },
+        .{ "lightpanda.io", "test.lightpanda.io" },
+        .{ "lightpanda.io", "first.test.lightpanda.io" },
+        .{ "www.gov.uk", "www.gov.uk" },
+        .{ "stats.gov.uk", "www.stats.gov.uk" },
+        .{ "api.gov.uk", "api.gov.uk" },
+        .{ "dev.api.gov.uk", "dev.api.gov.uk" },
+        .{ "dev.api.gov.uk", "1.dev.api.gov.uk" },
+    };
+    for (cases) |c| {
+        try testing.expectEqual(c.@"0", findSecondLevelDomain(c.@"1"));
+    }
+}
+
+test "Jar: add" {
+    const expectCookies = struct {
+        fn expect(expected: []const struct { []const u8, []const u8 }, jar: Jar) !void {
+            try testing.expectEqual(expected.len, jar.cookies.items.len);
+            LOOP: for (expected) |e| {
+                for (jar.cookies.items) |c| {
+                    if (std.mem.eql(u8, e.@"0", c.name) and std.mem.eql(u8, e.@"1", c.value)) {
+                        continue :LOOP;
+                    }
+                }
+                std.debug.print("Cookie ({s}={s}) not found", .{ e.@"0", e.@"1" });
+                return error.CookieNotFound;
+            }
+        }
+    }.expect;
+
+    const now = std.time.timestamp();
+
+    var jar = Jar.init(testing.allocator);
+    defer jar.deinit();
+    try expectCookies(&.{}, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=9000;Max-Age=0"), now);
+    try expectCookies(&.{}, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=9000"), now);
+    try expectCookies(&.{.{ "over", "9000" }}, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=9000!!"), now);
+    try expectCookies(&.{.{ "over", "9000!!" }}, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "spice=flow"), now);
+    try expectCookies(&.{ .{ "over", "9000!!" }, .{ "spice", "flow" } }, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "spice=flows;Path=/"), now);
+    try expectCookies(&.{ .{ "over", "9000!!" }, .{ "spice", "flows" } }, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=9001;Path=/other"), now);
+    try expectCookies(&.{ .{ "over", "9000!!" }, .{ "spice", "flows" }, .{ "over", "9001" } }, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=9002;Path=/;Domain=lightpanda.io"), now);
+    try expectCookies(&.{ .{ "over", "9000!!" }, .{ "spice", "flows" }, .{ "over", "9001" }, .{ "over", "9002" } }, jar);
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "over=x;Path=/other;Max-Age=-200"), now);
+    try expectCookies(&.{ .{ "over", "9000!!" }, .{ "spice", "flows" }, .{ "over", "9002" } }, jar);
+}
+
+test "Jar: forRequest" {
+    const expectCookies = struct {
+        fn expect(expected: []const u8, jar: *Jar, target_uri: Uri, opts: LookupOpts) !void {
+            var arr: std.ArrayListUnmanaged(u8) = .{};
+            defer arr.deinit(testing.allocator);
+            try jar.forRequest(&target_uri, arr.writer(testing.allocator), opts);
+            try testing.expectEqual(expected, arr.items);
+        }
+    }.expect;
+
+    const now = std.time.timestamp();
+
+    var jar = Jar.init(testing.allocator);
+    defer jar.deinit();
+
+    const test_uri_2 = Uri.parse("http://test.lightpanda.io/") catch unreachable;
+
+    {
+        // test with no cookies
+        try expectCookies("", &jar, test_uri, .{});
+    }
+
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "global1=1"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "global2=2;Max-Age=30;domain=lightpanda.io"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "path1=3;Path=/about"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "path2=4;Path=/docs/"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "secure=5;Secure"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "sitenone=6;SameSite=None;Path=/x/;Secure"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "sitelax=7;SameSite=Lax;Path=/x/"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri, "sitestrict=8;SameSite=Strict;Path=/x/"), now);
+    try jar.add(try Cookie.parse(testing.allocator, &test_uri_2, "domain1=9;domain=test.lightpanda.io"), now);
+
+    // nothing fancy here
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{});
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .origin_uri = &test_uri, .navigation = false });
+
+    // We have a cookie where Domain=lightpanda.io
+    // This should _not_ match xyxlightpanda.io
+    try expectCookies("", &jar, try std.Uri.parse("http://anothersitelightpanda.io/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // matching path without trailing /
+    try expectCookies("global1=1; global2=2; path1=3", &jar, try std.Uri.parse("http://lightpanda.io/about"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // incomplete prefix path
+    try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/abou"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // path doesn't match
+    try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/aboutus"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // path doesn't match cookie directory
+    try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/docs"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // exact directory match
+    try expectCookies("global1=1; global2=2; path2=4", &jar, try std.Uri.parse("http://lightpanda.io/docs/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // sub directory match
+    try expectCookies("global1=1; global2=2; path2=4", &jar, try std.Uri.parse("http://lightpanda.io/docs/more"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // secure
+    try expectCookies("global1=1; global2=2; secure=5", &jar, try std.Uri.parse("https://lightpanda.io/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // navigational cross domain, secure
+    try expectCookies("global1=1; global2=2; secure=5; sitenone=6; sitelax=7", &jar, try std.Uri.parse("https://lightpanda.io/x/"), .{
+        .origin_uri = &(try std.Uri.parse("https://example.com/")),
+    });
+
+    // navigational cross domain, insecure
+    try expectCookies("global1=1; global2=2; sitelax=7", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
+        .origin_uri = &(try std.Uri.parse("https://example.com/")),
+    });
+
+    // non-navigational cross domain, insecure
+    try expectCookies("", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
+        .origin_uri = &(try std.Uri.parse("https://example.com/")),
+        .navigation = false,
+    });
+
+    // non-navigational cross domain, secure
+    try expectCookies("sitenone=6", &jar, try std.Uri.parse("https://lightpanda.io/x/"), .{
+        .origin_uri = &(try std.Uri.parse("https://example.com/")),
+        .navigation = false,
+    });
+
+    // non-navigational same origin
+    try expectCookies("global1=1; global2=2; sitelax=7; sitestrict=8", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
+        .origin_uri = &(try std.Uri.parse("https://lightpanda.io/")),
+        .navigation = false,
+    });
+
+    // exact domain match + suffix
+    try expectCookies("global2=2; domain1=9", &jar, try std.Uri.parse("http://test.lightpanda.io/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // domain suffix match + suffix
+    try expectCookies("global2=2; domain1=9", &jar, try std.Uri.parse("http://1.test.lightpanda.io/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    // non-matching domain
+    try expectCookies("global2=2", &jar, try std.Uri.parse("http://other.lightpanda.io/"), .{
+        .origin_uri = &test_uri,
+    });
+
+    const l = jar.cookies.items.len;
+    try expectCookies("global1=1", &jar, test_uri, .{
+        .request_time = now + 100,
+        .origin_uri = &test_uri,
+    });
+    try testing.expectEqual(l - 1, jar.cookies.items.len);
+
+    // If you add more cases after this point, note that the above test removes
+    // the 'global2' cookie
+}
+
+test "CookieList: write" {
+    var arr: std.ArrayListUnmanaged(u8) = .{};
+    defer arr.deinit(testing.allocator);
+
+    var cookie_list = CookieList{};
+    defer cookie_list.deinit(testing.allocator);
+
+    const c1 = try Cookie.parse(testing.allocator, &test_uri, "cookie_name=cookie_value");
+    defer c1.deinit();
+    {
+        try cookie_list._cookies.append(testing.allocator, &c1);
+        try cookie_list.write(arr.writer(testing.allocator));
+        try testing.expectEqual("cookie_name=cookie_value", arr.items);
+    }
+
+    const c2 = try Cookie.parse(testing.allocator, &test_uri, "x84");
+    defer c2.deinit();
+    {
+        arr.clearRetainingCapacity();
+        try cookie_list._cookies.append(testing.allocator, &c2);
+        try cookie_list.write(arr.writer(testing.allocator));
+        try testing.expectEqual("cookie_name=cookie_value; x84", arr.items);
+    }
+
+    const c3 = try Cookie.parse(testing.allocator, &test_uri, "nope=");
+    defer c3.deinit();
+    {
+        arr.clearRetainingCapacity();
+        try cookie_list._cookies.append(testing.allocator, &c3);
+        try cookie_list.write(arr.writer(testing.allocator));
+        try testing.expectEqual("cookie_name=cookie_value; x84; nope=", arr.items);
+    }
+}
+
+test "Cookie: parse key=value" {
+    try expectError(error.Empty, null, "");
+    try expectError(error.InvalidByteSequence, null, &.{ 'a', 30, '=', 'b' });
+    try expectError(error.InvalidByteSequence, null, &.{ 'a', 127, '=', 'b' });
+    try expectError(error.InvalidByteSequence, null, &.{ 'a', '=', 'b', 20 });
+    try expectError(error.InvalidByteSequence, null, &.{ 'a', '=', 'b', 128 });
+
+    try expectAttribute(.{ .name = "", .value = "a" }, null, "a");
+    try expectAttribute(.{ .name = "", .value = "a" }, null, "a;");
+    try expectAttribute(.{ .name = "", .value = "a b" }, null, "a b");
+    try expectAttribute(.{ .name = "a b", .value = "b" }, null, "a b=b");
+    try expectAttribute(.{ .name = "a,", .value = "b" }, null, "a,=b");
+    try expectAttribute(.{ .name = ":a>", .value = "b>><" }, null, ":a>=b>><");
+
+    try expectAttribute(.{ .name = "abc", .value = "" }, null, "abc=");
+    try expectAttribute(.{ .name = "abc", .value = "" }, null, "abc=;");
+
+    try expectAttribute(.{ .name = "a", .value = "b" }, null, "a=b");
+    try expectAttribute(.{ .name = "a", .value = "b" }, null, "a=b;");
+
+    try expectAttribute(.{ .name = "abc", .value = "fe f" }, null, "abc=  fe f");
+    try expectAttribute(.{ .name = "abc", .value = "fe f" }, null, "abc=  fe f  ");
+    try expectAttribute(.{ .name = "abc", .value = "fe f" }, null, "abc=  fe f;");
+    try expectAttribute(.{ .name = "abc", .value = "fe f" }, null, "abc=  fe f   ;");
+    try expectAttribute(.{ .name = "abc", .value = "\"  fe f\"" }, null, "abc=\"  fe f\"");
+    try expectAttribute(.{ .name = "abc", .value = "\"  fe f   \"" }, null, "abc=\"  fe f   \"");
+    try expectAttribute(.{ .name = "ab4344c", .value = "1ads23" }, null, "  ab4344c=1ads23  ");
+
+    try expectAttribute(.{ .name = "ab4344c", .value = "1ads23" }, null, "  ab4344c  =  1ads23  ;");
+}
+
+test "Cookie: parse path" {
+    try expectAttribute(.{ .path = "/" }, "http://a/", "b");
+    try expectAttribute(.{ .path = "/" }, "http://a/", "b;path");
+    try expectAttribute(.{ .path = "/" }, "http://a/", "b;Path=");
+    try expectAttribute(.{ .path = "/" }, "http://a/", "b;Path=;");
+    try expectAttribute(.{ .path = "/" }, "http://a/", "b; Path=other");
+    try expectAttribute(.{ .path = "/" }, "http://a/23", "b; path=other ");
+
+    try expectAttribute(.{ .path = "/" }, "http://a/abc", "b");
+    try expectAttribute(.{ .path = "/abc" }, "http://a/abc/", "b");
+    try expectAttribute(.{ .path = "/abc" }, "http://a/abc/123", "b");
+    try expectAttribute(.{ .path = "/abc/123" }, "http://a/abc/123/", "b");
+
+    try expectAttribute(.{ .path = "/a" }, "http://a/", "b;Path=/a");
+    try expectAttribute(.{ .path = "/aa" }, "http://a/", "b;path=/aa;");
+    try expectAttribute(.{ .path = "/aabc/" }, "http://a/", "b;  path=  /aabc/ ;");
+
+    try expectAttribute(.{ .path = "/bbb/" }, "http://a/", "b;  path=/a/; path=/bbb/");
+    try expectAttribute(.{ .path = "/cc" }, "http://a/", "b;  path=/a/; path=/bbb/; path = /cc");
+}
+
+test "Cookie: parse secure" {
+    try expectAttribute(.{ .secure = false }, null, "b");
+    try expectAttribute(.{ .secure = false }, null, "b;secured");
+    try expectAttribute(.{ .secure = false }, null, "b;security");
+    try expectAttribute(.{ .secure = false }, null, "b;SecureX");
+    try expectAttribute(.{ .secure = true }, null, "b; Secure");
+    try expectAttribute(.{ .secure = true }, null, "b; Secure  ");
+    try expectAttribute(.{ .secure = true }, null, "b; Secure=on  ");
+    try expectAttribute(.{ .secure = true }, null, "b; Secure=Off  ");
+    try expectAttribute(.{ .secure = true }, null, "b; secure=Off  ");
+    try expectAttribute(.{ .secure = true }, null, "b; seCUre=Off  ");
+}
+
+test "Cookie: parse HttpOnly" {
+    try expectAttribute(.{ .http_only = false }, null, "b");
+    try expectAttribute(.{ .http_only = false }, null, "b;HttpOnly0");
+    try expectAttribute(.{ .http_only = false }, null, "b;H ttpOnly");
+    try expectAttribute(.{ .http_only = true }, null, "b; HttpOnly");
+    try expectAttribute(.{ .http_only = true }, null, "b; Httponly  ");
+    try expectAttribute(.{ .http_only = true }, null, "b; Httponly=on  ");
+    try expectAttribute(.{ .http_only = true }, null, "b; httpOnly=Off  ");
+    try expectAttribute(.{ .http_only = true }, null, "b; httpOnly=Off  ");
+    try expectAttribute(.{ .http_only = true }, null, "b;    HttpOnly=Off  ");
+}
+
+test "Cookie: parse SameSite" {
+    try expectAttribute(.{ .same_site = .lax }, null, "b;samesite");
+    try expectAttribute(.{ .same_site = .lax }, null, "b;samesite=lax");
+    try expectAttribute(.{ .same_site = .lax }, null, "b;  SameSite=Lax  ");
+    try expectAttribute(.{ .same_site = .lax }, null, "b;  SameSite=Other  ");
+    try expectAttribute(.{ .same_site = .lax }, null, "b;  SameSite=Nope  ");
+
+    // SameSite=none is only valid when Secure is set. The whole cookie is
+    // rejected otherwise
+    try expectError(error.InsecureSameSite, null, "b;samesite=none");
+    try expectError(error.InsecureSameSite, null, "b;SameSite=None");
+    try expectAttribute(.{ .same_site = .none }, null, "b;  samesite=none; secure  ");
+    try expectAttribute(.{ .same_site = .none }, null, "b;  SameSite=None  ; SECURE");
+    try expectAttribute(.{ .same_site = .none }, null, "b;Secure;  SameSite=None");
+    try expectAttribute(.{ .same_site = .none }, null, "b; SameSite=None; Secure");
+
+    try expectAttribute(.{ .same_site = .strict }, null, "b;  samesite=Strict  ");
+    try expectAttribute(.{ .same_site = .strict }, null, "b;  SameSite=  STRICT  ");
+    try expectAttribute(.{ .same_site = .strict }, null, "b;  SameSITE=strict;");
+    try expectAttribute(.{ .same_site = .strict }, null, "b; SameSite=Strict");
+
+    try expectAttribute(.{ .same_site = .strict }, null, "b; SameSite=None; SameSite=lax; SameSite=Strict");
+}
+
+test "Cookie: parse max-age" {
+    try expectAttribute(.{ .expires = null }, null, "b;max-age");
+    try expectAttribute(.{ .expires = null }, null, "b;max-age=abc");
+    try expectAttribute(.{ .expires = null }, null, "b;max-age=13.22");
+    try expectAttribute(.{ .expires = null }, null, "b;max-age=13abc");
+
+    try expectAttribute(.{ .expires = std.time.timestamp() + 13 }, null, "b;max-age=13");
+    try expectAttribute(.{ .expires = std.time.timestamp() + -22 }, null, "b;max-age=-22");
+    try expectAttribute(.{ .expires = std.time.timestamp() + 4294967296 }, null, "b;max-age=4294967296");
+    try expectAttribute(.{ .expires = std.time.timestamp() + -4294967296 }, null, "b;Max-Age= -4294967296");
+    try expectAttribute(.{ .expires = std.time.timestamp() + 0 }, null, "b; Max-Age=0");
+    try expectAttribute(.{ .expires = std.time.timestamp() + 500 }, null, "b; Max-Age = 500  ; Max-Age=invalid");
+    try expectAttribute(.{ .expires = std.time.timestamp() + 1000 }, null, "b;max-age=600;max-age=0;max-age = 1000");
+}
+
+test "Cookie: parse expires" {
+    try expectAttribute(.{ .expires = null }, null, "b;expires=");
+    try expectAttribute(.{ .expires = null }, null, "b;expires=abc");
+    try expectAttribute(.{ .expires = null }, null, "b;expires=13.22");
+    try expectAttribute(.{ .expires = null }, null, "b;expires=33");
+
+    try expectAttribute(.{ .expires = 1918798080 - std.time.timestamp() }, null, "b;expires=Wed, 21 Oct 2030 07:28:00 GMT");
+    // max-age has priority over expires
+    try expectAttribute(.{ .expires = std.time.timestamp() + 10 }, null, "b;Max-Age=10; expires=Wed, 21 Oct 2030 07:28:00 GMT");
+}
+
+test "Cookie: parse all" {
+    try expectCookie(.{
+        .name = "user-id",
+        .value = "9000",
+        .path = "/cms",
+        .domain = "lightpanda.io",
+    }, "https://lightpanda.io/cms/users", "user-id=9000");
+
+    try expectCookie(.{
+        .name = "user-id",
+        .value = "9000",
+        .path = "/",
+        .http_only = true,
+        .secure = true,
+        .domain = ".lightpanda.io",
+        .expires = std.time.timestamp() + 30,
+    }, "https://lightpanda.io/cms/users", "user-id=9000; HttpOnly; Max-Age=30; Secure; path=/; Domain=lightpanda.io");
+}
+
+test "Cookie: parse domain" {
+    try expectAttribute(.{ .domain = "lightpanda.io" }, "http://lightpanda.io/", "b");
+    try expectAttribute(.{ .domain = "dev.lightpanda.io" }, "http://dev.lightpanda.io/", "b");
+    try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://lightpanda.io/", "b;domain=lightpanda.io");
+    try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://lightpanda.io/", "b;domain=.lightpanda.io");
+    try expectAttribute(.{ .domain = ".dev.lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=dev.lightpanda.io");
+    try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=lightpanda.io");
+    try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=.lightpanda.io");
+
+    try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=io");
+    try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=.io");
+    try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=other.lightpanda.io");
+    try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=other.lightpanda.com");
+    try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=other.example.com");
+}
+
+const ExpectedCookie = struct {
+    name: []const u8,
+    value: []const u8,
+    path: []const u8,
+    domain: []const u8,
+    expires: ?i64 = null,
+    secure: bool = false,
+    http_only: bool = false,
+    same_site: Cookie.SameSite = .lax,
+};
+
+fn expectCookie(expected: ExpectedCookie, url: []const u8, set_cookie: []const u8) !void {
+    const uri = try Uri.parse(url);
+    var cookie = try Cookie.parse(testing.allocator, &uri, set_cookie);
+    defer cookie.deinit();
+
+    try testing.expectEqual(expected.name, cookie.name);
+    try testing.expectEqual(expected.value, cookie.value);
+    try testing.expectEqual(expected.secure, cookie.secure);
+    try testing.expectEqual(expected.http_only, cookie.http_only);
+    try testing.expectEqual(expected.same_site, cookie.same_site);
+    try testing.expectEqual(expected.path, cookie.path);
+    try testing.expectEqual(expected.domain, cookie.domain);
+
+    try testing.expectDelta(expected.expires, cookie.expires, 2);
+}
+
+fn expectAttribute(expected: anytype, url: ?[]const u8, set_cookie: []const u8) !void {
+    const uri = if (url) |u| try Uri.parse(u) else test_uri;
+    var cookie = try Cookie.parse(testing.allocator, &uri, set_cookie);
+    defer cookie.deinit();
+
+    inline for (@typeInfo(@TypeOf(expected)).@"struct".fields) |f| {
+        if (comptime std.mem.eql(u8, f.name, "expires")) {
+            try testing.expectDelta(expected.expires, cookie.expires, 1);
+        } else {
+            try testing.expectEqual(@field(expected, f.name), @field(cookie, f.name));
+        }
+    }
+}
+
+fn expectError(expected: anyerror, url: ?[]const u8, set_cookie: []const u8) !void {
+    const uri = if (url) |u| try Uri.parse(u) else test_uri;
+    try testing.expectError(expected, Cookie.parse(testing.allocator, &uri, set_cookie));
+}
+
+const test_uri = Uri.parse("http://lightpanda.io/") catch unreachable;

src/browser/storage/storage.zig

@@ -18,13 +18,14 @@
 
 const std = @import("std");
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-const DOMError = @import("netsurf").DOMError;
+const DOMError = @import("../netsurf.zig").DOMError;
 
 const log = std.log.scoped(.storage);
 
+pub const cookie = @import("cookie.zig");
+pub const Cookie = cookie.Cookie;
+pub const CookieJar = cookie.Jar;
+
 pub const Interfaces = .{
     Bottle,
 };
@@ -99,7 +100,6 @@ pub const Bucket = struct {
 
 // https://html.spec.whatwg.org/multipage/webstorage.html#the-storage-interface
 pub const Bottle = struct {
-    pub const mem_guarantied = true;
     const Map = std.StringHashMapUnmanaged([]const u8);
 
     // allocator is stored. we don't use the JS env allocator b/c the storage
@@ -212,27 +212,27 @@ pub const Bottle = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var storage = [_]Case{
-        .{ .src = "localStorage.length", .ex = "0" },
+const testing = @import("../../testing.zig");
+test "Browser.Storage.LocalStorage" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "localStorage.setItem('foo', 'bar')", .ex = "undefined" },
-        .{ .src = "localStorage.length", .ex = "1" },
-        .{ .src = "localStorage.getItem('foo')", .ex = "bar" },
-        .{ .src = "localStorage.removeItem('foo')", .ex = "undefined" },
-        .{ .src = "localStorage.length", .ex = "0" },
+    try runner.testCases(&.{
+        .{ "localStorage.length", "0" },
 
-        // .{ .src = "localStorage['foo'] = 'bar'", .ex = "undefined" },
-        // .{ .src = "localStorage['foo']", .ex = "bar" },
-        // .{ .src = "localStorage.length", .ex = "1" },
+        .{ "localStorage.setItem('foo', 'bar')", "undefined" },
+        .{ "localStorage.length", "1" },
+        .{ "localStorage.getItem('foo')", "bar" },
+        .{ "localStorage.removeItem('foo')", "undefined" },
+        .{ "localStorage.length", "0" },
 
-        .{ .src = "localStorage.clear()", .ex = "undefined" },
-        .{ .src = "localStorage.length", .ex = "0" },
-    };
-    try checkCases(js_env, &storage);
+        // .{ "localStorage['foo'] = 'bar'", "undefined" },
+        // .{ "localStorage['foo']", "bar" },
+        // .{ "localStorage.length", "1" },
+
+        .{ "localStorage.clear()", "undefined" },
+        .{ "localStorage.length", "0" },
+    }, .{});
 }
 
 test "storage bottle" {

src/browser/url/query.zig

@@ -18,8 +18,8 @@
 
 const std = @import("std");
 
-const Reader = @import("../str/parser.zig").Reader;
-const asUint = @import("../str/parser.zig").asUint;
+const Reader = @import("../../str/parser.zig").Reader;
+const asUint = @import("../../str/parser.zig").asUint;
 
 // Values is a map with string key of string values.
 pub const Values = struct {
@@ -420,7 +420,7 @@ fn testParseQuery(expected: anytype, query: []const u8) !void {
     defer values.deinit();
 
     var count: usize = 0;
-    inline for (@typeInfo(@TypeOf(expected)).Struct.fields) |f| {
+    inline for (@typeInfo(@TypeOf(expected)).@"struct".fields) |f| {
         const actual = values.get(f.name);
         const expect = @field(expected, f.name);
         try testing.expectEqual(expect.len, actual.len);

src/browser/url/url.zig

@@ -0,0 +1,279 @@
+// Copyright (C) 2023-2024  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 SessionState = @import("../env.zig").SessionState;
+
+const query = @import("query.zig");
+
+pub const Interfaces = .{
+    URL,
+    URLSearchParams,
+};
+
+// https://url.spec.whatwg.org/#url
+//
+// TODO we could avoid many of these getter string allocatoration in two differents
+// way:
+//
+// 1. We can eventually get the slice of scheme *with* the following char in
+// the underlying string. But I don't know if it's possible and how to do that.
+// I mean, if the rawuri contains `https://foo.bar`, uri.scheme is a slice
+// containing only `https`. I want `https:` so, in theory, I don't need to
+// allocatorate data, I should be able to retrieve the scheme + the following `:`
+// from rawuri.
+//
+// 2. The other way would bu to copy the `std.Uri` code to ahve a dedicated
+// parser including the characters we want for the web API.
+pub const URL = struct {
+    uri: std.Uri,
+    search_params: URLSearchParams,
+
+    pub fn constructor(
+        url: []const u8,
+        base: ?[]const u8,
+        state: *SessionState,
+    ) !URL {
+        const arena = state.arena;
+        const raw = try std.mem.concat(arena, u8, &[_][]const u8{ url, base orelse "" });
+
+        const uri = std.Uri.parse(raw) catch return error.TypeError;
+        return init(arena, uri);
+    }
+
+    pub fn init(arena: std.mem.Allocator, uri: std.Uri) !URL {
+        return .{
+            .uri = uri,
+            .search_params = try URLSearchParams.init(
+                arena,
+                uriComponentNullStr(uri.query),
+            ),
+        };
+    }
+
+    pub fn get_origin(self: *URL, state: *SessionState) ![]const u8 {
+        var buf = std.ArrayList(u8).init(state.arena);
+        try self.uri.writeToStream(.{
+            .scheme = true,
+            .authentication = false,
+            .authority = true,
+            .path = false,
+            .query = false,
+            .fragment = false,
+        }, buf.writer());
+        return buf.items;
+    }
+
+    // get_href returns the URL by writing all its components.
+    // The query is replaced by a dump of search params.
+    //
+    pub fn get_href(self: *URL, state: *SessionState) ![]const u8 {
+        const arena = state.arena;
+        // retrieve the query search from search_params.
+        const cur = self.uri.query;
+        defer self.uri.query = cur;
+        var q = std.ArrayList(u8).init(arena);
+        try self.search_params.values.encode(q.writer());
+        self.uri.query = .{ .percent_encoded = q.items };
+
+        return try self.toString(arena);
+    }
+
+    // format the url with all its components.
+    pub fn toString(self: *URL, arena: std.mem.Allocator) ![]const u8 {
+        var buf = std.ArrayList(u8).init(arena);
+
+        try self.uri.writeToStream(.{
+            .scheme = true,
+            .authentication = true,
+            .authority = true,
+            .path = uriComponentNullStr(self.uri.path).len > 0,
+            .query = uriComponentNullStr(self.uri.query).len > 0,
+            .fragment = uriComponentNullStr(self.uri.fragment).len > 0,
+        }, buf.writer());
+        return buf.items;
+    }
+
+    pub fn get_protocol(self: *URL, state: *SessionState) ![]const u8 {
+        return try std.mem.concat(state.arena, u8, &[_][]const u8{ self.uri.scheme, ":" });
+    }
+
+    pub fn get_username(self: *URL) []const u8 {
+        return uriComponentNullStr(self.uri.user);
+    }
+
+    pub fn get_password(self: *URL) []const u8 {
+        return uriComponentNullStr(self.uri.password);
+    }
+
+    pub fn get_host(self: *URL, state: *SessionState) ![]const u8 {
+        var buf = std.ArrayList(u8).init(state.arena);
+
+        try self.uri.writeToStream(.{
+            .scheme = false,
+            .authentication = false,
+            .authority = true,
+            .path = false,
+            .query = false,
+            .fragment = false,
+        }, buf.writer());
+        return buf.items;
+    }
+
+    pub fn get_hostname(self: *URL) []const u8 {
+        return uriComponentNullStr(self.uri.host);
+    }
+
+    pub fn get_port(self: *URL, state: *SessionState) ![]const u8 {
+        const arena = state.arena;
+        if (self.uri.port == null) return try arena.dupe(u8, "");
+
+        var buf = std.ArrayList(u8).init(arena);
+        try std.fmt.formatInt(self.uri.port.?, 10, .lower, .{}, buf.writer());
+        return buf.items;
+    }
+
+    pub fn get_pathname(self: *URL) []const u8 {
+        if (uriComponentStr(self.uri.path).len == 0) return "/";
+        return uriComponentStr(self.uri.path);
+    }
+
+    pub fn get_search(self: *URL, state: *SessionState) ![]const u8 {
+        const arena = state.arena;
+        if (self.search_params.get_size() == 0) return try arena.dupe(u8, "");
+
+        var buf: std.ArrayListUnmanaged(u8) = .{};
+
+        try buf.append(arena, '?');
+        try self.search_params.values.encode(buf.writer(arena));
+        return buf.items;
+    }
+
+    pub fn get_hash(self: *URL, state: *SessionState) ![]const u8 {
+        const arena = state.arena;
+        if (self.uri.fragment == null) return try arena.dupe(u8, "");
+
+        return try std.mem.concat(arena, u8, &[_][]const u8{ "#", uriComponentNullStr(self.uri.fragment) });
+    }
+
+    pub fn get_searchParams(self: *URL) *URLSearchParams {
+        return &self.search_params;
+    }
+
+    pub fn _toJSON(self: *URL, state: *SessionState) ![]const u8 {
+        return try self.get_href(state);
+    }
+};
+
+// uriComponentNullStr converts an optional std.Uri.Component to string value.
+// The string value can be undecoded.
+fn uriComponentNullStr(c: ?std.Uri.Component) []const u8 {
+    if (c == null) return "";
+
+    return uriComponentStr(c.?);
+}
+
+fn uriComponentStr(c: std.Uri.Component) []const u8 {
+    return switch (c) {
+        .raw => |v| v,
+        .percent_encoded => |v| v,
+    };
+}
+
+// https://url.spec.whatwg.org/#interface-urlsearchparams
+// TODO array like
+pub const URLSearchParams = struct {
+    values: query.Values,
+
+    pub fn constructor(qs: ?[]const u8, state: *SessionState) !URLSearchParams {
+        return init(state.arena, qs);
+    }
+
+    pub fn init(arena: std.mem.Allocator, qs: ?[]const u8) !URLSearchParams {
+        return .{
+            .values = try query.parseQuery(arena, qs orelse ""),
+        };
+    }
+
+    pub fn get_size(self: *URLSearchParams) u32 {
+        return @intCast(self.values.count());
+    }
+
+    pub fn _append(self: *URLSearchParams, name: []const u8, value: []const u8) !void {
+        try self.values.append(name, value);
+    }
+
+    pub fn _delete(self: *URLSearchParams, name: []const u8, value: ?[]const u8) !void {
+        if (value) |v| return self.values.deleteValue(name, v);
+
+        self.values.delete(name);
+    }
+
+    pub fn _get(self: *URLSearchParams, name: []const u8) ?[]const u8 {
+        return self.values.first(name);
+    }
+
+    // TODO return generates an error: caught unexpected error 'TypeLookup'
+    // pub fn _getAll(self: *URLSearchParams, name: []const u8) [][]const u8 {
+    //     try self.values.get(name);
+    // }
+
+    // TODO
+    pub fn _sort(_: *URLSearchParams) void {}
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.URL" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var url = new URL('https://foo.bar/path?query#fragment')", "undefined" },
+        .{ "url.origin", "https://foo.bar" },
+        .{ "url.href", "https://foo.bar/path?query#fragment" },
+        .{ "url.protocol", "https:" },
+        .{ "url.username", "" },
+        .{ "url.password", "" },
+        .{ "url.host", "foo.bar" },
+        .{ "url.hostname", "foo.bar" },
+        .{ "url.port", "" },
+        .{ "url.pathname", "/path" },
+        .{ "url.search", "?query" },
+        .{ "url.hash", "#fragment" },
+        .{ "url.searchParams.get('query')", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var url = new URL('https://foo.bar/path?a=~&b=%7E#fragment')", "undefined" },
+        .{ "url.searchParams.get('a')", "~" },
+        .{ "url.searchParams.get('b')", "~" },
+        .{ "url.searchParams.append('c', 'foo')", "undefined" },
+        .{ "url.searchParams.get('c')", "foo" },
+        .{ "url.searchParams.size", "3" },
+
+        // search is dynamic
+        .{ "url.search", "?a=%7E&b=%7E&c=foo" },
+        // href is dynamic
+        .{ "url.href", "https://foo.bar/path?a=%7E&b=%7E&c=foo#fragment" },
+
+        .{ "url.searchParams.delete('c', 'foo')", "undefined" },
+        .{ "url.searchParams.get('c')", "" },
+        .{ "url.searchParams.delete('a')", "undefined" },
+        .{ "url.searchParams.get('a')", "" },
+    }, .{});
+}

src/browser/xhr/event_target.zig

@@ -18,19 +18,19 @@
 
 const std = @import("std");
 
-const jsruntime = @import("jsruntime");
-const Callback = jsruntime.Callback;
+const Env = @import("../env.zig").Env;
+const Callback = Env.Callback;
 
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventHandler = @import("../events/event.zig").EventHandler;
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
+const SessionState = @import("../env.zig").SessionState;
 
 const log = std.log.scoped(.xhr);
 
 pub const XMLHttpRequestEventTarget = struct {
     pub const prototype = *EventTarget;
-    pub const mem_guarantied = true;
 
     // Extend libdom event target for pure zig struct.
     base: parser.EventTargetTBase = parser.EventTargetTBase{},
@@ -48,25 +48,25 @@ pub const XMLHttpRequestEventTarget = struct {
         typ: []const u8,
         cbk: Callback,
     ) !void {
+        const target = @as(*parser.EventTarget, @ptrCast(self));
+        const eh = try EventHandler.init(alloc, try cbk.withThis(target));
         try parser.eventTargetAddEventListener(
-            @as(*parser.EventTarget, @ptrCast(self)),
-            alloc,
+            target,
             typ,
-            EventHandler,
-            .{ .cbk = cbk },
+            &eh.node,
             false,
         );
     }
-    fn unregister(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, typ: []const u8, cbk: Callback) !void {
+    fn unregister(self: *XMLHttpRequestEventTarget, typ: []const u8, cbk_id: usize) !void {
         const et = @as(*parser.EventTarget, @ptrCast(self));
         // check if event target has already this listener
-        const lst = try parser.eventTargetHasListener(et, typ, false, cbk.id());
+        const lst = try parser.eventTargetHasListener(et, typ, false, cbk_id);
         if (lst == null) {
             return;
         }
 
         // remove listener
-        try parser.eventTargetRemoveEventListener(et, alloc, typ, lst.?, false);
+        try parser.eventTargetRemoveEventListener(et, typ, lst.?, false);
     }
 
     pub fn get_onloadstart(self: *XMLHttpRequestEventTarget) ?Callback {
@@ -88,39 +88,40 @@ pub const XMLHttpRequestEventTarget = struct {
         return self.onloadend_cbk;
     }
 
-    pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.onloadstart_cbk) |cbk| try self.unregister(alloc, "loadstart", cbk);
-        try self.register(alloc, "loadstart", handler);
+    pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.onloadstart_cbk) |cbk| try self.unregister("loadstart", cbk.id);
+        try self.register(state.arena, "loadstart", handler);
         self.onloadstart_cbk = handler;
     }
-    pub fn set_onprogress(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.onprogress_cbk) |cbk| try self.unregister(alloc, "progress", cbk);
-        try self.register(alloc, "progress", handler);
+    pub fn set_onprogress(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.onprogress_cbk) |cbk| try self.unregister("progress", cbk.id);
+        try self.register(state.arena, "progress", handler);
         self.onprogress_cbk = handler;
     }
-    pub fn set_onabort(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.onabort_cbk) |cbk| try self.unregister(alloc, "abort", cbk);
-        try self.register(alloc, "abort", handler);
+    pub fn set_onabort(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.onabort_cbk) |cbk| try self.unregister("abort", cbk.id);
+        try self.register(state.arena, "abort", handler);
         self.onabort_cbk = handler;
     }
-    pub fn set_onload(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.onload_cbk) |cbk| try self.unregister(alloc, "load", cbk);
-        try self.register(alloc, "load", handler);
+    pub fn set_onload(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.onload_cbk) |cbk| try self.unregister("load", cbk.id);
+        try self.register(state.arena, "load", handler);
         self.onload_cbk = handler;
     }
-    pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.ontimeout_cbk) |cbk| try self.unregister(alloc, "timeout", cbk);
-        try self.register(alloc, "timeout", handler);
+    pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.ontimeout_cbk) |cbk| try self.unregister("timeout", cbk.id);
+        try self.register(state.arena, "timeout", handler);
         self.ontimeout_cbk = handler;
     }
-    pub fn set_onloadend(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator, handler: Callback) !void {
-        if (self.onloadend_cbk) |cbk| try self.unregister(alloc, "loadend", cbk);
-        try self.register(alloc, "loadend", handler);
+    pub fn set_onloadend(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+        if (self.onloadend_cbk) |cbk| try self.unregister("loadend", cbk.id);
+        try self.register(state.arena, "loadend", handler);
         self.onloadend_cbk = handler;
     }
 
-    pub fn deinit(self: *XMLHttpRequestEventTarget, alloc: std.mem.Allocator) void {
-        parser.eventTargetRemoveAllEventListeners(@as(*parser.EventTarget, @ptrCast(self)), alloc) catch |e| {
+    pub fn deinit(self: *XMLHttpRequestEventTarget, state: *SessionState) void {
+        const arena = state.arena;
+        parser.eventTargetRemoveAllEventListeners(@as(*parser.EventTarget, @ptrCast(self)), arena) catch |e| {
             log.err("remove all listeners: {any}", .{e});
         };
     }

src/browser/xhr/form_data.zig

@@ -0,0 +1,247 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Allocator = std.mem.Allocator;
+
+const iterator = @import("../iterator/iterator.zig");
+const SessionState = @import("../env.zig").SessionState;
+
+pub const Interfaces = .{
+    FormData,
+    KeyIterable,
+    ValueIterable,
+    EntryIterable,
+};
+
+// We store the values in an ArrayList rather than a an
+// StringArrayHashMap([]const u8)  because of the way the iterators (i.e., keys(),
+// values() and entries()) work. The FormData can contain duplicate keys, and
+// each iteration yields 1 key=>value pair. So, given:
+//
+//  let f = new FormData();
+//  f.append('a', '1');
+//  f.append('a', '2');
+//
+// Then we'd expect f.keys(), f.values() and f.entries() to yield 2 results:
+//  ['a', '1']
+//  ['a', '2']
+//
+// This is much easier to do with an ArrayList than a HashMap, especially given
+// that the FormData could be mutated while iterating.
+// The downside is that most of the normal operations are O(N).
+
+// https://xhr.spec.whatwg.org/#interface-formdata
+pub const FormData = struct {
+    entries: std.ArrayListUnmanaged(Entry),
+
+    pub fn constructor() FormData {
+        return .{
+            .entries = .empty,
+        };
+    }
+
+    pub fn _get(self: *const FormData, key: []const u8) ?[]const u8 {
+        const result = self.find(key) orelse return null;
+        return result.entry.value;
+    }
+
+    pub fn _getAll(self: *const FormData, key: []const u8, state: *SessionState) ![][]const u8 {
+        const arena = state.call_arena;
+        var arr: std.ArrayListUnmanaged([]const u8) = .empty;
+        for (self.entries.items) |entry| {
+            if (std.mem.eql(u8, key, entry.key)) {
+                try arr.append(arena, entry.value);
+            }
+        }
+        return arr.items;
+    }
+
+    pub fn _has(self: *const FormData, key: []const u8) bool {
+        return self.find(key) != null;
+    }
+
+    // TODO: value should be a string or blog
+    // TODO: another optional parameter for the filename
+    pub fn _set(self: *FormData, key: []const u8, value: []const u8, state: *SessionState) !void {
+        self._delete(key);
+        return self._append(key, value, state);
+    }
+
+    // TODO: value should be a string or blog
+    // TODO: another optional parameter for the filename
+    pub fn _append(self: *FormData, key: []const u8, value: []const u8, state: *SessionState) !void {
+        const arena = state.arena;
+        return self.entries.append(arena, .{ .key = try arena.dupe(u8, key), .value = try arena.dupe(u8, value) });
+    }
+
+    pub fn _delete(self: *FormData, key: []const u8) void {
+        var i: usize = 0;
+        while (i < self.entries.items.len) {
+            const entry = self.entries.items[i];
+            if (std.mem.eql(u8, key, entry.key)) {
+                _ = self.entries.swapRemove(i);
+            } else {
+                i += 1;
+            }
+        }
+    }
+
+    pub fn _keys(self: *const FormData) KeyIterable {
+        return .{ .inner = .{ .entries = &self.entries } };
+    }
+
+    pub fn _values(self: *const FormData) ValueIterable {
+        return .{ .inner = .{ .entries = &self.entries } };
+    }
+
+    pub fn _entries(self: *const FormData) EntryIterable {
+        return .{ .inner = .{ .entries = &self.entries } };
+    }
+
+    pub fn _symbol_iterator(self: *const FormData) EntryIterable {
+        return self._entries();
+    }
+
+    const FindResult = struct {
+        index: usize,
+        entry: Entry,
+    };
+
+    fn find(self: *const FormData, key: []const u8) ?FindResult {
+        for (self.entries.items, 0..) |entry, i| {
+            if (std.mem.eql(u8, key, entry.key)) {
+                return .{ .index = i, .entry = entry };
+            }
+        }
+        return null;
+    }
+};
+
+const Entry = struct {
+    key: []const u8,
+    value: []const u8,
+};
+
+const KeyIterable = iterator.Iterable(KeyIterator, "FormDataKeyIterator");
+const ValueIterable = iterator.Iterable(ValueIterator, "FormDataValueIterator");
+const EntryIterable = iterator.Iterable(EntryIterator, "FormDataEntryIterator");
+
+const KeyIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(Entry),
+
+    pub fn _next(self: *KeyIterator) ?[]const u8 {
+        const index = self.index;
+        if (index == self.entries.items.len) {
+            return null;
+        }
+        self.index += 1;
+        return self.entries.items[index].key;
+    }
+};
+
+const ValueIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(Entry),
+
+    pub fn _next(self: *ValueIterator) ?[]const u8 {
+        const index = self.index;
+        if (index == self.entries.items.len) {
+            return null;
+        }
+        self.index += 1;
+        return self.entries.items[index].value;
+    }
+};
+
+const EntryIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(Entry),
+
+    pub fn _next(self: *EntryIterator) ?struct { []const u8, []const u8 } {
+        const index = self.index;
+        if (index == self.entries.items.len) {
+            return null;
+        }
+        self.index += 1;
+        const entry = self.entries.items[index];
+        return .{ entry.key, entry.value };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "FormData" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let f = new FormData()", null },
+        .{ "f.get('a')", "null" },
+        .{ "f.has('a')", "false" },
+        .{ "f.getAll('a')", "" },
+        .{ "f.delete('a')", "undefined" },
+
+        .{ "f.set('a', 1)", "undefined" },
+        .{ "f.has('a')", "true" },
+        .{ "f.get('a')", "1" },
+        .{ "f.getAll('a')", "1" },
+
+        .{ "f.append('a', 2)", "undefined" },
+        .{ "f.has('a')", "true" },
+        .{ "f.get('a')", "1" },
+        .{ "f.getAll('a')", "1,2" },
+
+        .{ "f.append('b', '3')", "undefined" },
+        .{ "f.has('a')", "true" },
+        .{ "f.get('a')", "1" },
+        .{ "f.getAll('a')", "1,2" },
+        .{ "f.has('b')", "true" },
+        .{ "f.get('b')", "3" },
+        .{ "f.getAll('b')", "3" },
+
+        .{ "let acc = [];", null },
+        .{ "for (const key of f.keys()) { acc.push(key) }; acc;", "a,a,b" },
+
+        .{ "acc = [];", null },
+        .{ "for (const value of f.values()) { acc.push(value) }; acc;", "1,2,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of f.entries()) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of f) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
+
+        .{ "f.delete('a')", "undefined" },
+        .{ "f.has('a')", "false" },
+        .{ "f.has('b')", "true" },
+
+        .{ "acc = [];", null },
+        .{ "for (const key of f.keys()) { acc.push(key) }; acc;", "b" },
+
+        .{ "acc = [];", null },
+        .{ "for (const value of f.values()) { acc.push(value) }; acc;", "3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of f.entries()) { acc.push(entry) }; acc;", "b,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of f) { acc.push(entry) }; acc;", "b,3" },
+    }, .{});
+}

src/browser/xhr/progress_event.zig

@@ -16,13 +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 jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 const Event = @import("../events/event.zig").Event;
 
 const DOMException = @import("../dom/exceptions.zig").DOMException;
@@ -30,7 +24,6 @@ const DOMException = @import("../dom/exceptions.zig").DOMException;
 pub const ProgressEvent = struct {
     pub const prototype = *Event;
     pub const Exception = DOMException;
-    pub const mem_guarantied = true;
 
     pub const EventInit = struct {
         lengthComputable: bool = false,
@@ -59,32 +52,32 @@ pub const ProgressEvent = struct {
         };
     }
 
-    pub fn get_lengthComputable(self: ProgressEvent) bool {
+    pub fn get_lengthComputable(self: *const ProgressEvent) bool {
         return self.lengthComputable;
     }
 
-    pub fn get_loaded(self: ProgressEvent) u64 {
+    pub fn get_loaded(self: *const ProgressEvent) u64 {
         return self.loaded;
     }
 
-    pub fn get_total(self: ProgressEvent) u64 {
+    pub fn get_total(self: *const ProgressEvent) u64 {
         return self.total;
     }
 };
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var progress_event = [_]Case{
-        .{ .src = "let pevt = new ProgressEvent('foo');", .ex = "undefined" },
-        .{ .src = "pevt.loaded", .ex = "0" },
-        .{ .src = "pevt instanceof ProgressEvent", .ex = "true" },
-        .{ .src = "var nnb = 0; var eevt = null; function ccbk(event) { nnb ++; eevt = event; }", .ex = "undefined" },
-        .{ .src = "document.addEventListener('foo', ccbk)", .ex = "undefined" },
-        .{ .src = "document.dispatchEvent(pevt)", .ex = "true" },
-        .{ .src = "eevt.type", .ex = "foo" },
-        .{ .src = "eevt instanceof ProgressEvent", .ex = "true" },
-    };
-    try checkCases(js_env, &progress_event);
+const testing = @import("../../testing.zig");
+test "Browser.XHR.ProgressEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let pevt = new ProgressEvent('foo');", "undefined" },
+        .{ "pevt.loaded", "0" },
+        .{ "pevt instanceof ProgressEvent", "true" },
+        .{ "var nnb = 0; var eevt = null; function ccbk(event) { nnb ++; eevt = event; }", "undefined" },
+        .{ "document.addEventListener('foo', ccbk)", "undefined" },
+        .{ "document.dispatchEvent(pevt)", "true" },
+        .{ "eevt.type", "foo" },
+        .{ "eevt instanceof ProgressEvent", "true" },
+    }, .{});
 }

src/browser/xmlserializer/xmlserializer.zig

@@ -18,14 +18,10 @@
 //
 const std = @import("std");
 
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const SessionState = @import("../env.zig").SessionState;
 
-const DOMError = @import("netsurf").DOMError;
-
-const parser = @import("netsurf");
-const dump = @import("../browser/dump.zig");
+const dump = @import("../dump.zig");
+const parser = @import("../netsurf.zig");
 
 pub const Interfaces = .{
     XMLSerializer,
@@ -33,39 +29,28 @@ pub const Interfaces = .{
 
 // https://w3c.github.io/DOM-Parsing/#dom-xmlserializer-constructor
 pub const XMLSerializer = struct {
-    pub const mem_guarantied = true;
-
     pub fn constructor() !XMLSerializer {
         return .{};
     }
 
-    pub fn deinit(_: *XMLSerializer, _: std.mem.Allocator) void {}
-
-    pub fn _serializeToString(_: XMLSerializer, alloc: std.mem.Allocator, root: *parser.Node) ![]const u8 {
-        var buf = std.ArrayList(u8).init(alloc);
-        defer buf.deinit();
-
+    pub fn _serializeToString(_: *const XMLSerializer, root: *parser.Node, state: *SessionState) ![]const u8 {
+        var buf = std.ArrayList(u8).init(state.arena);
         if (try parser.nodeType(root) == .document) {
             try dump.writeHTML(@as(*parser.Document, @ptrCast(root)), buf.writer());
         } else {
             try dump.writeNode(root, buf.writer());
         }
-        // TODO express the caller owned the slice.
-        // https://github.com/lightpanda-io/jsruntime-lib/issues/195
-        return try buf.toOwnedSlice();
+        return buf.items;
     }
 };
 
-// Tests
-// -----
+const testing = @import("../../testing.zig");
+test "Browser.XMLSerializer" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var serializer = [_]Case{
-        .{ .src = "const s = new XMLSerializer()", .ex = "undefined" },
-        .{ .src = "s.serializeToString(document.getElementById('para'))", .ex = "<p id=\"para\"> And</p>" },
-    };
-    try checkCases(js_env, &serializer);
+    try runner.testCases(&.{
+        .{ "const s = new XMLSerializer()", "undefined" },
+        .{ "s.serializeToString(document.getElementById('para'))", "<p id=\"para\"> And</p>" },
+    }, .{});
 }

src/cdp/Node.zig

@@ -0,0 +1,499 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const parser = @import("../browser/netsurf.zig");
+
+pub const Id = u32;
+
+const log = std.log.scoped(.cdp_node);
+
+const Node = @This();
+
+id: Id,
+_node: *parser.Node,
+set_child_nodes_event: bool,
+
+// Whenever we send a node to the client, we register it here for future lookup.
+// We maintain a node -> id and id -> node lookup.
+pub const Registry = struct {
+    node_id: u32,
+    allocator: Allocator,
+    arena: std.heap.ArenaAllocator,
+    node_pool: std.heap.MemoryPool(Node),
+    lookup_by_id: std.AutoHashMapUnmanaged(Id, *Node),
+    lookup_by_node: std.HashMapUnmanaged(*parser.Node, *Node, NodeContext, std.hash_map.default_max_load_percentage),
+
+    pub fn init(allocator: Allocator) Registry {
+        return .{
+            .node_id = 0,
+            .lookup_by_id = .{},
+            .lookup_by_node = .{},
+            .allocator = allocator,
+            .arena = std.heap.ArenaAllocator.init(allocator),
+            .node_pool = std.heap.MemoryPool(Node).init(allocator),
+        };
+    }
+
+    pub fn deinit(self: *Registry) void {
+        const allocator = self.allocator;
+        self.lookup_by_id.deinit(allocator);
+        self.lookup_by_node.deinit(allocator);
+        self.node_pool.deinit();
+        self.arena.deinit();
+    }
+
+    pub fn reset(self: *Registry) void {
+        self.lookup_by_id.clearRetainingCapacity();
+        self.lookup_by_node.clearRetainingCapacity();
+        _ = self.arena.reset(.{ .retain_with_limit = 1024 });
+        _ = self.node_pool.reset(.{ .retain_with_limit = 1024 });
+    }
+
+    pub fn register(self: *Registry, n: *parser.Node) !*Node {
+        const node_lookup_gop = try self.lookup_by_node.getOrPut(self.allocator, n);
+        if (node_lookup_gop.found_existing) {
+            return node_lookup_gop.value_ptr.*;
+        }
+
+        // on error, we're probably going to abort the entire browser context
+        // but, just in case, let's try to keep things tidy.
+        errdefer _ = self.lookup_by_node.remove(n);
+
+        const node = try self.node_pool.create();
+        errdefer self.node_pool.destroy(node);
+
+        const id = self.node_id;
+        self.node_id = id + 1;
+
+        node.* = .{
+            ._node = n,
+            .id = id,
+            .set_child_nodes_event = false,
+        };
+
+        node_lookup_gop.value_ptr.* = node;
+        try self.lookup_by_id.putNoClobber(self.allocator, id, node);
+        return node;
+    }
+};
+
+const NodeContext = struct {
+    pub fn hash(_: NodeContext, n: *parser.Node) u64 {
+        return std.hash.Wyhash.hash(0, std.mem.asBytes(&@intFromPtr(n)));
+    }
+
+    pub fn eql(_: NodeContext, a: *parser.Node, b: *parser.Node) bool {
+        return @intFromPtr(a) == @intFromPtr(b);
+    }
+};
+
+// Searches are a 3 step process:
+// 1 - Dom.performSearch
+// 2 - Dom.getSearchResults
+// 3 - Dom.discardSearchResults
+//
+// For a given browser context, we can have multiple active searches. I.e.
+// performSearch could be called multiple times without getSearchResults or
+// discardSearchResults being called. We keep these active searches in the
+// browser context's node_search_list, which is a SearchList. Since we don't
+// expect many active searches (mostly just 1), a list is fine to scan through.
+pub const Search = struct {
+    name: []const u8,
+    node_ids: []const Id,
+
+    pub const List = struct {
+        registry: *Registry,
+        search_id: u16 = 0,
+        arena: std.heap.ArenaAllocator,
+        searches: std.ArrayListUnmanaged(Search) = .{},
+
+        pub fn init(allocator: Allocator, registry: *Registry) List {
+            return .{
+                .registry = registry,
+                .arena = std.heap.ArenaAllocator.init(allocator),
+            };
+        }
+
+        pub fn deinit(self: *List) void {
+            self.arena.deinit();
+        }
+
+        pub fn reset(self: *List) void {
+            self.search_id = 0;
+            self.searches = .{};
+            _ = self.arena.reset(.{ .retain_with_limit = 4096 });
+        }
+
+        pub fn create(self: *List, nodes: []const *parser.Node) !Search {
+            const id = self.search_id;
+            defer self.search_id = id +% 1;
+
+            const arena = self.arena.allocator();
+
+            const name = switch (id) {
+                0 => "0",
+                1 => "1",
+                2 => "2",
+                3 => "3",
+                4 => "4",
+                5 => "5",
+                6 => "6",
+                7 => "7",
+                8 => "8",
+                9 => "9",
+                else => try std.fmt.allocPrint(arena, "{d}", .{id}),
+            };
+
+            var registry = self.registry;
+            const node_ids = try arena.alloc(Id, nodes.len);
+            for (nodes, node_ids) |node, *node_id| {
+                node_id.* = (try registry.register(node)).id;
+            }
+
+            const search = Search{
+                .name = name,
+                .node_ids = node_ids,
+            };
+            try self.searches.append(arena, search);
+            return search;
+        }
+
+        pub fn remove(self: *List, name: []const u8) void {
+            for (self.searches.items, 0..) |search, i| {
+                if (std.mem.eql(u8, name, search.name)) {
+                    _ = self.searches.swapRemove(i);
+                    return;
+                }
+            }
+        }
+
+        pub fn get(self: *const List, name: []const u8) ?Search {
+            for (self.searches.items) |search| {
+                if (std.mem.eql(u8, name, search.name)) {
+                    return search;
+                }
+            }
+            return null;
+        }
+    };
+};
+
+// Need a custom writer, because we can't just serialize the node as-is.
+// Sometimes we want to serializ the node without chidren, sometimes with just
+// its direct children, and sometimes the entire tree.
+// (For now, we only support direct children)
+
+pub const Writer = struct {
+    opts: Opts,
+    node: *const Node,
+    registry: *Registry,
+
+    pub const Opts = struct {};
+
+    pub fn jsonStringify(self: *const Writer, w: anytype) !void {
+        self.toJSON(w) catch |err| {
+            // The only error our jsonStringify method can return is
+            // @TypeOf(w).Error. In other words, our code can't return its own
+            // error, we can only return a writer error. Kinda sucks.
+            log.err("json stringify: {}", .{err});
+            return error.OutOfMemory;
+        };
+    }
+
+    fn toJSON(self: *const Writer, w: anytype) !void {
+        try w.beginObject();
+        try self.writeCommon(self.node, false, w);
+
+        {
+            var registry = self.registry;
+            const child_nodes = try parser.nodeGetChildNodes(self.node._node);
+            const child_count = try parser.nodeListLength(child_nodes);
+
+            var i: usize = 0;
+            try w.objectField("children");
+            try w.beginArray();
+            for (0..child_count) |_| {
+                const child = (try parser.nodeListItem(child_nodes, @intCast(i))) orelse break;
+                const child_node = try registry.register(child);
+                try w.beginObject();
+                try self.writeCommon(child_node, true, w);
+                try w.endObject();
+                i += 1;
+            }
+            try w.endArray();
+
+            try w.objectField("childNodeCount");
+            try w.write(i);
+        }
+
+        try w.endObject();
+    }
+
+    fn writeCommon(self: *const Writer, node: *const Node, include_child_count: bool, w: anytype) !void {
+        try w.objectField("nodeId");
+        try w.write(node.id);
+
+        try w.objectField("backendNodeId");
+        try w.write(node.id);
+
+        const n = node._node;
+
+        if (try parser.nodeParentNode(n)) |p| {
+            const parent_node = try self.registry.register(p);
+            try w.objectField("parentId");
+            try w.write(parent_node.id);
+        }
+
+        const _map = try parser.nodeGetAttributes(n);
+        if (_map) |map| {
+            const attr_count = try parser.namedNodeMapGetLength(map);
+            try w.objectField("attributes");
+            try w.beginArray();
+            for (0..attr_count) |i| {
+                const attr = try parser.namedNodeMapItem(map, @intCast(i)) orelse continue;
+                try w.write(try parser.attributeGetName(attr));
+                try w.write(try parser.attributeGetValue(attr) orelse continue);
+            }
+            try w.endArray();
+        }
+
+        try w.objectField("nodeType");
+        try w.write(@intFromEnum(try parser.nodeType(n)));
+
+        try w.objectField("nodeName");
+        try w.write(try parser.nodeName(n));
+
+        try w.objectField("localName");
+        try w.write(try parser.nodeLocalName(n));
+
+        try w.objectField("nodeValue");
+        try w.write((try parser.nodeValue(n)) orelse "");
+
+        if (include_child_count) {
+            try w.objectField("childNodeCount");
+            const child_nodes = try parser.nodeGetChildNodes(n);
+            try w.write(try parser.nodeListLength(child_nodes));
+        }
+
+        try w.objectField("documentURL");
+        try w.write(null);
+
+        try w.objectField("baseURL");
+        try w.write(null);
+
+        try w.objectField("xmlVersion");
+        try w.write("");
+
+        try w.objectField("compatibilityMode");
+        try w.write("NoQuirksMode");
+
+        try w.objectField("isScrollable");
+        try w.write(false);
+    }
+};
+
+const testing = @import("testing.zig");
+test "cdp Node: Registry register" {
+    var registry = Registry.init(testing.allocator);
+    defer registry.deinit();
+
+    try testing.expectEqual(0, registry.lookup_by_id.count());
+    try testing.expectEqual(0, registry.lookup_by_node.count());
+
+    var doc = try testing.Document.init("<a id=a1>link1</a><div id=d2><p>other</p></div>");
+    defer doc.deinit();
+
+    {
+        const n = (try doc.querySelector("#a1")).?;
+        const node = try registry.register(n);
+        const n1b = registry.lookup_by_id.get(0).?;
+        const n1c = registry.lookup_by_node.get(node._node).?;
+        try testing.expectEqual(node, n1b);
+        try testing.expectEqual(node, n1c);
+
+        try testing.expectEqual(0, node.id);
+        try testing.expectEqual(n, node._node);
+    }
+
+    {
+        const n = (try doc.querySelector("p")).?;
+        const node = try registry.register(n);
+        const n1b = registry.lookup_by_id.get(1).?;
+        const n1c = registry.lookup_by_node.get(node._node).?;
+        try testing.expectEqual(node, n1b);
+        try testing.expectEqual(node, n1c);
+
+        try testing.expectEqual(1, node.id);
+        try testing.expectEqual(n, node._node);
+    }
+}
+
+test "cdp Node: search list" {
+    var registry = Registry.init(testing.allocator);
+    defer registry.deinit();
+
+    var search_list = Search.List.init(testing.allocator, &registry);
+    defer search_list.deinit();
+
+    {
+        // empty search list, noops
+        search_list.remove("0");
+        try testing.expectEqual(null, search_list.get("0"));
+    }
+
+    {
+        // empty nodes
+        const s1 = try search_list.create(&.{});
+        try testing.expectEqual("0", s1.name);
+        try testing.expectEqual(0, s1.node_ids.len);
+
+        const s2 = search_list.get("0").?;
+        try testing.expectEqual("0", s2.name);
+        try testing.expectEqual(0, s2.node_ids.len);
+
+        search_list.remove("0");
+        try testing.expectEqual(null, search_list.get("0"));
+    }
+
+    {
+        var doc = try testing.Document.init("<a id=a1></a><a id=a2></a>");
+        defer doc.deinit();
+
+        const s1 = try search_list.create(try doc.querySelectorAll("a"));
+        try testing.expectEqual("1", s1.name);
+        try testing.expectEqualSlices(u32, &.{ 0, 1 }, s1.node_ids);
+
+        try testing.expectEqual(2, registry.lookup_by_id.count());
+        try testing.expectEqual(2, registry.lookup_by_node.count());
+
+        const s2 = try search_list.create(try doc.querySelectorAll("#a1"));
+        try testing.expectEqual("2", s2.name);
+        try testing.expectEqualSlices(u32, &.{0}, s2.node_ids);
+
+        const s3 = try search_list.create(try doc.querySelectorAll("#a2"));
+        try testing.expectEqual("3", s3.name);
+        try testing.expectEqualSlices(u32, &.{1}, s3.node_ids);
+
+        try testing.expectEqual(2, registry.lookup_by_id.count());
+        try testing.expectEqual(2, registry.lookup_by_node.count());
+    }
+}
+
+test "cdp Node: Writer" {
+    var registry = Registry.init(testing.allocator);
+    defer registry.deinit();
+
+    var doc = try testing.Document.init("<a id=a1></a><a id=a2></a>");
+    defer doc.deinit();
+
+    {
+        const node = try registry.register(doc.asNode());
+        const json = try std.json.stringifyAlloc(testing.allocator, Writer{
+            .node = node,
+            .opts = .{},
+            .registry = &registry,
+        }, .{});
+        defer testing.allocator.free(json);
+
+        try testing.expectJson(.{
+            .nodeId = 0,
+            .backendNodeId = 0,
+            .nodeType = 9,
+            .nodeName = "#document",
+            .localName = "",
+            .nodeValue = "",
+            .documentURL = null,
+            .baseURL = null,
+            .xmlVersion = "",
+            .isScrollable = false,
+            .compatibilityMode = "NoQuirksMode",
+            .childNodeCount = 1,
+            .children = &.{.{
+                .nodeId = 1,
+                .backendNodeId = 1,
+                .nodeType = 1,
+                .nodeName = "HTML",
+                .localName = "html",
+                .nodeValue = "",
+                .childNodeCount = 2,
+                .documentURL = null,
+                .baseURL = null,
+                .xmlVersion = "",
+                .compatibilityMode = "NoQuirksMode",
+                .isScrollable = false,
+            }},
+        }, json);
+    }
+
+    {
+        const node = registry.lookup_by_id.get(1).?;
+        const json = try std.json.stringifyAlloc(testing.allocator, Writer{
+            .node = node,
+            .opts = .{},
+            .registry = &registry,
+        }, .{});
+        defer testing.allocator.free(json);
+
+        try testing.expectJson(.{
+            .nodeId = 1,
+            .backendNodeId = 1,
+            .nodeType = 1,
+            .nodeName = "HTML",
+            .localName = "html",
+            .nodeValue = "",
+            .childNodeCount = 2,
+            .documentURL = null,
+            .baseURL = null,
+            .xmlVersion = "",
+            .compatibilityMode = "NoQuirksMode",
+            .isScrollable = false,
+            .children = &.{ .{
+                .nodeId = 2,
+                .backendNodeId = 2,
+                .nodeType = 1,
+                .nodeName = "HEAD",
+                .localName = "head",
+                .nodeValue = "",
+                .childNodeCount = 0,
+                .documentURL = null,
+                .baseURL = null,
+                .xmlVersion = "",
+                .compatibilityMode = "NoQuirksMode",
+                .isScrollable = false,
+                .parentId = 1,
+            }, .{
+                .nodeId = 3,
+                .backendNodeId = 3,
+                .nodeType = 1,
+                .nodeName = "BODY",
+                .localName = "body",
+                .nodeValue = "",
+                .childNodeCount = 2,
+                .documentURL = null,
+                .baseURL = null,
+                .xmlVersion = "",
+                .compatibilityMode = "NoQuirksMode",
+                .isScrollable = false,
+                .parentId = 1,
+            } },
+        }, json);
+    }
+}

src/cdp/browser.zig

@@ -1,148 +0,0 @@
-// Copyright (C) 2023-2024  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 server = @import("../server.zig");
-const Ctx = server.Ctx;
-const cdp = @import("cdp.zig");
-const result = cdp.result;
-const IncomingMessage = @import("msg.zig").IncomingMessage;
-const Input = @import("msg.zig").Input;
-
-const log = std.log.scoped(.cdp);
-
-const Methods = enum {
-    getVersion,
-    setDownloadBehavior,
-    getWindowForTarget,
-    setWindowBounds,
-};
-
-pub fn browser(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    action: []const u8,
-    ctx: *Ctx,
-) ![]const u8 {
-    const method = std.meta.stringToEnum(Methods, action) orelse
-        return error.UnknownMethod;
-    return switch (method) {
-        .getVersion => getVersion(alloc, msg, ctx),
-        .setDownloadBehavior => setDownloadBehavior(alloc, msg, ctx),
-        .getWindowForTarget => getWindowForTarget(alloc, msg, ctx),
-        .setWindowBounds => setWindowBounds(alloc, msg, ctx),
-    };
-}
-
-// TODO: hard coded data
-const ProtocolVersion = "1.3";
-const Product = "Chrome/124.0.6367.29";
-const Revision = "@9e6ded5ac1ff5e38d930ae52bd9aec09bd1a68e4";
-const UserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
-const JsVersion = "12.4.254.8";
-
-fn getVersion(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-    // input
-    const input = try Input(void).get(alloc, msg);
-    defer input.deinit();
-    log.debug("Req > id {d}, method {s}", .{ input.id, "browser.getVersion" });
-
-    // ouput
-    const Res = struct {
-        protocolVersion: []const u8 = ProtocolVersion,
-        product: []const u8 = Product,
-        revision: []const u8 = Revision,
-        userAgent: []const u8 = UserAgent,
-        jsVersion: []const u8 = JsVersion,
-    };
-    return result(alloc, input.id, Res, .{}, null);
-}
-
-// TODO: noop method
-fn setDownloadBehavior(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-    // input
-    const Params = struct {
-        behavior: []const u8,
-        browserContextId: ?[]const u8 = null,
-        downloadPath: ?[]const u8 = null,
-        eventsEnabled: ?bool = null,
-    };
-    const input = try Input(Params).get(alloc, msg);
-    defer input.deinit();
-    log.debug("REQ > id {d}, method {s}", .{ input.id, "browser.setDownloadBehavior" });
-
-    // output
-    return result(alloc, input.id, null, null, null);
-}
-
-// TODO: hard coded ID
-const DevToolsWindowID = 1923710101;
-
-fn getWindowForTarget(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-
-    // input
-    const Params = struct {
-        targetId: ?[]const u8 = null,
-    };
-    const input = try Input(?Params).get(alloc, msg);
-    defer input.deinit();
-    std.debug.assert(input.sessionId != null);
-    log.debug("Req > id {d}, method {s}", .{ input.id, "browser.getWindowForTarget" });
-
-    // output
-    const Resp = struct {
-        windowId: u64 = DevToolsWindowID,
-        bounds: struct {
-            left: ?u64 = null,
-            top: ?u64 = null,
-            width: ?u64 = null,
-            height: ?u64 = null,
-            windowState: []const u8 = "normal",
-        } = .{},
-    };
-    return result(alloc, input.id, Resp, Resp{}, input.sessionId);
-}
-
-// TODO: noop method
-fn setWindowBounds(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-
-    // input
-    const input = try Input(void).get(alloc, msg);
-    defer input.deinit();
-    log.debug("Req > id {d}, method {s}", .{ input.id, "browser.setWindowBounds" });
-
-    // output
-    return result(alloc, input.id, null, null, input.sessionId);
-}

src/cdp/cdp.zig

@@ -17,261 +17,721 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Allocator = std.mem.Allocator;
+const json = std.json;
 
-const server = @import("../server.zig");
-const Ctx = server.Ctx;
+const App = @import("../app.zig").App;
+const Env = @import("../browser/env.zig").Env;
+const asUint = @import("../str/parser.zig").asUint;
+const Browser = @import("../browser/browser.zig").Browser;
+const Session = @import("../browser/session.zig").Session;
+const Page = @import("../browser/page.zig").Page;
+const Inspector = @import("../browser/env.zig").Env.Inspector;
+const Incrementing = @import("../id.zig").Incrementing;
+const Notification = @import("../notification.zig").Notification;
 
-const browser = @import("browser.zig").browser;
-const target = @import("target.zig").target;
-const page = @import("page.zig").page;
-const log = @import("log.zig").log;
-const runtime = @import("runtime.zig").runtime;
-const network = @import("network.zig").network;
-const emulation = @import("emulation.zig").emulation;
-const fetch = @import("fetch.zig").fetch;
-const performance = @import("performance.zig").performance;
-const IncomingMessage = @import("msg.zig").IncomingMessage;
-const Input = @import("msg.zig").Input;
-const inspector = @import("inspector.zig").inspector;
-const dom = @import("dom.zig").dom;
-const cdpdom = @import("dom.zig");
-const css = @import("css.zig").css;
-const security = @import("security.zig").security;
+const log = std.log.scoped(.cdp);
 
-const log_cdp = std.log.scoped(.cdp);
+pub const URL_BASE = "chrome://newtab/";
+pub const LOADER_ID = "LOADERID24DD2FD56CF1EF33C965C79C";
 
-pub const Error = error{
-    UnknonwDomain,
-    UnknownMethod,
-    NoResponse,
-    RequestWithoutID,
-};
+pub const CDP = CDPT(struct {
+    const Client = *@import("../server.zig").Client;
+});
 
-pub fn isCdpError(err: anyerror) ?Error {
-    // see https://github.com/ziglang/zig/issues/2473
-    const errors = @typeInfo(Error).ErrorSet.?;
-    inline for (errors) |e| {
-        if (std.mem.eql(u8, e.name, @errorName(err))) {
-            return @errorCast(err);
+const SessionIdGen = Incrementing(u32, "SID");
+const TargetIdGen = Incrementing(u32, "TID");
+const LoaderIdGen = Incrementing(u32, "LID");
+const BrowserContextIdGen = Incrementing(u32, "BID");
+
+// Generic so that we can inject mocks into it.
+pub fn CDPT(comptime TypeProvider: type) type {
+    return struct {
+        // Used for sending message to the client and closing on error
+        client: TypeProvider.Client,
+
+        allocator: Allocator,
+
+        // The active browser
+        browser: Browser,
+
+        // when true, any target creation must be attached.
+        target_auto_attach: bool = false,
+
+        target_id_gen: TargetIdGen = .{},
+        loader_id_gen: LoaderIdGen = .{},
+        session_id_gen: SessionIdGen = .{},
+        browser_context_id_gen: BrowserContextIdGen = .{},
+
+        browser_context: ?BrowserContext(Self),
+
+        // Re-used arena for processing a message. We're assuming that we're getting
+        // 1 message at a time.
+        message_arena: std.heap.ArenaAllocator,
+
+        const Self = @This();
+
+        pub fn init(app: *App, client: TypeProvider.Client) !Self {
+            const allocator = app.allocator;
+            const browser = try Browser.init(app);
+            errdefer browser.deinit();
+
+            return .{
+                .client = client,
+                .browser = browser,
+                .allocator = allocator,
+                .browser_context = null,
+                .message_arena = std.heap.ArenaAllocator.init(allocator),
+            };
         }
-    }
-    return null;
-}
 
-const Domains = enum {
-    Browser,
-    Target,
-    Page,
-    Log,
-    Runtime,
-    Network,
-    DOM,
-    CSS,
-    Inspector,
-    Emulation,
-    Fetch,
-    Performance,
-    Security,
-};
-
-// The caller is responsible for calling `free` on the returned slice.
-pub fn do(
-    alloc: std.mem.Allocator,
-    s: []const u8,
-    ctx: *Ctx,
-) anyerror![]const u8 {
-
-    // incoming message parser
-    var msg = IncomingMessage.init(alloc, s);
-    defer msg.deinit();
-
-    return dispatch(alloc, &msg, ctx);
-}
-
-pub fn dispatch(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    ctx: *Ctx,
-) anyerror![]const u8 {
-    const method = try msg.getMethod();
-
-    // retrieve domain from method
-    var iter = std.mem.splitScalar(u8, method, '.');
-    const domain = std.meta.stringToEnum(Domains, iter.first()) orelse
-        return error.UnknonwDomain;
-
-    // select corresponding domain
-    const action = iter.next() orelse return error.BadMethod;
-    return switch (domain) {
-        .Browser => browser(alloc, msg, action, ctx),
-        .Target => target(alloc, msg, action, ctx),
-        .Page => page(alloc, msg, action, ctx),
-        .Log => log(alloc, msg, action, ctx),
-        .Runtime => runtime(alloc, msg, action, ctx),
-        .Network => network(alloc, msg, action, ctx),
-        .DOM => dom(alloc, msg, action, ctx),
-        .CSS => css(alloc, msg, action, ctx),
-        .Inspector => inspector(alloc, msg, action, ctx),
-        .Emulation => emulation(alloc, msg, action, ctx),
-        .Fetch => fetch(alloc, msg, action, ctx),
-        .Performance => performance(alloc, msg, action, ctx),
-        .Security => security(alloc, msg, action, ctx),
-    };
-}
-
-pub const State = struct {
-    executionContextId: u32 = 0,
-    contextID: ?[]const u8 = null,
-    sessionID: SessionID = .CONTEXTSESSIONID0497A05C95417CF4,
-    frameID: []const u8 = FrameID,
-    url: []const u8 = URLBase,
-    securityOrigin: []const u8 = URLBase,
-    secureContextType: []const u8 = "Secure", // TODO: enum
-    loaderID: []const u8 = LoaderID,
-
-    page_life_cycle_events: bool = false, // TODO; Target based value
-
-    // DOM
-    nodelist: cdpdom.NodeList,
-    nodesearchlist: cdpdom.NodeSearchList,
-
-    pub fn init(alloc: std.mem.Allocator) State {
-        return .{
-            .nodelist = cdpdom.NodeList.init(alloc),
-            .nodesearchlist = cdpdom.NodeSearchList.init(alloc),
-        };
-    }
-
-    pub fn deinit(self: *State) void {
-        self.nodelist.deinit();
-
-        // deinit all node searches.
-        for (self.nodesearchlist.items) |*s| s.deinit();
-        self.nodesearchlist.deinit();
-    }
-
-    pub fn reset(self: *State) void {
-        self.nodelist.reset();
-
-        // deinit all node searches.
-        for (self.nodesearchlist.items) |*s| s.deinit();
-        self.nodesearchlist.clearAndFree();
-    }
-};
-
-// Utils
-// -----
-
-pub fn dumpFile(
-    alloc: std.mem.Allocator,
-    id: u16,
-    script: []const u8,
-) !void {
-    const name = try std.fmt.allocPrint(alloc, "id_{d}.js", .{id});
-    defer alloc.free(name);
-    var dir = try std.fs.cwd().makeOpenPath("zig-cache/tmp", .{});
-    defer dir.close();
-    const f = try dir.createFile(name, .{});
-    defer f.close();
-    const nb = try f.write(script);
-    std.debug.assert(nb == script.len);
-    const p = try dir.realpathAlloc(alloc, name);
-    defer alloc.free(p);
-}
-
-// caller owns the slice returned
-pub fn stringify(alloc: std.mem.Allocator, res: anytype) ![]const u8 {
-    var out = std.ArrayList(u8).init(alloc);
-    defer out.deinit();
-
-    // Do not emit optional null fields
-    const options: std.json.StringifyOptions = .{ .emit_null_optional_fields = false };
-
-    try std.json.stringify(res, options, out.writer());
-    const ret = try alloc.alloc(u8, out.items.len);
-    @memcpy(ret, out.items);
-    return ret;
-}
-
-const resultNull = "{{\"id\": {d}, \"result\": {{}}}}";
-const resultNullSession = "{{\"id\": {d}, \"result\": {{}}, \"sessionId\": \"{s}\"}}";
-
-// caller owns the slice returned
-pub fn result(
-    alloc: std.mem.Allocator,
-    id: u16,
-    comptime T: ?type,
-    res: anytype,
-    sessionID: ?[]const u8,
-) ![]const u8 {
-    log_cdp.debug(
-        "Res > id {d}, sessionID {?s}, result {any}",
-        .{ id, sessionID, res },
-    );
-    if (T == null) {
-        // No need to stringify a custom JSON msg, just use string templates
-        if (sessionID) |sID| {
-            return try std.fmt.allocPrint(alloc, resultNullSession, .{ id, sID });
+        pub fn deinit(self: *Self) void {
+            if (self.browser_context) |*bc| {
+                bc.deinit();
+            }
+            self.browser.deinit();
+            self.message_arena.deinit();
         }
-        return try std.fmt.allocPrint(alloc, resultNull, .{id});
-    }
 
-    const Resp = struct {
-        id: u16,
-        result: T.?,
-        sessionId: ?[]const u8,
-    };
-    const resp = Resp{ .id = id, .result = res, .sessionId = sessionID };
+        pub fn handleMessage(self: *Self, msg: []const u8) bool {
+            // if there's an error, it's already been logged
+            self.processMessage(msg) catch return false;
+            return true;
+        }
 
-    return stringify(alloc, resp);
-}
+        pub fn processMessage(self: *Self, msg: []const u8) !void {
+            const arena = &self.message_arena;
+            defer _ = arena.reset(.{ .retain_with_limit = 1024 * 16 });
+            return self.dispatch(arena.allocator(), self, msg);
+        }
 
-pub fn sendEvent(
-    alloc: std.mem.Allocator,
-    ctx: *Ctx,
-    name: []const u8,
-    comptime T: type,
-    params: T,
-    sessionID: ?[]const u8,
-) !void {
-    // some clients like chromedp expects empty parameters structs.
-    if (T == void) @compileError("sendEvent: use struct{} instead of void for empty parameters");
+        // Called from above, in processMessage which handles client messages
+        // but can also be called internally. For example, Target.sendMessageToTarget
+        // calls back into dispatch to capture the response.
+        pub fn dispatch(self: *Self, arena: Allocator, sender: anytype, str: []const u8) !void {
+            const input = json.parseFromSliceLeaky(InputMessage, arena, str, .{
+                .ignore_unknown_fields = true,
+            }) catch return error.InvalidJSON;
 
-    log_cdp.debug("Event > method {s}, sessionID {?s}", .{ name, sessionID });
-    const Resp = struct {
-        method: []const u8,
-        params: T,
-        sessionId: ?[]const u8,
-    };
-    const resp = Resp{ .method = name, .params = params, .sessionId = sessionID };
+            var command = Command(Self, @TypeOf(sender)){
+                .input = .{
+                    .json = str,
+                    .id = input.id,
+                    .action = "",
+                    .params = input.params,
+                    .session_id = input.sessionId,
+                },
+                .cdp = self,
+                .arena = arena,
+                .sender = sender,
+                .browser_context = if (self.browser_context) |*bc| bc else null,
+            };
 
-    const event_msg = try stringify(alloc, resp);
-    try ctx.send(event_msg);
-}
+            // See dispatchStartupCommand for more info on this.
+            var is_startup = false;
+            if (input.sessionId) |input_session_id| {
+                if (std.mem.eql(u8, input_session_id, "STARTUP")) {
+                    is_startup = true;
+                } else if (self.isValidSessionId(input_session_id) == false) {
+                    return command.sendError(-32001, "Unknown sessionId");
+                }
+            }
 
-// Common
-// ------
-
-// TODO: hard coded IDs
-pub const SessionID = enum {
-    BROWSERSESSIONID597D9875C664CAC0,
-    CONTEXTSESSIONID0497A05C95417CF4,
-
-    pub fn parse(str: []const u8) !SessionID {
-        inline for (@typeInfo(SessionID).Enum.fields) |enumField| {
-            if (std.mem.eql(u8, str, enumField.name)) {
-                return @field(SessionID, enumField.name);
+            if (is_startup) {
+                dispatchStartupCommand(&command) catch |err| {
+                    command.sendError(-31999, @errorName(err)) catch {};
+                    return err;
+                };
+            } else {
+                dispatchCommand(&command, input.method) catch |err| {
+                    command.sendError(-31998, @errorName(err)) catch {};
+                    return err;
+                };
             }
         }
-        return error.InvalidSessionID;
+
+        // A CDP session isn't 100% fully driven by the driver. There's are
+        // independent actions that the browser is expected to take. For example
+        // Puppeteer expects the browser to startup a tab and thus have existing
+        // targets.
+        // To this end, we create a [very] dummy BrowserContext, Target and
+        // Session. There isn't actually a BrowserContext, just a special id.
+        // When messages are received with the "STARTUP" sessionId, we do
+        // "special" handling - the bare minimum we need to do until the driver
+        // switches to a real BrowserContext.
+        // (I can imagine this logic will become driver-specific)
+        fn dispatchStartupCommand(command: anytype) !void {
+            return command.sendResult(null, .{});
+        }
+
+        fn dispatchCommand(command: anytype, method: []const u8) !void {
+            const domain = blk: {
+                const i = std.mem.indexOfScalarPos(u8, method, 0, '.') orelse {
+                    return error.InvalidMethod;
+                };
+                command.input.action = method[i + 1 ..];
+                break :blk method[0..i];
+            };
+
+            switch (domain.len) {
+                3 => switch (@as(u24, @bitCast(domain[0..3].*))) {
+                    asUint("DOM") => return @import("domains/dom.zig").processMessage(command),
+                    asUint("Log") => return @import("domains/log.zig").processMessage(command),
+                    asUint("CSS") => return @import("domains/css.zig").processMessage(command),
+                    else => {},
+                },
+                4 => switch (@as(u32, @bitCast(domain[0..4].*))) {
+                    asUint("Page") => return @import("domains/page.zig").processMessage(command),
+                    else => {},
+                },
+                5 => switch (@as(u40, @bitCast(domain[0..5].*))) {
+                    asUint("Fetch") => return @import("domains/fetch.zig").processMessage(command),
+                    asUint("Input") => return @import("domains/input.zig").processMessage(command),
+                    else => {},
+                },
+                6 => switch (@as(u48, @bitCast(domain[0..6].*))) {
+                    asUint("Target") => return @import("domains/target.zig").processMessage(command),
+                    else => {},
+                },
+                7 => switch (@as(u56, @bitCast(domain[0..7].*))) {
+                    asUint("Browser") => return @import("domains/browser.zig").processMessage(command),
+                    asUint("Runtime") => return @import("domains/runtime.zig").processMessage(command),
+                    asUint("Network") => return @import("domains/network.zig").processMessage(command),
+                    else => {},
+                },
+                8 => switch (@as(u64, @bitCast(domain[0..8].*))) {
+                    asUint("Security") => return @import("domains/security.zig").processMessage(command),
+                    else => {},
+                },
+                9 => switch (@as(u72, @bitCast(domain[0..9].*))) {
+                    asUint("Emulation") => return @import("domains/emulation.zig").processMessage(command),
+                    asUint("Inspector") => return @import("domains/inspector.zig").processMessage(command),
+                    else => {},
+                },
+                11 => switch (@as(u88, @bitCast(domain[0..11].*))) {
+                    asUint("Performance") => return @import("domains/performance.zig").processMessage(command),
+                    else => {},
+                },
+                else => {},
+            }
+
+            return error.UnknownDomain;
+        }
+
+        fn isValidSessionId(self: *const Self, input_session_id: []const u8) bool {
+            const browser_context = &(self.browser_context orelse return false);
+            const session_id = browser_context.session_id orelse return false;
+            return std.mem.eql(u8, session_id, input_session_id);
+        }
+
+        pub fn createBrowserContext(self: *Self) ![]const u8 {
+            if (self.browser_context != null) {
+                return error.AlreadyExists;
+            }
+            const id = self.browser_context_id_gen.next();
+
+            self.browser_context = @as(BrowserContext(Self), undefined);
+            const browser_context = &self.browser_context.?;
+
+            try BrowserContext(Self).init(browser_context, id, self);
+            return id;
+        }
+
+        pub fn disposeBrowserContext(self: *Self, browser_context_id: []const u8) bool {
+            const bc = &(self.browser_context orelse return false);
+            if (std.mem.eql(u8, bc.id, browser_context_id) == false) {
+                return false;
+            }
+            bc.deinit();
+            self.browser.closeSession();
+            self.browser_context = null;
+            return true;
+        }
+
+        const SendEventOpts = struct {
+            session_id: ?[]const u8 = null,
+        };
+        pub fn sendEvent(self: *Self, method: []const u8, p: anytype, opts: SendEventOpts) !void {
+            return self.sendJSON(.{
+                .method = method,
+                .params = if (comptime @typeInfo(@TypeOf(p)) == .null) struct {}{} else p,
+                .sessionId = opts.session_id,
+            });
+        }
+
+        fn sendJSON(self: *Self, message: anytype) !void {
+            return self.client.sendJSON(message, .{
+                .emit_null_optional_fields = false,
+            });
+        }
+    };
+}
+
+pub fn BrowserContext(comptime CDP_T: type) type {
+    const Node = @import("Node.zig");
+
+    return struct {
+        id: []const u8,
+        cdp: *CDP_T,
+
+        // Represents the browser session. There is no equivalent in CDP. For
+        // all intents and purpose, from CDP's point of view our Browser and
+        // our Session more or less maps to a BrowserContext. THIS HAS ZERO
+        // RELATION TO SESSION_ID
+        session: *Session,
+
+        // Points to the session arena
+        arena: Allocator,
+
+        // Maps to our Page. (There are other types of targets, but we only
+        // deal with "pages" for now). Since we only allow 1 open page at a
+        // time, we only have 1 target_id.
+        target_id: ?[]const u8,
+
+        // The CDP session_id. After the target/page is created, the client
+        // "attaches" to it (either explicitly or automatically). We return a
+        // "sessionId" which identifies this link. `sessionId` is the how
+        // the CDP client informs us what it's trying to manipulate. Because we
+        // only support 1 BrowserContext at a time, and 1 page at a time, this
+        // is all pretty straightforward, but it still needs to be enforced, i.e.
+        // if we get a request with a sessionId that doesn't match the current one
+        // we should reject it.
+        session_id: ?[]const u8,
+
+        loader_id: []const u8,
+        security_origin: []const u8,
+        page_life_cycle_events: bool,
+        secure_context_type: []const u8,
+        node_registry: Node.Registry,
+        node_search_list: Node.Search.List,
+
+        inspector: Inspector,
+        isolated_world: ?IsolatedWorld,
+
+        const Self = @This();
+
+        fn init(self: *Self, id: []const u8, cdp: *CDP_T) !void {
+            const allocator = cdp.allocator;
+
+            const session = try cdp.browser.newSession();
+            const arena = session.arena.allocator();
+
+            const inspector = try cdp.browser.env.newInspector(arena, self);
+
+            var registry = Node.Registry.init(allocator);
+            errdefer registry.deinit();
+
+            self.* = .{
+                .id = id,
+                .cdp = cdp,
+                .arena = arena,
+                .target_id = null,
+                .session_id = null,
+                .session = session,
+                .security_origin = URL_BASE,
+                .secure_context_type = "Secure", // TODO = enum
+                .loader_id = LOADER_ID,
+                .page_life_cycle_events = false, // TODO; Target based value
+                .node_registry = registry,
+                .node_search_list = undefined,
+                .isolated_world = null,
+                .inspector = inspector,
+            };
+            self.node_search_list = Node.Search.List.init(allocator, &self.node_registry);
+            errdefer self.deinit();
+
+            try cdp.browser.notification.register(.page_remove, self, onPageRemove);
+            try cdp.browser.notification.register(.page_created, self, onPageCreated);
+            try cdp.browser.notification.register(.page_navigate, self, onPageNavigate);
+            try cdp.browser.notification.register(.page_navigated, self, onPageNavigated);
+        }
+
+        pub fn deinit(self: *Self) void {
+            self.inspector.deinit();
+
+            // If the session has a page, we need to clear it first. The page
+            // context is always nested inside of the isolated world context,
+            // so we need to shutdown the page one first.
+            self.cdp.browser.closeSession();
+
+            if (self.isolated_world) |*world| {
+                world.deinit();
+            }
+            self.node_registry.deinit();
+            self.node_search_list.deinit();
+            self.cdp.browser.notification.unregisterAll(self);
+        }
+
+        pub fn reset(self: *Self) void {
+            self.node_registry.reset();
+            self.node_search_list.reset();
+        }
+
+        pub fn createIsolatedWorld(self: *Self, world_name: []const u8, grant_universal_access: bool) !*IsolatedWorld {
+            if (self.isolated_world != null) {
+                return error.CurrentlyOnly1IsolatedWorldSupported;
+            }
+
+            var executor = try self.cdp.browser.env.newExecutor();
+            errdefer executor.deinit();
+
+            self.isolated_world = .{
+                .name = try self.arena.dupe(u8, world_name),
+                .scope = null,
+                .executor = executor,
+                .grant_universal_access = grant_universal_access,
+            };
+            return &self.isolated_world.?;
+        }
+
+        pub fn nodeWriter(self: *Self, node: *const Node, opts: Node.Writer.Opts) Node.Writer {
+            return .{
+                .node = node,
+                .opts = opts,
+                .registry = &self.node_registry,
+            };
+        }
+
+        pub fn getURL(self: *const Self) ?[]const u8 {
+            const page = self.session.currentPage() orelse return null;
+            const raw_url = page.url.raw;
+            return if (raw_url.len == 0) null else raw_url;
+        }
+
+        pub fn onPageRemove(ctx: *anyopaque, _: Notification.PageRemove) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            return @import("domains/page.zig").pageRemove(self);
+        }
+
+        pub fn onPageCreated(ctx: *anyopaque, page: *Page) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            return @import("domains/page.zig").pageCreated(self, page);
+        }
+
+        pub fn onPageNavigate(ctx: *anyopaque, data: *const Notification.PageNavigate) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            return @import("domains/page.zig").pageNavigate(self, data);
+        }
+
+        pub fn onPageNavigated(ctx: *anyopaque, data: *const Notification.PageNavigated) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            return @import("domains/page.zig").pageNavigated(self, data);
+        }
+
+        pub fn callInspector(self: *const Self, msg: []const u8) void {
+            self.inspector.send(msg);
+            // force running micro tasks after send input to the inspector.
+            self.cdp.browser.runMicrotasks();
+        }
+
+        pub fn onInspectorResponse(ctx: *anyopaque, _: u32, msg: []const u8) void {
+            if (std.log.defaultLogEnabled(.debug)) {
+                // msg should be {"id":<id>,...
+                std.debug.assert(std.mem.startsWith(u8, msg, "{\"id\":"));
+
+                const id_end = std.mem.indexOfScalar(u8, msg, ',') orelse {
+                    log.warn("invalid inspector response message: {s}", .{msg});
+                    return;
+                };
+                const id = msg[6..id_end];
+                log.debug("Res (inspector) > id {s}", .{id});
+            }
+            sendInspectorMessage(@alignCast(@ptrCast(ctx)), msg) catch |err| {
+                log.err("Failed to send inspector response: {any}", .{err});
+            };
+        }
+
+        pub fn onInspectorEvent(ctx: *anyopaque, msg: []const u8) void {
+            if (std.log.defaultLogEnabled(.debug)) {
+                // msg should be {"method":<method>,...
+                std.debug.assert(std.mem.startsWith(u8, msg, "{\"method\":"));
+                const method_end = std.mem.indexOfScalar(u8, msg, ',') orelse {
+                    log.warn("invalid inspector event message: {s}", .{msg});
+                    return;
+                };
+                const method = msg[10..method_end];
+                log.debug("Event (inspector) > method {s}", .{method});
+            }
+
+            sendInspectorMessage(@alignCast(@ptrCast(ctx)), msg) catch |err| {
+                log.err("Failed to send inspector event: {any}", .{err});
+            };
+        }
+
+        // This is hacky x 2. First, we create the JSON payload by gluing our
+        // session_id onto it. Second, we're much more client/websocket aware than
+        // we should be.
+        fn sendInspectorMessage(self: *Self, msg: []const u8) !void {
+            const session_id = self.session_id orelse {
+                // We no longer have an active session. What should we do
+                // in this case?
+                return;
+            };
+
+            const cdp = self.cdp;
+            var arena = std.heap.ArenaAllocator.init(cdp.allocator);
+            errdefer arena.deinit();
+
+            const field = ",\"sessionId\":\"";
+
+            // + 1 for the closing quote after the session id
+            // + 10 for the max websocket header
+            const message_len = msg.len + session_id.len + 1 + field.len + 10;
+
+            var buf: std.ArrayListUnmanaged(u8) = .{};
+            buf.ensureTotalCapacity(arena.allocator(), message_len) catch |err| {
+                log.err("Failed to expand inspector buffer: {any}", .{err});
+                return;
+            };
+
+            // reserve 10 bytes for websocket header
+            buf.appendSliceAssumeCapacity(&.{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 });
+
+            // -1  because we dont' want the closing brace '}'
+            buf.appendSliceAssumeCapacity(msg[0 .. msg.len - 1]);
+            buf.appendSliceAssumeCapacity(field);
+            buf.appendSliceAssumeCapacity(session_id);
+            buf.appendSliceAssumeCapacity("\"}");
+            std.debug.assert(buf.items.len == message_len);
+
+            try cdp.client.sendJSONRaw(arena, buf);
+        }
+    };
+}
+
+/// see: https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/core/v8/V8BindingDesign.md#world
+/// The current understanding. An isolated world lives in the same isolate, but a separated context.
+/// Clients create this to be able to create variables and run code without interfering with the
+/// normal namespace and values of the webpage. Similar to the main context we need to pretend to recreate it after
+/// a executionContextsCleared event which happens when navigating to a new page. A client can have a command be executed
+/// in the isolated world by using its Context ID or the worldName.
+/// grantUniveralAccess Indecated whether the isolated world can reference objects like the DOM or other JS Objects.
+/// An isolated world has it's own instance of globals like Window.
+/// Generally the client needs to resolve a node into the isolated world to be able to work with it.
+/// An object id is unique across all contexts, different object ids can refer to the same Node in different contexts.
+const IsolatedWorld = struct {
+    name: []const u8,
+    scope: ?*Env.Scope,
+    executor: Env.Executor,
+    grant_universal_access: bool,
+
+    pub fn deinit(self: *IsolatedWorld) void {
+        self.executor.deinit();
+        self.scope = null;
+    }
+    pub fn removeContext(self: *IsolatedWorld) !void {
+        if (self.scope == null) return error.NoIsolatedContextToRemove;
+        self.executor.endScope();
+        self.scope = null;
+    }
+
+    // The isolate world must share at least some of the state with the related page, specifically the DocumentHTML
+    // (assuming grantUniveralAccess will be set to True!).
+    // We just created the world and the page. The page's state lives in the session, but is update on navigation.
+    // This also means this pointer becomes invalid after removePage untill a new page is created.
+    // Currently we have only 1 page/frame and thus also only 1 state in the isolate world.
+    pub fn createContext(self: *IsolatedWorld, page: *Page) !void {
+        if (self.scope != null) return error.Only1IsolatedContextSupported;
+        self.scope = try self.executor.startScope(&page.window, &page.state, {}, false);
     }
 };
-pub const BrowserSessionID = @tagName(SessionID.BROWSERSESSIONID597D9875C664CAC0);
-pub const ContextSessionID = @tagName(SessionID.CONTEXTSESSIONID0497A05C95417CF4);
-pub const URLBase = "chrome://newtab/";
-pub const LoaderID = "LOADERID24DD2FD56CF1EF33C965C79C";
-pub const FrameID = "FRAMEIDD8AED408A0467AC93100BCDBE";
 
-pub const TimestampEvent = struct {
-    timestamp: f64,
+// This is a generic because when we send a result we have two different
+// behaviors. Normally, we're sending the result to the client. But in some cases
+// we want to capture the result. So we want the command.sendResult to be
+// generic.
+pub fn Command(comptime CDP_T: type, comptime Sender: type) type {
+    return struct {
+        // A misc arena that can be used for any allocation for processing
+        // the message
+        arena: Allocator,
+
+        // reference to our CDP instance
+        cdp: *CDP_T,
+
+        // The browser context this command targets
+        browser_context: ?*BrowserContext(CDP_T),
+
+        // The command input (the id, optional session_id, params, ...)
+        input: Input,
+
+        // In most cases, Sender is going to be cdp itself. We'll call
+        // sender.sendJSON() and CDP will send it to the client. But some
+        // comamnds are dispatched internally, in which cases the Sender will
+        // be code to capture the data that we were "sending".
+        sender: Sender,
+
+        const Self = @This();
+
+        pub fn params(self: *const Self, comptime T: type) !?T {
+            if (self.input.params) |p| {
+                return try json.parseFromSliceLeaky(
+                    T,
+                    self.arena,
+                    p.raw,
+                    .{ .ignore_unknown_fields = true },
+                );
+            }
+            return null;
+        }
+
+        pub fn createBrowserContext(self: *Self) !*BrowserContext(CDP_T) {
+            _ = try self.cdp.createBrowserContext();
+            self.browser_context = &(self.cdp.browser_context.?);
+            return self.browser_context.?;
+        }
+
+        const SendResultOpts = struct {
+            include_session_id: bool = true,
+        };
+        pub fn sendResult(self: *Self, result: anytype, opts: SendResultOpts) !void {
+            return self.sender.sendJSON(.{
+                .id = self.input.id,
+                .result = if (comptime @typeInfo(@TypeOf(result)) == .null) struct {}{} else result,
+                .sessionId = if (opts.include_session_id) self.input.session_id else null,
+            });
+        }
+
+        const SendEventOpts = struct {
+            session_id: ?[]const u8 = null,
+        };
+        pub fn sendEvent(self: *Self, method: []const u8, p: anytype, opts: CDP_T.SendEventOpts) !void {
+            // Events ALWAYS go to the client. self.sender should not be used
+            return self.cdp.sendEvent(method, p, opts);
+        }
+
+        pub fn sendError(self: *Self, code: i32, message: []const u8) !void {
+            return self.sender.sendJSON(.{
+                .id = self.input.id,
+                .code = code,
+                .message = message,
+            });
+        }
+
+        const Input = struct {
+            // When we reply to a message, we echo back the message id
+            id: ?i64,
+
+            // The "action" of the message.Given a method of "LOG.enable", the
+            // action is "enable"
+            action: []const u8,
+
+            // See notes in BrowserContext about session_id
+            session_id: ?[]const u8,
+
+            // Unparsed / untyped input.params.
+            params: ?InputParams,
+
+            // The full raw json input
+            json: []const u8,
+        };
+    };
+}
+
+// When we parse a JSON message from the client, this is the structure
+// we always expect
+const InputMessage = struct {
+    id: ?i64 = null,
+    method: []const u8,
+    params: ?InputParams = null,
+    sessionId: ?[]const u8 = null,
 };
+
+// The JSON "params" field changes based on the "method". Initially, we just
+// capture the raw json object (including the opening and closing braces).
+// Then, when we're processing the message, and we know what type it is, we
+// can parse it (in Disaptch(T).params).
+const InputParams = struct {
+    raw: []const u8,
+
+    pub fn jsonParse(
+        _: Allocator,
+        scanner: *json.Scanner,
+        _: json.ParseOptions,
+    ) !InputParams {
+        const height = scanner.stackHeight();
+
+        const start = scanner.cursor;
+        if (try scanner.next() != .object_begin) {
+            return error.UnexpectedToken;
+        }
+        try scanner.skipUntilStackHeight(height);
+        const end = scanner.cursor;
+
+        return .{ .raw = scanner.input[start..end] };
+    }
+};
+
+const testing = @import("testing.zig");
+test "cdp: invalid json" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    try testing.expectError(error.InvalidJSON, ctx.processMessage("invalid"));
+
+    // method is required
+    try testing.expectError(error.InvalidJSON, ctx.processMessage(.{}));
+
+    try testing.expectError(error.InvalidMethod, ctx.processMessage(.{
+        .method = "Target",
+    }));
+    try ctx.expectSentError(-31998, "InvalidMethod", .{});
+
+    try testing.expectError(error.UnknownDomain, ctx.processMessage(.{
+        .method = "Unknown.domain",
+    }));
+
+    try testing.expectError(error.UnknownMethod, ctx.processMessage(.{
+        .method = "Target.over9000",
+    }));
+}
+
+test "cdp: invalid sessionId" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    {
+        // we have no browser context
+        try ctx.processMessage(.{ .method = "Hi", .sessionId = "nope" });
+        try ctx.expectSentError(-32001, "Unknown sessionId", .{});
+    }
+
+    {
+        // we have a brower context but no session_id
+        _ = try ctx.loadBrowserContext(.{});
+        try ctx.processMessage(.{ .method = "Hi", .sessionId = "BC-Has-No-SessionId" });
+        try ctx.expectSentError(-32001, "Unknown sessionId", .{});
+    }
+
+    {
+        // we have a brower context with a different session_id
+        _ = try ctx.loadBrowserContext(.{ .session_id = "SESS-2" });
+        try ctx.processMessage(.{ .method = "Hi", .sessionId = "SESS-1" });
+        try ctx.expectSentError(-32001, "Unknown sessionId", .{});
+    }
+}
+
+test "cdp: STARTUP sessionId" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    {
+        // we have no browser context
+        try ctx.processMessage(.{ .id = 2, .method = "Hi", .sessionId = "STARTUP" });
+        try ctx.expectSentResult(null, .{ .id = 2, .index = 0, .session_id = "STARTUP" });
+    }
+
+    {
+        // we have a brower context but no session_id
+        _ = try ctx.loadBrowserContext(.{});
+        try ctx.processMessage(.{ .id = 3, .method = "Hi", .sessionId = "STARTUP" });
+        try ctx.expectSentResult(null, .{ .id = 3, .index = 0, .session_id = "STARTUP" });
+    }
+
+    {
+        // we have a brower context with a different session_id
+        _ = try ctx.loadBrowserContext(.{ .session_id = "SESS-2" });
+        try ctx.processMessage(.{ .id = 4, .method = "Hi", .sessionId = "STARTUP" });
+        try ctx.expectSentResult(null, .{ .id = 4, .index = 0, .session_id = "STARTUP" });
+    }
+}

src/cdp/css.zig

@@ -1,59 +0,0 @@
-// Copyright (C) 2023-2024  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 server = @import("../server.zig");
-const Ctx = server.Ctx;
-const cdp = @import("cdp.zig");
-const result = cdp.result;
-const IncomingMessage = @import("msg.zig").IncomingMessage;
-const Input = @import("msg.zig").Input;
-
-const log = std.log.scoped(.cdp);
-
-const Methods = enum {
-    enable,
-};
-
-pub fn css(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    action: []const u8,
-    ctx: *Ctx,
-) ![]const u8 {
-    const method = std.meta.stringToEnum(Methods, action) orelse
-        return error.UnknownMethod;
-
-    return switch (method) {
-        .enable => enable(alloc, msg, ctx),
-    };
-}
-
-fn enable(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-    // input
-    const input = try Input(void).get(alloc, msg);
-    defer input.deinit();
-    log.debug("Req > id {d}, method {s}", .{ input.id, "inspector.enable" });
-
-    return result(alloc, input.id, null, null, input.sessionId);
-}

src/cdp/dom.zig

@@ -1,342 +0,0 @@
-// Copyright (C) 2023-2024  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 server = @import("../server.zig");
-const Ctx = server.Ctx;
-const cdp = @import("cdp.zig");
-const result = cdp.result;
-const IncomingMessage = @import("msg.zig").IncomingMessage;
-const Input = @import("msg.zig").Input;
-const css = @import("../dom/css.zig");
-
-const parser = @import("netsurf");
-
-const log = std.log.scoped(.cdp);
-
-const Methods = enum {
-    enable,
-    getDocument,
-    performSearch,
-    getSearchResults,
-    discardSearchResults,
-};
-
-pub fn dom(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    action: []const u8,
-    ctx: *Ctx,
-) ![]const u8 {
-    const method = std.meta.stringToEnum(Methods, action) orelse
-        return error.UnknownMethod;
-
-    return switch (method) {
-        .enable => enable(alloc, msg, ctx),
-        .getDocument => getDocument(alloc, msg, ctx),
-        .performSearch => performSearch(alloc, msg, ctx),
-        .getSearchResults => getSearchResults(alloc, msg, ctx),
-        .discardSearchResults => discardSearchResults(alloc, msg, ctx),
-    };
-}
-
-fn enable(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    _: *Ctx,
-) ![]const u8 {
-    // input
-    const input = try Input(void).get(alloc, msg);
-    defer input.deinit();
-    log.debug("Req > id {d}, method {s}", .{ input.id, "inspector.enable" });
-
-    return result(alloc, input.id, null, null, input.sessionId);
-}
-
-// NodeList references tree nodes with an array id.
-pub const NodeList = struct {
-    coll: List,
-
-    const List = std.ArrayList(*parser.Node);
-
-    pub fn init(alloc: std.mem.Allocator) NodeList {
-        return .{
-            .coll = List.init(alloc),
-        };
-    }
-
-    pub fn deinit(self: *NodeList) void {
-        self.coll.deinit();
-    }
-
-    pub fn reset(self: *NodeList) void {
-        self.coll.clearAndFree();
-    }
-
-    pub fn set(self: *NodeList, node: *parser.Node) !NodeId {
-        for (self.coll.items, 0..) |n, i| {
-            if (n == node) return @intCast(i);
-        }
-
-        try self.coll.append(node);
-        return @intCast(self.coll.items.len);
-    }
-};
-
-const NodeId = u32;
-
-const Node = struct {
-    nodeId: NodeId,
-    parentId: ?NodeId = null,
-    backendNodeId: NodeId,
-    nodeType: u32,
-    nodeName: []const u8 = "",
-    localName: []const u8 = "",
-    nodeValue: []const u8 = "",
-    childNodeCount: ?u32 = null,
-    children: ?[]const Node = null,
-    documentURL: ?[]const u8 = null,
-    baseURL: ?[]const u8 = null,
-    xmlVersion: []const u8 = "",
-    compatibilityMode: []const u8 = "NoQuirksMode",
-    isScrollable: bool = false,
-
-    fn init(n: *parser.Node, nlist: *NodeList) !Node {
-        const id = try nlist.set(n);
-        return .{
-            .nodeId = id,
-            .backendNodeId = id,
-            .nodeType = @intFromEnum(try parser.nodeType(n)),
-            .nodeName = try parser.nodeName(n),
-            .localName = try parser.nodeLocalName(n),
-            .nodeValue = try parser.nodeValue(n) orelse "",
-        };
-    }
-
-    fn initChildren(
-        self: *Node,
-        alloc: std.mem.Allocator,
-        n: *parser.Node,
-        nlist: *NodeList,
-    ) !std.ArrayList(Node) {
-        const children = try parser.nodeGetChildNodes(n);
-        const ln = try parser.nodeListLength(children);
-        self.childNodeCount = ln;
-
-        var list = try std.ArrayList(Node).initCapacity(alloc, ln);
-
-        var i: u32 = 0;
-        while (i < ln) {
-            defer i += 1;
-            const child = try parser.nodeListItem(children, i) orelse continue;
-            try list.append(try Node.init(child, nlist));
-        }
-
-        self.children = list.items;
-
-        return list;
-    }
-};
-
-// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getDocument
-fn getDocument(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    ctx: *Ctx,
-) ![]const u8 {
-    // input
-    const Params = struct {
-        depth: ?u32 = null,
-        pierce: ?bool = null,
-    };
-    const input = try Input(Params).get(alloc, msg);
-    defer input.deinit();
-    std.debug.assert(input.sessionId != null);
-    log.debug("Req > id {d}, method {s}", .{ input.id, "DOM.getDocument" });
-
-    // retrieve the root node
-    const page = ctx.browser.currentPage() orelse return error.NoPage;
-
-    if (page.doc == null) return error.NoDocument;
-
-    const node = parser.documentToNode(page.doc.?);
-    var n = try Node.init(node, &ctx.state.nodelist);
-    var list = try n.initChildren(alloc, node, &ctx.state.nodelist);
-    defer list.deinit();
-
-    // output
-    const Resp = struct {
-        root: Node,
-    };
-    const resp: Resp = .{
-        .root = n,
-    };
-
-    const res = try result(alloc, input.id, Resp, resp, input.sessionId);
-    try ctx.send(res);
-
-    return "";
-}
-
-pub const NodeSearch = struct {
-    coll: List,
-    name: []u8,
-    alloc: std.mem.Allocator,
-
-    var count: u8 = 0;
-
-    const List = std.ArrayListUnmanaged(NodeId);
-
-    pub fn initCapacity(alloc: std.mem.Allocator, ln: usize) !NodeSearch {
-        count += 1;
-
-        return .{
-            .alloc = alloc,
-            .coll = try List.initCapacity(alloc, ln),
-            .name = try std.fmt.allocPrint(alloc, "{d}", .{count}),
-        };
-    }
-
-    pub fn deinit(self: *NodeSearch) void {
-        self.coll.deinit(self.alloc);
-        self.alloc.free(self.name);
-    }
-
-    pub fn append(self: *NodeSearch, id: NodeId) !void {
-        try self.coll.append(self.alloc, id);
-    }
-};
-pub const NodeSearchList = std.ArrayList(NodeSearch);
-
-// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-performSearch
-fn performSearch(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    ctx: *Ctx,
-) ![]const u8 {
-    // input
-    const Params = struct {
-        query: []const u8,
-        includeUserAgentShadowDOM: ?bool = null,
-    };
-    const input = try Input(Params).get(alloc, msg);
-    defer input.deinit();
-    std.debug.assert(input.sessionId != null);
-    log.debug("Req > id {d}, method {s}", .{ input.id, "DOM.performSearch" });
-
-    // retrieve the root node
-    const page = ctx.browser.currentPage() orelse return error.NoPage;
-
-    if (page.doc == null) return error.NoDocument;
-
-    const list = try css.querySelectorAll(alloc, parser.documentToNode(page.doc.?), input.params.query);
-    const ln = list.nodes.items.len;
-    var ns = try NodeSearch.initCapacity(alloc, ln);
-
-    for (list.nodes.items) |n| {
-        const id = try ctx.state.nodelist.set(n);
-        try ns.append(id);
-    }
-
-    try ctx.state.nodesearchlist.append(ns);
-
-    // output
-    const Resp = struct {
-        searchId: []const u8,
-        resultCount: u32,
-    };
-    const resp: Resp = .{
-        .searchId = ns.name,
-        .resultCount = @intCast(ln),
-    };
-
-    return result(alloc, input.id, Resp, resp, input.sessionId);
-}
-
-// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-discardSearchResults
-fn discardSearchResults(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    ctx: *Ctx,
-) ![]const u8 {
-    // input
-    const Params = struct {
-        searchId: []const u8,
-    };
-    const input = try Input(Params).get(alloc, msg);
-    defer input.deinit();
-    std.debug.assert(input.sessionId != null);
-    log.debug("Req > id {d}, method {s}", .{ input.id, "DOM.discardSearchResults" });
-
-    // retrieve the search from context
-    for (ctx.state.nodesearchlist.items, 0..) |*s, i| {
-        if (!std.mem.eql(u8, s.name, input.params.searchId)) continue;
-
-        s.deinit();
-        _ = ctx.state.nodesearchlist.swapRemove(i);
-        break;
-    }
-
-    return result(alloc, input.id, null, null, input.sessionId);
-}
-
-// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getSearchResults
-fn getSearchResults(
-    alloc: std.mem.Allocator,
-    msg: *IncomingMessage,
-    ctx: *Ctx,
-) ![]const u8 {
-    // input
-    const Params = struct {
-        searchId: []const u8,
-        fromIndex: u32,
-        toIndex: u32,
-    };
-    const input = try Input(Params).get(alloc, msg);
-    defer input.deinit();
-    std.debug.assert(input.sessionId != null);
-    log.debug("Req > id {d}, method {s}", .{ input.id, "DOM.getSearchResults" });
-
-    if (input.params.fromIndex >= input.params.toIndex) return error.BadIndices;
-
-    // retrieve the search from context
-    var ns: ?*const NodeSearch = undefined;
-    for (ctx.state.nodesearchlist.items) |s| {
-        if (!std.mem.eql(u8, s.name, input.params.searchId)) continue;
-
-        ns = &s;
-        break;
-    }
-
-    if (ns == null) return error.searchResultNotFound;
-    const items = ns.?.coll.items;
-
-    if (input.params.fromIndex >= items.len) return error.BadFromIndex;
-    if (input.params.toIndex > items.len) return error.BadToIndex;
-
-    // output
-    const Resp = struct {
-        nodeIds: []NodeId,
-    };
-    const resp: Resp = .{
-        .nodeIds = ns.?.coll.items[input.params.fromIndex..input.params.toIndex],
-    };
-
-    return result(alloc, input.id, Resp, resp, input.sessionId);
-}

src/cdp/domains/browser.zig

@@ -0,0 +1,117 @@
+// Copyright (C) 2023-2024  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");
+
+// TODO: hard coded data
+const PROTOCOL_VERSION = "1.3";
+const PRODUCT = "Chrome/124.0.6367.29";
+const REVISION = "@9e6ded5ac1ff5e38d930ae52bd9aec09bd1a68e4";
+const USER_AGENT = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36";
+const JS_VERSION = "12.4.254.8";
+const DEV_TOOLS_WINDOW_ID = 1923710101;
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        getVersion,
+        setDownloadBehavior,
+        getWindowForTarget,
+        setWindowBounds,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .getVersion => return getVersion(cmd),
+        .setDownloadBehavior => return setDownloadBehavior(cmd),
+        .getWindowForTarget => return getWindowForTarget(cmd),
+        .setWindowBounds => return setWindowBounds(cmd),
+    }
+}
+
+fn getVersion(cmd: anytype) !void {
+    // TODO: pre-serialize?
+    return cmd.sendResult(.{
+        .protocolVersion = PROTOCOL_VERSION,
+        .product = PRODUCT,
+        .revision = REVISION,
+        .userAgent = USER_AGENT,
+        .jsVersion = JS_VERSION,
+    }, .{ .include_session_id = false });
+}
+
+// TODO: noop method
+fn setDownloadBehavior(cmd: anytype) !void {
+    // const params = (try cmd.params(struct {
+    //     behavior: []const u8,
+    //     browserContextId: ?[]const u8 = null,
+    //     downloadPath: ?[]const u8 = null,
+    //     eventsEnabled: ?bool = null,
+    // })) orelse return error.InvalidParams;
+
+    return cmd.sendResult(null, .{ .include_session_id = false });
+}
+
+fn getWindowForTarget(cmd: anytype) !void {
+    // const params = (try cmd.params(struct {
+    //     targetId: ?[]const u8 = null,
+    // })) orelse return error.InvalidParams;
+
+    return cmd.sendResult(.{ .windowId = DEV_TOOLS_WINDOW_ID, .bounds = .{
+        .windowState = "normal",
+    } }, .{});
+}
+
+// TODO: noop method
+fn setWindowBounds(cmd: anytype) !void {
+    return cmd.sendResult(null, .{});
+}
+
+const testing = @import("../testing.zig");
+test "cdp.browser: getVersion" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    try ctx.processMessage(.{
+        .id = 32,
+        .method = "Browser.getVersion",
+    });
+
+    try ctx.expectSentCount(1);
+    try ctx.expectSentResult(.{
+        .protocolVersion = PROTOCOL_VERSION,
+        .product = PRODUCT,
+        .revision = REVISION,
+        .userAgent = USER_AGENT,
+        .jsVersion = JS_VERSION,
+    }, .{ .id = 32, .index = 0, .session_id = null });
+}
+
+test "cdp.browser: getWindowForTarget" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    try ctx.processMessage(.{
+        .id = 33,
+        .method = "Browser.getWindowForTarget",
+    });
+
+    try ctx.expectSentCount(1);
+    try ctx.expectSentResult(.{
+        .windowId = DEV_TOOLS_WINDOW_ID,
+        .bounds = .{ .windowState = "normal" },
+    }, .{ .id = 33, .index = 0, .session_id = null });
+}

src/cdp/domains/css.zig

@@ -16,9 +16,14 @@
 // 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/>.
 
-pub const html: []const u8 =
-    \\<main id='content'>
-    \\<a href='foo'>OK</a>
-    \\<p>blah-blah-blah</p>
-    \\</main>
-;
+const std = @import("std");
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        enable,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .enable => return cmd.sendResult(null, .{}),
+    }
+}

src/cdp/domains/dom.zig

@@ -0,0 +1,401 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+const Node = @import("../Node.zig");
+const css = @import("../../browser/dom/css.zig");
+const parser = @import("../../browser/netsurf.zig");
+const dom_node = @import("../../browser/dom/node.zig");
+const DOMRect = @import("../../browser/dom/element.zig").Element.DOMRect;
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        enable,
+        getDocument,
+        performSearch,
+        getSearchResults,
+        discardSearchResults,
+        resolveNode,
+        describeNode,
+        scrollIntoViewIfNeeded,
+        getContentQuads,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .enable => return cmd.sendResult(null, .{}),
+        .getDocument => return getDocument(cmd),
+        .performSearch => return performSearch(cmd),
+        .getSearchResults => return getSearchResults(cmd),
+        .discardSearchResults => return discardSearchResults(cmd),
+        .resolveNode => return resolveNode(cmd),
+        .describeNode => return describeNode(cmd),
+        .scrollIntoViewIfNeeded => return scrollIntoViewIfNeeded(cmd),
+        .getContentQuads => return getContentQuads(cmd),
+    }
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getDocument
+fn getDocument(cmd: anytype) !void {
+    // const params = (try cmd.params(struct {
+    //     depth: ?u32 = null,
+    //     pierce: ?bool = null,
+    // })) orelse return error.InvalidParams;
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+    const page = bc.session.currentPage() orelse return error.PageNotLoaded;
+    const doc = page.doc orelse return error.DocumentNotLoaded;
+
+    const node = try bc.node_registry.register(parser.documentToNode(doc));
+    return cmd.sendResult(.{ .root = bc.nodeWriter(node, .{}) }, .{});
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-performSearch
+fn performSearch(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        query: []const u8,
+        includeUserAgentShadowDOM: ?bool = null,
+    })) orelse return error.InvalidParams;
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+    const page = bc.session.currentPage() orelse return error.PageNotLoaded;
+    const doc = page.doc orelse return error.DocumentNotLoaded;
+
+    const allocator = cmd.cdp.allocator;
+    var list = try css.querySelectorAll(allocator, parser.documentToNode(doc), params.query);
+    defer list.deinit(allocator);
+
+    const search = try bc.node_search_list.create(list.nodes.items);
+
+    // dispatch setChildNodesEvents to inform the client of the subpart of node
+    // tree covering the results.
+    try dispatchSetChildNodes(cmd, list.nodes.items);
+
+    return cmd.sendResult(.{
+        .searchId = search.name,
+        .resultCount = @as(u32, @intCast(search.node_ids.len)),
+    }, .{});
+}
+
+// dispatchSetChildNodes send the setChildNodes event for the whole DOM tree
+// hierarchy of each nodes.
+// We dispatch event in the reverse order: from the top level to the direct parents.
+// We should dispatch a node only if it has never been sent.
+fn dispatchSetChildNodes(cmd: anytype, nodes: []*parser.Node) !void {
+    const arena = cmd.arena;
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+    const session_id = bc.session_id orelse return error.SessionIdNotLoaded;
+
+    var parents: std.ArrayListUnmanaged(*Node) = .{};
+    for (nodes) |_n| {
+        var n = _n;
+        while (true) {
+            const p = try parser.nodeParentNode(n) orelse break;
+
+            // Register the node.
+            const node = try bc.node_registry.register(p);
+            if (node.set_child_nodes_event) break;
+            try parents.append(arena, node);
+            n = p;
+        }
+    }
+
+    const plen = parents.items.len;
+    if (plen == 0) return;
+
+    var i: usize = plen;
+    // We're going to iterate in reverse order from how we added them.
+    // This ensures that we're emitting the tree of nodes top-down.
+    while (i > 0) {
+        i -= 1;
+        const node = parents.items[i];
+        // Although our above loop won't add an already-sent node to `parents`
+        // this can still be true because two nodes can share the same parent node
+        // so we might have just sent the node a previous iteration of this loop
+        if (node.set_child_nodes_event) continue;
+
+        node.set_child_nodes_event = true;
+
+        // If the node has no parent, it's the root node.
+        // We don't dispatch event for it because we assume the root node is
+        // dispatched via the DOM.getDocument command.
+        const p = try parser.nodeParentNode(node._node) orelse {
+            continue;
+        };
+
+        // Retrieve the parent from the registry.
+        const parent_node = try bc.node_registry.register(p);
+
+        try cmd.sendEvent("DOM.setChildNodes", .{
+            .parentId = parent_node.id,
+            .nodes = .{bc.nodeWriter(node, .{})},
+        }, .{
+            .session_id = session_id,
+        });
+    }
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-discardSearchResults
+fn discardSearchResults(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        searchId: []const u8,
+    })) orelse return error.InvalidParams;
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+
+    bc.node_search_list.remove(params.searchId);
+    return cmd.sendResult(null, .{});
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getSearchResults
+fn getSearchResults(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        searchId: []const u8,
+        fromIndex: u32,
+        toIndex: u32,
+    })) orelse return error.InvalidParams;
+
+    if (params.fromIndex >= params.toIndex) {
+        return error.BadIndices;
+    }
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+
+    const search = bc.node_search_list.get(params.searchId) orelse {
+        return error.SearchResultNotFound;
+    };
+
+    const node_ids = search.node_ids;
+
+    if (params.fromIndex >= node_ids.len) return error.BadFromIndex;
+    if (params.toIndex > node_ids.len) return error.BadToIndex;
+
+    return cmd.sendResult(.{ .nodeIds = node_ids[params.fromIndex..params.toIndex] }, .{});
+}
+
+fn resolveNode(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        nodeId: ?Node.Id = null,
+        backendNodeId: ?u32 = null,
+        objectGroup: ?[]const u8 = null,
+        executionContextId: ?u32 = null,
+    })) orelse return error.InvalidParams;
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+    const page = bc.session.currentPage() orelse return error.PageNotLoaded;
+
+    var scope = page.scope;
+    if (params.executionContextId) |context_id| {
+        if (scope.context.debugContextId() != context_id) {
+            const isolated_world = bc.isolated_world orelse return error.ContextNotFound;
+            scope = isolated_world.scope orelse return error.ContextNotFound;
+
+            if (scope.context.debugContextId() != context_id) return error.ContextNotFound;
+        }
+    }
+
+    const input_node_id = params.nodeId orelse params.backendNodeId orelse return error.InvalidParam;
+    const node = bc.node_registry.lookup_by_id.get(input_node_id) orelse return error.UnknownNode;
+
+    // node._node is a *parser.Node we need this to be able to find its most derived type e.g. Node -> Element -> HTMLElement
+    // So we use the Node.Union when retrieve the value from the environment
+    const remote_object = try bc.inspector.getRemoteObject(
+        scope,
+        params.objectGroup orelse "",
+        try dom_node.Node.toInterface(node._node),
+    );
+    defer remote_object.deinit();
+
+    const arena = cmd.arena;
+    return cmd.sendResult(.{ .object = .{
+        .type = try remote_object.getType(arena),
+        .subtype = try remote_object.getSubtype(arena),
+        .className = try remote_object.getClassName(arena),
+        .description = try remote_object.getDescription(arena),
+        .objectId = try remote_object.getObjectId(arena),
+    } }, .{});
+}
+
+fn describeNode(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        nodeId: ?Node.Id = null,
+        backendNodeId: ?Node.Id = null,
+        objectId: ?[]const u8 = null,
+        depth: u32 = 1,
+        pierce: bool = false,
+    })) orelse return error.InvalidParams;
+
+    if (params.depth != 1 or params.pierce) return error.NotYetImplementedParams;
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+
+    const node = try getNode(cmd.arena, bc, params.nodeId, params.backendNodeId, params.objectId);
+
+    return cmd.sendResult(.{ .node = bc.nodeWriter(node, .{}) }, .{});
+}
+
+// An array of quad vertices, x immediately followed by y for each point, points clock-wise.
+// Note Y points downward
+// We are assuming the start/endpoint is not repeated.
+const Quad = [8]f64;
+
+fn rectToQuad(rect: DOMRect) Quad {
+    return Quad{
+        rect.x,
+        rect.y,
+        rect.x + rect.width,
+        rect.y,
+        rect.x + rect.width,
+        rect.y + rect.height,
+        rect.x,
+        rect.y + rect.height,
+    };
+}
+
+fn scrollIntoViewIfNeeded(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        nodeId: ?Node.Id = null,
+        backendNodeId: ?u32 = null,
+        objectId: ?[]const u8 = null,
+        rect: ?DOMRect = null,
+    })) orelse return error.InvalidParams;
+    // Only 1 of nodeId, backendNodeId, objectId may be set, but chrome just takes the first non-null
+
+    // We retrieve the node to at least check if it exists and is valid.
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+    const node = try getNode(cmd.arena, bc, params.nodeId, params.backendNodeId, params.objectId);
+
+    const node_type = parser.nodeType(node._node) catch return error.InvalidNode;
+    switch (node_type) {
+        .element => {},
+        .document => {},
+        .text => {},
+        else => return error.NodeDoesNotHaveGeometry,
+    }
+
+    return cmd.sendResult(null, .{});
+}
+
+fn getNode(arena: Allocator, browser_context: anytype, node_id: ?Node.Id, backend_node_id: ?Node.Id, object_id: ?[]const u8) !*Node {
+    const input_node_id = node_id orelse backend_node_id;
+    if (input_node_id) |input_node_id_| {
+        return browser_context.node_registry.lookup_by_id.get(input_node_id_) orelse return error.NodeNotFound;
+    }
+    if (object_id) |object_id_| {
+        // Retrieve the object from which ever context it is in.
+        const parser_node = try browser_context.inspector.getNodePtr(arena, object_id_);
+        return try browser_context.node_registry.register(@ptrCast(parser_node));
+    }
+    return error.MissingParams;
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/DOM/#method-getContentQuads
+// Related to: https://drafts.csswg.org/cssom-view/#the-geometryutils-interface
+fn getContentQuads(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        nodeId: ?Node.Id = null,
+        backendNodeId: ?Node.Id = null,
+        objectId: ?[]const u8 = null,
+    })) orelse return error.InvalidParams;
+
+    const bc = cmd.browser_context orelse return error.BrowserContextNotLoaded;
+
+    const node = try getNode(cmd.arena, bc, params.nodeId, params.backendNodeId, params.objectId);
+
+    // TODO likely if the following CSS properties are set the quads should be empty
+    // visibility: hidden
+    // display: none
+
+    if (try parser.nodeType(node._node) != .element) return error.NodeIsNotAnElement;
+    // TODO implement for document or text
+    // Most likely document would require some hierachgy in the renderer. It is left unimplemented till we have a good example.
+    // Text may be tricky, multiple quads in case of multiple lines? empty quads of text  = ""?
+    // Elements like SVGElement may have multiple quads.
+
+    const element = parser.nodeToElement(node._node);
+    const rect = try bc.session.page.?.state.renderer.getRect(element);
+    const quad = rectToQuad(rect);
+
+    return cmd.sendResult(.{ .quads = &.{quad} }, .{});
+}
+
+const testing = @import("../testing.zig");
+
+test "cdp.dom: getSearchResults unknown search id" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    try testing.expectError(error.BrowserContextNotLoaded, ctx.processMessage(.{
+        .id = 8,
+        .method = "DOM.getSearchResults",
+        .params = .{ .searchId = "Nope", .fromIndex = 0, .toIndex = 10 },
+    }));
+}
+
+test "cdp.dom: search flow" {
+    var ctx = testing.context();
+    defer ctx.deinit();
+
+    _ = try ctx.loadBrowserContext(.{ .id = "BID-A", .html = "<p>1</p> <p>2</p>" });
+
+    try ctx.processMessage(.{
+        .id = 12,
+        .method = "DOM.performSearch",
+        .params = .{ .query = "p" },
+    });
+    try ctx.expectSentResult(.{ .searchId = "0", .resultCount = 2 }, .{ .id = 12 });
+
+    {
+        // getSearchResults
+        try ctx.processMessage(.{
+            .id = 13,
+            .method = "DOM.getSearchResults",
+            .params = .{ .searchId = "0", .fromIndex = 0, .toIndex = 2 },
+        });
+        try ctx.expectSentResult(.{ .nodeIds = &.{ 0, 1 } }, .{ .id = 13 });
+
+        // different fromIndex
+        try ctx.processMessage(.{
+            .id = 14,
+            .method = "DOM.getSearchResults",
+            .params = .{ .searchId = "0", .fromIndex = 1, .toIndex = 2 },
+        });
+        try ctx.expectSentResult(.{ .nodeIds = &.{1} }, .{ .id = 14 });
+
+        // different toIndex
+        try ctx.processMessage(.{
+            .id = 15,
+            .method = "DOM.getSearchResults",
+            .params = .{ .searchId = "0", .fromIndex = 0, .toIndex = 1 },
+        });
+        try ctx.expectSentResult(.{ .nodeIds = &.{0} }, .{ .id = 15 });
+    }
+
+    try ctx.processMessage(.{
+        .id = 16,
+        .method = "DOM.discardSearchResults",
+        .params = .{ .searchId = "0" },
+    });
+    try ctx.expectSentResult(null, .{ .id = 16 });
+
+    // make sure the delete actually did something
+    try testing.expectError(error.SearchResultNotFound, ctx.processMessage(.{
+        .id = 17,
+        .method = "DOM.getSearchResults",
+        .params = .{ .searchId = "0", .fromIndex = 0, .toIndex = 1 },
+    }));
+}

src/cdp/domains/emulation.zig

@@ -0,0 +1,66 @@
+// Copyright (C) 2023-2024  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");
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        setEmulatedMedia,
+        setFocusEmulationEnabled,
+        setDeviceMetricsOverride,
+        setTouchEmulationEnabled,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .setEmulatedMedia => return setEmulatedMedia(cmd),
+        .setFocusEmulationEnabled => return setFocusEmulationEnabled(cmd),
+        .setDeviceMetricsOverride => return setDeviceMetricsOverride(cmd),
+        .setTouchEmulationEnabled => return setTouchEmulationEnabled(cmd),
+    }
+}
+
+// TODO: noop method
+fn setEmulatedMedia(cmd: anytype) !void {
+    // const input = (try const incoming.params(struct {
+    //     media: ?[]const u8 = null,
+    //     features: ?[]struct{
+    //         name: []const u8,
+    //         value: [] const u8
+    //     } = null,
+    // })) orelse return error.InvalidParams;
+
+    return cmd.sendResult(null, .{});
+}
+
+// TODO: noop method
+fn setFocusEmulationEnabled(cmd: anytype) !void {
+    // const input = (try const incoming.params(struct {
+    //     enabled: bool,
+    // })) orelse return error.InvalidParams;
+    return cmd.sendResult(null, .{});
+}
+
+// TODO: noop method
+fn setDeviceMetricsOverride(cmd: anytype) !void {
+    return cmd.sendResult(null, .{});
+}
+
+// TODO: noop method
+fn setTouchEmulationEnabled(cmd: anytype) !void {
+    return cmd.sendResult(null, .{});
+}

src/cdp/domains/fetch.zig

@@ -18,25 +18,12 @@
 
 const std = @import("std");
 
-const parser = @import("netsurf");
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        disable,
+    }, cmd.input.action) orelse return error.UnknownMethod;
 
-const Node = @import("node.zig").Node;
-
-// WEB IDL https://dom.spec.whatwg.org/#documenttype
-pub const DocumentType = struct {
-    pub const Self = parser.DocumentType;
-    pub const prototype = *Node;
-    pub const mem_guarantied = true;
-
-    pub fn get_name(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetName(self);
+    switch (action) {
+        .disable => return cmd.sendResult(null, .{}),
     }
-
-    pub fn get_publicId(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetPublicId(self);
-    }
-
-    pub fn get_systemId(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetSystemId(self);
-    }
-};
+}

src/cdp/domains/input.zig

@@ -0,0 +1,97 @@
+// Copyright (C) 2023-2024  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("../../browser/page.zig").Page;
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        dispatchMouseEvent,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .dispatchMouseEvent => return dispatchMouseEvent(cmd),
+    }
+}
+
+// https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-dispatchMouseEvent
+fn dispatchMouseEvent(cmd: anytype) !void {
+    const params = (try cmd.params(struct {
+        type: Type, // Type of the mouse event.
+        x: f32, // X coordinate of the event relative to the main frame's viewport.
+        y: f32, // Y coordinate of the event relative to the main frame's viewport. 0 refers to the top of the viewport and Y increases as it proceeds towards the bottom of the viewport.
+        // Many optional parameters are not implemented yet, see documentation url.
+
+        const Type = enum {
+            mousePressed,
+            mouseReleased,
+            mouseMoved,
+            mouseWheel,
+        };
+    })) orelse return error.InvalidParams;
+
+    try cmd.sendResult(null, .{});
+
+    // quickly ignore types we know we don't handle
+    switch (params.type) {
+        .mouseMoved, .mouseWheel => return,
+        else => {},
+    }
+
+    const bc = cmd.browser_context orelse return;
+    const page = bc.session.currentPage() orelse return;
+
+    const mouse_event = Page.MouseEvent{
+        .x = @intFromFloat(@floor(params.x)), // Decimal pixel values are not understood by netsurf or our renderer
+        .y = @intFromFloat(@floor(params.y)), // So we convert them once at intake here. Using floor such that -0.5 becomes -1 and 0.5 becomes 0.
+        .type = switch (params.type) {
+            .mousePressed => .pressed,
+            .mouseReleased => .released,
+            else => unreachable,
+        },
+    };
+    try page.mouseEvent(mouse_event);
+    // result already sent
+}
+
+fn clickNavigate(cmd: anytype, uri: std.Uri) !void {
+    const bc = cmd.browser_context.?;
+
+    var url_buf: std.ArrayListUnmanaged(u8) = .{};
+    try uri.writeToStream(.{
+        .scheme = true,
+        .authentication = true,
+        .authority = true,
+        .port = true,
+        .path = true,
+        .query = true,
+    }, url_buf.writer(cmd.arena));
+    const url = url_buf.items;
+
+    try cmd.sendEvent("Page.frameRequestedNavigation", .{
+        .url = url,
+        .frameId = bc.target_id.?,
+        .reason = "anchorClick",
+        .disposition = "currentTab",
+    }, .{ .session_id = bc.session_id.? });
+
+    bc.session.removePage();
+    _ = try bc.session.createPage(null);
+
+    try @import("page.zig").navigateToUrl(cmd, url, false);
+}

src/cdp/domains/inspector.zig

@@ -0,0 +1,29 @@
+// Copyright (C) 2023-2024  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");
+
+pub fn processMessage(cmd: anytype) !void {
+    const action = std.meta.stringToEnum(enum {
+        enable,
+    }, cmd.input.action) orelse return error.UnknownMethod;
+
+    switch (action) {
+        .enable => return cmd.sendResult(null, .{}),
+    }
+}