tor-browser

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

old-root-vertical-writing-mode.html (2003B)

      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 }
     36 #one { view-transition-name: s1; }
     37 #two {
     38  background: lightblue;
     39  will-change: transform;
     40 }
     41 
     42 html::view-transition-group(hidden) { animation-duration: 300s; }
     43 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     44 
     45 html::view-transition-group(s1) { animation-delay: 100s; animation-fill-mode: both; }
     46 html::view-transition-new(s1) { animation: unset; opacity: 0; }
     47 html::view-transition-old(s1) { animation: unset; opacity: 1; }
     48 
     49 html::view-transition-new(root) { animation: unset; opacity: 0; }
     50 html::view-transition-old(root) { animation: unset; opacity: 1; }
     51 
     52 </style>
     53 
     54 <div id=hidden>Should not be visible</div>
     55 <div id=target style="display: none">Should not be visible</div>
     56 <div id=one class=shared>T</div>
     57 <div id=two class=shared></div>
     58 
     59 <script>
     60 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     61 
     62 async function runTest() {
     63  document.startViewTransition(() => {
     64    one.remove();
     65    target.style = "";
     66    target.style.viewTransitionName = "s1";
     67    hidden.style.left = "200px";
     68    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot));
     69  });
     70 }
     71 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     72 </script>