fix(ripple): Avoid errors in feature-detect within hidden iframes in …

…Firefox (#1216)

packages/mdc-ripple/util.js

@@ -37,8 +37,13 @@ function detectEdgePseudoVarBug(windowObj) {
   const node = document.createElement('div');
   node.className = 'mdc-ripple-surface--test-edge-var-bug';
   document.body.appendChild(node);
-  // Bug exists if ::before style ends up propagating to the parent element
-  const hasPseudoVarBug = windowObj.getComputedStyle(node).borderTopStyle === 'solid';
+
+  // The bug exists if ::before style ends up propagating to the parent element.
+  // Additionally, getComputedStyle returns null in iframes with display: "none" in Firefox,
+  // but Firefox is known to support CSS custom properties correctly.
+  // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+  const computedStyle = windowObj.getComputedStyle(node);
+  const hasPseudoVarBug = computedStyle !== null && computedStyle.borderTopStyle === 'solid';
   node.remove();
   return hasPseudoVarBug;
 }

test/unit/mdc-ripple/util.test.js

@@ -44,8 +44,17 @@ test('#supportsCssVariables returns true when feature-detecting its way around S
   assert.equal(windowObj.appendedNodes, 0, 'All nodes created in #supportsCssVariables should be removed');
 });
 
+test('#supportsCssVariables returns true when getComputedStyle returns null (e.g. Firefox hidden iframes)', () => {
+  const windowObj = createMockWindowForCssVariables();
+  td.when(windowObj.CSS.supports('--css-vars', td.matchers.anything())).thenReturn(true);
+  td.when(windowObj.getComputedStyle(td.matchers.anything())).thenReturn(null);
+  assert.isOk(util.supportsCssVariables(windowObj, true), 'true if getComputedStyle returns null');
+  assert.equal(windowObj.appendedNodes, 0, 'All nodes created in #supportsCssVariables should be removed');
+});
+
 test('#supportsCssVariables returns false when feature-detecting Edge var() bug with pseudo selectors', () => {
   const windowObj = createMockWindowForCssVariables();
+  td.when(windowObj.CSS.supports('--css-vars', td.matchers.anything())).thenReturn(true);
   td.when(windowObj.getComputedStyle(td.matchers.anything())).thenReturn({
     borderTopStyle: 'solid',
   });