diff --git a/core/src/components/textarea/test/rows/index.html b/core/src/components/textarea/test/rows/index.html new file mode 100644 index 0000000000..c1012d12be --- /dev/null +++ b/core/src/components/textarea/test/rows/index.html @@ -0,0 +1,144 @@ + + + + + Textarea - Rows + + + + + + + + + + + + + + Textarea - Rows + + + + +
+
+

Rows: 3

+ +
+ +
+

Rows: 2

+ +
+ +
+

Rows: 5

+ +
+ +
+

Rows: 8

+ +
+ +
+

Rows: 3, Size Small

+ +
+ +
+

Rows: 3, Size Medium

+ +
+ +
+

Rows: 3, Size Large

+ +
+ +
+

Rows: 3, Auto-grow

+ +
+
+ + + + diff --git a/core/src/components/textarea/test/rows/textarea.e2e.ts b/core/src/components/textarea/test/rows/textarea.e2e.ts new file mode 100644 index 0000000000..2ab026014c --- /dev/null +++ b/core/src/components/textarea/test/rows/textarea.e2e.ts @@ -0,0 +1,207 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * Rows attribute is only available in the Ionic theme. + * When set, it increases the container min-height to accommodate the number of rows. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('textarea: rows'), () => { + test('should respect rows attribute and set min-height', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3`)); + }); + + test('should respect rows attribute with different values', async ({ page }) => { + await page.setContent( + ` +
+ + + + + + + + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`)); + }); + + test('should respect rows attribute with fill outline and solid', async ({ page }) => { + await page.setContent( + ` +
+ + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-4-fill`)); + }); + + test('should respect rows attribute with different sizes', async ({ page }) => { + await page.setContent( + ` +
+ + + +
+ `, + config + ); + + const container = page.locator('#container'); + await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`)); + }); + + test('should respect rows attribute with value content', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-with-value`)); + }); + + test('should respect rows when auto-grow is enabled', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`)); + }); + }); +});