[web-animations-2] Add rangeStart/rangeEnd to Animatable interface #7589

Author: fantasai

web-animations-2/Overview.bs

@@ -3028,10 +3028,40 @@ with which it is associated is updated.
 
 </ins>
 
-<h3 id="the-animatable-interface">The <code>Animatable</code> interface</h3>
+The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}
+----------------------------------------
 
-<div class="methods">
+Objects that may be the target of an {{KeyframeEffect}} object implement
+the {{Animatable}} interface mixin.
+
+<pre class='idl'>
+interface mixin Animatable {
+    Animation           animate(object? keyframes,
+                                optional (unrestricted double or KeyframeAnimationOptions) options = {});
+    sequence&lt;Animation&gt; getAnimations(optional GetAnimationsOptions options = {});
+};
+
+dictionary TimelineRangeOffset {
+  CSSOMString? rangeName;
+  CSSNumericValue offset;
+};
+
+dictionary KeyframeAnimationOptions : KeyframeEffectOptions {
+    DOMString id = "";
+    AnimationTimeline? timeline;
+
+    (TimelineRangeOffset or CSSNumericValue or DOMString) rangeStart = "normal";
+    (TimelineRangeOffset or CSSNumericValue or DOMString) rangeEnd = "normal";
+};
 
+dictionary GetAnimationsOptions {
+    boolean subtree = false;
+};
+</pre>
+
+ISSUE: Should rangeStart/rangeEnd also accept CSSNumericValue directly (for cases that don't want a rangeName)?
+
+<div class="methods">
 :   <dfn method for=Animatable lt="getAnimations()">
     sequence&lt;Animation&gt; getAnimations()</dfn>
 ::  Add:
@@ -3043,6 +3073,41 @@ with which it is associated is updated.
 
 </div>
 
+<div class="members">
+:   <dfn dict-member for=KeyframeAnimationOptions>id</dfn>
+::  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>.
+
+:   <dfn dict-member for=KeyframeAnimationOptions>rangeStart</dfn>
+::  An optional value which, if present,
+    specifies the start of the <a>animation</a>’s [=timeline attachment range=].
+    A {{DOMString}} value is parsed as an 'animation-range-end' value
+    to yield a {{TimelineRangeOffset}} {{TimelineRangeOffset/rangeName}}
+    and {{TimelineRangeOffset/offset}};
+    a {{CSSNumericValue}} is interpreted as a {{TimelineRangeOffset}}
+    with that {{TimelineRangeOffset/offset}} and a null {{TimelineRangeOffset/rangeName}}.
+    The {{TimelineRangeOffset/rangeName}} and {{TimelineRangeOffset/offset}}
+    are the interpreted as defined for 'animation-range-end'.
+
+:   <dfn dict-member for=KeyframeAnimationOptions>rangeEnd</dfn>
+::  An optional value which, if present,
+    specifies the end of the <a>animation</a>’s [=timeline attachment range=].
+    A {{DOMString}} value is parsed as an 'animation-range-end' value
+    to yield a {{TimelineRangeOffset}} {{TimelineRangeOffset/rangeName}}
+    and {{TimelineRangeOffset/offset}};
+    a {{CSSNumericValue}} is interpreted as a {{TimelineRangeOffset}}
+    with that {{TimelineRangeOffset/offset}} and a null {{TimelineRangeOffset/rangeName}}.
+    The {{TimelineRangeOffset/rangeName}} and {{TimelineRangeOffset/offset}}
+    are the interpreted as defined for 'animation-range-end'.
+</div>
+
+See [[web-animations-1#the-animatable-interface-mixin]] for further description.
+
 <h3 id="the-animationplaybackevent-interface">The <code>AnimationPlaybackEvent</code> interface </h3>
 
 Replace double with CSSNumberish as the type for currentTime and timelineTime.