73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<style type="text/css" media="screen">
|
|
.box {
|
|
position: absolute;
|
|
height: 100px;
|
|
width: 100px;
|
|
left: 0px;
|
|
background-color: blue;
|
|
}
|
|
|
|
.box.transitioning {
|
|
transition: left 10s linear;
|
|
left: 100px;
|
|
}
|
|
|
|
.box.animating {
|
|
animation: move 0.1s linear;
|
|
}
|
|
|
|
.box.retargeted {
|
|
left: 200px;
|
|
}
|
|
|
|
@keyframes move {
|
|
from { left: 500px }
|
|
to { left: 501px }
|
|
}
|
|
|
|
</style>
|
|
<script src="../resources/js-test-pre.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="test" class="box"></div>
|
|
<script type="text/javascript" charset="utf-8">
|
|
|
|
description("Once animation has finished, box should be running left transition from 0px to 200px.");
|
|
|
|
window.jsTestIsAsync = true;
|
|
|
|
let animations;
|
|
const testElement = document.getElementById('test');
|
|
|
|
// Start the test by starting a transition from 0 to 100px.
|
|
window.setTimeout(() => testElement.classList.add("transitioning"));
|
|
|
|
// Then, once the transition has started, start an animation.
|
|
testElement.addEventListener("transitionstart", event => {
|
|
setTimeout(() => testElement.classList.add("animating"));
|
|
});
|
|
|
|
// Then wait for the animation to start and change the underlying left value.
|
|
testElement.addEventListener("animationstart", event => {
|
|
testElement.classList.add("retargeted");
|
|
});
|
|
|
|
// When the animation has ended, check that we're transitioning from ~0 > 200, and not 100 > 200.
|
|
testElement.addEventListener("animationend", event => {
|
|
animations = testElement.getAnimations();
|
|
shouldBe("animations.length", "1");
|
|
shouldBeTrue("animations[0] instanceof CSSTransition");
|
|
shouldNotBeEqualToString("animations[0].effect.getKeyframes()[0].left", "100px");
|
|
shouldBeEqualToString("animations[0].effect.getKeyframes()[1].left", "200px");
|
|
finishJSTest();
|
|
});
|
|
|
|
</script>
|
|
<script src="../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|