The Tor Browser / file comparison
comparison: browser/devtools/styleinspector/test/browser_ruleview_override.js
browser/devtools/styleinspector/test/browser_ruleview_override.js
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:76c2e33f01ff |
|---|---|
| 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 the display of overridden declarations in the rule-view | |
| 8 | |
| 9 let test = asyncTest(function*() { | |
| 10 yield addTab("data:text/html;charset=utf-8,browser_ruleview_override.js"); | |
| 11 let {toolbox, inspector, view} = yield openRuleView(); | |
| 12 | |
| 13 yield simpleOverride(inspector, view); | |
| 14 yield partialOverride(inspector, view); | |
| 15 yield importantOverride(inspector, view); | |
| 16 yield disableOverride(inspector, view); | |
| 17 }); | |
| 18 | |
| 19 function* createTestContent(inspector, style) { | |
| 20 let onMutated = inspector.once("markupmutation"); | |
| 21 let styleNode = addStyle(content.document, style); | |
| 22 content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>'; | |
| 23 yield onMutated; | |
| 24 yield selectNode("#testid", inspector); | |
| 25 return styleNode; | |
| 26 } | |
| 27 | |
| 28 function* simpleOverride(inspector, view) { | |
| 29 let styleNode = yield createTestContent(inspector, '' + | |
| 30 '#testid {' + | |
| 31 ' background-color: blue;' + | |
| 32 '} ' + | |
| 33 '.testclass {' + | |
| 34 ' background-color: green;' + | |
| 35 '}'); | |
| 36 | |
| 37 let elementStyle = view._elementStyle; | |
| 38 | |
| 39 let idRule = elementStyle.rules[1]; | |
| 40 let idProp = idRule.textProps[0]; | |
| 41 is(idProp.name, "background-color", "First ID prop should be background-color"); | |
| 42 ok(!idProp.overridden, "ID prop should not be overridden."); | |
| 43 | |
| 44 let classRule = elementStyle.rules[2]; | |
| 45 let classProp = classRule.textProps[0]; | |
| 46 is(classProp.name, "background-color", "First class prop should be background-color"); | |
| 47 ok(classProp.overridden, "Class property should be overridden."); | |
| 48 | |
| 49 // Override background-color by changing the element style. | |
| 50 let elementRule = elementStyle.rules[0]; | |
| 51 elementRule.createProperty("background-color", "purple", ""); | |
| 52 yield elementRule._applyingModifications; | |
| 53 | |
| 54 let elementProp = elementRule.textProps[0]; | |
| 55 is(classProp.name, "background-color", "First element prop should now be background-color"); | |
| 56 ok(!elementProp.overridden, "Element style property should not be overridden"); | |
| 57 ok(idProp.overridden, "ID property should be overridden"); | |
| 58 ok(classProp.overridden, "Class property should be overridden"); | |
| 59 | |
| 60 styleNode.remove(); | |
| 61 } | |
| 62 | |
| 63 function* partialOverride(inspector, view) { | |
| 64 let styleNode = yield createTestContent(inspector, '' + | |
| 65 // Margin shorthand property... | |
| 66 '.testclass {' + | |
| 67 ' margin: 2px;' + | |
| 68 '}' + | |
| 69 // ... will be partially overridden. | |
| 70 '#testid {' + | |
| 71 ' margin-left: 1px;' + | |
| 72 '}'); | |
| 73 | |
| 74 let elementStyle = view._elementStyle; | |
| 75 | |
| 76 let classRule = elementStyle.rules[2]; | |
| 77 let classProp = classRule.textProps[0]; | |
| 78 ok(!classProp.overridden, | |
| 79 "Class prop shouldn't be overridden, some props are still being used."); | |
| 80 | |
| 81 for (let computed of classProp.computed) { | |
| 82 if (computed.name.indexOf("margin-left") == 0) { | |
| 83 ok(computed.overridden, "margin-left props should be overridden."); | |
| 84 } else { | |
| 85 ok(!computed.overridden, "Non-margin-left props should not be overridden."); | |
| 86 } | |
| 87 } | |
| 88 | |
| 89 styleNode.remove(); | |
| 90 } | |
| 91 | |
| 92 function* importantOverride(inspector, view) { | |
| 93 let styleNode = yield createTestContent(inspector, '' + | |
| 94 // Margin shorthand property... | |
| 95 '.testclass {' + | |
| 96 ' background-color: green !important;' + | |
| 97 '}' + | |
| 98 // ... will be partially overridden. | |
| 99 '#testid {' + | |
| 100 ' background-color: blue;' + | |
| 101 '}'); | |
| 102 | |
| 103 let elementStyle = view._elementStyle; | |
| 104 | |
| 105 let idRule = elementStyle.rules[1]; | |
| 106 let idProp = idRule.textProps[0]; | |
| 107 ok(idProp.overridden, "Not-important rule should be overridden."); | |
| 108 | |
| 109 let classRule = elementStyle.rules[2]; | |
| 110 let classProp = classRule.textProps[0]; | |
| 111 ok(!classProp.overridden, "Important rule should not be overridden."); | |
| 112 | |
| 113 styleNode.remove(); | |
| 114 | |
| 115 let elementRule = elementStyle.rules[0]; | |
| 116 let elementProp = elementRule.createProperty("background-color", "purple", "important"); | |
| 117 yield elementRule._applyingModifications; | |
| 118 | |
| 119 ok(classProp.overridden, "New important prop should override class property."); | |
| 120 ok(!elementProp.overridden, "New important prop should not be overriden."); | |
| 121 } | |
| 122 | |
| 123 function* disableOverride(inspector, view) { | |
| 124 let styleNode = yield createTestContent(inspector, '' + | |
| 125 '#testid {' + | |
| 126 ' background-color: blue;' + | |
| 127 '}' + | |
| 128 '.testclass {' + | |
| 129 ' background-color: green;' + | |
| 130 '}'); | |
| 131 | |
| 132 let elementStyle = view._elementStyle; | |
| 133 | |
| 134 let idRule = elementStyle.rules[1]; | |
| 135 let idProp = idRule.textProps[0]; | |
| 136 | |
| 137 idProp.setEnabled(false); | |
| 138 yield idRule._applyingModifications; | |
| 139 | |
| 140 let classRule = elementStyle.rules[2]; | |
| 141 let classProp = classRule.textProps[0]; | |
| 142 ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled."); | |
| 143 | |
| 144 styleNode.remove(); | |
| 145 yield inspector.once("inspector-updated"); | |
| 146 } |
