Closed
Description
I'm trying to understand what computation, if any, should be applied between a value provided via CSS using the animation-range property and the values computed on the resulting Animation object exposed via the rangeStart and rangeEnd properties.
Consider this simple example derived from the WPT test scroll-animations/scroll-timelines/scroll-timeline-range.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?