1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/styleinspector/test/browser_ruleview_override.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,146 @@
1.4 +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
1.5 +/* Any copyright is dedicated to the Public Domain.
1.6 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.7 +
1.8 +"use strict";
1.9 +
1.10 +// Test the display of overridden declarations in the rule-view
1.11 +
1.12 +let test = asyncTest(function*() {
1.13 + yield addTab("data:text/html;charset=utf-8,browser_ruleview_override.js");
1.14 + let {toolbox, inspector, view} = yield openRuleView();
1.15 +
1.16 + yield simpleOverride(inspector, view);
1.17 + yield partialOverride(inspector, view);
1.18 + yield importantOverride(inspector, view);
1.19 + yield disableOverride(inspector, view);
1.20 +});
1.21 +
1.22 +function* createTestContent(inspector, style) {
1.23 + let onMutated = inspector.once("markupmutation");
1.24 + let styleNode = addStyle(content.document, style);
1.25 + content.document.body.innerHTML = '<div id="testid" class="testclass">Styled Node</div>';
1.26 + yield onMutated;
1.27 + yield selectNode("#testid", inspector);
1.28 + return styleNode;
1.29 +}
1.30 +
1.31 +function* simpleOverride(inspector, view) {
1.32 + let styleNode = yield createTestContent(inspector, '' +
1.33 + '#testid {' +
1.34 + ' background-color: blue;' +
1.35 + '} ' +
1.36 + '.testclass {' +
1.37 + ' background-color: green;' +
1.38 + '}');
1.39 +
1.40 + let elementStyle = view._elementStyle;
1.41 +
1.42 + let idRule = elementStyle.rules[1];
1.43 + let idProp = idRule.textProps[0];
1.44 + is(idProp.name, "background-color", "First ID prop should be background-color");
1.45 + ok(!idProp.overridden, "ID prop should not be overridden.");
1.46 +
1.47 + let classRule = elementStyle.rules[2];
1.48 + let classProp = classRule.textProps[0];
1.49 + is(classProp.name, "background-color", "First class prop should be background-color");
1.50 + ok(classProp.overridden, "Class property should be overridden.");
1.51 +
1.52 + // Override background-color by changing the element style.
1.53 + let elementRule = elementStyle.rules[0];
1.54 + elementRule.createProperty("background-color", "purple", "");
1.55 + yield elementRule._applyingModifications;
1.56 +
1.57 + let elementProp = elementRule.textProps[0];
1.58 + is(classProp.name, "background-color", "First element prop should now be background-color");
1.59 + ok(!elementProp.overridden, "Element style property should not be overridden");
1.60 + ok(idProp.overridden, "ID property should be overridden");
1.61 + ok(classProp.overridden, "Class property should be overridden");
1.62 +
1.63 + styleNode.remove();
1.64 +}
1.65 +
1.66 +function* partialOverride(inspector, view) {
1.67 + let styleNode = yield createTestContent(inspector, '' +
1.68 + // Margin shorthand property...
1.69 + '.testclass {' +
1.70 + ' margin: 2px;' +
1.71 + '}' +
1.72 + // ... will be partially overridden.
1.73 + '#testid {' +
1.74 + ' margin-left: 1px;' +
1.75 + '}');
1.76 +
1.77 + let elementStyle = view._elementStyle;
1.78 +
1.79 + let classRule = elementStyle.rules[2];
1.80 + let classProp = classRule.textProps[0];
1.81 + ok(!classProp.overridden,
1.82 + "Class prop shouldn't be overridden, some props are still being used.");
1.83 +
1.84 + for (let computed of classProp.computed) {
1.85 + if (computed.name.indexOf("margin-left") == 0) {
1.86 + ok(computed.overridden, "margin-left props should be overridden.");
1.87 + } else {
1.88 + ok(!computed.overridden, "Non-margin-left props should not be overridden.");
1.89 + }
1.90 + }
1.91 +
1.92 + styleNode.remove();
1.93 +}
1.94 +
1.95 +function* importantOverride(inspector, view) {
1.96 + let styleNode = yield createTestContent(inspector, '' +
1.97 + // Margin shorthand property...
1.98 + '.testclass {' +
1.99 + ' background-color: green !important;' +
1.100 + '}' +
1.101 + // ... will be partially overridden.
1.102 + '#testid {' +
1.103 + ' background-color: blue;' +
1.104 + '}');
1.105 +
1.106 + let elementStyle = view._elementStyle;
1.107 +
1.108 + let idRule = elementStyle.rules[1];
1.109 + let idProp = idRule.textProps[0];
1.110 + ok(idProp.overridden, "Not-important rule should be overridden.");
1.111 +
1.112 + let classRule = elementStyle.rules[2];
1.113 + let classProp = classRule.textProps[0];
1.114 + ok(!classProp.overridden, "Important rule should not be overridden.");
1.115 +
1.116 + styleNode.remove();
1.117 +
1.118 + let elementRule = elementStyle.rules[0];
1.119 + let elementProp = elementRule.createProperty("background-color", "purple", "important");
1.120 + yield elementRule._applyingModifications;
1.121 +
1.122 + ok(classProp.overridden, "New important prop should override class property.");
1.123 + ok(!elementProp.overridden, "New important prop should not be overriden.");
1.124 +}
1.125 +
1.126 +function* disableOverride(inspector, view) {
1.127 + let styleNode = yield createTestContent(inspector, '' +
1.128 + '#testid {' +
1.129 + ' background-color: blue;' +
1.130 + '}' +
1.131 + '.testclass {' +
1.132 + ' background-color: green;' +
1.133 + '}');
1.134 +
1.135 + let elementStyle = view._elementStyle;
1.136 +
1.137 + let idRule = elementStyle.rules[1];
1.138 + let idProp = idRule.textProps[0];
1.139 +
1.140 + idProp.setEnabled(false);
1.141 + yield idRule._applyingModifications;
1.142 +
1.143 + let classRule = elementStyle.rules[2];
1.144 + let classProp = classRule.textProps[0];
1.145 + ok(!classProp.overridden, "Class prop should not be overridden after id prop was disabled.");
1.146 +
1.147 + styleNode.remove();
1.148 + yield inspector.once("inspector-updated");
1.149 +}
