Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Errors
- This test failed 2 times in the preceding 30 days. quicksearch this test
- Manifest: devtools/client/inspector/animation/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
"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 = await findAnimationItemByTargetSelector(
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}'`
);
}