css-color-4/tests.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Color Conversion Tests</title>
<link rel="stylesheet" href="https://test.mavo.io/style.css" />
<style>
.matrix {
	white-space: pre;
	font-family: Consolas, Monaco, monospace;
}
</style>
<script src="https://blissfuljs.com/bliss.shy.js"></script>
<script src="https://test.mavo.io/test.js"></script>

<!-- <script src="math.js"></script> -->
<script src="conversions.js"></script>
<script src="utilities.js"></script>
<script src="multiply-matrices.js"></script>
<script src="tests.js"></script>
<script>
function reftest(title, conversion, args, result) {
	let ref, test;

	try {
		ref = `<pre>${conversion(...args)}</pre>`;
	}
	catch (e) {
		ref = e;
		throw e;
	}

	document.currentScript.after(
		$.create("tr", {
			title,
			contents: [
				{tag: "td", innerHTML: ref },
				{tag: "td", innerHTML: `<pre>${result}</pre>`}
			]
		})
	);
}
</script>

</head>
<body>

<h1>Color Conversion Tests</h1>

<section>
	<h1>sRGB to LCH</h1>
	<table class="reftest">
		<tbody>
			<script>
				for (let test of tests) {
					reftest(`sRGB ${test.RGB} to LCH`, sRGB_to_LCH, [test.RGB], test.LCH);
				}
			</script>
		</tbody>
	</table>
</section>

<section>
	<h1>sRGB to XYZ</h1>
	<table class="reftest">
		<tbody>
			<script>
				for (let test of tests) {
					reftest(`sRGB ${test.RGB} to XYZ`, a => lin_sRGB_to_XYZ(lin_sRGB(a)), [test.RGB], test.XYZ);
					reftest(`P3 ${test.RGB} to LCH`, P3_to_LCH, [test.RGB], test.P3_to_LCH);
					reftest(`P3 ${test.RGB} to XYZ`, a => lin_P3_to_XYZ(lin_P3(a)), [test.RGB], test.P3_to_XYZ);
				}
			</script>
		</tbody>
	</table>
</section>

<section>
	<h1>P3 to LCH</h1>
	<table class="reftest">
		<tbody>
			<script>
				for (let test of tests) {
					reftest(`P3 ${test.RGB} to LCH`, P3_to_LCH, [test.RGB], test.P3_to_LCH);
				}
			</script>
		</tbody>
	</table>
</section>

<section>
	<h1>P3 to XYZ</h1>
	<table class="reftest">
		<tbody>
			<script>
				for (let test of tests) {
					reftest(`P3 ${test.RGB} to XYZ`, a => lin_P3_to_XYZ(lin_P3(a)), [test.RGB], test.P3_to_XYZ);
				}
			</script>
		</tbody>
	</table>
</section>


</body>
</html>