browser_rules_add-rule.js (2728B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests adding a new rule using the add rule button. 7 8 const TEST_URI = ` 9 <style> 10 .testclass { 11 text-align: center; 12 13 &::after { 14 content: "-"; 15 } 16 } 17 </style> 18 <div id="testid" class="testclass">Styled Node</div> 19 <span class="testclass2">This is a span</span> 20 <span class="class1 class2">Multiple classes</span> 21 <span class="class3 class4">Multiple classes</span> 22 <p>Empty<p> 23 <h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1> 24 <h2 id="asd@@@a!!2a">Invalid characters in id</h2> 25 <svg viewBox="0 0 10 10"> 26 <circle cx="5" cy="5" r="5" fill="blue"></circle> 27 </svg> 28 <footer>Footer</footer> 29 `; 30 31 const TEST_DATA = [ 32 { node: "#testid", expected: "#testid", expectedIndex: 4 }, 33 { node: ".testclass2", expected: ".testclass2" }, 34 { node: ".class1.class2", expected: ".class1.class2" }, 35 { node: ".class3.class4", expected: ".class3.class4" }, 36 { node: "p", expected: "p" }, 37 { node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" }, 38 { node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" }, 39 { node: "circle", expected: "circle" }, 40 ]; 41 42 add_task(async function () { 43 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 44 const { inspector, view } = await openRuleView(); 45 46 for (const data of TEST_DATA) { 47 const { node, expected, expectedIndex = 1 } = data; 48 await selectNode(node, inspector); 49 await addNewRuleAndDismissEditor(inspector, view, expected, expectedIndex); 50 } 51 52 info("Check that we can add rule for pseudo element node"); 53 const testidNodeFront = await getNodeFront("#testid", inspector); 54 const testidNodeFrontChildren = 55 await inspector.walker.children(testidNodeFront); 56 const afterNodeFront = testidNodeFrontChildren.nodes.at(-1); 57 await selectNode(afterNodeFront, inspector); 58 // sanity check 59 is( 60 inspector.selection.nodeFront.displayName, 61 "::after", 62 "We selected the ::after pseudo element" 63 ); 64 await addNewRuleAndDismissEditor(inspector, view, "#testid::after", 0); 65 66 info(`Check that clicking the "Add Rule" button clears the filter`); 67 await selectNode("footer", inspector); 68 is( 69 view.element.children.length, 70 1, 71 "footer only has 1 rule before clicking on the button." 72 ); 73 await setSearchFilter(view, "thereisnomatch"); 74 const onRuleViewFiltered = view.inspector.once("ruleview-filtered"); 75 await addNewRuleAndDismissEditor(inspector, view, "footer", 1); 76 await onRuleViewFiltered; 77 is(view.searchField.value, "", "Search filter was cleared."); 78 is(view.element.children.length, 2, "A new rule was added"); 79 });