[css-color-5] Finish separating processing and syntactic aspects of RCS, #10151

Author: svgeesus

css-color-5/Overview.bs

@@ -793,11 +793,11 @@ which is rgb(52.446% 45.821% 62.953%)
 -->
 
 <h2 id="relative-colors">
-	Relative Color Syntax
+	Relative Colors
 </h2>
 
 <h3 id="rcs-intro">
-	Introduction to Relative Color Syntax
+	Processing Model for Relative Colors
 </h3>
 
 In previous levels of this specification,
@@ -819,11 +819,81 @@ The origin color and the relative color need not use the same color function.
 
 All operations take part in the 
 [=color space=] of the [=relative color=] function;
-the [=origin color=] is converted to that color space,
+<span id="required-conversion">if the
+<dfn export>originally specified color space</dfn>
+for the [=origin color=] used a different color function,
+it's first converted into the chosen color function,
+so it has meaningful values for the channels</span>
 and [=channel keywords=] 
 refer to the color space of the relative color,
 <em>not</em> the [=origin color=].
 
+If the alpha value of the relative color is omitted,
+it defaults to that of the [=origin color=]
+(rather than defaulting to ''100%'', as it does in the absolute syntax).
+
+When relative color syntax is used,
+<strong>color channel</strong> values, 
+whether directly specified 
+or arising from color space conversion,
+are <em>not clamped</em> to the reference ranges but are retained as-is.
+This preserves out of gamut values,
+if the destination color space is capable of representing them.
+
+However, when relative color syntax is used,
+<strong>alpha channel</strong> values 
+whether directly specified 
+or arising from color space conversion,
+<em>are</em> clamped to the reference range.
+
+Missing components are handled the same way as with
+[[css-color-4#interpolation-missing]]:
+the origin colorspace and the relative function colorspace
+are checked for [=analogous components=]
+which are then [=carried forward=] as missing.
+
+While most uses of [=relative color=] syntax
+will use the [=channel keywords=] in their corresponding argument,
+you can use them in any position.
+
+Beware when using components outside their normal position;
+when percentages are resolved to numbers,
+there is no "magic scaling"
+to account for the changed position
+if those numbers are used in a different place.
+
+
+<h3 id="relative-syntax">
+	Relative Color Syntax
+</h3>
+
+The precise details of each function's syntactic changes 
+to accommodate [=relative colors=] are listed below,
+but they all follow a common structure:
+
+* An [=origin color=] can be specified with a ''from <<color>>'' value 
+	at the start of the function.
+	This includes the optional alpha channel, if specified.
+* If no origin color is specified, the function is not a relative color.
+* If an [=origin color=] is specified,
+	the remaining arguments can either be specified directly, as normal,
+	or be specified as a <dfn>channel keyword</dfn>
+	referring to one of the channels of the [=origin color=]
+	converted to the [=color space=] of the relative color.
+	[=Math functions=] can also use these keywords
+	to do dynamic modifications of the [=origin color's=] channels.
+* [=Relative color=] syntax doesn't change whether an argument is required or optional.
+* Relative color syntax only applies to the [=modern color syntax=].
+	It <em>cannot</em> be used with <a>legacy color syntax</a>
+	and attempting to do so is an error.
+* However, the [=origin color=] can use either modern or legacy syntax.
+
+The [=channel keywords=] return a <<number>>;
+if they were originally specified as a <<percentage>> or an <<angle>>,
+that <<percentage>> is resolved to a <<number>>
+and the <<angle>> is resolved to a <<number>> of degrees
+(which is the [=canonical unit=])
+in the range [0, 360].
 
 <wpt>
 	relative-currentcolor-a98rgb-01.html
@@ -848,33 +918,6 @@ refer to the color space of the relative color,
 	parsing/relative-color-out-of-gamut.html
 </wpt>
 
-The precise details of each function's changes to accommodate [=relative colors=] are listed below,
-but they all follow a common structure:
-
-* An [=origin color=] can be specified with a ''from <<color>>'' value at the start of the function.
-	This includes the optional alpha channel, if specified.
-* If an [=origin color=] is specified,
-	the remaining arguments can either be specified directly, as normal,
-	or be specified as a <dfn>channel keyword</dfn>
-	referring to one of the channels of the [=origin color=].
-	[=Math functions=] can also use these keywords
-	to do dynamic modifications of the [=origin color's=] channels.
-* [=Relative color=] syntax doesn't change whether an argument is required or optional.
-	If the alpha value is omitted, however,
-	it defaults to taking from the [=origin color=]
-	(rather than defaulting to ''100%'', as it does in the absolute syntax).
-* Relative color syntax only applies to the [=modern color syntax=].
-	It <em>cannot</em> be used with <a>legacy color syntax</a>
-	and attempting to do so is an error.
-* However, the [=origin color=] can use either modern or legacy syntax.
-
-The [=channel keywords=] return a <<number>>;
-if they were originally specified as a <<percentage>> or an <<angle>>,
-that <<percentage>> is resolved to a <<number>>
-and the <<angle>> is resolved to a <<number>> of degrees
-(which is the [=canonical unit=])
-in the range [0, 360].
-
 <div class=example>
 	For example, if a color is specified using <<percentage>>,
 	then RCS in the same colorspace will use the resolved <<number>> form:
@@ -913,12 +956,6 @@ in the range [0, 360].
 
 </div>
 
-<p id="required-conversion">If the
-<dfn export>originally specified color space</dfn>
-for the [=origin color=] used a different color function,
-it's first converted into the chosen color function,
-so it has meaningful values for the channels.</p>
-
 <div class=example>
 	By using the [=channel keywords=] in a [=math function=],
 	an [=origin color=] can be manipulated in more advanced ways.
@@ -958,14 +995,6 @@ so it has meaningful values for the channels.</p>
 	regardless of what the [=origin color's=] opacity was.
 </div>
 
-When relative color syntax is used,
-color channel values, 
-whether directly specified 
-or arising from color space conversion,
-are <em>not</em> clamped to the reference ranges but are retained as-is.
-This preserves out of gamut values,
-if the destination color space is capable of representing them.
-
 <div class="example">
 	For example, a Display P3 color
 	which is outside the gamut of sRGB can still be represented,
@@ -983,9 +1012,6 @@ if the destination color space is capable of representing them.
 	<span class="swatch" style="--color: rgb(100% 100% 15.37%)"></span> rgb(100% 100% 15.37%)
 </div>
 
-However, when relative color syntax is used,
-alpha channels <em>are</em> clamped to the reference range.
-
 <div class="example">
 	For example, attempting to double an alpha of 0.7 in the origin color
 	results in an alpha in the result of 1, not 1.4.
@@ -996,9 +1022,6 @@ alpha channels <em>are</em> clamped to the reference range.
 	</pre>
 </div>
 
-While most uses of [=relative color=] syntax
-will use the [=channel keywords=] in their corresponding argument,
-you can use them in any position.
 
 <div class=example>
 	For example, to do a rough approximation of grayscaling a color:
@@ -1037,12 +1060,6 @@ you can use them in any position.
 	which determines how "colorful" the color is.)
 </div>
 
-	Beware when using components outside their normal position;
-	when percentages are resolved to numbers,
-	there is no "magic scaling"
-	to account for the changed position
-	if those numbers are used in a different place.
-
 <div class="example" id="ex-no-percentage-magic">
 	<p>For example,</p>
 
@@ -1073,12 +1090,6 @@ you can use them in any position.
 
 </div>
 
-Missing components are handled the same way as with
-[[css-color-4#interpolation-missing]]:
-the origin colorspace and the relative function colorspace
-are checked for [=analogous components=]
-which are then carried forward as missing.
-
 <div class="example" id="ex-missing-analogous">
 	In this example the achromatic origin color has a missing hue;
 	the [=relative color=] also has a missing hue,