/* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; // Test for pseudo element. const TEST_DATA = [ { expectedTargetLabel: "::before", expectedAnimationNameLabel: "body", expectedKeyframsGraphPathSegments: [ { x: 0, y: 0 }, { x: 1000, y: 100 }, ], }, { expectedTargetLabel: "::before", expectedAnimationNameLabel: "div-before", expectedKeyframsGraphPathSegments: [ { x: 0, y: 100 }, { x: 1000, y: 0 }, ], }, { expectedTargetLabel: "::after", expectedAnimationNameLabel: "div-after", }, { expectedTargetLabel: "::marker", expectedAnimationNameLabel: "div-marker", }, ]; add_task(async function () { await addTab(URL_ROOT + "doc_pseudo.html"); const { animationInspector, inspector, panel } = await openAnimationInspector(); info("Checking count of animation item for pseudo elements"); is( panel.querySelectorAll(".animation-list .animation-item").length, TEST_DATA.length, `Count of animation item should be ${TEST_DATA.length}` ); info("Checking content of each animation item"); for (let i = 0; i < TEST_DATA.length; i++) { const testData = TEST_DATA[i]; info(`Checking pseudo element for ${testData.expectedTargetLabel}`); const animationItemEl = await findAnimationItemByIndex(panel, i); info("Checking text content of animation target"); const animationTargetEl = animationItemEl.querySelector( ".animation-list .animation-item .animation-target" ); is( animationTargetEl.textContent, testData.expectedTargetLabel, `Text content of animation target[${i}] should be ${testData.expectedTarget}` ); info("Checking text content of animation name"); const animationNameEl = animationItemEl.querySelector(".animation-name"); is( animationNameEl.textContent, testData.expectedAnimationNameLabel, `The animation name should be ${testData.expectedAnimationNameLabel}` ); } info( "Checking whether node is selected correctly " + "when click on the first inspector icon on Reps component" ); let onDetailRendered = animationInspector.once( "animation-keyframes-rendered" ); await clickOnTargetNode(animationInspector, panel, 0); await onDetailRendered; assertAnimationCount(panel, 1); assertAnimationNameLabel(panel, TEST_DATA[0].expectedAnimationNameLabel); assertKeyframesGraphPathSegments( panel, TEST_DATA[0].expectedKeyframsGraphPathSegments ); info("Select again to reset the animation list"); await selectNode("body", inspector); info( "Checking whether node is selected correctly " + "when click on the second inspector icon on Reps component" ); onDetailRendered = animationInspector.once("animation-keyframes-rendered"); await clickOnTargetNode(animationInspector, panel, 1); await onDetailRendered; assertAnimationCount(panel, 1); assertAnimationNameLabel(panel, TEST_DATA[1].expectedAnimationNameLabel); assertKeyframesGraphPathSegments( panel, TEST_DATA[1].expectedKeyframsGraphPathSegments ); }); function assertAnimationCount(panel, expectedCount) { info("Checking count of animation item"); is( panel.querySelectorAll(".animation-list .animation-item").length, expectedCount, `Count of animation item should be ${expectedCount}` ); } function assertAnimationNameLabel(panel, expectedAnimationNameLabel) { info("Checking the animation name label"); is( panel.querySelector(".animation-list .animation-item .animation-name") .textContent, expectedAnimationNameLabel, `The animation name should be ${expectedAnimationNameLabel}` ); } function assertKeyframesGraphPathSegments(panel, expectedPathSegments) { info("Checking the keyframes graph path segments"); const pathEl = panel.querySelector(".keyframes-graph-path path"); assertPathSegments(pathEl, true, expectedPathSegments); }