browser_animation_summary-graph_computed-timing-path_different-timescale.js

Enable keyboard shortcuts

/* Any copyright is dedicated to the Public Domain.

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

"use strict";

// Test the Computed Timing Path component for different time scales.

add_task(async function () {

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

  await removeAnimatedElementsExcept([".animated", ".end-delay"]);

  const { animationInspector, inspector, panel } =

    await openAnimationInspector();

  info("Checking the path for different time scale");

  let onDetailRendered = animationInspector.once(

    "animation-keyframes-rendered"

);

  await selectNode(".animated", inspector);

  await onDetailRendered;

  const itemA = await findAnimationItemByTargetSelector(panel, ".animated");

  const pathStringA = itemA

    .querySelector(".animation-iteration-path")

    .getAttribute("d");

  info("Select animation which has different time scale from no-compositor");

  onDetailRendered = animationInspector.once("animation-keyframes-rendered");

  await selectNode(".end-delay", inspector);

  await onDetailRendered;

  info("Select no-compositor again");

  onDetailRendered = animationInspector.once("animation-keyframes-rendered");

  await selectNode(".animated", inspector);

  await onDetailRendered;

  const itemB = await findAnimationItemByTargetSelector(panel, ".animated");

  const pathStringB = itemB

    .querySelector(".animation-iteration-path")

    .getAttribute("d");

is(

    pathStringA,

    pathStringB,

    "Path string should be same even change the time scale"

);

});