Source code
Revision control
Copy as Markdown
Other Tools
/* Any copyright is dedicated to the Public Domain.
"use strict";
/* import-globals-from head.js */
// Test for following keyframe marker.
// * element existence
// * title
// * and marginInlineStart style
const KEYFRAMES_TEST_DATA = [
{
targetClass: "multi-types",
properties: [
{
name: "background-color",
expectedValues: [
{
title: "rgb(255, 0, 0)",
marginInlineStart: "0%",
},
{
title: "rgb(0, 255, 0)",
marginInlineStart: "100%",
},
],
},
{
name: "background-repeat",
expectedValues: [
{
title: "space round",
marginInlineStart: "0%",
},
{
title: "round space",
marginInlineStart: "100%",
},
],
},
{
name: "font-size",
expectedValues: [
{
title: "10px",
marginInlineStart: "0%",
},
{
title: "20px",
marginInlineStart: "100%",
},
],
},
{
name: "margin-left",
expectedValues: [
{
title: "0px",
marginInlineStart: "0%",
},
{
title: "100px",
marginInlineStart: "100%",
},
],
},
{
name: "opacity",
expectedValues: [
{
title: "0",
marginInlineStart: "0%",
},
{
title: "1",
marginInlineStart: "100%",
},
],
},
{
name: "text-align",
expectedValues: [
{
title: "right",
marginInlineStart: "0%",
},
{
title: "center",
marginInlineStart: "100%",
},
],
},
{
name: "transform",
expectedValues: [
{
title: "translate(0px)",
marginInlineStart: "0%",
},
{
title: "translate(100px)",
marginInlineStart: "100%",
},
],
},
],
},
{
targetClass: "narrow-offsets",
properties: [
{
name: "opacity",
expectedValues: [
{
title: "0",
marginInlineStart: "0%",
},
{
title: "1",
marginInlineStart: "10%",
},
{
title: "0",
marginInlineStart: "13%",
},
{
title: "1",
marginInlineStart: "100%",
},
],
},
],
},
{
targetClass: "same-color",
properties: [
{
name: "background-color",
expectedValues: [
{
title: "rgb(0, 255, 0)",
marginInlineStart: "0%",
},
{
title: "rgb(0, 255, 0)",
marginInlineStart: "100%",
},
],
},
],
},
{
targetClass: "currentcolor",
properties: [
{
name: "background-color",
expectedValues: [
{
title: "currentcolor",
marginInlineStart: "0%",
},
{
title: "rgb(0, 255, 0)",
marginInlineStart: "100%",
},
],
},
],
},
];
/**
* Do test for keyframes-graph_keyframe-marker-ltf/rtl.
*
* @param {Array} testData
*/
// eslint-disable-next-line no-unused-vars
async function testKeyframesGraphKeyframesMarker() {
await addTab(URL_ROOT + "doc_multi_keyframes.html");
await removeAnimatedElementsExcept(
KEYFRAMES_TEST_DATA.map(t => `.${t.targetClass}`)
);
const { animationInspector, panel } = await openAnimationInspector();
for (const { properties, targetClass } of KEYFRAMES_TEST_DATA) {
info(`Checking keyframe marker for ${targetClass}`);
const onDetailRendered = animationInspector.once(
"animation-keyframes-rendered"
);
await clickOnAnimationByTargetSelector(
animationInspector,
panel,
`.${targetClass}`
);
await onDetailRendered;
for (const { name, expectedValues } of properties) {
const testTarget = `${name} in ${targetClass}`;
info(`Checking keyframe marker for ${testTarget}`);
info(`Checking keyframe marker existence for ${testTarget}`);
const markerEls = panel.querySelectorAll(
`.${name} .keyframe-marker-item`
);
is(
markerEls.length,
expectedValues.length,
`Count of keyframe marker elements of ${testTarget} ` +
`should be ${expectedValues.length}`
);
for (let i = 0; i < expectedValues.length; i++) {
const hintTarget = `.keyframe-marker-item[${i}] of ${testTarget}`;
info(`Checking ${hintTarget}`);
const markerEl = markerEls[i];
const expectedValue = expectedValues[i];
info(`Checking title in ${hintTarget}`);
is(
markerEl.getAttribute("title"),
expectedValue.title,
`title in ${hintTarget} should be ${expectedValue.title}`
);
info(`Checking marginInlineStart style in ${hintTarget}`);
is(
markerEl.style.marginInlineStart,
expectedValue.marginInlineStart,
`marginInlineStart in ${hintTarget} should be ` +
`${expectedValue.marginInlineStart}`
);
}
}
}
}