diff options
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js new file mode 100644 index 0000000000..194fc76cc4 --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_05.js @@ -0,0 +1,158 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test hovering over shape points in the rule-view and shapes highlighter. + +const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html"; +const HIGHLIGHTER_TYPE = "ShapesHighlighter"; + +add_task(async function () { + const env = await openInspectorForURL(TEST_URL); + const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env); + const { highlighterTestFront, inspector } = env; + const view = selectRuleView(inspector); + const highlighters = view.highlighters; + const config = { + inspector, + view, + highlighters, + highlighterTestFront, + helper, + }; + + await highlightFromRuleView(config); + await highlightFromHighlighter(config); +}); + +async function setup(config) { + const { view, selector, property, inspector } = config; + info(`Turn on shapes highlighter for ${selector}`); + await selectNode(selector, inspector); + await toggleShapesHighlighter(view, selector, property, true); +} + +async function teardown(config) { + const { view, selector, property } = config; + info(`Turn off shapes highlighter for ${selector}`); + await toggleShapesHighlighter(view, selector, property, false); +} +/* + * Test that points hovered in the rule view will highlight corresponding points + * in the shapes highlighter on the page. + */ +async function highlightFromRuleView(config) { + const { view, highlighters, highlighterTestFront, inspector } = config; + const selector = "#polygon"; + const property = "clip-path"; + + await setup({ selector, property, ...config }); + + const container = getRuleViewProperty(view, selector, property).valueSpan; + const shapesToggle = container.querySelector(".ruleview-shapeswatch"); + + const highlighterFront = + inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE); + + let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute( + "shapes-marker-hover", + "hidden", + highlighterFront + ); + ok(markerHidden, "Hover marker on highlighter is not visible"); + + info("Hover over point 0 in rule view"); + const pointSpan = container.querySelector( + ".ruleview-shape-point[data-point='0']" + ); + let onHighlighterShown = highlighters.once("shapes-highlighter-shown"); + EventUtils.synthesizeMouseAtCenter( + pointSpan, + { type: "mousemove" }, + view.styleWindow + ); + await onHighlighterShown; + + info( + "Point in shapes highlighter is marked when same point in rule view is hovered" + ); + markerHidden = await highlighterTestFront.getHighlighterNodeAttribute( + "shapes-marker-hover", + "hidden", + highlighterFront + ); + ok(!markerHidden, "Marker on highlighter is visible"); + + info("Move mouse off point"); + onHighlighterShown = highlighters.once("shapes-highlighter-shown"); + EventUtils.synthesizeMouseAtCenter( + shapesToggle, + { type: "mousemove" }, + view.styleWindow + ); + await onHighlighterShown; + + markerHidden = await highlighterTestFront.getHighlighterNodeAttribute( + "shapes-marker-hover", + "hidden", + highlighterFront + ); + ok(markerHidden, "Marker on highlighter is not visible"); + + await teardown({ selector, property, ...config }); +} + +/* + * Test that points hovered in the shapes highlighter on the page will highlight + * corresponding points in the rule view. + */ +async function highlightFromHighlighter(config) { + const { view, highlighters, highlighterTestFront, helper, inspector } = + config; + const selector = "#polygon"; + const property = "clip-path"; + + await setup({ selector, property, ...config }); + + const highlighterFront = + inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE); + const { mouse } = helper; + const container = getRuleViewProperty(view, selector, property).valueSpan; + + info("Hover over first point in highlighter"); + let onEventHandled = highlighters.once("highlighter-event-handled"); + await mouse.move(0, 0); + await onEventHandled; + let markerHidden = await highlighterTestFront.getHighlighterNodeAttribute( + "shapes-marker-hover", + "hidden", + highlighterFront + ); + ok(!markerHidden, "Marker on highlighter is visible"); + + info( + "Point in rule view is marked when same point in shapes highlighter is hovered" + ); + const pointSpan = container.querySelector( + ".ruleview-shape-point[data-point='0']" + ); + ok(pointSpan.classList.contains("active"), "Span for point 0 is active"); + + info("Move mouse off point"); + onEventHandled = highlighters.once("highlighter-event-handled"); + await mouse.move(100, 100); + await onEventHandled; + markerHidden = await highlighterTestFront.getHighlighterNodeAttribute( + "shapes-marker-hover", + "hidden", + highlighterFront + ); + ok(markerHidden, "Marker on highlighter is no longer visible"); + ok( + !pointSpan.classList.contains("active"), + "Span for point 0 is no longer active" + ); + + await teardown({ selector, property, ...config }); +} |