testing/web-platform/tests/css/css-view-transitions/old-content-with-overflow.html

   1 <!DOCTYPE html>
   2 <html class=reftest-wait>
   3 <title>Shared transitions: shared element with overflow</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="content-with-overflow-ref.html">
   7 <script src="/common/reftest-wait.js"></script>
   8 <style>
   9 .target {
  10   width: 100px;
  11   height: 100px;
  12   contain: paint;
  13   background: blue;
  14   overflow-clip-margin: 50px;
  15   view-transition-name: target;
  16 }
  17 .child {
  18   width: 200px;
  19   height: 200px;
  20   position: relative;
  21   top: 50px;
  22   left: 50px;
  23   background: green;
  24 }
  25
  26 html::view-transition-group(target) { animation-duration: 300s; }
  27 html::view-transition-new(target) { animation: unset; opacity: 0; }
  28 html::view-transition-old(target) {
  29   animation: unset;
  30   opacity: 1;
  31 }
  32
  33 html::view-transition-group(root) { animation: unset; opacity: 0; }
  34 html::view-transition { background: lightpink; }
  35 </style>
  36
  37 <div class=target>
  38   <div class=child>
  39   </div>
  40 </div>
  41
  42 <script>
  43 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
  44
  45 async function runTest() {
  46   document.startViewTransition(() =>
  47     requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)));
  48 }
  49 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
  50 </script>
  51