Blitz - WPT: new-content-is-inline.html

wpt / css / css-view-transitions / new-content-is-inline.html

/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>

/css/css-view-transitions/new-content-is-inline-ref.html

<!DOCTYPE html>
<title>View transitions: New content is an inline element (ref)</title>
<link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/">
<link rel="author" href="mailto:bokan@chromium.org">
<link rel="stylesheet" href="/fonts/ahem.css">

<style>
:root {
  background-color: rebeccapurple;
  font: 20px/1 Ahem;
}

body { margin: 0; }

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

.container.start {
  top: 100px;
}

.container.end {
  top: 300px;
}

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

.inline {
  opacity: 0;
  background-color: coral;
  color: blue;
}

.transitioned .inline {
  opacity: 1;
}

#dummyStartInline {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 600px;
  /* scale transform applied in script below */
  transform-origin: top left;
}

</style>

<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>

<div class="container end transitioned">
  <span>FILL FILL</span>
  <span id="end" class="inline">INL INL</span>
  <p>END STATE</p>
</div>

<div id="dummyStartInline" class="transitioned">
  <span style="opacity:0">FILL FILL</span>
  <span class="inline">INL INL</span>
</div>
<script>
  let endWidth = document.getElementById('end').getBoundingClientRect().width;
  let startWidth = document.getElementById('start').getBoundingClientRect().width;
  let scale = startWidth / endWidth;
  /* Default UA CSS scales the image pseudos to match the group in the inline
     direction. The block direction scales to retain the image's aspect ratio.
     So have the dummy end line scale to match the start state width and apply
     the same scale to its height. */
  document.getElementById('dummyStartInline').style.transform = `scale(${scale})`;
</script>