colorjs.io
Version:
Color space agnostic color manipulation library
199 lines (180 loc) • 4.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamut mapping tests</title>
<link rel="stylesheet" href="https://test.mavo.io/style.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://blissfuljs.com/bliss.shy.js"></script>
<script src="https://test.mavo.io/test.js"></script>
<script src="../color.js" type="module"></script>
<script>
function gamutTest(toSpace, args) {
let td = document.currentScript.parentNode.previousElementSibling;
print(() => {
let color = new Color(td.textContent);
let color2 = color.to(toSpace);
return color2.toString({inGamut: args, precision: null});
});
}
</script>
</head>
<body>
<h1>Gamut mapping Tests</h1>
<p>These tests check how coords are shrunk to smaller gamuts.</p>
<section>
<h1>P3 primaries to sRGB</h1>
<table class="reftest" data-test="fuzzyNumbers1" data-columns="3" data-colors="1,2,3">
<tr title="Using chroma reduction">
<td>color(display-p3 1 0 0)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(98.20411139286732% 21.834053137266363% 0%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 1 0 0)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(100% 0% 0%)
</td>
</tr>
<tr title="Using clipping">
<td>color(display-p3 1 0 0)</td>
<td>
<script>gamutTest("srgb", {method: "clip"});</script>
</td>
<td>
rgb(100% 0% 0%)
</td>
</tr>
<tr title="Using chroma reduction">
<td>color(display-p3 0 1 0)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(0% 99.7921930734509% 0%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 0 1 0)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(0% 100% 0%)
</td>
</tr>
<tr title="Using clipping">
<td>color(display-p3 0 1 0)</td>
<td>
<script>gamutTest("srgb", {method: "clip"});</script>
</td>
<td>
rgb(0% 100% 0%)
</td>
</tr>
<tr title="Using chroma reduction">
<td>color(display-p3 0 0 1)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(0% 0% 100%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 0 0 1)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(0% 0% 100%)
</td>
</tr>
<tr title="Using chroma reduction">
<td>color(display-p3 1 1 0)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(100% 99.45446271521069% 0%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 1 1 0)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(100% 100% 0%)
</td>
</tr>
<tr title="Using chroma reduction">
<td>color(display-p3 0 1 1)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(0% 100% 98.93709142382755%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 0 1 1)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(0% 100% 100%)
</td>
</tr>
<tr title="Using chroma reduction">
<td>color(display-p3 1 0 1)</td>
<td>
<script>gamutTest("srgb");</script>
</td>
<td>
rgb(100% 8.637212218104592% 98.22133121285436%)
</td>
</tr>
<tr title="Using HSL saturation reduction">
<td>color(display-p3 1 0 1)</td>
<td>
<script>gamutTest("srgb", {method: "hsl.saturation"});</script>
</td>
<td>
rgb(100% 0% 100%)
</td>
</tr>
</table>
</section>
<script>
function fuzzyNumberTest(test, ref) {
let decimals = 2;
test = test.textContent;
ref = ref.textContent;
if (test === ref) {
return true;
}
let nRegex = /(-?[\d.]+)/g;
let nRound = n => (+n).toFixed(decimals);
test = test.replace(nRegex, nRound);
ref = ref.replace(nRegex, nRound);
return Test.equals(test.trim(), ref.trim());
}
//
// $.ready().then(() => {
// let lch = [86.61463159131704, 106.45657523304926, 136.0088599937244];
// console.log(Color.convert(lch, "lch", "srgb"));
// console.log(Color.convert(lch, "lch", "srgb", Color.D50));
// console.log(Color.convert(lch, "lch", "srgb", Color.D65));
// });
</script>
<script src="index.js"></script>
</body>
</html>