testing/web-platform/tests/css/css-view-transitions/old-content-object-fit-none.html

   1 <!DOCTYPE html>
   2 <html class=reftest-wait>
   3 <title>Shared transitions: display content in a pseudo with object-fit: none</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="content-object-fit-none-ref.html">
   7 <script src="/common/reftest-wait.js"></script>
   8 <style>
   9 #target {
  10   width: 100px;
  11   height: 100px;
  12   contain: paint;
  13   position: absolute;
  14   top: 20px;
  15   left: 20px;
  16   view-transition-name: target;
  17   background: lightblue;
  18 }
  19 #hidden {
  20   background: pink;
  21   width: 10px;
  22   height: 10px;
  23   view-transition-name: hidden;
  24   contain: layout;
  25 }
  26
  27 html::view-transition-group(target) {
  28   animation: unset;
  29   transform: unset;
  30   position: absolute;
  31   top: 10px;
  32   left: 10px;
  33   width: 50px;
  34   height: 50px;
  35 }
  36
  37 html::view-transition-new(target) {
  38   animation: unset;
  39   opacity: 0;
  40 }
  41 html::view-transition-old(target) {
  42   animation: unset;
  43   opacity: 1;
  44   object-fit: none;
  45   object-position: 0% 0%;
  46 }
  47
  48 html::view-transition-group(hidden) {
  49   animation-duration: 500s;
  50   visibility: hidden;
  51 }
  52
  53 html::view-transition-group(root) { animation: unset; opacity: 0; }
  54 html::view-transition { background: lightpink; }
  55 </style>
  56
  57 <div id=target>This is text</div>
  58 <div id=hidden></div>
  59
  60 <script>
  61 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
  62
  63 async function runTest() {
  64   document.startViewTransition(() => {
  65     requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
  66   });
  67 }
  68 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
  69 </script>
  70