browser_rules_edit-selector_01.js (1986B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Testing selector inplace-editor behaviors in the rule-view 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 .testclass { 11 text-align: center; 12 } 13 </style> 14 <div id="testid" class="testclass">Styled Node</div> 15 <span>This is a span</span> 16 `; 17 18 add_task(async function () { 19 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 20 const { inspector, view } = await openRuleView(); 21 22 info("Selecting the test element"); 23 await selectNode("#testid", inspector); 24 await testEditSelector(view, "span"); 25 26 info("Selecting the modified element with the new rule"); 27 await selectNode("span", inspector); 28 await checkModifiedElement(view, "span"); 29 }); 30 31 async function testEditSelector(view, name) { 32 info("Test editing existing selector fields"); 33 34 const idRuleEditor = getRuleViewRuleEditor(view, 1); 35 36 info("Focusing an existing selector name in the rule-view"); 37 const editor = await focusEditableField(view, idRuleEditor.selectorText); 38 39 is( 40 inplaceEditor(idRuleEditor.selectorText), 41 editor, 42 "The selector editor got focused" 43 ); 44 45 info("Entering a new selector name and committing"); 46 editor.input.value = name; 47 48 info("Waiting for rule view to update"); 49 const onRuleViewChanged = once(view, "ruleview-changed"); 50 51 info("Entering the commit key"); 52 EventUtils.synthesizeKey("KEY_Enter"); 53 await onRuleViewChanged; 54 55 is(view._elementStyle.rules.length, 2, "Should have 2 rules."); 56 ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists."); 57 ok( 58 getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"), 59 "Rule with " + name + " does not match the current element." 60 ); 61 } 62 63 function checkModifiedElement(view, name) { 64 is(view._elementStyle.rules.length, 2, "Should have 2 rules."); 65 ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists."); 66 }