diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts index b9b46793c98..bf0b6b43e00 100644 --- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts +++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts @@ -180,3 +180,67 @@ configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEa }); }); }); + +configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('toolbar: basic'), () => { + test.describe(title('slot content'), () => { + test('should not have visual regressions with slotted svgs', async ({ page }) => { + await page.setContent( + ` + + + + Toolbar + + + + `, + config + ); + + const header = page.locator('ion-header'); + await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-svgs`)); + }); + + test('should not have visual regressions with slotted images', async ({ page }) => { + await page.setContent( + ` + + + + Toolbar + + + + `, + config + ); + + const header = page.locator('ion-header'); + await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-slotted-images`)); + }); + + test('should not have visual regressions with nested slotted images', async ({ page }) => { + await page.setContent( + ` + + +
+ +
+ Toolbar +
+ +
+
+
+ `, + config + ); + + const header = page.locator('ion-header'); + await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-nested-slotted-images`)); + }); + }); + }); +}); diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..40e2c089c94 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..418ce45bab1 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..21a76a3bddb Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ff4f842e0ac Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..fa0dc283eec Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..00534f0d19b Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a02f7f1829a Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..2238d30ef6f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..131b17e4d87 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-nested-slotted-images-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5dd73f73d0f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..7b4380a16c8 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..f6a0715c348 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..4e3269b7c31 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..15d2803caf5 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..a9afbed3635 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..5c052283753 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..56431ccae83 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..973ffded60f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-images-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..13c9387e29b Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4fe6b7c2270 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..48f64465326 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..1b3faee8f04 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e141f432e3e Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..741263d954f Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..de9e8af2520 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..bba2c73f564 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cdc0df8fa95 Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-slotted-svgs-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/toolbar/test/image.svg b/core/src/components/toolbar/test/image.svg new file mode 100644 index 00000000000..9cd6d0bc3f4 --- /dev/null +++ b/core/src/components/toolbar/test/image.svg @@ -0,0 +1 @@ + diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss index a203b10619b..64b587a9b25 100644 --- a/core/src/components/toolbar/toolbar.ionic.scss +++ b/core/src/components/toolbar/toolbar.ionic.scss @@ -70,12 +70,12 @@ // Ionic Toolbar Slot Placement // -------------------------------------------------- // We're using the slots to force the main toolbar content to be -// cenetered in the toolbar. This is a bit of a hack but it works. +// centered in the toolbar. This is a bit of a hack but it works. // The main content is placed in the center and then JavaScript evaluates // the sizes of the different slots and sets what size the pairs should be // based on the larger one. We then use `flex-basis` to set the expected // size of the slots and disable `flex-shrink` so that the smaller slot cannot -// shrink and throw off the center, we also diable flex-grow so that slots do +// shrink and throw off the center, we also disable flex-grow so that slots do // not grow more than they need. The slots are paired up so the mirroring slots // always have the same size. That is, start and end are paired and primary // and secondary are paired. All of this works together to force the main diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx index 0672a9ec584..34ab353f019 100644 --- a/core/src/components/toolbar/toolbar.tsx +++ b/core/src/components/toolbar/toolbar.tsx @@ -110,9 +110,28 @@ export class Toolbar implements ComponentInterface { const slots = ['start', 'end', 'primary', 'secondary']; slots.forEach((slot) => { if (this.el.classList.contains(`has-${slot}-content`)) { - const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLElement | null; + const slotElement = this.el.shadowRoot?.querySelector(`slot[name="${slot}"]`) as HTMLSlotElement | null; if (slotElement) { + // Check if the slot contains an img or ion-img + const assignedElements = slotElement.assignedElements({ flatten: true }); + const hasImg = assignedElements.some((el) => { + if (el.tagName === 'IMG' || el.tagName === 'ION-IMG') { + return true; + } + // Check for nested images + return el.querySelector('img, ion-img'); + }); + + // Temporarily allow slot to size to content by setting flex-basis + // to 'auto'. This ensures that slotted images can render at their + // intrinsic width for measurement. + if (hasImg) { + const { name } = slotPairs.find((pair) => pair.slots.includes(slot))!; + this.el.style.setProperty(`--${name}-size`, 'auto'); + } + const width = slotElement.offsetWidth; + if (width > 0) { slotWidths.set(slot, width); } else {