39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Transition should cancel when an element is reparented</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-transitions-1/#starting">
|
|
<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>
|