browser_rules_edit-selector_05.js (2337B)
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 adding a new property of an unmatched rule works properly. 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 #testid { 11 } 12 .testclass { 13 background-color: white; 14 } 15 </style> 16 <div id="testid">Styled Node</div> 17 <span class="testclass">This is a span</span> 18 `; 19 20 add_task(async function () { 21 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 22 const { inspector, view } = await openRuleView(); 23 24 info("Selecting the test element"); 25 await selectNode("#testid", inspector); 26 await testEditSelector(view, "span"); 27 await testAddProperty(view); 28 29 info("Selecting the modified element with the new rule"); 30 await selectNode("span", inspector); 31 await checkModifiedElement(view, "span"); 32 }); 33 34 async function testEditSelector(view, name) { 35 info("Test editing existing selector fields"); 36 37 const ruleEditor = getRuleViewRuleEditor(view, 1); 38 39 info("Focusing an existing selector name in the rule-view"); 40 const editor = await focusEditableField(view, ruleEditor.selectorText); 41 42 is( 43 inplaceEditor(ruleEditor.selectorText), 44 editor, 45 "The selector editor got focused" 46 ); 47 48 info("Entering a new selector name and committing"); 49 editor.input.value = name; 50 51 info("Waiting for rule view to update"); 52 const onRuleViewChanged = once(view, "ruleview-changed"); 53 54 info("Entering the commit key"); 55 EventUtils.synthesizeKey("KEY_Enter"); 56 await onRuleViewChanged; 57 58 is(view._elementStyle.rules.length, 2, "Should have 2 rules."); 59 ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists."); 60 ok( 61 getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"), 62 "Rule with " + name + " does not match the current element." 63 ); 64 } 65 66 function checkModifiedElement(view, name) { 67 is(view._elementStyle.rules.length, 3, "Should have 3 rules."); 68 ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists."); 69 } 70 71 async function testAddProperty(view) { 72 info("Test creating a new property"); 73 const textProp = await addProperty(view, 1, "text-align", "center"); 74 75 is(textProp.value, "center", "Text prop should have been changed."); 76 ok(!textProp.overridden, "Property should not be overridden"); 77 }