[spaces] Add percentages to color functions (#314)

* [spaces] Add percentages to oklab and oklch. Addresses #226 * [spaces] Handle percents on lab, lab-d65, lch. Add tests to check for percentage handling on other supported spaces
color-js · May 29, 2023 · 1997013 · 1997013
1 parent cbdf2a1
commit 1997013
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 7 deletions.
diff --git a/src/spaces/lab-d65.js b/src/spaces/lab-d65.js
@@ -68,7 +68,7 @@ export default new ColorSpace({
 
 	formats: {
 		"lab-d65": {
-			coords: ["<number> | <percentage>", "<number>", "<number>"],
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
 		}
 	}
 });
diff --git a/src/spaces/lab.js b/src/spaces/lab.js
@@ -68,7 +68,7 @@ export default new ColorSpace({
 
 	formats: {
 		"lab": {
-			coords: ["<number> | <percentage>", "<number>", "<number>"],
+			coords: ["<number> | <percentage>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
 		}
 	}
 });
diff --git a/src/spaces/lch.js b/src/spaces/lch.js
@@ -61,7 +61,7 @@ export default new ColorSpace({
 
 	formats: {
 		"lch": {
-			coords: ["<number> | <percentage>", "<number>", "<number> | <angle>"],
+			coords: ["<number> | <percentage>", "<number> | <percentage>", "<number> | <angle>"],
 		}
 	}
 });
diff --git a/src/spaces/oklab.js b/src/spaces/oklab.js
@@ -68,7 +68,7 @@ export default new ColorSpace({
 
 	formats: {
 		"oklab": {
-			coords: ["<number> | <percentage>", "<number>", "<number>"],
+			coords: ["<percentage> | <number>", "<number> | <percentage>[-1,1]", "<number> | <percentage>[-1,1]"],
 		}
 	}
 });
diff --git a/src/spaces/oklch.js b/src/spaces/oklch.js
@@ -62,7 +62,7 @@ export default new ColorSpace({
 
 	formats: {
 		"oklch": {
-			coords: ["<number> | <percentage>", "<number>", "<number> | <angle>"],
+			coords: ["<number> | <percentage>", "<number> | <percentage>[0,1]", "<number> | <angle>"],
 		}
 	}
 });
diff --git a/tests/parse.html b/tests/parse.html
@@ -81,6 +81,14 @@ <h1>Lab and LCH colors</h1>
 			<td>lab(100 -50 50)</td>
 			<td>{"spaceId":"lab","coords":[100,-50,50],"alpha":1}</td>
 		</tr>
+		<tr title="lab percentage">
+			<td>lab(50% 25% -25% / 50%)</td>
+			<td>{"spaceId":"lab","coords":[50,31.25,-31.25],"alpha":0.5}</td>
+		</tr>
+		<tr title="lab transparency">
+			<td>lab(100 -50 5 / .5)</td>
+			<td>{"spaceId":"lab","coords":[100,-50,5],"alpha":0.5}</td>
+		</tr>
 		<tr>
 			<td>lch(100% 0 0)</td>
 			<td>{"spaceId":"lch","coords":[100,0,0],"alpha":1}</td>
@@ -89,13 +97,84 @@ <h1>Lab and LCH colors</h1>
 			<td>lch(100 50 50)</td>
 			<td>{"spaceId":"lch","coords":[100,50,50],"alpha":1}</td>
 		</tr>
+		<tr title="lch percentage">
+			<td>lch(50% 50% 50 / 50%)</td>
+			<td>{"spaceId":"lch","coords":[50,75,50],"alpha":0.5}</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>Oklab colors</h1>
+	<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
+		<tr>
+			<td>oklab(100% 0 0)</td>
+			<td>{"spaceId":"oklab","coords":[1,0,0],"alpha":1}</td>
+		</tr>
+		<tr title="alpha">
+			<td>oklab(100% 0 0 / 0.5)</td>
+			<td>{"spaceId":"oklab","coords":[1,0,0],"alpha":0.5}</td>
+		</tr>
+		<tr title="case">
+			<td>OKLab(100% 0 0)</td>
+			<td>{"spaceId":"oklab","coords":[1,0,0],"alpha":1}</td>
+		</tr>
+		<tr title="all percentages">
+			<td>oklab(42% 100% -50%)</td>
+			<td>{"spaceId":"oklab","coords":[0.42,0.4,-0.2],"alpha":1}</td>
+		</tr>
+		<tr title="all numbers">
+			<td>oklab(1 -0.20 0.20)</td>
+			<td>{"spaceId":"oklab","coords":[1,-0.2,0.2],"alpha":1}</td>
+		</tr>
+		<tr title="all numbers out of range">
+			<td>oklab(10 -0.80 0.80)</td>
+			<td>{"spaceId":"oklab","coords":[10,-0.8,0.8],"alpha":1}</td>
+		</tr>
+	</table>
+</section>
+<section>
+	<h1>Oklch colors</h1>
+	<table class="reftest" data-test="colorParse" data-columns="3" data-colors="1">
+		<tr>
+			<td>oklch(100% 0 0)</td>
+			<td>{"spaceId":"oklch","coords":[1,0,0],"alpha":1}</td>
+		</tr>
+		<tr title="alpha">
+			<td>oklch(100% 0 0 / 50%)</td>
+			<td>{"spaceId":"oklch","coords":[1,0,0],"alpha":0.5}</td>
+		</tr>
+		<tr title="case">
+			<td>OKLch(100% 0 0)</td>
+			<td>{"spaceId":"oklch","coords":[1,0,0],"alpha":1}</td>
+		</tr>
+		<tr title="all numbers">
+			<td>oklch(1 0.2 50)</td>
+			<td>{"spaceId":"oklch","coords":[1,0.2,50],"alpha":1}</td>
+		</tr>
+		<tr title="all numbers out of range">
+			<td>oklch(10 2 500 / 10)</td>
+			<td>{"spaceId":"oklch","coords":[10,2,500],"alpha":1}</td>
+		</tr>
+		<tr title="C as percentage">
+			<td>oklch(100% 50% 50)</td>
+			<td>{"spaceId":"oklch","coords":[1,0.2,50],"alpha":1}</td>
+		</tr>
+		<tr title="C as percentage over 100%">
+			<td>oklch(100% 150% 50)</td>
+			<td>{"spaceId":"oklch","coords":[1,0.6000000000000001,50],"alpha":1}</td>
+		</tr>
+		<tr title="H as degrees">
+			<td>oklch(100% 0 30deg)</td>
+			<td>{"spaceId":"oklch","coords":[1,0,30],"alpha":1}</td>
+		</tr>
+	</table>
+</section>
+
 <section>
 	<h1>color()</h1>
 
@@ -104,52 +183,90 @@ <h1>color()</h1>
 			<td>color(srgb 0 1 .5)</td>
 			<td>{"spaceId":"srgb","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(srgb 0 100% 50%)</td>
+			<td>{"spaceId":"srgb","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(srgb-linear 0 1 .5)</td>
 			<td>{"spaceId":"srgb-linear","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(srgb-linear 0 100% 50%)</td>
+			<td>{"spaceId":"srgb-linear","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(display-p3 0 1 .5)</td>
 			<td>{"spaceId":"p3","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(display-p3 0% 100% 50%)</td>
+			<td>{"spaceId":"p3","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(rec2020 0 1 .5)</td>
 			<td>{"spaceId":"rec2020","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(rec2020 0 100% 50%)</td>
+			<td>{"spaceId":"rec2020","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(a98-rgb 0 1 .5)</td>
 			<td>{"spaceId":"a98rgb","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(a98-rgb 0 100% 50%)</td>
+			<td>{"spaceId":"a98rgb","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(prophoto-rgb 0 1 .5)</td>
 			<td>{"spaceId":"prophoto","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(prophoto-rgb 0 100% 50%)</td>
+			<td>{"spaceId":"prophoto","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(acescc 0 1 .5)</td>
 			<td>{"spaceId":"acescc","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(acescc 0 100% 50%)</td>
+			<td>{"spaceId":"acescc","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
 		<tr>
 			<td>color(acescg 0 1 .5)</td>
 			<td>{"spaceId":"acescg","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
-		</tr>
 		<tr>
-			<td>color(acescg 0 1 .5)</td>
+			<td>color(acescg 0 100% 50%)</td>
 			<td>{"spaceId":"acescg","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
 		<tr>
 			<td>color(xyz 0 1 .5)</td>
 			<td>{"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(xyz 0 100% 50%)</td>
+			<td>{"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(xyz-d65 0 1 .5)</td>
 			<td>{"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(xyz-d65 0 100% 50%)</td>
+			<td>{"spaceId":"xyz-d65","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr>
 			<td>color(xyz-d50 0 1 .5)</td>
 			<td>{"spaceId":"xyz-d50","coords":[0,1,0.5],"alpha":1}</td>
 		</tr>
+		<tr>
+			<td>color(xyz-d50 0 100% 50%)</td>
+			<td>{"spaceId":"xyz-d50","coords":[0,1,0.5],"alpha":1}</td>
+		</tr>
 		<tr title="With transparency">
 			<td>color(display-p3 0 1 0 / .5)</td>
 			<td>{"spaceId":"p3","coords":[0,1,0],"alpha":0.5}</td>