Bug 1511138 - Fix LightweightThemeConsumer's use of getComputedStyle. r=jaws,mconley

See D13472 for spec quotes and such. Other browsers don't allow
getting computed styles in disconnected subtrees and we agreed to follow suit
(it does make sense because when you're not on the flat tree it's not defined
what you're supposed to inherit from, specially in presence of Shadow DOM).

Also, it allows the style system to rely on the DOM being in a sane state.

Differential Revision: https://phabricator.services.mozilla.com/D13551

toolkit/components/extensions/test/browser/browser_ext_themes_autocomplete_popup.js

@@ -241,7 +241,9 @@ add_task(async function test_popup_url() {
   // Calculate what GrayText should be. May differ between platforms.
   let span = document.createXULElement("span");
   span.style.color = "GrayText";
+  document.documentElement.appendChild(span);
   let GRAY_TEXT = window.getComputedStyle(span).color;
+  span.remove();
 
   separator = document.getAnonymousElementByAttribute(results[1], "anonid", "separator");
   Assert.equal(window.getComputedStyle(separator).color,

toolkit/modules/LightweightThemeConsumer.jsm

@@ -325,10 +325,19 @@ function _sanitizeCSSColor(doc, cssColor) {
   // simple round trip gets us a sanitized color value.
   let div = doc.createElementNS(HTML_NS, "div");
   div.style.color = "black";
+  div.style.display = "none";
   let span = doc.createElementNS(HTML_NS, "span");
   span.style.color = cssColor;
+
+  // CSS variables are not allowed and should compute to black.
+  if (span.style.color.indexOf("var(") !== -1) {
+    span.style.color = "";
+  }
+
   div.appendChild(span);
+  doc.documentElement.appendChild(div);
   cssColor = doc.defaultView.getComputedStyle(span).color;
+  div.remove();
   return cssColor;
 }