diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js new file mode 100644 index 0000000000..8ed638c443 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js @@ -0,0 +1,128 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test for following NegativeDelayPath component works. +// * element existance +// * path + +const TEST_DATA = [ + { + targetClass: "delay-positive", + }, + { + targetClass: "delay-negative", + expectedIterationPathList: [ + [ + { x: 0, y: 0 }, + { x: 0, y: 50 }, + { x: 250000, y: 75 }, + { x: 500000, y: 100 }, + { x: 500000, y: 0 }, + ], + ], + expectedNegativePath: [ + { x: -500000, y: 0 }, + { x: -250000, y: 25 }, + { x: 0, y: 50 }, + { x: 0, y: 0 }, + ], + }, + { + targetClass: "delay-negative-25", + expectedIterationPathList: [ + [ + { x: 0, y: 0 }, + { x: 0, y: 25 }, + { x: 750000, y: 100 }, + { x: 750000, y: 0 }, + ], + ], + expectedNegativePath: [ + { x: -250000, y: 0 }, + { x: 0, y: 25 }, + { x: 0, y: 0 }, + ], + }, + { + targetClass: "delay-negative-75", + expectedIterationPathList: [ + [ + { x: 0, y: 0 }, + { x: 0, y: 75 }, + { x: 250000, y: 100 }, + { x: 250000, y: 0 }, + ], + ], + expectedNegativePath: [ + { x: -750000, y: 0 }, + { x: 0, y: 75 }, + { x: 0, y: 0 }, + ], + }, +]; + +add_task(async function () { + await addTab(URL_ROOT + "doc_multi_timings.html"); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`)); + const { panel } = await openAnimationInspector(); + + for (const { + targetClass, + expectedIterationPathList, + expectedNegativePath, + } of TEST_DATA) { + const animationItemEl = await findAnimationItemByTargetSelector( + panel, + `.${targetClass}` + ); + + info(`Checking negative delay path existence for ${targetClass}`); + const negativeDelayPathEl = animationItemEl.querySelector( + ".animation-negative-delay-path" + ); + + if (expectedNegativePath) { + ok( + negativeDelayPathEl, + "The negative delay path element should be in animation item element" + ); + const pathEl = negativeDelayPathEl.querySelector("path"); + assertPathSegments(pathEl, true, expectedNegativePath); + } else { + ok( + !negativeDelayPathEl, + "The negative delay path element should not be in animation item element" + ); + } + + if (!expectedIterationPathList) { + // We don't need to test for iteration path. + continue; + } + + info(`Checking computed timing path existance for ${targetClass}`); + const computedTimingPathEl = animationItemEl.querySelector( + ".animation-computed-timing-path" + ); + ok( + computedTimingPathEl, + "The computed timing path element should be in each animation item element" + ); + + info(`Checking iteration path list for ${targetClass}`); + const iterationPathEls = computedTimingPathEl.querySelectorAll( + ".animation-iteration-path" + ); + is( + iterationPathEls.length, + expectedIterationPathList.length, + `Number of iteration path should be ${expectedIterationPathList.length}` + ); + + for (const [j, iterationPathEl] of iterationPathEls.entries()) { + assertPathSegments(iterationPathEl, true, expectedIterationPathList[j]); + } + } +}); |