| <!doctype html> |
| <title>View Transitions capture test</title> |
| |
| <style> |
| .box { |
| width: 100px; |
| height: 100px; |
| } |
| |
| :root { view-transition-name: none } |
| #one { view-transition-name: one; } |
| #two { view-transition-name: two; } |
| |
| ::view-transition-group(*) { animation-play-state: paused; } |
| |
| ::view-transition-new(one) { animation: unset; opacity: 1; } |
| ::view-transition-old(one) { animation: unset; opacity: 0; } |
| |
| ::view-transition-new(two) { animation: unset; opacity: 0; } |
| ::view-transition-old(two) { animation: unset; opacity: 1; } |
| |
| </style> |
| <div class="box" id=one></div> |
| <div class="box" id=two></div> |
| |
| <script> |
| function runTest() { |
| one.style.background = "grey"; |
| two.style.background = "pink"; |
| /* |
| startViewTransition.ready returns when the animation is prepared. |
| This is before the GPU process handles and renders the request. |
| Here we add two no-damage requestAnimationFrame to allow two VSyncs |
| to pass. These should occur after the ViewTransition is received by |
| th GPU Process, and should allow for more reliable timing for the |
| test harness to take screenshots. |
| */ |
| document.startViewTransition(() => { |
| one.style.background = "black"; |
| two.style.background = "orange"; |
| }).ready.then(() => { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| domAutomationController.send("SUCCESS"); |
| }); |
| }); |
| }); |
| } |
| |
| onload = requestAnimationFrame(() => requestAnimationFrame(runTest)); |
| </script> |
