add set_pathname on URL

2026-03-29 16:10:04 +00:00 · 2025-07-09 15:35:02 -07:00
304 changed files with 21051 additions and 30715 deletions
--- a/.github/actions/install/action.yml
+++ b/.github/actions/install/action.yml
@@ -2,6 +2,10 @@ name: "Browsercore install"
 description: "Install deps for the project browsercore"

 inputs:
+  zig:
+    description: 'Zig version to install'
+    required: false
+    default: '0.14.1'
  arch:
    description: 'CPU arch used to select the v8 lib'
    required: false
@@ -13,11 +17,11 @@ inputs:
  zig-v8:
    description: 'zig v8 version to install'
    required: false
-    default: 'v0.1.35'
+    default: 'v0.1.27'
  v8:
    description: 'v8 version to install'
    required: false
-    default: '14.0.365.4'
+    default: '13.6.233.8'
  cache-dir:
    description: 'cache dir to use'
    required: false
@@ -34,8 +38,9 @@ runs:
        sudo apt-get update
        sudo apt-get install -y wget xz-utils python3 ca-certificates git pkg-config libglib2.0-dev gperf libexpat1-dev cmake clang

-    # Zig version used from the `minimum_zig_version` field in build.zig.zon
    - uses: mlugg/setup-zig@v2
+      with:
+        version: ${{ inputs.zig }}

    - name: Cache v8
      id: cache-v8
@@ -56,26 +61,15 @@ runs:
    - name: install v8
      shell: bash
      run: |
-        mkdir -p v8
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8.a
+        mkdir -p v8/out/${{ inputs.os }}/debug/obj/zig/
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/${{ inputs.os }}/debug/obj/zig/libc_v8.a

-    - name: Cache libiconv
-      id: cache-libiconv
-      uses: actions/cache@v4
-      env:
-        cache-name: cache-libiconv
-      with:
-        path: ${{ inputs.cache-dir }}/libiconv
-        key: vendor/libiconv/libiconv-1.17
+        mkdir -p v8/out/${{ inputs.os }}/release/obj/zig/
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/${{ inputs.os }}/release/obj/zig/libc_v8.a

-    - name: download libiconv
-      if: ${{ steps.cache-libiconv.outputs.cache-hit != 'true' }}
+    - name: libiconv
      shell: bash
-      run: make download-libiconv
-
-    - name: build libiconv
-      shell: bash
-      run: make build-libiconv
+      run: make install-libiconv

    - name: build mimalloc
      shell: bash
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -5,12 +5,8 @@ env:
  AWS_SECRET_ACCESS_KEY: ${{ secrets.NIGHTLY_BUILD_AWS_SECRET_ACCESS_KEY }}
  AWS_BUCKET: ${{ vars.NIGHTLY_BUILD_AWS_BUCKET }}
  AWS_REGION: ${{ vars.NIGHTLY_BUILD_AWS_REGION }}
-  RELEASE: ${{ github.ref_type == 'tag' && github.ref_name || 'nightly' }}

 on:
-  push:
-    tags:
-      - '*'
  schedule:
    - cron: "2 2 * * *"

@@ -30,9 +26,10 @@ jobs:
    timeout-minutes: 15

    steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
          submodules: recursive

      - uses: ./.github/actions/install
@@ -41,7 +38,7 @@ jobs:
          arch: ${{env.ARCH}}

      - name: zig build
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseSafe -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        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 }}
@@ -56,7 +53,7 @@ jobs:
        with:
          allowUpdates: true
          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
-          tag: ${{ env.RELEASE }}
+          tag: nightly

  build-linux-aarch64:
    env:
@@ -79,7 +76,7 @@ jobs:
          arch: ${{env.ARCH}}

      - name: zig build
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseSafe -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})

      - name: Rename binary
        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -94,15 +91,13 @@ jobs:
        with:
          allowUpdates: true
          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
-          tag: ${{ env.RELEASE }}
+          tag: nightly

  build-macos-aarch64:
    env:
      ARCH: aarch64
      OS: macos

-    # macos-14 runs on arm CPU. see
-    # https://github.com/actions/runner-images?tab=readme-ov-file
    runs-on: macos-14
    timeout-minutes: 15

@@ -119,7 +114,7 @@ jobs:
          arch: ${{env.ARCH}}

      - name: zig build
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        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 }}
@@ -134,14 +129,14 @@ jobs:
        with:
          allowUpdates: true
          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
-          tag: ${{ env.RELEASE }}
+          tag: nightly

  build-macos-x86_64:
    env:
      ARCH: x86_64
      OS: macos

-    runs-on: macos-14-large
+    runs-on: macos-14
    timeout-minutes: 15

    steps:
@@ -157,7 +152,7 @@ jobs:
          arch: ${{env.ARCH}}

      - name: zig build
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        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 }}
@@ -172,4 +167,4 @@ jobs:
        with:
          allowUpdates: true
          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
-          tag: ${{ env.RELEASE }}
+          tag: nightly
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@@ -28,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
--- a/.github/workflows/e2e-integration-test.yml
+++ b/.github/workflows/e2e-integration-test.yml
@@ -1,68 +0,0 @@
-name: e2e-integration-test
-
-env:
-  LIGHTPANDA_DISABLE_TELEMETRY: true
-
-on:
-  schedule:
-    - cron: "4 4 * * *"
-  # 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
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
-
-    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 -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
-
-      - name: upload artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: lightpanda-build-release
-          path: |
-            zig-out/bin/lightpanda
-          retention-days: 1
-
-  demo-scripts:
-    name: demo-integration-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 integration tests
-        run: |
-          ./lightpanda serve & echo $! > LPD.pid
-          go run integration/main.go
-          kill `cat LPD.pid`
--- a/.github/workflows/e2e-test.yml
+++ b/.github/workflows/e2e-test.yml
@@ -49,15 +49,16 @@ jobs:
    if: github.event.pull_request.draft == false

    steps:
-      - uses: actions/checkout@v6
+      - 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 -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})

      - name: upload artifact
        uses: actions/upload-artifact@v4
@@ -92,36 +93,15 @@ jobs:
      - name: run end to end tests
        run: |
          ./lightpanda serve & echo $! > LPD.pid
-          go run runner/main.go
+          go run runner/main.go --verbose
          kill `cat LPD.pid`

-      - name: build proxy
-        run: |
-          cd proxy
-          go build
-
-      - name: run end to end tests through proxy
-        run: |
-          ./proxy/proxy & echo $! > PROXY.id
-          ./lightpanda serve --http_proxy 'http://127.0.0.1:3000' & echo $! > LPD.pid
-          go run runner/main.go
-          kill `cat LPD.pid` `cat PROXY.id`
-
-      - name: run request interception through proxy
-        run: |
-          export PROXY_USERNAME=username PROXY_PASSWORD=password
-          ./proxy/proxy & echo $! > PROXY.id
-          ./lightpanda serve & echo $! > LPD.pid
-          URL=https://demo-browser.lightpanda.io/campfire-commerce/ node puppeteer/proxy_auth.js
-          BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
-          kill `cat LPD.pid` `cat PROXY.id`
-
  cdp-and-hyperfine-bench:
    name: cdp-and-hyperfine-bench
    needs: zig-build-release

    env:
-      MAX_MEMORY: 28000
+      MAX_MEMORY: 27000
      MAX_AVG_DURATION: 23
      LIGHTPANDA_DISABLE_TELEMETRY: true

--- a/.github/workflows/wpt.yml
+++ b/.github/workflows/wpt.yml
@@ -5,7 +5,6 @@ env:
  AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
  AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
  AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
-  LIGHTPANDA_DISABLE_TELEMETRY: true

 on:
  schedule:
@@ -22,9 +21,10 @@ jobs:
    timeout-minutes: 90

    steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
          submodules: recursive

      - uses: ./.github/actions/install
--- a/.github/workflows/zig-fmt.yml
+++ b/.github/workflows/zig-fmt.yml
@@ -1,5 +1,8 @@
 name: zig-fmt

+env:
+  ZIG_VERSION: 0.14.1
+
 on:
  pull_request:

@@ -29,13 +32,14 @@ jobs:
    timeout-minutes: 15

    steps:
-      - uses: actions/checkout@v6
+      - uses: mlugg/setup-zig@v2
+        with:
+          version: ${{ env.ZIG_VERSION }}
+
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

-      # Zig version used from the `minimum_zig_version` field in build.zig.zon
-      - uses: mlugg/setup-zig@v2
-
      - name: Run zig fmt
        id: fmt
        run: |
@@ -54,7 +58,6 @@ jobs:
          fi

          echo "${delimiter}" >> "${GITHUB_OUTPUT}"
-
      - name: Fail the job
        if: steps.fmt.outputs.zig_fmt_errs != ''
        run: exit 1
--- a/.github/workflows/zig-test.yml
+++ b/.github/workflows/zig-test.yml
@@ -47,15 +47,16 @@ jobs:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v6
+      - 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 debug
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a
+        run: zig build

      - name: upload artifact
        uses: actions/upload-artifact@v4
@@ -103,7 +104,7 @@ jobs:
      - uses: ./.github/actions/install

      - name: zig build test
-        run: zig build  -Dprebuilt_v8_path=v8/libc_v8.a test -- --json > bench.json
+        run: zig build test -- --json > bench.json

      - name: write commit
        run: |
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 zig-cache
 /.zig-cache/
-/.lp-cache/
 zig-out
 /vendor/netsurf/out
 /vendor/libiconv/
--- a/.gitmodules
+++ b/.gitmodules
@@ -9,7 +9,7 @@
 	url = https://github.com/lightpanda-io/libdom.git/
 [submodule "vendor/netsurf/share/netsurf-buildsystem"]
 	path = vendor/netsurf/share/netsurf-buildsystem
-	url = https://github.com/lightpanda-io/netsurf-buildsystem.git
+	url = https://source.netsurf-browser.org/buildsystem.git
 [submodule "vendor/netsurf/libhubbub"]
 	path = vendor/netsurf/libhubbub
 	url = https://github.com/lightpanda-io/libhubbub.git/
@@ -19,15 +19,3 @@
 [submodule "vendor/mimalloc"]
 	path = vendor/mimalloc
 	url = https://github.com/microsoft/mimalloc.git/
-[submodule "vendor/nghttp2"]
-	path = vendor/nghttp2
-	url = https://github.com/nghttp2/nghttp2.git
-[submodule "vendor/zlib"]
-	path = vendor/zlib
-	url = https://github.com/madler/zlib.git
-[submodule "vendor/curl"]
-	path = vendor/curl
-	url = https://github.com/curl/curl.git
-[submodule "vendor/brotli"]
-	path = vendor/brotli
-	url = https://github.com/google/brotli
--- a/45
+++ b/45
@@ -1,9 +1,10 @@
-FROM debian:stable-slim
+FROM debian:stable

 ARG MINISIG=0.12
+ARG ZIG=0.14.1
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
-ARG V8=14.0.365.4
-ARG ZIG_V8=v0.1.34
+ARG V8=13.6.233.8
+ARG ZIG_V8=v0.1.27
 ARG TARGETPLATFORM

 RUN apt-get update -yq && \
@@ -16,25 +17,25 @@ RUN apt-get update -yq && \

 # install minisig
 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 -C /
-
-# clone lightpanda
-RUN git clone https://github.com/lightpanda-io/browser.git
-WORKDIR /browser
+    tar xvzf minisign-${MINISIG}-linux.tar.gz

 # install zig
-RUN ZIG=$(grep '\.minimum_zig_version = "' "build.zig.zon" | cut -d'"' -f2) && \
-    case $TARGETPLATFORM in \
-      "linux/arm64") ARCH="aarch64" ;; \
-      *) ARCH="x86_64" ;; \
+RUN case $TARGETPLATFORM in \
+    "linux/arm64") ARCH="aarch64" ;; \
+    *) ARCH="x86_64" ;; \
    esac && \
    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz && \
    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz.minisig && \
-    /minisign-linux/${ARCH}/minisign -Vm zig-${ARCH}-linux-${ZIG}.tar.xz -P ${ZIG_MINISIG} && \
+    minisign-linux/${ARCH}/minisign -Vm zig-${ARCH}-linux-${ZIG}.tar.xz -P ${ZIG_MINISIG} && \
    tar xvf zig-${ARCH}-linux-${ZIG}.tar.xz && \
    mv zig-${ARCH}-linux-${ZIG} /usr/local/lib && \
    ln -s /usr/local/lib/zig-${ARCH}-linux-${ZIG}/zig /usr/local/bin/zig

+# clone lightpanda
+RUN git clone https://github.com/lightpanda-io/browser.git
+
+WORKDIR /browser
+
 # install deps
 RUN git submodule init && \
    git submodule update --recursive
@@ -49,16 +50,11 @@ RUN case $TARGETPLATFORM in \
    *) ARCH="x86_64" ;; \
    esac && \
    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/ && \
-    mv libc_v8.a v8/libc_v8.a
+    mkdir -p v8/out/linux/release/obj/zig/ && \
+    mv libc_v8.a v8/out/linux/release/obj/zig/libc_v8.a

 # build release
-RUN zig build -Doptimize=ReleaseSafe -Dprebuilt_v8_path=v8/libc_v8.a -Dgit_commit=$$(git rev-parse --short HEAD)
-
-FROM debian:stable-slim
-
-RUN apt-get update -yq && \
-    apt-get install -yq tini
+RUN make build

 FROM debian:stable-slim

@@ -66,12 +62,7 @@ FROM debian:stable-slim
 COPY --from=0 /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt

 COPY --from=0 /browser/zig-out/bin/lightpanda /bin/lightpanda
-COPY --from=1 /usr/bin/tini /usr/bin/tini

 EXPOSE 9222/tcp

-# Lightpanda install only some signal handlers, and PID 1 doesn't have a default SIGTERM signal handler.
-# Using "tini" as PID1 ensures that signals work as expected, so e.g. "docker stop" will not hang.
-# (See https://github.com/krallin/tini#why-tini).
-ENTRYPOINT ["/usr/bin/tini", "--"]
-CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222", "--log_level", "info"]
+CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222"]
--- a/97
+++ b/97
@@ -34,7 +34,7 @@ endif

 ## Display this help screen
 help:
-	@printf "\033[36m%-35s %s\033[0m\n" "Command" "Usage"
+	@printf "\e[36m%-35s %s\e[0m\n" "Command" "Usage"
 	@sed -n -e '/^## /{'\
 		-e 's/## //g;'\
 		-e 'h;'\
@@ -47,60 +47,77 @@ help:

 # $(ZIG) commands
 # ------------
-.PHONY: build build-dev run run-release shell test bench wpt data end2end
+.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)
+
+## Download the zig recommended version
+download-zig:
+	$(eval url = "https://ziglang.org/download/$(zig_version)/zig-$(OS)-$(ARCH)-$(zig_version).tar.xz")
+	$(eval dest = "/tmp/zig-$(OS)-$(ARCH)-$(zig_version).tar.xz")
+	@printf "\e[36mDownload zig version $(zig_version)...\e[0m\n"
+	@curl -o "$(dest)" -L "$(url)" || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@printf "\e[33mDownloaded $(dest)\e[0m\n"

 ## Build in release-safe mode
 build:
-	@printf "\033[36mBuilding (release safe)...\033[0m\n"
-	$(ZIG) build -Doptimize=ReleaseSafe -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-	@printf "\033[33mBuild OK\033[0m\n"
+	@printf "\e[36mBuilding (release safe)...\e[0m\n"
+	$(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 "\033[36mBuilding (debug)...\033[0m\n"
-	@$(ZIG) build -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-	@printf "\033[33mBuild OK\033[0m\n"
+	@printf "\e[36mBuilding (debug)...\e[0m\n"
+	@$(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 release mode
 run: build
-	@printf "\033[36mRunning...\033[0m\n"
-	@./zig-out/bin/lightpanda || (printf "\033[33mRun ERROR\033[0m\n"; exit 1;)
+	@printf "\e[36mRunning...\e[0m\n"
+	@./zig-out/bin/lightpanda || (printf "\e[33mRun ERROR\e[0m\n"; exit 1;)

 ## Run the server in debug mode
 run-debug: build-dev
-	@printf "\033[36mRunning...\033[0m\n"
-	@./zig-out/bin/lightpanda || (printf "\033[33mRun ERROR\033[0m\n"; exit 1;)
+	@printf "\e[36mRunning...\e[0m\n"
+	@./zig-out/bin/lightpanda || (printf "\e[33mRun ERROR\e[0m\n"; exit 1;)

 ## Run a JS shell in debug mode
 shell:
-	@printf "\033[36mBuilding shell...\033[0m\n"
-	@$(ZIG) build shell || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\e[36mBuilding shell...\e[0m\n"
+	@$(ZIG) build shell || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)

 ## Run WPT tests
 wpt:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\e[36mBuilding wpt...\e[0m\n"
+	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)

 wpt-summary:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
+	@printf "\e[36mBuilding wpt...\e[0m\n"
+	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)

-## Test - `grep` is used to filter out the huge compile command on build
-ifeq ($(OS), macos)
+## Test
 test:
-	@script -q /dev/null sh -c 'TEST_FILTER="${F}" $(ZIG) build test -freference-trace --summary all' 2>&1 \
-		| grep --line-buffered -v "^/.*zig test -freference-trace"
-else
-test:
-	@script -qec 'TEST_FILTER="${F}" $(ZIG) build test -freference-trace --summary all' /dev/null 2>&1 \
-		| grep --line-buffered -v "^/.*zig test -freference-trace"
-endif
+	@TEST_FILTER='${F}' $(ZIG) build test -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
@@ -127,27 +144,27 @@ ICONV := $(BC)vendor/libiconv/out/$(OS)-$(ARCH)
 # TODO: this way of linking libiconv is not ideal. We should have a more generic way
 # and stick to a specif version. Maybe build from source. Anyway not now.
 _install-netsurf: clean-netsurf
-	@printf "\033[36mInstalling NetSurf...\033[0m\n" && \
-	ls $(ICONV)/lib/libiconv.a 1> /dev/null || (printf "\033[33mERROR: you need to execute 'make install-libiconv'\033[0m\n"; exit 1;) && \
+	@printf "\e[36mInstalling NetSurf...\e[0m\n" && \
+	ls $(ICONV)/lib/libiconv.a 1> /dev/null || (printf "\e[33mERROR: you need to execute 'make install-libiconv'\e[0m\n"; exit 1;) && \
 	mkdir -p $(BC_NS) && \
 	cp -R vendor/netsurf/share $(BC_NS) && \
 	export PREFIX=$(BC_NS) && \
 	export OPTLDFLAGS="-L$(ICONV)/lib" && \
 	export OPTCFLAGS="$(OPTCFLAGS) -I$(ICONV)/include" && \
-	printf "\033[33mInstalling libwapcaplet...\033[0m\n" && \
+	printf "\e[33mInstalling libwapcaplet...\e[0m\n" && \
 	cd vendor/netsurf/libwapcaplet && \
 	BUILDDIR=$(BC_NS)/build/libwapcaplet make install && \
 	cd ../libparserutils && \
-	printf "\033[33mInstalling libparserutils...\033[0m\n" && \
+	printf "\e[33mInstalling libparserutils...\e[0m\n" && \
 	BUILDDIR=$(BC_NS)/build/libparserutils make install && \
 	cd ../libhubbub && \
-	printf "\033[33mInstalling libhubbub...\033[0m\n" && \
+	printf "\e[33mInstalling libhubbub...\e[0m\n" && \
 	BUILDDIR=$(BC_NS)/build/libhubbub make install && \
 	rm src/treebuilder/autogenerated-element-type.c && \
 	cd ../libdom && \
-	printf "\033[33mInstalling libdom...\033[0m\n" && \
+	printf "\e[33mInstalling libdom...\e[0m\n" && \
 	BUILDDIR=$(BC_NS)/build/libdom make install && \
-	printf "\033[33mRunning libdom example...\033[0m\n" && \
+	printf "\e[33mRunning libdom example...\e[0m\n" && \
 	cd examples && \
 	$(ZIG) cc \
 	-I$(ICONV)/include \
@@ -164,14 +181,14 @@ _install-netsurf: clean-netsurf
 	$(ICONV)/lib/libiconv.a && \
 	./a.out > /dev/null && \
 	rm a.out && \
-	printf "\033[36mDone NetSurf $(OS)\033[0m\n"
+	printf "\e[36mDone NetSurf $(OS)\e[0m\n"

 clean-netsurf:
-	@printf "\033[36mCleaning NetSurf build...\033[0m\n" && \
+	@printf "\e[36mCleaning NetSurf build...\e[0m\n" && \
 	rm -Rf $(BC_NS)

 test-netsurf:
-	@printf "\033[36mTesting NetSurf...\033[0m\n" && \
+	@printf "\e[36mTesting NetSurf...\e[0m\n" && \
 	export PREFIX=$(BC_NS) && \
 	export LDFLAGS="-L$(ICONV)/lib -L$(BC_NS)/lib" && \
 	export CFLAGS="-I$(ICONV)/include -I$(BC_NS)/include" && \
@@ -182,16 +199,14 @@ download-libiconv:
 ifeq ("$(wildcard vendor/libiconv/libiconv-1.17)","")
 	@mkdir -p vendor/libiconv
 	@cd vendor/libiconv && \
-	curl -L https://github.com/lightpanda-io/libiconv/releases/download/1.17/libiconv-1.17.tar.gz | tar -xvzf -
+	curl https://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.17.tar.gz | tar -xvzf -
 endif

-build-libiconv: clean-libiconv
+install-libiconv: download-libiconv clean-libiconv
 	@cd vendor/libiconv/libiconv-1.17 && \
 	./configure --prefix=$(ICONV) --enable-static && \
 	make && make install

-install-libiconv: download-libiconv build-libiconv
-
 clean-libiconv:
 ifneq ("$(wildcard vendor/libiconv/libiconv-1.17/Makefile)","")
 	@cd vendor/libiconv/libiconv-1.17 && \
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Lightpanda is the open-source browser made for headless usage:

 - Javascript execution
 - Support of Web APIs (partial, WIP)
- Compatible with Playwright[^1], Puppeteer, chromedp through [CDP](https://chromedevtools.github.io/devtools-protocol/)
+- Compatible with Playwright[^1], Puppeteer, chromedp through CDP

 Fast web automation for AI agents, LLM training, scraping and testing:

@@ -41,7 +41,7 @@ Due to the nature of Playwright, a script that works with the current version of

 ## Quick start

-### Install
+### Install 
 **Install from the nightly builds**

 You can download the last binary from the [nightly
@@ -71,8 +71,9 @@ Lightpanda provides [official Docker
 images](https://hub.docker.com/r/lightpanda/browser) for both Linux amd64 and
 arm64 architectures.
 The following command fetches the Docker image and starts a new container exposing Lightpanda's CDP server on port `9222`.
+The `--privileged` option is required because the browser requires `io_uring` syscalls which are blocked by default by Docker.
 ```console
-docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
+docker run -d --name lightpanda -p 9222:9222 --privileged lightpanda/browser:nightly
 ```

 ### Dump a URL
@@ -140,7 +141,8 @@ You may still encounter errors or crashes. Please open an issue with specifics i

 Here are the key features we have implemented:

- [x] HTTP loader (based on Libcurl)
+- [x] HTTP loader
+- [x] HTTP loader
 - [x] HTML parser and DOM tree (based on Netsurf libs)
 - [x] Javascript support (v8)
 - [x] DOM APIs
@@ -153,26 +155,26 @@ Here are the key features we have implemented:
 - [x] Input form
 - [x] Cookies
 - [x] Custom HTTP headers
- [x] Proxy support
- [x] Network interception
+- [ ] Proxy support
+- [ ] Network interception 

 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.15.2`. You have to
+Lightpanda is written with [Zig](https://ziglang.org/) `0.14.1`. You have to
 install it with the right version in order to build the project.

 Lightpanda also depends on
-[zig-v8-fork](https://github.com/lightpanda-io/zig-v8-fork/),
-[Libcurl](https://curl.se/libcurl/),
-[Brotli](https://github.com/google/brotli),
+[zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime/) (with v8),
 [Netsurf libs](https://www.netsurf-browser.org/) and
 [Mimalloc](https://microsoft.github.io/mimalloc).

-To be able to build the v8 engine, you have to install some libs:
+To be able to build the v8 engine for zig-js-runtime, you have to install some libs:

 For Debian/Ubuntu based Linux:

@@ -189,10 +191,10 @@ For systems with [Nix](https://nixos.org/download/), you can use the devShell:
 nix develop
 ```

-For MacOS, you need [Xcode](https://developer.apple.com/xcode/) and the following pacakges from homebrew:
+For MacOS, you only need cmake:

 ```
-brew install cmake pkgconf
+brew install cmake
 ```

 ### Install and build dependencies
@@ -245,6 +247,22 @@ 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).

+**v8**
+
+First, get the tools necessary for building V8, as well as the V8 source code:
+
+```
+make get-v8
+```
+
+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

 ### Unit Tests
--- a/build.zig
+++ b/build.zig
@@ -19,32 +19,33 @@
 const std = @import("std");
 const builtin = @import("builtin");

-const Build = std.Build;
+/// Do not rename this constant. It is scanned by some scripts to determine
+/// which zig version to install.
+const recommended_zig_version = "0.14.1";

-pub fn build(b: *Build) !void {
-    const target = b.standardTargetOptions(.{});
-    const optimize = b.standardOptimizeOption(.{});
-
-    const manifest = Manifest.init(b);
-
-    const git_commit = b.option([]const u8, "git_commit", "Current git commit");
-    const prebuilt_v8_path = b.option([]const u8, "prebuilt_v8_path", "Path to prebuilt libc_v8.a");
+pub fn build(b: *std.Build) !void {
+    switch (comptime builtin.zig_version.order(std.SemanticVersion.parse(recommended_zig_version) catch unreachable)) {
+        .eq => {},
+        .lt => {
+            @compileError("The minimum version of Zig required to compile is '" ++ recommended_zig_version ++ "', found '" ++ builtin.zig_version_string ++ "'.");
+        },
+        .gt => {
+            std.debug.print(
+                "WARNING: Recommended Zig version '{s}', but found '{s}', build may fail...\n\n",
+                .{ recommended_zig_version, builtin.zig_version_string },
+            );
+        },
+    }

    var opts = b.addOptions();
-    opts.addOption([]const u8, "version", manifest.version);
-    opts.addOption([]const u8, "git_commit", git_commit orelse "dev");
+    opts.addOption(
+        []const u8,
+        "git_commit",
+        b.option([]const u8, "git_commit", "Current git commit") orelse "dev",
+    );

-    // We're still using llvm because the new x86 backend seems to crash with v8.
-    // This can be reproduced in zig-v8-fork.
-
-    const lightpanda_module = b.addModule("lightpanda", .{
-        .root_source_file = b.path("src/main.zig"),
-        .target = target,
-        .optimize = optimize,
-        .link_libc = true,
-        .link_libcpp = true,
-    });
-    try addDependencies(b, lightpanda_module, opts, prebuilt_v8_path);
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});

    {
        // browser
@@ -53,9 +54,12 @@ pub fn build(b: *Build) !void {
        // compile and install
        const exe = b.addExecutable(.{
            .name = "lightpanda",
-            .use_llvm = true,
-            .root_module = lightpanda_module,
+            .target = target,
+            .optimize = optimize,
+            .root_source_file = b.path("src/main.zig"),
        });
+
+        try common(b, opts, exe);
        b.installArtifact(exe);

        // run
@@ -69,16 +73,36 @@ pub fn build(b: *Build) !void {
        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_module = lightpanda_module,
-            .use_llvm = true,
+            .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| {
@@ -93,19 +117,15 @@ pub fn build(b: *Build) !void {
    {
        // wpt
        // -----
-        const wpt_module = b.createModule(.{
-            .root_source_file = b.path("src/main_wpt.zig"),
-            .target = target,
-            .optimize = optimize,
-        });
-        try addDependencies(b, wpt_module, opts, prebuilt_v8_path);

        // compile and install
        const wpt = b.addExecutable(.{
            .name = "lightpanda-wpt",
-            .use_llvm = true,
-            .root_module = wpt_module,
+            .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);
@@ -118,19 +138,15 @@ pub fn build(b: *Build) !void {
    }
 }

-fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options, prebuilt_v8_path: ?[]const u8) !void {
-    try moduleNetSurf(b, mod);
-    mod.addImport("build_config", opts.createModule());
-
+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 dep_opts = .{
-        .target = target,
-        .optimize = mod.optimize.?,
-        .prebuilt_v8_path = prebuilt_v8_path,
-        .cache_root = b.pathFromRoot(".lp-cache"),
-    };
+    const optimize = mod.optimize.?;
+    const dep_opts = .{ .target = target, .optimize = optimize };

-    mod.addIncludePath(b.path("vendor/lightpanda"));
+    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
@@ -142,216 +158,44 @@ fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options, pre
        mod.addImport("v8", v8_mod);
    }

+    mod.link_libcpp = true;
+
    {
-        //curl
-        {
-            const is_linux = target.result.os.tag == .linux;
-            if (is_linux) {
-                mod.addCMacro("HAVE_LINUX_TCP_H", "1");
-                mod.addCMacro("HAVE_MSG_NOSIGNAL", "1");
-                mod.addCMacro("HAVE_GETHOSTBYNAME_R", "1");
-            }
-            mod.addCMacro("_FILE_OFFSET_BITS", "64");
-            mod.addCMacro("BUILDING_LIBCURL", "1");
-            mod.addCMacro("CURL_DISABLE_AWS", "1");
-            mod.addCMacro("CURL_DISABLE_DICT", "1");
-            mod.addCMacro("CURL_DISABLE_DOH", "1");
-            mod.addCMacro("CURL_DISABLE_FILE", "1");
-            mod.addCMacro("CURL_DISABLE_FTP", "1");
-            mod.addCMacro("CURL_DISABLE_GOPHER", "1");
-            mod.addCMacro("CURL_DISABLE_KERBEROS", "1");
-            mod.addCMacro("CURL_DISABLE_IMAP", "1");
-            mod.addCMacro("CURL_DISABLE_IPFS", "1");
-            mod.addCMacro("CURL_DISABLE_LDAP", "1");
-            mod.addCMacro("CURL_DISABLE_LDAPS", "1");
-            mod.addCMacro("CURL_DISABLE_MQTT", "1");
-            mod.addCMacro("CURL_DISABLE_NTLM", "1");
-            mod.addCMacro("CURL_DISABLE_PROGRESS_METER", "1");
-            mod.addCMacro("CURL_DISABLE_POP3", "1");
-            mod.addCMacro("CURL_DISABLE_RTSP", "1");
-            mod.addCMacro("CURL_DISABLE_SMB", "1");
-            mod.addCMacro("CURL_DISABLE_SMTP", "1");
-            mod.addCMacro("CURL_DISABLE_TELNET", "1");
-            mod.addCMacro("CURL_DISABLE_TFTP", "1");
-            mod.addCMacro("CURL_EXTERN_SYMBOL", "__attribute__ ((__visibility__ (\"default\"))");
-            mod.addCMacro("CURL_OS", if (is_linux) "\"Linux\"" else "\"mac\"");
-            mod.addCMacro("CURL_STATICLIB", "1");
-            mod.addCMacro("ENABLE_IPV6", "1");
-            mod.addCMacro("HAVE_ALARM", "1");
-            mod.addCMacro("HAVE_ALLOCA_H", "1");
-            mod.addCMacro("HAVE_ARPA_INET_H", "1");
-            mod.addCMacro("HAVE_ARPA_TFTP_H", "1");
-            mod.addCMacro("HAVE_ASSERT_H", "1");
-            mod.addCMacro("HAVE_BASENAME", "1");
-            mod.addCMacro("HAVE_BOOL_T", "1");
-            mod.addCMacro("HAVE_BROTLI", "1");
-            mod.addCMacro("HAVE_BUILTIN_AVAILABLE", "1");
-            mod.addCMacro("HAVE_CLOCK_GETTIME_MONOTONIC", "1");
-            mod.addCMacro("HAVE_DLFCN_H", "1");
-            mod.addCMacro("HAVE_ERRNO_H", "1");
-            mod.addCMacro("HAVE_FCNTL", "1");
-            mod.addCMacro("HAVE_FCNTL_H", "1");
-            mod.addCMacro("HAVE_FCNTL_O_NONBLOCK", "1");
-            mod.addCMacro("HAVE_FREEADDRINFO", "1");
-            mod.addCMacro("HAVE_FSETXATTR", "1");
-            mod.addCMacro("HAVE_FSETXATTR_5", "1");
-            mod.addCMacro("HAVE_FTRUNCATE", "1");
-            mod.addCMacro("HAVE_GETADDRINFO", "1");
-            mod.addCMacro("HAVE_GETEUID", "1");
-            mod.addCMacro("HAVE_GETHOSTBYNAME", "1");
-            mod.addCMacro("HAVE_GETHOSTBYNAME_R_6", "1");
-            mod.addCMacro("HAVE_GETHOSTNAME", "1");
-            mod.addCMacro("HAVE_GETPEERNAME", "1");
-            mod.addCMacro("HAVE_GETPPID", "1");
-            mod.addCMacro("HAVE_GETPPID", "1");
-            mod.addCMacro("HAVE_GETPROTOBYNAME", "1");
-            mod.addCMacro("HAVE_GETPWUID", "1");
-            mod.addCMacro("HAVE_GETPWUID_R", "1");
-            mod.addCMacro("HAVE_GETRLIMIT", "1");
-            mod.addCMacro("HAVE_GETSOCKNAME", "1");
-            mod.addCMacro("HAVE_GETTIMEOFDAY", "1");
-            mod.addCMacro("HAVE_GMTIME_R", "1");
-            mod.addCMacro("HAVE_IDN2_H", "1");
-            mod.addCMacro("HAVE_IF_NAMETOINDEX", "1");
-            mod.addCMacro("HAVE_IFADDRS_H", "1");
-            mod.addCMacro("HAVE_INET_ADDR", "1");
-            mod.addCMacro("HAVE_INET_PTON", "1");
-            mod.addCMacro("HAVE_INTTYPES_H", "1");
-            mod.addCMacro("HAVE_IOCTL", "1");
-            mod.addCMacro("HAVE_IOCTL_FIONBIO", "1");
-            mod.addCMacro("HAVE_IOCTL_SIOCGIFADDR", "1");
-            mod.addCMacro("HAVE_LDAP_URL_PARSE", "1");
-            mod.addCMacro("HAVE_LIBGEN_H", "1");
-            mod.addCMacro("HAVE_LIBZ", "1");
-            mod.addCMacro("HAVE_LL", "1");
-            mod.addCMacro("HAVE_LOCALE_H", "1");
-            mod.addCMacro("HAVE_LOCALTIME_R", "1");
-            mod.addCMacro("HAVE_LONGLONG", "1");
-            mod.addCMacro("HAVE_MALLOC_H", "1");
-            mod.addCMacro("HAVE_MEMORY_H", "1");
-            mod.addCMacro("HAVE_NET_IF_H", "1");
-            mod.addCMacro("HAVE_NETDB_H", "1");
-            mod.addCMacro("HAVE_NETINET_IN_H", "1");
-            mod.addCMacro("HAVE_NETINET_TCP_H", "1");
-            mod.addCMacro("HAVE_PIPE", "1");
-            mod.addCMacro("HAVE_POLL", "1");
-            mod.addCMacro("HAVE_POLL_FINE", "1");
-            mod.addCMacro("HAVE_POLL_H", "1");
-            mod.addCMacro("HAVE_POSIX_STRERROR_R", "1");
-            mod.addCMacro("HAVE_PTHREAD_H", "1");
-            mod.addCMacro("HAVE_PWD_H", "1");
-            mod.addCMacro("HAVE_RECV", "1");
-            mod.addCMacro("HAVE_SA_FAMILY_T", "1");
-            mod.addCMacro("HAVE_SELECT", "1");
-            mod.addCMacro("HAVE_SEND", "1");
-            mod.addCMacro("HAVE_SETJMP_H", "1");
-            mod.addCMacro("HAVE_SETLOCALE", "1");
-            mod.addCMacro("HAVE_SETRLIMIT", "1");
-            mod.addCMacro("HAVE_SETSOCKOPT", "1");
-            mod.addCMacro("HAVE_SIGACTION", "1");
-            mod.addCMacro("HAVE_SIGINTERRUPT", "1");
-            mod.addCMacro("HAVE_SIGNAL", "1");
-            mod.addCMacro("HAVE_SIGNAL_H", "1");
-            mod.addCMacro("HAVE_SIGSETJMP", "1");
-            mod.addCMacro("HAVE_SOCKADDR_IN6_SIN6_SCOPE_ID", "1");
-            mod.addCMacro("HAVE_SOCKET", "1");
-            mod.addCMacro("HAVE_STDBOOL_H", "1");
-            mod.addCMacro("HAVE_STDINT_H", "1");
-            mod.addCMacro("HAVE_STDIO_H", "1");
-            mod.addCMacro("HAVE_STDLIB_H", "1");
-            mod.addCMacro("HAVE_STRCASECMP", "1");
-            mod.addCMacro("HAVE_STRDUP", "1");
-            mod.addCMacro("HAVE_STRERROR_R", "1");
-            mod.addCMacro("HAVE_STRING_H", "1");
-            mod.addCMacro("HAVE_STRINGS_H", "1");
-            mod.addCMacro("HAVE_STRSTR", "1");
-            mod.addCMacro("HAVE_STRTOK_R", "1");
-            mod.addCMacro("HAVE_STRTOLL", "1");
-            mod.addCMacro("HAVE_STRUCT_SOCKADDR_STORAGE", "1");
-            mod.addCMacro("HAVE_STRUCT_TIMEVAL", "1");
-            mod.addCMacro("HAVE_SYS_IOCTL_H", "1");
-            mod.addCMacro("HAVE_SYS_PARAM_H", "1");
-            mod.addCMacro("HAVE_SYS_POLL_H", "1");
-            mod.addCMacro("HAVE_SYS_RESOURCE_H", "1");
-            mod.addCMacro("HAVE_SYS_SELECT_H", "1");
-            mod.addCMacro("HAVE_SYS_SOCKET_H", "1");
-            mod.addCMacro("HAVE_SYS_STAT_H", "1");
-            mod.addCMacro("HAVE_SYS_TIME_H", "1");
-            mod.addCMacro("HAVE_SYS_TYPES_H", "1");
-            mod.addCMacro("HAVE_SYS_UIO_H", "1");
-            mod.addCMacro("HAVE_SYS_UN_H", "1");
-            mod.addCMacro("HAVE_TERMIO_H", "1");
-            mod.addCMacro("HAVE_TERMIOS_H", "1");
-            mod.addCMacro("HAVE_TIME_H", "1");
-            mod.addCMacro("HAVE_UNAME", "1");
-            mod.addCMacro("HAVE_UNISTD_H", "1");
-            mod.addCMacro("HAVE_UTIME", "1");
-            mod.addCMacro("HAVE_UTIME_H", "1");
-            mod.addCMacro("HAVE_UTIMES", "1");
-            mod.addCMacro("HAVE_VARIADIC_MACROS_C99", "1");
-            mod.addCMacro("HAVE_VARIADIC_MACROS_GCC", "1");
-            mod.addCMacro("HAVE_ZLIB_H", "1");
-            mod.addCMacro("RANDOM_FILE", "\"/dev/urandom\"");
-            mod.addCMacro("RECV_TYPE_ARG1", "int");
-            mod.addCMacro("RECV_TYPE_ARG2", "void *");
-            mod.addCMacro("RECV_TYPE_ARG3", "size_t");
-            mod.addCMacro("RECV_TYPE_ARG4", "int");
-            mod.addCMacro("RECV_TYPE_RETV", "ssize_t");
-            mod.addCMacro("SEND_QUAL_ARG2", "const");
-            mod.addCMacro("SEND_TYPE_ARG1", "int");
-            mod.addCMacro("SEND_TYPE_ARG2", "void *");
-            mod.addCMacro("SEND_TYPE_ARG3", "size_t");
-            mod.addCMacro("SEND_TYPE_ARG4", "int");
-            mod.addCMacro("SEND_TYPE_RETV", "ssize_t");
-            mod.addCMacro("SIZEOF_CURL_OFF_T", "8");
-            mod.addCMacro("SIZEOF_INT", "4");
-            mod.addCMacro("SIZEOF_LONG", "8");
-            mod.addCMacro("SIZEOF_OFF_T", "8");
-            mod.addCMacro("SIZEOF_SHORT", "2");
-            mod.addCMacro("SIZEOF_SIZE_T", "8");
-            mod.addCMacro("SIZEOF_TIME_T", "8");
-            mod.addCMacro("STDC_HEADERS", "1");
-            mod.addCMacro("TIME_WITH_SYS_TIME", "1");
-            mod.addCMacro("USE_NGHTTP2", "1");
-            mod.addCMacro("USE_OPENSSL", "1");
-            mod.addCMacro("OPENSSL_IS_BORINGSSL", "1");
-            mod.addCMacro("USE_THREADS_POSIX", "1");
-            mod.addCMacro("USE_UNIX_SOCKETS", "1");
-        }
-
-        try buildZlib(b, mod);
-        try buildBrotli(b, mod);
-        const boringssl_dep = b.dependency("boringssl-zig", .{
-            .target = target,
-            .optimize = mod.optimize.?,
-            .force_pic = true,
-        });
-
-        const ssl = boringssl_dep.artifact("ssl");
-        ssl.bundle_ubsan_rt = false;
-        const crypto = boringssl_dep.artifact("crypto");
-        crypto.bundle_ubsan_rt = false;
-
-        mod.linkLibrary(ssl);
-        mod.linkLibrary(crypto);
-        try buildNghttp2(b, mod);
-        try buildCurl(b, mod);
-        try buildAda(b, mod);
-
-        switch (target.result.os.tag) {
-            .macos => {
-                // needed for proxying on mac
-                mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
-                mod.linkFramework("CoreFoundation", .{});
-                mod.linkFramework("SystemConfiguration", .{});
-            },
-            else => {},
-        }
+        const release_dir = if (mod.optimize.? == .Debug) "debug" else "release";
+        const os = switch (target.result.os.tag) {
+            .linux => "linux",
+            .macos => "macos",
+            else => return error.UnsupportedPlatform,
+        };
+        var lib_path = try std.fmt.allocPrint(
+            mod.owner.allocator,
+            "v8/out/{s}/{s}/obj/zig/libc_v8.a",
+            .{ os, release_dir },
+        );
+        std.fs.cwd().access(lib_path, .{}) catch {
+            // legacy path
+            lib_path = try std.fmt.allocPrint(
+                mod.owner.allocator,
+                "v8/out/{s}/obj/zig/libc_v8.a",
+                .{release_dir},
+            );
+        };
+        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_config", opts.createModule());
 }

-fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
-    const target = mod.resolved_target.?;
+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;

@@ -366,8 +210,8 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
        "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
@@ -377,8 +221,8 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
            mimalloc ++ "/out/{s}-{s}/lib/libmimalloc.a",
            .{ @tagName(os), @tagName(arch) },
        );
-        mod.addObjectFile(b.path(lib_path));
-        mod.addIncludePath(b.path(mimalloc ++ "/include"));
+        step.addObjectFile(b.path(lib_path));
+        step.addIncludePath(b.path(mimalloc ++ "/include"));
    }

    // netsurf libs
@@ -388,7 +232,7 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
        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",
@@ -402,460 +246,7 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
            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"));
    }
 }
-
-fn buildZlib(b: *Build, m: *Build.Module) !void {
-    const zlib = b.addLibrary(.{
-        .name = "zlib",
-        .root_module = m,
-    });
-
-    const root = "vendor/zlib/";
-    zlib.installHeader(b.path(root ++ "zlib.h"), "zlib.h");
-    zlib.installHeader(b.path(root ++ "zconf.h"), "zconf.h");
-    zlib.addCSourceFiles(.{ .flags = &.{
-        "-DHAVE_SYS_TYPES_H",
-        "-DHAVE_STDINT_H",
-        "-DHAVE_STDDEF_H",
-    }, .files = &.{
-        root ++ "adler32.c",
-        root ++ "compress.c",
-        root ++ "crc32.c",
-        root ++ "deflate.c",
-        root ++ "gzclose.c",
-        root ++ "gzlib.c",
-        root ++ "gzread.c",
-        root ++ "gzwrite.c",
-        root ++ "inflate.c",
-        root ++ "infback.c",
-        root ++ "inftrees.c",
-        root ++ "inffast.c",
-        root ++ "trees.c",
-        root ++ "uncompr.c",
-        root ++ "zutil.c",
-    } });
-}
-
-fn buildBrotli(b: *Build, m: *Build.Module) !void {
-    const brotli = b.addLibrary(.{
-        .name = "brotli",
-        .root_module = m,
-    });
-
-    const root = "vendor/brotli/c/";
-    brotli.addIncludePath(b.path(root ++ "include"));
-    brotli.addCSourceFiles(.{ .flags = &.{}, .files = &.{
-        root ++ "common/constants.c",
-        root ++ "common/context.c",
-        root ++ "common/dictionary.c",
-        root ++ "common/platform.c",
-        root ++ "common/shared_dictionary.c",
-        root ++ "common/transform.c",
-        root ++ "dec/bit_reader.c",
-        root ++ "dec/decode.c",
-        root ++ "dec/huffman.c",
-        root ++ "dec/prefix.c",
-        root ++ "dec/state.c",
-        root ++ "dec/static_init.c",
-    } });
-}
-
-fn buildMbedtls(b: *Build, m: *Build.Module) !void {
-    const mbedtls = b.addLibrary(.{
-        .name = "mbedtls",
-        .root_module = m,
-    });
-
-    const root = "vendor/mbedtls/";
-    mbedtls.addIncludePath(b.path(root ++ "include"));
-    mbedtls.addIncludePath(b.path(root ++ "library"));
-
-    mbedtls.addCSourceFiles(.{ .flags = &.{}, .files = &.{
-        root ++ "library/aes.c",
-        root ++ "library/aesni.c",
-        root ++ "library/aesce.c",
-        root ++ "library/aria.c",
-        root ++ "library/asn1parse.c",
-        root ++ "library/asn1write.c",
-        root ++ "library/base64.c",
-        root ++ "library/bignum.c",
-        root ++ "library/bignum_core.c",
-        root ++ "library/bignum_mod.c",
-        root ++ "library/bignum_mod_raw.c",
-        root ++ "library/camellia.c",
-        root ++ "library/ccm.c",
-        root ++ "library/chacha20.c",
-        root ++ "library/chachapoly.c",
-        root ++ "library/cipher.c",
-        root ++ "library/cipher_wrap.c",
-        root ++ "library/constant_time.c",
-        root ++ "library/cmac.c",
-        root ++ "library/ctr_drbg.c",
-        root ++ "library/des.c",
-        root ++ "library/dhm.c",
-        root ++ "library/ecdh.c",
-        root ++ "library/ecdsa.c",
-        root ++ "library/ecjpake.c",
-        root ++ "library/ecp.c",
-        root ++ "library/ecp_curves.c",
-        root ++ "library/entropy.c",
-        root ++ "library/entropy_poll.c",
-        root ++ "library/error.c",
-        root ++ "library/gcm.c",
-        root ++ "library/hkdf.c",
-        root ++ "library/hmac_drbg.c",
-        root ++ "library/lmots.c",
-        root ++ "library/lms.c",
-        root ++ "library/md.c",
-        root ++ "library/md5.c",
-        root ++ "library/memory_buffer_alloc.c",
-        root ++ "library/nist_kw.c",
-        root ++ "library/oid.c",
-        root ++ "library/padlock.c",
-        root ++ "library/pem.c",
-        root ++ "library/pk.c",
-        root ++ "library/pk_ecc.c",
-        root ++ "library/pk_wrap.c",
-        root ++ "library/pkcs12.c",
-        root ++ "library/pkcs5.c",
-        root ++ "library/pkparse.c",
-        root ++ "library/pkwrite.c",
-        root ++ "library/platform.c",
-        root ++ "library/platform_util.c",
-        root ++ "library/poly1305.c",
-        root ++ "library/psa_crypto.c",
-        root ++ "library/psa_crypto_aead.c",
-        root ++ "library/psa_crypto_cipher.c",
-        root ++ "library/psa_crypto_client.c",
-        root ++ "library/psa_crypto_ffdh.c",
-        root ++ "library/psa_crypto_driver_wrappers_no_static.c",
-        root ++ "library/psa_crypto_ecp.c",
-        root ++ "library/psa_crypto_hash.c",
-        root ++ "library/psa_crypto_mac.c",
-        root ++ "library/psa_crypto_pake.c",
-        root ++ "library/psa_crypto_rsa.c",
-        root ++ "library/psa_crypto_se.c",
-        root ++ "library/psa_crypto_slot_management.c",
-        root ++ "library/psa_crypto_storage.c",
-        root ++ "library/psa_its_file.c",
-        root ++ "library/psa_util.c",
-        root ++ "library/ripemd160.c",
-        root ++ "library/rsa.c",
-        root ++ "library/rsa_alt_helpers.c",
-        root ++ "library/sha1.c",
-        root ++ "library/sha3.c",
-        root ++ "library/sha256.c",
-        root ++ "library/sha512.c",
-        root ++ "library/threading.c",
-        root ++ "library/timing.c",
-        root ++ "library/version.c",
-        root ++ "library/version_features.c",
-        root ++ "library/pkcs7.c",
-        root ++ "library/x509.c",
-        root ++ "library/x509_create.c",
-        root ++ "library/x509_crl.c",
-        root ++ "library/x509_crt.c",
-        root ++ "library/x509_csr.c",
-        root ++ "library/x509write.c",
-        root ++ "library/x509write_crt.c",
-        root ++ "library/x509write_csr.c",
-        root ++ "library/debug.c",
-        root ++ "library/mps_reader.c",
-        root ++ "library/mps_trace.c",
-        root ++ "library/net_sockets.c",
-        root ++ "library/ssl_cache.c",
-        root ++ "library/ssl_ciphersuites.c",
-        root ++ "library/ssl_client.c",
-        root ++ "library/ssl_cookie.c",
-        root ++ "library/ssl_debug_helpers_generated.c",
-        root ++ "library/ssl_msg.c",
-        root ++ "library/ssl_ticket.c",
-        root ++ "library/ssl_tls.c",
-        root ++ "library/ssl_tls12_client.c",
-        root ++ "library/ssl_tls12_server.c",
-        root ++ "library/ssl_tls13_keys.c",
-        root ++ "library/ssl_tls13_server.c",
-        root ++ "library/ssl_tls13_client.c",
-        root ++ "library/ssl_tls13_generic.c",
-    } });
-}
-
-fn buildNghttp2(b: *Build, m: *Build.Module) !void {
-    const nghttp2 = b.addLibrary(.{
-        .name = "nghttp2",
-        .root_module = m,
-    });
-
-    const root = "vendor/nghttp2/";
-    nghttp2.addIncludePath(b.path(root ++ "lib"));
-    nghttp2.addIncludePath(b.path(root ++ "lib/includes"));
-    nghttp2.addCSourceFiles(.{ .flags = &.{
-        "-DNGHTTP2_STATICLIB",
-        "-DHAVE_NETINET_IN",
-        "-DHAVE_TIME_H",
-    }, .files = &.{
-        root ++ "lib/sfparse.c",
-        root ++ "lib/nghttp2_alpn.c",
-        root ++ "lib/nghttp2_buf.c",
-        root ++ "lib/nghttp2_callbacks.c",
-        root ++ "lib/nghttp2_debug.c",
-        root ++ "lib/nghttp2_extpri.c",
-        root ++ "lib/nghttp2_frame.c",
-        root ++ "lib/nghttp2_hd.c",
-        root ++ "lib/nghttp2_hd_huffman.c",
-        root ++ "lib/nghttp2_hd_huffman_data.c",
-        root ++ "lib/nghttp2_helper.c",
-        root ++ "lib/nghttp2_http.c",
-        root ++ "lib/nghttp2_map.c",
-        root ++ "lib/nghttp2_mem.c",
-        root ++ "lib/nghttp2_option.c",
-        root ++ "lib/nghttp2_outbound_item.c",
-        root ++ "lib/nghttp2_pq.c",
-        root ++ "lib/nghttp2_priority_spec.c",
-        root ++ "lib/nghttp2_queue.c",
-        root ++ "lib/nghttp2_rcbuf.c",
-        root ++ "lib/nghttp2_session.c",
-        root ++ "lib/nghttp2_stream.c",
-        root ++ "lib/nghttp2_submit.c",
-        root ++ "lib/nghttp2_version.c",
-        root ++ "lib/nghttp2_ratelim.c",
-        root ++ "lib/nghttp2_time.c",
-    } });
-}
-
-fn buildCurl(b: *Build, m: *Build.Module) !void {
-    const curl = b.addLibrary(.{
-        .name = "curl",
-        .root_module = m,
-    });
-
-    const root = "vendor/curl/";
-
-    curl.addIncludePath(b.path(root ++ "lib"));
-    curl.addIncludePath(b.path(root ++ "include"));
-    curl.addCSourceFiles(.{
-        .flags = &.{},
-        .files = &.{
-            root ++ "lib/altsvc.c",
-            root ++ "lib/amigaos.c",
-            root ++ "lib/asyn-ares.c",
-            root ++ "lib/asyn-base.c",
-            root ++ "lib/asyn-thrdd.c",
-            root ++ "lib/bufq.c",
-            root ++ "lib/bufref.c",
-            root ++ "lib/cf-h1-proxy.c",
-            root ++ "lib/cf-h2-proxy.c",
-            root ++ "lib/cf-haproxy.c",
-            root ++ "lib/cf-https-connect.c",
-            root ++ "lib/cf-socket.c",
-            root ++ "lib/cfilters.c",
-            root ++ "lib/conncache.c",
-            root ++ "lib/connect.c",
-            root ++ "lib/content_encoding.c",
-            root ++ "lib/cookie.c",
-            root ++ "lib/cshutdn.c",
-            root ++ "lib/curl_addrinfo.c",
-            root ++ "lib/curl_des.c",
-            root ++ "lib/curl_endian.c",
-            root ++ "lib/curl_fnmatch.c",
-            root ++ "lib/curl_get_line.c",
-            root ++ "lib/curl_gethostname.c",
-            root ++ "lib/curl_gssapi.c",
-            root ++ "lib/curl_memrchr.c",
-            root ++ "lib/curl_ntlm_core.c",
-            root ++ "lib/curl_range.c",
-            root ++ "lib/curl_rtmp.c",
-            root ++ "lib/curl_sasl.c",
-            root ++ "lib/curl_sha512_256.c",
-            root ++ "lib/curl_sspi.c",
-            root ++ "lib/curl_threads.c",
-            root ++ "lib/curl_trc.c",
-            root ++ "lib/cw-out.c",
-            root ++ "lib/cw-pause.c",
-            root ++ "lib/dict.c",
-            root ++ "lib/doh.c",
-            root ++ "lib/dynhds.c",
-            root ++ "lib/easy.c",
-            root ++ "lib/easygetopt.c",
-            root ++ "lib/easyoptions.c",
-            root ++ "lib/escape.c",
-            root ++ "lib/fake_addrinfo.c",
-            root ++ "lib/file.c",
-            root ++ "lib/fileinfo.c",
-            root ++ "lib/fopen.c",
-            root ++ "lib/formdata.c",
-            root ++ "lib/ftp.c",
-            root ++ "lib/ftplistparser.c",
-            root ++ "lib/getenv.c",
-            root ++ "lib/getinfo.c",
-            root ++ "lib/gopher.c",
-            root ++ "lib/hash.c",
-            root ++ "lib/headers.c",
-            root ++ "lib/hmac.c",
-            root ++ "lib/hostip.c",
-            root ++ "lib/hostip4.c",
-            root ++ "lib/hostip6.c",
-            root ++ "lib/hsts.c",
-            root ++ "lib/http.c",
-            root ++ "lib/http1.c",
-            root ++ "lib/http2.c",
-            root ++ "lib/http_aws_sigv4.c",
-            root ++ "lib/http_chunks.c",
-            root ++ "lib/http_digest.c",
-            root ++ "lib/http_negotiate.c",
-            root ++ "lib/http_ntlm.c",
-            root ++ "lib/http_proxy.c",
-            root ++ "lib/httpsrr.c",
-            root ++ "lib/idn.c",
-            root ++ "lib/if2ip.c",
-            root ++ "lib/imap.c",
-            root ++ "lib/krb5.c",
-            root ++ "lib/ldap.c",
-            root ++ "lib/llist.c",
-            root ++ "lib/macos.c",
-            root ++ "lib/md4.c",
-            root ++ "lib/md5.c",
-            root ++ "lib/memdebug.c",
-            root ++ "lib/mime.c",
-            root ++ "lib/mprintf.c",
-            root ++ "lib/mqtt.c",
-            root ++ "lib/multi.c",
-            root ++ "lib/multi_ev.c",
-            root ++ "lib/netrc.c",
-            root ++ "lib/noproxy.c",
-            root ++ "lib/openldap.c",
-            root ++ "lib/parsedate.c",
-            root ++ "lib/pingpong.c",
-            root ++ "lib/pop3.c",
-            root ++ "lib/progress.c",
-            root ++ "lib/psl.c",
-            root ++ "lib/rand.c",
-            root ++ "lib/rename.c",
-            root ++ "lib/request.c",
-            root ++ "lib/rtsp.c",
-            root ++ "lib/select.c",
-            root ++ "lib/sendf.c",
-            root ++ "lib/setopt.c",
-            root ++ "lib/sha256.c",
-            root ++ "lib/share.c",
-            root ++ "lib/slist.c",
-            root ++ "lib/smb.c",
-            root ++ "lib/smtp.c",
-            root ++ "lib/socketpair.c",
-            root ++ "lib/socks.c",
-            root ++ "lib/socks_gssapi.c",
-            root ++ "lib/socks_sspi.c",
-            root ++ "lib/speedcheck.c",
-            root ++ "lib/splay.c",
-            root ++ "lib/strcase.c",
-            root ++ "lib/strdup.c",
-            root ++ "lib/strequal.c",
-            root ++ "lib/strerror.c",
-            root ++ "lib/system_win32.c",
-            root ++ "lib/telnet.c",
-            root ++ "lib/tftp.c",
-            root ++ "lib/transfer.c",
-            root ++ "lib/uint-bset.c",
-            root ++ "lib/uint-hash.c",
-            root ++ "lib/uint-spbset.c",
-            root ++ "lib/uint-table.c",
-            root ++ "lib/url.c",
-            root ++ "lib/urlapi.c",
-            root ++ "lib/version.c",
-            root ++ "lib/ws.c",
-            root ++ "lib/curlx/base64.c",
-            root ++ "lib/curlx/dynbuf.c",
-            root ++ "lib/curlx/inet_ntop.c",
-            root ++ "lib/curlx/nonblock.c",
-            root ++ "lib/curlx/strparse.c",
-            root ++ "lib/curlx/timediff.c",
-            root ++ "lib/curlx/timeval.c",
-            root ++ "lib/curlx/wait.c",
-            root ++ "lib/curlx/warnless.c",
-            root ++ "lib/vquic/curl_ngtcp2.c",
-            root ++ "lib/vquic/curl_osslq.c",
-            root ++ "lib/vquic/curl_quiche.c",
-            root ++ "lib/vquic/vquic.c",
-            root ++ "lib/vquic/vquic-tls.c",
-            root ++ "lib/vauth/cleartext.c",
-            root ++ "lib/vauth/cram.c",
-            root ++ "lib/vauth/digest.c",
-            root ++ "lib/vauth/digest_sspi.c",
-            root ++ "lib/vauth/gsasl.c",
-            root ++ "lib/vauth/krb5_gssapi.c",
-            root ++ "lib/vauth/krb5_sspi.c",
-            root ++ "lib/vauth/ntlm.c",
-            root ++ "lib/vauth/ntlm_sspi.c",
-            root ++ "lib/vauth/oauth2.c",
-            root ++ "lib/vauth/spnego_gssapi.c",
-            root ++ "lib/vauth/spnego_sspi.c",
-            root ++ "lib/vauth/vauth.c",
-            root ++ "lib/vtls/cipher_suite.c",
-            root ++ "lib/vtls/openssl.c",
-            root ++ "lib/vtls/hostcheck.c",
-            root ++ "lib/vtls/keylog.c",
-            root ++ "lib/vtls/vtls.c",
-            root ++ "lib/vtls/vtls_scache.c",
-            root ++ "lib/vtls/x509asn1.c",
-        },
-    });
-}
-
-pub fn buildAda(b: *Build, m: *Build.Module) !void {
-    const ada_dep = b.dependency("ada-singleheader", .{});
-
-    const ada_mod = b.createModule(.{
-        .root_source_file = b.path("vendor/ada/root.zig"),
-    });
-
-    const ada_lib = b.addLibrary(.{
-        .name = "ada",
-        .root_module = b.createModule(.{
-            .link_libcpp = true,
-            .target = m.resolved_target,
-            .optimize = m.optimize,
-        }),
-        .linkage = .static,
-    });
-
-    ada_lib.addCSourceFile(.{
-        .file = ada_dep.path("ada.cpp"),
-        .flags = &.{ "-std=c++20", "-O3" },
-        .language = .cpp,
-    });
-
-    ada_lib.installHeader(ada_dep.path("ada_c.h"), "ada_c.h");
-
-    // Link the library to ada module.
-    ada_mod.linkLibrary(ada_lib);
-    // Expose ada module to main module.
-    m.addImport("ada", ada_mod);
-}
-
-const Manifest = struct {
-    version: []const u8,
-    minimum_zig_version: []const u8,
-
-    fn init(b: *std.Build) Manifest {
-        const input = @embedFile("build.zig.zon");
-
-        var diagnostics: std.zon.parse.Diagnostics = .{};
-        defer diagnostics.deinit(b.allocator);
-
-        return std.zon.parse.fromSlice(Manifest, b.allocator, input, &diagnostics, .{
-            .free_on_error = true,
-            .ignore_unknown_fields = true,
-        }) catch |err| {
-            switch (err) {
-                error.OutOfMemory => @panic("OOM"),
-                error.ParseZon => {
-                    std.debug.print("Parse diagnostics:\n{f}\n", .{diagnostics});
-                    std.process.exit(1);
-                },
-            }
-        };
-    }
-};
--- a/build.zig.zon
+++ b/build.zig.zon
@@ -1,22 +1,22 @@
 .{
    .name = .browser,
-    .version = "0.0.0",
-    .fingerprint = 0xda130f3af836cea0, // Changing this has security and trust implications.
-    .minimum_zig_version = "0.15.2",
-    .dependencies = .{
-        .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/e047d2a4d5af5783763f0f6a652fab8982a08603.tar.gz",
-            .hash = "v8-0.0.0-xddH65gMBACRBQMM7EwmVgfi94FJyyX-0jpe5KhXYhfv",
-        },
-        // .v8 = .{ .path = "../zig-v8-fork" },
-        .@"ada-singleheader" = .{
-            .url = "https://github.com/ada-url/ada/releases/download/v3.3.0/singleheader.zip",
-            .hash = "N-V-__8AAPmhFAAw64ALjlzd5YMtzpSrmZ6KymsT84BKfB4s",
-        },
-        .@"boringssl-zig" = .{
-            .url = "git+https://github.com/Syndica/boringssl-zig.git#c53df00d06b02b755ad88bbf4d1202ed9687b096",
-            .hash = "boringssl-0.1.0-VtJeWehMAAA4RNnwRnzEvKcS9rjsR1QVRw1uJrwXxmVK",
-        },
-    },
    .paths = .{""},
+    .version = "0.0.0",
+    .fingerprint = 0xda130f3af836cea0,
+    .dependencies = .{
+        .tls = .{
+            .url = "https://github.com/ianic/tls.zig/archive/55845f755d9e2e821458ea55693f85c737cd0c7a.tar.gz",
+            .hash = "tls-0.1.0-ER2e0m43BQAshi8ixj1qf3w2u2lqKtXtkrxUJ4AGZDcl",
+        },
+        .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/dd087771378ea854452bcb010309fa9ffe5a9cac.tar.gz",
+            .hash = "v8-0.0.0-xddH66e8AwBL3O_A8yWQYQIyfMbKHFNVQr_NqM6YjU11",
+        },
+        //.v8 = .{ .path = "../zig-v8-fork" },
+        //.tigerbeetle_io = .{ .path = "../tigerbeetle-io" },
+    },
 }
--- a/flake.lock
+++ b/flake.lock
@@ -1,21 +1,5 @@
 {
  "nodes": {
-    "flake-compat": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1696426674,
-        "narHash": "sha256-kvjfFW7WAETZlt09AgDn1MrtKzP7t90Vf7vypd3OL1U=",
-        "owner": "edolstra",
-        "repo": "flake-compat",
-        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
-        "type": "github"
-      },
-      "original": {
-        "owner": "edolstra",
-        "repo": "flake-compat",
-        "type": "github"
-      }
-    },
    "flake-utils": {
      "inputs": {
        "systems": "systems"
@@ -34,52 +18,13 @@
        "type": "github"
      }
    },
-    "flake-utils_2": {
-      "inputs": {
-        "systems": "systems_2"
-      },
-      "locked": {
-        "lastModified": 1705309234,
-        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "gitignore": {
-      "inputs": {
-        "nixpkgs": [
-          "zlsPkg",
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1709087332,
-        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
-        "owner": "hercules-ci",
-        "repo": "gitignore.nix",
-        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
-        "type": "github"
-      },
-      "original": {
-        "owner": "hercules-ci",
-        "repo": "gitignore.nix",
-        "type": "github"
-      }
-    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1760968520,
-        "narHash": "sha256-EjGslHDzCBKOVr+dnDB1CAD7wiQSHfUt3suOpFj9O1Q=",
+        "lastModified": 1748964450,
+        "narHash": "sha256-ZouDiXkUk8mkMnah10QcoQ9Nu6UW6AFAHLScS3En6aI=",
        "owner": "nixos",
        "repo": "nixpkgs",
-        "rev": "e755547441a0413942a37692f7bf7fc6315bb7f6",
+        "rev": "9ff500cd9e123f46c55855eca64beccead29b152",
        "type": "github"
      },
      "original": {
@@ -92,9 +37,7 @@
    "root": {
      "inputs": {
        "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "zigPkgs": "zigPkgs",
-        "zlsPkg": "zlsPkg"
+        "nixpkgs": "nixpkgs"
      }
    },
    "systems": {
@@ -111,68 +54,6 @@
        "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"
-      }
-    },
-    "zigPkgs": {
-      "inputs": {
-        "flake-compat": "flake-compat",
-        "flake-utils": "flake-utils_2",
-        "nixpkgs": [
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1760747435,
-        "narHash": "sha256-wNB/W3x+or4mdNxFPNOH5/WFckNpKgFRZk7OnOsLtm0=",
-        "owner": "mitchellh",
-        "repo": "zig-overlay",
-        "rev": "d0f239b887b1ac736c0f3dde91bf5bf2ecf3a420",
-        "type": "github"
-      },
-      "original": {
-        "owner": "mitchellh",
-        "repo": "zig-overlay",
-        "type": "github"
-      }
-    },
-    "zlsPkg": {
-      "inputs": {
-        "gitignore": "gitignore",
-        "nixpkgs": [
-          "nixpkgs"
-        ],
-        "zig-overlay": [
-          "zigPkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1756048867,
-        "narHash": "sha256-GFzSHUljcxy7sM1PaabbkQUdUnLwpherekPWJFxXtnk=",
-        "owner": "zigtools",
-        "repo": "zls",
-        "rev": "ce6c8f02c78e622421cfc2405c67c5222819ec03",
-        "type": "github"
-      },
-      "original": {
-        "owner": "zigtools",
-        "ref": "0.15.0",
-        "repo": "zls",
-        "type": "github"
-      }
    }
  },
  "root": "root",
--- a/flake.nix
+++ b/flake.nix
@@ -3,37 +3,20 @@

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
-
-    zigPkgs.url = "github:mitchellh/zig-overlay";
-    zigPkgs.inputs.nixpkgs.follows = "nixpkgs";
-
-    zlsPkg.url = "github:zigtools/zls/0.15.0";
-    zlsPkg.inputs.zig-overlay.follows = "zigPkgs";
-    zlsPkg.inputs.nixpkgs.follows = "nixpkgs";
-
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs =
    {
      nixpkgs,
-      zigPkgs,
-      zlsPkg,
      flake-utils,
      ...
    }:
    flake-utils.lib.eachDefaultSystem (
      system:
      let
-        overlays = [
-          (final: prev: {
-            zigpkgs = zigPkgs.packages.${prev.system};
-            zls = zlsPkg.packages.${prev.system}.default;
-          })
-        ];
-
        pkgs = import nixpkgs {
-          inherit system overlays;
+          inherit system;
        };

        # We need crtbeginS.o for building.
@@ -49,7 +32,7 @@
          targetPkgs =
            pkgs: with pkgs; [
              # Build Tools
-              zigpkgs."0.15.2"
+              zig
              zls
              python3
              pkg-config
@@ -66,7 +49,6 @@
              glib.dev
              glibc.dev
              zlib
-              zlib.dev
            ];
        };
      in
--- a/src/TestHTTPServer.zig
+++ b/src/TestHTTPServer.zig
@@ -1,123 +0,0 @@
-const std = @import("std");
-
-const TestHTTPServer = @This();
-
-shutdown: bool,
-listener: ?std.net.Server,
-handler: Handler,
-
-const Handler = *const fn (req: *std.http.Server.Request) anyerror!void;
-
-pub fn init(handler: Handler) TestHTTPServer {
-    return .{
-        .shutdown = true,
-        .listener = null,
-        .handler = handler,
-    };
-}
-
-pub fn deinit(self: *TestHTTPServer) void {
-    self.shutdown = true;
-    if (self.listener) |*listener| {
-        listener.deinit();
-    }
-}
-
-pub fn run(self: *TestHTTPServer, wg: *std.Thread.WaitGroup) !void {
-    const address = try std.net.Address.parseIp("127.0.0.1", 9582);
-
-    self.listener = try address.listen(.{ .reuse_address = true });
-    var listener = &self.listener.?;
-
-    wg.finish();
-
-    while (true) {
-        const conn = listener.accept() catch |err| {
-            if (self.shutdown) {
-                return;
-            }
-            return err;
-        };
-        const thrd = try std.Thread.spawn(.{}, handleConnection, .{ self, conn });
-        thrd.detach();
-    }
-}
-
-fn handleConnection(self: *TestHTTPServer, conn: std.net.Server.Connection) !void {
-    defer conn.stream.close();
-
-    var req_buf: [2048]u8 = undefined;
-    var conn_reader = conn.stream.reader(&req_buf);
-    var conn_writer = conn.stream.writer(&req_buf);
-
-    var http_server = std.http.Server.init(conn_reader.interface(), &conn_writer.interface);
-
-    while (true) {
-        var req = http_server.receiveHead() catch |err| switch (err) {
-            error.ReadFailed => continue,
-            error.HttpConnectionClosing => continue,
-            else => {
-                std.debug.print("Test HTTP Server error: {}\n", .{err});
-                return err;
-            },
-        };
-        self.handler(&req) catch |err| {
-            std.debug.print("test http error '{s}': {}\n", .{ req.head.target, err });
-            try req.respond("server error", .{ .status = .internal_server_error });
-            return;
-        };
-    }
-}
-
-pub fn sendFile(req: *std.http.Server.Request, file_path: []const u8) !void {
-    var file = std.fs.cwd().openFile(file_path, .{}) catch |err| switch (err) {
-        error.FileNotFound => return req.respond("server error", .{ .status = .not_found }),
-        else => return err,
-    };
-    defer file.close();
-
-    const stat = try file.stat();
-    var send_buffer: [4096]u8 = undefined;
-
-    var res = try req.respondStreaming(&send_buffer, .{
-        .content_length = stat.size,
-        .respond_options = .{
-            .extra_headers = &.{
-                .{ .name = "content-type", .value = getContentType(file_path) },
-            },
-        },
-    });
-
-    var read_buffer: [4096]u8 = undefined;
-    var reader = file.reader(&read_buffer);
-    _ = try res.writer.sendFileAll(&reader, .unlimited);
-    try res.writer.flush();
-    try res.end();
-}
-
-fn getContentType(file_path: []const u8) []const u8 {
-    if (std.mem.endsWith(u8, file_path, ".js")) {
-        return "application/json";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".mjs")) {
-        // mjs are ECMAScript modules
-        return "application/json";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".html")) {
-        return "text/html";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".htm")) {
-        return "text/html";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".xml")) {
-        // some wpt tests do this
-        return "text/xml";
-    }
-
-    std.debug.print("TestHTTPServer asked to serve an unknown file type: {s}\n", .{file_path});
-    return "text/html";
-}
--- a/src/app.zig
+++ b/src/app.zig
@@ -1,10 +1,10 @@
 const std = @import("std");
-
 const Allocator = std.mem.Allocator;

 const log = @import("log.zig");
-const Http = @import("http/Http.zig");
-const Platform = @import("browser/js/Platform.zig");
+const Loop = @import("runtime/loop.zig").Loop;
+const http = @import("http/client.zig");
+const Platform = @import("runtime/js.zig").Platform;

 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
 const Notification = @import("notification.zig").Notification;
@@ -12,14 +12,14 @@ const Notification = @import("notification.zig").Notification;
 // Container for global state / objects that various parts of the system
 // might need.
 pub const App = struct {
-    http: Http,
+    loop: *Loop,
    config: Config,
-    platform: Platform,
+    platform: ?*const Platform,
    allocator: Allocator,
    telemetry: Telemetry,
+    http_client: http.Client,
    app_dir_path: ?[]const u8,
    notification: *Notification,
-    shutdown: bool = false,

    pub const RunMode = enum {
        help,
@@ -30,72 +30,60 @@ pub const App = struct {

    pub const Config = struct {
        run_mode: RunMode,
+        platform: ?*const Platform = null,
        tls_verify_host: bool = true,
-        http_proxy: ?[:0]const u8 = null,
-        proxy_bearer_token: ?[:0]const u8 = null,
-        http_timeout_ms: ?u31 = null,
-        http_connect_timeout_ms: ?u31 = null,
-        http_max_host_open: ?u8 = null,
-        http_max_concurrent: ?u8 = null,
-        user_agent: [:0]const u8,
+        http_proxy: ?std.Uri = null,
+        proxy_type: ?http.ProxyType = null,
+        proxy_auth: ?http.ProxyAuth = 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();

-        var http = try Http.init(allocator, .{
-            .max_host_open = config.http_max_host_open orelse 4,
-            .max_concurrent = config.http_max_concurrent orelse 10,
-            .timeout_ms = config.http_timeout_ms orelse 5000,
-            .connect_timeout_ms = config.http_connect_timeout_ms orelse 0,
-            .http_proxy = config.http_proxy,
-            .tls_verify_host = config.tls_verify_host,
-            .proxy_bearer_token = config.proxy_bearer_token,
-            .user_agent = config.user_agent,
-        });
-        errdefer http.deinit();
-
-        const platform = try Platform.init();
-        errdefer platform.deinit();
-
        const app_dir_path = getAndMakeAppDir(allocator);

        app.* = .{
-            .http = http,
+            .loop = loop,
            .allocator = allocator,
            .telemetry = undefined,
-            .platform = platform,
+            .platform = config.platform,
            .app_dir_path = app_dir_path,
            .notification = notification,
+            .http_client = try http.Client.init(allocator, loop, .{
+                .max_concurrent = 3,
+                .http_proxy = config.http_proxy,
+                .proxy_type = config.proxy_type,
+                .proxy_auth = config.proxy_auth,
+                .tls_verify_host = config.tls_verify_host,
+            }),
            .config = config,
        };
-
-        app.telemetry = try Telemetry.init(app, config.run_mode);
-        errdefer app.telemetry.deinit();
-
+        app.telemetry = Telemetry.init(app, config.run_mode);
        try app.telemetry.register(app.notification);

        return app;
    }

    pub fn deinit(self: *App) void {
-        if (@atomicRmw(bool, &self.shutdown, .Xchg, true, .monotonic)) {
-            return;
-        }
-
        const allocator = self.allocator;
        if (self.app_dir_path) |app_dir_path| {
            allocator.free(app_dir_path);
-            self.app_dir_path = null;
        }
        self.telemetry.deinit();
+        self.loop.deinit();
+        allocator.destroy(self.loop);
+        self.http_client.deinit();
        self.notification.deinit();
-        self.http.deinit();
-        self.platform.deinit();
        allocator.destroy(self);
    }
 };
--- a/src/browser/DataURI.zig
+++ b/src/browser/DataURI.zig
@@ -1,52 +0,0 @@
-const std = @import("std");
-const Allocator = std.mem.Allocator;
-
-// Parses data:[<media-type>][;base64],<data>
-pub fn parse(allocator: Allocator, src: []const u8) !?[]const u8 {
-    if (!std.mem.startsWith(u8, src, "data:")) {
-        return null;
-    }
-
-    const uri = src[5..];
-    const data_starts = std.mem.indexOfScalar(u8, uri, ',') orelse return null;
-
-    var data = uri[data_starts + 1 ..];
-
-    // Extract the encoding.
-    const metadata = uri[0..data_starts];
-    if (std.mem.endsWith(u8, metadata, ";base64")) {
-        const decoder = std.base64.standard.Decoder;
-        const decoded_size = try decoder.calcSizeForSlice(data);
-
-        const buffer = try allocator.alloc(u8, decoded_size);
-        errdefer allocator.free(buffer);
-
-        try decoder.decode(buffer, data);
-        data = buffer;
-    }
-
-    return data;
-}
-
-const testing = @import("../testing.zig");
-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 {
-    defer testing.reset();
-    const data_uri = try parse(testing.arena_allocator, uri) orelse return error.TestFailed;
-    try testing.expectEqual(expected, data_uri);
-}
-
-fn test_cannot_parse(uri: []const u8) !void {
-    try testing.expectEqual(null, parse(undefined, uri));
-}
--- a/src/browser/Scheduler.zig
+++ b/src/browser/Scheduler.zig
@@ -1,163 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const Allocator = std.mem.Allocator;
-
-const Scheduler = @This();
-
-high_priority: Queue,
-
-// For repeating tasks. We only want to run these if there are other things to
-// do. We don't, for example, want a window.setInterval or the page.runMicrotasks
-// to block the page.wait.
-low_priority: Queue,
-
-// we expect allocator to be the page arena, hence we never call high_priority.deinit
-pub fn init(allocator: Allocator) Scheduler {
-    return .{
-        .high_priority = Queue.init(allocator, {}),
-        .low_priority = Queue.init(allocator, {}),
-    };
-}
-
-pub fn reset(self: *Scheduler) void {
-    // Our allocator is the page arena, it's been reset. We cannot use
-    // clearAndRetainCapacity, since that space is no longer ours
-    self.high_priority.clearAndFree();
-    self.low_priority.clearAndFree();
-}
-
-const AddOpts = struct {
-    name: []const u8 = "",
-    low_priority: bool = false,
-};
-pub fn add(self: *Scheduler, ctx: *anyopaque, func: Task.Func, ms: u32, opts: AddOpts) !void {
-    var low_priority = opts.low_priority;
-    if (ms > 5_000) {
-        // we don't want tasks in the far future to block page.wait from
-        // completing. However, if page.wait is called multiple times (maybe
-        // a CDP driver is wait for something to happen), then we do want
-        // to [eventually] run these when their time is up.
-        low_priority = true;
-    }
-
-    var q = if (low_priority) &self.low_priority else &self.high_priority;
-    return q.add(.{
-        .ms = std.time.milliTimestamp() + ms,
-        .ctx = ctx,
-        .func = func,
-        .name = opts.name,
-    });
-}
-
-pub fn run(self: *Scheduler) !?i32 {
-    _ = try self.runQueue(&self.low_priority);
-    return self.runQueue(&self.high_priority);
-}
-
-fn runQueue(self: *Scheduler, queue: *Queue) !?i32 {
-    // this is O(1)
-    if (queue.count() == 0) {
-        return null;
-    }
-
-    const now = std.time.milliTimestamp();
-
-    var next = queue.peek();
-    while (next) |task| {
-        const time_to_next = task.ms - now;
-        if (time_to_next > 0) {
-            // @intCast is petty safe since we limit tasks to just 5 seconds
-            // in the future
-            return @intCast(time_to_next);
-        }
-
-        if (task.func(task.ctx)) |repeat_delay| {
-            // if we do (now + 0) then our WHILE loop will run endlessly.
-            // no task should ever return 0
-            std.debug.assert(repeat_delay != 0);
-
-            var copy = task;
-            copy.ms = now + repeat_delay;
-            try self.low_priority.add(copy);
-        }
-        _ = queue.remove();
-        next = queue.peek();
-    }
-    return null;
-}
-
-const Task = struct {
-    ms: i64,
-    func: Func,
-    ctx: *anyopaque,
-    name: []const u8,
-
-    const Func = *const fn (ctx: *anyopaque) ?u32;
-};
-
-const Queue = std.PriorityQueue(Task, void, struct {
-    fn compare(_: void, a: Task, b: Task) std.math.Order {
-        return std.math.order(a.ms, b.ms);
-    }
-}.compare);
-
-const testing = @import("../testing.zig");
-test "Scheduler" {
-    defer testing.reset();
-
-    var task = TestTask{ .allocator = testing.arena_allocator };
-
-    var s = Scheduler.init(testing.arena_allocator);
-    try testing.expectEqual(null, s.run());
-    try testing.expectEqual(0, task.calls.items.len);
-
-    try s.add(&task, TestTask.run1, 3, .{});
-
-    try testing.expectDelta(3, try s.run(), 1);
-    try testing.expectEqual(0, task.calls.items.len);
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectEqual(null, s.run());
-    try testing.expectEqualSlices(u32, &.{1}, task.calls.items);
-
-    try s.add(&task, TestTask.run2, 3, .{});
-    try s.add(&task, TestTask.run1, 2, .{});
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectDelta(null, try s.run(), 1);
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2 }, task.calls.items);
-}
-
-const TestTask = struct {
-    allocator: Allocator,
-    calls: std.ArrayListUnmanaged(u32) = .{},
-
-    fn run1(ctx: *anyopaque) ?u32 {
-        var self: *TestTask = @ptrCast(@alignCast(ctx));
-        self.calls.append(self.allocator, 1) catch unreachable;
-        return null;
-    }
-
-    fn run2(ctx: *anyopaque) ?u32 {
-        var self: *TestTask = @ptrCast(@alignCast(ctx));
-        self.calls.append(self.allocator, 2) catch unreachable;
-        return 2;
-    }
-};
--- a/src/browser/ScriptManager.zig
+++ b/src/browser/ScriptManager.zig
@@ -1,908 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const js = @import("js/js.zig");
-const log = @import("../log.zig");
-const parser = @import("netsurf.zig");
-
-const Page = @import("page.zig").Page;
-const DataURI = @import("DataURI.zig");
-const Http = @import("../http/Http.zig");
-const Browser = @import("browser.zig").Browser;
-const URL = @import("../url.zig").URL;
-
-const Allocator = std.mem.Allocator;
-const ArrayListUnmanaged = std.ArrayListUnmanaged;
-
-const ScriptManager = @This();
-
-page: *Page,
-
-// used to prevent recursive evalutaion
-is_evaluating: bool,
-
-// Only once this is true can deferred scripts be run
-static_scripts_done: bool,
-
-// List of async scripts. We don't care about the execution order of these, but
-// on shutdown/abort, we need to cleanup any pending ones.
-async_scripts: std.DoublyLinkedList,
-
-// Normal scripts (non-deferred & non-async). These must be executed in order
-normal_scripts: std.DoublyLinkedList,
-
-// List of deferred scripts. These must be executed in order, but only once
-// dom_loaded == true,
-defer_scripts: std.DoublyLinkedList,
-
-// When an async script is ready, it's queued here. We played with executing
-// them as they complete, but it can cause timing issues with v8 module loading.
-ready_scripts: std.DoublyLinkedList,
-
-shutdown: bool = false,
-
-client: *Http.Client,
-allocator: Allocator,
-buffer_pool: BufferPool,
-
-script_pool: std.heap.MemoryPool(Script),
-
-// We can download multiple sync modules in parallel, but we want to process
-// them in order. We can't use an std.DoublyLinkedList, like the other script types,
-// because the order we load them might not be the order we want to process
-// them in (I'm not sure this is true, but as far as I can tell, v8 doesn't
-// make any guarantees about the list of sub-module dependencies it gives us
-// So this is more like a cache. When an imported module is completed, its
-// source is placed here (keyed by the full url) for some point in the future
-// when v8 asks for it.
-// The type is confusing (too confusing? move to a union). Starts of as `null`
-// then transitions to either an error (from errorCalback) or the completed
-// buffer from doneCallback
-imported_modules: std.StringHashMapUnmanaged(?error{Failed}!std.ArrayList(u8)),
-
-// Mapping between module specifier and resolution.
-// see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap
-// importmap contains resolved urls.
-importmap: std.StringHashMapUnmanaged([:0]const u8),
-
-pub fn init(browser: *Browser, page: *Page) ScriptManager {
-    // page isn't fully initialized, we can setup our reference, but that's it.
-    const allocator = browser.allocator;
-    return .{
-        .page = page,
-        .async_scripts = .{},
-        .normal_scripts = .{},
-        .defer_scripts = .{},
-        .ready_scripts = .{},
-        .importmap = .empty,
-        .is_evaluating = false,
-        .allocator = allocator,
-        .imported_modules = .empty,
-        .client = browser.http_client,
-        .static_scripts_done = false,
-        .buffer_pool = BufferPool.init(allocator, 5),
-        .script_pool = std.heap.MemoryPool(Script).init(allocator),
-    };
-}
-
-pub fn deinit(self: *ScriptManager) void {
-    // necessary to free any buffers scripts may be referencing
-    self.reset();
-
-    self.buffer_pool.deinit();
-    self.script_pool.deinit();
-    self.imported_modules.deinit(self.allocator);
-    // we don't deinit self.importmap b/c we use the page's arena for its
-    // allocations.
-}
-
-pub fn reset(self: *ScriptManager) void {
-    {
-        var it = self.imported_modules.valueIterator();
-        while (it.next()) |value_ptr| {
-            // might have not been loaded yet (null)
-            const result = value_ptr.* orelse continue;
-            // might have loaded an error, in which case there's nothing to free
-            var buf = result catch continue;
-            buf.deinit(self.allocator);
-        }
-        self.imported_modules.clearRetainingCapacity();
-    }
-
-    // Our allocator is the page arena, it's been reset. We cannot use
-    // clearAndRetainCapacity, since that space is no longer ours
-    self.importmap = .empty;
-
-    clearList(&self.normal_scripts);
-    clearList(&self.defer_scripts);
-    clearList(&self.async_scripts);
-    clearList(&self.ready_scripts);
-    self.static_scripts_done = false;
-}
-
-fn clearList(list: *std.DoublyLinkedList) void {
-    while (list.popFirst()) |n| {
-        const script: *Script = @fieldParentPtr("node", n);
-        script.deinit(true);
-    }
-}
-
-pub fn addFromElement(self: *ScriptManager, element: *parser.Element, comptime ctx: []const u8) !void {
-    if (try parser.elementGetAttribute(element, "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;
-    }
-
-    // If a script tag gets dynamically created and added to the dom:
-    //    document.getElementsByTagName('head')[0].appendChild(script)
-    // that script tag will immediately get executed by our scriptAddedCallback.
-    // However, if the location where the script tag is inserted happens to be
-    // below where processHTMLDoc currently is, then we'll re-run that same script
-    // again in processHTMLDoc. This flag is used to let us know if a specific
-    // <script> has already been processed.
-    if (try parser.scriptGetProcessed(@ptrCast(element))) {
-        return;
-    }
-    try parser.scriptSetProcessed(@ptrCast(element), true);
-
-    const kind: Script.Kind = blk: {
-        const script_type = try parser.elementGetAttribute(element, "type") orelse break :blk .javascript;
-        if (script_type.len == 0) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "application/javascript")) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "text/javascript")) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "module")) {
-            break :blk .module;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "importmap")) {
-            break :blk .importmap;
-        }
-
-        // "type" could be anything, but only the above are ones we need to process.
-        // Common other ones are application/json, application/ld+json, text/template
-
-        return;
-    };
-
-    const page = self.page;
-    var source: Script.Source = undefined;
-    var remote_url: ?[:0]const u8 = null;
-    if (try parser.elementGetAttribute(element, "src")) |src| {
-        if (try DataURI.parse(page.arena, src)) |data_uri| {
-            source = .{ .@"inline" = data_uri };
-        } else {
-            remote_url = try URL.stitch(page.arena, src, page.url.raw, .{ .null_terminated = true });
-            source = .{ .remote = .{} };
-        }
-    } else {
-        const inline_source = parser.nodeTextContent(@ptrCast(element)) orelse return;
-        source = .{ .@"inline" = inline_source };
-    }
-
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
-
-    script.* = .{
-        .kind = kind,
-        .node = .{},
-        .manager = self,
-        .source = source,
-        .element = element,
-        .complete = source == .@"inline",
-        .url = remote_url orelse page.url.raw,
-        .mode = blk: {
-            if (source == .@"inline") {
-                // inline modules are deferred, all other inline scripts have a
-                // normal execution flow
-                break :blk if (kind == .module) .@"defer" else .normal;
-            }
-            if (try parser.elementGetAttribute(element, "async") != null) {
-                break :blk .async;
-            }
-            if (try parser.elementGetAttribute(element, "defer") != null) {
-                break :blk .@"defer";
-            }
-            break :blk .normal;
-        },
-    };
-
-    const list = self.scriptList(script);
-    list.append(&script.node);
-    errdefer list.remove(&script.node);
-
-    if (remote_url) |url| {
-        var headers = try self.client.newHeaders();
-        try page.requestCookie(.{}).headersForRequest(page.arena, url, &headers);
-
-        try self.client.request(.{
-            .url = url,
-            .ctx = script,
-            .method = .GET,
-            .headers = headers,
-            .cookie_jar = page.cookie_jar,
-            .resource_type = .script,
-            .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
-            .header_callback = Script.headerCallback,
-            .data_callback = Script.dataCallback,
-            .done_callback = Script.doneCallback,
-            .error_callback = Script.errorCallback,
-        });
-
-        log.debug(.http, "script queue", .{
-            .ctx = ctx,
-            .url = remote_url.?,
-            .stack = page.js.stackTrace() catch "???",
-        });
-    }
-}
-
-fn scriptList(self: *ScriptManager, script: *const Script) *std.DoublyLinkedList {
-    return switch (script.mode) {
-        .normal => if (script.kind == .module) &self.defer_scripts else &self.normal_scripts,
-        .@"defer" => &self.defer_scripts,
-        .async, .import_async, .import => &self.async_scripts,
-    };
-}
-
-// Resolve a module specifier to an valid URL.
-pub fn resolveSpecifier(self: *ScriptManager, arena: Allocator, specifier: []const u8, base: []const u8) ![:0]const u8 {
-    // If the specifier is mapped in the importmap, return the pre-resolved value.
-    if (self.importmap.get(specifier)) |s| {
-        return s;
-    }
-
-    return URL.stitch(
-        arena,
-        specifier,
-        base,
-        .{ .alloc = .if_needed, .null_terminated = true },
-    );
-}
-
-pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const u8) !void {
-    const gop = try self.imported_modules.getOrPut(self.allocator, url);
-    if (gop.found_existing) {
-        return;
-    }
-    errdefer _ = self.imported_modules.remove(url);
-
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
-
-    script.* = .{
-        .kind = .module,
-        .url = url,
-        .node = .{},
-        .manager = self,
-        .element = null,
-        .complete = false,
-        .source = .{ .remote = .{} },
-        .mode = .import,
-    };
-
-    gop.value_ptr.* = null;
-
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
-    log.debug(.http, "script queue", .{
-        .url = url,
-        .ctx = "module",
-        .referrer = referrer,
-        .stack = self.page.js.stackTrace() catch "???",
-    });
-
-    try self.client.request(.{
-        .url = url,
-        .ctx = script,
-        .method = .GET,
-        .headers = headers,
-        .cookie_jar = self.page.cookie_jar,
-        .resource_type = .script,
-        .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
-        .header_callback = Script.headerCallback,
-        .data_callback = Script.dataCallback,
-        .done_callback = Script.doneCallback,
-        .error_callback = Script.errorCallback,
-    });
-
-    // This seems wrong since we're not dealing with an async import (unlike
-    // getAsyncModule below), but all we're trying to do here is pre-load the
-    // script for execution at some point in the future (when waitForModule is
-    // called).
-    self.async_scripts.append(&script.node);
-}
-
-pub fn waitForImport(self: *ScriptManager, url: [:0]const u8) !ModuleSource {
-    const entry = self.imported_modules.getEntry(url) orelse {
-        // It shouldn't be possible for v8 to ask for a module that we didn't
-        // `preloadImport` above.
-        return error.UnknownModule;
-    };
-
-    const was_evaluating = self.is_evaluating;
-    self.is_evaluating = true;
-    defer self.is_evaluating = was_evaluating;
-
-    var client = self.client;
-    while (entry.value_ptr.* == null) {
-        // rely on http's timeout settings to avoid an endless/long loop.
-        _ = try client.tick(200);
-    }
-
-    defer self.imported_modules.removeByPtr(entry.key_ptr);
-
-    // it's possible we stored an error in the map, if so, we'll return it now
-    const buf = try (entry.value_ptr.*.?);
-
-    return .{
-        .buffer = buf,
-        .buffer_pool = &self.buffer_pool,
-    };
-}
-
-pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.Callback, cb_data: *anyopaque, referrer: []const u8) !void {
-    const script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(script);
-
-    script.* = .{
-        .kind = .module,
-        .url = url,
-        .node = .{},
-        .manager = self,
-        .element = null,
-        .complete = false,
-        .source = .{ .remote = .{} },
-        .mode = .{ .import_async = .{
-            .callback = cb,
-            .data = cb_data,
-        } },
-    };
-
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
-    log.debug(.http, "script queue", .{
-        .url = url,
-        .ctx = "dynamic module",
-        .referrer = referrer,
-        .stack = self.page.js.stackTrace() catch "???",
-    });
-
-    // It's possible, but unlikely, for client.request to immediately finish
-    // a request, thus calling our callback. We generally don't want a call
-    // from v8 (which is why we're here), to result in a new script evaluation.
-    // So we block even the slightest change that `client.request` immediately
-    // executes a callback.
-    const was_evaluating = self.is_evaluating;
-    self.is_evaluating = true;
-    defer self.is_evaluating = was_evaluating;
-
-    try self.client.request(.{
-        .url = url,
-        .method = .GET,
-        .headers = headers,
-        .ctx = script,
-        .resource_type = .script,
-        .cookie_jar = self.page.cookie_jar,
-        .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
-        .header_callback = Script.headerCallback,
-        .data_callback = Script.dataCallback,
-        .done_callback = Script.doneCallback,
-        .error_callback = Script.errorCallback,
-    });
-
-    self.async_scripts.append(&script.node);
-}
-
-// Called from the Page to let us know it's done parsing the HTML. Necessary that
-// we know this so that we know that we can start evaluating deferred scripts.
-pub fn staticScriptsDone(self: *ScriptManager) void {
-    std.debug.assert(self.static_scripts_done == false);
-    self.static_scripts_done = true;
-    self.evaluate();
-}
-
-fn evaluate(self: *ScriptManager) void {
-    if (self.is_evaluating) {
-        // It's possible for a script.eval to cause evaluate to be called again.
-        return;
-    }
-
-    const page = self.page;
-    self.is_evaluating = true;
-    defer self.is_evaluating = false;
-
-    while (self.ready_scripts.popFirst()) |n| {
-        var script: *Script = @fieldParentPtr("node", n);
-        switch (script.mode) {
-            .async => {
-                defer script.deinit(true);
-                script.eval(page);
-            },
-            .import_async => |ia| {
-                defer script.deinit(false);
-                ia.callback(ia.data, .{
-                    .buffer = script.source.remote,
-                    .buffer_pool = &self.buffer_pool,
-                });
-            },
-            else => unreachable, // no other script is put in this list
-        }
-    }
-
-    while (self.normal_scripts.first) |n| {
-        // These need to be processed in-order
-        var script: *Script = @fieldParentPtr("node", n);
-        if (script.complete == false) {
-            return;
-        }
-        defer {
-            _ = self.normal_scripts.popFirst();
-            script.deinit(true);
-        }
-        script.eval(page);
-    }
-
-    if (self.static_scripts_done == false) {
-        // We can only execute deferred scripts if
-        // 1 - all the normal scripts are done
-        // 2 - we've finished parsing the HTML and at least queued all the scripts
-        // The last one isn't obvious, but it's possible for self.scripts to
-        // be empty not because we're done executing all the normal scripts
-        // but because we're done executing some (or maybe none), but we're still
-        // parsing the HTML.
-        return;
-    }
-
-    while (self.defer_scripts.first) |n| {
-        var script: *Script = @fieldParentPtr("node", n);
-        if (script.complete == false) {
-            return;
-        }
-        defer {
-            _ = self.defer_scripts.popFirst();
-            script.deinit(true);
-        }
-        script.eval(page);
-    }
-
-    // At this point all normal scripts and deferred scripts are done, PLUS
-    // the page has signaled that it's done parsing HTML (static_scripts_done == true).
-    //
-
-    // When all scripts (normal and deferred) are done loading, the document
-    // state changes (this ultimately triggers the DOMContentLoaded event).
-    // Page makes this safe to call multiple times.
-    page.documentIsLoaded();
-
-    if (self.async_scripts.first == null) {
-        // Looks like all async scripts are done too!
-        // Page makes this safe to call multiple times.
-        page.documentIsComplete();
-    }
-}
-
-pub fn isDone(self: *const ScriptManager) bool {
-    return self.static_scripts_done and // page is done processing initial html
-        self.normal_scripts.first == null and // no normal scripts
-        self.defer_scripts.first == null and // no deferred scripts
-        self.async_scripts.first == null; // no async scripts
-}
-
-fn parseImportmap(self: *ScriptManager, script: *const Script) !void {
-    const content = script.source.content();
-
-    const Imports = struct {
-        imports: std.json.ArrayHashMap([]const u8),
-    };
-
-    const imports = try std.json.parseFromSliceLeaky(
-        Imports,
-        self.page.arena,
-        content,
-        .{ .allocate = .alloc_always },
-    );
-
-    var iter = imports.imports.map.iterator();
-    while (iter.next()) |entry| {
-        // > Relative URLs are resolved to absolute URL addresses using the
-        // > base URL of the document containing the import map.
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps
-        const resolved_url = try URL.stitch(
-            self.page.arena,
-            entry.value_ptr.*,
-            self.page.url.raw,
-            .{ .alloc = .if_needed, .null_terminated = true },
-        );
-
-        try self.importmap.put(self.page.arena, entry.key_ptr.*, resolved_url);
-    }
-}
-
-const Script = struct {
-    complete: bool,
-    kind: Kind,
-    source: Source,
-    url: []const u8,
-    mode: ExecutionMode,
-    node: std.DoublyLinkedList.Node,
-    element: ?*parser.Element,
-    manager: *ScriptManager,
-
-    const Kind = enum {
-        module,
-        javascript,
-        importmap,
-    };
-
-    const Callback = union(enum) {
-        string: []const u8,
-        function: js.Function,
-    };
-
-    const Source = union(enum) {
-        @"inline": []const u8,
-        remote: std.ArrayListUnmanaged(u8),
-
-        fn content(self: Source) []const u8 {
-            return switch (self) {
-                .remote => |buf| buf.items,
-                .@"inline" => |c| c,
-            };
-        }
-    };
-
-    const ExecutionMode = union(enum) {
-        normal,
-        @"defer",
-        async,
-        import,
-        import_async: ImportAsync,
-    };
-
-    fn deinit(self: *Script, comptime release_buffer: bool) void {
-        if ((comptime release_buffer) and self.source == .remote) {
-            self.manager.buffer_pool.release(self.source.remote);
-        }
-        self.manager.script_pool.destroy(self);
-    }
-
-    fn startCallback(transfer: *Http.Transfer) !void {
-        log.debug(.http, "script fetch start", .{ .req = transfer });
-    }
-
-    fn headerCallback(transfer: *Http.Transfer) !void {
-        const self: *Script = @ptrCast(@alignCast(transfer.ctx));
-        const header = &transfer.response_header.?;
-        if (header.status != 200) {
-            log.info(.http, "script header", .{
-                .req = transfer,
-                .status = header.status,
-                .content_type = header.contentType(),
-            });
-            return;
-        }
-
-        log.debug(.http, "script header", .{
-            .req = transfer,
-            .status = header.status,
-            .content_type = header.contentType(),
-        });
-
-        // If this isn't true, then we'll likely leak memory. If you don't
-        // set `CURLOPT_SUPPRESS_CONNECT_HEADERS` and CONNECT to a proxy, this
-        // will fail. This assertion exists to catch incorrect assumptions about
-        // how libcurl works, or about how we've configured it.
-        std.debug.assert(self.source.remote.capacity == 0);
-        var buffer = self.manager.buffer_pool.get();
-        if (transfer.getContentLength()) |cl| {
-            try buffer.ensureTotalCapacity(self.manager.allocator, cl);
-        }
-        self.source = .{ .remote = buffer };
-    }
-
-    fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
-        const self: *Script = @ptrCast(@alignCast(transfer.ctx));
-        self._dataCallback(transfer, data) catch |err| {
-            log.err(.http, "SM.dataCallback", .{ .err = err, .transfer = transfer, .len = data.len });
-            return err;
-        };
-    }
-    fn _dataCallback(self: *Script, _: *Http.Transfer, data: []const u8) !void {
-        try self.source.remote.appendSlice(self.manager.allocator, data);
-    }
-
-    fn doneCallback(ctx: *anyopaque) !void {
-        const self: *Script = @ptrCast(@alignCast(ctx));
-        self.complete = true;
-        log.debug(.http, "script fetch complete", .{ .req = self.url });
-
-        const manager = self.manager;
-        if (self.mode == .async or self.mode == .import_async) {
-            manager.async_scripts.remove(&self.node);
-            manager.ready_scripts.append(&self.node);
-        } else if (self.mode == .import) {
-            manager.async_scripts.remove(&self.node);
-            const entry = manager.imported_modules.getPtr(self.url).?;
-            entry.* = self.source.remote;
-            self.deinit(false);
-        }
-        manager.evaluate();
-    }
-
-    fn errorCallback(ctx: *anyopaque, err: anyerror) void {
-        const self: *Script = @ptrCast(@alignCast(ctx));
-        log.warn(.http, "script fetch error", .{ .req = self.url, .err = err });
-
-        const manager = self.manager;
-        manager.scriptList(self).remove(&self.node);
-        if (manager.shutdown) {
-            self.deinit(true);
-            return;
-        }
-
-        if (self.mode == .import) {
-            const entry = self.manager.imported_modules.getPtr(self.url).?;
-            entry.* = error.Failed;
-        }
-        self.deinit(true);
-        manager.evaluate();
-    }
-
-    fn eval(self: *Script, page: *Page) void {
-        // never evaluated, source is passed back to v8, via callbacks.
-        std.debug.assert(self.mode != .import_async);
-
-        // never evaluated, source is passed back to v8 when asked for it.
-        std.debug.assert(self.mode != .import);
-
-        // select.element can only be null for an import_async or an import
-        page.setCurrentScript(@ptrCast(self.element.?)) catch |err| {
-            log.err(.browser, "set document script", .{ .err = err });
-            return;
-        };
-
-        defer page.setCurrentScript(null) catch |err| {
-            log.err(.browser, "clear document script", .{ .err = err });
-        };
-
-        // inline scripts aren't cached. remote ones are.
-        const cacheable = self.source == .remote;
-
-        const url = self.url;
-
-        log.info(.browser, "executing script", .{
-            .src = url,
-            .kind = self.kind,
-            .cacheable = cacheable,
-        });
-
-        // Handle importmap special case here: the content is a JSON containing
-        // imports.
-        if (self.kind == .importmap) {
-            page.script_manager.parseImportmap(self) catch |err| {
-                log.err(.browser, "parse importmap script", .{
-                    .err = err,
-                    .src = url,
-                    .kind = self.kind,
-                    .cacheable = cacheable,
-                });
-                self.executeCallback("onerror", page);
-                return;
-            };
-            self.executeCallback("onload", page);
-            return;
-        }
-
-        const js_context = page.js;
-        var try_catch: js.TryCatch = undefined;
-        try_catch.init(js_context);
-        defer try_catch.deinit();
-
-        const success = blk: {
-            const content = self.source.content();
-            switch (self.kind) {
-                .javascript => _ = js_context.eval(content, url) catch break :blk false,
-                .module => {
-                    // We don't care about waiting for the evaluation here.
-                    js_context.module(false, content, url, cacheable) catch break :blk false;
-                },
-                .importmap => unreachable, // handled before the try/catch.
-            }
-            break :blk true;
-        };
-
-        if (success) {
-            self.executeCallback("onload", page);
-            return;
-        }
-
-        if (page.delayed_navigation) {
-            // If we're navigating to another page, an error is expected
-            // since we probably terminated the script forcefully.
-            return;
-        }
-
-        const msg = try_catch.err(page.arena) catch |err| @errorName(err) orelse "unknown";
-        log.warn(.user_script, "eval script", .{
-            .url = url,
-            .err = msg,
-            .cacheable = cacheable,
-        });
-
-        self.executeCallback("onerror", page);
-    }
-
-    fn executeCallback(self: *const Script, comptime typ: []const u8, page: *Page) void {
-        const callback = self.getCallback(typ, page) orelse return;
-
-        switch (callback) {
-            .string => |str| {
-                var try_catch: js.TryCatch = undefined;
-                try_catch.init(page.js);
-                defer try_catch.deinit();
-
-                _ = page.js.exec(str, typ) catch |err| {
-                    const msg = try_catch.err(page.arena) catch @errorName(err) orelse "unknown";
-                    log.warn(.user_script, "script callback", .{
-                        .url = self.url,
-                        .err = msg,
-                        .type = typ,
-                        .@"inline" = true,
-                    });
-                };
-            },
-            .function => |f| {
-                const Event = @import("events/event.zig").Event;
-                const loadevt = parser.eventCreate() catch |err| {
-                    log.err(.browser, "SM event creation", .{ .err = err });
-                    return;
-                };
-                defer parser.eventDestroy(loadevt);
-
-                var result: js.Function.Result = undefined;
-                const iface = Event.toInterface(loadevt);
-                f.tryCall(void, .{iface}, &result) catch {
-                    log.warn(.user_script, "script callback", .{
-                        .url = self.url,
-                        .type = typ,
-                        .err = result.exception,
-                        .stack = result.stack,
-                        .@"inline" = false,
-                    });
-                };
-            },
-        }
-    }
-
-    fn getCallback(self: *const Script, comptime typ: []const u8, page: *Page) ?Callback {
-        const element = self.element.?;
-        // first we check if there was an el.onload set directly on the
-        // element in JavaScript (if so, it'd be stored in the node state)
-        if (page.getNodeState(@ptrCast(element))) |se| {
-            if (@field(se, typ)) |function| {
-                return .{ .function = function };
-            }
-        }
-        // if we have no node state, or if the node state has no onload/onerror
-        // then check for the onload/onerror attribute
-        if (parser.elementGetAttribute(element, typ) catch null) |string| {
-            return .{ .string = string };
-        }
-        return null;
-    }
-};
-
-const BufferPool = struct {
-    count: usize,
-    available: List = .{},
-    allocator: Allocator,
-    max_concurrent_transfers: u8,
-    mem_pool: std.heap.MemoryPool(Container),
-
-    const List = std.DoublyLinkedList;
-
-    const Container = struct {
-        node: List.Node,
-        buf: std.ArrayListUnmanaged(u8),
-    };
-
-    fn init(allocator: Allocator, max_concurrent_transfers: u8) BufferPool {
-        return .{
-            .available = .{},
-            .count = 0,
-            .allocator = allocator,
-            .max_concurrent_transfers = max_concurrent_transfers,
-            .mem_pool = std.heap.MemoryPool(Container).init(allocator),
-        };
-    }
-
-    fn deinit(self: *BufferPool) void {
-        const allocator = self.allocator;
-
-        var node = self.available.first;
-        while (node) |n| {
-            const container: *Container = @fieldParentPtr("node", n);
-            container.buf.deinit(allocator);
-            node = n.next;
-        }
-        self.mem_pool.deinit();
-    }
-
-    fn get(self: *BufferPool) std.ArrayListUnmanaged(u8) {
-        const node = self.available.popFirst() orelse {
-            // return a new buffer
-            return .{};
-        };
-
-        self.count -= 1;
-        const container: *Container = @fieldParentPtr("node", node);
-        defer self.mem_pool.destroy(container);
-        return container.buf;
-    }
-
-    fn release(self: *BufferPool, buffer: ArrayListUnmanaged(u8)) void {
-        // create mutable copy
-        var b = buffer;
-
-        if (self.count == self.max_concurrent_transfers) {
-            b.deinit(self.allocator);
-            return;
-        }
-
-        const container = self.mem_pool.create() catch |err| {
-            b.deinit(self.allocator);
-            log.err(.http, "SM BufferPool release", .{ .err = err });
-            return;
-        };
-
-        b.clearRetainingCapacity();
-        container.* = .{ .buf = b, .node = .{} };
-        self.count += 1;
-        self.available.append(&container.node);
-    }
-};
-
-const ImportAsync = struct {
-    data: *anyopaque,
-    callback: ImportAsync.Callback,
-
-    pub const Callback = *const fn (ptr: *anyopaque, result: anyerror!ModuleSource) void;
-};
-
-pub const ModuleSource = struct {
-    buffer_pool: *BufferPool,
-    buffer: std.ArrayListUnmanaged(u8),
-
-    pub fn deinit(self: *ModuleSource) void {
-        self.buffer_pool.release(self.buffer);
-    }
-
-    pub fn src(self: *const ModuleSource) []const u8 {
-        return self.buffer.items;
-    }
-};
--- a/src/browser/SlotChangeMonitor.zig
+++ b/src/browser/SlotChangeMonitor.zig
@@ -1,189 +0,0 @@
-const std = @import("std");
-
-const log = @import("../log.zig");
-const parser = @import("netsurf.zig");
-const collection = @import("dom/html_collection.zig");
-
-const Page = @import("page.zig").Page;
-
-const SlotChangeMonitor = @This();
-
-page: *Page,
-event_node: parser.EventNode,
-slots_changed: std.ArrayList(*parser.Slot),
-
-// Monitors the document in order to trigger slotchange events.
-pub fn init(page: *Page) !*SlotChangeMonitor {
-    // on the heap, we need a stable address for event_node
-    const self = try page.arena.create(SlotChangeMonitor);
-    self.* = .{
-        .page = page,
-        .slots_changed = .empty,
-        .event_node = .{ .func = mutationCallback },
-    };
-    const root = parser.documentToNode(parser.documentHTMLToDocument(page.window.document));
-
-    _ = try parser.eventTargetAddEventListener(
-        parser.toEventTarget(parser.Node, root),
-        "DOMNodeInserted",
-        &self.event_node,
-        false,
-    );
-
-    _ = try parser.eventTargetAddEventListener(
-        parser.toEventTarget(parser.Node, root),
-        "DOMNodeRemoved",
-        &self.event_node,
-        false,
-    );
-
-    _ = try parser.eventTargetAddEventListener(
-        parser.toEventTarget(parser.Node, root),
-        "DOMAttrModified",
-        &self.event_node,
-        false,
-    );
-
-    return self;
-}
-
-// Given a element, finds its slot, if any.
-pub fn findSlot(element: *parser.Element, page: *const Page) !?*parser.Slot {
-    const target_name = (try parser.elementGetAttribute(element, "slot")) orelse return null;
-    return findNamedSlot(element, target_name, page);
-}
-
-// Given an element and a name, find the slo, if any. This is only useful for
-// MutationEvents where findSlot is unreliable because parser.elementGetAttribute(element, "slot")
-// could return the new or old value.
-fn findNamedSlot(element: *parser.Element, target_name: []const u8, page: *const Page) !?*parser.Slot {
-    // I believe elements need to be added as direct descendents of the host,
-    // so we don't need to go find the host, we just grab the parent.
-    const host = parser.nodeParentNode(@ptrCast(element)) orelse return null;
-    const state = page.getNodeState(host) orelse return null;
-    const shadow_root = state.shadow_root orelse return null;
-
-    // if we're here, we found a host, now find the slot
-    var nodes = collection.HTMLCollectionByTagName(
-        @ptrCast(@alignCast(shadow_root.proto)),
-        "slot",
-        .{ .include_root = false },
-    );
-    for (0..1000) |i| {
-        const n = (try nodes.item(@intCast(i))) orelse return null;
-        const slot_name = (try parser.elementGetAttribute(@ptrCast(n), "name")) orelse "";
-        if (std.mem.eql(u8, target_name, slot_name)) {
-            return @ptrCast(n);
-        }
-    }
-    return null;
-}
-
-// Event callback from the mutation event, signaling either the addition of
-// a node, removal of a node, or a change in attribute
-fn mutationCallback(en: *parser.EventNode, event: *parser.Event) void {
-    const mutation_event = parser.eventToMutationEvent(event);
-    const self: *SlotChangeMonitor = @fieldParentPtr("event_node", en);
-    self._mutationCallback(mutation_event) catch |err| {
-        log.err(.web_api, "slot change callback", .{ .err = err });
-    };
-}
-
-fn _mutationCallback(self: *SlotChangeMonitor, event: *parser.MutationEvent) !void {
-    const event_type = parser.eventType(@ptrCast(event));
-    if (std.mem.eql(u8, event_type, "DOMNodeInserted")) {
-        const event_target = parser.eventTarget(@ptrCast(event)) orelse return;
-        return self.nodeAddedOrRemoved(@ptrCast(event_target));
-    }
-
-    if (std.mem.eql(u8, event_type, "DOMNodeRemoved")) {
-        const event_target = parser.eventTarget(@ptrCast(event)) orelse return;
-        return self.nodeAddedOrRemoved(@ptrCast(event_target));
-    }
-
-    if (std.mem.eql(u8, event_type, "DOMAttrModified")) {
-        const attribute_name = try parser.mutationEventAttributeName(event);
-        if (std.mem.eql(u8, attribute_name, "slot") == false) {
-            return;
-        }
-
-        const new_value = parser.mutationEventNewValue(event);
-        const prev_value = parser.mutationEventPrevValue(event);
-        const event_target = parser.eventTarget(@ptrCast(event)) orelse return;
-        return self.nodeAttributeChanged(@ptrCast(event_target), new_value, prev_value);
-    }
-}
-
-// A node was removed or added. If it's an element, and if it has a slot attribute
-// then we'll dispatch a slotchange event.
-fn nodeAddedOrRemoved(self: *SlotChangeMonitor, node: *parser.Node) !void {
-    if (parser.nodeType(node) != .element) {
-        return;
-    }
-    const el: *parser.Element = @ptrCast(node);
-    if (try findSlot(el, self.page)) |slot| {
-        return self.scheduleSlotChange(slot);
-    }
-}
-
-// An attribute was modified. If the attribute is "slot", then we'll trigger 1
-// slotchange for the old slot (if there was one) and 1 slotchange for the new
-// one (if there is one)
-fn nodeAttributeChanged(self: *SlotChangeMonitor, node: *parser.Node, new_value: ?[]const u8, prev_value: ?[]const u8) !void {
-    if (parser.nodeType(node) != .element) {
-        return;
-    }
-
-    const el: *parser.Element = @ptrCast(node);
-    if (try findNamedSlot(el, prev_value orelse "", self.page)) |slot| {
-        try self.scheduleSlotChange(slot);
-    }
-
-    if (try findNamedSlot(el, new_value orelse "", self.page)) |slot| {
-        try self.scheduleSlotChange(slot);
-    }
-}
-
-// OK. Our MutationEvent is not a MutationObserver - it's an older, deprecated
-// API. It gets dispatched in the middle of the change. While I'm sure it has
-// some rules, from our point of view, it fires too early. DOMAttrModified fires
-// before the attribute is actually updated and DOMNodeRemoved before the node
-// is actually removed. This is a problem if the callback will call
-// `slot.assignedNodes`, since that won't return the new state.
-// So, we use the page schedule to schedule the dispatching of the slotchange
-// event.
-fn scheduleSlotChange(self: *SlotChangeMonitor, slot: *parser.Slot) !void {
-    for (self.slots_changed.items) |changed| {
-        if (slot == changed) {
-            return;
-        }
-    }
-
-    try self.slots_changed.append(self.page.arena, slot);
-    if (self.slots_changed.items.len == 1) {
-        // first item added, schedule the callback
-        try self.page.scheduler.add(self, scheduleCallback, 0, .{ .name = "slot change" });
-    }
-}
-
-// Callback from the schedule. Time to dispatch the slotchange event
-fn scheduleCallback(ctx: *anyopaque) ?u32 {
-    var self: *SlotChangeMonitor = @ptrCast(@alignCast(ctx));
-    self._scheduleCallback() catch |err| {
-        log.err(.app, "slot change schedule", .{ .err = err });
-    };
-    return null;
-}
-
-fn _scheduleCallback(self: *SlotChangeMonitor) !void {
-    for (self.slots_changed.items) |slot| {
-        const event = try parser.eventCreate();
-        defer parser.eventDestroy(event);
-        try parser.eventInit(event, "slotchange", .{});
-        _ = try parser.eventTargetDispatchEvent(
-            parser.toEventTarget(parser.Element, @ptrCast(@alignCast(slot))),
-            event,
-        );
-    }
-    self.slots_changed.clearRetainingCapacity();
-}
--- a/src/browser/State.zig
+++ b/src/browser/State.zig
@@ -26,34 +26,24 @@
 // this quickly proved necessary, since different fields are needed on the same
 // data at different levels of the prototype chain. This isn't memory efficient.

-const js = @import("js/js.zig");
+const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
 const DataSet = @import("html/DataSet.zig");
-const ShadowRoot = @import("dom/shadow_root.zig").ShadowRoot;
-const StyleSheet = @import("cssom/StyleSheet.zig");
-const CSSStyleDeclaration = @import("cssom/CSSStyleDeclaration.zig");
+const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;

 // for HTMLScript (but probably needs to be added to more)
-onload: ?js.Function = null,
-onerror: ?js.Function = null,
+onload: ?Env.Function = null,
+onerror: ?Env.Function = null,

 // for HTMLElement
 style: CSSStyleDeclaration = .empty,
 dataset: ?DataSet = null,
-template_content: ?*parser.DocumentFragment = null,
-
-// For dom/element
-shadow_root: ?*ShadowRoot = null,

 // for html/document
 ready_state: ReadyState = .loading,

-// for html/HTMLStyleElement
-style_sheet: ?*StyleSheet = null,
-
 // for dom/document
 active_element: ?*parser.Element = null,
-adopted_style_sheets: ?js.Object = null,

 // for HTMLSelectElement
 // By default, if no option is explicitly selected, the first option should
@@ -70,6 +60,8 @@ adopted_style_sheets: ?js.Object = null,
 // default (by returning selectedIndex == 0).
 explicit_index_set: bool = false,

+template_content: ?*parser.DocumentFragment = null,
+
 const ReadyState = enum {
    loading,
    interactive,
--- a/src/browser/browser.zig
+++ b/src/browser/browser.zig
@@ -21,25 +21,25 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 const ArenaAllocator = std.heap.ArenaAllocator;

-const js = @import("js/js.zig");
 const State = @import("State.zig");
+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 log = @import("../log.zig");
-const HttpClient = @import("../http/Client.zig");
+
+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.
 pub const Browser = struct {
-    env: *js.Env,
+    env: *Env,
    app: *App,
    session: ?Session,
    allocator: Allocator,
-    http_client: *HttpClient,
-    call_arena: ArenaAllocator,
+    http_client: *http.Client,
    page_arena: ArenaAllocator,
    session_arena: ArenaAllocator,
    transfer_arena: ArenaAllocator,
@@ -49,12 +49,10 @@ pub const Browser = struct {
    pub fn init(app: *App) !Browser {
        const allocator = app.allocator;

-        const env = try js.Env.init(allocator, &app.platform, .{});
+        const env = try Env.init(allocator, app.platform, .{});
        errdefer env.deinit();

        const notification = try Notification.init(allocator, app.notification);
-        app.http.client.notification = notification;
-        app.http.client.next_request_id = 0; // Should we track ids in CDP only?
        errdefer notification.deinit();

        return .{
@@ -63,8 +61,7 @@ pub const Browser = struct {
            .session = null,
            .allocator = allocator,
            .notification = notification,
-            .http_client = app.http.client,
-            .call_arena = ArenaAllocator.init(allocator),
+            .http_client = &app.http_client,
            .page_arena = ArenaAllocator.init(allocator),
            .session_arena = ArenaAllocator.init(allocator),
            .transfer_arena = ArenaAllocator.init(allocator),
@@ -75,11 +72,9 @@ pub const Browser = struct {
    pub fn deinit(self: *Browser) void {
        self.closeSession();
        self.env.deinit();
-        self.call_arena.deinit();
        self.page_arena.deinit();
        self.session_arena.deinit();
        self.transfer_arena.deinit();
-        self.http_client.notification = null;
        self.notification.deinit();
        self.state_pool.deinit();
    }
@@ -115,5 +110,11 @@ pub const Browser = struct {

 const testing = @import("../testing.zig");
 test "Browser" {
-    try testing.htmlRunner("browser.html");
+    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]" },
+    }, .{});
 }
--- a/src/browser/canvas/CanvasRenderingContext2D.zig
+++ b/src/browser/canvas/CanvasRenderingContext2D.zig
@@ -1,58 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const color = @import("../cssom/color.zig");
-const Page = @import("../page.zig").Page;
-
-/// This class doesn't implement a `constructor`.
-/// It can be obtained with a call to `HTMLCanvasElement#getContext`.
-/// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
-const CanvasRenderingContext2D = @This();
-/// Fill color.
-/// TODO: Add support for `CanvasGradient` and `CanvasPattern`.
-fill_style: color.RGBA = color.RGBA.Named.black,
-
-pub fn _fillRect(
-    self: *const CanvasRenderingContext2D,
-    x: f64,
-    y: f64,
-    width: f64,
-    height: f64,
-) void {
-    _ = self;
-    _ = x;
-    _ = y;
-    _ = width;
-    _ = height;
-}
-
-pub fn get_fillStyle(self: *const CanvasRenderingContext2D, page: *Page) ![]const u8 {
-    var w = std.Io.Writer.Allocating.init(page.call_arena);
-    try self.fill_style.format(&w.writer);
-    return w.written();
-}
-
-pub fn set_fillStyle(
-    self: *CanvasRenderingContext2D,
-    value: []const u8,
-) !void {
-    // Prefer the same fill_style if fails.
-    self.fill_style = color.RGBA.parse(value) catch self.fill_style;
-}
--- a/src/browser/canvas/WebGLRenderingContext.zig
+++ b/src/browser/canvas/WebGLRenderingContext.zig
@@ -1,145 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const WebGLRenderingContext = @This();
-_: u8 = 0,
-
-/// On Chrome and Safari, a call to `getSupportedExtensions` returns total of 39.
-/// The reference for it lists lesser number of extensions:
-/// https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Using_Extensions#extension_list
-pub const Extension = union(enum) {
-    ANGLE_instanced_arrays: void,
-    EXT_blend_minmax: void,
-    EXT_clip_control: void,
-    EXT_color_buffer_half_float: void,
-    EXT_depth_clamp: void,
-    EXT_disjoint_timer_query: void,
-    EXT_float_blend: void,
-    EXT_frag_depth: void,
-    EXT_polygon_offset_clamp: void,
-    EXT_shader_texture_lod: void,
-    EXT_texture_compression_bptc: void,
-    EXT_texture_compression_rgtc: void,
-    EXT_texture_filter_anisotropic: void,
-    EXT_texture_mirror_clamp_to_edge: void,
-    EXT_sRGB: void,
-    KHR_parallel_shader_compile: void,
-    OES_element_index_uint: void,
-    OES_fbo_render_mipmap: void,
-    OES_standard_derivatives: void,
-    OES_texture_float: void,
-    OES_texture_float_linear: void,
-    OES_texture_half_float: void,
-    OES_texture_half_float_linear: void,
-    OES_vertex_array_object: void,
-    WEBGL_blend_func_extended: void,
-    WEBGL_color_buffer_float: void,
-    WEBGL_compressed_texture_astc: void,
-    WEBGL_compressed_texture_etc: void,
-    WEBGL_compressed_texture_etc1: void,
-    WEBGL_compressed_texture_pvrtc: void,
-    WEBGL_compressed_texture_s3tc: void,
-    WEBGL_compressed_texture_s3tc_srgb: void,
-    WEBGL_debug_renderer_info: Type.WEBGL_debug_renderer_info,
-    WEBGL_debug_shaders: void,
-    WEBGL_depth_texture: void,
-    WEBGL_draw_buffers: void,
-    WEBGL_lose_context: Type.WEBGL_lose_context,
-    WEBGL_multi_draw: void,
-    WEBGL_polygon_mode: void,
-
-    /// Reified enum type from the fields of this union.
-    const Kind = blk: {
-        const info = @typeInfo(Extension).@"union";
-        const fields = info.fields;
-        var items: [fields.len]std.builtin.Type.EnumField = undefined;
-        for (fields, 0..) |field, i| {
-            items[i] = .{ .name = field.name, .value = i };
-        }
-
-        break :blk @Type(.{
-            .@"enum" = .{
-                .tag_type = std.math.IntFittingRange(0, if (fields.len == 0) 0 else fields.len - 1),
-                .fields = &items,
-                .decls = &.{},
-                .is_exhaustive = true,
-            },
-        });
-    };
-
-    /// Returns the `Extension.Kind` by its name.
-    fn find(name: []const u8) ?Kind {
-        // Just to make you really sad, this function has to be case-insensitive.
-        // So here we copy what's being done in `std.meta.stringToEnum` but replace
-        // the comparison function.
-        const kvs = comptime build_kvs: {
-            const T = Extension.Kind;
-            const EnumKV = struct { []const u8, T };
-            var kvs_array: [@typeInfo(T).@"enum".fields.len]EnumKV = undefined;
-            for (@typeInfo(T).@"enum".fields, 0..) |enumField, i| {
-                kvs_array[i] = .{ enumField.name, @field(T, enumField.name) };
-            }
-            break :build_kvs kvs_array[0..];
-        };
-        const Map = std.StaticStringMapWithEql(Extension.Kind, std.static_string_map.eqlAsciiIgnoreCase);
-        const map = Map.initComptime(kvs);
-        return map.get(name);
-    }
-
-    /// Extension types.
-    pub const Type = struct {
-        pub const WEBGL_debug_renderer_info = struct {
-            pub const UNMASKED_VENDOR_WEBGL: u64 = 0x9245;
-            pub const UNMASKED_RENDERER_WEBGL: u64 = 0x9246;
-
-            pub fn get_UNMASKED_VENDOR_WEBGL() u64 {
-                return UNMASKED_VENDOR_WEBGL;
-            }
-
-            pub fn get_UNMASKED_RENDERER_WEBGL() u64 {
-                return UNMASKED_RENDERER_WEBGL;
-            }
-        };
-
-        pub const WEBGL_lose_context = struct {
-            _: u8 = 0,
-            pub fn _loseContext(_: *const WEBGL_lose_context) void {}
-            pub fn _restoreContext(_: *const WEBGL_lose_context) void {}
-        };
-    };
-};
-
-/// Enables a WebGL extension.
-pub fn _getExtension(self: *const WebGLRenderingContext, name: []const u8) ?Extension {
-    _ = self;
-
-    const tag = Extension.find(name) orelse return null;
-
-    return switch (tag) {
-        .WEBGL_debug_renderer_info => @unionInit(Extension, "WEBGL_debug_renderer_info", .{}),
-        .WEBGL_lose_context => @unionInit(Extension, "WEBGL_lose_context", .{}),
-        inline else => |comptime_enum| @unionInit(Extension, @tagName(comptime_enum), {}),
-    };
-}
-
-/// Returns a list of all the supported WebGL extensions.
-pub fn _getSupportedExtensions(_: *const WebGLRenderingContext) []const []const u8 {
-    return std.meta.fieldNames(Extension.Kind);
-}
--- a/src/browser/canvas/root.zig
+++ b/src/browser/canvas/root.zig
@@ -1,13 +0,0 @@
-//! Canvas API.
-//! https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
-
-const CanvasRenderingContext2D = @import("CanvasRenderingContext2D.zig");
-const WebGLRenderingContext = @import("WebGLRenderingContext.zig");
-const Extension = WebGLRenderingContext.Extension;
-
-pub const Interfaces = .{
-    CanvasRenderingContext2D,
-    WebGLRenderingContext,
-    Extension.Type.WEBGL_debug_renderer_info,
-    Extension.Type.WEBGL_lose_context,
-};
--- a/src/browser/console/console.zig
+++ b/src/browser/console/console.zig
@@ -18,69 +18,61 @@

 const std = @import("std");
 const builtin = @import("builtin");
-const log = @import("../../log.zig");

-const js = @import("../js/js.zig");
+const Allocator = std.mem.Allocator;
 const Page = @import("../page.zig").Page;
+const JsObject = @import("../env.zig").Env.JsObject;
+
+const log = if (builtin.is_test) &test_capture else @import("../../log.zig");

 pub const Console = struct {
    // TODO: configurable writer
    timers: std.StringHashMapUnmanaged(u32) = .{},
    counts: std.StringHashMapUnmanaged(u32) = .{},

-    pub fn _lp(values: []js.Object, page: *Page) !void {
+    pub fn _lp(values: []JsObject, page: *Page) !void {
        if (values.len == 0) {
            return;
        }
        log.fatal(.console, "lightpanda", .{ .args = try serializeValues(values, page) });
    }

-    pub fn _log(values: []js.Object, page: *Page) !void {
+    pub fn _log(values: []JsObject, page: *Page) !void {
        if (values.len == 0) {
            return;
        }
        log.info(.console, "info", .{ .args = try serializeValues(values, page) });
    }

-    pub fn _info(values: []js.Object, page: *Page) !void {
+    pub fn _info(values: []JsObject, page: *Page) !void {
        return _log(values, page);
    }

-    pub fn _debug(values: []js.Object, page: *Page) !void {
+    pub fn _debug(values: []JsObject, page: *Page) !void {
        if (values.len == 0) {
            return;
        }
        log.debug(.console, "debug", .{ .args = try serializeValues(values, page) });
    }

-    pub fn _warn(values: []js.Object, page: *Page) !void {
+    pub fn _warn(values: []JsObject, page: *Page) !void {
        if (values.len == 0) {
            return;
        }
        log.warn(.console, "warn", .{ .args = try serializeValues(values, page) });
    }

-    pub fn _error(values: []js.Object, page: *Page) !void {
+    pub fn _error(values: []JsObject, page: *Page) !void {
        if (values.len == 0) {
            return;
        }

-        log.warn(.console, "error", .{
+        log.info(.console, "error", .{
            .args = try serializeValues(values, page),
            .stack = page.stackTrace() catch "???",
        });
    }

-    pub fn _trace(values: []js.Object, page: *Page) !void {
-        if (values.len == 0) {
-            return;
-        }
-        log.debug(.console, "debug", .{
-            .stack = page.js.stackTrace() catch "???",
-            .args = try serializeValues(values, page),
-        });
-    }
-
    pub fn _clear() void {}

    pub fn _count(self: *Console, label_: ?[]const u8, page: *Page) !void {
@@ -142,7 +134,7 @@ pub const Console = struct {
        log.warn(.console, "timer stop", .{ .label = label, .elapsed = elapsed - kv.value });
    }

-    pub fn _assert(assertion: js.Object, values: []js.Object, page: *Page) !void {
+    pub fn _assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
        if (assertion.isTruthy()) {
            return;
        }
@@ -153,7 +145,7 @@ pub const Console = struct {
        log.info(.console, "assertion failed", .{ .values = serialized_values });
    }

-    fn serializeValues(values: []js.Object, page: *Page) ![]const u8 {
+    fn serializeValues(values: []JsObject, page: *Page) ![]const u8 {
        if (values.len == 0) {
            return "";
        }
@@ -173,5 +165,165 @@ pub const Console = struct {
 };

 fn timestamp() u32 {
-    return @import("../../datetime.zig").timestamp();
+    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" {
+    defer testing.reset();
+
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    {
+        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("[info] args= 1: a", captured[0]);
+        try testing.expectEqual("[warn] args= 1: hello world 2: 23 3: true 4: #<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("[invalid counter] label=default", captured[0]);
+        try testing.expectEqual("[count] label=default count=1", captured[1]);
+        try testing.expectEqual("[count] label=teg count=1", captured[2]);
+        try testing.expectEqual("[count] label=teg count=2", captured[3]);
+        try testing.expectEqual("[count] label=teg count=3", captured[4]);
+        try testing.expectEqual("[count] label=default count=2", captured[5]);
+        try testing.expectEqual("[count reset] label=teg count=3", captured[6]);
+        try testing.expectEqual("[count reset] label=default count=2", captured[7]);
+        try testing.expectEqual("[count] label=default count=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] values=", captured[0]);
+        try testing.expectEqual("[assertion failed] values= 1: x 2: true", captured[1]);
+        try testing.expectEqual("[assertion failed] values= 1: x", captured[2]);
+    }
+
+    {
+        test_capture.reset();
+        try runner.testCases(&.{
+            .{ "[1].forEach(console.log)", null },
+        }, .{});
+
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("[info] args= 1: 1 2: 0 3: [1]", captured[0]);
+    }
+}
+
+const TestCapture = struct {
+    captured: std.ArrayListUnmanaged([]const u8) = .{},
+
+    fn separator(_: *const TestCapture) []const u8 {
+        return " ";
+    }
+
+    fn reset(self: *TestCapture) void {
+        self.captured = .{};
+    }
+
+    fn debug(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn info(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn warn(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn err(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn fatal(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn capture(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self._capture(scope, msg, args) catch unreachable;
+    }
+
+    fn _capture(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) !void {
+        std.debug.assert(scope == .console);
+
+        const allocator = testing.arena_allocator;
+        var buf: std.ArrayListUnmanaged(u8) = .empty;
+        try buf.appendSlice(allocator, "[" ++ msg ++ "] ");
+
+        inline for (@typeInfo(@TypeOf(args)).@"struct".fields) |f| {
+            try buf.appendSlice(allocator, f.name);
+            try buf.append(allocator, '=');
+            try @import("../../log.zig").writeValue(.pretty, @field(args, f.name), buf.writer(allocator));
+            try buf.append(allocator, ' ');
+        }
+        self.captured.append(testing.arena_allocator, std.mem.trimRight(u8, buf.items, " ")) catch unreachable;
+    }
+};
--- a/src/browser/crypto/crypto.zig
+++ b/src/browser/crypto/crypto.zig
@@ -17,14 +17,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const js = @import("../js/js.zig");
+const Env = @import("../env.zig").Env;
 const uuidv4 = @import("../../id.zig").uuidv4;

 // https://w3c.github.io/webcrypto/#crypto-interface
 pub const Crypto = struct {
    _not_empty: bool = true,

-    pub fn _getRandomValues(_: *const Crypto, js_obj: js.Object) !js.Object {
+    pub fn _getRandomValues(_: *const Crypto, js_obj: Env.JsObject) !Env.JsObject {
        var into = try js_obj.toZig(Crypto, "getRandomValues", RandomValues);
        const buf = into.asBuffer();
        if (buf.len > 65_536) {
@@ -66,6 +66,32 @@ const RandomValues = union(enum) {
 };

 const testing = @import("../../testing.zig");
-test "Browser: Crypto" {
-    try testing.htmlRunner("crypto.html");
+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" },
+        .{ "b.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" },
+        .{ "let r2 = crypto.getRandomValues(r1)", "undefined" },
+        .{ "new Set(r1).size", "5" },
+        .{ "new Set(r2).size", "5" },
+        .{ "r1.every((v, i) => v === r2[i])", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var r3 = new Uint8Array(16)", null },
+        .{ "let r4 = crypto.getRandomValues(r3)", "undefined" },
+        .{ "r4[6] = 10", null },
+        .{ "r4[6]", "10" },
+        .{ "r3[6]", "10" },
+    }, .{});
 }
--- a/src/browser/css/css.zig
+++ b/src/browser/css/css.zig
@@ -45,28 +45,32 @@ pub fn parse(alloc: std.mem.Allocator, s: []const u8, opts: parser.ParseOptions)

 // matchFirst call m.match with the first node that matches the selector s, from the
 // descendants of n and returns true. If none matches, it returns false.
-pub fn matchFirst(s: *const Selector, node: anytype, m: anytype) !bool {
-    var child = node.firstChild();
-    while (child) |c| {
-        if (try s.match(c)) {
-            try m.match(c);
+pub fn matchFirst(s: Selector, node: anytype, m: anytype) !bool {
+    var c = try node.firstChild();
+    while (true) {
+        if (c == null) break;
+
+        if (try s.match(c.?)) {
+            try m.match(c.?);
            return true;
        }

-        if (try matchFirst(s, c, m)) return true;
-        child = c.nextSibling();
+        if (try matchFirst(s, c.?, m)) return true;
+        c = try c.?.nextSibling();
    }
    return false;
 }

 // matchAll call m.match with the all the nodes that matches the selector s, from the
 // descendants of n.
-pub fn matchAll(s: *const Selector, node: anytype, m: anytype) !void {
-    var child = node.firstChild();
-    while (child) |c| {
-        if (try s.match(c)) try m.match(c);
-        try matchAll(s, c, m);
-        child = c.nextSibling();
+pub fn matchAll(s: Selector, node: anytype, m: anytype) !void {
+    var c = try node.firstChild();
+    while (true) {
+        if (c == null) break;
+
+        if (try s.match(c.?)) try m.match(c.?);
+        try matchAll(s, c.?, m);
+        c = try c.?.nextSibling();
    }
 }

@@ -186,6 +190,12 @@ test "parse" {
 }

 const testing = @import("../../testing.zig");
-test "Browser: CSS" {
-    try testing.htmlRunner("css.html");
+test "Browser.HTML.CSS" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "CSS.supports('display: flex')", "true" },
+        .{ "CSS.supports('text-decoration-style', 'blink')", "true" },
+    }, .{});
 }
--- a/src/browser/css/libdom.zig
+++ b/src/browser/css/libdom.zig
@@ -19,74 +19,68 @@
 const std = @import("std");

 const parser = @import("../netsurf.zig");
-const css = @import("css.zig");
-const Allocator = std.mem.Allocator;

 // Node implementation with Netsurf Libdom C lib.
 pub const Node = struct {
    node: *parser.Node,

-    pub fn firstChild(n: Node) ?Node {
-        const c = parser.nodeFirstChild(n.node);
+    pub fn firstChild(n: Node) !?Node {
+        const c = try parser.nodeFirstChild(n.node);
        if (c) |cc| return .{ .node = cc };

        return null;
    }

-    pub fn lastChild(n: Node) ?Node {
-        const c = parser.nodeLastChild(n.node);
+    pub fn lastChild(n: Node) !?Node {
+        const c = try parser.nodeLastChild(n.node);
        if (c) |cc| return .{ .node = cc };

        return null;
    }

-    pub fn nextSibling(n: Node) ?Node {
-        const c = parser.nodeNextSibling(n.node);
+    pub fn nextSibling(n: Node) !?Node {
+        const c = try parser.nodeNextSibling(n.node);
        if (c) |cc| return .{ .node = cc };

        return null;
    }

-    pub fn prevSibling(n: Node) ?Node {
-        const c = parser.nodePreviousSibling(n.node);
+    pub fn prevSibling(n: Node) !?Node {
+        const c = try parser.nodePreviousSibling(n.node);
        if (c) |cc| return .{ .node = cc };

        return null;
    }

-    pub fn parent(n: Node) ?Node {
-        const c = parser.nodeParentNode(n.node);
+    pub fn parent(n: Node) !?Node {
+        const c = try parser.nodeParentNode(n.node);
        if (c) |cc| return .{ .node = cc };

        return null;
    }

    pub fn isElement(n: Node) bool {
-        return parser.nodeType(n.node) == .element;
+        const t = parser.nodeType(n.node) catch return false;
+        return t == .element;
    }

    pub fn isDocument(n: Node) bool {
-        return parser.nodeType(n.node) == .document;
+        const t = parser.nodeType(n.node) catch return false;
+        return t == .document;
    }

    pub fn isComment(n: Node) bool {
-        return parser.nodeType(n.node) == .comment;
+        const t = parser.nodeType(n.node) catch return false;
+        return t == .comment;
    }

    pub fn isText(n: Node) bool {
-        return parser.nodeType(n.node) == .text;
+        const t = parser.nodeType(n.node) catch return false;
+        return t == .text;
    }

-    pub fn text(n: Node) ?[]const u8 {
-        const data = parser.nodeTextContent(n.node);
-        if (data == null) return null;
-        if (data.?.len == 0) return null;
-
-        return std.mem.trim(u8, data.?, &std.ascii.whitespace);
-    }
-
-    pub fn isEmptyText(n: Node) bool {
-        const data = parser.nodeTextContent(n.node);
+    pub fn isEmptyText(n: Node) !bool {
+        const data = try parser.nodeTextContent(n.node);
        if (data == null) return true;
        if (data.?.len == 0) return true;

@@ -94,7 +88,7 @@ pub const Node = struct {
    }

    pub fn tag(n: Node) ![]const u8 {
-        return parser.nodeName(n.node);
+        return try parser.nodeName(n.node);
    }

    pub fn attr(n: Node, key: []const u8) !?[]const u8 {
@@ -106,318 +100,3 @@ pub const Node = struct {
        return a.node == b.node;
    }
 };
-
-const MatcherTest = struct {
-    const Nodes = std.ArrayListUnmanaged(Node);
-
-    nodes: Nodes,
-    allocator: Allocator,
-
-    fn init(allocator: Allocator) MatcherTest {
-        return .{
-            .nodes = .empty,
-            .allocator = allocator,
-        };
-    }
-
-    fn deinit(m: *MatcherTest) void {
-        m.nodes.deinit(m.allocator);
-    }
-
-    fn reset(m: *MatcherTest) void {
-        m.nodes.clearRetainingCapacity();
-    }
-
-    pub fn match(m: *MatcherTest, n: Node) !void {
-        try m.nodes.append(m.allocator, n);
-    }
-};
-
-test "Browser.CSS.Libdom: matchFirst" {
-    const alloc = std.testing.allocator;
-
-    parser.init();
-    defer parser.deinit();
-
-    var matcher = MatcherTest.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        html: []const u8,
-        exp: usize,
-    }{
-        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
-        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 1 },
-        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
-        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
-        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
-        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
-        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
-        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
-        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
-        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
-        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
-        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
-        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
-        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
-        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
-        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
-        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 1 },
-        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
-        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
-        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
-        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
-        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
-        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 1 },
-        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 1 },
-        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 1 },
-        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = ":containsOwn(\"Inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
-        .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
-        .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 1 },
-        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 1 },
-        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
-        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 1 },
-        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
-        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 1 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
-        defer parser.documentHTMLClose(doc) catch {};
-
-        const s = css.parse(alloc, tc.q, .{}) catch |e| {
-            std.debug.print("parse, query: {s}\n", .{tc.q});
-            return e;
-        };
-
-        defer s.deinit(alloc);
-
-        const node = Node{ .node = parser.documentHTMLToNode(doc) };
-
-        _ = css.matchFirst(&s, node, &matcher) catch |e| {
-            std.debug.print("match, query: {s}\n", .{tc.q});
-            return e;
-        };
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("expectation, query: {s}\n", .{tc.q});
-            return e;
-        };
-    }
-}
-
-test "Browser.CSS.Libdom: matchAll" {
-    const alloc = std.testing.allocator;
-
-    parser.init();
-    defer parser.deinit();
-
-    var matcher = MatcherTest.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        html: []const u8,
-        exp: usize,
-    }{
-        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
-        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 3 },
-        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 3 },
-        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
-        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
-        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
-        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
-        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
-        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
-        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
-        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
-        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 2 },
-        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 2 },
-        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
-        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
-        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
-        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
-        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
-        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
-        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 2 },
-        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
-        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
-        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
-        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
-        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
-        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
-        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
-        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 3 },
-        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 2 },
-        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 2 },
-        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 2 },
-        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 3 },
-        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = ":containsOwn(\"Inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
-        .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
-        .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 2 },
-        .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 3 },
-        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 2 },
-        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 2 },
-        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 5 },
-        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
-        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 2 },
-        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
-        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 2 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
-        defer parser.documentHTMLClose(doc) catch {};
-
-        const s = css.parse(alloc, tc.q, .{}) catch |e| {
-            std.debug.print("parse, query: {s}\n", .{tc.q});
-            return e;
-        };
-        defer s.deinit(alloc);
-
-        const node = Node{ .node = parser.documentHTMLToNode(doc) };
-
-        _ = css.matchAll(&s, node, &matcher) catch |e| {
-            std.debug.print("match, query: {s}\n", .{tc.q});
-            return e;
-        };
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("expectation, query: {s}\n", .{tc.q});
-            return e;
-        };
-    }
-}
--- a/src/browser/css/libdom_test.zig
+++ b/src/browser/css/libdom_test.zig
@@ -0,0 +1,325 @@
+// 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 css = @import("css.zig");
+const Node = @import("libdom.zig").Node;
+const parser = @import("../netsurf.zig");
+
+const Matcher = struct {
+    const Nodes = std.ArrayList(Node);
+
+    nodes: Nodes,
+
+    fn init(alloc: std.mem.Allocator) Matcher {
+        return .{ .nodes = Nodes.init(alloc) };
+    }
+
+    fn deinit(m: *Matcher) void {
+        m.nodes.deinit();
+    }
+
+    fn reset(m: *Matcher) void {
+        m.nodes.clearRetainingCapacity();
+    }
+
+    pub fn match(m: *Matcher, n: Node) !void {
+        try m.nodes.append(n);
+    }
+};
+
+test "matchFirst" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        html: []const u8,
+        exp: usize,
+    }{
+        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
+        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 1 },
+        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
+        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
+        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
+        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
+        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
+        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
+        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
+        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
+        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
+        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
+        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
+        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
+        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
+        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
+        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
+        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
+        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
+        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
+        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
+        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
+        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
+        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
+        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
+        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
+        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
+        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
+        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
+        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 1 },
+        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
+        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
+        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
+        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
+        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
+        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
+        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
+        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
+        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
+        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 1 },
+        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
+        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
+        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 1 },
+        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
+        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
+        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 1 },
+        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
+        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        // .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
+        // .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        // .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        // .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
+        // .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
+        // .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
+        // .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
+        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 1 },
+        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
+        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
+        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 1 },
+        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
+        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 1 },
+        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
+        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
+        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
+        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 1 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const doc = try parser.documentHTMLParseFromStr(tc.html);
+        defer parser.documentHTMLClose(doc) catch {};
+
+        const s = css.parse(alloc, tc.q, .{}) catch |e| {
+            std.debug.print("parse, query: {s}\n", .{tc.q});
+            return e;
+        };
+
+        defer s.deinit(alloc);
+
+        const node = Node{ .node = parser.documentHTMLToNode(doc) };
+
+        _ = css.matchFirst(s, node, &matcher) catch |e| {
+            std.debug.print("match, query: {s}\n", .{tc.q});
+            return e;
+        };
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("expectation, query: {s}\n", .{tc.q});
+            return e;
+        };
+    }
+}
+
+test "matchAll" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        html: []const u8,
+        exp: usize,
+    }{
+        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
+        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 3 },
+        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 3 },
+        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
+        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
+        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
+        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
+        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
+        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
+        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
+        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
+        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
+        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
+        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
+        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
+        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
+        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
+        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 2 },
+        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 2 },
+        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
+        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
+        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
+        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
+        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
+        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
+        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
+        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
+        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
+        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
+        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
+        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
+        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
+        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
+        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
+        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
+        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
+        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 2 },
+        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
+        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
+        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
+        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
+        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
+        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
+        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
+        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
+        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
+        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
+        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
+        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
+        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
+        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 3 },
+        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 2 },
+        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
+        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 2 },
+        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 2 },
+        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
+        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 3 },
+        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
+        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        // .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
+        // .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        // .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
+        .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
+        // .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
+        // .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 2 },
+        // .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
+        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
+        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
+        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
+        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 3 },
+        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
+        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
+        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 2 },
+        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 2 },
+        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
+        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 5 },
+        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
+        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
+        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 2 },
+        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
+        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
+        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
+        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 2 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const doc = try parser.documentHTMLParseFromStr(tc.html);
+        defer parser.documentHTMLClose(doc) catch {};
+
+        const s = css.parse(alloc, tc.q, .{}) catch |e| {
+            std.debug.print("parse, query: {s}\n", .{tc.q});
+            return e;
+        };
+        defer s.deinit(alloc);
+
+        const node = Node{ .node = parser.documentHTMLToNode(doc) };
+
+        _ = css.matchAll(s, node, &matcher) catch |e| {
+            std.debug.print("match, query: {s}\n", .{tc.q});
+            return e;
+        };
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("expectation, query: {s}\n", .{tc.q});
+            return e;
+        };
+    }
+}
--- a/src/browser/css/match_test.zig
+++ b/src/browser/css/match_test.zig
@@ -0,0 +1,587 @@
+// 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 css = @import("css.zig");
+
+// Node mock implementation for test only.
+pub const Node = struct {
+    child: ?*const Node = null,
+    last: ?*const Node = null,
+    sibling: ?*const Node = null,
+    prev: ?*const Node = null,
+    par: ?*const Node = null,
+
+    name: []const u8 = "",
+    att: ?[]const u8 = null,
+
+    pub fn firstChild(n: *const Node) !?*const Node {
+        return n.child;
+    }
+
+    pub fn lastChild(n: *const Node) !?*const Node {
+        return n.last;
+    }
+
+    pub fn nextSibling(n: *const Node) !?*const Node {
+        return n.sibling;
+    }
+
+    pub fn prevSibling(n: *const Node) !?*const Node {
+        return n.prev;
+    }
+
+    pub fn parent(n: *const Node) !?*const Node {
+        return n.par;
+    }
+
+    pub fn isElement(_: *const Node) bool {
+        return true;
+    }
+
+    pub fn isDocument(_: *const Node) bool {
+        return false;
+    }
+
+    pub fn isComment(_: *const Node) bool {
+        return false;
+    }
+
+    pub fn isText(_: *const Node) bool {
+        return false;
+    }
+
+    pub fn isEmptyText(_: *const Node) !bool {
+        return false;
+    }
+
+    pub fn tag(n: *const Node) ![]const u8 {
+        return n.name;
+    }
+
+    pub fn attr(n: *const Node, _: []const u8) !?[]const u8 {
+        return n.att;
+    }
+
+    pub fn eql(a: *const Node, b: *const Node) bool {
+        return a == b;
+    }
+};
+
+const Matcher = struct {
+    const Nodes = std.ArrayList(*const Node);
+
+    nodes: Nodes,
+
+    fn init(alloc: std.mem.Allocator) Matcher {
+        return .{ .nodes = Nodes.init(alloc) };
+    }
+
+    fn deinit(m: *Matcher) void {
+        m.nodes.deinit();
+    }
+
+    fn reset(m: *Matcher) void {
+        m.nodes.clearRetainingCapacity();
+    }
+
+    pub fn match(m: *Matcher, n: *const Node) !void {
+        try m.nodes.append(n);
+    }
+};
+
+test "matchFirst" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: Node,
+        exp: usize,
+    }{
+        .{
+            .q = "address",
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo!=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo!=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo^=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo$=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo*=rb]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "strong, a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
+                .name = "a",
+                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
+            } } } },
+            .exp = 1,
+        },
+        .{
+            .q = ":not(p)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:haschild(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:haschild(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "a:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
+            .exp = 1,
+        },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        _ = css.matchFirst(s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "matchAll" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: Node,
+        exp: usize,
+    }{
+        .{
+            .q = "address",
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo!=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo!=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo^=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo$=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo*=rb]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "strong, a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
+                .name = "a",
+                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
+            } } } },
+            .exp = 1,
+        },
+        .{
+            .q = ":not(p)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "p:has(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:haschild(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:haschild(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "a:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
+            .exp = 1,
+        },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "pseudo class" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    var p1: Node = .{ .name = "p" };
+    var p2: Node = .{ .name = "p" };
+    var a1: Node = .{ .name = "a" };
+
+    p1.sibling = &p2;
+    p2.prev = &p1;
+
+    p2.sibling = &a1;
+    a1.prev = &p2;
+
+    var root: Node = .{ .child = &p1, .last = &a1 };
+    p1.par = &root;
+    p2.par = &root;
+    a1.par = &root;
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: Node,
+        exp: ?*const Node,
+    }{
+        .{ .q = "p:only-child", .n = root, .exp = null },
+        .{ .q = "a:only-of-type", .n = root, .exp = &a1 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        if (tc.exp) |exp_n| {
+            const exp: usize = 1;
+            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            continue;
+        }
+
+        const exp: usize = 0;
+        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "nth pseudo class" {
+    const alloc = std.testing.allocator;
+
+    var matcher = Matcher.init(alloc);
+    defer matcher.deinit();
+
+    var p1: Node = .{ .name = "p" };
+    var p2: Node = .{ .name = "p" };
+
+    p1.sibling = &p2;
+    p2.prev = &p1;
+
+    var root: Node = .{ .child = &p1, .last = &p2 };
+    p1.par = &root;
+    p2.par = &root;
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: Node,
+        exp: ?*const Node,
+    }{
+        .{ .q = "a:nth-of-type(1)", .n = root, .exp = null },
+        .{ .q = "p:nth-of-type(1)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-of-type(2)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-of-type(0)", .n = root, .exp = null },
+        .{ .q = "p:nth-of-type(2n)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-last-child(1)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-last-child(2)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(1)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(2)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-child(odd)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(even)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-child(n+2)", .n = root, .exp = &p2 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        if (tc.exp) |exp_n| {
+            const exp: usize = 1;
+            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            continue;
+        }
+
+        const exp: usize = 0;
+        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
--- a/src/browser/css/parser.zig
+++ b/src/browser/css/parser.zig
@@ -22,7 +22,6 @@
 // see https://github.com/andybalholm/cascadia/blob/master/parser.go
 const std = @import("std");
 const ascii = std.ascii;
-const Allocator = std.mem.Allocator;

 const selector = @import("selector.zig");
 const Selector = selector.Selector;
@@ -78,8 +77,8 @@ pub const Parser = struct {

    opts: ParseOptions,

-    pub fn parse(p: *Parser, allocator: Allocator) ParseError!Selector {
-        return p.parseSelectorGroup(allocator);
+    pub fn parse(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        return p.parseSelectorGroup(alloc);
    }

    // skipWhitespace consumes whitespace characters and comments.
@@ -116,13 +115,13 @@ pub const Parser = struct {

    // parseSimpleSelectorSequence parses a selector sequence that applies to
    // a single element.
-    fn parseSimpleSelectorSequence(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseSimpleSelectorSequence(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        if (p.i >= p.s.len) {
            return ParseError.ExpectedSelector;
        }

-        var buf: std.ArrayListUnmanaged(Selector) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(Selector).init(alloc);
+        defer buf.deinit();

        switch (p.s[p.i]) {
            '*' => {
@@ -139,20 +138,20 @@ pub const Parser = struct {
                // There's no type selector. Wait to process the other till the
                // main loop.
            },
-            else => try buf.append(allocator, try p.parseTypeSelector(allocator)),
+            else => try buf.append(try p.parseTypeSelector(alloc)),
        }

        var pseudo_elt: ?PseudoClass = null;

        loop: while (p.i < p.s.len) {
            var ns: Selector = switch (p.s[p.i]) {
-                '#' => try p.parseIDSelector(allocator),
-                '.' => try p.parseClassSelector(allocator),
-                '[' => try p.parseAttributeSelector(allocator),
-                ':' => try p.parsePseudoclassSelector(allocator),
+                '#' => try p.parseIDSelector(alloc),
+                '.' => try p.parseClassSelector(alloc),
+                '[' => try p.parseAttributeSelector(alloc),
+                ':' => try p.parsePseudoclassSelector(alloc),
                else => break :loop,
            };
-            errdefer ns.deinit(allocator);
+            errdefer ns.deinit(alloc);

            // From https://drafts.csswg.org/selectors-3/#pseudo-elements :
            // "Only one pseudo-element may appear per selector, and if present
@@ -166,32 +165,28 @@ pub const Parser = struct {
                    if (!p.opts.accept_pseudo_elts) return ParseError.PseudoElementDisabled;

                    pseudo_elt = e;
-                    ns.deinit(allocator);
+                    ns.deinit(alloc);
                },
                else => {
                    if (pseudo_elt != null) return ParseError.PseudoElementNotAtSelectorEnd;
-                    try buf.append(allocator, ns);
+                    try buf.append(ns);
                },
            }
        }

        // no need wrap the selectors in compoundSelector
-        if (buf.items.len == 1 and pseudo_elt == null) {
-            return buf.items[0];
-        }
+        if (buf.items.len == 1 and pseudo_elt == null) return buf.items[0];

-        return .{
-            .compound = .{ .selectors = try buf.toOwnedSlice(allocator), .pseudo_elt = pseudo_elt },
-        };
+        return .{ .compound = .{ .selectors = try buf.toOwnedSlice(), .pseudo_elt = pseudo_elt } };
    }

    // parseTypeSelector parses a type selector (one that matches by tag name).
-    fn parseTypeSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
-        try p.parseIdentifier(buf.writer(allocator));
+    fn parseTypeSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
+        try p.parseIdentifier(buf.writer());

-        return .{ .tag = try buf.toOwnedSlice(allocator) };
+        return .{ .tag = try buf.toOwnedSlice() };
    }

    // parseIdentifier parses an identifier.
@@ -209,7 +204,7 @@ pub const Parser = struct {
        }

        const c = p.s[p.i];
-        if (!(nameStart(c) or c == '\\')) {
+        if (!nameStart(c) or c == '\\') {
            return ParseError.ExpectedSelector;
        }

@@ -319,47 +314,47 @@ pub const Parser = struct {
    }

    // parseIDSelector parses a selector that matches by id attribute.
-    fn parseIDSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseIDSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        if (p.i >= p.s.len) return ParseError.ExpectedIDSelector;
        if (p.s[p.i] != '#') return ParseError.ExpectedIDSelector;

        p.i += 1;

-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();

-        try p.parseName(buf.writer(allocator));
-        return .{ .id = try buf.toOwnedSlice(allocator) };
+        try p.parseName(buf.writer());
+        return .{ .id = try buf.toOwnedSlice() };
    }

    // parseClassSelector parses a selector that matches by class attribute.
-    fn parseClassSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseClassSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        if (p.i >= p.s.len) return ParseError.ExpectedClassSelector;
        if (p.s[p.i] != '.') return ParseError.ExpectedClassSelector;

        p.i += 1;

-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();

-        try p.parseIdentifier(buf.writer(allocator));
-        return .{ .class = try buf.toOwnedSlice(allocator) };
+        try p.parseIdentifier(buf.writer());
+        return .{ .class = try buf.toOwnedSlice() };
    }

    // parseAttributeSelector parses a selector that matches by attribute value.
-    fn parseAttributeSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseAttributeSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        if (p.i >= p.s.len) return ParseError.ExpectedAttributeSelector;
        if (p.s[p.i] != '[') return ParseError.ExpectedAttributeSelector;

        p.i += 1;
        _ = p.skipWhitespace();

-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();

-        try p.parseIdentifier(buf.writer(allocator));
-        const key = try buf.toOwnedSlice(allocator);
-        errdefer allocator.free(key);
+        try p.parseIdentifier(buf.writer());
+        const key = try buf.toOwnedSlice();
+        errdefer alloc.free(key);

        lowerstr(key);

@@ -382,12 +377,12 @@ pub const Parser = struct {
        var is_val: bool = undefined;
        if (op == .regexp) {
            is_val = false;
-            try p.parseRegex(buf.writer(allocator));
+            try p.parseRegex(buf.writer());
        } else {
            is_val = true;
            switch (p.s[p.i]) {
-                '\'', '"' => try p.parseString(buf.writer(allocator)),
-                else => try p.parseIdentifier(buf.writer(allocator)),
+                '\'', '"' => try p.parseString(buf.writer()),
+                else => try p.parseIdentifier(buf.writer()),
            }
        }

@@ -409,8 +404,8 @@ pub const Parser = struct {

        return .{ .attribute = .{
            .key = key,
-            .val = if (is_val) try buf.toOwnedSlice(allocator) else null,
-            .regexp = if (!is_val) try buf.toOwnedSlice(allocator) else null,
+            .val = if (is_val) try buf.toOwnedSlice() else null,
+            .regexp = if (!is_val) try buf.toOwnedSlice() else null,
            .op = op,
            .ci = ci,
        } };
@@ -503,7 +498,7 @@ pub const Parser = struct {
    // parsePseudoclassSelector parses a pseudoclass selector like :not(p) or a pseudo-element
    // For backwards compatibility, both ':' and '::' prefix are allowed for pseudo-elements.
    // https://drafts.csswg.org/selectors-3/#pseudo-elements
-    fn parsePseudoclassSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parsePseudoclassSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        if (p.i >= p.s.len) return ParseError.ExpectedPseudoClassSelector;
        if (p.s[p.i] != ':') return ParseError.ExpectedPseudoClassSelector;

@@ -516,10 +511,10 @@ pub const Parser = struct {
            p.i += 1;
        }

-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();

-        try p.parseIdentifier(buf.writer(allocator));
+        try p.parseIdentifier(buf.writer());

        const pseudo_class = try PseudoClass.parse(buf.items);

@@ -532,11 +527,11 @@ pub const Parser = struct {
            .not, .has, .haschild => {
                if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;

-                const sel = try p.parseSelectorGroup(allocator);
+                const sel = try p.parseSelectorGroup(alloc);
                if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;

-                const s = try allocator.create(Selector);
-                errdefer allocator.destroy(s);
+                const s = try alloc.create(Selector);
+                errdefer alloc.destroy(s);
                s.* = sel;

                return .{ .pseudo_class_relative = .{ .pseudo_class = pseudo_class, .match = s } };
@@ -546,31 +541,33 @@ pub const Parser = struct {
                if (p.i == p.s.len) return ParseError.UnmatchParenthesis;

                switch (p.s[p.i]) {
-                    '\'', '"' => try p.parseString(buf.writer(allocator)),
-                    else => try p.parseString(buf.writer(allocator)),
+                    '\'', '"' => try p.parseString(buf.writer()),
+                    else => try p.parseString(buf.writer()),
                }

                _ = p.skipWhitespace();
                if (p.i >= p.s.len) return ParseError.InvalidPseudoClass;
                if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;

-                const val = try buf.toOwnedSlice(allocator);
-                errdefer allocator.free(val);
+                const val = try buf.toOwnedSlice();
+                errdefer alloc.free(val);
+
+                lowerstr(val);

                return .{ .pseudo_class_contains = .{ .own = pseudo_class == .containsown, .val = val } };
            },
            .matches, .matchesown => {
                if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;

-                try p.parseRegex(buf.writer(allocator));
+                try p.parseRegex(buf.writer());
                if (p.i >= p.s.len) return ParseError.InvalidPseudoClassSelector;
                if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;

-                return .{ .pseudo_class_regexp = .{ .own = pseudo_class == .matchesown, .regexp = try buf.toOwnedSlice(allocator) } };
+                return .{ .pseudo_class_regexp = .{ .own = pseudo_class == .matchesown, .regexp = try buf.toOwnedSlice() } };
            },
            .nth_child, .nth_last_child, .nth_of_type, .nth_last_of_type => {
                if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
-                const nth = try p.parseNth(allocator);
+                const nth = try p.parseNth(alloc);
                if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;

                const last = pseudo_class == .nth_last_child or pseudo_class == .nth_last_of_type;
@@ -585,19 +582,18 @@ pub const Parser = struct {
            .only_of_type => return .{ .pseudo_class_only_child = true },
            .input, .empty, .root, .link => return .{ .pseudo_class = pseudo_class },
            .enabled, .disabled, .checked => return .{ .pseudo_class = pseudo_class },
-            .visible => return .{ .pseudo_class = pseudo_class },
            .lang => {
                if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
                if (p.i == p.s.len) return ParseError.UnmatchParenthesis;

-                try p.parseIdentifier(buf.writer(allocator));
+                try p.parseIdentifier(buf.writer());

                _ = p.skipWhitespace();
                if (p.i >= p.s.len) return ParseError.InvalidPseudoClass;
                if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;

-                const val = try buf.toOwnedSlice(allocator);
-                errdefer allocator.free(val);
+                const val = try buf.toOwnedSlice();
+                errdefer alloc.free(val);
                lowerstr(val);

                return .{ .pseudo_class_lang = val };
@@ -609,7 +605,7 @@ pub const Parser = struct {
            .after, .backdrop, .before, .cue, .first_letter => return .{ .pseudo_element = pseudo_class },
            .first_line, .grammar_error, .marker, .placeholder => return .{ .pseudo_element = pseudo_class },
            .selection, .spelling_error => return .{ .pseudo_element = pseudo_class },
-            .modal, .popover_open => return .{ .pseudo_element = pseudo_class },
+            .modal => return .{ .pseudo_element = pseudo_class },
        }
    }

@@ -625,32 +621,30 @@ pub const Parser = struct {
    }

    // parseSelectorGroup parses a group of selectors, separated by commas.
-    fn parseSelectorGroup(p: *Parser, allocator: Allocator) ParseError!Selector {
-        const s = try p.parseSelector(allocator);
+    fn parseSelectorGroup(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        const s = try p.parseSelector(alloc);

-        var buf: std.ArrayListUnmanaged(Selector) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(Selector).init(alloc);
+        defer buf.deinit();

-        try buf.append(allocator, s);
+        try buf.append(s);

        while (p.i < p.s.len) {
            if (p.s[p.i] != ',') break;
            p.i += 1;
-            const ss = try p.parseSelector(allocator);
-            try buf.append(allocator, ss);
+            const ss = try p.parseSelector(alloc);
+            try buf.append(ss);
        }

-        if (buf.items.len == 1) {
-            return buf.items[0];
-        }
+        if (buf.items.len == 1) return buf.items[0];

-        return .{ .group = try buf.toOwnedSlice(allocator) };
+        return .{ .group = try buf.toOwnedSlice() };
    }

    // parseSelector parses a selector that may include combinators.
-    fn parseSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
        _ = p.skipWhitespace();
-        var s = try p.parseSimpleSelectorSequence(allocator);
+        var s = try p.parseSimpleSelectorSequence(alloc);

        while (true) {
            var combinator: Combinator = .empty;
@@ -678,21 +672,17 @@ pub const Parser = struct {
                return s;
            }

-            const c = try p.parseSimpleSelectorSequence(allocator);
+            const c = try p.parseSimpleSelectorSequence(alloc);

-            const first = try allocator.create(Selector);
-            errdefer allocator.destroy(first);
+            const first = try alloc.create(Selector);
+            errdefer alloc.destroy(first);
            first.* = s;

-            const second = try allocator.create(Selector);
-            errdefer allocator.destroy(second);
+            const second = try alloc.create(Selector);
+            errdefer alloc.destroy(second);
            second.* = c;

-            s = Selector{ .combined = .{
-                .first = first,
-                .second = second,
-                .combinator = combinator,
-            } };
+            s = Selector{ .combined = .{ .first = first, .second = second, .combinator = combinator } };
        }

        return s;
@@ -785,7 +775,7 @@ pub const Parser = struct {
    }

    // parseNth parses the argument for :nth-child (normally of the form an+b).
-    fn parseNth(p: *Parser, allocator: Allocator) ParseError![2]isize {
+    fn parseNth(p: *Parser, alloc: std.mem.Allocator) ParseError![2]isize {
        // initial state
        if (p.i >= p.s.len) return ParseError.ExpectedNthExpression;
        return switch (p.s[p.i]) {
@@ -803,10 +793,10 @@ pub const Parser = struct {
                return p.parseNthReadN(1);
            },
            'o', 'O', 'e', 'E' => {
-                var buf: std.ArrayListUnmanaged(u8) = .empty;
-                defer buf.deinit(allocator);
+                var buf = std.ArrayList(u8).init(alloc);
+                defer buf.deinit();

-                try p.parseName(buf.writer(allocator));
+                try p.parseName(buf.writer());

                if (std.ascii.eqlIgnoreCase("odd", buf.items)) return .{ 2, 1 };
                if (std.ascii.eqlIgnoreCase("even", buf.items)) return .{ 2, 0 };
@@ -821,8 +811,7 @@ pub const Parser = struct {
 // nameStart returns whether c can be the first character of an identifier
 // (not counting an initial hyphen, or an escape sequence).
 fn nameStart(c: u8) bool {
-    return 'a' <= c and c <= 'z' or 'A' <= c and c <= 'Z' or c == '_' or c > 127 or
-        '0' <= c and c <= '9';
+    return 'a' <= c and c <= 'z' or 'A' <= c and c <= 'Z' or c == '_' or c > 127;
 }

 // nameChar returns whether c can be a character within an identifier
@@ -883,7 +872,7 @@ test "parser.skipWhitespace" {
 }

 test "parser.parseIdentifier" {
-    const allocator = std.testing.allocator;
+    const alloc = std.testing.allocator;

    const testcases = [_]struct {
        s: []const u8, // given value
@@ -891,7 +880,7 @@ test "parser.parseIdentifier" {
        err: bool = false,
    }{
        .{ .s = "x", .exp = "x" },
-        .{ .s = "96", .exp = "96", .err = false },
+        .{ .s = "96", .exp = "", .err = true },
        .{ .s = "-x", .exp = "-x" },
        .{ .s = "r\\e9 sumé", .exp = "résumé" },
        .{ .s = "r\\0000e9 sumé", .exp = "résumé" },
@@ -899,14 +888,14 @@ test "parser.parseIdentifier" {
        .{ .s = "a\\\"b", .exp = "a\"b" },
    };

-    var buf: std.ArrayListUnmanaged(u8) = .empty;
-    defer buf.deinit(allocator);
+    var buf = std.ArrayList(u8).init(alloc);
+    defer buf.deinit();

    for (testcases) |tc| {
        buf.clearRetainingCapacity();

        var p = Parser{ .s = tc.s, .opts = .{} };
-        p.parseIdentifier(buf.writer(allocator)) catch |e| {
+        p.parseIdentifier(buf.writer()) catch |e| {
            // if error was expected, continue.
            if (tc.err) continue;

@@ -921,7 +910,7 @@ test "parser.parseIdentifier" {
 }

 test "parser.parseString" {
-    const allocator = std.testing.allocator;
+    const alloc = std.testing.allocator;

    const testcases = [_]struct {
        s: []const u8, // given value
@@ -940,14 +929,14 @@ test "parser.parseString" {
        .{ .s = "\"hello world\"", .exp = "hello world" },
    };

-    var buf: std.ArrayListUnmanaged(u8) = .empty;
-    defer buf.deinit(allocator);
+    var buf = std.ArrayList(u8).init(alloc);
+    defer buf.deinit();

    for (testcases) |tc| {
        buf.clearRetainingCapacity();

        var p = Parser{ .s = tc.s, .opts = .{} };
-        p.parseString(buf.writer(allocator)) catch |e| {
+        p.parseString(buf.writer()) catch |e| {
            // if error was expected, continue.
            if (tc.err) continue;

@@ -960,37 +949,3 @@ test "parser.parseString" {
        };
    }
 }
-
-test "parser.parse" {
-    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
-    defer arena.deinit();
-    const allocator = arena.allocator();
-
-    const testcases = [_]struct {
-        s: []const u8, // given value
-        exp: Selector, // expected value
-        err: bool = false,
-    }{
-        .{ .s = "root", .exp = .{ .tag = "root" } },
-        .{ .s = ".root", .exp = .{ .class = "root" } },
-        .{ .s = ":root", .exp = .{ .pseudo_class = .root } },
-        .{ .s = ".\\:bar", .exp = .{ .class = ":bar" } },
-        .{ .s = ".foo\\:bar", .exp = .{ .class = "foo:bar" } },
-        .{ .s = "[class=75c0fa18a94b9e3a6b8e14d6cbe688a27f5da10a]", .exp = .{ .attribute = .{ .key = "class", .val = "75c0fa18a94b9e3a6b8e14d6cbe688a27f5da10a", .op = .eql } } },
-    };
-
-    for (testcases) |tc| {
-        var p = Parser{ .s = tc.s, .opts = .{} };
-        const sel = p.parse(allocator) catch |e| {
-            // if error was expected, continue.
-            if (tc.err) continue;
-
-            std.debug.print("test case {s}\n", .{tc.s});
-            return e;
-        };
-        std.testing.expectEqualDeep(tc.exp, sel) catch |e| {
-            std.debug.print("test case {s} : {}\n", .{ tc.s, sel });
-            return e;
-        };
-    }
-}
--- a/src/browser/css/selector.zig
+++ b/src/browser/css/selector.zig
--- a/src/browser/cssom/CSSParser.zig
+++ b/src/browser/cssom/CSSParser.zig
@@ -1,289 +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 Allocator = std.mem.Allocator;
-
-const CSSConstants = struct {
-    const IMPORTANT = "!important";
-    const URL_PREFIX = "url(";
-};
-
-const CSSParserState = enum {
-    seek_name,
-    in_name,
-    seek_colon,
-    seek_value,
-    in_value,
-    in_quoted_value,
-    in_single_quoted_value,
-    in_url,
-    in_important,
-};
-
-const CSSDeclaration = struct {
-    name: []const u8,
-    value: []const u8,
-    is_important: bool,
-};
-
-const CSSParser = @This();
-state: CSSParserState,
-name_start: usize,
-name_end: usize,
-value_start: usize,
-position: usize,
-paren_depth: usize,
-escape_next: bool,
-
-pub fn init() CSSParser {
-    return .{
-        .state = .seek_name,
-        .name_start = 0,
-        .name_end = 0,
-        .value_start = 0,
-        .position = 0,
-        .paren_depth = 0,
-        .escape_next = false,
-    };
-}
-
-pub fn parseDeclarations(arena: Allocator, text: []const u8) ![]CSSDeclaration {
-    var parser = init();
-    var declarations: std.ArrayListUnmanaged(CSSDeclaration) = .empty;
-
-    while (parser.position < text.len) {
-        const c = text[parser.position];
-
-        switch (parser.state) {
-            .seek_name => {
-                if (!std.ascii.isWhitespace(c)) {
-                    parser.name_start = parser.position;
-                    parser.state = .in_name;
-                    continue;
-                }
-            },
-            .in_name => {
-                if (c == ':') {
-                    parser.name_end = parser.position;
-                    parser.state = .seek_value;
-                } else if (std.ascii.isWhitespace(c)) {
-                    parser.name_end = parser.position;
-                    parser.state = .seek_colon;
-                }
-            },
-            .seek_colon => {
-                if (c == ':') {
-                    parser.state = .seek_value;
-                } else if (!std.ascii.isWhitespace(c)) {
-                    parser.state = .seek_name;
-                    continue;
-                }
-            },
-            .seek_value => {
-                if (!std.ascii.isWhitespace(c)) {
-                    parser.value_start = parser.position;
-                    if (c == '"') {
-                        parser.state = .in_quoted_value;
-                    } else if (c == '\'') {
-                        parser.state = .in_single_quoted_value;
-                    } else if (c == 'u' and parser.position + CSSConstants.URL_PREFIX.len <= text.len and std.mem.startsWith(u8, text[parser.position..], CSSConstants.URL_PREFIX)) {
-                        parser.state = .in_url;
-                        parser.paren_depth = 1;
-                        parser.position += 3;
-                    } else {
-                        parser.state = .in_value;
-                        continue;
-                    }
-                }
-            },
-            .in_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '(') {
-                    parser.paren_depth += 1;
-                } else if (c == ')' and parser.paren_depth > 0) {
-                    parser.paren_depth -= 1;
-                } else if (c == ';' and parser.paren_depth == 0) {
-                    try parser.finishDeclaration(arena, &declarations, text);
-                    parser.state = .seek_name;
-                }
-            },
-            .in_quoted_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '"') {
-                    parser.state = .in_value;
-                }
-            },
-            .in_single_quoted_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '\'') {
-                    parser.state = .in_value;
-                }
-            },
-            .in_url => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '(') {
-                    parser.paren_depth += 1;
-                } else if (c == ')') {
-                    parser.paren_depth -= 1;
-                    if (parser.paren_depth == 0) {
-                        parser.state = .in_value;
-                    }
-                }
-            },
-            .in_important => {},
-        }
-
-        parser.position += 1;
-    }
-
-    try parser.finalize(arena, &declarations, text);
-
-    return declarations.items;
-}
-
-fn finishDeclaration(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
-    const name = std.mem.trim(u8, text[self.name_start..self.name_end], &std.ascii.whitespace);
-    if (name.len == 0) return;
-
-    const raw_value = text[self.value_start..self.position];
-    const value = std.mem.trim(u8, raw_value, &std.ascii.whitespace);
-
-    var final_value = value;
-    var is_important = false;
-
-    if (std.mem.endsWith(u8, value, CSSConstants.IMPORTANT)) {
-        is_important = true;
-        final_value = std.mem.trimRight(u8, value[0 .. value.len - CSSConstants.IMPORTANT.len], &std.ascii.whitespace);
-    }
-
-    try declarations.append(arena, .{
-        .name = name,
-        .value = final_value,
-        .is_important = is_important,
-    });
-}
-
-fn finalize(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
-    if (self.state != .in_value) {
-        return;
-    }
-    return self.finishDeclaration(arena, declarations, text);
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.Parser - Simple property" {
-    defer testing.reset();
-
-    const text = "color: red;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("red", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Property with !important" {
-    defer testing.reset();
-    const text = "margin: 10px !important;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("margin", declarations[0].name);
-    try testing.expectEqual("10px", declarations[0].value);
-    try testing.expectEqual(true, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Multiple properties" {
-    defer testing.reset();
-    const text = "color: red; font-size: 12px; margin: 5px !important;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expect(declarations.len == 3);
-
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("red", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-
-    try testing.expectEqual("font-size", declarations[1].name);
-    try testing.expectEqual("12px", declarations[1].value);
-    try testing.expectEqual(false, declarations[1].is_important);
-
-    try testing.expectEqual("margin", declarations[2].name);
-    try testing.expectEqual("5px", declarations[2].value);
-    try testing.expectEqual(true, declarations[2].is_important);
-}
-
-test "Browser: CSS.Parser - Quoted value with semicolon" {
-    defer testing.reset();
-    const text = "content: \"Hello; world!\";";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("content", declarations[0].name);
-    try testing.expectEqual("\"Hello; world!\"", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - URL value" {
-    defer testing.reset();
-    const text = "background-image: url(\"test.png\");";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("background-image", declarations[0].name);
-    try testing.expectEqual("url(\"test.png\")", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Whitespace handling" {
-    defer testing.reset();
-    const text = "  color  :  purple  ;  margin  :  10px  ;  ";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(2, declarations.len);
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("purple", declarations[0].value);
-    try testing.expectEqual("margin", declarations[1].name);
-    try testing.expectEqual("10px", declarations[1].value);
-}
--- a/src/browser/cssom/CSSRuleList.zig
+++ b/src/browser/cssom/CSSRuleList.zig
@@ -1,51 +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 CSSRule = @import("CSSRule.zig");
-
-const CSSImportRule = CSSRule.CSSImportRule;
-
-const CSSRuleList = @This();
-list: std.ArrayListUnmanaged([]const u8),
-
-pub fn constructor() CSSRuleList {
-    return .{ .list = .empty };
-}
-
-pub fn _item(self: *CSSRuleList, _index: u32) ?CSSRule {
-    const index: usize = @intCast(_index);
-
-    if (index > self.list.items.len) {
-        return null;
-    }
-
-    // todo: for now, just return null.
-    // this depends on properly parsing CSSRule
-    return null;
-}
-
-pub fn get_length(self: *CSSRuleList) u32 {
-    return @intCast(self.list.items.len);
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.CSSRuleList" {
-    try testing.htmlRunner("cssom/css_rule_list.html");
-}
--- a/src/browser/cssom/CSSStyleDeclaration.zig
+++ b/src/browser/cssom/CSSStyleDeclaration.zig
@@ -1,958 +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 Page = @import("../page.zig").Page;
-const CSSRule = @import("CSSRule.zig");
-const CSSParser = @import("CSSParser.zig");
-
-const Property = struct {
-    value: []const u8,
-    priority: bool,
-};
-
-const CSSStyleDeclaration = @This();
-
-properties: std.StringArrayHashMapUnmanaged(Property),
-
-pub const empty: CSSStyleDeclaration = .{
-    .properties = .empty,
-};
-
-pub fn get_cssFloat(self: *const CSSStyleDeclaration) []const u8 {
-    return self._getPropertyValue("float");
-}
-
-pub fn set_cssFloat(self: *CSSStyleDeclaration, value: ?[]const u8, page: *Page) !void {
-    const final_value = value orelse "";
-    return self._setProperty("float", final_value, null, page);
-}
-
-pub fn get_cssText(self: *const CSSStyleDeclaration, page: *Page) ![]const u8 {
-    var buffer: std.ArrayListUnmanaged(u8) = .empty;
-    const writer = buffer.writer(page.call_arena);
-    var it = self.properties.iterator();
-    while (it.next()) |entry| {
-        const name = entry.key_ptr.*;
-        const property = entry.value_ptr;
-        const escaped = try escapeCSSValue(page.call_arena, property.value);
-        try writer.print("{s}: {s}", .{ name, escaped });
-        if (property.priority) {
-            try writer.writeAll(" !important; ");
-        } else {
-            try writer.writeAll("; ");
-        }
-    }
-    return buffer.items;
-}
-
-// TODO Propagate also upward to parent node
-pub fn set_cssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !void {
-    self.properties.clearRetainingCapacity();
-
-    // call_arena is safe here, because _setProperty will dupe the name
-    // using the page's longer-living arena.
-    const declarations = try CSSParser.parseDeclarations(page.call_arena, text);
-
-    for (declarations) |decl| {
-        if (!isValidPropertyName(decl.name)) {
-            continue;
-        }
-        const priority: ?[]const u8 = if (decl.is_important) "important" else null;
-        try self._setProperty(decl.name, decl.value, priority, page);
-    }
-}
-
-pub fn get_length(self: *const CSSStyleDeclaration) usize {
-    return self.properties.count();
-}
-
-pub fn get_parentRule(_: *const CSSStyleDeclaration) ?CSSRule {
-    return null;
-}
-
-pub fn _getPropertyPriority(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
-    const property = self.properties.getPtr(name) orelse return "";
-    return if (property.priority) "important" else "";
-}
-
-// TODO should handle properly shorthand properties and canonical forms
-pub fn _getPropertyValue(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
-    if (self.properties.getPtr(name)) |property| {
-        return property.value;
-    }
-
-    // default to everything being visible (unless it's been explicitly set)
-    if (std.mem.eql(u8, name, "visibility")) {
-        return "visible";
-    }
-
-    return "";
-}
-
-pub fn _item(self: *const CSSStyleDeclaration, index: usize) []const u8 {
-    const values = self.properties.entries.items(.key);
-    if (index >= values.len) {
-        return "";
-    }
-    return values[index];
-}
-
-pub fn _removeProperty(self: *CSSStyleDeclaration, name: []const u8) ![]const u8 {
-    const property = self.properties.fetchOrderedRemove(name) orelse return "";
-    return property.value.value;
-}
-
-pub fn _setProperty(self: *CSSStyleDeclaration, name: []const u8, value: []const u8, priority: ?[]const u8, page: *Page) !void {
-    const gop = try self.properties.getOrPut(page.arena, name);
-    if (!gop.found_existing) {
-        const owned_name = try page.arena.dupe(u8, name);
-        gop.key_ptr.* = owned_name;
-    }
-
-    const owned_value = try page.arena.dupe(u8, value);
-    const is_important = priority != null and std.ascii.eqlIgnoreCase(priority.?, "important");
-    gop.value_ptr.* = .{ .value = owned_value, .priority = is_important };
-}
-
-pub fn named_get(self: *const CSSStyleDeclaration, name: []const u8, _: *bool) []const u8 {
-    return self._getPropertyValue(name);
-}
-
-pub fn named_set(self: *CSSStyleDeclaration, name: []const u8, value: []const u8, _: *bool, page: *Page) !void {
-    return self._setProperty(name, value, null, page);
-}
-
-fn isNumericWithUnit(value: []const u8) bool {
-    if (value.len == 0) {
-        return false;
-    }
-
-    const first = value[0];
-
-    if (!std.ascii.isDigit(first) and first != '+' and first != '-' and first != '.') {
-        return false;
-    }
-
-    var i: usize = 0;
-    var has_digit = false;
-    var decimal_point = false;
-
-    while (i < value.len) : (i += 1) {
-        const c = value[i];
-        if (std.ascii.isDigit(c)) {
-            has_digit = true;
-        } else if (c == '.' and !decimal_point) {
-            decimal_point = true;
-        } else if ((c == 'e' or c == 'E') and has_digit) {
-            if (i + 1 >= value.len) return false;
-            if (value[i + 1] != '+' and value[i + 1] != '-' and !std.ascii.isDigit(value[i + 1])) break;
-            i += 1;
-            if (value[i] == '+' or value[i] == '-') {
-                i += 1;
-            }
-            var has_exp_digits = false;
-            while (i < value.len and std.ascii.isDigit(value[i])) : (i += 1) {
-                has_exp_digits = true;
-            }
-            if (!has_exp_digits) return false;
-            break;
-        } else if (c != '-' and c != '+') {
-            break;
-        }
-    }
-
-    if (!has_digit) {
-        return false;
-    }
-
-    if (i == value.len) {
-        return true;
-    }
-
-    const unit = value[i..];
-    return CSSKeywords.isValidUnit(unit);
-}
-
-pub fn isHexColor(value: []const u8) bool {
-    if (value.len == 0) {
-        return false;
-    }
-    if (value[0] != '#') {
-        return false;
-    }
-
-    const hex_part = value[1..];
-    if (hex_part.len != 3 and hex_part.len != 4 and hex_part.len != 6 and hex_part.len != 8) {
-        return false;
-    }
-
-    for (hex_part) |c| {
-        if (!std.ascii.isHex(c)) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-fn isMultiValueProperty(value: []const u8) bool {
-    var parts = std.mem.splitAny(u8, value, " ");
-    var multi_value_parts: usize = 0;
-    var all_parts_valid = true;
-
-    while (parts.next()) |part| {
-        if (part.len == 0) continue;
-        multi_value_parts += 1;
-
-        if (isNumericWithUnit(part)) {
-            continue;
-        }
-        if (isHexColor(part)) {
-            continue;
-        }
-        if (CSSKeywords.isKnownKeyword(part)) {
-            continue;
-        }
-        if (CSSKeywords.startsWithFunction(part)) {
-            continue;
-        }
-
-        all_parts_valid = false;
-        break;
-    }
-
-    return multi_value_parts >= 2 and all_parts_valid;
-}
-
-fn isAlreadyQuoted(value: []const u8) bool {
-    return value.len >= 2 and ((value[0] == '"' and value[value.len - 1] == '"') or
-        (value[0] == '\'' and value[value.len - 1] == '\''));
-}
-
-fn isValidPropertyName(name: []const u8) bool {
-    if (name.len == 0) return false;
-
-    if (std.mem.startsWith(u8, name, "--")) {
-        if (name.len == 2) return false;
-        for (name[2..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-' and c != '_') {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    const first_char = name[0];
-    if (!std.ascii.isAlphabetic(first_char) and first_char != '-') {
-        return false;
-    }
-
-    if (first_char == '-') {
-        if (name.len < 2) return false;
-
-        if (!std.ascii.isAlphabetic(name[1])) {
-            return false;
-        }
-
-        for (name[2..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-') {
-                return false;
-            }
-        }
-    } else {
-        for (name[1..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-') {
-                return false;
-            }
-        }
-    }
-
-    return true;
-}
-
-fn extractImportant(value: []const u8) struct { value: []const u8, is_important: bool } {
-    const trimmed = std.mem.trim(u8, value, &std.ascii.whitespace);
-
-    if (std.mem.endsWith(u8, trimmed, "!important")) {
-        const clean_value = std.mem.trimRight(u8, trimmed[0 .. trimmed.len - 10], &std.ascii.whitespace);
-        return .{ .value = clean_value, .is_important = true };
-    }
-
-    return .{ .value = trimmed, .is_important = false };
-}
-
-fn needsQuotes(value: []const u8) bool {
-    if (value.len == 0) return true;
-    if (isAlreadyQuoted(value)) return false;
-
-    if (CSSKeywords.containsSpecialChar(value)) {
-        return true;
-    }
-
-    if (std.mem.indexOfScalar(u8, value, ' ') == null) {
-        return false;
-    }
-
-    const is_url = std.mem.startsWith(u8, value, "url(");
-    const is_function = CSSKeywords.startsWithFunction(value);
-
-    return !isMultiValueProperty(value) and
-        !is_url and
-        !is_function;
-}
-
-fn escapeCSSValue(arena: std.mem.Allocator, value: []const u8) ![]const u8 {
-    if (!needsQuotes(value)) {
-        return value;
-    }
-    var out: std.ArrayListUnmanaged(u8) = .empty;
-
-    // We'll need at least this much space, +2 for the quotes
-    try out.ensureTotalCapacity(arena, value.len + 2);
-    const writer = out.writer(arena);
-
-    try writer.writeByte('"');
-
-    for (value, 0..) |c, i| {
-        switch (c) {
-            '"' => try writer.writeAll("\\\""),
-            '\\' => try writer.writeAll("\\\\"),
-            '\n' => try writer.writeAll("\\A "),
-            '\r' => try writer.writeAll("\\D "),
-            '\t' => try writer.writeAll("\\9 "),
-            0...8, 11, 12, 14...31, 127 => {
-                try writer.print("\\{x}", .{c});
-                if (i + 1 < value.len and std.ascii.isHex(value[i + 1])) {
-                    try writer.writeByte(' ');
-                }
-            },
-            else => try writer.writeByte(c),
-        }
-    }
-
-    try writer.writeByte('"');
-    return out.items;
-}
-
-fn isKnownKeyword(value: []const u8) bool {
-    return CSSKeywords.isKnownKeyword(value);
-}
-
-fn containsSpecialChar(value: []const u8) bool {
-    return CSSKeywords.containsSpecialChar(value);
-}
-
-const CSSKeywords = struct {
-    const BORDER_STYLES = [_][]const u8{
-        "none", "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset",
-    };
-
-    const COLOR_NAMES = [_][]const u8{
-        "black",        "white",   "red", "green", "blue", "yellow", "purple", "gray", "transparent",
-        "currentColor", "inherit",
-    };
-
-    const POSITION_KEYWORDS = [_][]const u8{
-        "auto", "center", "left", "right", "top", "bottom",
-    };
-
-    const BACKGROUND_REPEAT = [_][]const u8{
-        "repeat", "no-repeat", "repeat-x", "repeat-y", "space", "round",
-    };
-
-    const FONT_STYLES = [_][]const u8{
-        "normal", "italic", "oblique", "bold", "bolder", "lighter",
-    };
-
-    const FONT_SIZES = [_][]const u8{
-        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large",
-        "smaller",  "larger",
-    };
-
-    const FONT_FAMILIES = [_][]const u8{
-        "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui",
-    };
-
-    const CSS_GLOBAL = [_][]const u8{
-        "initial", "inherit", "unset", "revert",
-    };
-
-    const DISPLAY_VALUES = [_][]const u8{
-        "block", "inline", "inline-block", "flex", "grid", "none",
-    };
-
-    const UNITS = [_][]const u8{
-        // LENGTH
-        "px",   "em", "rem", "vw",  "vh",  "vmin", "vmax", "%", "pt", "pc", "in",  "cm",  "mm",
-        "ex",   "ch", "fr",
-
-        // ANGLE
-         "deg", "rad", "grad", "turn",
-
-        // TIME
-        "s", "ms",
-
-        // FREQUENCY
-        "hz", "khz",
-
-        // RESOLUTION
-        "dpi", "dpcm",
-        "dppx",
-    };
-
-    const SPECIAL_CHARS = [_]u8{
-        '"', '\'', ';', '{', '}', '\\', '<', '>', '/', '\n', '\t', '\r', '\x00', '\x7F',
-    };
-
-    const FUNCTIONS = [_][]const u8{
-        "rgb(",             "rgba(",            "hsl(",            "hsla(",      "url(",    "calc(",  "var(",  "attr(",
-        "linear-gradient(", "radial-gradient(", "conic-gradient(", "translate(", "rotate(", "scale(", "skew(", "matrix(",
-    };
-
-    const KEYWORDS = BORDER_STYLES ++ COLOR_NAMES ++ POSITION_KEYWORDS ++
-        BACKGROUND_REPEAT ++ FONT_STYLES ++ FONT_SIZES ++ FONT_FAMILIES ++
-        CSS_GLOBAL ++ DISPLAY_VALUES;
-
-    const MAX_KEYWORD_LEN = lengthOfLongestValue(&KEYWORDS);
-
-    pub fn isKnownKeyword(value: []const u8) bool {
-        if (value.len > MAX_KEYWORD_LEN) {
-            return false;
-        }
-        var buf: [MAX_KEYWORD_LEN]u8 = undefined;
-        const normalized = std.ascii.lowerString(&buf, value);
-
-        for (KEYWORDS) |keyword| {
-            if (std.ascii.eqlIgnoreCase(normalized, keyword)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    pub fn containsSpecialChar(value: []const u8) bool {
-        return std.mem.indexOfAny(u8, value, &SPECIAL_CHARS) != null;
-    }
-
-    const MAX_UNIT_LEN = lengthOfLongestValue(&UNITS);
-
-    pub fn isValidUnit(unit: []const u8) bool {
-        if (unit.len > MAX_UNIT_LEN) {
-            return false;
-        }
-        var buf: [MAX_UNIT_LEN]u8 = undefined;
-        const normalized = std.ascii.lowerString(&buf, unit);
-
-        for (UNITS) |u| {
-            if (std.mem.eql(u8, normalized, u)) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    pub fn startsWithFunction(value: []const u8) bool {
-        const pos = std.mem.indexOfScalar(u8, value, '(') orelse return false;
-        if (pos == 0) return false;
-
-        if (std.mem.indexOfScalarPos(u8, value, pos, ')') == null) {
-            return false;
-        }
-        const function_name = value[0..pos];
-        return isValidFunctionName(function_name);
-    }
-
-    fn isValidFunctionName(name: []const u8) bool {
-        if (name.len == 0) return false;
-
-        const first = name[0];
-        if (!std.ascii.isAlphabetic(first) and first != '_' and first != '-') {
-            return false;
-        }
-
-        for (name[1..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '_' and c != '-') {
-                return false;
-            }
-        }
-
-        return true;
-    }
-};
-
-fn lengthOfLongestValue(values: []const []const u8) usize {
-    var max: usize = 0;
-    for (values) |v| {
-        max = @max(v.len, max);
-    }
-    return max;
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.StyleDeclaration" {
-    try testing.htmlRunner("cssom/css_style_declaration.html");
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - valid numbers with units" {
-    try testing.expect(isNumericWithUnit("10px"));
-    try testing.expect(isNumericWithUnit("3.14em"));
-    try testing.expect(isNumericWithUnit("-5rem"));
-    try testing.expect(isNumericWithUnit("+12.5%"));
-    try testing.expect(isNumericWithUnit("0vh"));
-    try testing.expect(isNumericWithUnit(".5vw"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - scientific notation" {
-    try testing.expect(isNumericWithUnit("1e5px"));
-    try testing.expect(isNumericWithUnit("2.5E-3em"));
-    try testing.expect(isNumericWithUnit("1e+2rem"));
-    try testing.expect(isNumericWithUnit("-3.14e10px"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - edge cases and invalid inputs" {
-    try testing.expect(!isNumericWithUnit(""));
-
-    try testing.expect(!isNumericWithUnit("px"));
-    try testing.expect(!isNumericWithUnit("--px"));
-    try testing.expect(!isNumericWithUnit(".px"));
-
-    try testing.expect(!isNumericWithUnit("1e"));
-    try testing.expect(!isNumericWithUnit("1epx"));
-    try testing.expect(!isNumericWithUnit("1e+"));
-    try testing.expect(!isNumericWithUnit("1e+px"));
-
-    try testing.expect(!isNumericWithUnit("1.2.3px"));
-
-    try testing.expect(!isNumericWithUnit("10xyz"));
-    try testing.expect(!isNumericWithUnit("5invalid"));
-
-    try testing.expect(isNumericWithUnit("10"));
-    try testing.expect(isNumericWithUnit("3.14"));
-    try testing.expect(isNumericWithUnit("-5"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - valid hex colors" {
-    try testing.expect(isHexColor("#000"));
-    try testing.expect(isHexColor("#0000"));
-    try testing.expect(isHexColor("#fff"));
-    try testing.expect(isHexColor("#123456"));
-    try testing.expect(isHexColor("#abcdef"));
-    try testing.expect(isHexColor("#ABCDEF"));
-    try testing.expect(isHexColor("#12345678"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - invalid hex colors" {
-    try testing.expect(!isHexColor(""));
-    try testing.expect(!isHexColor("#"));
-    try testing.expect(!isHexColor("000"));
-    try testing.expect(!isHexColor("#00"));
-    try testing.expect(!isHexColor("#00000"));
-    try testing.expect(!isHexColor("#0000000"));
-    try testing.expect(!isHexColor("#000000000"));
-    try testing.expect(!isHexColor("#gggggg"));
-    try testing.expect(!isHexColor("#123xyz"));
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - valid multi-value properties" {
-    try testing.expect(isMultiValueProperty("10px 20px"));
-    try testing.expect(isMultiValueProperty("solid red"));
-    try testing.expect(isMultiValueProperty("#fff black"));
-    try testing.expect(isMultiValueProperty("1em 2em 3em 4em"));
-    try testing.expect(isMultiValueProperty("rgb(255,0,0) solid"));
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - invalid multi-value properties" {
-    try testing.expect(!isMultiValueProperty(""));
-    try testing.expect(!isMultiValueProperty("10px"));
-    try testing.expect(!isMultiValueProperty("invalid unknown"));
-    try testing.expect(!isMultiValueProperty("10px invalid"));
-    try testing.expect(!isMultiValueProperty("   "));
-}
-
-test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - various quoting scenarios" {
-    try testing.expect(isAlreadyQuoted("\"hello\""));
-    try testing.expect(isAlreadyQuoted("'world'"));
-    try testing.expect(isAlreadyQuoted("\"\""));
-    try testing.expect(isAlreadyQuoted("''"));
-
-    try testing.expect(!isAlreadyQuoted(""));
-    try testing.expect(!isAlreadyQuoted("hello"));
-    try testing.expect(!isAlreadyQuoted("\""));
-    try testing.expect(!isAlreadyQuoted("'"));
-    try testing.expect(!isAlreadyQuoted("\"hello'"));
-    try testing.expect(!isAlreadyQuoted("'hello\""));
-    try testing.expect(!isAlreadyQuoted("\"hello"));
-    try testing.expect(!isAlreadyQuoted("hello\""));
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - valid property names" {
-    try testing.expect(isValidPropertyName("color"));
-    try testing.expect(isValidPropertyName("background-color"));
-    try testing.expect(isValidPropertyName("-webkit-transform"));
-    try testing.expect(isValidPropertyName("font-size"));
-    try testing.expect(isValidPropertyName("margin-top"));
-    try testing.expect(isValidPropertyName("z-index"));
-    try testing.expect(isValidPropertyName("line-height"));
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - invalid property names" {
-    try testing.expect(!isValidPropertyName(""));
-    try testing.expect(!isValidPropertyName("123color"));
-    try testing.expect(!isValidPropertyName("color!"));
-    try testing.expect(!isValidPropertyName("color space"));
-    try testing.expect(!isValidPropertyName("@color"));
-    try testing.expect(!isValidPropertyName("color.test"));
-    try testing.expect(!isValidPropertyName("color_test"));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - with and without !important" {
-    var result = extractImportant("red !important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red", result.value);
-
-    result = extractImportant("blue");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("blue", result.value);
-
-    result = extractImportant("  green  !important  ");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("green", result.value);
-
-    result = extractImportant("!important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("important", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: needsQuotes - various scenarios" {
-    try testing.expect(needsQuotes(""));
-    try testing.expect(needsQuotes("hello world"));
-    try testing.expect(needsQuotes("test;"));
-    try testing.expect(needsQuotes("a{b}"));
-    try testing.expect(needsQuotes("test\"quote"));
-
-    try testing.expect(!needsQuotes("\"already quoted\""));
-    try testing.expect(!needsQuotes("'already quoted'"));
-    try testing.expect(!needsQuotes("url(image.png)"));
-    try testing.expect(!needsQuotes("rgb(255, 0, 0)"));
-    try testing.expect(!needsQuotes("10px 20px"));
-    try testing.expect(!needsQuotes("simple"));
-}
-
-test "Browser: CSS.StyleDeclaration: escapeCSSValue - escaping various characters" {
-    const allocator = testing.arena_allocator;
-
-    var result = try escapeCSSValue(allocator, "simple");
-    try testing.expectEqual("simple", result);
-
-    result = try escapeCSSValue(allocator, "\"already quoted\"");
-    try testing.expectEqual("\"already quoted\"", result);
-
-    result = try escapeCSSValue(allocator, "test\"quote");
-    try testing.expectEqual("\"test\\\"quote\"", result);
-
-    result = try escapeCSSValue(allocator, "test\nline");
-    try testing.expectEqual("\"test\\A line\"", result);
-
-    result = try escapeCSSValue(allocator, "test\\back");
-    try testing.expectEqual("\"test\\\\back\"", result);
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.isKnownKeyword - case sensitivity" {
-    try testing.expect(CSSKeywords.isKnownKeyword("red"));
-    try testing.expect(CSSKeywords.isKnownKeyword("solid"));
-    try testing.expect(CSSKeywords.isKnownKeyword("center"));
-    try testing.expect(CSSKeywords.isKnownKeyword("inherit"));
-
-    try testing.expect(CSSKeywords.isKnownKeyword("RED"));
-    try testing.expect(CSSKeywords.isKnownKeyword("Red"));
-    try testing.expect(CSSKeywords.isKnownKeyword("SOLID"));
-    try testing.expect(CSSKeywords.isKnownKeyword("Center"));
-
-    try testing.expect(!CSSKeywords.isKnownKeyword("invalid"));
-    try testing.expect(!CSSKeywords.isKnownKeyword("unknown"));
-    try testing.expect(!CSSKeywords.isKnownKeyword(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.containsSpecialChar - various special characters" {
-    try testing.expect(CSSKeywords.containsSpecialChar("test\"quote"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test'quote"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test;end"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test{brace"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test}brace"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test\\back"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test<angle"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test>angle"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test/slash"));
-
-    try testing.expect(!CSSKeywords.containsSpecialChar("normal-text"));
-    try testing.expect(!CSSKeywords.containsSpecialChar("text123"));
-    try testing.expect(!CSSKeywords.containsSpecialChar(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.isValidUnit - various units" {
-    try testing.expect(CSSKeywords.isValidUnit("px"));
-    try testing.expect(CSSKeywords.isValidUnit("em"));
-    try testing.expect(CSSKeywords.isValidUnit("rem"));
-    try testing.expect(CSSKeywords.isValidUnit("%"));
-
-    try testing.expect(CSSKeywords.isValidUnit("deg"));
-    try testing.expect(CSSKeywords.isValidUnit("rad"));
-
-    try testing.expect(CSSKeywords.isValidUnit("s"));
-    try testing.expect(CSSKeywords.isValidUnit("ms"));
-
-    try testing.expect(CSSKeywords.isValidUnit("PX"));
-
-    try testing.expect(!CSSKeywords.isValidUnit("invalid"));
-    try testing.expect(!CSSKeywords.isValidUnit(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.startsWithFunction - function detection" {
-    try testing.expect(CSSKeywords.startsWithFunction("rgb(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("rgba(255, 0, 0, 0.5)"));
-    try testing.expect(CSSKeywords.startsWithFunction("url(image.png)"));
-    try testing.expect(CSSKeywords.startsWithFunction("calc(100% - 20px)"));
-    try testing.expect(CSSKeywords.startsWithFunction("var(--custom-property)"));
-    try testing.expect(CSSKeywords.startsWithFunction("linear-gradient(to right, red, blue)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("custom-function(args)"));
-    try testing.expect(CSSKeywords.startsWithFunction("unknown(test)"));
-
-    try testing.expect(!CSSKeywords.startsWithFunction("not-a-function"));
-    try testing.expect(!CSSKeywords.startsWithFunction("missing-paren)"));
-    try testing.expect(!CSSKeywords.startsWithFunction("missing-close("));
-    try testing.expect(!CSSKeywords.startsWithFunction(""));
-    try testing.expect(!CSSKeywords.startsWithFunction("rgb"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - whitespace handling" {
-    try testing.expect(!isNumericWithUnit(" 10px"));
-    try testing.expect(!isNumericWithUnit("10 px"));
-    try testing.expect(!isNumericWithUnit("10px "));
-    try testing.expect(!isNumericWithUnit(" 10 px "));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - whitespace edge cases" {
-    var result = extractImportant("   ");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("\t\n\r !important\t\n");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("red\t!important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - mixed case handling" {
-    try testing.expect(isHexColor("#AbC"));
-    try testing.expect(isHexColor("#123aBc"));
-    try testing.expect(isHexColor("#FFffFF"));
-    try testing.expect(isHexColor("#000FFF"));
-}
-
-test "Browser: CSS.StyleDeclaration: edge case - very long inputs" {
-    const long_valid = "a" ** 1000 ++ "px";
-    try testing.expect(!isNumericWithUnit(long_valid)); // not numeric
-
-    const long_property = "a-" ** 100 ++ "property";
-    try testing.expect(isValidPropertyName(long_property));
-
-    const long_hex = "#" ++ "a" ** 20;
-    try testing.expect(!isHexColor(long_hex));
-}
-
-test "Browser: CSS.StyleDeclaration: boundary conditions - numeric parsing" {
-    try testing.expect(isNumericWithUnit("0px"));
-    try testing.expect(isNumericWithUnit("0.0px"));
-    try testing.expect(isNumericWithUnit(".0px"));
-    try testing.expect(isNumericWithUnit("0.px"));
-
-    try testing.expect(isNumericWithUnit("999999999px"));
-    try testing.expect(isNumericWithUnit("1.7976931348623157e+308px"));
-
-    try testing.expect(isNumericWithUnit("0.000000001px"));
-    try testing.expect(isNumericWithUnit("1e-100px"));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - malformed important declarations" {
-    var result = extractImportant("red ! important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red ! important", result.value);
-
-    result = extractImportant("red !Important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red !Important", result.value);
-
-    result = extractImportant("red !IMPORTANT");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red !IMPORTANT", result.value);
-
-    result = extractImportant("!importantred");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("!importantred", result.value);
-
-    result = extractImportant("red !important !important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red !important", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - complex spacing scenarios" {
-    try testing.expect(isMultiValueProperty("10px    20px"));
-    try testing.expect(isMultiValueProperty("solid     red"));
-
-    try testing.expect(isMultiValueProperty("  10px 20px  "));
-
-    try testing.expect(!isMultiValueProperty("10px\t20px"));
-    try testing.expect(!isMultiValueProperty("10px\n20px"));
-
-    try testing.expect(isMultiValueProperty("10px   20px   30px"));
-}
-
-test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - edge cases with quotes" {
-    try testing.expect(isAlreadyQuoted("\"'hello'\""));
-    try testing.expect(isAlreadyQuoted("'\"hello\"'"));
-
-    try testing.expect(isAlreadyQuoted("\"hello\\\"world\""));
-    try testing.expect(isAlreadyQuoted("'hello\\'world'"));
-
-    try testing.expect(!isAlreadyQuoted("\"hello"));
-    try testing.expect(!isAlreadyQuoted("hello\""));
-    try testing.expect(!isAlreadyQuoted("'hello"));
-    try testing.expect(!isAlreadyQuoted("hello'"));
-
-    try testing.expect(isAlreadyQuoted("\"a\""));
-    try testing.expect(isAlreadyQuoted("'b'"));
-}
-
-test "Browser: CSS.StyleDeclaration: needsQuotes - function and URL edge cases" {
-    try testing.expect(!needsQuotes("rgb(255, 0, 0)"));
-    try testing.expect(!needsQuotes("calc(100% - 20px)"));
-
-    try testing.expect(!needsQuotes("url(path with spaces.jpg)"));
-
-    try testing.expect(!needsQuotes("linear-gradient(to right, red, blue)"));
-
-    try testing.expect(needsQuotes("rgb(255, 0, 0"));
-}
-
-test "Browser: CSS.StyleDeclaration: escapeCSSValue - control characters and Unicode" {
-    const allocator = testing.arena_allocator;
-
-    var result = try escapeCSSValue(allocator, "test\ttab");
-    try testing.expectEqual("\"test\\9 tab\"", result);
-
-    result = try escapeCSSValue(allocator, "test\rreturn");
-    try testing.expectEqual("\"test\\D return\"", result);
-
-    result = try escapeCSSValue(allocator, "test\x00null");
-    try testing.expectEqual("\"test\\0null\"", result);
-
-    result = try escapeCSSValue(allocator, "test\x7Fdel");
-    try testing.expectEqual("\"test\\7f del\"", result);
-
-    result = try escapeCSSValue(allocator, "test\"quote\nline\\back");
-    try testing.expectEqual("\"test\\\"quote\\A line\\\\back\"", result);
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - CSS custom properties and vendor prefixes" {
-    try testing.expect(isValidPropertyName("--custom-color"));
-    try testing.expect(isValidPropertyName("--my-variable"));
-    try testing.expect(isValidPropertyName("--123"));
-
-    try testing.expect(isValidPropertyName("-webkit-transform"));
-    try testing.expect(isValidPropertyName("-moz-border-radius"));
-    try testing.expect(isValidPropertyName("-ms-filter"));
-    try testing.expect(isValidPropertyName("-o-transition"));
-
-    try testing.expect(!isValidPropertyName("-123invalid"));
-    try testing.expect(!isValidPropertyName("--"));
-    try testing.expect(!isValidPropertyName("-"));
-}
-
-test "Browser: CSS.StyleDeclaration: startsWithFunction - case sensitivity and partial matches" {
-    try testing.expect(CSSKeywords.startsWithFunction("RGB(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("Rgb(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("URL(image.png)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("rg(something)"));
-    try testing.expect(CSSKeywords.startsWithFunction("ur(something)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("rgb(1,2,3)"));
-    try testing.expect(CSSKeywords.startsWithFunction("rgba(1,2,3,4)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("my-custom-function(args)"));
-    try testing.expect(CSSKeywords.startsWithFunction("function-with-dashes(test)"));
-
-    try testing.expect(!CSSKeywords.startsWithFunction("123function(test)"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - Unicode and invalid characters" {
-    try testing.expect(!isHexColor("#ghijkl"));
-    try testing.expect(!isHexColor("#12345g"));
-    try testing.expect(!isHexColor("#xyz"));
-
-    try testing.expect(!isHexColor("#АВС"));
-
-    try testing.expect(!isHexColor("#1234567g"));
-    try testing.expect(!isHexColor("#g2345678"));
-}
-
-test "Browser: CSS.StyleDeclaration: complex integration scenarios" {
-    const allocator = testing.arena_allocator;
-
-    try testing.expect(isMultiValueProperty("rgb(255,0,0) url(bg.jpg)"));
-
-    try testing.expect(!needsQuotes("calc(100% - 20px)"));
-
-    const result = try escapeCSSValue(allocator, "fake(function with spaces");
-    try testing.expectEqual("\"fake(function with spaces\"", result);
-
-    const important_result = extractImportant("rgb(255,0,0) !important");
-    try testing.expect(important_result.is_important);
-    try testing.expectEqual("rgb(255,0,0)", important_result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: performance edge cases - empty and minimal inputs" {
-    try testing.expect(!isNumericWithUnit(""));
-    try testing.expect(!isHexColor(""));
-    try testing.expect(!isMultiValueProperty(""));
-    try testing.expect(!isAlreadyQuoted(""));
-    try testing.expect(!isValidPropertyName(""));
-    try testing.expect(needsQuotes(""));
-    try testing.expect(!CSSKeywords.isKnownKeyword(""));
-    try testing.expect(!CSSKeywords.containsSpecialChar(""));
-    try testing.expect(!CSSKeywords.isValidUnit(""));
-    try testing.expect(!CSSKeywords.startsWithFunction(""));
-
-    try testing.expect(!isNumericWithUnit("a"));
-    try testing.expect(!isHexColor("a"));
-    try testing.expect(!isMultiValueProperty("a"));
-    try testing.expect(!isAlreadyQuoted("a"));
-    try testing.expect(isValidPropertyName("a"));
-    try testing.expect(!needsQuotes("a"));
-}
--- a/src/browser/cssom/CSSStyleSheet.zig
+++ b/src/browser/cssom/CSSStyleSheet.zig
@@ -1,95 +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 js = @import("../js/js.zig");
-const Page = @import("../page.zig").Page;
-const StyleSheet = @import("StyleSheet.zig");
-const CSSRuleList = @import("CSSRuleList.zig");
-const CSSImportRule = @import("CSSRule.zig").CSSImportRule;
-
-const CSSStyleSheet = @This();
-pub const prototype = *StyleSheet;
-
-proto: StyleSheet,
-css_rules: CSSRuleList,
-owner_rule: ?*CSSImportRule,
-
-const CSSStyleSheetOpts = struct {
-    base_url: ?[]const u8 = null,
-    // TODO: Suupport media
-    disabled: bool = false,
-};
-
-pub fn constructor(_opts: ?CSSStyleSheetOpts) !CSSStyleSheet {
-    const opts = _opts orelse CSSStyleSheetOpts{};
-    return .{
-        .proto = .{ .disabled = opts.disabled },
-        .css_rules = .constructor(),
-        .owner_rule = null,
-    };
-}
-
-pub fn get_ownerRule(_: *CSSStyleSheet) ?*CSSImportRule {
-    return null;
-}
-
-pub fn get_cssRules(self: *CSSStyleSheet) *CSSRuleList {
-    return &self.css_rules;
-}
-
-pub fn _insertRule(self: *CSSStyleSheet, rule: []const u8, _index: ?usize, page: *Page) !usize {
-    const index = _index orelse 0;
-    if (index > self.css_rules.list.items.len) {
-        return error.IndexSize;
-    }
-
-    const arena = page.arena;
-    try self.css_rules.list.insert(arena, index, try arena.dupe(u8, rule));
-    return index;
-}
-
-pub fn _deleteRule(self: *CSSStyleSheet, index: usize) !void {
-    if (index > self.css_rules.list.items.len) {
-        return error.IndexSize;
-    }
-
-    _ = self.css_rules.list.orderedRemove(index);
-}
-
-pub fn _replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
-    // parse text and re-populate self.css_rules
-
-    return page.js.resolvePromise({});
-}
-
-pub fn _replaceSync(self: *CSSStyleSheet, text: []const u8) !void {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
-    // parse text and re-populate self.css_rules
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.StyleSheet" {
-    try testing.htmlRunner("cssom/css_stylesheet.html");
-}
--- a/src/browser/cssom/color.zig
+++ b/src/browser/cssom/color.zig
@@ -1,283 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const Io = std.Io;
-
-const CSSParser = @import("CSSParser.zig");
-const isHexColor = @import("CSSStyleDeclaration.zig").isHexColor;
-
-pub const RGBA = packed struct(u32) {
-    r: u8,
-    g: u8,
-    b: u8,
-    /// Opaque by default.
-    a: u8 = std.math.maxInt(u8),
-
-    pub const Named = struct {
-        // Basic colors (CSS Level 1)
-        pub const black: RGBA = .init(0, 0, 0, 1);
-        pub const silver: RGBA = .init(192, 192, 192, 1);
-        pub const gray: RGBA = .init(128, 128, 128, 1);
-        pub const white: RGBA = .init(255, 255, 255, 1);
-        pub const maroon: RGBA = .init(128, 0, 0, 1);
-        pub const red: RGBA = .init(255, 0, 0, 1);
-        pub const purple: RGBA = .init(128, 0, 128, 1);
-        pub const fuchsia: RGBA = .init(255, 0, 255, 1);
-        pub const green: RGBA = .init(0, 128, 0, 1);
-        pub const lime: RGBA = .init(0, 255, 0, 1);
-        pub const olive: RGBA = .init(128, 128, 0, 1);
-        pub const yellow: RGBA = .init(255, 255, 0, 1);
-        pub const navy: RGBA = .init(0, 0, 128, 1);
-        pub const blue: RGBA = .init(0, 0, 255, 1);
-        pub const teal: RGBA = .init(0, 128, 128, 1);
-        pub const aqua: RGBA = .init(0, 255, 255, 1);
-
-        // Extended colors (CSS Level 2+)
-        pub const aliceblue: RGBA = .init(240, 248, 255, 1);
-        pub const antiquewhite: RGBA = .init(250, 235, 215, 1);
-        pub const aquamarine: RGBA = .init(127, 255, 212, 1);
-        pub const azure: RGBA = .init(240, 255, 255, 1);
-        pub const beige: RGBA = .init(245, 245, 220, 1);
-        pub const bisque: RGBA = .init(255, 228, 196, 1);
-        pub const blanchedalmond: RGBA = .init(255, 235, 205, 1);
-        pub const blueviolet: RGBA = .init(138, 43, 226, 1);
-        pub const brown: RGBA = .init(165, 42, 42, 1);
-        pub const burlywood: RGBA = .init(222, 184, 135, 1);
-        pub const cadetblue: RGBA = .init(95, 158, 160, 1);
-        pub const chartreuse: RGBA = .init(127, 255, 0, 1);
-        pub const chocolate: RGBA = .init(210, 105, 30, 1);
-        pub const coral: RGBA = .init(255, 127, 80, 1);
-        pub const cornflowerblue: RGBA = .init(100, 149, 237, 1);
-        pub const cornsilk: RGBA = .init(255, 248, 220, 1);
-        pub const crimson: RGBA = .init(220, 20, 60, 1);
-        pub const cyan: RGBA = .init(0, 255, 255, 1); // Synonym of aqua
-        pub const darkblue: RGBA = .init(0, 0, 139, 1);
-        pub const darkcyan: RGBA = .init(0, 139, 139, 1);
-        pub const darkgoldenrod: RGBA = .init(184, 134, 11, 1);
-        pub const darkgray: RGBA = .init(169, 169, 169, 1);
-        pub const darkgreen: RGBA = .init(0, 100, 0, 1);
-        pub const darkgrey: RGBA = .init(169, 169, 169, 1); // Synonym of darkgray
-        pub const darkkhaki: RGBA = .init(189, 183, 107, 1);
-        pub const darkmagenta: RGBA = .init(139, 0, 139, 1);
-        pub const darkolivegreen: RGBA = .init(85, 107, 47, 1);
-        pub const darkorange: RGBA = .init(255, 140, 0, 1);
-        pub const darkorchid: RGBA = .init(153, 50, 204, 1);
-        pub const darkred: RGBA = .init(139, 0, 0, 1);
-        pub const darksalmon: RGBA = .init(233, 150, 122, 1);
-        pub const darkseagreen: RGBA = .init(143, 188, 143, 1);
-        pub const darkslateblue: RGBA = .init(72, 61, 139, 1);
-        pub const darkslategray: RGBA = .init(47, 79, 79, 1);
-        pub const darkslategrey: RGBA = .init(47, 79, 79, 1); // Synonym of darkslategray
-        pub const darkturquoise: RGBA = .init(0, 206, 209, 1);
-        pub const darkviolet: RGBA = .init(148, 0, 211, 1);
-        pub const deeppink: RGBA = .init(255, 20, 147, 1);
-        pub const deepskyblue: RGBA = .init(0, 191, 255, 1);
-        pub const dimgray: RGBA = .init(105, 105, 105, 1);
-        pub const dimgrey: RGBA = .init(105, 105, 105, 1); // Synonym of dimgray
-        pub const dodgerblue: RGBA = .init(30, 144, 255, 1);
-        pub const firebrick: RGBA = .init(178, 34, 34, 1);
-        pub const floralwhite: RGBA = .init(255, 250, 240, 1);
-        pub const forestgreen: RGBA = .init(34, 139, 34, 1);
-        pub const gainsboro: RGBA = .init(220, 220, 220, 1);
-        pub const ghostwhite: RGBA = .init(248, 248, 255, 1);
-        pub const gold: RGBA = .init(255, 215, 0, 1);
-        pub const goldenrod: RGBA = .init(218, 165, 32, 1);
-        pub const greenyellow: RGBA = .init(173, 255, 47, 1);
-        pub const grey: RGBA = .init(128, 128, 128, 1); // Synonym of gray
-        pub const honeydew: RGBA = .init(240, 255, 240, 1);
-        pub const hotpink: RGBA = .init(255, 105, 180, 1);
-        pub const indianred: RGBA = .init(205, 92, 92, 1);
-        pub const indigo: RGBA = .init(75, 0, 130, 1);
-        pub const ivory: RGBA = .init(255, 255, 240, 1);
-        pub const khaki: RGBA = .init(240, 230, 140, 1);
-        pub const lavender: RGBA = .init(230, 230, 250, 1);
-        pub const lavenderblush: RGBA = .init(255, 240, 245, 1);
-        pub const lawngreen: RGBA = .init(124, 252, 0, 1);
-        pub const lemonchiffon: RGBA = .init(255, 250, 205, 1);
-        pub const lightblue: RGBA = .init(173, 216, 230, 1);
-        pub const lightcoral: RGBA = .init(240, 128, 128, 1);
-        pub const lightcyan: RGBA = .init(224, 255, 255, 1);
-        pub const lightgoldenrodyellow: RGBA = .init(250, 250, 210, 1);
-        pub const lightgray: RGBA = .init(211, 211, 211, 1);
-        pub const lightgreen: RGBA = .init(144, 238, 144, 1);
-        pub const lightgrey: RGBA = .init(211, 211, 211, 1); // Synonym of lightgray
-        pub const lightpink: RGBA = .init(255, 182, 193, 1);
-        pub const lightsalmon: RGBA = .init(255, 160, 122, 1);
-        pub const lightseagreen: RGBA = .init(32, 178, 170, 1);
-        pub const lightskyblue: RGBA = .init(135, 206, 250, 1);
-        pub const lightslategray: RGBA = .init(119, 136, 153, 1);
-        pub const lightslategrey: RGBA = .init(119, 136, 153, 1); // Synonym of lightslategray
-        pub const lightsteelblue: RGBA = .init(176, 196, 222, 1);
-        pub const lightyellow: RGBA = .init(255, 255, 224, 1);
-        pub const limegreen: RGBA = .init(50, 205, 50, 1);
-        pub const linen: RGBA = .init(250, 240, 230, 1);
-        pub const magenta: RGBA = .init(255, 0, 255, 1); // Synonym of fuchsia
-        pub const mediumaquamarine: RGBA = .init(102, 205, 170, 1);
-        pub const mediumblue: RGBA = .init(0, 0, 205, 1);
-        pub const mediumorchid: RGBA = .init(186, 85, 211, 1);
-        pub const mediumpurple: RGBA = .init(147, 112, 219, 1);
-        pub const mediumseagreen: RGBA = .init(60, 179, 113, 1);
-        pub const mediumslateblue: RGBA = .init(123, 104, 238, 1);
-        pub const mediumspringgreen: RGBA = .init(0, 250, 154, 1);
-        pub const mediumturquoise: RGBA = .init(72, 209, 204, 1);
-        pub const mediumvioletred: RGBA = .init(199, 21, 133, 1);
-        pub const midnightblue: RGBA = .init(25, 25, 112, 1);
-        pub const mintcream: RGBA = .init(245, 255, 250, 1);
-        pub const mistyrose: RGBA = .init(255, 228, 225, 1);
-        pub const moccasin: RGBA = .init(255, 228, 181, 1);
-        pub const navajowhite: RGBA = .init(255, 222, 173, 1);
-        pub const oldlace: RGBA = .init(253, 245, 230, 1);
-        pub const olivedrab: RGBA = .init(107, 142, 35, 1);
-        pub const orange: RGBA = .init(255, 165, 0, 1);
-        pub const orangered: RGBA = .init(255, 69, 0, 1);
-        pub const orchid: RGBA = .init(218, 112, 214, 1);
-        pub const palegoldenrod: RGBA = .init(238, 232, 170, 1);
-        pub const palegreen: RGBA = .init(152, 251, 152, 1);
-        pub const paleturquoise: RGBA = .init(175, 238, 238, 1);
-        pub const palevioletred: RGBA = .init(219, 112, 147, 1);
-        pub const papayawhip: RGBA = .init(255, 239, 213, 1);
-        pub const peachpuff: RGBA = .init(255, 218, 185, 1);
-        pub const peru: RGBA = .init(205, 133, 63, 1);
-        pub const pink: RGBA = .init(255, 192, 203, 1);
-        pub const plum: RGBA = .init(221, 160, 221, 1);
-        pub const powderblue: RGBA = .init(176, 224, 230, 1);
-        pub const rebeccapurple: RGBA = .init(102, 51, 153, 1);
-        pub const rosybrown: RGBA = .init(188, 143, 143, 1);
-        pub const royalblue: RGBA = .init(65, 105, 225, 1);
-        pub const saddlebrown: RGBA = .init(139, 69, 19, 1);
-        pub const salmon: RGBA = .init(250, 128, 114, 1);
-        pub const sandybrown: RGBA = .init(244, 164, 96, 1);
-        pub const seagreen: RGBA = .init(46, 139, 87, 1);
-        pub const seashell: RGBA = .init(255, 245, 238, 1);
-        pub const sienna: RGBA = .init(160, 82, 45, 1);
-        pub const skyblue: RGBA = .init(135, 206, 235, 1);
-        pub const slateblue: RGBA = .init(106, 90, 205, 1);
-        pub const slategray: RGBA = .init(112, 128, 144, 1);
-        pub const slategrey: RGBA = .init(112, 128, 144, 1); // Synonym of slategray
-        pub const snow: RGBA = .init(255, 250, 250, 1);
-        pub const springgreen: RGBA = .init(0, 255, 127, 1);
-        pub const steelblue: RGBA = .init(70, 130, 180, 1);
-        pub const tan: RGBA = .init(210, 180, 140, 1);
-        pub const thistle: RGBA = .init(216, 191, 216, 1);
-        pub const tomato: RGBA = .init(255, 99, 71, 1);
-        pub const transparent: RGBA = .init(0, 0, 0, 0);
-        pub const turquoise: RGBA = .init(64, 224, 208, 1);
-        pub const violet: RGBA = .init(238, 130, 238, 1);
-        pub const wheat: RGBA = .init(245, 222, 179, 1);
-        pub const whitesmoke: RGBA = .init(245, 245, 245, 1);
-        pub const yellowgreen: RGBA = .init(154, 205, 50, 1);
-    };
-
-    pub fn init(r: u8, g: u8, b: u8, a: f32) RGBA {
-        const clamped = std.math.clamp(a, 0, 1);
-        return .{ .r = r, .g = g, .b = b, .a = @intFromFloat(clamped * 255) };
-    }
-
-    /// Finds a color by its name.
-    pub fn find(name: []const u8) ?RGBA {
-        const match = std.meta.stringToEnum(std.meta.DeclEnum(Named), name) orelse return null;
-
-        return switch (match) {
-            inline else => |comptime_enum| @field(Named, @tagName(comptime_enum)),
-        };
-    }
-
-    /// Parses the given color.
-    /// Currently we only parse hex colors and named colors; other variants
-    /// require CSS evaluation.
-    pub fn parse(input: []const u8) !RGBA {
-        if (!isHexColor(input)) {
-            // Try named colors.
-            return find(input) orelse return error.Invalid;
-        }
-
-        const slice = input[1..];
-        switch (slice.len) {
-            // This means the digit for a color is repeated.
-            // Given HEX is #f0c, its interpreted the same as #FF00CC.
-            3 => {
-                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
-                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
-                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
-                return .{ .r = r, .g = g, .b = b, .a = 255 };
-            },
-            4 => {
-                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
-                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
-                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
-                const a = try std.fmt.parseInt(u8, &.{ slice[3], slice[3] }, 16);
-                return .{ .r = r, .g = g, .b = b, .a = a };
-            },
-            // Regular HEX format.
-            6 => {
-                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
-                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
-                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
-                return .{ .r = r, .g = g, .b = b, .a = 255 };
-            },
-            8 => {
-                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
-                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
-                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
-                const a = try std.fmt.parseInt(u8, slice[6..8], 16);
-                return .{ .r = r, .g = g, .b = b, .a = a };
-            },
-            else => return error.Invalid,
-        }
-    }
-
-    /// By default, browsers prefer lowercase formatting.
-    const format_upper = false;
-
-    /// Formats the `Color` according to web expectations.
-    /// If color is opaque, HEX is preferred; RGBA otherwise.
-    pub fn format(self: *const RGBA, writer: *Io.Writer) Io.Writer.Error!void {
-        if (self.isOpaque()) {
-            // Convert RGB to HEX.
-            // https://gristle.tripod.com/hexconv.html
-            // Hexadecimal characters up to 15.
-            const char: []const u8 = "0123456789" ++ if (format_upper) "ABCDEF" else "abcdef";
-            // This variant always prefers 6 digit format, +1 is for hash char.
-            const buffer = [7]u8{
-                '#',
-                char[self.r >> 4],
-                char[self.r & 15],
-                char[self.g >> 4],
-                char[self.g & 15],
-                char[self.b >> 4],
-                char[self.b & 15],
-            };
-
-            return writer.writeAll(&buffer);
-        }
-
-        // Prefer RGBA format for everything else.
-        return writer.print("rgba({d}, {d}, {d}, {d:.2})", .{ self.r, self.g, self.b, self.normalizedAlpha() });
-    }
-
-    /// Returns true if `Color` is opaque.
-    pub inline fn isOpaque(self: *const RGBA) bool {
-        return self.a == std.math.maxInt(u8);
-    }
-
-    /// Returns the normalized alpha value.
-    pub inline fn normalizedAlpha(self: *const RGBA) f32 {
-        return @as(f32, @floatFromInt(self.a)) / 255;
-    }
-};
--- a/src/browser/cssom/css_parser.zig
+++ b/src/browser/cssom/css_parser.zig
@@ -0,0 +1,291 @@
+// 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 CSSConstants = struct {
+    const IMPORTANT = "!important";
+    const URL_PREFIX = "url(";
+};
+
+pub const CSSParserState = enum {
+    seek_name,
+    in_name,
+    seek_colon,
+    seek_value,
+    in_value,
+    in_quoted_value,
+    in_single_quoted_value,
+    in_url,
+    in_important,
+};
+
+pub const CSSDeclaration = struct {
+    name: []const u8,
+    value: []const u8,
+    is_important: bool,
+};
+
+pub const CSSParser = struct {
+    state: CSSParserState,
+    name_start: usize,
+    name_end: usize,
+    value_start: usize,
+    position: usize,
+    paren_depth: usize,
+    escape_next: bool,
+
+    pub fn init() CSSParser {
+        return .{
+            .state = .seek_name,
+            .name_start = 0,
+            .name_end = 0,
+            .value_start = 0,
+            .position = 0,
+            .paren_depth = 0,
+            .escape_next = false,
+        };
+    }
+
+    pub fn parseDeclarations(arena: Allocator, text: []const u8) ![]CSSDeclaration {
+        var parser = init();
+        var declarations: std.ArrayListUnmanaged(CSSDeclaration) = .empty;
+
+        while (parser.position < text.len) {
+            const c = text[parser.position];
+
+            switch (parser.state) {
+                .seek_name => {
+                    if (!std.ascii.isWhitespace(c)) {
+                        parser.name_start = parser.position;
+                        parser.state = .in_name;
+                        continue;
+                    }
+                },
+                .in_name => {
+                    if (c == ':') {
+                        parser.name_end = parser.position;
+                        parser.state = .seek_value;
+                    } else if (std.ascii.isWhitespace(c)) {
+                        parser.name_end = parser.position;
+                        parser.state = .seek_colon;
+                    }
+                },
+                .seek_colon => {
+                    if (c == ':') {
+                        parser.state = .seek_value;
+                    } else if (!std.ascii.isWhitespace(c)) {
+                        parser.state = .seek_name;
+                        continue;
+                    }
+                },
+                .seek_value => {
+                    if (!std.ascii.isWhitespace(c)) {
+                        parser.value_start = parser.position;
+                        if (c == '"') {
+                            parser.state = .in_quoted_value;
+                        } else if (c == '\'') {
+                            parser.state = .in_single_quoted_value;
+                        } else if (c == 'u' and parser.position + CSSConstants.URL_PREFIX.len <= text.len and std.mem.startsWith(u8, text[parser.position..], CSSConstants.URL_PREFIX)) {
+                            parser.state = .in_url;
+                            parser.paren_depth = 1;
+                            parser.position += 3;
+                        } else {
+                            parser.state = .in_value;
+                            continue;
+                        }
+                    }
+                },
+                .in_value => {
+                    if (parser.escape_next) {
+                        parser.escape_next = false;
+                    } else if (c == '\\') {
+                        parser.escape_next = true;
+                    } else if (c == '(') {
+                        parser.paren_depth += 1;
+                    } else if (c == ')' and parser.paren_depth > 0) {
+                        parser.paren_depth -= 1;
+                    } else if (c == ';' and parser.paren_depth == 0) {
+                        try parser.finishDeclaration(arena, &declarations, text);
+                        parser.state = .seek_name;
+                    }
+                },
+                .in_quoted_value => {
+                    if (parser.escape_next) {
+                        parser.escape_next = false;
+                    } else if (c == '\\') {
+                        parser.escape_next = true;
+                    } else if (c == '"') {
+                        parser.state = .in_value;
+                    }
+                },
+                .in_single_quoted_value => {
+                    if (parser.escape_next) {
+                        parser.escape_next = false;
+                    } else if (c == '\\') {
+                        parser.escape_next = true;
+                    } else if (c == '\'') {
+                        parser.state = .in_value;
+                    }
+                },
+                .in_url => {
+                    if (parser.escape_next) {
+                        parser.escape_next = false;
+                    } else if (c == '\\') {
+                        parser.escape_next = true;
+                    } else if (c == '(') {
+                        parser.paren_depth += 1;
+                    } else if (c == ')') {
+                        parser.paren_depth -= 1;
+                        if (parser.paren_depth == 0) {
+                            parser.state = .in_value;
+                        }
+                    }
+                },
+                .in_important => {},
+            }
+
+            parser.position += 1;
+        }
+
+        try parser.finalize(arena, &declarations, text);
+
+        return declarations.items;
+    }
+
+    fn finishDeclaration(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
+        const name = std.mem.trim(u8, text[self.name_start..self.name_end], &std.ascii.whitespace);
+        if (name.len == 0) return;
+
+        const raw_value = text[self.value_start..self.position];
+        const value = std.mem.trim(u8, raw_value, &std.ascii.whitespace);
+
+        var final_value = value;
+        var is_important = false;
+
+        if (std.mem.endsWith(u8, value, CSSConstants.IMPORTANT)) {
+            is_important = true;
+            final_value = std.mem.trimRight(u8, value[0 .. value.len - CSSConstants.IMPORTANT.len], &std.ascii.whitespace);
+        }
+
+        try declarations.append(arena, .{
+            .name = name,
+            .value = final_value,
+            .is_important = is_important,
+        });
+    }
+
+    fn finalize(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
+        if (self.state != .in_value) {
+            return;
+        }
+        return self.finishDeclaration(arena, declarations, text);
+    }
+};
+
+const testing = @import("../../testing.zig");
+
+test "CSSParser - Simple property" {
+    defer testing.reset();
+
+    const text = "color: red;";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expectEqual(1, declarations.len);
+    try testing.expectEqual("color", declarations[0].name);
+    try testing.expectEqual("red", declarations[0].value);
+    try testing.expectEqual(false, declarations[0].is_important);
+}
+
+test "CSSParser - Property with !important" {
+    defer testing.reset();
+    const text = "margin: 10px !important;";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expectEqual(1, declarations.len);
+    try testing.expectEqual("margin", declarations[0].name);
+    try testing.expectEqual("10px", declarations[0].value);
+    try testing.expectEqual(true, declarations[0].is_important);
+}
+
+test "CSSParser - Multiple properties" {
+    defer testing.reset();
+    const text = "color: red; font-size: 12px; margin: 5px !important;";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expect(declarations.len == 3);
+
+    try testing.expectEqual("color", declarations[0].name);
+    try testing.expectEqual("red", declarations[0].value);
+    try testing.expectEqual(false, declarations[0].is_important);
+
+    try testing.expectEqual("font-size", declarations[1].name);
+    try testing.expectEqual("12px", declarations[1].value);
+    try testing.expectEqual(false, declarations[1].is_important);
+
+    try testing.expectEqual("margin", declarations[2].name);
+    try testing.expectEqual("5px", declarations[2].value);
+    try testing.expectEqual(true, declarations[2].is_important);
+}
+
+test "CSSParser - Quoted value with semicolon" {
+    defer testing.reset();
+    const text = "content: \"Hello; world!\";";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expectEqual(1, declarations.len);
+    try testing.expectEqual("content", declarations[0].name);
+    try testing.expectEqual("\"Hello; world!\"", declarations[0].value);
+    try testing.expectEqual(false, declarations[0].is_important);
+}
+
+test "CSSParser - URL value" {
+    defer testing.reset();
+    const text = "background-image: url(\"test.png\");";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expectEqual(1, declarations.len);
+    try testing.expectEqual("background-image", declarations[0].name);
+    try testing.expectEqual("url(\"test.png\")", declarations[0].value);
+    try testing.expectEqual(false, declarations[0].is_important);
+}
+
+test "CSSParser - Whitespace handling" {
+    defer testing.reset();
+    const text = "  color  :  purple  ;  margin  :  10px  ;  ";
+    const allocator = testing.arena_allocator;
+
+    const declarations = try CSSParser.parseDeclarations(allocator, text);
+
+    try testing.expectEqual(2, declarations.len);
+    try testing.expectEqual("color", declarations[0].name);
+    try testing.expectEqual("purple", declarations[0].value);
+    try testing.expectEqual("margin", declarations[1].name);
+    try testing.expectEqual("10px", declarations[1].value);
+}
--- a/src/browser/cssom/css_rule.zig
+++ b/src/browser/cssom/css_rule.zig
@@ -18,7 +18,7 @@

 const std = @import("std");

-const CSSStyleSheet = @import("CSSStyleSheet.zig");
+const CSSStyleSheet = @import("css_stylesheet.zig").CSSStyleSheet;

 pub const Interfaces = .{
    CSSRule,
@@ -26,10 +26,11 @@ pub const Interfaces = .{
 };

 // https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
-const CSSRule = @This();
-css_text: []const u8,
-parent_rule: ?*CSSRule = null,
-parent_stylesheet: ?*CSSStyleSheet = null,
+pub const CSSRule = struct {
+    css_text: []const u8,
+    parent_rule: ?*CSSRule = null,
+    parent_stylesheet: ?*CSSStyleSheet = null,
+};

 pub const CSSImportRule = struct {
    pub const prototype = *CSSRule;
--- a/src/browser/cssom/css_rule_list.zig
+++ b/src/browser/cssom/css_rule_list.zig
@@ -0,0 +1,60 @@
+// 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 StyleSheet = @import("stylesheet.zig").StyleSheet;
+const CSSRule = @import("css_rule.zig").CSSRule;
+const CSSImportRule = @import("css_rule.zig").CSSImportRule;
+
+pub const CSSRuleList = struct {
+    list: std.ArrayListUnmanaged([]const u8),
+
+    pub fn constructor() CSSRuleList {
+        return .{ .list = .empty };
+    }
+
+    pub fn _item(self: *CSSRuleList, _index: u32) ?CSSRule {
+        const index: usize = @intCast(_index);
+
+        if (index > self.list.items.len) {
+            return null;
+        }
+
+        // todo: for now, just return null.
+        // this depends on properly parsing CSSRule
+        return null;
+    }
+
+    pub fn get_length(self: *CSSRuleList) u32 {
+        return @intCast(self.list.items.len);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.CSS.CSSRuleList" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let list = new CSSRuleList()", "undefined" },
+        .{ "list instanceof CSSRuleList", "true" },
+        .{ "list.length", "0" },
+        .{ "list.item(0)", "null" },
+    }, .{});
+}
--- a/src/browser/cssom/css_style_declaration.zig
+++ b/src/browser/cssom/css_style_declaration.zig
@@ -0,0 +1,241 @@
+// 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 CSSParser = @import("./css_parser.zig").CSSParser;
+const CSSValueAnalyzer = @import("./css_value_analyzer.zig").CSSValueAnalyzer;
+const CSSRule = @import("css_rule.zig").CSSRule;
+const Page = @import("../page.zig").Page;
+
+pub const CSSStyleDeclaration = struct {
+    store: std.StringHashMapUnmanaged(Property),
+    order: std.ArrayListUnmanaged([]const u8),
+
+    pub const empty: CSSStyleDeclaration = .{
+        .store = .empty,
+        .order = .empty,
+    };
+
+    const Property = struct {
+        value: []const u8,
+        priority: bool,
+    };
+
+    pub fn get_cssFloat(self: *const CSSStyleDeclaration) []const u8 {
+        return self._getPropertyValue("float");
+    }
+
+    pub fn set_cssFloat(self: *CSSStyleDeclaration, value: ?[]const u8, page: *Page) !void {
+        const final_value = value orelse "";
+        return self._setProperty("float", final_value, null, page);
+    }
+
+    pub fn get_cssText(self: *const CSSStyleDeclaration, page: *Page) ![]const u8 {
+        var buffer: std.ArrayListUnmanaged(u8) = .empty;
+        const writer = buffer.writer(page.call_arena);
+        for (self.order.items) |name| {
+            const prop = self.store.get(name).?;
+            const escaped = try CSSValueAnalyzer.escapeCSSValue(page.call_arena, prop.value);
+            try writer.print("{s}: {s}", .{ name, escaped });
+            if (prop.priority) try writer.writeAll(" !important");
+            try writer.writeAll("; ");
+        }
+        return buffer.items;
+    }
+
+    // TODO Propagate also upward to parent node
+    pub fn set_cssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !void {
+        self.store.clearRetainingCapacity();
+        self.order.clearRetainingCapacity();
+
+        // call_arena is safe here, because _setProperty will dupe the name
+        // using the page's longer-living arena.
+        const declarations = try CSSParser.parseDeclarations(page.call_arena, text);
+
+        for (declarations) |decl| {
+            if (!CSSValueAnalyzer.isValidPropertyName(decl.name)) continue;
+            const priority: ?[]const u8 = if (decl.is_important) "important" else null;
+            try self._setProperty(decl.name, decl.value, priority, page);
+        }
+    }
+
+    pub fn get_length(self: *const CSSStyleDeclaration) usize {
+        return self.order.items.len;
+    }
+
+    pub fn get_parentRule(_: *const CSSStyleDeclaration) ?CSSRule {
+        return null;
+    }
+
+    pub fn _getPropertyPriority(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
+        return if (self.store.get(name)) |prop| (if (prop.priority) "important" else "") else "";
+    }
+
+    // TODO should handle properly shorthand properties and canonical forms
+    pub fn _getPropertyValue(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
+        if (self.store.get(name)) |prop| {
+            return prop.value;
+        }
+
+        // default to everything being visible (unless it's been explicitly set)
+        if (std.mem.eql(u8, name, "visibility")) {
+            return "visible";
+        }
+
+        return "";
+    }
+
+    pub fn _item(self: *const CSSStyleDeclaration, index: usize) []const u8 {
+        return if (index < self.order.items.len) self.order.items[index] else "";
+    }
+
+    pub fn _removeProperty(self: *CSSStyleDeclaration, name: []const u8) ![]const u8 {
+        const prop = self.store.fetchRemove(name) orelse return "";
+        for (self.order.items, 0..) |item, i| {
+            if (std.mem.eql(u8, item, name)) {
+                _ = self.order.orderedRemove(i);
+                break;
+            }
+        }
+        // safe to return, since it's in our page.arena
+        return prop.value.value;
+    }
+
+    pub fn _setProperty(self: *CSSStyleDeclaration, name: []const u8, value: []const u8, priority: ?[]const u8, page: *Page) !void {
+        const owned_value = try page.arena.dupe(u8, value);
+        const is_important = priority != null and std.ascii.eqlIgnoreCase(priority.?, "important");
+
+        const gop = try self.store.getOrPut(page.arena, name);
+        if (!gop.found_existing) {
+            const owned_name = try page.arena.dupe(u8, name);
+            gop.key_ptr.* = owned_name;
+            try self.order.append(page.arena, owned_name);
+        }
+
+        gop.value_ptr.* = .{ .value = owned_value, .priority = is_important };
+    }
+
+    pub fn named_get(self: *const CSSStyleDeclaration, name: []const u8, _: *bool) []const u8 {
+        return self._getPropertyValue(name);
+    }
+};
+
+const testing = @import("../../testing.zig");
+
+test "CSSOM.CSSStyleDeclaration" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let style = document.getElementById('content').style", "undefined" },
+        .{ "style.cssText = 'color: red; font-size: 12px; margin: 5px !important;'", "color: red; font-size: 12px; margin: 5px !important;" },
+        .{ "style.length", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.getPropertyValue('color')", "red" },
+        .{ "style.getPropertyValue('font-size')", "12px" },
+        .{ "style.getPropertyValue('unknown-property')", "" },
+
+        .{ "style.getPropertyPriority('margin')", "important" },
+        .{ "style.getPropertyPriority('color')", "" },
+        .{ "style.getPropertyPriority('unknown-property')", "" },
+
+        .{ "style.item(0)", "color" },
+        .{ "style.item(1)", "font-size" },
+        .{ "style.item(2)", "margin" },
+        .{ "style.item(3)", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.setProperty('background-color', 'blue')", "undefined" },
+        .{ "style.getPropertyValue('background-color')", "blue" },
+        .{ "style.length", "4" },
+
+        .{ "style.setProperty('color', 'green')", "undefined" },
+        .{ "style.getPropertyValue('color')", "green" },
+        .{ "style.length", "4" },
+        .{ "style.color", "green" },
+
+        .{ "style.setProperty('padding', '10px', 'important')", "undefined" },
+        .{ "style.getPropertyValue('padding')", "10px" },
+        .{ "style.getPropertyPriority('padding')", "important" },
+
+        .{ "style.setProperty('border', '1px solid black', 'IMPORTANT')", "undefined" },
+        .{ "style.getPropertyPriority('border')", "important" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.removeProperty('color')", "green" },
+        .{ "style.getPropertyValue('color')", "" },
+        .{ "style.length", "5" },
+
+        .{ "style.removeProperty('unknown-property')", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.cssText.includes('font-size: 12px;')", "true" },
+        .{ "style.cssText.includes('margin: 5px !important;')", "true" },
+        .{ "style.cssText.includes('padding: 10px !important;')", "true" },
+        .{ "style.cssText.includes('border: 1px solid black !important;')", "true" },
+
+        .{ "style.cssText = 'color: purple; text-align: center;'", "color: purple; text-align: center;" },
+        .{ "style.length", "2" },
+        .{ "style.getPropertyValue('color')", "purple" },
+        .{ "style.getPropertyValue('text-align')", "center" },
+        .{ "style.getPropertyValue('font-size')", "" },
+
+        .{ "style.setProperty('cont', 'Hello; world!')", "undefined" },
+        .{ "style.getPropertyValue('cont')", "Hello; world!" },
+
+        .{ "style.cssText = 'content: \"Hello; world!\"; background-image: url(\"test.png\");'", "content: \"Hello; world!\"; background-image: url(\"test.png\");" },
+        .{ "style.getPropertyValue('content')", "\"Hello; world!\"" },
+        .{ "style.getPropertyValue('background-image')", "url(\"test.png\")" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.cssFloat", "" },
+        .{ "style.cssFloat = 'left'", "left" },
+        .{ "style.cssFloat", "left" },
+        .{ "style.getPropertyValue('float')", "left" },
+
+        .{ "style.cssFloat = 'right'", "right" },
+        .{ "style.cssFloat", "right" },
+
+        .{ "style.cssFloat = null", "null" },
+        .{ "style.cssFloat", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.setProperty('display', '')", "undefined" },
+        .{ "style.getPropertyValue('display')", "" },
+
+        .{ "style.cssText = '  color  :  purple  ;  margin  :  10px  ;  '", "  color  :  purple  ;  margin  :  10px  ;  " },
+        .{ "style.getPropertyValue('color')", "purple" },
+        .{ "style.getPropertyValue('margin')", "10px" },
+
+        .{ "style.setProperty('border-bottom-left-radius', '5px')", "undefined" },
+        .{ "style.getPropertyValue('border-bottom-left-radius')", "5px" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.visibility", "visible" },
+        .{ "style.getPropertyValue('visibility')", "visible" },
+    }, .{});
+}
--- a/src/browser/cssom/css_stylesheet.zig
+++ b/src/browser/cssom/css_stylesheet.zig
@@ -0,0 +1,91 @@
+// 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("../page.zig").Page;
+const StyleSheet = @import("stylesheet.zig").StyleSheet;
+
+const CSSRuleList = @import("css_rule_list.zig").CSSRuleList;
+const CSSImportRule = @import("css_rule.zig").CSSImportRule;
+
+pub const CSSStyleSheet = struct {
+    pub const prototype = *StyleSheet;
+
+    proto: StyleSheet,
+    css_rules: CSSRuleList,
+    owner_rule: ?*CSSImportRule,
+
+    const CSSStyleSheetOpts = struct {
+        base_url: ?[]const u8 = null,
+        // TODO: Suupport media
+        disabled: bool = false,
+    };
+
+    pub fn constructor(_opts: ?CSSStyleSheetOpts) !CSSStyleSheet {
+        const opts = _opts orelse CSSStyleSheetOpts{};
+        return .{
+            .proto = StyleSheet{ .disabled = opts.disabled },
+            .css_rules = .constructor(),
+            .owner_rule = null,
+        };
+    }
+
+    pub fn get_ownerRule(_: *CSSStyleSheet) ?*CSSImportRule {
+        return null;
+    }
+
+    pub fn get_cssRules(self: *CSSStyleSheet) *CSSRuleList {
+        return &self.css_rules;
+    }
+
+    pub fn _insertRule(self: *CSSStyleSheet, rule: []const u8, _index: ?usize, page: *Page) !usize {
+        const index = _index orelse 0;
+        if (index > self.css_rules.list.items.len) {
+            return error.IndexSize;
+        }
+
+        const arena = page.arena;
+        try self.css_rules.list.insert(arena, index, try arena.dupe(u8, rule));
+        return index;
+    }
+
+    pub fn _deleteRule(self: *CSSStyleSheet, index: usize) !void {
+        if (index > self.css_rules.list.items.len) {
+            return error.IndexSize;
+        }
+
+        _ = self.css_rules.list.orderedRemove(index);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.CSS.StyleSheet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let css = new CSSStyleSheet()", "undefined" },
+        .{ "css instanceof CSSStyleSheet", "true" },
+        .{ "css.cssRules.length", "0" },
+        .{ "css.ownerRule", "null" },
+        .{ "let index1 = css.insertRule('body { color: red; }', 0)", "undefined" },
+        .{ "index1", "0" },
+        .{ "css.cssRules.length", "1" },
+    }, .{});
+}
--- a/src/browser/cssom/css_value_analyzer.zig
+++ b/src/browser/cssom/css_value_analyzer.zig
@@ -0,0 +1,811 @@
+// 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 const CSSValueAnalyzer = struct {
+    pub fn isNumericWithUnit(value: []const u8) bool {
+        if (value.len == 0) return false;
+
+        if (!std.ascii.isDigit(value[0]) and
+            value[0] != '+' and value[0] != '-' and value[0] != '.')
+        {
+            return false;
+        }
+
+        var i: usize = 0;
+        var has_digit = false;
+        var decimal_point = false;
+
+        while (i < value.len) : (i += 1) {
+            const c = value[i];
+            if (std.ascii.isDigit(c)) {
+                has_digit = true;
+            } else if (c == '.' and !decimal_point) {
+                decimal_point = true;
+            } else if ((c == 'e' or c == 'E') and has_digit) {
+                if (i + 1 >= value.len) return false;
+                if (value[i + 1] != '+' and value[i + 1] != '-' and !std.ascii.isDigit(value[i + 1])) break;
+                i += 1;
+                if (value[i] == '+' or value[i] == '-') {
+                    i += 1;
+                }
+                var has_exp_digits = false;
+                while (i < value.len and std.ascii.isDigit(value[i])) : (i += 1) {
+                    has_exp_digits = true;
+                }
+                if (!has_exp_digits) return false;
+                break;
+            } else if (c != '-' and c != '+') {
+                break;
+            }
+        }
+
+        if (!has_digit) return false;
+
+        if (i == value.len) return true;
+
+        const unit = value[i..];
+        return CSSKeywords.isValidUnit(unit);
+    }
+
+    pub fn isHexColor(value: []const u8) bool {
+        if (!std.mem.startsWith(u8, value, "#")) return false;
+
+        const hex_part = value[1..];
+        if (hex_part.len != 3 and hex_part.len != 6 and hex_part.len != 8) return false;
+
+        for (hex_part) |c| {
+            if (!std.ascii.isHex(c)) return false;
+        }
+
+        return true;
+    }
+
+    pub fn isMultiValueProperty(value: []const u8) bool {
+        var parts = std.mem.splitAny(u8, value, " ");
+        var multi_value_parts: usize = 0;
+        var all_parts_valid = true;
+
+        while (parts.next()) |part| {
+            if (part.len == 0) continue;
+            multi_value_parts += 1;
+
+            const is_numeric = isNumericWithUnit(part);
+            const is_hex_color = isHexColor(part);
+            const is_known_keyword = CSSKeywords.isKnownKeyword(part);
+            const is_function = CSSKeywords.startsWithFunction(part);
+
+            if (!is_numeric and !is_hex_color and !is_known_keyword and !is_function) {
+                all_parts_valid = false;
+                break;
+            }
+        }
+
+        return multi_value_parts >= 2 and all_parts_valid;
+    }
+
+    pub fn isAlreadyQuoted(value: []const u8) bool {
+        return value.len >= 2 and ((value[0] == '"' and value[value.len - 1] == '"') or
+            (value[0] == '\'' and value[value.len - 1] == '\''));
+    }
+
+    pub fn isValidPropertyName(name: []const u8) bool {
+        if (name.len == 0) return false;
+
+        if (std.mem.startsWith(u8, name, "--")) {
+            if (name.len == 2) return false;
+            for (name[2..]) |c| {
+                if (!std.ascii.isAlphanumeric(c) and c != '-' and c != '_') {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        const first_char = name[0];
+        if (!std.ascii.isAlphabetic(first_char) and first_char != '-') {
+            return false;
+        }
+
+        if (first_char == '-') {
+            if (name.len < 2) return false;
+
+            if (!std.ascii.isAlphabetic(name[1])) {
+                return false;
+            }
+
+            for (name[2..]) |c| {
+                if (!std.ascii.isAlphanumeric(c) and c != '-') {
+                    return false;
+                }
+            }
+        } else {
+            for (name[1..]) |c| {
+                if (!std.ascii.isAlphanumeric(c) and c != '-') {
+                    return false;
+                }
+            }
+        }
+
+        return true;
+    }
+
+    pub fn extractImportant(value: []const u8) struct { value: []const u8, is_important: bool } {
+        const trimmed = std.mem.trim(u8, value, &std.ascii.whitespace);
+
+        if (std.mem.endsWith(u8, trimmed, "!important")) {
+            const clean_value = std.mem.trimRight(u8, trimmed[0 .. trimmed.len - 10], &std.ascii.whitespace);
+            return .{ .value = clean_value, .is_important = true };
+        }
+
+        return .{ .value = trimmed, .is_important = false };
+    }
+
+    pub fn needsQuotes(value: []const u8) bool {
+        if (value.len == 0) return true;
+        if (isAlreadyQuoted(value)) return false;
+
+        if (CSSKeywords.containsSpecialChar(value)) {
+            return true;
+        }
+
+        if (std.mem.indexOfScalar(u8, value, ' ') == null) {
+            return false;
+        }
+
+        const is_url = std.mem.startsWith(u8, value, "url(");
+        const is_function = CSSKeywords.startsWithFunction(value);
+
+        return !isMultiValueProperty(value) and
+            !is_url and
+            !is_function;
+    }
+
+    pub fn escapeCSSValue(arena: std.mem.Allocator, value: []const u8) ![]const u8 {
+        if (!needsQuotes(value)) {
+            return value;
+        }
+        var out: std.ArrayListUnmanaged(u8) = .empty;
+
+        // We'll need at least this much space, +2 for the quotes
+        try out.ensureTotalCapacity(arena, value.len + 2);
+        const writer = out.writer(arena);
+
+        try writer.writeByte('"');
+
+        for (value, 0..) |c, i| {
+            switch (c) {
+                '"' => try writer.writeAll("\\\""),
+                '\\' => try writer.writeAll("\\\\"),
+                '\n' => try writer.writeAll("\\A "),
+                '\r' => try writer.writeAll("\\D "),
+                '\t' => try writer.writeAll("\\9 "),
+                0...8, 11, 12, 14...31, 127 => {
+                    try writer.print("\\{x}", .{c});
+                    if (i + 1 < value.len and std.ascii.isHex(value[i + 1])) {
+                        try writer.writeByte(' ');
+                    }
+                },
+                else => try writer.writeByte(c),
+            }
+        }
+
+        try writer.writeByte('"');
+        return out.items;
+    }
+
+    pub fn isKnownKeyword(value: []const u8) bool {
+        return CSSKeywords.isKnownKeyword(value);
+    }
+
+    pub fn containsSpecialChar(value: []const u8) bool {
+        return CSSKeywords.containsSpecialChar(value);
+    }
+};
+
+const CSSKeywords = struct {
+    const border_styles = [_][]const u8{
+        "none", "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset",
+    };
+
+    const color_names = [_][]const u8{
+        "black",        "white",   "red", "green", "blue", "yellow", "purple", "gray", "transparent",
+        "currentColor", "inherit",
+    };
+
+    const position_keywords = [_][]const u8{
+        "auto", "center", "left", "right", "top", "bottom",
+    };
+
+    const background_repeat = [_][]const u8{
+        "repeat", "no-repeat", "repeat-x", "repeat-y", "space", "round",
+    };
+
+    const font_styles = [_][]const u8{
+        "normal", "italic", "oblique", "bold", "bolder", "lighter",
+    };
+
+    const font_sizes = [_][]const u8{
+        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large",
+        "smaller",  "larger",
+    };
+
+    const font_families = [_][]const u8{
+        "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui",
+    };
+
+    const css_global = [_][]const u8{
+        "initial", "inherit", "unset", "revert",
+    };
+
+    const display_values = [_][]const u8{
+        "block", "inline", "inline-block", "flex", "grid", "none",
+    };
+
+    const length_units = [_][]const u8{
+        "px", "em", "rem", "vw", "vh", "vmin", "vmax", "%", "pt", "pc", "in", "cm", "mm",
+        "ex", "ch", "fr",
+    };
+
+    const angle_units = [_][]const u8{
+        "deg", "rad", "grad", "turn",
+    };
+
+    const time_units = [_][]const u8{
+        "s", "ms",
+    };
+
+    const frequency_units = [_][]const u8{
+        "Hz", "kHz",
+    };
+
+    const resolution_units = [_][]const u8{
+        "dpi", "dpcm", "dppx",
+    };
+
+    const special_chars = [_]u8{
+        '"', '\'', ';', '{', '}', '\\', '<', '>', '/', '\n', '\t', '\r', '\x00', '\x7F',
+    };
+
+    const functions = [_][]const u8{
+        "rgb(",             "rgba(",            "hsl(",            "hsla(",      "url(",    "calc(",  "var(",  "attr(",
+        "linear-gradient(", "radial-gradient(", "conic-gradient(", "translate(", "rotate(", "scale(", "skew(", "matrix(",
+    };
+
+    pub fn isKnownKeyword(value: []const u8) bool {
+        const all_categories = [_][]const []const u8{
+            &border_styles,  &color_names, &position_keywords, &background_repeat,
+            &font_styles,    &font_sizes,  &font_families,     &css_global,
+            &display_values,
+        };
+
+        for (all_categories) |category| {
+            for (category) |keyword| {
+                if (std.ascii.eqlIgnoreCase(value, keyword)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    pub fn containsSpecialChar(value: []const u8) bool {
+        for (value) |c| {
+            for (special_chars) |special| {
+                if (c == special) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
+    pub fn isValidUnit(unit: []const u8) bool {
+        const all_units = [_][]const []const u8{
+            &length_units, &angle_units, &time_units, &frequency_units, &resolution_units,
+        };
+
+        for (all_units) |category| {
+            for (category) |valid_unit| {
+                if (std.ascii.eqlIgnoreCase(unit, valid_unit)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    pub fn startsWithFunction(value: []const u8) bool {
+        const pos = std.mem.indexOfScalar(u8, value, '(') orelse return false;
+        if (pos == 0) return false;
+
+        if (std.mem.indexOfScalarPos(u8, value, pos, ')') == null) {
+            return false;
+        }
+        const function_name = value[0..pos];
+        return isValidFunctionName(function_name);
+    }
+
+    fn isValidFunctionName(name: []const u8) bool {
+        if (name.len == 0) return false;
+
+        const first = name[0];
+        if (!std.ascii.isAlphabetic(first) and first != '_' and first != '-') {
+            return false;
+        }
+
+        for (name[1..]) |c| {
+            if (!std.ascii.isAlphanumeric(c) and c != '_' and c != '-') {
+                return false;
+            }
+        }
+
+        return true;
+    }
+};
+
+const testing = @import("../../testing.zig");
+
+test "CSSValueAnalyzer: isNumericWithUnit - valid numbers with units" {
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("10px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("3.14em"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("-5rem"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("+12.5%"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("0vh"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit(".5vw"));
+}
+
+test "CSSValueAnalyzer: isNumericWithUnit - scientific notation" {
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("1e5px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("2.5E-3em"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("1e+2rem"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("-3.14e10px"));
+}
+
+test "CSSValueAnalyzer: isNumericWithUnit - edge cases and invalid inputs" {
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(""));
+
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("px"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("--px"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(".px"));
+
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("1e"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("1epx"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("1e+"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("1e+px"));
+
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("1.2.3px"));
+
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("10xyz"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("5invalid"));
+
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("10"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("3.14"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("-5"));
+}
+
+test "CSSValueAnalyzer: isHexColor - valid hex colors" {
+    try testing.expect(CSSValueAnalyzer.isHexColor("#000"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#fff"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#123456"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#abcdef"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#ABCDEF"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#12345678"));
+}
+
+test "CSSValueAnalyzer: isHexColor - invalid hex colors" {
+    try testing.expect(!CSSValueAnalyzer.isHexColor(""));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("000"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#00"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#0000"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#00000"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#0000000"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#000000000"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#gggggg"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#123xyz"));
+}
+
+test "CSSValueAnalyzer: isMultiValueProperty - valid multi-value properties" {
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("10px 20px"));
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("solid red"));
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("#fff black"));
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("1em 2em 3em 4em"));
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("rgb(255,0,0) solid"));
+}
+
+test "CSSValueAnalyzer: isMultiValueProperty - invalid multi-value properties" {
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty(""));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("10px"));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("invalid unknown"));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("10px invalid"));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("   "));
+}
+
+test "CSSValueAnalyzer: isAlreadyQuoted - various quoting scenarios" {
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("\"hello\""));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("'world'"));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("\"\""));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("''"));
+
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted(""));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("hello"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("\""));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("'"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("\"hello'"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("'hello\""));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("\"hello"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("hello\""));
+}
+
+test "CSSValueAnalyzer: isValidPropertyName - valid property names" {
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("color"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("background-color"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("-webkit-transform"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("font-size"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("margin-top"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("z-index"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("line-height"));
+}
+
+test "CSSValueAnalyzer: isValidPropertyName - invalid property names" {
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName(""));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("123color"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("color!"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("color space"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("@color"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("color.test"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("color_test"));
+}
+
+test "CSSValueAnalyzer: extractImportant - with and without !important" {
+    var result = CSSValueAnalyzer.extractImportant("red !important");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("red", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("blue");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("blue", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("  green  !important  ");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("green", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("!important");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("important");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("important", result.value);
+}
+
+test "CSSValueAnalyzer: needsQuotes - various scenarios" {
+    try testing.expect(CSSValueAnalyzer.needsQuotes(""));
+    try testing.expect(CSSValueAnalyzer.needsQuotes("hello world"));
+    try testing.expect(CSSValueAnalyzer.needsQuotes("test;"));
+    try testing.expect(CSSValueAnalyzer.needsQuotes("a{b}"));
+    try testing.expect(CSSValueAnalyzer.needsQuotes("test\"quote"));
+
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("\"already quoted\""));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("'already quoted'"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("url(image.png)"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("rgb(255, 0, 0)"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("10px 20px"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("simple"));
+}
+
+test "CSSValueAnalyzer: escapeCSSValue - escaping various characters" {
+    const allocator = testing.arena_allocator;
+
+    var result = try CSSValueAnalyzer.escapeCSSValue(allocator, "simple");
+    try testing.expectEqual("simple", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "\"already quoted\"");
+    try testing.expectEqual("\"already quoted\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\"quote");
+    try testing.expectEqual("\"test\\\"quote\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\nline");
+    try testing.expectEqual("\"test\\A line\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\\back");
+    try testing.expectEqual("\"test\\\\back\"", result);
+}
+
+test "CSSValueAnalyzer: CSSKeywords.isKnownKeyword - case sensitivity" {
+    try testing.expect(CSSKeywords.isKnownKeyword("red"));
+    try testing.expect(CSSKeywords.isKnownKeyword("solid"));
+    try testing.expect(CSSKeywords.isKnownKeyword("center"));
+    try testing.expect(CSSKeywords.isKnownKeyword("inherit"));
+
+    try testing.expect(CSSKeywords.isKnownKeyword("RED"));
+    try testing.expect(CSSKeywords.isKnownKeyword("Red"));
+    try testing.expect(CSSKeywords.isKnownKeyword("SOLID"));
+    try testing.expect(CSSKeywords.isKnownKeyword("Center"));
+
+    try testing.expect(!CSSKeywords.isKnownKeyword("invalid"));
+    try testing.expect(!CSSKeywords.isKnownKeyword("unknown"));
+    try testing.expect(!CSSKeywords.isKnownKeyword(""));
+}
+
+test "CSSValueAnalyzer: CSSKeywords.containsSpecialChar - various special characters" {
+    try testing.expect(CSSKeywords.containsSpecialChar("test\"quote"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test'quote"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test;end"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test{brace"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test}brace"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test\\back"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test<angle"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test>angle"));
+    try testing.expect(CSSKeywords.containsSpecialChar("test/slash"));
+
+    try testing.expect(!CSSKeywords.containsSpecialChar("normal-text"));
+    try testing.expect(!CSSKeywords.containsSpecialChar("text123"));
+    try testing.expect(!CSSKeywords.containsSpecialChar(""));
+}
+
+test "CSSValueAnalyzer: CSSKeywords.isValidUnit - various units" {
+    try testing.expect(CSSKeywords.isValidUnit("px"));
+    try testing.expect(CSSKeywords.isValidUnit("em"));
+    try testing.expect(CSSKeywords.isValidUnit("rem"));
+    try testing.expect(CSSKeywords.isValidUnit("%"));
+
+    try testing.expect(CSSKeywords.isValidUnit("deg"));
+    try testing.expect(CSSKeywords.isValidUnit("rad"));
+
+    try testing.expect(CSSKeywords.isValidUnit("s"));
+    try testing.expect(CSSKeywords.isValidUnit("ms"));
+
+    try testing.expect(CSSKeywords.isValidUnit("PX"));
+
+    try testing.expect(!CSSKeywords.isValidUnit("invalid"));
+    try testing.expect(!CSSKeywords.isValidUnit(""));
+}
+
+test "CSSValueAnalyzer: CSSKeywords.startsWithFunction - function detection" {
+    try testing.expect(CSSKeywords.startsWithFunction("rgb(255, 0, 0)"));
+    try testing.expect(CSSKeywords.startsWithFunction("rgba(255, 0, 0, 0.5)"));
+    try testing.expect(CSSKeywords.startsWithFunction("url(image.png)"));
+    try testing.expect(CSSKeywords.startsWithFunction("calc(100% - 20px)"));
+    try testing.expect(CSSKeywords.startsWithFunction("var(--custom-property)"));
+    try testing.expect(CSSKeywords.startsWithFunction("linear-gradient(to right, red, blue)"));
+
+    try testing.expect(CSSKeywords.startsWithFunction("custom-function(args)"));
+    try testing.expect(CSSKeywords.startsWithFunction("unknown(test)"));
+
+    try testing.expect(!CSSKeywords.startsWithFunction("not-a-function"));
+    try testing.expect(!CSSKeywords.startsWithFunction("missing-paren)"));
+    try testing.expect(!CSSKeywords.startsWithFunction("missing-close("));
+    try testing.expect(!CSSKeywords.startsWithFunction(""));
+    try testing.expect(!CSSKeywords.startsWithFunction("rgb"));
+}
+
+test "CSSValueAnalyzer: isNumericWithUnit - whitespace handling" {
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(" 10px"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("10 px"));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("10px "));
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(" 10 px "));
+}
+
+test "CSSValueAnalyzer: extractImportant - whitespace edge cases" {
+    var result = CSSValueAnalyzer.extractImportant("   ");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("\t\n\r !important\t\n");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("red\t!important");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("red", result.value);
+}
+
+test "CSSValueAnalyzer: isHexColor - mixed case handling" {
+    try testing.expect(CSSValueAnalyzer.isHexColor("#AbC"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#123aBc"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#FFffFF"));
+    try testing.expect(CSSValueAnalyzer.isHexColor("#000FFF"));
+}
+
+test "CSSValueAnalyzer: edge case - very long inputs" {
+    const long_valid = "a" ** 1000 ++ "px";
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(long_valid)); // not numeric
+
+    const long_property = "a-" ** 100 ++ "property";
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName(long_property));
+
+    const long_hex = "#" ++ "a" ** 20;
+    try testing.expect(!CSSValueAnalyzer.isHexColor(long_hex));
+}
+
+test "CSSValueAnalyzer: boundary conditions - numeric parsing" {
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("0px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("0.0px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit(".0px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("0.px"));
+
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("999999999px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("1.7976931348623157e+308px"));
+
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("0.000000001px"));
+    try testing.expect(CSSValueAnalyzer.isNumericWithUnit("1e-100px"));
+}
+
+test "CSSValueAnalyzer: extractImportant - malformed important declarations" {
+    var result = CSSValueAnalyzer.extractImportant("red ! important");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("red ! important", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("red !Important");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("red !Important", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("red !IMPORTANT");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("red !IMPORTANT", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("!importantred");
+    try testing.expect(!result.is_important);
+    try testing.expectEqual("!importantred", result.value);
+
+    result = CSSValueAnalyzer.extractImportant("red !important !important");
+    try testing.expect(result.is_important);
+    try testing.expectEqual("red !important", result.value);
+}
+
+test "CSSValueAnalyzer: isMultiValueProperty - complex spacing scenarios" {
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("10px    20px"));
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("solid     red"));
+
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("  10px 20px  "));
+
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("10px\t20px"));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("10px\n20px"));
+
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("10px   20px   30px"));
+}
+
+test "CSSValueAnalyzer: isAlreadyQuoted - edge cases with quotes" {
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("\"'hello'\""));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("'\"hello\"'"));
+
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("\"hello\\\"world\""));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("'hello\\'world'"));
+
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("\"hello"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("hello\""));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("'hello"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("hello'"));
+
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("\"a\""));
+    try testing.expect(CSSValueAnalyzer.isAlreadyQuoted("'b'"));
+}
+
+test "CSSValueAnalyzer: needsQuotes - function and URL edge cases" {
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("rgb(255, 0, 0)"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("calc(100% - 20px)"));
+
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("url(path with spaces.jpg)"));
+
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("linear-gradient(to right, red, blue)"));
+
+    try testing.expect(CSSValueAnalyzer.needsQuotes("rgb(255, 0, 0"));
+}
+
+test "CSSValueAnalyzer: escapeCSSValue - control characters and Unicode" {
+    const allocator = testing.arena_allocator;
+
+    var result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\ttab");
+    try testing.expectEqual("\"test\\9 tab\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\rreturn");
+    try testing.expectEqual("\"test\\D return\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\x00null");
+    try testing.expectEqual("\"test\\0null\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\x7Fdel");
+    try testing.expectEqual("\"test\\7f del\"", result);
+
+    result = try CSSValueAnalyzer.escapeCSSValue(allocator, "test\"quote\nline\\back");
+    try testing.expectEqual("\"test\\\"quote\\A line\\\\back\"", result);
+}
+
+test "CSSValueAnalyzer: isValidPropertyName - CSS custom properties and vendor prefixes" {
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("--custom-color"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("--my-variable"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("--123"));
+
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("-webkit-transform"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("-moz-border-radius"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("-ms-filter"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("-o-transition"));
+
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("-123invalid"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("--"));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName("-"));
+}
+
+test "CSSValueAnalyzer: startsWithFunction - case sensitivity and partial matches" {
+    try testing.expect(CSSKeywords.startsWithFunction("RGB(255, 0, 0)"));
+    try testing.expect(CSSKeywords.startsWithFunction("Rgb(255, 0, 0)"));
+    try testing.expect(CSSKeywords.startsWithFunction("URL(image.png)"));
+
+    try testing.expect(CSSKeywords.startsWithFunction("rg(something)"));
+    try testing.expect(CSSKeywords.startsWithFunction("ur(something)"));
+
+    try testing.expect(CSSKeywords.startsWithFunction("rgb(1,2,3)"));
+    try testing.expect(CSSKeywords.startsWithFunction("rgba(1,2,3,4)"));
+
+    try testing.expect(CSSKeywords.startsWithFunction("my-custom-function(args)"));
+    try testing.expect(CSSKeywords.startsWithFunction("function-with-dashes(test)"));
+
+    try testing.expect(!CSSKeywords.startsWithFunction("123function(test)"));
+}
+
+test "CSSValueAnalyzer: isHexColor - Unicode and invalid characters" {
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#ghijkl"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#12345g"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#xyz"));
+
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#АВС"));
+
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#1234567g"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("#g2345678"));
+}
+
+test "CSSValueAnalyzer: complex integration scenarios" {
+    const allocator = testing.arena_allocator;
+
+    try testing.expect(CSSValueAnalyzer.isMultiValueProperty("rgb(255,0,0) url(bg.jpg)"));
+
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("calc(100% - 20px)"));
+
+    const result = try CSSValueAnalyzer.escapeCSSValue(allocator, "fake(function with spaces");
+    try testing.expectEqual("\"fake(function with spaces\"", result);
+
+    const important_result = CSSValueAnalyzer.extractImportant("rgb(255,0,0) !important");
+    try testing.expect(important_result.is_important);
+    try testing.expectEqual("rgb(255,0,0)", important_result.value);
+}
+
+test "CSSValueAnalyzer: performance edge cases - empty and minimal inputs" {
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit(""));
+    try testing.expect(!CSSValueAnalyzer.isHexColor(""));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty(""));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted(""));
+    try testing.expect(!CSSValueAnalyzer.isValidPropertyName(""));
+    try testing.expect(CSSValueAnalyzer.needsQuotes(""));
+    try testing.expect(!CSSKeywords.isKnownKeyword(""));
+    try testing.expect(!CSSKeywords.containsSpecialChar(""));
+    try testing.expect(!CSSKeywords.isValidUnit(""));
+    try testing.expect(!CSSKeywords.startsWithFunction(""));
+
+    try testing.expect(!CSSValueAnalyzer.isNumericWithUnit("a"));
+    try testing.expect(!CSSValueAnalyzer.isHexColor("a"));
+    try testing.expect(!CSSValueAnalyzer.isMultiValueProperty("a"));
+    try testing.expect(!CSSValueAnalyzer.isAlreadyQuoted("a"));
+    try testing.expect(CSSValueAnalyzer.isValidPropertyName("a"));
+    try testing.expect(!CSSValueAnalyzer.needsQuotes("a"));
+}
--- a/src/browser/cssom/cssom.zig
+++ b/src/browser/cssom/cssom.zig
@@ -16,10 +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/>.

+pub const Stylesheet = @import("stylesheet.zig").StyleSheet;
+pub const CSSStylesheet = @import("css_stylesheet.zig").CSSStyleSheet;
+pub const CSSStyleDeclaration = @import("css_style_declaration.zig").CSSStyleDeclaration;
+pub const CSSRuleList = @import("css_rule_list.zig").CSSRuleList;
+
 pub const Interfaces = .{
-    @import("StyleSheet.zig"),
-    @import("CSSStyleSheet.zig"),
-    @import("CSSStyleDeclaration.zig"),
-    @import("CSSRuleList.zig"),
-    @import("CSSRule.zig").Interfaces,
+    Stylesheet,
+    CSSStylesheet,
+    CSSStyleDeclaration,
+    CSSRuleList,
+    @import("css_rule.zig").Interfaces,
 };
--- a/src/browser/cssom/stylesheet.zig
+++ b/src/browser/cssom/stylesheet.zig
@@ -19,37 +19,37 @@
 const parser = @import("../netsurf.zig");

 // https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet#specifications
-const StyleSheet = @This();
+pub const StyleSheet = struct {
+    disabled: bool = false,
+    href: []const u8 = "",
+    owner_node: ?*parser.Node = null,
+    parent_stylesheet: ?*StyleSheet = null,
+    title: []const u8 = "",
+    type: []const u8 = "text/css",

-disabled: bool = false,
-href: []const u8 = "",
-owner_node: ?*parser.Node = null,
-parent_stylesheet: ?*StyleSheet = null,
-title: []const u8 = "",
-type: []const u8 = "text/css",
+    pub fn get_disabled(self: *const StyleSheet) bool {
+        return self.disabled;
+    }

-pub fn get_disabled(self: *const StyleSheet) bool {
-    return self.disabled;
-}
+    pub fn get_href(self: *const StyleSheet) []const u8 {
+        return self.href;
+    }

-pub fn get_href(self: *const StyleSheet) []const u8 {
-    return self.href;
-}
+    // TODO: media

-// TODO: media
+    pub fn get_ownerNode(self: *const StyleSheet) ?*parser.Node {
+        return self.owner_node;
+    }

-pub fn get_ownerNode(self: *const StyleSheet) ?*parser.Node {
-    return self.owner_node;
-}
+    pub fn get_parentStyleSheet(self: *const StyleSheet) ?*StyleSheet {
+        return self.parent_stylesheet;
+    }

-pub fn get_parentStyleSheet(self: *const StyleSheet) ?*StyleSheet {
-    return self.parent_stylesheet;
-}
+    pub fn get_title(self: *const StyleSheet) []const u8 {
+        return self.title;
+    }

-pub fn get_title(self: *const StyleSheet) []const u8 {
-    return self.title;
-}
-
-pub fn get_type(self: *const StyleSheet) []const u8 {
-    return self.type;
-}
+    pub fn get_type(self: *const StyleSheet) []const u8 {
+        return self.type;
+    }
+};
--- a/src/browser/datauri.zig
+++ b/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));
+}
--- a/src/browser/dom/Animation.zig
+++ b/src/browser/dom/Animation.zig
@@ -1,107 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const js = @import("../js/js.zig");
-const Page = @import("../page.zig").Page;
-
-const Animation = @This();
-
-effect: ?js.Object,
-timeline: ?js.Object,
-ready_resolver: ?js.PromiseResolver,
-finished_resolver: ?js.PromiseResolver,
-
-pub fn constructor(effect: ?js.Object, timeline: ?js.Object) !Animation {
-    return .{
-        .effect = if (effect) |eo| try eo.persist() else null,
-        .timeline = if (timeline) |to| try to.persist() else null,
-        .ready_resolver = null,
-        .finished_resolver = null,
-    };
-}
-
-pub fn get_playState(self: *const Animation) []const u8 {
-    _ = self;
-    return "finished";
-}
-
-pub fn get_pending(self: *const Animation) bool {
-    _ = self;
-    return false;
-}
-
-pub fn get_finished(self: *Animation, page: *Page) !js.Promise {
-    if (self.finished_resolver == null) {
-        const resolver = page.js.createPromiseResolver(.none);
-        try resolver.resolve(self);
-        self.finished_resolver = resolver;
-    }
-    return self.finished_resolver.?.promise();
-}
-
-pub fn get_ready(self: *Animation, page: *Page) !js.Promise {
-    // never resolved, because we're always "finished"
-    if (self.ready_resolver == null) {
-        const resolver = page.js.createPromiseResolver(.none);
-        self.ready_resolver = resolver;
-    }
-    return self.ready_resolver.?.promise();
-}
-
-pub fn get_effect(self: *const Animation) ?js.Object {
-    return self.effect;
-}
-
-pub fn set_effect(self: *Animation, effect: js.Object) !void {
-    self.effect = try effect.persist();
-}
-
-pub fn get_timeline(self: *const Animation) ?js.Object {
-    return self.timeline;
-}
-
-pub fn set_timeline(self: *Animation, timeline: js.Object) !void {
-    self.timeline = try timeline.persist();
-}
-
-pub fn _play(self: *const Animation) void {
-    _ = self;
-}
-
-pub fn _pause(self: *const Animation) void {
-    _ = self;
-}
-
-pub fn _cancel(self: *const Animation) void {
-    _ = self;
-}
-
-pub fn _finish(self: *const Animation) void {
-    _ = self;
-}
-
-pub fn _reverse(self: *const Animation) void {
-    _ = self;
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: DOM.Animation" {
-    try testing.htmlRunner("dom/animation.html");
-}
--- a/src/browser/dom/IntersectionObserver.zig
+++ b/src/browser/dom/IntersectionObserver.zig
@@ -1,329 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const js = @import("../js/js.zig");
-const log = @import("../../log.zig");
-const parser = @import("../netsurf.zig");
-const Page = @import("../page.zig").Page;
-const Node = @import("node.zig").Node;
-const Element = @import("element.zig").Element;
-
-pub const Interfaces = .{
-    IntersectionObserver,
-    Entry,
-};
-
-// This implementation attempts to be as less wrong as possible. Since we don't
-// render, or know how things are positioned, our best guess isn't very good.
-const IntersectionObserver = @This();
-page: *Page,
-root: *parser.Node,
-callback: js.Function,
-event_node: parser.EventNode,
-observed_entries: std.ArrayList(Entry),
-pending_elements: std.ArrayList(*parser.Element),
-ready_elements: std.ArrayList(*parser.Element),
-
-pub fn constructor(callback: js.Function, opts_: ?IntersectionObserverOptions, page: *Page) !*IntersectionObserver {
-    const opts = opts_ orelse IntersectionObserverOptions{};
-
-    const self = try page.arena.create(IntersectionObserver);
-    self.* = .{
-        .page = page,
-        .callback = callback,
-        .ready_elements = .{},
-        .observed_entries = .{},
-        .pending_elements = .{},
-        .event_node = .{ .func = mutationCallback },
-        .root = opts.root orelse parser.documentToNode(parser.documentHTMLToDocument(page.window.document)),
-    };
-
-    _ = try parser.eventTargetAddEventListener(
-        parser.toEventTarget(parser.Node, self.root),
-        "DOMNodeInserted",
-        &self.event_node,
-        false,
-    );
-
-    _ = try parser.eventTargetAddEventListener(
-        parser.toEventTarget(parser.Node, self.root),
-        "DOMNodeRemoved",
-        &self.event_node,
-        false,
-    );
-
-    return self;
-}
-
-pub fn _disconnect(self: *IntersectionObserver) !void {
-    // We don't free as it is on an arena
-    self.ready_elements = .{};
-    self.observed_entries = .{};
-    self.pending_elements = .{};
-}
-
-pub fn _observe(self: *IntersectionObserver, target_element: *parser.Element, page: *Page) !void {
-    for (self.observed_entries.items) |*observer| {
-        if (observer.target == target_element) {
-            return; // Already observed
-        }
-    }
-
-    if (self.isPending(target_element)) {
-        return; // Already pending
-    }
-
-    for (self.ready_elements.items) |element| {
-        if (element == target_element) {
-            return; // Already primed
-        }
-    }
-
-    // We can never fire callbacks synchronously. Code like React expects any
-    // callback to fire in the future (e.g. via microtasks).
-    try self.ready_elements.append(self.page.arena, target_element);
-    if (self.ready_elements.items.len == 1) {
-        // this is our first ready entry, schedule a callback
-        try page.scheduler.add(self, processReady, 0, .{
-            .name = "intersection ready",
-        });
-    }
-}
-
-pub fn _unobserve(self: *IntersectionObserver, target: *parser.Element) !void {
-    if (self.removeObserved(target)) {
-        return;
-    }
-
-    for (self.ready_elements.items, 0..) |el, index| {
-        if (el == target) {
-            _ = self.ready_elements.swapRemove(index);
-            return;
-        }
-    }
-
-    for (self.pending_elements.items, 0..) |el, index| {
-        if (el == target) {
-            _ = self.pending_elements.swapRemove(index);
-            return;
-        }
-    }
-}
-
-pub fn _takeRecords(self: *IntersectionObserver) []Entry {
-    return self.observed_entries.items;
-}
-
-fn processReady(ctx: *anyopaque) ?u32 {
-    const self: *IntersectionObserver = @ptrCast(@alignCast(ctx));
-    self._processReady() catch |err| {
-        log.err(.web_api, "intersection ready", .{ .err = err });
-    };
-    return null;
-}
-
-fn _processReady(self: *IntersectionObserver) !void {
-    defer self.ready_elements.clearRetainingCapacity();
-    for (self.ready_elements.items) |element| {
-        // IntersectionObserver probably doesn't work like what your intuition
-        // thinks. As long as a node has a parent, even if that parent isn't
-        // connected and even if the two nodes don't intersect, it'll fire the
-        // callback once.
-        if (try Node.get_parentNode(@ptrCast(element)) == null) {
-            if (!self.isPending(element)) {
-                try self.pending_elements.append(self.page.arena, element);
-            }
-            continue;
-        }
-        try self.forceObserve(element);
-    }
-}
-
-fn isPending(self: *IntersectionObserver, element: *parser.Element) bool {
-    for (self.pending_elements.items) |el| {
-        if (el == element) {
-            return true;
-        }
-    }
-    return false;
-}
-
-fn mutationCallback(en: *parser.EventNode, event: *parser.Event) void {
-    const mutation_event = parser.eventToMutationEvent(event);
-    const self: *IntersectionObserver = @fieldParentPtr("event_node", en);
-    self._mutationCallback(mutation_event) catch |err| {
-        log.err(.web_api, "mutation callback", .{ .err = err, .source = "intersection observer" });
-    };
-}
-
-fn _mutationCallback(self: *IntersectionObserver, event: *parser.MutationEvent) !void {
-    const event_type = parser.eventType(@ptrCast(event));
-
-    if (std.mem.eql(u8, event_type, "DOMNodeInserted")) {
-        const node = parser.mutationEventRelatedNode(event) catch return orelse return;
-        if (parser.nodeType(node) != .element) {
-            return;
-        }
-        const el: *parser.Element = @ptrCast(node);
-        if (self.removePending(el)) {
-            // It was pending (because it wasn't in the root), but now it is
-            // we should observe it.
-            try self.forceObserve(el);
-        }
-        return;
-    }
-
-    if (std.mem.eql(u8, event_type, "DOMNodeRemoved")) {
-        const node = parser.mutationEventRelatedNode(event) catch return orelse return;
-        if (parser.nodeType(node) != .element) {
-            return;
-        }
-
-        const el: *parser.Element = @ptrCast(node);
-        if (self.removeObserved(el)) {
-            // It _was_ observed, it no longer is in our root, but if it was
-            // to get re-added, it should be observed again (I think), so
-            // we add it to our pending list
-            try self.pending_elements.append(self.page.arena, el);
-        }
-
-        return;
-    }
-
-    // impossible event type
-    unreachable;
-}
-
-// Exists to skip the checks made _observe when called from a DOMNodeInserted
-// event. In such events, the event handler has alread done the necessary
-// checks.
-fn forceObserve(self: *IntersectionObserver, target: *parser.Element) !void {
-    try self.observed_entries.append(self.page.arena, .{
-        .page = self.page,
-        .root = self.root,
-        .target = target,
-    });
-
-    var result: js.Function.Result = undefined;
-    self.callback.tryCall(void, .{self.observed_entries.items}, &result) catch {
-        log.debug(.user_script, "callback error", .{
-            .err = result.exception,
-            .stack = result.stack,
-            .source = "intersection observer",
-        });
-    };
-}
-
-fn removeObserved(self: *IntersectionObserver, target: *parser.Element) bool {
-    for (self.observed_entries.items, 0..) |*observer, index| {
-        if (observer.target == target) {
-            _ = self.observed_entries.swapRemove(index);
-            return true;
-        }
-    }
-    return false;
-}
-
-fn removePending(self: *IntersectionObserver, target: *parser.Element) bool {
-    for (self.pending_elements.items, 0..) |el, index| {
-        if (el == target) {
-            _ = self.pending_elements.swapRemove(index);
-            return true;
-        }
-    }
-    return false;
-}
-
-const IntersectionObserverOptions = struct {
-    root: ?*parser.Node = null, // Element or Document
-    rootMargin: ?[]const u8 = "0px 0px 0px 0px",
-    threshold: ?Threshold = .{ .single = 0.0 },
-
-    const Threshold = union(enum) {
-        single: f32,
-        list: []const f32,
-    };
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Entry
-// https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
-pub const Entry = struct {
-    page: *Page,
-    root: *parser.Node,
-    target: *parser.Element,
-
-    // 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 Entry) !Element.DOMRect {
-        return Element._getBoundingClientRect(self.target, self.page);
-    }
-
-    // Returns the ratio of the intersectionRect to the boundingClientRect.
-    pub fn get_intersectionRatio(_: *const Entry) f32 {
-        return 1.0;
-    }
-
-    // Returns a DOMRectReadOnly representing the target's visible area.
-    pub fn get_intersectionRect(self: *const Entry) !Element.DOMRect {
-        return Element._getBoundingClientRect(self.target, self.page);
-    }
-
-    // A Boolean value which is true if the target element intersects with the
-    // intersection observer's root. If this is true, then, the
-    // Entry 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 Entry) bool {
-        return true;
-    }
-
-    // Returns a DOMRectReadOnly for the intersection observer's root.
-    pub fn get_rootBounds(self: *const Entry) !Element.DOMRect {
-        const root = self.root;
-        if (@intFromPtr(root) == @intFromPtr(self.page.window.document)) {
-            return self.page.renderer.boundingRect();
-        }
-
-        const root_type = 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 Element._getBoundingClientRect(element, self.page);
-    }
-
-    // The Element whose intersection with the root changed.
-    pub fn get_target(self: *const Entry) *parser.Element {
-        return self.target;
-    }
-
-    // TODO: pub fn get_time(self: *const Entry)
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: DOM.IntersectionObserver" {
-    try testing.htmlRunner("dom/intersection_observer.html");
-}
--- a/src/browser/dom/MessageChannel.zig
+++ b/src/browser/dom/MessageChannel.zig
@@ -1,288 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../../log.zig");
-const parser = @import("../netsurf.zig");
-
-const js = @import("../js/js.zig");
-const Page = @import("../page.zig").Page;
-const EventTarget = @import("../dom/event_target.zig").EventTarget;
-const EventHandler = @import("../events/event.zig").EventHandler;
-
-const Allocator = std.mem.Allocator;
-
-const MAX_QUEUE_SIZE = 10;
-
-pub const Interfaces = .{ MessageChannel, MessagePort };
-
-const MessageChannel = @This();
-
-port1: *MessagePort,
-port2: *MessagePort,
-
-pub fn constructor(page: *Page) !MessageChannel {
-    // Why do we allocate this rather than storing directly in the struct?
-    // https://github.com/lightpanda-io/project/discussions/165
-    const port1 = try page.arena.create(MessagePort);
-    const port2 = try page.arena.create(MessagePort);
-    port1.* = .{
-        .pair = port2,
-    };
-    port2.* = .{
-        .pair = port1,
-    };
-
-    return .{
-        .port1 = port1,
-        .port2 = port2,
-    };
-}
-
-pub fn get_port1(self: *const MessageChannel) *MessagePort {
-    return self.port1;
-}
-
-pub fn get_port2(self: *const MessageChannel) *MessagePort {
-    return self.port2;
-}
-
-pub const MessagePort = struct {
-    pub const prototype = *EventTarget;
-
-    proto: parser.EventTargetTBase = .{ .internal_target_type = .message_port },
-
-    pair: *MessagePort,
-    closed: bool = false,
-    started: bool = false,
-    onmessage_cbk: ?js.Function = null,
-    onmessageerror_cbk: ?js.Function = null,
-    // This is the queue of messages to dispatch to THIS MessagePort when the
-    // MessagePort is started.
-    queue: std.ArrayListUnmanaged(js.Object) = .empty,
-
-    pub const PostMessageOption = union(enum) {
-        transfer: js.Object,
-        options: Opts,
-
-        pub const Opts = struct {
-            transfer: js.Object,
-        };
-    };
-
-    pub fn _postMessage(self: *MessagePort, obj: js.Object, opts_: ?PostMessageOption, page: *Page) !void {
-        if (self.closed) {
-            return;
-        }
-
-        if (opts_ != null) {
-            log.warn(.web_api, "not implemented", .{ .feature = "MessagePort postMessage options" });
-        }
-
-        try self.pair.dispatchOrQueue(obj, page.arena);
-    }
-
-    // Start impacts the ability to receive a message.
-    // Given pair1 (started) and pair2 (not started), then:
-    //    pair2.postMessage('x'); //will be dispatched to pair1.onmessage
-    //    pair1.postMessage('x'); // will be queued until pair2 is started
-    pub fn _start(self: *MessagePort) !void {
-        if (self.started) {
-            return;
-        }
-        self.started = true;
-        for (self.queue.items) |data| {
-            try self.dispatch(data);
-        }
-        // we'll never use this queue again, but it's allocated with an arena
-        // we don't even need to clear it, but it seems a bit safer to do at
-        // least that
-        self.queue.clearRetainingCapacity();
-    }
-
-    // Closing seems to stop both the publishing and receiving of messages,
-    // effectively rendering the channel useless. It cannot be reversed.
-    pub fn _close(self: *MessagePort) void {
-        self.closed = true;
-        self.pair.closed = true;
-    }
-
-    pub fn get_onmessage(self: *MessagePort) ?js.Function {
-        return self.onmessage_cbk;
-    }
-    pub fn get_onmessageerror(self: *MessagePort) ?js.Function {
-        return self.onmessageerror_cbk;
-    }
-
-    pub fn set_onmessage(self: *MessagePort, listener: EventHandler.Listener, page: *Page) !void {
-        if (self.onmessage_cbk) |cbk| {
-            try self.unregister("message", cbk.id);
-        }
-        self.onmessage_cbk = try self.register(page.arena, "message", listener);
-
-        // When onmessage is set directly, then it's like start() was called.
-        // If addEventListener('message') is used, the app has to call start()
-        // explicitly.
-        try self._start();
-    }
-
-    pub fn set_onmessageerror(self: *MessagePort, listener: EventHandler.Listener, page: *Page) !void {
-        if (self.onmessageerror_cbk) |cbk| {
-            try self.unregister("messageerror", cbk.id);
-        }
-        self.onmessageerror_cbk = try self.register(page.arena, "messageerror", listener);
-    }
-
-    // called from our pair. If port1.postMessage("x") is called, then this
-    // will be called on port2.
-    fn dispatchOrQueue(self: *MessagePort, obj: js.Object, arena: Allocator) !void {
-        // our pair should have checked this already
-        std.debug.assert(self.closed == false);
-
-        if (self.started) {
-            return self.dispatch(try obj.persist());
-        }
-
-        if (self.queue.items.len > MAX_QUEUE_SIZE) {
-            // This isn't part of the spec, but not putting a limit is reckless
-            return error.MessageQueueLimit;
-        }
-        return self.queue.append(arena, try obj.persist());
-    }
-
-    fn dispatch(self: *MessagePort, obj: js.Object) !void {
-        // obj is already persisted, don't use `MessageEvent.constructor`, but
-        // go directly to `init`, which assumes persisted objects.
-        var evt = try MessageEvent.init(.{ .data = obj });
-        _ = try parser.eventTargetDispatchEvent(
-            parser.toEventTarget(MessagePort, self),
-            @as(*parser.Event, @ptrCast(&evt)),
-        );
-    }
-
-    fn register(
-        self: *MessagePort,
-        alloc: Allocator,
-        typ: []const u8,
-        listener: EventHandler.Listener,
-    ) !?js.Function {
-        const target = @as(*parser.EventTarget, @ptrCast(self));
-        const eh = (try EventHandler.register(alloc, target, typ, listener, null)) orelse unreachable;
-        return eh.callback;
-    }
-
-    fn unregister(self: *MessagePort, typ: []const u8, cbk_id: usize) !void {
-        const et = @as(*parser.EventTarget, @ptrCast(self));
-        const lst = try parser.eventTargetHasListener(et, typ, false, cbk_id);
-        if (lst == null) {
-            return;
-        }
-        try parser.eventTargetRemoveEventListener(et, typ, lst.?, false);
-    }
-};
-
-pub const MessageEvent = struct {
-    const Event = @import("../events/event.zig").Event;
-    const DOMException = @import("exceptions.zig").DOMException;
-
-    pub const prototype = *Event;
-    pub const Exception = DOMException;
-    pub const union_make_copy = true;
-
-    proto: parser.Event,
-    data: ?js.Object,
-
-    // You would think if port1 sends to port2, the source would be port2
-    // (which is how I read the documentation), but it appears to always be
-    // null. It can always be set explicitly via the constructor;
-    source: ?js.Object,
-
-    origin: []const u8,
-
-    // This is used for Server-Sent events. Appears to always be an empty
-    // string for MessagePort messages.
-    last_event_id: []const u8,
-
-    // This might be related to the "transfer" option of postMessage which
-    // we don't yet support. For "normal" message, it's always an empty array.
-    // Though it could be set explicitly via the constructor
-    ports: []*MessagePort,
-
-    const Options = struct {
-        data: ?js.Object = null,
-        source: ?js.Object = null,
-        origin: []const u8 = "",
-        lastEventId: []const u8 = "",
-        ports: []*MessagePort = &.{},
-    };
-
-    pub fn constructor(opts: Options) !MessageEvent {
-        return init(.{
-            .data = if (opts.data) |obj| try obj.persist() else null,
-            .source = if (opts.source) |obj| try obj.persist() else null,
-            .ports = opts.ports,
-            .origin = opts.origin,
-            .lastEventId = opts.lastEventId,
-        });
-    }
-
-    // This is like "constructor", but it assumes js.Objects have already been
-    // persisted. Necessary because this `new MessageEvent()` can be called
-    // directly from JS OR from a port.postMessage. In the latter case, data
-    // may have already been persisted (as it might need to be queued);
-    fn init(opts: Options) !MessageEvent {
-        const event = try parser.eventCreate();
-        defer parser.eventDestroy(event);
-        try parser.eventInit(event, "message", .{});
-        parser.eventSetInternalType(event, .message_event);
-
-        return .{
-            .proto = event.*,
-            .data = opts.data,
-            .source = opts.source,
-            .ports = opts.ports,
-            .origin = opts.origin,
-            .last_event_id = opts.lastEventId,
-        };
-    }
-
-    pub fn get_data(self: *const MessageEvent) !?js.Object {
-        return self.data;
-    }
-
-    pub fn get_origin(self: *const MessageEvent) []const u8 {
-        return self.origin;
-    }
-
-    pub fn get_source(self: *const MessageEvent) ?js.Object {
-        return self.source;
-    }
-
-    pub fn get_ports(self: *const MessageEvent) []*MessagePort {
-        return self.ports;
-    }
-
-    pub fn get_lastEventId(self: *const MessageEvent) []const u8 {
-        return self.last_event_id;
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: DOM.MessageChannel" {
-    try testing.htmlRunner("dom/message_channel.html");
-}
--- a/src/browser/dom/attribute.zig
+++ b/src/browser/dom/attribute.zig
@@ -25,24 +25,24 @@ pub const Attr = struct {
    pub const prototype = *Node;
    pub const subtype = .node;

-    pub fn get_namespaceURI(self: *parser.Attribute) ?[]const u8 {
-        return parser.nodeGetNamespace(parser.attributeToNode(self));
+    pub fn get_namespaceURI(self: *parser.Attribute) !?[]const u8 {
+        return try parser.nodeGetNamespace(parser.attributeToNode(self));
    }

-    pub fn get_prefix(self: *parser.Attribute) ?[]const u8 {
-        return parser.nodeGetPrefix(parser.attributeToNode(self));
+    pub fn get_prefix(self: *parser.Attribute) !?[]const u8 {
+        return try parser.nodeGetPrefix(parser.attributeToNode(self));
    }

    pub fn get_localName(self: *parser.Attribute) ![]const u8 {
-        return parser.nodeLocalName(parser.attributeToNode(self));
+        return try parser.nodeLocalName(parser.attributeToNode(self));
    }

    pub fn get_name(self: *parser.Attribute) ![]const u8 {
-        return parser.attributeGetName(self);
+        return try parser.attributeGetName(self);
    }

    pub fn get_value(self: *parser.Attribute) !?[]const u8 {
-        return parser.attributeGetValue(self);
+        return try parser.attributeGetValue(self);
    }

    pub fn set_value(self: *parser.Attribute, v: []const u8) !?[]const u8 {
@@ -70,6 +70,32 @@ pub const Attr = struct {
 // -----

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Attribute" {
-    try testing.htmlRunner("dom/attribute.html");
+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.
+        //.{ "a.value = 'nok'", "nok" },
+        .{ "a.ownerElement", "null" },
+    }, .{});
+
+    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" },
+    }, .{});
 }
--- a/src/browser/dom/character_data.zig
+++ b/src/browser/dom/character_data.zig
@@ -24,8 +24,7 @@ const Node = @import("node.zig").Node;
 const Comment = @import("comment.zig").Comment;
 const Text = @import("text.zig");
 const ProcessingInstruction = @import("processing_instruction.zig").ProcessingInstruction;
-const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
+const HTMLElem = @import("../html/elements.zig");

 // CharacterData interfaces
 pub const Interfaces = .{
@@ -50,26 +49,26 @@ pub const CharacterData = struct {
        return try parser.characterDataLength(self);
    }

-    pub fn get_nextElementSibling(self: *parser.CharacterData) !?ElementUnion {
-        const res = parser.nodeNextElementSibling(parser.characterDataToNode(self));
+    pub fn get_nextElementSibling(self: *parser.CharacterData) !?HTMLElem.Union {
+        const res = try parser.nodeNextElementSibling(parser.characterDataToNode(self));
        if (res == null) {
            return null;
        }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
    }

-    pub fn get_previousElementSibling(self: *parser.CharacterData) !?ElementUnion {
-        const res = parser.nodePreviousElementSibling(parser.characterDataToNode(self));
+    pub fn get_previousElementSibling(self: *parser.CharacterData) !?HTMLElem.Union {
+        const res = try parser.nodePreviousElementSibling(parser.characterDataToNode(self));
        if (res == null) {
            return null;
        }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
    }

    // Read/Write attributes

-    pub fn get_data(self: *parser.CharacterData) []const u8 {
-        return parser.characterDataData(self);
+    pub fn get_data(self: *parser.CharacterData) ![]const u8 {
+        return try parser.characterDataData(self);
    }

    pub fn set_data(self: *parser.CharacterData, data: []const u8) !void {
@@ -96,18 +95,18 @@ pub const CharacterData = struct {
    }

    pub fn _substringData(self: *parser.CharacterData, offset: u32, count: u32) ![]const u8 {
-        return parser.characterDataSubstringData(self, offset, count);
+        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 (parser.nodeType(@ptrCast(@alignCast(self))) != parser.nodeType(other_node)) {
+    pub fn _isEqualNode(self: *parser.CharacterData, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(@alignCast(@ptrCast(self))) != try parser.nodeType(other_node)) {
            return false;
        }

        const other: *parser.CharacterData = @ptrCast(other_node);
-        if (std.mem.eql(u8, get_data(self), get_data(other)) == false) {
+        if (std.mem.eql(u8, try get_data(self), try get_data(other)) == false) {
            return false;
        }

@@ -129,6 +128,69 @@ pub const CharacterData = struct {
 // -----

 const testing = @import("../../testing.zig");
-test "Browser: DOM.CharacterData" {
-    try testing.htmlRunner("dom/character_data.html");
+test "Browser.DOM.CharacterData" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let link = document.getElementById('link')", "undefined" },
+        .{ "let cdata = link.firstChild", "undefined" },
+        .{ "cdata.data", "OK" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.data = 'OK modified'", "OK modified" },
+        .{ "cdata.data === 'OK modified'", "true" },
+        .{ "cdata.data = 'OK'", "OK" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.length === 2", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.nextElementSibling === null", "true" },
+        // create a next element
+        .{ "let next = document.createElement('a')", "undefined" },
+        .{ "link.appendChild(next, cdata) !== undefined", "true" },
+        .{ "cdata.nextElementSibling.localName === 'a' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.previousElementSibling === null", "true" },
+        // create a prev element
+        .{ "let prev = document.createElement('div')", "undefined" },
+        .{ "link.insertBefore(prev, cdata) !== undefined", "true" },
+        .{ "cdata.previousElementSibling.localName === 'div' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.appendData(' modified')", "undefined" },
+        .{ "cdata.data === 'OK modified' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.deleteData('OK'.length, ' modified'.length)", "undefined" },
+        .{ "cdata.data == 'OK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.insertData('OK'.length-1, 'modified')", "undefined" },
+        .{ "cdata.data == 'OmodifiedK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.replaceData('OK'.length-1, 'modified'.length, 'replaced')", "undefined" },
+        .{ "cdata.data == 'OreplacedK'", "true" },
+    }, .{});
+
+    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" },
+    }, .{});
 }
--- a/src/browser/dom/comment.zig
+++ b/src/browser/dom/comment.zig
@@ -40,6 +40,15 @@ pub const Comment = struct {
 // -----

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Comment" {
-    try testing.htmlRunner("dom/comment.html");
+test "Browser.DOM.Comment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let comment = new Comment('foo')", "undefined" },
+        .{ "comment.data", "foo" },
+
+        .{ "let emptycomment = new Comment()", "undefined" },
+        .{ "emptycomment.data", "" },
+    }, .{});
 }
--- a/src/browser/dom/css.zig
+++ b/src/browser/dom/css.zig
@@ -38,7 +38,7 @@ pub fn querySelector(alloc: std.mem.Allocator, n: *parser.Node, selector: []cons

    var m = MatchFirst{};

-    _ = try css.matchFirst(&ps, Node{ .node = n }, &m);
+    _ = try css.matchFirst(ps, Node{ .node = n }, &m);
    return m.n;
 }

@@ -75,6 +75,6 @@ pub fn querySelectorAll(alloc: std.mem.Allocator, n: *parser.Node, selector: []c
    var m = MatchAll.init(alloc);
    defer m.deinit();

-    try css.matchAll(&ps, Node{ .node = n }, &m);
+    try css.matchAll(ps, Node{ .node = n }, &m);
    return m.toOwnedList();
 }
--- a/src/browser/dom/document.zig
+++ b/src/browser/dom/document.zig
@@ -17,9 +17,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const log = @import("../../log.zig");

-const js = @import("../js/js.zig");
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;

@@ -33,11 +32,9 @@ const css = @import("css.zig");
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
 const TreeWalker = @import("tree_walker.zig").TreeWalker;
-const CSSStyleSheet = @import("../cssom/CSSStyleSheet.zig");
-const NodeIterator = @import("node_iterator.zig").NodeIterator;
 const Range = @import("range.zig").Range;

-const CustomEvent = @import("../events/custom_event.zig").CustomEvent;
+const Env = @import("../env.zig").Env;

 const DOMImplementation = @import("implementation.zig").DOMImplementation;

@@ -111,23 +108,13 @@ pub const Document = struct {
        return try parser.documentGetDoctype(self);
    }

-    pub fn _createEvent(_: *parser.Document, eventCstr: []const u8) !union(enum) {
-        base: *parser.Event,
-        custom: CustomEvent,
-    } {
-        const eqlIgnoreCase = std.ascii.eqlIgnoreCase;
-
-        if (eqlIgnoreCase(eventCstr, "Event") or eqlIgnoreCase(eventCstr, "Events") or eqlIgnoreCase(eventCstr, "HTMLEvents")) {
-            return .{ .base = try parser.eventCreate() };
+    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();
        }
-
-        // Not documented in MDN but supported in Chrome.
-        // This is actually both instance of `Event` and `CustomEvent`.
-        if (std.ascii.eqlIgnoreCase(eventCstr, "CustomEvent")) {
-            return .{ .custom = try CustomEvent.constructor(eventCstr, null) };
-        }
-
-        return error.NotSupported;
+        return parser.DOMError.NotSupported;
    }

    pub fn _getElementById(self: *parser.Document, id: []const u8) !?ElementUnion {
@@ -135,11 +122,28 @@ pub const Document = struct {
        return try Element.toInterface(e);
    }

-    pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
-        // The element’s namespace is the HTML namespace when document is an HTML document
-        // https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0
-        const e = try parser.documentCreateElementNS(self, "http://www.w3.org/1999/xhtml", tag_name);
-        return Element.toInterface(e);
+    const CreateElementResult = union(enum) {
+        element: ElementUnion,
+        custom: Env.JsObject,
+    };
+
+    pub fn _createElement(self: *parser.Document, tag_name: []const u8, page: *Page) !CreateElementResult {
+        const custom_element = page.window.custom_elements._get(tag_name) orelse {
+            const e = try parser.documentCreateElement(self, tag_name);
+            return .{ .element = try Element.toInterface(e) };
+        };
+
+        var result: Env.Function.Result = undefined;
+        const js_obj = custom_element.newInstance(&result) catch |err| {
+            log.fatal(.user_script, "newInstance error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .tag_name = tag_name,
+                .source = "createElement",
+            });
+            return err;
+        };
+        return .{ .custom = js_obj };
    }

    pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {
@@ -155,16 +159,20 @@ pub const Document = struct {
    // 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: js.String) !collection.HTMLCollection {
-        return collection.HTMLCollectionByTagName(parser.documentToNode(self), tag_name.string, .{
-            .include_root = true,
-        });
+    pub fn _getElementsByTagName(
+        self: *parser.Document,
+        tag_name: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentToNode(self), tag_name, true);
    }

-    pub fn _getElementsByClassName(self: *parser.Document, class_names: js.String) !collection.HTMLCollection {
-        return collection.HTMLCollectionByClassName(parser.documentToNode(self), class_names.string, .{
-            .include_root = true,
-        });
+    pub fn _getElementsByClassName(
+        self: *parser.Document,
+        classNames: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByClassName(page.arena, parser.documentToNode(self), classNames, true);
    }

    pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
@@ -208,9 +216,7 @@ pub const Document = struct {
    // ParentNode
    // https://dom.spec.whatwg.org/#parentnode
    pub fn get_children(self: *parser.Document) !collection.HTMLCollection {
-        return collection.HTMLCollectionChildren(parser.documentToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionChildren(parser.documentToNode(self), false);
    }

    pub fn get_firstElementChild(self: *parser.Document) !?ElementUnion {
@@ -254,23 +260,19 @@ pub const Document = struct {
        return Node.replaceChildren(parser.documentToNode(self), nodes);
    }

-    pub fn _createTreeWalker(_: *parser.Document, root: *parser.Node, what_to_show: ?TreeWalker.WhatToShow, filter: ?TreeWalker.TreeWalkerOpts) !TreeWalker {
-        return TreeWalker.init(root, what_to_show, filter);
-    }
-
-    pub fn _createNodeIterator(_: *parser.Document, root: *parser.Node, what_to_show: ?NodeIterator.WhatToShow, filter: ?NodeIterator.NodeIteratorOpts) !NodeIterator {
-        return NodeIterator.init(root, what_to_show, filter);
+    pub fn _createTreeWalker(_: *parser.Document, root: *parser.Node, what_to_show: ?u32, filter: ?TreeWalker.TreeWalkerOpts) !TreeWalker {
+        return try TreeWalker.init(root, what_to_show, filter);
    }

    pub fn getActiveElement(self: *parser.Document, page: *Page) !?*parser.Element {
-        if (page.getNodeState(@ptrCast(@alignCast(self)))) |state| {
+        if (page.getNodeState(@alignCast(@ptrCast(self)))) |state| {
            if (state.active_element) |ae| {
                return ae;
            }
        }

        if (try parser.documentHTMLBody(page.window.document)) |body| {
-            return @ptrCast(@alignCast(body));
+            return @alignCast(@ptrCast(body));
        }

        return try parser.documentGetDocumentElement(self);
@@ -286,100 +288,210 @@ pub const Document = struct {
    // we could look for the "disabled" attribute, but that's only meaningful
    // on certain types, and libdom's vtable doesn't seem to expose this.
    pub fn setFocus(self: *parser.Document, e: *parser.ElementHTML, page: *Page) !void {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
        state.active_element = @ptrCast(e);
    }

    pub fn _createRange(_: *parser.Document, page: *Page) Range {
        return Range.constructor(page);
    }
-
-    // TODO: dummy implementation
-    pub fn get_styleSheets(_: *parser.Document) []CSSStyleSheet {
-        return &.{};
-    }
-
-    pub fn get_adoptedStyleSheets(self: *parser.Document, page: *Page) !js.Object {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        if (state.adopted_style_sheets) |obj| {
-            return obj;
-        }
-
-        const obj = try page.js.createArray(0).persist();
-        state.adopted_style_sheets = obj;
-        return obj;
-    }
-
-    pub fn set_adoptedStyleSheets(self: *parser.Document, sheets: js.Object, page: *Page) !void {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        state.adopted_style_sheets = try sheets.persist();
-    }
-
-    pub fn _hasFocus(_: *parser.Document) bool {
-        log.debug(.web_api, "not implemented", .{ .feature = "Document hasFocus" });
-        return true;
-    }
-
-    pub fn _open(_: *parser.Document, page: *Page) !*parser.DocumentHTML {
-        if (page.open) {
-            return page.window.document;
-        }
-
-        // This implementation is invalid.
-        // According to MDN, we should cleanup registered listeners.
-        // So we sould cleanup previous DOM memory.
-        // But this implementation is more simple for now.
-        const html_doc = try parser.documentHTMLParseFromStr("");
-        try page.setDocument(html_doc);
-        page.open = true;
-
-        return page.window.document;
-    }
-
-    pub fn _close(_: *parser.Document, page: *Page) !void {
-        page.open = false;
-    }
-
-    pub fn _write(self: *parser.Document, str: []const u8, page: *Page) !void {
-        _ = try _open(self, page);
-
-        const document = parser.documentHTMLToDocument(page.window.document);
-        const fragment = try parser.documentParseFragmentFromStr(document, str);
-        const fragment_node = parser.documentFragmentToNode(fragment);
-
-        const fragment_html = parser.nodeFirstChild(fragment_node) orelse return;
-        const fragment_head = parser.nodeFirstChild(fragment_html) orelse return;
-        const fragment_body = parser.nodeNextSibling(fragment_head) orelse return;
-
-        const document_node = parser.documentToNode(document);
-        const document_html = parser.nodeFirstChild(document_node) orelse return;
-        const document_head = parser.nodeFirstChild(document_html) orelse return;
-        const document_body = parser.nodeNextSibling(document_head) orelse return;
-
-        {
-            const children = try parser.nodeGetChildNodes(fragment_head);
-            // always index 0, because nodeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            while (parser.nodeListItem(children, 0)) |child| {
-                _ = try parser.nodeAppendChild(document_head, child);
-            }
-        }
-
-        {
-            const children = try parser.nodeGetChildNodes(fragment_body);
-            // always index 0, because nodeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            while (parser.nodeListItem(children, 0)) |child| {
-                _ = try parser.nodeAppendChild(document_body, child);
-            }
-        }
-    }
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Document" {
-    try testing.htmlRunner("dom/document.html");
-}
-test "Browser: DOM.Document.write" {
-    try testing.htmlRunner("dom/document_write.html");
+test "Browser.DOM.Document" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .url = "about:blank",
+    });
+    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",
+        },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.activeElement === document.body", "true" },
+        .{ "document.getElementById('link').focus()", "undefined" },
+        .{ "document.activeElement === document.getElementById('link')", "true" },
+    }, .{});
+
+    // 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, .{});
 }
--- a/src/browser/dom/document_fragment.zig
+++ b/src/browser/dom/document_fragment.zig
@@ -22,7 +22,6 @@ const Page = @import("../page.zig").Page;
 const NodeList = @import("nodelist.zig").NodeList;
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
-const collection = @import("html_collection.zig");

 const Node = @import("node.zig").Node;

@@ -38,8 +37,8 @@ pub const DocumentFragment = struct {
        );
    }

-    pub fn _isEqualNode(self: *parser.DocumentFragment, other_node: *parser.Node) bool {
-        const other_type = parser.nodeType(other_node);
+    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;
        }
@@ -72,25 +71,41 @@ pub const DocumentFragment = struct {
    pub fn _querySelectorAll(self: *parser.DocumentFragment, selector: []const u8, page: *Page) !NodeList {
        return css.querySelectorAll(page.arena, parser.documentFragmentToNode(self), selector);
    }
-
-    pub fn get_childElementCount(self: *parser.DocumentFragment) !u32 {
-        var children = try get_children(self);
-        return children.get_length();
-    }
-
-    pub fn get_children(self: *parser.DocumentFragment) !collection.HTMLCollection {
-        return collection.HTMLCollectionChildren(parser.documentFragmentToNode(self), .{
-            .include_root = false,
-        });
-    }
-
-    pub fn _getElementById(self: *parser.DocumentFragment, id: []const u8) !?ElementUnion {
-        const e = try parser.nodeGetElementById(@ptrCast(@alignCast(self)), id) orelse return null;
-        return try Element.toInterface(e);
-    }
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.DocumentFragment" {
-    try testing.htmlRunner("dom/document_fragment.html");
+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" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let f = document.createDocumentFragment()", null },
+        .{ "let d = document.createElement('div');", null },
+        .{ "d.id = 'x';", null },
+        .{ "document.getElementById('x') == null;", "true" },
+
+        .{ "f.append(d);", null },
+        .{ "document.getElementById('x') == null;", "true" },
+
+        .{ "document.getElementsByTagName('body')[0].append(f.cloneNode(true));", null },
+        .{ "document.getElementById('x') != null;", "true" },
+
+        .{ "document.querySelector('.hello')", "null" },
+        .{ "document.querySelectorAll('.hello').length", "0" },
+
+        .{ "document.querySelector('#x').id", "x" },
+        .{ "document.querySelectorAll('#x')[0].id", "x" },
+    }, .{});
 }
--- a/src/browser/dom/document_type.zig
+++ b/src/browser/dom/document_type.zig
@@ -29,21 +29,21 @@ pub const DocumentType = struct {
    pub const subtype = .node;

    pub fn get_name(self: *parser.DocumentType) ![]const u8 {
-        return parser.documentTypeGetName(self);
+        return try parser.documentTypeGetName(self);
    }

-    pub fn get_publicId(self: *parser.DocumentType) []const u8 {
-        return parser.documentTypeGetPublicId(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 parser.documentTypeGetSystemId(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 (parser.nodeType(other_node) != .document_type) {
+        if (try parser.nodeType(other_node) != .document_type) {
            return false;
        }

@@ -51,10 +51,10 @@ pub const DocumentType = struct {
        if (std.mem.eql(u8, try get_name(self), try get_name(other)) == false) {
            return false;
        }
-        if (std.mem.eql(u8, get_publicId(self), get_publicId(other)) == false) {
+        if (std.mem.eql(u8, try get_publicId(self), try get_publicId(other)) == false) {
            return false;
        }
-        if (std.mem.eql(u8, get_systemId(self), get_systemId(other)) == false) {
+        if (std.mem.eql(u8, try get_systemId(self), try get_systemId(other)) == false) {
            return false;
        }
        return true;
@@ -62,6 +62,19 @@ pub const DocumentType = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.DocumentType" {
-    try testing.htmlRunner("dom/document_type.html");
+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" },
+    }, .{});
 }
--- a/src/browser/dom/dom.zig
+++ b/src/browser/dom/dom.zig
@@ -25,9 +25,9 @@ const NodeList = @import("nodelist.zig");
 const Node = @import("node.zig");
 const ResizeObserver = @import("resize_observer.zig");
 const MutationObserver = @import("mutation_observer.zig");
+const IntersectionObserver = @import("intersection_observer.zig");
 const DOMParser = @import("dom_parser.zig").DOMParser;
 const TreeWalker = @import("tree_walker.zig").TreeWalker;
-const NodeIterator = @import("node_iterator.zig").NodeIterator;
 const NodeFilter = @import("node_filter.zig").NodeFilter;
 const PerformanceObserver = @import("performance_observer.zig").PerformanceObserver;

@@ -43,14 +43,11 @@ pub const Interfaces = .{
    Node.Interfaces,
    ResizeObserver.Interfaces,
    MutationObserver.Interfaces,
+    IntersectionObserver.Interfaces,
    DOMParser,
    TreeWalker,
-    NodeIterator,
    NodeFilter,
    @import("performance.zig").Interfaces,
    PerformanceObserver,
    @import("range.zig").Interfaces,
-    @import("Animation.zig"),
-    @import("MessageChannel.zig").Interfaces,
-    @import("IntersectionObserver.zig").Interfaces,
 };
--- a/src/browser/dom/dom_parser.zig
+++ b/src/browser/dom/dom_parser.zig
@@ -36,6 +36,12 @@ pub const DOMParser = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Parser" {
-    try testing.htmlRunner("dom/dom_parser.html");
+test "Browser.DOM.DOMParser" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const dp = new DOMParser()", "undefined" },
+        .{ "dp.parseFromString('<div>abc</div>', 'text/html')", "[object HTMLDocument]" },
+    }, .{});
 }
--- a/src/browser/dom/element.zig
+++ b/src/browser/dom/element.zig
@@ -18,7 +18,6 @@

 const std = @import("std");

-const js = @import("../js/js.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;

@@ -31,10 +30,6 @@ const Node = @import("node.zig").Node;
 const Walker = @import("walker.zig").WalkerDepthFirst;
 const NodeList = @import("nodelist.zig").NodeList;
 const HTMLElem = @import("../html/elements.zig");
-const ShadowRoot = @import("../dom/shadow_root.zig").ShadowRoot;
-
-const Animation = @import("Animation.zig");
-
 pub const Union = @import("../html/elements.zig").Union;

 // WEB IDL https://dom.spec.whatwg.org/#element
@@ -55,44 +50,19 @@ pub const Element = struct {
    };

    pub fn toInterface(e: *parser.Element) !Union {
-        return toInterfaceT(Union, e);
-    }
-
-    pub fn toInterfaceT(comptime T: type, e: *parser.Element) !T {
-        const tagname = try parser.elementGetTagName(e) orelse {
-            // If the owner's document is HTML, assume we have an HTMLElement.
-            const doc = parser.nodeOwnerDocument(parser.elementToNode(e));
-            if (doc != null and !doc.?.is_html) {
-                return .{ .HTMLElement = @as(*parser.ElementHTML, @ptrCast(e)) };
-            }
-
-            return .{ .Element = e };
-        };
-
-        // TODO SVGElement and MathML are not supported yet.
-
-        const tag = parser.Tag.fromString(tagname) catch {
-            // If the owner's document is HTML, assume we have an HTMLElement.
-            const doc = parser.nodeOwnerDocument(parser.elementToNode(e));
-            if (doc != null and doc.?.is_html) {
-                return .{ .HTMLElement = @as(*parser.ElementHTML, @ptrCast(e)) };
-            }
-
-            return .{ .Element = e };
-        };
-
-        return HTMLElem.toInterfaceFromTag(T, e, tag);
+        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 parser.nodeGetNamespace(parser.elementToNode(self));
+    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 parser.nodeGetPrefix(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 {
@@ -103,14 +73,6 @@ pub const Element = struct {
        return try parser.nodeName(parser.elementToNode(self));
    }

-    pub fn get_dir(self: *parser.Element) ![]const u8 {
-        return try parser.elementGetAttribute(self, "dir") orelse "";
-    }
-
-    pub fn set_dir(self: *parser.Element, dir: []const u8) !void {
-        return parser.elementSetAttribute(self, "dir", dir);
-    }
-
    pub fn get_id(self: *parser.Element) ![]const u8 {
        return try parser.elementGetAttribute(self, "id") orelse "";
    }
@@ -135,10 +97,6 @@ pub const Element = struct {
        return try parser.elementSetAttribute(self, "slot", slot);
    }

-    pub fn get_assignedSlot(self: *parser.Element, page: *const Page) !?*parser.Slot {
-        return @import("../SlotChangeMonitor.zig").findSlot(self, page);
-    }
-
    pub fn get_classList(self: *parser.Element) !*parser.TokenList {
        return try parser.tokenListCreate(self, "class");
    }
@@ -149,157 +107,36 @@ pub const Element = struct {
    }

    pub fn get_innerHTML(self: *parser.Element, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeChildren(parser.elementToNode(self), .{}, &aw.writer);
-        return aw.written();
+        var buf = std.ArrayList(u8).init(page.arena);
+        try dump.writeChildren(parser.elementToNode(self), buf.writer());
+        return buf.items;
    }

    pub fn get_outerHTML(self: *parser.Element, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeNode(parser.elementToNode(self), .{}, &aw.writer);
-        return aw.written();
+        var buf = std.ArrayList(u8).init(page.arena);
+        try dump.writeNode(parser.elementToNode(self), buf.writer());
+        return buf.items;
    }

-    pub fn set_innerHTML(self: *parser.Element, str: []const u8, page: *Page) !void {
+    pub fn set_innerHTML(self: *parser.Element, str: []const u8) !void {
        const node = parser.elementToNode(self);
-        const doc = parser.nodeOwnerDocument(node) orelse return parser.DOMError.WrongDocument;
+        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);

-        const fragment_node = parser.documentFragmentToNode(fragment);
+        // get fragment body children
+        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;

-        // I'm not sure what the exact behavior is supposed to be. Initially,
-        // we were only copying the body of the document fragment. But it seems
-        // like head elements should be copied too. Specifically, some sites
-        // create script tags via innerHTML, which we need to capture.
-        // If you play with this in a browser, you should notice that the
-        // behavior is different depending on whether you're in a blank page
-        // or an actual document. In a blank page, something like:
-        //    x.innerHTML = '<script></script>';
-        // does _not_ create an empty script, but in a real page, it does. Weird.
-        const html = parser.nodeFirstChild(fragment_node) orelse return;
-        const head = parser.nodeFirstChild(html) orelse return;
-        const body = parser.nodeNextSibling(head) orelse return;
-
-        if (try parser.elementTag(self) == .template) {
-            // HTMLElementTemplate is special. We don't append these as children
-            // of the template, but instead set its content as the body of the
-            // fragment. Simpler to do this by copying the body children into
-            // a new fragment
-            const clean = try parser.documentCreateDocumentFragment(doc);
-            const children = try parser.nodeGetChildNodes(body);
-            // always index 0, because nodeAppendChild moves the node out of
+        // append children to the node
+        const ln = try parser.nodeListLength(children);
+        for (0..ln) |_| {
+            // always index 0, because ndoeAppendChild moves the node out of
            // the nodeList and into the new tree
-            while (parser.nodeListItem(children, 0)) |child| {
-                _ = try parser.nodeAppendChild(@ptrCast(@alignCast(clean)), child);
-            }
-
-            const state = try page.getOrCreateNodeState(node);
-            state.template_content = clean;
-            return;
-        }
-
-        // For any node other than a template, we copy the head and body elements
-        // as child nodes of the element
-        {
-            // First, copy some of the head element
-            const children = try parser.nodeGetChildNodes(head);
-            // always index 0, because nodeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            while (parser.nodeListItem(children, 0)) |child| {
-                _ = try parser.nodeAppendChild(node, child);
-            }
-        }
-
-        {
-            const children = try parser.nodeGetChildNodes(body);
-            // always index 0, because nodeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            while (parser.nodeListItem(children, 0)) |child| {
-                _ = try parser.nodeAppendChild(node, child);
-            }
-        }
-    }
-
-    /// Parses the given `input` string and inserts its children to an element at given `position`.
-    /// https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
-    ///
-    /// TODO: Support for XML parsing and `TrustedHTML` instances.
-    pub fn _insertAdjacentHTML(self: *parser.Element, position: []const u8, input: []const u8) !void {
-        const self_node = parser.elementToNode(self);
-        const doc = parser.nodeOwnerDocument(self_node) orelse {
-            return parser.DOMError.WrongDocument;
-        };
-
-        // Parse the fragment.
-        // Should return error.Syntax on fail?
-        const fragment = try parser.documentParseFragmentFromStr(doc, input);
-        const fragment_node = parser.documentFragmentToNode(fragment);
-
-        // We always get it wrapped like so:
-        // <html><head></head><body>{ ... }</body></html>
-        // None of the following can be null.
-        const maybe_html = parser.nodeFirstChild(fragment_node);
-        std.debug.assert(maybe_html != null);
-        const html = maybe_html orelse return;
-
-        const maybe_body = parser.nodeLastChild(html);
-        std.debug.assert(maybe_body != null);
-        const body = maybe_body orelse return;
-
-        const children = try parser.nodeGetChildNodes(body);
-
-        // * `target_node` is `*Node` (where we actually insert),
-        // * `prev_node` is `?*Node`.
-        const target_node, const prev_node = blk: {
-            // Prefer case-sensitive match.
-            // "beforeend" was the most common case in my tests; we might adjust the order
-            // depending on which ones websites prefer most.
-            if (std.mem.eql(u8, position, "beforeend")) {
-                break :blk .{ self_node, null };
-            }
-
-            if (std.mem.eql(u8, position, "afterbegin")) {
-                // Get the first child; null indicates there are no children.
-                const first_child = parser.nodeFirstChild(self_node);
-                break :blk .{ self_node, first_child };
-            }
-
-            if (std.mem.eql(u8, position, "beforebegin")) {
-                // The node must have a parent node in order to use this variant.
-                const parent = parser.nodeParentNode(self_node) orelse return error.NoModificationAllowed;
-                // Parent cannot be Document.
-                // Should have checks for document_fragment and document_type?
-                if (parser.nodeType(parent) == .document) {
-                    return error.NoModificationAllowed;
-                }
-
-                break :blk .{ parent, self_node };
-            }
-
-            if (std.mem.eql(u8, position, "afterend")) {
-                // The node must have a parent node in order to use this variant.
-                const parent = parser.nodeParentNode(self_node) orelse return error.NoModificationAllowed;
-                // Parent cannot be Document.
-                if (parser.nodeType(parent) == .document) {
-                    return error.NoModificationAllowed;
-                }
-                // Get the next sibling or null; null indicates our node is the only one.
-                const sibling = parser.nodeNextSibling(self_node);
-                break :blk .{ parent, sibling };
-            }
-
-            // Thrown if:
-            // * position is not one of the four listed values.
-            // * The input is XML that is not well-formed.
-            return error.Syntax;
-        };
-
-        while (parser.nodeListItem(children, 0)) |child| {
-            _ = try parser.nodeInsertBefore(target_node, child, prev_node);
+            const child = try parser.nodeListItem(children, 0) orelse continue;
+            _ = try parser.nodeAppendChild(node, child);
        }
    }

@@ -319,18 +156,12 @@ pub const Element = struct {
                }
                return parser.nodeToElement(current.node);
            }
-            current = current.parent() orelse return null;
+            current = try current.parent() orelse return null;
        }
    }

-    // don't use parser.nodeHasAttributes(...) because that returns true/false
-    // based on the type, e.g. a node never as attributes, an element always has
-    // attributes. But, Element.hasAttributes is supposed to return true only
-    // if the element has at least 1 attribute.
    pub fn _hasAttributes(self: *parser.Element) !bool {
-        // an element _must_ have at least an empty attribute
-        const node_map = try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
-        return try parser.namedNodeMapGetLength(node_map) > 0;
+        return try parser.nodeHasAttributes(parser.elementToNode(self));
    }

    pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
@@ -399,22 +230,6 @@ pub const Element = struct {
        return true;
    }

-    pub fn _getAttributeNames(self: *parser.Element, page: *Page) ![]const []const u8 {
-        const attributes = try parser.nodeGetAttributes(@ptrCast(self)) orelse return &.{};
-        const ln = try parser.namedNodeMapGetLength(attributes);
-
-        const names = try page.call_arena.alloc([]const u8, ln);
-        var at: usize = 0;
-
-        for (0..ln) |i| {
-            const attribute = try parser.namedNodeMapItem(attributes, @intCast(i)) orelse break;
-            names[at] = try parser.attributeGetName(attribute);
-            at += 1;
-        }
-
-        return names[0..at];
-    }
-
    pub fn _getAttributeNode(self: *parser.Element, name: []const u8) !?*parser.Attribute {
        return try parser.elementGetAttributeNode(self, name);
    }
@@ -435,28 +250,36 @@ pub const Element = struct {
        return try parser.elementRemoveAttributeNode(self, attr);
    }

-    pub fn _getElementsByTagName(self: *parser.Element, tag_name: js.String) !collection.HTMLCollection {
-        return collection.HTMLCollectionByTagName(
+    pub fn _getElementsByTagName(
+        self: *parser.Element,
+        tag_name: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(
+            page.arena,
            parser.elementToNode(self),
-            tag_name.string,
-            .{ .include_root = false },
+            tag_name,
+            false,
        );
    }

-    pub fn _getElementsByClassName(self: *parser.Element, class_names: js.String) !collection.HTMLCollection {
+    pub fn _getElementsByClassName(
+        self: *parser.Element,
+        classNames: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
        return try collection.HTMLCollectionByClassName(
+            page.arena,
            parser.elementToNode(self),
-            class_names.string,
-            .{ .include_root = false },
+            classNames,
+            false,
        );
    }

    // ParentNode
    // https://dom.spec.whatwg.org/#parentnode
    pub fn get_children(self: *parser.Element) !collection.HTMLCollection {
-        return collection.HTMLCollectionChildren(parser.elementToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionChildren(parser.elementToNode(self), false);
    }

    pub fn get_firstElementChild(self: *parser.Element) !?Union {
@@ -482,15 +305,15 @@ pub const Element = struct {
    // NonDocumentTypeChildNode
    // https://dom.spec.whatwg.org/#interface-nondocumenttypechildnode
    pub fn get_previousElementSibling(self: *parser.Element) !?Union {
-        const res = parser.nodePreviousElementSibling(parser.elementToNode(self));
+        const res = try parser.nodePreviousElementSibling(parser.elementToNode(self));
        if (res == null) return null;
-        return try toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
    }

    pub fn get_nextElementSibling(self: *parser.Element) !?Union {
-        const res = parser.nodeNextElementSibling(parser.elementToNode(self));
+        const res = try parser.nodeNextElementSibling(parser.elementToNode(self));
        if (res == null) return null;
-        return try toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
    }

    fn getElementById(self: *parser.Element, id: []const u8) !?*parser.Node {
@@ -501,7 +324,7 @@ pub const Element = struct {
        while (true) {
            next = try walker.get_next(root, next) orelse return null;
            // ignore non-element nodes.
-            if (parser.nodeType(next.?) != .element) {
+            if (try parser.nodeType(next.?) != .element) {
                continue;
            }
            const e = parser.nodeToElement(next.?);
@@ -549,7 +372,7 @@ pub const Element = struct {
    // Returns a 0 DOMRect object if the element is eventually detached from the main window
    pub fn _getBoundingClientRect(self: *parser.Element, page: *Page) !DOMRect {
        // Since we are lazy rendering we need to do this check. We could store the renderer in a viewport such that it could cache these, but it would require tracking changes.
-        if (!page.isNodeAttached(parser.elementToNode(self))) {
+        if (!try page.isNodeAttached(parser.elementToNode(self))) {
            return DOMRect{
                .x = 0,
                .y = 0,
@@ -568,7 +391,7 @@ pub const Element = struct {
    // We do not render so it only always return the element's bounding rect.
    // Returns an empty array if the element is eventually detached from the main window
    pub fn _getClientRects(self: *parser.Element, page: *Page) ![]DOMRect {
-        if (!page.isNodeAttached(parser.elementToNode(self))) {
+        if (!try page.isNodeAttached(parser.elementToNode(self))) {
            return &.{};
        }
        const heap_ptr = try page.call_arena.create(DOMRect);
@@ -599,8 +422,6 @@ pub const Element = struct {
        contentVisibilityAuto: bool,
        opacityProperty: bool,
        visibilityProperty: bool,
-        checkVisibilityCSS: bool,
-        checkOpacity: bool,
    };

    pub fn _checkVisibility(self: *parser.Element, opts: ?CheckVisibilityOpts) bool {
@@ -608,79 +429,254 @@ pub const Element = struct {
        _ = opts;
        return true;
    }
-
-    const AttachShadowOpts = struct {
-        mode: []const u8, // must be specified
-    };
-    pub fn _attachShadow(self: *parser.Element, opts: AttachShadowOpts, page: *Page) !*ShadowRoot {
-        const mode = std.meta.stringToEnum(ShadowRoot.Mode, opts.mode) orelse return error.InvalidArgument;
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        if (state.shadow_root) |sr| {
-            if (mode != sr.mode) {
-                // this is the behavior per the spec
-                return error.NotSupportedError;
-            }
-
-            try Node.removeChildren(@ptrCast(@alignCast(sr.proto)));
-            return sr;
-        }
-
-        // Not sure what to do if there is no owner document
-        const doc = parser.nodeOwnerDocument(@ptrCast(self)) orelse return error.InvalidArgument;
-        const fragment = try parser.documentCreateDocumentFragment(doc);
-        const sr = try page.arena.create(ShadowRoot);
-        sr.* = .{
-            .host = self,
-            .mode = mode,
-            .proto = fragment,
-        };
-        state.shadow_root = sr;
-        parser.documentFragmentSetHost(sr.proto, @ptrCast(@alignCast(self)));
-
-        // Storing the ShadowRoot on the element makes sense, it's the ShadowRoot's
-        // parent. When we render, we go top-down, so we'll have the element, get
-        // its shadowroot, and go on. that's what the above code does.
-        // But we sometimes need to go bottom-up, e.g when we have a slot element
-        // and want to find the containing parent. Unforatunately , we don't have
-        // that link, so we need to create it. In the DOM, the ShadowRoot is
-        // represented by this DocumentFragment (it's the ShadowRoot's base prototype)
-        // So we can also store the ShadowRoot in the DocumentFragment's state.
-        const fragment_state = try page.getOrCreateNodeState(@ptrCast(@alignCast(fragment)));
-        fragment_state.shadow_root = sr;
-
-        return sr;
-    }
-
-    pub fn get_shadowRoot(self: *parser.Element, page: *Page) ?*ShadowRoot {
-        const state = page.getNodeState(@ptrCast(@alignCast(self))) orelse return null;
-        const sr = state.shadow_root orelse return null;
-        if (sr.mode == .closed) {
-            return null;
-        }
-        return sr;
-    }
-
-    pub fn _animate(self: *parser.Element, effect: js.Object, opts: js.Object) !Animation {
-        _ = self;
-        _ = opts;
-        return Animation.constructor(effect, null);
-    }
-
-    pub fn _remove(self: *parser.Element) !void {
-        // TODO: This hasn't been tested to make sure all references to this
-        // node are properly updated. A lot of libdom is lazy and will look
-        // for related elements JIT by walking the tree, but there could be
-        // cases in libdom or the Zig WebAPI where this reference is kept
-        const as_node: *parser.Node = @ptrCast(self);
-        const parent = parser.nodeParentNode(as_node) orelse return;
-        _ = try Node._removeChild(parent, as_node);
-    }
 };

 // Tests
 // -----

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Element" {
-    try testing.htmlRunner("dom/element.html");
+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.attributes['id'].value", "content" },
+        .{
+            \\ let x = '';
+            \\ for (const attr of a.attributes) {
+            \\   x += attr.name + '=' + attr.value;
+            \\ }
+            \\ x;
+            ,
+            "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" },
+
+        .{ "let r4 = document.createElement('div').getBoundingClientRect()", null },
+        .{ "r4.x", "0" },
+        .{ "r4.y", "0" },
+        .{ "r4.width", "0" },
+        .{ "r4.height", "0" },
+
+        // Test setup causes WrongDocument or HierarchyRequest error unlike in chrome/firefox
+        // .{ // An element of another document, even if created from the main document, is not rendered.
+        //     \\ let div5 = document.createElement('div');
+        //     \\ const newDoc = document.implementation.createHTMLDocument("New Document");
+        //     \\ newDoc.body.appendChild(div5);
+        //     \\ let r5 = div5.getBoundingClientRect();
+        //     ,
+        //     null,
+        // },
+        // .{ "r5.x", "0" },
+        // .{ "r5.y", "0" },
+        // .{ "r5.width", "0" },
+        // .{ "r5.height", "0" },
+    }, .{});
+
+    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>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var div1 = document.createElement('div');", null },
+        .{ "div1.innerHTML = \"  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>\"", null },
+        .{ "div1.getElementsByTagName('a').length", "1" },
+    }, .{});
 }
--- a/src/browser/dom/event_target.zig
+++ b/src/browser/dom/event_target.zig
@@ -16,7 +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 Env = @import("../env.zig").Env;
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;

@@ -28,13 +28,6 @@ const nod = @import("node.zig");
 pub const Union = union(enum) {
    node: nod.Union,
    xhr: *@import("../xhr/xhr.zig").XMLHttpRequest,
-    plain: *parser.EventTarget,
-    message_port: *@import("MessageChannel.zig").MessagePort,
-    screen: *@import("../html/screen.zig").Screen,
-    screen_orientation: *@import("../html/screen.zig").ScreenOrientation,
-    performance: *@import("performance.zig").Performance,
-    media_query_list: *@import("../html/media_query_list.zig").MediaQueryList,
-    navigation: *@import("../navigation/Navigation.zig"),
 };

 // EventTarget implementation
@@ -42,63 +35,34 @@ pub const EventTarget = struct {
    pub const Self = parser.EventTarget;
    pub const Exception = DOMException;

-    // Extend libdom event target for pure zig struct.
-    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .plain },
-
-    pub fn toInterface(et: *parser.EventTarget, page: *Page) !Union {
+    pub fn toInterface(e: *parser.Event, et: *parser.EventTarget, page: *Page) !Union {
        // libdom assumes that all event targets are libdom nodes. They are not.

-        switch (parser.eventTargetInternalType(et)) {
-            .libdom_node => {
-                return .{ .node = try nod.Node.toInterface(@as(*parser.Node, @ptrCast(et))) };
-            },
-            .plain => return .{ .plain = et },
+        // The window is a common non-node target, but it's easy to handle as
+        // its a singleton.
+        if (@intFromPtr(et) == @intFromPtr(&page.window.base)) {
+            return .{ .node = .{ .Window = &page.window } };
+        }
+
+        // AbortSignal is another non-node target. It has a distinct usage though
+        // so we hijack the event internal type to identity if.
+        switch (try parser.eventGetInternalType(e)) {
            .abort_signal => {
-                // AbortSignal is a special case, it has its own internal type.
-                // We return it as a node, but we need to handle it differently.
                return .{ .node = .{ .AbortSignal = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) } };
            },
-            .window => {
-                // The window is a common non-node target, but it's easy to handle as its a singleton.
-                std.debug.assert(@intFromPtr(et) == @intFromPtr(&page.window.base));
-                return .{ .node = .{ .Window = &page.window } };
-            },
-            .xhr => {
+            .xhr_event => {
                const XMLHttpRequestEventTarget = @import("../xhr/event_target.zig").XMLHttpRequestEventTarget;
                const base: *XMLHttpRequestEventTarget = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et)));
                return .{ .xhr = @fieldParentPtr("proto", base) };
            },
-            .message_port => {
-                return .{ .message_port = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .screen => {
-                return .{ .screen = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .screen_orientation => {
-                return .{ .screen_orientation = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .performance => {
-                return .{ .performance = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .media_query_list => {
-                return .{ .media_query_list = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .navigation => {
-                const NavigationEventTarget = @import("../navigation/NavigationEventTarget.zig");
-                const base: *NavigationEventTarget = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et)));
-                return .{ .navigation = @fieldParentPtr("proto", base) };
+            else => {
+                return .{ .node = try nod.Node.toInterface(@as(*parser.Node, @ptrCast(et))) };
            },
        }
    }

    // JS funcs
    // --------
-    pub fn constructor(page: *Page) !*parser.EventTarget {
-        const et = try page.arena.create(EventTarget);
-        et.* = .{};
-        return @ptrCast(&et.base);
-    }
-
    pub fn _addEventListener(
        self: *parser.EventTarget,
        typ: []const u8,
@@ -107,9 +71,6 @@ pub const EventTarget = struct {
        page: *Page,
    ) !void {
        _ = try EventHandler.register(page.arena, self, typ, listener, opts);
-        if (std.mem.eql(u8, typ, "slotchange")) {
-            try page.registerSlotChangeMonitor();
-        }
    }

    const RemoveEventListenerOpts = union(enum) {
@@ -157,19 +118,136 @@ pub const EventTarget = struct {
        );
    }

-    pub fn _dispatchEvent(self: *parser.EventTarget, event: *parser.Event, page: *Page) !bool {
-        const res = try parser.eventTargetDispatchEvent(self, event);
-
-        if (!parser.eventBubbles(event) or parser.eventIsStopped(event)) {
-            return res;
-        }
-
-        try page.window.dispatchForDocumentTarget(event);
-        return true;
+    pub fn _dispatchEvent(self: *parser.EventTarget, event: *parser.Event) !bool {
+        return try parser.eventTargetDispatchEvent(self, event);
    }
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.EventTarget" {
-    try testing.htmlRunner("dom/event_target.html");
+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" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const obj1 = {calls: 0, handleEvent: function() { this.calls += 1; } };", null },
+        .{ "content.addEventListener('he', obj1);", null },
+        .{ "content.dispatchEvent(new Event('he'));", null },
+        .{ "obj1.calls", "1" },
+
+        .{ "content.removeEventListener('he', obj1);", null },
+        .{ "content.dispatchEvent(new Event('he'));", null },
+        .{ "obj1.calls", "1" },
+    }, .{});
+
+    // doesn't crash on null receiver
+    try runner.testCases(&.{
+        .{ "content.addEventListener('he2', null);", null },
+        .{ "content.dispatchEvent(new Event('he2'));", null },
+    }, .{});
 }
--- a/src/browser/dom/exceptions.zig
+++ b/src/browser/dom/exceptions.zig
@@ -68,24 +68,23 @@ pub const DOMException = struct {
    }

    // TODO: deinit
-    pub fn init(alloc: std.mem.Allocator, err: anyerror, caller_name: []const u8) !DOMException {
-        const dom_error = @as(parser.DOMError, @errorCast(err));
-        const error_name = DOMException.name(dom_error);
-        const str = switch (dom_error) {
+    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) {
            error.HierarchyRequest => try allocPrint(
                alloc,
                "{s}: Failed to execute '{s}' on 'Node': The new child element contains the parent.",
-                .{ error_name, caller_name },
-            ),
-            // todo add more custom error messages
-            else => try allocPrint(
-                alloc,
-                "{s}: Failed to execute '{s}' : {s}",
-                .{ error_name, caller_name, error_name },
+                .{ errName, callerName },
            ),
            error.NoError => unreachable,
+            else => try allocPrint(
+                alloc,
+                "{s}: TODO message", // TODO: implement other messages
+                .{DOMException.name(errCast)},
+            ),
        };
-        return .{ .err = dom_error, .str = str };
+        return .{ .err = errCast, .str = str };
    }

    fn error_from_str(name_: []const u8) ?parser.DOMError {
@@ -219,6 +218,47 @@ pub const DOMException = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Exceptions" {
-    try testing.htmlRunner("dom/exceptions.html");
+test "Browser.DOM.Exception" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    const err = "Failed to execute 'appendChild' on 'Node': The new child element contains the parent.";
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let link = document.getElementById('link')", "undefined" },
+        // HierarchyRequestError
+        .{
+            \\ 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" },
+    }, .{});
+
+    // Test DOMException constructor
+    try runner.testCases(&.{
+        .{ "let exc0 = new DOMException()", "undefined" },
+        .{ "exc0.name", "Error" },
+        .{ "exc0.code", "0" },
+        .{ "exc0.message", "" },
+        .{ "exc0.toString()", "Error" },
+
+        .{ "let exc1 = new DOMException('Sandwich malfunction')", "undefined" },
+        .{ "exc1.name", "Error" },
+        .{ "exc1.code", "0" },
+        .{ "exc1.message", "Sandwich malfunction" },
+        .{ "exc1.toString()", "Error: Sandwich malfunction" },
+
+        .{ "let exc2 = new DOMException('Caterpillar turned into a butterfly', 'NoModificationAllowedError')", "undefined" },
+        .{ "exc2.name", "NoModificationAllowedError" },
+        .{ "exc2.code", "7" },
+        .{ "exc2.message", "Caterpillar turned into a butterfly" },
+        .{ "exc2.toString()", "NoModificationAllowedError: Caterpillar turned into a butterfly" },
+    }, .{});
 }
--- a/src/browser/dom/html_collection.zig
+++ b/src/browser/dom/html_collection.zig
@@ -23,6 +23,7 @@ const parser = @import("../netsurf.zig");

 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 Matcher = union(enum) {
@@ -51,13 +52,13 @@ pub const MatchByTagName = struct {
    tag: []const u8,
    is_wildcard: bool,

-    fn init(tag_name: []const u8) MatchByTagName {
+    fn init(arena: Allocator, tag_name: []const u8) !MatchByTagName {
        if (std.mem.eql(u8, tag_name, "*")) {
            return .{ .tag = "*", .is_wildcard = true };
        }

        return .{
-            .tag = tag_name,
+            .tag = try arena.dupe(u8, tag_name),
            .is_wildcard = false,
        };
    }
@@ -68,25 +69,25 @@ pub const MatchByTagName = struct {
 };

 pub fn HTMLCollectionByTagName(
+    arena: Allocator,
    root: ?*parser.Node,
    tag_name: []const u8,
-    opts: Opts,
-) HTMLCollection {
-    return .{
+    include_root: bool,
+) !HTMLCollection {
+    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerDepthFirst = .{} },
-        .matcher = .{ .matchByTagName = MatchByTagName.init(tag_name) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .matcher = .{ .matchByTagName = try MatchByTagName.init(arena, tag_name) },
+        .include_root = include_root,
    };
 }

 pub const MatchByClassName = struct {
    class_names: []const u8,

-    fn init(class_names: []const u8) !MatchByClassName {
+    fn init(arena: Allocator, class_names: []const u8) !MatchByClassName {
        return .{
-            .class_names = class_names,
+            .class_names = try arena.dupe(u8, class_names),
        };
    }

@@ -105,24 +106,26 @@ pub const MatchByClassName = struct {
 };

 pub fn HTMLCollectionByClassName(
+    arena: Allocator,
    root: ?*parser.Node,
-    class_names: []const u8,
-    opts: Opts,
+    classNames: []const u8,
+    include_root: bool,
 ) !HTMLCollection {
    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerDepthFirst = .{} },
-        .matcher = .{ .matchByClassName = try MatchByClassName.init(class_names) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .matcher = .{ .matchByClassName = try MatchByClassName.init(arena, classNames) },
+        .include_root = include_root,
    };
 }

 pub const MatchByName = struct {
    name: []const u8,

-    fn init(name: []const u8) !MatchByName {
-        return .{ .name = name };
+    fn init(arena: Allocator, name: []const u8) !MatchByName {
+        return .{
+            .name = try arena.dupe(u8, name),
+        };
    }

    pub fn match(self: MatchByName, node: *parser.Node) !bool {
@@ -133,16 +136,16 @@ pub const MatchByName = struct {
 };

 pub fn HTMLCollectionByName(
+    arena: Allocator,
    root: ?*parser.Node,
    name: []const u8,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerDepthFirst = .{} },
-        .matcher = .{ .matchByName = try MatchByName.init(name) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .matcher = .{ .matchByName = try MatchByName.init(arena, name) },
+        .include_root = include_root,
    };
 }

@@ -186,19 +189,18 @@ pub const HTMLAllCollection = struct {

 pub fn HTMLCollectionChildren(
    root: ?*parser.Node,
-    opts: Opts,
-) HTMLCollection {
+    include_root: bool,
+) !HTMLCollection {
    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerChildren = .{} },
        .matcher = .{ .matchTrue = .{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
    };
 }

-pub fn HTMLCollectionEmpty() HTMLCollection {
-    return .{
+pub fn HTMLCollectionEmpty() !HTMLCollection {
+    return HTMLCollection{
        .root = null,
        .walker = .{ .walkerNone = .{} },
        .matcher = .{ .matchFalse = .{} },
@@ -220,13 +222,15 @@ pub const MatchByLinks = struct {
    }
 };

-pub fn HTMLCollectionByLinks(root: ?*parser.Node, opts: Opts) HTMLCollection {
-    return .{
+pub fn HTMLCollectionByLinks(
+    root: ?*parser.Node,
+    include_root: bool,
+) !HTMLCollection {
+    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerDepthFirst = .{} },
-        .matcher = .{ .matchByLinks = .{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .matcher = .{ .matchByLinks = MatchByLinks{} },
+        .include_root = include_root,
    };
 }

@@ -243,13 +247,15 @@ pub const MatchByAnchors = struct {
    }
 };

-pub fn HTMLCollectionByAnchors(root: ?*parser.Node, opts: Opts) HTMLCollection {
-    return .{
+pub fn HTMLCollectionByAnchors(
+    root: ?*parser.Node,
+    include_root: bool,
+) !HTMLCollection {
+    return HTMLCollection{
        .root = root,
        .walker = .{ .walkerDepthFirst = .{} },
-        .matcher = .{ .matchByAnchors = .{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .matcher = .{ .matchByAnchors = MatchByAnchors{} },
+        .include_root = include_root,
    };
 }

@@ -279,14 +285,9 @@ pub const HTMLCollectionIterator = struct {
    }
 };

-const Opts = struct {
-    include_root: bool,
-    mutable: bool = false,
-};
-
 // WEB IDL https://dom.spec.whatwg.org/#htmlcollection
 // HTMLCollection is re implemented in zig here because libdom
-// dom_html_collection expects a comparison function callback as argument.
+// 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 {
    matcher: Matcher,
@@ -299,8 +300,6 @@ pub const HTMLCollection = struct {
    // itself.
    include_root: bool = false,

-    mutable: bool = false,
-
    // save a state for the collection to improve the _item speed.
    cur_idx: ?u32 = null,
    cur_node: ?*parser.Node = null,
@@ -332,7 +331,7 @@ pub const HTMLCollection = struct {
        var node = try self.start() orelse return 0;

        while (true) {
-            if (parser.nodeType(node) == .element) {
+            if (try parser.nodeType(node) == .element) {
                if (try self.matcher.match(node)) {
                    len += 1;
                }
@@ -351,7 +350,7 @@ pub const HTMLCollection = struct {
        var node: *parser.Node = undefined;

        // Use the current state to improve speed if possible.
-        if (self.mutable == false and self.cur_idx != null and index >= self.cur_idx.?) {
+        if (self.cur_idx != null and index >= self.cur_idx.?) {
            i = self.cur_idx.?;
            node = self.cur_node.?;
        } else {
@@ -359,7 +358,7 @@ pub const HTMLCollection = struct {
        }

        while (true) {
-            if (parser.nodeType(node) == .element) {
+            if (try parser.nodeType(node) == .element) {
                if (try self.matcher.match(node)) {
                    // check if we found the searched element.
                    if (i == index) {
@@ -393,7 +392,7 @@ pub const HTMLCollection = struct {
        var node = try self.start() orelse return null;

        while (true) {
-            if (parser.nodeType(node) == .element) {
+            if (try parser.nodeType(node) == .element) {
                if (try self.matcher.match(node)) {
                    const elem = @as(*parser.Element, @ptrCast(node));

@@ -428,27 +427,74 @@ pub const HTMLCollection = struct {
        return null;
    }

-    pub fn indexed_get(self: *HTMLCollection, index: u32, has_value: *bool) !?Union {
-        return (try _item(self, index)) orelse {
-            has_value.* = false;
-            return undefined;
-        };
-    }
+    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));
+            const as_interface = try Element.toInterface(e);
+            try js_this.setIndex(@intCast(i), as_interface, .{});

-    pub fn named_get(self: *const HTMLCollection, name: []const u8, has_value: *bool) !?Union {
-        // Even though an entry might have an empty id, the spec says
-        // that namedItem("") should always return null
-        if (name.len == 0) {
-            return null;
+            if (try item_name(e)) |name| {
+                // 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, as_interface, .{ .DONT_ENUM = true });
+                }
+            }
        }
-        return (try _namedItem(self, name)) orelse {
-            has_value.* = false;
-            return undefined;
-        };
    }
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.HTMLCollection" {
-    try testing.htmlRunner("dom/html_collection.html");
+test "Browser.DOM.HTMLCollection" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    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
+        .{ "getElementsByTagNameAll[0].localName", "html" },
+        .{ "getElementsByTagNameAll[7].localName", "p" },
+        .{ "getElementsByTagNameAll[8]", "undefined" },
+        .{ "getElementsByTagNameAll['para-empty-child'].localName", "span" },
+        .{ "getElementsByTagNameAll['foo']", "undefined" },
+
+        .{ "document.getElementById('content').getElementsByTagName('*').length", "4" },
+        .{ "document.getElementById('content').getElementsByTagName('p').length", "2" },
+        .{ "document.getElementById('content').getElementsByTagName('div').length", "0" },
+
+        .{ "document.children.length", "1" },
+        .{ "document.getElementById('content').children.length", "3" },
+
+        // check liveness
+        .{ "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" },
+    }, .{});
 }
--- a/src/browser/dom/implementation.zig
+++ b/src/browser/dom/implementation.zig
@@ -50,7 +50,23 @@ pub const DOMImplementation = struct {
    }
 };

+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Implementation" {
-    try testing.htmlRunner("dom/implementation.html");
+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]" },
+        .{ "const doc = impl.createHTMLDocument('foo');", "undefined" },
+        .{ "doc", "[object HTMLDocument]" },
+        .{ "doc.title", "foo" },
+        .{ "doc.body", "[object HTMLBodyElement]" },
+        .{ "impl.createDocument(null, 'foo');", "[object Document]" },
+        .{ "impl.createDocumentType('foo', 'bar', 'baz')", "[object DocumentType]" },
+        .{ "impl.hasFeature()", "true" },
+    }, .{});
 }
--- a/src/browser/dom/intersection_observer.zig
+++ b/src/browser/dom/intersection_observer.zig
@@ -0,0 +1,290 @@
+// 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 log = @import("../../log.zig");
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Env = @import("../env.zig").Env;
+const Element = @import("element.zig").Element;
+
+pub const Interfaces = .{
+    IntersectionObserver,
+    IntersectionObserverEntry,
+};
+
+// 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 {
+    page: *Page,
+    callback: Env.Function,
+    options: IntersectionObserverOptions,
+
+    observed_entries: std.ArrayListUnmanaged(IntersectionObserverEntry),
+
+    // new IntersectionObserver(callback)
+    // new IntersectionObserver(callback, options) [not supported yet]
+    pub fn constructor(callback: Env.Function, options_: ?IntersectionObserverOptions, page: *Page) !IntersectionObserver {
+        var options = IntersectionObserverOptions{
+            .root = parser.documentToNode(parser.documentHTMLToDocument(page.window.document)),
+            .rootMargin = "0px 0px 0px 0px",
+            .threshold = .{ .single = 0.0 },
+        };
+        if (options_) |*o| {
+            if (o.root) |root| {
+                options.root = root;
+            } // Other properties are not used due to the way we render
+        }
+
+        return .{
+            .page = page,
+            .callback = callback,
+            .options = options,
+            .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.page.arena, .{
+            .page = self.page,
+            .target = target_element,
+            .options = &self.options,
+        });
+
+        var result: Env.Function.Result = undefined;
+        self.callback.tryCall(void, .{self.observed_entries.items}, &result) catch {
+            log.debug(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "intersection observer",
+            });
+        };
+    }
+
+    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: ?Threshold,
+
+    const Threshold = union(enum) {
+        single: f32,
+        list: []const f32,
+    };
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
+// https://w3c.github.io/IntersectionObserver/#intersection-observer-entry
+pub const IntersectionObserverEntry = struct {
+    page: *Page,
+    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 Element._getBoundingClientRect(self.target, self.page);
+    }
+
+    // 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 Element._getBoundingClientRect(self.target, self.page);
+    }
+
+    // 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.page.window.document)) {
+            return self.page.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 Element._getBoundingClientRect(element, self.page);
+    }
+
+    // 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" },
+        .{ "let div1 = document.createElement('div')", null },
+        .{ "document.body.appendChild(div1);", null },
+        .{ "new IntersectionObserver(entries => { entry = entries[0]; }).observe(div1);", null },
+        .{ "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');", null },
+        .{ "document.body.appendChild(new_root);", null },
+        .{ "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" },
+    }, .{});
+}
--- a/src/browser/dom/mutation_observer.zig
+++ b/src/browser/dom/mutation_observer.zig
@@ -17,12 +17,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
+const Allocator = std.mem.Allocator;

-const js = @import("../js/js.zig");
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;

+const Env = @import("../env.zig").Env;
 const NodeList = @import("nodelist.zig").NodeList;

 pub const Interfaces = .{
@@ -34,27 +36,31 @@ const Walker = @import("../dom/walker.zig").WalkerChildren;

 // WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
 pub const MutationObserver = struct {
-    page: *Page,
-    cbk: js.Function,
+    loop: *Loop,
+    cbk: Env.Function,
+    arena: Allocator,
+    connected: bool,
    scheduled: bool,
-    observers: std.ArrayListUnmanaged(*Observer),
+    loop_node: Loop.CallbackNode,

    // List of records which were observed. When the call scope ends, we need to
    // execute our callback with it.
    observed: std.ArrayListUnmanaged(MutationRecord),

-    pub fn constructor(cbk: js.Function, page: *Page) !MutationObserver {
+    pub fn constructor(cbk: Env.Function, page: *Page) !MutationObserver {
        return .{
            .cbk = cbk,
-            .page = page,
+            .loop = page.loop,
            .observed = .{},
+            .connected = true,
            .scheduled = false,
-            .observers = .empty,
+            .arena = page.arena,
+            .loop_node = .{ .func = callback },
        };
    }

    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?Options) !void {
-        const arena = self.page.arena;
+        const arena = self.arena;
        var options = options_ orelse Options{};
        if (options.attributeFilter.len > 0) {
            options.attributeFilter = try arena.dupe([]const u8, options.attributeFilter);
@@ -68,17 +74,15 @@ pub const MutationObserver = struct {
            .event_node = .{ .id = self.cbk.id, .func = Observer.handle },
        };

-        try self.observers.append(arena, observer);
-
        // register node's events
        if (options.childList or options.subtree) {
-            observer.dom_node_inserted_listener = try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                parser.toEventTarget(parser.Node, node),
                "DOMNodeInserted",
                &observer.event_node,
                false,
            );
-            observer.dom_node_removed_listener = try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                parser.toEventTarget(parser.Node, node),
                "DOMNodeRemoved",
                &observer.event_node,
@@ -86,7 +90,7 @@ pub const MutationObserver = struct {
            );
        }
        if (options.attr()) {
-            observer.dom_node_attribute_modified_listener = try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                parser.toEventTarget(parser.Node, node),
                "DOMAttrModified",
                &observer.event_node,
@@ -94,7 +98,7 @@ pub const MutationObserver = struct {
            );
        }
        if (options.cdata()) {
-            observer.dom_cdata_modified_listener = try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                parser.toEventTarget(parser.Node, node),
                "DOMCharacterDataModified",
                &observer.event_node,
@@ -102,7 +106,7 @@ pub const MutationObserver = struct {
            );
        }
        if (options.subtree) {
-            observer.dom_subtree_modified_listener = try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                parser.toEventTarget(parser.Node, node),
                "DOMSubtreeModified",
                &observer.event_node,
@@ -111,77 +115,34 @@ pub const MutationObserver = struct {
        }
    }

-    fn callback(ctx: *anyopaque) ?u32 {
-        const self: *MutationObserver = @ptrCast(@alignCast(ctx));
+    fn callback(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *MutationObserver = @fieldParentPtr("loop_node", node);
+        if (self.connected == false) {
+            self.scheduled = true;
+            return;
+        }
        self.scheduled = false;

        const records = self.observed.items;
        if (records.len == 0) {
-            return null;
+            return;
        }

        defer self.observed.clearRetainingCapacity();

-        var result: js.Function.Result = undefined;
-        self.cbk.tryCallWithThis(void, self, .{records}, &result) catch {
+        var result: Env.Function.Result = undefined;
+        self.cbk.tryCall(void, .{records}, &result) catch {
            log.debug(.user_script, "callback error", .{
                .err = result.exception,
                .stack = result.stack,
                .source = "mutation observer",
            });
        };
-        return null;
    }

+    // TODO
    pub fn _disconnect(self: *MutationObserver) !void {
-        for (self.observers.items) |observer| {
-            const event_target = parser.toEventTarget(parser.Node, observer.node);
-            if (observer.dom_node_inserted_listener) |listener| {
-                try parser.eventTargetRemoveEventListener(
-                    event_target,
-                    "DOMNodeInserted",
-                    listener,
-                    false,
-                );
-            }
-
-            if (observer.dom_node_removed_listener) |listener| {
-                try parser.eventTargetRemoveEventListener(
-                    event_target,
-                    "DOMNodeRemoved",
-                    listener,
-                    false,
-                );
-            }
-
-            if (observer.dom_node_attribute_modified_listener) |listener| {
-                try parser.eventTargetRemoveEventListener(
-                    event_target,
-                    "DOMAttrModified",
-                    listener,
-                    false,
-                );
-            }
-
-            if (observer.dom_cdata_modified_listener) |listener| {
-                try parser.eventTargetRemoveEventListener(
-                    event_target,
-                    "DOMCharacterDataModified",
-                    listener,
-                    false,
-                );
-            }
-
-            if (observer.dom_subtree_modified_listener) |listener| {
-                try parser.eventTargetRemoveEventListener(
-                    event_target,
-                    "DOMSubtreeModified",
-                    listener,
-                    false,
-                );
-            }
-        }
-        self.observers.clearRetainingCapacity();
+        self.connected = false;
    }

    // TODO
@@ -266,12 +227,6 @@ const Observer = struct {

    event_node: parser.EventNode,

-    dom_node_inserted_listener: ?*parser.EventListener = null,
-    dom_node_removed_listener: ?*parser.EventListener = null,
-    dom_node_attribute_modified_listener: ?*parser.EventListener = null,
-    dom_cdata_modified_listener: ?*parser.EventListener = null,
-    dom_subtree_modified_listener: ?*parser.EventListener = null,
-
    fn appliesTo(
        self: *const Observer,
        target: *parser.Node,
@@ -327,13 +282,13 @@ const Observer = struct {
        var mutation_observer = self.mutation_observer;

        const node = blk: {
-            const event_target = parser.eventTarget(event) orelse return;
+            const event_target = try parser.eventTarget(event) orelse return;
            break :blk parser.eventTargetToNode(event_target);
        };

        const mutation_event = parser.eventToMutationEvent(event);
        const event_type = blk: {
-            const t = parser.eventType(event);
+            const t = try parser.eventType(event);
            break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
        };

@@ -346,17 +301,17 @@ const Observer = struct {
            .type = event_type.recordType(),
        };

-        const arena = mutation_observer.page.arena;
+        const arena = mutation_observer.arena;
        switch (event_type) {
            .DOMAttrModified => {
                record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
                if (self.options.attributeOldValue) {
-                    record.old_value = parser.mutationEventPrevValue(mutation_event);
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
                }
            },
            .DOMCharacterDataModified => {
                if (self.options.characterDataOldValue) {
-                    record.old_value = parser.mutationEventPrevValue(mutation_event);
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
                }
            },
            .DOMNodeInserted => {
@@ -375,12 +330,7 @@ const Observer = struct {

        if (mutation_observer.scheduled == false) {
            mutation_observer.scheduled = true;
-            try mutation_observer.page.scheduler.add(
-                mutation_observer,
-                MutationObserver.callback,
-                0,
-                .{ .name = "mutation_observer" },
-            );
+            _ = try mutation_observer.loop.timeout(0, &mutation_observer.loop_node);
        }
    }
 };
@@ -402,6 +352,85 @@ const MutationEventType = enum {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.MutationObserver" {
-    try testing.htmlRunner("dom/mutation_observer.html");
+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");
+            ,
+            null,
+        },
+        .{ "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";
+            ,
+            null,
+        },
+        .{ "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";
+            ,
+            null,
+        },
+        .{ "node.innerText", "a" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ var attrWatch = 0;
+            \\ new MutationObserver(() => {
+            \\     attrWatch++;
+            \\ }).observe(document, { attributeFilter: ["name"], subtree: true });
+            \\ node.setAttribute("id", "1");
+            ,
+            null,
+        },
+        .{ "attrWatch", "0" },
+        .{ "node.setAttribute('name', 'other');", null },
+        .{ "attrWatch", "1" },
+    }, .{});
 }
--- a/src/browser/dom/namednodemap.zig
+++ b/src/browser/dom/namednodemap.zig
@@ -115,7 +115,26 @@ pub const NamedNodeMapIterator = struct {
    }
 };

+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.NamedNodeMap" {
-    try testing.htmlRunner("dom/named_node_map.html");
+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]" },
+        .{ "a['id'].name", "id" },
+        .{ "a['id'].value", "content" },
+        .{ "a['other']", "undefined" },
+        .{ "a[0].value = 'abc123'", null },
+        .{ "a[0].value", "abc123" },
+    }, .{});
 }
--- a/src/browser/dom/node.zig
+++ b/src/browser/dom/node.zig
@@ -20,7 +20,7 @@ const std = @import("std");

 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const generate = @import("../js/generate.zig");
+const generate = @import("../../runtime/generate.zig");

 const Page = @import("../page.zig").Page;
 const EventTarget = @import("event_target.zig").EventTarget;
@@ -29,7 +29,6 @@ const EventTarget = @import("event_target.zig").EventTarget;
 const Attr = @import("attribute.zig").Attr;
 const CData = @import("character_data.zig");
 const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
 const NodeList = @import("nodelist.zig").NodeList;
 const Document = @import("document.zig").Document;
 const DocumentType = @import("document_type.zig").DocumentType;
@@ -37,11 +36,11 @@ 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 ShadowRoot = @import("shadow_root.zig").ShadowRoot;
 const Walker = @import("walker.zig").WalkerDepthFirst;

 // HTML
 const HTML = @import("../html/html.zig");
+const HTMLElem = @import("../html/elements.zig");

 // Node interfaces
 pub const Interfaces = .{
@@ -67,8 +66,8 @@ pub const Node = struct {
    pub const subtype = .node;

    pub fn toInterface(node: *parser.Node) !Union {
-        return switch (parser.nodeType(node)) {
-            .element => try Element.toInterfaceT(
+        return switch (try parser.nodeType(node)) {
+            .element => try HTMLElem.toInterface(
                Union,
                @as(*parser.Element, @ptrCast(node)),
            ),
@@ -76,14 +75,7 @@ pub const Node = struct {
            .text => .{ .Text = @as(*parser.Text, @ptrCast(node)) },
            .cdata_section => .{ .CDATASection = @as(*parser.CDATASection, @ptrCast(node)) },
            .processing_instruction => .{ .ProcessingInstruction = @as(*parser.ProcessingInstruction, @ptrCast(node)) },
-            .document => blk: {
-                const doc: *parser.Document = @ptrCast(node);
-                if (doc.is_html) {
-                    break :blk .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) };
-                }
-
-                break :blk .{ .Document = doc };
-            },
+            .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)) },
@@ -108,23 +100,13 @@ pub const Node = struct {
    pub const _ENTITY_NODE = @intFromEnum(parser.NodeType.entity);
    pub const _NOTATION_NODE = @intFromEnum(parser.NodeType.notation);

-    pub const _DOCUMENT_POSITION_DISCONNECTED = @intFromEnum(parser.DocumentPosition.disconnected);
-    pub const _DOCUMENT_POSITION_PRECEDING = @intFromEnum(parser.DocumentPosition.preceding);
-    pub const _DOCUMENT_POSITION_FOLLOWING = @intFromEnum(parser.DocumentPosition.following);
-    pub const _DOCUMENT_POSITION_CONTAINS = @intFromEnum(parser.DocumentPosition.contains);
-    pub const _DOCUMENT_POSITION_CONTAINED_BY = @intFromEnum(parser.DocumentPosition.contained_by);
-    pub const _DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = @intFromEnum(parser.DocumentPosition.implementation_specific);
-
    // JS funcs
    // --------

    // Read-only attributes
-    pub fn get_baseURI(_: *parser.Node, page: *Page) ![]const u8 {
-        return page.url.raw;
-    }

    pub fn get_firstChild(self: *parser.Node) !?Union {
-        const res = parser.nodeFirstChild(self);
+        const res = try parser.nodeFirstChild(self);
        if (res == null) {
            return null;
        }
@@ -132,7 +114,7 @@ pub const Node = struct {
    }

    pub fn get_lastChild(self: *parser.Node) !?Union {
-        const res = parser.nodeLastChild(self);
+        const res = try parser.nodeLastChild(self);
        if (res == null) {
            return null;
        }
@@ -140,7 +122,7 @@ pub const Node = struct {
    }

    pub fn get_nextSibling(self: *parser.Node) !?Union {
-        const res = parser.nodeNextSibling(self);
+        const res = try parser.nodeNextSibling(self);
        if (res == null) {
            return null;
        }
@@ -148,7 +130,7 @@ pub const Node = struct {
    }

    pub fn get_previousSibling(self: *parser.Node) !?Union {
-        const res = parser.nodePreviousSibling(self);
+        const res = try parser.nodePreviousSibling(self);
        if (res == null) {
            return null;
        }
@@ -156,19 +138,19 @@ pub const Node = struct {
    }

    pub fn get_parentNode(self: *parser.Node) !?Union {
-        const res = parser.nodeParentNode(self);
+        const res = try parser.nodeParentNode(self);
        if (res == null) {
            return null;
        }
        return try Node.toInterface(res.?);
    }

-    pub fn get_parentElement(self: *parser.Node) !?ElementUnion {
-        const res = parser.nodeParentElement(self);
+    pub fn get_parentElement(self: *parser.Node) !?HTMLElem.Union {
+        const res = try parser.nodeParentElement(self);
        if (res == null) {
            return null;
        }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, @as(*parser.Element, @ptrCast(res.?)));
    }

    pub fn get_nodeName(self: *parser.Node) ![]const u8 {
@@ -176,11 +158,11 @@ pub const Node = struct {
    }

    pub fn get_nodeType(self: *parser.Node) !u8 {
-        return @intFromEnum(parser.nodeType(self));
+        return @intFromEnum(try parser.nodeType(self));
    }

    pub fn get_ownerDocument(self: *parser.Node) !?*parser.DocumentHTML {
-        const res = parser.nodeOwnerDocument(self);
+        const res = try parser.nodeOwnerDocument(self);
        if (res == null) {
            return null;
        }
@@ -188,49 +170,25 @@ pub const Node = struct {
    }

    pub fn get_isConnected(self: *parser.Node) !bool {
-        var node = self;
-        while (true) {
-            const node_type = parser.nodeType(node);
-            if (node_type == .document) {
-                return true;
-            }
-
-            if (parser.nodeParentNode(node)) |parent| {
-                // didn't find a document, but node has a parent, let's see
-                // if it's connected;
-                node = parent;
-                continue;
-            }
-
-            if (node_type != .document_fragment) {
-                // doesn't have a parent and isn't a document_fragment
-                // can't be connected
-                return false;
-            }
-
-            if (parser.documentFragmentGetHost(@ptrCast(node))) |host| {
-                // node doesn't have a parent, but it's a document fragment
-                // with a host. The host is like the parent, but we only want to
-                // traverse up (or down) to it in specific cases, like isConnected.
-                node = host;
-                continue;
-            }
-            return false;
+        // 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 parser.nodeValue(self);
+        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 parser.nodeTextContent(self);
+    pub fn get_textContent(self: *parser.Node) !?[]const u8 {
+        return try parser.nodeTextContent(self);
    }

    pub fn set_textContent(self: *parser.Node, data: []u8) !void {
@@ -240,23 +198,6 @@ pub const Node = struct {
    // Methods

    pub fn _appendChild(self: *parser.Node, child: *parser.Node) !Union {
-        const self_owner = parser.nodeOwnerDocument(self);
-        const child_owner = parser.nodeOwnerDocument(child);
-
-        // If the node to be inserted has a different ownerDocument than the parent node,
-        // modern browsers automatically adopt the node and its descendants into
-        // the parent's ownerDocument.
-        // This process is known as adoption.
-        // (7.1) https://dom.spec.whatwg.org/#concept-node-insert
-        if (child_owner == null or (self_owner != null and child_owner.? != self_owner.?)) {
-            const w = Walker{};
-            var current = child;
-            while (true) {
-                current.owner = self_owner;
-                current = try w.get_next(child, current) orelse break;
-            }
-        }
-
        // TODO: DocumentFragment special case
        const res = try parser.nodeAppendChild(self, child);
        return try Node.toInterface(res);
@@ -268,43 +209,14 @@ pub const Node = struct {
    }

    pub fn _compareDocumentPosition(self: *parser.Node, other: *parser.Node) !u32 {
-        if (self == other) {
-            return 0;
-        }
+        if (self == other) return 0;

-        const docself = parser.nodeOwnerDocument(self) orelse blk: {
-            if (parser.nodeType(self) == .document) {
-                break :blk @as(*parser.Document, @ptrCast(self));
-            }
-            break :blk null;
-        };
-        const docother = parser.nodeOwnerDocument(other) orelse blk: {
-            if (parser.nodeType(other) == .document) {
-                break :blk @as(*parser.Document, @ptrCast(other));
-            }
-            break :blk null;
-        };
+        const docself = try parser.nodeOwnerDocument(self);
+        const docother = try parser.nodeOwnerDocument(other);

        // Both are in different document.
-        if (docself == null or docother == null or docself.? != docother.?) {
-            return @intFromEnum(parser.DocumentPosition.disconnected) +
-                @intFromEnum(parser.DocumentPosition.implementation_specific) +
-                @intFromEnum(parser.DocumentPosition.preceding);
-        }
-
-        if (@intFromPtr(self) == @intFromPtr(docself.?)) {
-            // if self is the document, and we already know other is in the
-            // document, then other is contained by and following self.
-            return @intFromEnum(parser.DocumentPosition.following) +
-                @intFromEnum(parser.DocumentPosition.contained_by);
-        }
-
-        const rootself = parser.nodeGetRootNode(self);
-        const rootother = parser.nodeGetRootNode(other);
-        if (rootself != rootother) {
-            return @intFromEnum(parser.DocumentPosition.disconnected) +
-                @intFromEnum(parser.DocumentPosition.implementation_specific) +
-                @intFromEnum(parser.DocumentPosition.preceding);
+        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.
@@ -347,103 +259,45 @@ pub const Node = struct {
        return 0;
    }

-    pub fn _contains(self: *parser.Node, other: *parser.Node) bool {
-        return parser.nodeContains(self, other);
+    pub fn _contains(self: *parser.Node, other: *parser.Node) !bool {
+        return try parser.nodeContains(self, other);
    }

    // Returns itself or ancestor object inheriting from Node.
    // - An Element inside a standard web page will return an HTMLDocument object representing the entire page (or <iframe>).
    // - An Element inside a shadow DOM will return the associated ShadowRoot.
    // - An Element that is not attached to a document or a shadow tree will return the root of the DOM tree it belongs to
-    const GetRootNodeResult = union(enum) {
-        shadow_root: *ShadowRoot,
-        node: Union,
-    };
-    pub fn _getRootNode(self: *parser.Node, options: ?struct { composed: bool = false }, page: *Page) !GetRootNodeResult {
-        const composed = if (options) |opts| opts.composed else false;
-
-        var current_root = parser.nodeGetRootNode(self);
-
-        while (true) {
-            const node_type = parser.nodeType(current_root);
-
-            if (node_type == .document_fragment) {
-                if (parser.documentFragmentGetHost(@ptrCast(current_root))) |host| {
-                    if (page.getNodeState(host)) |state| {
-                        if (state.shadow_root) |sr| {
-                            if (!composed) {
-                                return .{ .shadow_root = sr };
-                            }
-                            current_root = parser.nodeGetRootNode(@ptrCast(sr.host));
-                            continue;
-                        }
-                    }
-                }
-            }
-            break;
-        }
-
-        return .{ .node = try Node.toInterface(current_root) };
+    pub fn _getRootNode(self: *parser.Node, options: ?struct { composed: bool = false }) !Union {
+        if (options) |options_| if (options_.composed) {
+            log.warn(.web_api, "not implemented", .{ .feature = "getRootNode composed" });
+        };
+        return try Node.toInterface(try parser.nodeGetRootNode(self));
    }

-    pub fn _hasChildNodes(self: *parser.Node) bool {
-        return parser.nodeHasChildNodes(self);
-    }
-
-    fn is_template(self: *parser.Node) !bool {
-        if (parser.nodeType(self) != .element) {
-            return false;
-        }
-
-        const e = parser.nodeToElement(self);
-        return try parser.elementTag(e) == .template;
+    pub fn _hasChildNodes(self: *parser.Node) !bool {
+        return try parser.nodeHasChildNodes(self);
    }

    pub fn get_childNodes(self: *parser.Node, page: *Page) !NodeList {
-        // special case for template:
-        // > The Node.childNodes property of the <template> element is always empty
-        // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#usage_notes
-        if (try is_template(self)) {
-            return .{};
-        }
-
        const allocator = page.arena;
        var list: NodeList = .{};

-        var n = parser.nodeFirstChild(self) orelse return list;
+        var n = try parser.nodeFirstChild(self) orelse return list;
        while (true) {
            try list.append(allocator, n);
-            n = parser.nodeNextSibling(n) orelse return list;
+            n = try parser.nodeNextSibling(n) orelse return list;
        }
    }

    pub fn _insertBefore(self: *parser.Node, new_node: *parser.Node, ref_node_: ?*parser.Node) !Union {
-        if (ref_node_ == null) {
-            return _appendChild(self, new_node);
+        if (ref_node_) |ref_node| {
+            return Node.toInterface(try parser.nodeInsertBefore(self, new_node, ref_node));
        }
-
-        const self_owner = parser.nodeOwnerDocument(self);
-        const new_node_owner = parser.nodeOwnerDocument(new_node);
-
-        // If the node to be inserted has a different ownerDocument than the parent node,
-        // modern browsers automatically adopt the node and its descendants into
-        // the parent's ownerDocument.
-        // This process is known as adoption.
-        // (7.1) https://dom.spec.whatwg.org/#concept-node-insert
-        if (new_node_owner == null or (self_owner != null and new_node_owner.? != self_owner.?)) {
-            const w = Walker{};
-            var current = new_node;
-            while (true) {
-                current.owner = self_owner;
-                current = try w.get_next(new_node, current) orelse break;
-            }
-        }
-
-        return Node.toInterface(try parser.nodeInsertBefore(self, new_node, ref_node_.?));
+        return _appendChild(self, new_node);
    }

    pub fn _isDefaultNamespace(self: *parser.Node, namespace: ?[]const u8) !bool {
-        return parser.nodeIsDefaultNamespace(self, namespace);
+        return try parser.nodeIsDefaultNamespace(self, namespace);
    }

    pub fn _isEqualNode(self: *parser.Node, other: *parser.Node) !bool {
@@ -451,10 +305,10 @@ pub const Node = struct {
        return try parser.nodeIsEqualNode(self, other);
    }

-    pub fn _isSameNode(self: *parser.Node, other: *parser.Node) bool {
+    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 parser.nodeIsSameNode(self, other);
+        return try parser.nodeIsSameNode(self, other);
    }

    pub fn _lookupPrefix(self: *parser.Node, namespace: ?[]const u8) !?[]const u8 {
@@ -489,7 +343,7 @@ pub const Node = struct {

    // Check if the hierarchy node tree constraints are respected.
    // For now, it checks only if new nodes are not self.
-    // TODO implements the others constraints.
+    // 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| {
@@ -510,9 +364,9 @@ pub const Node = struct {
            return parser.DOMError.HierarchyRequest;
        }

-        const doc = (parser.nodeOwnerDocument(self)) orelse return;
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;

-        if (parser.nodeFirstChild(self)) |first| {
+        if (try parser.nodeFirstChild(self)) |first| {
            for (nodes) |node| {
                _ = try parser.nodeInsertBefore(self, try node.toNode(doc), first);
            }
@@ -534,7 +388,7 @@ pub const Node = struct {
            return parser.DOMError.HierarchyRequest;
        }

-        const doc = (parser.nodeOwnerDocument(self)) orelse return;
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;
        for (nodes) |node| {
            _ = try parser.nodeAppendChild(self, try node.toNode(doc));
        }
@@ -553,7 +407,7 @@ pub const Node = struct {
        // remove existing children
        try removeChildren(self);

-        const doc = (parser.nodeOwnerDocument(self)) orelse return;
+        const doc = (try parser.nodeOwnerDocument(self)) orelse return;
        // add new children
        for (nodes) |node| {
            _ = try parser.nodeAppendChild(self, try node.toNode(doc));
@@ -561,30 +415,30 @@ pub const Node = struct {
    }

    pub fn removeChildren(self: *parser.Node) !void {
-        if (!parser.nodeHasChildNodes(self)) return;
+        if (!try parser.nodeHasChildNodes(self)) return;

        const children = try parser.nodeGetChildNodes(self);
-        const ln = parser.nodeListLength(children);
+        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 = parser.nodeListItem(children, 0) orelse continue;
+            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 = parser.nodeParentNode(self) orelse return;
-        const doc = (parser.nodeOwnerDocument(parent)) orelse return;
+        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 = parser.nodePreviousSibling(s);
+                    sibling = try parser.nodePreviousSibling(s);
                    continue :CHECK;
                }
            }
@@ -592,7 +446,7 @@ pub const Node = struct {
        }

        if (sibling == null) {
-            sibling = parser.nodeFirstChild(parent);
+            sibling = try parser.nodeFirstChild(parent);
        }

        if (sibling) |ref_node| {
@@ -606,15 +460,15 @@ pub const Node = struct {
    }

    pub fn after(self: *parser.Node, nodes: []const NodeOrText) !void {
-        const parent = parser.nodeParentNode(self) orelse return;
-        const doc = (parser.nodeOwnerDocument(parent)) orelse return;
+        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 = parser.nodeNextSibling(self);
+        var sibling = try parser.nodeNextSibling(self);
        CHECK: while (sibling) |s| {
            for (nodes) |n| {
                if (n.is(s)) {
-                    sibling = parser.nodeNextSibling(s);
+                    sibling = try parser.nodeNextSibling(s);
                    continue :CHECK;
                }
            }
@@ -642,7 +496,7 @@ pub const Node = struct {
        fn toNode(self: NodeOrText, doc: *parser.Document) !*parser.Node {
            return switch (self) {
                .node => |n| n,
-                .text => |txt| @ptrCast(@alignCast(try parser.documentCreateTextNode(doc, txt))),
+                .text => |txt| @alignCast(@ptrCast(try parser.documentCreateTextNode(doc, txt))),
            };
        }

@@ -659,7 +513,210 @@ pub const Node = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.Node" {
-    try testing.htmlRunner("dom/node.html");
-    try testing.htmlRunner("dom/node_owner.html");
+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" },
+
+        .{ "let insertBefore2 = document.createElement('b')", null },
+        .{ "link.insertBefore(insertBefore2, null).localName", "b" },
+        .{ "link.childNodes[link.childNodes.length - 1].localName", "b" },
+    }, .{});
+
+    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" },
+    }, .{});
 }
--- a/src/browser/dom/node_filter.zig
+++ b/src/browser/dom/node_filter.zig
@@ -17,15 +17,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const js = @import("../js/js.zig");
-const parser = @import("../netsurf.zig");
-const Node = @import("node.zig").Node;

 pub const NodeFilter = struct {
    pub const _FILTER_ACCEPT: u16 = 1;
    pub const _FILTER_REJECT: u16 = 2;
    pub const _FILTER_SKIP: u16 = 3;
-
    pub const _SHOW_ALL: u32 = std.math.maxInt(u32);
    pub const _SHOW_ELEMENT: u32 = 0b1;
    pub const _SHOW_ATTRIBUTE: u32 = 0b10;
@@ -41,43 +37,16 @@ pub const NodeFilter = struct {
    pub const _SHOW_NOTATION: u32 = 0b100000000000;
 };

-const VerifyResult = enum { accept, skip, reject };
-
-pub fn verify(what_to_show: u32, filter: ?js.Function, node: *parser.Node) !VerifyResult {
-    const node_type = parser.nodeType(node);
-
-    // Verify that we can show this node type.
-    // Per the DOM spec, what_to_show filters which nodes to return, but should
-    // still traverse children. So we return .skip (not .reject) when the node
-    // type doesn't match.
-    if (!switch (node_type) {
-        .attribute => what_to_show & NodeFilter._SHOW_ATTRIBUTE != 0,
-        .cdata_section => what_to_show & NodeFilter._SHOW_CDATA_SECTION != 0,
-        .comment => what_to_show & NodeFilter._SHOW_COMMENT != 0,
-        .document => what_to_show & NodeFilter._SHOW_DOCUMENT != 0,
-        .document_fragment => what_to_show & NodeFilter._SHOW_DOCUMENT_FRAGMENT != 0,
-        .document_type => what_to_show & NodeFilter._SHOW_DOCUMENT_TYPE != 0,
-        .element => what_to_show & NodeFilter._SHOW_ELEMENT != 0,
-        .entity => what_to_show & NodeFilter._SHOW_ENTITY != 0,
-        .entity_reference => what_to_show & NodeFilter._SHOW_ENTITY_REFERENCE != 0,
-        .notation => what_to_show & NodeFilter._SHOW_NOTATION != 0,
-        .processing_instruction => what_to_show & NodeFilter._SHOW_PROCESSING_INSTRUCTION != 0,
-        .text => what_to_show & NodeFilter._SHOW_TEXT != 0,
-    }) return .skip;
-
-    // Verify that we aren't filtering it out.
-    if (filter) |f| {
-        const acceptance = try f.call(u16, .{try Node.toInterface(node)});
-        return switch (acceptance) {
-            NodeFilter._FILTER_ACCEPT => .accept,
-            NodeFilter._FILTER_REJECT => .reject,
-            NodeFilter._FILTER_SKIP => .skip,
-            else => .reject,
-        };
-    } else return .accept;
-}
-
 const testing = @import("../../testing.zig");
-test "Browser: DOM.NodeFilter" {
-    try testing.htmlRunner("dom/node_filter.html");
+test "Browser.DOM.NodeFilter" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "NodeFilter.FILTER_ACCEPT", "1" },
+        .{ "NodeFilter.FILTER_REJECT", "2" },
+        .{ "NodeFilter.FILTER_SKIP", "3" },
+        .{ "NodeFilter.SHOW_ALL", "4294967295" },
+        .{ "NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT", "129" },
+    }, .{});
 }
--- a/src/browser/dom/node_iterator.zig
+++ b/src/browser/dom/node_iterator.zig
@@ -1,302 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const js = @import("../js/js.zig");
-const parser = @import("../netsurf.zig");
-const NodeFilter = @import("node_filter.zig");
-const Node = @import("node.zig").Node;
-const NodeUnion = @import("node.zig").Union;
-const DOMException = @import("exceptions.zig").DOMException;
-
-// https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
-// While this is similar to TreeWalker it has its own implementation as there are several subtle differences
-// For example:
-// - nextNode returns the reference node, whereas TreeWalker returns the next node
-// - Skip and reject are equivalent for NodeIterator, for TreeWalker they are different
-pub const NodeIterator = struct {
-    pub const Exception = DOMException;
-
-    root: *parser.Node,
-    reference_node: *parser.Node,
-    what_to_show: u32,
-    filter: ?NodeIteratorOpts,
-    filter_func: ?js.Function,
-    pointer_before_current: bool = true,
-    // used to track / block recursive filters
-    is_in_callback: bool = false,
-
-    // One of the few cases where null and undefined resolve to different default.
-    // We need the raw JsObject so that we can probe the tri state:
-    // null, undefined or i32.
-    pub const WhatToShow = js.Object;
-
-    pub const NodeIteratorOpts = union(enum) {
-        function: js.Function,
-        object: struct { acceptNode: js.Function },
-    };
-
-    pub fn init(node: *parser.Node, what_to_show_: ?WhatToShow, filter: ?NodeIteratorOpts) !NodeIterator {
-        var filter_func: ?js.Function = null;
-        if (filter) |f| {
-            filter_func = switch (f) {
-                .function => |func| func,
-                .object => |o| o.acceptNode,
-            };
-        }
-
-        var what_to_show: u32 = undefined;
-        if (what_to_show_) |wts| {
-            switch (try wts.triState(NodeIterator, "what_to_show", u32)) {
-                .null => what_to_show = 0,
-                .undefined => what_to_show = NodeFilter.NodeFilter._SHOW_ALL,
-                .value => |v| what_to_show = v,
-            }
-        } else {
-            what_to_show = NodeFilter.NodeFilter._SHOW_ALL;
-        }
-
-        return .{
-            .root = node,
-            .filter = filter,
-            .reference_node = node,
-            .filter_func = filter_func,
-            .what_to_show = what_to_show,
-        };
-    }
-
-    pub fn get_filter(self: *const NodeIterator) ?NodeIteratorOpts {
-        return self.filter;
-    }
-
-    pub fn get_pointerBeforeReferenceNode(self: *const NodeIterator) bool {
-        return self.pointer_before_current;
-    }
-
-    pub fn get_referenceNode(self: *const NodeIterator) !NodeUnion {
-        return try Node.toInterface(self.reference_node);
-    }
-
-    pub fn get_root(self: *const NodeIterator) !NodeUnion {
-        return try Node.toInterface(self.root);
-    }
-
-    pub fn get_whatToShow(self: *const NodeIterator) u32 {
-        return self.what_to_show;
-    }
-
-    pub fn _nextNode(self: *NodeIterator) !?NodeUnion {
-        try self.callbackStart();
-        defer self.callbackEnd();
-
-        if (self.pointer_before_current) {
-            // Unlike TreeWalker, NodeIterator starts at the first node
-            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
-                self.pointer_before_current = false;
-                return try Node.toInterface(self.reference_node);
-            }
-        }
-
-        if (try self.firstChild(self.reference_node)) |child| {
-            self.reference_node = child;
-            self.pointer_before_current = false;
-            return try Node.toInterface(child);
-        }
-
-        var current = self.reference_node;
-        while (current != self.root) {
-            // Try to get next sibling (including .skip/.reject nodes we need to descend into)
-            if (try self.nextSiblingOrSkipReject(current)) |result| {
-                if (result.should_descend) {
-                    // This is a .skip/.reject node - try to find acceptable children within it
-                    if (try self.firstChild(result.node)) |child| {
-                        self.reference_node = child;
-                        return try Node.toInterface(child);
-                    }
-                    // No acceptable children, continue looking at this node's siblings
-                    current = result.node;
-                    continue;
-                }
-                // This is an .accept node - return it
-                self.reference_node = result.node;
-                return try Node.toInterface(result.node);
-            }
-
-            current = (parser.nodeParentNode(current)) orelse break;
-        }
-
-        return null;
-    }
-
-    pub fn _previousNode(self: *NodeIterator) !?NodeUnion {
-        try self.callbackStart();
-        defer self.callbackEnd();
-
-        if (!self.pointer_before_current) {
-            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
-                self.pointer_before_current = true;
-                // Still need to verify as last may be first as well
-                return try Node.toInterface(self.reference_node);
-            }
-        }
-        if (self.reference_node == self.root) {
-            return null;
-        }
-
-        var current = self.reference_node;
-        while (parser.nodePreviousSibling(current)) |previous| {
-            current = previous;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
-                .accept => {
-                    // Get last child if it has one.
-                    if (try self.lastChild(current)) |child| {
-                        self.reference_node = child;
-                        return try Node.toInterface(child);
-                    }
-
-                    // Otherwise, this node is our previous one.
-                    self.reference_node = current;
-                    return try Node.toInterface(current);
-                },
-                .reject, .skip => {
-                    // Get last child if it has one.
-                    if (try self.lastChild(current)) |child| {
-                        self.reference_node = child;
-                        return try Node.toInterface(child);
-                    }
-                },
-            }
-        }
-
-        if (current != self.root) {
-            if (try self.parentNode(current)) |parent| {
-                self.reference_node = parent;
-                return try Node.toInterface(parent);
-            }
-        }
-
-        return null;
-    }
-
-    pub fn _detach(self: *const NodeIterator) void {
-        // no-op as per spec
-        _ = self;
-    }
-
-    fn firstChild(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
-        const children = try parser.nodeGetChildNodes(node);
-        const child_count = parser.nodeListLength(children);
-
-        for (0..child_count) |i| {
-            const index: u32 = @intCast(i);
-            const child = (parser.nodeListItem(children, index)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
-                .accept => return child, // NOTE: Skip and reject are equivalent for NodeIterator, this is different from TreeWalker
-                .reject, .skip => if (try self.firstChild(child)) |gchild| return gchild,
-            }
-        }
-
-        return null;
-    }
-
-    fn lastChild(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
-        const children = try parser.nodeGetChildNodes(node);
-        const child_count = parser.nodeListLength(children);
-
-        var index: u32 = child_count;
-        while (index > 0) {
-            index -= 1;
-            const child = (parser.nodeListItem(children, index)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
-                .accept => return child, // NOTE: Skip and reject are equivalent for NodeIterator, this is different from TreeWalker
-                .reject, .skip => if (try self.lastChild(child)) |gchild| return gchild,
-            }
-        }
-
-        return null;
-    }
-
-    // This implementation is actually the same as :TreeWalker
-    fn parentNode(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
-        if (self.root == node) return null;
-
-        var current = node;
-        while (true) {
-            if (current == self.root) return null;
-            current = (parser.nodeParentNode(current)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
-                .accept => return current,
-                .reject, .skip => continue,
-            }
-        }
-    }
-
-    // This implementation is actually the same as :TreeWalker
-    fn nextSibling(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
-        var current = node;
-
-        while (true) {
-            current = (parser.nodeNextSibling(current)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
-                .accept => return current,
-                .skip, .reject => continue,
-            }
-        }
-
-        return null;
-    }
-
-    // Get the next sibling that is either acceptable or should be descended into (skip/reject)
-    fn nextSiblingOrSkipReject(self: *const NodeIterator, node: *parser.Node) !?struct { node: *parser.Node, should_descend: bool } {
-        var current = node;
-
-        while (true) {
-            current = (parser.nodeNextSibling(current)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
-                .accept => return .{ .node = current, .should_descend = false },
-                .skip, .reject => return .{ .node = current, .should_descend = true },
-            }
-        }
-
-        return null;
-    }
-
-    fn callbackStart(self: *NodeIterator) !void {
-        if (self.is_in_callback) {
-            // this is the correct DOMExeption
-            return error.InvalidState;
-        }
-        self.is_in_callback = true;
-    }
-
-    fn callbackEnd(self: *NodeIterator) void {
-        self.is_in_callback = false;
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: DOM.NodeIterator" {
-    try testing.htmlRunner("dom/node_iterator.html");
-}
--- a/src/browser/dom/nodelist.zig
+++ b/src/browser/dom/nodelist.zig
@@ -17,12 +17,13 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const Allocator = std.mem.Allocator;

-const js = @import("../js/js.zig");
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");

+const JsThis = @import("../env.zig").JsThis;
+const Function = @import("../env.zig").Function;
+
 const NodeUnion = @import("node.zig").Union;
 const Node = @import("node.zig").Node;

@@ -100,23 +101,16 @@ pub const NodeList = struct {

    nodes: NodesArrayList = .{},

-    pub fn deinit(self: *NodeList, allocator: Allocator) void {
-        self.nodes.deinit(allocator);
+    pub fn deinit(self: *NodeList, alloc: std.mem.Allocator) void {
+        // TODO unref all nodes
+        self.nodes.deinit(alloc);
    }

-    pub fn ensureTotalCapacity(self: *NodeList, allocator: Allocator, n: usize) !void {
-        return self.nodes.ensureTotalCapacity(allocator, n);
+    pub fn append(self: *NodeList, alloc: std.mem.Allocator, node: *parser.Node) !void {
+        try self.nodes.append(alloc, node);
    }

-    pub fn append(self: *NodeList, allocator: Allocator, node: *parser.Node) !void {
-        try self.nodes.append(allocator, node);
-    }
-
-    pub fn appendAssumeCapacity(self: *NodeList, node: *parser.Node) void {
-        self.nodes.appendAssumeCapacity(node);
-    }
-
-    pub fn get_length(self: *const NodeList) u32 {
+    pub fn get_length(self: *NodeList) u32 {
        return @intCast(self.nodes.items.len);
    }

@@ -146,10 +140,10 @@ pub const NodeList = struct {
    //     };
    // }

-    pub fn _forEach(self: *NodeList, cbk: js.Function) !void { // TODO handle thisArg
+    pub fn _forEach(self: *NodeList, cbk: Function) !void { // TODO handle thisArg
        for (self.nodes.items, 0..) |n, i| {
            const ii: u32 = @intCast(i);
-            var result: js.Function.Result = undefined;
+            var result: Function.Result = undefined;
            cbk.tryCall(void, .{ n, ii, self }, &result) catch {
                log.debug(.user_script, "forEach callback", .{ .err = result.exception, .stack = result.stack });
            };
@@ -173,7 +167,7 @@ pub const NodeList = struct {
    }

    // TODO entries() https://developer.mozilla.org/en-US/docs/Web/API/NodeList/entries
-    pub fn postAttach(self: *NodeList, js_this: js.This) !void {
+    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;
@@ -183,6 +177,22 @@ pub const NodeList = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.NodeList" {
-    try testing.htmlRunner("dom/node_list.html");
+test "Browser.DOM.NodeList" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    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",
+        },
+    }, .{});
 }
--- a/src/browser/dom/performance.zig
+++ b/src/browser/dom/performance.zig
@@ -18,77 +18,59 @@

 const std = @import("std");

-const js = @import("../js/js.zig");
 const parser = @import("../netsurf.zig");
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const Env = @import("../env.zig").Env;
 const Page = @import("../page.zig").Page;

-const milliTimestamp = @import("../../datetime.zig").milliTimestamp;
-
 pub const Interfaces = .{
    Performance,
    PerformanceEntry,
    PerformanceMark,
 };

+const MarkOptions = struct {
+    detail: ?Env.JsObject = null,
+    start_time: ?f64 = null,
+};
+
 // 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{ .internal_target_type = .performance },
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},

-    time_origin: u64,
+    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;

-    pub fn init() Performance {
-        return .{
-            .time_origin = milliTimestamp(),
+    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 get_timeOrigin(self: *const Performance) u64 {
-        return self.time_origin;
+    pub fn _now(self: *Performance) f64 {
+        return limitedResolutionMs(self.time_origin.read());
    }

-    pub fn reset(self: *Performance) void {
-        self.time_origin = milliTimestamp();
-    }
-
-    pub fn _now(self: *const Performance) u64 {
-        return milliTimestamp() - self.time_origin;
-    }
-
-    pub fn _mark(_: *Performance, name: js.String, _options: ?PerformanceMark.Options, page: *Page) !PerformanceMark {
+    pub fn _mark(_: *Performance, name: []const u8, _options: ?MarkOptions, page: *Page) !PerformanceMark {
        const mark: PerformanceMark = try .constructor(name, _options, page);
        // TODO: Should store this in an entries list
        return mark;
    }
-
-    // TODO: fn _mark should record the marks in a lookup
-    pub fn _clearMarks(_: *Performance, name: ?[]const u8) void {
-        _ = name;
-    }
-
-    // TODO: fn _measures should record the marks in a lookup
-    pub fn _clearMeasures(_: *Performance, name: ?[]const u8) void {
-        _ = name;
-    }
-
-    // TODO: fn _measures should record the marks in a lookup
-    pub fn _getEntriesByName(_: *Performance, name: []const u8, typ: ?[]const u8) []PerformanceEntry {
-        _ = name;
-        _ = typ;
-        return &.{};
-    }
-
-    // TODO: fn _measures should record the marks in a lookup
-    pub fn _getEntriesByType(_: *Performance, typ: []const u8) []PerformanceEntry {
-        _ = typ;
-        return &.{};
-    }
 };

 // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry
@@ -148,30 +130,26 @@ pub const PerformanceMark = struct {
    pub const prototype = *PerformanceEntry;

    proto: PerformanceEntry,
-    detail: ?js.Object,
+    detail: ?Env.JsObject,

-    const Options = struct {
-        detail: ?js.Object = null,
-        startTime: ?f64 = null,
-    };
-
-    pub fn constructor(name: js.String, _options: ?Options, page: *Page) !PerformanceMark {
+    pub fn constructor(name: []const u8, _options: ?MarkOptions, page: *Page) !PerformanceMark {
        const perf = &page.window.performance;

-        const options = _options orelse Options{};
-        const start_time = options.startTime orelse @as(f64, @floatFromInt(perf._now()));
+        const options = _options orelse MarkOptions{};
+        const start_time = options.start_time orelse perf._now();
+        const detail = if (options.detail) |d| try d.persist() else null;

        if (start_time < 0.0) {
            return error.TypeError;
        }

-        const detail = if (options.detail) |d| try d.persist() else null;
-        const proto = PerformanceEntry{ .name = name.string, .entry_type = .mark, .start_time = start_time };
+        const duped_name = try page.arena.dupe(u8, name);
+        const proto = PerformanceEntry{ .name = duped_name, .entry_type = .mark, .start_time = start_time };

        return .{ .proto = proto, .detail = detail };
    }

-    pub fn get_detail(self: *const PerformanceMark) ?js.Object {
+    pub fn get_detail(self: *const PerformanceMark) ?Env.JsObject {
        return self.detail;
    }
 };
@@ -179,13 +157,16 @@ pub const PerformanceMark = struct {
 const testing = @import("./../../testing.zig");

 test "Performance: get_timeOrigin" {
-    var perf = Performance.init();
+    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.2);
 }

 test "Performance: now" {
-    var perf = Performance.init();
+    var perf = Performance{ .time_origin = try std.time.Timer.start() };

    // Monotonically increasing
    var now = perf._now();
@@ -193,14 +174,30 @@ test "Performance: now" {
        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 until after > 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);
 }

-test "Browser: Performance.Mark" {
-    try testing.htmlRunner("dom/performance.html");
+test "Browser.Performance.Mark" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let performance = window.performance", "undefined" },
+        .{ "performance instanceof Performance", "true" },
+        .{ "let mark = performance.mark(\"start\")", "undefined" },
+        .{ "mark instanceof PerformanceMark", "true" },
+        .{ "mark.name", "start" },
+        .{ "mark.entryType", "mark" },
+        .{ "mark.duration", "0" },
+        .{ "mark.detail", "null" },
+    }, .{});
 }
--- a/src/browser/dom/performance_observer.zig
+++ b/src/browser/dom/performance_observer.zig
@@ -17,42 +17,18 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const js = @import("../js/js.zig");
-
-const PerformanceEntry = @import("performance.zig").PerformanceEntry;

 // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
 pub const PerformanceObserver = struct {
    pub const _supportedEntryTypes = [0][]const u8{};
-
-    pub fn constructor(cbk: js.Function) PerformanceObserver {
-        _ = cbk;
-        return .{};
-    }
-
-    pub fn _observe(self: *const PerformanceObserver, options_: ?Options) void {
-        _ = self;
-        _ = options_;
-        return;
-    }
-
-    pub fn _disconnect(self: *PerformanceObserver) void {
-        _ = self;
-    }
-
-    pub fn _takeRecords(_: *const PerformanceObserver) []PerformanceEntry {
-        return &[_]PerformanceEntry{};
-    }
-};
-
-const Options = struct {
-    buffered: ?bool = null,
-    durationThreshold: ?f64 = null,
-    entryTypes: ?[]const []const u8 = null,
-    type: ?[]const u8 = null,
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.PerformanceObserver" {
-    try testing.htmlRunner("dom/performance_observer.html");
+test "Browser.DOM.PerformanceObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "PerformanceObserver.supportedEntryTypes.length", "0" },
+    }, .{});
 }
--- a/src/browser/dom/processing_instruction.zig
+++ b/src/browser/dom/processing_instruction.zig
@@ -48,7 +48,7 @@ pub const ProcessingInstruction = struct {
    }

    pub fn get_data(self: *parser.ProcessingInstruction) !?[]const u8 {
-        return parser.nodeValue(parser.processingInstructionToNode(self));
+        return try parser.nodeValue(parser.processingInstructionToNode(self));
    }

    pub fn set_data(self: *parser.ProcessingInstruction, data: []u8) !void {
@@ -58,7 +58,7 @@ pub const ProcessingInstruction = struct {
    // 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 (parser.nodeType(other_node) != .processing_instruction) {
+        if (try parser.nodeType(other_node) != .processing_instruction) {
            return false;
        }

@@ -87,6 +87,30 @@ pub const ProcessingInstruction = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: DOM.ProcessingInstruction" {
-    try testing.htmlRunner("dom/processing_instruction.html");
+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" },
+    }, .{});
 }
--- a/src/browser/dom/range.zig
+++ b/src/browser/dom/range.zig
@@ -21,9 +21,8 @@ const std = @import("std");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;

-const Node = @import("node.zig").Node;
 const NodeUnion = @import("node.zig").Union;
-const DOMException = @import("exceptions.zig").DOMException;
+const Node = @import("node.zig").Node;

 pub const Interfaces = .{
    AbstractRange,
@@ -32,10 +31,10 @@ pub const Interfaces = .{

 pub const AbstractRange = struct {
    collapsed: bool,
-    end_node: *parser.Node,
-    end_offset: u32,
-    start_node: *parser.Node,
-    start_offset: u32,
+    end_container: *parser.Node,
+    end_offset: i32,
+    start_container: *parser.Node,
+    start_offset: i32,

    pub fn updateCollapsed(self: *AbstractRange) void {
        // TODO: Eventually, compare properly.
@@ -47,122 +46,54 @@ pub const AbstractRange = struct {
    }

    pub fn get_endContainer(self: *const AbstractRange) !NodeUnion {
-        return Node.toInterface(self.end_node);
+        return Node.toInterface(self.end_container);
    }

-    pub fn get_endOffset(self: *const AbstractRange) u32 {
+    pub fn get_endOffset(self: *const AbstractRange) i32 {
        return self.end_offset;
    }

    pub fn get_startContainer(self: *const AbstractRange) !NodeUnion {
-        return Node.toInterface(self.start_node);
+        return Node.toInterface(self.start_container);
    }

-    pub fn get_startOffset(self: *const AbstractRange) u32 {
+    pub fn get_startOffset(self: *const AbstractRange) i32 {
        return self.start_offset;
    }
 };

 pub const Range = struct {
-    pub const Exception = DOMException;
    pub const prototype = *AbstractRange;

    proto: AbstractRange,

-    pub const _START_TO_START = 0;
-    pub const _START_TO_END = 1;
-    pub const _END_TO_END = 2;
-    pub const _END_TO_START = 3;
-
    // The Range() constructor returns a newly created Range object whose start
    // and end is the global Document object.
    // https://developer.mozilla.org/en-US/docs/Web/API/Range/Range
    pub fn constructor(page: *Page) Range {
        const proto: AbstractRange = .{
            .collapsed = true,
-            .end_node = parser.documentHTMLToNode(page.window.document),
+            .end_container = parser.documentHTMLToNode(page.window.document),
            .end_offset = 0,
-            .start_node = parser.documentHTMLToNode(page.window.document),
+            .start_container = parser.documentHTMLToNode(page.window.document),
            .start_offset = 0,
        };

        return .{ .proto = proto };
    }

-    pub fn _setStart(self: *Range, node: *parser.Node, offset_: i32) !void {
-        try ensureValidOffset(node, offset_);
-        const offset: u32 = @intCast(offset_);
-        const position = compare(node, offset, self.proto.end_node, self.proto.end_offset) catch |err| switch (err) {
-            error.WrongDocument => blk: {
-                // allow a node with a different root than the current, or
-                // a disconnected one. Treat it as if it's "after", so that
-                // we also update the end_offset and end_node.
-                break :blk 1;
-            },
-            else => return err,
-        };
-
-        if (position == 1) {
-            // if we're setting the node after the current end, the end must
-            // be set too.
-            self.proto.end_offset = offset;
-            self.proto.end_node = node;
-        }
-        self.proto.start_node = node;
+    pub fn _setStart(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.start_container = node;
        self.proto.start_offset = offset;
        self.proto.updateCollapsed();
    }

-    pub fn _setStartBefore(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.start_node = parent;
-        self.proto.start_offset = index;
-    }
-
-    pub fn _setStartAfter(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.start_node = parent;
-        self.proto.start_offset = index + 1;
-    }
-
-    pub fn _setEnd(self: *Range, node: *parser.Node, offset_: i32) !void {
-        try ensureValidOffset(node, offset_);
-        const offset: u32 = @intCast(offset_);
-
-        const position = compare(node, offset, self.proto.start_node, self.proto.start_offset) catch |err| switch (err) {
-            error.WrongDocument => blk: {
-                // allow a node with a different root than the current, or
-                // a disconnected one. Treat it as if it's "before", so that
-                // we also update the end_offset and end_node.
-                break :blk -1;
-            },
-            else => return err,
-        };
-
-        if (position == -1) {
-            // if we're setting the node before the current start, the start
-            // must be set too.
-            self.proto.start_offset = offset;
-            self.proto.start_node = node;
-        }
-
-        self.proto.end_node = node;
+    pub fn _setEnd(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.end_container = node;
        self.proto.end_offset = offset;
        self.proto.updateCollapsed();
    }

-    pub fn _setEndBefore(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.end_node = parent;
-        self.proto.end_offset = index;
-    }
-
-    pub fn _setEndAfter(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.end_node = parent;
-        self.proto.end_offset = index + 1;
-    }
-
    pub fn _createContextualFragment(_: *Range, fragment: []const u8, page: *Page) !*parser.DocumentFragment {
        const document_html = page.window.document;
        const document = parser.documentHTMLToDocument(document_html);
@@ -171,15 +102,15 @@ pub const Range = struct {
    }

    pub fn _selectNodeContents(self: *Range, node: *parser.Node) !void {
-        self.proto.start_node = node;
+        self.proto.start_container = node;
        self.proto.start_offset = 0;
-        self.proto.end_node = node;
+        self.proto.end_container = node;

        // Set end_offset
-        switch (parser.nodeType(node)) {
+        switch (try parser.nodeType(node)) {
            .text, .cdata_section, .comment, .processing_instruction => {
                // For text-like nodes, end_offset should be the length of the text data
-                if (parser.nodeValue(node)) |text_data| {
+                if (try parser.nodeValue(node)) |text_data| {
                    self.proto.end_offset = @intCast(text_data.len);
                } else {
                    self.proto.end_offset = 0;
@@ -188,7 +119,7 @@ pub const Range = struct {
            else => {
                // For element and other nodes, end_offset is the number of children
                const child_nodes = try parser.nodeGetChildNodes(node);
-                const child_count = parser.nodeListLength(child_nodes);
+                const child_count = try parser.nodeListLength(child_nodes);
                self.proto.end_offset = @intCast(child_count);
            },
        }
@@ -196,89 +127,6 @@ pub const Range = struct {
        self.proto.updateCollapsed();
    }

-    // creates a copy
-    pub fn _cloneRange(self: *const Range) Range {
-        return .{
-            .proto = .{
-                .collapsed = self.proto.collapsed,
-                .end_node = self.proto.end_node,
-                .end_offset = self.proto.end_offset,
-                .start_node = self.proto.start_node,
-                .start_offset = self.proto.start_offset,
-            },
-        };
-    }
-
-    pub fn _comparePoint(self: *const Range, node: *parser.Node, offset_: i32) !i32 {
-        const start = self.proto.start_node;
-        if (parser.nodeGetRootNode(start) != parser.nodeGetRootNode(node)) {
-            // WPT really wants this error to be first. Later, when we check
-            // if the relative position is 'disconnected', it'll also catch this
-            // case, but WPT will complain because it sometimes also sends
-            // invalid offsets, and it wants WrongDocument to be raised.
-            return error.WrongDocument;
-        }
-
-        if (parser.nodeType(node) == .document_type) {
-            return error.InvalidNodeType;
-        }
-
-        try ensureValidOffset(node, offset_);
-
-        const offset: u32 = @intCast(offset_);
-        if (try compare(node, offset, start, self.proto.start_offset) == -1) {
-            return -1;
-        }
-
-        if (try compare(node, offset, self.proto.end_node, self.proto.end_offset) == 1) {
-            return 1;
-        }
-
-        return 0;
-    }
-
-    pub fn _isPointInRange(self: *const Range, node: *parser.Node, offset_: i32) !bool {
-        return self._comparePoint(node, offset_) catch |err| switch (err) {
-            error.WrongDocument => return false,
-            else => return err,
-        } == 0;
-    }
-
-    pub fn _intersectsNode(self: *const Range, node: *parser.Node) !bool {
-        const start_root = parser.nodeGetRootNode(self.proto.start_node);
-        const node_root = parser.nodeGetRootNode(node);
-        if (start_root != node_root) {
-            return false;
-        }
-
-        const parent, const index = getParentAndIndex(node) catch |err| switch (err) {
-            error.InvalidNodeType => return true, // if node has no parent, we return true.
-            else => return err,
-        };
-
-        if (try compare(parent, index + 1, self.proto.start_node, self.proto.start_offset) != 1) {
-            // node isn't after start, can't intersect
-            return false;
-        }
-
-        if (try compare(parent, index, self.proto.end_node, self.proto.end_offset) != -1) {
-            // node isn't before end, can't intersect
-            return false;
-        }
-
-        return true;
-    }
-
-    pub fn _compareBoundaryPoints(self: *const Range, how: i32, other: *const Range) !i32 {
-        return switch (how) {
-            _START_TO_START => compare(self.proto.start_node, self.proto.start_offset, other.proto.start_node, other.proto.start_offset),
-            _START_TO_END => compare(self.proto.start_node, self.proto.start_offset, other.proto.end_node, other.proto.end_offset),
-            _END_TO_END => compare(self.proto.end_node, self.proto.end_offset, other.proto.end_node, other.proto.end_offset),
-            _END_TO_START => compare(self.proto.end_node, self.proto.end_offset, other.proto.start_node, other.proto.start_offset),
-            else => error.NotSupported, // this is the correct DOM Exception to return
-        };
-    }
-
    // The Range.detach() method does nothing. It used to disable the Range
    // object and enable the browser to release associated resources. The
    // method has been kept for compatibility.
@@ -286,105 +134,45 @@ pub const Range = struct {
    pub fn _detach(_: *Range) void {}
 };

-fn ensureValidOffset(node: *parser.Node, offset: i32) !void {
-    if (offset < 0) {
-        return error.IndexSize;
-    }
-
-    // not >= because 0 seems to represent the node itself.
-    if (offset > try nodeLength(node)) {
-        return error.IndexSize;
-    }
-}
-
-fn nodeLength(node: *parser.Node) !usize {
-    switch (try isTextual(node)) {
-        true => return ((parser.nodeTextContent(node)) orelse "").len,
-        false => {
-            const children = try parser.nodeGetChildNodes(node);
-            return @intCast(parser.nodeListLength(children));
-        },
-    }
-}
-
-fn isTextual(node: *parser.Node) !bool {
-    return switch (parser.nodeType(node)) {
-        .text, .comment, .cdata_section => true,
-        else => false,
-    };
-}
-
-fn getParentAndIndex(child: *parser.Node) !struct { *parser.Node, u32 } {
-    const parent = (parser.nodeParentNode(child)) orelse return error.InvalidNodeType;
-    const children = try parser.nodeGetChildNodes(parent);
-    const ln = parser.nodeListLength(children);
-    var i: u32 = 0;
-    while (i < ln) {
-        defer i += 1;
-        const c = parser.nodeListItem(children, i) orelse continue;
-        if (c == child) {
-            return .{ parent, i };
-        }
-    }
-
-    // should not be possible to reach this point
-    return error.InvalidNodeType;
-}
-
-// implementation is largely copied from the WPT helper called getPosition in
-// the common.js of the dom folder.
-fn compare(node_a: *parser.Node, offset_a: u32, node_b: *parser.Node, offset_b: u32) !i32 {
-    if (node_a == node_b) {
-        // This is a simple and common case, where the two nodes are the same
-        // We just need to compare their offsets
-        if (offset_a == offset_b) {
-            return 0;
-        }
-        return if (offset_a < offset_b) -1 else 1;
-    }
-
-    // We're probably comparing two different nodes. "Probably", because the
-    // above case on considered the offset if the two nodes were the same
-    // as-is. They could still be the same here, if we first consider the
-    // offset.
-    const position = try Node._compareDocumentPosition(node_b, node_a);
-    if (position & @intFromEnum(parser.DocumentPosition.disconnected) == @intFromEnum(parser.DocumentPosition.disconnected)) {
-        return error.WrongDocument;
-    }
-
-    if (position & @intFromEnum(parser.DocumentPosition.following) == @intFromEnum(parser.DocumentPosition.following)) {
-        return switch (try compare(node_b, offset_b, node_a, offset_a)) {
-            -1 => 1,
-            1 => -1,
-            else => unreachable,
-        };
-    }
-
-    if (position & @intFromEnum(parser.DocumentPosition.contains) == @intFromEnum(parser.DocumentPosition.contains)) {
-        // node_a contains node_b
-        var child = node_b;
-        while (parser.nodeParentNode(child)) |parent| {
-            if (parent == node_a) {
-                // child.parentNode == node_a
-                break;
-            }
-            child = parent;
-        } else {
-            // this should not happen, because  Node._compareDocumentPosition
-            // has told us that node_a contains node_b, so one of node_b's
-            // parent's MUST be node_a. But somehow we do end up here sometimes.
-            return -1;
-        }
-
-        const child_parent, const child_index = try getParentAndIndex(child);
-        std.debug.assert(node_a == child_parent);
-        return if (offset_a <= child_index) -1 else 1;
-    }
-
-    return -1;
-}
-
 const testing = @import("../../testing.zig");
-test "Browser: Range" {
-    try testing.htmlRunner("dom/range.html");
+test "Browser.Range" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        // Test Range constructor
+        .{ "let range = new Range()", "undefined" },
+        .{ "range instanceof Range", "true" },
+        .{ "range instanceof AbstractRange", "true" },
+
+        // Test initial state - collapsed range
+        .{ "range.collapsed", "true" },
+        .{ "range.startOffset", "0" },
+        .{ "range.endOffset", "0" },
+        .{ "range.startContainer instanceof HTMLDocument", "true" },
+        .{ "range.endContainer instanceof HTMLDocument", "true" },
+
+        // Test document.createRange()
+        .{ "let docRange = document.createRange()", "undefined" },
+        .{ "docRange instanceof Range", "true" },
+        .{ "docRange.collapsed", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const container = document.getElementById('content');", null },
+
+        // Test text range
+        .{ "const commentNode = container.childNodes[7];", null },
+        .{ "commentNode.nodeValue", "comment" },
+        .{ "const textRange = document.createRange();", null },
+        .{ "textRange.selectNodeContents(commentNode)", "undefined" },
+        .{ "textRange.startOffset", "0" },
+        .{ "textRange.endOffset", "7" }, // length of `comment`
+
+        // Test Node range
+        .{ "const nodeRange = document.createRange();", null },
+        .{ "nodeRange.selectNodeContents(container)", "undefined" },
+        .{ "nodeRange.startOffset", "0" },
+        .{ "nodeRange.endOffset", "9" }, // length of container.childNodes
+    }, .{});
 }
--- a/src/browser/dom/resize_observer.zig
+++ b/src/browser/dom/resize_observer.zig
@@ -16,7 +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 js = @import("../js/js.zig");
+const Env = @import("../env.zig").Env;
 const parser = @import("../netsurf.zig");

 pub const Interfaces = .{
@@ -25,7 +25,7 @@ pub const Interfaces = .{

 // WEB IDL https://drafts.csswg.org/resize-observer/#resize-observer-interface
 pub const ResizeObserver = struct {
-    pub fn constructor(cbk: js.Function) ResizeObserver {
+    pub fn constructor(cbk: Env.Function) ResizeObserver {
        _ = cbk;
        return .{};
    }
--- a/src/browser/dom/shadow_root.zig
+++ b/src/browser/dom/shadow_root.zig
@@ -1,101 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const dump = @import("../dump.zig");
-const parser = @import("../netsurf.zig");
-
-const js = @import(".././js/js.zig");
-const Page = @import("../page.zig").Page;
-const Node = @import("node.zig").Node;
-const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
-
-// WEB IDL https://dom.spec.whatwg.org/#interface-shadowroot
-pub const ShadowRoot = struct {
-    pub const prototype = *parser.DocumentFragment;
-    pub const subtype = .node;
-
-    mode: Mode,
-    host: *parser.Element,
-    proto: *parser.DocumentFragment,
-    adopted_style_sheets: ?js.Object = null,
-
-    pub const Mode = enum {
-        open,
-        closed,
-    };
-
-    pub fn get_host(self: *const ShadowRoot) !ElementUnion {
-        return Element.toInterface(self.host);
-    }
-
-    pub fn get_adoptedStyleSheets(self: *ShadowRoot, page: *Page) !js.Object {
-        if (self.adopted_style_sheets) |obj| {
-            return obj;
-        }
-
-        const obj = try page.js.createArray(0).persist();
-        self.adopted_style_sheets = obj;
-        return obj;
-    }
-
-    pub fn set_adoptedStyleSheets(self: *ShadowRoot, sheets: js.Object) !void {
-        self.adopted_style_sheets = try sheets.persist();
-    }
-
-    pub fn get_innerHTML(self: *ShadowRoot, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeChildren(parser.documentFragmentToNode(self.proto), .{}, &aw.writer);
-        return aw.written();
-    }
-
-    pub fn set_innerHTML(self: *ShadowRoot, str_: ?[]const u8) !void {
-        const sr_doc = parser.documentFragmentToNode(self.proto);
-        const doc = parser.nodeOwnerDocument(sr_doc) orelse return parser.DOMError.WrongDocument;
-        try Node.removeChildren(sr_doc);
-        const str = str_ orelse return;
-
-        const fragment = try parser.documentParseFragmentFromStr(doc, str);
-        const fragment_node = parser.documentFragmentToNode(fragment);
-
-        // Element.set_innerHTML also has some weirdness here. It isn't clear
-        // what should and shouldn't be set. Whatever string you pass to libdom,
-        // it always creates a full HTML document, with an html, head and body
-        // element.
-        // For ShadowRoot, it appears the only the children within the body should
-        // be set.
-        const html = parser.nodeFirstChild(fragment_node) orelse return;
-        const head = parser.nodeFirstChild(html) orelse return;
-        const body = parser.nodeNextSibling(head) orelse return;
-
-        const children = try parser.nodeGetChildNodes(body);
-        const ln = parser.nodeListLength(children);
-        for (0..ln) |_| {
-            // always index 0, because nodeAppendChild moves the node out of
-            // the nodeList and into the new tree
-            const child = parser.nodeListItem(children, 0) orelse continue;
-            _ = try parser.nodeAppendChild(sr_doc, child);
-        }
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: DOM.ShadowRoot" {
-    try testing.htmlRunner("dom/shadow_root.html");
-}
--- a/src/browser/dom/text.zig
+++ b/src/browser/dom/text.zig
@@ -56,7 +56,31 @@ pub const Text = struct {
    }
 };

+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Text" {
-    try testing.htmlRunner("dom/text.html");
+test "Browser.DOM.Text" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let t = new Text('foo')", "undefined" },
+        .{ "t.data", "foo" },
+
+        .{ "let emptyt = new Text()", "undefined" },
+        .{ "emptyt.data", "" },
+    }, .{});
+
+    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" },
+    }, .{});
 }
--- a/src/browser/dom/token_list.zig
+++ b/src/browser/dom/token_list.zig
@@ -18,11 +18,12 @@

 const std = @import("std");

-const js = @import("../js/js.zig");
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const iterator = @import("../iterator/iterator.zig");

+const Function = @import("../env.zig").Function;
+const JsObject = @import("../env.zig").JsObject;
 const DOMException = @import("exceptions.zig").DOMException;

 pub const Interfaces = .{
@@ -136,10 +137,10 @@ pub const DOMTokenList = struct {
    }

    // TODO handle thisArg
-    pub fn _forEach(self: *parser.TokenList, cbk: js.Function, this_arg: js.Object) !void {
+    pub fn _forEach(self: *parser.TokenList, cbk: Function, this_arg: JsObject) !void {
        var entries = _entries(self);
        while (try entries._next()) |entry| {
-            var result: js.Function.Result = undefined;
+            var result: Function.Result = undefined;
            cbk.tryCallWithThis(void, this_arg, .{ entry.@"1", entry.@"0", self }, &result) catch {
                log.debug(.user_script, "callback error", .{
                    .err = result.exception,
@@ -168,7 +169,77 @@ pub const Iterator = struct {
    }
 };

+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.TokenList" {
-    try testing.htmlRunner("dom/token_list.html");
+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" },
+    }, .{});
 }
--- a/src/browser/dom/tree_walker.zig
+++ b/src/browser/dom/tree_walker.zig
@@ -17,33 +17,26 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const js = @import("../js/js.zig");
 const parser = @import("../netsurf.zig");

-const NodeFilter = @import("node_filter.zig");
-const Node = @import("node.zig").Node;
-const NodeUnion = @import("node.zig").Union;
+const NodeFilter = @import("node_filter.zig").NodeFilter;
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;

 // https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
 pub const TreeWalker = struct {
    root: *parser.Node,
    current_node: *parser.Node,
    what_to_show: u32,
-    filter: ?TreeWalkerOpts,
-    filter_func: ?js.Function,
-
-    // One of the few cases where null and undefined resolve to different default.
-    // We need the raw JsObject so that we can probe the tri state:
-    // null, undefined or i32.
-    pub const WhatToShow = js.Object;
+    filter: ?Env.Function,

    pub const TreeWalkerOpts = union(enum) {
-        function: js.Function,
-        object: struct { acceptNode: js.Function },
+        function: Env.Function,
+        object: struct { acceptNode: Env.Function },
    };

-    pub fn init(node: *parser.Node, what_to_show_: ?WhatToShow, filter: ?TreeWalkerOpts) !TreeWalker {
-        var filter_func: ?js.Function = null;
+    pub fn init(node: *parser.Node, what_to_show: ?u32, filter: ?TreeWalkerOpts) !TreeWalker {
+        var filter_func: ?Env.Function = null;

        if (filter) |f| {
            filter_func = switch (f) {
@@ -52,39 +45,61 @@ pub const TreeWalker = struct {
            };
        }

-        var what_to_show: u32 = undefined;
-        if (what_to_show_) |wts| {
-            switch (try wts.triState(TreeWalker, "what_to_show", u32)) {
-                .null => what_to_show = 0,
-                .undefined => what_to_show = NodeFilter.NodeFilter._SHOW_ALL,
-                .value => |v| what_to_show = v,
-            }
-        } else {
-            what_to_show = NodeFilter.NodeFilter._SHOW_ALL;
-        }
-
        return .{
            .root = node,
            .current_node = node,
-            .what_to_show = what_to_show,
-            .filter = filter,
-            .filter_func = filter_func,
+            .what_to_show = what_to_show orelse NodeFilter._SHOW_ALL,
+            .filter = filter_func,
        };
    }

-    pub fn get_root(self: *TreeWalker) !NodeUnion {
-        return try Node.toInterface(self.root);
+    const VerifyResult = enum { accept, skip, reject };
+
+    fn verify(self: *const TreeWalker, node: *parser.Node) !VerifyResult {
+        const node_type = try parser.nodeType(node);
+        const what_to_show = self.what_to_show;
+
+        // Verify that we can show this node type.
+        if (!switch (node_type) {
+            .attribute => what_to_show & NodeFilter._SHOW_ATTRIBUTE != 0,
+            .cdata_section => what_to_show & NodeFilter._SHOW_CDATA_SECTION != 0,
+            .comment => what_to_show & NodeFilter._SHOW_COMMENT != 0,
+            .document => what_to_show & NodeFilter._SHOW_DOCUMENT != 0,
+            .document_fragment => what_to_show & NodeFilter._SHOW_DOCUMENT_FRAGMENT != 0,
+            .document_type => what_to_show & NodeFilter._SHOW_DOCUMENT_TYPE != 0,
+            .element => what_to_show & NodeFilter._SHOW_ELEMENT != 0,
+            .entity => what_to_show & NodeFilter._SHOW_ENTITY != 0,
+            .entity_reference => what_to_show & NodeFilter._SHOW_ENTITY_REFERENCE != 0,
+            .notation => what_to_show & NodeFilter._SHOW_NOTATION != 0,
+            .processing_instruction => what_to_show & NodeFilter._SHOW_PROCESSING_INSTRUCTION != 0,
+            .text => what_to_show & NodeFilter._SHOW_TEXT != 0,
+        }) return .reject;
+
+        // Verify that we aren't filtering it out.
+        if (self.filter) |f| {
+            const filter = try f.call(u32, .{node});
+            return switch (filter) {
+                NodeFilter._FILTER_ACCEPT => .accept,
+                NodeFilter._FILTER_REJECT => .reject,
+                NodeFilter._FILTER_SKIP => .skip,
+                else => .reject,
+            };
+        } else return .accept;
    }

-    pub fn get_currentNode(self: *TreeWalker) !NodeUnion {
-        return try Node.toInterface(self.current_node);
+    pub fn get_root(self: *TreeWalker) *parser.Node {
+        return self.root;
+    }
+
+    pub fn get_currentNode(self: *TreeWalker) *parser.Node {
+        return self.current_node;
    }

    pub fn get_whatToShow(self: *TreeWalker) u32 {
        return self.what_to_show;
    }

-    pub fn get_filter(self: *TreeWalker) ?TreeWalkerOpts {
+    pub fn get_filter(self: *TreeWalker) ?Env.Function {
        return self.filter;
    }

@@ -94,13 +109,13 @@ pub const TreeWalker = struct {

    fn firstChild(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
        const children = try parser.nodeGetChildNodes(node);
-        const child_count = parser.nodeListLength(children);
+        const child_count = try parser.nodeListLength(children);

        for (0..child_count) |i| {
            const index: u32 = @intCast(i);
-            const child = (parser.nodeListItem(children, index)) orelse return null;
+            const child = (try parser.nodeListItem(children, index)) orelse return null;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
+            switch (try self.verify(child)) {
                .accept => return child,
                .reject => continue,
                .skip => if (try self.firstChild(child)) |gchild| return gchild,
@@ -112,14 +127,14 @@ pub const TreeWalker = struct {

    fn lastChild(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
        const children = try parser.nodeGetChildNodes(node);
-        const child_count = parser.nodeListLength(children);
+        const child_count = try parser.nodeListLength(children);

        var index: u32 = child_count;
        while (index > 0) {
            index -= 1;
-            const child = (parser.nodeListItem(children, index)) orelse return null;
+            const child = (try parser.nodeListItem(children, index)) orelse return null;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
+            switch (try self.verify(child)) {
                .accept => return child,
                .reject => continue,
                .skip => if (try self.lastChild(child)) |gchild| return gchild,
@@ -133,9 +148,9 @@ pub const TreeWalker = struct {
        var current = node;

        while (true) {
-            current = (parser.nodeNextSibling(current)) orelse return null;
+            current = (try parser.nodeNextSibling(current)) orelse return null;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                .accept => return current,
                .skip, .reject => continue,
            }
@@ -144,30 +159,13 @@ pub const TreeWalker = struct {
        return null;
    }

-    // Get the next sibling that is either acceptable or should be descended into (skip)
-    fn nextSiblingOrSkip(self: *const TreeWalker, node: *parser.Node) !?struct { node: *parser.Node, should_descend: bool } {
-        var current = node;
-
-        while (true) {
-            current = (parser.nodeNextSibling(current)) orelse return null;
-
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
-                .accept => return .{ .node = current, .should_descend = false },
-                .skip => return .{ .node = current, .should_descend = true },
-                .reject => continue,
-            }
-        }
-
-        return null;
-    }
-
    fn previousSibling(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
        var current = node;

        while (true) {
-            current = (parser.nodePreviousSibling(current)) orelse return null;
+            current = (try parser.nodePreviousSibling(current)) orelse return null;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                .accept => return current,
                .skip, .reject => continue,
            }
@@ -182,112 +180,93 @@ pub const TreeWalker = struct {
        var current = node;
        while (true) {
            if (current == self.root) return null;
-            current = (parser.nodeParentNode(current)) orelse return null;
+            current = (try parser.nodeParentNode(current)) orelse return null;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                .accept => return current,
                .reject, .skip => continue,
            }
        }
    }

-    pub fn _firstChild(self: *TreeWalker) !?NodeUnion {
+    pub fn _firstChild(self: *TreeWalker) !?*parser.Node {
        if (try self.firstChild(self.current_node)) |child| {
            self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
        }

        return null;
    }

-    pub fn _lastChild(self: *TreeWalker) !?NodeUnion {
+    pub fn _lastChild(self: *TreeWalker) !?*parser.Node {
        if (try self.lastChild(self.current_node)) |child| {
            self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
        }

        return null;
    }

-    pub fn _nextNode(self: *TreeWalker) !?NodeUnion {
-        var current = self.current_node;
-
-        // First, try to go to first child of current node
-        if (try self.firstChild(current)) |child| {
+    pub fn _nextNode(self: *TreeWalker) !?*parser.Node {
+        if (try self.firstChild(self.current_node)) |child| {
            self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
        }

-        // No acceptable children, move to next node in tree
+        var current = self.current_node;
        while (current != self.root) {
-            const result = try self.nextSiblingOrSkip(current) orelse {
-                // No next sibling, go up to parent and continue
-                // or, if there is no parent, we're done
-                current = (parser.nodeParentNode(current)) orelse break;
-                continue;
-            };
-
-            if (!result.should_descend) {
-                // This is an .accept node - return it
-                self.current_node = result.node;
-                return try Node.toInterface(result.node);
+            if (try self.nextSibling(current)) |sibling| {
+                self.current_node = sibling;
+                return sibling;
            }

-            // This is a .skip node - try to find acceptable children within it
-            if (try self.firstChild(result.node)) |child| {
-                self.current_node = child;
-                return try Node.toInterface(child);
-            }
-            // No acceptable children, continue looking at this node's siblings
-            current = result.node;
+            current = (try parser.nodeParentNode(current)) orelse break;
        }

        return null;
    }

-    pub fn _nextSibling(self: *TreeWalker) !?NodeUnion {
+    pub fn _nextSibling(self: *TreeWalker) !?*parser.Node {
        if (try self.nextSibling(self.current_node)) |sibling| {
            self.current_node = sibling;
-            return try Node.toInterface(sibling);
+            return sibling;
        }

        return null;
    }

-    pub fn _parentNode(self: *TreeWalker) !?NodeUnion {
+    pub fn _parentNode(self: *TreeWalker) !?*parser.Node {
        if (try self.parentNode(self.current_node)) |parent| {
            self.current_node = parent;
-            return try Node.toInterface(parent);
+            return parent;
        }

        return null;
    }

-    pub fn _previousNode(self: *TreeWalker) !?NodeUnion {
-        if (self.current_node == self.root) return null;
-
+    pub fn _previousNode(self: *TreeWalker) !?*parser.Node {
        var current = self.current_node;
-        while (parser.nodePreviousSibling(current)) |previous| {
+        while (try parser.nodePreviousSibling(current)) |previous| {
            current = previous;

-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                .accept => {
                    // Get last child if it has one.
                    if (try self.lastChild(current)) |child| {
                        self.current_node = child;
-                        return try Node.toInterface(child);
+                        return child;
                    }

                    // Otherwise, this node is our previous one.
                    self.current_node = current;
-                    return try Node.toInterface(current);
+                    return current;
                },
                .reject => continue,
                .skip => {
                    // Get last child if it has one.
                    if (try self.lastChild(current)) |child| {
                        self.current_node = child;
-                        return try Node.toInterface(child);
+                        return child;
                    }
                },
            }
@@ -296,17 +275,17 @@ pub const TreeWalker = struct {
        if (current != self.root) {
            if (try self.parentNode(current)) |parent| {
                self.current_node = parent;
-                return try Node.toInterface(parent);
+                return parent;
            }
        }

        return null;
    }

-    pub fn _previousSibling(self: *TreeWalker) !?NodeUnion {
+    pub fn _previousSibling(self: *TreeWalker) !?*parser.Node {
        if (try self.previousSibling(self.current_node)) |sibling| {
            self.current_node = sibling;
-            return try Node.toInterface(sibling);
+            return sibling;
        }

        return null;
--- a/src/browser/dom/walker.zig
+++ b/src/browser/dom/walker.zig
@@ -44,39 +44,39 @@ pub const WalkerDepthFirst = struct {
        var n = cur orelse root;

        // TODO deinit next
-        if (parser.nodeFirstChild(n)) |next| {
+        if (try parser.nodeFirstChild(n)) |next| {
            return next;
        }

        // TODO deinit next
-        if (parser.nodeNextSibling(n)) |next| {
+        if (try parser.nodeNextSibling(n)) |next| {
            return next;
        }

        // TODO deinit parent
        // Back to the parent of cur.
        // If cur has no parent, then the iteration is over.
-        var parent = parser.nodeParentNode(n) orelse return null;
+        var parent = try parser.nodeParentNode(n) orelse return null;

        // TODO deinit lastchild
-        var lastchild = parser.nodeLastChild(parent);
+        var lastchild = try parser.nodeLastChild(parent);
        while (n != root and n == lastchild) {
            n = parent;

            // TODO deinit parent
            // Back to the prev's parent.
            // If prev has no parent, then the loop must stop.
-            parent = parser.nodeParentNode(n) orelse break;
+            parent = try parser.nodeParentNode(n) orelse break;

            // TODO deinit lastchild
-            lastchild = parser.nodeLastChild(parent);
+            lastchild = try parser.nodeLastChild(parent);
        }

        if (n == root) {
            return null;
        }

-        return parser.nodeNextSibling(n);
+        return try parser.nodeNextSibling(n);
    }
 };

@@ -84,14 +84,14 @@ pub const WalkerDepthFirst = struct {
 pub const WalkerChildren = struct {
    pub fn get_next(_: WalkerChildren, root: *parser.Node, cur: ?*parser.Node) !?*parser.Node {
        // On walk start, we return the first root's child.
-        if (cur == null) return parser.nodeFirstChild(root);
+        if (cur == null) return try parser.nodeFirstChild(root);

        // If cur is root, then return null.
        // This is a special case, if the root is included in the walk, we
        // don't want to go further to find children.
        if (root == cur.?) return null;

-        return parser.nodeNextSibling(cur.?);
+        return try parser.nodeNextSibling(cur.?);
    }
 };

--- a/src/browser/dump.zig
+++ b/src/browser/dump.zig
@@ -19,36 +19,22 @@
 const std = @import("std");

 const parser = @import("netsurf.zig");
-const Page = @import("page.zig").Page;
 const Walker = @import("dom/walker.zig").WalkerChildren;

-pub const Opts = struct {
-    // set to include element shadowroots in the dump
-    page: ?*const Page = null,
-
-    strip_mode: StripMode = .{},
-
-    pub const StripMode = struct {
-        js: bool = false,
-        ui: bool = false,
-        css: bool = false,
-    };
-};
-
 // writer must be a std.io.Writer
-pub fn writeHTML(doc: *parser.Document, opts: Opts, writer: *std.Io.Writer) !void {
+pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
    try writer.writeAll("<!DOCTYPE html>\n");
-    try writeChildren(parser.documentToNode(doc), opts, writer);
+    try writeChildren(parser.documentToNode(doc), writer);
    try writer.writeAll("\n");
 }

 // Spec: https://www.w3.org/TR/xml/#sec-prolog-dtd
-pub fn writeDocType(doc_type: *parser.DocumentType, writer: *std.Io.Writer) !void {
+pub fn writeDocType(doc_type: *parser.DocumentType, writer: anytype) !void {
    try writer.writeAll("<!DOCTYPE ");
    try writer.writeAll(try parser.documentTypeGetName(doc_type));

-    const public_id = parser.documentTypeGetPublicId(doc_type);
-    const system_id = parser.documentTypeGetSystemId(doc_type);
+    const public_id = try parser.documentTypeGetPublicId(doc_type);
+    const system_id = try parser.documentTypeGetSystemId(doc_type);
    if (public_id.len != 0 and system_id.len != 0) {
        try writer.writeAll(" PUBLIC \"");
        try writeEscapedAttributeValue(writer, public_id);
@@ -68,15 +54,10 @@ pub fn writeDocType(doc_type: *parser.DocumentType, writer: *std.Io.Writer) !voi
    try writer.writeAll(">");
 }

-pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerror!void {
-    switch (parser.nodeType(node)) {
+pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
+    switch (try parser.nodeType(node)) {
        .element => {
            // open the tag
-            const tag_type = try parser.nodeHTMLGetTagType(node) orelse .undef;
-            if (try isStripped(tag_type, node, opts.strip_mode)) {
-                return;
-            }
-
            const tag = try parser.nodeLocalName(node);
            try writer.writeAll("<");
            try writer.writeAll(tag);
@@ -98,23 +79,15 @@ pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerro

            try writer.writeAll(">");

-            if (opts.page) |page| {
-                if (page.getNodeState(node)) |state| {
-                    if (state.shadow_root) |sr| {
-                        try writeChildren(@ptrCast(@alignCast(sr.proto)), opts, writer);
-                    }
-                }
-            }
-
            // void elements can't have any content.
            if (try isVoid(parser.nodeToElement(node))) return;

-            if (tag_type == .script) {
-                try writer.writeAll(parser.nodeTextContent(node) orelse "");
+            if (try parser.elementHTMLGetTagType(@ptrCast(node)) == .script) {
+                try writer.writeAll(try parser.nodeTextContent(node) orelse "");
            } else {
                // write the children
                // TODO avoid recursion
-                try writeChildren(node, opts, writer);
+                try writeChildren(node, writer);
            }

            // close the tag
@@ -123,17 +96,17 @@ pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerro
            try writer.writeAll(">");
        },
        .text => {
-            const v = parser.nodeValue(node) orelse return;
+            const v = try parser.nodeValue(node) orelse return;
            try writeEscapedTextNode(writer, v);
        },
        .cdata_section => {
-            const v = parser.nodeValue(node) orelse return;
+            const v = try parser.nodeValue(node) orelse return;
            try writer.writeAll("<![CDATA[");
            try writer.writeAll(v);
            try writer.writeAll("]]>");
        },
        .comment => {
-            const v = parser.nodeValue(node) orelse return;
+            const v = try parser.nodeValue(node) orelse return;
            try writer.writeAll("<!--");
            try writer.writeAll(v);
            try writer.writeAll("-->");
@@ -156,79 +129,19 @@ pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerro
 }

 // writer must be a std.io.Writer
-pub fn writeChildren(root: *parser.Node, opts: Opts, writer: *std.Io.Writer) !void {
+pub fn writeChildren(root: *parser.Node, writer: anytype) !void {
    const walker = Walker{};
    var next: ?*parser.Node = null;
    while (true) {
        next = try walker.get_next(root, next) orelse break;
-        try writeNode(next.?, opts, writer);
+        try writeNode(next.?, writer);
    }
 }

-fn isStripped(tag_type: parser.Tag, node: *parser.Node, strip_mode: Opts.StripMode) !bool {
-    if (strip_mode.js and try isJsRelated(tag_type, node)) {
-        return true;
-    }
-
-    if (strip_mode.css and try isCssRelated(tag_type, node)) {
-        return true;
-    }
-
-    if (strip_mode.ui and try isUIRelated(tag_type, node)) {
-        return true;
-    }
-    return false;
-}
-
-fn isJsRelated(tag_type: parser.Tag, node: *parser.Node) !bool {
-    if (tag_type == .script) {
-        return true;
-    }
-    if (tag_type == .link) {
-        const el = parser.nodeToElement(node);
-        const as = try parser.elementGetAttribute(el, "as") orelse return false;
-        if (!std.ascii.eqlIgnoreCase(as, "script")) {
-            return false;
-        }
-
-        const rel = try parser.elementGetAttribute(el, "rel") orelse return false;
-        return std.ascii.eqlIgnoreCase(rel, "preload");
-    }
-    return false;
-}
-
-fn isCssRelated(tag_type: parser.Tag, node: *parser.Node) !bool {
-    if (tag_type == .style) {
-        return true;
-    }
-    if (tag_type == .link) {
-        const el = parser.nodeToElement(node);
-        const rel = try parser.elementGetAttribute(el, "rel") orelse return false;
-        return std.ascii.eqlIgnoreCase(rel, "stylesheet");
-    }
-    return false;
-}
-
-fn isUIRelated(tag_type: parser.Tag, node: *parser.Node) !bool {
-    if (try isCssRelated(tag_type, node)) {
-        return true;
-    }
-    if (tag_type == .img or tag_type == .picture or tag_type == .video) {
-        return true;
-    }
-    if (tag_type == .undef) {
-        const name = try parser.nodeLocalName(node);
-        if (std.mem.eql(u8, name, "svg")) {
-            return true;
-        }
-    }
-    return false;
-}
-
 // area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
 // https://html.spec.whatwg.org/#void-elements
 fn isVoid(elem: *parser.Element) !bool {
-    const tag = try parser.elementTag(elem);
+    const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(elem)));
    return switch (tag) {
        .area, .base, .br, .col, .embed, .hr, .img, .input, .link => true,
        .meta, .source, .track, .wbr => true,
@@ -236,10 +149,10 @@ fn isVoid(elem: *parser.Element) !bool {
    };
 }

-fn writeEscapedTextNode(writer: *std.Io.Writer, value: []const u8) !void {
+fn writeEscapedTextNode(writer: anytype, value: []const u8) !void {
    var v = value;
    while (v.len > 0) {
-        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>', 194 }) orelse {
+        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>' }) orelse {
            return writer.writeAll(v);
        };
        try writer.writeAll(v[0..index]);
@@ -247,22 +160,13 @@ fn writeEscapedTextNode(writer: *std.Io.Writer, value: []const u8) !void {
            '&' => try writer.writeAll("&amp;"),
            '<' => try writer.writeAll("&lt;"),
            '>' => try writer.writeAll("&gt;"),
-            194 => {
-                // non breaking space
-                if (v.len > index + 1 and v[index + 1] == 160) {
-                    try writer.writeAll("&nbsp;");
-                    v = v[index + 2 ..];
-                    continue;
-                }
-                try writer.writeByte(194);
-            },
            else => unreachable,
        }
        v = v[index + 1 ..];
    }
 }

-fn writeEscapedAttributeValue(writer: *std.Io.Writer, value: []const u8) !void {
+fn writeEscapedAttributeValue(writer: anytype, value: []const u8) !void {
    var v = value;
    while (v.len > 0) {
        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>', '"' }) orelse {
@@ -282,7 +186,7 @@ fn writeEscapedAttributeValue(writer: *std.Io.Writer, value: []const u8) !void {

 const testing = std.testing;
 test "dump.writeHTML" {
-    parser.init();
+    try parser.init();
    defer parser.deinit();

    try testWriteHTML(
@@ -327,13 +231,13 @@ fn testWriteHTML(comptime expected_body: []const u8, src: []const u8) !void {
 }

 fn testWriteFullHTML(comptime expected: []const u8, src: []const u8) !void {
-    var aw = std.Io.Writer.Allocating.init(testing.allocator);
-    defer aw.deinit();
+    var buf = std.ArrayListUnmanaged(u8){};
+    defer buf.deinit(testing.allocator);

    const doc_html = try parser.documentHTMLParseFromStr(src);
    defer parser.documentHTMLClose(doc_html) catch {};

    const doc = parser.documentHTMLToDocument(doc_html);
-    try writeHTML(doc, .{}, &aw.writer);
-    try testing.expectEqualStrings(expected, aw.written());
+    try writeHTML(doc, buf.writer(testing.allocator));
+    try testing.expectEqualStrings(expected, buf.items);
 }
--- a/src/browser/encoding/TextDecoder.zig
+++ b/src/browser/encoding/TextDecoder.zig
@@ -1,102 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../../log.zig");
-
-const Page = @import("../page.zig").Page;
-
-// https://encoding.spec.whatwg.org/#interface-textdecoder
-const TextDecoder = @This();
-
-const SupportedLabels = enum {
-    utf8,
-    @"utf-8",
-    @"unicode-1-1-utf-8",
-};
-
-const Options = struct {
-    fatal: bool = false,
-    ignoreBOM: bool = false,
-};
-
-fatal: bool,
-ignore_bom: bool,
-stream: std.ArrayList(u8),
-
-pub fn constructor(label_: ?[]const u8, opts_: ?Options) !TextDecoder {
-    if (label_) |l| {
-        _ = std.meta.stringToEnum(SupportedLabels, l) orelse {
-            log.warn(.web_api, "not implemented", .{ .feature = "TextDecoder label", .label = l });
-            return error.NotImplemented;
-        };
-    }
-    const opts = opts_ orelse Options{};
-    return .{
-        .stream = .empty,
-        .fatal = opts.fatal,
-        .ignore_bom = opts.ignoreBOM,
-    };
-}
-
-pub fn get_encoding(_: *const TextDecoder) []const u8 {
-    return "utf-8";
-}
-
-pub fn get_ignoreBOM(self: *const TextDecoder) bool {
-    return self.ignore_bom;
-}
-
-pub fn get_fatal(self: *const TextDecoder) bool {
-    return self.fatal;
-}
-
-const DecodeOptions = struct {
-    stream: bool = false,
-};
-pub fn _decode(self: *TextDecoder, str_: ?[]const u8, opts_: ?DecodeOptions, page: *Page) ![]const u8 {
-    var str = str_ orelse return "";
-    const opts: DecodeOptions = opts_ orelse .{};
-
-    if (self.stream.items.len > 0) {
-        try self.stream.appendSlice(page.arena, str);
-        str = self.stream.items;
-    }
-
-    if (self.fatal and !std.unicode.utf8ValidateSlice(str)) {
-        if (opts.stream) {
-            if (self.stream.items.len == 0) {
-                try self.stream.appendSlice(page.arena, str);
-            }
-            return "";
-        }
-        return error.InvalidUtf8;
-    }
-
-    self.stream.clearRetainingCapacity();
-    if (self.ignore_bom == false and std.mem.startsWith(u8, str, &.{ 0xEF, 0xBB, 0xBF })) {
-        return str[3..];
-    }
-
-    return str;
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: Encoding.TextDecoder" {
-    try testing.htmlRunner("encoding/decoder.html");
-}
--- a/src/browser/encoding/TextEncoder.zig
+++ b/src/browser/encoding/TextEncoder.zig
@@ -1,48 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const js = @import("../js/js.zig");
-
-// https://encoding.spec.whatwg.org/#interface-textencoder
-const TextEncoder = @This();
-
-pub fn constructor() !TextEncoder {
-    return .{};
-}
-
-pub fn get_encoding(_: *const TextEncoder) []const u8 {
-    return "utf-8";
-}
-
-pub fn _encode(_: *const TextEncoder, v: []const u8) !js.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" {
-    try testing.htmlRunner("encoding/encoder.html");
-}
--- a/src/browser/encoding/text_encoder.zig
+++ b/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" },
+    }, .{});
+}
--- a/src/browser/env.zig
+++ b/src/browser/env.zig
@@ -0,0 +1,45 @@
+const std = @import("std");
+
+const Page = @import("page.zig").Page;
+const js = @import("../runtime/js.zig");
+const generate = @import("../runtime/generate.zig");
+
+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(*Page, WebApis);
+    //
+    // If there's a compile time error witht he Env, it's type will be readable,
+    // i.e.: runtime.js.Env(*browser.env.Page, 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(*Page, Interfaces);
+    //
+    // Because Interfaces is an anynoumous type, it doesn't have a friendly name
+    // and errors would be something like:
+    //   runtime.js.Env(*browser.Page, .{...A HUNDRED TYPES...})
+    pub const Interfaces = generate.Tuple(.{
+        @import("crypto/crypto.zig").Crypto,
+        @import("console/console.zig").Console,
+        @import("css/css.zig").Interfaces,
+        @import("cssom/cssom.zig").Interfaces,
+        @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,
+        @import("webcomponents/webcomponents.zig").Interfaces,
+    });
+};
+
+pub const JsThis = Env.JsThis;
+pub const JsObject = Env.JsObject;
+pub const Function = Env.Function;
+pub const Env = js.Env(*Page, WebApis);
+pub const Global = @import("html/window.zig").Window;
--- a/src/browser/events/PageTransitionEvent.zig
+++ b/src/browser/events/PageTransitionEvent.zig
@@ -1,84 +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 log = @import("../../log.zig");
-const Window = @import("../html/window.zig").Window;
-
-const parser = @import("../netsurf.zig");
-const Event = @import("../events/event.zig").Event;
-
-// https://developer.mozilla.org/en-US/docs/Web/API/PageTransitionEvent
-const PageTransitionEvent = @This();
-
-pub const prototype = *Event;
-pub const union_make_copy = true;
-
-pub const EventInit = struct {
-    persisted: ?bool,
-};
-
-proto: parser.Event,
-persisted: bool,
-
-pub fn constructor(event_type: []const u8, opts: EventInit) !PageTransitionEvent {
-    const event = try parser.eventCreate();
-    defer parser.eventDestroy(event);
-
-    try parser.eventInit(event, event_type, .{});
-    parser.eventSetInternalType(event, .page_transition_event);
-
-    return .{
-        .proto = event.*,
-        .persisted = opts.persisted orelse false,
-    };
-}
-
-const PageTransitionKind = enum { show, hide };
-
-pub fn dispatch(window: *Window, kind: PageTransitionKind, persisted: bool) void {
-    const evt_type = switch (kind) {
-        .show => "pageshow",
-        .hide => "pagehide",
-    };
-
-    log.debug(.script_event, "dispatch event", .{
-        .type = evt_type,
-        .source = "navigation",
-    });
-
-    var evt = PageTransitionEvent.constructor(evt_type, .{ .persisted = persisted }) catch |err| {
-        log.err(.app, "event constructor error", .{
-            .err = err,
-            .type = evt_type,
-            .source = "navigation",
-        });
-
-        return;
-    };
-
-    _ = parser.eventTargetDispatchEvent(
-        @as(*parser.EventTarget, @ptrCast(window)),
-        &evt.proto,
-    ) catch |err| {
-        log.err(.app, "dispatch event error", .{
-            .err = err,
-            .type = evt_type,
-            .source = "navigation",
-        });
-    };
-}
--- a/src/browser/events/composition_event.zig
+++ b/src/browser/events/composition_event.zig
@@ -1,57 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const parser = @import("../netsurf.zig");
-
-// https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
-pub const CompositionEvent = struct {
-    data: []const u8,
-    proto: parser.Event,
-
-    pub const union_make_copy = true;
-    pub const prototype = *parser.Event;
-
-    pub const ConstructorOptions = struct {
-        data: []const u8 = "",
-    };
-
-    pub fn constructor(event_type: []const u8, options_: ?ConstructorOptions) !CompositionEvent {
-        const options: ConstructorOptions = options_ orelse .{};
-
-        const event = try parser.eventCreate();
-        defer parser.eventDestroy(event);
-        try parser.eventInit(event, event_type, .{});
-        parser.eventSetInternalType(event, .composition_event);
-
-        return .{
-            .proto = event.*,
-            .data = options.data,
-        };
-    }
-
-    pub fn get_data(self: *const CompositionEvent) []const u8 {
-        return self.data;
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: Events.Composition" {
-    try testing.htmlRunner("events/composition.html");
-}
--- a/src/browser/events/custom_event.zig
+++ b/src/browser/events/custom_event.zig
@@ -16,11 +16,9 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

-const js = @import("../js/js.zig");
 const parser = @import("../netsurf.zig");
 const Event = @import("event.zig").Event;
-
-const netsurf = @import("../netsurf.zig");
+const JsObject = @import("../env.zig").JsObject;

 // https://dom.spec.whatwg.org/#interface-customevent
 pub const CustomEvent = struct {
@@ -28,13 +26,13 @@ pub const CustomEvent = struct {
    pub const union_make_copy = true;

    proto: parser.Event,
-    detail: ?js.Object,
+    detail: ?JsObject,

    const CustomEventInit = struct {
        bubbles: bool = false,
        cancelable: bool = false,
        composed: bool = false,
-        detail: ?js.Object = null,
+        detail: ?JsObject = null,
    };

    pub fn constructor(event_type: []const u8, opts_: ?CustomEventInit) !CustomEvent {
@@ -54,33 +52,29 @@ pub const CustomEvent = struct {
        };
    }

-    pub fn get_detail(self: *CustomEvent) ?js.Object {
+    pub fn get_detail(self: *CustomEvent) ?JsObject {
        return self.detail;
    }
-
-    // Initializes an already created `CustomEvent`.
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
-    pub fn _initCustomEvent(
-        self: *CustomEvent,
-        event_type: []const u8,
-        can_bubble: bool,
-        cancelable: bool,
-        maybe_detail: ?js.Object,
-    ) !void {
-        // This function can only be called after the constructor has called.
-        // So we assume proto is initialized already by constructor.
-        self.proto.type = try netsurf.strFromData(event_type);
-        self.proto.bubble = can_bubble;
-        self.proto.cancelable = cancelable;
-        self.proto.is_initialised = true;
-        // Detail is stored separately.
-        if (maybe_detail) |detail| {
-            self.detail = try detail.persist();
-        }
-    }
 };

 const testing = @import("../../testing.zig");
-test "Browser: Events.Custom" {
-    try testing.htmlRunner("events/custom.html");
+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" },
+    }, .{});
 }
--- a/src/browser/events/event.zig
+++ b/src/browser/events/event.zig
@@ -17,15 +17,13 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const js = @import("../js/js.zig");
 const Allocator = std.mem.Allocator;

 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const generate = @import("../js/generate.zig");
+const generate = @import("../../runtime/generate.zig");

 const Page = @import("../page.zig").Page;
-const Node = @import("../dom/node.zig").Node;
 const DOMException = @import("../dom/exceptions.zig").DOMException;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventTargetUnion = @import("../dom/event_target.zig").Union;
@@ -34,28 +32,10 @@ const AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
 const MouseEvent = @import("mouse_event.zig").MouseEvent;
-const KeyboardEvent = @import("keyboard_event.zig").KeyboardEvent;
 const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
-const MessageEvent = @import("../dom/MessageChannel.zig").MessageEvent;
-const PopStateEvent = @import("../html/History.zig").PopStateEvent;
-const CompositionEvent = @import("composition_event.zig").CompositionEvent;
-const NavigationCurrentEntryChangeEvent = @import("../navigation/root.zig").NavigationCurrentEntryChangeEvent;
-const PageTransitionEvent = @import("../events/PageTransitionEvent.zig");

 // Event interfaces
-pub const Interfaces = .{
-    Event,
-    CustomEvent,
-    ProgressEvent,
-    MouseEvent,
-    KeyboardEvent,
-    ErrorEvent,
-    MessageEvent,
-    PopStateEvent,
-    CompositionEvent,
-    NavigationCurrentEntryChangeEvent,
-    PageTransitionEvent,
-};
+pub const Interfaces = .{ Event, CustomEvent, ProgressEvent, MouseEvent, ErrorEvent };

 pub const Union = generate.Union(Interfaces);

@@ -73,21 +53,13 @@ pub const Event = struct {
    pub const _AT_TARGET = 2;
    pub const _BUBBLING_PHASE = 3;

-    pub fn toInterface(evt: *parser.Event) Union {
-        return switch (parser.eventGetInternalType(evt)) {
+    pub fn toInterface(evt: *parser.Event) !Union {
+        return switch (try parser.eventGetInternalType(evt)) {
            .event, .abort_signal, .xhr_event => .{ .Event = evt },
            .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
            .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
            .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
-            .error_event => .{ .ErrorEvent = (@as(*ErrorEvent, @fieldParentPtr("proto", evt))).* },
-            .message_event => .{ .MessageEvent = @as(*MessageEvent, @ptrCast(evt)).* },
-            .keyboard_event => .{ .KeyboardEvent = @as(*parser.KeyboardEvent, @ptrCast(evt)) },
-            .pop_state => .{ .PopStateEvent = @as(*PopStateEvent, @ptrCast(evt)).* },
-            .composition_event => .{ .CompositionEvent = (@as(*CompositionEvent, @fieldParentPtr("proto", evt))).* },
-            .navigation_current_entry_change_event => .{
-                .NavigationCurrentEntryChangeEvent = @as(*NavigationCurrentEntryChangeEvent, @ptrCast(evt)).*,
-            },
-            .page_transition_event => .{ .PageTransitionEvent = @as(*PageTransitionEvent, @ptrCast(evt)).* },
+            .error_event => .{ .ErrorEvent = @as(*ErrorEvent, @ptrCast(evt)).* },
        };
    }

@@ -99,47 +71,44 @@ pub const Event = struct {

    // Getters

-    pub fn get_type(self: *parser.Event) []const u8 {
-        return parser.eventType(self);
+    pub fn get_type(self: *parser.Event) ![]const u8 {
+        return try parser.eventType(self);
    }

    pub fn get_target(self: *parser.Event, page: *Page) !?EventTargetUnion {
-        const et = parser.eventTarget(self);
+        const et = try parser.eventTarget(self);
        if (et == null) return null;
-        return try EventTarget.toInterface(et.?, page);
+        return try EventTarget.toInterface(self, et.?, page);
    }

    pub fn get_currentTarget(self: *parser.Event, page: *Page) !?EventTargetUnion {
-        const et = parser.eventCurrentTarget(self);
+        const et = try parser.eventCurrentTarget(self);
        if (et == null) return null;
-        return try EventTarget.toInterface(et.?, page);
+        return try EventTarget.toInterface(self, et.?, page);
    }

-    pub fn get_eventPhase(self: *parser.Event) u8 {
-        return parser.eventPhase(self);
+    pub fn get_eventPhase(self: *parser.Event) !u8 {
+        return try parser.eventPhase(self);
    }

-    pub fn get_bubbles(self: *parser.Event) bool {
-        return parser.eventBubbles(self);
+    pub fn get_bubbles(self: *parser.Event) !bool {
+        return try parser.eventBubbles(self);
    }

-    pub fn get_cancelable(self: *parser.Event) bool {
-        return parser.eventCancelable(self);
+    pub fn get_cancelable(self: *parser.Event) !bool {
+        return try parser.eventCancelable(self);
    }

-    pub fn get_defaultPrevented(self: *parser.Event) bool {
-        return parser.eventDefaultPrevented(self);
+    pub fn get_defaultPrevented(self: *parser.Event) !bool {
+        return try parser.eventDefaultPrevented(self);
    }

-    pub fn get_isTrusted(self: *parser.Event) bool {
-        return parser.eventIsTrusted(self);
+    pub fn get_isTrusted(self: *parser.Event) !bool {
+        return try parser.eventIsTrusted(self);
    }

-    // Even though this is supposed to to provide microsecond resolution, browser
-    // return coarser values to protect against fingerprinting. libdom returns
-    // seconds, which is good enough.
-    pub fn get_timeStamp(self: *parser.Event) u64 {
-        return parser.eventTimestamp(self);
+    pub fn get_timestamp(self: *parser.Event) !u32 {
+        return try parser.eventTimestamp(self);
    }

    // Methods
@@ -158,88 +127,33 @@ pub const Event = struct {
    }

    pub fn _stopPropagation(self: *parser.Event) !void {
-        return parser.eventStopPropagation(self);
+        return try parser.eventStopPropagation(self);
    }

    pub fn _stopImmediatePropagation(self: *parser.Event) !void {
-        return parser.eventStopImmediatePropagation(self);
+        return try parser.eventStopImmediatePropagation(self);
    }

    pub fn _preventDefault(self: *parser.Event) !void {
-        return parser.eventPreventDefault(self);
-    }
-
-    pub fn _composedPath(self: *parser.Event, page: *Page) ![]const EventTargetUnion {
-        const et_ = parser.eventTarget(self);
-        const et = et_ orelse return &.{};
-
-        var node: ?*parser.Node = switch (parser.eventTargetInternalType(et)) {
-            .libdom_node => @as(*parser.Node, @ptrCast(et)),
-            .plain => parser.eventTargetToNode(et),
-            else => {
-                // Window, XHR, MessagePort, etc...no path beyond the event itself
-                return &.{try EventTarget.toInterface(et, page)};
-            },
-        };
-
-        const arena = page.call_arena;
-        var path: std.ArrayListUnmanaged(EventTargetUnion) = .empty;
-        while (node) |n| {
-            try path.append(arena, .{
-                .node = try Node.toInterface(n),
-            });
-
-            node = parser.nodeParentNode(n);
-            if (node == null and parser.nodeType(n) == .document_fragment) {
-                // we have a non-continuous hook from a shadowroot to its host (
-                // it's parent element). libdom doesn't really support ShdowRoots
-                // and, for the most part, that works out well since it naturally
-                // provides isolation. But events don't follow the same
-                // shadowroot isolation as most other things, so, if this is
-                // a parent-less document fragment, we need to check if it has
-                // a host.
-                if (parser.documentFragmentGetHost(@ptrCast(n))) |host| {
-                    node = host;
-
-                    // If a document fragment has a host, then that host
-                    // _has_ to have a state and that state _has_ to have
-                    // a shadow_root field. All of this is set in Element._attachShadow
-                    if (page.getNodeState(host).?.shadow_root.?.mode == .closed) {
-                        // if the shadow root is closed, then the composedPath
-                        // starts at the host element.
-                        path.clearRetainingCapacity();
-                    }
-                } else {
-                    // Our document fragement has no parent and no host, we
-                    // can break out of the loop.
-                    break;
-                }
-            }
-        }
-
-        if (path.getLastOrNull()) |last| {
-            // the Window isn't part of the DOM hierarchy, but for events, it
-            // is, so we need to glue it on.
-            if (last.node == .HTMLDocument and last.node.HTMLDocument == page.window.document) {
-                try path.append(arena, .{ .node = .{ .Window = &page.window } });
-            }
-        }
-        return path.items;
+        return try parser.eventPreventDefault(self);
    }
 };

 pub const EventHandler = struct {
    once: bool,
    capture: bool,
-    callback: js.Function,
+    callback: Function,
    node: parser.EventNode,
    listener: *parser.EventListener,

-    pub const Listener = union(enum) {
-        function: js.Function,
-        object: js.Object,
+    const Env = @import("../env.zig").Env;
+    const Function = Env.Function;

-        pub fn callback(self: Listener, target: *parser.EventTarget) !?js.Function {
+    pub const Listener = union(enum) {
+        function: Function,
+        object: Env.JsObject,
+
+        pub fn callback(self: Listener, target: *parser.EventTarget) !?Function {
            return switch (self) {
                .function => |func| try func.withThis(target),
                .object => |obj| blk: {
@@ -287,6 +201,7 @@ pub const EventHandler = struct {
                },
            }
        }
+
        const callback = (try listener.callback(target)) orelse return null;

        if (signal) |s| {
@@ -338,9 +253,13 @@ pub const EventHandler = struct {
    }

    fn handle(node: *parser.EventNode, event: *parser.Event) void {
-        const ievent = Event.toInterface(event);
+        const ievent = Event.toInterface(event) catch |err| {
+            log.err(.app, "toInterface error", .{ .err = err });
+            return;
+        };
+
        const self: *EventHandler = @fieldParentPtr("node", node);
-        var result: js.Function.Result = undefined;
+        var result: Function.Result = undefined;
        self.callback.tryCall(void, .{ievent}, &result) catch {
            log.debug(.user_script, "callback error", .{
                .err = result.exception,
@@ -350,8 +269,8 @@ pub const EventHandler = struct {
        };

        if (self.once) {
-            const target = parser.eventTarget(event).?;
-            const typ = parser.eventType(event);
+            const target = (parser.eventTarget(event) catch return).?;
+            const typ = parser.eventType(event) catch return;
            parser.eventTargetRemoveEventListener(
                target,
                typ,
@@ -406,41 +325,123 @@ const SignalCallback = struct {
    }
 };

-pub fn DirectEventHandler(
-    comptime TargetT: type,
-    target: *TargetT,
-    event_type: []const u8,
-    maybe_listener: ?EventHandler.Listener,
-    cb: *?js.Function,
-    page_arena: std.mem.Allocator,
-) !void {
-    const event_target = parser.toEventTarget(TargetT, target);
-
-    // Check if we have a listener set.
-    if (cb.*) |callback| {
-        const listener = try parser.eventTargetHasListener(event_target, event_type, false, callback.id);
-        std.debug.assert(listener != null);
-        try parser.eventTargetRemoveEventListener(event_target, event_type, listener.?, false);
-    }
-
-    if (maybe_listener) |listener| {
-        switch (listener) {
-            // If an object is given as listener, do nothing.
-            .object => {},
-            .function => |callback| {
-                _ = try EventHandler.register(page_arena, event_target, event_type, listener, null) orelse unreachable;
-                cb.* = callback;
-
-                return;
-            },
-        }
-    }
-
-    // Just unset the listener.
-    cb.* = null;
-}
-
 const testing = @import("../../testing.zig");
-test "Browser: Event" {
-    try testing.htmlRunner("events/event.html");
+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" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "document.addEventListener('count', cbk, {once: true})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "1" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "let ac = new AbortController()", null },
+        .{ "document.addEventListener('count', cbk, {signal: ac.signal})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "ac.abort()", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "2" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
 }
--- a/src/browser/events/keyboard_event.zig
+++ b/src/browser/events/keyboard_event.zig
@@ -1,159 +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 log = @import("../../log.zig");
-const builtin = @import("builtin");
-
-const parser = @import("../netsurf.zig");
-const Event = @import("event.zig").Event;
-
-// TODO: We currently don't have a UIEvent interface so we skip it in the prototype chain.
-// https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
-const UIEvent = Event;
-
-// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
-pub const KeyboardEvent = struct {
-    pub const Self = parser.KeyboardEvent;
-    pub const prototype = *UIEvent;
-
-    pub const ConstructorOptions = struct {
-        key: []const u8 = "",
-        code: []const u8 = "",
-        location: parser.KeyboardEventOpts.LocationCode = .standard,
-        repeat: bool = false,
-        isComposing: bool = false,
-        // Currently not supported but we take as argument.
-        charCode: u32 = 0,
-        // Currently not supported but we take as argument.
-        keyCode: u32 = 0,
-        // Currently not supported but we take as argument.
-        which: u32 = 0,
-        ctrlKey: bool = false,
-        shiftKey: bool = false,
-        altKey: bool = false,
-        metaKey: bool = false,
-    };
-
-    pub fn constructor(event_type: []const u8, maybe_options: ?ConstructorOptions) !*parser.KeyboardEvent {
-        const options: ConstructorOptions = maybe_options orelse .{};
-
-        const event = try parser.keyboardEventCreate();
-        parser.eventSetInternalType(@ptrCast(event), .keyboard_event);
-
-        try parser.keyboardEventInit(
-            event,
-            event_type,
-            .{
-                .key = options.key,
-                .code = options.code,
-                .location = options.location,
-                .repeat = options.repeat,
-                .is_composing = options.isComposing,
-                .ctrl_key = options.ctrlKey,
-                .shift_key = options.shiftKey,
-                .alt_key = options.altKey,
-                .meta_key = options.metaKey,
-            },
-        );
-
-        return event;
-    }
-
-    // Returns the modifier state for given modifier key.
-    pub fn _getModifierState(self: *Self, key: []const u8) bool {
-        // Chrome and Firefox do case-sensitive match, here we prefer the same.
-        if (std.mem.eql(u8, key, "Alt")) {
-            return get_altKey(self);
-        }
-
-        if (std.mem.eql(u8, key, "AltGraph")) {
-            return (get_altKey(self) and get_ctrlKey(self));
-        }
-
-        if (std.mem.eql(u8, key, "Control")) {
-            return get_ctrlKey(self);
-        }
-
-        if (std.mem.eql(u8, key, "Shift")) {
-            return get_shiftKey(self);
-        }
-
-        if (std.mem.eql(u8, key, "Meta") or std.mem.eql(u8, key, "OS")) {
-            return get_metaKey(self);
-        }
-
-        // Special case for IE.
-        if (comptime builtin.os.tag == .windows) {
-            if (std.mem.eql(u8, key, "Win")) {
-                return get_metaKey(self);
-            }
-        }
-
-        // getModifierState() also accepts a deprecated virtual modifier named "Accel".
-        // event.getModifierState("Accel") returns true when at least one of
-        // KeyboardEvent.ctrlKey or KeyboardEvent.metaKey is true.
-        //
-        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#accel_virtual_modifier
-        if (std.mem.eql(u8, key, "Accel")) {
-            return (get_ctrlKey(self) or get_metaKey(self));
-        }
-
-        // TODO: Add support for "CapsLock", "ScrollLock".
-        return false;
-    }
-
-    // Getters.
-
-    pub fn get_altKey(self: *Self) bool {
-        return parser.keyboardEventKeyIsSet(self, .alt);
-    }
-
-    pub fn get_ctrlKey(self: *Self) bool {
-        return parser.keyboardEventKeyIsSet(self, .ctrl);
-    }
-
-    pub fn get_metaKey(self: *Self) bool {
-        return parser.keyboardEventKeyIsSet(self, .meta);
-    }
-
-    pub fn get_shiftKey(self: *Self) bool {
-        return parser.keyboardEventKeyIsSet(self, .shift);
-    }
-
-    pub fn get_isComposing(self: *Self) bool {
-        return self.is_composing;
-    }
-
-    pub fn get_location(self: *Self) u32 {
-        return self.location;
-    }
-
-    pub fn get_key(self: *Self) ![]const u8 {
-        return parser.keyboardEventGetKey(self);
-    }
-
-    pub fn get_repeat(self: *Self) bool {
-        return self.repeat;
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser: Events.Keyboard" {
-    try testing.htmlRunner("events/keyboard.html");
-}
--- a/src/browser/events/mouse_event.zig
+++ b/src/browser/events/mouse_event.zig
@@ -17,10 +17,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.

 const std = @import("std");
-const log = @import("../../log.zig");
+const log = std.log.scoped(.mouse_event);

 const parser = @import("../netsurf.zig");
 const Event = @import("event.zig").Event;
+const JsObject = @import("../env.zig").JsObject;

 // TODO: We currently don't have a UIEvent interface so we skip it in the prototype chain.
 // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
@@ -54,8 +55,8 @@ pub const MouseEvent = struct {
    pub fn constructor(event_type: []const u8, opts_: ?MouseEventInit) !*parser.MouseEvent {
        const opts = opts_ orelse MouseEventInit{};

-        const mouse_event = try parser.mouseEventCreate();
-        parser.eventSetInternalType(@ptrCast(mouse_event), .mouse_event);
+        var mouse_event = try parser.mouseEventCreate();
+        try parser.eventSetInternalType(@ptrCast(&mouse_event), .mouse_event);

        try parser.mouseEventInit(mouse_event, event_type, .{
            .x = opts.clientX,
@@ -68,7 +69,7 @@ pub const MouseEvent = struct {
        });

        if (!std.mem.eql(u8, event_type, "click")) {
-            log.warn(.browser, "unsupported mouse event", .{ .event = event_type });
+            log.warn("MouseEvent currently only supports listeners for 'click' events!", .{});
        }

        return mouse_event;
@@ -106,6 +107,34 @@ pub const MouseEvent = struct {
 };

 const testing = @import("../../testing.zig");
-test "Browser: Events.Mouse" {
-    try testing.htmlRunner("events/mouse.html");
+test "Browser.MouseEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        // Default MouseEvent
+        .{ "let event = new MouseEvent('click')", "undefined" },
+        .{ "event.type", "click" },
+        .{ "event instanceof MouseEvent", "true" },
+        .{ "event instanceof Event", "true" },
+        .{ "event.clientX", "0" },
+        .{ "event.clientY", "0" },
+        .{ "event.screenX", "0" },
+        .{ "event.screenY", "0" },
+        // MouseEvent with parameters
+        .{ "let new_event = new MouseEvent('click', { 'button': 0, 'clientX': 10, 'clientY': 20 })", "undefined" },
+        .{ "new_event.button", "0" },
+        .{ "new_event.x", "10" },
+        .{ "new_event.y", "20" },
+        .{ "new_event.screenX", "10" },
+        .{ "new_event.screenY", "20" },
+        // MouseEvent Listener
+        .{ "let me = new MouseEvent('click')", "undefined" },
+        .{ "me instanceof Event", "true" },
+        .{ "var eevt = null; function ccbk(event) { eevt = event; }", "undefined" },
+        .{ "document.addEventListener('click', ccbk)", "undefined" },
+        .{ "document.dispatchEvent(me)", "true" },
+        .{ "eevt.type", "click" },
+        .{ "eevt instanceof MouseEvent", "true" },
+    }, .{});
 }
--- a/src/browser/fetch/Headers.zig
+++ b/src/browser/fetch/Headers.zig
@@ -1,225 +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 js = @import("../js/js.zig");
-const log = @import("../../log.zig");
-const URL = @import("../../url.zig").URL;
-const Page = @import("../page.zig").Page;
-
-const iterator = @import("../iterator/iterator.zig");
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Headers
-const Headers = @This();
-
-// Case-Insensitive String HashMap.
-// This allows us to avoid having to allocate lowercase keys all the time.
-const HeaderHashMap = std.HashMapUnmanaged([]const u8, []const u8, struct {
-    pub fn hash(_: @This(), s: []const u8) u64 {
-        var buf: [64]u8 = undefined;
-        var hasher = std.hash.Wyhash.init(s.len);
-
-        var key = s;
-        while (key.len >= 64) {
-            const lower = std.ascii.lowerString(buf[0..], key[0..64]);
-            hasher.update(lower);
-            key = key[64..];
-        }
-
-        if (key.len > 0) {
-            const lower = std.ascii.lowerString(buf[0..key.len], key);
-            hasher.update(lower);
-        }
-
-        return hasher.final();
-    }
-
-    pub fn eql(_: @This(), a: []const u8, b: []const u8) bool {
-        return std.ascii.eqlIgnoreCase(a, b);
-    }
-}, 80);
-
-headers: HeaderHashMap = .empty,
-
-// They can either be:
-//
-// 1. An array of string pairs.
-// 2. An object with string keys to string values.
-// 3. Another Headers object.
-pub const HeadersInit = union(enum) {
-    // List of Pairs of []const u8
-    strings: []const [2][]const u8,
-    // Headers
-    headers: *Headers,
-    // Mappings
-    object: js.Object,
-};
-
-pub fn constructor(_init: ?HeadersInit, page: *Page) !Headers {
-    const arena = page.arena;
-    var headers: HeaderHashMap = .empty;
-
-    if (_init) |init| {
-        switch (init) {
-            .strings => |kvs| {
-                for (kvs) |pair| {
-                    const key = try arena.dupe(u8, pair[0]);
-                    const value = try arena.dupe(u8, pair[1]);
-
-                    try headers.put(arena, key, value);
-                }
-            },
-            .headers => |hdrs| {
-                var iter = hdrs.headers.iterator();
-                while (iter.next()) |entry| {
-                    try headers.put(arena, entry.key_ptr.*, entry.value_ptr.*);
-                }
-            },
-            .object => |obj| {
-                var iter = obj.nameIterator();
-                while (try iter.next()) |name_value| {
-                    const name = try name_value.toString(arena);
-                    const value = try obj.get(name);
-                    const value_string = try value.toString(arena);
-
-                    try headers.put(arena, name, value_string);
-                }
-            },
-        }
-    }
-
-    return .{
-        .headers = headers,
-    };
-}
-
-pub fn append(self: *Headers, name: []const u8, value: []const u8, allocator: std.mem.Allocator) !void {
-    const key = try allocator.dupe(u8, name);
-    const gop = try self.headers.getOrPut(allocator, key);
-
-    if (gop.found_existing) {
-        // If we found it, append the value.
-        const new_value = try std.fmt.allocPrint(allocator, "{s}, {s}", .{ gop.value_ptr.*, value });
-        gop.value_ptr.* = new_value;
-    } else {
-        // Otherwise, we should just put it in.
-        gop.value_ptr.* = try allocator.dupe(u8, value);
-    }
-}
-
-pub fn _append(self: *Headers, name: []const u8, value: []const u8, page: *Page) !void {
-    const arena = page.arena;
-    try self.append(name, value, arena);
-}
-
-pub fn _delete(self: *Headers, name: []const u8) void {
-    _ = self.headers.remove(name);
-}
-
-pub const HeadersEntryIterator = struct {
-    slot: [2][]const u8,
-    iter: HeaderHashMap.Iterator,
-
-    // TODO: these SHOULD be in lexigraphical order but I'm not sure how actually
-    // important that is.
-    pub fn _next(self: *HeadersEntryIterator) ?[2][]const u8 {
-        if (self.iter.next()) |entry| {
-            self.slot[0] = entry.key_ptr.*;
-            self.slot[1] = entry.value_ptr.*;
-            return self.slot;
-        } else {
-            return null;
-        }
-    }
-};
-
-pub fn _entries(self: *const Headers) HeadersEntryIterable {
-    return .{
-        .inner = .{
-            .slot = undefined,
-            .iter = self.headers.iterator(),
-        },
-    };
-}
-
-pub fn _forEach(self: *Headers, callback_fn: js.Function, this_arg: ?js.Object) !void {
-    var iter = self.headers.iterator();
-
-    const cb = if (this_arg) |this| try callback_fn.withThis(this) else callback_fn;
-
-    while (iter.next()) |entry| {
-        try cb.call(void, .{ entry.key_ptr.*, entry.value_ptr.*, self });
-    }
-}
-
-pub fn _get(self: *const Headers, name: []const u8) ?[]const u8 {
-    return self.headers.get(name);
-}
-
-pub fn _has(self: *const Headers, name: []const u8) bool {
-    return self.headers.contains(name);
-}
-
-pub const HeadersKeyIterator = struct {
-    iter: HeaderHashMap.KeyIterator,
-
-    pub fn _next(self: *HeadersKeyIterator) ?[]const u8 {
-        if (self.iter.next()) |key| {
-            return key.*;
-        } else {
-            return null;
-        }
-    }
-};
-
-pub fn _keys(self: *const Headers) HeadersKeyIterable {
-    return .{ .inner = .{ .iter = self.headers.keyIterator() } };
-}
-
-pub fn _set(self: *Headers, name: []const u8, value: []const u8, page: *Page) !void {
-    const arena = page.arena;
-
-    const key = try arena.dupe(u8, name);
-    const gop = try self.headers.getOrPut(arena, key);
-    gop.value_ptr.* = try arena.dupe(u8, value);
-}
-
-pub const HeadersValueIterator = struct {
-    iter: HeaderHashMap.ValueIterator,
-
-    pub fn _next(self: *HeadersValueIterator) ?[]const u8 {
-        if (self.iter.next()) |value| {
-            return value.*;
-        } else {
-            return null;
-        }
-    }
-};
-
-pub fn _values(self: *const Headers) HeadersValueIterable {
-    return .{ .inner = .{ .iter = self.headers.valueIterator() } };
-}
-
-pub const HeadersKeyIterable = iterator.Iterable(HeadersKeyIterator, "HeadersKeyIterator");
-pub const HeadersValueIterable = iterator.Iterable(HeadersValueIterator, "HeadersValueIterator");
-pub const HeadersEntryIterable = iterator.Iterable(HeadersEntryIterator, "HeadersEntryIterator");
-
-const testing = @import("../../testing.zig");
-test "fetch: Headers" {
-    try testing.htmlRunner("fetch/headers.html");
-}
--- a/src/browser/fetch/Request.zig
+++ b/src/browser/fetch/Request.zig
@@ -1,279 +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 js = @import("../js/js.zig");
-const log = @import("../../log.zig");
-
-const URL = @import("../../url.zig").URL;
-const Page = @import("../page.zig").Page;
-
-const Response = @import("./Response.zig");
-const Http = @import("../../http/Http.zig");
-const ReadableStream = @import("../streams/ReadableStream.zig");
-
-const Headers = @import("Headers.zig");
-const HeadersInit = @import("Headers.zig").HeadersInit;
-
-pub const RequestInput = union(enum) {
-    string: []const u8,
-    request: *Request,
-};
-
-pub const RequestCache = enum {
-    default,
-    @"no-store",
-    reload,
-    @"no-cache",
-    @"force-cache",
-    @"only-if-cached",
-
-    pub fn fromString(str: []const u8) ?RequestCache {
-        for (std.enums.values(RequestCache)) |cache| {
-            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
-                return cache;
-            }
-        } else {
-            return null;
-        }
-    }
-
-    pub fn toString(self: RequestCache) []const u8 {
-        return @tagName(self);
-    }
-};
-
-pub const RequestCredentials = enum {
-    omit,
-    @"same-origin",
-    include,
-
-    pub fn fromString(str: []const u8) ?RequestCredentials {
-        for (std.enums.values(RequestCredentials)) |cache| {
-            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
-                return cache;
-            }
-        } else {
-            return null;
-        }
-    }
-
-    pub fn toString(self: RequestCredentials) []const u8 {
-        return @tagName(self);
-    }
-};
-
-pub const RequestMode = enum {
-    cors,
-    @"no-cors",
-    @"same-origin",
-    navigate,
-
-    pub fn fromString(str: []const u8) ?RequestMode {
-        for (std.enums.values(RequestMode)) |cache| {
-            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
-                return cache;
-            }
-        } else {
-            return null;
-        }
-    }
-
-    pub fn toString(self: RequestMode) []const u8 {
-        return @tagName(self);
-    }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/RequestInit
-pub const RequestInit = struct {
-    body: ?[]const u8 = null,
-    cache: ?[]const u8 = null,
-    credentials: ?[]const u8 = null,
-    headers: ?HeadersInit = null,
-    integrity: ?[]const u8 = null,
-    method: ?[]const u8 = null,
-    mode: ?[]const u8 = null,
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Request/Request
-const Request = @This();
-
-method: Http.Method,
-url: [:0]const u8,
-cache: RequestCache,
-credentials: RequestCredentials,
-// no-cors is default is not built with constructor.
-mode: RequestMode = .@"no-cors",
-headers: Headers,
-body: ?[]const u8,
-body_used: bool = false,
-integrity: []const u8,
-
-pub fn constructor(input: RequestInput, _options: ?RequestInit, page: *Page) !Request {
-    const arena = page.arena;
-    const options: RequestInit = _options orelse .{};
-
-    const url: [:0]const u8 = blk: switch (input) {
-        .string => |str| {
-            break :blk try URL.stitch(arena, str, page.url.raw, .{ .null_terminated = true });
-        },
-        .request => |req| {
-            break :blk try arena.dupeZ(u8, req.url);
-        },
-    };
-
-    const cache = (if (options.cache) |cache| RequestCache.fromString(cache) else null) orelse RequestCache.default;
-    const credentials = (if (options.credentials) |creds| RequestCredentials.fromString(creds) else null) orelse RequestCredentials.@"same-origin";
-    const integrity = if (options.integrity) |integ| try arena.dupe(u8, integ) else "";
-    const headers: Headers = if (options.headers) |hdrs| try Headers.constructor(hdrs, page) else .{};
-    const mode = (if (options.mode) |mode| RequestMode.fromString(mode) else null) orelse RequestMode.cors;
-
-    const method: Http.Method = blk: {
-        if (options.method) |given_method| {
-            for (std.enums.values(Http.Method)) |method| {
-                if (std.ascii.eqlIgnoreCase(given_method, @tagName(method))) {
-                    break :blk method;
-                }
-            } else {
-                return error.TypeError;
-            }
-        } else {
-            break :blk Http.Method.GET;
-        }
-    };
-
-    // Can't have a body on .GET or .HEAD.
-    const body: ?[]const u8 = blk: {
-        if (method == .GET or method == .HEAD) {
-            break :blk null;
-        } else break :blk if (options.body) |body| try arena.dupe(u8, body) else null;
-    };
-
-    return .{
-        .method = method,
-        .url = url,
-        .cache = cache,
-        .credentials = credentials,
-        .mode = mode,
-        .headers = headers,
-        .body = body,
-        .integrity = integrity,
-    };
-}
-
-pub fn get_body(self: *const Request, page: *Page) !?*ReadableStream {
-    if (self.body) |body| {
-        const stream = try ReadableStream.constructor(null, null, page);
-        try stream.queue.append(page.arena, .{ .string = body });
-        return stream;
-    } else return null;
-}
-
-pub fn get_bodyUsed(self: *const Request) bool {
-    return self.body_used;
-}
-
-pub fn get_cache(self: *const Request) RequestCache {
-    return self.cache;
-}
-
-pub fn get_credentials(self: *const Request) RequestCredentials {
-    return self.credentials;
-}
-
-pub fn get_headers(self: *Request) *Headers {
-    return &self.headers;
-}
-
-pub fn get_integrity(self: *const Request) []const u8 {
-    return self.integrity;
-}
-
-// TODO: If we ever support the Navigation API, we need isHistoryNavigation
-// https://developer.mozilla.org/en-US/docs/Web/API/Request/isHistoryNavigation
-
-pub fn get_method(self: *const Request) []const u8 {
-    return @tagName(self.method);
-}
-
-pub fn get_mode(self: *const Request) RequestMode {
-    return self.mode;
-}
-
-pub fn get_url(self: *const Request) []const u8 {
-    return self.url;
-}
-
-pub fn _clone(self: *Request) !Request {
-    // Not allowed to clone if the body was used.
-    if (self.body_used) {
-        return error.TypeError;
-    }
-
-    // OK to just return the same fields BECAUSE
-    // all of these fields are read-only and can't be modified.
-    return Request{
-        .body = self.body,
-        .body_used = self.body_used,
-        .cache = self.cache,
-        .credentials = self.credentials,
-        .headers = self.headers,
-        .method = self.method,
-        .integrity = self.integrity,
-        .url = self.url,
-    };
-}
-
-pub fn _bytes(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-    self.body_used = true;
-    return page.js.resolvePromise(self.body);
-}
-
-pub fn _json(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-    self.body_used = true;
-
-    if (self.body) |body| {
-        const value = js.Value.fromJson(page.js, body) catch |e| {
-            log.info(.browser, "invalid json", .{ .err = e, .source = "Request" });
-            return error.SyntaxError;
-        };
-        const pvalue = try value.persist(page.js);
-
-        return page.js.resolvePromise(pvalue);
-    }
-    return page.js.resolvePromise(null);
-}
-
-pub fn _text(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-    self.body_used = true;
-    return page.js.resolvePromise(self.body);
-}
-
-const testing = @import("../../testing.zig");
-test "fetch: Request" {
-    try testing.htmlRunner("fetch/request.html");
-}
--- a/src/browser/fetch/Response.zig
+++ b/src/browser/fetch/Response.zig
@@ -1,205 +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 js = @import("../js/js.zig");
-const log = @import("../../log.zig");
-
-const HttpClient = @import("../../http/Client.zig");
-const Http = @import("../../http/Http.zig");
-const URL = @import("../../url.zig").URL;
-
-const ReadableStream = @import("../streams/ReadableStream.zig");
-const Headers = @import("Headers.zig");
-const HeadersInit = @import("Headers.zig").HeadersInit;
-
-const Mime = @import("../mime.zig").Mime;
-const Page = @import("../page.zig").Page;
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Response
-const Response = @This();
-
-status: u16 = 200,
-status_text: []const u8 = "",
-headers: Headers,
-mime: ?Mime = null,
-url: []const u8 = "",
-body: ?[]const u8 = null,
-body_used: bool = false,
-redirected: bool = false,
-type: ResponseType = .basic,
-
-const ResponseBody = union(enum) {
-    string: []const u8,
-};
-
-const ResponseOptions = struct {
-    status: u16 = 200,
-    statusText: ?[]const u8 = null,
-    headers: ?HeadersInit = null,
-};
-
-pub const ResponseType = enum {
-    basic,
-    cors,
-    @"error",
-    @"opaque",
-    opaqueredirect,
-
-    pub fn fromString(str: []const u8) ?ResponseType {
-        for (std.enums.values(ResponseType)) |cache| {
-            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
-                return cache;
-            }
-        } else {
-            return null;
-        }
-    }
-
-    pub fn toString(self: ResponseType) []const u8 {
-        return @tagName(self);
-    }
-};
-
-pub fn constructor(_input: ?ResponseBody, _options: ?ResponseOptions, page: *Page) !Response {
-    const arena = page.arena;
-
-    const options: ResponseOptions = _options orelse .{};
-
-    const body = blk: {
-        if (_input) |input| {
-            switch (input) {
-                .string => |str| {
-                    break :blk try arena.dupe(u8, str);
-                },
-            }
-        } else {
-            break :blk null;
-        }
-    };
-
-    const headers: Headers = if (options.headers) |hdrs| try Headers.constructor(hdrs, page) else .{};
-    const status_text = if (options.statusText) |st| try arena.dupe(u8, st) else "";
-
-    return .{
-        .body = body,
-        .headers = headers,
-        .status = options.status,
-        .status_text = status_text,
-    };
-}
-
-pub fn get_body(self: *const Response, page: *Page) !*ReadableStream {
-    const stream = try ReadableStream.constructor(null, null, page);
-    if (self.body) |body| {
-        try stream.queue.append(page.arena, .{ .string = body });
-    }
-    return stream;
-}
-
-pub fn get_bodyUsed(self: *const Response) bool {
-    return self.body_used;
-}
-
-pub fn get_headers(self: *Response) *Headers {
-    return &self.headers;
-}
-
-pub fn get_ok(self: *const Response) bool {
-    return self.status >= 200 and self.status <= 299;
-}
-
-pub fn get_redirected(self: *const Response) bool {
-    return self.redirected;
-}
-
-pub fn get_status(self: *const Response) u16 {
-    return self.status;
-}
-
-pub fn get_statusText(self: *const Response) []const u8 {
-    return self.status_text;
-}
-
-pub fn get_type(self: *const Response) ResponseType {
-    return self.type;
-}
-
-pub fn get_url(self: *const Response) []const u8 {
-    return self.url;
-}
-
-pub fn _clone(self: *const Response) !Response {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-
-    // OK to just return the same fields BECAUSE
-    // all of these fields are read-only and can't be modified.
-    return Response{
-        .body = self.body,
-        .body_used = self.body_used,
-        .mime = self.mime,
-        .headers = self.headers,
-        .redirected = self.redirected,
-        .status = self.status,
-        .url = self.url,
-        .type = self.type,
-    };
-}
-
-pub fn _bytes(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-
-    self.body_used = true;
-    return page.js.resolvePromise(self.body);
-}
-
-pub fn _json(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-
-    if (self.body) |body| {
-        self.body_used = true;
-        const value = js.Value.fromJson(page.js, body) catch |e| {
-            log.info(.browser, "invalid json", .{ .err = e, .source = "Response" });
-            return error.SyntaxError;
-        };
-        const pvalue = try value.persist(page.js);
-
-        return page.js.resolvePromise(pvalue);
-    }
-    return page.js.resolvePromise(null);
-}
-
-pub fn _text(self: *Response, page: *Page) !js.Promise {
-    if (self.body_used) {
-        return error.TypeError;
-    }
-    self.body_used = true;
-
-    return page.js.resolvePromise(self.body);
-}
-
-const testing = @import("../../testing.zig");
-test "fetch: Response" {
-    try testing.htmlRunner("fetch/response.html");
-}
--- a/src/browser/fetch/fetch.zig
+++ b/src/browser/fetch/fetch.zig
@@ -1,243 +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 log = @import("../../log.zig");
-
-const js = @import("../js/js.zig");
-const Page = @import("../page.zig").Page;
-
-const Http = @import("../../http/Http.zig");
-const HttpClient = @import("../../http/Client.zig");
-const Mime = @import("../mime.zig").Mime;
-
-const Headers = @import("Headers.zig");
-
-const RequestInput = @import("Request.zig").RequestInput;
-const RequestInit = @import("Request.zig").RequestInit;
-const Request = @import("Request.zig");
-const Response = @import("Response.zig");
-
-pub const Interfaces = .{
-    @import("Headers.zig"),
-    @import("Headers.zig").HeadersEntryIterable,
-    @import("Headers.zig").HeadersKeyIterable,
-    @import("Headers.zig").HeadersValueIterable,
-    @import("Request.zig"),
-    @import("Response.zig"),
-};
-
-pub const FetchContext = struct {
-    page: *Page,
-    arena: std.mem.Allocator,
-    promise_resolver: js.PersistentPromiseResolver,
-
-    method: Http.Method,
-    url: []const u8,
-    body: std.ArrayListUnmanaged(u8) = .empty,
-    headers: std.ArrayListUnmanaged([]const u8) = .empty,
-    status: u16 = 0,
-    mime: ?Mime = null,
-    mode: Request.RequestMode,
-    transfer: ?*HttpClient.Transfer = null,
-
-    /// This effectively takes ownership of the FetchContext.
-    ///
-    /// We just return the underlying slices used for `headers`
-    /// and for `body` here to avoid an allocation.
-    pub fn toResponse(self: *const FetchContext) !Response {
-        var headers: Headers = .{};
-
-        // seems to be the highest priority
-        const same_origin = try self.page.isSameOrigin(self.url);
-
-        // If the mode is "no-cors", we need to return this opaque/stripped Response.
-        // https://developer.mozilla.org/en-US/docs/Web/API/Response/type
-        if (!same_origin and self.mode == .@"no-cors") {
-            return Response{
-                .status = 0,
-                .headers = headers,
-                .mime = self.mime,
-                .body = null,
-                .url = self.url,
-                .type = .@"opaque",
-            };
-        }
-
-        // convert into Headers
-        for (self.headers.items) |hdr| {
-            var iter = std.mem.splitScalar(u8, hdr, ':');
-            const name = iter.next() orelse "";
-            const value = iter.next() orelse "";
-            try headers.append(name, value, self.arena);
-        }
-
-        const resp_type: Response.ResponseType = blk: {
-            if (same_origin or std.mem.startsWith(u8, self.url, "data:")) {
-                break :blk .basic;
-            }
-
-            break :blk switch (self.mode) {
-                .cors => .cors,
-                .@"same-origin", .navigate => .basic,
-                .@"no-cors" => unreachable,
-            };
-        };
-
-        return Response{
-            .status = self.status,
-            .headers = headers,
-            .mime = self.mime,
-            .body = self.body.items,
-            .url = self.url,
-            .type = resp_type,
-        };
-    }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch
-pub fn fetch(input: RequestInput, options: ?RequestInit, page: *Page) !js.Promise {
-    const arena = page.arena;
-
-    const req = try Request.constructor(input, options, page);
-    var headers = try page.http_client.newHeaders();
-
-    // Copy our headers into the HTTP headers.
-    var header_iter = req.headers.headers.iterator();
-    while (header_iter.next()) |entry| {
-        const combined = try std.fmt.allocPrintSentinel(
-            page.arena,
-            "{s}: {s}",
-            .{ entry.key_ptr.*, entry.value_ptr.* },
-            0,
-        );
-        try headers.add(combined.ptr);
-    }
-
-    try page.requestCookie(.{}).headersForRequest(arena, req.url, &headers);
-
-    const resolver = try page.js.createPromiseResolver(.page);
-
-    const fetch_ctx = try arena.create(FetchContext);
-    fetch_ctx.* = .{
-        .page = page,
-        .arena = arena,
-        .promise_resolver = resolver,
-        .method = req.method,
-        .url = req.url,
-        .mode = req.mode,
-    };
-
-    try page.http_client.request(.{
-        .ctx = @ptrCast(fetch_ctx),
-        .url = req.url,
-        .method = req.method,
-        .headers = headers,
-        .body = req.body,
-        .cookie_jar = page.cookie_jar,
-        .resource_type = .fetch,
-
-        .start_callback = struct {
-            fn startCallback(transfer: *HttpClient.Transfer) !void {
-                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
-                log.debug(.fetch, "request start", .{ .method = self.method, .url = self.url, .source = "fetch" });
-
-                self.transfer = transfer;
-            }
-        }.startCallback,
-        .header_callback = struct {
-            fn headerCallback(transfer: *HttpClient.Transfer) !void {
-                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
-
-                const header = &transfer.response_header.?;
-
-                log.debug(.fetch, "request header", .{
-                    .source = "fetch",
-                    .method = self.method,
-                    .url = self.url,
-                    .status = header.status,
-                });
-
-                if (header.contentType()) |ct| {
-                    self.mime = Mime.parse(ct) catch {
-                        return error.MimeParsing;
-                    };
-                }
-
-                if (transfer.getContentLength()) |cl| {
-                    try self.body.ensureTotalCapacity(self.arena, cl);
-                }
-
-                var it = transfer.responseHeaderIterator();
-                while (it.next()) |hdr| {
-                    const joined = try std.fmt.allocPrint(self.arena, "{s}: {s}", .{ hdr.name, hdr.value });
-                    try self.headers.append(self.arena, joined);
-                }
-
-                self.status = header.status;
-            }
-        }.headerCallback,
-        .data_callback = struct {
-            fn dataCallback(transfer: *HttpClient.Transfer, data: []const u8) !void {
-                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
-                try self.body.appendSlice(self.arena, data);
-            }
-        }.dataCallback,
-        .done_callback = struct {
-            fn doneCallback(ctx: *anyopaque) !void {
-                const self: *FetchContext = @ptrCast(@alignCast(ctx));
-                self.transfer = null;
-
-                log.info(.fetch, "request complete", .{
-                    .source = "fetch",
-                    .method = self.method,
-                    .url = self.url,
-                    .status = self.status,
-                });
-
-                const response = try self.toResponse();
-                try self.promise_resolver.resolve(response);
-            }
-        }.doneCallback,
-        .error_callback = struct {
-            fn errorCallback(ctx: *anyopaque, err: anyerror) void {
-                const self: *FetchContext = @ptrCast(@alignCast(ctx));
-                self.transfer = null;
-
-                log.err(.fetch, "error", .{
-                    .url = self.url,
-                    .err = err,
-                    .source = "fetch error",
-                });
-
-                // We throw an Abort error when the page is getting closed so,
-                // in this case, we don't need to reject the promise.
-                if (err != error.Abort) {
-                    self.promise_resolver.reject(@errorName(err)) catch unreachable;
-                }
-            }
-        }.errorCallback,
-    });
-
-    return resolver.promise();
-}
-
-const testing = @import("../../testing.zig");
-test "fetch: fetch" {
-    try testing.htmlRunner("fetch/fetch.html");
-}
--- a/src/browser/file/Blob.zig
+++ b/src/browser/file/Blob.zig
@@ -1,284 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const Writer = std.Io.Writer;
-
-const Page = @import("../page.zig").Page;
-const js = @import("../js/js.zig");
-
-const ReadableStream = @import("../streams/ReadableStream.zig");
-
-/// https://w3c.github.io/FileAPI/#blob-section
-/// https://developer.mozilla.org/en-US/docs/Web/API/Blob
-const Blob = @This();
-
-/// Immutable slice of blob.
-/// Note that another blob may hold a pointer/slice to this,
-/// so its better to leave the deallocation of it to arena allocator.
-slice: []const u8,
-/// MIME attached to blob. Can be an empty string.
-mime: []const u8,
-
-const ConstructorOptions = struct {
-    /// MIME type.
-    type: []const u8 = "",
-    /// How to handle line endings (CR and LF).
-    /// `transparent` means do nothing, `native` expects CRLF (\r\n) on Windows.
-    endings: []const u8 = "transparent",
-};
-
-/// Creates a new Blob.
-pub fn constructor(
-    maybe_blob_parts: ?[]const []const u8,
-    maybe_options: ?ConstructorOptions,
-    page: *Page,
-) !Blob {
-    const options: ConstructorOptions = maybe_options orelse .{};
-    // Setup MIME; This can be any string according to my observations.
-    const mime: []const u8 = blk: {
-        const t = options.type;
-        if (t.len == 0) {
-            break :blk "";
-        }
-
-        break :blk try page.arena.dupe(u8, t);
-    };
-
-    if (maybe_blob_parts) |blob_parts| {
-        var w: Writer.Allocating = .init(page.arena);
-        const use_native_endings = std.mem.eql(u8, options.endings, "native");
-        try writeBlobParts(&w.writer, blob_parts, use_native_endings);
-
-        return .{ .slice = w.written(), .mime = mime };
-    }
-
-    // We don't have `blob_parts`, why would you want a Blob anyway then?
-    return .{ .slice = "", .mime = mime };
-}
-
-const largest_vector = @max(std.simd.suggestVectorLength(u8) orelse 1, 8);
-/// Array of possible vector sizes for the current arch in decrementing order.
-/// We may move this to some file for SIMD helpers in the future.
-const vector_sizes = blk: {
-    // Required for length calculation.
-    var n: usize = largest_vector;
-    var total: usize = 0;
-    while (n != 2) : (n /= 2) total += 1;
-    // Populate an array with vector sizes.
-    n = largest_vector;
-    var i: usize = 0;
-    var items: [total]usize = undefined;
-    while (n != 2) : (n /= 2) {
-        defer i += 1;
-        items[i] = n;
-    }
-
-    break :blk items;
-};
-
-/// Writes blob parts to given `Writer` with desired endings.
-fn writeBlobParts(
-    writer: *Writer,
-    blob_parts: []const []const u8,
-    use_native_endings: bool,
-) !void {
-    // Transparent.
-    if (!use_native_endings) {
-        for (blob_parts) |part| {
-            try writer.writeAll(part);
-        }
-
-        return;
-    }
-
-    // TODO: Windows support.
-
-    // Linux & Unix.
-    // Both Firefox and Chrome implement it as such:
-    // CRLF => LF
-    // CR   => LF
-    // So even though CR is not followed by LF, it gets replaced.
-    //
-    // I believe this is because such scenario is possible:
-    // ```
-    // let parts = [ "the quick\r", "\nbrown fox" ];
-    // ```
-    // In the example, one should have to check the part before in order to
-    // understand that CRLF is being presented in the final buffer.
-    // So they took a simpler approach, here's what given blob parts produce:
-    // ```
-    // "the quick\n\nbrown fox"
-    // ```
-    scan_parts: for (blob_parts) |part| {
-        var end: usize = 0;
-
-        inline for (vector_sizes) |vector_len| {
-            const Vec = @Vector(vector_len, u8);
-
-            while (end + vector_len <= part.len) : (end += vector_len) {
-                const cr: Vec = @splat('\r');
-                // Load chunk as vectors.
-                const slice = part[end..][0..vector_len];
-                const chunk: Vec = slice.*;
-                // Look for CR.
-                const match = chunk == cr;
-
-                // Create a bitset out of match vector.
-                const bitset = std.bit_set.IntegerBitSet(vector_len){
-                    .mask = @bitCast(@intFromBool(match)),
-                };
-
-                var iter = bitset.iterator(.{});
-                var relative_start: usize = 0;
-                while (iter.next()) |index| {
-                    _ = try writer.writeVec(&.{ slice[relative_start..index], "\n" });
-
-                    if (index + 1 != slice.len and slice[index + 1] == '\n') {
-                        relative_start = index + 2;
-                    } else {
-                        relative_start = index + 1;
-                    }
-                }
-
-                _ = try writer.writeVec(&.{slice[relative_start..]});
-            }
-        }
-
-        // Scalar scan fallback.
-        var relative_start: usize = end;
-        while (end < part.len) {
-            if (part[end] == '\r') {
-                _ = try writer.writeVec(&.{ part[relative_start..end], "\n" });
-
-                // Part ends with CR. We can continue to next part.
-                if (end + 1 == part.len) {
-                    continue :scan_parts;
-                }
-
-                // If next char is LF, skip it too.
-                if (part[end + 1] == '\n') {
-                    relative_start = end + 2;
-                } else {
-                    relative_start = end + 1;
-                }
-            }
-
-            end += 1;
-        }
-
-        // Write the remaining. We get this in such situations:
-        // `the quick brown\rfox`
-        // `the quick brown\r\nfox`
-        try writer.writeAll(part[relative_start..end]);
-    }
-}
-
-/// Returns a Promise that resolves with the contents of the blob
-/// as binary data contained in an ArrayBuffer.
-pub fn _arrayBuffer(self: *const Blob, page: *Page) !js.Promise {
-    return page.js.resolvePromise(js.ArrayBuffer{ .values = self.slice });
-}
-
-/// Returns a ReadableStream which upon reading returns the data
-/// contained within the Blob.
-pub fn _stream(self: *const Blob, page: *Page) !*ReadableStream {
-    const stream = try ReadableStream.constructor(null, null, page);
-    try stream.queue.append(page.arena, .{
-        .uint8array = .{ .values = self.slice },
-    });
-    return stream;
-}
-
-/// Returns a Promise that resolves with a string containing
-/// the contents of the blob, interpreted as UTF-8.
-pub fn _text(self: *const Blob, page: *Page) !js.Promise {
-    return page.js.resolvePromise(self.slice);
-}
-
-/// Extension to Blob; works on Firefox and Safari.
-/// https://developer.mozilla.org/en-US/docs/Web/API/Blob/bytes
-/// Returns a Promise that resolves with a Uint8Array containing
-/// the contents of the blob as an array of bytes.
-pub fn _bytes(self: *const Blob, page: *Page) !js.Promise {
-    return page.js.resolvePromise(js.TypedArray(u8){ .values = self.slice });
-}
-
-/// Returns a new Blob object which contains data
-/// from a subset of the blob on which it's called.
-pub fn _slice(
-    self: *const Blob,
-    maybe_start: ?i32,
-    maybe_end: ?i32,
-    maybe_content_type: ?[]const u8,
-    page: *Page,
-) !Blob {
-    const mime: []const u8 = blk: {
-        if (maybe_content_type) |content_type| {
-            if (content_type.len == 0) {
-                break :blk "";
-            }
-
-            break :blk try page.arena.dupe(u8, content_type);
-        }
-
-        break :blk "";
-    };
-
-    const slice = self.slice;
-    if (maybe_start) |_start| {
-        const start = blk: {
-            if (_start < 0) {
-                break :blk slice.len -| @abs(_start);
-            }
-
-            break :blk @min(slice.len, @as(u31, @intCast(_start)));
-        };
-
-        const end: usize = blk: {
-            if (maybe_end) |_end| {
-                if (_end < 0) {
-                    break :blk @max(start, slice.len -| @abs(_end));
-                }
-
-                break :blk @min(slice.len, @max(start, @as(u31, @intCast(_end))));
-            }
-
-            break :blk slice.len;
-        };
-
-        return .{ .slice = slice[start..end], .mime = mime };
-    }
-
-    return .{ .slice = slice, .mime = mime };
-}
-
-/// Returns the size of the Blob in bytes.
-pub fn get_size(self: *const Blob) usize {
-    return self.slice.len;
-}
-
-/// Returns the type of Blob; likely a MIME type, yet anything can be given.
-pub fn get_type(self: *const Blob) []const u8 {
-    return self.mime;
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: File.Blob" {
-    try testing.htmlRunner("file/blob.html");
-}
--- a/Show More
+++ b/Show More