tor-browser

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

browser_animation_summary-graph_layout-by-seek.js (4662B)

      1 /* Any copyright is dedicated to the Public Domain.
      2   http://creativecommons.org/publicdomain/zero/1.0/ */
      3 
      4 "use strict";
      5 
      6 // Test whether the layout of graphs were broken by seek and resume.
      7 
      8 add_task(async function () {
      9  await addTab(URL_ROOT + "doc_multi_timings.html");
     10  await removeAnimatedElementsExcept([
     11    ".delay-positive",
     12    ".delay-negative",
     13    ".enddelay-positive",
     14    ".enddelay-negative",
     15  ]);
     16  const { animationInspector, panel } = await openAnimationInspector();
     17 
     18  info("Get initial coordinates result as test data");
     19  const initialCoordinatesResult = [];
     20 
     21  for (let i = 0; i < animationInspector.state.animations.length; i++) {
     22    const itemEl = await findAnimationItemByIndex(panel, i);
     23    const svgEl = itemEl.querySelector("svg");
     24    const svgViewBoxX = svgEl.viewBox.baseVal.x;
     25    const svgViewBoxWidth = svgEl.viewBox.baseVal.width;
     26 
     27    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
     28    const pathX = pathEl.transform.baseVal[0].matrix.e;
     29 
     30    const delayEl = itemEl.querySelector(".animation-delay-sign");
     31    let delayX = null;
     32    let delayWidth = null;
     33 
     34    if (delayEl) {
     35      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
     36      delayX = computedStyle.left;
     37      delayWidth = computedStyle.width;
     38    }
     39 
     40    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
     41    let endDelayX = null;
     42    let endDelayWidth = null;
     43 
     44    if (endDelayEl) {
     45      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
     46      endDelayX = computedStyle.left;
     47      endDelayWidth = computedStyle.width;
     48    }
     49 
     50    const coordinates = {
     51      svgViewBoxX,
     52      svgViewBoxWidth,
     53      pathX,
     54      delayX,
     55      delayWidth,
     56      endDelayX,
     57      endDelayWidth,
     58    };
     59    initialCoordinatesResult.push(coordinates);
     60  }
     61 
     62  info("Set currentTime to rear of the end of animation of .delay-negative.");
     63  clickOnCurrentTimeScrubberController(animationInspector, panel, 0.75);
     64  await waitUntilAnimationsPlayState(animationInspector, "paused");
     65  info("Resume animations");
     66  clickOnPauseResumeButton(animationInspector, panel);
     67  // As some animations may be finished, we check if some animations will be running.
     68  await waitUntil(() =>
     69    animationInspector.state.animations.some(
     70      a => a.state.playState === "running"
     71    )
     72  );
     73 
     74  info("Check the layout");
     75  const itemEls = panel.querySelectorAll(".animation-item");
     76  is(
     77    itemEls.length,
     78    initialCoordinatesResult.length,
     79    "Count of animation item should be same to initial items"
     80  );
     81 
     82  info("Check the coordinates");
     83  checkExpectedCoordinates(itemEls, initialCoordinatesResult);
     84 });
     85 
     86 function checkExpectedCoordinates(itemEls, initialCoordinatesResult) {
     87  for (let i = 0; i < itemEls.length; i++) {
     88    const expectedCoordinates = initialCoordinatesResult[i];
     89    const itemEl = itemEls[i];
     90    const svgEl = itemEl.querySelector("svg");
     91    is(
     92      svgEl.viewBox.baseVal.x,
     93      expectedCoordinates.svgViewBoxX,
     94      "X of viewBox of svg should be same"
     95    );
     96    is(
     97      svgEl.viewBox.baseVal.width,
     98      expectedCoordinates.svgViewBoxWidth,
     99      "Width of viewBox of svg should be same"
    100    );
    101 
    102    const pathEl = svgEl.querySelector(".animation-computed-timing-path");
    103    is(
    104      pathEl.transform.baseVal[0].matrix.e,
    105      expectedCoordinates.pathX,
    106      "X of tansform of path element should be same"
    107    );
    108 
    109    const delayEl = itemEl.querySelector(".animation-delay-sign");
    110 
    111    if (delayEl) {
    112      const computedStyle = delayEl.ownerGlobal.getComputedStyle(delayEl);
    113      is(
    114        computedStyle.left,
    115        expectedCoordinates.delayX,
    116        "X of delay sign should be same"
    117      );
    118      is(
    119        computedStyle.width,
    120        expectedCoordinates.delayWidth,
    121        "Width of delay sign should be same"
    122      );
    123    } else {
    124      ok(!expectedCoordinates.delayX, "X of delay sign should exist");
    125      ok(!expectedCoordinates.delayWidth, "Width of delay sign should exist");
    126    }
    127 
    128    const endDelayEl = itemEl.querySelector(".animation-end-delay-sign");
    129 
    130    if (endDelayEl) {
    131      const computedStyle = endDelayEl.ownerGlobal.getComputedStyle(endDelayEl);
    132      is(
    133        computedStyle.left,
    134        expectedCoordinates.endDelayX,
    135        "X of endDelay sign should be same"
    136      );
    137      is(
    138        computedStyle.width,
    139        expectedCoordinates.endDelayWidth,
    140        "Width of endDelay sign should be same"
    141      );
    142    } else {
    143      ok(!expectedCoordinates.endDelayX, "X of endDelay sign should exist");
    144      ok(
    145        !expectedCoordinates.endDelayWidth,
    146        "Width of endDelay sign should exist"
    147      );
    148    }
    149  }
    150 }