markdown: working duckduckgo

Add dummy PerformanceObserver

.github/actions/install/action.yml

@@ -1,23 +1,75 @@
 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
+    default: 'x86_64'
+  os:
+    description: 'OS used to select the v8 lib'
+    required: false
+    default: 'linux'
+  zig-v8:
+    description: 'zig v8 version to install'
+    required: false
+    default: 'v0.1.24'
+  v8:
+    description: 'v8 version to install'
+    required: false
+    default: '13.6.233.8'
+  cache-dir:
+    description: 'cache dir to use'
+    required: false
+    default: '~/.cache'
+
 runs:
   using: "composite"
 
   steps:
+    - name: Install apt deps
+      if: ${{ inputs.os == 'linux' }}
+      shell: bash
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y wget xz-utils python3 ca-certificates git pkg-config libglib2.0-dev gperf libexpat1-dev cmake clang
+
+    - uses: mlugg/setup-zig@v2
+      with:
+        version: ${{ inputs.zig }}
+
+    - name: Cache v8
+      id: cache-v8
+      uses: actions/cache@v4
+      env:
+        cache-name: cache-v8
+      with:
+        path: ${{ inputs.cache-dir }}/v8
+        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}.a
+
+    - if: ${{ steps.cache-v8.outputs.cache-hit != 'true' }}
+      shell: bash
+      run: |
+        mkdir -p ${{ inputs.cache-dir }}/v8
+
+        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}.a
+
     - name: install v8
       shell: bash
       run: |
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/debug
-        ln -s /usr/local/lib/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/debug/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
 
-        mkdir -p vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/release
-        ln -s /usr/local/lib/libc_v8.a vendor/zig-js-runtime/vendor/v8/${{env.ARCH}}/release/libc_v8.a
+        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: libiconv
       shell: bash
-      run: |
-        ln -s /usr/local/lib/libiconv vendor/libiconv
+      run: make install-libiconv
 
     - name: build mimalloc
       shell: bash

.github/workflows/build.yml

@@ -0,0 +1,170 @@
+name: nightly build
+
+env:
+  AWS_ACCESS_KEY_ID: ${{ vars.NIGHTLY_BUILD_AWS_ACCESS_ID }}
+  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 }}
+
+on:
+  schedule:
+    - cron: "2 2 * * *"
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-linux-x86_64:
+    env:
+      ARCH: x86_64
+      OS: linux
+
+    runs-on: ubuntu-22.04
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly
+
+  build-linux-aarch64:
+    env:
+      ARCH: aarch64
+      OS: linux
+
+    runs-on: ubuntu-24.04-arm
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly
+
+  build-macos-aarch64:
+    env:
+      ARCH: aarch64
+      OS: macos
+
+    runs-on: macos-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly
+
+  build-macos-x86_64:
+    env:
+      ARCH: x86_64
+      OS: macos
+
+    runs-on: macos-13
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+        with:
+          os: ${{env.OS}}
+          arch: ${{env.ARCH}}
+
+      - name: zig build
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: Rename binary
+        run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: upload on s3
+        run: |
+          export DIR=`git show --no-patch --no-notes --pretty='%cs_%h'`
+          aws s3 cp --storage-class=GLACIER_IR lightpanda-${{ env.ARCH }}-${{ env.OS }} s3://lpd-nightly-build/${DIR}/lightpanda-${{ env.ARCH }}-${{ env.OS }}
+
+      - name: Upload the build
+        uses: ncipollo/release-action@v1
+        with:
+          allowUpdates: true
+          artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
+          tag: nightly

.github/workflows/cla.yml

@@ -0,0 +1,34 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+permissions:
+  actions: write
+  contents: read
+  pull-requests: write
+  statuses: write
+
+jobs:
+  CLAAssistant:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        uses: contributor-assistant/github-action@v2.6.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_GH_PAT }}
+        with:
+          path-to-signatures: 'signatures/browser/version1/cla.json'
+          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,sjorsdonkers,bornlex
+
+          remote-organization-name: lightpanda-io
+          remote-repository-name: cla

.github/workflows/e2e-test.yml

@@ -0,0 +1,244 @@
+name: e2e-test
+
+env:
+  AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
+  AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
+  AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
+  AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
+  LIGHTPANDA_DISABLE_TELEMETRY: true
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "build.zig"
+      - "src/**/*.zig"
+      - "src/*.zig"
+      - "vendor/zig-js-runtime"
+      - ".github/**"
+      - "vendor/**"
+  pull_request:
+
+    # By default GH trigger on types opened, synchronize and reopened.
+    # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
+    # Since we skip the job when the PR is in draft state, we want to force CI
+    # running when the PR is marked ready_for_review w/o other change.
+    # see https://github.com/orgs/community/discussions/25722#discussioncomment-3248917
+    types: [opened, synchronize, reopened, ready_for_review]
+
+    paths:
+      - ".github/**"
+      - "build.zig"
+      - "src/**/*.zig"
+      - "src/*.zig"
+      - "vendor/**"
+      - ".github/**"
+      - "vendor/**"
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  zig-build-release:
+    name: zig build release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
+          submodules: recursive
+
+      - uses: ./.github/actions/install
+
+      - name: zig build release
+        run: zig build -Doptimize=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
+
+  puppeteer-perf:
+    name: puppeteer-perf
+    needs: zig-build-release
+
+    env:
+      MAX_MEMORY: 30000
+      MAX_AVG_DURATION: 24
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run puppeteer
+        run: |
+          python3 -m http.server 1234 -d ./public & echo $! > PYTHON.pid
+          ./lightpanda serve & echo $! > LPD.pid
+          RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
+          cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
+          kill `cat LPD.pid` `cat PYTHON.pid`
+
+      - name: puppeteer result
+        run: cat puppeteer.out
+
+      - name: memory regression
+        run: |
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "Peak resident set size: $LPD_VmHWM"
+          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+
+      - name: duration regression
+        run: |
+          export PUPPETEER_AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          echo "puppeteer avg duration: $PUPPETEER_AVG_DURATION"
+          test "$PUPPETEER_AVG_DURATION" -le "$MAX_AVG_DURATION"
+
+  demo-scripts:
+    name: demo-scripts
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run end to end tests
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          go run runner/main.go --verbose
+          kill `cat LPD.pid`
+
+  cdp-and-hyperfine-bench:
+    name: cdp-and-hyperfine-bench
+    needs: zig-build-release
+
+    # Don't execute on PR
+    if: github.event_name != 'pull_request'
+
+    # use a self host runner.
+    runs-on: lpd-bench-hetzner
+    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: start http
+        run: |
+          go run ws/main.go & echo $! > WS.pid
+          sleep 2
+
+      - name: run puppeteer
+        run: |
+          ./lightpanda serve & echo $! > LPD.pid
+          sleep 2
+          RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
+          cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
+          kill `cat LPD.pid`
+
+      - name: puppeteer result
+        run: cat puppeteer.out
+
+      - name: json output
+        run: |
+          export AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          export TOTAL_DURATION=`cat puppeteer.out|grep 'total duration'|sed 's/total duration (ms) //'`
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM}}" > bench.json
+          cat bench.json
+
+      - name: run hyperfine
+        run: |
+          hyperfine --export-json=hyperfine.json --warmup 3 --runs 20 --shell=none "./lightpanda --dump http://127.0.0.1:1234/campfire-commerce/"
+
+      - name: stop http
+        run: kill `cat WS.pid`
+
+      - name: write commit
+        run: |
+          echo "${{github.sha}}" > commit.txt
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: bench-results
+          path: |
+            bench.json
+            hyperfine.json
+            commit.txt
+          retention-days: 10
+
+
+  perf-fmt:
+    name: perf-fmt
+    needs: cdp-and-hyperfine-bench
+
+    # Don't execute on PR
+    if: github.event_name != 'pull_request'
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    container:
+      image: ghcr.io/lightpanda-io/perf-fmt:latest
+      credentials:
+       username: ${{ github.actor }}
+       password: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: bench-results
+
+      - name: format and send json result
+        run: /perf-fmt cdp ${{ github.sha }} bench.json
+
+      - name: format and send json result
+        run: /perf-fmt hyperfine ${{ github.sha }} hyperfine.json

.github/workflows/wpt.yml

@@ -1,81 +1,36 @@
 name: wpt
 
 env:
-  ARCH: x86_64-linux
   AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
   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 }}
 
 on:
-  push:
-    branches:
-      - main
-    paths:
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
-  pull_request:
+  schedule:
+    - cron: "23 2 * * *"
 
-    # By default GH trigger on types opened, synchronize and reopened.
-    # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request
-    # Since we skip the job when the PR is in draft state, we want to force CI
-    # running when the PR is marked ready_for_review w/o other change.
-    # see https://github.com/orgs/community/discussions/25722#discussioncomment-3248917
-    types: [opened, synchronize, reopened, ready_for_review]
-
-    paths:
-      - ".github/**"
-      - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
-      - "tests/wpt/**"
-      - "vendor/**"
-      - ".github/**"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 jobs:
   wpt:
-    name: web platform tests
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
+    name: web platform tests json output
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-      # docker blocks io_uring syscalls by default now.
-      # see https://github.com/tigerbeetle/tigerbeetle/pull/1995
-      # see https://github.com/moby/moby/pull/46762
-      options: "--security-opt seccomp=unconfined"
+    timeout-minutes: 90
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
           # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
 
-      - run: zig build wpt -Dengine=v8 -- --safe --summary
-
-        # For now WPT tests doesn't pass at all.
-        # We accept then to continue the job on failure.
-        # TODO remove the continue-on-error when tests will pass.
-        continue-on-error: true
-
       - name: json output
-        run: zig build wpt -Dengine=v8 -- --safe --json > wpt.json
+        run: zig build wpt -- --json > wpt.json
 
       - name: write commit
         run: |
@@ -94,10 +49,9 @@ jobs:
     name: perf-fmt
     needs: wpt
 
-    # Don't execute on PR
-    if: github.event_name != 'pull_request'
-
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:

.github/workflows/zig-fmt.yml

@@ -1,5 +1,8 @@
 name: zig-fmt
 
+env:
+  ZIG_VERSION: 0.14.1
+
 on:
   pull_request:
 
@@ -26,15 +29,13 @@ jobs:
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-    outputs:
-      zig_fmt_errs: ${{ steps.fmt.outputs.zig_fmt_errs }}
+    timeout-minutes: 15
 
     steps:
+      - uses: mlugg/setup-zig@v2
+        with:
+          version: ${{ env.ZIG_VERSION }}
+
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0

.github/workflows/zig-test.yml

@@ -1,7 +1,6 @@
 name: zig-test
 
 env:
-  ARCH: x86_64-linux
   AWS_ACCESS_KEY_ID: ${{ vars.LPD_PERF_AWS_ACCESS_KEY_ID }}
   AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
@@ -17,6 +16,7 @@ on:
       - "src/*.zig"
       - "vendor/zig-js-runtime"
       - ".github/**"
+      - "vendor/**"
   pull_request:
 
     # By default GH trigger on types opened, synchronize and reopened.
@@ -33,6 +33,7 @@ on:
       - "src/*.zig"
       - "vendor/**"
       - ".github/**"
+      - "vendor/**"
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -44,81 +45,66 @@ jobs:
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
           # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
 
       - name: zig build debug
-        run: zig build -Dengine=v8
+        run: zig build
 
-  zig-build-release:
-    name: zig build release
-
-    # Don't run the CI on PR
-    if: github.event_name != 'pull_request'
-
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
-
-    steps:
-      - uses: actions/checkout@v4
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
         with:
-          fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
-          # fetch submodules recusively, to get zig-js-runtime submodules also.
-          submodules: recursive
+          name: lightpanda-build-dev
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
 
-      - uses: ./.github/actions/install
-
-      - name: zig build release
-        run: zig build -Doptimize=ReleaseSafe -Dengine=v8
-
-  zig-test:
-    name: zig test
+  browser-fetch:
+    name: browser fetch
+    needs: zig-build-dev
 
     # Don't run the CI with draft PR.
     if: github.event.pull_request.draft == false
 
     runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/lightpanda-io/zig-browsercore:0.12.1
-      credentials:
-       username: ${{ github.actor }}
-       password: ${{ secrets.GITHUB_TOKEN }}
 
-      # docker blocks io_uring syscalls by default now.
-      # see https://github.com/tigerbeetle/tigerbeetle/pull/1995
-      # see https://github.com/moby/moby/pull/46762
-      options: "--security-opt seccomp=unconfined"
+    steps:
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-dev
+
+      - run: chmod a+x ./lightpanda
+
+      - run: ./lightpanda fetch https://httpbin.io/xhr/get
+
+  zig-test:
+    name: zig test
+    timeout-minutes: 15
+
+    # Don't run the CI with draft PR.
+    if: github.event.pull_request.draft == false
+
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-          token: ${{ secrets.GH_CI_PAT }}
           # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
 
       - name: zig build test
-        run: zig build test -Dengine=v8 -- --json > bench.json
+        run: zig build test -- --json > bench.json
 
       - name: write commit
         run: |
@@ -141,6 +127,8 @@ jobs:
     if: github.event_name != 'pull_request'
 
     runs-on: ubuntu-latest
+    timeout-minutes: 15
+
     container:
       image: ghcr.io/lightpanda-io/perf-fmt:latest
       credentials:

.gitignore

@@ -1,6 +1,7 @@
 zig-cache
+/.zig-cache/
 zig-out
-/vendor/netsurf/build/
-/vendor/netsurf/lib/
-/vendor/netsurf/include/
+/vendor/netsurf/out
 /vendor/libiconv/
+lightpanda.id
+/v8/

.gitmodules

@@ -1,24 +1,21 @@
-[submodule "vendor/zig-js-runtime"]
-	path = vendor/zig-js-runtime
-	url = git@github.com:lightpanda-io/zig-js-runtime.git
 [submodule "vendor/netsurf/libwapcaplet"]
 	path = vendor/netsurf/libwapcaplet
-	url = git@github.com:lightpanda-io/libwapcaplet.git
+	url = https://github.com/lightpanda-io/libwapcaplet.git/
 [submodule "vendor/netsurf/libparserutils"]
 	path = vendor/netsurf/libparserutils
-	url = git@github.com:lightpanda-io/libparserutils.git
+	url = https://github.com/lightpanda-io/libparserutils.git/
 [submodule "vendor/netsurf/libdom"]
 	path = vendor/netsurf/libdom
-	url = git@github.com:lightpanda-io/libdom.git
+	url = https://github.com/lightpanda-io/libdom.git/
 [submodule "vendor/netsurf/share/netsurf-buildsystem"]
 	path = vendor/netsurf/share/netsurf-buildsystem
 	url = https://source.netsurf-browser.org/buildsystem.git
 [submodule "vendor/netsurf/libhubbub"]
 	path = vendor/netsurf/libhubbub
-	url = git@github.com:lightpanda-io/libhubbub.git
+	url = https://github.com/lightpanda-io/libhubbub.git/
 [submodule "tests/wpt"]
 	path = tests/wpt
 	url = https://github.com/lightpanda-io/wpt
 [submodule "vendor/mimalloc"]
 	path = vendor/mimalloc
-	url = git@github.com:microsoft/mimalloc.git
+	url = https://github.com/microsoft/mimalloc.git/

CLA.md

@@ -0,0 +1,93 @@
+# Lightpanda (Selecy SAS) Grant and Contributor License Agreement (“Agreement”)
+
+This agreement is based on the Apache Software Foundation Contributor License
+Agreement. (v r190612)
+
+Thank you for your interest in software projects stewarded by Lightpanda
+(Selecy SAS) (“Lightpanda”). In order to clarify the intellectual property
+license granted with Contributions from any person or entity, Lightpanda must
+have a Contributor License Agreement (CLA) on file that has been agreed to by
+each Contributor, indicating agreement to the license terms below. This license
+is for your protection as a Contributor as well as the protection of Lightpanda
+and its users; it does not change your rights to use your own Contributions for
+any other purpose. This Agreement allows an individual to contribute to
+Lightpanda on that individual’s own behalf, or an entity (the “Corporation”) to
+submit Contributions to Lightpanda, to authorize Contributions submitted by its
+designated employees to Lightpanda, and to grant copyright and patent licenses
+thereto.
+
+You accept and agree to the following terms and conditions for Your present and
+future Contributions submitted to Lightpanda. Except for the license granted
+herein to Lightpanda and recipients of software distributed by Lightpanda, You
+reserve all right, title, and interest in and to Your Contributions.
+
+1. Definitions. “You” (or “Your”) shall mean the copyright owner or legal
+   entity authorized by the copyright owner that is making this Agreement with
+   Lightpanda. For legal entities, the entity making a Contribution and all
+   other entities that control, are controlled by, or are under common control
+   with that entity are considered to be a single Contributor. For the purposes
+   of this definition, “control” means (i) the power, direct or indirect, to
+   cause the direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+   “Contribution” shall mean any work, as well as any modifications or
+   additions to an existing work, that is intentionally submitted by You to
+   Lightpanda for inclusion in, or documentation of, any of the products owned
+   or managed by Lightpanda (the “Work”). For the purposes of this definition,
+   “submitted” means any form of electronic, verbal, or written communication
+   sent to Lightpanda or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems (such
+   as GitHub), and issue tracking systems that are managed by, or on behalf of,
+   Lightpanda for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise designated
+   in writing by You as “Not a Contribution.”
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+   Agreement, You hereby grant to Lightpanda and to recipients of software
+   distributed by Lightpanda a perpetual, worldwide, non-exclusive, no-charge,
+   royalty-free, irrevocable copyright license to reproduce, prepare derivative
+   works of, publicly display, publicly perform, sublicense, and distribute
+   Your Contributions and such derivative works.
+
+3. Grant of Patent License. Subject to the terms and conditions of this
+   Agreement, You hereby grant to Lightpanda and to recipients of software
+   distributed by Lightpanda a perpetual, worldwide, non-exclusive, no-charge,
+   royalty-free, irrevocable (except as stated in this section) patent license
+   to make, have made, use, offer to sell, sell, import, and otherwise transfer
+   the Work, where such license applies only to those patent claims licensable
+   by You that are necessarily infringed by Your Contribution(s) alone or by
+   combination of Your Contribution(s) with the Work to which such
+   Contribution(s) were submitted. If any entity institutes patent litigation
+   against You or any other entity (including a cross-claim or counterclaim in
+   a lawsuit) alleging that your Contribution, or the Work to which you have
+   contributed, constitutes direct or contributory patent infringement, then
+   any patent licenses granted to that entity under this Agreement for that
+   Contribution or Work shall terminate as of the date such litigation is
+   filed.
+
+4. You represent that You are legally entitled to grant the above license. If
+   You are an individual, and if Your employer(s) has rights to intellectual
+   property that you create that includes Your Contributions, you represent
+   that You have received permission to make Contributions on behalf of that
+   employer, or that Your employer has waived such rights for your
+   Contributions to Lightpanda. If You are a Corporation, any individual who
+   makes a contribution from an account associated with You will be considered
+   authorized to Contribute on Your behalf.
+
+5. You represent that each of Your Contributions is Your original creation (see
+   section 7 for submissions on behalf of others).
+
+6. You are not expected to provide support for Your Contributions,except to the
+   extent You desire to provide support. You may provide support for free, for
+   a fee, or not at all. Unless required by applicable law or agreed to in
+   writing, You provide Your Contributions on an “AS IS” BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including,
+   without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT,
+   MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE.
+
+7. Should You wish to submit work that is not Your original creation, You may
+   submit it to Lightpanda separately from any Contribution, identifying the
+   complete details of its source and of any license or other restriction
+   (including, but not limited to, related patents, trademarks, and license
+   agreements) of which you are personally aware, and conspicuously marking the
+   work as “Submitted on behalf of a third-party: [named here]”.

CONTRIBUTING.md

@@ -0,0 +1,10 @@
+# Contributing
+
+Lightpanda accepts pull requests through GitHub.
+
+You have to sign our [CLA](CLA.md) during your first pull request process
+otherwise we're not able to accept your contributions.
+
+The process signature uses the [CLA assistant
+lite](https://github.com/marketplace/actions/cla-assistant-lite). You can see
+an example of the process in [#303](https://github.com/lightpanda-io/browser/pull/303).

Dockerfile

@@ -0,0 +1,75 @@
+FROM ubuntu:24.04
+
+ARG MINISIG=0.12
+ARG ZIG=0.14.1
+ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
+ARG ARCH=x86_64
+ARG V8=13.6.233.8
+ARG ZIG_V8=v0.1.24
+
+RUN apt-get update -yq && \
+    apt-get install -yq xz-utils \
+        python3 ca-certificates git \
+        pkg-config libglib2.0-dev \
+        gperf libexpat1-dev \
+        cmake clang \
+        curl git
+
+# 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
+
+# install zig
+RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz
+RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz.minisig
+
+RUN minisign-linux/${ARCH}/minisign -Vm zig-${ARCH}-linux-${ZIG}.tar.xz -P ${ZIG_MINISIG}
+
+# clean minisg
+RUN rm -fr minisign-0.11-linux.tar.gz minisign-linux
+
+# install zig
+RUN tar xvf zig-${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
+
+# clean up zig install
+RUN rm -fr zig-${ARCH}-linux-${ZIG}.tar.xz zig-${ARCH}-linux-${ZIG}.tar.xz.minisig
+
+# force use of http instead of ssh with github
+RUN cat <<EOF > /root/.gitconfig
+[url "https://github.com/"]
+    insteadOf="git@github.com:"
+EOF
+
+# clone lightpanda
+RUN git clone git@github.com:lightpanda-io/browser.git
+
+WORKDIR /browser
+
+# install deps
+RUN git submodule init && \
+    git submodule update --recursive
+
+RUN make install-libiconv && \
+    make install-netsurf && \
+    make install-mimalloc
+
+# download and install v8
+RUN curl --fail -L -o libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${ZIG_V8}/libc_v8_${V8}_linux_${ARCH}.a && \
+    mkdir -p v8/out/linux/release/obj/zig/ && \
+    mv libc_v8.a v8/out/linux/release/obj/zig/libc_v8.a
+
+# build release
+RUN make build
+
+FROM ubuntu:24.04
+
+# copy ca certificates
+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
+
+EXPOSE 9222/tcp
+
+CMD ["/bin/lightpanda", "serve", "--host", "0.0.0.0", "--port", "9222"]

LICENSING.md

@@ -0,0 +1,22 @@
+# Licensing
+
+License names used in this document are as per [SPDX License
+List](https://spdx.org/licenses/).
+
+The default license for this project is [AGPL-3.0-only](LICENSE).
+
+## MIT
+
+The following files are licensed under MIT:
+
+```
+src/polyfill/fetch.js
+```
+
+The following directories and their subdirectories are licensed under their
+original upstream licenses:
+
+```
+vendor/
+tests/wpt/
+```

Makefile

@@ -3,6 +3,30 @@
 
 ZIG := zig
 BC := $(dir $(abspath $(lastword $(MAKEFILE_LIST))))
+# option test filter make test F="server"
+F=
+
+# OS and ARCH
+kernel = $(shell uname -ms)
+ifeq ($(kernel), Darwin arm64)
+	OS := macos
+	ARCH := aarch64
+else ifeq ($(kernel), Darwin x86_64)
+	OS := macos
+	ARCH := x86_64
+else ifeq ($(kernel), Linux aarch64)
+	OS := linux
+	ARCH := aarch64
+else ifeq ($(kernel), Linux arm64)
+	OS := linux
+	ARCH := aarch64
+else ifeq ($(kernel), Linux x86_64)
+	OS := linux
+	ARCH := x86_64
+else
+	$(error "Unhandled kernel: $(kernel)")
+endif
+
 
 # Infos
 # -----
@@ -23,33 +47,15 @@ help:
 
 # $(ZIG) commands
 # ------------
-.PHONY: build build-dev run run-release shell test bench download-zig wpt
+.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)
-kernel = $(shell uname -ms)
 
 ## Download the zig recommended version
 download-zig:
-ifeq ($(kernel), Darwin x86_64)
-	$(eval target="macos")
-	$(eval arch="x86_64")
-else ifeq ($(kernel), Darwin arm64)
-	$(eval target="macos")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux aarch64)
-	$(eval target="linux")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux arm64)
-	$(eval target="linux")
-	$(eval arch="aarch64")
-else ifeq ($(kernel), Linux x86_64)
-	$(eval target="linux")
-	$(eval arch="x86_64")
-else
-	$(error "Unhandled kernel: $(kernel)")
-endif
-	$(eval url = "https://ziglang.org/builds/zig-$(target)-$(arch)-$(zig_version).tar.xz")
-	$(eval dest = "/tmp/zig-$(target)-$(arch)-$(zig_version).tar.xz")
+	$(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"
@@ -57,53 +63,74 @@ endif
 ## Build in release-safe mode
 build:
 	@printf "\e[36mBuilding (release safe)...\e[0m\n"
-	@$(ZIG) build -Doptimize=ReleaseSafe -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	$(ZIG) build -Doptimize=ReleaseSafe -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 	@printf "\e[33mBuild OK\e[0m\n"
 
 ## Build in debug mode
 build-dev:
 	@printf "\e[36mBuilding (debug)...\e[0m\n"
-	@$(ZIG) build -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 	@printf "\e[33mBuild OK\e[0m\n"
 
-## Run the server in debug mode
+## Run the server in release mode
 run: build
 	@printf "\e[36mRunning...\e[0m\n"
-	@./zig-out/bin/browsercore || (printf "\e[33mRun ERROR\e[0m\n"; exit 1;)
+	@./zig-out/bin/lightpanda || (printf "\e[33mRun ERROR\e[0m\n"; exit 1;)
+
+## Run the server in debug mode
+run-debug: build-dev
+	@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 "\e[36mBuilding shell...\e[0m\n"
-	@$(ZIG) build shell -Dengine=v8 || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build shell || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 ## Run WPT tests
 wpt:
 	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 wpt-summary:
 	@printf "\e[36mBuilding wpt...\e[0m\n"
-	@$(ZIG) build wpt -Dengine=v8 -- --safe --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
+	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\e[33mBuild ERROR\e[0m\n"; exit 1;)
 
 ## Test
 test:
-	@printf "\e[36mTesting...\e[0m\n"
-	@$(ZIG) build test -Dengine=v8 || (printf "\e[33mTest ERROR\e[0m\n"; exit 1;)
-	@printf "\e[33mTest OK\e[0m\n"
+	@TEST_FILTER='${F}' $(ZIG) build test -freference-trace --summary all
+
+## Run demo/runner end to end tests
+end2end:
+	@test -d ../demo
+	cd ../demo && go run runner/main.go
+
+## v8
+get-v8:
+	@printf "\e[36mGetting v8 source...\e[0m\n"
+	@$(ZIG) build get-v8
+
+build-v8-dev:
+	@printf "\e[36mBuilding v8 (dev)...\e[0m\n"
+	@$(ZIG) build build-v8
+
+build-v8:
+	@printf "\e[36mBuilding v8...\e[0m\n"
+	@$(ZIG) build -Doptimize=ReleaseSafe build-v8
 
 # Install and build required dependencies commands
 # ------------
 .PHONY: install-submodule
-.PHONY: install-zig-js-runtime install-zig-js-runtime-dev install-libiconv
+.PHONY: install-libiconv
 .PHONY: _install-netsurf install-netsurf clean-netsurf test-netsurf install-netsurf-dev
 .PHONY: install-mimalloc install-mimalloc-dev clean-mimalloc
 .PHONY: install-dev install
 
 ## Install and build dependencies for release
-install: install-submodule install-zig-js-runtime install-netsurf install-mimalloc
+install: install-submodule install-libiconv install-netsurf install-mimalloc
 
 ## Install and build dependencies for dev
-install-dev: install-submodule install-zig-js-runtime-dev install-netsurf-dev install-mimalloc-dev
+install-dev: install-submodule install-libiconv install-netsurf-dev install-mimalloc-dev
 
 install-netsurf-dev: _install-netsurf
 install-netsurf-dev: OPTCFLAGS := -O0 -g -DNDEBUG
@@ -111,14 +138,16 @@ install-netsurf-dev: OPTCFLAGS := -O0 -g -DNDEBUG
 install-netsurf: _install-netsurf
 install-netsurf: OPTCFLAGS := -DNDEBUG
 
-BC_NS := $(BC)vendor/netsurf
-ICONV := $(BC)vendor/libiconv
+BC_NS := $(BC)vendor/netsurf/out/$(OS)-$(ARCH)
+ICONV := $(BC)vendor/libiconv/out/$(OS)-$(ARCH)
 # TODO: add Linux iconv path (I guess it depends on the distro)
 # 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: install-libiconv
+_install-netsurf: clean-netsurf
 	@printf "\e[36mInstalling NetSurf...\e[0m\n" && \
-	ls $(ICONV) 1> /dev/null || (printf "\e[33mERROR: you need to install libiconv in your system (on MacOS on with Homebrew)\e[0m\n"; exit 1;) && \
+	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" && \
@@ -137,7 +166,7 @@ _install-netsurf: install-libiconv
 	BUILDDIR=$(BC_NS)/build/libdom make install && \
 	printf "\e[33mRunning libdom example...\e[0m\n" && \
 	cd examples && \
-	zig cc \
+	$(ZIG) cc \
 	-I$(ICONV)/include \
 	-I$(BC_NS)/include \
 	-L$(ICONV)/lib \
@@ -156,10 +185,7 @@ _install-netsurf: install-libiconv
 
 clean-netsurf:
 	@printf "\e[36mCleaning NetSurf build...\e[0m\n" && \
-	cd vendor/netsurf && \
-	rm -R build && \
-	rm -R lib && \
-	rm -R include
+	rm -Rf $(BC_NS)
 
 test-netsurf:
 	@printf "\e[36mTesting NetSurf...\e[0m\n" && \
@@ -169,43 +195,50 @@ test-netsurf:
 	cd vendor/netsurf/libdom && \
 	BUILDDIR=$(BC_NS)/build/libdom make test
 
-install-libiconv:
-ifeq ("$(wildcard vendor/libiconv/lib/libiconv.a)","")
+download-libiconv:
+ifeq ("$(wildcard vendor/libiconv/libiconv-1.17)","")
 	@mkdir -p vendor/libiconv
 	@cd vendor/libiconv && \
 	curl https://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.17.tar.gz | tar -xvzf -
-	@cd vendor/libiconv/libiconv-1.17 && \
-	./configure --prefix=$(BC)vendor/libiconv --enable-static && \
-	make && make install
 endif
 
-install-zig-js-runtime-dev:
-	@cd vendor/zig-js-runtime && \
-	make install-dev
+install-libiconv: download-libiconv clean-libiconv
+	@cd vendor/libiconv/libiconv-1.17 && \
+	./configure --prefix=$(ICONV) --enable-static && \
+	make && make install
 
-install-zig-js-runtime:
-	@cd vendor/zig-js-runtime && \
-	make install
+clean-libiconv:
+ifneq ("$(wildcard vendor/libiconv/libiconv-1.17/Makefile)","")
+	@cd vendor/libiconv/libiconv-1.17 && \
+	make clean
+endif
+
+data:
+	cd src/data && go run public_suffix_list_gen.go > public_suffix_list.zig
 
 .PHONY: _build_mimalloc
-_build_mimalloc:
-	@cd vendor/mimalloc && \
-		mkdir -p out/include && \
-		cp include/mimalloc.h out/include/ && \
-		cd out && \
-		cmake -DMI_BUILD_SHARED=OFF -DMI_BUILD_OBJECT=OFF -DMI_BUILD_TESTS=OFF -DMI_OVERRIDE=OFF $(OPTS) .. && \
-		make
+
+MIMALLOC := $(BC)vendor/mimalloc/out/$(OS)-$(ARCH)
+_build_mimalloc: clean-mimalloc
+	@mkdir -p $(MIMALLOC)/build && \
+	cd $(MIMALLOC)/build && \
+	cmake -DMI_BUILD_SHARED=OFF -DMI_BUILD_OBJECT=OFF -DMI_BUILD_TESTS=OFF -DMI_OVERRIDE=OFF $(OPTS) ../../.. && \
+	make && \
+	mkdir -p $(MIMALLOC)/lib
 
 install-mimalloc-dev: _build_mimalloc
 install-mimalloc-dev: OPTS=-DCMAKE_BUILD_TYPE=Debug
 install-mimalloc-dev:
-	@cd vendor/mimalloc/out && \
-		mv libmimalloc-debug.a libmimalloc.a
+	@cd $(MIMALLOC) && \
+	mv build/libmimalloc-debug.a lib/libmimalloc.a
 
 install-mimalloc: _build_mimalloc
+install-mimalloc:
+	@cd $(MIMALLOC) && \
+	mv build/libmimalloc.a lib/libmimalloc.a
 
 clean-mimalloc:
-	@rm -fr vendor/mimalloc/lib/*
+	@rm -Rf $(MIMALLOC)/build
 
 ## Init and update git submodule
 install-submodule:

README.md

@@ -2,81 +2,153 @@
   <a href="https://lightpanda.io"><img src="https://cdn.lightpanda.io/assets/images/logo/lpd-logo.png" alt="Logo" height=170></a>
 </p>
 
-<h1 align="center">Lightpanda</h1>
+<h1 align="center">Lightpanda Browser</h1>
+
+<p align="center"><a href="https://lightpanda.io/">lightpanda.io</a></p>
 
 <div align="center">
-	<br />
+
+[![License](https://img.shields.io/github/license/lightpanda-io/browser)](https://github.com/lightpanda-io/browser/blob/main/LICENSE)
+[![Twitter Follow](https://img.shields.io/twitter/follow/lightpanda_io)](https://twitter.com/lightpanda_io)
+[![GitHub stars](https://img.shields.io/github/stars/lightpanda-io/browser)](https://github.com/lightpanda-io/browser)
+
 </div>
 
 Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
-- Support of the Web APIs (partial, WIP)
-- Compatible with Playwright, Puppeteer through CDP (WIP)
+- Support of Web APIs (partial, WIP)
+- Compatible with Playwright[^1], Puppeteer through CDP (WIP)
 
-Fast scraping and web automation with minimal memory footprint:
+Fast web automation for AI agents, LLM training, scraping and testing:
 
-- Ultra-low memory footprint (12x less than Chrome)
-- Blazingly fast & instant startup (64x faster than Chrome)
+- Ultra-low memory footprint (9x less than Chrome)
+- Exceptionally fast execution (11x faster than Chrome)
+- Instant startup
 
-<img width=500px src="https://cdn.lightpanda.io/assets/images/benchmark2.png">
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/execution-time.svg">
+](https://github.com/lightpanda-io/demo)
+&emsp;
+[<img width="350px" src="https://cdn.lightpanda.io/assets/images/github/memory-frame.svg">
+](https://github.com/lightpanda-io/demo)
+</div>
 
-See [benchmark details](https://github.com/lightpanda-io/demo).
+_Puppeteer requesting 100 pages from a local website on a AWS EC2 m5.large instance.
+See [benchmark details](https://github.com/lightpanda-io/demo)._
 
-## Why?
+[^1]: **Playwright support disclaimer:**
+Due to the nature of Playwright, a script that works with the current version of the browser may not function correctly with a future version. Playwright uses an intermediate JavaScript layer that selects an execution strategy based on the browser's available features. If Lightpanda adds a new [Web API](https://developer.mozilla.org/en-US/docs/Web/API), Playwright may choose to execute different code for the same script. This new code path could attempt to use features that are not yet implemented. Lightpanda makes an effort to add compatibility tests, but we can't cover all scenarios. If you encounter an issue, please create a [GitHub issue](https://github.com/lightpanda-io/browser/issues) and include the last known working version of the script.
 
-### Javascript execution is mandatory for the modern web
+## Quick start
 
-Back in the good old times, grabbing a webpage was as easy as making an HTTP request, cURL-like. It’s not possible anymore, because Javascript is everywhere, like it or not:
+### Install from the nightly builds
 
-- Ajax, Single Page App, Infinite loading, “click to display”, instant search, etc.
-- JS web frameworks: React, Vue, Angular & others
+You can download the last binary from the [nightly
+builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
+Linux x86_64 and MacOS aarch64.
 
-### Chrome is not the right tool
+*For Linux*
+```console
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-x86_64-linux && \
+chmod a+x ./lightpanda
+```
 
-So if we need Javascript, why not use a real web browser. Let’s take a huge desktop application, hack it, and run it on the server, right? Hundreds of instance of Chrome if you use it at scale. Are you sure it’s such a good idea?
+*For MacOS*
+```console
+curl -L -o lightpanda https://github.com/lightpanda-io/browser/releases/download/nightly/lightpanda-aarch64-macos && \
+chmod a+x ./lightpanda
+```
 
-- Heavy on RAM and CPU, expensive to run
-- Hard to package, deploy and maintain at scale
-- Bloated, lots of features are not useful in headless usage
+*For Windows + WSL2*
 
-### Lightpanda is built for performance
+The Lightpanda browser is compatible to run on windows inside WSL. Follow the Linux instruction for installation from a WSL terminal.
+It is recommended to install clients like Puppeteer on the Windows host.
 
-If we want both Javascript and performance, for a real headless browser, we need to start from scratch. Not yet another iteration of Chromium, really from a blank page. Crazy right? But that’s we did:
+### Dump a URL
 
-- Not based on Chromium, Blink or WebKit
-- Low-level system programming language (Zig) with optimisations in mind
-- Opinionated, no rendering
+```console
+./lightpanda fetch --dump https://lightpanda.io
+```
+```console
+info(browser): GET https://lightpanda.io/ http.Status.ok
+info(browser): fetch script https://api.website.lightpanda.io/js/script.js: http.Status.ok
+info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeError: Cannot read properties of undefined (reading 'pushState')
+<!DOCTYPE html>
+```
+
+### Start a CDP server
+
+```console
+./lightpanda serve --host 127.0.0.1 --port 9222
+```
+```console
+info(websocket): starting blocking worker to listen on 127.0.0.1:9222
+info(server): accepting new conn...
+```
+
+Once the CDP server started, you can run a Puppeteer script by configuring the
+`browserWSEndpoint`.
+
+```js
+'use strict'
+
+import puppeteer from 'puppeteer-core';
+
+// use browserWSEndpoint to pass the Lightpanda's CDP server address.
+const browser = await puppeteer.connect({
+  browserWSEndpoint: "ws://127.0.0.1:9222",
+});
+
+// The rest of your script remains the same.
+const context = await browser.createBrowserContext();
+const page = await context.newPage();
+
+// Dump all the links from the page.
+await page.goto('https://wikipedia.com/');
+
+const links = await page.evaluate(() => {
+  return Array.from(document.querySelectorAll('a')).map(row => {
+    return row.getAttribute('href');
+  });
+});
+
+console.log(links);
+
+await page.close();
+await context.close();
+await browser.disconnect();
+```
+
+### Telemetry
+By default, Lightpanda collects and sends usage telemetry. This can be disabled by setting an environment variable `LIGHTPANDA_DISABLE_TELEMETRY=true`. You can read Lightpanda's privacy policy at: [https://lightpanda.io/privacy-policy](https://lightpanda.io/privacy-policy).
 
 ## Status
 
-Lightpanda is still a work in progress and is currently at the Alpha stage.
+Lightpanda is still a work in progress and is currently at a Beta stage.
 
-Here are the key features we want to implement before releasing a Beta version:
+:warning: You should expect most websites to fail or crash.
 
-- [x] Loader
-- [x] HTML parser and DOM tree
-- [x] Javascript support
+Here are the key features we have implemented:
+
+- [x] HTTP loader
+- [x] HTML parser and DOM tree (based on Netsurf libs)
+- [x] Javascript support (v8)
 - [x] Basic DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [ ] Fetch API
+  - [x] Fetch API
 - [x] DOM dump
-- [ ] Basic CDP server
+- [x] Basic CDP/websockets server
 
-We will not provide binary versions until we reach at least the Beta stage.
-
-NOTE: There are hundreds of Web APIs. Developing a browser, even just for headless mode, is a huge task. It's more about coverage than a _working/not working_ binary situation.
+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
 
-We do not provide yet binary versions of Lightpanda, you have to compile it from source.
-
 ### Prerequisites
 
-Lightpanda is written with [Zig](https://ziglang.org/) `0.12.1`. 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
@@ -92,10 +164,15 @@ For Debian/Ubuntu based Linux:
 sudo apt install xz-utils \
     python3 ca-certificates git \
     pkg-config libglib2.0-dev \
-    gperf libexpat1-dev \
+    gperf libexpat1-dev unzip rsync \
     cmake clang
 ```
 
+For systems with [Nix](https://nixos.org/download/), you can use the devShell:
+```
+nix develop
+```
+
 For MacOS, you only need cmake:
 
 ```
@@ -108,9 +185,9 @@ brew install cmake
 
 You can run `make install` to install deps all in one (or `make install-dev` if you need the development versions).
 
-Be aware that the build task is very long and cpu consuming, as you will build from sources all dependancies, including the v8 Javascript engine.
+Be aware that the build task is very long and cpu consuming, as you will build from sources all dependencies, including the v8 Javascript engine.
 
-#### Step by step build dependancy
+#### Step by step build dependency
 
 The project uses git submodules for dependencies.
 
@@ -120,6 +197,14 @@ To init or update the submodules in the `vendor/` directory:
 make install-submodule
 ```
 
+**iconv**
+
+libiconv is an internationalization library used by Netsurf.
+
+```
+make install-libiconv
+```
+
 **Netsurf libs**
 
 Netsurf libs are used for HTML parsing and DOM tree generation.
@@ -144,17 +229,21 @@ Note: when Mimalloc is built in dev mode, you can dump memory stats with the
 env var `MIMALLOC_SHOW_STATS=1`. See
 [https://microsoft.github.io/mimalloc/environment.html](https://microsoft.github.io/mimalloc/environment.html).
 
-**zig-js-runtime**
+**v8**
 
-Our own Zig/Javascript runtime, which includes the v8 Javascript engine.
-
-This build task is very long and cpu consuming, as you will build v8 from sources.
+First, get the tools necessary for building V8, as well as the V8 source code:
 
 ```
-make install-zig-js-runtime
+make get-v8
 ```
 
-For dev env, use `make iinstall-zig-js-runtime-dev`.
+Next, build v8. This build task is very long and cpu consuming, as you will build v8 from sources.
+
+```
+make build-v8
+```
+
+For dev env, use `make build-v8-dev`.
 
 ## Test
 
@@ -162,6 +251,20 @@ For dev env, use `make iinstall-zig-js-runtime-dev`.
 
 You can test Lightpanda by running `make test`.
 
+### End to end tests
+
+To run end to end tests, you need to clone the [demo
+repository](https://github.com/lightpanda-io/demo) into `../demo` dir.
+
+You have to install the [demo's node
+requirements](https://github.com/lightpanda-io/demo?tab=readme-ov-file#dependencies-1)
+
+You also need to install [Go](https://go.dev) > v1.24.
+
+```
+make end2end
+```
+
 ### Web Platform Tests
 
 Lightpanda is tested against the standardized [Web Platform
@@ -196,3 +299,35 @@ To add a new test, copy the file you want from the [WPT
 repo](https://github.com/web-platform-tests/wpt) into the `tests/wpt` directory.
 
 :warning: Please keep the original directory tree structure of `tests/wpt`.
+
+## Contributing
+
+Lightpanda accepts pull requests through GitHub.
+
+You have to sign our [CLA](CLA.md) during the pull request process otherwise
+we're not able to accept your contributions.
+
+## Why?
+
+### Javascript execution is mandatory for the modern web
+
+In the good old days, scraping a webpage was as easy as making an HTTP request, cURL-like. It’s not possible anymore, because Javascript is everywhere, like it or not:
+
+- Ajax, Single Page App, infinite loading, “click to display”, instant search, etc.
+- JS web frameworks: React, Vue, Angular & others
+
+### Chrome is not the right tool
+
+If we need Javascript, why not use a real web browser? Take a huge desktop application, hack it, and run it on the server. Hundreds or thousands of instances of Chrome if you use it at scale. Are you sure it’s such a good idea?
+
+- Heavy on RAM and CPU, expensive to run
+- Hard to package, deploy and maintain at scale
+- Bloated, lots of features are not useful in headless usage
+
+### Lightpanda is built for performance
+
+If we want both Javascript and performance in a true headless browser, we need to start from scratch. Not another iteration of Chromium, really from a blank page. Crazy right? But that’s what we did:
+
+- Not based on Chromium, Blink or WebKit
+- Low-level system programming language (Zig) with optimisations in mind
+- Opinionated: without graphical rendering

build.zig

@@ -17,16 +17,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-
 const builtin = @import("builtin");
 
-const jsruntime_path = "vendor/zig-js-runtime/";
-const jsruntime = @import("vendor/zig-js-runtime/build.zig");
-const jsruntime_pkgs = jsruntime.packages(jsruntime_path);
-
 /// Do not rename this constant. It is scanned by some scripts to determine
 /// which zig version to install.
-const recommended_zig_version = jsruntime.recommended_zig_version;
+const recommended_zig_version = "0.14.1";
 
 pub fn build(b: *std.Build) !void {
     switch (comptime builtin.zig_version.order(std.SemanticVersion.parse(recommended_zig_version) catch unreachable)) {
@@ -42,22 +37,29 @@ pub fn build(b: *std.Build) !void {
         },
     }
 
+    var opts = b.addOptions();
+    opts.addOption(
+        []const u8,
+        "git_commit",
+        b.option([]const u8, "git_commit", "Current git commit") orelse "dev",
+    );
+
     const target = b.standardTargetOptions(.{});
-    const mode = b.standardOptimizeOption(.{});
-
-    const options = try jsruntime.buildOptions(b);
+    const optimize = b.standardOptimizeOption(.{});
 
+    {
         // browser
         // -------
 
         // compile and install
         const exe = b.addExecutable(.{
-        .name = "browsercore",
-        .root_source_file = b.path("src/main.zig"),
+            .name = "lightpanda",
             .target = target,
-        .optimize = mode,
+            .optimize = optimize,
+            .root_source_file = b.path("src/main.zig"),
         });
-    try common(b, exe, options);
+
+        try common(b, opts, exe);
         b.installArtifact(exe);
 
         // run
@@ -69,46 +71,38 @@ pub fn build(b: *std.Build) !void {
         // step
         const run_step = b.step("run", "Run the app");
         run_step.dependOn(&run_cmd.step);
-
-    // shell
-    // -----
-
-    // compile and install
-    const shell = b.addExecutable(.{
-        .name = "browsercore-shell",
-        .root_source_file = b.path("src/main_shell.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, shell, options);
-    try jsruntime_pkgs.add_shell(shell);
-
-    // run
-    const shell_cmd = b.addRunArtifact(shell);
-    if (b.args) |args| {
-        shell_cmd.addArgs(args);
     }
 
-    // step
-    const shell_step = b.step("shell", "Run JS shell");
-    shell_step.dependOn(&shell_cmd.step);
+    {
+        // 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);
+    }
 
-    // test
+    {
+        // build v8
+        // -------
+        const v8 = b.dependency("v8", .{ .target = target, .optimize = optimize });
+        const build_v8 = b.addRunArtifact(v8.artifact("build-v8"));
+        const build_step = b.step("build-v8", "Build v8");
+        build_step.dependOn(&build_v8.step);
+    }
+
+    {
+        // tests
         // ----
 
         // compile
         const tests = b.addTest(.{
-        .root_source_file = b.path("src/run_tests.zig"),
-        .test_runner = b.path("src/test_runner.zig"),
+            .root_source_file = b.path("src/main.zig"),
+            .test_runner = .{ .path = b.path("src/test_runner.zig"), .mode = .simple },
             .target = target,
-        .optimize = mode,
-    });
-    try common(b, tests, options);
-
-    // add jsruntime pretty deps
-    tests.root_module.addAnonymousImport("pretty", .{
-        .root_source_file = b.path("vendor/zig-js-runtime/src/pretty.zig"),
+            .optimize = optimize,
         });
+        try common(b, opts, tests);
 
         const run_tests = b.addRunArtifact(tests);
         if (b.args) |args| {
@@ -116,20 +110,22 @@ pub fn build(b: *std.Build) !void {
         }
 
         // step
-    const test_step = b.step("test", "Run unit tests");
-    test_step.dependOn(&run_tests.step);
+        const tests_step = b.step("test", "Run unit tests");
+        tests_step.dependOn(&run_tests.step);
+    }
 
+    {
         // wpt
         // -----
 
         // compile and install
         const wpt = b.addExecutable(.{
-        .name = "browsercore-wpt",
+            .name = "lightpanda-wpt",
             .root_source_file = b.path("src/main_wpt.zig"),
             .target = target,
-        .optimize = mode,
+            .optimize = optimize,
         });
-    try common(b, wpt, options);
+        try common(b, opts, wpt);
 
         // run
         const wpt_cmd = b.addRunArtifact(wpt);
@@ -139,62 +135,104 @@ pub fn build(b: *std.Build) !void {
         // step
         const wpt_step = b.step("wpt", "WPT tests");
         wpt_step.dependOn(&wpt_cmd.step);
-
-    // get
-    // -----
-
-    // compile and install
-    const get = b.addExecutable(.{
-        .name = "browsercore-get",
-        .root_source_file = b.path("src/main_get.zig"),
-        .target = target,
-        .optimize = mode,
-    });
-    try common(b, get, options);
-    b.installArtifact(get);
-
-    // run
-    const get_cmd = b.addRunArtifact(get);
-    if (b.args) |args| {
-        get_cmd.addArgs(args);
     }
-    // step
-    const get_step = b.step("get", "request URL");
-    get_step.dependOn(&get_cmd.step);
 }
 
-fn common(
-    b: *std.Build,
-    step: *std.Build.Step.Compile,
-    options: jsruntime.Options,
-) !void {
-    const jsruntimemod = try jsruntime_pkgs.module(
-        b,
-        options,
-        step.root_module.optimize.?,
-        step.root_module.resolved_target.?,
+fn common(b: *std.Build, opts: *std.Build.Step.Options, step: *std.Build.Step.Compile) !void {
+    const mod = step.root_module;
+    const target = mod.resolved_target.?;
+    const optimize = mod.optimize.?;
+    const dep_opts = .{ .target = target, .optimize = optimize };
+
+    try moduleNetSurf(b, step, target);
+    mod.addImport("tls", b.dependency("tls", dep_opts).module("tls"));
+    mod.addImport("tigerbeetle-io", b.dependency("tigerbeetle_io", .{}).module("tigerbeetle_io"));
+
+    {
+        // v8
+        const v8_opts = b.addOptions();
+        v8_opts.addOption(bool, "inspector_subtype", false);
+
+        const v8_mod = b.dependency("v8", dep_opts).module("v8");
+        v8_mod.addOptions("default_exports", v8_opts);
+        mod.addImport("v8", v8_mod);
+    }
+
+    mod.link_libcpp = true;
+
+    {
+        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 },
         );
-    step.root_module.addImport("jsruntime", jsruntimemod);
+        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));
+    }
 
-    const netsurf = moduleNetSurf(b);
-    netsurf.addImport("jsruntime", jsruntimemod);
-    step.root_module.addImport("netsurf", netsurf);
+    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: *std.Build) *std.Build.Module {
-    const mod = b.addModule("netsurf", .{
-        .root_source_file = b.path("src/netsurf/netsurf.zig"),
-    });
-    // iconv
-    mod.addObjectFile(b.path("vendor/libiconv/lib/libiconv.a"));
-    mod.addIncludePath(b.path("vendor/libiconv/include"));
+fn moduleNetSurf(b: *std.Build, step: *std.Build.Step.Compile, target: std.Build.ResolvedTarget) !void {
+    const os = target.result.os.tag;
+    const arch = target.result.cpu.arch;
 
+    // iconv
+    const libiconv_lib_path = try std.fmt.allocPrint(
+        b.allocator,
+        "vendor/libiconv/out/{s}-{s}/lib/libiconv.a",
+        .{ @tagName(os), @tagName(arch) },
+    );
+    const libiconv_include_path = try std.fmt.allocPrint(
+        b.allocator,
+        "vendor/libiconv/out/{s}-{s}/lib/libiconv.a",
+        .{ @tagName(os), @tagName(arch) },
+    );
+    step.addObjectFile(b.path(libiconv_lib_path));
+    step.addIncludePath(b.path(libiconv_include_path));
+
+    {
         // mimalloc
-    mod.addImport("mimalloc", moduleMimalloc(b));
+        const mimalloc = "vendor/mimalloc";
+        const lib_path = try std.fmt.allocPrint(
+            b.allocator,
+            mimalloc ++ "/out/{s}-{s}/lib/libmimalloc.a",
+            .{ @tagName(os), @tagName(arch) },
+        );
+        step.addObjectFile(b.path(lib_path));
+        step.addIncludePath(b.path(mimalloc ++ "/include"));
+    }
 
     // netsurf libs
     const ns = "vendor/netsurf";
-    mod.addIncludePath(b.path(ns ++ "/include"));
+    const ns_include_path = try std.fmt.allocPrint(
+        b.allocator,
+        ns ++ "/out/{s}-{s}/include",
+        .{ @tagName(os), @tagName(arch) },
+    );
+    step.addIncludePath(b.path(ns_include_path));
 
     const libs: [4][]const u8 = .{
         "libdom",
@@ -203,20 +241,12 @@ fn moduleNetSurf(b: *std.Build) *std.Build.Module {
         "libwapcaplet",
     };
     inline for (libs) |lib| {
-        mod.addObjectFile(b.path(ns ++ "/lib/" ++ lib ++ ".a"));
-        mod.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
+        const ns_lib_path = try std.fmt.allocPrint(
+            b.allocator,
+            ns ++ "/out/{s}-{s}/lib/" ++ lib ++ ".a",
+            .{ @tagName(os), @tagName(arch) },
+        );
+        step.addObjectFile(b.path(ns_lib_path));
+        step.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
     }
-
-    return mod;
-}
-
-fn moduleMimalloc(b: *std.Build) *std.Build.Module {
-    const mod = b.addModule("mimalloc", .{
-        .root_source_file = b.path("src/mimalloc/mimalloc.zig"),
-    });
-
-    mod.addObjectFile(b.path("vendor/mimalloc/out/libmimalloc.a"));
-    mod.addIncludePath(b.path("vendor/mimalloc/out/include"));
-
-    return mod;
 }

build.zig.zon

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

flake.lock

@@ -0,0 +1,61 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1748964450,
+        "narHash": "sha256-ZouDiXkUk8mkMnah10QcoQ9Nu6UW6AFAHLScS3En6aI=",
+        "owner": "nixos",
+        "repo": "nixpkgs",
+        "rev": "9ff500cd9e123f46c55855eca64beccead29b152",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nixos",
+        "ref": "release-25.05",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,59 @@
+{
+  description = "headless browser designed for AI and automation";
+
+  inputs = {
+    nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs =
+    {
+      nixpkgs,
+      flake-utils,
+      ...
+    }:
+    flake-utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = import nixpkgs {
+          inherit system;
+        };
+
+        # We need crtbeginS.o for building.
+        crtFiles = pkgs.runCommand "crt-files" { } ''
+          mkdir -p $out/lib
+          cp -r ${pkgs.gcc.cc}/lib/gcc $out/lib/gcc
+        '';
+
+        # This build pipeline is very unhappy without an FHS-compliant env.
+        fhs = pkgs.buildFHSEnv {
+          name = "fhs-shell";
+          multiArch = true;
+          targetPkgs =
+            pkgs: with pkgs; [
+              # Build Tools
+              zig
+              zls
+              python3
+              pkg-config
+              cmake
+              gperf
+
+              # GCC
+              gcc
+              gcc.cc.lib
+              crtFiles
+
+              # Libaries
+              expat.dev
+              glib.dev
+              glibc.dev
+              zlib
+            ];
+        };
+      in
+      {
+        devShells.default = fhs.env;
+      }
+    );
+}

src/app.zig

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

src/async/stream.zig

@@ -1,133 +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 builtin = @import("builtin");
-const posix = std.posix;
-const io = std.io;
-const assert = std.debug.assert;
-
-const tcp = @import("tcp.zig");
-
-pub const Stream = struct {
-    alloc: std.mem.Allocator,
-    conn: *tcp.Conn,
-
-    handle: posix.socket_t,
-
-    pub fn close(self: Stream) void {
-        posix.close(self.handle);
-        self.alloc.destroy(self.conn);
-    }
-
-    pub const ReadError = posix.ReadError;
-    pub const WriteError = posix.WriteError;
-
-    pub const Reader = io.Reader(Stream, ReadError, read);
-    pub const Writer = io.Writer(Stream, WriteError, write);
-
-    pub fn reader(self: Stream) Reader {
-        return .{ .context = self };
-    }
-
-    pub fn writer(self: Stream) Writer {
-        return .{ .context = self };
-    }
-
-    pub fn read(self: Stream, buffer: []u8) ReadError!usize {
-        return self.conn.receive(self.handle, buffer) catch |err| switch (err) {
-            else => return error.Unexpected,
-        };
-    }
-
-    pub fn readv(s: Stream, iovecs: []const posix.iovec) ReadError!usize {
-        return posix.readv(s.handle, iovecs);
-    }
-
-    /// Returns the number of bytes read. If the number read is smaller than
-    /// `buffer.len`, it means the stream reached the end. Reaching the end of
-    /// a stream is not an error condition.
-    pub fn readAll(s: Stream, buffer: []u8) ReadError!usize {
-        return readAtLeast(s, buffer, buffer.len);
-    }
-
-    /// Returns the number of bytes read, calling the underlying read function
-    /// the minimal number of times until the buffer has at least `len` bytes
-    /// filled. If the number read is less than `len` it means the stream
-    /// reached the end. Reaching the end of the stream is not an error
-    /// condition.
-    pub fn readAtLeast(s: Stream, buffer: []u8, len: usize) ReadError!usize {
-        assert(len <= buffer.len);
-        var index: usize = 0;
-        while (index < len) {
-            const amt = try s.read(buffer[index..]);
-            if (amt == 0) break;
-            index += amt;
-        }
-        return index;
-    }
-
-    /// TODO in evented I/O mode, this implementation incorrectly uses the event loop's
-    /// file system thread instead of non-blocking. It needs to be reworked to properly
-    /// use non-blocking I/O.
-    pub fn write(self: Stream, buffer: []const u8) WriteError!usize {
-        return self.conn.send(self.handle, buffer) catch |err| switch (err) {
-            error.AccessDenied => error.AccessDenied,
-            error.WouldBlock => error.WouldBlock,
-            error.ConnectionResetByPeer => error.ConnectionResetByPeer,
-            error.MessageTooBig => error.FileTooBig,
-            error.BrokenPipe => error.BrokenPipe,
-            else => return error.Unexpected,
-        };
-    }
-
-    pub fn writeAll(self: Stream, bytes: []const u8) WriteError!void {
-        var index: usize = 0;
-        while (index < bytes.len) {
-            index += try self.write(bytes[index..]);
-        }
-    }
-
-    /// See https://github.com/ziglang/zig/issues/7699
-    /// See equivalent function: `std.fs.File.writev`.
-    pub fn writev(self: Stream, iovecs: []const posix.iovec_const) WriteError!usize {
-        if (iovecs.len == 0) return 0;
-        const first_buffer = iovecs[0].iov_base[0..iovecs[0].iov_len];
-        return try self.write(first_buffer);
-    }
-
-    /// The `iovecs` parameter is mutable because this function needs to mutate the fields in
-    /// order to handle partial writes from the underlying OS layer.
-    /// See https://github.com/ziglang/zig/issues/7699
-    /// See equivalent function: `std.fs.File.writevAll`.
-    pub fn writevAll(self: Stream, iovecs: []posix.iovec_const) WriteError!void {
-        if (iovecs.len == 0) return;
-
-        var i: usize = 0;
-        while (true) {
-            var amt = try self.writev(iovecs[i..]);
-            while (amt >= iovecs[i].iov_len) {
-                amt -= iovecs[i].iov_len;
-                i += 1;
-                if (i >= iovecs.len) return;
-            }
-            iovecs[i].iov_base += amt;
-            iovecs[i].iov_len -= amt;
-        }
-    }
-};

src/async/tcp.zig

@@ -1,112 +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 net = std.net;
-const Stream = @import("stream.zig").Stream;
-const Loop = @import("jsruntime").Loop;
-const NetworkImpl = Loop.Network(Conn.Command);
-
-// Conn is a TCP connection using jsruntime Loop async I/O.
-// connect, send and receive are blocking, but use async I/O in the background.
-// Client doesn't own the socket used for the connection, the caller is
-// responsible for closing it.
-pub const Conn = struct {
-    const Command = struct {
-        impl: NetworkImpl,
-
-        done: bool = false,
-        err: ?anyerror = null,
-        ln: usize = 0,
-
-        fn ok(self: *Command, err: ?anyerror, ln: usize) void {
-            self.err = err;
-            self.ln = ln;
-            self.done = true;
-        }
-
-        fn wait(self: *Command) !usize {
-            while (!self.done) try self.impl.tick();
-
-            if (self.err) |err| return err;
-            return self.ln;
-        }
-        pub fn onConnect(self: *Command, err: ?anyerror) void {
-            self.ok(err, 0);
-        }
-        pub fn onSend(self: *Command, ln: usize, err: ?anyerror) void {
-            self.ok(err, ln);
-        }
-        pub fn onReceive(self: *Command, ln: usize, err: ?anyerror) void {
-            self.ok(err, ln);
-        }
-    };
-
-    loop: *Loop,
-
-    pub fn connect(self: *Conn, socket: std.posix.socket_t, address: std.net.Address) !void {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.connect(&cmd, socket, address);
-        _ = try cmd.wait();
-    }
-
-    pub fn send(self: *Conn, socket: std.posix.socket_t, buffer: []const u8) !usize {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.send(&cmd, socket, buffer);
-        return try cmd.wait();
-    }
-
-    pub fn receive(self: *Conn, socket: std.posix.socket_t, buffer: []u8) !usize {
-        var cmd = Command{ .impl = NetworkImpl.init(self.loop) };
-        cmd.impl.receive(&cmd, socket, buffer);
-        return try cmd.wait();
-    }
-};
-
-pub fn tcpConnectToHost(alloc: std.mem.Allocator, loop: *Loop, name: []const u8, port: u16) !Stream {
-    // TODO async resolve
-    const list = try net.getAddressList(alloc, name, port);
-    defer list.deinit();
-
-    if (list.addrs.len == 0) return error.UnknownHostName;
-
-    for (list.addrs) |addr| {
-        return tcpConnectToAddress(alloc, loop, addr) catch |err| switch (err) {
-            error.ConnectionRefused => {
-                continue;
-            },
-            else => return err,
-        };
-    }
-    return std.posix.ConnectError.ConnectionRefused;
-}
-
-pub fn tcpConnectToAddress(alloc: std.mem.Allocator, loop: *Loop, addr: net.Address) !Stream {
-    const sockfd = try std.posix.socket(addr.any.family, std.posix.SOCK.STREAM, std.posix.IPPROTO.TCP);
-    errdefer std.posix.close(sockfd);
-
-    var conn = try alloc.create(Conn);
-    conn.* = Conn{ .loop = loop };
-    try conn.connect(sockfd, addr);
-
-    return Stream{
-        .alloc = alloc,
-        .conn = conn,
-        .handle = sockfd,
-    };
-}

src/async/test.zig

@@ -1,189 +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 http = std.http;
-const Client = @import("Client.zig");
-const Request = @import("Client.zig").Request;
-
-pub const Loop = @import("jsruntime").Loop;
-
-const url = "https://w3.org";
-
-test "blocking mode fetch API" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client: Client = .{
-        .allocator = alloc,
-        .loop = &loop,
-    };
-    defer client.deinit();
-
-    // force client's CA cert scan from system.
-    try client.ca_bundle.rescan(client.allocator);
-
-    const res = try client.fetch(.{
-        .location = .{ .uri = try std.Uri.parse(url) },
-    });
-
-    try std.testing.expect(res.status == .ok);
-}
-
-test "blocking mode open/send/wait API" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client: Client = .{
-        .allocator = alloc,
-        .loop = &loop,
-    };
-    defer client.deinit();
-
-    // force client's CA cert scan from system.
-    try client.ca_bundle.rescan(client.allocator);
-
-    var buf: [2014]u8 = undefined;
-    var req = try client.open(.GET, try std.Uri.parse(url), .{
-        .server_header_buffer = &buf,
-    });
-    defer req.deinit();
-
-    try req.send();
-    try req.finish();
-    try req.wait();
-
-    try std.testing.expect(req.response.status == .ok);
-}
-
-// Example how to write an async http client using the modified standard client.
-const AsyncClient = struct {
-    cli: Client,
-
-    const YieldImpl = Loop.Yield(AsyncRequest);
-    const AsyncRequest = struct {
-        const State = enum { new, open, send, finish, wait, done };
-
-        cli: *Client,
-        uri: std.Uri,
-
-        req: ?Request = undefined,
-        state: State = .new,
-
-        impl: YieldImpl,
-        err: ?anyerror = null,
-
-        buf: [2014]u8 = undefined,
-
-        pub fn deinit(self: *AsyncRequest) void {
-            if (self.req) |*r| r.deinit();
-        }
-
-        pub fn fetch(self: *AsyncRequest) void {
-            self.state = .new;
-            return self.impl.yield(self);
-        }
-
-        fn onerr(self: *AsyncRequest, err: anyerror) void {
-            self.state = .done;
-            self.err = err;
-        }
-
-        pub fn onYield(self: *AsyncRequest, err: ?anyerror) void {
-            if (err) |e| return self.onerr(e);
-
-            switch (self.state) {
-                .new => {
-                    self.state = .open;
-                    self.req = self.cli.open(.GET, self.uri, .{
-                        .server_header_buffer = &self.buf,
-                    }) catch |e| return self.onerr(e);
-                },
-                .open => {
-                    self.state = .send;
-                    self.req.?.send() catch |e| return self.onerr(e);
-                },
-                .send => {
-                    self.state = .finish;
-                    self.req.?.finish() catch |e| return self.onerr(e);
-                },
-                .finish => {
-                    self.state = .wait;
-                    self.req.?.wait() catch |e| return self.onerr(e);
-                },
-                .wait => {
-                    self.state = .done;
-                    return;
-                },
-                .done => return,
-            }
-
-            return self.impl.yield(self);
-        }
-
-        pub fn wait(self: *AsyncRequest) !void {
-            while (self.state != .done) try self.impl.tick();
-            if (self.err) |err| return err;
-        }
-    };
-
-    pub fn init(alloc: std.mem.Allocator, loop: *Loop) AsyncClient {
-        return .{
-            .cli = .{
-                .allocator = alloc,
-                .loop = loop,
-            },
-        };
-    }
-
-    pub fn deinit(self: *AsyncClient) void {
-        self.cli.deinit();
-    }
-
-    pub fn createRequest(self: *AsyncClient, uri: std.Uri) !AsyncRequest {
-        return .{
-            .impl = YieldImpl.init(self.cli.loop),
-            .cli = &self.cli,
-            .uri = uri,
-        };
-    }
-};
-
-test "non blocking client" {
-    const alloc = std.testing.allocator;
-
-    var loop = try Loop.init(alloc);
-    defer loop.deinit();
-
-    var client = AsyncClient.init(alloc, &loop);
-    defer client.deinit();
-
-    var reqs: [3]AsyncClient.AsyncRequest = undefined;
-    for (0..reqs.len) |i| {
-        reqs[i] = try client.createRequest(try std.Uri.parse(url));
-        reqs[i].fetch();
-    }
-    for (0..reqs.len) |i| {
-        try reqs[i].wait();
-        reqs[i].deinit();
-    }
-}

src/browser/State.zig

@@ -0,0 +1,65 @@
+// 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/>.
+
+// Sometimes we need to extend libdom. For example, its HTMLDocument doesn't
+// have a readyState. We have a couple different options, such as making the
+// correction in libdom directly. Another option stems from the fact that every
+// libdom node has an opaque embedder_data field. This is the struct that we
+// lazily load into that field.
+//
+// It didn't originally start off as a collection of every single extension, but
+// 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 Env = @import("env.zig").Env;
+const parser = @import("netsurf.zig");
+const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
+
+// for HTMLScript (but probably needs to be added to more)
+onload: ?Env.Function = null,
+onerror: ?Env.Function = null,
+
+// for HTMLElement
+style: CSSStyleDeclaration = .empty,
+
+// for html/document
+ready_state: ReadyState = .loading,
+
+// for dom/document
+active_element: ?*parser.Element = null,
+
+// for HTMLSelectElement
+// By default, if no option is explicitly selected, the first option should
+// be selected. However, libdom doesn't do this, and it sets the
+// selectedIndex to -1, which is a valid value for "nothing selected".
+// Therefore, when libdom says the selectedIndex == -1, we don't know if
+// it means that nothing is selected, or if the first option is selected by
+// default.
+// There are cases where this won't work, but when selectedIndex is
+// explicitly set, we set this boolean flag. Then, when we're getting then
+// selectedIndex, if this flag is == false, which is to say that if
+// selectedIndex hasn't been explicitly set AND if we have at least 1 option
+// AND if it isn't a multi select, we can make the 1st item selected by
+// default (by returning selectedIndex == 0).
+explicit_index_set: bool = false,
+
+const ReadyState = enum {
+    loading,
+    interactive,
+    complete,
+};

src/browser/browser.zig

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

src/browser/console/console.zig

@@ -0,0 +1,329 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const builtin = @import("builtin");
+
+const Allocator = std.mem.Allocator;
+const 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 static_lp(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.fatal(.console, "lightpanda", .{ .args = try serializeValues(values, page) });
+    }
+
+    pub fn static_log(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.info(.console, "info", .{ .args = try serializeValues(values, page) });
+    }
+
+    pub fn static_info(values: []JsObject, page: *Page) !void {
+        return static_log(values, page);
+    }
+
+    pub fn static_debug(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.debug(.console, "debug", .{ .args = try serializeValues(values, page) });
+    }
+
+    pub fn static_warn(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
+        log.warn(.console, "warn", .{ .args = try serializeValues(values, page) });
+    }
+
+    pub fn static_error(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
+
+        log.info(.console, "error", .{
+            .args = try serializeValues(values, page),
+            .stack = page.stackTrace() catch "???",
+        });
+    }
+
+    pub fn static_clear() void {}
+
+    pub fn _count(self: *Console, label_: ?[]const u8, page: *Page) !void {
+        const label = label_ orelse "default";
+        const gop = try self.counts.getOrPut(page.arena, label);
+
+        var current: u32 = 0;
+        if (gop.found_existing) {
+            current = gop.value_ptr.*;
+        } else {
+            gop.key_ptr.* = try page.arena.dupe(u8, label);
+        }
+
+        const count = current + 1;
+        gop.value_ptr.* = count;
+
+        log.info(.console, "count", .{ .label = label, .count = count });
+    }
+
+    pub fn _countReset(self: *Console, label_: ?[]const u8) !void {
+        const label = label_ orelse "default";
+        const kv = self.counts.fetchRemove(label) orelse {
+            log.info(.console, "invalid counter", .{ .label = label });
+            return;
+        };
+        log.info(.console, "count reset", .{ .label = label, .count = kv.value });
+    }
+
+    pub fn _time(self: *Console, label_: ?[]const u8, page: *Page) !void {
+        const label = label_ orelse "default";
+        const gop = try self.timers.getOrPut(page.arena, label);
+
+        if (gop.found_existing) {
+            log.info(.console, "duplicate timer", .{ .label = label });
+            return;
+        }
+        gop.key_ptr.* = try page.arena.dupe(u8, label);
+        gop.value_ptr.* = timestamp();
+    }
+
+    pub fn _timeLog(self: *Console, label_: ?[]const u8) void {
+        const elapsed = timestamp();
+        const label = label_ orelse "default";
+        const start = self.timers.get(label) orelse {
+            log.info(.console, "invalid timer", .{ .label = label });
+            return;
+        };
+        log.info(.console, "timer", .{ .label = label, .elapsed = elapsed - start });
+    }
+
+    pub fn _timeStop(self: *Console, label_: ?[]const u8) void {
+        const elapsed = timestamp();
+        const label = label_ orelse "default";
+        const kv = self.timers.fetchRemove(label) orelse {
+            log.info(.console, "invalid timer", .{ .label = label });
+            return;
+        };
+
+        log.warn(.console, "timer stop", .{ .label = label, .elapsed = elapsed - kv.value });
+    }
+
+    pub fn static_assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
+        if (assertion.isTruthy()) {
+            return;
+        }
+        var serialized_values: []const u8 = "";
+        if (values.len > 0) {
+            serialized_values = try serializeValues(values, page);
+        }
+        log.info(.console, "assertion failed", .{ .values = serialized_values });
+    }
+
+    fn serializeValues(values: []JsObject, page: *Page) ![]const u8 {
+        if (values.len == 0) {
+            return "";
+        }
+
+        const arena = page.call_arena;
+        const separator = log.separator();
+        var arr: std.ArrayListUnmanaged(u8) = .{};
+
+        for (values, 1..) |value, i| {
+            try arr.appendSlice(arena, separator);
+            try arr.writer(arena).print("{d}: ", .{i});
+            const serialized = if (builtin.mode == .Debug) value.toDetailString() else value.toString();
+            try arr.appendSlice(arena, try serialized);
+        }
+        return arr.items;
+    }
+};
+
+fn timestamp() u32 {
+    const ts = std.posix.clock_gettime(std.posix.CLOCK.MONOTONIC) catch unreachable;
+    return @intCast(ts.sec);
+}
+
+var test_capture = TestCapture{};
+const testing = @import("../../testing.zig");
+test "Browser.Console" {
+    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;
+    }
+};

src/browser/crypto/crypto.zig

@@ -0,0 +1,82 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const uuidv4 = @import("../../id.zig").uuidv4;
+
+// https://w3c.github.io/webcrypto/#crypto-interface
+pub const Crypto = struct {
+    pub fn _getRandomValues(_: *const Crypto, into: RandomValues) !void {
+        const buf = into.asBuffer();
+        if (buf.len > 65_536) {
+            return error.QuotaExceededError;
+        }
+        std.crypto.random.bytes(buf);
+    }
+
+    pub fn _randomUUID(_: *const Crypto) [36]u8 {
+        var hex: [36]u8 = undefined;
+        uuidv4(&hex);
+        return hex;
+    }
+};
+
+const RandomValues = union(enum) {
+    int8: []i8,
+    uint8: []u8,
+    int16: []i16,
+    uint16: []u16,
+    int32: []i32,
+    uint32: []u32,
+    int64: []i64,
+    uint64: []u64,
+
+    fn asBuffer(self: RandomValues) []u8 {
+        switch (self) {
+            .int8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .uint8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .int16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .uint16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .int32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .uint32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .int64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+            .uint64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+        }
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Crypto" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const a = crypto.randomUUID();", "undefined" },
+        .{ "const b = crypto.randomUUID();", "undefined" },
+        .{ "a.length;", "36" },
+        .{ "a.length;", "36" },
+        .{ "a == b;", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "try { crypto.getRandomValues(new BigUint64Array(8193)) } catch(e) { e.message == 'QuotaExceededError' }", "true" },
+        .{ "let r1 = new Int32Array(5)", "undefined" },
+        .{ "crypto.getRandomValues(r1)", "undefined" },
+        .{ "new Set(r1).size", "5" },
+    }, .{});
+}

src/browser/css/libdom.zig

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

src/browser/css/libdom_test.zig

@@ -19,7 +19,7 @@
 const std = @import("std");
 const css = @import("css.zig");
 const Node = @import("libdom.zig").Node;
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Matcher = struct {
     const Nodes = std.ArrayList(Node);

src/browser/css/parser.zig

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

src/browser/css/selector.zig

@@ -98,6 +98,7 @@ pub const PseudoClass = enum {
     placeholder,
     selection,
     spelling_error,
+    modal,
 
     pub const Error = error{
         InvalidPseudoClass,
@@ -154,6 +155,7 @@ pub const PseudoClass = enum {
         if (std.ascii.eqlIgnoreCase(s, "placeholder")) return .placeholder;
         if (std.ascii.eqlIgnoreCase(s, "selection")) return .selection;
         if (std.ascii.eqlIgnoreCase(s, "spelling-error")) return .spelling_error;
+        if (std.ascii.eqlIgnoreCase(s, "modal")) return .modal;
         return Error.InvalidPseudoClass;
     }
 };

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);
+}

src/browser/cssom/css_rule.zig

@@ -16,28 +16,27 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const generate = @import("generate.zig");
+const std = @import("std");
 
-const Console = @import("jsruntime").Console;
+const CSSStyleSheet = @import("css_stylesheet.zig").CSSStyleSheet;
 
-const DOM = @import("dom/dom.zig");
-const HTML = @import("html/html.zig");
-const Events = @import("events/event.zig");
-const XHR = @import("xhr/xhr.zig");
-const Storage = @import("storage/storage.zig");
-const URL = @import("url/url.zig");
+pub const Interfaces = .{
+    CSSRule,
+    CSSImportRule,
+};
 
-pub const HTMLDocument = @import("html/document.zig").HTMLDocument;
+// https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
+pub const CSSRule = struct {
+    css_text: []const u8,
+    parent_rule: ?*CSSRule = null,
+    parent_stylesheet: ?*CSSStyleSheet = null,
+};
 
-// Interfaces
-pub const Interfaces = generate.Tuple(.{
-    Console,
-    DOM.Interfaces,
-    Events.Interfaces,
-    HTML.Interfaces,
-    XHR.Interfaces,
-    Storage.Interfaces,
-    URL.Interfaces,
-});
-
-pub const UserContext = @import("user_context.zig").UserContext;
+pub const CSSImportRule = struct {
+    pub const prototype = *CSSRule;
+    href: []const u8,
+    layer_name: ?[]const u8,
+    media: void,
+    style_sheet: CSSStyleSheet,
+    supports_text: ?[]const u8,
+};

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" },
+    }, .{});
+}

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" },
+    }, .{});
+}

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" },
+    }, .{});
+}

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"));
+}

src/browser/cssom/cssom.zig

@@ -0,0 +1,30 @@
+// 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/>.
+
+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 = .{
+    Stylesheet,
+    CSSStylesheet,
+    CSSStyleDeclaration,
+    CSSRuleList,
+    @import("css_rule.zig").Interfaces,
+};

src/browser/cssom/stylesheet.zig

@@ -0,0 +1,55 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const parser = @import("../netsurf.zig");
+
+// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet#specifications
+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",
+
+    pub fn get_disabled(self: *const StyleSheet) bool {
+        return self.disabled;
+    }
+
+    pub fn get_href(self: *const StyleSheet) []const u8 {
+        return self.href;
+    }
+
+    // TODO: media
+
+    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_title(self: *const StyleSheet) []const u8 {
+        return self.title;
+    }
+
+    pub fn get_type(self: *const StyleSheet) []const u8 {
+        return self.type;
+    }
+};

src/browser/datauri.zig

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

src/browser/dom/attribute.zig

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

src/browser/dom/cdata_section.zig

@@ -16,9 +16,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 const Text = @import("text.zig").Text;
 
@@ -26,5 +24,5 @@ const Text = @import("text.zig").Text;
 pub const CDATASection = struct {
     pub const Self = parser.CDATASection;
     pub const prototype = *Text;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 };

src/browser/dom/character_data.zig

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

src/browser/dom/comment.zig

@@ -15,27 +15,22 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-const std = @import("std");
 
-const parser = @import("netsurf");
-
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const parser = @import("../netsurf.zig");
 
 const CharacterData = @import("character_data.zig").CharacterData;
 
-const UserContext = @import("../user_context.zig").UserContext;
+const Page = @import("../page.zig").Page;
 
 // https://dom.spec.whatwg.org/#interface-comment
 pub const Comment = struct {
     pub const Self = parser.Comment;
     pub const prototype = *CharacterData;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
-    pub fn constructor(userctx: UserContext, data: ?[]const u8) !*parser.Comment {
+    pub fn constructor(data: ?[]const u8, page: *const Page) !*parser.Comment {
         return parser.documentCreateComment(
-            parser.documentHTMLToDocument(userctx.document),
+            parser.documentHTMLToDocument(page.window.document),
             data orelse "",
         );
     }
@@ -44,16 +39,16 @@ pub const Comment = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var constructor = [_]Case{
-        .{ .src = "let comment = new Comment('foo')", .ex = "undefined" },
-        .{ .src = "comment.data", .ex = "foo" },
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Comment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "let emptycomment = new Comment()", .ex = "undefined" },
-        .{ .src = "emptycomment.data", .ex = "" },
-    };
-    try checkCases(js_env, &constructor);
+    try runner.testCases(&.{
+        .{ "let comment = new Comment('foo')", "undefined" },
+        .{ "comment.data", "foo" },
+
+        .{ "let emptycomment = new Comment()", "undefined" },
+        .{ "emptycomment.data", "" },
+    }, .{});
 }

src/browser/dom/css.zig

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

src/browser/dom/document.zig

@@ -0,0 +1,492 @@
+// 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 parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Node = @import("node.zig").Node;
+const NodeList = @import("nodelist.zig").NodeList;
+const NodeUnion = @import("node.zig").Union;
+
+const collection = @import("html_collection.zig");
+const css = @import("css.zig");
+
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+const TreeWalker = @import("tree_walker.zig").TreeWalker;
+
+const Env = @import("../env.zig").Env;
+
+const DOMImplementation = @import("implementation.zig").DOMImplementation;
+
+// WEB IDL https://dom.spec.whatwg.org/#document
+pub const Document = struct {
+    pub const Self = parser.Document;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn constructor(page: *const Page) !*parser.DocumentHTML {
+        const doc = try parser.documentCreateDocument(
+            try parser.documentHTMLGetTitle(page.window.document),
+        );
+
+        // we have to work w/ document instead of html document.
+        const ddoc = parser.documentHTMLToDocument(doc);
+        const ccur = parser.documentHTMLToDocument(page.window.document);
+        try parser.documentSetDocumentURI(ddoc, try parser.documentGetDocumentURI(ccur));
+        try parser.documentSetInputEncoding(ddoc, try parser.documentGetInputEncoding(ccur));
+
+        return doc;
+    }
+
+    // JS funcs
+    // --------
+    pub fn get_implementation(_: *parser.Document) DOMImplementation {
+        return DOMImplementation{};
+    }
+
+    pub fn get_documentElement(self: *parser.Document) !?ElementUnion {
+        const e = try parser.documentGetDocumentElement(self);
+        if (e == null) return null;
+        return try Element.toInterface(e.?);
+    }
+
+    pub fn get_documentURI(self: *parser.Document) ![]const u8 {
+        return try parser.documentGetDocumentURI(self);
+    }
+
+    pub fn get_URL(self: *parser.Document) ![]const u8 {
+        return try get_documentURI(self);
+    }
+
+    // TODO implement contentType
+    pub fn get_contentType(self: *parser.Document) []const u8 {
+        _ = self;
+        return "text/html";
+    }
+
+    // TODO implement compactMode
+    pub fn get_compatMode(self: *parser.Document) []const u8 {
+        _ = self;
+        return "CSS1Compat";
+    }
+
+    pub fn get_characterSet(self: *parser.Document) ![]const u8 {
+        return try parser.documentGetInputEncoding(self);
+    }
+
+    // alias of get_characterSet
+    pub fn get_charset(self: *parser.Document) ![]const u8 {
+        return try get_characterSet(self);
+    }
+
+    // alias of get_characterSet
+    pub fn get_inputEncoding(self: *parser.Document) ![]const u8 {
+        return try get_characterSet(self);
+    }
+
+    pub fn get_doctype(self: *parser.Document) !?*parser.DocumentType {
+        return try parser.documentGetDoctype(self);
+    }
+
+    pub fn _createEvent(_: *parser.Document, eventCstr: []const u8) !*parser.Event {
+        // TODO: for now only "Event" constructor is supported
+        // see table on https://dom.spec.whatwg.org/#dom-document-createevent $2
+        if (std.ascii.eqlIgnoreCase(eventCstr, "Event") or std.ascii.eqlIgnoreCase(eventCstr, "Events")) {
+            return try parser.eventCreate();
+        }
+        return parser.DOMError.NotSupported;
+    }
+
+    pub fn _getElementById(self: *parser.Document, id: []const u8) !?ElementUnion {
+        const e = try parser.documentGetElementById(self, id) orelse return null;
+        return try Element.toInterface(e);
+    }
+
+    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 {
+        const e = try parser.documentCreateElementNS(self, ns, tag_name);
+        return try Element.toInterface(e);
+    }
+
+    // We can't simply use libdom dom_document_get_elements_by_tag_name here.
+    // Indeed, netsurf implemented a previous dom spec when
+    // getElementsByTagName returned a NodeList.
+    // But since
+    // https://github.com/whatwg/dom/commit/190700b7c12ecfd3b5ebdb359ab1d6ea9cbf7749
+    // the spec changed to return an HTMLCollection instead.
+    // That's why we reimplemented getElementsByTagName by using an
+    // HTMLCollection in zig here.
+    pub fn _getElementsByTagName(
+        self: *parser.Document,
+        tag_name: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentToNode(self), tag_name, 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 {
+        return try parser.documentCreateDocumentFragment(self);
+    }
+
+    pub fn _createTextNode(self: *parser.Document, data: []const u8) !*parser.Text {
+        return try parser.documentCreateTextNode(self, data);
+    }
+
+    pub fn _createCDATASection(self: *parser.Document, data: []const u8) !*parser.CDATASection {
+        return try parser.documentCreateCDATASection(self, data);
+    }
+
+    pub fn _createComment(self: *parser.Document, data: []const u8) !*parser.Comment {
+        return try parser.documentCreateComment(self, data);
+    }
+
+    pub fn _createProcessingInstruction(self: *parser.Document, target: []const u8, data: []const u8) !*parser.ProcessingInstruction {
+        return try parser.documentCreateProcessingInstruction(self, target, data);
+    }
+
+    pub fn _importNode(self: *parser.Document, node: *parser.Node, deep: ?bool) !NodeUnion {
+        const n = try parser.documentImportNode(self, node, deep orelse false);
+        return try Node.toInterface(n);
+    }
+
+    pub fn _adoptNode(self: *parser.Document, node: *parser.Node) !NodeUnion {
+        const n = try parser.documentAdoptNode(self, node);
+        return try Node.toInterface(n);
+    }
+
+    pub fn _createAttribute(self: *parser.Document, name: []const u8) !*parser.Attribute {
+        return try parser.documentCreateAttribute(self, name);
+    }
+
+    pub fn _createAttributeNS(self: *parser.Document, ns: []const u8, qname: []const u8) !*parser.Attribute {
+        return try parser.documentCreateAttributeNS(self, ns, qname);
+    }
+
+    // ParentNode
+    // https://dom.spec.whatwg.org/#parentnode
+    pub fn get_children(self: *parser.Document) !collection.HTMLCollection {
+        return try collection.HTMLCollectionChildren(parser.documentToNode(self), false);
+    }
+
+    pub fn get_firstElementChild(self: *parser.Document) !?ElementUnion {
+        const elt = try parser.documentGetDocumentElement(self) orelse return null;
+        return try Element.toInterface(elt);
+    }
+
+    pub fn get_lastElementChild(self: *parser.Document) !?ElementUnion {
+        const elt = try parser.documentGetDocumentElement(self) orelse return null;
+        return try Element.toInterface(elt);
+    }
+
+    pub fn get_childElementCount(self: *parser.Document) !u32 {
+        _ = try parser.documentGetDocumentElement(self) orelse return 0;
+        return 1;
+    }
+
+    pub fn _querySelector(self: *parser.Document, selector: []const u8, page: *Page) !?ElementUnion {
+        if (selector.len == 0) return null;
+
+        const n = try css.querySelector(page.arena, parser.documentToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try Element.toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.Document, selector: []const u8, page: *Page) !NodeList {
+        return css.querySelectorAll(page.arena, parser.documentToNode(self), selector);
+    }
+
+    pub fn _prepend(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.documentToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.documentToNode(self), nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.Document, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.documentToNode(self), nodes);
+    }
+
+    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(@alignCast(@ptrCast(self)))) |state| {
+            if (state.active_element) |ae| {
+                return ae;
+            }
+        }
+
+        if (try parser.documentHTMLBody(page.window.document)) |body| {
+            return @alignCast(@ptrCast(body));
+        }
+
+        return try parser.documentGetDocumentElement(self);
+    }
+
+    pub fn get_activeElement(self: *parser.Document, page: *Page) !?ElementUnion {
+        const ae = (try getActiveElement(self, page)) orelse return null;
+        return try Element.toInterface(ae);
+    }
+
+    // TODO: some elements can't be focused, like if they're disabled
+    // but there doesn't seem to be a generic way to check this. For example
+    // 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(@alignCast(@ptrCast(self)));
+        state.active_element = @ptrCast(e);
+    }
+};
+
+const testing = @import("../../testing.zig");
+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, .{});
+}

src/browser/dom/document_fragment.zig

@@ -0,0 +1,74 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Node = @import("node.zig").Node;
+
+// WEB IDL https://dom.spec.whatwg.org/#documentfragment
+pub const DocumentFragment = struct {
+    pub const Self = parser.DocumentFragment;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn constructor(page: *const Page) !*parser.DocumentFragment {
+        return parser.documentCreateDocumentFragment(
+            parser.documentHTMLToDocument(page.window.document),
+        );
+    }
+
+    pub fn _isEqualNode(self: *parser.DocumentFragment, other_node: *parser.Node) !bool {
+        const other_type = try parser.nodeType(other_node);
+        if (other_type != .document_fragment) {
+            return false;
+        }
+        _ = self;
+        return true;
+    }
+
+    pub fn _prepend(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.documentFragmentToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.documentFragmentToNode(self), nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.documentFragmentToNode(self), nodes);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.DocumentFragment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const dc = new DocumentFragment()", "undefined" },
+        .{ "dc.constructor.name", "DocumentFragment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const dc1 = new DocumentFragment()", "undefined" },
+        .{ "const dc2 = new DocumentFragment()", "undefined" },
+        .{ "dc1.isEqualNode(dc1)", "true" },
+        .{ "dc1.isEqualNode(dc2)", "true" },
+    }, .{});
+}

src/browser/dom/document_type.zig

@@ -0,0 +1,80 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+
+const Node = @import("node.zig").Node;
+
+// WEB IDL https://dom.spec.whatwg.org/#documenttype
+pub const DocumentType = struct {
+    pub const Self = parser.DocumentType;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn get_name(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetName(self);
+    }
+
+    pub fn get_publicId(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetPublicId(self);
+    }
+
+    pub fn get_systemId(self: *parser.DocumentType) ![]const u8 {
+        return try parser.documentTypeGetSystemId(self);
+    }
+
+    // netsurf's DocumentType doesn't implement the dom_node_get_attributes
+    // and thus will crash if we try to call nodeIsEqualNode.
+    pub fn _isEqualNode(self: *parser.DocumentType, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(other_node) != .document_type) {
+            return false;
+        }
+
+        const other: *parser.DocumentType = @ptrCast(other_node);
+        if (std.mem.eql(u8, try get_name(self), try get_name(other)) == false) {
+            return false;
+        }
+        if (std.mem.eql(u8, try get_publicId(self), try get_publicId(other)) == false) {
+            return false;
+        }
+        if (std.mem.eql(u8, try get_systemId(self), try get_systemId(other)) == false) {
+            return false;
+        }
+        return true;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.DocumentType" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let dt1 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "let dt2 = document.implementation.createDocumentType('qname2', 'pid2', 'sys2');", "undefined" },
+        .{ "let dt3 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "dt1.isEqualNode(dt1)", "true" },
+        .{ "dt1.isEqualNode(dt3)", "true" },
+        .{ "dt1.isEqualNode(dt2)", "false" },
+        .{ "dt2.isEqualNode(dt3)", "false" },
+        .{ "dt1.isEqualNode(document)", "false" },
+        .{ "document.isEqualNode(dt1)", "false" },
+    }, .{});
+}

src/browser/dom/dom.zig

@@ -16,25 +16,36 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const generate = @import("../generate.zig");
-
 const DOMException = @import("exceptions.zig").DOMException;
 const EventTarget = @import("event_target.zig").EventTarget;
 const DOMImplementation = @import("implementation.zig").DOMImplementation;
 const NamedNodeMap = @import("namednodemap.zig").NamedNodeMap;
-const DOMTokenList = @import("token_list.zig").DOMTokenList;
-const NodeList = @import("nodelist.zig").NodeList;
-const Nod = @import("node.zig");
+const DOMTokenList = @import("token_list.zig");
+const NodeList = @import("nodelist.zig");
+const Node = @import("node.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 NodeFilter = @import("node_filter.zig").NodeFilter;
+const Performance = @import("performance.zig").Performance;
+const PerformanceObserver = @import("performance_observer.zig").PerformanceObserver;
 
-pub const Interfaces = generate.Tuple(.{
+pub const Interfaces = .{
     DOMException,
     EventTarget,
     DOMImplementation,
     NamedNodeMap,
-    DOMTokenList,
-    NodeList,
-    Nod.Node,
-    Nod.Interfaces,
+    NamedNodeMap.Iterator,
+    DOMTokenList.Interfaces,
+    NodeList.Interfaces,
+    Node.Node,
+    Node.Interfaces,
     MutationObserver.Interfaces,
-});
+    IntersectionObserver.Interfaces,
+    DOMParser,
+    TreeWalker,
+    NodeFilter,
+    Performance,
+    PerformanceObserver,
+};

src/browser/dom/dom_parser.zig

@@ -0,0 +1,47 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+
+// https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
+pub const DOMParser = struct {
+    pub fn constructor() !DOMParser {
+        return .{};
+    }
+
+    pub fn _parseFromString(_: *DOMParser, string: []const u8, mime_type: []const u8) !*parser.DocumentHTML {
+        if (!std.mem.eql(u8, mime_type, "text/html")) {
+            // TODO: Support XML
+            return error.TypeError;
+        }
+
+        return try parser.documentHTMLParseFromStr(string);
+    }
+};
+
+const testing = @import("../../testing.zig");
+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]" },
+    }, .{});
+}

src/browser/dom/element.zig

@@ -0,0 +1,682 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const css = @import("css.zig");
+const log = @import("../../log.zig");
+const dump = @import("../dump.zig");
+const collection = @import("html_collection.zig");
+
+const Node = @import("node.zig").Node;
+const Walker = @import("walker.zig").WalkerDepthFirst;
+const NodeList = @import("nodelist.zig").NodeList;
+const HTMLElem = @import("../html/elements.zig");
+pub const Union = @import("../html/elements.zig").Union;
+
+// WEB IDL https://dom.spec.whatwg.org/#element
+pub const Element = struct {
+    pub const Self = parser.Element;
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub const DOMRect = struct {
+        x: f64,
+        y: f64,
+        width: f64,
+        height: f64,
+        bottom: f64,
+        right: f64,
+        top: f64,
+        left: f64,
+    };
+
+    pub fn toInterface(e: *parser.Element) !Union {
+        return try HTMLElem.toInterface(Union, e);
+        // SVGElement and MathML are not supported yet.
+    }
+
+    // JS funcs
+    // --------
+
+    pub fn get_namespaceURI(self: *parser.Element) !?[]const u8 {
+        return try parser.nodeGetNamespace(parser.elementToNode(self));
+    }
+
+    pub fn get_prefix(self: *parser.Element) !?[]const u8 {
+        return try parser.nodeGetPrefix(parser.elementToNode(self));
+    }
+
+    pub fn get_localName(self: *parser.Element) ![]const u8 {
+        return try parser.nodeLocalName(parser.elementToNode(self));
+    }
+
+    pub fn get_tagName(self: *parser.Element) ![]const u8 {
+        return try parser.nodeName(parser.elementToNode(self));
+    }
+
+    pub fn get_id(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "id") orelse "";
+    }
+
+    pub fn set_id(self: *parser.Element, id: []const u8) !void {
+        return try parser.elementSetAttribute(self, "id", id);
+    }
+
+    pub fn get_className(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "class") orelse "";
+    }
+
+    pub fn set_className(self: *parser.Element, class: []const u8) !void {
+        return try parser.elementSetAttribute(self, "class", class);
+    }
+
+    pub fn get_slot(self: *parser.Element) ![]const u8 {
+        return try parser.elementGetAttribute(self, "slot") orelse "";
+    }
+
+    pub fn set_slot(self: *parser.Element, slot: []const u8) !void {
+        return try parser.elementSetAttribute(self, "slot", slot);
+    }
+
+    pub fn get_classList(self: *parser.Element) !*parser.TokenList {
+        return try parser.tokenListCreate(self, "class");
+    }
+
+    pub fn get_attributes(self: *parser.Element) !*parser.NamedNodeMap {
+        // An element must have non-nil attributes.
+        return try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
+    }
+
+    pub fn get_innerHTML(self: *parser.Element, page: *Page) ![]const u8 {
+        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 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) !void {
+        const node = parser.elementToNode(self);
+        const doc = try parser.nodeOwnerDocument(node) orelse return parser.DOMError.WrongDocument;
+        // parse the fragment
+        const fragment = try parser.documentParseFragmentFromStr(doc, str);
+
+        // remove existing children
+        try Node.removeChildren(node);
+
+        // get fragment body children
+        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;
+
+        // append children to the node
+        const ln = try parser.nodeListLength(children);
+        for (0..ln) |_| {
+            // always index 0, because ndoeAppendChild moves the node out of
+            // the nodeList and into the new tree
+            const child = try parser.nodeListItem(children, 0) orelse continue;
+            _ = try parser.nodeAppendChild(node, child);
+        }
+    }
+
+    // The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.
+    // Returns the closest ancestor Element or itself, which matches the selectors. If there are no such element, null.
+    pub fn _closest(self: *parser.Element, selector: []const u8, page: *Page) !?*parser.Element {
+        const cssParse = @import("../css/css.zig").parse;
+        const CssNodeWrap = @import("../css/libdom.zig").Node;
+        const select = try cssParse(page.call_arena, selector, .{});
+
+        var current: CssNodeWrap = .{ .node = parser.elementToNode(self) };
+        while (true) {
+            if (try select.match(current)) {
+                if (!current.isElement()) {
+                    log.err(.browser, "closest invalid type", .{ .type = try current.tag() });
+                    return null;
+                }
+                return parser.nodeToElement(current.node);
+            }
+            current = try current.parent() orelse return null;
+        }
+    }
+
+    pub fn _hasAttributes(self: *parser.Element) !bool {
+        return try parser.nodeHasAttributes(parser.elementToNode(self));
+    }
+
+    pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
+        return try parser.elementGetAttribute(self, qname);
+    }
+
+    pub fn _getAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !?[]const u8 {
+        return try parser.elementGetAttributeNS(self, ns, qname);
+    }
+
+    pub fn _setAttribute(self: *parser.Element, qname: []const u8, value: []const u8) !void {
+        return try parser.elementSetAttribute(self, qname, value);
+    }
+
+    pub fn _setAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8, value: []const u8) !void {
+        return try parser.elementSetAttributeNS(self, ns, qname, value);
+    }
+
+    pub fn _removeAttribute(self: *parser.Element, qname: []const u8) !void {
+        return try parser.elementRemoveAttribute(self, qname);
+    }
+
+    pub fn _removeAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !void {
+        return try parser.elementRemoveAttributeNS(self, ns, qname);
+    }
+
+    pub fn _hasAttribute(self: *parser.Element, qname: []const u8) !bool {
+        return try parser.elementHasAttribute(self, qname);
+    }
+
+    pub fn _hasAttributeNS(self: *parser.Element, ns: []const u8, qname: []const u8) !bool {
+        return try parser.elementHasAttributeNS(self, ns, qname);
+    }
+
+    // https://dom.spec.whatwg.org/#dom-element-toggleattribute
+    pub fn _toggleAttribute(self: *parser.Element, qname: []u8, force: ?bool) !bool {
+        _ = std.ascii.lowerString(qname, qname);
+        const exists = try parser.elementHasAttribute(self, qname);
+
+        // If attribute is null, then:
+        if (!exists) {
+            // If force is not given or is true, create an attribute whose
+            // local name is qualifiedName, value is the empty string and node
+            // document is this’s node document, then append this attribute to
+            // this, and then return true.
+            if (force == null or force.?) {
+                try parser.elementSetAttribute(self, qname, "");
+                return true;
+            }
+            if (try parser.validateName(qname) == false) {
+                return parser.DOMError.InvalidCharacter;
+            }
+
+            // Return false.
+            return false;
+        }
+
+        // Otherwise, if force is not given or is false, remove an attribute
+        // given qualifiedName and this, and then return false.
+        if (force == null or !force.?) {
+            try parser.elementRemoveAttribute(self, qname);
+            return false;
+        }
+
+        // Return true.
+        return true;
+    }
+
+    pub fn _getAttributeNode(self: *parser.Element, name: []const u8) !?*parser.Attribute {
+        return try parser.elementGetAttributeNode(self, name);
+    }
+
+    pub fn _getAttributeNodeNS(self: *parser.Element, ns: []const u8, name: []const u8) !?*parser.Attribute {
+        return try parser.elementGetAttributeNodeNS(self, ns, name);
+    }
+
+    pub fn _setAttributeNode(self: *parser.Element, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.elementSetAttributeNode(self, attr);
+    }
+
+    pub fn _setAttributeNodeNS(self: *parser.Element, attr: *parser.Attribute) !?*parser.Attribute {
+        return try parser.elementSetAttributeNodeNS(self, attr);
+    }
+
+    pub fn _removeAttributeNode(self: *parser.Element, attr: *parser.Attribute) !*parser.Attribute {
+        return try parser.elementRemoveAttributeNode(self, attr);
+    }
+
+    pub fn _getElementsByTagName(
+        self: *parser.Element,
+        tag_name: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(
+            page.arena,
+            parser.elementToNode(self),
+            tag_name,
+            false,
+        );
+    }
+
+    pub fn _getElementsByClassName(
+        self: *parser.Element,
+        classNames: []const u8,
+        page: *Page,
+    ) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByClassName(
+            page.arena,
+            parser.elementToNode(self),
+            classNames,
+            false,
+        );
+    }
+
+    // ParentNode
+    // https://dom.spec.whatwg.org/#parentnode
+    pub fn get_children(self: *parser.Element) !collection.HTMLCollection {
+        return try collection.HTMLCollectionChildren(parser.elementToNode(self), false);
+    }
+
+    pub fn get_firstElementChild(self: *parser.Element) !?Union {
+        var children = try get_children(self);
+        return try children._item(0);
+    }
+
+    pub fn get_lastElementChild(self: *parser.Element) !?Union {
+        // TODO we could check the last child node first, if it's an element,
+        // we can return it directly instead of looping twice over the
+        // children.
+        var children = try get_children(self);
+        const ln = try children.get_length();
+        if (ln == 0) return null;
+        return try children._item(ln - 1);
+    }
+
+    pub fn get_childElementCount(self: *parser.Element) !u32 {
+        var children = try get_children(self);
+        return try children.get_length();
+    }
+
+    // NonDocumentTypeChildNode
+    // https://dom.spec.whatwg.org/#interface-nondocumenttypechildnode
+    pub fn get_previousElementSibling(self: *parser.Element) !?Union {
+        const res = try parser.nodePreviousElementSibling(parser.elementToNode(self));
+        if (res == null) return null;
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
+    }
+
+    pub fn get_nextElementSibling(self: *parser.Element) !?Union {
+        const res = try parser.nodeNextElementSibling(parser.elementToNode(self));
+        if (res == null) return null;
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
+    }
+
+    fn getElementById(self: *parser.Element, id: []const u8) !?*parser.Node {
+        // walk over the node tree fo find the node by id.
+        const root = parser.elementToNode(self);
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = try walker.get_next(root, next) orelse return null;
+            // ignore non-element nodes.
+            if (try parser.nodeType(next.?) != .element) {
+                continue;
+            }
+            const e = parser.nodeToElement(next.?);
+            if (std.mem.eql(u8, id, try get_id(e))) return next;
+        }
+    }
+
+    pub fn _querySelector(self: *parser.Element, selector: []const u8, page: *Page) !?Union {
+        if (selector.len == 0) return null;
+
+        const n = try css.querySelector(page.arena, parser.elementToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.Element, selector: []const u8, page: *Page) !NodeList {
+        return css.querySelectorAll(page.arena, parser.elementToNode(self), selector);
+    }
+
+    pub fn _prepend(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.prepend(parser.elementToNode(self), nodes);
+    }
+
+    pub fn _append(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.append(parser.elementToNode(self), nodes);
+    }
+
+    pub fn _before(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.elementToNode(self);
+        return Node.before(ref_node, nodes);
+    }
+
+    pub fn _after(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        const ref_node = parser.elementToNode(self);
+        return Node.after(ref_node, nodes);
+    }
+
+    pub fn _replaceChildren(self: *parser.Element, nodes: []const Node.NodeOrText) !void {
+        return Node.replaceChildren(parser.elementToNode(self), nodes);
+    }
+
+    // A DOMRect object providing information about the size of an element and its position relative to the viewport.
+    // 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 (!try page.isNodeAttached(parser.elementToNode(self))) {
+            return DOMRect{
+                .x = 0,
+                .y = 0,
+                .width = 0,
+                .height = 0,
+                .bottom = 0,
+                .right = 0,
+                .top = 0,
+                .left = 0,
+            };
+        }
+        return page.renderer.getRect(self);
+    }
+
+    // Returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
+    // We do not render so 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 (!try page.isNodeAttached(parser.elementToNode(self))) {
+            return &.{};
+        }
+        const heap_ptr = try page.call_arena.create(DOMRect);
+        heap_ptr.* = try page.renderer.getRect(self);
+        return heap_ptr[0..1];
+    }
+
+    pub fn get_clientWidth(_: *parser.Element, page: *Page) u32 {
+        return page.renderer.width();
+    }
+
+    pub fn get_clientHeight(_: *parser.Element, page: *Page) u32 {
+        return page.renderer.height();
+    }
+
+    pub fn _matches(self: *parser.Element, selectors: []const u8, page: *Page) !bool {
+        const cssParse = @import("../css/css.zig").parse;
+        const CssNodeWrap = @import("../css/libdom.zig").Node;
+        const s = try cssParse(page.call_arena, selectors, .{});
+        return s.match(CssNodeWrap{ .node = parser.elementToNode(self) });
+    }
+
+    pub fn _scrollIntoViewIfNeeded(_: *parser.Element, center_if_needed: ?bool) void {
+        _ = center_if_needed;
+    }
+
+    const CheckVisibilityOpts = struct {
+        contentVisibilityAuto: bool,
+        opacityProperty: bool,
+        visibilityProperty: bool,
+    };
+
+    pub fn _checkVisibility(self: *parser.Element, opts: ?CheckVisibilityOpts) bool {
+        _ = self;
+        _ = opts;
+        return true;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Element" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let g = document.getElementById('content')", "undefined" },
+        .{ "g.namespaceURI", "http://www.w3.org/1999/xhtml" },
+        .{ "g.prefix", "null" },
+        .{ "g.localName", "div" },
+        .{ "g.tagName", "DIV" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let gs = document.getElementById('content')", "undefined" },
+        .{ "gs.id", "content" },
+        .{ "gs.id = 'foo'", "foo" },
+        .{ "gs.id", "foo" },
+        .{ "gs.id = 'content'", "content" },
+        .{ "gs.className", "" },
+        .{ "let gs2 = document.getElementById('para-empty')", "undefined" },
+        .{ "gs2.className", "ok empty" },
+        .{ "gs2.className = 'foo bar baz'", "foo bar baz" },
+        .{ "gs2.className", "foo bar baz" },
+        .{ "gs2.className = 'ok empty'", "ok empty" },
+        .{ "let cl = gs2.classList", "undefined" },
+        .{ "cl.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el2 = document.createElement('div');", "undefined" },
+        .{ "el2.id = 'closest'; el2.className = 'ok';", "ok" },
+        .{ "el2.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "el2.closest('.ok')", "[object HTMLDivElement]" },
+        .{ "el2.closest('#9000')", "null" },
+        .{ "el2.closest('.notok')", "null" },
+
+        .{ "const sp = document.createElement('span');", "undefined" },
+        .{ "el2.appendChild(sp);", "[object HTMLSpanElement]" },
+        .{ "sp.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "sp.closest('#9000')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content')", "undefined" },
+        .{ "a.hasAttributes()", "true" },
+        .{ "a.attributes.length", "1" },
+        .{ "a.getAttribute('id')", "content" },
+        .{ "a.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" },
+    }, .{});
+}

src/browser/dom/event_target.zig

@@ -0,0 +1,237 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const EventHandler = @import("../events/event.zig").EventHandler;
+
+const DOMException = @import("exceptions.zig").DOMException;
+const Nod = @import("node.zig");
+
+// EventTarget interfaces
+pub const Union = Nod.Union;
+
+// EventTarget implementation
+pub const EventTarget = struct {
+    pub const Self = parser.EventTarget;
+    pub const Exception = DOMException;
+
+    pub fn toInterface(et: *parser.EventTarget, page: *Page) !Union {
+        // Not all targets are *parser.Nodes. page.zig emits a "load" event
+        // where the target is a Window, which cannot be cast directly to a node.
+        // Ideally, we'd remove this duality. Failing that, we'll need to embed
+        // data into the *parser.EventTarget should we need this for other types.
+        // For now, for the Window, which is a singleton, we can do this:
+        if (@intFromPtr(et) == @intFromPtr(&page.window.base)) {
+            return .{ .Window = &page.window };
+        }
+        return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
+    }
+
+    // JS funcs
+    // --------
+    pub fn _addEventListener(
+        self: *parser.EventTarget,
+        typ: []const u8,
+        listener: EventHandler.Listener,
+        opts: ?EventHandler.Opts,
+        page: *Page,
+    ) !void {
+        _ = try EventHandler.register(page.arena, self, typ, listener, opts);
+    }
+
+    const RemoveEventListenerOpts = union(enum) {
+        opts: Opts,
+        capture: bool,
+
+        const Opts = struct {
+            capture: ?bool,
+        };
+    };
+
+    pub fn _removeEventListener(
+        self: *parser.EventTarget,
+        typ: []const u8,
+        listener: EventHandler.Listener,
+        opts_: ?RemoveEventListenerOpts,
+    ) !void {
+        var capture = false;
+        if (opts_) |opts| {
+            capture = switch (opts) {
+                .capture => |c| c,
+                .opts => |o| o.capture orelse false,
+            };
+        }
+
+        const cbk = (try listener.callback(self)) orelse return;
+
+        // check if event target has already this listener
+        const lst = try parser.eventTargetHasListener(
+            self,
+            typ,
+            capture,
+            cbk.id,
+        );
+        if (lst == null) {
+            return;
+        }
+
+        // remove listener
+        try parser.eventTargetRemoveEventListener(
+            self,
+            typ,
+            lst.?,
+            capture,
+        );
+    }
+
+    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" {
+    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 },
+    }, .{});
+}

src/browser/dom/exceptions.zig

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

src/browser/dom/html_collection.zig

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

src/browser/dom/implementation.zig

@@ -0,0 +1,72 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const parser = @import("../netsurf.zig");
+const DOMException = @import("exceptions.zig").DOMException;
+
+// WEB IDL https://dom.spec.whatwg.org/#domimplementation
+pub const DOMImplementation = struct {
+    pub const Exception = DOMException;
+
+    pub fn _createDocumentType(
+        _: *DOMImplementation,
+        qname: [:0]const u8,
+        publicId: [:0]const u8,
+        systemId: [:0]const u8,
+    ) !*parser.DocumentType {
+        return try parser.domImplementationCreateDocumentType(qname, publicId, systemId);
+    }
+
+    pub fn _createDocument(
+        _: *DOMImplementation,
+        namespace: ?[:0]const u8,
+        qname: ?[:0]const u8,
+        doctype: ?*parser.DocumentType,
+    ) !*parser.Document {
+        return try parser.domImplementationCreateDocument(namespace, qname, doctype);
+    }
+
+    pub fn _createHTMLDocument(_: *DOMImplementation, title: ?[]const u8) !*parser.DocumentHTML {
+        return try parser.domImplementationCreateHTMLDocument(title);
+    }
+
+    pub fn _hasFeature(_: *DOMImplementation) bool {
+        return true;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Implementation" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let impl = document.implementation", "undefined" },
+        .{ "impl.createHTMLDocument();", "[object HTMLDocument]" },
+        .{ "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" },
+    }, .{});
+}

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" },
+    }, .{});
+}

src/browser/dom/mutation_observer.zig

@@ -0,0 +1,389 @@
+// 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 log = @import("../../log.zig");
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Env = @import("../env.zig").Env;
+const NodeList = @import("nodelist.zig").NodeList;
+
+pub const Interfaces = .{
+    MutationObserver,
+    MutationRecord,
+};
+
+const Walker = @import("../dom/walker.zig").WalkerChildren;
+
+// WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
+pub const MutationObserver = struct {
+    cbk: Env.Function,
+    arena: Allocator,
+
+    // 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: Env.Function, page: *Page) !MutationObserver {
+        return .{
+            .cbk = cbk,
+            .observed = .{},
+            .arena = page.arena,
+        };
+    }
+
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
+        const options = options_ orelse MutationObserverInit{};
+
+        const observer = try self.arena.create(Observer);
+        observer.* = .{
+            .node = node,
+            .options = options,
+            .mutation_observer = self,
+            .event_node = .{ .id = self.cbk.id, .func = Observer.handle },
+        };
+
+        // register node's events
+        if (options.childList or options.subtree) {
+            _ = try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMNodeInserted",
+                &observer.event_node,
+                false,
+            );
+            _ = try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMNodeRemoved",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.attr()) {
+            _ = try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMAttrModified",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.cdata()) {
+            _ = try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMCharacterDataModified",
+                &observer.event_node,
+                false,
+            );
+        }
+        if (options.subtree) {
+            _ = try parser.eventTargetAddEventListener(
+                parser.toEventTarget(parser.Node, node),
+                "DOMSubtreeModified",
+                &observer.event_node,
+                false,
+            );
+        }
+    }
+
+    pub fn jsCallScopeEnd(self: *MutationObserver) void {
+        const record = self.observed.items;
+        if (record.len == 0) {
+            return;
+        }
+
+        defer self.observed.clearRetainingCapacity();
+
+        for (record) |r| {
+            const records = [_]MutationRecord{r.*};
+            var result: Env.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",
+                });
+            };
+        }
+    }
+
+    // TODO
+    pub fn _disconnect(_: *MutationObserver) !void {
+        // TODO unregister listeners.
+    }
+
+    // TODO
+    pub fn _takeRecords(_: *const MutationObserver) ?[]const u8 {
+        return &[_]u8{};
+    }
+};
+
+pub const MutationRecord = struct {
+    type: []const u8,
+    target: *parser.Node,
+    added_nodes: NodeList = .{},
+    removed_nodes: NodeList = .{},
+    previous_sibling: ?*parser.Node = null,
+    next_sibling: ?*parser.Node = null,
+    attribute_name: ?[]const u8 = null,
+    attribute_namespace: ?[]const u8 = null,
+    old_value: ?[]const u8 = null,
+
+    pub fn get_type(self: *const MutationRecord) []const u8 {
+        return self.type;
+    }
+
+    pub fn get_addedNodes(self: *MutationRecord) *NodeList {
+        return &self.added_nodes;
+    }
+
+    pub fn get_removedNodes(self: *MutationRecord) *NodeList {
+        return &self.removed_nodes;
+    }
+
+    pub fn get_target(self: *const MutationRecord) *parser.Node {
+        return self.target;
+    }
+
+    pub fn get_attributeName(self: *const MutationRecord) ?[]const u8 {
+        return self.attribute_name;
+    }
+
+    pub fn get_attributeNamespace(self: *const MutationRecord) ?[]const u8 {
+        return self.attribute_namespace;
+    }
+
+    pub fn get_previousSibling(self: *const MutationRecord) ?*parser.Node {
+        return self.previous_sibling;
+    }
+
+    pub fn get_nextSibling(self: *const MutationRecord) ?*parser.Node {
+        return self.next_sibling;
+    }
+
+    pub fn get_oldValue(self: *const MutationRecord) ?[]const u8 {
+        return self.old_value;
+    }
+};
+
+const MutationObserverInit = struct {
+    childList: bool = false,
+    attributes: bool = false,
+    characterData: bool = false,
+    subtree: bool = false,
+    attributeOldValue: bool = false,
+    characterDataOldValue: bool = false,
+    // TODO
+    // attributeFilter: [][]const u8,
+
+    fn attr(self: MutationObserverInit) bool {
+        return self.attributes or self.attributeOldValue;
+    }
+
+    fn cdata(self: MutationObserverInit) bool {
+        return self.characterData or self.characterDataOldValue;
+    }
+};
+
+const Observer = struct {
+    node: *parser.Node,
+    options: MutationObserverInit,
+
+    // record of the mutation, all observed changes in 1 call are batched
+    record: ?MutationRecord = null,
+
+    // reference back to the MutationObserver so that we can access the arena
+    // and batch the mutation records.
+    mutation_observer: *MutationObserver,
+
+    event_node: parser.EventNode,
+
+    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
+        // mutation on any target is always ok.
+        if (o.options.subtree) {
+            return true;
+        }
+
+        // if target equals node, alway ok.
+        if (target == o.node) {
+            return true;
+        }
+
+        // no subtree, no same target and no childlist, always noky.
+        if (!o.options.childList) {
+            return false;
+        }
+
+        // target must be a child of o.node
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = walker.get_next(o.node, next) catch break orelse break;
+            if (next.? == target) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    fn handle(en: *parser.EventNode, event: *parser.Event) void {
+        const self: *Observer = @fieldParentPtr("event_node", en);
+        self._handle(event) catch |err| {
+            log.err(.web_api, "handle error", .{ .err = err, .source = "mutation observer" });
+        };
+    }
+
+    fn _handle(self: *Observer, event: *parser.Event) !void {
+        var mutation_observer = self.mutation_observer;
+
+        const node = blk: {
+            const event_target = try parser.eventTarget(event) orelse return;
+            break :blk parser.eventTargetToNode(event_target);
+        };
+
+        if (self.appliesTo(node) == false) {
+            return;
+        }
+
+        const event_type = blk: {
+            const t = try parser.eventType(event);
+            break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
+        };
+
+        const arena = mutation_observer.arena;
+        if (self.record == null) {
+            self.record = .{
+                .target = self.node,
+                .type = event_type.recordType(),
+            };
+            try mutation_observer.observed.append(arena, &self.record.?);
+        }
+
+        var record = &self.record.?;
+        const mutation_event = parser.eventToMutationEvent(event);
+
+        switch (event_type) {
+            .DOMAttrModified => {
+                record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
+                if (self.options.attributeOldValue) {
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
+                }
+            },
+            .DOMCharacterDataModified => {
+                if (self.options.characterDataOldValue) {
+                    record.old_value = parser.mutationEventPrevValue(mutation_event) catch null;
+                }
+            },
+            .DOMNodeInserted => {
+                if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
+                    try record.added_nodes.append(arena, related_node);
+                }
+            },
+            .DOMNodeRemoved => {
+                if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
+                    try record.removed_nodes.append(arena, related_node);
+                }
+            },
+        }
+    }
+};
+
+const MutationEventType = enum {
+    DOMAttrModified,
+    DOMCharacterDataModified,
+    DOMNodeInserted,
+    DOMNodeRemoved,
+
+    fn recordType(self: MutationEventType) []const u8 {
+        return switch (self) {
+            .DOMAttrModified => "attributes",
+            .DOMCharacterDataModified => "characterData",
+            .DOMNodeInserted => "childList",
+            .DOMNodeRemoved => "childList",
+        };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.MutationObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new MutationObserver(() => {}).observe(document, { childList: true });", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var nb = 0;
+            \\ var mrs;
+            \\ new MutationObserver((mu) => {
+            \\    mrs = mu;
+            \\    nb++;
+            \\ }).observe(document.firstElementChild, { attributes: true, attributeOldValue: true });
+            \\ document.firstElementChild.setAttribute("foo", "bar");
+            \\ // ignored b/c it's about another target.
+            \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
+            \\ nb;
+            ,
+            "1",
+        },
+        .{ "mrs[0].type", "attributes" },
+        .{ "mrs[0].target == document.firstElementChild", "true" },
+        .{ "mrs[0].target.getAttribute('foo')", "bar" },
+        .{ "mrs[0].attributeName", "foo" },
+        .{ "mrs[0].oldValue", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para").firstChild;
+            \\ var nb2 = 0;
+            \\ var mrs2;
+            \\ new MutationObserver((mu) => {
+            \\     mrs2 = mu;
+            \\     nb2++;
+            \\ }).observe(node, { characterData: true, characterDataOldValue: true });
+            \\ node.data = "foo";
+            \\ nb2;
+            ,
+            "1",
+        },
+        .{ "mrs2[0].type", "characterData" },
+        .{ "mrs2[0].target == node", "true" },
+        .{ "mrs2[0].target.data", "foo" },
+        .{ "mrs2[0].oldValue", " And" },
+    }, .{});
+
+    // tests that mutation observers that have a callback which trigger the
+    // mutation observer don't crash.
+    // https://github.com/lightpanda-io/browser/issues/550
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ new MutationObserver(() => {
+            \\     node.innerText = 'a';
+            \\ }).observe(document, { subtree:true,childList:true });
+            \\ node.innerText = "2";
+            ,
+            "2",
+        },
+    }, .{});
+}

src/browser/dom/namednodemap.zig

@@ -16,22 +16,16 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
-const parser = @import("netsurf");
-
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
+const parser = @import("../netsurf.zig");
 
 const DOMException = @import("exceptions.zig").DOMException;
 
 // WEB IDL https://dom.spec.whatwg.org/#namednodemap
 pub const NamedNodeMap = struct {
     pub const Self = parser.NamedNodeMap;
-    pub const mem_guarantied = true;
 
     pub const Exception = DOMException;
+    pub const Iterator = NamedNodeMapIterator;
 
     // TODO implement LegacyUnenumerableNamedProperties.
     // https://webidl.spec.whatwg.org/#LegacyUnenumerableNamedProperties
@@ -75,23 +69,70 @@ pub const NamedNodeMap = struct {
     ) !*parser.Attribute {
         return try parser.namedNodeMapRemoveNamedItemNS(self, namespace, localname);
     }
+
+    pub fn indexed_get(self: *parser.NamedNodeMap, index: u32, has_value: *bool) !*parser.Attribute {
+        return (try _item(self, index)) orelse {
+            has_value.* = false;
+            return undefined;
+        };
+    }
+
+    pub fn named_get(self: *parser.NamedNodeMap, name: []const u8, has_value: *bool) !*parser.Attribute {
+        return (try _getNamedItem(self, name)) orelse {
+            has_value.* = false;
+            return undefined;
+        };
+    }
+
+    pub fn _symbol_iterator(self: *parser.NamedNodeMap) NamedNodeMapIterator {
+        return .{ .map = self };
+    }
+};
+
+pub const NamedNodeMapIterator = struct {
+    index: u32 = 0,
+    map: *parser.NamedNodeMap,
+
+    pub const Return = struct {
+        done: bool,
+        value: ?*parser.Attribute,
+    };
+
+    pub fn _next(self: *NamedNodeMapIterator) !Return {
+        const e = try NamedNodeMap._item(self.map, self.index);
+        if (e == null) {
+            return .{
+                .value = null,
+                .done = true,
+            };
+        }
+
+        self.index += 1;
+        return .{
+            .value = e,
+            .done = false,
+        };
+    }
 };
 
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var setItem = [_]Case{
-        .{ .src = "let a = document.getElementById('content').attributes", .ex = "undefined" },
-        .{ .src = "a.length", .ex = "1" },
-        .{ .src = "a.item(0)", .ex = "[object Attr]" },
-        .{ .src = "a.item(1)", .ex = "null" },
-        .{ .src = "a.getNamedItem('id')", .ex = "[object Attr]" },
-        .{ .src = "a.getNamedItem('foo')", .ex = "null" },
-        .{ .src = "a.setNamedItem(a.getNamedItem('id'))", .ex = "[object Attr]" },
-    };
-    try checkCases(js_env, &setItem);
+const testing = @import("../../testing.zig");
+test "Browser.DOM.NamedNodeMap" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content').attributes", "undefined" },
+        .{ "a.length", "1" },
+        .{ "a.item(0)", "[object Attr]" },
+        .{ "a.item(1)", "null" },
+        .{ "a.getNamedItem('id')", "[object Attr]" },
+        .{ "a.getNamedItem('foo')", "null" },
+        .{ "a.setNamedItem(a.getNamedItem('id'))", "[object Attr]" },
+        .{ "a['id'].name", "id" },
+        .{ "a['id'].value", "content" },
+        .{ "a['other']", "undefined" },
+    }, .{});
 }

src/browser/dom/node.zig

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

src/browser/dom/node_filter.zig

@@ -0,0 +1,52 @@
+// 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 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;
+    pub const _SHOW_TEXT: u32 = 0b100;
+    pub const _SHOW_CDATA_SECTION: u32 = 0b1000;
+    pub const _SHOW_ENTITY_REFERENCE: u32 = 0b10000;
+    pub const _SHOW_ENTITY: u32 = 0b100000;
+    pub const _SHOW_PROCESSING_INSTRUCTION: u32 = 0b1000000;
+    pub const _SHOW_COMMENT: u32 = 0b10000000;
+    pub const _SHOW_DOCUMENT: u32 = 0b100000000;
+    pub const _SHOW_DOCUMENT_TYPE: u32 = 0b1000000000;
+    pub const _SHOW_DOCUMENT_FRAGMENT: u32 = 0b10000000000;
+    pub const _SHOW_NOTATION: u32 = 0b100000000000;
+};
+
+const testing = @import("../../testing.zig");
+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" },
+    }, .{});
+}

src/browser/dom/nodelist.zig

@@ -0,0 +1,198 @@
+// 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 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;
+
+const U32Iterator = @import("../iterator/iterator.zig").U32Iterator;
+
+const DOMException = @import("exceptions.zig").DOMException;
+
+pub const Interfaces = .{
+    NodeListIterator,
+    NodeList,
+};
+
+pub const NodeListIterator = struct {
+    coll: *NodeList,
+    index: u32 = 0,
+
+    pub const Return = struct {
+        value: ?NodeUnion,
+        done: bool,
+    };
+
+    pub fn _next(self: *NodeListIterator) !Return {
+        const e = try self.coll._item(self.index);
+        if (e == null) {
+            return Return{
+                .value = null,
+                .done = true,
+            };
+        }
+
+        self.index += 1;
+        return Return{
+            .value = e,
+            .done = false,
+        };
+    }
+};
+
+pub const NodeListEntriesIterator = struct {
+    coll: *NodeList,
+    index: u32 = 0,
+
+    pub const Return = struct {
+        value: ?NodeUnion,
+        done: bool,
+    };
+
+    pub fn _next(self: *NodeListEntriesIterator) !Return {
+        const e = try self.coll._item(self.index);
+        if (e == null) {
+            return Return{
+                .value = null,
+                .done = true,
+            };
+        }
+
+        self.index += 1;
+        return Return{
+            .value = e,
+            .done = false,
+        };
+    }
+};
+
+// Nodelist is implemented in pure Zig b/c libdom's NodeList doesn't allow to
+// append nodes.
+// WEB IDL https://dom.spec.whatwg.org/#nodelist
+//
+// TODO: a Nodelist can be either static or live. But the current
+// implementation allows only static nodelist.
+// see https://dom.spec.whatwg.org/#old-style-collections
+pub const NodeList = struct {
+    pub const Exception = DOMException;
+    const NodesArrayList = std.ArrayListUnmanaged(*parser.Node);
+
+    nodes: NodesArrayList = .{},
+
+    pub fn deinit(self: *NodeList, alloc: std.mem.Allocator) void {
+        // TODO unref all nodes
+        self.nodes.deinit(alloc);
+    }
+
+    pub fn append(self: *NodeList, alloc: std.mem.Allocator, node: *parser.Node) !void {
+        try self.nodes.append(alloc, node);
+    }
+
+    pub fn get_length(self: *NodeList) u32 {
+        return @intCast(self.nodes.items.len);
+    }
+
+    pub fn _item(self: *const NodeList, index: u32) !?NodeUnion {
+        if (index >= self.nodes.items.len) {
+            return null;
+        }
+
+        const n = self.nodes.items[index];
+        return try Node.toInterface(n);
+    }
+
+    // This code works, but it's _MUCH_ slower than using postAttach. The benefit
+    // of this version, is that it's "live"..but we're talking many orders of
+    // magnitude slower.
+    //
+    // You can test it by commenting out `postAttach`, uncommenting this and
+    // running:
+    //    zig build wpt --  tests/wpt/dom/nodes/NodeList-static-length-getter-tampered-indexOf-1.html
+    //
+    // I think this _is_ the right way to do it, but I must be doing something
+    // wrong to make it so slow.
+    // pub fn indexed_get(self: *const NodeList, index: u32, has_value: *bool) !?NodeUnion {
+    //     return (try self._item(index)) orelse {
+    //         has_value.* = false;
+    //         return null;
+    //     };
+    // }
+
+    pub fn _forEach(self: *NodeList, cbk: Function) !void { // TODO handle thisArg
+        for (self.nodes.items, 0..) |n, i| {
+            const ii: u32 = @intCast(i);
+            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 });
+            };
+        }
+    }
+
+    pub fn _keys(self: *NodeList) U32Iterator {
+        return .{
+            .length = self.get_length(),
+        };
+    }
+
+    pub fn _values(self: *NodeList) NodeListIterator {
+        return .{
+            .coll = self,
+        };
+    }
+
+    pub fn _symbol_iterator(self: *NodeList) NodeListIterator {
+        return self._values();
+    }
+
+    // TODO entries() https://developer.mozilla.org/en-US/docs/Web/API/NodeList/entries
+    pub fn postAttach(self: *NodeList, js_this: JsThis) !void {
+        const len = self.get_length();
+        for (0..len) |i| {
+            const node = try self._item(@intCast(i)) orelse unreachable;
+            try js_this.setIndex(@intCast(i), node, .{});
+        }
+    }
+};
+
+const testing = @import("../../testing.zig");
+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",
+        },
+    }, .{});
+}

src/browser/dom/performance.zig

@@ -0,0 +1,87 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Performance
+pub const Performance = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    time_origin: std.time.Timer,
+    // if (Window.crossOriginIsolated) -> Resolution in isolated contexts:       5 microseconds
+    // else                            -> Resolution in non-isolated contexts: 100 microseconds
+    const ms_resolution = 100;
+
+    fn limitedResolutionMs(nanoseconds: u64) f64 {
+        const elapsed_at_resolution = ((nanoseconds / std.time.ns_per_us) + ms_resolution / 2) / ms_resolution * ms_resolution;
+        const elapsed = @as(f64, @floatFromInt(elapsed_at_resolution));
+        return elapsed / @as(f64, std.time.us_per_ms);
+    }
+
+    pub fn get_timeOrigin(self: *const Performance) f64 {
+        const is_posix = switch (@import("builtin").os.tag) { // From std.time.zig L125
+            .windows, .uefi, .wasi => false,
+            else => true,
+        };
+        const zero = std.time.Instant{ .timestamp = if (!is_posix) 0 else .{ .sec = 0, .nsec = 0 } };
+        const started = self.time_origin.started.since(zero);
+        return limitedResolutionMs(started);
+    }
+
+    pub fn _now(self: *Performance) f64 {
+        return limitedResolutionMs(self.time_origin.read());
+    }
+};
+
+const testing = @import("./../../testing.zig");
+
+test "Performance: get_timeOrigin" {
+    var perf = Performance{ .time_origin = try std.time.Timer.start() };
+    const time_origin = perf.get_timeOrigin();
+    try testing.expect(time_origin >= 0);
+
+    // Check resolution
+    try testing.expectDelta(@rem(time_origin * std.time.us_per_ms, 100.0), 0.0, 0.1);
+}
+
+test "Performance: now" {
+    var perf = Performance{ .time_origin = try std.time.Timer.start() };
+
+    // Monotonically increasing
+    var now = perf._now();
+    while (now <= 0) { // Loop for now to not be 0
+        try testing.expectEqual(now, 0);
+        now = perf._now();
+    }
+    // Check resolution
+    try testing.expectDelta(@rem(now * std.time.us_per_ms, 100.0), 0.0, 0.1);
+
+    var after = perf._now();
+    while (after <= now) { // Loop untill after > now
+        try testing.expectEqual(after, now);
+        after = perf._now();
+    }
+    // Check resolution
+    try testing.expectDelta(@rem(after * std.time.us_per_ms, 100.0), 0.0, 0.1);
+}

src/browser/dom/performance_observer.zig

@@ -0,0 +1,34 @@
+// 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");
+
+// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
+pub const PerformanceObserver = struct {
+    pub const _supportedEntryTypes = [0][]const u8{};
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.PerformanceObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "PerformanceObserver.supportedEntryTypes.length", "0" },
+    }, .{});
+}

src/browser/dom/processing_instruction.zig

@@ -0,0 +1,116 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+const Node = @import("node.zig").Node;
+const Page = @import("../page.zig").Page;
+
+// https://dom.spec.whatwg.org/#processinginstruction
+pub const ProcessingInstruction = struct {
+    pub const Self = parser.ProcessingInstruction;
+
+    // TODO for libdom processing instruction inherit from node.
+    // But the spec says it must inherit from CDATA.
+    pub const prototype = *Node;
+    pub const subtype = .node;
+
+    pub fn get_target(self: *parser.ProcessingInstruction) ![]const u8 {
+        // libdom stores the ProcessingInstruction target in the node's name.
+        return try parser.nodeName(parser.processingInstructionToNode(self));
+    }
+
+    // There's something wrong when we try to clone a ProcessInstruction normally.
+    // The resulting object can't be cast back into a node (it crashes). This is
+    // a simple workaround.
+    pub fn _cloneNode(self: *parser.ProcessingInstruction, _: ?bool, page: *Page) !*parser.ProcessingInstruction {
+        return try parser.documentCreateProcessingInstruction(
+            @ptrCast(page.window.document),
+            try get_target(self),
+            (try get_data(self)) orelse "",
+        );
+    }
+
+    pub fn get_data(self: *parser.ProcessingInstruction) !?[]const u8 {
+        return try parser.nodeValue(parser.processingInstructionToNode(self));
+    }
+
+    pub fn set_data(self: *parser.ProcessingInstruction, data: []u8) !void {
+        try parser.nodeSetValue(parser.processingInstructionToNode(self), data);
+    }
+
+    // netsurf's ProcessInstruction doesn't implement the dom_node_get_attributes
+    // and thus will crash if we try to call nodeIsEqualNode.
+    pub fn _isEqualNode(self: *parser.ProcessingInstruction, other_node: *parser.Node) !bool {
+        if (try parser.nodeType(other_node) != .processing_instruction) {
+            return false;
+        }
+
+        const other: *parser.ProcessingInstruction = @ptrCast(other_node);
+
+        if (std.mem.eql(u8, try get_target(self), try get_target(other)) == false) {
+            return false;
+        }
+
+        {
+            const self_data = try get_data(self);
+            const other_data = try get_data(other);
+            if (self_data == null and other_data != null) {
+                return false;
+            }
+            if (self_data != null and other_data == null) {
+                return false;
+            }
+            if (std.mem.eql(u8, self_data.?, other_data.?) == false) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.ProcessingInstruction" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let pi = document.createProcessingInstruction('foo', 'bar')", "undefined" },
+        .{ "pi.target", "foo" },
+        .{ "pi.data", "bar" },
+        .{ "pi.data = 'foo'", "foo" },
+        .{ "pi.data", "foo" },
+
+        .{ "let pi2 = pi.cloneNode()", "undefined" },
+        .{ "pi2.nodeType", "7" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let pi11 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
+        .{ "let pi12 = document.createProcessingInstruction('target2', 'data2');", "undefined" },
+        .{ "let pi13 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
+        .{ "pi11.isEqualNode(pi11)", "true" },
+        .{ "pi11.isEqualNode(pi13)", "true" },
+        .{ "pi11.isEqualNode(pi12)", "false" },
+        .{ "pi12.isEqualNode(pi13)", "false" },
+        .{ "pi11.isEqualNode(document)", "false" },
+        .{ "document.isEqualNode(pi11)", "false" },
+    }, .{});
+}

src/browser/dom/text.zig

@@ -16,33 +16,25 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
-const jsruntime = @import("jsruntime");
-const Case = jsruntime.test_utils.Case;
-const checkCases = jsruntime.test_utils.checkCases;
-const generate = @import("../generate.zig");
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
 
 const CharacterData = @import("character_data.zig").CharacterData;
 const CDATASection = @import("cdata_section.zig").CDATASection;
 
-const UserContext = @import("../user_context.zig").UserContext;
-
 // Text interfaces
-pub const Interfaces = generate.Tuple(.{
+pub const Interfaces = .{
     CDATASection,
-});
+};
 
 pub const Text = struct {
     pub const Self = parser.Text;
     pub const prototype = *CharacterData;
-    pub const mem_guarantied = true;
+    pub const subtype = .node;
 
-    pub fn constructor(userctx: UserContext, data: ?[]const u8) !*parser.Text {
+    pub fn constructor(data: ?[]const u8, page: *const Page) !*parser.Text {
         return parser.documentCreateTextNode(
-            parser.documentHTMLToDocument(userctx.document),
+            parser.documentHTMLToDocument(page.window.document),
             data orelse "",
         );
     }
@@ -67,30 +59,28 @@ pub const Text = struct {
 // Tests
 // -----
 
-pub fn testExecFn(
-    _: std.mem.Allocator,
-    js_env: *jsruntime.Env,
-) anyerror!void {
-    var constructor = [_]Case{
-        .{ .src = "let t = new Text('foo')", .ex = "undefined" },
-        .{ .src = "t.data", .ex = "foo" },
+const testing = @import("../../testing.zig");
+test "Browser.DOM.Text" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-        .{ .src = "let emptyt = new Text()", .ex = "undefined" },
-        .{ .src = "emptyt.data", .ex = "" },
-    };
-    try checkCases(js_env, &constructor);
+    try runner.testCases(&.{
+        .{ "let t = new Text('foo')", "undefined" },
+        .{ "t.data", "foo" },
 
-    var get_whole_text = [_]Case{
-        .{ .src = "let text = document.getElementById('link').firstChild", .ex = "undefined" },
-        .{ .src = "text.wholeText === 'OK'", .ex = "true" },
-    };
-    try checkCases(js_env, &get_whole_text);
+        .{ "let emptyt = new Text()", "undefined" },
+        .{ "emptyt.data", "" },
+    }, .{});
 
-    var split_text = [_]Case{
-        .{ .src = "text.data = 'OK modified'", .ex = "OK modified" },
-        .{ .src = "let split = text.splitText('OK'.length)", .ex = "undefined" },
-        .{ .src = "split.data === ' modified'", .ex = "true" },
-        .{ .src = "text.data === 'OK'", .ex = "true" },
-    };
-    try checkCases(js_env, &split_text);
+    try runner.testCases(&.{
+        .{ "let text = document.getElementById('link').firstChild", "undefined" },
+        .{ "text.wholeText === 'OK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "text.data = 'OK modified'", "OK modified" },
+        .{ "let split = text.splitText('OK'.length)", "undefined" },
+        .{ "split.data === ' modified'", "true" },
+        .{ "text.data === 'OK'", "true" },
+    }, .{});
 }

src/browser/dom/token_list.zig

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

src/browser/dom/tree_walker.zig

@@ -0,0 +1,293 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+
+const 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: ?Env.Function,
+
+    pub const TreeWalkerOpts = union(enum) {
+        function: Env.Function,
+        object: struct { acceptNode: Env.Function },
+    };
+
+    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) {
+                .function => |func| func,
+                .object => |o| o.acceptNode,
+            };
+        }
+
+        return .{
+            .root = node,
+            .current_node = node,
+            .what_to_show = what_to_show orelse NodeFilter._SHOW_ALL,
+            .filter = filter_func,
+        };
+    }
+
+    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_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) ?Env.Function {
+        return self.filter;
+    }
+
+    pub fn set_currentNode(self: *TreeWalker, node: *parser.Node) !void {
+        self.current_node = node;
+    }
+
+    fn firstChild(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
+        const children = try parser.nodeGetChildNodes(node);
+        const child_count = try parser.nodeListLength(children);
+
+        for (0..child_count) |i| {
+            const index: u32 = @intCast(i);
+            const child = (try parser.nodeListItem(children, index)) orelse return null;
+
+            switch (try self.verify(child)) {
+                .accept => return child,
+                .reject => continue,
+                .skip => if (try self.firstChild(child)) |gchild| return gchild,
+            }
+        }
+
+        return null;
+    }
+
+    fn lastChild(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
+        const children = try parser.nodeGetChildNodes(node);
+        const child_count = try parser.nodeListLength(children);
+
+        var index: u32 = child_count;
+        while (index > 0) {
+            index -= 1;
+            const child = (try parser.nodeListItem(children, index)) orelse return null;
+
+            switch (try self.verify(child)) {
+                .accept => return child,
+                .reject => continue,
+                .skip => if (try self.lastChild(child)) |gchild| return gchild,
+            }
+        }
+
+        return null;
+    }
+
+    fn nextSibling(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
+        var current = node;
+
+        while (true) {
+            current = (try parser.nodeNextSibling(current)) orelse return null;
+
+            switch (try self.verify(current)) {
+                .accept => return current,
+                .skip, .reject => continue,
+            }
+        }
+
+        return null;
+    }
+
+    fn previousSibling(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
+        var current = node;
+
+        while (true) {
+            current = (try parser.nodePreviousSibling(current)) orelse return null;
+
+            switch (try self.verify(current)) {
+                .accept => return current,
+                .skip, .reject => continue,
+            }
+        }
+
+        return null;
+    }
+
+    fn parentNode(self: *const TreeWalker, node: *parser.Node) !?*parser.Node {
+        if (self.root == node) return null;
+
+        var current = node;
+        while (true) {
+            if (current == self.root) return null;
+            current = (try parser.nodeParentNode(current)) orelse return null;
+
+            switch (try self.verify(current)) {
+                .accept => return current,
+                .reject, .skip => continue,
+            }
+        }
+    }
+
+    pub fn _firstChild(self: *TreeWalker) !?*parser.Node {
+        if (try self.firstChild(self.current_node)) |child| {
+            self.current_node = child;
+            return child;
+        }
+
+        return null;
+    }
+
+    pub fn _lastChild(self: *TreeWalker) !?*parser.Node {
+        if (try self.lastChild(self.current_node)) |child| {
+            self.current_node = child;
+            return child;
+        }
+
+        return null;
+    }
+
+    pub fn _nextNode(self: *TreeWalker) !?*parser.Node {
+        if (try self.firstChild(self.current_node)) |child| {
+            self.current_node = child;
+            return child;
+        }
+
+        var current = self.current_node;
+        while (current != self.root) {
+            if (try self.nextSibling(current)) |sibling| {
+                self.current_node = sibling;
+                return sibling;
+            }
+
+            current = (try parser.nodeParentNode(current)) orelse break;
+        }
+
+        return null;
+    }
+
+    pub fn _nextSibling(self: *TreeWalker) !?*parser.Node {
+        if (try self.nextSibling(self.current_node)) |sibling| {
+            self.current_node = sibling;
+            return sibling;
+        }
+
+        return null;
+    }
+
+    pub fn _parentNode(self: *TreeWalker) !?*parser.Node {
+        if (try self.parentNode(self.current_node)) |parent| {
+            self.current_node = parent;
+            return parent;
+        }
+
+        return null;
+    }
+
+    pub fn _previousNode(self: *TreeWalker) !?*parser.Node {
+        var current = self.current_node;
+        while (try parser.nodePreviousSibling(current)) |previous| {
+            current = previous;
+
+            switch (try self.verify(current)) {
+                .accept => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.current_node = child;
+                        return child;
+                    }
+
+                    // Otherwise, this node is our previous one.
+                    self.current_node = current;
+                    return current;
+                },
+                .reject => continue,
+                .skip => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.current_node = child;
+                        return child;
+                    }
+                },
+            }
+        }
+
+        if (current != self.root) {
+            if (try self.parentNode(current)) |parent| {
+                self.current_node = parent;
+                return parent;
+            }
+        }
+
+        return null;
+    }
+
+    pub fn _previousSibling(self: *TreeWalker) !?*parser.Node {
+        if (try self.previousSibling(self.current_node)) |sibling| {
+            self.current_node = sibling;
+            return sibling;
+        }
+
+        return null;
+    }
+};

src/browser/dom/walker.zig

@@ -16,9 +16,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
 
 pub const Walker = union(enum) {
     walkerDepthFirst: WalkerDepthFirst,

src/browser/dump.zig

@@ -17,53 +17,74 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const File = std.fs.File;
 
-const parser = @import("netsurf");
-const Walker = @import("../dom/walker.zig").WalkerChildren;
+const parser = @import("netsurf.zig");
+const Walker = @import("dom/walker.zig").WalkerChildren;
 
 // writer must be a std.io.Writer
 pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
     try writer.writeAll("<!DOCTYPE html>\n");
-    try writeNode(parser.documentToNode(doc), writer);
+    try writeChildren(parser.documentToNode(doc), writer);
     try writer.writeAll("\n");
 }
 
-// writer must be a std.io.Writer
-pub fn writeNode(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;
-        switch (try parser.nodeType(next.?)) {
+// Spec: https://www.w3.org/TR/xml/#sec-prolog-dtd
+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 = 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);
+        try writer.writeAll("\" \"");
+        try writeEscapedAttributeValue(writer, system_id);
+        try writer.writeAll("\"");
+    } else if (public_id.len != 0) {
+        try writer.writeAll(" PUBLIC \"");
+        try writeEscapedAttributeValue(writer, public_id);
+        try writer.writeAll("\"");
+    } else if (system_id.len != 0) {
+        try writer.writeAll(" SYSTEM \"");
+        try writeEscapedAttributeValue(writer, system_id);
+        try writer.writeAll("\"");
+    }
+    // Internal subset is not implemented
+    try writer.writeAll(">");
+}
+
+pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
+    switch (try parser.nodeType(node)) {
         .element => {
             // open the tag
-                const tag = try parser.nodeLocalName(next.?);
+            const tag = try parser.nodeLocalName(node);
             try writer.writeAll("<");
             try writer.writeAll(tag);
 
             // write the attributes
-                const map = try parser.nodeGetAttributes(next.?);
+            const _map = try parser.nodeGetAttributes(node);
+            if (_map) |map| {
                 const ln = try parser.namedNodeMapGetLength(map);
-                var i: u32 = 0;
-                while (i < ln) {
-                    const attr = try parser.namedNodeMapItem(map, i) orelse break;
+                for (0..ln) |i| {
+                    const attr = try parser.namedNodeMapItem(map, @intCast(i)) orelse break;
                     try writer.writeAll(" ");
                     try writer.writeAll(try parser.attributeGetName(attr));
                     try writer.writeAll("=\"");
-                    try writer.writeAll(try parser.attributeGetValue(attr) orelse "");
+                    const attribute_value = try parser.attributeGetValue(attr) orelse "";
+                    try writeEscapedAttributeValue(writer, attribute_value);
                     try writer.writeAll("\"");
-                    i += 1;
+                }
             }
 
             try writer.writeAll(">");
 
             // void elements can't have any content.
-                if (try isVoid(parser.nodeToElement(next.?))) continue;
+            if (try isVoid(parser.nodeToElement(node))) return;
 
             // write the children
             // TODO avoid recursion
-                try writeNode(next.?, writer);
+            try writeChildren(node, writer);
 
             // close the tag
             try writer.writeAll("</");
@@ -71,36 +92,45 @@ pub fn writeNode(root: *parser.Node, writer: anytype) !void {
             try writer.writeAll(">");
         },
         .text => {
-                const v = try parser.nodeValue(next.?) orelse continue;
-                try writer.writeAll(v);
+            const v = try parser.nodeValue(node) orelse return;
+            try writeEscapedTextNode(writer, v);
         },
         .cdata_section => {
-                const v = try parser.nodeValue(next.?) orelse continue;
+            const v = try parser.nodeValue(node) orelse return;
             try writer.writeAll("<![CDATA[");
             try writer.writeAll(v);
             try writer.writeAll("]]>");
         },
         .comment => {
-                const v = try parser.nodeValue(next.?) orelse continue;
+            const v = try parser.nodeValue(node) orelse return;
             try writer.writeAll("<!--");
             try writer.writeAll(v);
             try writer.writeAll("-->");
         },
         // TODO handle processing instruction dump
-            .processing_instruction => continue,
+        .processing_instruction => return,
         // document fragment is outside of the main document DOM, so we
         // don't output it.
-            .document_fragment => continue,
+        .document_fragment => return,
         // document will never be called, but required for completeness.
-            .document => continue,
-            // done globally instead, but required for completeness.
-            .document_type => continue,
+        .document => return,
+        // done globally instead, but required for completeness. Only the outer DOCTYPE should be written
+        .document_type => return,
         // deprecated
-            .attribute => continue,
-            .entity_reference => continue,
-            .entity => continue,
-            .notation => continue,
+        .attribute => return,
+        .entity_reference => return,
+        .entity => return,
+        .notation => return,
     }
+}
+
+// writer must be a std.io.Writer
+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.?, writer);
     }
 }
 
@@ -115,18 +145,90 @@ fn isVoid(elem: *parser.Element) !bool {
     };
 }
 
+fn writeEscapedTextNode(writer: anytype, value: []const u8) !void {
+    var v = value;
+    while (v.len > 0) {
+        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>' }) orelse {
+            return writer.writeAll(v);
+        };
+        try writer.writeAll(v[0..index]);
+        switch (v[index]) {
+            '&' => try writer.writeAll("&amp;"),
+            '<' => try writer.writeAll("&lt;"),
+            '>' => try writer.writeAll("&gt;"),
+            else => unreachable,
+        }
+        v = v[index + 1 ..];
+    }
+}
+
+fn writeEscapedAttributeValue(writer: anytype, value: []const u8) !void {
+    var v = value;
+    while (v.len > 0) {
+        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>', '"' }) orelse {
+            return writer.writeAll(v);
+        };
+        try writer.writeAll(v[0..index]);
+        switch (v[index]) {
+            '&' => try writer.writeAll("&amp;"),
+            '<' => try writer.writeAll("&lt;"),
+            '>' => try writer.writeAll("&gt;"),
+            '"' => try writer.writeAll("&quot;"),
+            else => unreachable,
+        }
+        v = v[index + 1 ..];
+    }
+}
+
+const testing = std.testing;
 test "dump.writeHTML" {
-    const out = try std.fs.openFileAbsolute("/dev/null", .{ .mode = .write_only });
-    defer out.close();
+    try parser.init();
+    defer parser.deinit();
 
-    const file = try std.fs.cwd().openFile("test.html", .{});
-    defer file.close();
+    try testWriteHTML(
+        "<div id=\"content\">Over 9000!</div>",
+        "<div id=\"content\">Over 9000!</div>",
+    );
 
-    const doc_html = try parser.documentHTMLParse(file.reader(), "UTF-8");
-    // ignore close error
+    try testWriteHTML(
+        "<root><!-- a comment --></root>",
+        "<root><!-- a comment --></root>",
+    );
+
+    try testWriteHTML(
+        "<p>&lt; &gt; &amp;</p>",
+        "<p>&lt; &gt; &amp;</p>",
+    );
+
+    try testWriteHTML(
+        "<p id=\"&quot;&gt;&lt;&amp;&quot;''\">wat?</p>",
+        "<p id='\">&lt;&amp;&quot;&#39;&apos;'>wat?</p>",
+    );
+
+    try testWriteFullHTML(
+        \\<!DOCTYPE html>
+        \\<html><head><title>It's over what?</title><meta name="a" value="b">
+        \\</head><body>9000</body></html>
+        \\
+    , "<html><title>It's over what?</title><meta name=a value=\"b\">\n<body>9000");
+}
+
+fn testWriteHTML(comptime expected_body: []const u8, src: []const u8) !void {
+    const expected =
+        "<!DOCTYPE html>\n<html><head></head><body>" ++
+        expected_body ++
+        "</body></html>\n";
+    return testWriteFullHTML(expected, src);
+}
+
+fn testWriteFullHTML(comptime expected: []const u8, src: []const u8) !void {
+    var buf = std.ArrayListUnmanaged(u8){};
+    defer buf.deinit(testing.allocator);
+
+    const doc_html = try parser.documentHTMLParseFromStr(src);
     defer parser.documentHTMLClose(doc_html) catch {};
 
     const doc = parser.documentHTMLToDocument(doc_html);
-
-    try writeHTML(doc, out);
+    try writeHTML(doc, buf.writer(testing.allocator));
+    try testing.expectEqualStrings(expected, buf.items);
 }

src/browser/encoding/text_encoder.zig

@@ -0,0 +1,64 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Env = @import("../env.zig").Env;
+
+pub const Interfaces = .{
+    TextEncoder,
+};
+
+// https://encoding.spec.whatwg.org/#interface-textencoder
+pub const TextEncoder = struct {
+    pub fn constructor() !TextEncoder {
+        return .{};
+    }
+
+    pub fn get_encoding(_: *const TextEncoder) []const u8 {
+        return "utf-8";
+    }
+
+    pub fn _encode(_: *const TextEncoder, v: []const u8) !Env.TypedArray(u8) {
+        // Ensure the input is a valid utf-8
+        // It seems chrome accepts invalid utf-8 sequence.
+        //
+        if (!std.unicode.utf8ValidateSlice(v)) {
+            return error.InvalidUtf8;
+        }
+
+        return .{ .values = v };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Encoding.TextEncoder" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var encoder = new TextEncoder();", "undefined" },
+        .{ "encoder.encoding;", "utf-8" },
+        .{ "encoder.encode('€');", "226,130,172" },
+
+        // Invalid utf-8 sequence.
+        // Result with chrome:
+        // .{ "encoder.encode(new Uint8Array([0xE2,0x28,0xA1]))", "50,50,54,44,52,48,44,49,54,49" },
+        .{ "try {encoder.encode(new Uint8Array([0xE2,0x28,0xA1])) } catch (e) { e };", "Error: InvalidUtf8" },
+    }, .{});
+}

src/browser/env.zig

@@ -0,0 +1,44 @@
+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("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;

src/browser/events/custom_event.zig

@@ -0,0 +1,80 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const parser = @import("../netsurf.zig");
+const Event = @import("event.zig").Event;
+const JsObject = @import("../env.zig").JsObject;
+
+// https://dom.spec.whatwg.org/#interface-customevent
+pub const CustomEvent = struct {
+    pub const prototype = *Event;
+    pub const union_make_copy = true;
+
+    proto: parser.Event,
+    detail: ?JsObject,
+
+    const CustomEventInit = struct {
+        bubbles: bool = false,
+        cancelable: bool = false,
+        composed: bool = false,
+        detail: ?JsObject = null,
+    };
+
+    pub fn constructor(event_type: []const u8, opts_: ?CustomEventInit) !CustomEvent {
+        const opts = opts_ orelse CustomEventInit{};
+
+        const event = try parser.eventCreate();
+        defer parser.eventDestroy(event);
+        try parser.eventInit(event, event_type, .{
+            .bubbles = opts.bubbles,
+            .cancelable = opts.cancelable,
+            .composed = opts.composed,
+        });
+
+        return .{
+            .proto = event.*,
+            .detail = if (opts.detail) |d| try d.persist() else null,
+        };
+    }
+
+    pub fn get_detail(self: *CustomEvent) ?JsObject {
+        return self.detail;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.CustomEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let capture = null", "undefined" },
+        .{ "const el = document.createElement('div');", "undefined" },
+        .{ "el.addEventListener('c1', (e) => { capture = 'c1-' + new String(e.detail)})", "undefined" },
+        .{ "el.addEventListener('c2', (e) => { capture = 'c2-' + new String(e.detail.over)})", "undefined" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1'));", "true" },
+        .{ "capture", "c1-null" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1', {detail: '123'}));", "true" },
+        .{ "capture", "c1-123" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c2', {detail: {over: 9000}}));", "true" },
+        .{ "capture", "c2-9000" },
+    }, .{});
+}

src/browser/events/event.zig

@@ -0,0 +1,374 @@
+// 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 log = @import("../../log.zig");
+const parser = @import("../netsurf.zig");
+const generate = @import("../../runtime/generate.zig");
+
+const Page = @import("../page.zig").Page;
+const DOMException = @import("../dom/exceptions.zig").DOMException;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const EventTargetUnion = @import("../dom/event_target.zig").Union;
+
+const CustomEvent = @import("custom_event.zig").CustomEvent;
+const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
+const MouseEvent = @import("mouse_event.zig").MouseEvent;
+
+// Event interfaces
+pub const Interfaces = .{
+    Event,
+    CustomEvent,
+    ProgressEvent,
+    MouseEvent,
+};
+
+pub const Union = generate.Union(Interfaces);
+
+// https://dom.spec.whatwg.org/#event
+pub const Event = struct {
+    pub const Self = parser.Event;
+    pub const Exception = DOMException;
+
+    pub const EventInit = parser.EventInit;
+
+    // JS
+    // --
+
+    pub const _CAPTURING_PHASE = 1;
+    pub const _AT_TARGET = 2;
+    pub const _BUBBLING_PHASE = 3;
+
+    pub fn toInterface(evt: *parser.Event) !Union {
+        return switch (try parser.eventGetInternalType(evt)) {
+            .event => .{ .Event = evt },
+            .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
+            .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
+            .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
+        };
+    }
+
+    pub fn constructor(event_type: []const u8, opts: ?EventInit) !*parser.Event {
+        const event = try parser.eventCreate();
+        try parser.eventInit(event, event_type, opts orelse EventInit{});
+        return event;
+    }
+
+    // Getters
+
+    pub fn get_type(self: *parser.Event) ![]const u8 {
+        return try parser.eventType(self);
+    }
+
+    pub fn get_target(self: *parser.Event, page: *Page) !?EventTargetUnion {
+        const et = try parser.eventTarget(self);
+        if (et == null) return null;
+        return try EventTarget.toInterface(et.?, page);
+    }
+
+    pub fn get_currentTarget(self: *parser.Event, page: *Page) !?EventTargetUnion {
+        const et = try parser.eventCurrentTarget(self);
+        if (et == null) return null;
+        return try EventTarget.toInterface(et.?, page);
+    }
+
+    pub fn get_eventPhase(self: *parser.Event) !u8 {
+        return try parser.eventPhase(self);
+    }
+
+    pub fn get_bubbles(self: *parser.Event) !bool {
+        return try parser.eventBubbles(self);
+    }
+
+    pub fn get_cancelable(self: *parser.Event) !bool {
+        return try parser.eventCancelable(self);
+    }
+
+    pub fn get_defaultPrevented(self: *parser.Event) !bool {
+        return try parser.eventDefaultPrevented(self);
+    }
+
+    pub fn get_isTrusted(self: *parser.Event) !bool {
+        return try parser.eventIsTrusted(self);
+    }
+
+    pub fn get_timestamp(self: *parser.Event) !u32 {
+        return try parser.eventTimestamp(self);
+    }
+
+    // Methods
+
+    pub fn _initEvent(
+        self: *parser.Event,
+        eventType: []const u8,
+        bubbles: ?bool,
+        cancelable: ?bool,
+    ) !void {
+        const opts = EventInit{
+            .bubbles = bubbles orelse false,
+            .cancelable = cancelable orelse false,
+        };
+        return try parser.eventInit(self, eventType, opts);
+    }
+
+    pub fn _stopPropagation(self: *parser.Event) !void {
+        return try parser.eventStopPropagation(self);
+    }
+
+    pub fn _stopImmediatePropagation(self: *parser.Event) !void {
+        return try parser.eventStopImmediatePropagation(self);
+    }
+
+    pub fn _preventDefault(self: *parser.Event) !void {
+        return try parser.eventPreventDefault(self);
+    }
+};
+
+pub const EventHandler = struct {
+    once: bool,
+    capture: bool,
+    callback: Function,
+    node: parser.EventNode,
+    listener: *parser.EventListener,
+
+    const Env = @import("../env.zig").Env;
+    const Function = Env.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: {
+                    const func = (try obj.getFunction("handleEvent")) orelse return null;
+                    break :blk try func.withThis(try obj.persist());
+                },
+            };
+        }
+    };
+
+    pub const Opts = union(enum) {
+        flags: Flags,
+        capture: bool,
+
+        const Flags = struct {
+            once: ?bool,
+            capture: ?bool,
+            // We ignore this property. It seems to be largely used to help the
+            // browser make certain performance tweaks (i.e. the browser knows
+            // that the listener won't call preventDefault() and thus can safely
+            // run the default as needed).
+            passive: ?bool,
+            signal: ?bool, // currently does nothing
+        };
+    };
+
+    pub fn register(
+        allocator: Allocator,
+        target: *parser.EventTarget,
+        typ: []const u8,
+        listener: Listener,
+        opts_: ?Opts,
+    ) !?*EventHandler {
+        var once = false;
+        var capture = false;
+        if (opts_) |opts| {
+            switch (opts) {
+                .capture => |c| capture = c,
+                .flags => |f| {
+                    // Done this way so that, for common cases that _only_ set
+                    // capture, i.e. {captrue: true}, it works.
+                    // But for any case that sets any of the other flags, we
+                    // error. If we don't error, this function call would succeed
+                    // but the behavior might be wrong. At this point, it's
+                    // better to be explicit and error.
+                    if (f.signal orelse false) return error.NotImplemented;
+                    once = f.once orelse false;
+                    capture = f.capture orelse false;
+                },
+            }
+        }
+
+        const callback = (try listener.callback(target)) orelse return null;
+
+        // check if event target has already this listener
+        if (try parser.eventTargetHasListener(target, typ, capture, callback.id) != null) {
+            return null;
+        }
+
+        const eh = try allocator.create(EventHandler);
+        eh.* = .{
+            .once = once,
+            .capture = capture,
+            .callback = callback,
+            .node = .{
+                .id = callback.id,
+                .func = handle,
+            },
+            .listener = undefined,
+        };
+
+        eh.listener = try parser.eventTargetAddEventListener(
+            target,
+            typ,
+            &eh.node,
+            capture,
+        );
+        return eh;
+    }
+
+    fn handle(node: *parser.EventNode, event: *parser.Event) void {
+        const ievent = Event.toInterface(event) catch |err| {
+            log.err(.app, "toInterface error", .{ .err = err });
+            return;
+        };
+
+        const self: *EventHandler = @fieldParentPtr("node", node);
+        var result: Function.Result = undefined;
+        self.callback.tryCall(void, .{ievent}, &result) catch {
+            log.debug(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "event handler",
+            });
+        };
+
+        if (self.once) {
+            const target = (parser.eventTarget(event) catch return).?;
+            const typ = parser.eventType(event) catch return;
+            parser.eventTargetRemoveEventListener(
+                target,
+                typ,
+                self.listener,
+                self.capture,
+            ) catch {};
+        }
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Event" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let para = document.getElementById('para')", "undefined" },
+        .{ "var nb = 0; var evt", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ content.addEventListener('target', function(e) {
+            \\  evt = e; nb = nb + 1;
+            \\  e.preventDefault();
+            \\ })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('target', {bubbles: true, cancelable: true}))", "false" },
+        .{ "nb", "1" },
+        .{ "evt.target === content", "true" },
+        .{ "evt.bubbles", "true" },
+        .{ "evt.cancelable", "true" },
+        .{ "evt.defaultPrevented", "true" },
+        .{ "evt.isTrusted", "true" },
+        .{ "evt.timestamp > 1704063600", "true" }, // 2024/01/01 00:00
+        // event.type, event.currentTarget, event.phase checked in EventTarget
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\ content.addEventListener('stop',function(e) {
+            \\    e.stopPropagation();
+            \\    nb = nb + 1;
+            \\  }, true)
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  para.addEventListener('stop',function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "para.dispatchEvent(new Event('stop'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    e.stopImmediatePropagation();
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('immediate'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at first content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('legacy', function(e) {
+            \\     evt = e; nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "let evtLegacy = document.createEvent('Event')", "undefined" },
+        .{ "evtLegacy.initEvent('legacy')", "undefined" },
+        .{ "content.dispatchEvent(evtLegacy)", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var nb = 0; var evt = null; function cbk(event) { nb ++; evt=event; }", "undefined" },
+        .{ "document.addEventListener('count', cbk)", "undefined" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "0" },
+    }, .{});
+
+    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" },
+    }, .{});
+}

src/browser/events/mouse_event.zig

@@ -0,0 +1,140 @@
+// 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 = 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
+const UIEvent = Event;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
+pub const MouseEvent = struct {
+    pub const Self = parser.MouseEvent;
+    pub const prototype = *UIEvent;
+
+    const MouseButton = enum(u16) {
+        main_button = 0,
+        auxillary_button = 1,
+        secondary_button = 2,
+        fourth_button = 3,
+        fifth_button = 4,
+    };
+
+    const MouseEventInit = struct {
+        screenX: i32 = 0,
+        screenY: i32 = 0,
+        clientX: i32 = 0,
+        clientY: i32 = 0,
+        ctrlKey: bool = false,
+        shiftKey: bool = false,
+        altKey: bool = false,
+        metaKey: bool = false,
+        button: MouseButton = .main_button,
+    };
+
+    pub fn constructor(event_type: []const u8, opts_: ?MouseEventInit) !*parser.MouseEvent {
+        const opts = opts_ orelse MouseEventInit{};
+
+        var mouse_event = try parser.mouseEventCreate();
+        try parser.eventSetInternalType(@ptrCast(&mouse_event), .mouse_event);
+
+        try parser.mouseEventInit(mouse_event, event_type, .{
+            .x = opts.clientX,
+            .y = opts.clientY,
+            .ctrl = opts.ctrlKey,
+            .shift = opts.shiftKey,
+            .alt = opts.altKey,
+            .meta = opts.metaKey,
+            .button = @intFromEnum(opts.button),
+        });
+
+        if (!std.mem.eql(u8, event_type, "click")) {
+            log.warn("MouseEvent currently only supports listeners for 'click' events!", .{});
+        }
+
+        return mouse_event;
+    }
+
+    pub fn get_button(self: *parser.MouseEvent) u16 {
+        return self.button;
+    }
+
+    // These is just an alias for clientX.
+    pub fn get_x(self: *parser.MouseEvent) i32 {
+        return self.cx;
+    }
+
+    // These is just an alias for clientY.
+    pub fn get_y(self: *parser.MouseEvent) i32 {
+        return self.cy;
+    }
+
+    pub fn get_clientX(self: *parser.MouseEvent) i32 {
+        return self.cx;
+    }
+
+    pub fn get_clientY(self: *parser.MouseEvent) i32 {
+        return self.cy;
+    }
+
+    pub fn get_screenX(self: *parser.MouseEvent) i32 {
+        return self.sx;
+    }
+
+    pub fn get_screenY(self: *parser.MouseEvent) i32 {
+        return self.sy;
+    }
+};
+
+const testing = @import("../../testing.zig");
+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" },
+    }, .{});
+}

src/browser/html/document.zig

@@ -0,0 +1,402 @@
+// 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 parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const Window = @import("window.zig").Window;
+const Element = @import("../dom/element.zig").Element;
+const ElementUnion = @import("../dom/element.zig").Union;
+const Document = @import("../dom/document.zig").Document;
+const NodeList = @import("../dom/nodelist.zig").NodeList;
+const Location = @import("location.zig").Location;
+
+const collection = @import("../dom/html_collection.zig");
+const Walker = @import("../dom/walker.zig").WalkerDepthFirst;
+const Cookie = @import("../storage/cookie.zig").Cookie;
+
+// WEB IDL https://html.spec.whatwg.org/#the-document-object
+pub const HTMLDocument = struct {
+    pub const Self = parser.DocumentHTML;
+    pub const prototype = *Document;
+    pub const subtype = .node;
+
+    // JS funcs
+    // --------
+
+    pub fn get_domain(self: *parser.DocumentHTML) ![]const u8 {
+        return try parser.documentHTMLGetDomain(self);
+    }
+
+    pub fn set_domain(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
+        return error.NotImplemented;
+    }
+
+    pub fn get_referrer(self: *parser.DocumentHTML) ![]const u8 {
+        return try parser.documentHTMLGetReferrer(self);
+    }
+
+    pub fn set_referrer(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
+        return error.NotImplemented;
+    }
+
+    pub fn get_body(self: *parser.DocumentHTML) !?*parser.Body {
+        return try parser.documentHTMLBody(self);
+    }
+
+    pub fn set_body(self: *parser.DocumentHTML, elt: ?*parser.ElementHTML) !?*parser.Body {
+        try parser.documentHTMLSetBody(self, elt);
+        return try get_body(self);
+    }
+
+    pub fn get_head(self: *parser.DocumentHTML) !?*parser.Head {
+        const root = parser.documentHTMLToNode(self);
+        const walker = Walker{};
+        var next: ?*parser.Node = null;
+        while (true) {
+            next = try walker.get_next(root, next) orelse return null;
+            if (std.ascii.eqlIgnoreCase("head", try parser.nodeName(next.?))) {
+                return @as(*parser.Head, @ptrCast(next.?));
+            }
+        }
+    }
+
+    pub fn get_cookie(_: *parser.DocumentHTML, page: *Page) ![]const u8 {
+        var buf: std.ArrayListUnmanaged(u8) = .{};
+        try page.cookie_jar.forRequest(&page.url.uri, buf.writer(page.arena), .{ .navigation = true, .is_http = false });
+        return buf.items;
+    }
+
+    pub fn set_cookie(_: *parser.DocumentHTML, cookie_str: []const u8, page: *Page) ![]const u8 {
+        // we use the cookie jar's allocator to parse the cookie because it
+        // outlives the page's arena.
+        const c = try Cookie.parse(page.cookie_jar.allocator, &page.url.uri, cookie_str);
+        errdefer c.deinit();
+        if (c.http_only) {
+            c.deinit();
+            return ""; // HttpOnly cookies cannot be set from JS
+        }
+        try page.cookie_jar.add(c, std.time.timestamp());
+        return cookie_str;
+    }
+
+    pub fn get_title(self: *parser.DocumentHTML) ![]const u8 {
+        return try parser.documentHTMLGetTitle(self);
+    }
+
+    pub fn set_title(self: *parser.DocumentHTML, v: []const u8) ![]const u8 {
+        try parser.documentHTMLSetTitle(self, v);
+        return v;
+    }
+
+    pub fn _getElementsByName(self: *parser.DocumentHTML, name: []const u8, page: *Page) !NodeList {
+        const arena = page.arena;
+        var list: NodeList = .{};
+
+        if (name.len == 0) return list;
+
+        const root = parser.documentHTMLToNode(self);
+        var c = try collection.HTMLCollectionByName(arena, root, name, false);
+
+        const ln = try c.get_length();
+        var i: u32 = 0;
+        while (i < ln) {
+            const n = try c.item(i) orelse break;
+            try list.append(arena, n);
+            i += 1;
+        }
+
+        return list;
+    }
+
+    pub fn get_images(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "img", false);
+    }
+
+    pub fn get_embeds(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "embed", false);
+    }
+
+    pub fn get_plugins(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return get_embeds(self, page);
+    }
+
+    pub fn get_forms(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "form", false);
+    }
+
+    pub fn get_scripts(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "script", false);
+    }
+
+    pub fn get_applets(_: *parser.DocumentHTML) !collection.HTMLCollection {
+        return try collection.HTMLCollectionEmpty();
+    }
+
+    pub fn get_links(self: *parser.DocumentHTML) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByLinks(parser.documentHTMLToNode(self), false);
+    }
+
+    pub fn get_anchors(self: *parser.DocumentHTML) !collection.HTMLCollection {
+        return try collection.HTMLCollectionByAnchors(parser.documentHTMLToNode(self), false);
+    }
+
+    pub fn get_all(self: *parser.DocumentHTML) collection.HTMLAllCollection {
+        return collection.HTMLAllCollection.init(parser.documentHTMLToNode(self));
+    }
+
+    pub fn get_currentScript(self: *parser.DocumentHTML) !?*parser.Script {
+        return try parser.documentHTMLGetCurrentScript(self);
+    }
+
+    pub fn get_location(self: *parser.DocumentHTML) !?*Location {
+        return try parser.documentHTMLGetLocation(Location, self);
+    }
+
+    pub fn set_location(_: *const parser.DocumentHTML, url: []const u8, page: *Page) !void {
+        return page.navigateFromWebAPI(url, .{ .reason = .script });
+    }
+
+    pub fn get_designMode(_: *parser.DocumentHTML) []const u8 {
+        return "off";
+    }
+
+    pub fn set_designMode(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "off";
+    }
+
+    pub fn get_defaultView(_: *parser.DocumentHTML, page: *Page) *Window {
+        return &page.window;
+    }
+
+    pub fn get_readyState(self: *parser.DocumentHTML, page: *Page) ![]const u8 {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        return @tagName(state.ready_state);
+    }
+
+    // noop legacy functions
+    // https://html.spec.whatwg.org/#Document-partial
+    pub fn _clear(_: *parser.DocumentHTML) void {}
+    pub fn _captureEvents(_: *parser.DocumentHTML) void {}
+    pub fn _releaseEvents(_: *parser.DocumentHTML) void {}
+
+    pub fn get_fgColor(_: *parser.DocumentHTML) []const u8 {
+        return "";
+    }
+    pub fn set_fgColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "";
+    }
+    pub fn get_linkColor(_: *parser.DocumentHTML) []const u8 {
+        return "";
+    }
+    pub fn set_linkColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "";
+    }
+    pub fn get_vlinkColor(_: *parser.DocumentHTML) []const u8 {
+        return "";
+    }
+    pub fn set_vlinkColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "";
+    }
+    pub fn get_alinkColor(_: *parser.DocumentHTML) []const u8 {
+        return "";
+    }
+    pub fn set_alinkColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "";
+    }
+    pub fn get_bgColor(_: *parser.DocumentHTML) []const u8 {
+        return "";
+    }
+    pub fn set_bgColor(_: *parser.DocumentHTML, _: []const u8) []const u8 {
+        return "";
+    }
+
+    // Returns the topmost Element at the specified coordinates (relative to the viewport).
+    // Since LightPanda requires the client to know what they are clicking on we do not return the underlying element at this moment
+    // This can currenty only happen if the first pixel is clicked without having rendered any element. This will change when css properties are supported.
+    // This returns an ElementUnion instead of a *Parser.Element in case the element somehow hasn't passed through the js runtime yet.
+    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) !?ElementUnion {
+        const ix: i32 = @intFromFloat(@floor(x));
+        const iy: i32 = @intFromFloat(@floor(y));
+        const element = page.renderer.getElementAtPosition(ix, iy) orelse return null;
+        // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
+        return try Element.toInterface(element);
+    }
+
+    // Returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.
+    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) ![]ElementUnion {
+        const ix: i32 = @intFromFloat(@floor(x));
+        const iy: i32 = @intFromFloat(@floor(y));
+        const element = page.renderer.getElementAtPosition(ix, iy) orelse return &.{};
+        // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
+
+        var list: std.ArrayListUnmanaged(ElementUnion) = .empty;
+        try list.ensureTotalCapacity(page.call_arena, 3);
+        list.appendAssumeCapacity(try Element.toInterface(element));
+
+        // Since we are using a flat renderer there is no hierarchy of elements. What we do know is that the element is part of the main document.
+        // Thus we can add the HtmlHtmlElement and it's child HTMLBodyElement to the returned list.
+        // TBD Should we instead return every parent that is an element? Note that a child does not physically need to be overlapping the parent.
+        // Should we do a render pass on demand?
+        const doc_elem = try parser.documentGetDocumentElement(parser.documentHTMLToDocument(page.window.document)) orelse {
+            return list.items;
+        };
+        if (try parser.documentHTMLBody(page.window.document)) |body| {
+            list.appendAssumeCapacity(try Element.toInterface(parser.bodyToElement(body)));
+        }
+        list.appendAssumeCapacity(try Element.toInterface(doc_elem));
+        return list.items;
+    }
+
+    pub fn documentIsLoaded(self: *parser.DocumentHTML, page: *Page) !void {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        state.ready_state = .interactive;
+
+        const evt = try parser.eventCreate();
+        defer parser.eventDestroy(evt);
+
+        log.debug(.script_event, "dispatch event", .{
+            .type = "DOMContentLoaded",
+            .source = "document",
+        });
+        try parser.eventInit(evt, "DOMContentLoaded", .{ .bubbles = true, .cancelable = true });
+        _ = try parser.eventTargetDispatchEvent(parser.toEventTarget(parser.DocumentHTML, self), evt);
+    }
+
+    pub fn documentIsComplete(self: *parser.DocumentHTML, page: *Page) !void {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        state.ready_state = .complete;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+
+test "Browser.HTML.Document" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "document.__proto__.constructor.name", "HTMLDocument" },
+        .{ "document.__proto__.__proto__.constructor.name", "Document" },
+        .{ "document.body.localName == 'body'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.domain", "" },
+        .{ "document.referrer", "" },
+        .{ "document.title", "" },
+        .{ "document.body.localName", "body" },
+        .{ "document.head.localName", "head" },
+        .{ "document.images.length", "0" },
+        .{ "document.embeds.length", "0" },
+        .{ "document.plugins.length", "0" },
+        .{ "document.scripts.length", "0" },
+        .{ "document.forms.length", "0" },
+        .{ "document.links.length", "1" },
+        .{ "document.applets.length", "0" },
+        .{ "document.anchors.length", "0" },
+        .{ "document.all.length", "8" },
+        .{ "document.currentScript", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.title = 'foo'", "foo" },
+        .{ "document.title", "foo" },
+        .{ "document.title = ''", "" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('link').setAttribute('name', 'foo')", "undefined" },
+        .{ "let list = document.getElementsByName('foo')", "undefined" },
+        .{ "list.length", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.cookie", "" },
+        .{ "document.cookie = 'name=Oeschger; SameSite=None; Secure'", "name=Oeschger; SameSite=None; Secure" },
+        .{ "document.cookie = 'favorite_food=tripe; SameSite=None; Secure'", "favorite_food=tripe; SameSite=None; Secure" },
+        .{ "document.cookie", "name=Oeschger; favorite_food=tripe" },
+        .{ "document.cookie = 'IgnoreMy=Ghost; HttpOnly'", null }, // "" should be returned, but the framework overrules it atm
+        .{ "document.cookie", "name=Oeschger; favorite_food=tripe" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.elementFromPoint(0.5, 0.5)", "null" }, //  Return null since we only return element s when they have previously been localized
+        .{ "document.elementsFromPoint(0.5, 0.5)", "" },
+        .{
+            \\ let div1 = document.createElement('div');
+            \\ document.body.appendChild(div1);
+            \\ div1.getClientRects();
+            ,
+            null,
+        },
+        .{ "document.elementFromPoint(0.5, 0.5)", "[object HTMLDivElement]" },
+        .{ "let elems = document.elementsFromPoint(0.5, 0.5)", null },
+        .{ "elems.length", "3" },
+        .{ "elems[0]", "[object HTMLDivElement]" },
+        .{ "elems[1]", "[object HTMLBodyElement]" },
+        .{ "elems[2]", "[object HTMLHtmlElement]" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ let a = document.createElement('a');
+            \\ a.href = "https://lightpanda.io";
+            \\ document.body.appendChild(a);
+            \\ a.getClientRects();
+            , // Note this will be placed after the div of previous test
+            null,
+        },
+        .{ "let a_again = document.elementFromPoint(1.5, 0.5)", null },
+        .{ "a_again", "[object HTMLAnchorElement]" },
+        .{ "a_again.href", "https://lightpanda.io" },
+        .{ "let a_agains = document.elementsFromPoint(1.5, 0.5)", null },
+        .{ "a_agains[0].href", "https://lightpanda.io" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "!document.all", "true" },
+        .{ "!!document.all", "false" },
+        .{ "document.all(5)", "[object HTMLParagraphElement]" },
+        .{ "document.all('content')", "[object HTMLDivElement]" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.defaultView.document == document", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.readyState", "loading" },
+    }, .{});
+
+    try HTMLDocument.documentIsLoaded(runner.page.window.document, runner.page);
+    try runner.testCases(&.{
+        .{ "document.readyState", "interactive" },
+    }, .{});
+
+    try HTMLDocument.documentIsComplete(runner.page.window.document, runner.page);
+    try runner.testCases(&.{
+        .{ "document.readyState", "complete" },
+    }, .{});
+}

src/browser/html/form.zig

@@ -15,28 +15,24 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
 const std = @import("std");
+const Allocator = std.mem.Allocator;
 
-const parser = @import("netsurf");
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+const HTMLElement = @import("elements.zig").HTMLElement;
+const FormData = @import("../xhr/form_data.zig").FormData;
 
-const Node = @import("node.zig").Node;
+pub const HTMLFormElement = struct {
+    pub const Self = parser.Form;
+    pub const prototype = *HTMLElement;
+    pub const subtype = .node;
 
-// WEB IDL https://dom.spec.whatwg.org/#documenttype
-pub const DocumentType = struct {
-    pub const Self = parser.DocumentType;
-    pub const prototype = *Node;
-    pub const mem_guarantied = true;
-
-    pub fn get_name(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetName(self);
+    pub fn _submit(self: *parser.Form, page: *Page) !void {
+        return page.submitForm(self, null);
     }
 
-    pub fn get_publicId(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetPublicId(self);
-    }
-
-    pub fn get_systemId(self: *parser.DocumentType) ![]const u8 {
-        return try parser.documentTypeGetSystemId(self);
+    pub fn _reset(self: *parser.Form) !void {
+        try parser.formElementReset(self);
     }
 };

src/browser/html/history.zig

@@ -0,0 +1,120 @@
+// 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");
+
+// https://html.spec.whatwg.org/multipage/nav-history-apis.html#the-history-interface
+pub const History = struct {
+    const ScrollRestorationMode = enum {
+        auto,
+        manual,
+    };
+
+    scrollRestoration: ScrollRestorationMode = .auto,
+    state: std.json.Value = .null,
+
+    // count tracks the history length until we implement correctly pushstate.
+    count: u32 = 0,
+
+    pub fn get_length(self: *History) u32 {
+        // TODO return the real history length value.
+        return self.count;
+    }
+
+    pub fn get_scrollRestoration(self: *History) []const u8 {
+        return switch (self.scrollRestoration) {
+            .auto => "auto",
+            .manual => "manual",
+        };
+    }
+
+    pub fn set_scrollRestoration(self: *History, mode: []const u8) void {
+        if (std.mem.eql(u8, "manual", mode)) self.scrollRestoration = .manual;
+        if (std.mem.eql(u8, "auto", mode)) self.scrollRestoration = .auto;
+    }
+
+    pub fn get_state(self: *History) std.json.Value {
+        return self.state;
+    }
+
+    // TODO implement the function
+    // data must handle any argument. We could expect a std.json.Value but
+    // https://github.com/lightpanda-io/zig-js-runtime/issues/267 is missing.
+    pub fn _pushState(self: *History, data: []const u8, _: ?[]const u8, url: ?[]const u8) void {
+        self.count += 1;
+        _ = url;
+        _ = data;
+    }
+
+    // TODO implement the function
+    // data must handle any argument. We could expect a std.json.Value but
+    // https://github.com/lightpanda-io/zig-js-runtime/issues/267 is missing.
+    pub fn _replaceState(self: *History, data: []const u8, _: ?[]const u8, url: ?[]const u8) void {
+        _ = self;
+        _ = url;
+        _ = data;
+    }
+
+    // TODO implement the function
+    pub fn _go(self: *History, delta: ?i32) void {
+        _ = self;
+        _ = delta;
+    }
+
+    // TODO implement the function
+    pub fn _back(self: *History) void {
+        _ = self;
+    }
+
+    // TODO implement the function
+    pub fn _forward(self: *History) void {
+        _ = self;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.History" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "history.scrollRestoration", "auto" },
+        .{ "history.scrollRestoration = 'manual'", "manual" },
+        .{ "history.scrollRestoration = 'foo'", "foo" },
+        .{ "history.scrollRestoration", "manual" },
+        .{ "history.scrollRestoration = 'auto'", "auto" },
+        .{ "history.scrollRestoration", "auto" },
+
+        .{ "history.state", "null" },
+
+        .{ "history.pushState({}, null, '')", "undefined" },
+
+        .{ "history.replaceState({}, null, '')", "undefined" },
+
+        .{ "history.go()", "undefined" },
+        .{ "history.go(1)", "undefined" },
+        .{ "history.go(-1)", "undefined" },
+
+        .{ "history.forward()", "undefined" },
+
+        .{ "history.back()", "undefined" },
+    }, .{});
+}

src/browser/html/html.zig

@@ -16,16 +16,25 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const generate = @import("../generate.zig");
-
 const HTMLDocument = @import("document.zig").HTMLDocument;
 const HTMLElem = @import("elements.zig");
+const SVGElem = @import("svg_elements.zig");
 const Window = @import("window.zig").Window;
+const Navigator = @import("navigator.zig").Navigator;
+const History = @import("history.zig").History;
+const Location = @import("location.zig").Location;
+const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
 
-pub const Interfaces = generate.Tuple(.{
+pub const Interfaces = .{
     HTMLDocument,
     HTMLElem.HTMLElement,
     HTMLElem.HTMLMediaElement,
     HTMLElem.Interfaces,
+    SVGElem.SVGElement,
     Window,
-});
+    Navigator,
+    History,
+    Location,
+    MediaQueryList,
+    @import("screen.zig").Interfaces,
+};

src/browser/html/location.zig

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

src/browser/html/media_query_list.zig

@@ -0,0 +1,45 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const parser = @import("../netsurf.zig");
+const Function = @import("../env.zig").Function;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+// https://drafts.csswg.org/cssom-view/#the-mediaquerylist-interface
+pub const MediaQueryList = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    // This is not safe as it relies on a structure layout that isn't guaranteed
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    matches: bool,
+    media: []const u8,
+
+    pub fn get_matches(self: *const MediaQueryList) bool {
+        return self.matches;
+    }
+
+    pub fn get_media(self: *const MediaQueryList) []const u8 {
+        return self.media;
+    }
+
+    pub fn _addListener(_: *const MediaQueryList, _: Function) void {}
+
+    pub fn _removeListener(_: *const MediaQueryList, _: Function) void {}
+};

src/browser/html/navigator.zig

@@ -0,0 +1,96 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const builtin = @import("builtin");
+
+// https://html.spec.whatwg.org/multipage/system-state.html#navigator
+pub const Navigator = struct {
+    agent: []const u8 = "Lightpanda/1.0",
+    version: []const u8 = "1.0",
+    vendor: []const u8 = "",
+    platform: []const u8 = std.fmt.comptimePrint("{any} {any}", .{ builtin.os.tag, builtin.cpu.arch }),
+
+    language: []const u8 = "en-US",
+
+    pub fn get_userAgent(self: *Navigator) []const u8 {
+        return self.agent;
+    }
+    pub fn get_appCodeName(_: *Navigator) []const u8 {
+        return "Mozilla";
+    }
+    pub fn get_appName(_: *Navigator) []const u8 {
+        return "Netscape";
+    }
+    pub fn get_appVersion(self: *Navigator) []const u8 {
+        return self.version;
+    }
+    pub fn get_platform(self: *Navigator) []const u8 {
+        return self.platform;
+    }
+    pub fn get_product(_: *Navigator) []const u8 {
+        return "Gecko";
+    }
+    pub fn get_productSub(_: *Navigator) []const u8 {
+        return "20030107";
+    }
+    pub fn get_vendor(self: *Navigator) []const u8 {
+        return self.vendor;
+    }
+    pub fn get_vendorSub(_: *Navigator) []const u8 {
+        return "";
+    }
+    pub fn get_language(self: *Navigator) []const u8 {
+        return self.language;
+    }
+    // TODO wait for arrays.
+    //pub fn get_languages(self: *Navigator) [][]const u8 {
+    //    return .{self.language};
+    //}
+    pub fn get_online(_: *Navigator) bool {
+        return true;
+    }
+    pub fn _registerProtocolHandler(_: *Navigator, scheme: []const u8, url: []const u8) void {
+        _ = scheme;
+        _ = url;
+    }
+    pub fn _unregisterProtocolHandler(_: *Navigator, scheme: []const u8, url: []const u8) void {
+        _ = scheme;
+        _ = url;
+    }
+
+    pub fn get_cookieEnabled(_: *Navigator) bool {
+        return true;
+    }
+};
+
+// Tests
+// -----
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Navigator" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "navigator.userAgent", "Lightpanda/1.0" },
+        .{ "navigator.appVersion", "1.0" },
+        .{ "navigator.language", "en-US" },
+    }, .{});
+}

src/browser/html/screen.zig

@@ -0,0 +1,109 @@
+// 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 EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+pub const Interfaces = .{
+    Screen,
+    ScreenOrientation,
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Screen
+pub const Screen = struct {
+    pub const prototype = *EventTarget;
+
+    height: u32 = 1080,
+    width: u32 = 1920,
+    // https://developer.mozilla.org/en-US/docs/Web/API/Screen/colorDepth
+    color_depth: u32 = 8,
+    // https://developer.mozilla.org/en-US/docs/Web/API/Screen/pixelDepth
+    pixel_depth: u32 = 8,
+    orientation: ScreenOrientation = .{ .type = .landscape_primary },
+
+    pub fn get_availHeight(self: *const Screen) u32 {
+        return self.height;
+    }
+
+    pub fn get_availWidth(self: *const Screen) u32 {
+        return self.width;
+    }
+
+    pub fn get_height(self: *const Screen) u32 {
+        return self.height;
+    }
+
+    pub fn get_width(self: *const Screen) u32 {
+        return self.width;
+    }
+
+    pub fn get_pixelDepth(self: *const Screen) u32 {
+        return self.pixel_depth;
+    }
+
+    pub fn get_orientation(self: *const Screen) ScreenOrientation {
+        return self.orientation;
+    }
+};
+
+const ScreenOrientationType = enum {
+    portrait_primary,
+    portrait_secondary,
+    landscape_primary,
+    landscape_secondary,
+
+    pub fn toString(self: ScreenOrientationType) []const u8 {
+        return switch (self) {
+            .portrait_primary => "portrait-primary",
+            .portrait_secondary => "portrait-secondary",
+            .landscape_primary => "landscape-primary",
+            .landscape_secondary => "landscape-secondary",
+        };
+    }
+};
+
+pub const ScreenOrientation = struct {
+    pub const prototype = *EventTarget;
+
+    angle: u32 = 0,
+    type: ScreenOrientationType,
+
+    pub fn get_angle(self: *const ScreenOrientation) u32 {
+        return self.angle;
+    }
+
+    pub fn get_type(self: *const ScreenOrientation) []const u8 {
+        return self.type.toString();
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Screen" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let screen = window.screen", "undefined" },
+        .{ "screen.width === 1920", "true" },
+        .{ "screen.height === 1080", "true" },
+        .{ "let orientation = screen.orientation", "undefined" },
+        .{ "orientation.angle === 0", "true" },
+        .{ "orientation.type === \"landscape-primary\"", "true" },
+    }, .{});
+}

src/browser/html/select.zig

@@ -0,0 +1,144 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+const HTMLElement = @import("elements.zig").HTMLElement;
+const Page = @import("../page.zig").Page;
+
+pub const HTMLSelectElement = struct {
+    pub const Self = parser.Select;
+    pub const prototype = *HTMLElement;
+    pub const subtype = .node;
+
+    pub fn get_length(select: *parser.Select) !u32 {
+        return parser.selectGetLength(select);
+    }
+
+    pub fn get_form(select: *parser.Select) !?*parser.Form {
+        return parser.selectGetForm(select);
+    }
+
+    pub fn get_name(select: *parser.Select) ![]const u8 {
+        return parser.selectGetName(select);
+    }
+    pub fn set_name(select: *parser.Select, name: []const u8) !void {
+        return parser.selectSetName(select, name);
+    }
+
+    pub fn get_disabled(select: *parser.Select) !bool {
+        return parser.selectGetDisabled(select);
+    }
+    pub fn set_disabled(select: *parser.Select, disabled: bool) !void {
+        return parser.selectSetDisabled(select, disabled);
+    }
+
+    pub fn get_multiple(select: *parser.Select) !bool {
+        return parser.selectGetMultiple(select);
+    }
+    pub fn set_multiple(select: *parser.Select, multiple: bool) !void {
+        return parser.selectSetMultiple(select, multiple);
+    }
+
+    pub fn get_selectedIndex(select: *parser.Select, page: *Page) !i32 {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(select)));
+        const selected_index = try parser.selectGetSelectedIndex(select);
+
+        // See the explicit_index_set field documentation
+        if (!state.explicit_index_set) {
+            if (selected_index == -1) {
+                if (try parser.selectGetMultiple(select) == false) {
+                    if (try get_length(select) > 0) {
+                        return 0;
+                    }
+                }
+            }
+        }
+        return selected_index;
+    }
+
+    // Libdom's dom_html_select_select_set_selected_index will crash if index
+    // is out of range, and it doesn't properly unset options
+    pub fn set_selectedIndex(select: *parser.Select, index: i32, page: *Page) !void {
+        var state = try page.getOrCreateNodeState(@alignCast(@ptrCast(select)));
+        state.explicit_index_set = true;
+
+        const options = try parser.selectGetOptions(select);
+        const len = try parser.optionCollectionGetLength(options);
+        for (0..len) |i| {
+            const option = try parser.optionCollectionItem(options, @intCast(i));
+            try parser.optionSetSelected(option, false);
+        }
+        if (index >= 0 and index < try get_length(select)) {
+            const option = try parser.optionCollectionItem(options, @intCast(index));
+            try parser.optionSetSelected(option, true);
+        }
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Select" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
+        \\ <form id=f1>
+        \\  <select id=s1 name=s1><option>o1<option>o2</select>
+        \\ </form>
+        \\ <select id=s2></select>
+    });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const s = document.getElementById('s1');", null },
+        .{ "s.form", "[object HTMLFormElement]" },
+
+        .{ "document.getElementById('s2').form", "null" },
+
+        .{ "s.disabled", "false" },
+        .{ "s.disabled = true", null },
+        .{ "s.disabled", "true" },
+        .{ "s.disabled = false", null },
+        .{ "s.disabled", "false" },
+
+        .{ "s.multiple", "false" },
+        .{ "s.multiple = true", null },
+        .{ "s.multiple", "true" },
+        .{ "s.multiple = false", null },
+        .{ "s.multiple", "false" },
+
+        .{ "s.name;", "s1" },
+        .{ "s.name = 'sel1';", null },
+        .{ "s.name", "sel1" },
+
+        .{ "s.length;", "2" },
+
+        .{ "s.selectedIndex", "0" },
+        .{ "s.selectedIndex = 2", null }, // out of range
+        .{ "s.selectedIndex", "-1" },
+
+        .{ "s.selectedIndex = -1", null },
+        .{ "s.selectedIndex", "-1" },
+
+        .{ "s.selectedIndex = 0", null },
+        .{ "s.selectedIndex", "0" },
+
+        .{ "s.selectedIndex = 1", null },
+        .{ "s.selectedIndex", "1" },
+
+        .{ "s.selectedIndex = -323", null },
+        .{ "s.selectedIndex", "-1" },
+    }, .{});
+}

src/browser/html/svg_elements.zig

@@ -0,0 +1,41 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const Element = @import("../dom/element.zig").Element;
+
+// Support for SVGElements is very limited, this is a dummy implementation.
+// This is here no to be able to support `element instanceof SVGElement;` in JavaScript.
+// https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
+pub const SVGElement = struct {
+    // Currently the prototype chain is not implemented (will not be returned by toInterface())
+    // For that we need parser.SvgElement and the derived types with tags in the v-table.
+    pub const prototype = *Element;
+    // While this is a Node, could consider not exposing the subtype untill we have
+    // a Self type to cast to.
+    pub const subtype = .node;
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.SVGElement" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "'AString' instanceof SVGElement", "false" },
+    }, .{});
+}

src/browser/html/window.zig

@@ -0,0 +1,411 @@
+// 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 parser = @import("../netsurf.zig");
+const Function = @import("../env.zig").Function;
+const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
+
+const Navigator = @import("navigator.zig").Navigator;
+const History = @import("history.zig").History;
+const Location = @import("location.zig").Location;
+const Crypto = @import("../crypto/crypto.zig").Crypto;
+const Console = @import("../console/console.zig").Console;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
+const Performance = @import("../dom/performance.zig").Performance;
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
+const CustomElementRegistry = @import("../webcomponents/custom_element_registry.zig").CustomElementRegistry;
+const Screen = @import("screen.zig").Screen;
+
+const storage = @import("../storage/storage.zig");
+
+// https://dom.spec.whatwg.org/#interface-window-extensions
+// https://html.spec.whatwg.org/multipage/nav-history-apis.html#window
+pub const Window = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+
+    document: *parser.DocumentHTML,
+    target: []const u8 = "",
+    history: History = .{},
+    location: Location = .{},
+    storage_shelf: ?*storage.Shelf = null,
+
+    // counter for having unique timer ids
+    timer_id: u30 = 0,
+    timers: std.AutoHashMapUnmanaged(u32, *TimerCallback) = .{},
+
+    crypto: Crypto = .{},
+    console: Console = .{},
+    navigator: Navigator = .{},
+    performance: Performance,
+    custom_elements: CustomElementRegistry = .{},
+    screen: Screen = .{},
+
+    pub fn create(target: ?[]const u8, navigator: ?Navigator) !Window {
+        var fbs = std.io.fixedBufferStream("");
+        const html_doc = try parser.documentHTMLParse(fbs.reader(), "utf-8");
+        const doc = parser.documentHTMLToDocument(html_doc);
+        try parser.documentSetDocumentURI(doc, "about:blank");
+
+        return .{
+            .document = html_doc,
+            .target = target orelse "",
+            .navigator = navigator orelse .{},
+            .performance = .{ .time_origin = try std.time.Timer.start() },
+        };
+    }
+
+    pub fn replaceLocation(self: *Window, loc: Location) !void {
+        self.location = loc;
+        try parser.documentHTMLSetLocation(Location, self.document, &self.location);
+    }
+
+    pub fn replaceDocument(self: *Window, doc: *parser.DocumentHTML) !void {
+        self.performance.time_origin.reset(); // When to reset see: https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin
+        self.document = doc;
+        try parser.documentHTMLSetLocation(Location, doc, &self.location);
+    }
+
+    pub fn setStorageShelf(self: *Window, shelf: *storage.Shelf) void {
+        self.storage_shelf = shelf;
+    }
+
+    pub fn get_window(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_navigator(self: *Window) *Navigator {
+        return &self.navigator;
+    }
+
+    pub fn get_location(self: *Window) *Location {
+        return &self.location;
+    }
+
+    pub fn set_location(_: *const Window, url: []const u8, page: *Page) !void {
+        return page.navigateFromWebAPI(url, .{ .reason = .script });
+    }
+
+    pub fn get_console(self: *Window) *Console {
+        return &self.console;
+    }
+
+    pub fn get_crypto(self: *Window) *Crypto {
+        return &self.crypto;
+    }
+
+    pub fn get_self(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_parent(self: *Window) *Window {
+        return self;
+    }
+
+    // TODO: frames
+    pub fn get_top(self: *Window) *Window {
+        return self;
+    }
+
+    pub fn get_document(self: *Window) ?*parser.DocumentHTML {
+        return self.document;
+    }
+
+    pub fn get_history(self: *Window) *History {
+        return &self.history;
+    }
+
+    //  The interior height of the window in pixels, including the height of the horizontal scroll bar, if present.
+    pub fn get_innerHeight(_: *Window, page: *Page) u32 {
+        // We do not have scrollbars or padding so this is the same as Element.clientHeight
+        return page.renderer.height();
+    }
+
+    // The interior width of the window in pixels. That includes the width of the vertical scroll bar, if one is present.
+    pub fn get_innerWidth(_: *Window, page: *Page) u32 {
+        // We do not have scrollbars or padding so this is the same as Element.clientWidth
+        return page.renderer.width();
+    }
+
+    pub fn get_name(self: *Window) []const u8 {
+        return self.target;
+    }
+
+    pub fn get_localStorage(self: *Window) !*storage.Bottle {
+        if (self.storage_shelf == null) return parser.DOMError.NotSupported;
+        return &self.storage_shelf.?.bucket.local;
+    }
+
+    pub fn get_sessionStorage(self: *Window) !*storage.Bottle {
+        if (self.storage_shelf == null) return parser.DOMError.NotSupported;
+        return &self.storage_shelf.?.bucket.session;
+    }
+
+    pub fn get_performance(self: *Window) *Performance {
+        return &self.performance;
+    }
+
+    pub fn get_customElements(self: *Window) *CustomElementRegistry {
+        return &self.custom_elements;
+    }
+
+    pub fn get_screen(self: *Window) *Screen {
+        return &self.screen;
+    }
+
+    pub fn _requestAnimationFrame(self: *Window, cbk: Function, page: *Page) !u32 {
+        return self.createTimeout(cbk, 5, page, .{ .animation_frame = true });
+    }
+
+    pub fn _cancelAnimationFrame(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
+    }
+
+    // TODO handle callback arguments.
+    pub fn _setTimeout(self: *Window, cbk: Function, delay: ?u32, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{});
+    }
+
+    // TODO handle callback arguments.
+    pub fn _setInterval(self: *Window, cbk: Function, delay: ?u32, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{ .repeat = true });
+    }
+
+    pub fn _clearTimeout(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
+    }
+
+    pub fn _clearInterval(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
+    }
+
+    pub fn _matchMedia(_: *const Window, media: []const u8, page: *Page) !MediaQueryList {
+        return .{
+            .matches = false, // TODO?
+            .media = try page.arena.dupe(u8, media),
+        };
+    }
+
+    const CreateTimeoutOpts = struct {
+        repeat: bool = false,
+        animation_frame: bool = false,
+    };
+    fn createTimeout(self: *Window, cbk: Function, delay_: ?u32, page: *Page, comptime opts: CreateTimeoutOpts) !u32 {
+        const delay = delay_ orelse 0;
+        if (delay > 5000) {
+            log.warn(.user_script, "long timeout ignored", .{ .delay = delay, .interval = opts.repeat });
+            // self.timer_id is u30, so the largest value we can generate is
+            // 1_073_741_824. Returning 2_000_000_000 makes sure that clients
+            // can call cancelTimer/cancelInterval without breaking anything.
+            return 2_000_000_000;
+        }
+
+        if (self.timers.count() > 512) {
+            return error.TooManyTimeout;
+        }
+        const timer_id = self.timer_id +% 1;
+        self.timer_id = timer_id;
+
+        const arena = page.arena;
+
+        const gop = try self.timers.getOrPut(arena, timer_id);
+        if (gop.found_existing) {
+            // this can only happen if we've created 2^31 timeouts.
+            return error.TooManyTimeout;
+        }
+        errdefer _ = self.timers.remove(timer_id);
+
+        const delay_ms: u63 = @as(u63, delay) * std.time.ns_per_ms;
+        const callback = try arena.create(TimerCallback);
+
+        callback.* = .{
+            .cbk = cbk,
+            .loop_id = 0, // we're going to set this to a real value shortly
+            .window = self,
+            .timer_id = timer_id,
+            .node = .{ .func = TimerCallback.run },
+            .repeat = if (opts.repeat) delay_ms else null,
+            .animation_frame = opts.animation_frame,
+        };
+        callback.loop_id = try page.loop.timeout(delay_ms, &callback.node);
+
+        gop.value_ptr.* = callback;
+        return timer_id;
+    }
+
+    // TODO: getComputedStyle should return a read-only CSSStyleDeclaration.
+    // We currently don't have a read-only one, so we return a new instance on
+    // each call.
+    pub fn _getComputedStyle(_: *const Window, element: *parser.Element, pseudo_element: ?[]const u8) !CSSStyleDeclaration {
+        _ = element;
+        _ = pseudo_element;
+        return .empty;
+    }
+
+    const ScrollToOpts = union(enum) {
+        x: i32,
+        opts: Opts,
+
+        const Opts = struct {
+            top: i32,
+            left: i32,
+            behavior: []const u8,
+        };
+    };
+    pub fn _scrollTo(_: *const Window, opts: ScrollToOpts, y: ?u32) void {
+        _ = opts;
+        _ = y;
+    }
+};
+
+const TimerCallback = struct {
+    // the internal loop id, need it when cancelling
+    loop_id: usize,
+
+    // the id of our timer (windows.timers key)
+    timer_id: u31,
+
+    // The JavaScript callback to execute
+    cbk: Function,
+
+    // This is the internal data that the event loop tracks. We'll get this
+    // back in run and, from it, can get our TimerCallback instance
+    node: Loop.CallbackNode = undefined,
+
+    // if the event should be repeated
+    repeat: ?u63 = null,
+
+    animation_frame: bool = false,
+
+    window: *Window,
+
+    fn run(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+        const self: *TimerCallback = @fieldParentPtr("node", node);
+
+        var result: Function.Result = undefined;
+
+        var call: anyerror!void = undefined;
+        if (self.animation_frame) {
+            call = self.cbk.tryCall(void, .{self.window.performance._now()}, &result);
+        } else {
+            call = self.cbk.tryCall(void, .{}, &result);
+        }
+
+        call catch {
+            log.debug(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "window timeout",
+            });
+        };
+
+        if (self.repeat) |r| {
+            // setInterval
+            repeat_delay.* = r;
+            return;
+        }
+
+        // setTimeout
+        _ = self.window.timers.remove(self.timer_id);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.Window" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "window.parent === window", "true" },
+        .{ "window.top === window", "true" },
+    }, .{});
+
+    // requestAnimationFrame should be able to wait by recursively calling itself
+    // Note however that we in this test do not wait as the request is just send to the browser
+    try runner.testCases(&.{
+        .{
+            \\ let start = 0;
+            \\ function step(timestamp) {
+            \\    start = timestamp;
+            \\ }
+            ,
+            null,
+        },
+        .{ "requestAnimationFrame(step);", null }, // returned id is checked in the next test
+        .{ " start > 0", "true" },
+    }, .{});
+
+    // cancelAnimationFrame should be able to cancel a request with the given id
+    try runner.testCases(&.{
+        .{ "let request_id = requestAnimationFrame(timestamp => {});", null },
+        .{ "cancelAnimationFrame(request_id);", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "1" }, // Width is 1 even if there are no elements
+        .{
+            \\ let div1 = document.createElement('div');
+            \\ document.body.appendChild(div1);
+            \\ div1.getClientRects();
+            ,
+            null,
+        },
+        .{
+            \\ let div2 = document.createElement('div');
+            \\ document.body.appendChild(div2);
+            \\ div2.getClientRects();
+            ,
+            null,
+        },
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "2" },
+    }, .{});
+
+    // cancelAnimationFrame should be able to cancel a request with the given id
+    try runner.testCases(&.{
+        .{ "let longCall = false;", null },
+        .{ "window.setTimeout(() => {longCall = true}, 5001);", null },
+        .{ "longCall;", "false" },
+    }, .{});
+
+    // window event target
+    try runner.testCases(&.{
+        .{
+            \\ let called = false;
+            \\ window.addEventListener("ready", (e) => {
+            \\   called = (e.currentTarget == window);
+            \\ }, {capture: false, once: false});
+            \\ const evt = new Event("ready", { bubbles: true, cancelable: false });
+            \\ window.dispatchEvent(evt);
+            \\ called;
+            ,
+            "true",
+        },
+    }, .{});
+}

src/browser/iterator/iterator.zig

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

src/browser/key_value.zig

@@ -0,0 +1,284 @@
+// 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;
+
+// Used by FormDAta and URLSearchParams.
+//
+// We store the values in an ArrayList rather than a an
+// StringArrayHashMap([]const u8) because of the way the iterators (i.e., keys(),
+// values() and entries()) work. The FormData can contain duplicate keys, and
+// each iteration yields 1 key=>value pair. So, given:
+//
+//  let f = new FormData();
+//  f.append('a', '1');
+//  f.append('a', '2');
+//
+// Then we'd expect f.keys(), f.values() and f.entries() to yield 2 results:
+//  ['a', '1']
+//  ['a', '2']
+//
+// This is much easier to do with an ArrayList than a HashMap, especially given
+// that the FormData could be mutated while iterating.
+// The downside is that most of the normal operations are O(N).
+pub const List = struct {
+    entries: std.ArrayListUnmanaged(KeyValue) = .{},
+
+    pub fn init(entries: std.ArrayListUnmanaged(KeyValue)) List {
+        return .{ .entries = entries };
+    }
+
+    pub fn clone(self: *const List, arena: Allocator) !List {
+        const entries = self.entries.items;
+
+        var c: std.ArrayListUnmanaged(KeyValue) = .{};
+        try c.ensureTotalCapacity(arena, entries.len);
+        for (entries) |kv| {
+            c.appendAssumeCapacity(kv);
+        }
+
+        return .{ .entries = c };
+    }
+
+    pub fn fromOwnedSlice(entries: []KeyValue) List {
+        return .{
+            .entries = std.ArrayListUnmanaged(KeyValue).fromOwnedSlice(entries),
+        };
+    }
+
+    pub fn count(self: *const List) usize {
+        return self.entries.items.len;
+    }
+
+    pub fn get(self: *const List, key: []const u8) ?[]const u8 {
+        const result = self.find(key) orelse return null;
+        return result.entry.value;
+    }
+
+    pub fn getAll(self: *const List, arena: Allocator, key: []const u8) ![]const []const u8 {
+        var arr: std.ArrayListUnmanaged([]const u8) = .empty;
+        for (self.entries.items) |entry| {
+            if (std.mem.eql(u8, key, entry.key)) {
+                try arr.append(arena, entry.value);
+            }
+        }
+        return arr.items;
+    }
+
+    pub fn has(self: *const List, key: []const u8) bool {
+        return self.find(key) != null;
+    }
+
+    pub fn set(self: *List, arena: Allocator, key: []const u8, value: []const u8) !void {
+        self.delete(key);
+        return self.append(arena, key, value);
+    }
+
+    pub fn append(self: *List, arena: Allocator, key: []const u8, value: []const u8) !void {
+        return self.appendOwned(arena, try arena.dupe(u8, key), try arena.dupe(u8, value));
+    }
+
+    pub fn appendOwned(self: *List, arena: Allocator, key: []const u8, value: []const u8) !void {
+        return self.entries.append(arena, .{
+            .key = key,
+            .value = value,
+        });
+    }
+
+    pub fn appendOwnedAssumeCapacity(self: *List, key: []const u8, value: []const u8) void {
+        self.entries.appendAssumeCapacity(.{
+            .key = key,
+            .value = value,
+        });
+    }
+
+    pub fn delete(self: *List, key: []const u8) void {
+        var i: usize = 0;
+        while (i < self.entries.items.len) {
+            const entry = self.entries.items[i];
+            if (std.mem.eql(u8, key, entry.key)) {
+                _ = self.entries.swapRemove(i);
+            } else {
+                i += 1;
+            }
+        }
+    }
+
+    pub fn deleteKeyValue(self: *List, key: []const u8, value: []const u8) void {
+        var i: usize = 0;
+        while (i < self.entries.items.len) {
+            const entry = self.entries.items[i];
+            if (std.mem.eql(u8, key, entry.key) and std.mem.eql(u8, value, entry.value)) {
+                _ = self.entries.swapRemove(i);
+            } else {
+                i += 1;
+            }
+        }
+    }
+
+    pub fn keyIterator(self: *const List) KeyIterator {
+        return .{ .entries = &self.entries };
+    }
+
+    pub fn valueIterator(self: *const List) ValueIterator {
+        return .{ .entries = &self.entries };
+    }
+
+    pub fn entryIterator(self: *const List) EntryIterator {
+        return .{ .entries = &self.entries };
+    }
+
+    pub fn ensureTotalCapacity(self: *List, arena: Allocator, len: usize) !void {
+        return self.entries.ensureTotalCapacity(arena, len);
+    }
+
+    const FindResult = struct {
+        index: usize,
+        entry: KeyValue,
+    };
+
+    fn find(self: *const List, key: []const u8) ?FindResult {
+        for (self.entries.items, 0..) |entry, i| {
+            if (std.mem.eql(u8, key, entry.key)) {
+                return .{ .index = i, .entry = entry };
+            }
+        }
+        return null;
+    }
+};
+
+pub const KeyValue = struct {
+    key: []const u8,
+    value: []const u8,
+};
+
+pub const KeyIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(KeyValue),
+
+    pub fn _next(self: *KeyIterator) ?[]const u8 {
+        const entries = self.entries.items;
+
+        const index = self.index;
+        if (index == entries.len) {
+            return null;
+        }
+        self.index += 1;
+        return entries[index].key;
+    }
+};
+
+pub const ValueIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(KeyValue),
+
+    pub fn _next(self: *ValueIterator) ?[]const u8 {
+        const entries = self.entries.items;
+
+        const index = self.index;
+        if (index == entries.len) {
+            return null;
+        }
+        self.index += 1;
+        return entries[index].value;
+    }
+};
+
+pub const EntryIterator = struct {
+    index: usize = 0,
+    entries: *const std.ArrayListUnmanaged(KeyValue),
+
+    pub fn _next(self: *EntryIterator) ?struct { []const u8, []const u8 } {
+        const entries = self.entries.items;
+
+        const index = self.index;
+        if (index == entries.len) {
+            return null;
+        }
+        self.index += 1;
+        const entry = entries[index];
+        return .{ entry.key, entry.value };
+    }
+};
+
+const URLEncodeMode = enum {
+    form,
+    query,
+};
+
+pub fn urlEncode(list: List, mode: URLEncodeMode, writer: anytype) !void {
+    const entries = list.entries.items;
+    if (entries.len == 0) {
+        return;
+    }
+
+    try urlEncodeEntry(entries[0], mode, writer);
+    for (entries[1..]) |entry| {
+        try writer.writeByte('&');
+        try urlEncodeEntry(entry, mode, writer);
+    }
+}
+
+fn urlEncodeEntry(entry: KeyValue, mode: URLEncodeMode, writer: anytype) !void {
+    try urlEncodeValue(entry.key, mode, writer);
+
+    // for a form, for an empty value, we'll do "spice="
+    // but for a query, we do "spice"
+    if (mode == .query and entry.value.len == 0) {
+        return;
+    }
+
+    try writer.writeByte('=');
+    try urlEncodeValue(entry.value, mode, writer);
+}
+
+fn urlEncodeValue(value: []const u8, mode: URLEncodeMode, writer: anytype) !void {
+    if (!urlEncodeShouldEscape(value, mode)) {
+        return writer.writeAll(value);
+    }
+
+    for (value) |b| {
+        if (urlEncodeUnreserved(b, mode)) {
+            try writer.writeByte(b);
+        } else if (b == ' ' and mode == .form) {
+            // for form submission, space should be encoded as '+', not '%20'
+            try writer.writeByte('+');
+        } else {
+            try writer.print("%{X:0>2}", .{b});
+        }
+    }
+}
+
+fn urlEncodeShouldEscape(value: []const u8, mode: URLEncodeMode) bool {
+    for (value) |b| {
+        if (!urlEncodeUnreserved(b, mode)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+fn urlEncodeUnreserved(b: u8, mode: URLEncodeMode) bool {
+    return switch (b) {
+        'A'...'Z', 'a'...'z', '0'...'9', '-', '.', '_' => true,
+        '~' => mode == .query,
+        else => false,
+    };
+}

src/browser/loader.zig

@@ -1,90 +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 user_agent = "Lightpanda.io/1.0";
-
-pub const Loader = struct {
-    client: std.http.Client,
-    // use 16KB for headers buffer size.
-    server_header_buffer: [1024 * 16]u8 = undefined,
-
-    pub const Response = struct {
-        alloc: std.mem.Allocator,
-        req: *std.http.Client.Request,
-
-        pub fn deinit(self: *Response) void {
-            self.req.deinit();
-            self.alloc.destroy(self.req);
-        }
-    };
-
-    pub fn init(alloc: std.mem.Allocator) Loader {
-        return Loader{
-            .client = std.http.Client{
-                .allocator = alloc,
-            },
-        };
-    }
-
-    pub fn deinit(self: *Loader) void {
-        self.client.deinit();
-    }
-
-    // see
-    // https://ziglang.org/documentation/master/std/#A;std:http.Client.fetch
-    // for reference.
-    // The caller is responsible for calling `deinit()` on the `Response`.
-    pub fn get(self: *Loader, alloc: std.mem.Allocator, uri: std.Uri) !Response {
-        var resp = Response{
-            .alloc = alloc,
-            .req = try alloc.create(std.http.Client.Request),
-        };
-        errdefer alloc.destroy(resp.req);
-
-        resp.req.* = try self.client.open(.GET, uri, .{
-            .headers = .{
-                .user_agent = .{ .override = user_agent },
-            },
-            .extra_headers = &.{
-                .{ .name = "Accept", .value = "*/*" },
-                .{ .name = "Accept-Language", .value = "en-US,en;q=0.5" },
-            },
-            .server_header_buffer = &self.server_header_buffer,
-        });
-        errdefer resp.req.deinit();
-
-        try resp.req.send();
-        try resp.req.finish();
-        try resp.req.wait();
-
-        return resp;
-    }
-};
-
-test "basic url get" {
-    const alloc = std.testing.allocator;
-    var loader = Loader.init(alloc);
-    defer loader.deinit();
-
-    var result = try loader.get(alloc, "https://en.wikipedia.org/wiki/Main_Page");
-    defer result.deinit();
-
-    try std.testing.expect(result.req.response.status == std.http.Status.ok);
-}

src/browser/markdown.zig

@@ -0,0 +1,337 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("netsurf.zig");
+const Walker = @import("dom/walker.zig").WalkerChildren;
+
+const URL = @import("../url.zig").URL;
+
+const NP = "\n\n";
+
+const Elem = struct {
+    inlin: bool = false,
+    list_order: ?u8 = null,
+    parent: ?*Elem = null,
+};
+
+const State = struct {
+    block: bool,
+    last_char: u8,
+    elem: ?*Elem = null,
+
+    fn is_inline(state: *State) bool {
+        if (state.elem == null) return false;
+        return state.elem.?.inlin;
+    }
+
+    fn last_char_space(state: *State) bool {
+        if (state.last_char == ' ' or state.last_char == '\n') return true;
+        return false;
+    }
+};
+
+// writer must be a std.io.Writer
+pub fn writeMarkdown(url: URL, doc: *parser.Document, writer: anytype) !void {
+    var state = State{ .block = true, .last_char = '\n' };
+    _ = try writeChildren(url, parser.documentToNode(doc), &state, writer);
+    try writer.writeAll("\n");
+}
+
+fn writeChildren(url: URL, root: *parser.Node, state: *State, writer: anytype) !void {
+    const walker = Walker{};
+    var next: ?*parser.Node = null;
+    while (true) {
+        next = try walker.get_next(root, next) orelse break;
+        try writeNode(url, next.?, state, writer);
+    }
+}
+
+fn ensureBlock(state: *State, writer: anytype) !void {
+    if (state.is_inline()) return;
+    if (!state.block) {
+        try writer.writeAll(NP);
+        state.last_char = '\n';
+        state.block = true;
+    }
+}
+
+fn writeInline(state: *State, text: []const u8, writer: anytype) !void {
+    try writer.writeAll(text);
+    state.last_char = text[text.len - 1];
+    if (state.block) state.block = false;
+}
+
+const order = [_][]const u8{
+    "1",  "2",  "3",  "4",  "5",  "6",  "7",  "8",  "9",  "10",
+    "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
+    "21", "22", "23", "24", "25", "26", "27", "28", "29", "30",
+    "31", "32", "33", "34", "35", "36", "37", "38", "39", "40",
+    "41", "42", "43", "44", "45", "46", "47", "48", "49", "50",
+};
+
+fn writeNode(url: URL, node: *parser.Node, state: *State, writer: anytype) anyerror!void {
+    switch (try parser.nodeType(node)) {
+        .element => {
+            const html_element: *parser.ElementHTML = @ptrCast(node);
+            const tag = try parser.elementHTMLGetTagType(html_element);
+
+            // debug
+            // try writer.writeAll("\nstart - ");
+            // try writer.writeAll(@tagName(tag));
+            // try writer.writeAll("\n");
+
+            switch (tag) {
+
+                // skip element, go to children
+                .html, .head, .meta, .link, .body, .span => {
+                    try writeChildren(url, node, state, writer);
+                },
+
+                // skip element and children
+                .title, .i, .script, .noscript, .undef, .style => {},
+
+                // generic elements
+                .h1, .h2, .h3, .h4, .h5, .h6 => {
+                    try ensureBlock(state, writer);
+                    if (!state.is_inline()) {
+                        switch (tag) {
+                            .h1 => try writeInline(state, "# ", writer),
+                            .h2 => try writeInline(state, "## ", writer),
+                            .h3 => try writeInline(state, "### ", writer),
+                            .h4 => try writeInline(state, "#### ", writer),
+                            .h5 => try writeInline(state, "##### ", writer),
+                            .h6 => try writeInline(state, "###### ", writer),
+                            else => @panic("only headers tags are supported here"),
+                        }
+                    }
+                    try writeChildren(url, node, state, writer);
+                    try ensureBlock(state, writer);
+                },
+
+                // containers and dividers
+                .header, .footer, .nav, .section, .div, .article, .p, .button, .form => {
+                    try ensureBlock(state, writer);
+                    try writeChildren(url, node, state, writer);
+                    try ensureBlock(state, writer);
+                },
+                .br => {
+                    try ensureBlock(state, writer);
+                    try writeChildren(url, node, state, writer);
+                },
+                .hr => {
+                    try ensureBlock(state, writer);
+                    try writeInline(state, "---", writer);
+                    try ensureBlock(state, writer);
+                },
+
+                // styling
+                .b => {
+                    var elem = Elem{ .parent = state.elem, .inlin = true };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    try writeInline(state, "**", writer);
+                    try writeChildren(url, node, state, writer);
+                    try writeInline(state, "**", writer);
+                },
+
+                // specific elements
+                .a => {
+                    if (!state.last_char_space()) try writeInline(state, " ", writer);
+                    var elem = Elem{ .parent = state.elem, .inlin = true };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    const element = parser.nodeToElement(node);
+                    if (try getAttributeValue(element, "href")) |href| {
+                        try writeInline(state, "[", writer);
+                        try writeChildren(url, node, state, writer);
+                        try writeInline(state, "](", writer);
+                        // handle relative path
+                        if (href[0] == '/') {
+                            try writeInline(state, url.scheme(), writer);
+                            try writeInline(state, "://", writer);
+                            try writeInline(state, url.host(), writer);
+                        }
+                        try writeInline(state, href, writer);
+                        try writeInline(state, ")", writer);
+                    } else {
+                        try writeChildren(url, node, state, writer);
+                    }
+                },
+                .img => {
+                    var elem = Elem{ .parent = state.elem, .inlin = true };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    const element = parser.nodeToElement(node);
+                    if (try getAttributeValue(element, "src")) |src| {
+                        try writeInline(state, "![", writer);
+                        if (try getAttributeValue(element, "alt")) |alt| {
+                            try writeInline(state, alt, writer);
+                        } else {
+                            try writeInline(state, src, writer);
+                        }
+                        try writeInline(state, "](", writer);
+                        // handle relative path
+                        if (src[0] == '/') {
+                            try writeInline(state, url.scheme(), writer);
+                            try writeInline(state, "://", writer);
+                            try writeInline(state, url.host(), writer);
+                        }
+                        try writeInline(state, src, writer);
+                        try writeInline(state, ")", writer);
+                    }
+                },
+                .ul => {
+                    var elem = Elem{ .parent = state.elem, .list_order = 0 };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    try ensureBlock(state, writer);
+                    try writeChildren(url, node, state, writer);
+                    try ensureBlock(state, writer);
+                },
+                .ol => {
+                    var elem = Elem{ .parent = state.elem, .list_order = 1 };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    try ensureBlock(state, writer);
+                    try writeChildren(url, node, state, writer);
+                    try ensureBlock(state, writer);
+                },
+                .li => blk: {
+                    const parent = state.elem orelse break :blk;
+                    const list_order = parent.list_order orelse break :blk;
+                    if (!state.block) try writer.writeAll("\n");
+                    if (list_order > 0) {
+                        // ordered list
+                        try writeInline(state, order[list_order - 1], writer);
+                        try writeInline(state, ". ", writer);
+                        parent.list_order = list_order + 1;
+                    } else {
+                        // unordered list
+                        try writeInline(state, "- ", writer);
+                    }
+                    try writeChildren(url, node, state, writer);
+                },
+                .input => {
+                    var elem = Elem{ .parent = state.elem, .inlin = true };
+                    state.elem = &elem;
+                    defer state.elem = elem.parent;
+                    const element = parser.nodeToElement(node);
+                    if (try getAttributeValue(element, "value")) |value| {
+                        try writeInline(state, value, writer);
+                        try writeInline(state, " ", writer);
+                    }
+                },
+
+                else => {
+                    try ensureBlock(state, writer);
+                    try writer.writeAll(@tagName(tag));
+                    try writer.writeAll(" not supported");
+                    try ensureBlock(state, writer);
+                },
+            }
+            // try writer.writeAll("\nend - ");
+            // try writer.writeAll(@tagName(tag));
+            // try writer.writeAll("\n");
+        },
+        .text => {
+            const v = try parser.nodeValue(node) orelse return;
+            const printed = try writeText(state, v, writer);
+            if (printed) state.block = false;
+        },
+        .cdata_section => {},
+        .comment => {},
+        // TODO handle processing instruction dump
+        .processing_instruction => {},
+        // document fragment is outside of the main document DOM, so we
+        // don't output it.
+        .document_fragment => {},
+        // document will never be called, but required for completeness.
+        .document => {},
+        // done globally instead, but required for completeness. Only the outer DOCTYPE should be written
+        .document_type => {},
+        // deprecated
+        .attribute, .entity_reference, .entity, .notation => {},
+    }
+}
+
+// TODO: not sure about + - . ! as they are very common characters
+// I fear that we add too much escape strings
+// TODO: | (pipe)
+const escape = [_]u8{ '\\', '`', '*', '_', '{', '}', '[', ']', '<', '>', '(', ')', '#' };
+
+fn writeText(state: *State, value: []const u8, writer: anytype) !bool {
+    if (value.len == 0) return false;
+
+    var last_char: u8 = ' ';
+    var printed: u64 = 0;
+    for (value, 0..) |v, i| {
+        // do not print:
+        // - multiple spaces
+        // - return line
+        // - tabs
+        if (v == last_char and v == ' ') continue;
+        if (v == '\n') continue;
+        if (v == '\t') continue;
+
+        // escape char
+        for (escape) |esc| {
+            if (v == esc) try writer.writeAll("\\");
+        }
+
+        if (printed == 0 and !state.is_inline()) {
+            if (state.last_char != '\n' and state.last_char != ' ') {
+                try writer.writeAll(" ");
+            }
+        }
+
+        last_char = v;
+        printed += 1;
+        const x = [_]u8{v}; // TODO: do we have something better?
+        try writer.writeAll(&x);
+        if (i == value.len - 1) state.last_char = v;
+    }
+    if (printed > 0) return true;
+    return false;
+}
+
+fn getAttributeValue(elem: *parser.Element, attr: []const u8) !?[]const u8 {
+    if (try parser.elementGetAttribute(elem, attr)) |value| {
+        if (value.len > 0) return value;
+    }
+    return null;
+}
+
+fn writeEscapedTextNode(writer: anytype, value: []const u8) !void {
+    var v = value;
+    while (v.len > 0) {
+        try writer.writeAll("TEXT: ");
+        const index = std.mem.indexOfAnyPos(u8, v, 0, &.{ '&', '<', '>' }) orelse {
+            return writer.writeAll(v);
+        };
+        try writer.writeAll(v[0..index]);
+        switch (v[index]) {
+            '&' => try writer.writeAll("&amp;"),
+            '<' => try writer.writeAll("&lt;"),
+            '>' => try writer.writeAll("&gt;"),
+            else => unreachable,
+        }
+        v = v[index + 1 ..];
+    }
+}

src/browser/mimalloc.zig

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

src/browser/mime.zig

@@ -17,141 +17,491 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const testing = std.testing;
+const Allocator = std.mem.Allocator;
 
-const strparser = @import("../str/parser.zig");
-const Reader = strparser.Reader;
-const trim = strparser.trim;
+pub const Mime = struct {
+    content_type: ContentType,
+    params: []const u8 = "",
+    charset: ?[]const u8 = null,
 
-const Self = @This();
-
-const MimeError = error{
-    Empty,
-    TooBig,
-    Invalid,
-    InvalidChar,
-};
-
-mtype: []const u8,
-msubtype: []const u8,
-params: []const u8 = "",
-
-charset: ?[]const u8 = null,
-boundary: ?[]const u8 = null,
-
-pub const Empty = Self{ .mtype = "", .msubtype = "" };
-pub const HTML = Self{ .mtype = "text", .msubtype = "html" };
-pub const Javascript = Self{ .mtype = "application", .msubtype = "javascript" };
-
-// https://mimesniff.spec.whatwg.org/#http-token-code-point
-fn isHTTPCodePoint(c: u8) bool {
-    return switch (c) {
-        '!', '#', '$', '%', '&', '\'', '*', '+', '-', '.', '^' => return true,
-        '_', '`', '|', '~' => return true,
-        else => std.ascii.isAlphanumeric(c),
+    pub const unknown = Mime{
+        .params = "",
+        .charset = "",
+        .content_type = .{ .unknown = {} },
     };
-}
 
-fn valid(s: []const u8) bool {
-    const ln = s.len;
-    var i: usize = 0;
-    while (i < ln) {
-        if (!isHTTPCodePoint(s[i])) return false;
-        i += 1;
+    pub const ContentTypeEnum = enum {
+        text_xml,
+        text_html,
+        text_javascript,
+        text_plain,
+        unknown,
+        other,
+    };
+
+    pub const ContentType = union(ContentTypeEnum) {
+        text_xml: void,
+        text_html: void,
+        text_javascript: void,
+        text_plain: void,
+        unknown: void,
+        other: struct { type: []const u8, sub_type: []const u8 },
+    };
+
+    pub fn parse(arena: Allocator, input: []u8) !Mime {
+        if (input.len > 255) {
+            return error.TooBig;
+        }
+
+        // Zig's trim API is broken. The return type is always `[]const u8`,
+        // even if the input type is `[]u8`. @constCast is safe here.
+        var normalized = @constCast(std.mem.trim(u8, input, &std.ascii.whitespace));
+        _ = std.ascii.lowerString(normalized, normalized);
+
+        const content_type, const type_len = try parseContentType(normalized);
+        if (type_len >= normalized.len) {
+            return .{ .content_type = content_type };
+        }
+
+        const params = trimLeft(normalized[type_len..]);
+
+        var charset: ?[]const u8 = null;
+
+        var it = std.mem.splitScalar(u8, params, ';');
+        while (it.next()) |attr| {
+            const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse return error.Invalid;
+            const name = trimLeft(attr[0..i]);
+
+            const value = trimRight(attr[i + 1 ..]);
+            if (value.len == 0) {
+                return error.Invalid;
+            }
+
+            const attribute_name = std.meta.stringToEnum(enum {
+                charset,
+            }, name) orelse continue;
+
+            switch (attribute_name) {
+                .charset => charset = try parseAttributeValue(arena, value),
+            }
+        }
+
+        return .{
+            .params = params,
+            .charset = charset,
+            .content_type = content_type,
+        };
+    }
+
+    pub fn sniff(body: []const u8) ?Mime {
+        // 0x0C is form feed
+        const content = std.mem.trimLeft(u8, body, &.{ ' ', '\t', '\n', '\r', 0x0C });
+        if (content.len == 0) {
+            return null;
+        }
+
+        if (content[0] != '<') {
+            if (std.mem.startsWith(u8, content, &.{ 0xEF, 0xBB, 0xBF })) {
+                // UTF-8 BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            if (std.mem.startsWith(u8, content, &.{ 0xFE, 0xFF })) {
+                // UTF-16 big-endian BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            if (std.mem.startsWith(u8, content, &.{ 0xFF, 0xFE })) {
+                // UTF-16 little-endian BOM
+                return .{ .content_type = .{ .text_plain = {} } };
+            }
+            return null;
+        }
+
+        // The longest prefix we have is "<!DOCTYPE HTML ", 15 bytes. If we're
+        // here, we already know content[0] == '<', so we can skip that. So 14
+        // bytes.
+
+        // +1 because we don't need the leading '<'
+        var buf: [14]u8 = undefined;
+
+        const stripped = content[1..];
+        const prefix_len = @min(stripped.len, buf.len);
+        const prefix = std.ascii.lowerString(&buf, stripped[0..prefix_len]);
+
+        // we already know it starts with a <
+        const known_prefixes = [_]struct { []const u8, ContentType }{
+            .{ "!doctype html", .{ .text_html = {} } },
+            .{ "html", .{ .text_html = {} } },
+            .{ "script", .{ .text_html = {} } },
+            .{ "iframe", .{ .text_html = {} } },
+            .{ "h1", .{ .text_html = {} } },
+            .{ "div", .{ .text_html = {} } },
+            .{ "font", .{ .text_html = {} } },
+            .{ "table", .{ .text_html = {} } },
+            .{ "a", .{ .text_html = {} } },
+            .{ "style", .{ .text_html = {} } },
+            .{ "title", .{ .text_html = {} } },
+            .{ "b", .{ .text_html = {} } },
+            .{ "body", .{ .text_html = {} } },
+            .{ "br", .{ .text_html = {} } },
+            .{ "p", .{ .text_html = {} } },
+            .{ "!--", .{ .text_html = {} } },
+            .{ "xml", .{ .text_xml = {} } },
+        };
+        inline for (known_prefixes) |kp| {
+            const known_prefix = kp.@"0";
+            if (std.mem.startsWith(u8, prefix, known_prefix) and prefix.len > known_prefix.len) {
+                const next = prefix[known_prefix.len];
+                // a "tag-terminating-byte"
+                if (next == ' ' or next == '>') {
+                    return .{ .content_type = kp.@"1" };
+                }
+            }
+        }
+
+        return null;
+    }
+
+    pub fn isHTML(self: *const Mime) bool {
+        return self.content_type == .text_html;
+    }
+
+    // we expect value to be lowercase
+    fn parseContentType(value: []const u8) !struct { ContentType, usize } {
+        const end = std.mem.indexOfScalarPos(u8, value, 0, ';') orelse value.len;
+        const type_name = trimRight(value[0..end]);
+        const attribute_start = end + 1;
+
+        if (std.meta.stringToEnum(enum {
+            @"text/xml",
+            @"text/html",
+
+            @"text/javascript",
+            @"application/javascript",
+            @"application/x-javascript",
+
+            @"text/plain",
+        }, type_name)) |known_type| {
+            const ct: ContentType = switch (known_type) {
+                .@"text/xml" => .{ .text_xml = {} },
+                .@"text/html" => .{ .text_html = {} },
+                .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
+                .@"text/plain" => .{ .text_plain = {} },
+            };
+            return .{ ct, attribute_start };
+        }
+
+        const separator = std.mem.indexOfScalarPos(u8, type_name, 0, '/') orelse return error.Invalid;
+
+        const main_type = value[0..separator];
+        const sub_type = trimRight(value[separator + 1 .. end]);
+
+        if (main_type.len == 0 or validType(main_type) == false) {
+            return error.Invalid;
+        }
+        if (sub_type.len == 0 or validType(sub_type) == false) {
+            return error.Invalid;
+        }
+
+        return .{ .{ .other = .{
+            .type = main_type,
+            .sub_type = sub_type,
+        } }, attribute_start };
+    }
+
+    const T_SPECIAL = blk: {
+        var v = [_]bool{false} ** 256;
+        for ("()<>@,;:\\\"/[]?=") |b| {
+            v[b] = true;
+        }
+        break :blk v;
+    };
+
+    fn parseAttributeValue(arena: Allocator, value: []const u8) ![]const u8 {
+        if (value[0] != '"') {
+            return value;
+        }
+
+        // 1 to skip the opening quote
+        var value_pos: usize = 1;
+        var unescaped_len: usize = 0;
+        const last = value.len - 1;
+
+        while (value_pos < value.len) {
+            switch (value[value_pos]) {
+                '"' => break,
+                '\\' => {
+                    if (value_pos == last) {
+                        return error.Invalid;
+                    }
+                    const next = value[value_pos + 1];
+                    if (T_SPECIAL[next] == false) {
+                        return error.Invalid;
+                    }
+                    value_pos += 2;
+                },
+                else => value_pos += 1,
+            }
+            unescaped_len += 1;
+        }
+
+        if (unescaped_len == 0) {
+            return error.Invalid;
+        }
+
+        value_pos = 1;
+        const owned = try arena.alloc(u8, unescaped_len);
+        for (0..unescaped_len) |i| {
+            switch (value[value_pos]) {
+                '"' => break,
+                '\\' => {
+                    owned[i] = value[value_pos + 1];
+                    value_pos += 2;
+                },
+                else => |c| {
+                    owned[i] = c;
+                    value_pos += 1;
+                },
+            }
+        }
+        return owned;
+    }
+
+    const VALID_CODEPOINTS = blk: {
+        var v: [256]bool = undefined;
+        for (0..256) |i| {
+            v[i] = std.ascii.isAlphanumeric(i);
+        }
+        for ("!#$%&\\*+-.^'_`|~") |b| {
+            v[b] = true;
+        }
+        break :blk v;
+    };
+
+    fn validType(value: []const u8) bool {
+        for (value) |b| {
+            if (VALID_CODEPOINTS[b] == false) {
+                return false;
+            }
         }
         return true;
-}
-
-// https://mimesniff.spec.whatwg.org/#parsing-a-mime-type
-pub fn parse(s: []const u8) Self.MimeError!Self {
-    const ln = s.len;
-    if (ln == 0) return MimeError.Empty;
-    // limit input size
-    if (ln > 255) return MimeError.TooBig;
-
-    var res = Self{ .mtype = "", .msubtype = "" };
-    var r = Reader{ .s = s };
-
-    res.mtype = trim(r.until('/'));
-    if (res.mtype.len == 0) return MimeError.Invalid;
-    if (!valid(res.mtype)) return MimeError.InvalidChar;
-
-    if (!r.skip()) return MimeError.Invalid;
-    res.msubtype = trim(r.until(';'));
-    if (res.msubtype.len == 0) return MimeError.Invalid;
-    if (!valid(res.msubtype)) return MimeError.InvalidChar;
-
-    if (!r.skip()) return res;
-    res.params = trim(r.tail());
-    if (res.params.len == 0) return MimeError.Invalid;
-
-    // parse well known parameters.
-    // don't check invalid parameter format.
-    var rp = Reader{ .s = res.params };
-    while (true) {
-        const name = trim(rp.until('='));
-        if (!rp.skip()) return res;
-        const value = trim(rp.until(';'));
-
-        if (std.ascii.eqlIgnoreCase(name, "charset")) {
-            res.charset = value;
-        }
-        if (std.ascii.eqlIgnoreCase(name, "boundary")) {
-            res.boundary = value;
     }
 
-        if (!rp.skip()) return res;
+    fn trimLeft(s: []const u8) []const u8 {
+        return std.mem.trimLeft(u8, s, &std.ascii.whitespace);
     }
 
-    return res;
-}
-
-test "parse valid" {
-    for ([_][]const u8{
-        "text/html",
-        " \ttext/html",
-        "text \t/html",
-        "text/ \thtml",
-        "text/html \t",
-    }) |tc| {
-        const m = try Self.parse(tc);
-        try testing.expectEqualStrings("text", m.mtype);
-        try testing.expectEqualStrings("html", m.msubtype);
+    fn trimRight(s: []const u8) []const u8 {
+        return std.mem.trimRight(u8, s, &std.ascii.whitespace);
     }
-    const m2 = try Self.parse("text/javascript1.5");
-    try testing.expectEqualStrings("text", m2.mtype);
-    try testing.expectEqualStrings("javascript1.5", m2.msubtype);
+};
 
-    const m3 = try Self.parse("text/html; charset=utf-8");
-    try testing.expectEqualStrings("text", m3.mtype);
-    try testing.expectEqualStrings("html", m3.msubtype);
-    try testing.expectEqualStrings("charset=utf-8", m3.params);
-    try testing.expectEqualStrings("utf-8", m3.charset.?);
+const testing = @import("../testing.zig");
+test "Mime: invalid " {
+    defer testing.reset();
 
-    const m4 = try Self.parse("text/html; boundary=----");
-    try testing.expectEqualStrings("text", m4.mtype);
-    try testing.expectEqualStrings("html", m4.msubtype);
-    try testing.expectEqualStrings("boundary=----", m4.params);
-    try testing.expectEqualStrings("----", m4.boundary.?);
-}
-
-test "parse invalid" {
-    for ([_][]const u8{
+    const invalids = [_][]const u8{
         "",
-        "te xt/html;",
-        "te@xt/html;",
-        "text/ht@ml;",
-        "text/html;",
-        "/text/html",
-        "/html",
-    }) |tc| {
-        _ = Self.parse(tc) catch continue;
-        try testing.expect(false);
+        "text",
+        "text /html",
+        "text/ html",
+        "text / html",
+        "text/html other",
+        "text/html; x",
+        "text/html; x=",
+        "text/html; x=  ",
+        "text/html; = ",
+        "text/html;=",
+        "text/html; charset=\"\"",
+        "text/html; charset=\"",
+        "text/html; charset=\"\\",
+        "text/html; charset=\"\\a\"", // invalid to escape non special characters
+    };
+
+    for (invalids) |invalid| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
+        try testing.expectError(error.Invalid, Mime.parse(undefined, mutable_input));
     }
 }
 
-// Compare type and subtype.
-pub fn eql(self: Self, b: Self) bool {
-    if (!std.mem.eql(u8, self.mtype, b.mtype)) return false;
-    return std.mem.eql(u8, self.msubtype, b.msubtype);
+test "Mime: parse common" {
+    defer testing.reset();
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "text/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "text/xml;");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html;");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain;");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "  \ttext/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/html   ");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "text/plain \t\t");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, "TEXT/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "text/Html");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "TEXT/PLAIN");
+
+    try expect(.{ .content_type = .{ .text_xml = {} } }, " TeXT/xml");
+    try expect(.{ .content_type = .{ .text_html = {} } }, "teXt/HtML  ;");
+    try expect(.{ .content_type = .{ .text_plain = {} } }, "tExT/PlAiN;");
+
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "text/javascript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "Application/JavaScript");
+    try expect(.{ .content_type = .{ .text_javascript = {} } }, "application/x-javascript");
+}
+
+test "Mime: parse uncommon" {
+    defer testing.reset();
+
+    const text_csv = Expectation{
+        .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } },
+    };
+    try expect(text_csv, "text/csv");
+    try expect(text_csv, "text/csv;");
+    try expect(text_csv, "  text/csv\t  ");
+    try expect(text_csv, "  text/csv\t  ;");
+
+    try expect(
+        .{ .content_type = .{ .other = .{ .type = "text", .sub_type = "csv" } } },
+        "Text/CSV",
+    );
+}
+
+test "Mime: parse charset" {
+    defer testing.reset();
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "utf-8",
+        .params = "charset=utf-8",
+    }, "text/xml; charset=utf-8");
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "utf-8",
+        .params = "charset=\"utf-8\"",
+    }, "text/xml;charset=\"utf-8\"");
+
+    try expect(.{
+        .content_type = .{ .text_xml = {} },
+        .charset = "\\ \" ",
+        .params = "charset=\"\\\\ \\\" \"",
+    }, "text/xml;charset=\"\\\\ \\\" \"   ");
+}
+
+test "Mime: isHTML" {
+    defer testing.reset();
+
+    const isHTML = struct {
+        fn isHTML(expected: bool, input: []const u8) !void {
+            const mutable_input = try testing.arena_allocator.dupe(u8, input);
+            var mime = try Mime.parse(testing.arena_allocator, mutable_input);
+            try testing.expectEqual(expected, mime.isHTML());
+        }
+    }.isHTML;
+    try isHTML(true, "text/html");
+    try isHTML(true, "text/html;");
+    try isHTML(true, "text/html; charset=utf-8");
+    try isHTML(false, "text/htm"); // htm not html
+    try isHTML(false, "text/plain");
+    try isHTML(false, "over/9000");
+}
+
+test "Mime: sniff" {
+    try testing.expectEqual(null, Mime.sniff(""));
+    try testing.expectEqual(null, Mime.sniff("<htm"));
+    try testing.expectEqual(null, Mime.sniff("<html!"));
+    try testing.expectEqual(null, Mime.sniff("<a_"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype html"));
+    try testing.expectEqual(null, Mime.sniff("<!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n  <!doctype  html>"));
+    try testing.expectEqual(null, Mime.sniff("\n \t <font/>"));
+
+    const expectHTML = struct {
+        fn expect(input: []const u8) !void {
+            try testing.expectEqual(.text_html, std.meta.activeTag(Mime.sniff(input).?.content_type));
+        }
+    }.expect;
+
+    try expectHTML("<!doctype html ");
+    try expectHTML("\n  \t    <!DOCTYPE HTML ");
+
+    try expectHTML("<html ");
+    try expectHTML("\n  \t    <HtmL> even more stufff");
+
+    try expectHTML("<script>");
+    try expectHTML("\n  \t    <SCRIpt >alert(document.cookies)</script>");
+
+    try expectHTML("<iframe>");
+    try expectHTML(" \t    <ifRAME >");
+
+    try expectHTML("<h1>");
+    try expectHTML("  <H1>");
+
+    try expectHTML("<div>");
+    try expectHTML("\n\r\r  <DiV>");
+
+    try expectHTML("<font>");
+    try expectHTML("  <fonT>");
+
+    try expectHTML("<table>");
+    try expectHTML("\t\t<TAblE>");
+
+    try expectHTML("<a>");
+    try expectHTML("\n\n<A>");
+
+    try expectHTML("<style>");
+    try expectHTML("    \n\t <STyLE>");
+
+    try expectHTML("<title>");
+    try expectHTML("    \n\t <TITLE>");
+
+    try expectHTML("<b>");
+    try expectHTML("    \n\t <B>");
+
+    try expectHTML("<body>");
+    try expectHTML("    \n\t <BODY>");
+
+    try expectHTML("<br>");
+    try expectHTML("    \n\t <BR>");
+
+    try expectHTML("<p>");
+    try expectHTML("    \n\t <P>");
+
+    try expectHTML("<!-->");
+    try expectHTML("    \n\t <!-->");
+}
+
+const Expectation = struct {
+    content_type: Mime.ContentType,
+    params: []const u8 = "",
+    charset: ?[]const u8 = null,
+};
+
+fn expect(expected: Expectation, input: []const u8) !void {
+    const mutable_input = try testing.arena_allocator.dupe(u8, input);
+
+    const actual = try Mime.parse(testing.arena_allocator, mutable_input);
+    try testing.expectEqual(
+        std.meta.activeTag(expected.content_type),
+        std.meta.activeTag(actual.content_type),
+    );
+
+    switch (expected.content_type) {
+        .other => |e| {
+            const a = actual.content_type.other;
+            try testing.expectEqual(e.type, a.type);
+            try testing.expectEqual(e.sub_type, a.sub_type);
+        },
+        else => {}, // already asserted above
+    }
+
+    try testing.expectEqual(expected.params, actual.params);
+
+    if (expected.charset) |ec| {
+        try testing.expectEqual(ec, actual.charset.?);
+    } else {
+        try testing.expectEqual(null, actual.charset);
+    }
 }

src/browser/polyfill/fetch.js

@@ -0,0 +1,671 @@
+// fetch.js code comes from
+// https://github.com/JakeChampion/fetch/blob/main/fetch.js
+//
+// The original code source is available in MIT license.
+//
+// The script comes from the built version from npm.
+// You can get the package with the command:
+//
+// wget $(npm view whatwg-fetch dist.tarball)
+//
+// The source is the content of `package/dist/fetch.umd.js` file.
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.WHATWGFetch = {})));
+}(this, (function (exports) { 'use strict';
+
+  /* eslint-disable no-prototype-builtins */
+  var g =
+    (typeof globalThis !== 'undefined' && globalThis) ||
+    (typeof self !== 'undefined' && self) ||
+    // eslint-disable-next-line no-undef
+    (typeof global !== 'undefined' && global) ||
+    {};
+
+  var support = {
+    searchParams: 'URLSearchParams' in g,
+    iterable: 'Symbol' in g && 'iterator' in Symbol,
+    blob:
+      'FileReader' in g &&
+      'Blob' in g &&
+      (function() {
+        try {
+          new Blob();
+          return true
+        } catch (e) {
+          return false
+        }
+      })(),
+    formData: 'FormData' in g,
+
+    // Arraybuffer is available but xhr doesn't implement it for now.
+    // arrayBuffer: 'ArrayBuffer' in g
+    arrayBuffer: false
+  };
+
+  function isDataView(obj) {
+    return obj && DataView.prototype.isPrototypeOf(obj)
+  }
+
+  if (support.arrayBuffer) {
+    var viewClasses = [
+      '[object Int8Array]',
+      '[object Uint8Array]',
+      '[object Uint8ClampedArray]',
+      '[object Int16Array]',
+      '[object Uint16Array]',
+      '[object Int32Array]',
+      '[object Uint32Array]',
+      '[object Float32Array]',
+      '[object Float64Array]'
+    ];
+
+    var isArrayBufferView =
+      ArrayBuffer.isView ||
+      function(obj) {
+        return obj && viewClasses.indexOf(Object.prototype.toString.call(obj)) > -1
+      };
+  }
+
+  function normalizeName(name) {
+    if (typeof name !== 'string') {
+      name = String(name);
+    }
+    if (/[^a-z0-9\-#$%&'*+.^_`|~!]/i.test(name) || name === '') {
+      throw new TypeError('Invalid character in header field name: "' + name + '"')
+    }
+    return name.toLowerCase()
+  }
+
+  function normalizeValue(value) {
+    if (typeof value !== 'string') {
+      value = String(value);
+    }
+    return value
+  }
+
+  // Build a destructive iterator for the value list
+  function iteratorFor(items) {
+    var iterator = {
+      next: function() {
+        var value = items.shift();
+        return {done: value === undefined, value: value}
+      }
+    };
+
+    if (support.iterable) {
+      iterator[Symbol.iterator] = function() {
+        return iterator
+      };
+    }
+
+    return iterator
+  }
+
+  function Headers(headers) {
+    this.map = {};
+
+    if (headers instanceof Headers) {
+      headers.forEach(function(value, name) {
+        this.append(name, value);
+      }, this);
+    } else if (Array.isArray(headers)) {
+      headers.forEach(function(header) {
+        if (header.length != 2) {
+          throw new TypeError('Headers constructor: expected name/value pair to be length 2, found' + header.length)
+        }
+        this.append(header[0], header[1]);
+      }, this);
+    } else if (headers) {
+      Object.getOwnPropertyNames(headers).forEach(function(name) {
+        this.append(name, headers[name]);
+      }, this);
+    }
+  }
+
+  Headers.prototype.append = function(name, value) {
+    name = normalizeName(name);
+    value = normalizeValue(value);
+    var oldValue = this.map[name];
+    this.map[name] = oldValue ? oldValue + ', ' + value : value;
+  };
+
+  Headers.prototype['delete'] = function(name) {
+    delete this.map[normalizeName(name)];
+  };
+
+  Headers.prototype.get = function(name) {
+    name = normalizeName(name);
+    return this.has(name) ? this.map[name] : null
+  };
+
+  Headers.prototype.has = function(name) {
+    return this.map.hasOwnProperty(normalizeName(name))
+  };
+
+  Headers.prototype.set = function(name, value) {
+    this.map[normalizeName(name)] = normalizeValue(value);
+  };
+
+  Headers.prototype.forEach = function(callback, thisArg) {
+    for (var name in this.map) {
+      if (this.map.hasOwnProperty(name)) {
+        callback.call(thisArg, this.map[name], name, this);
+      }
+    }
+  };
+
+  Headers.prototype.keys = function() {
+    var items = [];
+    this.forEach(function(value, name) {
+      items.push(name);
+    });
+    return iteratorFor(items)
+  };
+
+  Headers.prototype.values = function() {
+    var items = [];
+    this.forEach(function(value) {
+      items.push(value);
+    });
+    return iteratorFor(items)
+  };
+
+  Headers.prototype.entries = function() {
+    var items = [];
+    this.forEach(function(value, name) {
+      items.push([name, value]);
+    });
+    return iteratorFor(items)
+  };
+
+  if (support.iterable) {
+    Headers.prototype[Symbol.iterator] = Headers.prototype.entries;
+  }
+
+  function consumed(body) {
+    if (body._noBody) return
+    if (body.bodyUsed) {
+      return Promise.reject(new TypeError('Already read'))
+    }
+    body.bodyUsed = true;
+  }
+
+  function fileReaderReady(reader) {
+    return new Promise(function(resolve, reject) {
+      reader.onload = function() {
+        resolve(reader.result);
+      };
+      reader.onerror = function() {
+        reject(reader.error);
+      };
+    })
+  }
+
+  function readBlobAsArrayBuffer(blob) {
+    var reader = new FileReader();
+    var promise = fileReaderReady(reader);
+    reader.readAsArrayBuffer(blob);
+    return promise
+  }
+
+  function readBlobAsText(blob) {
+    var reader = new FileReader();
+    var promise = fileReaderReady(reader);
+    var match = /charset=([A-Za-z0-9_-]+)/.exec(blob.type);
+    var encoding = match ? match[1] : 'utf-8';
+    reader.readAsText(blob, encoding);
+    return promise
+  }
+
+  function readArrayBufferAsText(buf) {
+    var view = new Uint8Array(buf);
+    var chars = new Array(view.length);
+
+    for (var i = 0; i < view.length; i++) {
+      chars[i] = String.fromCharCode(view[i]);
+    }
+    return chars.join('')
+  }
+
+  function bufferClone(buf) {
+    if (buf.slice) {
+      return buf.slice(0)
+    } else {
+      var view = new Uint8Array(buf.byteLength);
+      view.set(new Uint8Array(buf));
+      return view.buffer
+    }
+  }
+
+  function Body() {
+    this.bodyUsed = false;
+
+    this._initBody = function(body) {
+      /*
+        fetch-mock wraps the Response object in an ES6 Proxy to
+        provide useful test harness features such as flush. However, on
+        ES5 browsers without fetch or Proxy support pollyfills must be used;
+        the proxy-pollyfill is unable to proxy an attribute unless it exists
+        on the object before the Proxy is created. This change ensures
+        Response.bodyUsed exists on the instance, while maintaining the
+        semantic of setting Request.bodyUsed in the constructor before
+        _initBody is called.
+      */
+      // eslint-disable-next-line no-self-assign
+      this.bodyUsed = this.bodyUsed;
+      this._bodyInit = body;
+      if (!body) {
+        this._noBody = true;
+        this._bodyText = '';
+      } else if (typeof body === 'string') {
+        this._bodyText = body;
+      } else if (support.blob && Blob.prototype.isPrototypeOf(body)) {
+        this._bodyBlob = body;
+      } else if (support.formData && FormData.prototype.isPrototypeOf(body)) {
+        this._bodyFormData = body;
+      } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+        this._bodyText = body.toString();
+      } else if (support.arrayBuffer && support.blob && isDataView(body)) {
+        this._bodyArrayBuffer = bufferClone(body.buffer);
+        // IE 10-11 can't handle a DataView body.
+        this._bodyInit = new Blob([this._bodyArrayBuffer]);
+      } else if (support.arrayBuffer && (ArrayBuffer.prototype.isPrototypeOf(body) || isArrayBufferView(body))) {
+        this._bodyArrayBuffer = bufferClone(body);
+      } else {
+        this._bodyText = body = Object.prototype.toString.call(body);
+      }
+
+      if (!this.headers.get('content-type')) {
+        if (typeof body === 'string') {
+          this.headers.set('content-type', 'text/plain;charset=UTF-8');
+        } else if (this._bodyBlob && this._bodyBlob.type) {
+          this.headers.set('content-type', this._bodyBlob.type);
+        } else if (support.searchParams && URLSearchParams.prototype.isPrototypeOf(body)) {
+          this.headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
+        }
+      }
+    };
+
+    if (support.blob) {
+      this.blob = function() {
+        var rejected = consumed(this);
+        if (rejected) {
+          return rejected
+        }
+
+        if (this._bodyBlob) {
+          return Promise.resolve(this._bodyBlob)
+        } else if (this._bodyArrayBuffer) {
+          return Promise.resolve(new Blob([this._bodyArrayBuffer]))
+        } else if (this._bodyFormData) {
+          throw new Error('could not read FormData body as blob')
+        } else {
+          return Promise.resolve(new Blob([this._bodyText]))
+        }
+      };
+    }
+
+    this.arrayBuffer = function() {
+      if (this._bodyArrayBuffer) {
+        var isConsumed = consumed(this);
+        if (isConsumed) {
+          return isConsumed
+        } else if (ArrayBuffer.isView(this._bodyArrayBuffer)) {
+          return Promise.resolve(
+            this._bodyArrayBuffer.buffer.slice(
+              this._bodyArrayBuffer.byteOffset,
+              this._bodyArrayBuffer.byteOffset + this._bodyArrayBuffer.byteLength
+            )
+          )
+        } else {
+          return Promise.resolve(this._bodyArrayBuffer)
+        }
+      } else if (support.blob) {
+        return this.blob().then(readBlobAsArrayBuffer)
+      } else {
+        throw new Error('could not read as ArrayBuffer')
+      }
+    };
+
+    this.text = function() {
+      var rejected = consumed(this);
+      if (rejected) {
+        return rejected
+      }
+
+      if (this._bodyBlob) {
+        return readBlobAsText(this._bodyBlob)
+      } else if (this._bodyArrayBuffer) {
+        return Promise.resolve(readArrayBufferAsText(this._bodyArrayBuffer))
+      } else if (this._bodyFormData) {
+        throw new Error('could not read FormData body as text')
+      } else {
+        return Promise.resolve(this._bodyText)
+      }
+    };
+
+    if (support.formData) {
+      this.formData = function() {
+        return this.text().then(decode)
+      };
+    }
+
+    this.json = function() {
+      return this.text().then(JSON.parse)
+    };
+
+    return this
+  }
+
+  // HTTP methods whose capitalization should be normalized
+  var methods = ['CONNECT', 'DELETE', 'GET', 'HEAD', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'TRACE'];
+
+  function normalizeMethod(method) {
+    var upcased = method.toUpperCase();
+    return methods.indexOf(upcased) > -1 ? upcased : method
+  }
+
+  function Request(input, options) {
+    if (!(this instanceof Request)) {
+      throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.')
+    }
+
+    options = options || {};
+    var body = options.body;
+
+    if (input instanceof Request) {
+      if (input.bodyUsed) {
+        throw new TypeError('Already read')
+      }
+      this.url = input.url;
+      this.credentials = input.credentials;
+      if (!options.headers) {
+        this.headers = new Headers(input.headers);
+      }
+      this.method = input.method;
+      this.mode = input.mode;
+      this.signal = input.signal;
+      if (!body && input._bodyInit != null) {
+        body = input._bodyInit;
+        input.bodyUsed = true;
+      }
+    } else {
+      this.url = String(input);
+    }
+
+    this.credentials = options.credentials || this.credentials || 'same-origin';
+    if (options.headers || !this.headers) {
+      this.headers = new Headers(options.headers);
+    }
+    this.method = normalizeMethod(options.method || this.method || 'GET');
+    this.mode = options.mode || this.mode || null;
+    this.signal = options.signal || this.signal || (function () {
+      if ('AbortController' in g) {
+        var ctrl = new AbortController();
+        return ctrl.signal;
+      }
+    }());
+    this.referrer = null;
+
+    if ((this.method === 'GET' || this.method === 'HEAD') && body) {
+      throw new TypeError('Body not allowed for GET or HEAD requests')
+    }
+    this._initBody(body);
+
+    if (this.method === 'GET' || this.method === 'HEAD') {
+      if (options.cache === 'no-store' || options.cache === 'no-cache') {
+        // Search for a '_' parameter in the query string
+        var reParamSearch = /([?&])_=[^&]*/;
+        if (reParamSearch.test(this.url)) {
+          // If it already exists then set the value with the current time
+          this.url = this.url.replace(reParamSearch, '$1_=' + new Date().getTime());
+        } else {
+          // Otherwise add a new '_' parameter to the end with the current time
+          var reQueryString = /\?/;
+          this.url += (reQueryString.test(this.url) ? '&' : '?') + '_=' + new Date().getTime();
+        }
+      }
+    }
+  }
+
+  Request.prototype.clone = function() {
+    return new Request(this, {body: this._bodyInit})
+  };
+
+  function decode(body) {
+    var form = new FormData();
+    body
+      .trim()
+      .split('&')
+      .forEach(function(bytes) {
+        if (bytes) {
+          var split = bytes.split('=');
+          var name = split.shift().replace(/\+/g, ' ');
+          var value = split.join('=').replace(/\+/g, ' ');
+          form.append(decodeURIComponent(name), decodeURIComponent(value));
+        }
+      });
+    return form
+  }
+
+  function parseHeaders(rawHeaders) {
+    var headers = new Headers();
+    // Replace instances of \r\n and \n followed by at least one space or horizontal tab with a space
+    // https://tools.ietf.org/html/rfc7230#section-3.2
+    var preProcessedHeaders = rawHeaders.replace(/\r?\n[\t ]+/g, ' ');
+    // Avoiding split via regex to work around a common IE11 bug with the core-js 3.6.0 regex polyfill
+    // https://github.com/github/fetch/issues/748
+    // https://github.com/zloirock/core-js/issues/751
+    preProcessedHeaders
+      .split('\r')
+      .map(function(header) {
+        return header.indexOf('\n') === 0 ? header.substr(1, header.length) : header
+      })
+      .forEach(function(line) {
+        var parts = line.split(':');
+        var key = parts.shift().trim();
+        if (key) {
+          var value = parts.join(':').trim();
+          try {
+            headers.append(key, value);
+          } catch (error) {
+            console.warn('Response ' + error.message);
+          }
+        }
+      });
+    return headers
+  }
+
+  Body.call(Request.prototype);
+
+  function Response(bodyInit, options) {
+    if (!(this instanceof Response)) {
+      throw new TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.')
+    }
+    if (!options) {
+      options = {};
+    }
+
+    this.type = 'default';
+    this.status = options.status === undefined ? 200 : options.status;
+    if (this.status < 200 || this.status > 599) {
+      throw new RangeError("Failed to construct 'Response': The status provided (0) is outside the range [200, 599].")
+    }
+    this.ok = this.status >= 200 && this.status < 300;
+    this.statusText = options.statusText === undefined ? '' : '' + options.statusText;
+    this.headers = new Headers(options.headers);
+    this.url = options.url || '';
+    this._initBody(bodyInit);
+  }
+
+  Body.call(Response.prototype);
+
+  Response.prototype.clone = function() {
+    return new Response(this._bodyInit, {
+      status: this.status,
+      statusText: this.statusText,
+      headers: new Headers(this.headers),
+      url: this.url
+    })
+  };
+
+  Response.error = function() {
+    var response = new Response(null, {status: 200, statusText: ''});
+    response.ok = false;
+    response.status = 0;
+    response.type = 'error';
+    return response
+  };
+
+  var redirectStatuses = [301, 302, 303, 307, 308];
+
+  Response.redirect = function(url, status) {
+    if (redirectStatuses.indexOf(status) === -1) {
+      throw new RangeError('Invalid status code')
+    }
+
+    return new Response(null, {status: status, headers: {location: url}})
+  };
+
+  exports.DOMException = g.DOMException;
+  try {
+    new exports.DOMException();
+  } catch (err) {
+    exports.DOMException = function(message, name) {
+      this.message = message;
+      this.name = name;
+      var error = Error(message);
+      this.stack = error.stack;
+    };
+    exports.DOMException.prototype = Object.create(Error.prototype);
+    exports.DOMException.prototype.constructor = exports.DOMException;
+  }
+
+  function fetch(input, init) {
+    return new Promise(function(resolve, reject) {
+      var request = new Request(input, init);
+
+      if (request.signal && request.signal.aborted) {
+        return reject(new exports.DOMException('Aborted', 'AbortError'))
+      }
+
+      var xhr = new XMLHttpRequest();
+
+      function abortXhr() {
+        xhr.abort();
+      }
+
+      xhr.onload = function() {
+        var options = {
+          statusText: xhr.statusText,
+          headers: parseHeaders(xhr.getAllResponseHeaders() || '')
+        };
+        // This check if specifically for when a user fetches a file locally from the file system
+        // Only if the status is out of a normal range
+        if (request.url.indexOf('file://') === 0 && (xhr.status < 200 || xhr.status > 599)) {
+          options.status = 200;
+        } else {
+          options.status = xhr.status;
+        }
+        options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL');
+        var body = 'response' in xhr ? xhr.response : xhr.responseText;
+        setTimeout(function() {
+          resolve(new Response(body, options));
+        }, 0);
+      };
+
+      xhr.onerror = function() {
+        setTimeout(function() {
+          reject(new TypeError('Network request failed'));
+        }, 0);
+      };
+
+      xhr.ontimeout = function() {
+        setTimeout(function() {
+          reject(new TypeError('Network request timed out'));
+        }, 0);
+      };
+
+      xhr.onabort = function() {
+        setTimeout(function() {
+          reject(new exports.DOMException('Aborted', 'AbortError'));
+        }, 0);
+      };
+
+      function fixUrl(url) {
+        try {
+          return url === '' && g.location.href ? g.location.href : url
+        } catch (e) {
+          return url
+        }
+      }
+
+      xhr.open(request.method, fixUrl(request.url), true);
+
+      if (request.credentials === 'include') {
+        xhr.withCredentials = true;
+      } else if (request.credentials === 'omit') {
+        xhr.withCredentials = false;
+      }
+
+      if ('responseType' in xhr) {
+        if (support.blob) {
+          xhr.responseType = 'blob';
+        } else if (
+          support.arrayBuffer
+        ) {
+          xhr.responseType = 'arraybuffer';
+        }
+      }
+
+      if (init && typeof init.headers === 'object' && !(init.headers instanceof Headers || (g.Headers && init.headers instanceof g.Headers))) {
+        var names = [];
+        Object.getOwnPropertyNames(init.headers).forEach(function(name) {
+          names.push(normalizeName(name));
+          xhr.setRequestHeader(name, normalizeValue(init.headers[name]));
+        });
+        request.headers.forEach(function(value, name) {
+          if (names.indexOf(name) === -1) {
+            xhr.setRequestHeader(name, value);
+          }
+        });
+      } else {
+        request.headers.forEach(function(value, name) {
+          xhr.setRequestHeader(name, value);
+        });
+      }
+
+      if (request.signal) {
+        request.signal.addEventListener('abort', abortXhr);
+
+        xhr.onreadystatechange = function() {
+          // DONE (success or failure)
+          if (xhr.readyState === 4) {
+            request.signal.removeEventListener('abort', abortXhr);
+          }
+        };
+      }
+
+      xhr.send(typeof request._bodyInit === 'undefined' ? null : request._bodyInit);
+    })
+  }
+
+  fetch.polyfill = true;
+
+  if (!g.fetch) {
+    g.fetch = fetch;
+    g.Headers = Headers;
+    g.Request = Request;
+    g.Response = Response;
+  }
+
+  exports.Headers = Headers;
+  exports.Request = Request;
+  exports.Response = Response;
+  exports.fetch = fetch;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));

src/browser/polyfill/fetch.zig

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