migrate to htmlRunner

src/browser/cssom/CSSParser.zig

@@ -199,7 +199,7 @@ fn finalize(self: *CSSParser, arena: Allocator, declarations: *std.ArrayListUnma
 }
 
 const testing = @import("../../testing.zig");
-test "CSSParser - Simple property" {
+test "Browser: CSS.Parser - Simple property" {
     defer testing.reset();
 
     const text = "color: red;";
@@ -213,7 +213,7 @@ test "CSSParser - Simple property" {
     try testing.expectEqual(false, declarations[0].is_important);
 }
 
-test "CSSParser - Property with !important" {
+test "Browser: CSS.Parser - Property with !important" {
     defer testing.reset();
     const text = "margin: 10px !important;";
     const allocator = testing.arena_allocator;
@@ -226,7 +226,7 @@ test "CSSParser - Property with !important" {
     try testing.expectEqual(true, declarations[0].is_important);
 }
 
-test "CSSParser - Multiple properties" {
+test "Browser: CSS.Parser - Multiple properties" {
     defer testing.reset();
     const text = "color: red; font-size: 12px; margin: 5px !important;";
     const allocator = testing.arena_allocator;
@@ -248,7 +248,7 @@ test "CSSParser - Multiple properties" {
     try testing.expectEqual(true, declarations[2].is_important);
 }
 
-test "CSSParser - Quoted value with semicolon" {
+test "Browser: CSS.Parser - Quoted value with semicolon" {
     defer testing.reset();
     const text = "content: \"Hello; world!\";";
     const allocator = testing.arena_allocator;
@@ -261,7 +261,7 @@ test "CSSParser - Quoted value with semicolon" {
     try testing.expectEqual(false, declarations[0].is_important);
 }
 
-test "CSSParser - URL value" {
+test "Browser: CSS.Parser - URL value" {
     defer testing.reset();
     const text = "background-image: url(\"test.png\");";
     const allocator = testing.arena_allocator;
@@ -274,7 +274,7 @@ test "CSSParser - URL value" {
     try testing.expectEqual(false, declarations[0].is_important);
 }
 
-test "CSSParser - Whitespace handling" {
+test "Browser: CSS.Parser - Whitespace handling" {
     defer testing.reset();
     const text = "  color  :  purple  ;  margin  :  10px  ;  ";
     const allocator = testing.arena_allocator;

src/browser/cssom/CSSRuleList.zig

@@ -47,14 +47,6 @@ pub fn get_length(self: *CSSRuleList) u32 {
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.CSS.CSSRuleList" {
+test "Browser: CSS.CSSRuleList" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    try testing.htmlRunner("cssom/css_rule_list.html");
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let list = new CSSRuleList()", "undefined" },
-        .{ "list instanceof CSSRuleList", "true" },
-        .{ "list.length", "0" },
-        .{ "list.item(0)", "null" },
-    }, .{});
 }

src/browser/cssom/CSSStyleDeclaration.zig

@@ -507,117 +507,11 @@ fn lengthOfLongestValue(values: []const []const u8) usize {
 }
 
 const testing = @import("../../testing.zig");
-test "CSSOM.CSSStyleDeclaration" {
+test "Browser: CSS.StyleDeclaration" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{
+    try testing.htmlRunner("cssom/css_style_declaration.html");
-        .html = "",
-    });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let style = document.createElement('div').style", null },
-        .{ "style.cssText = 'color: red; font-size: 12px; margin: 5px !important;'", "color: red; font-size: 12px; margin: 5px !important;" },
-        .{ "style.length", "3" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.getPropertyValue('color')", "red" },
-        .{ "style.getPropertyValue('font-size')", "12px" },
-        .{ "style.getPropertyValue('unknown-property')", "" },
-
-        .{ "style.getPropertyPriority('margin')", "important" },
-        .{ "style.getPropertyPriority('color')", "" },
-        .{ "style.getPropertyPriority('unknown-property')", "" },
-
-        .{ "style.item(0)", "color" },
-        .{ "style.item(1)", "font-size" },
-        .{ "style.item(2)", "margin" },
-        .{ "style.item(3)", "" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.setProperty('background-color', 'blue')", "undefined" },
-        .{ "style.getPropertyValue('background-color')", "blue" },
-        .{ "style.length", "4" },
-
-        .{ "style.setProperty('color', 'green')", "undefined" },
-        .{ "style.getPropertyValue('color')", "green" },
-        .{ "style.length", "4" },
-        .{ "style.color", "green" },
-
-        .{ "style.setProperty('padding', '10px', 'important')", "undefined" },
-        .{ "style.getPropertyValue('padding')", "10px" },
-        .{ "style.getPropertyPriority('padding')", "important" },
-
-        .{ "style.setProperty('border', '1px solid black', 'IMPORTANT')", "undefined" },
-        .{ "style.getPropertyPriority('border')", "important" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.removeProperty('color')", "green" },
-        .{ "style.getPropertyValue('color')", "" },
-        .{ "style.length", "5" },
-
-        .{ "style.removeProperty('unknown-property')", "" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.cssText.includes('font-size: 12px;')", "true" },
-        .{ "style.cssText.includes('margin: 5px !important;')", "true" },
-        .{ "style.cssText.includes('padding: 10px !important;')", "true" },
-        .{ "style.cssText.includes('border: 1px solid black !important;')", "true" },
-
-        .{ "style.cssText = 'color: purple; text-align: center;'", "color: purple; text-align: center;" },
-        .{ "style.length", "2" },
-        .{ "style.getPropertyValue('color')", "purple" },
-        .{ "style.getPropertyValue('text-align')", "center" },
-        .{ "style.getPropertyValue('font-size')", "" },
-
-        .{ "style.setProperty('cont', 'Hello; world!')", "undefined" },
-        .{ "style.getPropertyValue('cont')", "Hello; world!" },
-
-        .{ "style.cssText = 'content: \"Hello; world!\"; background-image: url(\"test.png\");'", "content: \"Hello; world!\"; background-image: url(\"test.png\");" },
-        .{ "style.getPropertyValue('content')", "\"Hello; world!\"" },
-        .{ "style.getPropertyValue('background-image')", "url(\"test.png\")" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.cssFloat", "" },
-        .{ "style.cssFloat = 'left'", "left" },
-        .{ "style.cssFloat", "left" },
-        .{ "style.getPropertyValue('float')", "left" },
-
-        .{ "style.cssFloat = 'right'", "right" },
-        .{ "style.cssFloat", "right" },
-
-        .{ "style.cssFloat = null", "null" },
-        .{ "style.cssFloat", "" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.setProperty('display', '')", "undefined" },
-        .{ "style.getPropertyValue('display')", "" },
-
-        .{ "style.cssText = '  color  :  purple  ;  margin  :  10px  ;  '", "  color  :  purple  ;  margin  :  10px  ;  " },
-        .{ "style.getPropertyValue('color')", "purple" },
-        .{ "style.getPropertyValue('margin')", "10px" },
-
-        .{ "style.setProperty('border-bottom-left-radius', '5px')", "undefined" },
-        .{ "style.getPropertyValue('border-bottom-left-radius')", "5px" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.visibility", "visible" },
-        .{ "style.getPropertyValue('visibility')", "visible" },
-    }, .{});
-
-    try runner.testCases(&.{
-        .{ "style.margin", "10px" },
-        .{ "style.margin = 'auto'", null },
-        .{ "style.margin", "auto" },
-    }, .{});
 }
 
-test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - valid numbers with units" {
+test "Browser: CSS.StyleDeclaration: isNumericWithUnit - valid numbers with units" {
     try testing.expect(isNumericWithUnit("10px"));
     try testing.expect(isNumericWithUnit("3.14em"));
     try testing.expect(isNumericWithUnit("-5rem"));
@@ -626,14 +520,14 @@ test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - valid numbers with units" {
     try testing.expect(isNumericWithUnit(".5vw"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - scientific notation" {
+test "Browser: CSS.StyleDeclaration: isNumericWithUnit - scientific notation" {
     try testing.expect(isNumericWithUnit("1e5px"));
     try testing.expect(isNumericWithUnit("2.5E-3em"));
     try testing.expect(isNumericWithUnit("1e+2rem"));
     try testing.expect(isNumericWithUnit("-3.14e10px"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - edge cases and invalid inputs" {
+test "Browser: CSS.StyleDeclaration: isNumericWithUnit - edge cases and invalid inputs" {
     try testing.expect(!isNumericWithUnit(""));
 
     try testing.expect(!isNumericWithUnit("px"));
@@ -655,7 +549,7 @@ test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - edge cases and invalid inpu
     try testing.expect(isNumericWithUnit("-5"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isHexColor - valid hex colors" {
+test "Browser: CSS.StyleDeclaration: isHexColor - valid hex colors" {
     try testing.expect(isHexColor("#000"));
     try testing.expect(isHexColor("#fff"));
     try testing.expect(isHexColor("#123456"));
@@ -664,7 +558,7 @@ test "CSSOM.CSSStyleDeclaration: isHexColor - valid hex colors" {
     try testing.expect(isHexColor("#12345678"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isHexColor - invalid hex colors" {
+test "Browser: CSS.StyleDeclaration: isHexColor - invalid hex colors" {
     try testing.expect(!isHexColor(""));
     try testing.expect(!isHexColor("#"));
     try testing.expect(!isHexColor("000"));
@@ -677,7 +571,7 @@ test "CSSOM.CSSStyleDeclaration: isHexColor - invalid hex colors" {
     try testing.expect(!isHexColor("#123xyz"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - valid multi-value properties" {
+test "Browser: CSS.StyleDeclaration: isMultiValueProperty - valid multi-value properties" {
     try testing.expect(isMultiValueProperty("10px 20px"));
     try testing.expect(isMultiValueProperty("solid red"));
     try testing.expect(isMultiValueProperty("#fff black"));
@@ -685,7 +579,7 @@ test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - valid multi-value proper
     try testing.expect(isMultiValueProperty("rgb(255,0,0) solid"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - invalid multi-value properties" {
+test "Browser: CSS.StyleDeclaration: isMultiValueProperty - invalid multi-value properties" {
     try testing.expect(!isMultiValueProperty(""));
     try testing.expect(!isMultiValueProperty("10px"));
     try testing.expect(!isMultiValueProperty("invalid unknown"));
@@ -693,7 +587,7 @@ test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - invalid multi-value prop
     try testing.expect(!isMultiValueProperty("   "));
 }
 
-test "CSSOM.CSSStyleDeclaration: isAlreadyQuoted - various quoting scenarios" {
+test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - various quoting scenarios" {
     try testing.expect(isAlreadyQuoted("\"hello\""));
     try testing.expect(isAlreadyQuoted("'world'"));
     try testing.expect(isAlreadyQuoted("\"\""));
@@ -709,7 +603,7 @@ test "CSSOM.CSSStyleDeclaration: isAlreadyQuoted - various quoting scenarios" {
     try testing.expect(!isAlreadyQuoted("hello\""));
 }
 
-test "CSSOM.CSSStyleDeclaration: isValidPropertyName - valid property names" {
+test "Browser: CSS.StyleDeclaration: isValidPropertyName - valid property names" {
     try testing.expect(isValidPropertyName("color"));
     try testing.expect(isValidPropertyName("background-color"));
     try testing.expect(isValidPropertyName("-webkit-transform"));
@@ -719,7 +613,7 @@ test "CSSOM.CSSStyleDeclaration: isValidPropertyName - valid property names" {
     try testing.expect(isValidPropertyName("line-height"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isValidPropertyName - invalid property names" {
+test "Browser: CSS.StyleDeclaration: isValidPropertyName - invalid property names" {
     try testing.expect(!isValidPropertyName(""));
     try testing.expect(!isValidPropertyName("123color"));
     try testing.expect(!isValidPropertyName("color!"));
@@ -729,7 +623,7 @@ test "CSSOM.CSSStyleDeclaration: isValidPropertyName - invalid property names" {
     try testing.expect(!isValidPropertyName("color_test"));
 }
 
-test "CSSOM.CSSStyleDeclaration: extractImportant - with and without !important" {
+test "Browser: CSS.StyleDeclaration: extractImportant - with and without !important" {
     var result = extractImportant("red !important");
     try testing.expect(result.is_important);
     try testing.expectEqual("red", result.value);
@@ -751,7 +645,7 @@ test "CSSOM.CSSStyleDeclaration: extractImportant - with and without !important"
     try testing.expectEqual("important", result.value);
 }
 
-test "CSSOM.CSSStyleDeclaration: needsQuotes - various scenarios" {
+test "Browser: CSS.StyleDeclaration: needsQuotes - various scenarios" {
     try testing.expect(needsQuotes(""));
     try testing.expect(needsQuotes("hello world"));
     try testing.expect(needsQuotes("test;"));
@@ -766,7 +660,7 @@ test "CSSOM.CSSStyleDeclaration: needsQuotes - various scenarios" {
     try testing.expect(!needsQuotes("simple"));
 }
 
-test "CSSOM.CSSStyleDeclaration: escapeCSSValue - escaping various characters" {
+test "Browser: CSS.StyleDeclaration: escapeCSSValue - escaping various characters" {
     const allocator = testing.arena_allocator;
 
     var result = try escapeCSSValue(allocator, "simple");
@@ -785,7 +679,7 @@ test "CSSOM.CSSStyleDeclaration: escapeCSSValue - escaping various characters" {
     try testing.expectEqual("\"test\\\\back\"", result);
 }
 
-test "CSSOM.CSSStyleDeclaration: CSSKeywords.isKnownKeyword - case sensitivity" {
+test "Browser: CSS.StyleDeclaration: CSSKeywords.isKnownKeyword - case sensitivity" {
     try testing.expect(CSSKeywords.isKnownKeyword("red"));
     try testing.expect(CSSKeywords.isKnownKeyword("solid"));
     try testing.expect(CSSKeywords.isKnownKeyword("center"));
@@ -801,7 +695,7 @@ test "CSSOM.CSSStyleDeclaration: CSSKeywords.isKnownKeyword - case sensitivity"
     try testing.expect(!CSSKeywords.isKnownKeyword(""));
 }
 
-test "CSSOM.CSSStyleDeclaration: CSSKeywords.containsSpecialChar - various special characters" {
+test "Browser: CSS.StyleDeclaration: CSSKeywords.containsSpecialChar - various special characters" {
     try testing.expect(CSSKeywords.containsSpecialChar("test\"quote"));
     try testing.expect(CSSKeywords.containsSpecialChar("test'quote"));
     try testing.expect(CSSKeywords.containsSpecialChar("test;end"));
@@ -817,7 +711,7 @@ test "CSSOM.CSSStyleDeclaration: CSSKeywords.containsSpecialChar - various speci
     try testing.expect(!CSSKeywords.containsSpecialChar(""));
 }
 
-test "CSSOM.CSSStyleDeclaration: CSSKeywords.isValidUnit - various units" {
+test "Browser: CSS.StyleDeclaration: CSSKeywords.isValidUnit - various units" {
     try testing.expect(CSSKeywords.isValidUnit("px"));
     try testing.expect(CSSKeywords.isValidUnit("em"));
     try testing.expect(CSSKeywords.isValidUnit("rem"));
@@ -835,7 +729,7 @@ test "CSSOM.CSSStyleDeclaration: CSSKeywords.isValidUnit - various units" {
     try testing.expect(!CSSKeywords.isValidUnit(""));
 }
 
-test "CSSOM.CSSStyleDeclaration: CSSKeywords.startsWithFunction - function detection" {
+test "Browser: CSS.StyleDeclaration: CSSKeywords.startsWithFunction - function detection" {
     try testing.expect(CSSKeywords.startsWithFunction("rgb(255, 0, 0)"));
     try testing.expect(CSSKeywords.startsWithFunction("rgba(255, 0, 0, 0.5)"));
     try testing.expect(CSSKeywords.startsWithFunction("url(image.png)"));
@@ -853,14 +747,14 @@ test "CSSOM.CSSStyleDeclaration: CSSKeywords.startsWithFunction - function detec
     try testing.expect(!CSSKeywords.startsWithFunction("rgb"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isNumericWithUnit - whitespace handling" {
+test "Browser: CSS.StyleDeclaration: isNumericWithUnit - whitespace handling" {
     try testing.expect(!isNumericWithUnit(" 10px"));
     try testing.expect(!isNumericWithUnit("10 px"));
     try testing.expect(!isNumericWithUnit("10px "));
     try testing.expect(!isNumericWithUnit(" 10 px "));
 }
 
-test "CSSOM.CSSStyleDeclaration: extractImportant - whitespace edge cases" {
+test "Browser: CSS.StyleDeclaration: extractImportant - whitespace edge cases" {
     var result = extractImportant("   ");
     try testing.expect(!result.is_important);
     try testing.expectEqual("", result.value);
@@ -874,14 +768,14 @@ test "CSSOM.CSSStyleDeclaration: extractImportant - whitespace edge cases" {
     try testing.expectEqual("red", result.value);
 }
 
-test "CSSOM.CSSStyleDeclaration: isHexColor - mixed case handling" {
+test "Browser: CSS.StyleDeclaration: isHexColor - mixed case handling" {
     try testing.expect(isHexColor("#AbC"));
     try testing.expect(isHexColor("#123aBc"));
     try testing.expect(isHexColor("#FFffFF"));
     try testing.expect(isHexColor("#000FFF"));
 }
 
-test "CSSOM.CSSStyleDeclaration: edge case - very long inputs" {
+test "Browser: CSS.StyleDeclaration: edge case - very long inputs" {
     const long_valid = "a" ** 1000 ++ "px";
     try testing.expect(!isNumericWithUnit(long_valid)); // not numeric
 
@@ -892,7 +786,7 @@ test "CSSOM.CSSStyleDeclaration: edge case - very long inputs" {
     try testing.expect(!isHexColor(long_hex));
 }
 
-test "CSSOM.CSSStyleDeclaration: boundary conditions - numeric parsing" {
+test "Browser: CSS.StyleDeclaration: boundary conditions - numeric parsing" {
     try testing.expect(isNumericWithUnit("0px"));
     try testing.expect(isNumericWithUnit("0.0px"));
     try testing.expect(isNumericWithUnit(".0px"));
@@ -905,7 +799,7 @@ test "CSSOM.CSSStyleDeclaration: boundary conditions - numeric parsing" {
     try testing.expect(isNumericWithUnit("1e-100px"));
 }
 
-test "CSSOM.CSSStyleDeclaration: extractImportant - malformed important declarations" {
+test "Browser: CSS.StyleDeclaration: extractImportant - malformed important declarations" {
     var result = extractImportant("red ! important");
     try testing.expect(!result.is_important);
     try testing.expectEqual("red ! important", result.value);
@@ -927,7 +821,7 @@ test "CSSOM.CSSStyleDeclaration: extractImportant - malformed important declarat
     try testing.expectEqual("red !important", result.value);
 }
 
-test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - complex spacing scenarios" {
+test "Browser: CSS.StyleDeclaration: isMultiValueProperty - complex spacing scenarios" {
     try testing.expect(isMultiValueProperty("10px    20px"));
     try testing.expect(isMultiValueProperty("solid     red"));
 
@@ -939,7 +833,7 @@ test "CSSOM.CSSStyleDeclaration: isMultiValueProperty - complex spacing scenario
     try testing.expect(isMultiValueProperty("10px   20px   30px"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isAlreadyQuoted - edge cases with quotes" {
+test "Browser: CSS.StyleDeclaration: isAlreadyQuoted - edge cases with quotes" {
     try testing.expect(isAlreadyQuoted("\"'hello'\""));
     try testing.expect(isAlreadyQuoted("'\"hello\"'"));
 
@@ -955,7 +849,7 @@ test "CSSOM.CSSStyleDeclaration: isAlreadyQuoted - edge cases with quotes" {
     try testing.expect(isAlreadyQuoted("'b'"));
 }
 
-test "CSSOM.CSSStyleDeclaration: needsQuotes - function and URL edge cases" {
+test "Browser: CSS.StyleDeclaration: needsQuotes - function and URL edge cases" {
     try testing.expect(!needsQuotes("rgb(255, 0, 0)"));
     try testing.expect(!needsQuotes("calc(100% - 20px)"));
 
@@ -966,7 +860,7 @@ test "CSSOM.CSSStyleDeclaration: needsQuotes - function and URL edge cases" {
     try testing.expect(needsQuotes("rgb(255, 0, 0"));
 }
 
-test "CSSOM.CSSStyleDeclaration: escapeCSSValue - control characters and Unicode" {
+test "Browser: CSS.StyleDeclaration: escapeCSSValue - control characters and Unicode" {
     const allocator = testing.arena_allocator;
 
     var result = try escapeCSSValue(allocator, "test\ttab");
@@ -985,7 +879,7 @@ test "CSSOM.CSSStyleDeclaration: escapeCSSValue - control characters and Unicode
     try testing.expectEqual("\"test\\\"quote\\A line\\\\back\"", result);
 }
 
-test "CSSOM.CSSStyleDeclaration: isValidPropertyName - CSS custom properties and vendor prefixes" {
+test "Browser: CSS.StyleDeclaration: isValidPropertyName - CSS custom properties and vendor prefixes" {
     try testing.expect(isValidPropertyName("--custom-color"));
     try testing.expect(isValidPropertyName("--my-variable"));
     try testing.expect(isValidPropertyName("--123"));
@@ -1000,7 +894,7 @@ test "CSSOM.CSSStyleDeclaration: isValidPropertyName - CSS custom properties and
     try testing.expect(!isValidPropertyName("-"));
 }
 
-test "CSSOM.CSSStyleDeclaration: startsWithFunction - case sensitivity and partial matches" {
+test "Browser: CSS.StyleDeclaration: startsWithFunction - case sensitivity and partial matches" {
     try testing.expect(CSSKeywords.startsWithFunction("RGB(255, 0, 0)"));
     try testing.expect(CSSKeywords.startsWithFunction("Rgb(255, 0, 0)"));
     try testing.expect(CSSKeywords.startsWithFunction("URL(image.png)"));
@@ -1017,7 +911,7 @@ test "CSSOM.CSSStyleDeclaration: startsWithFunction - case sensitivity and parti
     try testing.expect(!CSSKeywords.startsWithFunction("123function(test)"));
 }
 
-test "CSSOM.CSSStyleDeclaration: isHexColor - Unicode and invalid characters" {
+test "Browser: CSS.StyleDeclaration: isHexColor - Unicode and invalid characters" {
     try testing.expect(!isHexColor("#ghijkl"));
     try testing.expect(!isHexColor("#12345g"));
     try testing.expect(!isHexColor("#xyz"));
@@ -1028,7 +922,7 @@ test "CSSOM.CSSStyleDeclaration: isHexColor - Unicode and invalid characters" {
     try testing.expect(!isHexColor("#g2345678"));
 }
 
-test "CSSOM.CSSStyleDeclaration: complex integration scenarios" {
+test "Browser: CSS.StyleDeclaration: complex integration scenarios" {
     const allocator = testing.arena_allocator;
 
     try testing.expect(isMultiValueProperty("rgb(255,0,0) url(bg.jpg)"));
@@ -1043,7 +937,7 @@ test "CSSOM.CSSStyleDeclaration: complex integration scenarios" {
     try testing.expectEqual("rgb(255,0,0)", important_result.value);
 }
 
-test "CSSOM.CSSStyleDeclaration: performance edge cases - empty and minimal inputs" {
+test "Browser: CSS.StyleDeclaration: performance edge cases - empty and minimal inputs" {
     try testing.expect(!isNumericWithUnit(""));
     try testing.expect(!isHexColor(""));
     try testing.expect(!isMultiValueProperty(""));

src/browser/cssom/CSSStyleSheet.zig

@@ -92,26 +92,6 @@ pub fn _replaceSync(self: *CSSStyleSheet, text: []const u8) !void {
 }
 
 const testing = @import("../../testing.zig");
-test "Browser.CSS.StyleSheet" {
+test "Browser: CSS.StyleSheet" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    try testing.htmlRunner("cssom/css_stylesheet.html");
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let css = new CSSStyleSheet()", "undefined" },
-        .{ "css instanceof CSSStyleSheet", "true" },
-        .{ "css.cssRules.length", "0" },
-        .{ "css.ownerRule", "null" },
-        .{ "let index1 = css.insertRule('body { color: red; }', 0)", "undefined" },
-        .{ "index1", "0" },
-        .{ "css.cssRules.length", "1" },
-
-        .{
-            \\ let replaced = false;
-            \\ css.replace('body{}').then(() => replaced = true);
-            ,
-            null,
-        },
-        // microtasks are run between each statement
-        .{ "replaced", "true" },
-    }, .{});
 }

src/browser/webcomponents/custom_element_registry.zig

@@ -1,93 +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/>.
-
-// Currently not used. Relying on polyfill instead
-
-const std = @import("std");
-const log = @import("../../log.zig");
-const v8 = @import("v8");
-
-const Env = @import("../env.zig").Env;
-const Page = @import("../page.zig").Page;
-
-const Element = @import("../dom/element.zig").Element;
-
-pub const CustomElementRegistry = struct {
-    // tag_name -> Function
-    lookup: std.StringHashMapUnmanaged(Env.Function) = .empty,
-
-    pub fn _define(self: *CustomElementRegistry, tag_name: []const u8, fun: Env.Function, page: *Page) !void {
-        log.info(.browser, "define custom element", .{ .name = tag_name });
-
-        const arena = page.arena;
-        const gop = try self.lookup.getOrPut(arena, tag_name);
-        if (!gop.found_existing) {
-            errdefer _ = self.lookup.remove(tag_name);
-            const owned_tag_name = try arena.dupe(u8, tag_name);
-            gop.key_ptr.* = owned_tag_name;
-        }
-        gop.value_ptr.* = fun;
-        fun.setName(tag_name);
-    }
-
-    pub fn _get(self: *CustomElementRegistry, name: []const u8) ?Env.Function {
-        return self.lookup.get(name);
-    }
-};
-
-const testing = @import("../../testing.zig");
-
-test "Browser.CustomElementRegistry" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-    try runner.testCases(&.{
-        // Basic registry access
-        .{ "typeof customElements", "object" },
-        .{ "customElements instanceof CustomElementRegistry", "true" },
-
-        // Define a simple custom element
-        .{
-            \\ class MyElement extends HTMLElement {
-            \\   constructor() {
-            \\      super();
-            \\      this.textContent = 'Hello World';
-            \\   }
-            \\ }
-            ,
-            null,
-        },
-        .{ "customElements.define('my-element', MyElement)", "undefined" },
-
-        // Check if element is defined
-        .{ "customElements.get('my-element') === MyElement", "true" },
-        // .{ "customElements.get('non-existent')", "null" },
-
-        // Create element via document.createElement
-        .{ "let el = document.createElement('my-element')", "undefined" },
-        .{ "el instanceof MyElement", "true" },
-        .{ "el instanceof HTMLElement", "true" },
-        .{ "el.tagName", "MY-ELEMENT" },
-        .{ "el.textContent", "Hello World" },
-
-        // Create element via HTML parsing
-        // .{ "document.body.innerHTML = '<my-element></my-element>'", "undefined" },
-        // .{ "let parsed = document.querySelector('my-element')", "undefined" },
-        // .{ "parsed instanceof MyElement", "true" },
-        // .{ "parsed.textContent", "Hello World" },
-    }, .{});
-}

src/browser/xmlserializer/xmlserializer.zig

@@ -45,20 +45,6 @@ pub const XMLSerializer = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.XMLSerializer" {
+test "Browser: XMLSerializer" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
+    try testing.htmlRunner("xmlserializer.html");
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "const s = new XMLSerializer()", "undefined" },
-        .{ "s.serializeToString(document.getElementById('para'))", "<p id=\"para\"> And</p>" },
-    }, .{});
-}
-test "Browser.XMLSerializer with DOCTYPE" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{ .html = "<!DOCTYPE html><html><head></head><body></body></html>" });
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "new XMLSerializer().serializeToString(document.doctype)", "<!DOCTYPE html>" },
-    }, .{});
 }

src/tests/cssom/css_rule_list.html

@@ -0,0 +1,7 @@
+<script src="../testing.js"></script>
+<script id=css_rule_list>
+  let list = new CSSRuleList();
+  testing.expectEqual(true, list instanceof CSSRuleList);
+  testing.expectEqual(0, list.length);
+  testing.expectEqual(null, list.item(0));
+</script>

src/tests/cssom/css_style_declaration.html

@@ -0,0 +1,101 @@
+<script src="../testing.js"></script>
+<script id=css_style_declaration>
+  let style = document.createElement('div').style;
+  style.cssText = 'color: red; font-size: 12px; margin: 5px !important;';
+  testing.expectEqual(3, style.length);
+
+  testing.expectEqua;('red', style.getPropertyValue('color'));
+  testing.expectEqua;('12px', style.getPropertyValue('font-size'));
+  testing.expectEqua;('', style.getPropertyValue('unknown-property'));
+
+  testing.expectEqual('important', style.getPropertyPriority('margin'));
+  testing.expectEqual('', style.getPropertyPriority('color'));
+  testing.expectEqual('', style.getPropertyPriority('unknown-property'));
+
+  testing.expectEqual('color', style.item(0));
+  testing.expectEqual('font-size', style.item(1));
+  testing.expectEqual('margin', style.item(2));
+  testing.expectEqual('', style.item(3));
+
+  style.setProperty('background-color', 'blue');
+  testing.expectEqual('blue', style.getPropertyValue('background-color'));
+  testing.expectEqual(4, style.length);
+
+  style.setProperty('color', 'green');
+  testing.expectEqual('green', style.color);
+  testing.expectEqual('green', style.getPropertyValue('color'));
+  testing.expectEqual(4, style.length);
+
+  style.setProperty('padding', '10px', 'important');
+  testing.expectEqual('10px', style.getPropertyValue('padding'));
+  testing.expectEqual('important', style.getPropertyPriority('padding'));
+
+  style.setProperty('border', '1px solid black', 'IMPORTANT');
+  testing.expectEqual('important', style.getPropertyPriority('border'));
+</script>
+
+<script id=removeProperty>
+  testing.expectEqual('green', style.removeProperty('color'));
+  testing.expectEqual('', style.getPropertyValue('color'));
+  testing.expectEqual(5, style.length)
+
+  testing.expectEqual('', style.removeProperty('unknown-property'));
+</script>
+
+<script id=includes>
+  testing.expectEqual(false, style.cssText.includes('font-size: 10px;'));
+  testing.expectEqual(true, style.cssText.includes('font-size: 12px;'));
+  testing.expectEqual(true, style.cssText.includes('margin: 5px !important;'));
+  testing.expectEqual(true, style.cssText.includes('padding: 10px !important;'));
+  testing.expectEqual(true, style.cssText.includes('border: 1px solid black !important;'));
+</script>
+
+<script id=special_char">
+  style.cssText = 'color: purple; text-align: center;';
+  testing.expectEqual(2, style.length);
+  testing.expectEqual('purple', style.getPropertyValue('color'));
+  testing.expectEqual('center', style.getPropertyValue('text-align'));
+  testing.expectEqual('', style.getPropertyValue('font-size'));
+
+  style.setProperty('cont', 'Hello; world!');
+  testing.expectEqual('Hello; world!', style.getPropertyValue('cont'));
+
+  style.cssText = 'content: "Hello; world!"; background-image: url("test.png");';
+  testing.expectEqual('"Hello; world!"', style.getPropertyValue('content'));
+  testing.expectEqual('url("test.png")', style.getPropertyValue('background-image'));
+</script>
+
+<script id=cssFloat">
+  testing.expectEqual('', style.cssFloat);
+  style.cssFloat = 'left';
+  testing.expectEqual('left', style.cssFloat);
+  testing.expectEqual('left', style.getPropertyValue('float'));
+
+  style.cssFloat = 'right';
+  testing.expectEqual('right', style.cssFloat);
+  testing.expectEqual('right', style.getPropertyValue('float'));
+
+  style.cssFloat = null;
+  testing.expectEqual('', style.cssFloat);
+  testing.expectEqual('', style.getPropertyValue('float'));
+</script>
+
+<script id=misc>
+  style.setProperty('display', '');
+  testing.expectEqual('', style.getPropertyValue('display'));
+
+  style.cssText = '  color  :  purple  ;  margin  :  10px  ;  ';
+  testing.expectEqual('purple', style.getPropertyValue('color'));
+  testing.expectEqual('10px', style.getPropertyValue('margin'));
+
+  style.setProperty('border-bottom-left-radius', '5px');
+  testing.expectEqual('5px', style.getPropertyValue('border-bottom-left-radius'));
+
+  testing.expectEqual('visible', style.visibility);
+  testing.expectEqual('visible', style.getPropertyValue('visibility'));
+
+  testing.expectEqual('10px', style.margin);
+  style.margin = 'auto';
+  testing.expectEqual('auto', style.margin);
+</script>
+

src/tests/cssom/css_stylesheet.html

@@ -0,0 +1,15 @@
+<script src="../testing.js"></script>
+<script id=css_stylesheet>
+  let css = new CSSStyleSheet()
+  testing.expectEqual(true, css instanceof CSSStyleSheet);
+  testing.expectEqual(0, css.cssRules.length);
+  testing.expectEqual(null, css.ownerRule);
+
+  let index1 = css.insertRule('body { color: red; }', 0);
+  testing.expectEqual(0, index1);
+  testing.expectEqual(1, css.cssRules.length);
+
+  let replaced = false;
+  css.replace('body{}').then(() => replaced = true);
+  testing.eventually(() => testing.expectEqual(true, replaced));
+</script>

src/tests/xmlserializer.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<script src="testing.js"></script>
+<p id="para"> And</p>
+<script id=xmlserializer>
+  const s = new XMLSerializer();
+  testing.expectEqual('<p id="para"> And</p>', s.serializeToString($('#para')));
+  testing.expectEqual('<!DOCTYPE html>', s.serializeToString(document.doctype));
+</script>