[css-compositing-2] Add plus-lighter to mix-blend-mode and background-blend-mode

compositing-2/Overview.bs

@@ -58,7 +58,7 @@ The 'background-blend-mode' property also builds upon the properties defined in
 
 This specification also enhances the rules as specified in <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending" title="simple alpha blending">Section 14.2 Simple alpha compositing</a> of [[SVG11]] and <a href="https://www.w3.org/TR/css3-color/#alpha" title="simple alpha compositing">simple alpha compositing</a> of [[!CSS3COLOR]].
 
-This module also extends the 
+This module also extends the
 {{globalCompositeOperation}}.
 
 <h3 id="values">Values</h3>
@@ -118,7 +118,7 @@ This behavior is described in more detail in <a href="#blending">Blending</a>.
 
 <pre class='propdef'>
 Name: mix-blend-mode
-Value: <<blend-mode>>
+Value: <<blend-mode>> | <a>plus-lighter</a>
 Initial: normal
 Applies to: All elements. In SVG, it applies to <a href="https://www.w3.org/TR/SVG/intro.html#TermContainerElement">container elements</a>, <a href="https://www.w3.org/TR/SVG/intro.html#TermGraphicsElement">graphics elements</a> and <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsReferencingElement">graphics referencing elements</a>. [[SVG11]]
 Inherited: no
@@ -290,7 +290,7 @@ The description of the 'background-blend-mode' property is as follows:
 
 <pre class='propdef'>
 Name: background-blend-mode
-Value: <<blend-mode>>#
+Value: <'mix-blend-mode'>#
 Initial: normal
 Applies to: All HTML elements
 Inherited: no
@@ -1009,6 +1009,70 @@ With the <dfn>plus-lighter</dfn> compositing operator, the following steps are p
     αo = min(1, αs + αb);
 </pre>
 
+<div class="example">
+  <p><a>plus-lighter</a> is particularly useful for cross-fade effects.</p>
+
+  <p>Given the following sample markup:</p>
+
+  <pre>
+  &lt;div class="container">
+    &lt;div class="from">&lt;/div>
+    &lt;div class="to">&lt;/div>
+  &lt;/div>
+  </pre>
+
+  <p>And the following styles:</p>
+
+  <pre>
+    .container {
+      display: grid;
+    }
+    .container > div {
+      width: 100px;
+      height: 100px;
+      /* Place the elements on top of each other */
+      grid-area: 1 / 1;
+    }
+    .from {
+      background-color: rgb(100% 0 0 / 50%);
+    }
+    .to {
+      background-color: rgb(0 0 100% / 50%);
+    }
+  </pre>
+
+  <p>If you wanted to produce a 50% cross-fade between <code>from</code> and <code>to</code>, a naive approach would be to give each 50% opacity:</p>
+
+  <pre>
+    .from {
+      opacity: 0.5;
+    }
+    .to {
+      opacity: 0.5;
+    }
+  </pre>
+
+  <p>However, with default <a>source-over</a> compositing, this produces a result of roughly <code>rgb(43% 0 57% / 44%)</code>. This is correct value when "layering" elements, but it's incorrect for a 50% cross-fade.</p>
+
+  <p>Instead, using <a>plus-lighter</a>:</p>
+
+  <pre>
+    .container {
+      /* Limit the scope of the plus-lighter operation */
+      isolation: isolate;
+    }
+    .from {
+      opacity: 0.5;
+    }
+    .to {
+      opacity: 0.5;
+      mix-blend-mode: plus-lighter;
+    }
+  </pre>
+
+  <p>This results in <code>rgb(50% 0 50% / 50%)</code>, which is correctly "half-way" between the <code>from</code> and <code>to</code> colors.</p>
+  </div>
+
 <h3 id="groupcompositing">Group compositing behavior with Porter Duff modes</h3>
 <!--<h4 id="groupcompositingisolation">Isolated groups and Porter Duff modes</h4>-->