browser_rules_edit-selector_03.js (1513B)
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 with invalid 7 // selectors 8 9 const TEST_URI = ` 10 <style type="text/css"> 11 .testclass { 12 text-align: center; 13 } 14 </style> 15 <div class="testclass">Styled Node</div> 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 await selectNode(".testclass", inspector); 22 await testEditSelector(view, "asd@:::!"); 23 }); 24 25 async function testEditSelector(view, name) { 26 info("Test editing existing selector fields"); 27 28 const ruleEditor = getRuleViewRuleEditor(view, 1); 29 30 info("Focusing an existing selector name in the rule-view"); 31 const editor = await focusEditableField(view, ruleEditor.selectorText); 32 33 is( 34 inplaceEditor(ruleEditor.selectorText), 35 editor, 36 "The selector editor got focused" 37 ); 38 39 info("Entering a new selector name and committing"); 40 editor.input.value = name; 41 const onRuleViewChanged = once(view, "ruleview-invalid-selector"); 42 EventUtils.synthesizeKey("KEY_Enter"); 43 await onRuleViewChanged; 44 45 is(view._elementStyle.rules.length, 2, "Should have 2 rules."); 46 is( 47 getRuleViewRule(view, name), 48 undefined, 49 "Rule with " + name + " selector should not exist." 50 ); 51 ok( 52 getRuleViewRule(view, ".testclass"), 53 "Rule with .testclass selector exists." 54 ); 55 }