[web-animations-1][web-animations-2] Tidy up effect stack definitions

Fixes w3c#8497.

Author: birtles

web-animations-1/Overview.bs

@@ -3777,38 +3777,40 @@ amongst other factors.
 
 ### The effect stack ### {#the-effect-stack}
 
-Associated with each property <a lt="target property">targeted</a>
-by one or more <a>keyframe effects</a> is an <dfn>effect
-stack</dfn> that establishes the relative composite order of the <a>keyframe
-effects</a>.
+An <dfn>effect stack</dfn> is associated with each property
+[=target property|targeted=] by one or more [=keyframe effects=].
+The [=effect stack=] establishes the relative composite order of
+[=keyframe effects=].
 
 The relative
 <dfn lt="animation composite order" local-lt="composite order" export>composite order</dfn>
-of any two <a>keyframe effects</a>, <var>A</var> and <var>B</var>,
-within an <a>effect stack</a> is
+of any two [=keyframe effects=], |A| and |B|,
+within an [=effect stack=] is
 established by comparing their properties as follows:
 
-1.  Let the <dfn>associated animation of an animation effect</dfn>
-    be the <a>animation</a> <a
-    lt="associated with an animation">associated</a> with the
-    <a>animation effect</a> that affecting the property with which this
-    <a>effect stack</a> is associated.
-2.  Sort <var>A</var> and <var>B</var> by applying the following
-    conditions in turn until the order is resolved,
-
-    1.  If <var>A</var> and <var>B</var>'s associated animations differ by
-        <a lt="animation class">class</a>, sort by any inter-class composite
-        order defined for the corresponding classes.
-    1.  If <var>A</var> and <var>B</var> are still not sorted,
-        sort by any <a lt="animation class">class</a>-specific composite order
-        defined by the common class of <var>A</var> and <var>B</var>'s
-        associated animations.
-    1.  If <var>A</var> and <var>B</var> are still not sorted,
-        sort by their corresponding position in the <a>global animation
-        list</a>.
-
-<a>Animation effects</a> that sort earlier have <em>lower</em>
-composite order.
+1.  Let the <dfn for="animation effect"
+    lt="associated animation">associated animation of an animation effect</dfn>
+    be the [=animation=] [=associated with an animation|associated=]
+    with the [=animation effect=].
+
+1.  Sort |A| and |B| by applying the following conditions in turn until the
+    order is resolved,
+
+    1.  If |A| and |B|'s [=animation effect/associated animations=] differ
+        by [=animation class|class=],
+        sort by any inter-class composite order defined
+        for the corresponding classes.
+
+    1.  If |A| and |B| are still not sorted,
+        sort by any [=animation class|class=]-specific composite order
+        defined by the common class of |A| and |B|'s
+        [=animation effect/associated animations=].
+
+    1.  If |A| and |B| are still not sorted,
+        sort by the position of their [=animation effect/associated animations=]
+        in the [=global animation list=].
+
+[=Animation effects=] that sort earlier have <em>lower</em> composite order.
 
 ### Calculating the result of an effect stack ### {#calculating-the-result-of-an-effect-stack}
 
@@ -3867,8 +3869,8 @@ Applying a <a>composited value</a> to a <a>target property</a>
 is achieved by adding a specified value to the CSS cascade.
 
 The level of the cascade to which this specified value is added
-depends on the <a lt="animation class">class</a> of the <a>animation</a> <a
-lt="associated animation of an animation effect">associated with</a> the
+depends on the <a lt="animation class">class</a> of the <a>animation</a>
+[=animation effect/associated animation|associated with=] the
 effect with the highest composite order in the <a>effect stack</a> for a given
 property.
 By default, the specified value is added to the "Animation
@@ -3896,8 +3898,8 @@ property</a> is applied using the following process.
     [[#calculating-the-result-of-an-effect-stack]]).
 4.  Insert the <a>composited value</a> into the CSS cascade at the
     level defined for the <a lt="animation class">class</a> of the
-    <a>animation</a> <a
-    lt="associated animation of an animation effect">associated with</a> the
+    <a>animation</a>
+    [=animation effect/associated animation|associated with=] the
     effect at the top of the <a>effect stack</a> established for the target
     property.
 

web-animations-2/Overview.bs

@@ -53,15 +53,13 @@ dl.switch > dt > ul > li {
 
 <pre class='metadata'>
 Title: Web Animations Level 2
-Status: FPWD
-Prepare for TR: yes
-Date: 2023-02-21
+Status: ED
 Warning: not ready
 Work Status: Exploring
 Shortname: web-animations
 ED: https://drafts.csswg.org/web-animations-2/
 TR: https://www.w3.org/TR/web-animations-2/
-Version history: https://github.com/w3c/csswg-drafts/commits/master/web-animations-1
+Version history: https://github.com/w3c/csswg-drafts/commits/master/web-animations-2
 Level: 2
 
 Group: csswg
@@ -2000,6 +1998,11 @@ The procedure for sorting effects appends the following step:
 >         same <a>animation</a> since otherwise the order would have been
 >         resolved in the previous step.)
 
+Issue: The "associated animation of an animation effect" definition used when
+sorting animation effects needs to be revised to use the [=associated with an
+animation=] definition introduced in this level of the specification so that it
+correctly handles group effects.
+
 <h3 id="effect-accumulation-section">Effect accumulation</h3>
 
 Similar to the compositing performed between <a>effect values</a>