Open Bug 874074 Opened 11 years ago Updated 2 years ago

getCSSPropertyNames missing some properties & includes others not returned by getComputedStyle

Categories

(Core :: CSS Parsing and Computation, defect)

defect

Tracking

()

People

(Reporter: miker, Unassigned)

References

Details

domUtils.getCSSPropertyNames(domUtils.EXCLUDE_SHORTHANDS) returns a slightly different list of CSS property names than those returned by getComputedStyle(). In getComputedStyle but not missing from getCSSPropertyNames: - border-left-color - border-left-style - border-left-width - border-right-color - border-right-style - border-right-width - margin-left - margin-right - overflow - padding-left - padding-right - text-decoration In getCSSPropertyNames but missing from getComputedStyle: - marks - orphans - page - size - widows - -moz-script-level STR: 1. Ensure that devtools.chrome.enabled is true 2. Open the web console 3. Open Scratchpad 4. From Environment menu select Browser. 5. Paste the following code into Scratchpad and run it: ############################ let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils); let names = domUtils.getCSSPropertyNames(domUtils.EXCLUDE_SHORTHANDS); let computed = content.getComputedStyle(content.document.body); let missingFromGetCSSPropertyNames = []; for (let prop of computed) { if (names.indexOf(prop) == -1) { missingFromGetCSSPropertyNames.push(prop); } } log("In getComputedStyle but missing from getCSSPropertyNames:"); log(JSON.stringify(missingFromGetCSSPropertyNames)); let missingFromGetComputedStyle = []; for (let prop of names) { if (!computed.getPropertyValue(prop)) { missingFromGetComputedStyle.push(prop); } } log("In getCSSPropertyNames but not in getComputedStyle:") log(JSON.stringify(missingFromGetComputedStyle)); function log(msg) { content.console.log(msg); } ############################
Hmm. So border-left-color is in fact a shorthand, at least internally. It actually expands to border-left-color-value and border-left-color-ltr-source and border-left-color-rtl-source. Similar for the other left/right styles you see there. "overflow" is definitely a shorthand, expanding to overflow-x and overflow-y. This is the case in the spec as well. "text-decoration" is also a shorthand, expanding to -moz-text-decoration-color, -moz-text-decoration-line, -moz-text-decoration-style. Note that when things that used to not be shorthands start being shorthands (which was the case for all of the things above), they can't be removed from getComputedStyle, which is why it's still showing those. In fact, I expect that getComputedStyle might get changed at some point to show values for all shorthands, as long as the relevant longhand values can be represented as a shorthand. So that part of the behavior seems correct to me, though the fact that the -left and -right properties are shorthands internally but not in the spec is a bit annoying and we may need to special-case them somehow, depending on what the EXCLUDE_SHORTHANDS option to this API is supposed to be used for. The marks/orphans/page/size/widows situation is more interesting. Those are values that we parse and have specified values for but never compute and do not have computed values for (hence they naturally do not show up in computed style). -moz-script-level is the only "internal" property we have that is not PARSE_INACCESSIBLE, which means that it can actually be set by stylesheets and whatnot, but is not visible as a property on the computed style object. Functionally, I believe it's identical to the marks/etc case: shows up in specified values but not in computed values, but also can't be queried via CSS2Properties (though I suspect it can be queried via CSSStyleDeclaration). What should happen with all of these edge cases is an interesting question.... It really depends on what this API is being used for.
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.