CSSTransition-finished.tentative.html (1052B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSSTransition.finished</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 9 <style> 10 11 .animated-div { 12 margin-left: 100px; 13 transition: margin-left 100s linear 100s; 14 } 15 16 </style> 17 <div id="log"></div> 18 <script> 19 20 'use strict'; 21 22 promise_test(async t => { 23 const div = addDiv(t, { class: 'animated-div' }); 24 getComputedStyle(div).marginLeft; 25 div.style.marginLeft = '200px'; 26 const animation = div.getAnimations()[0]; 27 28 animation.finish(); 29 await animation.finished; 30 31 animation.play(); 32 const marginLeft = parseFloat(getComputedStyle(div).marginLeft); 33 assert_equals( 34 marginLeft, 35 100, 36 'Replaying a finished transition should update the target element\'s style' 37 ); 38 }, 'Restarting a finished transition rewinds playback'); 39 40 </script>