starting-of-transitions-001.html (1424B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Transitions Test: behavior when transition-property changes 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 <script> 18 test(t => { 19 // Start a 100s transition 50% of the way through 20 const div = addDiv(t, { 21 style: 'transition: height 100s -50s linear; height: 0px', 22 }); 23 getComputedStyle(div).height; 24 div.style.height = '100px'; 25 assert_equals( 26 getComputedStyle(div).height, 27 '50px', 28 'Transition should be initially 50% complete' 29 ); 30 31 // Change the transition-property and flush the style change 32 div.style.transitionProperty = 'width'; 33 getComputedStyle(div).transitionProperty; 34 35 // The transition on the height property should have been canceled 36 assert_equals( 37 getComputedStyle(div).height, 38 '100px', 39 'Transition should have been canceled' 40 ); 41 }, 'changes to transition-property should cancel in-flight transitions'); 42 </script> 43 44 </body> 45 </html>