Add browser-based regression test runner

Add JS/WASM compilation rules for running html5lib conformance tests
in the browser:

- lib/js/htmlrw_js_tests.ml: Browser-compatible test runner that can
run tree-construction and encoding detection tests
- lib/js/dune: Updated with test runner executable for js and wasm modes
- test-regression.html: Interactive test page that loads test data files
and runs the full regression suite with progress and filtering

The test runner exposes a JavaScript API (html5rwTests) that can:
- Run individual test files
- Run all tests from a file list
- Quick parse test for simple validation

Build with: opam exec -- dune build lib/js/htmlrw-tests.js

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

lib/js/dune

···
  (modes js wasm)
  (modules htmlrw_js_worker))
 
+; Test runner for browser-based regression testing
+; Runs html5lib conformance tests in the browser
+(executable
+ (name htmlrw_js_tests_main)
+ (libraries html5rw bytesrw brr)
+ (js_of_ocaml
+   (javascript_files))
+ (modes js wasm)
+ (modules htmlrw_js_tests htmlrw_js_tests_main))
+
 ; Copy to nice filenames (JS)
 (rule
  (targets htmlrw.js)
···
  (deps htmlrw_js_worker.bc.js)
  (action (copy %{deps} %{targets})))
 
+(rule
+ (targets htmlrw-tests.js)
+ (deps htmlrw_js_tests_main.bc.js)
+ (action (copy %{deps} %{targets})))
+
 ; Copy to nice filenames (WASM)
 ; Note: requires wasm_of_ocaml-compiler to be installed
 (rule
···
  (targets htmlrw-worker.wasm.js)
  (deps htmlrw_js_worker.bc.wasm.js)
  (action (copy %{deps} %{targets})))
+
+(rule
+ (targets htmlrw-tests.wasm.js)
+ (deps htmlrw_js_tests_main.bc.wasm.js)
+ (action (copy %{deps} %{targets})))

lib/js/htmlrw_js_tests.ml

···
+(*---------------------------------------------------------------------------
+  Copyright (c) 2025 Anil Madhavapeddy <[e-mail]>. All rights reserved.
+  SPDX-License-Identifier: ISC
+ ---------------------------------------------------------------------------*)
+
+(** Browser-compatible test runner for html5rw regression tests.
+
+    This module provides functions to run html5lib conformance tests
+    in the browser, receiving test data as strings and returning results
+    as JavaScript-accessible objects. *)
+
+[@@@warning "-69-33"]  (* Silence unused-field and unused-open warnings *)
+
+open Brr
+
+(* ============================================================ *)
+(* Test Result Types *)
+(* ============================================================ *)
+
+type test_result = {
+  test_num : int;
+  description : string;
+  input : string;
+  expected : string;
+  actual : string;
+  success : bool;
+}
+
+type file_result = {
+  filename : string;
+  test_type : string;
+  passed_count : int;
+  failed_count : int;
+  tests : test_result list;
+}
+
+type suite_result = {
+  name : string;
+  total_passed : int;
+  total_failed : int;
+  files : file_result list;
+}
+
+(* ============================================================ *)
+(* Tree Construction Tests *)
+(* ============================================================ *)
+
+module TreeConstruction = struct
+  type test_case = {
+    input : string;
+    expected_tree : string;
+    expected_errors : string list;
+    script_on : bool;
+    fragment_context : string option;
+  }
+
+  let parse_test_case lines =
+    let rec parse acc = function
+      | [] -> acc
+      | line :: rest when String.length line > 0 && line.[0] = '#' ->
+        let section = String.trim line in
+        let content, remaining = collect_section rest in
+        parse ((section, content) :: acc) remaining
+      | _ :: rest -> parse acc rest
+    and collect_section lines =
+      let rec loop acc = function
+        | [] -> (List.rev acc, [])
+        | line :: rest when String.length line > 0 && line.[0] = '#' ->
+          (List.rev acc, line :: rest)
+        | line :: rest -> loop (line :: acc) rest
+      in
+      loop [] lines
+    in
+    let sections = parse [] lines in
+    let get_section name =
+      match List.assoc_opt name sections with
+      | Some lines -> String.concat "\n" lines
+      | None -> ""
+    in
+    let data = get_section "#data" in
+    let document = get_section "#document" in
+    let errors_text = get_section "#errors" in
+    let errors =
+      String.split_on_char '\n' errors_text
+      |> List.filter (fun s -> String.trim s <> "")
+    in
+    let script_on = List.mem_assoc "#script-on" sections in
+    let fragment =
+      if List.mem_assoc "#document-fragment" sections then
+        Some (get_section "#document-fragment" |> String.trim)
+      else None
+    in
+    { input = data; expected_tree = document; expected_errors = errors;
+      script_on; fragment_context = fragment }
+
+  let parse_dat_content content =
+    let lines = String.split_on_char '\n' content in
+    let rec split_tests current acc = function
+      | [] ->
+        if current = [] then List.rev acc
+        else List.rev (List.rev current :: acc)
+      | "" :: "#data" :: rest ->
+        let new_acc = if current = [] then acc else (List.rev current :: acc) in
+        split_tests ["#data"] new_acc rest
+      | line :: rest ->
+        split_tests (line :: current) acc rest
+    in
+    let test_groups = split_tests [] [] lines in
+    List.filter_map (fun lines ->
+      if List.exists (fun l -> l = "#data") lines then
+        Some (parse_test_case lines)
+      else None
+    ) test_groups
+
+  let strip_tree_prefix s =
+    let lines = String.split_on_char '\n' s in
+    let stripped = List.filter_map (fun line ->
+      if String.length line >= 2 && String.sub line 0 2 = "| " then
+        Some (String.sub line 2 (String.length line - 2))
+      else if String.trim line = "" then None
+      else Some line
+    ) lines in
+    String.concat "\n" stripped
+
+  let normalize_tree s =
+    let lines = String.split_on_char '\n' s in
+    let non_empty = List.filter (fun l -> String.trim l <> "") lines in
+    String.concat "\n" non_empty
+
+  let run_test test =
+    try
+      let result =
+        match test.fragment_context with
+        | Some ctx_str ->
+          let (namespace, tag_name) =
+            match String.split_on_char ' ' ctx_str with
+            | [ns; tag] when ns = "svg" -> (Some "svg", tag)
+            | [ns; tag] when ns = "math" -> (Some "mathml", tag)
+            | [tag] -> (None, tag)
+            | _ -> (None, ctx_str)
+          in
+          let context = Html5rw.Parser.make_fragment_context ~tag_name ~namespace () in
+          let reader = Bytesrw.Bytes.Reader.of_string test.input in
+          Html5rw.Parser.parse ~collect_errors:true ~fragment_context:context reader
+        | None ->
+          let reader = Bytesrw.Bytes.Reader.of_string test.input in
+          Html5rw.Parser.parse ~collect_errors:true reader
+      in
+      let actual_tree = Html5rw.Dom.to_test_format (Html5rw.Parser.root result) in
+      let expected = normalize_tree (strip_tree_prefix test.expected_tree) in
+      let actual = normalize_tree (strip_tree_prefix actual_tree) in
+      (expected = actual, expected, actual)
+    with e ->
+      let expected = normalize_tree (strip_tree_prefix test.expected_tree) in
+      (false, expected, Printf.sprintf "EXCEPTION: %s" (Printexc.to_string e))
+
+  let run_content ~filename content =
+    let tests = parse_dat_content content in
+    let passed = ref 0 in
+    let failed = ref 0 in
+    let results = ref [] in
+    List.iteri (fun i test ->
+      if test.script_on then ()
+      else begin
+        let (success, expected, actual) = run_test test in
+        let description =
+          let input_preview = String.sub test.input 0 (min 60 (String.length test.input)) in
+          if test.fragment_context <> None then
+            Printf.sprintf "Fragment (%s): %s" (Option.get test.fragment_context) input_preview
+          else input_preview
+        in
+        let result = {
+          test_num = i + 1; description; input = test.input; expected; actual; success;
+        } in
+        results := result :: !results;
+        if success then incr passed else incr failed
+      end
+    ) tests;
+    {
+      filename; test_type = "Tree Construction";
+      passed_count = !passed; failed_count = !failed;
+      tests = List.rev !results;
+    }
+end
+
+(* ============================================================ *)
+(* Encoding Tests *)
+(* ============================================================ *)
+
+module EncodingTests = struct
+  type test_case = {
+    input : string;
+    expected_encoding : string;
+  }
+
+  let normalize_encoding_name s = String.lowercase_ascii (String.trim s)
+
+  let encoding_to_test_name = function
+    | Html5rw.Encoding.Utf8 -> "utf-8"
+    | Html5rw.Encoding.Utf16le -> "utf-16le"
+    | Html5rw.Encoding.Utf16be -> "utf-16be"
+    | Html5rw.Encoding.Windows_1252 -> "windows-1252"
+    | Html5rw.Encoding.Iso_8859_2 -> "iso-8859-2"
+    | Html5rw.Encoding.Euc_jp -> "euc-jp"
+
+  let parse_test_case lines =
+    let rec parse acc = function
+      | [] -> acc
+      | line :: rest when String.length line > 0 && line.[0] = '#' ->
+        let section = String.trim line in
+        let content, remaining = collect_section rest in
+        parse ((section, content) :: acc) remaining
+      | _ :: rest -> parse acc rest
+    and collect_section lines =
+      let rec loop acc = function
+        | [] -> (List.rev acc, [])
+        | line :: rest when String.length line > 0 && line.[0] = '#' ->
+          (List.rev acc, line :: rest)
+        | line :: rest -> loop (line :: acc) rest
+      in loop [] lines
+    in
+    let sections = parse [] lines in
+    let get_section name =
+      match List.assoc_opt name sections with
+      | Some lines -> String.concat "\n" lines | None -> ""
+    in
+    let data = get_section "#data" in
+    let encoding = get_section "#encoding" in
+    { input = data; expected_encoding = String.trim encoding }
+
+  let parse_dat_content content =
+    let lines = String.split_on_char '\n' content in
+    let rec split_tests current acc = function
+      | [] -> if current = [] then List.rev acc else List.rev (List.rev current :: acc)
+      | "" :: "#data" :: rest ->
+        let new_acc = if current = [] then acc else (List.rev current :: acc) in
+        split_tests ["#data"] new_acc rest
+      | line :: rest -> split_tests (line :: current) acc rest
+    in
+    let test_groups = split_tests [] [] lines in
+    List.filter_map (fun lines ->
+      if List.exists (fun l -> l = "#data") lines then Some (parse_test_case lines)
+      else None
+    ) test_groups
+
+  let run_test test =
+    try
+      let (_, detected_encoding) = Html5rw.Encoding.decode (Bytes.of_string test.input) () in
+      let detected_name = encoding_to_test_name detected_encoding in
+      let expected_name = normalize_encoding_name test.expected_encoding in
+      let match_encoding det exp =
+        det = exp ||
+        (det = "windows-1252" && (exp = "windows-1252" || exp = "cp1252" || exp = "iso-8859-1")) ||
+        (det = "iso-8859-2" && (exp = "iso-8859-2" || exp = "iso8859-2" || exp = "latin2")) ||
+        (det = "utf-8" && (exp = "utf-8" || exp = "utf8")) ||
+        (det = "euc-jp" && (exp = "euc-jp" || exp = "eucjp"))
+      in
+      (match_encoding detected_name expected_name, detected_name, expected_name)
+    with e ->
+      (false, Printf.sprintf "EXCEPTION: %s" (Printexc.to_string e), test.expected_encoding)
+
+  let run_content ~filename content =
+    let tests = parse_dat_content content in
+    let passed = ref 0 in
+    let failed = ref 0 in
+    let results = ref [] in
+    List.iteri (fun i test ->
+      if String.trim test.expected_encoding = "" then ()
+      else begin
+        let (success, detected, expected) = run_test test in
+        let result = {
+          test_num = i + 1;
+          description = Printf.sprintf "Detect %s encoding" expected;
+          input = String.escaped test.input;
+          expected; actual = detected; success;
+        } in
+        results := result :: !results;
+        if success then incr passed else incr failed
+      end
+    ) tests;
+    {
+      filename; test_type = "Encoding Detection";
+      passed_count = !passed; failed_count = !failed;
+      tests = List.rev !results;
+    }
+end
+
+(* ============================================================ *)
+(* JavaScript API *)
+(* ============================================================ *)
+
+let test_result_to_jv (r : test_result) =
+  Jv.obj [|
+    "testNum", Jv.of_int r.test_num;
+    "description", Jv.of_string r.description;
+    "input", Jv.of_string r.input;
+    "expected", Jv.of_string r.expected;
+    "actual", Jv.of_string r.actual;
+    "success", Jv.of_bool r.success;
+  |]
+
+let file_result_to_jv (r : file_result) =
+  Jv.obj [|
+    "filename", Jv.of_string r.filename;
+    "testType", Jv.of_string r.test_type;
+    "passedCount", Jv.of_int r.passed_count;
+    "failedCount", Jv.of_int r.failed_count;
+    "tests", Jv.of_list test_result_to_jv r.tests;
+  |]
+
+let suite_result_to_jv (r : suite_result) =
+  Jv.obj [|
+    "name", Jv.of_string r.name;
+    "totalPassed", Jv.of_int r.total_passed;
+    "totalFailed", Jv.of_int r.total_failed;
+    "files", Jv.of_list file_result_to_jv r.files;
+  |]
+
+(** Run tree construction tests on a single file's content *)
+let run_tree_construction_test filename content =
+  let result = TreeConstruction.run_content ~filename content in
+  file_result_to_jv result
+
+(** Run encoding detection tests on a single file's content *)
+let run_encoding_test filename content =
+  let result = EncodingTests.run_content ~filename content in
+  file_result_to_jv result
+
+(** Run all tests from provided test data *)
+let run_all_tests (test_files : (string * string * string) list) =
+  let tree_files = ref [] in
+  let encoding_files = ref [] in
+  let total_passed = ref 0 in
+  let total_failed = ref 0 in
+
+  List.iter (fun (test_type, filename, content) ->
+    let result = match test_type with
+      | "tree-construction" ->
+        let r = TreeConstruction.run_content ~filename content in
+        tree_files := r :: !tree_files;
+        r
+      | "encoding" ->
+        let r = EncodingTests.run_content ~filename content in
+        encoding_files := r :: !encoding_files;
+        r
+      | _ -> failwith ("Unknown test type: " ^ test_type)
+    in
+    total_passed := !total_passed + result.passed_count;
+    total_failed := !total_failed + result.failed_count
+  ) test_files;
+
+  let all_files = List.rev !tree_files @ List.rev !encoding_files in
+  let suite = {
+    name = "HTML5lib Regression Tests";
+    total_passed = !total_passed;
+    total_failed = !total_failed;
+    files = all_files;
+  } in
+  suite_result_to_jv suite
+
+(* ============================================================ *)
+(* Simple Parser Test for Quick Validation *)
+(* ============================================================ *)
+
+let quick_parse_test html =
+  try
+    let reader = Bytesrw.Bytes.Reader.of_string html in
+    let result = Html5rw.Parser.parse ~collect_errors:true reader in
+    let root = Html5rw.Parser.root result in
+    let serialized = Html5rw.Dom.to_html root in
+    let errors = Html5rw.Parser.errors result in
+    let error_to_string e = Format.asprintf "%a" Html5rw.pp_parse_error e in
+    Jv.obj [|
+      "success", Jv.of_bool true;
+      "html", Jv.of_string serialized;
+      "errorCount", Jv.of_int (List.length errors);
+      "errors", Jv.of_list (fun e -> Jv.of_string (error_to_string e)) errors;
+    |]
+  with e ->
+    Jv.obj [|
+      "success", Jv.of_bool false;
+      "error", Jv.of_string (Printexc.to_string e);
+    |]
+
+(* ============================================================ *)
+(* Export to JavaScript *)
+(* ============================================================ *)
+
+let () =
+  let html5rw_tests = Jv.obj [|
+    "runTreeConstructionTest", Jv.callback ~arity:2 (fun filename content ->
+      run_tree_construction_test (Jv.to_string filename) (Jv.to_string content));
+    "runEncodingTest", Jv.callback ~arity:2 (fun filename content ->
+      run_encoding_test (Jv.to_string filename) (Jv.to_string content));
+    "runAllTests", Jv.callback ~arity:1 (fun files_jv ->
+      let files = Jv.to_list (fun item ->
+        let test_type = Jv.to_string (Jv.get item "type") in
+        let filename = Jv.to_string (Jv.get item "filename") in
+        let content = Jv.to_string (Jv.get item "content") in
+        (test_type, filename, content)
+      ) files_jv in
+      run_all_tests files);
+    "quickParseTest", Jv.callback ~arity:1 (fun html ->
+      quick_parse_test (Jv.to_string html));
+    "version", Jv.of_string "1.0.0";
+  |] in
+  Jv.set Jv.global "html5rwTests" html5rw_tests

lib/js/htmlrw_js_tests.mli

···
+(*---------------------------------------------------------------------------
+  Copyright (c) 2025 Anil Madhavapeddy <[e-mail]>. All rights reserved.
+  SPDX-License-Identifier: ISC
+ ---------------------------------------------------------------------------*)
+
+(** Browser-compatible test runner for html5rw regression tests.
+
+    This module provides functions to run html5lib conformance tests
+    in the browser. Test data is provided as strings and results are
+    returned as JavaScript-accessible objects.
+
+    {2 JavaScript API}
+
+    The following functions are exposed to JavaScript via the global
+    [html5rwTests] object:
+
+    - [html5rwTests.runTreeConstructionTest(filename, content)] - Run tree
+      construction tests from a .dat file content
+    - [html5rwTests.runEncodingTest(filename, content)] - Run encoding
+      detection tests from a .dat file content
+    - [html5rwTests.runAllTests(files)] - Run all tests from an array of
+      file objects with {type, filename, content}
+    - [html5rwTests.quickParseTest(html)] - Quick parse test for a single
+      HTML string
+    - [html5rwTests.version] - Version string *)

lib/js/htmlrw_js_tests_main.ml

···
+(*---------------------------------------------------------------------------
+  Copyright (c) 2025 Anil Madhavapeddy <[e-mail]>. All rights reserved.
+  SPDX-License-Identifier: ISC
+ ---------------------------------------------------------------------------*)
+
+(** Entry point for the browser test runner.
+
+    The test runner module registers its JavaScript exports when loaded. *)
+
+(* Nothing needed here - the Htmlrw_js_tests module registers exports at load time *)

lib/js/htmlrw_js_tests_main.mli

···
+(*---------------------------------------------------------------------------
+  Copyright (c) 2025 Anil Madhavapeddy <[e-mail]>. All rights reserved.
+  SPDX-License-Identifier: ISC
+ ---------------------------------------------------------------------------*)
+
+(** Entry point for the browser test runner. *)

test-regression.html

···
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML5rw Regression Test Suite</title>
+  <style>
+    :root {
+      --bg-primary: #1a1a2e;
+      --bg-secondary: #16213e;
+      --bg-tertiary: #0f3460;
+      --text-primary: #eee;
+      --text-secondary: #aaa;
+      --text-muted: #666;
+      --accent: #e94560;
+      --accent-light: #ff6b8a;
+      --success: #4ade80;
+      --success-dim: rgba(74, 222, 128, 0.2);
+      --failure: #f87171;
+      --failure-dim: rgba(248, 113, 113, 0.2);
+      --warning: #fbbf24;
+      --info: #60a5fa;
+      --border: #333;
+      --code-bg: #0d1117;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
+      padding: 20px;
+    }
+
+    .container { max-width: 1400px; margin: 0 auto; }
+
+    .hero {
+      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+      padding: 30px 40px;
+      border-radius: 12px;
+      margin-bottom: 30px;
+      border: 1px solid var(--border);
+    }
+
+    .hero h1 {
+      font-size: 2rem;
+      margin-bottom: 10px;
+      color: var(--accent);
+    }
+
+    .hero p { color: var(--text-secondary); margin-bottom: 15px; }
+
+    .controls {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    button {
+      padding: 12px 24px;
+      border: none;
+      border-radius: 8px;
+      background: var(--accent);
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 600;
+      transition: all 0.2s;
+    }
+
+    button:hover { background: var(--accent-light); transform: translateY(-1px); }
+    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+    button.secondary { background: var(--bg-tertiary); border: 1px solid var(--border); }
+    button.secondary:hover { background: var(--bg-secondary); }
+
+    select {
+      padding: 12px 16px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--bg-secondary);
+      color: var(--text-primary);
+      font-size: 14px;
+    }
+
+    .summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 20px;
+      margin-bottom: 30px;
+    }
+
+    .summary-card {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      padding: 20px;
+      border: 1px solid var(--border);
+      text-align: center;
+    }
+
+    .summary-card h3 {
+      font-size: 0.8rem;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+    }
+
+    .summary-card .value {
+      font-size: 2rem;
+      font-weight: 700;
+    }
+
+    .summary-card .value.success { color: var(--success); }
+    .summary-card .value.failure { color: var(--failure); }
+    .summary-card .value.neutral { color: var(--text-primary); }
+
+    .progress-container {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 30px;
+      border: 1px solid var(--border);
+    }
+
+    .progress-bar {
+      height: 24px;
+      background: var(--failure-dim);
+      border-radius: 12px;
+      overflow: hidden;
+      margin-top: 10px;
+    }
+
+    .progress-fill {
+      height: 100%;
+      background: var(--success);
+      border-radius: 12px;
+      transition: width 0.3s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    .status-text {
+      font-size: 14px;
+      color: var(--text-secondary);
+      margin-bottom: 8px;
+    }
+
+    .results-section {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      margin-bottom: 20px;
+      border: 1px solid var(--border);
+      overflow: hidden;
+    }
+
+    .results-header {
+      padding: 16px 20px;
+      background: var(--bg-tertiary);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .results-header:hover { background: #1a4a7a; }
+
+    .results-header h2 {
+      font-size: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .results-header .toggle { color: var(--text-secondary); transition: transform 0.2s; }
+    .results-header.collapsed .toggle { transform: rotate(-90deg); }
+
+    .results-stats {
+      display: flex;
+      gap: 15px;
+      font-size: 14px;
+    }
+
+    .results-stats .passed { color: var(--success); }
+    .results-stats .failed { color: var(--failure); }
+
+    .results-content { padding: 15px; }
+    .results-content.hidden { display: none; }
+
+    .test-item {
+      margin: 6px 0;
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .test-header {
+      padding: 10px 14px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: var(--bg-primary);
+      font-size: 13px;
+    }
+
+    .test-header:hover { background: rgba(255,255,255,0.03); }
+
+    .test-header .status {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      margin-right: 10px;
+      flex-shrink: 0;
+    }
+
+    .test-header .status.passed { background: var(--success); }
+    .test-header .status.failed { background: var(--failure); }
+
+    .test-header .test-info { flex: 1; display: flex; align-items: center; min-width: 0; }
+    .test-header .test-num { font-weight: 600; margin-right: 10px; color: var(--text-muted); }
+    .test-header .test-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .test-header .expand-icon { color: var(--text-muted); font-size: 0.75rem; }
+
+    .test-details {
+      padding: 15px;
+      background: var(--code-bg);
+      border-top: 1px solid var(--border);
+      display: none;
+      font-size: 13px;
+    }
+
+    .test-details.visible { display: block; }
+
+    .detail-section { margin-bottom: 15px; }
+    .detail-section:last-child { margin-bottom: 0; }
+
+    .detail-section h4 {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+
+    .detail-section pre {
+      background: var(--bg-secondary);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 12px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      max-height: 300px;
+      overflow-y: auto;
+      border: 1px solid var(--border);
+    }
+
+    .detail-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+    }
+
+    .filter-controls {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    .filter-controls input[type="search"] {
+      padding: 10px 14px;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      background: var(--bg-secondary);
+      color: var(--text-primary);
+      font-size: 14px;
+      width: 250px;
+    }
+
+    .log-output {
+      background: var(--code-bg);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 15px;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 12px;
+      max-height: 200px;
+      overflow-y: auto;
+      white-space: pre-wrap;
+      margin-bottom: 20px;
+    }
+
+    @media (max-width: 768px) {
+      .detail-row { grid-template-columns: 1fr; }
+      .summary-grid { grid-template-columns: 1fr 1fr; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="hero">
+      <h1>HTML5rw Regression Test Suite</h1>
+      <p>
+        Browser-based regression testing for the HTML5rw OCaml parser.
+        Tests are loaded from the html5lib-tests conformance suite.
+      </p>
+      <div class="controls">
+        <button id="run-all" onclick="runAllTests()">Run All Tests</button>
+        <button id="run-tree" class="secondary" onclick="runTreeTests()">Tree Construction Only</button>
+        <button id="run-encoding" class="secondary" onclick="runEncodingTests()">Encoding Only</button>
+        <select id="mode-select">
+          <option value="js">JavaScript (js_of_ocaml)</option>
+          <option value="wasm">WebAssembly (wasm_of_ocaml)</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="summary-grid" id="summary" style="display: none;">
+      <div class="summary-card">
+        <h3>Total Tests</h3>
+        <div class="value neutral" id="total-count">0</div>
+      </div>
+      <div class="summary-card">
+        <h3>Passed</h3>
+        <div class="value success" id="passed-count">0</div>
+      </div>
+      <div class="summary-card">
+        <h3>Failed</h3>
+        <div class="value failure" id="failed-count">0</div>
+      </div>
+      <div class="summary-card">
+        <h3>Pass Rate</h3>
+        <div class="value" id="pass-rate">0%</div>
+      </div>
+    </div>
+
+    <div class="progress-container" id="progress-container">
+      <div class="status-text" id="status-text">Ready to run tests. Click a button above to start.</div>
+      <div class="progress-bar">
+        <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
+      </div>
+    </div>
+
+    <div class="log-output" id="log-output">Waiting for tests to start...</div>
+
+    <div class="filter-controls" id="filter-controls" style="display: none;">
+      <input type="search" id="search" placeholder="Search tests...">
+      <select id="filter">
+        <option value="all">All Tests</option>
+        <option value="passed">Passed Only</option>
+        <option value="failed">Failed Only</option>
+      </select>
+      <button class="secondary" onclick="expandAll()">Expand All</button>
+      <button class="secondary" onclick="collapseAll()">Collapse All</button>
+    </div>
+
+    <div id="results-container"></div>
+  </div>
+
+  <script>
+    // Test file lists
+    const TREE_CONSTRUCTION_FILES = [
+      "adoption01.dat", "adoption02.dat", "blocks.dat", "comments01.dat",
+      "doctype01.dat", "domjs-unsafe.dat", "entities01.dat", "entities02.dat",
+      "foreign-fragment.dat", "html5test-com.dat", "inbody01.dat", "isindex.dat",
+      "main-element.dat", "math.dat", "menuitem-element.dat", "namespace-sensitivity.dat",
+      "noscript01.dat", "pending-spec-changes-plain-text-unsafe.dat",
+      "pending-spec-changes.dat", "plain-text-unsafe.dat", "quirks01.dat", "ruby.dat",
+      "scriptdata01.dat", "search-element.dat", "svg.dat", "tables01.dat",
+      "template.dat", "tests_innerHTML_1.dat", "tests1.dat", "tests10.dat",
+      "tests11.dat", "tests12.dat", "tests14.dat", "tests15.dat", "tests16.dat",
+      "tests17.dat", "tests18.dat", "tests19.dat", "tests2.dat", "tests20.dat",
+      "tests21.dat", "tests22.dat", "tests23.dat", "tests24.dat", "tests25.dat",
+      "tests26.dat", "tests3.dat", "tests4.dat", "tests5.dat", "tests6.dat",
+      "tests7.dat", "tests8.dat", "tests9.dat", "tricky01.dat", "webkit01.dat",
+      "webkit02.dat"
+    ];
+
+    const ENCODING_FILES = [
+      "test-yahoo-jp.dat", "tests1.dat", "tests2.dat"
+    ];
+
+    let testRunner = null;
+    let isRunning = false;
+
+    function log(msg) {
+      const output = document.getElementById('log-output');
+      output.textContent += msg + '\n';
+      output.scrollTop = output.scrollHeight;
+    }
+
+    function clearLog() {
+      document.getElementById('log-output').textContent = '';
+    }
+
+    function updateProgress(current, total, msg) {
+      const pct = total > 0 ? (current / total * 100) : 0;
+      document.getElementById('progress-fill').style.width = pct + '%';
+      document.getElementById('status-text').textContent = msg || `Running: ${current}/${total}`;
+    }
+
+    function updateSummary(passed, failed) {
+      const total = passed + failed;
+      const rate = total > 0 ? (passed / total * 100).toFixed(1) : 0;
+      document.getElementById('total-count').textContent = total;
+      document.getElementById('passed-count').textContent = passed;
+      document.getElementById('failed-count').textContent = failed;
+      document.getElementById('pass-rate').textContent = rate + '%';
+      document.getElementById('pass-rate').className = 'value ' + (rate >= 99 ? 'success' : rate >= 90 ? 'neutral' : 'failure');
+      document.getElementById('summary').style.display = 'grid';
+    }
+
+    async function loadTestRunner() {
+      const mode = document.getElementById('mode-select').value;
+      const scriptName = mode === 'wasm' ? 'htmlrw-tests.wasm.js' : 'htmlrw-tests.js';
+
+      if (typeof html5rwTests !== 'undefined') {
+        return true;
+      }
+
+      log(`Loading ${scriptName}...`);
+      try {
+        await new Promise((resolve, reject) => {
+          const script = document.createElement('script');
+          script.src = `_build/default/lib/js/${scriptName}`;
+          script.onload = resolve;
+          script.onerror = () => reject(new Error(`Failed to load ${scriptName}`));
+          document.head.appendChild(script);
+        });
+
+        // Wait for initialization
+        await new Promise(resolve => setTimeout(resolve, 100));
+
+        if (typeof html5rwTests === 'undefined') {
+          throw new Error('Test runner not initialized');
+        }
+
+        log(`Test runner loaded (version ${html5rwTests.version})`);
+        return true;
+      } catch (e) {
+        log(`ERROR: ${e.message}`);
+        log('Make sure to run: opam exec -- dune build lib/js/htmlrw-tests.js');
+        return false;
+      }
+    }
+
+    async function fetchTestFile(type, filename) {
+      const basePath = type === 'tree-construction'
+        ? 'html5lib-tests/tree-construction/'
+        : 'html5lib-tests/encoding/';
+      const url = basePath + filename;
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ${url}: ${response.status}`);
+      }
+      return await response.text();
+    }
+
+    function renderFileResult(result) {
+      const section = document.createElement('div');
+      section.className = 'results-section';
+      section.dataset.filename = result.filename;
+
+      const collapsed = result.failedCount === 0 ? 'collapsed' : '';
+      const hidden = result.failedCount === 0 ? 'hidden' : '';
+
+      section.innerHTML = `
+        <div class="results-header ${collapsed}">
+          <h2><span class="toggle">▼</span> ${escapeHtml(result.filename)}</h2>
+          <div class="results-stats">
+            <span class="passed">✓ ${result.passedCount}</span>
+            <span class="failed">✗ ${result.failedCount}</span>
+          </div>
+        </div>
+        <div class="results-content ${hidden}">
+          ${result.tests.map(renderTestResult).join('')}
+        </div>
+      `;
+
+      // Add toggle handler
+      section.querySelector('.results-header').addEventListener('click', function() {
+        this.classList.toggle('collapsed');
+        this.nextElementSibling.classList.toggle('hidden');
+      });
+
+      // Add test detail handlers
+      section.querySelectorAll('.test-header').forEach(header => {
+        header.addEventListener('click', function(e) {
+          e.stopPropagation();
+          const details = this.nextElementSibling;
+          details.classList.toggle('visible');
+          const icon = this.querySelector('.expand-icon');
+          icon.textContent = details.classList.contains('visible') ? '▲' : '▼';
+        });
+      });
+
+      return section;
+    }
+
+    function renderTestResult(test) {
+      const statusClass = test.success ? 'passed' : 'failed';
+      return `
+        <div class="test-item" data-passed="${test.success}">
+          <div class="test-header">
+            <div class="test-info">
+              <span class="status ${statusClass}"></span>
+              <span class="test-num">#${test.testNum}</span>
+              <span class="test-desc">${escapeHtml(test.description)}</span>
+            </div>
+            <span class="expand-icon">▼</span>
+          </div>
+          <div class="test-details">
+            <div class="detail-section">
+              <h4>Input</h4>
+              <pre>${escapeHtml(test.input)}</pre>
+            </div>
+            <div class="detail-row">
+              <div class="detail-section">
+                <h4>Expected</h4>
+                <pre>${escapeHtml(test.expected)}</pre>
+              </div>
+              <div class="detail-section">
+                <h4>Actual</h4>
+                <pre>${escapeHtml(test.actual)}</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    async function runTests(testType, files, basePath) {
+      if (isRunning) return;
+      isRunning = true;
+
+      clearLog();
+      document.getElementById('results-container').innerHTML = '';
+      document.getElementById('filter-controls').style.display = 'none';
+
+      const buttons = document.querySelectorAll('button');
+      buttons.forEach(b => b.disabled = true);
+
+      try {
+        if (!await loadTestRunner()) {
+          return;
+        }
+
+        log(`Starting ${testType} tests...`);
+        let totalPassed = 0;
+        let totalFailed = 0;
+        const allResults = [];
+
+        for (let i = 0; i < files.length; i++) {
+          const filename = files[i];
+          updateProgress(i, files.length, `Loading ${filename}...`);
+
+          try {
+            const content = await fetchTestFile(basePath, filename);
+            log(`Running ${filename}...`);
+
+            let result;
+            if (basePath === 'tree-construction') {
+              result = html5rwTests.runTreeConstructionTest(filename, content);
+            } else {
+              result = html5rwTests.runEncodingTest(filename, content);
+            }
+
+            totalPassed += result.passedCount;
+            totalFailed += result.failedCount;
+            allResults.push(result);
+
+            log(`  ${filename}: ${result.passedCount} passed, ${result.failedCount} failed`);
+
+            // Render result immediately
+            const section = renderFileResult(result);
+            document.getElementById('results-container').appendChild(section);
+
+          } catch (e) {
+            log(`  ERROR loading ${filename}: ${e.message}`);
+          }
+
+          updateSummary(totalPassed, totalFailed);
+          updateProgress(i + 1, files.length);
+        }
+
+        updateProgress(files.length, files.length, `Complete: ${totalPassed} passed, ${totalFailed} failed`);
+        log(`\n=== SUMMARY ===`);
+        log(`Total: ${totalPassed + totalFailed} tests`);
+        log(`Passed: ${totalPassed}`);
+        log(`Failed: ${totalFailed}`);
+        log(`Pass rate: ${((totalPassed / (totalPassed + totalFailed)) * 100).toFixed(2)}%`);
+
+        document.getElementById('filter-controls').style.display = 'flex';
+        setupFilters();
+
+      } finally {
+        isRunning = false;
+        buttons.forEach(b => b.disabled = false);
+      }
+    }
+
+    function runAllTests() {
+      // Run both tree and encoding tests
+      runTests('all', TREE_CONSTRUCTION_FILES.concat(ENCODING_FILES.map(f => 'encoding/' + f)), 'tree-construction');
+    }
+
+    async function runTreeTests() {
+      await runTests('tree-construction', TREE_CONSTRUCTION_FILES, 'tree-construction');
+    }
+
+    async function runEncodingTests() {
+      await runTests('encoding', ENCODING_FILES, 'encoding');
+    }
+
+    function setupFilters() {
+      const search = document.getElementById('search');
+      const filter = document.getElementById('filter');
+
+      search.addEventListener('input', applyFilters);
+      filter.addEventListener('change', applyFilters);
+    }
+
+    function applyFilters() {
+      const query = document.getElementById('search').value.toLowerCase();
+      const filterValue = document.getElementById('filter').value;
+
+      document.querySelectorAll('.test-item').forEach(item => {
+        const text = item.textContent.toLowerCase();
+        const passed = item.dataset.passed === 'true';
+        let visible = true;
+
+        if (query && !text.includes(query)) visible = false;
+        if (filterValue === 'passed' && !passed) visible = false;
+        if (filterValue === 'failed' && passed) visible = false;
+
+        item.style.display = visible ? '' : 'none';
+      });
+    }
+
+    function expandAll() {
+      document.querySelectorAll('.results-header.collapsed').forEach(h => h.click());
+    }
+
+    function collapseAll() {
+      document.querySelectorAll('.results-header:not(.collapsed)').forEach(h => h.click());
+    }
+
+    // Quick test on load
+    window.addEventListener('load', function() {
+      log('Ready. Select a test mode and click Run to begin.');
+    });
+  </script>
+</body>
+</html>