fix(modal): respect safe area insets on tablet-sized screens #17869
ShaneKbuild.yml
on: pull_request
build-core
1m 12s
Matrix: test-core-screenshot
test-core-clean-build
11s
test-core-lint
47s
test-core-spec
45s
verify-screenshots
3s
Matrix: test-angular-e2e
Matrix: test-react-e2e
Matrix: test-react-router-e2e
Matrix: test-vue-e2e
verify-test-angular-e2e
2s
verify-test-react-e2e
2s
verify-test-react-router-e2e
3s
verify-test-vue-e2e
2s
Annotations
54 errors and 7 notices
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/rtl › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
4) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/rtl › should not have visual regressions with tablet viewport
Error: expect(page).toHaveScreenshot(expected) failed
12429 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-md-rtl.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-md-rtl.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 12429 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 12429 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
3) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
12454 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-md-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-md-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 12454 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 12454 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
3) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
12454 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-md-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-md-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 12454 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 12454 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
3) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport
Error: expect(page).toHaveScreenshot(expected) failed
12454 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-md-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-md-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 12454 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 12454 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
2) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
8815 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-rtl.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-rtl.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8815 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8815 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
2) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
8815 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-rtl.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-rtl.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8815 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8815 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
2) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport
Error: expect(page).toHaveScreenshot(expected) failed
8815 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-rtl.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-rtl.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8815 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8815 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
1) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
8865 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8865 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8865 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
1) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport
Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
Error: expect(page).toHaveScreenshot(expected) failed
8865 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8865 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8865 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport:
src/components/modal/test/basic/modal.e2e.ts#L83
1) [Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport
Error: expect(page).toHaveScreenshot(expected) failed
8865 pixels (ratio 0.02 of all image pixels) are different.
Snapshot: modal-basic-present-tablet-ios-ltr.png
Call log:
- Expect "toHaveScreenshot(modal-basic-present-tablet-ios-ltr.png)" with timeout 5000ms
- verifying given screenshot expectation
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- 8865 pixels (ratio 0.02 of all image pixels) are different.
- waiting 100ms before taking screenshot
- taking page screenshot
- disabled all CSS animations
- waiting for fonts to load...
- fonts loaded
- captured a stable screenshot
- 8865 pixels (ratio 0.02 of all image pixels) are different.
81 | await page.setIonViewport();
82 |
> 83 | await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
| ^
84 |
85 | await modal.evaluate((el: HTMLIonModalElement) => {
86 | el.dismiss();
at runVisualTests (/ionic/src/components/modal/test/basic/modal.e2e.ts:83:26)
at /ionic/src/components/modal/test/basic/modal.e2e.ts:101:7
|
|
test-core-screenshot (11, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (11, 20)
The operation was canceled.
|
|
test-core-screenshot (20, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (20, 20)
The operation was canceled.
|
|
test-core-screenshot (13, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (13, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (13, 20)
The operation was canceled.
|
|
test-core-screenshot (18, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (15, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (18, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (18, 20)
The operation was canceled.
|
|
test-core-screenshot (15, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (15, 20)
The operation was canceled.
|
|
test-core-screenshot (6, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (6, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (6, 20)
The operation was canceled.
|
|
test-core-screenshot (19, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (19, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (19, 20)
The operation was canceled.
|
|
test-core-screenshot (17, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (17, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (17, 20)
The operation was canceled.
|
|
test-core-screenshot (1, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (1, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (1, 20)
The operation was canceled.
|
|
test-core-screenshot (2, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (2, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (2, 20)
The operation was canceled.
|
|
test-core-screenshot (4, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (4, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (4, 20)
The operation was canceled.
|
|
test-core-screenshot (5, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (5, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (5, 20)
The operation was canceled.
|
|
test-core-screenshot (16, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (16, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (16, 20)
The operation was canceled.
|
|
test-core-screenshot (14, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (14, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (14, 20)
The operation was canceled.
|
|
test-core-screenshot (3, 20)
The strategy configuration was canceled because "test-core-screenshot._10_20" failed
|
|
test-core-screenshot (3, 20)
Process completed with exit code 12.
|
|
test-core-screenshot (3, 20)
The operation was canceled.
|
|
verify-screenshots
Process completed with exit code 1.
|
|
🎭 Playwright Run Summary
216 skipped
261 passed (2.3m)
|
|
🎭 Playwright Run Summary
1 skipped
537 passed (3.2m)
|
|
🎭 Playwright Run Summary
1 skipped
537 passed (3.2m)
|
|
🎭 Playwright Run Summary
4 skipped
512 passed (3.3m)
|
|
🎭 Playwright Run Summary
4 failed
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/ltr › should not have visual regressions with tablet viewport
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - ios/rtl › should not have visual regressions with tablet viewport
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/ltr › should not have visual regressions with tablet viewport
[Mobile Chrome] › src/components/modal/test/basic/modal.e2e.ts:99:9 › modal: rendering - md/rtl › should not have visual regressions with tablet viewport
531 passed (3.3m)
|
|
🎭 Playwright Run Summary
4 skipped
514 passed (3.6m)
|
|
🎭 Playwright Run Summary
212 skipped
313 passed (3.6m)
|
Artifacts
Produced during runtime
| Name | Size | Digest | |
|---|---|---|---|
|
ionic-angular
|
667 KB |
sha256:b22af286cec7a9aaa3bd92e8da3f70329ed445510a4a24b2681d229777ff97dc
|
|
|
ionic-angular-server
|
8.55 KB |
sha256:bd52d0d6fe5af22dc9a961dfbd1202d958eb582e2a35a07f163238214916c3c0
|
|
|
ionic-core
|
4.58 MB |
sha256:63965cb717f894e99a03b8595178ed3a0555b61305edfd052ba29b357e0c8094
|
|
|
ionic-react
|
212 KB |
sha256:b703b3b1d5adaf40d9f72e1e94a1a1e15245b0198e72f8bf3f78e0f15444b9d5
|
|
|
ionic-react-router
|
27.9 KB |
sha256:58e97d83a20d57ca31f6966577a2be93ae2409d443567087e187c8dcde079727
|
|
|
ionic-vue
|
234 KB |
sha256:868db883e1e130b5aa46c905d269cc1e6213d641b5c9292de8c5720b77e6e414
|
|
|
ionic-vue-router
|
17.1 KB |
sha256:f3afad1501192d4b2fdf930991c0816f944152dd409ea7e7a17b2ae5e5a54388
|
|
|
test-results-10-20
|
6.32 MB |
sha256:1fb1cf2df9415c1b584d69cb791b2df15b6ef82d0f5c812357a23b5ce88d0c26
|
|
|
test-results-11-20
|
502 KB |
sha256:9e29f46e44d4d6a3f9f879591b72ec2c0281f844abc8c30871dfab3df994451e
|
|
|
test-results-12-20
|
446 KB |
sha256:53f59450f946e22dbb1514f29221ebbc2fee4ce2ff19f63659903366f2745ede
|
|
|
test-results-20-20
|
360 KB |
sha256:aaee5f68d82d3581be19b48fe3c68d02cdcefa6c49631bcfa456ec08e919696f
|
|
|
test-results-7-20
|
354 KB |
sha256:bcb6fe719cb11e69b61030cc1dafc3fc88b1555828657933a4a048fb27562e58
|
|
|
test-results-8-20
|
428 KB |
sha256:4867ab1051398e0e467365a3042f44e8adcefc5f2d79fe52a9b837fe7b71c43d
|
|
|
test-results-9-20
|
439 KB |
sha256:9bc9c48033916448490d1f05bf1e2c0e65911ca3ee5724091f8152f63db86504
|
|