sousa-gecko/testing/web-platform/tests/css/css-view-transitions/new-content-is-inline.html

<!DOCTYPE html>
<html class=reftest-wait>
<title>View transitions: New content is an inline element.</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:bokan@chromium.org">
<link rel="match" href="new-content-is-inline-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/common/reftest-wait.js"></script>

<style>
body {
  margin : 0;
  font: 20px/1 Ahem;
}

.container {
  position: absolute;
  left: 100px;
  width: 400px;
  height: 100px;
  background-color: grey;
}

.container.start {
  top: 100px;
  view-transition-name: container-start;
}

.container.end {
  top: 300px;
  view-transition-name: container-end;
}

.transitioned .container {
  left: 20px;
  width: 600px;
  transform: translateY(-50px);
}

.inline {
  background-color: limegreen;
  color: blue;
}

.start .inline {
  view-transition-name: start;
}

.end .inline {
  view-transition-name: end;
}

.transitioned .inline {
  background-color: coral;
}

/* Overlay the page with purple to ensure screenshots taken are of the view
 * transition. */
:root {
  view-transition-name: none;
}
::view-transition {
  background-color: rebeccapurple;
}

/* This step function keeps the old snapshots in their initial state for half
 * the duration, then the new snapshots in their final state for the last half
 * of the duration. */
html::view-transition-group(*),
html::view-transition-new(*),
html::view-transition-old(*) {
  animation-timing-function: steps(2, jump-none);
}

/* Set different durations for start and end so the two subtrees can be
 * differentiated. The test will manually control animation playback so
 * duration doesn't matter. */
html::view-transition-group(container-start),
html::view-transition-group(start),
html::view-transition-new(container-start),
html::view-transition-old(container-start) {
  animation-duration: 2s;
}
html::view-transition-group(container-end),
html::view-transition-group(end),
html::view-transition-new(container-end),
html::view-transition-old(container-end) {
  animation-duration: 3s;
}

/* Hide the old states for the inlines, they're tested in
 * old-content-is-inline.html */
html::view-transition-old(start),
html::view-transition-old(end) {
  animation: unset;
  opacity: 0;
}
html::view-transition-new(start),
html::view-transition-new(end) {
  animation: unset;
  opacity: 1;
}

</style>

<!--
This subtree will be held at the animation start to test the old content's
starting position.
-->
<div class="container start">
  <span>FILL FILL</span>
  <span id="start" class="inline">INL INL</span>
  <p style="margin-top: 50px">START STATE</p>
</div>

<!--
This subtree will be held at the animation end to test the old content's
ending position.
-->
<div class="container end">
  <span>FILL FILL</span>
  <span id="end" class="inline">INL INL</span>
  <p>END STATE</p>
</div>

<script>
if (typeof failIfNot != 'undefined')
  failIfNot(document.startViewTransition, "Missing document.startViewTransition");

async function runTest() {
  let transition = document.startViewTransition(() => {
    document.body.classList.add('transitioned');
  });

  transition.ready.then(() => {
    for (const anim of document.getAnimations()) {
      anim.pause();
      if (anim.effect.getTiming().duration == 3000) {
        // This is an animation for the end subtree. Adjust it to the end
        // (without finishing the animation) so we're displaying the final
        // position.
        anim.currentTime = anim.effect.getTiming().duration - 1;
      }
    }

    requestAnimationFrame(takeScreenshot);
  });
}
onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));

</script>