transition-remove-and-change-immediate.html (1466B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: Removing transition and changing width applies change immediately</title> 6 <meta name="assert" content="When a transition is removed and a width is changed after a previous transition completes, the change is immediate."> 7 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> 8 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="./support/helper.js"></script> 12 13 </head> 14 <body> 15 <div id="log"></div> 16 17 <script> 18 promise_test(async t => { 19 const div = addDiv(t, { 20 style: 'transition: width 0.02s; width: 0px;' 21 }); 22 23 // Flush initial state 24 getComputedStyle(div).width; 25 div.style.width = '100px'; 26 27 // Wait for transition to complete 28 await waitForTransitionEnd(div); 29 30 // Verify the width after first transition 31 const afterFirst = getComputedStyle(div).width; 32 assert_equals(afterFirst, '100px', 'width should be 100px after first transition'); 33 34 // Set width back to 0 and remove transition 35 div.style.width = '0px'; 36 div.style.transition = ''; 37 38 // Force layout update to ensure style computation 39 const afterSecond = getComputedStyle(div).width; 40 // Check width is immediately updated 41 assert_equals( 42 afterSecond, 43 '0px', 44 'width should reset to 0 immediately' 45 ); 46 47 }, 'Removing transition and changing width applies change immediately'); 48 </script> 49 50 </body> 51 </html>