wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 988313 - Split some of the longer devtools/styleinspector tests; r=miker

Browse Source 
--HG--
rename : browser/devtools/styleinspector/test/browser_ruleview_ui.js => browser/devtools/styleinspector/test/browser_ruleview_edit.js
This commit is contained in:
Patrick Brosset 2014-04-07 21:27:28 +02:00
parent 1032810c5e
commit b1a698a10b
23 changed files with 1041 additions and 744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
browser/devtools/styleinspector/test/browser.ini
View File

@ -30,15 +30,26 @@ support-files =
[browser_csslogic_inherited.js]
[browser_ruleview_734259_style_editor_link.js]
[browser_ruleview_editor.js]
[browser_ruleview_editor_changedvalues.js]
[browser_ruleview_editor_changedvalues_01.js]
[browser_ruleview_editor_changedvalues_02.js]
[browser_ruleview_editor_changedvalues_03.js]
[browser_ruleview_editor_changedvalues_04.js]
[browser_ruleview_copy.js]
[browser_ruleview_focus.js]
[browser_ruleview_inherit.js]
[browser_ruleview_manipulation.js]
[browser_ruleview_multiple_properties.js]
[browser_ruleview_multiple_properties_01.js]
[browser_ruleview_multiple_properties_02.js]
[browser_ruleview_multiple_properties_03.js]
[browser_ruleview_multiple_properties_04.js]
[browser_ruleview_multiple_properties_05.js]
[browser_ruleview_multiple_properties_06.js]
[browser_ruleview_override.js]
[browser_ruleview_ui.js]
[browser_ruleview_update.js]
[browser_ruleview_edit.js]
[browser_ruleview_content.js]
[browser_ruleview_cancel.js]
[browser_ruleview_refresh-on-attribute-change_01.js]
[browser_ruleview_refresh-on-attribute-change_02.js]
[browser_ruleview_livepreview.js]
[browser_bug705707_is_content_stylesheet.js]
[browser_bug722196_property_view_media_queries.js]
@ -76,3 +87,4 @@ support-files =
[browser_ruleview_colorpicker-and-image-tooltip_02.js]
[browser_ruleview_colorpicker-multiple-changes.js]
[browser_ruleview_add_property_01.js]
[browser_ruleview_add_property_02.js]

7
browser/devtools/styleinspector/test/browser_ruleview_add_property_01.js
View File

@ -26,10 +26,9 @@ let test = asyncTest(function*() {
checkPropertyOnAllRules(view);
});
function reselectElement(node, inspector) {
return selectNode(node.parentNode, inspector).then(() => {
return selectNode(node, inspector);
});
function* reselectElement(node, inspector) {
yield selectNode(node.parentNode, inspector);
yield selectNode(node, inspector);
}
function setPropertyOnAllRules(view) {

70
browser/devtools/styleinspector/test/browser_ruleview_add_property_02.js Normal file
View File

@ -0,0 +1,70 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test all sorts of additions and updates of properties in the rule-view
// FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield testCreateNew(inspector, view);
yield inspector.once("inspector-updated");
});
function* testCreateNew(inspector, ruleView) {
// Create a new property.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
"Next focused editor should be the new property editor.");
let input = editor.input;
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.doc.defaultView);
input.select();
info("Entering the property name");
input.value = "background-color";
info("Pressing RETURN and waiting for the value field focus");
let onFocus = once(elementRuleEditor.element, "focus", true);
EventUtils.sendKey("return", ruleView.doc.defaultView);
yield onFocus;
yield elementRuleEditor.rule._applyingModifications;
editor = inplaceEditor(ruleView.doc.activeElement);
is(elementRuleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
let textProp = elementRuleEditor.rule.textProps[0];
is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
editor.input.value = "purple";
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
yield elementRuleEditor.rule._applyingModifications;
is(textProp.value, "purple", "Text prop should have been changed.");
}

68
browser/devtools/styleinspector/test/browser_ruleview_cancel.js Normal file
View File

@ -0,0 +1,68 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test cancelling the addition of a new property in the rule-view
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield testCancelNew(inspector, view);
yield testCancelNewOnEscape(inspector, view);
yield inspector.once("inspector-updated");
});
function* testCancelNew(inspector, ruleView) {
// Start at the beginning: start to add a rule to the element's style
// declaration, but leave it empty.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
"Property editor is focused");
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding modification request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}
function* testCancelNewOnEscape(inspector, ruleView) {
// Start at the beginning: start to add a rule to the element's style
// declaration, add some text, then press escape.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Next focused editor should be the new property editor.");
for (let ch of "background") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
}
let onBlur = once(editor.input, "blur");
EventUtils.synthesizeKey("VK_ESCAPE", {});
yield onBlur;
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding modification request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}

43
browser/devtools/styleinspector/test/browser_ruleview_content.js Normal file
View File

@ -0,0 +1,43 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test the rule-view content
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield testContentAfterNodeSelection(inspector, view);
});
function* testContentAfterNodeSelection(inspector, ruleView) {
yield selectNode("#testid", inspector);
is(ruleView.element.querySelectorAll("#noResults").length, 0,
"After a highlight, no longer has a no-results element.");
yield clearCurrentNodeSelection(inspector)
is(ruleView.element.querySelectorAll("#noResults").length, 1,
"After highlighting null, has a no-results element again.");
yield selectNode("#testid", inspector);
let classEditor = ruleView.element.children[2]._ruleEditor;
is(classEditor.selectorText.querySelector(".ruleview-selector-matched").textContent,
".testclass", ".textclass should be matched.");
is(classEditor.selectorText.querySelector(".ruleview-selector-unmatched").textContent,
".unmatched", ".unmatched should not be matched.");
}

108
browser/devtools/styleinspector/test/browser_ruleview_edit.js Normal file
View File

@ -0,0 +1,108 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test several types of rule-view property edition
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield selectNode("#testid", inspector);
yield testEditProperty(inspector, view);
yield testDisableProperty(inspector, view);
yield testPropertyStillMarkedDirty(inspector, view);
});
function* testEditProperty(inspector, ruleView) {
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
let editor = yield focusEditableField(propEditor.nameSpan);
let input = editor.input;
is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.doc.defaultView);
input.select();
info("Entering property name followed by a colon to focus the value");
let onFocus = once(idRuleEditor.element, "focus", true);
for (let ch of "border-color:") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
}
yield onFocus;
yield idRuleEditor.rule._applyingModifications;
info("Verifying that the focused field is the valueSpan");
editor = inplaceEditor(ruleView.doc.activeElement);
input = editor.input;
is(inplaceEditor(propEditor.valueSpan), editor, "Focus should have moved to the value.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
info("Entering a value following by a semi-colon to commit it");
let onBlur = once(editor.input, "blur");
for (let ch of "red;") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
is(propEditor.warning.hidden, true,
"warning triangle is hidden or shown as appropriate");
}
yield onBlur;
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red",
"border-color should have been set.");
let props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(props[i].hasAttribute("dirty"), i <= 0,
"props[" + i + "] marked dirty as appropriate");
}
}
function* testDisableProperty(inspector, ruleView) {
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
info("Disabling a property");
propEditor.enable.click();
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "",
"Border-color should have been unset.");
info("Enabling the property again");
propEditor.enable.click();
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red",
"Border-color should have been reset.");
}
function* testPropertyStillMarkedDirty(inspector, ruleView) {
// Select an unstyled node.
yield selectNode("#testid2", inspector);
// Select the original node again.
yield selectNode("#testid", inspector);
let props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(props[i].hasAttribute("dirty"), i <= 0,
"props[" + i + "] marked dirty as appropriate");
}
}

187
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues.js
View File

@ -1,187 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing various inplace-editor behaviors in the rule-view
// FIXME: To be split in several test files, and some of the inplace-editor
// focus/blur/commit/revert stuff should be factored out in head.js
let TEST_URL = 'url("' + TEST_URL_ROOT + 'test-image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>'
].join("\n");
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield selectNode("#testid", inspector);
yield testCancelNew(view);
yield testCreateNew(view);
yield testCreateNewEscape(view);
yield testEditProperty(view, "border-color", "red");
yield testEditProperty(view, "background-image", TEST_URL);
});
function* testCancelNew(view) {
info("Test adding a new rule to the element's style declaration and leaving it empty.");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
info("Bluring the editor input");
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
info("Checking the state of canceling a new property name editor");
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}
function* testCreateNew(view) {
info("Test creating a new property");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
let input = editor.input;
info("Entering background-color in the property name editor");
input.value = "background-color";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(elementRuleEditor.element, "focus", true);
let onModifications = elementRuleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.doc.activeElement);
let textProp = elementRuleEditor.rule.textProps[0];
is(elementRuleEditor.rule.textProps.length, 1, "Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
info("Entering a value and bluring the field to expect a rule change");
editor.input.value = "#XYZ";
let onBlur = once(editor.input, "blur");
let onModifications = elementRuleEditor.rule._applyingModifications;
editor.input.blur();
yield onBlur;
yield onModifications;
is(textProp.value, "#XYZ", "Text prop should have been changed.");
is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
}
function* testCreateNewEscape(view) {
info("Test creating a new property and escaping");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused.");
let input = editor.input;
info("Entering a value in the property name editor");
input.value = "color";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(elementRuleEditor.element, "focus", true);
let onModifications = elementRuleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.doc.activeElement);
let textProp = elementRuleEditor.rule.textProps[1];
is(elementRuleEditor.rule.textProps.length, 2, "Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 2, "Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
info("Entering a property value");
editor.input.value = "red";
info("Escaping out of the field");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
info("Checking that the previous field is focused");
let focusedElement = inplaceEditor(elementRuleEditor.rule.textProps[0].editor.valueSpan).input;
is(focusedElement, focusedElement.ownerDocument.activeElement, "Correct element has focus");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
is(elementRuleEditor.rule.textProps.length, 1, "Removed the new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Removed the property editor.");
}
function* testEditProperty(view, name, value) {
info("Test editing existing property name/value fields");
let idRuleEditor = view.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
info("Focusing an existing property name in the rule-view");
let editor = yield focusEditableField(propEditor.nameSpan, 32, 1);
is(inplaceEditor(propEditor.nameSpan), editor, "The property name editor got focused");
let input = editor.input;
info("Entering a new property name, including : to commit and focus the value");
let onValueFocus = once(idRuleEditor.element, "focus", true);
let onModifications = idRuleEditor.rule._applyingModifications;
for (let ch of name + ":") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
yield onValueFocus;
yield onModifications;
// Getting the value editor after focus
editor = inplaceEditor(view.doc.activeElement);
input = editor.input;
is(inplaceEditor(propEditor.valueSpan), editor, "Focus moved to the value.");
info("Entering a new value, including ; to commit and blur the value");
let onBlur = once(input, "blur");
let onModifications = idRuleEditor.rule._applyingModifications;
for (let ch of value + ";") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
yield onBlur;
yield onModifications;
let propValue = idRuleEditor.rule.domRule._rawStyle().getPropertyValue(name);
is(propValue, value, name + " should have been set.");
is(propEditor.isValid(), true, value + " should be a valid entry");
}

55
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues_01.js Normal file
View File

@ -0,0 +1,55 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing various inplace-editor behaviors in the rule-view
let TEST_URL = 'url("' + TEST_URL_ROOT + 'test-image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>'
].join("\n");
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield selectNode("#testid", inspector);
yield testCancelNew(view);
});
function* testCancelNew(view) {
info("Test adding a new rule to the element's style declaration and leaving it empty.");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
info("Bluring the editor input");
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
info("Checking the state of canceling a new property name editor");
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}

78
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues_02.js Normal file
View File

@ -0,0 +1,78 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing various inplace-editor behaviors in the rule-view
// FIXME: To be split in several test files, and some of the inplace-editor
// focus/blur/commit/revert stuff should be factored out in head.js
let TEST_URL = 'url("' + TEST_URL_ROOT + 'test-image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>'
].join("\n");
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield selectNode("#testid", inspector);
yield testCreateNew(view);
});
function* testCreateNew(view) {
info("Test creating a new property");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused");
let input = editor.input;
info("Entering background-color in the property name editor");
input.value = "background-color";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(elementRuleEditor.element, "focus", true);
let onModifications = elementRuleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.doc.activeElement);
let textProp = elementRuleEditor.rule.textProps[0];
is(elementRuleEditor.rule.textProps.length, 1, "Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
info("Entering a value and bluring the field to expect a rule change");
editor.input.value = "#XYZ";
let onBlur = once(editor.input, "blur");
let onModifications = elementRuleEditor.rule._applyingModifications;
editor.input.blur();
yield onBlur;
yield onModifications;
is(textProp.value, "#XYZ", "Text prop should have been changed.");
is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
}

84
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues_03.js Normal file
View File

@ -0,0 +1,84 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing various inplace-editor behaviors in the rule-view
// FIXME: To be split in several test files, and some of the inplace-editor
// focus/blur/commit/revert stuff should be factored out in head.js
let TEST_URL = 'url("' + TEST_URL_ROOT + 'test-image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass" style="background-color:red;">Styled Node</div>'
].join("\n");
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield selectNode("#testid", inspector);
yield testCreateNewEscape(view);
});
function* testCreateNewEscape(view) {
info("Test creating a new property and escaping");
let elementRuleEditor = view.element.children[0]._ruleEditor;
info("Focusing a new property name in the rule-view");
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "The new property editor got focused.");
let input = editor.input;
info("Entering a value in the property name editor");
input.value = "color";
info("Pressing return to commit and focus the new value field");
let onValueFocus = once(elementRuleEditor.element, "focus", true);
let onModifications = elementRuleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
yield onValueFocus;
yield onModifications;
// Getting the new value editor after focus
editor = inplaceEditor(view.doc.activeElement);
let textProp = elementRuleEditor.rule.textProps[1];
is(elementRuleEditor.rule.textProps.length, 2, "Created a new text property.");
is(elementRuleEditor.propertyList.children.length, 2, "Created a property editor.");
is(editor, inplaceEditor(textProp.editor.valueSpan), "Editing the value span now.");
info("Entering a property value");
editor.input.value = "red";
info("Escaping out of the field");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
info("Checking that the previous field is focused");
let focusedElement = inplaceEditor(elementRuleEditor.rule.textProps[0].editor.valueSpan).input;
is(focusedElement, focusedElement.ownerDocument.activeElement, "Correct element has focus");
let onModifications = elementRuleEditor.rule._applyingModifications;
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
yield onModifications;
is(elementRuleEditor.rule.textProps.length, 1, "Removed the new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Removed the property editor.");
}

78
browser/devtools/styleinspector/test/browser_ruleview_editor_changedvalues_04.js Normal file
View File

@ -0,0 +1,78 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Testing various inplace-editor behaviors in the rule-view
// FIXME: To be split in several test files, and some of the inplace-editor
// focus/blur/commit/revert stuff should be factored out in head.js
let TEST_URL = 'url("' + TEST_URL_ROOT + 'test-image.png")';
let PAGE_CONTENT = [
'<style type="text/css">',
' #testid {',
' background-color: blue;',
' }',
' .testclass {',
' background-color: green;',
' }',
'</style>',
'<div id="testid" class="testclass">Styled Node</div>'
].join("\n");
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
info("Creating the test document");
content.document.body.innerHTML = PAGE_CONTENT;
info("Opening the rule-view");
let {toolbox, inspector, view} = yield openRuleView();
info("Selecting the test element");
yield selectNode("#testid", inspector);
yield testEditProperty(view, "border-color", "red");
yield testEditProperty(view, "background-image", TEST_URL);
});
function* testEditProperty(view, name, value) {
info("Test editing existing property name/value fields");
let idRuleEditor = view.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
info("Focusing an existing property name in the rule-view");
let editor = yield focusEditableField(propEditor.nameSpan, 32, 1);
is(inplaceEditor(propEditor.nameSpan), editor, "The property name editor got focused");
let input = editor.input;
info("Entering a new property name, including : to commit and focus the value");
let onValueFocus = once(idRuleEditor.element, "focus", true);
let onModifications = idRuleEditor.rule._applyingModifications;
for (let ch of name + ":") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
yield onValueFocus;
yield onModifications;
// Getting the value editor after focus
editor = inplaceEditor(view.doc.activeElement);
input = editor.input;
is(inplaceEditor(propEditor.valueSpan), editor, "Focus moved to the value.");
info("Entering a new value, including ; to commit and blur the value");
let onBlur = once(input, "blur");
let onModifications = idRuleEditor.rule._applyingModifications;
for (let ch of value + ";") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
yield onBlur;
yield onModifications;
let propValue = idRuleEditor.rule.domRule._rawStyle().getPropertyValue(name);
is(propValue, value, name + " should have been set.");
is(propEditor.isValid(), true, value + " should be a valid entry");
}

233
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties.js
View File

@ -1,233 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
yield testCreateNewMulti(inspector, view);
yield testCreateNewMultiDuplicates(inspector, view);
yield testCreateNewMultiPriority(inspector, view);
yield testCreateNewMultiUnfinished(inspector, view);
yield testCreateNewMultiPartialUnfinished(inspector, view);
yield testMultiValues(inspector, view);
});
/**
* Create a new test element, select it, and return the rule-view ruleEditor
*/
function* createAndSelectNewElement(inspector, view) {
info("Creating a new test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
info("Selecting the new element and waiting for the inspector to update");
yield selectNode(newElement, inspector);
info("Getting the rule-view rule editor for that new element");
return view.element.children[0]._ruleEditor;
}
/**
* Begin the creation of a new property, resolving after the editor
* has been created.
*/
function* focusNewProperty(ruleEditor) {
info("Clicking on the close ruleEditor brace to start edition");
ruleEditor.closeBrace.scrollIntoView();
let editor = yield focusEditableField(ruleEditor.closeBrace);
is(inplaceEditor(ruleEditor.newPropSpan), editor, "Focused editor is the new property editor.");
is(ruleEditor.rule.textProps.length, 0, "Starting with one new text property.");
is(ruleEditor.propertyList.children.length, 1, "Starting with two property editors.");
return editor;
}
/**
* Fully create a new property, given some text input
*/
function* createNewProperty(ruleEditor, inputValue) {
info("Creating a new property editor");
let editor = yield focusNewProperty(ruleEditor);
info("Entering the value " + inputValue);
editor.input.value = inputValue;
info("Submitting the new value and waiting for value field focus");
let onFocus = once(ruleEditor.element, "focus", true);
EventUtils.synthesizeKey("VK_RETURN", {}, ruleEditor.element.ownerDocument.defaultView);
yield onFocus;
}
function* testCreateNewMulti(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor,
"color:blue;background : orange ; text-align:center; border-color: green;");
is(ruleEditor.rule.textProps.length, 4, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 5, "Should have created a new property editor.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "text-align", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "center", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "border-color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "green", "Should have correct property value");
yield inspector.once("inspector-updated");
}
function* testCreateNewMultiDuplicates(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor,
"color:red;color:orange;color:yellow;color:green;color:blue;color:indigo;color:violet;");
is(ruleEditor.rule.textProps.length, 7, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 8, "Should have created new property editors.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "red", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "yellow", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "green", "Should have correct property value");
is(ruleEditor.rule.textProps[4].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[4].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[5].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[5].value, "indigo", "Should have correct property value");
is(ruleEditor.rule.textProps[6].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[6].value, "violet", "Should have correct property value");
yield inspector.once("inspector-updated");
}
function* testCreateNewMultiPriority(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor,
"color:red;width:100px;height: 100px;");
is(ruleEditor.rule.textProps.length, 3, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 4, "Should have created new property editors.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "red", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "100px", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "height", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "100px", "Should have correct property value");
yield inspector.once("inspector-updated");
}
function* testCreateNewMultiUnfinished(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor,
"color:blue;background : orange ; text-align:center; border-color: ");
is(ruleEditor.rule.textProps.length, 4, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 4, "Should have created property editors.");
for (let ch of "red") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 4, "Should have the same number of text properties.");
is(ruleEditor.propertyList.children.length, 5, "Should have added the changed value editor.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "text-align", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "center", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "border-color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "red", "Should have correct property value");
yield inspector.once("inspector-updated");
}
function* testCreateNewMultiPartialUnfinished(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor, "width: 100px; heig");
is(ruleEditor.rule.textProps.length, 2, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 2, "Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
let valueEditor = ruleEditor.propertyList.children[1].querySelector("input");
valueEditor.value = "10px;background:orangered;color: black;";
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 4, "Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 5, "Should have added the changed value editor.");
is(ruleEditor.rule.textProps[0].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "100px", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "heig", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "10px", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "orangered", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "black", "Should have correct property value");
yield inspector.once("inspector-updated");
}
function* testMultiValues(inspector, view) {
let ruleEditor = yield createAndSelectNewElement(inspector, view);
yield createNewProperty(ruleEditor, "width:");
is(ruleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 1, "Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
let valueEditor = ruleEditor.propertyList.children[0].querySelector("input");
valueEditor.value = "height: 10px;color:blue"
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 2, "Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 3, "Should have added the changed value editor.");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
is(ruleEditor.propertyList.children.length, 2, "Should have removed the value editor.");
is(ruleEditor.rule.textProps[0].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "height: 10px", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "blue", "Should have correct property value");
yield inspector.once("inspector-updated");
}

45
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_01.js Normal file
View File

@ -0,0 +1,45 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testCreateNewMulti(inspector, ruleEditor);
});
function* testCreateNewMulti(inspector, ruleEditor) {
yield createNewRuleViewProperty(ruleEditor,
"color:blue;background : orange ; text-align:center; border-color: green;");
is(ruleEditor.rule.textProps.length, 4, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 5, "Should have created a new property editor.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "text-align", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "center", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "border-color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "green", "Should have correct property value");
yield inspector.once("inspector-updated");
}

54
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_02.js Normal file
View File

@ -0,0 +1,54 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testCreateNewMultiDuplicates(inspector, ruleEditor);
});
function* testCreateNewMultiDuplicates(inspector, ruleEditor) {
yield createNewRuleViewProperty(ruleEditor,
"color:red;color:orange;color:yellow;color:green;color:blue;color:indigo;color:violet;");
is(ruleEditor.rule.textProps.length, 7, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 8, "Should have created new property editors.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "red", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "yellow", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "green", "Should have correct property value");
is(ruleEditor.rule.textProps[4].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[4].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[5].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[5].value, "indigo", "Should have correct property value");
is(ruleEditor.rule.textProps[6].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[6].value, "violet", "Should have correct property value");
yield inspector.once("inspector-updated");
}

42
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_03.js Normal file
View File

@ -0,0 +1,42 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testCreateNewMultiPriority(inspector, ruleEditor);
});
function* testCreateNewMultiPriority(inspector, ruleEditor) {
yield createNewRuleViewProperty(ruleEditor,
"color:red;width:100px;height: 100px;");
is(ruleEditor.rule.textProps.length, 3, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 4, "Should have created new property editors.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "red", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "100px", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "height", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "100px", "Should have correct property value");
yield inspector.once("inspector-updated");
}

53
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_04.js Normal file
View File

@ -0,0 +1,53 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testCreateNewMultiUnfinished(inspector, ruleEditor, view);
});
function* testCreateNewMultiUnfinished(inspector, ruleEditor, view) {
yield createNewRuleViewProperty(ruleEditor,
"color:blue;background : orange ; text-align:center; border-color: ");
is(ruleEditor.rule.textProps.length, 4, "Should have created new text properties.");
is(ruleEditor.propertyList.children.length, 4, "Should have created property editors.");
for (let ch of "red") {
EventUtils.sendChar(ch, view.doc.defaultView);
}
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 4, "Should have the same number of text properties.");
is(ruleEditor.propertyList.children.length, 5, "Should have added the changed value editor.");
is(ruleEditor.rule.textProps[0].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "blue", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "orange", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "text-align", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "center", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "border-color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "red", "Should have correct property value");
yield inspector.once("inspector-updated");
}

52
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_05.js Normal file
View File

@ -0,0 +1,52 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testCreateNewMultiPartialUnfinished(inspector, ruleEditor, view);
});
function* testCreateNewMultiPartialUnfinished(inspector, ruleEditor, view) {
yield createNewRuleViewProperty(ruleEditor, "width: 100px; heig");
is(ruleEditor.rule.textProps.length, 2, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 2, "Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
let valueEditor = ruleEditor.propertyList.children[1].querySelector("input");
valueEditor.value = "10px;background:orangered;color: black;";
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 4, "Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 5, "Should have added the changed value editor.");
is(ruleEditor.rule.textProps[0].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "100px", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "heig", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "10px", "Should have correct property value");
is(ruleEditor.rule.textProps[2].name, "background", "Should have correct property name");
is(ruleEditor.rule.textProps[2].value, "orangered", "Should have correct property value");
is(ruleEditor.rule.textProps[3].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[3].value, "black", "Should have correct property value");
yield inspector.once("inspector-updated");
}

49
browser/devtools/styleinspector/test/browser_ruleview_multiple_properties_06.js Normal file
View File

@ -0,0 +1,49 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that the rule-view behaves correctly when entering mutliple and/or
// unfinished properties/values in inplace-editors
let test = asyncTest(function*() {
yield addTab("data:text/html,test rule view user changes");
content.document.body.innerHTML = "<h1>Testing Multiple Properties</h1>";
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test element");
let newElement = content.document.createElement("div");
newElement.textContent = "Test Element";
content.document.body.appendChild(newElement);
yield selectNode(newElement, inspector);
let ruleEditor = view.element.children[0]._ruleEditor;
yield testMultiValues(inspector, ruleEditor, view);
});
function* testMultiValues(inspector, ruleEditor, view) {
yield createNewRuleViewProperty(ruleEditor, "width:");
is(ruleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(ruleEditor.propertyList.children.length, 1, "Should have created a property editor.");
// Value is focused, lets add multiple rules here and make sure they get added
let valueEditor = ruleEditor.propertyList.children[0].querySelector("input");
valueEditor.value = "height: 10px;color:blue"
EventUtils.synthesizeKey("VK_RETURN", {}, view.doc.defaultView);
is(ruleEditor.rule.textProps.length, 2, "Should have added the changed value.");
is(ruleEditor.propertyList.children.length, 3, "Should have added the changed value editor.");
EventUtils.synthesizeKey("VK_ESCAPE", {}, view.doc.defaultView);
is(ruleEditor.propertyList.children.length, 2, "Should have removed the value editor.");
is(ruleEditor.rule.textProps[0].name, "width", "Should have correct property name");
is(ruleEditor.rule.textProps[0].value, "height: 10px", "Should have correct property value");
is(ruleEditor.rule.textProps[1].name, "color", "Should have correct property name");
is(ruleEditor.rule.textProps[1].value, "blue", "Should have correct property value");
yield inspector.once("inspector-updated");
}

2
browser/devtools/styleinspector/test/browser_ruleview_pseudoelement.js
View File

@ -4,6 +4,8 @@
"use strict";
// Test that pseudoelements are displayed correctly in the rule view
const TEST_URI = TEST_URL_ROOT + "browser_ruleview_pseudoelement.html";
let test = asyncTest(function*() {

58
browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_01.js Normal file
View File

@ -0,0 +1,58 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that changing the current element's attributes refreshes the rule-view
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_refresh-on-attribute-change.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Preparing the test document and node");
let style = '' +
'#testid {' +
' background-color: blue;' +
'} ' +
'.testclass {' +
' background-color: green;' +
'}';
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
let testElement = getNode("#testid");
let elementStyle = 'margin-top: 1px; padding-top: 5px;'
testElement.setAttribute("style", elementStyle);
yield selectNode(testElement, inspector);
info("Checking that the rule-view has the element, #testid and .testclass selectors");
checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
info("Changing the node's ID attribute and waiting for the rule-view refresh");
let ruleViewRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("id", "differentid");
yield ruleViewRefreshed;
info("Checking that the rule-view doesn't have the #testid selector anymore");
checkRuleViewContent(view, ["element", ".testclass"]);
info("Reverting the ID attribute change");
let ruleViewRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("id", "testid");
yield ruleViewRefreshed;
info("Checking that the rule-view has all the selectors again");
checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
});
function checkRuleViewContent(view, expectedSelectors) {
let selectors = view.doc.querySelectorAll(".ruleview-selector");
is(selectors.length, expectedSelectors.length,
expectedSelectors.length + " selectors are displayed");
for (let i = 0; i < expectedSelectors.length; i ++) {
is(selectors[i].textContent.indexOf(expectedSelectors[i]), 0,
"Selector " + (i + 1) + " is " + expectedSelectors[i]);
}
}

143
browser/devtools/styleinspector/test/browser_ruleview_update.js → browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_02.js
View File

@ -4,39 +4,17 @@
"use strict";
// Test that changing the current element's attributes and style refreshes the
// rule-view
// Test that changing the current element's style attribute refreshes the rule-view
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_update.js");
let {toolbox, inspector, view} = yield openRuleView();
info("Creating the test document");
let style = '' +
'#testid {' +
' background-color: blue;' +
'} ' +
'.testclass {' +
' background-color: green;' +
'}';
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
info("Getting the test node");
let testElement = getNode("#testid");
info("Adding inline style");
let elementStyle = 'margin-top: 1px; padding-top: 5px;'
testElement.setAttribute("style", elementStyle);
info("Selecting the test node")
testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px;");
yield selectNode(testElement, inspector);
info("Test that changing the element's attributes refreshes the rule-view");
yield testRuleChanges(inspector, view, testElement);
yield testRuleChange1(inspector, view, testElement);
yield testRuleChange2(inspector, view, testElement);
yield testPropertyChanges(inspector, view, testElement);
yield testPropertyChange0(inspector, view, testElement);
yield testPropertyChange1(inspector, view, testElement);
@ -45,131 +23,80 @@ let test = asyncTest(function*() {
yield testPropertyChange4(inspector, view, testElement);
yield testPropertyChange5(inspector, view, testElement);
yield testPropertyChange6(inspector, view, testElement);
yield testPropertyChange7(inspector, view, testElement);
});
function* testRuleChanges(inspector, ruleView, testElement) {
let selectors = ruleView.doc.querySelectorAll(".ruleview-selector");
is(selectors.length, 3, "Three rules visible.");
is(selectors[0].textContent.indexOf("element"), 0, "First item is inline style.");
is(selectors[1].textContent.indexOf("#testid"), 0, "Second item is id rule.");
is(selectors[2].textContent.indexOf(".testclass"), 0, "Third item is class rule.");
// Change the id and refresh.
let ruleViewRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("id", "differentid");
yield ruleViewRefreshed;
}
function* testRuleChange1(inspector, ruleView, testElement) {
let selectors = ruleView.doc.querySelectorAll(".ruleview-selector");
is(selectors.length, 2, "Two rules visible.");
is(selectors[0].textContent.indexOf("element"), 0, "First item is inline style.");
is(selectors[1].textContent.indexOf(".testclass"), 0, "Second item is class rule.");
let ruleViewRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("id", "testid");
yield ruleViewRefreshed;
}
function* testRuleChange2(inspector, ruleView, testElement) {
let selectors = ruleView.doc.querySelectorAll(".ruleview-selector");
is(selectors.length, 3, "Three rules visible.");
is(selectors[0].textContent.indexOf("element"), 0, "First item is inline style.");
is(selectors[1].textContent.indexOf("#testid"), 0, "Second item is id rule.");
is(selectors[2].textContent.indexOf(".testclass"), 0, "Third item is class rule.");
}
function* testPropertyChanges(inspector, ruleView, testElement) {
let rule = ruleView._elementStyle.rules[0];
info("Adding a second margin-top value in the element selector");
let ruleEditor = ruleView._elementStyle.rules[0].editor;
let onRefreshed = inspector.once("rule-view-refreshed");
// Add a second margin-top value, just to make things interesting.
ruleEditor.addProperty("margin-top", "5px", "");
yield onRefreshed;
let rule = ruleView._elementStyle.rules[0];
validateTextProp(rule.textProps[0], false, "margin-top", "1px", "Original margin property active");
}
function* testPropertyChange0(inspector, ruleView, testElement) {
let rule = ruleView._elementStyle.rules[0];
validateTextProp(rule.textProps[0], false, "margin-top", "1px", "Original margin property active");
yield changeElementStyle(testElement, "margin-top: 1px; padding-top: 5px", inspector);
let onRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px");
yield onRefreshed;
}
function* testPropertyChange1(inspector, ruleView, testElement) {
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
validateTextProp(rule.textProps[0], true, "margin-top", "1px", "First margin property re-enabled");
validateTextProp(rule.textProps[2], false, "margin-top", "5px", "Second margin property disabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Now set it back to 5px, the 5px value should be re-enabled.
testElement.setAttribute("style", "margin-top: 5px; padding-top: 5px;");
yield onRefreshed;
}
function* testPropertyChange2(inspector, ruleView, testElement) {
function* testPropertyChange1(inspector, ruleView, testElement) {
info("Now set it back to 5px, the 5px value should be re-enabled.");
yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 5px;", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");
validateTextProp(rule.textProps[2], true, "margin-top", "5px", "Second margin property disabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Set the margin property to a value that doesn't exist in the editor.
// Should reuse the currently-enabled element (the second one.)
testElement.setAttribute("style", "margin-top: 15px; padding-top: 5px;");
yield onRefreshed;
}
function* testPropertyChange3(inspector, ruleView, testElement) {
function* testPropertyChange2(inspector, ruleView, testElement) {
info("Set the margin property to a value that doesn't exist in the editor.");
info("Should reuse the currently-enabled element (the second one.)");
yield changeElementStyle(testElement, "margin-top: 15px; padding-top: 5px;", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");
validateTextProp(rule.textProps[2], true, "margin-top", "15px", "Second margin property disabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Remove the padding-top attribute. Should disable the padding property but not remove it.
testElement.setAttribute("style", "margin-top: 5px;");
yield onRefreshed;
}
function* testPropertyChange4(inspector, ruleView, testElement) {
function* testPropertyChange3(inspector, ruleView, testElement) {
info("Remove the padding-top attribute. Should disable the padding property but not remove it.");
yield changeElementStyle(testElement, "margin-top: 5px;", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
validateTextProp(rule.textProps[1], false, "padding-top", "5px", "Padding property disabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Put the padding-top attribute back in, should re-enable the padding property.
testElement.setAttribute("style", "margin-top: 5px; padding-top: 25px");
yield onRefreshed;
}
function* testPropertyChange5(inspector, ruleView, testElement) {
function* testPropertyChange4(inspector, ruleView, testElement) {
info("Put the padding-top attribute back in, should re-enable the padding property.");
yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
validateTextProp(rule.textProps[1], true, "padding-top", "25px", "Padding property enabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Add an entirely new property
testElement.setAttribute("style", "margin-top: 5px; padding-top: 25px; padding-left: 20px;");
yield onRefreshed;
}
function* testPropertyChange6(inspector, ruleView, testElement) {
function* testPropertyChange5(inspector, ruleView, testElement) {
info("Add an entirely new property");
yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px; padding-left: 20px;", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4, "Added a property");
validateTextProp(rule.textProps[3], true, "padding-left", "20px", "Padding property enabled");
let onRefreshed = inspector.once("rule-view-refreshed");
// Add an entirely new property
testElement.setAttribute("style", "background: url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red");
yield onRefreshed;
}
function* testPropertyChange7(inspector, ruleView, testElement) {
function* testPropertyChange6(inspector, ruleView, testElement) {
info("Add an entirely new property again");
yield changeElementStyle(testElement, "background: url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red", inspector);
let rule = ruleView._elementStyle.rules[0];
is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, "Added a property");
validateTextProp(rule.textProps[4], true, "background",
@ -178,6 +105,12 @@ function* testPropertyChange7(inspector, ruleView, testElement) {
"url('chrome://branding/content/about-logo.png') repeat scroll 0% 0% #F00");
}
function* changeElementStyle(testElement, style, inspector) {
let onRefreshed = inspector.once("rule-view-refreshed");
testElement.setAttribute("style", style);
yield onRefreshed;
}
function validateTextProp(aProp, aEnabled, aName, aValue, aDesc, valueSpanText) {
is(aProp.enabled, aEnabled, aDesc + ": enabled.");
is(aProp.name, aName, aDesc + ": name.");

211
browser/devtools/styleinspector/test/browser_ruleview_ui.js
View File

@ -1,211 +0,0 @@
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test all sorts of additions and updates of properties in the rule-view
// FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
let test = asyncTest(function*() {
yield addTab("data:text/html;charset=utf-8,browser_ruleview_ui.js");
let {toolbox, inspector, view} = yield openRuleView();
yield testContentAfterNodeSelection(inspector, view);
yield testCancelNew(inspector, view);
yield testCancelNewOnEscape(inspector, view);
yield testCreateNew(inspector, view);
yield testEditProperty(inspector, view);
yield testDisableProperty(inspector, view);
yield testPropertyStillMarkedDirty(inspector, view);
});
function* testContentAfterNodeSelection(inspector, ruleView) {
let style = "" +
"#testid {" +
" background-color: blue;" +
"}" +
".testclass, .unmatched {" +
" background-color: green;" +
"}";
let styleNode = addStyle(content.document, style);
content.document.body.innerHTML = "<div id='testid' class='testclass'>Styled Node</div>" +
"<div id='testid2'>Styled Node</div>";
yield selectNode("#testid", inspector);
is(ruleView.element.querySelectorAll("#noResults").length, 0,
"After a highlight, no longer has a no-results element.");
yield clearCurrentNodeSelection(inspector)
is(ruleView.element.querySelectorAll("#noResults").length, 1,
"After highlighting null, has a no-results element again.");
yield selectNode("#testid", inspector);
let classEditor = ruleView.element.children[2]._ruleEditor;
is(classEditor.selectorText.querySelector(".ruleview-selector-matched").textContent,
".testclass", ".textclass should be matched.");
is(classEditor.selectorText.querySelector(".ruleview-selector-unmatched").textContent,
".unmatched", ".unmatched should not be matched.");
}
function* testCancelNew(inspector, ruleView) {
// Start at the beginning: start to add a rule to the element's style
// declaration, but leave it empty.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
"Property editor is focused");
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding modification request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}
function* testCancelNewOnEscape(inspector, ruleView) {
// Start at the beginning: start to add a rule to the element's style
// declaration, add some text, then press escape.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor, "Next focused editor should be the new property editor.");
for (let ch of "background") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
}
let onBlur = once(editor.input, "blur");
EventUtils.synthesizeKey("VK_ESCAPE", {});
yield onBlur;
ok(!elementRuleEditor.rule._applyingModifications, "Shouldn't have an outstanding modification request after a cancel.");
is(elementRuleEditor.rule.textProps.length, 0, "Should have canceled creating a new text property.");
ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
}
function* testCreateNew(inspector, ruleView) {
// Create a new property.
let elementRuleEditor = ruleView.element.children[0]._ruleEditor;
let editor = yield focusEditableField(elementRuleEditor.closeBrace);
is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
"Next focused editor should be the new property editor.");
let input = editor.input;
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.doc.defaultView);
input.select();
info("Entering the property name");
input.value = "background-color";
info("Pressing RETURN and waiting for the value field focus");
let onFocus = once(elementRuleEditor.element, "focus", true);
EventUtils.sendKey("return", ruleView.doc.defaultView);
yield onFocus;
yield elementRuleEditor.rule._applyingModifications;
editor = inplaceEditor(ruleView.doc.activeElement);
is(elementRuleEditor.rule.textProps.length, 1, "Should have created a new text property.");
is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
let textProp = elementRuleEditor.rule.textProps[0];
is(editor, inplaceEditor(textProp.editor.valueSpan), "Should be editing the value span now.");
editor.input.value = "purple";
let onBlur = once(editor.input, "blur");
editor.input.blur();
yield onBlur;
yield elementRuleEditor.rule._applyingModifications;
is(textProp.value, "purple", "Text prop should have been changed.");
}
function* testEditProperty(inspector, ruleView) {
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
let editor = yield focusEditableField(propEditor.nameSpan);
let input = editor.input;
is(inplaceEditor(propEditor.nameSpan), editor, "Next focused editor should be the name editor.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
// Try clicking on the editor's input again, shouldn't cause trouble (see bug 761665).
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.doc.defaultView);
input.select();
info("Entering property name followed by a colon to focus the value");
let onFocus = once(idRuleEditor.element, "focus", true);
for (let ch of "border-color:") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
}
yield onFocus;
yield idRuleEditor.rule._applyingModifications;
info("Verifying that the focused field is the valueSpan");
editor = inplaceEditor(ruleView.doc.activeElement);
input = editor.input;
is(inplaceEditor(propEditor.valueSpan), editor, "Focus should have moved to the value.");
ok(input.selectionStart === 0 && input.selectionEnd === input.value.length, "Editor contents are selected.");
info("Entering a value following by a semi-colon to commit it");
let onBlur = once(editor.input, "blur");
for (let ch of "red;") {
EventUtils.sendChar(ch, ruleView.doc.defaultView);
is(propEditor.warning.hidden, true,
"warning triangle is hidden or shown as appropriate");
}
yield onBlur;
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red",
"border-color should have been set.");
let props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(props[i].hasAttribute("dirty"), i <= 1,
"props[" + i + "] marked dirty as appropriate");
}
}
function* testDisableProperty(inspector, ruleView) {
let idRuleEditor = ruleView.element.children[1]._ruleEditor;
let propEditor = idRuleEditor.rule.textProps[0].editor;
info("Disabling a property");
propEditor.enable.click();
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "",
"Border-color should have been unset.");
info("Enabling the property again");
propEditor.enable.click();
yield idRuleEditor.rule._applyingModifications;
is(idRuleEditor.rule.style._rawStyle().getPropertyValue("border-color"), "red",
"Border-color should have been reset.");
}
function* testPropertyStillMarkedDirty(inspector, ruleView) {
// Select an unstyled node.
yield selectNode("#testid2", inspector);
// Select the original node again.
yield selectNode("#testid", inspector);
let props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(props[i].hasAttribute("dirty"), i <= 1,
"props[" + i + "] marked dirty as appropriate");
}
}

45
browser/devtools/styleinspector/test/head.js
View File

@ -556,6 +556,51 @@ function getRuleViewLinkByIndex(view, index) {
return links[index];
}
/**
* Click on a rule-view's close brace to focus a new property name editor
* @param {RuleEditor} ruleEditor An instance of RuleEditor that will receive
* the new property
* @return a promise that resolves to the newly created editor when ready and
* focused
*/
let focusNewRuleViewProperty = Task.async(function*(ruleEditor) {
info("Clicking on a close ruleEditor brace to start editing a new property");
ruleEditor.closeBrace.scrollIntoView();
let editor = yield focusEditableField(ruleEditor.closeBrace);
is(inplaceEditor(ruleEditor.newPropSpan), editor, "Focused editor is the new property editor.");
is(ruleEditor.rule.textProps.length, 0, "Starting with one new text property.");
is(ruleEditor.propertyList.children.length, 1, "Starting with two property editors.");
return editor;
});
/**
* Create a new property name in the rule-view, focusing a new property editor
* by clicking on the close brace, and then entering the given text.
* Keep in mind that the rule-view knows how to handle strings with multiple
* properties, so the input text may be like: "p1:v1;p2:v2;p3:v3".
* @param {RuleEditor} ruleEditor The instance of RuleEditor that will receive
* the new property(ies)
* @param {String} inputValue The text to be entered in the new property name
* field
* @return a promise that resolves when the new property name has been entered
* and once the value field is focused
*/
let createNewRuleViewProperty = Task.async(function*(ruleEditor, inputValue) {
info("Creating a new property editor");
let editor = yield focusNewRuleViewProperty(ruleEditor);
info("Entering the value " + inputValue);
editor.input.value = inputValue;
info("Submitting the new value and waiting for value field focus");
let onFocus = once(ruleEditor.element, "focus", true);
EventUtils.synthesizeKey("VK_RETURN", {},
ruleEditor.element.ownerDocument.defaultView);
yield onFocus;
});
// TO BE UNCOMMENTED WHEN THE EYEDROPPER FINALLY LANDS
// /**
// * Given a color swatch in the ruleview, click on it to open the color picker