[scroll-animations-1][web-animations-1] Added phase calculation for ScrollTimeline #4325 (#5186)

Added section describing how scroll timeline phase is calculated. Inclusive end exception that was removed in a previous PR has been added back in through the phase calculation (an explanatory note for the exception has been included).

Also reformatted the section for calculating current time to match the new phase calculation formatting.

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

Author: JTensai

scroll-animations-1/Overview.bs

@@ -30,6 +30,11 @@ urlPrefix: https://w3c.github.io/web-animations/; type: dfn; spec: web-animation
     text: start delay
     text: target effect end
     text: timeline
+    text: phase; url: timeline-phase
+    text: inactive phase; url: timeline-inactive-phase
+    text: before phase; url: timeline-before-phase
+    text: active phase; url: timeline-active-phase
+    text: after phase; url: timeline-after-phase
 urlPrefix: https://drafts.csswg.org/cssom-view/; type: dfn; spec: cssom-view-1
     text: CSS layout box
     text: overflow direction; url: overflow-directions
@@ -701,35 +706,86 @@ The procedure to calculate <dfn>effective scroll range</dfn> of a
 
     </div>
 
+
+### The phase of a {{ScrollTimeline}} ### {#phase-algorithm}
+
+The [=phase=] of a {{ScrollTimeline}} is calculated as follows:
+
+1.  If <em>any</em> of the following are true:
+
+    * {{source}} is null, or
+    * {{source}} does not currently have a [=CSS layout box=], or
+    * {{source}}'s layout box is not a [=scroll container=], or
+    * [=effective scroll range=] is null.
+
+    The [=phase=] is [=inactive phase|inactive=] and abort remaining steps.
+
+1.  Let <var>current scroll offset</var> be the current scroll offset of
+    {{source}} in the direction specified by {{orientation}}.
+
+1.  The [=phase=] is the result corresponding to the first matching condition
+    from below:
+
+<div class="switch">
+
+:   If <var>current scroll offset</var> is less than [=effective start offset=]:
+::  The [=phase=] is [=before phase|before=]
+
+:   If <var>current scroll offset</var> is greater than or equal to [=effective
+    end offset=] <em>and</em> [=effective end offset=] is less than the maximum
+    scroll offset of {{source}} in {{orientation}}:
+
+::  The [=phase=] is [=after phase|after=]
+
+Note: In web animations, in general ranges are normally exclusive of their end
+point. But there is an exception here for the scroll timeline active range as it
+may in some cases be inclusive of its end. In particular if the timeline end
+offset is the maximum scroll offset we include it in active range because it is
+not possible for user to scroll passed this point and not including this value
+in the active range would leave to animations that would not be active at the
+very last scroll position.
+
+:   Otherwise,
+::  The [=phase=] is [=active phase|active=].
+
+</div>
+
 ### The current time of a {{ScrollTimeline}} ### {#current-time-algorithm}
 
 The [=current time=] of a {{ScrollTimeline}} is calculated as follows:
 
-1.  If {{source}} is null, does not currently have a [=CSS layout box=], or if
-    its layout box is not a [=scroll container=], return an unresolved time
-    value.
+1.  If <em>any</em> of the following are true:
 
-1.  Otherwise, let <var>current scroll offset</var> be the current scroll offset
-    of {{source}} in the direction specified by {{orientation}}.
+    * {{source}} is null, or
+    * {{source}} does not currently have a [=CSS layout box=], or
+    * {{source}}'s layout box is not a [=scroll container=], or
+    * [=effective scroll range=] is null.
 
-1.  If [=effective scroll range=] is null, return an unresolved time value.
+    The [=current time=] is an unresolved time value and abort remaining steps.
 
-1.  If <var>current scroll offset</var> is less than [=effective start offset=],
-    return 0.
+1.  Let <var>current scroll offset</var> be the current scroll offset of
+    {{source}} in the direction specified by {{orientation}}.
 
-    Issue(4325): Define what the correct timeline state is based on scroll
-    offset.
+1.  The [=current time=] is the result corresponding to the first matching
+    condition from below:
 
-1.  If <var>current scroll offset</var> is greater than or equal to [=effective
-    end offset=], return [=effective time range=].
+<div class="switch">
+
+:   If <var>current scroll offset</var> is less than [=effective start offset=]:
+::  The [=current time=] is 0.
+
+:   If <var>current scroll offset</var> is greater than or equal to [=effective
+    end offset=]:
+::  The [=current time=] is the [=effective time range=].
 
-1.  Return the result of evaluating the following expression:
+:   Otherwise,
+::  The [=current time=] is the result of evaluating the following expression:
 
     <blockquote>
       <code>(<var>current scroll offset</var> - [=effective start offset=]) / [=effective scroll range=] &times; [=effective time range=]</code>
     </blockquote>
 
-
+</div>
 
 Note: To be considered active a scroll timeline requires its [=effective start
 offset=] and its [=effective end offset=] to be non-null. This means that for