browser_rules_at_scope.js (5334B)
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 properly handles @scope rules. 7 8 const TEST_URI = ` 9 <link href="${URL_ROOT_COM_SSL}doc_at_scope.css" rel="stylesheet"> 10 <h1>Hello @scope!</h1> 11 <main> 12 <style> 13 @scope { 14 :scope, [data-test="scoped-inline-style"] { 15 border: 1px solid aqua; 16 } 17 18 div, [data-test="scoped-inline-style"] { 19 background: tomato; 20 } 21 22 /* test nested @scope */ 23 @scope (:scope section) { 24 :scope, [data-test="nested-scoped-inline-style"] { 25 background: gold; 26 color: tomato; 27 color: green; 28 } 29 } 30 } 31 </style> 32 <div id=a> 33 inline-style scope target 34 <section id="a-child">inline-style nested scope target</section> 35 </div> 36 </main> 37 <aside> 38 <div id=b> 39 <span>Dough</span> 40 <div id=c class="limit"> 41 <span>Donut hole</span> 42 </div> 43 </div> 44 </aside> 45 `; 46 47 add_task(async function () { 48 await pushPref("layout.css.at-scope.enabled", true); 49 await addTab( 50 "https://example.com/document-builder.sjs?html=" + 51 encodeURIComponent(TEST_URI) 52 ); 53 const { inspector, view } = await openRuleView(); 54 await selectNode("main", inspector); 55 await checkRuleViewContent(view, [ 56 { 57 selector: `element`, 58 ancestorRulesData: null, 59 selectorEditable: false, 60 declarations: [], 61 }, 62 { 63 selector: `:scope, ~~[data-test="scoped-inline-style"]~~`, 64 ancestorRulesData: ["@scope {"], 65 declarations: [{ name: "border", value: "1px solid aqua" }], 66 }, 67 ]); 68 69 await selectNode("main #a", inspector); 70 await checkRuleViewContent(view, [ 71 { 72 selector: `element`, 73 ancestorRulesData: null, 74 selectorEditable: false, 75 declarations: [], 76 }, 77 { 78 selector: `div, ~~[data-test="scoped-inline-style"]~~`, 79 ancestorRulesData: ["@scope {"], 80 declarations: [{ name: "background", value: "tomato" }], 81 }, 82 ]); 83 84 await selectNode("main #a #a-child", inspector); 85 await checkRuleViewContent(view, [ 86 { 87 selector: `element`, 88 ancestorRulesData: null, 89 selectorEditable: false, 90 declarations: [], 91 }, 92 { 93 selector: `:scope, ~~[data-test="nested-scoped-inline-style"]~~`, 94 ancestorRulesData: ["@scope {", " @scope (:scope section) {"], 95 declarations: [ 96 { name: "background", value: "gold" }, 97 { name: "color", value: "tomato", overridden: true }, 98 { name: "color", value: "green" }, 99 ], 100 }, 101 ]); 102 103 await selectNode("aside #b", inspector); 104 await checkRuleViewContent(view, [ 105 { 106 selector: `element`, 107 ancestorRulesData: null, 108 selectorEditable: false, 109 declarations: [], 110 }, 111 { 112 selector: `div, ~~[data-test="start-and-end-inherit"]~~`, 113 ancestorRulesData: ["@scope (aside) to (.limit) {"], 114 declarations: [{ name: "color", value: "salmon" }], 115 }, 116 { 117 selector: `div, ~~[data-test="start-and-end"]~~`, 118 ancestorRulesData: ["@scope (aside) to (.limit) {"], 119 declarations: [{ name: "outline", value: "2px solid gold" }], 120 }, 121 { 122 selector: `div, ~~[data-test="start-no-end"]~~`, 123 ancestorRulesData: ["@scope (aside) {"], 124 declarations: [{ name: "box-shadow", value: "60px -16px teal" }], 125 }, 126 ]); 127 128 await selectNode("aside #b > span", inspector); 129 await checkRuleViewContent(view, [ 130 { 131 selector: `element`, 132 ancestorRulesData: null, 133 selectorEditable: false, 134 declarations: [], 135 }, 136 { 137 selector: `& span`, 138 ancestorRulesData: [ 139 "@scope (aside) to (.limit) {", 140 ` div, [data-test="start-and-end"] {`, 141 ], 142 declarations: [{ name: "color", value: "cornflowerblue" }], 143 }, 144 { 145 header: "Inherited from div#b", 146 }, 147 { 148 selector: `div, ~~[data-test="start-and-end-inherit"]~~`, 149 ancestorRulesData: ["@scope (aside) to (.limit) {"], 150 inherited: true, 151 declarations: [{ name: "color", value: "salmon", overridden: true }], 152 }, 153 ]); 154 155 await selectNode("aside #c", inspector); 156 await checkRuleViewContent(view, [ 157 { 158 selector: `element`, 159 ancestorRulesData: null, 160 selectorEditable: false, 161 declarations: [], 162 }, 163 { 164 selector: `div, ~~[data-test="start-no-end"]~~`, 165 ancestorRulesData: ["@scope (aside) {"], 166 declarations: [{ name: "box-shadow", value: "60px -16px teal" }], 167 }, 168 { 169 header: "Inherited from div#b", 170 }, 171 { 172 selector: `div, ~~[data-test="start-and-end-inherit"]~~`, 173 ancestorRulesData: ["@scope (aside) to (.limit) {"], 174 inherited: true, 175 declarations: [{ name: "color", value: "salmon" }], 176 }, 177 ]); 178 179 await selectNode("aside #c > span", inspector); 180 await checkRuleViewContent(view, [ 181 { 182 selector: `element`, 183 ancestorRulesData: null, 184 selectorEditable: false, 185 declarations: [], 186 }, 187 { 188 header: "Inherited from div#b", 189 }, 190 { 191 selector: `div, ~~[data-test="start-and-end-inherit"]~~`, 192 ancestorRulesData: ["@scope (aside) to (.limit) {"], 193 inherited: true, 194 declarations: [{ name: "color", value: "salmon" }], 195 }, 196 ]); 197 });