Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test for following KeyframesProgressBar:
// * element existence
// * progress bar position in multi effect timings
// * progress bar position after changing playback rate
// * progress bar position when select another animation
requestLongerTimeout(3);
const TEST_DATA = [
{
targetClass: "cssanimation-linear",
scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
expectedPositions: [0, 0.25, 0.5, 0.75, 0],
},
{
targetClass: "easing-step",
scrubberPositions: [0, 0.49, 0.5, 0.99],
expectedPositions: [0, 0, 0.5, 0.5],
},
{
targetClass: "delay-positive",
scrubberPositions: [0, 0.33, 0.5],
expectedPositions: [0, 0, 0.25],
},
{
targetClass: "delay-negative",
scrubberPositions: [0, 0.49, 0.5, 0.75],
expectedPositions: [0, 0, 0.5, 0.75],
},
{
targetClass: "enddelay-positive",
scrubberPositions: [0, 0.66, 0.67, 0.99],
expectedPositions: [0, 0.99, 0, 0],
},
{
targetClass: "enddelay-negative",
scrubberPositions: [0, 0.49, 0.5, 0.99],
expectedPositions: [0, 0.49, 0, 0],
},
{
targetClass: "direction-reverse-with-iterations-infinity",
scrubberPositions: [0, 0.25, 0.5, 0.75, 1],
expectedPositions: [1, 0.75, 0.5, 0.25, 1],
},
{
targetClass: "fill-both-width-delay-iterationstart",
scrubberPositions: [0, 0.33, 0.66, 0.833, 1],
expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5],
},
];
add_task(async function () {
await addTab(URL_ROOT + "doc_multi_timings.html");
await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
const { animationInspector, inspector, panel } =
await openAnimationInspector();
info("Checking progress bar position in multi effect timings");
for (const testdata of TEST_DATA) {
const { targetClass, scrubberPositions, expectedPositions } = testdata;
info(`Checking progress bar position for ${targetClass}`);
const onDetailRendered = animationInspector.once(
"animation-keyframes-rendered"
);
await selectNode(`.${targetClass}`, inspector);
await onDetailRendered;
info("Checking progress bar existence");
const areaEl = panel.querySelector(".keyframes-progress-bar-area");
ok(areaEl, "progress bar area should exist");
const barEl = areaEl.querySelector(".keyframes-progress-bar");
ok(barEl, "progress bar should exist");
for (let i = 0; i < scrubberPositions.length; i++) {
info(`Scrubber position is ${scrubberPositions[i]}`);
clickOnCurrentTimeScrubberController(
animationInspector,
panel,
scrubberPositions[i]
);
await waitUntilAnimationsPlayState(animationInspector, "paused");
assertPosition(barEl, areaEl, expectedPositions[i], animationInspector);
}
}
});
function assertPosition(barEl, areaEl, expectedRate) {
const controllerBounds = areaEl.getBoundingClientRect();
const barBounds = barEl.getBoundingClientRect();
const barX = barBounds.x + barBounds.width / 2 - controllerBounds.x;
const expected = controllerBounds.width * expectedRate;
ok(
expected - 1 < barX && barX < expected + 1,
`Position should apploximately be ${expected} (x of bar is ${barX})`
);
}