| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 #target { |
| 6 --from: 100; |
| 7 } |
| 8 </style> |
| 9 <div id="target"></div> |
| 10 <script> |
| 11 CSS.registerProperty({ |
| 12 name: '--test', |
| 13 syntax: '<number>', |
| 14 initialValue: '0', |
| 15 }); |
| 16 |
| 17 test(() => { |
| 18 let animation = target.animate({'--test': ['var(--from)', 'var(--to)']}, 100); |
| 19 let toAnimation = target.animate({'--to': ['200', '300']}, 100); |
| 20 |
| 21 toAnimation.currentTime = 25; |
| 22 { |
| 23 animation.currentTime = 25; |
| 24 assert_equals(getComputedStyle(target).getPropertyValue('--test'), '125', 't
arget at 25%, to at 25%'); |
| 25 |
| 26 animation.currentTime = 75; |
| 27 assert_equals(getComputedStyle(target).getPropertyValue('--test'), '175', 't
arget at 75%, to at 25%'); |
| 28 } |
| 29 |
| 30 toAnimation.currentTime = 75; |
| 31 { |
| 32 animation.currentTime = 25; |
| 33 assert_equals(getComputedStyle(target).getPropertyValue('--test'), '150', 't
arget at 25%, to at 75%'); |
| 34 |
| 35 animation.currentTime = 75; |
| 36 assert_equals(getComputedStyle(target).getPropertyValue('--test'), '250', 't
arget at 75%, to at 75%'); |
| 37 } |
| 38 }, 'Registered custom property animation keyframes with var() references to anim
ating unregistered custom properties'); |
| 39 </script> |
| OLD | NEW |