| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #target { |
| --x: rgb(0, 100, 0); |
| --green: 100; |
| --y: rgb(0, var(--green), 0); |
| background-color: black; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(() => { |
| var animation = target.animate({backgroundColor: 'var(--x)'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.5; |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 50, 0)'); |
| target.style.setProperty('--x', 'rgb(0, 50, 0)'); |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 25, 0)'); |
| }, 'Uses of var() in CSS keyframes are responsive to changes in custom properties.'); |
| |
| test(() => { |
| var animation = target.animate({color: 'var(--y)'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.5; |
| assert_equals(getComputedStyle(target).color, 'rgb(0, 50, 0)'); |
| target.style.setProperty('--green', '50'); |
| assert_equals(getComputedStyle(target).color, 'rgb(0, 25, 0)'); |
| }, 'Uses of var() in CSS keyframes are responsive to changes in custom properties.'); |
| </script> |
