[css-color-hdr] Clarify pseudo-code for color-hdr() to show each component is calculated separately #11694

Co-authored-by: @LeaVerou

Author: svgeesus

css-color-hdr-1/Overview.bs

@@ -558,6 +558,7 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 
 	It does this by specifying two <<color>> values, 
 	each with an associated level of HDR headroom.
+	(The two headroom values must not be the same).
 	The actual value is computed by interpolating between these two colors,
 	based on the current amount of HDR headroom,
 	as described in [[#headroom-interpolation]].
@@ -567,7 +568,7 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 	in raster images conforming to [[ISO_21496-1]].
 	</div>
 
-	The actual calculated color is not exposed, 
+	For privacy reasons, the actual calculated color is not exposed, 
 	nor is the actual HDR headroom,
 	as this is a fingerprinting vector.
 
@@ -598,9 +599,10 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 	<pre class="lang-css">color(rec2100-linear 1.8 2.0 1.5) 2);</pre>
 
 	For displays whose headroom lies between 0 and 2, the color is
-	interpolated. For example, on a display with HDR headroom 1:
+	interpolated. For <a href="#ex-hdr-interpolate">example</a>, 
+	on a display with HDR headroom 1:
 
-	@@ Add to the example with the calculated result at headroom 1 @@
+	X = 243.664, Y = 275.713, Z = 244.000
 
 	</div>
 
@@ -613,24 +615,27 @@ Mixing Dynamic Range Limits: the ''dynamic-range-limit-mix()'' function {#dynami
 	giving result color <var>cxyz</var>,
 	when the target headroom is <var>H</var>:
 
-	1. Let <var>c1xyz</var> be <var>c1</var> converted to D65 CIE XYZ
-	2. Let <var>c2xyz</var> be <var>c2</var> converted to D65 CIE XYZ
+	1. Let <var>c1xyz</var> be <var>c1</var> converted to Absolute D65 CIE XYZ
+	2. Let <var>c2xyz</var> be <var>c2</var> converted to Absolute D65 CIE XYZ
 	3. Let <var> w1</var> = clamp((<var>H</var> - <var>H2</var>) / (<var>H1</var> - <var>H2</var>), 0, 1)
 	4. Let <var> w2</var> = clamp((<var>H</var> - <var>H1</var>) / (<var>H2</var> - <var>H1</var>), 0, 1)
 		Note that <var> w2</var> = 1 - <var> w1</var>
 	5. Let <var>eps</var> = 0.001 (one JND in linear-light space)
-	6. Let <var>cxyz</var> = pow(<var>c1xyz</var> + <var>eps</var>, <var>w1</var>) * pow(<var>c2xyz</var> + <var>eps</var>, <var>w2</var>) - <var>eps</var>
+	6. Let <var>cxyz</var> = Array(3)
+	7. For i from 0 to 2:
+ 		Let <var>cxyz</var>[i] = pow(<var>c1xyz</var>[i] + <var>eps</var>, <var>w1</var> ) * pow(<var>c2xyz</var>[i] + <var>eps</var>, <var>w2</var> ) - <var>eps</var>
 
 	<div class="example" id="ex-hdr-interpolate">
 	For example, given c1 = color(rec2100-linear 0.9 1.0 0.8)
 	c2 = color(rec2100-linear 1.8 2.0 1.5),
 	H1 = 0, H2 = 2, and H = 1:
 
 	<pre  class="lang-css">
-	c1xyz = color(xyz-d65 0.853 0.9619 0.8769)
-	c2xyz = color(xyz-d65 1.689 1.918 1.648)
-	w1 = 
-	w2 =
+	c1xyz = [ 173.156, 195.260, 178.003 ]
+	c2xyz = [ 342.883, 389.315, 334.467 ]
+	w1 = 0.5
+	w2 = 0.5
+	cxyz = [ 243.664, 275.713, 244.000 ]
 	</pre>
 	</div>
 

css-color-hdr-1/workings/hdr-color.js

@@ -15,8 +15,11 @@ function colorHdr(col1, H1, col2, H2, H) {
 
     let c1xyz = col1.to("xyz-abs-d65").coords;
     let c2xyz = col2.to("xyz-abs-d65").coords;
+    console.log(c1xyz);
+    console.log(c2xyz);
     let w1 = clamp((H - H2) / (H1 - H2), 0, 1);
     let w2 = clamp((H - H1) / (H2 - H1), 0, 1);
+    console.log(w1, w2);
     let eps = 0.001;
     let cxyz = Array(3);
     for (let i=0; i<3; i++) {