test(card): migrate tests to playwright (#25941)

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

@@ -0,0 +1,160 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('card: basic', () => {
+  test.describe('card: rendering', () => {
+    test('should not have visual regressions with basic card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-diff-${page.getSnapshotSettings()}.png`);
+    });
+  });
+
+  test.describe('card: feature rendering', () => {
+    test.beforeEach(({ skip }) => {
+      skip.rtl();
+    });
+
+    test('should not have visual regressions with button cards', async ({ page }) => {
+      await page.setContent(`
+        <ion-card button="true">
+          <ion-card-header>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-button-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with translucent cards', 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-card>
+          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
+            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
+          </div>
+          <ion-card-header translucent="true">
+            <ion-card-subtitle> Subtitle </ion-card-subtitle>
+            <ion-card-title> Title </ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content style="min-height: 20px"></ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-translucent-${page.getSnapshotSettings()}.png`);
+    });
+
+    test('should not have visual regressions with disabled card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card disabled="true">
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-disabled-${page.getSnapshotSettings()}.png`);
+    });
+    test('should not have visual regressions with color', async ({ page }) => {
+      await page.setContent(`
+        <ion-card color="danger">
+          <ion-card-header>
+            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+            <ion-card-title>Card Title</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
+            in the woods. Wash your spirit clean.
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-color-${page.getSnapshotSettings()}.png`);
+    });
+    test('headings should have correct size in card', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-card-content>
+            <h1>Heading 1</h1>
+            <h2>Heading 2</h2>
+            <h3>Heading 3</h3>
+            <h4>Heading 4</h4>
+            <h5>Heading 5</h5>
+            <h6>Heading 6</h6>
+            <p>Paragraph</p>
+          </ion-card-content>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-headings-${page.getSnapshotSettings()}.png`);
+    });
+    test('should render even without header or content elements', async ({ page }) => {
+      await page.setContent(`
+        <ion-card>
+          <ion-list lines="none">
+            <ion-item href="#" class="ion-activated">
+              <ion-icon name="wifi" slot="start"></ion-icon>
+              <ion-label>Link Item activated</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item href="#">
+              <ion-icon name="wine" slot="start"></ion-icon>
+              <ion-label>Link Item</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item button="true" class="ion-activated">
+              <ion-icon name="warning" slot="start"></ion-icon>
+              <ion-label>Button Item activated</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+
+            <ion-item button="true">
+              <ion-icon name="walk" slot="start"></ion-icon>
+              <ion-label>Button Item</ion-label>
+              <ion-note>More</ion-note>
+            </ion-item>
+          </ion-list>
+        </ion-card>
+      `);
+
+      const card = page.locator('ion-card');
+      expect(await card.screenshot()).toMatchSnapshot(`card-no-content-or-header-${page.getSnapshotSettings()}.png`);
+    });
+  });
+});

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

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

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

@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</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>
-        <ion-toolbar>
-          <ion-title>Card - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-            <ion-card-title>Card Title</ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week
-            in the woods. Wash your spirit clean.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-item lines="none">
-            <ion-icon name="pin" slot="start"></ion-icon>
-            <ion-label>ion-item in a card, icon left, button right</ion-label>
-            <ion-button fill="outline" slot="end">View</ion-button>
-          </ion-item>
-
-          <ion-card-content>
-            This is content, without any paragraph or header tags, within an ion-card-content element.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card class="custom2">
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card color="secondary">
-          <ion-card-header>
-            <ion-card-subtitle>Subtitle</ion-card-subtitle>
-            <ion-card-title>Title</ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            This is content, without any paragraph or header tags, within an ion-card-content element.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-content>
-            <h1>Heading 1</h1>
-            <h2>Heading 2</h2>
-            <h3>Heading 3</h3>
-            <h4>Heading 4</h4>
-            <h5>Heading 5</h5>
-            <h6>Heading 6</h6>
-            <p>Paragraph</p>
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-list lines="none">
-            <ion-item href="#" class="ion-activated">
-              <ion-icon name="wifi" slot="start"></ion-icon>
-              <ion-label>Link Item activated</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item href="#">
-              <ion-icon name="wine" slot="start"></ion-icon>
-              <ion-label>Link Item</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item button class="ion-activated">
-              <ion-icon name="warning" slot="start"></ion-icon>
-              <ion-label>Button Item activated</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-
-            <ion-item button>
-              <ion-icon name="walk" slot="start"></ion-icon>
-              <ion-label>Button Item</ion-label>
-              <ion-note>More</ion-note>
-            </ion-item>
-          </ion-list>
-        </ion-card>
-      </ion-content>
-    </ion-app>
-    <style>
-      .content {
-        background: #e5e5e5;
-      }
-    </style>
-  </body>
-</html>

core/src/components/card/test/button/index.html

@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</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>
-        <ion-toolbar>
-          <ion-title>Card - Button</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-card button>
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Button Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a button attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card href="#">
-          <ion-card-header>
-            <ion-card-title> Anchor Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a href attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card button color="tertiary">
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Button Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a button attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card href="#" color="warning">
-          <ion-card-header>
-            <ion-card-title> Anchor Card </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This is content, inside of a card with a href attribute. </ion-card-content>
-        </ion-card>
-
-        <ion-card button>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img
-              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-            />
-          </div>
-
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content> This button should have a background. </ion-card-content>
-        </ion-card>
-
-        <ion-card button>
-          <img
-            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAB8AQAAAACDZekTAAABMElEQVR4AWLABZjQBdjRBfgb0ATkD6AJ2D9AE6j/gCbw/weAyzk2IwAKwBgIixvNKPaA+P7yXplUZ1/7OO79DkYdjHrIqKeMeskoISXkWkLuBWSMkhGQMYCMAWQMISVkDCBjDCKjZAAZA8gYQMYAUkLGaBAZg8goGYPIGATGIDAGgTEIjEFgDCKjZAwiYxAYg8AYBMYgMAaBMYiMkjGIjEHGSMgYQErIGEDGAAKjZAwyhpAxgIwB5F9nvVsBCAUgDC3Zf2MGuCe1+r6QyBuMwSysg5WyF3bLeXBinCmnzr1wc9wtt08+SBAZI4XklCSTddpAX2gUnaOV9JZm033oAD8gDAyCUnAM0sFCaAlPIS5MhtpwHfLjBuyBXzAQjsJieE4T6kptqm81ss7W6ss/gwMyz60frEbR8QAAAABJRU5ErkJggg=="
-          />
-        </ion-card>
-      </ion-content>
-    </ion-app>
-    <style>
-      .content {
-        background: #e5e5e5;
-      }
-    </style>
-  </body>
-</html>

core/src/components/card/test/standalone/e2e.ts

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

core/src/components/card/test/standalone/index.html

@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Standalone</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/core.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-card>
-      <ion-card-content>
-        This is just your basic card with some text to boot. Like it? Keep scrolling...
-      </ion-card-content>
-    </ion-card>
-
-    <ion-card>
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <!-- Colors-->
-    <ion-card class="custom">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card class="custom2">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="secondary">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="danger">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <ion-card color="light">
-      <ion-card-header>
-        <ion-card-subtitle> Subtitle </ion-card-subtitle>
-        <ion-card-title> Title </ion-card-title>
-      </ion-card-header>
-
-      <ion-card-content> The British use the term "header". </ion-card-content>
-    </ion-card>
-
-    <style>
-      .custom {
-        --background: #f6f6f6;
-        --color: orange;
-      }
-
-      .custom ion-card-subtitle,
-      .custom ion-card-title {
-        --color: orange;
-      }
-
-      .custom2 {
-        --background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAARQAQMAAAA2ut43AAAABlBMVEXMzMz////TjRV2AAAEPUlEQVR42u3RMREAMBDDsPAn/eXhavOq87Ztu7u7+6eBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBf2hvgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgatgn4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGr7S0wMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDBwFewzMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcLW9BQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq6CfQYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgautrfAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAVbDPwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNX2FhgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGLgK9hkYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBi42t4CAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV8E+AwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1fbW2BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYOAq2GdgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGDgansLDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMXAX7DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDFxtb4GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGrYJ+BgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBq+0tMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwcBXsMzAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMHC1vQUGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgaugn0GBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGjvYD5WuYrpZqdmcAAAAASUVORK5CYII=)
-          center 50%;
-        --color: white;
-        text-shadow: 2px 2px 6px black;
-      }
-
-      .custom2 ion-card-subtitle,
-      .custom2 ion-card-title {
-        --color: white;
-      }
-    </style>
-  </body>
-</html>

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

@@ -1,219 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Card - Basic</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>
-        <ion-toolbar>
-          <ion-title>Card - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content fullscreen="true">
-        <ion-card>
-          <ion-card-content>
-            This is just your basic card with some text to boot. Like it? Keep scrolling...
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: rotate(145deg) scale(1.5)" src="/src/components/card/test/img.jpg" />
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="min-height: 200px"> </ion-card-content>
-        </ion-card>
-
-        <ion-card style="color: white">
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img style="transform: scale(2)" src="/src/components/card/test/img.jpg" />
-          </div>
-          <ion-card-header translucent>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content style="padding-top: 100px">
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0">
-            <img src="/src/components/card/test/img.jpg" />
-          </div>
-
-          <ion-card-header>
-            <ion-card-subtitle> Subtitle </ion-card-subtitle>
-            <ion-card-title> Title </ion-card-title>
-          </ion-card-header>
-
-          <ion-card-content>
-            The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
-          </ion-card-content>
-        </ion-card>
-
-        <ion-card>
-          <ion-card-content>
-            <ion-card-title> Card Title Goes Here </ion-card-title>
-            <p>
-              Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain. I am within a
-              paragraph element.
-            </p>
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Star
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-right">
-                <ion-button fill="clear" size="small" class="ion-activated">
-                  <ion-icon slot="start" name="share"></ion-icon>
-                  Activated
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-
-        <ion-card class="cards-list-demo">
-          <ion-card-header> Explore Nearby </ion-card-header>
-
-          <ion-list>
-            <ion-item>
-              <ion-icon name="cart" slot="start"></ion-icon>
-              Shopping
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="medical" slot="start"></ion-icon>
-              Hospital
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="cafe" slot="start"></ion-icon>
-              Cafe
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="paw" slot="start"></ion-icon>
-              Dog Park
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="beer" slot="start"></ion-icon>
-              Pub
-            </ion-item>
-
-            <ion-item>
-              <ion-icon name="planet" slot="start"></ion-icon>
-              Space
-            </ion-item>
-          </ion-list>
-        </ion-card>
-
-        <ion-card>
-          <ion-item>
-            <ion-avatar slot="start">
-              <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-            </ion-avatar>
-            <h2>Card With An Inset Picture</h2>
-            <p>Isn't it beautiful</p>
-          </ion-item>
-
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </div>
-
-          <ion-card-content>
-            <p>Hello. I am a paragraph.</p>
-          </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-center">
-                <ion-button fill="clear" size="small">
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-padding-end ion-text-right ion-align-self-center">
-                <ion-note> 11h ago </ion-note>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-
-        <ion-card class="ion-no-margin">
-          <div>
-            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-          </div>
-
-          <ion-card-content> ion-card[no-margin] This card was breaking the border radius. </ion-card-content>
-
-          <ion-grid>
-            <ion-row>
-              <ion-col class="ion-no-padding">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="star"></ion-icon>
-                  Favorite
-                </ion-button>
-              </ion-col>
-
-              <ion-col class="ion-no-padding ion-text-center">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="musical-notes"></ion-icon>
-                  Listen
-                </ion-button>
-              </ion-col>
-              <ion-col class="ion-no-padding ion-text-right">
-                <ion-button fill="clear" size="small" color="dark">
-                  <ion-icon slot="start" name="share"></ion-icon>
-                  Share
-                </ion-button>
-              </ion-col>
-            </ion-row>
-          </ion-grid>
-        </ion-card>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>