mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
03be70087d
This excludes `step-end` and `step-start` which are expected to be converted to the equivalent function at parse time. We are expected to serialize these as the explicit keywords - previously we would parse as `EasingStyleValue` and serialize equivalent functions as the keywords. This caused issues as we would incorrectly serialize even explicit functions as the keyword. This also allows us to move the magic easing functions to `EasingFunction` rather than `EasingStyleValue` which is a bit tidier
79 lines
2.5 KiB
HTML
79 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<style>
|
|
#linear {
|
|
animation-timing-function: linear;
|
|
transition-timing-function: linear(0, 1);
|
|
}
|
|
|
|
#ease-in {
|
|
animation-timing-function: ease-in;
|
|
transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
|
|
}
|
|
|
|
#ease-out {
|
|
animation-timing-function: ease-out;
|
|
transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
|
}
|
|
|
|
#ease-in-out {
|
|
animation-timing-function: ease-in-out;
|
|
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
|
|
}
|
|
|
|
#ease {
|
|
animation-timing-function: ease;
|
|
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
}
|
|
|
|
#step-start {
|
|
animation-timing-function: step-start;
|
|
transition-timing-function: steps(1, start);
|
|
}
|
|
|
|
#step-end {
|
|
animation-timing-function: step-end;
|
|
transition-timing-function: steps(1, end);
|
|
}
|
|
</style>
|
|
<div id="linear"></div>
|
|
<div id="ease-in"></div>
|
|
<div id="ease-out"></div>
|
|
<div id="ease-in-out"></div>
|
|
<div id="ease"></div>
|
|
<div id="step-start"></div>
|
|
<div id="step-end"></div>
|
|
<script src="../include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
const keywords = [
|
|
"linear",
|
|
"ease-in",
|
|
"ease-out",
|
|
"ease-in-out",
|
|
"ease",
|
|
"step-start",
|
|
"step-end",
|
|
];
|
|
|
|
for (let i = 0; i < keywords.length; i++) {
|
|
println(`Specified: ${document.styleSheets[0].cssRules[i].cssText}`);
|
|
println(
|
|
`Keyword computed: ${
|
|
getComputedStyle(document.getElementById(keywords[i]))
|
|
.animationTimingFunction
|
|
}`
|
|
);
|
|
println(
|
|
`Function computed: ${
|
|
getComputedStyle(document.getElementById(keywords[i]))
|
|
.transitionTimingFunction
|
|
}\n`
|
|
);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|