diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js
index ff8236c6a0..d49ff09f32 100644
--- 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
index 336cdffcc4..4cc16ed0a7 100644
--- 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
index 9269c7bf79..5cff0181b4 100644
--- a/core/src/components/modal/test/basic/index.html
+++ b/core/src/components/modal/test/basic/index.html
@@ -12,14 +12,6 @@
-
diff --git a/core/src/components/modal/test/dark-mode/index.html b/core/src/components/modal/test/dark-mode/index.html
index a104ad9ffb..d63873fd32 100644
--- a/core/src/components/modal/test/dark-mode/index.html
+++ b/core/src/components/modal/test/dark-mode/index.html
@@ -14,13 +14,6 @@