Don’t throw on invalid ranges, but ignore them

[bramus]

Follow-up on #285, which turned out to be an issue with the range being used.

Glad you got your Firefox problem (which could have used its own issue in this repo) sorted. The culprit is that you were using the wrong offsets: the cover, contain, entry, exit, etc. ranges can only be used with ViewTimeline, not ScrollTimeline.

There is an argument to be made that the polyfill should mimic the native API here so that it ignores the incorrect offsets instead of throwing an Error

The OP tried to use a ViewTimeline-range with a ScrollTimeline, and it resulted in an error being thrown. The native implementation just silently ignores the invalid range.

[bramus]

The following throws with the polyfill, but not in Chrome:

var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

var scrollTimeline2 = new ScrollTimeline({
    source: document.documentElement,
    axis: "block",
    orientation: 'block'
});

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2,
        rangeStart: {
          rangeName: 'cover',
          offset: CSS.percent('70')
        },
	rangeEnd: {
          rangeName: 'cover',
          offset: CSS.percent('100')
        }
    }
);

The author actually intended this:

var videoElement = document.querySelector('[data-section-id="66d339fcaa91932c1202ad7e"] video');

var scrollTimeline2 = new ScrollTimeline({
          source: document.documentElement,
         axis: "block",
        orientation: 'block'
});

videoElement.animate(
    { transform: ["translateY(0)", "translateY(-33vh)"]},
    {
        duration: 1000, 
        fill: 'both',
        timeline: scrollTimeline2,
        rangeStart: new CSSUnitValue(70, 'percent'),
        rangeEnd: new CSSUnitValue(100, 'percent')
    }
);