[web-animations-2] Specify Animation progress API (w3c#9937)

Define animation progress calculation, where:
* infinite duration results in 0 progress
* progress is clamped to [0,1] if before the start or after the end time.

Author: DavMila

web-animations-2/Overview.bs

@@ -969,6 +969,41 @@ Add the following sentence:
 
 </div>
 
+### Calculating the progress of an animation ### {#the-progress-of-an-animation}
+
+  An animation's <dfn export for=animation>progress</dfn> is the ratio of its
+   [=animation/current time=] to its [=associated effect end=].
+
+  <div algorithm="calculate animation progress">
+    The [=animation/progress=] of an [=animation=], |animation|, is calculated as follows:
+
+    <dl class=switch>
+
+    : If <em>any</em> of the following are true:
+      * |animation| does not have an [=animation/associated effect=], or
+      * |animation|'s [=animation/current time=] is an [=unresolved=] time value,
+    ::
+        |animation|'s [=animation/progress=] is null.
+    : If |animation|'s [=associated effect end=] is zero,
+    ::
+        : If |animation|'s [=animation/current time=] is negative,
+        :: |animation|'s [=animation/progress=] is zero.
+
+        : Otherwise,
+        :: |animation|'s [=animation/progress=] is one.
+    : If |animation|'s [=associated effect end=] is infinite,
+    ::
+        |animation|'s [=animation/progress=] is zero.
+    : Otherwise,
+    ::
+      <blockquote>
+        <code><a for="animation">progress</a> = min(max([=animation/current time=] / |animation|'s [=associated effect end=], 0), 1)
+        </code>
+      </blockquote>
+
+    </dl>
+  </div>
+
 
 <h3 id="animation-effects">Animation effects</h3>
 
@@ -2390,7 +2425,7 @@ Update the attribute type for currentTime.
 <h3 id="the-animation-interface">The <code>Animation</code> interface</h3>
 
 Update the startTime and currentTime of the Animation interface, and add
-rangeStart and rangeEnd as follows:
+rangeStart, rangeEnd, and progress as follows:
 
 <pre class="idl">
 [Exposed=Window]
@@ -2399,6 +2434,7 @@ partial interface Animation {
     attribute CSSNumberish?       currentTime;
     attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart;
     attribute (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd;
+    readonly attribute double? progress;
 };
 </pre>
 
@@ -2443,6 +2479,10 @@ Add:
 >      <a href="#dom-keyframeanimationoptions-rangeend">rangeEnd</a>.
 >     When reading the attribute, the returned value is either a
 >     {{TimelineRangeOffset}} or the {{DOMString}} "normal".
+>
+> :  <dfn attribute for=Animation>progress</dfn>
+> ::  Specifies the [=animation/progress=] of the <a>animation</a> as a proportion of its
+>     [=associated effect end=].
 </div>
 
 <h3 id="the-animationeffect-interface">The <code>AnimationEffect</code> interface</h3>