| <!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> | initial-value', |
| initialValue: 'initial-value', |
| inherits: false, |
| }); |
| } |
| }); |
| |
| test(() => { |
| let animation = target.animate({ |
| '--a': ['100', 'var(--b)', 'var(--c)'], |
| '--b': ['var(--a)', '200', 'var(--c)'], |
| '--c': ['var(--a)', 'var(--b)', '300' ], |
| }, { |
| 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'), 'initial-value', '--a at 25%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), 'initial-value', '--b at 25%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), 'initial-value', '--c at 25%'); |
| |
| animation.currentTime = 50; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '200', '--a at 50%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '200', '--b at 50%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '200', '--c at 50%'); |
| |
| animation.currentTime = 75; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), 'initial-value', '--a at 75%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), 'initial-value', '--b at 75%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), 'initial-value', '--c at 75%'); |
| |
| animation.currentTime = 100; |
| assert_equals(getComputedStyle(target).getPropertyValue('--a'), '300', '--a at 100%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--b'), '300', '--b at 100%'); |
| assert_equals(getComputedStyle(target).getPropertyValue('--c'), '300', '--c at 100%'); |
| }, 'Animated registered custom properties are invalid at computed-value time when there is a cyclic var() dependency between them.'); |
| </script> |
