Add ScrollTimlinePolyfill

This is just a basic one. We'll need a better one.

Author: sebmarkbage

fixtures/view-transition/src/components/ScrollTimelinePolyfill.js

@@ -0,0 +1,33 @@
+// Example of a polyfill of ScrollTimeline that implements React's CustomTimeline protocol.
+
+export default class ScrollTimelinePolyfill {
+  constructor({source, axis}) {
+    this.source = source;
+    this.axis = axis;
+  }
+  get currentTime() {
+    const source = this.source;
+    const axis = this.axis;
+    if (axis === 'block' || axis === 'x') {
+      return (
+        (100 * source.scrollLeft) / (source.scrollWidth - source.clientWidth)
+      );
+    } else {
+      return (
+        (100 * source.scrollTop) / (source.scrollHeight - source.clientHeight)
+      );
+    }
+  }
+  animate(animation) {
+    animation.playbackRate = 0;
+    const source = this.source;
+    const update = () => {
+      animation.currentTime = this.currentTime;
+    };
+    update();
+    source.addEventListener('scroll', update);
+    return () => {
+      source.removeEventListener('scroll', update);
+    };
+  }
+}

fixtures/view-transition/src/components/SwipeRecognizer.js

@@ -5,6 +5,8 @@ import React, {
   unstable_startGestureTransition as startGestureTransition,
 } from 'react';
 
+import ScrollTimelinePolyfill from './ScrollTimelinePolyfill';
+
 // Example of a Component that can recognize swipe gestures using a ScrollTimeline
 // without scrolling its own content. Allowing it to be used as an inert gesture
 // recognizer to drive a View Transition.
@@ -26,20 +28,19 @@ export default function SwipeRecognizer({
       return;
     }
 
-    const ua = navigator.userAgent;
-    const supportsScrollTimeline =
-      typeof ScrollTimeline === 'function' &&
-      (ua.indexOf('Safari') === -1 ||
-        (ua.indexOf('iPhone') === -1 && ua.indexOf('iPad') === -1));
-    if (!supportsScrollTimeline) {
-      // TODO: Polyfill
-      return;
+    let scrollTimeline;
+    if (typeof ScrollTimeline === 'function') {
+      // eslint-disable-next-line no-undef
+      scrollTimeline = new ScrollTimeline({
+        source: scrollRef.current,
+        axis: axis,
+      });
+    } else {
+      scrollTimeline = new ScrollTimelinePolyfill({
+        source: scrollRef.current,
+        axis: axis,
+      });
     }
-    // eslint-disable-next-line no-undef
-    const scrollTimeline = new ScrollTimeline({
-      source: scrollRef.current,
-      axis: axis,
-    });
     activeGesture.current = startGestureTransition(
       scrollTimeline,
       () => {