transitioncancel-003.html (1648B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: Changing transition properties mid-transition</title> 6 <meta name="assert" content="When transition properties are changed mid-transition, the original transition completes and new transition parameters apply to subsequent changes"> 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 5000ms; width: 0px;' 21 }); 22 23 // Flush initial state 24 getComputedStyle(div).width; 25 // Start first transition to 100px 26 div.style.width = '100px'; 27 // Wait until transition starts running 28 await new Promise(resolve => { 29 div.addEventListener('transitionrun', resolve, { once: true }); 30 }); 31 32 // MID-TRANSITION CHANGE: Switch to 0s duration + 5000ms delay 33 div.style.transition = 'width 0s 5000ms'; 34 assert_not_equals( 35 getComputedStyle(div).width, 36 '100px', 37 'Width should not reach 100px yet' 38 ); 39 40 // Trigger new width change mid-transition 41 div.style.width = '200px'; 42 43 assert_not_equals( 44 getComputedStyle(div).width, 45 '200px', 46 'Width should not change to 0px immediately' 47 ); 48 49 await waitForTransitionEnd(div); 50 51 // Final computed style 52 assert_equals( 53 getComputedStyle(div).width, 54 '200px', 55 'Final width should be 200px' 56 ); 57 }, 'Mid-transition transition changes affect subsequent transitions'); 58 </script> 59 60 </body> 61 </html>