[css-color-4] start splitting out serialization

Author: svgeesus

css-color-4/Overview.bs

@@ -14,6 +14,9 @@ Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.
 Abstract: This specification describes CSS <<color>> values and properties for foreground color and group opacity.
 Repository: w3c/csswg-drafts
 Ignored Terms: stacking context, double, octet
+Complain About: missing-example-ids true
+Complain About: broken-links true
+Complain About: accidental-2119 true
 </pre>
 
 <pre class='ignored-specs'>
@@ -409,55 +412,55 @@ Resolving <<color>> Values</h3>
 	Unless otherwise specified for a particular property,
 	[=specified value|specified=] colors are resolved to
 	<dfn export lt="computed color">[=computed value|computed=] colors</dfn>
-	and then further to <dfn export lt="used color">[=used value|used=] colors</dfn> as follows:
-
-	: ''transparent''
-	::
-		The computed and used value is [=transparent black=].
-
-	: [=hex colors=]
-	: ''rgb()'' and ''rgba()'' values
-	: ''hsl()'' and ''hsla()'' values
-	: ''hwb()'' values
-	: [=named colors=]
-	::
+	and then further to <dfn export lt="used color">[=used value|used=] colors</dfn> as described below.
+
+	The [=resolved value=] of a <<color>> is its [=used value=].
+
+<h4 id="resolving-sRGB-values">Resolving sRGB values</h4>
+
+	This applies to:
+
+	* [=hex colors=]
+	* ''rgb()'' and ''rgba()'' values
+	* ''hsl()'' and ''hsla()'' values
+	* ''hwb()'' values
+	* [=named colors=]
+
+		While the function names and named colors
+		are <a href="https://infra.spec.whatwg.org/#ascii-case-insensitive">ASCII case-insensitive</a>,
+		the [=specified value=]
+		does not preserve any mixed casing
+		and is treated as being all lowercase.
+
+		<div class="example">
+			<p>For example, the first form below is treated as identical to the second:</p>
+			<pre class="lang-css"><span class="swatch" style="--color: hsl(39 100% 50%)"></span> HsL(39 100% 50%)
+
+			<span class="swatch" style="--color: hsl(39 100% 50%)"></span> hsl(39 100% 50%)</pre>
+			<p>Similarly the first form below is treated as identical to the second:</p>
+			<pre class="lang-css"><span class="swatch" style="--color: purple"></span> pUrPlE
+
+			<span class="swatch" style="--color: purple"></span> purple</pre>
+		</div>
+
 		The computed and used value
 		is the corresponding sRGB color,
-		(for compatibility, in <<number>> form, not <<percentage>>)
 		paired with the specified alpha channel
-		(as a <<number>>, not a <<percentage>>;
 		and defaulting to opaque if unspecified).
 
-		Note: contrary to CSS Color 3,
-		the parameters of the ''rgb()'' function
-		are of type <<number>> not <<integer>>.
-		For compatibility, numbers are still
-		in the range [0-255];
-		higher precision is indicated with any fractional part.
-
-		Trailing zeroes in any component values must be suppressed;
-		if the fractional part consists of all zeroes,
-		the decimal point must also be suppressed.
-		This means that sRGB colors specified with integer component values
-		will serialize with backwards-compatible integer values.
 
 		<div class="example">
-			<p>
-				For example,</p>
-			<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(146.064 107.457 131.223)</pre>
-			<p>is now valid, and equal to</p>
-			<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(57.28% 42.14% 51.46%)</pre>
-			<p>while ''goldenrod'' will serialize as</p>
-			<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> "rgb(218 165 32)"</pre>
-			<p>and not</p>
-			<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> "rgb(218.000 165.000 32.000)"</pre>
-
-			<!-- required precision?
-				sRGB should accomodate at least 10 bits/component -->
+			<p>For example, the computed value of</p>
+			<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> hsl(38.824 100% 50%)</pre>
+			<p>is</p>
+			<pre class="lang-css"><span class="swatch" style="--color: rgb(255, 165, 0)"></span> rgb(255, 165, 0)</pre>
 		</div>
 
-	: ''lab()'' and ''lch()'' values
-	::
+
+	<h4 id="resolving-lab-lch-values">Resolving Lab and LCH values</h4>
+
+	This applies to ''lab()'' and ''lch()'' values.
+
 		The computed and used value
 		is the corresponding CIE Lab color
 		paired with the specified alpha channel
@@ -471,9 +474,8 @@ Resolving <<color>> Values</h3>
 			<pre class="lang-css"><span class="swatch" style="--color: rgb(77.61% 36.34% 2.45%)"></span>  "lab(52.2345% 40.1645 59.9971)"</pre>
 		</div>
 
+	<h4 id="resolving-color-values">Resolving values of the ''color()'' function</h4>
 
-	: ''color()'' values
-	::
 		The computed and used value
 		is the color in the specified [=colorspace=],
 		paired with the specified alpha channel
@@ -487,8 +489,8 @@ Resolving <<color>> Values</h3>
 			<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> "color(display-p3 0.823 0.6554 0.2537)"</pre>
 		</div>
 
-	: ''device-cmyk()'' values
-	::
+<h4 id="resolving-device-cmyk-values">Resolving ''device-cmyk'' values</h4>
+
 		The computed and used value
 		is the specified device-specific CMYK color,
 		(with components as <<number>>, not <<percentage>>)
@@ -517,19 +519,25 @@ Resolving <<color>> Values</h3>
 				have the used value
 			</p>
 			<pre class="lang-css"><span class="swatch" style="--color: rgb(93.124%, 44.098%, 57.491%)"></span> lab(63.673% 51.577 5.811)</pre>
+			<p class="note">As with all colors, the used value is not available to script.</p>
 		</div>
 
-	: [=system colors=]
-	::
+	<h4 id="resolving-other-colors">Resolving other colors</h4>
+
+	This applies to [=system colors=],
+	[[#deprecated-system-colors]],
+	''transparent'', and
+	''currentcolor''.
+
 		Each <<system-color>> keyword computes to itself.
 		Its used value is the corresponding color in its color space.
 
-	: ''currentcolor''
-	::
+		The computed and used value of ''transparent'' is [=transparent black=].
+
 		The ''currentcolor'' keyword computes to itself.
 
 		In the 'color' property,
-		its used value is the [=inherited value=].
+		the used value of ''currentcolor'' is the [=inherited value=].
 		In any other property,
 		its used value is the used value of the 'color' property on the same element.
 
@@ -538,10 +546,146 @@ Resolving <<color>> Values</h3>
 		not as the value of the 'color' property,
 		so descendants will use their own 'color' property to resolve it.
 
-	The [=resolved value=] of a <<color>> is its [=used value=].
 
 	Issue(3845): When should channel-clamping occur?
 
+<h3 id='serializing-color-values'>
+	Serializing <<color>> Values</h3>
+
+This section updates and replaces that part of CSS Object Model, section
+<a href="https://drafts.csswg.org/cssom-1/#serializing-css-values"> Serializing CSS Values</a>, which relates to serializing <<color>> values.
+
+<h4 id="serializing-alpha-values">Serializing alpha values</h4>
+
+	This applies to any <<color>> value which can take an optional alpha value.
+
+	If the alpha is exactly 1,
+	it is ommitted from the serialization;
+	an implicit value of 1 (fully opaque) is the default.
+
+	If the alpha is any other value than 1,
+	it is explicitly included in the serialization,
+	as a <<number>>, not a <<percentage>>.
+	The value is expressed in base ten,
+	with the "." character as decimal separator.
+	Trailing zeroes must be omitted.
+
+	<div class="example">
+		<p>For example, an alpha value of 70%
+			will be serialized as the string
+			"0.7".
+		</p>
+	</div>
+
+	The precision with which alpha values are retained,
+	and thus the number of decimal places in the serialised value,
+	is not defined in this specification,
+	but must at least be sufficient
+	to round-trip integer percentage values.
+	Thus, the serialised value must contain
+	at least two decimal places
+	(unless trailing zeroes have been removed).
+	Values must be rounded, not truncated.
+
+	<div class="example">
+		<p>For example, an alpha value of 12.3456789%
+			may be serialized as the strings
+			"0.12" or "0.123" or "0.1234" or "0.12346"
+			(rounding up the value of 5 because the following digit is 6)
+			or any longer, rounded serialisation of the same form.
+		</p>
+	</div>
+
+
+<h4 id="serialising-sRGB-values">Serialising sRGB values</h4>
+
+	The serialised form of the following sRGB values:
+
+	* [=hex colors=]
+	* ''rgb()'' and ''rgba()'' values
+	* ''hsl()'' and ''hsla()'' values
+	* ''hwb()'' values
+	* [=named colors=]
+
+	is derived from the [=computed value=] and thus,
+	uses either the ''rgb()'' or ''rgba()'' form,
+	with lowercase letters.
+
+	For compatibility, the sRGB component values
+	are serialized in <<number>> form, not <<percentage>>).
+	Also for compatibility,
+	the component values are serialized in base 10,
+	with a range of [0-255], regardless of
+	the bit depth with which they are stored.
+
+	For compatibiity, if the alpha is exactly 1,
+	the ''rgb()'' form is used,
+	with an implicit alpha;
+	otherwise, the ''rgba()'' form is used,
+	with an explicit alpha value.
+
+	For compatibility,
+	the legacy form with comma separators is used;
+	exactly one ASCII space follows each comma.
+	This includes the comma (not slash) used
+	to separate the blue component of ''rgba()''
+	from the alpha value.
+
+
+	<div class="example">
+		<p>For example, the serialized value of</p>
+		<pre class="lang-css"><span class="swatch" style="--color: rgba(29, 164, 192, 0.95)"></span> rgb(29 164 192 / 95%)</pre>
+		<p>is the string "rgba(29, 164, 192, 0.95)"</p>
+	</div>
+
+	Note: contrary to CSS Color 3,
+	the parameters of the ''rgb()'' function
+	are of type <<number>> not <<integer>>.
+	Thus, any higher precision than eight bits
+	is indicated with a fractional part.
+
+	Trailing fractional zeroes in any component values must be suppressed;
+	if the fractional part consists of all zeroes,
+	the decimal point must also be suppressed.
+	This means that sRGB colors specified with integer component values
+	will serialize with backwards-compatible integer values.
+
+	The precision with which sRGB component values are retained,
+	and thus the number of significant figures in the serialised value,
+	is not defined in this specification,
+	but must at least be sufficient
+	to round-trip eight bit values.
+	Values must be rounded, not truncated.
+
+	Note: authors of scripts which expect
+	color values returned from
+	<span style="font-family:monospace">getComputedStyle</span>
+	to have <<integer>> component values,
+	are advised to update them to cope with
+	<<number>>.
+
+<div class="example">
+	<p>
+	For example,</p>
+	<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(146.064 107.457 131.223)</pre>
+	<p>is now valid, and equal to</p>
+	<pre class="lang-css"><span class="swatch" style="--color: rgb(57.28% 42.14% 51.46%)"></span> rgb(57.28% 42.14% 51.46%)</pre>
+	<p>A conformant serialized form for both,
+	is the string "rgb(146.06, 107.46, 131.2)".</p>
+</div>
+
+<div class="example">
+	<p>The serialized value of </p>
+	<pre class="lang-css"><span class="swatch" style="--color: goldenrod"></span> ''goldenrod''</pre>
+	<p>is the string "rgb(218 165 32)"
+	and not the string "rgb(218.000 165.000 32.000)"</p>
+</div>
+
+
+
+
+
+
 <h2 id='numeric-srgb'>
 sRGB Colors</h2>