chore(tests): fixing tests having issues with mutation observers

Author: ShaneK

core/scripts/testing/scripts.js

@@ -48,24 +48,6 @@
     document.head.appendChild(style);
   }
 
-  /**
-   * Zero out safe-area insets in test environments.
-   * The default 20px --ion-safe-area-top from core.scss is for legacy
-   * status bar simulation but doesn't represent real browser behavior.
-   * Tests that need to verify safe-area handling should explicitly set
-   * these values in their test HTML files.
-   */
-  const safeAreaStyle = document.createElement('style');
-  safeAreaStyle.innerHTML = `
-    :root {
-      --ion-safe-area-top: 0px;
-      --ion-safe-area-bottom: 0px;
-      --ion-safe-area-left: 0px;
-      --ion-safe-area-right: 0px;
-    }
-  `;
-  document.head.appendChild(safeAreaStyle);
-
   /**
    * The `palette` param is used to load a specific palette
    * for the theme.

core/src/components/app/test/safe-area/app.e2e.ts

@@ -53,17 +53,11 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
           // Remove the safe area class
           html.classList.remove('safe-area');
 
-          // Set the Capacitor safe area inset variables.
-          // Also set --ion-safe-area-* directly since test environments zero these out,
-          // which would prevent the CSS var() cascade from working.
+          // Set the safe area inset variables
           html.style.setProperty('--safe-area-inset-top', '10px');
           html.style.setProperty('--safe-area-inset-bottom', '20px');
           html.style.setProperty('--safe-area-inset-left', '30px');
           html.style.setProperty('--safe-area-inset-right', '40px');
-          html.style.setProperty('--ion-safe-area-top', 'var(--safe-area-inset-top)');
-          html.style.setProperty('--ion-safe-area-bottom', 'var(--safe-area-inset-bottom)');
-          html.style.setProperty('--ion-safe-area-left', 'var(--safe-area-inset-left)');
-          html.style.setProperty('--ion-safe-area-right', 'var(--safe-area-inset-right)');
         });
 
         const top = await page.evaluate(() =>

core/src/components/content/content.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
+import { win } from '@utils/browser';
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
@@ -192,7 +193,7 @@ export class Content implements ComponentInterface {
 
     // Watch for dynamic header/footer changes (common in React conditional rendering)
     const parent = this.el.parentElement;
-    if (parent && !this.parentMutationObserver) {
+    if (parent && !this.parentMutationObserver && win !== undefined && 'MutationObserver' in win) {
       this.parentMutationObserver = new MutationObserver(() => {
         this.updateSiblingDetection();
         forceUpdate(this);

core/src/components/modal/modal.tsx

@@ -1,5 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
+import { win } from '@utils/browser';
 import { findIonContent, printIonContentErrorMsg } from '@utils/content';
 import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate';
 import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from '@utils/helpers';
@@ -941,7 +942,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.updateFooterPadding();
 
     // Watch for dynamic footer additions/removals (e.g., async data loading)
-    if (!this.footerObserver) {
+    if (!this.footerObserver && win !== undefined && 'MutationObserver' in win) {
       this.footerObserver = new MutationObserver(() => this.updateFooterPadding());
       this.footerObserver.observe(this.el, { childList: true, subtree: true });
     }

core/src/components/modal/test/basic/index.html

@@ -12,6 +12,14 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      :root {
+        --ion-safe-area-top: 20px;
+        --ion-safe-area-bottom: 20px;
+        --ion-safe-area-right: 20px;
+        --ion-safe-area-left: 20px;
+      }
+    </style>
   </head>
 
   <body>

core/src/components/modal/test/dark-mode/index.html

@@ -14,6 +14,13 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
+      :root {
+        --ion-safe-area-top: 20px;
+        --ion-safe-area-bottom: 20px;
+        --ion-safe-area-right: 20px;
+        --ion-safe-area-left: 20px;
+      }
+
       .grid {
         display: grid;
         grid-template-columns: repeat(3, minmax(250px, 1fr));