tor-browser

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

browser_animation_css-transition-with-playstate-idle.js (2394B)

      1 /* Any copyright is dedicated to the Public Domain.
      2 http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test that animation inspector does not fail when rendering an animation that
      7 // transitions from the playState "idle".
      8 
      9 const PAGE_URL = `data:text/html;charset=utf-8,
     10 <!DOCTYPE html>
     11 <html>
     12 <head>
     13  <style type="text/css">
     14    div {
     15      opacity: 0;
     16      transition-duration: 5000ms;
     17      transition-property: opacity;
     18    }
     19 
     20    div.visible {
     21      opacity: 1;
     22    }
     23  </style>
     24 </head>
     25 <body>
     26  <div>test</div>
     27 </body>
     28 </html>`;
     29 
     30 add_task(async function () {
     31  const tab = await addTab(PAGE_URL);
     32  const { animationInspector, panel } = await openAnimationInspector();
     33 
     34  info("Toggle the visible class to start the animation");
     35  await toggleVisibleClass(tab);
     36 
     37  info("Wait until the scrubber is displayed");
     38  await waitUntil(() => panel.querySelector(".current-time-scrubber"));
     39  const scrubberEl = panel.querySelector(".current-time-scrubber");
     40 
     41  info("Wait until animations are paused");
     42  await waitUntilAnimationsPaused(animationInspector);
     43 
     44  // Check the initial position of the scrubber to detect the animation.
     45  const scrubberX = scrubberEl.getBoundingClientRect().x;
     46 
     47  info("Toggle the visible class to start the animation");
     48  await toggleVisibleClass(tab);
     49 
     50  info("Wait until the scrubber starts moving");
     51  await waitUntil(() => scrubberEl.getBoundingClientRect().x != scrubberX);
     52 
     53  info("Wait until animations are paused");
     54  await waitUntilAnimationsPaused(animationInspector);
     55 
     56  // Query the scrubber element again to check that the UI is still rendered.
     57  ok(
     58    !!panel.querySelector(".current-time-scrubber"),
     59    "The scrubber element is still rendered in the animation inspector panel"
     60  );
     61 });
     62 
     63 /**
     64 * Local helper to toggle the "visible" class on the element with a transition defined.
     65 */
     66 async function toggleVisibleClass(tab) {
     67  await SpecialPowers.spawn(tab.linkedBrowser, [], async function () {
     68    const win = content.wrappedJSObject;
     69    win.document.querySelector("div").classList.toggle("visible");
     70  });
     71 }
     72 
     73 async function waitUntilAnimationsPaused(animationInspector) {
     74  await waitUntil(() => {
     75    const animations = animationInspector.state.animations;
     76    return animations.every(animation => {
     77      const state = animation.state.playState;
     78      return state === "paused" || state === "finished";
     79    });
     80  });
     81 }