view_transition_wider_than_icb.html

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