check cached dynamic module first

zig fmt

.github/actions/install/action.yml

@@ -5,7 +5,7 @@ inputs:
   zig:
     description: 'Zig version to install'
     required: false
-    default: '0.14.0'
+    default: '0.14.1'
   arch:
     description: 'CPU arch used to select the v8 lib'
     required: false
@@ -17,7 +17,7 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.1.23'
+    default: 'v0.1.28'
   v8:
     description: 'v8 version to install'
     required: false
@@ -34,9 +34,11 @@ runs:
     - name: Install apt deps
       if: ${{ inputs.os == 'linux' }}
       shell: bash
-      run: sudo apt-get install -y wget xz-utils python3 ca-certificates git pkg-config libglib2.0-dev gperf libexpat1-dev cmake clang
+      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@v1
+    - uses: mlugg/setup-zig@v2
       with:
         version: ${{ inputs.zig }}
 
@@ -59,11 +61,11 @@ runs:
     - name: install v8
       shell: bash
       run: |
-        mkdir -p v8/out/debug/obj/zig/
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/debug/obj/zig/libc_v8.a
+        mkdir -p 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 v8/out/release/obj/zig/
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/release/obj/zig/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

.github/workflows/build.yml

@@ -1,5 +1,11 @@
 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 * * *"
@@ -37,6 +43,11 @@ jobs:
       - 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:
@@ -49,7 +60,7 @@ jobs:
       ARCH: aarch64
       OS: linux
 
-    runs-on: ubuntu-24.04-arm
+    runs-on: ubuntu-22.04-arm
     timeout-minutes: 15
 
     steps:
@@ -65,11 +76,16 @@ jobs:
           arch: ${{env.ARCH}}
 
       - name: zig build
-        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
 
+      - 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:
@@ -82,7 +98,9 @@ jobs:
       ARCH: aarch64
       OS: macos
 
-    runs-on: macos-latest
+    # macos-14 runs on arm CPU. see
+    # https://github.com/actions/runner-images?tab=readme-ov-file
+    runs-on: macos-14
     timeout-minutes: 15
 
     steps:
@@ -103,6 +121,11 @@ jobs:
       - 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:
@@ -115,6 +138,11 @@ jobs:
       ARCH: x86_64
       OS: macos
 
+    # macos-13 runs on x86 CPU. see
+    # https://github.com/actions/runner-images?tab=readme-ov-file
+    # If we want to build for macos-14 or superior, we need to switch to
+    # macos-14-large.
+    # No need for now, but maybe we will need it in the short term.
     runs-on: macos-13
     timeout-minutes: 15
 
@@ -136,6 +164,11 @@ jobs:
       - 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:

.github/workflows/e2e-test.yml

@@ -1,5 +1,12 @@
 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:
@@ -38,6 +45,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
+    # Don't run the CI with draft PR.
+    if: github.event.pull_request.draft == false
+
     steps:
       - uses: actions/checkout@v4
         with:
@@ -48,7 +58,7 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: zig build release
-        run: zig build -Doptimize=ReleaseSafe
+        run: zig build -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: upload artifact
         uses: actions/upload-artifact@v4
@@ -58,56 +68,6 @@ jobs:
             zig-out/bin/lightpanda
           retention-days: 1
 
-  puppeteer-perf:
-    name: puppeteer-perf
-    needs: zig-build-release
-
-    env:
-      MAX_MEMORY: 28000
-      MAX_AVG_DURATION: 24
-      LIGHTPANDA_DISABLE_TELEMETRY: true
-
-    runs-on: ubuntu-latest
-    timeout-minutes: 15
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          repository: 'lightpanda-io/demo'
-          fetch-depth: 0
-
-      - run: npm install
-
-      - name: download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: lightpanda-build-release
-
-      - run: chmod a+x ./lightpanda
-
-      - name: run puppeteer
-        run: |
-          python3 -m http.server 1234 -d ./public & echo $! > PYTHON.pid
-          ./lightpanda serve --gc_hints & echo $! > LPD.pid
-          RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
-          cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
-          kill `cat LPD.pid` `cat PYTHON.pid`
-
-      - name: puppeteer result
-        run: cat puppeteer.out
-
-      - name: memory regression
-        run: |
-          export LPD_VmHWM=`cat LPD.VmHWM`
-          echo "Peak resident set size: $LPD_VmHWM"
-          test "$LPD_VmHWM" -le "$MAX_MEMORY"
-
-      - name: duration regression
-        run: |
-          export PUPPETEER_AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
-          echo "puppeteer avg duration: $PUPPETEER_AVG_DURATION"
-          test "$PUPPETEER_AVG_DURATION" -le "$MAX_AVG_DURATION"
-
   demo-scripts:
     name: demo-scripts
     needs: zig-build-release
@@ -135,3 +95,117 @@ jobs:
           ./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
+
+    env:
+      MAX_MEMORY: 27000
+      MAX_AVG_DURATION: 23
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    # 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: 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"
+
+      - 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/zig-fmt.yml

@@ -1,7 +1,7 @@
 name: zig-fmt
 
 env:
-  ZIG_VERSION: 0.14.0
+  ZIG_VERSION: 0.14.1
 
 on:
   pull_request:
@@ -32,7 +32,7 @@ jobs:
     timeout-minutes: 15
 
     steps:
-      - uses: mlugg/setup-zig@v1
+      - uses: mlugg/setup-zig@v2
         with:
           version: ${{ env.ZIG_VERSION }}
 

Dockerfile

@@ -1,11 +1,11 @@
-FROM ubuntu:24.04
+FROM debian:stable
 
 ARG MINISIG=0.12
-ARG ZIG=0.14.0
+ARG ZIG=0.14.1
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
-ARG ARCH=x86_64
-ARG V8=11.1.134
-ARG ZIG_V8=v0.1.23
+ARG V8=13.6.233.8
+ARG ZIG_V8=v0.1.28
+ARG TARGETPLATFORM
 
 RUN apt-get update -yq && \
     apt-get install -yq xz-utils \
@@ -20,30 +20,19 @@ RUN curl --fail -L -O https://github.com/jedisct1/minisign/releases/download/${M
     tar xvzf minisign-${MINISIG}-linux.tar.gz
 
 # install zig
-RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-linux-${ARCH}-${ZIG}.tar.xz
-RUN curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-linux-${ARCH}-${ZIG}.tar.xz.minisig
-
-RUN minisign-linux/${ARCH}/minisign -Vm zig-linux-${ARCH}-${ZIG}.tar.xz -P ${ZIG_MINISIG}
-
-# clean minisg
-RUN rm -fr minisign-0.11-linux.tar.gz minisign-linux
-
-# install zig
-RUN tar xvf zig-linux-${ARCH}-${ZIG}.tar.xz && \
-    mv zig-linux-${ARCH}-${ZIG} /usr/local/lib && \
-    ln -s /usr/local/lib/zig-linux-${ARCH}-${ZIG}/zig /usr/local/bin/zig
-
-# clean up zig install
-RUN rm -fr zig-linux-${ARCH}-${ZIG}.tar.xz zig-linux-${ARCH}-${ZIG}.tar.xz.minisig
-
-# force use of http instead of ssh with github
-RUN cat <<EOF > /root/.gitconfig
-[url "https://github.com/"]
-    insteadOf="git@github.com:"
-EOF
+RUN case $TARGETPLATFORM in \
+    "linux/arm64") ARCH="aarch64" ;; \
+    *) ARCH="x86_64" ;; \
+    esac && \
+    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz && \
+    curl --fail -L -O https://ziglang.org/download/${ZIG}/zig-${ARCH}-linux-${ZIG}.tar.xz.minisig && \
+    minisign-linux/${ARCH}/minisign -Vm zig-${ARCH}-linux-${ZIG}.tar.xz -P ${ZIG_MINISIG} && \
+    tar xvf zig-${ARCH}-linux-${ZIG}.tar.xz && \
+    mv zig-${ARCH}-linux-${ZIG} /usr/local/lib && \
+    ln -s /usr/local/lib/zig-${ARCH}-linux-${ZIG}/zig /usr/local/bin/zig
 
 # clone lightpanda
-RUN git clone git@github.com:lightpanda-io/browser.git
+RUN git clone https://github.com/lightpanda-io/browser.git
 
 WORKDIR /browser
 
@@ -56,14 +45,18 @@ RUN make install-libiconv && \
     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/build/${ARCH}-linux/release/ninja/obj/zig/ && \
-    mv libc_v8.a v8/build/${ARCH}-linux/release/ninja/obj/zig/libc_v8.a
+RUN case $TARGETPLATFORM in \
+    "linux/arm64") ARCH="aarch64" ;; \
+    *) ARCH="x86_64" ;; \
+    esac && \
+    curl --fail -L -o libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${ZIG_V8}/libc_v8_${V8}_linux_${ARCH}.a && \
+    mkdir -p v8/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
+FROM debian:stable-slim
 
 # copy ca certificates
 COPY --from=0 /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/ca-certificates.crt

Makefile

@@ -72,11 +72,16 @@ build-dev:
 	@$(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/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"

README.md

@@ -18,7 +18,7 @@ Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
 - Support of Web APIs (partial, WIP)
-- Compatible with Playwright, Puppeteer through CDP (WIP)
+- Compatible with Playwright[^1], Puppeteer, chromedp through CDP
 
 Fast web automation for AI agents, LLM training, scraping and testing:
 
@@ -36,9 +36,13 @@ Fast web automation for AI agents, LLM training, scraping and testing:
 _Puppeteer requesting 100 pages from a local website on a AWS EC2 m5.large instance.
 See [benchmark details](https://github.com/lightpanda-io/demo)._
 
+[^1]: **Playwright support disclaimer:**
+Due to the nature of Playwright, a script that works with the current version of the browser may not function correctly with a future version. Playwright uses an intermediate JavaScript layer that selects an execution strategy based on the browser's available features. If Lightpanda adds a new [Web API](https://developer.mozilla.org/en-US/docs/Web/API), Playwright may choose to execute different code for the same script. This new code path could attempt to use features that are not yet implemented. Lightpanda makes an effort to add compatibility tests, but we can't cover all scenarios. If you encounter an issue, please create a [GitHub issue](https://github.com/lightpanda-io/browser/issues) and include the last known working version of the script.
+
 ## Quick start
 
-### Install from the nightly builds
+### Install 
+**Install from the nightly builds**
 
 You can download the last binary from the [nightly
 builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
@@ -61,6 +65,17 @@ chmod a+x ./lightpanda
 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.
 
+**Install from Docker**
+
+Lightpanda provides [official Docker
+images](https://hub.docker.com/r/lightpanda/browser) for both Linux amd64 and
+arm64 architectures.
+The following command fetches the Docker image and starts a new container exposing Lightpanda's CDP server on port `9222`.
+The `--privileged` option is required because the browser requires `io_uring` syscalls which are blocked by default by Docker.
+```console
+docker run -d --name lightpanda -p 9222:9222 --privileged lightpanda/browser:nightly
+```
+
 ### Dump a URL
 
 ```console
@@ -121,21 +136,27 @@ By default, Lightpanda collects and sends usage telemetry. This can be disabled
 
 ## Status
 
-Lightpanda is still a work in progress and is currently at a Beta stage.
-
-:warning: You should expect most websites to fail or crash.
+Lightpanda is in Beta and currently a work in progress. Stability and coverage are improving and many websites now work.
+You may still encounter errors or crashes. Please open an issue with specifics if so.
 
 Here are the key features we have implemented:
 
+- [x] HTTP loader
 - [x] HTTP loader
 - [x] HTML parser and DOM tree (based on Netsurf libs)
 - [x] Javascript support (v8)
-- [x] Basic DOM APIs
+- [x] DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [x] Fetch API
+  - [x] Fetch API (polyfill)
 - [x] DOM dump
-- [x] Basic CDP/websockets server
+- [x] CDP/websockets server
+- [x] Click
+- [x] Input form
+- [x] Cookies
+- [x] Custom HTTP headers
+- [ ] Proxy support
+- [ ] Network interception 
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
@@ -145,7 +166,7 @@ You can also follow the progress of our Javascript support in our dedicated [zig
 
 ### Prerequisites
 
-Lightpanda is written with [Zig](https://ziglang.org/) `0.14.0`. 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
@@ -161,7 +182,7 @@ For Debian/Ubuntu based Linux:
 sudo apt install xz-utils \
     python3 ca-certificates git \
     pkg-config libglib2.0-dev \
-    gperf libexpat1-dev unzip \
+    gperf libexpat1-dev unzip rsync \
     cmake clang
 ```
 

build.zig

@@ -21,7 +21,7 @@ const builtin = @import("builtin");
 
 /// Do not rename this constant. It is scanned by some scripts to determine
 /// which zig version to install.
-const recommended_zig_version = "0.14.0";
+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)) {
@@ -158,13 +158,30 @@ fn common(b: *std.Build, opts: *std.Build.Step.Options, step: *std.Build.Step.Co
         mod.addImport("v8", v8_mod);
     }
 
-    const lib_path = try std.fmt.allocPrint(
-        mod.owner.allocator,
-        "v8/out/{s}/obj/zig/libc_v8.a",
-        .{if (mod.optimize.? == .Debug) "debug" else "release"},
-    );
     mod.link_libcpp = true;
-    mod.addObjectFile(mod.owner.path(lib_path));
+
+    {
+        const release_dir = if (mod.optimize.? == .Debug) "debug" else "release";
+        const os = switch (target.result.os.tag) {
+            .linux => "linux",
+            .macos => "macos",
+            else => return error.UnsupportedPlatform,
+        };
+        var lib_path = try std.fmt.allocPrint(
+            mod.owner.allocator,
+            "v8/out/{s}/{s}/obj/zig/libc_v8.a",
+            .{ os, release_dir },
+        );
+        std.fs.cwd().access(lib_path, .{}) catch {
+            // legacy path
+            lib_path = try std.fmt.allocPrint(
+                mod.owner.allocator,
+                "v8/out/{s}/obj/zig/libc_v8.a",
+                .{release_dir},
+            );
+        };
+        mod.addObjectFile(mod.owner.path(lib_path));
+    }
 
     switch (target.result.os.tag) {
         .macos => {
@@ -175,8 +192,7 @@ fn common(b: *std.Build, opts: *std.Build.Step.Options, step: *std.Build.Step.Co
         else => {},
     }
 
-    mod.addImport("build_info", opts.createModule());
-    mod.addObjectFile(mod.owner.path(lib_path));
+    mod.addImport("build_config", opts.createModule());
 }
 
 fn moduleNetSurf(b: *std.Build, step: *std.Build.Step.Compile, target: std.Build.ResolvedTarget) !void {

build.zig.zon

@@ -5,16 +5,16 @@
     .fingerprint = 0xda130f3af836cea0,
     .dependencies = .{
         .tls = .{
-            .url = "https://github.com/ianic/tls.zig/archive/b29a8b45fc59fc2d202769c4f54509bb9e17d0a2.tar.gz",
-            .hash = "tls-0.1.0-ER2e0uAxBQDm_TmSDdbiiyvAZoh4ejlDD4hW8Fl813xE",
+            .url = "https://github.com/ianic/tls.zig/archive/55845f755d9e2e821458ea55693f85c737cd0c7a.tar.gz",
+            .hash = "tls-0.1.0-ER2e0m43BQAshi8ixj1qf3w2u2lqKtXtkrxUJ4AGZDcl",
         },
         .tigerbeetle_io = .{
             .url = "https://github.com/lightpanda-io/tigerbeetle-io/archive/61d9652f1a957b7f4db723ea6aa0ce9635e840ce.tar.gz",
             .hash = "tigerbeetle_io-0.0.0-ViLgxpyRBAB5BMfIcj3KMXfbJzwARs9uSl8aRy2OXULd",
         },
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/6f1ee74a0e7002ea3568e337ab716c1e75c53769.tar.gz",
-            .hash = "v8-0.0.0-xddH6z2yAwCOPUGmy1IgXysI1yWt8ftd2Z3D5zp0I9tV",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/b22911e02e4884a76acf52aa9aff2ba169d05b40.tar.gz",
+            .hash = "v8-0.0.0-xddH69zCAwAzm1u5cQVa-uG5ib2y6PpENXCl8yEYdUYk",
         },
         //.v8 = .{ .path = "../zig-v8-fork" },
         //.tigerbeetle_io = .{ .path = "../tigerbeetle-io" },

flake.lock

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

flake.nix

@@ -2,56 +2,53 @@
   description = "headless browser designed for AI and automation";
 
   inputs = {
-    nixpkgs.url = "github:nixos/nixpkgs/release-24.11";
-
-    iguana.url = "github:mookums/iguana";
-    iguana.inputs.nixpkgs.follows = "nixpkgs";
-
+    nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
     flake-utils.url = "github:numtide/flake-utils";
   };
 
   outputs =
     {
       nixpkgs,
-      iguana,
       flake-utils,
       ...
     }:
     flake-utils.lib.eachDefaultSystem (
       system:
       let
-        zigVersion = "0_14_0";
-        iguanaLib = iguana.lib.${system};
-
         pkgs = import nixpkgs {
           inherit system;
-          overlays = [
-            (iguanaLib.mkZigOverlay zigVersion)
-            (iguanaLib.mkZlsOverlay zigVersion)
-          ];
         };
 
+        # 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.buildFHSUserEnv {
+        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
-              python3
               glib.dev
               glibc.dev
               zlib
-              ninja
-              gn
-              gcc-unwrapped
-              binutils
-              clang
-              clang-tools
             ];
         };
       in

src/app.zig

@@ -1,21 +1,23 @@
 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 http = @import("http/client.zig");
+const Platform = @import("runtime/js.zig").Platform;
+
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
 const Notification = @import("notification.zig").Notification;
 
-const log = std.log.scoped(.app);
-
 // Container for global state / objects that various parts of the system
 // might need.
 pub const App = struct {
     loop: *Loop,
     config: Config,
+    platform: ?*const Platform,
     allocator: Allocator,
     telemetry: Telemetry,
-    http_client: HttpClient,
+    http_client: http.Client,
     app_dir_path: ?[]const u8,
     notification: *Notification,
 
@@ -28,9 +30,11 @@ pub const App = struct {
 
     pub const Config = struct {
         run_mode: RunMode,
-        gc_hints: bool = false,
+        platform: ?*const Platform = null,
         tls_verify_host: bool = true,
         http_proxy: ?std.Uri = null,
+        proxy_type: ?http.ProxyType = null,
+        proxy_auth: ?http.ProxyAuth = null,
     };
 
     pub fn init(allocator: Allocator, config: Config) !*App {
@@ -52,10 +56,14 @@ pub const App = struct {
             .loop = loop,
             .allocator = allocator,
             .telemetry = undefined,
+            .platform = config.platform,
             .app_dir_path = app_dir_path,
             .notification = notification,
-            .http_client = try HttpClient.init(allocator, 5, .{
+            .http_client = try http.Client.init(allocator, loop, .{
+                .max_concurrent = 3,
                 .http_proxy = config.http_proxy,
+                .proxy_type = config.proxy_type,
+                .proxy_auth = config.proxy_auth,
                 .tls_verify_host = config.tls_verify_host,
             }),
             .config = config,
@@ -85,7 +93,7 @@ fn getAndMakeAppDir(allocator: Allocator) ?[]const u8 {
         return allocator.dupe(u8, "/tmp") catch unreachable;
     }
     const app_dir_path = std.fs.getAppDataDir(allocator, "lightpanda") catch |err| {
-        log.warn("failed to get lightpanda data dir: {}", .{err});
+        log.warn(.app, "get data dir", .{ .err = err });
         return null;
     };
 
@@ -93,7 +101,7 @@ fn getAndMakeAppDir(allocator: Allocator) ?[]const u8 {
         error.PathAlreadyExists => return app_dir_path,
         else => {
             allocator.free(app_dir_path);
-            log.warn("failed to create lightpanda data dir: {}", .{err});
+            log.warn(.app, "create data dir", .{ .err = err, .path = app_dir_path });
             return null;
         },
     };

src/browser/State.zig

@@ -0,0 +1,76 @@
+// 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 DataSet = @import("html/DataSet.zig");
+const ShadowRoot = @import("dom/shadow_root.zig").ShadowRoot;
+const StyleSheet = @import("cssom/stylesheet.zig").StyleSheet;
+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,
+dataset: ?DataSet = null,
+template_content: ?*parser.DocumentFragment = null,
+
+// For dom/element
+shadow_root: ?*ShadowRoot = null,
+
+// for html/document
+ready_state: ReadyState = .loading,
+
+// for html/HTMLStyleElement
+style_sheet: ?*StyleSheet = null,
+
+// for dom/document
+active_element: ?*parser.Element = null,
+
+// 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

@@ -21,11 +21,14 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 const ArenaAllocator = std.heap.ArenaAllocator;
 
+const State = @import("State.zig");
 const Env = @import("env.zig").Env;
 const App = @import("../app.zig").App;
 const Session = @import("session.zig").Session;
 const Notification = @import("../notification.zig").Notification;
 
+const log = @import("../log.zig");
+
 const http = @import("../http/client.zig");
 
 // Browser is an instance of the browser.
@@ -38,12 +41,15 @@ pub const Browser = struct {
     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(app: *App) !Browser {
         const allocator = app.allocator;
 
-        const env = try Env.init(allocator, .{});
+        const env = try Env.init(allocator, app.platform, .{});
         errdefer env.deinit();
 
         const notification = try Notification.init(allocator, app.notification);
@@ -57,6 +63,9 @@ pub const Browser = struct {
             .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),
         };
     }
 
@@ -64,7 +73,10 @@ pub const Browser = struct {
         self.closeSession();
         self.env.deinit();
         self.page_arena.deinit();
+        self.session_arena.deinit();
+        self.transfer_arena.deinit();
         self.notification.deinit();
+        self.state_pool.deinit();
     }
 
     pub fn newSession(self: *Browser) !*Session {
@@ -79,14 +91,20 @@ pub const Browser = struct {
         if (self.session) |*session| {
             session.deinit();
             self.session = null;
-            if (self.app.config.gc_hints) {
-                self.env.lowMemoryNotification();
-            }
+            _ = self.session_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
+            self.env.lowMemoryNotification();
         }
     }
 
     pub fn runMicrotasks(self: *const Browser) void {
-        return self.env.runMicrotasks();
+        self.env.runMicrotasks();
+    }
+
+    pub fn runMessageLoop(self: *const Browser) void {
+        while (self.env.pumpMessageLoop()) {
+            log.debug(.browser, "pumpMessageLoop", .{});
+        }
+        self.env.runIdleTasks();
     }
 };
 

src/browser/console/console.zig

@@ -19,86 +19,97 @@
 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 SessionState = @import("../env.zig").SessionState;
 
-const log = if (builtin.is_test) &test_capture else std.log.scoped(.console);
+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 _log(_: *const Console, values: []JsObject, state: *SessionState) !void {
+    pub fn _lp(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
-        log.info("{s}", .{try serializeValues(values, state)});
+        log.fatal(.console, "lightpanda", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _info(console: *const Console, values: []JsObject, state: *SessionState) !void {
-        return console._log(values, state);
-    }
-
-    pub fn _debug(_: *const Console, values: []JsObject, state: *SessionState) !void {
+    pub fn _log(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
-        log.debug("{s}", .{try serializeValues(values, state)});
+        log.info(.console, "info", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _warn(_: *const Console, values: []JsObject, state: *SessionState) !void {
+    pub fn _info(values: []JsObject, page: *Page) !void {
+        return _log(values, page);
+    }
+
+    pub fn _debug(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
-        log.warn("{s}", .{try serializeValues(values, state)});
+        log.debug(.console, "debug", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _error(_: *const Console, values: []JsObject, state: *SessionState) !void {
+    pub fn _warn(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
-        log.err("{s}", .{try serializeValues(values, state)});
+        log.warn(.console, "warn", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _clear(_: *const Console) void {}
+    pub fn _error(values: []JsObject, page: *Page) !void {
+        if (values.len == 0) {
+            return;
+        }
 
-    pub fn _count(self: *Console, label_: ?[]const u8, state: *SessionState) !void {
+        log.info(.console, "error", .{
+            .args = try serializeValues(values, page),
+            .stack = page.stackTrace() catch "???",
+        });
+    }
+
+    pub fn _clear() void {}
+
+    pub fn _count(self: *Console, label_: ?[]const u8, page: *Page) !void {
         const label = label_ orelse "default";
-        const gop = try self.counts.getOrPut(state.arena, label);
+        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 state.arena.dupe(u8, label);
+            gop.key_ptr.* = try page.arena.dupe(u8, label);
         }
 
         const count = current + 1;
         gop.value_ptr.* = count;
 
-        log.info("{s}: {d}", .{ label, 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.warn("Counter \"{s}\" doesn't exist.", .{label});
+            log.info(.console, "invalid counter", .{ .label = label });
             return;
         };
-
-        log.info("{s}: {d}", .{ label, kv.value });
+        log.info(.console, "count reset", .{ .label = label, .count = kv.value });
     }
 
-    pub fn _time(self: *Console, label_: ?[]const u8, state: *SessionState) !void {
+    pub fn _time(self: *Console, label_: ?[]const u8, page: *Page) !void {
         const label = label_ orelse "default";
-        const gop = try self.timers.getOrPut(state.arena, label);
+        const gop = try self.timers.getOrPut(page.arena, label);
 
         if (gop.found_existing) {
-            log.warn("Timer \"{s}\" already exists.", .{label});
+            log.info(.console, "duplicate timer", .{ .label = label });
             return;
         }
-        gop.key_ptr.* = try state.arena.dupe(u8, label);
+        gop.key_ptr.* = try page.arena.dupe(u8, label);
         gop.value_ptr.* = timestamp();
     }
 
@@ -106,42 +117,48 @@ pub const Console = struct {
         const elapsed = timestamp();
         const label = label_ orelse "default";
         const start = self.timers.get(label) orelse {
-            log.warn("Timer \"{s}\" doesn't exist.", .{label});
+            log.info(.console, "invalid timer", .{ .label = label });
             return;
         };
-
-        log.info("\"{s}\": {d}ms", .{ label, elapsed - start });
+        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.warn("Timer \"{s}\" doesn't exist.", .{label});
+            log.info(.console, "invalid timer", .{ .label = label });
             return;
         };
 
-        log.info("\"{s}\": {d}ms - timer ended", .{ label, elapsed - kv.value });
+        log.warn(.console, "timer stop", .{ .label = label, .elapsed = elapsed - kv.value });
     }
 
-    pub fn _assert(_: *Console, assertion: JsObject, values: []JsObject, state: *SessionState) !void {
+    pub fn _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, state);
+            serialized_values = try serializeValues(values, page);
         }
-        log.err("Assertion failed: {s}", .{serialized_values});
+        log.info(.console, "assertion failed", .{ .values = serialized_values });
     }
 
-    fn serializeValues(values: []JsObject, state: *SessionState) ![]const u8 {
-        const arena = state.call_arena;
+    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) = .{};
-        try arr.appendSlice(arena, try values[0].toString());
-        for (values[1..]) |value| {
-            try arr.append(arena, ' ');
-            try arr.appendSlice(arena, try value.toString());
+
+        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;
     }
@@ -155,11 +172,11 @@ fn timestamp() u32 {
 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();
 
-    defer testing.reset();
-
     {
         try runner.testCases(&.{
             .{ "console.log('a')", "undefined" },
@@ -167,8 +184,8 @@ test "Browser.Console" {
         }, .{});
 
         const captured = test_capture.captured.items;
-        try testing.expectEqual("a", captured[0]);
-        try testing.expectEqual("hello world 23 true [object Object]", captured[1]);
+        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]);
     }
 
     {
@@ -186,15 +203,15 @@ test "Browser.Console" {
         }, .{});
 
         const captured = test_capture.captured.items;
-        try testing.expectEqual("Counter \"default\" doesn't exist.", captured[0]);
-        try testing.expectEqual("default: 1", captured[1]);
-        try testing.expectEqual("teg: 1", captured[2]);
-        try testing.expectEqual("teg: 2", captured[3]);
-        try testing.expectEqual("teg: 3", captured[4]);
-        try testing.expectEqual("default: 2", captured[5]);
-        try testing.expectEqual("teg: 3", captured[6]);
-        try testing.expectEqual("default: 2", captured[7]);
-        try testing.expectEqual("default: 1", captured[8]);
+        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]);
     }
 
     {
@@ -208,33 +225,105 @@ test "Browser.Console" {
         }, .{});
 
         const captured = test_capture.captured.items;
-        try testing.expectEqual("Assertion failed: ", captured[0]);
-        try testing.expectEqual("Assertion failed: x true", captured[1]);
-        try testing.expectEqual("Assertion failed: x", captured[2]);
+        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 fmt: []const u8, args: anytype) void {
-        const str = std.fmt.allocPrint(testing.arena_allocator, fmt, args) catch unreachable;
-        self.captured.append(testing.arena_allocator, str) catch unreachable;
+    fn 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 fmt: []const u8, args: anytype) void {
-        self.debug(fmt, 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 fmt: []const u8, args: anytype) void {
-        self.debug(fmt, 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 fmt: []const u8, args: anytype) void {
-        self.debug(fmt, 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

@@ -17,16 +17,21 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Env = @import("../env.zig").Env;
 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 {
+    _not_empty: bool = true,
+
+    pub fn _getRandomValues(_: *const Crypto, js_obj: Env.JsObject) !Env.JsObject {
+        var into = try js_obj.toZig(Crypto, "getRandomValues", RandomValues);
         const buf = into.asBuffer();
         if (buf.len > 65_536) {
             return error.QuotaExceededError;
         }
         std.crypto.random.bytes(buf);
+        return js_obj;
     }
 
     pub fn _randomUUID(_: *const Crypto) [36]u8 {
@@ -47,16 +52,16 @@ const RandomValues = union(enum) {
     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],
-        }
+        return switch (self) {
+            .int8 => |b| (@as([]u8, @ptrCast(b)))[0..b.len],
+            .uint8 => |b| (@as([]u8, @ptrCast(b)))[0..b.len],
+            .int16 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .uint16 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .int32 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .uint32 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .int64 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+            .uint64 => |b| (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+        };
     }
 };
 
@@ -69,14 +74,24 @@ test "Browser.Crypto" {
         .{ "const a = crypto.randomUUID();", "undefined" },
         .{ "const b = crypto.randomUUID();", "undefined" },
         .{ "a.length;", "36" },
-        .{ "a.length;", "36" },
+        .{ "b.length;", "36" },
         .{ "a == b;", "false" },
     }, .{});
 
     try runner.testCases(&.{
         .{ "try { crypto.getRandomValues(new BigUint64Array(8193)) } catch(e) { e.message == 'QuotaExceededError' }", "true" },
         .{ "let r1 = new Int32Array(5)", "undefined" },
-        .{ "crypto.getRandomValues(r1)", "undefined" },
+        .{ "let r2 = crypto.getRandomValues(r1)", "undefined" },
         .{ "new Set(r1).size", "5" },
+        .{ "new Set(r2).size", "5" },
+        .{ "r1.every((v, i) => v === r2[i])", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var r3 = new Uint8Array(16)", null },
+        .{ "let r4 = crypto.getRandomValues(r3)", "undefined" },
+        .{ "r4[6] = 10", null },
+        .{ "r4[6]", "10" },
+        .{ "r3[6]", "10" },
     }, .{});
 }

src/browser/css/css.zig

@@ -23,6 +23,20 @@ const std = @import("std");
 const Selector = @import("selector.zig").Selector;
 const parser = @import("parser.zig");
 
+pub const Interfaces = .{
+    Css,
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/CSS
+pub const Css = struct {
+    _not_empty: bool = true,
+
+    pub fn _supports(_: *Css, _: []const u8, _: ?[]const u8) bool {
+        // TODO: Actually respond with which CSS features we support.
+        return true;
+    }
+};
+
 // parse parse a selector string and returns the parsed result or an error.
 pub fn parse(alloc: std.mem.Allocator, s: []const u8, opts: parser.ParseOptions) parser.ParseError!Selector {
     var p = parser.Parser{ .s = s, .i = 0, .opts = opts };
@@ -174,3 +188,14 @@ test "parse" {
         defer s.deinit(alloc);
     }
 }
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.CSS" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "CSS.supports('display: flex')", "true" },
+        .{ "CSS.supports('text-decoration-style', 'blink')", "true" },
+    }, .{});
+}

src/browser/css/parser.zig

@@ -204,7 +204,7 @@ pub const Parser = struct {
         }
 
         const c = p.s[p.i];
-        if (!nameStart(c) or c == '\\') {
+        if (!(nameStart(c) or c == '\\')) {
             return ParseError.ExpectedSelector;
         }
 
@@ -582,6 +582,7 @@ pub const Parser = struct {
             .only_of_type => return .{ .pseudo_class_only_child = true },
             .input, .empty, .root, .link => return .{ .pseudo_class = pseudo_class },
             .enabled, .disabled, .checked => return .{ .pseudo_class = pseudo_class },
+            .visible => return .{ .pseudo_class = pseudo_class },
             .lang => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
                 if (p.i == p.s.len) return ParseError.UnmatchParenthesis;
@@ -605,6 +606,7 @@ pub const Parser = struct {
             .after, .backdrop, .before, .cue, .first_letter => return .{ .pseudo_element = pseudo_class },
             .first_line, .grammar_error, .marker, .placeholder => return .{ .pseudo_element = pseudo_class },
             .selection, .spelling_error => return .{ .pseudo_element = pseudo_class },
+            .modal, .popover_open => return .{ .pseudo_element = pseudo_class },
         }
     }
 
@@ -948,3 +950,36 @@ test "parser.parseString" {
         };
     }
 }
+
+test "parser.parse" {
+    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
+    defer arena.deinit();
+    const alloc = arena.allocator();
+
+    const testcases = [_]struct {
+        s: []const u8, // given value
+        exp: Selector, // expected value
+        err: bool = false,
+    }{
+        .{ .s = "root", .exp = .{ .tag = "root" } },
+        .{ .s = ".root", .exp = .{ .class = "root" } },
+        .{ .s = ":root", .exp = .{ .pseudo_class = .root } },
+        .{ .s = ".\\:bar", .exp = .{ .class = ":bar" } },
+        .{ .s = ".foo\\:bar", .exp = .{ .class = "foo:bar" } },
+    };
+
+    for (testcases) |tc| {
+        var p = Parser{ .s = tc.s, .opts = .{} };
+        const sel = p.parse(alloc) catch |e| {
+            // if error was expected, continue.
+            if (tc.err) continue;
+
+            std.debug.print("test case {s}\n", .{tc.s});
+            return e;
+        };
+        std.testing.expectEqualDeep(tc.exp, sel) catch |e| {
+            std.debug.print("test case {s} : {}\n", .{ tc.s, sel });
+            return e;
+        };
+    }
+}

src/browser/css/selector.zig

@@ -98,6 +98,9 @@ pub const PseudoClass = enum {
     placeholder,
     selection,
     spelling_error,
+    modal,
+    popover_open,
+    visible,
 
     pub const Error = error{
         InvalidPseudoClass,
@@ -113,51 +116,108 @@ pub const PseudoClass = enum {
     }
 
     pub fn parse(s: []const u8) Error!PseudoClass {
-        if (std.ascii.eqlIgnoreCase(s, "not")) return .not;
-        if (std.ascii.eqlIgnoreCase(s, "has")) return .has;
-        if (std.ascii.eqlIgnoreCase(s, "haschild")) return .haschild;
-        if (std.ascii.eqlIgnoreCase(s, "contains")) return .contains;
-        if (std.ascii.eqlIgnoreCase(s, "containsown")) return .containsown;
-        if (std.ascii.eqlIgnoreCase(s, "matches")) return .matches;
-        if (std.ascii.eqlIgnoreCase(s, "matchesown")) return .matchesown;
-        if (std.ascii.eqlIgnoreCase(s, "nth-child")) return .nth_child;
-        if (std.ascii.eqlIgnoreCase(s, "nth-last-child")) return .nth_last_child;
-        if (std.ascii.eqlIgnoreCase(s, "nth-of-type")) return .nth_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "nth-last-of-type")) return .nth_last_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "first-child")) return .first_child;
-        if (std.ascii.eqlIgnoreCase(s, "last-child")) return .last_child;
-        if (std.ascii.eqlIgnoreCase(s, "first-of-type")) return .first_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "last-of-type")) return .last_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "only-child")) return .only_child;
-        if (std.ascii.eqlIgnoreCase(s, "only-of-type")) return .only_of_type;
-        if (std.ascii.eqlIgnoreCase(s, "input")) return .input;
-        if (std.ascii.eqlIgnoreCase(s, "empty")) return .empty;
-        if (std.ascii.eqlIgnoreCase(s, "root")) return .root;
-        if (std.ascii.eqlIgnoreCase(s, "link")) return .link;
-        if (std.ascii.eqlIgnoreCase(s, "lang")) return .lang;
-        if (std.ascii.eqlIgnoreCase(s, "enabled")) return .enabled;
-        if (std.ascii.eqlIgnoreCase(s, "disabled")) return .disabled;
-        if (std.ascii.eqlIgnoreCase(s, "checked")) return .checked;
-        if (std.ascii.eqlIgnoreCase(s, "visited")) return .visited;
-        if (std.ascii.eqlIgnoreCase(s, "hover")) return .hover;
-        if (std.ascii.eqlIgnoreCase(s, "active")) return .active;
-        if (std.ascii.eqlIgnoreCase(s, "focus")) return .focus;
-        if (std.ascii.eqlIgnoreCase(s, "target")) return .target;
-        if (std.ascii.eqlIgnoreCase(s, "after")) return .after;
-        if (std.ascii.eqlIgnoreCase(s, "backdrop")) return .backdrop;
-        if (std.ascii.eqlIgnoreCase(s, "before")) return .before;
-        if (std.ascii.eqlIgnoreCase(s, "cue")) return .cue;
-        if (std.ascii.eqlIgnoreCase(s, "first-letter")) return .first_letter;
-        if (std.ascii.eqlIgnoreCase(s, "first-line")) return .first_line;
-        if (std.ascii.eqlIgnoreCase(s, "grammar-error")) return .grammar_error;
-        if (std.ascii.eqlIgnoreCase(s, "marker")) return .marker;
-        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;
+        const longest_selector = "nth-last-of-type";
+        if (s.len > longest_selector.len) {
+            return Error.InvalidPseudoClass;
+        }
+
+        var buf: [longest_selector.len]u8 = undefined;
+        const selector = std.ascii.lowerString(&buf, s);
+
+        switch (selector.len) {
+            3 => switch (@as(u24, @bitCast(selector[0..3].*))) {
+                asUint(u24, "cue") => return .cue,
+                asUint(u24, "has") => return .has,
+                asUint(u24, "not") => return .not,
+                else => {},
+            },
+            4 => switch (@as(u32, @bitCast(selector[0..4].*))) {
+                asUint(u32, "lang") => return .lang,
+                asUint(u32, "link") => return .link,
+                asUint(u32, "root") => return .root,
+                else => {},
+            },
+            5 => switch (@as(u40, @bitCast(selector[0..5].*))) {
+                asUint(u40, "after") => return .after,
+                asUint(u40, "empty") => return .empty,
+                asUint(u40, "focus") => return .focus,
+                asUint(u40, "hover") => return .hover,
+                asUint(u40, "input") => return .input,
+                asUint(u40, "modal") => return .modal,
+                else => {},
+            },
+            6 => switch (@as(u48, @bitCast(selector[0..6].*))) {
+                asUint(u48, "active") => return .active,
+                asUint(u48, "before") => return .before,
+                asUint(u48, "marker") => return .marker,
+                asUint(u48, "target") => return .target,
+                else => {},
+            },
+            7 => switch (@as(u56, @bitCast(selector[0..7].*))) {
+                asUint(u56, "checked") => return .checked,
+                asUint(u56, "enabled") => return .enabled,
+                asUint(u56, "matches") => return .matches,
+                asUint(u56, "visited") => return .visited,
+                asUint(u56, "visible") => return .visible,
+                else => {},
+            },
+            8 => switch (@as(u64, @bitCast(selector[0..8].*))) {
+                asUint(u64, "backdrop") => return .backdrop,
+                asUint(u64, "contains") => return .contains,
+                asUint(u64, "disabled") => return .disabled,
+                asUint(u64, "haschild") => return .haschild,
+                else => {},
+            },
+            9 => switch (@as(u72, @bitCast(selector[0..9].*))) {
+                asUint(u72, "nth-child") => return .nth_child,
+                asUint(u72, "selection") => return .selection,
+                else => {},
+            },
+            10 => switch (@as(u80, @bitCast(selector[0..10].*))) {
+                asUint(u80, "first-line") => return .first_line,
+                asUint(u80, "last-child") => return .last_child,
+                asUint(u80, "matchesown") => return .matchesown,
+                asUint(u80, "only-child") => return .only_child,
+                else => {},
+            },
+            11 => switch (@as(u88, @bitCast(selector[0..11].*))) {
+                asUint(u88, "containsown") => return .containsown,
+                asUint(u88, "first-child") => return .first_child,
+                asUint(u88, "nth-of-type") => return .nth_of_type,
+                asUint(u88, "placeholder") => return .placeholder,
+                else => {},
+            },
+            12 => switch (@as(u96, @bitCast(selector[0..12].*))) {
+                asUint(u96, "first-letter") => return .first_letter,
+                asUint(u96, "last-of-type") => return .last_of_type,
+                asUint(u96, "only-of-type") => return .only_of_type,
+                asUint(u96, "popover-open") => return .popover_open,
+                else => {},
+            },
+            13 => switch (@as(u104, @bitCast(selector[0..13].*))) {
+                asUint(u104, "first-of-type") => return .first_of_type,
+                asUint(u104, "grammar-error") => return .grammar_error,
+                else => {},
+            },
+            14 => switch (@as(u112, @bitCast(selector[0..14].*))) {
+                asUint(u112, "nth-last-child") => return .nth_last_child,
+                asUint(u112, "spelling-error") => return .spelling_error,
+                else => {},
+            },
+            16 => switch (@as(u128, @bitCast(selector[0..16].*))) {
+                asUint(u128, "nth-last-of-type") => return .nth_last_of_type,
+                else => {},
+            },
+            else => {},
+        }
         return Error.InvalidPseudoClass;
     }
 };
 
+fn asUint(comptime T: type, comptime string: []const u8) T {
+    return @bitCast(string[0..string.len].*);
+}
+
 pub const Selector = union(enum) {
     pub const Error = error{
         UnknownCombinedCombinator,
@@ -509,6 +569,8 @@ pub const Selector = union(enum) {
                     // TODO implement using the url fragment.
                     // see https://developer.mozilla.org/en-US/docs/Web/CSS/:target
                     .target => return false,
+                    // visible always returns true.
+                    .visible => return true,
 
                     // all others pseudo class are handled by specialized
                     // pseudo_class_X selectors.

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

@@ -0,0 +1,42 @@
+// 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 CSSStyleSheet = @import("css_stylesheet.zig").CSSStyleSheet;
+
+pub const Interfaces = .{
+    CSSRule,
+    CSSImportRule,
+};
+
+// 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,
+};
+
+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/dom/Animation.zig

@@ -0,0 +1,126 @@
+// 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 Page = @import("../page.zig").Page;
+const JsObject = @import("../env.zig").JsObject;
+const Promise = @import("../env.zig").Promise;
+const PromiseResolver = @import("../env.zig").PromiseResolver;
+
+const Animation = @This();
+
+effect: ?JsObject,
+timeline: ?JsObject,
+ready_resolver: ?PromiseResolver,
+finished_resolver: ?PromiseResolver,
+
+pub fn constructor(effect: ?JsObject, timeline: ?JsObject) !Animation {
+    return .{
+        .effect = if (effect) |eo| try eo.persist() else null,
+        .timeline = if (timeline) |to| try to.persist() else null,
+        .ready_resolver = null,
+        .finished_resolver = null,
+    };
+}
+
+pub fn get_playState(self: *const Animation) []const u8 {
+    _ = self;
+    return "finished";
+}
+
+pub fn get_pending(self: *const Animation) bool {
+    _ = self;
+    return false;
+}
+
+pub fn get_finished(self: *Animation, page: *Page) !Promise {
+    if (self.finished_resolver == null) {
+        const resolver = page.main_context.createPromiseResolver();
+        try resolver.resolve(self);
+        self.finished_resolver = resolver;
+    }
+    return self.finished_resolver.?.promise();
+}
+
+pub fn get_ready(self: *Animation, page: *Page) !Promise {
+    // never resolved, because we're always "finished"
+    if (self.ready_resolver == null) {
+        const resolver = page.main_context.createPromiseResolver();
+        self.ready_resolver = resolver;
+    }
+    return self.ready_resolver.?.promise();
+}
+
+pub fn get_effect(self: *const Animation) ?JsObject {
+    return self.effect;
+}
+
+pub fn set_effect(self: *Animation, effect: JsObject) !void {
+    self.effect = try effect.persist();
+}
+
+pub fn get_timeline(self: *const Animation) ?JsObject {
+    return self.timeline;
+}
+
+pub fn set_timeline(self: *Animation, timeline: JsObject) !void {
+    self.timeline = try timeline.persist();
+}
+
+pub fn _play(self: *const Animation) void {
+    _ = self;
+}
+
+pub fn _pause(self: *const Animation) void {
+    _ = self;
+}
+
+pub fn _cancel(self: *const Animation) void {
+    _ = self;
+}
+
+pub fn _finish(self: *const Animation) void {
+    _ = self;
+}
+
+pub fn _reverse(self: *const Animation) void {
+    _ = self;
+}
+
+const testing = @import("../../testing.zig");
+test "Browser.Animation" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a1 = document.createElement('div').animate(null, null)", null },
+        .{ "a1.playState", "finished" },
+        .{ "let cb = [];", null },
+        .{ "a1.ready.then(() => { cb.push('ready') })", null },
+        .{
+            \\ a1.finished.then((x) => {
+            \\   cb.push('finished');
+            \\   cb.push(x == a1);
+            \\ })
+            ,
+            null,
+        },
+        .{ "cb", "finished,true" },
+    }, .{});
+}

src/browser/dom/MessageChannel.zig

@@ -0,0 +1,361 @@
+// 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 Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const EventHandler = @import("../events/event.zig").EventHandler;
+
+const JsObject = Env.JsObject;
+const Function = Env.Function;
+const Allocator = std.mem.Allocator;
+
+const MAX_QUEUE_SIZE = 10;
+
+pub const Interfaces = .{ MessageChannel, MessagePort };
+
+const MessageChannel = @This();
+
+port1: *MessagePort,
+port2: *MessagePort,
+
+pub fn constructor(page: *Page) !MessageChannel {
+    // Why do we allocate this rather than storing directly in the struct?
+    // https://github.com/lightpanda-io/project/discussions/165
+    const port1 = try page.arena.create(MessagePort);
+    const port2 = try page.arena.create(MessagePort);
+    port1.* = .{
+        .pair = port2,
+    };
+    port2.* = .{
+        .pair = port1,
+    };
+
+    return .{
+        .port1 = port1,
+        .port2 = port2,
+    };
+}
+
+pub fn get_port1(self: *const MessageChannel) *MessagePort {
+    return self.port1;
+}
+
+pub fn get_port2(self: *const MessageChannel) *MessagePort {
+    return self.port2;
+}
+
+pub const MessagePort = struct {
+    pub const prototype = *EventTarget;
+
+    proto: parser.EventTargetTBase = .{ .internal_target_type = .message_port },
+
+    pair: *MessagePort,
+    closed: bool = false,
+    started: bool = false,
+    onmessage_cbk: ?Function = null,
+    onmessageerror_cbk: ?Function = null,
+    // This is the queue of messages to dispatch to THIS MessagePort when the
+    // MessagePort is started.
+    queue: std.ArrayListUnmanaged(JsObject) = .empty,
+
+    pub const PostMessageOption = union(enum) {
+        transfer: JsObject,
+        options: Opts,
+
+        pub const Opts = struct {
+            transfer: JsObject,
+        };
+    };
+
+    pub fn _postMessage(self: *MessagePort, obj: JsObject, opts_: ?PostMessageOption, page: *Page) !void {
+        if (self.closed) {
+            return;
+        }
+
+        if (opts_ != null) {
+            log.warn(.web_api, "not implemented", .{ .feature = "MessagePort postMessage options" });
+            return error.NotImplemented;
+        }
+
+        try self.pair.dispatchOrQueue(obj, page.arena);
+    }
+
+    // Start impacts the ability to receive a message.
+    // Given pair1 (started) and pair2 (not started), then:
+    //    pair2.postMessage('x'); //will be dispatched to pair1.onmessage
+    //    pair1.postMessage('x'); // will be queued until pair2 is started
+    pub fn _start(self: *MessagePort) !void {
+        if (self.started) {
+            return;
+        }
+        self.started = true;
+        for (self.queue.items) |data| {
+            try self.dispatch(data);
+        }
+        // we'll never use this queue again, but it's allocated with an arena
+        // we don't even need to clear it, but it seems a bit safer to do at
+        // least that
+        self.queue.clearRetainingCapacity();
+    }
+
+    // Closing seems to stop both the publishing and receiving of messages,
+    // effectively rendering the channel useless. It cannot be reversed.
+    pub fn _close(self: *MessagePort) void {
+        self.closed = true;
+        self.pair.closed = true;
+    }
+
+    pub fn get_onmessage(self: *MessagePort) ?Function {
+        return self.onmessage_cbk;
+    }
+    pub fn get_onmessageerror(self: *MessagePort) ?Function {
+        return self.onmessageerror_cbk;
+    }
+
+    pub fn set_onmessage(self: *MessagePort, listener: EventHandler.Listener, page: *Page) !void {
+        if (self.onmessage_cbk) |cbk| {
+            try self.unregister("message", cbk.id);
+        }
+        self.onmessage_cbk = try self.register(page.arena, "message", listener);
+
+        // When onmessage is set directly, then it's like start() was called.
+        // If addEventListener('message') is used, the app has to call start()
+        // explicitly.
+        try self._start();
+    }
+
+    pub fn set_onmessageerror(self: *MessagePort, listener: EventHandler.Listener, page: *Page) !void {
+        if (self.onmessageerror_cbk) |cbk| {
+            try self.unregister("messageerror", cbk.id);
+        }
+        self.onmessageerror_cbk = try self.register(page.arena, "messageerror", listener);
+    }
+
+    // called from our pair. If port1.postMessage("x") is called, then this
+    // will be called on port2.
+    fn dispatchOrQueue(self: *MessagePort, obj: JsObject, arena: Allocator) !void {
+        // our pair should have checked this already
+        std.debug.assert(self.closed == false);
+
+        if (self.started) {
+            return self.dispatch(try obj.persist());
+        }
+
+        if (self.queue.items.len > MAX_QUEUE_SIZE) {
+            // This isn't part of the spec, but not putting a limit is reckless
+            return error.MessageQueueLimit;
+        }
+        return self.queue.append(arena, try obj.persist());
+    }
+
+    fn dispatch(self: *MessagePort, obj: JsObject) !void {
+        // obj is already persisted, don't use `MessageEvent.constructor`, but
+        // go directly to `init`, which assumes persisted objects.
+        var evt = try MessageEvent.init(.{ .data = obj });
+        _ = try parser.eventTargetDispatchEvent(
+            parser.toEventTarget(MessagePort, self),
+            @as(*parser.Event, @ptrCast(&evt)),
+        );
+    }
+
+    fn register(
+        self: *MessagePort,
+        alloc: Allocator,
+        typ: []const u8,
+        listener: EventHandler.Listener,
+    ) !?Function {
+        const target = @as(*parser.EventTarget, @ptrCast(self));
+        const eh = (try EventHandler.register(alloc, target, typ, listener, null)) orelse unreachable;
+        return eh.callback;
+    }
+
+    fn unregister(self: *MessagePort, typ: []const u8, cbk_id: usize) !void {
+        const et = @as(*parser.EventTarget, @ptrCast(self));
+        const lst = try parser.eventTargetHasListener(et, typ, false, cbk_id);
+        if (lst == null) {
+            return;
+        }
+        try parser.eventTargetRemoveEventListener(et, typ, lst.?, false);
+    }
+};
+
+pub const MessageEvent = struct {
+    const Event = @import("../events/event.zig").Event;
+    const DOMException = @import("exceptions.zig").DOMException;
+
+    pub const prototype = *Event;
+    pub const Exception = DOMException;
+    pub const union_make_copy = true;
+
+    proto: parser.Event,
+    data: ?JsObject,
+
+    // You would think if port1 sends to port2, the source would be port2
+    // (which is how I read the documentation), but it appears to always be
+    // null. It can always be set explicitly via the constructor;
+    source: ?JsObject,
+
+    origin: []const u8,
+
+    // This is used for Server-Sent events. Appears to always be an empty
+    // string for MessagePort messages.
+    last_event_id: []const u8,
+
+    // This might be related to the "transfer" option of postMessage which
+    // we don't yet support. For "normal" message, it's always an empty array.
+    // Though it could be set explicitly via the constructor
+    ports: []*MessagePort,
+
+    const Options = struct {
+        data: ?JsObject = null,
+        source: ?JsObject = null,
+        origin: []const u8 = "",
+        lastEventId: []const u8 = "",
+        ports: []*MessagePort = &.{},
+    };
+
+    pub fn constructor(opts: Options) !MessageEvent {
+        return init(.{
+            .data = if (opts.data) |obj| try obj.persist() else null,
+            .source = if (opts.source) |obj| try obj.persist() else null,
+            .ports = opts.ports,
+            .origin = opts.origin,
+            .lastEventId = opts.lastEventId,
+        });
+    }
+
+    // This is like "constructor", but it assumes JsObjects have already been
+    // persisted. Necessary because this `new MessageEvent()` can be called
+    // directly from JS OR from a port.postMessage. In the latter case, data
+    // may have already been persisted (as it might need to be queued);
+    fn init(opts: Options) !MessageEvent {
+        const event = try parser.eventCreate();
+        defer parser.eventDestroy(event);
+        try parser.eventInit(event, "message", .{});
+        try parser.eventSetInternalType(event, .message_event);
+
+        return .{
+            .proto = event.*,
+            .data = opts.data,
+            .source = opts.source,
+            .ports = opts.ports,
+            .origin = opts.origin,
+            .last_event_id = opts.lastEventId,
+        };
+    }
+
+    pub fn get_data(self: *const MessageEvent) !?JsObject {
+        return self.data;
+    }
+
+    pub fn get_origin(self: *const MessageEvent) []const u8 {
+        return self.origin;
+    }
+
+    pub fn get_source(self: *const MessageEvent) ?JsObject {
+        return self.source;
+    }
+
+    pub fn get_ports(self: *const MessageEvent) []*MessagePort {
+        return self.ports;
+    }
+
+    pub fn get_lastEventId(self: *const MessageEvent) []const u8 {
+        return self.last_event_id;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.MessageChannel" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .html = "",
+    });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const mc1 = new MessageChannel()", null },
+        .{ "mc1.port1 == mc1.port1", "true" },
+        .{ "mc1.port2 == mc1.port2", "true" },
+        .{ "mc1.port1 != mc1.port2", "true" },
+        .{ "mc1.port1.postMessage('msg1');", "undefined" },
+        .{
+            \\ let message = null;
+            \\ let target = null;
+            \\ let currentTarget = null;
+            \\ mc1.port2.onmessage = (e) => {
+            \\   message = e.data;
+            \\   target = e.target;
+            \\   currentTarget = e.currentTarget;
+            \\ };
+            ,
+            null,
+        },
+        //  as soon as onmessage is called, queued messages are delivered
+        .{ "message", "msg1" },
+        .{ "target == mc1.port2", "true" },
+        .{ "currentTarget == mc1.port2", "true" },
+
+        .{ "mc1.port1.postMessage('msg2');", "undefined" },
+        .{ "message", "msg2" },
+        .{ "target == mc1.port2", "true" },
+        .{ "currentTarget == mc1.port2", "true" },
+
+        .{ "message = null", null },
+        .{ "mc1.port1.close();", null },
+        .{ "mc1.port1.postMessage('msg3');", "undefined" },
+        .{ "message", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const mc2 = new MessageChannel()", null },
+        .{ "mc2.port2.postMessage('msg1');", "undefined" },
+        .{ "mc2.port1.postMessage('msg2');", "undefined" },
+        .{
+            \\ let message1 = null;
+            \\ mc2.port1.addEventListener('message', (e) => {
+            \\   message1 = e.data;
+            \\ });
+            ,
+            null,
+        },
+        .{
+            \\ let message2 = null;
+            \\ mc2.port2.addEventListener('message', (e) => {
+            \\   message2 = e.data;
+            \\ });
+            ,
+            null,
+        },
+        .{ "message1", "null" },
+        .{ "message2", "null" },
+        .{ "mc2.port2.start()", null },
+
+        .{ "message1", "null" },
+        .{ "message2", "msg2" },
+        .{ "message2 = null", null },
+
+        .{ "mc2.port1.start()", null },
+        .{ "message1", "msg1" },
+        .{ "message2", "null" },
+    }, .{});
+}

src/browser/dom/attribute.zig

@@ -15,7 +15,6 @@
 //
 // 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 Node = @import("node.zig").Node;
@@ -47,7 +46,14 @@ pub const Attr = struct {
     }
 
     pub fn set_value(self: *parser.Attribute, v: []const u8) !?[]const u8 {
-        try parser.attributeSetValue(self, v);
+        if (try parser.attributeGetOwnerElement(self)) |el| {
+            // if possible, go through the element, as that triggers a
+            // DOMAttrModified event (which MutationObserver cares about)
+            const name = try parser.attributeGetName(self);
+            try parser.elementSetAttribute(el, name, v);
+        } else {
+            try parser.attributeSetValue(self, v);
+        }
         return v;
     }
 

src/browser/dom/character_data.zig

@@ -101,7 +101,7 @@ pub const CharacterData = struct {
     // netsurf's CharacterData (text, comment) doesn't implement the
     // dom_node_get_attributes and thus will crash if we try to call nodeIsEqualNode.
     pub fn _isEqualNode(self: *parser.CharacterData, other_node: *parser.Node) !bool {
-        if (try parser.nodeType(@ptrCast(self)) != try parser.nodeType(other_node)) {
+        if (try parser.nodeType(@alignCast(@ptrCast(self))) != try parser.nodeType(other_node)) {
             return false;
         }
 

src/browser/dom/comment.zig

@@ -20,7 +20,7 @@ const parser = @import("../netsurf.zig");
 
 const CharacterData = @import("character_data.zig").CharacterData;
 
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 // https://dom.spec.whatwg.org/#interface-comment
 pub const Comment = struct {
@@ -28,9 +28,9 @@ pub const Comment = struct {
     pub const prototype = *CharacterData;
     pub const subtype = .node;
 
-    pub fn constructor(data: ?[]const u8, state: *const SessionState) !*parser.Comment {
+    pub fn constructor(data: ?[]const u8, page: *const Page) !*parser.Comment {
         return parser.documentCreateComment(
-            parser.documentHTMLToDocument(state.document.?),
+            parser.documentHTMLToDocument(page.window.document),
             data orelse "",
         );
     }

src/browser/dom/document.zig

@@ -18,8 +18,9 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const Node = @import("node.zig").Node;
 const NodeList = @import("nodelist.zig").NodeList;
@@ -30,6 +31,12 @@ const css = @import("css.zig");
 
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
+const TreeWalker = @import("tree_walker.zig").TreeWalker;
+const CSSStyleSheet = @import("../cssom/css_stylesheet.zig").CSSStyleSheet;
+const NodeIterator = @import("node_iterator.zig").NodeIterator;
+const Range = @import("range.zig").Range;
+
+const Env = @import("../env.zig").Env;
 
 const DOMImplementation = @import("implementation.zig").DOMImplementation;
 
@@ -39,14 +46,14 @@ pub const Document = struct {
     pub const prototype = *Node;
     pub const subtype = .node;
 
-    pub fn constructor(state: *const SessionState) !*parser.DocumentHTML {
+    pub fn constructor(page: *const Page) !*parser.DocumentHTML {
         const doc = try parser.documentCreateDocument(
-            try parser.documentHTMLGetTitle(state.document.?),
+            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(state.document.?);
+        const ccur = parser.documentHTMLToDocument(page.window.document);
         try parser.documentSetDocumentURI(ddoc, try parser.documentGetDocumentURI(ccur));
         try parser.documentSetInputEncoding(ddoc, try parser.documentGetInputEncoding(ccur));
 
@@ -118,8 +125,10 @@ pub const Document = struct {
     }
 
     pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
-        const e = try parser.documentCreateElement(self, tag_name);
-        return try Element.toInterface(e);
+        // The element’s namespace is the HTML namespace when document is an HTML document
+        // https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0
+        const e = try parser.documentCreateElementNS(self, "http://www.w3.org/1999/xhtml", tag_name);
+        return Element.toInterface(e);
     }
 
     pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {
@@ -138,18 +147,17 @@ pub const Document = struct {
     pub fn _getElementsByTagName(
         self: *parser.Document,
         tag_name: []const u8,
-        state: *SessionState,
+        page: *Page,
     ) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(state.arena, parser.documentToNode(self), tag_name, true);
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentToNode(self), tag_name, true);
     }
 
     pub fn _getElementsByClassName(
         self: *parser.Document,
         classNames: []const u8,
-        state: *SessionState,
+        page: *Page,
     ) !collection.HTMLCollection {
-        const allocator = state.arena;
-        return try collection.HTMLCollectionByClassName(allocator, parser.documentToNode(self), classNames, true);
+        return try collection.HTMLCollectionByClassName(page.arena, parser.documentToNode(self), classNames, true);
     }
 
     pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
@@ -211,20 +219,18 @@ pub const Document = struct {
         return 1;
     }
 
-    pub fn _querySelector(self: *parser.Document, selector: []const u8, state: *SessionState) !?ElementUnion {
+    pub fn _querySelector(self: *parser.Document, selector: []const u8, page: *Page) !?ElementUnion {
         if (selector.len == 0) return null;
 
-        const allocator = state.arena;
-        const n = try css.querySelector(allocator, parser.documentToNode(self), selector);
+        const n = try css.querySelector(page.call_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, state: *SessionState) !NodeList {
-        const allocator = state.arena;
-        return css.querySelectorAll(allocator, parser.documentToNode(self), selector);
+    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 {
@@ -238,11 +244,58 @@ pub const Document = struct {
     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 _createNodeIterator(_: *parser.Document, root: *parser.Node, what_to_show: ?u32, filter: ?NodeIterator.NodeIteratorOpts) !NodeIterator {
+        return try NodeIterator.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);
+    }
+
+    pub fn _createRange(_: *parser.Document, page: *Page) Range {
+        return Range.constructor(page);
+    }
+
+    // TODO: dummy implementation
+    pub fn get_styleSheets(_: *parser.Document) []CSSStyleSheet {
+        return &.{};
+    }
 };
 
 const testing = @import("../../testing.zig");
 test "Browser.DOM.Document" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .url = "about:blank",
+    });
     defer runner.deinit();
 
     try runner.testCases(&.{
@@ -404,6 +457,19 @@ test "Browser.DOM.Document" {
             ,
             "1",
         },
+
+        .{ "document.querySelectorAll('.\\\\:popover-open').length", "0" },
+        .{ "document.querySelectorAll('.foo\\\\:bar').length", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.activeElement === document.body", "true" },
+        .{ "document.getElementById('link').focus()", "undefined" },
+        .{ "document.activeElement === document.getElementById('link')", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.styleSheets.length", "0" },
     }, .{});
 
     // this test breaks the doc structure, keep it at the end of the test

src/browser/dom/document_fragment.zig

@@ -16,8 +16,13 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+const css = @import("css.zig");
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
+const NodeList = @import("nodelist.zig").NodeList;
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+const collection = @import("html_collection.zig");
 
 const Node = @import("node.zig").Node;
 
@@ -27,9 +32,9 @@ pub const DocumentFragment = struct {
     pub const prototype = *Node;
     pub const subtype = .node;
 
-    pub fn constructor(state: *const SessionState) !*parser.DocumentFragment {
+    pub fn constructor(page: *const Page) !*parser.DocumentFragment {
         return parser.documentCreateDocumentFragment(
-            parser.documentHTMLToDocument(state.document.?),
+            parser.documentHTMLToDocument(page.window.document),
         );
     }
 
@@ -53,6 +58,29 @@ pub const DocumentFragment = struct {
     pub fn _replaceChildren(self: *parser.DocumentFragment, nodes: []const Node.NodeOrText) !void {
         return Node.replaceChildren(parser.documentFragmentToNode(self), nodes);
     }
+
+    pub fn _querySelector(self: *parser.DocumentFragment, selector: []const u8, page: *Page) !?ElementUnion {
+        if (selector.len == 0) return null;
+
+        const n = try css.querySelector(page.call_arena, parser.documentFragmentToNode(self), selector);
+
+        if (n == null) return null;
+
+        return try Element.toInterface(parser.nodeToElement(n.?));
+    }
+
+    pub fn _querySelectorAll(self: *parser.DocumentFragment, selector: []const u8, page: *Page) !NodeList {
+        return css.querySelectorAll(page.arena, parser.documentFragmentToNode(self), selector);
+    }
+
+    pub fn get_childElementCount(self: *parser.DocumentFragment) !u32 {
+        var children = try get_children(self);
+        return children.get_length();
+    }
+
+    pub fn get_children(self: *parser.DocumentFragment) !collection.HTMLCollection {
+        return collection.HTMLCollectionChildren(parser.documentFragmentToNode(self), false);
+    }
 };
 
 const testing = @import("../../testing.zig");
@@ -71,4 +99,26 @@ test "Browser.DOM.DocumentFragment" {
         .{ "dc1.isEqualNode(dc1)", "true" },
         .{ "dc1.isEqualNode(dc2)", "true" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let f = document.createDocumentFragment()", null },
+        .{ "let d = document.createElement('div');", null },
+        .{ "d.childElementCount", "0" },
+
+        .{ "d.id = 'x';", null },
+        .{ "document.getElementById('x') == null;", "true" },
+        .{ "f.append(d);", null },
+        .{ "f.childElementCount", "1" },
+        .{ "f.children[0].id", "x" },
+        .{ "document.getElementById('x') == null;", "true" },
+
+        .{ "document.getElementsByTagName('body')[0].append(f.cloneNode(true));", null },
+        .{ "document.getElementById('x') != null;", "true" },
+
+        .{ "document.querySelector('.hello')", "null" },
+        .{ "document.querySelectorAll('.hello').length", "0" },
+
+        .{ "document.querySelector('#x').id", "x" },
+        .{ "document.querySelectorAll('#x')[0].id", "x" },
+    }, .{});
 }

src/browser/dom/dom.zig

@@ -23,18 +23,35 @@ const NamedNodeMap = @import("namednodemap.zig").NamedNodeMap;
 const DOMTokenList = @import("token_list.zig");
 const NodeList = @import("nodelist.zig");
 const Node = @import("node.zig");
+const ResizeObserver = @import("resize_observer.zig");
 const MutationObserver = @import("mutation_observer.zig");
 const IntersectionObserver = @import("intersection_observer.zig");
+const DOMParser = @import("dom_parser.zig").DOMParser;
+const TreeWalker = @import("tree_walker.zig").TreeWalker;
+const NodeIterator = @import("node_iterator.zig").NodeIterator;
+const NodeFilter = @import("node_filter.zig").NodeFilter;
+const PerformanceObserver = @import("performance_observer.zig").PerformanceObserver;
 
 pub const Interfaces = .{
     DOMException,
     EventTarget,
     DOMImplementation,
     NamedNodeMap,
+    NamedNodeMap.Iterator,
     DOMTokenList.Interfaces,
     NodeList.Interfaces,
     Node.Node,
     Node.Interfaces,
+    ResizeObserver.Interfaces,
     MutationObserver.Interfaces,
     IntersectionObserver.Interfaces,
+    DOMParser,
+    TreeWalker,
+    NodeIterator,
+    NodeFilter,
+    @import("performance.zig").Interfaces,
+    PerformanceObserver,
+    @import("range.zig").Interfaces,
+    @import("Animation.zig"),
+    @import("MessageChannel.zig").Interfaces,
 };

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

@@ -19,19 +19,23 @@
 const std = @import("std");
 
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
-const collection = @import("html_collection.zig");
-const dump = @import("../dump.zig");
 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;
+const ShadowRoot = @import("../dom/shadow_root.zig").ShadowRoot;
 
-const log = std.log.scoped(.element);
+const Animation = @import("Animation.zig");
+const JsObject = @import("../env.zig").JsObject;
+
+pub const Union = @import("../html/elements.zig").Union;
 
 // WEB IDL https://dom.spec.whatwg.org/#element
 pub const Element = struct {
@@ -44,6 +48,10 @@ pub const Element = struct {
         y: f64,
         width: f64,
         height: f64,
+        bottom: f64,
+        right: f64,
+        top: f64,
+        left: f64,
     };
 
     pub fn toInterface(e: *parser.Element) !Union {
@@ -103,15 +111,15 @@ pub const Element = struct {
         return try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
     }
 
-    pub fn get_innerHTML(self: *parser.Element, state: *SessionState) ![]const u8 {
-        var buf = std.ArrayList(u8).init(state.arena);
-        try dump.writeChildren(parser.elementToNode(self), buf.writer());
+    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, state: *SessionState) ![]const u8 {
-        var buf = std.ArrayList(u8).init(state.arena);
-        try dump.writeNode(parser.elementToNode(self), buf.writer());
+    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;
     }
 
@@ -124,31 +132,55 @@ pub const Element = struct {
         // remove existing children
         try Node.removeChildren(node);
 
-        // get fragment body children
-        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;
+        // I'm not sure what the exact behavior is supposed to be. Initially,
+        // we were only copying the body of the document fragment. But it seems
+        // like head elements should be copied too. Specifically, some sites
+        // create script tags via innerHTML, which we need to capture.
+        // If you play with this in a browser, you should notice that the
+        // behavior is different depending on whether you're in a blank page
+        // or an actual document. In a blank page, something like:
+        //    x.innerHTML = '<script></script>';
+        // does _not_ create an empty script, but in a real page, it does. Weird.
+        const fragment_node = parser.documentFragmentToNode(fragment);
+        const html = try parser.nodeFirstChild(fragment_node) orelse return;
+        const head = try parser.nodeFirstChild(html) orelse return;
+        {
+            // First, copy some of the head element
+            const children = try parser.nodeGetChildNodes(head);
+            const ln = try parser.nodeListLength(children);
+            for (0..ln) |_| {
+                // always index 0, because nodeAppendChild moves the node out of
+                // the nodeList and into the new tree
+                const child = try parser.nodeListItem(children, 0) orelse continue;
+                _ = try parser.nodeAppendChild(node, child);
+            }
+        }
 
-        // append children to the node
-        const ln = try parser.nodeListLength(children);
-        var i: u32 = 0;
-        while (i < ln) {
-            defer i += 1;
-            const child = try parser.nodeListItem(children, i) orelse continue;
-            _ = try parser.nodeAppendChild(node, child);
+        {
+            const body = try parser.nodeNextSibling(head) orelse return;
+            const children = try parser.nodeGetChildNodes(body);
+            const ln = try parser.nodeListLength(children);
+            for (0..ln) |_| {
+                // always index 0, because nodeAppendChild moves the node out of
+                // the nodeList and into the new tree
+                const child = 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, state: *SessionState) !?*parser.Element {
+    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(state.call_arena, selector, .{});
+        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("closest: is not an element: {s}", .{try current.tag()});
+                    log.err(.browser, "closest invalid type", .{ .type = try current.tag() });
                     return null;
                 }
                 return parser.nodeToElement(current.node);
@@ -157,8 +189,14 @@ pub const Element = struct {
         }
     }
 
+    // don't use parser.nodeHasAttributes(...) because that returns true/false
+    // based on the type, e.g. a node never as attributes, an element always has
+    // attributes. But, Element.hasAttributes is supposed to return true only
+    // if the element has at least 1 attribute.
     pub fn _hasAttributes(self: *parser.Element) !bool {
-        return try parser.nodeHasAttributes(parser.elementToNode(self));
+        // an element _must_ have at least an empty attribute
+        const node_map = try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
+        return try parser.namedNodeMapGetLength(node_map) > 0;
     }
 
     pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
@@ -250,10 +288,10 @@ pub const Element = struct {
     pub fn _getElementsByTagName(
         self: *parser.Element,
         tag_name: []const u8,
-        state: *SessionState,
+        page: *Page,
     ) !collection.HTMLCollection {
         return try collection.HTMLCollectionByTagName(
-            state.arena,
+            page.arena,
             parser.elementToNode(self),
             tag_name,
             false,
@@ -263,10 +301,10 @@ pub const Element = struct {
     pub fn _getElementsByClassName(
         self: *parser.Element,
         classNames: []const u8,
-        state: *SessionState,
+        page: *Page,
     ) !collection.HTMLCollection {
         return try collection.HTMLCollectionByClassName(
-            state.arena,
+            page.arena,
             parser.elementToNode(self),
             classNames,
             false,
@@ -329,18 +367,18 @@ pub const Element = struct {
         }
     }
 
-    pub fn _querySelector(self: *parser.Element, selector: []const u8, state: *SessionState) !?Union {
+    pub fn _querySelector(self: *parser.Element, selector: []const u8, page: *Page) !?Union {
         if (selector.len == 0) return null;
 
-        const n = try css.querySelector(state.arena, parser.elementToNode(self), selector);
+        const n = try css.querySelector(page.call_arena, parser.elementToNode(self), selector);
 
         if (n == null) return null;
 
         return try toInterface(parser.nodeToElement(n.?));
     }
 
-    pub fn _querySelectorAll(self: *parser.Element, selector: []const u8, state: *SessionState) !NodeList {
-        return css.querySelectorAll(state.arena, parser.elementToNode(self), selector);
+    pub fn _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 {
@@ -365,34 +403,121 @@ pub const Element = struct {
         return Node.replaceChildren(parser.elementToNode(self), nodes);
     }
 
-    pub fn _getBoundingClientRect(self: *parser.Element, state: *SessionState) !DOMRect {
-        return state.renderer.getRect(self);
+    // 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 just always return the element's rect.
-    pub fn _getClientRects(self: *parser.Element, state: *SessionState) ![1]DOMRect {
-        return [_]DOMRect{try state.renderer.getRect(self)};
+    // Returns a collection of DOMRect objects that indicate the bounding rectangles for each CSS border box in a client.
+    // We do not render so 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, state: *SessionState) u32 {
-        return state.renderer.width();
+    pub fn get_clientWidth(_: *parser.Element, page: *Page) u32 {
+        return page.renderer.width();
     }
 
-    pub fn get_clientHeight(_: *parser.Element, state: *SessionState) u32 {
-        return state.renderer.height();
+    pub fn get_clientHeight(_: *parser.Element, page: *Page) u32 {
+        return page.renderer.height();
     }
 
-    pub fn _matches(self: *parser.Element, selectors: []const u8, state: *SessionState) !bool {
+    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(state.call_arena, selectors, .{});
+        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;
+    }
+
+    const AttachShadowOpts = struct {
+        mode: []const u8, // must be specified
+    };
+    pub fn _attachShadow(self: *parser.Element, opts: AttachShadowOpts, page: *Page) !*ShadowRoot {
+        const mode = std.meta.stringToEnum(ShadowRoot.Mode, opts.mode) orelse return error.InvalidArgument;
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.shadow_root) |sr| {
+            if (mode != sr.mode) {
+                // this is the behavior per the spec
+                return error.NotSupportedError;
+            }
+
+            try Node.removeChildren(@alignCast(@ptrCast(sr.proto)));
+            return sr;
+        }
+
+        // Not sure what to do if there is no owner document
+        const doc = try parser.nodeOwnerDocument(@ptrCast(self)) orelse return error.InvalidArgument;
+        const fragment = try parser.documentCreateDocumentFragment(doc);
+        const sr = try page.arena.create(ShadowRoot);
+        sr.* = .{
+            .host = self,
+            .mode = mode,
+            .proto = fragment,
+        };
+        state.shadow_root = sr;
+        return sr;
+    }
+
+    pub fn get_shadowRoot(self: *parser.Element, page: *Page) ?*ShadowRoot {
+        const state = page.getNodeState(@alignCast(@ptrCast(self))) orelse return null;
+        const sr = state.shadow_root orelse return null;
+        if (sr.mode == .closed) {
+            return null;
+        }
+        return sr;
+    }
+
+    pub fn _animate(self: *parser.Element, effect: JsObject, opts: JsObject) !Animation {
+        _ = self;
+        _ = opts;
+        return Animation.constructor(effect, null);
+    }
+
+    pub fn _remove(self: *parser.Element) !void {
+        // TODO: This hasn't been tested to make sure all references to this
+        // node are properly updated. A lot of libdom is lazy and will look
+        // for related elements JIT by walking the tree, but there could be
+        // cases in libdom or the Zig WebAPI where this reference is kept
+        const as_node: *parser.Node = @ptrCast(self);
+        const parent = try parser.nodeParentNode(as_node) orelse return;
+        _ = try Node._removeChild(parent, as_node);
+    }
 };
 
 // Tests
@@ -445,8 +570,17 @@ test "Browser.DOM.Element" {
         .{ "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" },
@@ -568,6 +702,26 @@ test "Browser.DOM.Element" {
 
         .{ "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(&.{
@@ -608,4 +762,28 @@ test "Browser.DOM.Element" {
         .{ "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" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.createElement('a').hasAttributes()", "false" },
+        .{ "var fc; (fc = document.createElement('div')).innerHTML = '<script><\\/script>'", null },
+        .{ "fc.outerHTML", "<div><script></script></div>" },
+
+        .{ "fc; (fc = document.createElement('div')).innerHTML = '<script><\\/script><p>hello</p>'", null },
+        .{ "fc.outerHTML", "<div><script></script><p>hello</p></div>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const rm = document.createElement('div')", null },
+        .{ "rm.id = 'to-remove'", null },
+        .{ "document.getElementsByTagName('body')[0].appendChild(rm)", null },
+        .{ "document.getElementById('to-remove') != null", "true" },
+        .{ "rm.remove()", "undefined" },
+        .{ "document.getElementById('to-remove') != null", "false" },
+    }, .{});
 }

src/browser/dom/event_target.zig

@@ -16,104 +16,108 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+const std = @import("std");
 const Env = @import("../env.zig").Env;
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const EventHandler = @import("../events/event.zig").EventHandler;
 
 const DOMException = @import("exceptions.zig").DOMException;
-const Nod = @import("node.zig");
+const nod = @import("node.zig");
 
-// EventTarget interfaces
-pub const Union = Nod.Union;
+pub const Union = union(enum) {
+    node: nod.Union,
+    xhr: *@import("../xhr/xhr.zig").XMLHttpRequest,
+    plain: *parser.EventTarget,
+    message_port: *@import("MessageChannel.zig").MessagePort,
+};
 
 // EventTarget implementation
 pub const EventTarget = struct {
     pub const Self = parser.EventTarget;
     pub const Exception = DOMException;
 
-    pub fn toInterface(et: *parser.EventTarget) !Union {
-        // NOTE: for now we state that all EventTarget are Nodes
-        // TODO: handle other types (eg. Window)
-        return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .plain },
+
+    pub fn toInterface(et: *parser.EventTarget, page: *Page) !Union {
+        // libdom assumes that all event targets are libdom nodes. They are not.
+
+        switch (try parser.eventTargetInternalType(et)) {
+            .libdom_node => {
+                return .{ .node = try nod.Node.toInterface(@as(*parser.Node, @ptrCast(et))) };
+            },
+            .plain => return .{ .plain = et },
+            .abort_signal => {
+                // AbortSignal is a special case, it has its own internal type.
+                // We return it as a node, but we need to handle it differently.
+                return .{ .node = .{ .AbortSignal = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) } };
+            },
+            .window => {
+                // The window is a common non-node target, but it's easy to handle as its a singleton.
+                std.debug.assert(@intFromPtr(et) == @intFromPtr(&page.window.base));
+                return .{ .node = .{ .Window = &page.window } };
+            },
+            .xhr => {
+                const XMLHttpRequestEventTarget = @import("../xhr/event_target.zig").XMLHttpRequestEventTarget;
+                const base: *XMLHttpRequestEventTarget = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et)));
+                return .{ .xhr = @fieldParentPtr("proto", base) };
+            },
+            .message_port => {
+                return .{ .message_port = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
+            },
+            else => return error.MissingEventTargetType,
+        }
     }
 
     // JS funcs
     // --------
+    pub fn constructor(page: *Page) !*parser.EventTarget {
+        const et = try page.arena.create(EventTarget);
+        return @ptrCast(&et.base);
+    }
 
-    const AddEventListenerOpts = union(enum) {
+    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,
-            once: ?bool, // currently does nothing
-            passive: ?bool, // currently does nothing
-            signal: ?bool, // currently does nothing
         };
     };
 
-    pub fn _addEventListener(
-        self: *parser.EventTarget,
-        typ: []const u8,
-        cbk: Env.Callback,
-        opts_: ?AddEventListenerOpts,
-        state: *SessionState,
-    ) !void {
-        var capture = false;
-        if (opts_) |opts| {
-            switch (opts) {
-                .capture => |c| capture = c,
-                .opts => |o| {
-                    // Done this way so that, for common cases that _only_ set
-                    // capture, i.e. {captrue: true}, it works.
-                    // But for any case that sets any of the other flags, we
-                    // error. If we don't error, this function call would succeed
-                    // but the behavior might be wrong. At this point, it's
-                    // better to be explicit and error.
-                    if (o.once orelse false) return error.NotImplemented;
-                    if (o.signal orelse false) return error.NotImplemented;
-                    if (o.passive orelse false) return error.NotImplemented;
-                    capture = o.capture orelse false;
-                },
-            }
-        }
-
-        // check if event target has already this listener
-        const lst = try parser.eventTargetHasListener(
-            self,
-            typ,
-            capture,
-            cbk.id,
-        );
-        if (lst != null) {
-            return;
-        }
-
-        const eh = try EventHandler.init(state.arena, try cbk.withThis(self));
-
-        try parser.eventTargetAddEventListener(
-            self,
-            typ,
-            &eh.node,
-            capture,
-        );
-    }
-
     pub fn _removeEventListener(
         self: *parser.EventTarget,
         typ: []const u8,
-        cbk: Env.Callback,
-        capture: ?bool,
-        // TODO: hanle EventListenerOptions
-        // see #https://github.com/lightpanda-io/jsruntime-lib/issues/114
+        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 orelse false,
+            capture,
             cbk.id,
         );
         if (lst == null) {
@@ -125,17 +129,13 @@ pub const EventTarget = struct {
             self,
             typ,
             lst.?,
-            capture orelse false,
+            capture,
         );
     }
 
     pub fn _dispatchEvent(self: *parser.EventTarget, event: *parser.Event) !bool {
         return try parser.eventTargetDispatchEvent(self, event);
     }
-
-    pub fn deinit(self: *parser.EventTarget, state: *SessionState) void {
-        parser.eventTargetRemoveAllEventListeners(self, state.arena) catch unreachable;
-    }
 };
 
 const testing = @import("../../testing.zig");
@@ -143,6 +143,10 @@ test "Browser.DOM.EventTarget" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
     defer runner.deinit();
 
+    try runner.testCases(&.{
+        .{ "new EventTarget()", "[object EventTarget]" },
+    }, .{});
+
     try runner.testCases(&.{
         .{ "let content = document.getElementById('content')", "undefined" },
         .{ "let para = document.getElementById('para')", "undefined" },
@@ -248,4 +252,21 @@ test "Browser.DOM.EventTarget" {
         .{ "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

@@ -20,10 +20,11 @@ const std = @import("std");
 const allocPrint = std.fmt.allocPrint;
 
 const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
 
 // https://webidl.spec.whatwg.org/#idl-DOMException
 pub const DOMException = struct {
-    err: parser.DOMError,
+    err: ?parser.DOMError,
     str: []const u8,
 
     pub const ErrorSet = parser.DOMError;
@@ -55,6 +56,17 @@ pub const DOMException = struct {
     pub const _INVALID_NODE_TYPE_ERR = 24;
     pub const _DATA_CLONE_ERR = 25;
 
+    pub fn constructor(message_: ?[]const u8, name_: ?[]const u8, page: *const Page) !DOMException {
+        const message = message_ orelse "";
+        const err = if (name_) |n| error_from_str(n) else null;
+        const fixed_name = name(err);
+
+        if (message.len == 0) return .{ .err = err, .str = fixed_name };
+
+        const str = try allocPrint(page.arena, "{s}: {s}", .{ fixed_name, message });
+        return .{ .err = err, .str = str };
+    }
+
     // TODO: deinit
     pub fn init(alloc: std.mem.Allocator, err: anyerror, callerName: []const u8) !DOMException {
         const errCast = @as(parser.DOMError, @errorCast(err));
@@ -75,14 +87,52 @@ pub const DOMException = struct {
         return .{ .err = errCast, .str = str };
     }
 
-    fn name(err: parser.DOMError) []const u8 {
+    fn error_from_str(name_: []const u8) ?parser.DOMError {
+        // @speed: Consider length first, left as is for maintainability, awaiting switch on string support
+        if (std.mem.eql(u8, name_, "IndexSizeError")) return error.IndexSize;
+        if (std.mem.eql(u8, name_, "StringSizeError")) return error.StringSize;
+        if (std.mem.eql(u8, name_, "HierarchyRequestError")) return error.HierarchyRequest;
+        if (std.mem.eql(u8, name_, "WrongDocumentError")) return error.WrongDocument;
+        if (std.mem.eql(u8, name_, "InvalidCharacterError")) return error.InvalidCharacter;
+        if (std.mem.eql(u8, name_, "NoDataAllowedError")) return error.NoDataAllowed;
+        if (std.mem.eql(u8, name_, "NoModificationAllowedError")) return error.NoModificationAllowed;
+        if (std.mem.eql(u8, name_, "NotFoundError")) return error.NotFound;
+        if (std.mem.eql(u8, name_, "NotSupportedError")) return error.NotSupported;
+        if (std.mem.eql(u8, name_, "InuseAttributeError")) return error.InuseAttribute;
+        if (std.mem.eql(u8, name_, "InvalidStateError")) return error.InvalidState;
+        if (std.mem.eql(u8, name_, "SyntaxError")) return error.Syntax;
+        if (std.mem.eql(u8, name_, "InvalidModificationError")) return error.InvalidModification;
+        if (std.mem.eql(u8, name_, "NamespaceError")) return error.Namespace;
+        if (std.mem.eql(u8, name_, "InvalidAccessError")) return error.InvalidAccess;
+        if (std.mem.eql(u8, name_, "ValidationError")) return error.Validation;
+        if (std.mem.eql(u8, name_, "TypeMismatchError")) return error.TypeMismatch;
+        if (std.mem.eql(u8, name_, "SecurityError")) return error.Security;
+        if (std.mem.eql(u8, name_, "NetworkError")) return error.Network;
+        if (std.mem.eql(u8, name_, "AbortError")) return error.Abort;
+        if (std.mem.eql(u8, name_, "URLismatchError")) return error.URLismatch;
+        if (std.mem.eql(u8, name_, "QuotaExceededError")) return error.QuotaExceeded;
+        if (std.mem.eql(u8, name_, "TimeoutError")) return error.Timeout;
+        if (std.mem.eql(u8, name_, "InvalidNodeTypeError")) return error.InvalidNodeType;
+        if (std.mem.eql(u8, name_, "DataCloneError")) return error.DataClone;
+
+        // custom netsurf error
+        if (std.mem.eql(u8, name_, "UnspecifiedEventTypeError")) return error.UnspecifiedEventType;
+        if (std.mem.eql(u8, name_, "DispatchRequestError")) return error.DispatchRequest;
+        if (std.mem.eql(u8, name_, "NoMemoryError")) return error.NoMemory;
+        if (std.mem.eql(u8, name_, "AttributeWrongTypeError")) return error.AttributeWrongType;
+        return null;
+    }
+
+    fn name(err_: ?parser.DOMError) []const u8 {
+        const err = err_ orelse return "Error";
+
         return switch (err) {
             error.IndexSize => "IndexSizeError",
-            error.StringSize => "StringSizeError",
+            error.StringSize => "StringSizeError", // Legacy: DOMSTRING_SIZE_ERR
             error.HierarchyRequest => "HierarchyRequestError",
             error.WrongDocument => "WrongDocumentError",
             error.InvalidCharacter => "InvalidCharacterError",
-            error.NoDataAllowed => "NoDataAllowedError",
+            error.NoDataAllowed => "NoDataAllowedError", // Legacy: NO_DATA_ALLOWED_ERR
             error.NoModificationAllowed => "NoModificationAllowedError",
             error.NotFound => "NotFoundError",
             error.NotSupported => "NotSupportedError",
@@ -92,7 +142,7 @@ pub const DOMException = struct {
             error.InvalidModification => "InvalidModificationError",
             error.Namespace => "NamespaceError",
             error.InvalidAccess => "InvalidAccessError",
-            error.Validation => "ValidationError",
+            error.Validation => "ValidationError", // Legacy: VALIDATION_ERR
             error.TypeMismatch => "TypeMismatchError",
             error.Security => "SecurityError",
             error.Network => "NetworkError",
@@ -115,7 +165,8 @@ pub const DOMException = struct {
     // JS properties and methods
 
     pub fn get_code(self: *const DOMException) u8 {
-        return switch (self.err) {
+        const err = self.err orelse return 0;
+        return switch (err) {
             error.IndexSize => 1,
             error.StringSize => 2,
             error.HierarchyRequest => 3,
@@ -157,7 +208,8 @@ pub const DOMException = struct {
 
     pub fn get_message(self: *const DOMException) []const u8 {
         const errName = DOMException.name(self.err);
-        return self.str[errName.len + 2 ..];
+        if (self.str.len <= errName.len + 2) return "";
+        return self.str[errName.len + 2 ..]; // ! Requires str is formatted as "{name}: {message}"
     }
 
     pub fn _toString(self: *const DOMException) []const u8 {
@@ -188,4 +240,25 @@ test "Browser.DOM.Exception" {
         .{ "he instanceof DOMException", "true" },
         .{ "he instanceof Error", "true" },
     }, .{});
+
+    // Test DOMException constructor
+    try runner.testCases(&.{
+        .{ "let exc0 = new DOMException()", "undefined" },
+        .{ "exc0.name", "Error" },
+        .{ "exc0.code", "0" },
+        .{ "exc0.message", "" },
+        .{ "exc0.toString()", "Error" },
+
+        .{ "let exc1 = new DOMException('Sandwich malfunction')", "undefined" },
+        .{ "exc1.name", "Error" },
+        .{ "exc1.code", "0" },
+        .{ "exc1.message", "Sandwich malfunction" },
+        .{ "exc1.toString()", "Error: Sandwich malfunction" },
+
+        .{ "let exc2 = new DOMException('Caterpillar turned into a butterfly', 'NoModificationAllowedError')", "undefined" },
+        .{ "exc2.name", "NoModificationAllowedError" },
+        .{ "exc2.code", "7" },
+        .{ "exc2.message", "Caterpillar turned into a butterfly" },
+        .{ "exc2.toString()", "NoModificationAllowedError: Caterpillar turned into a butterfly" },
+    }, .{});
 }

src/browser/dom/html_collection.zig

@@ -432,7 +432,8 @@ pub const HTMLCollection = struct {
         for (0..len) |i| {
             const node = try self.item(@intCast(i)) orelse unreachable;
             const e = @as(*parser.Element, @ptrCast(node));
-            try js_this.setIndex(@intCast(i), e, .{});
+            const as_interface = try Element.toInterface(e);
+            try js_this.setIndex(@intCast(i), as_interface, .{});
 
             if (try item_name(e)) |name| {
                 // Even though an entry might have an empty id, the spec says
@@ -440,7 +441,7 @@ pub const HTMLCollection = struct {
                 if (name.len > 0) {
                     // Named fields should not be enumerable (it is defined with
                     // the LegacyUnenumerableNamedProperties flag.)
-                    try js_this.set(name, e, .{ .DONT_ENUM = true });
+                    try js_this.set(name, as_interface, .{ .DONT_ENUM = true });
                 }
             }
         }

src/browser/dom/implementation.zig

@@ -61,7 +61,10 @@ test "Browser.DOM.Implementation" {
     try runner.testCases(&.{
         .{ "let impl = document.implementation", "undefined" },
         .{ "impl.createHTMLDocument();", "[object HTMLDocument]" },
-        .{ "impl.createHTMLDocument('foo');", "[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

@@ -18,8 +18,9 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const Env = @import("../env.zig").Env;
 const Element = @import("element.zig").Element;
@@ -29,8 +30,6 @@ pub const Interfaces = .{
     IntersectionObserverEntry,
 };
 
-const log = std.log.scoped(.events);
-
 // This is supposed to listen to change between the root and observation targets.
 // However, our rendered stores everything as 1 pixel sized boxes in a long row that never changes.
 // As such, there are no changes to intersections between the root and any target.
@@ -40,19 +39,19 @@ const log = std.log.scoped(.events);
 // The returned Entries are phony, they always indicate full intersection.
 // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
 pub const IntersectionObserver = struct {
-    callback: Env.Callback,
+    page: *Page,
+    callback: Env.Function,
     options: IntersectionObserverOptions,
-    state: *SessionState,
 
     observed_entries: std.ArrayListUnmanaged(IntersectionObserverEntry),
 
     // new IntersectionObserver(callback)
     // new IntersectionObserver(callback, options) [not supported yet]
-    pub fn constructor(callback: Env.Callback, options_: ?IntersectionObserverOptions, state: *SessionState) !IntersectionObserver {
+    pub fn constructor(callback: Env.Function, options_: ?IntersectionObserverOptions, page: *Page) !IntersectionObserver {
         var options = IntersectionObserverOptions{
-            .root = parser.documentToNode(parser.documentHTMLToDocument(state.document.?)),
+            .root = parser.documentToNode(parser.documentHTMLToDocument(page.window.document)),
             .rootMargin = "0px 0px 0px 0px",
-            .threshold = &.{0.0},
+            .threshold = .{ .single = 0.0 },
         };
         if (options_) |*o| {
             if (o.root) |root| {
@@ -61,9 +60,9 @@ pub const IntersectionObserver = struct {
         }
 
         return .{
+            .page = page,
             .callback = callback,
             .options = options,
-            .state = state,
             .observed_entries = .{},
         };
     }
@@ -79,16 +78,19 @@ pub const IntersectionObserver = struct {
             }
         }
 
-        try self.observed_entries.append(self.state.arena, .{
-            .state = self.state,
+        try self.observed_entries.append(self.page.arena, .{
+            .page = self.page,
             .target = target_element,
             .options = &self.options,
         });
 
-        var result: Env.Callback.Result = undefined;
-        self.callback.tryCall(.{self.observed_entries.items}, &result) catch {
-            log.err("intersection observer callback error: {s}", .{result.exception});
-            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        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",
+            });
         };
     }
 
@@ -109,19 +111,24 @@ pub const IntersectionObserver = struct {
 const IntersectionObserverOptions = struct {
     root: ?*parser.Node, // Element or Document
     rootMargin: ?[]const u8,
-    threshold: ?[]const f32,
+    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 {
-    state: *SessionState,
+    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 self.state.renderer.getRect(self.target);
+        return Element._getBoundingClientRect(self.target, self.page);
     }
 
     // Returns the ratio of the intersectionRect to the boundingClientRect.
@@ -131,10 +138,14 @@ pub const IntersectionObserverEntry = struct {
 
     // Returns a DOMRectReadOnly representing the target's visible area.
     pub fn get_intersectionRect(self: *const IntersectionObserverEntry) !Element.DOMRect {
-        return self.state.renderer.getRect(self.target);
+        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.
+    // 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;
     }
@@ -142,8 +153,8 @@ pub const IntersectionObserverEntry = struct {
     // Returns a DOMRectReadOnly for the intersection observer's root.
     pub fn get_rootBounds(self: *const IntersectionObserverEntry) !Element.DOMRect {
         const root = self.options.root.?;
-        if (@intFromPtr(root) == @intFromPtr(self.state.document.?)) {
-            return self.state.renderer.boundingRect();
+        if (@intFromPtr(root) == @intFromPtr(self.page.window.document)) {
+            return self.page.renderer.boundingRect();
         }
 
         const root_type = try parser.nodeType(root);
@@ -158,7 +169,7 @@ pub const IntersectionObserverEntry = struct {
             else => return error.InvalidState,
         }
 
-        return try self.state.renderer.getRect(element);
+        return Element._getBoundingClientRect(element, self.page);
     }
 
     // The Element whose intersection with the root changed.
@@ -244,7 +255,9 @@ test "Browser.DOM.IntersectionObserver" {
     // Entry
     try runner.testCases(&.{
         .{ "let entry;", "undefined" },
-        .{ "new IntersectionObserver(entries => { entry = entries[0]; }).observe(document.createElement('div'));", "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" },
@@ -261,7 +274,8 @@ test "Browser.DOM.IntersectionObserver" {
 
     // Options
     try runner.testCases(&.{
-        .{ "const new_root = document.createElement('span');", "undefined" },
+        .{ "const new_root = document.createElement('span');", null },
+        .{ "document.body.appendChild(new_root);", null },
         .{ "let new_entry;", "undefined" },
         .{
             \\ const new_observer = new IntersectionObserver(

src/browser/dom/mutation_observer.zig

@@ -19,8 +19,10 @@
 const std = @import("std");
 const Allocator = std.mem.Allocator;
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
 
 const Env = @import("../env.zig").Env;
 const NodeList = @import("nodelist.zig").NodeList;
@@ -32,29 +34,39 @@ pub const Interfaces = .{
 
 const Walker = @import("../dom/walker.zig").WalkerChildren;
 
-const log = std.log.scoped(.events);
-
 // WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
 pub const MutationObserver = struct {
-    cbk: Env.Callback,
+    loop: *Loop,
+    cbk: Env.Function,
     arena: Allocator,
+    connected: bool,
+    scheduled: bool,
+    loop_node: Loop.CallbackNode,
 
-    // List of records which were observed. When the scopeEnds, we need to
+    // List of records which were observed. When the call scope ends, we need to
     // execute our callback with it.
-    observed: std.ArrayListUnmanaged(*MutationRecord),
+    observed: std.ArrayListUnmanaged(MutationRecord),
 
-    pub fn constructor(cbk: Env.Callback, state: *SessionState) !MutationObserver {
+    pub fn constructor(cbk: Env.Function, page: *Page) !MutationObserver {
         return .{
             .cbk = cbk,
+            .loop = page.loop,
             .observed = .{},
-            .arena = state.arena,
+            .connected = true,
+            .scheduled = false,
+            .arena = page.arena,
+            .loop_node = .{ .func = callback },
         };
     }
 
-    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
-        const options = options_ orelse MutationObserverInit{};
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?Options) !void {
+        const arena = self.arena;
+        var options = options_ orelse Options{};
+        if (options.attributeFilter.len > 0) {
+            options.attributeFilter = try arena.dupe([]const u8, options.attributeFilter);
+        }
 
-        const observer = try self.arena.create(Observer);
+        const observer = try arena.create(Observer);
         observer.* = .{
             .node = node,
             .options = options,
@@ -64,13 +76,13 @@ pub const MutationObserver = struct {
 
         // register node's events
         if (options.childList or options.subtree) {
-            try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 "DOMNodeInserted",
                 &observer.event_node,
                 false,
             );
-            try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 "DOMNodeRemoved",
                 &observer.event_node,
@@ -78,7 +90,7 @@ pub const MutationObserver = struct {
             );
         }
         if (options.attr()) {
-            try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 "DOMAttrModified",
                 &observer.event_node,
@@ -86,7 +98,7 @@ pub const MutationObserver = struct {
             );
         }
         if (options.cdata()) {
-            try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 "DOMCharacterDataModified",
                 &observer.event_node,
@@ -94,7 +106,7 @@ pub const MutationObserver = struct {
             );
         }
         if (options.subtree) {
-            try parser.eventTargetAddEventListener(
+            _ = try parser.eventTargetAddEventListener(
                 parser.toEventTarget(parser.Node, node),
                 "DOMSubtreeModified",
                 &observer.event_node,
@@ -103,27 +115,34 @@ pub const MutationObserver = struct {
         }
     }
 
-    pub fn jsCallScopeEnd(self: *MutationObserver, _: anytype) void {
-        const record = self.observed.items;
-        if (record.len == 0) {
+    fn callback(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *MutationObserver = @fieldParentPtr("loop_node", node);
+        if (self.connected == false) {
+            self.scheduled = true;
+            return;
+        }
+        self.scheduled = false;
+
+        const records = self.observed.items;
+        if (records.len == 0) {
             return;
         }
 
         defer self.observed.clearRetainingCapacity();
 
-        for (record) |r| {
-            const records = [_]MutationRecord{r.*};
-            var result: Env.Callback.Result = undefined;
-            self.cbk.tryCall(.{records}, &result) catch {
-                log.err("mutation observer callback error: {s}", .{result.exception});
-                log.debug("stack:\n{s}", .{result.stack orelse "???"});
-            };
-        }
+        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.
+    pub fn _disconnect(self: *MutationObserver) !void {
+        self.connected = false;
     }
 
     // TODO
@@ -180,31 +199,27 @@ pub const MutationRecord = struct {
     }
 };
 
-const MutationObserverInit = struct {
+const Options = struct {
     childList: bool = false,
     attributes: bool = false,
     characterData: bool = false,
     subtree: bool = false,
     attributeOldValue: bool = false,
     characterDataOldValue: bool = false,
-    // TODO
-    // attributeFilter: [][]const u8,
+    attributeFilter: [][]const u8 = &.{},
 
-    fn attr(self: MutationObserverInit) bool {
-        return self.attributes or self.attributeOldValue;
+    fn attr(self: Options) bool {
+        return self.attributes or self.attributeOldValue or self.attributeFilter.len > 0;
     }
 
-    fn cdata(self: MutationObserverInit) bool {
+    fn cdata(self: Options) 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,
+    options: Options,
 
     // reference back to the MutationObserver so that we can access the arena
     // and batch the mutation records.
@@ -212,19 +227,34 @@ const Observer = struct {
 
     event_node: parser.EventNode,
 
-    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
+    fn appliesTo(
+        self: *const Observer,
+        target: *parser.Node,
+        event_type: MutationEventType,
+        event: *parser.MutationEvent,
+    ) !bool {
+        if (event_type == .DOMAttrModified and self.options.attributeFilter.len > 0) {
+            const attribute_name = try parser.mutationEventAttributeName(event);
+            for (self.options.attributeFilter) |needle| blk: {
+                if (std.mem.eql(u8, attribute_name, needle)) {
+                    break :blk;
+                }
+            }
+            return false;
+        }
+
         // mutation on any target is always ok.
-        if (o.options.subtree) {
+        if (self.options.subtree) {
             return true;
         }
 
         // if target equals node, alway ok.
-        if (target == o.node) {
+        if (target == self.node) {
             return true;
         }
 
         // no subtree, no same target and no childlist, always noky.
-        if (!o.options.childList) {
+        if (!self.options.childList) {
             return false;
         }
 
@@ -232,7 +262,7 @@ const Observer = struct {
         const walker = Walker{};
         var next: ?*parser.Node = null;
         while (true) {
-            next = walker.get_next(o.node, next) catch break orelse break;
+            next = walker.get_next(self.node, next) catch break orelse break;
             if (next.? == target) {
                 return true;
             }
@@ -243,44 +273,35 @@ const Observer = struct {
 
     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 = parser.eventTarget(event) catch |e| {
-                log.err("mutation observer event target: {any}", .{e});
-                return;
-            } orelse return;
-
+            const event_target = try parser.eventTarget(event) orelse return;
             break :blk parser.eventTargetToNode(event_target);
         };
 
-        if (self.appliesTo(node) == false) {
-            return;
-        }
-
+        const mutation_event = parser.eventToMutationEvent(event);
         const event_type = blk: {
-            const t = parser.eventType(event) catch |e| {
-                log.err("mutation observer event type: {any}", .{e});
-                return;
-            };
+            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(),
-            };
-            mutation_observer.observed.append(arena, &self.record.?) catch |err| {
-                log.err("mutation_observer append: {}", .{err});
-            };
+        if (try self.appliesTo(node, event_type, mutation_event) == false) {
+            return;
         }
 
-        var record = &self.record.?;
-        const mutation_event = parser.eventToMutationEvent(event);
+        var record = MutationRecord{
+            .target = self.node,
+            .type = event_type.recordType(),
+        };
 
+        const arena = mutation_observer.arena;
         switch (event_type) {
             .DOMAttrModified => {
                 record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
@@ -295,21 +316,22 @@ const Observer = struct {
             },
             .DOMNodeInserted => {
                 if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
-                    record.added_nodes.append(arena, related_node) catch |e| {
-                        log.err("mutation event handler error: {any}", .{e});
-                        return;
-                    };
+                    try record.added_nodes.append(arena, related_node);
                 }
             },
             .DOMNodeRemoved => {
                 if (parser.mutationEventRelatedNode(mutation_event) catch null) |related_node| {
-                    record.removed_nodes.append(arena, related_node) catch |e| {
-                        log.err("mutation event handler error: {any}", .{e});
-                        return;
-                    };
+                    try record.removed_nodes.append(arena, related_node);
                 }
             },
         }
+
+        try mutation_observer.observed.append(arena, record);
+
+        if (mutation_observer.scheduled == false) {
+            mutation_observer.scheduled = true;
+            _ = try mutation_observer.loop.timeout(0, &mutation_observer.loop_node);
+        }
     }
 };
 
@@ -349,10 +371,10 @@ test "Browser.DOM.MutationObserver" {
             \\ document.firstElementChild.setAttribute("foo", "bar");
             \\ // ignored b/c it's about another target.
             \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
-            \\ nb;
             ,
-            "1",
+            null,
         },
+        .{ "nb", "1" },
         .{ "mrs[0].type", "attributes" },
         .{ "mrs[0].target == document.firstElementChild", "true" },
         .{ "mrs[0].target.getAttribute('foo')", "bar" },
@@ -370,10 +392,10 @@ test "Browser.DOM.MutationObserver" {
             \\     nb2++;
             \\ }).observe(node, { characterData: true, characterDataOldValue: true });
             \\ node.data = "foo";
-            \\ nb2;
             ,
-            "1",
+            null,
         },
+        .{ "nb2", "1" },
         .{ "mrs2[0].type", "characterData" },
         .{ "mrs2[0].target == node", "true" },
         .{ "mrs2[0].target.data", "foo" },
@@ -391,7 +413,24 @@ test "Browser.DOM.MutationObserver" {
             \\ }).observe(document, { subtree:true,childList:true });
             \\ node.innerText = "2";
             ,
-            "2",
+            null,
         },
+        .{ "node.innerText", "a" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ var attrWatch = 0;
+            \\ new MutationObserver(() => {
+            \\     attrWatch++;
+            \\ }).observe(document, { attributeFilter: ["name"], subtree: true });
+            \\ node.setAttribute("id", "1");
+            ,
+            null,
+        },
+        .{ "attrWatch", "0" },
+        .{ "node.setAttribute('name', 'other');", null },
+        .{ "attrWatch", "1" },
     }, .{});
 }

src/browser/dom/namednodemap.zig

@@ -25,6 +25,7 @@ pub const NamedNodeMap = struct {
     pub const Self = parser.NamedNodeMap;
 
     pub const Exception = DOMException;
+    pub const Iterator = NamedNodeMapIterator;
 
     // TODO implement LegacyUnenumerableNamedProperties.
     // https://webidl.spec.whatwg.org/#LegacyUnenumerableNamedProperties
@@ -70,11 +71,48 @@ pub const NamedNodeMap = struct {
     }
 
     pub fn indexed_get(self: *parser.NamedNodeMap, index: u32, has_value: *bool) !*parser.Attribute {
-        return (try NamedNodeMap._item(self, index)) orelse {
+        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
@@ -93,5 +131,10 @@ test "Browser.DOM.NamedNodeMap" {
         .{ "a.getNamedItem('id')", "[object Attr]" },
         .{ "a.getNamedItem('foo')", "null" },
         .{ "a.setNamedItem(a.getNamedItem('id'))", "[object Attr]" },
+        .{ "a['id'].name", "id" },
+        .{ "a['id'].value", "content" },
+        .{ "a['other']", "undefined" },
+        .{ "a[0].value = 'abc123'", null },
+        .{ "a[0].value", "abc123" },
     }, .{});
 }

src/browser/dom/node.zig

@@ -18,10 +18,11 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const generate = @import("../../runtime/generate.zig");
 
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 const EventTarget = @import("event_target.zig").EventTarget;
 
 // DOM
@@ -262,21 +263,23 @@ pub const Node = struct {
         return try parser.nodeContains(self, other);
     }
 
-    pub fn _getRootNode(self: *parser.Node) !?HTMLElem.Union {
-        // TODO return this’s shadow-including root if options["composed"] is true
-        const res = try parser.nodeOwnerDocument(self);
-        if (res == null) {
-            return null;
-        }
-        return try HTMLElem.toInterface(HTMLElem.Union, @as(*parser.Element, @ptrCast(res.?)));
+    // 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, state: *SessionState) !NodeList {
-        const allocator = state.arena;
+    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;
@@ -286,8 +289,11 @@ pub const Node = struct {
         }
     }
 
-    pub fn _insertBefore(self: *parser.Node, new_node: *parser.Node, ref_node: *parser.Node) !*parser.Node {
-        return try parser.nodeInsertBefore(self, new_node, ref_node);
+    pub fn _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 {
@@ -490,7 +496,7 @@ pub const Node = struct {
         fn toNode(self: NodeOrText, doc: *parser.Document) !*parser.Node {
             return switch (self) {
                 .node => |n| n,
-                .text => |txt| @ptrCast(try parser.documentCreateTextNode(doc, txt)),
+                .text => |txt| @alignCast(@ptrCast(try parser.documentCreateTextNode(doc, txt))),
             };
         }
 
@@ -659,6 +665,10 @@ test "Browser.DOM.node" {
         .{ "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(&.{

src/browser/dom/node_filter.zig

@@ -0,0 +1,89 @@
+// 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 Env = @import("../env.zig").Env;
+const Node = @import("node.zig").Node;
+
+pub const NodeFilter = struct {
+    pub const _FILTER_ACCEPT: u16 = 1;
+    pub const _FILTER_REJECT: u16 = 2;
+    pub const _FILTER_SKIP: u16 = 3;
+
+    pub const _SHOW_ALL: u32 = std.math.maxInt(u32);
+    pub const _SHOW_ELEMENT: u32 = 0b1;
+    pub const _SHOW_ATTRIBUTE: u32 = 0b10;
+    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 VerifyResult = enum { accept, skip, reject };
+
+pub fn verify(what_to_show: u32, filter: ?Env.Function, node: *parser.Node) !VerifyResult {
+    const node_type = try parser.nodeType(node);
+
+    // 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 (filter) |f| {
+        const acceptance = try f.call(u16, .{try Node.toInterface(node)});
+        return switch (acceptance) {
+            NodeFilter._FILTER_ACCEPT => .accept,
+            NodeFilter._FILTER_REJECT => .reject,
+            NodeFilter._FILTER_SKIP => .skip,
+            else => .reject,
+        };
+    } else return .accept;
+}
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.NodeFilter" {
+    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/node_iterator.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 parser = @import("../netsurf.zig");
+const Env = @import("../env.zig").Env;
+const NodeFilter = @import("node_filter.zig");
+const Node = @import("node.zig").Node;
+const NodeUnion = @import("node.zig").Union;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
+// While this is similar to TreeWalker it has its own implementation as there are several subtle differences
+// For example:
+// - nextNode returns the reference node, whereas TreeWalker returns the next node
+// - Skip and reject are equivalent for NodeIterator, for TreeWalker they are different
+pub const NodeIterator = struct {
+    root: *parser.Node,
+    reference_node: *parser.Node,
+    what_to_show: u32,
+    filter: ?NodeIteratorOpts,
+    filter_func: ?Env.Function,
+
+    pointer_before_current: bool = true,
+
+    pub const NodeIteratorOpts = union(enum) {
+        function: Env.Function,
+        object: struct { acceptNode: Env.Function },
+    };
+
+    pub fn init(node: *parser.Node, what_to_show: ?u32, filter: ?NodeIteratorOpts) !NodeIterator {
+        var filter_func: ?Env.Function = null;
+        if (filter) |f| {
+            filter_func = switch (f) {
+                .function => |func| func,
+                .object => |o| o.acceptNode,
+            };
+        }
+
+        return .{
+            .root = node,
+            .reference_node = node,
+            .what_to_show = what_to_show orelse NodeFilter.NodeFilter._SHOW_ALL,
+            .filter = filter,
+            .filter_func = filter_func,
+        };
+    }
+
+    pub fn get_filter(self: *const NodeIterator) ?NodeIteratorOpts {
+        return self.filter;
+    }
+
+    pub fn get_pointerBeforeReferenceNode(self: *const NodeIterator) bool {
+        return self.pointer_before_current;
+    }
+
+    pub fn get_referenceNode(self: *const NodeIterator) !NodeUnion {
+        return try Node.toInterface(self.reference_node);
+    }
+
+    pub fn get_root(self: *const NodeIterator) !NodeUnion {
+        return try Node.toInterface(self.root);
+    }
+
+    pub fn get_whatToShow(self: *const NodeIterator) u32 {
+        return self.what_to_show;
+    }
+
+    pub fn _nextNode(self: *NodeIterator) !?NodeUnion {
+        if (self.pointer_before_current) { // Unlike TreeWalker, NodeIterator starts at the first node
+            self.pointer_before_current = false;
+            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
+                return try Node.toInterface(self.reference_node);
+            }
+        }
+
+        if (try self.firstChild(self.reference_node)) |child| {
+            self.reference_node = child;
+            return try Node.toInterface(child);
+        }
+
+        var current = self.reference_node;
+        while (current != self.root) {
+            if (try self.nextSibling(current)) |sibling| {
+                self.reference_node = sibling;
+                return try Node.toInterface(sibling);
+            }
+
+            current = (try parser.nodeParentNode(current)) orelse break;
+        }
+
+        return null;
+    }
+
+    pub fn _previousNode(self: *NodeIterator) !?NodeUnion {
+        if (!self.pointer_before_current) {
+            self.pointer_before_current = true;
+            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
+                return try Node.toInterface(self.reference_node); // Still need to verify as last may be first as well
+            }
+        }
+        if (self.reference_node == self.root) return null;
+
+        var current = self.reference_node;
+        while (try parser.nodePreviousSibling(current)) |previous| {
+            current = previous;
+
+            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+                .accept => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.reference_node = child;
+                        return try Node.toInterface(child);
+                    }
+
+                    // Otherwise, this node is our previous one.
+                    self.reference_node = current;
+                    return try Node.toInterface(current);
+                },
+                .reject, .skip => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.reference_node = child;
+                        return try Node.toInterface(child);
+                    }
+                },
+            }
+        }
+
+        if (current != self.root) {
+            if (try self.parentNode(current)) |parent| {
+                self.reference_node = parent;
+                return try Node.toInterface(parent);
+            }
+        }
+
+        return null;
+    }
+
+    fn firstChild(self: *const NodeIterator, 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 NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
+                .accept => return child, // NOTE: Skip and reject are equivalent for NodeIterator, this is different from TreeWalker
+                .reject, .skip => if (try self.firstChild(child)) |gchild| return gchild,
+            }
+        }
+
+        return null;
+    }
+
+    fn lastChild(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
+        const children = try parser.nodeGetChildNodes(node);
+        const child_count = 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 NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
+                .accept => return child, // NOTE: Skip and reject are equivalent for NodeIterator, this is different from TreeWalker
+                .reject, .skip => if (try self.lastChild(child)) |gchild| return gchild,
+            }
+        }
+
+        return null;
+    }
+
+    // This implementation is actually the same as :TreeWalker
+    fn parentNode(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
+        if (self.root == node) return null;
+
+        var current = node;
+        while (true) {
+            if (current == self.root) return null;
+            current = (try parser.nodeParentNode(current)) orelse return null;
+
+            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+                .accept => return current,
+                .reject, .skip => continue,
+            }
+        }
+    }
+
+    // This implementation is actually the same as :TreeWalker
+    fn nextSibling(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
+        var current = node;
+
+        while (true) {
+            current = (try parser.nodeNextSibling(current)) orelse return null;
+
+            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+                .accept => return current,
+                .skip, .reject => continue,
+            }
+        }
+
+        return null;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.NodeFilter" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{
+            \\ const nodeIterator = document.createNodeIterator(
+            \\   document.body,
+            \\   NodeFilter.SHOW_ELEMENT,
+            \\   {
+            \\     acceptNode(node) {
+            \\       return NodeFilter.FILTER_ACCEPT;
+            \\     },
+            \\   },
+            \\ );
+            \\ nodeIterator.nextNode().nodeName;
+            ,
+            "BODY",
+        },
+        .{ "nodeIterator.nextNode().nodeName", "DIV" },
+        .{ "nodeIterator.nextNode().nodeName", "A" },
+        .{ "nodeIterator.previousNode().nodeName", "A" }, // pointer_before_current flips
+        .{ "nodeIterator.nextNode().nodeName", "A" }, // pointer_before_current flips
+        .{ "nodeIterator.previousNode().nodeName", "A" }, // pointer_before_current flips
+        .{ "nodeIterator.previousNode().nodeName", "DIV" },
+        .{ "nodeIterator.previousNode().nodeName", "BODY" },
+        .{ "nodeIterator.previousNode()", "null" }, // Not HEAD since body is root
+        .{ "nodeIterator.previousNode()", "null" }, // Keeps returning null
+        .{ "nodeIterator.nextNode().nodeName", "BODY" },
+
+        .{ "nodeIterator.nextNode().nodeName", null },
+        .{ "nodeIterator.nextNode().nodeName", null },
+        .{ "nodeIterator.nextNode().nodeName", null },
+        .{ "nodeIterator.nextNode().nodeName", "SPAN" },
+        .{ "nodeIterator.nextNode().nodeName", "P" },
+        .{ "nodeIterator.nextNode()", "null" }, // Just the last one
+        .{ "nodeIterator.nextNode()", "null" }, // Keeps returning null
+        .{ "nodeIterator.previousNode().nodeName", "P" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ const notationIterator = document.createNodeIterator(
+            \\   document.body,
+            \\   NodeFilter.SHOW_NOTATION,
+            \\ );
+            \\ notationIterator.nextNode();
+            ,
+            "null",
+        },
+        .{ "notationIterator.previousNode()", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nodeIterator.filter.acceptNode(document.body)", "1" },
+        .{ "notationIterator.filter", "null" },
+        .{
+            \\ const rejectIterator = document.createNodeIterator(
+            \\   document.body,
+            \\   NodeFilter.SHOW_ALL,
+            \\   (e => { return NodeFilter.FILTER_REJECT}),
+            \\ );
+            \\ rejectIterator.filter(document.body);
+            ,
+            "2",
+        },
+    }, .{});
+}

src/browser/dom/nodelist.zig

@@ -18,18 +18,17 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 
 const JsThis = @import("../env.zig").JsThis;
-const Callback = @import("../env.zig").Callback;
+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 log = std.log.scoped(.nodelist);
-
 const DOMException = @import("exceptions.zig").DOMException;
 
 pub const Interfaces = .{
@@ -141,13 +140,12 @@ pub const NodeList = struct {
     //     };
     // }
 
-    pub fn _forEach(self: *NodeList, cbk: Callback) !void { // TODO handle thisArg
+    pub fn _forEach(self: *NodeList, cbk: Function) !void { // TODO handle thisArg
         for (self.nodes.items, 0..) |n, i| {
             const ii: u32 = @intCast(i);
-            var result: Callback.Result = undefined;
-            cbk.tryCall(.{ n, ii, self }, &result) catch {
-                log.err("callback error: {s}", .{result.exception});
-                log.debug("stack:\n{s}", .{result.stack orelse "???"});
+            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 });
             };
         }
     }

src/browser/dom/performance.zig

@@ -0,0 +1,214 @@
+// 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;
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+
+pub const Interfaces = .{
+    Performance,
+    PerformanceEntry,
+    PerformanceMark,
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Performance
+pub const Performance = struct {
+    pub const prototype = *EventTarget;
+
+    // Extend libdom event target for pure zig struct.
+    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .performance },
+
+    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());
+    }
+
+    pub fn _mark(_: *Performance, name: []const u8, _options: ?PerformanceMark.Options, page: *Page) !PerformanceMark {
+        const mark: PerformanceMark = try .constructor(name, _options, page);
+        // TODO: Should store this in an entries list
+        return mark;
+    }
+
+    // TODO: fn _mark should record the marks in a lookup
+    pub fn _clearMarks(_: *Performance, name: ?[]const u8) void {
+        _ = name;
+    }
+
+    // TODO: fn _measures should record the marks in a lookup
+    pub fn _clearMeasures(_: *Performance, name: ?[]const u8) void {
+        _ = name;
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry
+pub const PerformanceEntry = struct {
+    const PerformanceEntryType = enum {
+        element,
+        event,
+        first_input,
+        largest_contentful_paint,
+        layout_shift,
+        long_animation_frame,
+        longtask,
+        mark,
+        measure,
+        navigation,
+        paint,
+        resource,
+        taskattribution,
+        visibility_state,
+
+        pub fn toString(self: PerformanceEntryType) []const u8 {
+            return switch (self) {
+                .first_input => "first-input",
+                .largest_contentful_paint => "largest-contentful-paint",
+                .layout_shift => "layout-shift",
+                .long_animation_frame => "long-animation-frame",
+                .visibility_state => "visibility-state",
+                else => @tagName(self),
+            };
+        }
+    };
+
+    duration: f64 = 0.0,
+    entry_type: PerformanceEntryType,
+    name: []const u8,
+    start_time: f64 = 0.0,
+
+    pub fn get_duration(self: *const PerformanceEntry) f64 {
+        return self.duration;
+    }
+
+    pub fn get_entryType(self: *const PerformanceEntry) PerformanceEntryType {
+        return self.entry_type;
+    }
+
+    pub fn get_name(self: *const PerformanceEntry) []const u8 {
+        return self.name;
+    }
+
+    pub fn get_startTime(self: *const PerformanceEntry) f64 {
+        return self.start_time;
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMark
+pub const PerformanceMark = struct {
+    pub const prototype = *PerformanceEntry;
+
+    proto: PerformanceEntry,
+    detail: ?Env.JsObject,
+
+    const Options = struct {
+        detail: ?Env.JsObject = null,
+        start_time: ?f64 = null,
+    };
+
+    pub fn constructor(name: []const u8, _options: ?Options, page: *Page) !PerformanceMark {
+        const perf = &page.window.performance;
+
+        const options = _options orelse Options{};
+        const start_time = options.start_time orelse perf._now();
+
+        if (start_time < 0.0) {
+            return error.TypeError;
+        }
+
+        const detail = if (options.detail) |d| try d.persist() else null;
+
+        const duped_name = try page.arena.dupe(u8, name);
+        const proto = PerformanceEntry{ .name = duped_name, .entry_type = .mark, .start_time = start_time };
+
+        return .{ .proto = proto, .detail = detail };
+    }
+
+    pub fn get_detail(self: *const PerformanceMark) ?Env.JsObject {
+        return self.detail;
+    }
+};
+
+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.2);
+}
+
+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);
+}
+
+test "Browser.Performance.Mark" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let performance = window.performance", "undefined" },
+        .{ "performance instanceof Performance", "true" },
+        .{ "let mark = performance.mark(\"start\")", "undefined" },
+        .{ "mark instanceof PerformanceMark", "true" },
+        .{ "mark.name", "start" },
+        .{ "mark.entryType", "mark" },
+        .{ "mark.duration", "0" },
+        .{ "mark.detail", "null" },
+    }, .{});
+}

src/browser/dom/performance_observer.zig

@@ -0,0 +1,63 @@
+// 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 Env = @import("../env.zig").Env;
+
+const PerformanceEntry = @import("performance.zig").PerformanceEntry;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
+pub const PerformanceObserver = struct {
+    pub const _supportedEntryTypes = [0][]const u8{};
+
+    pub fn constructor(cbk: Env.Function) PerformanceObserver {
+        _ = cbk;
+        return .{};
+    }
+
+    pub fn _observe(self: *const PerformanceObserver, options_: ?Options) void {
+        _ = self;
+        _ = options_;
+        return;
+    }
+
+    pub fn _disconnect(self: *PerformanceObserver) void {
+        _ = self;
+    }
+
+    pub fn _takeRecords(_: *const PerformanceObserver) []PerformanceEntry {
+        return &[_]PerformanceEntry{};
+    }
+};
+
+const Options = struct {
+    buffered: ?bool = null,
+    durationThreshold: ?f64 = null,
+    entryTypes: ?[]const []const u8 = null,
+    type: ?[]const u8 = null,
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.PerformanceObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "PerformanceObserver.supportedEntryTypes.length", "0" },
+    }, .{});
+}

src/browser/dom/processing_instruction.zig

@@ -20,7 +20,7 @@ const std = @import("std");
 
 const parser = @import("../netsurf.zig");
 const Node = @import("node.zig").Node;
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 // https://dom.spec.whatwg.org/#processinginstruction
 pub const ProcessingInstruction = struct {
@@ -39,9 +39,9 @@ pub const ProcessingInstruction = struct {
     // There's something wrong when we try to clone a ProcessInstruction normally.
     // The resulting object can't be cast back into a node (it crashes). This is
     // a simple workaround.
-    pub fn _cloneNode(self: *parser.ProcessingInstruction, _: ?bool, state: *SessionState) !*parser.ProcessingInstruction {
+    pub fn _cloneNode(self: *parser.ProcessingInstruction, _: ?bool, page: *Page) !*parser.ProcessingInstruction {
         return try parser.documentCreateProcessingInstruction(
-            @ptrCast(state.document),
+            @ptrCast(page.window.document),
             try get_target(self),
             (try get_data(self)) orelse "",
         );

src/browser/dom/range.zig

@@ -0,0 +1,178 @@
+// 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 NodeUnion = @import("node.zig").Union;
+const Node = @import("node.zig").Node;
+
+pub const Interfaces = .{
+    AbstractRange,
+    Range,
+};
+
+pub const AbstractRange = struct {
+    collapsed: bool,
+    end_container: *parser.Node,
+    end_offset: i32,
+    start_container: *parser.Node,
+    start_offset: i32,
+
+    pub fn updateCollapsed(self: *AbstractRange) void {
+        // TODO: Eventually, compare properly.
+        self.collapsed = false;
+    }
+
+    pub fn get_collapsed(self: *const AbstractRange) bool {
+        return self.collapsed;
+    }
+
+    pub fn get_endContainer(self: *const AbstractRange) !NodeUnion {
+        return Node.toInterface(self.end_container);
+    }
+
+    pub fn get_endOffset(self: *const AbstractRange) i32 {
+        return self.end_offset;
+    }
+
+    pub fn get_startContainer(self: *const AbstractRange) !NodeUnion {
+        return Node.toInterface(self.start_container);
+    }
+
+    pub fn get_startOffset(self: *const AbstractRange) i32 {
+        return self.start_offset;
+    }
+};
+
+pub const Range = struct {
+    pub const prototype = *AbstractRange;
+
+    proto: AbstractRange,
+
+    // The Range() constructor returns a newly created Range object whose start
+    // and end is the global Document object.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Range/Range
+    pub fn constructor(page: *Page) Range {
+        const proto: AbstractRange = .{
+            .collapsed = true,
+            .end_container = parser.documentHTMLToNode(page.window.document),
+            .end_offset = 0,
+            .start_container = parser.documentHTMLToNode(page.window.document),
+            .start_offset = 0,
+        };
+
+        return .{ .proto = proto };
+    }
+
+    pub fn _setStart(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.start_container = node;
+        self.proto.start_offset = offset;
+        self.proto.updateCollapsed();
+    }
+
+    pub fn _setEnd(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.end_container = node;
+        self.proto.end_offset = offset;
+        self.proto.updateCollapsed();
+    }
+
+    pub fn _createContextualFragment(_: *Range, fragment: []const u8, page: *Page) !*parser.DocumentFragment {
+        const document_html = page.window.document;
+        const document = parser.documentHTMLToDocument(document_html);
+        const doc_frag = try parser.documentParseFragmentFromStr(document, fragment);
+        return doc_frag;
+    }
+
+    pub fn _selectNodeContents(self: *Range, node: *parser.Node) !void {
+        self.proto.start_container = node;
+        self.proto.start_offset = 0;
+        self.proto.end_container = node;
+
+        // Set end_offset
+        switch (try parser.nodeType(node)) {
+            .text, .cdata_section, .comment, .processing_instruction => {
+                // For text-like nodes, end_offset should be the length of the text data
+                if (try parser.nodeValue(node)) |text_data| {
+                    self.proto.end_offset = @intCast(text_data.len);
+                } else {
+                    self.proto.end_offset = 0;
+                }
+            },
+            else => {
+                // For element and other nodes, end_offset is the number of children
+                const child_nodes = try parser.nodeGetChildNodes(node);
+                const child_count = try parser.nodeListLength(child_nodes);
+                self.proto.end_offset = @intCast(child_count);
+            },
+        }
+
+        self.proto.updateCollapsed();
+    }
+
+    // The Range.detach() method does nothing. It used to disable the Range
+    // object and enable the browser to release associated resources. The
+    // method has been kept for compatibility.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Range/detach
+    pub fn _detach(_: *Range) void {}
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Range" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        // Test Range constructor
+        .{ "let range = new Range()", "undefined" },
+        .{ "range instanceof Range", "true" },
+        .{ "range instanceof AbstractRange", "true" },
+
+        // Test initial state - collapsed range
+        .{ "range.collapsed", "true" },
+        .{ "range.startOffset", "0" },
+        .{ "range.endOffset", "0" },
+        .{ "range.startContainer instanceof HTMLDocument", "true" },
+        .{ "range.endContainer instanceof HTMLDocument", "true" },
+
+        // Test document.createRange()
+        .{ "let docRange = document.createRange()", "undefined" },
+        .{ "docRange instanceof Range", "true" },
+        .{ "docRange.collapsed", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const container = document.getElementById('content');", null },
+
+        // Test text range
+        .{ "const commentNode = container.childNodes[7];", null },
+        .{ "commentNode.nodeValue", "comment" },
+        .{ "const textRange = document.createRange();", null },
+        .{ "textRange.selectNodeContents(commentNode)", "undefined" },
+        .{ "textRange.startOffset", "0" },
+        .{ "textRange.endOffset", "7" }, // length of `comment`
+
+        // Test Node range
+        .{ "const nodeRange = document.createRange();", null },
+        .{ "nodeRange.selectNodeContents(container)", "undefined" },
+        .{ "nodeRange.startOffset", "0" },
+        .{ "nodeRange.endOffset", "9" }, // length of container.childNodes
+    }, .{});
+}

src/browser/dom/resize_observer.zig

@@ -0,0 +1,54 @@
+// 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 Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+
+pub const Interfaces = .{
+    ResizeObserver,
+};
+
+// WEB IDL https://drafts.csswg.org/resize-observer/#resize-observer-interface
+pub const ResizeObserver = struct {
+    pub fn constructor(cbk: Env.Function) ResizeObserver {
+        _ = cbk;
+        return .{};
+    }
+
+    pub fn _observe(self: *const ResizeObserver, element: *parser.Element, options_: ?Options) void {
+        _ = self;
+        _ = element;
+        _ = options_;
+        return;
+    }
+
+    pub fn _unobserve(self: *const ResizeObserver, element: *parser.Element) void {
+        _ = self;
+        _ = element;
+        return;
+    }
+
+    // TODO
+    pub fn _disconnect(self: *ResizeObserver) void {
+        _ = self;
+    }
+};
+
+const Options = struct {
+    box: []const u8,
+};

src/browser/dom/shadow_root.zig

@@ -0,0 +1,73 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+const Element = @import("element.zig").Element;
+const ElementUnion = @import("element.zig").Union;
+
+// WEB IDL https://dom.spec.whatwg.org/#interface-shadowroot
+pub const ShadowRoot = struct {
+    pub const prototype = *parser.DocumentFragment;
+    pub const subtype = .node;
+
+    mode: Mode,
+    host: *parser.Element,
+    proto: *parser.DocumentFragment,
+
+    pub const Mode = enum {
+        open,
+        closed,
+    };
+
+    pub fn get_host(self: *const ShadowRoot) !ElementUnion {
+        return Element.toInterface(self.host);
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.DOM.ShadowRoot" {
+    defer testing.reset();
+
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const div1 = document.createElement('div');", null },
+        .{ "let sr1 = div1.attachShadow({mode: 'open'})", null },
+        .{ "sr1.host == div1", "true" },
+        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
+        .{ "div1.shadowRoot == sr1", "true" },
+
+        .{ "try { div1.attachShadow({mode: 'closed'}) } catch (e) { e }", "Error: NotSupportedError" },
+
+        .{ " sr1.append(document.createElement('div'))", null },
+        .{ " sr1.append(document.createElement('span'))", null },
+        .{ "sr1.childElementCount", "2" },
+        // re-attaching clears it
+        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
+        .{ "sr1.childElementCount", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const div2 = document.createElement('di2');", null },
+        .{ "let sr2 = div2.attachShadow({mode: 'closed'})", null },
+        .{ "sr2.host == div2", "true" },
+        .{ "div2.shadowRoot", "null" }, // null when attached with 'closed'
+    }, .{});
+}

src/browser/dom/text.zig

@@ -17,7 +17,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const CharacterData = @import("character_data.zig").CharacterData;
 const CDATASection = @import("cdata_section.zig").CDATASection;
@@ -32,9 +32,9 @@ pub const Text = struct {
     pub const prototype = *CharacterData;
     pub const subtype = .node;
 
-    pub fn constructor(data: ?[]const u8, state: *const SessionState) !*parser.Text {
+    pub fn constructor(data: ?[]const u8, page: *const Page) !*parser.Text {
         return parser.documentCreateTextNode(
-            parser.documentHTMLToDocument(state.document.?),
+            parser.documentHTMLToDocument(page.window.document),
             data orelse "",
         );
     }

src/browser/dom/token_list.zig

@@ -18,15 +18,14 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const iterator = @import("../iterator/iterator.zig");
 
-const Callback = @import("../env.zig").Callback;
+const Function = @import("../env.zig").Function;
 const JsObject = @import("../env.zig").JsObject;
 const DOMException = @import("exceptions.zig").DOMException;
 
-const log = std.log.scoped(.token_list);
-
 pub const Interfaces = .{
     DOMTokenList,
     DOMTokenListIterable,
@@ -138,13 +137,16 @@ pub const DOMTokenList = struct {
     }
 
     // TODO handle thisArg
-    pub fn _forEach(self: *parser.TokenList, cbk: Callback, this_arg: JsObject) !void {
+    pub fn _forEach(self: *parser.TokenList, cbk: Function, this_arg: JsObject) !void {
         var entries = _entries(self);
         while (try entries._next()) |entry| {
-            var result: Callback.Result = undefined;
-            cbk.tryCallWithThis(this_arg, .{ entry.@"1", entry.@"0", self }, &result) catch {
-                log.err("callback error: {s}", .{result.exception});
-                log.debug("stack:\n{s}", .{result.stack orelse "???"});
+            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",
+                });
             };
         }
     }

src/browser/dom/tree_walker.zig

@@ -0,0 +1,265 @@
+// 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");
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const Node = @import("node.zig").Node;
+const NodeUnion = @import("node.zig").Union;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+pub const TreeWalker = struct {
+    root: *parser.Node,
+    current_node: *parser.Node,
+    what_to_show: u32,
+    filter: ?TreeWalkerOpts,
+    filter_func: ?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.NodeFilter._SHOW_ALL,
+            .filter = filter,
+            .filter_func = filter_func,
+        };
+    }
+
+    pub fn get_root(self: *TreeWalker) !NodeUnion {
+        return try Node.toInterface(self.root);
+    }
+
+    pub fn get_currentNode(self: *TreeWalker) !NodeUnion {
+        return try Node.toInterface(self.current_node);
+    }
+
+    pub fn get_whatToShow(self: *TreeWalker) u32 {
+        return self.what_to_show;
+    }
+
+    pub fn get_filter(self: *TreeWalker) ?TreeWalkerOpts {
+        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 NodeFilter.verify(self.what_to_show, self.filter_func, 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 NodeFilter.verify(self.what_to_show, self.filter_func, 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 NodeFilter.verify(self.what_to_show, self.filter_func, 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 NodeFilter.verify(self.what_to_show, self.filter_func, 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 NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+                .accept => return current,
+                .reject, .skip => continue,
+            }
+        }
+    }
+
+    pub fn _firstChild(self: *TreeWalker) !?NodeUnion {
+        if (try self.firstChild(self.current_node)) |child| {
+            self.current_node = child;
+            return try Node.toInterface(child);
+        }
+
+        return null;
+    }
+
+    pub fn _lastChild(self: *TreeWalker) !?NodeUnion {
+        if (try self.lastChild(self.current_node)) |child| {
+            self.current_node = child;
+            return try Node.toInterface(child);
+        }
+
+        return null;
+    }
+
+    pub fn _nextNode(self: *TreeWalker) !?NodeUnion {
+        if (try self.firstChild(self.current_node)) |child| {
+            self.current_node = child;
+            return try Node.toInterface(child);
+        }
+
+        var current = self.current_node;
+        while (current != self.root) {
+            if (try self.nextSibling(current)) |sibling| {
+                self.current_node = sibling;
+                return try Node.toInterface(sibling);
+            }
+
+            current = (try parser.nodeParentNode(current)) orelse break;
+        }
+
+        return null;
+    }
+
+    pub fn _nextSibling(self: *TreeWalker) !?NodeUnion {
+        if (try self.nextSibling(self.current_node)) |sibling| {
+            self.current_node = sibling;
+            return try Node.toInterface(sibling);
+        }
+
+        return null;
+    }
+
+    pub fn _parentNode(self: *TreeWalker) !?NodeUnion {
+        if (try self.parentNode(self.current_node)) |parent| {
+            self.current_node = parent;
+            return try Node.toInterface(parent);
+        }
+
+        return null;
+    }
+
+    pub fn _previousNode(self: *TreeWalker) !?NodeUnion {
+        if (self.current_node == self.root) return null;
+
+        var current = self.current_node;
+        while (try parser.nodePreviousSibling(current)) |previous| {
+            current = previous;
+
+            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+                .accept => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.current_node = child;
+                        return try Node.toInterface(child);
+                    }
+
+                    // Otherwise, this node is our previous one.
+                    self.current_node = current;
+                    return try Node.toInterface(current);
+                },
+                .reject => continue,
+                .skip => {
+                    // Get last child if it has one.
+                    if (try self.lastChild(current)) |child| {
+                        self.current_node = child;
+                        return try Node.toInterface(child);
+                    }
+                },
+            }
+        }
+
+        if (current != self.root) {
+            if (try self.parentNode(current)) |parent| {
+                self.current_node = parent;
+                return try Node.toInterface(parent);
+            }
+        }
+
+        return null;
+    }
+
+    pub fn _previousSibling(self: *TreeWalker) !?NodeUnion {
+        if (try self.previousSibling(self.current_node)) |sibling| {
+            self.current_node = sibling;
+            return try Node.toInterface(sibling);
+        }
+
+        return null;
+    }
+};

src/browser/dump.zig

@@ -21,17 +21,52 @@ const std = @import("std");
 const parser = @import("netsurf.zig");
 const Walker = @import("dom/walker.zig").WalkerChildren;
 
+pub const Opts = struct {
+    exclude_scripts: bool = false,
+};
+
 // writer must be a std.io.Writer
-pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
+pub fn writeHTML(doc: *parser.Document, opts: Opts, writer: anytype) !void {
     try writer.writeAll("<!DOCTYPE html>\n");
-    try writeChildren(parser.documentToNode(doc), writer);
+    try writeChildren(parser.documentToNode(doc), opts, writer);
     try writer.writeAll("\n");
 }
 
-pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
+// 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, opts: Opts, writer: anytype) anyerror!void {
     switch (try parser.nodeType(node)) {
         .element => {
             // open the tag
+            const tag_type = try parser.elementHTMLGetTagType(@ptrCast(node));
+            if (tag_type == .script and opts.exclude_scripts) {
+                return;
+            }
+
             const tag = try parser.nodeLocalName(node);
             try writer.writeAll("<");
             try writer.writeAll(tag);
@@ -56,9 +91,13 @@ pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
             // void elements can't have any content.
             if (try isVoid(parser.nodeToElement(node))) return;
 
-            // write the children
-            // TODO avoid recursion
-            try writeChildren(node, writer);
+            if (tag_type == .script) {
+                try writer.writeAll(try parser.nodeTextContent(node) orelse "");
+            } else {
+                // write the children
+                // TODO avoid recursion
+                try writeChildren(node, opts, writer);
+            }
 
             // close the tag
             try writer.writeAll("</");
@@ -88,7 +127,7 @@ pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
         .document_fragment => return,
         // document will never be called, but required for completeness.
         .document => return,
-        // done globally instead, but required for completeness.
+        // done globally instead, but required for completeness. Only the outer DOCTYPE should be written
         .document_type => return,
         // deprecated
         .attribute => return,
@@ -99,12 +138,12 @@ pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
 }
 
 // writer must be a std.io.Writer
-pub fn writeChildren(root: *parser.Node, writer: anytype) !void {
+pub fn writeChildren(root: *parser.Node, opts: Opts, 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);
+        try writeNode(next.?, opts, writer);
     }
 }
 
@@ -156,6 +195,9 @@ fn writeEscapedAttributeValue(writer: anytype, value: []const u8) !void {
 
 const testing = std.testing;
 test "dump.writeHTML" {
+    try parser.init();
+    defer parser.deinit();
+
     try testWriteHTML(
         "<div id=\"content\">Over 9000!</div>",
         "<div id=\"content\">Over 9000!</div>",
@@ -182,6 +224,11 @@ test "dump.writeHTML" {
         \\</head><body>9000</body></html>
         \\
     , "<html><title>It's over what?</title><meta name=a value=\"b\">\n<body>9000");
+
+    try testWriteHTML(
+        "<p>hi</p><script>alert(power > 9000)</script>",
+        "<p>hi</p><script>alert(power > 9000)</script>",
+    );
 }
 
 fn testWriteHTML(comptime expected_body: []const u8, src: []const u8) !void {
@@ -200,6 +247,6 @@ fn testWriteFullHTML(comptime expected: []const u8, src: []const u8) !void {
     defer parser.documentHTMLClose(doc_html) catch {};
 
     const doc = parser.documentHTMLToDocument(doc_html);
-    try writeHTML(doc, buf.writer(testing.allocator));
+    try writeHTML(doc, .{}, buf.writer(testing.allocator));
     try testing.expectEqualStrings(expected, buf.items);
 }

src/browser/encoding/TextDecoder.zig

@@ -0,0 +1,107 @@
+// 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 Env = @import("../env.zig").Env;
+
+// https://encoding.spec.whatwg.org/#interface-textdecoder
+const TextDecoder = @This();
+
+const SupportedLabels = enum {
+    utf8,
+    @"utf-8",
+    @"unicode-1-1-utf-8",
+};
+
+const Options = struct {
+    fatal: bool = false,
+    ignoreBOM: bool = false,
+};
+
+fatal: bool,
+ignore_bom: bool,
+
+pub fn constructor(label_: ?[]const u8, opts_: ?Options) !TextDecoder {
+    if (label_) |l| {
+        _ = std.meta.stringToEnum(SupportedLabels, l) orelse {
+            log.warn(.web_api, "not implemented", .{ .feature = "TextDecoder label", .label = l });
+            return error.NotImplemented;
+        };
+    }
+    const opts = opts_ orelse Options{};
+    return .{
+        .fatal = opts.fatal,
+        .ignore_bom = opts.ignoreBOM,
+    };
+}
+
+pub fn get_encoding(_: *const TextDecoder) []const u8 {
+    return "utf-8";
+}
+
+pub fn get_ignoreBOM(self: *const TextDecoder) bool {
+    return self.ignore_bom;
+}
+
+pub fn get_fatal(self: *const TextDecoder) bool {
+    return self.fatal;
+}
+
+// TODO: Should accept an ArrayBuffer, TypedArray or DataView
+// js.zig will currently only map a TypedArray to our []const u8.
+pub fn _decode(self: *const TextDecoder, v: []const u8) ![]const u8 {
+    if (self.fatal and !std.unicode.utf8ValidateSlice(v)) {
+        return error.InvalidUtf8;
+    }
+
+    if (self.ignore_bom == false and std.mem.startsWith(u8, v, &.{ 0xEF, 0xBB, 0xBF })) {
+        return v[3..];
+    }
+
+    return v;
+}
+
+const testing = @import("../../testing.zig");
+test "Browser.Encoding.TextDecoder" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .html = "",
+    });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let d1 = new TextDecoder();", null },
+        .{ "d1.encoding;", "utf-8" },
+        .{ "d1.fatal", "false" },
+        .{ "d1.ignoreBOM", "false" },
+        .{ "d1.decode(new Uint8Array([240, 160, 174, 183]))", "𠮷" },
+        .{ "d1.decode(new Uint8Array([0xEF, 0xBB, 0xBF, 240, 160, 174, 183]))", "𠮷" },
+        .{ "d1.decode(new Uint8Array([49, 50]).buffer)", "12" },
+
+        .{ "let d2 = new TextDecoder('utf8', {fatal: true})", null },
+        .{
+            \\ try {
+            \\    let data  = new Uint8Array([240, 240, 160, 174, 183]);
+            \\    d2.decode(data);
+            \\ } catch (e) {e}
+            ,
+            "Error: InvalidUtf8",
+        },
+    }, .{});
+}

src/browser/encoding/TextEncoder.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -20,39 +20,37 @@ 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 .{};
+const TextEncoder = @This();
+
+pub fn constructor() !TextEncoder {
+    return .{};
+}
+
+pub fn get_encoding(_: *const TextEncoder) []const u8 {
+    return "utf-8";
+}
+
+pub fn _encode(_: *const TextEncoder, v: []const u8) !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;
     }
 
-    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 };
-    }
-};
+    return .{ .values = v };
+}
 
 const testing = @import("../../testing.zig");
 test "Browser.Encoding.TextEncoder" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .html = "",
+    });
     defer runner.deinit();
 
     try runner.testCases(&.{
-        .{ "var encoder = new TextEncoder();", "undefined" },
+        .{ "var encoder = new TextEncoder();", null },
         .{ "encoder.encoding;", "utf-8" },
         .{ "encoder.encode('€');", "226,130,172" },
 

src/browser/encoding/encoding.zig

@@ -0,0 +1,22 @@
+// 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/>.
+
+pub const Interfaces = .{
+    @import("TextDecoder.zig"),
+    @import("TextEncoder.zig"),
+};

src/browser/env.zig

@@ -1,34 +1,32 @@
 const std = @import("std");
 
-const parser = @import("netsurf.zig");
-const URL = @import("../url.zig").URL;
+const Page = @import("page.zig").Page;
 const js = @import("../runtime/js.zig");
-const storage = @import("storage/storage.zig");
 const generate = @import("../runtime/generate.zig");
-const Renderer = @import("renderer.zig").Renderer;
-const Loop = @import("../runtime/loop.zig").Loop;
-const HttpClient = @import("../http/client.zig").Client;
 
 const WebApis = struct {
     // Wrapped like this for debug ergonomics.
     // When we create our Env, a few lines down, we define it as:
-    //   pub const Env = js.Env(*SessionState, WebApis);
+    //   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.SessionState, browser.env.WebApis)
+    // 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(*SessionState, Interfaces);
+    //   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.env.SessionState, .{...A HUNDRED TYPES...})
+    //   runtime.js.Env(*browser.Page, .{...A HUNDRED TYPES...})
     pub const Interfaces = generate.Tuple(.{
         @import("crypto/crypto.zig").Crypto,
         @import("console/console.zig").Console,
+        @import("css/css.zig").Interfaces,
+        @import("cssom/cssom.zig").Interfaces,
         @import("dom/dom.zig").Interfaces,
-        @import("encoding/text_encoder.zig").Interfaces,
+        @import("dom/shadow_root.zig").ShadowRoot,
+        @import("encoding/encoding.zig").Interfaces,
         @import("events/event.zig").Interfaces,
         @import("html/html.zig").Interfaces,
         @import("iterator/iterator.zig").Interfaces,
@@ -42,21 +40,9 @@ const WebApis = struct {
 
 pub const JsThis = Env.JsThis;
 pub const JsObject = Env.JsObject;
-pub const Callback = Env.Callback;
-pub const Env = js.Env(*SessionState, WebApis);
+pub const Function = Env.Function;
+pub const Promise = Env.Promise;
+pub const PromiseResolver = Env.PromiseResolver;
+
+pub const Env = js.Env(*Page, WebApis);
 pub const Global = @import("html/window.zig").Window;
-
-pub const SessionState = struct {
-    loop: *Loop,
-    url: *const URL,
-    renderer: *Renderer,
-    arena: std.mem.Allocator,
-    http_client: *HttpClient,
-    cookie_jar: *storage.CookieJar,
-    document: ?*parser.DocumentHTML,
-
-    // dangerous, but set by the JS framework
-    // shorter-lived than the arena above, which
-    // exists for the entire rendering of the page
-    call_arena: std.mem.Allocator = undefined,
-};

src/browser/events/custom_event.zig

@@ -23,6 +23,7 @@ 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,

src/browser/events/event.zig

@@ -19,25 +19,24 @@
 const std = @import("std");
 const Allocator = std.mem.Allocator;
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const Callback = @import("../env.zig").Callback;
 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 AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
-
-const log = std.log.scoped(.events);
+const MouseEvent = @import("mouse_event.zig").MouseEvent;
+const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
+const MessageEvent = @import("../dom/MessageChannel.zig").MessageEvent;
 
 // Event interfaces
-pub const Interfaces = .{
-    Event,
-    CustomEvent,
-    ProgressEvent,
-};
+pub const Interfaces = .{ Event, CustomEvent, ProgressEvent, MouseEvent, ErrorEvent, MessageEvent };
 
 pub const Union = generate.Union(Interfaces);
 
@@ -57,9 +56,12 @@ pub const Event = struct {
 
     pub fn toInterface(evt: *parser.Event) !Union {
         return switch (try parser.eventGetInternalType(evt)) {
-            .event => .{ .Event = evt },
+            .event, .abort_signal, .xhr_event => .{ .Event = evt },
             .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
             .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
+            .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
+            .error_event => .{ .ErrorEvent = @as(*ErrorEvent, @ptrCast(evt)).* },
+            .message_event => .{ .MessageEvent = @as(*MessageEvent, @ptrCast(evt)).* },
         };
     }
 
@@ -75,16 +77,16 @@ pub const Event = struct {
         return try parser.eventType(self);
     }
 
-    pub fn get_target(self: *parser.Event) !?EventTargetUnion {
+    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.?);
+        return try EventTarget.toInterface(et.?, page);
     }
 
-    pub fn get_currentTarget(self: *parser.Event) !?EventTargetUnion {
+    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.?);
+        return try EventTarget.toInterface(et.?, page);
     }
 
     pub fn get_eventPhase(self: *parser.Event) !u8 {
@@ -140,33 +142,188 @@ pub const Event = struct {
 };
 
 pub const EventHandler = struct {
-    callback: Callback,
+    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: ?*AbortSignal, // 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;
+        var signal: ?*AbortSignal = null;
+
+        if (opts_) |opts| {
+            switch (opts) {
+                .capture => |c| capture = c,
+                .flags => |f| {
+                    once = f.once orelse false;
+                    signal = f.signal orelse null;
+                    capture = f.capture orelse false;
+                },
+            }
+        }
+
+        const callback = (try listener.callback(target)) orelse return null;
+
+        if (signal) |s| {
+            const signal_target = parser.toEventTarget(AbortSignal, s);
+
+            const scb = try allocator.create(SignalCallback);
+            scb.* = .{
+                .target = target,
+                .capture = capture,
+                .callback_id = callback.id,
+                .typ = try allocator.dupe(u8, typ),
+                .signal_target = signal_target,
+                .signal_listener = undefined,
+                .node = .{ .func = SignalCallback.handle },
+            };
+
+            scb.signal_listener = try parser.eventTargetAddEventListener(
+                signal_target,
+                "abort",
+                &scb.node,
+                false,
+            );
+        }
+
+        // check if event target has already this listener
+        if (try parser.eventTargetHasListener(target, typ, capture, callback.id) != null) {
+            return null;
+        }
 
-    pub fn init(allocator: Allocator, callback: Callback) !*EventHandler {
         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("Event.toInterface: {}", .{err});
+            log.err(.app, "toInterface error", .{ .err = err });
             return;
         };
 
         const self: *EventHandler = @fieldParentPtr("node", node);
-        var result: Callback.Result = undefined;
-        self.callback.tryCall(.{ievent}, &result) catch {
-            log.err("event handler error: {s}", .{result.exception});
-            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        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 SignalCallback = struct {
+    typ: []const u8,
+    capture: bool,
+    callback_id: usize,
+    node: parser.EventNode,
+    target: *parser.EventTarget,
+    signal_target: *parser.EventTarget,
+    signal_listener: *parser.EventListener,
+
+    fn handle(node: *parser.EventNode, _: *parser.Event) void {
+        const self: *SignalCallback = @fieldParentPtr("node", node);
+        self._handle() catch |err| {
+            log.err(.app, "event signal handler", .{ .err = err });
+        };
+    }
+
+    fn _handle(self: *SignalCallback) !void {
+        const lst = try parser.eventTargetHasListener(
+            self.target,
+            self.typ,
+            self.capture,
+            self.callback_id,
+        );
+        if (lst == null) {
+            return;
+        }
+
+        try parser.eventTargetRemoveEventListener(
+            self.target,
+            self.typ,
+            lst.?,
+            self.capture,
+        );
+
+        // remove the abort signal listener itself
+        try parser.eventTargetRemoveEventListener(
+            self.signal_target,
+            "abort",
+            self.signal_listener,
+            false,
+        );
     }
 };
 
@@ -267,4 +424,26 @@ test "Browser.Event" {
         .{ "document.dispatchEvent(new Event('count'))", "true" },
         .{ "nb", "0" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "document.addEventListener('count', cbk, {once: true})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "1" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "let ac = new AbortController()", null },
+        .{ "document.addEventListener('count', cbk, {signal: ac.signal})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "ac.abort()", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "2" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
 }

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

@@ -0,0 +1,187 @@
+// 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 Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+pub const Interfaces = .{
+    AbortController,
+    AbortSignal,
+};
+
+const AbortController = @This();
+
+signal: *AbortSignal,
+
+pub fn constructor(page: *Page) !AbortController {
+    // Why do we allocate this rather than storing directly in the struct?
+    // https://github.com/lightpanda-io/project/discussions/165
+    const signal = try page.arena.create(AbortSignal);
+    signal.* = .init;
+
+    return .{
+        .signal = signal,
+    };
+}
+
+pub fn get_signal(self: *AbortController) *AbortSignal {
+    return self.signal;
+}
+
+pub fn _abort(self: *AbortController, reason_: ?[]const u8) !void {
+    return self.signal.abort(reason_);
+}
+
+pub const AbortSignal = struct {
+    const DEFAULT_REASON = "AbortError";
+
+    pub const prototype = *EventTarget;
+    proto: parser.EventTargetTBase = .{ .internal_target_type = .abort_signal },
+
+    aborted: bool,
+    reason: ?[]const u8,
+
+    pub const init: AbortSignal = .{
+        .reason = null,
+        .aborted = false,
+    };
+
+    pub fn static_abort(reason_: ?[]const u8) AbortSignal {
+        return .{
+            .aborted = true,
+            .reason = reason_ orelse DEFAULT_REASON,
+        };
+    }
+
+    pub fn static_timeout(delay: u32, page: *Page) !*AbortSignal {
+        const callback = try page.arena.create(TimeoutCallback);
+        callback.* = .{
+            .signal = .init,
+            .node = .{ .func = TimeoutCallback.run },
+        };
+
+        const delay_ms: u63 = @as(u63, delay) * std.time.ns_per_ms;
+        _ = try page.loop.timeout(delay_ms, &callback.node);
+        return &callback.signal;
+    }
+
+    pub fn get_aborted(self: *const AbortSignal) bool {
+        return self.aborted;
+    }
+
+    fn abort(self: *AbortSignal, reason_: ?[]const u8) !void {
+        self.aborted = true;
+        self.reason = reason_ orelse DEFAULT_REASON;
+
+        const abort_event = try parser.eventCreate();
+        try parser.eventSetInternalType(abort_event, .abort_signal);
+
+        defer parser.eventDestroy(abort_event);
+        try parser.eventInit(abort_event, "abort", .{});
+        _ = try parser.eventTargetDispatchEvent(
+            parser.toEventTarget(AbortSignal, self),
+            abort_event,
+        );
+    }
+
+    const Reason = union(enum) {
+        reason: []const u8,
+        undefined: void,
+    };
+    pub fn get_reason(self: *const AbortSignal) Reason {
+        if (self.reason) |r| {
+            return .{ .reason = r };
+        }
+        return .{ .undefined = {} };
+    }
+
+    const ThrowIfAborted = union(enum) {
+        exception: Env.Exception,
+        undefined: void,
+    };
+    pub fn _throwIfAborted(self: *const AbortSignal, page: *Page) ThrowIfAborted {
+        if (self.aborted) {
+            const ex = page.main_context.throw(self.reason orelse DEFAULT_REASON);
+            return .{ .exception = ex };
+        }
+        return .{ .undefined = {} };
+    }
+};
+
+const TimeoutCallback = struct {
+    signal: AbortSignal,
+
+    // This is the internal data that the event loop tracks. We'll get this
+    // back in run and, from it, can get our TimeoutCallback instance
+    node: Loop.CallbackNode = undefined,
+
+    fn run(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *TimeoutCallback = @fieldParentPtr("node", node);
+        self.signal.abort("TimeoutError") catch |err| {
+            log.warn(.app, "abort signal timeout", .{ .err = err });
+        };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.AbortController" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var called = 0", null },
+        .{ "var a1 = new AbortController()", null },
+        .{ "var s1 = a1.signal", null },
+        .{ "s1.throwIfAborted()", "undefined" },
+        .{ "s1.reason", "undefined" },
+        .{ "var target;", null },
+        .{
+            \\ s1.addEventListener('abort', (e) => {
+            \\   called += 1;
+            \\   target = e.target;
+            \\
+            \\ });
+            ,
+            null,
+        },
+        .{ "a1.abort()", null },
+        .{ "s1.aborted", "true" },
+        .{ "target == s1", "true" },
+        .{ "s1.reason", "AbortError" },
+        .{ "called", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var s2 = AbortSignal.abort('over 9000')", null },
+        .{ "s2.aborted", "true" },
+        .{ "s2.reason", "over 9000" },
+        .{ "AbortSignal.abort().reason", "AbortError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var s3 = AbortSignal.timeout(10)", null },
+        .{ "s3.aborted", "true" },
+        .{ "s3.reason", "TimeoutError" },
+        .{ "try { s3.throwIfAborted() } catch (e) { e }", "Error: TimeoutError" },
+    }, .{});
+}

src/browser/html/DataSet.zig

@@ -0,0 +1,97 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+const std = @import("std");
+const parser = @import("../netsurf.zig");
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+
+const Allocator = std.mem.Allocator;
+
+const DataSet = @This();
+
+element: *parser.Element,
+
+pub fn named_get(self: *const DataSet, name: []const u8, _: *bool, page: *Page) !Env.UndefinedOr([]const u8) {
+    const normalized_name = try normalize(page.call_arena, name);
+    if (try parser.elementGetAttribute(self.element, normalized_name)) |value| {
+        return .{ .value = value };
+    }
+    return .undefined;
+}
+
+pub fn named_set(self: *DataSet, name: []const u8, value: []const u8, _: *bool, page: *Page) !void {
+    const normalized_name = try normalize(page.call_arena, name);
+    try parser.elementSetAttribute(self.element, normalized_name, value);
+}
+
+pub fn named_delete(self: *DataSet, name: []const u8, _: *bool, page: *Page) !void {
+    const normalized_name = try normalize(page.call_arena, name);
+    try parser.elementRemoveAttribute(self.element, normalized_name);
+}
+
+fn normalize(allocator: Allocator, name: []const u8) ![]const u8 {
+    var upper_count: usize = 0;
+    for (name) |c| {
+        if (std.ascii.isUpper(c)) {
+            upper_count += 1;
+        }
+    }
+    // for every upper-case letter, we'll probably need a dash before it
+    // and we need the 'data-' prefix
+    var normalized = try allocator.alloc(u8, name.len + upper_count + 5);
+
+    @memcpy(normalized[0..5], "data-");
+    if (upper_count == 0) {
+        @memcpy(normalized[5..], name);
+        return normalized;
+    }
+
+    var pos: usize = 5;
+    for (name) |c| {
+        if (std.ascii.isUpper(c)) {
+            normalized[pos] = '-';
+            pos += 1;
+            normalized[pos] = c + 32;
+        } else {
+            normalized[pos] = c;
+        }
+        pos += 1;
+    }
+    return normalized;
+}
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.DataSet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let el1 = document.createElement('div')", null },
+        .{ "el1.dataset.x", "undefined" },
+        .{ "el1.dataset.x = '123'", "123" },
+        .{ "delete el1.dataset.x", "true" },
+        .{ "el1.dataset.x", "undefined" },
+        .{ "delete el1.dataset.other", "true" }, // yes, this is right
+
+        .{ "let ds1 = el1.dataset", null },
+        .{ "ds1.helloWorld = 'yes'", null },
+        .{ "el1.getAttribute('data-hello-world')", "yes" },
+        .{ "el1.setAttribute('data-this-will-work', 'positive')", null },
+        .{ "ds1.thisWillWork", "positive" },
+    }, .{});
+}

src/browser/html/document.zig

@@ -18,9 +18,13 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
+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;
@@ -38,8 +42,12 @@ pub const HTMLDocument = struct {
     // JS funcs
     // --------
 
-    pub fn get_domain(self: *parser.DocumentHTML) ![]const u8 {
-        return try parser.documentHTMLGetDomain(self);
+    pub fn get_domain(self: *parser.DocumentHTML, page: *Page) ![]const u8 {
+        // libdom's document_html get_domain always returns null, this is
+        // the way MDN recommends getting the domain anyways, since document.domain
+        // is deprecated.
+        const location = try parser.documentHTMLGetLocation(Location, self) orelse return "";
+        return location.get_host(page);
     }
 
     pub fn set_domain(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
@@ -75,18 +83,22 @@ pub const HTMLDocument = struct {
         }
     }
 
-    pub fn get_cookie(_: *parser.DocumentHTML, state: *SessionState) ![]const u8 {
+    pub fn get_cookie(_: *parser.DocumentHTML, page: *Page) ![]const u8 {
         var buf: std.ArrayListUnmanaged(u8) = .{};
-        try state.cookie_jar.forRequest(&state.url.uri, buf.writer(state.arena), .{ .navigation = true });
+        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, state: *SessionState) ![]const u8 {
+    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(state.cookie_jar.allocator, &state.url.uri, cookie_str);
+        const c = try Cookie.parse(page.cookie_jar.allocator, &page.url.uri, cookie_str);
         errdefer c.deinit();
-        try state.cookie_jar.add(c, std.time.timestamp());
+        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;
     }
 
@@ -99,8 +111,8 @@ pub const HTMLDocument = struct {
         return v;
     }
 
-    pub fn _getElementsByName(self: *parser.DocumentHTML, name: []const u8, state: *SessionState) !NodeList {
-        const arena = state.arena;
+    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;
@@ -119,24 +131,24 @@ pub const HTMLDocument = struct {
         return list;
     }
 
-    pub fn get_images(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "img", false);
+    pub fn get_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, state: *SessionState) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "embed", 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, state: *SessionState) !collection.HTMLCollection {
-        return get_embeds(self, state);
+    pub fn get_plugins(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
+        return get_embeds(self, page);
     }
 
-    pub fn get_forms(self: *parser.DocumentHTML, state: *SessionState) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "form", false);
+    pub fn get_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, state: *SessionState) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(state.arena, parser.documentHTMLToNode(self), "script", 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 {
@@ -163,6 +175,10 @@ pub const HTMLDocument = struct {
         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";
     }
@@ -171,6 +187,15 @@ pub const HTMLDocument = struct {
         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 {}
@@ -207,6 +232,69 @@ pub const HTMLDocument = struct {
     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.
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) !?ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) 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.
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) ![]ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) 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;
+
+        log.debug(.script_event, "dispatch event", .{
+            .type = "DOMContentLoaded",
+            .source = "document",
+        });
+
+        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, self), evt);
+
+        try page.window.dispatchForDocumentTarget(evt);
+    }
+
+    pub fn documentIsComplete(self: *parser.DocumentHTML, page: *Page) !void {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        state.ready_state = .complete;
+    }
 };
 
 // Tests
@@ -225,7 +313,7 @@ test "Browser.HTML.Document" {
     }, .{});
 
     try runner.testCases(&.{
-        .{ "document.domain", "" },
+        .{ "document.domain", "lightpanda.io" },
         .{ "document.referrer", "" },
         .{ "document.title", "" },
         .{ "document.body.localName", "body" },
@@ -259,6 +347,42 @@ test "Browser.HTML.Document" {
         .{ "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(&.{
@@ -267,4 +391,22 @@ test "Browser.HTML.Document" {
         .{ "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/elements.zig

@@ -16,14 +16,21 @@
 // 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 SessionState = @import("../env.zig").SessionState;
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
 
+const urlStitch = @import("../../url.zig").URL.stitch;
 const URL = @import("../url/url.zig").URL;
 const Node = @import("../dom/node.zig").Node;
 const Element = @import("../dom/element.zig").Element;
+const DataSet = @import("DataSet.zig");
+
+const StyleSheet = @import("../cssom/stylesheet.zig").StyleSheet;
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // HTMLElement interfaces
 pub const Interfaces = .{
@@ -47,7 +54,6 @@ pub const Interfaces = .{
     HTMLEmbedElement,
     HTMLFieldSetElement,
     HTMLFontElement,
-    HTMLFormElement,
     HTMLFrameElement,
     HTMLFrameSetElement,
     HTMLHRElement,
@@ -56,6 +62,7 @@ pub const Interfaces = .{
     HTMLHtmlElement,
     HTMLIFrameElement,
     HTMLImageElement,
+    HTMLImageElement.Factory,
     HTMLInputElement,
     HTMLLIElement,
     HTMLLabelElement,
@@ -77,7 +84,6 @@ pub const Interfaces = .{
     HTMLProgressElement,
     HTMLQuoteElement,
     HTMLScriptElement,
-    HTMLSelectElement,
     HTMLSourceElement,
     HTMLSpanElement,
     HTMLStyleElement,
@@ -94,7 +100,9 @@ pub const Interfaces = .{
     HTMLTrackElement,
     HTMLUListElement,
     HTMLVideoElement,
-    CSSProperties,
+
+    @import("form.zig").HTMLFormElement,
+    @import("select.zig").HTMLSelectElement,
 };
 
 pub const Union = generate.Union(Interfaces);
@@ -102,15 +110,23 @@ pub const Union = generate.Union(Interfaces);
 // Abstract class
 // --------------
 
-const CSSProperties = struct {};
-
 pub const HTMLElement = struct {
     pub const Self = parser.ElementHTML;
     pub const prototype = *Element;
     pub const subtype = .node;
 
-    pub fn get_style(_: *parser.ElementHTML) CSSProperties {
-        return .{};
+    pub fn get_style(e: *parser.ElementHTML, page: *Page) !*CSSStyleDeclaration {
+        const state = try page.getOrCreateNodeState(@ptrCast(e));
+        return &state.style;
+    }
+
+    pub fn get_dataset(e: *parser.ElementHTML, page: *Page) !*DataSet {
+        const state = try page.getOrCreateNodeState(@ptrCast(e));
+        if (state.dataset) |*ds| {
+            return ds;
+        }
+        state.dataset = DataSet{ .element = @ptrCast(e) };
+        return &state.dataset.?;
     }
 
     pub fn get_innerText(e: *parser.ElementHTML) ![]const u8 {
@@ -129,7 +145,7 @@ pub const HTMLElement = struct {
         try Node.removeChildren(n);
 
         // attach the text node.
-        _ = try parser.nodeAppendChild(n, @as(*parser.Node, @ptrCast(t)));
+        _ = try parser.nodeAppendChild(n, @as(*parser.Node, @alignCast(@ptrCast(t))));
     }
 
     pub fn _click(e: *parser.ElementHTML) !void {
@@ -143,6 +159,20 @@ pub const HTMLElement = struct {
         });
         _ = try parser.elementDispatchEvent(@ptrCast(e), @ptrCast(event));
     }
+
+    const FocusOpts = struct {
+        preventScroll: bool,
+        focusVisible: bool,
+    };
+    pub fn _focus(e: *parser.ElementHTML, _: ?FocusOpts, page: *Page) !void {
+        if (!try page.isNodeAttached(@ptrCast(e))) {
+            return;
+        }
+
+        const Document = @import("../dom/document.zig").Document;
+        const root_node = try parser.nodeGetRootNode(@ptrCast(e));
+        try Document.setFocus(@ptrCast(root_node), e, page);
+    }
 };
 
 // Deprecated HTMLElements in Chrome (2023/03/15)
@@ -189,8 +219,9 @@ pub const HTMLAnchorElement = struct {
         return try parser.anchorGetHref(self);
     }
 
-    pub fn set_href(self: *parser.Anchor, href: []const u8) !void {
-        return try parser.anchorSetHref(self, href);
+    pub fn set_href(self: *parser.Anchor, href: []const u8, page: *const Page) !void {
+        const full = try urlStitch(page.call_arena, href, page.url.raw, .{});
+        return try parser.anchorSetHref(self, full);
     }
 
     pub fn get_hreflang(self: *parser.Anchor) ![]const u8 {
@@ -225,26 +256,35 @@ pub const HTMLAnchorElement = struct {
         return try parser.nodeSetTextContent(parser.anchorToNode(self), v);
     }
 
-    inline fn url(self: *parser.Anchor, state: *SessionState) !URL {
-        const href = try parser.anchorGetHref(self);
-        return URL.constructor(href, null, state); // TODO inject base url
+    fn url(self: *parser.Anchor, page: *Page) !URL {
+        // Although the URL.constructor union accepts an .{.element = X}, we
+        // can't use this here because the behavior is different.
+        //    URL.constructor(document.createElement('a')
+        // should fail (a.href isn't a valid URL)
+        // But
+        //     document.createElement('a').host
+        // should not fail, it should return an empty string
+        if (try parser.elementGetAttribute(@alignCast(@ptrCast(self)), "href")) |href| {
+            return URL.constructor(.{ .string = href }, null, page); // TODO inject base url
+        }
+        return .empty;
     }
 
     // TODO return a disposable string
-    pub fn get_origin(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try u.get_origin(state);
+    pub fn get_origin(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try u.get_origin(page);
     }
 
     // TODO return a disposable string
-    pub fn get_protocol(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return u.get_protocol(state);
+    pub fn get_protocol(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return u.get_protocol(page);
     }
 
-    pub fn set_protocol(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_protocol(self: *parser.Anchor, v: []const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
 
         u.uri.scheme = v;
         const href = try u.toString(arena);
@@ -252,12 +292,12 @@ pub const HTMLAnchorElement = struct {
     }
 
     // TODO return a disposable string
-    pub fn get_host(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try u.get_host(state);
+    pub fn get_host(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try u.get_host(page);
     }
 
-    pub fn set_host(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
+    pub fn set_host(self: *parser.Anchor, v: []const u8, page: *Page) !void {
         // search : separator
         var p: ?u16 = null;
         var h: []const u8 = undefined;
@@ -269,8 +309,8 @@ pub const HTMLAnchorElement = struct {
             }
         }
 
-        const arena = state.arena;
-        var u = try url(self, state);
+        const arena = page.arena;
+        var u = try url(self, page);
 
         if (p) |pp| {
             u.uri.host = .{ .raw = h };
@@ -284,29 +324,28 @@ pub const HTMLAnchorElement = struct {
         try parser.anchorSetHref(self, href);
     }
 
-    // TODO return a disposable string
-    pub fn get_hostname(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try state.arena.dupe(u8, u.get_hostname());
+    pub fn get_hostname(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return u.get_hostname();
     }
 
-    pub fn set_hostname(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_hostname(self: *parser.Anchor, v: []const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
         u.uri.host = .{ .raw = v };
         const href = try u.toString(arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_port(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try u.get_port(state);
+    pub fn get_port(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try u.get_port(page);
     }
 
-    pub fn set_port(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_port(self: *parser.Anchor, v: ?[]const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
 
         if (v != null and v.?.len > 0) {
             u.uri.port = try std.fmt.parseInt(u16, v.?, 10);
@@ -319,14 +358,14 @@ pub const HTMLAnchorElement = struct {
     }
 
     // TODO return a disposable string
-    pub fn get_username(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try state.arena.dupe(u8, u.get_username());
+    pub fn get_username(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return u.get_username();
     }
 
-    pub fn set_username(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_username(self: *parser.Anchor, v: ?[]const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
 
         if (v) |vv| {
             u.uri.user = .{ .raw = vv };
@@ -339,14 +378,14 @@ pub const HTMLAnchorElement = struct {
     }
 
     // TODO return a disposable string
-    pub fn get_password(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try state.arena.dupe(u8, u.get_password());
+    pub fn get_password(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try page.arena.dupe(u8, u.get_password());
     }
 
-    pub fn set_password(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_password(self: *parser.Anchor, v: ?[]const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
 
         if (v) |vv| {
             u.uri.password = .{ .raw = vv };
@@ -359,49 +398,42 @@ pub const HTMLAnchorElement = struct {
     }
 
     // TODO return a disposable string
-    pub fn get_pathname(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try state.arena.dupe(u8, u.get_pathname());
+    pub fn get_pathname(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return u.get_pathname();
     }
 
-    pub fn set_pathname(self: *parser.Anchor, v: []const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_pathname(self: *parser.Anchor, v: []const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
         u.uri.path = .{ .raw = v };
         const href = try u.toString(arena);
 
         try parser.anchorSetHref(self, href);
     }
 
-    // TODO return a disposable string
-    pub fn get_search(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try u.get_search(state);
+    pub fn get_search(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try u.get_search(page);
     }
 
-    pub fn set_search(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
-
-        if (v) |vv| {
-            u.uri.query = .{ .raw = vv };
-        } else {
-            u.uri.query = null;
-        }
-        const href = try u.toString(arena);
+    pub fn set_search(self: *parser.Anchor, v: ?[]const u8, page: *Page) !void {
+        var u = try url(self, page);
+        try u.set_search(v, page);
 
+        const href = try u.toString(page.call_arena);
         try parser.anchorSetHref(self, href);
     }
 
     // TODO return a disposable string
-    pub fn get_hash(self: *parser.Anchor, state: *SessionState) ![]const u8 {
-        var u = try url(self, state);
-        return try u.get_hash(state);
+    pub fn get_hash(self: *parser.Anchor, page: *Page) ![]const u8 {
+        var u = try url(self, page);
+        return try u.get_hash(page);
     }
 
-    pub fn set_hash(self: *parser.Anchor, v: ?[]const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        var u = try url(self, state);
+    pub fn set_hash(self: *parser.Anchor, v: ?[]const u8, page: *Page) !void {
+        const arena = page.arena;
+        var u = try url(self, page);
 
         if (v) |vv| {
             u.uri.fragment = .{ .raw = vv };
@@ -516,12 +548,6 @@ pub const HTMLFontElement = struct {
     pub const subtype = .node;
 };
 
-pub const HTMLFormElement = struct {
-    pub const Self = parser.Form;
-    pub const prototype = *HTMLElement;
-    pub const subtype = .node;
-};
-
 pub const HTMLFrameElement = struct {
     pub const Self = parser.Frame;
     pub const prototype = *HTMLElement;
@@ -568,12 +594,148 @@ pub const HTMLImageElement = struct {
     pub const Self = parser.Image;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    pub fn get_alt(self: *parser.Image) ![]const u8 {
+        return try parser.imageGetAlt(self);
+    }
+    pub fn set_alt(self: *parser.Image, alt: []const u8) !void {
+        try parser.imageSetAlt(self, alt);
+    }
+    pub fn get_src(self: *parser.Image) ![]const u8 {
+        return try parser.imageGetSrc(self);
+    }
+    pub fn set_src(self: *parser.Image, src: []const u8) !void {
+        try parser.imageSetSrc(self, src);
+    }
+    pub fn get_useMap(self: *parser.Image) ![]const u8 {
+        return try parser.imageGetUseMap(self);
+    }
+    pub fn set_useMap(self: *parser.Image, use_map: []const u8) !void {
+        try parser.imageSetUseMap(self, use_map);
+    }
+    pub fn get_height(self: *parser.Image) !u32 {
+        return try parser.imageGetHeight(self);
+    }
+    pub fn set_height(self: *parser.Image, height: u32) !void {
+        try parser.imageSetHeight(self, height);
+    }
+    pub fn get_width(self: *parser.Image) !u32 {
+        return try parser.imageGetWidth(self);
+    }
+    pub fn set_width(self: *parser.Image, width: u32) !void {
+        try parser.imageSetWidth(self, width);
+    }
+    pub fn get_isMap(self: *parser.Image) !bool {
+        return try parser.imageGetIsMap(self);
+    }
+    pub fn set_isMap(self: *parser.Image, is_map: bool) !void {
+        try parser.imageSetIsMap(self, is_map);
+    }
+
+    pub const Factory = struct {
+        pub const js_name = "Image";
+        pub const subtype = .node;
+
+        pub const js_legacy_factory = true;
+        pub const prototype = *HTMLImageElement;
+
+        pub fn constructor(width: ?u32, height: ?u32, page: *const Page) !*parser.Image {
+            const element = try parser.documentCreateElement(parser.documentHTMLToDocument(page.window.document), "img");
+            const image: *parser.Image = @ptrCast(element);
+            if (width) |width_| try parser.imageSetWidth(image, width_);
+            if (height) |height_| try parser.imageSetHeight(image, height_);
+            return image;
+        }
+    };
 };
 
 pub const HTMLInputElement = struct {
     pub const Self = parser.Input;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    pub fn get_defaultValue(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetDefaultValue(self);
+    }
+    pub fn set_defaultValue(self: *parser.Input, default_value: []const u8) !void {
+        try parser.inputSetDefaultValue(self, default_value);
+    }
+    pub fn get_defaultChecked(self: *parser.Input) !bool {
+        return try parser.inputGetDefaultChecked(self);
+    }
+    pub fn set_defaultChecked(self: *parser.Input, default_checked: bool) !void {
+        try parser.inputSetDefaultChecked(self, default_checked);
+    }
+    pub fn get_form(self: *parser.Input) !?*parser.Form {
+        return try parser.inputGetForm(self);
+    }
+    pub fn get_accept(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetAccept(self);
+    }
+    pub fn set_accept(self: *parser.Input, accept: []const u8) !void {
+        try parser.inputSetAccept(self, accept);
+    }
+    pub fn get_alt(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetAlt(self);
+    }
+    pub fn set_alt(self: *parser.Input, alt: []const u8) !void {
+        try parser.inputSetAlt(self, alt);
+    }
+    pub fn get_checked(self: *parser.Input) !bool {
+        return try parser.inputGetChecked(self);
+    }
+    pub fn set_checked(self: *parser.Input, checked: bool) !void {
+        try parser.inputSetChecked(self, checked);
+    }
+    pub fn get_disabled(self: *parser.Input) !bool {
+        return try parser.inputGetDisabled(self);
+    }
+    pub fn set_disabled(self: *parser.Input, disabled: bool) !void {
+        try parser.inputSetDisabled(self, disabled);
+    }
+    pub fn get_maxLength(self: *parser.Input) !i32 {
+        return try parser.inputGetMaxLength(self);
+    }
+    pub fn set_maxLength(self: *parser.Input, max_length: i32) !void {
+        try parser.inputSetMaxLength(self, max_length);
+    }
+    pub fn get_name(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetName(self);
+    }
+    pub fn set_name(self: *parser.Input, name: []const u8) !void {
+        try parser.inputSetName(self, name);
+    }
+    pub fn get_readOnly(self: *parser.Input) !bool {
+        return try parser.inputGetReadOnly(self);
+    }
+    pub fn set_readOnly(self: *parser.Input, read_only: bool) !void {
+        try parser.inputSetReadOnly(self, read_only);
+    }
+    pub fn get_size(self: *parser.Input) !u32 {
+        return try parser.inputGetSize(self);
+    }
+    pub fn set_size(self: *parser.Input, size: i32) !void {
+        try parser.inputSetSize(self, size);
+    }
+    pub fn get_src(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetSrc(self);
+    }
+    pub fn set_src(self: *parser.Input, src: []const u8, page: *Page) !void {
+        const new_src = try urlStitch(page.call_arena, src, page.url.raw, .{ .alloc = .if_needed });
+        try parser.inputSetSrc(self, new_src);
+    }
+    pub fn get_type(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetType(self);
+    }
+    pub fn set_type(self: *parser.Input, type_: []const u8) !void {
+        try parser.inputSetType(self, type_);
+    }
+    pub fn get_value(self: *parser.Input) ![]const u8 {
+        return try parser.inputGetValue(self);
+    }
+    pub fn set_value(self: *parser.Input, value: []const u8) !void {
+        try parser.inputSetValue(self, value);
+    }
 };
 
 pub const HTMLLIElement = struct {
@@ -598,6 +760,15 @@ pub const HTMLLinkElement = struct {
     pub const Self = parser.Link;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    pub fn get_href(self: *parser.Link) ![]const u8 {
+        return try parser.linkGetHref(self);
+    }
+
+    pub fn set_href(self: *parser.Link, href: []const u8, page: *const Page) !void {
+        const full = try urlStitch(page.call_arena, href, page.url.raw, .{});
+        return try parser.linkSetHref(self, full);
+    }
 };
 
 pub const HTMLMapElement = struct {
@@ -804,12 +975,26 @@ pub const HTMLScriptElement = struct {
 
         return try parser.elementRemoveAttribute(parser.scriptToElt(self), "nomodule");
     }
-};
 
-pub const HTMLSelectElement = struct {
-    pub const Self = parser.Select;
-    pub const prototype = *HTMLElement;
-    pub const subtype = .node;
+    pub fn get_onload(self: *parser.Script, page: *Page) !?Env.Function {
+        const state = page.getNodeState(@alignCast(@ptrCast(self))) orelse return null;
+        return state.onload;
+    }
+
+    pub fn set_onload(self: *parser.Script, function: ?Env.Function, page: *Page) !void {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        state.onload = function;
+    }
+
+    pub fn get_onerror(self: *parser.Script, page: *Page) !?Env.Function {
+        const state = page.getNodeState(@alignCast(@ptrCast(self))) orelse return null;
+        return state.onerror;
+    }
+
+    pub fn set_onerror(self: *parser.Script, function: ?Env.Function, page: *Page) !void {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        state.onerror = function;
+    }
 };
 
 pub const HTMLSourceElement = struct {
@@ -828,6 +1013,18 @@ pub const HTMLStyleElement = struct {
     pub const Self = parser.Style;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    pub fn get_sheet(self: *parser.Style, page: *Page) !*StyleSheet {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.style_sheet) |ss| {
+            return ss;
+        }
+
+        const ss = try page.arena.create(StyleSheet);
+        ss.* = .{};
+        state.style_sheet = ss;
+        return ss;
+    }
 };
 
 pub const HTMLTableElement = struct {
@@ -870,6 +1067,16 @@ pub const HTMLTemplateElement = struct {
     pub const Self = parser.Template;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
+
+    pub fn get_content(self: *parser.Template, page: *Page) !*parser.DocumentFragment {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.template_content) |tc| {
+            return tc;
+        }
+        const tc = try parser.documentCreateDocumentFragment(@ptrCast(page.window.document));
+        state.template_content = tc;
+        return tc;
+    }
 };
 
 pub const HTMLTextAreaElement = struct {
@@ -911,6 +1118,7 @@ pub const HTMLVideoElement = struct {
 pub fn toInterface(comptime T: type, e: *parser.Element) !T {
     const elem: *align(@alignOf(*parser.Element)) parser.Element = @alignCast(e);
     const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(elem)));
+
     return switch (tag) {
         .abbr, .acronym, .address, .article, .aside, .b, .basefont, .bdi, .bdo, .bgsound, .big, .center, .cite, .code, .dd, .details, .dfn, .dt, .em, .figcaption, .figure, .footer, .header, .hgroup, .i, .isindex, .keygen, .kbd, .main, .mark, .marquee, .menu, .menuitem, .nav, .nobr, .noframes, .noscript, .rp, .rt, .ruby, .s, .samp, .section, .small, .spacer, .strike, .strong, .sub, .summary, .sup, .tt, .u, .wbr, ._var => .{ .HTMLElement = @as(*parser.ElementHTML, @ptrCast(elem)) },
         .a => .{ .HTMLAnchorElement = @as(*parser.Anchor, @ptrCast(elem)) },
@@ -988,62 +1196,62 @@ test "Browser.HTML.Element" {
     defer runner.deinit();
 
     try runner.testCases(&.{
-        .{ "let a = document.getElementById('link')", "undefined" },
-        .{ "a.target", "" },
-        .{ "a.target = '_blank'", "_blank" },
-        .{ "a.target", "_blank" },
-        .{ "a.target = ''", "" },
+        .{ "let link = document.getElementById('link')", "undefined" },
+        .{ "link.target", "" },
+        .{ "link.target = '_blank'", "_blank" },
+        .{ "link.target", "_blank" },
+        .{ "link.target = ''", "" },
 
-        .{ "a.href", "foo" },
-        .{ "a.href = 'https://lightpanda.io/'", "https://lightpanda.io/" },
-        .{ "a.href", "https://lightpanda.io/" },
+        .{ "link.href", "foo" },
+        .{ "link.href = 'https://lightpanda.io/'", "https://lightpanda.io/" },
+        .{ "link.href", "https://lightpanda.io/" },
 
-        .{ "a.origin", "https://lightpanda.io" },
+        .{ "link.origin", "https://lightpanda.io" },
 
-        .{ "a.host = 'lightpanda.io:443'", "lightpanda.io:443" },
-        .{ "a.host", "lightpanda.io:443" },
-        .{ "a.port", "443" },
-        .{ "a.hostname", "lightpanda.io" },
+        .{ "link.host = 'lightpanda.io:443'", "lightpanda.io:443" },
+        .{ "link.host", "lightpanda.io:443" },
+        .{ "link.port", "443" },
+        .{ "link.hostname", "lightpanda.io" },
 
-        .{ "a.host = 'lightpanda.io'", "lightpanda.io" },
-        .{ "a.host", "lightpanda.io" },
-        .{ "a.port", "" },
-        .{ "a.hostname", "lightpanda.io" },
+        .{ "link.host = 'lightpanda.io'", "lightpanda.io" },
+        .{ "link.host", "lightpanda.io" },
+        .{ "link.port", "" },
+        .{ "link.hostname", "lightpanda.io" },
 
-        .{ "a.host", "lightpanda.io" },
-        .{ "a.hostname", "lightpanda.io" },
-        .{ "a.hostname = 'foo.bar'", "foo.bar" },
-        .{ "a.href", "https://foo.bar/" },
+        .{ "link.host", "lightpanda.io" },
+        .{ "link.hostname", "lightpanda.io" },
+        .{ "link.hostname = 'foo.bar'", "foo.bar" },
+        .{ "link.href", "https://foo.bar/" },
 
-        .{ "a.search", "" },
-        .{ "a.search = 'q=bar'", "q=bar" },
-        .{ "a.search", "?q=bar" },
-        .{ "a.href", "https://foo.bar/?q=bar" },
+        .{ "link.search", "" },
+        .{ "link.search = 'q=bar'", "q=bar" },
+        .{ "link.search", "?q=bar" },
+        .{ "link.href", "https://foo.bar/?q=bar" },
 
-        .{ "a.hash", "" },
-        .{ "a.hash = 'frag'", "frag" },
-        .{ "a.hash", "#frag" },
-        .{ "a.href", "https://foo.bar/?q=bar#frag" },
+        .{ "link.hash", "" },
+        .{ "link.hash = 'frag'", "frag" },
+        .{ "link.hash", "#frag" },
+        .{ "link.href", "https://foo.bar/?q=bar#frag" },
 
-        .{ "a.port", "" },
-        .{ "a.port = '443'", "443" },
-        .{ "a.host", "foo.bar:443" },
-        .{ "a.hostname", "foo.bar" },
-        .{ "a.href", "https://foo.bar:443/?q=bar#frag" },
-        .{ "a.port = null", "null" },
-        .{ "a.href", "https://foo.bar/?q=bar#frag" },
+        .{ "link.port", "" },
+        .{ "link.port = '443'", "443" },
+        .{ "link.host", "foo.bar:443" },
+        .{ "link.hostname", "foo.bar" },
+        .{ "link.href", "https://foo.bar:443/?q=bar#frag" },
+        .{ "link.port = null", "null" },
+        .{ "link.href", "https://foo.bar/?q=bar#frag" },
 
-        .{ "a.href = 'foo'", "foo" },
+        .{ "link.href = 'foo'", "foo" },
 
-        .{ "a.type", "" },
-        .{ "a.type = 'text/html'", "text/html" },
-        .{ "a.type", "text/html" },
-        .{ "a.type = ''", "" },
+        .{ "link.type", "" },
+        .{ "link.type = 'text/html'", "text/html" },
+        .{ "link.type", "text/html" },
+        .{ "link.type = ''", "" },
 
-        .{ "a.text", "OK" },
-        .{ "a.text = 'foo'", "foo" },
-        .{ "a.text", "foo" },
-        .{ "a.text = 'OK'", "OK" },
+        .{ "link.text", "OK" },
+        .{ "link.text = 'foo'", "foo" },
+        .{ "link.text", "foo" },
+        .{ "link.text = 'OK'", "OK" },
     }, .{});
 
     try runner.testCases(&.{
@@ -1070,4 +1278,235 @@ test "Browser.HTML.Element" {
         .{ "document.getElementById('content').click()", "undefined" },
         .{ "click_count", "1" },
     }, .{});
+
+    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" },
+        .{ "style.setProperty('background-color', 'blue')", "undefined" },
+        .{ "style.getPropertyValue('background-color')", "blue" },
+        .{ "style.length", "4" },
+    }, .{});
+
+    // Image
+    try runner.testCases(&.{
+        // Testing constructors
+        .{ "(new Image).width", "0" },
+        .{ "(new Image).height", "0" },
+        .{ "(new Image(4)).width", "4" },
+        .{ "(new Image(4, 6)).height", "6" },
+
+        // Testing ulong property
+        .{ "let fruit = new Image", null },
+        .{ "fruit.width", "0" },
+        .{ "fruit.width = 5", "5" },
+        .{ "fruit.width", "5" },
+        .{ "fruit.width = '15'", "15" },
+        .{ "fruit.width", "15" },
+        .{ "fruit.width = 'apple'", "apple" },
+        .{ "fruit.width;", "0" },
+
+        // Testing string property
+        .{ "let lyric = new Image", null },
+        .{ "lyric.src", "" },
+        .{ "lyric.src = 'okay'", "okay" },
+        .{ "lyric.src", "okay" },
+        .{ "lyric.src = 15", "15" },
+        .{ "lyric.src", "15" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let a = document.createElement('a');", null },
+        .{ "a.href", "" },
+        .{ "a.host", "" },
+        .{ "a.href = 'about'", null },
+        .{ "a.href", "https://lightpanda.io/opensource-browser/about" },
+    }, .{});
+
+    // detached node cannot be focused
+    try runner.testCases(&.{
+        .{ "const focused = document.activeElement", null },
+        .{ "document.createElement('a').focus()", null },
+        .{ "document.activeElement === focused", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let l2 = document.createElement('link');", null },
+        .{ "l2.href", "" },
+        .{ "l2.href = 'https://lightpanda.io/opensource-browser/15'", null },
+        .{ "l2.href", "https://lightpanda.io/opensource-browser/15" },
+
+        .{ "l2.href = '/over/9000'", null },
+        .{ "l2.href", "https://lightpanda.io/over/9000" },
+    }, .{});
+}
+
+test "Browser.HTML.Element.DataSet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=x data-power='over 9000' data-empty data-some-long-key=ok></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{ .{ "let div = document.getElementById('x')", null }, .{ "div.dataset.nope", "undefined" }, .{ "div.dataset.power", "over 9000" }, .{ "div.dataset.empty", "" }, .{ "div.dataset.someLongKey", "ok" }, .{ "delete div.dataset.power", "true" }, .{ "div.dataset.power", "undefined" } }, .{});
+}
+
+test "Browser.HTML.HtmlInputElement.properties" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .url = "https://lightpanda.io/noslashattheend" });
+    defer runner.deinit();
+    var alloc = std.heap.ArenaAllocator.init(runner.app.allocator);
+    defer alloc.deinit();
+    const arena = alloc.allocator();
+
+    try runner.testCases(&.{.{ "let elem_input = document.createElement('input')", null }}, .{});
+
+    try runner.testCases(&.{.{ "elem_input.form", "null" }}, .{}); // Initial value
+    // Valid input.form is tested separately :Browser.HTML.HtmlInputElement.propeties.form
+    try testProperty(arena, &runner, "elem_input.form", "null", &.{.{ .input = "'foo'" }}); // Invalid
+
+    try runner.testCases(&.{.{ "elem_input.accept", "" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.accept", null, &str_valids); // Valid
+
+    try runner.testCases(&.{.{ "elem_input.alt", "" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.alt", null, &str_valids); // Valid
+
+    try runner.testCases(&.{.{ "elem_input.disabled", "false" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.disabled", null, &bool_valids); // Valid
+
+    try runner.testCases(&.{.{ "elem_input.maxLength", "-1" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.maxLength", null, &.{.{ .input = "5" }}); // Valid
+    try testProperty(arena, &runner, "elem_input.maxLength", "0", &.{.{ .input = "'banana'" }}); // Invalid
+    try runner.testCases(&.{.{ "try { elem_input.maxLength = -45 } catch(e) {e}", "Error: NegativeValueNotAllowed" }}, .{}); // Error
+
+    try runner.testCases(&.{.{ "elem_input.name", "" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.name", null, &str_valids); // Valid
+
+    try runner.testCases(&.{.{ "elem_input.readOnly", "false" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.readOnly", null, &bool_valids); // Valid
+
+    try runner.testCases(&.{.{ "elem_input.size", "20" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.size", null, &.{.{ .input = "5" }}); // Valid
+    try testProperty(arena, &runner, "elem_input.size", "20", &.{.{ .input = "-26" }}); // Invalid
+    try runner.testCases(&.{.{ "try { elem_input.size = 0 } catch(e) {e}", "Error: ZeroNotAllowed" }}, .{}); // Error
+    try runner.testCases(&.{.{ "try { elem_input.size = 'banana' } catch(e) {e}", "Error: ZeroNotAllowed" }}, .{}); // Error
+
+    try runner.testCases(&.{.{ "elem_input.src", "" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.src", null, &.{
+        .{ .input = "'foo'", .expected = "https://lightpanda.io/foo" }, // TODO stitch should work with spaces -> %20
+        .{ .input = "-3", .expected = "https://lightpanda.io/-3" },
+        .{ .input = "''", .expected = "https://lightpanda.io/noslashattheend" },
+    });
+
+    try runner.testCases(&.{.{ "elem_input.type", "text" }}, .{}); // Initial value
+    try testProperty(arena, &runner, "elem_input.type", null, &.{.{ .input = "'checkbox'", .expected = "checkbox" }}); // Valid
+    try testProperty(arena, &runner, "elem_input.type", "text", &.{.{ .input = "'5'" }}); // Invalid
+
+    // Properties that are related
+    try runner.testCases(&.{
+        .{ "let input_checked = document.createElement('input')", null },
+        .{ "input_checked.defaultChecked", "false" },
+        .{ "input_checked.checked", "false" },
+
+        .{ "input_checked.defaultChecked = true", "true" },
+        .{ "input_checked.defaultChecked", "true" },
+        .{ "input_checked.checked", "true" }, // Also perceived as true
+
+        .{ "input_checked.checked = false", "false" },
+        .{ "input_checked.defaultChecked", "true" },
+        .{ "input_checked.checked", "false" },
+
+        .{ "input_checked.defaultChecked = true", "true" },
+        .{ "input_checked.checked", "false" }, // Still false
+    }, .{});
+    try runner.testCases(&.{
+        .{ "let input_value = document.createElement('input')", null },
+        .{ "input_value.defaultValue", "" },
+        .{ "input_value.value", "" },
+
+        .{ "input_value.defaultValue = 3.1", "3.1" },
+        .{ "input_value.defaultValue", "3.1" },
+        .{ "input_value.value", "3.1" }, // Also perceived as 3.1
+
+        .{ "input_value.value = 'mango'", "mango" },
+        .{ "input_value.defaultValue", "3.1" },
+        .{ "input_value.value", "mango" },
+
+        .{ "input_value.defaultValue = true", "true" },
+        .{ "input_value.value", "mango" }, // Still mango
+    }, .{});
+}
+
+test "Browser.HTML.HtmlInputElement.properties.form" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
+        \\ <form action="test.php" target="_blank">
+        \\   <p>
+        \\     <label>First name: <input type="text" name="first-name" /></label>
+        \\   </p>
+        \\ </form>
+    });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let elem_input = document.querySelector('input')", null },
+        .{ "elem_input.form", "[object HTMLFormElement]" }, // Initial value
+        .{ "elem_input.form = 'foo'", null },
+        .{ "elem_input.form", "[object HTMLFormElement]" }, // Invalid
+    }, .{});
+}
+
+test "Browser.HTML.HTMLTemplateElement" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=c></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let t = document.createElement('template')", null },
+        .{ "let d = document.createElement('div')", null },
+        .{ "d.id = 'abc'", null },
+        .{ "t.content.append(d)", null },
+        .{ "document.getElementById('abc')", "null" },
+        .{ "document.getElementById('c').appendChild(t.content.cloneNode(true))", null },
+        .{ "document.getElementById('abc').id", "abc" },
+    }, .{});
+}
+
+test "Browser.HTML.HTMLStyleElement" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let s = document.createElement('style')", null },
+        .{ "s.sheet.type", "text/css" },
+        .{ "s.sheet == s.sheet", "true" },
+        .{ "document.createElement('style').sheet == s.sheet", "false" },
+    }, .{});
+}
+
+const Check = struct {
+    input: []const u8,
+    expected: ?[]const u8 = null, // Needed when input != expected
+};
+const bool_valids = [_]Check{
+    .{ .input = "true" },
+    .{ .input = "''", .expected = "false" },
+    .{ .input = "13.5", .expected = "true" },
+};
+const str_valids = [_]Check{
+    .{ .input = "'foo'", .expected = "foo" },
+    .{ .input = "5", .expected = "5" },
+    .{ .input = "''", .expected = "" },
+    .{ .input = "document", .expected = "[object HTMLDocument]" },
+};
+
+// .{ "elem.type = '5'", "5" },
+// .{ "elem.type", "text" },
+fn testProperty(
+    arena: std.mem.Allocator,
+    runner: *testing.JsRunner,
+    elem_dot_prop: []const u8,
+    always: ?[]const u8, // Ignores checks' expected if set
+    checks: []const Check,
+) !void {
+    for (checks) |check| {
+        try runner.testCases(&.{
+            .{ try std.mem.concat(arena, u8, &.{ elem_dot_prop, " = ", check.input }), null },
+            .{ elem_dot_prop, always orelse check.expected orelse check.input },
+        }, .{});
+    }
 }

src/browser/html/error_event.zig

@@ -0,0 +1,114 @@
+// 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");
+
+// https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent
+pub const ErrorEvent = struct {
+    pub const prototype = *parser.Event;
+    pub const union_make_copy = true;
+
+    proto: parser.Event,
+    message: []const u8,
+    filename: []const u8,
+    lineno: i32,
+    colno: i32,
+    @"error": ?Env.JsObject,
+
+    const ErrorEventInit = struct {
+        message: []const u8 = "",
+        filename: []const u8 = "",
+        lineno: i32 = 0,
+        colno: i32 = 0,
+        @"error": ?Env.JsObject = null,
+    };
+
+    pub fn constructor(event_type: []const u8, opts: ?ErrorEventInit) !ErrorEvent {
+        const event = try parser.eventCreate();
+        defer parser.eventDestroy(event);
+        try parser.eventInit(event, event_type, .{});
+        try parser.eventSetInternalType(event, .event);
+
+        const o = opts orelse ErrorEventInit{};
+
+        return .{
+            .proto = event.*,
+            .message = o.message,
+            .filename = o.filename,
+            .lineno = o.lineno,
+            .colno = o.colno,
+            .@"error" = if (o.@"error") |e| try e.persist() else null,
+        };
+    }
+
+    pub fn get_message(self: *const ErrorEvent) []const u8 {
+        return self.message;
+    }
+
+    pub fn get_filename(self: *const ErrorEvent) []const u8 {
+        return self.filename;
+    }
+
+    pub fn get_lineno(self: *const ErrorEvent) i32 {
+        return self.lineno;
+    }
+
+    pub fn get_colno(self: *const ErrorEvent) i32 {
+        return self.colno;
+    }
+
+    pub fn get_error(self: *const ErrorEvent) Env.UndefinedOr(Env.JsObject) {
+        if (self.@"error") |e| {
+            return .{ .value = e };
+        }
+        return .undefined;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.ErrorEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=c></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let e1 = new ErrorEvent('err1')", null },
+        .{ "e1.message", "" },
+        .{ "e1.filename", "" },
+        .{ "e1.lineno", "0" },
+        .{ "e1.colno", "0" },
+        .{ "e1.error", "undefined" },
+
+        .{
+            \\ let e2 = new ErrorEvent('err1', {
+            \\    message: 'm1',
+            \\    filename: 'fx19',
+            \\    lineno: 443,
+            \\    colno: 8999,
+            \\    error: 'under 9000!',
+            \\
+            \\})
+            ,
+            null,
+        },
+        .{ "e2.message", "m1" },
+        .{ "e2.filename", "fx19" },
+        .{ "e2.lineno", "443" },
+        .{ "e2.colno", "8999" },
+        .{ "e2.error", "under 9000!" },
+    }, .{});
+}

src/browser/html/form.zig

@@ -0,0 +1,38 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+const std = @import("std");
+const Allocator = std.mem.Allocator;
+
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+const HTMLElement = @import("elements.zig").HTMLElement;
+const FormData = @import("../xhr/form_data.zig").FormData;
+
+pub const HTMLFormElement = struct {
+    pub const Self = parser.Form;
+    pub const prototype = *HTMLElement;
+    pub const subtype = .node;
+
+    pub fn _submit(self: *parser.Form, page: *Page) !void {
+        return page.submitForm(self, null);
+    }
+
+    pub fn _reset(self: *parser.Form) !void {
+        try parser.formElementReset(self);
+    }
+};

src/browser/html/html.zig

@@ -24,7 +24,6 @@ const Navigator = @import("navigator.zig").Navigator;
 const History = @import("history.zig").History;
 const Location = @import("location.zig").Location;
 const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
-const Performance = @import("performance.zig").Performance;
 
 pub const Interfaces = .{
     HTMLDocument,
@@ -37,5 +36,8 @@ pub const Interfaces = .{
     History,
     Location,
     MediaQueryList,
-    Performance,
+    @import("DataSet.zig"),
+    @import("screen.zig").Interfaces,
+    @import("error_event.zig").ErrorEvent,
+    @import("AbortController.zig").Interfaces,
 };

src/browser/html/location.zig

@@ -16,7 +16,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const URL = @import("../url/url.zig").URL;
 
@@ -24,18 +24,18 @@ const URL = @import("../url/url.zig").URL;
 pub const Location = struct {
     url: ?URL = null,
 
-    pub fn get_href(self: *Location, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_href(state);
+    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, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_protocol(state);
+    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, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_host(state);
+    pub fn get_host(self: *Location, page: *Page) ![]const u8 {
+        if (self.url) |*u| return u.get_host(page);
         return "";
     }
 
@@ -44,8 +44,8 @@ pub const Location = struct {
         return "";
     }
 
-    pub fn get_port(self: *Location, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_port(state);
+    pub fn get_port(self: *Location, page: *Page) ![]const u8 {
+        if (self.url) |*u| return u.get_port(page);
         return "";
     }
 
@@ -54,36 +54,35 @@ pub const Location = struct {
         return "";
     }
 
-    pub fn get_search(self: *Location, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_search(state);
+    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, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_hash(state);
+    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, state: *SessionState) ![]const u8 {
-        if (self.url) |*u| return u.get_origin(state);
+    pub fn get_origin(self: *Location, page: *Page) ![]const u8 {
+        if (self.url) |*u| return u.get_origin(page);
         return "";
     }
 
-    // TODO
-    pub fn _assign(_: *Location, url: []const u8) !void {
-        _ = url;
+    pub fn _assign(_: *const Location, url: []const u8, page: *Page) !void {
+        return page.navigateFromWebAPI(url, .{ .reason = .script });
     }
 
-    // TODO
-    pub fn _replace(_: *Location, url: []const u8) !void {
-        _ = url;
+    pub fn _replace(_: *const Location, url: []const u8, page: *Page) !void {
+        return page.navigateFromWebAPI(url, .{ .reason = .script });
     }
 
-    // TODO
-    pub fn _reload(_: *Location) !void {}
+    pub fn _reload(_: *const Location, page: *Page) !void {
+        return page.navigateFromWebAPI(page.url.raw, .{ .reason = .script });
+    }
 
-    pub fn _toString(self: *Location, state: *SessionState) ![]const u8 {
-        return try self.get_href(state);
+    pub fn _toString(self: *Location, page: *Page) ![]const u8 {
+        return try self.get_href(page);
     }
 };
 

src/browser/html/media_query_list.zig

@@ -17,7 +17,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const parser = @import("../netsurf.zig");
-const Callback = @import("../env.zig").Callback;
+const Function = @import("../env.zig").Function;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 
 // https://drafts.csswg.org/cssom-view/#the-mediaquerylist-interface
@@ -26,7 +26,7 @@ pub const MediaQueryList = struct {
 
     // 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{},
+    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .media_query_list },
 
     matches: bool,
     media: []const u8,
@@ -39,7 +39,7 @@ pub const MediaQueryList = struct {
         return self.media;
     }
 
-    pub fn _addListener(_: *const MediaQueryList, _: Callback) void {}
+    pub fn _addListener(_: *const MediaQueryList, _: Function) void {}
 
-    pub fn _removeListener(_: *const MediaQueryList, _: Callback) void {}
+    pub fn _removeListener(_: *const MediaQueryList, _: Function) void {}
 };

src/browser/html/performance.zig

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

src/browser/html/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/window.zig

@@ -18,9 +18,10 @@
 
 const std = @import("std");
 
+const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const Callback = @import("../env.zig").Callback;
-const SessionState = @import("../env.zig").SessionState;
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
 const Loop = @import("../../runtime/loop.zig").Loop;
 
 const Navigator = @import("navigator.zig").Navigator;
@@ -30,37 +31,49 @@ const Crypto = @import("../crypto/crypto.zig").Crypto;
 const Console = @import("../console/console.zig").Console;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
-const Performance = @import("performance.zig").Performance;
+const Performance = @import("../dom/performance.zig").Performance;
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
+const Screen = @import("screen.zig").Screen;
+const Css = @import("../css/css.zig").Css;
+
+const Function = Env.Function;
+const JsObject = Env.JsObject;
 
 const storage = @import("../storage/storage.zig");
 
-const log = std.log.scoped(.window);
-
 // https://dom.spec.whatwg.org/#interface-window-extensions
 // https://html.spec.whatwg.org/multipage/nav-history-apis.html#window
 pub const Window = struct {
     pub const prototype = *EventTarget;
 
     // Extend libdom event target for pure zig struct.
-    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .window },
 
-    document: ?*parser.DocumentHTML = null,
+    document: *parser.DocumentHTML,
     target: []const u8 = "",
     history: History = .{},
     location: Location = .{},
     storage_shelf: ?*storage.Shelf = null,
 
     // counter for having unique timer ids
-    timer_id: u31 = 0,
+    timer_id: u30 = 0,
     timers: std.AutoHashMapUnmanaged(u32, *TimerCallback) = .{},
 
     crypto: Crypto = .{},
     console: Console = .{},
     navigator: Navigator = .{},
     performance: Performance,
+    screen: Screen = .{},
+    css: Css = .{},
 
     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() },
@@ -69,9 +82,7 @@ pub const Window = struct {
 
     pub fn replaceLocation(self: *Window, loc: Location) !void {
         self.location = loc;
-        if (self.document) |doc| {
-            try parser.documentHTMLSetLocation(Location, doc, &self.location);
-        }
+        try parser.documentHTMLSetLocation(Location, self.document, &self.location);
     }
 
     pub fn replaceDocument(self: *Window, doc: *parser.DocumentHTML) !void {
@@ -96,6 +107,10 @@ pub const Window = struct {
         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;
     }
@@ -112,6 +127,11 @@ pub const Window = struct {
         return self;
     }
 
+    // TODO: frames
+    pub fn get_top(self: *Window) *Window {
+        return self;
+    }
+
     pub fn get_document(self: *Window) ?*parser.DocumentHTML {
         return self.document;
     }
@@ -121,15 +141,15 @@ pub const Window = struct {
     }
 
     //  The interior height of the window in pixels, including the height of the horizontal scroll bar, if present.
-    pub fn get_innerHeight(_: *Window, state: *SessionState) u32 {
+    pub fn get_innerHeight(_: *Window, page: *Page) u32 {
         // We do not have scrollbars or padding so this is the same as Element.clientHeight
-        return state.renderer.height();
+        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, state: *SessionState) u32 {
+    pub fn get_innerWidth(_: *Window, page: *Page) u32 {
         // We do not have scrollbars or padding so this is the same as Element.clientWidth
-        return state.renderer.width();
+        return page.renderer.width();
     }
 
     pub fn get_name(self: *Window) []const u8 {
@@ -150,64 +170,89 @@ pub const Window = struct {
         return &self.performance;
     }
 
-    // Tells the browser you wish to perform an animation. It requests the browser to call a user-supplied callback function before the next repaint.
-    // fn callback(timestamp: f64)
-    // Returns the request ID, that uniquely identifies the entry in the callback list.
-    pub fn _requestAnimationFrame(
-        self: *Window,
-        callback: Callback,
-    ) !u32 {
-        // We immediately execute the callback, but this may not be correct TBD.
-        // Since: When multiple callbacks queued by requestAnimationFrame() begin to fire in a single frame, each receives the same timestamp even though time has passed during the computation of every previous callback's workload.
-        var result: Callback.Result = undefined;
-        callback.tryCall(.{self.performance._now()}, &result) catch {
-            log.err("Window.requestAnimationFrame(): {s}", .{result.exception});
-            log.debug("stack:\n{s}", .{result.stack orelse "???"});
-        };
-        return 99; // not unique, but user cannot make assumptions about it. cancelAnimationFrame will be too late anyway.
+    pub fn get_screen(self: *Window) *Screen {
+        return &self.screen;
     }
 
-    // Cancels an animation frame request previously scheduled through requestAnimationFrame().
-    // This is a no-op since _requestAnimationFrame immediately executes the callback.
-    pub fn _cancelAnimationFrame(_: *Window, request_id: u32) void {
-        _ = request_id;
+    pub fn get_CSS(self: *Window) *Css {
+        return &self.css;
     }
 
-    // TODO handle callback arguments.
-    pub fn _setTimeout(self: *Window, cbk: Callback, delay: ?u32, state: *SessionState) !u32 {
-        return self.createTimeout(cbk, delay, state, false);
+    pub fn _requestAnimationFrame(self: *Window, cbk: Function, page: *Page) !u32 {
+        return self.createTimeout(cbk, 5, page, .{ .animation_frame = true });
     }
 
-    // TODO handle callback arguments.
-    pub fn _setInterval(self: *Window, cbk: Callback, delay: ?u32, state: *SessionState) !u32 {
-        return self.createTimeout(cbk, delay, state, true);
-    }
-
-    pub fn _clearTimeout(self: *Window, id: u32, state: *SessionState) !void {
+    pub fn _cancelAnimationFrame(self: *Window, id: u32, page: *Page) !void {
         const kv = self.timers.fetchRemove(id) orelse return;
-        try state.loop.cancel(kv.value.loop_id);
+        return page.loop.cancel(kv.value.loop_id);
     }
 
-    pub fn _clearInterval(self: *Window, id: u32, state: *SessionState) !void {
+    pub fn _setTimeout(self: *Window, cbk: Function, delay: ?u32, params: []Env.JsObject, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{ .args = params });
+    }
+
+    pub fn _setInterval(self: *Window, cbk: Function, delay: ?u32, params: []Env.JsObject, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{ .repeat = true, .args = params });
+    }
+
+    pub fn _clearTimeout(self: *Window, id: u32, page: *Page) !void {
         const kv = self.timers.fetchRemove(id) orelse return;
-        try state.loop.cancel(kv.value.loop_id);
+        return page.loop.cancel(kv.value.loop_id);
     }
 
-    pub fn _matchMedia(_: *const Window, media: []const u8, state: *SessionState) !MediaQueryList {
+    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 _queueMicrotask(self: *Window, cbk: Function, page: *Page) !u32 {
+        return self.createTimeout(cbk, 0, page, .{});
+    }
+
+    pub fn _matchMedia(_: *const Window, media: []const u8, page: *Page) !MediaQueryList {
         return .{
             .matches = false, // TODO?
-            .media = try state.arena.dupe(u8, media),
+            .media = try page.arena.dupe(u8, media),
         };
     }
 
-    fn createTimeout(self: *Window, cbk: Callback, delay_: ?u32, state: *SessionState, comptime repeat: bool) !u32 {
+    pub fn _btoa(_: *const Window, value: []const u8, page: *Page) ![]const u8 {
+        const Encoder = std.base64.standard.Encoder;
+        const out = try page.call_arena.alloc(u8, Encoder.calcSize(value.len));
+        return Encoder.encode(out, value);
+    }
+
+    pub fn _atob(_: *const Window, value: []const u8, page: *Page) ![]const u8 {
+        const Decoder = std.base64.standard.Decoder;
+        const size = Decoder.calcSizeForSlice(value) catch return error.InvalidCharacterError;
+
+        const out = try page.call_arena.alloc(u8, size);
+        Decoder.decode(out, value) catch return error.InvalidCharacterError;
+        return out;
+    }
+
+    const CreateTimeoutOpts = struct {
+        args: []Env.JsObject = &.{},
+        repeat: bool = false,
+        animation_frame: bool = false,
+    };
+    fn createTimeout(self: *Window, cbk: Function, delay_: ?u32, page: *Page, 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 = state.arena;
+        const arena = page.arena;
 
         const gop = try self.timers.getOrPut(arena, timer_id);
         if (gop.found_existing) {
@@ -216,7 +261,16 @@ pub const Window = struct {
         }
         errdefer _ = self.timers.remove(timer_id);
 
-        const delay: u63 = @as(u63, (delay_ orelse 0)) * std.time.ns_per_ms;
+        const args = opts.args;
+        var persisted_args: []Env.JsObject = &.{};
+        if (args.len > 0) {
+            persisted_args = try page.arena.alloc(Env.JsObject, args.len);
+            for (args, persisted_args) |a, *ca| {
+                ca.* = try a.persist();
+            }
+        }
+
+        const delay_ms: u63 = @as(u63, delay) * std.time.ns_per_ms;
         const callback = try arena.create(TimerCallback);
 
         callback.* = .{
@@ -224,14 +278,79 @@ pub const Window = struct {
             .loop_id = 0, // we're going to set this to a real value shortly
             .window = self,
             .timer_id = timer_id,
+            .args = persisted_args,
             .node = .{ .func = TimerCallback.run },
-            .repeat = if (repeat) delay else null,
+            .repeat = if (opts.repeat) delay_ms else null,
+            .animation_frame = opts.animation_frame,
         };
-        callback.loop_id = try state.loop.timeout(delay, &callback.node);
+        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(self: *Window, opts: ScrollToOpts, y: ?u32) !void {
+        _ = opts;
+        _ = y;
+
+        {
+            const scroll_event = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_event);
+
+            try parser.eventInit(scroll_event, "scroll", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(Window, self),
+                scroll_event,
+            );
+        }
+
+        {
+            const scroll_end = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_end);
+
+            try parser.eventInit(scroll_end, "scrollend", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(parser.DocumentHTML, self.document),
+                scroll_end,
+            );
+        }
+    }
+
+    // libdom's document doesn't have a parent, which is correct, but
+    // breaks the event bubbling that happens for many events from
+    // document -> window.
+    // We need to force dispatch this event on the window, with the
+    // document target.
+    // In theory, we should do this for a lot of events and might need
+    // to come up with a good way to solve this more generically. But
+    // this specific event, and maybe a few others in the near future,
+    // are blockers.
+    // Worth noting that NetSurf itself appears to do something similar:
+    // https://github.com/netsurf-browser/netsurf/blob/a32e1a03e1c91ee9f0aa211937dbae7a96831149/content/handlers/html/html.c#L380
+    pub fn dispatchForDocumentTarget(self: *Window, evt: *parser.Event) !void {
+        // we assume that this evt has already been dispatched on the document
+        // and thus the target has already been set to the document.
+        return self.base.redispatchEvent(evt);
+    }
 };
 
 const TimerCallback = struct {
@@ -242,7 +361,7 @@ const TimerCallback = struct {
     timer_id: u31,
 
     // The JavaScript callback to execute
-    cbk: Callback,
+    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
@@ -251,15 +370,30 @@ const TimerCallback = struct {
     // if the event should be repeated
     repeat: ?u63 = null,
 
+    animation_frame: bool = false,
+
     window: *Window,
 
+    args: []Env.JsObject = &.{},
+
     fn run(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
         const self: *TimerCallback = @fieldParentPtr("node", node);
 
-        var result: Callback.Result = undefined;
-        self.cbk.tryCall(.{}, &result) catch {
-            log.err("timeout callback error: {s}", .{result.exception});
-            log.debug("stack:\n{s}", .{result.stack orelse "???"});
+        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, self.args, &result);
+        }
+
+        call catch {
+            log.warn(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "window timeout",
+            });
         };
 
         if (self.repeat) |r| {
@@ -278,24 +412,24 @@ 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;
+            \\ let start = 0;
             \\ function step(timestamp) {
-            \\    if (start === undefined) {
-            \\      start = timestamp;
-            \\    }
-            \\    const elapsed = timestamp - start;
-            \\    if (elapsed < 2000) {
-            \\      requestAnimationFrame(step);
-            \\    }
+            \\    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
@@ -307,9 +441,88 @@ test "Browser.HTML.Window" {
     try runner.testCases(&.{
         .{ "innerHeight", "1" },
         .{ "innerWidth", "1" }, // Width is 1 even if there are no elements
-        .{ "document.createElement('div').getClientRects()", null },
-        .{ "document.createElement('div').getClientRects()", null },
+        .{
+            \\ 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" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let longCall = false;", null },
+        .{ "window.setTimeout(() => {longCall = true}, 5001);", null },
+        .{ "longCall;", "false" },
+
+        .{ "let wst = 0;", null },
+        .{ "window.setTimeout(() => {wst += 1}, 1)", null },
+        .{ "wst", "1" },
+
+        .{ "window.setTimeout((a, b) => {wst = a + b}, 1, 2, 3)", null },
+        .{ "wst", "5" },
+    }, .{});
+
+    // 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",
+        },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const b64 = btoa('https://ziglang.org/documentation/master/std/#std.base64.Base64Decoder')", "undefined" },
+        .{ "b64", "aHR0cHM6Ly96aWdsYW5nLm9yZy9kb2N1bWVudGF0aW9uL21hc3Rlci9zdGQvI3N0ZC5iYXNlNjQuQmFzZTY0RGVjb2Rlcg==" },
+        .{ "const str = atob(b64)", "undefined" },
+        .{ "str", "https://ziglang.org/documentation/master/std/#std.base64.Base64Decoder" },
+        .{ "try { atob('b') } catch (e) { e } ", "Error: InvalidCharacterError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let scroll = false; let scrolend = false", null },
+        .{ "window.addEventListener('scroll', () => {scroll = true});", null },
+        .{ "document.addEventListener('scrollend', () => {scrollend = true});", null },
+        .{ "window.scrollTo(0)", null },
+        .{ "scroll", "true" },
+        .{ "scrollend", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var qm = false; window.queueMicrotask(() => {qm = true });", null },
+        .{ "qm", "true" },
+    }, .{});
+
+    {
+        try runner.testCases(&.{
+            .{
+                \\ let dcl = false;
+                \\ window.addEventListener('DOMContentLoaded', (e) => {
+                \\   dcl = e.target == document;
+                \\ });
+                ,
+                null,
+            },
+        }, .{});
+        try runner.dispatchDOMContentLoaded();
+        try runner.testCases(&.{
+            .{ "dcl", "true" },
+        }, .{});
+    }
 }

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

@@ -35,6 +35,8 @@ pub const Mime = struct {
         text_html,
         text_javascript,
         text_plain,
+        text_css,
+        application_json,
         unknown,
         other,
     };
@@ -44,6 +46,8 @@ pub const Mime = struct {
         text_html: void,
         text_javascript: void,
         text_plain: void,
+        text_css: void,
+        application_json: void,
         unknown: void,
         other: struct { type: []const u8, sub_type: []const u8 },
     };
@@ -174,18 +178,22 @@ pub const Mime = struct {
         if (std.meta.stringToEnum(enum {
             @"text/xml",
             @"text/html",
+            @"text/css",
+            @"text/plain",
 
             @"text/javascript",
             @"application/javascript",
             @"application/x-javascript",
 
-            @"text/plain",
+            @"application/json",
         }, 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 = {} },
+                .@"text/css" => .{ .text_css = {} },
+                .@"application/json" => .{ .application_json = {} },
             };
             return .{ ct, attribute_start };
         }
@@ -218,7 +226,9 @@ pub const Mime = struct {
 
     fn parseAttributeValue(arena: Allocator, value: []const u8) ![]const u8 {
         if (value[0] != '"') {
-            return value;
+            // almost certainly referenced from an http.Request which has its
+            // own lifetime.
+            return arena.dupe(u8, value);
         }
 
         // 1 to skip the opening quote
@@ -349,6 +359,9 @@ test "Mime: parse common" {
     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");
+
+    try expect(.{ .content_type = .{ .application_json = {} } }, "application/json");
+    try expect(.{ .content_type = .{ .text_css = {} } }, "text/css");
 }
 
 test "Mime: parse uncommon" {

src/browser/netsurf.zig

@@ -25,7 +25,10 @@ const c = @cImport({
     @cInclude("events/event_target.h");
     @cInclude("events/event.h");
     @cInclude("events/mouse_event.h");
+    @cInclude("events/keyboard_event.h");
     @cInclude("utils/validate.h");
+    @cInclude("html/html_element.h");
+    @cInclude("html/html_document.h");
 });
 
 const mimalloc = @import("mimalloc.zig");
@@ -521,6 +524,11 @@ pub const EventType = enum(u8) {
     event = 0,
     progress_event = 1,
     custom_event = 2,
+    mouse_event = 3,
+    error_event = 4,
+    abort_signal = 5,
+    xhr_event = 6,
+    message_event = 7,
 };
 
 pub const MutationEvent = c.dom_mutation_event;
@@ -549,7 +557,7 @@ pub fn mutationEventRelatedNode(evt: *MutationEvent) !?*Node {
     const err = c._dom_mutation_event_get_related_node(evt, &n);
     try DOMErr(err);
     if (n == null) return null;
-    return @as(*Node, @ptrCast(n));
+    return @as(*Node, @alignCast(@ptrCast(n)));
 }
 
 // EventListener
@@ -564,7 +572,7 @@ fn eventListenerGetData(lst: *EventListener) ?*anyopaque {
 pub const EventTarget = c.dom_event_target;
 
 pub fn eventTargetToNode(et: *EventTarget) *Node {
-    return @as(*Node, @ptrCast(et));
+    return @as(*Node, @alignCast(@ptrCast(et)));
 }
 
 fn eventTargetVtable(et: *EventTarget) c.dom_event_target_vtable {
@@ -615,7 +623,7 @@ pub fn eventTargetAddEventListener(
     typ: []const u8,
     node: *EventNode,
     capture: bool,
-) !void {
+) !*EventListener {
     const event_handler = struct {
         fn handle(event_: ?*Event, ptr_: ?*anyopaque) callconv(.C) void {
             const ptr = ptr_ orelse return;
@@ -634,6 +642,8 @@ pub fn eventTargetAddEventListener(
     const s = try strFromData(typ);
     const err = eventTargetVtable(et).add_event_listener.?(et, s, listener, capture);
     try DOMErr(err);
+
+    return listener.?;
 }
 
 pub fn eventTargetHasListener(
@@ -740,6 +750,13 @@ pub fn eventTargetDispatchEvent(et: *EventTarget, event: *Event) !bool {
     return res;
 }
 
+pub fn eventTargetInternalType(et: *EventTarget) !EventTargetTBase.InternalType {
+    var res: u32 = undefined;
+    const err = eventTargetVtable(et).internal_type.?(et, &res);
+    try DOMErr(err);
+    return @enumFromInt(res);
+}
+
 pub fn elementDispatchEvent(element: *Element, event: *Event) !bool {
     const et: *EventTarget = toEventTarget(Element, element);
     return eventTargetDispatchEvent(et, @ptrCast(event));
@@ -762,14 +779,37 @@ pub fn eventTargetTBaseFieldName(comptime T: type) ?[]const u8 {
 // EventTargetBase is used to implement EventTarget for pure zig struct.
 pub const EventTargetTBase = extern struct {
     const Self = @This();
+    const InternalType = enum(u32) {
+        libdom_node = 0,
+        plain = 1,
+        abort_signal = 2,
+        xhr = 3,
+        window = 4,
+        performance = 5,
+        media_query_list = 6,
+        message_port = 7,
+    };
 
     vtable: ?*const c.struct_dom_event_target_vtable = &c.struct_dom_event_target_vtable{
         .dispatch_event = dispatch_event,
         .remove_event_listener = remove_event_listener,
         .add_event_listener = add_event_listener,
         .iter_event_listener = iter_event_listener,
+        .internal_type = internal_type,
     },
+
+    // When we dispatch the event, we need to provide a target. In reality, the
+    // target is the container of this EventTargetTBase. But we can't pass that
+    // to _dom_event_target_dispatch, because it expects a dom_event_target.
+    // If you try to pass an non-event_target, you'll get weird behavior. For
+    // example, libdom might dom_node_ref that memory. Say we passed a *Window
+    // as the target, what happens if libdom calls dom_node_ref(window)? If
+    // you're lucky, you'll crash. If you're unlucky, you'll increment a random
+    // part of the window structure.
+    refcnt: u32 = 0,
+
     eti: c.dom_event_target_internal = c.dom_event_target_internal{ .listeners = null },
+    internal_target_type: InternalType,
 
     pub fn add_event_listener(et: [*c]c.dom_event_target, t: [*c]c.dom_string, l: ?*c.struct_dom_event_listener, capture: bool) callconv(.C) c.dom_exception {
         const self = @as(*Self, @ptrCast(et));
@@ -802,6 +842,20 @@ pub const EventTargetTBase = extern struct {
         const self = @as(*Self, @ptrCast(et));
         return c._dom_event_target_iter_event_listener(self.eti, t, capture, cur, next, l);
     }
+
+    pub fn internal_type(et: [*c]c.dom_event_target, internal_type_: [*c]u32) callconv(.C) c.dom_exception {
+        const self = @as(*Self, @ptrCast(et));
+        internal_type_.* = @intFromEnum(self.internal_target_type);
+        return c.DOM_NO_ERR;
+    }
+
+    // Called to simulate bubbling from a libdom node (e.g. the Document) to a
+    // Zig instance (e.g. the Window).
+    pub fn redispatchEvent(self: *EventTargetTBase, evt: *Event) !void {
+        var res: bool = undefined;
+        const err = c._dom_event_target_dispatch(@ptrCast(self), &self.eti, evt, c.DOM_BUBBLING_PHASE, &res);
+        try DOMErr(err);
+    }
 };
 
 // MouseEvent
@@ -859,6 +913,59 @@ pub fn mouseEventDefaultPrevented(evt: *MouseEvent) !bool {
     return eventDefaultPrevented(@ptrCast(evt));
 }
 
+// KeyboardEvent
+
+pub const KeyboardEvent = c.dom_keyboard_event;
+
+pub fn keyboardEventCreate() !*KeyboardEvent {
+    var evt: ?*KeyboardEvent = undefined;
+    const err = c._dom_keyboard_event_create(&evt);
+    try DOMErr(err);
+    return evt.?;
+}
+
+pub fn keyboardEventDestroy(evt: *KeyboardEvent) void {
+    c._dom_keyboard_event_destroy(evt);
+}
+
+const KeyboardEventOpts = struct {
+    key: []const u8,
+    code: []const u8,
+    bubbles: bool = false,
+    cancelable: bool = false,
+    ctrl: bool = false,
+    alt: bool = false,
+    shift: bool = false,
+    meta: bool = false,
+};
+
+pub fn keyboardEventInit(evt: *KeyboardEvent, typ: []const u8, opts: KeyboardEventOpts) !void {
+    const s = try strFromData(typ);
+    const err = c._dom_keyboard_event_init(
+        evt,
+        s,
+        opts.bubbles,
+        opts.cancelable,
+        null, // dom_abstract_view* ?
+        try strFromData(opts.key),
+        try strFromData(opts.code),
+        0, // location 0 == standard
+        opts.ctrl,
+        opts.shift,
+        opts.alt,
+        opts.meta,
+        false, // repease
+        false, // is_composiom
+    );
+    try DOMErr(err);
+}
+
+pub fn keyboardEventGetKey(evt: *KeyboardEvent) ![]const u8 {
+    var s: ?*String = undefined;
+    _ = c._dom_keyboard_event_get_key(evt, &s);
+    return strToData(s.?);
+}
+
 // NodeType
 
 pub const NodeType = enum(u4) {
@@ -891,7 +998,7 @@ pub fn nodeListItem(nodeList: *NodeList, index: u32) !?*Node {
     const err = c._dom_nodelist_item(nodeList, index, &n);
     try DOMErr(err);
     if (n == null) return null;
-    return @as(*Node, @ptrCast(n));
+    return @as(*Node, @alignCast(@ptrCast(n)));
 }
 
 // NodeExternal is the libdom public representation of a Node.
@@ -1151,6 +1258,17 @@ pub fn nodeGetChildNodes(node: *Node) !*NodeList {
     return nlist.?;
 }
 
+pub fn nodeGetRootNode(node: *Node) !*Node {
+    var root = node;
+    while (true) {
+        const parent = try nodeParentNode(root);
+        if (parent) |parent_| {
+            root = parent_;
+        } else break;
+    }
+    return root;
+}
+
 pub fn nodeAppendChild(node: *Node, child: *Node) !*Node {
     var res: ?*Node = undefined;
     const err = nodeVtable(node).dom_node_append_child.?(node, child, &res);
@@ -1274,6 +1392,14 @@ pub fn nodeGetPrefix(node: *Node) !?[]const u8 {
     return strToData(s.?);
 }
 
+pub fn nodeGetEmbedderData(node: *Node) ?*anyopaque {
+    return c._dom_node_get_embedder_data(node);
+}
+
+pub fn nodeSetEmbedderData(node: *Node, data: *anyopaque) void {
+    c._dom_node_set_embedder_data(node, data);
+}
+
 // nodeToElement is an helper to convert a node to an element.
 pub inline fn nodeToElement(node: *Node) *Element {
     return @as(*Element, @ptrCast(node));
@@ -1284,6 +1410,15 @@ pub inline fn nodeToDocument(node: *Node) *Document {
     return @as(*Document, @ptrCast(node));
 }
 
+// Combination of nodeToElement + elementHTMLGetTagType
+pub fn nodeHTMLGetTagType(node: *Node) !?Tag {
+    if (try nodeType(node) != .element) {
+        return null;
+    }
+    const html_element: *ElementHTML = @ptrCast(node);
+    return try elementHTMLGetTagType(html_element);
+}
+
 // CharacterData
 pub const CharacterData = c.dom_characterdata;
 
@@ -1292,7 +1427,7 @@ fn characterDataVtable(data: *CharacterData) c.dom_characterdata_vtable {
 }
 
 pub inline fn characterDataToNode(cdata: *CharacterData) *Node {
-    return @as(*Node, @ptrCast(cdata));
+    return @as(*Node, @alignCast(@ptrCast(cdata)));
 }
 
 pub fn characterDataData(cdata: *CharacterData) ![]const u8 {
@@ -1377,7 +1512,7 @@ pub const ProcessingInstruction = c.dom_processing_instruction;
 
 // processingInstructionToNode is an helper to convert an ProcessingInstruction to a node.
 pub inline fn processingInstructionToNode(pi: *ProcessingInstruction) *Node {
-    return @as(*Node, @ptrCast(pi));
+    return @as(*Node, @alignCast(@ptrCast(pi)));
 }
 
 pub fn processInstructionCopy(pi: *ProcessingInstruction) !*ProcessingInstruction {
@@ -1432,7 +1567,7 @@ pub fn attributeGetOwnerElement(a: *Attribute) !?*Element {
 
 // attributeToNode is an helper to convert an attribute to a node.
 pub inline fn attributeToNode(a: *Attribute) *Node {
-    return @as(*Node, @ptrCast(a));
+    return @as(*Node, @alignCast(@ptrCast(a)));
 }
 
 // Element
@@ -1570,7 +1705,7 @@ pub fn elementHasClass(elem: *Element, class: []const u8) !bool {
 
 // elementToNode is an helper to convert an element to a node.
 pub inline fn elementToNode(e: *Element) *Node {
-    return @as(*Node, @ptrCast(e));
+    return @as(*Node, @alignCast(@ptrCast(e)));
 }
 
 // TokenList
@@ -1654,14 +1789,14 @@ pub fn elementHTMLGetTagType(elem_html: *ElementHTML) !Tag {
 
 // scriptToElt is an helper to convert an script to an element.
 pub inline fn scriptToElt(s: *Script) *Element {
-    return @as(*Element, @ptrCast(s));
+    return @as(*Element, @alignCast(@ptrCast(s)));
 }
 
 // HTMLAnchorElement
 
 // anchorToNode is an helper to convert an anchor to a node.
 pub inline fn anchorToNode(a: *Anchor) *Node {
-    return @as(*Node, @ptrCast(a));
+    return @as(*Node, @alignCast(@ptrCast(a)));
 }
 
 pub fn anchorGetTarget(a: *Anchor) ![]const u8 {
@@ -1729,6 +1864,21 @@ pub fn anchorSetRel(a: *Anchor, rel: []const u8) !void {
     try DOMErr(err);
 }
 
+// HTMLLinkElement
+
+pub fn linkGetHref(link: *Link) ![]const u8 {
+    var res: ?*String = undefined;
+    const err = c.dom_html_link_element_get_href(link, &res);
+    try DOMErr(err);
+    if (res == null) return "";
+    return strToData(res.?);
+}
+
+pub fn linkSetHref(link: *Link, href: []const u8) !void {
+    const err = c.dom_html_link_element_set_href(link, try strFromData(href));
+    try DOMErr(err);
+}
+
 // ElementsHTML
 
 pub const MediaElement = struct { base: *c.dom_html_element };
@@ -1799,24 +1949,14 @@ pub const Title = c.dom_html_title_element;
 pub const Track = struct { base: *c.dom_html_element };
 pub const UList = c.dom_html_u_list_element;
 pub const Video = struct { base: *c.dom_html_element };
+pub const HTMLCollection = c.dom_html_collection;
+pub const OptionCollection = c.dom_html_options_collection;
 
 // Document Fragment
 pub const DocumentFragment = c.dom_document_fragment;
 
 pub inline fn documentFragmentToNode(doc: *DocumentFragment) *Node {
-    return @as(*Node, @ptrCast(doc));
-}
-
-pub fn documentFragmentBodyChildren(doc: *DocumentFragment) !?*NodeList {
-    const node = documentFragmentToNode(doc);
-    const html = try nodeFirstChild(node) orelse return null;
-    // TODO unref
-    const head = try nodeFirstChild(html) orelse return null;
-    // TODO unref
-    const body = try nodeNextSibling(head) orelse return null;
-    // TODO unref
-
-    return try nodeGetChildNodes(body);
+    return @as(*Node, @alignCast(@ptrCast(doc)));
 }
 
 // Document Position
@@ -1912,10 +2052,9 @@ pub inline fn domImplementationCreateHTMLDocument(title: ?[]const u8) !*Document
     _ = try nodeAppendChild(elementToNode(html), elementToNode(head));
 
     if (title) |t| {
-        try documentHTMLSetTitle(doc_html, t);
         const htitle = try documentCreateElement(doc, "title");
         const txt = try documentCreateTextNode(doc, t);
-        _ = try nodeAppendChild(elementToNode(htitle), @as(*Node, @ptrCast(txt)));
+        _ = try nodeAppendChild(elementToNode(htitle), @as(*Node, @alignCast(@ptrCast(txt))));
         _ = try nodeAppendChild(elementToNode(head), elementToNode(htitle));
     }
 
@@ -1933,7 +2072,7 @@ fn documentVtable(doc: *Document) c.dom_document_vtable {
 }
 
 pub inline fn documentToNode(doc: *Document) *Node {
-    return @as(*Node, @ptrCast(doc));
+    return @as(*Node, @alignCast(@ptrCast(doc)));
 }
 
 pub inline fn documentGetElementById(doc: *Document, id: []const u8) !?*Element {
@@ -2071,7 +2210,7 @@ pub inline fn documentImportNode(doc: *Document, node: *Node, deep: bool) !*Node
     const nodeext = toNodeExternal(Node, node);
     const err = documentVtable(doc).dom_document_import_node.?(doc, nodeext, deep, &res);
     try DOMErr(err);
-    return @as(*Node, @ptrCast(res));
+    return @as(*Node, @alignCast(@ptrCast(res)));
 }
 
 pub inline fn documentAdoptNode(doc: *Document, node: *Node) !*Node {
@@ -2079,7 +2218,7 @@ pub inline fn documentAdoptNode(doc: *Document, node: *Node) !*Node {
     const nodeext = toNodeExternal(Node, node);
     const err = documentVtable(doc).dom_document_adopt_node.?(doc, nodeext, &res);
     try DOMErr(err);
-    return @as(*Node, @ptrCast(res));
+    return @as(*Node, @alignCast(@ptrCast(res)));
 }
 
 pub inline fn documentCreateAttribute(doc: *Document, name: []const u8) !*Attribute {
@@ -2101,12 +2240,20 @@ pub inline fn documentCreateAttributeNS(doc: *Document, ns: []const u8, qname: [
     return attr.?;
 }
 
+pub fn documentSetScriptAddedCallback(
+    doc: *Document,
+    ctx: *anyopaque,
+    callback: c.dom_script_added_callback,
+) void {
+    c._dom_document_set_script_added_callback(doc, ctx, callback);
+}
+
 // DocumentHTML
 pub const DocumentHTML = c.dom_html_document;
 
 // documentHTMLToNode is an helper to convert a documentHTML to an node.
 pub inline fn documentHTMLToNode(doc: *DocumentHTML) *Node {
-    return @as(*Node, @ptrCast(doc));
+    return @as(*Node, @alignCast(@ptrCast(doc)));
 }
 
 fn documentHTMLVtable(doc_html: *DocumentHTML) c.dom_html_document_vtable {
@@ -2250,19 +2397,15 @@ pub inline fn documentHTMLBody(doc_html: *DocumentHTML) !?*Body {
     return @as(*Body, @ptrCast(body.?));
 }
 
+pub inline fn bodyToElement(body: *Body) *Element {
+    return @as(*Element, @alignCast(@ptrCast(body)));
+}
+
 pub inline fn documentHTMLSetBody(doc_html: *DocumentHTML, elt: ?*ElementHTML) !void {
     const err = documentHTMLVtable(doc_html).set_body.?(doc_html, elt);
     try DOMErr(err);
 }
 
-pub inline fn documentHTMLGetDomain(doc: *DocumentHTML) ![]const u8 {
-    var s: ?*String = undefined;
-    const err = documentHTMLVtable(doc).get_domain.?(doc, &s);
-    try DOMErr(err);
-    if (s == null) return "";
-    return strToData(s.?);
-}
-
 pub inline fn documentHTMLGetReferrer(doc: *DocumentHTML) ![]const u8 {
     var s: ?*String = undefined;
     const err = documentHTMLVtable(doc).get_referrer.?(doc, &s);
@@ -2286,7 +2429,7 @@ pub inline fn documentHTMLSetTitle(doc: *DocumentHTML, v: []const u8) !void {
 
 pub fn documentHTMLSetCurrentScript(doc: *DocumentHTML, script: ?*Script) !void {
     var s: ?*ElementHTML = null;
-    if (script != null) s = @ptrCast(script.?);
+    if (script != null) s = @alignCast(@ptrCast(script.?));
     const err = documentHTMLVtable(doc).set_current_script.?(doc, s);
     try DOMErr(err);
 }
@@ -2319,3 +2462,426 @@ pub fn documentHTMLGetLocation(T: type, doc: *DocumentHTML) !?*T {
 pub fn validateName(name: []const u8) !bool {
     return c._dom_validate_name(try strFromData(name));
 }
+
+// Form
+pub fn formElementSubmit(form: *Form) !void {
+    const err = c.dom_html_form_element_submit(form);
+    try DOMErr(err);
+}
+
+pub fn formElementReset(form: *Form) !void {
+    const err = c.dom_html_form_element_reset(form);
+    try DOMErr(err);
+}
+
+pub fn formGetCollection(form: *Form) !*HTMLCollection {
+    var collection: ?*HTMLCollection = null;
+    const err = c.dom_html_form_element_get_elements(form, &collection);
+    try DOMErr(err);
+    return collection.?;
+}
+
+// TextArea
+pub fn textareaGetValue(textarea: *TextArea) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_text_area_element_get_value(textarea, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+
+pub fn textareaSetValue(textarea: *TextArea, value: []const u8) !void {
+    const err = c.dom_html_text_area_element_set_value(textarea, try strFromData(value));
+    try DOMErr(err);
+}
+
+// Select
+pub fn selectGetOptions(select: *Select) !*OptionCollection {
+    var collection: ?*OptionCollection = null;
+    const err = c.dom__html_select_element_get_options(select, &collection);
+    try DOMErr(err);
+    return collection.?;
+}
+
+pub fn selectGetDisabled(select: *Select) !bool {
+    var disabled: bool = false;
+    const err = c.dom_html_select_element_get_disabled(select, &disabled);
+    try DOMErr(err);
+    return disabled;
+}
+
+pub fn selectSetDisabled(select: *Select, disabled: bool) !void {
+    const err = c.dom_html_select_element_set_disabled(select, disabled);
+    try DOMErr(err);
+}
+
+pub fn selectGetMultiple(select: *Select) !bool {
+    var multiple: bool = false;
+    const err = c.dom_html_select_element_get_multiple(select, &multiple);
+    try DOMErr(err);
+    return multiple;
+}
+
+pub fn selectSetMultiple(select: *Select, multiple: bool) !void {
+    const err = c.dom_html_select_element_set_multiple(select, multiple);
+    try DOMErr(err);
+}
+
+pub fn selectGetName(select: *Select) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_select_element_get_name(select, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+
+pub fn selectSetName(select: *Select, name: []const u8) !void {
+    const err = c.dom_html_select_element_set_name(select, try strFromData(name));
+    try DOMErr(err);
+}
+
+pub fn selectGetLength(select: *Select) !u32 {
+    var length: u32 = 0;
+    const err = c.dom_html_select_element_get_length(select, &length);
+    try DOMErr(err);
+    return length;
+}
+
+pub fn selectGetSelectedIndex(select: *Select) !i32 {
+    var index: i32 = 0;
+    const err = c.dom_html_select_element_get_selected_index(select, &index);
+    try DOMErr(err);
+    return index;
+}
+
+pub fn selectSetSelectedIndex(select: *Select, index: i32) !void {
+    const err = c.dom_html_select_element_set_selected_index(select, index);
+    try DOMErr(err);
+}
+
+pub fn selectGetForm(select: *Select) !?*Form {
+    var form: ?*Form = null;
+    const err = c.dom_html_select_element_get_form(select, &form);
+    try DOMErr(err);
+    return form;
+}
+
+// OptionCollection
+pub fn optionCollectionGetLength(collection: *OptionCollection) !u32 {
+    var len: u32 = 0;
+    const err = c.dom_html_options_collection_get_length(collection, &len);
+    try DOMErr(err);
+    return len;
+}
+
+pub fn optionCollectionItem(collection: *OptionCollection, index: u32) !*Option {
+    var node: ?*NodeExternal = undefined;
+    const err = c.dom_html_options_collection_item(collection, index, &node);
+    try DOMErr(err);
+    return @ptrCast(node.?);
+}
+
+// Option
+pub fn optionGetValue(option: *Option) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_option_element_get_value(option, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+
+pub fn optionGetSelected(option: *Option) !bool {
+    var selected: bool = false;
+    const err = c.dom_html_option_element_get_selected(option, &selected);
+    try DOMErr(err);
+    return selected;
+}
+
+pub fn optionSetSelected(option: *Option, selected: bool) !void {
+    const err = c.dom_html_option_element_set_selected(option, selected);
+    try DOMErr(err);
+}
+
+// HtmlCollection
+pub fn htmlCollectionGetLength(collection: *HTMLCollection) !u32 {
+    var len: u32 = 0;
+    const err = c.dom_html_collection_get_length(collection, &len);
+    try DOMErr(err);
+    return len;
+}
+
+pub fn htmlCollectionItem(collection: *HTMLCollection, index: u32) !*Node {
+    var node: ?*NodeExternal = undefined;
+    const err = c.dom_html_collection_item(collection, index, &node);
+    try DOMErr(err);
+    return @ptrCast(node.?);
+}
+
+const ulongNegativeOne = 4294967295;
+
+// Image
+// Image.name is deprecated
+// Image.align is deprecated
+// Image.border is deprecated
+// Image.longDesc is deprecated
+// Image.hspace is deprecated
+// Image.vspace is deprecated
+
+pub fn imageGetAlt(image: *Image) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_image_element_get_alt(image, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn imageSetAlt(image: *Image, alt: []const u8) !void {
+    const err = c.dom_html_image_element_set_alt(image, try strFromData(alt));
+    try DOMErr(err);
+}
+
+pub fn imageGetSrc(image: *Image) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_image_element_get_src(image, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn imageSetSrc(image: *Image, src: []const u8) !void {
+    const err = c.dom_html_image_element_set_src(image, try strFromData(src));
+    try DOMErr(err);
+}
+
+pub fn imageGetUseMap(image: *Image) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_image_element_get_use_map(image, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn imageSetUseMap(image: *Image, use_map: []const u8) !void {
+    const err = c.dom_html_image_element_set_use_map(image, try strFromData(use_map));
+    try DOMErr(err);
+}
+
+pub fn imageGetHeight(image: *Image) !u32 {
+    var height: u32 = 0;
+    const err = c.dom_html_image_element_get_height(image, &height);
+    try DOMErr(err);
+    if (height == ulongNegativeOne) return 0;
+    return height;
+}
+pub fn imageSetHeight(image: *Image, height: u32) !void {
+    const err = c.dom_html_image_element_set_height(image, height);
+    try DOMErr(err);
+}
+
+pub fn imageGetWidth(image: *Image) !u32 {
+    var width: u32 = 0;
+    const err = c.dom_html_image_element_get_width(image, &width);
+    try DOMErr(err);
+    if (width == ulongNegativeOne) return 0;
+    return width;
+}
+pub fn imageSetWidth(image: *Image, width: u32) !void {
+    const err = c.dom_html_image_element_set_width(image, width);
+    try DOMErr(err);
+}
+
+pub fn imageGetIsMap(image: *Image) !bool {
+    var is_map: bool = false;
+    const err = c.dom_html_image_element_get_is_map(image, &is_map);
+    try DOMErr(err);
+    return is_map;
+}
+pub fn imageSetIsMap(image: *Image, is_map: bool) !void {
+    const err = c.dom_html_image_element_set_is_map(image, is_map);
+    try DOMErr(err);
+}
+
+// Input
+// - Input.align is deprecated
+// - Input.useMap is deprecated
+// - HTMLElement.access_key
+// - HTMLElement.tabIndex
+// TODO methods:
+// - HTMLElement.blur
+// - HTMLElement.focus
+// - select
+// - HTMLElement.click
+
+pub fn inputGetDefaultValue(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_default_value(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn inputSetDefaultValue(input: *Input, default_value: []const u8) !void {
+    const err = c.dom_html_input_element_set_default_value(input, try strFromData(default_value));
+    try DOMErr(err);
+}
+
+pub fn inputGetDefaultChecked(input: *Input) !bool {
+    var default_checked: bool = false;
+    const err = c.dom_html_input_element_get_default_checked(input, &default_checked);
+    try DOMErr(err);
+    return default_checked;
+}
+pub fn inputSetDefaultChecked(input: *Input, default_checked: bool) !void {
+    const err = c.dom_html_input_element_set_default_checked(input, default_checked);
+    try DOMErr(err);
+}
+
+pub fn inputGetForm(input: *Input) !?*Form {
+    var form: ?*Form = null;
+    const err = c.dom_html_input_element_get_form(input, &form);
+    try DOMErr(err);
+    return form;
+}
+
+pub fn inputGetAccept(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_accept(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn inputSetAccept(input: *Input, accept: []const u8) !void {
+    const err = c.dom_html_input_element_set_accept(input, try strFromData(accept));
+    try DOMErr(err);
+}
+
+pub fn inputGetAlt(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_alt(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn inputSetAlt(input: *Input, alt: []const u8) !void {
+    const err = c.dom_html_input_element_set_alt(input, try strFromData(alt));
+    try DOMErr(err);
+}
+
+pub fn inputGetChecked(input: *Input) !bool {
+    var checked: bool = false;
+    const err = c.dom_html_input_element_get_checked(input, &checked);
+    try DOMErr(err);
+    return checked;
+}
+pub fn inputSetChecked(input: *Input, checked: bool) !void {
+    const err = c.dom_html_input_element_set_checked(input, checked);
+    try DOMErr(err);
+}
+
+pub fn inputGetDisabled(input: *Input) !bool {
+    var disabled: bool = false;
+    const err = c.dom_html_input_element_get_disabled(input, &disabled);
+    try DOMErr(err);
+    return disabled;
+}
+pub fn inputSetDisabled(input: *Input, disabled: bool) !void {
+    const err = c.dom_html_input_element_set_disabled(input, disabled);
+    try DOMErr(err);
+}
+
+pub fn inputGetMaxLength(input: *Input) !i32 {
+    var max_length: i32 = 0;
+    const err = c.dom_html_input_element_get_max_length(input, &max_length);
+    try DOMErr(err);
+    return max_length;
+}
+pub fn inputSetMaxLength(input: *Input, max_length: i32) !void {
+    if (max_length < 0) return error.NegativeValueNotAllowed;
+    const err = c.dom_html_input_element_set_max_length(input, @intCast(max_length));
+    try DOMErr(err);
+}
+
+pub fn inputGetName(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_name(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn inputSetName(input: *Input, name: []const u8) !void {
+    const err = c.dom_html_input_element_set_name(input, try strFromData(name));
+    try DOMErr(err);
+}
+pub fn inputGetReadOnly(input: *Input) !bool {
+    var read_only: bool = false;
+    const err = c.dom_html_input_element_get_read_only(input, &read_only);
+    try DOMErr(err);
+    return read_only;
+}
+pub fn inputSetReadOnly(input: *Input, read_only: bool) !void {
+    const err = c.dom_html_input_element_set_read_only(input, read_only);
+    try DOMErr(err);
+}
+pub fn inputGetSize(input: *Input) !u32 {
+    var size: u32 = 0;
+    const err = c.dom_html_input_element_get_size(input, &size);
+    try DOMErr(err);
+    if (size == ulongNegativeOne) return 20; // 20
+    return size;
+}
+pub fn inputSetSize(input: *Input, size: i32) !void {
+    if (size == 0) return error.ZeroNotAllowed;
+    const new_size = if (size < 0) 20 else size;
+    const err = c.dom_html_input_element_set_size(input, @intCast(new_size));
+    try DOMErr(err);
+}
+
+pub fn inputGetSrc(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_src(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+// url should already be stitched!
+pub fn inputSetSrc(input: *Input, src: []const u8) !void {
+    const err = c.dom_html_input_element_set_src(input, try strFromData(src));
+    try DOMErr(err);
+}
+
+pub fn inputGetType(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_type(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "text";
+    return strToData(s);
+}
+pub fn inputSetType(input: *Input, type_: []const u8) !void {
+    // @speed sort values by usage frequency/length
+    const possible_values = [_][]const u8{ "text", "search", "tel", "url", "email", "password", "date", "month", "week", "time", "datetime-local", "number", "range", "color", "checkbox", "radio", "file", "hidden", "image", "button", "submit", "reset" };
+    var found = false;
+    for (possible_values) |item| {
+        if (std.mem.eql(u8, type_, item)) {
+            found = true;
+            break;
+        }
+    }
+    const new_type = if (found) type_ else "text";
+    try elementSetAttribute(@alignCast(@ptrCast(input)), "type", new_type);
+}
+
+pub fn inputGetValue(input: *Input) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_input_element_get_value(input, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "";
+    return strToData(s);
+}
+pub fn inputSetValue(input: *Input, value: []const u8) !void {
+    const err = c.dom_html_input_element_set_value(input, try strFromData(value));
+    try DOMErr(err);
+}
+
+pub fn buttonGetType(button: *Button) ![]const u8 {
+    var s_: ?*String = null;
+    const err = c.dom_html_button_element_get_type(button, &s_);
+    try DOMErr(err);
+    const s = s_ orelse return "button";
+    return strToData(s);
+}

src/browser/polyfill/fetch.zig

@@ -16,8 +16,6 @@ test "Browser.fetch" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
     defer runner.deinit();
 
-    try @import("polyfill.zig").load(testing.allocator, runner.scope);
-
     try runner.testCases(&.{
         .{
             \\  var ok = false;

src/browser/polyfill/polyfill.zig

@@ -19,36 +19,102 @@
 const std = @import("std");
 const builtin = @import("builtin");
 
+const log = @import("../../log.zig");
 const Allocator = std.mem.Allocator;
 const Env = @import("../env.zig").Env;
 
-const log = std.log.scoped(.polyfill);
+pub const Loader = struct {
+    state: enum { empty, loading } = .empty,
 
-const modules = [_]struct {
-    name: []const u8,
-    source: []const u8,
-}{
-    .{ .name = "polyfill-fetch", .source = @import("fetch.zig").source },
-};
+    done: struct {
+        fetch: bool = false,
+        webcomponents: bool = false,
+    } = .{},
 
-pub fn load(allocator: Allocator, scope: *Env.Scope) !void {
-    var try_catch: Env.TryCatch = undefined;
-    try_catch.init(scope);
-    defer try_catch.deinit();
+    fn load(self: *Loader, comptime name: []const u8, source: []const u8, js_context: *Env.JsContext) void {
+        var try_catch: Env.TryCatch = undefined;
+        try_catch.init(js_context);
+        defer try_catch.deinit();
 
-    for (modules) |m| {
-        const res = scope.exec(m.source, m.name) catch |err| {
-            if (try try_catch.err(allocator)) |msg| {
-                defer allocator.free(msg);
-                log.err("load {s}: {s}", .{ m.name, msg });
-            }
-            return err;
+        self.state = .loading;
+        defer self.state = .empty;
+
+        log.debug(.js, "polyfill load", .{ .name = name });
+        _ = js_context.exec(source, name) catch |err| {
+            log.fatal(.app, "polyfill error", .{
+                .name = name,
+                .err = try_catch.err(js_context.call_arena) catch @errorName(err) orelse @errorName(err),
+            });
         };
 
-        if (builtin.mode == .Debug) {
-            const msg = try res.toString(allocator);
-            defer allocator.free(msg);
-            log.debug("load {s}: {s}", .{ m.name, msg });
-        }
+        @field(self.done, name) = true;
     }
+
+    pub fn missing(self: *Loader, name: []const u8, js_context: *Env.JsContext) bool {
+        // Avoid recursive calls during polyfill loading.
+        if (self.state == .loading) {
+            return false;
+        }
+
+        if (!self.done.fetch and isFetch(name)) {
+            const source = @import("fetch.zig").source;
+            self.load("fetch", source, js_context);
+
+            // We return false here: We want v8 to continue the calling chain
+            // to finally find the polyfill we just inserted. If we want to
+            // return false and stops the call chain, we have to use
+            // `info.GetReturnValue.Set()` function, or `undefined` will be
+            // returned immediately.
+            return false;
+        }
+
+        if (!self.done.webcomponents and isWebcomponents(name)) {
+            const source = @import("webcomponents.zig").source;
+            self.load("webcomponents", source, js_context);
+            // We return false here: We want v8 to continue the calling chain
+            // to finally find the polyfill we just inserted. If we want to
+            // return false and stops the call chain, we have to use
+            // `info.GetReturnValue.Set()` function, or `undefined` will be
+            // returned immediately.
+            return false;
+        }
+
+        if (comptime builtin.mode == .Debug) {
+            log.debug(.unknown_prop, "unkown global property", .{
+                .info = "but the property can exist in pure JS",
+                .property = name,
+            });
+        }
+
+        return false;
+    }
+
+    fn isFetch(name: []const u8) bool {
+        if (std.mem.eql(u8, name, "fetch")) return true;
+        if (std.mem.eql(u8, name, "Request")) return true;
+        if (std.mem.eql(u8, name, "Response")) return true;
+        if (std.mem.eql(u8, name, "Headers")) return true;
+        return false;
+    }
+
+    fn isWebcomponents(name: []const u8) bool {
+        if (std.mem.eql(u8, name, "customElements")) return true;
+        return false;
+    }
+};
+
+pub fn preload(allocator: Allocator, js_context: *Env.JsContext) !void {
+    var try_catch: Env.TryCatch = undefined;
+    try_catch.init(js_context);
+    defer try_catch.deinit();
+
+    const name = "webcomponents-pre";
+    const source = @import("webcomponents.zig").pre;
+    _ = js_context.exec(source, name) catch |err| {
+        if (try try_catch.err(allocator)) |msg| {
+            defer allocator.free(msg);
+            log.fatal(.app, "polyfill error", .{ .name = name, .err = msg });
+        }
+        return err;
+    };
 }

src/browser/polyfill/webcomponents.js

@@ -0,0 +1,61 @@
+/**
+@license @nocompile
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+(function(){/*
+
+ Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+ This code may only be used under the BSD style license found at
+ http://polymer.github.io/LICENSE.txt The complete set of authors may be found
+ at http://polymer.github.io/AUTHORS.txt The complete set of contributors may
+ be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by
+ Google as part of the polymer project is also subject to an additional IP
+ rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+'use strict';var n=window.Document.prototype.createElement,p=window.Document.prototype.createElementNS,aa=window.Document.prototype.importNode,ba=window.Document.prototype.prepend,ca=window.Document.prototype.append,da=window.DocumentFragment.prototype.prepend,ea=window.DocumentFragment.prototype.append,q=window.Node.prototype.cloneNode,r=window.Node.prototype.appendChild,t=window.Node.prototype.insertBefore,u=window.Node.prototype.removeChild,v=window.Node.prototype.replaceChild,w=Object.getOwnPropertyDescriptor(window.Node.prototype,
+"textContent"),y=window.Element.prototype.attachShadow,z=Object.getOwnPropertyDescriptor(window.Element.prototype,"innerHTML"),A=window.Element.prototype.getAttribute,B=window.Element.prototype.setAttribute,C=window.Element.prototype.removeAttribute,D=window.Element.prototype.toggleAttribute,E=window.Element.prototype.getAttributeNS,F=window.Element.prototype.setAttributeNS,G=window.Element.prototype.removeAttributeNS,H=window.Element.prototype.insertAdjacentElement,fa=window.Element.prototype.insertAdjacentHTML,
+ha=window.Element.prototype.prepend,ia=window.Element.prototype.append,ja=window.Element.prototype.before,ka=window.Element.prototype.after,la=window.Element.prototype.replaceWith,ma=window.Element.prototype.remove,na=window.HTMLElement,I=Object.getOwnPropertyDescriptor(window.HTMLElement.prototype,"innerHTML"),oa=window.HTMLElement.prototype.insertAdjacentElement,pa=window.HTMLElement.prototype.insertAdjacentHTML;var qa=new Set;"annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" ").forEach(function(a){return qa.add(a)});function ra(a){var b=qa.has(a);a=/^[a-z][.0-9_a-z]*-[-.0-9_a-z]*$/.test(a);return!b&&a}var sa=document.contains?document.contains.bind(document):document.documentElement.contains.bind(document.documentElement);
+function J(a){var b=a.isConnected;if(void 0!==b)return b;if(sa(a))return!0;for(;a&&!(a.__CE_isImportDocument||a instanceof Document);)a=a.parentNode||(window.ShadowRoot&&a instanceof ShadowRoot?a.host:void 0);return!(!a||!(a.__CE_isImportDocument||a instanceof Document))}function K(a){var b=a.children;if(b)return Array.prototype.slice.call(b);b=[];for(a=a.firstChild;a;a=a.nextSibling)a.nodeType===Node.ELEMENT_NODE&&b.push(a);return b}
+function L(a,b){for(;b&&b!==a&&!b.nextSibling;)b=b.parentNode;return b&&b!==a?b.nextSibling:null}
+function M(a,b,d){for(var f=a;f;){if(f.nodeType===Node.ELEMENT_NODE){var c=f;b(c);var e=c.localName;if("link"===e&&"import"===c.getAttribute("rel")){f=c.import;void 0===d&&(d=new Set);if(f instanceof Node&&!d.has(f))for(d.add(f),f=f.firstChild;f;f=f.nextSibling)M(f,b,d);f=L(a,c);continue}else if("template"===e){f=L(a,c);continue}if(c=c.__CE_shadowRoot)for(c=c.firstChild;c;c=c.nextSibling)M(c,b,d)}f=f.firstChild?f.firstChild:L(a,f)}};function N(){var a=!(null===O||void 0===O||!O.noDocumentConstructionObserver),b=!(null===O||void 0===O||!O.shadyDomFastWalk);this.m=[];this.g=[];this.j=!1;this.shadyDomFastWalk=b;this.I=!a}function P(a,b,d,f){var c=window.ShadyDOM;if(a.shadyDomFastWalk&&c&&c.inUse){if(b.nodeType===Node.ELEMENT_NODE&&d(b),b.querySelectorAll)for(a=c.nativeMethods.querySelectorAll.call(b,"*"),b=0;b<a.length;b++)d(a[b])}else M(b,d,f)}function ta(a,b){a.j=!0;a.m.push(b)}function ua(a,b){a.j=!0;a.g.push(b)}
+function Q(a,b){a.j&&P(a,b,function(d){return R(a,d)})}function R(a,b){if(a.j&&!b.__CE_patched){b.__CE_patched=!0;for(var d=0;d<a.m.length;d++)a.m[d](b);for(d=0;d<a.g.length;d++)a.g[d](b)}}function S(a,b){var d=[];P(a,b,function(c){return d.push(c)});for(b=0;b<d.length;b++){var f=d[b];1===f.__CE_state?a.connectedCallback(f):T(a,f)}}function U(a,b){var d=[];P(a,b,function(c){return d.push(c)});for(b=0;b<d.length;b++){var f=d[b];1===f.__CE_state&&a.disconnectedCallback(f)}}
+function V(a,b,d){d=void 0===d?{}:d;var f=d.J,c=d.upgrade||function(g){return T(a,g)},e=[];P(a,b,function(g){a.j&&R(a,g);if("link"===g.localName&&"import"===g.getAttribute("rel")){var h=g.import;h instanceof Node&&(h.__CE_isImportDocument=!0,h.__CE_registry=document.__CE_registry);h&&"complete"===h.readyState?h.__CE_documentLoadHandled=!0:g.addEventListener("load",function(){var k=g.import;if(!k.__CE_documentLoadHandled){k.__CE_documentLoadHandled=!0;var l=new Set;f&&(f.forEach(function(m){return l.add(m)}),
+l.delete(k));V(a,k,{J:l,upgrade:c})}})}else e.push(g)},f);for(b=0;b<e.length;b++)c(e[b])}
+function T(a,b){try{var d=b.ownerDocument,f=d.__CE_registry;var c=f&&(d.defaultView||d.__CE_isImportDocument)?W(f,b.localName):void 0;if(c&&void 0===b.__CE_state){c.constructionStack.push(b);try{try{if(new c.constructorFunction!==b)throw Error("The custom element constructor did not produce the element being upgraded.");}finally{c.constructionStack.pop()}}catch(k){throw b.__CE_state=2,k;}b.__CE_state=1;b.__CE_definition=c;if(c.attributeChangedCallback&&b.hasAttributes()){var e=c.observedAttributes;
+for(c=0;c<e.length;c++){var g=e[c],h=b.getAttribute(g);null!==h&&a.attributeChangedCallback(b,g,null,h,null)}}J(b)&&a.connectedCallback(b)}}catch(k){X(k)}}N.prototype.connectedCallback=function(a){var b=a.__CE_definition;if(b.connectedCallback)try{b.connectedCallback.call(a)}catch(d){X(d)}};N.prototype.disconnectedCallback=function(a){var b=a.__CE_definition;if(b.disconnectedCallback)try{b.disconnectedCallback.call(a)}catch(d){X(d)}};
+N.prototype.attributeChangedCallback=function(a,b,d,f,c){var e=a.__CE_definition;if(e.attributeChangedCallback&&-1<e.observedAttributes.indexOf(b))try{e.attributeChangedCallback.call(a,b,d,f,c)}catch(g){X(g)}};
+function va(a,b,d,f){var c=b.__CE_registry;if(c&&(null===f||"http://www.w3.org/1999/xhtml"===f)&&(c=W(c,d)))try{var e=new c.constructorFunction;if(void 0===e.__CE_state||void 0===e.__CE_definition)throw Error("Failed to construct '"+d+"': The returned value was not constructed with the HTMLElement constructor.");if("http://www.w3.org/1999/xhtml"!==e.namespaceURI)throw Error("Failed to construct '"+d+"': The constructed element's namespace must be the HTML namespace.");if(e.hasAttributes())throw Error("Failed to construct '"+
+d+"': The constructed element must not have any attributes.");if(null!==e.firstChild)throw Error("Failed to construct '"+d+"': The constructed element must not have any children.");if(null!==e.parentNode)throw Error("Failed to construct '"+d+"': The constructed element must not have a parent node.");if(e.ownerDocument!==b)throw Error("Failed to construct '"+d+"': The constructed element's owner document is incorrect.");if(e.localName!==d)throw Error("Failed to construct '"+d+"': The constructed element's local name is incorrect.");
+return e}catch(g){return X(g),b=null===f?n.call(b,d):p.call(b,f,d),Object.setPrototypeOf(b,HTMLUnknownElement.prototype),b.__CE_state=2,b.__CE_definition=void 0,R(a,b),b}b=null===f?n.call(b,d):p.call(b,f,d);R(a,b);return b}
+function X(a){var b="",d="",f=0,c=0;a instanceof Error?(b=a.message,d=a.sourceURL||a.fileName||"",f=a.line||a.lineNumber||0,c=a.column||a.columnNumber||0):b="Uncaught "+String(a);var e=void 0;void 0===ErrorEvent.prototype.initErrorEvent?e=new ErrorEvent("error",{cancelable:!0,message:b,filename:d,lineno:f,colno:c,error:a}):(e=document.createEvent("ErrorEvent"),e.initErrorEvent("error",!1,!0,b,d,f),e.preventDefault=function(){Object.defineProperty(this,"defaultPrevented",{configurable:!0,get:function(){return!0}})});
+void 0===e.error&&Object.defineProperty(e,"error",{configurable:!0,enumerable:!0,get:function(){return a}});window.dispatchEvent(e);e.defaultPrevented||console.error(a)};function wa(){var a=this;this.g=void 0;this.F=new Promise(function(b){a.l=b})}wa.prototype.resolve=function(a){if(this.g)throw Error("Already resolved.");this.g=a;this.l(a)};function xa(a){var b=document;this.l=void 0;this.h=a;this.g=b;V(this.h,this.g);"loading"===this.g.readyState&&(this.l=new MutationObserver(this.G.bind(this)),this.l.observe(this.g,{childList:!0,subtree:!0}))}function ya(a){a.l&&a.l.disconnect()}xa.prototype.G=function(a){var b=this.g.readyState;"interactive"!==b&&"complete"!==b||ya(this);for(b=0;b<a.length;b++)for(var d=a[b].addedNodes,f=0;f<d.length;f++)V(this.h,d[f])};function Y(a){this.s=new Map;this.u=new Map;this.C=new Map;this.A=!1;this.B=new Map;this.o=function(b){return b()};this.i=!1;this.v=[];this.h=a;this.D=a.I?new xa(a):void 0}Y.prototype.H=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError("Custom element constructor getters must be functions.");za(this,a);this.s.set(a,b);this.v.push(a);this.i||(this.i=!0,this.o(function(){return Aa(d)}))};
+Y.prototype.define=function(a,b){var d=this;if(!(b instanceof Function))throw new TypeError("Custom element constructors must be functions.");za(this,a);Ba(this,a,b);this.v.push(a);this.i||(this.i=!0,this.o(function(){return Aa(d)}))};function za(a,b){if(!ra(b))throw new SyntaxError("The element name '"+b+"' is not valid.");if(W(a,b))throw Error("A custom element with name '"+(b+"' has already been defined."));if(a.A)throw Error("A custom element is already being defined.");}
+function Ba(a,b,d){a.A=!0;var f;try{var c=d.prototype;if(!(c instanceof Object))throw new TypeError("The custom element constructor's prototype is not an object.");var e=function(m){var x=c[m];if(void 0!==x&&!(x instanceof Function))throw Error("The '"+m+"' callback must be a function.");return x};var g=e("connectedCallback");var h=e("disconnectedCallback");var k=e("adoptedCallback");var l=(f=e("attributeChangedCallback"))&&d.observedAttributes||[]}catch(m){throw m;}finally{a.A=!1}d={localName:b,
+constructorFunction:d,connectedCallback:g,disconnectedCallback:h,adoptedCallback:k,attributeChangedCallback:f,observedAttributes:l,constructionStack:[]};a.u.set(b,d);a.C.set(d.constructorFunction,d);return d}Y.prototype.upgrade=function(a){V(this.h,a)};
+function Aa(a){if(!1!==a.i){a.i=!1;for(var b=[],d=a.v,f=new Map,c=0;c<d.length;c++)f.set(d[c],[]);V(a.h,document,{upgrade:function(k){if(void 0===k.__CE_state){var l=k.localName,m=f.get(l);m?m.push(k):a.u.has(l)&&b.push(k)}}});for(c=0;c<b.length;c++)T(a.h,b[c]);for(c=0;c<d.length;c++){for(var e=d[c],g=f.get(e),h=0;h<g.length;h++)T(a.h,g[h]);(e=a.B.get(e))&&e.resolve(void 0)}d.length=0}}Y.prototype.get=function(a){if(a=W(this,a))return a.constructorFunction};
+Y.prototype.whenDefined=function(a){if(!ra(a))return Promise.reject(new SyntaxError("'"+a+"' is not a valid custom element name."));var b=this.B.get(a);if(b)return b.F;b=new wa;this.B.set(a,b);var d=this.u.has(a)||this.s.has(a);a=-1===this.v.indexOf(a);d&&a&&b.resolve(void 0);return b.F};Y.prototype.polyfillWrapFlushCallback=function(a){this.D&&ya(this.D);var b=this.o;this.o=function(d){return a(function(){return b(d)})}};
+function W(a,b){var d=a.u.get(b);if(d)return d;if(d=a.s.get(b)){a.s.delete(b);try{return Ba(a,b,d())}catch(f){X(f)}}}Y.prototype.define=Y.prototype.define;Y.prototype.upgrade=Y.prototype.upgrade;Y.prototype.get=Y.prototype.get;Y.prototype.whenDefined=Y.prototype.whenDefined;Y.prototype.polyfillDefineLazy=Y.prototype.H;Y.prototype.polyfillWrapFlushCallback=Y.prototype.polyfillWrapFlushCallback;function Z(a,b,d){function f(c){return function(e){for(var g=[],h=0;h<arguments.length;++h)g[h]=arguments[h];h=[];for(var k=[],l=0;l<g.length;l++){var m=g[l];m instanceof Element&&J(m)&&k.push(m);if(m instanceof DocumentFragment)for(m=m.firstChild;m;m=m.nextSibling)h.push(m);else h.push(m)}c.apply(this,g);for(g=0;g<k.length;g++)U(a,k[g]);if(J(this))for(g=0;g<h.length;g++)k=h[g],k instanceof Element&&S(a,k)}}void 0!==d.prepend&&(b.prepend=f(d.prepend));void 0!==d.append&&(b.append=f(d.append))};function Ca(a){Document.prototype.createElement=function(b){return va(a,this,b,null)};Document.prototype.importNode=function(b,d){b=aa.call(this,b,!!d);this.__CE_registry?V(a,b):Q(a,b);return b};Document.prototype.createElementNS=function(b,d){return va(a,this,d,b)};Z(a,Document.prototype,{prepend:ba,append:ca})};function Da(a){function b(f){return function(c){for(var e=[],g=0;g<arguments.length;++g)e[g]=arguments[g];g=[];for(var h=[],k=0;k<e.length;k++){var l=e[k];l instanceof Element&&J(l)&&h.push(l);if(l instanceof DocumentFragment)for(l=l.firstChild;l;l=l.nextSibling)g.push(l);else g.push(l)}f.apply(this,e);for(e=0;e<h.length;e++)U(a,h[e]);if(J(this))for(e=0;e<g.length;e++)h=g[e],h instanceof Element&&S(a,h)}}var d=Element.prototype;void 0!==ja&&(d.before=b(ja));void 0!==ka&&(d.after=b(ka));void 0!==la&&
+(d.replaceWith=function(f){for(var c=[],e=0;e<arguments.length;++e)c[e]=arguments[e];e=[];for(var g=[],h=0;h<c.length;h++){var k=c[h];k instanceof Element&&J(k)&&g.push(k);if(k instanceof DocumentFragment)for(k=k.firstChild;k;k=k.nextSibling)e.push(k);else e.push(k)}h=J(this);la.apply(this,c);for(c=0;c<g.length;c++)U(a,g[c]);if(h)for(U(a,this),c=0;c<e.length;c++)g=e[c],g instanceof Element&&S(a,g)});void 0!==ma&&(d.remove=function(){var f=J(this);ma.call(this);f&&U(a,this)})};function Ea(a){function b(c,e){Object.defineProperty(c,"innerHTML",{enumerable:e.enumerable,configurable:!0,get:e.get,set:function(g){var h=this,k=void 0;J(this)&&(k=[],P(a,this,function(x){x!==h&&k.push(x)}));e.set.call(this,g);if(k)for(var l=0;l<k.length;l++){var m=k[l];1===m.__CE_state&&a.disconnectedCallback(m)}this.ownerDocument.__CE_registry?V(a,this):Q(a,this);return g}})}function d(c,e){c.insertAdjacentElement=function(g,h){var k=J(h);g=e.call(this,g,h);k&&U(a,h);J(g)&&S(a,h);return g}}function f(c,
+e){function g(h,k){for(var l=[];h!==k;h=h.nextSibling)l.push(h);for(k=0;k<l.length;k++)V(a,l[k])}c.insertAdjacentHTML=function(h,k){h=h.toLowerCase();if("beforebegin"===h){var l=this.previousSibling;e.call(this,h,k);g(l||this.parentNode.firstChild,this)}else if("afterbegin"===h)l=this.firstChild,e.call(this,h,k),g(this.firstChild,l);else if("beforeend"===h)l=this.lastChild,e.call(this,h,k),g(l||this.firstChild,null);else if("afterend"===h)l=this.nextSibling,e.call(this,h,k),g(this.nextSibling,l);
+else throw new SyntaxError("The value provided ("+String(h)+") is not one of 'beforebegin', 'afterbegin', 'beforeend', or 'afterend'.");}}y&&(Element.prototype.attachShadow=function(c){c=y.call(this,c);if(a.j&&!c.__CE_patched){c.__CE_patched=!0;for(var e=0;e<a.m.length;e++)a.m[e](c)}return this.__CE_shadowRoot=c});z&&z.get?b(Element.prototype,z):I&&I.get?b(HTMLElement.prototype,I):ua(a,function(c){b(c,{enumerable:!0,configurable:!0,get:function(){return q.call(this,!0).innerHTML},set:function(e){var g=
+"template"===this.localName,h=g?this.content:this,k=p.call(document,this.namespaceURI,this.localName);for(k.innerHTML=e;0<h.childNodes.length;)u.call(h,h.childNodes[0]);for(e=g?k.content:k;0<e.childNodes.length;)r.call(h,e.childNodes[0])}})});Element.prototype.setAttribute=function(c,e){if(1!==this.__CE_state)return B.call(this,c,e);var g=A.call(this,c);B.call(this,c,e);e=A.call(this,c);a.attributeChangedCallback(this,c,g,e,null)};Element.prototype.setAttributeNS=function(c,e,g){if(1!==this.__CE_state)return F.call(this,
+c,e,g);var h=E.call(this,c,e);F.call(this,c,e,g);g=E.call(this,c,e);a.attributeChangedCallback(this,e,h,g,c)};Element.prototype.removeAttribute=function(c){if(1!==this.__CE_state)return C.call(this,c);var e=A.call(this,c);C.call(this,c);null!==e&&a.attributeChangedCallback(this,c,e,null,null)};D&&(Element.prototype.toggleAttribute=function(c,e){if(1!==this.__CE_state)return D.call(this,c,e);var g=A.call(this,c),h=null!==g;e=D.call(this,c,e);h!==e&&a.attributeChangedCallback(this,c,g,e?"":null,null);
+return e});Element.prototype.removeAttributeNS=function(c,e){if(1!==this.__CE_state)return G.call(this,c,e);var g=E.call(this,c,e);G.call(this,c,e);var h=E.call(this,c,e);g!==h&&a.attributeChangedCallback(this,e,g,h,c)};oa?d(HTMLElement.prototype,oa):H&&d(Element.prototype,H);pa?f(HTMLElement.prototype,pa):fa&&f(Element.prototype,fa);Z(a,Element.prototype,{prepend:ha,append:ia});Da(a)};var Fa={};function Ga(a){function b(){var d=this.constructor;var f=document.__CE_registry.C.get(d);if(!f)throw Error("Failed to construct a custom element: The constructor was not registered with `customElements`.");var c=f.constructionStack;if(0===c.length)return c=n.call(document,f.localName),Object.setPrototypeOf(c,d.prototype),c.__CE_state=1,c.__CE_definition=f,R(a,c),c;var e=c.length-1,g=c[e];if(g===Fa)throw Error("Failed to construct '"+f.localName+"': This element was already constructed.");c[e]=Fa;
+Object.setPrototypeOf(g,d.prototype);R(a,g);return g}b.prototype=na.prototype;Object.defineProperty(HTMLElement.prototype,"constructor",{writable:!0,configurable:!0,enumerable:!1,value:b});window.HTMLElement=b};function Ha(a){function b(d,f){Object.defineProperty(d,"textContent",{enumerable:f.enumerable,configurable:!0,get:f.get,set:function(c){if(this.nodeType===Node.TEXT_NODE)f.set.call(this,c);else{var e=void 0;if(this.firstChild){var g=this.childNodes,h=g.length;if(0<h&&J(this)){e=Array(h);for(var k=0;k<h;k++)e[k]=g[k]}}f.set.call(this,c);if(e)for(c=0;c<e.length;c++)U(a,e[c])}}})}Node.prototype.insertBefore=function(d,f){if(d instanceof DocumentFragment){var c=K(d);d=t.call(this,d,f);if(J(this))for(f=
+0;f<c.length;f++)S(a,c[f]);return d}c=d instanceof Element&&J(d);f=t.call(this,d,f);c&&U(a,d);J(this)&&S(a,d);return f};Node.prototype.appendChild=function(d){if(d instanceof DocumentFragment){var f=K(d);d=r.call(this,d);if(J(this))for(var c=0;c<f.length;c++)S(a,f[c]);return d}f=d instanceof Element&&J(d);c=r.call(this,d);f&&U(a,d);J(this)&&S(a,d);return c};Node.prototype.cloneNode=function(d){d=q.call(this,!!d);this.ownerDocument.__CE_registry?V(a,d):Q(a,d);return d};Node.prototype.removeChild=function(d){var f=
+d instanceof Element&&J(d),c=u.call(this,d);f&&U(a,d);return c};Node.prototype.replaceChild=function(d,f){if(d instanceof DocumentFragment){var c=K(d);d=v.call(this,d,f);if(J(this))for(U(a,f),f=0;f<c.length;f++)S(a,c[f]);return d}c=d instanceof Element&&J(d);var e=v.call(this,d,f),g=J(this);g&&U(a,f);c&&U(a,d);g&&S(a,d);return e};w&&w.get?b(Node.prototype,w):ta(a,function(d){b(d,{enumerable:!0,configurable:!0,get:function(){for(var f=[],c=this.firstChild;c;c=c.nextSibling)c.nodeType!==Node.COMMENT_NODE&&
+f.push(c.textContent);return f.join("")},set:function(f){for(;this.firstChild;)u.call(this,this.firstChild);null!=f&&""!==f&&r.call(this,document.createTextNode(f))}})})};var O=window.customElements;function Ia(){var a=new N;Ga(a);Ca(a);Z(a,DocumentFragment.prototype,{prepend:da,append:ea});Ha(a);Ea(a);window.CustomElementRegistry=Y;a=new Y(a);document.__CE_registry=a;Object.defineProperty(window,"customElements",{configurable:!0,enumerable:!0,value:a})}O&&!O.forcePolyfill&&"function"==typeof O.define&&"function"==typeof O.get||Ia();window.__CE_installPolyfill=Ia;/*
+
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+}).call(this);

src/browser/polyfill/webcomponents.zig

@@ -0,0 +1,65 @@
+// webcomponents.js code comes from
+// https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
+//
+// The original code source is available in a "BSD style license".
+//
+// This is the `webcomponents-ce.js` bundle
+pub const source = @embedFile("webcomponents.js");
+
+// The main webcomponents.js is lazilly loaded when window.customElements is
+// called. But, if you look at the test below, you'll notice that we declare
+// our custom element (LightPanda) before we call `customElements.define`. We
+// _have_ to declare it before we can register it.
+// That causes an issue, because the LightPanda class extends HTMLElement, which
+// hasn't been monkeypatched by the polyfill yet. If you were to try it as-is
+// you'd get an "Illegal Constructor", because that's what the Zig HTMLElement
+// constructor does (and that's correct).
+// However, once HTMLElement is monkeypatched, it'll work. One simple solution
+// is to run the webcomponents.js polyfill proactively on each page, ensuring
+// that HTMLElement is monkeypatched before any other JavaScript is run. But
+// that adds _a lot_ of overhead.
+// So instead of always running the [large and intrusive] webcomponents.js
+// polyfill, we'll always run this little snippet. It wraps the HTMLElement
+// constructor. When the Lightpanda class is created, it'll extend our little
+// wrapper. But, unlike the Zig default constructor which throws, our code
+// calls the "real" constructor. That might seem like the same thing, but by the
+// time our wrapper is called, the webcomponents.js polyfill will have been
+// loaded and the "real" constructor will be the monkeypatched version.
+// TL;DR creates a layer of indirection for the constructor, so that, when it's
+// actually instantiated, the webcomponents.js polyfill will have been loaded.
+pub const pre =
+    \\ (() => {
+    \\   const HE = window.HTMLElement;
+    \\   const b = function() { return HE.prototype.constructor.call(this); }
+    \\   b.prototype = HE.prototype;
+    \\   window.HTMLElement = b;
+    \\ })();
+;
+
+const testing = @import("../../testing.zig");
+test "Browser.webcomponents" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=main></div>" });
+    defer runner.deinit();
+
+    try @import("polyfill.zig").preload(testing.allocator, runner.page.main_context);
+
+    try runner.testCases(&.{
+        .{
+            \\ class LightPanda extends HTMLElement {
+            \\   constructor() {
+            \\     super();
+            \\   }
+            \\   connectedCallback() {
+            \\     this.append('connected');
+            \\   }
+            \\ }
+            \\ window.customElements.define("lightpanda-test", LightPanda);
+            \\ const main = document.getElementById('main');
+            \\ main.appendChild(document.createElement('lightpanda-test'));
+            ,
+            null,
+        },
+
+        .{ "main.innerHTML", "<lightpanda-test>connected</lightpanda-test>" },
+    }, .{});
+}

src/browser/renderer.zig

@@ -50,6 +50,8 @@ const FlatRenderer = struct {
         };
     }
 
+    // The DOMRect is always relative to the viewport, not the document the element belongs to.
+    // Element that are not part of the main document, either detached or in a shadow DOM should not call this function.
     pub fn getRect(self: *FlatRenderer, e: *parser.Element) !Element.DOMRect {
         var elements = &self.elements;
         const gop = try self.positions.getOrPut(self.allocator, @intFromPtr(e));
@@ -60,20 +62,38 @@ const FlatRenderer = struct {
             gop.value_ptr.* = x;
         }
 
+        const _x: f64 = @floatFromInt(x);
+        const y: f64 = 0.0;
+        const w: f64 = 1.0;
+        const h: f64 = 1.0;
+
         return .{
-            .x = @floatFromInt(x),
-            .y = 0.0,
-            .width = 1.0,
-            .height = 1.0,
+            .x = _x,
+            .y = y,
+            .width = w,
+            .height = h,
+            .left = _x,
+            .top = y,
+            .right = _x + w,
+            .bottom = y + h,
         };
     }
 
     pub fn boundingRect(self: *const FlatRenderer) Element.DOMRect {
+        const x: f64 = 0.0;
+        const y: f64 = 0.0;
+        const w: f64 = @floatFromInt(self.width());
+        const h: f64 = @floatFromInt(self.width());
+
         return .{
-            .x = 0.0,
-            .y = 0.0,
-            .width = @floatFromInt(self.width()),
-            .height = @floatFromInt(self.height()),
+            .x = x,
+            .y = y,
+            .width = w,
+            .height = h,
+            .left = x,
+            .top = y,
+            .right = x + w,
+            .bottom = y + h,
         };
     }
 

src/browser/session.zig

@@ -18,17 +18,18 @@
 
 const std = @import("std");
 
-const ArenaAllocator = std.heap.ArenaAllocator;
+const Allocator = std.mem.Allocator;
 
 const Env = @import("env.zig").Env;
 const Page = @import("page.zig").Page;
+const URL = @import("../url.zig").URL;
 const Browser = @import("browser.zig").Browser;
+const NavigateOpts = @import("page.zig").NavigateOpts;
 
+const log = @import("../log.zig");
 const parser = @import("netsurf.zig");
 const storage = @import("storage/storage.zig");
 
-const log = std.log.scoped(.session);
-
 // Session is like a browser's tab.
 // It owns the js env and the loader for all the pages of the session.
 // You can create successively multiple pages for a session, but you must
@@ -37,25 +38,36 @@ pub const Session = struct {
     browser: *Browser,
 
     // Used to create our Inspector and in the BrowserContext.
-    arena: ArenaAllocator,
+    arena: Allocator,
 
-    executor: Env.Executor,
+    // The page's arena is unsuitable for data that has to existing while
+    // navigating from one page to another. For example, if we're clicking
+    // on an HREF, the URL exists in the original page (where the click
+    // originated) but also has to exist in the new page.
+    // While we could use the Session's arena, this could accumulate a lot of
+    // memory if we do many navigation events. The `transfer_arena` is meant to
+    // bridge the gap: existing long enough to store any data needed to end one
+    // page and start another.
+    transfer_arena: Allocator,
+
+    executor: Env.ExecutionWorld,
     storage_shed: storage.Shed,
     cookie_jar: storage.CookieJar,
 
     page: ?Page = null,
 
     pub fn init(self: *Session, browser: *Browser) !void {
-        var executor = try browser.env.newExecutor();
+        var executor = try browser.env.newExecutionWorld();
         errdefer executor.deinit();
 
         const allocator = browser.app.allocator;
         self.* = .{
             .browser = browser,
             .executor = executor,
-            .arena = ArenaAllocator.init(allocator),
+            .arena = browser.session_arena.allocator(),
             .storage_shed = storage.Shed.init(allocator),
             .cookie_jar = storage.CookieJar.init(allocator),
+            .transfer_arena = browser.transfer_arena.allocator(),
         };
     }
 
@@ -63,7 +75,6 @@ pub const Session = struct {
         if (self.page != null) {
             self.removePage();
         }
-        self.arena.deinit();
         self.cookie_jar.deinit();
         self.storage_shed.deinit();
         self.executor.deinit();
@@ -80,13 +91,14 @@ pub const Session = struct {
 
         const page_arena = &self.browser.page_arena;
         _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
+        _ = self.browser.state_pool.reset(.{ .retain_with_limit = 4 * 1024 });
 
         self.page = @as(Page, undefined);
         const page = &self.page.?;
         try Page.init(page, page_arena.allocator(), self);
 
+        log.debug(.browser, "create page", .{});
         // start JS env
-        log.debug("start new js scope", .{});
         // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
         self.browser.notification.dispatch(.page_created, page);
 
@@ -98,35 +110,33 @@ pub const Session = struct {
         self.browser.notification.dispatch(.page_remove, .{});
 
         std.debug.assert(self.page != null);
-        // Reset all existing callbacks.
+
+        // Cleanup is a bit sensitive. We could still have inflight I/O. For
+        // example, we could have an XHR request which is still in the connect
+        // phase. It's important that we clean these up, as they're holding onto
+        // limited resources (like our fixed-sized http state pool).
+        //
+        // First thing we do, is removeJsContext() which will execute the destructor
+        // of any type that registered a destructor (e.g. XMLHttpRequest).
+        // This will shutdown any pending sockets, which begins our cleaning
+        // processed
+        self.executor.removeJsContext();
+
+        // Second thing we do is reset the loop. This increments the loop ctx_id
+        // so that any "stale" timeouts we process will get ignored. We need to
+        // do this BEFORE running the loop because, at this point, things like
+        // window.setTimeout and running microtasks should be ignored
         self.browser.app.loop.reset();
-        self.executor.endScope();
+
         self.page = null;
 
         // clear netsurf memory arena.
         parser.deinit();
+
+        log.debug(.browser, "remove page", .{});
     }
 
     pub fn currentPage(self: *Session) ?*Page {
         return &(self.page orelse return null);
     }
-
-    pub fn pageNavigate(self: *Session, url_string: []const u8) !void {
-        // currently, this is only called from the page, so let's hope
-        // it isn't null!
-        std.debug.assert(self.page != null);
-
-        // can't use the page arena, because we're about to reset it
-        // and don't want to use the session's arena, because that'll start to
-        // look like a leak if we navigate from page to page a lot.
-        var buf: [2048]u8 = undefined;
-        var fba = std.heap.FixedBufferAllocator.init(&buf);
-        const url = try self.page.?.url.resolve(fba.allocator(), url_string);
-
-        self.removePage();
-        var page = try self.createPage();
-        return page.navigate(url, .{
-            .reason = .anchor,
-        });
-    }
 };

src/browser/storage/cookie.zig

@@ -3,16 +3,16 @@ const Uri = std.Uri;
 const Allocator = std.mem.Allocator;
 const ArenaAllocator = std.heap.ArenaAllocator;
 
+const log = @import("../../log.zig");
 const http = @import("../../http/client.zig");
 const DateTime = @import("../../datetime.zig").DateTime;
 const public_suffix_list = @import("../../data/public_suffix_list.zig").lookup;
 
-const log = std.log.scoped(.cookie);
-
 pub const LookupOpts = struct {
     request_time: ?i64 = null,
     origin_uri: ?*const Uri = null,
     navigation: bool = true,
+    is_http: bool,
 };
 
 pub const Jar = struct {
@@ -33,6 +33,13 @@ pub const Jar = struct {
         self.cookies.deinit(self.allocator);
     }
 
+    pub fn clearRetainingCapacity(self: *Jar) void {
+        for (self.cookies.items) |c| {
+            c.deinit();
+        }
+        self.cookies.clearRetainingCapacity();
+    }
+
     pub fn add(
         self: *Jar,
         cookie: Cookie,
@@ -60,87 +67,33 @@ pub const Jar = struct {
         }
     }
 
+    pub fn removeExpired(self: *Jar, request_time: ?i64) void {
+        if (self.cookies.items.len == 0) return;
+        const time = request_time orelse std.time.timestamp();
+        var i: usize = self.cookies.items.len - 1;
+        while (i > 0) {
+            defer i -= 1;
+            const cookie = &self.cookies.items[i];
+            if (isCookieExpired(cookie, time)) {
+                self.cookies.swapRemove(i).deinit();
+            }
+        }
+    }
+
     pub fn forRequest(self: *Jar, target_uri: *const Uri, writer: anytype, opts: LookupOpts) !void {
-        const target_path = target_uri.path.percent_encoded;
-        const target_host = (target_uri.host orelse return error.InvalidURI).percent_encoded;
+        const target = PreparedUri{
+            .host = (target_uri.host orelse return error.InvalidURI).percent_encoded,
+            .path = target_uri.path.percent_encoded,
+            .secure = std.mem.eql(u8, target_uri.scheme, "https"),
+        };
+        const same_site = try areSameSite(opts.origin_uri, target.host);
 
-        const same_site = try areSameSite(opts.origin_uri, target_host);
-        const is_secure = std.mem.eql(u8, target_uri.scheme, "https");
-
-        var i: usize = 0;
-        var cookies = self.cookies.items;
-        const navigation = opts.navigation;
-        const request_time = opts.request_time orelse std.time.timestamp();
+        removeExpired(self, opts.request_time);
 
         var first = true;
-        while (i < cookies.len) {
-            const cookie = &cookies[i];
+        for (self.cookies.items) |*cookie| {
+            if (!cookie.appliesTo(&target, same_site, opts.navigation, opts.is_http)) continue;
 
-            if (isCookieExpired(cookie, request_time)) {
-                cookie.deinit();
-                _ = self.cookies.swapRemove(i);
-                // don't increment i !
-                continue;
-            }
-            i += 1;
-
-            if (is_secure == false and cookie.secure) {
-                // secure cookie can only be sent over HTTPs
-                continue;
-            }
-
-            if (same_site == false) {
-                // If we aren't on the "same site" (matching 2nd level domain
-                // taking into account public suffix list), then the cookie
-                // can only be sent if cookie.same_site == .none, or if
-                // we're navigating to (as opposed to, say, loading an image)
-                // and cookie.same_site == .lax
-                switch (cookie.same_site) {
-                    .strict => continue,
-                    .lax => if (navigation == false) continue,
-                    .none => {},
-                }
-            }
-
-            {
-                const domain = cookie.domain;
-                if (domain[0] == '.') {
-                    // When a Set-Cookie header has a Domain attribute
-                    // Then we will _always_ prefix it with a dot, extending its
-                    // availability to all subdomains (yes, setting the Domain
-                    // attributes EXPANDS the domains which the cookie will be
-                    // sent to, to always include all subdomains).
-                    if (std.mem.eql(u8, target_host, domain[1..]) == false and std.mem.endsWith(u8, target_host, domain) == false) {
-                        continue;
-                    }
-                } else if (std.mem.eql(u8, target_host, domain) == false) {
-                    // When the Domain attribute isn't specific, then the cookie
-                    // is only sent on an exact match.
-                    continue;
-                }
-            }
-
-            {
-                const path = cookie.path;
-                if (path[path.len - 1] == '/') {
-                    // If our cookie has a trailing slash, we can only match is
-                    // the target path is a perfix. I.e., if our path is
-                    // /doc/  we can only match /doc/*
-                    if (std.mem.startsWith(u8, target_path, path) == false) {
-                        continue;
-                    }
-                } else {
-                    // Our cookie path is something like /hello
-                    if (std.mem.startsWith(u8, target_path, path) == false) {
-                        // The target path has to either be /hello (it isn't)
-                        continue;
-                    } else if (target_path.len < path.len or (target_path.len > path.len and target_path[path.len] != '/')) {
-                        // Or it has to be something like /hello/* (it isn't)
-                        // it isn't!
-                        continue;
-                    }
-                }
-            }
             // we have a match!
             if (first) {
                 first = false;
@@ -156,7 +109,7 @@ pub const Jar = struct {
         var it = header.iterate("set-cookie");
         while (it.next()) |set_cookie| {
             const c = Cookie.parse(self.allocator, uri, set_cookie) catch |err| {
-                log.warn("Couldn't parse cookie '{s}': {}\n", .{ set_cookie, err });
+                log.warn(.web_api, "cookie parse failed", .{ .raw = set_cookie, .err = err });
                 continue;
             };
             try self.add(c, now);
@@ -174,47 +127,9 @@ pub const Jar = struct {
     }
 };
 
-pub const CookieList = struct {
-    _cookies: std.ArrayListUnmanaged(*const Cookie) = .{},
-
-    pub fn deinit(self: *CookieList, allocator: Allocator) void {
-        self._cookies.deinit(allocator);
-    }
-
-    pub fn cookies(self: *const CookieList) []*const Cookie {
-        return self._cookies.items;
-    }
-
-    pub fn len(self: *const CookieList) usize {
-        return self._cookies.items.len;
-    }
-
-    pub fn write(self: *const CookieList, writer: anytype) !void {
-        const all = self._cookies.items;
-        if (all.len == 0) {
-            return;
-        }
-        try writeCookie(all[0], writer);
-        for (all[1..]) |cookie| {
-            try writer.writeAll("; ");
-            try writeCookie(cookie, writer);
-        }
-    }
-
-    fn writeCookie(cookie: *const Cookie, writer: anytype) !void {
-        if (cookie.name.len > 0) {
-            try writer.writeAll(cookie.name);
-            try writer.writeByte('=');
-        }
-        if (cookie.value.len > 0) {
-            try writer.writeAll(cookie.value);
-        }
-    }
-};
-
 fn isCookieExpired(cookie: *const Cookie, now: i64) bool {
     const ce = cookie.expires orelse return false;
-    return ce <= now;
+    return ce <= @as(f64, @floatFromInt(now));
 }
 
 fn areCookiesEqual(a: *const Cookie, b: *const Cookie) bool {
@@ -257,12 +172,12 @@ pub const Cookie = struct {
     arena: ArenaAllocator,
     name: []const u8,
     value: []const u8,
-    path: []const u8,
     domain: []const u8,
-    expires: ?i64,
-    secure: bool,
-    http_only: bool,
-    same_site: SameSite,
+    path: []const u8,
+    expires: ?f64,
+    secure: bool = false,
+    http_only: bool = false,
+    same_site: SameSite = .none,
 
     const SameSite = enum {
         strict,
@@ -293,9 +208,6 @@ pub const Cookie = struct {
             // this check is necessary, `std.mem.minMax` asserts len > 0
             return error.Empty;
         }
-
-        const host = (uri.host orelse return error.InvalidURI).percent_encoded;
-
         {
             const min, const max = std.mem.minMax(u8, str);
             if (min < 32 or max > 126) {
@@ -314,7 +226,7 @@ pub const Cookie = struct {
         var secure: ?bool = null;
         var max_age: ?i64 = null;
         var http_only: ?bool = null;
-        var expires: ?DateTime = null;
+        var expires: ?[]const u8 = null;
         var same_site: ?Cookie.SameSite = null;
 
         var it = std.mem.splitScalar(u8, rest, ';');
@@ -340,37 +252,13 @@ pub const Cookie = struct {
                 samesite,
             }, std.ascii.lowerString(&scrap, key_string)) orelse continue;
 
-            var value = if (sep == attribute.len) "" else trim(attribute[sep + 1 ..]);
+            const value = if (sep == attribute.len) "" else trim(attribute[sep + 1 ..]);
             switch (key) {
-                .path => {
-                    // path attribute value either begins with a '/' or we
-                    // ignore it and use the "default-path" algorithm
-                    if (value.len > 0 and value[0] == '/') {
-                        path = value;
-                    }
-                },
-                .domain => {
-                    if (value.len == 0) {
-                        continue;
-                    }
-                    if (value[0] == '.') {
-                        // leading dot is ignored
-                        value = value[1..];
-                    }
-
-                    if (std.mem.indexOfScalarPos(u8, value, 0, '.') == null) {
-                        // can't set a cookie for a TLD
-                        return error.InvalidDomain;
-                    }
-
-                    if (std.mem.endsWith(u8, host, value) == false) {
-                        return error.InvalidDomain;
-                    }
-                    domain = value;
-                },
+                .path => path = value,
+                .domain => domain = value,
                 .secure => secure = true,
                 .@"max-age" => max_age = std.fmt.parseInt(i64, value, 10) catch continue,
-                .expires => expires = DateTime.parse(value, .rfc822) catch continue,
+                .expires => expires = value,
                 .httponly => http_only = true,
                 .samesite => {
                     same_site = std.meta.stringToEnum(Cookie.SameSite, std.ascii.lowerString(&scrap, value)) orelse continue;
@@ -387,27 +275,33 @@ pub const Cookie = struct {
         const aa = arena.allocator();
         const owned_name = try aa.dupe(u8, cookie_name);
         const owned_value = try aa.dupe(u8, cookie_value);
-        const owned_path = if (path) |p|
-            try aa.dupe(u8, p)
-        else
-            try defaultPath(aa, uri.path.percent_encoded);
+        const owned_path = try parsePath(aa, uri, path);
+        const owned_domain = try parseDomain(aa, uri, domain);
 
-        const owned_domain = if (domain) |d| blk: {
-            const s = try aa.alloc(u8, d.len + 1);
-            s[0] = '.';
-            @memcpy(s[1..], d);
-            break :blk s;
-        } else blk: {
-            break :blk try aa.dupe(u8, host);
-        };
-
-        var normalized_expires: ?i64 = null;
+        var normalized_expires: ?f64 = null;
         if (max_age) |ma| {
-            normalized_expires = std.time.timestamp() + ma;
+            normalized_expires = @floatFromInt(std.time.timestamp() + ma);
         } else {
             // max age takes priority over expires
-            if (expires) |e| {
-                normalized_expires = e.sub(DateTime.now(), .seconds);
+            if (expires) |expires_| {
+                var exp_dt = DateTime.parse(expires_, .rfc822) catch null;
+                if (exp_dt == null) {
+                    if ((expires_.len > 11 and expires_[7] == '-' and expires_[11] == '-')) {
+                        // Replace dashes and try again
+                        const output = try aa.dupe(u8, expires_);
+                        output[7] = ' ';
+                        output[11] = ' ';
+                        exp_dt = DateTime.parse(output, .rfc822) catch null;
+                    }
+                }
+                if (exp_dt) |dt| {
+                    normalized_expires = @floatFromInt(dt.unix(.seconds));
+                } else {
+                    // Algolia, for example, will call document.setCookie with
+                    // an expired value which is literally 'Invalid Date'
+                    // (it's trying to do something like: `new Date() + undefined`).
+                    log.debug(.web_api, "cookie expires date", .{ .date = expires_ });
+                }
             }
         }
 
@@ -424,6 +318,100 @@ pub const Cookie = struct {
         };
     }
 
+    pub fn parsePath(arena: Allocator, uri: ?*const std.Uri, explicit_path: ?[]const u8) ![]const u8 {
+        // path attribute value either begins with a '/' or we
+        // ignore it and use the "default-path" algorithm
+        if (explicit_path) |path| {
+            if (path.len > 0 and path[0] == '/') {
+                return try arena.dupe(u8, path);
+            }
+        }
+
+        // default-path
+        const url_path = (uri orelse return "/").path;
+
+        const either = url_path.percent_encoded;
+        if (either.len == 0 or (either.len == 1 and either[0] == '/')) {
+            return "/";
+        }
+
+        var owned_path: []const u8 = try percentEncode(arena, url_path, isPathChar);
+        const last = std.mem.lastIndexOfScalar(u8, owned_path[1..], '/') orelse {
+            return "/";
+        };
+        return try arena.dupe(u8, owned_path[0 .. last + 1]);
+    }
+
+    pub fn parseDomain(arena: Allocator, uri: ?*const std.Uri, explicit_domain: ?[]const u8) ![]const u8 {
+        var encoded_host: ?[]const u8 = null;
+        if (uri) |uri_| {
+            const uri_host = uri_.host orelse return error.InvalidURI;
+            const host = try percentEncode(arena, uri_host, isHostChar);
+            _ = toLower(host);
+            encoded_host = host;
+        }
+
+        if (explicit_domain) |domain| {
+            if (domain.len > 0) {
+                const no_leading_dot = if (domain[0] == '.') domain[1..] else domain;
+
+                var list = std.ArrayList(u8).init(arena);
+                try list.ensureTotalCapacity(no_leading_dot.len + 1); // Expect no precents needed
+                list.appendAssumeCapacity('.');
+                try std.Uri.Component.percentEncode(list.writer(), no_leading_dot, isHostChar);
+                var owned_domain: []u8 = list.items; // @memory retains memory used before growing
+                _ = toLower(owned_domain);
+
+                if (std.mem.indexOfScalarPos(u8, owned_domain, 1, '.') == null and std.mem.eql(u8, "localhost", owned_domain[1..]) == false) {
+                    // can't set a cookie for a TLD
+                    return error.InvalidDomain;
+                }
+                if (encoded_host) |host| {
+                    if (std.mem.endsWith(u8, host, owned_domain[1..]) == false) {
+                        return error.InvalidDomain;
+                    }
+                }
+
+                return owned_domain;
+            }
+        }
+
+        return encoded_host orelse return error.InvalidDomain; // default-domain
+    }
+
+    pub fn percentEncode(arena: Allocator, component: std.Uri.Component, comptime isValidChar: fn (u8) bool) ![]u8 {
+        switch (component) {
+            .raw => |str| {
+                var list = std.ArrayList(u8).init(arena);
+                try list.ensureTotalCapacity(str.len); // Expect no precents needed
+                try std.Uri.Component.percentEncode(list.writer(), str, isValidChar);
+                return list.items; // @memory retains memory used before growing
+            },
+            .percent_encoded => |str| {
+                return try arena.dupe(u8, str);
+            },
+        }
+    }
+
+    pub fn isHostChar(c: u8) bool {
+        return switch (c) {
+            'A'...'Z', 'a'...'z', '0'...'9', '-', '.', '_', '~' => true,
+            '!', '$', '&', '\'', '(', ')', '*', '+', ',', ';', '=' => true,
+            ':' => true,
+            '[', ']' => true,
+            else => false,
+        };
+    }
+
+    pub fn isPathChar(c: u8) bool {
+        return switch (c) {
+            'A'...'Z', 'a'...'z', '0'...'9', '-', '.', '_', '~' => true,
+            '!', '$', '&', '\'', '(', ')', '*', '+', ',', ';', '=' => true,
+            '/', ':', '@' => true,
+            else => false,
+        };
+    }
+
     fn parseNameValue(str: []const u8) !struct { []const u8, []const u8, []const u8 } {
         const key_value_end = std.mem.indexOfScalarPos(u8, str, 0, ';') orelse str.len;
         const rest = if (key_value_end == str.len) "" else str[key_value_end + 1 ..];
@@ -440,17 +428,77 @@ pub const Cookie = struct {
         const value = trim(str[sep + 1 .. key_value_end]);
         return .{ name, value, rest };
     }
+
+    pub fn appliesTo(self: *const Cookie, url: *const PreparedUri, same_site: bool, navigation: bool, is_http: bool) bool {
+        if (self.http_only and is_http == false) {
+            // http only cookies can be accessed from Javascript
+            return false;
+        }
+
+        if (url.secure == false and self.secure) {
+            // secure cookie can only be sent over HTTPs
+            return false;
+        }
+
+        if (same_site == false) {
+            // If we aren't on the "same site" (matching 2nd level domain
+            // taking into account public suffix list), then the cookie
+            // can only be sent if cookie.same_site == .none, or if
+            // we're navigating to (as opposed to, say, loading an image)
+            // and cookie.same_site == .lax
+            switch (self.same_site) {
+                .strict => return false,
+                .lax => if (navigation == false) return false,
+                .none => {},
+            }
+        }
+
+        {
+            if (self.domain[0] == '.') {
+                // When a Set-Cookie header has a Domain attribute
+                // Then we will _always_ prefix it with a dot, extending its
+                // availability to all subdomains (yes, setting the Domain
+                // attributes EXPANDS the domains which the cookie will be
+                // sent to, to always include all subdomains).
+                if (std.mem.eql(u8, url.host, self.domain[1..]) == false and std.mem.endsWith(u8, url.host, self.domain) == false) {
+                    return false;
+                }
+            } else if (std.mem.eql(u8, url.host, self.domain) == false) {
+                // When the Domain attribute isn't specific, then the cookie
+                // is only sent on an exact match.
+                return false;
+            }
+        }
+
+        {
+            if (self.path[self.path.len - 1] == '/') {
+                // If our cookie has a trailing slash, we can only match is
+                // the target path is a perfix. I.e., if our path is
+                // /doc/  we can only match /doc/*
+                if (std.mem.startsWith(u8, url.path, self.path) == false) {
+                    return false;
+                }
+            } else {
+                // Our cookie path is something like /hello
+                if (std.mem.startsWith(u8, url.path, self.path) == false) {
+                    // The target path has to either be /hello (it isn't)
+                    return false;
+                } else if (url.path.len < self.path.len or (url.path.len > self.path.len and url.path[self.path.len] != '/')) {
+                    // Or it has to be something like /hello/* (it isn't)
+                    // it isn't!
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
 };
 
-fn defaultPath(allocator: Allocator, document_path: []const u8) ![]const u8 {
-    if (document_path.len == 0 or (document_path.len == 1 and document_path[0] == '/')) {
-        return "/";
-    }
-    const last = std.mem.lastIndexOfScalar(u8, document_path[1..], '/') orelse {
-        return "/";
-    };
-    return try allocator.dupe(u8, document_path[0 .. last + 1]);
-}
+pub const PreparedUri = struct {
+    host: []const u8, // Percent encoded, lower case
+    path: []const u8, // Percent encoded
+    secure: bool, // True if scheme is https
+};
 
 fn trim(str: []const u8) []const u8 {
     return std.mem.trim(u8, str, &std.ascii.whitespace);
@@ -464,6 +512,13 @@ fn trimRight(str: []const u8) []const u8 {
     return std.mem.trimLeft(u8, str, &std.ascii.whitespace);
 }
 
+pub fn toLower(str: []u8) []u8 {
+    for (str, 0..) |c, i| {
+        str[i] = std.ascii.toLower(c);
+    }
+    return str;
+}
+
 const testing = @import("../../testing.zig");
 test "cookie: findSecondLevelDomain" {
     const cases = [_]struct { []const u8, []const u8 }{
@@ -549,7 +604,7 @@ test "Jar: forRequest" {
 
     {
         // test with no cookies
-        try expectCookies("", &jar, test_uri, .{});
+        try expectCookies("", &jar, test_uri, .{ .is_http = true });
     }
 
     try jar.add(try Cookie.parse(testing.allocator, &test_uri, "global1=1"), now);
@@ -563,97 +618,114 @@ test "Jar: forRequest" {
     try jar.add(try Cookie.parse(testing.allocator, &test_uri_2, "domain1=9;domain=test.lightpanda.io"), now);
 
     // nothing fancy here
-    try expectCookies("global1=1; global2=2", &jar, test_uri, .{});
-    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .origin_uri = &test_uri, .navigation = false });
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .is_http = true });
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .origin_uri = &test_uri, .navigation = false, .is_http = true });
 
     // We have a cookie where Domain=lightpanda.io
     // This should _not_ match xyxlightpanda.io
     try expectCookies("", &jar, try std.Uri.parse("http://anothersitelightpanda.io/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // matching path without trailing /
     try expectCookies("global1=1; global2=2; path1=3", &jar, try std.Uri.parse("http://lightpanda.io/about"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // incomplete prefix path
     try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/abou"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // path doesn't match
     try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/aboutus"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // path doesn't match cookie directory
     try expectCookies("global1=1; global2=2", &jar, try std.Uri.parse("http://lightpanda.io/docs"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // exact directory match
     try expectCookies("global1=1; global2=2; path2=4", &jar, try std.Uri.parse("http://lightpanda.io/docs/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // sub directory match
     try expectCookies("global1=1; global2=2; path2=4", &jar, try std.Uri.parse("http://lightpanda.io/docs/more"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // secure
     try expectCookies("global1=1; global2=2; secure=5", &jar, try std.Uri.parse("https://lightpanda.io/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // navigational cross domain, secure
     try expectCookies("global1=1; global2=2; secure=5; sitenone=6; sitelax=7", &jar, try std.Uri.parse("https://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://example.com/")),
+        .is_http = true,
     });
 
     // navigational cross domain, insecure
     try expectCookies("global1=1; global2=2; sitelax=7", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://example.com/")),
+        .is_http = true,
     });
 
     // non-navigational cross domain, insecure
     try expectCookies("", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://example.com/")),
         .navigation = false,
+        .is_http = true,
     });
 
     // non-navigational cross domain, secure
     try expectCookies("sitenone=6", &jar, try std.Uri.parse("https://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://example.com/")),
         .navigation = false,
+        .is_http = true,
     });
 
     // non-navigational same origin
     try expectCookies("global1=1; global2=2; sitelax=7; sitestrict=8", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://lightpanda.io/")),
         .navigation = false,
+        .is_http = true,
     });
 
     // exact domain match + suffix
     try expectCookies("global2=2; domain1=9", &jar, try std.Uri.parse("http://test.lightpanda.io/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // domain suffix match + suffix
     try expectCookies("global2=2; domain1=9", &jar, try std.Uri.parse("http://1.test.lightpanda.io/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     // non-matching domain
     try expectCookies("global2=2", &jar, try std.Uri.parse("http://other.lightpanda.io/"), .{
         .origin_uri = &test_uri,
+        .is_http = true,
     });
 
     const l = jar.cookies.items.len;
     try expectCookies("global1=1", &jar, test_uri, .{
         .request_time = now + 100,
         .origin_uri = &test_uri,
+        .is_http = true,
     });
     try testing.expectEqual(l - 1, jar.cookies.items.len);
 
@@ -661,40 +733,6 @@ test "Jar: forRequest" {
     // the 'global2' cookie
 }
 
-test "CookieList: write" {
-    var arr: std.ArrayListUnmanaged(u8) = .{};
-    defer arr.deinit(testing.allocator);
-
-    var cookie_list = CookieList{};
-    defer cookie_list.deinit(testing.allocator);
-
-    const c1 = try Cookie.parse(testing.allocator, &test_uri, "cookie_name=cookie_value");
-    defer c1.deinit();
-    {
-        try cookie_list._cookies.append(testing.allocator, &c1);
-        try cookie_list.write(arr.writer(testing.allocator));
-        try testing.expectEqual("cookie_name=cookie_value", arr.items);
-    }
-
-    const c2 = try Cookie.parse(testing.allocator, &test_uri, "x84");
-    defer c2.deinit();
-    {
-        arr.clearRetainingCapacity();
-        try cookie_list._cookies.append(testing.allocator, &c2);
-        try cookie_list.write(arr.writer(testing.allocator));
-        try testing.expectEqual("cookie_name=cookie_value; x84", arr.items);
-    }
-
-    const c3 = try Cookie.parse(testing.allocator, &test_uri, "nope=");
-    defer c3.deinit();
-    {
-        arr.clearRetainingCapacity();
-        try cookie_list._cookies.append(testing.allocator, &c3);
-        try cookie_list.write(arr.writer(testing.allocator));
-        try testing.expectEqual("cookie_name=cookie_value; x84; nope=", arr.items);
-    }
-}
-
 test "Cookie: parse key=value" {
     try expectError(error.Empty, null, "");
     try expectError(error.InvalidByteSequence, null, &.{ 'a', 30, '=', 'b' });
@@ -817,7 +855,8 @@ test "Cookie: parse expires" {
     try expectAttribute(.{ .expires = null }, null, "b;expires=13.22");
     try expectAttribute(.{ .expires = null }, null, "b;expires=33");
 
-    try expectAttribute(.{ .expires = 1918798080 - std.time.timestamp() }, null, "b;expires=Wed, 21 Oct 2030 07:28:00 GMT");
+    try expectAttribute(.{ .expires = 1918798080 }, null, "b;expires=Wed, 21 Oct 2030 07:28:00 GMT");
+    try expectAttribute(.{ .expires = 1784275395 }, null, "b;expires=Fri, 17-Jul-2026 08:03:15 GMT");
     // max-age has priority over expires
     try expectAttribute(.{ .expires = std.time.timestamp() + 10 }, null, "b;Max-Age=10; expires=Wed, 21 Oct 2030 07:28:00 GMT");
 }
@@ -837,8 +876,19 @@ test "Cookie: parse all" {
         .http_only = true,
         .secure = true,
         .domain = ".lightpanda.io",
-        .expires = std.time.timestamp() + 30,
+        .expires = @floatFromInt(std.time.timestamp() + 30),
     }, "https://lightpanda.io/cms/users", "user-id=9000; HttpOnly; Max-Age=30; Secure; path=/; Domain=lightpanda.io");
+
+    try expectCookie(.{
+        .name = "app_session",
+        .value = "123",
+        .path = "/",
+        .http_only = true,
+        .secure = false,
+        .domain = ".localhost",
+        .same_site = .lax,
+        .expires = @floatFromInt(std.time.timestamp() + 7200),
+    }, "http://localhost:8000/login", "app_session=123; Max-Age=7200; path=/; domain=localhost; httponly; samesite=lax");
 }
 
 test "Cookie: parse domain" {
@@ -849,6 +899,8 @@ test "Cookie: parse domain" {
     try expectAttribute(.{ .domain = ".dev.lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=dev.lightpanda.io");
     try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=lightpanda.io");
     try expectAttribute(.{ .domain = ".lightpanda.io" }, "http://dev.lightpanda.io/", "b;domain=.lightpanda.io");
+    try expectAttribute(.{ .domain = ".localhost" }, "http://localhost/", "b;domain=localhost");
+    try expectAttribute(.{ .domain = ".localhost" }, "http://localhost/", "b;domain=.localhost");
 
     try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=io");
     try expectError(error.InvalidDomain, "http://lightpanda.io/", "b;domain=.io");
@@ -862,7 +914,7 @@ const ExpectedCookie = struct {
     value: []const u8,
     path: []const u8,
     domain: []const u8,
-    expires: ?i64 = null,
+    expires: ?f64 = null,
     secure: bool = false,
     http_only: bool = false,
     same_site: Cookie.SameSite = .lax,
@@ -881,7 +933,7 @@ fn expectCookie(expected: ExpectedCookie, url: []const u8, set_cookie: []const u
     try testing.expectEqual(expected.path, cookie.path);
     try testing.expectEqual(expected.domain, cookie.domain);
 
-    try testing.expectDelta(expected.expires, cookie.expires, 2);
+    try testing.expectDelta(expected.expires, cookie.expires, 2.0);
 }
 
 fn expectAttribute(expected: anytype, url: ?[]const u8, set_cookie: []const u8) !void {
@@ -891,7 +943,10 @@ fn expectAttribute(expected: anytype, url: ?[]const u8, set_cookie: []const u8)
 
     inline for (@typeInfo(@TypeOf(expected)).@"struct".fields) |f| {
         if (comptime std.mem.eql(u8, f.name, "expires")) {
-            try testing.expectDelta(expected.expires, cookie.expires, 1);
+            switch (@typeInfo(@TypeOf(expected.expires))) {
+                .int, .comptime_int => try testing.expectDelta(@as(f64, @floatFromInt(expected.expires)), cookie.expires, 1.0),
+                else => try testing.expectDelta(expected.expires, cookie.expires, 1.0),
+            }
         } else {
             try testing.expectEqual(@field(expected, f.name), @field(cookie, f.name));
         }

src/browser/storage/storage.zig

@@ -20,8 +20,6 @@ const std = @import("std");
 
 const DOMError = @import("../netsurf.zig").DOMError;
 
-const log = std.log.scoped(.storage);
-
 pub const cookie = @import("cookie.zig");
 pub const Cookie = cookie.Cookie;
 pub const CookieJar = cookie.Jar;
@@ -149,10 +147,7 @@ pub const Bottle = struct {
     }
 
     pub fn _setItem(self: *Bottle, k: []const u8, v: []const u8) !void {
-        const gop = self.map.getOrPut(self.alloc, k) catch |e| {
-            log.debug("set item: {any}", .{e});
-            return DOMError.QuotaExceeded;
-        };
+        const gop = try self.map.getOrPut(self.alloc, k);
 
         if (gop.found_existing == false) {
             gop.key_ptr.* = try self.alloc.dupe(u8, k);

src/browser/url/query.zig

@@ -1,433 +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 Reader = @import("../../str/parser.zig").Reader;
-const asUint = @import("../../str/parser.zig").asUint;
-
-// Values is a map with string key of string values.
-pub const Values = struct {
-    arena: std.heap.ArenaAllocator,
-    map: std.StringArrayHashMapUnmanaged(List),
-
-    const List = std.ArrayListUnmanaged([]const u8);
-
-    pub fn init(allocator: std.mem.Allocator) Values {
-        return .{
-            .map = .{},
-            .arena = std.heap.ArenaAllocator.init(allocator),
-        };
-    }
-
-    pub fn deinit(self: *Values) void {
-        self.arena.deinit();
-    }
-
-    // add the key value couple to the values.
-    // the key and the value are duplicated.
-    pub fn append(self: *Values, k: []const u8, v: []const u8) !void {
-        const allocator = self.arena.allocator();
-        const owned_value = try allocator.dupe(u8, v);
-
-        var gop = try self.map.getOrPut(allocator, k);
-        if (gop.found_existing) {
-            return gop.value_ptr.append(allocator, owned_value);
-        }
-
-        gop.key_ptr.* = try allocator.dupe(u8, k);
-
-        var list = List{};
-        try list.append(allocator, owned_value);
-        gop.value_ptr.* = list;
-    }
-
-    // append by taking the ownership of the key and the value
-    fn appendOwned(self: *Values, k: []const u8, v: []const u8) !void {
-        const allocator = self.arena.allocator();
-        var gop = try self.map.getOrPut(allocator, k);
-        if (gop.found_existing) {
-            return gop.value_ptr.append(allocator, v);
-        }
-
-        var list = List{};
-        try list.append(allocator, v);
-        gop.value_ptr.* = list;
-    }
-
-    pub fn get(self: *const Values, k: []const u8) []const []const u8 {
-        if (self.map.get(k)) |list| {
-            return list.items;
-        }
-
-        return &[_][]const u8{};
-    }
-
-    pub fn first(self: *const Values, k: []const u8) []const u8 {
-        if (self.map.getPtr(k)) |list| {
-            if (list.items.len == 0) return "";
-            return list.items[0];
-        }
-
-        return "";
-    }
-
-    pub fn delete(self: *Values, k: []const u8) void {
-        _ = self.map.fetchSwapRemove(k);
-    }
-
-    pub fn deleteValue(self: *Values, k: []const u8, v: []const u8) void {
-        const list = self.map.getPtr(k) orelse return;
-
-        for (list.items, 0..) |vv, i| {
-            if (std.mem.eql(u8, v, vv)) {
-                _ = list.swapRemove(i);
-                return;
-            }
-        }
-    }
-
-    pub fn count(self: *const Values) usize {
-        return self.map.count();
-    }
-
-    pub fn encode(self: *const Values, writer: anytype) !void {
-        var it = self.map.iterator();
-
-        const first_entry = it.next() orelse return;
-        try encodeKeyValues(first_entry, writer);
-
-        while (it.next()) |entry| {
-            try writer.writeByte('&');
-            try encodeKeyValues(entry, writer);
-        }
-    }
-};
-
-fn encodeKeyValues(entry: anytype, writer: anytype) !void {
-    const key = entry.key_ptr.*;
-
-    try escape(key, writer);
-    const values = entry.value_ptr.items;
-    if (values.len == 0) {
-        return;
-    }
-
-    if (values[0].len > 0) {
-        try writer.writeByte('=');
-        try escape(values[0], writer);
-    }
-
-    for (values[1..]) |value| {
-        try writer.writeByte('&');
-        try escape(key, writer);
-        if (value.len > 0) {
-            try writer.writeByte('=');
-            try escape(value, writer);
-        }
-    }
-}
-
-fn escape(raw: []const u8, writer: anytype) !void {
-    var start: usize = 0;
-    for (raw, 0..) |char, index| {
-        if ('a' <= char and char <= 'z' or 'A' <= char and char <= 'Z' or '0' <= char and char <= '9') {
-            continue;
-        }
-
-        try writer.print("{s}%{X:0>2}", .{ raw[start..index], char });
-        start = index + 1;
-    }
-    try writer.writeAll(raw[start..]);
-}
-
-// Parse the given query.
-pub fn parseQuery(alloc: std.mem.Allocator, s: []const u8) !Values {
-    var values = Values.init(alloc);
-    errdefer values.deinit();
-
-    const arena = values.arena.allocator();
-
-    const ln = s.len;
-    if (ln == 0) return values;
-
-    var r = Reader{ .data = s };
-    while (true) {
-        const param = r.until('&');
-        if (param.len == 0) break;
-
-        var rr = Reader{ .data = param };
-        const k = rr.until('=');
-        if (k.len == 0) continue;
-
-        _ = rr.skip();
-        const v = rr.tail();
-
-        // decode k and v
-        const kk = try unescape(arena, k);
-        const vv = try unescape(arena, v);
-
-        try values.appendOwned(kk, vv);
-
-        if (!r.skip()) break;
-    }
-
-    return values;
-}
-
-// The return'd string may or may not be allocated. Callers should use arenas
-fn unescape(allocator: std.mem.Allocator, input: []const u8) ![]const u8 {
-    const HEX_CHAR = comptime blk: {
-        var all = std.mem.zeroes([256]bool);
-        for ('a'..('f' + 1)) |b| all[b] = true;
-        for ('A'..('F' + 1)) |b| all[b] = true;
-        for ('0'..('9' + 1)) |b| all[b] = true;
-        break :blk all;
-    };
-
-    const HEX_DECODE = comptime blk: {
-        var all = std.mem.zeroes([256]u8);
-        for ('a'..('z' + 1)) |b| all[b] = b - 'a' + 10;
-        for ('A'..('Z' + 1)) |b| all[b] = b - 'A' + 10;
-        for ('0'..('9' + 1)) |b| all[b] = b - '0';
-        break :blk all;
-    };
-
-    var has_plus = false;
-    var unescaped_len = input.len;
-
-    {
-        // Figure out if we have any spaces and what the final unescaped length
-        // will be (which will let us know if we have anything to unescape in
-        // the first place)
-        var i: usize = 0;
-        while (i < input.len) {
-            const c = input[i];
-            if (c == '%') {
-                if (i + 2 >= input.len or !HEX_CHAR[input[i + 1]] or !HEX_CHAR[input[i + 2]]) {
-                    return error.EscapeError;
-                }
-                i += 3;
-                unescaped_len -= 2;
-            } else if (c == '+') {
-                has_plus = true;
-                i += 1;
-            } else {
-                i += 1;
-            }
-        }
-    }
-
-    // no encoding, and no plus. nothing to unescape
-    if (unescaped_len == input.len and has_plus == false) {
-        return input;
-    }
-
-    var unescaped = try allocator.alloc(u8, unescaped_len);
-    errdefer allocator.free(unescaped);
-
-    var input_pos: usize = 0;
-    for (0..unescaped_len) |unescaped_pos| {
-        switch (input[input_pos]) {
-            '+' => {
-                unescaped[unescaped_pos] = ' ';
-                input_pos += 1;
-            },
-            '%' => {
-                const encoded = input[input_pos + 1 .. input_pos + 3];
-                const encoded_as_uint = @as(u16, @bitCast(encoded[0..2].*));
-                unescaped[unescaped_pos] = switch (encoded_as_uint) {
-                    asUint("20") => ' ',
-                    asUint("21") => '!',
-                    asUint("22") => '"',
-                    asUint("23") => '#',
-                    asUint("24") => '$',
-                    asUint("25") => '%',
-                    asUint("26") => '&',
-                    asUint("27") => '\'',
-                    asUint("28") => '(',
-                    asUint("29") => ')',
-                    asUint("2A") => '*',
-                    asUint("2B") => '+',
-                    asUint("2C") => ',',
-                    asUint("2F") => '/',
-                    asUint("3A") => ':',
-                    asUint("3B") => ';',
-                    asUint("3D") => '=',
-                    asUint("3F") => '?',
-                    asUint("40") => '@',
-                    asUint("5B") => '[',
-                    asUint("5D") => ']',
-                    else => HEX_DECODE[encoded[0]] << 4 | HEX_DECODE[encoded[1]],
-                };
-                input_pos += 3;
-            },
-            else => |c| {
-                unescaped[unescaped_pos] = c;
-                input_pos += 1;
-            },
-        }
-    }
-    return unescaped;
-}
-
-const testing = std.testing;
-test "url.Query: unescape" {
-    const allocator = testing.allocator;
-    const cases = [_]struct { expected: []const u8, input: []const u8, free: bool }{
-        .{ .expected = "", .input = "", .free = false },
-        .{ .expected = "over", .input = "over", .free = false },
-        .{ .expected = "Hello  World", .input = "Hello  World", .free = false },
-        .{ .expected = "~", .input = "%7E", .free = true },
-        .{ .expected = "~", .input = "%7e", .free = true },
-        .{ .expected = "Hello~World", .input = "Hello%7eWorld", .free = true },
-        .{ .expected = "Hello  World", .input = "Hello++World", .free = true },
-    };
-
-    for (cases) |case| {
-        const value = try unescape(allocator, case.input);
-        defer if (case.free) {
-            allocator.free(value);
-        };
-        try testing.expectEqualStrings(case.expected, value);
-    }
-
-    try testing.expectError(error.EscapeError, unescape(undefined, "%"));
-    try testing.expectError(error.EscapeError, unescape(undefined, "%a"));
-    try testing.expectError(error.EscapeError, unescape(undefined, "%1"));
-    try testing.expectError(error.EscapeError, unescape(undefined, "123%45%6"));
-    try testing.expectError(error.EscapeError, unescape(undefined, "%zzzzz"));
-    try testing.expectError(error.EscapeError, unescape(undefined, "%0\xff"));
-}
-
-test "url.Query: parseQuery" {
-    try testParseQuery(.{}, "");
-
-    try testParseQuery(.{}, "&");
-
-    try testParseQuery(.{ .a = [_][]const u8{"b"} }, "a=b");
-
-    try testParseQuery(.{ .hello = [_][]const u8{"world"} }, "hello=world");
-
-    try testParseQuery(.{ .hello = [_][]const u8{ "world", "all" } }, "hello=world&hello=all");
-
-    try testParseQuery(.{
-        .a = [_][]const u8{"b"},
-        .b = [_][]const u8{"c"},
-    }, "a=b&b=c");
-
-    try testParseQuery(.{ .a = [_][]const u8{""} }, "a");
-    try testParseQuery(.{ .a = [_][]const u8{ "", "", "" } }, "a&a&a");
-
-    try testParseQuery(.{ .abc = [_][]const u8{""} }, "abc");
-    try testParseQuery(.{
-        .abc = [_][]const u8{""},
-        .dde = [_][]const u8{ "", "" },
-    }, "abc&dde&dde");
-
-    try testParseQuery(.{
-        .@"power is >" = [_][]const u8{"9,000?"},
-    }, "power%20is%20%3E=9%2C000%3F");
-}
-
-test "url.Query.Values: get/first/count" {
-    var values = Values.init(testing.allocator);
-    defer values.deinit();
-
-    {
-        // empty
-        try testing.expectEqual(0, values.count());
-        try testing.expectEqual(0, values.get("").len);
-        try testing.expectEqualStrings("", values.first(""));
-        try testing.expectEqual(0, values.get("key").len);
-        try testing.expectEqualStrings("", values.first("key"));
-    }
-
-    {
-        // add 1 value => key
-        try values.appendOwned("key", "value");
-        try testing.expectEqual(1, values.count());
-        try testing.expectEqual(1, values.get("key").len);
-        try testing.expectEqualSlices(
-            []const u8,
-            &.{"value"},
-            values.get("key"),
-        );
-        try testing.expectEqualStrings("value", values.first("key"));
-    }
-
-    {
-        // add another value for the same key
-        try values.appendOwned("key", "another");
-        try testing.expectEqual(1, values.count());
-        try testing.expectEqual(2, values.get("key").len);
-        try testing.expectEqualSlices(
-            []const u8,
-            &.{ "value", "another" },
-            values.get("key"),
-        );
-        try testing.expectEqualStrings("value", values.first("key"));
-    }
-
-    {
-        // add a new key (and value)
-        try values.appendOwned("over", "9000!");
-        try testing.expectEqual(2, values.count());
-        try testing.expectEqual(2, values.get("key").len);
-        try testing.expectEqual(1, values.get("over").len);
-        try testing.expectEqualSlices(
-            []const u8,
-            &.{"9000!"},
-            values.get("over"),
-        );
-        try testing.expectEqualStrings("9000!", values.first("over"));
-    }
-}
-
-test "url.Query.Values: encode" {
-    var values = try parseQuery(
-        testing.allocator,
-        "hello=world&i%20will%20not%20fear=%3E%3E&a=b&a=c",
-    );
-    defer values.deinit();
-
-    var buf: std.ArrayListUnmanaged(u8) = .{};
-    defer buf.deinit(testing.allocator);
-    try values.encode(buf.writer(testing.allocator));
-    try testing.expectEqualStrings(
-        "hello=world&i%20will%20not%20fear=%3E%3E&a=b&a=c",
-        buf.items,
-    );
-}
-
-fn testParseQuery(expected: anytype, query: []const u8) !void {
-    var values = try parseQuery(testing.allocator, query);
-    defer values.deinit();
-
-    var count: usize = 0;
-    inline for (@typeInfo(@TypeOf(expected)).@"struct".fields) |f| {
-        const actual = values.get(f.name);
-        const expect = @field(expected, f.name);
-        try testing.expectEqual(expect.len, actual.len);
-        for (expect, actual) |e, a| {
-            try testing.expectEqualStrings(e, a);
-        }
-        count += 1;
-    }
-    try testing.expectEqual(count, values.count());
-}

src/browser/url/url.zig

@@ -17,13 +17,23 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const SessionState = @import("../env.zig").SessionState;
+const Allocator = std.mem.Allocator;
 
-const query = @import("query.zig");
+const parser = @import("../netsurf.zig");
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const FormData = @import("../xhr/form_data.zig").FormData;
+const HTMLElement = @import("../html/elements.zig").HTMLElement;
+
+const kv = @import("../key_value.zig");
+const iterator = @import("../iterator/iterator.zig");
 
 pub const Interfaces = .{
     URL,
     URLSearchParams,
+    KeyIterable,
+    ValueIterable,
+    EntryIterable,
 };
 
 // https://url.spec.whatwg.org/#url
@@ -38,25 +48,62 @@ pub const Interfaces = .{
 // allocatorate data, I should be able to retrieve the scheme + the following `:`
 // from rawuri.
 //
-// 2. The other way would bu to copy the `std.Uri` code to ahve a dedicated
+// 2. The other way would be to copy the `std.Uri` code to have a dedicated
 // parser including the characters we want for the web API.
 pub const URL = struct {
     uri: std.Uri,
     search_params: URLSearchParams,
 
-    pub fn constructor(
-        url: []const u8,
-        base: ?[]const u8,
-        state: *SessionState,
-    ) !URL {
-        const arena = state.arena;
-        const raw = try std.mem.concat(arena, u8, &[_][]const u8{ url, base orelse "" });
+    pub const empty = URL{
+        .uri = .{ .scheme = "" },
+        .search_params = .{},
+    };
+
+    const URLArg = union(enum) {
+        url: *URL,
+        element: *parser.ElementHTML,
+        string: []const u8,
+
+        fn toString(self: URLArg, arena: Allocator) !?[]const u8 {
+            switch (self) {
+                .string => |s| return s,
+                .url => |url| return try url.toString(arena),
+                .element => |e| return try parser.elementGetAttribute(@ptrCast(e), "href"),
+            }
+        }
+    };
+
+    pub fn constructor(url: URLArg, base: ?URLArg, page: *Page) !URL {
+        const arena = page.arena;
+        const url_str = try url.toString(arena) orelse return error.InvalidArgument;
+
+        var raw: ?[]const u8 = null;
+        if (base) |b| {
+            if (try b.toString(arena)) |bb| {
+                raw = try @import("../../url.zig").URL.stitch(arena, url_str, bb, .{});
+            }
+        }
+
+        if (raw == null) {
+            // if it was a URL, then it's already be owned by the arena
+            raw = if (url == .url) url_str else try arena.dupe(u8, url_str);
+        }
+
+        const uri = std.Uri.parse(raw.?) catch blk: {
+            if (!std.mem.endsWith(u8, raw.?, "://")) {
+                return error.TypeError;
+            }
+            // schema only is valid!
+            break :blk std.Uri{
+                .scheme = raw.?[0 .. raw.?.len - 3],
+                .host = .{ .percent_encoded = "" },
+            };
+        };
 
-        const uri = std.Uri.parse(raw) catch return error.TypeError;
         return init(arena, uri);
     }
 
-    pub fn init(arena: std.mem.Allocator, uri: std.Uri) !URL {
+    pub fn init(arena: Allocator, uri: std.Uri) !URL {
         return .{
             .uri = uri,
             .search_params = try URLSearchParams.init(
@@ -66,8 +113,8 @@ pub const URL = struct {
         };
     }
 
-    pub fn get_origin(self: *URL, state: *SessionState) ![]const u8 {
-        var buf = std.ArrayList(u8).init(state.arena);
+    pub fn get_origin(self: *URL, page: *Page) ![]const u8 {
+        var buf = std.ArrayList(u8).init(page.arena);
         try self.uri.writeToStream(.{
             .scheme = true,
             .authentication = false,
@@ -80,37 +127,42 @@ pub const URL = struct {
     }
 
     // get_href returns the URL by writing all its components.
-    // The query is replaced by a dump of search params.
-    //
-    pub fn get_href(self: *URL, state: *SessionState) ![]const u8 {
-        const arena = state.arena;
-        // retrieve the query search from search_params.
-        const cur = self.uri.query;
-        defer self.uri.query = cur;
-        var q = std.ArrayList(u8).init(arena);
-        try self.search_params.values.encode(q.writer());
-        self.uri.query = .{ .percent_encoded = q.items };
+    pub fn get_href(self: *URL, page: *Page) ![]const u8 {
+        return self.toString(page.arena);
+    }
 
-        return try self.toString(arena);
+    pub fn _toString(self: *URL, page: *Page) ![]const u8 {
+        return self.toString(page.arena);
     }
 
     // format the url with all its components.
-    pub fn toString(self: *URL, arena: std.mem.Allocator) ![]const u8 {
-        var buf = std.ArrayList(u8).init(arena);
-
+    pub fn toString(self: *const URL, arena: Allocator) ![]const u8 {
+        var buf: std.ArrayListUnmanaged(u8) = .empty;
         try self.uri.writeToStream(.{
             .scheme = true,
             .authentication = true,
             .authority = true,
             .path = uriComponentNullStr(self.uri.path).len > 0,
-            .query = uriComponentNullStr(self.uri.query).len > 0,
-            .fragment = uriComponentNullStr(self.uri.fragment).len > 0,
-        }, buf.writer());
+        }, buf.writer(arena));
+
+        if (self.search_params.get_size() > 0) {
+            try buf.append(arena, '?');
+            try self.search_params.write(buf.writer(arena));
+        }
+
+        {
+            const fragment = uriComponentNullStr(self.uri.fragment);
+            if (fragment.len > 0) {
+                try buf.append(arena, '#');
+                try buf.appendSlice(arena, fragment);
+            }
+        }
+
         return buf.items;
     }
 
-    pub fn get_protocol(self: *URL, state: *SessionState) ![]const u8 {
-        return try std.mem.concat(state.arena, u8, &[_][]const u8{ self.uri.scheme, ":" });
+    pub fn get_protocol(self: *URL, page: *Page) ![]const u8 {
+        return try std.mem.concat(page.arena, u8, &[_][]const u8{ self.uri.scheme, ":" });
     }
 
     pub fn get_username(self: *URL) []const u8 {
@@ -121,8 +173,8 @@ pub const URL = struct {
         return uriComponentNullStr(self.uri.password);
     }
 
-    pub fn get_host(self: *URL, state: *SessionState) ![]const u8 {
-        var buf = std.ArrayList(u8).init(state.arena);
+    pub fn get_host(self: *URL, page: *Page) ![]const u8 {
+        var buf = std.ArrayList(u8).init(page.arena);
 
         try self.uri.writeToStream(.{
             .scheme = false,
@@ -139,8 +191,8 @@ pub const URL = struct {
         return uriComponentNullStr(self.uri.host);
     }
 
-    pub fn get_port(self: *URL, state: *SessionState) ![]const u8 {
-        const arena = state.arena;
+    pub fn get_port(self: *URL, page: *Page) ![]const u8 {
+        const arena = page.arena;
         if (self.uri.port == null) return try arena.dupe(u8, "");
 
         var buf = std.ArrayList(u8).init(arena);
@@ -153,19 +205,28 @@ pub const URL = struct {
         return uriComponentStr(self.uri.path);
     }
 
-    pub fn get_search(self: *URL, state: *SessionState) ![]const u8 {
-        const arena = state.arena;
-        if (self.search_params.get_size() == 0) return try arena.dupe(u8, "");
+    pub fn get_search(self: *URL, page: *Page) ![]const u8 {
+        const arena = page.arena;
+
+        if (self.search_params.get_size() == 0) {
+            return "";
+        }
 
         var buf: std.ArrayListUnmanaged(u8) = .{};
-
         try buf.append(arena, '?');
-        try self.search_params.values.encode(buf.writer(arena));
+        try self.search_params.encode(buf.writer(arena));
         return buf.items;
     }
 
-    pub fn get_hash(self: *URL, state: *SessionState) ![]const u8 {
-        const arena = state.arena;
+    pub fn set_search(self: *URL, qs_: ?[]const u8, page: *Page) !void {
+        self.search_params = .{};
+        if (qs_) |qs| {
+            self.search_params = try URLSearchParams.init(page.arena, qs);
+        }
+    }
+
+    pub fn get_hash(self: *URL, page: *Page) ![]const u8 {
+        const arena = page.arena;
         if (self.uri.fragment == null) return try arena.dupe(u8, "");
 
         return try std.mem.concat(arena, u8, &[_][]const u8{ "#", uriComponentNullStr(self.uri.fragment) });
@@ -175,8 +236,8 @@ pub const URL = struct {
         return &self.search_params;
     }
 
-    pub fn _toJSON(self: *URL, state: *SessionState) ![]const u8 {
-        return try self.get_href(state);
+    pub fn _toJSON(self: *URL, page: *Page) ![]const u8 {
+        return self.get_href(page);
     }
 };
 
@@ -196,47 +257,250 @@ fn uriComponentStr(c: std.Uri.Component) []const u8 {
 }
 
 // https://url.spec.whatwg.org/#interface-urlsearchparams
-// TODO array like
 pub const URLSearchParams = struct {
-    values: query.Values,
+    entries: kv.List = .{},
 
-    pub fn constructor(qs: ?[]const u8, state: *SessionState) !URLSearchParams {
-        return init(state.arena, qs);
-    }
+    const URLSearchParamsOpts = union(enum) {
+        qs: []const u8,
+        form_data: *const FormData,
+        js_obj: Env.JsObject,
+    };
+    pub fn constructor(opts_: ?URLSearchParamsOpts, page: *Page) !URLSearchParams {
+        const opts = opts_ orelse return .{ .entries = .{} };
+        return switch (opts) {
+            .qs => |qs| init(page.arena, qs),
+            .form_data => |fd| .{ .entries = try fd.entries.clone(page.arena) },
+            .js_obj => |js_obj| {
+                const arena = page.arena;
+                var it = js_obj.nameIterator();
 
-    pub fn init(arena: std.mem.Allocator, qs: ?[]const u8) !URLSearchParams {
-        return .{
-            .values = try query.parseQuery(arena, qs orelse ""),
+                var entries: kv.List = .{};
+                try entries.ensureTotalCapacity(arena, it.count);
+
+                while (try it.next()) |js_name| {
+                    const name = try js_name.toString(arena);
+                    const js_val = try js_obj.get(name);
+                    entries.appendOwnedAssumeCapacity(
+                        name,
+                        try js_val.toString(arena),
+                    );
+                }
+
+                return .{ .entries = entries };
+            },
         };
     }
 
-    pub fn get_size(self: *URLSearchParams) u32 {
-        return @intCast(self.values.count());
+    pub fn init(arena: Allocator, qs_: ?[]const u8) !URLSearchParams {
+        return .{
+            .entries = if (qs_) |qs| try parseQuery(arena, qs) else .{},
+        };
     }
 
-    pub fn _append(self: *URLSearchParams, name: []const u8, value: []const u8) !void {
-        try self.values.append(name, value);
+    pub fn get_size(self: *const URLSearchParams) u32 {
+        return @intCast(self.entries.count());
     }
 
-    pub fn _delete(self: *URLSearchParams, name: []const u8, value: ?[]const u8) !void {
-        if (value) |v| return self.values.deleteValue(name, v);
-
-        self.values.delete(name);
+    pub fn _append(self: *URLSearchParams, name: []const u8, value: []const u8, page: *Page) !void {
+        return self.entries.append(page.arena, name, value);
     }
 
-    pub fn _get(self: *URLSearchParams, name: []const u8) ?[]const u8 {
-        return self.values.first(name);
+    pub fn _set(self: *URLSearchParams, name: []const u8, value: []const u8, page: *Page) !void {
+        return self.entries.set(page.arena, name, value);
     }
 
-    // TODO return generates an error: caught unexpected error 'TypeLookup'
-    // pub fn _getAll(self: *URLSearchParams, name: []const u8) [][]const u8 {
-    //     try self.values.get(name);
-    // }
+    pub fn _delete(self: *URLSearchParams, name: []const u8, value_: ?[]const u8) void {
+        if (value_) |value| {
+            return self.entries.deleteKeyValue(name, value);
+        }
+        return self.entries.delete(name);
+    }
+
+    pub fn _get(self: *const URLSearchParams, name: []const u8) ?[]const u8 {
+        return self.entries.get(name);
+    }
+
+    pub fn _getAll(self: *const URLSearchParams, name: []const u8, page: *Page) ![]const []const u8 {
+        return self.entries.getAll(page.call_arena, name);
+    }
+
+    pub fn _has(self: *const URLSearchParams, name: []const u8) bool {
+        return self.entries.has(name);
+    }
+
+    pub fn _keys(self: *const URLSearchParams) KeyIterable {
+        return .{ .inner = self.entries.keyIterator() };
+    }
+
+    pub fn _values(self: *const URLSearchParams) ValueIterable {
+        return .{ .inner = self.entries.valueIterator() };
+    }
+
+    pub fn _entries(self: *const URLSearchParams) EntryIterable {
+        return .{ .inner = self.entries.entryIterator() };
+    }
+
+    pub fn _symbol_iterator(self: *const URLSearchParams) EntryIterable {
+        return self._entries();
+    }
+
+    pub fn _toString(self: *const URLSearchParams, page: *Page) ![]const u8 {
+        var arr: std.ArrayListUnmanaged(u8) = .empty;
+        try self.write(arr.writer(page.call_arena));
+        return arr.items;
+    }
+
+    fn write(self: *const URLSearchParams, writer: anytype) !void {
+        return kv.urlEncode(self.entries, .query, writer);
+    }
 
     // TODO
     pub fn _sort(_: *URLSearchParams) void {}
+
+    fn encode(self: *const URLSearchParams, writer: anytype) !void {
+        return kv.urlEncode(self.entries, .query, writer);
+    }
 };
 
+// Parse the given query.
+fn parseQuery(arena: Allocator, s: []const u8) !kv.List {
+    var list = kv.List{};
+
+    const ln = s.len;
+    if (ln == 0) {
+        return list;
+    }
+
+    var query = if (s[0] == '?') s[1..] else s;
+    while (query.len > 0) {
+        const i = std.mem.indexOfScalarPos(u8, query, 0, '=') orelse query.len;
+        const name = query[0..i];
+
+        var value: ?[]const u8 = null;
+        if (i < query.len) {
+            query = query[i + 1 ..];
+            const j = std.mem.indexOfScalarPos(u8, query, 0, '&') orelse query.len;
+            value = query[0..j];
+
+            query = if (j < query.len) query[j + 1 ..] else "";
+        } else {
+            query = "";
+        }
+
+        try list.appendOwned(
+            arena,
+            try unescape(arena, name),
+            if (value) |v| try unescape(arena, v) else "",
+        );
+    }
+
+    return list;
+}
+
+fn unescape(arena: Allocator, input: []const u8) ![]const u8 {
+    const HEX_CHAR = comptime blk: {
+        var all = std.mem.zeroes([256]bool);
+        for ('a'..('f' + 1)) |b| all[b] = true;
+        for ('A'..('F' + 1)) |b| all[b] = true;
+        for ('0'..('9' + 1)) |b| all[b] = true;
+        break :blk all;
+    };
+
+    const HEX_DECODE = comptime blk: {
+        var all = std.mem.zeroes([256]u8);
+        for ('a'..('z' + 1)) |b| all[b] = b - 'a' + 10;
+        for ('A'..('Z' + 1)) |b| all[b] = b - 'A' + 10;
+        for ('0'..('9' + 1)) |b| all[b] = b - '0';
+        break :blk all;
+    };
+
+    var has_plus = false;
+    var unescaped_len = input.len;
+
+    {
+        // Figure out if we have any spaces and what the final unescaped length
+        // will be (which will let us know if we have anything to unescape in
+        // the first place)
+        var i: usize = 0;
+        while (i < input.len) {
+            const c = input[i];
+            if (c == '%') {
+                if (i + 2 >= input.len or !HEX_CHAR[input[i + 1]] or !HEX_CHAR[input[i + 2]]) {
+                    return error.EscapeError;
+                }
+                i += 3;
+                unescaped_len -= 2;
+            } else if (c == '+') {
+                has_plus = true;
+                i += 1;
+            } else {
+                i += 1;
+            }
+        }
+    }
+
+    // no encoding, and no plus. nothing to unescape
+    if (unescaped_len == input.len and has_plus == false) {
+        // we always dupe, because we know our caller wants it always duped.
+        return arena.dupe(u8, input);
+    }
+
+    var unescaped = try arena.alloc(u8, unescaped_len);
+    errdefer arena.free(unescaped);
+
+    var input_pos: usize = 0;
+    for (0..unescaped_len) |unescaped_pos| {
+        switch (input[input_pos]) {
+            '+' => {
+                unescaped[unescaped_pos] = ' ';
+                input_pos += 1;
+            },
+            '%' => {
+                const encoded = input[input_pos + 1 .. input_pos + 3];
+                const encoded_as_uint = @as(u16, @bitCast(encoded[0..2].*));
+                unescaped[unescaped_pos] = switch (encoded_as_uint) {
+                    asUint(u16, "20") => ' ',
+                    asUint(u16, "21") => '!',
+                    asUint(u16, "22") => '"',
+                    asUint(u16, "23") => '#',
+                    asUint(u16, "24") => '$',
+                    asUint(u16, "25") => '%',
+                    asUint(u16, "26") => '&',
+                    asUint(u16, "27") => '\'',
+                    asUint(u16, "28") => '(',
+                    asUint(u16, "29") => ')',
+                    asUint(u16, "2A") => '*',
+                    asUint(u16, "2B") => '+',
+                    asUint(u16, "2C") => ',',
+                    asUint(u16, "2F") => '/',
+                    asUint(u16, "3A") => ':',
+                    asUint(u16, "3B") => ';',
+                    asUint(u16, "3D") => '=',
+                    asUint(u16, "3F") => '?',
+                    asUint(u16, "40") => '@',
+                    asUint(u16, "5B") => '[',
+                    asUint(u16, "5D") => ']',
+                    else => HEX_DECODE[encoded[0]] << 4 | HEX_DECODE[encoded[1]],
+                };
+                input_pos += 3;
+            },
+            else => |c| {
+                unescaped[unescaped_pos] = c;
+                input_pos += 1;
+            },
+        }
+    }
+    return unescaped;
+}
+
+fn asUint(comptime T: type, comptime string: []const u8) T {
+    return @bitCast(string[0..string.len].*);
+}
+
+const KeyIterable = iterator.Iterable(kv.KeyIterator, "URLSearchParamsKeyIterator");
+const ValueIterable = iterator.Iterable(kv.ValueIterator, "URLSearchParamsValueIterator");
+const EntryIterable = iterator.Iterable(kv.EntryIterator, "URLSearchParamsEntryIterator");
+
 const testing = @import("../../testing.zig");
 test "Browser.URL" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
@@ -256,6 +520,27 @@ test "Browser.URL" {
         .{ "url.search", "?query" },
         .{ "url.hash", "#fragment" },
         .{ "url.searchParams.get('query')", "" },
+
+        .{ "url.search = 'hello=world'", null },
+        .{ "url.searchParams.size", "1" },
+        .{ "url.searchParams.get('hello')", "world" },
+
+        .{ "url.search = '?over=9000'", null },
+        .{ "url.searchParams.size", "1" },
+        .{ "url.searchParams.get('over')", "9000" },
+
+        .{ "url.search = ''", null },
+        .{ "url.searchParams.size", "0" },
+
+        .{ " const url2 = new URL(url);", null },
+        .{ "url2.href", "https://foo.bar/path#fragment" },
+
+        .{ " try { new URL(document.createElement('a')); } catch (e) { e }", "TypeError: invalid argument" },
+
+        .{ " let a = document.createElement('a');", null },
+        .{ " a.href = 'https://www.lightpanda.io/over?9000=!!';", null },
+        .{ " const url3 = new URL(a);", null },
+        .{ "url3.href", "https://www.lightpanda.io/over?9000=%21%21" },
     }, .{});
 
     try runner.testCases(&.{
@@ -264,16 +549,116 @@ test "Browser.URL" {
         .{ "url.searchParams.get('b')", "~" },
         .{ "url.searchParams.append('c', 'foo')", "undefined" },
         .{ "url.searchParams.get('c')", "foo" },
+        .{ "url.searchParams.getAll('c').length", "1" },
+        .{ "url.searchParams.getAll('c')[0]", "foo" },
         .{ "url.searchParams.size", "3" },
 
         // search is dynamic
-        .{ "url.search", "?a=%7E&b=%7E&c=foo" },
+        .{ "url.search", "?a=~&b=~&c=foo" },
         // href is dynamic
-        .{ "url.href", "https://foo.bar/path?a=%7E&b=%7E&c=foo#fragment" },
+        .{ "url.href", "https://foo.bar/path?a=~&b=~&c=foo#fragment" },
 
         .{ "url.searchParams.delete('c', 'foo')", "undefined" },
-        .{ "url.searchParams.get('c')", "" },
+        .{ "url.searchParams.get('c')", "null" },
         .{ "url.searchParams.delete('a')", "undefined" },
-        .{ "url.searchParams.get('a')", "" },
+        .{ "url.searchParams.get('a')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var url = new URL('over?9000', 'https://lightpanda.io')", null },
+        .{ "url.href", "https://lightpanda.io/over?9000" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let sk = new URL('sveltekit-internal://')", null },
+        .{ "sk.protocol", "sveltekit-internal:" },
+        .{ "sk.host", "" },
+        .{ "sk.hostname", "" },
+        .{ "sk.href", "sveltekit-internal://" },
+    }, .{});
+}
+
+test "Browser.URLSearchParams" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+    try runner.testCases(&.{
+        .{ "let usp = new URLSearchParams()", null },
+        .{ "usp.get('a')", "null" },
+        .{ "usp.has('a')", "false" },
+        .{ "usp.getAll('a')", "" },
+        .{ "usp.delete('a')", "undefined" },
+
+        .{ "usp.set('a', 1)", "undefined" },
+        .{ "usp.has('a')", "true" },
+        .{ "usp.get('a')", "1" },
+        .{ "usp.getAll('a')", "1" },
+
+        .{ "usp.append('a', 2)", "undefined" },
+        .{ "usp.has('a')", "true" },
+        .{ "usp.get('a')", "1" },
+        .{ "usp.getAll('a')", "1,2" },
+
+        .{ "usp.append('b', '3')", "undefined" },
+        .{ "usp.has('a')", "true" },
+        .{ "usp.get('a')", "1" },
+        .{ "usp.getAll('a')", "1,2" },
+        .{ "usp.has('b')", "true" },
+        .{ "usp.get('b')", "3" },
+        .{ "usp.getAll('b')", "3" },
+
+        .{ "let acc = [];", null },
+        .{ "for (const key of usp.keys()) { acc.push(key) }; acc;", "a,a,b" },
+
+        .{ "acc = [];", null },
+        .{ "for (const value of usp.values()) { acc.push(value) }; acc;", "1,2,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of usp.entries()) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of usp) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
+
+        .{ "usp.delete('a')", "undefined" },
+        .{ "usp.has('a')", "false" },
+        .{ "usp.has('b')", "true" },
+
+        .{ "acc = [];", null },
+        .{ "for (const key of usp.keys()) { acc.push(key) }; acc;", "b" },
+
+        .{ "acc = [];", null },
+        .{ "for (const value of usp.values()) { acc.push(value) }; acc;", "3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of usp.entries()) { acc.push(entry) }; acc;", "b,3" },
+
+        .{ "acc = [];", null },
+        .{ "for (const entry of usp) { acc.push(entry) }; acc;", "b,3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "usp = new URLSearchParams('?hello')", null },
+        .{ "usp.get('hello')", "" },
+
+        .{ "usp = new URLSearchParams('?abc=')", null },
+        .{ "usp.get('abc')", "" },
+
+        .{ "usp = new URLSearchParams('?abc=123&')", null },
+        .{ "usp.get('abc')", "123" },
+        .{ "usp.size", "1" },
+
+        .{ "var fd = new FormData()", null },
+        .{ "fd.append('a', '1')", null },
+        .{ "fd.append('a', '2')", null },
+        .{ "fd.append('b', '3')", null },
+        .{ "ups = new URLSearchParams(fd)", null },
+        .{ "ups.size", "3" },
+        .{ "ups.getAll('a')", "1,2" },
+        .{ "ups.getAll('b')", "3" },
+        .{ "fd.delete('a')", null }, // the two aren't linked, it created a copy
+        .{ "ups.size", "3" },
+        .{ "ups = new URLSearchParams({over: 9000, spice: 'flow'})", null },
+        .{ "ups.size", "2" },
+        .{ "ups.getAll('over')", "9000" },
+        .{ "ups.getAll('spice')", "flow" },
     }, .{});
 }

src/browser/webcomponents/custom_element_registry.zig

@@ -0,0 +1,93 @@
+// 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/>.
+
+// Currently not used. Relying on polyfill instead
+
+const std = @import("std");
+const log = @import("../../log.zig");
+const v8 = @import("v8");
+
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+
+const Element = @import("../dom/element.zig").Element;
+
+pub const CustomElementRegistry = struct {
+    // tag_name -> Function
+    lookup: std.StringHashMapUnmanaged(Env.Function) = .empty,
+
+    pub fn _define(self: *CustomElementRegistry, tag_name: []const u8, fun: Env.Function, page: *Page) !void {
+        log.info(.browser, "define custom element", .{ .name = tag_name });
+
+        const arena = page.arena;
+        const gop = try self.lookup.getOrPut(arena, tag_name);
+        if (!gop.found_existing) {
+            errdefer _ = self.lookup.remove(tag_name);
+            const owned_tag_name = try arena.dupe(u8, tag_name);
+            gop.key_ptr.* = owned_tag_name;
+        }
+        gop.value_ptr.* = fun;
+        fun.setName(tag_name);
+    }
+
+    pub fn _get(self: *CustomElementRegistry, name: []const u8) ?Env.Function {
+        return self.lookup.get(name);
+    }
+};
+
+const testing = @import("../../testing.zig");
+
+test "Browser.CustomElementRegistry" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+    try runner.testCases(&.{
+        // Basic registry access
+        .{ "typeof customElements", "object" },
+        .{ "customElements instanceof CustomElementRegistry", "true" },
+
+        // Define a simple custom element
+        .{
+            \\ class MyElement extends HTMLElement {
+            \\   constructor() {
+            \\      super();
+            \\      this.textContent = 'Hello World';
+            \\   }
+            \\ }
+            ,
+            null,
+        },
+        .{ "customElements.define('my-element', MyElement)", "undefined" },
+
+        // Check if element is defined
+        .{ "customElements.get('my-element') === MyElement", "true" },
+        // .{ "customElements.get('non-existent')", "null" },
+
+        // Create element via document.createElement
+        .{ "let el = document.createElement('my-element')", "undefined" },
+        .{ "el instanceof MyElement", "true" },
+        .{ "el instanceof HTMLElement", "true" },
+        .{ "el.tagName", "MY-ELEMENT" },
+        .{ "el.textContent", "Hello World" },
+
+        // Create element via HTML parsing
+        // .{ "document.body.innerHTML = '<my-element></my-element>'", "undefined" },
+        // .{ "let parsed = document.querySelector('my-element')", "undefined" },
+        // .{ "parsed instanceof MyElement", "true" },
+        // .{ "parsed.textContent", "Hello World" },
+    }, .{});
+}

src/browser/xhr/event_target.zig

@@ -19,44 +19,44 @@
 const std = @import("std");
 
 const Env = @import("../env.zig").Env;
-const Callback = Env.Callback;
+const Function = Env.Function;
 
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventHandler = @import("../events/event.zig").EventHandler;
 
 const parser = @import("../netsurf.zig");
-const SessionState = @import("../env.zig").SessionState;
-
-const log = std.log.scoped(.xhr);
+const Page = @import("../page.zig").Page;
 
 pub const XMLHttpRequestEventTarget = struct {
     pub const prototype = *EventTarget;
 
     // Extend libdom event target for pure zig struct.
-    base: parser.EventTargetTBase = parser.EventTargetTBase{},
+    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .xhr },
 
-    onloadstart_cbk: ?Callback = null,
-    onprogress_cbk: ?Callback = null,
-    onabort_cbk: ?Callback = null,
-    onload_cbk: ?Callback = null,
-    ontimeout_cbk: ?Callback = null,
-    onloadend_cbk: ?Callback = null,
+    onloadstart_cbk: ?Function = null,
+    onprogress_cbk: ?Function = null,
+    onabort_cbk: ?Function = null,
+    onload_cbk: ?Function = null,
+    ontimeout_cbk: ?Function = null,
+    onloadend_cbk: ?Function = null,
+    onreadystatechange_cbk: ?Function = null,
 
     fn register(
         self: *XMLHttpRequestEventTarget,
         alloc: std.mem.Allocator,
         typ: []const u8,
-        cbk: Callback,
-    ) !void {
+        listener: EventHandler.Listener,
+    ) !?Function {
         const target = @as(*parser.EventTarget, @ptrCast(self));
-        const eh = try EventHandler.init(alloc, try cbk.withThis(target));
-        try parser.eventTargetAddEventListener(
-            target,
-            typ,
-            &eh.node,
-            false,
-        );
+
+        // The only time this can return null if the listener is already
+        // registered. But before calling `register`, all of our functions
+        // remove any existing listener, so it should be impossible to get null
+        // from this function call.
+        const eh = (try EventHandler.register(alloc, target, typ, listener, null)) orelse unreachable;
+        return eh.callback;
     }
+
     fn unregister(self: *XMLHttpRequestEventTarget, typ: []const u8, cbk_id: usize) !void {
         const et = @as(*parser.EventTarget, @ptrCast(self));
         // check if event target has already this listener
@@ -69,60 +69,54 @@ pub const XMLHttpRequestEventTarget = struct {
         try parser.eventTargetRemoveEventListener(et, typ, lst.?, false);
     }
 
-    pub fn get_onloadstart(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_onloadstart(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onloadstart_cbk;
     }
-    pub fn get_onprogress(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_onprogress(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onprogress_cbk;
     }
-    pub fn get_onabort(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_onabort(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onabort_cbk;
     }
-    pub fn get_onload(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_onload(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onload_cbk;
     }
-    pub fn get_ontimeout(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_ontimeout(self: *XMLHttpRequestEventTarget) ?Function {
         return self.ontimeout_cbk;
     }
-    pub fn get_onloadend(self: *XMLHttpRequestEventTarget) ?Callback {
+    pub fn get_onloadend(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onloadend_cbk;
     }
+    pub fn get_onreadystatechange(self: *XMLHttpRequestEventTarget) ?Function {
+        return self.onreadystatechange_cbk;
+    }
 
-    pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onloadstart_cbk) |cbk| try self.unregister("loadstart", cbk.id);
-        try self.register(state.arena, "loadstart", handler);
-        self.onloadstart_cbk = handler;
+        self.onloadstart_cbk = try self.register(page.arena, "loadstart", listener);
     }
-    pub fn set_onprogress(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_onprogress(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onprogress_cbk) |cbk| try self.unregister("progress", cbk.id);
-        try self.register(state.arena, "progress", handler);
-        self.onprogress_cbk = handler;
+        self.onprogress_cbk = try self.register(page.arena, "progress", listener);
     }
-    pub fn set_onabort(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_onabort(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onabort_cbk) |cbk| try self.unregister("abort", cbk.id);
-        try self.register(state.arena, "abort", handler);
-        self.onabort_cbk = handler;
+        self.onabort_cbk = try self.register(page.arena, "abort", listener);
     }
-    pub fn set_onload(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_onload(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onload_cbk) |cbk| try self.unregister("load", cbk.id);
-        try self.register(state.arena, "load", handler);
-        self.onload_cbk = handler;
+        self.onload_cbk = try self.register(page.arena, "load", listener);
     }
-    pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_ontimeout(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.ontimeout_cbk) |cbk| try self.unregister("timeout", cbk.id);
-        try self.register(state.arena, "timeout", handler);
-        self.ontimeout_cbk = handler;
+        self.ontimeout_cbk = try self.register(page.arena, "timeout", listener);
     }
-    pub fn set_onloadend(self: *XMLHttpRequestEventTarget, handler: Callback, state: *SessionState) !void {
+    pub fn set_onloadend(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onloadend_cbk) |cbk| try self.unregister("loadend", cbk.id);
-        try self.register(state.arena, "loadend", handler);
-        self.onloadend_cbk = handler;
+        self.onloadend_cbk = try self.register(page.arena, "loadend", listener);
     }
-
-    pub fn deinit(self: *XMLHttpRequestEventTarget, state: *SessionState) void {
-        const arena = state.arena;
-        parser.eventTargetRemoveAllEventListeners(@as(*parser.EventTarget, @ptrCast(self)), arena) catch |e| {
-            log.err("remove all listeners: {any}", .{e});
-        };
+    pub fn set_onreadystatechange(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
+        if (self.onreadystatechange_cbk) |cbk| try self.unregister("readystatechange", cbk.id);
+        self.onreadystatechange_cbk = try self.register(page.arena, "readystatechange", listener);
     }
 };

src/browser/xhr/form_data.zig

@@ -20,8 +20,11 @@ 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 kv = @import("../key_value.zig");
 const iterator = @import("../iterator/iterator.zig");
-const SessionState = @import("../env.zig").SessionState;
 
 pub const Interfaces = .{
     FormData,
@@ -30,165 +33,276 @@ pub const Interfaces = .{
     EntryIterable,
 };
 
-// We store the values in an ArrayList rather than a an
-// StringArrayHashMap([]const u8)  because of the way the iterators (i.e., keys(),
-// values() and entries()) work. The FormData can contain duplicate keys, and
-// each iteration yields 1 key=>value pair. So, given:
-//
-//  let f = new FormData();
-//  f.append('a', '1');
-//  f.append('a', '2');
-//
-// Then we'd expect f.keys(), f.values() and f.entries() to yield 2 results:
-//  ['a', '1']
-//  ['a', '2']
-//
-// This is much easier to do with an ArrayList than a HashMap, especially given
-// that the FormData could be mutated while iterating.
-// The downside is that most of the normal operations are O(N).
-
 // https://xhr.spec.whatwg.org/#interface-formdata
 pub const FormData = struct {
-    entries: std.ArrayListUnmanaged(Entry),
+    entries: kv.List,
 
-    pub fn constructor() FormData {
-        return .{
-            .entries = .empty,
-        };
+    pub fn constructor(form_: ?*parser.Form, submitter_: ?*parser.ElementHTML, page: *Page) !FormData {
+        const form = form_ orelse return .{ .entries = .{} };
+        return fromForm(form, submitter_, page);
+    }
+
+    pub fn fromForm(form: *parser.Form, submitter_: ?*parser.ElementHTML, page: *Page) !FormData {
+        const entries = try collectForm(form, submitter_, page);
+        return .{ .entries = entries };
     }
 
     pub fn _get(self: *const FormData, key: []const u8) ?[]const u8 {
-        const result = self.find(key) orelse return null;
-        return result.entry.value;
+        return self.entries.get(key);
     }
 
-    pub fn _getAll(self: *const FormData, key: []const u8, state: *SessionState) ![][]const u8 {
-        const arena = state.call_arena;
-        var arr: std.ArrayListUnmanaged([]const u8) = .empty;
-        for (self.entries.items) |entry| {
-            if (std.mem.eql(u8, key, entry.key)) {
-                try arr.append(arena, entry.value);
-            }
-        }
-        return arr.items;
+    pub fn _getAll(self: *const FormData, key: []const u8, page: *Page) ![]const []const u8 {
+        return self.entries.getAll(page.call_arena, key);
     }
 
     pub fn _has(self: *const FormData, key: []const u8) bool {
-        return self.find(key) != null;
+        return self.entries.has(key);
     }
 
     // TODO: value should be a string or blog
     // TODO: another optional parameter for the filename
-    pub fn _set(self: *FormData, key: []const u8, value: []const u8, state: *SessionState) !void {
-        self._delete(key);
-        return self._append(key, value, state);
+    pub fn _set(self: *FormData, key: []const u8, value: []const u8, page: *Page) !void {
+        return self.entries.set(page.arena, key, value);
     }
 
     // TODO: value should be a string or blog
     // TODO: another optional parameter for the filename
-    pub fn _append(self: *FormData, key: []const u8, value: []const u8, state: *SessionState) !void {
-        const arena = state.arena;
-        return self.entries.append(arena, .{ .key = try arena.dupe(u8, key), .value = try arena.dupe(u8, value) });
+    pub fn _append(self: *FormData, key: []const u8, value: []const u8, page: *Page) !void {
+        return self.entries.append(page.arena, key, value);
     }
 
     pub fn _delete(self: *FormData, key: []const u8) void {
-        var i: usize = 0;
-        while (i < self.entries.items.len) {
-            const entry = self.entries.items[i];
-            if (std.mem.eql(u8, key, entry.key)) {
-                _ = self.entries.swapRemove(i);
-            } else {
-                i += 1;
-            }
-        }
+        return self.entries.delete(key);
     }
 
     pub fn _keys(self: *const FormData) KeyIterable {
-        return .{ .inner = .{ .entries = &self.entries } };
+        return .{ .inner = self.entries.keyIterator() };
     }
 
     pub fn _values(self: *const FormData) ValueIterable {
-        return .{ .inner = .{ .entries = &self.entries } };
+        return .{ .inner = self.entries.valueIterator() };
     }
 
     pub fn _entries(self: *const FormData) EntryIterable {
-        return .{ .inner = .{ .entries = &self.entries } };
+        return .{ .inner = self.entries.entryIterator() };
     }
 
     pub fn _symbol_iterator(self: *const FormData) EntryIterable {
         return self._entries();
     }
 
-    const FindResult = struct {
-        index: usize,
-        entry: Entry,
-    };
+    pub fn write(self: *const FormData, encoding_: ?[]const u8, writer: anytype) !void {
+        const encoding = encoding_ orelse {
+            return kv.urlEncode(self.entries, .form, writer);
+        };
 
-    fn find(self: *const FormData, key: []const u8) ?FindResult {
-        for (self.entries.items, 0..) |entry, i| {
-            if (std.mem.eql(u8, key, entry.key)) {
-                return .{ .index = i, .entry = entry };
+        if (std.ascii.eqlIgnoreCase(encoding, "application/x-www-form-urlencoded")) {
+            return kv.urlEncode(self.entries, .form, writer);
+        }
+
+        log.warn(.web_api, "not implemented", .{
+            .feature = "form data encoding",
+            .encoding = encoding,
+        });
+        return error.EncodingNotSupported;
+    }
+};
+
+const KeyIterable = iterator.Iterable(kv.KeyIterator, "FormDataKeyIterator");
+const ValueIterable = iterator.Iterable(kv.ValueIterator, "FormDataValueIterator");
+const EntryIterable = iterator.Iterable(kv.EntryIterator, "FormDataEntryIterator");
+
+// TODO: handle disabled fieldsets
+fn collectForm(form: *parser.Form, submitter_: ?*parser.ElementHTML, page: *Page) !kv.List {
+    const arena = page.arena;
+
+    // Don't use libdom's formGetCollection (aka dom_html_form_element_get_elements)
+    // It doesn't work with dynamically added elements, because their form
+    // property doesn't get set. We should fix that.
+    // However, even once fixed, there are other form-collection features we
+    // probably want to implement (like disabled fieldsets), so we might want
+    // to stick with our own walker even if fix libdom to properly support
+    // dynamically added elements.
+    const node_list = try @import("../dom/css.zig").querySelectorAll(arena, @alignCast(@ptrCast(form)), "input,select,button,textarea");
+    const nodes = node_list.nodes.items;
+
+    var entries: kv.List = .{};
+    try entries.ensureTotalCapacity(arena, nodes.len);
+
+    var submitter_included = false;
+    const submitter_name_ = try getSubmitterName(submitter_);
+
+    for (nodes) |node| {
+        const element = parser.nodeToElement(node);
+
+        // must have a name
+        const name = try parser.elementGetAttribute(element, "name") orelse continue;
+        if (try parser.elementGetAttribute(element, "disabled") != null) {
+            continue;
+        }
+
+        const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(element)));
+        switch (tag) {
+            .input => {
+                const tpe = try parser.inputGetType(@ptrCast(element));
+                if (std.ascii.eqlIgnoreCase(tpe, "image")) {
+                    if (submitter_name_) |submitter_name| {
+                        if (std.mem.eql(u8, submitter_name, name)) {
+                            const key_x = try std.fmt.allocPrint(arena, "{s}.x", .{name});
+                            const key_y = try std.fmt.allocPrint(arena, "{s}.y", .{name});
+                            try entries.appendOwned(arena, key_x, "0");
+                            try entries.appendOwned(arena, key_y, "0");
+                            submitter_included = true;
+                        }
+                    }
+                    continue;
+                }
+
+                if (std.ascii.eqlIgnoreCase(tpe, "checkbox") or std.ascii.eqlIgnoreCase(tpe, "radio")) {
+                    if (try parser.inputGetChecked(@ptrCast(element)) == false) {
+                        continue;
+                    }
+                }
+                if (std.ascii.eqlIgnoreCase(tpe, "submit")) {
+                    if (submitter_name_ == null or !std.mem.eql(u8, submitter_name_.?, name)) {
+                        continue;
+                    }
+                    submitter_included = true;
+                }
+                const value = try parser.inputGetValue(@ptrCast(element));
+                try entries.appendOwned(arena, name, value);
+            },
+            .select => {
+                const select: *parser.Select = @ptrCast(node);
+                try collectSelectValues(arena, select, name, &entries, page);
+            },
+            .textarea => {
+                const textarea: *parser.TextArea = @ptrCast(node);
+                const value = try parser.textareaGetValue(textarea);
+                try entries.appendOwned(arena, name, value);
+            },
+            .button => if (submitter_name_) |submitter_name| {
+                if (std.mem.eql(u8, submitter_name, name)) {
+                    const value = (try parser.elementGetAttribute(element, "value")) orelse "";
+                    try entries.appendOwned(arena, name, value);
+                    submitter_included = true;
+                }
+            },
+            else => unreachable,
+        }
+    }
+
+    if (submitter_included == false) {
+        if (submitter_name_) |submitter_name| {
+            // this can happen if the submitter is outside the form, but associated
+            // with the form via a form=ID attribute
+            const value = (try parser.elementGetAttribute(@ptrCast(submitter_.?), "value")) orelse "";
+            try entries.appendOwned(arena, submitter_name, value);
+        }
+    }
+
+    return entries;
+}
+
+fn collectSelectValues(arena: Allocator, select: *parser.Select, name: []const u8, entries: *kv.List, page: *Page) !void {
+    const HTMLSelectElement = @import("../html/select.zig").HTMLSelectElement;
+
+    // Go through the HTMLSelectElement because it has specific logic for handling
+    // the default selected option, which libdom doesn't properly handle
+    const selected_index = try HTMLSelectElement.get_selectedIndex(select, page);
+    if (selected_index == -1) {
+        return;
+    }
+    std.debug.assert(selected_index >= 0);
+
+    const options = try parser.selectGetOptions(select);
+    const is_multiple = try parser.selectGetMultiple(select);
+    if (is_multiple == false) {
+        const option = try parser.optionCollectionItem(options, @intCast(selected_index));
+
+        if (try parser.elementGetAttribute(@alignCast(@ptrCast(option)), "disabled") != null) {
+            return;
+        }
+        const value = try parser.optionGetValue(option);
+        return entries.appendOwned(arena, name, value);
+    }
+
+    const len = try parser.optionCollectionGetLength(options);
+
+    // we can go directly to the first one
+    for (@intCast(selected_index)..len) |i| {
+        const option = try parser.optionCollectionItem(options, @intCast(i));
+        if (try parser.elementGetAttribute(@alignCast(@ptrCast(option)), "disabled") != null) {
+            continue;
+        }
+
+        if (try parser.optionGetSelected(option)) {
+            const value = try parser.optionGetValue(option);
+            try entries.appendOwned(arena, name, value);
+        }
+    }
+}
+
+fn getSubmitterName(submitter_: ?*parser.ElementHTML) !?[]const u8 {
+    const submitter = submitter_ orelse return null;
+
+    const tag = try parser.elementHTMLGetTagType(submitter);
+    const element: *parser.Element = @ptrCast(submitter);
+    const name = try parser.elementGetAttribute(element, "name");
+
+    switch (tag) {
+        .button => return name,
+        .input => {
+            const tpe = try parser.inputGetType(@ptrCast(element));
+            // only an image type can be a sumbitter
+            if (std.ascii.eqlIgnoreCase(tpe, "image") or std.ascii.eqlIgnoreCase(tpe, "submit")) {
+                return name;
             }
-        }
-        return null;
+        },
+        else => {},
     }
-};
-
-const Entry = struct {
-    key: []const u8,
-    value: []const u8,
-};
-
-const KeyIterable = iterator.Iterable(KeyIterator, "FormDataKeyIterator");
-const ValueIterable = iterator.Iterable(ValueIterator, "FormDataValueIterator");
-const EntryIterable = iterator.Iterable(EntryIterator, "FormDataEntryIterator");
-
-const KeyIterator = struct {
-    index: usize = 0,
-    entries: *const std.ArrayListUnmanaged(Entry),
-
-    pub fn _next(self: *KeyIterator) ?[]const u8 {
-        const index = self.index;
-        if (index == self.entries.items.len) {
-            return null;
-        }
-        self.index += 1;
-        return self.entries.items[index].key;
-    }
-};
-
-const ValueIterator = struct {
-    index: usize = 0,
-    entries: *const std.ArrayListUnmanaged(Entry),
-
-    pub fn _next(self: *ValueIterator) ?[]const u8 {
-        const index = self.index;
-        if (index == self.entries.items.len) {
-            return null;
-        }
-        self.index += 1;
-        return self.entries.items[index].value;
-    }
-};
-
-const EntryIterator = struct {
-    index: usize = 0,
-    entries: *const std.ArrayListUnmanaged(Entry),
-
-    pub fn _next(self: *EntryIterator) ?struct { []const u8, []const u8 } {
-        const index = self.index;
-        if (index == self.entries.items.len) {
-            return null;
-        }
-        self.index += 1;
-        const entry = self.entries.items[index];
-        return .{ entry.key, entry.value };
-    }
-};
+    return error.InvalidArgument;
+}
 
 const testing = @import("../../testing.zig");
-test "FormData" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+test "Browser.FormData" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
+        \\ <form id="form1">
+        \\   <input id="has_no_name" value="nope1">
+        \\   <input id="is_disabled" disabled value="nope2">
+        \\
+        \\   <input name="txt-1" value="txt-1-v">
+        \\   <input name="txt-2" value="txt-~-v" type=password>
+        \\
+        \\   <input name="chk-3" value="chk-3-va" type=checkbox>
+        \\   <input name="chk-3" value="chk-3-vb" type=checkbox checked>
+        \\   <input name="chk-3" value="chk-3-vc" type=checkbox checked>
+        \\   <input name="chk-4" value="chk-4-va" type=checkbox>
+        \\   <input name="chk-4" value="chk-4-va" type=checkbox>
+        \\
+        \\   <input name="rdi-1" value="rdi-1-va" type=radio>
+        \\   <input name="rdi-1" value="rdi-1-vb" type=radio>
+        \\   <input name="rdi-1" value="rdi-1-vc" type=radio checked>
+        \\   <input name="rdi-2" value="rdi-2-va" type=radio>
+        \\   <input name="rdi-2" value="rdi-2-vb" type=radio>
+        \\
+        \\   <textarea name="ta-1"> ta-1-v</textarea>
+        \\   <textarea name="ta"></textarea>
+        \\
+        \\   <input type=hidden name=h1 value="h1-v">
+        \\   <input type=hidden name=h2 value="h2-v" disabled=disabled>
+        \\
+        \\   <select name="sel-1"><option>blue<option>red</select>
+        \\   <select name="sel-2"><option>blue<option value=sel-2-v selected>red</select>
+        \\   <select name="sel-3"><option disabled>nope1<option>nope2</select>
+        \\   <select name="mlt-1" multiple><option>water<option>tea</select>
+        \\   <select name="mlt-2" multiple><option selected>water<option selected>tea<option>coffee</select>
+        \\   <input type=submit id=s1 name=s1 value=s1-v>
+        \\   <input type=submit name=s2 value=s2-v>
+        \\   <input type=image name=i1 value=i1-v>
+        \\ </form>
+        \\   <input type=text name=abc value=123 form=form1>
+    });
     defer runner.deinit();
 
     try runner.testCases(&.{
@@ -244,4 +358,65 @@ test "FormData" {
         .{ "acc = [];", null },
         .{ "for (const entry of f) { acc.push(entry) }; acc;", "b,3" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let form1 = document.getElementById('form1')", null },
+        .{ "let input = document.createElement('input');", null },
+        .{ "input.name = 'dyn'; input.value= 'dyn-v'; form1.appendChild(input);", null },
+        .{ "let submit1 = document.getElementById('s1')", null },
+        .{ "let f2 = new FormData(form1, submit1)", null },
+        .{ "acc = '';", null },
+        .{
+            \\ for (const entry of f2) {
+            \\   acc += entry[0] + '=' + entry[1] + '\n';
+            \\ };
+            \\ acc.slice(0, -1)
+            ,
+            \\txt-1=txt-1-v
+            \\txt-2=txt-~-v
+            \\chk-3=chk-3-vb
+            \\chk-3=chk-3-vc
+            \\rdi-1=rdi-1-vc
+            \\ta-1= ta-1-v
+            \\ta=
+            \\h1=h1-v
+            \\sel-1=blue
+            \\sel-2=sel-2-v
+            \\mlt-2=water
+            \\mlt-2=tea
+            \\s1=s1-v
+            \\dyn=dyn-v
+        },
+    }, .{});
+}
+
+test "Browser.FormData: urlEncode" {
+    var arr: std.ArrayListUnmanaged(u8) = .empty;
+    defer arr.deinit(testing.allocator);
+
+    {
+        var fd = FormData{ .entries = .{} };
+        try testing.expectError(error.EncodingNotSupported, fd.write("unknown", arr.writer(testing.allocator)));
+
+        try fd.write(null, arr.writer(testing.allocator));
+        try testing.expectEqual("", arr.items);
+
+        try fd.write("application/x-www-form-urlencoded", arr.writer(testing.allocator));
+        try testing.expectEqual("", arr.items);
+    }
+
+    {
+        var fd = FormData{ .entries = kv.List.fromOwnedSlice(@constCast(&[_]kv.KeyValue{
+            .{ .key = "a", .value = "1" },
+            .{ .key = "it's over", .value = "9000 !!!" },
+            .{ .key = "em~ot", .value = "ok: ☺" },
+        })) };
+        const expected = "a=1&it%27s+over=9000+%21%21%21&em%7Eot=ok%3A+%E2%98%BA";
+        try fd.write(null, arr.writer(testing.allocator));
+        try testing.expectEqual(expected, arr.items);
+
+        arr.clearRetainingCapacity();
+        try fd.write("application/x-www-form-urlencoded", arr.writer(testing.allocator));
+        try testing.expectEqual(expected, arr.items);
+    }
 }

src/browser/xhr/progress_event.zig

@@ -24,6 +24,7 @@ const DOMException = @import("../dom/exceptions.zig").DOMException;
 pub const ProgressEvent = struct {
     pub const prototype = *Event;
     pub const Exception = DOMException;
+    pub const union_make_copy = true;
 
     pub const EventInit = struct {
         lengthComputable: bool = false,
@@ -36,10 +37,10 @@ pub const ProgressEvent = struct {
     loaded: u64 = 0,
     total: u64 = 0,
 
-    pub fn constructor(eventType: []const u8, opts: ?EventInit) !ProgressEvent {
+    pub fn constructor(event_type: []const u8, opts: ?EventInit) !ProgressEvent {
         const event = try parser.eventCreate();
         defer parser.eventDestroy(event);
-        try parser.eventInit(event, eventType, .{});
+        try parser.eventInit(event, event_type, .{});
         try parser.eventSetInternalType(event, .progress_event);
 
         const o = opts orelse EventInit{};

src/browser/xhr/xhr.zig

@@ -24,15 +24,15 @@ const DOMError = @import("../netsurf.zig").DOMError;
 const ProgressEvent = @import("progress_event.zig").ProgressEvent;
 const XMLHttpRequestEventTarget = @import("event_target.zig").XMLHttpRequestEventTarget;
 
+const log = @import("../../log.zig");
 const URL = @import("../../url.zig").URL;
 const Mime = @import("../mime.zig").Mime;
 const parser = @import("../netsurf.zig");
 const http = @import("../../http/client.zig");
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
 const CookieJar = @import("../storage/storage.zig").CookieJar;
 
-const log = std.log.scoped(.xhr);
-
 // XHR interfaces
 // https://xhr.spec.whatwg.org/#interface-xmlhttprequest
 pub const Interfaces = .{
@@ -79,11 +79,9 @@ const XMLHttpRequestBodyInit = union(enum) {
 
 pub const XMLHttpRequest = struct {
     proto: XMLHttpRequestEventTarget = XMLHttpRequestEventTarget{},
+    loop: *Loop,
     arena: Allocator,
-    client: *http.Client,
-    request: ?http.Request = null,
-
-    priv_state: PrivState = .new,
+    request: ?*http.Request = null,
 
     method: http.Request.Method,
     state: State,
@@ -95,6 +93,7 @@ pub const XMLHttpRequest = struct {
     sync: bool = true,
     err: ?anyerror = null,
     last_dispatch: i64 = 0,
+    request_body: ?[]const u8 = null,
 
     cookie_jar: *CookieJar,
     // the URI of the page where this request is originating from
@@ -139,6 +138,13 @@ pub const XMLHttpRequest = struct {
         done = 4,
     };
 
+    // class attributes
+    pub const _UNSENT = @intFromEnum(State.unsent);
+    pub const _OPENED = @intFromEnum(State.opened);
+    pub const _HEADERS_RECEIVED = @intFromEnum(State.headers_received);
+    pub const _LOADING = @intFromEnum(State.loading);
+    pub const _DONE = @intFromEnum(State.done);
+
     // https://xhr.spec.whatwg.org/#response-type
     const ResponseType = enum {
         Empty,
@@ -242,21 +248,28 @@ pub const XMLHttpRequest = struct {
 
     const min_delay: u64 = 50000000; // 50ms
 
-    pub fn constructor(session_state: *SessionState) !XMLHttpRequest {
-        const arena = session_state.arena;
+    pub fn constructor(page: *Page) !XMLHttpRequest {
+        const arena = page.arena;
         return .{
+            .url = null,
             .arena = arena,
+            .loop = page.loop,
             .headers = Headers.init(arena),
             .response_headers = Headers.init(arena),
             .method = undefined,
             .state = .unsent,
-            .url = null,
-            .origin_url = session_state.url,
-            .client = session_state.http_client,
-            .cookie_jar = session_state.cookie_jar,
+            .origin_url = &page.url,
+            .cookie_jar = page.cookie_jar,
         };
     }
 
+    pub fn destructor(self: *XMLHttpRequest) void {
+        if (self.request) |req| {
+            req.abort();
+            self.request = null;
+        }
+    }
+
     pub fn reset(self: *XMLHttpRequest) void {
         self.url = null;
 
@@ -274,15 +287,6 @@ pub const XMLHttpRequest = struct {
         self.response_status = 0;
 
         self.send_flag = false;
-
-        self.priv_state = .new;
-    }
-
-    pub fn deinit(self: *XMLHttpRequest, alloc: Allocator) void {
-        if (self.response_obj) |v| {
-            v.deinit();
-        }
-        self.proto.deinit(alloc);
     }
 
     pub fn get_readyState(self: *XMLHttpRequest) u16 {
@@ -332,8 +336,6 @@ pub const XMLHttpRequest = struct {
         const arena = self.arena;
 
         self.url = try self.origin_url.resolve(arena, url);
-
-        log.debug("open url ({s})", .{self.url.?});
         self.sync = if (asyn) |b| !b else false;
 
         self.state = .opened;
@@ -343,19 +345,32 @@ pub const XMLHttpRequest = struct {
     // dispatch request event.
     // errors are logged only.
     fn dispatchEvt(self: *XMLHttpRequest, typ: []const u8) void {
-        const evt = parser.eventCreate() catch |e| {
-            return log.err("dispatch event create: {any}", .{e});
+        log.debug(.script_event, "dispatch event", .{
+            .type = typ,
+            .source = "xhr",
+            .method = self.method,
+            .url = self.url,
+        });
+        self._dispatchEvt(typ) catch |err| {
+            log.err(.app, "dispatch event error", .{
+                .err = err,
+                .type = typ,
+                .source = "xhr",
+                .method = self.method,
+                .url = self.url,
+            });
         };
+    }
 
+    fn _dispatchEvt(self: *XMLHttpRequest, typ: []const u8) !void {
+        const evt = try parser.eventCreate();
         // We can we defer event destroy once the event is dispatched.
         defer parser.eventDestroy(evt);
 
-        parser.eventInit(evt, typ, .{ .bubbles = true, .cancelable = true }) catch |e| {
-            return log.err("dispatch event init: {any}", .{e});
-        };
-        _ = parser.eventTargetDispatchEvent(@as(*parser.EventTarget, @ptrCast(self)), evt) catch |e| {
-            return log.err("dispatch event: {any}", .{e});
-        };
+        try parser.eventSetInternalType(evt, .xhr_event);
+
+        try parser.eventInit(evt, typ, .{ .bubbles = true, .cancelable = true });
+        _ = try parser.eventTargetDispatchEvent(@as(*parser.EventTarget, @ptrCast(self)), evt);
     }
 
     fn dispatchProgressEvent(
@@ -363,22 +378,39 @@ pub const XMLHttpRequest = struct {
         typ: []const u8,
         opts: ProgressEvent.EventInit,
     ) void {
-        log.debug("dispatch progress event: {s}", .{typ});
-        var evt = ProgressEvent.constructor(typ, .{
+        log.debug(.script_event, "dispatch progress event", .{
+            .type = typ,
+            .source = "xhr",
+            .method = self.method,
+            .url = self.url,
+        });
+        self._dispatchProgressEvent(typ, opts) catch |err| {
+            log.err(.app, "dispatch progress event error", .{
+                .err = err,
+                .type = typ,
+                .source = "xhr",
+                .method = self.method,
+                .url = self.url,
+            });
+        };
+    }
+
+    fn _dispatchProgressEvent(
+        self: *XMLHttpRequest,
+        typ: []const u8,
+        opts: ProgressEvent.EventInit,
+    ) !void {
+        var evt = try ProgressEvent.constructor(typ, .{
             // https://xhr.spec.whatwg.org/#firing-events-using-the-progressevent-interface
             .lengthComputable = opts.total > 0,
             .total = opts.total,
             .loaded = opts.loaded,
-        }) catch |e| {
-            return log.err("construct progress event: {any}", .{e});
-        };
+        });
 
-        _ = parser.eventTargetDispatchEvent(
+        _ = try parser.eventTargetDispatchEvent(
             @as(*parser.EventTarget, @ptrCast(self)),
             @as(*parser.Event, @ptrCast(&evt)),
-        ) catch |e| {
-            return log.err("dispatch progress event: {any}", .{e});
-        };
+        );
     }
 
     const methods = [_]struct {
@@ -418,18 +450,29 @@ pub const XMLHttpRequest = struct {
     }
 
     // TODO body can be either a XMLHttpRequestBodyInit or a document
-    pub fn _send(self: *XMLHttpRequest, body: ?[]const u8, session_state: *SessionState) !void {
+    pub fn _send(self: *XMLHttpRequest, body: ?[]const u8, page: *Page) !void {
         if (self.state != .opened) return DOMError.InvalidState;
         if (self.send_flag) return DOMError.InvalidState;
 
-        log.debug("{any} {any}", .{ self.method, self.url });
+        log.debug(.http, "request", .{ .method = self.method, .url = self.url, .source = "xhr" });
 
         self.send_flag = true;
-        self.priv_state = .open;
+        if (body) |b| {
+            self.request_body = try self.arena.dupe(u8, b);
+        }
 
-        self.request = try self.client.request(self.method, &self.url.?.uri);
-        var request = &self.request.?;
-        errdefer request.deinit();
+        try page.request_factory.initAsync(
+            page.arena,
+            self.method,
+            &self.url.?.uri,
+            self,
+            onHttpRequestReady,
+        );
+    }
+
+    fn onHttpRequestReady(ctx: *anyopaque, request: *http.Request) !void {
+        // on error, our caller will cleanup request
+        const self: *XMLHttpRequest = @alignCast(@ptrCast(ctx));
 
         for (self.headers.list.items) |hdr| {
             try request.addHeader(hdr.name, hdr.value, .{});
@@ -437,9 +480,10 @@ pub const XMLHttpRequest = struct {
 
         {
             var arr: std.ArrayListUnmanaged(u8) = .{};
-            try self.cookie_jar.forRequest(&self.url.?.uri, arr.writer(session_state.arena), .{
+            try self.cookie_jar.forRequest(&self.url.?.uri, arr.writer(self.arena), .{
                 .navigation = false,
                 .origin_uri = &self.origin_url.uri,
+                .is_http = true,
             });
 
             if (arr.items.len > 0) {
@@ -451,28 +495,33 @@ pub const XMLHttpRequest = struct {
         //  if the request method is GET or HEAD.
         //  https://xhr.spec.whatwg.org/#the-send()-method
         // var used_body: ?XMLHttpRequestBodyInit = null;
-        if (body) |b| {
+        if (self.request_body) |b| {
             if (self.method != .GET and self.method != .HEAD) {
-                request.body = try session_state.arena.dupe(u8, b);
+                request.body = b;
                 try request.addHeader("Content-Type", "text/plain; charset=UTF-8", .{});
             }
         }
 
-        try request.sendAsync(session_state.loop, self, .{});
+        try request.sendAsync(self, .{});
+        self.request = request;
     }
 
     pub fn onHttpResponse(self: *XMLHttpRequest, progress_: anyerror!http.Progress) !void {
         const progress = progress_ catch |err| {
+            // The request has been closed internally by the client, it isn't safe
+            // for us to keep it around.
+            self.request = null;
             self.onErr(err);
             return err;
         };
 
         if (progress.first) {
             const header = progress.header;
-            log.info("{any} {any} {d}", .{ self.method, self.url, header.status });
-
-            self.priv_state = .done;
-
+            log.debug(.http, "request header", .{
+                .source = "xhr",
+                .url = self.url,
+                .status = header.status,
+            });
             for (header.headers.items) |hdr| {
                 try self.response_headers.append(hdr.name, hdr.value);
             }
@@ -518,6 +567,16 @@ pub const XMLHttpRequest = struct {
             return;
         }
 
+        log.info(.http, "request complete", .{
+            .source = "xhr",
+            .url = self.url,
+            .status = self.response_status,
+        });
+
+        // Not that the request is done, the http/client will free the request
+        // object. It isn't safe to keep it around.
+        self.request = null;
+
         self.state = .done;
         self.send_flag = false;
         self.dispatchEvt("readystatechange");
@@ -529,20 +588,39 @@ pub const XMLHttpRequest = struct {
     }
 
     fn onErr(self: *XMLHttpRequest, err: anyerror) void {
-        self.priv_state = .done;
-
-        self.err = err;
-        self.state = .done;
         self.send_flag = false;
-        self.dispatchEvt("readystatechange");
-        self.dispatchProgressEvent("error", .{});
-        self.dispatchProgressEvent("loadend", .{});
 
-        log.debug("{any} {any} {any}", .{ self.method, self.url, self.err });
+        // capture the state before we change it
+        const s = self.state;
+
+        const is_abort = err == DOMError.Abort;
+
+        if (is_abort) {
+            self.state = .unsent;
+        } else {
+            self.state = .done;
+            self.dispatchEvt("error");
+        }
+
+        if (s != .done or s != .unsent) {
+            self.dispatchEvt("readystatechange");
+            if (is_abort) {
+                self.dispatchProgressEvent("abort", .{});
+            }
+            self.dispatchProgressEvent("loadend", .{});
+        }
+
+        const level: log.Level = if (err == DOMError.Abort) .debug else .err;
+        log.log(.http, level, "error", .{
+            .url = self.url,
+            .err = err,
+            .source = "xhr",
+        });
     }
 
     pub fn _abort(self: *XMLHttpRequest) void {
         self.onErr(DOMError.Abort);
+        self.destructor();
     }
 
     pub fn get_responseType(self: *XMLHttpRequest) []const u8 {
@@ -642,7 +720,7 @@ pub const XMLHttpRequest = struct {
             // response object to a new ArrayBuffer object representing this’s
             // received bytes. If this throws an exception, then set this’s
             // response object to failure and return null.
-            log.err("response type ArrayBuffer not implemented", .{});
+            log.err(.web_api, "not implemented", .{ .feature = "XHR ArrayBuffer resposne type" });
             return null;
         }
 
@@ -651,7 +729,7 @@ pub const XMLHttpRequest = struct {
             // response object to a new Blob object representing this’s
             // received bytes with type set to the result of get a final MIME
             // type for this.
-            log.err("response type Blob not implemented", .{});
+            log.err(.web_api, "not implemented", .{ .feature = "XHR Blob resposne type" });
             return null;
         }
 
@@ -726,7 +804,7 @@ pub const XMLHttpRequest = struct {
             self.response_bytes.items,
             .{},
         ) catch |e| {
-            log.err("parse JSON: {}", .{e});
+            log.warn(.http, "invalid json", .{ .err = e, .url = self.url, .source = "xhr" });
             self.response_obj = .{ .Failure = {} };
             return;
         };
@@ -869,4 +947,26 @@ test "Browser.XHR.XMLHttpRequest" {
         // So the url has been retrieved.
         .{ "status", "200" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "const req6 = new XMLHttpRequest()", null },
+        .{
+            \\ var readyStates = [];
+            \\ var currentTarget = null;
+            \\ req6.onreadystatechange = (e) => {
+            \\  currentTarget = e.currentTarget;
+            \\  readyStates.push(req6.readyState);
+            \\ }
+            ,
+            null,
+        },
+        .{ "req6.open('GET', 'https://127.0.0.1:9581/xhr')", null },
+        .{ "req6.send()", null },
+        .{ "readyStates.length", "4" },
+        .{ "readyStates[0] === XMLHttpRequest.OPENED", "true" },
+        .{ "readyStates[1] === XMLHttpRequest.HEADERS_RECEIVED", "true" },
+        .{ "readyStates[2] === XMLHttpRequest.LOADING", "true" },
+        .{ "readyStates[3] === XMLHttpRequest.DONE", "true" },
+        .{ "currentTarget == req6", "true" },
+    }, .{});
 }

src/browser/xmlserializer/xmlserializer.zig

@@ -18,7 +18,7 @@
 //
 const std = @import("std");
 
-const SessionState = @import("../env.zig").SessionState;
+const Page = @import("../page.zig").Page;
 
 const dump = @import("../dump.zig");
 const parser = @import("../netsurf.zig");
@@ -33,12 +33,12 @@ pub const XMLSerializer = struct {
         return .{};
     }
 
-    pub fn _serializeToString(_: *const XMLSerializer, root: *parser.Node, state: *SessionState) ![]const u8 {
-        var buf = std.ArrayList(u8).init(state.arena);
-        if (try parser.nodeType(root) == .document) {
-            try dump.writeHTML(@as(*parser.Document, @ptrCast(root)), buf.writer());
-        } else {
-            try dump.writeNode(root, buf.writer());
+    pub fn _serializeToString(_: *const XMLSerializer, root: *parser.Node, page: *Page) ![]const u8 {
+        var buf = std.ArrayList(u8).init(page.arena);
+        switch (try parser.nodeType(root)) {
+            .document => try dump.writeHTML(@as(*parser.Document, @ptrCast(root)), .{}, buf.writer()),
+            .document_type => try dump.writeDocType(@as(*parser.DocumentType, @ptrCast(root)), buf.writer()),
+            else => try dump.writeNode(root, .{}, buf.writer()),
         }
         return buf.items;
     }
@@ -54,3 +54,11 @@ test "Browser.XMLSerializer" {
         .{ "s.serializeToString(document.getElementById('para'))", "<p id=\"para\"> And</p>" },
     }, .{});
 }
+test "Browser.XMLSerializer with DOCTYPE" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<!DOCTYPE html><html><head></head><body></body></html>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new XMLSerializer().serializeToString(document.doctype)", "<!DOCTYPE html>" },
+    }, .{});
+}

src/cdp/Node.zig

@@ -19,12 +19,11 @@
 const std = @import("std");
 const Allocator = std.mem.Allocator;
 
+const log = @import("../log.zig");
 const parser = @import("../browser/netsurf.zig");
 
 pub const Id = u32;
 
-const log = std.log.scoped(.cdp_node);
-
 const Node = @This();
 
 id: Id,
@@ -202,49 +201,69 @@ pub const Search = struct {
 // (For now, we only support direct children)
 
 pub const Writer = struct {
-    opts: Opts,
-    node: *const Node,
+    depth: i32,
+    exclude_root: bool,
+    root: *const Node,
     registry: *Registry,
 
-    pub const Opts = struct {};
+    pub const Opts = struct {
+        depth: i32 = 0,
+        exclude_root: bool = false,
+    };
 
     pub fn jsonStringify(self: *const Writer, w: anytype) !void {
-        self.toJSON(w) catch |err| {
-            // The only error our jsonStringify method can return is
-            // @TypeOf(w).Error. In other words, our code can't return its own
-            // error, we can only return a writer error. Kinda sucks.
-            log.err("json stringify: {}", .{err});
-            return error.OutOfMemory;
-        };
+        if (self.exclude_root) {
+            _ = self.writeChildren(self.root, 1, w) catch |err| {
+                log.err(.cdp, "node writeChildren", .{ .err = err });
+                return error.OutOfMemory;
+            };
+        } else {
+            self.toJSON(self.root, 0, w) catch |err| {
+                // The only error our jsonStringify method can return is
+                // @TypeOf(w).Error. In other words, our code can't return its own
+                // error, we can only return a writer error. Kinda sucks.
+                log.err(.cdp, "node toJSON stringify", .{ .err = err });
+                return error.OutOfMemory;
+            };
+        }
     }
 
-    fn toJSON(self: *const Writer, w: anytype) !void {
+    fn toJSON(self: *const Writer, node: *const Node, depth: usize, w: anytype) !void {
         try w.beginObject();
-        try self.writeCommon(self.node, false, w);
+        try self.writeCommon(node, false, w);
 
-        {
-            var registry = self.registry;
-            const child_nodes = try parser.nodeGetChildNodes(self.node._node);
-            const child_count = try parser.nodeListLength(child_nodes);
+        try w.objectField("children");
+        const child_count = try self.writeChildren(node, depth, w);
+        try w.objectField("childNodeCount");
+        try w.write(child_count);
 
-            var i: usize = 0;
-            try w.objectField("children");
-            try w.beginArray();
-            for (0..child_count) |_| {
-                const child = (try parser.nodeListItem(child_nodes, @intCast(i))) orelse break;
-                const child_node = try registry.register(child);
+        try w.endObject();
+    }
+
+    fn writeChildren(self: *const Writer, node: *const Node, depth: usize, w: anytype) anyerror!usize {
+        var registry = self.registry;
+        const child_nodes = try parser.nodeGetChildNodes(node._node);
+        const child_count = try parser.nodeListLength(child_nodes);
+        const full_child = self.depth < 0 or self.depth < depth;
+
+        var i: usize = 0;
+        try w.beginArray();
+        for (0..child_count) |_| {
+            const child = (try parser.nodeListItem(child_nodes, @intCast(i))) orelse break;
+            const child_node = try registry.register(child);
+            if (full_child) {
+                try self.toJSON(child_node, depth + 1, w);
+            } else {
                 try w.beginObject();
                 try self.writeCommon(child_node, true, w);
                 try w.endObject();
-                i += 1;
             }
-            try w.endArray();
 
-            try w.objectField("childNodeCount");
-            try w.write(i);
+            i += 1;
         }
+        try w.endArray();
 
-        try w.endObject();
+        return i;
     }
 
     fn writeCommon(self: *const Writer, node: *const Node, include_child_count: bool, w: anytype) !void {
@@ -401,14 +420,15 @@ test "cdp Node: Writer" {
     var registry = Registry.init(testing.allocator);
     defer registry.deinit();
 
-    var doc = try testing.Document.init("<a id=a1></a><a id=a2></a>");
+    var doc = try testing.Document.init("<a id=a1></a><div id=d2><a id=a2></a></div>");
     defer doc.deinit();
 
     {
         const node = try registry.register(doc.asNode());
         const json = try std.json.stringifyAlloc(testing.allocator, Writer{
-            .node = node,
-            .opts = .{},
+            .root = node,
+            .depth = 0,
+            .exclude_root = false,
             .registry = &registry,
         }, .{});
         defer testing.allocator.free(json);
@@ -446,8 +466,9 @@ test "cdp Node: Writer" {
     {
         const node = registry.lookup_by_id.get(1).?;
         const json = try std.json.stringifyAlloc(testing.allocator, Writer{
-            .node = node,
-            .opts = .{},
+            .root = node,
+            .depth = 1,
+            .exclude_root = false,
             .registry = &registry,
         }, .{});
         defer testing.allocator.free(json);
@@ -496,4 +517,61 @@ test "cdp Node: Writer" {
             } },
         }, json);
     }
+
+    {
+        const node = registry.lookup_by_id.get(1).?;
+        const json = try std.json.stringifyAlloc(testing.allocator, Writer{
+            .root = node,
+            .depth = -1,
+            .exclude_root = true,
+            .registry = &registry,
+        }, .{});
+        defer testing.allocator.free(json);
+
+        try testing.expectJson(&.{ .{
+            .nodeId = 2,
+            .backendNodeId = 2,
+            .nodeType = 1,
+            .nodeName = "HEAD",
+            .localName = "head",
+            .nodeValue = "",
+            .childNodeCount = 0,
+            .documentURL = null,
+            .baseURL = null,
+            .xmlVersion = "",
+            .compatibilityMode = "NoQuirksMode",
+            .isScrollable = false,
+            .parentId = 1,
+        }, .{
+            .nodeId = 3,
+            .backendNodeId = 3,
+            .nodeType = 1,
+            .nodeName = "BODY",
+            .localName = "body",
+            .nodeValue = "",
+            .childNodeCount = 2,
+            .documentURL = null,
+            .baseURL = null,
+            .xmlVersion = "",
+            .compatibilityMode = "NoQuirksMode",
+            .isScrollable = false,
+            .children = &.{ .{
+                .nodeId = 4,
+                .localName = "a",
+                .childNodeCount = 0,
+                .parentId = 3,
+            }, .{
+                .nodeId = 5,
+                .localName = "div",
+                .childNodeCount = 1,
+                .parentId = 3,
+                .children = &.{.{
+                    .nodeId = 6,
+                    .localName = "a",
+                    .childNodeCount = 0,
+                    .parentId = 5,
+                }},
+            } },
+        } }, json);
+    }
 }

src/cdp/cdp.zig

@@ -20,9 +20,9 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 const json = std.json;
 
+const log = @import("../log.zig");
 const App = @import("../app.zig").App;
 const Env = @import("../browser/env.zig").Env;
-const asUint = @import("../str/parser.zig").asUint;
 const Browser = @import("../browser/browser.zig").Browser;
 const Session = @import("../browser/session.zig").Session;
 const Page = @import("../browser/page.zig").Page;
@@ -30,7 +30,7 @@ const Inspector = @import("../browser/env.zig").Env.Inspector;
 const Incrementing = @import("../id.zig").Incrementing;
 const Notification = @import("../notification.zig").Notification;
 
-const log = std.log.scoped(.cdp);
+const polyfill = @import("../browser/polyfill/polyfill.zig");
 
 pub const URL_BASE = "chrome://newtab/";
 pub const LOADER_ID = "LOADERID24DD2FD56CF1EF33C965C79C";
@@ -69,6 +69,12 @@ pub fn CDPT(comptime TypeProvider: type) type {
         // 1 message at a time.
         message_arena: std.heap.ArenaAllocator,
 
+        // Used for processing notifications within a browser context.
+        notification_arena: std.heap.ArenaAllocator,
+
+        // Extra headers to add to all requests. TBD under which conditions this should be reset.
+        extra_headers: std.ArrayListUnmanaged(std.http.Header) = .empty,
+
         const Self = @This();
 
         pub fn init(app: *App, client: TypeProvider.Client) !Self {
@@ -82,6 +88,7 @@ pub fn CDPT(comptime TypeProvider: type) type {
                 .allocator = allocator,
                 .browser_context = null,
                 .message_arena = std.heap.ArenaAllocator.init(allocator),
+                .notification_arena = std.heap.ArenaAllocator.init(allocator),
             };
         }
 
@@ -91,6 +98,7 @@ pub fn CDPT(comptime TypeProvider: type) type {
             }
             self.browser.deinit();
             self.message_arena.deinit();
+            self.notification_arena.deinit();
         }
 
         pub fn handleMessage(self: *Self, msg: []const u8) bool {
@@ -175,41 +183,42 @@ pub fn CDPT(comptime TypeProvider: type) type {
 
             switch (domain.len) {
                 3 => switch (@as(u24, @bitCast(domain[0..3].*))) {
-                    asUint("DOM") => return @import("domains/dom.zig").processMessage(command),
-                    asUint("Log") => return @import("domains/log.zig").processMessage(command),
-                    asUint("CSS") => return @import("domains/css.zig").processMessage(command),
+                    asUint(u24, "DOM") => return @import("domains/dom.zig").processMessage(command),
+                    asUint(u24, "Log") => return @import("domains/log.zig").processMessage(command),
+                    asUint(u24, "CSS") => return @import("domains/css.zig").processMessage(command),
                     else => {},
                 },
                 4 => switch (@as(u32, @bitCast(domain[0..4].*))) {
-                    asUint("Page") => return @import("domains/page.zig").processMessage(command),
+                    asUint(u32, "Page") => return @import("domains/page.zig").processMessage(command),
                     else => {},
                 },
                 5 => switch (@as(u40, @bitCast(domain[0..5].*))) {
-                    asUint("Fetch") => return @import("domains/fetch.zig").processMessage(command),
-                    asUint("Input") => return @import("domains/input.zig").processMessage(command),
+                    asUint(u40, "Fetch") => return @import("domains/fetch.zig").processMessage(command),
+                    asUint(u40, "Input") => return @import("domains/input.zig").processMessage(command),
                     else => {},
                 },
                 6 => switch (@as(u48, @bitCast(domain[0..6].*))) {
-                    asUint("Target") => return @import("domains/target.zig").processMessage(command),
+                    asUint(u48, "Target") => return @import("domains/target.zig").processMessage(command),
                     else => {},
                 },
                 7 => switch (@as(u56, @bitCast(domain[0..7].*))) {
-                    asUint("Browser") => return @import("domains/browser.zig").processMessage(command),
-                    asUint("Runtime") => return @import("domains/runtime.zig").processMessage(command),
-                    asUint("Network") => return @import("domains/network.zig").processMessage(command),
+                    asUint(u56, "Browser") => return @import("domains/browser.zig").processMessage(command),
+                    asUint(u56, "Runtime") => return @import("domains/runtime.zig").processMessage(command),
+                    asUint(u56, "Network") => return @import("domains/network.zig").processMessage(command),
+                    asUint(u56, "Storage") => return @import("domains/storage.zig").processMessage(command),
                     else => {},
                 },
                 8 => switch (@as(u64, @bitCast(domain[0..8].*))) {
-                    asUint("Security") => return @import("domains/security.zig").processMessage(command),
+                    asUint(u64, "Security") => return @import("domains/security.zig").processMessage(command),
                     else => {},
                 },
                 9 => switch (@as(u72, @bitCast(domain[0..9].*))) {
-                    asUint("Emulation") => return @import("domains/emulation.zig").processMessage(command),
-                    asUint("Inspector") => return @import("domains/inspector.zig").processMessage(command),
+                    asUint(u72, "Emulation") => return @import("domains/emulation.zig").processMessage(command),
+                    asUint(u72, "Inspector") => return @import("domains/inspector.zig").processMessage(command),
                     else => {},
                 },
                 11 => switch (@as(u88, @bitCast(domain[0..11].*))) {
-                    asUint("Performance") => return @import("domains/performance.zig").processMessage(command),
+                    asUint(u88, "Performance") => return @import("domains/performance.zig").processMessage(command),
                     else => {},
                 },
                 else => {},
@@ -259,7 +268,7 @@ pub fn CDPT(comptime TypeProvider: type) type {
             });
         }
 
-        fn sendJSON(self: *Self, message: anytype) !void {
+        pub fn sendJSON(self: *Self, message: anytype) !void {
             return self.client.sendJSON(message, .{
                 .emit_null_optional_fields = false,
             });
@@ -283,6 +292,12 @@ pub fn BrowserContext(comptime CDP_T: type) type {
         // Points to the session arena
         arena: Allocator,
 
+        // From the parent's notification_arena.allocator(). Most of the CDP
+        // code paths deal with a cmd which has its own arena (from the
+        // message_arena). But notifications happen outside of the typical CDP
+        // request->response, and thus don't have a cmd and don't have an arena.
+        notification_arena: Allocator,
+
         // Maps to our Page. (There are other types of targets, but we only
         // deal with "pages" for now). Since we only allow 1 open page at a
         // time, we only have 1 target_id.
@@ -308,13 +323,18 @@ pub fn BrowserContext(comptime CDP_T: type) type {
         inspector: Inspector,
         isolated_world: ?IsolatedWorld,
 
+        // Used to restore the proxy after the CDP session ends. If CDP never over-wrote it, it won't restore it (the first null).
+        // If the CDP is restoring it, but the original value was null, that's the 2nd null.
+        // If you only have 1 null it would be ambiguous, does null mean it shouldn't be restored, or should it be restored to null?
+        http_proxy_before: ??std.Uri = null,
+
         const Self = @This();
 
         fn init(self: *Self, id: []const u8, cdp: *CDP_T) !void {
             const allocator = cdp.allocator;
 
             const session = try cdp.browser.newSession();
-            const arena = session.arena.allocator();
+            const arena = session.arena;
 
             const inspector = try cdp.browser.env.newInspector(arena, self);
 
@@ -336,6 +356,7 @@ pub fn BrowserContext(comptime CDP_T: type) type {
                 .node_search_list = undefined,
                 .isolated_world = null,
                 .inspector = inspector,
+                .notification_arena = cdp.notification_arena.allocator(),
             };
             self.node_search_list = Node.Search.List.init(allocator, &self.node_registry);
             errdefer self.deinit();
@@ -360,6 +381,8 @@ pub fn BrowserContext(comptime CDP_T: type) type {
             self.node_registry.deinit();
             self.node_search_list.deinit();
             self.cdp.browser.notification.unregisterAll(self);
+
+            if (self.http_proxy_before) |prev_proxy| self.cdp.browser.http_client.http_proxy = prev_proxy;
         }
 
         pub fn reset(self: *Self) void {
@@ -372,22 +395,22 @@ pub fn BrowserContext(comptime CDP_T: type) type {
                 return error.CurrentlyOnly1IsolatedWorldSupported;
             }
 
-            var executor = try self.cdp.browser.env.newExecutor();
+            var executor = try self.cdp.browser.env.newExecutionWorld();
             errdefer executor.deinit();
 
             self.isolated_world = .{
                 .name = try self.arena.dupe(u8, world_name),
-                .scope = null,
                 .executor = executor,
                 .grant_universal_access = grant_universal_access,
             };
             return &self.isolated_world.?;
         }
 
-        pub fn nodeWriter(self: *Self, node: *const Node, opts: Node.Writer.Opts) Node.Writer {
+        pub fn nodeWriter(self: *Self, root: *const Node, opts: Node.Writer.Opts) Node.Writer {
             return .{
-                .node = node,
-                .opts = opts,
+                .root = root,
+                .depth = opts.depth,
+                .exclude_root = opts.exclude_root,
                 .registry = &self.node_registry,
             };
         }
@@ -398,6 +421,18 @@ pub fn BrowserContext(comptime CDP_T: type) type {
             return if (raw_url.len == 0) null else raw_url;
         }
 
+        pub fn networkEnable(self: *Self) !void {
+            try self.cdp.browser.notification.register(.http_request_fail, self, onHttpRequestFail);
+            try self.cdp.browser.notification.register(.http_request_start, self, onHttpRequestStart);
+            try self.cdp.browser.notification.register(.http_request_complete, self, onHttpRequestComplete);
+        }
+
+        pub fn networkDisable(self: *Self) void {
+            self.cdp.browser.notification.unregister(.http_request_fail, self);
+            self.cdp.browser.notification.unregister(.http_request_start, self);
+            self.cdp.browser.notification.unregister(.http_request_complete, self);
+        }
+
         pub fn onPageRemove(ctx: *anyopaque, _: Notification.PageRemove) !void {
             const self: *Self = @alignCast(@ptrCast(ctx));
             return @import("domains/page.zig").pageRemove(self);
@@ -410,7 +445,8 @@ pub fn BrowserContext(comptime CDP_T: type) type {
 
         pub fn onPageNavigate(ctx: *anyopaque, data: *const Notification.PageNavigate) !void {
             const self: *Self = @alignCast(@ptrCast(ctx));
-            return @import("domains/page.zig").pageNavigate(self, data);
+            defer self.resetNotificationArena();
+            return @import("domains/page.zig").pageNavigate(self.notification_arena, self, data);
         }
 
         pub fn onPageNavigated(ctx: *anyopaque, data: *const Notification.PageNavigated) !void {
@@ -418,6 +454,28 @@ pub fn BrowserContext(comptime CDP_T: type) type {
             return @import("domains/page.zig").pageNavigated(self, data);
         }
 
+        pub fn onHttpRequestStart(ctx: *anyopaque, data: *const Notification.RequestStart) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            defer self.resetNotificationArena();
+            return @import("domains/network.zig").httpRequestStart(self.notification_arena, self, data);
+        }
+
+        pub fn onHttpRequestFail(ctx: *anyopaque, data: *const Notification.RequestFail) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            defer self.resetNotificationArena();
+            return @import("domains/network.zig").httpRequestFail(self.notification_arena, self, data);
+        }
+
+        pub fn onHttpRequestComplete(ctx: *anyopaque, data: *const Notification.RequestComplete) !void {
+            const self: *Self = @alignCast(@ptrCast(ctx));
+            defer self.resetNotificationArena();
+            return @import("domains/network.zig").httpRequestComplete(self.notification_arena, self, data);
+        }
+
+        fn resetNotificationArena(self: *Self) void {
+            defer _ = self.cdp.notification_arena.reset(.{ .retain_with_limit = 1024 * 64 });
+        }
+
         pub fn callInspector(self: *const Self, msg: []const u8) void {
             self.inspector.send(msg);
             // force running micro tasks after send input to the inspector.
@@ -425,36 +483,25 @@ pub fn BrowserContext(comptime CDP_T: type) type {
         }
 
         pub fn onInspectorResponse(ctx: *anyopaque, _: u32, msg: []const u8) void {
-            if (std.log.defaultLogEnabled(.debug)) {
-                // msg should be {"id":<id>,...
-                std.debug.assert(std.mem.startsWith(u8, msg, "{\"id\":"));
-
-                const id_end = std.mem.indexOfScalar(u8, msg, ',') orelse {
-                    log.warn("invalid inspector response message: {s}", .{msg});
-                    return;
-                };
-                const id = msg[6..id_end];
-                log.debug("Res (inspector) > id {s}", .{id});
-            }
             sendInspectorMessage(@alignCast(@ptrCast(ctx)), msg) catch |err| {
-                log.err("Failed to send inspector response: {any}", .{err});
+                log.err(.cdp, "send inspector response", .{ .err = err });
             };
         }
 
         pub fn onInspectorEvent(ctx: *anyopaque, msg: []const u8) void {
-            if (std.log.defaultLogEnabled(.debug)) {
+            if (log.enabled(.cdp, .debug)) {
                 // msg should be {"method":<method>,...
                 std.debug.assert(std.mem.startsWith(u8, msg, "{\"method\":"));
                 const method_end = std.mem.indexOfScalar(u8, msg, ',') orelse {
-                    log.warn("invalid inspector event message: {s}", .{msg});
+                    log.err(.cdp, "invalid inspector event", .{ .msg = msg });
                     return;
                 };
                 const method = msg[10..method_end];
-                log.debug("Event (inspector) > method {s}", .{method});
+                log.debug(.cdp, "inspector event", .{ .method = method });
             }
 
             sendInspectorMessage(@alignCast(@ptrCast(ctx)), msg) catch |err| {
-                log.err("Failed to send inspector event: {any}", .{err});
+                log.err(.cdp, "send inspector event", .{ .err = err });
             };
         }
 
@@ -480,7 +527,7 @@ pub fn BrowserContext(comptime CDP_T: type) type {
 
             var buf: std.ArrayListUnmanaged(u8) = .{};
             buf.ensureTotalCapacity(arena.allocator(), message_len) catch |err| {
-                log.err("Failed to expand inspector buffer: {any}", .{err});
+                log.err(.cdp, "inspector buffer", .{ .err = err });
                 return;
             };
 
@@ -511,18 +558,19 @@ pub fn BrowserContext(comptime CDP_T: type) type {
 /// An object id is unique across all contexts, different object ids can refer to the same Node in different contexts.
 const IsolatedWorld = struct {
     name: []const u8,
-    scope: ?*Env.Scope,
-    executor: Env.Executor,
+    executor: Env.ExecutionWorld,
     grant_universal_access: bool,
 
+    // Polyfill loader for the isolated world.
+    // We want to load polyfill in the world's context.
+    polyfill_loader: polyfill.Loader = .{},
+
     pub fn deinit(self: *IsolatedWorld) void {
         self.executor.deinit();
-        self.scope = null;
     }
     pub fn removeContext(self: *IsolatedWorld) !void {
-        if (self.scope == null) return error.NoIsolatedContextToRemove;
-        self.executor.endScope();
-        self.scope = null;
+        if (self.executor.js_context == null) return error.NoIsolatedContextToRemove;
+        self.executor.removeJsContext();
     }
 
     // The isolate world must share at least some of the state with the related page, specifically the DocumentHTML
@@ -531,8 +579,14 @@ const IsolatedWorld = struct {
     // This also means this pointer becomes invalid after removePage untill a new page is created.
     // Currently we have only 1 page/frame and thus also only 1 state in the isolate world.
     pub fn createContext(self: *IsolatedWorld, page: *Page) !void {
-        if (self.scope != null) return error.Only1IsolatedContextSupported;
-        self.scope = try self.executor.startScope(&page.window, &page.state, {}, false);
+        if (self.executor.js_context != null) return error.Only1IsolatedContextSupported;
+        _ = try self.executor.createJsContext(
+            &page.window,
+            page,
+            {},
+            false,
+            Env.GlobalMissingCallback.init(&self.polyfill_loader),
+        );
     }
 };
 
@@ -662,6 +716,10 @@ const InputParams = struct {
     }
 };
 
+fn asUint(comptime T: type, comptime string: []const u8) T {
+    return @bitCast(string[0..string.len].*);
+}
+
 const testing = @import("testing.zig");
 test "cdp: invalid json" {
     var ctx = testing.context();