Commit b8cfdf05 authored by Daisuke Akatsuka's avatar Daisuke Akatsuka
Browse files

Bug 1706896: Split test for computed timing path on summary graph into 2. r=jdescottes 

Differential Revision: https://phabricator.services.mozilla.com/D124004
parent aec84fd3

devtools/client/inspector/animation/test/browser.ini

+3 −1
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ support-files = 
  doc_special_colors.html

  head.js

  keyframes-graph_keyframe-marker_head.js

  summary-graph_computed-timing-path_head.js

  summary-graph_delay-sign_head.js

  summary-graph_end-delay-sign_head.js

  !/devtools/client/inspector/test/head.js
@@ -95,7 +96,8 @@ skip-if = debug #bug 1480027 
[browser_animation_short-duration.js]

[browser_animation_summary-graph_animation-name.js]

[browser_animation_summary-graph_compositor.js]

[browser_animation_summary-graph_computed-timing-path.js]

[browser_animation_summary-graph_computed-timing-path_1.js]

[browser_animation_summary-graph_computed-timing-path_2.js]

[browser_animation_summary-graph_computed-timing-path_different-timescale.js]

[browser_animation_summary-graph_delay-sign.js]

[browser_animation_summary-graph_delay-sign-rtl.js]

devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js→devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_1.js

+208 −0
Original line number Diff line number Diff line
@@ -10,6 +10,12 @@ 
// * fill: path

// * endDelay: path



/* import-globals-from summary-graph_computed-timing-path_head.js */

Services.scriptloader.loadSubScript(

  CHROME_URL_ROOT + "summary-graph_computed-timing-path_head.js",

  this

);



const TEST_DATA = [

  {

    targetClass: "cssanimation-normal",
@@ -195,266 +201,8 @@ const TEST_DATA = [ 
    ],

    isInfinity: true,

  },

  {

    targetClass: "fill-backwards",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "fill-backwards-with-delay-iterationstart",

    expectedDelayPath: [

      { x: 0, y: 0 },

      { x: 0, y: 50 },

      { x: 500000, y: 50 },

      { x: 500000, y: 0 },

    ],

    expectedIterationPathList: [

      [

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

      [

        { x: 1000000, y: 0 },

        { x: 1250000, y: 25 },

        { x: 1500000, y: 50 },

        { x: 1500000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "fill-both",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1000000, y: 0 },

      { x: 1000000, y: 100 },

      { x: 1500000, y: 100 },

      { x: 1500000, y: 0 },

    ],

  },

  {

    targetClass: "fill-both-width-delay-iterationstart",

    expectedDelayPath: [

      { x: 0, y: 0 },

      { x: 0, y: 50 },

      { x: 500000, y: 50 },

      { x: 500000, y: 0 },

    ],

    expectedIterationPathList: [

      [

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

      [

        { x: 1000000, y: 0 },

        { x: 1250000, y: 25 },

        { x: 1500000, y: 50 },

        { x: 1500000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1500000, y: 0 },

      { x: 1500000, y: 50 },

    ],

  },

  {

    targetClass: "fill-forwards",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1000000, y: 0 },

      { x: 1000000, y: 100 },

      { x: 1500000, y: 100 },

      { x: 1500000, y: 0 },

    ],

  },

  {

    targetClass: "iterationstart",

    expectedIterationPathList: [

      [

        { x: 0, y: 50 },

        { x: 250000, y: 75 },

        { x: 500000, y: 100 },

        { x: 500000, y: 0 },

      ],

      [

        { x: 500000, y: 0 },

        { x: 750000, y: 25 },

        { x: 1000000, y: 50 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "no-compositor",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "keyframes-easing-step",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 499999, y: 0 },

        { x: 500000, y: 50 },

        { x: 999999, y: 50 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "narrow-keyframes",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 100000, y: 10 },

        { x: 110000, y: 10 },

        { x: 115000, y: 10 },

        { x: 129999, y: 10 },

        { x: 130000, y: 13 },

        { x: 135000, y: 13.5 },

      ],

    ],

  },

  {

    targetClass: "duplicate-offsets",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 999999, y: 50 },

      ],

    ],

  },

];



add_task(async function() {

  await addTab(URL_ROOT + "doc_multi_timings.html");

  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));

  const { panel } = await openAnimationInspector();



  for (const testData of TEST_DATA) {

    const {

      expectedDelayPath,

      expectedEndDelayPath,

      expectedForwardsPath,

      expectedIterationPathList,

      isInfinity,

      targetClass,

    } = testData;



    const animationItemEl = await findAnimationItemByTargetSelector(

      panel,

      `.${targetClass}`

    );



    info(`Checking computed timing path existance for ${targetClass}`);

    const computedTimingPathEl = animationItemEl.querySelector(

      ".animation-computed-timing-path"

    );

    ok(

      computedTimingPathEl,

      "The computed timing path element should be in each animation item element"

    );



    info(`Checking delay path for ${targetClass}`);

    const delayPathEl = computedTimingPathEl.querySelector(

      ".animation-delay-path"

    );



    if (expectedDelayPath) {

      ok(delayPathEl, "delay path should be existance");

      assertPathSegments(delayPathEl, true, expectedDelayPath);

    } else {

      ok(!delayPathEl, "delay path should not be existance");

    }



    info(`Checking iteration path list for ${targetClass}`);

    const iterationPathEls = computedTimingPathEl.querySelectorAll(

      ".animation-iteration-path"

    );

    is(

      iterationPathEls.length,

      expectedIterationPathList.length,

      `Number of iteration path should be ${expectedIterationPathList.length}`

    );



    for (const [j, iterationPathEl] of iterationPathEls.entries()) {

      assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);



      info(`Checking infinity ${targetClass}`);

      if (isInfinity && j >= 1) {

        ok(

          iterationPathEl.classList.contains("infinity"),

          "iteration path should have 'infinity' class"

        );

      } else {

        ok(

          !iterationPathEl.classList.contains("infinity"),

          "iteration path should not have 'infinity' class"

        );

      }

    }



    info(`Checking endDelay path for ${targetClass}`);

    const endDelayPathEl = computedTimingPathEl.querySelector(

      ".animation-enddelay-path"

    );



    if (expectedEndDelayPath) {

      ok(endDelayPathEl, "endDelay path should be existance");

      assertPathSegments(endDelayPathEl, true, expectedEndDelayPath);

    } else {

      ok(!endDelayPathEl, "endDelay path should not be existance");

    }



    info(`Checking forwards fill path for ${targetClass}`);

    const forwardsPathEl = computedTimingPathEl.querySelector(

      ".animation-fill-forwards-path"

    );



    if (expectedForwardsPath) {

      ok(forwardsPathEl, "forwards path should be existance");

      assertPathSegments(forwardsPathEl, true, expectedForwardsPath);

    } else {

      ok(!forwardsPathEl, "forwards path should not be existance");

    }

  }

  await testComputedTimingPath(TEST_DATA);

});

devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_2.js

0 → 100644
+192 −0
Original line number Diff line number Diff line 
/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */



"use strict";



// Test for following ComputedTimingPath component works.

// * element existance

// * iterations: path, count

// * delay: path

// * fill: path

// * endDelay: path



/* import-globals-from summary-graph_computed-timing-path_head.js */

Services.scriptloader.loadSubScript(

  CHROME_URL_ROOT + "summary-graph_computed-timing-path_head.js",

  this

);



const TEST_DATA = [

  {

    targetClass: "fill-backwards",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "fill-backwards-with-delay-iterationstart",

    expectedDelayPath: [

      { x: 0, y: 0 },

      { x: 0, y: 50 },

      { x: 500000, y: 50 },

      { x: 500000, y: 0 },

    ],

    expectedIterationPathList: [

      [

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

      [

        { x: 1000000, y: 0 },

        { x: 1250000, y: 25 },

        { x: 1500000, y: 50 },

        { x: 1500000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "fill-both",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1000000, y: 0 },

      { x: 1000000, y: 100 },

      { x: 1500000, y: 100 },

      { x: 1500000, y: 0 },

    ],

  },

  {

    targetClass: "fill-both-width-delay-iterationstart",

    expectedDelayPath: [

      { x: 0, y: 0 },

      { x: 0, y: 50 },

      { x: 500000, y: 50 },

      { x: 500000, y: 0 },

    ],

    expectedIterationPathList: [

      [

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

      [

        { x: 1000000, y: 0 },

        { x: 1250000, y: 25 },

        { x: 1500000, y: 50 },

        { x: 1500000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1500000, y: 0 },

      { x: 1500000, y: 50 },

    ],

  },

  {

    targetClass: "fill-forwards",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

    expectedForwardsPath: [

      { x: 1000000, y: 0 },

      { x: 1000000, y: 100 },

      { x: 1500000, y: 100 },

      { x: 1500000, y: 0 },

    ],

  },

  {

    targetClass: "iterationstart",

    expectedIterationPathList: [

      [

        { x: 0, y: 50 },

        { x: 250000, y: 75 },

        { x: 500000, y: 100 },

        { x: 500000, y: 0 },

      ],

      [

        { x: 500000, y: 0 },

        { x: 750000, y: 25 },

        { x: 1000000, y: 50 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "no-compositor",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 750000, y: 75 },

        { x: 1000000, y: 100 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "keyframes-easing-step",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 499999, y: 0 },

        { x: 500000, y: 50 },

        { x: 999999, y: 50 },

        { x: 1000000, y: 0 },

      ],

    ],

  },

  {

    targetClass: "narrow-keyframes",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 100000, y: 10 },

        { x: 110000, y: 10 },

        { x: 115000, y: 10 },

        { x: 129999, y: 10 },

        { x: 130000, y: 13 },

        { x: 135000, y: 13.5 },

      ],

    ],

  },

  {

    targetClass: "duplicate-offsets",

    expectedIterationPathList: [

      [

        { x: 0, y: 0 },

        { x: 250000, y: 25 },

        { x: 500000, y: 50 },

        { x: 999999, y: 50 },

      ],

    ],

  },

];



add_task(async function() {

  await testComputedTimingPath(TEST_DATA);

});

devtools/client/inspector/animation/test/summary-graph_computed-timing-path_head.js

0 → 100644
+103 −0
Original line number Diff line number Diff line 
/* Any copyright is dedicated to the Public Domain.

   http://creativecommons.org/publicdomain/zero/1.0/ */



"use strict";



/* import-globals-from head.js */



/**

 * Test for computed timing path on summary graph using given test data.

 * @param {Array} testData

 */

// eslint-disable-next-line no-unused-vars

async function testComputedTimingPath(testData) {

  await addTab(URL_ROOT + "doc_multi_timings.html");

  await removeAnimatedElementsExcept(testData.map(t => `.${t.targetClass}`));

  const { panel } = await openAnimationInspector();



  for (const {

    expectedDelayPath,

    expectedEndDelayPath,

    expectedForwardsPath,

    expectedIterationPathList,

    isInfinity,

    targetClass,

  } of testData) {

    const animationItemEl = await findAnimationItemByTargetSelector(

      panel,

      `.${targetClass}`

    );



    info(`Checking computed timing path existance for ${targetClass}`);

    const computedTimingPathEl = animationItemEl.querySelector(

      ".animation-computed-timing-path"

    );

    ok(

      computedTimingPathEl,

      "The computed timing path element should be in each animation item element"

    );



    info(`Checking delay path for ${targetClass}`);

    const delayPathEl = computedTimingPathEl.querySelector(

      ".animation-delay-path"

    );



    if (expectedDelayPath) {

      ok(delayPathEl, "delay path should be existance");

      assertPathSegments(delayPathEl, true, expectedDelayPath);

    } else {

      ok(!delayPathEl, "delay path should not be existance");

    }



    info(`Checking iteration path list for ${targetClass}`);

    const iterationPathEls = computedTimingPathEl.querySelectorAll(

      ".animation-iteration-path"

    );

    is(

      iterationPathEls.length,

      expectedIterationPathList.length,

      `Number of iteration path should be ${expectedIterationPathList.length}`

    );



    for (const [j, iterationPathEl] of iterationPathEls.entries()) {

      assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]);



      info(`Checking infinity ${targetClass}`);

      if (isInfinity && j >= 1) {

        ok(

          iterationPathEl.classList.contains("infinity"),

          "iteration path should have 'infinity' class"

        );

      } else {

        ok(

          !iterationPathEl.classList.contains("infinity"),

          "iteration path should not have 'infinity' class"

        );

      }

    }



    info(`Checking endDelay path for ${targetClass}`);

    const endDelayPathEl = computedTimingPathEl.querySelector(

      ".animation-enddelay-path"

    );



    if (expectedEndDelayPath) {

      ok(endDelayPathEl, "endDelay path should be existance");

      assertPathSegments(endDelayPathEl, true, expectedEndDelayPath);

    } else {

      ok(!endDelayPathEl, "endDelay path should not be existance");

    }



    info(`Checking forwards fill path for ${targetClass}`);

    const forwardsPathEl = computedTimingPathEl.querySelector(

      ".animation-fill-forwards-path"

    );



    if (expectedForwardsPath) {

      ok(forwardsPathEl, "forwards path should be existance");

      assertPathSegments(forwardsPathEl, true, expectedForwardsPath);

    } else {

      ok(!forwardsPathEl, "forwards path should not be existance");

    }

  }

}