view_transition_dialog.html | Explore in Territory

<!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>
chromium/chrome/test/data/android/view_transition_dialog.html
