[web-animations-1] Added phase to Animation Timeline w3c#4325 (w3c#4854)

Addresses w3c#4325 

* Added Phase to animation timeline

* Moving inactive timeline definition up to Timeline phase section. Removed unnecessary non-normative explanation of timeline phase

Authored-by: Jordan Taylor <jortaylo@microsoft.com>

Author: JTensai

web-animations-1/Overview.bs

@@ -621,13 +621,6 @@ purpose of synchronization.
 At any given moment, a [=timeline=] has a single current [=time value=] known
 simply as the timeline's <dfn lt="timeline current time">current time</dfn>.
 
-A <a>timeline</a> may not always be able to return a meaningful <a>time
-value</a>, but only an <a>unresolved</a> time value. For example, it may
-be defined relative to a moment that has yet to occur, such as the firing of
-a document's load event.
-A <a>timeline</a> is considered to be <dfn lt="inactive timeline">inactive</dfn>
-when its <a>time value</a> is <a>unresolved</a>.
-
 A <a>timeline</a> is <dfn export lt="monotonically increasing timeline"
 local-lt="monotonically increasing">monotonically increasing</dfn> if its
 reported [=timeline current time|current time=] is always greater than or equal
@@ -708,6 +701,22 @@ animation model to change, but these operations in themselves do not create
 a new [=animation frame=], rather they merely update the current <a>animation
 frame</a>.
 
+### Timeline Phase ### {#timeline-phases}
+
+A [=timeline=] may be in one of four possible 
+<dfn export lt="timeline phase">phases</dfn>:
+
+1.  <dfn export lt="timeline inactive phase">inactive</dfn>
+1.  <dfn export lt="timeline before phase">before</dfn>
+1.  <dfn export lt="timeline active phase">active</dfn>
+1.  <dfn export lt="timeline after phase">after</dfn>
+
+A [=timeline=] in the [=timeline inactive phase|inactive phase=] can
+also be called an <dfn>inactive timeline</dfn>
+
+An [=inactive timeline=] has an [=unresolved=]
+[=timeline current time|current time=].
+
 ### Document timelines ### {#document-timelines}
 
 A <dfn>document timeline</dfn> is a type of <a>timeline</a> that is <a
@@ -721,16 +730,24 @@ time</dfn>.
 Issue(2079): There must be a better term than &ldquo;origin time&rdquo;&mdash;
              it's too similar to &ldquo;time origin&rdquo;.
 
-Prior to establishing the [=time origin=] for its associated document,
-a [=document timeline=] is <a lt="inactive timeline">inactive</a>.
+
+The [=timeline phase|phase=] of a <a>document timeline</a> at a given moment is
+the [=timeline phase|phase=] corresponding to the <em>first</em> matching
+condition from the following:
+
+<div class="switch">
+
+:   If the associated document is not an [=active document=] or its
+    [=time origin=] has not yet been established
+::  &rarr; [=timeline inactive phase|inactive=]
+:   Otherwise,
+::  &rarr; [=timeline active phase|active=]
+
+</div>
 
 After a [=document timeline=] becomes [=inactive timeline|active=], it is
 [=monotonically increasing=].
 
-A <a>document timeline</a> that is associated with a {{Document}} which is not
-an <a>active document</a> is also considered to be
-<a lt="inactive timeline">inactive</a>.
-
 To <a lt="timeline time to origin-relative time">convert a timeline
 time, |timeline time|, to an origin-relative time</a> for a document timeline,
 |timeline|, return the sum of the |timeline time| and |timeline|'s [=origin
@@ -796,7 +813,7 @@ An animation's start time is initially <a>unresolved</a>.
 
 An <a>animation</a> also maintains a <dfn>hold time</dfn> <a>time value</a>
 which is used to fix the animation's output <a>time value</a>, called its
-<a>current time</a>, in circumstances such as pausing</a>.
+<a>current time</a>, in circumstances such as pausing.
 The <a>hold time</a> is initially <a>unresolved</a>.
 
 In order to establish the relative ordering of conflicting <a>animations</a>,
@@ -3989,6 +4006,7 @@ The <code>AnimationTimeline</code> interface {#the-animationtimeline-interface}
 [Exposed=Window]
 interface AnimationTimeline {
     readonly attribute double? currentTime;
+    readonly attribute TimelinePhase phase;
 };
 </pre>
 
@@ -3998,6 +4016,8 @@ interface AnimationTimeline {
 ::  Returns the <a lt="timeline current time">current time</a> for this timeline
     or <code>null</code> if this timeline is <a lt="inactive
     timeline">inactive</a>.
+:   <dfn attribute for=AnimationTimeline>phase</dfn>
+::  Returns the <a lt="timeline phase">phase</a> for this timeline.
 
 </div>
 
@@ -4365,6 +4385,21 @@ enum AnimationReplaceState { "active", "removed", "persisted" };
 :   <code>persisted</code>
 ::  Corresponds to the [=persisted replace state=].
 
+### The <code>TimelinePhase</code> enumeration ### {#the-timelinephase-enumeration}
+
+<pre class='idl'>
+enum TimelinePhase { "inactive", "before", "active", "after" };
+</pre>
+
+:   <code>inactive</code>
+::  Corresponds to the [=timeline inactive phase=].
+:   <code>before</code>
+::  Corresponds to the [=timeline before phase=].
+:   <code>active</code>
+::  Corresponds to the [=timeline active phase=].
+:   <code>after</code>
+::  Corresponds to the [=timeline after phase=].
+
 The <code>AnimationEffect</code> interface {#the-animationeffect-interface}
 ----------------------------------------