| <!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> |
