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