colorjs.io
Version:
Color space agnostic color manipulation library
123 lines (115 loc) • 2.66 kB
HTML
<html lang="en" style="--foo: lime">
<head>
<meta charset="UTF-8">
<title>Constructor tests</title>
<link rel="stylesheet" href="https://test.mavo.io/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 src="../src/spaces/rec2100.js" type="module"></script>
</head>
<body>
<h1 id="testElement" style="--foo: hsl(10, 50%, 50%)">Constructor Tests</h1>
<p>These tests check that the various constructor signatures work.</p>
<section>
<h1>Basic constructors</h1>
<table class="reftest" data-test="fuzzyNumbers">
<tr title="new Color(spaceId, coords)">
<td>
<script>
print(() => {
var color = new Color("P3", [0, 1, 0]);
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "p3", "coords": [ 0, 1, 0 ], "alpha": 1 }
</td>
</tr>
<tr title="new Color(coords)">
<td>
<script>
print(() => {
var color = new Color([0, 1, 0]);
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "srgb", "coords": [ 0, 1, 0 ], "alpha": 1 }
</td>
</tr>
<tr title="new Color(string)">
<td>
<script>
print(() => {
var color = new Color("red");
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "srgb", "coords": [ 1, 0, 0 ], "alpha": 1 }
</td>
</tr>
<tr title="new Color('--foo')">
<td>
<script>
print(() => {
var color = new Color("--foo");
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "srgb", "coords": [ 0, 1, 0 ], "alpha": 1 }
</td>
</tr>
<tr title="new Color('--foo', root)">
<td>
<script>
print(() => {
var color = new Color("--foo", testElement);
return color.toJSON();
});
</script>
</td>
<td>
<script>
print(() => {
return new Color("hsl(10, 50%, 50%)").toJSON();
});
</script>
</td>
</tr>
<tr title="new Color({spaceId, coords})">
<td>
<script>
print(() => {
var color = new Color({spaceId: "p3", coords: [0, 1, 0]});
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "p3", "coords": [ 0, 1, 0 ], "alpha": 1 }
</td>
</tr>
<tr title="new Color(spaceId, coords)">
<td>
<script>
print(() => {
var color = new Color("rec2100pq", [0.34, 0.34, 0.34]);
return color.toJSON();
});
</script>
</td>
<td>
{ "spaceId": "rec2100pq", "coords": [ 0.34, 0.34, 0.34 ], "alpha": 1 }
</td>
</tr>
</table>
</body>
</html>