Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test for following summary graph with the animation which has infinity duration.
// * Tooltips
// * Graph path
// * Delay sign
const TEST_DATA = [
{
targetClass: "infinity",
expectedIterationPath: [
{ x: 0, y: 0 },
{ x: 200000, y: 0 },
],
expectedTooltip: {
duration: "\u221E",
},
},
{
targetClass: "infinity-delay-iteration-start",
expectedDelayPath: [
{ x: 0, y: 0 },
{ x: 100000, y: 0 },
],
expectedDelaySign: {
marginInlineStart: "0%",
width: "50%",
},
expectedIterationPath: [
{ x: 100000, y: 50 },
{ x: 200000, y: 50 },
],
expectedTooltip: {
delay: "100s",
duration: "\u221E",
iterationStart: "0.5 (\u221E)",
},
},
{
targetClass: "limited",
expectedIterationPath: [
{ x: 0, y: 0 },
{ x: 100000, y: 100 },
],
expectedTooltip: {
duration: "100s",
},
},
];
add_task(async function () {
await addTab(URL_ROOT + "doc_infinity_duration.html");
const { panel } = await openAnimationInspector();
for (const testData of TEST_DATA) {
const {
targetClass,
expectedDelayPath,
expectedDelaySign,
expectedIterationPath,
expectedTooltip,
} = testData;
const animationItemEl = await findAnimationItemByTargetSelector(
panel,
`.${targetClass}`
);
const summaryGraphEl = animationItemEl.querySelector(
".animation-summary-graph"
);
info(`Check tooltip for the animation of .${targetClass}`);
assertTooltip(summaryGraphEl, expectedTooltip);
if (expectedDelayPath) {
info(`Check delay path for the animation of .${targetClass}`);
assertDelayPath(summaryGraphEl, expectedDelayPath);
}
if (expectedDelaySign) {
info(`Check delay sign for the animation of .${targetClass}`);
assertDelaySign(summaryGraphEl, expectedDelaySign);
}
info(`Check iteration path for the animation of .${targetClass}`);
assertIterationPath(summaryGraphEl, expectedIterationPath);
}
});
function assertDelayPath(summaryGraphEl, expectedPath) {
assertPath(
summaryGraphEl,
".animation-computed-timing-path .animation-delay-path",
expectedPath
);
}
function assertDelaySign(summaryGraphEl, expectedSign) {
const signEl = summaryGraphEl.querySelector(".animation-delay-sign");
is(
signEl.style.marginInlineStart,
expectedSign.marginInlineStart,
`marginInlineStart position should be ${expectedSign.marginInlineStart}`
);
is(
signEl.style.width,
expectedSign.width,
`Width should be ${expectedSign.width}`
);
}
function assertIterationPath(summaryGraphEl, expectedPath) {
assertPath(
summaryGraphEl,
".animation-computed-timing-path .animation-iteration-path",
expectedPath
);
}
function assertPath(summaryGraphEl, pathSelector, expectedPath) {
const pathEl = summaryGraphEl.querySelector(pathSelector);
assertPathSegments(pathEl, true, expectedPath);
}
function assertTooltip(summaryGraphEl, expectedTooltip) {
const tooltip = summaryGraphEl.getAttribute("title");
const { delay, duration, iterationStart } = expectedTooltip;
if (delay) {
const expected = `Delay: ${delay}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
if (duration) {
const expected = `Duration: ${duration}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
if (iterationStart) {
const expected = `Iteration start: ${iterationStart}`;
ok(tooltip.includes(expected), `Tooltip should include '${expected}'`);
}
}