| <!DOCTYPE html> |
| <html class=reftest-wait> |
| <head> |
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> |
| <link rel="match" href="nested-scope-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <script src="/web-animations/testcommon.js"></script> |
| <style> |
| |
| .box { position: relative; contain: strict; } |
| #scopeA { background: #ddd; |
| left: 0; top: 0; width: 300px; height: 300px; } |
| #partA { background: #4af; |
| left: 30px; top: 30px; width: 240px; height: 240px; } |
| #scopeB { background: #eee; |
| left: 30px; top: 30px; width: 180px; height: 180px; } |
| #partB { background: cyan; |
| left: 30px; top: 30px; width: 120px; height: 120px; } |
| |
| ::view-transition-old(*) { animation: -ua-view-transition-fade-out 1s paused; } |
| ::view-transition-new(*) { animation: -ua-view-transition-fade-in 1s paused; } |
| .tr { view-transition-name: demo; } |
| |
| </style> |
| </head> |
| <body> |
| <div id=scopeA class=box> |
| <div id=partA class="box tr"> |
| <div id=scopeB class=box> |
| <div id=partB class="box tr"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| |
| failIfNot(scopeA.startViewTransition, "Missing element.startViewTransition"); |
| |
| // This test runs simultaneous transitions on two scopes, one inside the other. |
| // It verifies that the inner and outer participants are both visible while both |
| // transitions are in progress. (This entails rendering the inner transition |
| // through the ::view-transition-new for the outer participant.) |
| async function runTest() { |
| await waitForCompositorReady(); |
| await scopeB.startViewTransition().ready; |
| |
| // Untag partB to avoid a collision when the outer transition looks for its |
| // participants. (We can stop doing this once we have contain: view-transition |
| // or similar.) |
| partB.classList.remove("tr"); |
| |
| await scopeA.startViewTransition(() => { |
| scopeA.style.background = "#ccc"; |
| }).ready; |
| requestAnimationFrame(takeScreenshot); |
| } |
| onload = () => runTest(); |
| |
| </script> |
| </body> |
| </html> |
