| OLD | NEW |
| (Empty) |
| 1 <script src="../resources/testharness.js"></script> | |
| 2 <script src="../resources/testharnessreport.js"></script> | |
| 3 <style> | |
| 4 body { | |
| 5 --x: green; | |
| 6 --y: lime; | |
| 7 } | |
| 8 @keyframes test { | |
| 9 from { background: var(--x); } | |
| 10 to { background: var(--y); } | |
| 11 } | |
| 12 #cssAnimations { | |
| 13 animation: test 1s -0.5s linear paused; | |
| 14 } | |
| 15 </style> | |
| 16 <div id="cssAnimations"></div> | |
| 17 <div id="webAnimations"></div> | |
| 18 <script> | |
| 19 test(() => { | |
| 20 assert_equals(getComputedStyle(cssAnimations).backgroundColor, 'rgb(0, 192, 0)
'); | |
| 21 }, 'CSS Animations should interpolate shorthand properties with variable referen
ces in them.'); | |
| 22 | |
| 23 test(() => { | |
| 24 var animation = webAnimations.animate({background: ['var(--x)', 'var(--y)']},
1); | |
| 25 animation.currentTime = 0.5; | |
| 26 assert_equals(getComputedStyle(webAnimations).backgroundColor, 'rgb(0, 192, 0)
'); | |
| 27 }, 'Web Animations should interpolate shorthand properties with variable referen
ces in them.'); | |
| 28 </script> | |
| OLD | NEW |