Bug 986201 - Return correct specificity for element styles instead of causing an exception. r=jwalker
authorSami Jaktholm <sjakthol@outlook.com>
Mon, 28 Jul 2014 08:53:00 +0200
changeset 196518 a9c0471594e5d452f3e68a385ae2387daea40ac4
parent 196517 fe30b8d01baa971f798f7a2833afd4aabd951c17
child 196519 bc27aaabefa89b118b2b0bec16f10cd95147a0f0
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersjwalker
bugs986201
milestone34.0a1
Bug 986201 - Return correct specificity for element styles instead of causing an exception. r=jwalker
browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
toolkit/devtools/styleinspector/css-logic.js
--- a/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
+++ b/browser/devtools/styleinspector/test/browser_styleinspector_csslogic-specificity.js
@@ -45,21 +45,27 @@ let test = asyncTest(function*() {
 
     let selector = new CssSelector(cssRule, selectorText, i);
     let expected = getExpectedSpecificity(selectorText);
     let specificity = DOMUtils.getSpecificity(selector.cssRule,
                                               selector.selectorIndex)
     is(specificity, expected,
       'Selector "' + selectorText + '" has a specificity of ' + expected);
   }
+
+  info("Testing specificity of element.style");
+  let colorProp = cssLogic.getPropertyInfo("background");
+  is(colorProp.matchedSelectors[0].specificity, 0x01000000,
+     "Element styles have specificity of 0x01000000 (16777216).");
 });
 
 function createDocument() {
   let doc = content.document;
   doc.body.innerHTML = getStylesheetText();
+  doc.body.style.background = "blue";
   doc.title = "Computed view specificity test";
 }
 
 function getStylesheetText() {
   info("Creating the test stylesheet");
   let text = TEST_DATA.map(i=>i.text).join(",");
   return '<style type="text/css">' + text + " {color:red;}</style>";
 }
--- a/toolkit/devtools/styleinspector/css-logic.js
+++ b/toolkit/devtools/styleinspector/css-logic.js
@@ -1501,16 +1501,24 @@ CssSelector.prototype = {
    *
    * @see http://www.w3.org/TR/css3-selectors/#specificity
    * @see http://www.w3.org/TR/CSS2/selector.html
    *
    * @return {Number} The selector's specificity.
    */
   get specificity()
   {
+    if (this.elementStyle) {
+      // We can't ask specificity from DOMUtils as element styles don't provide
+      // CSSStyleRule interface DOMUtils expect. However, specificity of element
+      // style is constant, 1,0,0,0 or 0x01000000, just return the constant
+      // directly. @see http://www.w3.org/TR/CSS2/cascade.html#specificity
+      return 0x01000000;
+    }
+
     if (this._specificity) {
       return this._specificity;
     }
 
     this._specificity = domUtils.getSpecificity(this.cssRule.domRule,
                                                 this.selectorIndex);
 
     return this._specificity;