| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| #target { |
| transition-property: --transitioning-property; |
| transition-duration: 1s; |
| transition-delay: -0.5s; |
| transition-timing-function: linear; |
| --transitioning-property: 100; |
| } |
| </style> |
| <div id="target">target</div> |
| <script> |
| setup(() => { |
| for (let name of ['--transitioning-property', '--test']) { |
| CSS.registerProperty({ |
| name, |
| syntax: '<number>', |
| initialValue: '0', |
| inherits: false, |
| }); |
| } |
| }); |
| |
| function assert_computed_value_equals(property, expectedValue, description) { |
| assert_equals(getComputedStyle(target).getPropertyValue(property), expectedValue, description); |
| } |
| |
| test(() => { |
| assert_computed_value_equals('--test', '0', |
| '--test at initial value'); |
| assert_computed_value_equals('--transitioning-property', '100', |
| '--transitioning-property at initial value'); |
| |
| let animation = target.animate({ |
| '--test': ['50', 'var(--transitioning-property)'], |
| }, { |
| duration: 100, |
| fill: 'forwards', |
| }); |
| |
| animation.currentTime = 0; |
| assert_computed_value_equals('--test', '50', |
| '--test at 0% with no transition'); |
| animation.currentTime = 50; |
| assert_computed_value_equals('--test', '75', |
| '--test at 50% with no transition'); |
| animation.currentTime = 100; |
| assert_computed_value_equals('--test', '100', |
| '--test at 100% with no transition'); |
| |
| target.style.setProperty('--transitioning-property', '200'); |
| // Transition jumps to half way through due to negative transition-delay. |
| assert_computed_value_equals('--transitioning-property', '150', |
| '--transitioning-property at initial transitioning value'); |
| |
| animation.currentTime = 0; |
| assert_computed_value_equals('--test', '50', |
| '--test at 0% with transition'); |
| animation.currentTime = 50; |
| assert_computed_value_equals('--test', '100', |
| '--test at 50% with transition'); |
| animation.currentTime = 100; |
| assert_computed_value_equals('--test', '150', |
| '--test at 100% with transition'); |
| }, 'Animated registered custom properties can var() reference transitioning registered custom properties.'); |
| </script> |
