tor-browser

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

transition-to-prerender.html (2425B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <title>View transitions: basic cross-document navigation to a prerender</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <link rel="author" href="mailto:bokan@chromium.org">
      6 <link rel="match" href="transition-to-prerender-ref.html">
      7 <script src="/common/utils.js"></script>
      8 <script src="/common/reftest-wait.js"></script>
      9 <script src="/speculation-rules/resources/utils.js"></script>
     10 <script src="/speculation-rules/prerender/resources/utils.js"></script>
     11 <style>
     12 @view-transition {
     13  navigation: auto;
     14 }
     15 html {
     16  background-color: red;
     17 }
     18 html.outgoing {
     19  background-color: cornflowerblue;
     20 }
     21 html.incoming {
     22  background-color: hotpink;
     23 }
     24 ::view-transition {
     25  background-color: limegreen;
     26 }
     27 ::view-transition-new(root) {
     28  transform: translateY(55vh);
     29  animation: none;
     30  opacity: 1;
     31 }
     32 ::view-transition-old(root) {
     33  transform: translateY(-55vh);
     34  animation: none;
     35  opacity: 1;
     36 }
     37 ::view-transition-group(root) {
     38  animation-duration: 300s;
     39 }
     40 </style>
     41 <script>
     42 const params = new URLSearchParams(location.search);
     43 const uid = params.has('uid') ? params.get('uid') : token();
     44 const ready_channel = new PrerenderChannel('ready-to-activate', uid);
     45 
     46 if (!implementsSpeculationRules()) {
     47  onload = () => {
     48    document.body.innerText = 'This test requires speculation rules.';
     49    takeScreenshot();
     50  }
     51 } else {
     52  if (!params.has('next')) {
     53    onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest));
     54  } else {
     55    onload = prerenderedPage;
     56  }
     57 }
     58 
     59 async function runTest() {
     60  document.documentElement.classList.add('outgoing');
     61  const next_url =
     62      new URL(`transition-to-prerender.html?next&uid=${uid}`, window.location).href;
     63 
     64  const ready_to_activate = new Promise(resolve => {
     65    ready_channel.addEventListener('message', resolve, {once: true});
     66  });
     67 
     68  startPrerendering(next_url);
     69 
     70  await ready_to_activate;
     71 
     72  window.location.replace(new URL(next_url, window.location));
     73 }
     74 
     75 function prerenderedPage() {
     76  document.addEventListener('prerenderingchange', () => {
     77    document.documentElement.classList.add('incoming');
     78    requestAnimationFrame(takeScreenshot);
     79  });
     80 
     81  ready_channel.postMessage('readyToActivateMessage');
     82  ready_channel.close();
     83 }
     84 
     85 function implementsSpeculationRules() {
     86  return ('supports' in HTMLScriptElement) &&
     87      HTMLScriptElement.supports('speculationrules');
     88 }
     89 </script>
     90 </html>