diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss index 10c3bfe149a..d78519fa113 100644 --- a/core/src/components/input/input.md.scss +++ b/core/src/components/input/input.md.scss @@ -36,8 +36,17 @@ background-size: $input-md-input-clear-icon-size; } -// Input Max Length Counter +// Input Bottom // ---------------------------------------------------------------- +/** + * If the input has a validity state, the + * border and label should reflect that as a color. + */ +:host(.ion-touched.ion-valid) .input-bottom, +:host(.ion-touched.ion-invalid) .input-bottom { + --border-color: var(--highlight-color); +} + .input-bottom .counter { letter-spacing: .0333333333em; } @@ -60,6 +69,11 @@ color: var(--highlight-color); } +:host(.ion-touched.ion-valid) label, +:host(.ion-touched.ion-invalid) label { + color: var(--highlight-color); +} + // Input Highlight // ---------------------------------------------------------------- diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss index 9d29d76195e..0e52dc90bf0 100644 --- a/core/src/components/input/input.scss +++ b/core/src/components/input/input.scss @@ -352,6 +352,24 @@ padding-inline-start: 16px; } +// Input Highlight +// ---------------------------------------------------------------- + +:host(.ion-touched.ion-invalid) { + --highlight-color: var(--highlight-color-invalid); +} + +:host(.ion-touched.ion-valid) { + --highlight-color: var(--highlight-color-valid); +} + +// Input Native +// ---------------------------------------------------------------- + +:host(.has-focus) input { + caret-color: var(--highlight-color); +} + // Input Label // ---------------------------------------------------------------- diff --git a/core/src/components/input/test/color/index.html b/core/src/components/input/test/color/index.html new file mode 100644 index 00000000000..8a6da9202cd --- /dev/null +++ b/core/src/components/input/test/color/index.html @@ -0,0 +1,164 @@ + + + + + Input - Color + + + + + + + + + + + + + + Input - Color + + + + +

No Fill

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+ +

Solid

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+ +

Outline

+
+
+

Start

+ +
+ +
+

End

+ +
+ +
+

Fixed

+ +
+ +
+

Floating

+ +
+ +
+

Stacked

+ +
+
+ + + + diff --git a/core/src/components/input/test/color/input.e2e.ts b/core/src/components/input/test/color/input.e2e.ts new file mode 100644 index 00000000000..c069db6704e --- /dev/null +++ b/core/src/components/input/test/color/input.e2e.ts @@ -0,0 +1,149 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('input: color', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + skip.mode( + 'ios', + 'iOS does not have any color theming besides the caret which cannot be captured in a stable manner in screenshots.' + ); + }); + + /** + * Manually setting the .has-focus class + * lets us quickly test the rendering of a + * focused input without need to wait for + * focus events. + */ + test.describe('input: fill none', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-no-fill-color-start-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-no-fill-color-end-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-no-fill-color-fixed-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot( + `input-no-fill-color-floating-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-no-fill-color-stacked-${page.getSnapshotSettings()}.png`); + }); + }); + test.describe('input: fill solid', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-solid-color-start-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-solid-color-end-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-solid-color-fixed-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-solid-color-floating-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-solid-color-stacked-${page.getSnapshotSettings()}.png`); + }); + }); + test.describe('input: fill outline', () => { + test('should set label and highlight color on focus with start label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-outline-color-start-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with end label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-outline-color-end-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with fixed label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-outline-color-fixed-${page.getSnapshotSettings()}.png`); + }); + test('should set label and highlight color on focus with floating label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot( + `input-outline-color-floating-${page.getSnapshotSettings()}.png` + ); + }); + test('should set label and highlight color on focus with stacked label placement', async ({ page }) => { + await page.setContent(` + + `); + + const input = page.locator('ion-input'); + expect(await input.screenshot()).toMatchSnapshot(`input-outline-color-stacked-${page.getSnapshotSettings()}.png`); + }); + }); +}); diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..2737b69fa93 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ef0cabc2986 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..91f9e73d04e Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4892b28d0a2 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..83f1a82459d Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f56a0f64d15 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d0a0c2b74cf Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5914444a3f4 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b71b953cd54 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..d0a0c2b74cf Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5914444a3f4 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b71b953cd54 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..b6d9f5e2951 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ef41cd7e841 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..811f5834282 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-no-fill-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..92fd9c4ba99 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..f2144fd9d99 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5f827fac9d0 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f28b4b9124f Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bcfa5ed53a5 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..9d04c36bdf4 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..048270c6045 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..58fb56b1c62 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d22d6d04b30 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..048270c6045 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..58fb56b1c62 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..d22d6d04b30 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a3ddee12e43 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..441a82db88f Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cf4702c0c34 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-outline-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..6a2ef744240 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..317054b3922 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..5f88a47fa86 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-end-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..58532b71e64 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..d52781c73fd Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..eab2360637e Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-fixed-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5eea6ba8a07 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..696ac88d472 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b84095bfc61 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-floating-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5eea6ba8a07 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..696ac88d472 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..b84095bfc61 Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-stacked-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..9fde037bddd Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4b281f3f66d Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..bcec205d0dd Binary files /dev/null and b/core/src/components/input/test/color/input.e2e.ts-snapshots/input-solid-color-start-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/input/test/highlight/input.e2e.ts b/core/src/components/input/test/highlight/input.e2e.ts index 9770f742843..51ef5ae634d 100644 --- a/core/src/components/input/test/highlight/input.e2e.ts +++ b/core/src/components/input/test/highlight/input.e2e.ts @@ -5,7 +5,6 @@ test.describe('input: highlights', () => { test.beforeEach(({ skip }) => { skip.rtl(); }); - test.describe('input: no fill', () => { test('should render valid state correctly', async ({ page }) => { await page.setContent(`