@@ -0,0 +1,34 @@
1+import { expect } from '@playwright/test';
2+import { configs, test } from '@utils/test/playwright';
3+4+/**
5+ * This behavior does not vary across modes/directions
6+ */
7+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
8+test.describe(title('list-header: custom'), () => {
9+test.describe('CSS shadow parts', () => {
10+test('should be able to customize inner part', async ({ page }) => {
11+await page.setContent(
12+`
13+ <style>
14+ ion-list-header::part(inner) {
15+ background-color: red;
16+ }
17+ </style>
18+19+ <ion-list-header>Header</ion-list-header>
20+ `,
21+config
22+);
23+24+const header = page.locator('ion-list-header');
25+const backgroundColor = await header.evaluate((el) => {
26+const shadowRoot = el.shadowRoot;
27+const inner = shadowRoot?.querySelector('.list-header-inner');
28+return inner ? window.getComputedStyle(inner).backgroundColor : '';
29+});
30+expect(backgroundColor).toBe('rgb(255, 0, 0)');
31+});
32+});
33+});
34+});