tor-browser

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

match-element-name.html (1734B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: using match-element name</title>
      4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      6 <link rel="match" href="auto-name-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 div {
     10  width: 100px;
     11  height: 100px;
     12 }
     13 
     14 main {
     15  display: flex;
     16  flex-direction: column;
     17 }
     18 
     19 .item {
     20  view-transition-name: match-element;
     21  view-transition-class: item;
     22 }
     23 
     24 main.switch .item1 {
     25  order: 2;
     26 }
     27 
     28 .item1 {
     29  background: green;
     30 }
     31 
     32 .item2 {
     33  background: yellow;
     34  position: relative;
     35  left: 100px;
     36 }
     37 
     38 html::view-transition {
     39  background: rebeccapurple;
     40 }
     41 
     42 :root { view-transition-name: none; }
     43 html::view-transition-group(.item) {
     44  animation-timing-function: steps(2, start);
     45  animation-play-state: paused;
     46 }
     47 html::view-transition-old(*),
     48 html::view-transition-new(*)
     49 { animation-play-state: paused; }
     50 html::view-transition-old(*) { animation: unset; opacity: 0 }
     51 html::view-transition-new(*) { animation: unset; opacity: 1 }
     52 
     53 /* This should not be used */
     54 html::view-transition-group(unused-id) {
     55  background: red;
     56 }
     57 html::view-transition-old(unused-id),
     58 html::view-transition-new(unused-id) {
     59  opacity: 0;
     60 }
     61 </style>
     62 
     63 <main>
     64  <div class="item item1" id="unused-id"></div>
     65  <div class="item item2"></div>
     66 </main>
     67 
     68 <script>
     69 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     70 
     71 function runTest() {
     72  document.startViewTransition(() => {
     73    document.querySelector("main").classList.toggle("switch");
     74  }).ready.then(takeScreenshot);
     75 }
     76 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     77 </script>
     78 
     79 </body>
     80 </html>