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 f2f5c8872e2..26b8f63a76c 100644 --- a/core/src/components/app/test/safe-area/app.e2e.ts +++ b/core/src/components/app/test/safe-area/app.e2e.ts @@ -18,20 +18,56 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => { await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`)); }; + test.beforeEach(async ({ page }) => { await page.goto(`/src/components/app/test/safe-area`, config); }); - test('should not have visual regressions with action sheet', async ({ page }) => { - await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet'); - }); - test('should not have visual regressions with menu', async ({ page }) => { - await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu'); - }); - test('should not have visual regressions with picker', async ({ page }) => { - await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker'); + + test.describe(title('Ionic safe area variables'), () => { + test.beforeEach(async ({ page }) => { + const htmlTag = page.locator('html'); + const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area')); + + expect(hasSafeAreaClass).toBe(true); + }); + + test('should not have visual regressions with action sheet', async ({ page }) => { + await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet'); + }); + test('should not have visual regressions with menu', async ({ page }) => { + await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu'); + }); + test('should not have visual regressions with picker', async ({ page }) => { + await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker'); + }); + test('should not have visual regressions with toast', async ({ page }) => { + await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast'); + }); }); - test('should not have visual regressions with toast', async ({ page }) => { - await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast'); + + test.describe(title('Capacitor safe area variables'), () => { + test.beforeEach(async ({ page }) => { + const toggleButton = page.locator('#toggle-safe-area'); + await toggleButton.click(); + + const htmlTag = page.locator('html'); + const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area-capacitor')); + + expect(hasSafeAreaClass).toBe(true); + }); + + test('should not have visual regressions with action sheet', async ({ page }) => { + await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'capacitor-action-sheet'); + }); + test('should not have visual regressions with menu', async ({ page }) => { + await testOverlay(page, '#show-menu', 'ionDidOpen', 'capacitor-menu'); + }); + test('should not have visual regressions with picker', async ({ page }) => { + await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'capacitor-picker'); + }); + test('should not have visual regressions with toast', async ({ page }) => { + await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'capacitor-toast'); + }); }); }); }); diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png index 51197814d40..175dca6793f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png index d6978bd6ab2..8b0adc13048 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png index 7b6912a77b6..f88c144430a 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png index 9bdb2a0050d..a29f4783542 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png index 2160bf71c71..ba39e589c7a 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png index e18e09840ac..4b869daed61 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..175dca6793f Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..8b0adc13048 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f88c144430a Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a29f4783542 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ba39e589c7a Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4b869daed61 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..909ea6f1075 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..73dc871e505 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..6899bb6fed1 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..c2d54cb48fc Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..90c566d67ad Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..728798eb562 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ca8122dd2c9 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..45544bfe59e Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..2de068eb149 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..02dc6197c3a Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2414bc3970f Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f6f4ab2bcc1 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-picker-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..76ee841766e Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..06fcd788955 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f9f794cf8dd Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dac73108d5f Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..6343e24f682 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..60a33deb053 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-capacitor-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png index 2925d01cc40..909ea6f1075 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png index 625d61957f4..73dc871e505 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png index 636bbd74326..6899bb6fed1 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png index 6bf467070f7..c2d54cb48fc 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png index 31175c53c52..90c566d67ad 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png index d1e17793401..728798eb562 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png index a72dc772243..ca8122dd2c9 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png index 6796d9a484f..45544bfe59e 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png index 2d747790320..2de068eb149 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png index dd8e90750f3..02dc6197c3a 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png index eaa50d6e5fb..2414bc3970f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png index a291fe4c078..f6f4ab2bcc1 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png index 2217a13a189..76ee841766e 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png index 6d49226ac1d..06fcd788955 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png index 3619f94220f..f9f794cf8dd 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png index 69df91ae522..dac73108d5f 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png index e8afb2df67d..6343e24f682 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png index fd6120b1681..60a33deb053 100644 Binary files a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/index.html b/core/src/components/app/test/safe-area/index.html index 4ad7e6beed4..3cb581c9a4a 100644 --- a/core/src/components/app/test/safe-area/index.html +++ b/core/src/components/app/test/safe-area/index.html @@ -19,6 +19,13 @@ --ion-safe-area-bottom: 40px; --ion-safe-area-left: 40px; } + + .safe-area-capacitor { + --safe-area-inset-top: 40px; + --safe-area-inset-right: 40px; + --safe-area-inset-bottom: 40px; + --safe-area-inset-left: 40px; + } @@ -48,6 +55,7 @@ + Card @@ -143,6 +151,19 @@ document.body.appendChild(toast); await toast.present(); } + + // toggle between safe area classes based on button click + function toggleSafeArea() { + console.log('Toggling safe area classes'); + const htmlTag = document.documentElement; + if (htmlTag.classList.contains('safe-area-capacitor')) { + htmlTag.classList.remove('safe-area-capacitor'); + htmlTag.classList.add('safe-area'); + } else { + htmlTag.classList.remove('safe-area'); + htmlTag.classList.add('safe-area-capacitor'); + } + } diff --git a/core/src/css/core.scss b/core/src/css/core.scss index db694fc6a07..94e920e0442 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -252,10 +252,12 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa { @supports (padding-top: env(safe-area-inset-top)) { html { - --ion-safe-area-top: env(safe-area-inset-top); - --ion-safe-area-bottom: env(safe-area-inset-bottom); - --ion-safe-area-left: env(safe-area-inset-left); - --ion-safe-area-right: env(safe-area-inset-right); + // `--safe-area-inset-*` are set by Capacitor + // @see https://capacitorjs.com/docs/apis/system-bars#android-note + --ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); + --ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); + --ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); + --ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); } }