1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/browser/devtools/styleinspector/test/browser_ruleview_edit-property_02.js Wed Dec 31 06:09:35 2014 +0100 1.3 @@ -0,0 +1,108 @@ 1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ 1.5 +/* Any copyright is dedicated to the Public Domain. 1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */ 1.7 + 1.8 +"use strict"; 1.9 + 1.10 +// Test several types of rule-view property edition 1.11 + 1.12 +let test = asyncTest(function*() { 1.13 + yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js"); 1.14 + let {toolbox, inspector, view} = yield openRuleView(); 1.15 + 1.16 + info("Creating the test document"); 1.17 + let style = "" + 1.18 + "#testid {" + 1.19 + " background-color: blue;" + 1.20 + "}" + 1.21 + ".testclass, .unmatched {" + 1.22 + " background-color: green;" + 1.23 + "}"; 1.24 + let styleNode = addStyle(content.document, style); 1.25 + content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" + 1.26 + "<div id='testid2'>Styled Node</div>"; 1.27 + 1.28 + yield selectNode("#testid", inspector); 1.29 + yield testEditProperty(inspector, view); 1.30 + yield testDisableProperty(inspector, view); 1.31 + yield testPropertyStillMarkedDirty(inspector, view); 1.32 +}); 1.33 + 1.34 +function* testEditProperty(inspector, ruleView) { 1.35 + let idRuleEditor = ruleView.element.children[1]._ruleEditor; 1.36 + let propEditor = idRuleEditor.rule.textProps[0].editor; 1.37 + 1.38 + let editor = yield focusEditableField(propEditor.nameSpan); 1.39 + let input = editor.input; 1.40 + is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor."); 1.41 + 1.42 + ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected."); 1.43 + 1.44 + // Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665). 1.45 + EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.doc.defaultView); 1.46 + input.select(); 1.47 + 1.48 + info("Entering property name followed by a colon to focus the value"); 1.49 + let onFocus = once(idRuleEditor.element, "focus", true); 1.50 + for (let ch of "border-color:") { 1.51 + EventUtils.sendChar(ch, ruleView.doc.defaultView); 1.52 + } 1.53 + yield onFocus; 1.54 + yield idRuleEditor.rule._applyingModifications; 1.55 + 1.56 + info("Verifying that the focused field is the valueSpan"); 1.57 + editor = inplaceEditor(ruleView.doc.activeElement); 1.58 + input = editor.input; 1.59 + is(inplaceEditor(propEditor.valueSpan), editor, "Focus should have moved to the value."); 1.60 + ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected."); 1.61 + 1.62 + info("Entering a value following by a semi-colon to commit it"); 1.63 + let onBlur = once(editor.input, "blur"); 1.64 + for (let ch of "red;") { 1.65 + EventUtils.sendChar(ch, ruleView.doc.defaultView); 1.66 + is(propEditor.warning.hidden, true, 1.67 + "warning triangle is hidden or shown as appropriate"); 1.68 + } 1.69 + yield onBlur; 1.70 + yield idRuleEditor.rule._applyingModifications; 1.71 + 1.72 + is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red", 1.73 + "border-color should have been set."); 1.74 + 1.75 + let props = ruleView.element.querySelectorAll(".ruleview-property"); 1.76 + for (let i = 0; i < props.length; i++) { 1.77 + is(props[i].hasAttribute("dirty"), i <= 0, 1.78 + "props[" + i + "] marked dirty as appropriate"); 1.79 + } 1.80 +} 1.81 + 1.82 +function* testDisableProperty(inspector, ruleView) { 1.83 + let idRuleEditor = ruleView.element.children[1]._ruleEditor; 1.84 + let propEditor = idRuleEditor.rule.textProps[0].editor; 1.85 + 1.86 + info("Disabling a property"); 1.87 + propEditor.enable.click(); 1.88 + yield idRuleEditor.rule._applyingModifications; 1.89 + is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "", 1.90 + "Border-color should have been unset."); 1.91 + 1.92 + info("Enabling the property again"); 1.93 + propEditor.enable.click(); 1.94 + yield idRuleEditor.rule._applyingModifications; 1.95 + is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red", 1.96 + "Border-color should have been reset."); 1.97 +} 1.98 + 1.99 +function* testPropertyStillMarkedDirty(inspector, ruleView) { 1.100 + // Select an unstyled node. 1.101 + yield selectNode("#testid2", inspector); 1.102 + 1.103 + // Select the original node again. 1.104 + yield selectNode("#testid", inspector); 1.105 + 1.106 + let props = ruleView.element.querySelectorAll(".ruleview-property"); 1.107 + for (let i = 0; i < props.length; i++) { 1.108 + is(props[i].hasAttribute("dirty"), i <= 0, 1.109 + "props[" + i + "] marked dirty as appropriate"); 1.110 + } 1.111 +}