aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xjs/controllers/styles-controller.js68
1 files changed, 54 insertions, 14 deletions
diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js
index a25a05df..8ab07b20 100755
--- a/js/controllers/styles-controller.js
+++ b/js/controllers/styles-controller.js
@@ -426,7 +426,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
426 ///// rule to the calling method 426 ///// rule to the calling method
427 return { 427 return {
428 useImportant : useImportant, 428 useImportant : useImportant,
429 ruleToOverride : dominantRule 429 ruleToOverride : dominantRule,
430 singleTargetBackup : this._getFirstSingleTargetRule(matchedRules.slice(1), doc)
430 }; 431 };
431 } 432 }
432 433
@@ -674,6 +675,8 @@ var stylesController = exports.StylesController = Montage.create(Component, {
674 if(sheetAIndex === sheetBIndex) { 675 if(sheetAIndex === sheetBIndex) {
675 ruleAIndex = this.getRuleIndex(ruleA); ruleBIndex = this.getRuleIndex(ruleB); 676 ruleAIndex = this.getRuleIndex(ruleA); ruleBIndex = this.getRuleIndex(ruleB);
676 return ruleAIndex < ruleBIndex ? 1 : (ruleAIndex > ruleBIndex) ? -1 : 0; 677 return ruleAIndex < ruleBIndex ? 1 : (ruleAIndex > ruleBIndex) ? -1 : 0;
678 } else {
679 return sheetAIndex < sheetBIndex ? 1 : (sheetAIndex > sheetBIndex) ? -1 : 0;
677 } 680 }
678 } 681 }
679 682
@@ -737,6 +740,40 @@ var stylesController = exports.StylesController = Montage.create(Component, {
737 console.error('StylesController::_getMostSpecificSelectorForElement - no matching selectors in specificity array.'); 740 console.error('StylesController::_getMostSpecificSelectorForElement - no matching selectors in specificity array.');
738 } 741 }
739 }, 742 },
743
744
745 ///// Has Greater Specificity
746 ///// A method that returns true if the first argument has higher
747 ///// specificity than the second argument
748 ///// An element has to be supplied to determine which selector
749 ///// to evaluate within grouped selectors
750 hasGreaterSpecificity : {
751 value: function(rule1, rule2, element) {
752 var a = this._getMostSpecificSelectorForElement(element, rule1[this.CONST.SPECIFICITY_KEY]),
753 b = this._getMostSpecificSelectorForElement(element, rule2[this.CONST.SPECIFICITY_KEY]),
754 win = element.ownerDocument.defaultView,
755 order;
756
757 order = this.compareSpecificity(a.specificity, b.specificity);
758
759 if(order === 0) {
760 /// Tie. Sway one way or other based on stylesheet/rule order
761 sheetAIndex = nj.toArray(win.document.styleSheets).indexOf(rule1.parentStyleSheet);
762 sheetBIndex = nj.toArray(win.document.styleSheets).indexOf(rule2.parentStyleSheet);
763 /// If tied again (same sheet), determine which is further down in the sheet
764 if(sheetAIndex === sheetBIndex) {
765 ruleAIndex = this.getRuleIndex(rule1); ruleBIndex = this.getRuleIndex(rule2);
766 return ruleAIndex < ruleBIndex ? 1 : (ruleAIndex > ruleBIndex) ? -1 : 0;
767 } else {
768 return sheetAIndex < sheetBIndex ? 1 : (sheetAIndex > sheetBIndex) ? -1 : 0;
769 }
770 }
771
772 return (order < 0);
773
774 }
775 },
776
740 777
741 ///// Get First Single Target Rule 778 ///// Get First Single Target Rule
742 ///// Loops through the array of rules sequentially, returning the first 779 ///// Loops through the array of rules sequentially, returning the first
@@ -1035,8 +1072,12 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1035 1072
1036 } 1073 }
1037 1074
1075 if(cacheMatchesMany) {
1076 dominantRule = this.getDominantRuleForElement(element, property, true, isStageElement);
1077 }
1078
1038 ///// Did we find a dominant rule? 1079 ///// Did we find a dominant rule?
1039 if(!dominantRule) { 1080 else if(!dominantRule) {
1040 ///// No. This means there was no rule with this property, and no 1081 ///// No. This means there was no rule with this property, and no
1041 ///// single-target rule we can use to add the style to. 1082 ///// single-target rule we can use to add the style to.
1042 ///// There's is no chance of colliding with another rule, so we 1083 ///// There's is no chance of colliding with another rule, so we
@@ -1047,18 +1088,17 @@ var stylesController = exports.StylesController = Montage.create(Component, {
1047 1088
1048 } else if(dominantRule.ruleToOverride) { 1089 } else if(dominantRule.ruleToOverride) {
1049 ///// Do we have to override a rule? 1090 ///// Do we have to override a rule?
1050 ////// Yes. The override object has the rule we need to override 1091 ///// Well, let's first see if a higher-specificity, single-target
1051 override = this.createOverrideRule(dominantRule.ruleToOverride, element); 1092 ///// rule exists
1052 useImportant = dominantRule.useImportant; 1093 if(dominantRule.singleTargetBackup && this.hasGreaterSpecificity(dominantRule.singleTargetBackup, dominantRule.ruleToOverride, element)) {
1053 dominantRule = override.rule; 1094 dominantRule = dominantRule.singleTargetBackup;
1054 this.addClass(element, override.className); 1095 } else {
1055 } else if(cacheMatchesMany) { 1096 ///// No. The override object has the rule we need to override
1056 ///// Only happens when the cached rule applies to multiple 1097 override = this.createOverrideRule(dominantRule.ruleToOverride, element);
1057 ///// elements - we must create override 1098 useImportant = dominantRule.useImportant;
1058 override = this.createOverrideRule(dominantRule, element); 1099 dominantRule = override.rule;
1059 useImportant = !!dominantRule.style.getPropertyPriority(property); 1100 this.addClass(element, override.className);
1060 dominantRule = override.rule; 1101 }
1061 this.addClass(element, override.className);
1062 } 1102 }
1063 1103
1064 1104