view_transition.html | Explore in Territory

<!DOCTYPE html>
<html>
  <head>
    <script>
      const params = new URLSearchParams(window.location.search);
      let metaTagContent = 'width=device-width,minimum-scale=1';
      if (params.has('resizes-content'))
        metaTagContent += ',interactive-widget=resizes-content';
      else if (params.has('resizes-visual'))
        metaTagContent += ',interactive-widget=resizes-visual';
      else if (params.has('overlays-content')) {
        metaTagContent += ',interactive-widget=overlays-content';
      }

      let meta = document.createElement('meta');
      meta.name = 'viewport';
      meta.content = metaTagContent;
      document.head.appendChild(meta);
    </script>
    <script src="view_transition_util.js"></script>
    <style>
      body {
        margin: 0;
      }

      input {
        /* Invisible so that blinking cursor doesn't affect pixel tests */
        position: absolute;
        top: 50px;
        opacity: 0;
      }

      #bottomfixed {
        position: fixed;
        left: 20px;
        bottom: 10px;
        width: 100px;
        height: 30px;
        background-color: coral;
        view-transition-name: bottom;
        contain: paint;
      }

      #topfixed {
        position: fixed;
        left: 20px;
        top: 10px;
        width: 100px;
        height: 30px;
        background-color: dodgerblue;
        view-transition-name: top;
        contain: paint;
      }

      #inflow {
        position: absolute;
        left: 100px;
        top: 200px;
        width: 100px;
        height: 300px;
        background-color: rebeccapurple;
      }

      /* This element will cover and show the position:fixed viewport to make it
       * easier to see in screenshot what's being rendered below the keyboard. */
      #background {
        width: 100dvw;
        height: 100dvh;
        background-color: whitesmoke;
      }

      /* 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 = function() {
        document.getElementById("inflow").style.transform = "translateX(100px)";
        document.getElementById("bottomfixed").style.transform = "translateX(100px)";
        document.getElementById("topfixed").style.transform = "translateX(100px)";
      }
    </script>
  </head>
  <body>
    <div id="background">
      <input id="inputElement" type="text">
      <div id="inflow"></div>
      <div id="bottomfixed"></div>
      <div id="topfixed"></div>
    </div>
  </body>
</html>
chromium/chrome/test/data/android/view_transition.html
