From b6f31b8647568229fcda64a402052b847e42b781 Mon Sep 17 00:00:00 2001 From: Patrick Brosset Date: Mon, 9 Mar 2015 17:33:24 +0100 Subject: [PATCH] Bug 1123851 - 2 - Tests for the element geometry highlighter; r=bgrins --- browser/devtools/inspector/test/browser.ini | 7 + ...owser_inspector_highlighter-geometry_01.js | 104 +++++++++++++ ...owser_inspector_highlighter-geometry_02.js | 142 ++++++++++++++++++ ...owser_inspector_highlighter-geometry_03.js | 63 ++++++++ ...owser_inspector_highlighter-geometry_04.js | 56 +++++++ ...owser_inspector_highlighter-geometry_05.js | 138 +++++++++++++++++ ...doc_inspector_highlighter-geometry_01.html | 90 +++++++++++ ...doc_inspector_highlighter-geometry_02.html | 120 +++++++++++++++ 8 files changed, 720 insertions(+) create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter-geometry_01.js create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter-geometry_02.js create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter-geometry_03.js create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter-geometry_04.js create mode 100644 browser/devtools/inspector/test/browser_inspector_highlighter-geometry_05.js create mode 100644 browser/devtools/inspector/test/doc_inspector_highlighter-geometry_01.html create mode 100644 browser/devtools/inspector/test/doc_inspector_highlighter-geometry_02.html diff --git a/browser/devtools/inspector/test/browser.ini b/browser/devtools/inspector/test/browser.ini index 36c2fa7ce5a4..3b07ac139efd 100644 --- a/browser/devtools/inspector/test/browser.ini +++ b/browser/devtools/inspector/test/browser.ini @@ -8,6 +8,8 @@ support-files = doc_inspector_gcli-inspect-command.html doc_inspector_highlight_after_transition.html doc_inspector_highlighter-comments.html + doc_inspector_highlighter-geometry_01.html + doc_inspector_highlighter-geometry_02.html doc_inspector_highlighter_csstransform.html doc_inspector_highlighter.html doc_inspector_highlighter_rect.html @@ -40,6 +42,11 @@ skip-if = e10s # GCLI isn't e10s compatible. See bug 1128988. [browser_inspector_highlighter-comments.js] [browser_inspector_highlighter-csstransform_01.js] [browser_inspector_highlighter-csstransform_02.js] +[browser_inspector_highlighter-geometry_01.js] +[browser_inspector_highlighter-geometry_02.js] +[browser_inspector_highlighter-geometry_03.js] +[browser_inspector_highlighter-geometry_04.js] +[browser_inspector_highlighter-geometry_05.js] [browser_inspector_highlighter-hover_01.js] [browser_inspector_highlighter-hover_02.js] [browser_inspector_highlighter-hover_03.js] diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_01.js b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_01.js new file mode 100644 index 000000000000..3125d0cc6fd7 --- /dev/null +++ b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_01.js @@ -0,0 +1,104 @@ +/* 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 the creation of the geometry highlighter elements. + +const TEST_URL = "data:text/html;charset=utf-8," + + "" + + "
" + + "
"; +const ID = "geometry-editor-"; +const SIDES = ["left", "right", "top", "bottom"]; +const SIZES = ["width", "height"]; + +add_task(function*() { + let {inspector, toolbox} = yield openInspectorForURL(TEST_URL); + let front = inspector.inspector; + + let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter"); + + yield hasArrowsAndLabels(highlighter, inspector); + yield isHiddenForNonPositionedNonSizedElement(highlighter, inspector); + yield sideArrowsAreDisplayedForPositionedNode(highlighter, inspector); + yield sizeLabelIsDisplayedForSizedNode(highlighter, inspector); + + yield highlighter.finalize(); +}); + +function* hasArrowsAndLabels(highlighterFront, inspector) { + info("Checking that the highlighter has the expected arrows and labels"); + + for (let name of [...SIDES]) { + let value = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "class"); + is(value, ID + "arrow " + name, "The " + name + " arrow exists"); + + value = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-text-" + name, "class"); + is(value, ID + "label-text", "The " + name + " label exists"); + } + + let value = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-text-size", "class"); + is(value, ID + "label-text", "The size label exists"); +} + +function* isHiddenForNonPositionedNonSizedElement(highlighterFront, inspector) { + info("Asking to show the highlighter on an inline, non positioned element"); + + let node = yield getNodeFront("#inline", inspector); + yield highlighterFront.show(node); + + for (let name of [...SIDES]) { + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "hidden"); + is(hidden, "true", "The " + name + " arrow is hidden"); + } + + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-size", "hidden"); + is(hidden, "true", "The size label is hidden"); +} + +function* sideArrowsAreDisplayedForPositionedNode(highlighterFront, inspector) { + info("Asking to show the highlighter on the positioned node"); + + let node = yield getNodeFront("#positioned", inspector); + yield highlighterFront.show(node); + + for (let name of SIDES) { + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "hidden"); + ok(!hidden, "The " + name + " arrow is visible for the positioned node"); + } + + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-size", "hidden"); + is(hidden, "true", "The size label is hidden"); + + info("Hiding the highlighter"); + yield highlighterFront.hide(); +} + +function* sizeLabelIsDisplayedForSizedNode(highlighterFront, inspector) { + info("Asking to show the highlighter on the sized node"); + + let node = yield getNodeFront("#sized", inspector); + yield highlighterFront.show(node); + + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-size", "hidden"); + ok(!hidden, "The size label is visible"); + + for (let name of SIDES) { + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "hidden"); + is(hidden, "true", "The " + name + " arrow is hidden for the sized node"); + } + + info("Hiding the highlighter"); + yield highlighterFront.hide(); +} diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_02.js b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_02.js new file mode 100644 index 000000000000..4247751fa169 --- /dev/null +++ b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_02.js @@ -0,0 +1,142 @@ +/* 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 the geometry highlighter labels are correct. + +const TEST_URL = "data:text/html;charset=utf-8," + + "
" + + "
test element
" + + "
" + + "
relative
" + + "
" + + "
wow
"; +const ID = "geometry-editor-"; + +const POSITIONED_ELEMENT_TESTS = [{ + selector: "#positioned", + expectedLabels: [ + {side: "left", visible: true, label: "5rem"}, + {side: "top", visible: true, label: "30px"}, + {side: "right", visible: true, label: "300px"}, + {side: "bottom", visible: true, label: "10em"} + ] +}, { + selector: "#positioned2", + expectedLabels: [ + {side: "left", visible: false}, + {side: "top", visible: true, label: "5vmin"}, + {side: "right", visible: true, label: "10%"}, + {side: "bottom", visible: false} + ] +}, { + selector: "#sized", + expectedLabels: [ + {side: "left", visible: false}, + {side: "top", visible: false}, + {side: "right", visible: false}, + {side: "bottom", visible: false} + ] +}, { + selector: "#relative", + expectedLabels: [ + {side: "left", visible: true, label: "20px"}, + {side: "top", visible: true, label: "10px"}, + {side: "right", visible: false}, + {side: "bottom", visible: false} + ] +}, { + selector: "#relative2", + expectedLabels: [ + {side: "left", visible: false}, + {side: "top", visible: true, label: "0px"}, + {side: "right", visible: false}, + {side: "bottom", visible: false} + ] +}]; + +const SIZED_ELEMENT_TESTS = [{ + selector: "#positioned", + visible: false +}, { + selector: "#sized", + visible: true, + expected: "\u2194 5em \u2195 50%" +}, { + selector: "#relative", + visible: true, + expected: "\u2194 100px \u2195 100px" +}, { + selector: "#relative2", + visible: true, + expected: "\u2195 3em" +}, { + selector: "#sized2", + visible: true, + expected: "\u2194 40px" +}]; + +add_task(function*() { + let {inspector, toolbox} = yield openInspectorForURL(TEST_URL); + let front = inspector.inspector; + + let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter"); + + yield positionLabelsAreCorrect(highlighter, inspector); + yield sizeLabelIsCorrect(highlighter, inspector); + + yield highlighter.finalize(); +}); + +function* positionLabelsAreCorrect(highlighterFront, inspector) { + info("Highlight nodes and check position labels"); + + for (let {selector, expectedLabels} of POSITIONED_ELEMENT_TESTS) { + info("Testing node " + selector); + let node = yield getNodeFront(selector, inspector); + yield highlighterFront.show(node); + + for (let {side, visible, label} of expectedLabels) { + let id = ID + "label-" + side; + + let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden"); + if (visible) { + ok(!hidden, "The " + side + " label is visible"); + + let value = yield getHighlighterNodeTextContent(highlighterFront, id); + is(value, label, "The " + side + " label textcontent is correct"); + } else { + is(hidden, "true", "The " + side + " label is hidden"); + } + } + + info("Hiding the highlighter"); + yield highlighterFront.hide(); + } +} + +function* sizeLabelIsCorrect(highlighterFront, inspector) { + info("Highlight nodes and check size labels"); + + let id = ID + "label-size"; + for (let {selector, visible, expected} of SIZED_ELEMENT_TESTS) { + info("Testing node " + selector); + let node = yield getNodeFront(selector, inspector); + yield highlighterFront.show(node); + + let hidden = yield getHighlighterNodeAttribute(highlighterFront, id, "hidden"); + if (!visible) { + is(hidden, "true", "The size label is hidden"); + } else { + ok(!hidden, "The size label is visible"); + + let label = yield getHighlighterNodeTextContent(highlighterFront, id); + is(label, expected, "The size label textcontent is correct"); + } + + info("Hiding the highlighter"); + yield highlighterFront.hide(); + } +} diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_03.js b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_03.js new file mode 100644 index 000000000000..c86984f97fc5 --- /dev/null +++ b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_03.js @@ -0,0 +1,63 @@ +/* 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 the right arrows/labels are shown even when the css properties are +// in several different css rules. + +const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_01.html"; +const ID = "geometry-editor-"; +const PROPS = ["left", "right", "top", "bottom"]; + +add_task(function*() { + let {inspector, toolbox} = yield openInspectorForURL(TEST_URL); + let front = inspector.inspector; + + let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter"); + + yield checkArrowsLabels("#node1", ["size"], + highlighter, inspector); + + yield checkArrowsLabels("#node2", ["top", "left", "bottom", "right"], + highlighter, inspector); + + yield checkArrowsLabels("#node3", ["top", "left", "size"], + highlighter, inspector); + + yield highlighter.finalize(); +}); + +function* checkArrowsLabels(selector, expectedProperties, highlighterFront, inspector) { + info("Getting node " + selector + " from the page"); + let node = yield getNodeFront(selector, inspector); + + info("Highlighting the node"); + yield highlighterFront.show(node); + + for (let name of expectedProperties) { + let hidden; + if (name === "size") { + hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "label-size", "hidden"); + } else { + hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "hidden"); + } + ok(!hidden, "The " + name + " arrow/label is visible for node " + selector); + } + + // Testing that the other arrows are hidden + for (let name of PROPS) { + if (expectedProperties.indexOf(name) !== -1) { + continue; + } + let hidden = yield getHighlighterNodeAttribute(highlighterFront, + ID + "arrow-" + name, "hidden"); + is(hidden, "true", "The " + name + " arrow is hidden for node " + selector); + } + + info("Hiding the highlighter"); + yield highlighterFront.hide(); +} diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_04.js b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_04.js new file mode 100644 index 000000000000..9182aee14361 --- /dev/null +++ b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_04.js @@ -0,0 +1,56 @@ +/* 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 the arrows are positioned correctly and have the right size. + +const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_01.html"; +const ID = "geometry-editor-"; + +add_task(function*() { + let {inspector, toolbox} = yield openInspectorForURL(TEST_URL); + let front = inspector.inspector; + + let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter"); + + yield checkArrows(highlighter, inspector, ".absolute-all-4", { + "top": {x1: 506, y1: 51, x2: 506, y2: 61}, + "bottom": {x1: 506, y1: 451, x2: 506, y2: 251}, + "left": {x1: 401, y1: 156, x2: 411, y2: 156}, + "right": {x1: 901, y1: 156, x2: 601, y2: 156} + }); + + yield checkArrows(highlighter, inspector, ".relative", { + "top": {x1: 901, y1: 51, x2: 901, y2: 91}, + "left": {x1: 401, y1: 97, x2: 651, y2: 97} + }); + + yield checkArrows(highlighter, inspector, ".fixed", { + "top": {x1: 25, y1: 0, x2: 25, y2: 400}, + "left": {x1: 0, y1: 425, x2: 0, y2: 425} + }); + + info("Hiding the highlighter"); + yield highlighter.hide(); + yield highlighter.finalize(); +}); + +function* checkArrows(highlighter, inspector, selector, arrows) { + info("Highlighting the test node " + selector); + let node = yield getNodeFront(selector, inspector); + yield highlighter.show(node); + + for (let side in arrows) { + yield checkArrow(highlighter, side, arrows[side]); + } +} + +function* checkArrow(highlighter, name, expectedCoordinates) { + for (let coordinate in expectedCoordinates) { + let value = yield getHighlighterNodeAttribute(highlighter, ID + "arrow-" + name, coordinate); + is(Math.floor(value), expectedCoordinates[coordinate], + coordinate + " coordinate for arrow " + name + " is correct"); + } +} diff --git a/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_05.js b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_05.js new file mode 100644 index 000000000000..a7df2de95c38 --- /dev/null +++ b/browser/devtools/inspector/test/browser_inspector_highlighter-geometry_05.js @@ -0,0 +1,138 @@ +/* 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 the arrows and offsetparent and currentnode elements of the +// geometry highlighter only appear when needed. + +const TEST_URL = TEST_URL_ROOT + "doc_inspector_highlighter-geometry_02.html"; +const ID = "geometry-editor-"; + +const TEST_DATA = [{ + selector: "body", + isOffsetParentVisible: false, + isCurrentNodeVisible: false, + hasVisibleArrows: false, + isSizeVisible: false +}, { + selector: "h1", + isOffsetParentVisible: false, + isCurrentNodeVisible: false, + hasVisibleArrows: false, + isSizeVisible: false +}, { + selector: ".absolute", + isOffsetParentVisible: false, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: false +}, { + selector: "#absolute-container", + isOffsetParentVisible: false, + isCurrentNodeVisible: true, + hasVisibleArrows: false, + isSizeVisible: true +}, { + selector: ".absolute-bottom-right", + isOffsetParentVisible: true, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: false +}, { + selector: ".absolute-width-margin", + isOffsetParentVisible: true, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: true +}, { + selector: ".absolute-all-4", + isOffsetParentVisible: true, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: false +}, { + selector: ".relative", + isOffsetParentVisible: true, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: false +}, { + selector: ".static", + isOffsetParentVisible: false, + isCurrentNodeVisible: false, + hasVisibleArrows: false, + isSizeVisible: false +}, { + selector: ".static-size", + isOffsetParentVisible: false, + isCurrentNodeVisible: true, + hasVisibleArrows: false, + isSizeVisible: true +}, { + selector: ".fixed", + isOffsetParentVisible: false, + isCurrentNodeVisible: true, + hasVisibleArrows: true, + isSizeVisible: false +}]; + +add_task(function*() { + let {inspector, toolbox} = yield openInspectorForURL(TEST_URL); + let front = inspector.inspector; + + let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter"); + + for (let data of TEST_DATA) { + yield testNode(inspector, highlighter, data); + } + + info("Hiding the highlighter"); + yield highlighter.hide(); + yield highlighter.finalize(); +}); + +function* testNode(inspector, highlighter, data) { + info("Highlighting the test node " + data.selector); + let node = yield getNodeFront(data.selector, inspector); + yield highlighter.show(node); + + is((yield isOffsetParentVisible(highlighter)), data.isOffsetParentVisible, + "The offset-parent highlighter visibility is correct for node " + data.selector); + is((yield isCurrentNodeVisible(highlighter)), data.isCurrentNodeVisible, + "The current-node highlighter visibility is correct for node " + data.selector); + is((yield hasVisibleArrows(highlighter)), data.hasVisibleArrows, + "The arrows visibility is correct for node " + data.selector); + is((yield isSizeVisible(highlighter)), data.isSizeVisible, + "The size label visibility is correct for node " + data.selector); +} + +function* isOffsetParentVisible(highlighter) { + let hidden = yield getHighlighterNodeAttribute(highlighter, + ID + "offset-parent", "hidden"); + return !hidden; +} + +function* isCurrentNodeVisible(highlighter) { + let hidden = yield getHighlighterNodeAttribute(highlighter, + ID + "current-node", "hidden"); + return !hidden; +} + +function* hasVisibleArrows(highlighter) { + for (let side of ["top", "left", "bottom", "right"]) { + let hidden = yield getHighlighterNodeAttribute(highlighter, + ID + "arrow-" + side, "hidden"); + if (!hidden) { + return true; + } + } + return false; +} + +function* isSizeVisible(highlighter) { + let hidden = yield getHighlighterNodeAttribute(highlighter, + ID + "label-size", "hidden"); + return !hidden; +} diff --git a/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_01.html b/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_01.html new file mode 100644 index 000000000000..8ba164a31af9 --- /dev/null +++ b/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_01.html @@ -0,0 +1,90 @@ + + + + + geometry highlighter test page + + + +
+
+
+
+
+ +
+
+
+
+ +
+ + diff --git a/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_02.html b/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_02.html new file mode 100644 index 000000000000..4392c90427ba --- /dev/null +++ b/browser/devtools/inspector/test/doc_inspector_highlighter-geometry_02.html @@ -0,0 +1,120 @@ + + + + +

Positioning playground

+

A demo of various positioning schemes: http://dev.w3.org/csswg/css-position/#pos-sch.

+

absolute, static, fixed, relative, sticky

+ +

Absolute positioning

+
+ Absolute child with no relative parent +
+
+
+ Absolute child with a relative parent +
+
+ Absolute child with a relative parent, positioned from the bottom right +
+
+ Absolute child with a relative parent, with all 4 positions +
+
+ Absolute child with a relative parent, with negative positions +
+
+ Absolute child with a relative parent, size, margin +
+
+ +

Relative positioning

+
+
+ Relative child +
+
+
+ Relative inline child, across multiple lines +
+
+
+
+ Relative child, in a positioned parent +
+
+
+ +

Fixed positioning

+
+
+ Fixed child +
+
+ Fixed child, bottom right +
+
+ +

Static positioning

+
+
+ Static child with no width/height +
+
+ Static child with width/height +
+
+ + \ No newline at end of file