colorjs.io
Version:
Color space agnostic color manipulation library
165 lines (155 loc) • 3.33 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color modification 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>
</script>
</head>
<body>
<h1>Color modification Tests</h1>
<p>These tests modify one or more coordinates and check the result.</p>
<section>
<h1>sRGB to LCH</h1>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="color.chroma = 13">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.chroma = 13;
return color.chroma
});
</script>
</td>
<td>13</td>
</tr>
<tr title="color.lch.chroma = 13">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.lch.chroma = 13;
return color.chroma
});
</script>
</td>
<td>13</td>
</tr>
<tr title="color.lch[1] = 13">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.lch[1] = 13;
return color.chroma
});
</script>
</td>
<td>13</td>
</tr>
<tr title="color.set('chroma', 13)">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set('chroma', 13)
return color.chroma
});
</script>
</td>
<td>13</td>
</tr>
<tr title="color.set({chroma: 13, lightness: 40})">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set({chroma: 13, lightness: 40})
return color.chroma + ' ' + color.lightness
});
</script>
</td>
<td>13 40</td>
</tr>
<tr title="color.set('coords.0', 1)">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set('coords.0', 1);
return color.coords[0]
});
</script>
</td>
<td>1</td>
</tr>
<tr title="color.set('lch.1', 13)">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set('lch.1', 13);
return color.chroma;
});
</script>
</td>
<td>13</td>
</tr>
<tr title="color.set('lch.chroma', 13)">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set('lch.chroma', 13);
return color.chroma;
});
</script>
</td>
<td>13</td>
</tr>
<tr title="chroma *= 1.2">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.chroma *= 1.2;
return color.chroma;
});
</script>
</td>
<td>13.480970445148008</td>
</tr>
<tr title='color.set("chroma", c => c * 1.2)'>
<td>
<script>
print(() => {
var color = new Color("slategray");
color.set("chroma", c => c * 1.2);
return color.chroma;
});
</script>
</td>
<td>13.480970445148008</td>
</tr>
<tr title="chroma *= 1.25 then print lch">
<td>
<script>
print(() => {
var color = new Color("slategray");
color.chroma *= 1.25;
return color.lch;
});
</script>
</td>
<td>52.69726799102946 14.04267594002497 253.0004426214531</td>
</tr>
</table>
</section>
</body>
</html>