@ionic/core 8.2.2-dev.11718204308.11b678e2 → 8.2.2-dev.11718213806.1b3820f6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/docs.json
CHANGED
package/package.json
CHANGED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/*!
|
|
2
|
-
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
|
-
*/
|
|
4
|
-
import { expect } from "@playwright/test";
|
|
5
|
-
import { configs, test } from "../../../../utils/test/playwright/index";
|
|
6
|
-
/**
|
|
7
|
-
* Typography styles are only available in the Ionic theme
|
|
8
|
-
*/
|
|
9
|
-
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
|
|
10
|
-
test.describe(title('typography: global styles'), () => {
|
|
11
|
-
test('should apply the globals styles for each semantic tag', async ({ page }) => {
|
|
12
|
-
await page.setContent(`
|
|
13
|
-
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
|
14
|
-
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
|
15
|
-
<div>
|
|
16
|
-
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
|
17
|
-
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
|
18
|
-
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
|
19
|
-
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
|
20
|
-
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
|
21
|
-
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
|
22
|
-
<p><ion-text class="ionic-font-size-400"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
|
|
23
|
-
<p><ion-text class="ionic-font-size-350">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
|
|
24
|
-
<p><ion-text class="ionic-font-size-300"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
|
|
25
|
-
</div>
|
|
26
|
-
`, config);
|
|
27
|
-
const div = page.locator('div');
|
|
28
|
-
await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
|
|
29
|
-
});
|
|
30
|
-
test('should apply the utility classes for each heading', async ({ page }) => {
|
|
31
|
-
await page.setContent(`
|
|
32
|
-
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
|
33
|
-
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
|
34
|
-
<div>
|
|
35
|
-
<h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
|
|
36
|
-
<h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
|
|
37
|
-
<h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
|
|
38
|
-
<h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
|
|
39
|
-
<h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
|
|
40
|
-
<h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
|
|
41
|
-
</div>
|
|
42
|
-
`, config);
|
|
43
|
-
const div = page.locator('div');
|
|
44
|
-
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
|
|
45
|
-
});
|
|
46
|
-
test('should apply the heading classes on ion-text element', async ({ page }) => {
|
|
47
|
-
await page.setContent(`
|
|
48
|
-
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
|
49
|
-
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
|
50
|
-
<div>
|
|
51
|
-
<p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
|
|
52
|
-
<p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
|
|
53
|
-
<p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
|
|
54
|
-
<p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
|
|
55
|
-
<p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
|
|
56
|
-
<p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
|
|
57
|
-
</div>
|
|
58
|
-
`, config);
|
|
59
|
-
const div = page.locator('div');
|
|
60
|
-
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
|
|
61
|
-
});
|
|
62
|
-
test('should apply the utility classes for font weights', async ({ page }) => {
|
|
63
|
-
await page.setContent(`
|
|
64
|
-
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
|
65
|
-
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
|
66
|
-
<div>
|
|
67
|
-
<p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
|
|
68
|
-
<p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
|
|
69
|
-
<p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
|
|
70
|
-
<p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
|
|
71
|
-
<p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
|
|
72
|
-
</div>
|
|
73
|
-
`, config);
|
|
74
|
-
const div = page.locator('div');
|
|
75
|
-
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
|
|
76
|
-
});
|
|
77
|
-
test('should apply the utility classes for font display', async ({ page }) => {
|
|
78
|
-
await page.setContent(`
|
|
79
|
-
<link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
|
|
80
|
-
<link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
|
|
81
|
-
<div>
|
|
82
|
-
<p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
|
|
83
|
-
<p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
|
|
84
|
-
</div>
|
|
85
|
-
`, config);
|
|
86
|
-
const div = page.locator('div');
|
|
87
|
-
await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
|
|
88
|
-
});
|
|
89
|
-
});
|
|
90
|
-
});
|