diff options
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_highlighter-comments.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-comments.js | 119 |
1 files changed, 119 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-comments.js b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js new file mode 100644 index 0000000000..615e110d89 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-comments.js @@ -0,0 +1,119 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +// Test that hovering over the markup-view's containers doesn't always show the +// highlighter, depending on the type of node hovered over. + +const TEST_PAGE = URL_ROOT + "doc_inspector_highlighter-comments.html"; + +add_task(async function () { + const { inspector, highlighterTestFront } = await openInspectorForURL( + TEST_PAGE + ); + const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); + const markupView = inspector.markup; + await selectNode("p", inspector); + + info("Hovering over #id1 and waiting for highlighter to appear."); + await hoverElement("#id1"); + await assertHighlighterShownOn("#id1"); + + info("Hovering over comment node and ensuring highlighter doesn't appear."); + await hoverComment(); + await assertHighlighterHidden(); + + info("Hovering over #id1 again and waiting for highlighter to appear."); + await hoverElement("#id1"); + await assertHighlighterShownOn("#id1"); + + info("Hovering over #id2 and waiting for highlighter to appear."); + await hoverElement("#id2"); + await assertHighlighterShownOn("#id2"); + + info("Hovering over <script> and ensuring highlighter doesn't appear."); + await hoverElement("script"); + await assertHighlighterHidden(); + + info("Hovering over #id3 and waiting for highlighter to appear."); + await hoverElement("#id3"); + await assertHighlighterShownOn("#id3"); + + info("Hovering over hidden #id4 and ensuring highlighter doesn't appear."); + await hoverElement("#id4"); + await assertHighlighterHidden(); + + info("Hovering over a text node and waiting for highlighter to appear."); + await hoverTextNode("Visible text node"); + await assertHighlighterShownOnTextNode("body", 14); + + function hoverContainer(container) { + const onHighlighterShown = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.BOXMODEL + ); + + container.tagLine.scrollIntoView(); + EventUtils.synthesizeMouse( + container.tagLine, + 2, + 2, + { type: "mousemove" }, + markupView.doc.defaultView + ); + + return onHighlighterShown; + } + + async function hoverElement(selector) { + info(`Hovering node ${selector} in the markup view`); + const container = await getContainerForSelector(selector, inspector); + return hoverContainer(container); + } + + function hoverComment() { + info("Hovering the comment node in the markup view"); + for (const [node, container] of markupView._containers) { + if (node.nodeType === Node.COMMENT_NODE) { + return hoverContainer(container); + } + } + return null; + } + + function hoverTextNode(text) { + info(`Hovering the text node "${text}" in the markup view`); + const container = [...markupView._containers].filter(([nodeFront]) => { + return ( + nodeFront.nodeType === Node.TEXT_NODE && + nodeFront._form.nodeValue.trim() === text.trim() + ); + })[0][1]; + return hoverContainer(container); + } + + async function assertHighlighterShownOn(selector) { + ok( + await highlighterTestFront.assertHighlightedNode(selector), + "Highlighter is shown on the right node: " + selector + ); + } + + async function assertHighlighterShownOnTextNode( + parentSelector, + childNodeIndex + ) { + ok( + await highlighterTestFront.assertHighlightedTextNode( + parentSelector, + childNodeIndex + ), + "Highlighter is shown on the right text node" + ); + } + + async function assertHighlighterHidden() { + const isVisible = await highlighterTestFront.isHighlighting(); + ok(!isVisible, "Highlighter is hidden"); + } +}); |