Revert "remove css ionic theme tests"

This reverts commit bee6003.

Author: BenOsodrac

core/src/css/test/display.e2e.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('display css utility classes', () => {
+  let css: string;
+
+  test.beforeAll(() => {
+    css = fs.readFileSync(path.resolve(__dirname, '../../../css/display.css'), 'utf8');
+  });
+
+  const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
+
+  // TODO(FW-6697): remove `ion-hide classes` test
+  test('ion-hide classes', () => {
+    expect(css).toContain('.ion-hide');
+
+    const values = ['up', 'down'];
+
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-hide${infix}-${value}`);
+      }
+    }
+  });
+
+  test('ion-display classes', () => {
+    const values = [
+      'none',
+      'inline',
+      'inline-block',
+      'block',
+      'flex',
+      'inline-flex',
+      'grid',
+      'inline-grid',
+      'table',
+      'table-cell',
+      'table-row',
+    ];
+
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-display${infix}-${value}`);
+      }
+    }
+  });
+});

core/src/css/test/flex-utils.e2e.ts

@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+test.describe('flex-utils css utility classes', () => {
+  let css: string;
+
+  test.beforeAll(() => {
+    css = fs.readFileSync(path.resolve(__dirname, '../../../css/flex-utils.css'), 'utf8');
+  });
+
+  const INFIXES = ['', '-sm', '-md', '-lg', '-xl'];
+
+  test('align-content classes', () => {
+    const values = ['start', 'end', 'center', 'between', 'around', 'stretch'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-content${infix}-${value}`);
+      }
+    }
+  });
+
+  test('align-items classes', () => {
+    const values = ['start', 'center', 'end', 'stretch', 'baseline'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-items${infix}-${value}`);
+      }
+    }
+  });
+
+  test('align-self classes', () => {
+    const values = ['start', 'end', 'center', 'stretch', 'baseline', 'auto'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-align-self${infix}-${value}`);
+      }
+    }
+  });
+
+  test('justify-content classes', () => {
+    const values = ['start', 'center', 'end', 'around', 'between', 'evenly'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-justify-content${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-direction classes', () => {
+    const values = ['row', 'row-reverse', 'column', 'column-reverse'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-wrap classes', () => {
+    const values = ['wrap', 'nowrap', 'wrap-reverse'];
+    // TODO(FW-6697): remove all `ion-wrap-*` expects
+    for (const value of values) {
+      expect(css).toContain(`.ion-${value}`);
+    }
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-fill classes', () => {
+    const values = ['1', 'auto', 'initial', 'none'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}`);
+      }
+    }
+  });
+
+  test('flex-grow and flex-shrink classes', () => {
+    const values = ['grow', 'shrink'];
+    for (const value of values) {
+      for (const infix of INFIXES) {
+        expect(css).toContain(`.ion-flex${infix}-${value}-0`);
+        expect(css).toContain(`.ion-flex${infix}-${value}-1`);
+      }
+    }
+  });
+
+  test('flex-order classes', () => {
+    for (const infix of INFIXES) {
+      expect(css).toContain(`.ion-order${infix}-first`);
+      expect(css).toContain(`.ion-order${infix}-last`);
+      for (let i = 0; i <= 12; i++) {
+        expect(css).toContain(`.ion-order${infix}-${i}`);
+      }
+    }
+  });
+});

core/src/css/test/link/basic/index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Link - 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.ionic.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>
+    <style>
+      .links div {
+        padding: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Link - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ionic-padding-space-m">
+        <h3>Standalone (.ion-link)</h3>
+        <div class="links" id="standalone">
+          <div><a href="#test-visited-link">Link - Default</a></div>
+          <div><a class="ion-activated" href="#">Link - Active</a></div>
+          <div><a class="ion-focused" href="#">Link - Focused</a></div>
+          <div><a href="">Link - Visited</a></div>
+          <div>
+            <a href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+          </div>
+        </div>
+
+        <h3>Underline (.ion-link-underline)</h3>
+        <div class="links" id="underline">
+          <div><a class="ion-link-underline" href="#test-visited-link">Underline - Default</a></div>
+          <div><a class="ion-link-underline ion-activated" href="#">Underline - Active</a></div>
+          <div><a class="ion-link-underline ion-focused" href="#">Underline - Focused</a></div>
+          <div><a class="ion-link-underline" href="">Underline - Visited</a></div>
+          <div>
+            <a class="ion-link-underline" href="#">Link with Icon <ion-icon name="open-outline"></ion-icon></a>
+          </div>
+        </div>
+
+        <h3>Links in Content</h3>
+        <div class="links" id="links-in-content">
+          <div>
+            Lorem ipsum dolor sit amet consectetur, <a class="ion-link" href="#">default link</a> adipisicing elit.
+          </div>
+          <div>
+            Lorem ipsum dolor sit amet consectetur,
+            <a class="ion-link-underline" href="#">underline link</a> adipisicing elit.
+          </div>
+        </div>
+
+        <h3>Parent Element</h3>
+        <div class="links">
+          <div class="ion-link" id="standalone-nested">
+            <p>Lorem ipsum dolor sit amet consectetur, <a href="#">default link</a> adipisicing elit.</p>
+          </div>
+          <div class="ion-link-underline" id="underline-nested">
+            <p>Lorem ipsum dolor sit amet consectetur, <a href="#">underline link</a> adipisicing elit.</p>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

core/src/css/test/link/basic/link.e2e.ts

@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Link global classes are only available in the Ionic theme.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('link global classes'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/css/test/link/basic/index.html', config);
+    });
+
+    test.describe('.ion-link class', () => {
+      test('should apply to anchor elements', async ({ page }) => {
+        const standalone = page.locator('#standalone');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-standalone'));
+      });
+
+      test('should apply to child anchor elements', async ({ page }) => {
+        const standalone = page.locator('#standalone-nested');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-standalone-nested'));
+      });
+    });
+
+    test.describe('.ion-link-underline class', () => {
+      test('should apply to anchor elements', async ({ page }) => {
+        const standalone = page.locator('#underline');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-underline'));
+      });
+
+      test('should apply to child anchor elements', async ({ page }) => {
+        const standalone = page.locator('#underline-nested');
+
+        await expect(standalone).toHaveScreenshot(screenshot('link-underline-nested'));
+      });
+    });
+  });
+});