diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js b/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js new file mode 100644 index 0000000000..0ff5b08018 --- /dev/null +++ b/devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js @@ -0,0 +1,118 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test for following highlighting related. +// * highlight when mouse over on a target node +// * unhighlight when mouse out from the above element +// * lock highlighting when click on the inspect icon in animation target component +// * add 'highlighting' class to animation target component during locking +// * mouseover locked target node +// * unlock highlighting when click on the above icon +// * lock highlighting when click on the other inspect icon +// * if the locked node has multi animations, +// the class will add to those animation target as well + +add_task(async function () { + await addTab(URL_ROOT + "doc_simple_animation.html"); + await removeAnimatedElementsExcept([".animated", ".multi"]); + const { animationInspector, inspector, panel } = + await openAnimationInspector(); + const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } = + getHighlighterTestHelpers(inspector); + + info("Check highlighting when mouse over on a target node"); + const onHighlight = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.BOXMODEL + ); + mouseOverOnTargetNode(animationInspector, panel, 0); + let data = await onHighlight; + assertNodeFront(data.nodeFront, "DIV", "ball animated"); + + info("Check unhighlighting when mouse out on a target node"); + const onUnhighlight = waitForHighlighterTypeHidden( + inspector.highlighters.TYPES.BOXMODEL + ); + mouseOutOnTargetNode(animationInspector, panel, 0); + await onUnhighlight; + ok(true, "Unhighlighted the targe node"); + + info("Check node is highlighted when the inspect icon is clicked"); + const onHighlighterShown = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.BOXMODEL + ); + await clickOnInspectIcon(animationInspector, panel, 0); + data = await onHighlighterShown; + assertNodeFront(data.nodeFront, "DIV", "ball animated"); + await assertHighlight(panel, 0, true); + + info("Check if the animation target is still highlighted on mouse out"); + mouseOutOnTargetNode(animationInspector, panel, 0); + await wait(500); + await assertHighlight(panel, 0, true); + + info("Check no highlight event occur by mouse over locked target"); + let highlightEventCount = 0; + function onHighlighterHidden({ type }) { + if (type === inspector.highlighters.TYPES.BOXMODEL) { + highlightEventCount += 1; + } + } + inspector.highlighters.on("highlighter-hidden", onHighlighterHidden); + mouseOverOnTargetNode(animationInspector, panel, 0); + await wait(500); + is(highlightEventCount, 0, "Highlight event should not occur"); + inspector.highlighters.off("highlighter-hidden", onHighlighterHidden); + + info("Show persistent highlighter on an animation target"); + const onPersistentHighlighterShown = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.SELECTOR + ); + await clickOnInspectIcon(animationInspector, panel, 1); + data = await onPersistentHighlighterShown; + assertNodeFront(data.nodeFront, "DIV", "ball multi"); + + info("Check the highlighted state of the animation targets"); + await assertHighlight(panel, 0, false); + await assertHighlight(panel, 1, true); + await assertHighlight(panel, 2, true); + + info("Hide persistent highlighter"); + const onPersistentHighlighterHidden = waitForHighlighterTypeHidden( + inspector.highlighters.TYPES.SELECTOR + ); + await clickOnInspectIcon(animationInspector, panel, 1); + await onPersistentHighlighterHidden; + + info("Check the highlighted state of the animation targets"); + await assertHighlight(panel, 0, false); + await assertHighlight(panel, 1, false); + await assertHighlight(panel, 2, false); +}); + +async function assertHighlight(panel, index, isHighlightExpected) { + const animationItemEl = await findAnimationItemByIndex(panel, index); + const animationTargetEl = animationItemEl.querySelector(".animation-target"); + + await waitUntil( + () => + animationTargetEl.classList.contains("highlighting") === + isHighlightExpected + ); + ok(true, `Highlighting class of animation target[${index}] is correct`); +} + +function assertNodeFront(nodeFront, tagName, classValue) { + is(nodeFront.tagName, "DIV", "The highlighted node has the correct tagName"); + is( + nodeFront.attributes[0].name, + "class", + "The highlighted node has the correct attributes" + ); + is( + nodeFront.attributes[0].value, + classValue, + "The highlighted node has the correct class" + ); +} |