changing-while-transition-002.html (1813B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>CSS Transitions Test: behavior when transition-timing-function changes while transitioning</title> 6 <meta name="assert" content="Checks a change to the transition-timing-function 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 transition 50% of the way through with a linear timing function 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 // Update the timing function 33 div.style.transitionTimingFunction = 'steps(1, end)'; 34 35 // If the change to the transition-timing-function was reflected, the 36 // computed height would now be '0px'. 37 assert_equals( 38 getComputedStyle(div).height, 39 '50px', 40 'Even after updating the transition-timing-function, the transition should be 50% complete' 41 ); 42 43 // Wait a frame just to be sure that the changed timing function is not later 44 // updated. 45 await waitForFrame(); 46 47 assert_greater_than_equal( 48 parseInt(getComputedStyle(div).height), 49 50, 50 'Even in the next frame the updated transition-timing-function should not apply' 51 ); 52 }, 'Changes to transition-timing-function should not affect in-flight transitions'); 53 </script> 54 55 </body> 56 </html>