1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!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>
|
