browser_rules_edit-property-click.js (2736B)
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 the property name and value editors can be triggered when 7 // clicking on the property-name, the property-value, the colon or semicolon. 8 9 const TEST_URI = ` 10 <style type='text/css'> 11 #testid { 12 margin: 0; 13 } 14 </style> 15 <div id='testid'>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("#testid", inspector); 22 await testEditPropertyAndCancel(inspector, view); 23 }); 24 25 async function testEditPropertyAndCancel(inspector, view) { 26 const ruleEditor = getRuleViewRuleEditor(view, 1); 27 const propEditor = getTextProperty(view, 1, { margin: "0" }).editor; 28 29 info("Test editor is created when clicking on property name"); 30 await focusEditableField(view, propEditor.nameSpan); 31 ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name"); 32 await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]); 33 34 info("Test editor is created when clicking on ':' next to property name"); 35 const nameRect = propEditor.nameSpan.getBoundingClientRect(); 36 await focusEditableField(view, propEditor.nameSpan, nameRect.width + 1); 37 ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name"); 38 await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]); 39 40 info("Test editor is created when clicking on property value"); 41 await focusEditableField(view, propEditor.valueSpan); 42 ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value"); 43 // When cancelling a value edition, the text-property-editor will trigger 44 // a modification to make sure the property is back to its original value 45 // => need to wait on "ruleview-changed" to avoid unhandled promises 46 let onRuleviewChanged = view.once("ruleview-changed"); 47 await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]); 48 await onRuleviewChanged; 49 50 info("Test editor is created when clicking on ';' next to property value"); 51 const valueRect = propEditor.valueSpan.getBoundingClientRect(); 52 await focusEditableField(view, propEditor.valueSpan, valueRect.width + 1); 53 ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value"); 54 // When cancelling a value edition, the text-property-editor will trigger 55 // a modification to make sure the property is back to its original value 56 // => need to wait on "ruleview-changed" to avoid unhandled promises 57 onRuleviewChanged = view.once("ruleview-changed"); 58 await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]); 59 await onRuleviewChanged; 60 }