tor-browser

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

iframe-and-main-frame-transition-with-name-on-iframe.html (2213B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <title>View transitions: iframe and main frame transition at the same time with name on iframe</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="iframe-and-main-frame-transition-with-name-on-iframe-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <style>
      9 iframe {
     10  position: fixed;
     11  top: 0;
     12  left: 0;
     13  width: 50vw;
     14  height: 50vh;
     15  view-transition-name: inner;
     16 }
     17 
     18 .old {
     19  border: 1px solid black;
     20 }
     21 
     22 .new {
     23  border: 1px solid orange;
     24 }
     25 
     26 /* The main frame is showing the old screenshot for the root */
     27 ::view-transition-group(root) {
     28  animation-duration: 300s;
     29 }
     30 ::view-transition-new(root) {
     31  animation: unset;
     32  opacity: 0;
     33 }
     34 ::view-transition-old(root) {
     35  animation: unset;
     36  opacity: 1;
     37 }
     38 
     39 /* The iframe is showing the live screenshot */
     40 ::view-transition-new(inner) {
     41  animation: unset;
     42  opacity: 1;
     43 }
     44 ::view-transition-old(inner) {
     45  animation: unset;
     46  opacity: 0;
     47 }
     48 
     49 </style>
     50 
     51 <iframe id="inner" srcdoc="
     52 <style>
     53  /* The iframe document itself is showing an old screenshot */
     54  ::view-transition-group(root) {
     55    animation-duration: 300s;
     56  }
     57  ::view-transition-new(root) {
     58    animation: unset;
     59    opacity: 0;
     60  }
     61  ::view-transition-old(root) {
     62    animation: unset;
     63    opacity: 1;
     64  }
     65 </style>
     66 <body></body>"></iframe>
     67 <script>
     68  onload = runTest;
     69 
     70  async function startTransition(document, oldColor, newColor, nestedFrame) {
     71    document.documentElement.style.background = oldColor;
     72    if (nestedFrame != null)
     73      nestedFrame.classList.add("old");
     74 
     75    await document.startViewTransition(() => {
     76      document.documentElement.style.background = newColor;
     77      if (nestedFrame != null) {
     78        nestedFrame.classList.remove("old");
     79        nestedFrame.classList.add("new");
     80      }
     81    }).ready;
     82  }
     83 
     84  async function runTest() {
     85    await startTransition(document, "green", "lightgreen", document.getElementById("inner"));
     86 
     87    const iframeDocument = document.querySelector("iframe").contentDocument;
     88    await startTransition(iframeDocument, "blue", "lightblue", null);
     89 
     90    takeScreenshot();
     91  }
     92 </script>