Revision control

1
<!DOCTYPE html>
2
<meta charset="utf-8">
3
<title>Reversal of accelerated in-flight CSS Transitions</title>
4
<style type="text/css" media="screen">
5
6
.target.opacity {
7
transition: opacity 2s linear;
8
}
9
10
.target.opacity.in-flight {
11
opacity: 0;
12
}
13
14
.target.transform {
15
transition: transform 2s linear;
16
}
17
18
.target.transform.in-flight {
19
transform: scale(0);
20
}
21
22
</style>
23
<body>
24
<script src="../resources/testharness.js"></script>
25
<script src="../resources/testharnessreport.js"></script>
26
<script>
27
28
'use strict';
29
30
function targetTest(propertyName)
31
{
32
async_test(test => {
33
const target = document.body.appendChild(document.createElement("div"));
34
target.classList.add("target");
35
target.classList.add(propertyName);
36
37
let initialTransition;
38
let reversedTransition;
39
40
// Start the initial transition.
41
requestAnimationFrame(() => {
42
target.classList.add("in-flight");
43
const animations = target.getAnimations();
44
assert_equals(animations.length, 1, "There is one animation applied to the target after starting the initial transition.");
45
46
initialTransition = animations[0];
47
assert_true(initialTransition instanceof CSSTransition, "There is one animation applied to the target after starting the initial transition.");
48
49
// Wait for the initial transition to start and then two frames before reversing the transition, to be certain that the animation did start.
50
// Indeed, the "transitionstart" event will be fired right before the next rAF callback is called, as the animation starts in that very same
51
// frame, and so progress will be 0 and the transition wouldn't be reversable until the next frame when the animation has progress > 0.
52
target.addEventListener("transitionstart", event => {
53
requestAnimationFrame(() => {
54
requestAnimationFrame(() => {
55
target.classList.remove("in-flight");
56
const animations = target.getAnimations();
57
assert_equals(animations.length, 1, "There is one animation applied to the target after reversing the initial transition.");
58
59
reversedTransition = animations[0];
60
assert_true(reversedTransition instanceof CSSTransition, "There is one animation applied to the target after reversing the initial transition.");
61
assert_not_equals(initialTransition, reversedTransition, "The animation applied to the target after reversing the initial transition is different than the original transition.");
62
63
target.remove();
64
test.done();
65
});
66
});
67
});
68
});
69
}, `A CSS transition targeting ${propertyName} can be reversed in-flight.`);
70
}
71
72
targetTest("opacity");
73
targetTest("transform");
74
75
</script>
76
</body>