[csswg-drafts] [scroll-animations] [web-animations-2] Relationship between `animation-range` and `Animation.range{Start|End}` (#11327)

graouts has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations] [web-animations-2] Relationship between `animation-range` and `Animation.range{Start|End}` ==
I'm trying to understand what computation, if any, should be applied between a value provided via CSS using the [`animation-range`](https://drafts.csswg.org/scroll-animations-1/#animation-range) property and the values computed on the resulting [`Animation`](https://drafts.csswg.org/web-animations-2/#the-animation-interface) object exposed via the [`rangeStart`](https://drafts.csswg.org/web-animations-2/#dom-animation-rangestart) and [`rangeEnd`](https://drafts.csswg.org/web-animations-2/#dom-animation-rangeend) properties.

Consider this simple example derived from the WPT test [scroll-animations/scroll-timelines/scroll-timeline-range.html](https://github.com/web-platform-tests/wpt/blob/master/scroll-animations/scroll-timelines/scroll-timeline-range.html):

```html
<!DOCTYPE html>
<style>

  #scroller {
    overflow-y: scroll;
    width: 200px;
    height: 200px;
    scroll-timeline: --t1;
  }

  #content {
    height: 1200px;
  }

  #target {
    position: fixed;
    height: 100px;
    width: 0px;
    font-size: 10px;
    background-color: green;

    animation: auto grow linear;
    animation-timeline: --t1;
    animation-range: 100px 700px;
  }

  @keyframes grow {
    to { width: 200px }
  }

</style>
<div id="scroller">
  <div id="target"></div>
  <div id="content"></div>
</div>
<pre></pre>
<script>

const animation = target.getAnimations()[0];
const pre = document.querySelector("pre");

(async function() {
    await animation.ready;
    pre.innerText += `range start = ${animation.rangeStart.offset}\n`;
    pre.innerText += `range end = ${animation.rangeEnd.offset}\n`;
})();
</script>
```

When I look at Chrome Canary (133.0.6878.0 ) I see the following being printed out:

```
range start = 200px
range end = 1400px
```

Meanwhile, on ToT WebKit this prints:

```
range start = 100px
range end = 700px
```

Why are the values provided via CSS doubled in Chrome? What in a spec supports the computation of such values?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11327 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 5 December 2024 20:29:51 UTC