transition-reparented.html (1293B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transition should cancel when an element is reparented</title> 4 <link rel="help" href="https://www.w3.org/TR/css-transitions-1/#starting"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 .animated-div { 10 margin-left: 100px; 11 transition: margin-left 10s -5s linear; 12 } 13 </style> 14 15 <div id="parent1"> 16 <div id="target" class='animated-div'></div> 17 </div> 18 19 <div id="parent2"></div> 20 21 <script> 22 'use strict'; 23 24 test(t => { 25 assert_equals(getComputedStyle(target).marginLeft, '100px'); 26 target.style.marginLeft = '200px'; 27 28 // Because the start delay is -50% of the transition duration, we should 29 // immediately be (approximately) at the halfway point. What we really care 30 // about checking is that the transition has started but has not ended. 31 assert_not_equals(getComputedStyle(target).marginLeft, '100px'); 32 assert_not_equals(getComputedStyle(target).marginLeft, '200px'); 33 34 // Now change the target's parent. This should cancel the transition and 35 // skip straight to the end state. 36 parent2.appendChild(target); 37 assert_equals(getComputedStyle(target).marginLeft, '200px'); 38 }, 'When an element is reparented, any CSS Transition on it should be cancelled'); 39 </script>