From 2ebac2f5fea53bb2094018fb11699583e3596851 Mon Sep 17 00:00:00 2001
From: Majid Valipour <majidvp@chromium.org>
Date: Thu, 30 Apr 2020 16:08:42 -0400
Subject: [PATCH 1/2] [web-animations-1] Add timeline to animate options
 (#5013)

---
 web-animations-1/Overview.bs | 39 +++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index 71008ef3f19..c81eb8605ee 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -5789,6 +5789,7 @@ interface mixin Animatable {
 
 dictionary KeyframeAnimationOptions : KeyframeEffectOptions {
     DOMString id = "";
+    AnimationTimeline? timeline;
 };
 
 dictionary GetAnimationsOptions {
@@ -5821,9 +5822,22 @@ dictionary GetAnimationsOptions {
         of the element on which this method was called as the
         <var>timeline</var> argument.
 
-    1.  If <var>options</var> is a {{KeyframeAnimationOptions}} object,
-        assign the value of the <code>id</code> member of <var>options</var> to
-        <var>animation</var>'s {{Animation/id}} attribute.
+    1.  If <var>options</var> is a {{KeyframeAnimationOptions}} object, run the
+        following steps:
+
+        1.  Assign the value of the <code>id</code> member of <var>options</var>
+            to <var>animation</var>'s {{Animation/id}} attribute.
+
+        2.  Let <var>timeline</var> be the <code>timeline</code> member of
+            <var>options</var> or, if <code>timeline</code> member of
+            <var>options</var> is missing, be the
+            <a>default document timeline</a> of the {{Document}}
+            <a lt="document associated with a window">associated</a> with the
+            {{Window}} that is the <a>current global object</a>.
+
+        3.  Run the procedure to <a>set the timeline of an animation</a> on
+            <var>animation</var> passing <var>timeline</var> as the <var>new
+            timeline</var>.
 
     1.  Run the procedure to <a>play an animation</a> for
         <var>animation</var> with the <var>auto-rewind</var> flag set to true.
@@ -5856,10 +5870,14 @@ animation.play();</pre>
         same interpretation as defined for that constructor.
     :   <dfn argument for="Animatable/animate(keyframes, options)"
         lt="options">options</dfn>
-    ::  The timing and animation options for the created {{KeyframeEffect}}.
-        This value is passed to the {{KeyframeEffect(target, keyframes,
-        options)}} constructor as the <var>options</var> parameter and has the
-        same interpretation as defined for that constructor.
+    ::  The timing and animation options for the created {{KeyframeEffect}} and
+        {{Animation}}.
+        For {{KeyframeEffect}} this value is passed to the
+        {{KeyframeEffect(target, keyframes, options)}} constructor as the
+        <var>options</var> parameter and has the same interpretation as defined
+        for that constructor. For {{Animation}}, <code>id</code> and
+        <code>timeline</code> member gets assigned to the created
+        {{Animation}}'s {{Animation/id}} and {{Animation/timeline}} attributes.
 
     </div>
 
@@ -5910,6 +5928,13 @@ animation.play();</pre>
 ::  The string to assign to the generated {{Animation}}'s {{Animation/id}}
     attribute.
 
+:   <dfn dict-member for=KeyframeAnimationOptions>timeline</dfn>
+::  An optional value which, if present, specifies the <a>timeline</a>
+    with which to associate the newly-created <a>animation</a>.
+    If missing, the <a>default document timeline</a> of the
+    {{Document}} <a lt="document associated with a window">associated</a>
+    with the {{Window}} that is the <a>current global object</a> is used.
+
 :   <dfn dict-member for=GetAnimationsOptions>subtree</dfn>
 ::  If true, indicates that [=animations=] associated with an
     [=animation effect=] whose [=target element=] is a [=descendant=]

From d1179543665b223ac6e8abf5ed91050ac46faa1c Mon Sep 17 00:00:00 2001
From: Majid Valipour <majidvp@chromium.org>
Date: Thu, 7 May 2020 16:00:39 -0400
Subject: [PATCH 2/2] [scroll-animations-1] Addres bbirtles@ feedback (#5013)

---
 web-animations-1/Overview.bs | 37 +++++++++++-------------------------
 1 file changed, 11 insertions(+), 26 deletions(-)

diff --git a/web-animations-1/Overview.bs b/web-animations-1/Overview.bs
index c81eb8605ee..9368e625cdc 100644
--- a/web-animations-1/Overview.bs
+++ b/web-animations-1/Overview.bs
@@ -5814,30 +5814,21 @@ dictionary GetAnimationsOptions {
         If the above procedure causes an exception to be thrown, propagate the
         exception and abort this procedure.
 
+    1.  If <var>options</var> is a {{KeyframeAnimationOptions}} object, let
+        <var>timeline</var> be the <code>timeline</code> member of
+        <var>options</var> or, if <code>timeline</code> member of
+        <var>options</var> is missing, be the <a>default document timeline</a>
+        of the <a>node document</a> of the element on which this method was
+        called.
+
     1.  Construct a new {{Animation}} object, <var>animation</var>, in
         the <a>relevant Realm</a> of <var>target</var> by using the
         same procedure as the {{Animation()}} constructor, passing
-        <var>effect</var> as the argument of the same name, and
-        the <a>default document timeline</a> of the <a>node document</a>
-        of the element on which this method was called as the
-        <var>timeline</var> argument.
-
-    1.  If <var>options</var> is a {{KeyframeAnimationOptions}} object, run the
-        following steps:
-
-        1.  Assign the value of the <code>id</code> member of <var>options</var>
-            to <var>animation</var>'s {{Animation/id}} attribute.
-
-        2.  Let <var>timeline</var> be the <code>timeline</code> member of
-            <var>options</var> or, if <code>timeline</code> member of
-            <var>options</var> is missing, be the
-            <a>default document timeline</a> of the {{Document}}
-            <a lt="document associated with a window">associated</a> with the
-            {{Window}} that is the <a>current global object</a>.
+        <var>effect</var> and <var>timeline</var> as arguments of the same name.
 
-        3.  Run the procedure to <a>set the timeline of an animation</a> on
-            <var>animation</var> passing <var>timeline</var> as the <var>new
-            timeline</var>.
+    1.  If <var>options</var> is a {{KeyframeAnimationOptions}} object,
+        assign the value of the <code>id</code> member of <var>options</var>
+        to <var>animation</var>'s {{Animation/id}} attribute.
 
     1.  Run the procedure to <a>play an animation</a> for
         <var>animation</var> with the <var>auto-rewind</var> flag set to true.
@@ -5872,12 +5863,6 @@ animation.play();</pre>
         lt="options">options</dfn>
     ::  The timing and animation options for the created {{KeyframeEffect}} and
         {{Animation}}.
-        For {{KeyframeEffect}} this value is passed to the
-        {{KeyframeEffect(target, keyframes, options)}} constructor as the
-        <var>options</var> parameter and has the same interpretation as defined
-        for that constructor. For {{Animation}}, <code>id</code> and
-        <code>timeline</code> member gets assigned to the created
-        {{Animation}}'s {{Animation/id}} and {{Animation/timeline}} attributes.
 
     </div>