add set_pathname on URL

ws: increase max http message from 2kb to 4kb

.github/actions/install/action.yml

@@ -17,7 +17,7 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.1.24'
+    default: 'v0.1.27'
   v8:
     description: 'v8 version to install'
     required: false

.github/workflows/build.yml

@@ -60,7 +60,7 @@ jobs:
       ARCH: aarch64
       OS: linux
 
-    runs-on: ubuntu-24.04-arm
+    runs-on: ubuntu-22.04-arm
     timeout-minutes: 15
 
     steps:
@@ -76,7 +76,7 @@ jobs:
           arch: ${{env.ARCH}}
 
       - name: zig build
-        run: zig build --release=safe -Doptimize=ReleaseSafe -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+        run: zig build --release=safe -Doptimize=ReleaseSafe -Dcpu=generic -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
 
       - name: Rename binary
         run: mv zig-out/bin/lightpanda lightpanda-${{ env.ARCH }}-${{ env.OS }}
@@ -98,7 +98,7 @@ jobs:
       ARCH: aarch64
       OS: macos
 
-    runs-on: macos-latest
+    runs-on: macos-14
     timeout-minutes: 15
 
     steps:
@@ -136,7 +136,7 @@ jobs:
       ARCH: x86_64
       OS: macos
 
-    runs-on: macos-13
+    runs-on: macos-14
     timeout-minutes: 15
 
     steps:

.github/workflows/e2e-test.yml

@@ -45,6 +45,9 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
 
+    # Don't run the CI with draft PR.
+    if: github.event.pull_request.draft == false
+
     steps:
       - uses: actions/checkout@v4
         with:
@@ -65,56 +68,6 @@ 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
@@ -147,8 +100,10 @@ jobs:
     name: cdp-and-hyperfine-bench
     needs: zig-build-release
 
-    # Don't execute on PR
-    if: github.event_name != 'pull_request'
+    env:
+      MAX_MEMORY: 27000
+      MAX_AVG_DURATION: 23
+      LIGHTPANDA_DISABLE_TELEMETRY: true
 
     # use a self host runner.
     runs-on: lpd-bench-hetzner
@@ -185,6 +140,18 @@ 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) //'`

Dockerfile

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

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 through CDP (WIP)
+- Compatible with Playwright[^1], Puppeteer, chromedp through CDP
 
 Fast web automation for AI agents, LLM training, scraping and testing:
 
@@ -41,7 +41,8 @@ Due to the nature of Playwright, a script that works with the current version of
 
 ## Quick start
 
-### Install from the nightly builds
+### Install 
+**Install from the nightly builds**
 
 You can download the last binary from the [nightly
 builds](https://github.com/lightpanda-io/browser/releases/tag/nightly) for
@@ -64,6 +65,17 @@ chmod a+x ./lightpanda
 The Lightpanda browser is compatible to run on windows inside WSL. Follow the Linux instruction for installation from a WSL terminal.
 It is recommended to install clients like Puppeteer on the Windows host.
 
+**Install from Docker**
+
+Lightpanda provides [official Docker
+images](https://hub.docker.com/r/lightpanda/browser) for both Linux amd64 and
+arm64 architectures.
+The following command fetches the Docker image and starts a new container exposing Lightpanda's CDP server on port `9222`.
+The `--privileged` option is required because the browser requires `io_uring` syscalls which are blocked by default by Docker.
+```console
+docker run -d --name lightpanda -p 9222:9222 --privileged lightpanda/browser:nightly
+```
+
 ### Dump a URL
 
 ```console
@@ -124,21 +136,27 @@ By default, Lightpanda collects and sends usage telemetry. This can be disabled
 
 ## Status
 
-Lightpanda is still a work in progress and is currently at a Beta stage.
-
-:warning: You should expect most websites to fail or crash.
+Lightpanda is in Beta and currently a work in progress. Stability and coverage are improving and many websites now work.
+You may still encounter errors or crashes. Please open an issue with specifics if so.
 
 Here are the key features we have implemented:
 
+- [x] HTTP loader
 - [x] HTTP loader
 - [x] HTML parser and DOM tree (based on Netsurf libs)
 - [x] Javascript support (v8)
-- [x] Basic DOM APIs
+- [x] DOM APIs
 - [x] Ajax
   - [x] XHR API
-  - [x] Fetch API
+  - [x] Fetch API (polyfill)
 - [x] DOM dump
-- [x] Basic CDP/websockets server
+- [x] CDP/websockets server
+- [x] Click
+- [x] Input form
+- [x] Cookies
+- [x] Custom HTTP headers
+- [ ] Proxy support
+- [ ] Network interception 
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 

build.zig.zon

@@ -5,16 +5,16 @@
     .fingerprint = 0xda130f3af836cea0,
     .dependencies = .{
         .tls = .{
-            .url = "https://github.com/ianic/tls.zig/archive/b29a8b45fc59fc2d202769c4f54509bb9e17d0a2.tar.gz",
-            .hash = "tls-0.1.0-ER2e0uAxBQDm_TmSDdbiiyvAZoh4ejlDD4hW8Fl813xE",
+            .url = "https://github.com/ianic/tls.zig/archive/55845f755d9e2e821458ea55693f85c737cd0c7a.tar.gz",
+            .hash = "tls-0.1.0-ER2e0m43BQAshi8ixj1qf3w2u2lqKtXtkrxUJ4AGZDcl",
         },
         .tigerbeetle_io = .{
             .url = "https://github.com/lightpanda-io/tigerbeetle-io/archive/61d9652f1a957b7f4db723ea6aa0ce9635e840ce.tar.gz",
             .hash = "tigerbeetle_io-0.0.0-ViLgxpyRBAB5BMfIcj3KMXfbJzwARs9uSl8aRy2OXULd",
         },
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/1d25fcf3ced688adca3c7a95a138771e4ebba692.tar.gz",
-            .hash = "v8-0.0.0-xddH61eyAwDICIkLAkfQcxsX4TMCKY80QiSUgNBQqx-u",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/dd087771378ea854452bcb010309fa9ffe5a9cac.tar.gz",
+            .hash = "v8-0.0.0-xddH66e8AwBL3O_A8yWQYQIyfMbKHFNVQr_NqM6YjU11",
         },
         //.v8 = .{ .path = "../zig-v8-fork" },
         //.tigerbeetle_io = .{ .path = "../tigerbeetle-io" },

src/app.zig

@@ -3,7 +3,9 @@ const Allocator = std.mem.Allocator;
 
 const log = @import("log.zig");
 const Loop = @import("runtime/loop.zig").Loop;
-const HttpClient = @import("http/client.zig").Client;
+const http = @import("http/client.zig");
+const Platform = @import("runtime/js.zig").Platform;
+
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
 const Notification = @import("notification.zig").Notification;
 
@@ -12,9 +14,10 @@ const Notification = @import("notification.zig").Notification;
 pub const App = struct {
     loop: *Loop,
     config: Config,
+    platform: ?*const Platform,
     allocator: Allocator,
     telemetry: Telemetry,
-    http_client: HttpClient,
+    http_client: http.Client,
     app_dir_path: ?[]const u8,
     notification: *Notification,
 
@@ -27,8 +30,11 @@ pub const App = struct {
 
     pub const Config = struct {
         run_mode: RunMode,
+        platform: ?*const Platform = null,
         tls_verify_host: bool = true,
         http_proxy: ?std.Uri = null,
+        proxy_type: ?http.ProxyType = null,
+        proxy_auth: ?http.ProxyAuth = null,
     };
 
     pub fn init(allocator: Allocator, config: Config) !*App {
@@ -50,11 +56,14 @@ pub const App = struct {
             .loop = loop,
             .allocator = allocator,
             .telemetry = undefined,
+            .platform = config.platform,
             .app_dir_path = app_dir_path,
             .notification = notification,
-            .http_client = try HttpClient.init(allocator, .{
+            .http_client = try http.Client.init(allocator, loop, .{
                 .max_concurrent = 3,
                 .http_proxy = config.http_proxy,
+                .proxy_type = config.proxy_type,
+                .proxy_auth = config.proxy_auth,
                 .tls_verify_host = config.tls_verify_host,
             }),
             .config = config,

src/browser/State.zig

@@ -28,6 +28,7 @@
 
 const Env = @import("env.zig").Env;
 const parser = @import("netsurf.zig");
+const DataSet = @import("html/DataSet.zig");
 const CSSStyleDeclaration = @import("cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 // for HTMLScript (but probably needs to be added to more)
@@ -36,6 +37,7 @@ onerror: ?Env.Function = null,
 
 // for HTMLElement
 style: CSSStyleDeclaration = .empty,
+dataset: ?DataSet = null,
 
 // for html/document
 ready_state: ReadyState = .loading,
@@ -58,6 +60,8 @@ active_element: ?*parser.Element = null,
 // default (by returning selectedIndex == 0).
 explicit_index_set: bool = false,
 
+template_content: ?*parser.DocumentFragment = null,
+
 const ReadyState = enum {
     loading,
     interactive,

src/browser/browser.zig

@@ -27,6 +27,8 @@ const App = @import("../app.zig").App;
 const Session = @import("session.zig").Session;
 const Notification = @import("../notification.zig").Notification;
 
+const log = @import("../log.zig");
+
 const http = @import("../http/client.zig");
 
 // Browser is an instance of the browser.
@@ -47,7 +49,7 @@ pub const Browser = struct {
     pub fn init(app: *App) !Browser {
         const allocator = app.allocator;
 
-        const env = try Env.init(allocator, .{});
+        const env = try Env.init(allocator, app.platform, .{});
         errdefer env.deinit();
 
         const notification = try Notification.init(allocator, app.notification);
@@ -95,7 +97,14 @@ pub const Browser = struct {
     }
 
     pub fn runMicrotasks(self: *const Browser) void {
-        return self.env.runMicrotasks();
+        self.env.runMicrotasks();
+    }
+
+    pub fn runMessageLoop(self: *const Browser) void {
+        while (self.env.pumpMessageLoop()) {
+            log.debug(.browser, "pumpMessageLoop", .{});
+        }
+        self.env.runIdleTasks();
     }
 };
 

src/browser/console/console.zig

@@ -30,39 +30,39 @@ pub const Console = struct {
     timers: std.StringHashMapUnmanaged(u32) = .{},
     counts: std.StringHashMapUnmanaged(u32) = .{},
 
-    pub fn static_lp(values: []JsObject, page: *Page) !void {
+    pub fn _lp(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.fatal(.console, "lightpanda", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn static_log(values: []JsObject, page: *Page) !void {
+    pub fn _log(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.info(.console, "info", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn static_info(values: []JsObject, page: *Page) !void {
-        return static_log(values, page);
+    pub fn _info(values: []JsObject, page: *Page) !void {
+        return _log(values, page);
     }
 
-    pub fn static_debug(values: []JsObject, page: *Page) !void {
+    pub fn _debug(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.debug(.console, "debug", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn static_warn(values: []JsObject, page: *Page) !void {
+    pub fn _warn(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
         log.warn(.console, "warn", .{ .args = try serializeValues(values, page) });
     }
 
-    pub fn static_error(values: []JsObject, page: *Page) !void {
+    pub fn _error(values: []JsObject, page: *Page) !void {
         if (values.len == 0) {
             return;
         }
@@ -73,7 +73,7 @@ pub const Console = struct {
         });
     }
 
-    pub fn static_clear() void {}
+    pub fn _clear() void {}
 
     pub fn _count(self: *Console, label_: ?[]const u8, page: *Page) !void {
         const label = label_ orelse "default";
@@ -134,7 +134,7 @@ pub const Console = struct {
         log.warn(.console, "timer stop", .{ .label = label, .elapsed = elapsed - kv.value });
     }
 
-    pub fn static_assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
+    pub fn _assert(assertion: JsObject, values: []JsObject, page: *Page) !void {
         if (assertion.isTruthy()) {
             return;
         }

src/browser/crypto/crypto.zig

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

src/browser/css/css.zig

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

src/browser/dom/attribute.zig

@@ -15,7 +15,6 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
 const parser = @import("../netsurf.zig");
 
 const Node = @import("node.zig").Node;
@@ -47,7 +46,14 @@ pub const Attr = struct {
     }
 
     pub fn set_value(self: *parser.Attribute, v: []const u8) !?[]const u8 {
-        try parser.attributeSetValue(self, v);
+        if (try parser.attributeGetOwnerElement(self)) |el| {
+            // if possible, go through the element, as that triggers a
+            // DOMAttrModified event (which MutationObserver cares about)
+            const name = try parser.attributeGetName(self);
+            try parser.elementSetAttribute(el, name, v);
+        } else {
+            try parser.attributeSetValue(self, v);
+        }
         return v;
     }
 

src/browser/dom/document.zig

@@ -32,6 +32,7 @@ const css = @import("css.zig");
 const Element = @import("element.zig").Element;
 const ElementUnion = @import("element.zig").Union;
 const TreeWalker = @import("tree_walker.zig").TreeWalker;
+const Range = @import("range.zig").Range;
 
 const Env = @import("../env.zig").Env;
 
@@ -236,7 +237,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.arena, parser.documentToNode(self), selector);
+        const n = try css.querySelector(page.call_arena, parser.documentToNode(self), selector);
 
         if (n == null) return null;
 
@@ -290,6 +291,10 @@ pub const Document = struct {
         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);
+    }
 };
 
 const testing = @import("../../testing.zig");

src/browser/dom/document_fragment.zig

@@ -16,8 +16,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+const 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 Node = @import("node.zig").Node;
 
@@ -53,6 +57,20 @@ 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);
+    }
 };
 
 const testing = @import("../../testing.zig");
@@ -71,4 +89,23 @@ test "Browser.DOM.DocumentFragment" {
         .{ "dc1.isEqualNode(dc1)", "true" },
         .{ "dc1.isEqualNode(dc2)", "true" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let f = document.createDocumentFragment()", null },
+        .{ "let d = document.createElement('div');", null },
+        .{ "d.id = 'x';", null },
+        .{ "document.getElementById('x') == null;", "true" },
+
+        .{ "f.append(d);", null },
+        .{ "document.getElementById('x') == null;", "true" },
+
+        .{ "document.getElementsByTagName('body')[0].append(f.cloneNode(true));", null },
+        .{ "document.getElementById('x') != null;", "true" },
+
+        .{ "document.querySelector('.hello')", "null" },
+        .{ "document.querySelectorAll('.hello').length", "0" },
+
+        .{ "document.querySelector('#x').id", "x" },
+        .{ "document.querySelectorAll('#x')[0].id", "x" },
+    }, .{});
 }

src/browser/dom/dom.zig

@@ -23,12 +23,12 @@ 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 NodeFilter = @import("node_filter.zig").NodeFilter;
-const Performance = @import("performance.zig").Performance;
 const PerformanceObserver = @import("performance_observer.zig").PerformanceObserver;
 
 pub const Interfaces = .{
@@ -41,11 +41,13 @@ pub const Interfaces = .{
     NodeList.Interfaces,
     Node.Node,
     Node.Interfaces,
+    ResizeObserver.Interfaces,
     MutationObserver.Interfaces,
     IntersectionObserver.Interfaces,
     DOMParser,
     TreeWalker,
     NodeFilter,
-    Performance,
+    @import("performance.zig").Interfaces,
     PerformanceObserver,
+    @import("range.zig").Interfaces,
 };

src/browser/dom/element.zig

@@ -335,7 +335,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.arena, parser.elementToNode(self), selector);
+        const n = try css.querySelector(page.call_arena, parser.elementToNode(self), selector);
 
         if (n == null) return null;
 

src/browser/dom/event_target.zig

@@ -23,26 +23,42 @@ const Page = @import("../page.zig").Page;
 const EventHandler = @import("../events/event.zig").EventHandler;
 
 const DOMException = @import("exceptions.zig").DOMException;
-const Nod = @import("node.zig");
+const nod = @import("node.zig");
 
-// EventTarget interfaces
-pub const Union = Nod.Union;
+pub const Union = union(enum) {
+    node: nod.Union,
+    xhr: *@import("../xhr/xhr.zig").XMLHttpRequest,
+};
 
 // EventTarget implementation
 pub const EventTarget = struct {
     pub const Self = parser.EventTarget;
     pub const Exception = DOMException;
 
-    pub fn toInterface(et: *parser.EventTarget, page: *Page) !Union {
-        // Not all targets are *parser.Nodes. page.zig emits a "load" event
-        // where the target is a Window, which cannot be cast directly to a node.
-        // Ideally, we'd remove this duality. Failing that, we'll need to embed
-        // data into the *parser.EventTarget should we need this for other types.
-        // For now, for the Window, which is a singleton, we can do this:
+    pub fn toInterface(e: *parser.Event, et: *parser.EventTarget, page: *Page) !Union {
+        // libdom assumes that all event targets are libdom nodes. They are not.
+
+        // The window is a common non-node target, but it's easy to handle as
+        // its a singleton.
         if (@intFromPtr(et) == @intFromPtr(&page.window.base)) {
-            return .{ .Window = &page.window };
+            return .{ .node = .{ .Window = &page.window } };
+        }
+
+        // AbortSignal is another non-node target. It has a distinct usage though
+        // so we hijack the event internal type to identity if.
+        switch (try parser.eventGetInternalType(e)) {
+            .abort_signal => {
+                return .{ .node = .{ .AbortSignal = @fieldParentPtr("proto", @as(*parser.EventTargetTBase, @ptrCast(et))) } };
+            },
+            .xhr_event => {
+                const XMLHttpRequestEventTarget = @import("../xhr/event_target.zig").XMLHttpRequestEventTarget;
+                const base: *XMLHttpRequestEventTarget = @fieldParentPtr("base", @as(*parser.EventTargetTBase, @ptrCast(et)));
+                return .{ .xhr = @fieldParentPtr("proto", base) };
+            },
+            else => {
+                return .{ .node = try nod.Node.toInterface(@as(*parser.Node, @ptrCast(et))) };
+            },
         }
-        return Nod.Node.toInterface(@as(*parser.Node, @ptrCast(et)));
     }
 
     // JS funcs

src/browser/dom/exceptions.zig

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

src/browser/dom/mutation_observer.zig

@@ -22,6 +22,7 @@ const Allocator = std.mem.Allocator;
 const log = @import("../../log.zig");
 const parser = @import("../netsurf.zig");
 const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
 
 const Env = @import("../env.zig").Env;
 const NodeList = @import("nodelist.zig").NodeList;
@@ -35,25 +36,37 @@ const Walker = @import("../dom/walker.zig").WalkerChildren;
 
 // WEB IDL https://dom.spec.whatwg.org/#interface-mutationobserver
 pub const MutationObserver = struct {
+    loop: *Loop,
     cbk: Env.Function,
     arena: Allocator,
+    connected: bool,
+    scheduled: bool,
+    loop_node: Loop.CallbackNode,
 
     // List of records which were observed. When the call scope ends, we need to
     // execute our callback with it.
-    observed: std.ArrayListUnmanaged(*MutationRecord),
+    observed: std.ArrayListUnmanaged(MutationRecord),
 
     pub fn constructor(cbk: Env.Function, page: *Page) !MutationObserver {
         return .{
             .cbk = cbk,
+            .loop = page.loop,
             .observed = .{},
+            .connected = true,
+            .scheduled = false,
             .arena = page.arena,
+            .loop_node = .{ .func = callback },
         };
     }
 
-    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?MutationObserverInit) !void {
-        const options = options_ orelse MutationObserverInit{};
+    pub fn _observe(self: *MutationObserver, node: *parser.Node, options_: ?Options) !void {
+        const arena = self.arena;
+        var options = options_ orelse Options{};
+        if (options.attributeFilter.len > 0) {
+            options.attributeFilter = try arena.dupe([]const u8, options.attributeFilter);
+        }
 
-        const observer = try self.arena.create(Observer);
+        const observer = try arena.create(Observer);
         observer.* = .{
             .node = node,
             .options = options,
@@ -102,30 +115,34 @@ pub const MutationObserver = struct {
         }
     }
 
-    pub fn jsCallScopeEnd(self: *MutationObserver) void {
-        const record = self.observed.items;
-        if (record.len == 0) {
+    fn callback(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *MutationObserver = @fieldParentPtr("loop_node", node);
+        if (self.connected == false) {
+            self.scheduled = true;
+            return;
+        }
+        self.scheduled = false;
+
+        const records = self.observed.items;
+        if (records.len == 0) {
             return;
         }
 
         defer self.observed.clearRetainingCapacity();
 
-        for (record) |r| {
-            const records = [_]MutationRecord{r.*};
-            var result: Env.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",
-                });
-            };
-        }
+        var result: Env.Function.Result = undefined;
+        self.cbk.tryCall(void, .{records}, &result) catch {
+            log.debug(.user_script, "callback error", .{
+                .err = result.exception,
+                .stack = result.stack,
+                .source = "mutation observer",
+            });
+        };
     }
 
     // TODO
-    pub fn _disconnect(_: *MutationObserver) !void {
-        // TODO unregister listeners.
+    pub fn _disconnect(self: *MutationObserver) !void {
+        self.connected = false;
     }
 
     // TODO
@@ -182,31 +199,27 @@ pub const MutationRecord = struct {
     }
 };
 
-const MutationObserverInit = struct {
+const Options = struct {
     childList: bool = false,
     attributes: bool = false,
     characterData: bool = false,
     subtree: bool = false,
     attributeOldValue: bool = false,
     characterDataOldValue: bool = false,
-    // TODO
-    // attributeFilter: [][]const u8,
+    attributeFilter: [][]const u8 = &.{},
 
-    fn attr(self: MutationObserverInit) bool {
-        return self.attributes or self.attributeOldValue;
+    fn attr(self: Options) bool {
+        return self.attributes or self.attributeOldValue or self.attributeFilter.len > 0;
     }
 
-    fn cdata(self: MutationObserverInit) bool {
+    fn cdata(self: Options) bool {
         return self.characterData or self.characterDataOldValue;
     }
 };
 
 const Observer = struct {
     node: *parser.Node,
-    options: MutationObserverInit,
-
-    // record of the mutation, all observed changes in 1 call are batched
-    record: ?MutationRecord = null,
+    options: Options,
 
     // reference back to the MutationObserver so that we can access the arena
     // and batch the mutation records.
@@ -214,19 +227,34 @@ const Observer = struct {
 
     event_node: parser.EventNode,
 
-    fn appliesTo(o: *const Observer, target: *parser.Node) bool {
+    fn appliesTo(
+        self: *const Observer,
+        target: *parser.Node,
+        event_type: MutationEventType,
+        event: *parser.MutationEvent,
+    ) !bool {
+        if (event_type == .DOMAttrModified and self.options.attributeFilter.len > 0) {
+            const attribute_name = try parser.mutationEventAttributeName(event);
+            for (self.options.attributeFilter) |needle| blk: {
+                if (std.mem.eql(u8, attribute_name, needle)) {
+                    break :blk;
+                }
+            }
+            return false;
+        }
+
         // mutation on any target is always ok.
-        if (o.options.subtree) {
+        if (self.options.subtree) {
             return true;
         }
 
         // if target equals node, alway ok.
-        if (target == o.node) {
+        if (target == self.node) {
             return true;
         }
 
         // no subtree, no same target and no childlist, always noky.
-        if (!o.options.childList) {
+        if (!self.options.childList) {
             return false;
         }
 
@@ -234,7 +262,7 @@ const Observer = struct {
         const walker = Walker{};
         var next: ?*parser.Node = null;
         while (true) {
-            next = walker.get_next(o.node, next) catch break orelse break;
+            next = walker.get_next(self.node, next) catch break orelse break;
             if (next.? == target) {
                 return true;
             }
@@ -258,27 +286,22 @@ const Observer = struct {
             break :blk parser.eventTargetToNode(event_target);
         };
 
-        if (self.appliesTo(node) == false) {
-            return;
-        }
-
+        const mutation_event = parser.eventToMutationEvent(event);
         const event_type = blk: {
             const t = try parser.eventType(event);
             break :blk std.meta.stringToEnum(MutationEventType, t) orelse return;
         };
 
-        const arena = mutation_observer.arena;
-        if (self.record == null) {
-            self.record = .{
-                .target = self.node,
-                .type = event_type.recordType(),
-            };
-            try mutation_observer.observed.append(arena, &self.record.?);
+        if (try self.appliesTo(node, event_type, mutation_event) == false) {
+            return;
         }
 
-        var record = &self.record.?;
-        const mutation_event = parser.eventToMutationEvent(event);
+        var record = MutationRecord{
+            .target = self.node,
+            .type = event_type.recordType(),
+        };
 
+        const arena = mutation_observer.arena;
         switch (event_type) {
             .DOMAttrModified => {
                 record.attribute_name = parser.mutationEventAttributeName(mutation_event) catch null;
@@ -302,6 +325,13 @@ const Observer = struct {
                 }
             },
         }
+
+        try mutation_observer.observed.append(arena, record);
+
+        if (mutation_observer.scheduled == false) {
+            mutation_observer.scheduled = true;
+            _ = try mutation_observer.loop.timeout(0, &mutation_observer.loop_node);
+        }
     }
 };
 
@@ -341,10 +371,10 @@ test "Browser.DOM.MutationObserver" {
             \\ document.firstElementChild.setAttribute("foo", "bar");
             \\ // ignored b/c it's about another target.
             \\ document.firstElementChild.firstChild.setAttribute("foo", "bar");
-            \\ nb;
             ,
-            "1",
+            null,
         },
+        .{ "nb", "1" },
         .{ "mrs[0].type", "attributes" },
         .{ "mrs[0].target == document.firstElementChild", "true" },
         .{ "mrs[0].target.getAttribute('foo')", "bar" },
@@ -362,10 +392,10 @@ test "Browser.DOM.MutationObserver" {
             \\     nb2++;
             \\ }).observe(node, { characterData: true, characterDataOldValue: true });
             \\ node.data = "foo";
-            \\ nb2;
             ,
-            "1",
+            null,
         },
+        .{ "nb2", "1" },
         .{ "mrs2[0].type", "characterData" },
         .{ "mrs2[0].target == node", "true" },
         .{ "mrs2[0].target.data", "foo" },
@@ -383,7 +413,24 @@ test "Browser.DOM.MutationObserver" {
             \\ }).observe(document, { subtree:true,childList:true });
             \\ node.innerText = "2";
             ,
-            "2",
+            null,
         },
+        .{ "node.innerText", "a" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{
+            \\ var node = document.getElementById("para");
+            \\ var attrWatch = 0;
+            \\ new MutationObserver(() => {
+            \\     attrWatch++;
+            \\ }).observe(document, { attributeFilter: ["name"], subtree: true });
+            \\ node.setAttribute("id", "1");
+            ,
+            null,
+        },
+        .{ "attrWatch", "0" },
+        .{ "node.setAttribute('name', 'other');", null },
+        .{ "attrWatch", "1" },
     }, .{});
 }

src/browser/dom/namednodemap.zig

@@ -134,5 +134,7 @@ test "Browser.DOM.NamedNodeMap" {
         .{ "a['id'].name", "id" },
         .{ "a['id'].value", "content" },
         .{ "a['other']", "undefined" },
+        .{ "a[0].value = 'abc123'", null },
+        .{ "a[0].value", "abc123" },
     }, .{});
 }

src/browser/dom/performance.zig

@@ -20,6 +20,19 @@ const std = @import("std");
 
 const parser = @import("../netsurf.zig");
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+
+pub const Interfaces = .{
+    Performance,
+    PerformanceEntry,
+    PerformanceMark,
+};
+
+const MarkOptions = struct {
+    detail: ?Env.JsObject = null,
+    start_time: ?f64 = null,
+};
 
 // https://developer.mozilla.org/en-US/docs/Web/API/Performance
 pub const Performance = struct {
@@ -52,6 +65,93 @@ pub const Performance = struct {
     pub fn _now(self: *Performance) f64 {
         return limitedResolutionMs(self.time_origin.read());
     }
+
+    pub fn _mark(_: *Performance, name: []const u8, _options: ?MarkOptions, page: *Page) !PerformanceMark {
+        const mark: PerformanceMark = try .constructor(name, _options, page);
+        // TODO: Should store this in an entries list
+        return mark;
+    }
+};
+
+// 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,
+
+    pub fn constructor(name: []const u8, _options: ?MarkOptions, page: *Page) !PerformanceMark {
+        const perf = &page.window.performance;
+
+        const options = _options orelse MarkOptions{};
+        const start_time = options.start_time orelse perf._now();
+        const detail = if (options.detail) |d| try d.persist() else null;
+
+        if (start_time < 0.0) {
+            return error.TypeError;
+        }
+
+        const 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");
@@ -62,7 +162,7 @@ test "Performance: 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);
+    try testing.expectDelta(@rem(time_origin * std.time.us_per_ms, 100.0), 0.0, 0.2);
 }
 
 test "Performance: now" {
@@ -85,3 +185,19 @@ test "Performance: now" {
     // Check resolution
     try testing.expectDelta(@rem(after * std.time.us_per_ms, 100.0), 0.0, 0.1);
 }
+
+test "Browser.Performance.Mark" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let performance = window.performance", "undefined" },
+        .{ "performance instanceof Performance", "true" },
+        .{ "let mark = performance.mark(\"start\")", "undefined" },
+        .{ "mark instanceof PerformanceMark", "true" },
+        .{ "mark.name", "start" },
+        .{ "mark.entryType", "mark" },
+        .{ "mark.duration", "0" },
+        .{ "mark.detail", "null" },
+    }, .{});
+}

src/browser/dom/range.zig

@@ -0,0 +1,178 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const parser = @import("../netsurf.zig");
+const Page = @import("../page.zig").Page;
+
+const NodeUnion = @import("node.zig").Union;
+const Node = @import("node.zig").Node;
+
+pub const Interfaces = .{
+    AbstractRange,
+    Range,
+};
+
+pub const AbstractRange = struct {
+    collapsed: bool,
+    end_container: *parser.Node,
+    end_offset: i32,
+    start_container: *parser.Node,
+    start_offset: i32,
+
+    pub fn updateCollapsed(self: *AbstractRange) void {
+        // TODO: Eventually, compare properly.
+        self.collapsed = false;
+    }
+
+    pub fn get_collapsed(self: *const AbstractRange) bool {
+        return self.collapsed;
+    }
+
+    pub fn get_endContainer(self: *const AbstractRange) !NodeUnion {
+        return Node.toInterface(self.end_container);
+    }
+
+    pub fn get_endOffset(self: *const AbstractRange) i32 {
+        return self.end_offset;
+    }
+
+    pub fn get_startContainer(self: *const AbstractRange) !NodeUnion {
+        return Node.toInterface(self.start_container);
+    }
+
+    pub fn get_startOffset(self: *const AbstractRange) i32 {
+        return self.start_offset;
+    }
+};
+
+pub const Range = struct {
+    pub const prototype = *AbstractRange;
+
+    proto: AbstractRange,
+
+    // The Range() constructor returns a newly created Range object whose start
+    // and end is the global Document object.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Range/Range
+    pub fn constructor(page: *Page) Range {
+        const proto: AbstractRange = .{
+            .collapsed = true,
+            .end_container = parser.documentHTMLToNode(page.window.document),
+            .end_offset = 0,
+            .start_container = parser.documentHTMLToNode(page.window.document),
+            .start_offset = 0,
+        };
+
+        return .{ .proto = proto };
+    }
+
+    pub fn _setStart(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.start_container = node;
+        self.proto.start_offset = offset;
+        self.proto.updateCollapsed();
+    }
+
+    pub fn _setEnd(self: *Range, node: *parser.Node, offset: i32) void {
+        self.proto.end_container = node;
+        self.proto.end_offset = offset;
+        self.proto.updateCollapsed();
+    }
+
+    pub fn _createContextualFragment(_: *Range, fragment: []const u8, page: *Page) !*parser.DocumentFragment {
+        const document_html = page.window.document;
+        const document = parser.documentHTMLToDocument(document_html);
+        const doc_frag = try parser.documentParseFragmentFromStr(document, fragment);
+        return doc_frag;
+    }
+
+    pub fn _selectNodeContents(self: *Range, node: *parser.Node) !void {
+        self.proto.start_container = node;
+        self.proto.start_offset = 0;
+        self.proto.end_container = node;
+
+        // Set end_offset
+        switch (try parser.nodeType(node)) {
+            .text, .cdata_section, .comment, .processing_instruction => {
+                // For text-like nodes, end_offset should be the length of the text data
+                if (try parser.nodeValue(node)) |text_data| {
+                    self.proto.end_offset = @intCast(text_data.len);
+                } else {
+                    self.proto.end_offset = 0;
+                }
+            },
+            else => {
+                // For element and other nodes, end_offset is the number of children
+                const child_nodes = try parser.nodeGetChildNodes(node);
+                const child_count = try parser.nodeListLength(child_nodes);
+                self.proto.end_offset = @intCast(child_count);
+            },
+        }
+
+        self.proto.updateCollapsed();
+    }
+
+    // The Range.detach() method does nothing. It used to disable the Range
+    // object and enable the browser to release associated resources. The
+    // method has been kept for compatibility.
+    // https://developer.mozilla.org/en-US/docs/Web/API/Range/detach
+    pub fn _detach(_: *Range) void {}
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.Range" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        // Test Range constructor
+        .{ "let range = new Range()", "undefined" },
+        .{ "range instanceof Range", "true" },
+        .{ "range instanceof AbstractRange", "true" },
+
+        // Test initial state - collapsed range
+        .{ "range.collapsed", "true" },
+        .{ "range.startOffset", "0" },
+        .{ "range.endOffset", "0" },
+        .{ "range.startContainer instanceof HTMLDocument", "true" },
+        .{ "range.endContainer instanceof HTMLDocument", "true" },
+
+        // Test document.createRange()
+        .{ "let docRange = document.createRange()", "undefined" },
+        .{ "docRange instanceof Range", "true" },
+        .{ "docRange.collapsed", "true" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "const container = document.getElementById('content');", null },
+
+        // Test text range
+        .{ "const commentNode = container.childNodes[7];", null },
+        .{ "commentNode.nodeValue", "comment" },
+        .{ "const textRange = document.createRange();", null },
+        .{ "textRange.selectNodeContents(commentNode)", "undefined" },
+        .{ "textRange.startOffset", "0" },
+        .{ "textRange.endOffset", "7" }, // length of `comment`
+
+        // Test Node range
+        .{ "const nodeRange = document.createRange();", null },
+        .{ "nodeRange.selectNodeContents(container)", "undefined" },
+        .{ "nodeRange.startOffset", "0" },
+        .{ "nodeRange.endOffset", "9" }, // length of container.childNodes
+    }, .{});
+}

src/browser/dom/resize_observer.zig

@@ -0,0 +1,54 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+
+pub const Interfaces = .{
+    ResizeObserver,
+};
+
+// WEB IDL https://drafts.csswg.org/resize-observer/#resize-observer-interface
+pub const ResizeObserver = struct {
+    pub fn constructor(cbk: Env.Function) ResizeObserver {
+        _ = cbk;
+        return .{};
+    }
+
+    pub fn _observe(self: *const ResizeObserver, element: *parser.Element, options_: ?Options) void {
+        _ = self;
+        _ = element;
+        _ = options_;
+        return;
+    }
+
+    pub fn _unobserve(self: *const ResizeObserver, element: *parser.Element) void {
+        _ = self;
+        _ = element;
+        return;
+    }
+
+    // TODO
+    pub fn _disconnect(self: *ResizeObserver) void {
+        _ = self;
+    }
+};
+
+const Options = struct {
+    box: []const u8,
+};

src/browser/dump.zig

@@ -82,9 +82,13 @@ pub fn writeNode(node: *parser.Node, writer: anytype) anyerror!void {
             // void elements can't have any content.
             if (try isVoid(parser.nodeToElement(node))) return;
 
-            // write the children
-            // TODO avoid recursion
-            try writeChildren(node, writer);
+            if (try parser.elementHTMLGetTagType(@ptrCast(node)) == .script) {
+                try writer.writeAll(try parser.nodeTextContent(node) orelse "");
+            } else {
+                // write the children
+                // TODO avoid recursion
+                try writeChildren(node, writer);
+            }
 
             // close the tag
             try writer.writeAll("</");
@@ -211,6 +215,11 @@ test "dump.writeHTML" {
         \\</head><body>9000</body></html>
         \\
     , "<html><title>It's over what?</title><meta name=a value=\"b\">\n<body>9000");
+
+    try testWriteHTML(
+        "<p>hi</p><script>alert(power > 9000)</script>",
+        "<p>hi</p><script>alert(power > 9000)</script>",
+    );
 }
 
 fn testWriteHTML(comptime expected_body: []const u8, src: []const u8) !void {

src/browser/env.zig

@@ -22,6 +22,7 @@ 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("dom/dom.zig").Interfaces,
         @import("encoding/text_encoder.zig").Interfaces,

src/browser/events/event.zig

@@ -27,18 +27,15 @@ const Page = @import("../page.zig").Page;
 const DOMException = @import("../dom/exceptions.zig").DOMException;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const EventTargetUnion = @import("../dom/event_target.zig").Union;
+const AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
 const MouseEvent = @import("mouse_event.zig").MouseEvent;
+const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
 
 // Event interfaces
-pub const Interfaces = .{
-    Event,
-    CustomEvent,
-    ProgressEvent,
-    MouseEvent,
-};
+pub const Interfaces = .{ Event, CustomEvent, ProgressEvent, MouseEvent, ErrorEvent };
 
 pub const Union = generate.Union(Interfaces);
 
@@ -58,10 +55,11 @@ pub const Event = struct {
 
     pub fn toInterface(evt: *parser.Event) !Union {
         return switch (try parser.eventGetInternalType(evt)) {
-            .event => .{ .Event = evt },
+            .event, .abort_signal, .xhr_event => .{ .Event = evt },
             .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
             .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
             .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
+            .error_event => .{ .ErrorEvent = @as(*ErrorEvent, @ptrCast(evt)).* },
         };
     }
 
@@ -80,13 +78,13 @@ pub const Event = struct {
     pub fn get_target(self: *parser.Event, page: *Page) !?EventTargetUnion {
         const et = try parser.eventTarget(self);
         if (et == null) return null;
-        return try EventTarget.toInterface(et.?, page);
+        return try EventTarget.toInterface(self, et.?, page);
     }
 
     pub fn get_currentTarget(self: *parser.Event, page: *Page) !?EventTargetUnion {
         const et = try parser.eventCurrentTarget(self);
         if (et == null) return null;
-        return try EventTarget.toInterface(et.?, page);
+        return try EventTarget.toInterface(self, et.?, page);
     }
 
     pub fn get_eventPhase(self: *parser.Event) !u8 {
@@ -178,7 +176,7 @@ pub const EventHandler = struct {
             // that the listener won't call preventDefault() and thus can safely
             // run the default as needed).
             passive: ?bool,
-            signal: ?bool, // currently does nothing
+            signal: ?*AbortSignal, // currently does nothing
         };
     };
 
@@ -191,18 +189,14 @@ 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;
                 },
             }
@@ -210,6 +204,28 @@ pub const EventHandler = struct {
 
         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;
@@ -265,6 +281,50 @@ 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" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
@@ -370,5 +430,18 @@ test "Browser.Event" {
         .{ "document.dispatchEvent(new Event('count'))", "true" },
         .{ "document.dispatchEvent(new Event('count'))", "true" },
         .{ "nb", "1" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "nb = 0; function cbk(event) { nb ++; }", null },
+        .{ "let ac = new AbortController()", null },
+        .{ "document.addEventListener('count', cbk, {signal: ac.signal})", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "ac.abort()", null },
+        .{ "document.dispatchEvent(new Event('count'))", "true" },
+        .{ "nb", "2" },
+        .{ "document.removeEventListener('count', cbk)", "undefined" },
     }, .{});
 }

src/browser/html/AbortController.zig

@@ -0,0 +1,188 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const log = @import("../../log.zig");
+const parser = @import("../netsurf.zig");
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const Loop = @import("../../runtime/loop.zig").Loop;
+const EventTarget = @import("../dom/event_target.zig").EventTarget;
+
+pub const Interfaces = .{
+    AbortController,
+    AbortSignal,
+};
+
+const AbortController = @This();
+
+signal: *AbortSignal,
+
+pub fn constructor(page: *Page) !AbortController {
+    // Why do we allocate this rather than storing directly in the struct?
+    // https://github.com/lightpanda-io/project/discussions/165
+    const signal = try page.arena.create(AbortSignal);
+    signal.* = .init;
+
+    return .{
+        .signal = signal,
+    };
+}
+
+pub fn get_signal(self: *AbortController) *AbortSignal {
+    return self.signal;
+}
+
+pub fn _abort(self: *AbortController, reason_: ?[]const u8) !void {
+    return self.signal.abort(reason_);
+}
+
+pub const AbortSignal = struct {
+    const DEFAULT_REASON = "AbortError";
+
+    pub const prototype = *EventTarget;
+    proto: parser.EventTargetTBase = .{},
+
+    aborted: bool,
+    reason: ?[]const u8,
+
+    pub const init: AbortSignal = .{
+        .proto = .{},
+        .reason = null,
+        .aborted = false,
+    };
+
+    pub fn static_abort(reason_: ?[]const u8) AbortSignal {
+        return .{
+            .aborted = true,
+            .reason = reason_ orelse DEFAULT_REASON,
+        };
+    }
+
+    pub fn static_timeout(delay: u32, page: *Page) !*AbortSignal {
+        const callback = try page.arena.create(TimeoutCallback);
+        callback.* = .{
+            .signal = .init,
+            .node = .{ .func = TimeoutCallback.run },
+        };
+
+        const delay_ms: u63 = @as(u63, delay) * std.time.ns_per_ms;
+        _ = try page.loop.timeout(delay_ms, &callback.node);
+        return &callback.signal;
+    }
+
+    pub fn get_aborted(self: *const AbortSignal) bool {
+        return self.aborted;
+    }
+
+    fn abort(self: *AbortSignal, reason_: ?[]const u8) !void {
+        self.aborted = true;
+        self.reason = reason_ orelse DEFAULT_REASON;
+
+        const abort_event = try parser.eventCreate();
+        try parser.eventSetInternalType(abort_event, .abort_signal);
+
+        defer parser.eventDestroy(abort_event);
+        try parser.eventInit(abort_event, "abort", .{});
+        _ = try parser.eventTargetDispatchEvent(
+            parser.toEventTarget(AbortSignal, self),
+            abort_event,
+        );
+    }
+
+    const Reason = union(enum) {
+        reason: []const u8,
+        undefined: void,
+    };
+    pub fn get_reason(self: *const AbortSignal) Reason {
+        if (self.reason) |r| {
+            return .{ .reason = r };
+        }
+        return .{ .undefined = {} };
+    }
+
+    const ThrowIfAborted = union(enum) {
+        exception: Env.Exception,
+        undefined: void,
+    };
+    pub fn _throwIfAborted(self: *const AbortSignal, page: *Page) ThrowIfAborted {
+        if (self.aborted) {
+            const ex = page.main_context.throw(self.reason orelse DEFAULT_REASON);
+            return .{ .exception = ex };
+        }
+        return .{ .undefined = {} };
+    }
+};
+
+const TimeoutCallback = struct {
+    signal: AbortSignal,
+
+    // This is the internal data that the event loop tracks. We'll get this
+    // back in run and, from it, can get our TimeoutCallback instance
+    node: Loop.CallbackNode = undefined,
+
+    fn run(node: *Loop.CallbackNode, _: *?u63) void {
+        const self: *TimeoutCallback = @fieldParentPtr("node", node);
+        self.signal.abort("TimeoutError") catch |err| {
+            log.warn(.app, "abort signal timeout", .{ .err = err });
+        };
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.AbortController" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "var called = 0", null },
+        .{ "var a1 = new AbortController()", null },
+        .{ "var s1 = a1.signal", null },
+        .{ "s1.throwIfAborted()", "undefined" },
+        .{ "s1.reason", "undefined" },
+        .{ "var target;", null },
+        .{
+            \\ s1.addEventListener('abort', (e) => {
+            \\   called += 1;
+            \\   target = e.target;
+            \\
+            \\ });
+            ,
+            null,
+        },
+        .{ "a1.abort()", null },
+        .{ "s1.aborted", "true" },
+        .{ "target == s1", "true" },
+        .{ "s1.reason", "AbortError" },
+        .{ "called", "1" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var s2 = AbortSignal.abort('over 9000')", null },
+        .{ "s2.aborted", "true" },
+        .{ "s2.reason", "over 9000" },
+        .{ "AbortSignal.abort().reason", "AbortError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "var s3 = AbortSignal.timeout(10)", null },
+        .{ "s3.aborted", "true" },
+        .{ "s3.reason", "TimeoutError" },
+        .{ "try { s3.throwIfAborted() } catch (e) { e }", "Error: TimeoutError" },
+    }, .{});
+}

src/browser/html/DataSet.zig

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

src/browser/html/document.zig

@@ -233,19 +233,23 @@ 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.
-    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;
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) !?ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) orelse return null;
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
         return try Element.toInterface(element);
     }
 
     // Returns an array of all elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost to the bottommost box of the viewport.
-    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 &.{};
+    // While x and y should be f32, here we take i32 since that's what our
+    // "renderer" uses. By specifying i32 here, rather than f32 and doing the
+    // conversion ourself, we rely on v8's type conversion which is both more
+    // flexible (e.g. handles NaN) and will be more consistent with a browser.
+    pub fn _elementsFromPoint(_: *parser.DocumentHTML, x: i32, y: i32, page: *Page) ![]ElementUnion {
+        const element = page.renderer.getElementAtPosition(x, y) orelse return &.{};
         // TODO if pointer-events set to none the underlying element should be returned (parser.documentGetDocumentElement(self.document);?)
 
         var list: std.ArrayListUnmanaged(ElementUnion) = .empty;

src/browser/html/elements.zig

@@ -27,6 +27,7 @@ const urlStitch = @import("../../url.zig").URL.stitch;
 const URL = @import("../url/url.zig").URL;
 const Node = @import("../dom/node.zig").Node;
 const Element = @import("../dom/element.zig").Element;
+const DataSet = @import("DataSet.zig");
 
 const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
@@ -122,6 +123,15 @@ 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 "";
@@ -261,8 +271,18 @@ pub const HTMLAnchorElement = struct {
         return try parser.nodeSetTextContent(parser.anchorToNode(self), v);
     }
 
-    inline fn url(self: *parser.Anchor, page: *Page) !URL {
-        return URL.constructor(.{ .element = @alignCast(@ptrCast(self)) }, null, page); // TODO inject base url
+    fn url(self: *parser.Anchor, page: *Page) !URL {
+        // Although the URL.constructor union accepts an .{.element = X}, we
+        // can't use this here because the behavior is different.
+        //    URL.constructor(document.createElement('a')
+        // should fail (a.href isn't a valid URL)
+        // But
+        //     document.createElement('a').host
+        // should not fail, it should return an empty string
+        if (try parser.elementGetAttribute(@alignCast(@ptrCast(self)), "href")) |href| {
+            return URL.constructor(.{ .string = href }, null, page); // TODO inject base url
+        }
+        return .empty;
     }
 
     // TODO return a disposable string
@@ -875,6 +895,15 @@ pub const HTMLLinkElement = struct {
     pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
         return constructHtmlElement(page, js_this);
     }
+
+    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 {
@@ -1265,6 +1294,16 @@ pub const HTMLTemplateElement = struct {
     pub fn constructor(page: *Page, js_this: Env.JsThis) !*parser.Element {
         return constructHtmlElement(page, js_this);
     }
+
+    pub fn get_content(self: *parser.Template, page: *Page) !*parser.DocumentFragment {
+        const state = try page.getOrCreateNodeState(@alignCast(@ptrCast(self)));
+        if (state.template_content) |tc| {
+            return tc;
+        }
+        const tc = try parser.documentCreateDocumentFragment(@ptrCast(page.window.document));
+        state.template_content = tc;
+        return tc;
+    }
 };
 
 pub const HTMLTextAreaElement = struct {
@@ -1539,6 +1578,8 @@ 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" },
     }, .{});
@@ -1549,8 +1590,26 @@ 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.HtmlInputElement.propeties" {
+
+test "Browser.HTML.Element.DataSet" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=x data-power='over 9000' data-empty data-some-long-key=ok></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{ .{ "let div = document.getElementById('x')", null }, .{ "div.dataset.nope", "undefined" }, .{ "div.dataset.power", "over 9000" }, .{ "div.dataset.empty", "" }, .{ "div.dataset.someLongKey", "ok" }, .{ "delete div.dataset.power", "true" }, .{ "div.dataset.power", "undefined" } }, .{});
+}
+
+test "Browser.HTML.HtmlInputElement.properties" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{ .url = "https://lightpanda.io/noslashattheend" });
     defer runner.deinit();
     var alloc = std.heap.ArenaAllocator.init(runner.app.allocator);
@@ -1634,7 +1693,8 @@ test "Browser.HTML.HtmlInputElement.propeties" {
         .{ "input_value.value", "mango" }, // Still mango
     }, .{});
 }
-test "Browser.HTML.HtmlInputElement.propeties.form" {
+
+test "Browser.HTML.HtmlInputElement.properties.form" {
     var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
         \\ <form action="test.php" target="_blank">
         \\   <p>
@@ -1652,6 +1712,21 @@ test "Browser.HTML.HtmlInputElement.propeties.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" },
+    }, .{});
+}
+
 const Check = struct {
     input: []const u8,
     expected: ?[]const u8 = null, // Needed when input != expected

src/browser/html/error_event.zig

@@ -0,0 +1,114 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+const Env = @import("../env.zig").Env;
+const parser = @import("../netsurf.zig");
+
+// https://developer.mozilla.org/en-US/docs/Web/API/ErrorEvent
+pub const ErrorEvent = struct {
+    pub const prototype = *parser.Event;
+    pub const union_make_copy = true;
+
+    proto: parser.Event,
+    message: []const u8,
+    filename: []const u8,
+    lineno: i32,
+    colno: i32,
+    @"error": ?Env.JsObject,
+
+    const ErrorEventInit = struct {
+        message: []const u8 = "",
+        filename: []const u8 = "",
+        lineno: i32 = 0,
+        colno: i32 = 0,
+        @"error": ?Env.JsObject = null,
+    };
+
+    pub fn constructor(event_type: []const u8, opts: ?ErrorEventInit) !ErrorEvent {
+        const event = try parser.eventCreate();
+        defer parser.eventDestroy(event);
+        try parser.eventInit(event, event_type, .{});
+        try parser.eventSetInternalType(event, .event);
+
+        const o = opts orelse ErrorEventInit{};
+
+        return .{
+            .proto = event.*,
+            .message = o.message,
+            .filename = o.filename,
+            .lineno = o.lineno,
+            .colno = o.colno,
+            .@"error" = if (o.@"error") |e| try e.persist() else null,
+        };
+    }
+
+    pub fn get_message(self: *const ErrorEvent) []const u8 {
+        return self.message;
+    }
+
+    pub fn get_filename(self: *const ErrorEvent) []const u8 {
+        return self.filename;
+    }
+
+    pub fn get_lineno(self: *const ErrorEvent) i32 {
+        return self.lineno;
+    }
+
+    pub fn get_colno(self: *const ErrorEvent) i32 {
+        return self.colno;
+    }
+
+    pub fn get_error(self: *const ErrorEvent) Env.UndefinedOr(Env.JsObject) {
+        if (self.@"error") |e| {
+            return .{ .value = e };
+        }
+        return .undefined;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser.HTML.ErrorEvent" {
+    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=c></div>" });
+    defer runner.deinit();
+
+    try runner.testCases(&.{
+        .{ "let e1 = new ErrorEvent('err1')", null },
+        .{ "e1.message", "" },
+        .{ "e1.filename", "" },
+        .{ "e1.lineno", "0" },
+        .{ "e1.colno", "0" },
+        .{ "e1.error", "undefined" },
+
+        .{
+            \\ let e2 = new ErrorEvent('err1', {
+            \\    message: 'm1',
+            \\    filename: 'fx19',
+            \\    lineno: 443,
+            \\    colno: 8999,
+            \\    error: 'under 9000!',
+            \\
+            \\})
+            ,
+            null,
+        },
+        .{ "e2.message", "m1" },
+        .{ "e2.filename", "fx19" },
+        .{ "e2.lineno", "443" },
+        .{ "e2.colno", "8999" },
+        .{ "e2.error", "under 9000!" },
+    }, .{});
+}

src/browser/html/html.zig

@@ -36,5 +36,8 @@ pub const Interfaces = .{
     History,
     Location,
     MediaQueryList,
+    @import("DataSet.zig"),
     @import("screen.zig").Interfaces,
+    @import("error_event.zig").ErrorEvent,
+    @import("AbortController.zig").Interfaces,
 };

src/browser/html/window.zig

@@ -35,6 +35,7 @@ const Performance = @import("../dom/performance.zig").Performance;
 const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 const CustomElementRegistry = @import("../webcomponents/custom_element_registry.zig").CustomElementRegistry;
 const Screen = @import("screen.zig").Screen;
+const Css = @import("../css/css.zig").Css;
 
 const storage = @import("../storage/storage.zig");
 
@@ -62,6 +63,7 @@ pub const Window = struct {
     performance: Performance,
     custom_elements: CustomElementRegistry = .{},
     screen: Screen = .{},
+    css: Css = .{},
 
     pub fn create(target: ?[]const u8, navigator: ?Navigator) !Window {
         var fbs = std.io.fixedBufferStream("");
@@ -175,6 +177,10 @@ pub const Window = struct {
         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 });
     }
@@ -211,6 +217,21 @@ 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 {
         repeat: bool = false,
         animation_frame: bool = false,
@@ -277,9 +298,31 @@ pub const Window = struct {
             behavior: []const u8,
         };
     };
-    pub fn _scrollTo(_: *const Window, opts: ScrollToOpts, y: ?u32) void {
+    pub fn _scrollTo(self: *Window, opts: ScrollToOpts, y: ?u32) !void {
         _ = opts;
         _ = y;
+
+        {
+            const scroll_event = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_event);
+
+            try parser.eventInit(scroll_event, "scroll", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(Window, self),
+                scroll_event,
+            );
+        }
+
+        {
+            const scroll_end = try parser.eventCreate();
+            defer parser.eventDestroy(scroll_end);
+
+            try parser.eventInit(scroll_end, "scrollend", .{});
+            _ = try parser.eventTargetDispatchEvent(
+                parser.toEventTarget(parser.DocumentHTML, self.document),
+                scroll_end,
+            );
+        }
     }
 };
 
@@ -408,4 +451,21 @@ test "Browser.HTML.Window" {
             "true",
         },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "const b64 = btoa('https://ziglang.org/documentation/master/std/#std.base64.Base64Decoder')", "undefined" },
+        .{ "b64", "aHR0cHM6Ly96aWdsYW5nLm9yZy9kb2N1bWVudGF0aW9uL21hc3Rlci9zdGQvI3N0ZC5iYXNlNjQuQmFzZTY0RGVjb2Rlcg==" },
+        .{ "const str = atob(b64)", "undefined" },
+        .{ "str", "https://ziglang.org/documentation/master/std/#std.base64.Base64Decoder" },
+        .{ "try { atob('b') } catch (e) { e } ", "Error: InvalidCharacterError" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let scroll = false; let scrolend = false", null },
+        .{ "window.addEventListener('scroll', () => {scroll = true});", null },
+        .{ "document.addEventListener('scrollend', () => {scrollend = true});", null },
+        .{ "window.scrollTo(0)", null },
+        .{ "scroll", "true" },
+        .{ "scrollend", "true" },
+    }, .{});
 }

src/browser/markdown.zig

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

src/browser/mime.zig

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

src/browser/netsurf.zig

@@ -525,6 +525,9 @@ pub const EventType = enum(u8) {
     progress_event = 1,
     custom_event = 2,
     mouse_event = 3,
+    error_event = 4,
+    abort_signal = 5,
+    xhr_event = 6,
 };
 
 pub const MutationEvent = c.dom_mutation_event;
@@ -1827,6 +1830,21 @@ pub fn anchorSetRel(a: *Anchor, rel: []const u8) !void {
     try DOMErr(err);
 }
 
+// HTMLLinkElement
+
+pub fn linkGetHref(link: *Link) ![]const u8 {
+    var res: ?*String = undefined;
+    const err = c.dom_html_link_element_get_href(link, &res);
+    try DOMErr(err);
+    if (res == null) return "";
+    return strToData(res.?);
+}
+
+pub fn linkSetHref(link: *Link, href: []const u8) !void {
+    const err = c.dom_html_link_element_set_href(link, try strFromData(href));
+    try DOMErr(err);
+}
+
 // ElementsHTML
 
 pub const MediaElement = struct { base: *c.dom_html_element };

src/browser/page.zig

@@ -22,7 +22,6 @@ const builtin = @import("builtin");
 const Allocator = std.mem.Allocator;
 
 const Dump = @import("dump.zig");
-const Markdown = @import("markdown.zig");
 const State = @import("State.zig");
 const Env = @import("env.zig").Env;
 const Mime = @import("mime.zig").Mime;
@@ -79,7 +78,10 @@ pub const Page = struct {
 
     renderer: Renderer,
 
+    // run v8 micro tasks
     microtask_node: Loop.CallbackNode,
+    // run v8 pump message loop and idle tasks
+    messageloop_node: Loop.CallbackNode,
 
     keydown_event_node: parser.EventNode,
     window_clicked_event_node: parser.EventNode,
@@ -88,13 +90,6 @@ pub const Page = struct {
     // execute any JavaScript
     main_context: *Env.JsContext,
 
-    // List of modules currently fetched/loaded.
-    module_map: std.StringHashMapUnmanaged([]const u8),
-
-    // current_script is the script currently evaluated by the page.
-    // current_script could by fetch module to resolve module's url to fetch.
-    current_script: ?*const Script = null,
-
     // indicates intention to navigate to another page on the next loop execution.
     delayed_navigation: bool = false,
 
@@ -114,20 +109,24 @@ pub const Page = struct {
             .state_pool = &browser.state_pool,
             .cookie_jar = &session.cookie_jar,
             .microtask_node = .{ .func = microtaskCallback },
+            .messageloop_node = .{ .func = messageLoopCallback },
             .keydown_event_node = .{ .func = keydownCallback },
             .window_clicked_event_node = .{ .func = windowClicked },
             .request_factory = browser.http_client.requestFactory(.{
                 .notification = browser.notification,
             }),
             .main_context = undefined,
-            .module_map = .empty,
         };
         self.main_context = try session.executor.createJsContext(&self.window, self, self, true);
 
         // load polyfills
         try polyfill.load(self.arena, self.main_context);
 
-        _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.microtask_node);
+        // message loop must run only non-test env
+        if (comptime !builtin.is_test) {
+            _ = try session.browser.app.loop.timeout(1 * std.time.ns_per_ms, &self.microtask_node);
+            _ = try session.browser.app.loop.timeout(100 * std.time.ns_per_ms, &self.messageloop_node);
+        }
     }
 
     fn microtaskCallback(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
@@ -136,6 +135,12 @@ pub const Page = struct {
         repeat_delay.* = 1 * std.time.ns_per_ms;
     }
 
+    fn messageLoopCallback(node: *Loop.CallbackNode, repeat_delay: *?u63) void {
+        const self: *Page = @fieldParentPtr("messageloop_node", node);
+        self.session.browser.runMessageLoop();
+        repeat_delay.* = 100 * std.time.ns_per_ms;
+    }
+
     // dump writes the page content into the given file.
     pub fn dump(self: *const Page, out: std.fs.File) !void {
         if (self.raw_data) |raw_data| {
@@ -148,54 +153,17 @@ pub const Page = struct {
         try Dump.writeHTML(doc, out);
     }
 
-    // dump writes the page content into the given file.
-    pub fn markdown(self: *const Page, out: std.fs.File) !void {
-        if (self.raw_data) |_| {
-            // raw_data was set if the document was not HTML we can not convert it to Markdown,
-            return error.HTMLDocument;
-        }
-
-        // if the page has a pointer to a document, converts the HTML in Markdown and dump it.
-        const doc = parser.documentHTMLToDocument(self.window.document);
-        try Markdown.writeMarkdown(self.url, doc, out);
-    }
-
-    pub fn fetchModuleSource(ctx: *anyopaque, specifier: []const u8) !?[]const u8 {
+    pub fn fetchModuleSource(ctx: *anyopaque, src: []const u8) !?[]const u8 {
         const self: *Page = @ptrCast(@alignCast(ctx));
-        const base = if (self.current_script) |s| s.src else null;
-
-        const src = blk: {
-            if (base) |_base| {
-                break :blk try URL.stitch(self.arena, specifier, _base, .{});
-            } else break :blk specifier;
-        };
-
-        if (self.module_map.get(src)) |module| {
-            log.debug(.http, "fetching module", .{
-                .src = src,
-                .cached = true,
-            });
-            return module;
-        }
-
-        log.debug(.http, "fetching module", .{
-            .src = src,
-            .base = base,
-            .cached = false,
-            .specifier = specifier,
-        });
-
-        const module = try self.fetchData(specifier, base);
-        if (module) |_module| try self.module_map.putNoClobber(self.arena, src, _module);
-        return module;
+        return self.fetchData("module", src);
     }
 
-    pub fn wait(self: *Page) !void {
+    pub fn wait(self: *Page, wait_ns: usize) !void {
         var try_catch: Env.TryCatch = undefined;
         try_catch.init(self.main_context);
         defer try_catch.deinit();
 
-        try self.session.browser.app.loop.run();
+        try self.session.browser.app.loop.run(wait_ns);
 
         if (try_catch.hasCaught() == false) {
             log.debug(.browser, "page wait complete", .{});
@@ -284,17 +252,33 @@ pub const Page = struct {
                 .reason = opts.reason,
             });
 
-            if (!mime.isHTML()) {
+            if (mime.isHTML()) {
+                // the page is an HTML, load it as it.
+                try self.loadHTMLDoc(&response, mime.charset orelse "utf-8");
+            } else {
+                // the page isn't an HTML
                 var arr: std.ArrayListUnmanaged(u8) = .{};
                 while (try response.next()) |data| {
                     try arr.appendSlice(arena, try arena.dupe(u8, data));
                 }
                 // save the body into the page.
                 self.raw_data = arr.items;
-                return;
-            }
 
-            try self.loadHTMLDoc(&response, mime.charset orelse "utf-8");
+                // construct a pseudo HTML containing the response body.
+                var buf: std.ArrayListUnmanaged(u8) = .{};
+
+                switch (mime.content_type) {
+                    .application_json, .text_plain, .text_javascript, .text_css => {
+                        try buf.appendSlice(arena, "<html><head><meta charset=\"utf-8\"></head><body><pre>");
+                        try buf.appendSlice(arena, self.raw_data.?);
+                        try buf.appendSlice(arena, "</pre></body></html>\n");
+                    },
+                    // In other cases, we prefer to not integrate the content into the HTML document page iself.
+                    else => {},
+                }
+                var fbs = std.io.fixedBufferStream(buf.items);
+                try self.loadHTMLDoc(fbs.reader(), mime.charset orelse "utf-8");
+            }
         }
 
         try self.processHTMLDoc();
@@ -486,26 +470,20 @@ pub const Page = struct {
             log.err(.browser, "clear document script", .{ .err = err });
         };
 
-        var script_source: ?[]const u8 = null;
-        defer self.current_script = null;
-        if (script.src) |src| {
-            self.current_script = script;
-
-            // https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-classic-script
-            script_source = (try self.fetchData(src, null)) orelse {
-                // TODO If el's result is null, then fire an event named error at
-                // el, and return
-                return;
-            };
-        } else {
+        const src = script.src orelse {
             // source is inline
             // TODO handle charset attribute
-            script_source = try parser.nodeTextContent(parser.elementToNode(script.element));
-        }
+            const script_source = try parser.nodeTextContent(parser.elementToNode(script.element)) orelse return;
+            return script.eval(self, script_source);
+        };
 
-        if (script_source) |ss| {
-            try script.eval(self, ss);
-        }
+        // https://html.spec.whatwg.org/multipage/webappapis.html#fetch-a-classic-script
+        const script_source = (try self.fetchData("script", src)) orelse {
+            // TODO If el's result is null, then fire an event named error at
+            // el, and return
+            return;
+        };
+        return script.eval(self, script_source);
 
         // TODO If el's from an external file is true, then fire an event
         // named load at el.
@@ -515,7 +493,11 @@ pub const Page = struct {
     // It resolves src using the page's uri.
     // If a base path is given, src is resolved according to the base first.
     // the caller owns the returned string
-    fn fetchData(self: *const Page, src: []const u8, base: ?[]const u8) !?[]const u8 {
+    fn fetchData(
+        self: *const Page,
+        comptime reason: []const u8,
+        src: []const u8,
+    ) !?[]const u8 {
         const arena = self.arena;
 
         // Handle data URIs.
@@ -523,26 +505,20 @@ pub const Page = struct {
             return data_uri.data;
         }
 
-        var res_src = src;
-
-        // if a base path is given, we resolve src using base.
-        if (base) |_base| {
-            res_src = try URL.stitch(arena, src, _base, .{ .alloc = .if_needed });
-        }
-
         var origin_url = &self.url;
-        const url = try origin_url.resolve(arena, res_src);
+        const url = try origin_url.resolve(arena, src);
 
         var status_code: u16 = 0;
         log.debug(.http, "fetching script", .{
             .url = url,
             .src = src,
-            .base = base,
+            .reason = reason,
         });
 
         errdefer |err| log.err(.http, "fetch error", .{
             .err = err,
             .url = url,
+            .reason = reason,
             .status = status_code,
         });
 
@@ -576,6 +552,7 @@ pub const Page = struct {
 
         log.info(.http, "fetch complete", .{
             .url = url,
+            .reason = reason,
             .status = status_code,
             .content_length = arr.items.len,
         });
@@ -1038,25 +1015,27 @@ const Script = struct {
         try_catch.init(page.main_context);
         defer try_catch.deinit();
 
-        const src = self.src orelse "inline";
+        const src: []const u8 = blk: {
+            const s = self.src orelse break :blk page.url.raw;
+            break :blk try URL.stitch(page.arena, s, page.url.raw, .{ .alloc = .if_needed });
+        };
 
-        log.debug(.browser, "executing script", .{ .src = src, .kind = self.kind });
+        // if self.src is null, then this is an inline script, and it should
+        // not be cached.
+        const cacheable = self.src != null;
 
-        _ = switch (self.kind) {
-            .javascript => page.main_context.exec(body, src),
-            .module => blk: {
-                switch (try page.main_context.module(body, src)) {
-                    .value => |v| break :blk v,
-                    .exception => |e| {
-                        log.warn(.user_script, "eval module", .{
-                            .src = src,
-                            .err = try e.exception(page.arena),
-                        });
-                        return error.JsErr;
-                    },
-                }
-            },
-        } catch {
+        log.debug(.browser, "executing script", .{
+            .src = src,
+            .kind = self.kind,
+            .cacheable = cacheable,
+        });
+
+        const result = switch (self.kind) {
+            .javascript => page.main_context.eval(body, src),
+            .module => page.main_context.module(body, src, cacheable),
+        };
+
+        result catch {
             if (page.delayed_navigation) {
                 return error.Terminated;
             }
@@ -1065,6 +1044,7 @@ const Script = struct {
                 log.warn(.user_script, "eval script", .{
                     .src = src,
                     .err = msg,
+                    .cacheable = cacheable,
                 });
             }
 

src/browser/storage/cookie.zig

@@ -296,7 +296,12 @@ pub const Cookie = struct {
                 }
                 if (exp_dt) |dt| {
                     normalized_expires = @floatFromInt(dt.unix(.seconds));
-                } else std.debug.print("Invalid cookie expires value: {s}\n", .{expires_});
+                } 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_ });
+                }
             }
         }
 

src/browser/url/url.zig

@@ -54,6 +54,11 @@ 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,
@@ -224,6 +229,19 @@ pub const URL = struct {
     pub fn _toJSON(self: *URL, page: *Page) ![]const u8 {
         return self.get_href(page);
     }
+
+    pub fn set_pathname(self: *URL, fragment: []const u8, page: *Page) !void {
+        // pathname must always start with a '/';
+        const real_path = blk: {
+            if (std.mem.startsWith(u8, fragment, "/")) {
+                break :blk try page.arena.dupe(u8, fragment);
+            } else {
+                break :blk try std.fmt.allocPrint(page.arena, "/{s}", .{fragment});
+            }
+        };
+
+        self.uri.path = .{ .percent_encoded = real_path };
+    }
 };
 
 // uriComponentNullStr converts an optional std.Uri.Component to string value.

src/browser/xhr/event_target.zig

@@ -39,6 +39,7 @@ pub const XMLHttpRequestEventTarget = struct {
     onload_cbk: ?Function = null,
     ontimeout_cbk: ?Function = null,
     onloadend_cbk: ?Function = null,
+    onreadystatechange_cbk: ?Function = null,
 
     fn register(
         self: *XMLHttpRequestEventTarget,
@@ -86,6 +87,9 @@ pub const XMLHttpRequestEventTarget = struct {
     pub fn get_onloadend(self: *XMLHttpRequestEventTarget) ?Function {
         return self.onloadend_cbk;
     }
+    pub fn get_onreadystatechange(self: *XMLHttpRequestEventTarget) ?Function {
+        return self.onreadystatechange_cbk;
+    }
 
     pub fn set_onloadstart(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
         if (self.onloadstart_cbk) |cbk| try self.unregister("loadstart", cbk.id);
@@ -111,4 +115,8 @@ pub const XMLHttpRequestEventTarget = struct {
         if (self.onloadend_cbk) |cbk| try self.unregister("loadend", cbk.id);
         self.onloadend_cbk = try self.register(page.arena, "loadend", listener);
     }
+    pub fn set_onreadystatechange(self: *XMLHttpRequestEventTarget, listener: EventHandler.Listener, page: *Page) !void {
+        if (self.onreadystatechange_cbk) |cbk| try self.unregister("readystatechange", cbk.id);
+        self.onreadystatechange_cbk = try self.register(page.arena, "readystatechange", listener);
+    }
 };

src/browser/xhr/progress_event.zig

@@ -37,10 +37,10 @@ pub const ProgressEvent = struct {
     loaded: u64 = 0,
     total: u64 = 0,
 
-    pub fn constructor(eventType: []const u8, opts: ?EventInit) !ProgressEvent {
+    pub fn constructor(event_type: []const u8, opts: ?EventInit) !ProgressEvent {
         const event = try parser.eventCreate();
         defer parser.eventDestroy(event);
-        try parser.eventInit(event, eventType, .{});
+        try parser.eventInit(event, event_type, .{});
         try parser.eventSetInternalType(event, .progress_event);
 
         const o = opts orelse EventInit{};

src/browser/xhr/xhr.zig

@@ -138,6 +138,13 @@ pub const XMLHttpRequest = struct {
         done = 4,
     };
 
+    // class attributes
+    pub const _UNSENT = @intFromEnum(State.unsent);
+    pub const _OPENED = @intFromEnum(State.opened);
+    pub const _HEADERS_RECEIVED = @intFromEnum(State.headers_received);
+    pub const _LOADING = @intFromEnum(State.loading);
+    pub const _DONE = @intFromEnum(State.done);
+
     // https://xhr.spec.whatwg.org/#response-type
     const ResponseType = enum {
         Empty,
@@ -360,6 +367,8 @@ pub const XMLHttpRequest = struct {
         // We can we defer event destroy once the event is dispatched.
         defer parser.eventDestroy(evt);
 
+        try parser.eventSetInternalType(evt, .xhr_event);
+
         try parser.eventInit(evt, typ, .{ .bubbles = true, .cancelable = true });
         _ = try parser.eventTargetDispatchEvent(@as(*parser.EventTarget, @ptrCast(self)), evt);
     }
@@ -458,7 +467,6 @@ pub const XMLHttpRequest = struct {
             &self.url.?.uri,
             self,
             onHttpRequestReady,
-            self.loop,
         );
     }
 
@@ -494,7 +502,7 @@ pub const XMLHttpRequest = struct {
             }
         }
 
-        try request.sendAsync(self.loop, self, .{});
+        try request.sendAsync(self, .{});
         self.request = request;
     }
 
@@ -580,11 +588,27 @@ pub const XMLHttpRequest = struct {
     }
 
     fn onErr(self: *XMLHttpRequest, err: anyerror) void {
-        self.state = .done;
         self.send_flag = false;
-        self.dispatchEvt("readystatechange");
-        self.dispatchProgressEvent("error", .{});
-        self.dispatchProgressEvent("loadend", .{});
+
+        // capture the state before we change it
+        const s = self.state;
+
+        const is_abort = err == DOMError.Abort;
+
+        if (is_abort) {
+            self.state = .unsent;
+        } else {
+            self.state = .done;
+            self.dispatchEvt("error");
+        }
+
+        if (s != .done or s != .unsent) {
+            self.dispatchEvt("readystatechange");
+            if (is_abort) {
+                self.dispatchProgressEvent("abort", .{});
+            }
+            self.dispatchProgressEvent("loadend", .{});
+        }
 
         const level: log.Level = if (err == DOMError.Abort) .debug else .err;
         log.log(.http, level, "error", .{
@@ -923,4 +947,26 @@ test "Browser.XHR.XMLHttpRequest" {
         // So the url has been retrieved.
         .{ "status", "200" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "const req6 = new XMLHttpRequest()", null },
+        .{
+            \\ var readyStates = [];
+            \\ var currentTarget = null;
+            \\ req6.onreadystatechange = (e) => {
+            \\  currentTarget = e.currentTarget;
+            \\  readyStates.push(req6.readyState);
+            \\ }
+            ,
+            null,
+        },
+        .{ "req6.open('GET', 'https://127.0.0.1:9581/xhr')", null },
+        .{ "req6.send()", null },
+        .{ "readyStates.length", "4" },
+        .{ "readyStates[0] === XMLHttpRequest.OPENED", "true" },
+        .{ "readyStates[1] === XMLHttpRequest.HEADERS_RECEIVED", "true" },
+        .{ "readyStates[2] === XMLHttpRequest.LOADING", "true" },
+        .{ "readyStates[3] === XMLHttpRequest.DONE", "true" },
+        .{ "currentTarget == req6", "true" },
+    }, .{});
 }

src/main.zig

@@ -23,6 +23,7 @@ const Allocator = std.mem.Allocator;
 const log = @import("log.zig");
 const server = @import("server.zig");
 const App = @import("app.zig").App;
+const http = @import("http/client.zig");
 const Platform = @import("runtime/js.zig").Platform;
 const Browser = @import("browser/browser.zig").Browser;
 
@@ -82,7 +83,10 @@ fn run(alloc: Allocator) !void {
 
     var app = try App.init(alloc, .{
         .run_mode = args.mode,
+        .platform = &platform,
         .http_proxy = args.httpProxy(),
+        .proxy_type = args.proxyType(),
+        .proxy_auth = args.proxyAuth(),
         .tls_verify_host = args.tlsVerifyHost(),
     });
     defer app.deinit();
@@ -103,7 +107,7 @@ fn run(alloc: Allocator) !void {
             };
         },
         .fetch => |opts| {
-            log.debug(.app, "startup", .{ .mode = "fetch", .dump = opts.dump, .markdown = opts.markdown, .url = opts.url });
+            log.debug(.app, "startup", .{ .mode = "fetch", .dump = opts.dump, .url = opts.url });
             const url = try @import("url.zig").URL.parse(opts.url, null);
 
             // browser
@@ -126,14 +130,7 @@ fn run(alloc: Allocator) !void {
                 },
             };
 
-            try page.wait();
-
-            // markdown
-            if (opts.markdown) {
-                try page.markdown(std.io.getStdOut());
-                // do not dump HTML if both options are provided
-                return;
-            }
+            try page.wait(std.time.ns_per_s * 3);
 
             // dump
             if (opts.dump) {
@@ -162,6 +159,20 @@ const Command = struct {
         };
     }
 
+    fn proxyType(self: *const Command) ?http.ProxyType {
+        return switch (self.mode) {
+            inline .serve, .fetch => |opts| opts.common.proxy_type,
+            else => unreachable,
+        };
+    }
+
+    fn proxyAuth(self: *const Command) ?http.ProxyAuth {
+        return switch (self.mode) {
+            inline .serve, .fetch => |opts| opts.common.proxy_auth,
+            else => unreachable,
+        };
+    }
+
     fn logLevel(self: *const Command) ?log.Level {
         return switch (self.mode) {
             inline .serve, .fetch => |opts| opts.common.log_level,
@@ -200,12 +211,13 @@ const Command = struct {
     const Fetch = struct {
         url: []const u8,
         dump: bool = false,
-        markdown: bool = false,
         common: Common,
     };
 
     const Common = struct {
         http_proxy: ?std.Uri = null,
+        proxy_type: ?http.ProxyType = null,
+        proxy_auth: ?http.ProxyAuth = null,
         tls_verify_host: bool = true,
         log_level: ?log.Level = null,
         log_format: ?log.Format = null,
@@ -224,6 +236,21 @@ const Command = struct {
             \\--http_proxy    The HTTP proxy to use for all HTTP requests.
             \\                Defaults to none.
             \\
+            \\--proxy_type   The type of proxy: connect, forward.
+            \\               'connect' creates a tunnel through the proxy via
+            \\               and initial CONNECT request.
+            \\               'forward' sends the full URL in the request target
+            \\               and expects the proxy to MITM the request.
+            \\               Defaults to connect when --http_proxy is set.
+            \\
+            \\--proxy_bearer_token
+            \\               The token to send for bearer authentication with the proxy
+            \\               Proxy-Authorization: Bearer <token>
+            \\
+            \\--proxy_basic_auth
+            \\               The user:password to send for basic authentication with the proxy
+            \\               Proxy-Authorization: Basic <base64(user:password)>
+            \\
             \\--log_level     The log level: debug, info, warn, error or fatal.
             \\                Defaults to
         ++ (if (builtin.mode == .Debug) " info." else "warn.") ++
@@ -249,9 +276,6 @@ const Command = struct {
             \\--dump          Dumps document to stdout.
             \\                Defaults to false.
             \\
-            \\--markdown      Converts document in Markdown format and dumps it to stdout.
-            \\                Defaults to false.
-            \\
         ++ common_options ++
             \\
             \\serve command
@@ -328,9 +352,6 @@ fn inferMode(opt: []const u8) ?App.RunMode {
     if (std.mem.eql(u8, opt, "--dump")) {
         return .fetch;
     }
-    if (std.mem.eql(u8, opt, "--markdown")) {
-        return .fetch;
-    }
     if (std.mem.startsWith(u8, opt, "--") == false) {
         return .fetch;
     }
@@ -416,7 +437,6 @@ fn parseFetchArgs(
     args: *std.process.ArgIterator,
 ) !Command.Fetch {
     var dump: bool = false;
-    var markdown: bool = false;
     var url: ?[]const u8 = null;
     var common: Command.Common = .{};
 
@@ -425,10 +445,6 @@ fn parseFetchArgs(
             dump = true;
             continue;
         }
-        if (std.mem.eql(u8, "--markdown", opt)) {
-            markdown = true;
-            continue;
-        }
 
         if (try parseCommonArg(allocator, opt, args, &common)) {
             continue;
@@ -454,7 +470,6 @@ fn parseFetchArgs(
     return .{
         .url = url.?,
         .dump = dump,
-        .markdown = markdown,
         .common = common,
     };
 }
@@ -476,6 +491,47 @@ fn parseCommonArg(
             return error.InvalidArgument;
         };
         common.http_proxy = try std.Uri.parse(try allocator.dupe(u8, str));
+        if (common.http_proxy.?.host == null) {
+            log.fatal(.app, "invalid http proxy", .{ .arg = "--http_proxy", .hint = "missing scheme?" });
+            return error.InvalidArgument;
+        }
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--proxy_type", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_type" });
+            return error.InvalidArgument;
+        };
+        common.proxy_type = std.meta.stringToEnum(http.ProxyType, str) orelse {
+            log.fatal(.app, "invalid option choice", .{ .arg = "--proxy_type", .value = str });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--proxy_bearer_token", opt)) {
+        if (common.proxy_auth != null) {
+            log.fatal(.app, "proxy auth already set", .{ .arg = "--proxy_bearer_token" });
+            return error.InvalidArgument;
+        }
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_bearer_token" });
+            return error.InvalidArgument;
+        };
+        common.proxy_auth = .{ .bearer = .{ .token = str } };
+        return true;
+    }
+    if (std.mem.eql(u8, "--proxy_basic_auth", opt)) {
+        if (common.proxy_auth != null) {
+            log.fatal(.app, "proxy auth already set", .{ .arg = "--proxy_basic_auth" });
+            return error.InvalidArgument;
+        }
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_basic_auth" });
+            return error.InvalidArgument;
+        };
+        common.proxy_auth = .{ .basic = .{ .user_pass = str } };
         return true;
     }
 
@@ -525,7 +581,7 @@ fn parseCommonArg(
         var it = std.mem.splitScalar(u8, str, ',');
         while (it.next()) |part| {
             try arr.append(allocator, std.meta.stringToEnum(log.Scope, part) orelse {
-                log.fatal(.app, "invalid option choice", .{ .arg = "--log_scope_filter", .value = part });
+                log.fatal(.app, "invalid option choice", .{ .arg = "--log_filter_scopes", .value = part });
                 return false;
             });
         }
@@ -547,7 +603,7 @@ test "tests:beforeAll" {
     log.opts.format = .logfmt;
 
     test_wg.startMany(3);
-    _ = try Platform.init();
+    const platform = try Platform.init();
 
     {
         const address = try std.net.Address.parseIp("127.0.0.1", 9582);
@@ -563,7 +619,7 @@ test "tests:beforeAll" {
 
     {
         const address = try std.net.Address.parseIp("127.0.0.1", 9583);
-        const thread = try std.Thread.spawn(.{}, serveCDP, .{address});
+        const thread = try std.Thread.spawn(.{}, serveCDP, .{ address, &platform });
         thread.detach();
     }
 
@@ -593,58 +649,81 @@ fn serveHTTP(address: std.net.Address) !void {
         var conn = try listener.accept();
         defer conn.stream.close();
         var http_server = std.http.Server.init(conn, &read_buffer);
-
-        var request = http_server.receiveHead() catch |err| switch (err) {
-            error.HttpConnectionClosing => continue :ACCEPT,
-            else => {
-                std.debug.print("Test HTTP Server error: {}\n", .{err});
-                return err;
-            },
-        };
-
-        const path = request.head.target;
-        if (std.mem.eql(u8, path, "/loader")) {
-            try request.respond("Hello!", .{
-                .extra_headers = &.{.{ .name = "Connection", .value = "close" }},
-            });
-        } else if (std.mem.eql(u8, path, "/http_client/simple")) {
-            try request.respond("", .{
-                .extra_headers = &.{.{ .name = "Connection", .value = "close" }},
-            });
-        } else if (std.mem.eql(u8, path, "/http_client/redirect")) {
-            try request.respond("", .{
-                .status = .moved_permanently,
-                .extra_headers = &.{
-                    .{ .name = "Connection", .value = "close" },
-                    .{ .name = "LOCATION", .value = "../http_client/echo" },
+        var connect_headers: std.ArrayListUnmanaged(std.http.Header) = .{};
+        REQUEST: while (true) {
+            var request = http_server.receiveHead() catch |err| switch (err) {
+                error.HttpConnectionClosing => continue :ACCEPT,
+                else => {
+                    std.debug.print("Test HTTP Server error: {}\n", .{err});
+                    return err;
                 },
-            });
-        } else if (std.mem.eql(u8, path, "/http_client/redirect/secure")) {
-            try request.respond("", .{
-                .status = .moved_permanently,
-                .extra_headers = &.{ .{ .name = "Connection", .value = "close" }, .{ .name = "LOCATION", .value = "https://127.0.0.1:9581/http_client/body" } },
-            });
-        } else if (std.mem.eql(u8, path, "/http_client/gzip")) {
-            const body = &.{ 0x1f, 0x8b, 0x08, 0x08, 0x01, 0xc6, 0x19, 0x68, 0x00, 0x03, 0x74, 0x65, 0x73, 0x74, 0x2e, 0x68, 0x74, 0x6d, 0x6c, 0x00, 0x73, 0x54, 0xc8, 0x4b, 0x2d, 0x57, 0x48, 0x2a, 0xca, 0x2f, 0x2f, 0x4e, 0x2d, 0x52, 0x48, 0x2a, 0xcd, 0xcc, 0x29, 0x51, 0x48, 0xcb, 0x2f, 0x52, 0xc8, 0x4d, 0x4c, 0xce, 0xc8, 0xcc, 0x4b, 0x2d, 0xe6, 0x02, 0x00, 0xe7, 0xc3, 0x4b, 0x27, 0x21, 0x00, 0x00, 0x00 };
-            try request.respond(body, .{
-                .extra_headers = &.{ .{ .name = "Connection", .value = "close" }, .{ .name = "Content-Encoding", .value = "gzip" } },
-            });
-        } else if (std.mem.eql(u8, path, "/http_client/echo")) {
-            var headers: std.ArrayListUnmanaged(std.http.Header) = .{};
+            };
 
-            var it = request.iterateHeaders();
-            while (it.next()) |hdr| {
-                try headers.append(aa, .{
-                    .name = try std.fmt.allocPrint(aa, "_{s}", .{hdr.name}),
-                    .value = hdr.value,
+            if (request.head.method == .CONNECT) {
+                try request.respond("", .{ .status = .ok });
+
+                // Proxy headers and destination headers are separated in the case of a CONNECT proxy
+                // We store the CONNECT headers, then continue with the request for the destination
+                var it = request.iterateHeaders();
+                while (it.next()) |hdr| {
+                    try connect_headers.append(aa, .{
+                        .name = try std.fmt.allocPrint(aa, "__{s}", .{hdr.name}),
+                        .value = try aa.dupe(u8, hdr.value),
+                    });
+                }
+                continue :REQUEST;
+            }
+
+            const path = request.head.target;
+            if (std.mem.eql(u8, path, "/loader")) {
+                try request.respond("Hello!", .{
+                    .extra_headers = &.{.{ .name = "Connection", .value = "close" }},
+                });
+            } else if (std.mem.eql(u8, path, "/http_client/simple")) {
+                try request.respond("", .{
+                    .extra_headers = &.{.{ .name = "Connection", .value = "close" }},
+                });
+            } else if (std.mem.eql(u8, path, "/http_client/redirect")) {
+                try request.respond("", .{
+                    .status = .moved_permanently,
+                    .extra_headers = &.{
+                        .{ .name = "Connection", .value = "close" },
+                        .{ .name = "LOCATION", .value = "../http_client/echo" },
+                    },
+                });
+            } else if (std.mem.eql(u8, path, "/http_client/redirect/secure")) {
+                try request.respond("", .{
+                    .status = .moved_permanently,
+                    .extra_headers = &.{ .{ .name = "Connection", .value = "close" }, .{ .name = "LOCATION", .value = "https://127.0.0.1:9581/http_client/body" } },
+                });
+            } else if (std.mem.eql(u8, path, "/http_client/gzip")) {
+                const body = &.{ 0x1f, 0x8b, 0x08, 0x08, 0x01, 0xc6, 0x19, 0x68, 0x00, 0x03, 0x74, 0x65, 0x73, 0x74, 0x2e, 0x68, 0x74, 0x6d, 0x6c, 0x00, 0x73, 0x54, 0xc8, 0x4b, 0x2d, 0x57, 0x48, 0x2a, 0xca, 0x2f, 0x2f, 0x4e, 0x2d, 0x52, 0x48, 0x2a, 0xcd, 0xcc, 0x29, 0x51, 0x48, 0xcb, 0x2f, 0x52, 0xc8, 0x4d, 0x4c, 0xce, 0xc8, 0xcc, 0x4b, 0x2d, 0xe6, 0x02, 0x00, 0xe7, 0xc3, 0x4b, 0x27, 0x21, 0x00, 0x00, 0x00 };
+                try request.respond(body, .{
+                    .extra_headers = &.{ .{ .name = "Connection", .value = "close" }, .{ .name = "Content-Encoding", .value = "gzip" } },
+                });
+            } else if (std.mem.eql(u8, path, "/http_client/echo")) {
+                var headers: std.ArrayListUnmanaged(std.http.Header) = .{};
+
+                var it = request.iterateHeaders();
+                while (it.next()) |hdr| {
+                    try headers.append(aa, .{
+                        .name = try std.fmt.allocPrint(aa, "_{s}", .{hdr.name}),
+                        .value = hdr.value,
+                    });
+                }
+
+                if (connect_headers.items.len > 0) {
+                    try headers.appendSlice(aa, connect_headers.items);
+                    connect_headers.clearRetainingCapacity();
+                }
+                try headers.append(aa, .{ .name = "Connection", .value = "Close" });
+
+                try request.respond("over 9000!", .{
+                    .status = .created,
+                    .extra_headers = headers.items,
                 });
             }
-            try headers.append(aa, .{ .name = "Connection", .value = "Close" });
-
-            try request.respond("over 9000!", .{
-                .status = .created,
-                .extra_headers = headers.items,
-            });
+            continue :ACCEPT;
         }
     }
 }
@@ -722,11 +801,12 @@ fn serveHTTPS(address: std.net.Address) !void {
     }
 }
 
-fn serveCDP(address: std.net.Address) !void {
+fn serveCDP(address: std.net.Address, platform: *const Platform) !void {
     var gpa: std.heap.GeneralPurposeAllocator(.{}) = .init;
     var app = try App.init(gpa.allocator(), .{
         .run_mode = .serve,
         .tls_verify_host = false,
+        .platform = platform,
     });
     defer app.deinit();
 

src/main_wpt.zig

@@ -70,7 +70,13 @@ pub fn main() !void {
         defer _ = test_arena.reset(.{ .retain_capacity = {} });
 
         var err_out: ?[]const u8 = null;
-        const result = run(test_arena.allocator(), test_file, &loader, &err_out) catch |err| blk: {
+        const result = run(
+            test_arena.allocator(),
+            &platform,
+            test_file,
+            &loader,
+            &err_out,
+        ) catch |err| blk: {
             if (err_out == null) {
                 err_out = @errorName(err);
             }
@@ -89,7 +95,13 @@ pub fn main() !void {
     try writer.finalize();
 }
 
-fn run(arena: Allocator, test_file: []const u8, loader: *FileLoader, err_out: *?[]const u8) !?[]const u8 {
+fn run(
+    arena: Allocator,
+    platform: *const Platform,
+    test_file: []const u8,
+    loader: *FileLoader,
+    err_out: *?[]const u8,
+) !?[]const u8 {
     // document
     const html = blk: {
         const full_path = try std.fs.path.join(arena, &.{ WPT_DIR, test_file });
@@ -110,6 +122,7 @@ fn run(arena: Allocator, test_file: []const u8, loader: *FileLoader, err_out: *?
     var runner = try @import("testing.zig").jsRunner(arena, .{
         .url = "http://127.0.0.1",
         .html = html,
+        .platform = platform,
     });
     defer runner.deinit();
 
@@ -157,7 +170,7 @@ fn run(arena: Allocator, test_file: []const u8, loader: *FileLoader, err_out: *?
         var try_catch: Env.TryCatch = undefined;
         try_catch.init(runner.page.main_context);
         defer try_catch.deinit();
-        try runner.page.loop.run();
+        try runner.page.loop.run(std.time.ns_per_ms * 200);
 
         if (try_catch.hasCaught()) {
             err_out.* = (try try_catch.err(arena)) orelse "unknwon error";

src/runtime/loop.zig

@@ -23,6 +23,8 @@ const MemoryPool = std.heap.MemoryPool;
 const log = @import("../log.zig");
 pub const IO = @import("tigerbeetle-io").IO;
 
+const RUN_DURATION = 10 * std.time.ns_per_ms;
+
 // SingleThreaded I/O Loop based on Tigerbeetle io_uring loop.
 // On Linux it's using io_uring.
 // On MacOS and Windows it's using kqueue/IOCP with a ring design.
@@ -82,7 +84,7 @@ pub const Loop = struct {
         // run tail events. We do run the tail events to ensure all the
         // contexts are correcly free.
         while (self.pending_network_count != 0 or self.pending_timeout_count != 0) {
-            self.io.run_for_ns(std.time.ns_per_ms * 10) catch |err| {
+            self.io.run_for_ns(RUN_DURATION) catch |err| {
                 log.err(.loop, "deinit", .{ .err = err });
                 break;
             };
@@ -102,12 +104,16 @@ pub const Loop = struct {
     // Stops when there is no more I/O events registered on the loop.
     // Note that I/O events callbacks might register more I/O events
     // on the go when they are executed (ie. nested I/O events).
-    pub fn run(self: *Self) !void {
+    pub fn run(self: *Self, wait_ns: usize) !void {
         // stop repeating / interval timeouts from re-registering
         self.stopping = true;
         defer self.stopping = false;
 
-        while (self.pending_network_count != 0 or self.pending_timeout_count != 0) {
+        const max_iterations = wait_ns / (RUN_DURATION);
+        for (0..max_iterations) |_| {
+            if (self.pending_network_count == 0 and self.pending_timeout_count == 0) {
+                break;
+            }
             self.io.run_for_ns(std.time.ns_per_ms * 10) catch |err| {
                 log.err(.loop, "deinit", .{ .err = err });
                 break;
@@ -187,6 +193,11 @@ pub const Loop = struct {
     }
 
     pub fn timeout(self: *Self, nanoseconds: u63, callback_node: ?*CallbackNode) !usize {
+        if (self.stopping and nanoseconds > std.time.ns_per_ms * 500) {
+            // we're trying to shutdown, we probably don't want to wait for a new
+            // long timeout
+            return 0;
+        }
         const completion = try self.alloc.create(Completion);
         errdefer self.alloc.destroy(completion);
         completion.* = undefined;

src/runtime/test_object_types.zig

@@ -77,6 +77,117 @@ pub const MyAPI = struct {
     }
 };
 
+pub const Parent = packed struct {
+    parent_id: i32 = 0,
+
+    pub fn get_parent(self: *const Parent) i32 {
+        return self.parent_id;
+    }
+    pub fn set_parent(self: *Parent, id: i32) void {
+        self.parent_id = id;
+    }
+};
+
+pub const Middle = struct {
+    pub const prototype = *Parent;
+
+    middle_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    _padding_3: u8 = 2,
+    proto: Parent,
+
+    pub fn constructor() Middle {
+        return .{
+            .middle_id = 0,
+            .proto = .{ .parent_id = 0 },
+        };
+    }
+
+    pub fn get_middle(self: *const Middle) i32 {
+        return self.middle_id;
+    }
+    pub fn set_middle(self: *Middle, id: i32) void {
+        self.middle_id = id;
+    }
+};
+
+pub const Child = struct {
+    pub const prototype = *Middle;
+
+    child_id: i32 = 0,
+    _padding_1: u8 = 0,
+    proto: Middle,
+
+    pub fn constructor() Child {
+        return .{
+            .child_id = 0,
+            .proto = .{ .middle_id = 0, .proto = .{ .parent_id = 0 } },
+        };
+    }
+
+    pub fn get_child(self: *const Child) i32 {
+        return self.child_id;
+    }
+    pub fn set_child(self: *Child, id: i32) void {
+        self.child_id = id;
+    }
+};
+
+pub const MiddlePtr = packed struct {
+    pub const prototype = *Parent;
+
+    middle_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    _padding_3: u8 = 2,
+    proto: *Parent,
+
+    pub fn constructor(state: State) !MiddlePtr {
+        const parent = try state.arena.create(Parent);
+        parent.* = .{ .parent_id = 0 };
+        return .{
+            .middle_id = 0,
+            .proto = parent,
+        };
+    }
+
+    pub fn get_middle(self: *const MiddlePtr) i32 {
+        return self.middle_id;
+    }
+    pub fn set_middle(self: *MiddlePtr, id: i32) void {
+        self.middle_id = id;
+    }
+};
+
+pub const ChildPtr = packed struct {
+    pub const prototype = *MiddlePtr;
+
+    child_id: i32 = 0,
+    _padding_1: u8 = 0,
+    _padding_2: u8 = 1,
+    proto: *MiddlePtr,
+
+    pub fn constructor(state: State) !ChildPtr {
+        const parent = try state.arena.create(Parent);
+        const middle = try state.arena.create(MiddlePtr);
+
+        parent.* = .{ .parent_id = 0 };
+        middle.* = .{ .middle_id = 0, .proto = parent };
+        return .{
+            .child_id = 0,
+            .proto = middle,
+        };
+    }
+
+    pub fn get_child(self: *const ChildPtr) i32 {
+        return self.child_id;
+    }
+    pub fn set_child(self: *ChildPtr, id: i32) void {
+        self.child_id = id;
+    }
+};
+
 const State = struct {
     arena: Allocator,
 };
@@ -90,6 +201,11 @@ test "JS: object types" {
         Other,
         MyObject,
         MyAPI,
+        Parent,
+        Middle,
+        Child,
+        MiddlePtr,
+        ChildPtr,
     }).init(.{ .arena = arena.allocator() }, {});
 
     defer runner.deinit();
@@ -120,4 +236,40 @@ test "JS: object types" {
         // check object property
         .{ "myObjIndirect.a.val()", "4" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "let m1 = new Middle();", null },
+        .{ "m1.middle = 2", null },
+        .{ "m1.parent = 3", null },
+        .{ "m1.middle", "2" },
+        .{ "m1.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c1 = new Child();", null },
+        .{ "c1.child = 1", null },
+        .{ "c1.middle = 2", null },
+        .{ "c1.parent = 3", null },
+        .{ "c1.child", "1" },
+        .{ "c1.middle", "2" },
+        .{ "c1.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let m2 = new MiddlePtr();", null },
+        .{ "m2.middle = 2", null },
+        .{ "m2.parent = 3", null },
+        .{ "m2.middle", "2" },
+        .{ "m2.parent", "3" },
+    }, .{});
+
+    try runner.testCases(&.{
+        .{ "let c2 = new ChildPtr();", null },
+        .{ "c2.child = 1", null },
+        .{ "c2.middle = 2", null },
+        .{ "c2.parent = 3", null },
+        .{ "c2.child", "1" },
+        .{ "c2.middle", "2" },
+        .{ "c2.parent", "3" },
+    }, .{});
 }

src/runtime/testing.zig

@@ -42,7 +42,7 @@ pub fn Runner(comptime State: type, comptime Global: type, comptime types: anyty
             const self = try allocator.create(Self);
             errdefer allocator.destroy(self);
 
-            self.env = try Env.init(allocator, .{});
+            self.env = try Env.init(allocator, null, .{});
             errdefer self.env.deinit();
 
             self.executor = try self.env.newExecutionWorld();

src/server.zig

@@ -39,7 +39,7 @@ const CDP = @import("cdp/cdp.zig").CDP;
 
 const TimeoutCheck = std.time.ns_per_ms * 100;
 
-const MAX_HTTP_REQUEST_SIZE = 2048;
+const MAX_HTTP_REQUEST_SIZE = 4096;
 
 // max message size
 // +14 for max websocket payload overhead
@@ -223,7 +223,7 @@ pub const Client = struct {
     }
 
     fn close(self: *Self) void {
-        log.info(.app, "client disconected", .{});
+        log.info(.app, "client disconnected", .{});
         self.connected = false;
         // recv only, because we might have pending writes we'd like to get
         // out (like the HTTP error response)
@@ -1142,7 +1142,7 @@ test "Client: http invalid request" {
     var c = try createTestClient();
     defer c.deinit();
 
-    const res = try c.httpRequest("GET /over/9000 HTTP/1.1\r\n" ++ "Header: " ++ ("a" ** 2050) ++ "\r\n\r\n");
+    const res = try c.httpRequest("GET /over/9000 HTTP/1.1\r\n" ++ "Header: " ++ ("a" ** 4100) ++ "\r\n\r\n");
     try testing.expectEqualStrings("HTTP/1.1 413 \r\n" ++
         "Connection: Close\r\n" ++
         "Content-Length: 17\r\n\r\n" ++

src/testing.zig

@@ -19,6 +19,8 @@
 const std = @import("std");
 const Allocator = std.mem.Allocator;
 
+const Platform = @import("runtime/js.zig").Platform;
+
 pub const allocator = std.testing.allocator;
 pub const expectError = std.testing.expectError;
 pub const expect = std.testing.expect;
@@ -66,7 +68,10 @@ pub fn expectEqual(expected: anytype, actual: anytype) !void {
             if (@typeInfo(@TypeOf(expected)) == .null) {
                 return std.testing.expectEqual(null, actual);
             }
-            return expectEqual(expected, actual.?);
+            if (actual) |_actual| {
+                return expectEqual(expected, _actual);
+            }
+            return std.testing.expectEqual(expected, null);
         },
         .@"union" => |union_info| {
             if (union_info.tag_type == null) {
@@ -380,6 +385,7 @@ pub const JsRunner = struct {
         var app = try App.init(alloc, .{
             .run_mode = .serve,
             .tls_verify_host = false,
+            .platform = opts.platform,
         });
         errdefer app.deinit();
 
@@ -435,7 +441,7 @@ pub const JsRunner = struct {
                 }
                 return err;
             };
-            try self.page.loop.run();
+            try self.page.loop.run(std.time.ns_per_ms * 200);
             @import("root").js_runner_duration += std.time.Instant.since(try std.time.Instant.now(), start);
 
             if (case.@"1") |expected| {
@@ -471,6 +477,7 @@ pub const JsRunner = struct {
 };
 
 const RunnerOpts = struct {
+    platform: ?*const Platform = null,
     url: []const u8 = "https://lightpanda.io/opensource-browser/",
     html: []const u8 =
         \\ <div id="content">

src/url.zig

@@ -110,7 +110,13 @@ pub const URL = struct {
             }
             return src;
         }
-        if (src.len == 0) {
+
+        var normalized_src = src;
+        while (std.mem.startsWith(u8, normalized_src, "./")) {
+            normalized_src = normalized_src[2..];
+        }
+
+        if (normalized_src.len == 0) {
             if (opts.alloc == .always) {
                 return allocator.dupe(u8, base);
             }
@@ -125,7 +131,12 @@ pub const URL = struct {
             }
         };
 
-        const normalized_src = if (src[0] == '/') src[1..] else src;
+        if (normalized_src[0] == '/') {
+            if (std.mem.indexOfScalarPos(u8, base, protocol_end, '/')) |pos| {
+                return std.fmt.allocPrint(allocator, "{s}{s}", .{ base[0..pos], normalized_src });
+            }
+            // not sure what to do here...error? Just let it fallthrough for now.
+        }
 
         if (std.mem.lastIndexOfScalar(u8, base[protocol_end..], '/')) |index| {
             const last_slash_pos = index + protocol_end;
@@ -216,41 +227,51 @@ test "URL: resolve size" {
 test "URL: Stitching Base & Src URLs (Basic)" {
     const allocator = testing.allocator;
 
-    const base = "https://www.google.com/xyz/abc/123";
+    const base = "https://lightpanda.io/xyz/abc/123";
     const src = "something.js";
     const result = try URL.stitch(allocator, src, base, .{});
     defer allocator.free(result);
-    try testing.expectString("https://www.google.com/xyz/abc/something.js", result);
+    try testing.expectString("https://lightpanda.io/xyz/abc/something.js", result);
 }
 
 test "URL: Stitching Base & Src URLs (Just Ending Slash)" {
     const allocator = testing.allocator;
 
-    const base = "https://www.google.com/";
+    const base = "https://lightpanda.io/";
     const src = "something.js";
     const result = try URL.stitch(allocator, src, base, .{});
     defer allocator.free(result);
-    try testing.expectString("https://www.google.com/something.js", result);
+    try testing.expectString("https://lightpanda.io/something.js", result);
 }
 
 test "URL: Stitching Base & Src URLs with leading slash" {
     const allocator = testing.allocator;
 
-    const base = "https://www.google.com/";
+    const base = "https://lightpanda.io/";
     const src = "/something.js";
     const result = try URL.stitch(allocator, src, base, .{});
     defer allocator.free(result);
-    try testing.expectString("https://www.google.com/something.js", result);
+    try testing.expectString("https://lightpanda.io/something.js", result);
 }
 
 test "URL: Stitching Base & Src URLs (No Ending Slash)" {
     const allocator = testing.allocator;
 
-    const base = "https://www.google.com";
+    const base = "https://lightpanda.io";
     const src = "something.js";
     const result = try URL.stitch(allocator, src, base, .{});
     defer allocator.free(result);
-    try testing.expectString("https://www.google.com/something.js", result);
+    try testing.expectString("https://lightpanda.io/something.js", result);
+}
+
+test "URL: Stitching Base with absolute src" {
+    const allocator = testing.allocator;
+
+    const base = "https://lightpanda.io/hello";
+    const src = "/abc/something.js";
+    const result = try URL.stitch(allocator, src, base, .{});
+    defer allocator.free(result);
+    try testing.expectString("https://lightpanda.io/abc/something.js", result);
 }
 
 test "URL: Stiching Base & Src URLs (Both Local)" {
@@ -275,11 +296,21 @@ test "URL: Stiching src as full path" {
 test "URL: Stitching Base & Src URLs (empty src)" {
     const allocator = testing.allocator;
 
-    const base = "https://www.google.com/xyz/abc/123";
+    const base = "https://lightpanda.io/xyz/abc/123";
     const src = "";
     const result = try URL.stitch(allocator, src, base, .{});
     defer allocator.free(result);
-    try testing.expectString("https://www.google.com/xyz/abc/123", result);
+    try testing.expectString("https://lightpanda.io/xyz/abc/123", result);
+}
+
+test "URL: Stitching dotslash" {
+    const allocator = testing.allocator;
+
+    const base = "https://lightpanda.io/hello/";
+    const src = "./something.js";
+    const result = try URL.stitch(allocator, src, base, .{});
+    defer allocator.free(result);
+    try testing.expectString("https://lightpanda.io/hello/something.js", result);
 }
 
 test "URL: concatQueryString" {