style-observer/tests/index.html at main · LeaVerou/style-observer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Tests</title>
	<link rel="shortcut icon" href="/assets/logo.svg" />
	<link rel="stylesheet" href="https://htest.dev/htest.css" crossorigin />
	<script src="https://htest.dev/htest.js" type="module" crossorigin></script>
	<script>
		let params = new URLSearchParams(location.search);
		let test_url = params.get("test");

		if (test_url) {
			let test_url_ext = test_url.match(/\.(\w+)$/)?.[1];

			if (!test_url_ext) {
				test_url += ".js";
			}

			if (/^\w+\.\w+$/.test(test_url)) {
				test_url = `./${test_url}`;
			}

			Promise.all([
				import("https://htest.dev/src/render.js").then(m => m.default),
				import(test_url).then(m => m.default),
			]).then(([render, test]) => render(test));
		}
		else if (parent === self) {
			document.documentElement.classList.add("index");

			// Index of all tests
			fetch("./index.json").then(r => r.json()).then(index => {
				index = Object.entries(index).map(([id, name]) => ({ id, name }));

				document.body.innerHTML = `
				<section>
					<h1>Tests</h1>

					<ul id="tests">
						${index.map(test => `
							<li>
								<a href="?test=${test.id}">${test.name}</a>
							</li>
						`).join("\n")}
					</ul>
				</section>
				`;
			});
		}
	</script>
</head>

<body>
<div id="declarative-host">
	<template shadowrootmode="open"></template>
</div>
<registered-component></registered-component>
</body>

</html>