test(toolbar): update to check for images vs svgs and slotted

Author: brandyscarney

core/src/components/toolbar/test/basic/toolbar.e2e.ts

@@ -20,25 +20,25 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'], directi
         await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
       });
 
-      test('should not have visual regressions with slotted images', async ({ page }) => {
+      test('should not have visual regressions with slotted svgs', async ({ page }) => {
         await page.setContent(
           `
           <ion-header>
             <ion-toolbar>
-              <img src="/src/components/toolbar/test/image.svg" style="width: 50px; height: 50px;" slot="start"/>
+              <img src="/src/components/toolbar/test/image.svg" slot="start"/>
               <ion-title>Toolbar</ion-title>
-              <ion-img src="/src/components/toolbar/test/image.svg" style="width: 50px; height: 50px;" slot="end"/>
+              <ion-img src="/src/components/toolbar/test/image.svg" slot="end"/>
             </ion-toolbar>
           </ion-header>
         `,
           config
         );
 
         const header = page.locator('ion-header');
-        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images`));
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-svgs`));
       });
 
-      test('should not have visual regressions with slotted images with intrinsic width', async ({ page }) => {
+      test('should not have visual regressions with slotted images', async ({ page }) => {
         await page.setContent(
           `
           <ion-header>
@@ -53,7 +53,29 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'], directi
         );
 
         const header = page.locator('ion-header');
-        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images-intrinsic-width`));
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images`));
+      });
+
+      test('should not have visual regressions with nested slotted images', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-header>
+            <ion-toolbar>
+              <div slot="start">
+                <img src="https://picsum.photos/id/237/50/50" />
+              </div>
+              <ion-title>Image | Ion-Image</ion-title>
+              <div slot="end">
+                <ion-img src="https://picsum.photos/id/237/50/50"></ion-img>
+              </div>
+            </ion-toolbar>
+          </ion-header>
+        `,
+          config
+        );
+
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-nested-slotted-images`));
       });
     });
   }