Backed out 5 changesets (bug 1511138) for browser chrome failures on browser_selectpopup_colors.js. CLOSED TREE

Backed out changeset 65e99e6399b9 (bug 1511138)
Backed out changeset 5f5d1c50a342 (bug 1511138)
Backed out changeset e03afbff55f3 (bug 1511138)
Backed out changeset d2d3e7a822b5 (bug 1511138)
Backed out changeset e601a2fbd077 (bug 1511138)

browser/components/extensions/test/browser/browser_ext_popup_background.js

@@ -20,10 +20,7 @@ async function testPanel(browser, standAlone, initial_background) {
         // to resolve CSS named colors such as -moz-field.
         let span = document.createElementNS("http://www.w3.org/1999/xhtml", "span");
         span.style.color = default_background;
-        span.style.display = "none";
-        document.documentElement.appendChild(span);
         let default_background_computed = getComputedStyle(span).color;
-        span.remove();
 
         is(getComputedStyle(arrow).fill, default_background_computed, "Arrow fill should be the default one");
       }

dom/base/test/test_bug564863.xhtml

@@ -81,12 +81,11 @@ function checkHasId(test) {
 }
 
 function checkHasIdNoGEBI(test) {
-  const connected = test != "removed node";
-  is(div_cs.color, connected ? "rgb(10, 10, 10)" : "", "div color " + test);
-  is(a_cs.color,   connected ? "rgb(20, 20, 20)" : "", "a color " + test);
-  is(xul_cs.color, connected ? "rgb(30, 30, 30)" : "", "xul color " + test);
-  is(svg_cs.color, connected ? "rgb(40, 40, 40)" : "", "svg color " + test);
-  is(nsx_cs.color, connected ? "rgb(50, 50, 50)" : "", "nsx color " + test);
+  is(div_cs.color, "rgb(10, 10, 10)", "div color " + test);
+  is(a_cs.color,   "rgb(20, 20, 20)", "a color " + test);
+  is(xul_cs.color, "rgb(30, 30, 30)", "xul color " + test);
+  is(svg_cs.color, "rgb(40, 40, 40)", "svg color " + test);
+  is(nsx_cs.color, "rgb(50, 50, 50)", "nsx color " + test);
 
   is(div.id, "div_id", "div id " + test);
   is(a.id,   "a_id",   "a id " + test);

dom/tests/mochitest/general/test_offsets.js

@@ -216,7 +216,7 @@ function gcs(element, prop)
 {
   var propVal = (element instanceof SVGElement && (prop == "width" || prop == "height")) ?
                    element.getAttribute(prop) : getComputedStyle(element, "")[prop];
-  if (propVal == "auto" || element.id == "nonappended")
+  if (propVal == "auto")
     return 0;
   return parseFloat(propVal);
 }

layout/reftests/cssom/computed-style-cross-window-ref.html

@@ -18,8 +18,10 @@ function run() {
 
   var pout = document.getElementById("out");
   var poutnone = document.getElementById("outnone");
+  var poutdet = document.createElement("p");
   var pin = i.contentDocument.getElementsByTagName("p")[0];
   var pinnone = i.contentDocument.getElementsByTagName("p")[1];
+  var pindet = i.contentDocument.createElement("p");
 
   document.getElementById("res1").style.color =
     window.getComputedStyle(pin).color;
@@ -32,6 +34,12 @@ function run() {
 
   document.getElementById("res4").style.color =
     i.contentWindow.getComputedStyle(poutnone).color;
+
+  document.getElementById("res5").style.color =
+    window.getComputedStyle(pindet).color;
+
+  document.getElementById("res6").style.color =
+    i.contentWindow.getComputedStyle(poutdet).color;
 }
 
 </script>
@@ -57,3 +65,11 @@ iframe is.</div>
 <div style="color:blue">This paragraph is the color that
 iframeWindow.getComputedStyle says the display:none paragraph outside
 the iframe is.</div>
+
+<div style="color:blue">This paragraph is the color that
+outerWindow.getComputedStyle says the detached paragraph inside the
+iframe is.</div>
+
+<div style="color:fuchsia">This paragraph is the color that
+iframeWindow.getComputedStyle says the detached paragraph outside
+the iframe is.</div>

layout/reftests/cssom/computed-style-cross-window.html

@@ -19,8 +19,10 @@ function run() {
 
   var pout = document.getElementById("out");
   var poutnone = document.getElementById("outnone");
+  var poutdet = document.createElement("p");
   var pin = i.contentDocument.getElementsByTagName("p")[0];
   var pinnone = i.contentDocument.getElementsByTagName("p")[1];
+  var pindet = i.contentDocument.createElement("p");
 
   document.getElementById("res1").style.color =
     window.getComputedStyle(pin).color;
@@ -34,6 +36,12 @@ function run() {
   document.getElementById("res4").style.color =
     i.contentWindow.getComputedStyle(poutnone).color;
 
+  document.getElementById("res5").style.color =
+    window.getComputedStyle(pindet).color;
+
+  document.getElementById("res6").style.color =
+    i.contentWindow.getComputedStyle(poutdet).color;
+
   document.documentElement.removeAttribute("class");
 }
 
@@ -60,3 +68,11 @@ iframe is.</div>
 <div id="res4">This paragraph is the color that
 iframeWindow.getComputedStyle says the display:none paragraph outside
 the iframe is.</div>
+
+<div id="res5">This paragraph is the color that
+outerWindow.getComputedStyle says the detached paragraph inside the
+iframe is.</div>
+
+<div id="res6">This paragraph is the color that
+iframeWindow.getComputedStyle says the detached paragraph outside
+the iframe is.</div>

layout/style/nsComputedDOMStyle.cpp

@@ -508,12 +508,11 @@ already_AddRefed<ComputedStyle> nsComputedDOMStyle::DoGetComputedStyleNoFlush(
     return nullptr;
   }
 
-  if (!aElement->IsInComposedDoc()) {
-    // Don't return styles for disconnected elements, that makes no sense. This
-    // can only happen with a non-null presShell for cross-document calls.
-    //
-    // FIXME(emilio, bug 1483798): This should also not return styles for
-    // elements outside of the flat tree, not just outside of the document.
+  if (aElement->IsInNativeAnonymousSubtree() && !aElement->IsInComposedDoc()) {
+    // Normal web content can't access NAC, but Accessibility, DevTools and
+    // Editor use this same API and this may get called for anonymous content.
+    // Computing the style of a pseudo-element that doesn't have a parent
+    // doesn't really make sense.
     return nullptr;
   }
 

layout/style/test/chrome/bug418986-2.js

@@ -231,7 +231,11 @@ var generateCSSLines = function (resisting) {
 
 // __green__.
 // Returns the computed color style corresponding to green.
-var green = "rgb(0, 128, 0)";
+var green = (function () {
+  let temp = document.createElement("span");
+  temp.style.backgroundColor = "green";
+  return getComputedStyle(temp).backgroundColor;
+})();
 
 // __testCSS(resisting)__.
 // Creates a series of divs and CSS using media queries to set their
@@ -253,9 +257,7 @@ var testCSS = function (resisting) {
 var testOSXFontSmoothing = function (resisting) {
   let div = document.createElement("div");
   div.style.MozOsxFontSmoothing = "unset";
-  document.documentElement.appendChild(div);
   let readBack = window.getComputedStyle(div).MozOsxFontSmoothing;
-  div.remove();
   let smoothingPref = SpecialPowers.getBoolPref("layout.css.osx-font-smoothing.enabled", false);
   is(readBack, resisting ? "" : (smoothingPref ? "auto" : ""),
                "-moz-osx-font-smoothing");

layout/style/test/test_bug1203766.html

@@ -36,7 +36,7 @@ addLoadEvent(function() {
   var e = document.createElement("div");
   e.className = "x";
   var cs = getComputedStyle(e);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   document.body.appendChild(e);
   is(cs.color, "rgb(0, 128, 0)");
 
@@ -46,7 +46,7 @@ addLoadEvent(function() {
   cs = getComputedStyle(e);
   is(cs.color, "rgb(255, 0, 0)");
   e.remove();
-  is(cs.color, "");
+  is(cs.color, "rgb(0, 128, 0)");
 
   // Element that is removed from an out-of-document tree.
   e = document.createElement("div");
@@ -54,15 +54,15 @@ addLoadEvent(function() {
   f.className = "z";
   e.appendChild(f);
   cs = getComputedStyle(f);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   f.remove();
-  is(cs.color, "");
+  is(cs.color, "rgb(0, 128, 0)");
 
   // Element going from not in document to in document and display:none.
   e = document.createElement("div");
   e.className = "a";
   cs = getComputedStyle(e);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   document.body.appendChild(e);
   is(cs.color, "rgb(0, 128, 0)");
 
@@ -71,7 +71,7 @@ addLoadEvent(function() {
   e = document.createElement("div");
   e.className = "c";
   cs = getComputedStyle(e);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   document.querySelector(".b").appendChild(e);
   is(cs.color, "rgb(0, 128, 0)");
 
@@ -81,18 +81,18 @@ addLoadEvent(function() {
   f = document.createElement("span");
   f.className = "e";
   cs = getComputedStyle(f);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   e.appendChild(f);
-  is(cs.color, "");
+  is(cs.color, "rgb(0, 128, 0)");
 
   // Element that is outside the document when an attribute is modified to
   // cause a different rule to match.
   e = document.createElement("div");
   e.className = "f";
   cs = getComputedStyle(e);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   e.className = "g";
-  is(cs.color, "");
+  is(cs.color, "rgb(0, 128, 0)");
 
   // Element that is outside the document when an ancestor is modified to
   // cause a different rule to match.
@@ -102,9 +102,9 @@ addLoadEvent(function() {
   f.className = "i";
   e.appendChild(f);
   cs = getComputedStyle(f);
-  is(cs.color, "");
+  is(cs.color, "rgb(255, 0, 0)");
   e.className = "j";
-  is(cs.color, "");
+  is(cs.color, "rgb(0, 128, 0)");
 
   SimpleTest.finish();
 });

layout/style/test/test_default_bidi_css.html

@@ -21,7 +21,6 @@ function styleOf(name, attributes) {
         var value = attributes[name];
         element.setAttribute(name, value);
     }
-    document.body.appendChild(element);
     return getComputedStyle(element);
 }
 

testing/web-platform/meta/css/cssom/getComputedStyle-detached-subtree.html.ini

@@ -1,4 +1,7 @@
 [getComputedStyle-detached-subtree.html]
+  [getComputedStyle returns no style for detached element]
+    expected: FAIL
+
   [getComputedStyle returns no style for element in non-rendered iframe (display: none)]
     expected: FAIL
 
@@ -7,3 +10,6 @@
 
   [getComputedStyle returns no style for descendant outside the flat tree]
     expected: FAIL
+
+  [getComputedStyle returns no style for shadow tree outside of flattened tree]
+    expected: FAIL

testing/web-platform/tests/css/css-fonts/font-variant-alternates-parsing.html

@@ -5,10 +5,9 @@
 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-alternates-prop">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
-<div></div>
 <script>
 test(function() {
-  let div = document.querySelector('div');
+  let div = document.createElement('div');
   div.style.fontVariantAlternates = "Historical-Forms";
   assert_equals(
     getComputedStyle(div).fontVariantAlternates,

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

@@ -241,9 +241,7 @@ 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/components/extensions/test/browser/browser_ext_themes_sanitization.js

@@ -54,47 +54,6 @@ add_task(async function test_sanitization_css_variables() {
   await extension.unload();
 });
 
-add_task(async function test_sanitization_important() {
-  // This test checks that the sanitizer cannot be fooled with !important
-  let stylesheetAttr = `href="data:text/css,*{color:red!important}" type="text/css"`;
-  let stylesheet =
-    document.createProcessingInstruction("xml-stylesheet", stylesheetAttr);
-  let load = BrowserTestUtils.waitForEvent(stylesheet, "load");
-  document.insertBefore(stylesheet, document.documentElement);
-  await load;
-
-  let extension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      "theme": {
-        "colors": {
-          "frame": ACCENT_COLOR,
-          "tab_background_text": TEXT_COLOR,
-          "bookmark_text": "green",
-        },
-      },
-    },
-  });
-
-  await extension.startup();
-
-  let navbar = document.querySelector("#nav-bar");
-  Assert.equal(
-    window.getComputedStyle(navbar).color,
-    "rgb(255, 0, 0)",
-    "Sheet applies"
-  );
-
-  stylesheet.remove();
-
-  Assert.equal(
-    window.getComputedStyle(navbar).color,
-    "rgb(0, 128, 0)",
-    "Shouldn't be able to fool the color sanitizer with !important"
-  );
-
-  await extension.unload();
-});
-
 add_task(async function test_sanitization_transparent() {
   // This test checks whether transparent values are applied properly
   let extension = ExtensionTestUtils.loadExtension({

toolkit/modules/LightweightThemeConsumer.jsm

@@ -219,51 +219,47 @@ LightweightThemeConsumer.prototype = {
         stylesheet.remove();
       }
       if (usedVariables) {
-        for (const [variable] of usedVariables) {
+        for (const variable of usedVariables) {
           _setProperty(root, false, variable);
         }
       }
     }
-
-    this._lastExperimentData = {};
-
-    if (!active || !experiment) {
-      return;
-    }
-
-    let usedVariables = [];
-    if (properties.colors) {
-      for (const property in properties.colors) {
-        const cssVariable = experiment.colors[property];
-        const value = _sanitizeCSSColor(root.ownerDocument, properties.colors[property]);
-        usedVariables.push([cssVariable, value]);
+    if (active && experiment) {
+      this._lastExperimentData = {};
+      if (experiment.stylesheet) {
+        /* Stylesheet URLs are validated using WebExtension schemas */
+        let stylesheetAttr = `href="${experiment.stylesheet}" type="text/css"`;
+        let stylesheet = this._doc.createProcessingInstruction("xml-stylesheet",
+          stylesheetAttr);
+        this._doc.insertBefore(stylesheet, root);
+        this._lastExperimentData.stylesheet = stylesheet;
       }
-    }
-
-    if (properties.images) {
-      for (const property in properties.images) {
-        const cssVariable = experiment.images[property];
-        usedVariables.push([cssVariable, `url(${properties.images[property]})`]);
+      let usedVariables = [];
+      if (properties.colors) {
+        for (const property in properties.colors) {
+          const cssVariable = experiment.colors[property];
+          const value = _sanitizeCSSColor(root.ownerDocument, properties.colors[property]);
+          _setProperty(root, active, cssVariable, value);
+          usedVariables.push(cssVariable);
+        }
       }
-    }
-    if (properties.properties) {
-      for (const property in properties.properties) {
-        const cssVariable = experiment.properties[property];
-        usedVariables.push([cssVariable, properties.properties[property]]);
+      if (properties.images) {
+        for (const property in properties.images) {
+          const cssVariable = experiment.images[property];
+          _setProperty(root, active, cssVariable, `url(${properties.images[property]})`);
+          usedVariables.push(cssVariable);
+        }
       }
-    }
-    for (const [variable, value] of usedVariables) {
-      _setProperty(root, true, variable, value);
-    }
-    this._lastExperimentData.usedVariables = usedVariables;
-
-    if (experiment.stylesheet) {
-      /* Stylesheet URLs are validated using WebExtension schemas */
-      let stylesheetAttr = `href="${experiment.stylesheet}" type="text/css"`;
-      let stylesheet = this._doc.createProcessingInstruction("xml-stylesheet",
-        stylesheetAttr);
-      this._doc.insertBefore(stylesheet, root);
-      this._lastExperimentData.stylesheet = stylesheet;
+      if (properties.properties) {
+        for (const property in properties.properties) {
+          const cssVariable = experiment.properties[property];
+          _setProperty(root, active, cssVariable, properties.properties[property]);
+          usedVariables.push(cssVariable);
+        }
+      }
+      this._lastExperimentData.usedVariables = usedVariables;
+    } else {
+      this._lastExperimentData = null;
     }
   },
 };
@@ -297,8 +293,6 @@ function _setProperty(elem, active, variableName, value) {
 }
 
 function _setProperties(root, active, themeData) {
-  let properties = [];
-
   for (let map of [toolkitVariableMap, ThemeVariableMap]) {
     for (let [cssVarName, definition] of map) {
       const {
@@ -309,6 +303,7 @@ function _setProperties(root, active, themeData) {
       } = definition;
       let elem = optionalElementID ? root.ownerDocument.getElementById(optionalElementID)
                                    : root;
+
       let val = themeData[lwtProperty];
       if (isColor) {
         val = _sanitizeCSSColor(root.ownerDocument, val);
@@ -316,14 +311,9 @@ function _setProperties(root, active, themeData) {
           val = processColor(_parseRGBA(val), elem);
         }
       }
-      properties.push([elem, cssVarName, val]);
+      _setProperty(elem, active, cssVarName, val);
     }
   }
-
-  // Set all the properties together, since _sanitizeCSSColor flushes.
-  for (const [elem, cssVarName, val] of properties) {
-    _setProperty(elem, active, cssVarName, val);
-  }
 }
 
 function _sanitizeCSSColor(doc, cssColor) {
@@ -333,22 +323,12 @@ function _sanitizeCSSColor(doc, cssColor) {
   const HTML_NS = "http://www.w3.org/1999/xhtml";
   // style.color normalizes color values and makes invalid ones black, so a
   // simple round trip gets us a sanitized color value.
-  // Use !important so that the theme's stylesheets cannot override us.
   let div = doc.createElementNS(HTML_NS, "div");
-  div.style.setProperty("color", "black", "important");
-  div.style.setProperty("display", "none", "important");
+  div.style.color = "black";
   let span = doc.createElementNS(HTML_NS, "span");
-  span.style.setProperty("color", cssColor, "important");
-
-  // CSS variables are not allowed and should compute to black.
-  if (span.style.color.includes("var(")) {
-    span.style.color = "";
-  }
-
+  span.style.color = cssColor;
   div.appendChild(span);
-  doc.documentElement.appendChild(div);
   cssColor = doc.defaultView.getComputedStyle(span).color;
-  div.remove();
   return cssColor;
 }