diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js new file mode 100644 index 0000000000..44343c3aa8 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_infinity-duration_summary-graph.js @@ -0,0 +1,147 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"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}'`); + } +} |