tor-browser

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

auto-name-from-id.html (1814B)

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