| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <div id="target"></div> |
| 5 <script> |
| 6 for (let name of ['--a', '--b']) { |
| 7 CSS.registerProperty({ |
| 8 name, |
| 9 syntax: '<number>', |
| 10 initialValue: '0', |
| 11 }); |
| 12 } |
| 13 |
| 14 test(() => { |
| 15 let a = target.animate({'--a': ['100', 'var(--b)']}, 100); |
| 16 let b = target.animate({'--b': ['200', '200']}, 100); |
| 17 |
| 18 a.currentTime = 50; |
| 19 assert_equals(getComputedStyle(target).getPropertyValue('--a'), '150', '--a an
imating towards --b'); |
| 20 assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b st
ationary at 200'); |
| 21 |
| 22 a.cancel(); |
| 23 b.cancel(); |
| 24 |
| 25 a = target.animate({'--a': ['200', '200']}, 100); |
| 26 b = target.animate({'--b': ['100', 'var(--a)']}, 100); |
| 27 |
| 28 b.currentTime = 50; |
| 29 assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a st
ationary at 200'); |
| 30 assert_equals(getComputedStyle(target).getPropertyValue('--b'), '150', '--b an
imating towards --a'); |
| 31 }, 'Registered custom property animation keyframes with var() references should
not be affected by name ordering'); |
| 32 </script> |
| OLD | NEW |