content/test/data/gpu/pixel_view_transitions_capture.html

<!doctype html>
<title>View Transitions capture test</title>

<style>
.box {
  width: 100px;
  height: 100px;
}

:root { view-transition-name: none }
#one { view-transition-name: one; }
#two { view-transition-name: two; }

::view-transition-group(*) { animation-play-state: paused; }

::view-transition-new(one) { animation: unset; opacity: 1; }
::view-transition-old(one) { animation: unset; opacity: 0; }

::view-transition-new(two) { animation: unset; opacity: 0; }
::view-transition-old(two) { animation: unset; opacity: 1; }

</style>
<div class="box" id=one></div>
<div class="box" id=two></div>

<script>

function waitForPresentedFrame() {
  return new Promise((resolve) => {
    const gpuBenchmarking = window.chrome && window.chrome.gpuBenchmarking;
    if (gpuBenchmarking && gpuBenchmarking.addSwapCompletionEventListener) {
      gpuBenchmarking.addSwapCompletionEventListener(resolve);
    } else {
      requestAnimationFrame(() => requestAnimationFrame(resolve));
    }
  });
}

async function runTest() {
  one.style.background = "grey";
  two.style.background = "pink";

  document.startViewTransition(() => {
    one.style.background = "black";
    two.style.background = "orange";
  }).ready.then(async () => {
    await waitForPresentedFrame();
    domAutomationController.send("SUCCESS");
  });
}

onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
</script>