tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

nested-group-in-pseudo-basic.tentative.html (1511B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>Basic hierarchy of view-transition-group</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="match" href="nested-ref.html">
      6 <link rel=stylesheet href="resources/pause-view-transitions.css"></link>
      7 <meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10    body {
     11        margin: 0;
     12    }
     13    main {
     14        view-transition-name: main;
     15    }
     16 
     17    section {
     18        view-transition-name: section;
     19        view-transition-group: main;
     20    }
     21 
     22    ::view-transition,
     23    ::view-transition-group(*),
     24    section,
     25    main {
     26        background: red;
     27        inset: 0;
     28        position: absolute;
     29    }
     30 
     31    ::view-transition-group(main) {
     32        background: green;
     33        animation-play-state: paused;
     34    }
     35    ::view-transition-group(section) {
     36        background: inherit;
     37        transform: none !important;
     38    }
     39    ::view-transition-image-pair(*),
     40    ::view-transition-old(*),
     41    ::view-transition-new(*)
     42     {
     43        display: none;
     44    }
     45 </style>
     46 <body>
     47    <main>
     48        <section>
     49            Hello
     50        </section>
     51    </main>
     52 <script>
     53 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     54 
     55 async function runTest() {
     56  let transition = document.startViewTransition();
     57  transition.ready.then(() => takeScreenshot());
     58 }
     59 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     60 </script>
     61 </body>