| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=800"> |
| <script src="view_transition_util.js"></script> |
| <style> |
| :root { |
| background-color: cornflowerblue; |
| } |
| :root.transitioned { |
| background-color: pink; |
| } |
| body { |
| margin: 0; |
| } |
| #wideElement { |
| position: absolute; |
| top: 400px; |
| left: 0; |
| /* Double the width of the initial-containing-block (set from the |
| viewport meta tag). */ |
| width: 1600px; |
| height: 100px; |
| background-color: limegreen; |
| } |
| .corner { |
| position: fixed; |
| width: 100px; |
| height: 100px; |
| background-color: coral; |
| } |
| .transitioned .corner { |
| background-color: darkseagreen; |
| } |
| /* Step function means we'll keep the old snapshots in their initial state |
| * for half the duration, then the new snapshots in their final state for |
| * the last half of the duration. Note that tests pause the animation |
| * and control the progress programmatically so the duration is used only |
| * for live testing. */ |
| ::view-transition-group(*), |
| ::view-transition-new(*), |
| ::view-transition-old(*) { |
| animation-duration: 5s; |
| animation-timing-function: steps(2, jump-none); |
| } |
| </style> |
| <script> |
| updateDOM = () => { |
| document.documentElement.classList.add('transitioned'); |
| }; |
| </script> |
| </head> |
| <body> |
| <div class="corner" style="top: 0; left: 0; view-transition-name:topleft;"></div> |
| <div class="corner" style="top: 0; right: 0; view-transition-name:topright;"></div> |
| <div class="corner" style="bottom: 0; left: 0; view-transition-name:bottomleft;"></div> |
| <div class="corner" style="bottom: 0; right: 0; view-transition-name:bottomright;"></div> |
| <div id="wideElement"></div> |
| </body> |
| </html> |
