HtmlInputElement as Zig native

.github/actions/install/action.yml

@@ -5,7 +5,7 @@ inputs:
   zig:
     description: 'Zig version to install'
     required: false
-    default: '0.15.1'
+    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.28'
+    default: 'v0.1.24'
   v8:
     description: 'v8 version to install'
     required: false

.github/workflows/build.yml

@@ -60,7 +60,7 @@ jobs:
       ARCH: aarch64
       OS: linux
 
-    runs-on: ubuntu-22.04-arm
+    runs-on: ubuntu-24.04-arm
     timeout-minutes: 15
 
     steps:
@@ -76,7 +76,7 @@ jobs:
           arch: ${{env.ARCH}}
 
       - name: zig build
-        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -98,9 +98,7 @@ jobs:
       ARCH: aarch64
       OS: macos
 
-    # macos-14 runs on arm CPU. see
-    # https://github.com/actions/runner-images?tab=readme-ov-file
-    runs-on: macos-14
+    runs-on: macos-latest
     timeout-minutes: 15
 
     steps:
@@ -138,11 +136,6 @@ 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
 

.github/workflows/e2e-test.yml

@@ -45,9 +45,6 @@ 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:
@@ -68,6 +65,56 @@ jobs:
             zig-out/bin/lightpanda
           retention-days: 1
 
+  puppeteer-perf:
+    name: puppeteer-perf
+    needs: zig-build-release
+
+    env:
+      MAX_MEMORY: 30000
+      MAX_AVG_DURATION: 24
+      LIGHTPANDA_DISABLE_TELEMETRY: true
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: npm install
+
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: run puppeteer
+        run: |
+          python3 -m http.server 1234 -d ./public & echo $! > PYTHON.pid
+          ./lightpanda serve & echo $! > LPD.pid
+          RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
+          cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
+          kill `cat LPD.pid` `cat PYTHON.pid`
+
+      - name: puppeteer result
+        run: cat puppeteer.out
+
+      - name: memory regression
+        run: |
+          export LPD_VmHWM=`cat LPD.VmHWM`
+          echo "Peak resident set size: $LPD_VmHWM"
+          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+
+      - name: duration regression
+        run: |
+          export PUPPETEER_AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
+          echo "puppeteer avg duration: $PUPPETEER_AVG_DURATION"
+          test "$PUPPETEER_AVG_DURATION" -le "$MAX_AVG_DURATION"
+
   demo-scripts:
     name: demo-scripts
     needs: zig-build-release
@@ -93,29 +140,15 @@ jobs:
       - name: run end to end tests
         run: |
           ./lightpanda serve & echo $! > LPD.pid
-          go run runner/main.go
+          go run runner/main.go --verbose
           kill `cat LPD.pid`
 
-      - name: build proxy
-        run: |
-          cd proxy
-          go build
-
-      - name: run end to end tests through proxy
-        run: |
-          ./proxy/proxy & echo $! > PROXY.id
-          ./lightpanda serve --http_proxy 'http://127.0.0.1:3000' & echo $! > LPD.pid
-          go run runner/main.go
-          kill `cat LPD.pid` `cat PROXY.id`
-
   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
+    # Don't execute on PR
+    if: github.event_name != 'pull_request'
 
     # use a self host runner.
     runs-on: lpd-bench-hetzner
@@ -152,18 +185,6 @@ jobs:
       - 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) //'`

.github/workflows/zig-fmt.yml

@@ -1,7 +1,7 @@
 name: zig-fmt
 
 env:
-  ZIG_VERSION: 0.15.1
+  ZIG_VERSION: 0.14.1
 
 on:
   pull_request:

.gitmodules

@@ -19,15 +19,3 @@
 [submodule "vendor/mimalloc"]
 	path = vendor/mimalloc
 	url = https://github.com/microsoft/mimalloc.git/
-[submodule "vendor/nghttp2"]
-	path = vendor/nghttp2
-	url = https://github.com/nghttp2/nghttp2.git
-[submodule "vendor/mbedtls"]
-	path = vendor/mbedtls
-	url = https://github.com/Mbed-TLS/mbedtls.git
-[submodule "vendor/zlib"]
-	path = vendor/zlib
-	url = https://github.com/madler/zlib.git
-[submodule "vendor/curl"]
-	path = vendor/curl
-	url = https://github.com/curl/curl.git

Dockerfile

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

README.md

@@ -18,7 +18,7 @@ Lightpanda is the open-source browser made for headless usage:
 
 - Javascript execution
 - Support of Web APIs (partial, WIP)
-- Compatible with Playwright[^1], Puppeteer, chromedp through CDP
+- Compatible with Playwright[^1], Puppeteer through CDP (WIP)
 
 Fast web automation for AI agents, LLM training, scraping and testing:
 
@@ -41,8 +41,7 @@ Due to the nature of Playwright, a script that works with the current version of
 
 ## Quick start
 
-### Install
-**Install from the nightly builds**
+### 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
@@ -65,16 +64,6 @@ 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`.
-```console
-docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
-```
-
 ### Dump a URL
 
 ```console
@@ -135,26 +124,21 @@ By default, Lightpanda collects and sends usage telemetry. This can be disabled
 
 ## Status
 
-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.
+Lightpanda is still a work in progress and is currently at a Beta stage.
+
+:warning: You should expect most websites to fail or crash.
 
 Here are the key features we have implemented:
 
-- [x] HTTP loader (based on Libcurl)
+- [x] HTTP loader
 - [x] HTML parser and DOM tree (based on Netsurf libs)
 - [x] Javascript support (v8)
-- [x] DOM APIs
+- [x] Basic DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [x] Fetch API (polyfill)
+  - [x] Fetch API
 - [x] DOM dump
-- [x] CDP/websockets server
-- [x] Click
-- [x] Input form
-- [x] Cookies
-- [x] Custom HTTP headers
-- [x] Proxy support
-- [x] Network interception
+- [x] Basic CDP/websockets server
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
@@ -164,12 +148,11 @@ You can also follow the progress of our Javascript support in our dedicated [zig
 
 ### Prerequisites
 
-Lightpanda is written with [Zig](https://ziglang.org/) `0.15.1`. You have to
+Lightpanda is written with [Zig](https://ziglang.org/) `0.14.1`. You have to
 install it with the right version in order to build the project.
 
 Lightpanda also depends on
 [zig-js-runtime](https://github.com/lightpanda-io/zig-js-runtime/) (with v8),
-[Libcurl](https://curl.se/libcurl/),
 [Netsurf libs](https://www.netsurf-browser.org/) and
 [Mimalloc](https://microsoft.github.io/mimalloc).
 

build.zig

@@ -19,13 +19,11 @@
 const std = @import("std");
 const builtin = @import("builtin");
 
-const Build = std.Build;
-
 /// Do not rename this constant. It is scanned by some scripts to determine
 /// which zig version to install.
-const recommended_zig_version = "0.15.1";
+const recommended_zig_version = "0.14.1";
 
-pub fn build(b: *Build) !void {
+pub fn build(b: *std.Build) !void {
     switch (comptime builtin.zig_version.order(std.SemanticVersion.parse(recommended_zig_version) catch unreachable)) {
         .eq => {},
         .lt => {
@@ -49,18 +47,6 @@ pub fn build(b: *Build) !void {
     const target = b.standardTargetOptions(.{});
     const optimize = b.standardOptimizeOption(.{});
 
-    // We're still using llvm because the new x86 backend seems to crash
-    // with v8. This can be reproduced in zig-v8-fork.
-
-    const lightpanda_module = b.addModule("lightpanda", .{
-        .root_source_file = b.path("src/main.zig"),
-        .target = target,
-        .optimize = optimize,
-        .link_libc = true,
-        .link_libcpp = true,
-    });
-    try addDependencies(b, lightpanda_module, opts);
-
     {
         // browser
         // -------
@@ -68,9 +54,12 @@ pub fn build(b: *Build) !void {
         // compile and install
         const exe = b.addExecutable(.{
             .name = "lightpanda",
-            .use_llvm = true,
-            .root_module = lightpanda_module,
+            .target = target,
+            .optimize = optimize,
+            .root_source_file = b.path("src/main.zig"),
         });
+
+        try common(b, opts, exe);
         b.installArtifact(exe);
 
         // run
@@ -84,54 +73,6 @@ pub fn build(b: *Build) !void {
         run_step.dependOn(&run_cmd.step);
     }
 
-    {
-        // tests
-        // ----
-
-        // compile
-        const tests = b.addTest(.{
-            .root_module = lightpanda_module,
-            .use_llvm = true,
-            .test_runner = .{ .path = b.path("src/test_runner.zig"), .mode = .simple },
-        });
-
-        const run_tests = b.addRunArtifact(tests);
-        if (b.args) |args| {
-            run_tests.addArgs(args);
-        }
-
-        // step
-        const tests_step = b.step("test", "Run unit tests");
-        tests_step.dependOn(&run_tests.step);
-    }
-
-    {
-        // wpt
-        // -----
-        const wpt_module = b.createModule(.{
-            .root_source_file = b.path("src/main_wpt.zig"),
-            .target = target,
-            .optimize = optimize,
-        });
-        try addDependencies(b, wpt_module, opts);
-
-        // compile and install
-        const wpt = b.addExecutable(.{
-            .name = "lightpanda-wpt",
-            .use_llvm = true,
-            .root_module = wpt_module,
-        });
-
-        // run
-        const wpt_cmd = b.addRunArtifact(wpt);
-        if (b.args) |args| {
-            wpt_cmd.addArgs(args);
-        }
-        // step
-        const wpt_step = b.step("wpt", "WPT tests");
-        wpt_step.dependOn(&wpt_cmd.step);
-    }
-
     {
         // get v8
         // -------
@@ -149,19 +90,63 @@ pub fn build(b: *Build) !void {
         const build_step = b.step("build-v8", "Build v8");
         build_step.dependOn(&build_v8.step);
     }
+
+    {
+        // tests
+        // ----
+
+        // compile
+        const tests = b.addTest(.{
+            .root_source_file = b.path("src/main.zig"),
+            .test_runner = .{ .path = b.path("src/test_runner.zig"), .mode = .simple },
+            .target = target,
+            .optimize = optimize,
+        });
+        try common(b, opts, tests);
+
+        const run_tests = b.addRunArtifact(tests);
+        if (b.args) |args| {
+            run_tests.addArgs(args);
+        }
+
+        // step
+        const tests_step = b.step("test", "Run unit tests");
+        tests_step.dependOn(&run_tests.step);
+    }
+
+    {
+        // wpt
+        // -----
+
+        // compile and install
+        const wpt = b.addExecutable(.{
+            .name = "lightpanda-wpt",
+            .root_source_file = b.path("src/main_wpt.zig"),
+            .target = target,
+            .optimize = optimize,
+        });
+        try common(b, opts, wpt);
+
+        // run
+        const wpt_cmd = b.addRunArtifact(wpt);
+        if (b.args) |args| {
+            wpt_cmd.addArgs(args);
+        }
+        // step
+        const wpt_step = b.step("wpt", "WPT tests");
+        wpt_step.dependOn(&wpt_cmd.step);
+    }
 }
 
-fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options) !void {
-    try moduleNetSurf(b, mod);
-    mod.addImport("build_config", opts.createModule());
-
+fn common(b: *std.Build, opts: *std.Build.Step.Options, step: *std.Build.Step.Compile) !void {
+    const mod = step.root_module;
     const target = mod.resolved_target.?;
-    const dep_opts = .{
-        .target = target,
-        .optimize = mod.optimize.?,
-    };
+    const optimize = mod.optimize.?;
+    const dep_opts = .{ .target = target, .optimize = optimize };
 
-    mod.addIncludePath(b.path("vendor/lightpanda"));
+    try moduleNetSurf(b, step, target);
+    mod.addImport("tls", b.dependency("tls", dep_opts).module("tls"));
+    mod.addImport("tigerbeetle-io", b.dependency("tigerbeetle_io", .{}).module("tigerbeetle_io"));
 
     {
         // v8
@@ -171,7 +156,11 @@ fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options) !vo
         const v8_mod = b.dependency("v8", dep_opts).module("v8");
         v8_mod.addOptions("default_exports", v8_opts);
         mod.addImport("v8", v8_mod);
+    }
 
+    mod.link_libcpp = true;
+
+    {
         const release_dir = if (mod.optimize.? == .Debug) "debug" else "release";
         const os = switch (target.result.os.tag) {
             .linux => "linux",
@@ -192,211 +181,21 @@ fn addDependencies(b: *Build, mod: *Build.Module, opts: *Build.Step.Options) !vo
             );
         };
         mod.addObjectFile(mod.owner.path(lib_path));
-
-        switch (target.result.os.tag) {
-            .macos => {
-                // v8 has a dependency, abseil-cpp, which, on Mac, uses CoreFoundation
-                mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
-                mod.linkFramework("CoreFoundation", .{});
-            },
-            else => {},
-        }
     }
 
-    {
-        //curl
-        {
-            const is_linux = target.result.os.tag == .linux;
-            if (is_linux) {
-                mod.addCMacro("HAVE_LINUX_TCP_H", "1");
-                mod.addCMacro("HAVE_MSG_NOSIGNAL", "1");
-                mod.addCMacro("HAVE_GETHOSTBYNAME_R", "1");
-            }
-            mod.addCMacro("_FILE_OFFSET_BITS", "64");
-            mod.addCMacro("BUILDING_LIBCURL", "1");
-            mod.addCMacro("CURL_DISABLE_AWS", "1");
-            mod.addCMacro("CURL_DISABLE_DICT", "1");
-            mod.addCMacro("CURL_DISABLE_DOH", "1");
-            mod.addCMacro("CURL_DISABLE_FILE", "1");
-            mod.addCMacro("CURL_DISABLE_FTP", "1");
-            mod.addCMacro("CURL_DISABLE_GOPHER", "1");
-            mod.addCMacro("CURL_DISABLE_KERBEROS", "1");
-            mod.addCMacro("CURL_DISABLE_IMAP", "1");
-            mod.addCMacro("CURL_DISABLE_IPFS", "1");
-            mod.addCMacro("CURL_DISABLE_LDAP", "1");
-            mod.addCMacro("CURL_DISABLE_LDAPS", "1");
-            mod.addCMacro("CURL_DISABLE_MQTT", "1");
-            mod.addCMacro("CURL_DISABLE_NTLM", "1");
-            mod.addCMacro("CURL_DISABLE_PROGRESS_METER", "1");
-            mod.addCMacro("CURL_DISABLE_POP3", "1");
-            mod.addCMacro("CURL_DISABLE_RTSP", "1");
-            mod.addCMacro("CURL_DISABLE_SMB", "1");
-            mod.addCMacro("CURL_DISABLE_SMTP", "1");
-            mod.addCMacro("CURL_DISABLE_TELNET", "1");
-            mod.addCMacro("CURL_DISABLE_TFTP", "1");
-            mod.addCMacro("CURL_EXTERN_SYMBOL", "__attribute__ ((__visibility__ (\"default\"))");
-            mod.addCMacro("CURL_OS", if (is_linux) "\"Linux\"" else "\"mac\"");
-            mod.addCMacro("CURL_STATICLIB", "1");
-            mod.addCMacro("ENABLE_IPV6", "1");
-            mod.addCMacro("HAVE_ALARM", "1");
-            mod.addCMacro("HAVE_ALLOCA_H", "1");
-            mod.addCMacro("HAVE_ARPA_INET_H", "1");
-            mod.addCMacro("HAVE_ARPA_TFTP_H", "1");
-            mod.addCMacro("HAVE_ASSERT_H", "1");
-            mod.addCMacro("HAVE_BASENAME", "1");
-            mod.addCMacro("HAVE_BOOL_T", "1");
-            mod.addCMacro("HAVE_BUILTIN_AVAILABLE", "1");
-            mod.addCMacro("HAVE_CLOCK_GETTIME_MONOTONIC", "1");
-            mod.addCMacro("HAVE_DLFCN_H", "1");
-            mod.addCMacro("HAVE_ERRNO_H", "1");
-            mod.addCMacro("HAVE_FCNTL", "1");
-            mod.addCMacro("HAVE_FCNTL_H", "1");
-            mod.addCMacro("HAVE_FCNTL_O_NONBLOCK", "1");
-            mod.addCMacro("HAVE_FREEADDRINFO", "1");
-            mod.addCMacro("HAVE_FSETXATTR", "1");
-            mod.addCMacro("HAVE_FSETXATTR_5", "1");
-            mod.addCMacro("HAVE_FTRUNCATE", "1");
-            mod.addCMacro("HAVE_GETADDRINFO", "1");
-            mod.addCMacro("HAVE_GETEUID", "1");
-            mod.addCMacro("HAVE_GETHOSTBYNAME", "1");
-            mod.addCMacro("HAVE_GETHOSTBYNAME_R_6", "1");
-            mod.addCMacro("HAVE_GETHOSTNAME", "1");
-            mod.addCMacro("HAVE_GETPEERNAME", "1");
-            mod.addCMacro("HAVE_GETPPID", "1");
-            mod.addCMacro("HAVE_GETPPID", "1");
-            mod.addCMacro("HAVE_GETPROTOBYNAME", "1");
-            mod.addCMacro("HAVE_GETPWUID", "1");
-            mod.addCMacro("HAVE_GETPWUID_R", "1");
-            mod.addCMacro("HAVE_GETRLIMIT", "1");
-            mod.addCMacro("HAVE_GETSOCKNAME", "1");
-            mod.addCMacro("HAVE_GETTIMEOFDAY", "1");
-            mod.addCMacro("HAVE_GMTIME_R", "1");
-            mod.addCMacro("HAVE_IDN2_H", "1");
-            mod.addCMacro("HAVE_IF_NAMETOINDEX", "1");
-            mod.addCMacro("HAVE_IFADDRS_H", "1");
-            mod.addCMacro("HAVE_INET_ADDR", "1");
-            mod.addCMacro("HAVE_INET_PTON", "1");
-            mod.addCMacro("HAVE_INTTYPES_H", "1");
-            mod.addCMacro("HAVE_IOCTL", "1");
-            mod.addCMacro("HAVE_IOCTL_FIONBIO", "1");
-            mod.addCMacro("HAVE_IOCTL_SIOCGIFADDR", "1");
-            mod.addCMacro("HAVE_LDAP_URL_PARSE", "1");
-            mod.addCMacro("HAVE_LIBGEN_H", "1");
-            mod.addCMacro("HAVE_LIBZ", "1");
-            mod.addCMacro("HAVE_LL", "1");
-            mod.addCMacro("HAVE_LOCALE_H", "1");
-            mod.addCMacro("HAVE_LOCALTIME_R", "1");
-            mod.addCMacro("HAVE_LONGLONG", "1");
-            mod.addCMacro("HAVE_MALLOC_H", "1");
-            mod.addCMacro("HAVE_MEMORY_H", "1");
-            mod.addCMacro("HAVE_NET_IF_H", "1");
-            mod.addCMacro("HAVE_NETDB_H", "1");
-            mod.addCMacro("HAVE_NETINET_IN_H", "1");
-            mod.addCMacro("HAVE_NETINET_TCP_H", "1");
-            mod.addCMacro("HAVE_PIPE", "1");
-            mod.addCMacro("HAVE_POLL", "1");
-            mod.addCMacro("HAVE_POLL_FINE", "1");
-            mod.addCMacro("HAVE_POLL_H", "1");
-            mod.addCMacro("HAVE_POSIX_STRERROR_R", "1");
-            mod.addCMacro("HAVE_PTHREAD_H", "1");
-            mod.addCMacro("HAVE_PWD_H", "1");
-            mod.addCMacro("HAVE_RECV", "1");
-            mod.addCMacro("HAVE_SA_FAMILY_T", "1");
-            mod.addCMacro("HAVE_SELECT", "1");
-            mod.addCMacro("HAVE_SEND", "1");
-            mod.addCMacro("HAVE_SETJMP_H", "1");
-            mod.addCMacro("HAVE_SETLOCALE", "1");
-            mod.addCMacro("HAVE_SETRLIMIT", "1");
-            mod.addCMacro("HAVE_SETSOCKOPT", "1");
-            mod.addCMacro("HAVE_SIGACTION", "1");
-            mod.addCMacro("HAVE_SIGINTERRUPT", "1");
-            mod.addCMacro("HAVE_SIGNAL", "1");
-            mod.addCMacro("HAVE_SIGNAL_H", "1");
-            mod.addCMacro("HAVE_SIGSETJMP", "1");
-            mod.addCMacro("HAVE_SOCKADDR_IN6_SIN6_SCOPE_ID", "1");
-            mod.addCMacro("HAVE_SOCKET", "1");
-            mod.addCMacro("HAVE_STDBOOL_H", "1");
-            mod.addCMacro("HAVE_STDINT_H", "1");
-            mod.addCMacro("HAVE_STDIO_H", "1");
-            mod.addCMacro("HAVE_STDLIB_H", "1");
-            mod.addCMacro("HAVE_STRCASECMP", "1");
-            mod.addCMacro("HAVE_STRDUP", "1");
-            mod.addCMacro("HAVE_STRERROR_R", "1");
-            mod.addCMacro("HAVE_STRING_H", "1");
-            mod.addCMacro("HAVE_STRINGS_H", "1");
-            mod.addCMacro("HAVE_STRSTR", "1");
-            mod.addCMacro("HAVE_STRTOK_R", "1");
-            mod.addCMacro("HAVE_STRTOLL", "1");
-            mod.addCMacro("HAVE_STRUCT_SOCKADDR_STORAGE", "1");
-            mod.addCMacro("HAVE_STRUCT_TIMEVAL", "1");
-            mod.addCMacro("HAVE_SYS_IOCTL_H", "1");
-            mod.addCMacro("HAVE_SYS_PARAM_H", "1");
-            mod.addCMacro("HAVE_SYS_POLL_H", "1");
-            mod.addCMacro("HAVE_SYS_RESOURCE_H", "1");
-            mod.addCMacro("HAVE_SYS_SELECT_H", "1");
-            mod.addCMacro("HAVE_SYS_SOCKET_H", "1");
-            mod.addCMacro("HAVE_SYS_STAT_H", "1");
-            mod.addCMacro("HAVE_SYS_TIME_H", "1");
-            mod.addCMacro("HAVE_SYS_TYPES_H", "1");
-            mod.addCMacro("HAVE_SYS_UIO_H", "1");
-            mod.addCMacro("HAVE_SYS_UN_H", "1");
-            mod.addCMacro("HAVE_TERMIO_H", "1");
-            mod.addCMacro("HAVE_TERMIOS_H", "1");
-            mod.addCMacro("HAVE_TIME_H", "1");
-            mod.addCMacro("HAVE_UNAME", "1");
-            mod.addCMacro("HAVE_UNISTD_H", "1");
-            mod.addCMacro("HAVE_UTIME", "1");
-            mod.addCMacro("HAVE_UTIME_H", "1");
-            mod.addCMacro("HAVE_UTIMES", "1");
-            mod.addCMacro("HAVE_VARIADIC_MACROS_C99", "1");
-            mod.addCMacro("HAVE_VARIADIC_MACROS_GCC", "1");
-            mod.addCMacro("HAVE_ZLIB_H", "1");
-            mod.addCMacro("RANDOM_FILE", "\"/dev/urandom\"");
-            mod.addCMacro("RECV_TYPE_ARG1", "int");
-            mod.addCMacro("RECV_TYPE_ARG2", "void *");
-            mod.addCMacro("RECV_TYPE_ARG3", "size_t");
-            mod.addCMacro("RECV_TYPE_ARG4", "int");
-            mod.addCMacro("RECV_TYPE_RETV", "ssize_t");
-            mod.addCMacro("SEND_QUAL_ARG2", "const");
-            mod.addCMacro("SEND_TYPE_ARG1", "int");
-            mod.addCMacro("SEND_TYPE_ARG2", "void *");
-            mod.addCMacro("SEND_TYPE_ARG3", "size_t");
-            mod.addCMacro("SEND_TYPE_ARG4", "int");
-            mod.addCMacro("SEND_TYPE_RETV", "ssize_t");
-            mod.addCMacro("SIZEOF_CURL_OFF_T", "8");
-            mod.addCMacro("SIZEOF_INT", "4");
-            mod.addCMacro("SIZEOF_LONG", "8");
-            mod.addCMacro("SIZEOF_OFF_T", "8");
-            mod.addCMacro("SIZEOF_SHORT", "2");
-            mod.addCMacro("SIZEOF_SIZE_T", "8");
-            mod.addCMacro("SIZEOF_TIME_T", "8");
-            mod.addCMacro("STDC_HEADERS", "1");
-            mod.addCMacro("TIME_WITH_SYS_TIME", "1");
-            mod.addCMacro("USE_NGHTTP2", "1");
-            mod.addCMacro("USE_MBEDTLS", "1");
-            mod.addCMacro("USE_THREADS_POSIX", "1");
-            mod.addCMacro("USE_UNIX_SOCKETS", "1");
-        }
-
-        try buildZlib(b, mod);
-        try buildMbedtls(b, mod);
-        try buildNghttp2(b, mod);
-        try buildCurl(b, mod);
-
-        switch (target.result.os.tag) {
-            .macos => {
-                // needed for proxying on mac
-                mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
-                mod.linkFramework("CoreFoundation", .{});
-                mod.linkFramework("SystemConfiguration", .{});
-            },
-            else => {},
-        }
+    switch (target.result.os.tag) {
+        .macos => {
+            // v8 has a dependency, abseil-cpp, which, on Mac, uses CoreFoundation
+            mod.addSystemFrameworkPath(.{ .cwd_relative = "/System/Library/Frameworks" });
+            mod.linkFramework("CoreFoundation", .{});
+        },
+        else => {},
     }
+
+    mod.addImport("build_config", opts.createModule());
 }
 
-fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
-    const target = mod.resolved_target.?;
+fn moduleNetSurf(b: *std.Build, step: *std.Build.Step.Compile, target: std.Build.ResolvedTarget) !void {
     const os = target.result.os.tag;
     const arch = target.result.cpu.arch;
 
@@ -411,8 +210,8 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
         "vendor/libiconv/out/{s}-{s}/lib/libiconv.a",
         .{ @tagName(os), @tagName(arch) },
     );
-    mod.addObjectFile(b.path(libiconv_lib_path));
-    mod.addIncludePath(b.path(libiconv_include_path));
+    step.addObjectFile(b.path(libiconv_lib_path));
+    step.addIncludePath(b.path(libiconv_include_path));
 
     {
         // mimalloc
@@ -422,8 +221,8 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
             mimalloc ++ "/out/{s}-{s}/lib/libmimalloc.a",
             .{ @tagName(os), @tagName(arch) },
         );
-        mod.addObjectFile(b.path(lib_path));
-        mod.addIncludePath(b.path(mimalloc ++ "/include"));
+        step.addObjectFile(b.path(lib_path));
+        step.addIncludePath(b.path(mimalloc ++ "/include"));
     }
 
     // netsurf libs
@@ -433,7 +232,7 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
         ns ++ "/out/{s}-{s}/include",
         .{ @tagName(os), @tagName(arch) },
     );
-    mod.addIncludePath(b.path(ns_include_path));
+    step.addIncludePath(b.path(ns_include_path));
 
     const libs: [4][]const u8 = .{
         "libdom",
@@ -447,379 +246,7 @@ fn moduleNetSurf(b: *Build, mod: *Build.Module) !void {
             ns ++ "/out/{s}-{s}/lib/" ++ lib ++ ".a",
             .{ @tagName(os), @tagName(arch) },
         );
-        mod.addObjectFile(b.path(ns_lib_path));
-        mod.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
+        step.addObjectFile(b.path(ns_lib_path));
+        step.addIncludePath(b.path(ns ++ "/" ++ lib ++ "/src"));
     }
 }
-
-fn buildZlib(b: *Build, m: *Build.Module) !void {
-    const zlib = b.addLibrary(.{
-        .name = "zlib",
-        .root_module = m,
-    });
-
-    const root = "vendor/zlib/";
-    zlib.installHeader(b.path(root ++ "zlib.h"), "zlib.h");
-    zlib.installHeader(b.path(root ++ "zconf.h"), "zconf.h");
-    zlib.addCSourceFiles(.{ .flags = &.{
-        "-DHAVE_SYS_TYPES_H",
-        "-DHAVE_STDINT_H",
-        "-DHAVE_STDDEF_H",
-    }, .files = &.{
-        root ++ "adler32.c",
-        root ++ "compress.c",
-        root ++ "crc32.c",
-        root ++ "deflate.c",
-        root ++ "gzclose.c",
-        root ++ "gzlib.c",
-        root ++ "gzread.c",
-        root ++ "gzwrite.c",
-        root ++ "inflate.c",
-        root ++ "infback.c",
-        root ++ "inftrees.c",
-        root ++ "inffast.c",
-        root ++ "trees.c",
-        root ++ "uncompr.c",
-        root ++ "zutil.c",
-    } });
-}
-
-fn buildMbedtls(b: *Build, m: *Build.Module) !void {
-    const mbedtls = b.addLibrary(.{
-        .name = "mbedtls",
-        .root_module = m,
-    });
-
-    const root = "vendor/mbedtls/";
-    mbedtls.addIncludePath(b.path(root ++ "include"));
-    mbedtls.addIncludePath(b.path(root ++ "library"));
-
-    mbedtls.addCSourceFiles(.{ .flags = &.{}, .files = &.{
-        root ++ "library/aes.c",
-        root ++ "library/aesni.c",
-        root ++ "library/aesce.c",
-        root ++ "library/aria.c",
-        root ++ "library/asn1parse.c",
-        root ++ "library/asn1write.c",
-        root ++ "library/base64.c",
-        root ++ "library/bignum.c",
-        root ++ "library/bignum_core.c",
-        root ++ "library/bignum_mod.c",
-        root ++ "library/bignum_mod_raw.c",
-        root ++ "library/camellia.c",
-        root ++ "library/ccm.c",
-        root ++ "library/chacha20.c",
-        root ++ "library/chachapoly.c",
-        root ++ "library/cipher.c",
-        root ++ "library/cipher_wrap.c",
-        root ++ "library/constant_time.c",
-        root ++ "library/cmac.c",
-        root ++ "library/ctr_drbg.c",
-        root ++ "library/des.c",
-        root ++ "library/dhm.c",
-        root ++ "library/ecdh.c",
-        root ++ "library/ecdsa.c",
-        root ++ "library/ecjpake.c",
-        root ++ "library/ecp.c",
-        root ++ "library/ecp_curves.c",
-        root ++ "library/entropy.c",
-        root ++ "library/entropy_poll.c",
-        root ++ "library/error.c",
-        root ++ "library/gcm.c",
-        root ++ "library/hkdf.c",
-        root ++ "library/hmac_drbg.c",
-        root ++ "library/lmots.c",
-        root ++ "library/lms.c",
-        root ++ "library/md.c",
-        root ++ "library/md5.c",
-        root ++ "library/memory_buffer_alloc.c",
-        root ++ "library/nist_kw.c",
-        root ++ "library/oid.c",
-        root ++ "library/padlock.c",
-        root ++ "library/pem.c",
-        root ++ "library/pk.c",
-        root ++ "library/pk_ecc.c",
-        root ++ "library/pk_wrap.c",
-        root ++ "library/pkcs12.c",
-        root ++ "library/pkcs5.c",
-        root ++ "library/pkparse.c",
-        root ++ "library/pkwrite.c",
-        root ++ "library/platform.c",
-        root ++ "library/platform_util.c",
-        root ++ "library/poly1305.c",
-        root ++ "library/psa_crypto.c",
-        root ++ "library/psa_crypto_aead.c",
-        root ++ "library/psa_crypto_cipher.c",
-        root ++ "library/psa_crypto_client.c",
-        root ++ "library/psa_crypto_ffdh.c",
-        root ++ "library/psa_crypto_driver_wrappers_no_static.c",
-        root ++ "library/psa_crypto_ecp.c",
-        root ++ "library/psa_crypto_hash.c",
-        root ++ "library/psa_crypto_mac.c",
-        root ++ "library/psa_crypto_pake.c",
-        root ++ "library/psa_crypto_rsa.c",
-        root ++ "library/psa_crypto_se.c",
-        root ++ "library/psa_crypto_slot_management.c",
-        root ++ "library/psa_crypto_storage.c",
-        root ++ "library/psa_its_file.c",
-        root ++ "library/psa_util.c",
-        root ++ "library/ripemd160.c",
-        root ++ "library/rsa.c",
-        root ++ "library/rsa_alt_helpers.c",
-        root ++ "library/sha1.c",
-        root ++ "library/sha3.c",
-        root ++ "library/sha256.c",
-        root ++ "library/sha512.c",
-        root ++ "library/threading.c",
-        root ++ "library/timing.c",
-        root ++ "library/version.c",
-        root ++ "library/version_features.c",
-        root ++ "library/pkcs7.c",
-        root ++ "library/x509.c",
-        root ++ "library/x509_create.c",
-        root ++ "library/x509_crl.c",
-        root ++ "library/x509_crt.c",
-        root ++ "library/x509_csr.c",
-        root ++ "library/x509write.c",
-        root ++ "library/x509write_crt.c",
-        root ++ "library/x509write_csr.c",
-        root ++ "library/debug.c",
-        root ++ "library/mps_reader.c",
-        root ++ "library/mps_trace.c",
-        root ++ "library/net_sockets.c",
-        root ++ "library/ssl_cache.c",
-        root ++ "library/ssl_ciphersuites.c",
-        root ++ "library/ssl_client.c",
-        root ++ "library/ssl_cookie.c",
-        root ++ "library/ssl_debug_helpers_generated.c",
-        root ++ "library/ssl_msg.c",
-        root ++ "library/ssl_ticket.c",
-        root ++ "library/ssl_tls.c",
-        root ++ "library/ssl_tls12_client.c",
-        root ++ "library/ssl_tls12_server.c",
-        root ++ "library/ssl_tls13_keys.c",
-        root ++ "library/ssl_tls13_server.c",
-        root ++ "library/ssl_tls13_client.c",
-        root ++ "library/ssl_tls13_generic.c",
-    } });
-}
-
-fn buildNghttp2(b: *Build, m: *Build.Module) !void {
-    const nghttp2 = b.addLibrary(.{
-        .name = "nghttp2",
-        .root_module = m,
-    });
-
-    const root = "vendor/nghttp2/";
-    nghttp2.addIncludePath(b.path(root ++ "lib"));
-    nghttp2.addIncludePath(b.path(root ++ "lib/includes"));
-    nghttp2.addCSourceFiles(.{ .flags = &.{
-        "-DNGHTTP2_STATICLIB",
-        "-DHAVE_NETINET_IN",
-        "-DHAVE_TIME_H",
-    }, .files = &.{
-        root ++ "lib/sfparse.c",
-        root ++ "lib/nghttp2_alpn.c",
-        root ++ "lib/nghttp2_buf.c",
-        root ++ "lib/nghttp2_callbacks.c",
-        root ++ "lib/nghttp2_debug.c",
-        root ++ "lib/nghttp2_extpri.c",
-        root ++ "lib/nghttp2_frame.c",
-        root ++ "lib/nghttp2_hd.c",
-        root ++ "lib/nghttp2_hd_huffman.c",
-        root ++ "lib/nghttp2_hd_huffman_data.c",
-        root ++ "lib/nghttp2_helper.c",
-        root ++ "lib/nghttp2_http.c",
-        root ++ "lib/nghttp2_map.c",
-        root ++ "lib/nghttp2_mem.c",
-        root ++ "lib/nghttp2_option.c",
-        root ++ "lib/nghttp2_outbound_item.c",
-        root ++ "lib/nghttp2_pq.c",
-        root ++ "lib/nghttp2_priority_spec.c",
-        root ++ "lib/nghttp2_queue.c",
-        root ++ "lib/nghttp2_rcbuf.c",
-        root ++ "lib/nghttp2_session.c",
-        root ++ "lib/nghttp2_stream.c",
-        root ++ "lib/nghttp2_submit.c",
-        root ++ "lib/nghttp2_version.c",
-        root ++ "lib/nghttp2_ratelim.c",
-        root ++ "lib/nghttp2_time.c",
-    } });
-}
-
-fn buildCurl(b: *Build, m: *Build.Module) !void {
-    const curl = b.addLibrary(.{
-        .name = "curl",
-        .root_module = m,
-    });
-
-    const root = "vendor/curl/";
-
-    curl.addIncludePath(b.path(root ++ "lib"));
-    curl.addIncludePath(b.path(root ++ "include"));
-    curl.addCSourceFiles(.{
-        .flags = &.{},
-        .files = &.{
-            root ++ "lib/altsvc.c",
-            root ++ "lib/amigaos.c",
-            root ++ "lib/asyn-ares.c",
-            root ++ "lib/asyn-base.c",
-            root ++ "lib/asyn-thrdd.c",
-            root ++ "lib/bufq.c",
-            root ++ "lib/bufref.c",
-            root ++ "lib/cf-h1-proxy.c",
-            root ++ "lib/cf-h2-proxy.c",
-            root ++ "lib/cf-haproxy.c",
-            root ++ "lib/cf-https-connect.c",
-            root ++ "lib/cf-socket.c",
-            root ++ "lib/cfilters.c",
-            root ++ "lib/conncache.c",
-            root ++ "lib/connect.c",
-            root ++ "lib/content_encoding.c",
-            root ++ "lib/cookie.c",
-            root ++ "lib/cshutdn.c",
-            root ++ "lib/curl_addrinfo.c",
-            root ++ "lib/curl_des.c",
-            root ++ "lib/curl_endian.c",
-            root ++ "lib/curl_fnmatch.c",
-            root ++ "lib/curl_get_line.c",
-            root ++ "lib/curl_gethostname.c",
-            root ++ "lib/curl_gssapi.c",
-            root ++ "lib/curl_memrchr.c",
-            root ++ "lib/curl_ntlm_core.c",
-            root ++ "lib/curl_range.c",
-            root ++ "lib/curl_rtmp.c",
-            root ++ "lib/curl_sasl.c",
-            root ++ "lib/curl_sha512_256.c",
-            root ++ "lib/curl_sspi.c",
-            root ++ "lib/curl_threads.c",
-            root ++ "lib/curl_trc.c",
-            root ++ "lib/cw-out.c",
-            root ++ "lib/cw-pause.c",
-            root ++ "lib/dict.c",
-            root ++ "lib/doh.c",
-            root ++ "lib/dynhds.c",
-            root ++ "lib/easy.c",
-            root ++ "lib/easygetopt.c",
-            root ++ "lib/easyoptions.c",
-            root ++ "lib/escape.c",
-            root ++ "lib/fake_addrinfo.c",
-            root ++ "lib/file.c",
-            root ++ "lib/fileinfo.c",
-            root ++ "lib/fopen.c",
-            root ++ "lib/formdata.c",
-            root ++ "lib/ftp.c",
-            root ++ "lib/ftplistparser.c",
-            root ++ "lib/getenv.c",
-            root ++ "lib/getinfo.c",
-            root ++ "lib/gopher.c",
-            root ++ "lib/hash.c",
-            root ++ "lib/headers.c",
-            root ++ "lib/hmac.c",
-            root ++ "lib/hostip.c",
-            root ++ "lib/hostip4.c",
-            root ++ "lib/hostip6.c",
-            root ++ "lib/hsts.c",
-            root ++ "lib/http.c",
-            root ++ "lib/http1.c",
-            root ++ "lib/http2.c",
-            root ++ "lib/http_aws_sigv4.c",
-            root ++ "lib/http_chunks.c",
-            root ++ "lib/http_digest.c",
-            root ++ "lib/http_negotiate.c",
-            root ++ "lib/http_ntlm.c",
-            root ++ "lib/http_proxy.c",
-            root ++ "lib/httpsrr.c",
-            root ++ "lib/idn.c",
-            root ++ "lib/if2ip.c",
-            root ++ "lib/imap.c",
-            root ++ "lib/krb5.c",
-            root ++ "lib/ldap.c",
-            root ++ "lib/llist.c",
-            root ++ "lib/macos.c",
-            root ++ "lib/md4.c",
-            root ++ "lib/md5.c",
-            root ++ "lib/memdebug.c",
-            root ++ "lib/mime.c",
-            root ++ "lib/mprintf.c",
-            root ++ "lib/mqtt.c",
-            root ++ "lib/multi.c",
-            root ++ "lib/multi_ev.c",
-            root ++ "lib/netrc.c",
-            root ++ "lib/noproxy.c",
-            root ++ "lib/openldap.c",
-            root ++ "lib/parsedate.c",
-            root ++ "lib/pingpong.c",
-            root ++ "lib/pop3.c",
-            root ++ "lib/progress.c",
-            root ++ "lib/psl.c",
-            root ++ "lib/rand.c",
-            root ++ "lib/rename.c",
-            root ++ "lib/request.c",
-            root ++ "lib/rtsp.c",
-            root ++ "lib/select.c",
-            root ++ "lib/sendf.c",
-            root ++ "lib/setopt.c",
-            root ++ "lib/sha256.c",
-            root ++ "lib/share.c",
-            root ++ "lib/slist.c",
-            root ++ "lib/smb.c",
-            root ++ "lib/smtp.c",
-            root ++ "lib/socketpair.c",
-            root ++ "lib/socks.c",
-            root ++ "lib/socks_gssapi.c",
-            root ++ "lib/socks_sspi.c",
-            root ++ "lib/speedcheck.c",
-            root ++ "lib/splay.c",
-            root ++ "lib/strcase.c",
-            root ++ "lib/strdup.c",
-            root ++ "lib/strequal.c",
-            root ++ "lib/strerror.c",
-            root ++ "lib/system_win32.c",
-            root ++ "lib/telnet.c",
-            root ++ "lib/tftp.c",
-            root ++ "lib/transfer.c",
-            root ++ "lib/uint-bset.c",
-            root ++ "lib/uint-hash.c",
-            root ++ "lib/uint-spbset.c",
-            root ++ "lib/uint-table.c",
-            root ++ "lib/url.c",
-            root ++ "lib/urlapi.c",
-            root ++ "lib/version.c",
-            root ++ "lib/ws.c",
-            root ++ "lib/curlx/base64.c",
-            root ++ "lib/curlx/dynbuf.c",
-            root ++ "lib/curlx/inet_ntop.c",
-            root ++ "lib/curlx/nonblock.c",
-            root ++ "lib/curlx/strparse.c",
-            root ++ "lib/curlx/timediff.c",
-            root ++ "lib/curlx/timeval.c",
-            root ++ "lib/curlx/wait.c",
-            root ++ "lib/curlx/warnless.c",
-            root ++ "lib/vquic/curl_ngtcp2.c",
-            root ++ "lib/vquic/curl_osslq.c",
-            root ++ "lib/vquic/curl_quiche.c",
-            root ++ "lib/vquic/vquic.c",
-            root ++ "lib/vquic/vquic-tls.c",
-            root ++ "lib/vauth/cleartext.c",
-            root ++ "lib/vauth/cram.c",
-            root ++ "lib/vauth/digest.c",
-            root ++ "lib/vauth/digest_sspi.c",
-            root ++ "lib/vauth/gsasl.c",
-            root ++ "lib/vauth/krb5_gssapi.c",
-            root ++ "lib/vauth/krb5_sspi.c",
-            root ++ "lib/vauth/ntlm.c",
-            root ++ "lib/vauth/ntlm_sspi.c",
-            root ++ "lib/vauth/oauth2.c",
-            root ++ "lib/vauth/spnego_gssapi.c",
-            root ++ "lib/vauth/spnego_sspi.c",
-            root ++ "lib/vauth/vauth.c",
-            root ++ "lib/vtls/cipher_suite.c",
-            root ++ "lib/vtls/mbedtls.c",
-            root ++ "lib/vtls/mbedtls_threadlock.c",
-            root ++ "lib/vtls/vtls.c",
-            root ++ "lib/vtls/vtls_scache.c",
-            root ++ "lib/vtls/x509asn1.c",
-        },
-    });
-}

build.zig.zon

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

flake.lock

@@ -1,21 +1,5 @@
 {
   "nodes": {
-    "flake-compat": {
-      "flake": false,
-      "locked": {
-        "lastModified": 1696426674,
-        "narHash": "sha256-kvjfFW7WAETZlt09AgDn1MrtKzP7t90Vf7vypd3OL1U=",
-        "owner": "edolstra",
-        "repo": "flake-compat",
-        "rev": "0f9255e01c2351cc7d116c072cb317785dd33b33",
-        "type": "github"
-      },
-      "original": {
-        "owner": "edolstra",
-        "repo": "flake-compat",
-        "type": "github"
-      }
-    },
     "flake-utils": {
       "inputs": {
         "systems": "systems"
@@ -34,52 +18,13 @@
         "type": "github"
       }
     },
-    "flake-utils_2": {
-      "inputs": {
-        "systems": "systems_2"
-      },
-      "locked": {
-        "lastModified": 1705309234,
-        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
-        "type": "github"
-      },
-      "original": {
-        "owner": "numtide",
-        "repo": "flake-utils",
-        "type": "github"
-      }
-    },
-    "gitignore": {
-      "inputs": {
-        "nixpkgs": [
-          "zlsPkg",
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1709087332,
-        "narHash": "sha256-HG2cCnktfHsKV0s4XW83gU3F57gaTljL9KNSuG6bnQs=",
-        "owner": "hercules-ci",
-        "repo": "gitignore.nix",
-        "rev": "637db329424fd7e46cf4185293b9cc8c88c95394",
-        "type": "github"
-      },
-      "original": {
-        "owner": "hercules-ci",
-        "repo": "gitignore.nix",
-        "type": "github"
-      }
-    },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1756822655,
-        "narHash": "sha256-xQAk8xLy7srAkR5NMZFsQFioL02iTHuuEIs3ohGpgdk=",
+        "lastModified": 1748964450,
+        "narHash": "sha256-ZouDiXkUk8mkMnah10QcoQ9Nu6UW6AFAHLScS3En6aI=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "4bdac60bfe32c41103ae500ddf894c258291dd61",
+        "rev": "9ff500cd9e123f46c55855eca64beccead29b152",
         "type": "github"
       },
       "original": {
@@ -92,9 +37,7 @@
     "root": {
       "inputs": {
         "flake-utils": "flake-utils",
-        "nixpkgs": "nixpkgs",
-        "zigPkgs": "zigPkgs",
-        "zlsPkg": "zlsPkg"
+        "nixpkgs": "nixpkgs"
       }
     },
     "systems": {
@@ -111,68 +54,6 @@
         "repo": "default",
         "type": "github"
       }
-    },
-    "systems_2": {
-      "locked": {
-        "lastModified": 1681028828,
-        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
-        "owner": "nix-systems",
-        "repo": "default",
-        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
-        "type": "github"
-      },
-      "original": {
-        "owner": "nix-systems",
-        "repo": "default",
-        "type": "github"
-      }
-    },
-    "zigPkgs": {
-      "inputs": {
-        "flake-compat": "flake-compat",
-        "flake-utils": "flake-utils_2",
-        "nixpkgs": [
-          "nixpkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1756555914,
-        "narHash": "sha256-7yoSPIVEuL+3Wzf6e7NHuW3zmruHizRrYhGerjRHTLI=",
-        "owner": "mitchellh",
-        "repo": "zig-overlay",
-        "rev": "d0df3a2fd0f11134409d6d5ea0e510e5e477f7d6",
-        "type": "github"
-      },
-      "original": {
-        "owner": "mitchellh",
-        "repo": "zig-overlay",
-        "type": "github"
-      }
-    },
-    "zlsPkg": {
-      "inputs": {
-        "gitignore": "gitignore",
-        "nixpkgs": [
-          "nixpkgs"
-        ],
-        "zig-overlay": [
-          "zigPkgs"
-        ]
-      },
-      "locked": {
-        "lastModified": 1756048867,
-        "narHash": "sha256-GFzSHUljcxy7sM1PaabbkQUdUnLwpherekPWJFxXtnk=",
-        "owner": "zigtools",
-        "repo": "zls",
-        "rev": "ce6c8f02c78e622421cfc2405c67c5222819ec03",
-        "type": "github"
-      },
-      "original": {
-        "owner": "zigtools",
-        "ref": "0.15.0",
-        "repo": "zls",
-        "type": "github"
-      }
     }
   },
   "root": "root",

flake.nix

@@ -3,37 +3,20 @@
 
   inputs = {
     nixpkgs.url = "github:nixos/nixpkgs/release-25.05";
-
-    zigPkgs.url = "github:mitchellh/zig-overlay";
-    zigPkgs.inputs.nixpkgs.follows = "nixpkgs";
-
-    zlsPkg.url = "github:zigtools/zls/0.15.0";
-    zlsPkg.inputs.zig-overlay.follows = "zigPkgs";
-    zlsPkg.inputs.nixpkgs.follows = "nixpkgs";
-
     flake-utils.url = "github:numtide/flake-utils";
   };
 
   outputs =
     {
       nixpkgs,
-      zigPkgs,
-      zlsPkg,
       flake-utils,
       ...
     }:
     flake-utils.lib.eachDefaultSystem (
       system:
       let
-        overlays = [
-          (final: prev: {
-            zigpkgs = zigPkgs.packages.${prev.system};
-            zls = zlsPkg.packages.${prev.system}.default;
-          })
-        ];
-
         pkgs = import nixpkgs {
-          inherit system overlays;
+          inherit system;
         };
 
         # We need crtbeginS.o for building.
@@ -49,7 +32,7 @@
           targetPkgs =
             pkgs: with pkgs; [
               # Build Tools
-              zigpkgs."0.15.1"
+              zig
               zls
               python3
               pkg-config
@@ -66,7 +49,6 @@
               glib.dev
               glibc.dev
               zlib
-              zlib.dev
             ];
         };
       in

src/TestHTTPServer.zig

@@ -1,117 +0,0 @@
-const std = @import("std");
-
-const TestHTTPServer = @This();
-
-shutdown: bool,
-listener: ?std.net.Server,
-handler: Handler,
-
-const Handler = *const fn (req: *std.http.Server.Request) anyerror!void;
-
-pub fn init(handler: Handler) TestHTTPServer {
-    return .{
-        .shutdown = true,
-        .listener = null,
-        .handler = handler,
-    };
-}
-
-pub fn deinit(self: *TestHTTPServer) void {
-    self.shutdown = true;
-    if (self.listener) |*listener| {
-        listener.deinit();
-    }
-}
-
-pub fn run(self: *TestHTTPServer, wg: *std.Thread.WaitGroup) !void {
-    const address = try std.net.Address.parseIp("127.0.0.1", 9582);
-
-    self.listener = try address.listen(.{ .reuse_address = true });
-    var listener = &self.listener.?;
-
-    wg.finish();
-
-    while (true) {
-        const conn = listener.accept() catch |err| {
-            if (self.shutdown) {
-                return;
-            }
-            return err;
-        };
-        const thrd = try std.Thread.spawn(.{}, handleConnection, .{ self, conn });
-        thrd.detach();
-    }
-}
-
-fn handleConnection(self: *TestHTTPServer, conn: std.net.Server.Connection) !void {
-    defer conn.stream.close();
-
-    var req_buf: [2048]u8 = undefined;
-    var conn_reader = conn.stream.reader(&req_buf);
-    var conn_writer = conn.stream.writer(&req_buf);
-
-    var http_server = std.http.Server.init(conn_reader.interface(), &conn_writer.interface);
-
-    while (true) {
-        var req = http_server.receiveHead() catch |err| switch (err) {
-            error.ReadFailed => continue,
-            error.HttpConnectionClosing => continue,
-            else => {
-                std.debug.print("Test HTTP Server error: {}\n", .{err});
-                return err;
-            },
-        };
-        self.handler(&req) catch |err| {
-            std.debug.print("test http error '{s}': {}\n", .{ req.head.target, err });
-            try req.respond("server error", .{ .status = .internal_server_error });
-            return;
-        };
-    }
-}
-
-pub fn sendFile(req: *std.http.Server.Request, file_path: []const u8) !void {
-    var file = std.fs.cwd().openFile(file_path, .{}) catch |err| switch (err) {
-        error.FileNotFound => return req.respond("server error", .{ .status = .not_found }),
-        else => return err,
-    };
-
-    const stat = try file.stat();
-    var send_buffer: [4096]u8 = undefined;
-
-    var res = try req.respondStreaming(&send_buffer, .{
-        .content_length = stat.size,
-        .respond_options = .{
-            .extra_headers = &.{
-                .{ .name = "content-type", .value = getContentType(file_path) },
-            },
-        },
-    });
-
-    var read_buffer: [4096]u8 = undefined;
-    var reader = file.reader(&read_buffer);
-    _ = try res.writer.sendFileAll(&reader, .unlimited);
-    try res.writer.flush();
-    try res.end();
-}
-
-fn getContentType(file_path: []const u8) []const u8 {
-    if (std.mem.endsWith(u8, file_path, ".js")) {
-        return "application/json";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".html")) {
-        return "text/html";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".htm")) {
-        return "text/html";
-    }
-
-    if (std.mem.endsWith(u8, file_path, ".xml")) {
-        // some wpt tests do this
-        return "text/xml";
-    }
-
-    std.debug.print("TestHTTPServer asked to serve an unknown file type: {s}\n", .{file_path});
-    return "text/html";
-}

src/app.zig

@@ -1,22 +1,20 @@
 const std = @import("std");
-
 const Allocator = std.mem.Allocator;
 
 const log = @import("log.zig");
-const Http = @import("http/Http.zig");
-const Platform = @import("runtime/js.zig").Platform;
-
+const Loop = @import("runtime/loop.zig").Loop;
+const HttpClient = @import("http/client.zig").Client;
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
 const Notification = @import("notification.zig").Notification;
 
 // Container for global state / objects that various parts of the system
 // might need.
 pub const App = struct {
-    http: Http,
+    loop: *Loop,
     config: Config,
-    platform: Platform,
     allocator: Allocator,
     telemetry: Telemetry,
+    http_client: HttpClient,
     app_dir_path: ?[]const u8,
     notification: *Notification,
 
@@ -30,50 +28,38 @@ pub const App = struct {
     pub const Config = struct {
         run_mode: RunMode,
         tls_verify_host: bool = true,
-        http_proxy: ?[:0]const u8 = null,
-        proxy_bearer_token: ?[:0]const u8 = null,
-        http_timeout_ms: ?u31 = null,
-        http_connect_timeout_ms: ?u31 = null,
-        http_max_host_open: ?u8 = null,
-        http_max_concurrent: ?u8 = null,
+        http_proxy: ?std.Uri = null,
     };
 
     pub fn init(allocator: Allocator, config: Config) !*App {
         const app = try allocator.create(App);
         errdefer allocator.destroy(app);
 
+        const loop = try allocator.create(Loop);
+        errdefer allocator.destroy(loop);
+
+        loop.* = try Loop.init(allocator);
+        errdefer loop.deinit();
+
         const notification = try Notification.init(allocator, null);
         errdefer notification.deinit();
 
-        var http = try Http.init(allocator, .{
-            .max_host_open = config.http_max_host_open orelse 4,
-            .max_concurrent = config.http_max_concurrent orelse 10,
-            .timeout_ms = config.http_timeout_ms orelse 5000,
-            .connect_timeout_ms = config.http_connect_timeout_ms orelse 0,
-            .http_proxy = config.http_proxy,
-            .tls_verify_host = config.tls_verify_host,
-            .proxy_bearer_token = config.proxy_bearer_token,
-        });
-        errdefer http.deinit();
-
-        const platform = try Platform.init();
-        errdefer platform.deinit();
-
         const app_dir_path = getAndMakeAppDir(allocator);
 
         app.* = .{
-            .http = http,
+            .loop = loop,
             .allocator = allocator,
             .telemetry = undefined,
-            .platform = platform,
             .app_dir_path = app_dir_path,
             .notification = notification,
+            .http_client = try HttpClient.init(allocator, .{
+                .max_concurrent = 3,
+                .http_proxy = config.http_proxy,
+                .tls_verify_host = config.tls_verify_host,
+            }),
             .config = config,
         };
-
-        app.telemetry = try Telemetry.init(app, config.run_mode);
-        errdefer app.telemetry.deinit();
-
+        app.telemetry = Telemetry.init(app, config.run_mode);
         try app.telemetry.register(app.notification);
 
         return app;
@@ -85,9 +71,10 @@ pub const App = struct {
             allocator.free(app_dir_path);
         }
         self.telemetry.deinit();
+        self.loop.deinit();
+        allocator.destroy(self.loop);
+        self.http_client.deinit();
         self.notification.deinit();
-        self.http.deinit();
-        self.platform.deinit();
         allocator.destroy(self);
     }
 };

src/browser/DataURI.zig

@@ -1,52 +0,0 @@
-const std = @import("std");
-const Allocator = std.mem.Allocator;
-
-// Parses data:[<media-type>][;base64],<data>
-pub fn parse(allocator: Allocator, src: []const u8) !?[]const u8 {
-    if (!std.mem.startsWith(u8, src, "data:")) {
-        return null;
-    }
-
-    const uri = src[5..];
-    const data_starts = std.mem.indexOfScalar(u8, uri, ',') orelse return null;
-
-    var data = uri[data_starts + 1 ..];
-
-    // Extract the encoding.
-    const metadata = uri[0..data_starts];
-    if (std.mem.endsWith(u8, metadata, ";base64")) {
-        const decoder = std.base64.standard.Decoder;
-        const decoded_size = try decoder.calcSizeForSlice(data);
-
-        const buffer = try allocator.alloc(u8, decoded_size);
-        errdefer allocator.free(buffer);
-
-        try decoder.decode(buffer, data);
-        data = buffer;
-    }
-
-    return data;
-}
-
-const testing = @import("../testing.zig");
-test "DataURI: parse valid" {
-    try test_valid("data:text/javascript; charset=utf-8;base64,Zm9v", "foo");
-    try test_valid("data:text/javascript; charset=utf-8;,foo", "foo");
-    try test_valid("data:,foo", "foo");
-}
-
-test "DataURI: parse invalid" {
-    try test_cannot_parse("atad:,foo");
-    try test_cannot_parse("data:foo");
-    try test_cannot_parse("data:");
-}
-
-fn test_valid(uri: []const u8, expected: []const u8) !void {
-    defer testing.reset();
-    const data_uri = try parse(testing.arena_allocator, uri) orelse return error.TestFailed;
-    try testing.expectEqual(expected, data_uri);
-}
-
-fn test_cannot_parse(uri: []const u8) !void {
-    try testing.expectEqual(null, parse(undefined, uri));
-}

src/browser/Scheduler.zig

@@ -1,174 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../log.zig");
-const Allocator = std.mem.Allocator;
-
-const Scheduler = @This();
-
-high_priority: Queue,
-
-// For repeating tasks. We only want to run these if there are other things to
-// do. We don't, for example, want a window.setInterval or the page.runMicrotasks
-// to block the page.wait.
-low_priority: Queue,
-
-// we expect allocator to be the page arena, hence we never call high_priority.deinit
-pub fn init(allocator: Allocator) Scheduler {
-    return .{
-        .high_priority = Queue.init(allocator, {}),
-        .low_priority = Queue.init(allocator, {}),
-    };
-}
-
-pub fn reset(self: *Scheduler) void {
-    self.high_priority.clearRetainingCapacity();
-    self.low_priority.clearRetainingCapacity();
-}
-
-const AddOpts = struct {
-    name: []const u8 = "",
-    low_priority: bool = false,
-};
-pub fn add(self: *Scheduler, ctx: *anyopaque, func: Task.Func, ms: u32, opts: AddOpts) !void {
-    var low_priority = opts.low_priority;
-    if (ms > 5_000) {
-        // we don't want tasks in the far future to block page.wait from
-        // completing. However, if page.wait is called multiple times (maybe
-        // a CDP driver is wait for something to happen), then we do want
-        // to [eventually] run these when their time is up.
-        low_priority = true;
-    }
-
-    var q = if (low_priority) &self.low_priority else &self.high_priority;
-    return q.add(.{
-        .ms = std.time.milliTimestamp() + ms,
-        .ctx = ctx,
-        .func = func,
-        .name = opts.name,
-    });
-}
-
-pub fn runHighPriority(self: *Scheduler) !?i32 {
-    return self.runQueue(&self.high_priority);
-}
-
-pub fn runLowPriority(self: *Scheduler) !?i32 {
-    return self.runQueue(&self.low_priority);
-}
-
-fn runQueue(self: *Scheduler, queue: *Queue) !?i32 {
-    // this is O(1)
-    if (queue.count() == 0) {
-        return null;
-    }
-
-    const now = std.time.milliTimestamp();
-
-    var next = queue.peek();
-    while (next) |task| {
-        const time_to_next = task.ms - now;
-        if (time_to_next > 0) {
-            // @intCast is petty safe since we limit tasks to just 5 seconds
-            // in the future
-            return @intCast(time_to_next);
-        }
-
-        if (task.func(task.ctx)) |repeat_delay| {
-            // if we do (now + 0) then our WHILE loop will run endlessly.
-            // no task should ever return 0
-            std.debug.assert(repeat_delay != 0);
-
-            var copy = task;
-            copy.ms = now + repeat_delay;
-            try self.low_priority.add(copy);
-        }
-        _ = queue.remove();
-        next = queue.peek();
-    }
-    return null;
-}
-
-const Task = struct {
-    ms: i64,
-    func: Func,
-    ctx: *anyopaque,
-    name: []const u8,
-
-    const Func = *const fn (ctx: *anyopaque) ?u32;
-};
-
-const Queue = std.PriorityQueue(Task, void, struct {
-    fn compare(_: void, a: Task, b: Task) std.math.Order {
-        return std.math.order(a.ms, b.ms);
-    }
-}.compare);
-
-const testing = @import("../testing.zig");
-test "Scheduler" {
-    defer testing.reset();
-
-    var task = TestTask{ .allocator = testing.arena_allocator };
-
-    var s = Scheduler.init(testing.arena_allocator);
-    try testing.expectEqual(null, s.runHighPriority());
-    try testing.expectEqual(0, task.calls.items.len);
-
-    try s.add(&task, TestTask.run1, 3, .{});
-
-    try testing.expectDelta(3, try s.runHighPriority(), 1);
-    try testing.expectEqual(0, task.calls.items.len);
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectEqual(null, s.runHighPriority());
-    try testing.expectEqualSlices(u32, &.{1}, task.calls.items);
-
-    try s.add(&task, TestTask.run2, 3, .{});
-    try s.add(&task, TestTask.run1, 2, .{});
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectDelta(null, try s.runHighPriority(), 1);
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2 }, task.calls.items);
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    // won't run low_priority
-    try testing.expectEqual(null, try s.runHighPriority());
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2 }, task.calls.items);
-
-    //runs low_priority
-    try testing.expectDelta(2, try s.runLowPriority(), 1);
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2, 2 }, task.calls.items);
-}
-
-const TestTask = struct {
-    allocator: Allocator,
-    calls: std.ArrayListUnmanaged(u32) = .{},
-
-    fn run1(ctx: *anyopaque) ?u32 {
-        var self: *TestTask = @ptrCast(@alignCast(ctx));
-        self.calls.append(self.allocator, 1) catch unreachable;
-        return null;
-    }
-
-    fn run2(ctx: *anyopaque) ?u32 {
-        var self: *TestTask = @ptrCast(@alignCast(ctx));
-        self.calls.append(self.allocator, 2) catch unreachable;
-        return 2;
-    }
-};

src/browser/ScriptManager.zig

@@ -1,835 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const log = @import("../log.zig");
-const parser = @import("netsurf.zig");
-
-const Env = @import("env.zig").Env;
-const Page = @import("page.zig").Page;
-const DataURI = @import("DataURI.zig");
-const Http = @import("../http/Http.zig");
-const Browser = @import("browser.zig").Browser;
-const URL = @import("../url.zig").URL;
-
-const Allocator = std.mem.Allocator;
-const ArrayListUnmanaged = std.ArrayListUnmanaged;
-
-const ScriptManager = @This();
-
-page: *Page,
-
-// used to prevent recursive evalutaion
-is_evaluating: bool,
-
-// used to prevent executing scripts while we're doing a blocking load
-is_blocking: bool = false,
-
-// Only once this is true can deferred scripts be run
-static_scripts_done: bool,
-
-// List of async scripts. We don't care about the execution order of these, but
-// on shutdown/abort, we need to cleanup any pending ones.
-asyncs: OrderList,
-
-// When an async script is ready to be evaluated, it's moved from asyncs to
-// this list. You might think we can evaluate an async script as soon as it's
-// done, but we can only evaluate scripts when `is_blocking == false`. So this
-// becomes a list of scripts to execute on the next evaluate().
-asyncs_ready: OrderList,
-
-// Normal scripts (non-deferred & non-async). These must be executed in order
-scripts: OrderList,
-
-// List of deferred scripts. These must be executed in order, but only once
-// dom_loaded == true,
-deferreds: OrderList,
-
-shutdown: bool = false,
-
-client: *Http.Client,
-allocator: Allocator,
-buffer_pool: BufferPool,
-script_pool: std.heap.MemoryPool(PendingScript),
-
-const OrderList = std.DoublyLinkedList;
-
-pub fn init(browser: *Browser, page: *Page) ScriptManager {
-    // page isn't fully initialized, we can setup our reference, but that's it.
-    const allocator = browser.allocator;
-    return .{
-        .page = page,
-        .asyncs = .{},
-        .scripts = .{},
-        .deferreds = .{},
-        .asyncs_ready = .{},
-        .is_evaluating = false,
-        .allocator = allocator,
-        .client = browser.http_client,
-        .static_scripts_done = false,
-        .buffer_pool = BufferPool.init(allocator, 5),
-        .script_pool = std.heap.MemoryPool(PendingScript).init(allocator),
-    };
-}
-
-pub fn deinit(self: *ScriptManager) void {
-    self.reset();
-    self.buffer_pool.deinit();
-    self.script_pool.deinit();
-}
-
-pub fn reset(self: *ScriptManager) void {
-    self.clearList(&self.asyncs);
-    self.clearList(&self.scripts);
-    self.clearList(&self.deferreds);
-    self.clearList(&self.asyncs_ready);
-    self.static_scripts_done = false;
-}
-
-fn clearList(_: *const ScriptManager, list: *OrderList) void {
-    while (list.first) |node| {
-        const pending_script: *PendingScript = @fieldParentPtr("node", node);
-        // this removes it from the list
-        pending_script.deinit();
-    }
-    std.debug.assert(list.first == null);
-}
-
-pub fn addFromElement(self: *ScriptManager, element: *parser.Element) !void {
-    if (try parser.elementGetAttribute(element, "nomodule") != null) {
-        // these scripts should only be loaded if we don't support modules
-        // but since we do support modules, we can just skip them.
-        return;
-    }
-
-    // If a script tag gets dynamically created and added to the dom:
-    //    document.getElementsByTagName('head')[0].appendChild(script)
-    // that script tag will immediately get executed by our scriptAddedCallback.
-    // However, if the location where the script tag is inserted happens to be
-    // below where processHTMLDoc currently is, then we'll re-run that same script
-    // again in processHTMLDoc. This flag is used to let us know if a specific
-    // <script> has already been processed.
-    if (try parser.scriptGetProcessed(@ptrCast(element))) {
-        return;
-    }
-    try parser.scriptSetProcessed(@ptrCast(element), true);
-
-    const kind: Script.Kind = blk: {
-        const script_type = try parser.elementGetAttribute(element, "type") orelse break :blk .javascript;
-        if (script_type.len == 0) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "application/javascript")) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "text/javascript")) {
-            break :blk .javascript;
-        }
-        if (std.ascii.eqlIgnoreCase(script_type, "module")) {
-            break :blk .module;
-        }
-
-        // "type" could be anything, but only the above are ones we need to process.
-        // Common other ones are application/json, application/ld+json, text/template
-
-        return;
-    };
-
-    const page = self.page;
-    var source: Script.Source = undefined;
-    var remote_url: ?[:0]const u8 = null;
-    if (try parser.elementGetAttribute(element, "src")) |src| {
-        if (try DataURI.parse(page.arena, src)) |data_uri| {
-            source = .{ .@"inline" = data_uri };
-        }
-        remote_url = try URL.stitch(page.arena, src, page.url.raw, .{ .null_terminated = true });
-        source = .{ .remote = .{} };
-    } else {
-        const inline_source = try parser.nodeTextContent(@ptrCast(element)) orelse return;
-        source = .{ .@"inline" = inline_source };
-    }
-
-    var script = Script{
-        .kind = kind,
-        .element = element,
-        .source = source,
-        .url = remote_url orelse page.url.raw,
-        .is_defer = if (remote_url == null) false else try parser.elementGetAttribute(element, "defer") != null,
-        .is_async = if (remote_url == null) false else try parser.elementGetAttribute(element, "async") != null,
-    };
-
-    if (source == .@"inline" and self.scripts.first == null) {
-        // inline script with no pending scripts, execute it immediately.
-        // (if there is a pending script, then we cannot execute this immediately
-        // as it needs to best executed in order)
-        return script.eval(page);
-    }
-
-    const pending_script = try self.script_pool.create();
-    errdefer self.script_pool.destroy(pending_script);
-    pending_script.* = .{
-        .script = script,
-        .complete = false,
-        .manager = self,
-        .node = .{},
-    };
-
-    if (source == .@"inline") {
-        // if we're here, it means that we have pending scripts (i.e. self.scripts
-        // is not empty). Because the script is inline, it's complete/ready, but
-        // we need to process them in order
-        pending_script.complete = true;
-        self.scripts.append(&pending_script.node);
-        return;
-    } else {
-        log.debug(.http, "script queue", .{ .url = remote_url.? });
-    }
-
-    pending_script.getList().append(&pending_script.node);
-
-    errdefer pending_script.deinit();
-
-    var headers = try Http.Headers.init();
-    try page.requestCookie(.{}).headersForRequest(page.arena, remote_url.?, &headers);
-
-    try self.client.request(.{
-        .url = remote_url.?,
-        .ctx = pending_script,
-        .method = .GET,
-        .headers = headers,
-        .cookie_jar = page.cookie_jar,
-        .resource_type = .script,
-        .start_callback = if (log.enabled(.http, .debug)) startCallback else null,
-        .header_callback = headerCallback,
-        .data_callback = dataCallback,
-        .done_callback = doneCallback,
-        .error_callback = errorCallback,
-    });
-}
-
-// @TODO: Improving this would have the simplest biggest performance improvement
-// for most sites.
-//
-// For JS imports (both static and dynamic), we currently block to get the
-// result (the content of the file).
-//
-// For static imports, this is necessary, since v8 is expecting the compiled module
-// as part of the function return. (we should try to pre-load the JavaScript
-// source via module.GetModuleRequests(), but that's for a later time).
-//
-// For dynamic dynamic imports, this is not strictly necessary since the v8
-// call returns a Promise; we could make this a normal get call, associated with
-// the promise, and when done, resolve the promise.
-//
-// In both cases, for now at least, we just issue a "blocking" request. We block
-// by ticking the http client until the script is complete.
-//
-// This uses the client.blockingRequest call which has a dedicated handle for
-// these blocking requests. Because they are blocking, we're guaranteed to have
-// only 1 at a time, thus the 1 reserved handle.
-//
-// You almost don't need the http client's blocking handle. In most cases, you
-// should always have 1 free handle whenever you get here, because we always
-// release the handle before executing the doneCallback. So, if a module does:
-//    import * as x from 'blah'
-// And we need to load 'blah', there should always be 1 free handle - the handle
-// of the http GET we just completed before executing the module.
-// The exception to this, and the reason we need a special blocking handle, is
-// for inline modules within the HTML page itself:
-//    <script type=module>import ....</script>
-// Unlike external modules which can only ever be executed after releasing an
-// http handle, these are executed without there necessarily being a free handle.
-// Thus, Http/Client.zig maintains a dedicated handle for these calls.
-pub fn blockingGet(self: *ScriptManager, url: [:0]const u8) !BlockingResult {
-    std.debug.assert(self.is_blocking == false);
-
-    self.is_blocking = true;
-    defer {
-        self.is_blocking = false;
-
-        // we blocked evaluation while loading this script, there could be
-        // scripts ready to process.
-        self.evaluate();
-    }
-
-    var blocking = Blocking{
-        .allocator = self.allocator,
-        .buffer_pool = &self.buffer_pool,
-    };
-
-    var headers = try Http.Headers.init();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
-    var client = self.client;
-    try client.blockingRequest(.{
-        .url = url,
-        .method = .GET,
-        .headers = headers,
-        .cookie_jar = self.page.cookie_jar,
-        .ctx = &blocking,
-        .resource_type = .script,
-        .start_callback = if (log.enabled(.http, .debug)) Blocking.startCallback else null,
-        .header_callback = Blocking.headerCallback,
-        .data_callback = Blocking.dataCallback,
-        .done_callback = Blocking.doneCallback,
-        .error_callback = Blocking.errorCallback,
-    });
-
-    // rely on http's timeout settings to avoid an endless/long loop.
-    while (true) {
-        _ = try client.tick(200);
-        switch (blocking.state) {
-            .running => {},
-            .done => |result| return result,
-            .err => |err| return err,
-        }
-    }
-}
-
-pub fn staticScriptsDone(self: *ScriptManager) void {
-    std.debug.assert(self.static_scripts_done == false);
-    self.static_scripts_done = true;
-}
-
-// try to evaluate completed scripts (in order). This is called whenever a script
-// is completed.
-fn evaluate(self: *ScriptManager) void {
-    if (self.is_evaluating) {
-        // It's possible for a script.eval to cause evaluate to be called again.
-        // This is particularly true with blockingGet, but even without this,
-        // it's theoretically possible (but unlikely). We could make this work
-        // but there's little reason to support the complexity.
-        return;
-    }
-
-    if (self.is_blocking) {
-        // Cannot evaluate scripts while a blocking-load is in progress. Not
-        // only could that result in incorrect evaluation order, it could
-        // trigger another blocking request, while we're doing a blocking request.
-        return;
-    }
-
-    const page = self.page;
-    self.is_evaluating = true;
-    defer self.is_evaluating = false;
-
-    // every script in asyncs_ready is ready to be evaluated.
-    while (self.asyncs_ready.first) |n| {
-        var pending_script: *PendingScript = @fieldParentPtr("node", n);
-        defer pending_script.deinit();
-        pending_script.script.eval(page);
-    }
-
-    while (self.scripts.first) |n| {
-        var pending_script: *PendingScript = @fieldParentPtr("node", n);
-        if (pending_script.complete == false) {
-            return;
-        }
-        defer pending_script.deinit();
-        pending_script.script.eval(page);
-    }
-
-    if (self.static_scripts_done == false) {
-        // We can only execute deferred scripts if
-        // 1 - all the normal scripts are done
-        // 2 - we've finished parsing the HTML and at least queued all the scripts
-        // The last one isn't obvious, but it's possible for self.scripts to
-        // be empty not because we're done executing all the normal scripts
-        // but because we're done executing some (or maybe none), but we're still
-        // parsing the HTML.
-        return;
-    }
-
-    while (self.deferreds.first) |n| {
-        var pending_script: *PendingScript = @fieldParentPtr("node", n);
-        if (pending_script.complete == false) {
-            return;
-        }
-        defer pending_script.deinit();
-        pending_script.script.eval(page);
-    }
-
-    // When all scripts (normal and deferred) are done loading, the document
-    // state changes (this ultimately triggers the DOMContentLoaded event)
-    page.documentIsLoaded();
-
-    if (self.asyncs.first == null) {
-        // 1 - there are no async scripts pending
-        // 2 - we checkecked static_scripts_done == true above
-        // 3 - we drained self.scripts above
-        // 4 - we drained self.deferred above
-        page.documentIsComplete();
-    }
-}
-
-pub fn isDone(self: *const ScriptManager) bool {
-    return self.asyncs.first == null and // there are no more async scripts
-        self.static_scripts_done and // and we've finished parsing the HTML to queue all <scripts>
-        self.scripts.first == null and // and there are no more <script src=> to wait for
-        self.deferreds.first == null; // and there are no more <script defer src=> to wait for
-}
-
-fn startCallback(transfer: *Http.Transfer) !void {
-    const script: *PendingScript = @ptrCast(@alignCast(transfer.ctx));
-    script.startCallback(transfer) catch |err| {
-        log.err(.http, "SM.startCallback", .{ .err = err, .transfer = transfer });
-        return err;
-    };
-}
-
-fn headerCallback(transfer: *Http.Transfer) !void {
-    const script: *PendingScript = @ptrCast(@alignCast(transfer.ctx));
-    try script.headerCallback(transfer);
-}
-
-fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
-    const script: *PendingScript = @ptrCast(@alignCast(transfer.ctx));
-    script.dataCallback(transfer, data) catch |err| {
-        log.err(.http, "SM.dataCallback", .{ .err = err, .transfer = transfer, .len = data.len });
-        return err;
-    };
-}
-
-fn doneCallback(ctx: *anyopaque) !void {
-    const script: *PendingScript = @ptrCast(@alignCast(ctx));
-    script.doneCallback();
-}
-
-fn errorCallback(ctx: *anyopaque, err: anyerror) void {
-    const script: *PendingScript = @ptrCast(@alignCast(ctx));
-    script.errorCallback(err);
-}
-
-// A script which is pending execution.
-// It could be pending because:
-//   (a) we're still downloading its content or
-//   (b) this is a non-async script that has to be executed in order
-pub const PendingScript = struct {
-    script: Script,
-    complete: bool,
-    node: OrderList.Node,
-    manager: *ScriptManager,
-
-    fn deinit(self: *PendingScript) void {
-        const script = &self.script;
-        const manager = self.manager;
-
-        if (script.source == .remote) {
-            manager.buffer_pool.release(script.source.remote);
-        }
-        self.getList().remove(&self.node);
-    }
-
-    fn remove(self: *PendingScript) void {
-        if (self.node) |*node| {
-            self.getList().remove(node);
-            self.node = null;
-        }
-    }
-
-    fn startCallback(self: *PendingScript, transfer: *Http.Transfer) !void {
-        _ = self;
-        log.debug(.http, "script fetch start", .{ .req = transfer });
-    }
-
-    fn headerCallback(self: *PendingScript, transfer: *Http.Transfer) !void {
-        const header = &transfer.response_header.?;
-        if (header.status != 200) {
-            log.info(.http, "script header", .{
-                .req = transfer,
-                .status = header.status,
-                .content_type = header.contentType(),
-            });
-            return;
-        }
-
-        log.debug(.http, "script header", .{
-            .req = transfer,
-            .status = header.status,
-            .content_type = header.contentType(),
-        });
-
-        // If this isn't true, then we'll likely leak memory. If you don't
-        // set `CURLOPT_SUPPRESS_CONNECT_HEADERS` and CONNECT to a proxy, this
-        // will fail. This assertion exists to catch incorrect assumptions about
-        // how libcurl works, or about how we've configured it.
-        std.debug.assert(self.script.source.remote.capacity == 0);
-        var buffer = self.manager.buffer_pool.get();
-        if (transfer.getContentLength()) |cl| {
-            try buffer.ensureTotalCapacity(self.manager.allocator, cl);
-        }
-        self.script.source = .{ .remote = buffer };
-    }
-
-    fn dataCallback(self: *PendingScript, transfer: *Http.Transfer, data: []const u8) !void {
-        _ = transfer;
-        // too verbose
-        // log.debug(.http, "script data chunk", .{
-        //     .req = transfer,
-        //     .len = data.len,
-        // });
-
-        try self.script.source.remote.appendSlice(self.manager.allocator, data);
-    }
-
-    fn doneCallback(self: *PendingScript) void {
-        log.debug(.http, "script fetch complete", .{ .req = self.script.url });
-
-        const manager = self.manager;
-        self.complete = true;
-        if (self.script.is_async) {
-            manager.asyncs.remove(&self.node);
-            manager.asyncs_ready.append(&self.node);
-        }
-        manager.evaluate();
-    }
-
-    fn errorCallback(self: *PendingScript, err: anyerror) void {
-        log.warn(.http, "script fetch error", .{ .req = self.script.url, .err = err });
-
-        const manager = self.manager;
-
-        self.deinit();
-
-        if (manager.shutdown) {
-            return;
-        }
-
-        manager.evaluate();
-    }
-
-    fn getList(self: *const PendingScript) *OrderList {
-        // When a script has both the async and defer flag set, it should be
-        // treated as async. Async is newer, so some websites use both so that
-        // if async isn't known, it'll fallback to defer.
-
-        const script = &self.script;
-        if (script.is_async) {
-            return if (self.complete) &self.manager.asyncs_ready else &self.manager.asyncs;
-        }
-
-        if (script.is_defer) {
-            return &self.manager.deferreds;
-        }
-
-        return &self.manager.scripts;
-    }
-};
-
-const Script = struct {
-    kind: Kind,
-    url: []const u8,
-    is_async: bool,
-    is_defer: bool,
-    source: Source,
-    element: *parser.Element,
-
-    const Kind = enum {
-        module,
-        javascript,
-    };
-
-    const Callback = union(enum) {
-        string: []const u8,
-        function: Env.Function,
-    };
-
-    const Source = union(enum) {
-        @"inline": []const u8,
-        remote: std.ArrayListUnmanaged(u8),
-
-        fn content(self: Source) []const u8 {
-            return switch (self) {
-                .remote => |buf| buf.items,
-                .@"inline" => |c| c,
-            };
-        }
-    };
-
-    fn eval(self: *Script, page: *Page) void {
-        page.setCurrentScript(@ptrCast(self.element)) catch |err| {
-            log.err(.browser, "set document script", .{ .err = err });
-            return;
-        };
-
-        defer page.setCurrentScript(null) catch |err| {
-            log.err(.browser, "clear document script", .{ .err = err });
-        };
-
-        // inline scripts aren't cached. remote ones are.
-        const cacheable = self.source == .remote;
-
-        const url = self.url;
-
-        log.info(.browser, "executing script", .{
-            .src = url,
-            .kind = self.kind,
-            .cacheable = cacheable,
-        });
-
-        const js_context = page.main_context;
-        var try_catch: Env.TryCatch = undefined;
-        try_catch.init(js_context);
-        defer try_catch.deinit();
-
-        const success = blk: {
-            const content = self.source.content();
-            switch (self.kind) {
-                .javascript => _ = js_context.eval(content, url) catch break :blk false,
-                .module => {
-                    // We don't care about waiting for the evaluation here.
-                    _ = js_context.module(content, url, cacheable) catch break :blk false;
-                },
-            }
-            break :blk true;
-        };
-
-        if (success) {
-            self.executeCallback("onload", page);
-            return;
-        }
-
-        if (page.delayed_navigation) {
-            // If we're navigating to another page, an error is expected
-            // since we probably terminated the script forcefully.
-            return;
-        }
-
-        const msg = try_catch.err(page.arena) catch |err| @errorName(err) orelse "unknown";
-        log.warn(.user_script, "eval script", .{
-            .url = url,
-            .err = msg,
-            .cacheable = cacheable,
-        });
-
-        self.executeCallback("onerror", page);
-    }
-
-    fn executeCallback(self: *const Script, comptime typ: []const u8, page: *Page) void {
-        const callback = self.getCallback(typ, page) orelse return;
-
-        switch (callback) {
-            .string => |str| {
-                var try_catch: Env.TryCatch = undefined;
-                try_catch.init(page.main_context);
-                defer try_catch.deinit();
-
-                _ = page.main_context.exec(str, typ) catch |err| {
-                    const msg = try_catch.err(page.arena) catch @errorName(err) orelse "unknown";
-                    log.warn(.user_script, "script callback", .{
-                        .url = self.url,
-                        .err = msg,
-                        .type = typ,
-                        .@"inline" = true,
-                    });
-                };
-            },
-            .function => |f| {
-                const Event = @import("events/event.zig").Event;
-                const loadevt = parser.eventCreate() catch |err| {
-                    log.err(.browser, "SM event creation", .{ .err = err });
-                    return;
-                };
-                defer parser.eventDestroy(loadevt);
-
-                var result: Env.Function.Result = undefined;
-                const iface = Event.toInterface(loadevt) catch |err| {
-                    log.err(.browser, "SM event interface", .{ .err = err });
-                    return;
-                };
-                f.tryCall(void, .{iface}, &result) catch {
-                    log.warn(.user_script, "script callback", .{
-                        .url = self.url,
-                        .type = typ,
-                        .err = result.exception,
-                        .stack = result.stack,
-                        .@"inline" = false,
-                    });
-                };
-            },
-        }
-    }
-
-    fn getCallback(self: *const Script, comptime typ: []const u8, page: *Page) ?Callback {
-        const element = self.element;
-        // first we check if there was an el.onload set directly on the
-        // element in JavaScript (if so, it'd be stored in the node state)
-        if (page.getNodeState(@ptrCast(element))) |se| {
-            if (@field(se, typ)) |function| {
-                return .{ .function = function };
-            }
-        }
-        // if we have no node state, or if the node state has no onload/onerror
-        // then check for the onload/onerror attribute
-        if (parser.elementGetAttribute(element, typ) catch null) |string| {
-            return .{ .string = string };
-        }
-        return null;
-    }
-};
-
-const BufferPool = struct {
-    count: usize,
-    available: List = .{},
-    allocator: Allocator,
-    max_concurrent_transfers: u8,
-    mem_pool: std.heap.MemoryPool(Container),
-
-    const List = std.DoublyLinkedList;
-
-    const Container = struct {
-        node: List.Node,
-        buf: std.ArrayListUnmanaged(u8),
-    };
-
-    fn init(allocator: Allocator, max_concurrent_transfers: u8) BufferPool {
-        return .{
-            .available = .{},
-            .count = 0,
-            .allocator = allocator,
-            .max_concurrent_transfers = max_concurrent_transfers,
-            .mem_pool = std.heap.MemoryPool(Container).init(allocator),
-        };
-    }
-
-    fn deinit(self: *BufferPool) void {
-        const allocator = self.allocator;
-
-        var node = self.available.first;
-        while (node) |n| {
-            const container: *Container = @fieldParentPtr("node", n);
-            container.buf.deinit(allocator);
-            node = n.next;
-        }
-        self.mem_pool.deinit();
-    }
-
-    fn get(self: *BufferPool) std.ArrayListUnmanaged(u8) {
-        const node = self.available.popFirst() orelse {
-            // return a new buffer
-            return .{};
-        };
-
-        self.count -= 1;
-        const container: *Container = @fieldParentPtr("node", node);
-        defer self.mem_pool.destroy(container);
-        return container.buf;
-    }
-
-    fn release(self: *BufferPool, buffer: ArrayListUnmanaged(u8)) void {
-        // create mutable copy
-        var b = buffer;
-
-        if (self.count == self.max_concurrent_transfers) {
-            b.deinit(self.allocator);
-            return;
-        }
-
-        const container = self.mem_pool.create() catch |err| {
-            b.deinit(self.allocator);
-            log.err(.http, "SM BufferPool release", .{ .err = err });
-            return;
-        };
-
-        b.clearRetainingCapacity();
-        container.* = .{ .buf = b, .node = .{} };
-        self.count += 1;
-        self.available.append(&container.node);
-    }
-};
-
-const Blocking = struct {
-    allocator: Allocator,
-    buffer_pool: *BufferPool,
-    state: State = .{ .running = {} },
-    buffer: std.ArrayListUnmanaged(u8) = .{},
-
-    const State = union(enum) {
-        running: void,
-        err: anyerror,
-        done: BlockingResult,
-    };
-
-    fn startCallback(transfer: *Http.Transfer) !void {
-        log.debug(.http, "script fetch start", .{ .req = transfer, .blocking = true });
-    }
-
-    fn headerCallback(transfer: *Http.Transfer) !void {
-        const header = &transfer.response_header.?;
-        log.debug(.http, "script header", .{
-            .req = transfer,
-            .blocking = true,
-            .status = header.status,
-            .content_type = header.contentType(),
-        });
-
-        if (header.status != 200) {
-            return error.InvalidStatusCode;
-        }
-
-        var self: *Blocking = @ptrCast(@alignCast(transfer.ctx));
-        self.buffer = self.buffer_pool.get();
-    }
-
-    fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
-        // too verbose
-        // log.debug(.http, "script data chunk", .{
-        //     .req = transfer,
-        //     .blocking = true,
-        // });
-
-        var self: *Blocking = @ptrCast(@alignCast(transfer.ctx));
-        self.buffer.appendSlice(self.allocator, data) catch |err| {
-            log.err(.http, "SM.dataCallback", .{
-                .err = err,
-                .len = data.len,
-                .blocking = true,
-                .transfer = transfer,
-            });
-            return err;
-        };
-    }
-
-    fn doneCallback(ctx: *anyopaque) !void {
-        var self: *Blocking = @ptrCast(@alignCast(ctx));
-        self.state = .{ .done = .{
-            .buffer = self.buffer,
-            .buffer_pool = self.buffer_pool,
-        } };
-    }
-
-    fn errorCallback(ctx: *anyopaque, err: anyerror) void {
-        var self: *Blocking = @ptrCast(@alignCast(ctx));
-        self.state = .{ .err = err };
-        self.buffer_pool.release(self.buffer);
-    }
-};
-
-pub const BlockingResult = struct {
-    buffer: std.ArrayListUnmanaged(u8),
-    buffer_pool: *BufferPool,
-
-    pub fn deinit(self: *BlockingResult) void {
-        self.buffer_pool.release(self.buffer);
-    }
-
-    pub fn src(self: *const BlockingResult) []const u8 {
-        return self.buffer.items;
-    }
-};

src/browser/State.zig

@@ -28,11 +28,7 @@
 
 const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
-const DataSet = @import("html/DataSet.zig");
-const ShadowRoot = @import("dom/shadow_root.zig").ShadowRoot;
-const StyleSheet = @import("cssom/StyleSheet.zig");
-const CSSStyleSheet = @import("cssom/CSSStyleSheet.zig");
-const CSSStyleDeclaration = @import("cssom/CSSStyleDeclaration.zig");
+const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // for HTMLScript (but probably needs to be added to more)
 onload: ?Env.Function = null,
@@ -40,21 +36,12 @@ onerror: ?Env.Function = null,
 
 // for HTMLElement
 style: CSSStyleDeclaration = .empty,
-dataset: ?DataSet = null,
-template_content: ?*parser.DocumentFragment = null,
-
-// For dom/element
-shadow_root: ?*ShadowRoot = null,
 
 // for html/document
 ready_state: ReadyState = .loading,
 
-// for html/HTMLStyleElement
-style_sheet: ?*StyleSheet = null,
-
 // for dom/document
 active_element: ?*parser.Element = null,
-adopted_style_sheets: ?Env.JsObject = null,
 
 // for HTMLSelectElement
 // By default, if no option is explicitly selected, the first option should

src/browser/browser.zig

@@ -27,8 +27,7 @@ const App = @import("../app.zig").App;
 const Session = @import("session.zig").Session;
 const Notification = @import("../notification.zig").Notification;
 
-const log = @import("../log.zig");
-const HttpClient = @import("../http/Client.zig");
+const http = @import("../http/client.zig");
 
 // Browser is an instance of the browser.
 // You can create multiple browser instances.
@@ -38,7 +37,7 @@ pub const Browser = struct {
     app: *App,
     session: ?Session,
     allocator: Allocator,
-    http_client: *HttpClient,
+    http_client: *http.Client,
     page_arena: ArenaAllocator,
     session_arena: ArenaAllocator,
     transfer_arena: ArenaAllocator,
@@ -48,12 +47,10 @@ pub const Browser = struct {
     pub fn init(app: *App) !Browser {
         const allocator = app.allocator;
 
-        const env = try Env.init(allocator, &app.platform, .{});
+        const env = try Env.init(allocator, .{});
         errdefer env.deinit();
 
         const notification = try Notification.init(allocator, app.notification);
-        app.http.client.notification = notification;
-        app.http.client.next_request_id = 0; // Should we track ids in CDP only?
         errdefer notification.deinit();
 
         return .{
@@ -62,7 +59,7 @@ pub const Browser = struct {
             .session = null,
             .allocator = allocator,
             .notification = notification,
-            .http_client = app.http.client,
+            .http_client = &app.http_client,
             .page_arena = ArenaAllocator.init(allocator),
             .session_arena = ArenaAllocator.init(allocator),
             .transfer_arena = ArenaAllocator.init(allocator),
@@ -76,7 +73,6 @@ pub const Browser = struct {
         self.page_arena.deinit();
         self.session_arena.deinit();
         self.transfer_arena.deinit();
-        self.http_client.notification = null;
         self.notification.deinit();
         self.state_pool.deinit();
     }
@@ -99,18 +95,17 @@ pub const Browser = struct {
     }
 
     pub fn runMicrotasks(self: *const Browser) void {
-        self.env.runMicrotasks();
-    }
-
-    pub fn runMessageLoop(self: *const Browser) void {
-        while (self.env.pumpMessageLoop()) {
-            log.debug(.browser, "pumpMessageLoop", .{});
-        }
-        self.env.runIdleTasks();
+        return self.env.runMicrotasks();
     }
 };
 
 const testing = @import("../testing.zig");
 test "Browser" {
-    try testing.htmlRunner("browser.html");
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    // this will crash if ICU isn't properly configured / ininitialized
+    try runner.testCases(&.{
+        .{ "new Intl.DateTimeFormat()", "[object Intl.DateTimeFormat]" },
+    }, .{});
 }

src/browser/console/console.zig

@@ -18,61 +18,62 @@
 
 const std = @import("std");
 const builtin = @import("builtin");
-const log = @import("../../log.zig");
 
 const Allocator = std.mem.Allocator;
 const Page = @import("../page.zig").Page;
 const JsObject = @import("../env.zig").Env.JsObject;
 
+const log = if (builtin.is_test) &test_capture else @import("../../log.zig");
+
 pub const Console = struct {
     // TODO: configurable writer
     timers: std.StringHashMapUnmanaged(u32) = .{},
     counts: std.StringHashMapUnmanaged(u32) = .{},
 
-    pub fn _lp(values: []JsObject, page: *Page) !void {
+    pub fn static_lp(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.fatal(.console, "lightpanda", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _log(values: []JsObject, page: *Page) !void {
+    pub fn static_log(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.info(.console, "info", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _info(values: []JsObject, page: *Page) !void {
-        return _log(values, page);
+    pub fn static_info(values: []JsObject, page: *Page) !void {
+        return static_log(values, page);
     }
 
-    pub fn _debug(values: []JsObject, page: *Page) !void {
+    pub fn static_debug(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.debug(.console, "debug", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _warn(values: []JsObject, page: *Page) !void {
+    pub fn static_warn(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.warn(.console, "warn", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn _error(values: []JsObject, page: *Page) !void {
+    pub fn static_error(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
 
-        log.warn(.console, "error", .{
+        log.info(.console, "error", .{
             .args = try serializeValues(values, page),
             .stack = page.stackTrace() catch "???",
         });
     }
 
-    pub fn _clear() void {}
+    pub fn static_clear() void {}
 
     pub fn _count(self: *Console, label_: ?[]const u8, page: *Page) !void {
         const label = label_ orelse "default";
@@ -133,7 +134,7 @@ pub const Console = struct {
         log.warn(.console, "timer stop", .{ .label = label, .elapsed = elapsed - kv.value });
     }
 
-    pub fn _assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
+    pub fn static_assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
         if (assertion.isTruthy()) {
             return;
         }
@@ -164,76 +165,165 @@ pub const Console = struct {
 };
 
 fn timestamp() u32 {
-    return @import("../../datetime.zig").timestamp();
+    const ts = std.posix.clock_gettime(std.posix.CLOCK.MONOTONIC) catch unreachable;
+    return @intCast(ts.sec);
 }
 
-// const testing = @import("../../testing.zig");
-// test "Browser.Console" {
-//     defer testing.reset();
+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();
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
 
-//     {
-//         try runner.testCases(&.{
-//             .{ "console.log('a')", "undefined" },
-//             .{ "console.warn('hello world', 23, true, new Object())", "undefined" },
-//         }, .{});
+    {
+        try runner.testCases(&.{
+            .{ "console.log('a')", "undefined" },
+            .{ "console.warn('hello world', 23, true, new Object())", "undefined" },
+        }, .{});
 
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[info] args= 1: a", captured[0]);
-//         try testing.expectEqual("[warn] args= 1: hello world 2: 23 3: true 4: #<Object>", captured[1]);
-//     }
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("[info] args= 1: a", captured[0]);
+        try testing.expectEqual("[warn] args= 1: hello world 2: 23 3: true 4: #<Object>", captured[1]);
+    }
 
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "console.countReset()", "undefined" },
-//             .{ "console.count()", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count()", "undefined" },
-//             .{ "console.countReset('teg')", "undefined" },
-//             .{ "console.countReset()", "undefined" },
-//             .{ "console.count()", "undefined" },
-//         }, .{});
+    {
+        test_capture.reset();
+        try runner.testCases(&.{
+            .{ "console.countReset()", "undefined" },
+            .{ "console.count()", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count('teg')", "undefined" },
+            .{ "console.count()", "undefined" },
+            .{ "console.countReset('teg')", "undefined" },
+            .{ "console.countReset()", "undefined" },
+            .{ "console.count()", "undefined" },
+        }, .{});
 
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[invalid counter] label=default", captured[0]);
-//         try testing.expectEqual("[count] label=default count=1", captured[1]);
-//         try testing.expectEqual("[count] label=teg count=1", captured[2]);
-//         try testing.expectEqual("[count] label=teg count=2", captured[3]);
-//         try testing.expectEqual("[count] label=teg count=3", captured[4]);
-//         try testing.expectEqual("[count] label=default count=2", captured[5]);
-//         try testing.expectEqual("[count reset] label=teg count=3", captured[6]);
-//         try testing.expectEqual("[count reset] label=default count=2", captured[7]);
-//         try testing.expectEqual("[count] label=default count=1", captured[8]);
-//     }
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("[invalid counter] label=default", captured[0]);
+        try testing.expectEqual("[count] label=default count=1", captured[1]);
+        try testing.expectEqual("[count] label=teg count=1", captured[2]);
+        try testing.expectEqual("[count] label=teg count=2", captured[3]);
+        try testing.expectEqual("[count] label=teg count=3", captured[4]);
+        try testing.expectEqual("[count] label=default count=2", captured[5]);
+        try testing.expectEqual("[count reset] label=teg count=3", captured[6]);
+        try testing.expectEqual("[count reset] label=default count=2", captured[7]);
+        try testing.expectEqual("[count] label=default count=1", captured[8]);
+    }
 
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "console.assert(true)", "undefined" },
-//             .{ "console.assert('a', 2, 3, 4)", "undefined" },
-//             .{ "console.assert('')", "undefined" },
-//             .{ "console.assert('', 'x', true)", "undefined" },
-//             .{ "console.assert(false, 'x')", "undefined" },
-//         }, .{});
+    {
+        test_capture.reset();
+        try runner.testCases(&.{
+            .{ "console.assert(true)", "undefined" },
+            .{ "console.assert('a', 2, 3, 4)", "undefined" },
+            .{ "console.assert('')", "undefined" },
+            .{ "console.assert('', 'x', true)", "undefined" },
+            .{ "console.assert(false, 'x')", "undefined" },
+        }, .{});
 
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[assertion failed] values=", captured[0]);
-//         try testing.expectEqual("[assertion failed] values= 1: x 2: true", captured[1]);
-//         try testing.expectEqual("[assertion failed] values= 1: x", captured[2]);
-//     }
+        const captured = test_capture.captured.items;
+        try testing.expectEqual("[assertion failed] values=", captured[0]);
+        try testing.expectEqual("[assertion failed] values= 1: x 2: true", captured[1]);
+        try testing.expectEqual("[assertion failed] values= 1: x", captured[2]);
+    }
 
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "[1].forEach(console.log)", null },
-//         }, .{});
+    {
+        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 captured = test_capture.captured.items;
+        try testing.expectEqual("[info] args= 1: 1 2: 0 3: [1]", captured[0]);
+    }
+}
+
+const TestCapture = struct {
+    captured: std.ArrayListUnmanaged([]const u8) = .{},
+
+    fn separator(_: *const TestCapture) []const u8 {
+        return " ";
+    }
+
+    fn reset(self: *TestCapture) void {
+        self.captured = .{};
+    }
+
+    fn debug(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn info(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn warn(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn err(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn fatal(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self.capture(scope, msg, args);
+    }
+
+    fn capture(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) void {
+        self._capture(scope, msg, args) catch unreachable;
+    }
+
+    fn _capture(
+        self: *TestCapture,
+        comptime scope: @Type(.enum_literal),
+        comptime msg: []const u8,
+        args: anytype,
+    ) !void {
+        std.debug.assert(scope == .console);
+
+        const allocator = testing.arena_allocator;
+        var buf: std.ArrayListUnmanaged(u8) = .empty;
+        try buf.appendSlice(allocator, "[" ++ msg ++ "] ");
+
+        inline for (@typeInfo(@TypeOf(args)).@"struct".fields) |f| {
+            try buf.appendSlice(allocator, f.name);
+            try buf.append(allocator, '=');
+            try @import("../../log.zig").writeValue(.pretty, @field(args, f.name), buf.writer(allocator));
+            try buf.append(allocator, ' ');
+        }
+        self.captured.append(testing.arena_allocator, std.mem.trimRight(u8, buf.items, " ")) catch unreachable;
+    }
+};

src/browser/crypto/crypto.zig

@@ -17,21 +17,16 @@
 // 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 {
-    _not_empty: bool = true,
-
-    pub fn _getRandomValues(_: *const Crypto, js_obj: Env.JsObject) !Env.JsObject {
-        var into = try js_obj.toZig(Crypto, "getRandomValues", RandomValues);
+    pub fn _getRandomValues(_: *const Crypto, into: RandomValues) !void {
         const buf = into.asBuffer();
         if (buf.len > 65_536) {
             return error.QuotaExceededError;
         }
         std.crypto.random.bytes(buf);
-        return js_obj;
     }
 
     pub fn _randomUUID(_: *const Crypto) [36]u8 {
@@ -52,20 +47,36 @@ const RandomValues = union(enum) {
     uint64: []u64,
 
     fn asBuffer(self: RandomValues) []u8 {
-        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],
-        };
+        switch (self) {
+            .int8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .uint8 => |b| return (@as([]u8, @ptrCast(b)))[0..b.len],
+            .int16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .uint16 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 2],
+            .int32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .uint32 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 4],
+            .int64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+            .uint64 => |b| return (@as([]u8, @ptrCast(b)))[0 .. b.len * 8],
+        }
     }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: Crypto" {
-    try testing.htmlRunner("crypto.html");
+test "Browser.Crypto" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const a = crypto.randomUUID();", "undefined" },
+        .{ "const b = crypto.randomUUID();", "undefined" },
+        .{ "a.length;", "36" },
+        .{ "a.length;", "36" },
+        .{ "a == b;", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "try { crypto.getRandomValues(new BigUint64Array(8193)) } catch(e) { e.message == 'QuotaExceededError' }", "true" },
+        .{ "let r1 = new Int32Array(5)", "undefined" },
+        .{ "crypto.getRandomValues(r1)", "undefined" },
+        .{ "new Set(r1).size", "5" },
+    }, .{});
 }

src/browser/css/css.zig

@@ -23,20 +23,6 @@ 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 };
@@ -45,7 +31,7 @@ pub fn parse(alloc: std.mem.Allocator, s: []const u8, opts: parser.ParseOptions)
 
 // matchFirst call m.match with the first node that matches the selector s, from the
 // descendants of n and returns true. If none matches, it returns false.
-pub fn matchFirst(s: *const Selector, node: anytype, m: anytype) !bool {
+pub fn matchFirst(s: Selector, node: anytype, m: anytype) !bool {
     var c = try node.firstChild();
     while (true) {
         if (c == null) break;
@@ -63,7 +49,7 @@ pub fn matchFirst(s: *const Selector, node: anytype, m: anytype) !bool {
 
 // matchAll call m.match with the all the nodes that matches the selector s, from the
 // descendants of n.
-pub fn matchAll(s: *const Selector, node: anytype, m: anytype) !void {
+pub fn matchAll(s: Selector, node: anytype, m: anytype) !void {
     var c = try node.firstChild();
     while (true) {
         if (c == null) break;
@@ -188,8 +174,3 @@ test "parse" {
         defer s.deinit(alloc);
     }
 }
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS" {
-    try testing.htmlRunner("css.html");
-}

src/browser/css/libdom_test.zig

@@ -20,23 +20,18 @@ const std = @import("std");
 const css = @import("css.zig");
 const Node = @import("libdom.zig").Node;
 const parser = @import("../netsurf.zig");
-const Allocator = std.mem.Allocator;
 
 const Matcher = struct {
-    const Nodes = std.ArrayListUnmanaged(Node);
+    const Nodes = std.ArrayList(Node);
 
     nodes: Nodes,
-    allocator: Allocator,
 
-    fn init(allocator: Allocator) Matcher {
-        return .{
-            .nodes = .empty,
-            .allocator = allocator,
-        };
+    fn init(alloc: std.mem.Allocator) Matcher {
+        return .{ .nodes = Nodes.init(alloc) };
     }
 
     fn deinit(m: *Matcher) void {
-        m.nodes.deinit(m.allocator);
+        m.nodes.deinit();
     }
 
     fn reset(m: *Matcher) void {
@@ -44,10 +39,11 @@ const Matcher = struct {
     }
 
     pub fn match(m: *Matcher, n: Node) !void {
-        try m.nodes.append(m.allocator, n);
+        try m.nodes.append(n);
     }
 };
 
+const Elements = @import("../html/elements.zig");
 test "matchFirst" {
     const alloc = std.testing.allocator;
 
@@ -166,7 +162,7 @@ test "matchFirst" {
     for (testcases) |tc| {
         matcher.reset();
 
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
+        const doc = try parser.documentHTMLParseFromStr(tc.html, &Elements.createElement);
         defer parser.documentHTMLClose(doc) catch {};
 
         const s = css.parse(alloc, tc.q, .{}) catch |e| {
@@ -307,7 +303,7 @@ test "matchAll" {
     for (testcases) |tc| {
         matcher.reset();
 
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
+        const doc = try parser.documentHTMLParseFromStr(tc.html, &Elements.createElement);
         defer parser.documentHTMLClose(doc) catch {};
 
         const s = css.parse(alloc, tc.q, .{}) catch |e| {

src/browser/css/match_test.zig

@@ -84,20 +84,16 @@ pub const Node = struct {
 };
 
 const Matcher = struct {
-    const Nodes = std.ArrayListUnmanaged(*const Node);
+    const Nodes = std.ArrayList(*const Node);
 
     nodes: Nodes,
-    allocator: Allocator,
 
-    fn init(allocator: Allocator) Matcher {
-        return .{
-            .nodes = .empty,
-            .allocator = allocator,
-        };
+    fn init(alloc: std.mem.Allocator) Matcher {
+        return .{ .nodes = Nodes.init(alloc) };
     }
 
     fn deinit(m: *Matcher) void {
-        m.nodes.deinit(self.allocator);
+        m.nodes.deinit();
     }
 
     fn reset(m: *Matcher) void {
@@ -105,7 +101,7 @@ const Matcher = struct {
     }
 
     pub fn match(m: *Matcher, n: *const Node) !void {
-        try m.nodes.append(self.allocator, n);
+        try m.nodes.append(n);
     }
 };
 

src/browser/css/parser.zig

@@ -22,7 +22,6 @@
 // see https://github.com/andybalholm/cascadia/blob/master/parser.go
 const std = @import("std");
 const ascii = std.ascii;
-const Allocator = std.mem.Allocator;
 
 const selector = @import("selector.zig");
 const Selector = selector.Selector;
@@ -78,8 +77,8 @@ pub const Parser = struct {
 
     opts: ParseOptions,
 
-    pub fn parse(p: *Parser, allocator: Allocator) ParseError!Selector {
-        return p.parseSelectorGroup(allocator);
+    pub fn parse(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        return p.parseSelectorGroup(alloc);
     }
 
     // skipWhitespace consumes whitespace characters and comments.
@@ -116,13 +115,13 @@ pub const Parser = struct {
 
     // parseSimpleSelectorSequence parses a selector sequence that applies to
     // a single element.
-    fn parseSimpleSelectorSequence(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseSimpleSelectorSequence(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         if (p.i >= p.s.len) {
             return ParseError.ExpectedSelector;
         }
 
-        var buf: std.ArrayListUnmanaged(Selector) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(Selector).init(alloc);
+        defer buf.deinit();
 
         switch (p.s[p.i]) {
             '*' => {
@@ -139,20 +138,20 @@ pub const Parser = struct {
                 // There's no type selector. Wait to process the other till the
                 // main loop.
             },
-            else => try buf.append(allocator, try p.parseTypeSelector(allocator)),
+            else => try buf.append(try p.parseTypeSelector(alloc)),
         }
 
         var pseudo_elt: ?PseudoClass = null;
 
         loop: while (p.i < p.s.len) {
             var ns: Selector = switch (p.s[p.i]) {
-                '#' => try p.parseIDSelector(allocator),
-                '.' => try p.parseClassSelector(allocator),
-                '[' => try p.parseAttributeSelector(allocator),
-                ':' => try p.parsePseudoclassSelector(allocator),
+                '#' => try p.parseIDSelector(alloc),
+                '.' => try p.parseClassSelector(alloc),
+                '[' => try p.parseAttributeSelector(alloc),
+                ':' => try p.parsePseudoclassSelector(alloc),
                 else => break :loop,
             };
-            errdefer ns.deinit(allocator);
+            errdefer ns.deinit(alloc);
 
             // From https://drafts.csswg.org/selectors-3/#pseudo-elements :
             // "Only one pseudo-element may appear per selector, and if present
@@ -166,32 +165,28 @@ pub const Parser = struct {
                     if (!p.opts.accept_pseudo_elts) return ParseError.PseudoElementDisabled;
 
                     pseudo_elt = e;
-                    ns.deinit(allocator);
+                    ns.deinit(alloc);
                 },
                 else => {
                     if (pseudo_elt != null) return ParseError.PseudoElementNotAtSelectorEnd;
-                    try buf.append(allocator, ns);
+                    try buf.append(ns);
                 },
             }
         }
 
         // no need wrap the selectors in compoundSelector
-        if (buf.items.len == 1 and pseudo_elt == null) {
-            return buf.items[0];
-        }
+        if (buf.items.len == 1 and pseudo_elt == null) return buf.items[0];
 
-        return .{
-            .compound = .{ .selectors = try buf.toOwnedSlice(allocator), .pseudo_elt = pseudo_elt },
-        };
+        return .{ .compound = .{ .selectors = try buf.toOwnedSlice(), .pseudo_elt = pseudo_elt } };
     }
 
     // parseTypeSelector parses a type selector (one that matches by tag name).
-    fn parseTypeSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
-        try p.parseIdentifier(buf.writer(allocator));
+    fn parseTypeSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
+        try p.parseIdentifier(buf.writer());
 
-        return .{ .tag = try buf.toOwnedSlice(allocator) };
+        return .{ .tag = try buf.toOwnedSlice() };
     }
 
     // parseIdentifier parses an identifier.
@@ -209,7 +204,7 @@ pub const Parser = struct {
         }
 
         const c = p.s[p.i];
-        if (!(nameStart(c) or c == '\\')) {
+        if (!nameStart(c) or c == '\\') {
             return ParseError.ExpectedSelector;
         }
 
@@ -319,47 +314,47 @@ pub const Parser = struct {
     }
 
     // parseIDSelector parses a selector that matches by id attribute.
-    fn parseIDSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseIDSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         if (p.i >= p.s.len) return ParseError.ExpectedIDSelector;
         if (p.s[p.i] != '#') return ParseError.ExpectedIDSelector;
 
         p.i += 1;
 
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
 
-        try p.parseName(buf.writer(allocator));
-        return .{ .id = try buf.toOwnedSlice(allocator) };
+        try p.parseName(buf.writer());
+        return .{ .id = try buf.toOwnedSlice() };
     }
 
     // parseClassSelector parses a selector that matches by class attribute.
-    fn parseClassSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseClassSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         if (p.i >= p.s.len) return ParseError.ExpectedClassSelector;
         if (p.s[p.i] != '.') return ParseError.ExpectedClassSelector;
 
         p.i += 1;
 
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
 
-        try p.parseIdentifier(buf.writer(allocator));
-        return .{ .class = try buf.toOwnedSlice(allocator) };
+        try p.parseIdentifier(buf.writer());
+        return .{ .class = try buf.toOwnedSlice() };
     }
 
     // parseAttributeSelector parses a selector that matches by attribute value.
-    fn parseAttributeSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseAttributeSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         if (p.i >= p.s.len) return ParseError.ExpectedAttributeSelector;
         if (p.s[p.i] != '[') return ParseError.ExpectedAttributeSelector;
 
         p.i += 1;
         _ = p.skipWhitespace();
 
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
 
-        try p.parseIdentifier(buf.writer(allocator));
-        const key = try buf.toOwnedSlice(allocator);
-        errdefer allocator.free(key);
+        try p.parseIdentifier(buf.writer());
+        const key = try buf.toOwnedSlice();
+        errdefer alloc.free(key);
 
         lowerstr(key);
 
@@ -382,12 +377,12 @@ pub const Parser = struct {
         var is_val: bool = undefined;
         if (op == .regexp) {
             is_val = false;
-            try p.parseRegex(buf.writer(allocator));
+            try p.parseRegex(buf.writer());
         } else {
             is_val = true;
             switch (p.s[p.i]) {
-                '\'', '"' => try p.parseString(buf.writer(allocator)),
-                else => try p.parseIdentifier(buf.writer(allocator)),
+                '\'', '"' => try p.parseString(buf.writer()),
+                else => try p.parseIdentifier(buf.writer()),
             }
         }
 
@@ -409,8 +404,8 @@ pub const Parser = struct {
 
         return .{ .attribute = .{
             .key = key,
-            .val = if (is_val) try buf.toOwnedSlice(allocator) else null,
-            .regexp = if (!is_val) try buf.toOwnedSlice(allocator) else null,
+            .val = if (is_val) try buf.toOwnedSlice() else null,
+            .regexp = if (!is_val) try buf.toOwnedSlice() else null,
             .op = op,
             .ci = ci,
         } };
@@ -503,7 +498,7 @@ pub const Parser = struct {
     // parsePseudoclassSelector parses a pseudoclass selector like :not(p) or a pseudo-element
     // For backwards compatibility, both ':' and '::' prefix are allowed for pseudo-elements.
     // https://drafts.csswg.org/selectors-3/#pseudo-elements
-    fn parsePseudoclassSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parsePseudoclassSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         if (p.i >= p.s.len) return ParseError.ExpectedPseudoClassSelector;
         if (p.s[p.i] != ':') return ParseError.ExpectedPseudoClassSelector;
 
@@ -516,10 +511,10 @@ pub const Parser = struct {
             p.i += 1;
         }
 
-        var buf: std.ArrayListUnmanaged(u8) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(u8).init(alloc);
+        defer buf.deinit();
 
-        try p.parseIdentifier(buf.writer(allocator));
+        try p.parseIdentifier(buf.writer());
 
         const pseudo_class = try PseudoClass.parse(buf.items);
 
@@ -532,11 +527,11 @@ pub const Parser = struct {
             .not, .has, .haschild => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
 
-                const sel = try p.parseSelectorGroup(allocator);
+                const sel = try p.parseSelectorGroup(alloc);
                 if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;
 
-                const s = try allocator.create(Selector);
-                errdefer allocator.destroy(s);
+                const s = try alloc.create(Selector);
+                errdefer alloc.destroy(s);
                 s.* = sel;
 
                 return .{ .pseudo_class_relative = .{ .pseudo_class = pseudo_class, .match = s } };
@@ -546,16 +541,16 @@ pub const Parser = struct {
                 if (p.i == p.s.len) return ParseError.UnmatchParenthesis;
 
                 switch (p.s[p.i]) {
-                    '\'', '"' => try p.parseString(buf.writer(allocator)),
-                    else => try p.parseString(buf.writer(allocator)),
+                    '\'', '"' => try p.parseString(buf.writer()),
+                    else => try p.parseString(buf.writer()),
                 }
 
                 _ = p.skipWhitespace();
                 if (p.i >= p.s.len) return ParseError.InvalidPseudoClass;
                 if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;
 
-                const val = try buf.toOwnedSlice(allocator);
-                errdefer allocator.free(val);
+                const val = try buf.toOwnedSlice();
+                errdefer alloc.free(val);
 
                 lowerstr(val);
 
@@ -564,15 +559,15 @@ pub const Parser = struct {
             .matches, .matchesown => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
 
-                try p.parseRegex(buf.writer(allocator));
+                try p.parseRegex(buf.writer());
                 if (p.i >= p.s.len) return ParseError.InvalidPseudoClassSelector;
                 if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;
 
-                return .{ .pseudo_class_regexp = .{ .own = pseudo_class == .matchesown, .regexp = try buf.toOwnedSlice(allocator) } };
+                return .{ .pseudo_class_regexp = .{ .own = pseudo_class == .matchesown, .regexp = try buf.toOwnedSlice() } };
             },
             .nth_child, .nth_last_child, .nth_of_type, .nth_last_of_type => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
-                const nth = try p.parseNth(allocator);
+                const nth = try p.parseNth(alloc);
                 if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;
 
                 const last = pseudo_class == .nth_last_child or pseudo_class == .nth_last_of_type;
@@ -587,19 +582,18 @@ pub const Parser = struct {
             .only_of_type => return .{ .pseudo_class_only_child = true },
             .input, .empty, .root, .link => return .{ .pseudo_class = pseudo_class },
             .enabled, .disabled, .checked => return .{ .pseudo_class = pseudo_class },
-            .visible => return .{ .pseudo_class = pseudo_class },
             .lang => {
                 if (!p.consumeParenthesis()) return ParseError.ExpectedParenthesis;
                 if (p.i == p.s.len) return ParseError.UnmatchParenthesis;
 
-                try p.parseIdentifier(buf.writer(allocator));
+                try p.parseIdentifier(buf.writer());
 
                 _ = p.skipWhitespace();
                 if (p.i >= p.s.len) return ParseError.InvalidPseudoClass;
                 if (!p.consumeClosingParenthesis()) return ParseError.ExpectedParenthesisClose;
 
-                const val = try buf.toOwnedSlice(allocator);
-                errdefer allocator.free(val);
+                const val = try buf.toOwnedSlice();
+                errdefer alloc.free(val);
                 lowerstr(val);
 
                 return .{ .pseudo_class_lang = val };
@@ -611,7 +605,6 @@ 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 },
         }
     }
 
@@ -627,32 +620,30 @@ pub const Parser = struct {
     }
 
     // parseSelectorGroup parses a group of selectors, separated by commas.
-    fn parseSelectorGroup(p: *Parser, allocator: Allocator) ParseError!Selector {
-        const s = try p.parseSelector(allocator);
+    fn parseSelectorGroup(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
+        const s = try p.parseSelector(alloc);
 
-        var buf: std.ArrayListUnmanaged(Selector) = .empty;
-        defer buf.deinit(allocator);
+        var buf = std.ArrayList(Selector).init(alloc);
+        defer buf.deinit();
 
-        try buf.append(allocator, s);
+        try buf.append(s);
 
         while (p.i < p.s.len) {
             if (p.s[p.i] != ',') break;
             p.i += 1;
-            const ss = try p.parseSelector(allocator);
-            try buf.append(allocator, ss);
+            const ss = try p.parseSelector(alloc);
+            try buf.append(ss);
         }
 
-        if (buf.items.len == 1) {
-            return buf.items[0];
-        }
+        if (buf.items.len == 1) return buf.items[0];
 
-        return .{ .group = try buf.toOwnedSlice(allocator) };
+        return .{ .group = try buf.toOwnedSlice() };
     }
 
     // parseSelector parses a selector that may include combinators.
-    fn parseSelector(p: *Parser, allocator: Allocator) ParseError!Selector {
+    fn parseSelector(p: *Parser, alloc: std.mem.Allocator) ParseError!Selector {
         _ = p.skipWhitespace();
-        var s = try p.parseSimpleSelectorSequence(allocator);
+        var s = try p.parseSimpleSelectorSequence(alloc);
 
         while (true) {
             var combinator: Combinator = .empty;
@@ -680,21 +671,17 @@ pub const Parser = struct {
                 return s;
             }
 
-            const c = try p.parseSimpleSelectorSequence(allocator);
+            const c = try p.parseSimpleSelectorSequence(alloc);
 
-            const first = try allocator.create(Selector);
-            errdefer allocator.destroy(first);
+            const first = try alloc.create(Selector);
+            errdefer alloc.destroy(first);
             first.* = s;
 
-            const second = try allocator.create(Selector);
-            errdefer allocator.destroy(second);
+            const second = try alloc.create(Selector);
+            errdefer alloc.destroy(second);
             second.* = c;
 
-            s = Selector{ .combined = .{
-                .first = first,
-                .second = second,
-                .combinator = combinator,
-            } };
+            s = Selector{ .combined = .{ .first = first, .second = second, .combinator = combinator } };
         }
 
         return s;
@@ -787,7 +774,7 @@ pub const Parser = struct {
     }
 
     // parseNth parses the argument for :nth-child (normally of the form an+b).
-    fn parseNth(p: *Parser, allocator: Allocator) ParseError![2]isize {
+    fn parseNth(p: *Parser, alloc: std.mem.Allocator) ParseError![2]isize {
         // initial state
         if (p.i >= p.s.len) return ParseError.ExpectedNthExpression;
         return switch (p.s[p.i]) {
@@ -805,10 +792,10 @@ pub const Parser = struct {
                 return p.parseNthReadN(1);
             },
             'o', 'O', 'e', 'E' => {
-                var buf: std.ArrayListUnmanaged(u8) = .empty;
-                defer buf.deinit(allocator);
+                var buf = std.ArrayList(u8).init(alloc);
+                defer buf.deinit();
 
-                try p.parseName(buf.writer(allocator));
+                try p.parseName(buf.writer());
 
                 if (std.ascii.eqlIgnoreCase("odd", buf.items)) return .{ 2, 1 };
                 if (std.ascii.eqlIgnoreCase("even", buf.items)) return .{ 2, 0 };
@@ -884,7 +871,7 @@ test "parser.skipWhitespace" {
 }
 
 test "parser.parseIdentifier" {
-    const allocator = std.testing.allocator;
+    const alloc = std.testing.allocator;
 
     const testcases = [_]struct {
         s: []const u8, // given value
@@ -900,14 +887,14 @@ test "parser.parseIdentifier" {
         .{ .s = "a\\\"b", .exp = "a\"b" },
     };
 
-    var buf: std.ArrayListUnmanaged(u8) = .empty;
-    defer buf.deinit(allocator);
+    var buf = std.ArrayList(u8).init(alloc);
+    defer buf.deinit();
 
     for (testcases) |tc| {
         buf.clearRetainingCapacity();
 
         var p = Parser{ .s = tc.s, .opts = .{} };
-        p.parseIdentifier(buf.writer(allocator)) catch |e| {
+        p.parseIdentifier(buf.writer()) catch |e| {
             // if error was expected, continue.
             if (tc.err) continue;
 
@@ -922,7 +909,7 @@ test "parser.parseIdentifier" {
 }
 
 test "parser.parseString" {
-    const allocator = std.testing.allocator;
+    const alloc = std.testing.allocator;
 
     const testcases = [_]struct {
         s: []const u8, // given value
@@ -941,14 +928,14 @@ test "parser.parseString" {
         .{ .s = "\"hello world\"", .exp = "hello world" },
     };
 
-    var buf: std.ArrayListUnmanaged(u8) = .empty;
-    defer buf.deinit(allocator);
+    var buf = std.ArrayList(u8).init(alloc);
+    defer buf.deinit();
 
     for (testcases) |tc| {
         buf.clearRetainingCapacity();
 
         var p = Parser{ .s = tc.s, .opts = .{} };
-        p.parseString(buf.writer(allocator)) catch |e| {
+        p.parseString(buf.writer()) catch |e| {
             // if error was expected, continue.
             if (tc.err) continue;
 
@@ -961,36 +948,3 @@ test "parser.parseString" {
         };
     }
 }
-
-test "parser.parse" {
-    var arena = std.heap.ArenaAllocator.init(std.testing.allocator);
-    defer arena.deinit();
-    const allocator = arena.allocator();
-
-    const testcases = [_]struct {
-        s: []const u8, // given value
-        exp: Selector, // expected value
-        err: bool = false,
-    }{
-        .{ .s = "root", .exp = .{ .tag = "root" } },
-        .{ .s = ".root", .exp = .{ .class = "root" } },
-        .{ .s = ":root", .exp = .{ .pseudo_class = .root } },
-        .{ .s = ".\\:bar", .exp = .{ .class = ":bar" } },
-        .{ .s = ".foo\\:bar", .exp = .{ .class = "foo:bar" } },
-    };
-
-    for (testcases) |tc| {
-        var p = Parser{ .s = tc.s, .opts = .{} };
-        const sel = p.parse(allocator) catch |e| {
-            // if error was expected, continue.
-            if (tc.err) continue;
-
-            std.debug.print("test case {s}\n", .{tc.s});
-            return e;
-        };
-        std.testing.expectEqualDeep(tc.exp, sel) catch |e| {
-            std.debug.print("test case {s} : {}\n", .{ tc.s, sel });
-            return e;
-        };
-    }
-}

src/browser/css/selector.zig

@@ -98,9 +98,6 @@ pub const PseudoClass = enum {
     placeholder,
     selection,
     spelling_error,
-    modal,
-    popover_open,
-    visible,
 
     pub const Error = error{
         InvalidPseudoClass,
@@ -116,108 +113,51 @@ pub const PseudoClass = enum {
     }
 
     pub fn parse(s: []const u8) Error!PseudoClass {
-        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 => {},
-        }
+        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;
         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,
@@ -306,8 +246,8 @@ pub const Selector = union(enum) {
     }
 
     // match returns true if the node matches the selector query.
-    pub fn match(s: *const Selector, n: anytype) !bool {
-        return switch (s.*) {
+    pub fn match(s: Selector, n: anytype) !bool {
+        return switch (s) {
             .tag => |v| n.isElement() and std.ascii.eqlIgnoreCase(v, try n.tag()),
             .id => |v| return n.isElement() and std.mem.eql(u8, v, try n.attr("id") orelse return false),
             .class => |v| return n.isElement() and word(try n.attr("class") orelse return false, v, false),
@@ -569,8 +509,6 @@ 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.
@@ -794,8 +732,8 @@ pub const Selector = union(enum) {
         return false;
     }
 
-    pub fn deinit(sel: *const Selector, alloc: std.mem.Allocator) void {
-        switch (sel.*) {
+    pub fn deinit(sel: Selector, alloc: std.mem.Allocator) void {
+        switch (sel) {
             .group => |v| {
                 for (v) |vv| vv.deinit(alloc);
                 alloc.free(v);

src/browser/cssom/CSSParser.zig

@@ -1,289 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const Allocator = std.mem.Allocator;
-
-const CSSConstants = struct {
-    const IMPORTANT = "!important";
-    const URL_PREFIX = "url(";
-};
-
-const CSSParserState = enum {
-    seek_name,
-    in_name,
-    seek_colon,
-    seek_value,
-    in_value,
-    in_quoted_value,
-    in_single_quoted_value,
-    in_url,
-    in_important,
-};
-
-const CSSDeclaration = struct {
-    name: []const u8,
-    value: []const u8,
-    is_important: bool,
-};
-
-const CSSParser = @This();
-state: CSSParserState,
-name_start: usize,
-name_end: usize,
-value_start: usize,
-position: usize,
-paren_depth: usize,
-escape_next: bool,
-
-pub fn init() CSSParser {
-    return .{
-        .state = .seek_name,
-        .name_start = 0,
-        .name_end = 0,
-        .value_start = 0,
-        .position = 0,
-        .paren_depth = 0,
-        .escape_next = false,
-    };
-}
-
-pub fn parseDeclarations(arena: Allocator, text: []const u8) ![]CSSDeclaration {
-    var parser = init();
-    var declarations: std.ArrayListUnmanaged(CSSDeclaration) = .empty;
-
-    while (parser.position < text.len) {
-        const c = text[parser.position];
-
-        switch (parser.state) {
-            .seek_name => {
-                if (!std.ascii.isWhitespace(c)) {
-                    parser.name_start = parser.position;
-                    parser.state = .in_name;
-                    continue;
-                }
-            },
-            .in_name => {
-                if (c == ':') {
-                    parser.name_end = parser.position;
-                    parser.state = .seek_value;
-                } else if (std.ascii.isWhitespace(c)) {
-                    parser.name_end = parser.position;
-                    parser.state = .seek_colon;
-                }
-            },
-            .seek_colon => {
-                if (c == ':') {
-                    parser.state = .seek_value;
-                } else if (!std.ascii.isWhitespace(c)) {
-                    parser.state = .seek_name;
-                    continue;
-                }
-            },
-            .seek_value => {
-                if (!std.ascii.isWhitespace(c)) {
-                    parser.value_start = parser.position;
-                    if (c == '"') {
-                        parser.state = .in_quoted_value;
-                    } else if (c == '\'') {
-                        parser.state = .in_single_quoted_value;
-                    } else if (c == 'u' and parser.position + CSSConstants.URL_PREFIX.len <= text.len and std.mem.startsWith(u8, text[parser.position..], CSSConstants.URL_PREFIX)) {
-                        parser.state = .in_url;
-                        parser.paren_depth = 1;
-                        parser.position += 3;
-                    } else {
-                        parser.state = .in_value;
-                        continue;
-                    }
-                }
-            },
-            .in_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '(') {
-                    parser.paren_depth += 1;
-                } else if (c == ')' and parser.paren_depth > 0) {
-                    parser.paren_depth -= 1;
-                } else if (c == ';' and parser.paren_depth == 0) {
-                    try parser.finishDeclaration(arena, &declarations, text);
-                    parser.state = .seek_name;
-                }
-            },
-            .in_quoted_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '"') {
-                    parser.state = .in_value;
-                }
-            },
-            .in_single_quoted_value => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '\'') {
-                    parser.state = .in_value;
-                }
-            },
-            .in_url => {
-                if (parser.escape_next) {
-                    parser.escape_next = false;
-                } else if (c == '\\') {
-                    parser.escape_next = true;
-                } else if (c == '(') {
-                    parser.paren_depth += 1;
-                } else if (c == ')') {
-                    parser.paren_depth -= 1;
-                    if (parser.paren_depth == 0) {
-                        parser.state = .in_value;
-                    }
-                }
-            },
-            .in_important => {},
-        }
-
-        parser.position += 1;
-    }
-
-    try parser.finalize(arena, &declarations, text);
-
-    return declarations.items;
-}
-
-fn finishDeclaration(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
-    const name = std.mem.trim(u8, text[self.name_start..self.name_end], &std.ascii.whitespace);
-    if (name.len == 0) return;
-
-    const raw_value = text[self.value_start..self.position];
-    const value = std.mem.trim(u8, raw_value, &std.ascii.whitespace);
-
-    var final_value = value;
-    var is_important = false;
-
-    if (std.mem.endsWith(u8, value, CSSConstants.IMPORTANT)) {
-        is_important = true;
-        final_value = std.mem.trimRight(u8, value[0 .. value.len - CSSConstants.IMPORTANT.len], &std.ascii.whitespace);
-    }
-
-    try declarations.append(arena, .{
-        .name = name,
-        .value = final_value,
-        .is_important = is_important,
-    });
-}
-
-fn finalize(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnmanaged(CSSDeclaration), text: []const u8) !void {
-    if (self.state != .in_value) {
-        return;
-    }
-    return self.finishDeclaration(arena, declarations, text);
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.Parser - Simple property" {
-    defer testing.reset();
-
-    const text = "color: red;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("red", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Property with !important" {
-    defer testing.reset();
-    const text = "margin: 10px !important;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("margin", declarations[0].name);
-    try testing.expectEqual("10px", declarations[0].value);
-    try testing.expectEqual(true, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Multiple properties" {
-    defer testing.reset();
-    const text = "color: red; font-size: 12px; margin: 5px !important;";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expect(declarations.len == 3);
-
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("red", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-
-    try testing.expectEqual("font-size", declarations[1].name);
-    try testing.expectEqual("12px", declarations[1].value);
-    try testing.expectEqual(false, declarations[1].is_important);
-
-    try testing.expectEqual("margin", declarations[2].name);
-    try testing.expectEqual("5px", declarations[2].value);
-    try testing.expectEqual(true, declarations[2].is_important);
-}
-
-test "Browser: CSS.Parser - Quoted value with semicolon" {
-    defer testing.reset();
-    const text = "content: \"Hello; world!\";";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("content", declarations[0].name);
-    try testing.expectEqual("\"Hello; world!\"", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - URL value" {
-    defer testing.reset();
-    const text = "background-image: url(\"test.png\");";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(1, declarations.len);
-    try testing.expectEqual("background-image", declarations[0].name);
-    try testing.expectEqual("url(\"test.png\")", declarations[0].value);
-    try testing.expectEqual(false, declarations[0].is_important);
-}
-
-test "Browser: CSS.Parser - Whitespace handling" {
-    defer testing.reset();
-    const text = "  color  :  purple  ;  margin  :  10px  ;  ";
-    const allocator = testing.arena_allocator;
-
-    const declarations = try CSSParser.parseDeclarations(allocator, text);
-
-    try testing.expectEqual(2, declarations.len);
-    try testing.expectEqual("color", declarations[0].name);
-    try testing.expectEqual("purple", declarations[0].value);
-    try testing.expectEqual("margin", declarations[1].name);
-    try testing.expectEqual("10px", declarations[1].value);
-}

src/browser/cssom/CSSRule.zig

@@ -1,41 +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 CSSStyleSheet = @import("CSSStyleSheet.zig");
-
-pub const Interfaces = .{
-    CSSRule,
-    CSSImportRule,
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/CSSRule
-const CSSRule = @This();
-css_text: []const u8,
-parent_rule: ?*CSSRule = null,
-parent_stylesheet: ?*CSSStyleSheet = null,
-
-pub const 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/CSSRuleList.zig

@@ -1,52 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const CSSRule = @import("CSSRule.zig");
-const StyleSheet = @import("StyleSheet.zig").StyleSheet;
-
-const CSSImportRule = CSSRule.CSSImportRule;
-
-const CSSRuleList = @This();
-list: std.ArrayListUnmanaged([]const u8),
-
-pub fn constructor() CSSRuleList {
-    return .{ .list = .empty };
-}
-
-pub fn _item(self: *CSSRuleList, _index: u32) ?CSSRule {
-    const index: usize = @intCast(_index);
-
-    if (index > self.list.items.len) {
-        return null;
-    }
-
-    // todo: for now, just return null.
-    // this depends on properly parsing CSSRule
-    return null;
-}
-
-pub fn get_length(self: *CSSRuleList) u32 {
-    return @intCast(self.list.items.len);
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.CSSRuleList" {
-    try testing.htmlRunner("cssom/css_rule_list.html");
-}

src/browser/cssom/CSSStyleDeclaration.zig

@@ -1,958 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const Page = @import("../page.zig").Page;
-const CSSRule = @import("CSSRule.zig");
-const CSSParser = @import("CSSParser.zig");
-
-const Property = struct {
-    value: []const u8,
-    priority: bool,
-};
-
-const CSSStyleDeclaration = @This();
-
-properties: std.StringArrayHashMapUnmanaged(Property),
-
-pub const empty: CSSStyleDeclaration = .{
-    .properties = .empty,
-};
-
-pub fn get_cssFloat(self: *const CSSStyleDeclaration) []const u8 {
-    return self._getPropertyValue("float");
-}
-
-pub fn set_cssFloat(self: *CSSStyleDeclaration, value: ?[]const u8, page: *Page) !void {
-    const final_value = value orelse "";
-    return self._setProperty("float", final_value, null, page);
-}
-
-pub fn get_cssText(self: *const CSSStyleDeclaration, page: *Page) ![]const u8 {
-    var buffer: std.ArrayListUnmanaged(u8) = .empty;
-    const writer = buffer.writer(page.call_arena);
-    var it = self.properties.iterator();
-    while (it.next()) |entry| {
-        const name = entry.key_ptr.*;
-        const property = entry.value_ptr;
-        const escaped = try escapeCSSValue(page.call_arena, property.value);
-        try writer.print("{s}: {s}", .{ name, escaped });
-        if (property.priority) {
-            try writer.writeAll(" !important; ");
-        } else {
-            try writer.writeAll("; ");
-        }
-    }
-    return buffer.items;
-}
-
-// TODO Propagate also upward to parent node
-pub fn set_cssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !void {
-    self.properties.clearRetainingCapacity();
-
-    // call_arena is safe here, because _setProperty will dupe the name
-    // using the page's longer-living arena.
-    const declarations = try CSSParser.parseDeclarations(page.call_arena, text);
-
-    for (declarations) |decl| {
-        if (!isValidPropertyName(decl.name)) {
-            continue;
-        }
-        const priority: ?[]const u8 = if (decl.is_important) "important" else null;
-        try self._setProperty(decl.name, decl.value, priority, page);
-    }
-}
-
-pub fn get_length(self: *const CSSStyleDeclaration) usize {
-    return self.properties.count();
-}
-
-pub fn get_parentRule(_: *const CSSStyleDeclaration) ?CSSRule {
-    return null;
-}
-
-pub fn _getPropertyPriority(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
-    const property = self.properties.getPtr(name) orelse return "";
-    return if (property.priority) "important" else "";
-}
-
-// TODO should handle properly shorthand properties and canonical forms
-pub fn _getPropertyValue(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
-    if (self.properties.getPtr(name)) |property| {
-        return property.value;
-    }
-
-    // default to everything being visible (unless it's been explicitly set)
-    if (std.mem.eql(u8, name, "visibility")) {
-        return "visible";
-    }
-
-    return "";
-}
-
-pub fn _item(self: *const CSSStyleDeclaration, index: usize) []const u8 {
-    const values = self.properties.entries.items(.key);
-    if (index >= values.len) {
-        return "";
-    }
-    return values[index];
-}
-
-pub fn _removeProperty(self: *CSSStyleDeclaration, name: []const u8) ![]const u8 {
-    const property = self.properties.fetchOrderedRemove(name) orelse return "";
-    return property.value.value;
-}
-
-pub fn _setProperty(self: *CSSStyleDeclaration, name: []const u8, value: []const u8, priority: ?[]const u8, page: *Page) !void {
-    const gop = try self.properties.getOrPut(page.arena, name);
-    if (!gop.found_existing) {
-        const owned_name = try page.arena.dupe(u8, name);
-        gop.key_ptr.* = owned_name;
-    }
-
-    const owned_value = try page.arena.dupe(u8, value);
-    const is_important = priority != null and std.ascii.eqlIgnoreCase(priority.?, "important");
-    gop.value_ptr.* = .{ .value = owned_value, .priority = is_important };
-}
-
-pub fn named_get(self: *const CSSStyleDeclaration, name: []const u8, _: *bool) []const u8 {
-    return self._getPropertyValue(name);
-}
-
-pub fn named_set(self: *CSSStyleDeclaration, name: []const u8, value: []const u8, _: *bool, page: *Page) !void {
-    return self._setProperty(name, value, null, page);
-}
-
-fn isNumericWithUnit(value: []const u8) bool {
-    if (value.len == 0) {
-        return false;
-    }
-
-    const first = value[0];
-
-    if (!std.ascii.isDigit(first) and first != '+' and first != '-' and first != '.') {
-        return false;
-    }
-
-    var i: usize = 0;
-    var has_digit = false;
-    var decimal_point = false;
-
-    while (i < value.len) : (i += 1) {
-        const c = value[i];
-        if (std.ascii.isDigit(c)) {
-            has_digit = true;
-        } else if (c == '.' and !decimal_point) {
-            decimal_point = true;
-        } else if ((c == 'e' or c == 'E') and has_digit) {
-            if (i + 1 >= value.len) return false;
-            if (value[i + 1] != '+' and value[i + 1] != '-' and !std.ascii.isDigit(value[i + 1])) break;
-            i += 1;
-            if (value[i] == '+' or value[i] == '-') {
-                i += 1;
-            }
-            var has_exp_digits = false;
-            while (i < value.len and std.ascii.isDigit(value[i])) : (i += 1) {
-                has_exp_digits = true;
-            }
-            if (!has_exp_digits) return false;
-            break;
-        } else if (c != '-' and c != '+') {
-            break;
-        }
-    }
-
-    if (!has_digit) {
-        return false;
-    }
-
-    if (i == value.len) {
-        return true;
-    }
-
-    const unit = value[i..];
-    return CSSKeywords.isValidUnit(unit);
-}
-
-fn isHexColor(value: []const u8) bool {
-    if (value.len == 0) {
-        return false;
-    }
-    if (value[0] != '#') {
-        return false;
-    }
-
-    const hex_part = value[1..];
-    if (hex_part.len != 3 and hex_part.len != 6 and hex_part.len != 8) {
-        return false;
-    }
-
-    for (hex_part) |c| {
-        if (!std.ascii.isHex(c)) {
-            return false;
-        }
-    }
-
-    return true;
-}
-
-fn isMultiValueProperty(value: []const u8) bool {
-    var parts = std.mem.splitAny(u8, value, " ");
-    var multi_value_parts: usize = 0;
-    var all_parts_valid = true;
-
-    while (parts.next()) |part| {
-        if (part.len == 0) continue;
-        multi_value_parts += 1;
-
-        if (isNumericWithUnit(part)) {
-            continue;
-        }
-        if (isHexColor(part)) {
-            continue;
-        }
-        if (CSSKeywords.isKnownKeyword(part)) {
-            continue;
-        }
-        if (CSSKeywords.startsWithFunction(part)) {
-            continue;
-        }
-
-        all_parts_valid = false;
-        break;
-    }
-
-    return multi_value_parts >= 2 and all_parts_valid;
-}
-
-fn isAlreadyQuoted(value: []const u8) bool {
-    return value.len >= 2 and ((value[0] == '"' and value[value.len - 1] == '"') or
-        (value[0] == '\'' and value[value.len - 1] == '\''));
-}
-
-fn isValidPropertyName(name: []const u8) bool {
-    if (name.len == 0) return false;
-
-    if (std.mem.startsWith(u8, name, "--")) {
-        if (name.len == 2) return false;
-        for (name[2..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-' and c != '_') {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    const first_char = name[0];
-    if (!std.ascii.isAlphabetic(first_char) and first_char != '-') {
-        return false;
-    }
-
-    if (first_char == '-') {
-        if (name.len < 2) return false;
-
-        if (!std.ascii.isAlphabetic(name[1])) {
-            return false;
-        }
-
-        for (name[2..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-') {
-                return false;
-            }
-        }
-    } else {
-        for (name[1..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '-') {
-                return false;
-            }
-        }
-    }
-
-    return true;
-}
-
-fn extractImportant(value: []const u8) struct { value: []const u8, is_important: bool } {
-    const trimmed = std.mem.trim(u8, value, &std.ascii.whitespace);
-
-    if (std.mem.endsWith(u8, trimmed, "!important")) {
-        const clean_value = std.mem.trimRight(u8, trimmed[0 .. trimmed.len - 10], &std.ascii.whitespace);
-        return .{ .value = clean_value, .is_important = true };
-    }
-
-    return .{ .value = trimmed, .is_important = false };
-}
-
-fn needsQuotes(value: []const u8) bool {
-    if (value.len == 0) return true;
-    if (isAlreadyQuoted(value)) return false;
-
-    if (CSSKeywords.containsSpecialChar(value)) {
-        return true;
-    }
-
-    if (std.mem.indexOfScalar(u8, value, ' ') == null) {
-        return false;
-    }
-
-    const is_url = std.mem.startsWith(u8, value, "url(");
-    const is_function = CSSKeywords.startsWithFunction(value);
-
-    return !isMultiValueProperty(value) and
-        !is_url and
-        !is_function;
-}
-
-fn escapeCSSValue(arena: std.mem.Allocator, value: []const u8) ![]const u8 {
-    if (!needsQuotes(value)) {
-        return value;
-    }
-    var out: std.ArrayListUnmanaged(u8) = .empty;
-
-    // We'll need at least this much space, +2 for the quotes
-    try out.ensureTotalCapacity(arena, value.len + 2);
-    const writer = out.writer(arena);
-
-    try writer.writeByte('"');
-
-    for (value, 0..) |c, i| {
-        switch (c) {
-            '"' => try writer.writeAll("\\\""),
-            '\\' => try writer.writeAll("\\\\"),
-            '\n' => try writer.writeAll("\\A "),
-            '\r' => try writer.writeAll("\\D "),
-            '\t' => try writer.writeAll("\\9 "),
-            0...8, 11, 12, 14...31, 127 => {
-                try writer.print("\\{x}", .{c});
-                if (i + 1 < value.len and std.ascii.isHex(value[i + 1])) {
-                    try writer.writeByte(' ');
-                }
-            },
-            else => try writer.writeByte(c),
-        }
-    }
-
-    try writer.writeByte('"');
-    return out.items;
-}
-
-fn isKnownKeyword(value: []const u8) bool {
-    return CSSKeywords.isKnownKeyword(value);
-}
-
-fn containsSpecialChar(value: []const u8) bool {
-    return CSSKeywords.containsSpecialChar(value);
-}
-
-const CSSKeywords = struct {
-    const BORDER_STYLES = [_][]const u8{
-        "none", "solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset",
-    };
-
-    const COLOR_NAMES = [_][]const u8{
-        "black",        "white",   "red", "green", "blue", "yellow", "purple", "gray", "transparent",
-        "currentColor", "inherit",
-    };
-
-    const POSITION_KEYWORDS = [_][]const u8{
-        "auto", "center", "left", "right", "top", "bottom",
-    };
-
-    const BACKGROUND_REPEAT = [_][]const u8{
-        "repeat", "no-repeat", "repeat-x", "repeat-y", "space", "round",
-    };
-
-    const FONT_STYLES = [_][]const u8{
-        "normal", "italic", "oblique", "bold", "bolder", "lighter",
-    };
-
-    const FONT_SIZES = [_][]const u8{
-        "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large",
-        "smaller",  "larger",
-    };
-
-    const FONT_FAMILIES = [_][]const u8{
-        "serif", "sans-serif", "monospace", "cursive", "fantasy", "system-ui",
-    };
-
-    const CSS_GLOBAL = [_][]const u8{
-        "initial", "inherit", "unset", "revert",
-    };
-
-    const DISPLAY_VALUES = [_][]const u8{
-        "block", "inline", "inline-block", "flex", "grid", "none",
-    };
-
-    const UNITS = [_][]const u8{
-        // LENGTH
-        "px",   "em", "rem", "vw",  "vh",  "vmin", "vmax", "%", "pt", "pc", "in",  "cm",  "mm",
-        "ex",   "ch", "fr",
-
-        // ANGLE
-         "deg", "rad", "grad", "turn",
-
-        // TIME
-        "s", "ms",
-
-        // FREQUENCY
-        "hz", "khz",
-
-        // RESOLUTION
-        "dpi", "dpcm",
-        "dppx",
-    };
-
-    const SPECIAL_CHARS = [_]u8{
-        '"', '\'', ';', '{', '}', '\\', '<', '>', '/', '\n', '\t', '\r', '\x00', '\x7F',
-    };
-
-    const FUNCTIONS = [_][]const u8{
-        "rgb(",             "rgba(",            "hsl(",            "hsla(",      "url(",    "calc(",  "var(",  "attr(",
-        "linear-gradient(", "radial-gradient(", "conic-gradient(", "translate(", "rotate(", "scale(", "skew(", "matrix(",
-    };
-
-    const KEYWORDS = BORDER_STYLES ++ COLOR_NAMES ++ POSITION_KEYWORDS ++
-        BACKGROUND_REPEAT ++ FONT_STYLES ++ FONT_SIZES ++ FONT_FAMILIES ++
-        CSS_GLOBAL ++ DISPLAY_VALUES;
-
-    const MAX_KEYWORD_LEN = lengthOfLongestValue(&KEYWORDS);
-
-    pub fn isKnownKeyword(value: []const u8) bool {
-        if (value.len > MAX_KEYWORD_LEN) {
-            return false;
-        }
-        var buf: [MAX_KEYWORD_LEN]u8 = undefined;
-        const normalized = std.ascii.lowerString(&buf, value);
-
-        for (KEYWORDS) |keyword| {
-            if (std.ascii.eqlIgnoreCase(normalized, keyword)) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    pub fn containsSpecialChar(value: []const u8) bool {
-        return std.mem.indexOfAny(u8, value, &SPECIAL_CHARS) != null;
-    }
-
-    const MAX_UNIT_LEN = lengthOfLongestValue(&UNITS);
-
-    pub fn isValidUnit(unit: []const u8) bool {
-        if (unit.len > MAX_UNIT_LEN) {
-            return false;
-        }
-        var buf: [MAX_UNIT_LEN]u8 = undefined;
-        const normalized = std.ascii.lowerString(&buf, unit);
-
-        for (UNITS) |u| {
-            if (std.mem.eql(u8, normalized, u)) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    pub fn startsWithFunction(value: []const u8) bool {
-        const pos = std.mem.indexOfScalar(u8, value, '(') orelse return false;
-        if (pos == 0) return false;
-
-        if (std.mem.indexOfScalarPos(u8, value, pos, ')') == null) {
-            return false;
-        }
-        const function_name = value[0..pos];
-        return isValidFunctionName(function_name);
-    }
-
-    fn isValidFunctionName(name: []const u8) bool {
-        if (name.len == 0) return false;
-
-        const first = name[0];
-        if (!std.ascii.isAlphabetic(first) and first != '_' and first != '-') {
-            return false;
-        }
-
-        for (name[1..]) |c| {
-            if (!std.ascii.isAlphanumeric(c) and c != '_' and c != '-') {
-                return false;
-            }
-        }
-
-        return true;
-    }
-};
-
-fn lengthOfLongestValue(values: []const []const u8) usize {
-    var max: usize = 0;
-    for (values) |v| {
-        max = @max(v.len, max);
-    }
-    return max;
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.StyleDeclaration" {
-    try testing.htmlRunner("cssom/css_style_declaration.html");
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - valid numbers with units" {
-    try testing.expect(isNumericWithUnit("10px"));
-    try testing.expect(isNumericWithUnit("3.14em"));
-    try testing.expect(isNumericWithUnit("-5rem"));
-    try testing.expect(isNumericWithUnit("+12.5%"));
-    try testing.expect(isNumericWithUnit("0vh"));
-    try testing.expect(isNumericWithUnit(".5vw"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - scientific notation" {
-    try testing.expect(isNumericWithUnit("1e5px"));
-    try testing.expect(isNumericWithUnit("2.5E-3em"));
-    try testing.expect(isNumericWithUnit("1e+2rem"));
-    try testing.expect(isNumericWithUnit("-3.14e10px"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - edge cases and invalid inputs" {
-    try testing.expect(!isNumericWithUnit(""));
-
-    try testing.expect(!isNumericWithUnit("px"));
-    try testing.expect(!isNumericWithUnit("--px"));
-    try testing.expect(!isNumericWithUnit(".px"));
-
-    try testing.expect(!isNumericWithUnit("1e"));
-    try testing.expect(!isNumericWithUnit("1epx"));
-    try testing.expect(!isNumericWithUnit("1e+"));
-    try testing.expect(!isNumericWithUnit("1e+px"));
-
-    try testing.expect(!isNumericWithUnit("1.2.3px"));
-
-    try testing.expect(!isNumericWithUnit("10xyz"));
-    try testing.expect(!isNumericWithUnit("5invalid"));
-
-    try testing.expect(isNumericWithUnit("10"));
-    try testing.expect(isNumericWithUnit("3.14"));
-    try testing.expect(isNumericWithUnit("-5"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - valid hex colors" {
-    try testing.expect(isHexColor("#000"));
-    try testing.expect(isHexColor("#fff"));
-    try testing.expect(isHexColor("#123456"));
-    try testing.expect(isHexColor("#abcdef"));
-    try testing.expect(isHexColor("#ABCDEF"));
-    try testing.expect(isHexColor("#12345678"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - invalid hex colors" {
-    try testing.expect(!isHexColor(""));
-    try testing.expect(!isHexColor("#"));
-    try testing.expect(!isHexColor("000"));
-    try testing.expect(!isHexColor("#00"));
-    try testing.expect(!isHexColor("#0000"));
-    try testing.expect(!isHexColor("#00000"));
-    try testing.expect(!isHexColor("#0000000"));
-    try testing.expect(!isHexColor("#000000000"));
-    try testing.expect(!isHexColor("#gggggg"));
-    try testing.expect(!isHexColor("#123xyz"));
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - valid multi-value properties" {
-    try testing.expect(isMultiValueProperty("10px 20px"));
-    try testing.expect(isMultiValueProperty("solid red"));
-    try testing.expect(isMultiValueProperty("#fff black"));
-    try testing.expect(isMultiValueProperty("1em 2em 3em 4em"));
-    try testing.expect(isMultiValueProperty("rgb(255,0,0) solid"));
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - invalid multi-value properties" {
-    try testing.expect(!isMultiValueProperty(""));
-    try testing.expect(!isMultiValueProperty("10px"));
-    try testing.expect(!isMultiValueProperty("invalid unknown"));
-    try testing.expect(!isMultiValueProperty("10px invalid"));
-    try testing.expect(!isMultiValueProperty("   "));
-}
-
-test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - various quoting scenarios" {
-    try testing.expect(isAlreadyQuoted("\"hello\""));
-    try testing.expect(isAlreadyQuoted("'world'"));
-    try testing.expect(isAlreadyQuoted("\"\""));
-    try testing.expect(isAlreadyQuoted("''"));
-
-    try testing.expect(!isAlreadyQuoted(""));
-    try testing.expect(!isAlreadyQuoted("hello"));
-    try testing.expect(!isAlreadyQuoted("\""));
-    try testing.expect(!isAlreadyQuoted("'"));
-    try testing.expect(!isAlreadyQuoted("\"hello'"));
-    try testing.expect(!isAlreadyQuoted("'hello\""));
-    try testing.expect(!isAlreadyQuoted("\"hello"));
-    try testing.expect(!isAlreadyQuoted("hello\""));
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - valid property names" {
-    try testing.expect(isValidPropertyName("color"));
-    try testing.expect(isValidPropertyName("background-color"));
-    try testing.expect(isValidPropertyName("-webkit-transform"));
-    try testing.expect(isValidPropertyName("font-size"));
-    try testing.expect(isValidPropertyName("margin-top"));
-    try testing.expect(isValidPropertyName("z-index"));
-    try testing.expect(isValidPropertyName("line-height"));
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - invalid property names" {
-    try testing.expect(!isValidPropertyName(""));
-    try testing.expect(!isValidPropertyName("123color"));
-    try testing.expect(!isValidPropertyName("color!"));
-    try testing.expect(!isValidPropertyName("color space"));
-    try testing.expect(!isValidPropertyName("@color"));
-    try testing.expect(!isValidPropertyName("color.test"));
-    try testing.expect(!isValidPropertyName("color_test"));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - with and without !important" {
-    var result = extractImportant("red !important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red", result.value);
-
-    result = extractImportant("blue");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("blue", result.value);
-
-    result = extractImportant("  green  !important  ");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("green", result.value);
-
-    result = extractImportant("!important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("important", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: needsQuotes - various scenarios" {
-    try testing.expect(needsQuotes(""));
-    try testing.expect(needsQuotes("hello world"));
-    try testing.expect(needsQuotes("test;"));
-    try testing.expect(needsQuotes("a{b}"));
-    try testing.expect(needsQuotes("test\"quote"));
-
-    try testing.expect(!needsQuotes("\"already quoted\""));
-    try testing.expect(!needsQuotes("'already quoted'"));
-    try testing.expect(!needsQuotes("url(image.png)"));
-    try testing.expect(!needsQuotes("rgb(255, 0, 0)"));
-    try testing.expect(!needsQuotes("10px 20px"));
-    try testing.expect(!needsQuotes("simple"));
-}
-
-test "Browser: CSS.StyleDeclaration: escapeCSSValue - escaping various characters" {
-    const allocator = testing.arena_allocator;
-
-    var result = try escapeCSSValue(allocator, "simple");
-    try testing.expectEqual("simple", result);
-
-    result = try escapeCSSValue(allocator, "\"already quoted\"");
-    try testing.expectEqual("\"already quoted\"", result);
-
-    result = try escapeCSSValue(allocator, "test\"quote");
-    try testing.expectEqual("\"test\\\"quote\"", result);
-
-    result = try escapeCSSValue(allocator, "test\nline");
-    try testing.expectEqual("\"test\\A line\"", result);
-
-    result = try escapeCSSValue(allocator, "test\\back");
-    try testing.expectEqual("\"test\\\\back\"", result);
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.isKnownKeyword - case sensitivity" {
-    try testing.expect(CSSKeywords.isKnownKeyword("red"));
-    try testing.expect(CSSKeywords.isKnownKeyword("solid"));
-    try testing.expect(CSSKeywords.isKnownKeyword("center"));
-    try testing.expect(CSSKeywords.isKnownKeyword("inherit"));
-
-    try testing.expect(CSSKeywords.isKnownKeyword("RED"));
-    try testing.expect(CSSKeywords.isKnownKeyword("Red"));
-    try testing.expect(CSSKeywords.isKnownKeyword("SOLID"));
-    try testing.expect(CSSKeywords.isKnownKeyword("Center"));
-
-    try testing.expect(!CSSKeywords.isKnownKeyword("invalid"));
-    try testing.expect(!CSSKeywords.isKnownKeyword("unknown"));
-    try testing.expect(!CSSKeywords.isKnownKeyword(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.containsSpecialChar - various special characters" {
-    try testing.expect(CSSKeywords.containsSpecialChar("test\"quote"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test'quote"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test;end"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test{brace"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test}brace"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test\\back"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test<angle"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test>angle"));
-    try testing.expect(CSSKeywords.containsSpecialChar("test/slash"));
-
-    try testing.expect(!CSSKeywords.containsSpecialChar("normal-text"));
-    try testing.expect(!CSSKeywords.containsSpecialChar("text123"));
-    try testing.expect(!CSSKeywords.containsSpecialChar(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.isValidUnit - various units" {
-    try testing.expect(CSSKeywords.isValidUnit("px"));
-    try testing.expect(CSSKeywords.isValidUnit("em"));
-    try testing.expect(CSSKeywords.isValidUnit("rem"));
-    try testing.expect(CSSKeywords.isValidUnit("%"));
-
-    try testing.expect(CSSKeywords.isValidUnit("deg"));
-    try testing.expect(CSSKeywords.isValidUnit("rad"));
-
-    try testing.expect(CSSKeywords.isValidUnit("s"));
-    try testing.expect(CSSKeywords.isValidUnit("ms"));
-
-    try testing.expect(CSSKeywords.isValidUnit("PX"));
-
-    try testing.expect(!CSSKeywords.isValidUnit("invalid"));
-    try testing.expect(!CSSKeywords.isValidUnit(""));
-}
-
-test "Browser: CSS.StyleDeclaration: CSSKeywords.startsWithFunction - function detection" {
-    try testing.expect(CSSKeywords.startsWithFunction("rgb(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("rgba(255, 0, 0, 0.5)"));
-    try testing.expect(CSSKeywords.startsWithFunction("url(image.png)"));
-    try testing.expect(CSSKeywords.startsWithFunction("calc(100% - 20px)"));
-    try testing.expect(CSSKeywords.startsWithFunction("var(--custom-property)"));
-    try testing.expect(CSSKeywords.startsWithFunction("linear-gradient(to right, red, blue)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("custom-function(args)"));
-    try testing.expect(CSSKeywords.startsWithFunction("unknown(test)"));
-
-    try testing.expect(!CSSKeywords.startsWithFunction("not-a-function"));
-    try testing.expect(!CSSKeywords.startsWithFunction("missing-paren)"));
-    try testing.expect(!CSSKeywords.startsWithFunction("missing-close("));
-    try testing.expect(!CSSKeywords.startsWithFunction(""));
-    try testing.expect(!CSSKeywords.startsWithFunction("rgb"));
-}
-
-test "Browser: CSS.StyleDeclaration: isNumericWithUnit - whitespace handling" {
-    try testing.expect(!isNumericWithUnit(" 10px"));
-    try testing.expect(!isNumericWithUnit("10 px"));
-    try testing.expect(!isNumericWithUnit("10px "));
-    try testing.expect(!isNumericWithUnit(" 10 px "));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - whitespace edge cases" {
-    var result = extractImportant("   ");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("\t\n\r !important\t\n");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("", result.value);
-
-    result = extractImportant("red\t!important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - mixed case handling" {
-    try testing.expect(isHexColor("#AbC"));
-    try testing.expect(isHexColor("#123aBc"));
-    try testing.expect(isHexColor("#FFffFF"));
-    try testing.expect(isHexColor("#000FFF"));
-}
-
-test "Browser: CSS.StyleDeclaration: edge case - very long inputs" {
-    const long_valid = "a" ** 1000 ++ "px";
-    try testing.expect(!isNumericWithUnit(long_valid)); // not numeric
-
-    const long_property = "a-" ** 100 ++ "property";
-    try testing.expect(isValidPropertyName(long_property));
-
-    const long_hex = "#" ++ "a" ** 20;
-    try testing.expect(!isHexColor(long_hex));
-}
-
-test "Browser: CSS.StyleDeclaration: boundary conditions - numeric parsing" {
-    try testing.expect(isNumericWithUnit("0px"));
-    try testing.expect(isNumericWithUnit("0.0px"));
-    try testing.expect(isNumericWithUnit(".0px"));
-    try testing.expect(isNumericWithUnit("0.px"));
-
-    try testing.expect(isNumericWithUnit("999999999px"));
-    try testing.expect(isNumericWithUnit("1.7976931348623157e+308px"));
-
-    try testing.expect(isNumericWithUnit("0.000000001px"));
-    try testing.expect(isNumericWithUnit("1e-100px"));
-}
-
-test "Browser: CSS.StyleDeclaration: extractImportant - malformed important declarations" {
-    var result = extractImportant("red ! important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red ! important", result.value);
-
-    result = extractImportant("red !Important");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red !Important", result.value);
-
-    result = extractImportant("red !IMPORTANT");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("red !IMPORTANT", result.value);
-
-    result = extractImportant("!importantred");
-    try testing.expect(!result.is_important);
-    try testing.expectEqual("!importantred", result.value);
-
-    result = extractImportant("red !important !important");
-    try testing.expect(result.is_important);
-    try testing.expectEqual("red !important", result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: isMultiValueProperty - complex spacing scenarios" {
-    try testing.expect(isMultiValueProperty("10px    20px"));
-    try testing.expect(isMultiValueProperty("solid     red"));
-
-    try testing.expect(isMultiValueProperty("  10px 20px  "));
-
-    try testing.expect(!isMultiValueProperty("10px\t20px"));
-    try testing.expect(!isMultiValueProperty("10px\n20px"));
-
-    try testing.expect(isMultiValueProperty("10px   20px   30px"));
-}
-
-test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - edge cases with quotes" {
-    try testing.expect(isAlreadyQuoted("\"'hello'\""));
-    try testing.expect(isAlreadyQuoted("'\"hello\"'"));
-
-    try testing.expect(isAlreadyQuoted("\"hello\\\"world\""));
-    try testing.expect(isAlreadyQuoted("'hello\\'world'"));
-
-    try testing.expect(!isAlreadyQuoted("\"hello"));
-    try testing.expect(!isAlreadyQuoted("hello\""));
-    try testing.expect(!isAlreadyQuoted("'hello"));
-    try testing.expect(!isAlreadyQuoted("hello'"));
-
-    try testing.expect(isAlreadyQuoted("\"a\""));
-    try testing.expect(isAlreadyQuoted("'b'"));
-}
-
-test "Browser: CSS.StyleDeclaration: needsQuotes - function and URL edge cases" {
-    try testing.expect(!needsQuotes("rgb(255, 0, 0)"));
-    try testing.expect(!needsQuotes("calc(100% - 20px)"));
-
-    try testing.expect(!needsQuotes("url(path with spaces.jpg)"));
-
-    try testing.expect(!needsQuotes("linear-gradient(to right, red, blue)"));
-
-    try testing.expect(needsQuotes("rgb(255, 0, 0"));
-}
-
-test "Browser: CSS.StyleDeclaration: escapeCSSValue - control characters and Unicode" {
-    const allocator = testing.arena_allocator;
-
-    var result = try escapeCSSValue(allocator, "test\ttab");
-    try testing.expectEqual("\"test\\9 tab\"", result);
-
-    result = try escapeCSSValue(allocator, "test\rreturn");
-    try testing.expectEqual("\"test\\D return\"", result);
-
-    result = try escapeCSSValue(allocator, "test\x00null");
-    try testing.expectEqual("\"test\\0null\"", result);
-
-    result = try escapeCSSValue(allocator, "test\x7Fdel");
-    try testing.expectEqual("\"test\\7f del\"", result);
-
-    result = try escapeCSSValue(allocator, "test\"quote\nline\\back");
-    try testing.expectEqual("\"test\\\"quote\\A line\\\\back\"", result);
-}
-
-test "Browser: CSS.StyleDeclaration: isValidPropertyName - CSS custom properties and vendor prefixes" {
-    try testing.expect(isValidPropertyName("--custom-color"));
-    try testing.expect(isValidPropertyName("--my-variable"));
-    try testing.expect(isValidPropertyName("--123"));
-
-    try testing.expect(isValidPropertyName("-webkit-transform"));
-    try testing.expect(isValidPropertyName("-moz-border-radius"));
-    try testing.expect(isValidPropertyName("-ms-filter"));
-    try testing.expect(isValidPropertyName("-o-transition"));
-
-    try testing.expect(!isValidPropertyName("-123invalid"));
-    try testing.expect(!isValidPropertyName("--"));
-    try testing.expect(!isValidPropertyName("-"));
-}
-
-test "Browser: CSS.StyleDeclaration: startsWithFunction - case sensitivity and partial matches" {
-    try testing.expect(CSSKeywords.startsWithFunction("RGB(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("Rgb(255, 0, 0)"));
-    try testing.expect(CSSKeywords.startsWithFunction("URL(image.png)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("rg(something)"));
-    try testing.expect(CSSKeywords.startsWithFunction("ur(something)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("rgb(1,2,3)"));
-    try testing.expect(CSSKeywords.startsWithFunction("rgba(1,2,3,4)"));
-
-    try testing.expect(CSSKeywords.startsWithFunction("my-custom-function(args)"));
-    try testing.expect(CSSKeywords.startsWithFunction("function-with-dashes(test)"));
-
-    try testing.expect(!CSSKeywords.startsWithFunction("123function(test)"));
-}
-
-test "Browser: CSS.StyleDeclaration: isHexColor - Unicode and invalid characters" {
-    try testing.expect(!isHexColor("#ghijkl"));
-    try testing.expect(!isHexColor("#12345g"));
-    try testing.expect(!isHexColor("#xyz"));
-
-    try testing.expect(!isHexColor("#АВС"));
-
-    try testing.expect(!isHexColor("#1234567g"));
-    try testing.expect(!isHexColor("#g2345678"));
-}
-
-test "Browser: CSS.StyleDeclaration: complex integration scenarios" {
-    const allocator = testing.arena_allocator;
-
-    try testing.expect(isMultiValueProperty("rgb(255,0,0) url(bg.jpg)"));
-
-    try testing.expect(!needsQuotes("calc(100% - 20px)"));
-
-    const result = try escapeCSSValue(allocator, "fake(function with spaces");
-    try testing.expectEqual("\"fake(function with spaces\"", result);
-
-    const important_result = extractImportant("rgb(255,0,0) !important");
-    try testing.expect(important_result.is_important);
-    try testing.expectEqual("rgb(255,0,0)", important_result.value);
-}
-
-test "Browser: CSS.StyleDeclaration: performance edge cases - empty and minimal inputs" {
-    try testing.expect(!isNumericWithUnit(""));
-    try testing.expect(!isHexColor(""));
-    try testing.expect(!isMultiValueProperty(""));
-    try testing.expect(!isAlreadyQuoted(""));
-    try testing.expect(!isValidPropertyName(""));
-    try testing.expect(needsQuotes(""));
-    try testing.expect(!CSSKeywords.isKnownKeyword(""));
-    try testing.expect(!CSSKeywords.containsSpecialChar(""));
-    try testing.expect(!CSSKeywords.isValidUnit(""));
-    try testing.expect(!CSSKeywords.startsWithFunction(""));
-
-    try testing.expect(!isNumericWithUnit("a"));
-    try testing.expect(!isHexColor("a"));
-    try testing.expect(!isMultiValueProperty("a"));
-    try testing.expect(!isAlreadyQuoted("a"));
-    try testing.expect(isValidPropertyName("a"));
-    try testing.expect(!needsQuotes("a"));
-}

src/browser/cssom/CSSStyleSheet.zig

@@ -1,97 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-
-const Env = @import("../env.zig").Env;
-const Page = @import("../page.zig").Page;
-const StyleSheet = @import("StyleSheet.zig");
-const CSSRuleList = @import("CSSRuleList.zig");
-const CSSImportRule = @import("CSSRule.zig").CSSImportRule;
-
-const CSSStyleSheet = @This();
-pub const prototype = *StyleSheet;
-
-proto: StyleSheet,
-css_rules: CSSRuleList,
-owner_rule: ?*CSSImportRule,
-
-const CSSStyleSheetOpts = struct {
-    base_url: ?[]const u8 = null,
-    // TODO: Suupport media
-    disabled: bool = false,
-};
-
-pub fn constructor(_opts: ?CSSStyleSheetOpts) !CSSStyleSheet {
-    const opts = _opts orelse CSSStyleSheetOpts{};
-    return .{
-        .proto = .{ .disabled = opts.disabled },
-        .css_rules = .constructor(),
-        .owner_rule = null,
-    };
-}
-
-pub fn get_ownerRule(_: *CSSStyleSheet) ?*CSSImportRule {
-    return null;
-}
-
-pub fn get_cssRules(self: *CSSStyleSheet) *CSSRuleList {
-    return &self.css_rules;
-}
-
-pub fn _insertRule(self: *CSSStyleSheet, rule: []const u8, _index: ?usize, page: *Page) !usize {
-    const index = _index orelse 0;
-    if (index > self.css_rules.list.items.len) {
-        return error.IndexSize;
-    }
-
-    const arena = page.arena;
-    try self.css_rules.list.insert(arena, index, try arena.dupe(u8, rule));
-    return index;
-}
-
-pub fn _deleteRule(self: *CSSStyleSheet, index: usize) !void {
-    if (index > self.css_rules.list.items.len) {
-        return error.IndexSize;
-    }
-
-    _ = self.css_rules.list.orderedRemove(index);
-}
-
-pub fn _replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !Env.Promise {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
-    // parse text and re-populate self.css_rules
-
-    const resolver = page.main_context.createPromiseResolver();
-    try resolver.resolve({});
-    return resolver.promise();
-}
-
-pub fn _replaceSync(self: *CSSStyleSheet, text: []const u8) !void {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
-    // parse text and re-populate self.css_rules
-}
-
-const testing = @import("../../testing.zig");
-test "Browser: CSS.StyleSheet" {
-    try testing.htmlRunner("cssom/css_stylesheet.html");
-}

src/browser/cssom/StyleSheet.zig

@@ -1,55 +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 parser = @import("../netsurf.zig");
-
-// https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet#specifications
-const StyleSheet = @This();
-
-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/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_style_declaration.zig

@@ -0,0 +1,247 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const CSSParser = @import("./css_parser.zig").CSSParser;
+const CSSValueAnalyzer = @import("./css_value_analyzer.zig").CSSValueAnalyzer;
+const Page = @import("../page.zig").Page;
+
+pub const Interfaces = .{
+    CSSStyleDeclaration,
+    CSSRule,
+};
+
+const CSSRule = struct {};
+
+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() ?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_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

@@ -1,25 +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/>.
-
-pub const Interfaces = .{
-    @import("StyleSheet.zig"),
-    @import("CSSStyleSheet.zig"),
-    @import("CSSStyleDeclaration.zig"),
-    @import("CSSRuleList.zig"),
-    @import("CSSRule.zig").Interfaces,
-};

src/browser/datauri.zig

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

src/browser/dom/Animation.zig

@@ -1,109 +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 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: DOM.Animation" {
-    try testing.htmlRunner("dom/animation.html");
-}

src/browser/dom/MessageChannel.zig

@@ -1,291 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../../log.zig");
-const parser = @import("../netsurf.zig");
-
-const 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: DOM.MessageChannel" {
-    try testing.htmlRunner("dom/message_channel.html");
-}

src/browser/dom/attribute.zig

@@ -15,6 +15,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 parser = @import("../netsurf.zig");
 
 const Node = @import("node.zig").Node;
@@ -46,14 +47,7 @@ pub const Attr = struct {
     }
 
     pub fn set_value(self: *parser.Attribute, v: []const u8) !?[]const u8 {
-        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);
-        }
+        try parser.attributeSetValue(self, v);
         return v;
     }
 
@@ -70,6 +64,32 @@ pub const Attr = struct {
 // -----
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Attribute" {
-    try testing.htmlRunner("dom/attribute.html");
+test "Browser.DOM.Attribute" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a = document.createAttributeNS('foo', 'bar')", "undefined" },
+        .{ "a.namespaceURI", "foo" },
+        .{ "a.prefix", "null" },
+        .{ "a.localName", "bar" },
+        .{ "a.name", "bar" },
+        .{ "a.value", "" },
+        // TODO: libdom has a bug here: the created attr has no parent, it
+        // causes a panic w/ libdom when setting the value.
+        //.{ "a.value = 'nok'", "nok" },
+        .{ "a.ownerElement", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let b = document.getElementById('link').getAttributeNode('class')", "undefined" },
+        .{ "b.name", "class" },
+        .{ "b.value", "ok" },
+        .{ "b.value = 'nok'", "nok" },
+        .{ "b.value", "nok" },
+        .{ "b.value = null", "null" },
+        .{ "b.value", "null" },
+        .{ "b.value = 'ok'", "ok" },
+        .{ "b.ownerElement.id", "link" },
+    }, .{});
 }

src/browser/dom/character_data.zig

@@ -24,8 +24,7 @@ const Node = @import("node.zig").Node;
 const Comment = @import("comment.zig").Comment;
 const Text = @import("text.zig");
 const ProcessingInstruction = @import("processing_instruction.zig").ProcessingInstruction;
-const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
+const HTMLElem = @import("../html/elements.zig");
 
 // CharacterData interfaces
 pub const Interfaces = .{
@@ -50,20 +49,20 @@ pub const CharacterData = struct {
         return try parser.characterDataLength(self);
     }
 
-    pub fn get_nextElementSibling(self: *parser.CharacterData) !?ElementUnion {
+    pub fn get_nextElementSibling(self: *parser.CharacterData) !?HTMLElem.Union {
         const res = try parser.nodeNextElementSibling(parser.characterDataToNode(self));
         if (res == null) {
             return null;
         }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
     }
 
-    pub fn get_previousElementSibling(self: *parser.CharacterData) !?ElementUnion {
+    pub fn get_previousElementSibling(self: *parser.CharacterData) !?HTMLElem.Union {
         const res = try parser.nodePreviousElementSibling(parser.characterDataToNode(self));
         if (res == null) {
             return null;
         }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
     }
 
     // Read/Write attributes
@@ -102,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(@alignCast(self))) != try parser.nodeType(other_node)) {
+        if (try parser.nodeType(@alignCast(@ptrCast(self))) != try parser.nodeType(other_node)) {
             return false;
         }
 
@@ -129,6 +128,69 @@ pub const CharacterData = struct {
 // -----
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.CharacterData" {
-    try testing.htmlRunner("dom/character_data.html");
+test "Browser.DOM.CharacterData" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let link = document.getElementById('link')", "undefined" },
+        .{ "let cdata = link.firstChild", "undefined" },
+        .{ "cdata.data", "OK" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.data = 'OK modified'", "OK modified" },
+        .{ "cdata.data === 'OK modified'", "true" },
+        .{ "cdata.data = 'OK'", "OK" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.length === 2", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.nextElementSibling === null", "true" },
+        // create a next element
+        .{ "let next = document.createElement('a')", "undefined" },
+        .{ "link.appendChild(next, cdata) !== undefined", "true" },
+        .{ "cdata.nextElementSibling.localName === 'a' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.previousElementSibling === null", "true" },
+        // create a prev element
+        .{ "let prev = document.createElement('div')", "undefined" },
+        .{ "link.insertBefore(prev, cdata) !== undefined", "true" },
+        .{ "cdata.previousElementSibling.localName === 'div' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.appendData(' modified')", "undefined" },
+        .{ "cdata.data === 'OK modified' ", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.deleteData('OK'.length, ' modified'.length)", "undefined" },
+        .{ "cdata.data == 'OK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.insertData('OK'.length-1, 'modified')", "undefined" },
+        .{ "cdata.data == 'OmodifiedK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.replaceData('OK'.length-1, 'modified'.length, 'replaced')", "undefined" },
+        .{ "cdata.data == 'OreplacedK'", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.substringData('OK'.length-1, 'replaced'.length) == 'replaced'", "true" },
+        .{ "cdata.substringData('OK'.length-1, 0) == ''", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "cdata.substringData('OK'.length-1, 'replaced'.length) == 'replaced'", "true" },
+        .{ "cdata.substringData('OK'.length-1, 0) == ''", "true" },
+    }, .{});
 }

src/browser/dom/comment.zig

@@ -40,6 +40,15 @@ pub const Comment = struct {
 // -----
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Comment" {
-    try testing.htmlRunner("dom/comment.html");
+test "Browser.DOM.Comment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let comment = new Comment('foo')", "undefined" },
+        .{ "comment.data", "foo" },
+
+        .{ "let emptycomment = new Comment()", "undefined" },
+        .{ "emptycomment.data", "" },
+    }, .{});
 }

src/browser/dom/css.zig

@@ -38,7 +38,7 @@ pub fn querySelector(alloc: std.mem.Allocator, n: *parser.Node, selector: []cons
 
     var m = MatchFirst{};
 
-    _ = try css.matchFirst(&ps, Node{ .node = n }, &m);
+    _ = try css.matchFirst(ps, Node{ .node = n }, &m);
     return m.n;
 }
 
@@ -75,6 +75,6 @@ pub fn querySelectorAll(alloc: std.mem.Allocator, n: *parser.Node, selector: []c
     var m = MatchAll.init(alloc);
     defer m.deinit();
 
-    try css.matchAll(&ps, Node{ .node = n }, &m);
+    try css.matchAll(ps, Node{ .node = n }, &m);
     return m.toOwnedList();
 }

src/browser/dom/document.zig

@@ -18,7 +18,6 @@
 
 const std = @import("std");
 
-const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
 
@@ -31,12 +30,8 @@ const css = @import("css.zig");
 
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
+const Elements = @import("../html/elements.zig");
 const TreeWalker = @import("tree_walker.zig").TreeWalker;
-const CSSStyleSheet = @import("../cssom/CSSStyleSheet.zig");
-const NodeIterator = @import("node_iterator.zig").NodeIterator;
-const Range = @import("range.zig").Range;
-
-const CustomEvent = @import("../events/custom_event.zig").CustomEvent;
 
 const Env = @import("../env.zig").Env;
 
@@ -51,6 +46,7 @@ pub const Document = struct {
     pub fn constructor(page: *const Page) !*parser.DocumentHTML {
         const doc = try parser.documentCreateDocument(
             try parser.documentHTMLGetTitle(page.window.document),
+            &Elements.createElement,
         );
 
         // we have to work w/ document instead of html document.
@@ -112,21 +108,13 @@ pub const Document = struct {
         return try parser.documentGetDoctype(self);
     }
 
-    pub fn _createEvent(_: *parser.Document, eventCstr: []const u8) !union(enum) {
-        base: *parser.Event,
-        custom: CustomEvent,
-    } {
+    pub fn _createEvent(_: *parser.Document, eventCstr: []const u8) !*parser.Event {
+        // TODO: for now only "Event" constructor is supported
+        // see table on https://dom.spec.whatwg.org/#dom-document-createevent $2
         if (std.ascii.eqlIgnoreCase(eventCstr, "Event") or std.ascii.eqlIgnoreCase(eventCstr, "Events")) {
-            return .{ .base = try parser.eventCreate() };
+            return try parser.eventCreate();
         }
-
-        // Not documented in MDN but supported in Chrome.
-        // This is actually both instance of `Event` and `CustomEvent`.
-        if (std.ascii.eqlIgnoreCase(eventCstr, "CustomEvent")) {
-            return .{ .custom = try CustomEvent.constructor(eventCstr, null) };
-        }
-
-        return error.NotSupported;
+        return parser.DOMError.NotSupported;
     }
 
     pub fn _getElementById(self: *parser.Document, id: []const u8) !?ElementUnion {
@@ -135,10 +123,8 @@ pub const Document = struct {
     }
 
     pub fn _createElement(self: *parser.Document, tag_name: []const u8) !ElementUnion {
-        // The element’s namespace is the HTML namespace when document is an HTML document
-        // https://dom.spec.whatwg.org/#ref-for-dom-document-createelement%E2%91%A0
-        const e = try parser.documentCreateElementNS(self, "http://www.w3.org/1999/xhtml", tag_name);
-        return Element.toInterface(e);
+        const e = try parser.documentCreateElement(self, tag_name);
+        return try Element.toInterface(e);
     }
 
     pub fn _createElementNS(self: *parser.Document, ns: []const u8, tag_name: []const u8) !ElementUnion {
@@ -159,9 +145,7 @@ pub const Document = struct {
         tag_name: []const u8,
         page: *Page,
     ) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(page.arena, parser.documentToNode(self), tag_name, .{
-            .include_root = true,
-        });
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentToNode(self), tag_name, true);
     }
 
     pub fn _getElementsByClassName(
@@ -169,9 +153,7 @@ pub const Document = struct {
         classNames: []const u8,
         page: *Page,
     ) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByClassName(page.arena, parser.documentToNode(self), classNames, .{
-            .include_root = true,
-        });
+        return try collection.HTMLCollectionByClassName(page.arena, parser.documentToNode(self), classNames, true);
     }
 
     pub fn _createDocumentFragment(self: *parser.Document) !*parser.DocumentFragment {
@@ -215,9 +197,7 @@ pub const Document = struct {
     // ParentNode
     // https://dom.spec.whatwg.org/#parentnode
     pub fn get_children(self: *parser.Document) !collection.HTMLCollection {
-        return collection.HTMLCollectionChildren(parser.documentToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionChildren(parser.documentToNode(self), false);
     }
 
     pub fn get_firstElementChild(self: *parser.Document) !?ElementUnion {
@@ -238,7 +218,7 @@ pub const Document = struct {
     pub fn _querySelector(self: *parser.Document, selector: []const u8, page: *Page) !?ElementUnion {
         if (selector.len == 0) return null;
 
-        const n = try css.querySelector(page.call_arena, parser.documentToNode(self), selector);
+        const n = try css.querySelector(page.arena, parser.documentToNode(self), selector);
 
         if (n == null) return null;
 
@@ -261,23 +241,19 @@ pub const Document = struct {
         return Node.replaceChildren(parser.documentToNode(self), nodes);
     }
 
-    pub fn _createTreeWalker(_: *parser.Document, root: *parser.Node, what_to_show: ?TreeWalker.WhatToShow, filter: ?TreeWalker.TreeWalkerOpts) !TreeWalker {
-        return TreeWalker.init(root, what_to_show, filter);
-    }
-
-    pub fn _createNodeIterator(_: *parser.Document, root: *parser.Node, what_to_show: ?NodeIterator.WhatToShow, filter: ?NodeIterator.NodeIteratorOpts) !NodeIterator {
-        return NodeIterator.init(root, what_to_show, filter);
+    pub fn _createTreeWalker(_: *parser.Document, root: *parser.Node, what_to_show: ?u32, filter: ?TreeWalker.TreeWalkerOpts) !TreeWalker {
+        return try TreeWalker.init(root, what_to_show, filter);
     }
 
     pub fn getActiveElement(self: *parser.Document, page: *Page) !?*parser.Element {
-        if (page.getNodeState(@ptrCast(@alignCast(self)))) |state| {
+        if (page.getNodeState(@alignCast(@ptrCast(self)))) |state| {
             if (state.active_element) |ae| {
                 return ae;
             }
         }
 
         if (try parser.documentHTMLBody(page.window.document)) |body| {
-            return @ptrCast(@alignCast(body));
+            return @alignCast(@ptrCast(body));
         }
 
         return try parser.documentGetDocumentElement(self);
@@ -293,37 +269,206 @@ pub const Document = struct {
     // we could look for the "disabled" attribute, but that's only meaningful
     // on certain types, and libdom's vtable doesn't seem to expose this.
     pub fn setFocus(self: *parser.Document, e: *parser.ElementHTML, page: *Page) !void {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         state.active_element = @ptrCast(e);
     }
-
-    pub fn _createRange(_: *parser.Document, page: *Page) Range {
-        return Range.constructor(page);
-    }
-
-    // TODO: dummy implementation
-    pub fn get_styleSheets(_: *parser.Document) []CSSStyleSheet {
-        return &.{};
-    }
-
-    pub fn get_adoptedStyleSheets(self: *parser.Document, page: *Page) !Env.JsObject {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        if (state.adopted_style_sheets) |obj| {
-            return obj;
-        }
-
-        const obj = try page.main_context.newArray(0).persist();
-        state.adopted_style_sheets = obj;
-        return obj;
-    }
-
-    pub fn set_adoptedStyleSheets(self: *parser.Document, sheets: Env.JsObject, page: *Page) !void {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        state.adopted_style_sheets = try sheets.persist();
-    }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Document" {
-    try testing.htmlRunner("dom/document.html");
+test "Browser.DOM.Document" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+        .url = "about:blank",
+    });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "document.__proto__.__proto__.constructor.name", "Document" },
+        .{ "document.__proto__.__proto__.__proto__.constructor.name", "Node" },
+        .{ "document.__proto__.__proto__.__proto__.__proto__.constructor.name", "EventTarget" },
+
+        .{ "let newdoc = new Document()", "undefined" },
+        .{ "newdoc.documentElement", "null" },
+        .{ "newdoc.children.length", "0" },
+        .{ "newdoc.getElementsByTagName('*').length", "0" },
+        .{ "newdoc.getElementsByTagName('*').item(0)", "null" },
+        .{ "newdoc.inputEncoding === document.inputEncoding", "true" },
+        .{ "newdoc.documentURI === document.documentURI", "true" },
+        .{ "newdoc.URL === document.URL", "true" },
+        .{ "newdoc.compatMode === document.compatMode", "true" },
+        .{ "newdoc.characterSet === document.characterSet", "true" },
+        .{ "newdoc.charset === document.charset", "true" },
+        .{ "newdoc.contentType === document.contentType", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let getElementById = document.getElementById('content')", "undefined" },
+        .{ "getElementById.constructor.name", "HTMLDivElement" },
+        .{ "getElementById.localName", "div" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let getElementsByTagName = document.getElementsByTagName('p')", "undefined" },
+        .{ "getElementsByTagName.length", "2" },
+        .{ "getElementsByTagName.item(0).localName", "p" },
+        .{ "getElementsByTagName.item(1).localName", "p" },
+        .{ "let getElementsByTagNameAll = document.getElementsByTagName('*')", "undefined" },
+        .{ "getElementsByTagNameAll.length", "8" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(7).localName", "p" },
+        .{ "getElementsByTagNameAll.namedItem('para-empty-child').localName", "span" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let ok = document.getElementsByClassName('ok')", "undefined" },
+        .{ "ok.length", "2" },
+        .{ "let empty = document.getElementsByClassName('empty')", "undefined" },
+        .{ "empty.length", "1" },
+        .{ "let emptyok = document.getElementsByClassName('empty ok')", "undefined" },
+        .{ "emptyok.length", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let e = document.documentElement", "undefined" },
+        .{ "e.localName", "html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.characterSet", "UTF-8" },
+        .{ "document.charset", "UTF-8" },
+        .{ "document.inputEncoding", "UTF-8" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.compatMode", "CSS1Compat" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.contentType", "text/html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.documentURI", "about:blank" },
+        .{ "document.URL", "about:blank" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let impl = document.implementation", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let d = new Document()", "undefined" },
+        .{ "d.characterSet", "UTF-8" },
+        .{ "d.URL", "about:blank" },
+        .{ "d.documentURI", "about:blank" },
+        .{ "d.compatMode", "CSS1Compat" },
+        .{ "d.contentType", "text/html" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createDocumentFragment()", "undefined" },
+        .{ "v.nodeName", "#document-fragment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createTextNode('foo')", "undefined" },
+        .{ "v.nodeName", "#text" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createCDATASection('foo')", "undefined" },
+        .{ "v.nodeName", "#cdata-section" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createComment('foo')", "undefined" },
+        .{ "v.nodeName", "#comment" },
+        .{ "let v2 = v.cloneNode()", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let pi = document.createProcessingInstruction('foo', 'bar')", "undefined" },
+        .{ "pi.target", "foo" },
+        .{ "let pi2 = pi.cloneNode()", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let nimp = document.getElementById('content')", "undefined" },
+        .{ "var v = document.importNode(nimp)", "undefined" },
+        .{ "v.nodeName", "DIV" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var v = document.createAttribute('foo')", "undefined" },
+        .{ "v.nodeName", "foo" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.children.length", "1" },
+        .{ "document.children.item(0).nodeName", "HTML" },
+        .{ "document.firstElementChild.nodeName", "HTML" },
+        .{ "document.lastElementChild.nodeName", "HTML" },
+        .{ "document.childElementCount", "1" },
+
+        .{ "let nd = new Document()", "undefined" },
+        .{ "nd.children.length", "0" },
+        .{ "nd.children.item(0)", "null" },
+        .{ "nd.firstElementChild", "null" },
+        .{ "nd.lastElementChild", "null" },
+        .{ "nd.childElementCount", "0" },
+
+        .{ "let emptydoc = document.createElement('html')", "undefined" },
+        .{ "emptydoc.prepend(document.createElement('html'))", "undefined" },
+
+        .{ "let emptydoc2 = document.createElement('html')", "undefined" },
+        .{ "emptydoc2.append(document.createElement('html'))", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.querySelector('')", "null" },
+        .{ "document.querySelector('*').nodeName", "HTML" },
+        .{ "document.querySelector('#content').id", "content" },
+        .{ "document.querySelector('#para').id", "para" },
+        .{ "document.querySelector('.ok').id", "link" },
+        .{ "document.querySelector('a ~ p').id", "para-empty" },
+        .{ "document.querySelector(':root').nodeName", "HTML" },
+
+        .{ "document.querySelectorAll('p').length", "2" },
+        .{
+            \\  Array.from(document.querySelectorAll('#content > p#para-empty'))
+            \\    .map(row => row.querySelector('span').textContent)
+            \\    .length;
+            ,
+            "1",
+        },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.activeElement === document.body", "true" },
+        .{ "document.getElementById('link').focus()", "undefined" },
+        .{ "document.activeElement === document.getElementById('link')", "true" },
+    }, .{});
+
+    // this test breaks the doc structure, keep it at the end of the test
+    // suite.
+    try runner.testCases(&.{
+        .{ "let nadop = document.getElementById('content')", "undefined" },
+        .{ "var v = document.adoptNode(nadop)", "undefined" },
+        .{ "v.nodeName", "DIV" },
+    }, .{});
+
+    const Case = testing.JsRunner.Case;
+    const tags = comptime parser.Tag.all();
+    var createElements: [(tags.len) * 2]Case = undefined;
+    inline for (tags, 0..) |tag, i| {
+        const tag_name = @tagName(tag);
+        createElements[i * 2] = Case{
+            "var " ++ tag_name ++ "Elem = document.createElement('" ++ tag_name ++ "')",
+            "undefined",
+        };
+        createElements[(i * 2) + 1] = Case{
+            tag_name ++ "Elem.localName",
+            tag_name,
+        };
+    }
+    try runner.testCases(&createElements, .{});
 }

src/browser/dom/document_fragment.zig

@@ -16,13 +16,8 @@
 // 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 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;
 
@@ -58,39 +53,22 @@ 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), .{
-            .include_root = false,
-        });
-    }
-
-    pub fn _getElementById(self: *parser.DocumentFragment, id: []const u8) !?ElementUnion {
-        const e = try parser.nodeGetElementById(@ptrCast(@alignCast(self)), id) orelse return null;
-        return try Element.toInterface(e);
-    }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.DocumentFragment" {
-    try testing.htmlRunner("dom/document_fragment.html");
+test "Browser.DOM.DocumentFragment" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const dc = new DocumentFragment()", "undefined" },
+        .{ "dc.constructor.name", "DocumentFragment" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const dc1 = new DocumentFragment()", "undefined" },
+        .{ "const dc2 = new DocumentFragment()", "undefined" },
+        .{ "dc1.isEqualNode(dc1)", "true" },
+        .{ "dc1.isEqualNode(dc2)", "true" },
+    }, .{});
 }

src/browser/dom/document_type.zig

@@ -62,6 +62,19 @@ pub const DocumentType = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.DocumentType" {
-    try testing.htmlRunner("dom/document_type.html");
+test "Browser.DOM.DocumentType" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let dt1 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "let dt2 = document.implementation.createDocumentType('qname2', 'pid2', 'sys2');", "undefined" },
+        .{ "let dt3 = document.implementation.createDocumentType('qname1', 'pid1', 'sys1');", "undefined" },
+        .{ "dt1.isEqualNode(dt1)", "true" },
+        .{ "dt1.isEqualNode(dt3)", "true" },
+        .{ "dt1.isEqualNode(dt2)", "false" },
+        .{ "dt2.isEqualNode(dt3)", "false" },
+        .{ "dt1.isEqualNode(document)", "false" },
+        .{ "document.isEqualNode(dt1)", "false" },
+    }, .{});
 }

src/browser/dom/dom.zig

@@ -23,14 +23,11 @@ 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,
@@ -42,16 +39,9 @@ pub const 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

@@ -30,12 +30,18 @@ pub const DOMParser = struct {
             // TODO: Support XML
             return error.TypeError;
         }
-
-        return try parser.documentHTMLParseFromStr(string);
+        const Elements = @import("../html/elements.zig");
+        return try parser.documentHTMLParseFromStr(string, &Elements.createElement);
     }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Parser" {
-    try testing.htmlRunner("dom/dom_parser.html");
+test "Browser.DOM.DOMParser" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "const dp = new DOMParser()", "undefined" },
+        .{ "dp.parseFromString('<div>abc</div>', 'text/html')", "[object HTMLDocument]" },
+    }, .{});
 }

src/browser/dom/element.zig

@@ -30,11 +30,6 @@ const Node = @import("node.zig").Node;
 const Walker = @import("walker.zig").WalkerDepthFirst;
 const NodeList = @import("nodelist.zig").NodeList;
 const HTMLElem = @import("../html/elements.zig");
-const ShadowRoot = @import("../dom/shadow_root.zig").ShadowRoot;
-
-const Animation = @import("Animation.zig");
-const JsObject = @import("../env.zig").JsObject;
-
 pub const Union = @import("../html/elements.zig").Union;
 
 // WEB IDL https://dom.spec.whatwg.org/#element
@@ -48,40 +43,11 @@ 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 {
-        return toInterfaceT(Union, e);
-    }
-
-    pub fn toInterfaceT(comptime T: type, e: *parser.Element) !T {
-        const tagname = try parser.elementGetTagName(e) orelse {
-            // If the owner's document is HTML, assume we have an HTMLElement.
-            const doc = try parser.nodeOwnerDocument(parser.elementToNode(e));
-            if (doc != null and !doc.?.is_html) {
-                return .{ .HTMLElement = @as(*parser.ElementHTML, @ptrCast(e)) };
-            }
-
-            return .{ .Element = e };
-        };
-
-        // TODO SVGElement and MathML are not supported yet.
-
-        const tag = parser.Tag.fromString(tagname) catch {
-            // If the owner's document is HTML, assume we have an HTMLElement.
-            const doc = try parser.nodeOwnerDocument(parser.elementToNode(e));
-            if (doc != null and doc.?.is_html) {
-                return .{ .HTMLElement = @as(*parser.ElementHTML, @ptrCast(e)) };
-            }
-
-            return .{ .Element = e };
-        };
-
-        return HTMLElem.toInterfaceFromTag(T, e, tag);
+        return try HTMLElem.toInterface(Union, e);
+        // SVGElement and MathML are not supported yet.
     }
 
     // JS funcs
@@ -137,18 +103,18 @@ pub const Element = struct {
     }
 
     pub fn get_innerHTML(self: *parser.Element, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeChildren(parser.elementToNode(self), .{}, &aw.writer);
-        return aw.written();
+        var buf = std.ArrayList(u8).init(page.arena);
+        try dump.writeChildren(parser.elementToNode(self), buf.writer());
+        return buf.items;
     }
 
     pub fn get_outerHTML(self: *parser.Element, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeNode(parser.elementToNode(self), .{}, &aw.writer);
-        return aw.written();
+        var buf = std.ArrayList(u8).init(page.arena);
+        try dump.writeNode(parser.elementToNode(self), buf.writer());
+        return buf.items;
     }
 
-    pub fn set_innerHTML(self: *parser.Element, str: []const u8, page: *Page) !void {
+    pub fn set_innerHTML(self: *parser.Element, str: []const u8) !void {
         const node = parser.elementToNode(self);
         const doc = try parser.nodeOwnerDocument(node) orelse return parser.DOMError.WrongDocument;
         // parse the fragment
@@ -157,64 +123,16 @@ pub const Element = struct {
         // remove existing children
         try Node.removeChildren(node);
 
-        const fragment_node = parser.documentFragmentToNode(fragment);
+        // get fragment body children
+        const children = try parser.documentFragmentBodyChildren(fragment) orelse return;
 
-        // I'm not sure what the exact behavior is supposed to be. Initially,
-        // we were only copying the body of the document fragment. But it seems
-        // like head elements should be copied too. Specifically, some sites
-        // create script tags via innerHTML, which we need to capture.
-        // If you play with this in a browser, you should notice that the
-        // behavior is different depending on whether you're in a blank page
-        // or an actual document. In a blank page, something like:
-        //    x.innerHTML = '<script></script>';
-        // does _not_ create an empty script, but in a real page, it does. Weird.
-        const html = try parser.nodeFirstChild(fragment_node) orelse return;
-        const head = try parser.nodeFirstChild(html) orelse return;
-        const body = try parser.nodeNextSibling(head) orelse return;
-
-        if (try parser.elementTag(self) == .template) {
-            // HTMLElementTemplate is special. We don't append these as children
-            // of the template, but instead set its content as the body of the
-            // fragment. Simpler to do this by copying the body children into
-            // a new fragment
-            const clean = try parser.documentCreateDocumentFragment(doc);
-            const children = try parser.nodeGetChildNodes(body);
-            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(@ptrCast(@alignCast(clean)), child);
-            }
-
-            const state = try page.getOrCreateNodeState(node);
-            state.template_content = clean;
-            return;
-        }
-
-        // For any node other than a template, we copy the head and body elements
-        // as child nodes of the element
-        {
-            // First, copy some of the head element
-            const children = try parser.nodeGetChildNodes(head);
-            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);
-            }
-        }
-
-        {
-            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);
-            }
+        // append children to the node
+        const ln = try parser.nodeListLength(children);
+        for (0..ln) |_| {
+            // always index 0, because ndoeAppendChild moves the node out of
+            // the nodeList and into the new tree
+            const child = try parser.nodeListItem(children, 0) orelse continue;
+            _ = try parser.nodeAppendChild(node, child);
         }
     }
 
@@ -238,14 +156,8 @@ 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 {
-        // an element _must_ have at least an empty attribute
-        const node_map = try parser.nodeGetAttributes(parser.elementToNode(self)) orelse unreachable;
-        return try parser.namedNodeMapGetLength(node_map) > 0;
+        return try parser.nodeHasAttributes(parser.elementToNode(self));
     }
 
     pub fn _getAttribute(self: *parser.Element, qname: []const u8) !?[]const u8 {
@@ -314,22 +226,6 @@ pub const Element = struct {
         return true;
     }
 
-    pub fn _getAttributeNames(self: *parser.Element, page: *Page) ![]const []const u8 {
-        const attributes = try parser.nodeGetAttributes(@ptrCast(self)) orelse return &.{};
-        const ln = try parser.namedNodeMapGetLength(attributes);
-
-        const names = try page.call_arena.alloc([]const u8, ln);
-        var at: usize = 0;
-
-        for (0..ln) |i| {
-            const attribute = try parser.namedNodeMapItem(attributes, @intCast(i)) orelse break;
-            names[at] = try parser.attributeGetName(attribute);
-            at += 1;
-        }
-
-        return names[0..at];
-    }
-
     pub fn _getAttributeNode(self: *parser.Element, name: []const u8) !?*parser.Attribute {
         return try parser.elementGetAttributeNode(self, name);
     }
@@ -359,7 +255,7 @@ pub const Element = struct {
             page.arena,
             parser.elementToNode(self),
             tag_name,
-            .{ .include_root = false },
+            false,
         );
     }
 
@@ -372,16 +268,14 @@ pub const Element = struct {
             page.arena,
             parser.elementToNode(self),
             classNames,
-            .{ .include_root = false },
+            false,
         );
     }
 
     // ParentNode
     // https://dom.spec.whatwg.org/#parentnode
     pub fn get_children(self: *parser.Element) !collection.HTMLCollection {
-        return collection.HTMLCollectionChildren(parser.elementToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionChildren(parser.elementToNode(self), false);
     }
 
     pub fn get_firstElementChild(self: *parser.Element) !?Union {
@@ -409,13 +303,13 @@ pub const Element = struct {
     pub fn get_previousElementSibling(self: *parser.Element) !?Union {
         const res = try parser.nodePreviousElementSibling(parser.elementToNode(self));
         if (res == null) return null;
-        return try toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
     }
 
     pub fn get_nextElementSibling(self: *parser.Element) !?Union {
         const res = try parser.nodeNextElementSibling(parser.elementToNode(self));
         if (res == null) return null;
-        return try toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, res.?);
     }
 
     fn getElementById(self: *parser.Element, id: []const u8) !?*parser.Node {
@@ -437,7 +331,7 @@ pub const Element = struct {
     pub fn _querySelector(self: *parser.Element, selector: []const u8, page: *Page) !?Union {
         if (selector.len == 0) return null;
 
-        const n = try css.querySelector(page.call_arena, parser.elementToNode(self), selector);
+        const n = try css.querySelector(page.arena, parser.elementToNode(self), selector);
 
         if (n == null) return null;
 
@@ -475,16 +369,7 @@ pub const Element = struct {
     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 DOMRect{ .x = 0, .y = 0, .width = 0, .height = 0 };
         }
         return page.renderer.getRect(self);
     }
@@ -531,79 +416,254 @@ pub const Element = struct {
         _ = opts;
         return true;
     }
-
-    const AttachShadowOpts = struct {
-        mode: []const u8, // must be specified
-    };
-    pub fn _attachShadow(self: *parser.Element, opts: AttachShadowOpts, page: *Page) !*ShadowRoot {
-        const mode = std.meta.stringToEnum(ShadowRoot.Mode, opts.mode) orelse return error.InvalidArgument;
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
-        if (state.shadow_root) |sr| {
-            if (mode != sr.mode) {
-                // this is the behavior per the spec
-                return error.NotSupportedError;
-            }
-
-            try Node.removeChildren(@ptrCast(@alignCast(sr.proto)));
-            return sr;
-        }
-
-        // Not sure what to do if there is no owner document
-        const doc = 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;
-        parser.documentFragmentSetHost(sr.proto, @ptrCast(@alignCast(self)));
-
-        // Storing the ShadowRoot on the element makes sense, it's the ShadowRoot's
-        // parent. When we render, we go top-down, so we'll have the element, get
-        // its shadowroot, and go on. that's what the above code does.
-        // But we sometimes need to go bottom-up, e.g when we have a slot element
-        // and want to find the containing parent. Unforatunately , we don't have
-        // that link, so we need to create it. In the DOM, the ShadowRoot is
-        // represented by this DocumentFragment (it's the ShadowRoot's base prototype)
-        // So we can also store the ShadowRoot in the DocumentFragment's state.
-        const fragment_state = try page.getOrCreateNodeState(@ptrCast(@alignCast(fragment)));
-        fragment_state.shadow_root = sr;
-
-        return sr;
-    }
-
-    pub fn get_shadowRoot(self: *parser.Element, page: *Page) ?*ShadowRoot {
-        const state = page.getNodeState(@ptrCast(@alignCast(self))) orelse return null;
-        const sr = state.shadow_root orelse return null;
-        if (sr.mode == .closed) {
-            return null;
-        }
-        return sr;
-    }
-
-    pub fn _animate(self: *parser.Element, effect: 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
 // -----
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Element" {
-    try testing.htmlRunner("dom/element.html");
+test "Browser.DOM.Element" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let g = document.getElementById('content')", "undefined" },
+        .{ "g.namespaceURI", "http://www.w3.org/1999/xhtml" },
+        .{ "g.prefix", "null" },
+        .{ "g.localName", "div" },
+        .{ "g.tagName", "DIV" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let gs = document.getElementById('content')", "undefined" },
+        .{ "gs.id", "content" },
+        .{ "gs.id = 'foo'", "foo" },
+        .{ "gs.id", "foo" },
+        .{ "gs.id = 'content'", "content" },
+        .{ "gs.className", "" },
+        .{ "let gs2 = document.getElementById('para-empty')", "undefined" },
+        .{ "gs2.className", "ok empty" },
+        .{ "gs2.className = 'foo bar baz'", "foo bar baz" },
+        .{ "gs2.className", "foo bar baz" },
+        .{ "gs2.className = 'ok empty'", "ok empty" },
+        .{ "let cl = gs2.classList", "undefined" },
+        .{ "cl.length", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el2 = document.createElement('div');", "undefined" },
+        .{ "el2.id = 'closest'; el2.className = 'ok';", "ok" },
+        .{ "el2.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "el2.closest('.ok')", "[object HTMLDivElement]" },
+        .{ "el2.closest('#9000')", "null" },
+        .{ "el2.closest('.notok')", "null" },
+
+        .{ "const sp = document.createElement('span');", "undefined" },
+        .{ "el2.appendChild(sp);", "[object HTMLSpanElement]" },
+        .{ "sp.closest('#closest')", "[object HTMLDivElement]" },
+        .{ "sp.closest('#9000')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content')", "undefined" },
+        .{ "a.hasAttributes()", "true" },
+        .{ "a.attributes.length", "1" },
+        .{ "a.getAttribute('id')", "content" },
+        .{ "a.attributes['id'].value", "content" },
+        .{
+            \\ let x = '';
+            \\ for (const attr of a.attributes) {
+            \\   x += attr.name + '=' + attr.value;
+            \\ }
+            \\ x;
+            ,
+            "id=content",
+        },
+
+        .{ "a.hasAttribute('foo')", "false" },
+        .{ "a.getAttribute('foo')", "null" },
+
+        .{ "a.setAttribute('foo', 'bar')", "undefined" },
+        .{ "a.hasAttribute('foo')", "true" },
+        .{ "a.getAttribute('foo')", "bar" },
+
+        .{ "a.setAttribute('foo', 'baz')", "undefined" },
+        .{ "a.hasAttribute('foo')", "true" },
+        .{ "a.getAttribute('foo')", "baz" },
+
+        .{ "a.removeAttribute('foo')", "undefined" },
+        .{ "a.hasAttribute('foo')", "false" },
+        .{ "a.getAttribute('foo')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let b = document.getElementById('content')", "undefined" },
+        .{ "b.toggleAttribute('foo')", "true" },
+        .{ "b.hasAttribute('foo')", "true" },
+        .{ "b.getAttribute('foo')", "" },
+
+        .{ "b.toggleAttribute('foo')", "false" },
+        .{ "b.hasAttribute('foo')", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c = document.getElementById('content')", "undefined" },
+        .{ "c.children.length", "3" },
+        .{ "c.firstElementChild.nodeName", "A" },
+        .{ "c.lastElementChild.nodeName", "P" },
+        .{ "c.childElementCount", "3" },
+
+        .{ "c.prepend(document.createTextNode('foo'))", "undefined" },
+        .{ "c.append(document.createTextNode('bar'))", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let d = document.getElementById('para')", "undefined" },
+        .{ "d.previousElementSibling.nodeName", "P" },
+        .{ "d.nextElementSibling", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let e = document.getElementById('content')", "undefined" },
+        .{ "e.querySelector('foo')", "null" },
+        .{ "e.querySelector('#foo')", "null" },
+        .{ "e.querySelector('#link').id", "link" },
+        .{ "e.querySelector('#para').id", "para" },
+        .{ "e.querySelector('*').id", "link" },
+        .{ "e.querySelector('')", "null" },
+        .{ "e.querySelector('*').id", "link" },
+        .{ "e.querySelector('#content')", "null" },
+        .{ "e.querySelector('#para').id", "para" },
+        .{ "e.querySelector('.ok').id", "link" },
+        .{ "e.querySelector('a ~ p').id", "para-empty" },
+
+        .{ "e.querySelectorAll('foo').length", "0" },
+        .{ "e.querySelectorAll('#foo').length", "0" },
+        .{ "e.querySelectorAll('#link').length", "1" },
+        .{ "e.querySelectorAll('#link').item(0).id", "link" },
+        .{ "e.querySelectorAll('#para').length", "1" },
+        .{ "e.querySelectorAll('#para').item(0).id", "para" },
+        .{ "e.querySelectorAll('*').length", "4" },
+        .{ "e.querySelectorAll('p').length", "2" },
+        .{ "e.querySelectorAll('.ok').item(0).id", "link" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let f = document.getElementById('content')", "undefined" },
+        .{ "let ff = document.createAttribute('foo')", "undefined" },
+        .{ "f.setAttributeNode(ff)", "null" },
+        .{ "f.getAttributeNode('foo').name", "foo" },
+        .{ "f.removeAttributeNode(ff).name", "foo" },
+        .{ "f.getAttributeNode('bar')", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').innerHTML", " And" },
+        .{ "document.getElementById('para-empty').innerHTML.trim()", "<span id=\"para-empty-child\"></span>" },
+
+        .{ "let h = document.getElementById('para-empty')", "undefined" },
+        .{ "const prev = h.innerHTML", "undefined" },
+        .{ "h.innerHTML = '<p id=\"hello\">hello world</p>'", "<p id=\"hello\">hello world</p>" },
+        .{ "h.innerHTML", "<p id=\"hello\">hello world</p>" },
+        .{ "h.firstChild.nodeName", "P" },
+        .{ "h.firstChild.id", "hello" },
+        .{ "h.firstChild.textContent", "hello world" },
+        .{ "h.innerHTML = prev; true", "true" },
+        .{ "document.getElementById('para-empty').innerHTML.trim()", "<span id=\"para-empty-child\"></span>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').outerHTML", "<p id=\"para\"> And</p>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "document.getElementById('para').clientWidth", "1" },
+        .{ "document.getElementById('para').clientHeight", "1" },
+
+        .{ "let r1 = document.getElementById('para').getBoundingClientRect()", "undefined" },
+        .{ "r1.x", "0" },
+        .{ "r1.y", "0" },
+        .{ "r1.width", "1" },
+        .{ "r1.height", "1" },
+
+        .{ "let r2 = document.getElementById('content').getBoundingClientRect()", "undefined" },
+        .{ "r2.x", "1" },
+        .{ "r2.y", "0" },
+        .{ "r2.width", "1" },
+        .{ "r2.height", "1" },
+
+        .{ "let r3 = document.getElementById('para').getBoundingClientRect()", "undefined" },
+        .{ "r3.x", "0" },
+        .{ "r3.y", "0" },
+        .{ "r3.width", "1" },
+        .{ "r3.height", "1" },
+
+        .{ "document.getElementById('para').clientWidth", "2" },
+        .{ "document.getElementById('para').clientHeight", "1" },
+
+        .{ "let r4 = document.createElement('div').getBoundingClientRect()", null },
+        .{ "r4.x", "0" },
+        .{ "r4.y", "0" },
+        .{ "r4.width", "0" },
+        .{ "r4.height", "0" },
+
+        // Test setup causes WrongDocument or HierarchyRequest error unlike in chrome/firefox
+        // .{ // An element of another document, even if created from the main document, is not rendered.
+        //     \\ let div5 = document.createElement('div');
+        //     \\ const newDoc = document.implementation.createHTMLDocument("New Document");
+        //     \\ newDoc.body.appendChild(div5);
+        //     \\ let r5 = div5.getBoundingClientRect();
+        //     ,
+        //     null,
+        // },
+        // .{ "r5.x", "0" },
+        // .{ "r5.y", "0" },
+        // .{ "r5.width", "0" },
+        // .{ "r5.height", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el = document.createElement('div');", "undefined" },
+        .{ "el.id = 'matches'; el.className = 'ok';", "ok" },
+        .{ "el.matches('#matches')", "true" },
+        .{ "el.matches('.ok')", "true" },
+        .{ "el.matches('#9000')", "false" },
+        .{ "el.matches('.notok')", "false" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const el3 = document.createElement('div');", "undefined" },
+        .{ "el3.scrollIntoViewIfNeeded();", "undefined" },
+        .{ "el3.scrollIntoViewIfNeeded(false);", "undefined" },
+    }, .{});
+
+    // before
+    try runner.testCases(&.{
+        .{ "const before_container = document.createElement('div');", "undefined" },
+        .{ "document.append(before_container);", "undefined" },
+        .{ "const b1 = document.createElement('div');", "undefined" },
+        .{ "before_container.append(b1);", "undefined" },
+
+        .{ "const b1_a = document.createElement('p');", "undefined" },
+        .{ "b1.before(b1_a, 'over 9000');", "undefined" },
+        .{ "before_container.innerHTML", "<p></p>over 9000<div></div>" },
+    }, .{});
+
+    // after
+    try runner.testCases(&.{
+        .{ "const after_container = document.createElement('div');", "undefined" },
+        .{ "document.append(after_container);", "undefined" },
+        .{ "const a1 = document.createElement('div');", "undefined" },
+        .{ "after_container.append(a1);", "undefined" },
+
+        .{ "const a1_a = document.createElement('p');", "undefined" },
+        .{ "a1.after('over 9000', a1_a);", "undefined" },
+        .{ "after_container.innerHTML", "<div></div>over 9000<p></p>" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var div1 = document.createElement('div');", null },
+        .{ "div1.innerHTML = \"  <link/><table></table><a href='/a'>a</a><input type='checkbox'/>\"", null },
+        .{ "div1.getElementsByTagName('a').length", "1" },
+    }, .{});
 }

src/browser/dom/event_target.zig

@@ -16,7 +16,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 std = @import("std");
 const Env = @import("../env.zig").Env;
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
@@ -24,75 +23,30 @@ 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");
 
-pub const Union = union(enum) {
-    node: nod.Union,
-    xhr: *@import("../xhr/xhr.zig").XMLHttpRequest,
-    plain: *parser.EventTarget,
-    message_port: *@import("MessageChannel.zig").MessagePort,
-    screen: *@import("../html/screen.zig").Screen,
-    screen_orientation: *@import("../html/screen.zig").ScreenOrientation,
-    performance: *@import("performance.zig").Performance,
-    media_query_list: *@import("../html/media_query_list.zig").MediaQueryList,
-};
+// EventTarget interfaces
+pub const Union = Nod.Union;
 
 // EventTarget implementation
 pub const EventTarget = struct {
     pub const Self = parser.EventTarget;
     pub const Exception = DOMException;
 
-    // Extend libdom event target for pure zig struct.
-    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .plain },
-
     pub fn toInterface(et: *parser.EventTarget, page: *Page) !Union {
-        // 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))) };
-            },
-            .screen => {
-                return .{ .screen = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .screen_orientation => {
-                return .{ .screen_orientation = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .performance => {
-                return .{ .performance = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
-            .media_query_list => {
-                return .{ .media_query_list = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et))) };
-            },
+        // Not all targets are *parser.Nodes. page.zig emits a "load" event
+        // where the target is a Window, which cannot be cast directly to a node.
+        // Ideally, we'd remove this duality. Failing that, we'll need to embed
+        // data into the *parser.EventTarget should we need this for other types.
+        // For now, for the Window, which is a singleton, we can do this:
+        if (@intFromPtr(et) == @intFromPtr(&page.window.base)) {
+            return .{ .Window = &page.window };
         }
+        return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
     }
 
     // JS funcs
     // --------
-    pub fn constructor(page: *Page) !*parser.EventTarget {
-        const et = try page.arena.create(EventTarget);
-        return @ptrCast(&et.base);
-    }
-
     pub fn _addEventListener(
         self: *parser.EventTarget,
         typ: []const u8,
@@ -154,6 +108,130 @@ pub const EventTarget = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.EventTarget" {
-    try testing.htmlRunner("dom/event_target.html");
+test "Browser.DOM.EventTarget" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let para = document.getElementById('para')", "undefined" },
+        // NOTE: as some event properties will change during the event dispatching phases
+        // we need to copy thoses values in order to check them afterwards
+        .{
+            \\ var nb = 0; var evt; var phase; var cur;
+            \\ function cbk(event) {
+            \\   evt = event;
+            \\   phase = event.eventPhase;
+            \\   cur = event.currentTarget;
+            \\   nb ++;
+            \\ }
+            ,
+            "undefined",
+        },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "content.addEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "basic" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "0" }, // handler is not called, no capture, not the target, no bubbling
+        .{ "evt === undefined", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.addEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.addEventListener('basic', cbk, true)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "2" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.removeEventListener('basic', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb  = 0", "0" },
+        .{ "content.removeEventListener('basic', cbk, {capture: true})", "undefined" },
+        .{ "content.dispatchEvent(new Event('basic'))", "true" },
+        .{ "nb", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "content.addEventListener('capture', cbk, true)", "undefined" },
+        .{ "content.dispatchEvent(new Event('capture'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "capture" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('capture'))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "capture" },
+        .{ "phase", "1" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "content.addEventListener('bubbles', cbk)", "undefined" },
+        .{ "content.dispatchEvent(new Event('bubbles', {bubbles: true}))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "bubbles" },
+        .{ "evt.bubbles", "true" },
+        .{ "phase", "2" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; evt = undefined; phase = undefined; cur = undefined", "undefined" },
+        .{ "para.dispatchEvent(new Event('bubbles', {bubbles: true}))", "true" },
+        .{ "nb", "1" },
+        .{ "evt instanceof Event", "true" },
+        .{ "evt.type", "bubbles" },
+        .{ "phase", "3" },
+        .{ "cur.getAttribute('id')", "content" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const obj1 = {calls: 0, handleEvent: function() { this.calls += 1; } };", null },
+        .{ "content.addEventListener('he', obj1);", null },
+        .{ "content.dispatchEvent(new Event('he'));", null },
+        .{ "obj1.calls", "1" },
+
+        .{ "content.removeEventListener('he', obj1);", null },
+        .{ "content.dispatchEvent(new Event('he'));", null },
+        .{ "obj1.calls", "1" },
+    }, .{});
+
+    // doesn't crash on null receiver
+    try runner.testCases(&.{
+        .{ "content.addEventListener('he2', null);", null },
+        .{ "content.dispatchEvent(new Event('he2'));", null },
+    }, .{});
 }

src/browser/dom/exceptions.zig

@@ -20,11 +20,10 @@ 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;
@@ -56,84 +55,34 @@ 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, caller_name: []const u8) !DOMException {
-        const dom_error = @as(parser.DOMError, @errorCast(err));
-        const error_name = DOMException.name(dom_error);
-        const str = switch (dom_error) {
+    pub fn init(alloc: std.mem.Allocator, err: anyerror, callerName: []const u8) !DOMException {
+        const errCast = @as(parser.DOMError, @errorCast(err));
+        const errName = DOMException.name(errCast);
+        const str = switch (errCast) {
             error.HierarchyRequest => try allocPrint(
                 alloc,
                 "{s}: Failed to execute '{s}' on 'Node': The new child element contains the parent.",
-                .{ error_name, caller_name },
-            ),
-            // todo add more custom error messages
-            else => try allocPrint(
-                alloc,
-                "{s}: Failed to execute '{s}' : {s}",
-                .{ error_name, caller_name, error_name },
+                .{ errName, callerName },
             ),
             error.NoError => unreachable,
+            else => try allocPrint(
+                alloc,
+                "{s}: TODO message", // TODO: implement other messages
+                .{DOMException.name(errCast)},
+            ),
         };
-        return .{ .err = dom_error, .str = str };
+        return .{ .err = errCast, .str = str };
     }
 
-    fn error_from_str(name_: []const u8) ?parser.DOMError {
-        // @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";
-
+    fn name(err: parser.DOMError) []const u8 {
         return switch (err) {
             error.IndexSize => "IndexSizeError",
-            error.StringSize => "StringSizeError", // Legacy: DOMSTRING_SIZE_ERR
+            error.StringSize => "StringSizeError",
             error.HierarchyRequest => "HierarchyRequestError",
             error.WrongDocument => "WrongDocumentError",
             error.InvalidCharacter => "InvalidCharacterError",
-            error.NoDataAllowed => "NoDataAllowedError", // Legacy: NO_DATA_ALLOWED_ERR
+            error.NoDataAllowed => "NoDataAllowedError",
             error.NoModificationAllowed => "NoModificationAllowedError",
             error.NotFound => "NotFoundError",
             error.NotSupported => "NotSupportedError",
@@ -143,7 +92,7 @@ pub const DOMException = struct {
             error.InvalidModification => "InvalidModificationError",
             error.Namespace => "NamespaceError",
             error.InvalidAccess => "InvalidAccessError",
-            error.Validation => "ValidationError", // Legacy: VALIDATION_ERR
+            error.Validation => "ValidationError",
             error.TypeMismatch => "TypeMismatchError",
             error.Security => "SecurityError",
             error.Network => "NetworkError",
@@ -166,8 +115,7 @@ pub const DOMException = struct {
     // JS properties and methods
 
     pub fn get_code(self: *const DOMException) u8 {
-        const err = self.err orelse return 0;
-        return switch (err) {
+        return switch (self.err) {
             error.IndexSize => 1,
             error.StringSize => 2,
             error.HierarchyRequest => 3,
@@ -209,8 +157,7 @@ pub const DOMException = struct {
 
     pub fn get_message(self: *const DOMException) []const u8 {
         const errName = DOMException.name(self.err);
-        if (self.str.len <= errName.len + 2) return "";
-        return self.str[errName.len + 2 ..]; // ! Requires str is formatted as "{name}: {message}"
+        return self.str[errName.len + 2 ..];
     }
 
     pub fn _toString(self: *const DOMException) []const u8 {
@@ -219,6 +166,26 @@ pub const DOMException = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Exceptions" {
-    try testing.htmlRunner("dom/exceptions.html");
+test "Browser.DOM.Exception" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    const err = "Failed to execute 'appendChild' on 'Node': The new child element contains the parent.";
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let link = document.getElementById('link')", "undefined" },
+        // HierarchyRequestError
+        .{
+            \\ var he;
+            \\ try { link.appendChild(content) } catch (error) { he = error}
+            \\ he.name
+            ,
+            "HierarchyRequestError",
+        },
+        .{ "he.code", "3" },
+        .{ "he.message", err },
+        .{ "he.toString()", "HierarchyRequestError: " ++ err },
+        .{ "he instanceof DOMException", "true" },
+        .{ "he instanceof Error", "true" },
+    }, .{});
 }

src/browser/dom/html_collection.zig

@@ -72,14 +72,13 @@ pub fn HTMLCollectionByTagName(
     arena: Allocator,
     root: ?*parser.Node,
     tag_name: []const u8,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerDepthFirst = .{} },
         .matcher = .{ .matchByTagName = try MatchByTagName.init(arena, tag_name) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -110,14 +109,13 @@ pub fn HTMLCollectionByClassName(
     arena: Allocator,
     root: ?*parser.Node,
     classNames: []const u8,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerDepthFirst = .{} },
         .matcher = .{ .matchByClassName = try MatchByClassName.init(arena, classNames) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -141,14 +139,13 @@ pub fn HTMLCollectionByName(
     arena: Allocator,
     root: ?*parser.Node,
     name: []const u8,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerDepthFirst = .{} },
         .matcher = .{ .matchByName = try MatchByName.init(arena, name) },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -192,14 +189,13 @@ pub const HTMLAllCollection = struct {
 
 pub fn HTMLCollectionChildren(
     root: ?*parser.Node,
-    opts: Opts,
-) HTMLCollection {
+    include_root: bool,
+) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerChildren = .{} },
         .matcher = .{ .matchTrue = .{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -228,14 +224,13 @@ pub const MatchByLinks = struct {
 
 pub fn HTMLCollectionByLinks(
     root: ?*parser.Node,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerDepthFirst = .{} },
         .matcher = .{ .matchByLinks = MatchByLinks{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -254,14 +249,13 @@ pub const MatchByAnchors = struct {
 
 pub fn HTMLCollectionByAnchors(
     root: ?*parser.Node,
-    opts: Opts,
+    include_root: bool,
 ) !HTMLCollection {
     return HTMLCollection{
         .root = root,
         .walker = .{ .walkerDepthFirst = .{} },
         .matcher = .{ .matchByAnchors = MatchByAnchors{} },
-        .mutable = opts.mutable,
-        .include_root = opts.include_root,
+        .include_root = include_root,
     };
 }
 
@@ -291,11 +285,6 @@ pub const HTMLCollectionIterator = struct {
     }
 };
 
-const Opts = struct {
-    include_root: bool,
-    mutable: bool = false,
-};
-
 // WEB IDL https://dom.spec.whatwg.org/#htmlcollection
 // HTMLCollection is re implemented in zig here because libdom
 // dom_html_collection expects a comparison function callback as arguement.
@@ -311,8 +300,6 @@ pub const HTMLCollection = struct {
     // itself.
     include_root: bool = false,
 
-    mutable: bool = false,
-
     // save a state for the collection to improve the _item speed.
     cur_idx: ?u32 = null,
     cur_node: ?*parser.Node = null,
@@ -363,7 +350,7 @@ pub const HTMLCollection = struct {
         var node: *parser.Node = undefined;
 
         // Use the current state to improve speed if possible.
-        if (self.mutable == false and self.cur_idx != null and index >= self.cur_idx.?) {
+        if (self.cur_idx != null and index >= self.cur_idx.?) {
             i = self.cur_idx.?;
             node = self.cur_node.?;
         } else {
@@ -462,6 +449,52 @@ pub const HTMLCollection = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.HTMLCollection" {
-    try testing.htmlRunner("dom/html_collection.html");
+test "Browser.DOM.HTMLCollection" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let getElementsByTagName = document.getElementsByTagName('p')", "undefined" },
+        .{ "getElementsByTagName.length", "2" },
+        .{ "let getElementsByTagNameCI = document.getElementsByTagName('P')", "undefined" },
+        .{ "getElementsByTagNameCI.length", "2" },
+        .{ "getElementsByTagName.item(0).localName", "p" },
+        .{ "getElementsByTagName.item(1).localName", "p" },
+        .{ "let getElementsByTagNameAll = document.getElementsByTagName('*')", "undefined" },
+        .{ "getElementsByTagNameAll.length", "8" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(1).localName", "head" },
+        .{ "getElementsByTagNameAll.item(0).localName", "html" },
+        .{ "getElementsByTagNameAll.item(2).localName", "body" },
+        .{ "getElementsByTagNameAll.item(3).localName", "div" },
+        .{ "getElementsByTagNameAll.item(7).localName", "p" },
+        .{ "getElementsByTagNameAll.namedItem('para-empty-child').localName", "span" },
+
+        // array like
+        .{ "getElementsByTagNameAll[0].localName", "html" },
+        .{ "getElementsByTagNameAll[7].localName", "p" },
+        .{ "getElementsByTagNameAll[8]", "undefined" },
+        .{ "getElementsByTagNameAll['para-empty-child'].localName", "span" },
+        .{ "getElementsByTagNameAll['foo']", "undefined" },
+
+        .{ "document.getElementById('content').getElementsByTagName('*').length", "4" },
+        .{ "document.getElementById('content').getElementsByTagName('p').length", "2" },
+        .{ "document.getElementById('content').getElementsByTagName('div').length", "0" },
+
+        .{ "document.children.length", "1" },
+        .{ "document.getElementById('content').children.length", "3" },
+
+        // check liveness
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let pe = document.getElementById('para-empty')", "undefined" },
+        .{ "let p = document.createElement('p')", "undefined" },
+        .{ "p.textContent = 'OK live'", "OK live" },
+        .{ "getElementsByTagName.item(1).textContent", " And" },
+        .{ "content.appendChild(p) != undefined", "true" },
+        .{ "getElementsByTagName.length", "3" },
+        .{ "getElementsByTagName.item(2).textContent", "OK live" },
+        .{ "content.insertBefore(p, pe) != undefined", "true" },
+        .{ "getElementsByTagName.item(0).textContent", "OK live" },
+    }, .{});
 }

src/browser/dom/implementation.zig

@@ -42,7 +42,8 @@ pub const DOMImplementation = struct {
     }
 
     pub fn _createHTMLDocument(_: *DOMImplementation, title: ?[]const u8) !*parser.DocumentHTML {
-        return try parser.domImplementationCreateHTMLDocument(title);
+        const Elements = @import("../html/elements.zig");
+        return try parser.domImplementationCreateHTMLDocument(title, &Elements.createElement);
     }
 
     pub fn _hasFeature(_: *DOMImplementation) bool {
@@ -50,7 +51,23 @@ pub const DOMImplementation = struct {
     }
 };
 
+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.Implementation" {
-    try testing.htmlRunner("dom/implementation.html");
+test "Browser.DOM.Implementation" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let impl = document.implementation", "undefined" },
+        .{ "impl.createHTMLDocument();", "[object HTMLDocument]" },
+        .{ "const doc = impl.createHTMLDocument('foo');", "undefined" },
+        .{ "doc", "[object HTMLDocument]" },
+        .{ "doc.title", "foo" },
+        .{ "doc.body", "[object HTMLBodyElement]" },
+        .{ "impl.createDocument(null, 'foo');", "[object Document]" },
+        .{ "impl.createDocumentType('foo', 'bar', 'baz')", "[object DocumentType]" },
+        .{ "impl.hasFeature()", "true" },
+    }, .{});
 }

src/browser/dom/intersection_observer.zig

@@ -181,6 +181,110 @@ pub const IntersectionObserverEntry = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.IntersectionObserver" {
-    try testing.htmlRunner("dom/intersection_observer.html");
+test "Browser.DOM.IntersectionObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new IntersectionObserver(() => {}).observe(document.documentElement);", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let count_a = 0;", "undefined" },
+        .{ "const a1 = document.createElement('div');", "undefined" },
+        .{ "new IntersectionObserver(entries => {count_a += 1;}).observe(a1);", "undefined" },
+        .{ "count_a;", "1" },
+    }, .{});
+
+    // This test is documenting current behavior, not correct behavior.
+    // Currently every time observe is called, the callback is called with all entries.
+    try runner.testCases(&.{
+        .{ "let count_b = 0;", "undefined" },
+        .{ "let observer_b = new IntersectionObserver(entries => {count_b = entries.length;});", "undefined" },
+        .{ "const b1 = document.createElement('div');", "undefined" },
+        .{ "observer_b.observe(b1);", "undefined" },
+        .{ "count_b;", "1" },
+        .{ "const b2 = document.createElement('div');", "undefined" },
+        .{ "observer_b.observe(b2);", "undefined" },
+        .{ "count_b;", "2" },
+    }, .{});
+
+    // Re-observing is a no-op
+    try runner.testCases(&.{
+        .{ "let count_bb = 0;", "undefined" },
+        .{ "let observer_bb = new IntersectionObserver(entries => {count_bb = entries.length;});", "undefined" },
+        .{ "const bb1 = document.createElement('div');", "undefined" },
+        .{ "observer_bb.observe(bb1);", "undefined" },
+        .{ "count_bb;", "1" },
+        .{ "observer_bb.observe(bb1);", "undefined" },
+        .{ "count_bb;", "1" }, // Still 1, not 2
+    }, .{});
+
+    // Unobserve
+    try runner.testCases(&.{
+        .{ "let count_c = 0;", "undefined" },
+        .{ "let observer_c = new IntersectionObserver(entries => { count_c = entries.length;});", "undefined" },
+        .{ "const c1 = document.createElement('div');", "undefined" },
+        .{ "observer_c.observe(c1);", "undefined" },
+        .{ "count_c;", "1" },
+        .{ "observer_c.unobserve(c1);", "undefined" },
+        .{ "const c2 = document.createElement('div');", "undefined" },
+        .{ "observer_c.observe(c2);", "undefined" },
+        .{ "count_c;", "1" },
+    }, .{});
+
+    // Disconnect
+    try runner.testCases(&.{
+        .{ "let observer_d = new IntersectionObserver(entries => {});", "undefined" },
+        .{ "let d1 = document.createElement('div');", "undefined" },
+        .{ "observer_d.observe(d1);", "undefined" },
+        .{ "observer_d.disconnect();", "undefined" },
+        .{ "observer_d.takeRecords().length;", "0" },
+    }, .{});
+
+    // takeRecords
+    try runner.testCases(&.{
+        .{ "let observer_e = new IntersectionObserver(entries => {});", "undefined" },
+        .{ "let e1 = document.createElement('div');", "undefined" },
+        .{ "observer_e.observe(e1);", "undefined" },
+        .{ "const e2 = document.createElement('div');", "undefined" },
+        .{ "observer_e.observe(e2);", "undefined" },
+        .{ "observer_e.takeRecords().length;", "2" },
+    }, .{});
+
+    // Entry
+    try runner.testCases(&.{
+        .{ "let entry;", "undefined" },
+        .{ "let div1 = document.createElement('div')", null },
+        .{ "document.body.appendChild(div1);", null },
+        .{ "new IntersectionObserver(entries => { entry = entries[0]; }).observe(div1);", null },
+        .{ "entry.boundingClientRect.x;", "0" },
+        .{ "entry.intersectionRatio;", "1" },
+        .{ "entry.intersectionRect.x;", "0" },
+        .{ "entry.intersectionRect.y;", "0" },
+        .{ "entry.intersectionRect.width;", "1" },
+        .{ "entry.intersectionRect.height;", "1" },
+        .{ "entry.isIntersecting;", "true" },
+        .{ "entry.rootBounds.x;", "0" },
+        .{ "entry.rootBounds.y;", "0" },
+        .{ "entry.rootBounds.width;", "1" },
+        .{ "entry.rootBounds.height;", "1" },
+        .{ "entry.target;", "[object HTMLDivElement]" },
+    }, .{});
+
+    // Options
+    try runner.testCases(&.{
+        .{ "const new_root = document.createElement('span');", null },
+        .{ "document.body.appendChild(new_root);", null },
+        .{ "let new_entry;", "undefined" },
+        .{
+            \\ const new_observer = new IntersectionObserver(
+            \\ entries => { new_entry = entries[0]; },
+            \\ {root: new_root, rootMargin: '0px 0px 0px 0px', threshold: [0]});
+            ,
+            "undefined",
+        },
+        .{ "new_observer.observe(document.createElement('div'));", "undefined" },
+        .{ "new_entry.rootBounds.x;", "1" },
+    }, .{});
 }

src/browser/dom/mutation_observer.zig

@@ -35,33 +35,25 @@ const Walker = @import("../dom/walker.zig").WalkerChildren;
 
 // WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
 pub const MutationObserver = struct {
-    page: *Page,
     cbk: Env.Function,
-    connected: bool,
-    scheduled: bool,
+    arena: Allocator,
 
     // List of records which were observed. When the call scope ends, we need to
     // execute our callback with it.
-    observed: std.ArrayListUnmanaged(MutationRecord),
+    observed: std.ArrayListUnmanaged(*MutationRecord),
 
     pub fn constructor(cbk: Env.Function, page: *Page) !MutationObserver {
         return .{
             .cbk = cbk,
-            .page = page,
             .observed = .{},
-            .connected = true,
-            .scheduled = false,
+            .arena = page.arena,
         };
     }
 
-    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?Options) !void {
-        const arena = self.page.arena;
-        var options = options_ orelse Options{};
-        if (options.attributeFilter.len > 0) {
-            options.attributeFilter = try arena.dupe([]const u8, options.attributeFilter);
-        }
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
+        const options = options_ orelse MutationObserverInit{};
 
-        const observer = try arena.create(Observer);
+        const observer = try self.arena.create(Observer);
         observer.* = .{
             .node = node,
             .options = options,
@@ -110,35 +102,30 @@ pub const MutationObserver = struct {
         }
     }
 
-    fn callback(ctx: *anyopaque) ?u32 {
-        const self: *MutationObserver = @ptrCast(@alignCast(ctx));
-        if (self.connected == false) {
-            self.scheduled = true;
-            return null;
-        }
-        self.scheduled = false;
-
-        const records = self.observed.items;
-        if (records.len == 0) {
-            return null;
+    pub fn jsCallScopeEnd(self: *MutationObserver) void {
+        const record = self.observed.items;
+        if (record.len == 0) {
+            return;
         }
 
         defer self.observed.clearRetainingCapacity();
 
-        var result: Env.Function.Result = undefined;
-        self.cbk.tryCall(void, .{records}, &result) catch {
-            log.debug(.user_script, "callback error", .{
-                .err = result.exception,
-                .stack = result.stack,
-                .source = "mutation observer",
-            });
-        };
-        return null;
+        for (record) |r| {
+            const records = [_]MutationRecord{r.*};
+            var result: Env.Function.Result = undefined;
+            self.cbk.tryCall(void, .{records}, &result) catch {
+                log.debug(.user_script, "callback error", .{
+                    .err = result.exception,
+                    .stack = result.stack,
+                    .source = "mutation observer",
+                });
+            };
+        }
     }
 
     // TODO
-    pub fn _disconnect(self: *MutationObserver) !void {
-        self.connected = false;
+    pub fn _disconnect(_: *MutationObserver) !void {
+        // TODO unregister listeners.
     }
 
     // TODO
@@ -195,27 +182,31 @@ pub const MutationRecord = struct {
     }
 };
 
-const Options = struct {
+const MutationObserverInit = struct {
     childList: bool = false,
     attributes: bool = false,
     characterData: bool = false,
     subtree: bool = false,
     attributeOldValue: bool = false,
     characterDataOldValue: bool = false,
-    attributeFilter: [][]const u8 = &.{},
+    // TODO
+    // attributeFilter: [][]const u8,
 
-    fn attr(self: Options) bool {
-        return self.attributes or self.attributeOldValue or self.attributeFilter.len > 0;
+    fn attr(self: MutationObserverInit) bool {
+        return self.attributes or self.attributeOldValue;
     }
 
-    fn cdata(self: Options) bool {
+    fn cdata(self: MutationObserverInit) bool {
         return self.characterData or self.characterDataOldValue;
     }
 };
 
 const Observer = struct {
     node: *parser.Node,
-    options: Options,
+    options: MutationObserverInit,
+
+    // record of the mutation, all observed changes in 1 call are batched
+    record: ?MutationRecord = null,
 
     // reference back to the MutationObserver so that we can access the arena
     // and batch the mutation records.
@@ -223,34 +214,19 @@ const Observer = struct {
 
     event_node: parser.EventNode,
 
-    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;
-        }
-
+    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
         // mutation on any target is always ok.
-        if (self.options.subtree) {
+        if (o.options.subtree) {
             return true;
         }
 
         // if target equals node, alway ok.
-        if (target == self.node) {
+        if (target == o.node) {
             return true;
         }
 
         // no subtree, no same target and no childlist, always noky.
-        if (!self.options.childList) {
+        if (!o.options.childList) {
             return false;
         }
 
@@ -258,7 +234,7 @@ const Observer = struct {
         const walker = Walker{};
         var next: ?*parser.Node = null;
         while (true) {
-            next = walker.get_next(self.node, next) catch break orelse break;
+            next = walker.get_next(o.node, next) catch break orelse break;
             if (next.? == target) {
                 return true;
             }
@@ -282,22 +258,27 @@ const Observer = struct {
             break :blk parser.eventTargetToNode(event_target);
         };
 
-        const mutation_event = parser.eventToMutationEvent(event);
+        if (self.appliesTo(node) == false) {
+            return;
+        }
+
         const event_type = blk: {
             const t = try parser.eventType(event);
             break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
         };
 
-        if (try self.appliesTo(node, event_type, mutation_event) == false) {
-            return;
+        const arena = mutation_observer.arena;
+        if (self.record == null) {
+            self.record = .{
+                .target = self.node,
+                .type = event_type.recordType(),
+            };
+            try mutation_observer.observed.append(arena, &self.record.?);
         }
 
-        var record = MutationRecord{
-            .target = self.node,
-            .type = event_type.recordType(),
-        };
+        var record = &self.record.?;
+        const mutation_event = parser.eventToMutationEvent(event);
 
-        const arena = mutation_observer.page.arena;
         switch (event_type) {
             .DOMAttrModified => {
                 record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
@@ -321,18 +302,6 @@ const Observer = struct {
                 }
             },
         }
-
-        try mutation_observer.observed.append(arena, record);
-
-        if (mutation_observer.scheduled == false) {
-            mutation_observer.scheduled = true;
-            try mutation_observer.page.scheduler.add(
-                mutation_observer,
-                MutationObserver.callback,
-                0,
-                .{ .name = "mutation_observer" },
-            );
-        }
     }
 };
 
@@ -353,6 +322,68 @@ const MutationEventType = enum {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: DOM.MutationObserver" {
-    try testing.htmlRunner("dom/mutation_observer.html");
+test "Browser.DOM.MutationObserver" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "new MutationObserver(() => {}).observe(document, { childList: true });", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var nb = 0;
+            \\ var mrs;
+            \\ new MutationObserver((mu) => {
+            \\    mrs = mu;
+            \\    nb++;
+            \\ }).observe(document.firstElementChild, { attributes: true, attributeOldValue: true });
+            \\ document.firstElementChild.setAttribute("foo", "bar");
+            \\ // ignored b/c it's about another target.
+            \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
+            \\ nb;
+            ,
+            "1",
+        },
+        .{ "mrs[0].type", "attributes" },
+        .{ "mrs[0].target == document.firstElementChild", "true" },
+        .{ "mrs[0].target.getAttribute('foo')", "bar" },
+        .{ "mrs[0].attributeName", "foo" },
+        .{ "mrs[0].oldValue", "null" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para").firstChild;
+            \\ var nb2 = 0;
+            \\ var mrs2;
+            \\ new MutationObserver((mu) => {
+            \\     mrs2 = mu;
+            \\     nb2++;
+            \\ }).observe(node, { characterData: true, characterDataOldValue: true });
+            \\ node.data = "foo";
+            \\ nb2;
+            ,
+            "1",
+        },
+        .{ "mrs2[0].type", "characterData" },
+        .{ "mrs2[0].target == node", "true" },
+        .{ "mrs2[0].target.data", "foo" },
+        .{ "mrs2[0].oldValue", " And" },
+    }, .{});
+
+    // tests that mutation observers that have a callback which trigger the
+    // mutation observer don't crash.
+    // https://github.com/lightpanda-io/browser/issues/550
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ new MutationObserver(() => {
+            \\     node.innerText = 'a';
+            \\ }).observe(document, { subtree:true,childList:true });
+            \\ node.innerText = "2";
+            ,
+            "2",
+        },
+    }, .{});
 }

src/browser/dom/namednodemap.zig

@@ -115,7 +115,24 @@ pub const NamedNodeMapIterator = struct {
     }
 };
 
+// Tests
+// -----
+
 const testing = @import("../../testing.zig");
-test "Browser: DOM.NamedNodeMap" {
-    try testing.htmlRunner("dom/named_node_map.html");
+test "Browser.DOM.NamedNodeMap" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let a = document.getElementById('content').attributes", "undefined" },
+        .{ "a.length", "1" },
+        .{ "a.item(0)", "[object Attr]" },
+        .{ "a.item(1)", "null" },
+        .{ "a.getNamedItem('id')", "[object Attr]" },
+        .{ "a.getNamedItem('foo')", "null" },
+        .{ "a.setNamedItem(a.getNamedItem('id'))", "[object Attr]" },
+        .{ "a['id'].name", "id" },
+        .{ "a['id'].value", "content" },
+        .{ "a['other']", "undefined" },
+    }, .{});
 }

src/browser/dom/node.zig

@@ -29,7 +29,6 @@ const EventTarget = @import("event_target.zig").EventTarget;
 const Attr = @import("attribute.zig").Attr;
 const CData = @import("character_data.zig");
 const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
 const NodeList = @import("nodelist.zig").NodeList;
 const Document = @import("document.zig").Document;
 const DocumentType = @import("document_type.zig").DocumentType;
@@ -37,11 +36,11 @@ const DocumentFragment = @import("document_fragment.zig").DocumentFragment;
 const HTMLCollection = @import("html_collection.zig").HTMLCollection;
 const HTMLAllCollection = @import("html_collection.zig").HTMLAllCollection;
 const HTMLCollectionIterator = @import("html_collection.zig").HTMLCollectionIterator;
-const ShadowRoot = @import("shadow_root.zig").ShadowRoot;
 const Walker = @import("walker.zig").WalkerDepthFirst;
 
 // HTML
 const HTML = @import("../html/html.zig");
+const HTMLElem = @import("../html/elements.zig");
 
 // Node interfaces
 pub const Interfaces = .{
@@ -68,7 +67,7 @@ pub const Node = struct {
 
     pub fn toInterface(node: *parser.Node) !Union {
         return switch (try parser.nodeType(node)) {
-            .element => try Element.toInterfaceT(
+            .element => try HTMLElem.toInterface(
                 Union,
                 @as(*parser.Element, @ptrCast(node)),
             ),
@@ -76,14 +75,7 @@ pub const Node = struct {
             .text => .{ .Text = @as(*parser.Text, @ptrCast(node)) },
             .cdata_section => .{ .CDATASection = @as(*parser.CDATASection, @ptrCast(node)) },
             .processing_instruction => .{ .ProcessingInstruction = @as(*parser.ProcessingInstruction, @ptrCast(node)) },
-            .document => blk: {
-                const doc: *parser.Document = @ptrCast(node);
-                if (doc.is_html) {
-                    break :blk .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) };
-                }
-
-                break :blk .{ .Document = doc };
-            },
+            .document => .{ .HTMLDocument = @as(*parser.DocumentHTML, @ptrCast(node)) },
             .document_type => .{ .DocumentType = @as(*parser.DocumentType, @ptrCast(node)) },
             .attribute => .{ .Attr = @as(*parser.Attribute, @ptrCast(node)) },
             .document_fragment => .{ .DocumentFragment = @as(*parser.DocumentFragment, @ptrCast(node)) },
@@ -108,20 +100,10 @@ pub const Node = struct {
     pub const _ENTITY_NODE = @intFromEnum(parser.NodeType.entity);
     pub const _NOTATION_NODE = @intFromEnum(parser.NodeType.notation);
 
-    pub const _DOCUMENT_POSITION_DISCONNECTED = @intFromEnum(parser.DocumentPosition.disconnected);
-    pub const _DOCUMENT_POSITION_PRECEDING = @intFromEnum(parser.DocumentPosition.preceding);
-    pub const _DOCUMENT_POSITION_FOLLOWING = @intFromEnum(parser.DocumentPosition.following);
-    pub const _DOCUMENT_POSITION_CONTAINS = @intFromEnum(parser.DocumentPosition.contains);
-    pub const _DOCUMENT_POSITION_CONTAINED_BY = @intFromEnum(parser.DocumentPosition.contained_by);
-    pub const _DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = @intFromEnum(parser.DocumentPosition.implementation_specific);
-
     // JS funcs
     // --------
 
     // Read-only attributes
-    pub fn get_baseURI(_: *parser.Node, page: *Page) ![]const u8 {
-        return page.url.raw;
-    }
 
     pub fn get_firstChild(self: *parser.Node) !?Union {
         const res = try parser.nodeFirstChild(self);
@@ -163,12 +145,12 @@ pub const Node = struct {
         return try Node.toInterface(res.?);
     }
 
-    pub fn get_parentElement(self: *parser.Node) !?ElementUnion {
+    pub fn get_parentElement(self: *parser.Node) !?HTMLElem.Union {
         const res = try parser.nodeParentElement(self);
         if (res == null) {
             return null;
         }
-        return try Element.toInterface(res.?);
+        return try HTMLElem.toInterface(HTMLElem.Union, @as(*parser.Element, @ptrCast(res.?)));
     }
 
     pub fn get_nodeName(self: *parser.Node) ![]const u8 {
@@ -188,35 +170,11 @@ pub const Node = struct {
     }
 
     pub fn get_isConnected(self: *parser.Node) !bool {
-        var node = self;
-        while (true) {
-            const node_type = try parser.nodeType(node);
-            if (node_type == .document) {
-                return true;
-            }
-
-            if (try parser.nodeParentNode(node)) |parent| {
-                // didn't find a document, but node has a parent, let's see
-                // if it's connected;
-                node = parent;
-                continue;
-            }
-
-            if (node_type != .document_fragment) {
-                // doesn't have a parent and isn't a document_fragment
-                // can't be connected
-                return false;
-            }
-
-            if (parser.documentFragmentGetHost(@ptrCast(node))) |host| {
-                // node doesn't have a parent, but it's a document fragment
-                // with a host. The host is like the parent, but we only want to
-                // traverse up (or down) to it in specific cases, like isConnected.
-                node = host;
-                continue;
-            }
-            return false;
+        // TODO: handle Shadow DOM
+        if (try parser.nodeType(self) == .document) {
+            return true;
         }
+        return try Node.get_parentNode(self) != null;
     }
 
     // Read/Write attributes
@@ -240,23 +198,6 @@ pub const Node = struct {
     // Methods
 
     pub fn _appendChild(self: *parser.Node, child: *parser.Node) !Union {
-        const self_owner = try parser.nodeOwnerDocument(self);
-        const child_owner = try parser.nodeOwnerDocument(child);
-
-        // If the node to be inserted has a different ownerDocument than the parent node,
-        // modern browsers automatically adopt the node and its descendants into
-        // the parent's ownerDocument.
-        // This process is known as adoption.
-        // (7.1) https://dom.spec.whatwg.org/#concept-node-insert
-        if (child_owner == null or (self_owner != null and child_owner.? != self_owner.?)) {
-            const w = Walker{};
-            var current = child;
-            while (true) {
-                current.owner = self_owner;
-                current = try w.get_next(child, current) orelse break;
-            }
-        }
-
         // TODO: DocumentFragment special case
         const res = try parser.nodeAppendChild(self, child);
         return try Node.toInterface(res);
@@ -268,43 +209,14 @@ pub const Node = struct {
     }
 
     pub fn _compareDocumentPosition(self: *parser.Node, other: *parser.Node) !u32 {
-        if (self == other) {
-            return 0;
-        }
+        if (self == other) return 0;
 
-        const docself = try parser.nodeOwnerDocument(self) orelse blk: {
-            if (try parser.nodeType(self) == .document) {
-                break :blk @as(*parser.Document, @ptrCast(self));
-            }
-            break :blk null;
-        };
-        const docother = try parser.nodeOwnerDocument(other) orelse blk: {
-            if (try parser.nodeType(other) == .document) {
-                break :blk @as(*parser.Document, @ptrCast(other));
-            }
-            break :blk null;
-        };
+        const docself = try parser.nodeOwnerDocument(self);
+        const docother = try parser.nodeOwnerDocument(other);
 
         // Both are in different document.
-        if (docself == null or docother == null or docself.? != docother.?) {
-            return @intFromEnum(parser.DocumentPosition.disconnected) +
-                @intFromEnum(parser.DocumentPosition.implementation_specific) +
-                @intFromEnum(parser.DocumentPosition.preceding);
-        }
-
-        if (@intFromPtr(self) == @intFromPtr(docself.?)) {
-            // if self is the document, and we already know other is in the
-            // document, then other is contained by and following self.
-            return @intFromEnum(parser.DocumentPosition.following) +
-                @intFromEnum(parser.DocumentPosition.contained_by);
-        }
-
-        const rootself = try parser.nodeGetRootNode(self);
-        const rootother = try parser.nodeGetRootNode(other);
-        if (rootself != rootother) {
-            return @intFromEnum(parser.DocumentPosition.disconnected) +
-                @intFromEnum(parser.DocumentPosition.implementation_specific) +
-                @intFromEnum(parser.DocumentPosition.preceding);
+        if (docself == null or docother == null or docother.? != docself.?) {
+            return @intFromEnum(parser.DocumentPosition.disconnected);
         }
 
         // TODO Both are in a different trees in the same document.
@@ -355,23 +267,11 @@ pub const Node = struct {
     // - An Element inside a standard web page will return an HTMLDocument object representing the entire page (or <iframe>).
     // - An Element inside a shadow DOM will return the associated ShadowRoot.
     // - An Element that is not attached to a document or a shadow tree will return the root of the DOM tree it belongs to
-    const GetRootNodeResult = union(enum) {
-        shadow_root: *ShadowRoot,
-        node: Union,
-    };
-    pub fn _getRootNode(self: *parser.Node, options: ?struct { composed: bool = false }, page: *Page) !GetRootNodeResult {
+    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" });
         };
-
-        const root = try parser.nodeGetRootNode(self);
-        if (page.getNodeState(root)) |state| {
-            if (state.shadow_root) |sr| {
-                return .{ .shadow_root = sr };
-            }
-        }
-
-        return .{ .node = try Node.toInterface(root) };
+        return try Node.toInterface(try parser.nodeGetRootNode(self));
     }
 
     pub fn _hasChildNodes(self: *parser.Node) !bool {
@@ -390,28 +290,10 @@ pub const Node = struct {
     }
 
     pub fn _insertBefore(self: *parser.Node, new_node: *parser.Node, ref_node_: ?*parser.Node) !Union {
-        if (ref_node_ == null) {
-            return _appendChild(self, new_node);
+        if (ref_node_) |ref_node| {
+            return Node.toInterface(try parser.nodeInsertBefore(self, new_node, ref_node));
         }
-
-        const self_owner = try parser.nodeOwnerDocument(self);
-        const new_node_owner = try parser.nodeOwnerDocument(new_node);
-
-        // If the node to be inserted has a different ownerDocument than the parent node,
-        // modern browsers automatically adopt the node and its descendants into
-        // the parent's ownerDocument.
-        // This process is known as adoption.
-        // (7.1) https://dom.spec.whatwg.org/#concept-node-insert
-        if (new_node_owner == null or (self_owner != null and new_node_owner.? != self_owner.?)) {
-            const w = Walker{};
-            var current = new_node;
-            while (true) {
-                current.owner = self_owner;
-                current = try w.get_next(new_node, current) orelse break;
-            }
-        }
-
-        return Node.toInterface(try parser.nodeInsertBefore(self, new_node, ref_node_.?));
+        return _appendChild(self, new_node);
     }
 
     pub fn _isDefaultNamespace(self: *parser.Node, namespace: ?[]const u8) !bool {
@@ -614,7 +496,7 @@ pub const Node = struct {
         fn toNode(self: NodeOrText, doc: *parser.Document) !*parser.Node {
             return switch (self) {
                 .node => |n| n,
-                .text => |txt| @ptrCast(@alignCast(try parser.documentCreateTextNode(doc, txt))),
+                .text => |txt| @alignCast(@ptrCast(try parser.documentCreateTextNode(doc, txt))),
             };
         }
 
@@ -725,13 +607,7 @@ test "Browser.DOM.node" {
     try runner.testCases(&.{
         .{ "content.isConnected", "true" },
         .{ "document.isConnected", "true" },
-        .{ "const connDiv = document.createElement('div')", null },
-        .{ "connDiv.isConnected", "false" },
-        .{ "const connParentDiv = document.createElement('div')", null },
-        .{ "connParentDiv.appendChild(connDiv)", null },
-        .{ "connDiv.isConnected", "false" },
-        .{ "content.appendChild(connParentDiv)", null },
-        .{ "connDiv.isConnected", "true" },
+        .{ "document.createElement('div').isConnected", "false" },
     }, .{});
 
     try runner.testCases(&.{
@@ -819,10 +695,6 @@ test "Browser.DOM.node" {
         .{ "link.normalize()", "undefined" },
     }, .{});
 
-    try runner.testCases(&.{
-        .{ "link.baseURI", "https://lightpanda.io/opensource-browser/" },
-    }, .{});
-
     try runner.testCases(&.{
         .{ "content.removeChild(append) !== undefined", "true" },
         .{ "last_child.__proto__.constructor.name !== 'HTMLHeadingElement'", "true" },
@@ -848,45 +720,3 @@ test "Browser.DOM.node" {
         .{ "Node.NOTATION_NODE", "12" },
     }, .{});
 }
-
-test "Browser.DOM.node.owner" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\  <div id="target-container">
-        \\     <p id="reference-node">
-        \\         I am the original reference node.
-        \\     </p>
-        \\  </div>"
-    });
-
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{
-            \\ const parser = new DOMParser();
-            \\ const newDoc = parser.parseFromString('<div id="new-node"><p>Hey</p><span>Marked</span></div>', 'text/html');
-            \\ const newNode = newDoc.getElementById('new-node');
-            \\ const parent = document.getElementById('target-container');
-            \\ const referenceNode = document.getElementById('reference-node');
-            \\ parent.insertBefore(newNode, referenceNode);
-            \\ const k = document.getElementById('new-node');
-            \\ const ptag = k.querySelector('p');
-            \\ const spanTag = k.querySelector('span');
-            \\ const anotherDoc = parser.parseFromString('<div id="another-new-node"></div>', 'text/html');
-            \\ const anotherNewNode = anotherDoc.getElementById('another-new-node');
-            \\
-            \\ parent.appendChild(anotherNewNode)
-            ,
-            "[object HTMLDivElement]",
-        },
-
-        .{ "parent.ownerDocument === newNode.ownerDocument", "true" },
-        .{ "parent.ownerDocument === anotherNewNode.ownerDocument", "true" },
-        .{ "newNode.firstChild.nodeName", "P" },
-        .{ "ptag.ownerDocument === parent.ownerDocument", "true" },
-        .{ "spanTag.ownerDocument === parent.ownerDocument", "true" },
-        .{ "parent.contains(newNode)", "true" },
-        .{ "parent.contains(anotherNewNode)", "true" },
-        .{ "anotherDoc.contains(anotherNewNode)", "false" },
-        .{ "newDoc.contains(newNode)", "false" },
-    }, .{});
-}

src/browser/dom/node_filter.zig

@@ -17,15 +17,11 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const 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;
@@ -41,39 +37,6 @@ pub const NodeFilter = struct {
     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, .{});

src/browser/dom/node_iterator.zig

@@ -1,338 +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 Env = @import("../env.zig").Env;
-const NodeFilter = @import("node_filter.zig");
-const Node = @import("node.zig").Node;
-const NodeUnion = @import("node.zig").Union;
-const DOMException = @import("exceptions.zig").DOMException;
-
-// https://developer.mozilla.org/en-US/docs/Web/API/NodeIterator
-// While this is similar to TreeWalker it has its own implementation as there are several subtle differences
-// For example:
-// - nextNode returns the reference node, whereas TreeWalker returns the next node
-// - Skip and reject are equivalent for NodeIterator, for TreeWalker they are different
-pub const NodeIterator = struct {
-    pub const Exception = DOMException;
-
-    root: *parser.Node,
-    reference_node: *parser.Node,
-    what_to_show: u32,
-    filter: ?NodeIteratorOpts,
-    filter_func: ?Env.Function,
-    pointer_before_current: bool = true,
-    // used to track / block recursive filters
-    is_in_callback: bool = false,
-
-    // One of the few cases where null and undefined resolve to different default.
-    // We need the raw JsObject so that we can probe the tri state:
-    // null, undefined or i32.
-    pub const WhatToShow = Env.JsObject;
-
-    pub const NodeIteratorOpts = union(enum) {
-        function: Env.Function,
-        object: struct { acceptNode: Env.Function },
-    };
-
-    pub fn init(node: *parser.Node, what_to_show_: ?WhatToShow, filter: ?NodeIteratorOpts) !NodeIterator {
-        var filter_func: ?Env.Function = null;
-        if (filter) |f| {
-            filter_func = switch (f) {
-                .function => |func| func,
-                .object => |o| o.acceptNode,
-            };
-        }
-
-        var what_to_show: u32 = undefined;
-        if (what_to_show_) |wts| {
-            switch (try wts.triState(NodeIterator, "what_to_show", u32)) {
-                .null => what_to_show = 0,
-                .undefined => what_to_show = NodeFilter.NodeFilter._SHOW_ALL,
-                .value => |v| what_to_show = v,
-            }
-        } else {
-            what_to_show = NodeFilter.NodeFilter._SHOW_ALL;
-        }
-
-        return .{
-            .root = node,
-            .reference_node = node,
-            .what_to_show = what_to_show,
-            .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 {
-        try self.callbackStart();
-        defer self.callbackEnd();
-
-        if (self.pointer_before_current) {
-            // Unlike TreeWalker, NodeIterator starts at the first node
-            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
-                self.pointer_before_current = false;
-                return try Node.toInterface(self.reference_node);
-            }
-        }
-
-        if (try self.firstChild(self.reference_node)) |child| {
-            self.reference_node = child;
-            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 {
-        try self.callbackStart();
-        defer self.callbackEnd();
-
-        if (!self.pointer_before_current) {
-            if (.accept == try NodeFilter.verify(self.what_to_show, self.filter_func, self.reference_node)) {
-                self.pointer_before_current = true;
-                // Still need to verify as last may be first as well
-                return try Node.toInterface(self.reference_node);
-            }
-        }
-        if (self.reference_node == self.root) {
-            return null;
-        }
-
-        var current = self.reference_node;
-        while (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;
-    }
-
-    pub fn _detach(self: *const NodeIterator) void {
-        // no-op as per spec
-        _ = self;
-    }
-
-    fn firstChild(self: *const NodeIterator, node: *parser.Node) !?*parser.Node {
-        const children = try parser.nodeGetChildNodes(node);
-        const child_count = 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;
-    }
-
-    fn callbackStart(self: *NodeIterator) !void {
-        if (self.is_in_callback) {
-            // this is the correct DOMExeption
-            return error.InvalidState;
-        }
-        self.is_in_callback = true;
-    }
-
-    fn callbackEnd(self: *NodeIterator) void {
-        self.is_in_callback = false;
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser.DOM.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

@@ -110,7 +110,7 @@ pub const NodeList = struct {
         try self.nodes.append(alloc, node);
     }
 
-    pub fn get_length(self: *const NodeList) u32 {
+    pub fn get_length(self: *NodeList) u32 {
         return @intCast(self.nodes.items.len);
     }
 

src/browser/dom/performance.zig

@@ -1,224 +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;
-const Env = @import("../env.zig").Env;
-const Page = @import("../page.zig").Page;
-
-const milliTimestamp = @import("../../datetime.zig").milliTimestamp;
-
-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: u64,
-    // if (Window.crossOriginIsolated) -> Resolution in isolated contexts:       5 microseconds
-    // else                            -> Resolution in non-isolated contexts: 100 microseconds
-    const ms_resolution = 100;
-
-    pub fn init() Performance {
-        return .{
-            .time_origin = milliTimestamp(),
-        };
-    }
-
-    pub fn get_timeOrigin(self: *const Performance) u64 {
-        return self.time_origin;
-    }
-
-    pub fn reset(self: *Performance) void {
-        self.time_origin = milliTimestamp();
-    }
-
-    pub fn _now(self: *const Performance) u64 {
-        return milliTimestamp() - self.time_origin;
-    }
-
-    pub fn _mark(_: *Performance, name: []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;
-    }
-
-    // TODO: fn _measures should record the marks in a lookup
-    pub fn _getEntriesByName(_: *Performance, name: []const u8, typ: ?[]const u8) []PerformanceEntry {
-        _ = name;
-        _ = typ;
-        return &.{};
-    }
-
-    // TODO: fn _measures should record the marks in a lookup
-    pub fn _getEntriesByType(_: *Performance, typ: []const u8) []PerformanceEntry {
-        _ = typ;
-        return &.{};
-    }
-};
-
-// https://developer.mozilla.org/en-US/docs/Web/API/PerformanceEntry
-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,
-        startTime: ?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.startTime orelse @as(f64, @floatFromInt(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.init();
-    const time_origin = perf.get_timeOrigin();
-    try testing.expect(time_origin >= 0);
-}
-
-test "Performance: now" {
-    var perf = Performance.init();
-
-    // Monotonically increasing
-    var now = perf._now();
-    while (now <= 0) { // Loop for now to not be 0
-        try testing.expectEqual(now, 0);
-        now = perf._now();
-    }
-
-    var after = perf._now();
-    while (after <= now) { // Loop untill after > now
-        try testing.expectEqual(after, now);
-        after = perf._now();
-    }
-}
-
-test "Browser.Performance.Mark" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let performance = window.performance", null },
-        .{ "performance instanceof Performance", "true" },
-
-        .{ "let mark1 = performance.mark(\"start\")", null },
-        .{ "mark1 instanceof PerformanceMark", "true" },
-        .{ "mark1.name", "start" },
-        .{ "mark1.entryType", "mark" },
-        .{ "mark1.duration", "0" },
-        .{ "mark1.detail", "null" },
-
-        .{ "let mark2 = performance.mark(\"start\", {startTime: 32939393.9})", null },
-        .{ "mark2.startTime", "32939393.9" },
-    }, .{});
-}

src/browser/dom/performance_observer.zig

@@ -1,63 +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 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/range.zig

@@ -1,428 +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 parser = @import("../netsurf.zig");
-const Page = @import("../page.zig").Page;
-
-const Node = @import("node.zig").Node;
-const NodeUnion = @import("node.zig").Union;
-const DOMException = @import("exceptions.zig").DOMException;
-
-pub const Interfaces = .{
-    AbstractRange,
-    Range,
-};
-
-pub const AbstractRange = struct {
-    collapsed: bool,
-    end_node: *parser.Node,
-    end_offset: u32,
-    start_node: *parser.Node,
-    start_offset: u32,
-
-    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_node);
-    }
-
-    pub fn get_endOffset(self: *const AbstractRange) u32 {
-        return self.end_offset;
-    }
-
-    pub fn get_startContainer(self: *const AbstractRange) !NodeUnion {
-        return Node.toInterface(self.start_node);
-    }
-
-    pub fn get_startOffset(self: *const AbstractRange) u32 {
-        return self.start_offset;
-    }
-};
-
-pub const Range = struct {
-    pub const Exception = DOMException;
-    pub const prototype = *AbstractRange;
-
-    proto: AbstractRange,
-
-    pub const _START_TO_START = 0;
-    pub const _START_TO_END = 1;
-    pub const _END_TO_END = 2;
-    pub const _END_TO_START = 3;
-
-    // The Range() constructor returns a newly created Range object whose start
-    // and end is the global Document object.
-    // https://developer.mozilla.org/en-US/docs/Web/API/Range/Range
-    pub fn constructor(page: *Page) Range {
-        const proto: AbstractRange = .{
-            .collapsed = true,
-            .end_node = parser.documentHTMLToNode(page.window.document),
-            .end_offset = 0,
-            .start_node = parser.documentHTMLToNode(page.window.document),
-            .start_offset = 0,
-        };
-
-        return .{ .proto = proto };
-    }
-
-    pub fn _setStart(self: *Range, node: *parser.Node, offset_: i32) !void {
-        try ensureValidOffset(node, offset_);
-        const offset: u32 = @intCast(offset_);
-        const position = compare(node, offset, self.proto.start_node, self.proto.start_offset) catch |err| switch (err) {
-            error.WrongDocument => blk: {
-                // allow a node with a different root than the current, or
-                // a disconnected one. Treat it as if it's "after", so that
-                // we also update the end_offset and end_node.
-                break :blk 1;
-            },
-            else => return err,
-        };
-
-        if (position == 1) {
-            // if we're setting the node after the current start, the end must
-            // be set too.
-            self.proto.end_offset = offset;
-            self.proto.end_node = node;
-        }
-        self.proto.start_node = node;
-        self.proto.start_offset = offset;
-        self.proto.updateCollapsed();
-    }
-
-    pub fn _setStartBefore(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.start_node = parent;
-        self.proto.start_offset = index;
-    }
-
-    pub fn _setStartAfter(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.start_node = parent;
-        self.proto.start_offset = index + 1;
-    }
-
-    pub fn _setEnd(self: *Range, node: *parser.Node, offset_: i32) !void {
-        try ensureValidOffset(node, offset_);
-        const offset: u32 = @intCast(offset_);
-
-        const position = compare(node, offset, self.proto.start_node, self.proto.start_offset) catch |err| switch (err) {
-            error.WrongDocument => blk: {
-                // allow a node with a different root than the current, or
-                // a disconnected one. Treat it as if it's "before", so that
-                // we also update the end_offset and end_node.
-                break :blk -1;
-            },
-            else => return err,
-        };
-
-        if (position == -1) {
-            // if we're setting the node before the current start, the start
-            // must be set too.
-            self.proto.start_offset = offset;
-            self.proto.start_node = node;
-        }
-
-        self.proto.end_node = node;
-        self.proto.end_offset = offset;
-        self.proto.updateCollapsed();
-    }
-
-    pub fn _setEndBefore(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.end_node = parent;
-        self.proto.end_offset = index;
-    }
-
-    pub fn _setEndAfter(self: *Range, node: *parser.Node) !void {
-        const parent, const index = try getParentAndIndex(node);
-        self.proto.end_node = parent;
-        self.proto.end_offset = index + 1;
-    }
-
-    pub fn _createContextualFragment(_: *Range, fragment: []const u8, page: *Page) !*parser.DocumentFragment {
-        const document_html = page.window.document;
-        const document = parser.documentHTMLToDocument(document_html);
-        const doc_frag = try parser.documentParseFragmentFromStr(document, fragment);
-        return doc_frag;
-    }
-
-    pub fn _selectNodeContents(self: *Range, node: *parser.Node) !void {
-        self.proto.start_node = node;
-        self.proto.start_offset = 0;
-        self.proto.end_node = 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();
-    }
-
-    // creates a copy
-    pub fn _cloneRange(self: *const Range) Range {
-        return .{
-            .proto = .{
-                .collapsed = self.proto.collapsed,
-                .end_node = self.proto.end_node,
-                .end_offset = self.proto.end_offset,
-                .start_node = self.proto.start_node,
-                .start_offset = self.proto.start_offset,
-            },
-        };
-    }
-
-    pub fn _comparePoint(self: *const Range, node: *parser.Node, offset_: i32) !i32 {
-        const start = self.proto.start_node;
-        if (try parser.nodeGetRootNode(start) != try parser.nodeGetRootNode(node)) {
-            // WPT really wants this error to be first. Later, when we check
-            // if the relative position is 'disconnected', it'll also catch this
-            // case, but WPT will complain because it sometimes also sends
-            // invalid offsets, and it wants WrongDocument to be raised.
-            return error.WrongDocument;
-        }
-
-        if (try parser.nodeType(node) == .document_type) {
-            return error.InvalidNodeType;
-        }
-
-        try ensureValidOffset(node, offset_);
-
-        const offset: u32 = @intCast(offset_);
-        if (try compare(node, offset, start, self.proto.start_offset) == -1) {
-            return -1;
-        }
-
-        if (try compare(node, offset, self.proto.end_node, self.proto.end_offset) == 1) {
-            return 1;
-        }
-
-        return 0;
-    }
-
-    pub fn _isPointInRange(self: *const Range, node: *parser.Node, offset_: i32) !bool {
-        return self._comparePoint(node, offset_) catch |err| switch (err) {
-            error.WrongDocument => return false,
-            else => return err,
-        } == 0;
-    }
-
-    pub fn _intersectsNode(self: *const Range, node: *parser.Node) !bool {
-        const start_root = try parser.nodeGetRootNode(self.proto.start_node);
-        const node_root = try parser.nodeGetRootNode(node);
-        if (start_root != node_root) {
-            return false;
-        }
-
-        const parent, const index = getParentAndIndex(node) catch |err| switch (err) {
-            error.InvalidNodeType => return true, // if node has no parent, we return true.
-            else => return err,
-        };
-
-        if (try compare(parent, index + 1, self.proto.start_node, self.proto.start_offset) != 1) {
-            // node isn't after start, can't intersect
-            return false;
-        }
-
-        if (try compare(parent, index, self.proto.end_node, self.proto.end_offset) != -1) {
-            // node isn't before end, can't intersect
-            return false;
-        }
-
-        return true;
-    }
-
-    pub fn _compareBoundaryPoints(self: *const Range, how: i32, other: *const Range) !i32 {
-        return switch (how) {
-            _START_TO_START => compare(self.proto.start_node, self.proto.start_offset, other.proto.start_node, other.proto.start_offset),
-            _START_TO_END => compare(self.proto.start_node, self.proto.start_offset, other.proto.end_node, other.proto.end_offset),
-            _END_TO_END => compare(self.proto.end_node, self.proto.end_offset, other.proto.end_node, other.proto.end_offset),
-            _END_TO_START => compare(self.proto.end_node, self.proto.end_offset, other.proto.start_node, other.proto.start_offset),
-            else => error.NotSupported, // this is the correct DOM Exception to return
-        };
-    }
-
-    // The Range.detach() method does nothing. It used to disable the Range
-    // object and enable the browser to release associated resources. The
-    // method has been kept for compatibility.
-    // https://developer.mozilla.org/en-US/docs/Web/API/Range/detach
-    pub fn _detach(_: *Range) void {}
-};
-
-fn ensureValidOffset(node: *parser.Node, offset: i32) !void {
-    if (offset < 0) {
-        return error.IndexSize;
-    }
-
-    // not >= because 0 seems to represent the node itself.
-    if (offset > try nodeLength(node)) {
-        return error.IndexSize;
-    }
-}
-
-fn nodeLength(node: *parser.Node) !usize {
-    switch (try isTextual(node)) {
-        true => return ((try parser.nodeTextContent(node)) orelse "").len,
-        false => {
-            const children = try parser.nodeGetChildNodes(node);
-            return @intCast(try parser.nodeListLength(children));
-        },
-    }
-}
-
-fn isTextual(node: *parser.Node) !bool {
-    return switch (try parser.nodeType(node)) {
-        .text, .comment, .cdata_section => true,
-        else => false,
-    };
-}
-
-fn getParentAndIndex(child: *parser.Node) !struct { *parser.Node, u32 } {
-    const parent = (try parser.nodeParentNode(child)) orelse return error.InvalidNodeType;
-    const children = try parser.nodeGetChildNodes(parent);
-    const ln = try parser.nodeListLength(children);
-    var i: u32 = 0;
-    while (i < ln) {
-        defer i += 1;
-        const c = try parser.nodeListItem(children, i) orelse continue;
-        if (c == child) {
-            return .{ parent, i };
-        }
-    }
-
-    // should not be possible to reach this point
-    return error.InvalidNodeType;
-}
-
-// implementation is largely copied from the WPT helper called getPosition in
-// the common.js of the dom folder.
-fn compare(node_a: *parser.Node, offset_a: u32, node_b: *parser.Node, offset_b: u32) !i32 {
-    if (node_a == node_b) {
-        // This is a simple and common case, where the two nodes are the same
-        // We just need to compare their offsets
-        if (offset_a == offset_b) {
-            return 0;
-        }
-        return if (offset_a < offset_b) -1 else 1;
-    }
-
-    // We're probably comparing two different nodes. "Probably", because the
-    // above case on considered the offset if the two nodes were the same
-    // as-is. They could still be the same here, if we first consider the
-    // offset.
-    const position = try Node._compareDocumentPosition(node_b, node_a);
-    if (position & @intFromEnum(parser.DocumentPosition.disconnected) == @intFromEnum(parser.DocumentPosition.disconnected)) {
-        return error.WrongDocument;
-    }
-
-    if (position & @intFromEnum(parser.DocumentPosition.following) == @intFromEnum(parser.DocumentPosition.following)) {
-        return switch (try compare(node_b, offset_b, node_a, offset_a)) {
-            -1 => 1,
-            1 => -1,
-            else => unreachable,
-        };
-    }
-
-    if (position & @intFromEnum(parser.DocumentPosition.contains) == @intFromEnum(parser.DocumentPosition.contains)) {
-        // node_a contains node_b
-        var child = node_b;
-        while (try parser.nodeParentNode(child)) |parent| {
-            if (parent == node_a) {
-                // child.parentNode == node_a
-                break;
-            }
-            child = parent;
-        } else {
-            // this should not happen, because  Node._compareDocumentPosition
-            // has told us that node_a contains node_b, so one of node_b's
-            // parent's MUST be node_a. But somehow we do end up here sometimes.
-            return -1;
-        }
-
-        const child_parent, const child_index = try getParentAndIndex(child);
-        std.debug.assert(node_a == child_parent);
-        return if (child_index < offset_a) -1 else 1;
-    }
-
-    return -1;
-}
-
-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

@@ -1,54 +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 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

@@ -1,155 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const dump = @import("../dump.zig");
-const parser = @import("../netsurf.zig");
-
-const Env = @import("../env.zig").Env;
-const Page = @import("../page.zig").Page;
-const Node = @import("node.zig").Node;
-const Element = @import("element.zig").Element;
-const ElementUnion = @import("element.zig").Union;
-
-// WEB IDL https://dom.spec.whatwg.org/#interface-shadowroot
-pub const ShadowRoot = struct {
-    pub const prototype = *parser.DocumentFragment;
-    pub const subtype = .node;
-
-    mode: Mode,
-    host: *parser.Element,
-    proto: *parser.DocumentFragment,
-    adopted_style_sheets: ?Env.JsObject = null,
-
-    pub const Mode = enum {
-        open,
-        closed,
-    };
-
-    pub fn get_host(self: *const ShadowRoot) !ElementUnion {
-        return Element.toInterface(self.host);
-    }
-
-    pub fn get_adoptedStyleSheets(self: *ShadowRoot, page: *Page) !Env.JsObject {
-        if (self.adopted_style_sheets) |obj| {
-            return obj;
-        }
-
-        const obj = try page.main_context.newArray(0).persist();
-        self.adopted_style_sheets = obj;
-        return obj;
-    }
-
-    pub fn set_adoptedStyleSheets(self: *ShadowRoot, sheets: Env.JsObject) !void {
-        self.adopted_style_sheets = try sheets.persist();
-    }
-
-    pub fn get_innerHTML(self: *ShadowRoot, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.call_arena);
-        try dump.writeChildren(parser.documentFragmentToNode(self.proto), .{}, &aw.writer);
-        return aw.written();
-    }
-
-    pub fn set_innerHTML(self: *ShadowRoot, str_: ?[]const u8) !void {
-        const sr_doc = parser.documentFragmentToNode(self.proto);
-        const doc = try parser.nodeOwnerDocument(sr_doc) orelse return parser.DOMError.WrongDocument;
-        try Node.removeChildren(sr_doc);
-        const str = str_ orelse return;
-
-        const fragment = try parser.documentParseFragmentFromStr(doc, str);
-        const fragment_node = parser.documentFragmentToNode(fragment);
-
-        // Element.set_innerHTML also has some weirdness here. It isn't clear
-        // what should and shouldn't be set. Whatever string you pass to libdom,
-        // it always creates a full HTML document, with an html, head and body
-        // element.
-        // For ShadowRoot, it appears the only the children within the body should
-        // be set.
-        const html = try parser.nodeFirstChild(fragment_node) orelse return;
-        const head = try parser.nodeFirstChild(html) orelse return;
-        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(sr_doc, child);
-        }
-    }
-};
-
-const testing = @import("../../testing.zig");
-test "Browser.DOM.ShadowRoot" {
-    defer testing.reset();
-
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\ <div id=conflict>nope</div>
-    });
-    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'
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "sr2.getElementById('conflict')", "null" },
-        .{ "const n1 = document.createElement('div')", null },
-        .{ "n1.id = 'conflict'", null },
-        .{ "sr2.append(n1)", null },
-        .{ "sr2.getElementById('conflict') == n1", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const acss = sr2.adoptedStyleSheets", null },
-        .{ "acss.length", "0" },
-        .{ "acss.push(new CSSStyleSheet())", null },
-        .{ "sr2.adoptedStyleSheets.length", "1" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "sr1.innerHTML = '<p>hello</p>'", null },
-        .{ "sr1.innerHTML", "<p>hello</p>" },
-        .{ "sr1.querySelector('*')", "[object HTMLParagraphElement]" },
-
-        .{ "sr1.innerHTML = null", null },
-        .{ "sr1.innerHTML", "" },
-        .{ "sr1.querySelector('*')", "null" },
-    }, .{});
-}

src/browser/dom/tree_walker.zig

@@ -19,31 +19,23 @@
 const std = @import("std");
 const parser = @import("../netsurf.zig");
 
-const NodeFilter = @import("node_filter.zig");
+const NodeFilter = @import("node_filter.zig").NodeFilter;
 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,
-
-    // One of the few cases where null and undefined resolve to different default.
-    // We need the raw JsObject so that we can probe the tri state:
-    // null, undefined or i32.
-    pub const WhatToShow = Env.JsObject;
+    filter: ?Env.Function,
 
     pub const TreeWalkerOpts = union(enum) {
         function: Env.Function,
         object: struct { acceptNode: Env.Function },
     };
 
-    pub fn init(node: *parser.Node, what_to_show_: ?WhatToShow, filter: ?TreeWalkerOpts) !TreeWalker {
+    pub fn init(node: *parser.Node, what_to_show: ?u32, filter: ?TreeWalkerOpts) !TreeWalker {
         var filter_func: ?Env.Function = null;
 
         if (filter) |f| {
@@ -53,39 +45,61 @@ pub const TreeWalker = struct {
             };
         }
 
-        var what_to_show: u32 = undefined;
-        if (what_to_show_) |wts| {
-            switch (try wts.triState(TreeWalker, "what_to_show", u32)) {
-                .null => what_to_show = 0,
-                .undefined => what_to_show = NodeFilter.NodeFilter._SHOW_ALL,
-                .value => |v| what_to_show = v,
-            }
-        } else {
-            what_to_show = NodeFilter.NodeFilter._SHOW_ALL;
-        }
-
         return .{
             .root = node,
             .current_node = node,
-            .what_to_show = what_to_show,
-            .filter = filter,
-            .filter_func = filter_func,
+            .what_to_show = what_to_show orelse NodeFilter._SHOW_ALL,
+            .filter = filter_func,
         };
     }
 
-    pub fn get_root(self: *TreeWalker) !NodeUnion {
-        return try Node.toInterface(self.root);
+    const VerifyResult = enum { accept, skip, reject };
+
+    fn verify(self: *const TreeWalker, node: *parser.Node) !VerifyResult {
+        const node_type = try parser.nodeType(node);
+        const what_to_show = self.what_to_show;
+
+        // Verify that we can show this node type.
+        if (!switch (node_type) {
+            .attribute => what_to_show & NodeFilter._SHOW_ATTRIBUTE != 0,
+            .cdata_section => what_to_show & NodeFilter._SHOW_CDATA_SECTION != 0,
+            .comment => what_to_show & NodeFilter._SHOW_COMMENT != 0,
+            .document => what_to_show & NodeFilter._SHOW_DOCUMENT != 0,
+            .document_fragment => what_to_show & NodeFilter._SHOW_DOCUMENT_FRAGMENT != 0,
+            .document_type => what_to_show & NodeFilter._SHOW_DOCUMENT_TYPE != 0,
+            .element => what_to_show & NodeFilter._SHOW_ELEMENT != 0,
+            .entity => what_to_show & NodeFilter._SHOW_ENTITY != 0,
+            .entity_reference => what_to_show & NodeFilter._SHOW_ENTITY_REFERENCE != 0,
+            .notation => what_to_show & NodeFilter._SHOW_NOTATION != 0,
+            .processing_instruction => what_to_show & NodeFilter._SHOW_PROCESSING_INSTRUCTION != 0,
+            .text => what_to_show & NodeFilter._SHOW_TEXT != 0,
+        }) return .reject;
+
+        // Verify that we aren't filtering it out.
+        if (self.filter) |f| {
+            const filter = try f.call(u32, .{node});
+            return switch (filter) {
+                NodeFilter._FILTER_ACCEPT => .accept,
+                NodeFilter._FILTER_REJECT => .reject,
+                NodeFilter._FILTER_SKIP => .skip,
+                else => .reject,
+            };
+        } else return .accept;
     }
 
-    pub fn get_currentNode(self: *TreeWalker) !NodeUnion {
-        return try Node.toInterface(self.current_node);
+    pub fn get_root(self: *TreeWalker) *parser.Node {
+        return self.root;
+    }
+
+    pub fn get_currentNode(self: *TreeWalker) *parser.Node {
+        return self.current_node;
     }
 
     pub fn get_whatToShow(self: *TreeWalker) u32 {
         return self.what_to_show;
     }
 
-    pub fn get_filter(self: *TreeWalker) ?TreeWalkerOpts {
+    pub fn get_filter(self: *TreeWalker) ?Env.Function {
         return self.filter;
     }
 
@@ -101,7 +115,7 @@ pub const TreeWalker = struct {
             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)) {
+            switch (try self.verify(child)) {
                 .accept => return child,
                 .reject => continue,
                 .skip => if (try self.firstChild(child)) |gchild| return gchild,
@@ -120,7 +134,7 @@ pub const TreeWalker = struct {
             index -= 1;
             const child = (try parser.nodeListItem(children, index)) orelse return null;
 
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, child)) {
+            switch (try self.verify(child)) {
                 .accept => return child,
                 .reject => continue,
                 .skip => if (try self.lastChild(child)) |gchild| return gchild,
@@ -136,7 +150,7 @@ pub const TreeWalker = struct {
         while (true) {
             current = (try parser.nodeNextSibling(current)) orelse return null;
 
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                 .accept => return current,
                 .skip, .reject => continue,
             }
@@ -151,7 +165,7 @@ pub const TreeWalker = struct {
         while (true) {
             current = (try parser.nodePreviousSibling(current)) orelse return null;
 
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                 .accept => return current,
                 .skip, .reject => continue,
             }
@@ -168,42 +182,42 @@ pub const TreeWalker = struct {
             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)) {
+            switch (try self.verify(current)) {
                 .accept => return current,
                 .reject, .skip => continue,
             }
         }
     }
 
-    pub fn _firstChild(self: *TreeWalker) !?NodeUnion {
+    pub fn _firstChild(self: *TreeWalker) !?*parser.Node {
         if (try self.firstChild(self.current_node)) |child| {
             self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
         }
 
         return null;
     }
 
-    pub fn _lastChild(self: *TreeWalker) !?NodeUnion {
+    pub fn _lastChild(self: *TreeWalker) !?*parser.Node {
         if (try self.lastChild(self.current_node)) |child| {
             self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
         }
 
         return null;
     }
 
-    pub fn _nextNode(self: *TreeWalker) !?NodeUnion {
+    pub fn _nextNode(self: *TreeWalker) !?*parser.Node {
         if (try self.firstChild(self.current_node)) |child| {
             self.current_node = child;
-            return try Node.toInterface(child);
+            return child;
         }
 
         var current = self.current_node;
         while (current != self.root) {
             if (try self.nextSibling(current)) |sibling| {
                 self.current_node = sibling;
-                return try Node.toInterface(sibling);
+                return sibling;
             }
 
             current = (try parser.nodeParentNode(current)) orelse break;
@@ -212,49 +226,47 @@ pub const TreeWalker = struct {
         return null;
     }
 
-    pub fn _nextSibling(self: *TreeWalker) !?NodeUnion {
+    pub fn _nextSibling(self: *TreeWalker) !?*parser.Node {
         if (try self.nextSibling(self.current_node)) |sibling| {
             self.current_node = sibling;
-            return try Node.toInterface(sibling);
+            return sibling;
         }
 
         return null;
     }
 
-    pub fn _parentNode(self: *TreeWalker) !?NodeUnion {
+    pub fn _parentNode(self: *TreeWalker) !?*parser.Node {
         if (try self.parentNode(self.current_node)) |parent| {
             self.current_node = parent;
-            return try Node.toInterface(parent);
+            return parent;
         }
 
         return null;
     }
 
-    pub fn _previousNode(self: *TreeWalker) !?NodeUnion {
-        if (self.current_node == self.root) return null;
-
+    pub fn _previousNode(self: *TreeWalker) !?*parser.Node {
         var current = self.current_node;
         while (try parser.nodePreviousSibling(current)) |previous| {
             current = previous;
 
-            switch (try NodeFilter.verify(self.what_to_show, self.filter_func, current)) {
+            switch (try self.verify(current)) {
                 .accept => {
                     // Get last child if it has one.
                     if (try self.lastChild(current)) |child| {
                         self.current_node = child;
-                        return try Node.toInterface(child);
+                        return child;
                     }
 
                     // Otherwise, this node is our previous one.
                     self.current_node = current;
-                    return try Node.toInterface(current);
+                    return current;
                 },
                 .reject => continue,
                 .skip => {
                     // Get last child if it has one.
                     if (try self.lastChild(current)) |child| {
                         self.current_node = child;
-                        return try Node.toInterface(child);
+                        return child;
                     }
                 },
             }
@@ -263,17 +275,17 @@ pub const TreeWalker = struct {
         if (current != self.root) {
             if (try self.parentNode(current)) |parent| {
                 self.current_node = parent;
-                return try Node.toInterface(parent);
+                return parent;
             }
         }
 
         return null;
     }
 
-    pub fn _previousSibling(self: *TreeWalker) !?NodeUnion {
+    pub fn _previousSibling(self: *TreeWalker) !?*parser.Node {
         if (try self.previousSibling(self.current_node)) |sibling| {
             self.current_node = sibling;
-            return try Node.toInterface(sibling);
+            return sibling;
         }
 
         return null;

src/browser/dump.zig

@@ -19,25 +19,17 @@
 const std = @import("std");
 
 const parser = @import("netsurf.zig");
-const Page = @import("page.zig").Page;
 const Walker = @import("dom/walker.zig").WalkerChildren;
 
-pub const Opts = struct {
-    // set to include element shadowroots in the dump
-    page: ?*const Page = null,
-
-    exclude_scripts: bool = false,
-};
-
 // writer must be a std.io.Writer
-pub fn writeHTML(doc: *parser.Document, opts: Opts, writer: *std.Io.Writer) !void {
+pub fn writeHTML(doc: *parser.Document, writer: anytype) !void {
     try writer.writeAll("<!DOCTYPE html>\n");
-    try writeChildren(parser.documentToNode(doc), opts, writer);
+    try writeChildren(parser.documentToNode(doc), writer);
     try writer.writeAll("\n");
 }
 
 // Spec: https://www.w3.org/TR/xml/#sec-prolog-dtd
-pub fn writeDocType(doc_type: *parser.DocumentType, writer: *std.Io.Writer) !void {
+pub fn writeDocType(doc_type: *parser.DocumentType, writer: anytype) !void {
     try writer.writeAll("<!DOCTYPE ");
     try writer.writeAll(try parser.documentTypeGetName(doc_type));
 
@@ -62,15 +54,10 @@ pub fn writeDocType(doc_type: *parser.DocumentType, writer: *std.Io.Writer) !voi
     try writer.writeAll(">");
 }
 
-pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerror!void {
+pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
     switch (try parser.nodeType(node)) {
         .element => {
             // open the tag
-            const tag_type = try parser.nodeHTMLGetTagType(node) orelse .undef;
-            if (opts.exclude_scripts and try isScriptOrRelated(tag_type, node)) {
-                return;
-            }
-
             const tag = try parser.nodeLocalName(node);
             try writer.writeAll("<");
             try writer.writeAll(tag);
@@ -92,24 +79,12 @@ pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerro
 
             try writer.writeAll(">");
 
-            if (opts.page) |page| {
-                if (page.getNodeState(node)) |state| {
-                    if (state.shadow_root) |sr| {
-                        try writeChildren(@ptrCast(@alignCast(sr.proto)), opts, writer);
-                    }
-                }
-            }
-
             // void elements can't have any content.
             if (try isVoid(parser.nodeToElement(node))) return;
 
-            if (tag_type == .script) {
-                try writer.writeAll(try parser.nodeTextContent(node) orelse "");
-            } else {
-                // write the children
-                // TODO avoid recursion
-                try writeChildren(node, opts, writer);
-            }
+            // write the children
+            // TODO avoid recursion
+            try writeChildren(node, writer);
 
             // close the tag
             try writer.writeAll("</");
@@ -150,38 +125,19 @@ pub fn writeNode(node: *parser.Node, opts: Opts, writer: *std.Io.Writer) anyerro
 }
 
 // writer must be a std.io.Writer
-pub fn writeChildren(root: *parser.Node, opts: Opts, writer: *std.Io.Writer) !void {
+pub fn writeChildren(root: *parser.Node, writer: anytype) !void {
     const walker = Walker{};
     var next: ?*parser.Node = null;
     while (true) {
         next = try walker.get_next(root, next) orelse break;
-        try writeNode(next.?, opts, writer);
+        try writeNode(next.?, writer);
     }
 }
 
-// When `exclude_scripts` is passed to dump, we don't include <script> tags.
-// We also want to omit <link rel=preload as=ascript>
-fn isScriptOrRelated(tag_type: parser.Tag, node: *parser.Node) !bool {
-    if (tag_type == .script) {
-        return true;
-    }
-    if (tag_type == .link) {
-        const el = parser.nodeToElement(node);
-        const as = try parser.elementGetAttribute(el, "as") orelse return false;
-        if (!std.ascii.eqlIgnoreCase(as, "script")) {
-            return false;
-        }
-
-        const rel = try parser.elementGetAttribute(el, "rel") orelse return false;
-        return std.ascii.eqlIgnoreCase(rel, "preload");
-    }
-    return false;
-}
-
 // area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
 // https://html.spec.whatwg.org/#void-elements
 fn isVoid(elem: *parser.Element) !bool {
-    const tag = try parser.elementTag(elem);
+    const tag = try parser.elementHTMLGetTagType(@as(*parser.ElementHTML, @ptrCast(elem)));
     return switch (tag) {
         .area, .base, .br, .col, .embed, .hr, .img, .input, .link => true,
         .meta, .source, .track, .wbr => true,
@@ -226,7 +182,7 @@ fn writeEscapedAttributeValue(writer: anytype, value: []const u8) !void {
 
 const testing = std.testing;
 test "dump.writeHTML" {
-    try parser.init();
+    try parser.init(testing.allocator);
     defer parser.deinit();
 
     try testWriteHTML(
@@ -255,11 +211,6 @@ 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 {
@@ -271,13 +222,14 @@ fn testWriteHTML(comptime expected_body: []const u8, src: []const u8) !void {
 }
 
 fn testWriteFullHTML(comptime expected: []const u8, src: []const u8) !void {
-    var aw = std.Io.Writer.Allocating.init(testing.allocator);
-    defer aw.deinit();
+    var buf = std.ArrayListUnmanaged(u8){};
+    defer buf.deinit(testing.allocator);
 
-    const doc_html = try parser.documentHTMLParseFromStr(src);
+    const Elements = @import("html/elements.zig");
+    const doc_html = try parser.documentHTMLParseFromStr(src, &Elements.createElement);
     defer parser.documentHTMLClose(doc_html) catch {};
 
     const doc = parser.documentHTMLToDocument(doc_html);
-    try writeHTML(doc, .{}, &aw.writer);
-    try testing.expectEqualStrings(expected, aw.written());
+    try writeHTML(doc, buf.writer(testing.allocator));
+    try testing.expectEqualStrings(expected, buf.items);
 }

src/browser/encoding/TextDecoder.zig

@@ -1,84 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../../log.zig");
-
-const 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" {
-    try testing.htmlRunner("encoding/decoder.html");
-}

src/browser/encoding/TextEncoder.zig

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

src/browser/encoding/encoding.zig

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

src/browser/encoding/text_encoder.zig

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

src/browser/env.zig

@@ -22,11 +22,9 @@ const WebApis = struct {
     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("cssom/css_style_declaration.zig").Interfaces,
         @import("dom/dom.zig").Interfaces,
-        @import("dom/shadow_root.zig").ShadowRoot,
-        @import("encoding/encoding.zig").Interfaces,
+        @import("encoding/text_encoder.zig").Interfaces,
         @import("events/event.zig").Interfaces,
         @import("html/html.zig").Interfaces,
         @import("iterator/iterator.zig").Interfaces,
@@ -34,7 +32,6 @@ const WebApis = struct {
         @import("url/url.zig").Interfaces,
         @import("xhr/xhr.zig").Interfaces,
         @import("xhr/form_data.zig").Interfaces,
-        @import("xhr/File.zig"),
         @import("xmlserializer/xmlserializer.zig").Interfaces,
     });
 };
@@ -42,8 +39,5 @@ const WebApis = struct {
 pub const JsThis = Env.JsThis;
 pub const JsObject = Env.JsObject;
 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;

src/browser/events/custom_event.zig

@@ -19,7 +19,6 @@
 const parser = @import("../netsurf.zig");
 const Event = @import("event.zig").Event;
 const JsObject = @import("../env.zig").JsObject;
-const netsurf = @import("../netsurf.zig");
 
 // https://dom.spec.whatwg.org/#interface-customevent
 pub const CustomEvent = struct {
@@ -56,30 +55,26 @@ pub const CustomEvent = struct {
     pub fn get_detail(self: *CustomEvent) ?JsObject {
         return self.detail;
     }
-
-    // Initializes an already created `CustomEvent`.
-    // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent
-    pub fn _initCustomEvent(
-        self: *CustomEvent,
-        event_type: []const u8,
-        can_bubble: bool,
-        cancelable: bool,
-        maybe_detail: ?JsObject,
-    ) !void {
-        // This function can only be called after the constructor has called.
-        // So we assume proto is initialized already by constructor.
-        self.proto.type = try netsurf.strFromData(event_type);
-        self.proto.bubble = can_bubble;
-        self.proto.cancelable = cancelable;
-        self.proto.is_initialised = true;
-        // Detail is stored separately.
-        if (maybe_detail) |detail| {
-            self.detail = try detail.persist();
-        }
-    }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: Events.Custom" {
-    try testing.htmlRunner("events/custom.html");
+test "Browser.CustomEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let capture = null", "undefined" },
+        .{ "const el = document.createElement('div');", "undefined" },
+        .{ "el.addEventListener('c1', (e) => { capture = 'c1-' + new String(e.detail)})", "undefined" },
+        .{ "el.addEventListener('c2', (e) => { capture = 'c2-' + new String(e.detail.over)})", "undefined" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1'));", "true" },
+        .{ "capture", "c1-null" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c1', {detail: '123'}));", "true" },
+        .{ "capture", "c1-123" },
+
+        .{ "el.dispatchEvent(new CustomEvent('c2', {detail: {over: 9000}}));", "true" },
+        .{ "capture", "c2-9000" },
+    }, .{});
 }

src/browser/events/event.zig

@@ -24,20 +24,21 @@ const parser = @import("../netsurf.zig");
 const generate = @import("../../runtime/generate.zig");
 
 const Page = @import("../page.zig").Page;
-const Node = @import("../dom/node.zig").Node;
 const DOMException = @import("../dom/exceptions.zig").DOMException;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventTargetUnion = @import("../dom/event_target.zig").Union;
-const AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
 const MouseEvent = @import("mouse_event.zig").MouseEvent;
-const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
-const MessageEvent = @import("../dom/MessageChannel.zig").MessageEvent;
 
 // Event interfaces
-pub const Interfaces = .{ Event, CustomEvent, ProgressEvent, MouseEvent, ErrorEvent, MessageEvent };
+pub const Interfaces = .{
+    Event,
+    CustomEvent,
+    ProgressEvent,
+    MouseEvent,
+};
 
 pub const Union = generate.Union(Interfaces);
 
@@ -57,12 +58,10 @@ pub const Event = struct {
 
     pub fn toInterface(evt: *parser.Event) !Union {
         return switch (try parser.eventGetInternalType(evt)) {
-            .event, .abort_signal, .xhr_event => .{ .Event = evt },
+            .event => .{ .Event = evt },
             .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
             .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
             .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
-            .error_event => .{ .ErrorEvent = @as(*ErrorEvent, @ptrCast(evt)).* },
-            .message_event => .{ .MessageEvent = @as(*MessageEvent, @ptrCast(evt)).* },
         };
     }
 
@@ -110,11 +109,8 @@ pub const Event = struct {
         return try parser.eventIsTrusted(self);
     }
 
-    // Even though this is supposed to to provide microsecond resolution, browser
-    // return coarser values to protect against fingerprinting. libdom returns
-    // seconds, which is good enough.
-    pub fn get_timeStamp(self: *parser.Event) !u32 {
-        return parser.eventTimestamp(self);
+    pub fn get_timestamp(self: *parser.Event) !u32 {
+        return try parser.eventTimestamp(self);
     }
 
     // Methods
@@ -143,64 +139,6 @@ pub const Event = struct {
     pub fn _preventDefault(self: *parser.Event) !void {
         return try parser.eventPreventDefault(self);
     }
-
-    pub fn _composedPath(self: *parser.Event, page: *Page) ![]const EventTargetUnion {
-        const et_ = try parser.eventTarget(self);
-        const et = et_ orelse return &.{};
-
-        var node: ?*parser.Node = switch (try parser.eventTargetInternalType(et)) {
-            .libdom_node => @as(*parser.Node, @ptrCast(et)),
-            .plain => parser.eventTargetToNode(et),
-            else => {
-                // Window, XHR, MessagePort, etc...no path beyond the event itself
-                return &.{try EventTarget.toInterface(et, page)};
-            },
-        };
-
-        const arena = page.call_arena;
-        var path: std.ArrayListUnmanaged(EventTargetUnion) = .empty;
-        while (node) |n| {
-            try path.append(arena, .{
-                .node = try Node.toInterface(n),
-            });
-
-            node = try parser.nodeParentNode(n);
-            if (node == null and try parser.nodeType(n) == .document_fragment) {
-                // we have a non-continuous hook from a shadowroot to its host (
-                // it's parent element). libdom doesn't really support ShdowRoots
-                // and, for the most part, that works out well since it naturally
-                // provides isolation. But events don't follow the same
-                // shadowroot isolation as most other things, so, if this is
-                // a parent-less document fragment, we need to check if it has
-                // a host.
-                if (parser.documentFragmentGetHost(@ptrCast(n))) |host| {
-                    node = host;
-
-                    // If a document fragment has a host, then that host
-                    // _has_ to have a state and that state _has_ to have
-                    // a shadow_root field. All of this is set in Element._attachShadow
-                    if (page.getNodeState(host).?.shadow_root.?.mode == .closed) {
-                        // if the shadow root is closed, then the composedPath
-                        // starts at the host element.
-                        path.clearRetainingCapacity();
-                    }
-                } else {
-                    // Our document fragement has no parent and no host, we
-                    // can break out of the loop.
-                    break;
-                }
-            }
-        }
-
-        if (path.getLastOrNull()) |last| {
-            // the Window isn't part of the DOM hierarchy, but for events, it
-            // is, so we need to glue it on.
-            if (last.node == .HTMLDocument and last.node.HTMLDocument == page.window.document) {
-                try path.append(arena, .{ .node = .{ .Window = &page.window } });
-            }
-        }
-        return path.items;
-    }
 };
 
 pub const EventHandler = struct {
@@ -240,7 +178,7 @@ pub const EventHandler = struct {
             // that the listener won't call preventDefault() and thus can safely
             // run the default as needed).
             passive: ?bool,
-            signal: ?*AbortSignal, // currently does nothing
+            signal: ?bool, // currently does nothing
         };
     };
 
@@ -253,42 +191,25 @@ pub const EventHandler = struct {
     ) !?*EventHandler {
         var once = false;
         var capture = false;
-        var signal: ?*AbortSignal = null;
-
         if (opts_) |opts| {
             switch (opts) {
                 .capture => |c| capture = c,
                 .flags => |f| {
+                    // Done this way so that, for common cases that _only_ set
+                    // capture, i.e. {captrue: true}, it works.
+                    // But for any case that sets any of the other flags, we
+                    // error. If we don't error, this function call would succeed
+                    // but the behavior might be wrong. At this point, it's
+                    // better to be explicit and error.
+                    if (f.signal orelse false) return error.NotImplemented;
                     once = f.once orelse false;
-                    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;
@@ -344,51 +265,110 @@ pub const EventHandler = struct {
     }
 };
 
-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,
-        );
-    }
-};
-
 const testing = @import("../../testing.zig");
-test "Browser: Event" {
-    try testing.htmlRunner("events/event.html");
+test "Browser.Event" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let content = document.getElementById('content')", "undefined" },
+        .{ "let para = document.getElementById('para')", "undefined" },
+        .{ "var nb = 0; var evt", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ content.addEventListener('target', function(e) {
+            \\  evt = e; nb = nb + 1;
+            \\  e.preventDefault();
+            \\ })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('target', {bubbles: true, cancelable: true}))", "false" },
+        .{ "nb", "1" },
+        .{ "evt.target === content", "true" },
+        .{ "evt.bubbles", "true" },
+        .{ "evt.cancelable", "true" },
+        .{ "evt.defaultPrevented", "true" },
+        .{ "evt.isTrusted", "true" },
+        .{ "evt.timestamp > 1704063600", "true" }, // 2024/01/01 00:00
+        // event.type, event.currentTarget, event.phase checked in EventTarget
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\ content.addEventListener('stop',function(e) {
+            \\    e.stopPropagation();
+            \\    nb = nb + 1;
+            \\  }, true)
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  para.addEventListener('stop',function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "para.dispatchEvent(new Event('stop'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    e.stopImmediatePropagation();
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        // the following event listener will not be invoked
+        .{
+            \\  content.addEventListener('immediate', function(e) {
+            \\    nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "content.dispatchEvent(new Event('immediate'))", "true" },
+        .{ "nb", "1" }, // will be 2 if event was not stopped at first content event listener
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0", "0" },
+        .{
+            \\  content.addEventListener('legacy', function(e) {
+            \\     evt = e; nb = nb + 1;
+            \\  })
+            ,
+            "undefined",
+        },
+        .{ "let evtLegacy = document.createEvent('Event')", "undefined" },
+        .{ "evtLegacy.initEvent('legacy')", "undefined" },
+        .{ "content.dispatchEvent(evtLegacy)", "true" },
+        .{ "nb", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var nb = 0; var evt = null; function cbk(event) { nb ++; evt=event; }", "undefined" },
+        .{ "document.addEventListener('count', cbk)", "undefined" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "0" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "document.addEventListener('count', cbk, {once: true})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "1" },
+    }, .{});
 }

src/browser/events/mouse_event.zig

@@ -17,7 +17,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const log = @import("../../log.zig");
+const log = std.log.scoped(.mouse_event);
 
 const parser = @import("../netsurf.zig");
 const Event = @import("event.zig").Event;
@@ -68,6 +68,10 @@ pub const MouseEvent = struct {
             .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;
     }
 
@@ -103,6 +107,34 @@ pub const MouseEvent = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: Events.Mouse" {
-    try testing.htmlRunner("events/mouse.html");
+test "Browser.MouseEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        // Default MouseEvent
+        .{ "let event = new MouseEvent('click')", "undefined" },
+        .{ "event.type", "click" },
+        .{ "event instanceof MouseEvent", "true" },
+        .{ "event instanceof Event", "true" },
+        .{ "event.clientX", "0" },
+        .{ "event.clientY", "0" },
+        .{ "event.screenX", "0" },
+        .{ "event.screenY", "0" },
+        // MouseEvent with parameters
+        .{ "let new_event = new MouseEvent('click', { 'button': 0, 'clientX': 10, 'clientY': 20 })", "undefined" },
+        .{ "new_event.button", "0" },
+        .{ "new_event.x", "10" },
+        .{ "new_event.y", "20" },
+        .{ "new_event.screenX", "10" },
+        .{ "new_event.screenY", "20" },
+        // MouseEvent Listener
+        .{ "let me = new MouseEvent('click')", "undefined" },
+        .{ "me instanceof Event", "true" },
+        .{ "var eevt = null; function ccbk(event) { eevt = event; }", "undefined" },
+        .{ "document.addEventListener('click', ccbk)", "undefined" },
+        .{ "document.dispatchEvent(me)", "true" },
+        .{ "eevt.type", "click" },
+        .{ "eevt instanceof MouseEvent", "true" },
+    }, .{});
 }

src/browser/html/AbortController.zig

@@ -1,181 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const log = @import("../../log.zig");
-const parser = @import("../netsurf.zig");
-const Env = @import("../env.zig").Env;
-const Page = @import("../page.zig").Page;
-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,
-        };
-
-        try page.scheduler.add(callback, TimeoutCallback.run, delay, .{ .name = "abort_signal" });
-        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,
-
-    fn run(ctx: *anyopaque) ?u32 {
-        const self: *TimeoutCallback = @ptrCast(@alignCast(ctx));
-        self.signal.abort("TimeoutError") catch |err| {
-            log.warn(.app, "abort signal timeout", .{ .err = err });
-        };
-        return null;
-    }
-};
-
-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

@@ -1,97 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-const std = @import("std");
-const 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

@@ -42,12 +42,8 @@ pub const HTMLDocument = struct {
     // JS funcs
     // --------
 
-    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 get_domain(self: *parser.DocumentHTML) ![]const u8 {
+        return try parser.documentHTMLGetDomain(self);
     }
 
     pub fn set_domain(_: *parser.DocumentHTML, _: []const u8) ![]const u8 {
@@ -85,10 +81,7 @@ pub const HTMLDocument = struct {
 
     pub fn get_cookie(_: *parser.DocumentHTML, page: *Page) ![]const u8 {
         var buf: std.ArrayListUnmanaged(u8) = .{};
-        try page.cookie_jar.forRequest(&page.url.uri, buf.writer(page.arena), .{
-            .is_http = false,
-            .is_navigation = true,
-        });
+        try page.cookie_jar.forRequest(&page.url.uri, buf.writer(page.arena), .{ .navigation = true });
         return buf.items;
     }
 
@@ -97,10 +90,6 @@ pub const HTMLDocument = struct {
         // outlives the page's arena.
         const c = try Cookie.parse(page.cookie_jar.allocator, &page.url.uri, cookie_str);
         errdefer c.deinit();
-        if (c.http_only) {
-            c.deinit();
-            return ""; // HttpOnly cookies cannot be set from JS
-        }
         try page.cookie_jar.add(c, std.time.timestamp());
         return cookie_str;
     }
@@ -121,9 +110,7 @@ pub const HTMLDocument = struct {
         if (name.len == 0) return list;
 
         const root = parser.documentHTMLToNode(self);
-        var c = try collection.HTMLCollectionByName(arena, root, name, .{
-            .include_root = false,
-        });
+        var c = try collection.HTMLCollectionByName(arena, root, name, false);
 
         const ln = try c.get_length();
         var i: u32 = 0;
@@ -137,15 +124,11 @@ pub const HTMLDocument = struct {
     }
 
     pub fn get_images(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "img", .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "img", false);
     }
 
     pub fn get_embeds(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "embed", .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "embed", false);
     }
 
     pub fn get_plugins(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
@@ -153,15 +136,11 @@ pub const HTMLDocument = struct {
     }
 
     pub fn get_forms(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "form", .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "form", false);
     }
 
     pub fn get_scripts(self: *parser.DocumentHTML, page: *Page) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "script", .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByTagName(page.arena, parser.documentHTMLToNode(self), "script", false);
     }
 
     pub fn get_applets(_: *parser.DocumentHTML) !collection.HTMLCollection {
@@ -169,15 +148,11 @@ pub const HTMLDocument = struct {
     }
 
     pub fn get_links(self: *parser.DocumentHTML) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByLinks(parser.documentHTMLToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByLinks(parser.documentHTMLToNode(self), false);
     }
 
     pub fn get_anchors(self: *parser.DocumentHTML) !collection.HTMLCollection {
-        return try collection.HTMLCollectionByAnchors(parser.documentHTMLToNode(self), .{
-            .include_root = false,
-        });
+        return try collection.HTMLCollectionByAnchors(parser.documentHTMLToNode(self), false);
     }
 
     pub fn get_all(self: *parser.DocumentHTML) collection.HTMLAllCollection {
@@ -209,7 +184,7 @@ pub const HTMLDocument = struct {
     }
 
     pub fn get_readyState(self: *parser.DocumentHTML, page: *Page) ![]const u8 {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         return @tagName(state.ready_state);
     }
 
@@ -254,23 +229,19 @@ pub const HTMLDocument = struct {
     // 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;
+    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) !?ElementUnion {
+        const ix: i32 = @intFromFloat(@floor(x));
+        const iy: i32 = @intFromFloat(@floor(y));
+        const element = page.renderer.getElementAtPosition(ix, iy) orelse return null;
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
         return try Element.toInterface(element);
     }
 
     // Returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.
-    // 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 &.{};
+    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: f32, y: f32, page: *Page) ![]ElementUnion {
+        const ix: i32 = @intFromFloat(@floor(x));
+        const iy: i32 = @intFromFloat(@floor(y));
+        const element = page.renderer.getElementAtPosition(ix, iy) orelse return &.{};
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
 
         var list: std.ArrayListUnmanaged(ElementUnion) = .empty;
@@ -292,24 +263,22 @@ pub const HTMLDocument = struct {
     }
 
     pub fn documentIsLoaded(self: *parser.DocumentHTML, page: *Page) !void {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         state.ready_state = .interactive;
 
+        const evt = try parser.eventCreate();
+        defer parser.eventDestroy(evt);
+
         log.debug(.script_event, "dispatch event", .{
             .type = "DOMContentLoaded",
             .source = "document",
         });
-
-        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(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         state.ready_state = .complete;
     }
 };
@@ -330,7 +299,7 @@ test "Browser.HTML.Document" {
     }, .{});
 
     try runner.testCases(&.{
-        .{ "document.domain", "lightpanda.io" },
+        .{ "document.domain", "" },
         .{ "document.referrer", "" },
         .{ "document.title", "" },
         .{ "document.body.localName", "body" },
@@ -364,8 +333,6 @@ 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(&.{

src/browser/html/elements.zig

@@ -16,7 +16,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 std = @import("std");
-const log = @import("../../log.zig");
 
 const parser = @import("../netsurf.zig");
 const generate = @import("../../runtime/generate.zig");
@@ -26,16 +25,13 @@ 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 NodeUnion = @import("../dom/node.zig").Union;
 const Element = @import("../dom/element.zig").Element;
-const DataSet = @import("DataSet.zig");
+const State = @import("../State.zig");
 
-const StyleSheet = @import("../cssom/StyleSheet.zig");
-const CSSStyleDeclaration = @import("../cssom/CSSStyleDeclaration.zig");
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // HTMLElement interfaces
 pub const Interfaces = .{
-    Element,
     HTMLElement,
     HTMLUnknownElement,
     HTMLAnchorElement,
@@ -62,6 +58,7 @@ pub const Interfaces = .{
     HTMLHeadElement,
     HTMLHeadingElement,
     HTMLHtmlElement,
+    HTMLIFrameElement,
     HTMLImageElement,
     HTMLImageElement.Factory,
     HTMLInputElement,
@@ -76,6 +73,7 @@ pub const Interfaces = .{
     HTMLOListElement,
     HTMLObjectElement,
     HTMLOptGroupElement,
+    HTMLOptionElement,
     HTMLOutputElement,
     HTMLParagraphElement,
     HTMLParamElement,
@@ -86,7 +84,6 @@ pub const Interfaces = .{
     HTMLScriptElement,
     HTMLSourceElement,
     HTMLSpanElement,
-    HTMLSlotElement,
     HTMLStyleElement,
     HTMLTableElement,
     HTMLTableCaptionElement,
@@ -103,8 +100,7 @@ pub const Interfaces = .{
     HTMLVideoElement,
 
     @import("form.zig").HTMLFormElement,
-    @import("iframe.zig").HTMLIFrameElement,
-    @import("select.zig").Interfaces,
+    @import("select.zig").HTMLSelectElement,
 };
 
 pub const Union = generate.Union(Interfaces);
@@ -122,15 +118,6 @@ pub const HTMLElement = struct {
         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 {
         const n = @as(*parser.Node, @ptrCast(e));
         return try parser.nodeTextContent(n) orelse "";
@@ -147,7 +134,7 @@ pub const HTMLElement = struct {
         try Node.removeChildren(n);
 
         // attach the text node.
-        _ = try parser.nodeAppendChild(n, @as(*parser.Node, @ptrCast(@alignCast(t))));
+        _ = try parser.nodeAppendChild(n, @as(*parser.Node, @alignCast(@ptrCast(t))));
     }
 
     pub fn _click(e: *parser.ElementHTML) !void {
@@ -258,18 +245,8 @@ pub const HTMLAnchorElement = struct {
         return try parser.nodeSetTextContent(parser.anchorToNode(self), v);
     }
 
-    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(@ptrCast(@alignCast(self)), "href")) |href| {
-            return URL.constructor(.{ .string = href }, null, page); // TODO inject base url
-        }
-        return .empty;
+    inline fn url(self: *parser.Anchor, page: *Page) !URL {
+        return URL.constructor(.{ .element = @alignCast(@ptrCast(self)) }, null, page); // TODO inject base url
     }
 
     // TODO return a disposable string
@@ -586,6 +563,12 @@ pub const HTMLHtmlElement = struct {
     pub const subtype = .node;
 };
 
+pub const HTMLIFrameElement = struct {
+    pub const Self = parser.IFrame;
+    pub const prototype = *HTMLElement;
+    pub const subtype = .node;
+};
+
 pub const HTMLImageElement = struct {
     pub const Self = parser.Image;
     pub const prototype = *HTMLElement;
@@ -631,7 +614,6 @@ pub const HTMLImageElement = struct {
     pub const Factory = struct {
         pub const js_name = "Image";
         pub const subtype = .node;
-
         pub const js_legacy_factory = true;
         pub const prototype = *HTMLImageElement;
 
@@ -645,11 +627,85 @@ pub const HTMLImageElement = struct {
     };
 };
 
+pub fn createElement(params: [*c]parser.c.dom_html_element_create_params, elem: [*c][*c]parser.ElementHTML) callconv(.c) parser.c.dom_exception {
+    const p: *parser.c.dom_html_element_create_params = @ptrCast(params);
+    switch (p.type) {
+        parser.c.DOM_HTML_ELEMENT_TYPE_INPUT => {
+            return HTMLInputElement.dom_create(params, elem);
+        },
+        else => return parser.c.DOM_NO_ERR,
+    }
+}
+
+var input_protected_vtable: parser.c.dom_element_protected_vtable = .{
+    .base = .{
+        .destroy = HTMLInputElement.node_destroy,
+        .copy = HTMLInputElement.node_copy,
+    },
+    .dom_element_parse_attribute = HTMLInputElement.element_parse_attribute,
+};
+
 pub const HTMLInputElement = struct {
     pub const Self = parser.Input;
     pub const prototype = *HTMLElement;
     pub const subtype = .node;
 
+    base: parser.ElementHTML,
+
+    type: []const u8 = "text",
+
+    pub fn dom_create(params: *parser.c.dom_html_element_create_params, output: *?*parser.ElementHTML) parser.c.dom_exception {
+        var self = parser.ARENA.?.create(HTMLInputElement) catch return parser.c.DOM_NO_MEM_ERR;
+        output.* = &self.base; // Self can be recovered using @fieldParentPtr
+
+        self.base.base.base.base.vtable = &parser.c._dom_html_element_vtable; // TODO replace get/setAttribute
+        self.base.base.base.vtable = &input_protected_vtable;
+
+        return self.dom_initialise(params);
+    }
+    // Initialise is separated from create such that the leaf type sets the vtable, then calls all the way up the protochain to init
+    pub fn dom_initialise(self: *HTMLInputElement, params: *parser.c.dom_html_element_create_params) parser.c.dom_exception {
+        return parser.c._dom_html_element_initialise(params, &self.base);
+    }
+
+    // This should always be the same and we should not have cleanup for new zig implementation, hopefully
+    pub fn node_destroy(node: [*c]parser.Node) callconv(.c) void {
+        const elem = parser.nodeToHtmlElement(node);
+        parser.c._dom_html_element_finalise(elem);
+    }
+
+    pub fn node_copy(old: [*c]parser.Node, new: [*c][*c]parser.Node) callconv(.c) parser.c.dom_exception {
+        const old_elem = parser.nodeToHtmlElement(old);
+        const self = @as(*HTMLInputElement, @fieldParentPtr("base", old_elem));
+
+        var copy = parser.ARENA.?.create(HTMLInputElement) catch return parser.c.DOM_NO_MEM_ERR;
+        copy.type = self.type;
+
+        const err = parser.c._dom_html_element_copy_internal(old_elem, &copy.base);
+        if (err != parser.c.DOM_NO_ERR) {
+            return err;
+        }
+
+        new.* = @ptrCast(copy);
+        return parser.c.DOM_NO_ERR;
+    }
+
+    // fn ([*c]cimport.struct_dom_element, [*c]cimport.struct_dom_string, [*c]cimport.struct_dom_string, [*c][*c]cimport.struct_dom_string) callconv(.c) c_uint
+    pub fn element_parse_attribute(self: [*c]parser.Element, name: [*c]parser.c.dom_string, value: [*c]parser.c.dom_string, parsed: [*c][*c]parser.c.dom_string) callconv(.c) parser.c.dom_exception {
+        _ = name;
+        _ = self;
+        parsed.* = value;
+        _ = parser.c.dom_string_ref(value);
+
+        // TODO actual implementation
+        // Probably should not use this and instead override the getAttribute setAttribute Element methods directly, perhaps other related functions.
+
+        // handle defaultValue likes
+        // Call setter or store in general attribute store
+        // increment domstring ref?
+        return parser.c.DOM_NO_ERR;
+    }
+
     pub fn get_defaultValue(self: *parser.Input) ![]const u8 {
         return try parser.inputGetDefaultValue(self);
     }
@@ -721,10 +777,26 @@ pub const HTMLInputElement = struct {
         try parser.inputSetSrc(self, new_src);
     }
     pub fn get_type(self: *parser.Input) ![]const u8 {
-        return try parser.inputGetType(self);
+        const elem = parser.nodeToHtmlElement(@alignCast(@ptrCast(self)));
+        const input = @as(*HTMLInputElement, @fieldParentPtr("base", elem));
+
+        return input.type;
     }
     pub fn set_type(self: *parser.Input, type_: []const u8) !void {
-        try parser.inputSetType(self, type_);
+        const elem = parser.nodeToHtmlElement(@alignCast(@ptrCast(self)));
+        const input = @as(*HTMLInputElement, @fieldParentPtr("base", elem));
+
+        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;
+            }
+        }
+        input.type = if (found) type_ else "text";
+
+        // TODO DOM events
     }
     pub fn get_value(self: *parser.Input) ![]const u8 {
         return try parser.inputGetValue(self);
@@ -756,15 +828,6 @@ 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 {
@@ -809,6 +872,12 @@ pub const HTMLOptGroupElement = struct {
     pub const subtype = .node;
 };
 
+pub const HTMLOptionElement = struct {
+    pub const Self = parser.Option;
+    pub const prototype = *HTMLElement;
+    pub const subtype = .node;
+};
+
 pub const HTMLOutputElement = struct {
     pub const Self = parser.Output;
     pub const prototype = *HTMLElement;
@@ -864,23 +933,12 @@ pub const HTMLScriptElement = struct {
         ) orelse "";
     }
 
-    pub fn set_src(self: *parser.Script, v: []const u8, page: *Page) !void {
-        try parser.elementSetAttribute(
+    pub fn set_src(self: *parser.Script, v: []const u8) !void {
+        return try parser.elementSetAttribute(
             parser.scriptToElt(self),
             "src",
             v,
         );
-
-        if (try Node.get_isConnected(@ptrCast(@alignCast(self)))) {
-            // There are sites which do set the src AFTER appending the script
-            // tag to the document:
-            //    const s = document.createElement('script');
-            //    document.getElementsByTagName('body')[0].appendChild(s);
-            //    s.src = '...';
-            // This should load the script.
-            // addFromElement protects against double execution.
-            try page.script_manager.addFromElement(@ptrCast(@alignCast(self)));
-        }
     }
 
     pub fn get_type(self: *parser.Script) !?[]const u8 {
@@ -891,7 +949,7 @@ pub const HTMLScriptElement = struct {
     }
 
     pub fn set_type(self: *parser.Script, v: []const u8) !void {
-        try parser.elementSetAttribute(
+        return try parser.elementSetAttribute(
             parser.scriptToElt(self),
             "type",
             v,
@@ -906,7 +964,7 @@ pub const HTMLScriptElement = struct {
     }
 
     pub fn set_text(self: *parser.Script, v: []const u8) !void {
-        try parser.elementSetAttribute(
+        return try parser.elementSetAttribute(
             parser.scriptToElt(self),
             "text",
             v,
@@ -921,7 +979,7 @@ pub const HTMLScriptElement = struct {
     }
 
     pub fn set_integrity(self: *parser.Script, v: []const u8) !void {
-        try parser.elementSetAttribute(
+        return try parser.elementSetAttribute(
             parser.scriptToElt(self),
             "integrity",
             v,
@@ -978,22 +1036,22 @@ pub const HTMLScriptElement = struct {
     }
 
     pub fn get_onload(self: *parser.Script, page: *Page) !?Env.Function {
-        const state = page.getNodeState(@ptrCast(@alignCast(self))) orelse return null;
+        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(@ptrCast(@alignCast(self)));
+        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(@ptrCast(@alignCast(self))) orelse return null;
+        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(@ptrCast(@alignCast(self)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
         state.onerror = function;
     }
 };
@@ -1010,117 +1068,10 @@ pub const HTMLSpanElement = struct {
     pub const subtype = .node;
 };
 
-pub const HTMLSlotElement = struct {
-    pub const Self = parser.Slot;
-    pub const prototype = *HTMLElement;
-    pub const subtype = .node;
-
-    pub fn get_name(self: *parser.Slot) !?[]const u8 {
-        return (try parser.elementGetAttribute(@ptrCast(@alignCast(self)), "name")) orelse "";
-    }
-
-    pub fn set_name(self: *parser.Slot, value: []const u8) !void {
-        return parser.elementSetAttribute(@ptrCast(@alignCast(self)), "name", value);
-    }
-
-    const AssignedNodesOpts = struct {
-        flatten: bool = false,
-    };
-    pub fn _assignedNodes(self: *parser.Slot, opts_: ?AssignedNodesOpts, page: *Page) ![]NodeUnion {
-        const opts = opts_ orelse AssignedNodesOpts{ .flatten = false };
-
-        if (try findAssignedSlotNodes(self, opts, page)) |nodes| {
-            return nodes;
-        }
-
-        if (!opts.flatten) {
-            return &.{};
-        }
-
-        const node: *parser.Node = @ptrCast(@alignCast(self));
-        const nl = try parser.nodeGetChildNodes(node);
-        const len = try parser.nodeListLength(nl);
-        if (len == 0) {
-            return &.{};
-        }
-
-        var assigned = try page.call_arena.alloc(NodeUnion, len);
-        var i: usize = 0;
-        while (true) : (i += 1) {
-            const child = try parser.nodeListItem(nl, @intCast(i)) orelse break;
-            assigned[i] = try Node.toInterface(child);
-        }
-        return assigned[0..i];
-    }
-
-    fn findAssignedSlotNodes(self: *parser.Slot, opts: AssignedNodesOpts, page: *Page) !?[]NodeUnion {
-        if (opts.flatten) {
-            log.warn(.web_api, "not implemented", .{ .feature = "HTMLSlotElement flatten assignedNodes" });
-        }
-
-        const slot_name = try parser.elementGetAttribute(@ptrCast(@alignCast(self)), "name");
-        const node: *parser.Node = @ptrCast(@alignCast(self));
-        var root = try parser.nodeGetRootNode(node);
-        if (page.getNodeState(root)) |state| {
-            if (state.shadow_root) |sr| {
-                root = @ptrCast(@alignCast(sr.host));
-            }
-        }
-
-        var arr: std.ArrayList(NodeUnion) = .empty;
-        const w = @import("../dom/walker.zig").WalkerChildren{};
-        var next: ?*parser.Node = null;
-        while (true) {
-            next = try w.get_next(root, next) orelse break;
-            if (try parser.nodeType(next.?) != .element) {
-                if (slot_name == null) {
-                    // default slot (with no name), takes everything
-                    try arr.append(page.call_arena, try Node.toInterface(next.?));
-                }
-                continue;
-            }
-            const el: *parser.Element = @ptrCast(@alignCast(next.?));
-            const element_slot = try parser.elementGetAttribute(el, "slot");
-
-            if (nullableStringsAreEqual(slot_name, element_slot)) {
-                // either they're the same string or they are both null
-                try arr.append(page.call_arena, try Node.toInterface(next.?));
-                continue;
-            }
-        }
-        return if (arr.items.len == 0) null else arr.items;
-    }
-
-    fn nullableStringsAreEqual(a: ?[]const u8, b: ?[]const u8) bool {
-        if (a == null and b == null) {
-            return true;
-        }
-        if (a) |aa| {
-            const bb = b orelse return false;
-            return std.mem.eql(u8, aa, bb);
-        }
-
-        // a is null, but b isn't (else the first guard clause would have hit)
-        return false;
-    }
-};
-
 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(@ptrCast(@alignCast(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 {
@@ -1163,16 +1114,6 @@ 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(@ptrCast(@alignCast(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 {
@@ -1211,76 +1152,77 @@ pub const HTMLVideoElement = struct {
     pub const subtype = .node;
 };
 
-pub fn toInterfaceFromTag(comptime T: type, e: *parser.Element, tag: parser.Tag) !T {
+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(e)) },
-        .a => .{ .HTMLAnchorElement = @as(*parser.Anchor, @ptrCast(e)) },
-        .applet => .{ .HTMLAppletElement = @as(*parser.Applet, @ptrCast(e)) },
-        .area => .{ .HTMLAreaElement = @as(*parser.Area, @ptrCast(e)) },
-        .audio => .{ .HTMLAudioElement = @as(*parser.Audio, @ptrCast(e)) },
-        .base => .{ .HTMLBaseElement = @as(*parser.Base, @ptrCast(e)) },
-        .body => .{ .HTMLBodyElement = @as(*parser.Body, @ptrCast(e)) },
-        .br => .{ .HTMLBRElement = @as(*parser.BR, @ptrCast(e)) },
-        .button => .{ .HTMLButtonElement = @as(*parser.Button, @ptrCast(e)) },
-        .canvas => .{ .HTMLCanvasElement = @as(*parser.Canvas, @ptrCast(e)) },
-        .dl => .{ .HTMLDListElement = @as(*parser.DList, @ptrCast(e)) },
-        .data => .{ .HTMLDataElement = @as(*parser.Data, @ptrCast(e)) },
-        .datalist => .{ .HTMLDataListElement = @as(*parser.DataList, @ptrCast(e)) },
-        .dialog => .{ .HTMLDialogElement = @as(*parser.Dialog, @ptrCast(e)) },
-        .dir => .{ .HTMLDirectoryElement = @as(*parser.Directory, @ptrCast(e)) },
-        .div => .{ .HTMLDivElement = @as(*parser.Div, @ptrCast(e)) },
-        .embed => .{ .HTMLEmbedElement = @as(*parser.Embed, @ptrCast(e)) },
-        .fieldset => .{ .HTMLFieldSetElement = @as(*parser.FieldSet, @ptrCast(e)) },
-        .font => .{ .HTMLFontElement = @as(*parser.Font, @ptrCast(e)) },
-        .form => .{ .HTMLFormElement = @as(*parser.Form, @ptrCast(e)) },
-        .frame => .{ .HTMLFrameElement = @as(*parser.Frame, @ptrCast(e)) },
-        .frameset => .{ .HTMLFrameSetElement = @as(*parser.FrameSet, @ptrCast(e)) },
-        .hr => .{ .HTMLHRElement = @as(*parser.HR, @ptrCast(e)) },
-        .head => .{ .HTMLHeadElement = @as(*parser.Head, @ptrCast(e)) },
-        .h1, .h2, .h3, .h4, .h5, .h6 => .{ .HTMLHeadingElement = @as(*parser.Heading, @ptrCast(e)) },
-        .html => .{ .HTMLHtmlElement = @as(*parser.Html, @ptrCast(e)) },
-        .iframe => .{ .HTMLIFrameElement = @as(*parser.IFrame, @ptrCast(e)) },
-        .img => .{ .HTMLImageElement = @as(*parser.Image, @ptrCast(e)) },
-        .input => .{ .HTMLInputElement = @as(*parser.Input, @ptrCast(e)) },
-        .li => .{ .HTMLLIElement = @as(*parser.LI, @ptrCast(e)) },
-        .label => .{ .HTMLLabelElement = @as(*parser.Label, @ptrCast(e)) },
-        .legend => .{ .HTMLLegendElement = @as(*parser.Legend, @ptrCast(e)) },
-        .link => .{ .HTMLLinkElement = @as(*parser.Link, @ptrCast(e)) },
-        .map => .{ .HTMLMapElement = @as(*parser.Map, @ptrCast(e)) },
-        .meta => .{ .HTMLMetaElement = @as(*parser.Meta, @ptrCast(e)) },
-        .meter => .{ .HTMLMeterElement = @as(*parser.Meter, @ptrCast(e)) },
-        .ins, .del => .{ .HTMLModElement = @as(*parser.Mod, @ptrCast(e)) },
-        .ol => .{ .HTMLOListElement = @as(*parser.OList, @ptrCast(e)) },
-        .object => .{ .HTMLObjectElement = @as(*parser.Object, @ptrCast(e)) },
-        .optgroup => .{ .HTMLOptGroupElement = @as(*parser.OptGroup, @ptrCast(e)) },
-        .option => .{ .HTMLOptionElement = @as(*parser.Option, @ptrCast(e)) },
-        .output => .{ .HTMLOutputElement = @as(*parser.Output, @ptrCast(e)) },
-        .p => .{ .HTMLParagraphElement = @as(*parser.Paragraph, @ptrCast(e)) },
-        .param => .{ .HTMLParamElement = @as(*parser.Param, @ptrCast(e)) },
-        .picture => .{ .HTMLPictureElement = @as(*parser.Picture, @ptrCast(e)) },
-        .pre => .{ .HTMLPreElement = @as(*parser.Pre, @ptrCast(e)) },
-        .progress => .{ .HTMLProgressElement = @as(*parser.Progress, @ptrCast(e)) },
-        .blockquote, .q => .{ .HTMLQuoteElement = @as(*parser.Quote, @ptrCast(e)) },
-        .script => .{ .HTMLScriptElement = @as(*parser.Script, @ptrCast(e)) },
-        .select => .{ .HTMLSelectElement = @as(*parser.Select, @ptrCast(e)) },
-        .source => .{ .HTMLSourceElement = @as(*parser.Source, @ptrCast(e)) },
-        .span => .{ .HTMLSpanElement = @as(*parser.Span, @ptrCast(e)) },
-        .slot => .{ .HTMLSlotElement = @as(*parser.Slot, @ptrCast(e)) },
-        .style => .{ .HTMLStyleElement = @as(*parser.Style, @ptrCast(e)) },
-        .table => .{ .HTMLTableElement = @as(*parser.Table, @ptrCast(e)) },
-        .caption => .{ .HTMLTableCaptionElement = @as(*parser.TableCaption, @ptrCast(e)) },
-        .th, .td => .{ .HTMLTableCellElement = @as(*parser.TableCell, @ptrCast(e)) },
-        .col, .colgroup => .{ .HTMLTableColElement = @as(*parser.TableCol, @ptrCast(e)) },
-        .tr => .{ .HTMLTableRowElement = @as(*parser.TableRow, @ptrCast(e)) },
-        .thead, .tbody, .tfoot => .{ .HTMLTableSectionElement = @as(*parser.TableSection, @ptrCast(e)) },
-        .template => .{ .HTMLTemplateElement = @as(*parser.Template, @ptrCast(e)) },
-        .textarea => .{ .HTMLTextAreaElement = @as(*parser.TextArea, @ptrCast(e)) },
-        .time => .{ .HTMLTimeElement = @as(*parser.Time, @ptrCast(e)) },
-        .title => .{ .HTMLTitleElement = @as(*parser.Title, @ptrCast(e)) },
-        .track => .{ .HTMLTrackElement = @as(*parser.Track, @ptrCast(e)) },
-        .ul => .{ .HTMLUListElement = @as(*parser.UList, @ptrCast(e)) },
-        .video => .{ .HTMLVideoElement = @as(*parser.Video, @ptrCast(e)) },
-        .undef => .{ .HTMLUnknownElement = @as(*parser.Unknown, @ptrCast(e)) },
+        .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)) },
+        .applet => .{ .HTMLAppletElement = @as(*parser.Applet, @ptrCast(elem)) },
+        .area => .{ .HTMLAreaElement = @as(*parser.Area, @ptrCast(elem)) },
+        .audio => .{ .HTMLAudioElement = @as(*parser.Audio, @ptrCast(elem)) },
+        .base => .{ .HTMLBaseElement = @as(*parser.Base, @ptrCast(elem)) },
+        .body => .{ .HTMLBodyElement = @as(*parser.Body, @ptrCast(elem)) },
+        .br => .{ .HTMLBRElement = @as(*parser.BR, @ptrCast(elem)) },
+        .button => .{ .HTMLButtonElement = @as(*parser.Button, @ptrCast(elem)) },
+        .canvas => .{ .HTMLCanvasElement = @as(*parser.Canvas, @ptrCast(elem)) },
+        .dl => .{ .HTMLDListElement = @as(*parser.DList, @ptrCast(elem)) },
+        .data => .{ .HTMLDataElement = @as(*parser.Data, @ptrCast(elem)) },
+        .datalist => .{ .HTMLDataListElement = @as(*parser.DataList, @ptrCast(elem)) },
+        .dialog => .{ .HTMLDialogElement = @as(*parser.Dialog, @ptrCast(elem)) },
+        .dir => .{ .HTMLDirectoryElement = @as(*parser.Directory, @ptrCast(elem)) },
+        .div => .{ .HTMLDivElement = @as(*parser.Div, @ptrCast(elem)) },
+        .embed => .{ .HTMLEmbedElement = @as(*parser.Embed, @ptrCast(elem)) },
+        .fieldset => .{ .HTMLFieldSetElement = @as(*parser.FieldSet, @ptrCast(elem)) },
+        .font => .{ .HTMLFontElement = @as(*parser.Font, @ptrCast(elem)) },
+        .form => .{ .HTMLFormElement = @as(*parser.Form, @ptrCast(elem)) },
+        .frame => .{ .HTMLFrameElement = @as(*parser.Frame, @ptrCast(elem)) },
+        .frameset => .{ .HTMLFrameSetElement = @as(*parser.FrameSet, @ptrCast(elem)) },
+        .hr => .{ .HTMLHRElement = @as(*parser.HR, @ptrCast(elem)) },
+        .head => .{ .HTMLHeadElement = @as(*parser.Head, @ptrCast(elem)) },
+        .h1, .h2, .h3, .h4, .h5, .h6 => .{ .HTMLHeadingElement = @as(*parser.Heading, @ptrCast(elem)) },
+        .html => .{ .HTMLHtmlElement = @as(*parser.Html, @ptrCast(elem)) },
+        .iframe => .{ .HTMLIFrameElement = @as(*parser.IFrame, @ptrCast(elem)) },
+        .img => .{ .HTMLImageElement = @as(*parser.Image, @ptrCast(elem)) },
+        .input => .{ .HTMLInputElement = @as(*parser.Input, @ptrCast(elem)) },
+        .li => .{ .HTMLLIElement = @as(*parser.LI, @ptrCast(elem)) },
+        .label => .{ .HTMLLabelElement = @as(*parser.Label, @ptrCast(elem)) },
+        .legend => .{ .HTMLLegendElement = @as(*parser.Legend, @ptrCast(elem)) },
+        .link => .{ .HTMLLinkElement = @as(*parser.Link, @ptrCast(elem)) },
+        .map => .{ .HTMLMapElement = @as(*parser.Map, @ptrCast(elem)) },
+        .meta => .{ .HTMLMetaElement = @as(*parser.Meta, @ptrCast(elem)) },
+        .meter => .{ .HTMLMeterElement = @as(*parser.Meter, @ptrCast(elem)) },
+        .ins, .del => .{ .HTMLModElement = @as(*parser.Mod, @ptrCast(elem)) },
+        .ol => .{ .HTMLOListElement = @as(*parser.OList, @ptrCast(elem)) },
+        .object => .{ .HTMLObjectElement = @as(*parser.Object, @ptrCast(elem)) },
+        .optgroup => .{ .HTMLOptGroupElement = @as(*parser.OptGroup, @ptrCast(elem)) },
+        .option => .{ .HTMLOptionElement = @as(*parser.Option, @ptrCast(elem)) },
+        .output => .{ .HTMLOutputElement = @as(*parser.Output, @ptrCast(elem)) },
+        .p => .{ .HTMLParagraphElement = @as(*parser.Paragraph, @ptrCast(elem)) },
+        .param => .{ .HTMLParamElement = @as(*parser.Param, @ptrCast(elem)) },
+        .picture => .{ .HTMLPictureElement = @as(*parser.Picture, @ptrCast(elem)) },
+        .pre => .{ .HTMLPreElement = @as(*parser.Pre, @ptrCast(elem)) },
+        .progress => .{ .HTMLProgressElement = @as(*parser.Progress, @ptrCast(elem)) },
+        .blockquote, .q => .{ .HTMLQuoteElement = @as(*parser.Quote, @ptrCast(elem)) },
+        .script => .{ .HTMLScriptElement = @as(*parser.Script, @ptrCast(elem)) },
+        .select => .{ .HTMLSelectElement = @as(*parser.Select, @ptrCast(elem)) },
+        .source => .{ .HTMLSourceElement = @as(*parser.Source, @ptrCast(elem)) },
+        .span => .{ .HTMLSpanElement = @as(*parser.Span, @ptrCast(elem)) },
+        .style => .{ .HTMLStyleElement = @as(*parser.Style, @ptrCast(elem)) },
+        .table => .{ .HTMLTableElement = @as(*parser.Table, @ptrCast(elem)) },
+        .caption => .{ .HTMLTableCaptionElement = @as(*parser.TableCaption, @ptrCast(elem)) },
+        .th, .td => .{ .HTMLTableCellElement = @as(*parser.TableCell, @ptrCast(elem)) },
+        .col, .colgroup => .{ .HTMLTableColElement = @as(*parser.TableCol, @ptrCast(elem)) },
+        .tr => .{ .HTMLTableRowElement = @as(*parser.TableRow, @ptrCast(elem)) },
+        .thead, .tbody, .tfoot => .{ .HTMLTableSectionElement = @as(*parser.TableSection, @ptrCast(elem)) },
+        .template => .{ .HTMLTemplateElement = @as(*parser.Template, @ptrCast(elem)) },
+        .textarea => .{ .HTMLTextAreaElement = @as(*parser.TextArea, @ptrCast(elem)) },
+        .time => .{ .HTMLTimeElement = @as(*parser.Time, @ptrCast(elem)) },
+        .title => .{ .HTMLTitleElement = @as(*parser.Title, @ptrCast(elem)) },
+        .track => .{ .HTMLTrackElement = @as(*parser.Track, @ptrCast(elem)) },
+        .ul => .{ .HTMLUListElement = @as(*parser.UList, @ptrCast(elem)) },
+        .video => .{ .HTMLVideoElement = @as(*parser.Video, @ptrCast(elem)) },
+        .undef => .{ .HTMLUnknownElement = @as(*parser.Unknown, @ptrCast(elem)) },
     };
 }
 
@@ -1411,8 +1353,6 @@ test "Browser.HTML.Element" {
 
     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" },
     }, .{});
@@ -1423,29 +1363,11 @@ test "Browser.HTML.Element" {
         .{ "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" {
+test "Browser.HTML.HtmlInputElement.propeties" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{ .url = "https://lightpanda.io/noslashattheend" });
     defer runner.deinit();
-    var alloc = std.heap.ArenaAllocator.init(runner.allocator);
+    var alloc = std.heap.ArenaAllocator.init(runner.app.allocator);
     defer alloc.deinit();
     const arena = alloc.allocator();
 
@@ -1526,8 +1448,7 @@ test "Browser.HTML.HtmlInputElement.properties" {
         .{ "input_value.value", "mango" }, // Still mango
     }, .{});
 }
-
-test "Browser.HTML.HtmlInputElement.properties.form" {
+test "Browser.HTML.HtmlInputElement.propeties.form" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
         \\ <form action="test.php" target="_blank">
         \\   <p>
@@ -1545,47 +1466,6 @@ test "Browser.HTML.HtmlInputElement.properties.form" {
     }, .{});
 }
 
-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" },
-        .{ "t.innerHTML = '<span>over</span><p>9000!</p>';", null },
-        .{ "t.content.childNodes.length", "2" },
-        .{ "t.content.childNodes[0].tagName", "SPAN" },
-        .{ "t.content.childNodes[0].innerHTML", "over" },
-        .{ "t.content.childNodes[1].tagName", "P" },
-        .{ "t.content.childNodes[1].innerHTML", "9000!" },
-    }, .{});
-}
-
-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" },
-    }, .{});
-}
-
-test "Browser: HTML.HTMLScriptElement" {
-    try testing.htmlRunner("html/script/inline_defer.html");
-}
-
-test "Browser: HTML.HTMLSlotElement" {
-    try testing.htmlRunner("html/html_slot_element.html");
-}
-
 const Check = struct {
     input: []const u8,
     expected: ?[]const u8 = null, // Needed when input != expected

src/browser/html/error_event.zig

@@ -1,86 +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 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" {
-    try testing.htmlRunner("html/error_event.html");
-}

src/browser/html/html.zig

@@ -24,6 +24,7 @@ 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,
@@ -36,8 +37,5 @@ pub const Interfaces = .{
     History,
     Location,
     MediaQueryList,
-    @import("DataSet.zig"),
-    @import("screen.zig").Interfaces,
-    @import("error_event.zig").ErrorEvent,
-    @import("AbortController.zig").Interfaces,
+    Performance,
 };

src/browser/html/iframe.zig

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

src/browser/html/media_query_list.zig

@@ -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{ .internal_target_type = .media_query_list },
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
 
     matches: bool,
     media: []const u8,

src/browser/html/performance.zig

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

src/browser/html/screen.zig

@@ -1,103 +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 parser = @import("../netsurf.zig");
-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;
-
-    proto: parser.EventTargetTBase = .{ .internal_target_type = .screen },
-
-    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,
-    proto: parser.EventTargetTBase = .{ .internal_target_type = .screen_orientation },
-
-    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" {
-    try testing.htmlRunner("html/screen.html");
-}

src/browser/html/select.zig

@@ -18,16 +18,8 @@
 const std = @import("std");
 
 const parser = @import("../netsurf.zig");
-const collection = @import("../dom/html_collection.zig");
-
-const Page = @import("../page.zig").Page;
 const HTMLElement = @import("elements.zig").HTMLElement;
-
-pub const Interfaces = .{
-    HTMLSelectElement,
-    HTMLOptionElement,
-    HTMLOptionsCollection,
-};
+const Page = @import("../page.zig").Page;
 
 pub const HTMLSelectElement = struct {
     pub const Self = parser.Select;
@@ -64,7 +56,7 @@ pub const HTMLSelectElement = struct {
     }
 
     pub fn get_selectedIndex(select: *parser.Select, page: *Page) !i32 {
-        const state = try page.getOrCreateNodeState(@ptrCast(@alignCast(select)));
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(select)));
         const selected_index = try parser.selectGetSelectedIndex(select);
 
         // See the explicit_index_set field documentation
@@ -83,7 +75,7 @@ pub const HTMLSelectElement = struct {
     // 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(@ptrCast(@alignCast(select)));
+        var state = try page.getOrCreateNodeState(@alignCast(@ptrCast(select)));
         state.explicit_index_set = true;
 
         const options = try parser.selectGetOptions(select);
@@ -97,105 +89,6 @@ pub const HTMLSelectElement = struct {
             try parser.optionSetSelected(option, true);
         }
     }
-
-    pub fn get_options(select: *parser.Select) HTMLOptionsCollection {
-        return .{
-            .select = select,
-            .proto = collection.HTMLCollectionChildren(@ptrCast(@alignCast(select)), .{
-                .mutable = true,
-                .include_root = false,
-            }),
-        };
-    }
-};
-
-pub const HTMLOptionElement = struct {
-    pub const Self = parser.Option;
-    pub const prototype = *HTMLElement;
-    pub const subtype = .node;
-
-    pub fn get_value(self: *parser.Option) ![]const u8 {
-        return parser.optionGetValue(self);
-    }
-    pub fn set_value(self: *parser.Option, value: []const u8) !void {
-        return parser.optionSetValue(self, value);
-    }
-
-    pub fn get_label(self: *parser.Option) ![]const u8 {
-        return parser.optionGetLabel(self);
-    }
-    pub fn set_label(self: *parser.Option, label: []const u8) !void {
-        return parser.optionSetLabel(self, label);
-    }
-
-    pub fn get_selected(self: *parser.Option) !bool {
-        return parser.optionGetSelected(self);
-    }
-    pub fn set_selected(self: *parser.Option, value: bool) !void {
-        return parser.optionSetSelected(self, value);
-    }
-
-    pub fn get_disabled(self: *parser.Option) !bool {
-        return parser.optionGetDisabled(self);
-    }
-    pub fn set_disabled(self: *parser.Option, value: bool) !void {
-        return parser.optionSetDisabled(self, value);
-    }
-
-    pub fn get_text(self: *parser.Option) ![]const u8 {
-        return parser.optionGetText(self);
-    }
-
-    pub fn get_form(self: *parser.Option) !?*parser.Form {
-        return parser.optionGetForm(self);
-    }
-};
-
-pub const HTMLOptionsCollection = struct {
-    pub const prototype = *collection.HTMLCollection;
-
-    proto: collection.HTMLCollection,
-    select: *parser.Select,
-
-    pub fn get_selectedIndex(self: *HTMLOptionsCollection, page: *Page) !i32 {
-        return HTMLSelectElement.get_selectedIndex(self.select, page);
-    }
-
-    pub fn set_selectedIndex(self: *HTMLOptionsCollection, index: i32, page: *Page) !void {
-        return HTMLSelectElement.set_selectedIndex(self.select, index, page);
-    }
-
-    const BeforeOpts = union(enum) {
-        index: u32,
-        option: *parser.Option,
-    };
-    pub fn _add(self: *HTMLOptionsCollection, option: *parser.Option, before_: ?BeforeOpts) !void {
-        const Node = @import("../dom/node.zig").Node;
-        const before = before_ orelse {
-            return self.appendOption(option);
-        };
-
-        const insert_before: *parser.Node = switch (before) {
-            .option => |o| @ptrCast(@alignCast(o)),
-            .index => |i| (try self.proto.item(i)) orelse return self.appendOption(option),
-        };
-        return Node.before(insert_before, &.{
-            .{ .node = @ptrCast(@alignCast(option)) },
-        });
-    }
-
-    pub fn _remove(self: *HTMLOptionsCollection, index: u32) !void {
-        const Node = @import("../dom/node.zig").Node;
-        const option = (try self.proto.item(index)) orelse return;
-        _ = try Node._removeChild(@ptrCast(@alignCast(self.select)), option);
-    }
-
-    fn appendOption(self: *HTMLOptionsCollection, option: *parser.Option) !void {
-        const Node = @import("../dom/node.zig").Node;
-        return Node.append(@ptrCast(@alignCast(self.select)), &.{
-            .{ .node = @ptrCast(@alignCast(option)) },
-        });
-    }
 };
 
 const testing = @import("../../testing.zig");
@@ -247,32 +140,5 @@ test "Browser.HTML.Select" {
 
         .{ "s.selectedIndex = -323", null },
         .{ "s.selectedIndex", "-1" },
-
-        .{ "let options = s.options", null },
-        .{ "options.length", "2" },
-        .{ "options.item(1).value", "o2" },
-        .{ "options.selectedIndex", "-1" },
-
-        .{ "let o3 = document.createElement('option');", null },
-        .{ "o3.value = 'o3';", null },
-        .{ "options.add(o3)", null },
-        .{ "options.length", "3" },
-        .{ "options.item(2).value", "o3" },
-
-        .{ "let o4 = document.createElement('option');", null },
-        .{ "o4.value = 'o4';", null },
-        .{ "options.add(o4, 1)", null },
-        .{ "options.length", "4" },
-        .{ "options.item(1).value", "o4" },
-
-        .{ "let o5 = document.createElement('option');", null },
-        .{ "o5.value = 'o5';", null },
-        .{ "options.add(o5, o3)", null },
-        .{ "options.length", "5" },
-        .{ "options.item(3).value", "o5" },
-
-        .{ "options.remove(3)", null },
-        .{ "options.length", "4" },
-        .{ "options.item(3).value", "o3" },
     }, .{});
 }

src/browser/html/window.zig

@@ -20,8 +20,9 @@ const std = @import("std");
 
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
-const Env = @import("../env.zig").Env;
+const Function = @import("../env.zig").Function;
 const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
 
 const Navigator = @import("navigator.zig").Navigator;
 const History = @import("history.zig").History;
@@ -30,14 +31,8 @@ const Crypto = @import("../crypto/crypto.zig").Crypto;
 const Console = @import("../console/console.zig").Console;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
-const Performance = @import("../dom/performance.zig").Performance;
-const CSSStyleDeclaration = @import("../cssom/CSSStyleDeclaration.zig");
-const Screen = @import("screen.zig").Screen;
-const domcss = @import("../dom/css.zig");
-const Css = @import("../css/css.zig").Css;
-
-const Function = Env.Function;
-const JsObject = Env.JsObject;
+const Performance = @import("performance.zig").Performance;
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 const storage = @import("../storage/storage.zig");
 
@@ -47,7 +42,7 @@ pub const Window = struct {
     pub const prototype = *EventTarget;
 
     // Extend libdom event target for pure zig struct.
-    base: parser.EventTargetTBase = parser.EventTargetTBase{ .internal_target_type = .window },
+    base: parser.EventTargetTBase = parser.EventTargetTBase{},
 
     document: *parser.DocumentHTML,
     target: []const u8 = "",
@@ -57,18 +52,17 @@ pub const Window = struct {
 
     // counter for having unique timer ids
     timer_id: u30 = 0,
-    timers: std.AutoHashMapUnmanaged(u32, void) = .{},
+    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 Elements = @import("../html/elements.zig");
+        const html_doc = try parser.documentHTMLParse(fbs.reader(), "utf-8", &Elements.createElement);
         const doc = parser.documentHTMLToDocument(html_doc);
         try parser.documentSetDocumentURI(doc, "about:blank");
 
@@ -76,7 +70,7 @@ pub const Window = struct {
             .document = html_doc,
             .target = target orelse "",
             .navigator = navigator orelse .{},
-            .performance = Performance.init(),
+            .performance = .{ .time_origin = try std.time.Timer.start() },
         };
     }
 
@@ -86,7 +80,7 @@ pub const Window = struct {
     }
 
     pub fn replaceDocument(self: *Window, doc: *parser.DocumentHTML) !void {
-        self.performance.reset(); // When to reset see: https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin
+        self.performance.time_origin.reset(); // When to reset see: https://developer.mozilla.org/en-US/docs/Web/API/Performance/timeOrigin
         self.document = doc;
         try parser.documentHTMLSetLocation(Location, doc, &self.location);
     }
@@ -127,43 +121,7 @@ pub const Window = struct {
         return self;
     }
 
-    // frames return the window itself, but accessing it via a pseudo
-    // array returns the Window object corresponding to the given frame or
-    // iframe.
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/frames
-    pub fn get_frames(self: *Window) *Window {
-        return self;
-    }
-
-    pub fn indexed_get(self: *Window, index: u32, has_value: *bool, page: *Page) !*Window {
-        const frames = try domcss.querySelectorAll(
-            page.call_arena,
-            parser.documentHTMLToNode(self.document),
-            "iframe",
-        );
-
-        if (index >= frames.nodes.items.len) {
-            has_value.* = false;
-            return undefined;
-        }
-
-        has_value.* = true;
-        // TODO return the correct frame's window
-        // frames.nodes.items[indexed]
-        return error.TODO;
-    }
-
-    // Retrieve the numbre of frames/iframes from the DOM dynamically.
-    pub fn get_length(self: *const Window, page: *Page) !u32 {
-        const frames = try domcss.querySelectorAll(
-            page.call_arena,
-            parser.documentHTMLToNode(self.document),
-            "iframe",
-        );
-
-        return frames.get_length();
-    }
-
+    // TODO: frames
     pub fn get_top(self: *Window) *Window {
         return self;
     }
@@ -206,44 +164,33 @@ pub const Window = struct {
         return &self.performance;
     }
 
-    pub fn get_screen(self: *Window) *Screen {
-        return &self.screen;
-    }
-
-    pub fn get_CSS(self: *Window) *Css {
-        return &self.css;
-    }
-
     pub fn _requestAnimationFrame(self: *Window, cbk: Function, page: *Page) !u32 {
-        return self.createTimeout(cbk, 5, page, .{
-            .animation_frame = true,
-            .name = "animationFrame",
-            .low_priority = true,
-        });
+        return self.createTimeout(cbk, 5, page, .{ .animation_frame = true });
     }
 
-    pub fn _cancelAnimationFrame(self: *Window, id: u32) !void {
-        _ = self.timers.remove(id);
+    pub fn _cancelAnimationFrame(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
     }
 
-    pub fn _setTimeout(self: *Window, cbk: Function, delay: ?u32, params: []Env.JsObject, page: *Page) !u32 {
-        return self.createTimeout(cbk, delay, page, .{ .args = params, .name = "setTimeout" });
+    // TODO handle callback arguments.
+    pub fn _setTimeout(self: *Window, cbk: Function, delay: ?u32, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{});
     }
 
-    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, .name = "setInterval" });
+    // TODO handle callback arguments.
+    pub fn _setInterval(self: *Window, cbk: Function, delay: ?u32, page: *Page) !u32 {
+        return self.createTimeout(cbk, delay, page, .{ .repeat = true });
     }
 
-    pub fn _clearTimeout(self: *Window, id: u32) !void {
-        _ = self.timers.remove(id);
+    pub fn _clearTimeout(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
     }
 
-    pub fn _clearInterval(self: *Window, id: u32) !void {
-        _ = self.timers.remove(id);
-    }
-
-    pub fn _queueMicrotask(self: *Window, cbk: Function, page: *Page) !u32 {
-        return self.createTimeout(cbk, 0, page, .{ .name = "queueMicrotask" });
+    pub fn _clearInterval(self: *Window, id: u32, page: *Page) !void {
+        const kv = self.timers.fetchRemove(id) orelse return;
+        return page.loop.cancel(kv.value.loop_id);
     }
 
     pub fn _matchMedia(_: *const Window, media: []const u8, page: *Page) !MediaQueryList {
@@ -253,30 +200,20 @@ pub const Window = struct {
         };
     }
 
-    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 {
-        name: []const u8,
-        args: []Env.JsObject = &.{},
         repeat: bool = false,
         animation_frame: bool = false,
-        low_priority: bool = false,
     };
-    fn createTimeout(self: *Window, cbk: Function, delay_: ?u32, page: *Page, opts: CreateTimeoutOpts) !u32 {
+    fn createTimeout(self: *Window, cbk: Function, delay_: ?u32, page: *Page, comptime opts: CreateTimeoutOpts) !u32 {
         const delay = delay_ orelse 0;
+        if (delay > 5000) {
+            log.warn(.user_script, "long timeout ignored", .{ .delay = delay, .interval = opts.repeat });
+            // self.timer_id is u30, so the largest value we can generate is
+            // 1_073_741_824. Returning 2_000_000_000 makes sure that clients
+            // can call cancelTimer/cancelInterval without breaking anything.
+            return 2_000_000_000;
+        }
+
         if (self.timers.count() > 512) {
             return error.TooManyTimeout;
         }
@@ -289,36 +226,24 @@ pub const Window = struct {
         if (gop.found_existing) {
             // this can only happen if we've created 2^31 timeouts.
             return error.TooManyTimeout;
-        } else {
-            gop.value_ptr.* = {};
         }
         errdefer _ = self.timers.remove(timer_id);
 
-        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.* = .{
             .cbk = cbk,
+            .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 (opts.repeat) delay_ms else null,
             .animation_frame = opts.animation_frame,
-            // setting a repeat time of 0 is illegal, doing + 1 is a simple way to avoid that
-            .repeat = if (opts.repeat) delay + 1 else null,
         };
+        callback.loop_id = try page.loop.timeout(delay_ms, &callback.node);
 
-        try page.scheduler.add(callback, TimerCallback.run, delay, .{
-            .name = opts.name,
-            .low_priority = opts.low_priority,
-        });
-
+        gop.value_ptr.* = callback;
         return timer_id;
     }
 
@@ -341,78 +266,35 @@ pub const Window = struct {
             behavior: []const u8,
         };
     };
-    pub fn _scrollTo(self: *Window, opts: ScrollToOpts, y: ?u32) !void {
+    pub fn _scrollTo(_: *const 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 {
+    // the internal loop id, need it when cancelling
+    loop_id: usize,
+
     // the id of our timer (windows.timers key)
     timer_id: u31,
 
-    // if false, we'll remove the timer_id from the window.timers lookup on run
-    repeat: ?u32,
-
     // The JavaScript callback to execute
     cbk: Function,
 
+    // This is the internal data that the event loop tracks. We'll get this
+    // back in run and, from it, can get our TimerCallback instance
+    node: Loop.CallbackNode = undefined,
+
+    // if the event should be repeated
+    repeat: ?u63 = null,
+
     animation_frame: bool = false,
 
     window: *Window,
 
-    args: []Env.JsObject = &.{},
-
-    fn run(ctx: *anyopaque) ?u32 {
-        const self: *TimerCallback = @ptrCast(@alignCast(ctx));
-        if (self.repeat != null) {
-            if (self.window.timers.contains(self.timer_id) == false) {
-                // it was called
-                return null;
-            }
-        } else if (self.window.timers.remove(self.timer_id) == false) {
-            // it was cancelled
-            return null;
-        }
+    fn run(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+        const self: *TimerCallback = @fieldParentPtr("node", node);
 
         var result: Function.Result = undefined;
 
@@ -420,23 +302,89 @@ const TimerCallback = struct {
         if (self.animation_frame) {
             call = self.cbk.tryCall(void, .{self.window.performance._now()}, &result);
         } else {
-            call = self.cbk.tryCall(void, self.args, &result);
+            call = self.cbk.tryCall(void, .{}, &result);
         }
 
         call catch {
-            log.warn(.user_script, "callback error", .{
+            log.debug(.user_script, "callback error", .{
                 .err = result.exception,
                 .stack = result.stack,
                 .source = "window timeout",
             });
         };
 
-        return self.repeat;
+        if (self.repeat) |r| {
+            // setInterval
+            repeat_delay.* = r;
+            return;
+        }
+
+        // setTimeout
+        _ = self.window.timers.remove(self.timer_id);
     }
 };
 
 const testing = @import("../../testing.zig");
-test "Browser: Window" {
-    try testing.htmlRunner("window/window.html");
-    try testing.htmlRunner("window/frames.html");
+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;
+            \\ function step(timestamp) {
+            \\    if (start === undefined) {
+            \\      start = timestamp;
+            \\    }
+            \\    const elapsed = timestamp - start;
+            \\    if (elapsed < 2000) {
+            \\      requestAnimationFrame(step);
+            \\    }
+            \\ }
+            ,
+            null,
+        },
+        .{ "requestAnimationFrame(step);", null }, // returned id is checked in the next test
+    }, .{});
+
+    // cancelAnimationFrame should be able to cancel a request with the given id
+    try runner.testCases(&.{
+        .{ "let request_id = requestAnimationFrame(timestamp => {});", null },
+        .{ "cancelAnimationFrame(request_id);", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "1" }, // Width is 1 even if there are no elements
+        .{
+            \\ let div1 = document.createElement('div');
+            \\ document.body.appendChild(div1);
+            \\ div1.getClientRects();
+            ,
+            null,
+        },
+        .{
+            \\ let div2 = document.createElement('div');
+            \\ document.body.appendChild(div2);
+            \\ div2.getClientRects();
+            ,
+            null,
+        },
+        .{ "innerHeight", "1" },
+        .{ "innerWidth", "2" },
+    }, .{});
+
+    // cancelAnimationFrame should be able to cancel a request with the given id
+    try runner.testCases(&.{
+        .{ "let longCall = false;", null },
+        .{ "window.setTimeout(() => {longCall = true}, 5001);", null },
+        .{ "longCall;", "false" },
+    }, .{});
 }

src/browser/mimalloc.zig

@@ -20,7 +20,6 @@
 // management.
 // We replace the libdom default usage of allocations with mimalloc heap
 // allocation to be able to free all memory used at once, like an arena usage.
-const std = @import("std");
 
 const c = @cImport({
     @cInclude("mimalloc.h");
@@ -34,43 +33,43 @@ const Error = error{
 var heap: ?*c.mi_heap_t = null;
 
 pub fn create() Error!void {
-    std.debug.assert(heap == null);
+    if (heap != null) return Error.HeapNotNull;
     heap = c.mi_heap_new();
-    std.debug.assert(heap != null);
+    if (heap == null) return Error.HeapNull;
 }
 
 pub fn destroy() void {
-    std.debug.assert(heap != null);
+    if (heap == null) return;
     c.mi_heap_destroy(heap.?);
     heap = null;
 }
 
-pub export fn m_alloc(size: usize) callconv(.c) ?*anyopaque {
-    std.debug.assert(heap != null);
+pub export fn m_alloc(size: usize) callconv(.C) ?*anyopaque {
+    if (heap == null) return null;
     return c.mi_heap_malloc(heap.?, size);
 }
 
-pub export fn re_alloc(ptr: ?*anyopaque, size: usize) callconv(.c) ?*anyopaque {
-    std.debug.assert(heap != null);
+pub export fn re_alloc(ptr: ?*anyopaque, size: usize) callconv(.C) ?*anyopaque {
+    if (heap == null) return null;
     return c.mi_heap_realloc(heap.?, ptr, size);
 }
 
-pub export fn c_alloc(nmemb: usize, size: usize) callconv(.c) ?*anyopaque {
-    std.debug.assert(heap != null);
+pub export fn c_alloc(nmemb: usize, size: usize) callconv(.C) ?*anyopaque {
+    if (heap == null) return null;
     return c.mi_heap_calloc(heap.?, nmemb, size);
 }
 
-pub export fn str_dup(s: [*c]const u8) callconv(.c) [*c]u8 {
-    std.debug.assert(heap != null);
+pub export fn str_dup(s: [*c]const u8) callconv(.C) [*c]u8 {
+    if (heap == null) return null;
     return c.mi_heap_strdup(heap.?, s);
 }
 
-pub export fn strn_dup(s: [*c]const u8, size: usize) callconv(.c) [*c]u8 {
-    std.debug.assert(heap != null);
+pub export fn strn_dup(s: [*c]const u8, size: usize) callconv(.C) [*c]u8 {
+    if (heap == null) return null;
     return c.mi_heap_strndup(heap.?, s, size);
 }
 
 // NOOP, use destroy to clear all the memory allocated at once.
-pub export fn f_ree(_: ?*anyopaque) callconv(.c) void {
+pub export fn f_ree(_: ?*anyopaque) callconv(.C) void {
     return;
 }

src/browser/mime.zig

@@ -22,11 +22,11 @@ const Allocator = std.mem.Allocator;
 pub const Mime = struct {
     content_type: ContentType,
     params: []const u8 = "",
-    charset: ?[:0]const u8 = null,
+    charset: ?[]const u8 = null,
 
     pub const unknown = Mime{
         .params = "",
-        .charset = null,
+        .charset = "",
         .content_type = .{ .unknown = {} },
     };
 
@@ -35,8 +35,6 @@ pub const Mime = struct {
         text_html,
         text_javascript,
         text_plain,
-        text_css,
-        application_json,
         unknown,
         other,
     };
@@ -46,13 +44,11 @@ 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 },
     };
 
-    pub fn parse(input: []u8) !Mime {
+    pub fn parse(arena: Allocator, input: []u8) !Mime {
         if (input.len > 255) {
             return error.TooBig;
         }
@@ -69,7 +65,7 @@ pub const Mime = struct {
 
         const params = trimLeft(normalized[type_len..]);
 
-        var charset: ?[:0]const u8 = null;
+        var charset: ?[]const u8 = null;
 
         var it = std.mem.splitScalar(u8, params, ';');
         while (it.next()) |attr| {
@@ -86,37 +82,7 @@ pub const Mime = struct {
             }, name) orelse continue;
 
             switch (attribute_name) {
-                .charset => {
-                    // We used to have a proper value parser, but we currently
-                    // only care about the charset attribute, plus only about
-                    // the UTF-8 value. It's a lot easier to do it this way,
-                    // and it doesn't require an allocation to (a) unescape the
-                    // value or (b) ensure the correct lifetime.
-                    if (value.len == 0) {
-                        break;
-                    }
-                    var attribute_value = value;
-                    if (value[0] == '"') {
-                        if (value.len < 3 or value[value.len - 1] != '"') {
-                            return error.Invalid;
-                        }
-                        attribute_value = value[1 .. value.len - 1];
-                    }
-
-                    if (std.ascii.eqlIgnoreCase(attribute_value, "utf-8")) {
-                        charset = "UTF-8";
-                    } else if (std.ascii.eqlIgnoreCase(attribute_value, "iso-8859-1")) {
-                        charset = "ISO-8859-1";
-                    } else {
-                        // we only care about null (which we default to UTF-8)
-                        // or UTF-8. If this is actually set (i.e. not null)
-                        // and isn't UTF-8, we'll just put a dummy value. If
-                        // we want to capture the actual value, we'll need to
-                        // dupe/allocate it. Since, for now, we don't need that
-                        // we can avoid the allocation.
-                        charset = "lightpanda:UNSUPPORTED";
-                    }
-                },
+                .charset => charset = try parseAttributeValue(arena, value),
             }
         }
 
@@ -208,22 +174,18 @@ pub const Mime = struct {
         if (std.meta.stringToEnum(enum {
             @"text/xml",
             @"text/html",
-            @"text/css",
-            @"text/plain",
 
             @"text/javascript",
             @"application/javascript",
             @"application/x-javascript",
 
-            @"application/json",
+            @"text/plain",
         }, type_name)) |known_type| {
             const ct: ContentType = switch (known_type) {
                 .@"text/xml" => .{ .text_xml = {} },
                 .@"text/html" => .{ .text_html = {} },
                 .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
                 .@"text/plain" => .{ .text_plain = {} },
-                .@"text/css" => .{ .text_css = {} },
-                .@"application/json" => .{ .application_json = {} },
             };
             return .{ ct, attribute_start };
         }
@@ -254,6 +216,56 @@ pub const Mime = struct {
         break :blk v;
     };
 
+    fn parseAttributeValue(arena: Allocator, value: []const u8) ![]const u8 {
+        if (value[0] != '"') {
+            return value;
+        }
+
+        // 1 to skip the opening quote
+        var value_pos: usize = 1;
+        var unescaped_len: usize = 0;
+        const last = value.len - 1;
+
+        while (value_pos < value.len) {
+            switch (value[value_pos]) {
+                '"' => break,
+                '\\' => {
+                    if (value_pos == last) {
+                        return error.Invalid;
+                    }
+                    const next = value[value_pos + 1];
+                    if (T_SPECIAL[next] == false) {
+                        return error.Invalid;
+                    }
+                    value_pos += 2;
+                },
+                else => value_pos += 1,
+            }
+            unescaped_len += 1;
+        }
+
+        if (unescaped_len == 0) {
+            return error.Invalid;
+        }
+
+        value_pos = 1;
+        const owned = try arena.alloc(u8, unescaped_len);
+        for (0..unescaped_len) |i| {
+            switch (value[value_pos]) {
+                '"' => break,
+                '\\' => {
+                    owned[i] = value[value_pos + 1];
+                    value_pos += 2;
+                },
+                else => |c| {
+                    owned[i] = c;
+                    value_pos += 1;
+                },
+            }
+        }
+        return owned;
+    }
+
     const VALID_CODEPOINTS = blk: {
         var v: [256]bool = undefined;
         for (0..256) |i| {
@@ -284,7 +296,7 @@ pub const Mime = struct {
 };
 
 const testing = @import("../testing.zig");
-test "Mime: invalid" {
+test "Mime: invalid " {
     defer testing.reset();
 
     const invalids = [_][]const u8{
@@ -302,11 +314,12 @@ test "Mime: invalid" {
         "text/html; charset=\"\"",
         "text/html; charset=\"",
         "text/html; charset=\"\\",
+        "text/html; charset=\"\\a\"", // invalid to escape non special characters
     };
 
     for (invalids) |invalid| {
         const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
-        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+        try testing.expectError(error.Invalid, Mime.parse(undefined, mutable_input));
     }
 }
 
@@ -336,9 +349,6 @@ 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" {
@@ -363,19 +373,19 @@ test "Mime: parse charset" {
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "UTF-8",
+        .charset = "utf-8",
         .params = "charset=utf-8",
     }, "text/xml; charset=utf-8");
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "UTF-8",
+        .charset = "utf-8",
         .params = "charset=\"utf-8\"",
     }, "text/xml;charset=\"utf-8\"");
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "lightpanda:UNSUPPORTED",
+        .charset = "\\ \" ",
         .params = "charset=\"\\\\ \\\" \"",
     }, "text/xml;charset=\"\\\\ \\\" \"   ");
 }
@@ -386,7 +396,7 @@ test "Mime: isHTML" {
     const isHTML = struct {
         fn isHTML(expected: bool, input: []const u8) !void {
             const mutable_input = try testing.arena_allocator.dupe(u8, input);
-            var mime = try Mime.parse(mutable_input);
+            var mime = try Mime.parse(testing.arena_allocator, mutable_input);
             try testing.expectEqual(expected, mime.isHTML());
         }
     }.isHTML;
@@ -472,7 +482,7 @@ const Expectation = struct {
 fn expect(expected: Expectation, input: []const u8) !void {
     const mutable_input = try testing.arena_allocator.dupe(u8, input);
 
-    const actual = try Mime.parse(mutable_input);
+    const actual = try Mime.parse(testing.arena_allocator, mutable_input);
     try testing.expectEqual(
         std.meta.activeTag(expected.content_type),
         std.meta.activeTag(actual.content_type),

src/browser/polyfill/fetch.zig

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

src/browser/polyfill/polyfill.zig

@@ -23,98 +23,25 @@ const log = @import("../../log.zig");
 const Allocator = std.mem.Allocator;
 const Env = @import("../env.zig").Env;
 
-pub const Loader = struct {
-    state: enum { empty, loading } = .empty,
-
-    done: struct {
-        fetch: bool = false,
-        webcomponents: bool = false,
-    } = .{},
-
-    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();
-
-        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),
-            });
-        };
-
-        @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;
-    }
+const modules = [_]struct {
+    name: []const u8,
+    source: []const u8,
+}{
+    .{ .name = "polyfill-fetch", .source = @import("fetch.zig").source },
 };
 
-pub fn preload(allocator: Allocator, js_context: *Env.JsContext) !void {
+pub fn load(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;
-    };
+    for (modules) |m| {
+        _ = js_context.exec(m.source, m.name) catch |err| {
+            if (try try_catch.err(allocator)) |msg| {
+                defer allocator.free(msg);
+                log.fatal(.app, "polyfill error", .{ .name = m.name, .err = msg });
+            }
+            return err;
+        };
+    }
 }

src/browser/polyfill/webcomponents.js

@@ -1,61 +0,0 @@
-/**
-@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

@@ -1,42 +0,0 @@
-// 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: Polyfill.WebComponents" {
-    try testing.htmlRunner("polyfill/webcomponents.html");
-}

src/browser/renderer.zig

@@ -62,38 +62,20 @@ 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 = _x,
-            .y = y,
-            .width = w,
-            .height = h,
-            .left = _x,
-            .top = y,
-            .right = _x + w,
-            .bottom = y + h,
+            .x = @floatFromInt(x),
+            .y = 0.0,
+            .width = 1.0,
+            .height = 1.0,
         };
     }
 
     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 = x,
-            .y = y,
-            .width = w,
-            .height = h,
-            .left = x,
-            .top = y,
-            .right = x + w,
-            .bottom = y + h,
+            .x = 0.0,
+            .y = 0.0,
+            .width = @floatFromInt(self.width()),
+            .height = @floatFromInt(self.height()),
         };
     }
 

src/browser/session.zig

@@ -56,12 +56,6 @@ pub const Session = struct {
 
     page: ?Page = null,
 
-    // If the current page want to navigate to a new page
-    //  (form submit, link click, top.location = xxx)
-    // the details are stored here so that, on the next call to session.wait
-    // we can destroy the current page and start a new one.
-    queued_navigation: ?QueuedNavigation,
-
     pub fn init(self: *Session, browser: *Browser) !void {
         var executor = try browser.env.newExecutionWorld();
         errdefer executor.deinit();
@@ -70,7 +64,6 @@ pub const Session = struct {
         self.* = .{
             .browser = browser,
             .executor = executor,
-            .queued_navigation = null,
             .arena = browser.session_arena.allocator(),
             .storage_shed = storage.Shed.init(allocator),
             .cookie_jar = storage.CookieJar.init(allocator),
@@ -92,14 +85,14 @@ pub const Session = struct {
     pub fn createPage(self: *Session) !*Page {
         std.debug.assert(self.page == null);
 
-        // Start netsurf memory arena.
-        // We need to init this early as JS event handlers may be registered through Runtime.evaluate before the first html doc is loaded
-        try parser.init();
-
         const page_arena = &self.browser.page_arena;
         _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
         _ = self.browser.state_pool.reset(.{ .retain_with_limit = 4 * 1024 });
 
+        // Start netsurf memory arena.
+        // We need to init this early as JS event handlers may be registered through Runtime.evaluate before the first html doc is loaded
+        try parser.init(page_arena.allocator());
+
         self.page = @as(Page, undefined);
         const page = &self.page.?;
         try Page.init(page, page_arena.allocator(), self);
@@ -118,13 +111,23 @@ pub const Session = struct {
 
         std.debug.assert(self.page != null);
 
-        // RemoveJsContext() will execute the destructor of any type that
-        // registered a destructor (e.g. XMLHttpRequest).
-        // Should be called before we deinit the page, because these objects
-        // could be referencing it.
+        // 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();
 
-        self.page.?.deinit();
+        // 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.page = null;
 
         // clear netsurf memory arena.
@@ -136,47 +139,4 @@ pub const Session = struct {
     pub fn currentPage(self: *Session) ?*Page {
         return &(self.page orelse return null);
     }
-
-    pub const WaitResult = enum {
-        done,
-        no_page,
-        extra_socket,
-    };
-
-    pub fn wait(self: *Session, wait_ms: i32) WaitResult {
-        if (self.queued_navigation) |qn| {
-            // This was already aborted on the page, but it would be pretty
-            // bad if old requests went to the new page, so let's make double sure
-            self.browser.http_client.abort();
-
-            // Page.navigateFromWebAPI terminatedExecution. If we don't resume
-            // it before doing a shutdown we'll get an error.
-            self.executor.resumeExecution();
-            self.removePage();
-            self.queued_navigation = null;
-
-            const page = self.createPage() catch |err| {
-                log.err(.browser, "queued navigation page error", .{
-                    .err = err,
-                    .url = qn.url,
-                });
-                return .done;
-            };
-
-            page.navigate(qn.url, qn.opts) catch |err| {
-                log.err(.browser, "queued navigation error", .{ .err = err, .url = qn.url });
-                return .done;
-            };
-        }
-
-        if (self.page) |*page| {
-            return page.wait(wait_ms);
-        }
-        return .no_page;
-    }
-};
-
-const QueuedNavigation = struct {
-    url: []const u8,
-    opts: NavigateOpts,
 };

src/browser/storage/cookie.zig

@@ -4,15 +4,14 @@ 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;
 
 pub const LookupOpts = struct {
     request_time: ?i64 = null,
     origin_uri: ?*const Uri = null,
-    is_http: bool,
-    is_navigation: bool = true,
-    prefix: ?[]const u8 = null,
+    navigation: bool = true,
 };
 
 pub const Jar = struct {
@@ -33,13 +32,6 @@ 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,
@@ -67,40 +59,89 @@ 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 = 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 target_path = target_uri.path.percent_encoded;
+        const target_host = (target_uri.host orelse return error.InvalidURI).percent_encoded;
 
-        removeExpired(self, opts.request_time);
+        const same_site = try areSameSite(opts.origin_uri, target_host);
+        const is_secure = std.mem.eql(u8, target_uri.scheme, "https");
+
+        var i: usize = 0;
+        var cookies = self.cookies.items;
+        const navigation = opts.navigation;
+        const request_time = opts.request_time orelse std.time.timestamp();
 
         var first = true;
-        for (self.cookies.items) |*cookie| {
-            if (!cookie.appliesTo(&target, same_site, opts.is_navigation, opts.is_http)) {
+        while (i < cookies.len) {
+            const cookie = &cookies[i];
+
+            if (isCookieExpired(cookie, request_time)) {
+                cookie.deinit();
+                _ = self.cookies.swapRemove(i);
+                // don't increment i !
+                continue;
+            }
+            i += 1;
+
+            if (is_secure == false and cookie.secure) {
+                // secure cookie can only be sent over HTTPs
                 continue;
             }
 
+            if (same_site == false) {
+                // If we aren't on the "same site" (matching 2nd level domain
+                // taking into account public suffix list), then the cookie
+                // can only be sent if cookie.same_site == .none, or if
+                // we're navigating to (as opposed to, say, loading an image)
+                // and cookie.same_site == .lax
+                switch (cookie.same_site) {
+                    .strict => continue,
+                    .lax => if (navigation == false) continue,
+                    .none => {},
+                }
+            }
+
+            {
+                const domain = cookie.domain;
+                if (domain[0] == '.') {
+                    // When a Set-Cookie header has a Domain attribute
+                    // Then we will _always_ prefix it with a dot, extending its
+                    // availability to all subdomains (yes, setting the Domain
+                    // attributes EXPANDS the domains which the cookie will be
+                    // sent to, to always include all subdomains).
+                    if (std.mem.eql(u8, target_host, domain[1..]) == false and std.mem.endsWith(u8, target_host, domain) == false) {
+                        continue;
+                    }
+                } else if (std.mem.eql(u8, target_host, domain) == false) {
+                    // When the Domain attribute isn't specific, then the cookie
+                    // is only sent on an exact match.
+                    continue;
+                }
+            }
+
+            {
+                const path = cookie.path;
+                if (path[path.len - 1] == '/') {
+                    // If our cookie has a trailing slash, we can only match is
+                    // the target path is a perfix. I.e., if our path is
+                    // /doc/  we can only match /doc/*
+                    if (std.mem.startsWith(u8, target_path, path) == false) {
+                        continue;
+                    }
+                } else {
+                    // Our cookie path is something like /hello
+                    if (std.mem.startsWith(u8, target_path, path) == false) {
+                        // The target path has to either be /hello (it isn't)
+                        continue;
+                    } else if (target_path.len < path.len or (target_path.len > path.len and target_path[path.len] != '/')) {
+                        // Or it has to be something like /hello/* (it isn't)
+                        // it isn't!
+                        continue;
+                    }
+                }
+            }
             // we have a match!
             if (first) {
-                if (opts.prefix) |prefix| {
-                    try writer.writeAll(prefix);
-                }
                 first = false;
             } else {
                 try writer.writeAll("; ");
@@ -109,14 +150,54 @@ pub const Jar = struct {
         }
     }
 
-    pub fn populateFromResponse(self: *Jar, uri: *const Uri, set_cookie: []const u8) !void {
-        const c = Cookie.parse(self.allocator, uri, set_cookie) catch |err| {
-            log.warn(.web_api, "cookie parse failed", .{ .raw = set_cookie, .err = err });
-            return;
-        };
-
+    pub fn populateFromResponse(self: *Jar, uri: *const Uri, header: *const http.ResponseHeader) !void {
         const now = std.time.timestamp();
-        try self.add(c, now);
+        var it = header.iterate("set-cookie");
+        while (it.next()) |set_cookie| {
+            const c = Cookie.parse(self.allocator, uri, set_cookie) catch |err| {
+                log.warn(.web_api, "cookie parse failed", .{ .raw = set_cookie, .err = err });
+                continue;
+            };
+            try self.add(c, now);
+        }
+    }
+
+    fn writeCookie(cookie: *const Cookie, writer: anytype) !void {
+        if (cookie.name.len > 0) {
+            try writer.writeAll(cookie.name);
+            try writer.writeByte('=');
+        }
+        if (cookie.value.len > 0) {
+            try writer.writeAll(cookie.value);
+        }
+    }
+};
+
+pub const CookieList = struct {
+    _cookies: std.ArrayListUnmanaged(*const Cookie) = .{},
+
+    pub fn deinit(self: *CookieList, allocator: Allocator) void {
+        self._cookies.deinit(allocator);
+    }
+
+    pub fn cookies(self: *const CookieList) []*const Cookie {
+        return self._cookies.items;
+    }
+
+    pub fn len(self: *const CookieList) usize {
+        return self._cookies.items.len;
+    }
+
+    pub fn write(self: *const CookieList, writer: anytype) !void {
+        const all = self._cookies.items;
+        if (all.len == 0) {
+            return;
+        }
+        try writeCookie(all[0], writer);
+        for (all[1..]) |cookie| {
+            try writer.writeAll("; ");
+            try writeCookie(cookie, writer);
+        }
     }
 
     fn writeCookie(cookie: *const Cookie, writer: anytype) !void {
@@ -132,7 +213,7 @@ pub const Jar = struct {
 
 fn isCookieExpired(cookie: *const Cookie, now: i64) bool {
     const ce = cookie.expires orelse return false;
-    return ce <= @as(f64, @floatFromInt(now));
+    return ce <= now;
 }
 
 fn areCookiesEqual(a: *const Cookie, b: *const Cookie) bool {
@@ -175,12 +256,12 @@ pub const Cookie = struct {
     arena: ArenaAllocator,
     name: []const u8,
     value: []const u8,
-    domain: []const u8,
     path: []const u8,
-    expires: ?f64,
-    secure: bool = false,
-    http_only: bool = false,
-    same_site: SameSite = .none,
+    domain: []const u8,
+    expires: ?i64,
+    secure: bool,
+    http_only: bool,
+    same_site: SameSite,
 
     const SameSite = enum {
         strict,
@@ -211,6 +292,9 @@ 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) {
@@ -229,7 +313,7 @@ pub const Cookie = struct {
         var secure: ?bool = null;
         var max_age: ?i64 = null;
         var http_only: ?bool = null;
-        var expires: ?[]const u8 = null;
+        var expires: ?DateTime = null;
         var same_site: ?Cookie.SameSite = null;
 
         var it = std.mem.splitScalar(u8, rest, ';');
@@ -255,13 +339,37 @@ pub const Cookie = struct {
                 samesite,
             }, std.ascii.lowerString(&scrap, key_string)) orelse continue;
 
-            const value = if (sep == attribute.len) "" else trim(attribute[sep + 1 ..]);
+            var value = if (sep == attribute.len) "" else trim(attribute[sep + 1 ..]);
             switch (key) {
-                .path => path = value,
-                .domain => domain = value,
+                .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 and std.ascii.eqlIgnoreCase("localhost", value) == false) {
+                        // can't set a cookie for a TLD
+                        return error.InvalidDomain;
+                    }
+
+                    if (std.mem.endsWith(u8, host, value) == false) {
+                        return error.InvalidDomain;
+                    }
+                    domain = value;
+                },
                 .secure => secure = true,
                 .@"max-age" => max_age = std.fmt.parseInt(i64, value, 10) catch continue,
-                .expires => expires = value,
+                .expires => expires = DateTime.parse(value, .rfc822) catch continue,
                 .httponly => http_only = true,
                 .samesite => {
                     same_site = std.meta.stringToEnum(Cookie.SameSite, std.ascii.lowerString(&scrap, value)) orelse continue;
@@ -278,33 +386,27 @@ 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 = try parsePath(aa, uri, path);
-        const owned_domain = try parseDomain(aa, uri, domain);
+        const owned_path = if (path) |p|
+            try aa.dupe(u8, p)
+        else
+            try defaultPath(aa, uri.path.percent_encoded);
 
-        var normalized_expires: ?f64 = null;
+        const owned_domain = if (domain) |d| blk: {
+            const s = try aa.alloc(u8, d.len + 1);
+            s[0] = '.';
+            @memcpy(s[1..], d);
+            break :blk s;
+        } else blk: {
+            break :blk try aa.dupe(u8, host);
+        };
+
+        var normalized_expires: ?i64 = null;
         if (max_age) |ma| {
-            normalized_expires = @floatFromInt(std.time.timestamp() + ma);
+            normalized_expires = std.time.timestamp() + ma;
         } else {
             // max age takes priority over expires
-            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_ });
-                }
+            if (expires) |e| {
+                normalized_expires = e.sub(DateTime.now(), .seconds);
             }
         }
 
@@ -321,97 +423,6 @@ 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 aw = try std.Io.Writer.Allocating.initCapacity(arena, no_leading_dot.len + 1);
-                try aw.writer.writeByte('.');
-                try std.Uri.Component.percentEncode(&aw.writer, no_leading_dot, isHostChar);
-                const owned_domain = toLower(aw.written());
-
-                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 aw = try std.Io.Writer.Allocating.initCapacity(arena, str.len);
-                try std.Uri.Component.percentEncode(&aw.writer, str, isValidChar);
-                return aw.written(); // @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 ..];
@@ -428,77 +439,17 @@ 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, is_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 (is_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 "/";
     }
-};
-
-pub const PreparedUri = struct {
-    host: []const u8, // Percent encoded, lower case
-    path: []const u8, // Percent encoded
-    secure: bool, // True if scheme is https
-};
+    const last = std.mem.lastIndexOfScalar(u8, document_path[1..], '/') orelse {
+        return "/";
+    };
+    return try allocator.dupe(u8, document_path[0 .. last + 1]);
+}
 
 fn trim(str: []const u8) []const u8 {
     return std.mem.trim(u8, str, &std.ascii.whitespace);
@@ -512,13 +463,6 @@ 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 }{
@@ -588,7 +532,7 @@ test "Jar: add" {
 test "Jar: forRequest" {
     const expectCookies = struct {
         fn expect(expected: []const u8, jar: *Jar, target_uri: Uri, opts: LookupOpts) !void {
-            var arr: std.ArrayListUnmanaged(u8) = .empty;
+            var arr: std.ArrayListUnmanaged(u8) = .{};
             defer arr.deinit(testing.allocator);
             try jar.forRequest(&target_uri, arr.writer(testing.allocator), opts);
             try testing.expectEqual(expected, arr.items);
@@ -604,7 +548,7 @@ test "Jar: forRequest" {
 
     {
         // test with no cookies
-        try expectCookies("", &jar, test_uri, .{ .is_http = true });
+        try expectCookies("", &jar, test_uri, .{});
     }
 
     try jar.add(try Cookie.parse(testing.allocator, &test_uri, "global1=1"), now);
@@ -618,114 +562,97 @@ 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, .{ .is_http = true });
-    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .origin_uri = &test_uri, .is_navigation = false, .is_http = true });
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{});
+    try expectCookies("global1=1; global2=2", &jar, test_uri, .{ .origin_uri = &test_uri, .navigation = false });
 
     // We have a cookie where Domain=lightpanda.io
     // This should _not_ match xyxlightpanda.io
     try expectCookies("", &jar, try std.Uri.parse("http://anothersitelightpanda.io/"), .{
         .origin_uri = &test_uri,
-        .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/")),
-        .is_http = true,
-        .is_navigation = false,
+        .navigation = false,
     });
 
     // non-navigational cross domain, secure
     try expectCookies("sitenone=6", &jar, try std.Uri.parse("https://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://example.com/")),
-        .is_http = true,
-        .is_navigation = false,
+        .navigation = false,
     });
 
     // non-navigational same origin
     try expectCookies("global1=1; global2=2; sitelax=7; sitestrict=8", &jar, try std.Uri.parse("http://lightpanda.io/x/"), .{
         .origin_uri = &(try std.Uri.parse("https://lightpanda.io/")),
-        .is_http = true,
-        .is_navigation = false,
+        .navigation = false,
     });
 
     // exact domain match + suffix
     try expectCookies("global2=2; domain1=9", &jar, try std.Uri.parse("http://test.lightpanda.io/"), .{
         .origin_uri = &test_uri,
-        .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);
 
@@ -733,6 +660,40 @@ 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' });
@@ -855,8 +816,7 @@ 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 }, 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");
+    try expectAttribute(.{ .expires = 1918798080 - std.time.timestamp() }, null, "b;expires=Wed, 21 Oct 2030 07:28:00 GMT");
     // max-age has priority over expires
     try expectAttribute(.{ .expires = std.time.timestamp() + 10 }, null, "b;Max-Age=10; expires=Wed, 21 Oct 2030 07:28:00 GMT");
 }
@@ -876,7 +836,7 @@ test "Cookie: parse all" {
         .http_only = true,
         .secure = true,
         .domain = ".lightpanda.io",
-        .expires = @floatFromInt(std.time.timestamp() + 30),
+        .expires = std.time.timestamp() + 30,
     }, "https://lightpanda.io/cms/users", "user-id=9000; HttpOnly; Max-Age=30; Secure; path=/; Domain=lightpanda.io");
 
     try expectCookie(.{
@@ -887,7 +847,7 @@ test "Cookie: parse all" {
         .secure = false,
         .domain = ".localhost",
         .same_site = .lax,
-        .expires = @floatFromInt(std.time.timestamp() + 7200),
+        .expires = std.time.timestamp() + 7200,
     }, "http://localhost:8000/login", "app_session=123; Max-Age=7200; path=/; domain=localhost; httponly; samesite=lax");
 }
 
@@ -914,7 +874,7 @@ const ExpectedCookie = struct {
     value: []const u8,
     path: []const u8,
     domain: []const u8,
-    expires: ?f64 = null,
+    expires: ?i64 = null,
     secure: bool = false,
     http_only: bool = false,
     same_site: Cookie.SameSite = .lax,
@@ -933,7 +893,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.0);
+    try testing.expectDelta(expected.expires, cookie.expires, 2);
 }
 
 fn expectAttribute(expected: anytype, url: ?[]const u8, set_cookie: []const u8) !void {
@@ -943,10 +903,7 @@ 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")) {
-            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),
-            }
+            try testing.expectDelta(expected.expires, cookie.expires, 1);
         } else {
             try testing.expectEqual(@field(expected, f.name), @field(cookie, f.name));
         }

src/browser/storage/storage.zig

@@ -130,7 +130,7 @@ pub const Bottle = struct {
         return @intCast(self.map.count());
     }
 
-    pub fn _key(self: *const Bottle, idx: u32) ?[]const u8 {
+    pub fn _key(self: *Bottle, idx: u32) ?[]const u8 {
         if (idx >= self.map.count()) return null;
 
         var it = self.map.valueIterator();
@@ -142,7 +142,7 @@ pub const Bottle = struct {
         unreachable;
     }
 
-    pub fn _getItem(self: *const Bottle, k: []const u8) ?[]const u8 {
+    pub fn _getItem(self: *Bottle, k: []const u8) ?[]const u8 {
         return self.map.get(k);
     }
 
@@ -202,25 +202,35 @@ pub const Bottle = struct {
         //
         // So for now, we won't impement the feature.
     }
-
-    pub fn named_get(self: *const Bottle, name: []const u8, _: *bool) ?[]const u8 {
-        return self._getItem(name);
-    }
-
-    pub fn named_set(self: *Bottle, name: []const u8, value: []const u8, _: *bool) !void {
-        try self._setItem(name, value);
-    }
 };
 
 // Tests
 // -----
 
 const testing = @import("../../testing.zig");
-test "Browser: Storage.LocalStorage" {
-    try testing.htmlRunner("storage/local_storage.html");
+test "Browser.Storage.LocalStorage" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "localStorage.length", "0" },
+
+        .{ "localStorage.setItem('foo', 'bar')", "undefined" },
+        .{ "localStorage.length", "1" },
+        .{ "localStorage.getItem('foo')", "bar" },
+        .{ "localStorage.removeItem('foo')", "undefined" },
+        .{ "localStorage.length", "0" },
+
+        // .{ "localStorage['foo'] = 'bar'", "undefined" },
+        // .{ "localStorage['foo']", "bar" },
+        // .{ "localStorage.length", "1" },
+
+        .{ "localStorage.clear()", "undefined" },
+        .{ "localStorage.length", "0" },
+    }, .{});
 }
 
-test "Browser: Storage.Bottle" {
+test "storage bottle" {
     var bottle = Bottle.init(std.testing.allocator);
     defer bottle.deinit();
 

src/browser/url/url.zig

@@ -54,11 +54,6 @@ pub const URL = struct {
     uri: std.Uri,
     search_params: URLSearchParams,
 
-    pub const empty = URL{
-        .uri = .{ .scheme = "" },
-        .search_params = .{},
-    };
-
     const URLArg = union(enum) {
         url: *URL,
         element: *parser.ElementHTML,
@@ -89,17 +84,7 @@ pub const URL = struct {
             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);
     }
 
@@ -114,16 +99,16 @@ pub const URL = struct {
     }
 
     pub fn get_origin(self: *URL, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.arena);
-        try self.uri.writeToStream(&aw.writer, .{
+        var buf = std.ArrayList(u8).init(page.arena);
+        try self.uri.writeToStream(.{
             .scheme = true,
             .authentication = false,
             .authority = true,
             .path = false,
             .query = false,
             .fragment = false,
-        });
-        return aw.written();
+        }, buf.writer());
+        return buf.items;
     }
 
     // get_href returns the URL by writing all its components.
@@ -137,28 +122,28 @@ pub const URL = struct {
 
     // format the url with all its components.
     pub fn toString(self: *const URL, arena: Allocator) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(arena);
-        try self.uri.writeToStream(&aw.writer, .{
+        var buf: std.ArrayListUnmanaged(u8) = .empty;
+        try self.uri.writeToStream(.{
             .scheme = true,
             .authentication = true,
             .authority = true,
             .path = uriComponentNullStr(self.uri.path).len > 0,
-        });
+        }, buf.writer(arena));
 
         if (self.search_params.get_size() > 0) {
-            try aw.writer.writeByte('?');
-            try self.search_params.write(&aw.writer);
+            try buf.append(arena, '?');
+            try self.search_params.write(buf.writer(arena));
         }
 
         {
             const fragment = uriComponentNullStr(self.uri.fragment);
             if (fragment.len > 0) {
-                try aw.writer.writeByte('#');
-                try aw.writer.writeAll(fragment);
+                try buf.append(arena, '#');
+                try buf.appendSlice(arena, fragment);
             }
         }
 
-        return aw.written();
+        return buf.items;
     }
 
     pub fn get_protocol(self: *URL, page: *Page) ![]const u8 {
@@ -174,16 +159,17 @@ pub const URL = struct {
     }
 
     pub fn get_host(self: *URL, page: *Page) ![]const u8 {
-        var aw = std.Io.Writer.Allocating.init(page.arena);
-        try self.uri.writeToStream(&aw.writer, .{
+        var buf = std.ArrayList(u8).init(page.arena);
+
+        try self.uri.writeToStream(.{
             .scheme = false,
             .authentication = false,
             .authority = true,
             .path = false,
             .query = false,
             .fragment = false,
-        });
-        return aw.written();
+        }, buf.writer());
+        return buf.items;
     }
 
     pub fn get_hostname(self: *URL) []const u8 {
@@ -194,9 +180,9 @@ pub const URL = struct {
         const arena = page.arena;
         if (self.uri.port == null) return try arena.dupe(u8, "");
 
-        var aw = std.Io.Writer.Allocating.init(arena);
-        try aw.writer.printInt(self.uri.port.?, 10, .lower, .{});
-        return aw.written();
+        var buf = std.ArrayList(u8).init(arena);
+        try std.fmt.formatInt(self.uri.port.?, 10, .lower, .{}, buf.writer());
+        return buf.items;
     }
 
     pub fn get_pathname(self: *URL) []const u8 {
@@ -501,10 +487,155 @@ const ValueIterable = iterator.Iterable(kv.ValueIterator, "URLSearchParamsValueI
 const EntryIterable = iterator.Iterable(kv.EntryIterator, "URLSearchParamsEntryIterator");
 
 const testing = @import("../../testing.zig");
-test "Browser: URL" {
-    try testing.htmlRunner("url/url.html");
+test "Browser.URL" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var url = new URL('https://foo.bar/path?query#fragment')", "undefined" },
+        .{ "url.origin", "https://foo.bar" },
+        .{ "url.href", "https://foo.bar/path?query#fragment" },
+        .{ "url.protocol", "https:" },
+        .{ "url.username", "" },
+        .{ "url.password", "" },
+        .{ "url.host", "foo.bar" },
+        .{ "url.hostname", "foo.bar" },
+        .{ "url.port", "" },
+        .{ "url.pathname", "/path" },
+        .{ "url.search", "?query" },
+        .{ "url.hash", "#fragment" },
+        .{ "url.searchParams.get('query')", "" },
+
+        .{ "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(&.{
+        .{ "var url = new URL('https://foo.bar/path?a=~&b=%7E#fragment')", "undefined" },
+        .{ "url.searchParams.get('a')", "~" },
+        .{ "url.searchParams.get('b')", "~" },
+        .{ "url.searchParams.append('c', 'foo')", "undefined" },
+        .{ "url.searchParams.get('c')", "foo" },
+        .{ "url.searchParams.getAll('c').length", "1" },
+        .{ "url.searchParams.getAll('c')[0]", "foo" },
+        .{ "url.searchParams.size", "3" },
+
+        // search is dynamic
+        .{ "url.search", "?a=~&b=~&c=foo" },
+        // href is dynamic
+        .{ "url.href", "https://foo.bar/path?a=~&b=~&c=foo#fragment" },
+
+        .{ "url.searchParams.delete('c', 'foo')", "undefined" },
+        .{ "url.searchParams.get('c')", "null" },
+        .{ "url.searchParams.delete('a')", "undefined" },
+        .{ "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" },
+    }, .{});
 }
 
-test "Browser: URLSearchParams" {
-    try testing.htmlRunner("url/url_search_params.html");
+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/xhr/File.zig

@@ -1,40 +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");
-
-// https://w3c.github.io/FileAPI/#file-section
-const File = @This();
-
-// Very incomplete. The prototype for this is Blob, which we don't have.
-// This minimum "implementation" is added because some JavaScript code just
-// checks: if (x instanceof File) throw Error(...)
-pub fn constructor() File {
-    return .{};
-}
-
-const testing = @import("../../testing.zig");
-test "Browser.File" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let f = new File()", null },
-        .{ "f instanceof File", "true" },
-    }, .{});
-}