diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 962f1cd934..fedfde30bb 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -346,7 +346,7 @@ border-top: var(--border-width) var(--border-style) var(--border-color); - font-size: 12px; + font-size: dynamic-font(12px); } /** diff --git a/core/src/components/input/test/a11y/input.e2e.ts b/core/src/components/input/test/a11y/input.e2e.ts index 39869675f5..2ffef23a2b 100644 --- a/core/src/components/input/test/a11y/input.e2e.ts +++ b/core/src/components/input/test/a11y/input.e2e.ts @@ -2,7 +2,7 @@ import AxeBuilder from '@axe-core/playwright'; import { expect } from '@playwright/test'; import { configs, test } from '@utils/test/playwright'; -configs({ directions: ['ltr'] }).forEach(({ title, config }) => { +configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => { test.describe(title('input: a11y'), () => { test('should not have accessibility violations', async ({ page }) => { await page.goto(`/src/components/input/test/a11y`, config); @@ -11,4 +11,23 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { expect(results.violations).toEqual([]); }); }); + + test.describe(title('input: font scaling'), () => { + test('should scale text on larger font sizes', async ({ page }) => { + await page.setContent( + ` + + + `, + config + ); + + const input = page.locator('ion-input'); + await expect(input).toHaveScreenshot(screenshot('input-scale')); + }); + }); }); diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2b7fa4d25b Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a325fe4058 Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..28e46d8de8 Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..be5a13aab0 Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f6aead399f Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..93c695ba72 Binary files /dev/null and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-md-ltr-Mobile-Safari-linux.png differ