transitions-retarget.html (1294B)
1 <!DOCTYPE html> 2 <title>Retargeted CSS transition</title> 3 <link rel="help" href="https://www.w3.org/TR/css-transitions-1/#starting"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <div id="element">x</div> 7 <style> 8 #element { 9 transition: transform 2000ms; 10 transition-timing-function: linear; 11 } 12 </style> 13 <script> 14 promise_test(function(t) { 15 element.offsetTop; // Force recalc 16 element.style.transform = "rotateX(180deg)"; 17 element.offsetTop; // Force recalc 18 19 assert_equals(element.getAnimations().length, 1, 'Transition creates an animation'); 20 var animation = element.getAnimations()[0]; 21 22 return animation.ready.then(function() { 23 assert_equals(element.getAnimations().length, 1, 'No new animations yet'); 24 assert_equals(element.getAnimations()[0], animation); 25 26 element.style.transform = "rotateX(360deg)"; 27 element.offsetTop; // Force recalc 28 29 assert_equals(element.getAnimations().length, 1, 'Retargeting transition results in only one animation'); 30 31 var newAnimation = element.getAnimations()[0]; 32 assert_not_equals(newAnimation, animation); 33 }); 34 }, 'Retargeting a transition should cause the old transition to be cancelled'); 35 </script>