/* 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 =
      findAnimationItemElementsByTargetSelector(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 }'`);
}
