mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-07 17:41:54 +00:00
1e67b85571
If the progress is not in [0,1], the first two or the last two keyframes are now used for interpolation outside the interval.
56 lines
1.8 KiB
HTML
56 lines
1.8 KiB
HTML
<!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)",
|
|
// FIXME: "cubic-bezier(1, 1000, 1, 1000)",
|
|
// This test fails, because it sets an opacity > 1, which should not be possible
|
|
"step-start",
|
|
"step-end",
|
|
"steps(1000)",
|
|
"steps(10, jump-start)",
|
|
"steps(10, jump-end)",
|
|
"steps(10, jump-none)",
|
|
"steps(10, jump-both)",
|
|
"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>
|