tor-browser

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

sibling-frames-transition.html (2331B)

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