2019-04-04 17:39:32 +00:00
|
|
|
<!DOCTYPE html>
|
2018-09-10 07:13:19 +00:00
|
|
|
<body>
|
|
|
|
|
<style>
|
|
|
|
|
div {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 100px;
|
|
|
|
|
background-color: black;
|
|
|
|
|
will-change: transform;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
if (window.testRunner)
|
|
|
|
|
testRunner.waitUntilDone();
|
|
|
|
|
|
|
|
|
|
const div = document.body.appendChild(document.createElement("div"));
|
|
|
|
|
|
|
|
|
|
// Wait for a transition to start and abort it.
|
|
|
|
|
div.addEventListener("transitionstart", event => {
|
|
|
|
|
div.style.transition = "none";
|
|
|
|
|
});
|
|
|
|
|
|
2019-04-04 17:39:32 +00:00
|
|
|
// When notified the transition was aborted, finish the test once we've ensured that animations
|
|
|
|
|
// have been updated (one rAF) and that accelerated animations will have been committed (two rAFs).
|
|
|
|
|
div.addEventListener("transitioncancel", event => {
|
|
|
|
|
if (window.testRunner) {
|
|
|
|
|
requestAnimationFrame(() => {
|
|
|
|
|
requestAnimationFrame(() => testRunner.notifyDone());
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
2018-09-10 07:13:19 +00:00
|
|
|
// Initiate a transform transition.
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
div.style.transition = "transform 2s";
|
|
|
|
|
div.style.transform = "translateX(100px)";
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
