browser_boxmodel_tooltips.js (4846B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test that the regions in the box model view have tooltips, and that individual 7 // values too. Also test that values that are set from a css rule have tooltips 8 // referencing the rule. 9 10 const TEST_URI = 11 "<style>" + 12 "#div1 { color: red; margin: 3em; }\n" + 13 "#div2 { border-bottom: 1px solid black; background: red; }\n" + 14 "html, body, #div3 { box-sizing: border-box; padding: 0 2em; }" + 15 "</style>" + 16 "<div id='div1'></div><div id='div2'></div><div id='div3'></div>"; 17 18 // Test data for the tooltips over individual values. 19 // Each entry should contain: 20 // - selector: The selector for the node to be selected before starting to test 21 // - values: An array containing objects for each of the values that are defined 22 // by css rules. Each entry should contain: 23 // - name: the name of the property that is set by the css rule 24 // - ruleSelector: the selector of the rule 25 // - styleSheetLocation: the fileName:lineNumber 26 const VALUES_TEST_DATA = [ 27 { 28 selector: "#div1", 29 values: [ 30 { 31 name: "margin-top", 32 ruleSelector: "#div1", 33 styleSheetLocation: "inline:1", 34 }, 35 { 36 name: "margin-right", 37 ruleSelector: "#div1", 38 styleSheetLocation: "inline:1", 39 }, 40 { 41 name: "margin-bottom", 42 ruleSelector: "#div1", 43 styleSheetLocation: "inline:1", 44 }, 45 { 46 name: "margin-left", 47 ruleSelector: "#div1", 48 styleSheetLocation: "inline:1", 49 }, 50 ], 51 }, 52 { 53 selector: "#div2", 54 values: [ 55 { 56 name: "border-bottom-width", 57 ruleSelector: "#div2", 58 styleSheetLocation: "inline:2", 59 }, 60 ], 61 }, 62 { 63 selector: "#div3", 64 values: [ 65 { 66 name: "padding-top", 67 ruleSelector: "html, body, #div3", 68 styleSheetLocation: "inline:3", 69 }, 70 { 71 name: "padding-right", 72 ruleSelector: "html, body, #div3", 73 styleSheetLocation: "inline:3", 74 }, 75 { 76 name: "padding-bottom", 77 ruleSelector: "html, body, #div3", 78 styleSheetLocation: "inline:3", 79 }, 80 { 81 name: "padding-left", 82 ruleSelector: "html, body, #div3", 83 styleSheetLocation: "inline:3", 84 }, 85 ], 86 }, 87 ]; 88 89 add_task(async function () { 90 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 91 const { inspector, boxmodel } = await openLayoutView(); 92 93 info("Checking the regions tooltips"); 94 95 ok( 96 boxmodel.document.querySelector(".boxmodel-margins").hasAttribute("title"), 97 "The margin region has a tooltip" 98 ); 99 is( 100 boxmodel.document.querySelector(".boxmodel-margins").getAttribute("title"), 101 "margin", 102 "The margin region has the correct tooltip content" 103 ); 104 105 ok( 106 boxmodel.document.querySelector(".boxmodel-borders").hasAttribute("title"), 107 "The border region has a tooltip" 108 ); 109 is( 110 boxmodel.document.querySelector(".boxmodel-borders").getAttribute("title"), 111 "border", 112 "The border region has the correct tooltip content" 113 ); 114 115 ok( 116 boxmodel.document.querySelector(".boxmodel-paddings").hasAttribute("title"), 117 "The padding region has a tooltip" 118 ); 119 is( 120 boxmodel.document.querySelector(".boxmodel-paddings").getAttribute("title"), 121 "padding", 122 "The padding region has the correct tooltip content" 123 ); 124 125 ok( 126 boxmodel.document.querySelector(".boxmodel-content").hasAttribute("title"), 127 "The content region has a tooltip" 128 ); 129 is( 130 boxmodel.document.querySelector(".boxmodel-content").getAttribute("title"), 131 "content", 132 "The content region has the correct tooltip content" 133 ); 134 135 for (const { selector, values } of VALUES_TEST_DATA) { 136 info("Selecting " + selector + " and checking the values tooltips"); 137 await selectNode(selector, inspector); 138 139 info("Iterate over all values"); 140 for (const key in boxmodel.map) { 141 if (key === "position") { 142 continue; 143 } 144 145 const name = boxmodel.map[key].property; 146 const expectedTooltipData = values.find(o => o.name === name); 147 const el = boxmodel.document.querySelector(boxmodel.map[key].selector); 148 149 ok(el.hasAttribute("title"), "The " + name + " value has a tooltip"); 150 151 if (expectedTooltipData) { 152 info("The " + name + " value comes from a css rule"); 153 const expectedTooltip = 154 name + 155 "\n" + 156 expectedTooltipData.ruleSelector + 157 "\n" + 158 expectedTooltipData.styleSheetLocation; 159 is(el.getAttribute("title"), expectedTooltip, "The tooltip is correct"); 160 } else { 161 info("The " + name + " isn't set by a css rule"); 162 is(el.getAttribute("title"), name, "The tooltip is correct"); 163 } 164 } 165 } 166 });