[css-color] fix bug in Lab to XYZ code

Author: svgeesus

css-color/Overview.bs

@@ -4509,9 +4509,9 @@ function Lab_to_XYZ(Lab) {
 
 	// compute xyz
 	var xyz = [
-		f[0] > ε       ? Math.pow(f[0],3)            : (116*f[0]-16)/κ,
-		Lab[0] > κ * ε ? Math.pow((Lab[0]+16)/116,3) : Lab[0]/κ,
-		f[2] > ε       ? Math.pow(f[2],3)            : (116*f[2]-16)/κ
+		Math.pow(f[0],3) > ε ?   Math.pow(f[0],3)            : (116*f[0]-16)/κ,
+		Lab[0] > κ * ε ?         Math.pow((Lab[0]+16)/116,3) : Lab[0]/κ,
+		Math.pow(f[2],3)  > ε ?  Math.pow(f[2],3)            : (116*f[2]-16)/κ
 	];
 
 	// Compute XYZ by scaling xyz by reference white  

css-color/conversions.js

@@ -207,6 +207,7 @@ function XYZ_to_Lab(XYZ) {
 
 function Lab_to_XYZ(Lab) {
 	// Convert Lab to D50-adapted XYZ
+	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
 	var κ = 24389/27;   // 29^3/3^3
 	var ε = 216/24389;  // 6^3/29^3
 	var white = [0.9642, 1.0000, 0.8249]; // D50 reference white
@@ -219,9 +220,9 @@ function Lab_to_XYZ(Lab) {
 
 	// compute xyz
 	var xyz = [
-		f[0] > ε       ? Math.pow(f[0],3)            : (116*f[0]-16)/κ,
-		Lab[0] > κ * ε ? Math.pow((Lab[0]+16)/116,3) : Lab[0]/κ,
-		f[2] > ε       ? Math.pow(f[2],3)            : (116*f[2]-16)/κ
+		Math.pow(f[0],3) > ε ?   Math.pow(f[0],3)            : (116*f[0]-16)/κ,
+		Lab[0] > κ * ε ?         Math.pow((Lab[0]+16)/116,3) : Lab[0]/κ,
+		Math.pow(f[2],3)  > ε ?  Math.pow(f[2],3)            : (116*f[2]-16)/κ
 	];
 
 	// Compute XYZ by scaling xyz by reference white  

css-color/grays.html

@@ -5,8 +5,44 @@
 	// make 7 steps in sRGB, compare to 7 steps in D65-adapted lab
 	// odd number of steps so we have an exact 50%
 
-	for (var i =0; i <7; i++) {
-		console.log(i>0? 100 * 7 / i: 0);
+	for (var i =0; i <8; i++) {
+		console.log(100 * i / 7);
+	}
+	for (var i =0; i <8; i++) {
+		var lab = [100 * i / 7, 0, 0];
+		// console.log(lab);
+		console.log(i);
+		var xyz = Lab_to_XYZ(lab);
+		// okay, bradford
+		var xyz2 = D50_to_D65(xyz);
+		var linrgb = XYZ_to_lin_sRGB(xyz2);
+		console.log(linrgb);
+		var rgb = gam_sRGB(linrgb);
+		console.log(rgb);
 	}
 	</script>
+	<style>
+		#rgb {background: #777; padding:20px}
+		#rgb div {width:60px; height: 60px; display: inline-block; padding:10px; }
+	</style>
+	<div id="rgb">
+		<div style="background-color:rgb(0,0,0)"> </div>
+		<div style="background-color:rgb(14.285714285714286%, 14.285714285714286%, 14.285714285714286%)"> </div>
+		<div style="background-color:rgb(28.571428571428573%, 28.571428571428573%, 28.571428571428573%)"> </div>
+		<div style="background-color:rgb(42.857142857142854%, 42.857142857142854%, 42.857142857142854%)"> </div>
+		<div style="background-color:rgb(57.142857142857146%, 57.142857142857146%, 57.142857142857146%)"> </div>
+		<div style="background-color:rgb(71.42857142857143%, 71.42857142857143%, 71.42857142857143%)"> </div>
+		<div style="background-color:rgb(85.71428571428571%, 85.71428571428571%, 85.71428571428571%)"> </div>
+		<div style="background-color:rgb(100%, 100%, 100%)"> </div>
+	</div>	
+	<div id="lab">
+		<div style="background-color:rgb(0,0,0)"> </div>
+		<div style="background-color:rgb(14.285714285714286%, 14.285714285714286%, 14.285714285714286%)"> </div>
+		<div style="background-color:rgb(28.571428571428573%, 28.571428571428573%, 28.571428571428573%)"> </div>
+		<div style="background-color:rgb(42.857142857142854%, 42.857142857142854%, 42.857142857142854%)"> </div>
+		<div style="background-color:rgb(57.142857142857146%, 57.142857142857146%, 57.142857142857146%)"> </div>
+		<div style="background-color:rgb(71.42857142857143%, 71.42857142857143%, 71.42857142857143%)"> </div>
+		<div style="background-color:rgb(85.71428571428571%, 85.71428571428571%, 85.71428571428571%)"> </div>
+		<div style="background-color:rgb(100%, 100%, 100%)"> </div>
+	</div>	
 </html>