diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js | 235 |
1 files changed, 235 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js new file mode 100644 index 0000000000..ef326f5eb2 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_timing_negative-playback-rate_summary-graph.js @@ -0,0 +1,235 @@ +/* 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 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}'` + ); +} |