multiple-shared-elements-animate-crash.html

<!DOCTYPE html>
<title>Shared transitions of different elements and shapes</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:[email protected]">

<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
#container {
  width: max-content;
  position: relative;
}

.left {
  left: 50px;
}
.right {
  left: 550px;
}

div {
  margin: 10px;
  contain: paint;
}

.square {
  width: 100px;
  height: 100px;
  background: green;
  view-transition-name: square;
}
.rounded {
  width: 100px;
  height: 100px;
  background: green;
  border-radius: 20%;
  view-transition-name: rounded;
}
</style>

<div id=container class=left>
  <div class=square></div>
  <div class=rounded></div>
</div>

<script>
async_test((t) => {
  t.step(() => {
    requestAnimationFrame(() => requestAnimationFrame(async () => {
      let transition = document.startViewTransition(() => {
        container.classList.remove("left");
        container.classList.add("right");
      });

      requestAnimationFrame(() => {
        setTimeout(() => t.done(), 100);
      });
    }));
  });
}, "The test passes if it does not crash");
</script>

chromium/third_party/blink/web_tests/view-transition/multiple-shared-elements-animate-crash.html