transition-zero-duration-with-delay.html (1519B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: 0-duration transition with delay applies after delay</title> 6 <meta name="assert" content="Transition with 0s duration and 0.3s delay applies property change after delay period"> 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.1s; width: 0px;' 21 }); 22 23 // Flush initial state 24 getComputedStyle(div).width; 25 // First transition to 100px 26 div.style.width = '100px'; 27 await waitForTransitionEnd(div); 28 29 // Change transition to 0s duration with 300ms delay 30 div.style.transition = 'width 0s linear 0.3s'; 31 32 // Set width back to 0 33 div.style.width = '0px'; 34 // Immediate check - should NOT have changed yet 35 const computedStart = getComputedStyle(div).width; 36 assert_equals( 37 computedStart, 38 '100px', 39 'Width should remain at 100px initially' 40 ); 41 // Wait for transitionend (should trigger after 300ms delay) 42 await waitForTransitionEnd(div); 43 44 // Verify final state 45 const finalWidth = getComputedStyle(div).width; 46 47 assert_equals( 48 finalWidth, 49 '0px', 50 'Width should reset to 0 after delay' 51 ); 52 53 }, '0-duration transition with delay applies change after delay period'); 54 </script> 55 56 </body> 57 </html>