browser_rules_nested_rules.js (4205B)
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 when the page uses nested CSS rules 7 const TEST_URI = ` 8 <style type="text/css"> 9 body { 10 background: tomato; 11 container-type: inline-size; 12 13 @media screen { 14 container-name: main; 15 16 & h1 { 17 border-color: gold; 18 19 .foo { 20 color: white; 21 } 22 23 #bar { 24 text-decoration: underline; 25 } 26 27 @container main (width > 10px) { 28 & + nav { 29 border: 1px solid; 30 31 [href] { 32 background-color: lightgreen; 33 } 34 } 35 } 36 } 37 } 38 39 border-color: blanchedalmond; 40 } 41 </style> 42 <h1>Hello <i class="foo">nested</i> <em id="bar">rules</em>!</h1> 43 <nav> 44 <ul> 45 <li><a href="#">Leaf</a></li> 46 <li><a>Nowhere</a></li> 47 </ul> 48 </nav> 49 `; 50 51 add_task(async function () { 52 await addTab( 53 "https://example.com/document-builder.sjs?html=" + 54 encodeURIComponent(TEST_URI) 55 ); 56 const { inspector, view } = await openRuleView(); 57 58 await selectNode("body", inspector); 59 checkRuleViewContent(view, [ 60 { 61 selector: "element", 62 selectorEditable: false, 63 ancestorRulesData: null, 64 declarations: [], 65 }, 66 { 67 selector: "", 68 ancestorRulesData: [`body {`], 69 declarations: [{ name: "border-color", value: "blanchedalmond" }], 70 }, 71 { 72 selector: ``, 73 // prettier-ignore 74 ancestorRulesData: [ 75 `body {`, 76 ` @media screen {` 77 ], 78 declarations: [{ name: "container-name", value: "main" }], 79 }, 80 { 81 selector: `body`, 82 ancestorRulesData: null, 83 declarations: [ 84 { name: "background", value: "tomato" }, 85 { name: "container-type", value: "inline-size" }, 86 ], 87 }, 88 ]); 89 90 await selectNode("h1", inspector); 91 checkRuleViewContent(view, [ 92 { 93 selector: "element", 94 selectorEditable: false, 95 ancestorRulesData: null, 96 declarations: [], 97 }, 98 { 99 selector: `& h1`, 100 // prettier-ignore 101 ancestorRulesData: [ 102 `body {`, 103 ` @media screen {` 104 ], 105 declarations: [{ name: "border-color", value: "gold" }], 106 }, 107 ]); 108 109 await selectNode("h1 > .foo", inspector); 110 checkRuleViewContent(view, [ 111 { 112 selector: "element", 113 selectorEditable: false, 114 ancestorRulesData: null, 115 declarations: [], 116 }, 117 { 118 selector: `& .foo`, 119 // prettier-ignore 120 ancestorRulesData: [ 121 `body {`, 122 ` @media screen {`, 123 ` & h1 {` 124 ], 125 declarations: [{ name: "color", value: "white" }], 126 }, 127 ]); 128 129 await selectNode("h1 > #bar", inspector); 130 checkRuleViewContent(view, [ 131 { 132 selector: "element", 133 selectorEditable: false, 134 ancestorRulesData: null, 135 declarations: [], 136 }, 137 { 138 selector: `& #bar`, 139 // prettier-ignore 140 ancestorRulesData: [ 141 `body {`, 142 ` @media screen {`, 143 ` & h1 {` 144 ], 145 declarations: [{ name: "text-decoration", value: "underline" }], 146 }, 147 ]); 148 149 await selectNode("nav", inspector); 150 checkRuleViewContent(view, [ 151 { 152 selector: "element", 153 selectorEditable: false, 154 ancestorRulesData: null, 155 declarations: [], 156 }, 157 { 158 selector: `& + nav`, 159 ancestorRulesData: [ 160 `body {`, 161 ` @media screen {`, 162 ` & h1 {`, 163 ` @container main (width > 10px) {`, 164 ], 165 declarations: [{ name: "border", value: "1px solid" }], 166 }, 167 ]); 168 169 await selectNode("nav a", inspector); 170 checkRuleViewContent(view, [ 171 { 172 selector: "element", 173 selectorEditable: false, 174 ancestorRulesData: null, 175 declarations: [], 176 }, 177 { 178 selector: `& [href]`, 179 ancestorRulesData: [ 180 `body {`, 181 ` @media screen {`, 182 ` & h1 {`, 183 ` @container main (width > 10px) {`, 184 ` & + nav {`, 185 ], 186 declarations: [{ name: "background-color", value: "lightgreen" }], 187 }, 188 ]); 189 });