Skip to content

Commit f8a83e9

Browse files
rugoncalvesrugoncalves
committed
Adding new page with deprecated tests for pull & push
1 parent e411078 commit f8a83e9

8 files changed

+123
-0
lines changed

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* ion-grid does not have different styling per-mode
6+
*/
7+
configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
8+
test.describe(title('grid: offsets'), () => {
9+
test('should not have visual regressions', async ({ page }) => {
10+
await page.goto(`/src/components/grid/test/offsets`, config);
11+
12+
await page.setIonViewport();
13+
14+
await expect(page).toHaveScreenshot(screenshot(`grid-offsets`));
15+
});
16+
});
17+
});

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Chrome-linux.png‎

27.8 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Firefox-linux.png‎

43.8 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-ltr-Mobile-Safari-linux.png‎

38.8 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Chrome-linux.png‎

27.7 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Firefox-linux.png‎

44.3 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/grid.e2e.ts-snapshots/grid-offsets-md-rtl-Mobile-Safari-linux.png‎

41.5 KB
Loading

‎core/src/components/grid/test/offsets-pull-push/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Grid - Offsets</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Grid - Offsets</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content id="content" class="grid-demo">
26+
<h2 class="ion-padding-start">Push</h2>
27+
<ion-grid>
28+
<ion-row>
29+
<ion-col size="auto" push="1">
30+
<div>ion-col push 1</div>
31+
</ion-col>
32+
<ion-col size="auto" push="1">
33+
<div>ion-col push 1</div>
34+
</ion-col>
35+
</ion-row>
36+
</ion-grid>
37+
38+
<h2 class="ion-padding-start">Push and Pull</h2>
39+
<ion-grid>
40+
<ion-row>
41+
<ion-col size="9" push="3">
42+
<div>ion-col push 3</div>
43+
</ion-col>
44+
<ion-col size="3" pull="9">
45+
<div>ion-col pull 9</div>
46+
</ion-col>
47+
</ion-row>
48+
</ion-grid>
49+
50+
<ion-grid>
51+
<ion-row>
52+
<ion-col size="3" size-md="6" push="9" push-md="6">
53+
<div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
54+
</ion-col>
55+
<ion-col size="9" size-md="6" pull="3" pull-md="6">
56+
<div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
57+
</ion-col>
58+
</ion-row>
59+
</ion-grid>
60+
61+
<h2 class="ion-padding-start">Offset</h2>
62+
<ion-grid>
63+
<ion-row>
64+
<ion-col offset="5">
65+
<div>ion-col offset=5</div>
66+
</ion-col>
67+
<ion-col offset="2">
68+
<div>ion-col offset="2"</div>
69+
</ion-col>
70+
</ion-row>
71+
</ion-grid>
72+
73+
<h2 class="ion-padding-start">Dynamic Offset</h2>
74+
<ion-grid>
75+
<ion-row>
76+
<ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
77+
<div>ion-col offset="2" offset-md="5"</div>
78+
</ion-col>
79+
<ion-col offset="2" offset-md="5">
80+
<div>ion-col offset="2" offset-md="5"</div>
81+
</ion-col>
82+
</ion-row>
83+
</ion-grid>
84+
85+
<button onclick="updateOffset()">Update Offset</button>
86+
</ion-content>
87+
88+
<script>
89+
function updateOffset() {
90+
var dynamicOffsetCol = document.getElementById('dynamicOffsetCol');
91+
var currentOffset = dynamicOffsetCol.offset;
92+
dynamicOffsetCol.offset = currentOffset === '2' ? '4' : '2';
93+
console.log('Updating offset from ' + currentOffset + ' to ' + dynamicOffsetCol.offset);
94+
}
95+
</script>
96+
97+
<style>
98+
.grid-demo ion-col div {
99+
background-color: #f7f7f7;
100+
border: 1px solid #ddd;
101+
padding: 10px 5px;
102+
}
103+
</style>
104+
</ion-app>
105+
</body>
106+
</html>

0 commit comments

Comments
 (0)