| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transitions Test: Removing transitioning property from transition-property triggers transitioncancel</title> |
| <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> |
| <meta name="assert" content="Removing transitioning property from transition-property |
| causes transitioncancel."> |
| <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch"> |
| |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| <script src="./support/helper.js" type="text/javascript"></script> |
| |
| </head> |
| <body> |
| <div id="log"></div> |
| |
| <script> |
| promise_test(async t => { |
| // Create element and prepare to trigger a transition on it. |
| const div = addDiv(t, { |
| style: 'transition: background-color 0.25s; background-color: red;', |
| }); |
| |
| // Attach event listeners |
| const eventWatcher = new EventWatcher(t, div, ['transitioncancel']); |
| div.addEventListener('transitionend', t.step_func((event) => { |
| assert_unreached('transitionend event should not be fired'); |
| })); |
| |
| // Trigger transition |
| getComputedStyle(div).backgroundColor; |
| div.style.backgroundColor = 'green'; |
| getComputedStyle(div).backgroundColor; |
| |
| // Remove the transitioning property from transition-property asynchronously. |
| await waitForFrame(); |
| div.style.transitionProperty = 'none'; |
| |
| await eventWatcher.wait_for('transitioncancel'); |
| }, 'Removing a transitioning property from transition-property should trigger transitioncancel'); |
| </script> |
| |
| </body> |
| </html> |
