diff --git a/core/src/components/footer/test/basic/e2e.ts b/core/src/components/footer/test/basic/e2e.ts deleted file mode 100644 index 82cc1c55ee..0000000000 --- a/core/src/components/footer/test/basic/e2e.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('footer: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/footer/test/basic?ionic:_testing=true', - }); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/footer/test/basic/footer.e2e.ts b/core/src/components/footer/test/basic/footer.e2e.ts new file mode 100644 index 0000000000..155bb94ab2 --- /dev/null +++ b/core/src/components/footer/test/basic/footer.e2e.ts @@ -0,0 +1,57 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: basic', () => { + test.describe('footer: rendering', () => { + test('should not have visual regressions with basic footer', async ({ page }) => { + await page.setContent(` + + + Footer - Default + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-diff-${page.getSnapshotSettings()}.png`); + }); + }); + + test.describe('footer: feature rendering', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with no border', async ({ page }) => { + await page.setContent(` + + + Footer - No Border + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-no-border-diff-${page.getSnapshotSettings()}.png`); + }); + + test('should not have visual regressions with translucent footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.setContent(` + +
+ +
+ + Footer - Translucent + + + `); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-translucent-diff-${page.getSnapshotSettings()}.png`); + }); + }); +}); diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eaf5115dda Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..194e58051d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64ecaa0fe1 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..eaf5115dda Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..194e58051d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..64ecaa0fe1 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cae9bfb58f Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..20aa854180 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f52c7d0a07 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..433f06246d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..c1355394d9 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8176f1ea20 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..432dccd7e7 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9267557401 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..164e1152aa Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3cbe28a291 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..97a42667e9 Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d32036669e Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-no-border-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3e0375dc6a Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..615344ad8d Binary files /dev/null and b/core/src/components/footer/test/basic/footer.e2e.ts-snapshots/footer-translucent-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/basic/index.html b/core/src/components/footer/test/basic/index.html index 669c4070a9..7929cd8426 100644 --- a/core/src/components/footer/test/basic/index.html +++ b/core/src/components/footer/test/basic/index.html @@ -15,23 +15,14 @@ - -
- - - - Footer - Default - - - -
- - - - Footer - No Border - - + +

Content

 + + + Footer + + diff --git a/core/src/components/footer/test/fade/e2e.ts b/core/src/components/footer/test/fade/e2e.ts deleted file mode 100644 index 650312bac6..0000000000 --- a/core/src/components/footer/test/fade/e2e.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { scrollToBottom } from '@utils/test'; - -describe('footer: fade: iOS', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/footer/test/fade?ionic:_testing=true&ionic:mode=ios', - }); - }); - - it('should match existing visual screenshots', async () => { - const compares = []; - - compares.push(await page.compareScreenshot('footer: blurred')); - - await scrollToBottom(page, 'ion-content'); - - compares.push(await page.compareScreenshot('footer: not blurred')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } - }); -}); diff --git a/core/src/components/footer/test/fade/footer.e2e.ts b/core/src/components/footer/test/fade/footer.e2e.ts new file mode 100644 index 0000000000..eef8cd2de2 --- /dev/null +++ b/core/src/components/footer/test/fade/footer.e2e.ts @@ -0,0 +1,24 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: fade', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + test('should not have visual regressions with fade footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/footer/test/fade'); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot(`footer-fade-blurred-diff-${page.getSnapshotSettings()}.png`); + + const content = page.locator('ion-content'); + await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0)); + await page.waitForChanges(); + + expect(await footer.screenshot()).toMatchSnapshot(`footer-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6cbde80d23 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..defff583e5 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b52a9a51cb Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43e2909019 Binary files /dev/null and b/core/src/components/footer/test/fade/footer.e2e.ts-snapshots/footer-fade-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/fade/index.html b/core/src/components/footer/test/fade/index.html index 3f9da5c233..620318404e 100644 --- a/core/src/components/footer/test/fade/index.html +++ b/core/src/components/footer/test/fade/index.html @@ -12,78 +12,73 @@ -
- Mailboxes + Header - Mailboxes + Header -
-
-
-
-
-
-
-
-
+
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

+
+ +
- Updated Just Now + Footer
diff --git a/core/src/components/footer/test/img.jpg b/core/src/components/footer/test/img.jpg new file mode 100644 index 0000000000..d7bd6ebe62 Binary files /dev/null and b/core/src/components/footer/test/img.jpg differ diff --git a/core/src/components/footer/test/scroll-target/e2e.ts b/core/src/components/footer/test/scroll-target/e2e.ts deleted file mode 100644 index f96f99c813..0000000000 --- a/core/src/components/footer/test/scroll-target/e2e.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { scrollToBottom } from '@utils/test'; - -/** - * This test suite verifies that the fade effect for iOS is working correctly - * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` - * selector. - */ -describe('footer: fade with custom scroll target: iOS', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/footer/test/scroll-target?ionic:_testing=true&ionic:mode=ios', - }); - }); - - it('should match existing visual screenshots', async () => { - const compares = []; - - compares.push(await page.compareScreenshot('footer: blurred')); - - await scrollToBottom(page, '#scroll-target'); - - compares.push(await page.compareScreenshot('footer: not blurred')); - - for (const compare of compares) { - expect(compare).toMatchScreenshot(); - } - }); -}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts b/core/src/components/footer/test/scroll-target/footer.e2e.ts new file mode 100644 index 0000000000..17907696fc --- /dev/null +++ b/core/src/components/footer/test/scroll-target/footer.e2e.ts @@ -0,0 +1,33 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('footer: scroll-target', () => { + test.beforeEach(({ skip }) => { + skip.rtl(); + }); + + /** + * This test suite verifies that the fade effect for iOS is working correctly + * when the `ion-footer` is using a custom scroll target with the `.ion-content-scroll-host` + * selector. + */ + test('should not have visual regressions with custom scroll target footer', async ({ page, skip }) => { + skip.mode('md', 'Translucent effect is only available in iOS mode.'); + skip.browser('firefox', 'Firefox has some issues rendering translucent effects on Linux.'); + + await page.goto('/src/components/footer/test/scroll-target'); + + const footer = page.locator('ion-footer'); + expect(await footer.screenshot()).toMatchSnapshot( + `footer-fade-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png` + ); + + const scrollTarget = page.locator('#scroll-target'); + await scrollTarget.evaluate((el: HTMLDivElement) => (el.scrollTop = el.scrollHeight)); + await page.waitForChanges(); + + expect(await footer.screenshot()).toMatchSnapshot( + `footer-fade-scroll-target-not-blurred-diff-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6cbde80d23 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..defff583e5 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..b52a9a51cb Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..43e2909019 Binary files /dev/null and b/core/src/components/footer/test/scroll-target/footer.e2e.ts-snapshots/footer-fade-scroll-target-not-blurred-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/footer/test/scroll-target/index.html b/core/src/components/footer/test/scroll-target/index.html index 7fb03f5aee..870ec33297 100644 --- a/core/src/components/footer/test/scroll-target/index.html +++ b/core/src/components/footer/test/scroll-target/index.html @@ -2,7 +2,7 @@ - Footer - Fade (custom scroll host) + Footer - Scroll Target + -
- Mailboxes + Header
-
-
-
-
-
-
-
-
-
-
+

Content

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor, + massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi + cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum + primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque + ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio. + Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu + porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium + tortor. +

+

+ Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero + nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis. + Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida + vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu + scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum, + imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus + velit ornare nunc, dapibus varius turpis leo ut magna. +

+

+ Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc + bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies + non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit + sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget + justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus, + accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus + magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus. + Curabitur non ipsum et ex vestibulum congue. +

+

+ Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at + nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id + in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean + elementum est nec arcu ultricies dignissim. +

+

+ Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a + fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus + rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis + ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere. +

+
+ +
- Updated Just Now + Footer
diff --git a/core/src/components/footer/test/translucent/e2e.ts b/core/src/components/footer/test/translucent/e2e.ts deleted file mode 100644 index e3a65fd0ce..0000000000 --- a/core/src/components/footer/test/translucent/e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; -import { checkComponentModeClasses } from '@utils/test'; - -test('footer: translucent', async () => { - const page = await newE2EPage({ - url: '/src/components/footer/test/translucent?ionic:_testing=true', - }); - - const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode')); - await checkComponentModeClasses(await page.find('ion-footer'), globalMode!, 'footer-translucent'); - - const compare = await page.compareScreenshot(); - expect(compare).toMatchScreenshot(); -}); diff --git a/core/src/components/footer/test/translucent/index.html b/core/src/components/footer/test/translucent/index.html deleted file mode 100644 index 6b511eb075..0000000000 --- a/core/src/components/footer/test/translucent/index.html +++ /dev/null @@ -1,171 +0,0 @@ - - - - - Header - Translucent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lobortis felis, eu sodales enim. Nam - risus nibh, placerat at rutrum ac, vehicula vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing - elit. Vestibulum quis elementum ligula, ac aliquet nulla. Mauris non placerat mauris. Aenean dignissim lacinia - porttitor. Praesent fringilla at est et ullamcorper. In ac ante ac massa porta venenatis ut id nibh. Fusce - felis neque, aliquet in velit vitae, venenatis euismod libero. Donec vulputate, urna sed sagittis tempor, mi - arcu tristique lacus, eget fringilla urna sem eget felis. Fusce dignissim lacus a scelerisque vehicula. Nulla - nec enim nunc. Quisque nec dui eu nibh pulvinar bibendum quis ut nunc. Duis ex odio, sollicitudin ac mollis - nec, fringilla non lacus. Maecenas sed tincidunt urna. Nunc feugiat maximus venenatis. Donec porttitor, felis - eget porttitor tempor, quam nulla dapibus nisl, sit amet posuere sapien sapien malesuada tortor. Pellentesque - habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque luctus, sapien nec - tincidunt efficitur, nibh turpis faucibus felis, in sodales massa augue nec erat. Morbi sollicitudin nisi ex, - et gravida nisi euismod eu. Suspendisse hendrerit dapibus orci, non viverra neque vestibulum id. Quisque vitae - interdum ligula, quis consectetur nibh. Phasellus in mi at erat ultrices semper. Fusce sollicitudin at dolor - ac lobortis. Morbi sit amet sem quis nulla pellentesque imperdiet. Nullam eu sem a enim maximus eleifend non - vulputate leo. Proin quis congue lacus. Pellentesque placerat, quam at tempus pulvinar, nisl ligula tempor - risus, quis pretium arcu odio et nulla. Nullam mollis consequat pharetra. Phasellus dictum velit sed purus - mattis maximus. In molestie eget massa ut dignissim. In a interdum elit. In finibus nibh a mauris lobortis - aliquet. Proin rutrum varius consequat. In mollis dapibus nisl, eu finibus urna viverra ac. Quisque - scelerisque nisl eu suscipit consectetur. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - Translucent - - - Primary - Translucent - - - Secondary - Translucent - - - Tertiary - Translucent - - - Success - Translucent - - - Warning - Translucent - - - Danger - Translucent - - - Light - Translucent - - - Medium - Translucent - - - - - - - diff --git a/core/src/components/footer/test/with-tabs/index.html b/core/src/components/footer/test/with-tabs/index.html index a1bc4b9ff5..4b7694b56f 100644 --- a/core/src/components/footer/test/with-tabs/index.html +++ b/core/src/components/footer/test/with-tabs/index.html @@ -12,6 +12,7 @@ +