filter-responsive-neutral-keyframe.html

<!DOCTYPE html>
<style>
div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#target {
  background: red;
  filter: opacity(1);
  animation: test 1e8s;
}
#green {
  background: green;
}
@keyframes test {
  to { filter: opacity(0); }
}
</style>
<div id="green"></div>
<div id="target"></div>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();

function waitForCompositor() {
  var target = document.getElementById("green");
  return target.animate({transform: ['none', 'none']}, 1).ready;
}

waitForCompositor().then(() => {
  target.style.filter = 'opacity(0)';
}).then(() => waitForCompositor()).then(() => {
  if (window.testRunner)
    testRunner.notifyDone();
});
</script>

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