javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ShaneK
2026-01-06 09:09:19 -08:00
parent 4fe98a42ff
commit fc496043d8
4 changed files with 25 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/scripts/testing/scripts.js
View File

@@ -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.

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

@@ -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(() =>

8
core/src/components/modal/test/basic/index.html
View File

@@ -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>

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

@@ -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));