| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #target { |
| --x: rgb(0, 100, 0); |
| --red: 0; |
| --green: 100; |
| --blue: 200; |
| background-color: black; |
| } |
| </style> |
| <div id="target"></div> |
| <script> |
| test(() => { |
| var animation = target.animate({backgroundColor: 'var(--x)'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.25; |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 25, 0)'); |
| animation.currentTime = 0.5; |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 50, 0)'); |
| animation.currentTime = 0.75; |
| assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 75, 0)'); |
| }, 'var() references can be used for smoothly interpolated animations.'); |
| |
| test(() => { |
| var animation = target.animate({color: 'rgb(var(--red), var(--green), var(--blue))'}, 1); |
| animation.pause(); |
| animation.currentTime = 0.25; |
| assert_equals(getComputedStyle(target).color, 'rgb(0, 25, 50)'); |
| animation.currentTime = 0.5; |
| assert_equals(getComputedStyle(target).color, 'rgb(0, 50, 100)'); |
| animation.currentTime = 0.75; |
| assert_equals(getComputedStyle(target).color, 'rgb(0, 75, 150)'); |
| }, 'Multiple var() references can be used for smoothly interpolated animations.'); |
| </script> |
