| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <div id="target">target</div> |
| <script> |
| setup(() => { |
| for (let name of ['--a', '--b', '--c']) { |
| CSS.registerProperty({ |
| name, |
| syntax: '<number>', |
| initialValue: '0', |
| inherits: false, |
| }); |
| } |
| }); |
| |
| test(() => { |
| // These keyframes are equivalent to: { |
| // '--a': ['100', '200'], |
| // '--b': ['100', '300'], |
| // '--c': ['100', '400'], |
| // }. |
| let animation = target.animate({ |
| '--a': ['100', '200'], |
| '--b': ['var(--a)', 'calc(var(--a) + 100)'], |
| '--c': ['var(--b)', 'calc(var(--b) + 100)'], |
| }, { |
| duration: 100, |
| fill: 'forwards', |
| }); |
| |
| animation.currentTime = 0; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '100', '--a at 0%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '100', '--b at 0%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '100', '--c at 0%'); |
| |
| animation.currentTime = 25; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '125', '--a at 25%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '150', '--b at 25%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '175', '--c at 25%'); |
| |
| animation.currentTime = 50; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '150', '--a at 50%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b at 50%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '250', '--c at 50%'); |
| |
| animation.currentTime = 75; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '175', '--a at 75%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '250', '--b at 75%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '325', '--c at 75%'); |
| |
| animation.currentTime = 100; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a at 100%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '300', '--b at 100%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '400', '--c at 100%'); |
| }, 'Animated registered custom properties can var() reference each other to create a chain of dependencies.'); |
| </script> |
