WAAPI polyfill can’t handle keyframes with offsets that refer to ranges

[bramus]

The polyfill can’t handle this WAAPI snippet that has offsets included in the keyframes.

const keyframes = [
    { offset: "contain 25%", opacity: "0" },
    { offset: "contain 75%", opacity: "1" }
];
const target = document.getElementById('target');
const anim = target.animate(keyframes, {
    fill: 'both',
    timeline: new ViewTimeline({ subject: target })
});

The problem is that the offsets refer to named timeline ranges.

This error gets thrown:

• Safari: TypeError: The provided value is non-finite
• Firefox: Uncaught TypeError: KeyframeEffect.setKeyframes: 'offset' member of BaseKeyframe is not a finite floating-point value.

When using CSS Animations that uses @keyframes with range information included in the <keyframe-selector> this is no problem for the polyfill, as it has logic to rewrite the offsets to something parseable in place.