browser_rules_position-try.js (6561B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests that @position-try rules are displayed in a dedicated section. 7 8 const TEST_URI = `https://example.org/document-builder.sjs?html=${encodeURIComponent(` 9 <style> 10 .anchor { 11 anchor-name: --test-anchor; 12 } 13 14 .anchored { 15 position: fixed; 16 position-anchor: --test-anchor; 17 color: peachpuff; 18 } 19 20 .no-at-position-try { 21 position-try: top; 22 } 23 24 .unknown-at-position-try { 25 position-try: top, --unknown; 26 } 27 28 .single-at-position-try { 29 position-try: bottom, --custom-bottom; 30 } 31 32 .multiple-at-position-try { 33 position-try: left, --custom-right,--custom-bottom; 34 } 35 36 @position-try --custom-bottom { 37 top: anchor(bottom); 38 color: gold; 39 } 40 41 @position-try --custom-right { 42 top: anchor(bottom); 43 left: anchor(right); 44 left: 10px !important; 45 color: tomato; 46 --m: 10px; 47 } 48 </style> 49 <main> 50 <div class=anchor>⚓️</div> 51 <span class="anchored no-at-position-try"></span> 52 <span class="anchored unknown-at-position-try"></span> 53 <span class="anchored single-at-position-try"></span> 54 <span class="anchored multiple-at-position-try"></span> 55 </main> 56 `)}`; 57 58 add_task(async function () { 59 await pushPref("layout.css.anchor-positioning.enabled", true); 60 await addTab(TEST_URI); 61 const { inspector, view } = await openRuleView(); 62 63 info( 64 "Check that the @property-try section isn't displayed if the at-rules are not used in the position-try declaration" 65 ); 66 await selectNode(".anchored.no-at-position-try", inspector); 67 68 const anchoredClassRuleItem = { 69 selector: ".anchored", 70 declarations: [ 71 { name: "position", value: "fixed" }, 72 { name: "position-anchor", value: "--test-anchor" }, 73 { name: "color", value: "peachpuff" }, 74 ], 75 }; 76 77 await checkRuleViewContent(view, [ 78 { 79 selector: "element", 80 selectorEditable: false, 81 declarations: [], 82 }, 83 { 84 selector: ".no-at-position-try", 85 declarations: [{ name: "position-try", value: "top" }], 86 }, 87 anchoredClassRuleItem, 88 ]); 89 90 info( 91 "Check that the @property-try section isn't displayed if the the position-try value " + 92 "refers to an unknown dashed ident" 93 ); 94 await selectNode(".anchored.unknown-at-position-try", inspector); 95 await checkRuleViewContent(view, [ 96 { 97 selector: "element", 98 selectorEditable: false, 99 declarations: [], 100 }, 101 { 102 selector: ".unknown-at-position-try", 103 declarations: [{ name: "position-try", value: "top, --unknown" }], 104 }, 105 anchoredClassRuleItem, 106 ]); 107 108 info( 109 "Check that the @property-try section is displayed and has expected content if a" + 110 "dashed ident is used in the position-try declaration" 111 ); 112 await selectNode(".anchored.single-at-position-try", inspector); 113 await checkRuleViewContent(view, [ 114 { 115 selector: "element", 116 selectorEditable: false, 117 declarations: [], 118 }, 119 { 120 selector: ".single-at-position-try", 121 declarations: [ 122 { name: "position-try", value: "bottom, --custom-bottom" }, 123 ], 124 }, 125 anchoredClassRuleItem, 126 { 127 header: `@position-try`, 128 }, 129 { 130 selector: "--custom-bottom", 131 selectorEditable: false, 132 hasSelectorHighlighterButton: false, 133 declarations: [ 134 { name: "top", value: "anchor(bottom)" }, 135 // we have this here to make sure it's not marked as overridden / does not override 136 // color declaration for regular rules. 137 { name: "color", value: "gold", inactiveCSS: true }, 138 ], 139 }, 140 ]); 141 142 info( 143 "Check that the @property-try section is displayed and has expected content if multiple " + 144 "dashed-ident are used in the position-try declaration" 145 ); 146 await selectNode(".anchored.multiple-at-position-try", inspector); 147 await checkRuleViewContent(view, [ 148 { 149 selector: "element", 150 selectorEditable: false, 151 declarations: [], 152 }, 153 { 154 selector: ".multiple-at-position-try", 155 declarations: [ 156 { name: "position-try", value: "left, --custom-right,--custom-bottom" }, 157 ], 158 }, 159 anchoredClassRuleItem, 160 { 161 header: `@position-try`, 162 }, 163 { 164 selector: "--custom-bottom", 165 selectorEditable: false, 166 hasSelectorHighlighterButton: false, 167 declarations: [ 168 { name: "top", value: "anchor(bottom)" }, 169 // we have this here to make sure it's not marked as overridden / does not override 170 // color declaration for regular rules. 171 { name: "color", value: "gold", inactiveCSS: true }, 172 ], 173 }, 174 { 175 selector: "--custom-right", 176 selectorEditable: false, 177 hasSelectorHighlighterButton: false, 178 declarations: [ 179 { name: "top", value: "anchor(bottom)" }, 180 { name: "left", value: "anchor(right)" }, 181 { name: "left", value: "10px !important", valid: false }, 182 // we have this here to make sure it's not marked as overridden / does not override 183 // color declaration for regular rules. 184 { name: "color", value: "tomato", inactiveCSS: true }, 185 { name: "--m", value: "10px", inactiveCSS: true }, 186 ], 187 }, 188 ]); 189 190 info("Check that we can filter on the @position-try name"); 191 await setSearchFilter(view, "--custom-r"); 192 193 await checkRuleViewContent(view, [ 194 { 195 selector: "element", 196 selectorEditable: false, 197 declarations: [], 198 }, 199 { 200 selector: ".multiple-at-position-try", 201 declarations: [ 202 { 203 name: "position-try", 204 value: "left, --custom-right,--custom-bottom", 205 highlighted: true, 206 }, 207 ], 208 }, 209 { 210 header: `@position-try`, 211 }, 212 { 213 selector: "--custom-right", 214 selectorEditable: false, 215 hasSelectorHighlighterButton: false, 216 declarations: [ 217 { name: "top", value: "anchor(bottom)" }, 218 { name: "left", value: "anchor(right)" }, 219 { name: "left", value: "10px !important", valid: false }, 220 { name: "color", value: "tomato", inactiveCSS: true }, 221 { name: "--m", value: "10px", inactiveCSS: true }, 222 ], 223 }, 224 ]); 225 226 // TODO: At the moment we display @position-try rules as read-only, but as part of 227 // Bug 2004046, we should assert that adding modifying/adding declaration propagates the change 228 // stylesheet as expected, and that the declarations of the rules are properly updated. 229 });