browser_rules_content_01.js (4852B)
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 rule-view content is correct 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 @media screen and (min-width: 10px) { 11 #testid { 12 background-color: blue; 13 } 14 } 15 .testclass, .unmatched { 16 background-color: green; 17 } 18 19 main { 20 container-type: inline-size; 21 22 & > .foo, .unmatched { 23 color: tomato; 24 25 @container (0px < width) { 26 background: gold; 27 } 28 } 29 } 30 31 #specific, 32 #specific.test, 33 aside#specific.test, 34 body#bdy aside#specific.test, 35 aside#specific.test:is(.this,.that) {} 36 </style> 37 <body id="bdy"> 38 <div id="testid" class="testclass">Styled Node</div> 39 <main> 40 <div class="foo">Styled Node in Nested rule</div> 41 </main> 42 <aside id=specific class="test">Test with multiple selectors</div> 43 </body> 44 `; 45 46 add_task(async function () { 47 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 48 const { inspector, view } = await openRuleView(); 49 50 await selectNode("#testid", inspector); 51 is( 52 view.element.querySelectorAll("#ruleview-no-results").length, 53 0, 54 "After a highlight, no longer has a no-results element." 55 ); 56 57 await clearCurrentNodeSelection(inspector); 58 is( 59 view.element.querySelectorAll("#ruleview-no-results").length, 60 1, 61 "After highlighting null, has a no-results element again." 62 ); 63 64 await selectNode("#testid", inspector); 65 66 let linkText = getRuleViewLinkTextByIndex(view, 1); 67 is(linkText, "inline:3", "link text at index 1 has expected content."); 68 69 const mediaText = getRuleViewAncestorRulesDataTextByIndex(view, 1); 70 is( 71 mediaText, 72 "@media screen and (min-width: 10px) {", 73 "media text at index 1 has expected content" 74 ); 75 76 linkText = getRuleViewLinkTextByIndex(view, 2); 77 is(linkText, "inline:7", "link text at index 2 has expected content."); 78 is( 79 getRuleViewAncestorRulesDataElementByIndex(view, 2), 80 null, 81 "There is no media text element for rule at index 2" 82 ); 83 84 assertSelectors(view, 2, [ 85 { 86 selector: ".testclass", 87 matches: true, 88 specificity: "(0,1,0)", 89 }, 90 { 91 selector: ".unmatched", 92 matches: false, 93 specificity: "(0,1,0)", 94 }, 95 ]); 96 97 info("Check nested rules"); 98 await selectNode(".foo", inspector); 99 100 assertSelectors(view, 0, []); 101 102 assertSelectors(view, 2, [ 103 { 104 selector: "& > .foo", 105 matches: true, 106 specificity: "(0,1,1)", 107 }, 108 { 109 selector: "& .unmatched", 110 matches: false, 111 specificity: "(0,1,1)", 112 }, 113 ]); 114 115 info("Check rule with multiple selectors and different specificites"); 116 await selectNode("#specific", inspector); 117 assertSelectors(view, 1, [ 118 { selector: "#specific", matches: true, specificity: "(1,0,0)" }, 119 { selector: "#specific.test", matches: true, specificity: "(1,1,0)" }, 120 { 121 selector: "aside#specific.test", 122 matches: true, 123 specificity: "(1,1,1)", 124 }, 125 { 126 selector: "body#bdy aside#specific.test", 127 matches: true, 128 specificity: "(2,1,2)", 129 }, 130 { 131 selector: "aside#specific.test:is(.this, .that)", 132 matches: false, 133 specificity: "(1,2,1)", 134 }, 135 ]); 136 }); 137 138 /** 139 * Returns the selector elements for a given rule index 140 * 141 * @param {Inspector} view 142 * @param {Integer} ruleIndex 143 * @param {Array<object>} expectedSelectors: 144 * An array of objects representing each selector. Objects have the following shape: 145 * - selector: The expected selector text 146 * - matches: True if the selector should have the "matching" class 147 */ 148 function assertSelectors(view, ruleIndex, expectedSelectors) { 149 const ruleSelectors = getRuleViewRuleEditor( 150 view, 151 ruleIndex 152 ).selectorText.querySelectorAll(".ruleview-selector"); 153 154 is( 155 ruleSelectors.length, 156 expectedSelectors.length, 157 `There are the expected number of selectors on rule #${ruleIndex}` 158 ); 159 160 for (let i = 0; i < expectedSelectors.length; i++) { 161 const ruleSelector = ruleSelectors[i]; 162 const expectedSelector = expectedSelectors[i]; 163 const selectorText = ruleSelector.textContent; 164 is( 165 selectorText, 166 expectedSelector.selector, 167 `Got expected text for the selector element #${i} on rule #${ruleIndex}` 168 ); 169 is( 170 [...ruleSelector.classList].join(","), 171 "ruleview-selector," + 172 (expectedSelector.matches ? "matched" : "unmatched"), 173 `Got expected css class on the selector element #${i} ("${selectorText}") on rule #${ruleIndex}` 174 ); 175 is( 176 ruleSelector.title, 177 `Specificity: ${expectedSelector.specificity}`, 178 `Got expected title with specificity on the selector element #${i} ("${selectorText}") on rule #${ruleIndex}` 179 ); 180 } 181 }