transform-responsive-neutral-keyframe.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#target {
  background: red;
  transform: translateX(100px);
  animation: test 1e8s;
}
#expected {
  background: green;
  transform: translateX(50px);
}
@keyframes test {
  to { transform: translateX(50px); }
}
</style>
<div id="target"></div>
<div id="expected"></div>
<script>
'use strict';
if (window.testRunner)
  testRunner.waitUntilDone();

function waitForCompositor() {
  return target.animate({opacity: ['1', '1']}, 1).ready;
}

waitForCompositor().then(() => {
  target.style.transform = 'translateX(50px)';
}).then(waitForCompositor).then(() => {
  if (window.testRunner)
    testRunner.notifyDone();
});
</script>

chromium/third_party/blink/web_tests/animations/responsive/transform-responsive-neutral-keyframe.html