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

Author: fantasai

web-animations-2/Overview.bs

@@ -3043,6 +3043,57 @@ with which it is associated is updated.
 
 </div>
 
+The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}
+----------------------------------------
+
+The {{KeyframeAnimationOptions}} dictionary interface
+is modified to add the following members:
+
+<pre class='idl'>
+dictionary TimelineRangeOffset {
+  CSSOMString? rangeName;
+  CSSNumericValue offset;
+};
+
+partial dictionary KeyframeAnimationOptions : KeyframeEffectOptions {
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+    (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+};
+</pre>
+
+<div class="members">
+:   <dfn dict-member for=KeyframeAnimationOptions>rangeStart</dfn>
+::  If present and not "normal",
+    specifies the start of the <a>animation</a>’s [=animation attachment range=].
+    A {{DOMString}} value is parsed as an 'animation-range-end' value
+    to yield a {{TimelineRangeOffset}} {{TimelineRangeOffset/rangeName}}
+    and {{TimelineRangeOffset/offset}}
+    or alternatively a {{CSSKeywordValue}} with the {{CSSKeywordValue/value}} of "normal";
+    a {{CSSNumericValue}} is interpreted as a {{TimelineRangeOffset}}
+    with that {{TimelineRangeOffset/offset}} and a null {{TimelineRangeOffset/rangeName}}.
+
+:   <dfn dict-member for=KeyframeAnimationOptions>rangeEnd</dfn>
+::  If present and not "normal",
+    specifies the end of the <a>animation</a>’s [=animation 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}}.
+</div>
+
+Passing a {{CSSKeywordValue}} with a {{CSSKeywordValue/value}} other than "normal"
+as the {{KeyframeAnimationOptions/rangeStart}} or {{KeyframeAnimationOptions/rangeEnd}} value
+to any API defined to accept {{KeyframeAnimationsOptions}}
+[=throws=] a <span class="exceptionname">TypeError</span>.
+
+Note: The {{TimelineRangeOffset/rangeName}} and {{TimelineRangeOffset/offset}}
+values of {{KeyframeAnimationOptions/rangeStart}} and {{KeyframeAnimationOptions/rangeEnd}}
+are interpreted as defined for 'animation-range-start'/'animation-range-end',
+and affect the animation accordingly.
+
+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.