fix: Use head instead of body to detect edge pseudo var bug

packages/mdc-ripple/util.ts

@@ -34,7 +34,9 @@ function detectEdgePseudoVarBug(windowObj: Window): boolean {
   const document = windowObj.document;
   const node = document.createElement('div');
   node.className = 'mdc-ripple-surface--test-edge-var-bug';
-  document.body.appendChild(node);
+  // Append to head instead of body because this script might be invoked in the
+  // head, in which case the body doesn't exist yet. The probe works either way.
+  document.head.appendChild(node);
 
   // The bug exists if ::before style ends up propagating to the parent element.
   // Additionally, getComputedStyle returns null in iframes with display: "none" in Firefox,

test/unit/mdc-ripple/helpers.js

@@ -54,6 +54,9 @@ export function createMockWindowForCssVariables() {
   const getComputedStyle = td.func('window.getComputedStyle');
   const remove = () => mockWindow.appendedNodes--;
   const mockDoc = {
+    head: {
+      appendChild: () => mockWindow.appendedNodes++,
+    },
     body: {
       appendChild: () => mockWindow.appendedNodes++,
     },