tor-browser

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

implicit-stacking-context.html (2502B)

      1 <!DOCTYPE html>
      2 <html class="test-wait">
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width, initial-scale=1">
      6  <title>Implicit stacking context</title>
      7 </head>
      8 <script src="/dom/events/scrolling/scroll_support.js"></script>
      9 <style>
     10  main {
     11    display: flex;
     12    flex-direction: row;
     13  }
     14  article {
     15    flex: 1;
     16    max-width: 200px;
     17    margin: 30px;
     18    font-size: 30px;
     19    background: green;
     20    border: 2px solid black;
     21  }
     22  section {
     23    flex: 1;
     24    overflow: auto;
     25    border-radius: 200px 20%;
     26    corner-shape: squircle;
     27    max-height: 200px;
     28    background: grey;
     29    padding: 10px;
     30  }
     31  ul {
     32    contain: view-transition;
     33  }
     34  li {
     35    padding: 10px;
     36    background: yellow;
     37    color: black;
     38    border: 1px solid purple;
     39    list-style: none;
     40  }
     41  body {
     42    display: flex;
     43    flex-direction: column;
     44  }
     45  header {
     46    display: flex;
     47    justify-content: flex-start;
     48  }
     49  main > *, li {
     50    view-transition-name: match-element;
     51  }
     52 
     53  ::view-transition-group(*) {
     54    animation-duration: 150ms;
     55  }
     56 </style>
     57 <!-- crbug.com/426218225 -->
     58 <body>
     59  <main>
     60    <article class="shuffle">
     61      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
     62      Illo alias dolore deleniti quas enim, ullam quidem dolorum, dolor vitae
     63      doloribus quam quis consequuntur eum dicta, animi quisquam maiores
     64      asperiores perspiciatis?
     65    </article>
     66    <section class="shuffle">
     67      <ul>
     68        <li>Item A</li>
     69        <li>Item B</li>
     70        <li>Item C</li>
     71        <li>Item D</li>
     72      </ul>
     73    </section>
     74    </main>
     75 </body>
     76 <script>
     77  const iteration_count = 2;
     78  async function runTest(iteration) {
     79    const vt1 = document.startViewTransition(() => {
     80      const main = document.querySelector("main");
     81      const first = main.querySelector('.shuffle');
     82      const last = main.querySelector('.shuffle:last-child');
     83      main.insertBefore(last, first);
     84    });
     85 
     86    const ul = document.querySelector("ul");
     87 
     88    const vt2 = ul.startViewTransition(() => {
     89      const first = ul.querySelector('li');
     90      const last = ul.querySelector('li:last-child');
     91      ul.insertBefore(last, first);
     92    });
     93 
     94    Promise.all([vt1.finished, vt2.finished]).then(() => {
     95      if (++iteration == iteration_count) {
     96        document.documentElement.classList.remove('test-wait');
     97      } else {
     98        runTest(iteration);
     99      }
    100    });
    101  }
    102 
    103  window.onload = async () => {
    104    await waitForCompositorReady();
    105    runTest(0);
    106  };
    107 </script>
    108 </html>