changing-while-transition-004.html (1753B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: behavior when transition changes to default while transitioning</title> 6 <meta name="assert" content="Checks a change to the transition-duration 7 property does not affect an in-flight transition"> 8 <link rel="help" title="3. Starting of transitions" href="https://drafts.csswg.org/css-transitions/#starting"> 9 10 <script src="/resources/testharness.js" type="text/javascript"></script> 11 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 12 <script src="./support/helper.js" type="text/javascript"></script> 13 14 </head> 15 <body> 16 <div id="log"></div> 17 18 <script> 19 promise_test(async t => { 20 // Start a 100s transition 50% of the way through 21 const div = addDiv(t, { 22 style: 'transition: height 100s -50s linear; height: 0px', 23 }); 24 getComputedStyle(div).height; 25 div.style.height = '100px'; 26 assert_equals( 27 getComputedStyle(div).height, 28 '50px', 29 'Transition should be initially 50% complete' 30 ); 31 32 // Unset the transition property (with default all 0s). 33 div.style.transition = ''; 34 35 // If the change to the transition-duration was reflected, the 36 // transition would be cancelled and the computed height 37 // would now be '25px'. 38 assert_equals( 39 getComputedStyle(div).height, 40 '50px', 41 'Even after unsetting transition, the transition should be 50% complete' 42 ); 43 44 // Wait a frame just to be sure that the changed duration is not later 45 // updated. 46 await waitForFrame(); 47 48 assert_greater_than_equal( 49 parseInt(getComputedStyle(div).height), 50 50, 51 'Even in the next frame the updated transition should not apply' 52 ); 53 }, 'Unsettign transition should not affect in-flight transitions'); 54 </script> 55 56 </body> 57 </html>