tor-browser

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

window-resize-aborts-transition.html (3126B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>View transitions: Resizing viewport skips the transition</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      6 <link rel="author" href="mailto:bokan@chromium.org">
      7 
      8 <script src="/common/rendering-utils.js"></script>
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/resources/testdriver.js"></script>
     12 <script src="/resources/testdriver-vendor.js"></script>
     13 
     14 <script>
     15 function waitForAtLeastOneFrame(win) {
     16  return new Promise(resolve => {
     17    win.requestAnimationFrame(() => {
     18      win.requestAnimationFrame(() => {
     19        resolve();
     20      });
     21    });
     22  });
     23 }
     24 
     25 promise_test(async t => {
     26  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     27 
     28  await waitForAtLeastOneFrame(window);
     29 
     30  let popupWin;
     31 
     32  // Open a popup window that we'll use to start a transition
     33  await test_driver.bless('Open a popup in a new window', () => {
     34    popupWin = window.open('about:blank', 'popup', 'width=300,height=300');
     35    t.add_cleanup(() => popupWin.close());
     36  });
     37 
     38  // Wait until the popup window is loaded to make sure the document we update
     39  // below is the right one.
     40  if (!popupWin.document || popupWin.document.readyState != 'complete') {
     41    await new Promise(resolve => {
     42      popupWin.addEventListener('load', resolve, { once: true });
     43    });
     44  }
     45 
     46  let popupDoc = popupWin.document;
     47  popupDoc.documentElement.innerHTML = `
     48    <style>
     49      html {background-color: red;}
     50      html.new {background-color: limegreen;}
     51 
     52      /* Set a no-op animation to show the old snapshot indefinitely. */
     53      html::view-transition-group(*) {animation-duration: 10s;}
     54      html::view-transition-new(*) {animation: unset;opacity: 0;}
     55      html::view-transition-old(*) {animation-duration: 10s;opacity: 1;}
     56    </style>`;
     57 
     58  if (popupDoc.visibilityState == "hidden") {
     59    await new Promise((resolve) => {
     60      popupDoc.addEventListener("visibilitychange", resolve, { once: true });
     61    });
     62  }
     63 
     64  // Start a transition inside the popup.
     65  let transition = popupDoc.startViewTransition(() => {
     66    popupDoc.documentElement.classList.add('new');
     67  });
     68 
     69  let finishResolved = false;
     70  transition.finished.then(() => {
     71    finishResolved = true;
     72  });
     73 
     74  // Wait for the transition to start animating.
     75  await transition.ready;
     76  await waitForAtLeastOneFrame(popupWin);
     77  await waitForAtLeastOneFrame(popupWin);
     78 
     79  // Resize the popup window.
     80  popupWin.resizeTo(popupWin.innerWidth/2, popupWin.innerHeight/2);
     81 
     82  // Wait until we get the event to avoid any intermittent failures.
     83  // Note: this may cause TIMEOUT in some environments, e.g. mobile, because it
     84  // might not resize the window.
     85  await new Promise(resolve => {
     86    popupWin.addEventListener('resize', resolve, {once: true});
     87  });
     88 
     89  await waitForAtLeastOneFrame(popupWin);
     90 
     91  // `finish` should have resolved as resizing the transition after capture
     92  // should cause it to skip.
     93  assert_true(finishResolved, "Transition must be finished by the window resize");
     94 });
     95 </script>
     96 </head>
     97 </html>