tor-browser

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

pause-rendering.html (1998B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <head>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="match" href="pause-rendering-ref.html">
      6 <script src="/common/reftest-wait.js"></script>
      7 <script src="/web-animations/testcommon.js"></script>
      8 <style>
      9 
     10 #scope { view-transition-name: none; }
     11 ::view-transition-group(*),
     12 ::view-transition-old(*),
     13 ::view-transition-new(*) { animation-play-state: paused; }
     14 #tr { view-transition-name: foo; }
     15 
     16 * { box-sizing: border-box; }
     17 div { position: relative; z-index: 0; contain: strict;
     18      display: inline-block; background: green;
     19      left: 30px; top: 30px; width: 120px; height: 120px; }
     20 #scope { background: #eee;
     21         left: 40px; top: 40px; width: 490px; height: 190px; }
     22 #tr { background: orange; left: 60px; }
     23 p { position: absolute; left: 100px; top: 5px; font-size: 30px; }
     24 
     25 #bad { background: red; left: 90px; visibility: hidden; }
     26 
     27 </style>
     28 </head>
     29 <body>
     30 <div id=scope>
     31  <div></div><div id=tr></div><div id=bad></div>
     32 </div>
     33 <p id=outside>OVERLAY</p>
     34 <script>
     35 
     36 const scope = document.querySelector("#scope");
     37 failIfNot(scope.startViewTransition, "Missing element.startViewTransition");
     38 
     39 async function raf() {
     40  await new Promise(r => { requestAnimationFrame(r); });
     41 }
     42 
     43 async function runTest() {
     44  await waitForCompositorReady();
     45  await new Promise(finish => {
     46    scope.startViewTransition(async () => {
     47      // Scope's rendering should be frozen during callback.
     48      // Scope is not self-participating, and contains
     49      // (1) a pre-existing non-participant child,
     50      // (2) a participant that changes color, and
     51      // (3) a non-participant that becomes visible.
     52      bad.style.visibility = "visible";
     53      tr.style.background = "red";
     54      outside.innerText = "TRANSITIONING";
     55 
     56      await raf();
     57      takeScreenshot();
     58 
     59      // Finish test, transition never starts.
     60      finish();
     61      await new Promise(r => {});
     62    });
     63  })
     64 }
     65 onload = () => runTest();
     66 
     67 </script>
     68 </body>
     69 </html>