tor-browser

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

exit-transition-with-anonymous-layout-object.html (1691B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: exit transition with layout objects that don't have a node</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="exit-transition-with-anonymous-layout-object-ref.html">
      7 
      8 <script src="/common/reftest-wait.js"></script>
      9 <style>
     10 :root {
     11  scrollbar-width: none;
     12 }
     13 
     14 body {
     15  width: 100vw;
     16  height: 100vh;
     17 }
     18 
     19 #target {
     20  width: 100px;
     21  height: 100px;
     22  background: blue;
     23  view-transition-name: target;
     24 }
     25 
     26 #hidden {
     27  width: 10px;
     28  height: 10px;
     29  background: grey;
     30  view-transition-name: hidden;
     31 }
     32 
     33 fieldset {
     34  width: 100px;
     35  height: 100px;
     36  background: lightgreen;
     37  overflow: clip;
     38 }
     39 
     40 html::view-transition { background: pink; }
     41 html::view-transition-group(root) { visibility: hidden; }
     42 html::view-transition-group(hidden) { animation-duration: 300s; }
     43 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }
     44 html::view-transition-old(target) {
     45  animation: unset;
     46  opacity: 1;
     47 }
     48 </style>
     49 <div id="target"></div>
     50 <fieldset id="anonymous">hi</fieldset>
     51 <div id=hidden class=hidden></div>
     52 
     53 <script>
     54 failIfNot(document.startViewTransition, "Missing document.startViewTransition");
     55 
     56 async function runTest() {
     57  let t = document.startViewTransition(() => {
     58    target.style.viewTransitionName = "none";
     59  });
     60  await t.ready;
     61  anonymous.style.position = "relative";
     62  requestAnimationFrame(() => requestAnimationFrame(() =>
     63    requestAnimationFrame(() => requestAnimationFrame(takeScreenshot))
     64  ));
     65 }
     66 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     67 </script>