composited-filter-animation.html | Explore in Territory

<!doctype html>
<style>
  div {
    width: 100px;
    height: 100px;
    background: green;
    filter: saturate(0);
  }

  @keyframes filter {
    0% { filter: saturate(0); }
    0.001% { filter: saturate(1); }
    100% { filter: saturate(1); }
  }
</style>
<div id="test"></div>
<p>Verify that composited filter animations are applied correctly. If the box
is green the animation has applied correctly.</p>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();
test.addEventListener('animationstart', () => {

  // Now the animation has started, wait until the time when we should see full
  // saturation.
  let animationStart = document.timeline.currentTime;
  let targetPercentage = 0.001 / 100;
  let targetTime = animationStart + 300000 * targetPercentage;

  function waitForTargetTime(ts) {
    if (ts >= targetTime) {
      if (window.testRunner)
        testRunner.notifyDone();
      return;
    }
    requestAnimationFrame(waitForTargetTime);
  }
  requestAnimationFrame(waitForTargetTime);
});
test.style.animation = 'filter 300s';
</script>

chromium/third_party/blink/web_tests/animations/composited-filter-animation.html