testing/web-platform/tests/css/css-view-transitions/web-animations-api.html

   1 <!DOCTYPE html>
   2 <html class=reftest-wait>
   3 <title>Shared transitions: capture opacity elements</title>
   4 <link rel="help" href="https://github.com/WICG/view-transitions">
   5 <link rel="author" href="mailto:khushalsagar@chromium.org">
   6 <link rel="match" href="web-animations-api-ref.html">
   7 <meta name="fuzzy" content="web-animations-api-ref.html:0-2;0-500">
   8
   9 <script src="/common/reftest-wait.js"></script>
  10 <style>
  11 #first {
  12   background: blue;
  13   width: 100px;
  14   height: 100px;
  15   contain:  paint;
  16 }
  17 #second {
  18   background: green;
  19   width: 100px;
  20   height: 100px;
  21   contain: paint;
  22 }
  23
  24 /* Unset all animations since the test drives it using WA-API */
  25 html::view-transition-group(*),
  26 html::view-transition-image-pair(*),
  27 html::view-transition-new(*),
  28 html::view-transition-old(*) {
  29   animation: unset;
  30 }
  31 </style>
  32 <div id=first></div>
  33 <div id=second></div>
  34 <script>
  35 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
  36
  37 function setAnimation() {
  38   document.documentElement.animate({ transform: ['translate(100px)', 'translate(100px)'] }, { duration: 10000, pseudoElement: '::view-transition-group(first)'});
  39   document.documentElement.animate({ transform: ['translate(150px)', 'translate(150px)'] }, { duration: 10000, pseudoElement: '::view-transition-group(second)'});
  40   requestAnimationFrame(takeScreenshot);
  41 }
  42
  43 async function runTest() {
  44   first.style.viewTransitionName = "first";
  45   document.startViewTransition(() => {
  46     first.style.viewTransitionName = "";
  47     second.style.viewTransitionName = "second";
  48     requestAnimationFrame(setAnimation);
  49   });
  50 }
  51 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
  52 </script>
  53