47 lines
1.2 KiB
HTML
47 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>Starting transition after animation has ended</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-transitions/">
|
|
<link rel="help" href="https://crbug.com/1261155">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="./support/helper.js"></script>
|
|
<style>
|
|
@keyframes anim {
|
|
from { left: 100px }
|
|
to { left: 200px }
|
|
}
|
|
#div {
|
|
left: 0px;
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
background-color: green;
|
|
}
|
|
#div.animate {
|
|
animation: anim 0.1s linear;
|
|
}
|
|
#div.transition {
|
|
left: 300px;
|
|
transition: left 1000s steps(2, start);
|
|
}
|
|
</style>
|
|
<div id=div>
|
|
</div>
|
|
<script>
|
|
|
|
promise_test(async t => {
|
|
const watcher = new EventWatcher(t, div, ['animationend']);
|
|
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
|
|
div.classList.toggle('animate');
|
|
assert_equals(getComputedStyle(div).left, '100px');
|
|
|
|
await watcher.wait_for('animationend');
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
|
|
div.classList.toggle('transition');
|
|
assert_equals(getComputedStyle(div).left, '150px');
|
|
}, 'Starting transition after animation has ended');
|
|
|
|
</script>
|