[css-color-4] Add srgb-linear color space, fix w3c#6087

Author: svgeesus

css-color-4/Overview.bs

@@ -1126,12 +1126,17 @@ and there shall be no thousands separator.
 	For the predefined color spaces,
 	the <em>minimum</em> precision for round-tripping is as follows:
 
-	<table class="data">
+	<table class="data" id="predefined-precision-table">
 		<tr><th>color space</th><th>Minimum bits</th></tr>
 		<tr>
 			<td>''srgb''</td>
 			<td>10</td>
 		</tr>
+		<tr>
+			<td>''srgb-linear''</td>
+			<td>12</td>
+			<!-- see workings/srgb-lin-precision.js -->
+		</tr>
 		<tr>
 			<td>''display-p3''</td>
 			<td>10</td>
@@ -3593,6 +3598,60 @@ Predefined Color Spaces</h2>
 			</wpt>
 		</dl>
 
+<h3 id="predefined-sRGB-linear">Predefined sRGB-linear space</h3>
+
+
+		The <dfn id='sRGB-linear-space' export>sRGB-linear</dfn> predefined colorspace
+		is the same as ''srgb''
+		<em>except</em> that the transfer function
+		is linear-light (there is no gamma-encoding).
+
+		<dl dfn-type=value dfn-for="color()">
+			<dt><dfn>srgb-linear</dfn>
+			<dd>
+				The ''srgb-linear'' [[!SRGB]] color space accepts three numeric parameters,
+				representing the red, green, and blue channels of the color.
+				In-gamut colors have all three components in the range [0, 1].
+				The whitepoint is [=D65=].
+
+				It has the following characteristics:
+
+				<table>
+					<thead><td></td><td>x</td><td>y</td></thead>
+					<tr><th>Red chromaticity</th><td>0.640</td><td>0.330</td></tr>
+					<tr><th>Green chromaticity</th><td>0.300</td><td>0.600</td></tr>
+					<tr><th>Blue chromaticity</th><td>0.150</td><td>0.060</td></tr>
+					<tr><th>White chromaticity</th> <td  colspan="2">[=D65=]</td></tr>
+					<tr><th>Transfer function</th><td colspan="2">unity, see below</td></tr>
+					<tr><th>White luminance</th><td colspan="2">80.0 cd/m<sup>2</sup></td></tr>
+					<tr><th>Black luminance</th><td colspan="2">0.80 cd/m<sup>2</sup></td></tr>
+					<tr><th>Image state</th><td colspan="2">display-referred</td></tr>
+					<tr>
+						<th>Percentages</th>
+						<td  colspan="2">Allowed for R, G and B</td>
+					</tr>
+				</table>
+
+				<pre class="lang-javascript">
+				cl = c;
+				</pre>
+				c is the red, green or blue component.
+				cl is the corresponding linear-light component, which is identical.
+
+				To avoid banding artifacts, a
+				<a href="#predefined-precision-table">higher precision is required</a>
+				for ''srgb-linear'' than for ''srgb''.
+
+				<div class="example" id="srgb-linear-swatches">
+					For example, these are the same color
+					<pre class="lang-css">
+					<span class="swatch" style="--color: rgb(69.1% 13.9% 25.9%)"></span> color(srgb 0.691 0.139 0.259)
+					<span class="swatch" style="--color: rgb(69.1% 13.9% 25.9%)"></span> color(srgb-linear 0.435 0.017 0.055)
+					</pre>
+				</div>
+			</dd>
+		</dl>
+
 <h3 id="predefined-display-p3">Predefined display-p3 space</h3>
 
 		<dl dfn-type=value dfn-for="color()">
@@ -4844,7 +4903,8 @@ Changes</h2>
 </h3>
 
 <ul>
-	<!-- to 10 Nov 2021 -->
+	<!-- to 19 Nov 2021 -->
+	<li>Add srgb-linear color space</li>
 	<li>Moved @color-profile and device-cmyk to level 5 per CSSWG resolution</li>
 	<li>Defined interpolation color space</li>
 	<!-- to Oct 30 2021 -->

css-color-4/workings/srgb-lin-precision.js

@@ -0,0 +1,39 @@
+// Find minimum bt dept to retain all 256 gamma-encoded sRGB values in srgb-linear
+// lin8: 183
+// lin10: 238
+// lin12: 256 = OK
+// lin14: 256
+// lin16: 256
+
+let lin8 = new Set();
+let lin10 = new Set();
+let lin12 = new Set();
+let lin14 = new Set();
+let lin16 = new Set();
+
+for (let i=0; i<=255; i++) {
+    let gam = i / 255;
+    let lin = toLin(gam);
+    lin8.add(Math.round(lin * 255));
+    lin10.add(Math.round(lin * 1023));
+    lin12.add(Math.round(lin * 4095));
+    lin14.add(Math.round(lin * 16383));
+    lin16.add(Math.round(lin * 65535));
+}
+
+console.log(lin8.size);
+console.log(lin10.size);
+console.log(lin12.size);
+console.log(lin14.size);
+console.log(lin16.size);
+
+function toLin(val) {
+    let sign = val < 0? -1 : 1;
+		let abs = Math.abs(val);
+
+		if (abs < 0.04045) {
+			return val / 12.92;
+		}
+
+		return sign * (Math.pow((abs + 0.055) / 1.055, 2.4));
+}