diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js new file mode 100644 index 0000000000..03e9535558 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js @@ -0,0 +1,109 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test for following timeline tick items. +// * animation list header elements existence +// * tick labels elements existence +// * count and text of tick label elements changing by the sidebar width + +const TimeScale = require("resource://devtools/client/inspector/animation/utils/timescale.js"); +const { + findOptimalTimeInterval, +} = require("resource://devtools/client/inspector/animation/utils/utils.js"); + +// Should be kept in sync with TIME_GRADUATION_MIN_SPACING in +// AnimationTimeTickList component. +const TIME_GRADUATION_MIN_SPACING = 40; + +add_task(async function () { + await pushPref("devtools.inspector.three-pane-enabled", false); + await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]); + const { animationInspector, inspector, panel } = + await openAnimationInspector(); + const timeScale = new TimeScale(animationInspector.state.animations); + + info("Checking animation list header element existence"); + const listContainerEl = panel.querySelector(".animation-list-container"); + const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar"); + ok( + listHeaderEl, + "The header element should be in animation list container element" + ); + + info("Checking time tick item elements existence"); + await assertTickLabels(timeScale, listContainerEl); + const timelineTickItemLength = + listContainerEl.querySelectorAll(".tick-label").length; + + info("Checking timeline tick item elements after enlarge sidebar width"); + await setSidebarWidth("100%", inspector); + await assertTickLabels(timeScale, listContainerEl); + Assert.less( + timelineTickItemLength, + listContainerEl.querySelectorAll(".tick-label").length, + "The timeline tick item elements should increase" + ); +}); + +/** + * Assert tick label's position and label. + * + * @param {TimeScale} - timeScale + * @param {Element} - listContainerEl + */ +async function assertTickLabels(timeScale, listContainerEl) { + const timelineTickListEl = listContainerEl.querySelector(".tick-labels"); + ok( + timelineTickListEl, + "The animation timeline tick list element should be in header" + ); + + const width = timelineTickListEl.offsetWidth; + const animationDuration = timeScale.getDuration(); + const minTimeInterval = + (TIME_GRADUATION_MIN_SPACING * animationDuration) / width; + const interval = findOptimalTimeInterval(minTimeInterval); + const shiftWidth = timeScale.zeroPositionTime % interval; + const expectedTickItem = + Math.ceil(animationDuration / interval) + (shiftWidth !== 0 ? 1 : 0); + + await waitUntil( + () => + timelineTickListEl.querySelectorAll(".tick-label").length === + expectedTickItem + ); + ok(true, "The expected number of timeline ticks were found"); + + const timelineTickItemEls = + timelineTickListEl.querySelectorAll(".tick-label"); + + info("Make sure graduations are evenly distributed and show the right times"); + for (const [index, tickEl] of timelineTickItemEls.entries()) { + const left = parseFloat(tickEl.style.marginInlineStart); + let expectedPos = + (((index - 1) * interval + shiftWidth) / animationDuration) * 100; + if (shiftWidth !== 0 && index === 0) { + expectedPos = 0; + } + is( + Math.round(left), + Math.round(expectedPos), + `Graduation ${index} is positioned correctly` + ); + + // Note that the distancetoRelativeTime and formatTime functions are tested + // separately in xpcshell test test_timeScale.js, so we assume that they + // work here. + const formattedTime = timeScale.formatTime( + timeScale.distanceToRelativeTime(expectedPos, width) + ); + is( + tickEl.textContent, + formattedTime, + `Graduation ${index} has the right text content` + ); + } +} |