@@ -0,0 +1,80 @@
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('item-option: custom'), () => {
9+test.describe('CSS shadow parts', () => {
10+test('should be able to customize native part', async ({ page }) => {
11+await page.setContent(
12+`
13+ <style>
14+ ion-item-option::part(native) {
15+ background-color: red;
16+ }
17+ </style>
18+19+ <ion-item-option>Option</ion-item-option>
20+ `,
21+config
22+);
23+24+const itemOption = page.locator('ion-item-option');
25+const backgroundColor = await itemOption.evaluate((el) => {
26+const shadowRoot = el.shadowRoot;
27+const native = shadowRoot?.querySelector('.button-native');
28+return native ? window.getComputedStyle(native).backgroundColor : '';
29+});
30+expect(backgroundColor).toBe('rgb(255, 0, 0)');
31+});
32+33+test('should be able to customize inner part', async ({ page }) => {
34+await page.setContent(
35+`
36+ <style>
37+ ion-item-option::part(inner) {
38+ background-color: green;
39+ }
40+ </style>
41+42+ <ion-item-option>Option</ion-item-option>
43+ `,
44+config
45+);
46+47+const itemOption = page.locator('ion-item-option');
48+const backgroundColor = await itemOption.evaluate((el) => {
49+const shadowRoot = el.shadowRoot;
50+const inner = shadowRoot?.querySelector('.button-inner');
51+return inner ? window.getComputedStyle(inner).backgroundColor : '';
52+});
53+expect(backgroundColor).toBe('rgb(0, 128, 0)');
54+});
55+56+test('should be able to customize container part', async ({ page }) => {
57+await page.setContent(
58+`
59+ <style>
60+ ion-item-option::part(container) {
61+ background-color: blue;
62+ }
63+ </style>
64+65+ <ion-item-option>Option</ion-item-option>
66+ `,
67+config
68+);
69+70+const itemOption = page.locator('ion-item-option');
71+const backgroundColor = await itemOption.evaluate((el) => {
72+const shadowRoot = el.shadowRoot;
73+const container = shadowRoot?.querySelector('.horizontal-wrapper');
74+return container ? window.getComputedStyle(container).backgroundColor : '';
75+});
76+expect(backgroundColor).toBe('rgb(0, 0, 255)');
77+});
78+});
79+});
80+});