| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>move after transition</title> |
| <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property"> |
| <style> |
| #container { |
| position: relative; |
| width: 400px; |
| height: 100px; |
| border: 1px solid black; |
| } |
| #box { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| transform-style: preserve-3d; |
| transition: transform 300ms linear; |
| transform: translateX(0); |
| } |
| #container.moved #box { |
| transform: translateX(300px); |
| } |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="box"></div> |
| </div> |
| </body> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/css-transitions/support/helper.js"></script> |
| <script type="text/javascript"> |
| promise_test(async t => { |
| const container = document.getElementById('container'); |
| const box = document.getElementById('box'); |
| |
| await waitForAnimationFrames(2); |
| |
| container.classList.add('moved'); |
| const animations = document.getAnimations(); |
| assert_equals(animations.length, 1); |
| assert_equals(getComputedStyle(box).transform, |
| "matrix(1, 0, 0, 1, 0, 0)"); |
| |
| animations[0].finish(); |
| assert_equals(getComputedStyle(box).transform, |
| "matrix(1, 0, 0, 1, 300, 0)"); |
| |
| // Verify that we do not create a second transform transition. |
| box.style.transitionProperty = 'none'; |
| box.style.transform = 'translateX(150px)'; |
| |
| assert_equals(box.getAnimations().length, 0); |
| assert_equals(getComputedStyle(box).transform, |
| "matrix(1, 0, 0, 1, 150, 0)"); |
| }, 'Move after transition.'); |
| </script> |
| </html> |