mozilla-central/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js (file symbol)

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 easing hint in ComputedValuePath.
// * element existence
// * path segments
// * hint text
const TEST_DATA = [
{
targetClass: "no-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 100 },
{ x: 500, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "effect-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 100 },
{ x: 199, y: 81 },
{ x: 200, y: 80 },
{ x: 399, y: 61 },
{ x: 400, y: 60 },
{ x: 599, y: 41 },
{ x: 600, y: 40 },
{ x: 799, y: 21 },
{ x: 800, y: 20 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "keyframe-easing",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "steps(2)",
path: [
{ x: 0, y: 100 },
{ x: 499, y: 100 },
{ x: 500, y: 50 },
{ x: 999, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "both-easing",
properties: [
{
name: "margin-left",
expectedHints: [
{
hint: "steps(1)",
path: [
{ x: 0, y: 0 },
{ x: 999, y: 0 },
{ x: 1000, y: 100 },
],
},
],
},
{
name: "opacity",
expectedHints: [
{
hint: "steps(2)",
path: [
{ x: 0, y: 100 },
{ x: 499, y: 100 },
{ x: 500, y: 50 },
{ x: 999, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "narrow-keyframes",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 0 },
{ x: 100, y: 100 },
],
},
{
hint: "steps(1)",
path: [
{ x: 129, y: 100 },
{ x: 130, y: 0 },
],
},
{
hint: "linear",
path: [
{ x: 130, y: 0 },
{ x: 1000, y: 100 },
],
},
],
},
],
},
{
targetClass: "duplicate-keyframes",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "linear",
path: [
{ x: 0, y: 0 },
{ x: 500, y: 100 },
],
},
{
hint: "",
path: [
{ x: 500, y: 100 },
{ x: 500, y: 0 },
],
},
{
hint: "steps(1)",
path: [
{ x: 500, y: 0 },
{ x: 999, y: 0 },
{ x: 1000, y: 100 },
],
},
],
},
],
},
{
targetClass: "color-keyframes",
properties: [
{
name: "color",
expectedHints: [
{
hint: "ease-in",
rect: {
x: 0,
height: 100,
width: 400,
},
},
{
hint: "ease-out",
rect: {
x: 400,
height: 100,
width: 600,
},
},
],
},
],
},
{
targetClass: "jump-start",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "steps(2, jump-start)",
path: [
{ x: 0, y: 50 },
{ x: 499, y: 50 },
{ x: 500, y: 0 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "jump-end",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "steps(2)",
path: [
{ x: 0, y: 100 },
{ x: 499, y: 100 },
{ x: 500, y: 50 },
{ x: 999, y: 50 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
{
targetClass: "jump-both",
properties: [
{
name: "opacity",
expectedHints: [
{
hint: "steps(3, jump-both)",
path: [
{ x: 0, y: 75 },
{ x: 330, y: 75 },
{ x: 340, y: 50 },
{ x: 660, y: 50 },
{ x: 670, y: 25 },
{ x: 999, y: 25 },
{ x: 1000, y: 0 },
],
},
],
},
],
},
];
// Prevent test timeout's on windows code coverage: Bug 1470757
requestLongerTimeout(2);
add_task(async function () {
await addTab(URL_ROOT + "doc_multi_easings.html");
await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${t.targetClass}`));
const { animationInspector, panel } = await openAnimationInspector();
for (const { properties, targetClass } of TEST_DATA) {
info(`Checking keyframes graph for ${targetClass}`);
const onDetailRendered = animationInspector.once(
"animation-keyframes-rendered"
);
await clickOnAnimationByTargetSelector(
animationInspector,
panel,
`.${targetClass}`
);
await onDetailRendered;
for (const { name, expectedHints } of properties) {
const testTarget = `${name} in ${targetClass}`;
info(`Checking easing hint for ${testTarget}`);
info(`Checking easing hint existence for ${testTarget}`);
const hintEls = panel.querySelectorAll(`.${name} .hint`);
is(
hintEls.length,
expectedHints.length,
`Count of easing hint elements of ${testTarget} ` +
`should be ${expectedHints.length}`
);
for (let i = 0; i < expectedHints.length; i++) {
const hintTarget = `hint[${i}] of ${testTarget}`;
info(`Checking ${hintTarget}`);
const hintEl = hintEls[i];
const expectedHint = expectedHints[i];
info(`Checking <title> in ${hintTarget}`);
const titleEl = hintEl.querySelector("title");
ok(titleEl, `<title> element in ${hintTarget} should be existence`);
is(
titleEl.textContent,
expectedHint.hint,
`Content of <title> in ${hintTarget} should be ${expectedHint.hint}`
);
let interactionEl = null;
let displayedEl = null;
if (expectedHint.path) {
info(`Checking <path> in ${hintTarget}`);
interactionEl = hintEl.querySelector("path");
displayedEl = interactionEl;
ok(
interactionEl,
`The <path> element in ${hintTarget} should be existence`
);
assertPathSegments(interactionEl, false, expectedHint.path);
} else {
info(`Checking <rect> in ${hintTarget}`);
interactionEl = hintEl.querySelector("rect");
displayedEl = hintEl.querySelector("line");
ok(
interactionEl,
`The <rect> element in ${hintTarget} should be existence`
);
is(
parseInt(interactionEl.getAttribute("x"), 10),
expectedHint.rect.x,
`x of <rect> in ${hintTarget} should be ${expectedHint.rect.x}`
);
is(
parseInt(interactionEl.getAttribute("width"), 10),
expectedHint.rect.width,
`width of <rect> in ${hintTarget} should be ${expectedHint.rect.width}`
);
}
info(`Checking interaction for ${hintTarget}`);
interactionEl.scrollIntoView(false);
const win = hintEl.ownerGlobal;
// Mouse over the pathEl.
ok(
isStrokeChangedByMouseOver(interactionEl, displayedEl, win),
`stroke-opacity of hintEl for ${hintTarget} should be 1 ` +
"while mouse is over the element"
);
// Mouse out from pathEl.
EventUtils.synthesizeMouse(
panel.querySelector(".animation-toolbar"),
0,
0,
{ type: "mouseover" },
win
);
is(
parseInt(win.getComputedStyle(displayedEl).strokeOpacity, 10),
0,
`stroke-opacity of hintEl for ${hintTarget} should be 0 ` +
"while mouse is out from the element"
);
}
}
}
});
function isStrokeChangedByMouseOver(mouseoverEl, displayedEl, win) {
const boundingBox = mouseoverEl.getBoundingClientRect();
const x = boundingBox.width / 2;
for (let y = 0; y < boundingBox.height; y++) {
EventUtils.synthesizeMouse(mouseoverEl, x, y, { type: "mouseover" }, win);
if (win.getComputedStyle(displayedEl).strokeOpacity == 1) {
return true;
}
}
return false;
}