testing/web-platform/tests/css/css-view-transitions/new-element-on-start.html

   1 <!DOCTYPE html>
   2 <html class=reftest-wait>
   3 <title>Shared transitions: new element tag specified for start phase</title>
   4 <link rel="help" href="https://github.com/WICG/view-transitions">
   5 <link rel="author" href="mailto:vmpstr@chromium.org">
   6 <link rel="match" href="new-element-on-start-ref.html">
   7
   8 <script src="/common/reftest-wait.js"></script>
   9 <style>
  10 div {
  11   width: 100px;
  12   height: 100px;
  13   contain: paint;
  14   position: absolute;
  15   top: 50px;
  16 }
  17
  18 .before {
  19   background: lightblue;
  20   left: 50px;
  21 }
  22 .after {
  23   background: black;
  24   left: 200px;
  25 }
  26 .hidden {
  27   background: red;
  28   left: 350px;
  29 }
  30
  31 html::view-transition-group(hidden) { animation-duration: 300s; }
  32 html::view-transition-image-pair(hidden) { opacity: 0; }
  33
  34 html::view-transition-group(before) { animation-duration: 0s; }
  35 html::view-transition-image-pair(before) { filter: invert(1); }
  36 html::view-transition-new(before) { animation-duration: 0s; }
  37 html::view-transition-old(*) { animation-duration: 0s; }
  38
  39 html::view-transition-group(after) { animation-duration: 0s; }
  40 html::view-transition-image-pair(after) { filter: invert(1); }
  41 html::view-transition-new(after) { animation-duration: 0s; }
  42 html::view-transition-old(after) { animation-duration: 0s; }
  43
  44 html::view-transition-group(root) { animation: unset; opacity: 0; }
  45 html::view-transition { background: lightpink; }
  46
  47 </style>
  48
  49 <div id=before class=before></div>
  50 <div id=after class=after></div>
  51
  52 <div id=hidden class=hidden></div>
  53
  54 <script>
  55 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
  56
  57 async function runTest() {
  58   hidden.style.viewTransitionName = "hidden";
  59   before.style.viewTransitionName = "before";
  60   document.startViewTransition(() => {
  61     before.remove();
  62     hidden.style.viewTransitionName = "";
  63     after.style.viewTransitionName = "after";
  64
  65     requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
  66   });
  67 }
  68 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
  69 </script>
  70