[web-animations-1] Resolve remaining issues missed in pseudo-element change. (#4616)

Fixup of #4437 addressing #4301.

* Add pseudoElement option to KeyframeEffect constructor body
* Fixes #4502 by adding catch-all pseudo-element case to composite order
* Fixes #4586 by adding error handling to KeyframeEffect.pseudoElement
* Fixes #4701 by handling cases when property values cannot be calculated

Author: george-steel

css-animations-2/Overview.bs

@@ -167,6 +167,8 @@ last) as follows:
     *  element
     *  ::marker
     *  ::before
+    *  any other pseudo-elements not mentioned specifically in this list,
+       sorted in ascending order by the Unicode codepoints that make up each selector
     *  ::after
     *  element children
 

css-transitions-2/Overview.bs

@@ -137,6 +137,8 @@ are sorted in composite order (first to last) as follows:
     *  element
     *  ::marker
     *  ::before
+    *  any other pseudo-elements not mentioned specifically in this list,
+       sorted in ascending order by the Unicode codepoints that make up each selector
     *  ::after
     *  element children
 

web-animations-1/Overview.bs

@@ -3201,6 +3201,10 @@ If the [=effect target=] is a [=pseudo-element=], the [=target element=] is
 its [=originating element=] and the [=target pseudo-selector=] is as required
 to specify that particular [=pseudo-element=].
 
+Note that not all [=effect targets=] specified in this manner (such as ''::part()''
+pseudo-elements and unsupported pseudo-elements) have
+computed property values defined.
+
 ### Keyframes ### {#keyframes-section}
 
 The <a>effect values</a> for a <a>keyframe effect</a>
@@ -3351,8 +3355,7 @@ an <a>effect target</a> for which computed property values can be calculated.
 1.  Return <var>computed keyframes</var>.
 
 
-<h4 id="the-effect-value-of-a-keyframe-animation-effect">The effect value of
-  a keyframe effect</h4>
+### The effect value of a keyframe effect ### {#the-effect-value-of-a-keyframe-animation-effect}
 
 The <a>effect value</a> of a single property referenced by a <a>keyframe
 effect</a> as one of its <a lt="target property">target properties</a>, for a
@@ -3366,6 +3369,9 @@ given <var>iteration progress</var>, <var ignore=''>current iteration</var> and
 1.  If <a>animation type</a> of the <var>target property</var> is
     <a>not animatable</a> abort this procedure
     since the effect cannot be applied.
+1.  If the  [=keyframe effect=] does not have an [=effect target=],
+    or if the [=effect target=] cannot have computed property values
+    calculated, abort this procedure.
 1.  Define the <dfn>neutral value for composition</dfn> as a value
     which, when combined with an <a>underlying value</a> using the <a
     lt="composite operation add">add</a> <a>composite
@@ -4699,6 +4705,22 @@ interface KeyframeEffect : AnimationEffect {
 
     1.  Set the <a>target element</a> of <var>effect</var> to <var>target</var>.
 
+    1.  Set the [=target pseudo-selector=] to the result corresponding to the first
+        matching condition from below.
+
+        :   If <var>options</var> is a {{KeyframeEffectOptions}} object with a
+            {{KeyframeEffectOptions/pseudoElement}} property,
+        ::  Set the [=target pseudo-selector=] to the value of the
+            {{KeyframeEffectOptions/pseudoElement}} property.
+
+            When assigning this property, the error-handling defined for the
+            {{KeyframeEffect/pseudoElement}} setter on the interface is applied.
+            If the setter requires an exception to be thrown, this procedure
+            must throw the same exception and abort all further steps.
+
+        :   Otherwise,
+        ::  Set the [=target pseudo-selector=] to `null`.
+
     1.  Let <var>timing input</var> be the result corresponding to the first
         matching condition from below.
 
@@ -4807,11 +4829,24 @@ interface KeyframeEffect : AnimationEffect {
 
 :   <dfn attribute for=KeyframeEffect>pseudoElement</dfn>
 ::  The [=target pseudo-selector=].
-    This is `null` if the [=effect target=] is an {{Element}} or is itself `null`.
-    When not `null`, this must be a [=pseudo-element=] selector with
-    [[selectors-4#pseudo-element-syntax|valid syntax]].
-    This will not accept invalid values and will always return the selector in
-    its canonical form (i.e. `::before` instead of `:before`).
+    `null` if this effect has no [=effect target=] or
+    if the [=effect target=] is an element (i.e. not a pseudo-element).
+    When the [=effect target=] is a pseudo-element,
+    this specifies the pseudo-element selector (e.g. `::before`).
+
+    On setting,
+    sets the [=target pseudo-selector=] of the [=animation effect=]
+    to the provided value after applying the following exceptions:
+
+    *   If the provided value is not `null` or a syntactically valid
+        <pseudo-element-selector> the user agent must [=throw=]
+        a {{DOMException}} with error name {{TypeError}} and leave the
+        [=target pseudo-selector=] of this [=animation effect=] unchanged.
+
+    *   If one of the legacy Selectors Level 2 single-colon selectors
+        (':before', ':after', ':first-letter', or ':first-line') is
+        specified, the [=target pseudo-selector=] must be set to the
+        equivalent two-colon selector (e.g. '::before').
 
 :   <dfn attribute for=KeyframeEffect>composite</dfn>
 ::  The <a>composite operation</a> used to composite this