tor-browser

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

new-root-vertical-writing-mode.html (1898B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: container of shared element writing-modes</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 <link rel="match" href="new-root-vertical-writing-mode-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 html { writing-mode: vertical-lr; }
     10 #hidden {
     11  width: 100px;
     12  height: 100px;
     13  background: red;
     14  position: absolute;
     15  top: 0;
     16  left: 0;
     17  contain: paint;
     18  view-transition-name: hidden;
     19 }
     20 .shared {
     21  margin: 2px;
     22  width: 90px;
     23  height: 50px;
     24  background: green;
     25  contain: paint;
     26 }
     27 #target {
     28  background: red;
     29  position: absolute;
     30  top: 50px;
     31  left: 50px;
     32  width: 100px;
     33  height: 500px;
     34  contain: paint;
     35  view-transition-name: s1;
     36 }
     37 #two {
     38  background: lightblue;
     39 }
     40 
     41 html::view-transition-group(hidden) { animation-duration: 300s; }
     42 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     43 
     44 html::view-transition-group(s1) { animation-duration: 0s; }
     45 html::view-transition-new(s1) { animation: unset; opacity: 1; }
     46 html::view-transition-old(s1) { animation: unset; opacity: 0; }
     47 
     48 html::view-transition-new(root) { animation: unset; opacity: 1; }
     49 html::view-transition-old(root) { animation: unset; opacity: 0; }
     50 
     51 </style>
     52 
     53 <div id=hidden>Should not be visible</div>
     54 <div id=target>Should not be visible</div>
     55 <div id=one class=shared>T</div>
     56 <div id=two class=shared></div>
     57 
     58 <script>
     59 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     60 
     61 async function runTest() {
     62  document.startViewTransition(() => {
     63    target.remove();
     64    hidden.style.left = "200px";
     65    one.style.viewTransitionName = "s1";
     66    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     67  });
     68 }
     69 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     70 </script>