html

lib/html5rw/parser/parser_constants.ml

···
 (* Use Astring for string operations *)
 let lowercase = Astring.String.Ascii.lowercase
 
+(* Helper to create a hashtable set from a list for O(1) membership *)
+let make_set elements =
+  let tbl = Hashtbl.create (List.length elements) in
+  List.iter (fun e -> Hashtbl.add tbl e ()) elements;
+  tbl
+
 (* Void elements - no end tag allowed *)
 let void_elements = [
   "area"; "base"; "br"; "col"; "embed"; "hr"; "img"; "input";
   "link"; "meta"; "source"; "track"; "wbr"
 ]
+let void_elements_tbl = make_set void_elements
 
 (* Raw text elements - content is raw text *)
 let raw_text_elements = ["script"; "style"]
···
   "a"; "b"; "big"; "code"; "em"; "font"; "i"; "nobr"; "s"; "small";
   "strike"; "strong"; "tt"; "u"
 ]
+let formatting_elements_tbl = make_set formatting_elements
 
 (* Special elements *)
 let special_elements = [
···
   "tbody"; "td"; "template"; "textarea"; "tfoot"; "th"; "thead"; "title";
   "tr"; "track"; "ul"; "wbr"; "xmp"
 ]
+let special_elements_tbl = make_set special_elements
 
 (* Heading elements *)
 let heading_elements = ["h1"; "h2"; "h3"; "h4"; "h5"; "h6"]
+let heading_elements_tbl = make_set heading_elements
 
 (* Implied end tag elements *)
 let implied_end_tags = [
   "dd"; "dt"; "li"; "optgroup"; "option"; "p"; "rb"; "rp"; "rt"; "rtc"
 ]
+let implied_end_tags_tbl = make_set implied_end_tags
 
 (* Thoroughly implied end tags *)
 let thoroughly_implied_end_tags = [
   "caption"; "colgroup"; "dd"; "dt"; "li"; "optgroup"; "option"; "p";
   "rb"; "rp"; "rt"; "rtc"; "tbody"; "td"; "tfoot"; "th"; "thead"; "tr"
 ]
+let thoroughly_implied_end_tags_tbl = make_set thoroughly_implied_end_tags
 
 (* Scope elements for various scope checks *)
 let default_scope = [
···
 let table_scope = ["html"; "table"; "template"]
 
 let select_scope_exclude = ["optgroup"; "option"]
+let select_scope_exclude_tbl = make_set select_scope_exclude
 
 (* MathML text integration points *)
 let mathml_text_integration = ["mi"; "mo"; "mn"; "ms"; "mtext"]
+let mathml_text_integration_tbl = make_set mathml_text_integration
 
 (* MathML attribute adjustments *)
 let mathml_attr_adjustments = [
···
 
 (* SVG HTML integration points *)
 let svg_html_integration = ["foreignObject"; "desc"; "title"]
+let svg_html_integration_tbl = make_set (List.map lowercase svg_html_integration)
 
 (* SVG tag name adjustments *)
 let svg_tag_adjustments = [
···
   "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"
 ]
 
-(* Helper functions *)
+(* Helper functions - O(1) hashtable lookups *)
+let is_void_element name = Hashtbl.mem void_elements_tbl name
+let is_formatting_element name = Hashtbl.mem formatting_elements_tbl name
+let is_special_element name = Hashtbl.mem special_elements_tbl name
+let is_heading_element name = Hashtbl.mem heading_elements_tbl name
+let is_implied_end_tag name = Hashtbl.mem implied_end_tags_tbl name
+let is_thoroughly_implied_end_tag name = Hashtbl.mem thoroughly_implied_end_tags_tbl name
+let is_mathml_text_integration name = Hashtbl.mem mathml_text_integration_tbl name
+let is_svg_html_integration name = Hashtbl.mem svg_html_integration_tbl (lowercase name)
+let is_select_scope_exclude name = Hashtbl.mem select_scope_exclude_tbl name
+
+(* Backwards compatibility aliases *)
 let is_void = List.mem
 let is_formatting = List.mem
 let is_special name = List.mem name special_elements

lib/html5rw/parser/parser_tree_builder.ml

···
 let is_html_integration_point node =
   (* SVG foreignObject, desc, and title are always HTML integration points *)
   if node.Dom.namespace = Some "svg" &&
-     List.mem node.Dom.name Parser_constants.svg_html_integration then true
+     Parser_constants.is_svg_html_integration node.Dom.name then true
   (* annotation-xml is an HTML integration point only with specific encoding values *)
   else if node.Dom.namespace = Some "mathml" && node.Dom.name = "annotation-xml" then
     match List.assoc_opt "encoding" node.Dom.attrs with
···
 (* Check if element is a MathML text integration point *)
 let is_mathml_text_integration_point node =
   node.Dom.namespace = Some "mathml" &&
-  List.mem node.Dom.name ["mi"; "mo"; "mn"; "ms"; "mtext"]
+  Parser_constants.is_mathml_text_integration node.Dom.name
 
 (* Scope checks - integration points also terminate scope (except for table scope) *)
 (* Per WHATWG spec, scope checks only consider HTML namespace elements for the target names *)
···
     | [] -> false
     | n :: rest ->
       if n.Dom.name = name then true
-      else if not (List.mem n.Dom.name Parser_constants.select_scope_exclude) then false
+      else if not (Parser_constants.is_select_scope_exclude n.Dom.name) then false
       else check rest
   in
   check t.open_elements
···
 let generate_implied_end_tags t ?except () =
   let rec loop () =
     match current_node t with
-    | Some n when List.mem n.Dom.name Parser_constants.implied_end_tags ->
+    | Some n when Parser_constants.is_implied_end_tag n.Dom.name ->
       (match except with
        | Some ex when n.Dom.name = ex -> ()
        | _ -> pop_current t; loop ())
···
 let generate_all_implied_end_tags t =
   let rec loop () =
     match current_node t with
-    | Some n when List.mem n.Dom.name Parser_constants.thoroughly_implied_end_tags ->
+    | Some n when Parser_constants.is_thoroughly_implied_end_tag n.Dom.name ->
       pop_current t; loop ()
     | _ -> ()
   in
···
     when List.mem name ["address"; "article"; "aside"; "blockquote"; "center"; "details"; "dialog"; "dir"; "div"; "dl"; "fieldset"; "figcaption"; "figure"; "footer"; "header"; "hgroup"; "main"; "menu"; "nav"; "ol"; "p"; "search"; "section"; "summary"; "ul"] ->
     if has_element_in_button_scope t "p" then close_p_element t;
     ignore (insert_element t name ~push:true attrs)
-  | Token.Tag { kind = Token.Start; name; attrs; _ } when List.mem name Parser_constants.heading_elements ->
+  | Token.Tag { kind = Token.Start; name; attrs; _ } when Parser_constants.is_heading_element name ->
     if has_element_in_button_scope t "p" then close_p_element t;
     (match current_node t with
-     | Some n when List.mem n.Dom.name Parser_constants.heading_elements ->
+     | Some n when Parser_constants.is_heading_element n.Dom.name ->
        parse_error t "unexpected-start-tag";
        pop_current t
      | _ -> ());
···
        | _ -> ());
       pop_until_tag t name
     end
-  | Token.Tag { kind = Token.End; name; _ } when List.mem name Parser_constants.heading_elements ->
+  | Token.Tag { kind = Token.End; name; _ } when Parser_constants.is_heading_element name ->
     if not (has_element_in_scope_impl t Parser_constants.heading_elements Parser_constants.default_scope ~check_integration_points:true) then
       parse_error t "unexpected-end-tag"
     else begin
···
     reconstruct_active_formatting t;
     ignore (insert_element t name ~push:true attrs);
     (* Check for self-closing on non-void HTML element *)
-    if self_closing && not (List.mem name Parser_constants.void_elements) then
+    if self_closing && not (Parser_constants.is_void_element name) then
       parse_error t "non-void-html-element-start-tag-with-trailing-solidus"
   | Token.Tag { kind = Token.End; name; _ } ->
     (* Any other end tag *)
···
     ignore (insert_element t name attrs)
     (* Don't push to stack - void elements *)
   (* Handle formatting elements in select *)
-  | Token.Tag { kind = Token.Start; name; attrs; _ } when List.mem name Parser_constants.formatting_elements ->
+  | Token.Tag { kind = Token.Start; name; attrs; _ } when Parser_constants.is_formatting_element name ->
     reconstruct_active_formatting t;
     let node = insert_element t name ~push:true attrs in
     push_formatting_element t node name attrs
-  | Token.Tag { kind = Token.End; name; _ } when List.mem name Parser_constants.formatting_elements ->
+  | Token.Tag { kind = Token.End; name; _ } when Parser_constants.is_formatting_element name ->
     (* Find select element and check if formatting element is inside select *)
     let select_idx = ref None in
     let fmt_idx = ref None in
···
   let is_html_integration_point node =
     (* SVG foreignObject, desc, and title are always HTML integration points *)
     if node.Dom.namespace = Some "svg" &&
-       List.mem node.Dom.name Parser_constants.svg_html_integration then true
+       Parser_constants.is_svg_html_integration node.Dom.name then true
     (* annotation-xml is an HTML integration point only with specific encoding values *)
     else if node.Dom.namespace = Some "mathml" && node.Dom.name = "annotation-xml" then
       match List.assoc_opt "encoding" node.Dom.attrs with
···
   (* Check for MathML text integration points *)
   let is_mathml_text_integration_point node =
     node.Dom.namespace = Some "mathml" &&
-    List.mem node.Dom.name ["mi"; "mo"; "mn"; "ms"; "mtext"]
+    Parser_constants.is_mathml_text_integration node.Dom.name
   in
   (* Foreign content handling *)
   let in_foreign =
···
   let is_html_integration_point node =
     (* SVG foreignObject, desc, and title are always HTML integration points *)
     if node.Dom.namespace = Some "svg" &&
-       List.mem node.Dom.name Parser_constants.svg_html_integration then true
+       Parser_constants.is_svg_html_integration node.Dom.name then true
     (* annotation-xml is an HTML integration point only with specific encoding values *)
     else if node.Dom.namespace = Some "mathml" && node.Dom.name = "annotation-xml" then
       match List.assoc_opt "encoding" node.Dom.attrs with

lib/htmlrw_check/datatype/datatype.ml

···
   if start > end_pos then ""
   else String.sub s start (end_pos - start + 1)
 
+(** Split string on HTML whitespace characters (space, tab, LF, FF, CR).
+    Filters out empty tokens. Used for space-separated attribute values. *)
+let split_on_whitespace s =
+  let len = String.length s in
+  let rec split acc start i =
+    if i >= len then
+      if i > start then
+        List.rev ((String.sub s start (i - start)) :: acc)
+      else
+        List.rev acc
+    else if is_whitespace s.[i] then
+      let acc' =
+        if i > start then
+          (String.sub s start (i - start)) :: acc
+        else
+          acc
+      in
+      split acc' (i + 1) (i + 1)
+    else
+      split acc start (i + 1)
+  in
+  split [] 0 0
+
 (** Factory for creating enum-based validators.
     Many HTML attributes accept a fixed set of keyword values.
     Uses Hashtbl for O(1) membership check. *)

lib/htmlrw_check/datatype/datatype.mli

···
 (** Trim HTML5 whitespace from both ends of a string. *)
 val trim_html_spaces : string -> string
 
+(** Split string on HTML5 whitespace characters (space, tab, LF, FF, CR).
+    Filters out empty tokens. Used for space-separated attribute values. *)
+val split_on_whitespace : string -> string list
+
 (** {2 Datatype Factories} *)
 
 (** Create an enum-based validator for attributes with fixed keyword values.

lib/htmlrw_check/datatype/dt_autocomplete.ml

···
 (** Autocomplete attribute validation based on HTML5 spec *)
 
-(** Check if character is whitespace *)
-let is_whitespace c = c = ' ' || c = '\t' || c = '\n' || c = '\r'
+(* Use shared utilities from Datatype *)
+let is_whitespace = Datatype.is_whitespace
+let to_ascii_lowercase = Datatype.to_ascii_lowercase
 
-(** Convert character to ASCII lowercase *)
-let to_ascii_lowercase c =
-  if c >= 'A' && c <= 'Z' then Char.chr (Char.code c + 32) else c
-
-(** Trim whitespace from string *)
+(** Trim whitespace from string and collapse internal whitespace *)
 let trim_whitespace s =
   let s = String.trim s in
   (* Also collapse internal whitespace *)
···
     "impp";
   ]
 
-(** Split string on whitespace *)
-let split_on_whitespace s =
-  let rec split acc start i =
-    if i >= String.length s then
-      if start < i then List.rev (String.sub s start (i - start) :: acc)
-      else List.rev acc
-    else if is_whitespace s.[i] then
-      if start < i then
-        split (String.sub s start (i - start) :: acc) (i + 1) (i + 1)
-      else split acc (i + 1) (i + 1)
-    else split acc start (i + 1)
-  in
-  split [] 0 0
+(** Split string on whitespace - uses shared utility *)
+let split_on_whitespace = Datatype.split_on_whitespace
 
 (** Check if string starts with prefix *)
 let starts_with s prefix =

lib/htmlrw_check/semantic/id_checker.ml

···
   else
     None
 
-(** Split whitespace-separated ID references. *)
-let split_ids value =
-  let rec split acc start i =
-    if i >= String.length value then
-      if i > start then
-        (String.sub value start (i - start)) :: acc
-      else
-        acc
-    else
-      match value.[i] with
-      | ' ' | '\t' | '\n' | '\r' ->
-          let acc' =
-            if i > start then
-              (String.sub value start (i - start)) :: acc
-            else
-              acc
-          in
-          split acc' (i + 1) (i + 1)
-      | _ ->
-          split acc start (i + 1)
-  in
-  List.rev (split [] 0 0)
+(** Split whitespace-separated ID references - uses shared utility. *)
+let split_ids = Datatype.split_on_whitespace
 
-(** Attributes that reference a single ID. *)
-let single_id_ref_attrs = [
-  "for";         (* label *)
-  "form";        (* form-associated elements *)
-  "list";        (* input *)
-  "aria-activedescendant";
-  "popovertarget";  (* button - references popover element *)
-  "commandfor";     (* button - references element to control *)
-  "anchor";         (* popover - references anchor element *)
-]
+(** Attributes that reference a single ID - O(1) lookup. *)
+let single_id_ref_attrs =
+  let tbl = Hashtbl.create 8 in
+  List.iter (fun a -> Hashtbl.add tbl a ()) [
+    "for";         (* label *)
+    "form";        (* form-associated elements *)
+    "list";        (* input *)
+    "aria-activedescendant";
+    "popovertarget";  (* button - references popover element *)
+    "commandfor";     (* button - references element to control *)
+    "anchor";         (* popover - references anchor element *)
+  ];
+  tbl
 
-(** Attributes that reference multiple IDs (space-separated). *)
-let multi_id_ref_attrs = [
-  "headers";     (* td, th *)
-  "aria-labelledby";
-  "aria-describedby";
-  "aria-controls";
-  "aria-flowto";
-  "aria-owns";
-  "itemref";
-]
+let is_single_id_ref_attr name = Hashtbl.mem single_id_ref_attrs name
+
+(** Attributes that reference multiple IDs (space-separated) - O(1) lookup. *)
+let multi_id_ref_attrs =
+  let tbl = Hashtbl.create 8 in
+  List.iter (fun a -> Hashtbl.add tbl a ()) [
+    "headers";     (* td, th *)
+    "aria-labelledby";
+    "aria-describedby";
+    "aria-controls";
+    "aria-flowto";
+    "aria-owns";
+    "itemref";
+  ];
+  tbl
+
+let is_multi_id_ref_attr name = Hashtbl.mem multi_id_ref_attrs name
 
 (** Check and store an ID attribute. *)
 let check_id state ~element:_ ~id ~location:_ collector =
···
         if String.length value > 0 then
           Hashtbl.add state.map_names value ()
 
-    | attr when List.mem attr single_id_ref_attrs ->
+    | attr when is_single_id_ref_attr attr ->
         add_reference state ~referring_element:element
           ~attribute:attr ~referenced_id:value ~location
 
-    | attr when List.mem attr multi_id_ref_attrs ->
+    | attr when is_multi_id_ref_attr attr ->
         (* Split space-separated IDs and add each as a reference *)
         let ids = split_ids value in
         List.iter (fun id ->

lib/htmlrw_check/specialized/microdata_checker.ml

···
   Hashtbl.clear state.all_ids;
   state.html_element_seen <- false
 
-(** Split whitespace-separated values. *)
-let split_whitespace value =
-  let rec split acc start i =
-    if i >= String.length value then
-      if i > start then
-        (String.sub value start (i - start)) :: acc
-      else
-        acc
-    else
-      match value.[i] with
-      | ' ' | '\t' | '\n' | '\r' ->
-          let acc' =
-            if i > start then
-              (String.sub value start (i - start)) :: acc
-            else
-              acc
-          in
-          split acc' (i + 1) (i + 1)
-      | _ ->
-          split acc start (i + 1)
-  in
-  List.rev (split [] 0 0)
+(** Split whitespace-separated values - uses shared utility. *)
+let split_whitespace = Datatype.split_on_whitespace
 
 (** Check if a string is a valid URL (contains a colon). *)
 let is_url s =

test/test_all.ml

···
     files = !all_files;
     total_passed = !total_passed;
     total_failed = !total_failed;
+    match_quality = None;
+    test_type_breakdown = None;
+    strictness_mode = None;
+    run_timestamp = None;
   } in
   Report.generate_report report "html5lib_test_report.html";
 

test/test_encoding.ml

···
     files = List.rev !file_results;
     total_passed = !total_passed;
     total_failed = !total_failed;
+    match_quality = None;
+    test_type_breakdown = None;
+    strictness_mode = None;
+    run_timestamp = None;
   } in
   Report.generate_report report "test_encoding_report.html";
 

test/test_html5lib.ml

···
     files = List.rev !file_results;
     total_passed = !total_passed;
     total_failed = !total_failed;
+    match_quality = None;
+    test_type_breakdown = None;
+    strictness_mode = None;
+    run_timestamp = None;
   } in
   Report.generate_report report "test_html5lib_report.html";
 

test/test_report.ml

···
-(* HTML Test Report Generator *)
+(* HTML Test Report Generator - Standalone HTML reports for test results *)
 
 type test_result = {
   test_num : int;
···
   tests : test_result list;
 }
 
+type match_quality_stats = {
+  exact_matches : int;
+  code_matches : int;
+  message_matches : int;
+  substring_matches : int;
+  severity_mismatches : int;
+  no_matches : int;
+  not_applicable : int;
+}
+
+type test_type_stats = {
+  isvalid_passed : int;
+  isvalid_total : int;
+  novalid_passed : int;
+  novalid_total : int;
+  haswarn_passed : int;
+  haswarn_total : int;
+}
+
 type report = {
   title : string;
   test_type : string;
-  description : string;  (* Explanation of what this test suite validates *)
+  description : string;
   files : file_result list;
   total_passed : int;
   total_failed : int;
+  match_quality : match_quality_stats option;
+  test_type_breakdown : test_type_stats option;
+  strictness_mode : string option;
+  run_timestamp : string option;
 }
 
 let html_escape s =
···
   ) s;
   Buffer.contents buf
 
-(* No truncation - show full content for standalone reports *)
 let truncate_string ?(max_len=10000) s =
   if String.length s <= max_len then s
   else String.sub s 0 max_len ^ "\n... (truncated at " ^ string_of_int max_len ^ " chars)"
···
   --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; }
···
   line-height: 1.6;
 }
 
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: 20px;
+.container { max-width: 1600px; margin: 0 auto; padding: 20px; }
+
+/* Hero Header */
+.hero {
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+  padding: 40px;
+  border-radius: 12px;
+  margin-bottom: 30px;
+  border: 1px solid var(--border);
 }
 
-header {
-  background: var(--bg-secondary);
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
+.hero h1 {
+  font-size: 2rem;
+  margin-bottom: 15px;
+  color: var(--accent);
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
 
-header h1 {
+.hero h1::before {
+  content: "🧪";
   font-size: 1.5rem;
-  margin-bottom: 10px;
-  color: var(--accent);
 }
 
-.summary {
+.hero-description {
+  color: var(--text-secondary);
+  max-width: 900px;
+  margin-bottom: 20px;
+  font-size: 1.05rem;
+}
+
+.hero-meta {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.hero-meta span {
+  display: flex;
   align-items: center;
+  gap: 6px;
+}
+
+/* Summary Cards */
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
 }
 
-.stat {
-  padding: 8px 16px;
+.summary-card {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 24px;
+  border: 1px solid var(--border);
+  text-align: center;
+}
+
+.summary-card.large {
+  grid-column: span 2;
+}
+
+.summary-card h3 {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-secondary);
+  margin-bottom: 10px;
+}
+
+.summary-card .value {
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.summary-card .value.success { color: var(--success); }
+.summary-card .value.failure { color: var(--failure); }
+.summary-card .value.neutral { color: var(--text-primary); }
+
+.summary-card .subtext {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-top: 5px;
+}
+
+/* Progress Bar */
+.progress-bar {
+  height: 12px;
+  background: var(--failure-dim);
   border-radius: 6px;
+  overflow: hidden;
+  margin-top: 15px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--success);
+  border-radius: 6px;
+  transition: width 0.5s ease;
+}
+
+/* Stats Breakdown */
+.stats-section {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 30px;
+  border: 1px solid var(--border);
+}
+
+.stats-section h2 {
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+  color: var(--accent-light);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 15px;
+}
+
+.stat-item {
+  background: var(--bg-primary);
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-item .label {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.stat-item .count {
+  font-size: 1.4rem;
   font-weight: 600;
 }
 
-.stat.total { background: var(--bg-tertiary); }
-.stat.passed { background: rgba(74, 222, 128, 0.2); color: var(--success); }
-.stat.failed { background: rgba(248, 113, 113, 0.2); color: var(--failure); }
+.stat-item.success .count { color: var(--success); }
+.stat-item.failure .count { color: var(--failure); }
+.stat-item.warning .count { color: var(--warning); }
+.stat-item.info .count { color: var(--info); }
 
+/* Controls */
 .controls {
   display: flex;
-  gap: 10px;
-  margin-top: 10px;
+  gap: 12px;
+  margin-bottom: 25px;
   flex-wrap: wrap;
+  align-items: center;
 }
 
 input[type="search"], select {
-  padding: 8px 12px;
+  padding: 10px 14px;
   border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg-primary);
+  border-radius: 8px;
+  background: var(--bg-secondary);
   color: var(--text-primary);
   font-size: 14px;
 }
 
 input[type="search"] { width: 300px; }
+input[type="search"]:focus, select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
 
 button {
-  padding: 8px 16px;
+  padding: 10px 18px;
   border: none;
-  border-radius: 6px;
+  border-radius: 8px;
   background: var(--accent);
   color: white;
   cursor: pointer;
   font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
 }
 
-button:hover { opacity: 0.9; }
+button:hover { background: var(--accent-light); }
+button.secondary {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+}
+button.secondary:hover { background: var(--bg-secondary); }
+
+/* Sidebar */
+.layout {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 30px;
+}
 
 .sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 280px;
-  background: var(--bg-secondary);
-  border-right: 1px solid var(--border);
+  position: sticky;
+  top: 20px;
+  height: fit-content;
+  max-height: calc(100vh - 40px);
   overflow-y: auto;
-  padding: 10px;
-  padding-top: 20px;
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 16px;
+  border: 1px solid var(--border);
+}
+
+.sidebar h3 {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+  padding: 0 8px;
 }
 
 .sidebar-item {
-  padding: 8px 12px;
-  border-radius: 6px;
+  padding: 10px 12px;
+  border-radius: 8px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 4px;
   font-size: 14px;
+  transition: all 0.2s;
 }
 
 .sidebar-item:hover { background: var(--bg-tertiary); }
 .sidebar-item.active { background: var(--accent); }
 
-.sidebar-item .count {
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  background: var(--bg-primary);
+.sidebar-item .name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
 }
 
-.sidebar-item .count.all-passed { color: var(--success); }
-.sidebar-item .count.has-failed { color: var(--failure); }
-
-main {
-  margin-left: 300px;
-  padding: 20px;
-  padding-top: 30px;
+.sidebar-item .badge {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  background: var(--bg-primary);
+  font-weight: 600;
 }
 
-.intro {
-  background: var(--bg-secondary);
-  padding: 20px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
+.sidebar-item .badge.all-passed { color: var(--success); }
+.sidebar-item .badge.has-failed { color: var(--failure); }
 
+/* File Sections */
 .file-section {
-  margin-bottom: 30px;
+  margin-bottom: 24px;
   background: var(--bg-secondary);
-  border-radius: 8px;
+  border-radius: 12px;
   overflow: hidden;
+  border: 1px solid var(--border);
 }
 
 .file-header {
-  padding: 15px 20px;
+  padding: 18px 24px;
   background: var(--bg-tertiary);
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  transition: background 0.2s;
 }
+
+.file-header:hover { background: #1a4a7a; }
 
 .file-header h2 {
   font-size: 1.1rem;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .file-header .toggle {
-  font-size: 1.2rem;
-  transition: transform 0.2s;
+  font-size: 1rem;
+  transition: transform 0.3s;
+  color: var(--text-secondary);
 }
 
 .file-header.collapsed .toggle { transform: rotate(-90deg); }
 
 .file-stats {
   display: flex;
-  gap: 15px;
+  gap: 20px;
   font-size: 14px;
 }
 
-.file-stats .passed { color: var(--success); }
-.file-stats .failed { color: var(--failure); }
+.file-stats .passed { color: var(--success); font-weight: 500; }
+.file-stats .failed { color: var(--failure); font-weight: 500; }
 
-.tests-container {
-  padding: 10px;
-}
-
+.tests-container { padding: 12px; }
 .tests-container.hidden { display: none; }
 
+/* Test Items */
 .test-item {
   margin: 8px 0;
   border: 1px solid var(--border);
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
+  transition: border-color 0.2s;
 }
 
+.test-item:hover { border-color: var(--text-muted); }
+
 .test-header {
-  padding: 10px 15px;
+  padding: 12px 16px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--bg-primary);
+  transition: background 0.2s;
 }
 
-.test-header:hover { background: var(--bg-tertiary); }
+.test-header:hover { background: rgba(255,255,255,0.03); }
 
 .test-header .status {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  margin-right: 10px;
+  margin-right: 12px;
+  flex-shrink: 0;
 }
 
 .test-header .status.passed { background: var(--success); }
···
   flex: 1;
   display: flex;
   align-items: center;
+  min-width: 0;
 }
 
 .test-header .test-num {
   font-weight: 600;
-  margin-right: 10px;
-  color: var(--text-secondary);
+  margin-right: 12px;
+  color: var(--text-muted);
+  font-size: 0.9rem;
 }
 
 .test-header .test-desc {
···
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 600px;
+}
+
+.test-header .expand-icon {
+  color: var(--text-muted);
+  font-size: 0.8rem;
 }
 
+/* Test Details */
 .test-details {
-  padding: 15px;
-  background: var(--bg-primary);
+  padding: 20px;
+  background: var(--code-bg);
   border-top: 1px solid var(--border);
   display: none;
 }
···
 .test-details.visible { display: block; }
 
 .detail-section {
-  margin-bottom: 15px;
+  margin-bottom: 20px;
 }
+
+.detail-section:last-child { margin-bottom: 0; }
 
 .detail-section h4 {
-  font-size: 12px;
+  font-size: 11px;
   text-transform: uppercase;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .detail-section pre {
   background: var(--bg-secondary);
-  padding: 12px;
-  border-radius: 6px;
+  padding: 16px;
+  border-radius: 8px;
   overflow-x: auto;
-  font-family: 'Monaco', 'Menlo', monospace;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
   font-size: 13px;
   white-space: pre-wrap;
-  word-break: break-all;
-  max-height: 300px;
+  word-break: break-word;
+  max-height: 400px;
   overflow-y: auto;
+  line-height: 1.5;
+  border: 1px solid var(--border);
 }
 
 .detail-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 15px;
+  gap: 20px;
 }
 
-.detail-row.single { grid-template-columns: 1fr; }
+.comparison-label {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  margin-left: 8px;
+}
 
-.meta-info {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  font-size: 13px;
+.comparison-label.match { background: var(--success-dim); color: var(--success); }
+.comparison-label.mismatch { background: var(--failure-dim); color: var(--failure); }
+
+/* Explanation Section */
+.explanation {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 30px;
+  border: 1px solid var(--border);
+}
+
+.explanation h2 {
+  font-size: 1.2rem;
+  margin-bottom: 16px;
+  color: var(--accent-light);
+}
+
+.explanation p {
   color: var(--text-secondary);
-  margin-bottom: 15px;
+  margin-bottom: 12px;
 }
 
-.meta-info span {
-  background: var(--bg-secondary);
-  padding: 4px 10px;
-  border-radius: 4px;
+.explanation ul {
+  list-style: none;
+  padding-left: 0;
 }
 
-.diff-indicator {
-  color: var(--failure);
-  font-weight: bold;
-  margin-left: 5px;
+.explanation li {
+  padding: 8px 0;
+  padding-left: 24px;
+  position: relative;
+  color: var(--text-secondary);
 }
 
-@media (max-width: 900px) {
+.explanation li::before {
+  content: "→";
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+}
+
+.explanation code {
+  background: var(--bg-primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.9em;
+  color: var(--accent-light);
+}
+
+@media (max-width: 1000px) {
+  .layout { grid-template-columns: 1fr; }
   .sidebar { display: none; }
-  main { margin-left: 0; }
   .detail-row { grid-template-columns: 1fr; }
+  .summary-card.large { grid-column: span 1; }
 }
 |}
 
···
       e.stopPropagation();
       const details = this.nextElementSibling;
       details.classList.toggle('visible');
+      const icon = this.querySelector('.expand-icon');
+      if (icon) icon.textContent = details.classList.contains('visible') ? '▲' : '▼';
     });
   });
 
···
       const fileId = this.dataset.file;
       const section = document.getElementById(fileId);
       if (section) {
-        section.scrollIntoView({ behavior: 'smooth' });
-        // Expand if collapsed
+        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
         const header = section.querySelector('.file-header');
-        if (header.classList.contains('collapsed')) {
+        if (header && header.classList.contains('collapsed')) {
           header.click();
         }
       }
-      // Update active state
       document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
       this.classList.add('active');
     });
···
         const text = item.textContent.toLowerCase();
         item.style.display = text.includes(query) ? '' : 'none';
       });
+      // Update counts
+      document.querySelectorAll('.file-section').forEach(section => {
+        const visible = section.querySelectorAll('.test-item:not([style*="display: none"])').length;
+        const total = section.querySelectorAll('.test-item').length;
+        if (visible === 0 && query) {
+          section.style.display = 'none';
+        } else {
+          section.style.display = '';
+        }
+      });
     });
   }
 
···
   document.getElementById('collapse-all')?.addEventListener('click', function() {
     document.querySelectorAll('.file-header:not(.collapsed)').forEach(h => h.click());
   });
+
+  // Show only failed
+  document.getElementById('show-failed')?.addEventListener('click', function() {
+    document.getElementById('filter').value = 'failed';
+    document.getElementById('filter').dispatchEvent(new Event('change'));
+  });
 });
 |}
 
···
     | Some data ->
       Printf.sprintf {|
         <div class="detail-section">
-          <h4>Original Test Data (from .dat/.test file)</h4>
+          <h4>📄 Source HTML</h4>
           <pre>%s</pre>
         </div>
       |} (html_escape (truncate_string data))
     | None -> ""
   in
 
-  let diff_indicator = if test.success then "" else {|<span class="diff-indicator">✗</span>|} in
+  let comparison_label = if test.success then
+    {|<span class="comparison-label match">MATCH</span>|}
+  else
+    {|<span class="comparison-label mismatch">MISMATCH</span>|}
+  in
 
   Printf.sprintf {|
     <div class="test-item" data-passed="%b">
···
           <span class="test-num">#%d</span>
           <span class="test-desc">%s</span>
         </div>
-        <span>▼</span>
+        <span class="expand-icon">▼</span>
       </div>
       <div class="test-details">
         %s
         <div class="detail-section">
-          <h4>Input (HTML to parse)</h4>
+          <h4>📥 Input File</h4>
           <pre>%s</pre>
         </div>
         <div class="detail-row">
           <div class="detail-section">
-            <h4>Expected Output%s</h4>
+            <h4>✓ Expected Output</h4>
             <pre>%s</pre>
           </div>
           <div class="detail-section">
-            <h4>Actual Output%s</h4>
+            <h4>⚡ Actual Output %s</h4>
             <pre>%s</pre>
           </div>
         </div>
···
       </div>
     </div>
   |} test.success status_class test.test_num desc_escaped
-     raw_data_html input_escaped diff_indicator expected_escaped diff_indicator actual_escaped details_html
+     raw_data_html input_escaped expected_escaped comparison_label actual_escaped details_html
 
 let generate_file_html file =
-  let file_id = String.map (fun c -> if c = '.' then '-' else c) file.filename in
+  let file_id = String.map (fun c -> if c = '/' || c = '.' then '-' else c) file.filename in
   let tests_html = String.concat "\n" (List.map generate_test_html file.tests) in
   let collapsed = if file.failed_count = 0 then "collapsed" else "" in
   let hidden = if file.failed_count = 0 then "hidden" else "" in
···
       <div class="file-header %s">
         <h2>
           <span class="toggle">▼</span>
-          %s
-          <span style="font-weight: normal; font-size: 0.9em; color: var(--text-secondary)">(%s)</span>
+          📁 %s
         </h2>
         <div class="file-stats">
           <span class="passed">✓ %d passed</span>
···
         %s
       </div>
     </div>
-  |} file_id collapsed file.filename file.test_type file.passed_count file.failed_count hidden tests_html
+  |} file_id collapsed file.filename file.passed_count file.failed_count hidden tests_html
 
 let generate_sidebar_html files =
   String.concat "\n" (List.map (fun file ->
-    let file_id = String.map (fun c -> if c = '.' then '-' else c) file.filename in
-    let count_class = if file.failed_count = 0 then "all-passed" else "has-failed" in
+    let file_id = String.map (fun c -> if c = '/' || c = '.' then '-' else c) file.filename in
+    let badge_class = if file.failed_count = 0 then "all-passed" else "has-failed" in
     Printf.sprintf {|
       <div class="sidebar-item" data-file="file-%s">
-        <span>%s</span>
-        <span class="count %s">%d/%d</span>
+        <span class="name">%s</span>
+        <span class="badge %s">%d/%d</span>
       </div>
-    |} file_id file.filename count_class file.passed_count (file.passed_count + file.failed_count)
+    |} file_id file.filename badge_class file.passed_count (file.passed_count + file.failed_count)
   ) files)
 
+let generate_match_quality_html stats =
+  Printf.sprintf {|
+    <div class="stats-section">
+      <h2>📊 Match Quality Breakdown</h2>
+      <div class="stats-grid">
+        <div class="stat-item success">
+          <span class="label">Exact Matches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item success">
+          <span class="label">Code Matches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item info">
+          <span class="label">Message Matches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item warning">
+          <span class="label">Substring Matches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item warning">
+          <span class="label">Severity Mismatches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item failure">
+          <span class="label">No Matches</span>
+          <span class="count">%d</span>
+        </div>
+        <div class="stat-item">
+          <span class="label">N/A (isvalid tests)</span>
+          <span class="count">%d</span>
+        </div>
+      </div>
+    </div>
+  |} stats.exact_matches stats.code_matches stats.message_matches
+     stats.substring_matches stats.severity_mismatches stats.no_matches stats.not_applicable
+
+let generate_test_type_html stats =
+  let pct a b = if b = 0 then 0.0 else 100.0 *. float_of_int a /. float_of_int b in
+  Printf.sprintf {|
+    <div class="stats-section">
+      <h2>📋 Results by Test Type</h2>
+      <div class="stats-grid">
+        <div class="stat-item %s">
+          <span class="label">isvalid (no errors expected)</span>
+          <span class="count">%d/%d (%.1f%%)</span>
+        </div>
+        <div class="stat-item %s">
+          <span class="label">novalid (errors expected)</span>
+          <span class="count">%d/%d (%.1f%%)</span>
+        </div>
+        <div class="stat-item %s">
+          <span class="label">haswarn (warnings expected)</span>
+          <span class="count">%d/%d (%.1f%%)</span>
+        </div>
+      </div>
+    </div>
+  |}
+    (if stats.isvalid_passed = stats.isvalid_total then "success" else "failure")
+    stats.isvalid_passed stats.isvalid_total (pct stats.isvalid_passed stats.isvalid_total)
+    (if stats.novalid_passed = stats.novalid_total then "success" else "failure")
+    stats.novalid_passed stats.novalid_total (pct stats.novalid_passed stats.novalid_total)
+    (if stats.haswarn_passed = stats.haswarn_total then "success" else "failure")
+    stats.haswarn_passed stats.haswarn_total (pct stats.haswarn_passed stats.haswarn_total)
+
 let generate_report report output_path =
   let files_html = String.concat "\n" (List.map generate_file_html report.files) in
   let sidebar_html = generate_sidebar_html report.files in
+  let total = report.total_passed + report.total_failed in
+  let pass_rate = if total = 0 then 0.0 else 100.0 *. float_of_int report.total_passed /. float_of_int total in
+
+  let match_quality_html = match report.match_quality with
+    | Some stats -> generate_match_quality_html stats
+    | None -> ""
+  in
+
+  let test_type_html = match report.test_type_breakdown with
+    | Some stats -> generate_test_type_html stats
+    | None -> ""
+  in
+
+  let mode_text = match report.strictness_mode with
+    | Some m -> Printf.sprintf " (Mode: %s)" m
+    | None -> ""
+  in
+
+  let timestamp_text = match report.run_timestamp with
+    | Some t -> Printf.sprintf "<span>🕐 %s</span>" (html_escape t)
+    | None -> ""
+  in
 
   let html = Printf.sprintf {|<!DOCTYPE html>
 <html lang="en">
···
   <style>%s</style>
 </head>
 <body>
-  <div class="sidebar">
-    <h3 style="padding: 10px; color: var(--text-secondary); font-size: 12px; text-transform: uppercase;">Files</h3>
-    %s
-  </div>
-
-  <main>
-    <header>
+  <div class="container">
+    <div class="hero">
       <h1>%s</h1>
-      <p style="color: var(--text-secondary); margin: 10px 0; max-width: 900px;">%s</p>
-      <div class="summary">
-        <span class="stat total">%d tests</span>
-        <span class="stat passed">✓ %d passed</span>
-        <span class="stat failed">✗ %d failed</span>
-        <span class="stat total">%.1f%% pass rate</span>
+      <p class="hero-description">%s</p>
+      <div class="hero-meta">
+        <span>📊 %d total tests</span>
+        <span>✓ %d passed</span>
+        <span>✗ %d failed</span>
+        %s
       </div>
-      <div class="controls">
-        <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 id="expand-all">Expand All</button>
-        <button id="collapse-all">Collapse All</button>
+    </div>
+
+    <div class="summary-grid">
+      <div class="summary-card large">
+        <h3>Overall Pass Rate%s</h3>
+        <div class="value %s">%.1f%%</div>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: %.1f%%"></div>
+        </div>
       </div>
-    </header>
+      <div class="summary-card">
+        <h3>Tests Passed</h3>
+        <div class="value success">%d</div>
+        <div class="subtext">out of %d tests</div>
+      </div>
+      <div class="summary-card">
+        <h3>Tests Failed</h3>
+        <div class="value %s">%d</div>
+        <div class="subtext">%s</div>
+      </div>
+      <div class="summary-card">
+        <h3>Categories</h3>
+        <div class="value neutral">%d</div>
+        <div class="subtext">test categories</div>
+      </div>
+    </div>
+
     %s
-  </main>
+    %s
+
+    <div class="explanation">
+      <h2>📖 About This Test Run</h2>
+      <p>This report shows the results of running the <strong>%s</strong> test suite against the HTML5 validator implementation.</p>
+      <p>Tests are organized by category and classified by their expected outcome:</p>
+      <ul>
+        <li><code>-isvalid.html</code> — Valid HTML that should produce <strong>no errors or warnings</strong></li>
+        <li><code>-novalid.html</code> — Invalid HTML that should produce <strong>at least one error</strong></li>
+        <li><code>-haswarn.html</code> — HTML that should produce <strong>at least one warning</strong></li>
+      </ul>
+      <p>Click on any test to expand its details and see the input HTML, expected output, and actual validator messages.</p>
+    </div>
+
+    <div class="controls">
+      <input type="search" id="search" placeholder="🔍 Search tests by name or content...">
+      <select id="filter">
+        <option value="all">All tests</option>
+        <option value="passed">Passed only</option>
+        <option value="failed">Failed only</option>
+      </select>
+      <button id="show-failed" class="secondary">Show Failed Only</button>
+      <button id="expand-all" class="secondary">Expand All</button>
+      <button id="collapse-all" class="secondary">Collapse All</button>
+    </div>
+
+    <div class="layout">
+      <div class="sidebar">
+        <h3>Categories</h3>
+        %s
+      </div>
+      <div class="main-content">
+        %s
+      </div>
+    </div>
+  </div>
 
   <script>%s</script>
 </body>
 </html>
 |} report.title css
-   sidebar_html
    report.title (html_escape report.description)
-   (report.total_passed + report.total_failed)
-   report.total_passed
+   total report.total_passed report.total_failed timestamp_text
+   mode_text
+   (if pass_rate >= 99.0 then "success" else if pass_rate >= 90.0 then "neutral" else "failure")
+   pass_rate pass_rate
+   report.total_passed total
+   (if report.total_failed = 0 then "success" else "failure")
    report.total_failed
-   (100.0 *. float_of_int report.total_passed /. float_of_int (max 1 (report.total_passed + report.total_failed)))
-   files_html js
+   (if report.total_failed = 0 then "Perfect score!" else "needs attention")
+   (List.length report.files)
+   test_type_html match_quality_html
+   report.title
+   sidebar_html files_html js
   in
 
   let oc = open_out output_path in

test/test_serializer.ml

···
     files = List.rev !file_results;
     total_passed = !total_passed;
     total_failed = !total_failed;
+    match_quality = None;
+    test_type_breakdown = None;
+    strictness_mode = None;
+    run_timestamp = None;
   } in
   Report.generate_report report "test_serializer_report.html";
 

test/test_tokenizer.ml

···
     files = List.rev !file_results;
     total_passed = !total_passed;
     total_failed = !total_failed;
+    match_quality = None;
+    test_type_breakdown = None;
+    strictness_mode = None;
+    run_timestamp = None;
   } in
   Report.generate_report report "test_tokenizer_report.html";
 

test/test_validator.ml

···
   Printf.printf "No matches: %d\n" no_match;
   Printf.printf "N/A (isvalid or no expected): %d\n" no_quality
 
+(** Read HTML source file for display in report *)
+let read_html_source path =
+  try
+    let ic = open_in path in
+    let content = really_input_string ic (in_channel_length ic) in
+    close_in ic;
+    Some content
+  with _ -> None
+
 (** Generate HTML report *)
 let generate_html_report results output_path =
   let by_category = group_by_category results in
···
     let failed_count = List.length tests - passed_count in
     let test_results = List.mapi (fun i r ->
       let outcome_str = match r.file.expected with
-        | Valid -> "valid"
-        | Invalid -> "invalid"
-        | HasWarning -> "has-warning"
+        | Valid -> "isvalid"
+        | Invalid -> "novalid"
+        | HasWarning -> "haswarn"
         | Unknown -> "unknown"
       in
-      let description = Printf.sprintf "[%s] %s" outcome_str r.file.relative_path in
+      let description = Printf.sprintf "[%s] %s" outcome_str (Filename.basename r.file.relative_path) in
       let expected = match r.expected_message with
         | Some m -> m
-        | None -> "(no expected message)"
+        | None -> match r.file.expected with
+          | Valid -> "(should produce no errors or warnings)"
+          | Invalid -> "(should produce at least one error)"
+          | HasWarning -> "(should produce at least one warning)"
+          | Unknown -> "(unknown test type)"
       in
       let actual_str =
         let errors = if r.actual_errors = [] then ""
-          else "Errors:\n" ^ String.concat "\n" r.actual_errors in
+          else "Errors:\n  • " ^ String.concat "\n  • " r.actual_errors in
         let warnings = if r.actual_warnings = [] then ""
-          else "Warnings:\n" ^ String.concat "\n" r.actual_warnings in
+          else "Warnings:\n  • " ^ String.concat "\n  • " r.actual_warnings in
         let infos = if r.actual_infos = [] then ""
-          else "Info:\n" ^ String.concat "\n" r.actual_infos in
-        if errors = "" && warnings = "" && infos = "" then "(no messages)"
-        else String.trim (errors ^ "\n" ^ warnings ^ "\n" ^ infos)
+          else "Info:\n  • " ^ String.concat "\n  • " r.actual_infos in
+        if errors = "" && warnings = "" && infos = "" then "(no messages produced)"
+        else String.trim (errors ^ (if errors <> "" && warnings <> "" then "\n\n" else "") ^
+                         warnings ^ (if (errors <> "" || warnings <> "") && infos <> "" then "\n\n" else "") ^
+                         infos)
+      in
+      let match_quality_str = match r.match_quality with
+        | Some q -> Expected_message.match_quality_to_string q
+        | None -> "N/A"
       in
       Report.{
         test_num = i + 1;
···
         expected;
         actual = actual_str;
         success = r.passed;
-        details = [("Status", r.details)];
-        raw_test_data = None;
+        details = [
+          ("Result", r.details);
+          ("Match Quality", match_quality_str);
+        ];
+        raw_test_data = read_html_source r.file.path;
       }
     ) tests in
     Report.{
···
   let total_passed = List.filter (fun r -> r.passed) results |> List.length in
   let total_failed = List.length results - total_passed in
 
+  (* Compute match quality stats *)
+  let count_quality q = List.filter (fun r ->
+    match r.match_quality with Some mq -> mq = q | None -> false
+  ) results |> List.length in
+  let match_quality_stats : Report.match_quality_stats = {
+    exact_matches = count_quality Expected_message.Exact_match;
+    code_matches = count_quality Expected_message.Code_match;
+    message_matches = count_quality Expected_message.Message_match;
+    substring_matches = count_quality Expected_message.Substring_match;
+    severity_mismatches = count_quality Expected_message.Severity_mismatch;
+    no_matches = count_quality Expected_message.No_match;
+    not_applicable = List.filter (fun r -> r.match_quality = None) results |> List.length;
+  } in
+
+  (* Compute test type stats *)
+  let isvalid_results = List.filter (fun r -> r.file.expected = Valid) results in
+  let novalid_results = List.filter (fun r -> r.file.expected = Invalid) results in
+  let haswarn_results = List.filter (fun r -> r.file.expected = HasWarning) results in
+  let count_passed rs = List.filter (fun r -> r.passed) rs |> List.length in
+  let test_type_stats : Report.test_type_stats = {
+    isvalid_passed = count_passed isvalid_results;
+    isvalid_total = List.length isvalid_results;
+    novalid_passed = count_passed novalid_results;
+    novalid_total = List.length novalid_results;
+    haswarn_passed = count_passed haswarn_results;
+    haswarn_total = List.length haswarn_results;
+  } in
+
+  let mode_name =
+    if !strictness = Expected_message.strict then "STRICT (full)"
+    else if !strictness = Expected_message.exact_message then "STRICT (exact message)"
+    else "lenient"
+  in
+
+  (* Get current timestamp *)
+  let now = Unix.gettimeofday () in
+  let tm = Unix.localtime now in
+  let timestamp = Printf.sprintf "%04d-%02d-%02d %02d:%02d:%02d"
+    (tm.Unix.tm_year + 1900) (tm.Unix.tm_mon + 1) tm.Unix.tm_mday
+    tm.Unix.tm_hour tm.Unix.tm_min tm.Unix.tm_sec in
+
   let report : Report.report = {
     title = "Nu HTML Validator Tests";
     test_type = "validator";
···
     files = file_results;
     total_passed;
     total_failed;
+    match_quality = Some match_quality_stats;
+    test_type_breakdown = Some test_type_stats;
+    strictness_mode = Some mode_name;
+    run_timestamp = Some timestamp;
   } in
   Report.generate_report report output_path