[scroll-animations-1] Removed fill from ScrollTimeline (w3c#4750)

* Fixed edit link by correcting shortname. Removed fill from ScrollTimeline in favor of returning Infinity values for before start and after end states of the timeline.

* Removing unecessary editor

* Swapped infinity values for 0 and time range.

* Updated examples to include forward fill modes so that effects remain after scrolling past the end of the timeline

* Added TODO to revisit the spec when animation timeline state has been more discussed

Author: JTensai

scroll-animations-1/Overview.bs

@@ -7,7 +7,7 @@ Work Status: exploring
 Group: CSSWG
 URL: https://drafts.csswg.org/scroll-animations-1/
 ED: https://drafts.csswg.org/scroll-animations-1/
-Shortname: scroll-animations
+Shortname: scroll-animations-1
 Abstract: Defines an API and markup for creating animations that are either
           triggered by or tied to the scroll offset of a scroll container.
 Editor: Brian Birtles <bbirtles@mozilla.com>
@@ -184,6 +184,7 @@ Using the CSS markup:
   }
   #union-circle {
     animation-name: union-circle;
+    animation-fill-mode: forwards;
     animation-timeline: scroll(element(#container), vertical, "250px", "300px");
   }
   @keyframes left-circle {
@@ -214,7 +215,7 @@ if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   var right = leftCircle.animate({ transform: 'translate(350px)' }, 1000);
   right.timeline = circleTimeline;
 
-  var union = unionCircle.animate({ opacity: 1 }, 1000);
+  var union = unionCircle.animate({ opacity: 1 }, { duration: 1000, fill: "forwards" });
   union.timeline = new ScrollTimeline({
     scrollSource: scrollableElement,
     startScrollOffset: '250px',
@@ -257,6 +258,7 @@ as follows:
     height: 30px;
     background: red;
     animation: progress 1s linear;
+    animation-fill-mode: forwards;
     animation-timeline: scroll(element(#body));
   }
 }
@@ -266,7 +268,7 @@ If we use this API for this case, the example code will be as follow:
 
 <pre class='lang-javascript'>
 if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
-  var animation = div.animate({ width: '100%' }, 1000);
+  var animation = div.animate({ width: '100%' }, { duration: 1000, fill: "forwards" });
   animation.timeline = new ScrollTimeline(
     { startScrollOffset: '0px' }
   );
@@ -371,7 +373,6 @@ dictionary ScrollTimelineOptions {
   DOMString startScrollOffset = "auto";
   DOMString endScrollOffset = "auto";
   (double or ScrollTimelineAutoKeyword) timeRange = "auto";
-  FillMode fill = "none";
 };
 
 [Exposed=Window,
@@ -382,7 +383,6 @@ interface ScrollTimeline : AnimationTimeline {
   readonly attribute DOMString startScrollOffset;
   readonly attribute DOMString endScrollOffset;
   readonly attribute (double or ScrollTimelineAutoKeyword) timeRange;
-  readonly attribute FillMode fill;
 };
 </pre>
 
@@ -410,7 +410,7 @@ not by wall-clock time, but by the progress of scrolling in a [=scroll container
 
     1. Set the {{ScrollTimeline/scrollSource}} of |timeline| to |source|.
 
-    1. Assign the {{ScrollTimeline/orientation}}, {{ScrollTimeline/startScrollOffset}}, {{ScrollTimeline/endScrollOffset}}, {{ScrollTimeline/timeRange}}, and {{ScrollTimeline/fill}} properties of |timeline| to the corresponding value from |options|.
+    1. Assign the {{ScrollTimeline/orientation}}, {{ScrollTimeline/startScrollOffset}}, {{ScrollTimeline/endScrollOffset}}, and {{ScrollTimeline/timeRange}} properties of |timeline| to the corresponding value from |options|.
 
 </div>
 
@@ -475,39 +475,6 @@ not by wall-clock time, but by the progress of scrolling in a [=scroll container
     the mapping is then defined by mapping the scroll distance from 
     {{startScrollOffset}} to {{endScrollOffset}}, to the [=effective time range=].
 
-:   <dfn attribute for=ScrollTimeline>fill</dfn>
-::  Determines whether the timeline is active even when the scroll offset is outside
-    the range defined by [{{startScrollOffset}}, {{endScrollOffset}}].
-
-    Possible values are:
-
-    :   none
-    ::  The timeline is inactive when the scroll offset is less than {{startScrollOffset}} 
-        or greater than or equal to {{endScrollOffset}}.
-
-    :   forwards
-    ::  When the scroll offset is less than {{startScrollOffset}}, the
-        timeline is inactive.
-        When the scroll offset is greater than or equal to the
-        {{endScrollOffset}}, the timeline's [=current time=] is its
-        [=effective time range=].
-
-    :   backwards
-    ::  When the scroll offset is less than {{startScrollOffset}}, the
-        timeline's [=current time=] is 0.
-        When the scroll offset is greater than or equal to the
-        {{endScrollOffset}}, the timeline is inactive.
-
-    :   both
-    ::  When the scroll offset is less than {{startScrollOffset}}, the
-        timeline's [=current time=] is 0.
-        When the scroll offset is greater than or equal to the
-        {{endScrollOffset}}, the timeline's [=current time=] is its
-        [=effective time range=].
-
-    :   auto
-    ::  Behaves the same as <code>both</code>.
-
 </div>
 
 ### The effective time range of a {{ScrollTimeline}} ### {#efffective-time-range-algorithm}
@@ -542,25 +509,11 @@ as follows:
 1.  Otherwise, let <var>current scroll offset</var> be the current scroll offset of {{scrollSource}}
     in the direction specified by {{orientation}}.
 
-1.  If <var>current scroll offset</var> is less than {{startScrollOffset}}, return an unresolved
-    time value if {{fill}} is <code>none</code> or <code>forwards</code>, or 0 otherwise.
-
-1.  If <var>current scroll offset</var> is greater than or equal to {{endScrollOffset}} then:
-    <div class="switch">
-
-    : If {{endScrollOffset}} is less than the maximum scroll offset of {{scrollSource}} in
-        {{orientation}} and {{fill}} is <code>none</code> or <code>backwards</code>,
-
-    :: return an unresolved time value.
+1.  If <var>current scroll offset</var> is less than {{startScrollOffset}}, return 0.
 
-    : Otherwise,
+    Note: TODO(<a href="https://github.com/w3c/csswg-drafts/issues/4325#issuecomment-585295758">Issue 4325</a>): Define what the correct timeline state is based on scroll offset.
 
-    :: return the [=effective time range=].
-
-    </div>
-
-    Note: Checking for {{endScrollOffset}} being the maximum scroll offset ensures that the common
-    case of a 'whole scroller' ScrollTimeline does not become inactive when you scroll to the end.
+1.  If <var>current scroll offset</var> is greater than or equal to {{endScrollOffset}}, return [=effective time range=].
 
 1.  Return the result of evaluating the following expression:
 
@@ -589,7 +542,7 @@ Computed value: As specified
 Canonical order: per grammar
 </pre>
 
-<dfn>&lt;single-animation-timeline></dfn> = auto | scroll([element(<<id-selector>>)[, <<scroll-direction>>[, <<scroll-offset>>[, <<scroll-offset>>[, <<time>>[, <<single-animation-fill-mode>>]]]]]])
+<dfn>&lt;single-animation-timeline></dfn> = auto | scroll([element(<<id-selector>>)[, <<scroll-direction>>[, <<scroll-offset>>[, <<scroll-offset>>[, <<time>>]]]]])
 
 <dfn>&lt;scroll-direction></dfn> = auto | block | inline | horizontal | vertical
 
@@ -610,7 +563,7 @@ following effects:
 ::  The animation's [=timeline=] is a {{DocumentTimeline}}, more specifically the
     <a>default document timeline</a>.
 
-:   scroll([element(<<id-selector>>)[, <<scroll-direction>>[, <<scroll-offset>>[, <<scroll-offset>>[, <<time>>[, <<single-animation-fill-mode>>]]]]]])
+:   scroll([element(<<id-selector>>)[, <<scroll-direction>>[, <<scroll-offset>>[, <<scroll-offset>>[, <<time>>]]]]])
 ::  The animation's [=timeline=] is a {{ScrollTimeline}}.
 
     The timeline's {{scrollSource}} is the [=scroll container=] identified
@@ -624,8 +577,6 @@ following effects:
 
     The <<time>> value, if specified, determines the timeline's {{timeRange}}.
 
-    The <<single-animation-fill-mode>> value, if specified, determines the timeline's {{fill}}.
-
 </div>  <!-- link-for-hint="ScrollTimeline" -->
 
 ## Examples ## {#timeline-examples}
@@ -652,7 +603,8 @@ following effects:
         ],
         {
           duration: 1000,
-          easing: "linear"
+          easing: "linear",
+          fill: "forwards"
         });
       let timeline = new ScrollTimeline({
         scrollSource: document.documentElement,
@@ -684,6 +636,7 @@ following effects:
         background-color: red;
         animation-name: progress;
         animation-duration: 1s;
+        animation-fill-mode: forwards;
         animation-timing-function: linear;
         /* Assume the HTML element has id 'root' */
         animation-timeline: scroll(element(#root), vertical);