diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js new file mode 100644 index 0000000000..f87a554420 --- /dev/null +++ b/devtools/client/inspector/animation/test/summary-graph_end-delay-sign_head.js @@ -0,0 +1,100 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* import-globals-from head.js */ + +// Test for following EndDelaySign component works. +// * element existance +// * marginInlineStart position +// * width +// * additinal class + +const TEST_DATA = [ + { + targetClass: "enddelay-positive", + expectedResult: { + marginInlineStart: "75%", + width: "25%", + }, + }, + { + targetClass: "enddelay-negative", + expectedResult: { + additionalClass: "negative", + marginInlineStart: "50%", + width: "25%", + }, + }, + { + targetClass: "enddelay-with-fill-forwards", + expectedResult: { + additionalClass: "fill", + marginInlineStart: "75%", + width: "25%", + }, + }, + { + targetClass: "enddelay-with-iterations-infinity", + }, + { + targetClass: "delay-negative", + }, +]; + +// eslint-disable-next-line no-unused-vars +async function testSummaryGraphEndDelaySign() { + await addTab(URL_ROOT + "doc_multi_timings.html"); + await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`)); + const { panel } = await openAnimationInspector(); + + for (const { targetClass, expectedResult } of TEST_DATA) { + const animationItemEl = await findAnimationItemByTargetSelector( + panel, + `.${targetClass}` + ); + + info(`Checking endDelay sign existance for ${targetClass}`); + const endDelaySignEl = animationItemEl.querySelector( + ".animation-end-delay-sign" + ); + + if (expectedResult) { + ok( + endDelaySignEl, + "The endDelay sign element should be in animation item element" + ); + + function assertExpected(key) { + const actual = parseFloat(endDelaySignEl.style[key]); + const expected = parseFloat(expectedResult[key]); + ok( + Math.abs(actual - expected) < 0.01, + `${key} should be ${expected} (got ${actual})` + ); + } + + assertExpected(`marginInlineStart`); + assertExpected(`width`); + + if (expectedResult.additionalClass) { + ok( + endDelaySignEl.classList.contains(expectedResult.additionalClass), + `endDelay sign element should have ${expectedResult.additionalClass} class` + ); + } else { + ok( + !endDelaySignEl.classList.contains(expectedResult.additionalClass), + "endDelay sign element should not have " + + `${expectedResult.additionalClass} class` + ); + } + } else { + ok( + !endDelaySignEl, + "The endDelay sign element should not be in animation item element" + ); + } + } +} |