tor-browser

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

nested-exit.tentative.html (1509B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>Nested group should stay nested in an exit transition</title>
      4 <meta name=fuzzy content="maxDifference=0-255; totalPixels=0-515">
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      6 <link rel="match" href="nested-ref-100.html">
      7 <link rel=stylesheet href="resources/pause-view-transitions.css"></link>
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="resources/compute-test.js"></script>
     10 <body>
     11    <style>
     12        ::view-transition-old(*),
     13        ::view-transition-new(*),
     14        ::view-transition-group(*) {
     15            animation-play-state: paused;
     16        }
     17 
     18        ::view-transition-group-children(*) {
     19          background: inherit;
     20        }
     21 
     22        ::view-transition-group(parent) {
     23            background: green;
     24            visibility: hidden;
     25        }
     26        ::view-transition-group(child) {
     27            visibility: visible;
     28            background: inherit;
     29        }
     30 
     31        body {
     32            margin: 0;
     33        }
     34 
     35        div {
     36            top: 50px;
     37            left: 50px;
     38            width: 100px;
     39            height: 100px;
     40            position: absolute;
     41        }
     42 
     43        .parent {
     44            view-transition-name: parent;
     45        }
     46 
     47        .child {
     48            view-transition-name: child;
     49            view-transition-group: parent;
     50        }
     51 
     52        .vt-new .child {
     53            display: none;
     54        }
     55    </style>
     56    <div class="parent">
     57        <div class="child"></div>
     58    </div>
     59 </body>