The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_02.js
browser/devtools/styleinspector/test/browser_ruleview_refresh-on-attribute-change_02.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:aad68aa6f178 |
|---|---|
| 1 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */ | |
| 2 /* Any copyright is dedicated to the Public Domain. | |
| 3 http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| 4 | |
| 5 "use strict"; | |
| 6 | |
| 7 // Test that changing the current element's style attribute refreshes the rule-view | |
| 8 | |
| 9 let test = asyncTest(function*() { | |
| 10 yield addTab("data:text/html;charset=utf-8,browser_ruleview_update.js"); | |
| 11 | |
| 12 content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>'; | |
| 13 let testElement = getNode("#testid"); | |
| 14 testElement.setAttribute("style", "margin-top: 1px; padding-top: 5px;"); | |
| 15 | |
| 16 let {toolbox, inspector, view} = yield openRuleView(); | |
| 17 yield selectNode(testElement, inspector); | |
| 18 | |
| 19 yield testPropertyChanges(inspector, view, testElement); | |
| 20 yield testPropertyChange0(inspector, view, testElement); | |
| 21 yield testPropertyChange1(inspector, view, testElement); | |
| 22 yield testPropertyChange2(inspector, view, testElement); | |
| 23 yield testPropertyChange3(inspector, view, testElement); | |
| 24 yield testPropertyChange4(inspector, view, testElement); | |
| 25 yield testPropertyChange5(inspector, view, testElement); | |
| 26 yield testPropertyChange6(inspector, view, testElement); | |
| 27 }); | |
| 28 | |
| 29 function* testPropertyChanges(inspector, ruleView, testElement) { | |
| 30 info("Adding a second margin-top value in the element selector"); | |
| 31 let ruleEditor = ruleView._elementStyle.rules[0].editor; | |
| 32 let onRefreshed = inspector.once("rule-view-refreshed"); | |
| 33 ruleEditor.addProperty("margin-top", "5px", ""); | |
| 34 yield onRefreshed; | |
| 35 | |
| 36 let rule = ruleView._elementStyle.rules[0]; | |
| 37 validateTextProp(rule.textProps[0], false, "margin-top", "1px", "Original margin property active"); | |
| 38 } | |
| 39 | |
| 40 function* testPropertyChange0(inspector, ruleView, testElement) { | |
| 41 yield changeElementStyle(testElement, "margin-top: 1px; padding-top: 5px", inspector); | |
| 42 | |
| 43 let rule = ruleView._elementStyle.rules[0]; | |
| 44 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties"); | |
| 45 validateTextProp(rule.textProps[0], true, "margin-top", "1px", "First margin property re-enabled"); | |
| 46 validateTextProp(rule.textProps[2], false, "margin-top", "5px", "Second margin property disabled"); | |
| 47 } | |
| 48 | |
| 49 function* testPropertyChange1(inspector, ruleView, testElement) { | |
| 50 info("Now set it back to 5px, the 5px value should be re-enabled."); | |
| 51 yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 5px;", inspector); | |
| 52 | |
| 53 let rule = ruleView._elementStyle.rules[0]; | |
| 54 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties"); | |
| 55 validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled"); | |
| 56 validateTextProp(rule.textProps[2], true, "margin-top", "5px", "Second margin property disabled"); | |
| 57 } | |
| 58 | |
| 59 function* testPropertyChange2(inspector, ruleView, testElement) { | |
| 60 info("Set the margin property to a value that doesn't exist in the editor."); | |
| 61 info("Should reuse the currently-enabled element (the second one.)"); | |
| 62 yield changeElementStyle(testElement, "margin-top: 15px; padding-top: 5px;", inspector); | |
| 63 | |
| 64 let rule = ruleView._elementStyle.rules[0]; | |
| 65 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties"); | |
| 66 validateTextProp(rule.textProps[0], false, "margin-top", "1px", "First margin property re-enabled"); | |
| 67 validateTextProp(rule.textProps[2], true, "margin-top", "15px", "Second margin property disabled"); | |
| 68 } | |
| 69 | |
| 70 function* testPropertyChange3(inspector, ruleView, testElement) { | |
| 71 info("Remove the padding-top attribute. Should disable the padding property but not remove it."); | |
| 72 yield changeElementStyle(testElement, "margin-top: 5px;", inspector); | |
| 73 | |
| 74 let rule = ruleView._elementStyle.rules[0]; | |
| 75 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties"); | |
| 76 validateTextProp(rule.textProps[1], false, "padding-top", "5px", "Padding property disabled"); | |
| 77 } | |
| 78 | |
| 79 function* testPropertyChange4(inspector, ruleView, testElement) { | |
| 80 info("Put the padding-top attribute back in, should re-enable the padding property."); | |
| 81 yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px", inspector); | |
| 82 | |
| 83 let rule = ruleView._elementStyle.rules[0]; | |
| 84 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 3, "Correct number of properties"); | |
| 85 validateTextProp(rule.textProps[1], true, "padding-top", "25px", "Padding property enabled"); | |
| 86 } | |
| 87 | |
| 88 function* testPropertyChange5(inspector, ruleView, testElement) { | |
| 89 info("Add an entirely new property"); | |
| 90 yield changeElementStyle(testElement, "margin-top: 5px; padding-top: 25px; padding-left: 20px;", inspector); | |
| 91 | |
| 92 let rule = ruleView._elementStyle.rules[0]; | |
| 93 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 4, "Added a property"); | |
| 94 validateTextProp(rule.textProps[3], true, "padding-left", "20px", "Padding property enabled"); | |
| 95 } | |
| 96 | |
| 97 function* testPropertyChange6(inspector, ruleView, testElement) { | |
| 98 info("Add an entirely new property again"); | |
| 99 yield changeElementStyle(testElement, "background: url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red", inspector); | |
| 100 | |
| 101 let rule = ruleView._elementStyle.rules[0]; | |
| 102 is(rule.editor.element.querySelectorAll(".ruleview-property").length, 5, "Added a property"); | |
| 103 validateTextProp(rule.textProps[4], true, "background", | |
| 104 "url(\"chrome://branding/content/about-logo.png\") repeat scroll 0% 0% red", | |
| 105 "shortcut property correctly set", | |
| 106 "url('chrome://branding/content/about-logo.png') repeat scroll 0% 0% #F00"); | |
| 107 } | |
| 108 | |
| 109 function* changeElementStyle(testElement, style, inspector) { | |
| 110 let onRefreshed = inspector.once("rule-view-refreshed"); | |
| 111 testElement.setAttribute("style", style); | |
| 112 yield onRefreshed; | |
| 113 } | |
| 114 | |
| 115 function validateTextProp(aProp, aEnabled, aName, aValue, aDesc, valueSpanText) { | |
| 116 is(aProp.enabled, aEnabled, aDesc + ": enabled."); | |
| 117 is(aProp.name, aName, aDesc + ": name."); | |
| 118 is(aProp.value, aValue, aDesc + ": value."); | |
| 119 | |
| 120 is(aProp.editor.enable.hasAttribute("checked"), aEnabled, aDesc + ": enabled checkbox."); | |
| 121 is(aProp.editor.nameSpan.textContent, aName, aDesc + ": name span."); | |
| 122 is(aProp.editor.valueSpan.textContent, valueSpanText || aValue, aDesc + ": value span."); | |
| 123 } |
