eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-30 11:37:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb/CSS: Resolve var() in keyframe animation-timing-function

Browse Source 
When a `@keyframes` rule contains `animation-timing-function` with a
`var()`, we cannot eagerly resolve it to an `EasingFunction` at rule
cache build time because there is no element context available. We now
store the unresolved `StyleValue` and defer resolution to
`collect_animation_into()`, where the animated element's custom
properties can be used to substitute the variable. Previously, an
`animation-timing-function` with a `var()` in a `@keyframe` would cause
a crash.
This commit is contained in:
Tim Ledbetter
2026-03-30 08:34:55 +01:00
committed by Sam Atkins
parent 700026637d
commit af6bc07c4f
Notes: github-actions[bot] 2026-04-01 10:40:01 +00:00 
Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/af6bc07c4f1
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8677
Reviewed-by: https://github.com/AtkinsSJ ✅
6 changed files with 125 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
Tests/LibWeb/Text/input/css/animation-timing-function-var-in-keyframe.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<style>
@keyframes move-var-easing {
0% { left: 0px; animation-timing-function: var(--kf-easing); }
100% { left: 200px; }
}
@keyframes move-var-easing-fallback {
0% { left: 0px; animation-timing-function: var(--undefined-var, linear); }
100% { left: 200px; }
}
@keyframes move-var-easing-no-fallback {
0% { left: 0px; animation-timing-function: var(--undefined-var); }
100% { left: 200px; }
}
</style>
<div id="target-resolved" style="position: absolute;"></div>
<div id="target-fallback" style="position: absolute;"></div>
<div id="target-invalid" style="position: absolute;"></div>
<script src="../include.js"></script>
<script>
test(() => {
// var() that resolves to a valid easing should be applied.
const resolvedEl = document.getElementById("target-resolved");
resolvedEl.style.setProperty("--kf-easing", "linear");
resolvedEl.style.animation = "move-var-easing 1s ease forwards";
const resolvedAnim = resolvedEl.getAnimations()[0];
resolvedAnim.pause();
resolvedAnim.currentTime = 500;
println("var(linear) at 0.5: " + getComputedStyle(resolvedEl).left);
// var() with a fallback value should use the fallback when the variable is undefined.
const fallbackEl = document.getElementById("target-fallback");
fallbackEl.style.animation = "move-var-easing-fallback 1s ease forwards";
const fallbackAnim = fallbackEl.getAnimations()[0];
fallbackAnim.pause();
fallbackAnim.currentTime = 500;
println("var(undefined, linear) at 0.5: " + getComputedStyle(fallbackEl).left);
// var() with no fallback and undefined variable should fall back to the animation's default easing.
const invalidEl = document.getElementById("target-invalid");
invalidEl.style.animation = "move-var-easing-no-fallback 1s linear forwards";
const invalidAnim = invalidEl.getAnimations()[0];
invalidAnim.pause();
invalidAnim.currentTime = 500;
println("var(undefined) at 0.5: " + getComputedStyle(invalidEl).left);
});
</script>