diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js new file mode 100644 index 0000000000..341b8f525a --- /dev/null +++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_guides.js @@ -0,0 +1,69 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test that hovering over regions in the box-model shows the highlighter with +// the right options. +// Tests that actually check the highlighter is displayed and correct are in the +// devtools/inspector/test folder. This test only cares about checking that the +// box model view does call the highlighter, and it does so by mocking it. + +const STYLE = + "div { position: absolute; top: 50px; left: 50px; " + + "height: 10px; width: 10px; border: 10px solid black; " + + "padding: 10px; margin: 10px;}"; +const HTML = "<style>" + STYLE + "</style><div></div>"; +const TEST_URL = "data:text/html;charset=utf-8," + encodeURIComponent(HTML); + +add_task(async function () { + await addTab(TEST_URL); + const { inspector, boxmodel } = await openLayoutView(); + await selectNode("div", inspector); + + let elt = boxmodel.document.querySelector(".boxmodel-margins"); + await testGuideOnLayoutHover(elt, "margin", inspector); + + elt = boxmodel.document.querySelector(".boxmodel-borders"); + await testGuideOnLayoutHover(elt, "border", inspector); + + elt = boxmodel.document.querySelector(".boxmodel-paddings"); + await testGuideOnLayoutHover(elt, "padding", inspector); + + elt = boxmodel.document.querySelector(".boxmodel-content"); + await testGuideOnLayoutHover(elt, "content", inspector); +}); + +async function testGuideOnLayoutHover(elt, expectedRegion, inspector) { + const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector); + const onHighlighterShown = waitForHighlighterTypeShown( + inspector.highlighters.TYPES.BOXMODEL + ); + + info("Synthesizing mouseover on the boxmodel-view"); + EventUtils.synthesizeMouse( + elt, + 50, + 2, + { type: "mouseover" }, + elt.ownerDocument.defaultView + ); + + info("Waiting for the node-highlight event from the toolbox"); + const { nodeFront, options } = await onHighlighterShown; + + // Wait for the next event tick to make sure the remaining part of the + // test is executed after finishing synthesizing mouse event. + await new Promise(executeSoon); + + is( + nodeFront, + inspector.selection.nodeFront, + "The right nodeFront was highlighted" + ); + is( + options.region, + expectedRegion, + "Region " + expectedRegion + " was highlighted" + ); +} |