| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/css-animations/support/testcommon.js"></script> |
| |
| <div id=target>hello</div> |
| |
| <style> |
| #target { |
| float: left; |
| width: 100px; |
| height: 100px; |
| transition: all 1s; |
| transition-behavior: allow-discrete; |
| } |
| #target.animated { |
| float: right; |
| } |
| </style> |
| |
| <script> |
| promise_test(async () => { |
| let transitionstartFired = false; |
| target.addEventListener('transitionstart', () => { |
| transitionstartFired = true; |
| }); |
| await waitForAnimationFrames(2); |
| target.classList.add('animated'); |
| await waitForAnimationFrames(1); |
| assert_true(transitionstartFired); |
| }, 'transition:all with transition-behavior:allow-discrete should animate discrete properties.'); |
| </script> |
