| <!DOCTYPE html> |
| <title>Shared transitions of different elements and shapes</title> |
| <link rel="help" href="https://github.com/WICG/view-transitions"> |
| <link rel="author" href="mailto:vmpstr@chromium.org"> |
| |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #container { |
| width: max-content; |
| position: relative; |
| } |
| |
| .left { |
| left: 50px; |
| } |
| .right { |
| left: 550px; |
| } |
| |
| div { |
| margin: 10px; |
| contain: paint; |
| } |
| |
| .square { |
| width: 100px; |
| height: 100px; |
| background: green; |
| view-transition-name: square; |
| } |
| .rounded { |
| width: 100px; |
| height: 100px; |
| background: green; |
| border-radius: 20%; |
| view-transition-name: rounded; |
| } |
| </style> |
| |
| <div id=container class=left> |
| <div class=square></div> |
| <div class=rounded></div> |
| </div> |
| |
| <script> |
| async_test((t) => { |
| t.step(() => { |
| requestAnimationFrame(() => requestAnimationFrame(async () => { |
| let transition = document.startViewTransition(() => { |
| container.classList.remove("left"); |
| container.classList.add("right"); |
| }); |
| |
| requestAnimationFrame(() => { |
| setTimeout(() => t.done(), 100); |
| }); |
| })); |
| }); |
| }, "The test passes if it does not crash"); |
| </script> |
