root-element-transition-iframe.html

<!DOCTYPE html>
<html>
<head>
<script src="/common/rendering-utils.js"></script>
<style>
@view-transition { navigation: auto; }

.hidden {
  width: 10px;
  height: 10px;
  view-transition-name: hidden;
  background: green;
}
html::view-transition-group(hidden) { animation-duration: 300s; }
html::view-transition-image-pair(hidden) { opacity: 0; }

html::view-transition-old(root) {
  width: 50vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  opacity: 1;
  animation: unset;
}
html::view-transition-new(root) {
  width: 50vw;
  height: 100vh;
  position: fixed;
  left: 50vw;
  top: 0px;
  opacity: 1;
  animation: unset;
}
</style>
<script>
  onload = () => {
    window.parent.postMessage("loaded", '*');
  }

  const params = new URLSearchParams(location.search);
  if (params.has("blue"))
    document.documentElement.style.background = "blue";
  else if (params.has("grey"))
    document.documentElement.style.background = "grey";

  onpagereveal = async (e) => {
    if (e.viewTransition != null) {
      await e.viewTransition.ready;
      window.parent.postMessage("transition", '*');
    }
  }

  window.addEventListener(
    "message", async (e) => {
      if (e.data === "checkrendering") {
        await waitForAtLeastOneFrame();
        await waitForAtLeastOneFrame();
        window.parent.postMessage("rendered", '*');
      }
    }
  );
</script>
</head>
<div class="hidden"></div>
</html>

chromium/third_party/blink/web_tests/external/wpt/css/css-view-transitions/navigation/resources/root-element-transition-iframe.html