move-after-transition.html (1800B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>move after transition</title> 6 <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property"> 7 <style> 8 #container { 9 position: relative; 10 width: 400px; 11 height: 100px; 12 border: 1px solid black; 13 } 14 #box { 15 position: absolute; 16 width: 100px; 17 height: 100px; 18 background-color: green; 19 transform-style: preserve-3d; 20 transition: transform 300ms linear; 21 transform: translateX(0); 22 } 23 #container.moved #box { 24 transform: translateX(300px); 25 } 26 </style> 27 </head> 28 <body> 29 <div id="container"> 30 <div id="box"></div> 31 </div> 32 </body> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/css/css-transitions/support/helper.js"></script> 36 <script type="text/javascript"> 37 promise_test(async t => { 38 const container = document.getElementById('container'); 39 const box = document.getElementById('box'); 40 41 await waitForAnimationFrames(2); 42 43 container.classList.add('moved'); 44 const animations = document.getAnimations(); 45 assert_equals(animations.length, 1); 46 assert_equals(getComputedStyle(box).transform, 47 "matrix(1, 0, 0, 1, 0, 0)"); 48 49 animations[0].finish(); 50 assert_equals(getComputedStyle(box).transform, 51 "matrix(1, 0, 0, 1, 300, 0)"); 52 53 // Verify that we do not create a second transform transition. 54 box.style.transitionProperty = 'none'; 55 box.style.transform = 'translateX(150px)'; 56 57 assert_equals(box.getAnimations().length, 0); 58 assert_equals(getComputedStyle(box).transform, 59 "matrix(1, 0, 0, 1, 150, 0)"); 60 }, 'Move after transition.'); 61 </script> 62 </html>