tor-browser

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

element-with-overflow.html (1748B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: element with overflow</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="element-with-overflow-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10  .hidden {
     11    width: 10px;
     12    height: 10px;
     13    view-transition-name: hidden;
     14    background: green;
     15  }
     16 
     17  .target {
     18    width: 100px;
     19    height: 100px;
     20    background: lightblue;
     21    view-transition-name: target;
     22  }
     23  .inner {
     24    width: 100px;
     25    height: 100px;
     26    position: relative;
     27    top: 50px;
     28    left: 50px;
     29    border: 5px solid black;
     30  }
     31 
     32  html::view-transition-group(hidden) { animation-duration: 300s; }
     33  html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     34 
     35  html::view-transition-new(*), html::view-transition-old(*) {
     36    opacity: 1;
     37    animation: unset;
     38  }
     39 
     40  html::view-transition-old(target) {
     41    top: 0px;
     42    left: 0px;
     43  }
     44 
     45  html::view-transition-new(target) {
     46    top: 200px;
     47    left: 0px;
     48  }
     49 </style>
     50 
     51 <div class="target">
     52  <div class="inner"></div>
     53 </div>
     54 <div class="hidden"></div>
     55 
     56 <script>
     57 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     58 
     59 async function runTest() {
     60  document.startViewTransition(() => {
     61    document.getElementsByClassName("target")[0].style.background="lightgreen";
     62    document.getElementsByClassName("inner")[0].style.border="5px solid blue";
     63    requestAnimationFrame(() => requestAnimationFrame(() =>
     64      requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
     65    ));
     66  });
     67 }
     68 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     69 </script>