Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transitions/transition-reparented.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Transition should cancel when an element is reparented</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.animated-div {
margin-left: 100px;
transition: margin-left 10s -5s linear;
}
</style>
<div id="parent1">
<div id="target" class='animated-div'></div>
</div>
<div id="parent2"></div>
<script>
'use strict';
test(t => {
assert_equals(getComputedStyle(target).marginLeft, '100px');
target.style.marginLeft = '200px';
// Because the start delay is -50% of the transition duration, we should
// immediately be (approximately) at the halfway point. What we really care
// about checking is that the transition has started but has not ended.
assert_not_equals(getComputedStyle(target).marginLeft, '100px');
assert_not_equals(getComputedStyle(target).marginLeft, '200px');
// Now change the target's parent. This should cancel the transition and
// skip straight to the end state.
parent2.appendChild(target);
assert_equals(getComputedStyle(target).marginLeft, '200px');
}, 'When an element is reparented, any CSS Transition on it should be cancelled');
</script>