| <!DOCTYPE html> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../resources/utils.js"></script> |
| <div id="target"></div> |
| <script> |
| |
| transition_test({ |
| syntax: "<length>", |
| from: "100px", |
| to: "200px", |
| expected: "150px" |
| }, 'A custom property of type <length> can yield a CSS Transition'); |
| |
| // This tests if there is a transition to a random floating-point number. |
| promise_test(async () => { |
| const customProperty = generate_name(); |
| |
| CSS.registerProperty({ |
| name: customProperty, |
| syntax: "<length>", |
| inherits: false, |
| initialValue: "100px" |
| }); |
| |
| assert_equals( |
| getComputedStyle(target).getPropertyValue(customProperty), |
| "100px", |
| "Element has the expected initial value" |
| ); |
| |
| const transitionEventPromise = new Promise(resolve => { |
| let listener = event => { |
| target.removeEventListener("transitionrun", listener); |
| assert_equals( |
| event.propertyName, |
| customProperty, |
| "TransitionEvent has the expected property name" |
| ); |
| resolve(); |
| }; |
| target.addEventListener("transitionrun", listener); |
| }); |
| |
| target.style.transition = `${customProperty} 1s -500ms linear`; |
| target.style.setProperty(customProperty, "112.24859px"); |
| |
| const animations = target.getAnimations(); |
| assert_equals(animations.length, 1, "A single animation is running"); |
| |
| const transition = animations[0]; |
| assert_class_string( |
| transition, |
| "CSSTransition", |
| "A CSSTransition is running" |
| ); |
| assert_equals(transition.playState, "running", "The transition is running"); |
| |
| await transitionEventPromise; |
| }, 'The to value of a custom property to a random floating-point number can ' + |
| 'yield a CSS Transition'); |
| </script> |
