[web-animations-1] Export and namespace animation play states

Fixes w3c#8003.

Author: birtles

web-animations-1/Overview.bs

@@ -1106,7 +1106,7 @@ previously did not have a pending task, or when the animation is canceled (see
     animation when the <a>Promise object</a> is resolved.
 
     For example, in the following code fragment, the state of the animation
-    will be <a lt="running play state">running</a> when the
+    will be [=play state/running=] when the
     <a>current ready promise</a> is resolved.
     This is because the <code>play</code> operation occurs while a <a>pending
     play task</a> is still queued and hence the <a>current ready promise</a>
@@ -1332,8 +1332,8 @@ The procedure to <dfn>pause an animation</dfn>, <var>animation</var>, is as
 follows:
 
 1.  If <var>animation</var> has a <a>pending pause task</a>, abort these steps.
-1.  If the <a>play state</a> of <var>animation</var> is <a
-    lt="paused play state">paused</a>, abort these steps.
+1.  If the <a>play state</a> of <var>animation</var> is [=play state/paused=],
+    abort these steps.
 1.  Let <var>seek time</var> be a <a>time value</a> that is initially <a>unresolved</a>.
 1.  Let <var>has finite timeline</var> be true if |animation| has an associated
     <a>timeline</a> that is not [=monotonically increasing=].
@@ -1402,10 +1402,10 @@ follows:
         [=playback rate=]</code>.
 
         Note: The <a>hold time</a> might be already set if the animation
-        is <a lt="finished play state">finished</a>, or if the animation
-        has a <a>pending play task</a>.
+        is [=play state/finished=],
+        or if the animation has a <a>pending play task</a>.
         In either case we want to preserve the <a>hold time</a> as we
-        enter the <a lt="paused play state">paused</a> state.
+        enter the [=play state/paused=] state.
 
     1.  [=Apply any pending playback rate=] on |animation|.
 
@@ -1509,7 +1509,7 @@ until it reaches zero.
 
 A running animation that has reached this boundary (or overshot it) and has a
 <a lt="unresolved">resolved</a> [=start time=]
-is said to be <a lt="finished play state">finished</a>.
+is said to be [=play state/finished=].
 
 The crossing of this boundary is checked on each modification to the
 animation object using the procedure to <a>update an animation's finished
@@ -1599,16 +1599,16 @@ follows:
 1.  Set the <a>previous current time</a> of <var>animation</var> be the
     result of calculating its [=animation/current time=].
 1.  Let <var>current finished state</var> be true if the <a>play
-    state</a> of <var>animation</var> is
-    <a lt="finished play state">finished</a>.
+    state</a> of <var>animation</var> is [=play state/finished=].
     Otherwise, let it be false.
 1.  If <var>current finished state</var> is true and the <a>current finished
     promise</a> is not yet resolved, perform the following steps:
 
     1.  Let <dfn>finish notification steps</dfn> refer to the following
         procedure:
-        1.  If <var>animation</var>'s <a>play state</a> is not equal to <a
-            lt="finished play state">finished</a>, abort these steps.
+        1.  If <var>animation</var>'s <a>play state</a> is not equal to
+            [=play state/finished=],
+            abort these steps.
         1.  <a lt="resolve a promise">Resolve</a> <var>animation</var>'s
             <a>current finished promise</a> object with
             <var>animation</var>.
@@ -1654,7 +1654,7 @@ follows:
 
 Typically, notification about the finished state of an animation is
 performed asynchronously. This allows for the animation to temporarily
-enter the <a lt="finished play state">finished state</a> without
+enter the <a>finished play state</a> without
 triggering events to be fired or promises to be resolved.
 
 For example, in the following code fragment, <code>animation</code> temporarily
@@ -1737,8 +1737,8 @@ for <var>animation</var> defined below:
     1.  Let the <a>hold time</a> be <a>unresolved</a>.
 
         <div class="note">Typically the <a>hold time</a> will already be
-        unresolved except in the case when the animation was previously <a
-        lt="idle play state">idle</a>.</div>
+        unresolved except in the case when the animation was previously
+        [=play state/idle=].</div>
 
     1.  Cancel the <a>pending pause task</a>.
 
@@ -1764,7 +1764,7 @@ The procedure to <dfn>cancel an animation</dfn> for <var>animation</var> is
 as follows:
 
 1.  If <var>animation</var>'s <a>play state</a> is <em>not</em>
-    <a lt="idle play state">idle</a>, perform the following steps:
+    [=play state/idle=], perform the following steps:
     1.  Run the procedure to <a>reset an animation's pending tasks</a> on
         <var>animation</var>.
     1.  <a lt="reject a Promise">Reject</a> the <a>current finished promise</a>
@@ -1830,7 +1830,7 @@ The [=playback rate=] is initially 1.
 
 Setting an animation's [=playback rate=]
 to zero effectively pauses the animation (however, the <a>play state</a>
-does not necessarily become <a lt="paused play state">paused</a>).
+does not necessarily become [=play state/paused=]).
 
 #### Setting the playback rate of an animation #### {#setting-the-playback-rate-of-an-animation}
 
@@ -1888,7 +1888,7 @@ The procedure to <dfn>seamlessly update the playback rate</dfn> an
     before updating |animation|'s [=effective playback rate=] since,
     in the following logic,
     we want to immediately apply the [=pending playback rate=] of |animation|
-    if it is <em>currently</em> <a lt="finished play state">finished</a>
+    if it is <em>currently</em> [=play state/finished=]
     regardless of whether or not it will still be finished after we
     apply the [=pending playback rate=].
 
@@ -1907,16 +1907,16 @@ The procedure to <dfn>seamlessly update the playback rate</dfn> an
         this case.
 
     :   If |previous play state| is <a lt="idle play state">idle</a>
-        or <a lt="paused play state">paused</a>, or
+        or [=play state/paused=], or
         |animation|'s [=animation/current time=] is [=unresolved=],
 
     ::  [=Apply any pending playback rate=] on |animation|.
 
         Note: the second condition above is required so that if we have a
-        [=running play state|running=] animation with an unresolved current time
+        [=play state/running=] animation with an unresolved current time
         and no pending play task, we do not attempt to play it below.
 
-    :   If |previous play state| is <a lt="finished play state">finished</a>,
+    :   If |previous play state| is [=play state/finished=],
 
     ::  1.  Let the |unconstrained current time| be the result of calculating
             the [=animation/current time=] of |animation|
@@ -1976,25 +1976,25 @@ The procedure to <dfn>reverse an animation</dfn> of <a>animation</a>
 ### Play states ### {#play-states}
 
 An <a>animation</a> may be described as being in one of the following
-<dfn lt="play state">play states</dfn> for each of which, a
-non-normative description is also provided:
+<dfn lt="play state" export for="animation">play states</dfn>
+for each of which, a non-normative description is also provided:
 
 <div class=informative-bg>
 
-:   <a lt="idle play state">idle</a>
+:   [=play state/idle=]
 ::  The [=animation/current time=] of the animation is <a>unresolved</a> and
     the <a>start time</a> of the animation is <a>unresolved</a> and
     there are no pending tasks.
     In this state the animation has no effect.
-:   <a lt="running play state">running</a>
+:   [=play state/running=]
 ::  The animation has a resolved [=animation/current time=] that changes on each
     <a>animation frame</a> (provided the [=playback rate=] is not zero
     and the <a>timeline</a> is [=inactive timeline|active=] and
     [=monotonically increasing=]).
-:   <a lt="paused play state">paused</a>
+:   [=play state/paused=]
 ::  The animation has been suspended and the [=animation/current time=]
     is no longer changing.
-:   <a lt="finished play state">finished</a>
+:   [=play state/finished=]
 ::  The animation has reached the natural boundary of its playback range
     and the [=animation/current time=] is no longer updating.
 
@@ -2014,13 +2014,13 @@ condition from the following:
         <em>and</em>
     *   <var>animation</var> does <em>not</em> have <em>either</em>
         a <a>pending play task</a> <em>or</em> a <a>pending pause task</a>,
-::  &rarr; <dfn lt="idle play state">idle</dfn>
+::  &rarr; <dfn for="play state" local-lt="idle play state" export>idle</dfn>
 :   <em>Either</em> of the following conditions are true:
     *   <var>animation</var> has a <a>pending pause task</a>, <em>or</em>
     *   <em>both</em> the [=start time=] of
         <var>animation</var> is <a>unresolved</a> <em>and</em> it does
         <em>not</em> have a <a>pending play task</a>,
-::  &rarr; <dfn lt="paused play state">paused</dfn>
+::  &rarr; <dfn for="play state" local-lt="paused play state" export>paused</dfn>
 :   For <var>animation</var>, [=animation/current time=] is <a
     lt=unresolved>resolved</a> and <em>either</em> of the following conditions
     are true:
@@ -2029,9 +2029,9 @@ condition from the following:
         <em>or</em>
     *   |animation|'s [=effective playback rate=] &lt; 0 and
         [=animation/current time=] &le; 0,
-::  &rarr; <dfn lt="finished play state">finished</dfn>
+::  &rarr; <dfn for="play state" local-lt="finished play state" export>finished</dfn>
 :   Otherwise,
-::  &rarr; <dfn lt="running play state">running</dfn>
+::  &rarr; <dfn for="play state" local-lt="running play state" export>running</dfn>
 
 </div>
 
@@ -2041,8 +2041,8 @@ Note that the <a>paused play state</a> effectively
 "wins" over the <a>finished play state</a>.
 
 However, an animation that is paused outside of its natural playback range can
-be converted from a <a lt="paused play state">paused</a>
-animation into a <a lt="finished play state">finished</a> animation
+be converted from a [=play state/paused=] animation
+into a [=play state/finished=] animation
 without restarting by setting the [=start time=] such as below:
 
 <div class='example'><pre class='lang-javascript'>
@@ -2384,7 +2384,7 @@ of the following conditions are met:
 
 1.  the <a>animation effect</a> is in the [=animation effect/active phase=], and
 2.  the <a>animation effect</a> is <a>associated with an animation</a> that is not
-    <a lt="finished play state">finished</a>.
+    [=play state/finished=].
 
 An <a>animation effect</a> is <dfn>current</dfn> if <em>any</em>
 of the following conditions are true:
@@ -3925,7 +3925,7 @@ if <em>all</em> of the following conditions are true:
     That is, it is <em>not</em>
     a CSS animation with an [=owning element (animation)|owning element=],
     nor a CSS transition with an [=owning element (transition)|owning element=].
-*   The [=animation=]'s [=play state=] is [=finished play state|finished=].
+*   The [=animation=]'s [=play state=] is [=play state/finished=].
 *   The [=animation=]'s [=replace state=] is <em>not</em>
     [=removed replace state|removed=].
 *   The [=animation=] is associated with a [=monotonically increasing=]
@@ -6089,8 +6089,8 @@ dictionary AnimationPlaybackEventInit : EventInit {
 :   <dfn attribute for=AnimationPlaybackEvent>currentTime</dfn>
 ::  The [=animation/current time=] of the [=animation=] that
     generated the event at the moment the event as queued.
-    This will be <code class=esvalue>null</code> if the [=animation=] was <a
-    lt="idle play state">idle</a> at the time the event was generated.
+    This will be <code class=esvalue>null</code> if the [=animation=] was
+    [=play state/idle=] at the time the event was generated.
 :   <dfn attribute for=AnimationPlaybackEvent>timelineTime</dfn>
 ::  The [=time value=] of the [=timeline=] with which the [=animation=] that
     generated the event is associated at the moment the event was queued.