57e476bcf2
CSS Animations Level 2 makes animation-duration default to auto. We still initialized it to 0s and converted auto to zero while collecting CSS animation properties, before the animation effect had its scroll timeline. Scroll-driven animations with an omitted duration therefore behaved like zero-duration animations, so scroll(root) progress bars did not track the scroll position. Make animation-duration initialize to auto and carry that value into the effect timing normalization. Time-driven animations still resolve auto to 0s there, while progress-based timelines resolve it against the timeline duration. Keep treating that resolved 0s as the default when serializing the animation shorthand so computed style remains compatible with existing CSS Animations expectations. Add a text regression covering an omitted duration on a scroll(root) progress animation. The test fails before this fix because the computed duration is 0s and the transform never advances at 25% scroll.
53 lines
1.2 KiB
HTML
53 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
html {
|
|
min-height: 100vh;
|
|
padding-bottom: 100px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#bar {
|
|
animation: grow linear;
|
|
animation-timeline: scroll(root block);
|
|
background: red;
|
|
height: 10px;
|
|
transform-origin: 0 50%;
|
|
width: 100px;
|
|
}
|
|
|
|
@keyframes grow {
|
|
from {
|
|
transform: scaleX(0);
|
|
}
|
|
|
|
to {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="bar"></div>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
function scaleX(element) {
|
|
const transform = getComputedStyle(element).transform;
|
|
const match = transform.match(/^matrix\(([^,]+)/);
|
|
return match ? Number.parseFloat(match[1]).toFixed(2) : transform;
|
|
}
|
|
|
|
promiseTest(async () => {
|
|
await animationFrame();
|
|
|
|
document.scrollingElement.scrollTop = 25;
|
|
await animationFrame();
|
|
|
|
println(`animation duration: ${getComputedStyle(bar).animationDuration}`);
|
|
println(`scale at 25% scroll: ${scaleX(bar)}`);
|
|
|
|
document.scrollingElement.scrollTop = 0;
|
|
});
|
|
</script>
|
|
</body>
|