88 lines
2.2 KiB
HTML
88 lines
2.2 KiB
HTML
<body>
|
|
<style>
|
|
|
|
body {
|
|
background-color: green;
|
|
}
|
|
|
|
div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: red;
|
|
}
|
|
|
|
/* Allow for a 1px error on either side */
|
|
#easing-on-keyframe {
|
|
left: -1px;
|
|
width: 102px;
|
|
background-color: green;
|
|
}
|
|
|
|
</style>
|
|
<div id="easing-on-animation-one-keyframe"></div>
|
|
<div id="easing-on-animation-two-keyframes"></div>
|
|
<div id="easing-on-animation-three-keyframes"></div>
|
|
<div id="easing-on-keyframe"></div>
|
|
<script src="../resources/ui-helper.js"></script>
|
|
<script>
|
|
|
|
(async function() {
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
await UIHelper.ensureStablePresentationUpdate();
|
|
await UIHelper.ensureStablePresentationUpdate();
|
|
|
|
const animations = [];
|
|
|
|
animations.push(document.getElementById("easing-on-animation-one-keyframe").animate({ transform: "translateX(100px)" }, {
|
|
duration: 500,
|
|
easing: "ease",
|
|
direction: "alternate",
|
|
iterations: Infinity
|
|
}));
|
|
|
|
animations.push(document.getElementById("easing-on-animation-two-keyframes").animate([
|
|
{ transform: "translateX(0)" },
|
|
{ transform: "translateX(100px)" }
|
|
], {
|
|
duration: 500,
|
|
easing: "ease",
|
|
direction: "alternate",
|
|
iterations: Infinity
|
|
}));
|
|
|
|
animations.push(document.getElementById("easing-on-animation-three-keyframes").animate([
|
|
{ transform: "translateX(0)" },
|
|
{ transform: "translateX(50px)" },
|
|
{ transform: "translateX(100px)" }
|
|
], {
|
|
duration: 500,
|
|
easing: "ease",
|
|
direction: "alternate",
|
|
iterations: Infinity
|
|
}));
|
|
|
|
animations.push(document.getElementById("easing-on-keyframe").animate([
|
|
{ transform: "translateX(0)", easing: "ease" },
|
|
{ transform: "translateX(100px)" }
|
|
], {
|
|
duration: 500,
|
|
direction: "alternate",
|
|
iterations: Infinity
|
|
}));
|
|
|
|
await Promise.all(animations.map(animation => animation.ready));
|
|
await UIHelper.ensureStablePresentationUpdate();
|
|
await UIHelper.ensureStablePresentationUpdate();
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
})();
|
|
|
|
</script>
|
|
</body>
|