blob: c76f7b77981907fd2558b3b2f9ad4e6337e1e723 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
<script src="../resources/ui-helper.js"></script>
<style>
#target {
position: absolute;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
background: green;
animation: fadeIn 30ms;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.transition {
transition: transform 60ms;
transform: translateX(200%);
}
.no-transition {
transition: none;
transform: translateX(0);
}
</style>
</head>
<body>
<div id="target"></div>
<script>
jsTestIsAsync = true;
target = document.getElementById("target");
description("The test passes if the animationend event is followed by two transitionend events.");
target.addEventListener("transitionend", async () => {
testPassed("Observed first 'transitionend' event. Starting second transition...");
target.classList.replace("transition", "no-transition");
await UIHelper.renderingUpdate();
await UIHelper.renderingUpdate();
target.classList.replace("no-transition", "transition");
target.addEventListener("transitionend", () => {
testPassed("Observed second 'transitionend' event.");
finishJSTest();
});
}, { once: true });
target.addEventListener("animationend", () => {
testPassed("Observed 'animationend' event. Starting first transition...");
target.classList.add("transition");
});
</script>
</body>
</html>