diff --git a/core/src/components/img/test/basic/img.e2e-legacy.ts b/core/src/components/img/test/basic/img.e2e-legacy.ts
deleted file mode 100644
index de68443783..0000000000
--- a/core/src/components/img/test/basic/img.e2e-legacy.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { expect } from '@playwright/test';
-import type { EventSpy } from '@utils/test/playwright';
-import { test } from '@utils/test/playwright';
-
-test.describe('img: basic', () => {
- test.beforeEach(({ skip }) => {
- skip.rtl();
- skip.mode('ios');
- });
-
- // TODO FW-3596
- test.describe.skip('image successfully loads', () => {
- let ionImgWillLoad: EventSpy;
- let ionImgDidLoad: EventSpy;
-
- test.beforeEach(async ({ page }) => {
- await page.route('**/*', (route) => {
- if (route.request().resourceType() === 'image') {
- return route.fulfill({
- status: 200,
- contentType: 'image/png',
- body: Buffer.from(
- 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIwAAAABJRU5ErkJggg==',
- 'base64'
- ),
- });
- }
- return route.continue();
- });
-
- /**
- * We render the img intentionally without providing a source,
- * to allow the event spies to be set-up before the events
- * can be emitted.
- *
- * Later we will assign an image source to load.
- */
- await page.setContent('');
-
- ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
- ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
-
- const ionImg = page.locator('ion-img');
- await ionImg.evaluate((el: HTMLIonImgElement) => {
- el.src = 'https://via.placeholder.com/150';
- return el;
- });
- });
-
- test('should emit ionImgWillLoad', async () => {
- await ionImgWillLoad.next();
-
- expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
- });
-
- test('should emit ionImgDidLoad', async () => {
- await ionImgDidLoad.next();
-
- expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
- });
- });
-
- test.describe('image fails to load', () => {
- let ionError: EventSpy;
-
- test.beforeEach(async ({ page }) => {
- await page.route('**/*', (route) =>
- route.request().resourceType() === 'image' ? route.abort() : route.continue()
- );
-
- /**
- * We render the img intentionally without providing a source,
- * to allow the event spies to be set-up before the events
- * can be emitted.
- *
- * Later we will assign an image source to load.
- */
- await page.setContent('');
-
- ionError = await page.spyOnEvent('ionError');
-
- const ionImg = page.locator('ion-img');
- await ionImg.evaluate((el: HTMLIonImgElement) => {
- el.src = 'https://via.placeholder.com/150';
- return el;
- });
- });
-
- test('should emit ionError', async () => {
- await ionError.next();
-
- expect(ionError).toHaveReceivedEventTimes(1);
- });
- });
-});
diff --git a/core/src/components/img/test/basic/img.e2e.ts b/core/src/components/img/test/basic/img.e2e.ts
new file mode 100644
index 0000000000..a1bc302ed8
--- /dev/null
+++ b/core/src/components/img/test/basic/img.e2e.ts
@@ -0,0 +1,92 @@
+import { expect } from '@playwright/test';
+import type { EventSpy } from '@utils/test/playwright';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('img: basic'), () => {
+ // TODO FW-3596
+ test.describe.skip('image successfully loads', () => {
+ let ionImgWillLoad: EventSpy;
+ let ionImgDidLoad: EventSpy;
+
+ test.beforeEach(async ({ page }) => {
+ await page.route('**/*', (route) => {
+ if (route.request().resourceType() === 'image') {
+ return route.fulfill({
+ status: 200,
+ contentType: 'image/png',
+ body: Buffer.from(
+ 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIwAAAABJRU5ErkJggg==',
+ 'base64'
+ ),
+ });
+ }
+ return route.continue();
+ });
+
+ /**
+ * We render the img intentionally without providing a source,
+ * to allow the event spies to be set-up before the events
+ * can be emitted.
+ *
+ * Later we will assign an image source to load.
+ */
+ await page.setContent('', config);
+
+ ionImgDidLoad = await page.spyOnEvent('ionImgDidLoad');
+ ionImgWillLoad = await page.spyOnEvent('ionImgWillLoad');
+
+ const ionImg = page.locator('ion-img');
+ await ionImg.evaluate((el: HTMLIonImgElement) => {
+ el.src = 'https://via.placeholder.com/150';
+ return el;
+ });
+ });
+
+ test('should emit ionImgWillLoad', async () => {
+ await ionImgWillLoad.next();
+
+ expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+ });
+
+ test('should emit ionImgDidLoad', async () => {
+ await ionImgDidLoad.next();
+
+ expect(ionImgWillLoad).toHaveReceivedEventTimes(1);
+ });
+ });
+
+ test.describe('image fails to load', () => {
+ let ionError: EventSpy;
+
+ test.beforeEach(async ({ page }) => {
+ await page.route('**/*', (route) =>
+ route.request().resourceType() === 'image' ? route.abort() : route.continue()
+ );
+
+ /**
+ * We render the img intentionally without providing a source,
+ * to allow the event spies to be set-up before the events
+ * can be emitted.
+ *
+ * Later we will assign an image source to load.
+ */
+ await page.setContent('', config);
+
+ ionError = await page.spyOnEvent('ionError');
+
+ const ionImg = page.locator('ion-img');
+ await ionImg.evaluate((el: HTMLIonImgElement) => {
+ el.src = 'https://via.placeholder.com/150';
+ return el;
+ });
+ });
+
+ test('should emit ionError', async () => {
+ await ionError.next();
+
+ expect(ionError).toHaveReceivedEventTimes(1);
+ });
+ });
+ });
+});
diff --git a/core/src/components/img/test/draggable/img.e2e-legacy.ts b/core/src/components/img/test/draggable/img.e2e-legacy.ts
deleted file mode 100644
index 0a228fe01f..0000000000
--- a/core/src/components/img/test/draggable/img.e2e-legacy.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('img: draggable', () => {
- test('should correctly set draggable attribute on inner img element', async ({ page }) => {
- await page.goto('/src/components/img/test/draggable');
-
- const imgDraggableTrue = page.locator('#img-draggable-true img');
- await expect(imgDraggableTrue).toHaveAttribute('draggable', 'true');
-
- const imgDraggableFalse = page.locator('#img-draggable-false img');
- await expect(imgDraggableFalse).toHaveAttribute('draggable', 'false');
-
- const imgDraggableUnset = page.locator('#img-draggable-unset img');
- expect(await imgDraggableUnset.getAttribute('draggable')).toBeNull();
- });
-});
diff --git a/core/src/components/img/test/draggable/img.e2e.ts b/core/src/components/img/test/draggable/img.e2e.ts
new file mode 100644
index 0000000000..482676bf55
--- /dev/null
+++ b/core/src/components/img/test/draggable/img.e2e.ts
@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+ test.describe(title('img: draggable'), () => {
+ test('should correctly set draggable attribute on inner img element', async ({ page }) => {
+ await page.goto('/src/components/img/test/draggable', config);
+
+ const imgDraggableTrue = page.locator('#img-draggable-true img');
+ await expect(imgDraggableTrue).toHaveAttribute('draggable', 'true');
+
+ const imgDraggableFalse = page.locator('#img-draggable-false img');
+ await expect(imgDraggableFalse).toHaveAttribute('draggable', 'false');
+
+ const imgDraggableUnset = page.locator('#img-draggable-unset img');
+ expect(await imgDraggableUnset.getAttribute('draggable')).toBeNull();
+ });
+ });
+});