| <!DOCTYPE html> |
| <title>Node.moveBefore should preserve CSS animation state (transform)</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <body> |
| <section id="old-parent"> |
| <div id="item"></div> |
| </section> |
| <section id="new-parent"> |
| </section> |
| <style> |
| @keyframes anim { |
| from { |
| transform: translateX(100px); |
| } |
| |
| to { |
| transform: translateX(400px); |
| } |
| } |
| |
| #item { |
| position: relative; |
| width: 100px; |
| height: 100px; |
| background: green; |
| animation: 1s linear infinite alternate anim; |
| animation-delay: 100ms; |
| } |
| </style> |
| <script> |
| promise_test(async t => { |
| const item = document.querySelector("#item"); |
| let num_events = 0; |
| await new Promise(resolve => addEventListener("animationstart", () => { |
| num_events++; |
| resolve(); |
| })); |
| |
| // Reparent item |
| document.body.querySelector("#new-parent").moveBefore(item, null); |
| await new Promise(resolve => requestAnimationFrame(() => resolve())); |
| assert_equals(num_events, 1); |
| assert_not_equals(getComputedStyle(item).transform, "none"); |
| }); |
| </script> |
| </body> |
