transitioncancel-002.html (1616B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: Removing transitioning property from transition-property triggers transitioncancel</title> 6 <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> 7 <meta name="assert" content="Removing transitioning property from transition-property 8 causes transitioncancel."> 9 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#event-dispatch"> 10 11 <script src="/resources/testharness.js" type="text/javascript"></script> 12 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 13 <script src="./support/helper.js" type="text/javascript"></script> 14 15 </head> 16 <body> 17 <div id="log"></div> 18 19 <script> 20 promise_test(async t => { 21 // Create element and prepare to trigger a transition on it. 22 const div = addDiv(t, { 23 style: 'transition: background-color 0.25s; background-color: red;', 24 }); 25 26 // Attach event listeners 27 const eventWatcher = new EventWatcher(t, div, ['transitioncancel']); 28 div.addEventListener('transitionend', t.step_func((event) => { 29 assert_unreached('transitionend event should not be fired'); 30 })); 31 32 // Trigger transition 33 getComputedStyle(div).backgroundColor; 34 div.style.backgroundColor = 'green'; 35 getComputedStyle(div).backgroundColor; 36 37 // Remove the transitioning property from transition-property asynchronously. 38 await waitForFrame(); 39 div.style.transitionProperty = 'none'; 40 41 await eventWatcher.wait_for('transitioncancel'); 42 }, 'Removing a transitioning property from transition-property should trigger transitioncancel'); 43 </script> 44 45 </body> 46 </html>