escoria updateHEADmain

7 files changed, 1004 insertions, 0 deletions

diff --git a/addons/gdUnit4/src/reporters/html/template/.gdignore b/addons/gdUnit4/src/reporters/html/template/.gdignore
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/.gdignore
diff --git a/addons/gdUnit4/src/reporters/html/template/css/breadcrumb.css b/addons/gdUnit4/src/reporters/html/template/css/breadcrumb.css
new file mode 100644
index 0000000..17215ff
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/css/breadcrumb.css
@@ -0,0 +1,66 @@
+.breadcrumb {
+	display: flex;
+	border-radius: 6px;
+	overflow: hidden;
+	height: 45px;
+	z-index: 1;
+	background-color: #9d73eb;
+	margin-top: 0px;
+	margin-bottom: 10px;
+	box-shadow: 0 0 3px black;
+}
+
+.breadcrumb a {
+	position: relative;
+	display: flex;
+	-ms-flex-positive: 1;
+	flex-grow: 1;
+	text-decoration: none;
+	margin: auto;
+	height: 100%;
+	color: white;
+}
+
+.breadcrumb a:first-child {
+	padding-left: 5.2px;
+}
+
+.breadcrumb a:last-child {
+	padding-right: 5.2px;
+}
+
+.breadcrumb a:after {
+	content: "";
+	position: absolute;
+	display: inline-block;
+	width: 45px;
+	height: 45px;
+	top: 0;
+	right: -20px;
+	background-color: #9d73eb;
+	border-top-right-radius: 5px;
+	transform: scale(0.707) rotate(45deg);
+	box-shadow: 2px -2px rgba(0, 0, 0, 0.25);
+	z-index: 1;
+}
+
+.breadcrumb a:last-child:after {
+	content: none;
+}
+
+.breadcrumb a.active,
+.breadcrumb a:hover {
+	background: #b899f2;
+	color: white;
+	text-decoration: underline;
+}
+
+.breadcrumb a.active:after,
+.breadcrumb a:hover:after {
+	background: #b899f2;
+}
+
+.breadcrumb span {
+	margin: inherit;
+	z-index: 2;
+}
diff --git a/addons/gdUnit4/src/reporters/html/template/css/logo.png b/addons/gdUnit4/src/reporters/html/template/css/logo.png
new file mode 100644
index 0000000..12de79f
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/css/logo.png
diff --git a/addons/gdUnit4/src/reporters/html/template/css/styles.css b/addons/gdUnit4/src/reporters/html/template/css/styles.css
new file mode 100644
index 0000000..e92d59b
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/css/styles.css
@@ -0,0 +1,475 @@
+html,
+body {
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+	background-color: white;
+	height: 100%;
+}
+
+main {
+	flex-grow: 1;
+	overflow: auto;
+	margin: 0 10em;
+}
+
+
+header {
+	color: white;
+	padding: 1px;
+	position: relative;
+	background-image: linear-gradient(to bottom right, #8058e3, #9d73eb);
+}
+
+.logo {
+	position: fixed;
+	top: 20px;
+	left: 20px;
+	display: flex;
+	align-items: center;
+	z-index: 1000;
+	filter: grayscale(1);
+	mix-blend-mode: plus-lighter;
+}
+
+.logo img {
+	width: 64px;
+	height: 64px;
+}
+
+.logo span {
+	font-size: 1.2em;
+	color: lightslategray;
+}
+
+.report-container {
+	margin: 0 15em;
+	text-align: center;
+	margin-top: 60px;
+	flex-grow: 0;
+}
+
+h1 {
+	margin: 0 0 20px 0;
+	font-size: 2.5em;
+	font-weight: normal;
+}
+
+.summary {
+	display: inline-flex;
+	justify-content: center;
+	flex-wrap: nowrap;
+	margin-bottom: 20px;
+	align-items: baseline;
+	max-width: 960px;
+}
+
+.summary-item {
+	flex: 1;
+	min-width: 80px;
+}
+
+.label {
+	font-size: 1em;
+	flex-wrap: nowrap;
+}
+
+.value {
+	font-size: 0.9em;
+	display: block;
+	padding-top: 10px;
+	color: lightgray;
+}
+
+.success-rate {
+	padding-left: 40px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.check-icon {
+	background-color: #34c538;
+	color: white;
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.4em;
+}
+
+.rate-text {
+	text-align: center;
+	flex-wrap: nowrap;
+}
+
+.percentage {
+	font-size: 1.2em;
+	font-weight: bold;
+}
+
+
+nav {
+	padding: 20px 0px;
+	font-family: monospace;
+}
+
+nav ul {
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: flex-start;
+	border-bottom: 1px solid lightgray;
+}
+
+nav li {
+	cursor: pointer;
+	padding: 5px 20px;
+	font-size: 1.1em;
+	color: lightslategray;
+}
+
+nav li.active {
+	color: darkslategray;
+	border-bottom: 1px solid darkslategray;
+	font-weight: bold;
+}
+
+div#content {
+	height: calc(100vh - 400px);
+}
+
+
+table {
+	width: 100%;
+	height: 100%;
+	border-collapse: collapse;
+	overflow: hidden;
+}
+
+thead th {
+	position: sticky;
+	top: 0;
+	background-color: white;
+	z-index: 1;
+	border-bottom: 2px solid #ddd;
+}
+
+tbody {
+	display: block;
+	/* Limit the height of the table body */
+	max-height: calc(100vh - 400px);
+	/* Enable scrolling on the table body */
+	overflow-y: auto;
+}
+
+thead,
+tbody tr {
+	display: table;
+	width: 100%;
+	table-layout: fixed;
+}
+
+tbody td {
+	overflow: hidden;
+}
+
+/* Ensure scrollbar visibility */
+tbody::-webkit-scrollbar {
+	height: 4px;
+	width: 14px;
+}
+
+tbody::-webkit-scrollbar-thumb {
+	background-color: #aaa6a6;
+	border-radius: 4px;
+}
+
+tbody::-webkit-scrollbar-track {
+	background-color: #f1f1f1;
+}
+
+th,
+td {
+	font-size: .9em;
+	padding: 5px 0px;
+	border-bottom: 1px solid #eee;
+	color: lightslategrey;
+	text-align: left;
+	text-wrap: nowrap;
+	/* Default max and min width for all columns */
+	max-width: 150px;
+	min-width: 80px;
+	width: 80px;
+}
+
+th {
+	font-size: 1em;
+	font-weight: normal;
+	padding-top: 20px;
+	color: gray;
+	text-wrap: nowrap;
+}
+
+.tab-report {
+	display: grid;
+	grid-template-columns: 100%;
+	margin-bottom: 20px;
+}
+
+.tab-report-grid {
+	display: grid;
+	grid-template-columns: 70% 30%;
+	margin-bottom: 20px;
+}
+
+
+/* Specific styling for the first column (Testcase) */
+th:first-child,
+td:first-child {
+	padding-left: 5px;
+	text-align: left;
+	/* Max width for the first column */
+	min-width: 249px;
+	width: 250px;
+	/* Enable scrollbar if content exceeds max-width */
+	white-space: nowrap;
+	overflow: auto;
+}
+
+/* Scrollbar styles for first column */
+td:first-child {
+	overflow-x: auto;
+	text-overflow: initial;
+}
+
+/* Scrollbar appearance */
+td:first-child::-webkit-scrollbar {
+	height: 6px;
+}
+
+td:first-child::-webkit-scrollbar-thumb {
+	background-color: #888;
+	border-radius: 10px;
+}
+
+td:first-child::-webkit-scrollbar-track {
+	background-color: #f1f1f1;
+}
+
+/* Max width for Result column */
+th:nth-child(2),
+td:nth-child(2) {
+	max-width: 140px;
+	min-width: 140px;
+	width: 140px;
+}
+
+/* Max width for Quick Results column */
+th:nth-child(9),
+td:nth-child(9) {
+	max-width: 140px;
+	min-width: 140px;
+	width: 140px;
+	padding-right: 10px;
+}
+
+/* Background color for alternating groups */
+.group-bg-1 {
+	background-color: #f1f1f1;
+}
+
+.group-bg-2 {
+	background-color: #e0e0e0;
+}
+
+.grid-item {
+	overflow: auto;
+	padding-left: 20px;
+	color: lightslategrey;
+	max-height: calc(100vh - 350px);
+}
+
+div.tab td.report-column,
+th.report-column {
+	display: none;
+}
+
+/* Result status styles */
+.status {
+	padding: 2px 40px;
+	border-radius: 6px;
+	color: black;
+	width: 40px;
+	display: flex;
+	align-content: center;
+	align-items: center;
+}
+
+.status-bar {
+	display: flex;
+	border-radius: 8px;
+	overflow: hidden;
+	height: 20px;
+	flex-wrap: nowrap;
+	justify-content: space-evenly;
+}
+
+.status-bar-column {
+	margin: -2px;
+	color: black;
+	display: flex;
+	align-content: center;
+	align-items: center;
+	transition: width 0.3s ease;
+}
+
+.status-skipped {
+	background-color: #888888;
+}
+
+.status-passed {
+	background-color: #63bb38;
+}
+
+.status-error {
+	background-color: #fd1100;
+}
+
+.status-failed {
+	background-color: #ed594f;
+}
+
+.status-flaky {
+	background-color: #1d9a1f;
+}
+
+.status-warning {
+	background-color: #fdda3f;
+}
+
+div.tab tr:hover {
+	background-color: #d9e7fa;
+	box-shadow: 0 0 5px black;
+}
+
+div.tab tr.selected {
+	background-color: #d9e7fa;
+}
+
+div.report-column {
+	margin-top: 10px;
+	width: 100%;
+	text-align: left;
+}
+
+.logging-container {
+	width: 100%;
+	height: 100%;
+}
+
+div.godot-report-frame {
+	margin: 10px;
+	font-family: monospace;
+	height: 100%;
+	background-color: #eee;
+}
+
+div.include-footer {
+	position: fixed;
+	bottom: 0;
+	width: 100%;
+	display: flex;
+}
+
+footer {
+	position: static;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	white-space: nowrap;
+	color: lightgray;
+	font-size: 12px;
+	background-image: linear-gradient(to bottom right, #8058e3, #9d73eb);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+footer p {
+	padding-left: 10em;
+}
+
+footer .status-legend {
+	display: flex;
+	gap: 15px;
+	width: 500px;
+}
+
+footer a {
+	color: lightgray;
+}
+
+footer a:hover {
+	color: whitesmoke;
+}
+
+footer a:visited {
+	color: whitesmoke;
+}
+
+.status-legend-item {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.status-box {
+	width: 15px;
+	height: 15px;
+	border-radius: 3px;
+	display: inline-block;
+}
+
+/* Normal link */
+a {
+	color: lightslategrey;
+}
+
+/* Link when hovered */
+a:hover {
+	color: #9d73eb;
+}
+
+/* Visited link */
+a:visited {
+	color: #8058e3;
+}
+
+/* Active link (while being clicked) */
+a:active {
+	color: #8058e3;
+	/* Custom color when link is clicked */
+}
+
+
+@media (max-width: 1024px) {
+	.summary {
+		flex-direction: column;
+	}
+
+	nav ul {
+		flex-wrap: wrap;
+	}
+
+	nav li {
+		margin-right: 10px;
+		margin-bottom: 5px;
+	}
+}
diff --git a/addons/gdUnit4/src/reporters/html/template/folder_report.html b/addons/gdUnit4/src/reporters/html/template/folder_report.html
new file mode 100644
index 0000000..2cdca67
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/folder_report.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta http-equiv="x-ua-compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GdUnit4 Testsuite</title>
+	<link rel="stylesheet" href="../css/styles.css">
+	<link href="../css/breadcrumb.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+	<header>
+		<div class="logo">
+			<img src="../css/logo.png" alt="GdUnit4 Logo">
+			<span>GdUnit4</span>
+		</div>
+		<div class="report-container">
+			<h1>Report by Paths</h1>
+			<div>
+				<span class="label">${resource_path}</span>
+			</div>
+			<div class="summary">
+				<div class="summary-item">
+					<span class="label">TestSuites</span>
+					<span class="value">${suite_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Tests</span>
+					<span class="value">${test_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Skipped</span>
+					<span class="value">${skipped_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Flaky</span>
+					<span class="value">${flaky_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Failures</span>
+					<span class="value">${failure_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Orphans</span>
+					<span class="value">${orphan_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Duration</span>
+					<span class="value">${duration}</span>
+				</div>
+				<div class="success-rate">
+					<div class="check-icon status-${report_state}">✓</div>
+					<div class="rate-text">
+						<span class="label">Success Rate</span>
+						<span class="value">${success_percent}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="breadcrumb">
+			<a href="../index.html"><span>All</span></a>
+			<a href="${breadcrumb_path_link}"><span>${path}</span></a>
+			<a class="active" href="#"><span>${testsuite_name}</span></a>
+		</div>
+	</header>
+
+	<main>
+		<div>
+			<div class="tab-report">
+				<div class="grid-item tab">
+					<table id="report-table">
+						<thead>
+							<tr>
+								<th>TestSuites</th>
+								<th>Result</th>
+								<th>Tests</th>
+								<th>Skipped</th>
+								<th>Flaky</th>
+								<th>Failures</th>
+								<th>Orphans</th>
+								<th>Duration</th>
+								<th>Success rate</th>
+							</tr>
+						</thead>
+						<tbody>
+							${report_table_testsuites}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</main>
+
+	<footer>
+		<p>Generated by <a href="https://github.com/MikeSchulze/gdUnit4">GdUnit4</a> at ${buid_date}</p>
+		<div class="status-legend">
+			<span class="status-legend-item">
+				<span class="status-box status-skipped"></span> Skipped
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-passed"></span> Passed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-flaky"></span> Flaky
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-warning"></span> Warning
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-failed"></span> Failed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-error"></span> Error
+			</span>
+		</div>
+	</footer>
+</body>
+
+</html>
diff --git a/addons/gdUnit4/src/reporters/html/template/index.html b/addons/gdUnit4/src/reporters/html/template/index.html
new file mode 100644
index 0000000..342c8f2
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GdUnit4 Report</title>
+	<link rel="stylesheet" href="css/styles.css">
+</head>
+
+<body>
+	<header>
+		<div class="logo">
+			<img src="css/logo.png" alt="GdUnit4 Logo">
+			<span>GdUnit4</span>
+		</div>
+		<div class="report-container">
+			<h1>Summary Report</h1>
+			<div class="summary">
+				<div class="summary-item">
+					<span class="label">Test Suites</span>
+					<span class="value">${suite_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Tests</span>
+					<span class="value">${test_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Skipped</span>
+					<span class="value">${skipped_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Flaky</span>
+					<span class="value">${flaky_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Failures</span>
+					<span class="value">${failure_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Orphans</span>
+					<span class="value">${orphan_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Duration</span>
+					<span class="value">${duration}</span>
+				</div>
+				<div class="success-rate">
+					<div class="check-icon status-${report_state}">✓</div>
+					<div class="rate-text">
+						<span class="label">Success Rate</span>
+						<span class="value">${success_percent}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</header>
+	<main>
+		<nav>
+			<ul>
+				<li class="active" data-page="test-suites">TEST SUITES</li>
+				<li data-page="paths">PATHS</li>
+				<li data-page="logging">LOGGING</li>
+			</ul>
+		</nav>
+		<div id="content">
+			<!-- Content will be loaded here based on selected page -->
+		</div>
+	</main>
+
+	<footer>
+		<p>Generated by <a href="https://github.com/MikeSchulze/gdUnit4">GdUnit4</a> at ${buid_date}</p>
+		<div class="status-legend">
+			<span class="status-legend-item">
+				<span class="status-box status-skipped"></span> Skipped
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-passed"></span> Passed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-flaky"></span> Flaky
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-warning"></span> Warning
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-failed"></span> Failed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-error"></span> Error
+			</span>
+		</div>
+	</footer>
+
+	<script>
+		// Simple JavaScript to handle page switching
+		document.querySelectorAll('nav li').forEach(item => {
+			item.addEventListener('click', function () {
+				document.querySelectorAll('nav li').forEach(li => li.classList.remove('active'));
+				this.classList.add('active');
+				loadPage(this.getAttribute('data-page'));
+			});
+		});
+
+		function loadPage(page) {
+			if (page === 'test-suites') {
+				document.getElementById('content').innerHTML = `
+					<div class="grid-item tab">
+						<table>
+							<thead>
+								<tr>
+									<th>Test Suites</th>
+									<th>State</th>
+									<th>Tests</th>
+									<th>Skipped</th>
+									<th>Flaky</th>
+									<th>Failures</th>
+									<th>Orphans</th>
+									<th>Duration</th>
+									<th>Quick State</th>
+								</tr>
+							</thead>
+							<tbody>
+								${report_table_testsuites}
+							</tbody>
+						</table>
+					</div>`
+			} else if (page === 'paths') {
+				document.getElementById('content').innerHTML = `
+					<div class="grid-item tab">
+						<table>
+							<thead>
+								<tr>
+									<th>Paths</th>
+									<th>State</th>
+									<th>Tests</th>
+									<th>Skipped</th>
+									<th>Flaky</th>
+									<th>Failures</th>
+									<th>Orphans</th>
+									<th>Duration</th>
+									<th>Quick State</th>
+								</tr>
+							</thead>
+							<tbody>
+								${report_table_paths}
+							</tbody>
+						</table>
+					</div>`
+			} else if (page === 'logging') {
+				document.getElementById('content').innerHTML = `
+					<h3>${godot_log_file}</h3>
+					<div class="logging-container">
+						<iframe id="logging_content" src="${log_report}"  frameborder="0" height="100%" width="100%"></iframe>
+					</div>`
+			}
+		}
+
+		// Load default page
+		loadPage('test-suites');
+	</script>
+</body>
+
+</html>
diff --git a/addons/gdUnit4/src/reporters/html/template/suite_report.html b/addons/gdUnit4/src/reporters/html/template/suite_report.html
new file mode 100644
index 0000000..4746841
--- /dev/null
+++ b/addons/gdUnit4/src/reporters/html/template/suite_report.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta http-equiv="x-ua-compatible" content="IE=edge" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GdUnit4 Testsuite</title>
+	<link rel="stylesheet" href="../css/styles.css">
+	<link href="../css/breadcrumb.css" rel="stylesheet" type="text/css" />
+
+	<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
+	<script>
+		$(document).ready(function () {
+			var report_view = $('#report_area').find('.report-column')
+
+			$('#report-table tr').click(function () {
+				var report = $(this).find('.report-column').html();
+				report_view.html(report)
+				$('.selected').removeClass('selected');
+				$(this).addClass('selected');
+			});
+		});
+	</script>
+</head>
+
+<body>
+	<header>
+		<div class="logo">
+			<img src="../css/logo.png" alt="GdUnit4 Logo">
+			<span>GdUnit4</span>
+		</div>
+		<div class="report-container">
+			<h1>Testsuite Report</h1>
+			<div>
+				<span class="label">${resource_path}</span>
+			</div>
+			<div class="summary">
+				<div class="summary-item">
+					<span class="label">Tests</span>
+					<span class="value">${test_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Skipped</span>
+					<span class="value">${skipped_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Flaky</span>
+					<span class="value">${flaky_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Failures</span>
+					<span class="value">${failure_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Orphans</span>
+					<span class="value">${orphan_count}</span>
+				</div>
+				<div class="summary-item">
+					<span class="label">Duration</span>
+					<span class="value">${duration}</span>
+				</div>
+				<div class="success-rate">
+					<div class="check-icon status-${report_state}">✓</div>
+					<div class="rate-text">
+						<span class="label">Success Rate</span>
+						<span class="value">${success_percent}</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="breadcrumb">
+			<a href="../index.html"><span>All</span></a>
+			<a href="${breadcrumb_path_link}"><span>${path}</span></a>
+			<a class="active" href="#"><span>${testsuite_name}</span></a>
+		</div>
+	</header>
+
+	<main>
+		<div class="tab-report-grid">
+			<div class="grid-item tab">
+				<table id="report-table">
+					<thead>
+						<tr>
+							<th>Testcase</th>
+							<th>Result</th>
+							<th>Skipped</th>
+							<th>Orphans</th>
+							<th>Duration</th>
+							<th class="report-column">Report</th>
+						</tr>
+					</thead>
+					<tbody>
+						${report_table_tests}
+					</tbody>
+				</table>
+			</div>
+			<div id="report_area" class="grid-item tab">
+				<h4>Failure Report</h4>
+				<div class="report-column"></div>
+			</div>
+		</div>
+	</main>
+
+	<footer>
+		<p>Generated by <a href="https://github.com/MikeSchulze/gdUnit4">GdUnit4</a> at ${buid_date}</p>
+		<div class="status-legend">
+			<span class="status-legend-item">
+				<span class="status-box status-skipped"></span> Skipped
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-passed"></span> Passed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-flaky"></span> Flaky
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-warning"></span> Warning
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-failed"></span> Failed
+			</span>
+			<span class="status-legend-item">
+				<span class="status-box status-error"></span> Error
+			</span>
+		</div>
+	</footer>
+</body>
+
+<script>
+	function groupTableRows() {
+		const table = document.getElementById('report-table');
+		const rows = table.querySelectorAll('tbody tr');
+
+		let previousTestCase = '';
+		let groupStartIndex = 0;
+		let groupColorToggle = true; // Toggle between two colors
+
+		rows.forEach((row, index) => {
+			const testCaseName = row.cells[0].textContent.trim();
+
+			if (testCaseName !== previousTestCase) {
+				// Close the previous group
+				if (index > 0 && groupStartIndex !== index - 1) {
+					// Apply background color to the group
+					const groupClass = groupColorToggle ? 'group-bg-1' : 'group-bg-2';
+					for (let i = groupStartIndex; i <= index - 1; i++) {
+						rows[i].classList.add(groupClass);
+					}
+
+					// Toggle background color for the next group
+					groupColorToggle = !groupColorToggle;
+				}
+
+				// Start a new group
+				groupStartIndex = index;
+			}
+
+			previousTestCase = testCaseName;
+		});
+
+		// Handle the last group
+		if (groupStartIndex !== rows.length - 1) {
+			// Apply background color to the last group
+			const groupClass = groupColorToggle ? 'group-bg-1' : 'group-bg-2';
+			for (let i = groupStartIndex; i < rows.length; i++) {
+				rows[i].classList.add(groupClass);
+			}
+		}
+	}
+
+	// Call the function to group table rows after the DOM loads
+	document.addEventListener('DOMContentLoaded', groupTableRows);
+</script>
+
+</html>