diff options
Diffstat (limited to 'devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js')
-rw-r--r-- | devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js new file mode 100644 index 000000000..6ee385faa --- /dev/null +++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_02.js @@ -0,0 +1,153 @@ +/* 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 + +const TEST_URI = ` + <div id="testid" class="testclass" style="margin-top: 1px; padding-top: 5px;"> + Styled Node + </div> +`; + +add_task(function* () { + yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + let {inspector, view, testActor} = yield openRuleView(); + yield selectNode("#testid", inspector); + + yield testPropertyChanges(inspector, view); + yield testPropertyChange0(inspector, view, "#testid", testActor); + yield testPropertyChange1(inspector, view, "#testid", testActor); + yield testPropertyChange2(inspector, view, "#testid", testActor); + yield testPropertyChange3(inspector, view, "#testid", testActor); + yield testPropertyChange4(inspector, view, "#testid", testActor); + yield testPropertyChange5(inspector, view, "#testid", testActor); + yield testPropertyChange6(inspector, view, "#testid", testActor); +}); + +function* testPropertyChanges(inspector, ruleView) { + 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", "", true); + yield onRefreshed; + + let rule = ruleView._elementStyle.rules[0]; + validateTextProp(rule.textProps[0], false, "margin-top", "1px", + "Original margin property active"); +} + +function* testPropertyChange0(inspector, ruleView, selector, testActor) { + yield changeElementStyle(selector, "margin-top: 1px; padding-top: 5px", + inspector, testActor); + + 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, selector, testActor) { + info("Now set it back to 5px, the 5px value should be re-enabled."); + yield changeElementStyle(selector, "margin-top: 5px; padding-top: 5px;", + inspector, testActor); + + 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, selector, testActor) { + 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(selector, "margin-top: 15px; padding-top: 5px;", + inspector, testActor); + + 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, selector, testActor) { + info("Remove the padding-top attribute. Should disable the padding " + + "property but not remove it."); + yield changeElementStyle(selector, "margin-top: 5px;", inspector, testActor); + + 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, selector, testActor) { + info("Put the padding-top attribute back in, should re-enable the " + + "padding property."); + yield changeElementStyle(selector, "margin-top: 5px; padding-top: 25px", + inspector, testActor); + + 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, selector, testActor) { + info("Add an entirely new property"); + yield changeElementStyle(selector, + "margin-top: 5px; padding-top: 25px; padding-left: 20px;", + inspector, testActor); + + 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, selector, testActor) { + info("Add an entirely new property again"); + yield changeElementStyle(selector, "background: red " + + "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0%", + inspector, testActor); + + let rule = ruleView._elementStyle.rules[0]; + is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, + "Added a property"); + validateTextProp(rule.textProps[4], true, "background", + "red url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0%", + "shortcut property correctly set"); +} + +function* changeElementStyle(selector, style, inspector, testActor) { + let onRefreshed = inspector.once("rule-view-refreshed"); + yield testActor.setAttribute(selector, "style", style); + yield onRefreshed; +} + +function validateTextProp(prop, enabled, name, value, desc) { + is(prop.enabled, enabled, desc + ": enabled."); + is(prop.name, name, desc + ": name."); + is(prop.value, value, desc + ": value."); + + is(prop.editor.enable.hasAttribute("checked"), enabled, + desc + ": enabled checkbox."); + is(prop.editor.nameSpan.textContent, name, desc + ": name span."); + is(prop.editor.valueSpan.textContent, + value, desc + ": value span."); +} |