view_transition_browser_controls.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <script src="view_transition_util.js"></script>
    <style>
      :root {
        width: 100%;
        height: 100%;
      }
      :root.finished {
        background: red;
      }
      body {
        width: 100%;
        margin: 0;
      }
      .strip {
        width: 100%;
        height: 20svh;
        background-color: dodgerblue;
        margin-bottom: 20svh;
      }
      .transitioned .strip {
        background-color: limegreen;
      }
      /* 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);
      }
      @view-transition {
        navigation: auto;
      }
      ::view-transition-old(root) {
        transform: translateX(-50vw);
        animation: none;
        opacity: 1;
      }
      ::view-transition-new(root) {
        transform: translateX(50vw);
        animation: none;
        opacity: 1;
      }
      #top {
        background-color: peachpuff;
        height: 30px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      #controlsEdge {
        background-color: peachpuff;
        height: 30px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 56px;
        left: 0;
      }
    </style>
    <script>
      const params = new URLSearchParams(location.search);
      if (params.has('next')) {
        document.documentElement.classList.add('transitioned');
      }
      addEventListener('pagereveal', e => {
        // Ensure the live page looks sufficiently different from the transition
        // to prevent confusion when triaging screenshots.
        if (e.viewTransition) {
          e.viewTransition.finished.then(
              () => document.documentElement.classList.add('finished'));
        }
      });
    </script>
  </head>
  <body>
    <div id="top">
      <div>
        TOP LEFT
      </div>
      <div>
        TOP RIGHT
      </div>
    </div>
    <div id="controlsEdge">
      <div>
        CONTROLS LEFT
      </div>
      <div>
        CONTROLS RIGHT
      </div>
    </div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div class="strip"></div>
    <div style="height:200vh">
    </div>
  </body>
</html>
chromium/chrome/test/data/android/view_transition_browser_controls.html
