colorjs.io
Version:
Color space agnostic color manipulation library
177 lines (159 loc) • 4.58 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color parse 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 parse Tests</h1>
<p>These tests parse different color formats and compare the result as JSON.</p>
<section>
<h1>sRGB colors</h1>
<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
<tr title="Color keyword">
<td>blue</td>
<td>{"spaceId":"srgb","coords":[0,0,1],"alpha":1}</td>
</tr>
<tr>
<td>transparent</td>
<td>{"spaceId":"srgb","coords":[0,0,0],"alpha":0}</td>
</tr>
<tr title="#rrggbb">
<td>#ff0066</td>
<td>{"spaceId":"srgb","coords":[1,0,0.4],"alpha":1}</td>
</tr>
<tr title="#rgb">
<td>#f06</td>
<td>{"spaceId":"srgb","coords":[1,0,0.4],"alpha":1}</td>
</tr>
<tr title="#rrggbbaa">
<td>#ff006688</td>
<td>{"spaceId":"srgb","coords":[1,0,0.4],"alpha":0.5333333333333333}</td>
</tr>
<tr title="#rgba">
<td>#f068</td>
<td>{"spaceId":"srgb","coords":[1,0,0.4],"alpha":0.5333333333333333}</td>
</tr>
<tr title="rgba(% % % / a)">
<td>rgba(0% 50% 200% / 0.5)</td>
<td>{"spaceId":"srgb","coords":[0,0.5,2],"alpha":0.5}</td>
</tr>
<tr title="rgba(n, n, n, a)">
<td>rgba(0, 127.5, 300, 0.5)</td>
<td>{"spaceId":"srgb","coords":[0,0.5,1.1764705882352942],"alpha":0.5}</td>
</tr>
</table>
</section>
<section>
<h1>Lab and LCH colors</h1>
<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
<tr>
<td>lab(100% 0 0)</td>
<td>{"spaceId":"lab","coords":[100,0,0],"alpha":1}</td>
</tr>
<tr title="case">
<td>Lab(100% 0 0)</td>
<td>{"spaceId":"lab","coords":[100,0,0],"alpha":1}</td>
</tr>
<tr>
<td>lab(100 -50 50)</td>
<td>{"spaceId":"lab","coords":[100,-50,50],"alpha":1}</td>
</tr>
<tr>
<td>lch(100% 0 0)</td>
<td>{"spaceId":"lch","coords":[100,0,0],"alpha":1}</td>
</tr>
<tr>
<td>lch(100 50 50)</td>
<td>{"spaceId":"lch","coords":[100,50,50],"alpha":1}</td>
</tr>
<tr title="Hue over 360">
<td>lch(100 50 450)</td>
<td>{"spaceId":"lch","coords":[100,50,450],"alpha":1}</td>
</tr>
</table>
</section>
<section>
<h1>color()</h1>
<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
<tr>
<td>color(display-p3 0 .5 1)</td>
<td>{"spaceId":"p3","coords":[0,0.5,1],"alpha":1}</td>
</tr>
<tr>
<td>color(a98-rgb 0 .5 1)</td>
<td>{"spaceId":"a98rgb","coords":[0,0.5,1],"alpha":1}</td>
</tr>
<tr title="P3 lime with transparency">
<td>color(display-p3 0 1 0 / .5)</td>
<td>{"spaceId":"p3","coords":[0,1,0],"alpha":0.5}</td>
</tr>
<tr title="P3 no arguments">
<td>color(display-p3)</td>
<td>{"spaceId":"p3","coords":[0,0,0],"alpha":1}</td>
</tr>
</tr>
<tr title="P3 no arguments with transparency">
<td>color(display-p3 / .5)</td>
<td>{"spaceId":"p3","coords":[0,0,0],"alpha":0.5}</td>
</tr>
</tr>
<tr title="P3 fewer arguments">
<td>color(display-p3 1)</td>
<td>{"spaceId":"p3","coords":[1,0,0],"alpha":1}</td>
</tr>
</tr>
<tr title="P3 fewer arguments">
<td>color(display-p3 1 / .5)</td>
<td>{"spaceId":"p3","coords":[1,0,0],"alpha":0.5}</td>
</tr>
</table>
</section>
<section>
<h1>hsl()</h1>
<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
<tr title="hsl(), commas">
<td>hsl(180, 50%, 50%)</td>
<td>{"spaceId":"hsl","coords":[180,50,50],"alpha":1}</td>
</tr>
<tr title="hsl(), negative hue">
<td>hsl(-180, 50%, 50%)</td>
<td>{"spaceId":"hsl","coords":[-180,50,50],"alpha":1}</td>
</tr>
<tr title="hsl(), hue > 360">
<td>hsl(900, 50%, 50%)</td>
<td>{"spaceId":"hsl","coords":[900,50,50],"alpha":1}</td>
</tr>
<tr title="hsla(), degrees for hue, spaces and slash">
<td>hsl(0deg 0% 0% / .5)</td>
<td>{"spaceId":"hsl","coords":[0,0,0],"alpha":0.5}</td>
</tr>
</table>
</section>
<script>
function colorParse(test, result, expected) {
var err;
try {
var color = new Color(test.textContent);
result.textContent = JSON.stringify(color);
result.color = color;
if (Test.equals(result.textContent, expected.textContent)) {
return true;
}
}
catch(e) {
result.textContent = result.color = err = e;
}
return err || false;
}
</script>
<script src="index.js"></script>
</body>
</html>