[css-color-6] Add color-layers() function, #8431

Author: svgeesus

css-color-6/Overview.bs

@@ -25,6 +25,7 @@ spec:css-color-3
 
 <pre class="link-defaults">
 spec:css-color-5; type:dfn; text:color
+spec:compositing-1; type:value; text:normal
 </pre>
 <link rel="stylesheet" href="style.css" />
 
@@ -34,8 +35,8 @@ Introduction {#intro}
 
 	<em>This section is not normative.</em>
 
-	This module adds a new <<color>> function:
-	''contrast-color()''.
+	This module adds a\two new <<color>> functions:
+	''contrast-color()'' and ''color-layers()''.
 
 
 
@@ -295,7 +296,59 @@ Contrasting Semi-transparent Colors</h4>
 		to find an opaque foreground color.
 
 
+<!--  
 
+█▌     ███▌  █   ▐▌ █████▌ ████▌   ███▌ 
+█▌    ▐█ ▐█  ▐▌  █  █▌     █▌  █▌ █▌  █▌
+█▌    █▌  █▌  █ ▐▌  █▌     █▌  █▌ █▌    
+█▌    █▌  █▌  ▐▌█   ████   ████▌   ███▌ 
+█▌    █████▌   █▌   █▌     █▌▐█       █▌
+█▌    █▌  █▌   █▌   █▌     █▌ ▐█  █▌  █▌
+█████ █▌  █▌   █▌   █████▌ █▌  █▌  ███▌ 
+-->
+
+Layering Multiple Colors: the ''color-layers()'' function {#colorclayers}
+=========================================================================
+
+	The <dfn>color-layers()</dfn> [=functional notation=]
+	takes an optional <<blend-mode>> 
+	followed by a list of two or more
+	<<color>> layers.
+
+	Its syntax is:
+
+	<pre class='prod'>
+		<<color-layers()>> = color-layers([ <<blend-mode>>, ]? <<color>># )
+	</pre>
+
+	It returns a <<color>> which is
+	the result of compositing these layers,
+	using the [[compositing-1#porterduffcompositingoperators_srcover]]
+	compositing operator and the specified
+	<<blend-mode>>.
+
+	If no <<blend-mode>> is given, 
+	''normal'' blend-mode is used.
+
+	<div class="example">
+		@@Add simple example with normal blend mode 
+		and two colors, the first of which has non-unity alpha
+	</div>
+
+	<div class="example">
+		@@Add simple example with normal blend mode 
+		and three colors, the first two of which have non-unity alpha
+	</div>
+
+	<div class="example">
+		@@Add simple example with normal blend mode 
+		and two colors, both of which have non-unity alpha
+	</div>
+
+	<div class="example">
+		@@Add example with overlay blend mode 
+		and two colors, the first of which has non-unity alpha
+	</div>
 
 <!--
 ████████  ████████  ██████   ███████  ██       ██     ██ ████████