role={isMainContent ? 'main' : undefined}

class={createColorClasses(this.color, {

[mode]: true,

'content-fullscreen': this.fullscreen,

'content-sizing': hostContext('ion-popover', this.el),

overscroll: forceOverscroll,

[`content-${rtl}`]: true,

await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));

});

/**

* The content-fullscreen class is added when fullscreen is true. The

* fullscreen attribute is not reflected in Angular, Vue, or React, so

* the class is needed for users to create custom themes.

*/

test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {

await page.setContent(

`

<ion-content fullscreen>

<p>Hello</p>

</ion-content>

`,

config

);

const content = page.locator('ion-content');

await expect(content).toHaveClass(/content-fullscreen/);

});

test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {

await page.setContent(

`

<ion-content>

<p>Hello</p>

</ion-content>

`,

config

);

const content = page.locator('ion-content');

await expect(content).not.toHaveClass(/content-fullscreen/);

});

});

});