Revision control

1
<!DOCTYPE html>
2
<body>
3
<style>
4
div {
5
width: 100px;
6
height: 100px;
7
background-color: black;
8
will-change: transform;
9
}
10
</style>
11
<script>
12
13
if (window.testRunner)
14
testRunner.waitUntilDone();
15
16
const div = document.body.appendChild(document.createElement("div"));
17
18
// Wait for a transition to start and abort it.
19
div.addEventListener("transitionstart", event => {
20
div.style.transition = "none";
21
});
22
23
// When notified the transition was aborted, finish the test once we've ensured that animations
24
// have been updated (one rAF) and that accelerated animations will have been committed (two rAFs).
25
div.addEventListener("transitioncancel", event => {
26
if (window.testRunner) {
27
requestAnimationFrame(() => {
28
requestAnimationFrame(() => testRunner.notifyDone());
29
});
30
}
31
});
32
33
34
// Initiate a transform transition.
35
setTimeout(() => {
36
div.style.transition = "transform 2s";
37
div.style.transform = "translateX(100px)";
38
});
39
40
</script>
41
</body>