diff options
Diffstat (limited to '')
| -rw-r--r-- | devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js | 237 |
1 files changed, 237 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js new file mode 100644 index 0000000000..97c7040553 --- /dev/null +++ b/devtools/client/inspector/animation/test/keyframes-graph_keyframe-marker_head.js @@ -0,0 +1,237 @@ +/* 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 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}` + ); + } + } + } +} |