Try fixing segfault by not being as aggressive with freeing Persisted Resolvers

allow `HTMLEvents` in `createEvent`

.github/actions/install/action.yml

@@ -17,11 +17,11 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.1.28'
+    default: 'v0.1.30'
   v8:
     description: 'v8 version to install'
     required: false
-    default: '13.6.233.8'
+    default: '14.0.365.4'
   cache-dir:
     description: 'cache dir to use'
     required: false
@@ -67,9 +67,23 @@ runs:
         mkdir -p v8/out/${{ inputs.os }}/release/obj/zig/
         ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/out/${{ inputs.os }}/release/obj/zig/libc_v8.a
 
-    - name: libiconv
+    - name: Cache libiconv
+      id: cache-libiconv
+      uses: actions/cache@v4
+      env:
+        cache-name: cache-libiconv
+      with:
+        path: ${{ inputs.cache-dir }}/libiconv
+        key: vendor/libiconv/libiconv-1.17
+
+    - name: download libiconv
+      if: ${{ steps.cache-libiconv.outputs.cache-hit != 'true' }}
       shell: bash
-      run: make install-libiconv
+      run: make download-libiconv
+
+    - name: build libiconv
+      shell: bash
+      run: make build-libiconv
 
     - name: build mimalloc
       shell: bash

.github/workflows/e2e-test.yml

@@ -108,6 +108,15 @@ jobs:
           go run runner/main.go
           kill `cat LPD.pid` `cat PROXY.id`
 
+      - name: run request interception through proxy
+        run: |
+          export PROXY_USERNAME=username PROXY_PASSWORD=password
+          ./proxy/proxy & echo $! > PROXY.id
+          ./lightpanda serve & echo $! > LPD.pid
+          URL=https://demo-browser.lightpanda.io/campfire-commerce/ node puppeteer/proxy_auth.js
+          BASE_URL=https://demo-browser.lightpanda.io/ node playwright/proxy_auth.js
+          kill `cat LPD.pid` `cat PROXY.id`
+
   cdp-and-hyperfine-bench:
     name: cdp-and-hyperfine-bench
     needs: zig-build-release

.github/workflows/wpt.yml

@@ -5,6 +5,7 @@ env:
   AWS_SECRET_ACCESS_KEY: ${{ secrets.LPD_PERF_AWS_SECRET_ACCESS_KEY }}
   AWS_BUCKET: ${{ vars.LPD_PERF_AWS_BUCKET }}
   AWS_REGION: ${{ vars.LPD_PERF_AWS_REGION }}
+  LIGHTPANDA_DISABLE_TELEMETRY: true
 
 on:
   schedule:
@@ -30,7 +31,7 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: json output
-        run: zig build wpt -- --json > wpt.json
+        run: zig build -Doptimize=ReleaseFast wpt -- --json > wpt.json
 
       - name: write commit
         run: |

.gitmodules

@@ -9,7 +9,7 @@
 	url = https://github.com/lightpanda-io/libdom.git/
 [submodule "vendor/netsurf/share/netsurf-buildsystem"]
 	path = vendor/netsurf/share/netsurf-buildsystem
-	url = https://source.netsurf-browser.org/buildsystem.git
+	url = https://github.com/lightpanda-io/netsurf-buildsystem.git
 [submodule "vendor/netsurf/libhubbub"]
 	path = vendor/netsurf/libhubbub
 	url = https://github.com/lightpanda-io/libhubbub.git/

Dockerfile

@@ -3,8 +3,8 @@ FROM debian:stable
 ARG MINISIG=0.12
 ARG ZIG=0.15.1
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
-ARG V8=13.6.233.8
-ARG ZIG_V8=v0.1.28
+ARG V8=14.0.365.4
+ARG ZIG_V8=v0.1.30
 ARG TARGETPLATFORM
 
 RUN apt-get update -yq && \

Makefile

@@ -199,14 +199,16 @@ download-libiconv:
 ifeq ("$(wildcard vendor/libiconv/libiconv-1.17)","")
 	@mkdir -p vendor/libiconv
 	@cd vendor/libiconv && \
-	curl https://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.17.tar.gz | tar -xvzf -
+	curl -L https://github.com/lightpanda-io/libiconv/releases/download/1.17/libiconv-1.17.tar.gz | tar -xvzf -
 endif
 
-install-libiconv: download-libiconv clean-libiconv
+build-libiconv: clean-libiconv
 	@cd vendor/libiconv/libiconv-1.17 && \
 	./configure --prefix=$(ICONV) --enable-static && \
 	make && make install
 
+install-libiconv: download-libiconv build-libiconv
+
 clean-libiconv:
 ifneq ("$(wildcard vendor/libiconv/libiconv-1.17/Makefile)","")
 	@cd vendor/libiconv/libiconv-1.17 && \

build.zig.zon

@@ -5,9 +5,9 @@
     .fingerprint = 0xda130f3af836cea0,
     .dependencies = .{
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/d3040a953e5a37290dae20e7ddf138b7aeb5e67d.tar.gz",
-            .hash = "v8-0.0.0-xddH6w_EAwA8vK0NAxfxfI7IcbnpkUAcXKNujn7qwnmY",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/7177ee1ae267a44751a0e7e012e257177699a375.tar.gz",
+            .hash = "v8-0.0.0-xddH63TCAwC1D1hEiOtbEnLBbtz9ZPHrdiGWLcBcYQB7",
         },
-        //.v8 = .{ .path = "../zig-v8-fork" }
+        // .v8 = .{ .path = "../zig-v8-fork" }
     },
 }

src/TestHTTPServer.zig

@@ -74,6 +74,7 @@ pub fn sendFile(req: *std.http.Server.Request, file_path: []const u8) !void {
         error.FileNotFound => return req.respond("server error", .{ .status = .not_found }),
         else => return err,
     };
+    defer file.close();
 
     const stat = try file.stat();
     var send_buffer: [4096]u8 = undefined;

src/browser/Scheduler.zig

@@ -65,14 +65,11 @@ pub fn add(self: *Scheduler, ctx: *anyopaque, func: Task.Func, ms: u32, opts: Ad
     });
 }
 
-pub fn runHighPriority(self: *Scheduler) !?i32 {
+pub fn run(self: *Scheduler) !?i32 {
+    _ = try self.runQueue(&self.low_priority);
     return self.runQueue(&self.high_priority);
 }
 
-pub fn runLowPriority(self: *Scheduler) !?i32 {
-    return self.runQueue(&self.low_priority);
-}
-
 fn runQueue(self: *Scheduler, queue: *Queue) !?i32 {
     // this is O(1)
     if (queue.count() == 0) {
@@ -127,33 +124,24 @@ test "Scheduler" {
     var task = TestTask{ .allocator = testing.arena_allocator };
 
     var s = Scheduler.init(testing.arena_allocator);
-    try testing.expectEqual(null, s.runHighPriority());
+    try testing.expectEqual(null, s.run());
     try testing.expectEqual(0, task.calls.items.len);
 
     try s.add(&task, TestTask.run1, 3, .{});
 
-    try testing.expectDelta(3, try s.runHighPriority(), 1);
+    try testing.expectDelta(3, try s.run(), 1);
     try testing.expectEqual(0, task.calls.items.len);
 
     std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectEqual(null, s.runHighPriority());
+    try testing.expectEqual(null, s.run());
     try testing.expectEqualSlices(u32, &.{1}, task.calls.items);
 
     try s.add(&task, TestTask.run2, 3, .{});
     try s.add(&task, TestTask.run1, 2, .{});
 
     std.Thread.sleep(std.time.ns_per_ms * 5);
-    try testing.expectDelta(null, try s.runHighPriority(), 1);
+    try testing.expectDelta(null, try s.run(), 1);
     try testing.expectEqualSlices(u32, &.{ 1, 1, 2 }, task.calls.items);
-
-    std.Thread.sleep(std.time.ns_per_ms * 5);
-    // won't run low_priority
-    try testing.expectEqual(null, try s.runHighPriority());
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2 }, task.calls.items);
-
-    //runs low_priority
-    try testing.expectDelta(2, try s.runLowPriority(), 1);
-    try testing.expectEqualSlices(u32, &.{ 1, 1, 2, 2 }, task.calls.items);
 }
 
 const TestTask = struct {

src/browser/ScriptManager.zig

@@ -649,10 +649,7 @@ const Script = struct {
                 defer parser.eventDestroy(loadevt);
 
                 var result: Env.Function.Result = undefined;
-                const iface = Event.toInterface(loadevt) catch |err| {
-                    log.err(.browser, "SM event interface", .{ .err = err });
-                    return;
-                };
+                const iface = Event.toInterface(loadevt);
                 f.tryCall(void, .{iface}, &result) catch {
                     log.warn(.user_script, "script callback", .{
                         .url = self.url,

src/browser/console/console.zig

@@ -166,74 +166,3 @@ pub const Console = struct {
 fn timestamp() u32 {
     return @import("../../datetime.zig").timestamp();
 }
-
-// const testing = @import("../../testing.zig");
-// test "Browser.Console" {
-//     defer testing.reset();
-
-//     var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-//     defer runner.deinit();
-
-//     {
-//         try runner.testCases(&.{
-//             .{ "console.log('a')", "undefined" },
-//             .{ "console.warn('hello world', 23, true, new Object())", "undefined" },
-//         }, .{});
-
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[info] args= 1: a", captured[0]);
-//         try testing.expectEqual("[warn] args= 1: hello world 2: 23 3: true 4: #<Object>", captured[1]);
-//     }
-
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "console.countReset()", "undefined" },
-//             .{ "console.count()", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count('teg')", "undefined" },
-//             .{ "console.count()", "undefined" },
-//             .{ "console.countReset('teg')", "undefined" },
-//             .{ "console.countReset()", "undefined" },
-//             .{ "console.count()", "undefined" },
-//         }, .{});
-
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[invalid counter] label=default", captured[0]);
-//         try testing.expectEqual("[count] label=default count=1", captured[1]);
-//         try testing.expectEqual("[count] label=teg count=1", captured[2]);
-//         try testing.expectEqual("[count] label=teg count=2", captured[3]);
-//         try testing.expectEqual("[count] label=teg count=3", captured[4]);
-//         try testing.expectEqual("[count] label=default count=2", captured[5]);
-//         try testing.expectEqual("[count reset] label=teg count=3", captured[6]);
-//         try testing.expectEqual("[count reset] label=default count=2", captured[7]);
-//         try testing.expectEqual("[count] label=default count=1", captured[8]);
-//     }
-
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "console.assert(true)", "undefined" },
-//             .{ "console.assert('a', 2, 3, 4)", "undefined" },
-//             .{ "console.assert('')", "undefined" },
-//             .{ "console.assert('', 'x', true)", "undefined" },
-//             .{ "console.assert(false, 'x')", "undefined" },
-//         }, .{});
-
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[assertion failed] values=", captured[0]);
-//         try testing.expectEqual("[assertion failed] values= 1: x 2: true", captured[1]);
-//         try testing.expectEqual("[assertion failed] values= 1: x", captured[2]);
-//     }
-
-//     {
-//         test_capture.reset();
-//         try runner.testCases(&.{
-//             .{ "[1].forEach(console.log)", null },
-//         }, .{});
-
-//         const captured = test_capture.captured.items;
-//         try testing.expectEqual("[info] args= 1: 1 2: 0 3: [1]", captured[0]);
-//     }
-// }

src/browser/css/libdom.zig

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

src/browser/css/libdom_test.zig

@@ -1,330 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const css = @import("css.zig");
-const Node = @import("libdom.zig").Node;
-const parser = @import("../netsurf.zig");
-const Allocator = std.mem.Allocator;
-
-const Matcher = struct {
-    const Nodes = std.ArrayListUnmanaged(Node);
-
-    nodes: Nodes,
-    allocator: Allocator,
-
-    fn init(allocator: Allocator) Matcher {
-        return .{
-            .nodes = .empty,
-            .allocator = allocator,
-        };
-    }
-
-    fn deinit(m: *Matcher) void {
-        m.nodes.deinit(m.allocator);
-    }
-
-    fn reset(m: *Matcher) void {
-        m.nodes.clearRetainingCapacity();
-    }
-
-    pub fn match(m: *Matcher, n: Node) !void {
-        try m.nodes.append(m.allocator, n);
-    }
-};
-
-test "matchFirst" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        html: []const u8,
-        exp: usize,
-    }{
-        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
-        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 1 },
-        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
-        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
-        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
-        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
-        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
-        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
-        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
-        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
-        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
-        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
-        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
-        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
-        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
-        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
-        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 1 },
-        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 1 },
-        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
-        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
-        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
-        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
-        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
-        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 1 },
-        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 1 },
-        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 1 },
-        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        // .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
-        // .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
-        // .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        // .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 1 },
-        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 1 },
-        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
-        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 1 },
-        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
-        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 1 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
-        defer parser.documentHTMLClose(doc) catch {};
-
-        const s = css.parse(alloc, tc.q, .{}) catch |e| {
-            std.debug.print("parse, query: {s}\n", .{tc.q});
-            return e;
-        };
-
-        defer s.deinit(alloc);
-
-        const node = Node{ .node = parser.documentHTMLToNode(doc) };
-
-        _ = css.matchFirst(s, node, &matcher) catch |e| {
-            std.debug.print("match, query: {s}\n", .{tc.q});
-            return e;
-        };
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("expectation, query: {s}\n", .{tc.q});
-            return e;
-        };
-    }
-}
-
-test "matchAll" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        html: []const u8,
-        exp: usize,
-    }{
-        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
-        .{ .q = "*", .html = "<!-- comment --><html><head></head><body>text</body></html>", .exp = 3 },
-        .{ .q = "*", .html = "<html><head></head><body></body></html>", .exp = 3 },
-        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
-        .{ .q = "li#t1", .html = "<ul><li id=\"t1\"><p id=\"t1\">", .exp = 1 },
-        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
-        .{ .q = "*#t4", .html = "<ol><li id=\"t4\"><li id=\"t44\">", .exp = 1 },
-        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
-        .{ .q = "p.t1", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "div.teST", .html = "<div class=\"test\">", .exp = 0 },
-        .{ .q = ".t1.fail", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "p.t1.t2", .html = "<p class=\"t1 t2\">", .exp = 1 },
-        .{ .q = "p.--t1", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p.--t1.--t2", .html = "<p class=\"--t1 --t2\">", .exp = 1 },
-        .{ .q = "p[title]", .html = "<p><p title=\"title\">", .exp = 1 },
-        .{ .q = "div[class=\"red\" i]", .html = "<div><div class=\"Red\">", .exp = 1 },
-        .{ .q = "address[title=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title=\"FoOIgnoRECaSe\" i]", .html = "<address><address title=\"fooIgnoreCase\"><address title=\"bar\">", .exp = 1 },
-        .{ .q = "address[title!=\"foo\"]", .html = "<address><address title=\"foo\"><address title=\"bar\">", .exp = 2 },
-        .{ .q = "address[title!=\"foo\" i]", .html = "<address><address title=\"FOO\"><address title=\"bar\">", .exp = 2 },
-        .{ .q = "p[title!=\"FooBarUFoo\" i]", .html = "<p title=\"fooBARuFOO\"><p title=\"varfoo\">", .exp = 1 },
-        .{ .q = "[   title        ~=       foo    ]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=\"FOO\" i]", .html = "<p title=\"tot foo bar\">", .exp = 1 },
-        .{ .q = "p[title~=toofoo i]", .html = "<p title=\"tot foo bar\">", .exp = 0 },
-        .{ .q = "[title~=\"hello world\"]", .html = "<p title=\"hello world\">", .exp = 0 },
-        .{ .q = "[title~=\"hello\" i]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[title~=\"hello\"          I]", .html = "<p title=\"HELLO world\">", .exp = 1 },
-        .{ .q = "[lang|=\"en\"]", .html = "<p lang=\"en\"><p lang=\"en-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[lang|=\"EN\" i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[lang|=\"EN\"     i]", .html = "<p lang=\"en\"><p lang=\"En-gb\"><p lang=\"enough\"><p lang=\"fr-en\">", .exp = 2 },
-        .{ .q = "[title^=\"foo\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title^=\"foo\" i]", .html = "<p title=\"FooBAR\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"bar\"]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title$=\"BAR\" i]", .html = "<p title=\"foobar\"><p title=\"barfoo\">", .exp = 1 },
-        .{ .q = "[title*=\"bar\"]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" i]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "[title*=\"BaRu\" I]", .html = "<p title=\"foobarufoo\">", .exp = 1 },
-        .{ .q = "p[class$=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class$=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class^=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\" \"]", .html = "<p class=\" \">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "p[class*=\"\"]", .html = "<p class=\"\">This text should be green.</p><p>This text should be green.</p>", .exp = 0 },
-        .{ .q = "input[name=Sex][value=F]", .html = "<input type=\"radio\" name=\"Sex\" value=\"F\"/>", .exp = 1 },
-        .{ .q = "table[border=\"0\"][cellpadding=\"0\"][cellspacing=\"0\"]", .html = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout: fixed; width: 100%; border: 0 dashed; border-color: #FFFFFF\"><tr style=\"height:64px\">aaa</tr></table>", .exp = 1 },
-        .{ .q = ".t1:not(.t2)", .html = "<p class=\"t1 t2\">", .exp = 0 },
-        .{ .q = "div:not(.t1)", .html = "<div class=\"t3\">", .exp = 1 },
-        .{ .q = "div:not([class=\"t2\"])", .html = "<div><div class=\"t2\"><div class=\"t3\">", .exp = 2 },
-        .{ .q = "li:nth-child(odd)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
-        .{ .q = "li:nth-child(even)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 2 },
-        .{ .q = "li:nth-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3></ol>", .exp = 1 },
-        .{ .q = "li:nth-last-child(odd)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(even)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(-n+2)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "li:nth-last-child(3n+1)", .html = "<ol><li id=1><li id=2><li id=3><li id=4></ol>", .exp = 2 },
-        .{ .q = "span:first-child", .html = "<p>some text <span id=\"1\">and a span</span><span id=\"2\"> and another</span></p>", .exp = 1 },
-        .{ .q = "span:last-child", .html = "<span>a span</span> and some text", .exp = 1 },
-        .{ .q = "p:nth-of-type(2)", .html = "<address></address><p id=1><p id=2>", .exp = 1 },
-        .{ .q = "p:nth-last-of-type(2)", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:last-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:first-of-type", .html = "<address></address><p id=1><p id=2></p><a>", .exp = 1 },
-        .{ .q = "p:only-child", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p></div>", .exp = 1 },
-        .{ .q = "p:only-of-type", .html = "<div><p id=\"1\"></p><a></a></div><div><p id=\"2\"></p><p id=\"3\"></p></div>", .exp = 1 },
-        .{ .q = ":empty", .html = "<p id=\"1\"><!-- --><p id=\"2\">Hello<p id=\"3\"><span>", .exp = 3 },
-        .{ .q = "div p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 2 },
-        .{ .q = "div table p", .html = "<div><p id=\"1\"><table><tr><td><p id=\"2\"></table></div><p id=\"3\">", .exp = 1 },
-        .{ .q = "div > p", .html = "<div><p id=\"1\"><div><p id=\"2\"></div><table><tr><td><p id=\"3\"></table></div>", .exp = 2 },
-        .{ .q = "p ~ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 2 },
-        .{ .q = "p + p", .html = "<p id=\"1\"></p> <!--comment--> <p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        .{ .q = "li, p", .html = "<ul><li></li><li></li></ul><p>", .exp = 3 },
-        .{ .q = "p +/*This is a comment*/ p", .html = "<p id=\"1\"><p id=\"2\"></p><address></address><p id=\"3\">", .exp = 1 },
-        // .{ .q = "p:contains(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "p:containsOwn(\"that wraps\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 0 },
-        // .{ .q = ":containsOwn(\"inner\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        // .{ .q = "p:containsOwn(\"block\")", .html = "<p>Text block that <span>wraps inner text</span> and continues</p>", .exp = 1 },
-        .{ .q = "div:has(#p1)", .html = "<div id=\"d1\"><p id=\"p1\"><span>text content</span></p></div><div id=\"d2\"/>", .exp = 1 },
-        // .{ .q = "div:has(:containsOwn(\"2\"))", .html = "<div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p>contents <em>2</em></p></div>", .exp = 1 },
-        // .{ .q = "body :has(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 2 },
-        // .{ .q = "body :haschild(:containsOwn(\"2\"))", .html = "<body><div id=\"d1\"><p id=\"p1\"><span>contents 1</span></p></div> <div id=\"d2\"><p id=\"p2\">contents <em>2</em></p></div></body>", .exp = 1 },
-        // .{ .q = "p:matches([\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches([a-z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:matches([a-zA-Z])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches([^\\d])", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "p:matches(^(0|a))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 3 },
-        // .{ .q = "p:matches(^\\d+$)", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 1 },
-        // .{ .q = "p:not(:matches(^\\d+$))", .html = "<p id=\"p1\">0123456789</p><p id=\"p2\">abcdef</p><p id=\"p3\">0123ABCD</p>", .exp = 2 },
-        // .{ .q = "div :matchesOwn(^\\d+$)", .html = "<div><p id=\"p1\">01234<em>567</em>89</p><div>", .exp = 2 },
-        // .{ .q = "[href#=(fina)]:not([href#=(\\/\\/[^\\/]+untrusted)])", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"></a> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"></a> <li><a id=\"a2\" href=\"http://finance.untrusted.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"/> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 2 },
-        // .{ .q = "[href#=(^https:\\/\\/[^\\/]*\\/?news)]", .html = "<ul> <li><a id=\"a1\" href=\"http://www.google.com/finance\"/> <li><a id=\"a2\" href=\"http://finance.yahoo.com/\"/> <li><a id=\"a3\" href=\"https://www.google.com/news\"></a> <li><a id=\"a4\" href=\"http://news.yahoo.com\"/> </ul>", .exp = 1 },
-        .{ .q = ":input", .html = "<form> <label>Username <input type=\"text\" name=\"username\" /></label> <label>Password <input type=\"password\" name=\"password\" /></label> <label>Country <select name=\"country\"> <option value=\"ca\">Canada</option> <option value=\"us\">United States</option> </select> </label> <label>Bio <textarea name=\"bio\"></textarea></label> <button>Sign up</button> </form>", .exp = 5 },
-        .{ .q = ":root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "html:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:first-child", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "*:root:nth-child(1)", .html = "<html><head></head><body></body></html>", .exp = 1 },
-        .{ .q = "a:not(:root)", .html = "<html><head></head><body><a href=\"http://www.foo.com\"></a></body></html>", .exp = 1 },
-        .{ .q = "body > *:nth-child(3n+2)", .html = "<html><head></head><body><p></p><div></div><span></span><a></a><form></form></body></html>", .exp = 2 },
-        .{ .q = "input:disabled", .html = "<html><head></head><body><fieldset disabled><legend id=\"1\"><input id=\"i1\"/></legend><legend id=\"2\"><input id=\"i2\"/></legend></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":disabled", .html = "<html><head></head><body><fieldset disabled></fieldset></body></html>", .exp = 1 },
-        .{ .q = ":enabled", .html = "<html><head></head><body><fieldset></fieldset></body></html>", .exp = 1 },
-        .{ .q = "div.class1, div.class2", .html = "<div class=class1></div><div class=class2></div><div class=class3></div>", .exp = 2 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const doc = try parser.documentHTMLParseFromStr(tc.html);
-        defer parser.documentHTMLClose(doc) catch {};
-
-        const s = css.parse(alloc, tc.q, .{}) catch |e| {
-            std.debug.print("parse, query: {s}\n", .{tc.q});
-            return e;
-        };
-        defer s.deinit(alloc);
-
-        const node = Node{ .node = parser.documentHTMLToNode(doc) };
-
-        _ = css.matchAll(s, node, &matcher) catch |e| {
-            std.debug.print("match, query: {s}\n", .{tc.q});
-            return e;
-        };
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("expectation, query: {s}\n", .{tc.q});
-            return e;
-        };
-    }
-}

src/browser/css/match_test.zig

@@ -1,591 +0,0 @@
-// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const css = @import("css.zig");
-
-// Node mock implementation for test only.
-pub const Node = struct {
-    child: ?*const Node = null,
-    last: ?*const Node = null,
-    sibling: ?*const Node = null,
-    prev: ?*const Node = null,
-    par: ?*const Node = null,
-
-    name: []const u8 = "",
-    att: ?[]const u8 = null,
-
-    pub fn firstChild(n: *const Node) !?*const Node {
-        return n.child;
-    }
-
-    pub fn lastChild(n: *const Node) !?*const Node {
-        return n.last;
-    }
-
-    pub fn nextSibling(n: *const Node) !?*const Node {
-        return n.sibling;
-    }
-
-    pub fn prevSibling(n: *const Node) !?*const Node {
-        return n.prev;
-    }
-
-    pub fn parent(n: *const Node) !?*const Node {
-        return n.par;
-    }
-
-    pub fn isElement(_: *const Node) bool {
-        return true;
-    }
-
-    pub fn isDocument(_: *const Node) bool {
-        return false;
-    }
-
-    pub fn isComment(_: *const Node) bool {
-        return false;
-    }
-
-    pub fn isText(_: *const Node) bool {
-        return false;
-    }
-
-    pub fn isEmptyText(_: *const Node) !bool {
-        return false;
-    }
-
-    pub fn tag(n: *const Node) ![]const u8 {
-        return n.name;
-    }
-
-    pub fn attr(n: *const Node, _: []const u8) !?[]const u8 {
-        return n.att;
-    }
-
-    pub fn eql(a: *const Node, b: *const Node) bool {
-        return a == b;
-    }
-};
-
-const Matcher = struct {
-    const Nodes = std.ArrayListUnmanaged(*const Node);
-
-    nodes: Nodes,
-    allocator: Allocator,
-
-    fn init(allocator: Allocator) Matcher {
-        return .{
-            .nodes = .empty,
-            .allocator = allocator,
-        };
-    }
-
-    fn deinit(m: *Matcher) void {
-        m.nodes.deinit(self.allocator);
-    }
-
-    fn reset(m: *Matcher) void {
-        m.nodes.clearRetainingCapacity();
-    }
-
-    pub fn match(m: *Matcher, n: *const Node) !void {
-        try m.nodes.append(self.allocator, n);
-    }
-};
-
-test "matchFirst" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        n: Node,
-        exp: usize,
-    }{
-        .{
-            .q = "address",
-            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "#foo",
-            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
-            .exp = 1,
-        },
-        .{
-            .q = ".t1",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
-            .exp = 1,
-        },
-        .{
-            .q = ".t1",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo!=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo!=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo~=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo~=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo^=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo$=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo*=rb]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "strong, a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
-                .name = "a",
-                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
-            } } } },
-            .exp = 1,
-        },
-        .{
-            .q = ":not(p)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p:has(a)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p:has(strong)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "p:haschild(a)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p:haschild(strong)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "p:lang(en)",
-            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "a:lang(en)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
-            .exp = 1,
-        },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const s = try css.parse(alloc, tc.q, .{});
-        defer s.deinit(alloc);
-
-        _ = css.matchFirst(s, &tc.n, &matcher) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-    }
-}
-
-test "matchAll" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    const testcases = [_]struct {
-        q: []const u8,
-        n: Node,
-        exp: usize,
-    }{
-        .{
-            .q = "address",
-            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "#foo",
-            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
-            .exp = 1,
-        },
-        .{
-            .q = ".t1",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
-            .exp = 1,
-        },
-        .{
-            .q = ".t1",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo!=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo!=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 2,
-        },
-        .{
-            .q = "[foo~=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo~=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "[foo^=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo$=baz]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo*=rb]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "[foo|=bar]",
-            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "strong, a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 2,
-        },
-        .{
-            .q = "p a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p a",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
-                .name = "a",
-                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
-            } } } },
-            .exp = 1,
-        },
-        .{
-            .q = ":not(p)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 2,
-        },
-        .{
-            .q = "p:has(a)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p:has(strong)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "p:haschild(a)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "p:haschild(strong)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
-            .exp = 0,
-        },
-        .{
-            .q = "p:lang(en)",
-            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
-            .exp = 1,
-        },
-        .{
-            .q = "a:lang(en)",
-            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
-            .exp = 1,
-        },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const s = try css.parse(alloc, tc.q, .{});
-        defer s.deinit(alloc);
-
-        css.matchAll(s, &tc.n, &matcher) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-
-        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-    }
-}
-
-test "pseudo class" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    var p1: Node = .{ .name = "p" };
-    var p2: Node = .{ .name = "p" };
-    var a1: Node = .{ .name = "a" };
-
-    p1.sibling = &p2;
-    p2.prev = &p1;
-
-    p2.sibling = &a1;
-    a1.prev = &p2;
-
-    var root: Node = .{ .child = &p1, .last = &a1 };
-    p1.par = &root;
-    p2.par = &root;
-    a1.par = &root;
-
-    const testcases = [_]struct {
-        q: []const u8,
-        n: Node,
-        exp: ?*const Node,
-    }{
-        .{ .q = "p:only-child", .n = root, .exp = null },
-        .{ .q = "a:only-of-type", .n = root, .exp = &a1 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const s = try css.parse(alloc, tc.q, .{});
-        defer s.deinit(alloc);
-
-        css.matchAll(s, &tc.n, &matcher) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-
-        if (tc.exp) |exp_n| {
-            const exp: usize = 1;
-            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
-                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-                return e;
-            };
-
-            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
-                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-                return e;
-            };
-
-            continue;
-        }
-
-        const exp: usize = 0;
-        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-    }
-}
-
-test "nth pseudo class" {
-    const alloc = std.testing.allocator;
-
-    var matcher = Matcher.init(alloc);
-    defer matcher.deinit();
-
-    var p1: Node = .{ .name = "p" };
-    var p2: Node = .{ .name = "p" };
-
-    p1.sibling = &p2;
-    p2.prev = &p1;
-
-    var root: Node = .{ .child = &p1, .last = &p2 };
-    p1.par = &root;
-    p2.par = &root;
-
-    const testcases = [_]struct {
-        q: []const u8,
-        n: Node,
-        exp: ?*const Node,
-    }{
-        .{ .q = "a:nth-of-type(1)", .n = root, .exp = null },
-        .{ .q = "p:nth-of-type(1)", .n = root, .exp = &p1 },
-        .{ .q = "p:nth-of-type(2)", .n = root, .exp = &p2 },
-        .{ .q = "p:nth-of-type(0)", .n = root, .exp = null },
-        .{ .q = "p:nth-of-type(2n)", .n = root, .exp = &p2 },
-        .{ .q = "p:nth-last-child(1)", .n = root, .exp = &p2 },
-        .{ .q = "p:nth-last-child(2)", .n = root, .exp = &p1 },
-        .{ .q = "p:nth-child(1)", .n = root, .exp = &p1 },
-        .{ .q = "p:nth-child(2)", .n = root, .exp = &p2 },
-        .{ .q = "p:nth-child(odd)", .n = root, .exp = &p1 },
-        .{ .q = "p:nth-child(even)", .n = root, .exp = &p2 },
-        .{ .q = "p:nth-child(n+2)", .n = root, .exp = &p2 },
-    };
-
-    for (testcases) |tc| {
-        matcher.reset();
-
-        const s = try css.parse(alloc, tc.q, .{});
-        defer s.deinit(alloc);
-
-        css.matchAll(s, &tc.n, &matcher) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-
-        if (tc.exp) |exp_n| {
-            const exp: usize = 1;
-            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
-                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-                return e;
-            };
-
-            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
-                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-                return e;
-            };
-
-            continue;
-        }
-
-        const exp: usize = 0;
-        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
-            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
-            return e;
-        };
-    }
-}

src/browser/css/parser.zig

@@ -557,8 +557,6 @@ pub const Parser = struct {
                 const val = try buf.toOwnedSlice(allocator);
                 errdefer allocator.free(val);
 
-                lowerstr(val);
-
                 return .{ .pseudo_class_contains = .{ .own = pseudo_class == .containsown, .val = val } };
             },
             .matches, .matchesown => {

src/browser/css/selector.zig

@@ -17,6 +17,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const Allocator = std.mem.Allocator;
+const css = @import("css.zig");
 
 pub const AttributeOP = enum {
     eql, // =
@@ -432,7 +434,25 @@ pub const Selector = union(enum) {
                     else => Error.UnsupportedRelativePseudoClass,
                 };
             },
-            .pseudo_class_contains => return Error.UnsupportedContainsPseudoClass, // TODO, need mem allocation.
+            .pseudo_class_contains => |v| {
+                // Only containsOwn is implemented.
+                if (v.own == false) return Error.UnsupportedContainsPseudoClass;
+
+                var c = try n.firstChild();
+                while (c != null) {
+                    if (c.?.isText()) {
+                        const text = try c.?.text();
+                        if (text) |_text| {
+                            if (contains(_text, v.val, false)) { // we are case sensitive. Is this correct behavior?
+                                return true;
+                            }
+                        }
+                    }
+
+                    c = try c.?.nextSibling();
+                }
+                return false;
+            },
             .pseudo_class_regexp => return Error.UnsupportedRegexpPseudoClass, // TODO need mem allocation.
             .pseudo_class_nth => |v| {
                 if (v.a == 0) {
@@ -827,3 +847,578 @@ pub const Selector = union(enum) {
         }
     }
 };
+
+// NodeTest mock implementation for test only.
+pub const NodeTest = struct {
+    child: ?*const NodeTest = null,
+    last: ?*const NodeTest = null,
+    sibling: ?*const NodeTest = null,
+    prev: ?*const NodeTest = null,
+    par: ?*const NodeTest = null,
+
+    name: []const u8 = "",
+    att: ?[]const u8 = null,
+
+    pub fn firstChild(n: *const NodeTest) !?*const NodeTest {
+        return n.child;
+    }
+
+    pub fn lastChild(n: *const NodeTest) !?*const NodeTest {
+        return n.last;
+    }
+
+    pub fn nextSibling(n: *const NodeTest) !?*const NodeTest {
+        return n.sibling;
+    }
+
+    pub fn prevSibling(n: *const NodeTest) !?*const NodeTest {
+        return n.prev;
+    }
+
+    pub fn parent(n: *const NodeTest) !?*const NodeTest {
+        return n.par;
+    }
+
+    pub fn isElement(_: *const NodeTest) bool {
+        return true;
+    }
+
+    pub fn isDocument(_: *const NodeTest) bool {
+        return false;
+    }
+
+    pub fn isComment(_: *const NodeTest) bool {
+        return false;
+    }
+
+    pub fn text(_: *const NodeTest) !?[]const u8 {
+        return null;
+    }
+
+    pub fn isText(_: *const NodeTest) bool {
+        return false;
+    }
+
+    pub fn isEmptyText(_: *const NodeTest) !bool {
+        return false;
+    }
+
+    pub fn tag(n: *const NodeTest) ![]const u8 {
+        return n.name;
+    }
+
+    pub fn attr(n: *const NodeTest, _: []const u8) !?[]const u8 {
+        return n.att;
+    }
+
+    pub fn eql(a: *const NodeTest, b: *const NodeTest) bool {
+        return a == b;
+    }
+};
+
+const MatcherTest = struct {
+    const NodeTests = std.ArrayListUnmanaged(*const NodeTest);
+
+    nodes: NodeTests,
+    allocator: Allocator,
+
+    fn init(allocator: Allocator) MatcherTest {
+        return .{
+            .nodes = .empty,
+            .allocator = allocator,
+        };
+    }
+
+    fn deinit(m: *MatcherTest) void {
+        m.nodes.deinit(m.allocator);
+    }
+
+    fn reset(m: *MatcherTest) void {
+        m.nodes.clearRetainingCapacity();
+    }
+
+    pub fn match(m: *MatcherTest, n: *const NodeTest) !void {
+        try m.nodes.append(m.allocator, n);
+    }
+};
+
+test "Browser.CSS.Selector: matchFirst" {
+    const alloc = std.testing.allocator;
+
+    var matcher = MatcherTest.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: NodeTest,
+        exp: usize,
+    }{
+        .{
+            .q = "address",
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo!=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo!=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo^=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo$=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo*=rb]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "strong, a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
+                .name = "a",
+                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
+            } } } },
+            .exp = 1,
+        },
+        .{
+            .q = ":not(p)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:haschild(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:haschild(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "a:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
+            .exp = 1,
+        },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        _ = css.matchFirst(&s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "Browser.CSS.Selector: matchAll" {
+    const alloc = std.testing.allocator;
+
+    var matcher = MatcherTest.init(alloc);
+    defer matcher.deinit();
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: NodeTest,
+        exp: usize,
+    }{
+        .{
+            .q = "address",
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo!=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo!=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "baz bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo~=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "[foo^=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo$=baz]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo*=rb]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "barbaz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "bar-baz" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "[foo|=bar]",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "ba" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "strong, a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .name = "p" } }, .sibling = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p a",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "span", .child = &.{
+                .name = "a",
+                .par = &.{ .name = "span", .par = &.{ .name = "p" } },
+            } } } },
+            .exp = 1,
+        },
+        .{
+            .q = ":not(p)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 2,
+        },
+        .{
+            .q = "p:has(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:has(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:haschild(a)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "p:haschild(strong)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a" }, .sibling = &.{ .name = "strong" } } },
+            .exp = 0,
+        },
+        .{
+            .q = "p:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .att = "en-US", .child = &.{ .name = "a" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "a:lang(en)",
+            .n = .{ .child = &.{ .name = "p", .child = &.{ .name = "a", .par = &.{ .att = "en-US" } } } },
+            .exp = 1,
+        },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(&s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        std.testing.expectEqual(tc.exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "Browser.CSS.Selector: pseudo class" {
+    const alloc = std.testing.allocator;
+
+    var matcher = MatcherTest.init(alloc);
+    defer matcher.deinit();
+
+    var p1: NodeTest = .{ .name = "p" };
+    var p2: NodeTest = .{ .name = "p" };
+    var a1: NodeTest = .{ .name = "a" };
+
+    p1.sibling = &p2;
+    p2.prev = &p1;
+
+    p2.sibling = &a1;
+    a1.prev = &p2;
+
+    var root: NodeTest = .{ .child = &p1, .last = &a1 };
+    p1.par = &root;
+    p2.par = &root;
+    a1.par = &root;
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: NodeTest,
+        exp: ?*const NodeTest,
+    }{
+        .{ .q = "p:only-child", .n = root, .exp = null },
+        .{ .q = "a:only-of-type", .n = root, .exp = &a1 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(&s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        if (tc.exp) |exp_n| {
+            const exp: usize = 1;
+            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            continue;
+        }
+
+        const exp: usize = 0;
+        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}
+
+test "Browser.CSS.Selector: nth pseudo class" {
+    const alloc = std.testing.allocator;
+
+    var matcher = MatcherTest.init(alloc);
+    defer matcher.deinit();
+
+    var p1: NodeTest = .{ .name = "p" };
+    var p2: NodeTest = .{ .name = "p" };
+
+    p1.sibling = &p2;
+    p2.prev = &p1;
+
+    var root: NodeTest = .{ .child = &p1, .last = &p2 };
+    p1.par = &root;
+    p2.par = &root;
+
+    const testcases = [_]struct {
+        q: []const u8,
+        n: NodeTest,
+        exp: ?*const NodeTest,
+    }{
+        .{ .q = "a:nth-of-type(1)", .n = root, .exp = null },
+        .{ .q = "p:nth-of-type(1)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-of-type(2)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-of-type(0)", .n = root, .exp = null },
+        .{ .q = "p:nth-of-type(2n)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-last-child(1)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-last-child(2)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(1)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(2)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-child(odd)", .n = root, .exp = &p1 },
+        .{ .q = "p:nth-child(even)", .n = root, .exp = &p2 },
+        .{ .q = "p:nth-child(n+2)", .n = root, .exp = &p2 },
+    };
+
+    for (testcases) |tc| {
+        matcher.reset();
+
+        const s = try css.parse(alloc, tc.q, .{});
+        defer s.deinit(alloc);
+
+        css.matchAll(&s, &tc.n, &matcher) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+
+        if (tc.exp) |exp_n| {
+            const exp: usize = 1;
+            std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            std.testing.expectEqual(exp_n, matcher.nodes.items[0]) catch |e| {
+                std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+                return e;
+            };
+
+            continue;
+        }
+
+        const exp: usize = 0;
+        std.testing.expectEqual(exp, matcher.nodes.items.len) catch |e| {
+            std.debug.print("query: {s}, parsed selector: {any}\n", .{ tc.q, s });
+            return e;
+        };
+    }
+}

src/browser/dom/MessageChannel.zig

@@ -252,7 +252,7 @@ pub const MessageEvent = struct {
         const event = try parser.eventCreate();
         defer parser.eventDestroy(event);
         try parser.eventInit(event, "message", .{});
-        try parser.eventSetInternalType(event, .message_event);
+        parser.eventSetInternalType(event, .message_event);
 
         return .{
             .proto = event.*,

src/browser/dom/document.zig

@@ -116,7 +116,9 @@ pub const Document = struct {
         base: *parser.Event,
         custom: CustomEvent,
     } {
-        if (std.ascii.eqlIgnoreCase(eventCstr, "Event") or std.ascii.eqlIgnoreCase(eventCstr, "Events")) {
+        const eqlIgnoreCase = std.ascii.eqlIgnoreCase;
+
+        if (eqlIgnoreCase(eventCstr, "Event") or eqlIgnoreCase(eventCstr, "Events") or eqlIgnoreCase(eventCstr, "HTMLEvents")) {
             return .{ .base = try parser.eventCreate() };
         }
 

src/browser/dom/event_target.zig

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

src/browser/dom/mutation_observer.zig

@@ -278,7 +278,7 @@ const Observer = struct {
         var mutation_observer = self.mutation_observer;
 
         const node = blk: {
-            const event_target = try parser.eventTarget(event) orelse return;
+            const event_target = parser.eventTarget(event) orelse return;
             break :blk parser.eventTargetToNode(event_target);
         };
 

src/browser/dom/node.zig

@@ -631,262 +631,7 @@ pub const Node = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.node" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    {
-        var err_out: ?[]const u8 = null;
-        try runner.exec(
-            \\ function trimAndReplace(str) {
-            \\   str = str.replace(/(\r\n|\n|\r)/gm,'');
-            \\   str = str.replace(/\s+/g, ' ');
-            \\   str = str.trim();
-            \\   return str;
-            \\ }
-        , "trimAndReplace", &err_out);
-    }
-
-    try runner.testCases(&.{
-        .{ "document.body.compareDocumentPosition(document.firstChild); ", "10" },
-        .{ "document.getElementById(\"para-empty\").compareDocumentPosition(document.getElementById(\"content\"));", "10" },
-        .{ "document.getElementById(\"content\").compareDocumentPosition(document.getElementById(\"para-empty\"));", "20" },
-        .{ "document.getElementById(\"link\").compareDocumentPosition(document.getElementById(\"link\"));", "0" },
-        .{ "document.getElementById(\"para-empty\").compareDocumentPosition(document.getElementById(\"link\"));", "2" },
-        .{ "document.getElementById(\"link\").compareDocumentPosition(document.getElementById(\"para-empty\"));", "4" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.getElementById('content').getRootNode().__proto__.constructor.name", "HTMLDocument" },
-    }, .{});
-
-    try runner.testCases(&.{
-        // for next test cases
-        .{ "let content = document.getElementById('content')", "undefined" },
-        .{ "let link = document.getElementById('link')", "undefined" },
-        .{ "let first_child = content.firstChild.nextSibling", "undefined" }, // nextSibling because of line return \n
-
-        .{ "let body_first_child = document.body.firstChild", "undefined" },
-        .{ "body_first_child.localName", "div" },
-        .{ "body_first_child.__proto__.constructor.name", "HTMLDivElement" },
-        .{ "document.getElementById('para-empty').firstChild.firstChild", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let last_child = content.lastChild.previousSibling", "undefined" }, // previousSibling because of line return \n
-        .{ "last_child.__proto__.constructor.name", "Comment" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let next_sibling = link.nextSibling.nextSibling", "undefined" },
-        .{ "next_sibling.localName", "p" },
-        .{ "next_sibling.__proto__.constructor.name", "HTMLParagraphElement" },
-        .{ "content.nextSibling.nextSibling", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let prev_sibling = document.getElementById('para-empty').previousSibling.previousSibling", "undefined" },
-        .{ "prev_sibling.localName", "a" },
-        .{ "prev_sibling.__proto__.constructor.name", "HTMLAnchorElement" },
-        .{ "content.previousSibling", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let parent = document.getElementById('para').parentElement", "undefined" },
-        .{ "parent.localName", "div" },
-        .{ "parent.__proto__.constructor.name", "HTMLDivElement" },
-        .{ "let h = content.parentElement.parentElement", "undefined" },
-        .{ "h.parentElement", "null" },
-        .{ "h.parentNode.__proto__.constructor.name", "HTMLDocument" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "first_child.nodeName === 'A'", "true" },
-        .{ "link.firstChild.nodeName === '#text'", "true" },
-        .{ "last_child.nodeName === '#comment'", "true" },
-        .{ "document.nodeName === '#document'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "first_child.nodeType === 1", "true" },
-        .{ "link.firstChild.nodeType === 3", "true" },
-        .{ "last_child.nodeType === 8", "true" },
-        .{ "document.nodeType === 9", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let owner = content.ownerDocument", "undefined" },
-        .{ "owner.__proto__.constructor.name", "HTMLDocument" },
-        .{ "document.ownerDocument", "null" },
-        .{ "let owner2 = document.createElement('div').ownerDocument", "undefined" },
-        .{ "owner2.__proto__.constructor.name", "HTMLDocument" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "content.isConnected", "true" },
-        .{ "document.isConnected", "true" },
-        .{ "const connDiv = document.createElement('div')", null },
-        .{ "connDiv.isConnected", "false" },
-        .{ "const connParentDiv = document.createElement('div')", null },
-        .{ "connParentDiv.appendChild(connDiv)", null },
-        .{ "connDiv.isConnected", "false" },
-        .{ "content.appendChild(connParentDiv)", null },
-        .{ "connDiv.isConnected", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "last_child.nodeValue === 'comment'", "true" },
-        .{ "link.nodeValue === null", "true" },
-        .{ "let text = link.firstChild", "undefined" },
-        .{ "text.nodeValue === 'OK'", "true" },
-        .{ "text.nodeValue = 'OK modified'", "OK modified" },
-        .{ "text.nodeValue === 'OK modified'", "true" },
-        .{ "link.nodeValue = 'nothing'", "nothing" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "text.textContent === 'OK modified'", "true" },
-        .{ "trimAndReplace(content.textContent) === 'OK modified And'", "true" },
-        .{ "text.textContent = 'OK'", "OK" },
-        .{ "text.textContent", "OK" },
-        .{ "trimAndReplace(document.getElementById('para-empty').textContent)", "" },
-        .{ "document.getElementById('para-empty').textContent = 'OK'", "OK" },
-        .{ "document.getElementById('para-empty').firstChild.nodeName === '#text'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let append = document.createElement('h1')", "undefined" },
-        .{ "content.appendChild(append).toString()", "[object HTMLHeadingElement]" },
-        .{ "content.lastChild.__proto__.constructor.name", "HTMLHeadingElement" },
-        .{ "content.appendChild(link).toString()", "[object HTMLAnchorElement]" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let clone = link.cloneNode()", "undefined" },
-        .{ "clone.toString()", "[object HTMLAnchorElement]" },
-        .{ "clone.parentNode === null", "true" },
-        .{ "clone.firstChild === null", "true" },
-        .{ "let clone_deep = link.cloneNode(true)", "undefined" },
-        .{ "clone_deep.firstChild.nodeName === '#text'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "link.contains(text)", "true" },
-        .{ "text.contains(link)", "false" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "link.hasChildNodes()", "true" },
-        .{ "text.hasChildNodes()", "false" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "link.childNodes.length", "1" },
-        .{ "text.childNodes.length", "0" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let insertBefore = document.createElement('a')", "undefined" },
-        .{ "link.insertBefore(insertBefore, text) !== undefined", "true" },
-        .{ "link.firstChild.localName === 'a'", "true" },
-
-        .{ "let insertBefore2 = document.createElement('b')", null },
-        .{ "link.insertBefore(insertBefore2, null).localName", "b" },
-        .{ "link.childNodes[link.childNodes.length - 1].localName", "b" },
-    }, .{});
-
-    try runner.testCases(&.{
-        // TODO: does not seems to work
-        // .{ "link.isDefaultNamespace('')", "true" },
-        .{ "link.isDefaultNamespace('false')", "false" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let equal1 = document.createElement('a')", "undefined" },
-        .{ "let equal2 = document.createElement('a')", "undefined" },
-        .{ "equal1.textContent = 'is equal'", "is equal" },
-        .{ "equal2.textContent = 'is equal'", "is equal" },
-        // TODO: does not seems to work
-        // .{ "equal1.isEqualNode(equal2)", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.body.isSameNode(document.body)", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        // TODO: no test
-        .{ "link.normalize()", "undefined" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "link.baseURI", "https://lightpanda.io/opensource-browser/" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "content.removeChild(append) !== undefined", "true" },
-        .{ "last_child.__proto__.constructor.name !== 'HTMLHeadingElement'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let replace = document.createElement('div')", "undefined" },
-        .{ "link.replaceChild(replace, insertBefore) !== undefined", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "Node.ELEMENT_NODE", "1" },
-        .{ "Node.ATTRIBUTE_NODE", "2" },
-        .{ "Node.TEXT_NODE", "3" },
-        .{ "Node.CDATA_SECTION_NODE", "4" },
-        .{ "Node.PROCESSING_INSTRUCTION_NODE", "7" },
-        .{ "Node.COMMENT_NODE", "8" },
-        .{ "Node.DOCUMENT_NODE", "9" },
-        .{ "Node.DOCUMENT_TYPE_NODE", "10" },
-        .{ "Node.DOCUMENT_FRAGMENT_NODE", "11" },
-        .{ "Node.ENTITY_REFERENCE_NODE", "5" },
-        .{ "Node.ENTITY_NODE", "6" },
-        .{ "Node.NOTATION_NODE", "12" },
-    }, .{});
-}
-
-test "Browser.DOM.node.owner" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\  <div id="target-container">
-        \\     <p id="reference-node">
-        \\         I am the original reference node.
-        \\     </p>
-        \\  </div>"
-    });
-
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{
-            \\ const parser = new DOMParser();
-            \\ const newDoc = parser.parseFromString('<div id="new-node"><p>Hey</p><span>Marked</span></div>', 'text/html');
-            \\ const newNode = newDoc.getElementById('new-node');
-            \\ const parent = document.getElementById('target-container');
-            \\ const referenceNode = document.getElementById('reference-node');
-            \\ parent.insertBefore(newNode, referenceNode);
-            \\ const k = document.getElementById('new-node');
-            \\ const ptag = k.querySelector('p');
-            \\ const spanTag = k.querySelector('span');
-            \\ const anotherDoc = parser.parseFromString('<div id="another-new-node"></div>', 'text/html');
-            \\ const anotherNewNode = anotherDoc.getElementById('another-new-node');
-            \\
-            \\ parent.appendChild(anotherNewNode)
-            ,
-            "[object HTMLDivElement]",
-        },
-
-        .{ "parent.ownerDocument === newNode.ownerDocument", "true" },
-        .{ "parent.ownerDocument === anotherNewNode.ownerDocument", "true" },
-        .{ "newNode.firstChild.nodeName", "P" },
-        .{ "ptag.ownerDocument === parent.ownerDocument", "true" },
-        .{ "spanTag.ownerDocument === parent.ownerDocument", "true" },
-        .{ "parent.contains(newNode)", "true" },
-        .{ "parent.contains(anotherNewNode)", "true" },
-        .{ "anotherDoc.contains(anotherNewNode)", "false" },
-        .{ "newDoc.contains(newNode)", "false" },
-    }, .{});
+test "Browser: DOM.Node" {
+    try testing.htmlRunner("dom/node.html");
+    try testing.htmlRunner("dom/node_owner.html");
 }

src/browser/dom/node_filter.zig

@@ -75,15 +75,6 @@ pub fn verify(what_to_show: u32, filter: ?Env.Function, node: *parser.Node) !Ver
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.NodeFilter" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "NodeFilter.FILTER_ACCEPT", "1" },
-        .{ "NodeFilter.FILTER_REJECT", "2" },
-        .{ "NodeFilter.FILTER_SKIP", "3" },
-        .{ "NodeFilter.SHOW_ALL", "4294967295" },
-        .{ "NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT", "129" },
-    }, .{});
+test "Browser: DOM.NodeFilter" {
+    try testing.htmlRunner("dom/node_filter.html");
 }

src/browser/dom/node_iterator.zig

@@ -268,71 +268,6 @@ pub const NodeIterator = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.NodeFilter" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{
-            \\ const nodeIterator = document.createNodeIterator(
-            \\   document.body,
-            \\   NodeFilter.SHOW_ELEMENT,
-            \\   {
-            \\     acceptNode(node) {
-            \\       return NodeFilter.FILTER_ACCEPT;
-            \\     },
-            \\   },
-            \\ );
-            \\ nodeIterator.nextNode().nodeName;
-            ,
-            "BODY",
-        },
-        .{ "nodeIterator.nextNode().nodeName", "DIV" },
-        .{ "nodeIterator.nextNode().nodeName", "A" },
-        .{ "nodeIterator.previousNode().nodeName", "A" }, // pointer_before_current flips
-        .{ "nodeIterator.nextNode().nodeName", "A" }, // pointer_before_current flips
-        .{ "nodeIterator.previousNode().nodeName", "A" }, // pointer_before_current flips
-        .{ "nodeIterator.previousNode().nodeName", "DIV" },
-        .{ "nodeIterator.previousNode().nodeName", "BODY" },
-        .{ "nodeIterator.previousNode()", "null" }, // Not HEAD since body is root
-        .{ "nodeIterator.previousNode()", "null" }, // Keeps returning null
-        .{ "nodeIterator.nextNode().nodeName", "BODY" },
-
-        .{ "nodeIterator.nextNode().nodeName", null },
-        .{ "nodeIterator.nextNode().nodeName", null },
-        .{ "nodeIterator.nextNode().nodeName", null },
-        .{ "nodeIterator.nextNode().nodeName", "SPAN" },
-        .{ "nodeIterator.nextNode().nodeName", "P" },
-        .{ "nodeIterator.nextNode()", "null" }, // Just the last one
-        .{ "nodeIterator.nextNode()", "null" }, // Keeps returning null
-        .{ "nodeIterator.previousNode().nodeName", "P" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{
-            \\ const notationIterator = document.createNodeIterator(
-            \\   document.body,
-            \\   NodeFilter.SHOW_NOTATION,
-            \\ );
-            \\ notationIterator.nextNode();
-            ,
-            "null",
-        },
-        .{ "notationIterator.previousNode()", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "nodeIterator.filter.acceptNode(document.body)", "1" },
-        .{ "notationIterator.filter", "null" },
-        .{
-            \\ const rejectIterator = document.createNodeIterator(
-            \\   document.body,
-            \\   NodeFilter.SHOW_ALL,
-            \\   (e => { return NodeFilter.FILTER_REJECT}),
-            \\ );
-            \\ rejectIterator.filter(document.body);
-            ,
-            "2",
-        },
-    }, .{});
+test "Browser: DOM.NodeIterator" {
+    try testing.htmlRunner("dom/node_iterator.html");
 }

src/browser/dom/nodelist.zig

@@ -177,22 +177,6 @@ pub const NodeList = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.NodeList" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let list = document.getElementById('content').childNodes", "undefined" },
-        .{ "list.length", "9" },
-        .{ "list[0].__proto__.constructor.name", "Text" },
-        .{
-            \\  let i = 0;
-            \\  list.forEach(function (n, idx) {
-            \\    i += idx;
-            \\  });
-            \\  i;
-            ,
-            "36",
-        },
-    }, .{});
+test "Browser: DOM.NodeList" {
+    try testing.htmlRunner("dom/node_list.html");
 }

src/browser/dom/performance.zig

@@ -203,22 +203,6 @@ test "Performance: now" {
     }
 }
 
-test "Browser.Performance.Mark" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let performance = window.performance", null },
-        .{ "performance instanceof Performance", "true" },
-
-        .{ "let mark1 = performance.mark(\"start\")", null },
-        .{ "mark1 instanceof PerformanceMark", "true" },
-        .{ "mark1.name", "start" },
-        .{ "mark1.entryType", "mark" },
-        .{ "mark1.duration", "0" },
-        .{ "mark1.detail", "null" },
-
-        .{ "let mark2 = performance.mark(\"start\", {startTime: 32939393.9})", null },
-        .{ "mark2.startTime", "32939393.9" },
-    }, .{});
+test "Browser: Performance.Mark" {
+    try testing.htmlRunner("dom/performance.html");
 }

src/browser/dom/performance_observer.zig

@@ -53,11 +53,6 @@ const Options = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.PerformanceObserver" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "PerformanceObserver.supportedEntryTypes.length", "0" },
-    }, .{});
+test "Browser: DOM.PerformanceObserver" {
+    try testing.htmlRunner("dom/performance_observer.html");
 }

src/browser/dom/processing_instruction.zig

@@ -87,30 +87,6 @@ pub const ProcessingInstruction = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.ProcessingInstruction" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let pi = document.createProcessingInstruction('foo', 'bar')", "undefined" },
-        .{ "pi.target", "foo" },
-        .{ "pi.data", "bar" },
-        .{ "pi.data = 'foo'", "foo" },
-        .{ "pi.data", "foo" },
-
-        .{ "let pi2 = pi.cloneNode()", "undefined" },
-        .{ "pi2.nodeType", "7" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let pi11 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
-        .{ "let pi12 = document.createProcessingInstruction('target2', 'data2');", "undefined" },
-        .{ "let pi13 = document.createProcessingInstruction('target1', 'data1');", "undefined" },
-        .{ "pi11.isEqualNode(pi11)", "true" },
-        .{ "pi11.isEqualNode(pi13)", "true" },
-        .{ "pi11.isEqualNode(pi12)", "false" },
-        .{ "pi12.isEqualNode(pi13)", "false" },
-        .{ "pi11.isEqualNode(document)", "false" },
-        .{ "document.isEqualNode(pi11)", "false" },
-    }, .{});
+test "Browser: DOM.ProcessingInstruction" {
+    try testing.htmlRunner("dom/processing_instruction.html");
 }

src/browser/dom/range.zig

@@ -385,44 +385,6 @@ fn compare(node_a: *parser.Node, offset_a: u32, node_b: *parser.Node, offset_b:
 }
 
 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
-    }, .{});
+test "Browser: Range" {
+    try testing.htmlRunner("dom/range.html");
 }

src/browser/dom/shadow_root.zig

@@ -96,60 +96,6 @@ pub const ShadowRoot = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.DOM.ShadowRoot" {
-    defer testing.reset();
-
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\ <div id=conflict>nope</div>
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "const div1 = document.createElement('div');", null },
-        .{ "let sr1 = div1.attachShadow({mode: 'open'})", null },
-        .{ "sr1.host == div1", "true" },
-        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
-        .{ "div1.shadowRoot == sr1", "true" },
-
-        .{ "try { div1.attachShadow({mode: 'closed'}) } catch (e) { e }", "Error: NotSupportedError" },
-
-        .{ " sr1.append(document.createElement('div'))", null },
-        .{ " sr1.append(document.createElement('span'))", null },
-        .{ "sr1.childElementCount", "2" },
-        // re-attaching clears it
-        .{ "div1.attachShadow({mode: 'open'}) == sr1", "true" },
-        .{ "sr1.childElementCount", "0" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const div2 = document.createElement('di2');", null },
-        .{ "let sr2 = div2.attachShadow({mode: 'closed'})", null },
-        .{ "sr2.host == div2", "true" },
-        .{ "div2.shadowRoot", "null" }, // null when attached with 'closed'
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "sr2.getElementById('conflict')", "null" },
-        .{ "const n1 = document.createElement('div')", null },
-        .{ "n1.id = 'conflict'", null },
-        .{ "sr2.append(n1)", null },
-        .{ "sr2.getElementById('conflict') == n1", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const acss = sr2.adoptedStyleSheets", null },
-        .{ "acss.length", "0" },
-        .{ "acss.push(new CSSStyleSheet())", null },
-        .{ "sr2.adoptedStyleSheets.length", "1" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "sr1.innerHTML = '<p>hello</p>'", null },
-        .{ "sr1.innerHTML", "<p>hello</p>" },
-        .{ "sr1.querySelector('*')", "[object HTMLParagraphElement]" },
-
-        .{ "sr1.innerHTML = null", null },
-        .{ "sr1.innerHTML", "" },
-        .{ "sr1.querySelector('*')", "null" },
-    }, .{});
+test "Browser: DOM.ShadowRoot" {
+    try testing.htmlRunner("dom/shadow_root.html");
 }

src/browser/dom/text.zig

@@ -56,31 +56,7 @@ pub const Text = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.DOM.Text" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let t = new Text('foo')", "undefined" },
-        .{ "t.data", "foo" },
-
-        .{ "let emptyt = new Text()", "undefined" },
-        .{ "emptyt.data", "" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let text = document.getElementById('link').firstChild", "undefined" },
-        .{ "text.wholeText === 'OK'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "text.data = 'OK modified'", "OK modified" },
-        .{ "let split = text.splitText('OK'.length)", "undefined" },
-        .{ "split.data === ' modified'", "true" },
-        .{ "text.data === 'OK'", "true" },
-    }, .{});
+test "Browser: DOM.Text" {
+    try testing.htmlRunner("dom/text.html");
 }

src/browser/dom/token_list.zig

@@ -169,77 +169,7 @@ pub const Iterator = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.DOM.TokenList" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let gs = document.getElementById('para-empty')", "undefined" },
-        .{ "let cl = gs.classList", "undefined" },
-        .{ "gs.className", "ok empty" },
-        .{ "cl.value", "ok empty" },
-        .{ "cl.length", "2" },
-        .{ "gs.className = 'foo bar baz'", "foo bar baz" },
-        .{ "gs.className", "foo bar baz" },
-        .{ "cl.length", "3" },
-        .{ "gs.className = 'ok empty'", "ok empty" },
-        .{ "cl.length", "2" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let cl2 = gs.classList", "undefined" },
-        .{ "cl2.length", "2" },
-        .{ "cl2.item(0)", "ok" },
-        .{ "cl2.item(1)", "empty" },
-        .{ "cl2.contains('ok')", "true" },
-        .{ "cl2.contains('nok')", "false" },
-        .{ "cl2.add('foo', 'bar', 'baz')", "undefined" },
-        .{ "cl2.length", "5" },
-        .{ "cl2.remove('foo', 'bar', 'baz')", "undefined" },
-        .{ "cl2.length", "2" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let cl3 = gs.classList", "undefined" },
-        .{ "cl3.toggle('ok')", "false" },
-        .{ "cl3.toggle('ok')", "true" },
-        .{ "cl3.length", "2" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let cl4 = gs.classList", "undefined" },
-        .{ "cl4.replace('ok', 'nok')", "true" },
-        .{ "cl4.value", "empty nok" },
-        .{ "cl4.replace('nok', 'ok')", "true" },
-        .{ "cl4.value", "empty ok" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let cl5 = gs.classList", "undefined" },
-        .{ "let keys = [...cl5.keys()]", "undefined" },
-        .{ "keys.length", "2" },
-        .{ "keys[0]", "0" },
-        .{ "keys[1]", "1" },
-
-        .{ "let values = [...cl5.values()]", "undefined" },
-        .{ "values.length", "2" },
-        .{ "values[0]", "empty" },
-        .{ "values[1]", "ok" },
-
-        .{ "let entries = [...cl5.entries()]", "undefined" },
-        .{ "entries.length", "2" },
-        .{ "entries[0]", "0,empty" },
-        .{ "entries[1]", "1,ok" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let cl6 = gs.classList", "undefined" },
-        .{ "cl6.value = 'a  b  ccc'", "a  b  ccc" },
-        .{ "cl6.value", "a  b  ccc" },
-        .{ "cl6.toString()", "a  b  ccc" },
-    }, .{});
+test "Browser: DOM.TokenList" {
+    try testing.htmlRunner("dom/token_list.html");
 }

src/browser/encoding/TextDecoder.zig

@@ -20,6 +20,7 @@ const std = @import("std");
 const log = @import("../../log.zig");
 
 const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
 
 // https://encoding.spec.whatwg.org/#interface-textdecoder
 const TextDecoder = @This();
@@ -37,6 +38,7 @@ const Options = struct {
 
 fatal: bool,
 ignore_bom: bool,
+stream: std.ArrayList(u8),
 
 pub fn constructor(label_: ?[]const u8, opts_: ?Options) !TextDecoder {
     if (label_) |l| {
@@ -47,6 +49,7 @@ pub fn constructor(label_: ?[]const u8, opts_: ?Options) !TextDecoder {
     }
     const opts = opts_ orelse Options{};
     return .{
+        .stream = .empty,
         .fatal = opts.fatal,
         .ignore_bom = opts.ignoreBOM,
     };
@@ -64,18 +67,34 @@ pub fn get_fatal(self: *const TextDecoder) bool {
     return self.fatal;
 }
 
-// TODO: Should accept an ArrayBuffer, TypedArray or DataView
-// js.zig will currently only map a TypedArray to our []const u8.
-pub fn _decode(self: *const TextDecoder, v: []const u8) ![]const u8 {
-    if (self.fatal and !std.unicode.utf8ValidateSlice(v)) {
+const DecodeOptions = struct {
+    stream: bool = false,
+};
+pub fn _decode(self: *TextDecoder, input_: ?[]const u8, opts_: ?DecodeOptions, page: *Page) ![]const u8 {
+    var str = input_ orelse return "";
+    const opts: DecodeOptions = opts_ orelse .{};
+
+    if (self.stream.items.len > 0) {
+        try self.stream.appendSlice(page.arena, str);
+        str = self.stream.items;
+    }
+
+    if (self.fatal and !std.unicode.utf8ValidateSlice(str)) {
+        if (opts.stream) {
+            if (self.stream.items.len == 0) {
+                try self.stream.appendSlice(page.arena, str);
+            }
+            return "";
+        }
         return error.InvalidUtf8;
     }
 
-    if (self.ignore_bom == false and std.mem.startsWith(u8, v, &.{ 0xEF, 0xBB, 0xBF })) {
-        return v[3..];
+    self.stream.clearRetainingCapacity();
+    if (self.ignore_bom == false and std.mem.startsWith(u8, str, &.{ 0xEF, 0xBB, 0xBF })) {
+        return str[3..];
     }
 
-    return v;
+    return str;
 }
 
 const testing = @import("../../testing.zig");

src/browser/env.zig

@@ -36,6 +36,8 @@ const WebApis = struct {
         @import("xhr/form_data.zig").Interfaces,
         @import("xhr/File.zig"),
         @import("xmlserializer/xmlserializer.zig").Interfaces,
+        @import("fetch/fetch.zig").Interfaces,
+        @import("streams/streams.zig").Interfaces,
     });
 };
 

src/browser/events/event.zig

@@ -33,11 +33,20 @@ const AbortSignal = @import("../html/AbortController.zig").AbortSignal;
 const CustomEvent = @import("custom_event.zig").CustomEvent;
 const ProgressEvent = @import("../xhr/progress_event.zig").ProgressEvent;
 const MouseEvent = @import("mouse_event.zig").MouseEvent;
+const KeyboardEvent = @import("keyboard_event.zig").KeyboardEvent;
 const ErrorEvent = @import("../html/error_event.zig").ErrorEvent;
 const MessageEvent = @import("../dom/MessageChannel.zig").MessageEvent;
 
 // Event interfaces
-pub const Interfaces = .{ Event, CustomEvent, ProgressEvent, MouseEvent, ErrorEvent, MessageEvent };
+pub const Interfaces = .{
+    Event,
+    CustomEvent,
+    ProgressEvent,
+    MouseEvent,
+    KeyboardEvent,
+    ErrorEvent,
+    MessageEvent,
+};
 
 pub const Union = generate.Union(Interfaces);
 
@@ -55,14 +64,15 @@ pub const Event = struct {
     pub const _AT_TARGET = 2;
     pub const _BUBBLING_PHASE = 3;
 
-    pub fn toInterface(evt: *parser.Event) !Union {
-        return switch (try parser.eventGetInternalType(evt)) {
+    pub fn toInterface(evt: *parser.Event) Union {
+        return switch (parser.eventGetInternalType(evt)) {
             .event, .abort_signal, .xhr_event => .{ .Event = evt },
             .custom_event => .{ .CustomEvent = @as(*CustomEvent, @ptrCast(evt)).* },
             .progress_event => .{ .ProgressEvent = @as(*ProgressEvent, @ptrCast(evt)).* },
             .mouse_event => .{ .MouseEvent = @as(*parser.MouseEvent, @ptrCast(evt)) },
             .error_event => .{ .ErrorEvent = @as(*ErrorEvent, @ptrCast(evt)).* },
             .message_event => .{ .MessageEvent = @as(*MessageEvent, @ptrCast(evt)).* },
+            .keyboard_event => .{ .KeyboardEvent = @as(*parser.KeyboardEvent, @ptrCast(evt)) },
         };
     }
 
@@ -79,41 +89,41 @@ pub const Event = struct {
     }
 
     pub fn get_target(self: *parser.Event, page: *Page) !?EventTargetUnion {
-        const et = try parser.eventTarget(self);
+        const et = parser.eventTarget(self);
         if (et == null) return null;
         return try EventTarget.toInterface(et.?, page);
     }
 
     pub fn get_currentTarget(self: *parser.Event, page: *Page) !?EventTargetUnion {
-        const et = try parser.eventCurrentTarget(self);
+        const et = parser.eventCurrentTarget(self);
         if (et == null) return null;
         return try EventTarget.toInterface(et.?, page);
     }
 
-    pub fn get_eventPhase(self: *parser.Event) !u8 {
-        return try parser.eventPhase(self);
+    pub fn get_eventPhase(self: *parser.Event) u8 {
+        return parser.eventPhase(self);
     }
 
-    pub fn get_bubbles(self: *parser.Event) !bool {
-        return try parser.eventBubbles(self);
+    pub fn get_bubbles(self: *parser.Event) bool {
+        return parser.eventBubbles(self);
     }
 
-    pub fn get_cancelable(self: *parser.Event) !bool {
-        return try parser.eventCancelable(self);
+    pub fn get_cancelable(self: *parser.Event) bool {
+        return parser.eventCancelable(self);
     }
 
-    pub fn get_defaultPrevented(self: *parser.Event) !bool {
-        return try parser.eventDefaultPrevented(self);
+    pub fn get_defaultPrevented(self: *parser.Event) bool {
+        return parser.eventDefaultPrevented(self);
     }
 
-    pub fn get_isTrusted(self: *parser.Event) !bool {
-        return try parser.eventIsTrusted(self);
+    pub fn get_isTrusted(self: *parser.Event) bool {
+        return parser.eventIsTrusted(self);
     }
 
     // Even though this is supposed to to provide microsecond resolution, browser
     // return coarser values to protect against fingerprinting. libdom returns
     // seconds, which is good enough.
-    pub fn get_timeStamp(self: *parser.Event) !u32 {
+    pub fn get_timeStamp(self: *parser.Event) u64 {
         return parser.eventTimestamp(self);
     }
 
@@ -133,19 +143,19 @@ pub const Event = struct {
     }
 
     pub fn _stopPropagation(self: *parser.Event) !void {
-        return try parser.eventStopPropagation(self);
+        return parser.eventStopPropagation(self);
     }
 
     pub fn _stopImmediatePropagation(self: *parser.Event) !void {
-        return try parser.eventStopImmediatePropagation(self);
+        return parser.eventStopImmediatePropagation(self);
     }
 
     pub fn _preventDefault(self: *parser.Event) !void {
-        return try parser.eventPreventDefault(self);
+        return parser.eventPreventDefault(self);
     }
 
     pub fn _composedPath(self: *parser.Event, page: *Page) ![]const EventTargetUnion {
-        const et_ = try parser.eventTarget(self);
+        const et_ = parser.eventTarget(self);
         const et = et_ orelse return &.{};
 
         var node: ?*parser.Node = switch (try parser.eventTargetInternalType(et)) {
@@ -316,11 +326,7 @@ pub const EventHandler = struct {
     }
 
     fn handle(node: *parser.EventNode, event: *parser.Event) void {
-        const ievent = Event.toInterface(event) catch |err| {
-            log.err(.app, "toInterface error", .{ .err = err });
-            return;
-        };
-
+        const ievent = Event.toInterface(event);
         const self: *EventHandler = @fieldParentPtr("node", node);
         var result: Function.Result = undefined;
         self.callback.tryCall(void, .{ievent}, &result) catch {
@@ -332,7 +338,7 @@ pub const EventHandler = struct {
         };
 
         if (self.once) {
-            const target = (parser.eventTarget(event) catch return).?;
+            const target = parser.eventTarget(event).?;
             const typ = parser.eventType(event) catch return;
             parser.eventTargetRemoveEventListener(
                 target,

src/browser/events/keyboard_event.zig

@@ -0,0 +1,160 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const log = @import("../../log.zig");
+const builtin = @import("builtin");
+
+const parser = @import("../netsurf.zig");
+const Event = @import("event.zig").Event;
+const JsObject = @import("../env.zig").JsObject;
+
+// TODO: We currently don't have a UIEvent interface so we skip it in the prototype chain.
+// https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
+const UIEvent = Event;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent
+pub const KeyboardEvent = struct {
+    pub const Self = parser.KeyboardEvent;
+    pub const prototype = *UIEvent;
+
+    pub const ConstructorOptions = struct {
+        key: []const u8 = "",
+        code: []const u8 = "",
+        location: parser.KeyboardEventOpts.LocationCode = .standard,
+        repeat: bool = false,
+        isComposing: bool = false,
+        // Currently not supported but we take as argument.
+        charCode: u32 = 0,
+        // Currently not supported but we take as argument.
+        keyCode: u32 = 0,
+        // Currently not supported but we take as argument.
+        which: u32 = 0,
+        ctrlKey: bool = false,
+        shiftKey: bool = false,
+        altKey: bool = false,
+        metaKey: bool = false,
+    };
+
+    pub fn constructor(event_type: []const u8, maybe_options: ?ConstructorOptions) !*parser.KeyboardEvent {
+        const options: ConstructorOptions = maybe_options orelse .{};
+
+        var event = try parser.keyboardEventCreate();
+        parser.eventSetInternalType(@ptrCast(&event), .keyboard_event);
+
+        try parser.keyboardEventInit(
+            event,
+            event_type,
+            .{
+                .key = options.key,
+                .code = options.code,
+                .location = options.location,
+                .repeat = options.repeat,
+                .is_composing = options.isComposing,
+                .ctrl_key = options.ctrlKey,
+                .shift_key = options.shiftKey,
+                .alt_key = options.altKey,
+                .meta_key = options.metaKey,
+            },
+        );
+
+        return event;
+    }
+
+    // Returns the modifier state for given modifier key.
+    pub fn _getModifierState(self: *Self, key: []const u8) bool {
+        // Chrome and Firefox do case-sensitive match, here we prefer the same.
+        if (std.mem.eql(u8, key, "Alt")) {
+            return get_altKey(self);
+        }
+
+        if (std.mem.eql(u8, key, "AltGraph")) {
+            return (get_altKey(self) and get_ctrlKey(self));
+        }
+
+        if (std.mem.eql(u8, key, "Control")) {
+            return get_ctrlKey(self);
+        }
+
+        if (std.mem.eql(u8, key, "Shift")) {
+            return get_shiftKey(self);
+        }
+
+        if (std.mem.eql(u8, key, "Meta") or std.mem.eql(u8, key, "OS")) {
+            return get_metaKey(self);
+        }
+
+        // Special case for IE.
+        if (comptime builtin.os.tag == .windows) {
+            if (std.mem.eql(u8, key, "Win")) {
+                return get_metaKey(self);
+            }
+        }
+
+        // getModifierState() also accepts a deprecated virtual modifier named "Accel".
+        // event.getModifierState("Accel") returns true when at least one of
+        // KeyboardEvent.ctrlKey or KeyboardEvent.metaKey is true.
+        //
+        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#accel_virtual_modifier
+        if (std.mem.eql(u8, key, "Accel")) {
+            return (get_ctrlKey(self) or get_metaKey(self));
+        }
+
+        // TODO: Add support for "CapsLock", "ScrollLock".
+        return false;
+    }
+
+    // Getters.
+
+    pub fn get_altKey(self: *Self) bool {
+        return parser.keyboardEventKeyIsSet(self, .alt);
+    }
+
+    pub fn get_ctrlKey(self: *Self) bool {
+        return parser.keyboardEventKeyIsSet(self, .ctrl);
+    }
+
+    pub fn get_metaKey(self: *Self) bool {
+        return parser.keyboardEventKeyIsSet(self, .meta);
+    }
+
+    pub fn get_shiftKey(self: *Self) bool {
+        return parser.keyboardEventKeyIsSet(self, .shift);
+    }
+
+    pub fn get_isComposing(self: *Self) bool {
+        return self.is_composing;
+    }
+
+    pub fn get_location(self: *Self) u32 {
+        return self.location;
+    }
+
+    pub fn get_key(self: *Self) ![]const u8 {
+        return parser.keyboardEventGetKey(self);
+    }
+
+    pub fn get_repeat(self: *Self) bool {
+        return self.repeat;
+    }
+};
+
+const testing = @import("../../testing.zig");
+test "Browser: Events.Keyboard" {
+    try testing.htmlRunner("events/keyboard.html");
+}

src/browser/events/mouse_event.zig

@@ -56,7 +56,7 @@ pub const MouseEvent = struct {
         const opts = opts_ orelse MouseEventInit{};
 
         var mouse_event = try parser.mouseEventCreate();
-        try parser.eventSetInternalType(@ptrCast(&mouse_event), .mouse_event);
+        parser.eventSetInternalType(@ptrCast(&mouse_event), .mouse_event);
 
         try parser.mouseEventInit(mouse_event, event_type, .{
             .x = opts.clientX,
@@ -68,6 +68,10 @@ pub const MouseEvent = struct {
             .button = @intFromEnum(opts.button),
         });
 
+        if (!std.mem.eql(u8, event_type, "click")) {
+            log.warn(.mouse_event, "unsupported mouse event", .{ .event = event_type });
+        }
+
         return mouse_event;
     }
 

src/browser/fetch/Headers.zig

@@ -0,0 +1,227 @@
+// 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 URL = @import("../../url.zig").URL;
+const Page = @import("../page.zig").Page;
+
+const iterator = @import("../iterator/iterator.zig");
+
+const v8 = @import("v8");
+const Env = @import("../env.zig").Env;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Headers
+const Headers = @This();
+
+// Case-Insensitive String HashMap.
+// This allows us to avoid having to allocate lowercase keys all the time.
+const HeaderHashMap = std.HashMapUnmanaged([]const u8, []const u8, struct {
+    pub fn hash(_: @This(), s: []const u8) u64 {
+        var buf: [64]u8 = undefined;
+        var hasher = std.hash.Wyhash.init(s.len);
+
+        var key = s;
+        while (key.len >= 64) {
+            const lower = std.ascii.lowerString(buf[0..], key[0..64]);
+            hasher.update(lower);
+            key = key[64..];
+        }
+
+        if (key.len > 0) {
+            const lower = std.ascii.lowerString(buf[0..key.len], key);
+            hasher.update(lower);
+        }
+
+        return hasher.final();
+    }
+
+    pub fn eql(_: @This(), a: []const u8, b: []const u8) bool {
+        return std.ascii.eqlIgnoreCase(a, b);
+    }
+}, 80);
+
+headers: HeaderHashMap = .empty,
+
+// They can either be:
+//
+// 1. An array of string pairs.
+// 2. An object with string keys to string values.
+// 3. Another Headers object.
+pub const HeadersInit = union(enum) {
+    // List of Pairs of []const u8
+    strings: []const [2][]const u8,
+    // Headers
+    headers: *Headers,
+    // Mappings
+    object: Env.JsObject,
+};
+
+pub fn constructor(_init: ?HeadersInit, page: *Page) !Headers {
+    const arena = page.arena;
+    var headers: HeaderHashMap = .empty;
+
+    if (_init) |init| {
+        switch (init) {
+            .strings => |kvs| {
+                for (kvs) |pair| {
+                    const key = try arena.dupe(u8, pair[0]);
+                    const value = try arena.dupe(u8, pair[1]);
+
+                    try headers.put(arena, key, value);
+                }
+            },
+            .headers => |hdrs| {
+                var iter = hdrs.headers.iterator();
+                while (iter.next()) |entry| {
+                    try headers.put(arena, entry.key_ptr.*, entry.value_ptr.*);
+                }
+            },
+            .object => |obj| {
+                var iter = obj.nameIterator();
+                while (try iter.next()) |name_value| {
+                    const name = try name_value.toString(arena);
+                    const value = try obj.get(name);
+                    const value_string = try value.toString(arena);
+
+                    try headers.put(arena, name, value_string);
+                }
+            },
+        }
+    }
+
+    return .{
+        .headers = headers,
+    };
+}
+
+pub fn append(self: *Headers, name: []const u8, value: []const u8, allocator: std.mem.Allocator) !void {
+    const key = try allocator.dupe(u8, name);
+    const gop = try self.headers.getOrPut(allocator, key);
+
+    if (gop.found_existing) {
+        // If we found it, append the value.
+        const new_value = try std.fmt.allocPrint(allocator, "{s}, {s}", .{ gop.value_ptr.*, value });
+        gop.value_ptr.* = new_value;
+    } else {
+        // Otherwise, we should just put it in.
+        gop.value_ptr.* = try allocator.dupe(u8, value);
+    }
+}
+
+pub fn _append(self: *Headers, name: []const u8, value: []const u8, page: *Page) !void {
+    const arena = page.arena;
+    try self.append(name, value, arena);
+}
+
+pub fn _delete(self: *Headers, name: []const u8) void {
+    _ = self.headers.remove(name);
+}
+
+pub const HeadersEntryIterator = struct {
+    slot: [2][]const u8,
+    iter: HeaderHashMap.Iterator,
+
+    // TODO: these SHOULD be in lexigraphical order but I'm not sure how actually
+    // important that is.
+    pub fn _next(self: *HeadersEntryIterator) ?[2][]const u8 {
+        if (self.iter.next()) |entry| {
+            self.slot[0] = entry.key_ptr.*;
+            self.slot[1] = entry.value_ptr.*;
+            return self.slot;
+        } else {
+            return null;
+        }
+    }
+};
+
+pub fn _entries(self: *const Headers) HeadersEntryIterable {
+    return .{
+        .inner = .{
+            .slot = undefined,
+            .iter = self.headers.iterator(),
+        },
+    };
+}
+
+pub fn _forEach(self: *Headers, callback_fn: Env.Function, this_arg: ?Env.JsObject) !void {
+    var iter = self.headers.iterator();
+
+    const cb = if (this_arg) |this| try callback_fn.withThis(this) else callback_fn;
+
+    while (iter.next()) |entry| {
+        try cb.call(void, .{ entry.key_ptr.*, entry.value_ptr.*, self });
+    }
+}
+
+pub fn _get(self: *const Headers, name: []const u8) ?[]const u8 {
+    return self.headers.get(name);
+}
+
+pub fn _has(self: *const Headers, name: []const u8) bool {
+    return self.headers.contains(name);
+}
+
+pub const HeadersKeyIterator = struct {
+    iter: HeaderHashMap.KeyIterator,
+
+    pub fn _next(self: *HeadersKeyIterator) ?[]const u8 {
+        if (self.iter.next()) |key| {
+            return key.*;
+        } else {
+            return null;
+        }
+    }
+};
+
+pub fn _keys(self: *const Headers) HeadersKeyIterable {
+    return .{ .inner = .{ .iter = self.headers.keyIterator() } };
+}
+
+pub fn _set(self: *Headers, name: []const u8, value: []const u8, page: *Page) !void {
+    const arena = page.arena;
+
+    const key = try arena.dupe(u8, name);
+    const gop = try self.headers.getOrPut(arena, key);
+    gop.value_ptr.* = try arena.dupe(u8, value);
+}
+
+pub const HeadersValueIterator = struct {
+    iter: HeaderHashMap.ValueIterator,
+
+    pub fn _next(self: *HeadersValueIterator) ?[]const u8 {
+        if (self.iter.next()) |value| {
+            return value.*;
+        } else {
+            return null;
+        }
+    }
+};
+
+pub fn _values(self: *const Headers) HeadersValueIterable {
+    return .{ .inner = .{ .iter = self.headers.valueIterator() } };
+}
+
+pub const HeadersKeyIterable = iterator.Iterable(HeadersKeyIterator, "HeadersKeyIterator");
+pub const HeadersValueIterable = iterator.Iterable(HeadersValueIterator, "HeadersValueIterator");
+pub const HeadersEntryIterable = iterator.Iterable(HeadersEntryIterator, "HeadersEntryIterator");
+
+const testing = @import("../../testing.zig");
+test "fetch: Headers" {
+    try testing.htmlRunner("fetch/headers.html");
+}

src/browser/fetch/Request.zig

@@ -0,0 +1,266 @@
+// 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 URL = @import("../../url.zig").URL;
+const Page = @import("../page.zig").Page;
+
+const Response = @import("./Response.zig");
+const Http = @import("../../http/Http.zig");
+const ReadableStream = @import("../streams/ReadableStream.zig");
+
+const v8 = @import("v8");
+const Env = @import("../env.zig").Env;
+
+const Headers = @import("Headers.zig");
+const HeadersInit = @import("Headers.zig").HeadersInit;
+
+pub const RequestInput = union(enum) {
+    string: []const u8,
+    request: *Request,
+};
+
+pub const RequestCache = enum {
+    default,
+    @"no-store",
+    reload,
+    @"no-cache",
+    @"force-cache",
+    @"only-if-cached",
+
+    pub fn fromString(str: []const u8) ?RequestCache {
+        for (std.enums.values(RequestCache)) |cache| {
+            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
+                return cache;
+            }
+        } else {
+            return null;
+        }
+    }
+
+    pub fn toString(self: RequestCache) []const u8 {
+        return @tagName(self);
+    }
+};
+
+pub const RequestCredentials = enum {
+    omit,
+    @"same-origin",
+    include,
+
+    pub fn fromString(str: []const u8) ?RequestCredentials {
+        for (std.enums.values(RequestCredentials)) |cache| {
+            if (std.ascii.eqlIgnoreCase(str, @tagName(cache))) {
+                return cache;
+            }
+        } else {
+            return null;
+        }
+    }
+
+    pub fn toString(self: RequestCredentials) []const u8 {
+        return @tagName(self);
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/RequestInit
+pub const RequestInit = struct {
+    body: ?[]const u8 = null,
+    cache: ?[]const u8 = null,
+    credentials: ?[]const u8 = null,
+    headers: ?HeadersInit = null,
+    integrity: ?[]const u8 = null,
+    method: ?[]const u8 = null,
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Request/Request
+const Request = @This();
+
+method: Http.Method,
+url: [:0]const u8,
+cache: RequestCache,
+credentials: RequestCredentials,
+headers: Headers,
+body: ?[]const u8,
+body_used: bool = false,
+integrity: []const u8,
+
+pub fn constructor(input: RequestInput, _options: ?RequestInit, page: *Page) !Request {
+    const arena = page.arena;
+    const options: RequestInit = _options orelse .{};
+
+    const url: [:0]const u8 = blk: switch (input) {
+        .string => |str| {
+            break :blk try URL.stitch(arena, str, page.url.raw, .{ .null_terminated = true });
+        },
+        .request => |req| {
+            break :blk try arena.dupeZ(u8, req.url);
+        },
+    };
+
+    const body = if (options.body) |body| try arena.dupe(u8, body) else null;
+    const cache = (if (options.cache) |cache| RequestCache.fromString(cache) else null) orelse RequestCache.default;
+    const credentials = (if (options.credentials) |creds| RequestCredentials.fromString(creds) else null) orelse RequestCredentials.@"same-origin";
+    const integrity = if (options.integrity) |integ| try arena.dupe(u8, integ) else "";
+    const headers: Headers = if (options.headers) |hdrs| try Headers.constructor(hdrs, page) else .{};
+
+    const method: Http.Method = blk: {
+        if (options.method) |given_method| {
+            for (std.enums.values(Http.Method)) |method| {
+                if (std.ascii.eqlIgnoreCase(given_method, @tagName(method))) {
+                    break :blk method;
+                }
+            } else {
+                return error.TypeError;
+            }
+        } else {
+            break :blk Http.Method.GET;
+        }
+    };
+
+    return .{
+        .method = method,
+        .url = url,
+        .cache = cache,
+        .credentials = credentials,
+        .headers = headers,
+        .body = body,
+        .integrity = integrity,
+    };
+}
+
+pub fn get_body(self: *const Request, page: *Page) !?*ReadableStream {
+    if (self.body) |body| {
+        const stream = try ReadableStream.constructor(null, null, page);
+        try stream.queue.append(page.arena, body);
+        return stream;
+    } else return null;
+}
+
+pub fn get_bodyUsed(self: *const Request) bool {
+    return self.body_used;
+}
+
+pub fn get_cache(self: *const Request) RequestCache {
+    return self.cache;
+}
+
+pub fn get_credentials(self: *const Request) RequestCredentials {
+    return self.credentials;
+}
+
+pub fn get_headers(self: *Request) *Headers {
+    return &self.headers;
+}
+
+pub fn get_integrity(self: *const Request) []const u8 {
+    return self.integrity;
+}
+
+// TODO: If we ever support the Navigation API, we need isHistoryNavigation
+// https://developer.mozilla.org/en-US/docs/Web/API/Request/isHistoryNavigation
+
+pub fn get_method(self: *const Request) []const u8 {
+    return @tagName(self.method);
+}
+
+pub fn get_url(self: *const Request) []const u8 {
+    return self.url;
+}
+
+pub fn _clone(self: *Request) !Request {
+    // Not allowed to clone if the body was used.
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    // OK to just return the same fields BECAUSE
+    // all of these fields are read-only and can't be modified.
+    return Request{
+        .body = self.body,
+        .body_used = self.body_used,
+        .cache = self.cache,
+        .credentials = self.credentials,
+        .headers = self.headers,
+        .method = self.method,
+        .integrity = self.integrity,
+        .url = self.url,
+    };
+}
+
+pub fn _bytes(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    try resolver.resolve(self.body);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+pub fn _json(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    const p = std.json.parseFromSliceLeaky(
+        std.json.Value,
+        page.call_arena,
+        self.body,
+        .{},
+    ) catch |e| {
+        log.info(.browser, "invalid json", .{ .err = e, .source = "Request" });
+        return error.SyntaxError;
+    };
+
+    try resolver.resolve(p);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+pub fn _text(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    try resolver.resolve(self.body);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+const testing = @import("../../testing.zig");
+test "fetch: Request" {
+    try testing.htmlRunner("fetch/request.html");
+}

src/browser/fetch/Response.zig

@@ -0,0 +1,196 @@
+// 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 v8 = @import("v8");
+
+const HttpClient = @import("../../http/Client.zig");
+const Http = @import("../../http/Http.zig");
+const URL = @import("../../url.zig").URL;
+
+const ReadableStream = @import("../streams/ReadableStream.zig");
+const Headers = @import("Headers.zig");
+const HeadersInit = @import("Headers.zig").HeadersInit;
+
+const Env = @import("../env.zig").Env;
+const Mime = @import("../mime.zig").Mime;
+const Page = @import("../page.zig").Page;
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Response
+const Response = @This();
+
+status: u16 = 200,
+status_text: []const u8 = "",
+headers: Headers,
+mime: ?Mime = null,
+url: []const u8 = "",
+body: []const u8 = "",
+body_used: bool = false,
+redirected: bool = false,
+
+const ResponseBody = union(enum) {
+    string: []const u8,
+};
+
+const ResponseOptions = struct {
+    status: u16 = 200,
+    statusText: ?[]const u8 = null,
+    headers: ?HeadersInit = null,
+};
+
+pub fn constructor(_input: ?ResponseBody, _options: ?ResponseOptions, page: *Page) !Response {
+    const arena = page.arena;
+
+    const options: ResponseOptions = _options orelse .{};
+
+    const body = blk: {
+        if (_input) |input| {
+            switch (input) {
+                .string => |str| {
+                    break :blk try arena.dupe(u8, str);
+                },
+            }
+        } else {
+            break :blk "";
+        }
+    };
+
+    const headers: Headers = if (options.headers) |hdrs| try Headers.constructor(hdrs, page) else .{};
+    const status_text = if (options.statusText) |st| try arena.dupe(u8, st) else "";
+
+    return .{
+        .body = body,
+        .headers = headers,
+        .status = options.status,
+        .status_text = status_text,
+    };
+}
+
+pub fn get_body(self: *const Response, page: *Page) !*ReadableStream {
+    const stream = try ReadableStream.constructor(null, null, page);
+    try stream.queue.append(page.arena, self.body);
+    return stream;
+}
+
+pub fn get_bodyUsed(self: *const Response) bool {
+    return self.body_used;
+}
+
+pub fn get_headers(self: *Response) *Headers {
+    return &self.headers;
+}
+
+pub fn get_ok(self: *const Response) bool {
+    return self.status >= 200 and self.status <= 299;
+}
+
+pub fn get_redirected(self: *const Response) bool {
+    return self.redirected;
+}
+
+pub fn get_status(self: *const Response) u16 {
+    return self.status;
+}
+
+pub fn get_statusText(self: *const Response) []const u8 {
+    return self.status_text;
+}
+
+pub fn get_url(self: *const Response) []const u8 {
+    return self.url;
+}
+
+pub fn _clone(self: *const Response) !Response {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    // OK to just return the same fields BECAUSE
+    // all of these fields are read-only and can't be modified.
+    return Response{
+        .body = self.body,
+        .body_used = self.body_used,
+        .mime = self.mime,
+        .headers = self.headers,
+        .redirected = self.redirected,
+        .status = self.status,
+        .url = self.url,
+    };
+}
+
+pub fn _bytes(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    try resolver.resolve(self.body);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+pub fn _json(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    const p = std.json.parseFromSliceLeaky(
+        std.json.Value,
+        page.call_arena,
+        self.body,
+        .{},
+    ) catch |e| {
+        log.info(.browser, "invalid json", .{ .err = e, .source = "Response" });
+        return error.SyntaxError;
+    };
+
+    try resolver.resolve(p);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+pub fn _text(self: *Response, page: *Page) !Env.Promise {
+    if (self.body_used) {
+        return error.TypeError;
+    }
+
+    const resolver = Env.PromiseResolver{
+        .js_context = page.main_context,
+        .resolver = v8.PromiseResolver.init(page.main_context.v8_context),
+    };
+
+    try resolver.resolve(self.body);
+    self.body_used = true;
+    return resolver.promise();
+}
+
+const testing = @import("../../testing.zig");
+test "fetch: Response" {
+    try testing.htmlRunner("fetch/response.html");
+}

src/browser/fetch/fetch.zig

@@ -0,0 +1,212 @@
+// 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 Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+
+const Http = @import("../../http/Http.zig");
+const HttpClient = @import("../../http/Client.zig");
+const Mime = @import("../mime.zig").Mime;
+
+const Headers = @import("Headers.zig");
+
+const RequestInput = @import("Request.zig").RequestInput;
+const RequestInit = @import("Request.zig").RequestInit;
+const Request = @import("Request.zig");
+const Response = @import("Response.zig");
+
+pub const Interfaces = .{
+    @import("Headers.zig"),
+    @import("Headers.zig").HeadersEntryIterable,
+    @import("Headers.zig").HeadersKeyIterable,
+    @import("Headers.zig").HeadersValueIterable,
+    @import("Request.zig"),
+    @import("Response.zig"),
+};
+
+pub const FetchContext = struct {
+    arena: std.mem.Allocator,
+    js_ctx: *Env.JsContext,
+    promise_resolver: Env.PersistentPromiseResolver,
+
+    method: Http.Method,
+    url: []const u8,
+    body: std.ArrayListUnmanaged(u8) = .empty,
+    headers: std.ArrayListUnmanaged([]const u8) = .empty,
+    status: u16 = 0,
+    mime: ?Mime = null,
+    transfer: ?*HttpClient.Transfer = null,
+
+    /// This effectively takes ownership of the FetchContext.
+    ///
+    /// We just return the underlying slices used for `headers`
+    /// and for `body` here to avoid an allocation.
+    pub fn toResponse(self: *const FetchContext) !Response {
+        var headers: Headers = .{};
+
+        // convert into Headers
+        for (self.headers.items) |hdr| {
+            var iter = std.mem.splitScalar(u8, hdr, ':');
+            const name = iter.next() orelse "";
+            const value = iter.next() orelse "";
+            try headers.append(name, value, self.arena);
+        }
+
+        return Response{
+            .status = self.status,
+            .headers = headers,
+            .mime = self.mime,
+            .body = self.body.items,
+            .url = self.url,
+        };
+    }
+};
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch
+pub fn fetch(input: RequestInput, options: ?RequestInit, page: *Page) !Env.Promise {
+    const arena = page.arena;
+
+    const req = try Request.constructor(input, options, page);
+    var headers = try Http.Headers.init();
+
+    // Copy our headers into the HTTP headers.
+    var header_iter = req.headers.headers.iterator();
+    while (header_iter.next()) |entry| {
+        const combined = try std.fmt.allocPrintSentinel(
+            page.arena,
+            "{s}: {s}",
+            .{ entry.key_ptr.*, entry.value_ptr.* },
+            0,
+        );
+        try headers.add(combined.ptr);
+    }
+
+    try page.requestCookie(.{}).headersForRequest(arena, req.url, &headers);
+
+    const resolver = try page.main_context.createPersistentPromiseResolver();
+
+    const fetch_ctx = try arena.create(FetchContext);
+    fetch_ctx.* = .{
+        .arena = arena,
+        .js_ctx = page.main_context,
+        .promise_resolver = resolver,
+        .method = req.method,
+        .url = req.url,
+    };
+
+    try page.http_client.request(.{
+        .ctx = @ptrCast(fetch_ctx),
+        .url = req.url,
+        .method = req.method,
+        .headers = headers,
+        .body = req.body,
+        .cookie_jar = page.cookie_jar,
+        .resource_type = .fetch,
+
+        .start_callback = struct {
+            fn startCallback(transfer: *HttpClient.Transfer) !void {
+                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
+                log.debug(.fetch, "request start", .{ .method = self.method, .url = self.url, .source = "fetch" });
+
+                self.transfer = transfer;
+            }
+        }.startCallback,
+        .header_callback = struct {
+            fn headerCallback(transfer: *HttpClient.Transfer) !void {
+                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
+
+                const header = &transfer.response_header.?;
+
+                log.debug(.fetch, "request header", .{
+                    .source = "fetch",
+                    .method = self.method,
+                    .url = self.url,
+                    .status = header.status,
+                });
+
+                if (header.contentType()) |ct| {
+                    self.mime = Mime.parse(ct) catch {
+                        return error.MimeParsing;
+                    };
+                }
+
+                if (transfer.getContentLength()) |cl| {
+                    try self.body.ensureTotalCapacity(self.arena, cl);
+                }
+
+                var it = transfer.responseHeaderIterator();
+                while (it.next()) |hdr| {
+                    const joined = try std.fmt.allocPrint(self.arena, "{s}: {s}", .{ hdr.name, hdr.value });
+                    try self.headers.append(self.arena, joined);
+                }
+
+                self.status = header.status;
+            }
+        }.headerCallback,
+        .data_callback = struct {
+            fn dataCallback(transfer: *HttpClient.Transfer, data: []const u8) !void {
+                const self: *FetchContext = @ptrCast(@alignCast(transfer.ctx));
+                try self.body.appendSlice(self.arena, data);
+            }
+        }.dataCallback,
+        .done_callback = struct {
+            fn doneCallback(ctx: *anyopaque) !void {
+                const self: *FetchContext = @ptrCast(@alignCast(ctx));
+                self.transfer = null;
+
+                log.info(.fetch, "request complete", .{
+                    .source = "fetch",
+                    .method = self.method,
+                    .url = self.url,
+                    .status = self.status,
+                });
+
+                const response = try self.toResponse();
+                try self.promise_resolver.resolve(response);
+            }
+        }.doneCallback,
+        .error_callback = struct {
+            fn errorCallback(ctx: *anyopaque, err: anyerror) void {
+                const self: *FetchContext = @ptrCast(@alignCast(ctx));
+                self.transfer = null;
+
+                log.err(.fetch, "error", .{
+                    .url = self.url,
+                    .err = err,
+                    .source = "fetch error",
+                });
+
+                // We throw an Abort error when the page is getting closed so,
+                // in this case, we don't need to reject the promise.
+                if (err != error.Abort) {
+                    self.promise_resolver.reject(@errorName(err)) catch unreachable;
+                }
+            }
+        }.errorCallback,
+    });
+
+    return resolver.promise();
+}
+
+const testing = @import("../../testing.zig");
+test "fetch: fetch" {
+    try testing.htmlRunner("fetch/fetch.html");
+}

src/browser/html/AbortController.zig

@@ -91,7 +91,7 @@ pub const AbortSignal = struct {
         self.reason = reason_ orelse DEFAULT_REASON;
 
         const abort_event = try parser.eventCreate();
-        try parser.eventSetInternalType(abort_event, .abort_signal);
+        parser.eventSetInternalType(abort_event, .abort_signal);
 
         defer parser.eventDestroy(abort_event);
         try parser.eventInit(abort_event, "abort", .{});
@@ -138,44 +138,6 @@ const TimeoutCallback = struct {
 };
 
 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" },
-    }, .{});
+test "Browser: HTML.AbortController" {
+    try testing.htmlRunner("html/abort_controller.html");
 }

src/browser/html/DataSet.zig

@@ -76,22 +76,6 @@ fn normalize(allocator: Allocator, name: []const u8) ![]const u8 {
 }
 
 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" },
-    }, .{});
+test "Browser: HTML.DataSet" {
+    try testing.htmlRunner("html/dataset.html");
 }

src/browser/html/document.zig

@@ -314,116 +314,7 @@ pub const HTMLDocument = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-
-test "Browser.HTML.Document" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "document.__proto__.constructor.name", "HTMLDocument" },
-        .{ "document.__proto__.__proto__.constructor.name", "Document" },
-        .{ "document.body.localName == 'body'", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.domain", "lightpanda.io" },
-        .{ "document.referrer", "" },
-        .{ "document.title", "" },
-        .{ "document.body.localName", "body" },
-        .{ "document.head.localName", "head" },
-        .{ "document.images.length", "0" },
-        .{ "document.embeds.length", "0" },
-        .{ "document.plugins.length", "0" },
-        .{ "document.scripts.length", "0" },
-        .{ "document.forms.length", "0" },
-        .{ "document.links.length", "1" },
-        .{ "document.applets.length", "0" },
-        .{ "document.anchors.length", "0" },
-        .{ "document.all.length", "8" },
-        .{ "document.currentScript", "null" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.title = 'foo'", "foo" },
-        .{ "document.title", "foo" },
-        .{ "document.title = ''", "" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.getElementById('link').setAttribute('name', 'foo')", "undefined" },
-        .{ "let list = document.getElementsByName('foo')", "undefined" },
-        .{ "list.length", "1" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.cookie", "" },
-        .{ "document.cookie = 'name=Oeschger; SameSite=None; Secure'", "name=Oeschger; SameSite=None; Secure" },
-        .{ "document.cookie = 'favorite_food=tripe; SameSite=None; Secure'", "favorite_food=tripe; SameSite=None; Secure" },
-        .{ "document.cookie", "name=Oeschger; favorite_food=tripe" },
-        .{ "document.cookie = 'IgnoreMy=Ghost; HttpOnly'", null }, // "" should be returned, but the framework overrules it atm
-        .{ "document.cookie", "name=Oeschger; favorite_food=tripe" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.elementFromPoint(0.5, 0.5)", "null" }, //  Return null since we only return element s when they have previously been localized
-        .{ "document.elementsFromPoint(0.5, 0.5)", "" },
-        .{
-            \\ let div1 = document.createElement('div');
-            \\ document.body.appendChild(div1);
-            \\ div1.getClientRects();
-            ,
-            null,
-        },
-        .{ "document.elementFromPoint(0.5, 0.5)", "[object HTMLDivElement]" },
-        .{ "let elems = document.elementsFromPoint(0.5, 0.5)", null },
-        .{ "elems.length", "3" },
-        .{ "elems[0]", "[object HTMLDivElement]" },
-        .{ "elems[1]", "[object HTMLBodyElement]" },
-        .{ "elems[2]", "[object HTMLHtmlElement]" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{
-            \\ let a = document.createElement('a');
-            \\ a.href = "https://lightpanda.io";
-            \\ document.body.appendChild(a);
-            \\ a.getClientRects();
-            , // Note this will be placed after the div of previous test
-            null,
-        },
-        .{ "let a_again = document.elementFromPoint(1.5, 0.5)", null },
-        .{ "a_again", "[object HTMLAnchorElement]" },
-        .{ "a_again.href", "https://lightpanda.io" },
-        .{ "let a_agains = document.elementsFromPoint(1.5, 0.5)", null },
-        .{ "a_agains[0].href", "https://lightpanda.io" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "!document.all", "true" },
-        .{ "!!document.all", "false" },
-        .{ "document.all(5)", "[object HTMLParagraphElement]" },
-        .{ "document.all('content')", "[object HTMLDivElement]" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.defaultView.document == document", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "document.readyState", "loading" },
-    }, .{});
-
-    try HTMLDocument.documentIsLoaded(runner.page.window.document, runner.page);
-    try runner.testCases(&.{
-        .{ "document.readyState", "interactive" },
-    }, .{});
-
-    try HTMLDocument.documentIsComplete(runner.page.window.document, runner.page);
-    try runner.testCases(&.{
-        .{ "document.readyState", "complete" },
-    }, .{});
+test "Browser: HTML.Document" {
+    try testing.htmlRunner("html/document.html");
 }

src/browser/html/elements.zig

@@ -977,6 +977,21 @@ pub const HTMLScriptElement = struct {
         return try parser.elementRemoveAttribute(parser.scriptToElt(self), "nomodule");
     }
 
+    pub fn get_nonce(self: *parser.Script) !?[]const u8 {
+        return try parser.elementGetAttribute(
+            parser.scriptToElt(self),
+            "nonce",
+        ) orelse "";
+    }
+
+    pub fn set_nonce(self: *parser.Script, v: []const u8) !void {
+        try parser.elementSetAttribute(
+            parser.scriptToElt(self),
+            "nonce",
+            v,
+        );
+    }
+
     pub fn get_onload(self: *parser.Script, page: *Page) !?Env.Function {
         const state = page.getNodeState(@ptrCast(@alignCast(self))) orelse return null;
         return state.onload;
@@ -1285,300 +1300,32 @@ pub fn toInterfaceFromTag(comptime T: type, e: *parser.Element, tag: parser.Tag)
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.HTML.Element" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let link = document.getElementById('link')", "undefined" },
-        .{ "link.target", "" },
-        .{ "link.target = '_blank'", "_blank" },
-        .{ "link.target", "_blank" },
-        .{ "link.target = ''", "" },
-
-        .{ "link.href", "foo" },
-        .{ "link.href = 'https://lightpanda.io/'", "https://lightpanda.io/" },
-        .{ "link.href", "https://lightpanda.io/" },
-
-        .{ "link.origin", "https://lightpanda.io" },
-
-        .{ "link.host = 'lightpanda.io:443'", "lightpanda.io:443" },
-        .{ "link.host", "lightpanda.io:443" },
-        .{ "link.port", "443" },
-        .{ "link.hostname", "lightpanda.io" },
-
-        .{ "link.host = 'lightpanda.io'", "lightpanda.io" },
-        .{ "link.host", "lightpanda.io" },
-        .{ "link.port", "" },
-        .{ "link.hostname", "lightpanda.io" },
-
-        .{ "link.host", "lightpanda.io" },
-        .{ "link.hostname", "lightpanda.io" },
-        .{ "link.hostname = 'foo.bar'", "foo.bar" },
-        .{ "link.href", "https://foo.bar/" },
-
-        .{ "link.search", "" },
-        .{ "link.search = 'q=bar'", "q=bar" },
-        .{ "link.search", "?q=bar" },
-        .{ "link.href", "https://foo.bar/?q=bar" },
-
-        .{ "link.hash", "" },
-        .{ "link.hash = 'frag'", "frag" },
-        .{ "link.hash", "#frag" },
-        .{ "link.href", "https://foo.bar/?q=bar#frag" },
-
-        .{ "link.port", "" },
-        .{ "link.port = '443'", "443" },
-        .{ "link.host", "foo.bar:443" },
-        .{ "link.hostname", "foo.bar" },
-        .{ "link.href", "https://foo.bar:443/?q=bar#frag" },
-        .{ "link.port = null", "null" },
-        .{ "link.href", "https://foo.bar/?q=bar#frag" },
-
-        .{ "link.href = 'foo'", "foo" },
-
-        .{ "link.type", "" },
-        .{ "link.type = 'text/html'", "text/html" },
-        .{ "link.type", "text/html" },
-        .{ "link.type = ''", "" },
-
-        .{ "link.text", "OK" },
-        .{ "link.text = 'foo'", "foo" },
-        .{ "link.text", "foo" },
-        .{ "link.text = 'OK'", "OK" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let script = document.createElement('script')", "undefined" },
-        .{ "script.src = 'foo.bar'", "foo.bar" },
-
-        .{ "script.async = true", "true" },
-        .{ "script.async", "true" },
-        .{ "script.async = false", "false" },
-        .{ "script.async", "false" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const backup = document.getElementById('content')", "undefined" },
-        .{ "document.getElementById('content').innerText = 'foo';", "foo" },
-        .{ "document.getElementById('content').innerText", "foo" },
-        .{ "document.getElementById('content').innerHTML = backup; true;", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let click_count = 0;", "undefined" },
-        .{ "let clickCbk = function() { click_count++ }", "undefined" },
-        .{ "document.getElementById('content').addEventListener('click', clickCbk);", "undefined" },
-        .{ "document.getElementById('content').click()", "undefined" },
-        .{ "click_count", "1" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let style = document.getElementById('content').style", "undefined" },
-        .{ "style.cssText = 'color: red; font-size: 12px; margin: 5px !important;'", "color: red; font-size: 12px; margin: 5px !important;" },
-        .{ "style.length", "3" },
-        .{ "style.setProperty('background-color', 'blue')", "undefined" },
-        .{ "style.getPropertyValue('background-color')", "blue" },
-        .{ "style.length", "4" },
-    }, .{});
-
-    // Image
-    try runner.testCases(&.{
-        // Testing constructors
-        .{ "(new Image).width", "0" },
-        .{ "(new Image).height", "0" },
-        .{ "(new Image(4)).width", "4" },
-        .{ "(new Image(4, 6)).height", "6" },
-
-        // Testing ulong property
-        .{ "let fruit = new Image", null },
-        .{ "fruit.width", "0" },
-        .{ "fruit.width = 5", "5" },
-        .{ "fruit.width", "5" },
-        .{ "fruit.width = '15'", "15" },
-        .{ "fruit.width", "15" },
-        .{ "fruit.width = 'apple'", "apple" },
-        .{ "fruit.width;", "0" },
-
-        // Testing string property
-        .{ "let lyric = new Image", null },
-        .{ "lyric.src", "" },
-        .{ "lyric.src = 'okay'", "okay" },
-        .{ "lyric.src", "okay" },
-        .{ "lyric.src = 15", "15" },
-        .{ "lyric.src", "15" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let a = document.createElement('a');", null },
-        .{ "a.href", "" },
-        .{ "a.host", "" },
-        .{ "a.href = 'about'", null },
-        .{ "a.href", "https://lightpanda.io/opensource-browser/about" },
-    }, .{});
-
-    // detached node cannot be focused
-    try runner.testCases(&.{
-        .{ "const focused = document.activeElement", null },
-        .{ "document.createElement('a').focus()", null },
-        .{ "document.activeElement === focused", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let l2 = document.createElement('link');", null },
-        .{ "l2.href", "" },
-        .{ "l2.href = 'https://lightpanda.io/opensource-browser/15'", null },
-        .{ "l2.href", "https://lightpanda.io/opensource-browser/15" },
-
-        .{ "l2.href = '/over/9000'", null },
-        .{ "l2.href", "https://lightpanda.io/over/9000" },
-    }, .{});
+test "Browser: HTML.Element" {
+    try testing.htmlRunner("html/element.html");
 }
 
-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.HtmlLinkElement" {
+    try testing.htmlRunner("html/link.html");
 }
 
-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.allocator);
-    defer alloc.deinit();
-    const arena = alloc.allocator();
-
-    try runner.testCases(&.{.{ "let elem_input = document.createElement('input')", null }}, .{});
-
-    try runner.testCases(&.{.{ "elem_input.form", "null" }}, .{}); // Initial value
-    // Valid input.form is tested separately :Browser.HTML.HtmlInputElement.propeties.form
-    try testProperty(arena, &runner, "elem_input.form", "null", &.{.{ .input = "'foo'" }}); // Invalid
-
-    try runner.testCases(&.{.{ "elem_input.accept", "" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.accept", null, &str_valids); // Valid
-
-    try runner.testCases(&.{.{ "elem_input.alt", "" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.alt", null, &str_valids); // Valid
-
-    try runner.testCases(&.{.{ "elem_input.disabled", "false" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.disabled", null, &bool_valids); // Valid
-
-    try runner.testCases(&.{.{ "elem_input.maxLength", "-1" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.maxLength", null, &.{.{ .input = "5" }}); // Valid
-    try testProperty(arena, &runner, "elem_input.maxLength", "0", &.{.{ .input = "'banana'" }}); // Invalid
-    try runner.testCases(&.{.{ "try { elem_input.maxLength = -45 } catch(e) {e}", "Error: NegativeValueNotAllowed" }}, .{}); // Error
-
-    try runner.testCases(&.{.{ "elem_input.name", "" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.name", null, &str_valids); // Valid
-
-    try runner.testCases(&.{.{ "elem_input.readOnly", "false" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.readOnly", null, &bool_valids); // Valid
-
-    try runner.testCases(&.{.{ "elem_input.size", "20" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.size", null, &.{.{ .input = "5" }}); // Valid
-    try testProperty(arena, &runner, "elem_input.size", "20", &.{.{ .input = "-26" }}); // Invalid
-    try runner.testCases(&.{.{ "try { elem_input.size = 0 } catch(e) {e}", "Error: ZeroNotAllowed" }}, .{}); // Error
-    try runner.testCases(&.{.{ "try { elem_input.size = 'banana' } catch(e) {e}", "Error: ZeroNotAllowed" }}, .{}); // Error
-
-    try runner.testCases(&.{.{ "elem_input.src", "" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.src", null, &.{
-        .{ .input = "'foo'", .expected = "https://lightpanda.io/foo" }, // TODO stitch should work with spaces -> %20
-        .{ .input = "-3", .expected = "https://lightpanda.io/-3" },
-        .{ .input = "''", .expected = "https://lightpanda.io/noslashattheend" },
-    });
-
-    try runner.testCases(&.{.{ "elem_input.type", "text" }}, .{}); // Initial value
-    try testProperty(arena, &runner, "elem_input.type", null, &.{.{ .input = "'checkbox'", .expected = "checkbox" }}); // Valid
-    try testProperty(arena, &runner, "elem_input.type", "text", &.{.{ .input = "'5'" }}); // Invalid
-
-    // Properties that are related
-    try runner.testCases(&.{
-        .{ "let input_checked = document.createElement('input')", null },
-        .{ "input_checked.defaultChecked", "false" },
-        .{ "input_checked.checked", "false" },
-
-        .{ "input_checked.defaultChecked = true", "true" },
-        .{ "input_checked.defaultChecked", "true" },
-        .{ "input_checked.checked", "true" }, // Also perceived as true
-
-        .{ "input_checked.checked = false", "false" },
-        .{ "input_checked.defaultChecked", "true" },
-        .{ "input_checked.checked", "false" },
-
-        .{ "input_checked.defaultChecked = true", "true" },
-        .{ "input_checked.checked", "false" }, // Still false
-    }, .{});
-    try runner.testCases(&.{
-        .{ "let input_value = document.createElement('input')", null },
-        .{ "input_value.defaultValue", "" },
-        .{ "input_value.value", "" },
-
-        .{ "input_value.defaultValue = 3.1", "3.1" },
-        .{ "input_value.defaultValue", "3.1" },
-        .{ "input_value.value", "3.1" }, // Also perceived as 3.1
-
-        .{ "input_value.value = 'mango'", "mango" },
-        .{ "input_value.defaultValue", "3.1" },
-        .{ "input_value.value", "mango" },
-
-        .{ "input_value.defaultValue = true", "true" },
-        .{ "input_value.value", "mango" }, // Still mango
-    }, .{});
+test "Browser: HTML.HtmlImageElement" {
+    try testing.htmlRunner("html/image.html");
 }
 
-test "Browser.HTML.HtmlInputElement.properties.form" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\ <form action="test.php" target="_blank">
-        \\   <p>
-        \\     <label>First name: <input type="text" name="first-name" /></label>
-        \\   </p>
-        \\ </form>
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let elem_input = document.querySelector('input')", null },
-        .{ "elem_input.form", "[object HTMLFormElement]" }, // Initial value
-        .{ "elem_input.form = 'foo'", null },
-        .{ "elem_input.form", "[object HTMLFormElement]" }, // Invalid
-    }, .{});
+test "Browser: HTML.HtmlInputElement" {
+    try testing.htmlRunner("html/input.html");
 }
 
-test "Browser.HTML.HTMLTemplateElement" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<div id=c></div>" });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let t = document.createElement('template')", null },
-        .{ "let d = document.createElement('div')", null },
-        .{ "d.id = 'abc'", null },
-        .{ "t.content.append(d)", null },
-        .{ "document.getElementById('abc')", "null" },
-        .{ "document.getElementById('c').appendChild(t.content.cloneNode(true))", null },
-        .{ "document.getElementById('abc').id", "abc" },
-        .{ "t.innerHTML = '<span>over</span><p>9000!</p>';", null },
-        .{ "t.content.childNodes.length", "2" },
-        .{ "t.content.childNodes[0].tagName", "SPAN" },
-        .{ "t.content.childNodes[0].innerHTML", "over" },
-        .{ "t.content.childNodes[1].tagName", "P" },
-        .{ "t.content.childNodes[1].innerHTML", "9000!" },
-    }, .{});
+test "Browser: HTML.HtmlTemplateElement" {
+    try testing.htmlRunner("html/template.html");
 }
 
-test "Browser.HTML.HTMLStyleElement" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let s = document.createElement('style')", null },
-        .{ "s.sheet.type", "text/css" },
-        .{ "s.sheet == s.sheet", "true" },
-        .{ "document.createElement('style').sheet == s.sheet", "false" },
-    }, .{});
+test "Browser: HTML.HtmlStyleElement" {
+    try testing.htmlRunner("html/style.html");
 }
 
-test "Browser: HTML.HTMLScriptElement" {
+test "Browser: HTML.HtmlScriptElement" {
+    try testing.htmlRunner("html/script/script.html");
     try testing.htmlRunner("html/script/inline_defer.html");
 }
 

src/browser/html/error_event.zig

@@ -42,7 +42,7 @@ pub const ErrorEvent = struct {
         const event = try parser.eventCreate();
         defer parser.eventDestroy(event);
         try parser.eventInit(event, event_type, .{});
-        try parser.eventSetInternalType(event, .event);
+        parser.eventSetInternalType(event, .event);
 
         const o = opts orelse ErrorEventInit{};
 

src/browser/html/history.zig

@@ -87,34 +87,7 @@ pub const History = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.HTML.History" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "history.scrollRestoration", "auto" },
-        .{ "history.scrollRestoration = 'manual'", "manual" },
-        .{ "history.scrollRestoration = 'foo'", "foo" },
-        .{ "history.scrollRestoration", "manual" },
-        .{ "history.scrollRestoration = 'auto'", "auto" },
-        .{ "history.scrollRestoration", "auto" },
-
-        .{ "history.state", "null" },
-
-        .{ "history.pushState({}, null, '')", "undefined" },
-
-        .{ "history.replaceState({}, null, '')", "undefined" },
-
-        .{ "history.go()", "undefined" },
-        .{ "history.go(1)", "undefined" },
-        .{ "history.go(-1)", "undefined" },
-
-        .{ "history.forward()", "undefined" },
-
-        .{ "history.back()", "undefined" },
-    }, .{});
+test "Browser: HTML.History" {
+    try testing.htmlRunner("html/history.html");
 }

src/browser/html/location.zig

@@ -87,20 +87,6 @@ pub const Location = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.HTML.Location" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "location.href", "https://lightpanda.io/opensource-browser/" },
-        .{ "document.location.href", "https://lightpanda.io/opensource-browser/" },
-
-        .{ "location.host", "lightpanda.io" },
-        .{ "location.hostname", "lightpanda.io" },
-        .{ "location.origin", "https://lightpanda.io" },
-        .{ "location.pathname", "/opensource-browser/" },
-        .{ "location.hash", "" },
-        .{ "location.port", "" },
-        .{ "location.search", "" },
-    }, .{});
+test "Browser: HTML.Location" {
+    try testing.htmlRunner("html/location.html");
 }

src/browser/html/navigator.zig

@@ -80,17 +80,7 @@ pub const Navigator = struct {
     }
 };
 
-// Tests
-// -----
-
 const testing = @import("../../testing.zig");
-test "Browser.HTML.Navigator" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "navigator.userAgent", "Lightpanda/1.0" },
-        .{ "navigator.appVersion", "1.0" },
-        .{ "navigator.language", "en-US" },
-    }, .{});
+test "Browser: HTML.Navigator" {
+    try testing.htmlRunner("html/navigator.html");
 }

src/browser/html/select.zig

@@ -199,80 +199,6 @@ pub const HTMLOptionsCollection = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.HTML.Select" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\ <form id=f1>
-        \\  <select id=s1 name=s1><option>o1<option>o2</select>
-        \\ </form>
-        \\ <select id=s2></select>
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "const s = document.getElementById('s1');", null },
-        .{ "s.form", "[object HTMLFormElement]" },
-
-        .{ "document.getElementById('s2').form", "null" },
-
-        .{ "s.disabled", "false" },
-        .{ "s.disabled = true", null },
-        .{ "s.disabled", "true" },
-        .{ "s.disabled = false", null },
-        .{ "s.disabled", "false" },
-
-        .{ "s.multiple", "false" },
-        .{ "s.multiple = true", null },
-        .{ "s.multiple", "true" },
-        .{ "s.multiple = false", null },
-        .{ "s.multiple", "false" },
-
-        .{ "s.name;", "s1" },
-        .{ "s.name = 'sel1';", null },
-        .{ "s.name", "sel1" },
-
-        .{ "s.length;", "2" },
-
-        .{ "s.selectedIndex", "0" },
-        .{ "s.selectedIndex = 2", null }, // out of range
-        .{ "s.selectedIndex", "-1" },
-
-        .{ "s.selectedIndex = -1", null },
-        .{ "s.selectedIndex", "-1" },
-
-        .{ "s.selectedIndex = 0", null },
-        .{ "s.selectedIndex", "0" },
-
-        .{ "s.selectedIndex = 1", null },
-        .{ "s.selectedIndex", "1" },
-
-        .{ "s.selectedIndex = -323", null },
-        .{ "s.selectedIndex", "-1" },
-
-        .{ "let options = s.options", null },
-        .{ "options.length", "2" },
-        .{ "options.item(1).value", "o2" },
-        .{ "options.selectedIndex", "-1" },
-
-        .{ "let o3 = document.createElement('option');", null },
-        .{ "o3.value = 'o3';", null },
-        .{ "options.add(o3)", null },
-        .{ "options.length", "3" },
-        .{ "options.item(2).value", "o3" },
-
-        .{ "let o4 = document.createElement('option');", null },
-        .{ "o4.value = 'o4';", null },
-        .{ "options.add(o4, 1)", null },
-        .{ "options.length", "4" },
-        .{ "options.item(1).value", "o4" },
-
-        .{ "let o5 = document.createElement('option');", null },
-        .{ "o5.value = 'o5';", null },
-        .{ "options.add(o5, o3)", null },
-        .{ "options.length", "5" },
-        .{ "options.item(3).value", "o5" },
-
-        .{ "options.remove(3)", null },
-        .{ "options.length", "4" },
-        .{ "options.item(3).value", "o3" },
-    }, .{});
+test "Browser: HTML.Select" {
+    try testing.htmlRunner("html/select.html");
 }

src/browser/html/svg_elements.zig

@@ -31,11 +31,6 @@ pub const SVGElement = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.HTML.SVGElement" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "'AString' instanceof SVGElement", "false" },
-    }, .{});
+test "Browser: HTML.SVGElement" {
+    try testing.htmlRunner("html/svg.html");
 }

src/browser/html/window.zig

@@ -39,6 +39,10 @@ const Css = @import("../css/css.zig").Css;
 const Function = Env.Function;
 const JsObject = Env.JsObject;
 
+const v8 = @import("v8");
+const Request = @import("../fetch/Request.zig");
+const fetchFn = @import("../fetch/fetch.zig").fetch;
+
 const storage = @import("../storage/storage.zig");
 
 // https://dom.spec.whatwg.org/#interface-window-extensions
@@ -95,6 +99,10 @@ pub const Window = struct {
         self.storage_shelf = shelf;
     }
 
+    pub fn _fetch(_: *Window, input: Request.RequestInput, options: ?Request.RequestInit, page: *Page) !Env.Promise {
+        return fetchFn(input, options, page);
+    }
+
     pub fn get_window(self: *Window) *Window {
         return self;
     }

src/browser/mime.zig

@@ -22,13 +22,15 @@ const Allocator = std.mem.Allocator;
 pub const Mime = struct {
     content_type: ContentType,
     params: []const u8 = "",
-    charset: ?[:0]const u8 = null,
+    // IANA defines max. charset value length as 40.
+    // We keep 41 for null-termination since HTML parser expects in this format.
+    charset: [41]u8 = default_charset,
 
-    pub const unknown = Mime{
-        .params = "",
-        .charset = null,
-        .content_type = .{ .unknown = {} },
-    };
+    /// String "UTF-8" continued by null characters.
+    pub const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+
+    /// Mime with unknown Content-Type, empty params and empty charset.
+    pub const unknown = Mime{ .content_type = .{ .unknown = {} } };
 
     pub const ContentTypeEnum = enum {
         text_xml,
@@ -52,6 +54,34 @@ pub const Mime = struct {
         other: struct { type: []const u8, sub_type: []const u8 },
     };
 
+    /// Returns the null-terminated charset value.
+    pub inline fn charsetString(mime: *const Mime) [:0]const u8 {
+        return @ptrCast(&mime.charset);
+    }
+
+    /// Removes quotes of value if quotes are given.
+    ///
+    /// Currently we don't validate the charset.
+    /// See section 2.3 Naming Requirements:
+    /// https://datatracker.ietf.org/doc/rfc2978/
+    fn parseCharset(value: []const u8) error{ CharsetTooBig, Invalid }![]const u8 {
+        // Cannot be larger than 40.
+        // https://datatracker.ietf.org/doc/rfc2978/
+        if (value.len > 40) return error.CharsetTooBig;
+
+        // If the first char is a quote, look for a pair.
+        if (value[0] == '"') {
+            if (value.len < 3 or value[value.len - 1] != '"') {
+                return error.Invalid;
+            }
+
+            return value[1 .. value.len - 1];
+        }
+
+        // No quotes.
+        return value;
+    }
+
     pub fn parse(input: []u8) !Mime {
         if (input.len > 255) {
             return error.TooBig;
@@ -69,7 +99,7 @@ pub const Mime = struct {
 
         const params = trimLeft(normalized[type_len..]);
 
-        var charset: ?[:0]const u8 = null;
+        var charset: [41]u8 = undefined;
 
         var it = std.mem.splitScalar(u8, params, ';');
         while (it.next()) |attr| {
@@ -87,35 +117,14 @@ pub const Mime = struct {
 
             switch (attribute_name) {
                 .charset => {
-                    // We used to have a proper value parser, but we currently
-                    // only care about the charset attribute, plus only about
-                    // the UTF-8 value. It's a lot easier to do it this way,
-                    // and it doesn't require an allocation to (a) unescape the
-                    // value or (b) ensure the correct lifetime.
                     if (value.len == 0) {
                         break;
                     }
-                    var attribute_value = value;
-                    if (value[0] == '"') {
-                        if (value.len < 3 or value[value.len - 1] != '"') {
-                            return error.Invalid;
-                        }
-                        attribute_value = value[1 .. value.len - 1];
-                    }
 
-                    if (std.ascii.eqlIgnoreCase(attribute_value, "utf-8")) {
-                        charset = "UTF-8";
-                    } else if (std.ascii.eqlIgnoreCase(attribute_value, "iso-8859-1")) {
-                        charset = "ISO-8859-1";
-                    } else {
-                        // we only care about null (which we default to UTF-8)
-                        // or UTF-8. If this is actually set (i.e. not null)
-                        // and isn't UTF-8, we'll just put a dummy value. If
-                        // we want to capture the actual value, we'll need to
-                        // dupe/allocate it. Since, for now, we don't need that
-                        // we can avoid the allocation.
-                        charset = "lightpanda:UNSUPPORTED";
-                    }
+                    const attribute_value = try parseCharset(value);
+                    @memcpy(charset[0..attribute_value.len], attribute_value);
+                    // Null-terminate right after attribute value.
+                    charset[attribute_value.len] = 0;
                 },
             }
         }
@@ -363,21 +372,33 @@ test "Mime: parse charset" {
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "UTF-8",
+        .charset = "utf-8",
         .params = "charset=utf-8",
     }, "text/xml; charset=utf-8");
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "UTF-8",
+        .charset = "utf-8",
         .params = "charset=\"utf-8\"",
-    }, "text/xml;charset=\"utf-8\"");
+    }, "text/xml;charset=\"UTF-8\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "iso-8859-1",
+        .params = "charset=\"iso-8859-1\"",
+    }, "text/html; charset=\"iso-8859-1\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "iso-8859-1",
+        .params = "charset=\"iso-8859-1\"",
+    }, "text/html; charset=\"ISO-8859-1\"");
 
     try expect(.{
         .content_type = .{ .text_xml = {} },
-        .charset = "lightpanda:UNSUPPORTED",
-        .params = "charset=\"\\\\ \\\" \"",
-    }, "text/xml;charset=\"\\\\ \\\" \"   ");
+        .charset = "custom-non-standard-charset-value",
+        .params = "charset=\"custom-non-standard-charset-value\"",
+    }, "text/xml;charset=\"custom-non-standard-charset-value\"");
 }
 
 test "Mime: isHTML" {
@@ -490,8 +511,10 @@ fn expect(expected: Expectation, input: []const u8) !void {
     try testing.expectEqual(expected.params, actual.params);
 
     if (expected.charset) |ec| {
-        try testing.expectEqual(ec, actual.charset.?);
+        // We remove the null characters for testing purposes here.
+        try testing.expectEqual(ec, actual.charsetString()[0..ec.len]);
     } else {
-        try testing.expectEqual(null, actual.charset);
+        const m: Mime = .unknown;
+        try testing.expectEqual(m.charsetString(), actual.charsetString());
     }
 }

src/browser/netsurf.zig

@@ -456,87 +456,94 @@ pub fn eventType(evt: *Event) ![]const u8 {
     return strToData(s.?);
 }
 
-pub fn eventTarget(evt: *Event) !?*EventTarget {
+pub fn eventTarget(evt: *Event) ?*EventTarget {
     var et: ?*EventTarget = null;
     const err = c._dom_event_get_target(evt, &et);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return et;
 }
 
-pub fn eventCurrentTarget(evt: *Event) !?*EventTarget {
+pub fn eventCurrentTarget(evt: *Event) ?*EventTarget {
     var et: ?*EventTarget = null;
     const err = c._dom_event_get_current_target(evt, &et);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return et;
 }
 
-pub fn eventPhase(evt: *Event) !u8 {
+pub fn eventPhase(evt: *Event) u8 {
     var phase: c.dom_event_flow_phase = undefined;
     const err = c._dom_event_get_event_phase(evt, &phase);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return @as(u8, @intCast(phase));
 }
 
-pub fn eventBubbles(evt: *Event) !bool {
+pub fn eventBubbles(evt: *Event) bool {
     var res: bool = undefined;
     const err = c._dom_event_get_bubbles(evt, &res);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return res;
 }
 
-pub fn eventCancelable(evt: *Event) !bool {
+pub fn eventCancelable(evt: *Event) bool {
     var res: bool = undefined;
     const err = c._dom_event_get_cancelable(evt, &res);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return res;
 }
 
-pub fn eventDefaultPrevented(evt: *Event) !bool {
+pub fn eventDefaultPrevented(evt: *Event) bool {
     var res: bool = undefined;
     const err = c._dom_event_is_default_prevented(evt, &res);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return res;
 }
 
-pub fn eventIsTrusted(evt: *Event) !bool {
+pub fn eventIsTrusted(evt: *Event) bool {
     var res: bool = undefined;
     const err = c._dom_event_get_is_trusted(evt, &res);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return res;
 }
 
-pub fn eventTimestamp(evt: *Event) !u32 {
-    var ts: c_uint = undefined;
+pub fn eventTimestamp(evt: *Event) u64 {
+    var ts: u64 = 0;
     const err = c._dom_event_get_timestamp(evt, &ts);
-    try DOMErr(err);
-    return @as(u32, @intCast(ts));
+    std.debug.assert(err == c.DOM_NO_ERR);
+    return ts;
 }
 
-pub fn eventStopPropagation(evt: *Event) !void {
+pub fn eventStopPropagation(evt: *Event) void {
     const err = c._dom_event_stop_propagation(evt);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
 }
 
-pub fn eventStopImmediatePropagation(evt: *Event) !void {
+pub fn eventIsStopped(evt: *Event) bool {
+    var res: bool = undefined;
+    const err = c._dom_event_is_stopped(evt, &res);
+    std.debug.assert(err == c.DOM_NO_ERR);
+    return res;
+}
+
+pub fn eventStopImmediatePropagation(evt: *Event) void {
     const err = c._dom_event_stop_immediate_propagation(evt);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
 }
 
-pub fn eventPreventDefault(evt: *Event) !void {
+pub fn eventPreventDefault(evt: *Event) void {
     const err = c._dom_event_prevent_default(evt);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
 }
 
-pub fn eventGetInternalType(evt: *Event) !EventType {
+pub fn eventGetInternalType(evt: *Event) EventType {
     var res: u32 = undefined;
     const err = c._dom_event_get_internal_type(evt, &res);
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
     return @enumFromInt(res);
 }
 
-pub fn eventSetInternalType(evt: *Event, internal_type: EventType) !void {
+pub fn eventSetInternalType(evt: *Event, internal_type: EventType) void {
     const err = c._dom_event_set_internal_type(evt, @intFromEnum(internal_type));
-    try DOMErr(err);
+    std.debug.assert(err == c.DOM_NO_ERR);
 }
 
 pub const EventType = enum(u8) {
@@ -548,6 +555,7 @@ pub const EventType = enum(u8) {
     abort_signal = 5,
     xhr_event = 6,
     message_event = 7,
+    keyboard_event = 8,
 };
 
 pub const MutationEvent = c.dom_mutation_event;
@@ -603,7 +611,7 @@ fn eventTargetVtable(et: *EventTarget) c.dom_event_target_vtable {
     return @as([*c]const c.dom_event_target_vtable, @ptrCast(vtable_aligned)).*;
 }
 
-pub inline fn toEventTarget(comptime T: type, v: *T) *EventTarget {
+pub fn toEventTarget(comptime T: type, v: *T) *EventTarget {
     if (comptime eventTargetTBaseFieldName(T)) |field| {
         const et_aligned: *align(@alignOf(EventTarget)) EventTargetTBase = @alignCast(&@field(v, field));
         return @as(*EventTarget, @ptrCast(et_aligned));
@@ -951,15 +959,44 @@ pub fn keyboardEventDestroy(evt: *KeyboardEvent) void {
     c._dom_keyboard_event_destroy(evt);
 }
 
-const KeyboardEventOpts = struct {
-    key: []const u8,
-    code: []const u8,
+pub fn keyboardEventKeyIsSet(
+    evt: *KeyboardEvent,
+    comptime key: enum { ctrl, alt, shift, meta },
+) bool {
+    var is_set: bool = false;
+    const err = switch (key) {
+        .ctrl => c._dom_keyboard_event_get_ctrl_key(evt, &is_set),
+        .alt => c._dom_keyboard_event_get_alt_key(evt, &is_set),
+        .shift => c._dom_keyboard_event_get_shift_key(evt, &is_set),
+        .meta => c._dom_keyboard_event_get_meta_key(evt, &is_set),
+    };
+    // None of the earlier can fail.
+    std.debug.assert(err == c.DOM_NO_ERR);
+
+    return is_set;
+}
+
+pub const KeyboardEventOpts = struct {
+    key: []const u8 = "",
+    code: []const u8 = "",
+    location: LocationCode = .standard,
+    repeat: bool = false,
     bubbles: bool = false,
     cancelable: bool = false,
-    ctrl: bool = false,
-    alt: bool = false,
-    shift: bool = false,
-    meta: bool = false,
+    is_composing: bool = false,
+    ctrl_key: bool = false,
+    alt_key: bool = false,
+    shift_key: bool = false,
+    meta_key: bool = false,
+
+    pub const LocationCode = enum(u32) {
+        standard = c.DOM_KEY_LOCATION_STANDARD,
+        left = c.DOM_KEY_LOCATION_LEFT,
+        right = c.DOM_KEY_LOCATION_RIGHT,
+        numpad = c.DOM_KEY_LOCATION_NUMPAD,
+        mobile = 0x04, // Non-standard, deprecated.
+        joystick = 0x05, // Non-standard, deprecated.
+    };
 };
 
 pub fn keyboardEventInit(evt: *KeyboardEvent, typ: []const u8, opts: KeyboardEventOpts) !void {
@@ -972,13 +1009,13 @@ pub fn keyboardEventInit(evt: *KeyboardEvent, typ: []const u8, opts: KeyboardEve
         null, // dom_abstract_view* ?
         try strFromData(opts.key),
         try strFromData(opts.code),
-        0, // location 0 == standard
-        opts.ctrl,
-        opts.shift,
-        opts.alt,
-        opts.meta,
-        false, // repease
-        false, // is_composiom
+        @intFromEnum(opts.location),
+        opts.ctrl_key,
+        opts.shift_key,
+        opts.alt_key,
+        opts.meta_key,
+        opts.repeat, // repease
+        opts.is_composing, // is_composiom
     );
     try DOMErr(err);
 }

src/browser/page.zig

@@ -90,10 +90,8 @@ pub const Page = struct {
 
     load_state: LoadState = .parsing,
 
-    // We should only emit these events once per page. To make sure of that, we
-    // track whether or not we've already emitted the notifications.
-    notified_network_idle: bool = false,
-    notified_network_almost_idle: bool = false,
+    notified_network_idle: IdleNotification = .init,
+    notified_network_almost_idle: IdleNotification = .init,
 
     const Mode = union(enum) {
         pre: void,
@@ -325,8 +323,7 @@ pub const Page = struct {
                     // scheduler.run could trigger new http transfers, so do not
                     // store http_client.active BEFORE this call and then use
                     // it AFTER.
-                    const ms_to_next_task = try scheduler.runHighPriority();
-                    _ = try scheduler.runLowPriority();
+                    const ms_to_next_task = try scheduler.run();
 
                     if (try_catch.hasCaught()) {
                         const msg = (try try_catch.err(self.arena)) orelse "unknown";
@@ -335,6 +332,14 @@ pub const Page = struct {
                     }
 
                     const http_active = http_client.active;
+                    const total_network_activity = http_active + http_client.intercepted;
+                    if (self.notified_network_almost_idle.check(total_network_activity <= 2)) {
+                        self.notifyNetworkAlmostIdle();
+                    }
+                    if (self.notified_network_idle.check(total_network_activity == 0)) {
+                        self.notifyNetworkIdle();
+                    }
+
                     if (http_active == 0 and exit_when_done) {
                         // we don't need to consider http_client.intercepted here
                         // because exit_when_done is true, and that can only be
@@ -359,7 +364,8 @@ pub const Page = struct {
 
                         if (ms > ms_remaining) {
                             // Same as above, except we have a scheduled task,
-                            // it just happens to be too far into the future.
+                            // it just happens to be too far into the future
+                            // compared to how long we were told to wait.
                             return .done;
                         }
 
@@ -371,9 +377,6 @@ pub const Page = struct {
                         // loop to see if anything new can be processed.
                         std.Thread.sleep(std.time.ns_per_ms * @as(u64, @intCast(@min(ms, 20))));
                     } else {
-                        if (self.notified_network_idle == false and http_active == 0 and http_client.intercepted == 0) {
-                            self.notifyNetworkIdle();
-                        }
                         // We're here because we either have active HTTP
                         // connections, or exit_when_done == false (aka, there's
                         // an extra_socket registered with the http client).
@@ -484,25 +487,14 @@ pub const Page = struct {
     }
 
     fn notifyNetworkIdle(self: *Page) void {
-        // caller should always check that we haven't sent this already;
-        std.debug.assert(self.notified_network_idle == false);
-
-        // if we're going to send networkIdle, we should first send networkAlmostIdle
-        // if it hasn't already been sent.
-        if (self.notified_network_almost_idle == false) {
-            self.notifyNetworkAlmostIdle();
-        }
-
-        self.notified_network_idle = true;
+        std.debug.assert(self.notified_network_idle == .done);
         self.session.browser.notification.dispatch(.page_network_idle, &.{
             .timestamp = timestamp(),
         });
     }
 
     fn notifyNetworkAlmostIdle(self: *Page) void {
-        // caller should always check that we haven't sent this already;
-        std.debug.assert(self.notified_network_almost_idle == false);
-        self.notified_network_almost_idle = true;
+        std.debug.assert(self.notified_network_almost_idle == .done);
         self.session.browser.notification.dispatch(.page_network_almost_idle, &.{
             .timestamp = timestamp(),
         });
@@ -680,14 +672,14 @@ pub const Page = struct {
             log.debug(.http, "navigate first chunk", .{ .content_type = mime.content_type, .len = data.len });
 
             self.mode = switch (mime.content_type) {
-                .text_html => .{ .html = try parser.Parser.init(mime.charset orelse "UTF-8") },
+                .text_html => .{ .html = try parser.Parser.init(mime.charsetString()) },
 
                 .application_json,
                 .text_javascript,
                 .text_css,
                 .text_plain,
                 => blk: {
-                    var p = try parser.Parser.init(mime.charset orelse "UTF-8");
+                    var p = try parser.Parser.init(mime.charsetString());
                     try p.process("<html><head><meta charset=\"utf-8\"></head><body><pre>");
                     break :blk .{ .text = p };
                 },
@@ -889,7 +881,7 @@ pub const Page = struct {
     }
 
     fn _windowClicked(self: *Page, event: *parser.Event) !void {
-        const target = (try parser.eventTarget(event)) orelse return;
+        const target = parser.eventTarget(event) orelse return;
         const node = parser.eventTargetToNode(target);
         const tag = (try parser.nodeHTMLGetTagType(node)) orelse return;
         switch (tag) {
@@ -950,10 +942,10 @@ pub const Page = struct {
             .cancelable = true,
             .key = kbe.key,
             .code = kbe.code,
-            .alt = kbe.alt,
-            .ctrl = kbe.ctrl,
-            .meta = kbe.meta,
-            .shift = kbe.shift,
+            .alt_key = kbe.alt,
+            .ctrl_key = kbe.ctrl,
+            .meta_key = kbe.meta,
+            .shift_key = kbe.shift,
         });
         _ = try parser.elementDispatchEvent(element, @ptrCast(event));
     }
@@ -966,7 +958,7 @@ pub const Page = struct {
     }
 
     fn _keydownCallback(self: *Page, event: *parser.Event) !void {
-        const target = (try parser.eventTarget(event)) orelse return;
+        const target = parser.eventTarget(event) orelse return;
         const node = parser.eventTargetToNode(target);
         const tag = (try parser.nodeHTMLGetTagType(node)) orelse return;
 
@@ -1140,9 +1132,82 @@ pub const NavigateOpts = struct {
     header: ?[:0]const u8 = null,
 };
 
+const IdleNotification = union(enum) {
+    // hasn't started yet.
+    init,
+
+    // timestamp where the state was first triggered. If the state stays
+    // true (e.g. 0 nework activity for NetworkIdle, or <= 2 for NetworkAlmostIdle)
+    // for 500ms, it'll send the notification and transition to .done. If
+    // the state doesn't stay true, it'll revert to .init.
+    triggered: u64,
+
+    // notification sent - should never be reset
+    done,
+
+    // Returns `true` if we should send a notification. Only returns true if it
+    // was previously triggered 500+ milliseconds ago.
+    // active == true when the condition for the notification is true
+    // active == false when the condition for the notification is false
+    pub fn check(self: *IdleNotification, active: bool) bool {
+        if (active) {
+            switch (self.*) {
+                .done => {
+                    // Notification was already sent.
+                },
+                .init => {
+                    // This is the first time the condition was triggered (or
+                    // the first time after being un-triggered). Record the time
+                    // so that if the condition holds for long enough, we can
+                    // send a notification.
+                    self.* = .{ .triggered = milliTimestamp() };
+                },
+                .triggered => |ms| {
+                    // The condition was already triggered and was triggered
+                    // again. When this condition holds for 500+ms, we'll send
+                    // a notification.
+                    if (milliTimestamp() - ms >= 500) {
+                        // This is the only place in this function where we can
+                        // return true. The only place where we can tell our caller
+                        // "send the notification!".
+                        self.* = .done;
+                        return true;
+                    }
+                    // the state hasn't held for 500ms.
+                },
+            }
+        } else {
+            switch (self.*) {
+                .done => {
+                    // The condition became false, but we already sent the notification
+                    // There's nothing we can do, it stays .done. We never re-send
+                    // a notification or "undo" a sent notification (not that we can).
+                },
+                .init => {
+                    // The condition remains false
+                },
+                .triggered => {
+                    // The condition _had_ been true, and we were waiting (500ms)
+                    // for it to hold, but it hasn't. So we go back to waiting.
+                    self.* = .init;
+                },
+            }
+        }
+
+        // See above for the only case where we ever return true. All other
+        // paths go here. This means "don't send the notification". Maybe
+        // because it's already been sent, maybe because active is false, or
+        // maybe because the condition hasn't held long enough.
+        return false;
+    }
+};
+
 fn timestamp() u32 {
     return @import("../datetime.zig").timestamp();
 }
+fn milliTimestamp() u64 {
+    return @import("../datetime.zig").milliTimestamp();
+}
 
 // A callback from libdom whenever a script tag is added to the DOM.
 // element is guaranteed to be a script element.

src/browser/polyfill/fetch.js

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

src/browser/polyfill/fetch.zig

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

src/browser/polyfill/polyfill.zig

@@ -27,7 +27,6 @@ pub const Loader = struct {
     state: enum { empty, loading } = .empty,
 
     done: struct {
-        fetch: bool = false,
         webcomponents: bool = false,
     } = .{},
 
@@ -56,18 +55,6 @@ pub const Loader = struct {
             return false;
         }
 
-        if (!self.done.fetch and isFetch(name)) {
-            const source = @import("fetch.zig").source;
-            self.load("fetch", source, js_context);
-
-            // We return false here: We want v8 to continue the calling chain
-            // to finally find the polyfill we just inserted. If we want to
-            // return false and stops the call chain, we have to use
-            // `info.GetReturnValue.Set()` function, or `undefined` will be
-            // returned immediately.
-            return false;
-        }
-
         if (!self.done.webcomponents and isWebcomponents(name)) {
             const source = @import("webcomponents.zig").source;
             self.load("webcomponents", source, js_context);
@@ -89,14 +76,6 @@ pub const Loader = struct {
         return false;
     }
 
-    fn isFetch(name: []const u8) bool {
-        if (std.mem.eql(u8, name, "fetch")) return true;
-        if (std.mem.eql(u8, name, "Request")) return true;
-        if (std.mem.eql(u8, name, "Response")) return true;
-        if (std.mem.eql(u8, name, "Headers")) return true;
-        return false;
-    }
-
     fn isWebcomponents(name: []const u8) bool {
         if (std.mem.eql(u8, name, "customElements")) return true;
         return false;

src/browser/streams/ReadableStream.zig

@@ -0,0 +1,174 @@
+// 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 Page = @import("../page.zig").Page;
+const Env = @import("../env.zig").Env;
+
+const ReadableStream = @This();
+const ReadableStreamDefaultReader = @import("ReadableStreamDefaultReader.zig");
+const ReadableStreamDefaultController = @import("ReadableStreamDefaultController.zig");
+
+const State = union(enum) {
+    readable,
+    closed: ?[]const u8,
+    cancelled: ?[]const u8,
+    errored: Env.JsObject,
+};
+
+// This promise resolves when a stream is canceled.
+cancel_resolver: Env.PersistentPromiseResolver,
+closed_resolver: Env.PersistentPromiseResolver,
+reader_resolver: ?Env.PersistentPromiseResolver = null,
+
+locked: bool = false,
+state: State = .readable,
+
+cancel_fn: ?Env.Function = null,
+pull_fn: ?Env.Function = null,
+
+strategy: QueueingStrategy,
+queue: std.ArrayListUnmanaged([]const u8) = .empty,
+
+pub const ReadableStreamReadResult = struct {
+    const ValueUnion =
+        union(enum) { data: []const u8, empty: void };
+
+    value: ValueUnion,
+    done: bool,
+
+    pub fn get_value(self: *const ReadableStreamReadResult) ValueUnion {
+        return self.value;
+    }
+
+    pub fn get_done(self: *const ReadableStreamReadResult) bool {
+        return self.done;
+    }
+};
+
+const UnderlyingSource = struct {
+    start: ?Env.Function = null,
+    pull: ?Env.Function = null,
+    cancel: ?Env.Function = null,
+    type: ?[]const u8 = null,
+};
+
+const QueueingStrategy = struct {
+    size: ?Env.Function = null,
+    high_water_mark: u32 = 1,
+};
+
+pub fn constructor(underlying: ?UnderlyingSource, _strategy: ?QueueingStrategy, page: *Page) !*ReadableStream {
+    const strategy: QueueingStrategy = _strategy orelse .{};
+
+    const cancel_resolver = try page.main_context.createPersistentPromiseResolver();
+    const closed_resolver = try page.main_context.createPersistentPromiseResolver();
+
+    const stream = try page.arena.create(ReadableStream);
+    stream.* = ReadableStream{ .cancel_resolver = cancel_resolver, .closed_resolver = closed_resolver, .strategy = strategy };
+
+    const controller = ReadableStreamDefaultController{ .stream = stream };
+
+    // call start
+    if (underlying) |src| {
+        if (src.start) |start| {
+            try start.call(void, .{controller});
+        }
+
+        if (src.cancel) |cancel| {
+            stream.cancel_fn = cancel;
+        }
+
+        if (src.pull) |pull| {
+            stream.pull_fn = pull;
+            try stream.pullIf();
+        }
+    }
+
+    return stream;
+}
+
+pub fn destructor(self: *ReadableStream) void {
+    if (self.reader_resolver) |*rr| {
+        rr.deinit();
+    }
+}
+
+pub fn get_locked(self: *const ReadableStream) bool {
+    return self.locked;
+}
+
+pub fn _cancel(self: *ReadableStream, reason: ?[]const u8, page: *Page) !Env.Promise {
+    if (self.locked) {
+        return error.TypeError;
+    }
+
+    self.state = .{ .cancelled = if (reason) |r| try page.arena.dupe(u8, r) else null };
+
+    // Call cancel callback.
+    if (self.cancel_fn) |cancel| {
+        if (reason) |r| {
+            try cancel.call(void, .{r});
+        } else {
+            try cancel.call(void, .{});
+        }
+    }
+
+    try self.cancel_resolver.resolve({});
+    return self.cancel_resolver.promise();
+}
+
+pub fn pullIf(self: *ReadableStream) !void {
+    if (self.pull_fn) |pull_fn| {
+        // Must be under the high water mark AND readable.
+        if ((self.queue.items.len < self.strategy.high_water_mark) and self.state == .readable) {
+            const controller = ReadableStreamDefaultController{ .stream = self };
+            try pull_fn.call(void, .{controller});
+        }
+    }
+}
+
+const GetReaderOptions = struct {
+    // Mode must equal 'byob' or be undefined. RangeError otherwise.
+    mode: ?[]const u8 = null,
+};
+
+pub fn _getReader(self: *ReadableStream, _options: ?GetReaderOptions) !ReadableStreamDefaultReader {
+    if (self.locked) {
+        return error.TypeError;
+    }
+
+    // TODO: Determine if we need the ReadableStreamBYOBReader
+    const options = _options orelse GetReaderOptions{};
+    _ = options;
+
+    return ReadableStreamDefaultReader.constructor(self);
+}
+
+// TODO: pipeThrough (requires TransformStream)
+
+// TODO: pipeTo (requires WritableStream)
+
+// TODO: tee
+
+const testing = @import("../../testing.zig");
+test "streams: ReadableStream" {
+    try testing.htmlRunner("streams/readable_stream.html");
+}

src/browser/streams/ReadableStreamDefaultController.zig

@@ -0,0 +1,82 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const log = @import("../../log.zig");
+
+const Page = @import("../page.zig").Page;
+const Env = @import("../env.zig").Env;
+
+const ReadableStream = @import("./ReadableStream.zig");
+const ReadableStreamReadResult = @import("./ReadableStream.zig").ReadableStreamReadResult;
+
+const ReadableStreamDefaultController = @This();
+
+stream: *ReadableStream,
+
+pub fn get_desiredSize(self: *const ReadableStreamDefaultController) i32 {
+    // TODO: This may need tuning at some point if it becomes a performance issue.
+    return @intCast(self.stream.queue.capacity - self.stream.queue.items.len);
+}
+
+pub fn _close(self: *ReadableStreamDefaultController, _reason: ?[]const u8, page: *Page) !void {
+    const reason = if (_reason) |reason| try page.arena.dupe(u8, reason) else null;
+    self.stream.state = .{ .closed = reason };
+
+    // Resolve the Reader Promise
+    if (self.stream.reader_resolver) |*rr| {
+        defer rr.deinit();
+        try rr.resolve(ReadableStreamReadResult{ .value = .empty, .done = true });
+        self.stream.reader_resolver = null;
+    }
+
+    // Resolve the Closed promise.
+    try self.stream.closed_resolver.resolve({});
+
+    // close just sets as closed meaning it wont READ any more but anything in the queue is fine to read.
+    // to discard, must use cancel.
+}
+
+pub fn _enqueue(self: *ReadableStreamDefaultController, chunk: []const u8, page: *Page) !void {
+    const stream = self.stream;
+
+    if (stream.state != .readable) {
+        return error.TypeError;
+    }
+
+    const duped_chunk = try page.arena.dupe(u8, chunk);
+
+    if (self.stream.reader_resolver) |*rr| {
+        defer rr.deinit();
+        try rr.resolve(ReadableStreamReadResult{ .value = .{ .data = duped_chunk }, .done = false });
+        self.stream.reader_resolver = null;
+    }
+
+    try self.stream.queue.append(page.arena, duped_chunk);
+    try self.stream.pullIf();
+}
+
+pub fn _error(self: *ReadableStreamDefaultController, err: Env.JsObject) !void {
+    self.stream.state = .{ .errored = err };
+
+    if (self.stream.reader_resolver) |*rr| {
+        defer rr.deinit();
+        try rr.reject(err);
+        self.stream.reader_resolver = null;
+    }
+}

src/browser/streams/ReadableStreamDefaultReader.zig

@@ -0,0 +1,96 @@
+// Copyright (C) 2023-2024  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const log = @import("../../log.zig");
+const Env = @import("../env.zig").Env;
+const Page = @import("../page.zig").Page;
+const ReadableStream = @import("./ReadableStream.zig");
+const ReadableStreamReadResult = @import("./ReadableStream.zig").ReadableStreamReadResult;
+
+const ReadableStreamDefaultReader = @This();
+
+stream: *ReadableStream,
+
+pub fn constructor(stream: *ReadableStream) ReadableStreamDefaultReader {
+    return .{ .stream = stream };
+}
+
+pub fn get_closed(self: *const ReadableStreamDefaultReader) Env.Promise {
+    return self.stream.closed_resolver.promise();
+}
+
+pub fn _cancel(self: *ReadableStreamDefaultReader, reason: ?[]const u8, page: *Page) !Env.Promise {
+    return try self.stream._cancel(reason, page);
+}
+
+pub fn _read(self: *const ReadableStreamDefaultReader, page: *Page) !Env.Promise {
+    const stream = self.stream;
+
+    switch (stream.state) {
+        .readable => {
+            if (stream.queue.items.len > 0) {
+                const data = self.stream.queue.orderedRemove(0);
+                const resolver = page.main_context.createPromiseResolver();
+
+                try resolver.resolve(ReadableStreamReadResult{ .value = .{ .data = data }, .done = false });
+                try self.stream.pullIf();
+                return resolver.promise();
+            } else {
+                if (self.stream.reader_resolver) |rr| {
+                    return rr.promise();
+                } else {
+                    const persistent_resolver = try page.main_context.createPersistentPromiseResolver();
+                    self.stream.reader_resolver = persistent_resolver;
+                    return persistent_resolver.promise();
+                }
+            }
+        },
+        .closed => |_| {
+            const resolver = page.main_context.createPromiseResolver();
+
+            if (stream.queue.items.len > 0) {
+                const data = self.stream.queue.orderedRemove(0);
+                try resolver.resolve(ReadableStreamReadResult{ .value = .{ .data = data }, .done = false });
+            } else {
+                try resolver.resolve(ReadableStreamReadResult{ .value = .empty, .done = true });
+            }
+
+            return resolver.promise();
+        },
+        .cancelled => |_| {
+            const resolver = page.main_context.createPromiseResolver();
+            try resolver.resolve(ReadableStreamReadResult{ .value = .empty, .done = true });
+            return resolver.promise();
+        },
+        .errored => |err| {
+            const resolver = page.main_context.createPromiseResolver();
+            try resolver.reject(err);
+            return resolver.promise();
+        },
+    }
+}
+
+pub fn _releaseLock(self: *const ReadableStreamDefaultReader) !void {
+    self.stream.locked = false;
+
+    if (self.stream.reader_resolver) |rr| {
+        try rr.reject("TypeError");
+    }
+}

src/browser/streams/streams.zig

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

src/browser/xhr/File.zig

@@ -29,12 +29,6 @@ pub fn constructor() File {
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.File" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "" });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let f = new File()", null },
-        .{ "f instanceof File", "true" },
-    }, .{});
+test "Browser: File" {
+    try testing.htmlRunner("xhr/file.html");
 }

src/browser/xhr/form_data.zig

@@ -100,7 +100,7 @@ pub const FormData = struct {
             return kv.urlEncode(self.entries, .form, writer);
         }
 
-        log.warn(.web_api, "not implemented", .{
+        log.debug(.web_api, "not implemented", .{
             .feature = "form data encoding",
             .encoding = encoding,
         });
@@ -265,132 +265,11 @@ fn getSubmitterName(submitter_: ?*parser.ElementHTML) !?[]const u8 {
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.FormData" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = 
-        \\ <form id="form1">
-        \\   <input id="has_no_name" value="nope1">
-        \\   <input id="is_disabled" disabled value="nope2">
-        \\
-        \\   <input name="txt-1" value="txt-1-v">
-        \\   <input name="txt-2" value="txt-~-v" type=password>
-        \\
-        \\   <input name="chk-3" value="chk-3-va" type=checkbox>
-        \\   <input name="chk-3" value="chk-3-vb" type=checkbox checked>
-        \\   <input name="chk-3" value="chk-3-vc" type=checkbox checked>
-        \\   <input name="chk-4" value="chk-4-va" type=checkbox>
-        \\   <input name="chk-4" value="chk-4-va" type=checkbox>
-        \\
-        \\   <input name="rdi-1" value="rdi-1-va" type=radio>
-        \\   <input name="rdi-1" value="rdi-1-vb" type=radio>
-        \\   <input name="rdi-1" value="rdi-1-vc" type=radio checked>
-        \\   <input name="rdi-2" value="rdi-2-va" type=radio>
-        \\   <input name="rdi-2" value="rdi-2-vb" type=radio>
-        \\
-        \\   <textarea name="ta-1"> ta-1-v</textarea>
-        \\   <textarea name="ta"></textarea>
-        \\
-        \\   <input type=hidden name=h1 value="h1-v">
-        \\   <input type=hidden name=h2 value="h2-v" disabled=disabled>
-        \\
-        \\   <select name="sel-1"><option>blue<option>red</select>
-        \\   <select name="sel-2"><option>blue<option value=sel-2-v selected>red</select>
-        \\   <select name="sel-3"><option disabled>nope1<option>nope2</select>
-        \\   <select name="mlt-1" multiple><option>water<option>tea</select>
-        \\   <select name="mlt-2" multiple><option selected>water<option selected>tea<option>coffee</select>
-        \\   <input type=submit id=s1 name=s1 value=s1-v>
-        \\   <input type=submit name=s2 value=s2-v>
-        \\   <input type=image name=i1 value=i1-v>
-        \\ </form>
-        \\   <input type=text name=abc value=123 form=form1>
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let f = new FormData()", null },
-        .{ "f.get('a')", "null" },
-        .{ "f.has('a')", "false" },
-        .{ "f.getAll('a')", "" },
-        .{ "f.delete('a')", "undefined" },
-
-        .{ "f.set('a', 1)", "undefined" },
-        .{ "f.has('a')", "true" },
-        .{ "f.get('a')", "1" },
-        .{ "f.getAll('a')", "1" },
-
-        .{ "f.append('a', 2)", "undefined" },
-        .{ "f.has('a')", "true" },
-        .{ "f.get('a')", "1" },
-        .{ "f.getAll('a')", "1,2" },
-
-        .{ "f.append('b', '3')", "undefined" },
-        .{ "f.has('a')", "true" },
-        .{ "f.get('a')", "1" },
-        .{ "f.getAll('a')", "1,2" },
-        .{ "f.has('b')", "true" },
-        .{ "f.get('b')", "3" },
-        .{ "f.getAll('b')", "3" },
-
-        .{ "let acc = [];", null },
-        .{ "for (const key of f.keys()) { acc.push(key) }; acc;", "a,a,b" },
-
-        .{ "acc = [];", null },
-        .{ "for (const value of f.values()) { acc.push(value) }; acc;", "1,2,3" },
-
-        .{ "acc = [];", null },
-        .{ "for (const entry of f.entries()) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
-
-        .{ "acc = [];", null },
-        .{ "for (const entry of f) { acc.push(entry) }; acc;", "a,1,a,2,b,3" },
-
-        .{ "f.delete('a')", "undefined" },
-        .{ "f.has('a')", "false" },
-        .{ "f.has('b')", "true" },
-
-        .{ "acc = [];", null },
-        .{ "for (const key of f.keys()) { acc.push(key) }; acc;", "b" },
-
-        .{ "acc = [];", null },
-        .{ "for (const value of f.values()) { acc.push(value) }; acc;", "3" },
-
-        .{ "acc = [];", null },
-        .{ "for (const entry of f.entries()) { acc.push(entry) }; acc;", "b,3" },
-
-        .{ "acc = [];", null },
-        .{ "for (const entry of f) { acc.push(entry) }; acc;", "b,3" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "let form1 = document.getElementById('form1')", null },
-        .{ "let input = document.createElement('input');", null },
-        .{ "input.name = 'dyn'; input.value= 'dyn-v'; form1.appendChild(input);", null },
-        .{ "let submit1 = document.getElementById('s1')", null },
-        .{ "let f2 = new FormData(form1, submit1)", null },
-        .{ "acc = '';", null },
-        .{
-            \\ for (const entry of f2) {
-            \\   acc += entry[0] + '=' + entry[1] + '\n';
-            \\ };
-            \\ acc.slice(0, -1)
-            ,
-            \\txt-1=txt-1-v
-            \\txt-2=txt-~-v
-            \\chk-3=chk-3-vb
-            \\chk-3=chk-3-vc
-            \\rdi-1=rdi-1-vc
-            \\ta-1= ta-1-v
-            \\ta=
-            \\h1=h1-v
-            \\sel-1=blue
-            \\sel-2=sel-2-v
-            \\mlt-2=water
-            \\mlt-2=tea
-            \\s1=s1-v
-            \\dyn=dyn-v
-        },
-    }, .{});
+test "Browser: FormData" {
+    try testing.htmlRunner("xhr/form_data.html");
 }
 
-test "Browser.FormData: urlEncode" {
+test "Browser: FormData.urlEncode" {
     var arr: std.ArrayListUnmanaged(u8) = .empty;
     defer arr.deinit(testing.allocator);
 

src/browser/xhr/progress_event.zig

@@ -41,7 +41,7 @@ pub const ProgressEvent = struct {
         const event = try parser.eventCreate();
         defer parser.eventDestroy(event);
         try parser.eventInit(event, event_type, .{});
-        try parser.eventSetInternalType(event, .progress_event);
+        parser.eventSetInternalType(event, .progress_event);
 
         const o = opts orelse EventInit{};
 
@@ -67,18 +67,6 @@ pub const ProgressEvent = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.XHR.ProgressEvent" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let pevt = new ProgressEvent('foo');", "undefined" },
-        .{ "pevt.loaded", "0" },
-        .{ "pevt instanceof ProgressEvent", "true" },
-        .{ "var nnb = 0; var eevt = null; function ccbk(event) { nnb ++; eevt = event; }", "undefined" },
-        .{ "document.addEventListener('foo', ccbk)", "undefined" },
-        .{ "document.dispatchEvent(pevt)", "true" },
-        .{ "eevt.type", "foo" },
-        .{ "eevt instanceof ProgressEvent", "true" },
-    }, .{});
+test "Browser: XHR.ProgressEvent" {
+    try testing.htmlRunner("xhr/progress_event.html");
 }

src/browser/xhr/xhr.zig

@@ -273,7 +273,7 @@ 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);
+        parser.eventSetInternalType(evt, .xhr_event);
 
         try parser.eventInit(evt, typ, .{ .bubbles = true, .cancelable = true });
         _ = try parser.eventTargetDispatchEvent(@as(*parser.EventTarget, @ptrCast(self)), evt);
@@ -679,7 +679,7 @@ pub const XMLHttpRequest = struct {
         }
 
         var fbs = std.io.fixedBufferStream(self.response_bytes.items);
-        const doc = parser.documentHTMLParse(fbs.reader(), mime.charset orelse "UTF-8") catch {
+        const doc = parser.documentHTMLParse(fbs.reader(), mime.charsetString()) catch {
             self.response_obj = .{ .Failure = {} };
             return;
         };
@@ -755,117 +755,6 @@ pub const XMLHttpRequest = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.XHR.XMLHttpRequest" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "var nb = 0; var evt = null; function cbk(event) { nb ++; evt = event; }", "undefined" },
-        .{ "const req = new XMLHttpRequest()", "undefined" },
-
-        .{ "req.onload = cbk", "function cbk(event) { nb ++; evt = event; }" },
-
-        .{ "req.onload", "function cbk(event) { nb ++; evt = event; }" },
-        .{ "req.onload = cbk", "function cbk(event) { nb ++; evt = event; }" },
-
-        .{ "req.open('GET', 'http://127.0.0.1:9582/xhr')", null },
-
-        // ensure open resets values
-        .{ "req.status  ", "0" },
-        .{ "req.statusText", "" },
-        .{ "req.getAllResponseHeaders()", "" },
-        .{ "req.getResponseHeader('Content-Type')", "null" },
-        .{ "req.responseText", "" },
-
-        .{ "req.send(); nb", "0" },
-
-        // Each case executed waits for all loop callback calls.
-        // So the url has been retrieved.
-        .{ "nb", "1" },
-        .{ "evt.type", "load" },
-        .{ "evt.loaded > 0", "true" },
-        .{ "evt instanceof ProgressEvent", "true" },
-        .{ "req.status", "200" },
-        .{ "req.statusText", "OK" },
-        .{ "req.getResponseHeader('Content-Type')", "text/html; charset=utf-8" },
-        .{ "req.getAllResponseHeaders()", "content-length: 100\r\n" ++
-            "Content-Type: text/html; charset=utf-8\r\n" },
-        .{ "req.responseText.length", "100" },
-        .{ "req.response.length == req.responseText.length", "true" },
-        .{ "req.responseXML instanceof Document", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const req2 = new XMLHttpRequest()", "undefined" },
-        .{ "req2.open('GET', 'http://127.0.0.1:9582/xhr')", "undefined" },
-        .{ "req2.responseType = 'document'", "document" },
-
-        .{ "req2.send()", "undefined" },
-
-        // Each case executed waits for all loop callaback calls.
-        // So the url has been retrieved.
-        .{ "req2.status", "200" },
-        .{ "req2.statusText", "OK" },
-        .{ "req2.response instanceof Document", "true" },
-        .{ "req2.responseXML instanceof Document", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const req3 = new XMLHttpRequest()", "undefined" },
-        .{ "req3.open('GET', 'http://127.0.0.1:9582/xhr/json')", "undefined" },
-        .{ "req3.responseType = 'json'", "json" },
-
-        .{ "req3.send()", "undefined" },
-
-        // Each case executed waits for all loop callaback calls.
-        // So the url has been retrieved.
-        .{ "req3.status", "200" },
-        .{ "req3.statusText", "OK" },
-        .{ "req3.response.over", "9000!!!" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const req4 = new XMLHttpRequest()", "undefined" },
-        .{ "req4.open('POST', 'http://127.0.0.1:9582/xhr')", "undefined" },
-        .{ "req4.send('foo')", "undefined" },
-
-        // Each case executed waits for all loop callaback calls.
-        // So the url has been retrieved.
-        .{ "req4.status", "200" },
-        .{ "req4.statusText", "OK" },
-        .{ "req4.responseText.length > 64", "true" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "const req5 = new XMLHttpRequest()", "undefined" },
-        .{ "req5.open('GET', 'http://127.0.0.1:9582/xhr')", "undefined" },
-        .{ "var status = 0; req5.onload = function () { status = this.status };", "function () { status = this.status }" },
-        .{ "req5.send()", "undefined" },
-
-        // Each case executed waits for all loop callaback calls.
-        // 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', 'http://127.0.0.1:9582/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" },
-    }, .{});
+test "Browser: XHR.XMLHttpRequest" {
+    try testing.htmlRunner("xhr/xhr.html");
 }

src/cdp/domains/fetch.zig

@@ -200,6 +200,7 @@ pub fn requestIntercept(arena: Allocator, bc: anytype, intercept: *const Notific
             .script => "Script",
             .xhr => "XHR",
             .document => "Document",
+            .fetch => "Fetch",
         },
         .networkId = try std.fmt.allocPrint(arena, "REQ-{d}", .{transfer.id}),
     }, .{ .session_id = session_id });
@@ -405,6 +406,7 @@ pub fn requestAuthRequired(arena: Allocator, bc: anytype, intercept: *const Noti
             .script => "Script",
             .xhr => "XHR",
             .document => "Document",
+            .fetch => "Fetch",
         },
         .authChallenge = .{
             .source = if (challenge.source == .server) "Server" else "Proxy",

src/http/Client.zig

@@ -202,6 +202,7 @@ pub fn request(self: *Client, req: Request) !void {
         notification.dispatch(.http_request_intercept, &.{ .transfer = transfer, .wait_for_interception = &wait_for_interception });
         if (wait_for_interception) {
             self.intercepted += 1;
+            log.debug(.http, "wait for interception", .{ .intercepted = self.intercepted });
             if (builtin.mode == .Debug) {
                 transfer._intercepted = true;
             }
@@ -230,6 +231,7 @@ pub fn continueTransfer(self: *Client, transfer: *Transfer) !void {
         std.debug.assert(transfer._intercepted);
     }
     self.intercepted -= 1;
+    log.debug(.http, "continue transfer", .{ .intercepted = self.intercepted });
     return self.process(transfer);
 }
 
@@ -239,6 +241,7 @@ pub fn abortTransfer(self: *Client, transfer: *Transfer) void {
         std.debug.assert(transfer._intercepted);
     }
     self.intercepted -= 1;
+    log.debug(.http, "abort transfer", .{ .intercepted = self.intercepted });
     transfer.abort();
 }
 
@@ -248,6 +251,7 @@ pub fn fulfillTransfer(self: *Client, transfer: *Transfer, status: u16, headers:
         std.debug.assert(transfer._intercepted);
     }
     self.intercepted -= 1;
+    log.debug(.http, "filfull transfer", .{ .intercepted = self.intercepted });
     return transfer.fulfill(status, headers, body);
 }
 
@@ -440,6 +444,11 @@ fn processMessages(self: *Client) !void {
                     // In this case we ignore callbacks for now.
                     // Note: we don't deinit transfer on purpose: we want to keep
                     // using it for the following request.
+                    self.intercepted += 1;
+                    log.debug(.http, "wait for auth interception", .{ .intercepted = self.intercepted });
+                    if (builtin.mode == .Debug) {
+                        transfer._intercepted = true;
+                    }
                     self.endTransfer(transfer);
                     continue;
                 }
@@ -640,6 +649,7 @@ pub const Request = struct {
         document,
         xhr,
         script,
+        fetch,
     };
 };
 
@@ -811,6 +821,11 @@ pub const Transfer = struct {
     // abort. We don't call self.client.endTransfer here b/c it has been done
     // before interception process.
     pub fn abortAuthChallenge(self: *Transfer) void {
+        if (builtin.mode == .Debug) {
+            std.debug.assert(self._intercepted);
+        }
+        self.client.intercepted -= 1;
+        log.debug(.http, "abort auth transfer", .{ .intercepted = self.client.intercepted });
         self.client.requestFailed(self, error.AbortAuthChallenge);
         self.deinit();
     }

src/http/Http.zig

@@ -339,13 +339,13 @@ pub const Opts = struct {
     proxy_bearer_token: ?[:0]const u8 = null,
 };
 
-pub const Method = enum {
-    GET,
-    PUT,
-    POST,
-    DELETE,
-    HEAD,
-    OPTIONS,
+pub const Method = enum(u8) {
+    GET = 0,
+    PUT = 1,
+    POST = 2,
+    DELETE = 3,
+    HEAD = 4,
+    OPTIONS = 5,
 };
 
 // TODO: on BSD / Linux, we could just read the PEM file directly.

src/log.zig

@@ -39,6 +39,7 @@ pub const Scope = enum {
     unknown_prop,
     web_api,
     xhr,
+    fetch,
     polyfill,
     mouse_event,
 };

src/main_wpt.zig

@@ -25,7 +25,6 @@ const ArenaAllocator = std.heap.ArenaAllocator;
 const App = @import("app.zig").App;
 const Env = @import("browser/env.zig").Env;
 const Browser = @import("browser/browser.zig").Browser;
-const Session = @import("browser/session.zig").Session;
 const TestHTTPServer = @import("TestHTTPServer.zig");
 
 const parser = @import("browser/netsurf.zig");
@@ -75,15 +74,15 @@ pub fn main() !void {
 
     var browser = try Browser.init(app);
     defer browser.deinit();
-    const session = try browser.newSession();
 
+    var i: usize = 0;
     while (try it.next()) |test_file| {
         defer _ = test_arena.reset(.retain_capacity);
 
         var err_out: ?[]const u8 = null;
         const result = run(
             test_arena.allocator(),
-            session,
+            &browser,
             test_file,
             &err_out,
         ) catch |err| blk: {
@@ -93,16 +92,24 @@ pub fn main() !void {
             break :blk null;
         };
         try writer.process(test_file, result, err_out);
+        // if (@mod(i, 10) == 0) {
+        //     std.debug.print("\n\n=== V8 Memory {d}===\n", .{i});
+        //     browser.env.dumpMemoryStats();
+        // }
+        i += 1;
     }
     try writer.finalize();
 }
 
 fn run(
     arena: Allocator,
-    session: *Session,
+    browser: *Browser,
     test_file: []const u8,
     err_out: *?[]const u8,
 ) ![]const u8 {
+    const session = try browser.newSession();
+    defer browser.closeSession();
+
     const page = try session.createPage();
     defer session.removePage();
 
@@ -141,11 +148,7 @@ const Writer = struct {
     writer: std.fs.File.Writer,
     cases: std.ArrayListUnmanaged(Case) = .{},
 
-    const Format = enum {
-        json,
-        text,
-        summary,
-    };
+    const Format = enum { json, text, summary, quiet };
 
     fn init(allocator: Allocator, format: Format) !Writer {
         const out = std.fs.File.stdout();
@@ -200,6 +203,7 @@ const Writer = struct {
                     }, .{ .whitespace = .indent_2 }, writer);
                     return writer.writeByte(',');
                 },
+                .quiet => {},
             }
             // just make sure we didn't fall through by mistake
             unreachable;
@@ -289,6 +293,7 @@ const Writer = struct {
                 // separator, see `finalize` for the hack we use to terminate this
                 try writer.writeByte(',');
             },
+            .quiet => {},
         }
     }
 
@@ -309,7 +314,8 @@ fn parseArgs(arena: Allocator) !Command {
         \\
         \\  -h, --help       Print this help message and exit.
         \\  --json           result is formatted in JSON.
-        \\  --summary        print a summary result. Incompatible w/ --json
+        \\  --summary        print a summary result. Incompatible w/ --json or --quiet
+        \\  --quiet          No output. Incompatible w/ --json or --summary
         \\
     ;
 
@@ -331,6 +337,8 @@ fn parseArgs(arena: Allocator) !Command {
             format = .json;
         } else if (std.mem.eql(u8, "--summary", arg)) {
             format = .summary;
+        } else if (std.mem.eql(u8, "--quiet", arg)) {
+            format = .quiet;
         } else {
             try filters.append(arena, arg);
         }

src/runtime/js.zig

@@ -198,6 +198,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             // This is the callback that runs whenever a module is dynamically imported.
             isolate.setHostImportModuleDynamicallyCallback(JsContext.dynamicModuleCallback);
             isolate.setPromiseRejectCallback(promiseRejectCallback);
+            isolate.setMicrotasksPolicy(v8.c.kExplicit);
 
             isolate.enter();
             errdefer isolate.exit();
@@ -329,6 +330,27 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             self.isolate.lowMemoryNotification();
         }
 
+        pub fn dumpMemoryStats(self: *Self) void {
+            const stats = self.isolate.getHeapStatistics();
+            std.debug.print(
+                \\ Total Heap Size: {d}
+                \\ Total Heap Size Executable: {d}
+                \\ Total Physical Size: {d}
+                \\ Total Available Size: {d}
+                \\ Used Heap Size: {d}
+                \\ Heap Size Limit: {d}
+                \\ Malloced Memory: {d}
+                \\ External Memory: {d}
+                \\ Peak Malloced Memory: {d}
+                \\ Number Of Native Contexts: {d}
+                \\ Number Of Detached Contexts: {d}
+                \\ Total Global Handles Size: {d}
+                \\ Used Global Handles Size: {d}
+                \\ Zap Garbage: {any}
+                \\
+            , .{ stats.total_heap_size, stats.total_heap_size_executable, stats.total_physical_size, stats.total_available_size, stats.used_heap_size, stats.heap_size_limit, stats.malloced_memory, stats.external_memory, stats.peak_malloced_memory, stats.number_of_native_contexts, stats.number_of_detached_contexts, stats.total_global_handles_size, stats.used_global_handles_size, stats.does_zap_garbage });
+        }
+
         fn promiseRejectCallback(v8_msg: v8.C_PromiseRejectMessage) callconv(.c) void {
             const msg = v8.PromiseRejectMessage.initFromC(v8_msg);
             const isolate = msg.getPromise().toObject().getIsolate();
@@ -655,6 +677,9 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
             // we now simply persist every time persist() is called.
             js_object_list: std.ArrayListUnmanaged(PersistentObject) = .empty,
 
+
+            persisted_promise_resolvers: std.ArrayListUnmanaged(v8.Persistent(v8.PromiseResolver)) = .empty,
+
             // When we need to load a resource (i.e. an external script), we call
             // this function to get the source. This is always a reference to the
             // Page's fetchModuleSource, but we use a function pointer
@@ -711,6 +736,10 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     p.deinit();
                 }
 
+                for (self.persisted_promise_resolvers.items) |*p| {
+                    p.deinit();
+                }
+
                 {
                     var it = self.module_cache.valueIterator();
                     while (it.next()) |p| {
@@ -1108,6 +1137,16 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                         },
                         else => {},
                     },
+                    .array => |arr| {
+                        // Retrieve fixed-size array as slice
+                        const slice_type = []arr.child;
+                        const slice_value = try self.jsValueToZig(named_function, slice_type, js_value);
+                        if (slice_value.len != arr.len) {
+                            // Exact length match, we could allow smaller arrays, but we would not be able to communicate how many were written
+                            return error.InvalidArgument;
+                        }
+                        return @as(*T, @ptrCast(slice_value.ptr)).*;
+                    },
                     .@"struct" => {
                         return try (self.jsValueToStruct(named_function, T, js_value)) orelse {
                             return error.InvalidArgument;
@@ -1229,6 +1268,15 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                 };
             }
 
+            pub fn createPersistentPromiseResolver(self: *JsContext) !PersistentPromiseResolver {
+                const resolver = v8.Persistent(v8.PromiseResolver).init(self.isolate, v8.PromiseResolver.init(self.v8_context));
+                try self.persisted_promise_resolvers.append(self.context_arena, resolver);
+                return .{
+                    .js_context = self,
+                    .resolver = resolver,
+                };
+            }
+
             // Probing is part of trying to map a JS value to a Zig union. There's
             // a lot of ambiguity in this process, in part because some JS values
             // can almost always be coerced. For example, anything can be coerced
@@ -1391,6 +1439,36 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                         },
                         else => {},
                     },
+                    .array => |arr| {
+                        // Retrieve fixed-size array as slice then probe
+                        const slice_type = []arr.child;
+                        switch (try self.probeJsValueToZig(named_function, slice_type, js_value)) {
+                            .value => |slice_value| {
+                                if (slice_value.len == arr.len) {
+                                    return .{ .value = @as(*T, @ptrCast(slice_value.ptr)).* };
+                                }
+                                return .{ .invalid = {} };
+                            },
+                            .ok => {
+                                // Exact length match, we could allow smaller arrays as .compatible, but we would not be able to communicate how many were written
+                                if (js_value.isArray()) {
+                                    const js_arr = js_value.castTo(v8.Array);
+                                    if (js_arr.length() == arr.len) {
+                                        return .{ .ok = {} };
+                                    }
+                                } else if (js_value.isString() and arr.child == u8) {
+                                    const str = try js_value.toString(self.v8_context);
+                                    if (str.lenUtf8(self.isolate) == arr.len) {
+                                        return .{ .ok = {} };
+                                    }
+                                }
+                                return .{ .invalid = {} };
+                            },
+                            .compatible => return .{ .compatible = {} },
+                            .coerce => return .{ .coerce = {} },
+                            .invalid => return .{ .invalid = {} },
+                        }
+                    },
                     .@"struct" => {
                         // We don't want to duplicate the code for this, so we call
                         // the actual conversion function.
@@ -1668,6 +1746,11 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                         specifier: []const u8,
                         module: v8.Persistent(v8.Module),
                         resolver: v8.Persistent(v8.PromiseResolver),
+
+                        pub fn deinit(ev: *@This()) void {
+                            ev.module.deinit();
+                            ev.resolver.deinit();
+                        }
                     };
 
                     const ev_data = try self.context_arena.create(EvaluationData);
@@ -1684,6 +1767,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             const cb_isolate = cb_info.getIsolate();
                             const cb_context = cb_isolate.getCurrentContext();
                             const data: *EvaluationData = @ptrCast(@alignCast(cb_info.getExternalValue()));
+                            defer data.deinit();
                             const cb_module = data.module.castToModule();
                             const cb_resolver = data.resolver.castToPromiseResolver();
 
@@ -1698,6 +1782,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             const cb_info = v8.FunctionCallbackInfo{ .handle = info.? };
                             const cb_context = cb_info.getIsolate().getCurrentContext();
                             const data: *EvaluationData = @ptrCast(@alignCast(cb_info.getExternalValue()));
+                            defer data.deinit();
                             const cb_resolver = data.resolver.castToPromiseResolver();
 
                             log.err(.js, "dynamic import failed", .{ .specifier = data.specifier });
@@ -1710,6 +1795,7 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                             .specifier = specifier,
                             .line = try_catch.sourceLineNumber() orelse 0,
                         });
+                        defer ev_data.deinit();
                         const error_msg = v8.String.initUtf8(iso, "Evaluation is a promise");
                         _ = resolver.reject(ctx, error_msg.toValue());
                         return;
@@ -2148,6 +2234,54 @@ pub fn Env(comptime State: type, comptime WebApis: type) type {
                     return error.FailedToResolvePromise;
                 }
             }
+
+            pub fn reject(self: PromiseResolver, value: anytype) !void {
+                const js_context = self.js_context;
+                const js_value = try js_context.zigValueToJs(value);
+
+                // resolver.reject will return null if the promise isn't pending
+                const ok = self.resolver.reject(js_context.v8_context, js_value) orelse return;
+                if (!ok) {
+                    return error.FailedToRejectPromise;
+                }
+            }
+        };
+
+        pub const PersistentPromiseResolver = struct {
+            js_context: *JsContext,
+            resolver: v8.Persistent(v8.PromiseResolver),
+
+            pub fn deinit(self: *PersistentPromiseResolver) void {
+                self.resolver.deinit();
+            }
+
+            pub fn promise(self: PersistentPromiseResolver) Promise {
+                return .{
+                    .promise = self.resolver.castToPromiseResolver().getPromise(),
+                };
+            }
+
+            pub fn resolve(self: PersistentPromiseResolver, value: anytype) !void {
+                const js_context = self.js_context;
+                const js_value = try js_context.zigValueToJs(value);
+
+                // resolver.resolve will return null if the promise isn't pending
+                const ok = self.resolver.castToPromiseResolver().resolve(js_context.v8_context, js_value) orelse return;
+                if (!ok) {
+                    return error.FailedToResolvePromise;
+                }
+            }
+
+            pub fn reject(self: PersistentPromiseResolver, value: anytype) !void {
+                const js_context = self.js_context;
+                const js_value = try js_context.zigValueToJs(value);
+
+                // resolver.reject will return null if the promise isn't pending
+                const ok = self.resolver.castToPromiseResolver().reject(js_context.v8_context, js_value) orelse return;
+                if (!ok) {
+                    return error.FailedToRejectPromise;
+                }
+            }
         };
 
         pub const Promise = struct {

src/runtime/test_object_types.zig

@@ -210,8 +210,8 @@ test "JS: object types" {
 
     defer runner.deinit();
 
-    // v8 has 5 default "own" properties
-    const own_base = "5";
+    // v8 has 3 default "own" properties
+    const own_base = "3";
 
     try runner.testCases(&.{
         .{ "Object.getOwnPropertyNames(MyObject).length;", own_base },

src/tests/dom/node.html

@@ -0,0 +1,225 @@
+<body><div id="content">
+    <a id="link" href="foo" class="ok">OK</a>
+    <p id="para-empty" class="ok empty">
+      <span id="para-empty-child"></span>
+    </p>
+    <p id="para"> And</p>
+    <!--comment-->
+  </div>
+</body>
+
+<script src="../testing.js"></script>
+<script>
+function trimAndReplace(str) {
+  str = str.replace(/(\r\n|\n|\r)/gm,'');
+  str = str.replace(/\s+/g, ' ');
+  str = str.trim();
+  return str;
+}
+
+let content = $('#content');
+let link = $('#link');
+let first_child = content.firstChild.nextSibling; // nextSibling because of line return \n
+</script>
+
+<script id=compareDocumentPosition>
+  testing.expectEqual(10, document.body.compareDocumentPosition(document.firstChild));
+  testing.expectEqual(10, $('#para-empty').compareDocumentPosition(content));
+  testing.expectEqual(20, content.compareDocumentPosition($('#para-empty')));
+  testing.expectEqual(0, link.compareDocumentPosition(link));
+  testing.expectEqual(2, $('#para-empty').compareDocumentPosition(link));
+  testing.expectEqual(4, link.compareDocumentPosition($('#para-empty')));
+</script>
+
+<script id=proto>
+  testing.expectEqual('HTMLDocument', content.getRootNode().__proto__.constructor.name);
+</script>
+
+<script id=firstChild>
+  let body_first_child = document.body.firstChild;
+  testing.expectEqual('div', body_first_child.localName);
+  testing.expectEqual('HTMLDivElement', body_first_child.__proto__.constructor.name);
+  testing.expectEqual(null, $('#para-empty').firstChild.firstChild);
+</script>
+
+<script id=lastChild>
+  let last_child = content.lastChild.previousSibling; // previousSibling because of line return \n
+  testing.expectEqual('Comment', last_child.__proto__.constructor.name);
+</script>
+
+<script id=nextSibling>
+  let next_sibling = link.nextSibling.nextSibling;
+  testing.expectEqual('p', next_sibling.localName);
+  testing.expectEqual('HTMLParagraphElement', next_sibling.__proto__.constructor.name);
+  testing.expectEqual(null, $('#para-empty-child').nextSibling.nextSibling);
+</script>
+
+<script id=previousSibling>
+  let prev_sibling = $('#para-empty').previousSibling.previousSibling;
+  testing.expectEqual('a', prev_sibling.localName);
+  testing.expectEqual('HTMLAnchorElement', prev_sibling.__proto__.constructor.name);
+  testing.expectEqual(null, content.previousSibling);
+</script>
+
+<script id=parentElement>
+  let parent = $('#para').parentElement;
+  testing.expectEqual('div', parent.localName);
+  testing.expectEqual('HTMLDivElement', parent.__proto__.constructor.name)
+
+  let h = content.parentElement.parentElement;
+  testing.expectEqual(null, h.parentElement);
+  testing.expectEqual('HTMLDocument', h.parentNode.__proto__.constructor.name);
+</script>
+
+<script id=nodeName>
+  testing.expectEqual('A', first_child.nodeName);
+  testing.expectEqual('#text', link.firstChild.nodeName);
+  testing.expectEqual('#comment', last_child.nodeName);
+  testing.expectEqual('#document', document.nodeName);
+</script>
+
+<script id=nodeType>
+  testing.expectEqual(1, first_child.nodeType)
+  testing.expectEqual(3, link.firstChild.nodeType)
+  testing.expectEqual(8, last_child.nodeType)
+  testing.expectEqual(9, document.nodeType)
+</script>
+
+<script id=ownerDocument>
+  let owner = content.ownerDocument;
+  testing.expectEqual('HTMLDocument', owner.__proto__.constructor.name);
+  testing.expectEqual(null, document.ownerDocument)
+
+  let owner2 = document.createElement('div').ownerDocument;
+  testing.expectEqual('HTMLDocument', owner2.__proto__.constructor.name);
+</script>
+
+<script id=isConnected>
+  testing.expectEqual(true, content.isConnected);
+  testing.expectEqual(true, document.isConnected);
+
+  const connDiv = document.createElement('div');
+  testing.expectEqual(false, connDiv.isConnected);
+
+  const connParentDiv = document.createElement('div');
+  connParentDiv.appendChild(connDiv);
+  testing.expectEqual(false, connDiv.isConnected);
+
+  content.appendChild(connParentDiv);
+  testing.expectEqual(true, connDiv.isConnected);
+</script>
+
+<script id=nodeValue>
+  testing.expectEqual('comment', last_child.nodeValue);
+  testing.expectEqual(null, link.nodeValue);
+
+  let text = link.firstChild;
+  testing.expectEqual('OK', text.nodeValue);
+
+  text.nodeValue = 'OK modified';
+  testing.expectEqual('OK modified', text.nodeValue);
+</script>
+
+<script id=textContent>
+  testing.expectEqual('OK modified', text.textContent);
+  testing.expectEqual('OK modified And', trimAndReplace(content.textContent));
+  text.textContent = 'OK';
+  testing.expectEqual('OK', text.textContent);
+
+  testing.expectEqual('', trimAndReplace($('#para-empty').textContent));
+
+  $('#para-empty').textContent = 'OK';
+  testing.expectEqual('#text', $('#para-empty').firstChild.nodeName);
+</script>
+
+<script id=appendChild>
+  let append = document.createElement('h1');
+  testing.expectEqual('[object HTMLHeadingElement]', content.appendChild(append).toString());
+  testing.expectEqual('HTMLHeadingElement', content.lastChild.__proto__.constructor.name);
+  testing.expectEqual('[object HTMLAnchorElement]', content.appendChild(link).toString());
+</script>
+
+<script id=cloneNode>
+  let clone = link.cloneNode();
+  testing.expectEqual('[object HTMLAnchorElement]', clone.toString());
+  testing.expectEqual(null, clone.parentNode);
+  testing.expectEqual(null, clone.firstChild);
+
+  let clone_deep = link.cloneNode(true);
+  testing.expectEqual('#text', clone_deep.firstChild.nodeName);
+</script>
+
+<script id=contains>
+  testing.expectEqual(true, link.contains(text));
+  testing.expectEqual(false, text.contains(link));
+</script>
+
+<script id=hasChildNodes>
+  testing.expectEqual(true, link.hasChildNodes());
+  testing.expectEqual(false, text.hasChildNodes());
+</script>
+
+<script id=childNodesLength>
+  testing.expectEqual(1, link.childNodes.length);
+  testing.expectEqual(0, text.childNodes.length);
+</script>
+
+<script id=insertBefore>
+  let insertBefore = document.createElement('a');
+  testing.expectEqual(true, link.insertBefore(insertBefore, text) !== undefined);
+  testing.expectEqual('a', link.firstChild.localName);
+
+  let insertBefore2 = document.createElement('b');
+  testing.expectEqual('b', link.insertBefore(insertBefore2, null).localName);
+  testing.expectEqual('b', link.childNodes[link.childNodes.length - 1].localName);
+</script>
+
+<script id=isDefaultNamespace>
+  // TODO: does not seems to work
+  //   link.isDefaultNamespace('')", "true" },
+  testing.expectEqual(false, link.isDefaultNamespace('false'));
+</script>
+
+<script id=isEqualNode>
+  let equal1 = document.createElement('a');
+  let equal2 = document.createElement('a');
+  equal1.textContent = 'is equal';
+  equal2.textContent = 'is equal';
+  // TODO: does not seems to work
+  // testing.expectEqual(true, equal1.isEqualNode(equal2));
+  testing.skip();
+</script>
+
+<script id=isSameNode>
+  testing.expectEqual(true, document.body.isSameNode(document.body));
+  testing.expectEqual(false, document.body.isSameNode(content));
+</script>
+
+<script id=baseURI>
+  testing.expectEqual('http://localhost:9582/src/tests/dom/node.html', link.baseURI);
+</script>
+
+<script id=removeChild>
+  testing.expectEqual(true, content.removeChild(append) !== undefined);
+  testing.expectEqual(true, last_child.__proto__.constructor.name !== 'HTMLHeadingElement');
+</script>
+
+<script id=replaceChild>
+  let replace = document.createElement('div');
+  testing.expectEqual(true, link.replaceChild(replace, insertBefore) !== undefined);
+</script>
+
+<script id=NODE_TYPE>
+  testing.expectEqual(1, Node.ELEMENT_NODE);
+  testing.expectEqual(2, Node.ATTRIBUTE_NODE);
+  testing.expectEqual(3, Node.TEXT_NODE);
+  testing.expectEqual(4, Node.CDATA_SECTION_NODE);
+  testing.expectEqual(7, Node.PROCESSING_INSTRUCTION_NODE);
+  testing.expectEqual(8, Node.COMMENT_NODE);
+  testing.expectEqual(9, Node.DOCUMENT_NODE);
+  testing.expectEqual(10, Node.DOCUMENT_TYPE_NODE);
+  testing.expectEqual(11, Node.DOCUMENT_FRAGMENT_NODE);
+  testing.expectEqual(5, Node.ENTITY_REFERENCE_NODE);
+  testing.expectEqual(6, Node.ENTITY_NODE);
+  testing.expectEqual(12, Node.NOTATION_NODE);
+</script>

src/tests/dom/node_filter.html

@@ -0,0 +1,8 @@
+<script src="../testing.js"></script>
+<script id=nodeFilter>
+  testing.expectEqual(1, NodeFilter.FILTER_ACCEPT);
+  testing.expectEqual(2, NodeFilter.FILTER_REJECT);
+  testing.expectEqual(3, NodeFilter.FILTER_SKIP);
+  testing.expectEqual(4294967295, NodeFilter.SHOW_ALL);
+  testing.expectEqual(129, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT);
+</script>

src/tests/dom/node_iterator.html

@@ -0,0 +1,61 @@
+<script src="../testing.js"></script>
+<script id=nodeIterator>
+  const nodeIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ELEMENT,
+    {
+      acceptNode(node) {
+        return NodeFilter.FILTER_ACCEPT;
+      },
+    },
+  );
+  testing.expectEqual('BODY', nodeIterator.nextNode().nodeName);
+
+  testing.expectEqual('DIV', nodeIterator.nextNode().nodeName);
+  testing.expectEqual('A', nodeIterator.nextNode().nodeName);
+  testing.expectEqual('A', nodeIterator.previousNode().nodeName); // pointer_before_current flips
+  testing.expectEqual('A', nodeIterator.nextNode().nodeName); // pointer_before_current flips
+  testing.expectEqual('A', nodeIterator.previousNode().nodeName); // pointer_before_current flips
+  testing.expectEqual('DIV', nodeIterator.previousNode().nodeName);
+  testing.expectEqual('BODY', nodeIterator.previousNode().nodeName);
+  testing.expectEqual(null, nodeIterator.previousNode()); // Not HEAD since body is root
+  testing.expectEqual(null, nodeIterator.previousNode()); // Keeps returning null
+  testing.expectEqual('BODY', nodeIterator.nextNode().nodeName);
+
+  nodeIterator.nextNode();
+  nodeIterator.nextNode();
+  nodeIterator.nextNode();
+  testing.expectEqual('SPAN', nodeIterator.nextNode().nodeName);
+  testing.expectEqual('P', nodeIterator.nextNode().nodeName);
+  testing.expectEqual(null, nodeIterator.nextNode()); // Just the last one
+  testing.expectEqual(null ,nodeIterator.nextNode()); // Keeps returning null
+  testing.expectEqual('P', nodeIterator.previousNode().nodeName);
+
+  const notationIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_NOTATION,
+  );
+  testing.expectEqual(null, notationIterator.nextNode());
+  testing.expectEqual(null, notationIterator.previousNode());
+
+  testing.expectEqual(1, nodeIterator.filter.acceptNode(document.body));
+  testing.expectEqual(null, notationIterator.filter);
+
+  const rejectIterator = document.createNodeIterator(
+    document.body,
+    NodeFilter.SHOW_ALL,
+    (e => { return NodeFilter.FILTER_REJECT}),
+  );
+  testing.expectEqual(2, rejectIterator.filter(document.body));
+</script>
+
+<body>
+    <div id="content">
+    <a id="link" href="foo" class="ok">OK</a>
+    <p id="para-empty" class="ok empty">
+      <span id="para-empty-child"></span>
+    </p>
+    <p id="para"> And</p>
+    <!--comment-->
+  </div>
+</body>

src/tests/dom/node_list.html

@@ -0,0 +1,18 @@
+<div id="content">
+  <a id="link" href="foo" class="ok">OK</a>
+  <p id="para-empty" class="ok empty">
+    <span id="para-empty-child"></span>
+  </p>
+  <p id="para"> And</p>
+  <!--comment-->
+</div>
+
+<script src="../testing.js"></script>
+<script id=nodeList>
+  let list = document.getElementById('content').childNodes;
+  testing.expectEqual(9, list.length);
+  testing.expectEqual('Text', list[0].__proto__.constructor.name);
+  let i = 0;
+  list.forEach(function (n, idx) { i += idx; });
+  testing.expectEqual(36, i);
+</script>

src/tests/dom/node_owner.html

@@ -0,0 +1,33 @@
+<div id="target-container">
+  <p id="reference-node">
+  I am the original reference node.
+  </p>
+</div>
+
+<script src="../testing.js"></script>
+<script id=nodeOwner>
+  const parser = new DOMParser();
+  const newDoc = parser.parseFromString('<div id="new-node"><p>Hey</p><span>Marked</span></div>', 'text/html');
+  const newNode = newDoc.getElementById('new-node');
+  const parent = $('#target-container');
+  const referenceNode = $('#reference-node');
+
+  parent.insertBefore(newNode, referenceNode);
+  const k = $('#new-node');
+  const ptag = k.querySelector('p');
+  const spanTag = k.querySelector('span');
+  const anotherDoc = parser.parseFromString('<div id="another-new-node"></div>', 'text/html');
+  const anotherNewNode = anotherDoc.getElementById('another-new-node');
+  testing.expectEqual('[object HTMLDivElement]', parent.appendChild(anotherNewNode).toString());
+
+
+  testing.expectEqual(newNode.ownerDocument, parent.ownerDocument);
+  testing.expectEqual(anotherNewNode.ownerDocument, parent.ownerDocument);
+  testing.expectEqual('P', newNode.firstChild.nodeName);
+  testing.expectEqual(parent.ownerDocument, ptag.ownerDocument);
+  testing.expectEqual(parent.ownerDocument, spanTag.ownerDocument);
+  testing.expectEqual(true, parent.contains(newNode));
+  testing.expectEqual(true, parent.contains(anotherNewNode));
+  testing.expectEqual(false, anotherDoc.contains(anotherNewNode));
+  testing.expectEqual(false, newDoc.contains(newNode));
+</script>

src/tests/dom/performance.html

@@ -0,0 +1,15 @@
+<script src="../testing.js"></script>
+<script id=performance>
+  let performance = window.performance;
+  testing.expectEqual(true, performance instanceof Performance);
+
+  let mark1 = performance.mark("start");
+  testing.expectEqual(true, mark1 instanceof PerformanceMark);
+  testing.expectEqual('start', mark1.name);
+  testing.expectEqual('mark', mark1.entryType);
+  testing.expectEqual(0, mark1.duration);
+  testing.expectEqual(null, mark1.detail);
+
+  let mark2 = performance.mark("start", {startTime: 32939393.9});
+  testing.expectEqual(32939393.9, mark2.startTime);
+</script>

src/tests/dom/performance_observer.html

@@ -0,0 +1,4 @@
+<script src="../testing.js"></script>
+<script id=performanceObserver>
+  testing.expectEqual(0, PerformanceObserver.supportedEntryTypes.length);
+</script>

src/tests/dom/processing_instruction.html

@@ -0,0 +1,21 @@
+<script src="../testing.js"></script>
+<script id=processingInstruction>
+  let pi = document.createProcessingInstruction('foo', 'bar');
+  testing.expectEqual('foo', pi.target);
+  testing.expectEqual('bar', pi.data);
+  pi.data = 'foo';
+  testing.expectEqual('foo', pi.data);
+
+  let pi2 = pi.cloneNode();
+  testing.expectEqual(7, pi2.nodeType);
+
+  let pi11 = document.createProcessingInstruction('target1', 'data1');
+  let pi12 = document.createProcessingInstruction('target2', 'data2');
+  let pi13 = document.createProcessingInstruction('target1', 'data1');
+  testing.expectEqual(true, pi11.isEqualNode(pi11));
+  testing.expectEqual(true, pi11.isEqualNode(pi13));
+  testing.expectEqual(false, pi11.isEqualNode(pi12));
+  testing.expectEqual(false, pi12.isEqualNode(pi13));
+  testing.expectEqual(false, pi11.isEqualNode(document));
+  testing.expectEqual(false, document.isEqualNode(pi11));
+</script>

src/tests/dom/range.html

@@ -0,0 +1,40 @@
+<script src="../testing.js"></script>
+
+<div id=content><!-- hello world --><p>over 9000</p></div>
+
+<script id="constructor">
+  let range = new Range();
+  testing.expectEqual(true, range instanceof Range);
+  testing.expectEqual(true, range instanceof AbstractRange);
+
+// Test initial state - collapsed range
+  testing.expectEqual(true, range.collapsed);
+  testing.expectEqual(0, range.startOffset);
+  testing.expectEqual(0, range.endOffset);
+  testing.expectEqual(true, range.startContainer instanceof HTMLDocument);
+  testing.expectEqual(true, range.endContainer instanceof HTMLDocument);
+</script>
+
+<script id="createRange">
+  let docRange = document.createRange();
+  testing.expectEqual(true, docRange instanceof Range);
+  testing.expectEqual(true, docRange.collapsed);
+</script>
+
+<script id=textRange>
+  const container = $('#content');
+  const commentNode = container.childNodes[0];
+  testing.expectEqual(' hello world ', commentNode.nodeValue);
+
+  const textRange = document.createRange();
+  textRange.selectNodeContents(commentNode);
+  testing.expectEqual(0, textRange.startOffset);
+  testing.expectEqual(13, textRange.endOffset); // length of comment
+</script>
+
+<script id=nodeRange>
+  const nodeRange = document.createRange();
+  nodeRange.selectNodeContents(container);
+  testing.expectEqual(0, nodeRange.startOffset);
+  testing.expectEqual(2, nodeRange.endOffset); // length of container.childNodes
+</script>

src/tests/dom/shadow_root.html

@@ -0,0 +1,48 @@
+<div id=conflict>node</div>
+
+<script src="../testing.js"></script>
+<script id=shadow_root>
+  const div1 = document.createElement('div');
+  let sr1 = div1.attachShadow({mode: 'open'});
+  testing.expectEqual(div1, sr1.host);
+  testing.expectEqual(sr1, div1.attachShadow({mode: 'open'}));
+  testing.expectEqual(sr1, div1.shadowRoot);
+
+  testing.expectError('Error: NotSupportedError', () => {
+    div1.attachShadow({mode: 'closed'});
+  });
+
+  sr1.append(document.createElement('div'));
+  sr1.append(document.createElement('span'));
+  testing.expectEqual(2, sr1.childElementCount);
+
+  // re-attaching clears it
+  testing.expectEqual(sr1, div1.attachShadow({mode: 'open'}));
+  testing.expectEqual(0, sr1.childElementCount);
+
+
+  const div2 = document.createElement('di2');
+  let sr2 = div2.attachShadow({mode: 'closed'});
+  testing.expectEqual(div2, sr2.host);
+  testing.expectEqual(null, div2.shadowRoot) // null when attached with 'closed'
+
+
+  testing.expectEqual(null, sr2.getElementById('conflict'));
+  const n1 = document.createElement('div');
+  n1.id = 'conflict';
+  sr2.append(n1);
+  testing.expectEqual(n1, sr2.getElementById('conflict'));
+
+  const acss = sr2.adoptedStyleSheets;
+  testing.expectEqual(0, acss.length);
+  acss.push(new CSSStyleSheet());
+  testing.expectEqual(1, acss.length);
+
+  sr1.innerHTML = '<p>hello</p>';
+  testing.expectEqual('<p>hello</p>', sr1.innerHTML);
+  testing.expectEqual('[object HTMLParagraphElement]', sr1.querySelector('*').toString());
+
+  sr1.innerHTML = null;
+  testing.expectEqual('', sr1.innerHTML);
+  testing.expectEqual(null, sr1.querySelector('*'));
+  </script>

src/tests/dom/text.html

@@ -0,0 +1,18 @@
+<a id="link" href="foo" class="ok">OK</a>
+
+<script src="../testing.js"></script>
+<script id=text>
+  let t = new Text('foo');
+  testing.expectEqual('foo', t.data);
+
+  let emptyt = new Text();
+  testing.expectEqual('', emptyt.data);
+
+  let text = $('#link').firstChild;
+  testing.expectEqual('OK', text.wholeText);
+
+  text.data = 'OK modified';
+  let split = text.splitText('OK'.length);
+  testing.expectEqual(' modified', split.data);
+  testing.expectEqual('OK', text.data);
+</script>

src/tests/dom/token_list.html

@@ -0,0 +1,63 @@
+<p id="para-empty" class="ok empty">
+
+<script src="../testing.js"></script>
+<script id=tokenList>
+  let gs = $('#para-empty');
+
+  let cl = gs.classList;
+  testing.expectEqual('ok empty', gs.className);
+  testing.expectEqual('ok empty', cl.value);
+  testing.expectEqual(2, cl.length);
+
+  gs.className = 'foo bar baz';
+  testing.expectEqual('foo bar baz', gs.className);
+  testing.expectEqual(3, cl.length);
+
+  gs.className = 'ok empty';
+  testing.expectEqual(2, cl.length);
+
+  let cl2 = gs.classList;
+  testing.expectEqual(2, cl2.length);
+  testing.expectEqual('ok', cl2.item(0));
+  testing.expectEqual('empty', cl2.item(1));
+  testing.expectEqual(true, cl2.contains('ok'));
+  testing.expectEqual(false, cl2.contains('nok'));
+
+  cl2.add('foo', 'bar', 'baz');
+  testing.expectEqual(5, cl2.length);
+
+  cl2.remove('foo', 'bar', 'baz');
+  testing.expectEqual(2, cl2.length);
+
+  let cl3 = gs.classList;
+  testing.expectEqual(false, cl3.toggle('ok'));
+  testing.expectEqual(true, cl3.toggle('ok'));
+  testing.expectEqual(2, cl3.length);
+
+  let cl4 = gs.classList;
+  testing.expectEqual(true, cl4.replace('ok', 'nok'));
+  testing.expectEqual("empty nok", cl4.value);
+  testing.expectEqual(true, cl4.replace('nok', 'ok'));
+  testing.expectEqual("empty ok", cl4.value);
+
+  let cl5 = gs.classList;
+  let keys = [...cl5.keys()];
+  testing.expectEqual(2, keys.length);
+  testing.expectEqual(0, keys[0]);
+  testing.expectEqual(1, keys[1]);
+
+  let values = [...cl5.values()];
+  testing.expectEqual(2, values.length);
+  testing.expectEqual('empty', values[0]);
+  testing.expectEqual('ok', values[1]);
+
+  let entries = [...cl5.entries()];
+  testing.expectEqual(2, entries.length);
+  testing.expectEqual([0, 'empty'], entries[0]);
+  testing.expectEqual([1, 'ok'], entries[1]);
+
+  let cl6 = gs.classList;
+  cl6.value = 'a  b  ccc';
+  testing.expectEqual('a  b  ccc', cl6.value);
+  testing.expectEqual('a  b  ccc', cl6.toString());
+</script>

src/tests/encoding/decoder.html

@@ -1,3 +1,6 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+
 <script src="../testing.js"></script>
 <script id=decoder>
   let d1 = new TextDecoder();
@@ -5,13 +8,40 @@
   testing.expectEqual(false, d1.fatal);
   testing.expectEqual(false, d1.ignoreBOM);
 
+  testing.expectEqual('', d1.decode());
   testing.expectEqual('𠮷', d1.decode(new Uint8Array([240, 160, 174, 183])));
   testing.expectEqual('𠮷', d1.decode(new Uint8Array([0xEF, 0xBB, 0xBF, 240, 160, 174, 183])));
   testing.expectEqual('<27>2', d1.decode(new Uint8Array([249, 50])));
 
+  {
+    const buffer = new ArrayBuffer(4);
+    const ints = new Uint8Array(buffer)
+    ints[0] = 240;
+    ints[1] = 160;
+    ints[2] = 174;
+    ints[3] = 183;
+    testing.expectEqual('𠮷', d1.decode(buffer));
+  }
+
+  {
+    const buffer = new ArrayBuffer(4);
+    const dv = new DataView(buffer);
+    dv.setUint8(0, 240);
+    dv.setUint8(1, 160);
+    dv.setUint8(2, 174);
+    dv.setUint8(3, 183);
+    testing.expectEqual('𠮷', d1.decode(dv));
+  }
+
   let d2 = new TextDecoder('utf8', {fatal: true})
   testing.expectError('Error: InvalidUtf8', () => {
     let data  = new Uint8Array([240, 240, 160, 174, 183]);
     d2.decode(data);
   });
 </script>
+
+<script id=stream>
+  let d3 = new TextDecoder();
+  testing.expectEqual('', d2.decode(new Uint8Array([226, 153]), { stream: true }));
+  testing.expectEqual('♥', d2.decode(new Uint8Array([165]), { stream: true }));
+</script>

src/tests/events/custom.html

@@ -13,4 +13,12 @@
 
   el.dispatchEvent(new CustomEvent('c2', {detail: {over: 9000}}));
   testing.expectEqual("c2-9000", capture);
+
+  let window_calls = 0;
+  window.addEventListener('c1', () => {
+    window_calls += 1;
+  });
+
+  el.dispatchEvent(new CustomEvent('c1', {bubbles: true}));
+  testing.expectEqual(1, window_calls);
 </script>

src/tests/events/event.html

@@ -5,7 +5,7 @@
 </div>
 
 <script id=dispatch>
-  const startTime = new Date().getTime();
+  const startTime =  new Event('x').timeStamp;
 
   let content = $('#content');
   // let para = document.getElementById('para');
@@ -27,7 +27,7 @@
   testing.expectEqual(true, evt.cancelable);
   testing.expectEqual(true, evt.defaultPrevented);
   testing.expectEqual(true, evt.isTrusted);
-  testing.expectEqual(true, evt.timeStamp >= Math.floor(startTime/1000));
+  testing.expectEqual(true, evt.timeStamp >= Math.floor(startTime));
 </script>
 
 <script id=propogate>

src/tests/events/keyboard.html

@@ -0,0 +1,87 @@
+<script src="../testing.js"></script>
+
+<script id=default>
+  let event = new KeyboardEvent("test", { key: "a" });
+  testing.expectEqual(true, event instanceof KeyboardEvent);
+  testing.expectEqual(true, event instanceof Event);
+
+  testing.expectEqual("test", event.type);
+  testing.expectEqual("a", event.key);
+
+  testing.expectEqual(0, event.location);
+  testing.expectEqual(false, event.repeat);
+  testing.expectEqual(false, event.isComposing);
+
+  testing.expectEqual(false, event.ctrlKey);
+  testing.expectEqual(false, event.shiftKey);
+  testing.expectEqual(false, event.metaKey);
+  testing.expectEqual(false, event.altKey);
+</script>
+
+<script id=getModifierState>
+  event = new KeyboardEvent("test", {
+    altKey: true,
+    shiftKey: true,
+    metaKey: true,
+    ctrlKey: true,
+  });
+
+  testing.expectEqual(true, event.getModifierState("Alt"));
+  testing.expectEqual(true, event.getModifierState("AltGraph"));
+  testing.expectEqual(true, event.getModifierState("Control"));
+  testing.expectEqual(true, event.getModifierState("Shift"));
+  testing.expectEqual(true, event.getModifierState("Meta"));
+  testing.expectEqual(true, event.getModifierState("OS"));
+  testing.expectEqual(true, event.getModifierState("Accel"));
+</script>
+
+<script id=keyDownListener>
+  event = new KeyboardEvent("keydown", { key: "z" });
+  let isKeyDown = false;
+
+  document.addEventListener("keydown", (e) => {
+    isKeyDown = true;
+
+    testing.expectEqual(true, e instanceof KeyboardEvent);
+    testing.expectEqual(true, e instanceof Event);
+    testing.expectEqual("z", event.key);
+  });
+
+  document.dispatchEvent(event);
+
+  testing.expectEqual(true, isKeyDown);
+</script>
+
+<script id=keyUpListener>
+  event = new KeyboardEvent("keyup", { key: "x" });
+  let isKeyUp = false;
+
+  document.addEventListener("keyup", (e) => {
+    isKeyUp = true;
+
+    testing.expectEqual(true, e instanceof KeyboardEvent);
+    testing.expectEqual(true, e instanceof Event);
+    testing.expectEqual("x", event.key);
+  });
+
+  document.dispatchEvent(event);
+
+  testing.expectEqual(true, isKeyUp);
+</script>
+
+<script id=keyPressListener>
+  event = new KeyboardEvent("keypress", { key: "w" });
+  let isKeyPress = false;
+
+  document.addEventListener("keypress", (e) => {
+    isKeyPress = true;
+
+    testing.expectEqual(true, e instanceof KeyboardEvent);
+    testing.expectEqual(true, e instanceof Event);
+    testing.expectEqual("w", event.key);
+  });
+
+  document.dispatchEvent(event);
+
+  testing.expectEqual(true, isKeyPress);
+</script>

src/tests/events/mouse.html

@@ -31,20 +31,3 @@
   testing.expectEqual('click', evt.type);
   testing.expectEqual(true, evt instanceof MouseEvent);
 </script>
-
-<script id=customMouseEvent>
-  let hasEventDispatched = false;
-
-  let customMouseEvent = new MouseEvent("CustomMouseEvent");
-  testing.expectEqual(true, customMouseEvent instanceof MouseEvent);
-
-  document.addEventListener("CustomMouseEvent", (event) => {
-    hasEventDispatched = true;
-
-    testing.expectEqual(true, event instanceof MouseEvent);
-    testing.expectEqual(true, customMouseEvent === event);
-  });
-
-  document.dispatchEvent(customMouseEvent);
-  testing.expectEqual(true, hasEventDispatched);
-</script>

src/tests/fetch/fetch.html

@@ -0,0 +1,16 @@
+<script src="../testing.js"></script>
+<script id=fetch type=module>
+  const promise1 = new Promise((resolve) => {
+    fetch('http://127.0.0.1:9582/xhr/json')
+    .then((res) => {
+      return res.json()
+    })
+    .then((json) => {
+      resolve(json);
+    });
+  });
+
+  testing.async(promise1, (json) => {
+    testing.expectEqual({over: '9000!!!'}, json);
+  });
+</script>

src/tests/fetch/headers.html

@@ -0,0 +1,102 @@
+<script src="../testing.js"></script>
+
+<script id=headers>
+  let headers = new Headers({"Set-Cookie": "name=world"});
+  testing.expectEqual("name=world", headers.get("set-cookie"));
+
+  let myHeaders = new Headers();
+  myHeaders.append("Content-Type", "image/jpeg"),
+  testing.expectEqual(false, myHeaders.has("Picture-Type"));
+  testing.expectEqual("image/jpeg", myHeaders.get("Content-Type"));
+
+  myHeaders.append("Content-Type", "image/png");
+  testing.expectEqual("image/jpeg, image/png", myHeaders.get("Content-Type"));
+
+  myHeaders.delete("Content-Type");
+  testing.expectEqual(null, myHeaders.get("Content-Type"));
+
+  myHeaders.set("Picture-Type", "image/svg")
+  testing.expectEqual("image/svg", myHeaders.get("Picture-Type"));
+  testing.expectEqual(true, myHeaders.has("Picture-Type"))
+
+  const originalHeaders = new Headers([["Content-Type", "application/json"], ["Authorization", "Bearer token123"]]);
+  testing.expectEqual("application/json", originalHeaders.get("Content-Type"));
+  testing.expectEqual("Bearer token123", originalHeaders.get("Authorization"));
+
+  const newHeaders = new Headers(originalHeaders);
+  testing.expectEqual("application/json", newHeaders.get("Content-Type"));
+  testing.expectEqual("Bearer token123" ,newHeaders.get("Authorization"));
+  testing.expectEqual(true ,newHeaders.has("Content-Type"));
+  testing.expectEqual(true ,newHeaders.has("Authorization"));
+  testing.expectEqual(false, newHeaders.has("X-Custom"));
+
+  newHeaders.set("X-Custom", "test-value");
+  testing.expectEqual("test-value", newHeaders.get("X-Custom"));
+  testing.expectEqual(null, originalHeaders.get("X-Custom"));
+  testing.expectEqual(false, originalHeaders.has("X-Custom"));
+</script>
+
+<script id=keys>
+  const testKeyHeaders = new Headers();
+  testKeyHeaders.set("Content-Type", "application/json");
+  testKeyHeaders.set("Authorization", "Bearer token123");
+  testKeyHeaders.set("X-Custom", "test-value");
+
+  const keys = [];
+  for (const key of testKeyHeaders.keys()) {
+      keys.push(key);
+  }
+
+  testing.expectEqual(3, keys.length);
+  testing.expectEqual(true, keys.includes("Content-Type"));
+  testing.expectEqual(true, keys.includes("Authorization"));
+  testing.expectEqual(true, keys.includes("X-Custom"));
+</script>
+
+<script id=values>
+  const testValuesHeaders = new Headers();
+  testValuesHeaders.set("Content-Type", "application/json");
+  testValuesHeaders.set("Authorization", "Bearer token123");
+  testValuesHeaders.set("X-Custom", "test-value");
+
+  const values = [];
+  for (const value of testValuesHeaders.values()) {
+      values.push(value);
+  }
+
+  testing.expectEqual(3, values.length);
+  testing.expectEqual(true, values.includes("application/json"));
+  testing.expectEqual(true, values.includes("Bearer token123"));
+  testing.expectEqual(true, values.includes("test-value"));
+</script>
+
+<script id=entries>
+  const testEntriesHeaders = new Headers();
+  testEntriesHeaders.set("Content-Type", "application/json");
+  testEntriesHeaders.set("Authorization", "Bearer token123");
+  testEntriesHeaders.set("X-Custom", "test-value");
+
+  const entries = [];
+  for (const entry of testEntriesHeaders.entries()) {
+      entries.push(entry);
+  }
+        
+  testing.expectEqual(3, entries.length);
+
+  const entryMap = new Map(entries);
+  testing.expectEqual("application/json", entryMap.get("Content-Type"));
+  testing.expectEqual("Bearer token123", entryMap.get("Authorization"));
+  testing.expectEqual("test-value", entryMap.get("X-Custom"));
+  
+  const entryKeys = Array.from(entryMap.keys());
+  testing.expectEqual(3, entryKeys.length);
+  testing.expectEqual(true, entryKeys.includes("Content-Type"));
+  testing.expectEqual(true, entryKeys.includes("Authorization"));
+  testing.expectEqual(true, entryKeys.includes("X-Custom"));
+  
+  const entryValues = Array.from(entryMap.values());
+  testing.expectEqual(3, entryValues.length);
+  testing.expectEqual(true, entryValues.includes("application/json"));
+  testing.expectEqual(true, entryValues.includes("Bearer token123"));
+  testing.expectEqual(true, entryValues.includes("test-value"))
+</script>

src/tests/fetch/request.html

@@ -0,0 +1,22 @@
+<script src="../testing.js"></script>
+
+<script id=request>
+  let request = new Request("flower.png");
+  testing.expectEqual("http://localhost:9582/src/tests/fetch/flower.png", request.url);
+  testing.expectEqual("GET", request.method);
+
+  let request2 = new Request("https://google.com", {
+    method: "POST",
+    body: "Hello, World",
+    cache: "reload",
+    credentials: "omit",
+    headers: { "Sender": "me", "Target": "you" }
+    }
+  );
+  testing.expectEqual("https://google.com", request2.url);
+  testing.expectEqual("POST", request2.method);
+  testing.expectEqual("omit", request2.credentials);
+  testing.expectEqual("reload", request2.cache);
+  testing.expectEqual("me", request2.headers.get("SeNdEr"));
+  testing.expectEqual("you", request2.headers.get("target"));
+</script>

src/tests/fetch/response.html

@@ -0,0 +1,49 @@
+<script src="../testing.js"></script>
+
+<script id=response>
+  let response = new Response("Hello, World!");
+  testing.expectEqual(200, response.status);
+  testing.expectEqual("", response.statusText);
+  testing.expectEqual(true, response.ok);
+  testing.expectEqual("", response.url);
+  testing.expectEqual(false, response.redirected);
+
+  let response2 = new Response("Error occurred", {
+    status: 404,
+    statusText: "Not Found",
+    headers: { 
+        "Content-Type": "text/plain", 
+        "X-Custom": "test-value",
+        "Cache-Control": "no-cache"
+    }
+  });
+  testing.expectEqual(404, response2.status);
+  testing.expectEqual("Not Found", response2.statusText);
+  testing.expectEqual(false, response2.ok);
+  testing.expectEqual("text/plain", response2.headers.get("Content-Type"));
+  testing.expectEqual("test-value", response2.headers.get("X-Custom"));
+  testing.expectEqual("no-cache", response2.headers.get("cache-control"));
+        
+  let response3 = new Response("Created", { status: 201, statusText: "Created" });
+  testing.expectEqual(201, response3.status);
+  testing.expectEqual("Created", response3.statusText);
+  testing.expectEqual(true, response3.ok);
+
+  let nullResponse = new Response(null);
+  testing.expectEqual(200, nullResponse.status);
+  testing.expectEqual("", nullResponse.statusText);
+
+  let emptyResponse = new Response("");
+  testing.expectEqual(200, emptyResponse.status);
+</script>
+
+<script id=json type=module>
+  const promise1 = new Promise((resolve) => {
+    let response = new Response('[]');
+    response.json().then(resolve)
+  });
+
+  testing.async(promise1, (json) => {
+    testing.expectEqual([], json);
+  });
+</script>

src/tests/html/abort_controller.html

@@ -0,0 +1,40 @@
+<script src="../testing.js"></script>
+
+<script id=abortController>
+  var a1 = new AbortController();
+
+  var s1 = a1.signal;
+  testing.expectEqual(undefined, s1.throwIfAborted());
+  testing.expectEqual(undefined, s1.reason);
+
+  let target;;
+  let called = 0;
+  s1.addEventListener('abort', (e) => {
+    called += 1;
+    target = e.target;
+  });
+
+  a1.abort();
+  testing.expectEqual(true, s1.aborted)
+  testing.expectEqual(s1, target)
+  testing.expectEqual('AbortError', s1.reason)
+  testing.expectEqual(1, called)
+</script>
+
+<script id=abort>
+  var s2 = AbortSignal.abort('over 9000');
+  testing.expectEqual(true, s2.aborted);
+  testing.expectEqual('over 9000', s2.reason);
+  testing.expectEqual('AbortError', AbortSignal.abort().reason);
+</script>
+
+<script id=timeout>
+  var s3 = AbortSignal.timeout(10);
+  testing.eventually(() => {
+    testing.expectEqual(true, s3.aborted);
+    testing.expectEqual('TimeoutError', s3.reason);
+    testing.expectError('Error: TimeoutError', () => {
+      s3.throwIfAborted()
+    });
+  });
+</script>

src/tests/html/dataset.html

@@ -0,0 +1,29 @@
+<script src="../testing.js"></script>
+<div id=x data-power="over 9000" data-empty data-some-long-key=ok></div>
+
+<script id=dataset>
+  let el1 = document.createElement('div');
+  testing.expectEqual(undefined, el1.dataset.x);
+
+  el1.dataset.x = '123';
+  testing.expectEqual(true, delete el1.dataset.x);
+  testing.expectEqual(undefined, el1.dataset.x);
+  // yes, this is right
+  testing.expectEqual(true, delete el1.dataset.other);
+
+  let ds1 = el1.dataset;
+  ds1.helloWorld = 'yes';
+  testing.expectEqual('yes', el1.getAttribute('data-hello-world'));
+  el1.setAttribute('data-this-will-work', 'positive');
+  testing.expectEqual('positive', ds1.thisWillWork);
+</script>
+
+<script id=element>
+  let div = $('#x');
+  testing.expectEqual(undefined, div.dataset.nope);
+  testing.expectEqual('over 9000', div.dataset.power);
+  testing.expectEqual('', div.dataset.empty);
+  testing.expectEqual('ok', div.dataset.someLongKey);
+  testing.expectEqual(true, delete div.dataset.power);
+  testing.expectEqual(undefined, div.dataset.power);
+</script>

src/tests/html/document.html

@@ -0,0 +1,84 @@
+<html>
+  <body>
+    <div id=content><a id=link href=#></a></div>
+  </body>
+</html>
+
+<script src="../testing.js"></script>
+
+<script id=document>
+  testing.expectEqual('HTMLDocument', document.__proto__.constructor.name);
+  testing.expectEqual('Document', document.__proto__.__proto__.constructor.name);
+  testing.expectEqual('body', document.body.localName);
+
+  testing.expectEqual('localhost:9582', document.domain);
+  testing.expectEqual('', document.referrer);
+  testing.expectEqual('', document.title);
+  testing.expectEqual('body', document.body.localName);
+  testing.expectEqual('head', document.head.localName);
+  testing.expectEqual(0, document.images.length);
+  testing.expectEqual(0, document.embeds.length);
+  testing.expectEqual(0, document.plugins.length);
+  testing.expectEqual(2, document.scripts.length);
+  testing.expectEqual(0, document.forms.length);
+  testing.expectEqual(1, document.links.length);
+  testing.expectEqual(0, document.applets.length);
+  testing.expectEqual(0, document.anchors.length);
+  testing.expectEqual(7, document.all.length);
+  testing.expectEqual('document', document.currentScript.id);
+
+  document.title = 'foo';
+  testing.expectEqual('foo', document.title);
+  document.title = '';
+
+  document.getElementById('link').setAttribute('name', 'foo');
+  let list = document.getElementsByName('foo');
+  testing.expectEqual(1, list.length);
+
+  testing.expectEqual('', document.cookie);
+  document.cookie = 'name=Oeschger;';
+  document.cookie = 'favorite_food=tripe;';
+
+  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+  // "" should be returned, but the framework overrules it atm
+  document.cookie = 'IgnoreMy=Ghost; HttpOnly';
+  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+
+  // Return null since we only return elements when they have previously been localized
+  testing.expectEqual(null, document.elementFromPoint(0.5, 0.5));
+  testing.expectEqual([], document.elementsFromPoint(0.5, 0.5));
+
+  let div1 = document.createElement('div');
+  document.body.appendChild(div1);
+  div1.getClientRects(); // clal this to position it
+  testing.expectEqual('[object HTMLDivElement]', document.elementFromPoint(0.5, 0.5).toString());
+
+  let elems = document.elementsFromPoint(0.5, 0.5);
+  testing.expectEqual(3, elems.length);
+  testing.expectEqual('[object HTMLDivElement]', elems[0].toString());
+  testing.expectEqual('[object HTMLBodyElement]', elems[1].toString());
+  testing.expectEqual('[object HTMLHtmlElement]', elems[2].toString());
+
+  let a = document.createElement('a');
+  a.href = "https://lightpanda.io";
+  document.body.appendChild(a);
+  // Note this will be placed after the div of previous test
+  a.getClientRects();
+
+  let a_again = document.elementFromPoint(1.5, 0.5);
+  testing.expectEqual('[object HTMLAnchorElement]', a_again.toString());
+  testing.expectEqual('https://lightpanda.io', a_again.href);
+
+  let a_agains = document.elementsFromPoint(1.5, 0.5);
+  testing.expectEqual('https://lightpanda.io', a_agains[0].href);
+
+
+  testing.expectEqual(true, !document.all);
+  testing.expectEqual(false, !!document.all);
+  testing.expectEqual('[object HTMLScriptElement]', document.all(5).toString());
+  testing.expectEqual('[object HTMLDivElement]', document.all('content').toString());
+
+
+  testing.expectEqual(document, document.defaultView.document );
+  testing.expectEqual('loading', document.readyState);
+</script>

src/tests/html/element.html

@@ -0,0 +1,52 @@
+<script src="../testing.js"></script>
+<div id=content>a<strong>b</strong>cc</div>
+<script id=inner>
+  const content = $('#content');
+  testing.expectEqual('a<strong>b</strong>cc', content.innerHTML);
+  testing.expectEqual('abcc', content.innerText);
+  content. innerText = 'foo';
+
+  testing.expectEqual('foo', content.innerHTML);
+  testing.expectEqual('foo', content.innerText);
+</script>
+
+<script id=addEventListene>
+  let click_count = 0;
+  content.addEventListener('click', function() { click_count++ });
+  content.click()
+  testing.expectEqual(1, click_count);
+</script>
+
+<script id=style>
+  let style = content.style;
+  style.cssText = 'color: red; font-size: 12px; margin: 5px !important';
+  testing.expectEqual(3, style.length);
+  style.setProperty('background-color', 'blue')
+  testing.expectEqual('blue', style.getPropertyValue('background-color'));
+  testing.expectEqual(4, style.length);
+</script>
+
+<script id=a>
+  let a = document.createElement('a');
+  testing.expectEqual('', a.href);
+  testing.expectEqual('', a.host);
+  a.href = 'about';
+  testing.expectEqual('http://localhost:9582/src/tests/html/about', a.href);
+</script>
+
+<script id=focus>
+  // detached node cannot be focused
+  const focused = document.activeElement;
+  document.createElement('a').focus();
+  testing.expectEqual(focused, document.activeElement);
+</script>
+
+<script id=link>
+  let l2 = document.createElement('link');
+  testing.expectEqual('', l2.href);
+  l2.href = 'https://lightpanda.io/opensource-browser/15';
+  testing.expectEqual('https://lightpanda.io/opensource-browser/15', l2.href);
+
+  l2.href = '/over/9000';
+  testing.expectEqual('http://localhost:9582/over/9000', l2.href);
+</script>

src/tests/html/error_event.html

@@ -22,8 +22,3 @@
   testing.expectEqual(8999, e2.colno);
   testing.expectEqual('under 9000!', e2.error);
 </script>
-
-<script id=ErrorEvent>
-  let e3 = new ErrorEvent('err3')
-  e3.addEventListener('change', () => {});
-</script>

src/tests/html/history.html

@@ -0,0 +1,23 @@
+<script src="../testing.js"></script>
+
+<script id=history>
+  testing.expectEqual('auto', history.scrollRestoration);
+
+  history.scrollRestoration = 'manual';
+  history.scrollRestoration = 'foo';
+  testing.expectEqual('manual', history.scrollRestoration);
+
+  history.scrollRestoration = 'auto';
+  testing.expectEqual('auto', history.scrollRestoration);
+
+  testing.expectEqual(null, history.state)
+
+  history.pushState({}, null, '');
+  history.replaceState({}, null, '');
+
+  testing.expectEqual(undefined, history.go());
+  testing.expectEqual(undefined, history.go(1));
+  testing.expectEqual(undefined, history.go(-1));
+  testing.expectEqual(undefined, history.forward());
+  testing.expectEqual(undefined, history.back());
+</script>

src/tests/html/image.html

@@ -0,0 +1,31 @@
+<script src="../testing.js"></script>
+
+<script id=image>
+  img = new Image();
+  testing.expectEqual(0, img.width);
+  testing.expectEqual(0, img.height);
+
+  img = new Image(4);
+  testing.expectEqual(4, img.width);
+  testing.expectEqual(0, img.height);
+
+  img = new Image(5, 6);
+  testing.expectEqual(5, img.width);
+  testing.expectEqual(6, img.height);
+
+  let fruit = new Image
+  testing.expectEqual(0, fruit.width);
+  fruit.width = 5;
+  testing.expectEqual(5, fruit.width);
+  fruit.width = '15';
+  testing.expectEqual(15, fruit.width);
+  fruit.width = 'apple';
+  testing.expectEqual(0, fruit.width);
+
+  let lyric = new Image
+  testing.expectEqual('', lyric.src);
+  lyric.src = 'okay';
+  testing.expectEqual('okay', lyric.src);
+  lyric.src = 15;
+  testing.expectEqual('15', lyric.src);
+</script>