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" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    defer runner.deinit();
-
-    try runner.testCases(&.{
-        .{ "let list = new CSSRuleList()", "undefined" },
-        .{ "list instanceof CSSRuleList", "true" },
-        .{ "list.length", "0" },
-        .{ "list.item(0)", "null" },
-    }, .{});
+test "Browser: CSS.CSSRuleList" {
+    try testing.htmlRunner("cssom/css_rule_list.html");
 }

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" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    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" },
-    }, .{});
+test "Browser: CSS.StyleSheet" {
+    try testing.htmlRunner("cssom/css_stylesheet.html");
 }

src/browser/xmlserializer/xmlserializer.zig

@@ -45,20 +45,6 @@ pub const XMLSerializer = struct {
 };
 
 const testing = @import("../../testing.zig");
-test "Browser.XMLSerializer" {
-    var runner = try testing.jsRunner(testing.tracking_allocator, .{});
-    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>" },
-    }, .{});
+test "Browser: XMLSerializer" {
+    try testing.htmlRunner("xmlserializer.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>