mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 03:35:33 +00:00
bff8c71b2a
Now we produce computed timing progress outside [0,1] range. We use the last segment to calculate animation values if the value is greater than 1. We use the first segment to calculate animation values if the value is lesser than 0.
39 lines
1.0 KiB
HTML
39 lines
1.0 KiB
HTML
<!doctype html>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<title>
|
|
Bug 1216842: effect-level easing function produces values greater than 1
|
|
which are passed to step-end function (compositor thread)
|
|
</title>
|
|
<style>
|
|
#target {
|
|
width: 100px; height: 100px;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="target"></div>
|
|
</body>
|
|
<script>
|
|
var target = document.getElementById("target");
|
|
var effect =
|
|
new KeyframeEffectReadOnly(
|
|
target,
|
|
{ opacity: [0, 1], easing: "step-end" },
|
|
{
|
|
fill: "forwards",
|
|
/* The function produces values greater than 1 in (0.23368794, 1) */
|
|
easing: "cubic-bezier(0,1.5,1,1.5)",
|
|
duration: 100,
|
|
iterations: 0.25 /* To finish in the extraporation range */
|
|
}
|
|
);
|
|
var animation = new Animation(effect, document.timeline);
|
|
animation.play();
|
|
animation.finished.then(function() {
|
|
document.documentElement.className = "";
|
|
});
|
|
</script>
|
|
</html>
|