test(header): migrate to playwright (#26112)

core/src/components/header/test/a11y/e2e.ts

@@ -1,11 +0,0 @@
-import { AxePuppeteer } from '@axe-core/puppeteer';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: axe', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/a11y?ionic:_testing=true',
-  });
-
-  const results = await new AxePuppeteer(page).analyze();
-  expect(results.violations.length).toEqual(0);
-});

core/src/components/header/test/a11y/header.e2e.ts

@@ -0,0 +1,34 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: a11y', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
+    skip.mode('md');
+  });
+
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/header/test/a11y`);
+
+    const headers = page.locator('ion-header');
+    await expect(headers.first()).toHaveAttribute('role', 'banner');
+    await expect(headers.last()).toHaveAttribute('role', 'none');
+
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
+  });
+
+  test('should allow for custom role', async ({ page }) => {
+    /**
+     * Note: This example should not be used in production.
+     * This only serves to check that `role` can be customized.
+     */
+    await page.setContent(`
+      <ion-header role="heading"></ion-header>
+    `);
+    const header = page.locator('ion-header');
+
+    await expect(header).toHaveAttribute('role', 'heading');
+  });
+});

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

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

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

@@ -0,0 +1,78 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: basic', () => {
+  test.describe('header: rendering', () => {
+    test('should not have visual regressions with basic header', async ({ page }) => {
+      await page.setContent(`
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Header - Default</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-diff-${page.getSnapshotSettings()}.png`);
+    });
+  });
+
+  test.describe('header: feature rendering', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+    });
+
+    test('should not have visual regressions with no border', async ({ page }) => {
+      await page.setContent(`
+        <ion-header class="ion-no-border">
+          <ion-toolbar>
+            <ion-title>Header - No Border</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-no-border-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header', 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(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar>
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(`header-translucent-diff-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent header with color', 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(`
+        <ion-header translucent="true">
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/header/test/img.jpg" />
+          </div>
+          <ion-toolbar color="tertiary">
+            <ion-title>Header - Translucent</ion-title>
+          </ion-toolbar>
+        </ion-header>
+      `);
+
+      const header = page.locator('ion-header');
+      expect(await header.screenshot()).toMatchSnapshot(
+        `header-translucent-color-diff-${page.getSnapshotSettings()}.png`
+      );
+    });
+  });
+});

core/src/components/header/test/basic/index.html

@@ -15,20 +15,13 @@
   </head>
   <body>
     <ion-app>
-      <ion-content>
       <ion-header>
         <ion-toolbar>
-            <ion-title>Header - Default</ion-title>
-          </ion-toolbar>
-        </ion-header>
-
-        <br />
-
-        <ion-header class="ion-no-border">
-          <ion-toolbar>
-            <ion-title>Header - No Border</ion-title>
+          <ion-title>Header</ion-title>
         </ion-toolbar>
       </ion-header>
+      <ion-content>
+        <h1>Content</h1>
       </ion-content>
     </ion-app>
   </body>

core/src/components/header/test/condense/header.e2e.ts

@@ -7,24 +7,37 @@ test.describe('header: condense', () => {
     skip.rtl();
 
     await page.goto('/src/components/header/test/condense');
-    const header = page.locator('#collapsibleHeader');
+    const largeTitleHeader = page.locator('#largeTitleHeader');
+    const smallTitleHeader = page.locator('#smallTitleHeader');
     const content = page.locator('ion-content');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom());
-    await page.waitForChanges();
+    expect(await largeTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-initial-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToBottom();
+    });
+    await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+
+    expect(await smallTitleHeader.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-condense-large-title-collapsed-diff-${page.getSnapshotSettings()}.png`
+    );
 
     /**
      * Playwright can't do .not.toHaveAttribute() because a value is expected,
      * and toHaveAttribute can't accept a value of type null.
      */
-    const ariaHidden = await header.getAttribute('aria-hidden');
+    const ariaHidden = await smallTitleHeader.getAttribute('aria-hidden');
     expect(ariaHidden).toBeNull();
 
-    await content.evaluate((el: HTMLIonContentElement) => el.scrollToTop());
-    await page.waitForChanges();
+    await content.evaluate(async (el: HTMLIonContentElement) => {
+      await el.scrollToTop();
+    });
+    await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
 
-    await expect(header).toHaveAttribute('aria-hidden', 'true');
+    await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
   });
 });

core/src/components/header/test/condense/index.html

@@ -12,79 +12,74 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-    </style>
   </head>
 
   <body>
     <ion-app>
       <div class="ion-page">
-        <ion-header translucent="true" id="collapsibleHeader">
+        <ion-header translucent="true" id="smallTitleHeader">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
-          <ion-header collapse="condense">
+          <ion-header collapse="condense" id="largeTitleHeader">
             <ion-toolbar>
-              <ion-title size="large">Mailboxes</ion-title>
+              <ion-title size="large">Header</ion-title>
             </ion-toolbar>
           </ion-header>
-          <div class="grid ion-padding">
-            <div class="grid-item red"></div>
-            <div class="grid-item green"></div>
-            <div class="grid-item blue"></div>
-            <div class="grid-item yellow"></div>
-            <div class="grid-item pink"></div>
-            <div class="grid-item purple"></div>
-            <div class="grid-item black"></div>
-            <div class="grid-item orange"></div>
+          <div class="ion-padding">
+            <h1>Content</h1>
+
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>

core/src/components/header/test/fade/e2e.ts

@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('header: fade', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/fade?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/header/test/fade/header.e2e.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: fade', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  test('should not have visual regressions with fade header', 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/header/test/fade');
+
+    const header = page.locator('ion-header');
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-not-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+
+    const content = page.locator('ion-content');
+    await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+    await page.waitForChanges();
+
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-fade-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/header/test/fade/index.html

@@ -12,74 +12,69 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-    <style>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-    </style>
   </head>
 
   <body>
     <ion-app>
       <div class="ion-page">
         <ion-header collapse="fade" translucent="true">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true">
-          <div class="grid ion-padding">
-            <div class="grid-item red"></div>
-            <div class="grid-item green"></div>
-            <div class="grid-item blue"></div>
-            <div class="grid-item yellow"></div>
-            <div class="grid-item pink"></div>
-            <div class="grid-item purple"></div>
-            <div class="grid-item black"></div>
-            <div class="grid-item orange"></div>
+          <div class="ion-padding">
+            <h1>Content</h1>
+
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>

core/src/components/header/test/scroll-target/e2e.ts

@@ -1,51 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import type { E2EPage } from '@stencil/core/testing';
-import { scrollToBottom } from '@utils/test';
-
-describe('ion-header: custom scroll target', () => {
-  let page: E2EPage;
-
-  beforeEach(async () => {
-    page = await newE2EPage({
-      url: '/src/components/header/test/scroll-target?ionic:_testing=true&ionic:mode=ios',
-    });
-  });
-
-  it('should match existing visual screenshots', async () => {
-    const compare = await page.compareScreenshot();
-    expect(compare).toMatchScreenshot();
-  });
-
-  describe('large title', () => {
-    it('should display the large title initially', async () => {
-      const largeHeader = await page.find('ion-header[collapse="condense"]');
-      const collapseHeader = await page.find('ion-header[collapse="fade"]');
-
-      expect(largeHeader.className).not.toContain('header-collapse-condense-inactive');
-      expect(collapseHeader.className).toContain('header-collapse-condense-inactive');
-    });
-
-    describe('when the scroll container has overflow', () => {
-      it('should display the collapsed title on scroll', async () => {
-        const screenshotCompares = [];
-
-        screenshotCompares.push(await page.compareScreenshot('large title expanded'));
-
-        const largeHeader = await page.find('ion-header[collapse="condense"]');
-        const collapseHeader = await page.find('ion-header[collapse="fade"]');
-
-        await scrollToBottom(page, '#scroll-target');
-        await page.waitForChanges();
-
-        expect(largeHeader.className).toContain('header-collapse-condense-inactive');
-        expect(collapseHeader.className).not.toContain('header-collapse-condense-inactive');
-
-        screenshotCompares.push(await page.compareScreenshot('large title collapsed'));
-
-        for (const screenshotCompare of screenshotCompares) {
-          expect(screenshotCompare).toMatchScreenshot();
-        }
-      });
-    });
-  });
-});

core/src/components/header/test/scroll-target/header.e2e.ts

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('header: scroll-target', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+
+  /**
+   * This test suite verifies that the fade effect for iOS is working correctly
+   * when the `ion-header` is using a custom scroll target with the `.ion-content-scroll-host`
+   * selector.
+   */
+  test('should not have visual regressions with custom scroll target header', 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/header/test/scroll-target');
+
+    const header = page.locator('ion-header');
+    expect(await header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-scroll-target-not-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 header.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `header-scroll-target-blurred-diff-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/header/test/scroll-target/index.html

@@ -13,48 +13,6 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <style>
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: 10px;
-      }
-
-      .grid-item {
-        height: 200px;
-      }
-
       #scroll-target {
         position: absolute;
         top: 0;
@@ -73,32 +31,63 @@
     <ion-app>
       <div class="ion-page">
         <ion-header collapse="fade" translucent="true">
+          <div style="position: absolute; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
+          </div>
           <ion-toolbar>
-            <ion-title>Mailboxes</ion-title>
+            <ion-title>Header</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content fullscreen="true" scroll-y="false">
           <div id="scroll-target" class="ion-content-scroll-host">
-            <ion-header collapse="condense">
-              <ion-toolbar>
-                <ion-title size="large">Mailboxes</ion-title>
-              </ion-toolbar>
-            </ion-header>
-            <div class="grid ion-padding">
-              <div class="grid-item red"></div>
-              <div class="grid-item green"></div>
-              <div class="grid-item blue"></div>
-              <div class="grid-item yellow"></div>
-              <div class="grid-item pink"></div>
-              <div class="grid-item purple"></div>
-              <div class="grid-item black"></div>
-              <div class="grid-item orange"></div>
-            </div>
+            <h1>Content</h1>
+
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
+            <p>
+              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.
+            </p>
           </div>
         </ion-content>
         <ion-footer translucent="true">
           <ion-toolbar>
-            <ion-title>Updated Just Now</ion-title>
+            <ion-title>Footer</ion-title>
           </ion-toolbar>
         </ion-footer>
       </div>

core/src/components/header/test/translucent/e2e.ts

@@ -1,14 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { checkComponentModeClasses } from '@utils/test';
-
-test('header: translucent', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/header/test/translucent?ionic:_testing=true',
-  });
-
-  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
-  await checkComponentModeClasses(await page.find('ion-header'), globalMode!, 'header-translucent');
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});

core/src/components/header/test/translucent/index.html

@@ -1,170 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Header - Translucent</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header translucent>
-        <ion-toolbar>
-          <ion-title>Header - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="primary">
-          <ion-title>Primary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="secondary">
-          <ion-title>Secondary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="tertiary">
-          <ion-title>Tertiary - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="success">
-          <ion-title>Success - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="warning">
-          <ion-title>Warning - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="danger">
-          <ion-title>Danger - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="light">
-          <ion-title>Light - Translucent</ion-title>
-        </ion-toolbar>
-        <ion-toolbar color="medium">
-          <ion-title>Medium - Translucent</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content fullscreen>
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <p>
-          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.
-        </p>
-
-        <ion-grid>
-          <ion-row>
-            <ion-col size="6">
-              <f class="red"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="green"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="blue"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="yellow"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="pink"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="purple"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="black"></f>
-            </ion-col>
-            <ion-col size="6">
-              <f class="orange"></f>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      f {
-        display: block;
-        height: 200px;
-      }
-
-      .red {
-        background-color: #ea445a;
-      }
-
-      .green {
-        background-color: #76d672;
-      }
-
-      .blue {
-        background-color: #3478f6;
-      }
-
-      .yellow {
-        background-color: #ffff80;
-      }
-
-      .pink {
-        background-color: #ff6b86;
-      }
-
-      .purple {
-        background-color: #7e34f6;
-      }
-
-      .black {
-        background-color: #000;
-      }
-
-      .orange {
-        background-color: #f69234;
-      }
-    </style>
-  </body>
-</html>