tor-browser

browser_animation_timing_negative-playback-rate_summary-graph.js (5554B)

---

/* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test for following summary graph with the animation which is negative playback rate.
// * Tooltips
// * Graph path
// * Delay sign
// * End delay sign

const TEST_DATA = [
 {
   targetSelector: ".normal",
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 0, y: 100 },
         { x: 50000, y: 50 },
         { x: 100000, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -1",
   expectedViewboxWidth: 200000,
 },
 {
   targetSelector: ".normal-playbackrate-2",
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 0, y: 100 },
         { x: 50000, y: 50 },
         { x: 100000, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -2",
   expectedViewboxWidth: 400000,
 },
 {
   targetSelector: ".positive-delay",
   expectedSignList: [
     {
       selector: ".animation-end-delay-sign",
       sign: {
         marginInlineStart: "75%",
         width: "25%",
       },
     },
   ],
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 0, y: 100 },
         { x: 50000, y: 50 },
         { x: 100000, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -1",
 },
 {
   targetSelector: ".negative-delay",
   expectedSignList: [
     {
       selector: ".animation-end-delay-sign",
       sign: {
         marginInlineStart: "50%",
         width: "25%",
       },
     },
   ],
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 0, y: 100 },
         { x: 50000, y: 50 },
         { x: 50000, y: 0 },
       ],
     },
     {
       selector: ".animation-negative-delay-path path",
       path: [
         { x: 50000, y: 50 },
         { x: 100000, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -1",
 },
 {
   targetSelector: ".positive-end-delay",
   expectedSignList: [
     {
       selector: ".animation-delay-sign",
       sign: {
         isFilled: true,
         marginInlineStart: "25%",
         width: "25%",
       },
     },
   ],
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 50000, y: 100 },
         { x: 100000, y: 50 },
         { x: 150000, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -1",
 },
 {
   targetSelector: ".negative-end-delay",
   expectedSignList: [
     {
       selector: ".animation-delay-sign",
       sign: {
         isFilled: true,
         marginInlineStart: "0%",
         width: "25%",
       },
     },
   ],
   expectedPathList: [
     {
       selector: ".animation-iteration-path",
       path: [
         { x: 0, y: 50 },
         { x: 50000, y: 0 },
       ],
     },
     {
       selector: ".animation-negative-end-delay-path path",
       path: [
         { x: -50000, y: 100 },
         { x: 0, y: 0 },
       ],
     },
   ],
   expectedTooltip: "Playback rate: -1",
 },
];

add_task(async function () {
 await addTab(URL_ROOT + "doc_negative_playback_rate.html");
 const { panel } = await openAnimationInspector();

 for (const testData of TEST_DATA) {
   const {
     targetSelector,
     expectedPathList,
     expectedSignList,
     expectedTooltip,
     expectedViewboxWidth,
   } = testData;

   const animationItemEl = await findAnimationItemByTargetSelector(
     panel,
     targetSelector
   );
   const summaryGraphEl = animationItemEl.querySelector(
     ".animation-summary-graph"
   );

   info(`Check tooltip for the animation of ${targetSelector}`);
   assertTooltip(summaryGraphEl, expectedTooltip);

   if (expectedPathList) {
     for (const { selector, path } of expectedPathList) {
       info(`Check path for ${selector}`);
       assertPath(summaryGraphEl, selector, path);
     }
   }

   if (expectedSignList) {
     for (const { selector, sign } of expectedSignList) {
       info(`Check sign for ${selector}`);
       assertSign(summaryGraphEl, selector, sign);
     }
   }

   if (expectedViewboxWidth) {
     info("Check width of viewbox of SVG");
     const svgEl = summaryGraphEl.querySelector(
       ".animation-summary-graph-path"
     );
     is(
       svgEl.viewBox.baseVal.width,
       expectedViewboxWidth,
       `width of viewbox should be ${expectedViewboxWidth}`
     );
   }
 }
});

function assertPath(summaryGraphEl, pathSelector, expectedPath) {
 const pathEl = summaryGraphEl.querySelector(pathSelector);
 assertPathSegments(pathEl, true, expectedPath);
}

function assertSign(summaryGraphEl, selector, expectedSign) {
 const signEl = summaryGraphEl.querySelector(selector);

 is(
   signEl.style.marginInlineStart,
   expectedSign.marginInlineStart,
   `marginInlineStart position should be ${expectedSign.marginInlineStart}`
 );
 is(
   signEl.style.width,
   expectedSign.width,
   `Width should be ${expectedSign.width}`
 );
 is(
   signEl.classList.contains("fill"),
   expectedSign.isFilled || false,
   "signEl should be correct"
 );
}

function assertTooltip(summaryGraphEl, expectedTooltip) {
 const tooltip = summaryGraphEl.getAttribute("title");
 ok(
   tooltip.includes(expectedTooltip),
   `Tooltip should include '${expectedTooltip}'`
 );
}