chore(test): zero out safe-area insets in test environments

ShaneK · ShaneK · commit fc496043d8ac · 2026-01-06T09:48:49.000-08:00
diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
@@ -48,6 +48,24 @@
     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.
diff --git a/core/src/components/app/test/safe-area/app.e2e.ts b/core/src/components/app/test/safe-area/app.e2e.ts
@@ -53,11 +53,17 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {
           // Remove the safe area class
           html.classList.remove('safe-area');
 
-          // Set the safe area inset variables
+          // 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.
           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(() =>
diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html
@@ -12,14 +12,6 @@
     <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>
diff --git a/core/src/components/modal/test/dark-mode/index.html b/core/src/components/modal/test/dark-mode/index.html
@@ -14,13 +14,6 @@
     <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));
