change-duration-during-transition.html (1889B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>transition duration change</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#starting"> 7 <style> 8 #box { 9 position: absolute; 10 height: 100px; 11 width: 100px; 12 left: 0px; 13 background-color: blue; 14 transition-duration: 1s; 15 transition-delay: -0.75s; 16 transition-timing-function: linear; 17 transition-property: left; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="box"></div> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/css/css-transitions/support/helper.js"></script> 26 <script> 27 'use strict'; 28 29 window.onload = () => { 30 promise_test(async t => { 31 // Make sure we have rendered the page before making the style change 32 // to ensure we get transitions. 33 await waitForAnimationFrames(2); 34 35 box.style.left = '400px'; 36 assert_equals( 37 getComputedStyle(box).left, '300px', 38 'The transition progresses 75% immediately due to negative ' + 39 'transition-delay'); 40 41 box.style.transitionDuration = '7.5s'; 42 assert_equals( 43 getComputedStyle(box).left, '300px', 44 'Changing the duration does not affect the current transition'); 45 46 const anim = document.getAnimations()[0]; 47 anim.finish(); 48 49 assert_equals( 50 getComputedStyle(box).left, '400px', 51 'The final value has been reached when finished'); 52 box.style.left = '1400px'; 53 assert_equals( 54 getComputedStyle(box).left, '500px', 55 'With the new duration taking effect, the transition progresses ' + 56 '10% immediately'); 57 }, 'Transition duration change should not affect transition in progress'); 58 }; 59 </script> 60 </body> 61 </html>