browser_rules_edit-selector-pseudo-element.js (5387B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Testing editing pseudo element selector in the rule view. 7 const TEST_URI = ` 8 <style> 9 h1::before { 10 content: "-"; 11 color: lime; 12 } 13 </style> 14 <h1 class=foo>pseudo</h1>`; 15 16 add_task(async function test_inline_sheet() { 17 // Avoid focusing the first declaration after editing the selector 18 await pushPref("devtools.inspector.rule-view.focusNextOnEnter", false); 19 20 await addTab( 21 `data:text/html,<meta charset=utf8>${encodeURIComponent(TEST_URI)}` 22 ); 23 const { inspector, view } = await openRuleView(); 24 25 info("Check that we can edit the selectors in the pseudo elements section"); 26 await selectNode("h1", inspector); 27 28 info("Expand pseudo elements section"); 29 const pseudoElementToggle = view.styleDocument.querySelector( 30 `[aria-controls="pseudo-elements-container"]` 31 ); 32 // sanity check 33 is( 34 pseudoElementToggle.ariaExpanded, 35 "false", 36 "pseudo element section is collapsed at first" 37 ); 38 pseudoElementToggle.click(); 39 is( 40 pseudoElementToggle.ariaExpanded, 41 "true", 42 "pseudo element section is now expanded" 43 ); 44 45 info(`Modify "h1::before" into ".foo::before"`); 46 let ruleEditor = getRuleViewRuleEditor(view, 1, 0); 47 let editor = await focusEditableField(view, ruleEditor.selectorText); 48 let onRuleViewChanged = view.once("ruleview-changed"); 49 editor.input.value = ".foo::before"; 50 EventUtils.synthesizeKey("KEY_Enter"); 51 await onRuleViewChanged; 52 53 // Get the new rule editor reference 54 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 55 is(ruleEditor.selectorText.textContent, ".foo::before"); 56 is( 57 ruleEditor.element.getAttribute("unmatched"), 58 "false", 59 "pseudo element rule still matches" 60 ); 61 62 info(`Modify ".foo::before" into ".foo::after"`); 63 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 64 editor = await focusEditableField(view, ruleEditor.selectorText); 65 onRuleViewChanged = view.once("ruleview-changed"); 66 editor.input.value = ".foo::after"; 67 EventUtils.synthesizeKey("KEY_Enter"); 68 await onRuleViewChanged; 69 70 // Get the new rule editor reference 71 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 72 is(ruleEditor.selectorText.textContent, ".foo::after"); 73 is( 74 ruleEditor.element.getAttribute("unmatched"), 75 "false", 76 "pseudo element rule still matches" 77 ); 78 79 info(`Modify ".foo::after" into unmatching "h2::after"`); 80 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 81 editor = await focusEditableField(view, ruleEditor.selectorText); 82 onRuleViewChanged = view.once("ruleview-changed"); 83 editor.input.value = "h2::after"; 84 EventUtils.synthesizeKey("KEY_Enter"); 85 await onRuleViewChanged; 86 87 // Get the new rule editor reference 88 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 89 is(ruleEditor.selectorText.textContent, "h2::after"); 90 is( 91 ruleEditor.element.getAttribute("unmatched"), 92 "true", 93 "pseudo element rule does not match h1 anymore" 94 ); 95 96 info(`Modify "h2::after" back into matching "h1::after"`); 97 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 98 editor = await focusEditableField(view, ruleEditor.selectorText); 99 onRuleViewChanged = view.once("ruleview-changed"); 100 editor.input.value = "h1::after"; 101 EventUtils.synthesizeKey("KEY_Enter"); 102 await onRuleViewChanged; 103 104 // Get the new rule editor reference 105 ruleEditor = getRuleViewRuleEditor(view, 1, 0); 106 is(ruleEditor.selectorText.textContent, "h1::after"); 107 is( 108 ruleEditor.element.getAttribute("unmatched"), 109 "false", 110 "pseudo element rule does match back the h1 node" 111 ); 112 113 info( 114 "Check that we can edit the selector when the pseudo element node is selected" 115 ); 116 const h1NodeFront = await getNodeFront("h1", inspector); 117 let h1NodeFrontChildren = await inspector.walker.children(h1NodeFront); 118 const h1AfterNodeFront = h1NodeFrontChildren.nodes.at(-1); 119 await selectNode(h1AfterNodeFront, inspector); 120 // sanity check 121 is( 122 inspector.selection.nodeFront.displayName, 123 "::after", 124 "We selected the ::after pseudo element" 125 ); 126 127 info(`Modify "h1::after" into ".foo::after"`); 128 ruleEditor = getRuleViewRuleEditor(view, 0); 129 editor = await focusEditableField(view, ruleEditor.selectorText); 130 onRuleViewChanged = view.once("ruleview-changed"); 131 editor.input.value = ".foo::after"; 132 EventUtils.synthesizeKey("KEY_Enter"); 133 info("waiting for <onRuleViewChanged>"); 134 await onRuleViewChanged; 135 136 // Get the new rule editor reference 137 ruleEditor = getRuleViewRuleEditor(view, 0); 138 is(ruleEditor.selectorText.textContent, ".foo::after"); 139 is( 140 ruleEditor.element.getAttribute("unmatched"), 141 "false", 142 "pseudo element rule still matches" 143 ); 144 145 info(`Modify ".foo::after" into "h2::after"`); 146 ruleEditor = getRuleViewRuleEditor(view, 0); 147 editor = await focusEditableField(view, ruleEditor.selectorText); 148 const onSelection = inspector.selection.once("new-node-front"); 149 editor.input.value = "h2::after"; 150 EventUtils.synthesizeKey("KEY_Enter"); 151 await onSelection; 152 is( 153 inspector.selection.nodeFront, 154 h1NodeFront, 155 "The parent node of the pseudo element was selected" 156 ); 157 h1NodeFrontChildren = await inspector.walker.children(h1NodeFront); 158 is( 159 h1NodeFrontChildren.nodes.find(child => child.displayName === "::after"), 160 undefined, 161 "The ::after pseudo element was removed" 162 ); 163 });