tor-browser

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

root-element-transition-iframe-with-startVT-on-main.html (1610B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>View transitions: basic cross-document navigation in an iframe while the main frame has a same-document transition</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 <link rel="match" href="root-element-transition-iframe-with-startVT-on-main-ref.html">
      7 <script src="/common/reftest-wait.js"></script>
      8 <script src="resources/common.js"></script>
      9 
     10 <style>
     11  #inner {
     12    view-transition-name: inner
     13  }
     14 
     15  ::view-transition {
     16    background: lightpink;
     17  }
     18  ::view-transition-group(root) {
     19    visibility: hidden;
     20    animation-play-state: paused;
     21  }
     22 
     23  ::view-transition-old(inner), ::view-transition-new(inner) {
     24    animation: unset;
     25  }
     26  ::view-transition-old(inner) {
     27    opacity: 0;
     28  }
     29  ::view-transition-new(inner) {
     30    opacity: 1;
     31  }
     32  ::view-transition-group(inner) {
     33    animation-duration: 0s;
     34  }
     35 </style>
     36 
     37 <iframe id="inner" src="resources/root-element-transition-iframe.html?blue"></iframe>
     38 <script>
     39 async function runTest() {
     40  let frame = document.getElementById("inner");
     41 
     42  await document.startViewTransition(() => {
     43    document.documentElement.style.background = "orange";
     44    frame.style.border = "1px solid black";
     45  }).ready;
     46 
     47  frame.contentWindow.postMessage("checkrendering");
     48  await waitForMessage("rendered");
     49 
     50  frame.src = "resources/root-element-transition-iframe.html?grey";
     51  await waitForMessage("transition");
     52 
     53  takeScreenshot();
     54 }
     55 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     56 </script>
     57 </html>