mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 12:19:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Implement linear easing according to latest spec

Browse source
This commit is contained in:
Gingeh 2024-11-03 14:56:16 +11:00 • committed by Sam Atkins
commit c67ecf37f7
Notes: github-actions[bot] 2024-11-05 10:42:28 +00:00
9 changed files with 513 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Tests/LibWeb/Text/input/WebAnimations/misc/easing-parsing.html
View file

@ -13,6 +13,7 @@
"linear(5% 0, 10% 0.5, 100% 1)",
"linear(5% 0, 1 100%)",
"linear(-14, 27 210%)",
"linear(0.5 5% 10%)",
"ease",
"ease-in",
"ease-out",
@ -39,7 +40,6 @@
"linear(5 10)",
"linear(5% 10%)",
"linear(0.5 5% 10)",
"linear(0.5 5% 10%)",
"cubic-bezier(0, 0, 0)",
"cubic-bezier(2, 0, 0, 0)",
"cubic-bezier(0, 0, 2, 0)",

54
Tests/LibWeb/Text/input/WebAnimations/misc/easing-values.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<body></body>
<script src="../../include.js"></script>
<script>
test(() => {
const easings = [
"linear",
"linear(0, 1)",
"linear(0, 0.5, 1)",
"linear(0 0%, 0.5 10%, 1 100%)",
"linear(0% 0, 10% 0.5, 100% 1)",
"linear(0% 0, 1 100%)",
"linear(0 0% 50%, 1 50% 100%)",
"linear(0.5 0% 100%)",
// FIXME: "linear(-1, 2)"
"ease",
"ease-in",
"ease-out",
"ease-in-out",
"cubic-bezier(0, 0, 0, 0)",
"cubic-bezier(1, 1, 1, 1)",
"cubic-bezier(1, 1000, 1, 1000)",
// FIXME: "step-start",
"step-end",
"steps(1000)",
"steps(10, jump-start)",
"steps(10, jump-end)",
"steps(10, jump-none)",
"steps(10, jump-both)",
// FIXME: "steps(10, start)",
"steps(10, end)",
];
for (const easing of easings) {
const target = document.createElement('div');
document.body.appendChild(target);
println(easing);
const animation = target.animate(
{ opacity: ['0', '1'] },
{
duration: 100,
fill: 'forwards',
easing: easing,
});
const computed_style = getComputedStyle(target);
for (let time = 0; time <= 100; time += 10) {
animation.currentTime = time;
println(`${time}: ${parseFloat(computed_style.opacity).toFixed(2)}`);
}
target.remove();
}
});
</script>