diff -r 000000000000 -r 6474c204b198 browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_02.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_02.js	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,123 @@
+/* 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 style attribute refreshes the rule-view
+
+let test = asyncTest(function*() {
+  yield addTab("data:text/html;charset=utf-8,browser_ruleview_update.js");
+
+  content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
+  let testElement = getNode("#testid");
+  testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px;");
+
+  let {toolbox, inspector, view} = yield openRuleView();
+  yield selectNode(testElement, inspector);
+
+  yield testPropertyChanges(inspector, view, testElement);
+  yield testPropertyChange0(inspector, view, testElement);
+  yield testPropertyChange1(inspector, view, testElement);
+  yield testPropertyChange2(inspector, view, testElement);
+  yield testPropertyChange3(inspector, view, testElement);
+  yield testPropertyChange4(inspector, view, testElement);
+  yield testPropertyChange5(inspector, view, testElement);
+  yield testPropertyChange6(inspector, view, testElement);
+});
+
+function* testPropertyChanges(inspector, ruleView, testElement) {
+  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");
+  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) {
+  yield changeElementStyle(testElement, "margin-top: 1px; 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], true, "margin-top", "1px", "First margin property re-enabled");
+  validateTextProp(rule.textProps[2], false, "margin-top", "5px", "Second margin property disabled");
+}
+
+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");
+}
+
+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");
+}
+
+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");
+}
+
+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");
+}
+
+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");
+}
+
+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",
+                   "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red",
+                   "shortcut property correctly set",
+                   "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.");
+  is(aProp.value, aValue, aDesc + ": value.");
+
+  is(aProp.editor.enable.hasAttribute("checked"), aEnabled, aDesc + ": enabled checkbox.");
+  is(aProp.editor.nameSpan.textContent, aName, aDesc + ": name span.");
+  is(aProp.editor.valueSpan.textContent, valueSpanText || aValue, aDesc + ": value span.");
+}