<ion-content class="ion-padding">

<button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</button>

<button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</button>

<button id="stacked-long-message" onclick="openToast(stackedLongMessageConfig)">

Open Stacked Layout Toast with Long Message

</button>

</ion-content>

<script>

message: 'This is a stacked layout toast.',

layout: 'stacked',

};

const stackedLongMessageConfig = {

...baselineConfig,

message:

'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.',

layout: 'stacked',

};

</script>

</ion-app>

</body>

configs().forEach(({ title, screenshot, config }) => {

test.describe(title('toast: stacked layout'), () => {

test('should render stacked buttons', async ({ page }) => {

test('should render stacked toast', async ({ page }) => {

await page.goto('/src/components/toast/test/layout', config);

const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');

const toastWrapper = page.locator('ion-toast .toast-wrapper');

await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked`));

});

test('should render stacked toast with long message', async ({ page }, testInfo) => {

testInfo.annotations.push({

type: 'issue',

description: 'https://github.com/ionic-team/ionic-framework/issues/30908',

});

await page.goto('/src/components/toast/test/layout', config);

const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');

await page.click('#stacked-long-message');

await ionToastDidPresent.next();

const toastWrapper = page.locator('ion-toast .toast-wrapper');

await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked-long-message`));

});

});

});