Apply mix-blend-mode and isolation in algo steps

Author: jakearchibald

css-view-transitions-1/Overview.bs

@@ -292,16 +292,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		}
 		```
 
-		In addition to above, styles in the [=document/view transition style sheet=] add ''isolation: isolate'' to this pseudo-element
-		if it has both ''::view-transition-new()'' and ''::view-transition-old()'' as children.
-
-		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
-
-		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element
-		and provide isolation for blending.
-
-		Issue: Isolation is only necessary to get the right cross-fade between new and old image pixels.
-		Would it be simpler to always add it and try to optimize in the implementation?
+		Note: The aim of the style is to position the element to occupy the same space as its ''::view-transition-group()'' element.
 
 	: <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
 	::  One of these pseudo-elements exists for each element in the old DOM being animated by the view transition,
@@ -327,13 +318,6 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 		Note: The aim of the style is to match the element's inline size while retaining the aspect ratio.
 		It is also placed at the block start.
 
-		In addition to above, styles in the [=document/view transition style sheet=] add ''mix-blend-mode: plus-lighter'' to this pseudo element
-		if the ancestor ''::view-transition-image-pair()'' has both ''::view-transition-new()'' and ''::view-transition-old()'' as descendants.
-
-		Issue: This reads like a non-normative note, but it's normative. This rule should be specified at the same time as other styles, when the condition above can be determined.
-
-		Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels.
-
 		Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].
 
 	: <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
@@ -455,6 +439,12 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 
 		: <dfn>new view-box rule</dfn>
 		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>image pair isolation rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
+
+		: <dfn>view blend mode rule</dfn>
+		:: A {{CSSStyleRule}} or null. Initially null.
 	</dl>
 
 ## Additions to {{Document}} ## {#additions-to-document}
@@ -1116,6 +1106,36 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
 					</pre>
 
 					Note: The above code example contains variables to be replaced.
+
+				1. Set |capturedElement|'s [=captured element/image pair isolation rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-image-pair(<var>transitionName</var>) {
+							isolation: isolate;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+				1. Set |capturedElement|'s [=captured element/view blend mode rule=] to a new {{CSSStyleRule}} representing the following CSS,
+					and append it to |document|'s [=document/view transition style sheet=]:
+
+					<!-- deliberately using <pre> so the example can contain <var> references -->
+					<pre highlight="css">
+						html::view-transition-old(<var>transitionName</var>),
+						html::view-transition-new(<var>transitionName</var>) {
+							mix-blend-mode: plus-lighter;
+						}
+					</pre>
+
+					Note: The above code example contains variables to be replaced.
+
+					Note: ''mix-blend-mode: plus-lighter'' ensures that the blending of identical pixels from the old and new images results in the same color value as those pixels, and achieves a "correct" cross-fade.
+
+					Issue: Isolation and the dynamic setting of blending is only necessary to get the right cross-fade between new and old image pixels.
+					Would it be simpler to always add it and try to optimize in the implementation?
 	</div>
 
 ## [=Update pseudo-element styles=] ## {#style-transition-pseudo-elements-algorithm}