| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width,minimum-scale=1"> |
| <style> |
| /* 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); |
| } |
| |
| dialog { |
| width: 50dvw; |
| height: 50dvh; |
| box-sizing: border-box; |
| border: 2px solid rebeccapurple; |
| outline: none; |
| } |
| |
| div { |
| position: absolute; |
| left: 0; |
| top: 0; |
| background-color: red; |
| } |
| |
| .vline { |
| width: 2px; |
| height: 100dvh; |
| } |
| |
| .hline { |
| width: 100dvw; |
| height: 2px; |
| } |
| |
| </style> |
| <script src="view_transition_util.js"></script> |
| <script> |
| updateDOM = function() { |
| document.getElementById("thedialog").showModal(); |
| } |
| </script> |
| </head> |
| |
| <body> |
| <div class="vline" style="left: calc(25dvw - 2px)"></div> |
| <div class="vline" style="left:75dvw"></div> |
| <div class="hline" style="top: calc(25dvh - 2px)"></div> |
| <div class="hline" style="top:75dvh"></div> |
| <dialog id="thedialog"> |
| This is a dialog. It should be positioned within the intersection of the red lines. |
| </dialog> |
| </body> |
| </html> |
