timeline-scope on body failing

[rockinghelvetica]

I am truly excited about this API/polyfill, because it allows for unitless values to be connected by CSS to VW units and ilk. I've been casually hacking at this goal across a decade, so first of all: thank you!

Here is a prototype connecting a utility DIV with a view-timeline that drives a variable font axis as the browser window is resized between 768px and 1400px. This was not possible before without JS.

Debug view: https://cdpn.io/pen/debug/mdgWBdE Source: https://codepen.io/rockinghelvetica/pen/mdgWBdE

It works in Chromium, but the polyfill does not seem to work in this scenario. I suspect it's the nuance of hoisting the timeline scope:

body {
  timeline-scope: --viewDriver;
}

There's some commented-out code in the demo that connects the view timeline to the instrument — a more default scope — and that functions as expected with the Polyfill. I also tried applying a basic opacity animation to the headline in case it was related to parsing the font animation, to no avail.

Am I bungling something, or is there a gap in coverage with timeline-scope here?

[rockinghelvetica]

Another example, where this API is standing in for an impossible CSS calc() of a negative animation-duration value:

https://codepen.io/rockinghelvetica/pen/KKYWojM

A more direct approach using CSS math might catch up soon enough in browsers, but you're first AFAIK.