transition-in-empty-iframe-child.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      ::view-transition-new(*) {
        animation: unset;
        opacity: 1;
      }
      ::view-transition-old(*) {
        animation-duration: 30s;
        opacity: 0;
      }

      div {
        width: 50vw;
        height: 50vh;
        background-color: limegreen;
        border: 1px solid black;
      }

      .hidden {
        display: none;
      }

    </style>
    <script>
      function newState() {
        document.querySelector('.hidden').classList.remove('hidden');
      }

      function startTransition() {
        window.transition = document.startViewTransition(newState);
      }

      const params = new URLSearchParams(window.location.search);
      if (params.has('ref')) {
        addEventListener('load', newState);
      }
    </script>
  </head>
  <body>
    <div class="hidden">
    </div>
  </body>
</html>

chromium/third_party/blink/web_tests/external/wpt/css/css-view-transitions/support/transition-in-empty-iframe-child.html