CSSTransition-not-canceling.tentative.html (1612B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Not canceling a CSS transition</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> 5 <!-- TODO: Add a more specific link for this once it is specified. --> 6 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/helper.js"></script> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 const runDisplayNoneTransitionTest = displayTransitionStyle => { 15 promise_test(async t => { 16 const div = addDiv(t, { style: 'margin-left: 0px' }); 17 getComputedStyle(div).marginLeft; 18 19 div.style.transition = 'margin-left 100s'; 20 div.style.marginLeft = '1000px'; 21 22 const transition = div.getAnimations()[0]; 23 await transition.ready; 24 await waitForFrame(); 25 26 assert_not_equals(getComputedStyle(div).marginLeft, '1000px', 27 'transform style is animated before setting "display: none"'); 28 29 div.style.transition = `${div.style.transition}, ${displayTransitionStyle}`; 30 div.style.display = 'none'; 31 32 assert_not_equals(getComputedStyle(div).marginLeft, '1000px', 33 'transform style is animated after setting "display: none"'); 34 }, `Setting "display: none" with "display" set to transition using "${displayTransitionStyle}" does not cancel running transitions`); 35 }; 36 37 runDisplayNoneTransitionTest('display 100s allow-discrete'); 38 runDisplayNoneTransitionTest('display 100s, all allow-discrete 100s'); 39 40 </script>