javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(spinner): ensure transform doesn't overwrite circular animation (#24643)

Browse Source
This commit is contained in:
Amanda Smith
2022-01-24 15:25:53 -06:00
committed by GitHub
parent 90a9a9c3e8
commit 88ce010418
3 changed files with 94 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/spinner/spinner.scss
View File

@ -115,7 +115,7 @@ svg {
// Spinner: circular
// --------------------------------------------------
:host(.spinner-circular) {
:host(.spinner-circular) svg {
animation: spinner-circular linear infinite;
}

18
core/src/components/spinner/test/transform/e2e.ts Normal file
View File

@ -0,0 +1,18 @@
import { newE2EPage } from '@stencil/core/testing';
// made to catch animation issues when transform is applied to host
// example: https://github.com/ionic-team/ionic-framework/issues/19247
test('spinner: transform', async () => {
const page = await newE2EPage({
url: '/src/components/spinner/test/transform?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
// wait for a bit less than the spinner's duration (to avoid looping before screenshot is taken)
await new Promise(resolve => setTimeout(resolve, 1500));
const compare2 = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

75
core/src/components/spinner/test/transform/index.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Spinner - Transform</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>
<style>
ion-spinner {
transform: translate(-10px, -10px);
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Spinner - Transform</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-spinner slot="start" duration="2000" name="bubbles"></ion-spinner>
<code>bubbles</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="circles"></ion-spinner>
<code>circles</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="circular"></ion-spinner>
<code>circular</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="crescent"></ion-spinner>
<code>crescent</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="dots"></ion-spinner>
<code>dots</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="lines"></ion-spinner>
<code>lines</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="lines-sharp"></ion-spinner>
<code>lines-sharp</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="lines-sharp-small"></ion-spinner>
<code>lines-sharp-small</code>
</ion-item>
<ion-item>
<ion-spinner slot="start" duration="2000" name="lines-small"></ion-spinner>
<code>lines-small</code>
</ion-item>
</ion-list>
</ion-content>
</ion-app>
</body>
</html>