at-rule-opt-in-auto-with-types-mutable.html

<!DOCTYPE html>
<html class="reftest-wait">
<title>View Transitions: @view-transition opt in for auto with types (new page)</title>
<link rel="help" href="https://github.com/WICG/view-transitions">
<script src="/common/reftest-wait.js"></script>
<script>
  onload = takeScreenshot;
</script>
<style>
  @view-transition {
    navigation: auto;
    types: check-new;
  }

  html {
    background: grey;
  }

  html:active-view-transition-type(new-type)::view-transition-group(root) {
    animation-duration: 300s;
  }

  /* Hold the old image for the entire duration. */
  html:active-view-transition-type(new-type)::view-transition-old(root) {
    animation: none;
    opacity: 1;
  }

  html:active-view-transition-type(new-type)::view-transition-new(root) {
    animation: none;
    opacity: 0;
  }

  html:active-view-transition-type(new-type)::view-transition-old(root) {
    animation-duration: 3s;
    width: 50vw;
    height: 100vh;
    left: 0px;
    top: 0px;
  }

  html:active-view-transition-type(new-type)::view-transition-new(root) {
    animation-duration: 3s;
    width: 50vw;
    height: 100vh;
    position: fixed;
    left: 50vw;
    top: 0px;
  }
</style>
<script>
  onpagereveal = e => {
    if (!e.viewTransition.types.has("check-new") || e.viewTransition.types.size !== 1)
      e.viewTransition.skipTransition();

    e.viewTransition.types.add("new-type");
    e.viewTransition.types.delete("check-new");
  };
</script>

</html>

chromium/third_party/blink/web_tests/external/wpt/css/css-view-transitions/navigation/resources/at-rule-opt-in-auto-with-types-mutable.html