Bug 1511138 - Fix / update tests. r=smaug

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

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

@@ -20,7 +20,10 @@ 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,11 +81,12 @@ function checkHasId(test) {
 }
 
 function checkHasIdNoGEBI(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);
+  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.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")
+  if (propVal == "auto" || element.id == "nonappended")
     return 0;
   return parseFloat(propVal);
 }

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

@@ -18,10 +18,8 @@ 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,12 +32,6 @@ 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>
@@ -65,11 +57,3 @@ 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,10 +19,8 @@ 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;
@@ -36,12 +34,6 @@ 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");
 }
 
@@ -68,11 +60,3 @@ 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/test/chrome/bug418986-2.js

@@ -231,11 +231,7 @@ var generateCSSLines = function (resisting) {
 
 // __green__.
 // Returns the computed color style corresponding to green.
-var green = (function () {
-  let temp = document.createElement("span");
-  temp.style.backgroundColor = "green";
-  return getComputedStyle(temp).backgroundColor;
-})();
+var green = "rgb(0, 128, 0)";
 
 // __testCSS(resisting)__.
 // Creates a series of divs and CSS using media queries to set their
@@ -257,7 +253,9 @@ 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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   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, "rgb(0, 128, 0)");
+  is(cs.color, "");
 
   // 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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   f.remove();
-  is(cs.color, "rgb(0, 128, 0)");
+  is(cs.color, "");
 
   // 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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   e.appendChild(f);
-  is(cs.color, "rgb(0, 128, 0)");
+  is(cs.color, "");
 
   // 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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   e.className = "g";
-  is(cs.color, "rgb(0, 128, 0)");
+  is(cs.color, "");
 
   // 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, "rgb(255, 0, 0)");
+  is(cs.color, "");
   e.className = "j";
-  is(cs.color, "rgb(0, 128, 0)");
+  is(cs.color, "");
 
   SimpleTest.finish();
 });

layout/style/test/test_default_bidi_css.html

@@ -21,6 +21,7 @@ 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,7 +1,4 @@
 [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
 
@@ -10,6 +7,3 @@
 
   [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,9 +5,10 @@
 <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.createElement('div');
+  let div = document.querySelector('div');
   div.style.fontVariantAlternates = "Historical-Forms";
   assert_equals(
     getComputedStyle(div).fontVariantAlternates,