browser_inspector_highlighter-options.js (8499B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 // Check that the box-model highlighter supports configuration options 8 9 const TEST_URL = ` 10 <body style="padding:2em;"> 11 <div style="width:100px;height:100px;padding:2em; 12 border:.5em solid black;margin:1em;">test</div> 13 </body> 14 `; 15 16 // Test data format: 17 // - desc: a string that will be output to the console. 18 // - options: json object to be passed as options to the highlighter. 19 // - checkHighlighter: a generator (async) function that should check the 20 // highlighter is correct. 21 const TEST_DATA = [ 22 { 23 desc: "Guides and infobar should be shown by default", 24 options: {}, 25 async checkHighlighter(highlighterTestFront) { 26 let hidden = await highlighterTestFront.getHighlighterNodeAttribute( 27 "box-model-infobar-container", 28 "hidden" 29 ); 30 ok(!hidden, "Node infobar is visible"); 31 32 hidden = await highlighterTestFront.getHighlighterNodeAttribute( 33 "box-model-elements", 34 "hidden" 35 ); 36 ok(!hidden, "SVG container is visible"); 37 38 for (const side of ["top", "right", "bottom", "left"]) { 39 hidden = await highlighterTestFront.getHighlighterNodeAttribute( 40 "box-model-guide-" + side, 41 "hidden" 42 ); 43 ok(!hidden, side + " guide is visible"); 44 } 45 }, 46 }, 47 { 48 desc: "All regions should be shown by default", 49 options: {}, 50 async checkHighlighter(highlighterTestFront) { 51 for (const region of ["margin", "border", "padding", "content"]) { 52 const { d } = 53 await highlighterTestFront.getHighlighterRegionPath(region); 54 ok(d, "Region " + region + " has set coordinates"); 55 } 56 }, 57 }, 58 { 59 desc: "Guides can be hidden", 60 options: { hideGuides: true }, 61 async checkHighlighter(highlighterTestFront) { 62 for (const side of ["top", "right", "bottom", "left"]) { 63 const hidden = await highlighterTestFront.getHighlighterNodeAttribute( 64 "box-model-guide-" + side, 65 "hidden" 66 ); 67 is(hidden, "true", side + " guide has been hidden"); 68 } 69 }, 70 }, 71 { 72 desc: "Infobar can be hidden", 73 options: { hideInfoBar: true }, 74 async checkHighlighter(highlighterTestFront) { 75 const hidden = await highlighterTestFront.getHighlighterNodeAttribute( 76 "box-model-infobar-container", 77 "hidden" 78 ); 79 is(hidden, "true", "infobar has been hidden"); 80 }, 81 }, 82 { 83 desc: "One region only can be shown (1)", 84 options: { showOnly: "content" }, 85 async checkHighlighter(highlighterTestFront) { 86 let { d } = await highlighterTestFront.getHighlighterRegionPath("margin"); 87 ok(!d, "margin region is hidden"); 88 89 ({ d } = await highlighterTestFront.getHighlighterRegionPath("border")); 90 ok(!d, "border region is hidden"); 91 92 ({ d } = await highlighterTestFront.getHighlighterRegionPath("padding")); 93 ok(!d, "padding region is hidden"); 94 95 ({ d } = await highlighterTestFront.getHighlighterRegionPath("content")); 96 ok(d, "content region is shown"); 97 }, 98 }, 99 { 100 desc: "One region only can be shown (2)", 101 options: { showOnly: "margin" }, 102 async checkHighlighter(highlighterTestFront) { 103 let { d } = await highlighterTestFront.getHighlighterRegionPath("margin"); 104 ok(d, "margin region is shown"); 105 106 ({ d } = await highlighterTestFront.getHighlighterRegionPath("border")); 107 ok(!d, "border region is hidden"); 108 109 ({ d } = await highlighterTestFront.getHighlighterRegionPath("padding")); 110 ok(!d, "padding region is hidden"); 111 112 ({ d } = await highlighterTestFront.getHighlighterRegionPath("content")); 113 ok(!d, "content region is hidden"); 114 }, 115 }, 116 { 117 desc: "Guides can be drawn around a given region (1)", 118 options: { region: "padding" }, 119 async checkHighlighter(highlighterTestFront) { 120 const topY1 = await highlighterTestFront.getHighlighterNodeAttribute( 121 "box-model-guide-top", 122 "y1" 123 ); 124 const rightX1 = await highlighterTestFront.getHighlighterNodeAttribute( 125 "box-model-guide-right", 126 "x1" 127 ); 128 const bottomY1 = await highlighterTestFront.getHighlighterNodeAttribute( 129 "box-model-guide-bottom", 130 "y1" 131 ); 132 const leftX1 = await highlighterTestFront.getHighlighterNodeAttribute( 133 "box-model-guide-left", 134 "x1" 135 ); 136 137 let { points } = 138 await highlighterTestFront.getHighlighterRegionPath("padding"); 139 points = points[0]; 140 141 is(topY1, points[0][1], "Top guide's y1 is correct"); 142 is( 143 parseInt(rightX1, 10), 144 points[1][0] - 1, 145 "Right guide's x1 is correct" 146 ); 147 is( 148 parseInt(bottomY1, 10), 149 points[2][1] - 1, 150 "Bottom guide's y1 is correct" 151 ); 152 is(leftX1, points[3][0], "Left guide's x1 is correct"); 153 }, 154 }, 155 { 156 desc: "Guides can be drawn around a given region (2)", 157 options: { region: "margin" }, 158 async checkHighlighter(highlighterTestFront) { 159 const topY1 = await highlighterTestFront.getHighlighterNodeAttribute( 160 "box-model-guide-top", 161 "y1" 162 ); 163 const rightX1 = await highlighterTestFront.getHighlighterNodeAttribute( 164 "box-model-guide-right", 165 "x1" 166 ); 167 const bottomY1 = await highlighterTestFront.getHighlighterNodeAttribute( 168 "box-model-guide-bottom", 169 "y1" 170 ); 171 const leftX1 = await highlighterTestFront.getHighlighterNodeAttribute( 172 "box-model-guide-left", 173 "x1" 174 ); 175 176 let { points } = 177 await highlighterTestFront.getHighlighterRegionPath("margin"); 178 points = points[0]; 179 180 is(topY1, points[0][1], "Top guide's y1 is correct"); 181 is( 182 parseInt(rightX1, 10), 183 points[1][0] - 1, 184 "Right guide's x1 is correct" 185 ); 186 is( 187 parseInt(bottomY1, 10), 188 points[2][1] - 1, 189 "Bottom guide's y1 is correct" 190 ); 191 is(leftX1, points[3][0], "Left guide's x1 is correct"); 192 }, 193 }, 194 { 195 desc: "When showOnly is used, other regions can be faded", 196 options: { showOnly: "margin", onlyRegionArea: true }, 197 async checkHighlighter(highlighterTestFront) { 198 for (const region of ["margin", "border", "padding", "content"]) { 199 const { d } = 200 await highlighterTestFront.getHighlighterRegionPath(region); 201 ok(d, "Region " + region + " is shown (it has a d attribute)"); 202 203 const faded = await highlighterTestFront.getHighlighterNodeAttribute( 204 "box-model-" + region, 205 "faded" 206 ); 207 if (region === "margin") { 208 ok(!faded, "The margin region is not faded"); 209 } else { 210 is(faded, "true", "Region " + region + " is faded"); 211 } 212 } 213 }, 214 }, 215 { 216 desc: "When showOnly is used, other regions can be faded (2)", 217 options: { showOnly: "padding", onlyRegionArea: true }, 218 async checkHighlighter(highlighterTestFront) { 219 for (const region of ["margin", "border", "padding", "content"]) { 220 const { d } = 221 await highlighterTestFront.getHighlighterRegionPath(region); 222 ok(d, "Region " + region + " is shown (it has a d attribute)"); 223 224 const faded = await highlighterTestFront.getHighlighterNodeAttribute( 225 "box-model-" + region, 226 "faded" 227 ); 228 if (region === "padding") { 229 ok(!faded, "The padding region is not faded"); 230 } else { 231 is(faded, "true", "Region " + region + " is faded"); 232 } 233 } 234 }, 235 }, 236 ]; 237 238 add_task(async function () { 239 const { inspector, highlighterTestFront } = await openInspectorForURL( 240 "data:text/html;charset=utf-8," + encodeURI(TEST_URL) 241 ); 242 243 const divFront = await getNodeFront("div", inspector); 244 245 for (const { desc, options, checkHighlighter } of TEST_DATA) { 246 info("Running test: " + desc); 247 248 info("Show the box-model highlighter with options " + options); 249 await inspector.highlighters.showHighlighterTypeForNode( 250 inspector.highlighters.TYPES.BOXMODEL, 251 divFront, 252 options 253 ); 254 255 await checkHighlighter(highlighterTestFront); 256 257 info("Hide the box-model highlighter"); 258 await inspector.highlighters.hideHighlighterType( 259 inspector.highlighters.TYPES.BOXMODEL 260 ); 261 } 262 });