michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:  http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: "use strict";
michael@0: 
michael@0: // Test that changing the current element's style attribute refreshes the rule-view
michael@0: 
michael@0: let test = asyncTest(function*() {
michael@0:   yield addTab("data:text/html;charset=utf-8,browser_ruleview_update.js");
michael@0: 
michael@0:   content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
michael@0:   let testElement = getNode("#testid");
michael@0:   testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px;");
michael@0: 
michael@0:   let {toolbox, inspector, view} = yield openRuleView();
michael@0:   yield selectNode(testElement, inspector);
michael@0: 
michael@0:   yield testPropertyChanges(inspector, view, testElement);
michael@0:   yield testPropertyChange0(inspector, view, testElement);
michael@0:   yield testPropertyChange1(inspector, view, testElement);
michael@0:   yield testPropertyChange2(inspector, view, testElement);
michael@0:   yield testPropertyChange3(inspector, view, testElement);
michael@0:   yield testPropertyChange4(inspector, view, testElement);
michael@0:   yield testPropertyChange5(inspector, view, testElement);
michael@0:   yield testPropertyChange6(inspector, view, testElement);
michael@0: });
michael@0: 
michael@0: function* testPropertyChanges(inspector, ruleView, testElement) {
michael@0:   info("Adding a second margin-top value in the element selector");
michael@0:   let ruleEditor = ruleView._elementStyle.rules[0].editor;
michael@0:   let onRefreshed = inspector.once("rule-view-refreshed");
michael@0:   ruleEditor.addProperty("margin-top", "5px", "");
michael@0:   yield onRefreshed;
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "Original margin property active");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange0(inspector, ruleView, testElement) {
michael@0:   yield changeElementStyle(testElement, "margin-top: 1px; padding-top: 5px", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
michael@0:   validateTextProp(rule.textProps[0], true, "margin-top", "1px", "First margin property re-enabled");
michael@0:   validateTextProp(rule.textProps[2], false, "margin-top", "5px", "Second margin property disabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange1(inspector, ruleView, testElement) {
michael@0:   info("Now set it back to 5px, the 5px value should be re-enabled.");
michael@0:   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 5px;", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
michael@0:   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");
michael@0:   validateTextProp(rule.textProps[2], true, "margin-top", "5px", "Second margin property disabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange2(inspector, ruleView, testElement) {
michael@0:   info("Set the margin property to a value that doesn't exist in the editor.");
michael@0:   info("Should reuse the currently-enabled element (the second one.)");
michael@0:   yield changeElementStyle(testElement, "margin-top: 15px; padding-top: 5px;", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
michael@0:   validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled");
michael@0:   validateTextProp(rule.textProps[2], true, "margin-top", "15px", "Second margin property disabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange3(inspector, ruleView, testElement) {
michael@0:   info("Remove the padding-top attribute.  Should disable the padding property but not remove it.");
michael@0:   yield changeElementStyle(testElement, "margin-top: 5px;", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
michael@0:   validateTextProp(rule.textProps[1], false, "padding-top", "5px", "Padding property disabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange4(inspector, ruleView, testElement) {
michael@0:   info("Put the padding-top attribute back in, should re-enable the padding property.");
michael@0:   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties");
michael@0:   validateTextProp(rule.textProps[1], true, "padding-top", "25px", "Padding property enabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange5(inspector, ruleView, testElement) {
michael@0:   info("Add an entirely new property");
michael@0:   yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px; padding-left: 20px;", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4, "Added a property");
michael@0:   validateTextProp(rule.textProps[3], true, "padding-left", "20px", "Padding property enabled");
michael@0: }
michael@0: 
michael@0: function* testPropertyChange6(inspector, ruleView, testElement) {
michael@0:   info("Add an entirely new property again");
michael@0:   yield changeElementStyle(testElement, "background: url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red", inspector);
michael@0: 
michael@0:   let rule = ruleView._elementStyle.rules[0];
michael@0:   is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, "Added a property");
michael@0:   validateTextProp(rule.textProps[4], true, "background",
michael@0:                    "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red",
michael@0:                    "shortcut property correctly set",
michael@0:                    "url('chrome://branding/content/about-logo.png') repeat scroll 0% 0% #F00");
michael@0: }
michael@0: 
michael@0: function* changeElementStyle(testElement, style, inspector) {
michael@0:   let onRefreshed = inspector.once("rule-view-refreshed");
michael@0:   testElement.setAttribute("style", style);
michael@0:   yield onRefreshed;
michael@0: }
michael@0: 
michael@0: function validateTextProp(aProp, aEnabled, aName, aValue, aDesc, valueSpanText) {
michael@0:   is(aProp.enabled, aEnabled, aDesc + ": enabled.");
michael@0:   is(aProp.name, aName, aDesc + ": name.");
michael@0:   is(aProp.value, aValue, aDesc + ": value.");
michael@0: 
michael@0:   is(aProp.editor.enable.hasAttribute("checked"), aEnabled, aDesc + ": enabled checkbox.");
michael@0:   is(aProp.editor.nameSpan.textContent, aName, aDesc + ": name span.");
michael@0:   is(aProp.editor.valueSpan.textContent, valueSpanText || aValue, aDesc + ": value span.");
michael@0: }