Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test for following mutations:
// * add animation
// * remove animation
// * modify animation
add_task(async function () {
await addTab(URL_ROOT + "doc_simple_animation.html");
await removeAnimatedElementsExcept([
".compositor-all",
".compositor-notall",
".no-compositor",
".still",
]);
const { animationInspector, inspector, panel } =
await openAnimationInspector();
info("Checking the mutation for add an animation");
const originalAnimationCount = animationInspector.state.animations.length;
await setClassAttribute(animationInspector, ".still", "ball no-compositor");
await waitUntil(
() =>
animationInspector.state.animations.length === originalAnimationCount + 1
);
ok(true, "Count of animation should be plus one to original count");
info(
"Checking added animation existence even the animation name is duplicated"
);
is(
getAnimationNameCount(panel, "no-compositor"),
2,
"Count of animation should be plus one to original count"
);
info("Checking the mutation for remove an animation");
await setClassAttribute(
animationInspector,
".compositor-notall",
"ball still"
);
await waitUntil(
() => animationInspector.state.animations.length === originalAnimationCount
);
ok(
true,
"Count of animation should be same to original count since we remove an animation"
);
info("Checking the mutation for modify an animation");
await selectNode(".compositor-all", inspector);
await setStyle(
animationInspector,
".compositor-all",
"animationDuration",
"100s"
);
await setStyle(
animationInspector,
".compositor-all",
"animationIterationCount",
1
);
const summaryGraphPathEl = getSummaryGraphPathElement(
panel,
"compositor-all"
);
await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 100000);
ok(
true,
"Width of summary graph path should be 100000 " +
"after modifing the duration and iteration count"
);
await setStyle(
animationInspector,
".compositor-all",
"animationDelay",
"100s"
);
await waitUntil(() => summaryGraphPathEl.viewBox.baseVal.width === 200000);
ok(
true,
"Width of summary graph path should be 200000 after modifing the delay"
);
ok(
summaryGraphPathEl.parentElement.querySelector(".animation-delay-sign"),
"Delay sign element shoud exist"
);
});
function getAnimationNameCount(panel, animationName) {
return [...panel.querySelectorAll(".animation-name")].reduce(
(count, element) =>
element.textContent === animationName ? count + 1 : count,
0
);
}
function getSummaryGraphPathElement(panel, animationName) {
for (const animationNameEl of panel.querySelectorAll(".animation-name")) {
if (animationNameEl.textContent === animationName) {
return animationNameEl
.closest(".animation-summary-graph")
.querySelector(".animation-summary-graph-path");
}
}
return null;
}